/* ============================================================
   4PM — Digital Agency (4pm.agency)
   Golden-hour minimalism. Brand · Product · Software.
   ============================================================ */

/* ----------------------------------------------------------------
   0. RESET
---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px}

/* Hide native scrollbar (custom narrative bar replaces it) */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0;display:none}

/* ----------------------------------------------------------------
   1. TOKENS
---------------------------------------------------------------- */
:root{
  /* palette — warm near-black to golden-hour amber */
  --bg:        #0a0807;
  --bg-2:      #100c09;
  --bg-3:      #16110c;
  --ink:       #ece4d6;
  --ink-soft:  #b3a892;
  --ink-mute:  #756a59;
  --ink-faint: #3a342c;
  --line:      rgba(236,228,214,0.13);
  --line-soft: rgba(236,228,214,0.07);
  --gold:      #d8a25c;
  --gold-lit:  #ecc488;
  --gold-deep: #a8743a;
  --rose:      #c8856b;

  --glow-warm: rgba(216,162,92,0.20);

  /* type */
  --display: 'Clash Display','Satoshi',ui-sans-serif,system-ui,sans-serif;
  --body:    'Satoshi',ui-sans-serif,system-ui,-apple-system,sans-serif;

  /* spacing rhythm */
  --gutter: clamp(20px, 5vw, 96px);
  --section-y: clamp(120px, 18vh, 260px);

  --ease: cubic-bezier(0.22,1,0.36,1);
}

/* ----------------------------------------------------------------
   2. BASE
---------------------------------------------------------------- */
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  font-weight:400;
  letter-spacing:0.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv01";
  cursor:none;
}
body.is-loading{overflow:hidden;height:100vh}

/* On devices without a fine pointer, restore the system cursor */
@media (hover:none),(pointer:coarse){
  body{cursor:auto}
  .cursor{display:none!important}
}

/* ----------------------------------------------------------------
   3. TYPOGRAPHIC UTILITIES
---------------------------------------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:0.7em;
  font-size:clamp(0.66rem,0.9vw,0.78rem);
  text-transform:uppercase;letter-spacing:0.26em;font-weight:500;
  color:var(--ink-mute);
}
.kicker__num{
  color:var(--gold);font-family:var(--display);font-weight:500;
  letter-spacing:0.1em;
}
.kicker--center{justify-content:center}

/* word-mask reveal */
.word{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:0.12em;margin-bottom:-0.12em}
.word__inner{display:inline-block;will-change:transform}

/* ----------------------------------------------------------------
   4. ATMOSPHERE — grain + vignette
---------------------------------------------------------------- */
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='1.0'%20numOctaves='2'%20stitchTiles='stitch'%20seed='4'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.34%200%200%200%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");background-size:180px 180px;background-repeat:repeat;opacity:1;mix-blend-mode:normal}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='360'%3E%3Ccircle%20cx='59.4'%20cy='248.3'%20r='0.81'%20fill='rgba(6,5,4,0.25)'/%3E%3Ccircle%20cx='290.8'%20cy='184.5'%20r='0.7'%20fill='rgba(6,5,4,0.2)'/%3E%3Cellipse%20cx='210.7'%20cy='24.9'%20rx='0.94'%20ry='2.44'%20fill='rgba(6,5,4,0.26)'%20transform='rotate(133%20210.7%2024.9)'/%3E%3Cellipse%20cx='315.0'%20cy='221.7'%20rx='0.33'%20ry='0.84'%20fill='rgba(6,5,4,0.32)'%20transform='rotate(66%20315.0%20221.7)'/%3E%3Ccircle%20cx='55.7'%20cy='294.3'%20r='0.4'%20fill='rgba(6,5,4,0.31)'/%3E%3Ccircle%20cx='123.5'%20cy='174.5'%20r='1.91'%20fill='rgba(6,5,4,0.26)'/%3E%3Ccircle%20cx='75.1'%20cy='348.8'%20r='1.02'%20fill='rgba(6,5,4,0.39)'/%3E%3Ccircle%20cx='262.7'%20cy='44.1'%20r='0.68'%20fill='rgba(6,5,4,0.25)'/%3E%3Ccircle%20cx='319.5'%20cy='147.5'%20r='0.59'%20fill='rgba(6,5,4,0.3)'/%3E%3Ccircle%20cx='139.2'%20cy='9.7'%20r='0.37'%20fill='rgba(6,5,4,0.45)'/%3E%3Ccircle%20cx='177.0'%20cy='198.2'%20r='0.9'%20fill='rgba(6,5,4,0.35)'/%3E%3Ccircle%20cx='224.1'%20cy='65.0'%20r='0.44'%20fill='rgba(6,5,4,0.43)'/%3E%3Ccircle%20cx='215.0'%20cy='110.4'%20r='1.87'%20fill='rgba(6,5,4,0.39)'/%3E%3Ccircle%20cx='246.0'%20cy='243.3'%20r='1.02'%20fill='rgba(6,5,4,0.3)'/%3E%3Ccircle%20cx='346.1'%20cy='212.6'%20r='1.01'%20fill='rgba(6,5,4,0.29)'/%3E%3Ccircle%20cx='315.4'%20cy='58.4'%20r='0.36'%20fill='rgba(6,5,4,0.39)'/%3E%3Ccircle%20cx='301.3'%20cy='18.8'%20r='0.51'%20fill='rgba(6,5,4,0.3)'/%3E%3Ccircle%20cx='25.0'%20cy='121.7'%20r='1.02'%20fill='rgba(6,5,4,0.39)'/%3E%3Ccircle%20cx='90.8'%20cy='345.2'%20r='0.72'%20fill='rgba(6,5,4,0.21)'/%3E%3Ccircle%20cx='301.8'%20cy='286.3'%20r='1.01'%20fill='rgba(6,5,4,0.31)'/%3E%3Cellipse%20cx='305.8'%20cy='110.9'%20rx='0.73'%20ry='1.67'%20fill='rgba(6,5,4,0.39)'%20transform='rotate(172%20305.8%20110.9)'/%3E%3Ccircle%20cx='8.5'%20cy='213.7'%20r='0.82'%20fill='rgba(6,5,4,0.35)'/%3E%3Cellipse%20cx='146.0'%20cy='345.1'%20rx='1.02'%20ry='1.66'%20fill='rgba(6,5,4,0.22)'%20transform='rotate(80%20146.0%20345.1)'/%3E%3Ccircle%20cx='50.7'%20cy='312.2'%20r='0.82'%20fill='rgba(6,5,4,0.33)'/%3E%3Ccircle%20cx='177.8'%20cy='79.1'%20r='0.43'%20fill='rgba(6,5,4,0.29)'/%3E%3Ccircle%20cx='198.0'%20cy='16.6'%20r='0.87'%20fill='rgba(6,5,4,0.39)'/%3E%3Ccircle%20cx='2.8'%20cy='167.0'%20r='0.35'%20fill='rgba(6,5,4,0.24)'/%3E%3Ccircle%20cx='91.0'%20cy='250.8'%20r='1.57'%20fill='rgba(6,5,4,0.28)'/%3E%3Ccircle%20cx='106.2'%20cy='181.1'%20r='0.74'%20fill='rgba(6,5,4,0.22)'/%3E%3Ccircle%20cx='183.0'%20cy='264.4'%20r='1.07'%20fill='rgba(6,5,4,0.37)'/%3E%3Ccircle%20cx='201.8'%20cy='22.9'%20r='0.95'%20fill='rgba(6,5,4,0.29)'/%3E%3Ccircle%20cx='357.6'%20cy='38.7'%20r='1.87'%20fill='rgba(6,5,4,0.39)'/%3E%3Ccircle%20cx='223.7'%20cy='7.1'%20r='0.82'%20fill='rgba(6,5,4,0.33)'/%3E%3Ccircle%20cx='144.5'%20cy='81.2'%20r='0.34'%20fill='rgba(6,5,4,0.26)'/%3E%3Ccircle%20cx='294.2'%20cy='260.6'%20r='0.66'%20fill='rgba(6,5,4,0.3)'/%3E%3Ccircle%20cx='227.5'%20cy='346.7'%20r='0.37'%20fill='rgba(6,5,4,0.32)'/%3E%3Ccircle%20cx='320.6'%20cy='280.6'%20r='0.8'%20fill='rgba(6,5,4,0.37)'/%3E%3Ccircle%20cx='251.6'%20cy='245.9'%20r='0.5'%20fill='rgba(6,5,4,0.3)'/%3E%3Ccircle%20cx='296.9'%20cy='346.9'%20r='1.52'%20fill='rgba(6,5,4,0.28)'/%3E%3Ccircle%20cx='52.4'%20cy='199.2'%20r='0.36'%20fill='rgba(6,5,4,0.44)'/%3E%3C/svg%3E");background-size:360px 360px;background-repeat:repeat}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}
  100%{transform:translate(3%,2%)}
}
.vignette{
  position:fixed;inset:0;z-index:8000;pointer-events:none;
  background:radial-gradient(130% 120% at 50% 42%,transparent 52%,rgba(0,0,0,0.55) 100%);
}

