/* ============================================================
   Aedifico Web Studio — dark editorial
   ============================================================ */

:root{
  --void:#08080A;
  --ink:#0D0D10;
  --ink-2:#121216;
  --raise:#16161B;

  --bone:#F2EEE6;
  --bone-2:rgba(242,238,230,.72);
  --bone-3:rgba(242,238,230,.50);
  --bone-4:rgba(242,238,230,.30);

  --gold:#D8B65C;
  --gold-hi:#F0DCA4;
  --gold-dp:#A8842F;

  --line:rgba(242,238,230,.11);
  --line-2:rgba(242,238,230,.06);

  --serif:'Bodoni Moda',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;

  --shell:1220px;
  --pad:clamp(20px,5vw,44px);
  --ease:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box;}

[hidden]{display:none !important;}

html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.04;}
p{margin:0;}
ul,ol{margin:0; padding:0; list-style:none;}

.mono{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:400;
}

.shell{max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); min-width:0;}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#000; padding:12px 20px; font-weight:600;
}
.skip:focus{left:12px; top:12px;}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;}

/* ---------- film grain ---------- */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:.038; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:none;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav-in{display:flex; align-items:center; gap:28px; padding-block:16px;}

.logo{display:flex; align-items:center; gap:11px; flex:none;}
.logo-mark{color:var(--gold); display:flex; transition:transform .5s var(--ease);}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.06);}
.logo-txt{font-family:var(--serif); font-size:20px; letter-spacing:-.01em; line-height:1;}
.logo-txt em{font-style:italic; color:var(--gold);}
.logo-txt small{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-4); margin-top:5px;
}

.nav-links{display:flex; gap:30px; margin-left:auto; font-size:14px; color:var(--bone-2);}
.nav-links a{position:relative; padding-block:4px;}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .35s var(--ease);
}
.nav-links a:hover{color:var(--bone);}
.nav-links a:hover::after{width:100%;}

.nav-cta{flex:none;}

.burger{
  display:none; margin-left:auto; background:none; border:1px solid var(--line);
  width:44px; height:40px; border-radius:6px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{width:17px; height:1.5px; background:var(--bone); transition:transform .3s var(--ease), opacity .3s;}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg);}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg);}

.mobile-menu{
  display:flex; flex-direction:column; gap:2px;
  padding:10px var(--pad) 26px;
  background:rgba(8,8,10,.96); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.mobile-menu a:not(.btn){
  padding:14px 0; border-bottom:1px solid var(--line-2);
  font-family:var(--serif); font-size:22px;
}
.mobile-menu .btn{margin-top:18px; justify-content:center;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:2px;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  border:1px solid transparent; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  white-space:nowrap; font-family:var(--sans);
}
.btn span{transition:transform .35s var(--ease);}
.btn:hover span{transform:translateX(4px);}

.btn-gold{background:var(--gold); color:#0A0A0C;}
.btn-gold:hover{background:var(--gold-hi); transform:translateY(-1px);}

.btn-ghost{border-color:var(--line); color:var(--bone);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

.btn-lg{padding:15px 28px; font-size:14px;}
.btn-full{width:100%; justify-content:center;}

/* ============================================================
   RULE LABEL  (mono · hairline · mono)
   ============================================================ */
.rule-label{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px;
  color:var(--bone-4); margin-bottom:44px;
}
.rule-label .rule{flex:1; height:1px; background:var(--line); min-width:20px;}
.rule-label .mono{white-space:nowrap;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:2;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:134px 0 84px; overflow:hidden;
}
.hero-glow{
  position:absolute; z-index:0; pointer-events:none;
  width:1100px; height:1100px; left:var(--gx,50%); top:var(--gy,42%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(216,182,92,.13) 0%, rgba(216,182,92,.045) 32%, transparent 66%);
  transition:left 1.4s var(--ease), top 1.4s var(--ease);
}
.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 80% 65% at 50% 45%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 45%, #000 30%, transparent 100%);
}
.hero .shell{position:relative; z-index:2;}

.hero-h1{
  font-family:var(--serif);
  font-size:clamp(40px,7vw,98px);
  letter-spacing:-.028em;
  line-height:.98;
  margin-bottom:40px;
}
.hero-h1 em{
  font-style:italic; color:var(--gold);
  background:linear-gradient(100deg,var(--gold-dp),var(--gold-hi) 45%,var(--gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.hero-body{display:flex; flex-wrap:wrap; align-items:flex-end; gap:40px 60px; min-width:0;}
.lede{
  font-size:clamp(15px,1.6vw,17.5px); line-height:1.7;
  color:var(--bone-2); max-width:50ch; font-weight:300; min-width:0;
}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}

.status{
  display:flex; flex-wrap:wrap; gap:10px 30px; align-items:center;
  margin-top:52px; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bone-4);
}
.status b{color:var(--gold); font-weight:400;}
.dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold); margin-right:8px; vertical-align:middle;
  box-shadow:0 0 0 0 rgba(216,182,92,.55); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(216,182,92,0);}
  100%{box-shadow:0 0 0 0 rgba(216,182,92,0);}
}

