/* IHD General Contracting (Georgia) — site styles. Base layout shared with the IHD Integrations v4 site;
   GC overrides (clay accent, blueprint hero, wordmark lockup) are at the end of this file.
   Single light theme by design (public marketing site); every color is set explicitly. */
:root{
  --navy:#0d2c52;        /* brand navy — headings, hero, CTA bands */
  --navy-deep:#0a2140;   /* hero base, footer */
  --ink:#16202c;         /* body text */
  --muted:#57606c;       /* secondary text */
  --line:#dde3ea;        /* hairlines, card borders */
  --mist:#f4f6f9;        /* alternate band background */
  --signal:#1f6fd1;      /* links + primary buttons on white */
  --signal-soft:#e7f0fb; /* tinted chips */
  --on-navy:#ffffff;
  --on-navy-muted:#b8c6d8;
  --ok:#1e7a4c;
  --font-display:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --font-body:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --font-spec:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1120px;
  --r:6px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#ffffff;color:var(--ink);font-family:var(--font-body);font-size:1.03rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--signal)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
h1,h2,h3{font-family:var(--font-display);color:var(--navy);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,3vw,2.25rem);font-weight:800;letter-spacing:-.01em}
h3{font-size:1.12rem;font-weight:700}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.band{padding-block:clamp(56px,8vw,96px)}
.band--mist{background:var(--mist)}
.band--navy{background:var(--navy);color:var(--on-navy)}
.band--navy h2,.band--navy h3{color:var(--on-navy)}
.eyebrow{font-family:var(--font-spec);font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.band--navy .eyebrow,.hero .eyebrow{color:#8fb8ea}
.lede{font-size:1.12rem;color:var(--muted);max-width:62ch}
.band--navy .lede{color:var(--on-navy-muted)}
.section-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,44px);max-width:760px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .98rem/1 var(--font-body);padding:15px 22px;border-radius:var(--r);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn--primary{background:var(--signal);color:#fff}
.btn--primary:hover{background:#185cb0}
.btn--light{background:#fff;color:var(--navy)}
.btn--light:hover{background:#e9eff7}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn--outline:hover{background:var(--navy);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(6px)}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:70px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:var(--muted);font-weight:600;font-size:.93rem;text-decoration:none;padding:8px 9px;border-radius:4px;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--navy)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--navy)}
.header-actions{display:flex;align-items:center;gap:16px}
.header-phone{color:var(--ink);font-weight:600;text-decoration:none;font-size:.94rem;white-space:nowrap}
.header-actions .btn{padding:11px 16px;font-size:.9rem;white-space:nowrap}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:4px;padding:8px 12px;font:600 .9rem var(--font-body);color:var(--navy);cursor:pointer}
@media (max-width:1180px){
  .header-phone{display:none}
}
@media (max-width:1000px){
  .menu-toggle{display:block}
  .nav,.header-actions{display:none}
  .site-header.open .wrap{flex-wrap:wrap}
  .site-header.open .nav{display:flex;flex-direction:column;width:100%;margin:0;padding-bottom:8px}
  .site-header.open .header-actions{display:flex;width:100%;padding-bottom:16px;flex-wrap:wrap}
  .site-header.open .header-phone{display:inline}
}

/* Hero */
.hero{position:relative;background:var(--navy-deep);color:var(--on-navy);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 420px at 80% -10%,rgba(31,111,209,.35),transparent 60%),
  radial-gradient(700px 380px at -10% 110%,rgba(13,44,82,.9),transparent 70%);}
.hero-traces{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero .wrap{position:relative;padding-block:clamp(64px,9vw,112px) clamp(48px,7vw,80px);display:flex;flex-direction:column;gap:22px}
.hero h1{color:#fff;max-width:21ch}
.hero .lede{color:var(--on-navy-muted);font-size:1.18rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--font-spec);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-muted)}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px;max-width:760px}
.path{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);color:#fff;text-decoration:none;background:rgba(255,255,255,.04);transition:border-color .15s,background .15s}
.path:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.path strong{font-size:1.05rem}
.path span{color:var(--on-navy-muted);font-size:.93rem;line-height:1.45}
.path em{font-style:normal;font-weight:700;font-size:.9rem;color:#8fb8ea;margin-top:4px}
@media (max-width:620px){.paths{grid-template-columns:1fr}}
.hero--short .wrap{padding-block:clamp(56px,7vw,88px) clamp(44px,6vw,64px)}

/* Proof strip */
.proof{border-bottom:1px solid var(--line)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:28px}
.proof div{display:flex;flex-direction:column;gap:2px}
.proof b{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--navy)}
.proof span{font-size:.9rem;color:var(--muted);line-height:1.4}
@media (max-width:760px){.proof .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* About */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:16px}
.pillars{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.pillars div{padding-block:18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.pillars p{color:var(--muted)}
.brands{margin-top:8px;font-size:.92rem;color:var(--muted)}
.brands b{color:var(--ink)}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.svc{background:#fff;padding:22px 22px 24px;display:flex;flex-direction:column;gap:6px;min-width:0}
.svc .tag{font-family:var(--font-spec);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.svc p{color:var(--muted);font-size:.95rem;line-height:1.5}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:1020px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.plans{grid-template-columns:1fr}}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 20px}
.plan--featured{border:2px solid var(--navy)}
.plan--top{background:var(--navy);border-color:var(--navy);color:#fff}
.plan--top h3,.plan--top .price{color:#fff}
.plan--top .plan-sub,.plan--top .price small{color:var(--on-navy-muted)}
.plan--top .plan-list li::before{background:#8fb8ea}
.plan--top hr{border-color:rgba(255,255,255,.18)}
.badge{position:absolute;top:-12px;left:20px;background:var(--navy);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.plan h3{font-size:.95rem;letter-spacing:.12em;text-transform:uppercase}
.price{font-family:var(--font-display);font-size:2.3rem;font-weight:800;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.price small{font-size:.95rem;font-weight:500;color:var(--muted)}
.plan-sub{font-size:.92rem;color:var(--muted);line-height:1.45}
.plan hr{border:0;border-top:1px solid var(--line);margin:0;width:100%}
.plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.95rem;line-height:1.45}
.plan-list li{position:relative;padding-left:16px}
.plan-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:1px;background:var(--signal)}
.plan-list .perk{font-weight:700}
.plan-notes{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;font-size:.9rem;color:var(--muted)}
.plan-notes p b{color:var(--ink)}
@media (max-width:760px){.plan-notes{grid-template-columns:1fr}}
.season{margin-top:28px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:20px 22px;border-radius:var(--r);background:var(--signal-soft)}
.season-mark{font-family:var(--font-spec);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);display:flex;flex-direction:column;gap:2px;border-right:1px solid rgba(13,44,82,.2);padding-right:18px}
.season-mark b{font-family:var(--font-display);font-size:1.05rem;letter-spacing:0;text-transform:none}
.season p{color:var(--ink);font-size:.97rem}
@media (max-width:560px){.season{grid-template-columns:1fr}.season-mark{border-right:0;padding-right:0;border-bottom:1px solid rgba(13,44,82,.2);padding-bottom:10px}}

/* Callout band (health check / commercial) */
.callout{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px 48px;align-items:center}
@media (max-width:760px){.callout{grid-template-columns:1fr}}
.callout .stack p{color:var(--on-navy-muted);max-width:60ch}
.checks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.93rem;color:var(--on-navy)}
.checks li{display:flex;gap:8px;align-items:baseline}
.checks li::before{content:"";width:8px;height:8px;border:2px solid #8fb8ea;border-radius:2px;flex-shrink:0;transform:translateY(-1px)}

/* Area */
.area{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.area div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:4px}
.area span{font-family:var(--font-spec);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
@media (max-width:700px){.area{grid-template-columns:1fr}}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.contact-list{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.contact-list div{display:flex;flex-direction:column;gap:2px}
.contact-list span{font-family:var(--font-spec);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-list a,.contact-list b{color:var(--ink);font-weight:600;text-decoration:none;font-size:1.05rem}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form .full{grid-column:1/-1}
@media (max-width:560px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:.86rem;font-weight:600;color:var(--ink)}
.field label small{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #c5ced9;border-radius:4px;padding:11px 12px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--signal);outline:2px solid var(--signal-soft);outline-offset:0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.84rem;color:var(--muted)}

/* Commercial page */
.cover{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:700px){.cover{grid-template-columns:1fr}}
.cover div{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px;background:#fff}
.cover ul{margin:0;padding-left:18px;color:var(--muted);font-size:.95rem;display:flex;flex-direction:column;gap:4px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:step}
@media (max-width:800px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:step;display:flex;flex-direction:column;gap:8px;padding:22px;border-top:3px solid var(--navy);background:#fff}
.steps li::before{content:"Step " counter(step);font-family:var(--font-spec);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.steps p{color:var(--muted);font-size:.95rem}
.compare-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.compare{width:100%;border-collapse:collapse;min-width:560px;font-size:.95rem}
.compare th,.compare td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--mist)}
.compare tbody th{font-weight:600;color:var(--ink);width:34%}
.compare td{color:var(--muted)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.who{display:flex;flex-wrap:wrap;gap:10px}
.who span{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:.93rem;font-weight:600;color:var(--navy)}
.fine{font-size:.88rem;color:var(--muted);max-width:80ch}

/* Footer */
.site-footer{background:var(--navy-deep);color:var(--on-navy-muted);padding-block:48px 32px;font-size:.93rem}
.site-footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px}
@media (max-width:760px){.site-footer .wrap{grid-template-columns:1fr}}
.site-footer img{height:30px;width:auto}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-footer h3{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-family:var(--font-spec);font-weight:500}
.foot-base{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.84rem}

/* Thanks page */
.thanks{min-height:60vh;display:flex;align-items:center}
.thanks .wrap{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding-block:80px}

/* ---- v4.1: linked service cards, service pages, plan comparison ---- */
a.svc{color:inherit;text-decoration:none;transition:background .15s}
a.svc:hover{background:#f8fafc}
a.svc:hover h3{color:var(--signal)}
.svc em{font-style:normal;font-weight:700;font-size:.9rem;color:var(--signal);margin-top:auto;padding-top:6px}
.svc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.svc-grid--3{grid-template-columns:1fr}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.88rem;color:var(--on-navy-muted)}
.crumbs a{color:#fff;text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.svc-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,5vw,56px);align-items:start}
@media (max-width:900px){.svc-layout{grid-template-columns:1fr}}
.install-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;border-top:1px solid var(--line)}
@media (max-width:620px){.install-list{grid-template-columns:1fr}}
.install-list div{padding-block:16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-width:0}
.install-list p{color:var(--muted);font-size:.96rem}
.how-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;counter-reset:how}
.how-list li{counter-increment:how;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
.how-list li::before{content:counter(how,decimal-leading-zero);grid-row:span 2;font-family:var(--font-spec);font-size:.9rem;color:var(--signal);padding-top:2px}
.how-list p{color:var(--muted);font-size:.96rem}
.svc-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px)}
@media (max-width:900px){.svc-side{position:static}}
.side-card{border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;background:#fff}
.side-card h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-spec);font-weight:500;color:var(--muted)}
.side-card p{font-size:.95rem;color:var(--ink)}
.side-card a{font-weight:700;font-size:.92rem;text-decoration:none}
.side-card--tint{background:var(--signal-soft);border-color:transparent}
.who--light span{background:var(--mist);border-color:var(--line);font-size:.86rem;padding:6px 12px}
.side-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.93rem}
.side-links a{font-weight:500;color:var(--ink)}
.side-links a[aria-current="page"]{color:var(--signal);font-weight:700}

.compare--plans{min-width:760px}
.compare--plans thead th{text-align:left;font-size:.85rem;background:#fff;border-bottom:2px solid var(--navy)}
.compare--plans thead th.hl{background:var(--navy);color:#fff}
.compare--plans td.hl{background:#f3f7fd;color:var(--ink)}
.compare--plans tr.group th{background:var(--mist);font-family:var(--font-spec);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);font-weight:500;padding-block:10px}
.compare--plans tbody th{width:26%}
.compare--plans th:first-child,.compare--plans td:first-child{position:sticky;left:0;background:#fff;z-index:1}
.compare--plans tr.group th:first-child{background:var(--mist)}
.compare .yes{color:var(--ok);font-weight:700}
.compare .no{color:#9aa4b0}
.compare--addons{min-width:0}
.compare--addons td.num{white-space:nowrap;font-weight:700;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.fit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.fit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fit-grid{grid-template-columns:1fr}}
.fit-grid div{border-top:3px solid var(--navy);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.fit-grid p{color:var(--muted);font-size:.96rem}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding-block:14px}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);list-style-position:outside}
.faq details p{margin-top:8px;color:var(--muted);font-size:.96rem}
.faq-wrap{max-width:820px}

/* ================= IHD General Contracting overrides ================= */
:root{
  --signal:#a8481f;       /* clay — links, primary buttons, eyebrows (5.8:1 on white) */
  --signal-hover:#8a3a18;
  --signal-soft:#fbeee6;
  --warm-on-navy:#f0b48c; /* eyebrows/accents on navy (8.9:1) */
}
.btn--primary:hover{background:var(--signal-hover)}
.band--navy .eyebrow,.hero .eyebrow{color:var(--warm-on-navy)}
.path em{color:var(--warm-on-navy)}
.checks li::before{border-color:var(--warm-on-navy)}
.compare--plans td.hl{background:#fdf6f2}

/* Wordmark lockup (monogram image + live text, so it stays crisp and editable) */
.brand{gap:12px;text-decoration:none;color:var(--navy)}
.brand img{height:34px;width:auto}
.brand .wm{display:flex;flex-direction:column;line-height:1;border-left:1px solid var(--line);padding-left:12px}
.brand .wm b{font:800 .98rem/1.05 var(--font-display);letter-spacing:.16em;text-transform:uppercase}
.brand .wm small{font:500 .62rem/1.3 var(--font-spec);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.site-footer .brand{color:#fff}
.site-footer .brand img{height:30px}
.site-footer .brand .wm{border-color:rgba(255,255,255,.2)}
.site-footer .brand .wm small{color:var(--on-navy-muted)}
@media (max-width:1440px){.header-phone{display:none}}
@media (max-width:1300px){.brand .wm small{display:none}}
@media (max-width:1140px){
  .menu-toggle{display:block}
  .nav,.header-actions{display:none}
  .site-header.open .wrap{flex-wrap:wrap}
  .site-header.open .nav{display:flex;flex-direction:column;width:100%;margin:0;padding-bottom:8px}
  .site-header.open .header-actions{display:flex;width:100%;padding-bottom:16px;flex-wrap:wrap}
  .site-header.open .header-phone{display:inline}
}
@media (max-width:480px){.brand{gap:9px}.brand img{height:28px}.brand .wm{padding-left:9px}.brand .wm small{display:none}.brand .wm b{font-size:.8rem;letter-spacing:.1em}}

/* Hero: blueprint grid + framing line drawing instead of circuit traces */
.hero::before{background:
  radial-gradient(900px 420px at 85% -10%,rgba(168,72,31,.28),transparent 60%),
  radial-gradient(700px 380px at -10% 110%,rgba(13,44,82,.9),transparent 70%);}
.hero-grid{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(143,184,234,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(143,184,234,.10) 1px,transparent 1px),
    linear-gradient(rgba(143,184,234,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(143,184,234,.05) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.hero-frame{position:absolute;right:-40px;bottom:0;width:min(640px,62vw);height:auto;opacity:.5;pointer-events:none}
@media (max-width:760px){.hero-frame{opacity:.22;width:110vw;right:-30vw}}

/* Service blocks (two big offerings) */
.offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:860px){.offer{grid-template-columns:1fr}}
.offer article{background:#fff;border:1px solid var(--line);border-top:4px solid var(--signal);border-radius:var(--r);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.offer article p{color:var(--muted)}
.offer ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;font-size:.96rem}
@media (max-width:480px){.offer ul{grid-template-columns:1fr}}
.offer li{position:relative;padding-left:16px}
.offer li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:1px;background:var(--signal)}
.offer .btn-row{margin-top:auto;padding-top:6px}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps--4{grid-template-columns:1fr}}
.family{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.family{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.family{grid-template-columns:1fr}}
.family a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r);color:#fff;text-decoration:none;background:rgba(255,255,255,.04)}
.family a:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08)}
.family span{color:var(--on-navy-muted);font-size:.9rem;line-height:1.45}
.family em{font-style:normal;font-family:var(--font-spec);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--warm-on-navy)}

/* ============ Georgia black & yellow theme (9/30) — overrides everything above ============
   Black shell + signal yellow set this site apart from the navy IHD sites (and from IHD Power's amber).
   Yellow is only used on black, or as a fill behind black text; accent text on white uses dark gold. */
:root{
  --navy:#111111;          /* headings / outline buttons (name kept so base rules still apply) */
  --navy-deep:#0b0b0b;     /* hero, header, footer */
  --yellow:#ffd000;        /* 13.4:1 on black */
  --yellow-hover:#ffdd33;
  --gold-ink:#7a5d00;      /* accent text on white/cream, 6.2:1 */
  --signal:#7a5d00;        /* links on light bands */
  --signal-hover:#5c4600;
  --signal-soft:#fff6cc;
  --mist:#f7f5ef;          /* warm off-white alternate band */
  --line:#e4e1d8;
  --on-navy-muted:#b5b5b5;
  --warm-on-navy:#ffd000;
}
.btn--primary{background:var(--yellow);color:#111}
.btn--primary:hover{background:var(--yellow-hover)}
.btn--light{background:var(--yellow);color:#111}
.btn--light:hover{background:var(--yellow-hover)}
.btn--ghost{border-color:rgba(255,255,255,.5)}
.btn--outline:hover{background:#111;color:var(--yellow)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#111}
.band--navy a:focus-visible,.hero a:focus-visible,.site-header a:focus-visible,.site-header button:focus-visible,.site-footer a:focus-visible{outline-color:var(--yellow)}
.band--navy{background:#111}

/* Header goes black */
.site-header{background:rgba(11,11,11,.97);border-bottom:3px solid var(--yellow)}
.site-header .brand{color:#fff}
.site-header .brand .wm{border-color:rgba(255,255,255,.22)}
.site-header .brand .wm small{color:#b5b5b5}
.nav a{color:#cfcfcf}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--yellow)}
.header-phone{color:#fff}
.menu-toggle{color:#fff;border-color:rgba(255,255,255,.3)}

/* Hero: black with a yellow glow; drawing strokes set in build.py */
.hero::before{background:
  radial-gradient(900px 420px at 85% -10%,rgba(255,208,0,.16),transparent 60%),
  radial-gradient(700px 380px at -10% 110%,rgba(0,0,0,.9),transparent 70%);}
.hero-grid{background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}
.path:hover{border-color:var(--yellow)}
.proof{border-bottom:0;background:var(--yellow)}
.proof b{color:#111}
.proof span{color:#2b2b2b}

/* Cards and markers */
.offer article{border-top-color:var(--yellow)}
.offer li::before,.plan-list li::before{background:#111}
.steps li{border-top-color:var(--yellow)}
.steps li::before,.how-list li::before,.area span,.eyebrow{color:var(--gold-ink)}
.band--navy .eyebrow,.hero .eyebrow{color:var(--yellow)}
.side-card--tint{background:#111;color:#fff}
.side-card--tint h3{color:var(--yellow)}
.side-card--tint p{color:#e6e6e6}
.side-card--tint a:not(.btn){color:var(--yellow)}
.side-links a[aria-current="page"]{color:var(--gold-ink)}
.family a:hover{border-color:var(--yellow)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#111;outline:2px solid var(--yellow)}
.site-footer{border-top:3px solid var(--yellow)}
.site-footer a:hover{color:var(--yellow)}
.crumbs a:hover{color:var(--yellow)}

/* Logo lockup (9/30): matches the ihdintegrations.com header logo style */
.brand img.lockup{height:40px;width:auto}
.site-footer .brand img.lockup{height:36px}
@media (max-width:480px){.brand img.lockup{height:32px}}

/* Logo lockup v2 (9/30): Integrations-style monogram + name + tagline, as live text so the tagline is readable */
.brand.lk{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand.lk .mono{height:42px;width:auto}
.brand.lk .txt{display:flex;flex-direction:column;gap:6px;line-height:1;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;text-transform:uppercase;white-space:nowrap}
.brand.lk .nm{font-size:15px;letter-spacing:.3em;color:#fff}
.brand.lk .tg{font-size:11px;letter-spacing:.13em;color:#e6e6e6}
.site-footer .brand.lk .mono{height:38px}
@media (max-width:480px){
  .brand.lk{gap:9px}
  .brand.lk .mono{height:30px}
  .brand.lk .txt{gap:5px}
  .brand.lk .nm{font-size:12px;letter-spacing:.2em}
  .brand.lk .tg{font-size:9px;letter-spacing:.04em}
  .menu-toggle{padding:7px 10px}
}
@media (max-width:370px){
  .brand.lk{gap:8px}
  .brand.lk .mono{height:26px}
  .brand.lk .nm{font-size:11px;letter-spacing:.16em}
  .brand.lk .tg{font-size:8.5px;letter-spacing:.02em}
}