/* ============================================================
   FLUID SCALING
   Desktop (>=1025px): unchanged 16px@1920 / 12px@1440 behaviour.
   Tablet / phone: floor lifted so rem-based sizing stops shrinking.
   ============================================================ */
html{
  font-size: clamp(14px, 0.8333vw, 48px);
  background:var(--bg);
  overflow-x:clip;
  }
@media (max-width:1024px){ html{ font-size:14px; } }
@media (max-width:860px){  html{ font-size:15px; } }
@media (max-width:560px){  html{ font-size:16px; } }

:root{
  --bg:#100F0D; --bg2:#161511;
  --ink:#EDE9E0; --muted:#8F887A; --dim:rgba(237,233,224,.16);
  --line:rgba(237,233,224,.14);
  --accent:#FF4D00;
  --paper:#EDE9E0; --paper-ink:#14130F; --paper-muted:#6E685C; --paper-line:rgba(20,19,15,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --film-ease:cubic-bezier(.65,0,.35,1);

  /* Safe areas (notch / home indicator / rounded corners) */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ---- Founder section ---- */
  --founder-bg-x: 50%;
  --founder-bg-y: 50%;
  --founder-bg-scale: 100%;
  --founder-bg-opacity: 1;
  --founder-bg-blur: 0px;
  --founder-x: 30px;
  --founder-y: -26px;
  --founder-bottom: 0px;
  --founder-scale: 1.10;
  --text-pad-y: 50px;
  --text-pad-x: 90px;
  --text-max-w: 48rem;

  /* ---- Voices section ---- */
  --v-grid-max: 91rem;
  --v-pad-top: 9.5rem;
  --v-pad-bottom: 9.5rem;
  --v-rule-gap: 4.25rem;
  --v-grid-mb: 1rem;
  --v-gap: 6.25rem;
  --v-cols: 1.8fr 0.9fr;
  --v-mark-size: 8rem;
  --v-mark-mb: 0.25rem;
  --v-quote-size: clamp(1.95rem, 3.5vw, 2.25rem);
  --v-quote-ch: 60ch;
  --v-attr-mt: 2.75rem;
  --v-side-pl: 3.375rem;
  --v-side-item-py: 0.875rem;
  --v-name-size: 1.25rem;
  --v-role-size: 0.75rem;
  --v-label-mb: 1.4375rem;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Archivo',sans-serif;font-size:1rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
ul,ol{list-style:none}
::selection{background:var(--accent);color:#14130F}
::-webkit-scrollbar{width:0.625rem}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2C2924;border-radius:99px}
:focus-visible{outline:2px solid var(--accent);outline-offset:0.1875rem}
@media(pointer:fine){body,a,button,.pill span{cursor:none}input,textarea{cursor:text}}

.mono{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase}
.wrap{padding-inline:calc(clamp(1.25rem,4vw,4rem) + var(--safe-l)) calc(clamp(1.25rem,4vw,4rem) + var(--safe-r))}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:none}

html.js.anim-ready .rv{opacity:0;transform:translateY(2.125rem);transition:opacity .8s ease var(--d,0s),transform .8s var(--ease) var(--d,0s)}
html.js.anim-ready .rv.in{opacity:1;transform:none}
html.js.anim-ready .lm{display:block;overflow:hidden}
html.js.anim-ready .lm .lm-in{display:inline-block;transform:translateY(114%);transition:transform 1s var(--ease) var(--d,0s)}
html.js.anim-ready .lm.in .lm-in,
html.js.anim-ready [data-reveal].in .lm-in{transform:none}
html.js .ld{opacity:0;transform:translateY(1.625rem);transition:opacity .9s ease var(--ld,0s),transform .9s var(--ease) var(--ld,0s)}
html.js body.loaded .ld{opacity:1;transform:none}
html.js .hl{display:block;overflow:hidden}
html.js .hl-in{display:inline-block;transform:translateY(114%);transition:transform 1.05s var(--ease) var(--ld,0s)}
html.js body.loaded .hl-in{transform:none}

.grain{position:fixed;inset:0;z-index:260;pointer-events:none;opacity:.055;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23n)"/></svg>');
  background-repeat:repeat;background-size:8.75rem 8.75rem;
  animation:grain .9s steps(1,end) infinite;contain:strict;}
@keyframes grain{
  0%,100%{background-position:0 0}10%{background-position:-7px -11px}20%{background-position:-17px 4px}
  30%{background-position:8px -14px}40%{background-position:-6px 17px}50%{background-position:-14px 8px}
  60%{background-position:11px 0}70%{background-position:0 11px}80%{background-position:4px 17px}
  90%{background-position:-11px 6px}
}

.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:300;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cur-dot{width:0.375rem;height:0.375rem;background:#F5F2EA}
.cur-ring{width:2.25rem;height:2.25rem;border:1px solid rgba(245,242,234,.9);display:grid;place-items:center;
  transition:width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s,opacity .3s}
.cur-ring span{font-family:'IBM Plex Mono';font-size:0.625rem;letter-spacing:.14em;color:#14130F;opacity:0;transition:opacity .25s}
.cur-ring.is-link{width:3.625rem;height:3.625rem;background:rgba(245,242,234,.14)}
.cur-ring.is-view{width:5.5rem;height:5.5rem;background:var(--accent);border-color:var(--accent);mix-blend-mode:normal}
.cur-ring.is-view span{opacity:1}
.cur-dot.is-hidden,.cur-ring.is-hidden{opacity:0}
@media(pointer:coarse){.cur-dot,.cur-ring{display:none}}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{display:none}
html.js #preloader{
  display:flex;position:fixed;inset:0;z-index:250;background:#0A0806;color:var(--ink);
  align-items:center;justify-content:center;padding:clamp(1.375rem,4vw,3.75rem);overflow:hidden;
  will-change:transform;isolation:isolate;
  --film-slide:375ms;--cap-fade:550ms;--exit-dur:800ms;--o-delay:300ms;
}
.pre-scene{
  position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(1.875rem,4.6vh,3.125rem);
  font-size:clamp(6rem,15vh,10rem);line-height:0;width:100%;
}
.pre-wordmark{display:flex;align-items:center;justify-content:center}
.pre-b-wrap{overflow:hidden;display:inline-flex;height:1em;flex:none;align-items:center;justify-content:center}
.pre-letter{
  height:1em;width:auto;display:block;
  filter:brightness(0) saturate(100%) invert(93%) sepia(10%) saturate(170%) hue-rotate(338deg) brightness(104%) contrast(92%);
  transform:translateY(115%);transition:transform .45s cubic-bezier(.22,1,.36,1);will-change:transform;
}
#preloader.is-in .pre-letter{transform:translateY(0)}
#preloader.is-in .pre-b-wrap:last-child .pre-letter{transition-delay:.06s}
.pre-o{
  position:relative;flex:none;width:1em;aspect-ratio:1;border-radius:50%;overflow:hidden;
  margin:0 .2em;background:#15130F;box-shadow:0 0 0 1px rgba(237,233,224,.08);
  opacity:0;transform:scale(.4);
  transition:opacity .5s cubic-bezier(.22,1,.36,1) var(--o-delay),transform .7s cubic-bezier(.22,1,.36,1) var(--o-delay);
  will-change:opacity,transform;isolation:isolate;
}
#preloader.is-in .pre-o{opacity:1;transform:scale(1)}
.pre-strip{
  position:absolute;inset:0;z-index:1;display:flex;width:100%;height:100%;
  transform:translateX(0);transition:transform var(--film-slide) cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.pre-frame{
  flex:0 0 100%;width:100%;height:100%;background-size:cover;background-position:center;
  filter:saturate(.88) contrast(1.05) brightness(.9);
}
.pre-o::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,transparent 55%,rgba(0,0,0,.42));
  box-shadow:inset 0 0 0 1px rgba(237,233,224,.08);pointer-events:none;
}
.pre-list{
  font-size:clamp(0.8125rem,1.2vw,1rem);display:flex;flex-direction:column;gap:0.6875rem;
  list-style:none;align-items:flex-start;width:max-content;
}
.pre-item{
  display:flex;align-items:center;gap:.9em;font-family:'Archivo',sans-serif;
  font-weight:600;font-stretch:105%;letter-spacing:.02em;text-transform:uppercase;font-size:1em;
  color:rgba(237,233,224,.32);white-space:nowrap;
  opacity:0;transform:translateY(0.375rem);
  transition:opacity var(--cap-fade) var(--ease),transform var(--cap-fade) var(--ease),color var(--cap-fade) ease;
}
.pre-item.is-revealed{opacity:1;transform:translateY(0)}
.pre-item.is-active{color:var(--ink)}
.pre-item .sym{flex:none;width:2em;height:1em;display:flex;align-items:center}
.pre-item .sym i{display:block;width:.85em;height:0.125rem;background:currentColor;
  transition:width var(--cap-fade) var(--ease),background-color var(--cap-fade) ease;}
.pre-item.is-active .sym i{width:1.8em;background:var(--accent)}
#preloader.no-anim,#preloader.no-anim *,#preloader.no-anim *::before,#preloader.no-anim *::after{
  transition:none !important;animation:none !important;
}
@media(max-width:900px){.pre-scene{font-size:clamp(5rem,22vw,8.75rem);gap:clamp(1.75rem,4vh,2.625rem)}}
@media(max-width:640px){
  .pre-scene{font-size:clamp(3.5rem,19vw,7.5rem);gap:clamp(1.5rem,4vh,2.25rem)}
  .pre-list{font-size:0.8125rem}.pre-item{letter-spacing:.06em}
  .pre-item .sym{width:1.7em}.pre-item.is-active .sym i{width:1.4em}
}
@media(prefers-reduced-motion:reduce){
  .pre-letter,.pre-o,.pre-strip,.pre-item,.pre-item .sym i{transition-duration:.01ms !important;}
}

