/* ==========================================================================
   Dallas Marketing Company — design system v2
   Black / red. Editorial grotesk + serif accents, film grain, gradient borders.
   ========================================================================== */

:root{
  /* surfaces */
  --ink:        #060608;
  --ink-2:      #0B0B0E;
  --ink-3:      #101014;
  --panel:      #131318;
  --panel-2:    #18181F;
  --line:       #2A2A33;
  --line-soft:  #1C1C23;

  /* brand */
  --red:        #E1121B;
  --red-hot:    #FF2E37;
  --red-lite:   #FF4038;
  --red-deep:   #8E060D;
  --red-glow:   rgba(225,18,27,.4);

  /* type */
  --white:      #FFFFFF;
  --text:       #E8E8EC;
  --muted:      #ABACB8;
  --muted-2:    #8A8B97;

  --maxw: 1240px;
  --gut: 24px;
  --r: 16px;
  --r-lg: 22px;
  --r-sm: 10px;

  --shadow: 0 30px 80px -30px rgba(0,0,0,.95);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%; overflow-x:clip; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* film grain over the whole page */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:var(--grain); background-size:260px 260px;
  opacity:.05; mix-blend-mode:overlay;
}

img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.032em;
  color:var(--white);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.35rem,5.6vw,4.3rem); font-weight:900; letter-spacing:-.042em; }
h2{ font-size:clamp(1.95rem,4vw,3.1rem); letter-spacing:-.038em; }
h3{ font-size:clamp(1.16rem,1.8vw,1.42rem); letter-spacing:-.024em; }
h4{ font-size:1.05rem; letter-spacing:-.015em; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--white); font-weight:650; }

/* italic serif accent — used inside headings */
.it{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  letter-spacing:-.012em; color:var(--red-lite);
  font-size:1.07em; padding-right:.04em;
}
h1 .it{ color:var(--red-hot); }

