/* ==========================================================================
   Texas Elite Metal Roofing. Design System
   Brand: Dark Red (#A31621 family) · Dark Blue/Navy (#0A1628 family) · White
   ========================================================================== */

:root{
  /* Brand: sampled from the Texas Elite logo */
  --navy:#2B256B;
  --navy-950:#0F0C24;
  --navy-900:#151132;
  --navy-850:#1B1640;
  --navy-800:#221C52;
  --navy-700:#2B256B;
  --navy-600:#3A3388;
  --navy-line:rgba(255,255,255,.11);

  --red:#FE0000;
  --red-800:#9E0000;
  --red-700:#C20000;
  --red-600:#DD0000;
  --red-500:#FE0000;
  --red-400:#FF3B3B;

  --white:#ffffff;
  --bone:#F4F4F7;
  --bone-2:#E6E6EE;
  --ink:#14122B;
  --ink-soft:#454263;

  /* Semantic (dark by default) */
  --bg:var(--navy-950);
  --bg-alt:var(--navy-900);
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.07);
  --border:var(--navy-line);
  --text:#F2F2F7;
  --text-muted:#A6A3BE;
  --accent:var(--red-500);
  --accent-soft:rgba(254,0,0,.13);

  /* Type: system stack, no webfont request */
  --font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --step--1:clamp(.8rem,.77rem + .15vw,.875rem);
  --step-0:clamp(.95rem,.92rem + .18vw,1.0625rem);
  --step-1:clamp(1.1rem,1.02rem + .38vw,1.3rem);
  --step-2:clamp(1.3rem,1.15rem + .75vw,1.65rem);
  --step-3:clamp(1.65rem,1.35rem + 1.5vw,2.4rem);
  --step-4:clamp(2rem,1.5rem + 2.5vw,3.4rem);
  --step-5:clamp(2.4rem,1.6rem + 4vw,4.6rem);

  /* Space & shape */
  --container:1240px;
  --container-wide:1440px;
  --gutter:clamp(1.1rem,4vw,2.5rem);
  --section-y:clamp(4rem,8vw,7rem);
  --radius-s:6px;
  --radius:10px;
  --radius-l:16px;
  --shadow-1:0 10px 30px -12px rgba(0,0,0,.5);
  --shadow-2:0 30px 70px -40px rgba(0,0,0,.7);

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur:.5s;

  --nav-h:92px;
}

/* Light sections invert the semantic tokens */
.theme-light{
  --bg:var(--bone);
  --bg-alt:var(--bone-2);
  --surface:rgba(10,22,40,.035);
  --surface-2:rgba(10,22,40,.06);
  --border:rgba(10,22,40,.12);
  --text:var(--ink);
  --text-muted:var(--ink-soft);
  --accent-soft:rgba(163,22,33,.1);
  --accent:var(--red-600);
  --shadow-1:0 10px 30px -14px rgba(11,18,32,.25);
  --shadow-2:0 40px 80px -44px rgba(11,18,32,.35);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0;
  background:var(--navy-950);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
/* <picture> only carries the WebP <source>. display:contents drops it out of
   the box tree so the <img> stays the direct flex/grid/block child it was
   before, and every existing img rule keeps applying unchanged. Browsers
   without display:contents fall back to inline, which is picture's default. */
picture{display:contents}
figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1,h2{text-transform:uppercase;letter-spacing:-.005em}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{margin:0 0 1.1em;text-wrap:pretty}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--border);margin:2.5rem 0}
::selection{background:var(--red-500);color:#fff}

:focus-visible{outline:2px solid var(--red-400);outline-offset:3px;border-radius:4px}

/* ---------- Layout ---------- */
.container{width:min(100% - (var(--gutter) * 2),var(--container));margin-inline:auto}
.container--wide{width:min(100% - (var(--gutter) * 2),var(--container-wide))}
.section{position:relative;padding-block:var(--section-y);background:var(--bg);color:var(--text);isolation:isolate}
.section--tight{padding-block:clamp(3rem,5vw,4.5rem)}
.section--flush-top{padding-top:0}
.grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--reverse>*:first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split--reverse>*:first-child{order:0}}

.stack-sm>*+*{margin-top:.75rem}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.measure{max-width:62ch}
.measure-sm{max-width:48ch}
/* Unresolved placeholder in the legal pages. Deliberately loud: bright yellow
   on dark text so it cannot be skimmed past or shipped by accident. Delete the
   marker along with the class once the real value is filled in. */
