/* Creativio Design — drawing-set edition.
   Layout: the site reads like an architect's drawing set. Aubergine sheets with a faint gold drafting grid,
   products shown as isometric line drawings with mm dimensions and title blocks, hairline-ruled sections,
   mono annotation labels, a high-contrast Caslon display face for headlines. */
/* Premium palette: deep aubergine purple (logo frame) for dark sections and buttons, never black;
   soft pastels from the frame spectrum on light sections; brass and rose accents. One look for every viewer. */
:root{
  color-scheme:light;
  --paper:#FFFFFF; --paper-2:#F8F1E9; --ink:#2E1F36; --muted:#6A5C70; --rule:#EBE1E6; --rule-2:#DACCD6;
  --plum:#2A0E36; --plum-ink:#2A0E36; --band:#2A0E36; --band-2:#21092B;
  --gold:#C23A55; --gold-ink:#A92E48; --gold-soft:#E4C47A;
  --on-dark:#FFFFFF; --on-dark-2:#DCCDE3; --dark-rule:rgba(255,255,255,.16); --grid-d:rgba(255,255,255,.055);
  --grid:rgba(42,14,54,.06);
  --p-blush:#FBE9EA; --p-sky:#E6F0F7; --p-lilac:#F0E8F6; --p-butter:#FCF4DC; --p-mint:#E4F2EC;
  --dw-line:#2A0E36; --dw-fill:#FFFFFF; --dw-top:#F9E9EA; --dw-side:#E3EEF4; --dw-dim:#C23A55; --dw-wall:#FBF6EF;
  --btn:#2A0E36; --btn-ink:#FFFFFF; --btn-hover:#C23A55;
  --spectrum:linear-gradient(90deg,#E31845 0%,#EF6A05 26%,#E9C93A 48%,#466CAA 74%,#A826AB 100%);
  --display:"Libre Caslon Display","Libre Caslon Text",Didot,"Bodoni 72",Georgia,serif;
  --sans:"Jost","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif; --text-serif:"Libre Caslon Text","Libre Caslon Display",Georgia,serif;
  --wrap:1240px; --gut:clamp(16px,4.5vw,40px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 30px 70px -34px rgba(42,14,54,.45);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
h1,h2,h3,h4{margin:0;text-wrap:balance}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1.06}
h1{font-size:clamp(2.5rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.2vw,2.7rem)}
h3{font-size:1.4rem;line-height:1.2}
h4{font:500 .7rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--p-blush);color:#2E1F36}
.hide-sm{display:inline}

/* ---------- type helpers ---------- */
.kicker{display:inline-flex;align-items:center;gap:12px;font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.kicker::before{content:"";width:28px;height:1px;background:currentColor}
.lede{font-size:1.08rem;color:var(--muted);max-width:56ch}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,48px);max-width:720px}
.sec-head p{color:var(--muted);max-width:60ch}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sub-head{display:grid;gap:12px;margin:clamp(56px,7vw,80px) 0 28px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 26px;font:500 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;border-radius:0;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn.sm{min-height:42px;padding:0 18px;font-size:.72rem}
.btn-plum{background:var(--btn);color:var(--btn-ink)}
.btn-plum:hover{background:var(--btn-hover)}
.btn-gold{background:var(--gold-soft);color:#2E1F36}
.btn-gold:hover{background:#FFFFFF;color:#3A1748}
.btn-line{border-color:var(--rule-2);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--gold);color:var(--gold-ink)}
.btn-ghost{border-color:rgba(238,243,243,.4);color:var(--on-dark);background:transparent}
.btn-ghost:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.arr{display:inline-block;width:18px;height:1px;background:currentColor;position:relative;transition:width .25s var(--ease)}
.arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
a:hover>.arr,.btn:hover .arr{width:26px}

/* ---------- utility bar + nav ---------- */
.util{background:var(--band-2);color:var(--on-dark-2);font:400 .72rem/1 var(--mono);letter-spacing:.08em}
.util .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:9px}
.util .sep{display:inline-block;width:1px;height:10px;background:var(--dark-rule);margin:0 14px;vertical-align:middle}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);border-bottom:1px solid var(--rule);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 10px 30px -20px rgba(42,14,54,.3)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.logo img{display:block;height:54px;width:auto}
.logo .d{display:none}
.menu{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)}
.menu>a:not(.btn){font:500 .74rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:8px 0;border-bottom:1px solid transparent;white-space:nowrap}
.menu>a:not(.btn):hover{color:var(--gold-ink)}
.menu>a[aria-current]{border-bottom-color:var(--gold)}
.menu .btn{min-height:44px;padding:0 20px;font-size:.72rem}
.burger{display:none;width:44px;height:44px;border:1px solid var(--rule-2);background:transparent;cursor:pointer;padding:0 11px;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;height:1px;background:var(--ink)}
@media (max-width:1180px){
  .burger{display:flex}
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:8px var(--gut) 20px;display:none;box-shadow:0 20px 40px -24px rgba(42,14,54,.3)}
  .menu.open{display:flex}
  .menu>a:not(.btn){padding:16px 0;border-bottom:1px solid var(--rule)}
  .menu>a[aria-current]{color:var(--gold-ink);border-bottom-color:var(--rule)}
  .menu .btn{margin-top:16px}
}