/* ----------------------------------------------------------------
   5. CUSTOM CURSOR
---------------------------------------------------------------- */
.cursor{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  mix-blend-mode:difference}
.cursor__dot{
  position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);
}
.cursor__ring{
  position:fixed;top:0;left:0;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.65);
  transform:translate(-50%,-50%) scale(1);
  display:grid;place-items:center;
  transition:width .45s var(--ease),height .45s var(--ease),
             border-color .4s var(--ease),background-color .4s var(--ease);
}
.cursor__label{
  font-family:var(--body);font-size:0.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.18em;color:#000;
  opacity:0;transform:scale(0.6);transition:opacity .3s,transform .3s;
  white-space:nowrap;
}
/* states (toggled via body data-attr) */
body[data-cursor-state="link"] .cursor__ring{width:64px;height:64px;
  background:rgba(255,255,255,0.92);border-color:transparent}
body[data-cursor-state="scroll"] .cursor__ring{width:78px;height:78px}
body[data-cursor-state="enter"] .cursor__ring{width:104px;height:104px;
  background:rgba(255,255,255,0.95);border-color:transparent}
/* project "View" cursor — a golden disc shown in true colour */
body[data-cursor-state="view"] .cursor{mix-blend-mode:normal}
body[data-cursor-state="view"] .cursor__ring{width:110px;height:110px;
  background:var(--gold);border-color:transparent;
  box-shadow:0 0 0 1px rgba(236,196,136,0.45),0 16px 54px rgba(216,162,92,0.32)}
body[data-cursor-state="view"] .cursor__label{color:#1a1206}
body[data-cursor-state="enter"] .cursor__label,
body[data-cursor-state="scroll"] .cursor__label,
body[data-cursor-state="view"] .cursor__label{opacity:1;transform:scale(1)}
body[data-cursor-state="enter"] .cursor__dot,
body[data-cursor-state="view"] .cursor__dot,
body[data-cursor-state="link"] .cursor__dot{opacity:0}
.cursor.is-hidden{opacity:0}

/* ----------------------------------------------------------------
   6. LOADER
---------------------------------------------------------------- */
.loader{
  position:fixed;inset:0;z-index:9800;background:var(--bg);
  display:grid;place-items:center;
}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(22px,4vh,40px);
  width:min(86vw,520px);text-align:center}
.loader__mark{
  font-family:var(--display);font-weight:600;font-size:0.95rem;
  letter-spacing:0.42em;color:var(--ink-mute);padding-left:0.42em;
}
.loader__clock{display:flex;align-items:flex-start;gap:0.4em;color:var(--ink)}
.loader__time{font-family:var(--display);font-weight:600;
  font-size:clamp(3.4rem,11vw,6.5rem);line-height:0.9;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums}
.loader__ampm{font-family:var(--display);font-weight:500;
  font-size:clamp(0.9rem,2.4vw,1.3rem);letter-spacing:0.1em;
  color:var(--gold);transform:translateY(0.5em)}
.loader__bar{width:100%;max-width:340px;height:1px;background:var(--line);position:relative;overflow:hidden}
.loader__fill{position:absolute;inset:0;width:0;background:var(--gold);
  box-shadow:0 0 14px var(--glow-warm)}
.loader__caption{font-size:0.66rem;text-transform:uppercase;letter-spacing:0.3em;
  color:var(--ink-mute)}

/* ----------------------------------------------------------------
   7. NARRATIVE SCROLLBAR
---------------------------------------------------------------- */
.progress{
  position:fixed;right:clamp(16px,2.4vw,42px);top:50%;
  transform:translateY(-50%);z-index:600;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  mix-blend-mode:normal;
}
.progress__dest,.progress__now{
  font-family:var(--display);font-size:0.72rem;font-weight:500;
  letter-spacing:0.08em;font-variant-numeric:tabular-nums;
  writing-mode:vertical-rl;text-orientation:mixed;
}
.progress__dest{color:var(--ink-mute)}
.progress__dest small{font-size:0.62em;letter-spacing:0.1em;color:var(--gold)}
.progress__now{color:var(--gold-lit)}
.progress__track{position:relative;width:1px;
  height:clamp(150px,30vh,280px);background:var(--line)}
.progress__fill{position:absolute;top:0;left:0;width:100%;height:0%;
  background:linear-gradient(to bottom,var(--gold-lit),var(--gold-deep))}
.progress__head{position:absolute;top:0;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--gold-lit);transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px rgba(216,162,92,0.16),0 0 14px var(--glow-warm)}

