/* ==========================================================================
   BALLORSTUDIO — QUIET LUXURY ARCHITECTURAL EDITION
   Clean, uncluttered, gallery-grade design system.
   · Sharp architectural geometry (zero pill clutter, 1px hairline rules)
   · Static single-line capability ribbon below hero
   · Pinned scroll sections & sticky-stacking card physics (Studio, Work, Services & Web)
   · Subtle scroll-linked parallax on staggered poster columns
   · Native cursor preserved throughout
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  --paper:#F1EFE9;
  --paper-2:#E6E3DB;
  --paper-3:#DBD7CD;
  --ink:#0A0B0A;
  --ink-2:#171A18;
  --ink-3:#2A2E2B;
  --green:#0B2418;
  --green-2:#103722;
  --green-3:#1B4A30;
  --accent:#CDF93F;

  --line:rgba(10,11,10,.14);
  --line-2:rgba(10,11,10,.28);
  --line-inv:rgba(241,239,233,.16);
  --line-inv-2:rgba(241,239,233,.36);
  --muted:rgba(10,11,10,.54);
  --muted-inv:rgba(241,239,233,.6);

  --f-disp:'Anton','Arial Narrow',Impact,sans-serif;
  --f-semi:'Oswald','Arial Narrow',Helvetica,sans-serif;
  --f-grotesk:'BallorGrotesk','Inter',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --max:1480px;
  --pad:clamp(22px,4.2vw,72px);
  --sec:clamp(92px,10.5vw,172px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-expo:cubic-bezier(.19,1,.22,1);
}

/* 2. RESET / BASE --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(14.5px,.95vw,16.5px);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--green-3);outline-offset:3px}
.is-dark :focus-visible{outline-color:var(--accent)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:900;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
}
.skip:focus{left:12px;top:12px}

/* 3. TYPOGRAPHY ----------------------------------------------------------- */
.meta{
  font-family:var(--f-mono);
  font-size:clamp(9.5px,.68vw,11px);
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1.5;
}
.meta--dim{color:var(--muted)}
.is-dark .meta--dim{color:var(--muted-inv)}

.d-xl,.d-lg,.d-md,.d-sm{
  font-family:var(--f-disp);
  font-weight:400;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:-.02em;
}
.d-xl{font-size:clamp(3.2rem,9.6vw,8.8rem)}
.d-lg{font-size:clamp(2.6rem,6.4vw,5.6rem)}
.d-md{font-size:clamp(2rem,3.6vw,3.3rem);line-height:.92}
.d-sm{font-size:clamp(1.15rem,1.5vw,1.5rem);line-height:1}

.dot{color:var(--accent)}
.sec:not(.is-dark) .dot{color:var(--green-3)}
.is-dark .dot{color:var(--accent)}

.lead{
  font-size:clamp(15px,1.12vw,18.5px);
  line-height:1.62;
  color:var(--ink-3);
  max-width:44ch;
}
.is-dark .lead{color:rgba(241,239,233,.78)}

/* Masked Line Reveals */
.mask-heading{display:grid;gap:.02em}
.mask-line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.mask-line > span{display:block;transition:transform .95s var(--ease-expo)}
.ready .mask-heading.reveal:not(.is-in) .mask-line > span{
  transform:translateY(108%);
}
.ready .mask-heading.reveal.is-in .mask-line:nth-child(2) > span{transition-delay:.1s}