.legal-flag{
  background:#FFD400;color:#14122B;font-weight:800;
  padding:.12em .5em;border-radius:3px;letter-spacing:.01em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---------- Type helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;
}
.eyebrow--muted{color:var(--text-muted)}
.lead{font-size:var(--step-1);color:var(--text-muted);line-height:1.6}
.muted{color:var(--text-muted)}
.accent{color:var(--accent)}
.display-outline{
  -webkit-text-stroke:1.5px currentColor;color:transparent;
}
.section-head{max-width:720px;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p:last-child{margin-bottom:0}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--red-600);--btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.7rem;border-radius:100px;border:1px solid transparent;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:.02em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(120deg,var(--red-500),var(--red-400));
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn:hover{box-shadow:0 18px 40px -18px rgba(193,29,42,.85)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:scale(.97)}
.btn .btn__icon{transition:transform .35s var(--ease)}
.btn:hover .btn__icon{transform:translateX(4px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);border-color:var(--border)}
.btn--ghost::after{background:var(--text)}
.btn--ghost:hover{--btn-fg:var(--bg);border-color:transparent;box-shadow:none}
.btn--light{--btn-bg:#fff;--btn-fg:var(--ink)}
.btn--light::after{background:var(--red-600)}
.btn--light:hover{--btn-fg:#fff}
.btn--lg{padding:1.15rem 2.1rem;font-size:1rem}
.btn--sm{padding:.7rem 1.2rem;font-size:.82rem}
.btn--block{display:flex;width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:.88rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
}
.link-arrow svg{transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

.pill{
  display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .95rem;
  border:1px solid var(--border);border-radius:100px;background:var(--surface);
  font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--text-muted);
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

/* Badges. The trust row under the stats on the home page, repeated on
   services, about and contact. Same pill language as .pill and .tag, with
   room for the inline SVG that leads each label. Written in semantic vars
   only, so the two blocks that sit inside a .theme-light section pick up the
   light palette without a second rule. */
.badges{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1.05rem;
  border:1px solid var(--border);border-radius:100px;background:var(--surface);
  font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--text-muted);
  transition:color .3s,border-color .3s,background-color .3s;
}
.badge svg{flex:none;width:17px;height:17px;color:var(--accent)}
.badge:hover{color:var(--text);border-color:var(--accent);background:var(--surface-2)}

/* ==========================================================================
   Custom cursor (pointer-fine devices only)
   ========================================================================== */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:998;opacity:0;transition:opacity .3s}
.cursor{
  width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,255,255,.55);border-radius:50%;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),opacity .3s;
  display:grid;place-items:center;
}
.cursor__label{
  font-family:var(--font-display);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s var(--ease);white-space:nowrap;
}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--red-500);border-radius:50%}
body.cursor-ready .cursor,body.cursor-ready .cursor-dot{opacity:1}
body.cursor-hover .cursor{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(254,0,0,.16);border-color:var(--red-400)}
body.cursor-view .cursor{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--red-600);border-color:transparent}
body.cursor-view .cursor__label{opacity:1;transform:scale(1)}
body.cursor-hover .cursor-dot{opacity:0}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* Scroll progress bar. The markup and the JS that drives it (initProgress)
   were already in place; this is the rule that makes it visible. */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--red-600),var(--red-400));z-index:900;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background-color .4s var(--ease),backdrop-filter .4s,box-shadow .4s,transform .5s var(--ease),height .4s var(--ease);
}
.nav::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(5,11,22,.82);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--navy-line);transition:opacity .4s var(--ease);
}
.nav.is-stuck::after{opacity:1}
.nav.is-hidden{transform:translateY(-105%)}
.nav__inner{width:min(100% - (var(--gutter) * 2),var(--container-wide));margin-inline:auto;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand__glyph{width:38px;height:38px;flex-shrink:0}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-display);font-weight:900;font-size:1.02rem;letter-spacing:-.02em;color:#fff;text-transform:uppercase}
.brand__name span{color:var(--red-500)}
.brand__sub{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}

.nav__links{display:flex;align-items:center;gap:.35rem;margin-left:auto;list-style:none;padding:0;margin-bottom:0}
.nav__links li{margin:0}
.nav__link{
  position:relative;display:block;padding:.55rem .9rem;border-radius:100px;
  font-size:.86rem;font-weight:600;color:rgba(238,242,248,.78);
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.32rem;height:1.5px;background:var(--red-500);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav__link:hover{color:#fff}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link.is-active{color:#fff}
.nav__link.is-active::after{transform:scaleX(1)}
.nav__actions{display:flex;align-items:center;gap:.8rem;margin-left:1rem}
.nav__phone{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);
  font-weight:700;font-size:.9rem;color:#fff;white-space:nowrap;
}
.nav__phone svg{color:var(--red-500)}
@media (max-width:1120px){.nav__links,.nav__actions .btn{display:none}}
@media (max-width:560px){.nav__phone span{display:none}}

.nav__toggle{
  display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--navy-line);
  background:rgba(255,255,255,.04);cursor:pointer;position:relative;flex-shrink:0;
}
.nav__toggle i{
  position:absolute;left:13px;width:20px;height:1.5px;background:#fff;transition:transform .4s var(--ease),opacity .3s;
}
.nav__toggle i:nth-child(1){top:19px}
.nav__toggle i:nth-child(2){top:25px;width:13px}
body.menu-open .nav__toggle i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .nav__toggle i:nth-child(2){width:20px;transform:translateY(-3px) rotate(-45deg)}
@media (max-width:1120px){.nav__toggle{display:block;margin-left:auto}}

/* Mobile drawer */
.menu{
  position:fixed;inset:0;z-index:790;background:var(--navy-950);
  padding:calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  display:flex;flex-direction:column;
  clip-path:circle(0% at calc(100% - 46px) 40px);
  transition:clip-path .7s var(--ease);
  overflow-y:auto;
}
body.menu-open .menu{clip-path:circle(150% at calc(100% - 46px) 40px)}
.menu__list{list-style:none;padding:0;margin:0 0 auto}
.menu__list li{overflow:hidden;margin:0}
.menu__list a{
  display:block;padding:.35rem 0;
  font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,9vw,3.2rem);
  letter-spacing:-.03em;color:#fff;line-height:1.15;
  transform:translateY(110%);transition:transform .6s var(--ease),color .3s;
}
body.menu-open .menu__list a{transform:translateY(0)}
.menu__list li:nth-child(1) a{transition-delay:.12s}
.menu__list li:nth-child(2) a{transition-delay:.18s}
.menu__list li:nth-child(3) a{transition-delay:.24s}
.menu__list li:nth-child(4) a{transition-delay:.3s}
.menu__list li:nth-child(5) a{transition-delay:.36s}
.menu__list li:nth-child(6) a{transition-delay:.42s}
.menu__list a:hover,.menu__list a.is-active{color:var(--red-500)}
.menu__list a .idx{font-size:.7rem;vertical-align:super;color:var(--red-500);letter-spacing:.1em;margin-right:.6rem;font-family:var(--font-body)}
.menu__foot{border-top:1px solid var(--navy-line);padding-top:1.5rem;margin-top:2rem;display:grid;gap:1rem}
.menu__foot .btn{width:100%}
@media (min-width:1121px){.menu{display:none}}