/* ----------------------------------------------------------------
   8. NAV
---------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:700;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(26px,3.6vh,48px) var(--gutter) clamp(16px,2vh,22px);
  mix-blend-mode:difference;
}
.nav__brand-mark{font-family:var(--display);font-weight:600;font-size:1.15rem;
  letter-spacing:0.04em;color:#fff;display:inline-block}
.nav__links{display:none}
.nav__link{font-size:0.8rem;font-weight:500;letter-spacing:0.04em;color:#fff;
  position:relative;opacity:0.78;transition:opacity .4s var(--ease)}
.nav__link::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;
  background:#fff;transition:width .45s var(--ease)}
.nav__link:hover{opacity:1}
.nav__link:hover::after{width:100%}
.nav__cta{border:1px solid rgba(255,255,255,0.45);border-radius:100px;
  padding:0.6em 1.3em;font-size:0.78rem;font-weight:500;color:#fff;
  transition:background-color .4s var(--ease),color .4s var(--ease)}
.nav__cta:hover{background:#fff;color:#000}
.nav.is-hidden{transform:translateY(-130%);transition:transform .6s var(--ease)}
.nav{transition:transform .6s var(--ease)}

@media (max-width:860px){
  .nav__links{display:none}
}

/* ----------------------------------------------------------------
   9. HERO
---------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(132px,17vh,210px) var(--gutter) clamp(28px,4vh,48px);
  overflow:hidden}
.hero__sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__sun{
  position:absolute;left:50%;top:74%;width:120vw;height:120vw;max-width:1500px;max-height:1500px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at center,
     rgba(236,196,136,0.30) 0%,
     rgba(216,162,92,0.16) 22%,
     rgba(168,116,58,0.07) 38%,
     transparent 62%);
  filter:blur(10px);
}
.hero__eyebrow,.hero__stage,.hero__lede,.hero__foot{position:relative;z-index:2}

.hero__eyebrow{display:inline-flex;align-items:center;gap:0.8em;align-self:flex-start;
  font-size:0.74rem;text-transform:uppercase;letter-spacing:0.24em;font-weight:500;color:var(--ink-soft)}
.hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px var(--glow-warm);animation:breathe 4s var(--ease) infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

.hero__stage{flex:1;display:grid;place-items:center}
.hero__clock{display:flex;align-items:flex-start;gap:clamp(8px,1.4vw,22px);
  will-change:transform}
.hero__time{font-family:var(--display);font-weight:700;
  font-size:clamp(4.4rem,27vw,30rem);line-height:0.8;letter-spacing:-0.045em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.hero__ampm{font-family:var(--display);font-weight:500;
  font-size:clamp(1.3rem,4.4vw,4.6rem);letter-spacing:0.02em;
  color:var(--gold);transform:translateY(0.55em)}

.hero__lede{text-align:center;max-width:30ch;margin:0 auto;
  font-size:clamp(1rem,1.7vw,1.45rem);line-height:1.45;color:var(--ink-soft);
  font-weight:400;margin-top:clamp(20px,3vh,40px)}

.hero__foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px}
.hero__meta{display:flex;flex-direction:column;gap:4px;font-size:0.7rem;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute)}
.hero__meta--right{text-align:right}
.hero__cue{display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__cue-text{font-size:0.7rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ink-soft)}
.hero__cue-line{width:1px;height:54px;background:linear-gradient(var(--gold),transparent);
  position:relative;overflow:hidden}
.hero__cue-line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;
  background:linear-gradient(var(--gold-lit),transparent);animation:cueDrop 2.2s var(--ease) infinite}
@keyframes cueDrop{0%{top:-60%}60%,100%{top:120%}}

@media (max-width:680px){
  .hero__foot{grid-template-columns:1fr;justify-items:center;gap:26px;text-align:center}
  .hero__meta,.hero__meta--right{text-align:center;align-items:center}
}

/* ----------------------------------------------------------------
   10. INTRO STATEMENT
---------------------------------------------------------------- */
.intro{padding:var(--section-y) var(--gutter);max-width:1500px;margin:0 auto}
.intro .kicker{margin-bottom:clamp(40px,7vh,90px)}
.intro__text{max-width:22ch;font-family:var(--display);font-weight:500;
  font-size:clamp(2rem,6vw,5.6rem);line-height:1.04;letter-spacing:-0.025em}
.intro__text .split-words{display:block;margin-bottom:0.14em}
.intro__soft{color:var(--ink-mute)}

/* ----------------------------------------------------------------
   11. TRANSFORMATION ENGINE
---------------------------------------------------------------- */
.transform{position:relative}
.transform__pin{height:100svh;display:grid;place-items:center;position:relative;overflow:hidden}
.transform__kicker{position:absolute;top:clamp(90px,13vh,140px);left:50%;transform:translateX(-50%);
  font-size:0.72rem;text-transform:uppercase;letter-spacing:0.28em;color:var(--ink-mute);white-space:nowrap}
.transform__becomes{position:absolute;bottom:clamp(90px,13vh,140px);left:50%;transform:translateX(-50%);
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(0.9rem,1.6vw,1.3rem);letter-spacing:0.04em;color:var(--gold);opacity:0}
.transform__stage{position:relative;width:100%;height:46vh;display:grid;place-items:center}
.word-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(14px,2.4vh,30px);will-change:transform,opacity,filter}
.word-slide__num{font-family:var(--display);font-weight:500;font-size:0.85rem;
  letter-spacing:0.34em;color:var(--gold)}
.word-slide__word{font-family:var(--display);font-weight:600;
  font-size:clamp(3.4rem,15vw,17rem);line-height:0.86;letter-spacing:-0.035em;
  color:var(--ink);text-align:center}
.word-slide__cap{font-size:clamp(0.78rem,1.4vw,1.05rem);letter-spacing:0.04em;
  color:var(--ink-soft);max-width:30ch;text-align:center}

/* ----------------------------------------------------------------
   12. CAPABILITIES
---------------------------------------------------------------- */
.caps{padding:var(--section-y) 0}
.caps__intro{padding:0 var(--gutter);max-width:1500px;margin:0 auto clamp(60px,12vh,160px)}
.caps__intro .kicker{margin-bottom:clamp(28px,5vh,60px)}
.caps__lead{max-width:18ch;font-family:var(--display);font-weight:500;
  font-size:clamp(1.6rem,4.4vw,4.2rem);line-height:1.06;letter-spacing:-0.022em;color:var(--ink-soft)}

.cap{position:relative;max-width:1500px;margin:0 auto;
  padding:clamp(70px,14vh,170px) var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,6vw,90px)}
.cap--right{direction:rtl}
.cap--right > *{direction:ltr}
.cap__index{position:absolute;top:clamp(20px,4vh,60px);font-family:var(--display);font-weight:600;
  font-size:clamp(7rem,20vw,20rem);line-height:0.8;color:var(--ink-faint);z-index:0;pointer-events:none;
  letter-spacing:-0.04em}
.cap--left .cap__index{left:var(--gutter)}
.cap--right .cap__index{right:var(--gutter)}
.cap__text{position:relative;z-index:2}
.cap__field{display:inline-block;font-size:0.74rem;text-transform:uppercase;letter-spacing:0.24em;
  font-weight:500;color:var(--gold);margin-bottom:clamp(16px,2.4vh,26px)}
.cap__title{font-family:var(--display);font-weight:600;
  font-size:clamp(2.6rem,7.4vw,7rem);line-height:0.96;letter-spacing:-0.03em;
  color:var(--ink);margin-bottom:clamp(20px,3vh,34px)}
.cap__body{max-width:42ch;font-size:clamp(0.98rem,1.25vw,1.2rem);line-height:1.6;color:var(--ink-soft)}

.cap__visual{position:relative;z-index:1;display:grid;place-items:center;
  aspect-ratio:1/1;max-height:60vh}
.cap__art{width:min(78%,440px);height:auto;overflow:visible}
.cap__art [stroke],.cap__art circle,.cap__art rect,.cap__art polygon,
.cap__art line,.cap__art path{fill:none;stroke:var(--line);stroke-width:1.2}
.cap__art .art-accent{stroke:var(--gold)}
.cap__art .art-paper{fill:rgba(236,228,214,0.04);stroke:var(--line)}
.cap__art .art-screen{fill:rgba(216,162,92,0.05);stroke:var(--gold)}
.cap__art .art-grid circle{fill:var(--ink-faint);stroke:none}
.cap__art .art-grid circle.lit{fill:var(--gold)}

