/* ============================================================
   Encarnacion Architectural Builders
   Single stylesheet. All tokens live in :root.

   Voice: quiet. A light serif set at moderate size with generous
   leading, mono reserved for small technical labels. Space is the
   material, not weight.
   ============================================================ */

:root{
  /* colour: 6 values, one accent */
  --navy-900:#0C1523;
  --navy-700:#1E3050;   /* logo navy, sampled */
  --navy-500:#31456B;
  --screed:#E8E8E4;
  --paper:#FAFAF8;
  --ink:#1A1D24;
  --gold:#B99327;       /* logo gold, dropped a shade so it sits quietly */

  /* derived, not new hues */
  --ink-60:rgba(26,29,36,.58);
  --ink-40:rgba(26,29,36,.5);
  --rule:rgba(26,29,36,.12);
  --rule-soft:rgba(26,29,36,.07);
  --rule-inv:rgba(250,250,248,.14);
  --paper-60:rgba(250,250,248,.72);
  --paper-40:rgba(250,250,248,.55);
  --gold-wash:rgba(185,147,39,.09);

  /* gradients, built only from the two brand colours */
  --grad-page:
    radial-gradient(1100px 700px at 10% -8%, rgba(30,48,80,.10), transparent 62%),
    radial-gradient(900px 620px at 94% 6%, rgba(185,147,39,.11), transparent 64%),
    radial-gradient(1000px 800px at 46% 106%, rgba(30,48,80,.07), transparent 60%),
    linear-gradient(180deg,#FBFBF9 0%,#F5F5F2 52%,#EFEFEC 100%);
  --grad-dark:
    radial-gradient(900px 520px at 18% 0%, rgba(49,69,107,.55), transparent 62%),
    radial-gradient(760px 520px at 88% 100%, rgba(185,147,39,.15), transparent 62%),
    linear-gradient(168deg,#0A1220 0%,#131F33 52%,#0C1523 100%);
  --grad-screed:
    linear-gradient(180deg, rgba(232,232,228,0), rgba(232,232,228,.85) 14%,
                    rgba(232,232,228,.85) 86%, rgba(232,232,228,0));

  /* type */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Spectral",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* scale: smaller across the board, leading opened up */
  --t--2:.6875rem;
  --t--1:.8125rem;
  --t-0:1.0625rem;
  --t-1:1.1875rem;
  --t-2:1.5rem;
  --t-3:1.9rem;
  --t-4:clamp(1.85rem,1.35rem + 1.7vw,2.8rem);
  --t-5:clamp(2.3rem,1.6rem + 2.9vw,4.2rem);

  --u:8px;
  --gutter:clamp(1.35rem,5vw,4rem);
  --maxw:1180px;
  --measure:62ch;
  --rail:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-0);
  font-weight:400;
  line-height:1.82;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:var(--grad-page);
  background-attachment:fixed;
}

img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}

/* ---------- accessibility ---------- */
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px;border-radius:1px}
.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--navy-900);color:var(--paper);
  padding:.9em 1.4em;text-decoration:none;
  font-family:var(--mono);font-size:var(--t--2);letter-spacing:.2em;text-transform:uppercase;
  transition:top .2s;
}
.skip:focus{top:1rem}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- type roles ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  text-transform:none;
  letter-spacing:-.005em;
  line-height:1.12;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--t-5);font-weight:400;line-height:1.06;letter-spacing:-.012em}
h2{font-size:var(--t-4);font-weight:400;line-height:1.1;letter-spacing:-.008em}
h3{font-size:var(--t-2);font-weight:500}
h4{font-size:var(--t-1);font-weight:500}

p{margin:0 0 1.15em;max-width:var(--measure)}
p:last-child{margin-bottom:0}

.lede{
  font-family:var(--display);
  font-size:clamp(1.2rem,1rem + .8vw,1.65rem);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.005em;
  max-width:44ch;
  color:var(--ink);
}

/* the mono voice: sheet numbers, levels, specs, labels. small and wide. */
.spec{
  font-family:var(--mono);
  font-size:var(--t--2);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1.7;
}
.spec--sm{font-size:10px;letter-spacing:.26em}
.gold{color:var(--gold)}
.muted{color:var(--ink-60)}

