/* ============================================================================
   Allied Insurance, commercial.html v2 (page-scoped)
   THE WEDGE: Commercial & Specialty, the cover most insurers will not write.
   Rebuilt in the v2 system (styles.css owns tokens/nav/footer/buttons/intro/
   services/closer). This file adds only: the dark page-hero BAND, the gold
   jump-nav, and the five rich GOLD CARDS (same DNA as the homepage .al-card
   gold gradients) sitting on a dark panel. Flat, zero shadow, gold/amber/brown
   on warm dark + cream only. Every hue traces to the Allied logo.
   ========================================================================== */

/* ---------- PAGE HERO BAND (dark, warm-graded image, giant cream headline) ---------- */
.page-hero{
  position:relative; background:var(--brand-dark); color:var(--cream-on-dark); overflow:hidden;
  padding:calc(var(--nav-h) + clamp(56px,10vh,116px)) 0 clamp(52px,9vh,100px);
}
.page-hero__media{ position:absolute; inset:0; z-index:0; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:72% 46%; }
.page-hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(28,23,16,.60) 0%, rgba(28,23,16,.24) 34%, rgba(28,23,16,.52) 66%, rgba(28,23,16,.95) 100%),
    linear-gradient(90deg, rgba(28,23,16,.92) 0%, rgba(28,23,16,.5) 44%, rgba(28,23,16,.04) 84%);
}
.page-hero__inner{ position:relative; z-index:2; width:100%; }
.page-hero__eyebrow{ margin-bottom:22px; color:var(--gold-bright); }
.page-hero h1{
  font-weight:500; letter-spacing:-.035em; line-height:.94;
  font-size:clamp(42px,7.1vw,106px); max-width:15ch;
}
.page-hero h1 .beat{ display:block; }
.page-hero h1 .beat-2{ color:var(--cream-70); }
.page-hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
.page-hero h1 .word .ch{ display:inline-block; will-change:transform; }
.page-hero__sub{
  margin-top:28px; max-width:62ch; color:var(--cream-70);
  font-size:clamp(16px,1.3vw,20px); line-height:1.55; font-weight:400;
}
.page-hero__ctas{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* gold jump-nav to the five lines */
.spec-jump{ margin-top:34px; display:flex; flex-wrap:wrap; gap:10px; }
.spec-jump a{
  font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--cream-on-dark);
  border:1px solid var(--cream-45); border-radius:var(--pill); padding:9px 18px;
  transition:background-color .35s ease, border-color .35s ease, color .35s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.spec-jump a:hover{ background:var(--gold-bright); border-color:var(--gold-bright); color:var(--ink); transform:translateY(-2px); }
.spec-jump a:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

/* ============================================================================
   THE FIVE LINES: rich gold cards on a dark panel (homepage .al-card DNA)
   ========================================================================== */
.spec{
  background:radial-gradient(125% 85% at 12% -6%, #241c11 0%, var(--brand-dark) 56%);
  color:var(--cream-on-dark); padding:clamp(60px,10vh,144px) 0;
}
.spec__head{ max-width:64ch; margin-bottom:clamp(34px,6vh,60px); }
.spec__head h2{
  margin-top:18px; font-weight:500; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(30px,4.4vw,64px); max-width:17ch;
}
.spec__head p{ margin-top:20px; color:var(--cream-70); max-width:56ch; }

.spec__cards{ display:flex; flex-direction:column; gap:clamp(18px,2.4vw,28px); }
.spec-card{
  border-radius:var(--r-panel); padding:clamp(26px,3.3vw,52px); color:var(--ink);
  position:relative; overflow:hidden; scroll-margin-top:calc(var(--nav-h) + 18px);
}
/* gold gradients (values from the homepage .al-card set; all light-gold so the
   rich dark-ink copy holds AA on every card) */
.spec-card--commercial{  background:linear-gradient(150deg,#e8c072,#c68a34); }
.spec-card--engineering{ background:linear-gradient(150deg,#f5e3b0,#e0a53f); }
.spec-card--bonds{       background:linear-gradient(150deg,#f0cd8c,#ca9f4e); }
.spec-card--cyber{       background:linear-gradient(150deg,#ecca80,#c58c33); }
.spec-card--farming{     background:linear-gradient(150deg,#f3daa0,#d69b3e); }

.spec-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.spec-card__num{
  font-size:clamp(40px,4.6vw,78px); font-weight:500; letter-spacing:-.04em; line-height:.82;
  color:var(--ink); opacity:.42;
}
.spec-card__ic{ width:clamp(40px,4vw,58px); height:clamp(40px,4vw,58px); color:var(--ink); opacity:.9; flex:none; }
.spec-card__ic svg{ width:100%; height:100%; }
.spec-card__name{ margin-top:6px; font-size:clamp(28px,3.3vw,52px); font-weight:500; letter-spacing:-.02em; line-height:1; }
.spec-card__tag{ margin-top:12px; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(28,23,16,.6); }

.spec-card__grid{ margin-top:clamp(22px,3vw,34px); display:grid; grid-template-columns:1.15fr .95fr; gap:clamp(24px,4vw,60px); align-items:start; }
.spec-card__copy p{ color:rgba(28,23,16,.76); margin-bottom:14px; max-width:48ch; font-size:clamp(15px,1.12vw,17.5px); line-height:1.52; }
.spec-card__copy p:last-of-type{ margin-bottom:0; }

.spec-card__cover h3{ font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(28,23,16,.58); margin-bottom:6px; }
.cover-list{ list-style:none; }
.cover-list li{ padding:12px 0; border-top:1px solid rgba(28,23,16,.16); }
.cover-label{ display:block; font-weight:500; color:var(--ink); font-size:clamp(14.5px,1.05vw,16px); letter-spacing:-.005em; }
.cover-sub{ display:block; margin-top:3px; font-size:13px; line-height:1.4; color:rgba(28,23,16,.6); }

.spec-card__cta{ margin-top:clamp(24px,3.4vh,38px); grid-column:1 / -1; }
/* the quote pill: dark ink fill pops on the gold card */
.spec-card .btn-ink{ background:var(--ink); color:var(--cream-on-dark); }
.spec-card .btn-ink:hover{ background:var(--brand-dark-2); }

/* ============================================================================
   CROSS-COVER (light) : the rest of the Allied book (reuses .svc DNA)
   ========================================================================== */
.xcover{ background:var(--canvas); padding:clamp(60px,10vh,132px) 0; }
.xcover__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.xcover__head h2{ font-weight:500; letter-spacing:-.03em; line-height:1; font-size:clamp(28px,3.8vw,56px); max-width:15ch; }
.xcover__head p{ color:var(--ink-70); max-width:34ch; }
.xcover__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* ============================================================================
   CTA actions row inside the shared .cta-band closer
   ========================================================================== */
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================================
   RICHNESS PASS (page-scoped; shared runtime + classes live in styles.css)
   ========================================================================== */
/* 097 Text Glow on the hero eyebrow */
.page-hero__eyebrow[data-component="097"]{ text-shadow:0 0 20px rgba(224,182,87,.35); }

.cta-band{ position:relative; overflow:hidden; }
.cta-band .container{ position:relative; z-index:1; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .spec-card__grid{ grid-template-columns:1fr; gap:clamp(20px,4vw,30px); }
  .xcover__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .page-hero h1{ font-size:clamp(38px,10.5vw,60px); }
  .xcover__grid{ grid-template-columns:1fr; }
  .page-hero__ctas .btn, .cta-actions .btn{ width:100%; }
}

/* ---------- reduced motion: no headline offset ---------- */
@media (prefers-reduced-motion:reduce){
  .page-hero h1 .word .ch{ transform:none !important; }
}