/* ==========================================================================
   Reveal animations
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.09s}
[data-reveal-delay="2"]{transition-delay:.18s}
[data-reveal-delay="3"]{transition-delay:.27s}
[data-reveal-delay="4"]{transition-delay:.36s}
[data-reveal-delay="5"]{transition-delay:.45s}
[data-reveal-delay="6"]{transition-delay:.54s}

/* Clip-reveal for media */
.reveal-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.reveal-clip.is-in{clip-path:inset(0 0 0% 0)}

/* Split text (words / chars) */

.float-y{animation:floatY 7s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;min-height:clamp(640px,100svh,1000px);display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(2rem,6vw,4.5rem));padding-bottom:clamp(3rem,7vw,6rem);
  background:var(--navy-950);overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero__bg img,.hero__bg svg{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 15% 20%,rgba(5,11,22,.35) 0%,rgba(5,11,22,.88) 55%,var(--navy-950) 100%),
    linear-gradient(180deg,rgba(5,11,22,.7),rgba(5,11,22,.2) 40%,var(--navy-950) 96%);
}
.hero__glow{
  position:absolute;z-index:-2;width:min(70vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(163,22,33,.42),transparent 68%);
  filter:blur(30px);top:-18%;right:-14%;animation:floatY 12s ease-in-out infinite;
}
.hero__grid{
  position:absolute;inset:0;z-index:-2;opacity:.5;
  background-image:linear-gradient(var(--navy-line) 1px,transparent 1px),linear-gradient(90deg,var(--navy-line) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 78%);
}
.hero__inner{position:relative;width:min(100% - (var(--gutter) * 2),var(--container-wide));margin-inline:auto}
.hero__layout{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:1000px){.hero__layout{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.6rem,8.2vw,6.4rem);margin-bottom:1.2rem}
.hero h1 .accent{
  background:linear-gradient(100deg,var(--red-400),var(--red-600) 60%,#ff6b6b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{font-size:clamp(1rem,1.6vw,1.2rem);color:var(--text-muted);max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;align-items:center}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--navy-line)}
.hero__meta-item .n{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:#fff;line-height:1}
.hero__meta-item .l{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-top:.45rem}


/* Page header (interior pages) */
.page-head{
  position:relative;padding-top:calc(var(--nav-h) + clamp(3.5rem,8vw,6.5rem));
  padding-bottom:clamp(3rem,6vw,5rem);background:var(--navy-950);overflow:hidden;isolation:isolate;
}
.page-head__bg{position:absolute;inset:0;z-index:-2;opacity:.22}
.page-head__bg img,.page-head__bg svg{width:100%;height:100%;object-fit:cover}
.page-head::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(5,11,22,.75),rgba(5,11,22,.55) 45%,var(--navy-950));
}
.page-head h1{font-size:clamp(2.4rem,7vw,5rem);margin-bottom:1rem}
.breadcrumbs{display:flex;gap:.5rem;align-items:center;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1.4rem}
.breadcrumbs a:hover{color:var(--red-400)}
.breadcrumbs span{opacity:.5}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-l);padding:clamp(1.5rem,2.6vw,2.2rem);overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),border-color .4s,background-color .4s;
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(193,29,42,.16),transparent 62%);
}
.card:hover{transform:translateY(-6px);border-color:rgba(193,29,42,.42)}
.card:hover::before{opacity:1}
.card__icon{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.3rem;
  background:var(--accent-soft);color:var(--accent);border:1px solid rgba(193,29,42,.24);
  transition:transform .5s var(--ease),background-color .4s;
}
.card:hover .card__icon{transform:translateY(-3px) rotate(-6deg);background:var(--red-600);color:#fff}
.card h3{margin-bottom:.6rem}
.card p{color:var(--text-muted);margin-bottom:1rem}
.card__num{
  position:absolute;top:1.1rem;right:1.4rem;font-family:var(--font-display);font-weight:900;
  font-size:3.4rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--border);z-index:-1;
  transition:-webkit-text-stroke-color .4s;
}
.card:hover .card__num{-webkit-text-stroke-color:rgba(193,29,42,.4)}
.card__list{list-style:none;padding:0;margin:0 0 1.2rem;font-size:.9rem}
.card__list li{position:relative;padding-left:1.5rem;color:var(--text-muted);margin-bottom:.5rem}
.card__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;
  background:var(--accent);transform:rotate(45deg);
}

