/* ===========================================================
   URBAN HIPPIE — shared stylesheet, all four pages
   Palette: black canvas, white type, red = the one active
   color, yellow = rare highlight. No brown — black is already
   the dark anchor now that the canvas itself is dark.
   =========================================================== */
:root{
  --display:'Titan One','Bagel Fat One','Bowlby One',system-ui,sans-serif;
  --text:'Outfit',system-ui,sans-serif;
  --bg:#0a0a0a;
  --ink:#ffffff;
  --muted:rgba(255,255,255,.56);
  --faint:rgba(255,255,255,.34);
  --red:#FA282B;
  --yellow:#FFE522;
  --rule:rgba(255,255,255,.14);
  --slot:rgba(255,255,255,.06);
  --pad:clamp(20px,5vw,80px);
  --gap:clamp(64px,10vw,150px);
  --nav-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.6;
  overflow-x:clip;cursor:default;
}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.99;letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.mono{font-family:var(--text);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600}
.wrap,nav,footer,.strip{padding-left:var(--pad);padding-right:var(--pad)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- fixed header: top strip + nav, one solid block ----------
   Always fixed, on every page and every breakpoint — simpler and more
   robust than switching between sticky and fixed by scroll-engine state. */
#siteHeader{position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(10,10,10,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
main{padding-top:var(--nav-h)} /* --nav-h is set precisely by JS to the header's real height */

.strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding-top:9px;padding-bottom:9px;border-bottom:1px solid var(--rule)}
/* On phones the middle column is far too narrow once the clock takes its
   space — items were permanently clipped mid-word. Give the ticker its own
   full-width row underneath instead, so whole items are readable. */
@media(max-width:700px){
  .strip{grid-template-columns:1fr;gap:7px}
  .strip .ticker-wrap{grid-column:1/-1}
}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);
  margin-right:8px;vertical-align:middle;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(max-width:700px){.ship-text{display:none}}

/* ---------- booking ticker — centered in the top strip, between
   the clock and "Shipping across India". Plain scrolling text for
   the service list; the liquid colour treatment is scoped to just
   the final "Book a session" item, which is also the only clickable
   piece. Slow on purpose — this should feel like ambient detail,
   not something competing for attention. ---------- */
.ticker-wrap{justify-self:stretch;overflow:hidden;width:100%;
  height:26px;position:relative}
/* spacing is a right-margin on every child rather than a flex gap: a gap
   isn't added after the last item, so one copy measured 13px short of half
   the track and the loop jumped 13px every lap instead of circling
   seamlessly. With margins each copy is exactly half, so -50% lands
   perfectly and the seam is invisible. */
.ticker-track{display:flex;align-items:center;white-space:nowrap;width:max-content;
  animation:tickerslide 11.118s linear infinite}
/* Runs rightward — the opposite direction to the red marquee below, so the
   two bars counter-rotate. The item list is reversed in the markup to match,
   which keeps them reading in order (Farm to cup … Book a session) as they
   enter from the left. Duplicated content + a 50% shift makes the loop
   seamless: there's no visible restart point. */
@keyframes tickerslide{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.ticker-track > *{margin-right:26px;flex-shrink:0}
.ticker-track > span{font-family:var(--text);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex-shrink:0}

.book-session{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  padding:4px 12px;flex-shrink:0}
.book-session .blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.85}
.book-session .b1{width:60%;height:150%;top:-25%;left:-10%;background:var(--red);
  animation:blobA 14s ease-in-out infinite}
.book-session .b2{width:55%;height:140%;top:-20%;left:35%;background:#a8790c;
  animation:blobB 18s ease-in-out infinite}
.book-session .b3{width:58%;height:145%;top:-22%;left:58%;background:#3d6b3a;
  animation:blobC 22s ease-in-out infinite}
@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10%,-8%) scale(1.12)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12%,9%) scale(.92)}}
@keyframes blobC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,-10%) scale(1.08)}}
.book-session .bs-text{position:relative;z-index:1;font-family:var(--text);font-size:10px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.5)}

@media(prefers-reduced-motion:reduce){
  .book-session .blob{animation:none}
  .ticker-track{animation:none;transform:translateX(0)}
}

