/* ==========================================================================
   Tudor Energy — styles.css
   Version: v1.5.2  (2025-09-24)
   Notes:
   - Edit colors/spacing in :root.
   - Buttons: .btn  |  .btn.primary (gold+purple)  |  .btn.alt (white+purple)
   - HOD pill: .hod-pill (must remain visible on every page)
   ========================================================================== */


/* ========== 01) THEME TOKENS (colors, spacing, fonts) ==================== */
:root{
  /* brand */
  --brand-purple:#6a1b9a;
  --brand-purple-dark:#4a148c;
  --brand-gold:#F7D74E;
  --brand-dark:#222;

  /* neutrals */
  --text:#111111;
  --muted:#6b7280;
  --bg:#FAFAF8;

  /* focus ring */
  --ring:rgba(106,27,154,0.35);

  /* spacing + radius */
  --space-1:.5rem; --space-2:.75rem; --space-3:1rem;
  --space-4:1.5rem; --space-5:2.5rem; --space-6:3.5rem;
  --radius:10px;

  /* fonts */
  --font-ui: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-brand: Cinzel, "Times New Roman", serif;
}


/* ========== 02) BASE / RESET + UTILITIES ================================= */
*{ box-sizing:border-box; margin:0; padding:0; color:var(--text); }
html,body{ font-family:var(--font-ui); background:var(--bg); color:var(--text); }
html{ scroll-behavior:smooth; }
a{ color:var(--brand-purple); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:3px solid var(--brand-gold); outline-offset:2px; }
img[loading=lazy]{ content-visibility:auto; contain-intrinsic-size:auto 300px; }

.container{ max-width:1100px; margin:0 auto; padding:0 20px; }
.text-right{ text-align:right; }
.mt-3{ margin-top:1rem; }
.tel{ white-space:nowrap; font-variant-numeric:tabular-nums; } /* avoids wrapping in phone numbers */


/* ========== 03) HEADER & NAV ============================================ */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:4px solid var(--brand-purple);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }

.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ height:44px; width:auto; }
.brand .title{ line-height:1; }
.brand .name{ font-family:var(--font-brand); font-weight:900; letter-spacing:.02em; }
.brand .tag{ font-variant-caps:small-caps; letter-spacing:.06em; color:var(--muted); font-size:12px; }

