/* Every page but the home page, carrying the home page's material instead of white cards: headings in Geist (the
   wordmark's typeface, assets/fonts/GEIST-LICENSE.txt), content set straight on the page, and the home film's final
   shot as every page's ending. Moving between these
   pages crossfades under the header. Loaded after style.css by every page except the home page, so the home page and
   its animation stay exactly as they are. */
@font-face{font-family:Geist;src:url(/assets/fonts/geist-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}
body.page{--expo:cubic-bezier(.16,1,.3,1)}
body.page :is(h1,h2,h3,h4,.svc-name,.faq summary){font-family:Geist,Inter,-apple-system,BlinkMacSystemFont,sans-serif}

/* ---------- Between pages ---------- */
/* The page crossfades and the new one rises a little; the header is its own layer, so it stays put while the page
   changes beneath it. Browsers without cross-document view transitions simply load the page. The name sits on the pill,
   not on .nav: an ancestor with a view-transition-name is a backdrop root, which stops the pill's glass from blurring
   the page behind it. */
@view-transition{navigation:auto}
.nav-inner{view-transition-name:site-nav}
::view-transition-old(root){animation:page-out .3s cubic-bezier(.2,.7,.2,1) both}
::view-transition-new(root){animation:page-in .55s cubic-bezier(.16,1,.3,1) both}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- Opening ---------- */
/* The page's heading, large and set straight on the page, with its sentence (or the search box) under it. */
.page-hero-copy{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:clamp(28px,6vh,72px) var(--gutter) clamp(8px,2vh,24px)}
.page-hero-copy>*{max-width:760px}
body.page .page-hero h1{font-size:clamp(38px,4.6vw,66px);font-weight:600;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.page-hero .section-intro{max-width:34em;margin-top:clamp(14px,2.2vh,22px);font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--muted);text-wrap:pretty}
body.page .page-hero+.reading{padding-top:clamp(28px,5vh,56px)}
@media(prefers-reduced-motion:no-preference){
  .page-hero-copy>*,.svc-hero-copy>*{animation:hero-rise 1s var(--expo) .1s both}
  .page-hero-copy>:nth-child(2),.svc-hero-copy>:nth-child(2){animation-delay:.25s}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(18px);filter:blur(8px)}}

/* ---------- Content on the page ---------- */
/* Lists are plain lines on hairlines, not ticks. */
body.page .service-included{gap:0;border-top:1px solid var(--line)}
body.page .service-included li{padding:13px 0;border-bottom:1px solid var(--line)}
body.page .service-included li::before{content:none}

/* ---------- Finale: the home film's last shot ---------- */
/* Every page ends where the home page's film does: the chip, centred and glowing, filling the screen edge to edge, with
   the call to action low beneath it. The shot only fades from top to bottom, never at the sides. Its height (--ah) is
   the screen's height or the shot's own 16:9 height at full width, whichever is taller, so it always fills the width
   and the chip keeps its size; the chip ends at 54% of that height and the words begin at 58% or lower, so they never
   sit on it. The call buttons land with the section's faded top edge under the header, so the buttons fit on screen. On a short screen the section simply runs a little taller than the window. Where the browser can link
   animation to scrolling, the shot settles into place as it comes into view; the words never wait on scrolling. */
.page-finale{--ah:min(max(56.25vw,100svh),1300px);position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;min-height:100svh;margin-top:clamp(24px,6vh,72px);padding:calc(var(--ah) * .58) 0 clamp(56px,9vh,104px);text-align:center;overflow:hidden;scroll-margin-top:-72px}
.page-finale-art{position:absolute;z-index:-1;top:0;left:0;display:block;width:100%;height:var(--ah);overflow:hidden;
  -webkit-mask-image:linear-gradient(rgb(0 0 0/0),rgb(0 0 0/.5) 6%,#000 14%,#000 54%,rgb(0 0 0/.62) 60%,rgb(0 0 0/.36) 68%,rgb(0 0 0/.18) 78%,rgb(0 0 0/.07) 88%,rgb(0 0 0/0));
  mask-image:linear-gradient(rgb(0 0 0/0),rgb(0 0 0/.5) 6%,#000 14%,#000 54%,rgb(0 0 0/.62) 60%,rgb(0 0 0/.36) 68%,rgb(0 0 0/.18) 78%,rgb(0 0 0/.07) 88%,rgb(0 0 0/0))}
.page-finale-art img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.page-finale-copy{position:relative;padding:0 var(--gutter)}
body.page .page-finale :is(h1,h2){max-width:820px;margin:0 auto;font-size:clamp(32px,min(4.6vw,6.6svh),66px);font-weight:600;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.page-finale p{max-width:540px;margin:clamp(12px,2vh,18px) auto 0;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--muted);text-wrap:balance}
.page-finale .actions{justify-content:center;margin-top:clamp(20px,3.6vh,34px)}
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
  .page-finale-art img{animation:finale-settle linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
}}
@keyframes finale-settle{from{transform:scale(1.1);opacity:.35}}

/* The 404 is the finale alone, centred in the screen under the header. */
body.page main:has(>.page-lost){padding-top:0}
.page-finale.page-lost{margin-top:0}
.page-lost p .link{font-size:inherit}

/* ---------- Phones ---------- */
@media(max-width:760px){
  body.page .page-hero h1{font-size:clamp(36px,10vw,50px)}
  /* The portrait frame (4:5, so 125vw tall at full width): the chip ends at 46% of it, so the words start at 54%. */
  .page-finale{--ah:min(max(125vw,72svh),1000px);padding-top:calc(var(--ah) * .54)}
}