.scroll-hint{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  width:1px; height:52px; background:var(--line); overflow:hidden; z-index:2;
}
.scroll-hint span{
  position:absolute; inset:0; background:var(--gold);
  animation:trickle 2.6s var(--ease) infinite;
}
@keyframes trickle{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  position:relative; z-index:2;
  border-block:1px solid var(--line);
  background:var(--ink);
  overflow:hidden; padding:17px 0;
}
.marquee-track{
  display:flex; align-items:center; gap:34px; width:max-content;
  animation:slide 44s linear infinite;
}
.marquee span{
  font-family:var(--serif); font-size:clamp(19px,2.4vw,30px);
  color:var(--bone-3); white-space:nowrap; letter-spacing:-.01em;
}
.marquee i{color:var(--gold); font-style:normal; font-size:11px;}
@keyframes slide{to{transform:translateX(-50%);}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{position:relative; z-index:2; padding:clamp(68px,7.5vw,104px) 0;}

.h2{
  font-family:var(--serif);
  font-size:clamp(32px,4.7vw,60px);
  letter-spacing:-.025em; line-height:1.02;
}
.h2 em{
  font-style:italic; color:var(--gold);
  background:linear-gradient(100deg,var(--gold-dp),var(--gold-hi) 50%,var(--gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.sec-head{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:34px 70px; align-items:end; margin-bottom:clamp(48px,6vw,80px);
}
.sec-sub{color:var(--bone-2); font-weight:300; font-size:16px; line-height:1.72; max-width:56ch;}
.sec-sub b{color:var(--bone); font-weight:600;}

/* ============================================================
   WORK CARDS
   ============================================================ */
.work{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.4vw,44px);}

.card{
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border:1px solid var(--line); border-radius:5px; overflow:hidden;
  transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover{
  border-color:rgba(216,182,92,.34);
  transform:translateY(-5px);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.9), 0 0 42px -22px rgba(216,182,92,.34);
}

.frame{padding:12px 12px 0;}
.chrome{
  display:flex; align-items:center; gap:6px;
  background:var(--raise); border:1px solid var(--line);
  border-bottom:0; border-radius:5px 5px 0 0; padding:9px 13px;
}
.chrome i{width:8px; height:8px; border-radius:50%; background:var(--bone-4); flex:none;}
.chrome .url{
  margin-left:10px; color:var(--bone-4); font-size:9.5px; letter-spacing:.05em;
  text-transform:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.shot{
  height:clamp(230px,26vw,330px); overflow:hidden;
  border:1px solid var(--line); border-top:0; background:var(--void);
}
.shot img{
  width:100%; height:auto;
  transition:transform 5.5s var(--ease);
  will-change:transform;
}
.card:hover .shot img{transform:translateY(calc(-100% + clamp(230px,26vw,330px)));}

.card-body{padding:26px clamp(20px,2.4vw,30px) 30px;}
.card-top{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:13px;}
.card-body h3{font-family:var(--serif); font-size:clamp(23px,2.5vw,30px); letter-spacing:-.02em;}
.chip{
  color:var(--gold); border:1px solid rgba(216,182,92,.28);
  padding:4px 10px; border-radius:100px; font-size:9.5px; white-space:nowrap; flex:none;
}
.card-body p{color:var(--bone-2); font-size:14.5px; line-height:1.68; font-weight:300;}

.tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:18px;}
.tags li{
  color:var(--bone-4); border:1px solid var(--line);
  padding:5px 10px; border-radius:2px; font-size:9.5px;
  font-family:var(--mono); letter-spacing:.11em; text-transform:uppercase;
}

.card-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:22px;
  color:var(--gold); font-size:13px; font-weight:600;
  border-bottom:1px solid rgba(216,182,92,.3); padding-bottom:3px;
  transition:border-color .3s, gap .3s var(--ease);
}
.card-link:hover{border-color:var(--gold); gap:11px;}

/* ---- featured full-width card ---- */
.card--wide{grid-column:1 / -1;}
.card--wide .shot{height:clamp(240px,26vw,340px);}
/* This capture is one viewport tall, so scroll a fixed amount rather than to the
   bottom edge, which keeps the host's floating badge out of frame. */
.card--wide:hover .shot img{transform:translateY(-26%);}

@media (min-width:901px){
  .card--wide{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center;}
  .card--wide .frame{padding:14px 0 14px 14px;}
  .card--wide .shot{height:clamp(280px,25vw,360px);}
  .card--wide .card-body{padding:30px clamp(24px,2.6vw,34px);}
}

/* ============================================================
   AUDIT DOC
   ============================================================ */
.audit-sec{background:linear-gradient(180deg,transparent,rgba(216,182,92,.035),transparent);}

.doc{
  background:var(--ink); border:1px solid var(--line); border-radius:5px;
  overflow:hidden; box-shadow:0 30px 80px -40px rgba(0,0,0,.95);
}
.doc-head{
  display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; align-items:center;
  padding:13px clamp(20px,3vw,36px);
  background:var(--raise); border-bottom:1px solid var(--line); color:var(--bone-4);
}
.doc-head .doc-date{color:var(--gold);}

.doc-lead{padding:clamp(30px,4.4vw,54px) clamp(20px,3vw,36px);}
.doc-h{
  font-family:var(--serif); font-size:clamp(22px,3.1vw,40px);
  letter-spacing:-.02em; line-height:1.14; max-width:27ch; margin-bottom:38px;
}
.doc-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;}
.doc-stats div{border-top:1px solid var(--line); padding-top:14px;}
.doc-stats b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(32px,4.6vw,56px); color:var(--gold); line-height:1; letter-spacing:-.02em;
}
.doc-stats b span{font-size:.45em; vertical-align:super; margin-left:2px;}
.doc-stats small{display:block; color:var(--bone-4); margin-top:9px; font-size:9.5px;}

