/* ===== Nick Tyler Tattoo — apex home · shared shell =====
   Brand system: The Drop (Space Grotesk / Space Mono / Cormorant italic accent)
   Champagne #B8A98A binds this to the Instrument Serif pages (/events/, /otaat/). */

:root{
  --ink:#0A0A0B;
  --panel:#121214;
  --panel-2:#171719;
  --bone:#F2ECE1;
  --bone-dim:rgba(242,236,225,.66);
  --bone-faint:rgba(242,236,225,.60);
  --champ:#B8A98A;
  --champ-lift:#D6C8A9;
  --line:rgba(184,169,138,.16);
  --line-2:rgba(184,169,138,.34);
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:12px;
  --wrap:1200px;
  --gut:clamp(20px,5vw,64px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--champ);outline-offset:3px}

.mono{font-family:var(--mono);font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
/* Accent word in a headline. Was Cormorant italic; the light serif read thin
   next to Space Grotesk 700, so the accent is carried by colour alone and
   inherits the headline's face and weight. */
.ser{color:var(--champ)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--champ);margin-right:7px;vertical-align:1px}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--gut);
  background:linear-gradient(to bottom,rgba(10,10,11,.88),rgba(10,10,11,0));
  backdrop-filter:blur(6px);
}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo__txt{font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-link{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--bone-dim);transition:color .3s var(--ease)}
.nav-link:hover{color:var(--champ)}
.nav-cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line-2);padding:9px 16px;color:var(--champ);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.nav-cta:hover{background:var(--champ);color:var(--ink)}
@media(max-width:760px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px var(--gut) 72px;
}
/* ---------- OO rings hero ----------
   Full-bleed slow loop (poster = the same frame graded as a still) behind the
   wordmark: interlocked obsidian rings, the logo mark, silhouetted by a
   breathing backlight. The scrim keeps the type clean and melts the frame into
   the page ground at the bottom. Replaced the Flower-of-Life canvas, 2026-08-28. */
.inkhero{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.inkhero video{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.inkhero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(10,10,11,.28),rgba(10,10,11,.08) 45%,rgba(10,10,11,.5) 82%,var(--ink) 100%)}
.hero-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px}
.hero-kick{color:var(--champ)}
/* set in caps — needs positive tracking, where the mixed-case version wanted negative */
/* Set to fill the measure, not sit inside it: 700, tight tracking, tight
   leading. Caps at this weight want negative tracking where the medium
   weight wanted a touch of positive. */
.wm{
  font-weight:700;line-height:.86;letter-spacing:-.03em;
  text-transform:uppercase;
  font-size:clamp(46px,13vw,200px);text-wrap:balance;
  white-space:nowrap;
}
.hero-sub{
  font-family:var(--mono);font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bone-dim);line-height:1.7;
}
.hero-line{max-width:36ch;color:var(--bone-dim);font-size:clamp(15px,1.7vw,18px);text-wrap:balance}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:4px}
.hero-meta{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;color:var(--bone-faint)}

.btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--line-2);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn--solid{background:var(--champ);color:var(--ink);border-color:var(--champ)}
.btn--solid:hover{background:var(--champ-lift);border-color:var(--champ-lift)}
.btn--ghost{color:var(--champ)}
.btn--ghost:hover{background:rgba(184,169,138,.1);border-color:var(--champ)}

.scrollcue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);
}
.scrollcue__line{width:1px;height:34px;background:linear-gradient(var(--champ),transparent)}

/* ---------- section furniture ---------- */
.sec{padding:clamp(72px,10vw,128px) 0;border-top:1px solid var(--line)}
.sidx{color:var(--champ);margin-bottom:14px}
.stitle{font-size:clamp(28px,4.4vw,52px);font-weight:500;letter-spacing:-.02em;line-height:1.06;text-wrap:balance}
.slead{margin-top:16px;max-width:52ch;color:var(--bone-dim);font-size:clamp(15px,1.6vw,17px)}