/* ============ nav ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;color:#F5F2EA;
  display:flex;justify-content:space-between;align-items:center;
  padding-block:1.375rem;
  padding-inline:calc(4vw + var(--safe-l)) calc(4vw + var(--safe-r));
  transition:transform .5s var(--ease)}
.nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background: linear-gradient(to bottom, rgba(10,8,6,.72) 0%, rgba(10,8,6,.32) 60%, rgba(10,8,6,0) 100%);
  z-index:-1;
}
.nav.hide{transform:translateY(-110%)}
body.menu-open .nav{transform:none}
.nav-logo{display:flex;align-items:center;height:2.125rem}
.nav-logo img{height:100%;width:auto;display:block;}
.nav-blog{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;margin-left:auto;margin-right:1rem;border:1px solid rgba(245,242,234,.5);border-radius:999px;padding:.9375rem 1.4rem;color:#F5F2EA;font-size:.75rem;letter-spacing:.14em;text-decoration:none;transition:background .35s,color .35s,border-color .35s;}
.nav-blog .ic{width:1rem;height:1rem;display:block;}
.nav-blog:hover,.nav-blog:focus-visible{background:var(--accent);color:#100F0D;border-color:var(--accent)}
.nav-menu{border:1px solid rgba(245,242,234,.5);border-radius:999px;
  padding:0.9375rem 2.125rem;font-size:0.875rem;letter-spacing:.14em;
  transition:background .35s,color .35s,border-color .35s;}
.nav-menu:hover{background:#F5F2EA;color:#000;border-color:#F5F2EA}

/* ============ menu ============ */
.menu{
  position:fixed;inset:0;z-index:110;background:#0B0A09;
  visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s cubic-bezier(.76,0,.24,1),visibility 0s .75s;
  display:flex;flex-direction:column;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:contain;
}
body.menu-open .menu{
  visibility:visible;
  clip-path:inset(0 0 0% 0);
  transition:clip-path .75s cubic-bezier(.76,0,.24,1);
}
.menu-in{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(1.25rem,3.5vw,3.5rem);
  align-content:center;
  align-items:center;
  padding-top:clamp(4.75rem,11vh,7.5rem);
  padding-bottom:clamp(0.875rem,2.6vh,2rem);
}
.menu-nav,.menu-side{min-height:0}
.menu-link{
  display:flex;align-items:baseline;gap:1.625rem;
  padding:clamp(0.25rem,1.1vh,0.875rem) 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.5rem,4.8vw,4rem);
  font-weight:900;font-stretch:112%;text-transform:uppercase;line-height:1;
  transition:transform .5s var(--ease),color .3s;
}
.menu-link:hover{transform:translateX(1rem);color:var(--accent)}
.ml-ix{color:var(--muted);transition:color .3s;font-size:.7em}
.menu-link:hover .ml-ix{color:var(--accent)}
html.js.anim-ready .menu-link .lm-in{transform:translateY(114%);transition:transform .8s var(--ease)}
html.js.anim-ready body.menu-open .menu-link .lm-in{transform:none}
html.js.anim-ready body.menu-open .menu-link:nth-child(1) .lm-in{transition-delay:.22s}
html.js.anim-ready body.menu-open .menu-link:nth-child(2) .lm-in{transition-delay:.28s}
html.js.anim-ready body.menu-open .menu-link:nth-child(3) .lm-in{transition-delay:.34s}
html.js.anim-ready body.menu-open .menu-link:nth-child(4) .lm-in{transition-delay:.4s}
html.js.anim-ready body.menu-open .menu-link:nth-child(5) .lm-in{transition-delay:.46s}
html.js.anim-ready body.menu-open .menu-link:nth-child(6) .lm-in{transition-delay:.52s}
.menu-side{
  display:flex;flex-direction:column;
  gap:clamp(0.75rem,2vh,1.75rem);
  padding-top:0.25rem;
  font-size:.85rem;
}
html.js.anim-ready .menu-side>div{opacity:0;transform:translateY(1.125rem);transition:opacity .6s ease .5s,transform .6s var(--ease) .5s}
html.js.anim-ready body.menu-open .menu-side>div{opacity:1;transform:none}
.ms-l{display:block;color:var(--muted);margin-bottom:0.375rem;font-size:0.625rem}
.menu-side a{display:block;padding:0.125rem 0;transition:color .3s;font-size:clamp(0.6875rem,1vw,0.75rem)}
.menu-side a:hover{color:var(--accent)}
.menu-side p{font-size:clamp(0.6875rem,1vw,0.75rem);line-height:1.5}

/* ---- menu copy rows ---- */
.ms-copy-row{
  display:flex;
  align-items:center;
  gap:0.5rem;
  min-width:0;
}
.ms-copy-row a{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---- generic copy button ---- */
.copy-btn{
  flex:none;
  width:1.5rem;height:1.5rem;
  border-radius:50%;
  border:1px solid rgba(237,233,224,.18);
  display:grid;place-items:center;
  color:var(--muted);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.copy-btn .ic{width:.75rem;height:.75rem}
.copy-btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#14130F;
  transform:scale(1.12);
}
.copy-btn.copied{
  background:var(--accent);
  border-color:var(--accent);
  color:#14130F;
}
.copy-btn:focus-visible{outline:2px solid var(--accent);outline-offset:0.125rem}
@media (pointer:fine){
  .copy-btn{cursor:pointer}
}

.menu-foot{
  display:flex;justify-content:space-between;gap:1rem;
  padding-block:clamp(0.625rem,1.6vh,1.375rem);
  border-top:1px solid var(--line);
  color:var(--muted);align-items:center;
  font-size:0.625rem;
}
.menu-foot-logo{height:1.125rem;width:auto}

@media (max-height:820px){
  .menu-in{padding-top:clamp(4.5rem,10vh,6.5rem);gap:clamp(1rem,2.6vw,2.5rem)}
  .menu-link{font-size:clamp(1.4rem,4.2vw,3.2rem);padding:clamp(0.25rem,1vh,0.625rem) 0}
  .menu-side{gap:clamp(0.625rem,1.6vh,1.375rem)}
}
@media (max-height:700px){
  .menu-in{padding-top:clamp(4.125rem,9vh,5.5rem);gap:clamp(0.875rem,2.2vw,2rem)}
  .menu-link{font-size:clamp(1.25rem,3.6vw,2.6rem);padding:0.375rem 0}
  .menu-link .ml-ix{display:none}
  .menu-side{gap:0.625rem}
  .menu-side p{line-height:1.4}
}
@media (max-height:580px){
  .menu-link{font-size:clamp(1.1rem,3vw,2rem);padding:0.25rem 0}
  .menu-side{display:none}
  .menu-foot{padding-block:0.5rem}
}
@media (max-width:860px){
  .menu-in{
    grid-template-columns:1fr;
    align-content:center;
    gap:clamp(0.875rem,2.6vh,1.75rem);
    padding-top:clamp(4.875rem,12vh,6.75rem);
    padding-bottom:clamp(0.75rem,2.2vh,1.5rem);
  }
  .menu-link{font-size:clamp(1.5rem,6.6vw,2.8rem);padding:clamp(0.375rem,1.2vh,0.875rem) 0}
  .menu-side{gap:0.75rem;font-size:.82rem}
  .ms-l{font-size:0.5625rem;margin-bottom:0.25rem}
  .menu-side a,.menu-side p{font-size:0.625rem}
}
@media (max-width:520px){
  .menu-link{font-size:clamp(1.4rem,7.4vw,2.4rem)}
  .menu-side .ms-l{font-size:0.5625rem}
}
/* Short phones (about 640-800px visible height, e.g. 360x640, 375x667, 390x780): the width rules above come later than the
   max-height rules, so they win and the links kept their tall-phone sizing. The menu then overflowed and
   the social icons ran into the bottom bar. Restore the compaction for this narrow-AND-short case only. */
@media (max-width:860px) and (max-height:800px){
  .menu-in{gap:.75rem}
  .menu-link{font-size:clamp(1.3rem,6.4vw,2.2rem);padding:.25rem 0}
  .menu-side{gap:.5rem}
  .menu-side .wa-btn{--wa-h:3.25rem}
  .menu-socials a{width:2rem;height:2rem}
}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;gap:0.875rem;padding:1.0625rem 1.75rem;border-radius:999px;
  border:1px solid var(--line);font-family:'IBM Plex Mono';font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;
  transition:background .4s,color .4s,border-color .4s}
.btn .ic{font-size:0.9375rem;transition:transform .4s var(--ease)}
.btn:hover .ic{transform:translate(0.1875rem,-0.1875rem)}
.btn-solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-solid:hover{background:var(--accent);border-color:var(--accent);color:#14130F}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-top:7.375rem;z-index:1}
.hero-in{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-bottom:clamp(1.75rem,4vh,3.25rem);
}
.hero-title{
  position:relative;
  font-weight:800;
  font-stretch:115%;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:-.025em;
  font-size:clamp(2.2rem,8.5vw,11rem);
  padding-right:clamp(3.75rem,8vw,7.5rem);
}
.hero-title .hl{display:block;white-space:nowrap}
.hl-l{display:inline-block;transition:font-stretch .5s var(--ease),color .25s ease}
.hl-l:hover{font-stretch:78%;color:var(--accent)}
.hero-sub-row{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  margin-top:auto;
  padding-top:clamp(2.5rem,7vh,5.5rem);
}
.hero-sub{max-width:46ch;font-size:clamp(1.15rem,1.7vw,1.55rem);color:var(--muted)}
.hero-sub strong{color:var(--ink);font-weight:600}
.hero-ctas{
  display:flex;
  justify-content:flex-end;
  gap:0.875rem;
  flex-wrap:wrap;
  align-self:end;
}
.hero-ctas .btn-solid{
  position:relative;overflow:hidden;padding:1.5rem 2.75rem;font-size:0.875rem;letter-spacing:.16em;gap:1.125rem;
  box-shadow:0 0 0 1px rgba(237,233,224,.08),0 1.125rem 2.5rem -1.375rem rgba(0,0,0,.7);
  transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease);
}
.hero-ctas .btn-solid .ic{font-size:1.1875rem;transition:transform .55s var(--ease)}
.hero-ctas .btn-solid::before{
  content:"";position:absolute;top:50%;left:-75%;width:42%;height:240%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateY(-50%) rotate(-18deg);transition:left .8s var(--ease);pointer-events:none;z-index:1;
}
.hero-ctas .btn-solid span,.hero-ctas .btn-solid .ic{position:relative;z-index:2}
.hero-ctas .btn-solid:hover{
  transform:translateY(-0.1875rem) scale(1.035);
  box-shadow:0 0 0 1px rgba(255,77,0,.42),0 1.625rem 3.75rem -1.375rem rgba(255,77,0,.55);
}
.hero-ctas .btn-solid:hover::before{left:135%}
.hero-ctas .btn-solid:hover .ic{transform:translate(0.3125rem,-0.3125rem)}

[data-marq]{display:flex;overflow:hidden;min-height:3.125rem;position:relative;z-index:1}
.mq-track{display:flex;align-items:center;flex-shrink:0;animation:mq var(--mq-d,26s) linear infinite;animation-direction:var(--mq-rev,normal)}
@keyframes mq{to{transform:translateX(-100%)}}
.band{background:var(--accent);color:#14130F;border-block:1px solid #14130F;padding-block:clamp(0.5625rem,1.3vw,0.875rem)}
.band:hover .mq-track{animation-play-state:paused}
.mq-i{display:flex;align-items:center;gap:clamp(0.875rem,2.2vw,1.875rem);padding-right:clamp(0.875rem,2.2vw,1.875rem);white-space:nowrap;
  font-weight:900;font-stretch:120%;text-transform:uppercase;font-size:clamp(1.5rem,3.6vw,3.3rem);line-height:1}
.mq-i .arc{width:.5em;height:.5em;flex:none}
.ticker{border-block:1px solid var(--line);padding-block:1.125rem;color:var(--muted);position:relative;z-index:1}
.tk-i{font-family:'IBM Plex Mono';font-size:0.6875rem;letter-spacing:.2em;text-transform:uppercase;padding-inline:clamp(1.125rem,2vw,1.875rem);white-space:nowrap}
.tk-i.lead{color:var(--ink)}
.tk-dot{width:0.375rem;height:0.375rem;background:var(--accent);flex:none;border-radius:50% 50% 0 0}

.sec{padding-block:clamp(5.625rem,14vh,10rem);position:relative;z-index:1}
.sec-row{display:flex;align-items:center;gap:1.5rem;margin-bottom:clamp(2.25rem,6vh,4rem)}
.sec-label{color:var(--muted);flex:none;font-size:0.875rem;letter-spacing:.14em}
.sec-rule{flex:1;height:1px;background:var(--line);position:relative}
.sec-rule::after{content:"";position:absolute;right:0;top:50%;translate:0 -50%;width:0.5rem;height:0.5rem;
  background:radial-gradient(circle at 50% 50%, var(--accent) 0 40%, transparent 45%);border-radius:50%;}
.sec-title{font-weight:900;font-stretch:118%;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;
  font-size:clamp(2.3rem,7.2vw,7rem)}
.sec-title .it-acc{font-style:italic;color:var(--accent)}
.sec-title .lm{white-space:nowrap}

/* about */
.about-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:end}
.about-statement{font-size:clamp(1.5rem,2.8vw,2.65rem);font-weight:640;font-stretch:104%;line-height:1.14;letter-spacing:-.01em;max-width:20ch}
.about-statement .it-acc{font-style:italic;color:var(--accent)}
.about-statement .lm{white-space:nowrap}
.about-lead{color:var(--muted);font-size:clamp(.98rem,1.35vw,1.15rem);line-height:1.7;max-width:44ch;padding-bottom:.4em}
/* tight hand-off between the about intro and the stat cards: the generic .sec padding
   stacked on both sides of this seam reads as a void on the page */
