/* ============================================================
   SLY Production — v7 "INDUSTRIAL PRECISION"
   Dark workshop default · signal-orange · blueprint grid ·
   mono tech-labels · grain · massive type · WordPress-portable
   ============================================================ */
/* local fonts (self-hosted, no Google request) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/IBMPlexMono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/IBMPlexMono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/IBMPlexMono-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/IBMPlexMono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/IBMPlexMono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/IBMPlexMono-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(assets/fonts/Inter-300-900-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(assets/fonts/Inter-300-900-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(assets/fonts/Inter-300-900-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(assets/fonts/Inter-300-900-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(assets/fonts/Inter-300-900-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(assets/fonts/Inter-300-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(assets/fonts/Inter-300-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --accent:#f5871f; --accent-2:#ff9a3d; --accent-d:#d9700f; --accent-ink:#1a1206;
  --maxw:1360px; --gut:clamp(20px,5vw,72px); --radius:2px;
  --ease:cubic-bezier(.22,1,.36,1);
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
/* DARK — default: the workshop */
:root,[data-theme="dark"]{
  --bg:#0a0a0c; --bg2:#101014; --card:#141419; --line:#232329; --hair:#1b1b20;
  --ink:#f2f1ed; --ink2:#c7c6c0; --muted:#98989f;
  --gridline:rgba(255,255,255,.035);
  --film1:rgba(5,5,7,.88); --film2:rgba(5,5,7,.45); --film3:rgba(5,5,7,.05);
  --headbg:rgba(10,10,12,.78);
  --glowsoft:rgba(245,135,31,.14);
}
[data-theme="light"]{
  --bg:#f4f3f0; --bg2:#eceae5; --card:#ffffff; --line:#dcdad2; --hair:#e5e3dc;
  --ink:#131316; --ink2:#3c3c40; --muted:#5f5f5c;
  --gridline:rgba(0,0,0,.045);
  --film1:rgba(12,11,10,.78); --film2:rgba(12,11,10,.38); --film3:rgba(12,11,10,.05);
  --headbg:rgba(244,243,240,.82);
  --glowsoft:rgba(245,135,31,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Inter",system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s;position:relative}
/* film grain */
body::after{content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.full{width:100%}
/* mono tech label */
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"//";color:var(--muted)}
h1,h2,h3{font-weight:800;line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(36px,6vw,84px);text-transform:uppercase}
h3{font-size:clamp(19px,2.2vw,26px);letter-spacing:-.02em}
p{color:var(--ink2)}
.lead{font-size:clamp(16px,1.45vw,20px);line-height:1.65;color:var(--ink2);max-width:58ch;font-weight:300}
/* halved: adjacent sections now sum to the same gap a single padding used to give,
   so no seam is ever wider than the one before "Five services. One workshop." */
.section{padding:clamp(40px,5.5vw,85px) 0;position:relative}
.section--tight{padding:clamp(30px,4vw,52px) 0;position:relative}
.section--pad0{padding:0}
/* blueprint grid on sections that opt in */
.gridbg{background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:56px 56px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:#0d0800;font-weight:700;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:16px 30px;border-radius:var(--radius);
  border:1px solid var(--accent);cursor:pointer;position:relative;transition:.25s var(--ease)}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2),0 14px 40px -12px rgba(245,135,31,.55)}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--lg{padding:18px 36px;font-size:15px}
