/* ---------- self-hosted fonts (latin subset) ---------- */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/big-shoulders-display-latin-700-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:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/big-shoulders-display-latin-800-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:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/big-shoulders-display-latin-900-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-400-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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-500-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-600-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:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-700-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-500-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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-600-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}

/* =========================================================
   D&Son's Building Construction — Brand Design System
   Built on Bootstrap 5.3 (see individual pages for CDN links)
   ========================================================= */

:root{
  --navy-900:#0B1F3A;
  --navy-800:#10294F;
  --navy-700:#16336B;
  --navy-600:#1E4587;
  --blue-500:#2B63C4;
  --charcoal-800:#262B33;
  --gold-500:#D9A441;
  --gold-600:#C08B2B;
  --surface-0:#FFFFFF;
  --surface-50:#F5F7FA;
  --surface-100:#EDF1F7;
  --line:#DDE3EC;
  --ink-900:#16233D;
  --ink-600:#4B5A73;
  --ink-400:#8492A6;
  --whatsapp:#25D366;

  --font-display:'Big Shoulders Display','Archivo Narrow',sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;

  --container-pad: clamp(20px, 5vw, 56px);
  --section-pad: clamp(48px, 8vw, 96px);
  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-color: var(--line) transparent; }
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--surface-0);
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.05;
  color:var(--navy-900);
}
a{ text-decoration:none; }
img{ max-width:100%; display:block; }
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-600);
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:.6em;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--gold-500); display:inline-block; }
.section{ padding-block:var(--section-pad); }
.section-tight{ padding-block: calc(var(--section-pad) * .6); }
.lede{ color:var(--ink-600); font-size:clamp(1rem,.4vw + .95rem,1.15rem); max-width:62ch; }
.sr-only-focusable:not(:focus){ position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px; border-radius:3px; }

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; top:-48px; left:12px; z-index:2000; background:var(--navy-900); color:#fff;
  padding:10px 18px; border-radius:0 0 8px 8px; transition:top .2s ease;
}
.skip-link:focus{ top:0; }

/* ---------- buttons ---------- */
.btn-gold{
  --bs-btn-color:#1c1204; --bs-btn-bg:var(--gold-500); --bs-btn-border-color:var(--gold-500);
  --bs-btn-hover-bg:var(--gold-600); --bs-btn-hover-border-color:var(--gold-600); --bs-btn-hover-color:#1c1204;
  --bs-btn-active-bg:var(--gold-600); --bs-btn-active-border-color:var(--gold-600);
  font-weight:700; letter-spacing:.02em;
}
.btn-navy{
  --bs-btn-color:#fff; --bs-btn-bg:var(--navy-700); --bs-btn-border-color:var(--navy-700);
  --bs-btn-hover-bg:var(--navy-600); --bs-btn-hover-border-color:var(--navy-600); --bs-btn-hover-color:#fff;
  font-weight:700; letter-spacing:.02em;
}
.btn-outline-navy{
  --bs-btn-color:var(--navy-700); --bs-btn-border-color:var(--navy-700);
  --bs-btn-hover-bg:var(--navy-700); --bs-btn-hover-color:#fff;
  font-weight:700; letter-spacing:.02em;
}
.btn-whatsapp{
  --bs-btn-color:#fff; --bs-btn-bg:var(--whatsapp); --bs-btn-border-color:var(--whatsapp);
  --bs-btn-hover-bg:#1ea952; --bs-btn-hover-border-color:#1ea952; --bs-btn-hover-color:#fff;
  font-weight:700;
}
.btn{ border-radius:8px; padding-inline:1.3em; }
.btn-lg{ padding-block:.75em; }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 10px 30px -18px rgba(11,31,58,.35); }
.brand-lockup{ display:flex; align-items:center; gap:10px; color:var(--navy-900); }
.brand-lockup img{ width:42px; height:42px; flex:none; object-fit:contain; }
.brand-word{ font-family:var(--font-display); font-weight:900; font-size:1.05rem; line-height:1.05; text-transform:uppercase; }
.brand-word small{ display:block; font-family:var(--font-mono); font-size:.55rem; font-weight:600; letter-spacing:.12em; color:var(--ink-400); text-transform:uppercase; }