/* ---------- drafting sheets (line drawings) ---------- */
.sheet{margin:0;position:relative;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;border:1px solid var(--rule-2)}
.sheet::before,.sheet::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--gold);border-style:solid;pointer-events:none}
.sheet::before{top:8px;left:8px;border-width:1px 0 0 1px}
.sheet::after{top:8px;right:8px;border-width:1px 1px 0 0}
.dw{display:block;width:100%;height:auto;aspect-ratio:4/3;padding:6%}
.dw polygon{fill:var(--dw-fill);stroke:var(--dw-line);stroke-width:1.1px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dw .f-t{fill:var(--dw-top)}
.dw .f-x{fill:var(--dw-side)}
.dw .floor polygon,.dw .wall polygon{fill:var(--dw-wall);stroke-opacity:.55}
.dw .dt{stroke:var(--dw-line);stroke-width:.9px;vector-effect:non-scaling-stroke;opacity:.8}
.dw .ex,.dw .dl,.dw .tk,.dw .ld{stroke:var(--dw-dim);stroke-width:1px;fill:none;vector-effect:non-scaling-stroke}
.dw .ex{stroke-dasharray:3 3;opacity:.8}
.dw .dm,.dw .nt{fill:var(--dw-dim);font-family:var(--mono);font-weight:500;text-anchor:middle;dominant-baseline:middle}
.dw .nd{fill:var(--dw-dim)}
.tblock{display:grid;grid-template-columns:1fr 1.4fr 1fr;border-top:1px solid var(--rule-2);font:400 .62rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tblock span{padding:9px 12px;border-left:1px solid var(--rule-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tblock span:first-child{border-left:0;color:var(--gold-ink)}
/* dark sheets on aubergine */
.sheet.dark{--dw-line:#FFFFFF;--dw-fill:var(--band);--dw-top:#3C1A4B;--dw-side:#331541;--dw-dim:#E4C47A;--dw-wall:#331541;--grid:var(--grid-d);--rule-2:var(--dark-rule);--muted:var(--on-dark-2);--gold-ink:var(--gold-soft);background-color:var(--band)}
@media (prefers-reduced-motion:no-preference){
  .hart .dw polygon{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 1.1s var(--ease) forwards;animation-delay:calc(var(--d) * 22ms + .2s)}
  .hart .dw .dt,.hart .dw .ann{opacity:0;animation:fade .6s ease forwards;animation-delay:1.3s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* ---------- hero ---------- */
.hero{position:relative;background-color:var(--band);background-image:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px),linear-gradient(rgba(238,243,243,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(238,243,243,.03) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;color:var(--on-dark);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(56px,7vw,96px)}
.hcopy{display:grid;gap:22px;justify-items:start}
.hero .kicker{color:var(--gold-soft)}
.tagline{display:grid;gap:.06em;font-size:clamp(2.6rem,5.2vw,4.5rem);line-height:1.02;color:var(--on-dark)}
.tagline span:nth-child(2){color:var(--gold-soft)}
.punch{font:500 .82rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);padding-top:4px}
.hero .lede{color:var(--on-dark-2);max-width:48ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hart .sheet{box-shadow:0 40px 80px -40px rgba(40,14,50,.55)}
.rise{animation:rise .9s var(--ease) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none}}

.trust{border-bottom:1px solid var(--rule);background:var(--paper)}
.trust .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust .grid>div{display:grid;gap:4px;padding:22px 20px;border-left:1px solid var(--rule)}
.trust .grid>div:first-child{border-left:0;padding-left:0}
.trust b{font:400 1.2rem/1.2 var(--display)}
.trust span{font:400 .7rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- sections ---------- */
section{padding-block:clamp(64px,8vw,104px)}
section.tight{padding-block:clamp(48px,6vw,72px)}
.alt{background:var(--paper-2);border-block:1px solid var(--rule)}
.band{background-color:var(--band);background-image:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);background-size:120px 120px;color:var(--on-dark)}
.band h2,.band h3{color:var(--on-dark)}
.band .kicker{color:var(--gold-soft)}
.band .sec-head p,.band .lede{color:var(--on-dark-2)}
.seg{scroll-margin-top:140px}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:start}
.split>div:first-child{display:grid;gap:16px;align-content:start}
.center-cta{display:flex;justify-content:center;margin-top:44px}

/* ---------- segment tabs ---------- */
.tabwrap{display:flex;justify-content:center;margin-bottom:clamp(32px,4vw,48px)}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule-2);padding:4px;max-width:760px;width:100%}
.tabs button{position:relative;z-index:1;min-height:54px;padding:10px 18px;border:0;background:transparent;font:500 .76rem/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .3s}
.tabs button[aria-selected="true"]{color:var(--btn-ink)}
.tabs .pill{position:absolute;top:4px;bottom:4px;left:0;width:0;background:var(--btn);transition:transform .45s var(--ease),width .45s var(--ease)}
.segpanel{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,4vw,56px);align-items:start}
.seg-intro{display:grid;gap:16px;align-content:start;position:sticky;top:120px}
.seg-intro h3{font-size:1.75rem}
.seg-intro p{color:var(--muted)}
.seg-intro .btn{justify-self:start;margin-top:8px}
.ticks{display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;font-size:.96rem}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:1px;background:var(--gold)}
.pgrid-cards{display:grid;gap:18px}
.pgrid-cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pgrid-cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcard{display:grid;text-decoration:none;color:var(--ink);background:var(--paper);transition:transform .35s var(--ease)}
.pcard .sheet{border-bottom:0;transition:border-color .3s}
.pcard .pc-t{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--rule-2);font:400 1.15rem/1.2 var(--display)}
.pcard .pc-t .arr{color:var(--gold);flex:none}
.pcard:hover{transform:translateY(-4px)}
.pcard:hover .sheet,.pcard:hover .pc-t{border-color:var(--gold)}

/* ---------- value / promise grid ---------- */
.feat{display:grid;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.feat.three{grid-template-columns:repeat(3,1fr)}
.feat.four{grid-template-columns:repeat(4,1fr)}
.feat>div{display:grid;gap:12px;align-content:start;padding:32px 28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band .feat,.band .feat>div{border-color:var(--dark-rule)}
.feat .ic{color:var(--gold-soft)}
.feat h3{font-size:1.35rem}
.feat p{color:var(--on-dark-2);font-size:.95rem}

/* ---------- testimonials / partners ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcard{position:relative;margin:0;display:grid;gap:18px;padding:30px 28px;border:1px dashed var(--rule-2);background:var(--paper)}
.tcard .q{color:var(--gold)}
.tcard blockquote{margin:0;font:400 1.15rem/1.45 var(--display);color:var(--muted)}
.tcard figcaption{display:grid;gap:2px}
.tcard figcaption b{font-weight:500}
.tcard small{font:400 .7rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.slot-tag{position:absolute;top:14px;right:14px;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);border:1px solid var(--rule-2);padding:5px 7px}
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.pslot{display:grid;place-items:center;min-height:86px;border:1px dashed var(--rule-2);font:400 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fine{margin-top:14px;font-size:.82rem;color:var(--muted)}

/* ---------- slim CTA ---------- */
.cta-slim{padding-block:clamp(48px,6vw,72px);background:var(--paper-2);border-top:1px solid var(--rule)}
.cta-slim .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-slim .wrap>div:first-child{display:grid;gap:8px;max-width:620px}
.cta-slim p{color:var(--muted)}
.cta-slim .btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- page banner ---------- */
.pbanner{background-color:var(--band);background-image:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);background-size:120px 120px;color:var(--on-dark);padding-block:clamp(44px,6vw,72px)}
.pbanner .wrap{display:grid;gap:32px;align-items:center}
.pbanner .wrap.with-art{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.pbanner .wrap>div:first-child{display:grid;gap:16px}
.pbanner h1{font-size:clamp(2.3rem,4.6vw,3.8rem)}
.pbanner .sub{color:var(--on-dark-2);max-width:52ch;font-size:1.06rem}
.crumb{font:400 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.crumb a{text-decoration:none;color:var(--on-dark-2)}
.crumb span{margin:0 10px;opacity:.6}
.b-art .dw{aspect-ratio:16/10}

/* ---------- sub navigation ---------- */
.subnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 78px);z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.subnav .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:none;padding:8px 14px;font:500 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);border:1px solid transparent}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--plum-ink);border-color:var(--rule-2)}