/* 4. BUTTONS (Sharp Architectural Edges) ---------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.75em;
  font-family:var(--f-semi);text-transform:uppercase;
  font-size:clamp(10.5px,.75vw,12px);letter-spacing:.16em;font-weight:500;
  padding:1em 1.5em;border:1px solid var(--line-2);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn i{font-style:normal;transition:transform .3s var(--ease-out)}
.btn:hover i{transform:translate(3px,-3px)}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn--accent:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--xl{padding:1.2em 2em;font-size:clamp(11px,.8vw,13px)}
.is-dark .btn,.hero .btn:not(.btn--accent){border-color:var(--line-inv-2);color:var(--paper)}
.is-dark .btn:hover,.hero .btn:not(.btn--accent):hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.is-dark .btn--accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.is-dark .btn--accent:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* 5. NAV (Clean Architectural Masthead) ----------------------------------- */
.nav{
  position:fixed;left:0;right:0;top:0;z-index:600;
  background:transparent;border-bottom:1px solid transparent;
  color:var(--paper);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,40px);
  height:clamp(60px,4.6vw,76px);
  transition:height .35s var(--ease);
}
.brand{display:flex;align-items:center}
.brand img{height:clamp(15px,1.15vw,19px);width:auto;object-fit:contain;filter:invert(1)}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.2vw,36px)}
.nav__link{
  font-family:var(--f-semi);text-transform:uppercase;
  font-size:clamp(10.5px,.74vw,11.5px);letter-spacing:.2em;font-weight:500;
  position:relative;padding-block:4px;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1)}
.nav__cta{
  font-family:var(--f-semi);text-transform:uppercase;
  font-size:clamp(10.5px,.74vw,11.5px);letter-spacing:.16em;font-weight:500;
  border:1px solid rgba(241,239,233,.42);padding:.76em 1.15em;
  display:inline-flex;align-items:center;gap:.65em;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.nav .nav__cta--accent{background:var(--accent);color:var(--green);border-color:var(--accent)}
.nav .nav__cta--accent:hover{background:var(--paper);color:var(--green);border-color:var(--paper)}
.nav__burger{
  display:none;font-family:var(--f-semi);text-transform:uppercase;
  letter-spacing:.2em;font-size:11px;font-weight:500;
  align-items:center;gap:.6em;
}
.nav__burger .bars{display:grid;gap:3px}
.nav__burger .bars i{display:block;width:16px;height:1px;background:currentColor}
.nav__prog{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent)}

.nav.is-stuck{
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  border-bottom-color:var(--line);color:var(--ink);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
}
@supports not (background:color-mix(in srgb,red,blue)){
  .nav.is-stuck{background:rgba(241,239,233,.94)}
}
.nav.is-stuck .nav__inner{height:clamp(52px,4vw,62px)}
.nav.is-stuck .brand img{filter:none}
.nav.is-stuck .nav__cta{border-color:var(--line-2)}
.nav.is-stuck .nav__cta--accent{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav.is-stuck .nav__cta--accent:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.nav.is-stuck .nav__prog{background:var(--green-3)}

/* 6. INDEX OVERLAY -------------------------------------------------------- */
.menu{
  position:fixed;inset:0;z-index:700;background:var(--green);color:var(--paper);
  display:grid;grid-template-rows:auto 1fr auto;padding:var(--pad);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease-out);
  pointer-events:none;
}
.menu[data-open="true"]{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu .brand img{
  -webkit-filter:brightness(0) invert(1) !important;
  filter:brightness(0) invert(1) !important;
}
.menu .nav__cta{border-color:var(--line-inv-2)}
.menu__top{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:clamp(14px,2vw,22px);border-bottom:1px solid var(--line-inv);
}
.menu__list{display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,.4vw,6px)}
.menu__item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(12px,2vw,28px);
  padding:clamp(9px,1.4vw,18px) 0;border-bottom:1px solid var(--line-inv);
  font-family:var(--f-disp);text-transform:uppercase;
  font-size:clamp(30px,6vw,62px);line-height:1;letter-spacing:-.02em;
  transition:padding-left .4s var(--ease-out),color .3s var(--ease);
}
.menu__item .meta{color:var(--muted-inv);font-size:10px}
.menu__item em{font-style:normal;font-size:.42em;color:var(--accent)}
.menu__item:hover{padding-left:clamp(6px,1vw,16px)}
.menu__bot{
  display:grid;gap:clamp(12px,1.6vw,20px);
  padding-top:clamp(14px,2vw,22px);border-top:1px solid var(--line-inv);
}
.menu__bot-row{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:var(--muted-inv);
}
.menu__cta{
  justify-self:start;
  background:var(--accent);color:var(--green);border-color:var(--accent);
}
.menu__cta:hover{background:var(--paper);color:var(--green);border-color:var(--paper)}
.menu__item em .ic{width:1.15em;height:1.15em}