.doc-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
  border-top:1px solid var(--line);
}
.doc-block{padding:clamp(26px,3.2vw,38px) clamp(20px,3vw,36px);}
.doc-block+.doc-block{border-left:1px solid var(--line);}
.doc-block h4{color:var(--gold); margin-bottom:20px;}

.tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
.tbl th{
  text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone-4); font-weight:400;
  padding:0 0 10px; border-bottom:1px solid var(--line);
}
.tbl th:not(:first-child),.tbl td:not(:first-child){text-align:right; width:1%; white-space:nowrap; padding-left:14px;}
.tbl td{padding:11px 0; border-bottom:1px solid var(--line-2); color:var(--bone-2); font-weight:300;}
.tbl tr:last-child td{border-bottom:0;}
.tbl tr.me td{color:var(--gold); font-weight:500;}
.tbl tr.me td:first-child{position:relative; padding-left:14px;}
.tbl tr.me td:first-child::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:15px; background:var(--gold);
}

.lvl{
  display:inline-block; padding:2px 8px; border-radius:2px;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
}
.lvl.low{background:rgba(216,182,92,.14); color:var(--gold-hi);}
.lvl.mid{background:rgba(242,238,230,.07); color:var(--bone-3);}
.lvl.high{background:rgba(242,238,230,.045); color:var(--bone-4);}
.lvl.new{background:rgba(216,182,92,.2); color:var(--gold-hi);}

.src{margin-top:16px; color:var(--bone-4); font-size:9px; letter-spacing:.06em; text-transform:none; line-height:1.6;}

