/* ============================================================
   Smart Living Bangladesh — smartliving.com.bd
   Palette sampled from the SL monogram: deep teal + antique gold.
   The gold circuit field is drawn from the PCB motif in the L.
   ============================================================ */

/* Self-hosted: the site makes no request to Google. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/fraunces-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-latin-ext-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================
   Smart Living Bangladesh — parent company site
   Palette sampled from the SL monogram: deep teal + antique gold.
   The gold circuit-trace field is drawn from the PCB motif in the L.
   ============================================================ */
:root{
  --ink:#041615;        /* deepest teal-black */
  --ink-2:#061C1B;
  --deep:#0A322F;       /* primary dark canvas */
  --teal:#14514F;       /* the logo's teal */
  --teal-2:#1D6B66;
  --teal-line:#245E5A;
  --gold:#C2A768;       /* the logo's antique gold — the one accent */
  --gold-2:#E2CE9E;
  --gold-dim:rgba(194,167,104,.30);
  --paper:#EDF0EE;      /* cool pale stone, green bias */
  --paper-2:#F7F9F7;
  --white:#FFFFFF;
  --body-ink:#0F2B29;
  --muted-ink:#4A6664;
  --muted-dark:#A3C0BC;

  --serif:"Fraunces","Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;

  --wrap:1240px;
  --gutter:clamp(20px,5vw,60px);
  --band:clamp(82px,10vw,150px);
  --hdrh:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--body-ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.018em}
h1{font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:.99}
h2{font-size:clamp(2.1rem,4.5vw,3.5rem);line-height:1.06}
h3{font-size:clamp(1.28rem,2.1vw,1.7rem);line-height:1.18}
h4{font-size:1.06rem;line-height:1.3}
p{margin:0}

.eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted-ink);margin:0;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);flex:0 0 auto}
.on-dark .eyebrow{color:var(--gold)}
.lede{font-size:clamp(1.06rem,1.6vw,1.26rem);line-height:1.62;max-width:60ch;color:var(--muted-ink)}
.on-dark .lede{color:var(--muted-dark)}
.prose{max-width:66ch}

.rule{width:72px;height:1px;background:var(--gold);border:0;margin:0}
.rule--wide{width:100%;background:var(--gold-dim)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
.band--dark{
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(29,107,102,.30), rgba(10,50,47,0) 62%),
    linear-gradient(174deg, #0A322F 0%, #072423 100%);
  color:var(--paper);position:relative;overflow:hidden;
}
.band--ink{
  background:
    radial-gradient(110% 80% at 12% 0%, rgba(20,81,79,.42), rgba(4,22,21,0) 60%),
    var(--ink);
  color:var(--paper);position:relative;overflow:hidden;
}
.band--paper{background:var(--paper)}
.band--white{background:var(--paper-2)}
.stack{display:flex;flex-direction:column}
.stack-6{gap:6px}.stack-10{gap:10px}.stack-14{gap:14px}.stack-16{gap:16px}
.stack-20{gap:20px}.stack-28{gap:28px}.stack-40{gap:40px}.stack-56{gap:56px}.stack-64{gap:64px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  padding:16px 30px;border:1px solid transparent;border-radius:2px;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background .3s,color .3s,border-color .3s,transform .3s,box-shadow .3s;
}
.btn--gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-2);border-color:var(--gold-2);box-shadow:0 12px 30px -14px rgba(194,167,104,.7)}
.btn--ghost{background:rgba(255,255,255,.03);color:var(--paper);border-color:rgba(194,167,104,.45)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(194,167,104,.09)}
.btn--ink{background:transparent;color:var(--body-ink);border-color:rgba(15,43,41,.26)}
.btn--ink:hover{border-color:var(--teal);background:var(--teal);color:var(--paper-2)}
.btn--solid{background:var(--teal);color:var(--paper-2);border-color:var(--teal)}
.btn--solid:hover{background:var(--ink);border-color:var(--ink)}
.btn .arw{transition:transform .3s}
.btn:hover .arw{transform:translateX(5px)}
.btns{display:flex;flex-wrap:wrap;gap:14px}

.tlink{
  display:inline-flex;align-items:center;gap:.55em;text-decoration:none;
  font-weight:600;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);padding-bottom:4px;position:relative;background:none;border:0;cursor:pointer;
  font-family:var(--sans);
}
.on-dark .tlink{color:var(--gold-2)}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(.22);transform-origin:left;transition:transform .35s ease;
}
.tlink:hover::after{transform:scaleX(1)}
.tlink .arw{transition:transform .3s}
.tlink:hover .arw{transform:translateX(5px)}

:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;
}

/* ============================================================
   HEADER — transparent over the hero, condenses on scroll
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:70;
  padding-top:env(safe-area-inset-top,0px);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;
}
.hdr.is-stuck,.hdr.is-open{
  background:rgba(4,22,21,.9);backdrop-filter:blur(16px);
  border-bottom-color:rgba(36,94,90,.55);
}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:var(--hdrh);transition:min-height .4s ease}
.hdr.is-stuck .hdr__in{min-height:66px}
.hdr__logo{display:flex;align-items:center;flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer}
.hdr__logo img{height:40px;width:auto;transition:height .4s ease}
.hdr.is-stuck .hdr__logo img{height:34px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__a{
  background:none;border:0;cursor:pointer;font-family:var(--sans);
  font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:#C3D8D5;padding:10px 14px;border-radius:2px;position:relative;transition:color .25s;
}
.nav__a:hover{color:var(--white)}
.nav__a[aria-current="page"]{color:var(--gold-2)}
.nav__a[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:1px;height:1px;background:var(--gold);
}
.hdr .btn{padding:13px 22px;font-size:.71rem}
.hdr__cta{margin-left:12px}
.burger{
  display:none;margin-left:auto;background:none;border:1px solid rgba(194,167,104,.4);
  border-radius:2px;width:46px;height:42px;cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.burger span{display:block;width:18px;height:1.5px;background:var(--paper);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--paper);transition:transform .28s,top .28s;
}
.burger span::before{top:-6px}.burger span::after{top:6px}
.hdr.is-open .burger span{background:transparent}
.hdr.is-open .burger span::before{top:0;transform:rotate(45deg)}
.hdr.is-open .burger span::after{top:0;transform:rotate(-45deg)}

@media (max-width:980px){
  .burger{display:flex}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid var(--teal-line);padding:8px var(--gutter) 22px;
  }
  .hdr.is-open .nav{display:flex}
  .nav__a{text-align:left;padding:15px 0;border-bottom:1px solid rgba(36,94,90,.35);font-size:.8rem}
  .nav__a[aria-current="page"]::after{left:0;right:auto;width:26px;bottom:9px}
  .hdr__cta{margin:18px 0 0;justify-content:center}
}

/* ============================================================
   HERO — three stacked layers: veiled brand imagery,
   an animated gold circuit-pulse field, and a glow/vignette
   ============================================================ */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:saturate(.55) contrast(1.05);
}
@media (prefers-reduced-motion:no-preference){
  .hero__media img{animation:heroCycle 24s infinite both}
  .hero__media img:nth-child(1){animation-delay:0s}
  .hero__media img:nth-child(2){animation-delay:8s}
  .hero__media img:nth-child(3){animation-delay:16s}
}
@media (prefers-reduced-motion:reduce){ .hero__media img:nth-child(1){opacity:.17} }
@keyframes heroCycle{
  0%{opacity:0;transform:scale(1.10)}
  6%{opacity:.19}
  29%{opacity:.19}
  35%{opacity:0;transform:scale(1.19)}
  100%{opacity:0;transform:scale(1.19)}
}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,22,21,.78) 0%, rgba(4,22,21,.62) 42%, rgba(4,22,21,.95) 100%),
    radial-gradient(90% 70% at 78% 18%, rgba(29,107,102,.40), rgba(4,22,21,0) 65%);
}
.hero__canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.hero__in{
  position:relative;z-index:3;
  padding-block:calc(var(--hdrh) + clamp(76px,12vw,146px)) clamp(54px,7vw,86px);
}
.hero h1{color:var(--white);letter-spacing:-.03em}
.hero h1 .gold{color:var(--gold)}
.hero__lede{max-width:52ch;color:#BDD5D1;font-size:clamp(1.08rem,1.75vw,1.34rem);line-height:1.58}

/* orchestrated entrance — every step lands inside 0.9s, so the page is at rest fast */
.ln{display:block;overflow:hidden}
.ln>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .hero .fx{animation:rise .7s cubic-bezier(.19,.72,.28,1) both}
  .hero .ln>span{animation:lift .82s cubic-bezier(.19,.72,.28,1) both}
  .hero .ln:nth-of-type(1)>span{animation-delay:.06s}
  .hero .ln:nth-of-type(2)>span{animation-delay:.16s}
  .hero .fx--1{animation-delay:.30s}
  .hero .fx--2{animation-delay:.38s}
  .hero .fx--3{animation-delay:.46s}
  .hero .fx--4{animation-delay:.56s}
  .hero .fx--5{animation-delay:.66s}
  .hero__rule{animation:draw .9s cubic-bezier(.19,.72,.28,1) .26s both}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lift{from{transform:translateY(105%)}to{transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__rule{transform-origin:left}

/* scroll cue */
.cue{
  position:relative;z-index:3;display:flex;align-items:center;gap:12px;
  padding-bottom:clamp(26px,4vw,44px);color:#7FA09C;
  font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--gold),rgba(194,167,104,0));flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .cue i{animation:cueGo 2.2s ease-in-out infinite}
}
@keyframes cueGo{0%,100%{transform:scaleY(.45);opacity:.5}50%{transform:scaleY(1);opacity:1}}
.cue i{transform-origin:top}

/* ============================================================
   BRAND PORTFOLIO STRIP
   ============================================================ */
.portfolio{background:var(--ink-2);border-top:1px solid rgba(36,94,90,.4);position:relative;z-index:4}
.portfolio__in{display:flex;align-items:center;gap:clamp(24px,5vw,72px);flex-wrap:wrap;padding-block:30px}
.portfolio__lbl{
  font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#7FA09C;flex:0 0 auto;
}
.portfolio__set{display:flex;align-items:center;gap:clamp(22px,4.5vw,60px);flex-wrap:wrap;margin-left:auto}
.pbrand{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  opacity:.62;filter:grayscale(1);transition:opacity .35s,filter .35s,transform .35s;
}
.pbrand:hover{opacity:1;filter:none;transform:translateY(-2px)}
.pbrand img{width:34px;height:34px;border-radius:3px;flex:0 0 auto}
.pbrand .bmark{width:62px;color:var(--paper);flex:0 0 auto;display:block}
.pbrand__t{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#C3D8D5;white-space:nowrap}
@media (max-width:760px){
  .portfolio__set{margin-left:0;gap:22px}
  .pbrand{opacity:1;filter:none}
}

/* ============================================================
   STATS BAND — count-up figures
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{
  padding:clamp(26px,3vw,40px) 30px clamp(26px,3vw,40px) 0;
  border-right:1px solid rgba(15,43,41,.13);display:flex;flex-direction:column;gap:6px;
}
.stat:last-child{border-right:0;padding-right:0}
.stat__n{
  font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.9rem);line-height:.96;
  color:var(--teal);font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.stat__n sup{font-size:.36em;vertical-align:super;color:var(--gold);margin-left:.06em;letter-spacing:0}
.stat__k{font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--body-ink)}
.stat__s{font-size:.82rem;color:var(--muted-ink);line-height:1.45}
@media (max-width:860px){
  .stats{grid-template-columns:repeat(2,1fr);gap:0 26px}
  .stat:nth-child(2n){border-right:0;padding-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid rgba(15,43,41,.13)}
}
@media (max-width:480px){
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;padding-right:0;border-bottom:1px solid rgba(15,43,41,.13)}
  .stat:last-child{border-bottom:0}
}

/* ============================================================
   PULL QUOTE / GROUP STATEMENT
   ============================================================ */
.quote{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.6vw,48px);align-items:start}
.quote__mark{
  font-family:var(--serif);font-size:clamp(4rem,8vw,7rem);line-height:.72;
  color:var(--gold);opacity:.55;user-select:none;
}
.quote__t{
  font-family:var(--serif);font-size:clamp(1.55rem,3.3vw,2.55rem);line-height:1.24;
  color:var(--white);letter-spacing:-.02em;text-wrap:balance;
}
.quote__t em{font-style:italic;color:var(--gold-2)}
.quote__by{margin-top:22px;font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark)}
@media (max-width:620px){.quote{grid-template-columns:1fr;gap:6px}.quote__mark{font-size:3.4rem}}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.shead{display:flex;flex-direction:column;gap:18px;max-width:64ch}