/* 7. HERO — Full-Bleed Before/After Split Stage --------------------------- */
.hero{
  --p:48;
  --seam:calc(var(--p) * 1%);
  /* Exact horizontal alignment with .nav__inner (.wrap):
     left edge = left edge of logo (.brand), right edge = right edge of START A PROJECT (.nav__cta--accent) */
  --gut:max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  --navh:clamp(60px,4.6vw,76px);
  position:sticky;top:0;z-index:0;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  background:var(--green);color:var(--paper);
}
@supports (container-type:inline-size){
  .hero{
    container-type:inline-size;
    --seam:calc(var(--p) * 1cqw);
    --gut:max(var(--pad), calc((100cqw - var(--max)) / 2 + var(--pad)));
  }
}

.hero__stage{
  position:absolute;inset:0;z-index:1;
  cursor:ew-resize;touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
  transform:scale(calc(1 + var(--hero-zoom, 0))) translate3d(0, var(--hero-y, 0px), 0);
  will-change:transform;
}
.hero__stage:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.hero__stage:active{cursor:grabbing}
.stage__des,.stage__orig{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 38%;
  -webkit-user-drag:none;-webkit-user-select:none;user-select:none;
  filter:saturate(1.03) contrast(1.05);
}
.stage__orig{
  clip-path:inset(0 calc(100% - var(--seam)) 0 0);
  transition:clip-path 1.15s var(--ease-out);
}

.hero__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(7,24,16,.74) 0, rgba(7,24,16,.32) 14%, rgba(7,24,16,0) 28%),
    linear-gradient(to top, rgba(7,24,16,.93) 0, rgba(7,24,16,.74) 16%,
                    rgba(7,24,16,.36) 34%, rgba(7,24,16,.06) 54%, rgba(7,24,16,0) 70%),
    radial-gradient(125% 95% at 50% 44%, transparent 45%, rgba(5,17,11,.5));
}

.seam{
  position:absolute;left:0;top:0;width:100%;height:100%;
  transform:translateX(var(--seam));
  pointer-events:none;z-index:3;
  transition:transform 1.15s var(--ease-out);
}
.seam--line::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--accent);opacity:.9;
}
.seam--dot i .ic{width:1.5em;height:1.5em}
.seam--dot i{
  position:absolute;left:0;top:48%;transform:translate(-50%,-50%);
  width:clamp(40px,3.6vw,52px);height:clamp(40px,3.6vw,52px);border-radius:50%;
  background:var(--accent);color:var(--green);
  display:grid;place-items:center;font-style:normal;
  font-size:clamp(15px,1.2vw,18px);line-height:1;
  box-shadow:0 8px 26px rgba(0,0,0,.4);
}

.hero__ui{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;justify-content:flex-end;
  pointer-events:none;
}
.hero__ui a,.hero__ui button{pointer-events:auto}
.hero__base{
  width:100%;padding-bottom:clamp(24px,3.6vh,42px);
  text-shadow:0 2px 22px rgba(5,17,11,.55);
  transform:translate3d(0, var(--py, 0px), 0);
}
.hero__title{
  position:relative;width:100%;
  padding-inline:var(--gut);
  font-family:var(--f-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.1rem,5.8vw,5.5rem);
  line-height:.92;letter-spacing:-.022em;
  animation:heroUp 1s var(--ease-out) .28s both;
}
.tt__des{
  display:block;color:var(--paper);
  clip-path:inset(0 0 0 calc(var(--seam) - var(--gut)));
  transition:clip-path 1.15s var(--ease-out);
}
.tt__des .dot{color:var(--accent)}
.tt__raw{
  position:absolute;left:0;top:0;width:100%;
  padding-inline:var(--gut);box-sizing:border-box;
  display:block;color:rgba(241,239,233,.34);
  clip-path:inset(0 calc(100% - var(--seam)) 0 0);
  transition:clip-path 1.15s var(--ease-out);
}
@supports (-webkit-text-stroke:1px red){
  .tt__raw{color:transparent;-webkit-text-stroke:max(1.2px,.016em) rgba(241,239,233,.74)}
  .tt__raw .dot{-webkit-text-stroke:max(1.2px,.016em) rgba(205,249,63,.74)}
}

