@import url("tokens.css?v=20261018-2");

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%}
section[id]{scroll-margin-top:var(--nav-height)}
.page-inner section[id]{scroll-margin-top:calc(var(--nav-height) + var(--lnav-height))}
body{
  margin:0; background:var(--surface-page); color:var(--text-primary);
  font-family:var(--font-text); font-size:var(--text-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}
::selection{background:rgba(0,113,227,.18)}
.skip-link{position:fixed; top:8px; left:8px; z-index:1000; padding:8px 16px; background:var(--carbon); color:var(--white); border-radius:var(--radius-pill); font-size:14px; transform:translateY(-200%)}
.skip-link:focus{transform:none}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* =========================================================
   Layout
   ========================================================= */
.container{width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter)}
.container--wide{max-width:var(--page-max)}
.section{padding-block:var(--section-y); background:var(--surface-page)}
.section.dotted,.service-section.dotted{background:var(--surface-canvas)}
.section--compact{padding-block:clamp(56px,6vw,96px)}

.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-10) var(--space-8)}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-12) var(--space-8)}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-10) var(--space-8)}

/* =========================================================
   Type
   ========================================================= */
.d-xl,.d-lg,.d-md,.d-sm{font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance}
.d-xl{font-size:var(--text-hero); line-height:var(--lh-hero); letter-spacing:var(--ls-hero)}
.d-lg{font-size:var(--text-display); line-height:var(--lh-display); letter-spacing:var(--ls-display)}
.d-md{font-size:var(--text-heading); line-height:var(--lh-heading); letter-spacing:var(--ls-heading)}
.d-sm{font-size:var(--text-heading-sm); line-height:var(--lh-heading-sm); letter-spacing:var(--ls-heading-sm)}
.lead{font-size:var(--text-subheading); line-height:1.38; font-weight:400; color:var(--text-secondary); max-width:40ch; letter-spacing:var(--ls-subheading); text-wrap:pretty}
.body-sm{font-size:var(--text-body); line-height:var(--lh-body); color:var(--text-secondary); text-wrap:pretty}
.label{font-size:var(--text-caption); line-height:var(--lh-caption); color:var(--text-secondary); font-weight:400}
a.link,.card a,.body-sm a{color:var(--action-link)}
a.link:hover,.card a:hover,.body-sm a:hover{text-decoration:underline}

/* =========================================================
   Buttons — two radii in the whole system; this is the pill one
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:28px;
  padding:11px 21px; border-radius:var(--radius-pill); border:1px solid transparent;
  font-family:var(--font-text); font-size:var(--text-body); font-weight:400; line-height:1.18; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap; transition:background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.btn--fill,.btn--primary{background:var(--action-fill); color:var(--white)}
.btn--fill:hover,.btn--primary:hover{background:var(--apple-blue-hover)}
.btn--fill:active,.btn--primary:active{background:var(--apple-blue-pressed)}
.btn--outline,.btn--secondary,.btn--glass{background:transparent; color:var(--action-link); border-color:var(--action-link)}
.btn--outline:hover,.btn--secondary:hover,.btn--glass:hover{background:var(--action-link); color:var(--white)}
.btn--sm{padding:8px 16px; font-size:var(--text-body-sm)}
.btn--xs{padding:4px 11px; font-size:var(--text-caption); line-height:1.33}
.btn[disabled]{background:var(--surface-pebble); color:var(--text-tertiary); cursor:not-allowed}
.btn span[aria-hidden]{display:none}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center}
/* dark surfaces: outlined action switches to the decorative blue for contrast */
.on-dark .btn--outline,.tile--dark .btn--outline{color:var(--action-link-on-dark); border-color:var(--action-link-on-dark)}
.on-dark .btn--outline:hover,.tile--dark .btn--outline:hover{background:var(--action-link-on-dark); color:var(--onyx)}

/* =========================================================
   Global nav — 44px of frosted glass
   ========================================================= */