::selection{ background:var(--red); color:#fff; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
.wrap-narrow{ max-width:860px; }
section{ position:relative; }
.sec{ padding:clamp(66px,8.5vw,128px) 0; }
.sec-tight{ padding:clamp(42px,5vw,72px) 0; }
.sec-alt{ background:var(--ink-2); }
.sec-alt::before,.sec-alt::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.sec-alt::before{ top:0; } .sec-alt::after{ bottom:0; }

.grid{ display:grid; gap:20px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:1000px){ .g3,.g4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:660px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:center; }
@media(max-width:920px){ .split{ grid-template-columns:1fr; } }

/* ---------- scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:9998;
  background:linear-gradient(90deg,var(--red-deep),var(--red-hot));
  box-shadow:0 0 14px var(--red-glow); transition:width .1s linear;
}

/* ---------- section headers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:#BCBCC6; margin-bottom:20px;
}
.eyebrow .num{
  color:var(--red-hot); font-weight:600; letter-spacing:.08em;
  padding-right:12px; border-right:1px solid var(--line);
}
.sec-head{ max-width:790px; margin-bottom:clamp(34px,4.5vw,60px); }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head p{ color:var(--muted); font-size:1.07rem; }
.lead{ font-size:clamp(1.05rem,1.45vw,1.24rem); color:var(--muted); line-height:1.6; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:var(--r-sm);
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  letter-spacing:-.005em; border:1px solid transparent; cursor:pointer;
  transition:transform .2s var(--ease-out), box-shadow .3s, border-color .2s, background .2s;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:linear-gradient(180deg,var(--red-hot),var(--red) 55%,#C50F17);
  color:#fff;
  box-shadow:0 12px 34px -12px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22),transparent 70%);
}
.btn-primary:hover{ box-shadow:0 20px 46px -14px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.38); }
.btn-primary:hover::after{ opacity:1; }
.btn-ghost{
  color:var(--white);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.05)) border-box;
  border:1px solid transparent;
}
.btn-ghost:hover{
  background:linear-gradient(180deg,rgba(225,18,27,.14),rgba(225,18,27,.05)) padding-box,
             linear-gradient(160deg,rgba(255,46,55,.6),rgba(255,46,55,.15)) border-box;
}
.btn-lg{ padding:18px 36px; font-size:1.02rem; }
.btn-sm{ padding:10px 19px; font-size:.86rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:.88rem;
  color:var(--red-hot); letter-spacing:-.005em;
}
.link-arrow span{ transition:transform .25s var(--ease-out); }
.link-arrow:hover span, .card-link:hover .link-arrow span{ transform:translateX(6px); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(6,6,8,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
.site-header.stuck{ background:rgba(6,6,8,.93); border-bottom-color:var(--line-soft); }
.site-header.stuck .nav{ height:66px; }

.topbar{
  background:linear-gradient(90deg,#6E040A,var(--red) 50%,#6E040A);
  color:#fff; font-size:.78rem; font-weight:600; letter-spacing:.015em;
  position:relative; overflow:hidden;
}
.topbar::after{
  content:""; position:absolute; inset:0; background-image:var(--grain);
  background-size:180px 180px; opacity:.12; mix-blend-mode:overlay; pointer-events:none;
}
.topbar .wrap{ display:flex; justify-content:center; gap:20px; align-items:center; padding-top:8px; padding-bottom:8px; text-align:center; position:relative; z-index:1; }
.topbar .sep{ opacity:.5; }
.topbar .tb-call{ display:none; }
@media(max-width:700px){
  .topbar .hide-sm{ display:none; }
  .topbar .wrap{ gap:0; }
  .topbar .tb-tag{ display:none; }
  .topbar .tb-call{ display:inline; }
}

.nav{ display:flex; align-items:center; gap:16px; height:78px; transition:height .3s var(--ease); }
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; flex-shrink:0; }
.brand-mark{
  height:42px; width:auto; flex-shrink:0;
  filter:drop-shadow(0 4px 14px rgba(225,18,27,.28));
  transition:height .3s var(--ease), filter .25s;
}
.site-header.stuck .brand-mark{ height:36px; }
.brand:hover .brand-mark{ filter:drop-shadow(0 4px 20px rgba(225,18,27,.5)); }
.brand-divider{ width:1px; height:30px; background:var(--line); flex-shrink:0; }
.brand-name{
  font-family:var(--font-display); font-weight:800; font-size:.92rem;
  letter-spacing:-.032em; color:#fff; line-height:1.15; white-space:nowrap;
}
.brand-name em{ font-style:normal; color:var(--red-hot); }
.brand-name small{ display:block; font-family:var(--font-mono); font-weight:500; font-size:.63rem; letter-spacing:.24em; color:var(--muted-2); text-transform:uppercase; margin-top:3px; }
@media(max-width:1180px){ .brand-name{ display:none; } .brand-divider{ display:none; } }
@media(max-width:420px){ .brand-mark{ height:36px; } }

.brand-footer{ display:block; margin-bottom:20px; }
.brand-footer img{ width:232px; height:auto; max-width:100%; }

.nav-links{ display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none; }
.nav-links > li{ list-style:none; position:relative; }
.nav-links a.nav-link{
  display:block; padding:10px 11px; border-radius:8px;
  font-size:.885rem; font-weight:550; color:var(--text); white-space:nowrap;
  transition:color .16s, background .16s;
}
.nav-links a.nav-link:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav-links a.nav-link[aria-current="page"]{ color:var(--red-hot); }
.nav-links ul{ margin:0; padding:0; }
.nav-links > li.m-only{ display:none; }
.nav-panel-cta{ display:none; }

.has-drop > a::after{ content:"\25BE"; display:inline-block; margin-left:6px; font-size:.6em; line-height:1; color:var(--muted-2); vertical-align:middle; }
.drop{
  position:absolute; top:calc(100% + 10px); left:0; transform:translateY(-8px);
  width:min(620px, calc(100vw - 48px));
  border-radius:var(--r); padding:14px; box-shadow:var(--shadow);
  background:linear-gradient(180deg,var(--panel-2),var(--panel)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.18),rgba(225,18,27,.3)) border-box;
  border:1px solid transparent;
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  opacity:0; visibility:hidden; transition:opacity .18s, transform .22s var(--ease-out), visibility .18s;
}
.has-drop:hover > .drop, .has-drop:focus-within > .drop{ opacity:1; visibility:visible; transform:translateY(0); }
.drop li{ list-style:none; }
.drop a{ display:block; padding:10px 13px; border-radius:9px; transition:background .15s; }
.drop a:hover{ background:rgba(225,18,27,.13); }
.drop .d-t{
  display:block; font-family:var(--font-display); font-weight:700; font-size:.88rem;
  color:#fff; letter-spacing:-.018em; line-height:1.3;
}
.drop .d-d{ display:block; font-size:.79rem; color:var(--muted-2); line-height:1.4; margin-top:2px; }
.drop-foot{
  grid-column:1/-1; border-top:1px solid var(--line-soft); margin-top:10px;
  padding:13px 13px 3px; display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.drop-foot .small a{ display:inline; padding:0; color:var(--muted); }
.drop-foot .small a:hover{ color:var(--red-hot); background:none; }

.nav-cta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-phone{ font-family:var(--font-display); font-weight:800; font-size:.92rem; color:#fff; padding:8px 2px; letter-spacing:-.025em; }
@media(max-width:1340px){ .nav-phone{ display:none; } }
.nav-phone:hover{ color:var(--red-hot); }

.burger{
  display:none; width:44px; height:40px; border:1px solid var(--line);
  background:transparent; border-radius:9px; cursor:pointer; padding:0;
}
.burger span{ display:block; width:18px; height:2px; background:#fff; margin:4px auto; transition:.2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media(max-width:1180px){
  .burger{ display:block; }
  .nav-cta > .btn{ display:none; }

  /* panel hangs off the bottom of the header, so it can never desync from it */
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line);
    padding:8px var(--gut) 22px;
    max-height:calc(100dvh - 100%); overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links > li.m-only{ display:block; }

  .nav-links a.nav-link{
    padding:15px 2px; font-size:1.02rem; font-weight:600;
    border-bottom:1px solid var(--line-soft); border-radius:0;
  }
  .nav-links a.nav-link:hover{ background:transparent; color:var(--red-hot); }

  .has-drop > a::after{ float:right; margin-top:9px; transition:transform .22s var(--ease-out); }
  .has-drop.open > a::after{ transform:rotate(180deg); }
  .has-drop.open > a.nav-link{ color:var(--red-hot); border-bottom-color:transparent; }
  .has-drop > .drop,
  .has-drop:hover > .drop,
  .has-drop:focus-within > .drop{
    position:static; transform:none; opacity:1; visibility:visible;
    width:auto; max-width:none; left:auto; top:auto;
    grid-template-columns:1fr; gap:0;
    box-shadow:none; border:none; border-radius:0;
    background:rgba(255,255,255,.03);
    padding:4px 0 8px; margin-bottom:6px; display:none;
  }
  .has-drop.open > .drop{ display:grid; }
  .drop a{ padding:11px 14px; border-radius:0; }
  .drop .d-t{ font-size:.92rem; }
  .drop-foot{ display:none; }

  .nav-panel-cta{
    display:grid; grid-template-columns:1fr; gap:10px;
    list-style:none; padding-top:20px; margin-top:4px;
  }
  .nav-panel-cta .btn{ width:100%; padding:15px 20px; }
}
@media(min-width:601px) and (max-width:1180px){
  .nav-panel-cta{ grid-template-columns:1fr 1fr; }
}
body.nav-open{ overflow:hidden; }
/* the panel carries its own call + CTA, so the sticky bar would only collide with it */
body.nav-open .mobile-bar{ display:none; }