/* ============================================================
   DIVISION BANDS — the three brands, deliberately unequal
   ============================================================ */
.div{
  display:grid;grid-template-columns:1.06fr 1fr;gap:clamp(30px,5.2vw,80px);align-items:center;
  padding-block:clamp(48px,6.4vw,84px);border-top:1px solid rgba(15,43,41,.13);
}
.div:first-of-type{border-top:0;padding-top:0}
.div--flip .div__media{order:2}
.div__media{position:relative;border-radius:3px;overflow:hidden;background:var(--white);isolation:isolate}
.div__media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border:1px solid rgba(194,167,104,0);transition:border-color .45s;
}
.div:hover .div__media::after{border-color:rgba(194,167,104,.55)}
.div__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .85s cubic-bezier(.2,.7,.3,1)}
.div:hover .div__media img{transform:scale(1.04)}
.div__tag{
  position:absolute;left:0;top:0;z-index:3;background:var(--ink);color:var(--gold-2);
  font-size:.63rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:9px 16px;
}
.div__body{display:flex;flex-direction:column;gap:20px}
.div__brand{display:flex;align-items:center;gap:16px}
.div__brand img{width:50px;height:50px;border-radius:4px;flex:0 0 auto}
.div__brand .bmark{width:86px;color:var(--body-ink);flex:0 0 auto;display:block}
.bmark svg{width:100%;height:auto;display:block}
.div__name{font-family:var(--serif);font-size:1.62rem;line-height:1.12;letter-spacing:-.022em}
.div__what{font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-2);margin-top:3px}
.div__facts{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-size:.75rem;font-weight:500;padding:7px 14px;
  border:1px solid rgba(15,43,41,.16);border-radius:100px;color:var(--muted-ink);background:var(--white);
}
.chip--new{
  background:var(--gold);border-color:var(--gold);color:var(--ink);
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;
}
@media (max-width:880px){
  .div{grid-template-columns:1fr;gap:28px}
  .div--flip .div__media{order:0}
}