.gnav{position:fixed; top:0; left:0; right:0; z-index:90; background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px)}
.gnav__inner{display:flex; align-items:center; gap:var(--space-8); height:var(--nav-height); max-width:1024px; margin:0 auto; padding:0 22px}
.gnav__brand{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--text-primary); white-space:nowrap}
.gnav__brand svg{fill:currentColor}
.gnav__links{display:flex; justify-content:space-between; flex:1; margin:0; padding:0; list-style:none}
.gnav__links a{display:block; padding:0 8px; line-height:var(--nav-height); font-size:12px; color:rgba(0,0,0,.8); transition:color var(--duration-fast) var(--ease)}
.gnav__links a:hover{color:var(--onyx)}
.gnav__links a[aria-current="page"]{color:var(--onyx); font-weight:600}
.gnav__note{font-size:12px; color:var(--text-secondary); white-space:nowrap}
.gnav__menu{display:none; position:relative; width:44px; height:44px; margin-right:-12px; padding:0; border:0; background:none; cursor:pointer}
.gnav__menu span{position:absolute; left:15px; width:16px; height:1.2px; background:var(--carbon); border-radius:1px; transition:transform .3s var(--ease), top .3s var(--ease)}
.gnav__menu span:first-child{top:18px}
.gnav__menu span:last-child{top:25px}
.gnav.is-open .gnav__menu span:first-child{top:21.5px; transform:rotate(45deg)}
.gnav.is-open .gnav__menu span:last-child{top:21.5px; transform:rotate(-45deg)}
.gnav__panel{position:absolute; top:var(--nav-height); left:0; right:0; height:calc(100dvh - var(--nav-height)); padding:var(--space-6) 48px var(--space-12); overflow:auto;
  background:var(--frost)}
.gnav.is-open{background:var(--frost)}
.gnav__panel[hidden]{display:none}
.gnav__panel ul{margin:0; padding:0; list-style:none}
.gnav__panel li{opacity:0; transform:translateY(-6px); animation:menu-in .5s var(--ease) forwards; animation-delay:calc(var(--i,0) * 30ms + 60ms)}
.gnav__panel a{display:block; padding:6px 0; font-family:var(--font-display); font-size:28px; font-weight:600; line-height:1.14; letter-spacing:-.012em; color:var(--text-primary)}
.gnav__panel a[aria-current="page"]{color:var(--text-secondary)}
.gnav__panel-note{margin-top:var(--space-10); font-size:12px; color:var(--text-secondary)}
@keyframes menu-in{to{opacity:1; transform:none}}
body.nav-open{overflow:hidden}

/* =========================================================
   Local nav — sticks once the global bar has scrolled away
   ========================================================= */
.lnav{position:sticky; top:var(--nav-height); z-index:80; margin-top:var(--nav-height); background:rgba(255,255,255,.72); border-bottom:1px solid rgba(0,0,0,.16);
  -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px)}
.lnav__inner{display:flex; align-items:center; gap:var(--space-6); height:var(--lnav-height); max-width:1024px; margin:0 auto; padding:0 22px}
.lnav__title{margin:0; font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:.011em; white-space:nowrap; margin-right:auto}
.lnav__links{display:flex; gap:var(--space-6); margin:0; padding:0; list-style:none}
.lnav__links a{font-size:12px; color:var(--text-primary); opacity:.8; transition:opacity var(--duration-fast)}
.lnav__links a:hover{opacity:1; color:var(--action-link)}
.lnav .btn--xs{flex:0 0 auto}

/* =========================================================
   Reveal
   ========================================================= */
.js .reveal{opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}
.line{display:block}

/* =========================================================
   Inner-page hero — centred product-style headline over a full-bleed photograph
   ========================================================= */
