:root{
  --bg:#151310;
  --panel:#201D18;
  --line:#38332A;
  --text:#F5F2EA;
  --text-muted:#B6B0A4;
  --text-faint:#7C766A;
  --orange:#EA6B36;
  --orange-2:#F2814F;
  --ink:#1D1B17;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:'Archivo', sans-serif; font-weight:800; letter-spacing:-0.02em; color:var(--text); }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.08em; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }
.wrap{ max-width:1320px; margin:0 auto; padding:0 56px; }
@media (max-width:900px){ .wrap{ padding:0 24px; } }

/* fixed corner mark — signature element */
.corner-mark{
  position:fixed; right:28px; bottom:28px; width:64px; height:64px; z-index:200;
  opacity:0.9; pointer-events:none;
}
.corner-mark img{ width:100%; height:100%; animation:spin 18s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .corner-mark img{ animation:none; } }
@media (max-width:700px){ .corner-mark{ width:44px; height:44px; right:16px; bottom:16px; } }

/* header */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:28px 0;
  mix-blend-mode:normal;
}
.nav{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; }
.brand img{ height:40px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);
  transition:color .2s;
}
.nav-links a:hover{ color:var(--orange-2); }
.nav-cta{
  background:var(--orange); color:var(--ink); font-weight:700;
  font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:13px 24px; transition:background .2s, transform .15s;
}
.nav-cta:hover{ background:var(--orange-2); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--text); padding:10px 14px; font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em;}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
  .nav-links.open{
    display:flex; flex-direction:column; gap:22px; align-items:flex-start;
    position:fixed; top:84px; left:0; right:0; background:var(--bg);
    padding:28px 24px 32px; border-bottom:1px solid var(--line);
  }
  .nav-links.open .nav-cta{ display:inline-block; }
}

/* hero */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:140px 0 80px; overflow:hidden;
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0.55; }
.hero-video-scrim{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(21,19,16,0.55) 0%, rgba(21,19,16,0.35) 40%, rgba(21,19,16,0.92) 100%); }
.hero-spotlight{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(circle 340px at var(--sx,50%) var(--sy,50%), rgba(234,107,54,0.20), rgba(21,19,16,0.0) 70%);
  transition:opacity .4s ease;
}
.hero.spotlight-on .hero-spotlight{ opacity:1; }
.hero-ripple{
  position:fixed; z-index:5; width:12px; height:12px; border-radius:50%;
  background:rgba(234,107,54,0.55); pointer-events:none; transform:translate(-50%,-50%) scale(1);
  animation:rippleOut .8s ease-out forwards;
}
@keyframes rippleOut{
  0%{ width:12px; height:12px; opacity:.8; }
  100%{ width:220px; height:220px; opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .hero-spotlight{ display:none; } }
.hero-mark{
  position:absolute; top:50%; right:-10%; width:1000px; height:1000px;
  transform:translateY(-50%); opacity:0.08; z-index:0; pointer-events:none;
}
.hero-mark img{ width:100%; height:100%; animation:spin 90s linear infinite; }
@media (prefers-reduced-motion: reduce){ .hero-mark img{ animation:none; } }
.hero-inner{ position:relative; z-index:1; }
.hero .eyebrow{
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--orange-2);
  display:flex; align-items:center; gap:14px; margin-bottom:34px;
}
.hero .eyebrow::before{ content:''; width:44px; height:2px; background:var(--orange); }
.hero h1{
  font-size:clamp(48px,9vw,150px); line-height:0.92; letter-spacing:-0.03em; max-width:1200px;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 span{ display:inline-block; }
.hero h1 .accent{ color:var(--orange); -webkit-text-stroke:0; }
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
  margin-top:60px;
}
.hero-sub{ font-size:18px; color:var(--text-muted); max-width:440px; }
.btn-row{ display:flex; gap:18px; flex-wrap:wrap; }
.btn-primary{
  background:var(--orange); color:var(--ink); font-weight:700;
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:19px 34px; transition:background .2s;
}
.btn-primary:hover{ background:var(--orange-2); }
.btn-ghost{
  border:1px solid var(--line); color:var(--text);
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:19px 34px; transition:border-color .2s, color .2s;
}
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange-2); }