nav{display:flex;justify-content:space-between;align-items:center;padding-top:12px;padding-bottom:12px}
.logo{width:clamp(84px,24vw,160px)}
.links{display:flex;gap:clamp(14px,3vw,36px);align-items:center}
.links a:not(.pill){position:relative;padding-bottom:2px}
.links a:not(.pill)::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.links a:not(.pill):hover::after,.links a.current::after{transform:scaleX(1);transform-origin:left}
.pill{background:var(--red);color:#fff;padding:10px 16px;transition:background .3s;white-space:nowrap;display:inline-block}
.pill:hover{background:var(--ink);color:var(--bg)}
.pill-short{display:none}
@media(max-width:480px){.pill{padding:9px 13px}.pill-full{display:none}.pill-short{display:inline}}
@media(max-width:860px){.hide-sm{display:none}}

/* ---------- mobile menu — the only way to reach About/Wholesale/Contact
   once the nav links hide at 860px. Hidden entirely above that width. ---------- */
.menu-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:50%;
  width:38px;height:38px;color:var(--ink);align-items:center;justify-content:center;
  padding:0;cursor:pointer;transition:border-color .25s}
.menu-toggle svg{width:18px;height:18px}
.menu-toggle .mi{display:flex}
.menu-toggle .mi-close{display:none}
.menu-toggle[aria-expanded="true"] .mi-open{display:none}
.menu-toggle[aria-expanded="true"] .mi-close{display:flex}
@media(max-width:860px){.menu-toggle{display:flex}}

.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:39;
  flex-direction:column;background:var(--bg);border-bottom:1px solid var(--rule);
  padding:8px var(--pad) 18px;max-height:calc(100svh - var(--nav-h));overflow-y:auto}
.mobile-menu a{padding:14px 0;border-top:1px solid var(--rule);font-family:var(--display);
  font-size:1.3rem;color:var(--ink)}
.mobile-menu a:active{color:var(--red)}
html.menu-open .mobile-menu{display:flex}
html.menu-open{overflow:hidden}

/* ---------- page fade transition ---------- */
/* ---------- rubber-band reveal, the native way ----------
   The word lives on the <html> background; <body> paints an opaque
   background over it, so it's invisible during all normal reading.
   Critically it's positioned BELOW the document's bottom edge — the
   overscroll strip only exposes what sits past that edge, so anchoring
   the image to 'bottom' left it hidden above the stretch and the bounce
   showed plain black. Offsetting it down puts it inside the stretch. */
html{
  background:#000 url(assets/kozhikode-word.webp) no-repeat;
  background-position:center calc(100% + 105px);
  background-size:min(62%,1100px) auto;
}
@media(max-width:900px){html{background-size:78% auto;background-position:center calc(100% + 80px)}}
@media(max-width:700px){html{background-size:92% auto;background-position:center calc(100% + 60px)}}
body{background:var(--bg)}
body{opacity:0;transform:translateY(6px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
body.is-ready{opacity:1;transform:none}
body.is-leaving{opacity:0;transform:translateY(-6px);transition:opacity .38s cubic-bezier(.4,0,1,1),transform .38s cubic-bezier(.4,0,1,1)}

/* ---------- smooth-scroll engine ---------- */
/* Opaque and above the reveal panel, so the panel stays completely
   hidden at every normal scroll position — it only appears when the
   page is pushed past its end (the shutter lift). */
#scrollArea{position:fixed;inset:0;overflow:hidden;z-index:1;background:var(--bg)}
html.has-smooth #scrollContent{will-change:transform}
html:not(.has-smooth) #scrollArea{position:static;overflow:visible}
#spacer{visibility:hidden}
html:not(.has-smooth) #spacer{display:none}

/* ---------- ambient background drift — barely visible, always on ----------
   Not a graphic, just enough that the black canvas doesn't feel static.
   Fixed behind everything, non-interactive. */
body::before{
  content:'';position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 30% 20%, rgba(250,40,43,.05), transparent 60%),
             radial-gradient(ellipse 50% 40% at 80% 70%, rgba(255,229,34,.03), transparent 60%);
  animation:drift 80s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-3%,2%) scale(1.06)}
}