/* ---------- doors (ruled ledger rows) ---------- */
.doors{border-top:1px solid var(--line)}
.door{
  position:relative;display:grid;grid-template-columns:78px 1fr auto;align-items:center;
  gap:clamp(18px,4vw,48px);
  padding:clamp(26px,3.6vw,42px) var(--gut);
  border-bottom:1px solid var(--line);
  max-width:var(--wrap);margin-inline:auto;
  transition:background .5s var(--ease);
}
.door::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--champ);transition:width .6s var(--ease);
}
.door:hover{background:rgba(184,169,138,.038)}
.door:hover::after{width:100%}
.door-mark{width:56px;height:56px;color:var(--champ);opacity:.62;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.door:hover .door-mark{opacity:1;transform:rotate(30deg)}
.door-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.door-name{font-size:clamp(21px,2.9vw,34px);font-weight:500;letter-spacing:-.015em;line-height:1.1}
.door-desc{color:var(--bone-dim);font-size:15px;max-width:46ch}
.door-tag{color:var(--champ);font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.door-go{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--champ);white-space:nowrap;
  transition:transform .45s var(--ease);
}
.door:hover .door-go{transform:translateX(6px)}
@media(max-width:700px){
  .door{grid-template-columns:44px 1fr;gap:16px}
  .door-mark{width:40px;height:40px}
  .door-go{grid-column:2;justify-self:start}
}

/* ---------- proof ---------- */
.proof{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:820px){.proof{grid-template-columns:1fr}}
.proof-bio{color:var(--bone-dim);font-size:clamp(15px,1.7vw,18px);max-width:56ch}
.greview{
  display:flex;align-items:center;gap:16px;
  border:1px solid var(--line);padding:22px 24px;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.greview:hover{border-color:var(--line-2);background:rgba(184,169,138,.04)}
.greview__rate{font-size:38px;font-weight:500;color:var(--champ);line-height:1;font-variant-numeric:tabular-nums}
.greview__stars{color:var(--champ);letter-spacing:.12em;font-size:13px}
.greview__txt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--bone-dim);line-height:1.7}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:15px 0}
.marquee__track{display:flex;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.marquee__track span{padding-right:0}
.marquee__track i{color:var(--champ);font-style:normal;padding:0 22px}

/* ---------- flash strip (variant B) ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:34px}
@media(max-width:820px){.strip{grid-template-columns:repeat(2,1fr)}}
.chip{position:relative;display:block;background:var(--panel);overflow:hidden;aspect-ratio:3/4}
.chip img{width:100%;height:100%;object-fit:cover;filter:grayscale(.18) contrast(1.02);transition:transform .8s var(--ease),filter .6s var(--ease)}
.chip:hover img{transform:scale(1.045);filter:none}
.chip__meta{
  position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;gap:8px;
  padding:9px 11px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  background:linear-gradient(to top,rgba(10,10,11,.92),rgba(10,10,11,0));
}
.chip__no{color:var(--champ)}
.chip__px{font-variant-numeric:tabular-nums;color:var(--bone-dim)}
.chip__flag{
  position:absolute;top:9px;left:9px;font-family:var(--mono);font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;padding:3px 7px;border:1px solid var(--line-2);color:var(--champ);
  background:rgba(10,10,11,.72);
}
.chip--gone img{filter:grayscale(1) brightness(.42)}
.chip--gone .chip__flag{color:var(--bone-faint);border-color:var(--line)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(56px,7vw,88px) 0 34px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px;color:var(--bone-dim)}
.foot-cols b{display:block;color:var(--champ);margin-bottom:9px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.foot-cols p{font-size:14px;line-height:1.8}
.foot-base{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  margin-top:44px;padding-top:20px;border-top:1px solid var(--line);color:var(--bone-faint);
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- splash (the home page's first screen) ---------- */
.splash{
  position:relative;min-height:100svh;
  display:grid;grid-template-rows:1fr auto auto;
  padding:clamp(48px,7vh,84px) var(--gut) clamp(20px,3.5vh,36px);
  max-width:1360px;margin-inline:auto;
}
/* inside the splash the cue is a row of the grid, not an overlay */
.splash .scrollcue{position:static;transform:none;margin:clamp(18px,2.6vh,30px) auto 0}
.splash .scrollcue__line{height:26px}
.splash .scrollcue:hover{color:var(--champ)}
.splash-core{
  position:relative;z-index:1;align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
}
/* soft ink scrim so the lattice reads *around* the name rather than through the small type */
.splash-core::before{
  content:"";position:absolute;left:50%;top:50%;z-index:-1;
  width:min(132%,100vw);height:168%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(10,10,11,.80) 0%, rgba(10,10,11,.66) 38%, rgba(10,10,11,.28) 62%, rgba(10,10,11,0) 80%);
}
.splash .wm{font-size:clamp(44px,13vw,190px)}
.splash .hero-sub{margin-top:2px}
.quad{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.quad-cell{
  display:flex;flex-direction:column;gap:9px;
  padding:clamp(20px,2.6vh,32px) clamp(14px,2vw,26px);
  border-left:1px solid var(--line);
  transition:background .5s var(--ease);
}
.quad-cell:first-child{border-left:0}
.quad-cell:hover{background:rgba(184,169,138,.05)}
.quad-cell .door-mark{width:40px;height:40px;margin-bottom:2px}
.quad-cell:hover .door-mark{opacity:1;transform:rotate(30deg)}
.quad-name{font-size:clamp(16px,1.7vw,21px);font-weight:500;letter-spacing:-.01em;line-height:1.15}
.quad-tag{color:var(--bone-faint)}
.quad-go{color:var(--champ);margin-top:auto;padding-top:10px;transition:transform .45s var(--ease)}
.quad-cell:hover .quad-go{transform:translateX(5px)}
@media(max-width:860px){
  .splash{min-height:100svh;gap:30px;padding-top:clamp(56px,11vh,98px)}
  .quad{grid-template-columns:repeat(2,1fr)}
  .quad-cell:nth-child(3),.quad-cell:nth-child(4){border-top:1px solid var(--line)}
  .quad-cell:nth-child(odd){border-left:0}
}
/* Stay 2x2 all the way down rather than collapsing to a stack. Four stacked
   cells ran the splash to roughly three screens and pushed the doors under the
   mandala; the grid keeps them on one screen and clear of it. */
@media(max-width:460px){
  .quad{grid-template-columns:repeat(2,1fr)}
  .quad-cell{padding:18px 14px;gap:7px}
  .quad-cell .door-mark{width:32px;height:32px}
  .quad-name{font-size:16px;line-height:1.22;text-wrap:balance}
  .quad-tag{font-size:11px;letter-spacing:.07em;line-height:1.4}
  .quad-go{font-size:11px;letter-spacing:.07em;padding-top:9px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===== Touch targets (audited at 390px, 2026-07-31) ===== */
@media(max-width:900px){
  .nav-logo{min-height:44px;display:flex;align-items:center}
  .nav-cta{min-height:44px;display:inline-flex;align-items:center}
  .quad-cell{min-height:44px}
  .btn{min-height:44px}
}

/* ---------- studio: the artist, the tally, their words ----------
   Was one two-column block: identity + rating in a narrow rail, bio then five
   equal review rows in the wide column. Three problems with that. The 5.0 sat
   in the rail, structurally subordinate to a paragraph, when it's the strongest
   thing on the page. The bio was one 100-word brick. And five rows of identical
   weight gave the eye nowhere to land, so the reviews read as a wall.
   Now three bands: rail + voice, then a full-bleed tally, then their words with
   one quote pulled up to display size. Still hairline rules and no cards, so it
   speaks the same language as the doors above it. */
.studio__grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);
  gap:clamp(24px,3.2vw,36px) clamp(26px,5.5vw,86px);align-items:start;
}
/* Explicit placement, because the spec rail is after the bio in source order
   (see the note in index.html) but belongs in the left rail on a wide screen. */
@media(min-width:901px){
  .styles{grid-column:1;grid-row:1}
  .studio__body{grid-column:2;grid-row:1}
}
/* stacked, the rail would otherwise run the full 1200px and strand its values
   against a lot of empty right-hand space */
@media(max-width:900px){
  .studio__grid{grid-template-columns:1fr}
  .styles{max-width:560px}
}

/* Meet your artist as an Instagram profile header: avatar, handle, the three
   counts, follow. The counts sit on a hairline rule rather than in a card, so
   the block reads as part of the same ruled system as the spec rail below it
   rather than as a pasted-in widget. */
.ig{margin-bottom:clamp(30px,4vw,52px)}
.ig__handle{
  font-size:clamp(26px,4vw,46px);font-weight:500;letter-spacing:-.02em;line-height:1.06;
  display:flex;align-items:center;gap:.26em;flex-wrap:wrap;
}
/* Instagram sizes its badge near 1:1 with the username because that sits at
   body size. Against a display-size handle the same ratio would be a 46px
   badge shouting over the name, so it is held to a fifth of that and floored
   so it stays legible on a phone. */
.ig__verified{width:clamp(15px,1.9vw,21px);height:auto;flex:0 0 auto}
.ig__handle a{
  color:var(--bone);border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.ig__handle a:hover{color:var(--champ);border-bottom-color:var(--line-2)}

.ig__bar{
  margin-top:clamp(20px,2.6vw,30px);padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;flex-wrap:wrap;gap:clamp(16px,3vw,36px);
}
/* Instagram's story ring. The gradient is theirs verbatim, read off Instagram's
   own stylesheet rather than eyeballed. It stays a 125deg linear gradient — the
   ring is a square of it, oversized and clipped to the circle, turning slowly —
   so the colour ramp is exactly Instagram's and only its angle moves. Rebuilding
   it as a conic gradient would have spread the same stops around the circle and
   changed where each colour lands. */
.ig__piclink{
  position:relative;flex:0 0 auto;display:block;
  border-radius:50%;padding:3px;overflow:hidden;
}
/* Only 6% oversize. A square turning about its centre always covers its own
   inscribed circle, so 112% of the ring box is plenty of margin — and keeping
   it tight matters, because the gradient ramp spans this element: at 150% the
   15% gold and 85% purple stops fell outside the visible ring and it degraded
   to orange-through-magenta, losing two of Instagram's five colours. */
.ig__piclink::before{
  content:"";position:absolute;inset:-6%;
  background:linear-gradient(125deg,#ffd600 15%,#ff7a00 30%,#ff0169,#d300c5 70%,#7638fa 85%);
  animation:igring 8s linear infinite;
}
@keyframes igring{to{rotate:360deg}}
.ig__piclink:hover::before{animation-duration:3.2s}

.ig__pic{
  /* height:auto is load-bearing — the width/height attributes are there to
     reserve layout space, but the height one is a presentational hint that
     otherwise pins this to 150px and renders the circle as an ellipse */
  position:relative;display:block;
  width:clamp(72px,9vw,104px);height:auto;aspect-ratio:1;
  border-radius:50%;object-fit:cover;
  /* the gap that separates ring from photo, the way Instagram's does */
  border:2px solid var(--ink);
}
/* the page's own still mode is used for screenshots; reduced-motion is the
   accessibility case. Both want the ring parked rather than spinning. */
@media(prefers-reduced-motion:reduce){.ig__piclink::before{animation:none}}
body.still .ig__piclink::before{animation:none}
.ig__stats{display:flex;align-items:center;gap:clamp(20px,3.4vw,48px);flex:1 1 auto;min-width:0}
.ig__stat{display:flex;flex-direction:column;gap:5px}
.ig__n{
  font-size:clamp(21px,2.6vw,30px);font-weight:500;color:var(--bone);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.ig__l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-faint)}
.ig__follow{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  background:var(--champ);color:var(--ink);border:1px solid var(--champ);
  padding:.95em 1.5em;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.ig__follow:hover{background:var(--champ-lift);border-color:var(--champ-lift)}
.ig__glyph{flex:0 0 auto}
/* the follow drops to its own full-width row before the counts start crowding */
@media(max-width:640px){
  .ig__bar{gap:14px 18px}
  .ig__stats{gap:clamp(14px,5vw,24px)}
  .ig__follow{width:100%;min-height:44px}
}

/* the reviews block gets the line the tally band used to carry full-bleed —
   the 5.0 is a stat in the profile header now, so it is not said twice */
/* ---------- the award ----------
   The one third-party judgement on a page that is otherwise his own voice and
   his own clients', so it leads the section and takes the champagne. Panel and
   a soft champagne wash off the left edge, weighted toward the medal. */
/* the award band between the hero and Meet your artist runs tighter than a
   full .sec so the badge reads as a ribbon, not a chapter */
.sec--award{padding:clamp(26px,4.5vw,52px) 0}
.sec--award .award{margin-top:0}
.award{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:clamp(16px,2.6vw,30px);
  margin-top:clamp(16px,2vw,24px);
  padding:clamp(20px,2.6vw,32px) clamp(20px,3vw,36px);
  border:1px solid var(--line-2);border-radius:var(--r);
  background:radial-gradient(120% 170% at 0% 50%,rgba(184,169,138,.11),transparent 62%),var(--panel);
}
.award__medal{width:clamp(50px,5.8vw,72px);height:auto;color:var(--champ);flex:0 0 auto}
.award__body{min-width:0}
.award__rank{color:var(--champ);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.award__name{
  margin-top:7px;font-size:clamp(19px,2.5vw,30px);font-weight:500;
  letter-spacing:-.018em;line-height:1.14;text-wrap:balance;
}
.award__by{margin-top:9px;color:var(--bone-faint);font-size:11px;letter-spacing:.08em}
.award__by a{color:var(--champ);border-bottom:1px solid var(--line-2);transition:border-color .35s var(--ease)}
.award__by a:hover{border-bottom-color:var(--champ)}
/* one slow pass of light every several seconds. The only thing on the page that
   catches light, which is more or less what an award is for. */
.award::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(214,200,169,.13) 50%,transparent 62%);
  transform:translateX(-130%);
  animation:sheen 7.5s ease-in-out 1s infinite;
}
@keyframes sheen{0%{transform:translateX(-130%)}52%,100%{transform:translateX(130%)}}
@media(max-width:560px){.award{flex-direction:column;align-items:flex-start}}

/* ---------- the rating line ---------- */
.rate{
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:8px clamp(12px,1.7vw,20px);
  margin-top:clamp(22px,2.8vw,34px);
  padding-bottom:clamp(15px,1.9vw,21px);border-bottom:1px solid var(--line);
}
.rate__num{
  font-size:clamp(30px,4.2vw,48px);font-weight:500;color:var(--champ);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.rate__stars{display:inline-flex;gap:3px;font-size:clamp(13px,1.5vw,17px)}
.rate__stars i{font-style:normal;color:var(--champ);opacity:0;transform:scale(.5) rotate(-20deg)}
.rate__say{color:var(--bone-dim);font-size:clamp(14px,1.5vw,16px)}

/* Motion is driven off the block's own reveal, so nothing moves until the
   section is actually on screen: five stars land in sequence. --i sets each
   one's place in the queue. */
.said.in .rate__stars i{animation:starpop .55s var(--ease) forwards;animation-delay:calc(.2s + var(--i)*.085s)}
@keyframes starpop{to{opacity:1;transform:none}}

/* ---------- the review lane ----------
   Six quotes stacked ran most of a screen. One lane holds them to a single
   card height. The track carries the set twice and travels exactly -50%, so
   the second copy arrives where the first began and the loop has no seam;
   change the number of cards and it still lines up, because the distance is
   a proportion of the track rather than a pixel count. */
.revscroll{
  position:relative;overflow:hidden;
  margin-top:clamp(18px,2.2vw,26px);
  /* the lane runs full width and fades at both ends rather than stopping at a
     hard edge, so cards enter and leave instead of popping */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.revscroll__track{
  display:flex;width:max-content;gap:clamp(12px,1.5vw,18px);
  animation:lane 64s linear infinite;
}
.revscroll:hover .revscroll__track,
.revscroll:focus-within .revscroll__track{animation-play-state:paused}
@keyframes lane{to{transform:translateX(-50%)}}

.rcard{
  flex:0 0 auto;width:clamp(266px,25vw,344px);
  display:flex;flex-direction:column;
  padding:clamp(18px,2vw,24px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.rcard:hover{border-color:var(--line-2);background:var(--panel-2)}
.rcard__q{color:var(--bone-dim);font-size:14.5px;line-height:1.62;flex:1}
.rcard__foot{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
}
.rcard__who{display:flex;flex-direction:column;gap:4px;min-width:0}
.rcard__name{color:var(--bone);font-size:13px;letter-spacing:-.01em}
/* Kept for the review dates, which are not on these cards yet: the only place
   they exist is Google itself, and the copies on the Manus page are hardcoded
   "N months ago" strings with no anchor date, so there is nothing here to
   derive a real date from. Add a .rcard__date span under the name and it lands
   correctly. */
.rcard__date{color:var(--bone-faint);font-size:10px;letter-spacing:.08em}
.rcard__src{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.rcard__g{width:14px;height:14px;flex:0 0 auto}
.rcard__ok{color:var(--bone-faint);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}

/* Both still mode and reduced-motion want this parked. Without these the
   stars would sit at opacity:0 forever in a screenshot, because their reveal
   fires but the animation is what actually makes them visible. The lane stops
   too — a strip that never stops moving is the exact thing reduced-motion is
   asking not to see. */
@media(prefers-reduced-motion:reduce){
  .award::after,.revscroll__track{animation:none}
  .rate__stars i{opacity:1;transform:none;animation:none}
  /* A stopped lane still overflows, so this used to hand back overflow-x:auto
     — which is a scrollbar, and a scrollbar is not a quieter version of the
     animation, it is a different component. Lay the cards out as a grid
     instead: nothing moves, nothing is clipped, and there is no bar to drag.
     Costs vertical space, but only for the people who asked for less motion. */
  .revscroll{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .revscroll__track{
    width:auto;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  }
  /* the second set only exists to make the loop seamless; with no loop running
     it would just print every review twice */
  .revscroll__track .rcard[aria-hidden="true"]{display:none}
  .rcard{width:auto}
}
body.still .award::after,body.still .revscroll__track{animation:none}
body.still .rate__stars i{opacity:1;transform:none;animation:none}

/* Styles, as a set of tags rather than the key/value ledger that was here.
   A ledger is for facts that pair with a label; these are one list of six
   equal things, so they get equal weight and wrap as a group. Pill outlines
   rather than the hairline rows, because a row per style would run the rail
   twice as long for half the information. */
.styles{border-top:1px solid var(--line);padding-top:clamp(15px,1.9vw,19px)}
.styles__k{color:var(--champ);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:13px}
.styles__list{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.styles__list li{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-dim);padding:.66em .92em;
  border:1px solid var(--line);border-radius:999px;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.styles__list li:hover{border-color:var(--champ);color:var(--bone)}

.bio__p{color:var(--bone-dim);font-size:clamp(15px,1.55vw,17px);line-height:1.78;max-width:62ch}
.bio__p + .bio__p{margin-top:17px}
.bio__link{
  color:var(--champ);border-bottom:1px solid var(--line-2);
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.bio__link:hover{border-bottom-color:var(--champ);color:var(--champ-lift)}

/* their words */
.said{margin-top:clamp(46px,6vw,80px)}
.said__title{
  font-size:clamp(32px,5.5vw,60px);font-weight:500;
  letter-spacing:-.02em;line-height:1.04;text-wrap:balance;
}

/* Reviews as cards. They were hairline rows; boxes give each one an edge, so a
   review reads as a discrete thing rather than a paragraph in a list. The lead
   is the same card in a lighter panel at display size, and the four below it
   pair up on a wide screen so the band stops running so long. */
.rev{
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px);
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.rev:hover{border-color:var(--line-2);background:var(--panel-2)}
.rev__q{color:var(--bone-dim);font-size:15px;line-height:1.68}
.rev__by{
  display:block;margin-top:16px;font-style:normal;
  color:var(--bone-faint);font-size:10px;letter-spacing:.1em;
}

.rev--lead{
  margin-top:14px;background:var(--panel-2);border-color:var(--line-2);
  padding:clamp(24px,3.2vw,42px);
}
.rev--lead:hover{border-color:var(--champ);background:var(--panel-2)}
/* sized for a long spotlight: a 90-word quote at 29px runs off the screen */
.rev--lead .rev__q{
  color:var(--bone);font-size:clamp(17px,1.9vw,23px);font-weight:400;
  letter-spacing:-.014em;line-height:1.42;max-width:54ch;text-wrap:pretty;
}
.rev--lead .rev__q + .rev__q{margin-top:clamp(12px,1.4vw,17px)}
.rev--lead .rev__by{margin-top:clamp(18px,2.2vw,24px);color:var(--champ)}

.revs{
  list-style:none;margin-top:clamp(14px,1.6vw,20px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.revs > li{display:flex}
.revs .rev{flex:1}
/* odd count: the last card spans rather than stranding a half-empty row */
.revs > li:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:760px){.revs{grid-template-columns:1fr}}

/* the exit: same box, no fill, so it reads as an action and not a sixth review */
.allrev{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:20px;
  margin-top:clamp(14px,1.6vw,20px);
  padding:clamp(17px,2vw,23px) clamp(20px,2.4vw,28px);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.allrev:hover{border-color:var(--champ);background:rgba(184,169,138,.05)}
.allrev__txt{font-size:clamp(15px,1.7vw,18px);font-weight:500;letter-spacing:-.01em}
.allrev__go{color:var(--champ);white-space:nowrap;transition:transform .45s var(--ease)}
.allrev:hover .allrev__go{transform:translateX(6px)}
@media(max-width:900px){.allrev{min-height:44px}}

/* ---------- gift card ----------
   Boxed to match the review cards. The wrap now sits outside it, so the gutter
   is the card's margin rather than its padding. */
.giftband{border-top:1px solid var(--line);padding:clamp(38px,5vw,66px) 0}
.gift{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(16px,3vw,44px);
  padding:clamp(24px,3vw,38px);
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.gift:hover{border-color:var(--champ);background:var(--panel-2)}
.gift__body{display:flex;flex-direction:column;min-width:0}
.gift__idx{color:var(--champ);margin-bottom:11px}
.gift__name{font-size:clamp(20px,2.6vw,30px);font-weight:500;letter-spacing:-.015em;line-height:1.14}
.gift__desc{margin-top:8px;color:var(--bone-dim);font-size:15px;max-width:46ch;text-wrap:balance}
.gift__go{
  color:var(--champ);white-space:nowrap;
  font-size:11px;letter-spacing:.1em;
  transition:transform .45s var(--ease);
}
.gift:hover .gift__go{transform:translateX(6px)}
@media(max-width:640px){
  .gift{grid-template-columns:1fr;gap:16px}
  .gift__go{justify-self:start}
}