/* F · Stack — round 6. D pushed further: the build scene is the hero (the tile builds itself as you scroll), then City,
   Golf and Race arrive as full-screen colour panels that stack, each with its tile live in 3D. Funnel Display + Funnel
   Sans, six sizes, three weights, the 8 px scale. Components (header, menu, buttons, FAQ, phone bar, footer) come from
   base.css; product pages add f-product.css. */

/* tokens (type, colour, radius): css/f-tokens.css, loaded before this file on every page and in the designer */

/* ---------------------------------------------------------------- shared pieces */
.section:not([data-season-show])+.section{padding-top:0}   /* two white sections in a row share one gap */
.t-lead{max-width:30em}
.facts{font-size:var(--fs-1);line-height:1.45;color:var(--muted)}
.sec-head{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.sec-head p{max-width:34em}
@media (min-width:1024px){ .sec-head{margin-bottom:var(--s6)} }
.btn-on{background:#FFFFFF;color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .btn-on:hover{background:rgba(255,255,255,.86)} }
.on-color .link{color:#FFFFFF}
.foot-line{margin-top:var(--s2);max-width:22rem;color:var(--muted)}
/* placeholders read in the text colour (the muted grey on the tint fails contrast); on colour they turn white */
.dir-f .ph{color:var(--text)}
.dir-f .on-color .ph,.dir-f .notice .ph{color:#FFFFFF;background:rgba(255,255,255,.2)}

/* display lines: letters rise once (motion.js splits them); until then they stay hidden, with a CSS fallback */
.l{display:block;width:max-content;max-width:none;white-space:nowrap}
.l-mask{overflow:hidden;padding-block:.04em .1em;margin-block:-.04em -.1em}
.l .w{display:inline-block;white-space:nowrap}
.l .c{display:inline-block}
html.js.dir-f:not(.reduce) .l-mask .c{animation:f-up .85s var(--ease-out) both;animation-delay:calc(var(--i,0) * 28ms + var(--d,60ms))}
@keyframes f-up{from{transform:translateY(112%)}}
html.js.dir-f:not(.reduce) [data-chars]:not([data-split]){visibility:hidden;animation:f-show 0s 1.4s forwards}
@keyframes f-show{to{visibility:visible}}

/* ---------------------------------------------------------------- header: the stage, a panel, or white */
.dir-f.home .head{--head-bg:var(--stage)}
.dir-f.home .head.past{--head-bg:var(--bg)}
.dir-f.home .head.scrolled:not(.past){box-shadow:none}
.dir-f .head.on-panel{--head-bg:var(--head-pc);--head-text:#FFFFFF;--mark-top:#FFFFFF;box-shadow:none}
.dir-f .head.on-panel .btn{background:#FFFFFF;color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .dir-f .head.on-panel .btn:hover{background:rgba(255,255,255,.86)} }
.nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.35em}

/* ---------------------------------------------------------------- the stage: hero + build scene
   phones: the words, then the tile sticks under the header while the three steps scroll beneath it.
   desktop: "Anywhere," across the top, the tile beside "in 3D." on the right; it sticks while the steps pass on the left.
   Its last screen holds the finished tile while City slides up over it. */
.stage{position:relative;background:var(--stage);--frame:min(100vw - 2 * var(--gutter),50svh)}   /* the tile's square on phones */
.stage-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "media" "steps"}
.stage-hero{grid-area:hero;position:relative;z-index:3;padding-block:var(--s3) var(--s4)}
.hero-h{font:var(--w-3) var(--fs-6)/var(--lh-display) var(--font-display);letter-spacing:var(--display-track)}
.hero-lead{margin-top:var(--s3);max-width:24em}
.stage-hero .actions{margin-top:var(--s4)}
.stage-hero .facts{margin-top:var(--s3)}
.cutoff{margin-top:var(--s2);font-size:var(--fs-1);color:var(--muted)}

.stage-media{grid-area:media;position:sticky;top:var(--stick-top);z-index:2;align-self:start;padding-block:var(--s1) var(--s2);background:var(--stage)}
.stage-media::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--s4);background:linear-gradient(var(--stage),color-mix(in srgb,var(--stage) 0%,transparent));pointer-events:none}
.stage-frame{position:relative;width:var(--frame);aspect-ratio:1/1;margin-inline:auto;transform-origin:50% 70%}
.stage-frame img,.stage-canvas{position:absolute;inset:0;width:100%;height:100%}
html.js.dir-f:not(.reduce) .stage-frame{animation:f-drop 1.1s var(--spring) .15s both}
@keyframes f-drop{from{transform:translate3d(0,-40px,0) rotate(5deg) scale(.95)}}       /* transform only: the picture paints at once (LCP) */
html.reduce.dir-f .stage-canvas,html.dir-f:not(.js) .stage-canvas{display:none}
/* opening c (10-07 variant): the live tile over a picture of the same flat map; no pointer, so the page scrolls over it */
.stage-3d{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out)}
.stage.is-3d .stage-3d{opacity:1}
.stage.is-3d .stage-still{opacity:0;transition:opacity .45s var(--ease-out) .1s}
.stage-bar{display:flex;gap:var(--s1);width:min(100%,220px);margin:var(--s2) auto 0}
.stage-bar i{position:relative;flex:1;height:3px;border-radius:2px;background:rgba(0,0,0,.14);overflow:hidden}
.stage-bar i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--f,0))}
html.reduce.dir-f .stage-bar,html.dir-f:not(.js) .stage-bar{display:none}
.stage-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}