.alink{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.alink .dot{width:44px;height:44px;border-radius:0;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.alink .dot svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.alink:hover{color:var(--accent)}
.alink:hover .dot{background:var(--accent);border-color:var(--accent);color:#0d0800}
.alink:hover .dot svg{transform:translate(2px,-2px)}
.btn--ghost-light{display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;cursor:pointer;padding:17px 30px;border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius);transition:.25s var(--ease)}
.btn--ghost-light:hover{border-color:var(--accent);color:var(--accent-2)}

/* ---------- custom cursor ---------- */
@media(hover:hover) and (pointer:fine){
  body{cursor:none}
  .cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);
    pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),opacity .25s}
  .cursor.ring{width:44px;height:44px;background:transparent;border:1px solid var(--accent);border-radius:0;transform:translate(-50%,-50%) rotate(45deg)}
  .cursor.hide{opacity:0}
}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--headbg);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .4s}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:32px}
.brand .bt{font-weight:800;font-size:17px;letter-spacing:.04em;color:var(--ink);line-height:1;text-transform:uppercase}
.brand .bt small{display:block;font-family:var(--mono);font-weight:500;font-size:8px;letter-spacing:.4em;color:var(--accent);margin-top:3px}
.nav .links{display:flex;gap:30px;align-items:center}
.nav .links a{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);transition:color .2s;position:relative}
.nav .links a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav .links a:hover{color:var(--ink)}
.nav .links a:hover::after{transform:scaleX(1)}
.nav .tools{display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:2px;font-family:var(--mono);font-size:11.5px;font-weight:600}
.lang a{padding:4px 7px;color:var(--muted);cursor:pointer;transition:.2s}
.lang a.on{color:var(--accent)}
.iconbtn{width:40px;height:40px;border:1px solid var(--line);background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;border-radius:0}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn svg{width:18px;height:18px}
.burger{display:none}
@media(max-width:960px){
  .nav .links{display:none;position:fixed;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg2);border-bottom:1px solid var(--line);padding:8px 0;z-index:70}
  .nav .links.open{display:flex}
  .nav .links a{padding:15px clamp(20px,4vw,56px);font-size:14px;border-bottom:1px solid var(--hair)}
  .nav .links a:last-child{border-bottom:none}
  .nav .links a::after{display:none}
  .burger{display:flex}
  .lang{display:none}
}
@media(max-width:700px){
  .nav .tools > .btn{display:none}   /* hero + sticky CTA cover conversion on phones */
  .nav .tools{gap:10px}
  .brand img{height:28px}
}
/* keyboard navigation */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#0a0a0c}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:heroZoom 18s var(--ease) forwards;opacity:.92}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__film{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--film1) 0%,var(--film2) 46%,var(--film3) 78%),
             linear-gradient(0deg,rgba(5,5,7,.72) 0%,transparent 42%)}
/* blueprint grid overlay on hero */
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:72px 72px}
.hero__inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(52px,8vw,104px);color:#fff}
.hero__eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;color:var(--accent-2);margin-bottom:clamp(24px,3.6vw,40px)}
.hero__eyebrow::before{content:"[";color:rgba(255,255,255,.4)}
.hero__eyebrow::after{content:"]";color:rgba(255,255,255,.4)}
.hero h1{color:#fff;font-size:clamp(36px,6.8vw,104px);font-weight:900;letter-spacing:-.04em;line-height:.97;max-width:17ch;
  text-transform:uppercase;text-shadow:0 2px 44px rgba(0,0,0,.4)}