/* ==========================================================================
   HERO — layered Dallas skyline
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(64px,8.5vw,116px) 0 clamp(190px,23vw,310px);
  background:
    radial-gradient(1100px 620px at 74% 4%, rgba(225,18,27,.26), transparent 60%),
    radial-gradient(760px 520px at 4% 86%, rgba(225,18,27,.11), transparent 62%),
    linear-gradient(180deg,#0A0A0E 0%,#15070B 46%,#1A070C 78%,#0D0508 100%);
}
/* faint grid */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 24%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 24%,#000,transparent 74%);
}
/* horizon glow behind skyline */
.hero::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:140%; height:clamp(300px,36vw,520px); z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 88% at 50% 104%, rgba(255,104,58,.50), transparent 62%),
    radial-gradient(78% 108% at 50% 104%, rgba(225,18,27,.62), rgba(150,10,22,.26) 44%, transparent 74%);
}
.hero .wrap{ position:relative; z-index:3; }

.skyline{
  position:absolute; left:0; right:0; bottom:-1px; z-index:1;
  width:100%; height:auto; pointer-events:none;
}
.skyline--far{ opacity:.85; transform:translateY(8px) scale(1.05); filter:blur(1.2px); }
.skyline--mid{ opacity:.97; }
.skyline--near{ opacity:1; }
.hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:96px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,6,8,.75) 62%,var(--ink) 97%);
}