.hero__row{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(16px,2.4vw,40px);flex-wrap:wrap;
  padding-inline:var(--gut);
  margin-top:clamp(16px,2.4vh,28px);
  animation:heroUp .9s var(--ease-out) .42s both;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:10px}
.hero__tags{
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(14px,3vw,52px);
  color:rgba(241,239,233,.76);
  text-align:right;
}

.hero.is-dragging .stage__orig,
.hero.is-dragging .tt__raw,
.hero.is-dragging .tt__des,
.hero.is-dragging .seam{transition:none}

@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* 8. CAPABILITY STRIP (STATIC — EXACT ORIGINAL) --------------------------- */
.strip{
  background:var(--ink);color:rgba(241,239,233,.74);
  padding:clamp(19px,1.4vw,22px) 0;
  overflow:hidden;
}
.strip .meta{
  display:flex;flex-wrap:nowrap;gap:0 clamp(1.1em,1.7vw,2.1em);
  justify-content:space-between;
  white-space:nowrap;
  font-size:clamp(10px,.8vw,12.5px);
  letter-spacing:.16em;
}
.strip .meta i{color:var(--accent);font-style:normal}

/* 9. SECTION FURNITURE ---------------------------------------------------- */
.sec{padding:var(--sec) 0;scroll-margin-top:76px}
.sec--rule{border-top:1px solid var(--line)}
.sec--dark{background:var(--green);color:var(--paper)}
.is-dark{color:var(--paper)}

.sec-head{
  display:grid;grid-template-columns:auto auto 1fr;
  gap:clamp(12px,1.6vw,26px);align-items:center;
  padding-bottom:clamp(28px,3.4vw,52px);
}
.sec-head__no{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--muted)}
.sec-head__label{font-family:var(--f-mono);font-size:clamp(10px,.74vw,11.5px);letter-spacing:.22em;text-transform:uppercase}
.sec-head__line{
  height:1px;background:var(--line);
  transform-origin:left;
  transition:transform 1.1s var(--ease-expo);
}
.ready .sec-head.reveal:not(.is-in) .sec-head__line{transform:scaleX(0)}
.is-dark .sec-head__line{background:var(--line-inv)}
.is-dark .sec-head__label{color:var(--paper)}
.is-dark .sec-head__no{color:var(--accent)}

.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,64px);align-items:end;
  padding-bottom:clamp(34px,4.2vw,64px);
}
.split__note{display:flex;flex-direction:column;align-items:flex-start;gap:22px}

/* 10. SELECTED WORK (PINNED SPLIT + CAPTIONLESS SPACED GALLERY) ----------- */
.work-pin-layout{
  display:grid;
  grid-template-columns:minmax(0,.39fr) minmax(0,.61fr);
  gap:clamp(44px,6vw,104px);
  /* Stretch left rail track so position:sticky pins all the way to the bottom */
  align-items:stretch;
}
.work-pin__side{
  position:relative;
}
.work-pin__sticky{
  position:-webkit-sticky;
  position:sticky;
  top:clamp(96px,12vh,136px);
  display:grid;
  gap:clamp(20px,2.4vw,30px);
  padding-right:clamp(0px,1.5vw,24px);
}
.work-pin__cta{padding-top:6px}

.work-pin__gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,3.6vw,54px) clamp(24px,3vw,44px);
  align-items:start;
}
@media (min-width:981px){
  .work-pin__gallery .plate--offset{
    margin-top:clamp(48px,6vw,92px);
  }
}