section{position:relative;z-index:2}
.pad{padding-top:var(--gap);padding-bottom:var(--gap)}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--faint);margin-bottom:clamp(26px,4vw,48px)}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--rule)}

/* ---------- marquee ---------- */
.marquee{background:var(--red);color:var(--bg);overflow:hidden;padding:13px 0;position:relative;z-index:2}
.track{display:flex;gap:56px;width:max-content;animation:scroll 30s linear infinite}
.track span{white-space:nowrap;font-weight:600}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- buttons ---------- */
.cta{display:inline-flex;align-items:center;gap:14px;background:var(--red);color:#fff;padding:15px 26px;
  font-family:var(--text);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:background .3s,transform .3s,color .3s}
.cta:hover{background:var(--yellow);color:var(--bg)}
.cta i{font-style:normal;transition:transform .3s}
.cta:hover i{transform:translateX(5px)}
.cta.ghost{background:transparent;border:1px solid var(--rule);color:var(--ink)}
.cta.ghost:hover{border-color:var(--red);background:transparent;color:var(--ink)}

/* ---------- hero — image is a full-bleed background layer, bleeding
   up behind the fixed header, spanning to the very bottom of the hero
   (i.e. right up to the marquee). Text sits on top with a shadow +
   a directional gradient behind it so it never merges into the image. ---------- */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100svh - var(--nav-h));
  padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(20px,3vw,36px)}
.hero-media{position:absolute;top:calc(-1 * var(--nav-h));left:0;right:0;
  height:calc(100% + var(--nav-h));z-index:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:68% 38%}
.hero-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.62) 30%,rgba(10,10,10,.15) 56%,transparent 72%)}
@media(max-width:760px){
  .hero-media img{object-position:58% 30%}
  .hero-media::after{background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.72) 45%,rgba(10,10,10,.92) 100%)}
}
.hero-copy{position:relative;z-index:1;max-width:600px}
.hero h1{font-size:clamp(2.1rem,5.6vw,5.4rem);max-width:12ch;line-height:1.03;
  text-shadow:0 6px 28px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.9)}
.hero h1 em{font-style:normal;display:block}
.hero-copy>p{margin-top:clamp(16px,2.2vw,28px);max-width:34ch;color:rgba(255,255,255,.86);
  text-shadow:0 3px 16px rgba(0,0,0,.85)}
.hero .cta{margin-top:clamp(18px,2.4vw,30px)}

/* ---------- page header (about / wholesale / contact) ---------- */
.pagehead{padding-top:clamp(60px,9vw,120px);padding-bottom:clamp(40px,6vw,70px)}

/* ---------- training hero glow — two large blurred blobs drifting on
   independent loops behind the headline. Pure CSS, no JS. Sits between
   the navbar and the heading, behind the text; pointer-events:none so
   it never blocks the nav or any button. Opacity kept low so the white
   headline keeps its contrast. ---------- */
.hero-glow-wrap{position:relative;overflow:hidden}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-glow span{position:absolute;display:block;border-radius:50%;
  filter:blur(90px);will-change:transform}
.hero-glow .hg1{width:min(60%,620px);aspect-ratio:1/1;top:-18%;left:4%;
  background:radial-gradient(circle,rgba(250,40,43,.55),rgba(250,40,43,.12) 60%,transparent 75%);
  animation:hgDrift1 26s ease-in-out infinite}
.hero-glow .hg2{width:min(52%,520px);aspect-ratio:1/1;top:-6%;left:34%;
  background:radial-gradient(circle,rgba(255,110,50,.42),rgba(255,110,50,.10) 58%,transparent 74%);
  animation:hgDrift2 34s ease-in-out infinite}
@keyframes hgDrift1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(12%,8%) scale(1.14)}
  66%{transform:translate(-6%,4%) scale(.94)}
}
@keyframes hgDrift2{
  0%,100%{transform:translate(0,0) scale(1)}
  40%{transform:translate(-14%,10%) scale(1.1)}
  70%{transform:translate(8%,-4%) scale(.92)}
}
.pagehead h1,.pagehead p{position:relative;z-index:1}
@media(max-width:700px){.hero-glow span{filter:blur(60px)}}
@media(prefers-reduced-motion:reduce){.hero-glow span{animation:none}}
.pagehead h1{font-size:clamp(2.4rem,7vw,6.4rem);max-width:16ch}
.pagehead p{margin-top:20px;color:var(--muted);max-width:48ch;font-size:clamp(16px,1.4vw,19px)}

