/* =========================================================================
   demo2.css - "bold contractor" demo template.
   Standalone: this file does not load styles.css, so the demo reads as a
   genuinely different website rather than a recolour of the main design
   system. Per-demo accent colour is injected as --acc on :root.
   Note on clamp(): always keep spaces around + and - inside clamp() or the
   whole declaration is invalid. This has bitten this project before.
   ========================================================================= */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;
  font-display:swap;src:url('../fonts/space-grotesk.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;
  font-display:swap;src:url('../fonts/inter.woff2') format('woff2');}

:root{
  --acc:#f2c230; --acc-600:#dcac1c; --acc-ink:#17191c;
  --d-900:#141618; --d-800:#1b1e21; --d-700:#25292d; --d-600:#343a40;
  --ink:#1b1e21; --body:#5a6166; --mute:#868e96;
  --line:#e4e6e8; --paper:#fff; --grey:#f4f5f6;
  --maxw:1200px; --gut:clamp(1.1rem, 4vw, 2.5rem);
  --ff-head:'Space Grotesk',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;
  --ff-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --t:.3s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:var(--ff-body);font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--ff-head);color:var(--ink);line-height:1.12;margin:0 0 .6rem;font-weight:700}
h1{font-size:clamp(2.1rem, 1.4rem + 3.4vw, 4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem, 1.2rem + 2.1vw, 2.9rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
a{color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:#fff;color:var(--ink);padding:.7rem 1rem;border-radius:4px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:820px;margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(3.5rem, 2.5rem + 4vw, 6.5rem)}
.sec-sm{padding-block:clamp(2.5rem, 2rem + 2.5vw, 4rem)}
.center{text-align:center}
.lead{font-size:clamp(1.02rem, .98rem + .3vw, 1.15rem);color:var(--body)}
.mb0{margin-bottom:0}

/* ---- eyebrow / section intro ------------------------------------------- */
.eyebrow{font-family:var(--ff-head);font-size:.78rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc-600);margin:0 0 .7rem}
.sec-intro{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:clamp(2rem, 1.5rem + 2vw, 3.4rem)}
.sec-intro p:last-child{margin-bottom:0}
.rule{width:56px;height:4px;background:var(--acc);border:0;margin:1.1rem auto 1.3rem}
.rule-l{margin-inline:0}

/* ---- buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ff-head);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1rem 1.9rem;border:2px solid transparent;border-radius:2px;text-decoration:none;
  cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t)}
.btn-acc{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.btn-acc:hover{background:var(--acc-600);border-color:var(--acc-600)}
.btn-dark{background:var(--d-900);color:#fff;border-color:var(--d-900)}
.btn-dark:hover{background:#000;border-color:#000}
.btn-out{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-out:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{padding:.7rem 1.2rem;font-size:.74rem}
.btn-link{font-family:var(--ff-head);font-weight:700;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc-600);text-decoration:none;display:inline-flex;gap:.45rem;align-items:center}
.btn-link:hover{color:var(--ink)}
.btn-link svg{width:14px;height:14px}

/* ---- demo ribbon -------------------------------------------------------- */
.ribbon{position:relative;background:var(--d-900);color:#dfe3e6;font-size:.84rem;text-align:center;
  padding:.6rem calc(var(--gut) + 1.8rem);line-height:1.45;font-family:var(--ff-body)}
.ribbon a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ribbon[hidden]{display:none}
.ribbon-x{position:absolute;top:50%;right:calc(var(--gut) / 2);transform:translateY(-50%);
  background:none;border:0;color:#dfe3e6;cursor:pointer;line-height:1;padding:.35rem;border-radius:3px;opacity:.75}
.ribbon-x:hover,.ribbon-x:focus-visible{opacity:1;background:rgba(255,255,255,.14)}
.ribbon-x svg{width:15px;height:15px;display:block}

/* ---- header -------------------------------------------------------------
   Deliberately NOT sticky. The reference design pins the bar to the top on
   every scroll, which eats vertical space on laptops and phones and covers
   anchor targets. Here it scrolls away like any other element. ------------ */
.hdr{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20}
.hdr-in{display:flex;align-items:center;gap:1.5rem;min-height:84px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);
  font-family:var(--ff-head);font-weight:700;font-size:1.12rem;line-height:1.15;margin-right:auto}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--acc);
  color:var(--acc-ink);font-family:var(--ff-head);font-weight:700;font-size:1.25rem;flex:none;border-radius:2px}
.brand-short{display:none}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{font-family:var(--ff-head);font-weight:700;font-size:.8rem;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:.4rem 0;
  border-bottom:2px solid transparent;transition:color var(--t),border-color var(--t)}
.nav a:hover{color:var(--acc-600)}
.nav a[aria-current="page"]{color:var(--acc-600);border-bottom-color:var(--acc)}
.hdr-cta{display:flex;align-items:center;gap:1rem}
.hdr-phone{font-family:var(--ff-head);font-weight:700;font-size:.92rem;text-decoration:none;color:var(--ink);white-space:nowrap}
.hdr-phone:hover{color:var(--acc-600)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:3px;
  padding:.55rem;cursor:pointer;color:var(--ink)}