/* ---------- sectors ---------- */
.sectors .sec-head{margin-bottom:28px}
.slist{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.slist li{display:flex;align-items:center;gap:16px;padding:22px 22px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.slist svg{flex:none;color:var(--gold)}

/* ---------- spec sheets ---------- */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.spec{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border:1px solid var(--rule-2)}
.spec .sheet{border:0;border-bottom:1px solid var(--rule-2)}
.spec-b{display:grid;gap:12px;align-content:start;padding:26px 26px 28px}
.spec-b h3{font-size:1.7rem}
.spec-b p{color:var(--muted)}
.spec-b h4{margin-top:8px}
.spec-b .btn{justify-self:start;margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;padding:6px 10px;font-size:.82rem;line-height:1.25;border:1px solid var(--rule);background:var(--paper-2)}
.chip.gold{border-color:var(--gold-soft);background:transparent;color:var(--gold-ink)}

/* ---------- points (contractors / architects) ---------- */
.points{display:grid;gap:0;border-top:1px solid var(--rule)}
.points.two{grid-template-columns:1fr 1fr;column-gap:32px}
.points li{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.points .ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--rule-2);color:var(--gold)}
.points h3{font-size:1.2rem;margin-bottom:4px}
.points p{color:var(--muted);font-size:.94rem}

/* ---------- finishes strip ---------- */
.fstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.fsw{display:grid;text-decoration:none;color:var(--ink);border:1px solid var(--rule-2);background:var(--paper)}
.fsw .swatch{display:block;width:100%;height:auto;aspect-ratio:4/5}
.fsw span{display:flex;justify-content:space-between;padding:12px 14px;font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border-top:1px solid var(--rule-2)}
.fsw:hover{border-color:var(--gold)}

/* ---------- materials ---------- */
.mats{padding-block:clamp(24px,4vw,48px)}
.matblock{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:start;padding-block:clamp(40px,5vw,64px);border-bottom:1px solid var(--rule)}
.matblock:last-child{border-bottom:0}
.matblock>div:last-child{display:grid;gap:14px}
.matblock h4{margin-top:6px}
.msw{position:relative;border:1px solid var(--rule-2);background:var(--paper)}
.msw .swatch{display:block;width:100%;height:auto;aspect-ratio:4/3}
.mtag{position:absolute;left:12px;bottom:12px;font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--paper);color:var(--gold-ink);padding:7px 9px;border:1px solid var(--rule-2)}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:6px}
.pc div{display:grid;gap:10px;align-content:start}
.pc ul{display:grid;gap:6px}
.pc li{position:relative;padding-left:22px;font-size:.95rem}
.pc li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:1px;background:var(--gold)}
.tablewrap{overflow-x:auto;border:1px solid var(--rule-2);background:var(--paper)}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule);font-size:.95rem;vertical-align:top}
th{font:500 .66rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--paper-2)}
tr:last-child td{border-bottom:0}
td:first-child{font-family:var(--display);font-size:1.08rem}