.doc-math{padding:clamp(26px,3.2vw,38px) clamp(20px,3vw,36px); border-top:1px solid var(--line); background:rgba(216,182,92,.022);}
.doc-math h4{color:var(--gold); margin-bottom:22px;}
.math-row{
  display:grid; grid-template-columns:minmax(0,1fr) 150px 210px; gap:10px 24px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line-2);
}
.math-row span{color:var(--bone-2); font-size:14px; font-weight:300;}
.math-row b{font-family:var(--serif); font-size:22px; font-weight:400; color:var(--bone); white-space:nowrap; text-align:right;}
.math-row small{color:var(--bone-4); font-size:9px; letter-spacing:.06em; text-transform:none; text-align:right;}
.math-row.total{border-bottom:0; border-top:1px solid var(--line); margin-top:4px;}
.math-row.total b{color:var(--gold); font-size:30px;}
.math-row.total span{color:var(--bone); font-weight:500;}

.disclaimer{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line-2);
  color:var(--bone-3); font-size:13px; line-height:1.7; font-weight:300; max-width:74ch;
}

.audit-cta{display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:44px;}
.audit-cta p{font-family:var(--serif); font-size:clamp(21px,2.7vw,31px); letter-spacing:-.02em;}

/* ============================================================
   SERVICES
   ============================================================ */
.svc{border-top:1px solid var(--line);}
.svc-item{
  display:grid; grid-template-columns:80px minmax(0,1fr);
  gap:20px 34px; padding:clamp(30px,4vw,50px) 0;
  border-bottom:1px solid var(--line);
  transition:background .45s var(--ease), padding-left .45s var(--ease);
}
.svc-item:hover{background:rgba(242,238,230,.017); padding-left:16px;}
.svc-num{color:var(--gold); font-size:11px; padding-top:10px;}
.svc-item h3{font-family:var(--serif); font-size:clamp(25px,3.3vw,42px); letter-spacing:-.022em; margin-bottom:15px;}
.svc-item p{color:var(--bone-2); font-size:15px; line-height:1.72; font-weight:300; max-width:70ch;}

/* ============================================================
   SPECS
   ============================================================ */
.build-sec{background:var(--ink);}
.specs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.spec{background:var(--ink); padding:clamp(24px,2.7vw,34px); transition:background .4s var(--ease);}
.spec:hover{background:var(--ink-2);}
.spec b{
  display:block; font-family:var(--serif); font-size:20px; font-weight:400;
  letter-spacing:-.015em; margin-bottom:11px;
}
.spec p{color:var(--bone-3); font-size:13.5px; line-height:1.66; font-weight:300;}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.6vw,34px); counter-reset:s;}
.step{border-top:1px solid var(--gold); padding-top:22px; position:relative;}
.step::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:0; background:var(--gold-hi);
  transition:width 1.1s var(--ease);
}
.step.in::before{width:100%;}
.step-n{display:block; color:var(--gold); margin-bottom:16px; font-size:10.5px;}
.step h3{font-family:var(--serif); font-size:clamp(21px,2.4vw,29px); letter-spacing:-.02em; margin-bottom:12px;}
.step p{color:var(--bone-3); font-size:14px; line-height:1.68; font-weight:300;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-sec{background:linear-gradient(180deg,transparent,rgba(216,182,92,.045));}
.contact-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(40px,6vw,80px); align-items:start;}
.contact-copy .h2{margin-bottom:26px;}

.contact-list{margin-top:36px; border-top:1px solid var(--line);}
.contact-list li{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--line-2);
}
.contact-list span{color:var(--bone-4); font-size:10.5px;}
.contact-list b{color:var(--gold); font-weight:400; font-size:12px;}

.form{
  background:var(--ink); border:1px solid var(--line); border-radius:5px;
  padding:clamp(26px,3.2vw,40px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95);
}
.field{margin-bottom:19px;}
.field label{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bone-4); margin-bottom:9px;
}
.field label em{font-style:normal; text-transform:none; letter-spacing:.04em; opacity:.65;}
.field input,.field textarea{
  width:100%; background:var(--void); border:1px solid var(--line); border-radius:2px;
  color:var(--bone); font-family:var(--sans); font-size:15px; padding:13px 15px;
  transition:border-color .3s, background .3s; resize:vertical;
}
.field input::placeholder{color:var(--bone-4);}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--gold); background:#0A0A0D;}

