/* ============================================================
   MESA GOLD DIGITAL SERVICES
   Design system — West Texas premium. Charcoal, metal, sandstone.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* surface */
  --ink:#060607;
  --basalt:#0C0B0A;
  --stone:#141210;
  --raised:#1B1815;
  --line:rgba(232,220,196,.13);
  --line-strong:rgba(232,220,196,.26);

  /* sandstone */
  --sand:#E8DCC4;
  --sand-2:#BDB3A1;
  --sand-3:#8A8275;

  /* metal */
  --gold:#C9992E;
  --gold-lt:#F3DC94;
  --gold-dp:#7E5A10;
  --clay:#3B2716;

  --metal:linear-gradient(102deg,#8A6412 0%,#D8B25C 22%,#FBF0C4 42%,#C9992E 58%,#E7C46A 74%,#7E5A10 100%);
  --metal-soft:linear-gradient(102deg,#9E7620 0%,#E3C173 40%,#C9992E 70%,#8A6412 100%);

  /* type */
  --display:"Bodoni Moda",'Times New Roman',serif;
  --text:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-hero:clamp(3.2rem,11.5vw,9.5rem);
  --t-d1:clamp(2.5rem,6.4vw,5.25rem);
  --t-d2:clamp(1.95rem,4.2vw,3.35rem);
  --t-d3:clamp(1.4rem,2.5vw,2.05rem);
  --t-lead:clamp(1.06rem,1.55vw,1.32rem);
  --t-body:1.0425rem;
  --t-small:.855rem;
  --t-micro:.715rem;

  /* space */
  --gut:clamp(1.25rem,5vw,4.75rem);
  --band:clamp(5.5rem,11vw,10.5rem);
  --max:1320px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--sand-2);
  font-family:var(--text);font-size:var(--t-body);line-height:1.66;
  font-weight:380;letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold-lt);outline-offset:4px;border-radius:2px}