/* ---------- process stepper ---------- */
.stepper{border:1px solid var(--rule-2);background:var(--paper)}
.st-nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.st-btn{display:grid;justify-items:center;gap:10px;padding:22px 8px 18px;border:0;background:transparent;cursor:pointer;color:var(--muted);font:500 .68rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-align:center}
.st-btn .dot{width:11px;height:11px;border:1px solid var(--gold);transform:rotate(45deg);transition:background .3s}
.st-btn[aria-selected="true"]{color:var(--ink)}
.st-btn[aria-selected="true"] .dot{background:var(--gold)}
.st-bar{height:2px;background:var(--rule)}
.st-bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .5s var(--ease)}
.st-panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,48px)}
.sp-ic{display:grid;place-items:center;width:180px;aspect-ratio:1;color:var(--plum-ink);border:1px solid var(--rule-2);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:18px 18px}
.sp-txt{display:grid;gap:12px}
.sp-txt h3{font-size:2rem}
.sp-txt p{color:var(--muted);max-width:58ch}
.ready{display:grid;gap:0;border-top:1px solid var(--rule)}
.ready li{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.ready svg{flex:none;color:var(--gold)}

/* ---------- about ---------- */
.facts{margin:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.facts div{padding:22px 22px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;gap:6px}
.facts dt{font:500 .66rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.facts dd{margin:0;font:400 1.2rem/1.3 var(--display)}
.split>div:first-child p:not(.lede){color:var(--muted)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:start}
.info{display:grid;border-top:1px solid var(--rule)}
.info .item{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.info .ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule-2);color:var(--gold)}
.info .item>div{display:grid;gap:6px;justify-items:start;min-width:0}
.info .v{font-size:1.02rem;overflow-wrap:anywhere}
.copy,.map{font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}

/* ---------- forms ---------- */
.leadbox{background:var(--paper);color:var(--ink);border:1px solid var(--rule-2);padding:clamp(22px,3vw,32px)}
.band .leadbox{box-shadow:var(--shadow)}
.lead{display:grid;gap:14px}
.lead h3{font-size:1.6rem}
.lead .sub{color:var(--muted);font-size:.92rem;margin-top:-6px}
.lead .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead label{display:grid;gap:6px;font:500 .66rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:0}
.lead input,.lead select,.lead textarea{width:100%;min-height:46px;padding:10px 12px;font:400 1rem/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);border-radius:0;appearance:none;-webkit-appearance:none}
.lead select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.lead textarea{min-height:110px;resize:vertical}
.lead input:focus,.lead select:focus,.lead textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(211,23,63,.14)}
.lead .btn{width:100%;margin-top:4px}
.lead .mini{font-size:.8rem;color:var(--muted);text-align:center}
.lead .err{color:#B3261E;font-size:.88rem}
.pills{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pills legend{font:500 .66rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding:0}
.pill{position:relative}
.pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pill span{display:inline-block;padding:10px 14px;font:400 .9rem/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);border:1px solid var(--rule-2);transition:all .2s}
.pill input:checked+span{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.pill input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.lead label.consent{display:flex;gap:10px;align-items:flex-start;font:400 .86rem/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.consent input{width:18px;min-height:18px;height:18px;margin-top:3px;appearance:auto;-webkit-appearance:auto;accent-color:var(--plum)}
.done{display:grid;gap:14px;justify-items:center;text-align:center;padding:20px 0}
.done .tick{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--gold);color:var(--gold)}
.done p{color:var(--muted)}
.d-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}


/* ---------- footer ---------- */
footer{background:var(--band-2);color:var(--on-dark-2);padding-top:clamp(56px,7vw,80px)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:clamp(28px,4vw,48px);padding-bottom:48px}
.fgrid>div{display:grid;gap:12px;align-content:start}
.flogo{height:64px;width:auto}
.ftag{font:400 1.25rem/1.3 var(--display);color:var(--on-dark)}
.fpunch{font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
footer p{font-size:.92rem}
footer h4{color:var(--gold-soft)}
footer h4.mt{margin-top:14px}
footer ul{display:grid;gap:8px;font-size:.92rem}
footer a{text-decoration:none}
footer a:hover{color:var(--gold-soft)}
footer .btn{justify-self:start;margin-top:8px}
.fbar{border-top:1px solid var(--dark-rule)}
.fbar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:18px;font:400 .66rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ---------- floating + mobile bar ---------- */
.wa{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:50;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#1F9D55;color:#fff;box-shadow:0 12px 30px -10px rgba(42,14,54,.45)}
.mbar{display:none}

/* ---------- reveal (transform only, visible at rest) ---------- */
.js .rv{transform:translateY(18px);transition:transform .8s var(--ease)}
.js .rv.in{transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}.rv.d3{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.js .rv{transform:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pgrid-cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fstrip{grid-template-columns:repeat(3,1fr)}
  .feat.four{grid-template-columns:repeat(2,1fr)}
  .st-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
  .st-bar{display:none}
  .st-btn{border-bottom:1px solid var(--rule)}
}
@media (max-width:980px){
  .hero-grid,.split,.contact,.matblock,.pbanner .wrap.with-art,.segpanel{grid-template-columns:minmax(0,1fr)}
  .seg-intro{position:static}
  .specs{grid-template-columns:minmax(0,1fr)}
  .feat.three{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .slist{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .trust .grid{grid-template-columns:repeat(2,1fr)}
  .trust .grid>div:nth-child(3){border-left:0;padding-left:0}
  .trust .grid>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .b-art{max-width:560px}
}
@media (max-width:760px){
  .hide-sm{display:none}
  .util .wrap{justify-content:center}
  .nav .wrap{min-height:68px}
  .logo img{height:46px}
  .subnav{top:calc(env(safe-area-inset-top,0px) + 68px)}
  .mbar{display:grid;grid-template-columns:1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--band-2);padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--dark-rule)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;font:500 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--on-dark)}
  .mbar .go{background:var(--gold-soft);color:#2E1F36}
  .wa{display:none}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .points.two{grid-template-columns:1fr}
  .lead .row{grid-template-columns:1fr}
  .pc{grid-template-columns:1fr}
  .st-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-panel{grid-template-columns:1fr}
  .sp-ic{width:120px}
  .tabs button{font-size:.66rem;letter-spacing:.08em;padding:8px 10px}
  .cta-slim .btns,.cta-slim .btns .btn{width:100%}
}
@media (max-width:560px){
  .pgrid-cards.c3,.pgrid-cards.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pcard .pc-t{font-size:.98rem;padding:10px 12px}
  .feat.three,.feat.four{grid-template-columns:1fr}
  .slist{grid-template-columns:1fr}
  .fstrip{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .tblock{grid-template-columns:1fr 1fr}
  .tblock span:last-child{display:none}
  .ctas,.ctas .btn{width:100%}
  .trust .grid>div{padding:16px 12px 16px 0}
  .trust .grid>div:nth-child(even){padding-left:14px}
}
/* fixes */
section.hero{padding-block:0}
.hart .dw{padding:4%}
.leadbox .lead h3{color:var(--ink)}
.spec .dw{aspect-ratio:16/10}

/* logo spectrum as a signature line */
.nav{border-bottom:0}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--spectrum)}
.kicker::before{background:var(--spectrum);height:2px}
footer{position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--spectrum)}
.tagline span:nth-child(2){color:var(--gold-soft)}
.menu>a[aria-current]{border-bottom-color:var(--gold)}
.sheet::before,.sheet::after{border-color:var(--gold)}
.sheet.dark::before,.sheet.dark::after{border-color:var(--gold-soft)}
.trust b{color:var(--ink)}

/* pastel accents */
.pcard:nth-child(5n+1) .sheet,.spec:nth-child(5n+1) .sheet{background-color:var(--p-blush)}
.pcard:nth-child(5n+2) .sheet,.spec:nth-child(5n+2) .sheet{background-color:var(--p-sky)}
.pcard:nth-child(5n+3) .sheet,.spec:nth-child(5n+3) .sheet{background-color:var(--p-lilac)}
.pcard:nth-child(5n+4) .sheet,.spec:nth-child(5n+4) .sheet{background-color:var(--p-butter)}
.pcard:nth-child(5n+5) .sheet,.spec:nth-child(5n+5) .sheet{background-color:var(--p-mint)}
.pcard .sheet,.spec .sheet{--dw-fill:#FFFFFF;--dw-top:#FFFFFF;--dw-side:rgba(42,14,54,.08)}
.chip{background:var(--p-lilac);border-color:transparent}
.chip.gold{background:var(--p-blush);border-color:transparent;color:var(--gold-ink)}
.points .ic,.info .ic{background:var(--p-blush);border-color:transparent;color:var(--gold-ink)}
.points li:nth-child(3n+2) .ic{background:var(--p-sky);color:var(--plum)}
.points li:nth-child(3n) .ic{background:var(--p-butter);color:#8A6A1F}
.slist li:nth-child(odd){background:var(--p-sky)}
.slist li:nth-child(even){background:var(--p-blush)}
.slist svg{color:var(--plum)}
.trust{background:var(--p-butter)}
.trust .grid>div{border-color:rgba(42,14,54,.12)}
.sp-ic{background-color:var(--p-sky)}
.facts div:nth-child(odd){background:var(--p-mint)}
.facts div:nth-child(even){background:var(--p-lilac)}
.tabs{background:var(--paper)}
.alt{background:var(--paper-2)}
.cta-slim{background:var(--p-blush);border-top:0}
.feat .ic{color:var(--gold-soft)}
/* rendered material samples */
img.swatch{display:block;width:100%;height:auto;object-fit:cover;background:var(--paper-2)}
.msw img.swatch{aspect-ratio:4/3}
.fsw img.swatch{aspect-ratio:4/5}
/* "Request a quote" buttons: solid dark teal everywhere; deeper teal with a brass outline on teal sections */
a.btn[href^="contact.html"],a.btn[href^="#contact"]{background:var(--btn);color:#FFFFFF;border-color:var(--btn)}
a.btn[href^="contact.html"]:hover,a.btn[href^="#contact"]:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:#FFFFFF}
.band a.btn[href^="contact.html"],.band a.btn[href^="#contact"],footer a.btn[href^="contact.html"],footer a.btn[href^="#contact"]{background:#1D0726;border-color:rgba(228,196,122,.6);color:#FFFFFF}
.band a.btn[href^="contact.html"]:hover,.band a.btn[href^="#contact"]:hover,footer a.btn[href^="contact.html"]:hover,footer a.btn[href^="#contact"]:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.mbar .go{background:#1D0726;color:#FFFFFF;border-left:1px solid rgba(228,196,122,.45)}

/* gallery */
.gfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.gfilter button{min-height:42px;padding:0 18px;border:1px solid var(--rule-2);background:var(--paper);font:500 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.gfilter button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:#FFFFFF}
.ggroup{display:grid;gap:18px}.ggroup+.ggroup{margin-top:48px}.gh{font-size:1.7rem}
.ggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.ggrid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gitem{margin:0;display:grid;background:var(--paper);border:1px solid var(--rule-2);cursor:zoom-in;transition:transform .35s var(--ease),border-color .3s}
.gitem:hover,.gitem:focus-visible{transform:translateY(-4px);border-color:var(--gold)}
.gitem .sheet{border:0;border-bottom:1px solid var(--rule-2)}
.gitem[data-cat="biz"] .sheet{background-color:var(--p-sky)}
.gitem[data-cat="arch"] .sheet{background-color:var(--p-blush)}
.gitem .sheet{--dw-fill:#FFFFFF;--dw-top:#FFFFFF;--dw-side:rgba(42,14,54,.08)}
.gimg{border-bottom:1px solid var(--rule-2)}
.gimg img.swatch{aspect-ratio:4/3}
.gitem figcaption{display:grid;gap:3px;padding:14px 16px}
.gitem figcaption b{font:400 1.15rem/1.2 var(--display)}
.gitem figcaption span{font:400 .66rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gnote{margin-top:22px}
.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.lb-bg{position:absolute;inset:0;background:rgba(40,14,50,.72);backdrop-filter:blur(3px)}
.lb-card{position:relative;width:min(980px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper);border:1px solid var(--gold-soft)}
.lb-body .sheet{border:0}
.lb-body .dw{aspect-ratio:16/10}
.lb-body figcaption{display:grid;gap:4px;padding:16px 20px}
.lb-body figcaption b{font:400 1.5rem/1.2 var(--display)}
.lb-body figcaption span{font:400 .7rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lb-body .sheet{background-color:var(--p-lilac)}
.lb-x{position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;border:0;background:var(--paper);cursor:pointer}
.lb-x span{position:absolute;left:12px;right:12px;top:50%;height:1px;background:var(--ink)}
.lb-x span:first-child{transform:rotate(45deg)}.lb-x span:last-child{transform:rotate(-45deg)}
body.lb-open{overflow:hidden}
@media (max-width:980px){.ggrid,.ggrid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ggrid,.ggrid.c4{grid-template-columns:minmax(0,1fr)}}

/* gallery of completed work (placeholder slots until photos arrive) */
.gwork-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gwork{position:relative;margin:0;display:grid;background:var(--paper);border:1px dashed var(--rule-2)}
.gph{display:grid;place-items:center;align-content:center;gap:10px;aspect-ratio:4/3;color:var(--plum);border-bottom:1px dashed var(--rule-2)}
.gph span{font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gwork figcaption{display:grid;gap:3px;padding:14px 16px}
.gwork figcaption b{font:400 1.15rem/1.2 var(--display);color:var(--muted)}
.gwork figcaption span{font:400 .66rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fsw{margin:0}
@media (max-width:980px){.gwork-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gwork-grid{grid-template-columns:minmax(0,1fr)}}
/* no grid-paper backgrounds anywhere */
.sheet,.hero,.band,.pbanner,.sp-ic{background-image:none}

/* typography: display serif for large headings, text serif for small titles, Jost capitals for labels */
h1,h2{font-feature-settings:"kern","liga";text-rendering:optimizeLegibility}
h3,.trust b,.pcard .pc-t,.facts dd,.gwork figcaption b,.gitem figcaption b,.ftag,td:first-child,.tcard blockquote,.lead h3{font-family:var(--text-serif);letter-spacing:0}
h3{font-size:1.3rem;line-height:1.25}
.spec-b h3{font-size:1.5rem}.seg-intro h3{font-size:1.55rem}.feat h3{font-size:1.2rem}.points h3{font-size:1.1rem}
.kicker,h4,.crumb,.util,.tblock,.subnav a,.slot-tag,.mtag,.fsw span,.trust span,.facts dt,th,.lead label,.copy,.map,.fpunch,.fbar .wrap,.gph span,.gwork figcaption span,.gitem figcaption span,.punch{font-weight:500;letter-spacing:.16em}
.util{font-weight:400;letter-spacing:.06em}
body{font-weight:400;letter-spacing:.005em}
.lede,.pbanner .sub{font-weight:300;font-size:1.12rem}

/* ---------- product line illustrations: animate on hover, click to view larger ---------- */
.ba{--ba-line:#2A0E36;--ba-fill:#FFFFFF;--ba-bg:#F6F1F8;position:relative;display:block;width:100%;padding:0;border:0;background:var(--ba-bg);cursor:zoom-in;overflow:hidden}
.ba svg{display:block;width:100%;height:auto;aspect-ratio:4/3}
.ba.dark{--ba-line:#F4E7C8;--ba-fill:var(--band);--ba-bg:var(--band)}
.ba polygon{fill:var(--ba-fill);stroke:var(--ba-line);stroke-width:1.1px;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 2s ease}
.ba .dt{stroke:var(--ba-line);stroke-width:.8px;vector-effect:non-scaling-stroke;opacity:.6;transition:opacity .8s ease}
.ba .ann{display:none}
.ba .wall polygon,.ba .floor polygon{stroke-opacity:.35}
.ba g{transition:transform 1.1s var(--ease),opacity .6s ease}
.ba.p0 polygon{stroke-dashoffset:100}
.ba.p0 .dt{opacity:0}
.ba.p0.s-draw:not(.plan) polygon,.ba.plan.p0.s-draw .c0 polygon,.ba.plan.p0.n4 .c1 polygon,.ba.plan.p0.n6 .c2 polygon,.ba.plan.p0.n8 .c3 polygon{stroke-dashoffset:0}
.ba.p0.s-draw:not(.plan) .dt,.ba.plan.p0.s-draw .c0 .dt,.ba.plan.p0.n4 .c1 .dt,.ba.plan.p0.n6 .c2 .dt,.ba.plan.p0.n8 .c3 .dt{opacity:.6}
.ba.plan.p0 .c1,.ba.plan.p0 .c2,.ba.plan.p0 .c3{opacity:0}
.ba.plan.p0.n4 .c1,.ba.plan.p0.n6 .c2,.ba.plan.p0.n8 .c3{opacity:1}
.ba.plan.p0.n4 .c1 polygon,.ba.plan.p0.n6 .c2 polygon,.ba.plan.p0.n8 .c3 polygon{transition:stroke-dashoffset 1.1s ease}
.ba.s-explode g[style]{transform:var(--ex)}
.ba.no-tr,.ba.no-tr *{transition:none!important}
.hero-thumb{border:1px solid rgba(228,196,122,.45)}
.banner-thumb{border:1px solid rgba(228,196,122,.4)}
.banner-thumb svg,.spec-thumb svg{aspect-ratio:16/10}
.spec-thumb{border-bottom:1px solid var(--rule-2)}
.spec:nth-child(5n+1) .ba{--ba-bg:var(--p-blush)}.spec:nth-child(5n+2) .ba{--ba-bg:var(--p-sky)}.spec:nth-child(5n+3) .ba{--ba-bg:var(--p-lilac)}.spec:nth-child(5n+4) .ba{--ba-bg:var(--p-butter)}.spec:nth-child(5n+5) .ba{--ba-bg:var(--p-mint)}
.pcard:nth-child(5n+1) .ba{--ba-bg:var(--p-blush)}.pcard:nth-child(5n+2) .ba{--ba-bg:var(--p-sky)}.pcard:nth-child(5n+3) .ba{--ba-bg:var(--p-lilac)}.pcard:nth-child(5n+4) .ba{--ba-bg:var(--p-butter)}.pcard:nth-child(5n+5) .ba{--ba-bg:var(--p-mint)}
.pcard{display:grid;background:var(--paper);transition:transform .35s var(--ease)}
.pcard .ba{border:1px solid var(--rule-2);border-bottom:0}
a.pc-t{text-decoration:none;color:var(--ink)}
.pcard:hover{transform:translateY(-4px)}
.pcard:hover .ba,.pcard:hover .pc-t{border-color:var(--gold)}
.ba-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.ba-bg{position:absolute;inset:0;background:rgba(30,8,38,.8);backdrop-filter:blur(4px);animation:baFade .35s ease}
.ba-card{position:relative;width:min(1180px,100%,calc((100dvh - 60px) * 4 / 3));max-height:calc(100dvh - 32px);overflow:auto;background:#FFFFFF;border:1px solid var(--gold-soft);animation:baZoom .55s var(--ease)}
@keyframes baZoom{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes baFade{from{opacity:0}}
.ba-x{position:absolute;top:10px;right:10px;z-index:5;width:44px;height:44px;border:0;background:#FFFFFF;cursor:pointer;box-shadow:0 4px 12px -6px rgba(0,0,0,.3)}
.ba-x span{position:absolute;left:12px;right:12px;top:50%;height:1.5px;background:var(--ink)}
.ba-x span:first-child{transform:rotate(45deg)}.ba-x span:last-child{transform:rotate(-45deg)}
.ba-stage{cursor:default;--ba-bg:#F6F1F8}
.ba-stage svg{aspect-ratio:auto;height:100%}
body.ba-open{overflow:hidden}

/* ---------- premium surface textures ---------- */
:root{--tx-grain-dark: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .88  0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--tx-grain-light: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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25  0 0 0 0 .12  0 0 0 0 .28  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--tx-linen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .2  0 0 0 .07 0'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .012' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .2  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");--tx-deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cpath d='M0,30 A30,30 0 0 1 60,30 M-30,0 A30,30 0 0 0 30,0 M30,0 A30,30 0 0 0 90,0 M7,30 A23,23 0 0 1 53,30 M-23,0 A23,23 0 0 0 23,0 M37,0 A23,23 0 0 0 83,0 M14,30 A16,16 0 0 1 46,30 M-16,0 A16,16 0 0 0 16,0 M44,0 A16,16 0 0 0 76,0 M21,30 A9,9 0 0 1 39,30 M-9,0 A9,9 0 0 0 9,0 M51,0 A9,9 0 0 0 69,0' fill='none' stroke='%23E4C47A' stroke-opacity='.16' stroke-width='.7'/%3E%3C/svg%3E")}
body{background-image:var(--tx-grain-light);background-size:220px 220px}
.hero,.pbanner,.band{background-image:var(--tx-grain-dark),var(--tx-deco),radial-gradient(1100px 520px at 88% -12%,rgba(228,196,122,.16),transparent 62%),radial-gradient(900px 520px at -8% 115%,rgba(120,52,150,.38),transparent 64%);background-size:220px 220px,60px 30px,auto,auto;background-repeat:repeat,repeat,no-repeat,no-repeat}
footer{background-image:var(--tx-grain-dark),radial-gradient(900px 420px at 100% 0%,rgba(228,196,122,.10),transparent 60%);background-size:220px 220px,auto;background-repeat:repeat,no-repeat}
.util{background-image:var(--tx-grain-dark);background-size:220px 220px}
.alt{background-image:var(--tx-linen),var(--tx-grain-light);background-size:240px 240px,220px 220px}
.trust,.cta-slim,.subnav,.nav{background-image:var(--tx-grain-light);background-size:220px 220px}
.cta-slim{background-image:var(--tx-linen),var(--tx-grain-light);background-size:240px 240px,220px 220px}
.ba{background-image:var(--tx-grain-light);background-size:220px 220px}
.ba.dark{background-image:var(--tx-grain-dark),radial-gradient(600px 300px at 80% 0%,rgba(228,196,122,.12),transparent 60%);background-size:220px 220px,auto;background-repeat:repeat,no-repeat}
.spec,.leadbox,.gwork,.tablewrap,.stepper,.feat>div{background-image:none}
/* resting frame: product fills the card; the frame eases out only while parts explode */
.ba .fr{transform:var(--fr);transform-box:view-box;transform-origin:0 0;transition:transform 1.2s var(--ease)}
.ba.p0 .fr{transform:none}
/* phone refinements */
h1,h2,h3,.ftag{text-wrap:balance}
p,.lede{text-wrap:pretty}
@media (max-width:640px){
  .fstrip{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
  .fsw img.swatch,.fsw .swatch{aspect-ratio:1/1}
  .fsw span{padding:9px 8px;font-size:.6rem;letter-spacing:.1em}
}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
/* gallery: real project photos, masonry columns + lightbox */
.gmason{columns:3;column-gap:18px}
.gphoto{break-inside:avoid;margin:0 0 18px;background:var(--paper);border:1px solid var(--rule-2);display:block}
.gphoto[hidden]{display:none}
.gp-open{display:block;width:100%;padding:0;border:0;background:var(--p-lilac);cursor:zoom-in;overflow:hidden}
.gp-open img{display:block;width:100%;height:auto;transition:transform .9s var(--ease)}
.gphoto:hover .gp-open img{transform:scale(1.035)}
.gphoto:hover{border-color:var(--gold)}
.gphoto figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 16px}
.gphoto figcaption b{font:400 1.05rem/1.25 var(--text-serif);color:var(--ink)}
.gphoto figcaption span{font:500 .62rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
@media (max-width:980px){.gmason{columns:2}}
@media (max-width:560px){.gmason{columns:1}}
.lb{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:16px}
.lb[hidden]{display:none}
.lb-bg{position:absolute;inset:0;background:rgba(30,8,38,.92);animation:baFade .3s ease}
.lb-fig{position:relative;margin:0;display:grid;justify-items:center;gap:12px;animation:baZoom .45s var(--ease)}
.lb-fig img{max-width:min(1200px,calc(100vw - 32px));max-height:calc(100dvh - 110px);width:auto;height:auto;display:block;border:1px solid var(--gold-soft);background:#1d0726}
.lb-fig figcaption{font:400 1.1rem/1.3 var(--text-serif);color:#fff}
.lb-x{top:10px;right:10px}
.lb-nav{position:absolute;top:calc(50% - 30px);width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.92);cursor:pointer;display:grid;place-items:center}
.lb-nav span{width:12px;height:12px;border-top:1.6px solid var(--ink);border-right:1.6px solid var(--ink)}
.lb-nav.prev{left:10px}.lb-nav.prev span{transform:rotate(-135deg);margin-left:4px}
.lb-nav.next{right:10px}.lb-nav.next span{transform:rotate(45deg);margin-right:4px}
/* Instagram button, stacked above WhatsApp */
.ig{position:fixed;right:22px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:50;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;color:#fff;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);box-shadow:0 12px 30px -10px rgba(42,14,54,.45);transition:transform .25s var(--ease)}
.ig:hover,.wa:hover{transform:translateY(-2px)}
@media (max-width:760px){.ig{right:14px;bottom:calc(70px + env(safe-area-inset-bottom,0px));width:48px;height:48px}}