.form-alt{margin-top:18px; text-align:center; color:var(--bone-4); font-size:13px;}
.form-alt a{color:var(--gold); border-bottom:1px solid rgba(216,182,92,.34);}
.form-alt a:hover{border-color:var(--gold);}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative; z-index:2; border-top:1px solid var(--line); padding:52px 0 40px; background:var(--ink);}
.foot-in{display:grid; gap:26px;}
.foot-brand{display:flex; align-items:center; gap:12px;}
.foot-brand .logo-mark{color:var(--gold);}
.foot-brand b{display:block; font-family:var(--serif); font-size:19px; font-weight:400; letter-spacing:-.01em;}
.foot-brand small{display:block; color:var(--bone-4); font-size:12px; margin-top:3px;}
.foot-links{display:flex; flex-wrap:wrap; gap:14px 28px; font-size:13.5px; color:var(--bone-3);}
.foot-links a:hover{color:var(--gold);}
.foot-fine{color:var(--bone-4); font-size:9.5px; letter-spacing:.09em; padding-top:22px; border-top:1px solid var(--line-2);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1061px){
  .mobile-menu{display:none !important;}
}

@media (max-width:1060px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .burger{display:flex;}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:900px){
  .sec-head{grid-template-columns:1fr; align-items:start;}
  .work{grid-template-columns:1fr;}
  .contact-wrap{grid-template-columns:1fr;}
  .doc-cols{grid-template-columns:1fr;}
  .doc-block+.doc-block{border-left:0; border-top:1px solid var(--line);}
  .doc-stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px;}
  .math-row{grid-template-columns:1fr auto; }
  .math-row small{grid-column:1/-1; text-align:left; margin-top:-6px;}
}

@media (max-width:620px){
  .hero{padding-top:118px; min-height:auto;}
  .hero-h1{font-size:clamp(36px,10.4vw,58px);}
  .hero-ctas{width:100%; flex-direction:column; align-items:stretch;}
  .hero-ctas .btn{width:100%; justify-content:center;}
  .status{gap:9px 20px; font-size:10px;}
  .specs{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .svc-item{grid-template-columns:1fr; gap:12px;}
  .svc-num{padding-top:0;}
  .rule-label{gap:8px 12px;}
  .rule-label .mono{font-size:10px; white-space:normal;}
  .rule-label .rule{min-width:14px;}
  .card-top{flex-direction:column; align-items:flex-start; gap:8px;}
  .scroll-hint{display:none;}
  .audit-cta .btn{width:100%; justify-content:center;}
}

/* ============================================================
   MOTION / PRINT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .reveal{opacity:1; transform:none;}
  .grain{animation:none;}
  .marquee-track{animation:none;}
  .card:hover .shot img{transform:none;}
}

/* ============================================================
   MULTI-PAGE COMPONENTS
   ============================================================ */

/* ---------- breadcrumbs ---------- */
.crumbs{max-width:var(--shell); margin:0 auto; padding:96px var(--pad) 0;}
.crumbs ol{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bone-4);}
.crumbs li+li::before{content:"/"; margin-right:8px; color:var(--line);}
.crumbs a:hover{color:var(--gold);}
.crumbs [aria-current]{color:var(--bone-3);}

/* ---------- page head ---------- */
.page-head{padding-top:44px; padding-bottom:0;}
.section--tight{padding-bottom:0;}
.crumbs+main .page-head,
.crumbs~.page-head{padding-top:32px;}
.h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,6.2vw,80px); line-height:1.0; letter-spacing:-.028em;
  max-width:17ch; margin-bottom:28px;
}
.h1 em, .cta-in .h2 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--gold-dp),var(--gold-hi) 50%,var(--gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.h3{font-family:var(--serif); font-weight:400; font-size:clamp(23px,2.7vw,32px);
    letter-spacing:-.02em; line-height:1.15;}
.page-head .lede{max-width:62ch;}
.page-head .lede b{color:var(--bone); font-weight:600;}

/* nav needs clearance on pages without breadcrumbs */
main>.page-head:first-child{padding-top:132px;}

/* ---------- service cards ---------- */
.svc-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px);}
.svc-card{
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border:1px solid var(--line); border-radius:5px; padding:clamp(22px,2.4vw,30px);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
  display:flex; flex-direction:column; gap:11px;
}
.svc-card:hover{border-color:rgba(216,182,92,.34); transform:translateY(-4px);}
.svc-card h3{font-family:var(--serif); font-size:clamp(21px,2.2vw,27px); letter-spacing:-.02em;}
.svc-card p{color:var(--bone-3); font-size:14px; line-height:1.65; font-weight:300; flex:1;}
.svc-card .card-link{margin-top:6px; border:0; padding:0;}
.svc-item h2{font-family:var(--serif); font-weight:400;
  font-size:clamp(25px,3.3vw,40px); letter-spacing:-.022em; margin-bottom:15px;}