.scroll-cue{
  position:absolute; left:56px; bottom:36px; display:flex; align-items:center; gap:12px;
  font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint);
}
.scroll-cue .dash{ width:30px; height:1px; background:var(--text-faint); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
@media (max-width:700px){ .scroll-cue{ display:none; } }

/* orange color-block stat section */
.stat-block{
  background:var(--orange); color:var(--ink); padding:90px 0;
  display:grid; grid-template-columns:repeat(2,1fr);
}
@media (max-width:640px){ .stat-block{ grid-template-columns:1fr; } }
.stat-block div{ padding:0 56px; border-left:1px solid rgba(29,27,23,0.2); }
.stat-block div:first-child{ border-left:none; }
@media (max-width:640px){
  .stat-block div{ border-left:none; border-top:1px solid rgba(29,27,23,0.2); padding:28px 24px; }
  .stat-block div:first-child{ border-top:none; }
}
.stat-block b{ font-family:'Archivo', sans-serif; font-weight:900; font-size:clamp(40px,5vw,68px); display:block; line-height:1; }
.stat-block span{ font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; display:block; margin-top:14px; }

/* section shell */
.section{ padding:130px 0; position:relative; }
.section-tight{ padding:90px 0; }
.section-tag{
  font-family:'IBM Plex Mono'; font-size:12px; color:var(--orange-2); text-transform:uppercase; letter-spacing:0.12em;
  margin-bottom:20px; display:block;
}
.section-head{ margin-bottom:70px; max-width:820px; }
.section-head h2{ font-size:clamp(32px,4.8vw,60px); line-height:1.02; }
.section-head p{ color:var(--text-muted); font-size:16px; margin-top:22px; max-width:520px; }

/* about — big split */
.about-split{ display:grid; grid-template-columns:0.55fr 0.45fr; gap:70px; align-items:start; }
@media (max-width:900px){ .about-split{ grid-template-columns:1fr; gap:40px; } }
.about-split p{ color:var(--text-muted); font-size:17px; margin-bottom:20px; max-width:560px; }
.value-stack div{ padding:22px 0; border-top:1px solid var(--line); }
.value-stack div:last-child{ border-bottom:1px solid var(--line); }
.value-stack h4{ font-family:'Archivo'; font-weight:700; font-size:16px; margin-bottom:6px; }
.value-stack p{ font-size:13px; color:var(--text-faint); margin:0; max-width:100%; }

/* services — huge index rows */
.service-block{
  display:grid; grid-template-columns:200px 1fr; gap:32px;
  padding:44px 0; border-top:1px solid var(--line); align-items:center;
  position:relative; overflow:hidden;
}
.service-block:last-child{ border-bottom:1px solid var(--line); }
.service-block::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--orange); z-index:0;
  transition:width .4s cubic-bezier(.22,.61,.36,1); opacity:0.07;
}
.service-block:hover::before{ width:100%; }
.service-num{ font-family:'Archivo'; font-weight:900; font-size:clamp(48px,6vw,90px); color:var(--line); line-height:1; position:relative; z-index:1; transition:color .3s; }
.service-block:hover .service-num{ color:var(--orange); }
.service-body{ position:relative; z-index:1; }
.service-body h3{ font-size:24px; margin-bottom:10px; }
.service-body p{ color:var(--text-muted); font-size:14.5px; max-width:600px; }
@media (max-width:700px){ .service-block{ grid-template-columns:1fr; gap:8px; } }

/* projects — asymmetric bold grid */
.project-bold-grid{
  display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:auto auto; gap:24px;
}
@media (max-width:900px){ .project-bold-grid{ grid-template-columns:1fr; } }
.pcard{ position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); }
.pcard.tall{ grid-row:span 2; aspect-ratio:4/5; }
.pcard.wide{ aspect-ratio:16/10; }
.pcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.pcard:hover img{ transform:scale(1.07); }
.pcard::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85)); z-index:1; }
.pcard.plain::after{ content:none; }
.pcard.plain img{ transition:none; }
.pcard.plain:hover img{ transform:none; }
.pcard-label{ position:absolute; left:28px; bottom:26px; right:28px; z-index:2; }
.pcard-label .mono{ font-size:11px; color:var(--orange-2); display:block; margin-bottom:8px; }
.pcard-label h4{ font-family:'Archivo'; font-weight:700; font-size:22px; }