/* ---------- layout: space is the material ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(5rem,10vw,9rem)}
.section--tight{padding-block:clamp(3.5rem,7vw,6rem)}
.section--screed{background:var(--grad-screed)}
.section--navy{background:var(--grad-dark);color:var(--paper)}
.section--navy h2,.section--navy h3{color:var(--paper)}
.section--navy .muted{color:var(--paper-60)}

.head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:end;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.head__title{max-width:20ch}
.head__note{max-width:44ch;color:var(--ink-60);font-size:var(--t--1);line-height:1.85}
.section--navy .head__note{color:var(--paper-60)}
@media (max-width:820px){.head{grid-template-columns:1fr;align-items:start;gap:1.5rem}}

/* ---------- buttons: hairline, quiet, wide ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  font-family:var(--mono);font-size:var(--t--2);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:1.15em 2.1em;border:1px solid transparent;border-radius:999px;
  cursor:pointer;transition:background .3s,color .3s,border-color .3s,opacity .3s;
}
.btn svg{width:12px;height:12px;flex:none}
.btn--gold{background:var(--gold);color:#14100A;border-color:var(--gold)}
.btn--gold:hover{background:transparent;color:var(--gold)}
.btn--navy{background:var(--navy-900);color:var(--paper);border-color:var(--navy-900)}
.btn--navy:hover{background:transparent;color:var(--navy-900)}
.btn--line{background:transparent;color:currentColor;border-color:var(--rule)}
.btn--line:hover{border-color:currentColor}
.section--navy .btn--line,.cta .btn--line,.hero .btn--line{border-color:var(--rule-inv)}
.section--navy .btn--line:hover,.cta .btn--line:hover,.hero .btn--line:hover{border-color:var(--paper)}
.btn--sm{padding:.85em 1.5em}
.btn--block{width:100%}
.btn[disabled]{opacity:.35;cursor:not-allowed}

/* ============================================================
   SIGNATURE: the elevation datum rail
   ============================================================ */
.datum{
  position:fixed;left:calc(var(--gutter) / 1.7);top:50%;
  transform:translateY(-50%);z-index:40;width:var(--rail);pointer-events:none;
}
.datum__line{position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--rule)}
.datum__fill{position:absolute;left:6px;top:6px;width:1px;height:0;background:var(--gold);transition:height .3s linear}
.datum__list{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--u) * 4.5)}
.datum__item{
  position:relative;padding-left:24px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--ink-40);pointer-events:auto;line-height:1.4;
}
.datum__item::before{
  content:"";position:absolute;left:2px;top:.55em;width:9px;height:1px;
  background:var(--rule);transition:background .3s,width .3s;
}
.datum__item a{text-decoration:none;display:block;transition:color .3s}
.datum__lvl{display:block}
.datum__name{
  display:block;font-size:9px;letter-spacing:.2em;
  opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s;
}
.datum__item.is-current{color:var(--ink)}
.datum__item.is-current::before{background:var(--gold);width:15px}
.datum__item.is-current .datum__name{opacity:.6;transform:none}
.datum__item:hover .datum__name{opacity:.6;transform:none}
.datum.is-inverted .datum__line{background:var(--rule-inv)}
.datum.is-inverted .datum__item{color:var(--paper-40)}
.datum.is-inverted .datum__item::before{background:var(--rule-inv)}
.datum.is-inverted .datum__item.is-current{color:var(--paper)}
.datum.is-inverted .datum__item.is-current::before{background:var(--gold)}
@media (max-width:1180px){.datum{display:none}}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(12,21,35,.92);
  backdrop-filter:blur(10px);
  color:var(--paper);
  border-bottom:1px solid var(--rule-inv);
}
.hdr__in{
  display:flex;align-items:center;gap:1.5rem;
  padding:calc(var(--u) * 1.75) var(--gutter);
  max-width:var(--maxw);margin-inline:auto;
}
.brand{display:flex;align-items:center;gap:.9rem;text-decoration:none;margin-right:auto}
.brand img{width:34px;height:34px;object-fit:cover}
.brand__name{
  font-family:var(--mono);font-weight:500;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.1em;line-height:1.2;
}
.brand__sub{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:8.5px;letter-spacing:.28em;color:var(--gold);text-transform:uppercase;
  margin-top:.2em;
}
.nav{display:flex;align-items:center;gap:2.2rem}
.nav a:not(.btn){
  font-family:var(--mono);font-size:var(--t--2);letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--paper-40);
  padding-block:.4em;transition:color .3s;position:relative;
}
.nav a:not(.btn):hover{color:var(--paper)}
.nav a[aria-current="page"]{color:var(--paper)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);
}
.nav__toggle{
  display:none;background:none;border:1px solid var(--rule-inv);color:var(--paper);
  padding:.6em 1.1em;border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:var(--t--2);letter-spacing:.2em;text-transform:uppercase;
}
@media (max-width:900px){
  .nav__toggle{display:block;margin-left:auto}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-900);border-bottom:1px solid var(--rule-inv);
    padding:var(--gutter);display:none;
  }
  .nav.is-open{display:flex}
  .nav a:not(.btn){padding-block:1.1em;border-bottom:1px solid var(--rule-inv)}
  .nav .btn{margin-top:1.4rem}
}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--grad-dark);color:var(--paper);overflow:hidden;
  padding-top:clamp(3.5rem,8vw,6.5rem);
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    linear-gradient(var(--rule-inv) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-inv) 1px,transparent 1px);
  background-size:calc(var(--u) * 13) calc(var(--u) * 13);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.hero__in{
  position:relative;z-index:2;
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
}