.burger svg{width:22px;height:22px;display:block}

@media (max-width:1040px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gut) 1.2rem;display:none;
    box-shadow:0 18px 30px rgba(20,22,24,.10)}
  .hdr[data-open="true"] .nav{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{border-bottom-color:var(--line)}
  .hdr-phone{display:none}
}
@media (max-width:560px){
  .brand-full{display:none}.brand-short{display:inline}
  .hdr-in{min-height:70px;gap:.8rem}
  .hdr-cta .btn{padding:.8rem 1rem;font-size:.72rem}
}

/* ---- hero --------------------------------------------------------------- */
.hero{position:relative;display:grid;place-items:center;text-align:center;color:#fff;
  min-height:clamp(430px, 62vh, 660px);padding-block:clamp(3.5rem, 2rem + 8vw, 7rem);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,17,19,.62) 0%,rgba(15,17,19,.72) 55%,rgba(15,17,19,.85) 100%)}
.hero-in{position:relative;z-index:1;max-width:940px;margin-inline:auto;padding-inline:var(--gut)}
.hero .eyebrow{color:var(--acc)}
.hero h1{color:#fff;text-transform:uppercase;margin-bottom:1.1rem}
.hero-sub{font-size:clamp(1.02rem, .95rem + .45vw, 1.22rem);color:#dfe3e6;max-width:680px;margin:0 auto 2rem}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* Two buttons of different widths look ragged when they stack, so match them. */
@media (max-width:520px){.hero-cta{flex-direction:column;align-items:stretch}.hero-cta .btn{width:100%}}

/* ---- inquiry band ------------------------------------------------------- */
.band-acc{background:var(--acc);color:var(--acc-ink)}
.band-acc .band-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-block:clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem)}
.band-acc h2{color:var(--acc-ink);font-size:clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);margin:0;max-width:44ch}

/* ---- service cards ------------------------------------------------------ */
.grid{display:grid;gap:1.6rem}
.g4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}

.svc{background:#fff;border:1px solid var(--line);padding:2.2rem 1.7rem;text-align:center;
  display:flex;flex-direction:column;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.svc:hover{border-color:var(--acc);transform:translateY(-4px);box-shadow:0 18px 36px rgba(20,22,24,.09)}
.svc-ico{width:66px;height:66px;margin:0 auto 1.2rem;display:grid;place-items:center;
  background:var(--acc);color:var(--acc-ink);border-radius:50%}
.svc-ico svg{width:28px;height:28px}
.svc h3{text-transform:uppercase;letter-spacing:.04em;font-size:1.18rem;margin-bottom:.25rem}
/* min-height keeps the four bodies on one baseline when a label wraps. */
.svc-sub{font-family:var(--ff-head);font-size:.76rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--acc-600);margin-bottom:.9rem;min-height:2.1em}
.svc p{font-size:.95rem;flex:1}
.svc .btn-link{margin-top:.6rem;justify-content:center}

/* ---- counters ----------------------------------------------------------- */
.counters{background:var(--d-900);color:#fff;position:relative}
.counters .grid{gap:2rem}
.ctr{text-align:center}
.ctr-ico{width:58px;height:58px;margin:0 auto 1rem;display:grid;place-items:center;
  border:2px solid var(--acc);color:var(--acc);border-radius:50%}
.ctr-ico svg{width:24px;height:24px}
.ctr b{display:block;font-family:var(--ff-head);font-weight:700;color:var(--acc);
  font-size:clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);line-height:1;margin-bottom:.45rem}
