/* ==========================================================================
   Innovare Demolitions — Global Stylesheet (the entire design system)
   Pure static site. One CSS file. Use the :root tokens, never raw hex.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  --ink:        #17146E;   /* brand indigo: headings, logo, dark buttons, icons */
  --ink-deep:   #0E0C3D;   /* darkest indigo: utility bar, hero, footer, dark sections */
  --ink-2:      #2A2685;   /* secondary indigo: hovers, links, focus rings */
  --amber:      #EBA53C;   /* the only accent: CTAs, eyebrow rule, hover bars */
  --amber-dark: #D4912E;   /* amber hover / eyebrow text */
  --paper:      #ffffff;   /* default background */
  --soft:       #F4F3EF;   /* warm off-white band (.section-soft) */
  --tint:       #EDECF5;   /* light indigo tint: icon chips, placeholders */
  --line:       #E2E0EC;   /* hairline borders / dividers */
  --text:       #2A2740;   /* body text */
  --muted:      #6B6880;   /* secondary text */
  --danger:     #C0392B;   /* emergency red accent (used sparingly) */

  --maxw: 1240px;
  --narrow: 880px;
  --pad: 24px;
  --radius: 4px;

  --shadow-sm: 0 1px 2px rgba(23,20,110,.06), 0 2px 8px -4px rgba(23,20,110,.10);
  --shadow-md: 0 6px 18px -6px rgba(23,20,110,.16), 0 2px 6px rgba(23,20,110,.06);
  --shadow-lg: 0 24px 60px -20px rgba(14,12,61,.28), 0 8px 24px -12px rgba(23,20,110,.14);

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---- 2. Reset / base ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--ink-2); text-decoration:none; }
a:hover{ color:var(--ink); }
button{ font-family:inherit; }
h1,h2,h3,h4{ font-family:'Archivo', system-ui, sans-serif; color:var(--ink); margin:0 0 .5em; line-height:1.1; text-wrap:balance; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background:rgba(235,165,60,.32); }

h1,.h1{ font-size:clamp(2rem, 4.5vw,3.6rem); font-weight:800; letter-spacing:-.025em; }
h2,.h2{ font-size:clamp(1.85rem,3.4vw,2.85rem); font-weight:800; letter-spacing:-.02em; }
h3,.h3{ font-size:clamp(1.25rem,1.6vw,1.55rem); font-weight:700; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); font-weight:400; line-height:1.6; color:var(--text); }