/* ---------- ambient glow — Farm to Cup through Recognition ----------
   One large, soft, blurred light that drifts down through this span
   as the page scrolls, fading in as Farm to Cup arrives and out
   before Recognition's first award. Position and fade are scroll-
   driven (site.js); the wobble below runs on its own, always. */
.glow-track{position:relative}
.glow{
  position:absolute;left:50%;top:0;
  width:clamp(280px,86vw,1100px);aspect-ratio:2/1;
  transform:translate(-50%,0);
  background:radial-gradient(ellipse at 50% 45%,rgba(250,40,43,.92),rgba(250,40,43,.5) 45%,rgba(250,40,43,.14) 70%,transparent 85%);
  filter:blur(75px);
  opacity:0;pointer-events:none;z-index:0;will-change:transform,opacity;
  border-radius:42% 58% 61% 39% / 45% 40% 60% 55%;
  animation:glowmorph 15s ease-in-out infinite;
}
@keyframes glowmorph{
  0%,100%{border-radius:42% 58% 61% 39% / 45% 40% 60% 55%}
  33%{border-radius:58% 42% 38% 62% / 55% 62% 38% 45%}
  66%{border-radius:48% 52% 55% 45% / 40% 55% 45% 60%}
}
@media(prefers-reduced-motion:reduce){.glow{display:none}}

/* ---------- scene slot — image/video anchor for sections that
   currently have none (Statement, Recognition, Closing). Same
   labelled-placeholder language as the rest of the site. ---------- */
.scene-slot{background:var(--slot);border:1px solid var(--rule);display:flex;align-items:center;
  justify-content:center;text-align:center;color:var(--faint);overflow:hidden;margin-top:clamp(32px,5vw,56px)}
.scene-slot span{font-family:var(--text);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;line-height:1.9}
.scene-slot.wide{aspect-ratio:21/9}
.scene-slot.tall{aspect-ratio:4/5;max-width:420px;margin-left:auto;margin-right:auto}
.statement h2{font-size:clamp(1.9rem,5.4vw,4.9rem);max-width:17ch}

/* ---------- farm to cup ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step-img{aspect-ratio:3/4;background:var(--slot);border:1px solid var(--rule);margin-bottom:20px;
  display:flex;align-items:flex-end;padding:16px;color:var(--faint);overflow:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .4s}
.step:hover .step-img{transform:translateY(-8px) scale(1.015);border-color:var(--red)}
.step-img span{font-family:var(--text);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;line-height:1.7}
.step h3{font-size:1.3rem;margin-bottom:10px}
.step p{color:var(--muted);font-size:15.5px}
.step .num{color:var(--red);margin-bottom:10px;display:block}

/* ---------- founder teaser (home) ---------- */
.founder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,88px);align-items:center}
@media(max-width:860px){.founder{grid-template-columns:1fr}}
.founder-img{aspect-ratio:4/5;background:var(--slot);border:1px solid var(--rule);display:flex;align-items:flex-end;
  padding:20px;color:var(--faint)}
.founder-img span{font-family:var(--text);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;line-height:1.8}
.founder h2{font-size:clamp(1.7rem,3.9vw,3.4rem)}
.founder p{margin-top:24px;color:var(--muted);max-width:42ch}
.textlink{display:inline-flex;align-items:center;gap:12px;margin-top:32px;border-bottom:1.5px solid var(--red);padding-bottom:5px}
.textlink i{font-style:normal;color:var(--red);transition:transform .3s}
.textlink:hover i{transform:translateX(6px)}

/* ---------- recognition — awards-ticker style ---------- */
.awardrow{display:grid;grid-template-columns:100px 1fr 2fr;gap:clamp(14px,3vw,40px);align-items:baseline;
  padding:22px 0;border-top:1px solid var(--rule)}
