/* R17 home ("Award"): layered over v16.css + home16.css + type17.css on the home page only.
   Cinematic motion, a light conversion layer, and How it works as a scroll-held iPhone walkthrough. */
/* Shared type (fonts, plain headlines, word reveals, drawn marks) lives in type17.css. Home-only sizing: */
.home17 .h-hero-copy .v-display{font-size:clamp(3.4rem,8.2vw,8rem);max-width:11ch}
.home17 .v-h2{max-width:16ch}
.home17 .h-proof-head .v-h2,.home17 .h-final .v-h2{margin-inline:auto}
.home17 .h-final .v-h2{max-width:14ch}
@media (max-width:900px){.home17 .h-hero-copy .v-display{font-size:clamp(3.1rem,14vw,3.7rem)}}

/* ---------- Hero: the empty hill, with the portrait standing on the hilltop ---------- */
.home17 .h-hero{background:#b9d3ea;color:var(--ink);align-items:flex-start}
.home17 .h-hero-media img{object-position:50% 50%}
.home17 .h-vignette{background:radial-gradient(70% 52% at 50% 24%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 30%)}
.home17 .h-hero-grid{display:block;padding:clamp(112px,15vh,150px) 0 0}
.home17 .h-hero-copy{display:grid;justify-items:center;text-align:center}
.home17 .h-hero-copy .v-display{max-width:none;font-size:clamp(3.2rem,min(6.4vw,11vh),8.6rem);text-shadow:none}
.home17 .h-hero-copy .v-lede{display:none}
.home17 .h-act{margin-top:clamp(20px,2.4vw,32px)}
.home17 .h-act .h-cta{justify-content:center}
.home17 .h-hero .v-btn.light{--bg:var(--ink);--fg:#fff8ee}
.home17 .h-hero .v-btn.ghost.on-dark{--bg:rgba(255,255,255,.38);--fg:var(--ink);border-color:rgba(22,17,13,.3)}
.home17 .h-proofrow{color:rgba(22,17,13,.82);border-top-color:rgba(22,17,13,.2)}
.home17 .h-proofrow svg{color:var(--rust)}
.home17 .h-scroll{color:rgba(22,17,13,.6)}
.home17 .h-scroll-line{background:rgba(22,17,13,.18)}
.home17 .h-scroll-line::after{background:var(--ink)}
/* home17.js measures where the hill's crest lands on screen and sets --hill. */
.home17 .h-hero-art{position:absolute;left:50%;bottom:var(--hill,22%);translate:-50% 0;z-index:1;display:block}
.home17 .h-frames{width:auto;height:var(--fh,clamp(240px,37vh,440px));aspect-ratio:1000/1459;animation:none}
.home17 .h-hero-art::after{content:"";position:absolute;left:6%;right:6%;bottom:-14px;height:28px;border-radius:50%;background:radial-gradient(closest-side,rgba(28,36,14,.4),rgba(28,36,14,0));z-index:-1}
.home17 .h-frame-cap{display:none}
/* Header: dark over the bright sky until the page scrolls. */
.home17 .v-header.over:not(.scrolled){color:var(--ink)}
.home17 .v-header.over:not(.scrolled) .v-logo .on-light{display:block}
.home17 .v-header.over:not(.scrolled) .v-logo .on-dark{display:none}
.home17 .v-header.over:not(.scrolled) .v-iconbtn:hover{background:rgba(22,17,13,.07)}
@media (max-width:900px){
  .home17 .h-hero-grid{padding:88px 0 0}
  .home17 .h-hero-copy .v-display{font-size:clamp(2.9rem,13vw,3.6rem)}
  .home17 .h-act .h-cta{flex-wrap:nowrap;gap:8px}
  .home17 .h-hero .h-act .v-btn.lg{flex:1 1 auto;min-height:50px;padding:0 .85em;font-size:.9rem;white-space:nowrap;gap:.4em}
  .home17 .h-proofrow{flex-wrap:nowrap;justify-content:center;gap:14px;font-size:.8rem;white-space:nowrap}
  .home17 .h-proofrow svg{width:16px;height:16px}
  .home17 .h-frames{height:var(--fh,min(42svh,400px))}
  /* Phones: no zoom (keeps the top of the sky), and the hero fits the screen under a fixed two-line announcement. */
  .home17 .v-announce{min-height:50px;display:grid;place-items:center}
  .home17 .h-hero{min-height:calc(100svh - 50px)}
  .home17 .h-hero-media img{transform:translate3d(0,calc(var(--py,0) * 1px),0)}
}

/* ---------- Conversion layer ---------- */
/* Hero: one proof row, exactly as wide as the two buttons above it. */
.h-act{display:grid;width:max-content;max-width:100%;margin-top:30px}
.h-act .h-cta{margin-top:0}
.h-proofrow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,248,238,.22);font:500 .95rem/1.2 var(--sans);color:rgba(255,248,238,.9)}
.h-proofrow>*{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none}
.h-proofrow svg{width:18px;height:18px;flex:none;color:var(--gold-soft)}
.h-proofrow a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .45s var(--ease)}
.h-proofrow a:hover{background-size:100% 1px}
@media (max-width:900px){.h-act{width:100%}.h-act .h-cta .v-btn{flex:1 1 auto}.h-proofrow{font-size:.9rem;gap:10px 18px;justify-content:flex-start}}
.u-hdr-cta{min-height:42px!important;padding:0 1.15em!important;font-size:.92rem!important;margin-right:6px}