.plate{
  margin:0;min-width:0;
  transform:translate3d(0, var(--py, 0px), 0);
  will-change:transform;
}
.plate__frame{
  display:block;position:relative;background:var(--paper-2);
  overflow:hidden;cursor:default;
}
.plate__frame img{width:100%;height:auto;display:block}
.plate__orig{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .3s var(--ease);
}
@media (hover:hover){
  .plate:hover .plate__orig{opacity:1}
}
.plate__frame.is-revealing .plate__orig{opacity:1}

/* Curtain Wipe on Scroll Entry */
.ready .curtain .plate__frame::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:var(--paper-3);
  transform:scaleY(1);transform-origin:top;
  transition:transform .95s var(--ease-expo);
  pointer-events:none;
}
.ready .curtain.is-in .plate__frame::after{transform:scaleY(0)}
.ready .curtain .plate__frame > img:first-child{
  transform:scale(1.06);
  transition:transform 1.25s var(--ease-expo);
}
.ready .curtain.is-in .plate__frame > img:first-child{transform:scale(1)}

/* 11. SERVICES (MODERN ARCHITECTURAL STICKY-STACKING CARDS) --------------- */
.stack-deck{
  display:grid;
  gap:clamp(32px,4vw,56px);
}
.stack-panel{
  position:relative;
  border:1px solid var(--line);
  padding:clamp(28px,3.6vw,52px);
  transform-origin:center top;
  transform:scale(var(--card-scale, 1));
  filter:brightness(var(--card-bright, 1));
  will-change:transform,filter;
  box-shadow:0 18px 48px rgba(10,11,10,.05);
}
@media (min-width:981px){
  .stack-panel{
    position:sticky;
    top:calc(84px + var(--stack-i, 0) * 30px);
  }
}

/* Primary Card: Sports Posters & Matchday Art */
.stack-panel--posters{
  background:var(--green);
  color:var(--paper);
  border-color:rgba(241,239,233,.14);
  border-top:1px solid rgba(205,249,63,.55);
  padding:clamp(32px,4.2vw,60px);
  box-shadow:0 26px 64px rgba(7,24,16,.2);
}

/* Secondary Card: Custom Websites & Platforms */
.stack-panel--websites{
  background:var(--paper-2);
  color:var(--ink);
  border-color:var(--line);
  border-top:1px solid var(--line-2);
  box-shadow:0 20px 52px rgba(10,11,10,.07);
}

.stack-panel__bar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:clamp(16px,1.8vw,22px);
  margin-bottom:clamp(26px,3.2vw,42px);
  border-bottom:1px solid var(--line-2);
  color:var(--muted);
}
.stack-panel--posters .stack-panel__bar{
  border-bottom-color:var(--line-inv);
  color:var(--muted-inv);
}

.stack-panel__grid{
  display:grid;
  grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:clamp(28px,4.2vw,68px);
  align-items:stretch;
}
.stack-panel__intro{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(18px,2.2vw,26px);
}
.stack-panel--posters .stack-panel__intro .d-md{
  font-size:clamp(2.2rem,4vw,3.65rem);
}
.stack-panel__intro p{
  color:var(--ink-3);
  font-size:clamp(14.5px,1.02vw,16.5px);
  line-height:1.62;
  max-width:34ch;
}
.stack-panel--posters .stack-panel__intro p{
  color:rgba(241,239,233,.78);
}
.stack-panel__action{
  padding-top:4px;
}