.stage-steps{grid-area:steps;position:relative;z-index:1;padding-top:var(--s3)}
.stage-steps-h{font:var(--w-2) var(--fs-1)/1.3 var(--font-body);color:var(--muted);scroll-margin-top:calc(var(--stick-top) + var(--frame) + 43px + var(--s3))}   /* "How it works" (#how) lands just under the tile */
.stage-step{padding-top:var(--s3)}
.stage-step h3{font:var(--w-3) var(--fs-4)/1.02 var(--font-display);letter-spacing:var(--h-track)}
.stage-step p{margin-top:var(--s2);max-width:26em;color:var(--muted)}
.stage-n{display:block;margin-bottom:var(--s1);font:var(--w-2) var(--fs-1)/1.3 var(--font-body);color:var(--muted);font-variant-numeric:tabular-nums}
/* the step being shown reads in ink, the others in the muted grey (still AA, so nothing is dimmed past legibility) */
html.js.dir-f:not(.reduce) .stage-step{min-height:46svh}
html.js.dir-f:not(.reduce) .stage-step h3{color:var(--muted);transition:color .45s var(--ease-out)}
html.js.dir-f:not(.reduce) .stage-step.is-on h3{color:var(--text)}
/* the last screen holds the finished tile and the last step while City slides up over them */
html.js.dir-f:not(.reduce) .stage-steps ol::after{content:"";display:block;height:calc(100svh - var(--stick-top))}   /* room inside the list, so its last step can stick */
html.js.dir-f:not(.reduce) .stage-step:last-child{position:sticky;top:calc(var(--stick-top) + var(--frame) + 43px + var(--s3))}

/* short phones (667 px, or Safari with its bars showing): a smaller tile leaves room for the words under it */
@media (max-width:1023px) and (max-height:720px){ .stage{--frame:min(100vw - 2 * var(--gutter),44svh)} .stage-hero{padding-top:var(--s2)} }

@media (min-width:1024px){
  .stage-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);grid-template-areas:none}
  .stage-hero{grid-column:1/7;grid-row:1;padding-block:var(--s5) 0}
  .stage-hero .t-lead{max-width:21em}
  /* the tile starts under "Anywhere," and sits beside "in 3D."; it is sized so the first screen holds all of it */
  .stage-media{grid-column:7/13;grid-row:1/3;margin-top:calc(var(--s5) + .9 * var(--fs-6) + var(--s2));padding:0;background:none;top:calc(var(--stick-top) + var(--s4))}
  .stage-media::after{display:none}
  .stage{--frame:min(100%,calc(100svh - var(--stick-top) - .9 * var(--fs-6) - var(--s5) - var(--s6)))}
  .stage-frame{margin-right:0}
  .stage-steps{grid-column:1/6;grid-row:2;padding-top:max(var(--s7),26svh)}
  .stage-steps-h{scroll-margin-top:calc(var(--stick-top) + var(--s6))}
  .stage-step{padding-top:0}
  html.js.dir-f:not(.reduce) .stage-step{min-height:64svh}
  .stage-step h3{font-size:var(--fs-5);letter-spacing:var(--display-track)}
  .stage-step p{margin-top:var(--s3);font-size:var(--fs-3);line-height:1.42}
  html.js.dir-f:not(.reduce) .stage-step:last-child{top:calc(var(--stick-top) + 26svh)}
  .stage-bar{margin-top:var(--s3)}
}