/* ============================================================
   THE CHAIN — a real four-step sequence, which is why it is numbered
   ============================================================ */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{
  padding:36px 28px 40px 0;border-top:1px solid var(--teal-line);
  display:flex;flex-direction:column;gap:13px;position:relative;
}
.step::before{
  content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--gold);
  transition:width .6s cubic-bezier(.2,.7,.3,1);
}
.step:hover::before{width:100%}
.step__n{
  font-family:var(--serif);font-size:1rem;color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:.08em;
}
.step h3{color:var(--white);font-size:1.34rem}
.step p{color:var(--muted-dark);font-size:.95rem;line-height:1.62}
@media (max-width:920px){.chain{grid-template-columns:repeat(2,1fr);gap:0 28px}}
@media (max-width:560px){.chain{grid-template-columns:1fr;gap:0}.step{padding-right:0}}

/* ============================================================
   COLUMNS / PROOF
   ============================================================ */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.6vw,48px)}
@media (max-width:880px){.cols3{grid-template-columns:1fr;gap:32px}}
.cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3.6vw,52px)}
@media (max-width:780px){.cols2{grid-template-columns:1fr;gap:30px}}

.proof{display:flex;flex-direction:column;gap:13px;padding-top:28px;border-top:1px solid rgba(15,43,41,.16)}
.proof h3{font-size:1.28rem}
.proof p{color:var(--muted-ink);font-size:.96rem}
.on-dark .proof{border-top-color:var(--teal-line)}
.on-dark .proof h3{color:var(--white)}
.on-dark .proof p{color:var(--muted-dark)}

/* ============================================================
   AFTER-SALES
   ============================================================ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:36px}}
.applist{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.applist li{display:flex;gap:17px;align-items:flex-start;padding:19px 0;border-top:1px solid var(--teal-line)}
.applist li:last-child{border-bottom:1px solid var(--teal-line)}
.applist .tick{flex:0 0 auto;width:20px;height:20px;margin-top:3px;color:var(--gold)}
.applist span{color:#C6DBD8;font-size:.98rem;line-height:1.56}
.applist b{color:var(--white);font-weight:600}

/* ============================================================
   CREDENTIALS BAND
   ============================================================ */
.creds3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(194,167,104,.22);border:1px solid rgba(194,167,104,.22)}
.credc{
  background:linear-gradient(170deg,rgba(20,81,79,.32),rgba(4,22,21,.4));
  padding:clamp(26px,3.2vw,38px);display:flex;flex-direction:column;gap:11px;
}
.credc__ico{width:30px;height:30px;color:var(--gold)}
.credc h4{font-family:var(--serif);font-size:1.2rem;color:var(--white)}
.credc p{font-size:.92rem;color:var(--muted-dark);line-height:1.56}
@media (max-width:860px){.creds3{grid-template-columns:1fr}}

