/* ===========================================================
   RECKNAGEL ENGINEERING — Monochrome System (bpco-inspired)
   Shared across all pages.
   =========================================================== */
:root{
  --bg:#0A0A0B; --bg-2:#0E0E10; --bg-3:#121214;
  --fg:#F4F4F5; --fg-dim:#9A9A9E; --fg-faint:#5A5A5E;
  --line:rgba(255,255,255,0.10); --line-soft:rgba(255,255,255,0.055); --line-strong:rgba(255,255,255,0.2);
  --accent:#E0202E; --accent-glow:rgba(224,32,46,0.5);
  --gold:#C8A24A;
  --nav-bg:rgba(10,10,11,.8); --card:#0d0d0e; --marquee-stroke:rgba(255,255,255,.05);
  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;
  --font-display:"Fraunces","Geist",serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --gutter:clamp(20px,4.5vw,72px);
  --max:1560px;
}

/* ===== LIGHT THEME ===== */
html[data-theme="light"]{
  --bg:#F6F5F2; --bg-2:#EFEEE9; --bg-3:#E7E6E0;
  --fg:#17171A; --fg-dim:#5C5C61; --fg-faint:#9A9A9E;
  --line:rgba(0,0,0,0.13); --line-soft:rgba(0,0,0,0.07); --line-strong:rgba(0,0,0,0.24);
  --accent:#D11C29; --accent-glow:rgba(209,28,41,0.28);
  --nav-bg:rgba(246,245,242,.82); --card:#FFFFFF; --marquee-stroke:rgba(0,0,0,.05);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::selection{background:var(--accent);color:#fff;}
::-webkit-scrollbar{width:9px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:9px;}
.mono{font-family:var(--font-mono);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.accent{color:var(--accent);}
.italic{font-style:italic;}

/* scroll progress */
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:200;box-shadow:0 0 12px var(--accent-glow);}

/* page-enter veil (smooth transitions between pages) */
.veil{position:fixed;inset:0;z-index:300;background:var(--bg);pointer-events:none;transform-origin:top;transform:scaleY(0);transition:transform .6s var(--ease);}
.veil.show{transform:scaleY(1);transform-origin:bottom;}
body.loaded .boot{animation:bootFade 1s var(--ease) both;}
@keyframes bootFade{from{opacity:0;}to{opacity:1;}}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent;}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(14px);border-color:var(--line-soft);}
.nav-in{max-width:var(--max);margin:0 auto;padding:17px var(--gutter);display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:13px;}
.brand img{width:32px;height:32px;object-fit:contain;transition:transform .4s var(--ease);}
.brand:hover img{transform:rotate(-4deg) scale(1.05);}
.brand .bt{display:flex;flex-direction:column;line-height:1;}
.brand .nm{font-family:var(--font-display);font-size:19px;letter-spacing:-0.01em;}
.brand .sub{font-family:var(--font-mono);font-size:9px;letter-spacing:0.24em;text-transform:uppercase;color:var(--fg-dim);margin-top:4px;}
.nav-lk{display:flex;align-items:center;gap:34px;}
.nav-lk a{font-size:13.5px;color:var(--fg-dim);transition:color .25s;position:relative;padding:4px 0;}
.nav-lk a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.nav-lk a:hover{color:var(--fg);}
.nav-lk a:hover::after{transform:scaleX(1);}
.nav-lk a.active{color:var(--fg);}
.nav-lk a.active::after{transform:scaleX(1);background:var(--fg-faint);}
.nav-cta{font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;color:var(--fg);border:1px solid var(--line-strong);padding:10px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;transition:border-color .25s,background .25s;}
.nav-cta:hover{border-color:var(--accent);background:rgba(224,32,46,.08);}
.nav-cta .d{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
/* theme toggle */
.theme-tog{width:38px;height:38px;border-radius:999px;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:border-color .25s,background .25s,transform .25s var(--ease);}
.theme-tog:hover{border-color:var(--accent);background:rgba(224,32,46,.07);transform:translateY(-1px);}
.theme-tog .ti{width:15px;height:15px;border-radius:50%;background:var(--fg);transition:box-shadow .4s var(--ease),transform .5s var(--ease),background .4s;}
html:not([data-theme="light"]) .theme-tog .ti{box-shadow:inset -4px -3px 0 0 var(--bg);transform:rotate(-22deg);}
html[data-theme="light"] .theme-tog .ti{box-shadow:0 0 0 3px rgba(0,0,0,.05);}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px;}
.nav-burger span{width:22px;height:1.5px;background:var(--fg);transition:.3s;}
@media(max-width:880px){
  .nav-lk,.nav-cta{display:none;}
  .nav-burger{display:flex;}
  .nav.open{background:var(--nav-bg);backdrop-filter:blur(14px);border-color:var(--line-soft);}
  .nav.open .nav-in{flex-wrap:wrap;}
  .nav.open .nav-lk{display:flex;flex-direction:column;gap:0;width:100%;order:3;margin-top:12px;padding-top:8px;border-top:1px solid var(--line-soft);}
  .nav.open .nav-lk a{padding:14px 2px;font-size:17px;border-bottom:1px solid var(--line-soft);}
  .nav.open .nav-cta{display:inline-flex;order:4;width:100%;justify-content:center;margin:14px 0 4px;}
  .nav.open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav.open .nav-burger span:nth-child(2){opacity:0;}
  .nav.open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
}
.nav-right{display:flex;align-items:center;gap:14px;}