.pill{
  display:inline-flex; align-items:center; gap:10px; padding:8px 17px 8px 10px;
  border-radius:999px; font-size:.77rem; font-weight:600; color:#FFFFFF;
  letter-spacing:.02em; margin-bottom:26px;
  background:linear-gradient(180deg,rgba(225,18,27,.16),rgba(225,18,27,.07)) padding-box,
             linear-gradient(140deg,rgba(255,46,55,.7),rgba(255,46,55,.18)) border-box;
  border:1px solid transparent;
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--red-hot); animation:pulse 2.6s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(225,18,27,.28); } 50%{ box-shadow:0 0 0 7px rgba(225,18,27,.05); } }

.hero-grid{ display:grid; grid-template-columns:1.14fr .86fr; gap:clamp(32px,5vw,68px); align-items:start; }
@media(max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{ margin-bottom:.42em; }
.hero h1 .accent{
  background:linear-gradient(98deg,#FF4038 4%,var(--red-hot) 38%,var(--red) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:clamp(1.06rem,1.6vw,1.24rem); color:#AEAFBA; max-width:54ch; margin-bottom:32px; line-height:1.6; }

.hero-points{ display:flex; flex-wrap:wrap; gap:10px 22px; margin:30px 0 0; padding:0; }
.hero-points li{ list-style:none; display:flex; align-items:center; gap:9px; font-size:.87rem; color:var(--text); }
.tick{
  width:18px; height:18px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:rgba(225,18,27,.18); border:1px solid rgba(255,46,55,.55);
}
.tick::after{ content:""; width:4px; height:8px; border:solid var(--red-hot); border-width:0 2px 2px 0; transform:rotate(42deg) translate(-1px,-1px); }

/* glass hero panel */
.hero-card{
  border-radius:var(--r-lg); padding:28px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(22,22,28,.9),rgba(10,10,13,.94)) padding-box,
             linear-gradient(155deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 44%,rgba(225,18,27,.4)) border-box;
  border:1px solid transparent;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.hero-card::after{
  content:""; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:linear-gradient(90deg,transparent,var(--red-hot),transparent);
}
.hero-card h3{ font-size:1.14rem; margin-bottom:6px; }
.hero-card .hc-sub{ font-size:.88rem; color:var(--muted-2); margin-bottom:20px; line-height:1.55; }
.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.kpi{ background:rgba(255,255,255,.035); border:1px solid var(--line-soft); border-radius:11px; padding:15px 10px; text-align:center; }
.kpi b{ display:block; font-family:var(--font-display); font-weight:900; font-size:1.42rem; color:var(--red-hot); letter-spacing:-.045em; }
.kpi span{ font-size:.68rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.12em; }

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:var(--ink-2); overflow:hidden; padding:17px 0; position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{ display:flex; width:max-content; animation:slide 48s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--font-display); font-weight:800; font-size:.9rem;
  letter-spacing:-.02em; color:#83848F; padding:0 14px; white-space:nowrap;
}
.marquee-track i{ color:var(--red); font-style:normal; font-size:.66rem; align-self:center; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  position:relative; border-radius:var(--r); padding:28px 26px; overflow:hidden;
  background:linear-gradient(180deg,rgba(22,22,28,.75),rgba(13,13,17,.75)) padding-box,
             linear-gradient(158deg,rgba(255,255,255,.15),rgba(255,255,255,.03) 42%,rgba(225,18,27,.2)) border-box;
  border:1px solid transparent;
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(255,46,55,.15), transparent 62%);
  transition:opacity .4s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 26px 60px -34px rgba(0,0,0,1), 0 0 0 1px rgba(255,46,55,.22); }
.card:hover::before{ opacity:1; }
.card > *{ position:relative; z-index:1; }
.card h3{ font-size:1.09rem; margin-bottom:10px; }
.card p{ font-size:.93rem; color:var(--muted); margin-bottom:0; line-height:1.62; }
.card .idx{
  font-family:var(--font-mono); font-size:.72rem; color:var(--red-hot);
  letter-spacing:.16em; display:block; margin-bottom:16px;
}
.card-link{ display:block; }
.card-link .link-arrow{ margin-top:18px; }

.icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(150deg,rgba(255,46,55,.26),rgba(225,18,27,.05)) padding-box,
             linear-gradient(150deg,rgba(255,46,55,.65),rgba(255,46,55,.12)) border-box;
  border:1px solid transparent;
}
.icon svg{ width:21px; height:21px; stroke:var(--red-hot); fill:none; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }

