/* ============================================================
   Patriot Homes & Services — hybrid site (v2, post-review)
   Stoneflag design language. Light default, dark via prefers-color-scheme + toggle.
   Brand navy #053152 + red #C8102E. Big Shoulders ONLY for H1/H2; Hanken elsewhere.
   ============================================================ */

/* ---------- tokens: LIGHT ---------- */
:root {
  --bg: #EFEBE0; --surface: #FFFFFF; --surface-2: #F6F3EC;
  --ink: #14202E; --ink-2: #41505F; --muted: #5C6675;
  --navy: #053152; --red: #C8102E; --red-text: #B00C28;
  --band: #053152; --on-band: #FFFFFF; --band-sub: rgba(255,255,255,.82);
  --line: #E2DCCB; --line-2: #CFC7B4;
  --tag-bg: rgba(5,49,82,.06); --tag-bd: rgba(5,49,82,.18); --tag-ink: #053152;
  --shadow: 0 18px 40px -24px rgba(8,20,35,.4);
  --shadow-sm: 0 1px 2px rgba(20,32,46,.06), 0 6px 16px -12px rgba(20,32,46,.18);
  --logo-color: block; --logo-white: none;
}
/* ---------- tokens: DARK ---------- */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0E1014; --surface:#15181E; --surface-2:#1A1E25;
  --ink:#F2EFE9; --ink-2:#C7C3BB; --muted:#959BA5;
  --navy:#5C90CC; --red:#E8294A; --red-text:#F26781;
  --band:#0B2740; --on-band:#F2EFE9; --band-sub:rgba(242,239,233,.82);
  --line:#272B33; --line-2:#39404B;
  --tag-bg:rgba(255,255,255,.06); --tag-bd:rgba(255,255,255,.14); --tag-ink:#D7DCE3;
  --shadow:0 20px 46px -22px rgba(0,0,0,.7); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --logo-color:none; --logo-white:block;
}}
:root[data-theme="dark"]{
  --bg:#0E1014; --surface:#15181E; --surface-2:#1A1E25;
  --ink:#F2EFE9; --ink-2:#C7C3BB; --muted:#959BA5;
  --navy:#5C90CC; --red:#E8294A; --red-text:#F26781;
  --band:#0B2740; --on-band:#F2EFE9; --band-sub:rgba(242,239,233,.82);
  --line:#272B33; --line-2:#39404B;
  --tag-bg:rgba(255,255,255,.06); --tag-bd:rgba(255,255,255,.14); --tag-ink:#D7DCE3;
  --shadow:0 20px 46px -22px rgba(0,0,0,.7); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --logo-color:none; --logo-white:block;
}

*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
:where(h1,h2,h3,h4){ text-wrap:balance; } :where(p,li){ text-wrap:pretty; }

:root{ --fs-sm:.8125rem; --fs-base:1.0625rem; --fs-lg:1.1875rem; --step:clamp(3.5rem, 2.5rem + 5vw, 6rem);
  --z-nav:100; --z-menu:200; --z-skip:300; }

body{ background:var(--bg); color:var(--ink); font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:var(--fs-base); line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .3s,color .3s; }

/* Big Shoulders ONLY for display (h1/h2). */
h1{ font-family:'Big Shoulders Display',Impact,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.9rem, 2rem + 4.5vw, 5rem); line-height:.95; letter-spacing:.01em; }
h2{ font-family:'Big Shoulders Display',Impact,sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem, 1.4rem + 2.4vw, 2.7rem); line-height:1; letter-spacing:.01em; }
/* Smaller headings use the body face in Title Case. */
h3{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.3rem; line-height:1.2; letter-spacing:-.005em; }
h4{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.05rem; line-height:1.25; }
.accent{ color:var(--red); }
.lede{ font-size:var(--fs-lg); color:var(--ink-2); max-width:54ch; line-height:1.5; }

.wrap{ max-width:75rem; margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem); }
.section{ padding-block:var(--step); }
.section.alt{ background:var(--surface-2); }
.narrow{ max-width:54rem; }
.kicker{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Hanken Grotesk',sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.kicker::before{ content:""; width:1.8rem; height:3px; background:var(--red); border-radius:2px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.6rem; border-radius:6px;
  font-family:'Hanken Grotesk',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.9rem;
  transition:transform .15s,filter .15s,background .15s,color .15s,border-color .15s; }