/* Quiet 2x2 Deliverable Matrix inside Service Cards */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.svc-tile{
  background:var(--paper);
  padding:clamp(20px,2.2vw,30px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
}
.svc-tile .meta{
  color:var(--muted);
  font-size:10px;
}
.svc-tile b{
  font-family:var(--f-semi);
  font-weight:500;
  text-transform:uppercase;
  font-size:clamp(14px,1.08vw,17px);
  letter-spacing:.08em;
  line-height:1.2;
  margin-top:2px;
}
.svc-tile p{
  color:var(--ink-3);
  font-size:clamp(13px,.92vw,14.5px);
  line-height:1.52;
}

.svc-grid--dark{
  background:var(--line-inv);
  border-color:var(--line-inv);
}
.svc-grid--dark .svc-tile{
  background:rgba(16,55,34,.6);
}
.svc-grid--dark .svc-tile .meta{
  color:var(--muted-inv);
}
.svc-grid--dark .svc-tile b{
  color:var(--paper);
}
.svc-grid--dark .svc-tile p{
  color:rgba(241,239,233,.72);
}

/* 12. DIGITAL & WEBSITES (CLEAN STICKY-STACKING SHOWCASE) ----------------- */
.web-panel{
  margin:0;min-width:0;
  background:var(--green-2);
  border:1px solid var(--line-inv);
  padding:clamp(16px,2vw,30px);
  transform-origin:center top;
  transform:scale(var(--card-scale, 1));
  filter:brightness(var(--card-bright, 1));
  will-change:transform,filter;
  box-shadow:0 28px 72px rgba(0,0,0,.34);
}
@media (min-width:981px){
  .web-panel{
    position:sticky;
    top:calc(82px + var(--stack-i, 0) * 26px);
  }
}
.web-panel__head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--line-inv);
  color:var(--muted-inv);
}
.web-panel__head b{color:var(--paper);font-weight:500}
.web-panel__media{overflow:hidden;background:var(--ink)}
.web-panel__media img{
  width:100%;height:auto;display:block;
  transition:transform .85s var(--ease-out);
}
.web-panel:hover .web-panel__media img{transform:scale(1.015)}

/* 13. STUDIO (PINNED EDITORIAL SPLIT & LEDGER) ---------------------------- */
.studio-pin{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(32px,5vw,88px);
  /* Stretch left rail track so position:sticky pins all the way to the bottom */
  align-items:stretch;
}
.studio-pin__left{
  position:relative;
}
.studio-pin__sticky{
  position:-webkit-sticky;
  position:sticky;
  top:clamp(96px,12vh,136px);
  display:grid;gap:16px;
}
.studio-pin__right{display:grid;gap:clamp(28px,3.6vw,48px)}
.studio-statement{
  font-family:var(--f-grotesk);
  font-weight:500;
  font-size:clamp(1.45rem,2.4vw,2.35rem);
  line-height:1.28;
  letter-spacing:-.015em;
  color:var(--ink);
  max-width:34ch;
}
.studio__copy{
  display:grid;gap:18px;max-width:56ch;
  color:var(--ink-2);font-size:clamp(14.5px,1.04vw,16.5px);line-height:1.75;
}