.svc{ display:flex; flex-direction:column; }
.svc .svc-tag{ font-family:var(--font-mono); font-size:.71rem; letter-spacing:.17em; color:var(--muted-2); text-transform:uppercase; margin-bottom:14px; }
.svc ul{ margin:16px 0 0; padding:0; }
.svc ul li{ list-style:none; font-size:.85rem; color:var(--muted); padding-left:17px; position:relative; margin-bottom:6px; }
.svc ul li::before{ content:""; position:absolute; left:0; top:.66em; width:5px; height:5px; background:var(--red); border-radius:1px; }

/* ---------- stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border-radius:var(--r); overflow:hidden;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.stats div{ background:linear-gradient(180deg,var(--ink-3),var(--ink-2)); padding:30px 18px; text-align:center; }
.stats b{ display:block; font-family:var(--font-display); font-weight:900; font-size:clamp(1.8rem,3.5vw,2.7rem); color:#fff; letter-spacing:-.05em; line-height:1; }
.stats b em{ font-style:normal; color:var(--red-hot); }
.stats b span{ display:inline; font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; margin:0; }
.stats > div > span{ display:block; margin-top:10px; font-size:.76rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.14em; }
@media(max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- steps ---------- */
.steps{ counter-reset:s; display:grid; gap:20px; grid-template-columns:repeat(4,1fr); }
@media(max-width:920px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:580px){ .steps{ grid-template-columns:1fr; } }
.step{
  position:relative; padding:32px 24px 26px; border-radius:var(--r);
  background:linear-gradient(180deg,rgba(22,22,28,.75),rgba(13,13,17,.75)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.13),rgba(225,18,27,.18)) border-box;
  border:1px solid transparent;
}
.step::before{
  counter-increment:s; content:"0" counter(s);
  position:absolute; top:-16px; left:22px;
  font-family:var(--font-display); font-weight:900; font-size:1.7rem;
  color:var(--red); letter-spacing:-.06em; background:var(--ink); padding:0 9px; line-height:1.1;
}
.sec-alt .step::before{ background:var(--ink-2); }
.step h3{ font-size:1.02rem; margin:8px 0 9px; }
.step p{ font-size:.89rem; color:var(--muted); margin:0; line-height:1.6; }