.awardrow:last-of-type{border-bottom:1px solid var(--rule)}
.awardrow .yr{color:var(--yellow)}
.awardrow h3{font-size:clamp(1.15rem,2.2vw,1.7rem);font-family:var(--text);font-weight:600;letter-spacing:-.01em}
.awardrow p{color:var(--muted);font-size:15px}
@media(max-width:700px){.awardrow{grid-template-columns:1fr;gap:6px}.awardrow .yr{order:-1}}

/* ---------- craft tag pills (about) ---------- */
.tagblock{margin-bottom:clamp(28px,4vw,44px)}
.tagblock .lbl{color:var(--faint);margin-bottom:14px;display:block}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{border:1px solid var(--rule);padding:9px 16px;font-size:14px;transition:border-color .25s,color .25s}
.tags span:hover{border-color:var(--red);color:var(--yellow)}

/* ---------- about: story blocks ---------- */
.story{max-width:66ch}
.story h2{font-size:clamp(1.7rem,3.6vw,3rem);margin-bottom:18px;max-width:16ch}
.story p{color:var(--muted);margin-bottom:16px;font-size:clamp(16px,1.3vw,18.5px)}
.story p:last-child{margin-bottom:0}
.timeline{display:grid;gap:0;max-width:520px}
.timeline div{padding:16px 0;border-top:1px solid var(--rule);font-family:var(--text);font-weight:600;
  letter-spacing:.02em;font-size:15px;color:var(--ink)}
.timeline div:last-child{border-bottom:1px solid var(--rule)}
.philosophy{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,50px)}
@media(max-width:760px){.philosophy{grid-template-columns:1fr}}
.philosophy h3{font-family:var(--display);font-size:1.5rem;color:var(--yellow);margin-bottom:12px}
.philosophy p{color:var(--muted);font-size:15.5px}

/* ---------- training page — three equal-weight service blocks ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4.5vw,56px)}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}
.tblock h3{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.9rem);margin-bottom:10px}
.tblock>p{color:var(--muted);font-size:15.5px;margin-bottom:clamp(26px,3vw,36px)}
.titem{border-top:1px solid var(--rule);padding-top:16px;margin-top:16px}
.titem:first-of-type{margin-top:0}
.titem .tlabel{display:block;font-family:var(--text);font-weight:600;color:var(--ink);
  margin-bottom:8px;font-size:15px}
.titem p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0}

.closing-cta h2{font-family:var(--display);font-size:clamp(1.9rem,4.4vw,3.6rem);
  max-width:16ch;margin-bottom:20px}
.closing-cta p{color:var(--muted);max-width:54ch;font-size:clamp(16px,1.4vw,19px);
  margin-bottom:clamp(28px,3.5vw,38px)}
.signed{max-width:56ch;padding-top:clamp(50px,7vw,90px);border-top:1px solid var(--rule)}
.signed p{font-size:clamp(18px,2vw,24px);line-height:1.5;margin-bottom:16px}
.signed .who{margin-top:28px;color:var(--muted);font-size:15px}
.signed .who b{color:var(--ink);display:block;font-family:var(--text);font-weight:600;font-size:16px;margin-bottom:2px}

/* ---------- wholesale ---------- */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}
@media(max-width:800px){.offer{grid-template-columns:1fr}}
.offer ul{list-style:none;display:grid;gap:16px}
.offer li{display:flex;gap:14px;color:var(--muted);font-size:16px}
.offer li::before{content:'—';color:var(--red);flex-shrink:0}
.panel{border:1px solid var(--rule);padding:clamp(28px,4vw,44px)}
.panel h3{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:14px}
.panel p{color:var(--muted);margin-bottom:24px;font-size:15.5px}

/* ---------- contact ---------- */
.reach-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);margin-top:clamp(40px,6vw,70px)}
@media(max-width:760px){.reach-grid{grid-template-columns:1fr}}
.reach-list{list-style:none;display:grid;gap:18px}
.reach-list a{font-size:clamp(18px,2vw,24px);font-family:var(--display);display:inline-block;transition:color .25s}
.reach-list a:hover{color:var(--red)}

/* reach icons — footer (small) + Contact page (large). Icon is its own
   hit target; the number, handle, or email sits beside it as a second link. */