/* ---------- detail grid ---------- */
.detail-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);}
.detail{background:var(--void); padding:clamp(26px,3vw,38px); transition:background .4s var(--ease);}
.detail:hover{background:var(--ink);}
.detail h2{font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.018em; margin-bottom:13px;}
.detail p{color:var(--bone-3); font-size:14.5px; line-height:1.7; font-weight:300;}

/* ---------- prose ---------- */
.prose{max-width:72ch; font-size:16.5px; line-height:1.78; color:var(--bone-2); font-weight:300;}
.prose>*+*{margin-top:1.15em;}
.prose h2{font-family:var(--serif); font-weight:400; color:var(--bone);
  font-size:clamp(24px,3vw,34px); letter-spacing:-.022em; line-height:1.15;
  margin-top:2em; margin-bottom:.6em;}
.prose b{color:var(--bone); font-weight:600;}
.prose a{color:var(--gold); border-bottom:1px solid rgba(216,182,92,.32);}
.prose a:hover{border-color:var(--gold);}
.prose .ticks{margin-top:1em;}

.ticks li{position:relative; padding-left:26px; margin-bottom:11px;
  color:var(--bone-2); font-weight:300; line-height:1.7;}
.ticks li::before{content:""; position:absolute; left:2px; top:.42em;
  width:6px; height:11px; border-right:1.6px solid var(--gold);
  border-bottom:1.6px solid var(--gold); transform:rotate(45deg);}

.numbered{counter-reset:n; margin-top:18px;}
.numbered li{counter-increment:n; position:relative; padding-left:38px; margin-bottom:14px;
  color:var(--bone-2); font-weight:300; line-height:1.7;}
.numbered li::before{content:counter(n,decimal-leading-zero); position:absolute; left:0; top:.1em;
  font-family:var(--mono); font-size:11px; color:var(--gold); letter-spacing:.1em;}

.callout{border-left:2px solid var(--gold); padding:14px 0 14px 18px;
  background:rgba(216,182,92,.045); color:var(--bone-2); font-size:14.5px; line-height:1.7;}
.callout b{color:var(--gold); font-weight:600;}

/* ---------- case study ---------- */
.case-shot{border:1px solid var(--line); border-radius:5px; overflow:hidden;
  background:var(--ink); position:relative; max-height:min(640px,72vh);}
.case-shot::after{content:""; position:absolute; left:0; right:0; bottom:0; height:190px;
  background:linear-gradient(to bottom,transparent,var(--void)); pointer-events:none;}
.case-shot img{width:100%; height:auto;}
.shot-cap{color:var(--bone-4); margin-top:12px; text-transform:none; letter-spacing:.06em; font-size:10px;}
.case-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr); gap:clamp(30px,5vw,64px); align-items:start;}
.case-main>*+*{margin-top:1.1em;}
.case-main .h3{margin-top:1.9em; margin-bottom:.5em;}
.case-main>.h3:first-child{margin-top:0;}
.case-main p{color:var(--bone-2); font-size:15.5px; line-height:1.78; font-weight:300;}
.case-side{background:var(--ink); border:1px solid var(--line); border-radius:5px;
  padding:clamp(22px,2.5vw,30px); position:sticky; top:100px;
  display:flex; flex-direction:column; gap:16px;}
.case-side dl{display:grid; grid-template-columns:1fr; gap:2px;}
.case-side dt{color:var(--bone-4); font-size:9.5px; margin-top:12px;}
.case-side dt:first-child{margin-top:0;}
.case-side dd{margin:0; color:var(--bone-2); font-size:14px; font-weight:300;}
.case-side .btn{justify-content:center;}
.case-side .card-link{margin-top:0;}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line); margin-top:34px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--serif); font-size:clamp(18px,2.1vw,24px); letter-spacing:-.015em;
  color:var(--bone); transition:color .3s;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--gold);}
.faq-item summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq-a{padding:0 0 26px;}
.faq-a p{color:var(--bone-2); font-size:15px; line-height:1.78; font-weight:300; max-width:74ch;}