.btn svg{ width:1.05em; height:1.05em; }
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn-ghost{ border:1.5px solid var(--line-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--red); color:var(--red); }
.btn-on-band{ border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.btn-on-band:hover{ background:rgba(255,255,255,.1); }
.link-arrow{ color:var(--red-text); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; }
:focus-visible{ outline:2.5px solid var(--red); outline-offset:3px; }
.skip-link{ position:absolute; left:1rem; top:-4rem; z-index:var(--z-skip); background:var(--navy); color:#fff; padding:.7rem 1.1rem; border-radius:6px; transition:top .2s; }
.skip-link:focus{ top:1rem; }

/* ---------- header / nav ---------- */
.site-header{ position:sticky; top:0; z-index:var(--z-nav); background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; gap:1.25rem; padding-block:.9rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; flex:none; }
.brand .mark{ height:38px; width:auto; }
.logo-color{ display:var(--logo-color); } .logo-white{ display:var(--logo-white); }
.brand .word{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:1.25rem; letter-spacing:.04em; text-transform:uppercase; line-height:.9; }
.brand .sub{ display:block; font-size:.56rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-top:2px; }
.nav-spacer{ flex:1; }
.nav-menu{ display:flex; align-items:center; gap:.4rem; }
.nav-item{ position:relative; }
.nav-link{ display:inline-flex; align-items:center; gap:.3rem; padding:.55rem .7rem; border-radius:6px; font-weight:600; font-size:.95rem; color:var(--ink); white-space:nowrap; }
.nav-link:hover, .nav-item:focus-within>.nav-link{ color:var(--red); }
.nav-link .caret{ width:.7rem; height:.7rem; transition:transform .2s; }
.nav-item[data-open="true"] .caret{ transform:rotate(180deg); }
.dropdown{ position:absolute; top:calc(100% + .4rem); left:0; min-width:19rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:.5rem; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s,transform .16s,visibility .16s; z-index:var(--z-menu); }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown, .nav-item[data-open="true"] .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:flex; gap:.7rem; align-items:flex-start; padding:.6rem .7rem; border-radius:8px; }
.dropdown a:hover, .dropdown a:focus-visible{ background:var(--surface-2); }
.dropdown a .di{ width:1.4rem; height:1.4rem; color:var(--red); flex:none; margin-top:.1rem; }
.dropdown a .d-title{ font-weight:700; display:block; font-size:.98rem; color:var(--ink); }
.dropdown a .d-sub{ display:block; font-size:.8rem; color:var(--muted); }
.nav-actions{ display:flex; align-items:center; gap:.6rem; flex:none; }
.theme-toggle{ width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:6px; border:1px solid var(--line-2); color:var(--ink); }
.theme-toggle:hover{ border-color:var(--red); color:var(--red); }
.theme-toggle .sun{ display:var(--logo-white); } .theme-toggle .moon{ display:var(--logo-color); }
.nav-burger{ display:none; width:2.6rem; height:2.6rem; border:1px solid var(--line-2); border-radius:6px; place-items:center; color:var(--ink); }

/* ---------- hero (navy, full-bleed, bold) ---------- */
.hero{ background:var(--band); color:var(--on-band); position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size:22px 22px; }
.hero::after{ content:""; position:absolute; right:-8%; top:-30%; width:46%; height:160%; background:var(--red); opacity:.16; transform:skewX(-12deg); pointer-events:none; }
.hero .wrap{ position:relative; }
.hero-inner{ padding-block:clamp(3.5rem,8vw,7rem); max-width:60rem; }
.hero h1{ color:#fff; margin:1rem 0 1.2rem; }
.hero .kicker{ color:#fff; } .hero .kicker::before{ background:var(--red); }
.hero .lede{ color:var(--band-sub); margin-bottom:2rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; }
.badges{ margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:.7rem; }
.badge{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:.5rem .9rem; font-size:.82rem; font-weight:600; color:#fff; }
.badge svg{ width:1.05rem; height:1.05rem; color:var(--red); }
.hero-sub{ background:var(--band); }   /* page heroes are shorter */
.hero.compact .hero-inner{ padding-block:clamp(2.75rem,6vw,4.5rem); }

/* ---------- section intro ---------- */
.intro{ max-width:50rem; margin-bottom:2.5rem; }
.intro h2{ margin:.7rem 0 0; }
.intro .lede{ margin-top:1rem; }

/* ---------- service / category cards ---------- */
.cards{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); }
.card{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--red); border-radius:12px; padding:1.7rem; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s,border-color .2s; }
a.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.card .ico{ width:2.6rem; height:2.6rem; color:var(--red); margin-bottom:1rem; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--ink-2); font-size:.97rem; flex:1; }
.tags{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem; }
.tags li{ font-size:.72rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--tag-ink); background:var(--tag-bg); border:1px solid var(--tag-bd); border-radius:999px; padding:.22rem .65rem; }
.card .go{ margin-top:1.2rem; }