#about{padding-bottom:clamp(2.25rem,5vh,3.75rem)}
#about-stats{padding-top:clamp(2.25rem,5vh,3.75rem)}

/* ============================================================
   ABOUT STAT CARDS
   ============================================================ */
.about-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2vw,1.75rem);
  margin-top:clamp(3.75rem,10vh,7.5rem);
  align-items:start;
}
.stat-card{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:1rem;
  padding:clamp(1.5rem,2.4vw,2.25rem);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:linear-gradient(135deg,#1c1a15,#292620 60%,#1a1814);
  transition:border-color .4s var(--ease),transform .5s var(--ease);
}
.stat-card:hover{border-color:rgba(237,233,224,.32);transform:translateY(-0.375rem)}
.stat-card img.stat-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.82) contrast(1.05) brightness(.72);
  transition:transform .8s var(--ease);
}
.stat-card:hover img.stat-bg{transform:scale(1.04)}
.stat-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top, rgba(16,15,13,.88) 0%, rgba(16,15,13,.42) 48%, rgba(16,15,13,.06) 82%, transparent 100%),
    radial-gradient(120% 80% at 20% 0%, rgba(255,77,0,.05) 0%, transparent 55%);
}
.stat-main{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:0.625rem;
  margin-bottom:clamp(1.5rem,3.5vw,3rem);
}
.stat-num{
  font-weight:900;
  font-stretch:118%;
  font-size:clamp(2.4rem,4.6vw,4rem);
  line-height:1;
  letter-spacing:-.025em;
  color:#fff;
  white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.stat-num--text{
  font-size:clamp(1.5rem,2.7vw,2.35rem);
  white-space:normal;
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.stat-title{
  font-weight:700;
  font-stretch:108%;
  font-size:clamp(0.95rem,1.3vw,1.2rem);
  line-height:1.22;
  color:#fff;
  letter-spacing:-.005em;
  max-width:18ch;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.stat-title--sub{font-weight:600}
.stat-desc{
  position:relative;
  z-index:2;
  font-size:clamp(0.72rem,0.85vw,0.85rem);
  color:rgba(237,233,224,.68);
  line-height:1.5;
  max-width:28ch;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
@media(min-width:861px){
  .stat-card:nth-child(2){margin-top:clamp(1.875rem,4.5vw,4.5rem)}
  .stat-card:nth-child(3){margin-top:clamp(3.75rem,8vw,8.125rem)}
  .stat-card:nth-child(4){margin-top:clamp(1.875rem,4.5vw,4.5rem)}
}

/* ============================================================
   FOUNDER
   ============================================================ */
.founder{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  padding-top:clamp(2.5rem, 5vh, 4rem);
  padding-bottom:clamp(6rem, 12vh, 9rem);
  background:var(--bg);
}
.founder::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(80%, 64rem);
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,77,0,0.8) 15%, rgba(255,77,0,0.8) 85%, transparent 100%);
  z-index:10;
  pointer-events:none;
}
.founder-bg{
  position:absolute; inset:0;
  z-index:0;
  background-image:url("../../assets/images/founder_bg.png");
  background-position:var(--founder-bg-x) var(--founder-bg-y);
  background-size:var(--founder-bg-scale) auto;
  background-repeat:no-repeat;
  opacity:var(--founder-bg-opacity);
  filter:blur(var(--founder-bg-blur));
}
.founder-shade{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(16,15,13,.88) 0%,
      rgba(16,15,13,.72) 28%,
      rgba(16,15,13,.48) 55%,
      rgba(16,15,13,.82) 100%),
    linear-gradient(180deg,
      rgba(16,15,13,.55) 0%,
      rgba(16,15,13,0) 30%,
      rgba(16,15,13,0) 70%,
      rgba(16,15,13,.65) 100%);
}
.founder-inner{
  position:relative;
  z-index:2;
  max-width:100rem;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 4rem);
  min-height:calc(100vh  - clamp(12rem, 24vh, 18rem));
  min-height:calc(100svh - clamp(12rem, 24vh, 18rem));
  display:grid;
  grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap:clamp(2rem, 6vw, 8rem);
  align-items:center;
}
/* ---------- FOUNDER PHOTO (wrapper: no transform) ---------- */
.founder-photo{
  position:relative;
  width:100%;
  max-width:38rem;
  justify-self:center;
  align-self:center;
}
/* ---------- FOUNDER IMAGE (owns the transform) ---------- */
.founder-photo img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 1.5rem 3rem rgba(0,0,0,.65));
  transform: translate(var(--founder-x), calc(var(--founder-y) + var(--founder-bottom))) scale(var(--founder-scale));
  transform-origin:50% 100%;
}
/* ---------- ORANGE ACCENT LINE (compensates for img translateY) ---------- */
.founder-photo::after{
  content:"";
  position:absolute;
  left:-100vw;
  right:-1.5rem;
  bottom: calc(-1 * (var(--founder-y) + var(--founder-bottom)));
  height:2px;
  background:var(--accent);
  pointer-events:none;
  z-index:3;
}
.founder-body{
  position:relative;
  max-width:var(--text-max-w);
  padding-block:var(--text-pad-y);
  padding-inline:var(--text-pad-x);
}
.founder-body::before{
  content:"";
  position:absolute;
  left:calc(var(--text-pad-x) - 1.625rem);
  top:var(--text-pad-y);
  bottom:var(--text-pad-y);
  width:1px;
  background:linear-gradient(to bottom,var(--accent),rgba(255,77,0,.08));
}
.founder-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-weight:500;
  font-size:0.75rem;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(237,233,224,.72);
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-bottom:1.125rem;
}
.founder-eyebrow::before{
  content:"";
  width:1.625rem;
  height:1px;
  background:var(--accent);
  flex:none;
}
.founder-copy{
  font-family:'Archivo',sans-serif;
  font-size:clamp(1rem, 1.2vw, 1.6rem);
  line-height:1.68;
  letter-spacing:-.012em;
  font-weight:500;
  max-width:42ch;
  color:rgba(237,233,224,.62);
  overflow-wrap:break-word;
}
.founder-copy p{margin:0 0 1rem}
.founder-copy p:last-child{margin-bottom:0}
.founder-copy strong{font-weight:700;color:#fff;}
.founder-copy p.is-final{
  margin-top:1.5rem;
  font-size:clamp(1.1rem, 1.5vw, 1.9rem);
  line-height:1.42;
  font-weight:700;
  letter-spacing:-.018em;
  color:#fff;
}
.founder-sig{
  margin-top:1.75rem;
  padding-top:0.875rem;
  border-top:1px solid rgba(237,233,224,.18);
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:1rem;
  row-gap:0.25rem;
  max-width:28.75rem;
}
.founder-sig .sig-name{
  grid-row:1/4;
  font-family:'Archivo',sans-serif;
  font-size:1.125rem;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--ink);
}
.founder-sig .sig-role,
.founder-sig .sig-co{
  font-family:'IBM Plex Mono',monospace;
  font-weight:500;
  font-size:0.5625rem;
  line-height:1.25;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(237,233,224,.72);
}
.founder-sig .sig-co{color:#fff}
@media(max-width:860px){
  .founder-inner{
    grid-template-columns:1fr;
    gap:clamp(1.5rem,4vw,2.5rem);
    align-items:center;
    padding-bottom:2rem;
    min-height:auto;
  }
  .founder-photo{max-width:22rem;margin-top:auto}
  .founder-photo::after{right:-1rem}
  .founder-body{padding-inline:0}
  .founder-body::before{display:none}
}

/* ============================================================
   DRUM — services
   ============================================================ */
.drum-section{
  --drum-card-w:20rem;--drum-card-h:27.5rem;--drum-radius-c:1.625rem;
  --drum-r:32.5rem;--drum-persp:118.75rem;--drum-floor-y:14.0625rem;
  position:relative;background:var(--bg);border-bottom:1px solid var(--line);z-index:1;
}
.drum-head{padding-block:clamp(5.625rem,14vh,10rem) clamp(1.25rem,3vh,2.5rem)}
.drum-lede{
  margin-top:clamp(2.25rem,5.5vh,3.75rem);max-width:62ch;position:relative;
  padding-left:clamp(1.125rem,2.2vw,1.875rem);
  display:flex;flex-direction:column;gap:clamp(1rem,2.4vh,1.5rem);
}
.drum-lede::before{
  content:"";position:absolute;left:0;top:0.25rem;bottom:0.25rem;width:0.125rem;border-radius:0.125rem;
  background:linear-gradient(to bottom,var(--accent) 0%,var(--accent) 22%,rgba(255,77,0,0.3) 55%,rgba(237,233,224,0.08) 100%);
}
.drum-lede-hi{display:block;font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:700;font-stretch:105%;color:var(--accent);line-height:1.3;letter-spacing:-0.012em;max-width:32ch}
.drum-lede-body{display:block;color:var(--muted);font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.75;max-width:46ch;font-weight:400}
@media(max-width:720px){
  .drum-lede{padding-left:1rem;gap:0.875rem}
  .drum-lede-hi{font-size:1.05rem;max-width:100%}
  .drum-lede-body{font-size:.95rem;max-width:100%}
}
.drum-pin{position:relative;height:480vh;background:#050507}   /* same colour the stage fades to, so a sliver of it under the sticky stage (Android URL bar) is invisible */
.drum-sticky{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(255,77,0,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 50%, #14131a 0%, #0a0a0e 60%, #050507 100%);
  isolation:isolate;
}
.drum-sticky::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse 58% 72% at 50% 52%,transparent 22%,rgba(5,5,7,0.32) 52%,rgba(5,5,7,0.82) 92%);
}
.drum-scaler{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:center center}
.drum-stage{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  perspective:var(--drum-persp);perspective-origin:50% 42%;
  cursor:grab;touch-action:pan-y;
}
.drum-stage.is-dragging{cursor:grabbing}
.drum-scene{position:relative;width:var(--drum-card-w);height:var(--drum-card-h);transform-style:preserve-3d;transform:translate3d(0,-1.875rem,0)}
.drum{position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(0,0,calc(-1 * var(--drum-r)));will-change:transform}
.drum-card{
  position:absolute;inset:0;width:var(--drum-card-w);height:var(--drum-card-h);
  border-radius:var(--drum-radius-c);overflow:hidden;backface-visibility:hidden;
  transform:translate3d(0,0,0) rotateY(var(--ry,0deg)) translate3d(0,0,var(--tz,32.5rem));
  background:
    radial-gradient(140% 90% at 18% 0%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 42%, transparent 72%),
    radial-gradient(90% 70% at 92% 100%, rgba(255,77,0,0.07) 0%, transparent 62%),
    linear-gradient(165deg, rgba(255,255,255,0.05) 0%, transparent 28%, transparent 70%, rgba(255,255,255,0.035) 100%),
    linear-gradient(180deg, #1d1d24 0%, #16161c 48%, #101015 100%);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.55),0 1.375rem 3.75rem -1.375rem rgba(0,0,0,0.9),0 0.375rem 1.375rem -0.5rem rgba(0,0,0,0.7);
  transition:border-color .5s ease, box-shadow .5s ease;
}
.drum-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0.10;z-index:3;   /* no mix-blend-mode: blending forces an offscreen paint pass per card per repaint — the single costliest op in the scene; plain low-opacity grain reads nearly the same */
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="180" height="180" filter="url(%23g)" opacity="0.55"/></svg>');
}
.drum-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  background:linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 13%),linear-gradient(0deg, rgba(255,255,255,0.06) 0%, transparent 9%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.055);
}
.drum-card.is-active{
  border-color:rgba(255,77,0,0.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(0,0,0,0.55),inset 0 0 3.4375rem rgba(255,77,0,0.07),0 2.125rem 5.625rem -1.375rem rgba(0,0,0,0.98),0 0 3.4375rem -0.625rem rgba(255,77,0,0.45);
}
.drum-card-media{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:inherit}
/* (the grayscale / contrast / brightness look is baked into assets/images/drum/*.webp, so no per-image CSS filter) */
.drum-card-media img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;pointer-events:none}
.drum-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(12,12,16,0.62) 0%, rgba(12,12,16,0.25) 42%, rgba(12,12,16,0.92) 100%)}
.drum-card-body{position:absolute;inset:0;padding:1.75rem 1.625rem;display:flex;flex-direction:column;justify-content:flex-end;gap:0.625rem;z-index:2;color:var(--ink);pointer-events:none}
.drum-card-name{font-weight:900;font-stretch:116%;text-transform:uppercase;font-size:1.625rem;line-height:0.98;letter-spacing:-0.02em;color:#fff}
.drum-card-blurb{font-size:0.8125rem;line-height:1.5;color:rgba(237,233,224,0.72);max-width:30ch}
.drum-card-tags{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.375rem}
.drum-card-tag{font-family:'IBM Plex Mono',monospace;font-size:0.5625rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.25rem 0.5rem;border:1px solid rgba(255,255,255,0.12);border-radius:999px;color:rgba(237,233,224,0.72);background:rgba(255,255,255,0.02)}
.drum-floor{position:absolute;left:50%;top:50%;width:312.5rem;height:312.5rem;margin-left:-156.25rem;margin-top:-156.25rem;transform:translate3d(0,var(--drum-floor-y),0) rotateX(90deg);transform-origin:center;pointer-events:none;z-index:-1;background:radial-gradient(circle at 50% 50%, rgba(255,77,0,0.05) 0%, rgba(255,255,255,0.02) 12%, transparent 32%),radial-gradient(circle at 50% 50%, rgba(28,28,36,0.9) 0%, rgba(16,16,22,0.7) 20%, rgba(8,8,12,0.35) 45%, transparent 72%)}
.drum-floor-seam{position:absolute;left:50%;top:50%;width:56.25rem;height:5.625rem;margin-left:-28.125rem;margin-top:-2.8125rem;transform:translate3d(0,var(--drum-floor-y),0) rotateX(90deg);transform-origin:center;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.32) 42%, transparent 74%);filter:blur(0.875rem)}
.drum-shadow{position:absolute;left:50%;top:50%;width:51.25rem;height:12.5rem;margin-left:-25.625rem;margin-top:-6.25rem;transform:translate3d(0,var(--drum-floor-y),0) rotateX(90deg);transform-origin:center;pointer-events:none;z-index:-2;background:radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 36%, transparent 70%);filter:blur(1.375rem)}
.drum-reflection{position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(0,calc(var(--drum-floor-y) * 2),0) scaleY(-1);transform-origin:center center;pointer-events:none}
.drum-reflection .drum-card{-webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);mask-image:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);filter:brightness(0.55) saturate(0.55)}
.drum-reflection .drum-card.is-active{border-color:rgba(255,255,255,0.10);box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -1px 0 rgba(0,0,0,0.5),0 1.25rem 3.75rem -1.375rem rgba(0,0,0,0.9)}
.drum-arc{position:absolute;bottom:2.375rem;right:2.625rem;width:4.875rem;height:4.875rem;z-index:20;pointer-events:none}
.drum-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.drum-arc .halo{fill:none;stroke:rgba(255,77,0,0.10);stroke-width:0.6}
.drum-arc .track{fill:none;stroke:rgba(237,233,224,0.10);stroke-width:1.2;stroke-linecap:round}
.drum-arc .fill{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:201.06;stroke-dashoffset:201.06;transform:rotate(-90deg);transform-origin:38px 38px;transition:stroke-dashoffset .85s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 5px rgba(255,77,0,0.55))}
.drum-arc .lead{fill:var(--accent);transform-origin:38px 38px;transform:rotate(0deg);transition:transform .85s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 6px rgba(255,77,0,0.85))}
.drum-arc .core{position:absolute;inset:0;display:grid;place-items:center}
.drum-arc .core-inner{width:2rem;height:2rem;border-radius:50%;border:1px solid rgba(237,233,224,0.12);background:rgba(20,19,22,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s}
.drum-arc .core-dot{width:0.3125rem;height:0.3125rem;border-radius:50%;background:var(--ink);transition:background .5s,transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.drum-arc.is-changed .core-inner{transform:scale(1.08);border-color:rgba(255,77,0,0.35)}
.drum-arc.is-changed .core-dot{background:var(--accent);transform:scale(1.35);box-shadow:0 0 10px rgba(255,77,0,0.65)}
.drum-hint{position:absolute;bottom:2.375rem;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:0.875rem;font-family:'IBM Plex Mono',monospace;font-size:0.625rem;letter-spacing:0.24em;text-transform:uppercase;color:rgba(237,233,224,0.55);pointer-events:none;white-space:nowrap;transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.drum-hint::before,.drum-hint::after{content:"";width:2rem;height:1px;background:rgba(237,233,224,0.22)}
.drum-hint .k{color:rgba(237,233,224,0.85);font-weight:500}
.drum-hint .dot{width:0.25rem;height:0.25rem;border-radius:50%;background:var(--accent);opacity:0.7;box-shadow:0 0 6px rgba(255,77,0,0.5)}
.drum-hint .arrows{display:inline-flex;gap:0.25rem;color:rgba(237,233,224,0.55)}
.drum-hint .arrows span{display:inline-block;min-width:0.625rem;text-align:center;animation:hintArrow 2.8s ease-in-out infinite}
.drum-hint .arrows span:last-child{animation-delay:.15s}
@keyframes hintArrow{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:1;transform:translateX(0.125rem)}}
.drum-hint.is-faded{opacity:0;transform:translateX(-50%) translateY(0.625rem)}
@media(max-width:720px){
  .drum-section{--drum-card-w:16.5rem;--drum-card-h:22.6875rem;--drum-radius-c:1.4rem;--drum-r:27rem;--drum-persp:84.375rem;--drum-floor-y:11.65625rem}
  .drum-card-name{font-size:1.35rem}
  .drum-card-blurb{font-size:0.75rem}
  .drum-card-body{padding:1.375rem 1.25rem}
  .drum-arc{bottom:1.75rem;right:1.5rem;width:4rem;height:4rem}
  .drum-hint{bottom:1.875rem;gap:0.625rem;font-size:0.5625rem;letter-spacing:0.2em}
  .drum-hint::before,.drum-hint::after{width:1.125rem}
}

/* ---- LIGHT tier: phones, tablets, anything touch ---------------------------------------------------
   The 5000px floor plane, floor seam and big blurred shadow planes stay OFF on touch (Android
   graphics budgets tore the scene apart). Everything that makes the stage READ as the designed
   drum is back: the mirrored reflection (JS mirrors .is-away into it, so only front-facing
   cards paint — a fraction of the original layer count) and the full card gloss / noise / shadow
   treatment, so cards no longer look pale and flat. The cheap .drum-ground gradient glow
   stands in for the floor plane. */
.drum-ground{display:none}
@media (max-width:720px), (pointer:coarse){
  .drum-ground{
    display:block;position:absolute;left:50%;top:calc(50% + var(--drum-floor-y) - 1.875rem);
    width:62rem;height:20rem;transform:translate(-50%,-50%);pointer-events:none;
    background:
      radial-gradient(ellipse 34% 30% at 50% 50%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.42) 55%, transparent 100%),
      radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,77,0,0.05) 0%, rgba(28,28,36,0.6) 28%, rgba(8,8,12,0.3) 55%, transparent 100%);
  }
  .drum-floor,.drum-shadow,.drum-floor-seam{display:none}
  .drum-card.is-away{visibility:hidden}
  /* motion diet: only the *invisible* optimization remains — freeze card shadow/border
     transitions while the wheel spins (static painted shadows cost nothing per frame; the
     0.5s ANIMATED shadows were the repaint killer). The reflection + grain stay visible
     permanently now: removing the blend-mode grain eliminated the reason they ever existed. */
  .drum-stage.is-motion .drum-card{transition:none}
  .drum-arc .core-inner{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,19,22,0.8)}
}