/* ---- 3. Layout ---------------------------------------------------------- */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.container-narrow{ max-width:var(--narrow); margin:0 auto; padding:0 var(--pad); }
section{ padding:clamp(60px,8vw,112px) 0; }
.section-soft{ background:var(--soft); }
.section-tint{ background:var(--tint); }
.section-dark{ background:var(--ink-deep); color:#fff; }
.section-dark h1,.section-dark h2,.section-dark h3{ color:#fff; }
.section-dark p{ color:rgba(255,255,255,.72); }

.prose p{ margin-bottom:1.2em; }
.prose h3{ margin-top:1.6em; }
.prose ul{ margin:0 0 1.2em; padding-left:1.2em; }
.prose li{ margin-bottom:.4em; }

/* ---- 4. Eyebrow + section head ----------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:12.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; color:var(--amber-dark);
  margin-bottom:1.1em;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--amber); display:inline-block; }
.eyebrow.light{ color:var(--amber); }
.eyebrow.center{ justify-content:center; }
.section-head{ max-width:780px; margin-bottom:clamp(32px,4vw,56px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ color:var(--muted); font-size:1.08rem; margin-top:.4em; }
.section-dark .section-head p{ color:rgba(255,255,255,.7); }

/* ---- 5. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:600; font-size:.98rem; line-height:1;
  padding:14px 22px; border-radius:var(--radius);
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--amber); color:var(--ink-deep); }
.btn-primary:hover{ background:var(--amber-dark); color:var(--ink-deep); box-shadow:var(--shadow-md); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--ink-2); color:#fff; box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-light{ background:#fff; color:var(--ink-deep); }
.btn-light:hover{ background:#f3f2fb; color:var(--ink-deep); }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:#a93226; color:#fff; box-shadow:var(--shadow-md); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:600; color:var(--ink-2);
}
.link-arrow svg{ width:15px; height:15px; transition:transform .2s var(--ease); }
.link-arrow:hover{ color:var(--ink); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---- 6. Header ---------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:90; }
.utility-bar{ background:var(--ink-deep); color:rgba(255,255,255,.78); font-size:13px; }
.utility-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; padding-top:6px; padding-bottom:6px; }
.utility-bar a{ color:rgba(255,255,255,.85); }
.utility-bar a:hover{ color:#fff; }
.ub-left{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ub-cred{ display:inline-flex; align-items:center; gap:7px; }
.ub-cred svg{ width:14px; height:14px; color:var(--amber); flex:none; }
.ub-right{ display:flex; align-items:center; gap:16px; }
.ub-emergency{ display:inline-flex; align-items:center; gap:7px; font-weight:700; color:#fff !important; }
.ub-emergency .dot{ width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 0 rgba(192,57,43,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(192,57,43,.55);} 70%{ box-shadow:0 0 0 7px rgba(192,57,43,0);} 100%{ box-shadow:0 0 0 0 rgba(192,57,43,0);} }

.nav-bar{ background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line); }
.nav-bar .container{ display:flex; align-items:center; gap:24px; min-height:74px; }

.brand{ display:inline-flex; align-items:center; gap:12px; flex:none; }
.brand .mark{ display:flex; gap:3px; }
.brand .mark span{ display:block; width:11px; height:26px; border-radius:1px; }
.brand .mark .b1{ background:var(--ink); }
.brand .mark .b2{ background:var(--amber); }
.brand .wordmark{ display:flex; flex-direction:column; line-height:1; }
.brand .wm-1{ font-family:'Archivo',sans-serif; font-weight:800; font-size:18px; letter-spacing:.16em; color:var(--ink); }
.brand .wm-2{ font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:9.5px; letter-spacing:.42em; color:var(--muted); margin-top:3px; }

.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; list-style:none; padding:0; margin-top:0; margin-bottom:0; }
.nav-links a,.nav-links button{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; cursor:pointer;
  font-size:.95rem; font-weight:600; color:var(--text);
  padding:10px 13px; border-radius:var(--radius);
  transition:color .15s var(--ease), background .15s var(--ease);
}
.nav-links a:hover,.nav-links button:hover{ color:var(--ink); background:var(--tint); }
.nav-links .chev{ width:13px; height:13px; transition:transform .2s var(--ease); }
.nav-links button[aria-expanded="true"] .chev{ transform:rotate(180deg); }
body[data-page="home"]     .nav-home a,
body[data-page="about"]    .nav-about,
body[data-page="services"] .nav-services > button,
body[data-page="projects"] .nav-projects,
body[data-page="blog"]     .nav-blog,
body[data-page="faq"]      .nav-faq,
body[data-page="contact"]  .nav-contact{ color:var(--ink); }
body[data-page="home"]     .nav-home a::after,
body[data-page="about"]    .nav-about::after,
body[data-page="projects"] .nav-projects::after,
body[data-page="blog"]     .nav-blog::after,
body[data-page="faq"]      .nav-faq::after{
  content:""; position:absolute;
}
.nav-cta{ margin-left:8px; }
.nav-burger{ display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:8px; color:var(--ink); }
.nav-burger svg{ width:26px; height:26px; }

/* mega menu */
.nav-services{ position:relative; }
.mega{
  position:absolute; top:calc(100% + 2px); left:50%; transform:translate(-50%,8px);
  width:min(900px,92vw); background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:26px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index:95;
}
.mega.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.mega-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px 26px; }
.mega-col h4{ font-family:'Hanken Grotesk',sans-serif; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--amber-dark); margin:0 0 12px; }
.mega-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:3px; }
.mega-col a{ display:block; padding:6px 8px; margin-left:-8px; border-radius:var(--radius); font-size:.92rem; font-weight:500; color:var(--text); }
.mega-col a:hover{ background:var(--tint); color:var(--ink); }
.mega-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.mega-foot p{ margin:0; font-size:.9rem; color:var(--muted); }