/* art motion */
.art-brand{animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.art-pulse{transform-origin:center;animation:pulse 3.4s var(--ease) infinite}
@keyframes pulse{0%,100%{r:16;opacity:1}50%{r:22;opacity:.7}}
.art-float-a{animation:floaty 5s var(--ease) infinite}
.art-float-b{animation:floaty 5s var(--ease) infinite .4s}
.art-float-c{animation:floaty 5s var(--ease) infinite .8s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.art-web polygon{transition:transform .5s var(--ease)}
.cap:hover .art-web polygon:nth-child(1){transform:translateY(-8px)}
.cap:hover .art-web polygon:nth-child(3){transform:translateY(8px)}
.art-screen{animation:floaty 6s var(--ease) infinite}

@media (max-width:820px){
  .cap{grid-template-columns:1fr;gap:30px;padding:clamp(60px,10vh,110px) var(--gutter)}
  .cap--right{direction:ltr}
  .cap__visual{order:-1;max-height:42vh}
  .cap__index{font-size:clamp(6rem,30vw,11rem);opacity:.7}
  .cap--left .cap__index,.cap--right .cap__index{left:var(--gutter);right:auto}
}

/* ----------------------------------------------------------------
   13. SELECTED WORK
---------------------------------------------------------------- */
.work{padding:var(--section-y) 0}
.work__intro{padding:0 var(--gutter);max-width:1500px;margin:0 auto clamp(50px,9vh,120px)}
.work__intro .kicker{margin-bottom:clamp(24px,4vh,46px)}
.work__lead{max-width:16ch;font-family:var(--display);font-weight:500;
  font-size:clamp(1.8rem,5vw,4.6rem);line-height:1.04;letter-spacing:-0.024em}

.case{position:relative;max-width:1500px;margin:0 auto;padding:clamp(40px,7vh,90px) var(--gutter);
  display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.case__link{position:absolute;inset:0;z-index:6;border-radius:4px;display:block}
.case--b,.case--d{grid-template-columns:1fr 1.25fr}
.case--b .case__media,.case--d .case__media{order:2}

.case__media{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/3}
.case__cover{position:absolute;inset:-12% 0;width:100%;height:124%;will-change:transform}
.case__cover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 20%,transparent,rgba(10,8,7,0.5))}
.case__year{position:absolute;top:18px;right:20px;z-index:3;font-family:var(--display);
  font-weight:500;font-size:0.78rem;letter-spacing:0.1em;color:rgba(255,255,255,0.85);
  mix-blend-mode:difference}

.case__info{position:relative}
.case__num{display:block;font-family:var(--display);font-weight:500;font-size:0.78rem;
  letter-spacing:0.22em;color:var(--gold);margin-bottom:clamp(16px,2.4vh,24px)}
.case__name{font-family:var(--display);font-weight:600;
  font-size:clamp(2.6rem,6.6vw,6rem);line-height:0.94;letter-spacing:-0.03em;
  margin-bottom:clamp(16px,2.4vh,26px)}
.case__concept{max-width:40ch;font-size:clamp(0.96rem,1.2vw,1.16rem);line-height:1.62;
  color:var(--ink-soft);margin-bottom:clamp(22px,3vh,34px)}
.case__tags{display:flex;flex-wrap:wrap;gap:10px}
.case__tags li{font-size:0.72rem;letter-spacing:0.08em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:100px;padding:0.45em 1em}

/* generated golden-hour covers */
.cover-a{background:linear-gradient(155deg,rgba(168,116,58,0.30),rgba(10,8,7,0.76)),url("../images/terra.jpg") center/cover no-repeat;background-color:#0d0a08}
.cover-b{background:linear-gradient(150deg,rgba(200,133,107,0.28),rgba(10,8,7,0.76)),url("../images/roam.jpg") center/cover no-repeat;background-color:#0d0a08}
.cover-c{background:linear-gradient(150deg,rgba(120,150,150,0.24),rgba(10,8,7,0.78)),url("../images/kofa.jpg") center/cover no-repeat;background-color:#0d0a08}
.cover-d{background:linear-gradient(155deg,rgba(236,196,136,0.24),rgba(10,8,7,0.78)),url("../images/gometro.jpg") center/cover no-repeat;background-color:#0d0a08}

@media (max-width:820px){
  .case,.case--b,.case--d{grid-template-columns:1fr;gap:26px}
  .case--b .case__media,.case--d .case__media{order:0}
}

/* ----------------------------------------------------------------
   14. MANIFESTO
---------------------------------------------------------------- */
.manifesto{position:relative;padding:clamp(160px,26vh,360px) var(--gutter);
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.manifesto__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120vw;height:80vh;
  background:radial-gradient(circle at center,rgba(216,162,92,0.16),rgba(168,116,58,0.05) 40%,transparent 68%);
  filter:blur(20px);z-index:0;pointer-events:none}
.manifesto .kicker{position:relative;z-index:2;margin-bottom:clamp(40px,7vh,90px)}
.manifesto__body{position:relative;z-index:2;max-width:24ch}
.manifesto__line{font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,5vw,4.6rem);line-height:1.12;letter-spacing:-0.022em;
  color:var(--ink);margin-bottom:0.18em}
.manifesto__line--gold{color:var(--gold-lit)}

/* ----------------------------------------------------------------
   15. OUTRO / FOOTER
---------------------------------------------------------------- */
.outro{position:relative;padding:clamp(120px,18vh,220px) var(--gutter) clamp(40px,6vh,70px);
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;
  min-height:100svh;justify-content:center}
.outro__sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.outro__sun{position:absolute;left:50%;bottom:-30%;width:130vw;height:130vw;max-width:1500px;max-height:1500px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at center,rgba(236,196,136,0.26),rgba(216,162,92,0.12) 28%,transparent 60%);
  filter:blur(14px)}
.outro>*{position:relative;z-index:2}
.outro__eyebrow{font-size:0.74rem;text-transform:uppercase;letter-spacing:0.28em;color:var(--ink-soft);
  margin-bottom:clamp(20px,3vh,34px)}
.outro__clock{display:flex;align-items:flex-start;gap:0.4em;justify-content:center}
.outro__time{font-family:var(--display);font-weight:700;
  font-size:clamp(5rem,20vw,20rem);line-height:0.82;letter-spacing:-0.045em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.outro__ampm{font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,3.4vw,3.4rem);
  color:var(--gold);transform:translateY(0.5em)}
.outro__lede{font-size:clamp(1rem,1.8vw,1.5rem);color:var(--ink-soft);
  margin:clamp(24px,4vh,46px) 0 clamp(34px,5vh,56px);max-width:28ch}
.outro__cta{display:inline-flex;align-items:center;gap:0.8em;
  border:1px solid var(--line);border-radius:100px;padding:0.95em 1.8em;
  font-family:var(--display);font-weight:500;font-size:clamp(0.95rem,1.4vw,1.2rem);
  color:var(--ink);transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.outro__cta-arrow{font-size:1.1em;transition:transform .5s var(--ease)}
.outro__cta:hover{background:var(--gold);border-color:var(--gold);color:#1a1107}
.outro__cta:hover .outro__cta-arrow{transform:translate(3px,-3px)}

.footer{width:100%;max-width:1500px;margin-top:clamp(90px,16vh,200px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--line);text-align:left}
.footer__col{display:flex;flex-direction:column;gap:8px;font-size:0.86rem;color:var(--ink-soft)}
.footer__col--mid{align-items:center;text-align:center}
.footer__col--end{align-items:flex-end;text-align:right}
.footer__k{font-size:0.66rem;text-transform:uppercase;letter-spacing:0.24em;color:var(--ink-mute);margin-bottom:6px}
.footer__col a{transition:color .3s var(--ease)}
.footer__col a:hover{color:var(--gold-lit)}
.footer__copy{color:var(--ink-mute)}

@media (max-width:680px){
  .footer{grid-template-columns:1fr;gap:30px;text-align:left}
  .footer__col--mid,.footer__col--end{align-items:flex-start;text-align:left}
}

/* ----------------------------------------------------------------
   16. REDUCED MOTION
---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;
    transition-duration:0.001ms!important}
  .grain{animation:none}
  body{cursor:auto}
  .cursor{display:none}
}

/* ================================================================
   17. CLIENTS — quiet marquee
================================================================ */
.clients{padding:clamp(46px,7vh,92px) 0 clamp(54px,9vh,116px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.clients__rail{display:flex;width:max-content;animation:marquee 46s linear infinite}
.clients__rail:hover{animation-play-state:paused}
.clients__track{display:flex;gap:clamp(40px,6vw,92px);padding-right:clamp(40px,6vw,92px);flex-shrink:0}
.clients__track span{font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.7rem);letter-spacing:-0.012em;color:var(--ink-faint);
  white-space:nowrap;transition:color .5s var(--ease)}
.clients__track span:hover{color:var(--ink-soft)}
@keyframes marquee{to{transform:translateX(-50%)}}
.clients__label{display:block;text-align:center;margin-top:clamp(38px,6vh,72px);
  font-size:0.72rem;text-transform:uppercase;letter-spacing:0.24em;color:var(--ink-mute)}

/* ================================================================
   18. METHOD — four moves
================================================================ */
.method{padding:var(--section-y) var(--gutter);max-width:1500px;margin:0 auto}
.method__intro{margin-bottom:clamp(46px,8vh,110px)}
.method__intro .kicker{margin-bottom:clamp(24px,4vh,46px)}
.method__lead{max-width:20ch;font-family:var(--display);font-weight:500;
  font-size:clamp(1.8rem,4.8vw,4.2rem);line-height:1.06;letter-spacing:-0.024em;color:var(--ink-soft)}
.method__list{display:grid}
.method__step{display:grid;grid-template-columns:clamp(96px,15vw,210px) 1fr;gap:clamp(20px,5vw,72px);
  align-items:baseline;padding:clamp(32px,5vh,60px) 0;border-top:1px solid var(--line)}
.method__step:last-child{border-bottom:1px solid var(--line)}
.method__time{font-family:var(--display);font-weight:600;
  font-size:clamp(2.8rem,8.5vw,7.5rem);line-height:0.78;letter-spacing:-0.04em;color:var(--ink-faint);
  transition:color .55s var(--ease)}
.method__time::after{content:":00";font-size:0.3em;color:var(--gold);vertical-align:super;
  letter-spacing:0;margin-left:0.04em}
.method__step:hover .method__time{color:var(--ink-soft)}
.method__title{font-family:var(--display);font-weight:600;
  font-size:clamp(1.55rem,3vw,2.6rem);line-height:1;letter-spacing:-0.02em;
  margin-bottom:clamp(12px,1.6vh,18px)}
.method__body{max-width:54ch;font-size:clamp(0.98rem,1.2vw,1.18rem);line-height:1.62;color:var(--ink-soft)}

@media (max-width:680px){
  .method__step{grid-template-columns:1fr;gap:clamp(10px,2vh,16px);padding:clamp(28px,4vh,40px) 0}
  .method__time{font-size:clamp(3rem,18vw,5rem)}
}

/* ================================================================
   19. RECOGNITION · STATS · AWARDS
================================================================ */
.recognition{position:relative;padding:var(--section-y) var(--gutter);overflow:hidden}
.recognition__glow{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);
  width:100vw;height:62vh;
  background:radial-gradient(circle at center,rgba(216,162,92,0.13),transparent 64%);
  filter:blur(22px);z-index:0;pointer-events:none}
.recognition>*{position:relative;z-index:2}
.recognition__intro{max-width:1500px;margin:0 auto clamp(48px,8vh,104px);text-align:center}
.recognition__intro .kicker{margin-bottom:clamp(22px,4vh,40px)}
.recognition__lead{max-width:22ch;margin:0 auto;font-family:var(--display);font-weight:500;
  font-size:clamp(1.8rem,4.8vw,4rem);line-height:1.08;letter-spacing:-0.022em}

.stats{max-width:1500px;margin:0 auto clamp(58px,10vh,124px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3.5vw,56px)}
.stat{display:flex;flex-direction:column;gap:12px;text-align:center;
  padding:clamp(24px,3vh,38px) 0;border-top:1px solid var(--line)}
.stat__num{font-family:var(--display);font-weight:600;
  font-size:clamp(2.9rem,6.6vw,5.4rem);line-height:0.85;letter-spacing:-0.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;display:inline-flex;justify-content:center;align-items:flex-start}
.stat__plus{color:var(--gold);font-size:0.46em;transform:translateY(0.18em);font-weight:500}
.stat__label{font-size:0.73rem;text-transform:uppercase;letter-spacing:0.17em;color:var(--ink-mute)}

.awards{max-width:1500px;margin:0 auto;display:grid}
.award{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:clamp(14px,4vw,50px);
  padding:clamp(19px,3vh,30px) 0;border-top:1px solid var(--line);
  transition:padding-left .55s var(--ease)}
.award:last-child{border-bottom:1px solid var(--line)}
.award:hover{padding-left:clamp(8px,1.5vw,22px)}
.award__name{font-family:var(--display);font-weight:500;
  font-size:clamp(1.15rem,2.4vw,1.95rem);letter-spacing:-0.01em;color:var(--ink);
  transition:color .4s var(--ease)}
.award:hover .award__name{color:var(--gold-lit)}
.award__detail{font-size:clamp(0.82rem,1.1vw,1rem);color:var(--ink-soft);text-align:right}
.award__year{font-family:var(--display);font-weight:500;font-size:0.86rem;letter-spacing:0.05em;
  color:var(--gold);font-variant-numeric:tabular-nums;min-width:5.5ch;text-align:right}

@media (max-width:680px){
  .stats{grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,30px)}
  .award{grid-template-columns:1fr auto;gap:14px 18px}
  .award__detail{grid-column:1/-1;text-align:left;order:3;color:var(--ink-mute)}
}

/* ================================================================
   20. TESTIMONIAL
================================================================ */
.quote{position:relative;padding:clamp(116px,20vh,256px) var(--gutter);
  display:flex;justify-content:center;text-align:center;overflow:hidden}
.quote__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:92vw;height:60vh;
  background:radial-gradient(circle at center,rgba(200,133,107,0.11),transparent 64%);
  filter:blur(26px);z-index:0;pointer-events:none}
.quote__body{position:relative;z-index:2;max-width:26ch}
.quote__mark{font-family:var(--display);font-weight:600;font-size:clamp(4rem,10vw,8.5rem);
  line-height:0.55;color:var(--gold);display:block;margin-bottom:0.08em;opacity:0.82}
.quote__text{font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,4.2vw,3.5rem);line-height:1.2;letter-spacing:-0.02em;color:var(--ink);
  margin-bottom:clamp(28px,4vh,46px)}
.quote__cite{display:flex;flex-direction:column;gap:5px}
.quote__name{font-family:var(--display);font-weight:500;font-size:1.02rem;letter-spacing:0.01em;color:var(--ink)}
.quote__role{font-size:0.76rem;text-transform:uppercase;letter-spacing:0.16em;color:var(--ink-mute)}

/* ================================================================
   21. STUDIO — who we are
================================================================ */
.studio{padding:var(--section-y) var(--gutter);max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:1.08fr 0.92fr;gap:clamp(40px,8vw,120px);align-items:start}
.studio__lead .kicker{margin-bottom:clamp(28px,5vh,56px)}
.studio__statement{font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,3.3vw,2.75rem);line-height:1.2;letter-spacing:-0.02em;color:var(--ink);max-width:22ch}
.studio__statement em{font-style:italic;color:var(--gold-lit)}
.studio__facts{display:grid}
.fact{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,40px);align-items:baseline;
  padding:clamp(18px,2.6vh,28px) 0;border-top:1px solid var(--line)}