/* ---------------------------------------------------------------- the stack: three colour panels */
.stack{position:relative}
.panel{position:sticky;top:var(--stick-top);z-index:4;height:calc(100svh - var(--stick-top));color:#FFFFFF}
html.js.dir-f:not(.reduce) .stage+.panel{margin-top:calc(var(--stick-top) - 100svh)}   /* City arrives over the finished tile */
.panel+.panel{margin-top:var(--dwell)}
.stack-end{height:var(--dwell)}
.panel-city{--pc:var(--city)}
.panel-golf{--pc:var(--golf)}
.panel-race{--pc:var(--race)}
.panel-in{position:relative;height:100%;overflow:hidden;background:var(--pc)}
.panel-body{height:100%;display:flex;flex-direction:column;padding:var(--s4) var(--gutter) var(--s3);transform-origin:50% 35%;will-change:transform}
.panel-word{font:var(--w-3) var(--fs-6)/var(--lh-display) var(--font-display);letter-spacing:var(--display-track);white-space:nowrap;will-change:transform}
.panel-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-top:var(--s3)}
.panel-copy .t-lead{max-width:22em}
.panel-facts{display:none;width:100%;max-width:26em}
.panel-facts li{padding-block:12px;border-top:1px solid rgba(255,255,255,.28)}
.panel-facts li:last-child{border-bottom:1px solid rgba(255,255,255,.28)}
.panel .actions{gap:var(--s2) var(--s4)}
.panel .link{color:#FFFFFF}
/* the tile takes whatever height is left; the live box keeps the 3:2 its picture was rendered at */
.panel-tile{position:relative;flex:1 1 auto;min-height:0;margin-top:var(--s2);display:grid;place-items:center;container-type:size;will-change:transform}
.panel-tile .live{position:absolute;left:50%;top:50%;width:min(116vw,150cqh);translate:-50% -58%}   /* centred in its cell even when wider (the transparent sides run into the gutters) */
.panel-shade{position:absolute;inset:0;z-index:5;background:#000;opacity:0;pointer-events:none}
@media (min-width:1024px) and (min-height:760px){ .panel-facts{display:block} }
@media (min-width:1024px){
  .panel-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);grid-template-rows:auto minmax(0,1fr) auto;
    padding:var(--s5) max(var(--gutter),calc((100% - var(--max)) / 2)) var(--s6)}
  .panel-word{grid-column:1/-1;grid-row:1}
  .panel-copy{grid-column:1/6;grid-row:3;align-self:end;margin-top:0}
  .panel-tile{grid-column:5/-1;grid-row:1/4;margin:var(--s3) calc(-1 * var(--s3)) 0 0}
  .panel-tile .live{width:min(112cqw,150cqh)}
}
/* the sticky phone bar steps aside while a panel (with its own button) fills the screen */
.mbar.c-off{transform:translateY(110%)}

/* ---------------------------------------------------------------- live tiles on F's pages
   The 3D frame ignores the pointer, so the wheel and swipes always scroll the page; the tile turns by itself and can't be
   grabbed (Derek 10-09). The box is 3:2, the shape the picture was rendered at, so the picture and the 3D view line up. */
.live{position:relative;aspect-ratio:3/2;pointer-events:none;translate:0 -8%}
.live>img{width:100%;height:auto}
.live .live-frame{pointer-events:none}
.on-color .live{filter:drop-shadow(0 26px 26px rgba(0,0,0,.34))}