/* masthead: the line on the left, the argument on the right */
/* everything in the hero stacks in one column, so there are no two
   elements that can disagree about where the top of the text is */
.hero__copy{
  border-top:1px solid var(--rule-inv);
  padding-top:clamp(1.75rem,3.2vw,2.75rem);
}
.hero h1{font-size:clamp(2.15rem,1.3rem + 2.7vw,3.7rem);max-width:16ch;margin:0}

/* three panels stepping up to the right, the way the logo mark stacks */
.hero__elevation{
  position:relative;z-index:2;
  max-width:1460px;margin-inline:auto;
  padding:clamp(2.5rem,5vw,4rem) var(--gutter) 0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,1.6vw,1.4rem);align-items:start;
}
/* --base is the stepped offset, --p is the scroll parallax set in main.js */
.elev{margin:0;--base:0px;--p:0px;transform:translate3d(0,calc(var(--base) + var(--p)),0)}
.elev:nth-child(1){--base:clamp(2.5rem,6vw,5.5rem)}
.elev:nth-child(2){--base:clamp(1.25rem,3vw,2.75rem)}
.elev__frame{
  position:relative;display:block;aspect-ratio:2/3;overflow:hidden;
  border:1px solid var(--rule-inv);background:var(--navy-700);
  box-shadow:0 50px 90px -55px rgba(0,0,0,.95);
}
.elev__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.elev:hover .elev__frame img{transform:scale(1.035)}
.elev__no{
  position:absolute;left:0;top:0;
  background:rgba(10,18,32,.86);color:var(--gold);padding:.65em .95em;
}
.elev figcaption{display:flex;flex-direction:column;gap:.35rem;padding-top:1rem}
.elev__lbl{color:var(--gold)}
.elev__room{color:var(--paper-40)}

/* the meta rail sits below the lowest panel */
.hero__in:last-of-type{padding-bottom:clamp(4rem,7vw,6rem)}
/* the two halves of the promise, said two ways */
.hero h1 .drawn{display:block;font-style:italic;font-weight:400;color:var(--paper-60)}
.hero h1 .built{display:block;color:var(--paper);font-weight:500}
.hero h1 .built em{font-style:italic;color:var(--gold)}
.hero__sub{
  max-width:54ch;margin-top:clamp(1.5rem,3vw,2.2rem);color:var(--paper-60);
  font-size:var(--t-0);line-height:1.85;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.9rem,3.5vw,2.6rem)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:1.5rem 2.8rem;
  margin-top:clamp(5rem,9vw,7.5rem);padding-top:2.6rem;border-top:1px solid var(--rule-inv);
  color:var(--paper-40);
}