@media (max-width:900px){.u-hdr-cta{display:none!important}}
.u-sticky{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 10px;border-radius:999px;background:rgba(22,17,13,.92);backdrop-filter:blur(12px);color:#fff8ee;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transform:translateY(160%);transition:transform .6s var(--ease)}
.u-sticky.show{transform:none}
.u-sticky .thumbs{display:flex}
.u-sticky .thumbs img{width:34px;height:46px;object-fit:cover;border-radius:6px;border:2px solid #16110d;margin-left:-12px}
.u-sticky .thumbs img:first-child{margin-left:0;rotate:-7deg}
.u-sticky .thumbs img:last-child{rotate:7deg}
.u-sticky .v-btn{min-height:46px;padding:0 1.3em;font-size:.95rem}
@media (max-width:900px){.u-sticky{left:12px;right:12px;justify-content:space-between;border-radius:18px;padding:8px}.u-sticky .v-btn{flex:1}}
.v-announce .u-ann{display:inline-block;transition:opacity .45s,transform .45s var(--ease)}
.v-announce .u-ann.out{opacity:0;transform:translateY(-6px)}

/* ---------- Motion ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.home17 .h-hero-media{animation:u-curtain 1.8s cubic-bezier(.77,0,.18,1) .2s both}
@keyframes u-curtain{from{clip-path:inset(20% 33% 20% 33% round 28px)}to{clip-path:inset(0 0 0 0 round 0)}}
html.u-wait .h-hero *,html.u-wait .h-hero-media,html.u-wait .h-hero-media::after{animation-play-state:paused!important}
.home17 .h-hero-copy{transform:translate3d(0,calc(var(--out,0) * -110px),0);opacity:calc(1 - var(--out,0) * 1.25)}
.home17 .h-hero-art{transform:translate3d(0,calc(var(--out,0) * -110px),0)}   /* no scale: the frame's shadow would re-render every frame */
[data-u-clip]{clip-path:inset(14% 10% 14% 10% round 36px);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1)}
[data-u-clip].u-on{clip-path:inset(0 0 0 0 round var(--r-lg))}
[data-u-clip] img{scale:1.18;transition:scale 1.8s var(--ease-out)}
[data-u-clip].u-on img{scale:1}
.home17 .h-wall{transform:skewX(var(--sk,0deg))}
.home17 .v-btn.lg{translate:calc(var(--mx,0) * 1px) calc(var(--my,0) * 1px);transition:transform .35s var(--ease),translate .5s var(--ease),background .3s,color .3s,box-shadow .35s var(--ease)}
/* Phones and tablets: the same moments with only cheap motion (opacity and transforms). The clip-path curtain
   and clip reveals repaint the whole photo every frame, and the reviews wall's scroll-speed skew re-lays text. */
@media (hover:none),(max-width:900px){
  .home17 .h-hero-media{animation:none}
  [data-u-clip]{clip-path:none;opacity:0;translate:0 28px;transition:opacity 1s var(--ease-out),translate 1.2s var(--ease-out)}
  [data-u-clip].u-on{clip-path:none;opacity:1;translate:0 0}
  .home17 .h-wall{transform:none}
}
/* Phones: the hero's scroll effects (photo drift, headline rising and fading, frame lifting) ride the browser's own
   scroll timeline. iOS scrolls on a separate thread, so the same effects driven from JavaScript trail the finger
   and judder; these run in step with the scroll. Without scroll timelines the hero simply stays still. */
@media (hover:none){
  @supports (animation-timeline:scroll()){
    .home17 .h-hero-media{animation:hero-drift linear both;animation-timeline:scroll(root);animation-range:0 100svh}
    .home17 .h-hero-copy{animation:hero-copy-out linear both;animation-timeline:scroll(root);animation-range:0 85svh}
    .home17 .h-hero-art{animation:hero-art-out linear both;animation-timeline:scroll(root);animation-range:0 85svh}
  }
}
@keyframes hero-drift{to{translate:0 25svh}}
@keyframes hero-copy-out{80%{opacity:0}to{transform:translate3d(0,-110px,0);opacity:0}}
@keyframes hero-art-out{to{transform:translate3d(0,-110px,0)}}
/* Phones: reviews are a row you swipe, one readable card at a time (the moving wall clipped every quote). */
@media (max-width:900px){
  .home17 .h-wall.v-marquee{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:none;mask-image:none;scroll-padding-inline:var(--gutter)}
  .home17 .h-wall::-webkit-scrollbar{display:none}
  .home17 .h-wall .v-marquee-track{animation:none;gap:12px;padding:4px var(--gutter) 28px}
  .home17 .h-wall .h-q[aria-hidden=true]{display:none}
  .home17 .h-wall .h-q{width:min(82vw,340px);margin-top:0;scroll-snap-align:start;box-shadow:0 14px 30px -24px rgba(22,17,13,.55)}
  .home17 .h-wall .h-q img{aspect-ratio:1}
  .home17 .h-wall .h-q:hover{transform:none}
}
/* Opening curtain, once per visit. */
.u-intro{position:fixed;inset:0;z-index:400;background:var(--night);display:grid;place-items:center;transition:transform 1s cubic-bezier(.77,0,.18,1),border-radius 1s cubic-bezier(.77,0,.18,1)}
.u-intro.lift{transform:translateY(-100%);border-radius:0 0 50% 50%/0 0 12vh 12vh}
.u-intro .mark{display:grid;justify-items:center;gap:18px;color:var(--gold-soft);animation:u-stamp .9s var(--ease-out) both}
.u-intro .mark img{width:min(46vw,230px);height:auto}
.u-intro .mark svg{width:34px;height:34px;animation:u-paw .7s cubic-bezier(.34,1.56,.64,1) .25s both}
@keyframes u-stamp{from{opacity:0;transform:scale(.92);filter:blur(6px)}}
@keyframes u-paw{from{opacity:0;transform:scale(.2) rotate(-20deg)}}

/* How it works lives in how17.css. */