/* ---------- featured (before/after) ---------- */
.feature{ display:grid; gap:1.75rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:clamp(1.25rem,3vw,2rem); box-shadow:var(--shadow-sm); margin-bottom:2rem; }
@media(min-width:54rem){ .feature{ grid-template-columns:1fr 1.15fr; } }
.feature h3{ font-size:1.5rem; margin-bottom:.5rem; }
.feature p{ color:var(--ink-2); }
.ba{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:10px; border:1px solid var(--line-2); --pos:50%; user-select:none; }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba .ba-before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); z-index:2; }
.ba-line{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.3); z-index:3; transform:translateX(-1px); pointer-events:none; }
.ba-grip{ position:absolute; top:50%; left:var(--pos); width:2.4rem; height:2.4rem; margin:-1.2rem 0 0 -1.2rem; z-index:4; border-radius:999px; background:#fff; color:var(--navy); display:grid; place-items:center; box-shadow:0 3px 12px rgba(0,0,0,.35); pointer-events:none; }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:5; }
.ba-tag{ position:absolute; bottom:.7rem; z-index:3; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:rgba(5,15,30,.62); padding:.2rem .6rem; border-radius:4px; }
.ba-tag.l{ left:.7rem; } .ba-tag.r{ right:.7rem; }

/* ---------- bands / closer ---------- */
.band{ background:var(--band); color:var(--on-band); position:relative; overflow:hidden; }
.band::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--red); }
.band h2,.band h3{ color:#fff; } .band p,.band .lede{ color:var(--band-sub); }
.band .kicker{ color:#fff; }
.closer{ text-align:center; } .closer .lede{ margin-inline:auto; }

/* ---------- about ---------- */
.about-emblem{ display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:clamp(2rem,5vw,3.5rem); box-shadow:var(--shadow-sm); }
.about-emblem img{ width:min(70%,16rem); height:auto; }
.story{ display:grid; gap:2.5rem; align-items:center; } @media(min-width:54rem){ .story{ grid-template-columns:.9fr 1.1fr; } }
.valuerow{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
.valuerow .badge{ color:var(--ink); background:var(--tag-bg); border-color:var(--tag-bd); }
.valuerow .badge svg{ color:var(--red); }

/* ---------- forms ---------- */
.form-card{ background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--red); border-radius:14px; padding:clamp(1.6rem,4vw,2.75rem); box-shadow:var(--shadow); }
.field{ display:grid; gap:.45rem; margin-bottom:1.25rem; }
.field label{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); }
.field input,.field select,.field textarea{ width:100%; padding:.85rem 1rem; min-height:3.1rem; font:inherit; color:var(--ink); background:var(--bg); border:1.5px solid var(--line-2); border-radius:8px; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6675' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent); }
.grid-2{ display:grid; gap:0 1.1rem; } @media(min-width:36rem){ .grid-2{ grid-template-columns:1fr 1fr; } }
.hp{ position:absolute; left:-9999px; }
.form-note{ font-size:.85rem; color:var(--muted); margin-top:.5rem; }

/* ---------- footer ---------- */
.site-footer{ background:var(--surface); border-top:1px solid var(--line); padding-block:3.5rem; }
.foot-grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); }
.foot-grid h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:.9rem; }
.foot-grid ul{ list-style:none; padding:0; display:grid; gap:.55rem; font-size:.95rem; }
.foot-grid a:hover{ color:var(--red); }
.foot-legal{ margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; font-size:var(--fs-sm); color:var(--muted); }
.muted{ color:var(--muted); } .ink-2{ color:var(--ink-2); }
.mt-sm{ margin-top:1rem; } .mt-md{ margin-top:1.5rem; } .center{ text-align:center; }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } html{ scroll-behavior:auto; } }

/* ---------- mobile nav ---------- */
@media (max-width:62rem){
  .nav-burger{ display:grid; }
  .nav-menu{ position:fixed; inset:0 0 0 auto; width:min(88vw,22rem); flex-direction:column; align-items:stretch; gap:0; background:var(--surface); border-left:1px solid var(--line); padding:5.5rem 1rem 2rem; transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; z-index:var(--z-menu); }
  body[data-nav="open"] .nav-menu{ transform:translateX(0); }
  .nav-spacer{ display:none; }
  .nav-item{ border-bottom:1px solid var(--line); }
  .nav-link{ width:100%; justify-content:space-between; padding:.95rem .5rem; font-size:1.05rem; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 .5rem .5rem; min-width:0; max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .nav-item[data-open="true"] .dropdown{ max-height:46rem; }
  .nav-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .2s; z-index:calc(var(--z-menu) - 1); }
  body[data-nav="open"] .nav-scrim{ opacity:1; visibility:visible; }
}
@media (min-width:62.01rem){ .nav-scrim{ display:none; } }

/* ---------- promotions ---------- */
.promos{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.promo{ background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:1.7rem; box-shadow:var(--shadow-sm); }
.promo-tag{ display:inline-flex; align-items:center; gap:.4rem; background:var(--red); color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:999px; margin-bottom:1rem; }
.promo-tag svg{ width:.9rem; height:.9rem; }
.promo h3{ margin-bottom:.45rem; }
.promo p{ color:var(--ink-2); }

/* ---------- cities ---------- */
.cities{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr)); }
.cities li{ font-weight:600; font-size:.92rem; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:.55rem .8rem; }

/* ---------- even grids (avoid orphan cards) ---------- */
.cards.g2, .cards.g3 { grid-template-columns:1fr; }
@media(min-width:46rem){ .cards.g2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:60rem){ .cards.g3{ grid-template-columns:repeat(3,1fr); } }
.cities li{ text-align:center; }
/* hero watermark fills the empty side of the navy hero */
.hero .wrap{ z-index:1; }
.hero-art{ position:absolute; right:-3%; bottom:-14%; width:42%; max-width:30rem; opacity:.07; z-index:0; pointer-events:none; }
@media(max-width:62rem){ .hero-inner{ padding-top:clamp(2rem,7vw,3rem); } .hero-art{ display:none; } }