/* soft blurred light behind the hero, brand colours only */
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none;z-index:0;border-radius:50%}
.hero::before{
  width:62vw;height:62vw;max-width:840px;max-height:840px;right:-14%;top:-26%;
  background:radial-gradient(circle,rgba(185,147,39,.34),rgba(185,147,39,.06) 55%,transparent 70%);
  filter:blur(72px);
}
.hero::after{
  width:58vw;height:58vw;max-width:780px;max-height:780px;left:-18%;bottom:-30%;
  background:radial-gradient(circle,rgba(49,69,107,.62),rgba(49,69,107,.1) 58%,transparent 72%);
  filter:blur(84px);
}
@media (max-width:900px){
  .hero__copy{padding-top:1.6rem}
}
@media (max-width:760px){
  .hero__elevation{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;
  }
  .elev{--base:0px;--p:0px;transform:none;scroll-snap-align:start}
}
@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:drift 26s ease-in-out infinite alternate}
  .hero::after{animation:drift 32s ease-in-out infinite alternate-reverse}
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3%,4%,0)}}

/* decorative hairline elevation, fills the open right side of the hero */
.hero__draft{
  position:absolute;z-index:1;pointer-events:none;
  right:clamp(1rem,5vw,6rem);
  top:clamp(5rem,11vw,9rem);
  width:clamp(240px,29vw,470px);height:auto;
  color:var(--gold);opacity:.55;
}
@media (prefers-reduced-motion:no-preference){
  .hero__draft{animation:draftIn 1.6s .5s cubic-bezier(.2,.72,.28,1) backwards}
}
@keyframes draftIn{from{opacity:0;transform:translateY(16px)}to{opacity:.55;transform:none}}
@media (max-width:1100px){.hero__draft{display:none}}

/* ---------- positioning statement ---------- */
.stance{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.stance__figure{margin:0;position:relative}
.stance__figure img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border:1px solid var(--rule-soft);background:var(--screed);
}
.stance__figure figcaption{padding-top:1.1rem;color:var(--ink-40)}
.stance__mark{
  display:inline-block;margin-bottom:1.8rem;
  font-family:var(--mono);font-size:var(--t--2);letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-40);
  padding-top:.7rem;border-top:1px solid var(--gold);
}
@media (max-width:820px){.stance{grid-template-columns:1fr;gap:2rem}}