/* ===== REVEAL (slide-up, content always visible) ===== */
.rev{transform:translateY(26px);transition:transform .9s var(--ease);}
.rev.in{transform:none;}
.rev.d1{transition-delay:.07s;}.rev.d2{transition-delay:.14s;}.rev.d3{transition-delay:.21s;}.rev.d4{transition-delay:.28s;}.rev.d5{transition-delay:.35s;}

/* ===== SECTION LABEL ===== */
.slabel{display:flex;align-items:center;gap:14px;margin-bottom:34px;}
.slabel .num{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:0.04em;}
.slabel .ln{flex:1;height:1px;background:var(--line);max-width:90px;}
.slabel .tx{font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-dim);}

/* ===== BUTTONS ===== */
.btn{font-size:14px;padding:15px 26px;border-radius:999px;border:1px solid var(--line-strong);display:inline-flex;align-items:center;gap:10px;transition:transform .25s var(--ease),background .25s,border-color .25s;}
.btn:hover{transform:translateY(-2px);}
.btn .ar{transition:transform .25s var(--ease);}
.btn:hover .ar{transform:translateX(4px);}
.btn.pri{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 16px 50px -16px var(--accent-glow);}
.btn.pri:hover{filter:brightness(1.08);}
.btn.gho:hover{border-color:var(--fg);background:rgba(255,255,255,.05);}

/* ===== INTERIOR PAGE HEADER ===== */
.phead{padding:clamp(130px,20vh,220px) 0 clamp(50px,8vh,90px);border-bottom:1px solid var(--line);position:relative;overflow:hidden;}
.phead .crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:30px;display:flex;gap:10px;align-items:center;}
.phead .crumb .sep{color:var(--line-strong);}
.phead .crumb .here{color:var(--fg-dim);}
.phead h1{font-family:var(--font-display);font-weight:300;font-size:clamp(48px,9vw,140px);line-height:0.92;letter-spacing:-0.04em;}
.phead h1 em{font-style:italic;}
.phead h1 .dot{color:var(--accent);}
.phead .lede{margin-top:34px;max-width:60ch;font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:var(--fg-dim);}
.phead .lede b{color:var(--fg);font-weight:400;}

/* ===== STATS ROW (shared) ===== */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:clamp(40px,6vh,72px) clamp(16px,2vw,32px);border-left:1px solid var(--line-soft);}
.stat:first-child{border-left:none;}
.stat .n{font-family:var(--font-display);font-weight:300;font-size:clamp(44px,5.6vw,88px);line-height:0.9;letter-spacing:-0.03em;}
.stat .n .u{color:var(--accent);}
.stat .l{margin-top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-dim);}
@media(max-width:760px){.stats-in{grid-template-columns:repeat(2,1fr);}.stat:nth-child(3){border-left:none;}}

/* ===== WORK GRID (full color — the exception) ===== */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.wcard{position:relative;display:block;overflow:hidden;border:1px solid var(--line);background:var(--card);}
.wcard .img{aspect-ratio:4/3;overflow:hidden;}
.wcard .img .ph{width:100%;height:100%;background-size:cover;background-position:center;transform:scale(1.02);transition:transform 1.3s var(--ease);}
.wcard:hover .img .ph{transform:scale(1.08);}
.wcard .meta{display:flex;justify-content:space-between;align-items:baseline;padding:18px 18px 20px;}
.wcard .meta .t{font-family:var(--font-display);font-size:21px;letter-spacing:-0.01em;}
.wcard .meta .g{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-faint);}
.wcard .idx{position:absolute;top:14px;left:16px;font-family:var(--font-mono);font-size:11px;color:#fff;mix-blend-mode:difference;z-index:2;}
.wcard .stat-badge{position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:#fff;background:var(--accent);padding:5px 9px;display:flex;align-items:center;gap:6px;z-index:2;}
.wcard .stat-badge .pd{width:5px;height:5px;border-radius:50%;background:#fff;animation:pulse 1.7s ease-in-out infinite;}
.wcard .award-badge{position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:#2A2008;background:linear-gradient(180deg,#D8B45A,#B8923C);padding:5px 9px;z-index:2;display:flex;align-items:center;gap:6px;}
@keyframes pulse{50%{opacity:.3}}
@media(max-width:900px){.wgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.wgrid{grid-template-columns:1fr;}}

/* ===== FOOTER ===== */
.foot{border-top:1px solid var(--line);padding:clamp(50px,7vh,84px) 0 36px;margin-top:0;}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding-bottom:48px;border-bottom:1px solid var(--line-soft);}
.foot .brand-lg{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.foot .brand-lg img{width:40px;height:40px;}
.foot .brand-lg .nm{font-family:var(--font-display);font-size:24px;}
.foot .brand-lg .bt{display:flex;flex-direction:column;line-height:1;}
.foot .brand-lg .sub{font-family:var(--font-mono);font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--fg-dim);margin-top:6px;}
.foot-top p{max-width:38ch;font-size:14px;line-height:1.6;color:var(--fg-dim);}
.fcol h4{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:18px;}
.fcol a,.fcol div{display:block;font-size:14px;color:var(--fg-dim);margin-bottom:12px;transition:color .25s;}
.fcol a:hover{color:var(--fg);}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;color:var(--fg-faint);}
.foot-bot a:hover{color:var(--fg);}
@media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr;}.foot .brand-lg{grid-column:1/-1;}}

/* ===== GRAYSCALE IMAGERY (default everywhere; .color opts out) ===== */
.gray .ph,.gray img,.ph.gray,img.gray{filter:grayscale(1) contrast(1.1) brightness(.86);}

/* ===== reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .rev{transform:none !important;}
  .veil{display:none !important;}
}