/* ---------------------------------------------------------------- how it works */
.steps{display:grid;gap:var(--s5)}
@media (min-width:768px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)} }
.steps li{display:grid;gap:var(--s2);align-content:start;padding-top:var(--s3);border-top:4px solid var(--sc)}
.step-n{font:var(--w-3) var(--fs-5)/1 var(--font-display);letter-spacing:var(--display-track);color:var(--sc)}
.steps p{color:var(--muted);max-width:26em}
.how-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s6)}
.how-cta p{font-size:var(--fs-1);color:var(--muted)}

/* ---------------------------------------------------------------- close-up + specs */
.detail{background:var(--surface);padding-block:var(--section)}
.detail-grid{display:grid;gap:var(--s5)}
.detail-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:#E8E8E6}
.detail-media picture,.detail-media img{width:100%;height:100%}
.detail-media img{object-fit:cover;will-change:transform}
.detail-copy{display:grid;gap:var(--s3);align-content:start}
.specs{margin-top:var(--s2);border-top:1px solid rgba(0,0,0,.12)}
.specs div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--s2);padding-block:var(--s2);border-bottom:1px solid rgba(0,0,0,.12)}
.specs dt{font-weight:var(--w-2)}
.specs dd{color:var(--muted)}
@media (min-width:1024px){
  .detail-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center}
  .detail-media{grid-column:1/8;aspect-ratio:16/11}
  .detail-copy{grid-column:8/-1}
}

/* ---------------------------------------------------------------- places so far: a row that scrolls sideways
   G's gallery in F's system (Derek 10-04: "take this element from G… instead of the examples section"). Swipe on
   phones; drag, the arrows or Tab + arrow keys with a mouse; a progress line and a count. Dark on the homepage;
   .f-gal-light on the product pages, where the last card takes the product's colour (--kc). */
.f-gal{--g-fg:#FFFFFF;--g-muted:rgba(255,255,255,.72);--g-media:#262626;--g-btn:rgba(255,255,255,.12);--g-line:rgba(255,255,255,.2);
  padding-block:var(--section);background:var(--ink);color:var(--g-fg);overflow:hidden}
.f-gal-light{--g-fg:var(--text);--g-muted:var(--muted);--g-media:var(--surface);--g-btn:var(--surface);--g-line:var(--line);background:var(--bg)}
.f-gal .t-muted{color:var(--g-muted)}
.f-gal-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s4)}
.f-gal-head .sec-head{margin-bottom:0}
.f-gal-btns{display:none;gap:var(--s1)}
.f-gal-btn{display:inline-grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--g-btn);color:inherit;cursor:pointer;
  transition:background-color .2s,color .2s,opacity .2s,transform .2s var(--ease-out)}