/* ---------- project cards ---------- */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.5vw,2.75rem)}
.pick{display:flex;flex-direction:column;text-decoration:none}
.pick__img{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  background:var(--screed);border:1px solid var(--rule-soft);
}
.pick__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.pick:hover .pick__img img{transform:scale(1.04)}
.pick__sheet{
  position:absolute;left:0;top:0;background:rgba(12,21,35,.88);color:var(--gold);
  padding:.7em 1em;
}
.pick__body{padding-top:1.3rem;margin-top:1.4rem;border-top:1px solid var(--rule)}
.pick h3{margin-bottom:.7rem;font-size:var(--t-1)}
.pick__facts{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;color:var(--ink-40)}
@media (max-width:900px){.picks{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.picks{grid-template-columns:1fr}}

/* ---------- services strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-inv)}
.strip__cell{
  background:rgba(10,18,32,.55);padding:clamp(1.75rem,3vw,2.5rem);
  display:flex;flex-direction:column;gap:1.1rem;
}
.strip__ic{width:28px;height:28px;color:var(--gold);opacity:.9}
.strip__cell h3{font-size:var(--t-1)}
.strip__cell p{color:var(--paper-60);font-size:var(--t--1);margin:0;line-height:1.8}
.strip__cell a{
  margin-top:auto;padding-top:1.4rem;text-decoration:none;color:var(--gold);
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
}
.strip__cell a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.strip{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.strip{grid-template-columns:1fr}}

/* ---------- credibility ---------- */
.creds{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.creds__c{padding:clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2vw,1.75rem);border-left:1px solid var(--rule)}
.creds__c:first-child{border-left:0;padding-left:0}
.creds__n{
  font-family:var(--display);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(2.1rem,1.5rem + 1.6vw,3.1rem);line-height:1;
}
.creds__l{margin-top:.9rem;color:var(--ink-60);font-size:var(--t--1);line-height:1.75}
@media (max-width:800px){
  .creds{grid-template-columns:1fr 1fr}
  .creds__c:nth-child(3){border-left:0;padding-left:0}
  .creds__c:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* ---------- testimonial ---------- */
.quote{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
.quote__bar{width:1px;background:var(--gold);align-self:stretch}
.quote blockquote{margin:0}
.quote p{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2.1rem);line-height:1.42;
  letter-spacing:-.005em;max-width:34ch;
}
.quote cite{
  display:block;margin-top:1.8rem;font-style:normal;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-40);
}

/* ---------- call to action band ---------- */
.cta{background:var(--grad-dark);color:var(--paper);text-align:center}
.cta__in{max-width:40rem;margin-inline:auto}
.cta p{color:var(--paper-60);margin:1.4rem auto 2.6rem}
.cta__row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ============================================================
   PROJECTS: the drawing register
   ============================================================ */
.filters{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  padding-bottom:1.6rem;border-bottom:1px solid var(--rule);
}
.filters__lbl{margin-right:.8rem;color:var(--ink-40)}
.chip{
  background:transparent;border:1px solid var(--rule);color:var(--ink-60);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:.75em 1.4em;border-radius:999px;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}
.chip:hover{border-color:var(--ink-40)}
.chip[aria-pressed="true"]{background:var(--navy-900);color:var(--paper);border-color:var(--navy-900)}

.register{border-bottom:1px solid var(--rule)}
.reg{
  display:grid;grid-template-columns:7rem minmax(0,1fr) 9rem 5rem 3rem;
  gap:1.75rem;align-items:center;width:100%;text-align:left;
  padding:1.9rem 0;border:0;border-top:1px solid var(--rule);
  background:transparent;color:inherit;cursor:pointer;
  transition:background .35s,padding .35s;
}
.reg:hover{background:var(--gold-wash);padding-inline:1.25rem}
.reg__no{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gold)}
.reg__title{font-family:var(--display);font-weight:400;font-size:var(--t-2);line-height:1.2}
.reg__scope{
  display:block;margin-top:.5rem;font-family:var(--body);font-weight:400;
  font-size:var(--t--1);line-height:1.8;color:var(--ink-60);max-width:52ch;
}
.reg__meta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-40);text-transform:uppercase}
.reg__open{
  justify-self:end;width:34px;height:34px;border:1px solid var(--rule);border-radius:999px;
  display:grid;place-items:center;color:var(--ink-40);transition:background .3s,color .3s,border-color .3s;
}
.reg:hover .reg__open{background:var(--navy-900);color:var(--paper);border-color:var(--navy-900)}
.reg.is-hidden{display:none}
@media (max-width:900px){
  .reg{grid-template-columns:5rem minmax(0,1fr) 2.5rem;gap:1.1rem}
  .reg__meta{display:none}
}

/* detail panel */
.sheet{border:0;padding:0;background:transparent;width:min(1040px,94vw);color:var(--ink)}
.sheet::backdrop{background:rgba(10,18,32,.9)}
.sheet__in{background:var(--paper);border:1px solid var(--rule);max-height:92vh;overflow-y:auto}
.sheet__bar{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 1.5rem;background:var(--grad-dark);color:var(--paper);
}
.sheet__bar h2{color:var(--paper)}
.sheet__close{
  background:transparent;border:1px solid var(--rule-inv);color:var(--paper);
  border-radius:999px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s;
}
.sheet__close:hover{background:var(--paper);color:var(--navy-900)}
.sheet__body{padding:clamp(1.5rem,4vw,2.75rem)}
.sheet__facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--rule);
}
.sheet__facts dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-40);margin-bottom:.5rem;
}
.sheet__facts dd{margin:0;font-size:var(--t--1)}
.sheet__imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.sheet__imgs figure{margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--screed)}
.sheet__imgs img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .sheet__facts{grid-template-columns:1fr 1fr}
  .sheet__imgs{grid-template-columns:1fr 1fr}
}