/* ---------- related links ---------- */
.rel-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);}
.rel-grid li{background:var(--void);}
.rel-grid a{display:block; padding:clamp(22px,2.5vw,30px); height:100%;
  transition:background .4s var(--ease);}
.rel-grid a:hover{background:var(--ink);}
.rel-kind{display:block; color:var(--gold); font-size:9.5px; margin-bottom:12px;
  font-family:var(--mono); letter-spacing:.13em; text-transform:uppercase;}
.rel-grid b{display:block; font-family:var(--serif); font-weight:400; font-size:20px;
  letter-spacing:-.018em; margin-bottom:9px; line-height:1.2;}
.rel-desc{display:block; color:var(--bone-3); font-size:13.5px; line-height:1.62; font-weight:300;}

/* ---------- areas / guides / terms ---------- */
.area-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);}
.area-grid li{background:var(--void);}
.area-grid a{display:block; padding:clamp(22px,2.5vw,30px); transition:background .4s var(--ease);}
.area-grid a:hover{background:var(--ink);}
.area-grid b{display:block; font-family:var(--serif); font-weight:400; font-size:22px;
  letter-spacing:-.018em; margin-bottom:8px;}
.area-grid span{color:var(--bone-3); font-size:14px; line-height:1.6; font-weight:300;}

.guide-list{border-top:1px solid var(--line);}
.guide-list li{border-bottom:1px solid var(--line);}
.guide-list a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 24px;
  padding:26px 0; align-items:baseline; transition:padding-left .4s var(--ease);}
.guide-list a:hover{padding-left:14px;}
.guide-list b{font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.3vw,27px);
  letter-spacing:-.02em; line-height:1.2;}
.guide-list a:hover b{color:var(--gold);}
.guide-list span:not(.rel-kind){grid-column:1; color:var(--bone-3); font-size:14.5px;
  line-height:1.65; font-weight:300; max-width:70ch;}
.guide-list .rel-kind{grid-column:2; grid-row:1; margin:0; white-space:nowrap;}

.term-list{display:flex; flex-wrap:wrap; gap:9px;}
.term-list li{border:1px solid var(--line); border-radius:2px; padding:9px 14px;
  color:var(--bone-3); font-size:11px; letter-spacing:.09em;}

/* ---------- stat row / cta band ---------- */
.stat-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
  border-top:1px solid var(--line); padding-top:26px;}
.stat-row b{display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5vw,60px); color:var(--gold); line-height:1; letter-spacing:-.02em;}
.stat-row b span{font-size:.45em; vertical-align:super; margin-left:2px;}
.stat-row small{display:block; color:var(--bone-4); margin-top:10px; font-size:9.5px;}

.cta-band{background:linear-gradient(180deg,transparent,rgba(216,182,92,.05));
  border-top:1px solid var(--line);}
.cta-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;}
.cta-in .h2{max-width:16ch;}
.cta-in .sec-sub{margin-top:14px; max-width:52ch;}

.more-link{margin-top:34px;}
.card--short .shot{height:auto;}
.card--short .shot img{transition:transform .8s var(--ease);}
.card:hover .card--short .shot img{transform:none;}
.card-body h3 a:hover{color:var(--gold);}
.frame{display:block;}

/* ---------- footer (multi-column) ---------- */
.foot-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:36px clamp(30px,5vw,70px); align-items:start;}
.foot-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;}
.foot-cols h2{color:var(--gold); font-size:9.5px; margin-bottom:14px;
  font-family:var(--mono); font-weight:400; letter-spacing:.13em; text-transform:uppercase;}
.foot-cols li{margin-bottom:9px;}
.foot-cols a{color:var(--bone-3); font-size:13.5px;}
.foot-cols a:hover{color:var(--gold);}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .svc-cards{grid-template-columns:1fr;}
  .rel-grid{grid-template-columns:1fr;}
  .case-grid{grid-template-columns:1fr;}
  .case-side{position:static;}
  .foot-top{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .detail-grid{grid-template-columns:1fr;}
  .area-grid{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr; gap:18px;}
  .foot-cols{grid-template-columns:1fr;}
  .guide-list a{grid-template-columns:1fr;}
  .guide-list .rel-kind{grid-column:1; grid-row:auto;}
  .crumbs{padding-top:88px;}
  main>.page-head:first-child{padding-top:118px;}
  .cta-in .btn{width:100%; justify-content:center;}
}