.fact:last-child{border-bottom:1px solid var(--line)}
.fact__k{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.2em;color:var(--ink-mute);min-width:7ch}
.fact__v{font-size:clamp(0.95rem,1.3vw,1.15rem);color:var(--ink-soft);text-align:right}
.fact__v strong{font-weight:500;color:var(--ink)}

@media (max-width:820px){
  .studio{grid-template-columns:1fr;gap:clamp(36px,7vh,60px)}
}

/* ================================================================
   22. MOBILE NAVIGATION (hamburger + full-screen menu)
================================================================ */
.nav{z-index:750}
.nav__toggle{display:flex;align-items:center;gap:10px;position:relative;z-index:6;
  background:none;border:0;cursor:none;padding:0}
.nav__toggle-label{font-family:var(--display);font-weight:500;font-size:0.8rem;
  letter-spacing:0.1em;text-transform:uppercase;color:#fff}
.nav__toggle-bars{position:relative;width:26px;height:11px;flex:0 0 auto}
.nav__toggle-bars span{position:absolute;left:0;width:100%;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .45s var(--ease),opacity .3s var(--ease)}
.nav__toggle-bars span:nth-child(1){top:1px}
.nav__toggle-bars span:nth-child(2){bottom:1px}
body.menu-open .nav__toggle-bars span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
body.menu-open .nav__toggle-bars span:nth-child(2){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}

.navmenu{position:fixed;inset:0;z-index:740;background:var(--bg-2);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--gutter) + 10px) var(--gutter) calc(var(--gutter) + 64px);
  opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease),opacity .5s var(--ease),visibility .5s}