/* why — diagonal-tag cards */
.why-bold-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.why-bold{ background:var(--bg); padding:34px 26px; transition:background .25s; }
.why-bold:hover{ background:var(--panel); }
.why-bold .num{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--orange-2); margin-bottom:18px; }
.why-bold h4{ font-family:'Archivo'; font-size:16px; margin-bottom:8px; }
.why-bold p{ font-size:13px; color:var(--text-faint); }

/* process — bold horizontal bar */
.process-bar{ position:relative; }
.process-track{ position:relative; height:2px; background:var(--line); margin-bottom:0; }
.process-track-fill{ position:absolute; left:0; top:0; height:2px; background:var(--orange); width:0%; transition:width 1.4s cubic-bezier(.22,.61,.36,1); }
.process-stops{ display:grid; grid-template-columns:repeat(6,1fr); margin-top:36px; }
@media (max-width:860px){ .process-stops{ grid-template-columns:repeat(3,1fr); row-gap:36px; } }
@media (max-width:520px){ .process-stops{ grid-template-columns:1fr; } }
.pstop{ padding-right:20px; }
.pstop .dot{ width:12px; height:12px; border-radius:50%; background:var(--line); margin-bottom:18px; transition:background .3s; }
.pstop.on .dot{ background:var(--orange); }
.pstop .mono{ font-size:10.5px; color:var(--orange-2); display:block; margin-bottom:10px; }
.pstop h4{ font-family:'Archivo'; font-size:15px; margin-bottom:6px; }
.pstop p{ font-size:12px; color:var(--text-faint); }

/* testimonials — big quote slabs */
.testi-slab{ border-top:1px solid var(--line); padding:44px 0; display:grid; grid-template-columns:1fr 280px; gap:40px; }
.testi-slab:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:760px){ .testi-slab{ grid-template-columns:1fr; gap:16px; } }
.testi-slab p.quote{ font-family:'Archivo'; font-weight:600; font-size:clamp(19px,2.4vw,26px); line-height:1.35; letter-spacing:-0.01em; }
.testi-who{ align-self:end; }
.testi-who .who{ font-weight:700; font-size:14px; }
.testi-who .role{ font-size:12px; color:var(--text-faint); margin-top:4px; }

/* CTA — full orange block */
.cta-bold{ background:var(--orange); color:var(--ink); padding:130px 0; text-align:left; }
.cta-bold .section-tag{ color:var(--ink); opacity:0.7; }
.cta-bold h2{ color:var(--ink); font-size:clamp(34px,6vw,84px); line-height:0.98; max-width:900px; }
.cta-bold-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-top:56px; }
.cta-contact{ display:flex; flex-direction:column; gap:8px; }
.cta-contact a{ font-family:'IBM Plex Mono'; font-size:14px; }
.cta-bold .btn-primary{ background:var(--ink); color:var(--text); }
.cta-bold .btn-primary:hover{ background:#000; }

footer{ background:var(--bg); color:var(--text-faint); padding:36px 0; font-size:12px; border-top:1px solid var(--line); }
.footer-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-row img{ height:26px; width:auto; }
.footer-links{ display:flex; gap:22px; }
.footer-links a:hover{ color:var(--orange-2); }

/* reveal system */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-d1.in-view{ transition-delay:.06s; } .reveal-d2.in-view{ transition-delay:.14s; }
.reveal-d3.in-view{ transition-delay:.22s; } .reveal-d4.in-view{ transition-delay:.3s; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:translateY(0);} }
.rise{ opacity:0; animation:riseIn .9s cubic-bezier(.22,.61,.36,1) forwards; }
.rise-1{ animation-delay:.1s;} .rise-2{ animation-delay:.26s;} .rise-3{ animation-delay:.42s;} .rise-4{ animation-delay:.58s;}
@media (prefers-reduced-motion: reduce){ .rise,.reveal{ animation:none!important; transition:none!important; opacity:1!important; transform:none!important; } }