.navbar-nav .nav-link{
  font-weight:600; color:var(--ink-600)!important; padding-block:.5rem!important;
  position:relative;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover{ color:var(--navy-900)!important; }
.navbar-nav .nav-link.nav-flagship{ color:var(--gold-600)!important; }
.navbar-nav .nav-link.active::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:-1px; height:2px; background:var(--gold-500);
}

/* ---------- hero ---------- */
.hero{
  position:relative; color:#fff; background-size:cover; background-position:center;
  padding-block:clamp(72px,14vw,140px) clamp(56px,10vw,96px);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,31,58,.35), rgba(11,31,58,.86));
}
.hero{ background-color:var(--navy-900); }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img, .hero-slideshow .slide img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-page{ padding-block:clamp(56px,10vw,88px) clamp(40px,7vw,64px); }
.hero-inner{ position:relative; z-index:2; }
.hero h1{ color:#fff; font-size:clamp(2.2rem, 3vw + 1.4rem, 4.2rem); }
.hero .lede{ color:rgba(255,255,255,.86); }

/* ---------- hero slideshow (home) ---------- */
.hero-slideshow{ position:absolute; inset:0; z-index:0; }
.hero-slideshow .slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08); transition:opacity 1.6s ease;
  animation:heroKenBurns 16s ease-in-out infinite;
}
.hero-slideshow .slide.is-active{ opacity:1; z-index:1; }
@keyframes heroKenBurns{
  0%{ transform:scale(1.08) translate3d(0,0,0); }
  50%{ transform:scale(1.16) translate3d(-1.2%,-1%,0); }
  100%{ transform:scale(1.08) translate3d(0,0,0); }
}
.hero-slide-dots{
  position:absolute; z-index:2; left:0; right:0; bottom:clamp(14px,3vw,26px);
  display:flex; justify-content:center; gap:10px;
}
.hero-slide-dots{ gap:0; }
.hero-slide-dots .dot{
  position:relative; width:40px; height:40px; padding:0; border:0; background:transparent; cursor:pointer;
}
.hero-slide-dots .dot::before{
  content:""; position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7); background:rgba(255,255,255,.25);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.hero-slide-dots .dot.is-active::before{ background:var(--gold-500); border-color:var(--gold-500); transform:scale(1.25); }
@media (prefers-reduced-motion:reduce){
  .hero-slideshow .slide{ animation:none; transition:none; }
}
.status-pill{
  display:inline-flex; align-items:center; gap:.6em; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 16px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; margin-bottom:1em;
}
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold-500); }

/* ---------- capability badges ---------- */
.badge-pill{
  display:inline-flex; align-items:center; gap:.55em; background:var(--surface-50);
  border:1px solid var(--line); border-radius:999px; padding:8px 16px;
  font-size:.82rem; font-weight:600; color:var(--navy-900);
}
.badge-pill i{ color:var(--gold-600); font-size:1rem; }
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- cards ---------- */
.service-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px 24px;
  height:100%; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card.has-media{ padding:0; overflow:hidden; }
.service-card.has-media .media{ aspect-ratio:16/9; overflow:hidden; }
.service-card.has-media .media img{ width:100%; height:100%; object-fit:cover; }
.service-card.has-media .card-body-pad{ padding:24px; }
.service-card.has-media .icon-tile{ margin-top:-46px; position:relative; z-index:1; border:3px solid #fff; }
.service-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(11,31,58,.35); border-color:var(--navy-600); }
.service-card .icon-tile{
  width:52px; height:52px; border-radius:12px; background:var(--navy-800); color:var(--gold-500);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1em;
}
.service-card h3{ font-size:1.05rem; margin-bottom:.5em; }
.service-card p{ color:var(--ink-600); font-size:.92rem; margin-bottom:0; }
.service-card ul{ color:var(--ink-600); font-size:.88rem; padding-left:1.1em; margin-bottom:0; }
.service-card ul li{ margin-bottom:.35em; }