/* Service card with media */
.service-card{position:relative;border-radius:var(--radius-l);overflow:hidden;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column}
.service-card__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.service-card__media img,.service-card__media svg{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.service-card:hover .service-card__media img,.service-card:hover .service-card__media svg{transform:scale(1.07)}
.service-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,11,22,.75))}
.service-card__tag{
  position:absolute;z-index:2;top:1rem;left:1rem;background:rgba(5,11,22,.7);backdrop-filter:blur(8px);
  border:1px solid var(--navy-line);border-radius:100px;padding:.35rem .85rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:600;
}
.service-card__body{padding:clamp(1.4rem,2.4vw,2rem);display:flex;flex-direction:column;flex:1}
.service-card__body h3{margin-bottom:.55rem}
.service-card__body p{color:var(--text-muted);font-size:.94rem}
.service-card__body .link-arrow{margin-top:auto;padding-top:.6rem}

/* ==========================================================================
   Stat / trust strip
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-l);overflow:hidden}
.stat{background:var(--bg);padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2vw,1.8rem);text-align:center;transition:background-color .4s}
.stat:hover{background:var(--surface-2)}
.stat__num{font-family:var(--font-display);font-weight:900;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1;color:#fff;letter-spacing:-.03em}
.theme-light .stat__num{color:var(--ink)}
.stat__num .suffix{color:var(--accent)}
.stat__label{margin-top:.7rem;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}


/* ==========================================================================
   Gallery
   ========================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.4rem}
.filter{
  padding:.6rem 1.2rem;border-radius:100px;border:1px solid var(--border);background:transparent;
  color:var(--text-muted);font-size:.84rem;font-weight:600;cursor:pointer;
  transition:color .3s,border-color .3s,background-color .3s,transform .3s var(--ease);
}
.filter:hover{color:var(--text);transform:translateY(-2px)}
.filter.is-active{background:var(--red-600);border-color:var(--red-600);color:#fff}

.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.7rem,1.4vw,1.1rem)}
.gallery__item{
  position:relative;grid-column:span 4;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  cursor:pointer;background:var(--surface);border:1px solid var(--border);
  transition:opacity .45s var(--ease),transform .45s var(--ease),filter .45s;
}
.gallery__item.span-6{grid-column:span 6}
.gallery__item.span-8{grid-column:span 8}
.gallery__item.span-12{grid-column:span 12}
.gallery__item.tall{aspect-ratio:3/4}
.gallery__item.wide{aspect-ratio:16/9}
.gallery__item img,.gallery__item svg{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gallery__item:hover img,.gallery__item:hover svg{transform:scale(1.08)}
.gallery__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,11,22,.82));opacity:.75;transition:opacity .4s}
.gallery__item:hover::after{opacity:1}
.gallery__cap{position:absolute;z-index:2;left:1rem;right:1rem;bottom:1rem;transform:translateY(8px);opacity:.85;transition:transform .45s var(--ease),opacity .4s}
.gallery__item:hover .gallery__cap{transform:translateY(0);opacity:1}
.gallery__cap .t{font-family:var(--font-display);font-weight:700;color:#fff;font-size:1rem}
.gallery__cap .s{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.gallery__item.is-hidden{display:none}
@media (max-width:900px){.gallery__item,.gallery__item.span-6,.gallery__item.span-8,.gallery__item.span-12{grid-column:span 6}}
@media (max-width:560px){.gallery__item,.gallery__item.span-6,.gallery__item.span-8,.gallery__item.span-12{grid-column:span 12}}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:950;background:rgba(5,11,22,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:var(--gutter);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__figure{max-width:min(1100px,92vw);transform:scale(.94);transition:transform .5s var(--ease)}
.lightbox.is-open .lightbox__figure{transform:scale(1)}
.lightbox__figure img,.lightbox__figure svg{width:100%;max-height:76vh;object-fit:contain;border-radius:var(--radius)}
.lightbox__cap{text-align:center;margin-top:1rem;color:var(--text-muted);font-size:.9rem}
.lightbox__close,.lightbox__nav{
  position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .3s,transform .3s var(--ease);
}
.lightbox__close{top:1.4rem;right:1.4rem}
.lightbox__nav.prev{left:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox__nav.next{right:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--red-600);border-color:var(--red-600)}

/* Before / after slider */

/* ==========================================================================
   Process / timeline
   ========================================================================== */
.process{position:relative}
.process__line{
  position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--border);transform:translateX(-50%);
}
.process__line i{display:block;width:100%;height:var(--fill,0%);background:linear-gradient(var(--red-600),var(--red-400));transition:height .2s linear}
.pstep{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;gap:1rem;padding-block:clamp(1rem,2.5vw,1.8rem)}
.pstep__panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:clamp(1.3rem,2.4vw,2rem);transition:border-color .4s,transform .5s var(--ease)}
.pstep:hover .pstep__panel{border-color:rgba(193,29,42,.4);transform:translateY(-4px)}
.pstep__panel h3{margin-bottom:.4rem;font-size:var(--step-1)}
.pstep__panel p{margin:0;color:var(--text-muted);font-size:.94rem}
.pstep__dot{
  justify-self:center;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--border);font-family:var(--font-display);font-weight:900;font-size:1.15rem;
  color:var(--text);position:relative;z-index:2;transition:background-color .4s,color .4s,border-color .4s,transform .5s var(--ease);
}
.pstep.is-in .pstep__dot{background:var(--red-600);border-color:var(--red-600);color:#fff}
.pstep--left .pstep__panel{grid-column:1;grid-row:1}
.pstep--right .pstep__panel{grid-column:3;grid-row:1}
.pstep--right .pstep__panel{text-align:left}
.pstep__dot{grid-column:2;grid-row:1}
@media (max-width:820px){
  .process__line{left:33px}
  .pstep{grid-template-columns:66px minmax(0,1fr);gap:1.2rem}
  .pstep__dot{grid-column:1;justify-self:start}
  .pstep--left .pstep__panel,.pstep--right .pstep__panel{grid-column:2}
}

/* Numbered step cards */
.step-card{position:relative;padding-left:clamp(3.4rem,6vw,4.4rem)}
.step-card[data-step]::before{
  content:attr(data-step);
  position:absolute;left:0;top:-.15em;font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.6rem,3vw,2.2rem);color:transparent;-webkit-text-stroke:1px var(--accent);
}
.step-card:not([data-step]){padding-left:0}
.step-card h4{margin-bottom:.35rem}
.step-card p{color:var(--text-muted);font-size:.93rem;margin:0}