nav.primary{ display:flex; gap:18px; align-items:center; }
nav.primary a{ font-weight:600; color:#111; padding:8px 10px; border-radius:8px; font-variant-numeric:tabular-nums; }
nav.primary a:hover,
nav.primary a[aria-current="page"]{ background:rgba(106,27,154,.08); }

.mobile-toggle{ display:none; background:none; border:0; font-size:28px; }

/* header “Call” button (gold fill + purple border) */
.call-btn{
  background:var(--brand-gold); color:#111; font-weight:800;
  padding:10px 16px; border-radius:999px;
  border:2px solid var(--brand-purple); box-shadow:0 2px 0 var(--brand-purple);
  white-space:nowrap; transition:transform .05s;
}
.call-btn:active{ transform:translateY(1px); }


/* ========== 04) HOD COMPLIANCE PILL (always visible) ===================== */
.header-legal{ background:transparent; border:0; }
.header-legal .container{ padding-top:2px; padding-bottom:2px; }
.hod-pill{
  display:inline-block;
  transform:translateY(-6px);              /* nudges pill closer to logo */
  background:#fffbe6;
  border:2px solid var(--brand-gold);
  border-radius:999px;
  padding:4px 10px;
  font:800 12px/1 var(--font-ui);
  letter-spacing:.06em; text-transform:uppercase; color:#3a2a00;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
@media print{
  .header-legal{ display:block !important; }
}


/* ========== 05) HERO / “HOUSE” ========================================== */
.house{
  background:linear-gradient(180deg,rgba(106,27,154,.06),transparent 60%),
             url('assets/house.jpg') center/cover no-repeat;
  border-bottom:4px solid var(--brand-purple);
}
.house .container{ padding:80px 20px 110px; }

/* purple pill label */
.kicker{
  display:inline-block;
  background:rgba(106,27,154,.95);
  color:#fff; font-weight:800; letter-spacing:.02em;
  padding:8px 14px; border-radius:999px; margin-bottom:18px;
  font-size:clamp(14px,1.4vw,18px); box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* hero heading */
.house h1{
  color:var(--brand-gold);
  text-shadow:0 2px 4px rgba(0,0,0,.35);
  font-family:var(--font-brand);
  font-size:clamp(44px,5.5vw,72px);
  font-weight:900; margin-bottom:.75rem;
}

/* hero subhead */
.house p{
  font-size:clamp(17px,1.6vw,22px);
  max-width:720px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35);
}


/* ========== 06) TYPOGRAPHY & SECTIONS =================================== */
h1{ font-size:40px; line-height:1.1; margin:var(--space-6) 0 var(--space-4); color:#222; }
h2{ font-size:28px; line-height:1.2; margin:var(--space-5) 0 var(--space-3); }
p{ font-size:16px; line-height:1.6; margin:0 0 var(--space-3); }
.section{ padding:var(--space-6) 0; }
.centered-img{ display:block; margin:24px auto; max-width:100%; height:auto; }


/* ========== 07) CARDS / FEATURES ======================================== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; }
.card{ border:1px solid #e5e7eb; border-radius:12px; padding:18px; }
.card h3{ margin:0 0 6px; }
.card p{ margin:0; color:#454; }

.feature{ display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; margin-top:16px; }
.feature img, .hero-media img{ width:100%; border-radius:12px; border:1px solid #e5e7eb; }
.feature-media img{ width:100%; height:auto; border-radius:12px; border:1px solid #e5e7eb; }


/* ========== 08) BUTTONS (single source of truth) ========================= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.1rem; border-radius:var(--radius); font-weight:700;
  background:var(--brand-purple); color:#fff;
  border:2px solid var(--brand-purple-dark); box-shadow:0 2px 0 var(--brand-purple-dark);
  font-variant-numeric:tabular-nums;
}
.btn.primary{                        /* gold fill + purple border */
  background:var(--brand-gold); color:#111;
  border-color:var(--brand-purple); box-shadow:0 2px 0 var(--brand-purple);
}
.btn.alt{                            /* white fill + purple text/border */
  background:#fff; color:var(--brand-purple);
  border-color:var(--brand-purple); box-shadow:0 2px 0 var(--brand-purple);
}
.btn:active{ transform:translateY(1px); }
button[disabled], .btn[disabled], [type=submit][disabled]{ opacity:.6; cursor:not-allowed; filter:saturate(.6); }
.cta-row{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }


/* ========== 09) FORMS ==================================================== */
.form{ max-width:760px; margin-top:18px; }
label{ display:block; font-weight:700; margin:12px 0 6px; }
input,select,textarea{ width:100%; padding:12px; border-radius:10px; border:1px solid #d1d5db; outline:none; }
input:focus,select:focus,textarea:focus{ border-color:var(--brand-purple); box-shadow:0 0 0 4px var(--ring); }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.notice{ background:#f0f9ff; border:1px solid #bae6fd; padding:12px; border-radius:10px; margin:14px 0; color:#075985; }


/* ========== 10) PRICE BADGE & MODAL ===================================== */
.price-badge{
  display:inline-block;
  margin:0 16px 0 8px;    /* right gap keeps distance from “Home” link */
  padding:6px 10px;
  border-radius:6px; border:1px solid #ccc;
  font-weight:600; white-space:nowrap; cursor:pointer;
}
.price-badge .mil{ font-size:.65em; vertical-align:super; line-height:0; margin-left:.02em; }

.modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:16px; }
.modal[aria-hidden="false"]{ display:flex; }
.modal-card{ background:#fff; color:#111; max-width:520px; width:100%; border-radius:10px; padding:20px; box-shadow:0 10px 40px rgba(0,0,0,.25); }
.modal-close{ float:right; border:0; background:transparent; font-size:18px; cursor:pointer; }
.modal .big{ font-size:28px; margin:.5rem 0; }
.modal .note{ color:#555; font-size:14px; }


/* ========== 11) FOOTER (grid layout) ==================================== */
footer{ border-top:1px solid #eee; padding:28px 0 24px; margin-top:56px; background:#fff; }
footer h4{ font-size:.9rem; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; margin:0 0 8px; }
footer ul{ list-style:none; padding:0; margin:0; }
footer li+li{ margin-top:6px; }

.footer-grid{
  display:grid; gap:1rem;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-areas:
    "identity company support"
    "service  service service"
    "bottom   bottom  bottom";
}
.footer-identity{ grid-area:identity; }
.footer-company{  grid-area:company; }
.footer-support{  grid-area:support; }
.footer-service{  grid-area:service; }
.footer-bottom{
  grid-area:bottom;
  display:flex; justify-content:space-between; align-items:center;
  gap:.75rem; padding-top:12px; border-top:1px solid #eee;
}
.footer-note{ margin:0; color:var(--muted); font-size:.9rem; }
.copyright{ color:var(--muted); }
@media(min-width:900px){
  .footer-service p{ column-count:2; column-gap:2rem; }
}


/* ========== 12) RESPONSIVE BREAKPOINTS ================================== */
@media (max-width:880px){
  .cards{ grid-template-columns:1fr 1fr; }
  .feature{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .form .row{ grid-template-columns:1fr; }
  .footer-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "identity"
      "company"
      "support"
      "service"
      "bottom";
  }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:720px){
  .mobile-toggle{ display:block; }
  nav.primary{
    display:none; position:absolute; right:16px; top:72px; background:#fff;
    padding:10px; border:1px solid #eee; border-radius:12px; flex-direction:column; width:230px;
  }
  nav.primary.open{ display:flex; }
  .brand img{ height:40px; }
  .house .container{ padding:56px 20px 80px; }
  h1{ font-size:34px; }
  .cards{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .hod-pill{ transform:translateY(-4px); } /* slightly less lift on very small screens */
}