.f-gal-btn svg{width:22px;height:22px}
.f-gal-btn[data-dir="-1"] svg{transform:scaleX(-1)}
.f-gal-btn:active{transform:scale(.94)}
.f-gal-btn[disabled]{opacity:.35;cursor:default}
@media (hover:hover) and (pointer:fine){
  .f-gal-btn:not([disabled]):hover{background:var(--g-fg);color:var(--ink)}
  .f-gal-light .f-gal-btn:not([disabled]):hover{color:#FFFFFF}
}
.f-gal-btn:focus-visible,.f-slide>a:focus-visible{outline:2px solid var(--g-fg);outline-offset:3px}
.f-track{--lane:calc(max(0px, (100% - var(--max) - 2 * var(--gutter)) / 2) + var(--gutter));
  display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:var(--s2);margin:var(--s5) 0 0;padding:0 var(--lane) var(--s1);list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--lane);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.f-track::-webkit-scrollbar{display:none}
.f-slide{scroll-snap-align:start;min-width:0}
.f-slide>a{display:block;border-radius:var(--radius);color:inherit;text-decoration:none;-webkit-user-drag:none}
.f-slide-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--g-media)}
.f-slide-media img{width:100%;height:100%;object-fit:cover;transform:translate3d(var(--px,0px),0,0) scale(1.12);-webkit-user-drag:none;user-select:none;pointer-events:none}
.f-slide-media.fit img{object-fit:contain;padding:var(--s2);transform:translate3d(var(--px,0px),0,0);filter:drop-shadow(0 14px 16px rgba(0,0,0,.2))}
.f-slide-cap{display:flex;flex-direction:column;gap:2px;padding-top:var(--s2);line-height:1.4}
.f-slide-cap b{font-size:var(--fs-2);font-weight:var(--w-2)}
.f-slide-cap span{font-size:var(--fs-1);color:var(--g-muted)}
@media (hover:hover) and (pointer:fine){ .f-slide>a:hover b{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1.5px} }
/* the last card: start one of your own */
.f-slide-end{scroll-snap-align:end}
.f-slide-end>a{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3);aspect-ratio:4/5;padding:var(--s4);background:#FFFFFF;color:var(--ink)}
.f-gal-light .f-slide-end>a{background:var(--kc,var(--ink));color:#FFFFFF}
.f-slide-end .t-h3{max-width:7em}
.f-slide-end-p{display:block;max-width:14em;font-size:var(--fs-2);line-height:1.45}
.f-arrow{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:#FFFFFF;transition:transform .25s var(--ease-out)}
.f-gal-light .f-arrow{background:#FFFFFF;color:var(--kc,var(--ink))}
.f-arrow svg{width:22px;height:22px}
@media (hover:hover) and (pointer:fine){ .f-slide-end>a:hover .f-arrow{transform:translateX(6px)} }
/* progress under the row */
.f-gal-foot{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.f-progress{flex:1;height:3px;border-radius:2px;background:var(--g-line);overflow:hidden}
.f-progress i{display:block;height:100%;border-radius:2px;background:var(--g-fg);transform-origin:left;transform:scaleX(var(--gp,.25));transition:transform .15s linear}
.f-gal-count{flex:none;font-size:var(--fs-1);color:var(--g-muted);font-variant-numeric:tabular-nums}
html.js.dir-f .f-track.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
html.js.dir-f .f-track.dragging .f-slide>a{pointer-events:none}
@media (hover:hover) and (pointer:fine){ html.js.dir-f .f-track{cursor:grab} }
/* entrance: the row slides in from the right once it's on screen (f.js sets f-gal-ready; without it nothing hides) */
html.f-gal-ready.dir-f:not(.reduce) .f-track .f-slide{transform:translate3d(64px,0,0);opacity:0;transition:transform .9s var(--ease-out),opacity .6s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
html.f-gal-ready.dir-f:not(.reduce) .f-track.is-in .f-slide{transform:none;opacity:1}
@media (min-width:600px){ .f-track{grid-auto-columns:44%} }
@media (min-width:1024px){
  .f-gal-btns{display:flex}
  .f-track{grid-auto-columns:calc((min(100vw, var(--max) + 2 * var(--gutter)) - 2 * var(--gutter) - 3 * var(--s3)) / 3.4);gap:var(--s3)}
}

/* ---------------------------------------------------------------- reviews (a slot until real ones exist) */
.reviews{display:grid;gap:var(--s2)}
@media (min-width:1024px){ .reviews{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)} }
.review{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4);padding:var(--s4);border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 6px 0 var(--sc)}
.review blockquote{margin:0;font-size:var(--fs-3);line-height:1.4}
.review figcaption{font-size:var(--fs-1);color:var(--muted)}

/* ---------------------------------------------------------------- FAQ */
.faq-grid{display:grid;gap:var(--s5)}
@media (min-width:1024px){
  .faq-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .faq-grid h2{grid-column:1/5}
  .faq-grid .faq-list{grid-column:6/-1}
}

/* ---------------------------------------------------------------- closing: start with a place, in its colour */
.closing{padding-block:var(--section);background:var(--ink);color:#FFFFFF;overflow:hidden}
.closing-h{font:var(--w-3) var(--fs-6)/var(--lh-display) var(--font-display);letter-spacing:var(--display-track);will-change:transform}
.closing-h .l{width:auto;white-space:normal}
.closing-row{display:grid;gap:var(--s4);margin-top:var(--s5)}
.closing-row>p{max-width:30em;color:rgba(255,255,255,.84)}
.kinds{display:grid;gap:var(--s2)}
.kind{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:88px;padding:var(--s2) var(--s3);border-radius:var(--radius);background:var(--kc);color:#FFFFFF;text-decoration:none;overflow:hidden;
  transition:transform .3s var(--ease-out)}
.kind b{font:var(--w-3) var(--fs-4)/1 var(--font-display);letter-spacing:var(--h-track)}
.kind span{font-size:var(--fs-1);color:rgba(255,255,255,.86)}
.kind-tx{display:flex;flex-direction:column;gap:var(--s1)}
.kind svg{flex:none;width:28px;height:28px;transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .kind:hover{transform:translateY(-4px)} .kind:hover svg{transform:translateX(4px)} }
.kind:active{transform:scale(.98)}
.kind:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.closing .btn{justify-self:start}
@media (min-width:1024px){
  .closing-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--s6)}
  .closing-row>p{grid-column:1/5;font-size:var(--fs-3);line-height:1.42}
  .kinds{grid-column:6/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
  .kind{flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:200px;padding:var(--s3)}
  .closing .btn{grid-column:6/-1}
}

/* ---------------------------------------------------------------- gift ideas (holiday only) */
.gift-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
@media (min-width:1024px){ .gift-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)} }
.gift{display:flex;flex-direction:column;padding:var(--s2) var(--s2) var(--s3);border-radius:var(--radius);background:var(--kc);color:#FFFFFF;text-decoration:none;transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .gift:hover{transform:translateY(-4px)} }
.gift-media{display:block;aspect-ratio:3/2;margin-bottom:var(--s2)}
.gift-media img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.25))}
.gift b{font:var(--w-2) var(--fs-3)/1.2 var(--font-body)}
.gift span:last-child{margin-top:4px;font-size:var(--fs-1)}