.page-hero{background:var(--surface-canvas); padding:clamp(56px,7vw,104px) 0 0; overflow:hidden; text-align:center}
.page-hero .container{max-width:none; padding:0}
.page-hero__grid{display:flex; flex-direction:column; align-items:center}
.page-hero__copy{display:flex; flex-direction:column; align-items:center; max-width:880px; padding:0 var(--gutter) clamp(48px,5vw,72px)}
.page-hero__eyebrow{margin:0 0 var(--space-3); font-size:var(--text-subheading); font-weight:600; letter-spacing:.011em; color:var(--text-secondary)}
.page-hero__title{font-size:var(--text-hero); line-height:var(--lh-hero); letter-spacing:var(--ls-hero); margin:0 0 var(--space-5)}
.page-hero__title .line{display:inline}
.page-hero__title .line + .line::before{content:" "}
.page-hero__lead{font-size:var(--text-tagline); line-height:var(--lh-tagline); font-weight:400; letter-spacing:.004em; color:var(--text-primary); max-width:32ch; margin:0 0 var(--space-8); text-wrap:balance}
.page-hero .hero__actions{justify-content:center}
.page-hero__media{position:relative; width:100%; height:clamp(340px,52vw,720px); margin:0; overflow:hidden; background:var(--pebble)}
.page-hero__media img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 2s var(--ease)}
.page-hero__media.is-in img{transform:none}
.about-hero__media img{object-position:50% 10%; transform-origin:50% 15%}
.page-hero__stat{position:absolute; left:50%; bottom:var(--space-6); transform:translateX(-50%); display:flex; align-items:baseline; gap:10px; padding:8px 18px;
  background:rgba(245,245,247,.72); border-radius:var(--radius-pill); -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px); white-space:nowrap}
.page-hero__stat strong{font-size:14px; font-weight:600}
.page-hero__stat span{font-size:12px; color:var(--text-secondary)}

/* =========================================================
   Shared components (inner pages)
   ========================================================= */
.head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-4); max-width:var(--content); margin:0 auto var(--space-16)}
.head__row{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-5)}
.head--center .lead{text-align:center}
.head .label{font-size:var(--text-body); color:var(--text-secondary)}

/* "No cards inside a section": cards are typographic blocks separated by a hairline */
.card{position:relative; padding:var(--space-6) 0 0; border-top:1px solid var(--border-hairline)}
.card .d-sm,.card .d-md,.card h2,.card h3{margin-bottom:var(--space-3)}
.card .d-md{font-size:var(--text-heading-sm); line-height:var(--lh-heading-sm)}
.card__topline{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5)}
.card__index{font-size:var(--text-caption); color:var(--text-secondary)}

.icon-badge{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 40px; color:var(--decor)}
.icon-badge svg{width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}

.feature-list{display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; padding:0; margin:var(--space-6) 0 0}
.feature-list li{padding:6px 14px; border:1px solid var(--border-hairline); border-radius:var(--radius-pill); font-size:var(--text-body-sm); color:var(--text-primary)}
.tag{display:inline-block; font-size:var(--text-caption); font-weight:600; color:var(--text-secondary)}

.assure{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-3)}
.assure .icon-badge{margin-bottom:var(--space-2)}
.assure__value{font-family:var(--font-display); font-size:var(--text-heading-sm); font-weight:600; letter-spacing:var(--ls-heading-sm)}
.assure p:not(.assure__value){font-size:var(--text-body); color:var(--text-secondary); max-width:30ch}

.steps{display:grid; gap:var(--space-6)}
.step{display:grid; grid-template-columns:auto auto 1fr; gap:var(--space-4); align-items:start; padding-top:var(--space-6); border-top:1px solid var(--border-hairline)}
.step__num{font-size:var(--text-caption); font-weight:600; color:var(--text-secondary); padding-top:8px}
.step .d-sm{margin-bottom:var(--space-2)}

/* closing block on inner pages: a centred, typography-only call to action */
.cta{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-8); max-width:var(--content); margin:0 auto}
.cta .d-lg{margin-bottom:var(--space-4)}
.cta p{font-size:var(--text-subheading); line-height:1.38; color:var(--text-secondary); max-width:42ch; margin:0 auto}
.cta .hero__actions{justify-content:center}
.cta .btn--secondary{color:var(--action-link)!important; border-color:var(--action-link)!important}
.cta .btn--secondary:hover{color:var(--white)!important}