/* ---------- services page ---------- */
.svc{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,6vw,5rem);align-items:start;
  padding-block:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--rule);
}
.svc:first-of-type{border-top:0;padding-top:0}
.svc__no{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--gold);
  margin-bottom:1.3rem;text-transform:uppercase;
}
.svc h2{font-size:var(--t-3);font-weight:500}
.svc__lead{margin-top:1.3rem;color:var(--ink-60);line-height:1.85}
.svc__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3rem)}
.svc__cols h4{margin-bottom:1.1rem;font-family:var(--display);font-weight:500;font-size:var(--t-1)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding-left:2.4rem;margin-bottom:1rem;
  font-size:var(--t--1);color:var(--ink-60);line-height:1.8;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.14em;
}
.drivers{list-style:none;margin:0;padding:0}
.drivers li{
  position:relative;padding-left:1.4rem;margin-bottom:1rem;
  font-size:var(--t--1);color:var(--ink-60);line-height:1.8;
}
.drivers li::before{content:"";position:absolute;left:0;top:.9em;width:7px;height:1px;background:var(--gold)}
@media (max-width:880px){.svc{grid-template-columns:1fr}.svc__cols{grid-template-columns:1fr}}

/* ---------- contact page ---------- */
.contact{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start;
}
.contact dl{margin:0}
.contact dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-40);margin-top:2rem;
}
.contact dt:first-child{margin-top:0}
.contact dd{margin:.6rem 0 0;line-height:1.8}
.contact dd a{text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .3s}
.contact dd a:hover{border-color:var(--gold)}
.map{
  margin-top:2.5rem;aspect-ratio:16/10;background:var(--screed);
  border:1px solid var(--rule);position:relative;overflow:hidden;
}
.map iframe{width:100%;height:100%;border:0;display:block}
.map__fallback{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.7rem;
  text-align:center;padding:1.75rem;color:var(--ink-60);
}
.areas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;padding:0;list-style:none}
.areas li{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:999px;padding:.6em 1.1em;color:var(--ink-60);
}
@media (max-width:880px){.contact{grid-template-columns:1fr}}

/* ============================================================
   QUOTE TOOL
   ============================================================ */
.quoter{border:1px solid var(--rule);background:rgba(255,255,255,.5)}
.quoter__top{padding:1.75rem clamp(1.5rem,3vw,2.25rem);background:var(--grad-dark);color:var(--paper)}
.quoter__top h2{font-size:var(--t-2);color:var(--paper);font-weight:400;margin-top:.7rem}
.progress{display:flex;gap:5px;margin-top:1.6rem}
.progress__seg{flex:1;height:1px;background:var(--rule-inv);transition:background .3s}
.progress__seg.is-done{background:var(--gold)}
.progress__seg.is-current{background:var(--paper)}
.quoter__count{margin-top:1rem;color:var(--paper-40)}

.step{padding:clamp(1.75rem,4vw,2.75rem);display:none}
.step.is-active{display:block}
.step__q{font-size:var(--t-2);margin-bottom:.7rem;font-weight:400;outline:none}
.step__hint{color:var(--ink-60);font-size:var(--t--1);margin-bottom:2rem;line-height:1.8}

.opts{display:grid;gap:.7rem;margin:0 0 .5rem;padding:0;border:0}
.opts--2{grid-template-columns:1fr 1fr}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{
  display:block;padding:1.25rem 1.4rem;border:1px solid var(--rule);border-radius:10px;cursor:pointer;
  transition:border-color .3s,background .3s;
}
.opt span:hover{border-color:var(--ink-40)}
.opt strong{font-family:var(--display);font-weight:500;font-size:var(--t-1);display:block;line-height:1.3}
.opt small{display:block;margin-top:.5rem;color:var(--ink-60);font-size:var(--t--1);line-height:1.7}
.opt input:checked + span{border-color:var(--gold);background:var(--gold-wash)}
.opt input:focus-visible + span{outline:1.5px solid var(--gold);outline-offset:3px}
@media (max-width:640px){.opts--2{grid-template-columns:1fr}}