/* ==========================================================================
   Accordion (FAQ / service details)
   ========================================================================== */
.acc{border-top:1px solid var(--border)}
.acc__item{border-bottom:1px solid var(--border)}
.acc__trigger{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:1.4rem 3rem 1.4rem 0;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,1.9vw,1.22rem);color:var(--text);
  transition:color .3s;letter-spacing:-.01em;
}
.acc__trigger:hover{color:var(--accent)}
.acc__trigger::after,.acc__trigger::before{
  content:"";position:absolute;right:.6rem;top:50%;background:currentColor;transition:transform .4s var(--ease),background-color .3s;
}
.acc__trigger::before{width:16px;height:1.5px;transform:translateY(-50%)}
.acc__trigger::after{width:1.5px;height:16px;right:1.32rem;transform:translateY(-50%) scaleY(1)}
.acc__item.is-open .acc__trigger{color:var(--accent)}
.acc__item.is-open .acc__trigger::after{transform:translateY(-50%) scaleY(0)}
.acc__panel{overflow:hidden;height:0;transition:height .45s var(--ease)}
.acc__inner{padding:0 3rem 1.5rem 0;color:var(--text-muted)}
.acc__inner p:last-child{margin-bottom:0}

/* ==========================================================================
   Blog
   ========================================================================== */
.post-card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-l);overflow:hidden;height:100%;
  transition:transform .5s var(--ease),border-color .4s;
}
.post-card:hover{transform:translateY(-6px);border-color:rgba(193,29,42,.42)}
.post-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-800)}
.post-card__media img,.post-card__media svg{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.post-card:hover .post-card__media img,.post-card:hover .post-card__media svg{transform:scale(1.06)}
.post-card__cat{
  position:absolute;top:.9rem;left:.9rem;z-index:2;padding:.32rem .8rem;border-radius:100px;
  background:var(--red-600);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.post-card__body{padding:clamp(1.3rem,2.2vw,1.7rem);display:flex;flex-direction:column;flex:1}
.post-card__meta{display:flex;gap:.9rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.75rem}
.post-card h3{font-size:var(--step-1);margin-bottom:.55rem;letter-spacing:-.02em}
.post-card p{font-size:.92rem;color:var(--text-muted);margin-bottom:1.1rem}
.post-card .link-arrow{margin-top:auto;font-size:.78rem}
.post-card.is-hidden{display:none}

.post-featured{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--border);
  border-radius:var(--radius-l);overflow:hidden;background:var(--surface);
}
.post-featured__media{position:relative;min-height:340px;overflow:hidden}
.post-featured__media img,.post-featured__media svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post-featured:hover .post-featured__media img,.post-featured:hover .post-featured__media svg{transform:scale(1.05)}
.post-featured__body{padding:clamp(1.8rem,3.4vw,3rem);display:flex;flex-direction:column;justify-content:center}
@media (max-width:860px){.post-featured{grid-template-columns:1fr}.post-featured__media{min-height:240px;position:relative}}

.search-field{position:relative;max-width:420px;width:100%}
.search-field input{
  width:100%;padding:.9rem 1.1rem .9rem 2.9rem;border-radius:100px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:.92rem;transition:border-color .3s,background-color .3s;
}
.search-field input::placeholder{color:var(--text-muted)}
.search-field input:focus{outline:none;border-color:var(--red-500)}
.search-field svg{position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);color:var(--text-muted)}
.blog-toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:2.4rem}
.blog-toolbar .filters{margin-bottom:0;justify-content:flex-start}
.empty-state{text-align:center;padding:4rem 1rem;color:var(--text-muted);display:none}
.empty-state.is-visible{display:block}