/* ---- Device-thin tier -------------------------------------------------------------------------------
   Media queries can't see how much RAM a phone has, so JS adds bob-drum-thin only on genuinely
   memory-poor Androids (navigator.deviceMemory < 4). iPhone (no deviceMemory) and capable Androids
   keep the full design; weak handsets fall back to the old LIGHT card package. */
html.bob-drum-thin .drum-reflection{display:none}
html.bob-drum-thin .drum-card{background:linear-gradient(180deg,#1d1d24 0%,#101015 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -1px 0 rgba(0,0,0,0.55)}
html.bob-drum-thin .drum-card::before{display:none}
html.bob-drum-thin .drum-card.is-active{box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(0,0,0,0.55),inset 0 0 3.4375rem rgba(255,77,0,0.14)}

/* WORK */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(1.25rem,3.4vw,3.5rem);row-gap:clamp(2.5rem,6vw,5.625rem);margin-top:clamp(1.75rem,5vh,3.5rem)}
.tile{position:relative;display:block;text-align:left}
.tile .media{aspect-ratio:4/3;border-radius:0.25rem}
.tile .media img{top:-6%;height:112%}
.tile:hover .media img{scale:1.06}
.tile-2,.tile-4{margin-top:clamp(2.5rem,7vw,6.875rem)}
.tile-contain .media{background:#F3F1EC}
.tile-contain .media img{object-fit:contain;top:0;height:100%;scale:1}
.tile-contain:hover .media img{scale:1.015}
.tile-arr{position:absolute;top:1rem;right:1rem;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--accent);color:#14130F;display:grid;place-items:center;transform:scale(0);transition:transform .5s var(--ease);z-index:3}
.tile-arr .ic{width:1.25rem;height:1.25rem}
.tile:hover .tile-arr{transform:scale(1)}
.tile-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1rem}
.tile-meta h3{font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,2.1rem);letter-spacing:-.01em}
.tile-meta .mono{color:var(--muted);text-align:right}
.media{position:relative;overflow:hidden;background:linear-gradient(135deg,#1c1a15 0%,#292620 50%,#1a1814 100%)}
.media img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;scale:1.001;transition:scale .8s var(--ease);will-change:transform;z-index:1}
@media(max-width:860px){.work-grid{grid-template-columns:1fr;row-gap:clamp(2.5rem,9vw,4.375rem)}.tile-2,.tile-4{margin-top:0}}

/* process */
.proc-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,5.625rem)}
.proc-sticky{position:sticky;top:7.5rem;align-self:start}
.proc-note{margin-top:1.375rem;color:var(--muted);max-width:34ch}
.proc-list{min-height:12.5rem}
.proc{display:grid;grid-template-columns:auto 1fr;gap:1.375rem;border-top:1px solid var(--line);padding-block:clamp(1.625rem,4vh,2.375rem);position:relative}
.proc:last-child{border-bottom:1px solid var(--line)}
.proc-num{color:var(--accent);position:relative;display:flex;align-items:flex-start;gap:0.5rem}
.proc-num::before{content:"";width:0.625rem;height:0.625rem;flex:none;margin-top:0.125rem;background:conic-gradient(from 0deg at 50% 50%, var(--accent) 0 25%, transparent 25% 100%);border-radius:50%;transition:transform .5s var(--ease)}
.proc:hover .proc-num::before{transform:rotate(90deg)}
.proc h3{font-weight:800;font-stretch:110%;text-transform:uppercase;font-size:clamp(1.35rem,2.2vw,1.9rem);letter-spacing:-.01em;margin-bottom:0.625rem}
.proc p{color:var(--muted);max-width:44ch}
.proc p b{display:block;color:var(--ink);font-weight:600;margin-bottom:0.25rem}