/* ---------- comparison table ---------- */
.table-scroll{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r); -webkit-overflow-scrolling:touch; }
table.cmp{ width:100%; min-width:700px; border-collapse:collapse; font-size:.9rem; }
table.cmp th, table.cmp td{ padding:17px 19px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
table.cmp thead th{ background:var(--ink-3); font-family:var(--font-display); font-weight:800; color:#fff; font-size:.85rem; letter-spacing:-.015em; white-space:nowrap; }
table.cmp thead th.us{ color:var(--red-hot); }
table.cmp tbody th{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:.88rem; width:22%; letter-spacing:-.015em; }
table.cmp td{ color:var(--muted); }
table.cmp td.us{ color:var(--text); background:rgba(225,18,27,.06); border-left:1px solid rgba(225,18,27,.25); border-right:1px solid rgba(225,18,27,.25); }
table.cmp tbody tr:last-child td, table.cmp tbody tr:last-child th{ border-bottom:0; }

/* ---------- testimonials ---------- */
.quote{
  border-radius:var(--r); padding:28px 26px; position:relative;
  background:linear-gradient(180deg,rgba(22,22,28,.75),rgba(13,13,17,.75)) padding-box,
             linear-gradient(158deg,rgba(255,255,255,.14),rgba(225,18,27,.2)) border-box;
  border:1px solid transparent;
}
.stars{ color:var(--red-hot); letter-spacing:3px; font-size:.95rem; margin-bottom:14px; }
.quote p{ font-size:.97rem; color:var(--text); margin-bottom:18px; line-height:1.62; }
.quote .who{ display:flex; align-items:center; gap:12px; border-top:1px solid var(--line-soft); padding-top:16px; }
.quote .av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(145deg,var(--red),var(--red-deep)); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:.78rem; color:#fff; flex-shrink:0; }
.quote .who b{ display:block; font-size:.86rem; color:#fff; font-weight:650; }
.quote .who span{ font-size:.79rem; color:var(--muted-2); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line-soft); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  cursor:pointer; list-style:none; padding:24px 46px 24px 0; position:relative;
  font-family:var(--font-display); font-weight:700; font-size:1.03rem; color:#fff; letter-spacing:-.022em;
  transition:color .18s;
}
.faq summary:hover{ color:var(--red-lite); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:31px; width:11px; height:11px;
  border-right:2px solid var(--red-hot); border-bottom:2px solid var(--red-hot);
  transform:rotate(45deg); transition:transform .25s var(--ease-out);
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:34px; }
.faq .ans{ padding:0 42px 26px 0; color:var(--muted); font-size:.95rem; line-height:1.68; }
.faq .ans p:last-child{ margin-bottom:0; }

/* ---------- lists ---------- */
.checks{ margin:0; padding:0; display:grid; gap:13px; }
.checks li{ list-style:none; display:flex; gap:12px; align-items:flex-start; font-size:.94rem; line-height:1.6; }
.checks li b{ color:#fff; }
.checks .tick{ margin-top:5px; }

.bars{ display:grid; gap:14px; }
.bar{
  display:flex; gap:14px; align-items:flex-start; padding:17px 19px; border-radius:var(--r-sm);
  background:linear-gradient(90deg,rgba(225,18,27,.07),rgba(255,255,255,.02));
  border:1px solid var(--line-soft); border-left:2px solid var(--red);
}
.bar b{ font-family:var(--font-display); color:#fff; font-size:.95rem; display:block; margin-bottom:4px; letter-spacing:-.02em; }
.bar p{ margin:0; font-size:.88rem; color:var(--muted); line-height:1.6; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden;
  background:linear-gradient(125deg,#150609,#20050A 48%,#08080B);
  border-top:1px solid rgba(225,18,27,.3); border-bottom:1px solid rgba(225,18,27,.3);
}
.cta-band::before{
  content:""; position:absolute; top:-55%; right:-6%; width:620px; height:620px; pointer-events:none;
  background:radial-gradient(circle,rgba(225,18,27,.42),transparent 66%);
}
.cta-band::after{
  content:""; position:absolute; bottom:-60%; left:-8%; width:560px; height:560px; pointer-events:none;
  background:radial-gradient(circle,rgba(225,18,27,.2),transparent 68%);
}
.cta-band .wrap{ position:relative; z-index:2; text-align:center; padding-top:clamp(58px,7.5vw,94px); padding-bottom:clamp(58px,7.5vw,94px); }
.cta-band h2{ margin-bottom:16px; }
.cta-band p{ color:#C9CACF; max-width:62ch; margin:0 auto 30px; }
.cta-band .btn-row{ justify-content:center; }

/* ---------- forms ---------- */
.form-card{
  border-radius:var(--r-lg); padding:clamp(24px,3vw,36px);
  background:linear-gradient(180deg,rgba(22,22,28,.9),rgba(11,11,15,.94)) padding-box,
             linear-gradient(155deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(225,18,27,.34)) border-box;
  border:1px solid transparent; box-shadow:var(--shadow);
}
.field{ margin-bottom:17px; }
.field label{ display:block; font-size:.79rem; font-weight:600; color:var(--text); margin-bottom:8px; letter-spacing:.015em; }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; background:rgba(0,0,0,.4); color:#fff;
  border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--font-body); font-size:.94rem;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.field textarea{ min-height:124px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--red); background:rgba(0,0,0,.6); box-shadow:0 0 0 3px rgba(225,18,27,.2); }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }
.form-note{ font-size:.81rem; color:var(--muted-2); margin-top:14px; line-height:1.6; }
.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:580px){ .two-up{ grid-template-columns:1fr; } }

/* ---------- interior page hero ---------- */
.phero{
  position:relative; overflow:hidden;
  padding:clamp(56px,7vw,100px) 0 clamp(46px,5.5vw,72px);
  background:
    radial-gradient(880px 440px at 80% -14%, rgba(225,18,27,.24), transparent 62%),
    linear-gradient(180deg,#0C0C10,#060608);
  border-bottom:1px solid var(--line-soft);
}
.phero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 70% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 70% 0%,#000,transparent 72%);
}
.phero .wrap{ position:relative; z-index:2; }
.phero .skyline-strip{
  position:absolute; right:0; bottom:0; width:min(780px,64%); opacity:.13; z-index:1; pointer-events:none;
}
.crumbs{ font-size:.79rem; color:var(--muted-2); margin-bottom:20px; font-family:var(--font-mono); letter-spacing:.07em; }
.crumbs a:hover{ color:var(--red-hot); }
.crumbs span{ opacity:.45; margin:0 8px; }
.phero h1{ font-size:clamp(2.1rem,4.8vw,3.6rem); }
.phero .lead{ max-width:66ch; }

/* ---------- prose ---------- */
.prose h2{ margin-top:1.9em; }
.prose h3{ margin-top:1.7em; }
.prose ul,.prose ol{ padding-left:20px; color:var(--muted); }
.prose li{ margin-bottom:10px; }
.prose li::marker{ color:var(--red); }
.prose a{ color:var(--red-hot); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--red-lite); }

/* ---------- pricing ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
@media(max-width:960px){ .plans{ grid-template-columns:1fr; max-width:540px; margin:0 auto; } }
.plan{
  border-radius:var(--r-lg); padding:32px 28px; display:flex; flex-direction:column; position:relative;
  background:linear-gradient(180deg,rgba(22,22,28,.75),rgba(13,13,17,.75)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.14),rgba(225,18,27,.16)) border-box;
  border:1px solid transparent;
}
.plan.featured{
  background:linear-gradient(180deg,#1C080C,rgba(19,19,24,.9)) padding-box,
             linear-gradient(160deg,rgba(255,46,55,.9),rgba(225,18,27,.3)) border-box;
  box-shadow:0 36px 80px -46px var(--red-glow);
}
.plan .tagline{ font-family:var(--font-mono); font-size:.73rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted-2); margin-bottom:12px; }
.plan .price{ font-family:var(--font-display); font-weight:900; font-size:2.4rem; color:#fff; letter-spacing:-.055em; line-height:1; }
.plan .price sup{ font-size:.92rem; font-weight:700; color:var(--muted); top:-.95em; }
.plan .price small{ font-size:.8rem; font-weight:500; color:var(--muted-2); letter-spacing:0; }
.plan .plan-desc{ font-size:.9rem; color:var(--muted); margin:16px 0 22px; line-height:1.6; }
.plan .checks{ margin-bottom:28px; font-size:.89rem; }
.plan .btn{ margin-top:auto; width:100%; }
.badge-top{ position:absolute; top:-12px; left:28px; background:linear-gradient(180deg,var(--red-hot),var(--red)); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding:6px 13px; border-radius:7px; box-shadow:0 8px 20px -8px var(--red-glow); }

/* ---------- chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:9px; padding:0; margin:0; }
.chips li{ list-style:none; }
.chips li a, .chips li span{
  display:block; padding:9px 16px; background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:999px; font-size:.86rem; color:var(--muted); transition:.2s;
}
.chips li a:hover{ border-color:var(--red); color:#fff; background:rgba(225,18,27,.1); }

/* ---------- posts ---------- */
.post{
  display:block; border-radius:var(--r); overflow:hidden; transition:.3s var(--ease-out);
  background:linear-gradient(180deg,rgba(22,22,28,.75),rgba(13,13,17,.75)) padding-box,
             linear-gradient(158deg,rgba(255,255,255,.14),rgba(225,18,27,.18)) border-box;
  border:1px solid transparent;
}
.post:hover{ transform:translateY(-4px); box-shadow:0 26px 60px -34px rgba(0,0,0,1); }
.post .thumb{ height:132px; background:linear-gradient(125deg,rgba(225,18,27,.34),rgba(225,18,27,.04)); border-bottom:1px solid var(--line-soft); position:relative; overflow:hidden; }
.post .thumb::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:26px 26px;
}
.post .thumb::after{ content:attr(data-k); position:absolute; left:20px; bottom:15px; font-family:var(--font-mono); font-size:.71rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; opacity:.85; }
.post .pb{ padding:22px 24px 26px; }
.post h3{ font-size:1.02rem; margin-bottom:9px; }
.post p{ font-size:.88rem; color:var(--muted); margin-bottom:0; line-height:1.6; }