/* interior-page header — always solid (no video behind it) */
header.header-solid{
  background:rgba(21,19,16,0.92) !important; backdrop-filter:blur(10px) !important;
  border-bottom:1px solid var(--line) !important;
}

/* interior page hero (no video) */
.page-hero{ padding:170px 0 70px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(36px,6vw,72px); line-height:1.02; max-width:900px; }
.page-hero p{ color:var(--text-muted); font-size:17px; margin-top:22px; max-width:560px; }

.section-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:70px; }
.section-head-row .section-head{ margin-bottom:0; }

.btn-outline{
  border:1px solid var(--line); color:var(--text);
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:15px 28px; transition:border-color .2s, color .2s; display:inline-block;
}
.btn-outline:hover{ border-color:var(--orange); color:var(--orange-2); }

/* services — onedraft-style alternating photo rows (dark theme) */
.od-service{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  padding:64px 0; border-top:1px solid var(--line);
}
.od-service:last-child{ border-bottom:1px solid var(--line); }
.od-service:nth-child(even) .od-media{ order:2; }
.od-media{ position:relative; overflow:hidden; aspect-ratio:5/4; background:var(--panel); border:1px solid var(--line); }
.od-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.od-service:hover .od-media img{ transform:scale(1.05); }
.od-body .service-index{ font-size:11px; color:var(--orange-2); display:block; margin-bottom:16px; }
.od-body h3{ font-size:clamp(22px,2.6vw,30px); margin-bottom:14px; }
.od-body p{ color:var(--text-muted); font-size:15px; max-width:460px; }
@media (max-width:820px){
  .od-service{ grid-template-columns:1fr; gap:24px; padding:44px 0; }
  .od-service:nth-child(even) .od-media{ order:0; }
}

/* compact service teaser grid (Home page) */
.service-teaser-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:900px){ .service-teaser-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .service-teaser-grid{ grid-template-columns:1fr; } }
.service-teaser{ background:var(--bg); padding:36px 28px; transition:background .2s; }
.service-teaser:hover{ background:var(--panel); }
.service-teaser .mono{ font-size:11px; color:var(--orange-2); display:block; margin-bottom:16px; }
.service-teaser h4{ font-family:'Archivo'; font-size:17px; margin-bottom:8px; }
.service-teaser p{ font-size:13px; color:var(--text-faint); }

/* projects page — simple grid, square cards */
.project-grid-simple{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:760px){ .project-grid-simple{ grid-template-columns:1fr; } }
.pcard.square{ aspect-ratio:1/1; }

/* consultation / contact page */
.contact-grid{ display:grid; grid-template-columns:0.55fr 0.45fr; gap:70px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
.contact-line{ padding:20px 0; border-top:1px solid var(--line); }
.contact-line:last-child{ border-bottom:1px solid var(--line); }
.contact-line .label{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--orange-2); text-transform:uppercase; letter-spacing:.1em; display:block; margin-bottom:8px; }
.contact-line a, .contact-line span{ font-size:17px; font-family:'Archivo'; font-weight:700; }

.consult-form{ display:flex; flex-direction:column; gap:22px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field label{ display:block; font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; }
.field input, .field select, .field textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--text);
  font-family:'Manrope'; font-size:15px; padding:14px 16px; transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--orange); }
.field textarea{ resize:vertical; min-height:120px; }
.field select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%); background-position:calc(100% - 22px) center, calc(100% - 17px) center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.consult-form .btn-primary{ align-self:flex-start; border:none; cursor:pointer; }

/* photo service cards — used on Home page teaser (image on top, label below) */
.service-photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:900px){ .service-photo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .service-photo-grid{ grid-template-columns:1fr; } }
.service-photo-card{ position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); }
.service-photo-card .sp-media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.service-photo-card .sp-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.service-photo-card:hover .sp-media img{ transform:scale(1.06); }
.service-photo-card .sp-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,19,16,0) 40%, rgba(21,19,16,0.85) 100%); }
.service-photo-card .sp-label{ position:absolute; left:20px; right:20px; bottom:18px; z-index:1; }
.service-photo-card .sp-label h4{ font-family:'Archivo'; font-size:16px; color:#fff; }