/* ---------------------------------------------------------------- footer: the same three groups on every page
   phones: the brand, then two columns of links; desktop: the 12-column grid the page uses */
.dir-f .foot .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--gutter)}
.dir-f .foot-brand,.dir-f .foot .legal{grid-column:1/-1}
.dir-f .foot-h{margin-bottom:var(--s1);font:var(--w-2) var(--fs-1)/1.3 var(--font-body);color:var(--muted)}
.dir-f .foot nav a{min-height:44px}
@media (min-width:768px){ .dir-f .foot .wrap{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){
  .dir-f .foot .wrap{grid-template-columns:repeat(12,minmax(0,1fr))}
  .dir-f .foot-brand{grid-column:1/6}
  .dir-f .foot nav:nth-of-type(1){grid-column:7/9}
  .dir-f .foot nav:nth-of-type(2){grid-column:9/11}
  .dir-f .foot nav:nth-of-type(3){grid-column:11/13}
}

/* ---------------------------------------------------------------- reveals: content is visible without JS */
html.js.dir-f:not(.reduce) .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
html.js.dir-f:not(.reduce) .rv.is-in{opacity:1;transform:none}

/* ---------------------------------------------------------------- reduced motion: no sticking, no stacking, everything at rest */
html.reduce.dir-f .stage-media{position:relative;top:auto}
html.reduce.dir-f .stage-media::after{display:none}
html.reduce.dir-f .panel{position:relative;top:auto;height:auto}
html.reduce.dir-f .panel+.panel{margin-top:0}
html.reduce.dir-f .panel-in,html.reduce.dir-f .panel-body{height:auto;min-height:calc(100svh - var(--stick-top))}
html.reduce.dir-f .panel-tile{min-height:52svh}
html.reduce.dir-f .stack-end{display:none}
html.reduce.dir-f .stage-steps{padding-bottom:var(--s6)}
@media (prefers-reduced-motion:reduce){
  .stage-media{position:relative;top:auto}
  .panel{position:relative;top:auto;height:auto}
  .panel+.panel{margin-top:0}
  .panel-in,.panel-body{height:auto;min-height:calc(100svh - var(--stick-top))}
  .stack-end{display:none}
}