::selection{background:var(--gold-dp);color:#FFF6DC}

/* ---------- 3. Grain + vignette (site-wide atmosphere) ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* ---------- 4. Utilities ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:var(--band);position:relative}
.metal{
  background:var(--metal);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent);border:0;margin:0}
.eyebrow{
  font-family:var(--text);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:.9rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-dp),transparent);max-width:9rem}
.dsp{font-family:var(--display);font-weight:500;color:var(--sand);line-height:1.02;letter-spacing:-.018em}
.dsp-1{font-size:var(--t-d1)}
.dsp-2{font-size:var(--t-d2);line-height:1.08}
.dsp-3{font-size:var(--t-d3);line-height:1.15;letter-spacing:-.01em}
.lead{font-size:var(--t-lead);line-height:1.62;color:var(--sand-2);max-width:60ch}
.measure{max-width:62ch}
.sand{color:var(--sand)}

/* ---------- 5. Buttons ---------- */
.btn{
  --pad:1.05rem 2rem;
  display:inline-flex;align-items:center;gap:.7rem;padding:var(--pad);
  font-size:.845rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--line-strong);color:var(--sand);
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease),transform .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--metal);
  transform:translateY(101%);transition:transform .5s var(--ease-out);
}
.btn:hover,.btn:focus-visible{color:#120C02;border-color:transparent}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:active{transform:translateY(1px)}
.btn--gold{border-color:transparent;color:#140D02;background:var(--metal);box-shadow:0 10px 40px -18px rgba(201,153,46,.85)}
.btn--gold::before{background:linear-gradient(102deg,#FBF0C4,#F3DC94 50%,#D8B25C);transform:translateY(101%)}
.btn--gold:hover{color:#140D02}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}
.tlink{
  display:inline-flex;align-items:center;gap:.55rem;font-size:.8rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding-bottom:.35rem;
  border-bottom:1px solid rgba(201,153,46,.35);transition:border-color .35s,gap .35s var(--ease)
}
.tlink:hover{gap:1rem;border-color:var(--gold)}

/* ---------- 6. Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s,padding .5s var(--ease);
  border-bottom:1px solid transparent;padding-block:1.15rem;
}
.nav.is-stuck{
  background:rgba(6,6,7,.82);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);padding-block:.6rem;
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;gap:.85rem}
.brand img{width:auto;height:46px;transition:height .5s var(--ease)}
.nav.is-stuck .brand img{height:36px}
.brand__txt{display:none;line-height:1.15}
.brand__txt b{display:block;font-family:var(--display);font-size:1.02rem;letter-spacing:.14em;color:var(--sand);font-weight:500}
.brand__txt span{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sand-3)}
.nav__links{display:none;align-items:center;gap:2.1rem}
.nav__links a{
  font-size:.775rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--sand-2);
  position:relative;padding-block:.35rem;transition:color .35s
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--metal);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)
}
.nav__links a:hover{color:var(--sand)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{display:none}
.burger{
  width:46px;height:46px;display:grid;place-content:center;gap:6px;border:1px solid var(--line);
  border-radius:50%;transition:border-color .35s
}
.burger:hover{border-color:var(--line-strong)}
.burger i{display:block;width:18px;height:1.5px;background:var(--sand);transition:transform .4s var(--ease),opacity .3s}
.nav.is-open .burger i:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav.is-open .burger i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:55;background:var(--ink);
  padding:7.5rem var(--gut) 3rem;display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-out);overflow:auto
}
.nav.is-open ~ .drawer{clip-path:inset(0 0 0 0)}
.drawer nav{display:flex;flex-direction:column;gap:.35rem}
.drawer nav a{
  font-family:var(--display);font-size:clamp(2rem,9vw,3rem);color:var(--sand);
  padding-block:.35rem;border-bottom:1px solid var(--line);display:flex;
  align-items:baseline;justify-content:space-between;gap:1rem;
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s
}
.nav.is-open ~ .drawer nav a{opacity:1;transform:none}
.drawer nav a small{font-family:var(--text);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.drawer nav a:hover{color:var(--gold-lt)}
.drawer__foot{padding-top:2rem;font-size:var(--t-small);color:var(--sand-3)}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:7rem var(--gut) 6.5rem;overflow:hidden;isolation:isolate
}
.horizon{position:absolute;inset:0;z-index:-2;pointer-events:none}
.horizon svg{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:135%;min-width:1100px;height:auto}
.horizon__sky{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 62% at 50% 88%,rgba(201,153,46,.30) 0%,rgba(126,90,16,.12) 34%,transparent 68%),
    radial-gradient(90% 55% at 78% 12%,rgba(59,39,22,.5),transparent 60%),
    linear-gradient(180deg,#050506 0%,#0A0806 46%,#160F08 78%,#0B0806 100%);
}
.horizon__stars{position:absolute;inset:0 0 42% 0;opacity:.55}
.horizon__grade{position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(180deg,transparent,rgba(6,6,7,.92) 92%)}

.hero__mark{
  width:min(228px,46vw);margin-inline:auto;
  opacity:0;transform:translateY(14px) scale(.97);
  animation:rise 1.15s var(--ease-out) .15s forwards
}
.hero__h{
  font-family:var(--display);font-weight:500;font-size:var(--t-hero);line-height:.9;
  letter-spacing:-.035em;margin-top:clamp(.5rem,2vw,1.4rem);position:relative;
  color:transparent;
}
.hero__h span{
  display:inline-block;opacity:0;transform:translateY(.42em) rotate(1.2deg);
  background-image:
    linear-gradient(105deg,transparent 38%,rgba(255,247,226,.98) 46%,rgba(243,220,148,.85) 51%,transparent 60%),
    linear-gradient(180deg,#F7EDD6,#C0AB84 94%);
  background-size:600% 100%,100% 100%;
  background-position:280% 0,0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  animation:rise 1.05s var(--ease-out) forwards,sweep 2.3s var(--ease-out) 1.2s 1 forwards;
}
.hero__h span:nth-child(1){animation-delay:.42s,1.2s}
.hero__h span:nth-child(2){animation-delay:.55s,1.32s}
@keyframes sweep{to{background-position:-260% 0,0 0}}
@keyframes rise{to{opacity:1;transform:none}}
.hero__sub{
  font-family:var(--display);font-style:italic;font-size:clamp(1.1rem,2.2vw,1.7rem);
  color:var(--sand);margin-top:1.15rem;letter-spacing:.005em
}
.hero__p{margin:1.15rem auto 0;max-width:56ch;color:var(--sand-2);font-size:1.005rem}
.hero__acts{margin-top:1.9rem;justify-content:center}
.hero__disc{
  margin-top:clamp(2rem,4vw,3.2rem);display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 1.5rem;font-size:var(--t-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--sand-3)
}
.hero__disc li{display:flex;align-items:center;gap:1.5rem}
.hero__disc li:not(:last-child)::after{content:"";width:4px;height:4px;background:var(--gold-dp);transform:rotate(45deg)}
.hero__fade{opacity:0;animation:rise .9s var(--ease-out) forwards}
.hero__fade--1{animation-delay:.8s}
.hero__fade--2{animation-delay:.95s}
.hero__fade--3{animation-delay:1.15s}
/* ---------- 8. Positioning statement ---------- */
.stance{background:var(--basalt);border-top:1px solid var(--line);position:relative;overflow:hidden}
.topo{
  position:absolute;inset:0;opacity:.11;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23C9992E' stroke-width='1'%3E%3Cellipse cx='300' cy='300' rx='60' ry='34'/%3E%3Cellipse cx='300' cy='300' rx='110' ry='64'/%3E%3Cellipse cx='300' cy='300' rx='165' ry='96'/%3E%3Cellipse cx='300' cy='300' rx='225' ry='132'/%3E%3Cellipse cx='300' cy='300' rx='288' ry='170'/%3E%3Cellipse cx='300' cy='300' rx='355' ry='210'/%3E%3C/g%3E%3C/svg%3E");
  background-size:760px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);
}
.stance__grid{display:grid;gap:clamp(2rem,5vw,4.5rem);position:relative}
.stance__body p + p{margin-top:1.15rem}
.pull{
  margin-top:clamp(3rem,7vw,5.5rem);padding-top:clamp(2.2rem,4vw,3.4rem);
  border-top:1px solid var(--line);
  font-family:var(--display);font-weight:500;line-height:1.06;letter-spacing:-.022em;
  font-size:clamp(1.9rem,5.4vw,4.1rem);color:var(--sand);max-width:20ch
}

/* ---------- 9. Services ---------- */
.svc{border-top:1px solid var(--line)}
.svc__head{display:grid;gap:1.4rem;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.svc__list{border-top:1px solid var(--line)}
.svc__item{border-bottom:1px solid var(--line);position:relative}
.svc__btn{
  width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:1.1rem;padding:clamp(1.5rem,3.4vw,2.35rem) 0;
  transition:padding-left .5s var(--ease)
}
.svc__item:hover .svc__btn{padding-left:.75rem}
.svc__num{font-size:var(--t-micro);letter-spacing:.18em;color:var(--gold-dp);font-weight:600;font-variant-numeric:tabular-nums}
.svc__title{font-family:var(--display);font-size:clamp(1.55rem,4.2vw,2.75rem);color:var(--sand);font-weight:500;letter-spacing:-.015em;line-height:1.05}
.svc__item.is-open .svc__title,.svc__item:hover .svc__title{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc__plus{width:30px;height:30px;position:relative;flex:none}
.svc__plus::before,.svc__plus::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--gold);
  transform:translate(-50%,-50%);transition:transform .45s var(--ease-out),opacity .3s
}
.svc__plus::before{width:15px;height:1.5px}
.svc__plus::after{width:1.5px;height:15px}
.svc__item.is-open .svc__plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.svc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-out)}
.svc__item.is-open .svc__panel{grid-template-rows:1fr}
.svc__panelin{overflow:hidden}
.svc__body{padding-bottom:2.4rem;display:grid;gap:1.6rem}
.svc__body p{max-width:56ch}
.svc__tags{display:flex;flex-wrap:wrap;gap:.5rem}
.svc__tags li{
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--sand-2);
  border:1px solid var(--line);padding:.5rem .85rem;background:rgba(232,220,196,.02)
}

/* ---------- 11. Process ---------- */
.proc{border-top:1px solid var(--line);position:relative}
.proc__head{margin-bottom:clamp(2.5rem,5vw,4rem);display:grid;gap:1.3rem}
.proc__track{position:relative;padding-left:clamp(2.6rem,6vw,5rem)}
.proc__line{position:absolute;left:clamp(.55rem,1.6vw,1.2rem);top:.7rem;bottom:.7rem;width:1px;background:var(--line)}
.proc__line::after{
  content:"";position:absolute;inset:0 auto 0 0;width:1px;background:var(--metal);
  transform-origin:top;transform:scaleY(var(--p,0));transition:transform .35s linear
}
.proc__step{position:relative;padding-block:clamp(1.6rem,3.4vw,2.6rem);border-bottom:1px solid var(--line)}
.proc__step:last-child{border-bottom:0}
.proc__dot{
  position:absolute;left:calc(clamp(2.6rem,6vw,5rem) * -1 + clamp(.55rem,1.6vw,1.2rem) - 3.5px);
  top:calc(clamp(1.6rem,3.4vw,2.6rem) + .35rem);width:8px;height:8px;background:var(--ink);
  border:1px solid var(--gold-dp);transform:rotate(45deg);transition:background .4s,border-color .4s,box-shadow .4s
}
.proc__step.is-lit .proc__dot{background:var(--gold);border-color:var(--gold-lt);box-shadow:0 0 18px rgba(201,153,46,.65)}
.proc__k{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.proc__k b{
  font-family:var(--display);font-size:clamp(1.3rem,3vw,1.9rem);font-weight:500;
  color:var(--gold-dp);font-variant-numeric:tabular-nums;transition:color .4s
}
.proc__step.is-lit .proc__k b{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.proc__k h3{font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,3.4vw,2.2rem);color:var(--sand);letter-spacing:-.015em}
.proc__step p{margin-top:.6rem;max-width:58ch}

/* ---------- 12. Packages ---------- */
.pkg{background:var(--basalt);border-top:1px solid var(--line)}
.pkg__head{display:grid;gap:1.3rem;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.tier{
  background:var(--basalt);padding:clamp(1.9rem,3.6vw,2.8rem) clamp(1.4rem,2.6vw,2.2rem);
  display:flex;flex-direction:column;gap:1.15rem;position:relative;
  transition:background .5s var(--ease)
}
.tier:hover{background:var(--stone)}
.tier--best{background:var(--stone)}
.tier--best::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--metal)}
.tier__flag{
  position:absolute;top:0;right:clamp(1.4rem,2.6vw,2.2rem);transform:translateY(-50%);
  font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:#150E02;
  background:var(--metal);padding:.34rem .7rem;font-weight:700
}
.tier__name{font-family:var(--display);font-size:clamp(1.5rem,3vw,2rem);color:var(--sand);font-weight:500;letter-spacing:.02em}
.tier__name{padding-bottom:1.15rem;border-bottom:1px solid var(--line)}
.tier p{font-size:.97rem}
.tier ul{display:grid;gap:.55rem;font-size:.94rem}
.tier li{display:flex;gap:.7rem;color:var(--sand-2)}
.tier li::before{content:"";flex:none;width:5px;height:5px;margin-top:.62rem;background:var(--gold);transform:rotate(45deg)}
.tier .btn{justify-content:center;margin-top:auto;padding-block:1.05rem;white-space:nowrap}
.pkg__foot{margin-top:1.6rem;font-size:var(--t-small);color:var(--sand-3);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}

/* ---------- 13. Social ---------- */
.soc{border-top:1px solid var(--line);overflow:hidden}
.soc__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.soc__copy{display:grid;gap:1.5rem;align-content:start}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:460px;margin-inline:auto;width:100%}
.tile{
  aspect-ratio:1;position:relative;overflow:hidden;background:var(--stone);
  border:1px solid rgba(232,220,196,.09);
  opacity:0;transform:translateY(26px) scale(.92);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)
}
.feed.is-in .tile{opacity:1;transform:none}
.feed.is-in .tile:nth-child(1){transition-delay:.02s}
.feed.is-in .tile:nth-child(2){transition-delay:.09s}
.feed.is-in .tile:nth-child(3){transition-delay:.16s}
.feed.is-in .tile:nth-child(4){transition-delay:.23s}
.feed.is-in .tile:nth-child(5){transition-delay:.3s}
.feed.is-in .tile:nth-child(6){transition-delay:.37s}
.feed.is-in .tile:nth-child(7){transition-delay:.44s}
.feed.is-in .tile:nth-child(8){transition-delay:.51s}
.feed.is-in .tile:nth-child(9){transition-delay:.58s}
.tile span{
  position:absolute;inset:auto .55rem .55rem;font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sand);text-shadow:0 1px 8px rgba(0,0,0,.9);line-height:1.3
}
.tile--a{background:linear-gradient(150deg,#2A1D0E,#0F0C08)}
.tile--b{background:linear-gradient(150deg,#123049,#0A1622)}
.tile--c{background:linear-gradient(150deg,#3B2716,#120C07)}
.tile--d{background:linear-gradient(150deg,#1E1A14,#0C0B09)}
.tile--e{background:var(--metal)}
.tile--e span{color:#150E02;text-shadow:none;font-weight:700}
.tile--f{background:linear-gradient(150deg,#20303F,#0B1119)}
.tile__ic{position:absolute;top:.5rem;right:.55rem;width:12px;height:12px;border:1.5px solid rgba(232,220,196,.5);border-radius:3px}
.tile--e .tile__ic{border-color:rgba(20,13,2,.55)}
.soc__tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2.5rem,5vw,3.5rem)}
.soc__tier{
  background:var(--ink);padding:clamp(1.6rem,3vw,2.2rem);display:grid;gap:.85rem;
  align-content:start;transition:background .4s
}
.soc__tier:hover{background:var(--stone)}
.soc__tier b{
  font-family:var(--display);font-size:1.45rem;color:var(--sand);font-weight:500;
  padding-bottom:.9rem;border-bottom:1px solid var(--line)
}
.soc__tier > span{font-size:.95rem;color:var(--sand-2);line-height:1.55}
.soc__tier ul{display:grid;gap:.55rem;font-size:.93rem;margin-top:.2rem}
.soc__tier li{display:flex;gap:.7rem;color:var(--sand-2)}
.soc__tier li::before{
  content:"";flex:none;width:5px;height:5px;margin-top:.6rem;background:var(--gold);transform:rotate(45deg)
}

/* ---------- 14. Difference ---------- */
.diff{background:var(--basalt);border-top:1px solid var(--line)}
.diff__grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2.5rem,5vw,3.75rem)}
.diff__cell{background:var(--basalt);padding:clamp(1.9rem,3.6vw,3rem) clamp(1.4rem,2.6vw,2.4rem);display:grid;gap:.9rem;align-content:start;position:relative;overflow:hidden}
.diff__cell::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--metal);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)
}
.diff__cell:hover::after{transform:scaleX(1)}
.diff__cell h3{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.1rem);color:var(--sand);letter-spacing:-.015em;line-height:1.08}
.diff__cell p{max-width:44ch}

/* ---------- 15. About ---------- */
.about{border-top:1px solid var(--line);position:relative;overflow:hidden}
.about__grid{display:grid;gap:clamp(2.2rem,5vw,4.5rem);align-items:start}
.about__body{display:grid;gap:1.15rem}
.portrait{
  position:relative;aspect-ratio:4/5;border:1px solid var(--line-strong);
  background:
    radial-gradient(70% 50% at 50% 100%,rgba(201,153,46,.2),transparent 70%),
    linear-gradient(180deg,#151310,#0A0908);
  display:grid;place-content:center;gap:.9rem;text-align:center;padding:2rem
}
.portrait img{width:min(190px,52%);margin-inline:auto;opacity:.92}
.portrait small{font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--sand-3)}
.portrait::before,.portrait::after{content:"";position:absolute;width:22px;height:22px;border:1px solid var(--gold)}
.portrait::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.portrait::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.sig{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--sand);margin-top:.5rem}

/* ---------- 16. Closing ---------- */
.close{
  position:relative;text-align:center;overflow:hidden;border-top:1px solid var(--line);
  padding-block:clamp(6rem,14vw,12rem);
  background:radial-gradient(90% 70% at 50% 120%,rgba(201,153,46,.22),transparent 62%),var(--ink)
}
.close h2{
  font-family:var(--display);font-weight:500;font-size:clamp(2.3rem,7.2vw,5.6rem);line-height:1.02;
  letter-spacing:-.03em;color:var(--sand);max-width:16ch;margin-inline:auto
}
.close h2 em{font-style:italic;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.close p{margin:1.4rem auto 0;max-width:44ch;color:var(--sand-2)}
.close .btn-row{justify-content:center;margin-top:2.4rem}
.close__ridge{position:absolute;inset:auto 0 0 0;z-index:0;height:clamp(90px,14vw,190px);width:100%;opacity:.7;pointer-events:none}

/* ---------- 17. Footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--basalt);padding-block:clamp(3rem,6vw,4.5rem)}
.foot__grid{display:grid;gap:2.5rem}
.foot__brand img{width:180px}
.foot__brand p{margin-top:1rem;font-size:var(--t-small);color:var(--sand-3);max-width:34ch}
.foot h4{font-size:var(--t-micro);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:600}
.foot ul{display:grid;gap:.6rem;font-size:.93rem}
.foot ul a{color:var(--sand-2);transition:color .3s}
.foot ul a:hover{color:var(--gold-lt)}
.foot__bot{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:var(--t-small);color:var(--sand-3)
}
.foot__bot nav{display:flex;gap:1.5rem;flex-wrap:wrap}

/* ---------- 18. Forms ---------- */
.form{display:grid;gap:1.6rem;align-content:start}
.field{display:grid;gap:.55rem}
.field > label{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-3);font-weight:600}
.field input,.field textarea,.field select{
  width:100%;background:rgba(232,220,196,.03);border:1px solid var(--line);
  padding:.95rem 1.05rem;color:var(--sand);font:inherit;font-size:.98rem;
  transition:border-color .35s,background .35s
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6A6459}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:rgba(201,153,46,.6);background:rgba(232,220,196,.05)
}
.grid2{display:grid;gap:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:block;padding:.72rem 1.05rem;border:1px solid var(--line);font-size:.83rem;
  letter-spacing:.08em;color:var(--sand-2);cursor:pointer;transition:all .35s var(--ease);
  background:rgba(232,220,196,.02)
}
.chip:hover span{border-color:var(--line-strong);color:var(--sand)}
.chip input:checked + span{background:var(--metal);color:#140D02;border-color:transparent;font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--gold-lt);outline-offset:3px}
.budget{display:grid;gap:.9rem}
.budget__val{display:flex;align-items:baseline;gap:.6rem}
.budget__val b{font-family:var(--display);font-size:2.1rem;font-weight:500;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.budget__val span{font-size:var(--t-small);color:var(--sand-3)}
.budget input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line-strong);
  border:0;padding:0;cursor:pointer
}
.budget input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;background:var(--metal);border:0;
  transform:rotate(45deg);box-shadow:0 0 20px rgba(201,153,46,.55);cursor:grab
}
.budget input[type=range]::-moz-range-thumb{
  width:20px;height:20px;background:#C9992E;border:0;transform:rotate(45deg);cursor:grab
}
.budget__scale{display:flex;justify-content:space-between;font-size:var(--t-micro);letter-spacing:.14em;color:var(--sand-3)}
.form__sent{
  border:1px solid rgba(201,153,46,.4);background:rgba(201,153,46,.06);
  padding:clamp(1.6rem,4vw,2.4rem);display:none;gap:.7rem
}
.form.is-sent .form__sent{display:grid;align-content:start}
.form.is-sent .form__live{display:none}
.form__sent h3{font-family:var(--display);font-size:1.6rem;color:var(--sand);font-weight:500}
.form__live{display:grid;gap:1.6rem}
.form__note{font-size:var(--t-small);color:var(--sand-3)}