/* ============================================================
   BUSINESS CARDS
   ============================================================ */
.bizcard{
  display:flex;flex-direction:column;gap:17px;background:var(--white);
  padding:clamp(30px,3.8vw,48px);border:1px solid rgba(15,43,41,.12);border-radius:3px;
  transition:border-color .35s,transform .35s,box-shadow .35s;
}
.bizcard:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 26px 52px -30px rgba(4,22,21,.55)}
.bizcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.bizcard li{display:flex;gap:12px;font-size:.95rem;color:var(--muted-ink);line-height:1.5}
.bizcard li::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:9px;background:var(--gold);border-radius:50%}
.bizcard .tlink{margin-top:auto;align-self:flex-start;padding-top:10px}

/* ============================================================
   CONTACT
   ============================================================ */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.cbox{padding:0 28px 0 0;border-right:1px solid var(--teal-line);display:flex;flex-direction:column;gap:8px}
.cbox:last-child{border-right:0;padding-right:0}
.cbox__k{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.cbox__v{color:var(--white);font-size:1rem;line-height:1.5;text-decoration:none}
a.cbox__v:hover{color:var(--gold-2)}
.cbox__s{color:var(--muted-dark);font-size:.87rem}
@media (max-width:880px){
  .cgrid{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .cbox:nth-child(2n){border-right:0;padding-right:0}
}
@media (max-width:540px){.cgrid{grid-template-columns:1fr;gap:28px}.cbox{border-right:0;padding-right:0}}

/* ---------- form ---------- */
.form{display:flex;flex-direction:column;gap:19px;max-width:560px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-ink)}
.field input,.field textarea,.field select{
  font-family:var(--sans);font-size:1rem;color:var(--body-ink);background:var(--white);
  border:1px solid rgba(15,43,41,.2);border-radius:2px;padding:14px 16px;width:100%;transition:border-color .22s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--teal);outline-offset:1px}
.field textarea{min-height:132px;resize:vertical}
.formnote{font-size:.85rem;color:var(--muted-ink)}

/* ============================================================
   INNER PAGE HEADS
   ============================================================ */