/* =========================================================
   Footer
   ========================================================= */
.footer{background:var(--surface-canvas); color:var(--text-secondary); font-size:var(--text-caption); line-height:var(--lh-caption)}
.footer__inner{max-width:1024px; margin:0 auto; padding:var(--space-4) 22px var(--space-5)}
.footer__notes{display:grid; gap:var(--space-3); padding:var(--space-4) 0 var(--space-5); border-bottom:1px solid var(--border-hairline)}
.footer__dir{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-6); padding:var(--space-6) 0 var(--space-8)}
.footer__dir h2{margin:0 0 var(--space-3); font-family:var(--font-text); font-size:12px; font-weight:600; color:var(--text-primary)}
.footer__dir ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.footer__dir a{color:var(--text-secondary)}
.footer__dir a:hover{color:var(--text-primary); text-decoration:underline}
.footer__legal{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--border-hairline)}
.footer__legal ul{display:flex; margin:0; padding:0; list-style:none}
.footer__legal li + li{border-left:1px solid var(--border-hairline); margin-left:10px; padding-left:10px}
.footer__legal a{color:var(--text-primary)}
.footer__legal a:hover{text-decoration:underline}
.footer__locale{margin-left:auto}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .js .reveal{opacity:1!important; transform:none!important}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1068px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:833px){
  .gnav__links,.gnav__note{display:none}
  .gnav__menu{display:block; margin-left:auto}
  .gnav__inner{padding:0 16px}
  .lnav__links{display:none}
  .lnav__inner{padding:0 16px}
  .lnav__title{font-size:19px}
  .grid-2{grid-template-columns:1fr}
  .footer__dir{grid-template-columns:1fr 1fr}
  .footer__locale{margin-left:0; width:100%}
}
@media (max-width:640px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .gnav__panel{padding-inline:32px}
  .page-hero .hero__actions{flex-direction:column; align-items:center}
  .step{grid-template-columns:auto 1fr}
  .step .icon-badge{display:none}
}

/* over dark sections the bar turns to smoked glass */
.gnav{transition:background-color .4s var(--ease)}
.gnav.is-dark{background:rgba(22,22,23,.8)}
.gnav.is-dark .gnav__brand,.gnav.is-dark .gnav__links a[aria-current="page"]{color:var(--frost)}
.gnav.is-dark .gnav__links a{color:rgba(255,255,255,.8)}
.gnav.is-dark .gnav__links a:hover{color:var(--white)}
.gnav.is-dark .gnav__menu span{background:var(--frost)}
.gnav.is-dark.is-open{background:var(--frost)}
.gnav.is-dark.is-open .gnav__brand{color:var(--text-primary)}
.gnav.is-dark.is-open .gnav__menu span{background:var(--carbon)}

/* =========================================================
   Touch: every control gets at least a 44px target, without changing how it looks
   ========================================================= */
@media (pointer:coarse){
  .gnav__brand{min-height:44px}
  .btn--sm{min-height:44px; padding-block:10px}
  .btn--xs{position:relative}
  .btn--xs::after{content:""; position:absolute; inset:-10px -6px}
  .picker__dot::before{content:""; position:absolute; inset:-9px}
  .carousel__btn{width:44px; height:44px}
  .filter button{min-height:44px}
  .faq__item summary{min-height:44px}
  .feature-list li{font-size:13px}
}

/* a square photograph shown whole, framed like a product shot rather than cropped to a strip */
.page-hero__media--full{width:min(760px,calc(100% - 2 * var(--gutter))); height:auto; aspect-ratio:1/1; margin:0 auto clamp(48px,6vw,96px); border-radius:var(--radius-card)}
.page-hero__media--full img{object-fit:contain}