/* ============================================================
   VOICES — featured quote + sidebar list + autoplay
   ============================================================ */
#voices{
  padding-top: var(--v-pad-top);
  padding-bottom: var(--v-pad-bottom);
  position:relative;
}
#voices .sec-row{
  margin-bottom: var(--v-rule-gap);
  max-width: var(--v-grid-max);
  margin-inline:auto;
}

.voices-grid{
  display:grid;
  grid-template-columns: var(--v-cols);
  gap: var(--v-gap);
  align-items:start;
  max-width: var(--v-grid-max);
  margin-inline:auto;
  margin-bottom: var(--v-grid-mb);
}
.voices-featured{position:relative;min-width:0}

.voices-featured .quote-mark{
  display:block;
  font-family:'Archivo',sans-serif;
  font-style:normal;font-weight:900;
  font-size: var(--v-mark-size);
  line-height:.32;height:.42em;
  color:var(--accent);opacity:.85;
  text-indent:-.06em;
  margin-bottom: var(--v-mark-mb);
  transform: translate(-1rem, -0.125rem);
  transition: transform .3s var(--ease);
}

.voices-quote{
  font-family:'Archivo',sans-serif;
  font-weight:520;font-stretch:103%;
  font-size: var(--v-quote-size);
  line-height:1.28;
  letter-spacing:-.022em;
  max-width: var(--v-quote-ch);
  color:var(--ink);
  overflow-wrap:break-word;
  transform: translate(2.875rem, -1.125rem);
  transition: transform .3s var(--ease);
}

.voices-attr{
  display:flex;align-items:center;gap:1rem;
  margin-top: var(--v-attr-mt);
  font-style:normal;
  transform: translate(-1.75rem, -1.375rem);
  transition: transform .3s var(--ease);
}
.voices-attr::before{
  content:"";width:2.5rem;height:1px;
  background:var(--accent);flex:none;
}
.voices-attr b{
  font-family:'Archivo',sans-serif;
  font-weight:700;font-stretch:110%;
  font-size:clamp(0.9375rem,1.1vw,1.0625rem);
  letter-spacing:-.005em;
  color:var(--ink);text-transform:uppercase;
}
.voices-attr span{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}

.voices-side{
  border-left:1px solid var(--line);
  padding-left: var(--v-side-pl);
  display:flex;flex-direction:column;
}
.voices-side-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom: var(--v-label-mb);
  display:flex;align-items:center;gap:.5rem;
}
.voices-side-label::before{
  content:"";width:.375rem;height:.375rem;
  border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 6px rgba(255,77,0,.6);
  animation:voicePulse 2.4s ease-in-out infinite;
}
@keyframes voicePulse{
  0%,100%{opacity:.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.2)}
}