/* ---------- city tiles ---------- */
.citygrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:1000px){ .citygrid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){ .citygrid{ grid-template-columns:repeat(2,1fr); } }
.citytile{
  display:block; padding:20px 18px; border-radius:var(--r-sm); position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(22,22,28,.7),rgba(13,13,17,.7)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.12),rgba(225,18,27,.16)) border-box;
  border:1px solid transparent; transition:.25s var(--ease-out);
}
.citytile:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -26px rgba(0,0,0,1), 0 0 0 1px rgba(255,46,55,.28); }
.citytile b{ display:block; font-family:var(--font-display); font-weight:800; font-size:1rem; color:#fff; letter-spacing:-.025em; }
.citytile span{ display:block; font-size:.79rem; color:var(--muted-2); margin-top:5px; line-height:1.5; }
.citytile em{ font-style:normal; font-family:var(--font-mono); font-size:.66rem; color:var(--red-hot); letter-spacing:.13em; display:block; margin-bottom:10px; }

/* ---------- footer ---------- */
.site-footer{ background:#040406; border-top:1px solid var(--line-soft); padding:clamp(54px,6.5vw,84px) 0 0; position:relative; overflow:hidden; }
.site-footer::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:70%; height:1px; background:linear-gradient(90deg,transparent,var(--red),transparent); opacity:.5;
}
.f-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:38px; }
@media(max-width:940px){ .f-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:580px){ .f-grid{ grid-template-columns:1fr; } }
.f-grid .f-h, .f-grid h4{ margin:0 0 18px; font-family:var(--font-mono); font-weight:600; font-size:.73rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:18px; }
.f-grid ul{ margin:0; padding:0; }
.f-grid li{ list-style:none; margin-bottom:10px; }
.f-grid li a{ font-size:.9rem; color:var(--muted); transition:color .15s; }
.f-grid li a:hover{ color:var(--red-hot); }
.f-about p{ font-size:.88rem; color:var(--muted); line-height:1.65; }
.f-contact a{ color:#fff; font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; }
.f-areas{ border-top:1px solid var(--line-soft); margin-top:44px; padding:28px 0; }
.f-areas .f-h, .f-areas h4{ margin:0 0 14px; font-family:var(--font-mono); font-size:.73rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; }
.f-areas p{ font-size:.87rem; color:var(--muted-2); line-height:2.1; margin:0; }
.f-areas p a:hover{ color:var(--red-hot); }
.f-bottom{ border-top:1px solid var(--line-soft); padding:22px 0 32px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; font-size:.83rem; color:var(--muted-2); }
.f-bottom a:hover{ color:var(--red-hot); }

/* ---------- mobile sticky CTA ---------- */
.mobile-bar{ display:none; }
@media(max-width:700px){
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr; gap:9px;
    position:fixed; left:0; right:0; bottom:0; z-index:300;
    padding:11px 12px calc(11px + env(safe-area-inset-bottom));
    background:rgba(6,6,8,.95); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  }
  .mobile-bar .btn{ width:100%; padding:14px 10px; font-size:.9rem; }
  body{ padding-bottom:78px; }
}