.hero h1 em{font-style:normal;color:var(--accent);-webkit-text-stroke:0}
.hero .sub{margin-top:clamp(22px,3vw,36px);font-size:clamp(15px,1.4vw,19px);font-weight:300;color:#e9e7e1;max-width:52ch;line-height:1.65}
.hero .cta{margin-top:clamp(30px,4vw,46px);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .since{margin-top:clamp(32px,4vw,50px);font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#b9b7b0;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.hero .since b{color:var(--accent-2);font-weight:600}
.hero .since .sep{width:20px;height:1px;background:var(--accent)}
.scrollcue{position:absolute;right:var(--gut);bottom:40px;z-index:4;color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:flex;align-items:center;gap:12px;opacity:.7;writing-mode:vertical-rl}
.scrollcue .line{width:1px;height:56px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.scrollcue .line::after{content:"";position:absolute;inset:0;background:var(--accent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- trust logos: original colours on a neutral band ---------- */
.trust{background:#909196;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:34px 0;overflow:hidden;position:relative}
.trust .lbl{text-align:center;font-family:var(--mono);color:#232427;font-size:12px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:22px}
.marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
/* two identical sets — translateX(-50%) lands exactly on the set boundary, no jump */
.logos{display:flex;animation:scroll 18s linear infinite;width:max-content}
.logos__set{display:flex;align-items:center;gap:clamp(46px,6vw,84px);padding-right:clamp(46px,6vw,84px);flex:0 0 auto}
.logos img{height:36px;width:auto;opacity:1;transform:translateZ(0);backface-visibility:hidden;image-rendering:-webkit-optimize-contrast;transition:transform .25s var(--ease)}
.logos img:hover{transform:translateZ(0) scale(1.06)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- statement ---------- */
.statement-xl{font-weight:800;font-size:clamp(26px,4.2vw,54px);line-height:1.1;letter-spacing:-.03em;max-width:22ch;text-transform:uppercase}
.statement-xl .accent{color:var(--accent)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:end}
@media(max-width:880px){.split{grid-template-columns:1fr;align-items:start;gap:32px}}

/* ---------- services: technical index list ---------- */
.svc{border-top:2px solid var(--ink)}
.svc__row{display:grid;grid-template-columns:86px 1.15fr 1.4fr auto;gap:26px;align-items:center;
  padding:34px 0;border-bottom:1px solid var(--line);cursor:pointer;position:relative;
  transition:padding .35s var(--ease),border-color .3s}
.svc__row:hover{padding-left:16px;border-bottom-color:var(--accent)}
.svc__num{font-family:var(--mono);font-size:13px;color:var(--muted)}
.svc__row:hover .svc__num{color:var(--accent)}
.svc__name{font-weight:800;font-size:clamp(21px,2.6vw,36px);letter-spacing:-.02em;text-transform:uppercase}
.svc__desc{font-size:14.5px;color:var(--muted);font-weight:300}
.svc__go{width:48px;height:48px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);flex-shrink:0;border-radius:0}
.svc__go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.svc__row:hover .svc__go{background:var(--accent);border-color:var(--accent);color:#0d0800}
.svc__row:hover .svc__go svg{transform:translate(2px,-2px)}
.svc__thumb{position:fixed;width:340px;height:250px;overflow:hidden;pointer-events:none;border:1px solid var(--line);
  opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .3s,transform .35s var(--ease);z-index:40;box-shadow:0 40px 90px -24px rgba(0,0,0,.7)}
.svc__thumb img{width:100%;height:100%;object-fit:cover}
.svc__thumb.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(max-width:880px){.svc__row{grid-template-columns:48px 1fr auto;gap:14px}.svc__desc{display:none}}

/* ---------- featured bento ---------- */
.showcase{background:var(--bg2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.showcase h2{color:var(--ink)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:170px;gap:14px;margin-top:52px}
.bento a{position:relative;overflow:hidden;background:var(--card);cursor:pointer;border:1px solid var(--hair)}
.bento img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .8s var(--ease),opacity .4s;opacity:.94}
.bento a:hover img{transform:scale(1.05);opacity:1}
.b-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,5,7,.9));z-index:1}
.b-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2vw,28px)}
.b-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);font-weight:500}
.b-title{font-size:clamp(18px,1.9vw,28px);color:#fff;margin-top:7px;line-height:1.1;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.b-meta{font-size:12.5px;color:#b5b3ac;margin-top:5px;font-weight:300}
.bento .arr{position:absolute;top:18px;right:18px;z-index:2;width:42px;height:42px;border:1px solid rgba(255,255,255,.28);
  background:rgba(10,10,12,.4);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-4px);transition:.3s var(--ease)}
.bento .arr svg{width:17px;height:17px;color:#fff}
.bento a:hover .arr{opacity:1;transform:translateY(0)}
.b-hero{grid-column:span 7;grid-row:span 3}
.b-tall{grid-column:span 5;grid-row:span 3}
.b-wide{grid-column:span 5;grid-row:span 2}
.b-sm{grid-column:span 4;grid-row:span 2}
.b-sm2{grid-column:span 3;grid-row:span 2}
@media(max-width:880px){.bento{grid-auto-rows:150px}.b-hero,.b-tall,.b-wide,.b-sm,.b-sm2{grid-column:span 12;grid-row:span 2}}

/* ---------- stats: signal band ---------- */
.statband{background:var(--accent);color:#160d02;position:relative;overflow:hidden}
.statband::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);background-size:56px 56px}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative}
.statband .stat .n{font-size:clamp(44px,6vw,86px);font-weight:900;line-height:1;letter-spacing:-.04em}
.statband .stat .l{margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(22,13,2,.75)}
@media(max-width:680px){.statband .wrap{grid-template-columns:1fr 1fr;gap:26px}}

/* ---------- why: technical cards ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:50px}
.feat{background:var(--card);border:1px solid var(--hair);padding:clamp(26px,2.8vw,38px) clamp(24px,2.4vw,34px);position:relative;transition:border-color .3s}
.feat::before{content:"";position:absolute;top:0;left:0;width:34px;height:34px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);opacity:0;transition:opacity .3s}
.feat:hover{border-color:var(--line)}
.feat:hover::before{opacity:1}
.feat .ic{width:46px;height:46px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:20px}
.feat .ic svg{width:22px;height:22px}
.feat h3{font-size:18px;margin-bottom:10px;text-transform:uppercase;letter-spacing:-.01em}
.feat p{font-size:14px;color:var(--muted);font-weight:300}
@media(max-width:880px){.feats{grid-template-columns:1fr}}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:50px}
.pstep{background:var(--card);border:1px solid var(--hair);padding:28px 26px;position:relative}
.pstep .pn{font-family:var(--mono);font-size:13px;color:var(--accent);font-weight:600;letter-spacing:.1em}
.pstep h3{font-size:18px;margin:14px 0 8px;text-transform:uppercase}
.pstep p{font-size:14px;color:var(--muted);font-weight:300}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{margin-top:46px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:26px 0;list-style:none;display:flex;justify-content:space-between;gap:22px;align-items:center;
  font-size:clamp(17px,1.9vw,23px);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex-shrink:0;width:30px;height:30px;position:relative;transition:transform .35s var(--ease)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--accent);transition:.3s}
.faq summary .pm::before{top:14px;left:5px;right:5px;height:2px}
.faq summary .pm::after{left:14px;top:5px;bottom:5px;width:2px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq details[open] summary .pm{transform:rotate(180deg)}
.faq .ans{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.faq details[open] .ans{max-height:340px}
.faq .ans p{padding:0 0 26px;color:var(--muted);max-width:70ch;font-weight:300}

/* ---------- contact ---------- */
.contact{background:var(--bg2);border-top:1px solid var(--hair)}
.formwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,5vw,80px);align-items:start}
@media(max-width:880px){.formwrap{grid-template-columns:1fr}}
.cinfo a{color:var(--accent)}
.cinfo .row{display:flex;gap:13px;align-items:center;margin-top:15px;color:var(--ink2);font-size:14.5px}
.cinfo .row svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;color:var(--ink2)}
.field .opt{color:var(--muted)}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:0;padding:14px 16px;
  color:var(--ink);font-family:inherit;font-size:15px;transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:124px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.drop{border:1px dashed var(--line);padding:26px;text-align:center;color:var(--muted);font-size:13.5px;cursor:pointer;transition:.2s;display:flex;gap:10px;align-items:center;justify-content:center}