.reach-icons{list-style:none;display:grid;gap:16px}
.reach-icons li{display:flex;align-items:center;gap:14px;min-width:0}
.reach-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;border:1px solid var(--rule);border-radius:50%;color:var(--muted);
  transition:color .25s,border-color .25s}
.reach-icon svg{width:18px;height:18px}
.reach-icons li:hover .reach-icon{color:var(--red);border-color:var(--red)}
.reach-num{color:var(--muted);font-size:15px;transition:color .25s;
  min-width:0;overflow-wrap:anywhere}
.reach-icons li:hover .reach-num{color:var(--ink)}
.reach-icons-lg .reach-icon{width:52px;height:52px}
.reach-icons-lg .reach-icon svg{width:24px;height:24px}
.reach-icons-lg .reach-num{font-size:clamp(17px,1.8vw,21px);font-family:var(--display)}
.contact-panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,28px);margin-top:clamp(50px,7vw,90px)}
@media(max-width:700px){.contact-panels{grid-template-columns:1fr}}
.art-slot{aspect-ratio:3/4;background:var(--slot);border:1px solid var(--rule);display:flex;align-items:center;
  justify-content:center;text-align:center;color:var(--faint)}
.art-slot span{font-family:var(--text);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;line-height:1.9}

/* ---------- closing ---------- */
.closing{text-align:center;padding-top:clamp(80px,11vw,160px);padding-bottom:clamp(80px,11vw,160px)}
.closing h2{font-size:clamp(1.9rem,6.2vw,6.2rem);max-width:15ch;margin:0 auto;line-height:1.02}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding-top:clamp(50px,7vw,88px);padding-bottom:34px;position:relative;z-index:2;background:var(--bg)}

/* ---------- reveal panel — a normal block at the very end of the
   document, sitting below the footer. Not fixed: making it fixed meant
   it painted at the viewport bottom at every scroll position and leaked
   through on shorter pages. As an ordinary element it simply scrolls
   into view after the footer, which is the shutter effect wanted. ---------- */
/* ---------- shutter reveal — the word mark sits fixed at the bottom of
   the viewport, permanently behind the page. #scrollArea is opaque and
   covers it at every normal scroll position, so it's invisible during
   reading. The site ends at Privacy · Terms; pushing past that end lifts
   the page off the panel like a shutter and exposes what was underneath. ---------- */


/* the gap after the footer — must punch through #scrollContent's
   background so the fixed panel behind shows through it. Its height
   sets how much reveal you get; matched to the panel's own height. */
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(30px,5vw,70px);padding-bottom:54px}
@media(max-width:760px){.fcols{grid-template-columns:1fr 1fr}.fcols>div:first-child{grid-column:1/-1}}
/* below ~520px the two side-by-side columns squeeze the email address
   past the screen edge — give each column the full width instead */
@media(max-width:520px){.fcols{grid-template-columns:1fr;gap:34px}}
.flogo{width:clamp(150px,20vw,200px);margin-bottom:28px}
.fcols h3{font-size:clamp(1.4rem,3vw,2.1rem);max-width:15ch}
.fcols ul{list-style:none;display:grid;gap:11px}
.fcols li a{color:var(--muted);transition:color .25s}
.fcols li a:hover{color:var(--yellow)}
.fcols .lbl{color:var(--faint);margin-bottom:20px;display:block}
.fcols .reach-icons li:hover .reach-icon{color:var(--yellow);border-color:var(--yellow)}
.fcols .reach-icons li:hover .reach-num{color:var(--yellow)}
.fbot{border-top:1px solid var(--rule);padding-top:24px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;color:var(--faint)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* Hero / page-header content reveals on load, not on scroll-into-view.
   It's above the fold by definition — gating it behind an
   IntersectionObserver risks exactly the bug it had: an element
   sitting a few px below the fold-detection margin stays invisible
   until the visitor scrolls, even though they never had to. */
.rv-hero{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv-hero.in{opacity:1;transform:none}

.rv.d1,.rv-hero.d1{transition-delay:.09s}
.rv.d2,.rv-hero.d2{transition-delay:.18s}
.rv.d3,.rv-hero.d3{transition-delay:.27s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  body{opacity:1;transform:none}
  .cur,.cur-ring{display:none}
}