/*
 * Exodus Core Solutions — home page ("Cursor Boot").
 * Loads after css/inner.css (tokens, nav, footer, buttons, FadeIn).
 *
 * The markup is the finished hero. js/home.js adds ONE of these to <html>
 * before first paint, and removes it when the entrance ends or is skipped:
 *   .intro-play   first visit this session: full ~2.8 s entrance
 *   .intro-quick  later visits this session: ~0.5 s fade
 *   .intro-live   set while a GSAP timeline is actually running
 * No JS, reduced motion or a failed script = none of them = end state.
 */

/* ---------------------------------------------------------------------- */
/* Tokens                                                                  */
/* ---------------------------------------------------------------------- */

.home-page{
  /* Kanit 900 metrics (unitsPerEm-relative, measured in Chromium):
     cap height .656em, baseline .8525em below the top of a line-height:1 box.
     The inline O is a circle a hair taller than the caps (round letters
     overshoot), sitting .014em below the baseline. */
  --o-d: .668em;
  --o-top: .1935em;                 /* .8525 - .668 + .009 (bottom overshoot, tuned on screenshots) */
  --silver: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
  --o-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill-rule='evenodd' d='M128 0a128 128 0 1 1 0 256a128 128 0 1 1 0-256ZM86.9 65.5L186.1 124.2L152.7 130.3L186.1 182.9L152.7 199.1L118.2 147.5L95.0 170.8Z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------- */
/* Hero shell                                                              */
/* ---------------------------------------------------------------------- */

.hero--home{
  min-height: 100vh;
  min-height: 100svh;
}

.boot__stage{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: clamp(1.75rem, 5vh, 3.5rem) var(--gutter) clamp(1.25rem, 3vh, 2rem);
}

/* ---------------------------------------------------------------------- */
/* Headline: EXODUS CORE, the O of EXODUS is the O mark                    */
/* ---------------------------------------------------------------------- */

.boot-title{
  position: relative;
  width: 100%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  /* "EXODUS CORE" measures 6.42em: fill ~90% of the width, never taller than
     a quarter of a short landscape screen. */
  font-size: min(calc(90vw / 6.42), 27vh);
}
.boot-title__vis{
  display: flex;
  justify-content: center;
}
/* Pin the screen-reader copies to a fixed corner: left at their static
   position they would drift (a layout shift) when the web font swaps in. */
.boot-title .sr-only,
.boot-tag .sr-only{ left: 0; top: 0; }
/* Letters are flex items in 1em boxes, so the line never depends on the
   fallback font's metrics (no layout shift when Kanit swaps in), and the word
   space is a margin, not a text node. */
.boot-word{ display: flex; flex: 0 0 auto; }
.boot-word + .boot-word{ margin-left: .17em; }

/* Each letter carries the silver gradient itself (so it can move on its own);
   a line-height:1 box per letter gives the exact .hero-heading gradient. */
.boot-title .ch{
  display: block;
  background: var(--silver);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The O mark: a circle with the cursor cut out of it, painted with the same
   gradient the letters use (sized to their 1em box and shifted up to the
   circle's top), so it reads as part of the word. The mask sits on the
   ::before (not the span) so the entrance layers inside are not clipped. */
.o-mark{
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--o-d);
  height: var(--o-d);
  margin: 0 .002em 0 .024em;        /* optical gaps matched to the letters around it (tracking included) */
  margin-top: var(--o-top);         /* circle top, from the top of the 1em letter box */
}
.o-mark::before,
.o-mark__flash{
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--o-mask) center / 100% 100% no-repeat;
  mask: var(--o-mask) center / 100% 100% no-repeat;
}
.o-mark::before{ background: var(--silver) 0 calc(-1 * var(--o-top)) / 100% 1em no-repeat; }

/* During the entrance only: a solid white disc (no cursor cut-out, so the
   chrome cursor is the only arrow on screen until it lands), then a white
   copy of the mark that fades to silver as the O docks. */
.o-mark__fill{
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.o-mark__fill,
.o-mark__flash{ background: #FFFFFF; opacity: 0; }

/* Phones: two lines, each as wide as the screen allows. */
@media (max-width: 639.98px){
  .boot-title__vis{ flex-direction: column; align-items: center; }
  .boot-word + .boot-word{ margin-top: -.14em; margin-left: 0; }
  .boot-title{ font-size: min(calc(86vw / 3.8), 22vh); }
}

/* ---------------------------------------------------------------------- */
/* Tagline (typed in by js/home.js; caret only exists during the intro)    */
/* ---------------------------------------------------------------------- */

.boot-tag{
  position: relative;
  max-width: 34rem;
  margin-top: clamp(.9rem, 2.4vh, 1.6rem);
  text-align: center;
  color: var(--ink);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .01em;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
}
@media (min-width: 1024px){ .boot-tag{ max-width: none; font-size: clamp(1.2rem, 1.75vw, 1.6rem); } }

.boot-tag__caret{
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 1.15em;
  margin-top: .1em;
  border-radius: 1px;
  background: linear-gradient(180deg, #BBCCD7, #FFFFFF);
  opacity: 0;
  pointer-events: none;
}
.boot-tag__caret.is-blink{ animation: bootCaret .9s steps(1) 2; }
@keyframes bootCaret{ 50%{ opacity: 0; } }
.boot-tag .tch.is-off{ opacity: 0; }

/* ---------------------------------------------------------------------- */
/* Doors — Work · Services · About · Contact                               */
/* ---------------------------------------------------------------------- */

.doors{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  width: 100%;
  max-width: 1360px;
  margin-top: clamp(2rem, 6vh, 4.25rem);
}
@media (min-width: 640px){ .doors{ gap: 1rem; } }
@media (min-width: 1024px){ .doors{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.door{
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-height: 128px;
  padding: 1rem 1.1rem 1.1rem;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(215, 226, 234, .13);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(187, 204, 215, .07), transparent 60%),
    linear-gradient(180deg, #141517 0%, #0F1011 100%);
  color: var(--ink);
  transition:
    transform .45s cubic-bezier(.2, .7, .2, 1),
    border-color .35s var(--ease),
    box-shadow .45s var(--ease);
}
@media (min-width: 640px){ .door{ min-height: 150px; padding: 1.25rem 1.4rem 1.35rem; border-radius: 26px; } }
@media (min-width: 640px) and (max-width: 1023.98px){
  .door{ min-height: 176px; }
  .door__label{ font-size: clamp(1.5rem, 3.3vw, 2.1rem); }
  .door__desc{ font-size: 1rem; }
}
@media (min-width: 1024px){ .door{ min-height: clamp(170px, 24vh, 224px); } }

/* Silver edge light: a 1px gradient border that fades in on hover/focus. */
.door::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, .75) 0%, rgba(187, 204, 215, .18) 35%, rgba(187, 204, 215, .06) 65%, rgba(255, 255, 255, .4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

/* Big faint index, like the numbered rows on the inner pages. (Solid, not
   outlined: Kanit's overlapping contours show through a text-stroke.) */
.door__num{
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.02em;
  font-size: clamp(1.9rem, 3.6vw, 3.9rem);
  color: rgba(215, 226, 234, .09);
  transition: color .35s var(--ease);
}
.door__body{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-right: 1.6rem;
}
.door__label{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
  font-size: min(clamp(1.35rem, 2.4vw, 2.15rem), 5.4vw);
  background: linear-gradient(180deg, #D7E2EA 0%, #9FB0BC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.door__desc{
  font-weight: 300;
  line-height: 1.35;
  font-size: clamp(.82rem, 1.05vw, 1rem);
  color: rgba(215, 226, 234, .72);
}
.door__arrow{
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  z-index: 1;
  font-size: 1.15rem;
  line-height: 1;
  color: rgba(215, 226, 234, .6);
  transition: transform .35s var(--ease), color .35s var(--ease);
}

/* The preview that slides into the upper right of a door (desktop only). */
.door__peek{
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 0;
  display: none;
  width: 46%;
  height: 52%;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine){
  .door__peek{
    display: block;
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.96);
    transform-origin: 100% 0;
    transition: opacity .35s var(--ease), transform .5s cubic-bezier(.2, .7, .2, 1);
  }
  .door:hover,
  .door:focus-visible{
    transform: translate3d(0, -6px, 0);
    border-color: rgba(215, 226, 234, .28);
    box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(187, 204, 215, .06), 0 0 42px -12px rgba(187, 204, 215, .16);
  }
  .door:hover::before,
  .door:focus-visible::before{ opacity: 1; }
  .door:hover .door__peek,
  .door:focus-visible .door__peek{ opacity: 1; transform: none; }
  .door:hover .door__num,
  .door:focus-visible .door__num{ color: rgba(215, 226, 234, .22); }
  .door:hover .door__arrow,
  .door:focus-visible .door__arrow{ transform: translate3d(2px, -2px, 0); color: #FFFFFF; }
}
.door:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

/* Work: a muted clip poster (js/home.js plays the clip on hover). */
.door__shot,
.door__clip{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8);
  filter: saturate(.85);
}
.door__clip{ opacity: 0; transition: opacity .3s var(--ease); }
.door__clip.is-playing{ opacity: 1; }

/* Services: the chrome browser + pen nib */
.door__icon{ position: absolute; height: auto; }
.door__icon--browser{ right: 12%; top: -6%; width: 62%; max-width: 128px; }
.door__icon--nib{ right: 0; top: 30%; width: 40%; max-width: 82px; transform: rotate(10deg); }
.door--services:hover .door__icon--nib{ animation: doorNib 1.4s cubic-bezier(.4, 0, .2, 1) 1; }
@keyframes doorNib{ 40%{ transform: rotate(-4deg) translate3d(-4px, 2px, 0); } }

/* About: Jay's signature draws itself in */
.door__sig{
  position: absolute;
  right: 0;
  top: 8%;
  width: 100%;
  height: auto;
  max-width: 190px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .01s linear .35s;
}
.door--about:hover .door__sig,
.door--about:focus-visible .door__sig{
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s cubic-bezier(.45, .05, .35, 1) .08s;
}

/* Contact: a phone showing the new-contact card */
.door__phone{
  position: absolute;
  right: 8%;
  top: -6%;
  width: 40%;
  max-width: 90px;
  aspect-ratio: 150 / 314;
}
.door__phone-frame{ width: 100%; height: 100%; }
.door__phone-card{
  position: absolute;
  inset: 16% 12% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  text-align: center;
}
.door__phone-avatar{ width: 58%; height: auto; }
.door__phone-name{ font-size: .5rem; font-weight: 600; letter-spacing: .02em; color: #FFFFFF; white-space: nowrap; }
.door__phone-add{
  margin-top: .15rem;
  padding: .1rem .35rem;
  border-radius: 999px;
  font-size: .42rem;
  font-weight: 500;
  white-space: nowrap;
  color: #FFFFFF;
  background: linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%);
}

/* Touch: big, calm tap targets; no hover effects, no previews. */
@media (pointer: coarse){
  .door{ min-height: 118px; }
  .door:active{ transform: scale(.985); border-color: rgba(215, 226, 234, .3); }
}
@media (max-width: 379.98px){
  .door{ min-height: 108px; padding: .9rem .95rem 1rem; border-radius: 18px; }
  .door__body{ padding-right: 1.1rem; }
  .door__arrow{ right: .85rem; bottom: .9rem; }
}

/* ---------------------------------------------------------------------- */
/* Scroll hint                                                             */
/* ---------------------------------------------------------------------- */

.boot-hint{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 0 0 1.4rem;
  color: rgba(215, 226, 234, .55);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  pointer-events: none;
}
.boot-hint__label{ padding-left: .3em; }        /* optically recentre the tracked word */
.boot-hint__line{
  position: relative;
  width: 1px;
  height: 34px;
  overflow: hidden;
  background: rgba(215, 226, 234, .16);
}
.boot-hint__line::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #D7E2EA);
  transform: translate3d(0, -100%, 0);
  animation: bootHint 2.2s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes bootHint{
  0%{ transform: translate3d(0, -100%, 0); }
  60%, 100%{ transform: translate3d(0, 100%, 0); }
}
@media (max-height: 560px){ .boot-hint{ display: none; } }

/* ---------------------------------------------------------------------- */
/* Entrance effects layer (cursor, echoes, ripple, glow)                   */
/* ---------------------------------------------------------------------- */

.boot-fx{
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  overflow: hidden;
  pointer-events: none;
  --cw: 140px;                      /* cursor width, set by js/home.js */
  --rd: 150px;                      /* ripple diameter, set by js/home.js */
}
.intro-play .boot-fx{ display: block; }

/* A cursor wrapper's origin (0,0) is the arrow's tip: that is the point that
   travels the path, presses and rotates. The chrome arrow's tip sits at
   (145, 70) of the 600px source, i.e. 24.17% / 11.67% of the image. */
.boot-cursor{
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  opacity: 0;
}
.boot-cursor img{
  position: absolute;
  left: calc(var(--cw) * -.2417);
  top: calc(var(--cw) * -.1167);
  width: var(--cw);
  height: var(--cw);
  max-width: none;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
}
.boot-cursor__glow{
  position: absolute;
  left: calc(var(--cw) * -.35);
  top: calc(var(--cw) * -.2);
  width: calc(var(--cw) * 1.25);
  height: calc(var(--cw) * 1.25);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(182, 0, 168, .32), rgba(118, 33, 176, .14) 55%, transparent 100%);
}
.boot-cursor--echo img{ filter: blur(5px); }

.boot-ring,
.boot-glow{
  position: absolute;
  left: 0;
  top: 0;
  width: var(--rd);
  height: var(--rd);
  margin: calc(var(--rd) / -2) 0 0 calc(var(--rd) / -2);
  border-radius: 50%;
  opacity: 0;
}
.boot-ring{
  border: 1.5px solid rgba(215, 226, 234, .9);
  box-shadow: 0 0 18px rgba(215, 226, 234, .18), inset 0 0 18px rgba(215, 226, 234, .12);
}
.boot-ring--iri{
  border: 0;
  box-shadow: none;
  background: conic-gradient(from 200deg, #B600A8, #7621B0, #BBCCD7, #BE4C00, #B600A8);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.boot-glow{
  background: radial-gradient(closest-side, rgba(255, 255, 255, .28), rgba(187, 204, 215, .08) 55%, transparent);
}

/* ---------------------------------------------------------------------- */
/* Pre-animation states (only while an entrance is pending or running)     */
/* ---------------------------------------------------------------------- */

.intro-play .boot-title__vis,
.intro-play .boot-title .ch,
.intro-play .o-mark,
.intro-play .boot-tag__vis,
.intro-play .door,
.intro-play .boot-hint,
.intro-play .hero--home .site-nav,
.intro-quick .boot__stage,
.intro-quick .boot-hint,
.intro-quick .hero--home .site-nav{ opacity: 0; visibility: hidden; }   /* hidden, not just transparent: no layout-shift reports while fonts swap */
/* Invisible links must not catch the click that skips the entrance. */
.intro-play .door,
.intro-play .hero--home .site-nav,
.intro-quick .boot__stage,
.intro-quick .hero--home .site-nav{ pointer-events: none; }

/* Failsafe: if the script never starts a timeline (blocked GSAP, a crash),
   everything shows itself after 3.5 s instead of staying hidden. */
html.intro-play:not(.intro-live) .boot-title__vis,
html.intro-play:not(.intro-live) .boot-title .ch,
html.intro-play:not(.intro-live) .o-mark,
html.intro-play:not(.intro-live) .boot-tag__vis,
html.intro-play:not(.intro-live) .door,
html.intro-play:not(.intro-live) .boot-hint,
html.intro-play:not(.intro-live) .hero--home .site-nav,
html.intro-quick:not(.intro-live) .boot__stage,
html.intro-quick:not(.intro-live) .boot-hint,
html.intro-quick:not(.intro-live) .hero--home .site-nav{ animation: bootFailsafe .4s ease 3.5s forwards; }
html.intro-play:not(.intro-live) .boot-fx{ animation: bootFailsafeOut .2s ease 3.5s forwards; }
@keyframes bootFailsafe{ to{ opacity: 1; visibility: visible; } }
@keyframes bootFailsafeOut{ to{ opacity: 0; visibility: hidden; } }

.intro-live .boot-title .ch,
.intro-live .o-mark,
.intro-live .door,
.intro-live .boot-cursor,
.intro-live .boot-ring,
.intro-live .boot-glow{ will-change: transform, opacity; }
.intro-live .door{ transition: none; }

/* ---------------------------------------------------------------------- */
/* 2. Statement                                                            */
/* ---------------------------------------------------------------------- */

.statement{
  padding: clamp(5rem, 12vw, 10rem) var(--gutter) clamp(6rem, 13vw, 11rem);
  border-top: 1px solid rgba(215, 226, 234, .08);
}
.statement__title{
  max-width: 1400px;
  margin: 0 auto;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: .98;
  text-align: center;
  font-size: clamp(2.3rem, 8.4vw, 150px);
  padding-bottom: .04em;
}
.statement__title span{ display: block; }

.proofs{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2rem;
  max-width: 1360px;
  margin: clamp(3.5rem, 8vw, 6.5rem) auto 0;
}
@media (min-width: 640px){ .proofs{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px){ .proofs{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.proof{
  display: grid;
  gap: .55rem;
  align-content: start;
  padding: 1.6rem 0 1.8rem;
  border-top: 1px solid rgba(215, 226, 234, .16);
}
.proof__num{
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .14em;
  color: rgba(215, 226, 234, .5);
}
.proof__title{
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.15;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--ink);
}
.proof__desc{
  max-width: 22rem;
  font-weight: 300;
  line-height: 1.6;
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  color: rgba(215, 226, 234, .7);
}

/* ---------------------------------------------------------------------- */
/* 3. Selected work                                                        */
/* ---------------------------------------------------------------------- */

.picks__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 1.5rem;
  max-width: 1360px;
  margin: 0 auto;
}
/* Six builds. Tablets: two columns, three rows (with an odd count, the last
   runs across both as a wide strip). Desktop: two rows of three. (With five
   builds this was two large cards over three.) */
@media (min-width: 640px) and (max-width: 1023.98px){
  .picks__list > li:nth-child(odd):last-child{ grid-column: 1 / -1; }
  .picks__list > li:nth-child(odd):last-child .pick__media{ aspect-ratio: 16 / 7; }
}
@media (min-width: 1024px){
  .picks__list{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
}

.pick{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  color: var(--bg);
}
.pick__media{
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  background: linear-gradient(135deg, #E9EEF1, #CBD5DC);
  box-shadow: 0 1px 0 rgba(12, 12, 12, .06), 0 18px 40px -26px rgba(12, 12, 12, .55);
}
.pick__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.pick__meta{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
}
.pick__text{ display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pick__label{
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .74rem;
  color: rgba(12, 12, 12, .55);
}
.pick__name{
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}
.pick__go{
  flex: 0 0 auto;
  margin-bottom: .1rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1.5px solid rgba(12, 12, 12, .8);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .66rem;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .pick:hover .pick__media img{ transform: scale(1.035); }
  .pick:hover .pick__go{ background: var(--bg); color: var(--white); }
}
.pick:focus-visible{ outline: 2px solid var(--bg); outline-offset: 6px; border-radius: 22px; }

/* Phones: a swipeable row that peeks the next card. */
@media (max-width: 639.98px){
  .picks__list{
    display: flex;
    gap: 1rem;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) .5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .picks__list::-webkit-scrollbar{ display: none; }
  .picks__list > li{ flex: 0 0 82%; scroll-snap-align: start; }
}

.picks__more{
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                          */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .door,
  .door::before,
  .door__peek,
  .door__arrow,
  .pick__media img{ transition: none !important; }
  .door:hover,
  .door:focus-visible{ transform: none; }
  .door__sig{ clip-path: none; }
  .door--services:hover .door__icon--nib{ animation: none; }
  .boot-hint__line::after{ animation: none; transform: none; }
}