.drop:hover{border-color:var(--accent);color:var(--accent)}
.drop svg{width:18px;height:18px}

/* ---------- portfolio grid ---------- */
.phead{padding-top:140px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 40px}
.filters button{background:transparent;border:1px solid var(--line);color:var(--muted);padding:10px 18px;border-radius:0;
  cursor:pointer;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:.25s var(--ease)}
.filters button:hover{color:var(--ink);border-color:var(--ink)}
.filters button.active{background:var(--accent);color:#0d0800;border-color:var(--accent)}
.pgrid{columns:3;column-gap:14px}
@media(max-width:980px){.pgrid{columns:2}}
@media(max-width:560px){.pgrid{columns:1}}
.pcard{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;background:var(--card);display:block;cursor:pointer;border:1px solid var(--hair)}
.pcard img{width:100%;display:block;transition:transform .8s var(--ease)}
.pcard:hover img{transform:scale(1.05)}
.pcard__o{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(5,5,7,.9));
  opacity:0;transition:opacity .35s;display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.pcard:hover .pcard__o{opacity:1}
/* touch devices have no hover — titles must be visible right away */
@media(hover:none){.pcard__o{opacity:1}}
/* "All" overview: slightly smaller tiles for fast scanning; full-size when a filter is chosen */
.pgrid.compact{columns:4 230px;column-gap:12px}
.pgrid.compact .pcard{margin-bottom:12px}
.pgrid.compact .pcard__t{font-size:15px}
.pgrid.compact .pcard__sub{display:none}
@media(max-width:700px){
  .pgrid.compact{columns:3 90px;column-gap:8px}
  .pgrid.compact .pcard{margin-bottom:8px}
  .pgrid.compact .pcard__o{display:none}
}
.pcard__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);font-weight:500}
.pcard__t{font-size:20px;color:#fff;margin-top:5px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
.pcard__sub{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:3px;font-weight:300}
.pcard.is-case .pcard__t::after{content:" →";color:var(--accent)}

/* ---------- case page ---------- */
.case-hero{position:relative;height:82svh;min-height:500px;display:flex;align-items:flex-end;overflow:hidden;background:#0a0a0c}
.case-hero__media{position:absolute;inset:0}
.case-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.94}
.case-hero__film{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,.2),rgba(5,5,7,.92))}
.case-hero__inner{position:relative;z-index:2;color:#fff;padding-bottom:clamp(40px,6vw,72px)}
.case-hero h1{color:#fff;font-size:clamp(36px,6vw,88px);text-transform:uppercase;font-weight:900;letter-spacing:-.03em}
.case-meta{display:flex;gap:34px;flex-wrap:wrap;margin-top:22px;font-size:14px;color:#cfcdc6}
.case-meta b{color:var(--accent-2);font-weight:500;display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.csr{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,56px)}
@media(max-width:880px){.csr{grid-template-columns:1fr;gap:32px}}
.rel-links{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.rel-lbl{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rel-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.rel-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:10px 16px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;transition:.25s var(--ease)}
.rel-chip span{color:var(--accent);transition:transform .25s var(--ease)}
.rel-chip:hover{border-color:var(--accent);color:var(--accent)}
.rel-chip:hover span{transform:translateX(3px)}

/* ---------- case gallery carousel + lightbox ---------- */
.gal{position:relative;margin-top:8px}
/* masonry: page-scroll grid instead of a horizontal strip.
   CSS columns = no-JS fallback; app.js swaps in .gal__col flex columns (reading order). */
.gal__grid{columns:3 340px;column-gap:14px}
.gal__grid.js{columns:auto;display:flex;gap:14px;align-items:flex-start}
.gal__col{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.gal__col .gal__item{margin-bottom:0}
.gal__item{position:relative;break-inside:avoid;margin-bottom:14px;overflow:hidden;cursor:pointer;background:var(--card);border:1px solid var(--hair)}
.gal__item img,.gal__item video{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.gal__item.is-video video{aspect-ratio:16/9;object-fit:cover}
.gal__item:hover img{transform:scale(1.04)}
.gal__item.is-video::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15)}
.gal__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:56px;height:56px;background:var(--accent);display:flex;align-items:center;justify-content:center;pointer-events:none}
.gal__play svg{width:20px;height:20px;color:#0d0800;margin-left:3px}
.gal__badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--accent);color:#0d0800;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px}
.eq-card{cursor:pointer}
.yt{margin-top:40px}
.yt iframe{width:100%;aspect-ratio:16/9;border:0;display:block;margin-top:14px;background:#000}
/* kinetic diagonal marquee — two identical sets, -50% loops exactly on the set boundary */
.kin{background:var(--accent);color:#141310;overflow:hidden;padding:14px 0;transform:rotate(-1.2deg) scale(1.02);position:relative;z-index:3;margin:-26px 0 8px}
.kin__track{display:flex;width:max-content;animation:scroll 16s linear infinite}
.kin__set{display:flex;flex:0 0 auto}
.kin span{font-family:var(--disp,inherit);font-weight:800;font-size:clamp(22px,3vw,40px);text-transform:uppercase;white-space:nowrap;padding:0 16px;letter-spacing:.01em;line-height:1.1}
.kin i{font-style:normal;color:#0d0800;opacity:.55}
@media(max-width:700px){
  .kin__track{animation-duration:8s}
  .logos{animation-duration:9s}
}
/* WhatsApp button: dark base, green accents — readable in both themes */
.btn--wa{background:transparent;border:1px solid #25d366;color:var(--ink)}
.btn--wa svg{width:19px;height:19px;color:#25d366;flex:0 0 auto}
.btn--wa:hover{background:#25d366;color:#0b2b14}
.btn--wa:hover svg{color:#0b2b14}
/* GDPR consent */
.gdpr{display:flex;gap:12px;align-items:flex-start;margin:6px 0 18px;font-size:13px;color:var(--ink2);cursor:pointer;max-width:60ch}
.gdpr input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent);flex:0 0 auto}
.gdpr a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.gdpr em{color:var(--muted);font-style:normal}
/* floating action buttons: WhatsApp above back-to-top */
.fab-stack{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:85;
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.fab-stack.show{opacity:1;transform:none;pointer-events:auto}
.fab{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.4);transition:.2s}
.fab svg{width:22px;height:22px}
.fab--wa{border-color:#25d366;color:#25d366}
.fab--wa:hover{background:#25d366;color:#0b2b14}
.fab--up:hover{border-color:var(--accent);color:var(--accent)}
body:has(.sticky-cta) .fab-stack{bottom:92px}   /* clear the case-page CTA */
/* consent banner (only when tracking is enabled in site-config) */
.consent{position:fixed;left:20px;right:20px;bottom:20px;z-index:120;background:var(--card);border:1px solid var(--line);
  padding:20px 22px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  box-shadow:0 10px 40px rgba(0,0,0,.5);max-width:860px;margin:0 auto}
.consent p{font-size:13.5px;color:var(--ink2);margin:0;max-width:56ch}
.consent a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.consent__btns{display:flex;gap:10px}
.consent__ok{padding:11px 22px}
.consent__no{background:transparent;border:1px solid var(--line);color:var(--ink2);padding:11px 18px;cursor:pointer;font-size:13px}
.consent__no:hover{border-color:var(--muted)}
/* trademark note under the client-logo strip */
.trust .disc{text-align:center;font-size:10.5px;color:#3f4045;margin-top:14px;padding:0 20px}
/* JS reading-order masonry for filter grids (pgrid / eq-grid) */
.jsm{display:flex!important;columns:auto!important;gap:14px;align-items:flex-start}
.jsm>.m-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.jsm .pcard,.jsm .eq-card{margin-bottom:0;break-inside:auto}
.pgrid.compact.jsm{gap:12px}.pgrid.compact.jsm>.m-col{gap:12px}
.eq-grid.compact.jsm{gap:10px}.eq-grid.compact.jsm>.m-col{gap:10px}
@media(max-width:700px){.pgrid.compact.jsm{gap:8px}.pgrid.compact.jsm>.m-col{gap:8px}}
/* legal pages */
.legal h2{font-size:clamp(22px,2.6vw,32px);margin:46px 0 6px}
.legal h3{font-size:17px;margin:30px 0 4px}
.legal h4{font-size:15px;margin:22px 0 2px;color:var(--ink2)}
.legal p{margin:10px 0;color:var(--ink2);font-weight:300;line-height:1.7}
.legal ul{margin:10px 0 10px 22px;color:var(--ink2);font-weight:300}
.legal li{margin:8px 0}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.lb{position:fixed;inset:0;z-index:9998;background:rgba(5,5,7,.96);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb__media{max-width:92vw;max-height:88vh}
.lb__media img,.lb__media video{max-width:92vw;max-height:88vh;width:auto;height:auto;display:block}
.lb__close{position:absolute;top:20px;right:24px;width:46px;height:46px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb__close:hover{border-color:var(--accent);color:var(--accent)}
.lb__arrow{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb__arrow svg{width:24px;height:24px}
.lb__arrow:hover{border-color:var(--accent);color:var(--accent)}
.lb__arrow.prev{left:24px}.lb__arrow.next{right:24px}
.lb__count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-family:var(--mono);font-size:12px;letter-spacing:.1em}
@media(hover:hover) and (pointer:fine){.lb,.lb *{cursor:auto}}

/* ---------- equipment / workshop gallery (About) ---------- */
.eq-grid{columns:3;column-gap:14px;margin-top:36px}
@media(max-width:980px){.eq-grid{columns:2}}
@media(max-width:560px){.eq-grid{columns:1}}
/* compact overview on the "All" filter — small thumbs, quick to scroll; full-size when filtered */
.eq-grid.compact{columns:5 170px;column-gap:10px}
.eq-grid.compact .eq-card{margin-bottom:10px}
.eq-grid.compact .cap{font-size:9px;padding:5px 9px}
@media(max-width:980px){.eq-grid.compact{columns:4 110px}}
@media(max-width:560px){.eq-grid.compact{columns:3 90px;column-gap:8px}.eq-grid.compact .cap{display:none}}
.eq-card{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;border:1px solid var(--hair);background:var(--card);cursor:pointer}
.eq-card img{width:100%;display:block;transition:transform .7s var(--ease)}
.eq-card:hover img{transform:scale(1.04)}
.eq-card .cap{position:absolute;left:0;bottom:0;right:0;padding:14px 16px;background:linear-gradient(transparent,rgba(5,5,7,.88));
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.eq-card .cap b{color:var(--accent-2);font-weight:600}
.eq-list{margin-top:40px;border-top:2px solid var(--ink)}
.eq-list .row{display:grid;grid-template-columns:70px 1fr 1.4fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.eq-list .n{font-family:var(--mono);font-size:12px;color:var(--accent)}
.eq-list .t{font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:-.01em}
.eq-list .d{font-size:14px;color:var(--muted);font-weight:300}
@media(max-width:680px){.eq-list .row{grid-template-columns:50px 1fr}.eq-list .d{grid-column:2}}

/* ---------- cta band ---------- */
.cta-band{background:var(--card);border:1px solid var(--line);padding:clamp(48px,7vw,88px);text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:56px 56px}
.cta-band::after{content:"";position:absolute;top:-30%;right:-8%;width:44%;height:170%;background:radial-gradient(circle,var(--glowsoft),transparent 60%)}
.cta-band h2{position:relative}
.cta-band p{color:var(--muted);margin:16px auto 30px;max-width:46ch;position:relative}
.cta-band .btn{position:relative}

/* ---------- footer ---------- */
footer{background:#08080a;color:#84848c;padding:clamp(60px,8vw,100px) 0 36px;border-top:1px solid #1b1b20}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
@media(max-width:880px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}
footer .fbrand img{height:30px;margin-bottom:18px}
footer p,footer a,footer li{color:#84848c;font-size:14px}
footer h4{color:#f2f1ed;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a:hover{color:var(--accent)}
.fcopy{border-top:1px solid #1b1b20;margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#5c5c63;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}

.note{background:var(--bg2);border:1px dashed var(--line);color:var(--muted);padding:11px 18px;font-size:13px;text-align:center;margin:0 auto;max-width:var(--maxw)}
.link-underline{position:relative;font-weight:600;color:var(--ink)}
.link-underline:hover{color:var(--accent)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}.reveal.d4{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}.hero__media img{transform:none}
  body{cursor:auto!important}.cursor{display:none!important}body::after{display:none}
}

/* ---------- mobile nav ---------- */
@media(max-width:880px){
  .nav .links{display:none}
  .burger{display:flex}
  .nav .links.open{display:flex;position:fixed;inset:76px 0 auto 0;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gut) 20px}
  .nav .links.open a{padding:15px 0;border-bottom:1px solid var(--line);font-size:15px}
}
@media(max-width:560px){
  .brand .bt{font-size:14px}
  .brand .bt small{font-size:7px;letter-spacing:.3em}
  .nav .tools .lang{display:none}
  .nav .tools .btn{display:none}
  .nav .tools .iconbtn:not(.burger){display:none}   /* socials hide on narrow screens */
  .nav{gap:10px}
}

/* ---------- breadcrumbs (case hero) ---------- */
.crumbs{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;color:rgba(255,255,255,.65)}
.crumbs a{color:rgba(255,255,255,.65);transition:color .2s}
.crumbs a:hover{color:var(--accent-2)}
.crumbs span{color:rgba(255,255,255,.3)}
.crumbs b{color:var(--accent-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}

/* ---------- next project ---------- */
.nextproj{display:grid;grid-template-columns:180px 1fr auto;gap:26px;align-items:center;border:1px solid var(--line);
  padding:18px;transition:border-color .3s;position:relative;background:var(--card)}
.nextproj:hover{border-color:var(--accent)}
.np-img{width:180px;height:110px;overflow:hidden}
.np-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.nextproj:hover .np-img img{transform:scale(1.06)}
.np-lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.np-title{display:block;font-weight:800;font-size:clamp(19px,2.2vw,28px);text-transform:uppercase;letter-spacing:-.02em;margin-top:6px}
.np-cat{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.np-arr{width:52px;height:52px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.np-arr svg{width:20px;height:20px}
.nextproj:hover .np-arr{background:var(--accent);border-color:var(--accent);color:#0d0800}
@media(max-width:680px){.nextproj{grid-template-columns:1fr auto}.np-img{display:none}}

/* ---------- sticky CTA (case pages) ---------- */
.sticky-cta{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#0d0800;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 22px;box-shadow:0 14px 40px -10px rgba(245,135,31,.5);transition:.25s var(--ease)}
.sticky-cta svg{width:15px;height:15px}
.sticky-cta:hover{background:var(--accent-2);transform:translateY(-2px)}
@media(max-width:680px){.sticky-cta{right:14px;bottom:14px;padding:12px 18px;font-size:12px}}

/* ---------- testimonials (letters) ---------- */
.tst{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:50px}
@media(max-width:880px){.tst{grid-template-columns:1fr}}
.tst blockquote{background:var(--card);border:1px solid var(--hair);padding:clamp(26px,3vw,40px);position:relative;margin:0}
.tst blockquote::before{content:"“";position:absolute;top:8px;left:22px;font-size:76px;line-height:1;color:var(--accent);opacity:.35;font-family:Georgia,serif}
.tst p{font-size:clamp(15px,1.35vw,17.5px);line-height:1.7;font-weight:300;color:var(--ink2);position:relative}
.tst footer{margin-top:20px;padding:0;background:none;border:none}
.tst .who{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.tst .role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:3px}
.tst .src{font-size:12px;color:var(--muted);margin-top:8px}
.tst a.letter{display:inline-block;font-size:12px;color:var(--muted);margin-top:10px;text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px;transition:color .2s,border-color .2s}
.tst a.letter:hover{color:var(--accent);border-color:var(--accent)}
@media(min-width:881px){.tst{grid-template-columns:1fr 1fr 1fr}}

/* ---------- workshop teaser (home) ---------- */
.wsteaser{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:46px}
@media(max-width:880px){.wsteaser{grid-template-columns:repeat(2,1fr)}}
.wsteaser a{position:relative;overflow:hidden;border:1px solid var(--hair);aspect-ratio:4/3;background:var(--card)}
.wsteaser img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.wsteaser a:hover img{transform:scale(1.05)}
.wsteaser .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(transparent,rgba(5,5,7,.9));font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.wsteaser .cap b{color:var(--accent-2)}