.voice-progress{
  height:2px;width:100%;
  background:rgba(237,233,224,.06);
  border-radius:2px;
  overflow:hidden;
  margin-bottom:1rem;
  position:relative;
}
.voice-progress span{
  display:block;height:100%;width:100%;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  box-shadow:0 0 6px rgba(255,77,0,.5);
}
@keyframes voiceProg{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

.voices-list{display:flex;flex-direction:column}
.voice-item{
  display:flex;align-items:flex-start;gap:1rem;
  padding: var(--v-side-item-py) 0;
  border-bottom:1px solid var(--line);
  text-align:left;width:100%;position:relative;
  transition:color .3s var(--ease);
}
.voice-item:first-child{padding-top:0}
.voice-item:last-child{border-bottom:0}
.voice-item::before{
  content:"";position:absolute;
  left: calc(-1 * var(--v-side-pl));
  top:50%;width:0;height:1px;
  background:var(--accent);transform:translateY(-50%);
  transition:width .35s var(--ease);
}
.voice-item.is-active::before{width:1.5rem}
.voice-item.is-active .voice-name{color:var(--accent)}
.voice-item.is-active .voice-ix{color:var(--accent)}
.voice-item:hover .voice-name{color:var(--accent)}
.voice-item:hover::before{width:1rem}
.voice-ix{
  font-family:'IBM Plex Mono',monospace;
  font-size:var(--v-role-size);letter-spacing:.14em;
  color:var(--muted);flex:none;
  padding-top:.25rem;
  transition:color .3s var(--ease);
}
.voice-meta{display:block;min-width:0}
.voice-name{
  display:block;
  font-family:'Archivo',sans-serif;
  font-weight:700;font-stretch:108%;
  font-size: var(--v-name-size);
  letter-spacing:-.005em;line-height:1.2;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.voice-role{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size: var(--v-role-size);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
  margin-top:.3125rem;
}

@media(max-width:860px){
  .voices-grid{
    grid-template-columns:1fr;
    gap:2.5rem;
    max-width:100%;
    margin-bottom:0;
  }
  .voices-quote{max-width:100%}
  .voices-side{
    border-left:0;border-top:1px solid var(--line);
    padding-left:0;padding-top:1.5rem;
  }
  .voice-item::before{display:none}
  .voices-featured .quote-mark,
  .voices-quote,
  .voices-attr{transform:none}
}

/* ============================================================
   CTA
   ============================================================ */
.cta{position:relative;padding-block:clamp(4.5rem,9vh,7rem);z-index:1}
.cta .sec-row{margin-bottom:clamp(2.25rem,5.5vh,3.75rem)}
.cta-title{font-weight:900;font-stretch:116%;text-transform:uppercase;line-height:0.94;letter-spacing:-.02em;font-size:clamp(1.6rem,8vw,8rem)}
.cta-title .lm{white-space:nowrap}
.cta-title .hl-l{display:inline-block;transition:font-stretch .5s var(--ease),color .25s ease}
.cta-title .hl-l:hover{font-stretch:78%;color:var(--accent)}
.cta-title .it-acc{font-style:italic;color:var(--accent)}
.cta-title .it-acc .hl-l:hover{font-stretch:78%;color:var(--accent)}
.cta-note{
  margin-top:clamp(1.5rem,3.5vh,2.5rem);
  max-width:min(58ch,78%);
  padding-left:clamp(1.375rem,2.6vw,2.25rem);position:relative;
  display:flex;flex-direction:column;gap:clamp(0.25rem,.8vh,0.625rem);
  font-family:'Archivo',sans-serif;font-weight:600;font-stretch:104%;
  font-size:clamp(1.05rem,1.45vw,1.4rem);letter-spacing:-0.012em;
  text-transform:uppercase;line-height:1.18;color:var(--ink);
}
.cta-note::before{content:"";position:absolute;left:0;top:.4em;bottom:.4em;width:0.125rem;border-radius:0.125rem;background:linear-gradient(to bottom,var(--accent) 0%,var(--accent) 55%,rgba(255,77,0,0.12) 100%)}
.cta-note span{display:block}
.cta-note span:first-child{color:var(--ink)}
.cta-note span:last-child{color:var(--muted);font-weight:500;font-stretch:100%}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-wrap{position:relative}
.footer{
  position:relative;
  border-top:1px solid var(--line);
  padding-top:clamp(2.25rem,4vw,3.25rem);
  margin-top:clamp(3.5rem,7vh,5.5rem);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr .9fr;
  gap:clamp(1.5rem,3vw,3.5rem);
  align-items:start;
}
.fg-col{min-width:0}
.fg-l{display:block;color:var(--muted);margin-bottom:1rem}

/* ---- footer talk rows + copy buttons ---- */
.fg-talk-row{
  display:flex;
  align-items:center;
  gap:0.75rem;
  min-width:0;
  padding-block:0.1875rem;
  width:fit-content;
}
.fg-talk-row a{
  min-width:0;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  font-stretch:110%;
  font-size:clamp(1.05rem,1.5vw,1.45rem);
  line-height:1.3;
  transition:color .3s var(--ease);
}
.fg-talk-row a:hover{color:var(--accent)}

.fg-talk .copy-btn{
  width:1.875rem;
  height:1.875rem;
}
.fg-talk .copy-btn .ic{
  width:0.8125rem;
  height:0.8125rem;
}

.fg-ad{color:var(--muted);font-size:.95rem;line-height:1.65;margin-bottom:0.75rem;max-width:38ch}
.fg-ad:last-of-type{margin-bottom:0}
/* ---- sitemap: a numbered index. One hairline per row, big tap targets, same numbering as the menu.
   (The first row deliberately has no rule above it: on desktop the Start-a-project orb hangs just
   above this column, and a hairline running under its dashed ring looked messy.) */
.sitemap-list{display:grid;grid-template-columns:minmax(0,1fr)}
.sitemap-list li{border-bottom:1px solid var(--line)}
.sitemap-list a{
  display:flex;align-items:center;gap:0.95rem;
  min-height:2.75rem;padding:0.55rem 0.125rem;
  color:var(--ink);
  transition:color .3s var(--ease), padding-left .4s var(--ease);
}
.sm-n{flex:none;min-width:1.35rem;color:var(--muted);font-size:max(10px,0.625rem);letter-spacing:.14em;transition:color .3s var(--ease)}
.sm-t{min-width:0;font-weight:700;font-stretch:108%;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.2;letter-spacing:-.005em}
.sm-a{
  margin-left:auto;flex:none;width:0.95rem;height:0.95rem;color:var(--accent);
  opacity:0;transform:translate(-0.4rem,0.4rem);
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.sitemap-list a:hover,.sitemap-list a:focus-visible{color:var(--accent);padding-left:0.5rem}
.sitemap-list a:hover .sm-n,.sitemap-list a:focus-visible .sm-n{color:var(--accent)}
.sitemap-list a:hover .sm-a,.sitemap-list a:focus-visible .sm-a{opacity:1;transform:none}
@media(hover:none){
  .sm-a{opacity:.55;transform:none}   /* touch has no hover, so the arrow is simply always there */
  .sitemap-list a:hover{padding-left:0.125rem}
}

.socials{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem;margin-top:1.25rem;line-height:0}
.socials li{display:block;line-height:0;margin:0;vertical-align:top}
.socials a{
  width:2.75rem;height:2.75rem;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;color:var(--ink);line-height:0;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.socials a:hover{background:var(--accent);color:#14130F;border-color:var(--accent)}
.socials a .ic{width:1.25rem;height:1.25rem;display:block;vertical-align:0;margin:0;padding:0}
.socials a[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.socials a[aria-disabled="true"]:hover{background:transparent;color:var(--ink);border-color:var(--line)}

.orb{
  position:relative;
  width:clamp(8.75rem,14vw,11.25rem);
  aspect-ratio:1;border-radius:50%;
  background:var(--accent);color:#14130F;
  display:grid;place-items:center;flex:none;
  transition:transform .4s var(--ease);
}
.orb-ring{position:absolute;inset:-0.875rem;border:1px dashed rgba(255,77,0,.55);border-radius:50%;animation:spin 16s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.orb-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:0.875rem;line-height:1.05;letter-spacing:.04em;text-align:center}
.orb-in .ic{width:1.625rem;height:1.625rem}
.orb:hover{transform:scale(1.04)}

.footer .orb{
  position:absolute;
  top:0;
  right:calc(clamp(1.25rem,4vw,4rem) + var(--safe-r));
  transform:translateY(-50%);
  z-index:10;
}
.footer .orb:hover{transform:translateY(-50%) scale(1.04)}

/* Tablets & phones: the orb stays ON the footer's top rule, at the right, centred on the line
   (exactly like desktop, just smaller). The base `.footer .orb` rule above does the positioning;
   all this block does is shrink it and give the footer room for the half that hangs below the line.
   (It used to drop into the flow, centred, under the sitemap, which is what looked "out of place".) */
@media(max-width:1024px){
  .footer{
    margin-top:clamp(4.25rem,9vh,5.5rem);      /* room for the half that sits above the line */
    padding-top:clamp(2.875rem,7vw,3.75rem);   /* ...and the half that hangs below it */
  }
  .foot-grid{grid-template-columns:1fr 1fr;gap:2.25rem clamp(1.5rem,4vw,2.5rem)}
  .fg-sitemap{grid-column:1 / -1}
  .sitemap-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,auto);
    grid-auto-flow:column;                     /* 01 02 03 down the first column, 04 05 06 down the second */
    column-gap:clamp(1.5rem,6vw,3.5rem);
  }
  .footer .orb{width:clamp(6.25rem,26vw,8.25rem)}
  .footer .orb-ring{inset:-0.625rem}
  .footer .orb-in{gap:0.35rem;font-size:max(11px,0.75rem)}
  .footer .orb-in .ic{width:1.25rem;height:1.25rem}
}
@media(max-width:640px){
  .foot-grid{grid-template-columns:1fr}
}

.mark{margin-top:clamp(2rem,4vw,3rem);display:flex;justify-content:center;align-items:center}
.mark-title{
  display:block;font-weight:900;font-stretch:118%;text-transform:uppercase;
  line-height:.95;letter-spacing:-.03em;font-size:clamp(1.3rem,5.6vw,6.5rem);
  color:var(--ink);text-align:center;user-select:none;white-space:nowrap;
}
.legal{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  gap:1.125rem;flex-wrap:wrap;
  margin-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line);
  padding-block:1.25rem;
  color:var(--muted);
}
.legal .mono{font-size:0.625rem;text-align:center}
#toTop{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:2.875rem;height:2.875rem;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  line-height:0;
}
#toTop:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#toTop .ic{width:1rem;height:1rem;display:block}

@media(max-width:640px){
  .mark-title{font-size:clamp(1.1rem,6vw,2rem)}
  .socials a{width:2.5rem;height:2.5rem}
  .socials a .ic{width:1.125rem;height:1.125rem}
  #toTop{position:static;transform:none;margin-top:0.75rem}
}

/* ============================================================
   CASE MODAL
   ============================================================ */
.case{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:1.5rem;visibility:hidden}
.case.open{visibility:visible}
.case-back{position:absolute;inset:0;background:rgba(8,7,6,.74);backdrop-filter:blur(6px);opacity:0;transition:opacity .5s}
.case.open .case-back{opacity:1}
.case-panel{
  position:relative;width:min(68.75rem,94vw);max-height:min(94vh,60rem);
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
  background:var(--bg2);border:1px solid var(--line);border-radius:0.5rem;
  opacity:0;transform:translateY(3rem) scale(.985);
  transition:opacity .55s ease,transform .55s var(--ease);
}
.case.open .case-panel{opacity:1;transform:none}
.case-x{
  position:sticky;top:0.875rem;z-index:6;float:right;margin:0.875rem 0.875rem -3.875rem 0;
  width:3rem;height:3rem;border-radius:50%;
  background:rgba(20,19,15,.75);color:var(--ink);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(237,233,224,.15);
  display:grid;place-items:center;
  transition:background .35s,color .35s,border-color .35s,transform .35s;
}
.case-x:hover{background:var(--accent);color:#14130F;border-color:var(--accent);transform:rotate(90deg)}
.case-x .ic{width:1.125rem;height:1.125rem}

/* .case-stage keeps the media's place in the layout; .case-media fills it, and is the element that
   goes fullscreen (so entering/leaving fullscreen never shifts the page behind it). */
.case-stage{
  position:relative;
  height:min(56vh,35rem);
  height:min(56dvh,35rem);
  background:#0f0e0c;
  border-bottom:1px solid var(--line);
}
.case-media{
  position:absolute;inset:0;
  overflow:hidden;
  background:#0f0e0c;
  touch-action:pan-y;            /* vertical swipes still scroll the panel; horizontal ones are ours (drag / swipe) */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.case-slides{
  position:absolute;inset:0;
  display:flex;
  transition:transform .8s cubic-bezier(.65,0,.35,1);
}
.case-media.is-dragging .case-slides{transition:none}   /* the track follows the finger / pointer 1:1 while dragging */
.case-slides.is-fading{transition:opacity .2s ease}      /* long jumps (wrap-around, far dots) cross-fade instead of racing through every slide */
.case-slide{
  flex:0 0 100%;
  width:100%;height:100%;
  overflow:hidden;
  position:relative;
}
.case-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;
}
/* The slow zoom is a pointer-device nicety: on phones it just keeps big layers animating for nothing. */
@media (hover:hover) and (pointer:fine){
  .case-slide img{transform:scale(1.001);transition:transform 8s ease}
  .case-slide.is-active img{transform:scale(1.06)}
  .case-media.is-dragging .case-slide img{transition:none}
}

.case-shade{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(to top, rgba(12,11,9,.72) 0%, rgba(12,11,9,.18) 32%, transparent 60%),
    linear-gradient(to bottom, rgba(12,11,9,.5) 0%, transparent 24%);
}

.case-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:3.25rem;height:3.25rem;border-radius:50%;
  background:rgba(20,19,15,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--ink);
  display:grid;place-items:center;
  border:1px solid rgba(237,233,224,.15);
  transition:background .3s,color .3s,border-color .3s,transform .3s,opacity .3s;
}
.case-nav:hover{background:var(--accent);color:#14130F;border-color:var(--accent);transform:translateY(-50%) scale(1.06)}
.case-nav.prev{left:1.125rem}
.case-nav.next{right:1.125rem}
.case-nav .ic{width:1.25rem;height:1.25rem}

.case-counter{
  position:absolute;top:1.125rem;left:1.125rem;z-index:4;
  padding:0.5rem 0.875rem;border-radius:999px;
  background:rgba(16,15,13,.65);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(237,233,224,.12);
  font-family:'IBM Plex Mono',monospace;font-size:0.6875rem;letter-spacing:.16em;
  color:var(--ink);
}
.case-dots{
  position:absolute;bottom:1.125rem;left:50%;transform:translateX(-50%);
  z-index:4;display:flex;align-items:center;gap:0.5rem;
  padding:0.5rem 0.875rem;border-radius:999px;
  background:rgba(16,15,13,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(237,233,224,.12);
}
.case-dot{
  width:0.375rem;height:0.375rem;border-radius:50%;
  background:rgba(237,233,224,.3);
  border:0;padding:0;
  transition:background .35s var(--ease), width .35s var(--ease);
}
.case-dot:hover{background:rgba(237,233,224,.6)}
.case-dot.is-active{background:var(--accent);width:1.375rem;border-radius:999px}

.case-logo{
  position:absolute;bottom:1.375rem;left:1.375rem;z-index:4;
  height:1.625rem;width:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));
}

/* ---- fullscreen toggle (bottom-right of the picture; top-right once fullscreen) ---- */
.case-fs{
  position:absolute;right:1.125rem;bottom:1.125rem;z-index:5;
  width:2.75rem;height:2.75rem;border-radius:50%;
  background:rgba(20,19,15,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--ink);
  display:grid;place-items:center;
  border:1px solid rgba(237,233,224,.15);
  transition:background .3s,color .3s,border-color .3s,transform .3s,opacity .3s;
}
.case-fs:hover{background:var(--accent);color:#14130F;border-color:var(--accent);transform:scale(1.06)}
.case-fs .ic{width:1.125rem;height:1.125rem}
.case-fs .ic-collapse{display:none}

/* ---- fullscreen viewer ------------------------------------------------------------------------
   JS adds .is-fs to #caseMedia in BOTH modes: the real Fullscreen API where the browser has it
   (Android Chrome, desktop, iPad), and this plain "fixed to the viewport" fallback everywhere else
   (iPhone Safari can't fullscreen an element). Same look either way: the whole slide, uncropped,
   on black, with the controls tucked to the edges. A tap on the picture hides / shows them. */
.case-media.is-fs{
  position:fixed;inset:0;z-index:40;
  width:100vw;height:100vh;height:100dvh;
  background:#000;
  touch-action:none;             /* nothing to scroll in here; keeps the page behind it still */
}
.case-media.is-fs .case-slide{background:#000}
.case-media.is-fs .case-slide img{object-fit:contain;transform:none;transition:none}
.case-media.is-fs .case-shade{
  background:
    linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 22%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, transparent 20%);
}
.case-media.is-fs .case-logo{display:none}
.case-media.is-fs .case-counter{top:max(0.875rem,env(safe-area-inset-top));left:max(0.875rem,var(--safe-l))}
.case-media.is-fs .case-fs{top:max(0.875rem,env(safe-area-inset-top));right:max(0.875rem,var(--safe-r));bottom:auto}
.case-media.is-fs .case-fs .ic-expand{display:none}
.case-media.is-fs .case-fs .ic-collapse{display:block}
.case-media.is-fs .case-nav.prev{left:max(0.875rem,var(--safe-l))}
.case-media.is-fs .case-nav.next{right:max(0.875rem,var(--safe-r))}
.case-media.is-fs .case-dots{bottom:max(0.875rem,var(--safe-b))}
.case-shade,.case-counter,.case-dots{transition:opacity .3s ease}
.case-media.is-fs.ui-off .case-shade,
.case-media.is-fs.ui-off .case-nav,
.case-media.is-fs.ui-off .case-counter,
.case-media.is-fs.ui-off .case-dots,
.case-media.is-fs.ui-off .case-fs{opacity:0;pointer-events:none}
html.case-fs-open,body.case-fs-open{overflow:hidden}

/* Glass blur over a moving picture is costly on phones, and a few of them stack here. Touch devices
   get a slightly more opaque flat fill instead (same look, no extra GPU surfaces). */
@media (pointer:coarse){
  .case-x,.case-nav,.case-counter,.case-dots,.case-fs{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(18,17,14,.8);
  }
}

.case-body{padding:clamp(1.5rem,4vw,3rem)}
.case-top{display:flex;justify-content:space-between;align-items:baseline;gap:1.125rem;flex-wrap:wrap}
.case-title{font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.01em;line-height:1}
.case-meta{color:var(--muted)}
.case-lead{margin-top:1.375rem;font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:600;max-width:52ch}
.case-cols{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2.125rem}
.case-cols h4,.case-dh{color:var(--muted);margin-bottom:0.75rem}
.case-cols p{color:var(--muted);font-size:.98rem;line-height:1.65}
.case-dh{margin-top:2.25rem}
.case-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.625rem;border-top:1px solid var(--line);padding-top:1.625rem}
.cr-n{display:block;font-weight:900;font-stretch:118%;color:var(--accent);font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1}
.cr-l{display:block;margin-top:0.375rem;color:var(--muted);font-size:0.625rem}
.case-body .btn{margin-top:2.5rem}
.chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.chips li{font-family:'IBM Plex Mono';font-size:0.625rem;letter-spacing:.1em;text-transform:uppercase;padding:0.4375rem 0.6875rem;border:1px solid var(--line);border-radius:999px;color:var(--muted)}

/* drawer */
.drawer{position:fixed;inset:0;z-index:160;visibility:hidden}
.drawer.open{visibility:visible}
.drawer-back{position:absolute;inset:0;background:rgba(8,7,6,.6);opacity:0;transition:opacity .5s}
.drawer.open .drawer-back{opacity:1}
.drawer-panel{position:absolute;right:0;top:0;height:100%;width:min(37.5rem,100vw);background:var(--paper);color:var(--paper-ink);
  --line:var(--paper-line);--muted:var(--paper-muted);overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
  padding:clamp(1.5rem,4vw,2.75rem);padding-bottom:calc(clamp(1.5rem,4vw,2.75rem) + 2.5rem);
  transform:translateX(102%);transition:transform .65s var(--ease)}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;color:var(--paper-muted)}
.drawer-logo{height:1.25rem;width:auto;display:block}
.drawer-x{width:2.875rem;height:2.875rem;border:1px solid var(--paper-line);border-radius:50%;display:grid;place-items:center;transition:background .35s,color .35s}
.drawer-x:hover{background:var(--paper-ink);color:var(--paper)}
.drawer-x .ic{width:1.0625rem;height:1.0625rem}
.drawer-title{margin-top:1.875rem;font-weight:900;font-stretch:114%;text-transform:uppercase;font-size:clamp(2rem,5vw,2.9rem);line-height:.98;letter-spacing:-.01em}
.f{display:block;margin-top:1.625rem}
.f-l{display:block;font-family:'IBM Plex Mono';font-size:0.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-muted);margin-bottom:0.25rem;transition:color .3s}
.f:focus-within .f-l{color:var(--accent)}
.f input,.f textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--paper-line);
  padding:0.75rem 0;font-family:'Archivo';font-size:1rem;color:var(--paper-ink);resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--accent)}