.featured-card{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
  border-radius:20px; color:#fff; overflow:hidden; position:relative;
  border:1px solid var(--gold-500);
}
.featured-card::before{
  content:"Our Flagship Service"; position:absolute; top:18px; inset-inline-end:-42px;
  background:var(--gold-500); color:#1c1204; font-family:var(--font-mono); font-weight:700;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 48px;
  transform:rotate(35deg); box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.featured-card img{ height:100%; object-fit:cover; min-height:260px; }
.featured-card .featured-body{ padding:clamp(24px,4vw,48px); }
.featured-card h2,.featured-card h3{ color:#fff; }
.featured-card p{ color:rgba(255,255,255,.82); }
.featured-card ul{ color:rgba(255,255,255,.86); }

.tag-chip{
  display:inline-block; font-family:var(--font-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
  background:var(--surface-100); color:var(--navy-700);
}

/* ---------- project cards ---------- */
.project-card{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.project-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(11,31,58,.35); }
.project-card .thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.project-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.template-ribbon{
  position:absolute; top:10px; inset-inline-start:10px; background:var(--charcoal-800); color:#fff;
  font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; opacity:.92;
}
.project-card .body{ padding:18px 20px; }
.project-card h3{ font-size:.98rem; text-transform:none; letter-spacing:0; margin-bottom:.35em; }
.project-card p{ color:var(--ink-600); font-size:.86rem; margin-bottom:0; }

/* ---------- filter bar ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-btn{
  border:1px solid var(--line); background:#fff; color:var(--ink-600); border-radius:999px;
  padding:8px 18px; font-weight:600; font-size:.85rem; transition:all .18s ease;
}
.filter-btn:hover{ border-color:var(--navy-600); color:var(--navy-900); }
.filter-btn.active{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; }

/* ---------- process stepper ---------- */
.process-track{ position:relative; }
.process-track::before{
  content:""; position:absolute; top:26px; left:0; right:0; height:2px; background:var(--line);
}
@media (max-width:767px){ .process-track::before{ display:none; } }
.process-step{ position:relative; text-align:center; padding-inline:8px; }
.process-index{
  width:52px; height:52px; border-radius:50%; background:#fff; border:2px solid var(--navy-700);
  color:var(--navy-700); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  font-family:var(--font-mono); font-weight:700; position:relative; z-index:1;
}
.process-step h3{ font-size:.92rem; margin-bottom:.4em; }
.process-step p{ color:var(--ink-600); font-size:.84rem; }

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color:#fff; border-radius:20px; padding:clamp(32px,5vw,56px);
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.82); }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-900); color:rgba(255,255,255,.78); }
.site-footer a{ color:rgba(255,255,255,.78); }
.site-footer a:hover{ color:var(--gold-500); }
.site-footer a.btn-gold,
.site-footer a.btn-gold:hover,
.site-footer a.btn-gold:focus-visible{ color:#1c1204; }
.site-footer .footer-heading{
  color:#fff; font-size:.78rem; font-family:var(--font-mono); letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:1.1em;
}
.site-footer .brand-word{ color:#fff; }
.site-footer .brand-word small{ color:rgba(255,255,255,.55); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.14); font-size:.82rem; color:rgba(255,255,255,.55); }

/* ---------- FAB stack ---------- */
.fab-stack{
  position:fixed; top:50%; inset-inline-end:clamp(18px,4vw,30px); transform:translateY(-50%);
  display:flex; flex-direction:column; gap:12px; z-index:900;
}
.fab-btn{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.4); color:#fff; font-size:1.4rem; position:relative;
}
button.fab-btn{ border:none; cursor:pointer; font-family:inherit; }
.fab-btn.whatsapp{ background:var(--whatsapp); }
.fab-btn.instagram{
  background:linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border:none;
}
.fab-btn.tiktok{ background:#000000; }
.fab-btn.share{ background:var(--navy-700); }
.fab-btn.go-to-top{
  width:auto; height:auto; background:none; box-shadow:none; border-radius:0; border:none;
  font-size:2.5rem; color:var(--navy-700); transition:color 0.3s ease; cursor:pointer;
  padding:5px 10px; line-height:1;
}
.fab-btn.go-to-top:hover:not(:disabled){ color:var(--navy-900); transform:scale(1.1); }
.fab-btn.go-to-top:disabled{
  color:var(--ink-400); cursor:not-allowed; opacity:0.5;
}
.fab-tip{
  position:absolute; inset-inline-end:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:var(--navy-900); color:#fff; padding:.4em .8em; border-radius:6px;
  font-size:.72rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.fab-btn.share.is-copied .fab-tip{ opacity:1; }

.fab-ring{
  position:absolute; inset:0; border-radius:50%; border:2px solid currentColor; opacity:.6;
  animation:fabRing 2.4s ease-out infinite;
}
@keyframes fabRing{ from{ transform:scale(1); opacity:.6; } to{ transform:scale(1.7); opacity:0; } }

/* ---------- forms ---------- */
.form-control,.form-select{
  border-color:var(--line); padding:.7rem .9rem; border-radius:8px;
}
.form-control:focus,.form-select:focus{
  border-color:var(--navy-600); box-shadow:0 0 0 .2rem rgba(30,69,135,.15);
}
.form-label{ font-weight:600; font-size:.88rem; color:var(--navy-900); }
.form-note{ font-size:.8rem; color:var(--ink-400); }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- accordion (FAQ) skin ---------- */
.accordion-button{ font-weight:700; color:var(--navy-900); }
.accordion-button:not(.collapsed){ background:var(--surface-50); color:var(--navy-700); box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(30,69,135,.15); }

/* ---------- misc ---------- */
.divider-stripe{
  height:5px;
  background:repeating-linear-gradient(45deg, var(--navy-900) 0 10px, var(--gold-500) 10px 20px, var(--navy-700) 20px 30px);
}
.avatar-initials{
  width:64px; height:64px; border-radius:50%; background:var(--navy-800); color:var(--gold-500);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:800; font-size:1.3rem; flex:none;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .fab-ring{ animation:none; }
}

/* =========================================================
   Mobile Bottom Navigation — mobile app style
   ========================================================= */
@media (max-width:768px){
  .fab-stack{
    position:fixed;
    bottom:0;
    inset-inline-start:0;
    inset-inline-end:0;
    top:auto;
    transform:none;
    flex-direction:row;
    gap:0;
    justify-content:space-around;
    align-items:center;
    padding:8px 0;
    background:rgba(255,255,255,.95);
    backdrop-filter:saturate(180%) blur(10px);
    border-top:1px solid var(--line);
    z-index:1000;
  }

  .fab-btn{
    width:48px;
    height:48px;
    box-shadow:none;
    font-size:1.2rem;
  }

  .fab-btn.go-to-top{
    font-size:1.8rem;
  }

  /* Hide tooltip on mobile */
  .fab-tip{
    display:none!important;
  }

  /* Add bottom padding to body to prevent content overlap with bottom nav */
  body{
    padding-bottom:70px;
  }

  /* Adjust main content to not be hidden by bottom nav */
  main{
    margin-bottom:0;
  }
}

/* =========================================================
   Print — brochure output
   ========================================================= */
@media print{
  @page{ size:A4; margin:14mm 12mm; }

  *{
    -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; color-adjust:exact!important;
  }

  body{ background:#fff; }

  /* interactive-only chrome has no place on paper */
  .skip-link, .navbar-toggler, .fab-stack, .filter-bar, .hero-slide-dots,
  .form-note, #quoteForm .btn, iframe{ display:none!important; }

  .site-header{
    position:static!important; backdrop-filter:none!important; box-shadow:none!important;
    border-bottom:1px solid var(--line);
  }
  .navbar-collapse{ display:block!important; }
  .navbar-nav{ flex-direction:row!important; flex-wrap:wrap; gap:4px 16px; }
  .nav-item .btn{ display:none!important; }

  /* reveal-on-scroll content must already be visible without scrolling */
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }

  /* un-collapse anything JS normally hides/filters */
  .accordion-collapse{ display:block!important; height:auto!important; visibility:visible!important; }
  .accordion-button::after{ display:none!important; }
  .project-col[hidden]{ display:block!important; }

  /* tighten spacing so the brochure reads as pages, not a printed webpage */
  .section{ padding-block:22px!important; }
  .section-tight{ padding-block:14px!important; }
  .hero{ padding-block:36px 26px!important; }
  .cta-band, .featured-card, .service-card, .project-card, .process-step,
  .accordion-item, .badge-pill{ break-inside:avoid; page-break-inside:avoid; }
  h1, h2, h3{ break-after:avoid; page-break-after:avoid; }

  .btn{ box-shadow:none!important; }
}

/* ---------- lazy loading animation ---------- */
@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Global lazy loading styles */
img[data-src] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img:not([data-src]) {
  opacity: 1;
}

/* Project card specific styles */
.project-card .thumb {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

.project-card img {
  transition: opacity 0.3s ease;
}

/* Image loading state */
img.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  opacity: 1;
}

img.loaded {
  opacity: 1;
  animation: none;
  background: none;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- icon link button ---------- */
.btn-icon-link {
  background: none;
  border: none;
  color: var(--ink-900);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
  font-size: inherit;
}

.btn-icon-link:hover {
  color: var(--gold-600);
  transform: scale(1.1);
}

.btn-icon-link:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 3px;
}

.btn-icon-link:active {
  transform: scale(0.95);
}

.share-footer {
  color: inherit;
}

.share-footer:hover {
  color: inherit;
}

/* ---------- navigation prev/next buttons ---------- */
.nav-prev {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 800;
  background: rgba(255,255,255,.95)!important;
  color: var(--ink-400)!important;
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.nav-prev:hover {
  opacity: 1;
  color: var(--ink-900)!important;
}

.nav-next {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 800;
  background: rgba(255,255,255,.95)!important;
  color: var(--ink-400)!important;
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.nav-next:hover {
  opacity: 1;
  color: var(--ink-900)!important;
}


@media (max-width: 768px) {
  .nav-prev,
  .nav-next {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .site-header {
    z-index: 1001 !important;
    display: block !important;
  }

  .navbar-toggler {
    z-index: 1002 !important;
    display: block !important;
  }
}

/* Ensure navbar is interactive and not blocked */
@media (max-width: 768px) {
  .navbar-toggler {
    pointer-events: auto !important;
    z-index: 1002 !important;
  }

  .navbar-collapse {
    pointer-events: auto !important;
  }

  .nav-prev,
  .nav-next {
    pointer-events: auto !important;
  }
}

/* Mobile navbar fixes */
@media (max-width: 768px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
  }

  .navbar {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .navbar-toggler {
    display: block !important;
    z-index: 1002 !important;
    pointer-events: auto !important;
    border: none;
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ink-600);
    background-color: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
  }

  .navbar-toggler:focus {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
  }

  .navbar-collapse {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 1rem 0;
    z-index: 1001;
  }

  .navbar-collapse.show {
    display: block !important;
  }

  .navbar-nav {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .nav-item {
    padding: 0.5rem 0;
  }

  .nav-link {
    padding: 0.5rem 1.5rem !important;
    display: block;
    color: var(--ink-600) !important;
  }

  .nav-link.active {
    background: var(--surface-50);
    color: var(--navy-900) !important;
  }

  .nav-link:hover {
    background: var(--surface-50);
  }
}

/* Auto-hide navigation chevron buttons */
.nav-prev,
.nav-next {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.nav-prev.visible,
.nav-next.visible {
  opacity: 0.6 !important;
  pointer-events: auto !important;
}

.nav-prev.visible:hover,
.nav-next.visible:hover {
  opacity: 1 !important;
}

/* Auto-hide FAB stack social icons */
.fab-stack {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.fab-stack.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Go-to-top button visibility (has its own scroll logic) */
.fab-btn.go-to-top {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.fab-btn.go-to-top:disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* =========================================================
   Blog / article content
   ========================================================= */
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5em 1.2em;
  font-family:var(--font-mono); font-size:.76rem; color:var(--ink-400);
  text-transform:uppercase; letter-spacing:.06em;
}
.post-meta i{ color:var(--gold-600); margin-inline-end:.35em; }
.category-pill{
  display:inline-block; font-family:var(--font-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
  background:var(--gold-500); color:#1c1204;
}

.blog-card{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; height:100%;
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(11,31,58,.35); }
.blog-card .thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.blog-card:hover .thumb img{ transform:scale(1.05); }
.blog-card .thumb .category-pill{ position:absolute; top:12px; inset-inline-start:12px; }
.blog-card .body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.blog-card .body .post-meta{ margin-bottom:.7em; font-size:.7rem; }
.blog-card h3{ font-size:1.05rem; text-transform:none; letter-spacing:0; margin-bottom:.5em; line-height:1.25; }
.blog-card p{ color:var(--ink-600); font-size:.9rem; margin-bottom:1em; }
.blog-card .read-more{ margin-top:auto; font-weight:700; font-size:.86rem; color:var(--navy-700); }
.blog-card .read-more i{ color:var(--gold-600); transition:transform .2s ease; }
.blog-card:hover .read-more i{ transform:translateX(3px); }

.article-shell{ max-width:760px; margin-inline:auto; }
.article-body{ color:var(--ink-900); font-size:1.05rem; }
.article-body > *:first-child{ margin-top:0; }
.article-body h2{
  font-size:clamp(1.35rem, .6vw + 1.2rem, 1.7rem); margin-top:2em; margin-bottom:.6em;
}
.article-body h3{
  font-size:1.15rem; text-transform:none; letter-spacing:0; color:var(--navy-800);
  margin-top:1.6em; margin-bottom:.5em;
}
.article-body p{ color:var(--ink-600); margin-bottom:1.15em; }
.article-body ul, .article-body ol{ color:var(--ink-600); margin-bottom:1.15em; padding-left:1.3em; }
.article-body li{ margin-bottom:.5em; }
.article-body li::marker{ color:var(--gold-600); }
.article-body a{ color:var(--navy-700); font-weight:600; text-decoration:underline; text-underline-offset:.15em; }
.article-body a:hover{ color:var(--gold-600); }
.article-body strong{ color:var(--navy-900); }
.article-body blockquote{
  border-inline-start:3px solid var(--gold-500); background:var(--surface-50);
  padding:1em 1.4em; border-radius:0 10px 10px 0; margin:1.6em 0; color:var(--navy-800);
  font-family:var(--font-display); font-weight:700; text-transform:none; font-size:1.15rem; line-height:1.4;
}
.article-body figure{ margin:2em 0; }
.article-body figure img{ border-radius:14px; width:100%; }
.article-body figcaption{ font-size:.82rem; color:var(--ink-400); margin-top:.6em; text-align:center; }
.article-hero-img{ border-radius:16px; width:100%; aspect-ratio:16/8; object-fit:cover; margin-top:-72px; position:relative; z-index:2; box-shadow:0 30px 60px -30px rgba(11,31,58,.45); }
.share-row{ display:flex; align-items:center; gap:14px; padding-top:1.6em; margin-top:2em; border-top:1px solid var(--line); }
.share-row .btn-icon-link{ font-size:1.15rem; }
.author-strip{ display:flex; align-items:center; gap:14px; }
.author-strip .name{ font-weight:700; color:var(--navy-900); font-size:.92rem; }
.author-strip .role{ font-size:.78rem; color:var(--ink-400); }