/* Article */
.article{max-width:760px;margin-inline:auto}
.article__body{font-size:1.06rem;line-height:1.78}
.article__body h2{font-size:var(--step-3);margin-top:2.6rem;margin-bottom:.8rem}
.article__body h3{font-size:var(--step-2);margin-top:2rem;margin-bottom:.6rem}
.article__body p{margin-bottom:1.35em;color:var(--text-muted)}
.article__body strong{color:var(--text);font-weight:600}
.article__body ul,.article__body ol{color:var(--text-muted);margin-bottom:1.5em;padding-left:1.3em}
.article__body li::marker{color:var(--accent)}
.article__body blockquote{
  margin:2rem 0;padding:1.4rem 1.6rem;border-left:3px solid var(--red-600);
  background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;color:var(--text);font-size:1.08rem;
}
.article__body blockquote p:last-child{margin-bottom:0;color:var(--text)}
.article__body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article__hero{border-radius:var(--radius-l);overflow:hidden;margin-bottom:2.4rem;aspect-ratio:16/8}
.article__hero img,.article__hero svg{width:100%;height:100%;object-fit:cover}
.article__meta{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;padding-bottom:1.6rem;margin-bottom:2rem;border-bottom:1px solid var(--border);font-size:.82rem;color:var(--text-muted)}
.article__meta .who{display:flex;align-items:center;gap:.7rem;color:var(--text);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem}
.tag{padding:.4rem .9rem;border-radius:100px;border:1px solid var(--border);font-size:.76rem;color:var(--text-muted);transition:color .3s,border-color .3s}
.tag:hover{color:var(--accent);border-color:var(--accent)}
.share{display:flex;gap:.6rem;align-items:center;margin-top:2rem}
.share span{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.share a{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--text-muted);transition:all .3s var(--ease)}
.share a:hover{background:var(--red-600);border-color:var(--red-600);color:#fff;transform:translateY(-2px)}

.toc{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.4rem;font-size:.9rem;
}
.toc h4{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.9rem}
.toc ul{list-style:none;padding:0;margin:0}
.toc li{margin-bottom:.55rem}
.toc a{color:var(--text-muted);transition:color .3s;display:block;line-height:1.4}
.toc a:hover,.toc a.is-active{color:var(--accent)}

/* ==========================================================================
   Forms
   ========================================================================== */
.form{display:grid;gap:1.1rem}
.field{position:relative;display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:.95rem 1.1rem;border-radius:var(--radius-s);border:1px solid var(--border);
  background:var(--surface);color:var(--text);transition:border-color .3s,background-color .3s,box-shadow .3s;
}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa8bd' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 1rem center}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red-500);box-shadow:0 0 0 3px rgba(193,29,42,.14)}
/* The open dropdown is drawn by the OS, and it does not inherit the closed
   control's near-transparent var(--surface). Left alone it composites to
   near-white behind near-white var(--text), so the options read as blank.
   Give the list an opaque background of its own, and declare the control's
   scheme so the popup chrome and hover state match it. */
.field select{color-scheme:dark}
.field select option,.field select optgroup{background-color:var(--navy-900);color:var(--text)}
.theme-light .field select{color-scheme:light}
.theme-light .field select option,.theme-light .field select optgroup{background-color:#fff;color:var(--ink)}

.field input::placeholder,.field textarea::placeholder{color:rgba(154,168,189,.65)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#ff5c5c}
.field__error{font-size:.76rem;color:#ff7b7b;display:none}
.field.has-error .field__error{display:block}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:620px){.form__row{grid-template-columns:1fr}}
.form__note{font-size:.78rem;color:var(--text-muted)}
.form__success{
  display:none;padding:1.2rem 1.4rem;border-radius:var(--radius);border:1px solid rgba(61,220,132,.4);
  background:rgba(61,220,132,.1);color:var(--text);font-size:.92rem;
}
.form__success.is-visible{display:block;animation:popIn .5s var(--ease)}
.form__error{
  display:none;padding:1.2rem 1.4rem;border-radius:var(--radius);border:1px solid rgba(255,92,92,.45);
  background:rgba(255,92,92,.1);color:var(--text);font-size:.92rem;
}
.form__error.is-visible{display:block;animation:popIn .5s var(--ease)}
/* Honeypot wrapper. Kept out of sight, out of the tab order and off the
   accessibility tree, without display:none (which some bots skip). */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@keyframes popIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.checkbox{display:flex;gap:.7rem;align-items:flex-start;font-size:.84rem;color:var(--text-muted)}
.checkbox input{width:18px;height:18px;margin-top:.2rem;accent-color:var(--red-600);flex-shrink:0}
/* main.js puts has-error on the .checkbox when a required box is left
   unticked. Without these two rules that failure is completely invisible,
   which matters now that the form carries a required box and an optional
   one side by side. Same error colours as the .field rules above. */
.checkbox.has-error{color:#ff7b7b}
.checkbox.has-error input{outline:2px solid #ff5c5c;outline-offset:2px}
/* Required SMS disclosures under the consent box. Pulled up so it reads as
   part of the checkbox rather than as a separate form row. */
.form__fineprint{
  font-size:.72rem;line-height:1.55;color:var(--text-muted);
  margin:-.6rem 0 0;padding-left:1.9rem;
}
.form__fineprint a{color:var(--text-muted);text-decoration:underline}
.form__fineprint a:hover{color:var(--text)}

.form-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  padding:clamp(1.5rem,3vw,2.6rem);position:relative;overflow:hidden;
}
.form-panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red-600),var(--red-400),transparent);
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-l);isolation:isolate;
  width:min(100%,1020px);margin-inline:auto;
  padding:clamp(1.9rem,4vw,3rem);text-align:center;
  border:1px solid rgba(255,255,255,.14);
  /* deep, low-glare red so white type carries the section */
  background:linear-gradient(140deg,#5F0000 0%,#8E0000 55%,#6B0000 100%);
  /* room at the bottom for the builder figure */
  padding-bottom:clamp(6rem,10vw,8rem);
}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);
}
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1.4px,transparent 1.4px),
    linear-gradient(90deg,rgba(255,255,255,.5) 1.4px,transparent 1.4px);
  background-size:176px 176px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
}

/* ---- The builder: hard-hatted figure standing in front of a roof ---- */
.builder{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  width:min(360px,74vw);z-index:2;pointer-events:none;
}
.builder svg{width:100%;height:auto;display:block;overflow:visible}
.builder__roof{opacity:.5}
@media (max-width:620px){.builder{width:min(260px,72vw)}}