/* mobile panel */
.mobile-panel{
  position:fixed; inset:0 0 0 auto; width:min(420px,88vw);
  background:#fff; z-index:120; transform:translateX(100%);
  transition:transform .3s var(--ease); display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); overflow-y:auto;
}
.mobile-panel.open{ transform:translateX(0); }
.mp-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.mp-close{ background:none; border:0; cursor:pointer; padding:6px; color:var(--ink); }
.mp-close svg{ width:26px; height:26px; }
.mp-body{ padding:14px 22px 26px; }
.mp-body a{ display:block; padding:12px 4px; font-weight:600; font-size:1.05rem; color:var(--ink); border-bottom:1px solid var(--line); }
.mp-group-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--amber-dark); margin:18px 0 4px; }
.mp-body .mp-sub{ display:block; padding:9px 4px; font-weight:500; font-size:.96rem; color:var(--text); border-bottom:1px solid var(--line); }
.mp-cta{ margin-top:22px; }
.mp-cta .btn{ width:100%; text-align:center; }
.mp-contact{ margin-top:18px; font-size:.92rem; color:var(--muted); }
.mp-contact a{ border:0; padding:2px 0; display: block; font-weight:600; }
.scrim{ position:fixed; inset:0; background:rgba(14,12,61,.45); z-index:110; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
.scrim.open{ opacity:1; visibility:visible; }

/* ---- 7. Hero ------------------------------------------------------------ */
.hero{ background:var(--ink-deep); color:#fff; position:relative; overflow:hidden; }
.hero::after{ content:""; position:absolute; top:-30%; right:-10%; width:60%; height:140%;
  background:radial-gradient(ellipse at center, rgba(235,165,60,.16), transparent 62%); pointer-events:none; }
.hero .container{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero h1{ color:#fff; }
.hero .lead{ color:rgba(255,255,255,.78); max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero .eyebrow{ color:var(--amber); }
.trust{ display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; }
.trust .t-item{ flex:1 1 0; min-width:120px; }
.trust .t-num{ font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(1.5rem,2.6vw,2.1rem); color:#fff; letter-spacing:-.02em; }
.trust .t-lab{ font-size:.82rem; color:rgba(255,255,255,.62); line-height:1.4; }
.hero-media{ position:relative; }

/* page hero (interior) */
.page-hero{ background:var(--ink-deep); color:#fff; position:relative; overflow:hidden; }
.page-hero::after{ content:""; position:absolute; bottom:-40%; left:-8%; width:50%; height:140%;
  background:radial-gradient(ellipse at center, rgba(235,165,60,.12), transparent 60%); pointer-events:none; }
.page-hero .container{ position:relative; z-index:1;}
.page-hero.with-media .container{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.page-hero h1{ color:#fff; }
.page-hero .lead {
    color: rgba(255,255,255,.78);
    max-width: 70%;
}
.page-hero .eyebrow{ color:var(--amber); }
.page-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.crumb{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:22px; }
.crumb a{ color:rgba(255,255,255,.8); }
.crumb a:hover{ color:#fff; }
.crumb span{ color:rgba(255,255,255,.4); }

/* ---- 8. Trust strip ----------------------------------------------------- */
.trust-strip{ background:#fff; border-bottom:1px solid var(--line); }
.trust-strip .container{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 26px; padding-top:20px; padding-bottom:20px; }
.ts-item{ display:inline-flex; align-items:center; gap:9px; font-size:.92rem; font-weight:600; color:var(--ink); }
.ts-item svg{ width:18px; height:18px; color:var(--amber-dark); flex:none; }
.ts-sep{ width:1px; height:20px; background:var(--line); }

/* ---- 9. Service cards --------------------------------------------------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc-grid.two{ grid-template-columns:repeat(2,1fr); }
.svc-card{
  position:relative; background:#fff; border:1px solid var(--line); padding: 22px 14px 20px;
  border-radius:var(--radius); overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  display:flex; flex-direction:column;
}
.svc-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
a.svc-card:hover,.svc-card.hoverable:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:transparent; }
a.svc-card:hover::before,.svc-card.hoverable:hover::before{ transform:scaleX(1); }
.svc-card .ico{ width:48px; height:48px; border-radius:var(--radius); background:var(--tint); display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex:none; }
.svc-card .ico svg{ width:24px; height:24px; color:var(--ink); }
.svc-card h3{ color:var(--ink); margin-bottom:.4em; }
.svc-card p{ color:var(--muted); font-size:.97rem; margin-bottom: 8px; }
.svc-card .more{ margin-top:auto; display:inline-flex; align-items:center; gap:.4em; font-weight:600; font-size:.92rem; color:var(--ink-2); }
.svc-card .more svg{ width:14px; height:14px; transition:transform .2s var(--ease); }
a.svc-card:hover .more svg{ transform:translateX(3px); }

/* ---- 10. Feature grid --------------------------------------------------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feature{ padding:30px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature .num{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1.1rem; color:var(--amber-dark); letter-spacing:.04em; }
.feature h3{ margin:.5em 0 .35em; color:var(--ink); }
.feature p{ color:var(--muted); font-size:.96rem; margin:0; }
.section-dark .feature-grid{ border-color:rgba(255,255,255,.14); }
.section-dark .feature{ border-color:rgba(255,255,255,.14); }
.section-dark .feature h3{ color:#fff; }
.section-dark .feature p{ color:rgba(255,255,255,.66); }

/* ---- 11. Check list ----------------------------------------------------- */
.check-list{ list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.check-list.two{ grid-template-columns:1fr 1fr; gap:13px 30px; }
.check-list li{ display:flex; gap:11px; align-items:flex-start; font-size:1rem; }
.check-list li svg{ width:20px; height:20px; color:var(--amber-dark); flex:none; margin-top:2px; }
.section-dark .check-list li{ color:rgba(255,255,255,.82); }
.section-dark .check-list li svg{ color:var(--amber); }

/* ---- 12. Chips ---------------------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ display:inline-flex; align-items:center; padding:7px 15px; border-radius:100px; background:var(--tint); color:var(--ink); font-size:.86rem; font-weight:600; border:1px solid transparent; }
.section-dark .chip{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.14); }

/* ---- 13. Spec list ------------------------------------------------------ */
.spec-list{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.spec-list .row{ display:grid; grid-template-columns:240px 1fr; gap:18px; padding:16px 22px; border-bottom:1px solid var(--line); }
.spec-list .row:last-child{ border-bottom:0; }
.spec-list .row:nth-child(odd){ background: #ebebeb; }
.spec-list .k{ font-weight:700; color:var(--ink); font-size:.95rem; }
.spec-list .v{ color:var(--text); font-size:.97rem; }

/* ---- 14. CTA band ------------------------------------------------------- */
.cta-band{ background:var(--ink-deep); color:#fff; position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; height:200%;
  background:radial-gradient(ellipse at center, rgba(235,165,60,.16), transparent 60%); pointer-events:none; }
.cta-band .container{ position:relative; z-index:1; text-align:center; max-width:930px; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.74); font-size:1.1rem; max-width:56ch; margin-left:auto; margin-right:auto; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px; }

/* ---- 15. Accordion ------------------------------------------------------ */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:none; border:0; cursor:pointer; text-align:left; padding:22px 4px;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:1.08rem; color:var(--ink); }
.acc-q:hover{ color:var(--ink-2); }
.acc-icon{ position:relative; width:20px; height:20px; flex:none; }
.acc-icon::before,.acc-icon::after{ content:""; position:absolute; background:var(--amber-dark); border-radius:2px; transition:transform .3s var(--ease); }
.acc-icon::before{ top:9px; left:0; width:20px; height:2px; }
.acc-icon::after{ top:0; left:9px; width:2px; height:20px; }
.acc-item.open .acc-icon::after{ transform:rotate(90deg); }
.acc-item.open .acc-icon::before{ transform:rotate(180deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.acc-inner{ padding:0 4px 24px; color:var(--text); max-width:74ch; }
.acc-inner p:first-child{ margin-top:0; }

/* ---- 16. Project grid + filters ---------------------------------------- */
.filter-row{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:32px; }
.filter-btn{ padding:9px 17px; border-radius:100px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:600; font-size:.9rem; color:var(--muted); transition:all .15s var(--ease); }
.filter-btn:hover{ border-color:var(--ink); color:var(--ink); }
.filter-btn.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.project-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; transition:transform .2s var(--ease), box-shadow .2s var(--ease); display:flex; flex-direction:column; }
.project-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.project-card.hide{ display:none; }
.project-card .pc-body{ padding:22px 22px 24px; }
.project-card .pc-cat{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--amber-dark); }
.project-card h3{ margin:.5em 0 .35em; font-size:1.18rem; color:var(--ink); }
.project-card p{ color:var(--muted); font-size:.95rem; margin:0; }

/* ---- 17. Blog ----------------------------------------------------------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; transition:transform .2s var(--ease), box-shadow .2s var(--ease); display:flex; flex-direction:column; }
.blog-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.blog-card .bc-body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.blog-card .bc-cat{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--amber-dark); margin-bottom:10px; }
.blog-card h3{ font-size:1.18rem; color:var(--ink); margin-bottom:.5em; }
.blog-card p{ color:var(--muted); font-size:.95rem; margin-bottom:1.1em; }
.blog-card .more{ margin-top:auto; }
.blog-card .bc-media {
    display: none;
}

/* ---- 18. Testimonials --------------------------------------------------- */
.tm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tm-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; }
.tm-card .quote-mark{ font-family:'Archivo',sans-serif; font-weight:800; font-size:3rem; line-height:.6; color:var(--amber); }
.tm-card .sector{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--amber-dark); margin:14px 0 10px; }
.tm-card blockquote{ margin:0 0 20px; font-size:1.02rem; color:var(--text); line-height:1.6; }
.tm-card .author{ display:flex; align-items:center; gap:12px; }
.tm-card .av{ width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Archivo',sans-serif; font-weight:700; font-size:.95rem; flex:none; }
.tm-card .au-name{ font-weight:700; color:var(--ink); font-size:.95rem; }
.tm-card .au-meta {
    font-size: .85rem;
    color: var(--muted);
    display: block;
}

/* ---- 19. Contact -------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:start; }
.contact-card{ background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.contact-card + .contact-card{ margin-top:22px; }
.contact-card h3{ color:var(--ink); margin-bottom:.7em; }
.cc-row{ display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line); }
.cc-row:last-child{ border-bottom:0; }
.cc-row svg{ width:20px; height:20px; color:var(--amber-dark); flex:none; margin-top:3px; }
.cc-row .cc-k{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
.cc-row .cc-v{ font-weight:600; color:var(--ink); }
.cc-row .cc-v a{ color:var(--ink); }
.contact-card.emergency{ background:var(--ink-deep); border-color:var(--ink-deep); color:#fff; }
.contact-card.emergency h3{ color:#fff; }
.contact-card.emergency p{ color:rgba(255,255,255,.75); }
.contact-card.emergency .em-num{ display:inline-flex; align-items:center; gap:10px; font-family:'Archivo',sans-serif; font-weight:800; font-size:1.5rem; color:#fff; margin-top:6px; }
.contact-card.emergency .dot{ width:10px; height:10px; border-radius:50%; background:var(--danger); animation:pulse 2s infinite; }

.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-sm); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:7px; }
.field .req{ color:var(--danger); }
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:inherit; font-size:1rem; color:var(--text); background:#fff;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--ink-2); box-shadow:0 0 0 3px rgba(42,38,133,.1); }
.field textarea{ resize:vertical; min-height:120px; }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:var(--danger); }
.err-msg{ display:none; color:var(--danger); font-size:.84rem; margin-top:6px; }
.field.invalid .err-msg{ display:block; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-success{ display:none; text-align:center; padding:30px 10px; }
.form-success.show{ display:block; }
.form-success svg{ width:54px; height:54px; color:var(--amber-dark); margin:0 auto 16px; }
.form-success h3{ color:var(--ink); }

.steps{ list-style:none; counter-reset:step; padding:0; margin:0; display:grid; gap:18px; }
.steps .step{ display:flex; gap:16px; }
.steps .step .s-num{ counter-increment:step; width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Archivo',sans-serif; font-weight:700; flex:none; }
.steps .step .s-num::before{ content:counter(step); }
.steps .step h4{ color:var(--ink); font-family:'Archivo',sans-serif; margin:6px 0 .3em; font-size:1.05rem; }
.steps .step p{ color:var(--muted); font-size:.96rem; margin:0; }

/* ---- 20. Emergency banner (callout block) ------------------------------ */
.emergency-band{ background:var(--danger); color:#fff; border-radius:var(--radius); padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.emergency-band .eb-text h3{ color:#fff; margin-bottom:.2em; }
.emergency-band .eb-text p{ color:rgba(255,255,255,.88); margin:0; }
.emergency-band .eb-num{ display:inline-flex; align-items:center; gap:10px; font-family:'Archivo',sans-serif; font-weight:800; font-size:1.5rem; color:#fff; white-space:nowrap; }
.emergency-band .btn-light{ flex:none; }

/* ---- 21. Placeholders --------------------------------------------------- */
.ph{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--tint);
  background-image:repeating-linear-gradient(135deg, rgba(23,20,110,.05) 0, rgba(23,20,110,.05) 1px, transparent 1px, transparent 11px);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.ph-inner{ text-align:center; padding:24px; }
.ph-inner svg{ width:34px; height:34px; color:var(--ink); opacity:.5; margin:0 auto 10px; }
.ph-label{ font-weight:700; color:var(--ink); font-size:.92rem; }
.ph-tag{ font-size:.78rem; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.1em; }
.ph.dark{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 11px); }
.ph.dark .ph-inner svg,.ph.dark .ph-label{ color:#fff; opacity:.7; }
.ph.dark .ph-tag{ color:rgba(255,255,255,.55); }
.ph-hero{ aspect-ratio:4/3.4; }
.ph-wide{ aspect-ratio:16/7; }
.ph-sq{ aspect-ratio:1/1; }
.ph-43{ aspect-ratio:4/3; }
.pc-media{ aspect-ratio:16/10; }
.bc-media{ aspect-ratio:16/9; }

/* ---- 22. Split layout helper ------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.split.media-left{ direction:rtl; }
.split.media-left > *{ direction:ltr; }
.stat-row{ display:flex; gap:30px; flex-wrap:wrap; margin-top:26px; }
.stat-row .stat .s-num{ font-family:'Archivo',sans-serif; font-weight:800; font-size:2rem; color:var(--ink); letter-spacing:-.02em; }
.section-dark .stat-row .stat .s-num{ color:#fff; }
.stat-row .stat .s-lab{ font-size:.85rem; color:var(--muted); }
.section-dark .stat-row .stat .s-lab{ color:rgba(255,255,255,.62); }

/* ---- 23. Footer --------------------------------------------------------- */
.site-footer{ background:var(--ink-deep); color:rgba(255,255,255,.7); }
.f-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding:clamp(48px,6vw,80px) 0 48px; }
.f-top .container{ padding:0; }
.site-footer .container{ padding-left:var(--pad); padding-right:var(--pad); }
.f-brand .brand .wm-1{ color:#fff; }
.f-brand .brand .wm-2{ color:rgba(255,255,255,.55); }
.f-brand .brand .mark .b1{ background:#fff; }
.f-about{ margin-top:18px; font-size:.92rem; color:rgba(255,255,255,.62); line-height:1.6; max-width:34ch; }
.f-licences{ margin-top:18px; display:flex; flex-direction:column; gap:7px; }
.f-licences .lic{ display:flex; gap:8px; align-items:flex-start; font-size:.82rem; color:rgba(255,255,255,.6); }
.f-licences .lic svg{ width:14px; height:14px; color:var(--amber); flex:none; margin-top:3px; }
.f-col h4{ font-family:'Hanken Grotesk',sans-serif; color:#fff; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; margin:0 0 16px; }
.f-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.f-col a{ color:rgba(255,255,255,.66); font-size:.92rem; }
.f-col a:hover{ color:#fff; }
.f-contact .fc-row{ display:flex; gap:9px; align-items:flex-start; margin-bottom:13px; font-size:.92rem; color:rgba(255,255,255,.72); }
.f-contact .fc-row svg{ width:16px; height:16px; color:var(--amber); flex:none; margin-top:3px; }
.f-contact a{ color:rgba(255,255,255,.85); }
.f-contact a:hover{ color:#fff; }
.f-bar{ border-top:1px solid rgba(255,255,255,.12); padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.84rem; color:rgba(255,255,255,.5); }
.f-bar a{ color:rgba(255,255,255,.62); }
.f-bar a:hover{ color:#fff; }
.f-bar .f-group{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---- 24. Reveal animation ---------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

.brand img {
    max-width: 215px;
    width: auto;
}
.border_r {
    border-radius: 15px;
}
.success {
    color: green;
}
.svc-card > div{padding: 22px 14px 20px;}

/* ---- 25. Responsive ----------------------------------------------------- */

@media (max-width:1024px){
  .nav-links{ display:none; }
  .nav-burger{ display:inline-flex; }
  .nav-cta{ display:none; }
  .split.media-left{ direction:ltr; }
  .contact-grid .form-card{ order:2; }
  .ub-left .ub-cred.hide-sm{ display:none; }
  .blog-grid, .project-grid {
    grid-template-columns: repeat(2,1fr);
}
.page-hero .lead {
    max-width: 100%;
}
}

@media (max-width:767px){
    .container {
    padding: 0 18px;
}
.split,.contact-grid{ grid-template-columns:1fr; gap:32px; }
.eyebrow {
    font-size: 11px;
}
  .hero .container{ grid-template-columns:1fr; gap:38px; }
  .page-hero.with-media .container{ grid-template-columns:1fr; gap:34px; }
  .svc-grid,.project-grid,.blog-grid,.tm-grid{ grid-template-columns:repeat(2,1fr); }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .mega-grid{ grid-template-columns:repeat(2,1fr); }
  .f-top{ grid-template-columns:1fr 1fr; gap:36px; }
  .split{ gap:38px; }
  .brand img {
    max-width: 160px;
}
.split.media-left {
    display: flex;
    flex-wrap: wrap-reverse;
}
}

@media (max-width:560px){
    .ub-left {
    display: none;
}
.ub-emergency {
    font-size: 20px;
    width: 100%;
}
  body{ font-size:16px; }
  .svc-grid,.svc-grid.two,.project-grid,.blog-grid,.tm-grid,.feature-grid,.check-list.two{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .spec-list .row{ grid-template-columns:1fr; gap:4px; }
  .f-top{ grid-template-columns:1fr; gap:30px; }
  .utility-bar .ub-left .ub-cred{ display:none; }
  .utility-bar .ub-left .ub-cred.keep-sm{ display:inline-flex; }
  .emergency-band{ flex-direction:column; align-items:flex-start; }
  .trust .t-item{ flex:1 1 40%; }
}