/* Keep Safari's extended page background neutral, including its safe areas. */
:root{color-scheme:light}
html,body{background-color:#fff}
.mobile-browser-surface{display:none}

@media (max-width:760px), (max-width:932px) and (pointer:coarse) and (orientation:landscape){
  :root{
    scrollbar-gutter:auto;
    --mobile-dock-height:60px;
    --mobile-dock-offset:14px;
    --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
    --mobile-dock-clearance:calc(var(--mobile-dock-height) + var(--mobile-dock-offset) + var(--mobile-safe-bottom));
    scroll-padding-bottom:calc(var(--mobile-dock-clearance) + 24px);
  }
  /* A narrow white edge is sampled instead of the pinned Hero's colored base.
     Its fade connects the canvas to the safe area without a hard color seam. */
  .mobile-browser-surface{display:block;position:fixed;inset:auto 0 0;z-index:35;height:max(1px,var(--mobile-safe-bottom));background-color:#fff;pointer-events:none}
  .mobile-browser-surface::before{content:'';position:absolute;inset:auto 0 100%;height:28px;background:linear-gradient(to bottom,#ffffff00,#fff)}
  /* The shader/color field paints above this base; Safari must not extrapolate
     the old solid lavender fallback below a viewport-constrained Hero. */
  .glass-surface .color-scene{background-color:#fff}

  .site-header,.menu-mobile-dock{
    position:fixed;inset:auto auto calc(var(--mobile-dock-offset) + var(--mobile-safe-bottom)) 50%;
    transform:translateX(-50%);width:min(328px,calc(100% - 40px));height:var(--mobile-dock-height);
    max-width:none;padding:7px 14px;display:flex;align-items:center;justify-content:space-between;gap:16px;
    border:1px solid #ebe5f2;border-radius:999px;background:#fffffff5;
    box-shadow:0 4px 22px #21142e14;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  }
  .site-header{z-index:40}
  .menu-open .site-header{visibility:hidden}
  .header-brand,.menu-mobile-brand{display:grid;place-items:center;width:44px;height:44px;aspect-ratio:auto;flex-shrink:0}
  .header-brand img,.menu-mobile-brand img{width:40px;height:40px;object-fit:contain}
  .menu-toggle{font-size:17px;width:90px;min-height:44px;padding:0 8px;border:0;box-shadow:none;background:transparent}
  .menu-mobile-dock{z-index:3}
  .menu-close{position:relative;inset:auto;flex-shrink:0;background:transparent}
  .menu-panel{inset:auto 0 0;width:100%;height:min(540px,calc(100dvh - 80px));padding:28px max(28px,env(safe-area-inset-right,0px)) calc(var(--mobile-dock-clearance) + 28px) max(28px,env(safe-area-inset-left,0px));border-radius:28px 28px 0 0}
  .menu-links{padding-block:12px;gap:10px}
  .menu-links a,.menu-links button{font-size:30px;min-height:48px}
  .menu-signature{font-size:13px;margin-top:18px}

  .hero{
    min-height:100svh;display:grid;grid-template-rows:minmax(min-content,1fr) auto;
    align-items:center;justify-items:center;gap:clamp(24px,4svh,36px);
    padding:max(40px,calc(env(safe-area-inset-top,0px) + 16px)) max(24px,env(safe-area-inset-right,0px)) calc(var(--mobile-dock-clearance) + 40px) max(24px,env(safe-area-inset-left,0px));
  }
  .hero-content{width:100%;max-width:520px;margin:0 auto;padding:0;transform:none}
  .hero h1,.final-cta .cta-content h2{font-size:clamp(32px,8.9vw,42px);line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
  .hero h1 span{display:block;white-space:normal;margin-top:6px;text-wrap:balance}
  .hero-content>p,.final-cta .cta-content p{font-size:clamp(17px,4.55vw,20px);line-height:1.45;max-width:34ch;margin:24px auto 28px;text-wrap:pretty}
  .desktop-break{display:none}
  .hero .partners--three{position:relative;inset:auto;transform:none;width:min(100%,430px);margin:0 auto;gap:0}
  .hero .partners--three .partner-row{gap:18px}
  .contact-button,.final-cta .contact-button{width:100%;max-width:470px;height:52px;padding:2px 3px 2px 17px;gap:8px}
  .button-label{font-size:clamp(15px,4.05vw,19px)}
  .button-track{width:28%;min-width:64px}
  .button-arrow img{width:20px;height:20px}

  .about-inner,.solutions-inner,.process-inner{padding-block:64px}
  .about-description{font-size:19px;line-height:1.5}
  .about h2,.section-heading h2,.process-heading h2{text-wrap:balance}
  .section-heading>p,.process-heading p{font-size:18px;line-height:1.5}
  .card-title,.is-open .card-title{font-size:28px;line-height:1.2;text-wrap:balance}
  .card-expansion p,.card-summary{font-size:18px;line-height:1.45}
  .orbit-viewport{height:100svh;min-height:0}
  .orbit-slide h2{font-size:clamp(30px,8.5vw,36px);width:90%;text-wrap:balance}
  .orbit-slide p{font-size:clamp(19px,4.85vw,23px);line-height:1.3;width:88%;max-width:480px}
  .final-cta{min-height:100svh;padding:64px 24px calc(var(--mobile-dock-clearance) + 40px)}
  .final-cta .cta-content{width:100%;max-width:520px;padding:0;margin-block:auto}
  .footer-inner{padding-bottom:calc(var(--mobile-dock-clearance) + 56px)}
  .footer-about>p{font-size:18px;line-height:1.5}
}
@media(max-width:760px) and (max-height:640px){
  .hero{padding-top:max(28px,env(safe-area-inset-top,0px));gap:22px}
  .hero h1{font-size:32px}
  .hero-content>p{font-size:17px;line-height:1.4;margin:18px auto 24px}
}
@media(max-width:932px) and (pointer:coarse) and (orientation:landscape){
  .hero{padding-top:24px;gap:20px}
  .hero h1{font-size:30px}
  .hero-content>p{font-size:16px;max-width:48ch;margin:16px auto 22px}
  .hero .partners--three{width:min(60%,400px)}
  .menu-links a,.menu-links button{font-size:25px}
}