body.menu-open .navmenu{opacity:1;visibility:visible;clip-path:inset(0 0 0% 0)}
.navmenu__glow{position:absolute;left:50%;bottom:-20%;width:120vw;height:80vh;transform:translateX(-50%);
  background:radial-gradient(circle at center,rgba(216,162,92,0.14),transparent 60%);
  filter:blur(18px);pointer-events:none}
.navmenu__list{position:relative;display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px)}
.navmenu__link{font-family:var(--display);font-weight:500;
  font-size:clamp(2.3rem,11vw,4.4rem);line-height:1.12;letter-spacing:-0.025em;color:var(--ink);
  display:flex;align-items:baseline;gap:0.45em;transition:color .4s var(--ease),padding-left .5s var(--ease)}
.navmenu__link .i{font-family:var(--display);font-size:0.26em;color:var(--gold);
  font-variant-numeric:tabular-nums;font-weight:500}
.navmenu__link:hover{color:var(--gold-lit);padding-left:0.15em}
.navmenu__foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:baseline;
  font-size:0.78rem;color:var(--ink-mute);border-top:1px solid var(--line);padding-top:22px}
.navmenu__foot a{color:var(--ink-soft);transition:color .3s var(--ease)}
.navmenu__foot a:hover{color:var(--gold-lit)}

body.menu-open{overflow:hidden}

@media (max-width:560px){
  .nav__cta{display:none}
}

/* ================================================================
   23. PROGRESS BAR — small-screen accommodation
================================================================ */
@media (max-width:760px){
  .progress{right:10px;gap:11px}
  .progress__dest,.progress__now{font-size:0.6rem}
  .progress__track{height:clamp(110px,22vh,170px)}
}
@media (max-width:560px){
  .progress__dest{display:none}
}

/* ================================================================
   24. REDUCED MOTION — neutralise new motion
================================================================ */
@media (prefers-reduced-motion:reduce){
  .clients__rail{animation:none}
  .navmenu{transition:opacity .2s,visibility .2s}
}

/* ================================================================
   25. ENTERPRISE ENHANCEMENTS
   (added: animated disciplines, mobile scrollbar, testimonials,
    impact strip, social links, IO reveals, 2 extra covers)
================================================================ */

/* --- IntersectionObserver generic reveal --------------------- */
.io-reveal{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.io-reveal.is-in{opacity:1;transform:none}
.io-reveal[data-io-delay="1"]{transition-delay:.08s}
.io-reveal[data-io-delay="2"]{transition-delay:.16s}
.io-reveal[data-io-delay="3"]{transition-delay:.24s}
.io-reveal[data-io-delay="4"]{transition-delay:.32s}
.io-reveal[data-io-delay="5"]{transition-delay:.40s}

/* --- Animated disciplines (no longer static) ----------------- */
@media (prefers-reduced-motion:no-preference){
  .art-flow{transform-origin:50% 50%;animation:spinSlow 80s linear infinite}
  @keyframes spinSlow{to{transform:rotate(360deg)}}
  .art-draw{stroke-dasharray:300;stroke-dashoffset:300;
    animation:drawLine 4.6s var(--ease) infinite}
  @keyframes drawLine{0%{stroke-dashoffset:300}40%{stroke-dashoffset:0}
    62%{stroke-dashoffset:0}100%{stroke-dashoffset:-300}}
  .art-grid circle.lit{animation:twinkle 3.4s ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:.22}50%{opacity:1}}
  .art-social line{stroke-dasharray:4 5;animation:dashFlow 9s linear infinite}
  @keyframes dashFlow{to{stroke-dashoffset:-90}}
  .art-social circle:not(.art-accent){animation:twinkle 4s ease-in-out infinite}
  .art-social circle:nth-of-type(2){animation-delay:.5s}
  .art-social circle:nth-of-type(3){animation-delay:1s}
  .art-social circle:nth-of-type(4){animation-delay:1.5s}
  .art-social circle:nth-of-type(5){animation-delay:2s}
  .art-web polygon{animation:webFloat 6.5s var(--ease) infinite}
  .art-web polygon:nth-child(2){animation-delay:.55s}
  .art-web polygon:nth-child(3){animation-delay:1.1s}
  @keyframes webFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .art-paper{animation:paperFloat 7s var(--ease) infinite}
  @keyframes paperFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,3px)}}
}
/* one-time emphasis when a discipline scrolls into view */
.cap.is-in .cap__art{animation:artPop .9s var(--ease) both}
@keyframes artPop{0%{opacity:.35;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}

/* --- Mobile / tablet scrollbar (horizontal, top) ------------- */
.hprogress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:760;
  background:rgba(236,228,214,0.08);display:none}
.hprogress__fill{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-lit));
  box-shadow:0 0 10px var(--glow-warm);transition:width .12s linear}
@media (max-width:1024px){
  .progress{display:none}
  .hprogress{display:block}
}