.ctr span{color:#c6cbcf;font-size:.9rem;letter-spacing:.03em}

/* ---- work tiles --------------------------------------------------------- */
.tile{position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;background:var(--d-800)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.tile:hover img{transform:scale(1.06)}
.tile-cap{position:absolute;inset:auto 0 0 0;padding:1.6rem 1.4rem 1.3rem;
  background:linear-gradient(180deg,rgba(15,17,19,0) 0%,rgba(15,17,19,.88) 62%)}
.tile-cat{font-family:var(--ff-head);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);display:block;margin-bottom:.35rem}
.tile h3{color:#fff;font-size:1.15rem;margin:0}
.tile-body{padding:1.2rem 0 0;color:var(--body);font-size:.95rem}

/* ---- values ------------------------------------------------------------- */
.val{border-top:3px solid var(--acc);padding-top:1.4rem}
.val h3{text-transform:uppercase;letter-spacing:.03em;font-size:1.08rem}
.val p{font-size:.95rem;margin-bottom:0}

/* ---- testimonials -------------------------------------------------------
   Dark on purpose: the values block above it is grey and the articles block
   below it is white, so a third light band here would read as one long gap. */
.quotes{background:var(--d-800)}
.quotes h2{color:#fff}
.quotes .eyebrow{color:var(--acc)}
.qt{background:#fff;border-left:4px solid var(--acc);padding:2rem 1.9rem}
.qt-mark{color:var(--acc);display:block;margin-bottom:.6rem}
.qt-mark svg{width:30px;height:30px}
.qt p{font-size:1.03rem;color:var(--ink);font-style:italic;margin-bottom:1.1rem}
.qt cite{font-style:normal;font-family:var(--ff-head);font-weight:700;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:block}
.qt cite span{display:block;color:var(--mute);font-weight:500;letter-spacing:.04em;
  text-transform:none;font-family:var(--ff-body);font-size:.88rem;margin-top:.25rem}

/* ---- article cards ------------------------------------------------------ */
.post{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
  transition:border-color var(--t),box-shadow var(--t)}
.post:hover{border-color:var(--acc);box-shadow:0 18px 36px rgba(20,22,24,.09)}
.post img{aspect-ratio:16/10;object-fit:cover;width:100%}
.post-in{padding:1.5rem 1.4rem;display:flex;flex-direction:column;flex:1}
.post-cats{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.post-cats span{font-family:var(--ff-head);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc-ink);background:var(--acc);padding:.25rem .55rem;border-radius:2px}
.post h3{font-size:1.12rem;margin-bottom:.5rem}
.post p{font-size:.93rem;flex:1}
.post-meta{font-size:.82rem;color:var(--mute);border-top:1px solid var(--line);padding-top:.8rem;margin-top:.4rem}

/* ---- partners ----------------------------------------------------------- */
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem;align-items:center}
.partner{border:1px solid var(--line);padding:1.5rem .8rem;text-align:center;
  display:grid;place-items:center;min-height:86px;line-height:1.3;
  font-family:var(--ff-head);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:.86rem;color:var(--mute);transition:color var(--t),border-color var(--t)}
.partner:hover{color:var(--ink);border-color:var(--acc)}

/* ---- closing CTA -------------------------------------------------------- */
.cta{position:relative;background:var(--d-900);color:#fff;text-align:center;overflow:hidden}
.cta h2{color:#fff;text-transform:uppercase}
.cta p{color:#c6cbcf;max-width:56ch;margin-inline:auto;margin-bottom:1.8rem}

/* ---- detail lists (services page) --------------------------------------- */
.dtl{border:1px solid var(--line);padding:clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)}
.dtl h2{font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em}
.specs{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.45rem}
.specs li{position:relative;padding-left:1.5rem;font-size:.94rem}
.specs li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;background:var(--acc)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem, 1.5rem + 3vw, 4rem);align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.split>*{min-width:0}

/* ---- timeline ----------------------------------------------------------- */
.tl{list-style:none;padding:0;margin:0;display:grid;gap:0}
.tl li{display:grid;grid-template-columns:100px 1fr;gap:1.4rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.tl li:last-child{border-bottom:0}
.tl b{font-family:var(--ff-head);font-size:1.3rem;color:var(--acc-600)}
@media (max-width:560px){.tl li{grid-template-columns:1fr;gap:.2rem}}

/* ---- crumb -------------------------------------------------------------- */
.crumb{font-size:.85rem;color:var(--mute);padding-block:1.1rem;border-bottom:1px solid var(--line)}
.crumb a{color:var(--acc-600);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---- page head ---------------------------------------------------------- */
.phead{background:var(--grey);border-bottom:1px solid var(--line);
  padding-block:clamp(2.6rem, 2rem + 2.6vw, 4.4rem)}
.phead h1{text-transform:uppercase}
.phead p{margin-bottom:0}

/* ---- form (display only) ------------------------------------------------ */
.form label{display:block;font-family:var(--ff-head);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 .4rem}
.form .row{margin-bottom:1.1rem}
.form input,.form select,.form textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:2px;font:inherit;font-size:.98rem;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.form textarea{min-height:130px;resize:vertical}
.note{margin-top:1.1rem;padding:.95rem 1.1rem;background:var(--grey);border-left:4px solid var(--acc);font-size:.93rem}
.note[hidden]{display:none}

/* ---- footer ------------------------------------------------------------- */
.ftr{background:var(--d-900);color:#b9bfc4;font-size:.94rem}
.ftr h3{color:#fff;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem}
.ftr a{color:#b9bfc4;text-decoration:none}
.ftr a:hover{color:var(--acc)}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1.3fr;gap:2.6rem;
  padding-block:clamp(2.8rem, 2.2rem + 2.4vw, 4.4rem)}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ftr-grid{grid-template-columns:1fr;gap:2rem}}
.ftr-brand{display:flex;align-items:center;gap:.7rem;color:#fff;font-family:var(--ff-head);
  font-weight:700;font-size:1.18rem;line-height:1.2;margin-bottom:1rem}
.ftr-links{display:grid;gap:.6rem}
.ftr-loc{margin-bottom:1.1rem}
.ftr-loc b{display:block;color:#fff;font-family:var(--ff-head);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem}
.ftr-bot{border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding-block:1.4rem;font-size:.86rem;color:#8d9499}
.ftr-bot .by{white-space:nowrap}
.ftr-bot a{color:#b9bfc4}

/* ---- reveal ------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .tile img,.svc{transition:none}
  *{scroll-behavior:auto !important}
}