.cta-band h2{color:#fff;margin-bottom:.7rem;font-size:clamp(1.75rem,3.4vw,2.7rem);max-width:20ch;margin-inline:auto}
.cta-band p{color:rgba(255,255,255,.92);max-width:50ch;margin-inline:auto;font-size:.98rem}
.cta-band .btn--light{--btn-fg:#8E0000}
.cta-band .btn--ghost{--btn-fg:#fff;border-color:rgba(255,255,255,.45)}
.cta-band .btn--ghost::after{background:#fff}
.cta-band .btn--ghost:hover{--btn-fg:#8E0000}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--navy-950);border-top:1px solid var(--navy-line);padding-top:clamp(3rem,6vw,5rem);color:#eef2f8}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(1.6rem,3vw,3rem)}
@media (max-width:960px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer h5{font-family:var(--font-display);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#9aa8bd;margin-bottom:1.1rem}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.6rem}
.footer a{color:rgba(238,242,248,.76);font-size:.92rem;transition:color .3s,padding-left .3s var(--ease)}
.footer a:hover{color:var(--red-400);padding-left:5px}
.footer__about p{color:#9aa8bd;font-size:.92rem;max-width:38ch}
.footer__contact li{display:flex;gap:.7rem;align-items:flex-start;color:rgba(238,242,248,.76);font-size:.92rem}
.footer__contact svg{color:var(--red-500);flex-shrink:0;margin-top:.28rem}
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--navy-line);padding:1.6rem 0;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.82rem;color:#7d8ba1;
}
.footer__bottom a:hover{color:var(--red-400)}
.socials{display:flex;gap:.6rem}
.socials a{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--navy-line);display:grid;place-items:center;
  color:#9aa8bd;transition:all .35s var(--ease);padding:0;
}
.socials a:hover{background:var(--red-600);border-color:var(--red-600);color:#fff;transform:translateY(-3px)}

/* Sticky mobile call bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:700;display:none;
  background:rgba(5,11,22,.94);backdrop-filter:blur(14px);border-top:1px solid var(--navy-line);
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));gap:.6rem;
  transform:translateY(110%);transition:transform .5s var(--ease);
}
.callbar.is-visible{transform:translateY(0)}
.callbar .btn{flex:1;padding:.85rem 1rem;font-size:.85rem}
@media (max-width:760px){.callbar{display:flex}body{padding-bottom:0}}

/* Back to top */
/* ------------------------------------------------------- Privacy notice bar
   US opt-out notice, not a consent wall. position:fixed so showing it causes
   no layout shift: page content never moves. z-index sits above the call bar
   and the back-to-top button (700) and below the gallery lightbox (950). */
.cookie-notice{
  position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;
  background:var(--navy-900);border-top:1px solid var(--border);
  padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  box-shadow:0 -18px 50px -30px rgba(0,0,0,.9);
}
.cookie-notice.is-open{display:block;animation:cookieUp .45s var(--ease)}
@keyframes cookieUp{from{transform:translateY(100%)}to{transform:none}}
.cookie-notice:focus-visible{outline:2px solid var(--red-400);outline-offset:-4px}
.cookie-notice__inner{
  max-width:var(--container-wide);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.4rem;
}
.cookie-notice__text{margin:0;font-size:.84rem;line-height:1.55;color:var(--text-muted);max-width:68ch}
.cookie-notice__text a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.cookie-notice__status{display:block;margin-top:.35rem;color:var(--text);font-weight:600}
.cookie-notice__actions{display:flex;flex-wrap:wrap;gap:.6rem;flex-shrink:0}
@media (max-width:760px){
  .cookie-notice__inner{flex-direction:column;align-items:stretch}
  .cookie-notice__actions{width:100%}
  .cookie-notice__actions .btn{flex:1 1 12rem;justify-content:center;text-align:center}
}
/* Lift the sticky call bar and the back-to-top button while the notice is up,
   so a cookie message never sits on top of the phone number. --cookie-h is
   measured and set by main.js from the notice's real height. */
body.has-cookie-notice .callbar{bottom:var(--cookie-h,96px)}
body.has-cookie-notice .to-top{bottom:calc(var(--cookie-h,96px) + 1rem)}

/* Footer control that must read as a link but behave as a button. */
.footer .linklike{
  background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;text-align:left;
  color:rgba(238,242,248,.76);font-size:.92rem;
  transition:color .3s,padding-left .3s var(--ease);
}
.footer .linklike:hover{color:var(--red-400);padding-left:5px}

.to-top{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:700;width:50px;height:50px;border-radius:50%;
  border:1px solid var(--navy-line);background:rgba(5,11,22,.8);backdrop-filter:blur(10px);color:#fff;
  display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s,visibility .4s,transform .4s var(--ease),background-color .3s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--red-600);border-color:var(--red-600)}
@media (max-width:760px){.to-top{bottom:5.2rem}}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1001;padding:.9rem 1.3rem;background:var(--red-600);color:#fff;
  border-radius:0 0 var(--radius-s) 0;font-weight:600;
}
.skip-link:focus{left:0}

/* Misc */
.media-frame{position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border)}
.media-frame img,.media-frame svg{width:100%;height:100%;object-fit:cover;display:block}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--sq{aspect-ratio:1}
.media-frame--wide{aspect-ratio:16/9}
.floating-card{
  position:absolute;background:rgba(5,11,22,.78);backdrop-filter:blur(14px);border:1px solid var(--navy-line);
  border-radius:var(--radius);padding:1rem 1.2rem;box-shadow:var(--shadow-1);
}
.theme-light .floating-card{background:rgba(255,255,255,.9);border-color:rgba(10,22,40,.1);color:var(--ink)}

/* ==========================================================================
   Accessibility / motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .reveal-clip{clip-path:none !important}
}
@media print{
  .nav,.menu,.callbar,.to-top,.cursor,.cursor-dot{display:none !important}
  body{background:#fff;color:#000}
}

/* Article layout with sidebar table of contents */
.article-layout{display:grid;grid-template-columns:minmax(0,760px) 240px;gap:clamp(2rem,4vw,3rem);justify-content:center;align-items:start}
.toc-wrap{position:sticky;top:calc(var(--nav-h) + 24px)}
@media (max-width:1080px){
  .article-layout{grid-template-columns:minmax(0,760px);justify-content:center}
  .toc-wrap{display:none}
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ==========================================================================
   Brand mark (the real Texas Elite logo)
   ========================================================================== */
.brand{display:flex;align-items:center;gap:.85rem;flex-shrink:0}
.brand__logo{height:64px;width:auto;display:block;flex-shrink:0}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{
  font-family:var(--font-display);font-weight:800;font-size:1.12rem;color:#fff;
  text-transform:uppercase;letter-spacing:.01em;
}
.brand__sub{
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-muted);margin-top:4px;
}
.footer .brand__logo{height:78px}
@media (max-width:900px){.brand__logo{height:54px}.brand__name{font-size:1rem}}
@media (max-width:420px){.brand__text{display:none}}

/* ==========================================================================
   Hero with a real photograph
   ========================================================================== */
.hero__photo{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__grid{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.17) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.17) 1px,transparent 1px);
  background-size:clamp(56px,5.5vw,88px) clamp(56px,5.5vw,88px);
  mask-image:radial-gradient(145% 115% at 26% 45%,#000 0%,rgba(0,0,0,.85) 55%,transparent 95%);
  -webkit-mask-image:radial-gradient(145% 115% at 26% 45%,#000 0%,rgba(0,0,0,.85) 55%,transparent 95%);
}
/* heavier ruled lines every fourth cell, like a framing grid */
.hero__grid::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(254,0,0,.34) 1.4px,transparent 1.4px),
    linear-gradient(90deg,rgba(254,0,0,.34) 1.4px,transparent 1.4px);
  background-size:calc(clamp(56px,5.5vw,88px) * 4) calc(clamp(56px,5.5vw,88px) * 4);
}
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(15,12,36,.94) 0%,rgba(15,12,36,.82) 42%,rgba(15,12,36,.42) 72%,rgba(15,12,36,.6) 100%),
    linear-gradient(180deg,rgba(15,12,36,.7),transparent 30%,rgba(15,12,36,.85));
}
@media (max-width:900px){
  .hero__photo::after{background:linear-gradient(180deg,rgba(15,12,36,.78),rgba(15,12,36,.9))}
}