.f input::placeholder,.f textarea::placeholder{color:rgba(20,19,15,.35)}
.f-err{display:block;min-height:1rem;margin-top:0.375rem;font-size:0.59375rem;color:var(--accent)}
.f.bad input,.f.bad textarea{border-color:var(--accent)}
.btn-dark{background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}
.btn-dark:hover{background:var(--accent);border-color:var(--accent);color:#14130F}
.btn-block{width:100%;justify-content:space-between;margin-top:2.375rem}
.spin{display:none;width:1rem;height:1rem;border-radius:50%;border:2px solid rgba(237,233,224,.3);border-top-color:var(--paper)}
.btn-dark.busy .ic{display:none}
.btn-dark.busy .spin{display:block;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.f-note{margin-top:1rem;color:var(--paper-muted);font-size:0.59375rem;text-align:center}
.drawer-done{padding-block:2.5rem;text-align:left}
.done-ic{width:4rem;height:4rem;border-radius:50%;background:var(--accent);color:#14130F;display:grid;place-items:center}
.done-ic .ic{width:1.625rem;height:1.625rem}
.drawer-done h4{margin-top:1.625rem;font-weight:900;font-stretch:114%;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.2rem)}
.drawer-done p{margin-top:0.875rem;color:var(--paper-muted);max-width:40ch}
.drawer-done .btn{margin-top:1.875rem}

.toasts{position:fixed;right:1.5rem;bottom:calc(1.5rem + var(--safe-b));z-index:170;display:flex;flex-direction:column;gap:0.625rem}
.toast{display:flex;align-items:center;gap:0.75rem;background:#171511;border:1px solid var(--line);color:var(--ink);padding:0.875rem 1.125rem;border-radius:0.375rem;max-width:min(22.5rem,86vw);font-size:0.875rem;transform:translateY(1rem);opacity:0;transition:transform .45s var(--ease),opacity .45s}
.toast.on{transform:none;opacity:1}
.toast .ic{color:var(--accent);width:1.125rem;height:1.125rem}

@media(max-width:1024px){
  .about-intro{grid-template-columns:1fr;gap:1.75rem}
  .about-stats{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .proc-grid{grid-template-columns:1fr;gap:3rem}
  .proc-sticky{position:static}
  .cta-note{max-width:100%}
}
@media(max-width:860px){
  .hero-sub-row{grid-template-columns:1fr}
  .hero-ctas{justify-content:flex-start}
  .case-cols{grid-template-columns:1fr}
  .case-results{grid-template-columns:1fr 1fr}
  .stat-card:nth-child(even){margin-top:1.875rem}
  .case-stage{height:min(44vh,26.25rem);height:min(44dvh,26.25rem)}
  .case-nav{width:2.75rem;height:2.75rem}
  .case-nav.prev{left:0.75rem}
  .case-nav.next{right:0.75rem}
  .case-fs{right:0.75rem;bottom:0.75rem;width:2.5rem;height:2.5rem}
}
@media(max-width:640px){
  .proc{grid-template-columns:auto 1fr;row-gap:0.875rem}
  .toasts{right:1rem;bottom:calc(1rem + var(--safe-b))}
  .nav{padding-block:1rem}
  .nav-logo{height:1.75rem}
  .nav-blog{margin-right:.5rem;padding:.75rem 1rem;font-size:.7rem}
  .nav-menu{padding:0.75rem 1.625rem;font-size:0.8125rem}
  .about-stats{grid-template-columns:1fr;gap:0.875rem}
  .stat-card:nth-child(n){margin-top:0 !important}
  .stat-card{aspect-ratio:auto;min-height:16.25rem}
  .hero-title{padding-right:clamp(3.25rem,14vw,5.25rem)}
  .hero-ctas .btn-solid{padding:1.1875rem 2rem;font-size:0.75rem;letter-spacing:.14em;gap:0.9375rem}
  .hero-ctas .btn-solid .ic{font-size:1.0625rem}
  .mark-title{font-size:clamp(1.1rem,6vw,2rem)}
  .cta-note{font-size:.92rem;padding-left:1rem;gap:0.25rem}
  .case-stage{height:min(38vh,21.25rem);height:min(38dvh,21.25rem)}
  .case-counter{top:0.75rem;left:0.75rem;padding:0.375rem 0.625rem;font-size:0.625rem}
  .case-dots{bottom:0.75rem;padding:0.375rem 0.625rem;gap:0.375rem}
  .case-logo{bottom:1rem;left:1rem;height:1.375rem}
  .case-x{width:2.625rem;height:2.625rem;margin:0.625rem 0.625rem -3.25rem 0}
  /* Bottom edge of the picture on a phone: logo (left) · dots (centre) · fullscreen (right).
     A project with lots of slides has more dots than fit between the other two, so they drop out
     and the "03 / 18" counter plus swipe do the job. */
  .case-media[data-many] .case-dots{display:none}
  .case-media.is-fs[data-many] .case-dots{display:flex}
}
@media(max-width:380px){
  .nav{padding-inline:1rem}
  .nav-logo{height:1.5rem}
  .nav-blog{gap:.25rem;margin-right:.375rem;padding:.625rem .65rem;font-size:.64rem}
  .nav-menu{padding:.625rem .8rem;font-size:.68rem}
  .case-logo{display:none}
}

/* ---- landscape phones & short windows: picture on the left, text beside it ---------------------
   Stacked, a short viewport leaves the picture a thin strip (56vh of ~380px, full width), which is
   what made landscape slides look squashed. Side by side, the picture gets the panel's whole height
   and the text scrolls on its own next to it. */
@media (orientation:landscape) and (max-height:600px){
  .case{
    grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
    padding:max(0.5rem,env(safe-area-inset-top)) max(0.75rem,var(--safe-r)) max(0.5rem,var(--safe-b)) max(0.75rem,var(--safe-l));
  }
  .case-panel{
    width:min(100%,76rem);
    height:100%;max-height:none;
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    overflow:hidden;
  }
  .case-stage{height:auto;border-bottom:0;border-right:1px solid var(--line)}
  .case-body{
    min-height:0;overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:1.375rem 1.5rem 1.75rem;
  }
  .case-x{position:absolute;float:none;top:0.625rem;right:0.625rem;margin:0;width:2.5rem;height:2.5rem}
  .case-logo{top:1.125rem;right:1.125rem;bottom:auto;left:auto}   /* the bottom edge is dots + fullscreen button here */
  .case-top{padding-right:2.75rem}
  .case-title{font-size:clamp(1.5rem,3.6vw,2.3rem)}
  .case-lead{margin-top:0.875rem;font-size:1rem;line-height:1.45}
  .case-cols{grid-template-columns:1fr;gap:1.25rem;margin-top:1.25rem}
  .case-cols p{font-size:0.92rem}
  .case-dh{margin-top:1.5rem}
  .case-results{grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem;padding-top:1.25rem}
  .cr-n{font-size:clamp(1.4rem,3vw,1.9rem)}
  .case-body .btn{margin-top:1.5rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html.js .rv,html.js .ld{opacity:1;transform:none}
  html.js .lm .lm-in,html.js .hl-in,html.js .menu-link .lm-in{transform:none}
  .mq-track{animation:none !important}
  .grain{animation:none !important;background-position:0 0 !important}
  .voice-progress span{animation:none !important;transform:scaleX(0) !important}
}

/* ============================================================
   TOUCH / MOBILE HARDENING (coarse pointers & small viewports)
   ============================================================ */

/* 44px touch targets */
@media (pointer:coarse){
  .copy-btn{ width:2.25rem; height:2.25rem; }
  .copy-btn .ic{ width:.9375rem; height:.9375rem; }

  .case-dot{ position:relative; }
  .case-dot::after{ content:""; position:absolute; inset:-0.75rem; border-radius:50%; }

  #toTop{ width:3rem; height:3rem; }

  .tile-arr{ transform:scale(1); width:2.75rem; height:2.75rem; }
  .tile-arr .ic{ width:1.0625rem; height:1.0625rem; }

  /* save battery — animated noise filter is expensive on mobile GPUs */
  .grain{ animation:none; }
}

/* iOS auto-zoom: any input under 16px triggers it */
@media (max-width:900px){
  .f input, .f textarea{ font-size:16px; }
}

/* safe-area bottom on the menu footer (must out-order the max-height MQs) */
.menu-foot{ padding-bottom:calc(clamp(0.625rem,1.6vh,1.375rem) + var(--safe-b)); }

/* WordPress integration */
.wp-site-blocks,.wp-site-blocks>.wp-block-group,.is-root-container{padding:0!important}
html{scroll-behavior:auto}
.bob-site .alignwide{width:100%;}
.bob-site button{appearance:none;}

body.bob-no-cursor, body.bob-no-cursor a, body.bob-no-cursor button, body.bob-no-cursor .pill span{cursor:auto!important;}


/* ============================================================
   WHATSAPP — one component (.wa-btn), two placements
   ------------------------------------------------------------
   .wa-btn           cream pill on dark         (full-screen menu)
   .wa-btn--paper    charcoal pill on the light contact drawer
   The footer has no WhatsApp pill any more: it keeps just the
   round WhatsApp icon in its social links (see .socials below).

   The silhouette is a chat bubble: a full pill with one tight
   corner at the bottom-left (WhatsApp's own glyph has its tail
   there). On hover the tail rounds off and orange floods in from
   the arrow, like a message being sent.

   Type sizes carry px floors: the site's rem is fluid (12px at
   1440px wide), and the old button's .55rem label rendered at
   ~6.6px, which is what made it look faded.
   No WhatsApp green: only the site's cream / charcoal / orange.
   ============================================================ */
.wa-btn{
  /* geometry */
  --wa-h:3.75rem;
  --wa-pad:.4rem;
  --wa-d:calc(var(--wa-h) - var(--wa-pad) * 2);   /* diameter of the two circles */
  --wa-r:calc(var(--wa-h) / 2);
  --wa-tail:.4rem;
  --wa-gap:clamp(.65rem,2.2vw,1rem);
  /* Label size fits by construction: the widest plausible "Chat on WhatsApp" is ~10.5em, and on a
     narrow phone the room left beside the two circles is roughly (100vw - 10.75rem). Capped at --wa-label-max. */
  --wa-label-max:1.1rem;
  --wa-label:clamp(.85rem,calc((100vw - 10.75rem) / 10.5),var(--wa-label-max));
  /* colour: default = on dark */
  --wa-bg:var(--ink);
  --wa-fg:#14130F;
  --wa-fg-h:#14130F;
  --wa-chip-bg:#14130F;
  --wa-chip-fg:var(--ink);
  --wa-go-bg:var(--accent);
  --wa-go-fg:#14130F;
  --wa-go-bg-h:#14130F;
  --wa-go-fg-h:var(--accent);
  --wa-flood:var(--accent);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:var(--wa-d) minmax(0,1fr) var(--wa-d);
  align-items:center;
  column-gap:var(--wa-gap);
  min-height:var(--wa-h);
  padding:var(--wa-pad);
  border-radius:var(--wa-r) var(--wa-r) var(--wa-r) var(--wa-tail);
  background:var(--wa-bg);
  color:var(--wa-fg);
  text-align:left;
  transition:border-radius .55s var(--ease),transform .55s var(--ease),color .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.wa-btn--paper{
  --wa-bg:var(--paper-ink);
  --wa-fg:var(--paper);
  --wa-chip-bg:var(--paper);
  --wa-chip-fg:var(--paper-ink);
}

/* orange floods the pill from behind the arrow */
.wa-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--wa-flood);
  clip-path:circle(0 at calc(100% - var(--wa-pad) - var(--wa-d) / 2) 50%);
  transition:clip-path .7s var(--ease);
}

.wa-btn__icon,
.wa-btn__go{
  width:var(--wa-d);
  height:var(--wa-d);
  border-radius:50%;
  display:grid;
  place-items:center;
}
.wa-btn__icon{background:var(--wa-chip-bg);color:var(--wa-chip-fg)}
.wa-btn__go{
  background:var(--wa-go-bg);
  color:var(--wa-go-fg);
  transition:background .4s ease,color .4s ease,transform .6s var(--ease);
}
.wa-btn__icon .ic{width:52%;height:52%;display:block}
.wa-btn__go .ic{width:44%;height:44%;display:block}

.wa-btn__copy{display:flex;flex-direction:column;gap:.22rem;min-width:0}
.wa-btn__label{
  font-family:'Archivo',sans-serif;
  font-weight:800;
  font-stretch:112%;
  font-size:var(--wa-label);
  letter-spacing:-.012em;
  line-height:1.08;
}
.wa-btn__meta{
  font-family:'IBM Plex Mono',monospace;
  font-size:max(10.5px,.68rem);
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.25;
  white-space:nowrap;
}
.wa-btn__sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* hover (pointer devices only, so touch never gets a stuck orange pill) + keyboard focus */
.wa-btn:focus-visible{border-radius:var(--wa-r);color:var(--wa-fg-h)}
.wa-btn:focus-visible::before{clip-path:circle(160% at calc(100% - var(--wa-pad) - var(--wa-d) / 2) 50%)}
.wa-btn:focus-visible .wa-btn__go{background:var(--wa-go-bg-h);color:var(--wa-go-fg-h);transform:rotate(45deg)}
@media (hover:hover){
  .wa-btn:hover{border-radius:var(--wa-r);color:var(--wa-fg-h);transform:translateY(-.125rem)}
  .wa-btn:hover::before{clip-path:circle(160% at calc(100% - var(--wa-pad) - var(--wa-d) / 2) 50%)}
  .wa-btn:hover .wa-btn__go{background:var(--wa-go-bg-h);color:var(--wa-go-fg-h);transform:rotate(45deg)}
}
.wa-btn:active{transform:scale(.985)}

/* ---- placement: full-screen menu ---------------------------------------------------
   The menu's generic `.menu-side a` rule (display:block; .125rem padding; accent hover;
   color-only transition) is more specific than a lone class, so the button restates the
   few properties it would otherwise lose. */
.menu-whatsapp-side{width:100%;margin-bottom:clamp(.25rem,1.2vh,.9rem)}   /* sets the button apart from the labelled blocks below */
.menu-side .wa-btn{
  display:grid;
  padding:var(--wa-pad);
  width:min(100%,23rem);
  transition:border-radius .55s var(--ease),transform .55s var(--ease),color .35s ease;
}
.menu-side .wa-btn:hover,
.menu-side .wa-btn:focus-visible{color:var(--wa-fg-h)}

/* Social buttons, including WhatsApp, share one neutral circular system. */
.menu-socials{margin-top:.6rem;gap:.5rem;}
.menu-socials a{width:2.35rem;height:2.35rem;padding:0;border-color:var(--line);background:transparent;color:var(--ink);}
.menu-socials a .ic{width:1rem;height:1rem;display:block;margin:0;padding:0;}
.menu-socials a.social-whatsapp{color:var(--ink);border-color:var(--line);}
.menu-socials a.social-whatsapp:hover{background:var(--accent);border-color:var(--accent);color:#14130F;}

/* Footer social links use identical neutral circles; center the WhatsApp SVG explicitly. */
.socials a.social-whatsapp{color:var(--ink);border-color:var(--line);background:transparent;display:flex;align-items:center;justify-content:center;}
.socials a.social-whatsapp .ic{width:1.125rem;height:1.125rem;display:block;flex:none;margin:0;padding:0;transform:translate(-.035rem,-.035rem);}
.socials a.social-whatsapp:hover{background:var(--accent);border-color:var(--accent);color:#14130F;}

/* ---- placement: Start-a-project drawer (light paper) -------------------------------- */
.contact-choice{margin-top:1.5rem;padding:0 0 .25rem;border:0;background:transparent;box-shadow:none}
.contact-choice-lede{margin-bottom:.8rem;color:var(--paper-ink);font-family:'IBM Plex Mono',monospace;font-size:max(10px,.66rem);letter-spacing:.09em;text-transform:uppercase;line-height:1.5;font-weight:500}
.contact-choice .wa-btn{width:100%}
.contact-choice-divider{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem;color:var(--paper-muted);font-family:'IBM Plex Mono',monospace;font-size:max(9.5px,.6rem);letter-spacing:.1em;line-height:1.5}
.contact-choice-divider::before,.contact-choice-divider::after{content:"";height:1px;flex:1;background:var(--paper-line)}

.generic-footer-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;color:var(--ink)!important;transition:color .25s;}
.generic-footer-whatsapp:hover{color:var(--accent)!important;}
.generic-footer-whatsapp .ic{width:1rem;height:1rem;display:block;color:currentColor;transform:translate(-.025rem,-.025rem);}

/* ---- responsive --------------------------------------------------------------------- */
@media(max-width:860px){
  .menu-socials{margin-top:.45rem;}
  .menu-socials a{width:2.25rem;height:2.25rem;}
}
/* narrow phones (320-420px): tighter circles so the label keeps a single line */
@media(max-width:420px){
  .wa-btn{--wa-h:3.6rem;--wa-pad:.375rem}
}

/* BOB Blocks: replicates the 10px column padding the Elementor build put
   around every section widget, so native block pages are pixel-identical. */
.bob-wpad{padding:10px}
/* Full-bleed section paint: every section root escapes the 10px content shim
   so backgrounds, ambient glows (drum vignette) and hairlines (ticker rules)
   reach the true viewport edges. The content inset itself comes from each
   section's own .wrap paddings (Elementor painted these INSIDE its columns
   the same way). .bob-e-block (inner-page max-width column) is excluded —
   it never paints a background and must stay centered. */
.bob-wpad > *:not(.bob-e-block){ margin-left:-10px; margin-right:-10px }