.phead{
  background:
    radial-gradient(100% 80% at 80% 0%, rgba(29,107,102,.34), rgba(4,22,21,0) 62%),
    linear-gradient(170deg,#0A322F,#051D1C);
  color:var(--paper);position:relative;overflow:hidden;
}
.phead__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.phead__in{
  position:relative;z-index:2;
  padding-block:calc(var(--hdrh) + clamp(48px,6.5vw,88px)) clamp(46px,6vw,78px);
  display:flex;flex-direction:column;gap:20px;
}
.phead h1{color:var(--white);font-size:clamp(2.3rem,5.2vw,4rem)}
.phead .lede{color:#BDD5D1}
.crumb{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

/* ---------- timeline ---------- */
.tl{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.tl li{display:grid;grid-template-columns:130px 1fr;gap:clamp(16px,3vw,44px);padding:28px 0;border-top:1px solid rgba(15,43,41,.13)}
.tl li:last-child{border-bottom:1px solid rgba(15,43,41,.13)}
.tl__y{font-family:var(--serif);font-size:1.65rem;color:var(--teal);font-variant-numeric:tabular-nums;line-height:1.1}
.tl__b h3{font-size:1.24rem;margin-bottom:7px}
.tl__b p{color:var(--muted-ink);font-size:.96rem}
@media (max-width:620px){.tl li{grid-template-columns:1fr;gap:6px}}

/* ---------- values ---------- */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(15,43,41,.13);border:1px solid rgba(15,43,41,.13)}
.val{background:var(--paper-2);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:10px}
.val h4{font-family:var(--serif);font-size:1.2rem}
.val p{font-size:.93rem;color:var(--muted-ink);line-height:1.56}
@media (max-width:840px){.vals{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.vals{grid-template-columns:1fr}}

/* ---------- facts ---------- */
.facts{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.facts li{display:grid;grid-template-columns:210px 1fr;gap:22px;padding:15px 0;border-top:1px solid rgba(15,43,41,.13);font-size:.96rem}
.facts li:last-child{border-bottom:1px solid rgba(15,43,41,.13)}
.facts .k{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-ink);padding-top:3px}
.facts .v{color:var(--body-ink)}
.facts .v a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--gold-dim)}
.facts .v a:hover{color:var(--ink)}
@media (max-width:620px){.facts li{grid-template-columns:1fr;gap:3px}}

/* ---------- offerings ---------- */
.offer{display:grid;grid-template-columns:46px 1fr;gap:22px;padding:30px 0;border-top:1px solid rgba(15,43,41,.13)}
.offer:last-of-type{border-bottom:1px solid rgba(15,43,41,.13)}
.offer__ico{color:var(--teal);width:38px;height:38px}
.offer h3{font-size:1.3rem;margin-bottom:9px}
.offer p{color:var(--muted-ink);font-size:.97rem}
.offer__meta{margin-top:11px;font-size:.79rem;color:var(--teal-2);font-weight:600;letter-spacing:.08em}
@media (max-width:580px){.offer{grid-template-columns:1fr;gap:12px}}

/* ---------- brand deep sections ---------- */
.bsec{padding-block:clamp(52px,6.4vw,92px);border-top:1px solid rgba(15,43,41,.13)}
.bsec:first-of-type{border-top:0;padding-top:0}
.rangelist{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.rangelist li{font-size:.82rem;padding:8px 15px;background:var(--white);border:1px solid rgba(15,43,41,.15);border-radius:100px;color:var(--muted-ink)}

.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prod{
  background:var(--white);border:1px solid rgba(15,43,41,.12);border-radius:3px;padding:17px;
  display:flex;flex-direction:column;gap:9px;text-decoration:none;transition:border-color .3s,transform .3s;
}
.prod:hover{border-color:var(--gold);transform:translateY(-3px)}
.prod__n{font-family:var(--serif);font-size:1.05rem;color:var(--body-ink);line-height:1.2}
.prod__d{font-size:.83rem;color:var(--muted-ink);line-height:1.45}
@media (max-width:840px){.prods{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.prods{grid-template-columns:1fr}}

/* ---------- callout ---------- */
.callout{
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(29,107,102,.5), rgba(20,81,79,0) 60%),
    linear-gradient(160deg,#14514F,#0A322F);
  color:var(--paper);padding:clamp(32px,4.4vw,60px);border-radius:3px;
  display:flex;flex-direction:column;gap:19px;position:relative;overflow:hidden;
  border:1px solid rgba(194,167,104,.26);
}
.callout h3{color:var(--white);font-size:clamp(1.6rem,2.9vw,2.25rem)}
.callout p{color:#C6DBD8;max-width:58ch}

.mapcard{background:var(--white);border:1px solid rgba(15,43,41,.12);border-radius:3px;padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:15px}

/* ---------- FAQ (hand-rolled <details>, the house pattern) ---------- */
.faq{display:flex;flex-direction:column;margin:0}
.faq details{border-top:1px solid rgba(15,43,41,.14)}
.faq details:last-of-type{border-bottom:1px solid rgba(15,43,41,.14)}
.faq summary{
  list-style:none;cursor:pointer;padding:21px 46px 21px 0;position:relative;
  font-family:var(--serif);font-size:1.14rem;line-height:1.34;color:var(--body-ink);
  transition:color .22s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .32s ease;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{color:var(--teal)}
.faq__a{padding:0 46px 24px 0;color:var(--muted-ink);font-size:.97rem;line-height:1.64;max-width:74ch}
.faq__a a{color:var(--teal)}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--ink);color:var(--paper);padding-block:clamp(56px,6.4vw,86px) 32px;position:relative;overflow:hidden}
.ftr__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.6}
.ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.25fr;gap:clamp(26px,3.6vw,52px);position:relative;z-index:2}
@media (max-width:940px){.ftr__top{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:560px){.ftr__top{grid-template-columns:1fr;gap:32px}}
.ftr img.mark{height:42px;width:auto;margin-bottom:18px}
.ftr__h{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.ftr__l{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.ftr__l a,.ftr__l button{
  background:none;border:0;padding:0;text-align:left;cursor:pointer;color:#A9C3C0;
  font-family:var(--sans);font-size:.93rem;text-decoration:none;transition:color .22s;
}
.ftr__l a:hover,.ftr__l button:hover{color:var(--gold-2)}
.ftr__p{color:#A9C3C0;font-size:.93rem;line-height:1.62}
.ftr__bot{
  margin-top:clamp(40px,5vw,62px);padding-top:26px;border-top:1px solid rgba(36,94,90,.5);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;
  color:#7E9B98;font-size:.83rem;position:relative;z-index:2;
}
.social{display:flex;gap:10px;margin-top:20px}
.social a{
  width:40px;height:40px;border:1px solid var(--teal-line);border-radius:2px;
  display:flex;align-items:center;justify-content:center;color:#A9C3C0;transition:border-color .25s,color .25s;
}
.social a:hover{border-color:var(--gold);color:var(--gold)}

/* Scroll reveal. Default is visible; JS opts in only when
   IntersectionObserver exists and motion is welcome. */
html.reveal-on .rv{opacity:0;transform:translateY(22px)}
html.reveal-on .rv.in{opacity:1;transform:none;transition:opacity .75s cubic-bezier(.19,.72,.28,1),transform .75s cubic-bezier(.19,.72,.28,1)}

/* ============================================================
   Additions for the WordPress build
   ============================================================ */

.sl-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--ink);padding:12px 20px;
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.sl-skip:focus{left:0}

/* headings that sit on a dark band */
h2.on-white,h3.on-white{color:var(--white)}
.sl-rel{position:relative;z-index:2}
.sl-mt{margin-top:6px}

.band--tight{padding-block:clamp(48px,6vw,78px)}
.band--quote{padding-block:clamp(64px,7.5vw,110px)}

.cols2--top{align-items:start}
.bizcard__p,.mapcard__p{color:var(--muted-ink);font-size:.97rem}
.ftr__q{color:#7E9B98;font-size:.9rem}

.div__name--lg{font-size:clamp(1.5rem,3vw,1.9rem);font-weight:400;letter-spacing:-.022em}
.bigmark{width:64px;height:64px;border-radius:4px;flex:0 0 auto}
.bmark--lg{width:128px}
.bigstate{color:var(--white);font-size:clamp(1.45rem,2.5vw,2rem)}

/* ---------- Contact Form 7, styled to match the page ---------- */
.sl-form .wpcf7 form{display:flex;flex-direction:column;gap:19px;max-width:560px}
.sl-form .wpcf7 p{display:flex;flex-direction:column;gap:8px;margin:0}
.sl-form .wpcf7 label{
  font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-ink);display:flex;flex-direction:column;gap:8px;
}
.sl-form .wpcf7 input[type=text],
.sl-form .wpcf7 input[type=email],
.sl-form .wpcf7 input[type=tel],
.sl-form .wpcf7 select,
.sl-form .wpcf7 textarea{
  font-family:var(--sans);font-size:1rem;color:var(--body-ink);background:var(--white);
  border:1px solid rgba(15,43,41,.2);border-radius:2px;padding:14px 16px;width:100%;
  transition:border-color .22s;
}
.sl-form .wpcf7 input:focus,
.sl-form .wpcf7 select:focus,
.sl-form .wpcf7 textarea:focus{border-color:var(--teal);outline:2px solid var(--gold);outline-offset:1px}
.sl-form .wpcf7 textarea{min-height:132px;resize:vertical}
.sl-form .wpcf7 input[type=submit]{
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  padding:16px 30px;border:1px solid var(--teal);border-radius:2px;cursor:pointer;
  background:var(--teal);color:var(--paper-2);
  transition:background .3s,border-color .3s;width:auto;align-self:flex-start;
}
.sl-form .wpcf7 input[type=submit]:hover{background:var(--ink);border-color:var(--ink)}
.sl-form .wpcf7-spinner{margin:0 0 0 10px}
.sl-form .wpcf7-not-valid-tip{
  color:#8A3A2E;font-size:.82rem;font-weight:500;letter-spacing:0;text-transform:none;
}
.sl-form .wpcf7-response-output{
  margin:4px 0 0!important;padding:14px 16px!important;border-radius:2px;
  border:1px solid rgba(15,43,41,.2)!important;font-size:.92rem;background:var(--white);
}
.sl-form .wpcf7 form.invalid .wpcf7-response-output,
.sl-form .wpcf7 form.unaccepted .wpcf7-response-output{border-color:#B4705F!important}
.sl-form .wpcf7 form.sent .wpcf7-response-output{border-color:var(--teal-2)!important}
.formnote--warn{
  padding:16px 18px;border:1px solid rgba(194,167,104,.6);border-radius:2px;
  background:rgba(194,167,104,.10);color:var(--body-ink);
}

/* ---------- WordPress admin bar ---------- */
body.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){body.admin-bar .hdr{top:46px}}