/* Mobile release: an isolated layer. Approved desktop rules remain untouched.
   No-JS content stays visible; JS may arm offscreen reveal states. Native scrolling is kept. */
/* Explicit owner choice: allow native panning, but not pinch enlargement. */
@media (max-width:999px) and (pointer:coarse) { html { touch-action:pan-x pan-y; } }
@media (max-width:999px) {
  /* Self-hosted Arimo Regular keeps Arial-like shapes and identical metrics
     across mobile platforms. No local() lookup or synthetic medium weight. */
  @font-face {
    font-family:'Algorythm Mobile'; font-style:normal; font-weight:400; font-display:swap;
    src:url('assets/fonts/arimo-v36-cyrillic-400.woff2') format('woff2');
    unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }
  @font-face {
    font-family:'Algorythm Mobile'; font-style:normal; font-weight:400; font-display:swap;
    src:url('assets/fonts/arimo-v36-latin-400.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  h1,h2,h3 { font-family:'Algorythm Mobile',Arial,sans-serif; font-weight:400; font-synthesis:none; }
  :root { --pad:clamp(20px,4vw,36px); --radius:24px; }
  html { scroll-padding-top:88px; }
  html,body { max-width:100%; overflow-x:hidden; overflow-x:clip; }
  html,body { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .page-curtain,.site-ending,.hero-content,.hero-lower { min-width:0; max-width:100%; }
  /* overflow:hidden alone does not reliably freeze the iOS document. */
  body.is-dialog-scroll-locked { position:fixed; top:var(--dialog-scroll-top); left:0; right:0; width:100%; overflow:hidden; }
  .section { padding:72px var(--pad); }
  .page-curtain>.section:not(.clients),.page-curtain>.section.faq { scroll-margin-top:-72px; }
  .page-curtain>.clients { scroll-margin-top:-48px; }
  .section-label { gap:16px; margin-bottom:28px; font-size:12px; }
  .section-line { max-width:88px; }
  .reveal-heading,.directions .reveal-heading,.approach h2,.products h2,.start h2,.outcomes h2,.faq h2 {
    font-size:clamp(30px,5.3vw,48px); line-height:1.13; letter-spacing:-.045em;
  }
  .reveal-heading,.directions .reveal-heading { margin-bottom:32px; }
  .section-heading { display:block; margin-bottom:32px; }
  .section-heading>p { margin-top:18px; max-width:440px; font-size:16px; }
  .dark-section { margin-inline:10px; padding-inline:var(--pad); border-radius:26px; }
  /* Compact persistent navigation; native dialog supplies focus containment. */
  .site-header { top:max(12px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right)); gap:10px; align-items:center; }
  .site-header .nav-pill { position:relative; isolation:isolate; min-height:48px; height:48px; padding:6px calc(12px + .25cm); gap:0; border:0; border-radius:100px; background:linear-gradient(150deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.85) 46%,rgba(255,255,255,.89) 100%); box-shadow:0 1px 2px rgba(18,22,36,.05), 0 8px 22px rgba(18,22,36,.08); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); }
  /* Scale the cropped symbol and wordmark together without shrinking tap targets. */
  .site-header .brand-header { width:107.8px; height:23.8px; }
  .site-header .brand-symbol,.site-header .brand-wordmark { height:23.8px; }
  .site-header .brand-symbol { width:23.8px; }
  .site-header .brand-wordmark { width:84px; }
  .site-header .brand-header img { width:191.1px; height:191.1px; top:-84.2233px; left:-40.74px; }
  .site-header .brand-wordmark img { left:-64.54px; top:-85.7521px; }
  .site-header .nav-links,.site-header .nav-action { display:none; }
  /* Avoid a fixed masked backdrop layer at the top of mobile WebViews. */
  .header-frost { display:none; height:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .mobile-menu-trigger:not([hidden]) { display:flex; align-items:center; justify-content:center; flex:0 0 48px; width:48px; min-width:48px; height:48px; padding:0; border:0; border-radius:24px; background:linear-gradient(150deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 46%,rgba(255,255,255,.9) 100%); color:#141414; box-shadow:0 1px 2px rgba(18,22,36,.05), 0 8px 22px rgba(18,22,36,.08); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); }
  /* Light slides across the compact glass pill on the same schedule as desktop. */
  .site-header .nav-pill>* { position:relative; z-index:1; }
  .site-header .nav-pill::after { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; background:linear-gradient(112deg,transparent 26%,rgba(255,255,255,.5) 44%,rgba(255,255,255,.04) 55%,transparent 68%); opacity:0; transition:opacity .45s ease; }
  .site-header .nav-pill:is(:hover,:focus-within)::after { opacity:1; }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .site-header .nav-pill,.mobile-menu-trigger:not([hidden]) { background:#fff; }
  }
  .mobile-menu-trigger[hidden] { display:none; }
  .mobile-menu-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
  #mobile-menu { position:fixed; inset:max(12px,env(safe-area-inset-top)) 12px auto; width:auto; max-width:540px; max-height:calc(100dvh - 24px); margin:0 auto; padding:20px; border-radius:26px; background:var(--paper); overscroll-behavior:contain; overflow:auto; }
  #mobile-menu[open] { animation:mobile-sheet-in .28s cubic-bezier(.22,.68,0,1); }
  .mobile-menu-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; }
  #mobile-menu-title { margin:0; font-size:12px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:#747474; }
  .mobile-menu-close { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:#fff; }
  .mobile-menu-close svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; }
  .mobile-menu-links { display:grid; }
  .mobile-menu-links a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:12px 0; border-top:1px solid #ddddd8; font-size:26px; line-height:1.15; letter-spacing:-.035em; }
  .mobile-menu-links .pixel-arrow { flex:0 0 30px; width:30px; height:15px; color:#747470; pointer-events:none; }
  .mobile-menu-links a:is(:active,:focus-visible) .pixel-arrow { color:var(--ink); }
  .mobile-menu-links a:focus-visible { outline-offset:2px; }
  #mobile-menu .mobile-menu-contact { width:100%; height:54px; min-height:54px; margin-top:18px; border-radius:14px; }
  .mobile-menu-contact .button-icon .pixel-arrow { width:30px; height:15px; }
  /* A composed vertical hero, with room for the original glass illustration. */
  .hero { height:auto; min-height:0; max-height:none; margin:8px; border-radius:26px; background:#eeefed; }
  .hero-content { display:block; padding:112px calc(var(--pad) - 8px) 94px; }
  .hero-content>.eyebrow { font-size:clamp(9px,2.7vw,11px); line-height:1.5; letter-spacing:.04em; white-space:nowrap; }
  .hero h1 { margin-top:20px; white-space:normal; font-size:clamp(36px,6.5vw,58px); line-height:1.12; letter-spacing:-.02em; word-spacing:.04em; overflow-wrap:break-word; }
  .hero h1 br { display:none; }
  .hero h1>span { display:block; }
  .hero-lower { display:flex; flex-direction:column; gap:34px; margin-top:24px; }
  .hero-description { max-width:540px; }
  .hero-description p { max-width:none; margin-bottom:24px; font-size:17px; line-height:1.55; }
  .hero-copy-line { display:inline; white-space:normal; }
  .hero-description .button-dark { min-height:54px; height:54px; padding:3px 20px 3px 3px; gap:14px; border-radius:14px; background:#191919; font-size:15px; transform:none; }
  .hero-description .button-dark .button-icon { width:48px; height:48px; border-radius:11px; }
  .hero .network-card { align-self:flex-end; width:min(100%,340px); margin:0; }
  .hero .network { translate:0 -8px; margin-bottom:-8px; }
  /* Tile edges: 15% - 17.5% / 2 = 6.25%; 85% + 17.5% / 2 = 93.75%. */
  .hero .network-caption { font-size:14px; padding-inline:6.25%; }
  .hero .network-caption:has(.network-contact:not([hidden])) { position:relative; min-height:64px; margin:4px 6.25% 6.25%; padding:10px 54px 10px 12px; border:1px solid #ffffff80; border-radius:16px; background:linear-gradient(145deg,#ffffff26,#ffffff0a 60%,#e5e8f314); box-shadow:inset 0 1px 1px #ffffff26; font-size:13px; }
  .hero .network-caption:has(.network-contact:not([hidden])) .corner-arrow { display:none; }
  /* One full-width contact target: the caption and arrow share a single glass surface. */
  .hero .network-contact:not([hidden]) { position:absolute; inset:0; display:grid; align-items:center; justify-items:end; width:100%; height:100%; margin:0; padding:0 10px; border:0; border-radius:inherit; background:transparent; color:var(--ink); box-shadow:none; transition:background .18s; }
  .hero .network-contact:active { background:#ffffff26; }
  .hero .network-contact:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
  .hero .network-node .network-label { font-size:clamp(8px,2.8cqw,11px); max-width:calc(100% - 6px); }
  /* Reuse the site's existing Meta mark, without changing the desktop SVG. */
  .hero .node-meta .network-icon { display:none; }
  .hero .node-meta::before { content:''; display:block; flex-shrink:0; width:7cqw; height:7cqw; background:url('assets/meta-mark-mobile.svg') center/contain no-repeat; }
  .hero .node-google .network-icon { display:none; }
  .hero .node-google::before { content:''; display:block; flex-shrink:0; width:7cqw; height:7cqw; background:url('assets/google-mark-mobile.svg') center/85% 85% no-repeat; }
  /* Confine the photograph to the bottom instead of sizing it against the full hero. */
  .hero-landscape { inset:auto 0 0; height:clamp(320px,80vw,400px); background-size:cover; background-position:70% bottom; }
  .hero::after { inset:auto 0 0; height:clamp(320px,80vw,400px); background:linear-gradient(180deg,#eeefed 0%,#eeefedb3 15%,transparent 45%,#0a1411bd 100%); }
  .hero-marquee { padding:22px 0; }
  .marquee-set { font-size:18px; gap:36px; padding-right:36px; }
  .marquee-set span::before { font-size:14px; margin-right:18px; }
  .directions .bento { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .directions .direction-card { padding:24px; border-radius:24px; gap:26px; }
  .directions .direction-copy h3 { font-size:26px; }
  .directions .direction-copy p,.directions .bento-stack p { font-size:16px; line-height:1.5; }
  .directions .bento-stack .direction-card { padding:24px; }
  .directions .direction-art { width:100%; max-width:300px; margin-inline:auto; }
  .directions .social-meta .direction-icon { display:none; }
  .directions .social-meta::before { content:''; display:block; width:39px; height:39px; background:url('assets/meta-mark-mobile.svg') center/contain no-repeat; }
  .directions .search-brand { display:block; flex:0 0 22px; width:22px; height:22px; font-size:0; background:url('assets/google-mark-mobile.svg') center/85% 85% no-repeat; }
  /* Restore the approved Approach drawing, previously hidden on small screens. */
  .approach-layout { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px; margin-top:32px; align-items:start; }
  .approach .approach-map.approach-tools { display:flex; padding:0; min-height:0; width:100%; aspect-ratio:440/520; border-radius:22px; }
  .principles { min-width:0; min-height:0; gap:10px; }
  .principle { border-radius:18px; }
  .principle-trigger { min-height:64px; padding:20px 18px; gap:12px; font-size:18px; }
  .principle-trigger>span { font-size:12px; }
  .principle-trigger i { padding-left:0; }
  .principle-body { padding:0 18px 22px; font-size:16px; line-height:1.55; }
  .principle-body.is-animated>.principle-content { padding:0 18px 22px; }
  .clients.clients-marquee { padding-top:48px; padding-bottom:48px; }
  .clients.clients-marquee h2 { font-size:clamp(24px,4vw,32px); margin-bottom:30px; }
  .client-marquee { --client-gap:36px; gap:22px; }
  .client-marquee-group>li { font-size:21px; }
  .client-marquee-row.is-touch-paused .client-marquee-track { animation-play-state:paused; }
  /* Explicit grid areas keep prices and drawings separate, even at 320px. */
  .products .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .products .product-card { display:grid; grid-template-columns:minmax(0,1fr) 112px; column-gap:12px; row-gap:20px; padding:24px; border-radius:24px; }
  .products .product-main { grid-column:1/-1; padding:0; }
  .products .product-title-row { min-height:0; }
  .products .product-title-row h3 { font-size:25px; line-height:1.15; }
  .products .product-promise { min-height:0; margin-top:14px; font-size:16px; line-height:1.5; }
  .products .product-bottom { display:flex; grid-column:1; grid-row:2; position:static; padding:0; margin:0; min-height:0; align-self:end; gap:4px; }
  .products .service-price { flex-wrap:nowrap; column-gap:4px; line-height:1; min-height:28px; font-family:'Algorythm Mobile',Arial,sans-serif; font-weight:400; font-synthesis:none; }
  .service-price .price-amount { font-size:24px; font-weight:400; }
  .service-price .price-currency { font-size:17px; }
  .service-price .price-from,.service-price .price-period { font-size:12px; }
  .service-price .price-period { flex:0 0 auto; }
  .products .service-diagram { grid-column:2; grid-row:2; position:static; width:100%; height:104px; align-self:end; }
  .products .service-diagram>svg { scale:1.15; transform-origin:right bottom; }
  .products .product-card .service-button { margin-top:0; min-height:44px; }
  /* The full diagram enters with its card; only internal accents start on visibility. */
  .product-management.is-mobile-seen .plan-one { scale:1.2 1; }
  .product-management.is-mobile-seen .plan-two { scale:1.15 1; fill:#b3a4ef; }
  .product-automation.is-mobile-seen .diagram-flow-signal { animation:service-flow 2.4s linear 2; }
  .product-automation.is-mobile-seen .flow-out { animation-delay:1.2s; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-top:36px; }
  .steps::before { display:none; }
  .step { position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:16px; row-gap:10px; align-content:start; }
  .step-number { grid-column:1; grid-row:1/3; font-size:22px; line-height:1.25; margin:0; }
  .step h3 { grid-column:2; min-height:0; font-size:23px; line-height:1.2; }
  .step p { grid-column:2; font-size:16px; line-height:1.55; margin:0; }
  .faq.section { padding-top:72px; padding-bottom:72px; }
  .faq-layout { grid-template-columns:1fr; gap:28px; }
  .faq h2 { font-weight:400; }
  /* Questions and form labels keep their separately approved typography. */
  .faq-question { font-family:var(--font); }
  .faq-question { min-height:72px; font-size:18px; font-weight:500; padding:20px 0; gap:16px; }
  .faq-answer,.faq-answer.is-animated>.faq-content { padding-right:12px; padding-bottom:22px; font-size:16px; }
  /* Native disclosure cards keep each result, image and explanation together. */
  .outcomes-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .outcomes-layout>div { min-width:0; }
  .outcomes.has-mobile-results .outcome-tabs,.outcomes.has-mobile-results .outcome-panels { display:none; }
  .mobile-results { display:grid; gap:12px; margin-top:30px; }
  .mobile-result { border:1px solid #363636; border-radius:20px; overflow:hidden; background:transparent; transition:background-color .3s ease,border-color .3s ease; }
  .mobile-result[open] { border-color:#292929; background:#252525; }
  .mobile-result summary { display:grid; grid-template-columns:22px minmax(0,1fr) 18px; gap:10px; align-items:start; padding:22px 16px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; }
  /* Paint only the whole card; a separate pressed fill makes opening look two-stage. */
  .mobile-result summary:active::after { opacity:.6; }
  .mobile-result summary::-webkit-details-marker { display:none; }
  .mobile-result-number { padding-top:3px; font-size:12px; color:#a497d5; }
  .mobile-result summary strong { font-size:18px; line-height:1.35; font-weight:400; letter-spacing:-.025em; color:#f2f2f0; }
  .mobile-result summary::after { content:''; width:16px; height:16px; margin-top:4px; background:linear-gradient(#bdbdb9,#bdbdb9) center/100% 1px no-repeat,linear-gradient(#bdbdb9,#bdbdb9) center/1px 100% no-repeat; transition:transform .25s; }
  .mobile-result[open] summary::after { transform:rotate(45deg); }
  .mobile-result summary:focus-visible { outline:2px solid #d8d8d3; outline-offset:-4px; }
  .mobile-result-body { padding:0 16px 22px; }
  .mobile-result-body img { display:block; width:100%; height:auto; aspect-ratio:560/300; border-radius:14px; }
  .mobile-result-body p { margin-top:18px; font-size:16px; line-height:1.55; color:#bcbcb8; }
  .outcomes .outcome-panel { padding-top:0; }
  .outcome-panels::before { content:none; }
  .outcome-panel[hidden] { display:none; }
  .outcomes .outcome-panel img { height:auto; aspect-ratio:560/300; max-height:320px; border-radius:20px; padding:8px; }
  .outcome-panel p { min-height:0; margin-top:18px; font-size:16px; line-height:1.55; }
  .outcome-footer { grid-template-columns:1fr; gap:24px; margin-top:36px; padding-top:28px; border-top:1px solid #363636; }
  .outcomes .outcome-footer .outcome-note { font-size:13px; line-height:1.75; }
  .outcome-footer .outcome-note span { display:inline; }
  .outcome-socials { display:none; }
  .outcome-social { width:48px; height:48px; flex-basis:48px; }
  .outcome-social+.outcome-social { margin-left:0; }
  /* Long mobile footer stays in flow, including when the keyboard is open. */
  .site-ending,.site-ending.is-reveal { position:relative; bottom:auto; min-height:0; }
  .footer-anchor { scroll-margin-top:-72px; }
  .site-ending .contact { grid-template-columns:minmax(0,1fr); gap:32px; padding:72px var(--pad) 40px; }
  .site-ending .contact h2 { font-size:clamp(36px,5.5vw,50px); margin:18px 0; }
  .contact-intro { font-size:16px; max-width:480px; }
  .site-ending .contact>.contact-socials { margin-top:0; padding-top:8px; }
  .contact-inline-form { padding-top:0; max-width:none; gap:22px; }
  #footer-contact-form label { font-size:17px; font-weight:500; }
  #footer-contact-form label>span { font-weight:400; }
  .contact-inline-form input { min-height:48px; font-size:16px; }
  .contact-inline-form .phone-field { align-items:center; gap:8px; }
  .contact-inline-form .country-trigger { height:44px; min-width:80px; }
  .contact-form-actions { flex-direction:column; align-items:flex-start; gap:12px; }
  .contact-inline-form .form-state { flex-basis:auto; min-height:0; font-size:14px; }
  .site-ending .footer { padding:0 var(--pad) max(28px,env(safe-area-inset-bottom)); }
  .site-ending .footer-top { display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding:28px 0 18px; }
  .site-ending .footer-top nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:0 20px; margin:0; font-size:14px; }
  .site-ending .footer-top nav a { display:flex; align-items:center; min-height:44px; }
  .site-ending .footer-bottom { display:block; padding-top:8px; }
  #contact-dialog,.service-dialog { position:fixed; inset:auto 8px max(8px,env(safe-area-inset-bottom)); width:auto; max-width:620px; margin:0 auto; max-height:calc(100dvh - 24px - env(safe-area-inset-bottom)); padding:26px 22px; border-radius:26px; overflow:auto; overscroll-behavior:contain; scroll-padding-block:20px; }
  #contact-dialog[open],.service-dialog[open] { animation:mobile-sheet-in .28s cubic-bezier(.22,.68,0,1); }
  #contact-dialog .dialog-close,.service-dialog-close { top:10px; right:10px; width:44px; height:44px; }
  /* Only the description scrolls; close and CTA remain outside its scrollport. */
  .service-dialog { padding:0; overflow:hidden; }
  .service-detail-scroll { padding:26px 22px 24px; overscroll-behavior-y:none; touch-action:pan-y; scroll-behavior:auto; }
  /* Keep the same dimming, without live background blur during touch scrolling. */
  #service-dialog::backdrop { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .service-dialog .service-dialog-close { position:absolute; top:10px; right:10px; z-index:3; margin:0; background:rgba(255,255,255,.9); }
  #contact-dialog h2 { padding-right:12px; font-size:30px; margin:12px 0; }
  #contact-form input { height:48px; }
  #contact-form :is(input,textarea) { font-size:16px; scroll-margin-block:24px; }
  .service-dialog h2 { font-size:29px; margin:22px 0 16px; padding-right:20px; }
  .service-detail-lead { font-size:18px; line-height:1.45; }
  .service-detail-section { margin-top:24px; }
  .service-detail-footer { flex-direction:column; align-items:flex-start; gap:14px; margin:0; padding:18px 22px 22px; }
  .service-detail-note { font-size:14px; }
  .back-to-top { right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); width:44px; height:44px; }
  :is(button,a,input,textarea):focus-visible { outline-color:#1800ad; }
  .dark-section :is(button,a):focus-visible { outline-color:#e0e0dc; }
  @keyframes mobile-sheet-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
  .step.has-step-motion,.products .product-card.has-step-motion { opacity:1; transform:none; transition:opacity .7s ease,transform .7s cubic-bezier(.22,.68,0,1); }
  .products .product-card.has-step-motion { transition-duration:1.2s; }
  .step.has-step-motion.is-step-pending,.products .product-card.has-step-motion.is-step-pending { opacity:0; transform:translateY(16px); }
  .products .product-card.has-step-motion:focus-within { opacity:1; transform:none; }
  .hero h1>.mobile-type-copy { display:inline; color:inherit; }
  .mobile-type-copy>span:not(.mobile-type-word) { display:block; color:#898c89; }
  .mobile-type-word { white-space:nowrap; }
  .site-ending .contact h2>.contact-type-copy { display:inline; color:inherit; }
  .contact-type-copy>span:not(.mobile-type-word) { color:#888; }
  .contact-scroll-char { opacity:0; }
  .is-hero-typing .mobile-type-char { animation:mobile-type-in .01s steps(1,end) both; animation-delay:var(--type-delay); }
  @keyframes mobile-type-in { from { opacity:0; } to { opacity:1; } }
}
@media (max-width:720px) {
  :root { --pad:22px; }
  /* Move the rounded photo edge up, leaving paper below it. Browser chrome
     height varies; do not tie the layout to a guessed address-bar height. */
  .hero { margin-bottom:calc(8px + .5cm); }
  .hero-content { padding-top:100px; padding-bottom:calc(82px - .5cm); }
  .hero-lower { margin-top:24px; }
  .hero h1 { font-size:clamp(28px,8.6vw,48px); }
  .reveal-heading,.directions .reveal-heading,.approach h2,.products h2,.start h2,.outcomes h2,.faq h2 {
    font-size:clamp(26px,7.63vw,30px);
  }
  /* Phone hero: heading and drawing only; desktop copy and CTA stay intact. */
  .hero-description { display:contents; }
  .hero-description p { display:none; }
  .hero .network-card { order:1; align-self:center; width:min(100%,320px); }
  .hero-description .button-dark { display:none; }
  .directions .bento { grid-template-columns:minmax(0,1fr); }
  .directions .direction-card { min-height:0; }
  .directions .bento-stack { grid-template-rows:auto auto; gap:14px; }
  .directions .bento-stack .direction-card { min-height:0; gap:28px; }
  .directions .direction-copy h3 { font-size:26px; }
  .directions .goal-dial { width:180px; height:180px; }
  .directions .goal-core { inset:38px; }
  .directions .goal-art { gap:20px; padding:8px 0; }
  .approach-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .approach .approach-map.approach-tools { aspect-ratio:440/420; max-width:360px; margin-inline:auto; }
  .products .product-grid { grid-template-columns:minmax(0,1fr); }
  .products .product-card { grid-template-columns:minmax(0,1fr) 120px; }
  .steps { grid-template-columns:minmax(0,1fr); gap:32px; }
  .step:not(:last-child)::before { content:''; position:absolute; top:36px; bottom:-18px; left:13px; width:1px; background:#d5d5d0; }
  .step h3 br { display:initial; }
}
@media (max-width:380px) {
  :root { --pad:18px; }
  .site-header { left:12px; right:12px; gap:8px; }
  .site-header .nav-pill { padding-inline:calc(8px + .25cm); }
  .hero-content { padding-top:88px; }
  .directions .direction-card,.directions .bento-stack .direction-card { padding:22px; }
  .directions .direction-copy h3 { font-size:24px; }
  .products .product-card { padding:20px; column-gap:8px; grid-template-columns:minmax(0,1fr) 100px; }
  .products .product-title-row h3 { font-size:23px; }
  .products .service-diagram { height:100px; }
  .service-price .price-amount { font-size:22px; }
  .service-price .price-from,.service-price .price-period { font-size:11px; }
  .mobile-result summary { padding:20px 12px; gap:8px; }
  .mobile-result summary strong { font-size:17px; }
  .mobile-result-body { padding-inline:12px; }
  #contact-dialog { padding:24px 18px; }
  .service-detail-scroll { padding:24px 18px; }
  .service-detail-footer { padding-inline:18px; }
  #contact-dialog h2 { font-size:28px; }
}
@media (max-width:999px) and (max-height:520px) {
  .service-detail-footer { gap:8px; padding-block:10px; }
  .service-detail-note { max-width:none; font-size:13px; line-height:1.3; }
  #service-dialog .service-detail-footer .service-button { height:44px; min-height:44px; }
}
@media (min-width:721px) and (max-width:999px) {
  .hero-content { padding-bottom:100px; }
  .hero-lower { flex-direction:row; align-items:center; gap:28px; }
  .hero-description { flex:1; min-width:0; }
  .hero .network-card { width:42%; max-width:320px; align-self:center; }
  .products .product-card { padding:22px; grid-template-columns:minmax(0,1fr) 94px; gap:20px 10px; }
  .products .product-title-row h3 { font-size:24px; }
  .products .service-diagram { height:100px; }
}
@media (max-width:999px) and (hover:none) {
  /* Avoid a hover state that sticks after a touch; retain keyboard focus. */
  .button:hover { transform:none; }
  .client-marquee-track:has(.client-marquee-group>li:hover) { animation-play-state:running; }
  .client-marquee-row.is-touch-paused .client-marquee-track { animation-play-state:paused; }
  .product-card:hover:not(:focus-within) :is(.diagram-front,.diagram-back,.diagram-result,.diagram-step,.diagram-lens,.diagram-core) { translate:none; }
  .product-card:hover:not(:focus-within) .diagram-signal { animation:none; }
  .service-button:not(:focus-visible):hover::before { width:var(--icon-width); }
  .service-button:not([data-service-details]):not(:focus-visible):hover .button-icon { left:0; }
  .service-button:not(:focus-visible):hover .button-label { transform:none; }
  :is(.mobile-menu-trigger,.hero-description .button-dark,.service-button,.footer-submit):active { opacity:.72; }
}
@media (max-width:999px) and (prefers-reduced-motion:reduce) {
  #mobile-menu[open],#contact-dialog[open],.service-dialog[open] { animation:none; }
  .is-hero-typing .mobile-type-char { animation:none; }
  .step.has-step-motion,.step.has-step-motion.is-step-pending,.products .product-card.has-step-motion,.products .product-card.has-step-motion.is-step-pending { opacity:1; transform:none; transition:none; }
  .contact-scroll-char { opacity:1; }
  .mobile-result,.mobile-result summary::after { transition:none; }
  .hero .network-contact { transition:none; }
}
@media (max-width:720px) {
  /* Full-width sheet at the bottom on phones; sits above the sticky footer CTA. */
  .cookie-consent { left:10px; right:10px; width:auto; bottom:10px; padding:22px 20px; border-radius:22px; }
  .cookie-consent h2 { font-size:20px; }
  .cookie-actions { gap:8px; }
  .cookie-button { flex:1 1 100%; }
}