/* ---------- utilities ---------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mt-2{ margin-top:18px; } .mt-3{ margin-top:28px; } .mt-4{ margin-top:44px; }
.mb-0{ margin-bottom:0; }
.hr{ height:1px; background:var(--line-soft); border:0; margin:0; }
.muted{ color:var(--muted); }
.small{ font-size:.87rem; }

.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}
:focus-visible{ outline:2px solid var(--red-hot); outline-offset:3px; border-radius:4px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:9999; background:var(--red); color:#fff; padding:10px 16px; border-radius:8px; }

/* ---------- charts ---------- */
.chart{
  margin:0; border-radius:var(--r-lg); padding:clamp(18px,2.4vw,30px);
  background:linear-gradient(180deg,rgba(22,22,28,.8),rgba(12,12,16,.8)) padding-box,
             linear-gradient(158deg,rgba(255,255,255,.16),rgba(225,18,27,.24)) border-box;
  border:1px solid transparent;
}
.chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.chart figcaption{ margin-top:22px; }
.legend{ display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 16px; padding:0; }
.legend li{
  list-style:none; display:flex; align-items:center; gap:9px;
  font-size:.87rem; color:var(--text); font-weight:550;
}
.legend .sw{ width:16px; height:3px; border-radius:2px; flex-shrink:0; }

/* ---------- measurement bars ---------- */
.measure{ display:grid; gap:2px; border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
.mrow{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) auto;
  gap:20px; align-items:center; padding:20px 24px;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
}
@media(max-width:780px){
  .mrow{ grid-template-columns:1fr; gap:12px; }
  .mrow .mnote{ justify-self:start; }
}
.mhead b{ display:block; font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff; letter-spacing:-.022em; }
.mhead span{ display:block; font-size:.85rem; color:var(--muted); margin-top:4px; line-height:1.5; }
.mtrack{ height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.mfill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--red-deep),var(--red-hot)); }
.mnote{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; }

/* ---------- case study card, "pending verification" state ---------- */
.cs-pending{
  display:flex; align-items:center; gap:10px; padding:13px 16px; margin-bottom:18px;
  border-radius:var(--r-sm); background:rgba(225,18,27,.07); border:1px dashed rgba(255,46,55,.42);
  font-size:.84rem; color:var(--text);
}
.cs-pending b{ font-family:var(--font-display); font-weight:700; color:var(--red-hot); }