/* ==========================================================================
   Hail facts (from the brochure's industry overview)
   ========================================================================== */
.fact{
  border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1.4rem;
}
.fact__stat{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;color:var(--text);margin-bottom:.5rem;
}
.fact p{margin:0;color:var(--text-muted);font-size:.95rem}

/* ==========================================================================
   Brochure download + YouTube
   ========================================================================== */
.doc-card{
  display:flex;gap:1.2rem;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  padding:clamp(1.2rem,2.4vw,1.8rem);transition:border-color .3s,transform .3s var(--ease);
}
.doc-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.doc-card > span:last-child{display:block}
.doc-card__icon{
  width:54px;height:54px;flex-shrink:0;border-radius:var(--radius-s);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);border:1px solid rgba(254,0,0,.25);
}
.doc-card h3{margin:0 0 .25rem;font-size:var(--step-1);text-transform:none}
.doc-card p{margin:0;font-size:.9rem;color:var(--text-muted)}

/* Featured video section */
.video-section{background:var(--bg)}
.channel-card--wide{max-width:1180px;margin-inline:auto}
.channel-card--wide .channel-card__play{width:96px;height:96px}

.video-embed{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid var(--border);background:var(--navy-800);
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.channel-card{
  display:block;position:relative;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
  transition:border-color .3s,transform .35s var(--ease);
}
.channel-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.channel-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.channel-card__media img{width:100%;height:100%;object-fit:cover}
.channel-card__media::after{content:"";position:absolute;inset:0;background:rgba(15,12,36,.55)}
.channel-card__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:74px;height:74px;border-radius:50%;background:var(--red-500);color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 34px rgba(254,0,0,.45);
  transition:transform .35s var(--ease);
}
.channel-card:hover .channel-card__play{transform:translate(-50%,-50%) scale(1.08)}
.channel-card__body{display:block;padding:1.3rem 1.5rem}
.channel-card__body h3{margin:0 0 .3rem;font-size:var(--step-1);text-transform:none}
.channel-card__body p{margin:0;color:var(--text-muted);font-size:.92rem}

/* Owner card */
.owner{display:flex;gap:1.1rem;align-items:center;margin-top:2rem}
.owner__mark{height:64px;width:auto;flex-shrink:0}
.owner__name{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin:0}
.owner__title{margin:.15rem 0 0;font-size:.85rem;color:var(--text-muted);letter-spacing:.04em}