/* --- Two more golden-hour covers ----------------------------- */
.cover-e{background:linear-gradient(150deg,rgba(176,120,60,0.26),rgba(10,8,7,0.78)),url("../images/civihub.jpg") center/cover no-repeat;background-color:#0d0a08}
.cover-f{background:linear-gradient(150deg,rgba(216,162,92,0.26),rgba(10,8,7,0.78)),url("../images/edanra.jpg") center/cover no-repeat;background-color:#0d0a08}
.case--f{grid-template-columns:1fr 1.25fr}
.case--f .case__media{order:2}
@media (max-width:820px){
  .case--e,.case--f{grid-template-columns:1fr;gap:26px}
  .case--f .case__media{order:0}
}

/* --- Testimonials -------------------------------------------- */
.testi{padding:var(--section-y) var(--gutter);max-width:1500px;margin:0 auto}
.testi__intro{margin:0 auto clamp(44px,7vh,90px);text-align:center;max-width:32ch}
.testi__intro .kicker{margin-bottom:clamp(20px,4vh,38px)}
.testi__lead{font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,4vw,3.4rem);line-height:1.08;letter-spacing:-0.02em}
.tlist{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.tcard{position:relative;border:1px solid var(--line);border-radius:8px;
  padding:clamp(24px,2.6vw,38px);
  background:linear-gradient(180deg,rgba(236,228,214,0.022),transparent);
  display:flex;flex-direction:column;gap:20px;transition:border-color .4s var(--ease)}
.tcard:hover{border-color:rgba(216,162,92,0.4)}
.tcard__mark{font-family:var(--display);font-weight:600;color:var(--gold);
  font-size:2.2rem;line-height:0.2;height:0.5em}
.tcard__text{font-size:clamp(0.96rem,1.05vw,1.08rem);line-height:1.6;color:var(--ink-soft)}
.tcard__who{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.tcard__name{font-family:var(--display);font-weight:500;font-size:0.98rem;color:var(--ink)}
.tcard__role{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.13em;color:var(--ink-mute)}
@media (max-width:980px){.tlist{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.tlist{grid-template-columns:1fr}}

/* --- Impact / proof strip (replaces awards) ------------------ */
.proof{list-style:none;max-width:1100px;margin:0 auto;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.proof li{font-size:0.78rem;letter-spacing:0.05em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:100px;padding:0.55em 1.15em;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.proof li:hover{border-color:rgba(216,162,92,0.45);color:var(--gold-lit)}
.proof li strong{color:var(--gold-lit);font-weight:500}

/* --- Social links -------------------------------------------- */
.socials{display:flex;flex-wrap:wrap;gap:9px}
.social{display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:100px;padding:0.5em 0.95em;
  font-size:0.76rem;letter-spacing:0.02em;color:var(--ink-soft);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.social:hover{border-color:var(--gold);color:var(--gold-lit)}
.social svg{width:14px;height:14px;fill:currentColor;flex:0 0 auto}

/* --- Services-at-a-glance line under hero -------------------- */
.hero__services{display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 10px;margin-top:clamp(22px,3vh,34px);max-width:680px}
.hero__services span{font-size:0.72rem;letter-spacing:0.04em;color:var(--ink-mute);
  border:1px solid var(--line);border-radius:100px;padding:0.4em 0.9em;white-space:nowrap}

/* reduced-motion: silence the new ambient loops */
@media (prefers-reduced-motion:reduce){
  .io-reveal{opacity:1;transform:none;transition:none}
  .hprogress__fill{transition:none}
}

/* ================================================================
   26. AWARD-TIER PASS — texture, elevated testimonials, FAQ,
   cinematic contact + form, premium footer
================================================================ */

/* --- Vintage texture overlay (warm, grainy, Swiss-restrained) --- */
.texture{position:fixed;inset:0;z-index:7500;pointer-events:none;mix-blend-mode:soft-light;
  opacity:0.5;background:
    radial-gradient(120% 90% at 50% 0%,rgba(216,162,92,0.10),transparent 60%),
    radial-gradient(100% 100% at 100% 100%,rgba(168,116,58,0.08),transparent 55%),
    linear-gradient(0deg,rgba(10,8,7,0.35),transparent 30%)}
/* faint film edge-burn */
.texture::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 160px rgba(0,0,0,0.32)}

/* hairline section markers (Swiss structure) */
.intro,.caps,.method,.work,.recognition,.testi,.faq,.studio{position:relative}
.intro::before,.caps::before,.method::before,.work__intro::before,
.testi__intro::before,.faq__intro::before{content:"";position:absolute;left:var(--gutter);
  top:clamp(40px,7vh,90px);width:34px;height:1px;background:var(--gold);opacity:.6}

/* --- Elevated testimonials --------------------------------------- */
.tcard{gap:22px}
.tcard__top{display:flex;align-items:center;justify-content:space-between}
.tcard__no{font-family:var(--display);font-weight:500;font-size:0.74rem;letter-spacing:0.2em;color:var(--ink-faint)}
.tcard__text{font-family:var(--display);font-weight:400;font-style:normal;
  font-size:clamp(1.04rem,1.2vw,1.22rem);line-height:1.5;letter-spacing:-0.005em;color:var(--ink)}
.tcard__who{display:flex;align-items:center;gap:14px;margin-top:auto}
.tcard__avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:0.82rem;letter-spacing:0.02em;color:var(--bg);
  background:linear-gradient(150deg,var(--gold-lit),var(--gold-deep));
  box-shadow:0 0 0 1px rgba(216,162,92,0.3),0 6px 20px rgba(216,162,92,0.12)}
.tcard__meta{display:flex;flex-direction:column;gap:2px}

/* --- FAQ accordion (Swiss list, smooth grid-row reveal) ---------- */
.faq{padding:var(--section-y) var(--gutter);max-width:1240px;margin:0 auto}
.faq__intro{margin-bottom:clamp(40px,7vh,84px)}
.faq__intro .kicker{margin-bottom:clamp(20px,4vh,38px)}
.faq__lead{max-width:18ch;font-family:var(--display);font-weight:500;
  font-size:clamp(1.9rem,5vw,4rem);line-height:1.04;letter-spacing:-0.024em}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:none;border:0;cursor:none;text-align:left;color:var(--ink);
  padding:clamp(22px,3vh,34px) 0;font-family:var(--display);font-weight:500;
  font-size:clamp(1.12rem,2vw,1.7rem);line-height:1.2;letter-spacing:-0.01em;
  transition:color .35s var(--ease),padding-left .45s var(--ease)}
.faq__q:hover{color:var(--gold-lit);padding-left:0.3em}
.faq__icon{position:relative;flex:0 0 auto;width:18px;height:18px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--gold);
  transition:transform .45s var(--ease),opacity .3s var(--ease)}
.faq__icon::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.faq__icon::after{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.faq__item.is-open .faq__icon::after{transform:translateX(-50%) scaleY(0);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a-inner{overflow:hidden;min-height:0}
.faq__a-inner p{max-width:62ch;padding-bottom:clamp(22px,3vh,32px);
  font-size:clamp(0.98rem,1.1vw,1.12rem);line-height:1.66;color:var(--ink-soft)}

/* --- Cinematic contact + functional form ------------------------- */
.contact{position:relative;padding:var(--section-y) var(--gutter);overflow:hidden}
.contact__sky{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 120%,rgba(216,162,92,0.16),transparent 60%)}
.contact__sun{position:absolute;left:50%;bottom:-22%;width:min(60vw,520px);height:min(60vw,520px);
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(236,196,136,0.5),rgba(216,162,92,0.12) 45%,transparent 70%);
  filter:blur(8px);animation:breathe 9s var(--ease) infinite}
.contact__grid{position:relative;z-index:2;max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,110px);align-items:start}
.contact__lead .kicker{margin-bottom:clamp(22px,4vh,40px)}
.contact__title{font-family:var(--display);font-weight:600;
  font-size:clamp(3rem,8vw,7rem);line-height:0.92;letter-spacing:-0.035em;margin-bottom:clamp(18px,3vh,30px)}
.contact__sub{max-width:38ch;font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.6;color:var(--ink-soft)}
.contact__mark{display:flex;align-items:flex-start;gap:0.3em;margin:clamp(30px,5vh,56px) 0 clamp(26px,4vh,40px)}
.contact__time{font-family:var(--display);font-weight:600;font-size:clamp(3rem,8vw,6rem);line-height:0.8;
  letter-spacing:-0.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.contact__ampm{font-family:var(--display);font-weight:500;font-size:clamp(0.9rem,2vw,1.4rem);
  letter-spacing:0.1em;color:var(--gold);transform:translateY(0.4em)}
.contact__emails{list-style:none;display:grid;gap:2px;border-top:1px solid var(--line);max-width:440px}
.contact__emails li{display:grid;grid-template-columns:9rem 1fr;align-items:baseline;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.contact__emk{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.2em;color:var(--ink-mute)}
.contact__emails a{font-family:var(--display);font-size:clamp(0.95rem,1.2vw,1.12rem);color:var(--ink-soft);
  transition:color .3s var(--ease)}
.contact__emails a:hover{color:var(--gold-lit)}

.cform{position:relative;z-index:2;border:1px solid var(--line);border-radius:10px;
  padding:clamp(26px,3vw,44px);background:linear-gradient(180deg,rgba(236,228,214,0.025),rgba(10,8,7,0.2));
  backdrop-filter:blur(2px);display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px)}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.cfield{display:flex;flex-direction:column;gap:9px}
.cfield--full{width:100%}
.cfield label{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.18em;color:var(--ink-mute)}
.cfield__opt{text-transform:none;letter-spacing:0;color:var(--ink-faint)}
.cfield input,.cfield textarea,.cselect select{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--body);
  font-size:1rem;padding:10px 0;transition:border-color .35s var(--ease)}
.cfield textarea{resize:vertical;min-height:90px;line-height:1.5}
.cfield input:focus,.cfield textarea:focus,.cselect select:focus{outline:none;border-color:var(--gold)}
.cfield input::placeholder,.cfield textarea::placeholder{color:var(--ink-faint)}
.cselect{position:relative}
.cselect::after{content:"↓";position:absolute;right:2px;top:10px;color:var(--gold);pointer-events:none;font-size:0.9rem}
.cselect select{appearance:none;-webkit-appearance:none;cursor:none;border-radius:0}
.cselect select option{background:var(--bg-2);color:var(--ink)}
.cfield input.is-error,.cfield textarea.is-error{border-color:var(--rose)}
.cform__send{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--gold);border-radius:100px;background:transparent;cursor:none;
  padding:0.85em 1.7em;font-family:var(--display);font-weight:500;font-size:0.95rem;letter-spacing:0.02em;
  color:var(--gold-lit);transition:background-color .4s var(--ease),color .4s var(--ease),transform .3s var(--ease)}
.cform__send:hover{background:var(--gold);color:var(--bg)}
.cform__arrow{font-size:1.05em;transition:transform .4s var(--ease)}
.cform__send:hover .cform__arrow{transform:translate(3px,-3px)}
.cform.is-sent .cform__send{border-color:var(--line);color:var(--ink-mute);pointer-events:none}
.cform__note{font-size:0.82rem;color:var(--ink-mute)}
.cform__note strong{color:var(--ink-soft);font-weight:500}
.cform__note.is-ok{color:var(--gold-lit)}

@media (max-width:920px){
  .contact__grid{grid-template-columns:1fr;gap:clamp(40px,8vh,70px)}
}
@media (max-width:540px){
  .cform__row{grid-template-columns:1fr;gap:18px}
  .contact__emails li{grid-template-columns:1fr}
}

/* --- Premium footer ---------------------------------------------- */
.footer2{position:relative;padding:clamp(70px,11vh,150px) var(--gutter) clamp(30px,5vh,56px);
  border-top:1px solid var(--line);overflow:hidden}
.footer2__grid{position:relative;z-index:2;max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(26px,3vw,60px)}
.footer2__col{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.footer2__col a{font-size:0.9rem;color:var(--ink-soft);transition:color .3s var(--ease)}
.footer2__col a:hover{color:var(--gold-lit)}
.footer2__k{font-size:0.66rem;text-transform:uppercase;letter-spacing:0.22em;color:var(--ink-mute);margin-bottom:6px}
.footer2__brand{font-family:var(--display);font-weight:600;font-size:1.6rem;letter-spacing:0.04em;color:var(--ink)}
.footer2__tag{max-width:30ch;font-size:0.92rem;line-height:1.6;color:var(--ink-soft)}
.footer2__wordmark{position:relative;z-index:1;margin:clamp(40px,7vh,90px) auto 0;max-width:1500px;
  font-family:var(--display);font-weight:600;letter-spacing:-0.03em;line-height:0.8;
  font-size:clamp(5rem,26vw,22rem);text-align:left;
  color:transparent;-webkit-text-stroke:1px var(--line-soft);
  background:linear-gradient(180deg,rgba(236,228,214,0.06),transparent);-webkit-background-clip:text;background-clip:text;
  pointer-events:none;user-select:none}
.footer2__base{position:relative;z-index:2;max-width:1500px;margin:clamp(20px,3vh,34px) auto 0;
  display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding-top:24px;
  font-size:0.78rem;color:var(--ink-mute);letter-spacing:0.02em}
.footer2__totop{color:var(--ink-soft);transition:color .3s var(--ease)}
.footer2__totop:hover{color:var(--gold-lit)}
@media (max-width:860px){
  .footer2__grid{grid-template-columns:1fr 1fr;gap:34px 26px}
  .footer2__col--brand{grid-column:1 / -1}
}
@media (max-width:520px){
  .footer2__grid{grid-template-columns:1fr}
}

/* --- hero: a touch more air; lede reveal plays nicely ------------ */
.hero__lede{max-width:30ch}

@media (prefers-reduced-motion:reduce){
  .contact__sun{animation:none}
  .faq__a{transition:none}
}

/* ================================================================
   27. CINEMATIC PAGE TRANSITION (home <-> case pages)
   A golden curtain rises to cover the screen, then we navigate —
   so moving between pages feels like a cut, not a reload.
================================================================ */
.pageveil{position:fixed;inset:0;z-index:9700;pointer-events:none;background:var(--bg);
  display:grid;place-items:center;overflow:hidden;
  transform:translateY(101%);transition:transform .62s var(--ease)}
.pageveil.is-active{transform:translateY(0)}
.pageveil__sun{position:absolute;left:50%;bottom:-32%;width:min(72vw,580px);height:min(72vw,580px);
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(236,196,136,0.42),rgba(216,162,92,0.10) 45%,transparent 70%);
  filter:blur(6px);opacity:0;transition:opacity .5s var(--ease)}
.pageveil.is-active .pageveil__sun{opacity:1}
.pageveil__mark{position:relative;font-family:var(--display);font-weight:600;
  font-size:clamp(2rem,6vw,3.2rem);letter-spacing:0.06em;color:var(--ink);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s .12s var(--ease),transform .6s .12s var(--ease)}
.pageveil.is-active .pageveil__mark{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pageveil{display:none}}

/* ================================================================
   28. TESTIMONIAL MARQUEE · VIEW-CASE PILL · TYPEWRITER HERO
================================================================ */

/* --- continuous one-row testimonial loop --- */
.testi{overflow:hidden}
.tmarquee{position:relative;margin-top:clamp(34px,6vh,72px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tmarquee__track{display:flex;gap:clamp(16px,1.6vw,26px);width:max-content;
  will-change:transform;animation:tscroll 64s linear infinite}
.tmarquee:hover .tmarquee__track{animation-play-state:paused}
.tmarquee .tcard{flex:0 0 auto;width:min(84vw,400px);
  background:linear-gradient(180deg,rgba(236,228,214,0.03),rgba(10,8,7,0.25))}
@keyframes tscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .tmarquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .tmarquee{-webkit-mask-image:none;mask-image:none}
  .tmarquee .tcard{width:min(92vw,360px)}
}

/* --- elegant, functional "View the case" pill (whole card is the link) --- */
.case__view{display:inline-flex;align-items:center;gap:0.6em;align-self:flex-start;
  margin-top:clamp(18px,2.4vh,28px);padding:0.72em 1.35em;border:1px solid var(--line);
  border-radius:100px;font-family:var(--display);font-weight:500;font-size:0.84rem;
  letter-spacing:0.01em;color:var(--ink-soft);
  transition:border-color .45s var(--ease),color .45s var(--ease),
             background-color .45s var(--ease),transform .45s var(--ease)}
.case__view em{font-style:normal;transition:transform .45s var(--ease)}
.case:hover .case__view,.case:focus-within .case__view{
  border-color:var(--gold);color:var(--gold-lit);background:rgba(216,162,92,0.08)}
.case:hover .case__view em{transform:translate(3px,-3px)}

/* --- typewriter hero lede --- */
.hero__lede{min-height:6em}
.type-caret{display:inline-block;width:2px;height:1.04em;margin-left:3px;
  vertical-align:-0.14em;background:var(--gold);
  animation:caretBlink .9s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
@media (max-width:600px){.hero__lede{min-height:7.8em}}