.field{margin-bottom:1.5rem}
.field label{
  display:block;margin-bottom:.6rem;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-60);
}
.field input,.field select,.field textarea{
  width:100%;padding:.95em 1em;font:inherit;font-size:var(--t-0);font-family:var(--body);
  border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:8px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{min-height:7rem;resize:vertical;line-height:1.8}
.field__row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:640px){.field__row{grid-template-columns:1fr}}
.err{display:block;margin-top:.55rem;color:#8C2F1B;font-size:var(--t--1);line-height:1.7}
.field.has-error input,.field.has-error select{border-color:#8C2F1B}
.opts.has-error{outline:1px solid #8C2F1B;outline-offset:8px}

.quoter__nav{
  display:flex;gap:.7rem;justify-content:space-between;
  padding:1.5rem clamp(1.75rem,4vw,2.75rem);border-top:1px solid var(--rule);
}

.result{padding:clamp(1.75rem,4vw,2.75rem);display:none;outline:none}
.result.is-active{display:block}
.result__range{
  font-family:var(--display);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);line-height:1.15;margin:1rem 0 1.6rem;
  max-width:none;
}
.result__note{
  border-left:1px solid var(--gold);padding-left:1.4rem;color:var(--ink-60);
  font-size:var(--t--1);margin-bottom:2.2rem;line-height:1.85;max-width:52ch;
}
.result__sum{border:1px solid var(--rule);padding:1.6rem;margin-bottom:2rem}
.result__sum dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 2rem;margin:0}
.result__sum dt{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-40)}
.result__sum dd{margin:0;font-size:var(--t--1)}
.result__acts{display:flex;flex-wrap:wrap;gap:.7rem}
.sent{display:none;padding:clamp(1.75rem,4vw,2.75rem);border-top:1px solid var(--rule);outline:none}
.sent.is-active{display:block}
.sent h3{color:var(--gold);font-weight:400}
.sent p{margin-top:1rem}

/* ---------- footer ---------- */
.ft{background:var(--grad-dark);color:var(--paper);padding-block:clamp(4rem,8vw,6rem) 2rem}
.ft__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:3rem 2.5rem;
  padding-bottom:3rem;border-bottom:1px solid var(--rule-inv);
}
.ft h4{
  font-family:var(--mono);font-weight:400;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;
}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:.75rem;color:var(--paper-60);font-size:var(--t--1);line-height:1.75}
.ft p{color:var(--paper-60);font-size:var(--t--1);line-height:1.9}
.ft a{text-decoration:none;color:var(--paper-60);transition:color .3s}
.ft a:hover{color:var(--paper)}
.ft__brand{display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem}
.ft__brand img{width:44px;height:44px;object-fit:cover}
.legend{list-style:none;margin:0;padding:0}
.legend li{
  display:flex;align-items:center;gap:.9rem;margin-bottom:.75rem;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--paper-40);
}
.legend i{width:18px;height:10px;flex:none;border:1px solid var(--rule-inv)}
.hatch-1{background:repeating-linear-gradient(45deg,var(--paper-40) 0 1px,transparent 1px 4px)}
.hatch-2{background:repeating-linear-gradient(90deg,var(--paper-40) 0 1px,transparent 1px 4px)}
.hatch-3{background:repeating-linear-gradient(0deg,var(--paper-40) 0 1px,transparent 1px 5px)}
.hatch-4{background:repeating-linear-gradient(-45deg,var(--paper-40) 0 1px,transparent 1px 3px)}
.hatch-5{background:var(--gold);opacity:.5}
.ft__legal{
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;
  padding-top:1.8rem;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(250,250,248,.3);
}
@media (max-width:900px){.ft__grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.ft__grid{grid-template-columns:1fr}}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.seq{opacity:0;animation:rise 1.1s cubic-bezier(.2,.72,.28,1) forwards}
.seq-1{animation-delay:.08s}
.seq-2{animation-delay:.2s}
.seq-3{animation-delay:.32s}
.seq-4{animation-delay:.44s}
.seq-5{animation-delay:.58s}
.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .seq{opacity:1;animation:none}
  .reveal{opacity:1;transform:none}
}

@media print{
  .hdr,.datum,.ft,.quoter__nav{display:none}
  body{background:#fff;color:#000}
}