/* ---------- 19. Interior page header ---------- */
.phead{
  padding:clamp(9rem,16vw,13rem) 0 clamp(3rem,6vw,5rem);position:relative;overflow:hidden;
  background:radial-gradient(80% 90% at 20% 0%,rgba(59,39,22,.55),transparent 60%),var(--ink)
}
.phead__in{display:grid;gap:1.3rem;position:relative}
.crumb{display:flex;gap:.6rem;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-3)}
.crumb a{color:var(--gold)}
.phead h1{font-family:var(--display);font-weight:500;font-size:var(--t-d1);line-height:1;letter-spacing:-.028em;color:var(--sand)}

/* case-study bits */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.fact{background:var(--basalt);padding:1.5rem 1.4rem;display:grid;gap:.35rem}
.fact dt{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--sand-3)}
.fact dd{margin:0;font-family:var(--display);font-size:1.18rem;color:var(--sand);line-height:1.3}
.prose{display:grid;gap:1.1rem;max-width:66ch}
.prose h3{font-family:var(--display);font-weight:500;font-size:var(--t-d3);color:var(--sand);margin-top:1.2rem}
.prose ul{display:grid;gap:.6rem}
.prose ul li{display:flex;gap:.75rem}
.prose ul li::before{content:"";flex:none;width:5px;height:5px;margin-top:.65rem;background:var(--gold);transform:rotate(45deg)}
.split{display:grid;gap:clamp(2rem,5vw,4rem)}

/* ---------- 20. Reveal (used sparingly) ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}

/* ---------- 21. Responsive ---------- */
@media (min-width:640px){
  .grid2{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:860px){
  .ba .old{font-size:12px}
  .proc__step{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2rem,5vw,4rem);align-items:start}
  .proc__step p{margin-top:.3rem}
  .brand__txt{display:block}
  .tiers{grid-template-columns:repeat(3,1fr)}
  .soc__tiers{grid-template-columns:repeat(3,1fr)}
  .diff__grid{grid-template-columns:1fr 1fr}
  .stance__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .soc__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .about__grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .split{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .facts{grid-template-columns:repeat(4,1fr)}
  .foot__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
}
@media (min-width:1024px){
  .nav__links{display:flex}
  .nav__cta{display:inline-flex}
  .burger{display:none}
}
@media (max-width:639px){
  .hero__disc{gap:.5rem 1.1rem}
  .hero__disc li:not(:last-child)::after{display:none}
  .hero__disc li{gap:0}
  .hero{padding-bottom:4.5rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .hero__mark,.hero__h span,.hero__fade{opacity:1;transform:none}
  .tile{opacity:1;transform:none}
  .grain{animation:none}
}