.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line-2);border:1px solid var(--line-2);
}
.stat{background:var(--paper);padding:clamp(20px,2.4vw,34px);display:grid;gap:8px}
.stat b{
  font-family:var(--f-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.85rem,2.8vw,2.8rem);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.stat .meta{color:var(--muted)}
.stat--accent{
  background:var(--accent);
  color:var(--ink);
}
.stat--accent .meta{
  color:rgba(10,11,10,.72);
}

/* 14. CLIENTS ------------------------------------------------------------- */
.clients{padding:clamp(52px,6vw,96px) 0 var(--sec)}
.clients__head{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:clamp(18px,2.4vw,30px);
  border-bottom:1px solid var(--line);
}
.logos{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.logos li{
  background:var(--paper);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;
  padding:clamp(18px,2.2vw,30px) 10px;min-height:120px;
  transition:background .3s var(--ease);
}
.logos li:hover{background:var(--paper-2)}
.logos img{
  width:auto;max-width:74px;max-height:54px;object-fit:contain;
  filter:grayscale(1);opacity:.62;
  transition:opacity .3s var(--ease),filter .3s var(--ease);
}
.logos li:hover img{filter:none;opacity:1}
.logos .meta{color:var(--muted);font-size:9px;letter-spacing:.11em}
.logos__more{gap:8px}
.logos__more b{
  font-family:var(--f-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(14px,1.3vw,20px);color:var(--green-3);letter-spacing:-.01em;
}

/* 15. CONTACT / FOOTER ---------------------------------------------------- */
.contact{background:var(--green);color:var(--paper);padding:clamp(72px,8.5vw,140px) 0 clamp(24px,3vw,42px);scroll-margin-top:76px}
.contact__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.46fr);
  gap:clamp(22px,3vw,60px);align-items:end;
  padding-bottom:clamp(30px,3.8vw,58px);
}
.contact__side{display:grid;gap:10px;justify-items:end;text-align:right;color:var(--muted-inv)}
.contact__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,76px);
  padding-top:clamp(28px,3.2vw,50px);border-top:1px solid var(--line-inv);
}
.contact__cta{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.links{display:grid}
.links a{
  display:grid;grid-template-columns:1fr auto;gap:5px 16px;
  padding:clamp(15px,1.7vw,22px) 0;border-bottom:1px solid var(--line-inv);
  transition:padding-left .35s var(--ease-out);
}
.links a:first-child{border-top:1px solid var(--line-inv)}
.links a:hover{padding-left:10px}
.links em{font-style:normal;color:var(--muted-inv)}
.links b{
  font-family:var(--f-semi);font-weight:500;text-transform:uppercase;
  font-size:clamp(13px,1.05vw,17px);letter-spacing:.06em;
}
.links i{grid-row:1;grid-column:2;font-style:normal;color:var(--accent);transition:transform .3s var(--ease-out)}
.links a:hover i{transform:translate(3px,-3px)}
.links small{grid-column:1/-1;color:var(--muted-inv)}
.foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;
  margin-top:clamp(44px,5.2vw,84px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line-inv);color:var(--muted-inv);
}
.to-top{color:var(--paper)}
.to-top:hover{color:var(--accent)}

/* 16. REVEAL -------------------------------------------------------------- */
.ready .reveal{opacity:0;transform:translateY(18px)}
.ready .reveal{transition:opacity .75s var(--ease-out),transform .8s var(--ease-expo)}
.ready .reveal.is-in{opacity:1;transform:none}

/* 17. RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1180px){
  .logos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:980px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex}
  .work-pin-layout,.stack-panel__grid,.studio-pin,.contact__row,.contact__head,.split{
    grid-template-columns:1fr;
  }
  .work-pin__sticky,.studio-pin__sticky{position:static}
  .contact__head{gap:clamp(18px,3vw,30px)}
  .contact__side{justify-items:start;text-align:left}
  .split{gap:22px}
  .plate,.stack-panel,.web-panel{transform:none!important;filter:none!important}
}
@media (max-width:880px){
  .hero__row{align-items:flex-start;flex-direction:column}
  .hero__tags{width:100%;justify-content:flex-start;text-align:left}
}
@media (max-width:720px){
  .hero__tags{font-size:9px}
  .seam--dot i{width:38px;height:38px;font-size:14px}
  .work-pin__gallery{gap:26px 16px}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .work-pin__gallery{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}

/* 18. REDUCED MOTION ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .ready .reveal{opacity:1;transform:none}
  .ready .mask-heading .mask-line > span{transform:none!important}
  .ready .curtain .plate__frame::after{display:none!important}
  .plate,.stack-panel,.web-panel{transform:none!important;filter:none!important}
}

/* 19. ICONS --------------------------------------------------------------- */
.ic{
  display:inline-block;width:.74em;height:.74em;
  vertical-align:-.06em;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  flex:0 0 auto;pointer-events:none;
}
.ic path{vector-effect:non-scaling-stroke}

/* 20. PINNED HERO ----------------------------------------------------------
   The hero stage stays fixed at the top of the viewport; every section below
   is an opaque sheet (z-index:1) that scrolls up and over it. */
.strip,#studio,#work,#capabilities,#digital,.clients{
  position:relative;z-index:1;
}
#studio,#work,#capabilities,.clients{background:var(--paper)}