.mobile-service-tabs{display:none}
@media(max-width:850px){
 #expertises.expertise{height:auto!important;margin-top:24px;padding:40px 0 56px}
 #expertises .showcase-sticky{position:static;display:flex;flex-direction:column;gap:24px;min-height:0!important}
 #expertises .section-top{width:100%;padding:0 8px}
 #expertises .section-top h2{font-size:28px;line-height:1.25;margin:0;transform:none!important;visibility:visible!important}
 #expertises .service-stage{width:100%;max-width:510px;border-radius:26px;flex:none}
 #expertises .mobile-service-tabs{display:flex;width:100%;gap:5px;padding:5px;background:#f0f3f8;border:1px solid #e3e8f0;border-radius:18px}
 .mobile-service-tabs button{flex:1;min-width:0;min-height:48px;padding:8px 4px;border:0;border-radius:13px;background:transparent;color:#53657b;font:600 12px Manrope,sans-serif;cursor:pointer}
 .mobile-service-tabs button[aria-pressed=true]{background:#183952;color:white;box-shadow:0 3px 9px #17395920}
 .mobile-service-tabs button:focus-visible{outline:3px solid #a79efd;outline-offset:2px}
 #expertises .showcase-copy{padding:0 8px;width:100%}
 #expertises .service-choice:not(.active){display:none}
 #expertises .service-choice{border:0}
 #expertises .service-choice:after,#expertises .choice-plus{display:none}
 #expertises .service-choice>.service-heading>button{padding:0 0 15px;font-size:27px;line-height:1.2;pointer-events:none}
 #expertises .choice-body{padding:0;animation:mobile-service-copy .35s ease both}
 #expertises .choice-body p{font-size:16px;line-height:1.65;max-width:none}
 #expertises .choice-body ul{font-size:15px;gap:12px}
 #expertises .showcase-contact{margin-top:24px}
 #expertises.intro-pending .service-stage,#expertises.intro-pending .service-choice,#expertises.intro-pending .showcase-contact{opacity:1;visibility:visible;pointer-events:auto}
 .about-section h2{transform:none!important;font-size:clamp(28px,6vw,42px)!important;line-height:1.2!important}
 .about-section h2 span{white-space:normal!important}
 .invitation-section .invitation-intro-letter,.invitation-section .invitation-line{animation:none!important;filter:none!important;transform:none!important}
}
@keyframes mobile-service-copy{from{opacity:0}to{opacity:1}}
@media(max-width:850px){
 #expertises .service-choice:nth-child(1){--axis-gradient:linear-gradient(110deg,#147e9c,#3267c8,#8057ba)}
 #expertises .service-choice:nth-child(2){--axis-gradient:linear-gradient(110deg,#8d477d,#b14973,#b56436)}
 #expertises .service-choice:nth-child(3){--axis-gradient:linear-gradient(110deg,#347b50,#178177,#247999)}
}
@media(max-width:700px){#expertises .showcase-contact{display:none!important}}
/* Mobile uses the persistent service selector instead of in-scene next buttons. */
@media(max-width:850px){
 #expertises .scene-navigation,
 #expertises [data-next-axis]{display:none!important}
}
/* Mobile scenes: independent typography and reserved space for every beat. */
@media(max-width:850px){
 #expertises .scene-discover{display:none!important}
 #expertises .service-stage{aspect-ratio:auto;min-height:480px;height:480px;padding:0}
 #expertises .film{min-height:480px;height:480px}
 #expertises .film-title{top:28px;height:auto;left:5%;width:90%;margin:0;font-size:24px;line-height:1.2}
 #expertises .position-story{top:110px;left:6%;width:88%}
 #expertises .position-inputs{gap:14px}
 #expertises .position-inputs>div{padding:16px 6px;font-size:13px;line-height:1.4;min-height:104px;letter-spacing:-.3px}
 #expertises .position-result{padding:24px 0 12px}
 #expertises .position-result strong{font-size:clamp(19px,5.5vw,27px);line-height:1.25;letter-spacing:-.7px}
 #expertises .position-shared{margin:15px auto 0;max-width:240px;font-size:13px;line-height:1.5}
 #expertises .film-web.browser-restored{top:88px;left:9%;width:82%;padding:14px;border-radius:18px}
 #expertises .browser-restored .demo-browser-bar{padding-bottom:10px;margin-bottom:12px}
 #expertises .browser-restored .demo-brand{margin-bottom:12px}
 #expertises .browser-restored .demo-web-hero{padding:15px 12px}
 #expertises .browser-restored .demo-web-hero strong{font-size:22px;line-height:1.2;margin:0;max-width:none;letter-spacing:-.7px}
 #expertises .browser-restored .demo-web-hero em{margin-top:12px}
 #expertises .film-brand .film-ending{top:auto;bottom:34px;left:8%;width:43%;font-size:18px;line-height:1.4;z-index:5}
 #expertises .film-brand .laptop-model{top:auto!important;bottom:3%!important;right:0!important;width:53%!important;height:29%!important}
 #expertises .film-brand .phone-model{top:auto!important;bottom:10%!important;right:4%!important;width:13%!important;height:18%!important}
 #expertises .film-marketing .film-title{display:block}
 #expertises .film-marketing .discovery-story{top:88px;left:7%;right:7%}
 #expertises .film-marketing .discovery-question{font-size:12px;padding:12px;gap:9px}
 #expertises .film-marketing .discovery-answer.discovery-simple{padding:29px 0 10px}
 #expertises .film-marketing .discovery-simple strong{font-size:28px}
 #expertises .film-marketing .discovery-simple p{font-size:13px;line-height:1.4}
 #expertises .film-marketing .discovery-recognition.discovery-conversation{margin-top:23px}
 #expertises .client-chat-bubble{padding:15px 16px;font-size:14px;line-height:1.5}
 #expertises .potential-client{font-size:11px}
 #expertises .film-marketing .discovery-payoff{left:5%;width:90%;bottom:30px;font-size:19px;line-height:1.4}
}
/* Optical alignment and original device viewport proportions. */
@media(max-width:850px){
 #expertises .film-strategy .film-title{top:0;height:110px;display:flex;align-items:center;justify-content:center}
 #expertises .position-shared{max-width:none;width:100%;font-size:clamp(10px,2.75vw,13px);white-space:nowrap;gap:6px;letter-spacing:-.2px}
 #expertises .position-check{flex-shrink:0;width:18px;height:18px;font-size:11px}
 #expertises .film-brand{container-type:inline-size}
 #expertises .film-brand .laptop-model{left:auto!important;right:3%!important;bottom:24px!important;width:51%!important;height:auto!important;aspect-ratio:51 / 41.04}
 #expertises .film-brand .phone-model{left:auto!important;right:7.5%!important;bottom:calc(24px + 10.8cqw)!important;width:12%!important;height:auto!important;aspect-ratio:12 / 21.6}
 #expertises .film-brand .film-ending{left:9%;bottom:48px;top:auto;width:42%;font-size:18px;line-height:1.4;margin:0;text-align:left}
}
@media(max-width:850px){html body .hero-discover.ui-cta{display:none!important}}
.mobile-contact-dock{display:none}
@media(max-width:850px){
 .about-layout{display:block}
 .about-copy>.about-visual{width:100%;max-width:420px;margin:20px auto 36px;padding:0}
 .about-copy .about-portrait-scene{height:clamp(330px,100vw,440px)}
}
@media(max-width:700px){
 html{scroll-padding-bottom:140px}
 body{padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))}
 .mobile-contact-dock{display:block;position:fixed;inset:auto 0 0;z-index:90;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:#fffffff0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid #dbe4ef;box-shadow:0 -6px 30px #1739590d}
 .mobile-dock-caption{margin:0 auto 9px;max-width:470px;font:500 12px Manrope,sans-serif;color:#65768b;display:flex;align-items:center;gap:7px}
 .mobile-dock-caption b{font-weight:700;color:#193b58}
 .mobile-dock-actions{display:grid;grid-template-columns:1fr 1.7fr;gap:10px;max-width:470px;margin:auto}
 .mobile-dock-actions a{min-height:50px;display:flex;justify-content:center;align-items:center;gap:9px;border-radius:14px;font:650 14px Manrope,sans-serif;text-decoration:none;border:1px solid #dce5ef;color:#193b58;background:#f3f6fa}
 .mobile-dock-actions .dock-book{background:linear-gradient(120deg,#183b58,#295077);border-color:transparent;color:#fff;box-shadow:0 4px 12px #17395918}
 .mobile-dock-actions a:active{filter:brightness(.92)}
 .mobile-dock-actions a:focus-visible{outline:3px solid #a79efd;outline-offset:3px}
 body:has(#contact-dialog[open]) .mobile-contact-dock,body:has(.cookie-panel:not([hidden])) .mobile-contact-dock,.mobile-contact-dock.keyboard-active{display:none}
}

/* Mobile: the promise flows directly into the services. */
@media (max-width: 850px) {
  .promise-next.ui-cta { display: none !important; }
}

/* Continuous mobile reading: reveal content before it reaches the reading zone. */
@media(max-width:850px){
 .value-promise.section{padding-top:42px;padding-bottom:30px;transition:none}
 .value-promise.section.promise-retired{opacity:1;pointer-events:auto}
 .value-promise.is-revealed h2>span{animation-duration:.65s;animation-delay:0s}
 .value-promise.is-revealed .value-understand{animation-delay:.1s}
 .value-promise.is-revealed .value-choice{animation-delay:.2s}
 #expertises.expertise{margin-top:0;padding-top:24px;padding-bottom:30px}
 .approach-benefits.section{padding-top:36px;padding-bottom:24px}
 .approach-benefits+.intro.about-section{padding-top:40px;padding-bottom:48px}
 .invitation-section.section{padding-top:48px;padding-bottom:48px}
 .invitation-section.invitation-ready .invitation-intro,
 .invitation-section.invitation-ready .invitation-intro-letter,
 .invitation-section.invitation-ready .invitation-line,
 .invitation-section.invitation-ready .invitation-cta{opacity:1;visibility:visible;filter:none;transform:none;animation:none!important}
 .faq.section{padding-top:40px;padding-bottom:40px}
 .faq summary{min-height:48px;align-items:center}
}
@media(max-width:700px){
 html{scroll-padding-top:20px;scroll-padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))}
 #notre-promesse{scroll-margin-top:0}
 body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:850px){
 html body .invitation-section.section{padding-top:48px!important;padding-bottom:48px!important}
 html body .invitation-section.invitation-ready .invitation-intro,
 html body .invitation-section.invitation-ready .invitation-intro-letter,
 html body .invitation-section.invitation-ready .invitation-line,
 html body .invitation-section.invitation-ready .invitation-cta{opacity:1!important;visibility:visible!important}
}
/* Mobile booking sheet, anchored to the contact dock. */
.contact-sheet-footer{display:none}
@media(max-width:700px){
 html body #contact-dialog{inset:auto 0 0;width:100%;max-width:none;height:calc(100dvh - 24px);max-height:none;margin:0;padding:0;border:0;border-top:1px solid #ffffff;border-radius:26px 26px 0 0;overflow:hidden;background:#fff;box-shadow:0 -18px 80px #132d4930}
 html body #contact-dialog[open]{display:flex;flex-direction:column;animation:contact-sheet-rise .55s cubic-bezier(.22,1,.36,1) both}
 #contact-dialog::before{content:'';position:absolute;top:9px;left:calc(50% - 20px);width:40px;height:4px;border-radius:9px;background:#d7dfe8;z-index:2}
 #contact-dialog::backdrop{background:#152c4660;backdrop-filter:blur(8px)}
 #contact-dialog .contact-close{position:absolute;top:13px;right:14px;float:none;margin:0;width:36px;height:36px;z-index:5}
 #contact-dialog #contact-workspace{display:block;flex:1;min-height:0;width:100%;overflow-y:auto;overscroll-behavior:contain;scroll-padding:24px;padding-top:38px}
 #contact-dialog .contact-human{display:none}
 #contact-dialog .contact-scheduling{padding:16px 0 20px;min-height:0}
 #contact-dialog .contact-calendar-heading{padding:0 22px 18px}
 #contact-dialog .contact-calendar-heading h3,#contact-dialog #booking-title{font-size:25px;letter-spacing:-.04em;padding-right:15px}
 #contact-dialog .contact-meet{margin-top:12px;font-size:11px;max-width:290px}
 #contact-dialog .contact-calendar{height:650px;min-height:580px}
 #contact-dialog .contact-message-form{padding:0 22px 16px}
 #contact-dialog .contact-message-form input,#contact-dialog .contact-message-form textarea{font-size:16px}
 #contact-dialog .contact-sheet-footer{display:block;flex:none;padding:0 18px calc(12px + env(safe-area-inset-bottom,0px));background:#fdfdff;border-top:1px solid #e4eaf2;box-shadow:0 -8px 24px #193b5808}
 .sheet-contact-options{display:grid;grid-template-columns:repeat(3,1fr);max-width:470px;margin:0 auto 10px;border-bottom:1px solid #e4eaf2}
 .sheet-contact-options a,.sheet-contact-options button{min-height:49px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 4px;background:none;border:0;color:#536b82;font:600 12px Manrope,sans-serif;text-decoration:none;border-radius:8px}
 .sheet-contact-options button[aria-pressed=true]{color:#1369ec;background:#edf3ff}
 #contact-dialog .mobile-dock-actions button{min-height:50px;display:flex;align-items:center;justify-content:center;gap:9px;padding:8px;border-radius:14px;font:650 14px Manrope,sans-serif;cursor:pointer}
 #contact-dialog .mobile-dock-actions button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #ffffff30,0 4px 12px #17395918}
 #contact-dialog .sheet-contact-options :is(a,button):focus-visible{outline:2px solid #1369ec;outline-offset:0}
}
@keyframes contact-sheet-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html body #contact-dialog[open]{animation:none}}
/* Keep the hero's two contact actions together on narrow screens. */
@media(max-width:700px){
 html body .hero .hero-contact-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px;width:100%}
 html body .hero .hero-contact-row .hero-phone{min-width:0;min-height:46px;justify-content:center;font-size:clamp(17px,5vw,25px);letter-spacing:-.7px;white-space:nowrap;gap:5px}
 html body .hero .hero-contact-row .phone-label{font-size:clamp(8px,2.35vw,11px);gap:4px;letter-spacing:0;white-space:nowrap}
 html body .hero .hero-contact-row .hero-actions{min-width:0;width:100%;display:block}
 html body .hero .hero-contact-row .ui-cta.cta-visio{width:100%;min-height:46px;padding:12px 7px;gap:6px;justify-content:center;font-size:clamp(10px,2.8vw,12px);letter-spacing:-.2px;white-space:nowrap}
 html body .hero .hero-contact-row .ui-cta.cta-visio>span[aria-hidden]{font-size:12px}
}
/* A quiet invitation to continue, after the mobile hero's contact actions. */
.hero-scroll-cue{display:none}
@media(max-width:700px){
 .hero .hero-scroll-cue{display:flex;width:max-content;max-width:100%;min-height:44px;align-items:center;justify-content:center;gap:10px;margin:18px auto -22px;padding:10px 14px;color:#fff;font:500 12px/1.5 Manrope,sans-serif;letter-spacing:0;text-decoration:none;border:0;background:none;box-shadow:none;border-radius:8px;opacity:0;visibility:hidden}
 .hero.bird-entered .hero-scroll-cue{animation:hero-cue-arrive .7s ease 2.6s both}
 .hero.bird-entered .hero-scroll-cue span{font-size:12px;animation:hero-cue-down 1.6s ease-in-out 3.3s 2}
 .hero .hero-scroll-cue:hover{color:#fff;background:#ffffff0d}
 .hero .hero-scroll-cue:focus-visible{outline:2px solid #fff;outline-offset:3px}
}
@keyframes hero-cue-arrive{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@keyframes hero-cue-down{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.hero .hero-scroll-cue{opacity:1;visibility:visible;animation:none!important}.hero .hero-scroll-cue span{animation:none!important}}
/* Center the Google rating beneath the entire mobile statement. */
@media(max-width:800px){
 .manifesto-egg .manifesto-copy .manifesto-signature{display:contents}
 .manifesto-egg .manifesto-copy .manifesto-signature .manifesto-rating{display:flex;width:100%;justify-content:center;align-items:center;justify-self:center;left:0;margin-inline:auto}
}

/* Keep the FAQ heading on its two intended lines on phones. */
@media(max-width:700px){.faq.section h2{font-size:clamp(24px,7.2vw,40px);line-height:1.15;letter-spacing:-.035em;max-width:none}}