/* ==========================================================================
   Clairvynt homepage v2
   --------------------------------------------------------------------------
   Every rule is scoped under .hv2. styles.css already owns .hero, .container,
   .btn, .section, .news and .cta, so an unscoped port would restyle every
   other page on the site.

   Brand values are declared here as literals rather than consumed from
   brand-tokens.css on purpose: the design-system-alignment branch is
   rewriting that file concurrently, and coupling to token names that are
   mid-change would guarantee a merge conflict. Values match the Brand
   Guidelines Quick Reference and the August 2026 contrast fix.
   ========================================================================== */

.hv2{
  /* Six authorised brand colours */
  --hv2-dark-navy:#000432;
  --hv2-deep-navy:#03264E;
  --hv2-deep-teal:#004262;
  --hv2-slate-blue:#4B7696;
  --hv2-sage:#A2BDBD;
  --hv2-ice:#D8EAE9;

  /* Derived text and surfaces, post-contrast-fix */
  --hv2-fg-1:#004262;
  --hv2-fg-2:#416581;          /* 6.17:1 on white, 5.56:1 on surface */
  --hv2-on-dark-1:#EAF4F7;
  --hv2-on-dark-2:#94AFBC;
  --hv2-on-dark-3:#7C9DB5;
  --hv2-surface:#EFF4F5;
  --hv2-border:#C6D5D5;
  --hv2-border-default:rgba(162,189,189,.18);

  --hv2-success:#1A7A4C;

  --hv2-font-body:"Clarity City",Verdana,ui-sans-serif,system-ui,sans-serif;
  --hv2-font-head:"Archivo",Verdana,ui-sans-serif,system-ui,sans-serif;
  --hv2-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --hv2-radius-sm:4px; --hv2-radius-md:8px; --hv2-radius-lg:12px; --hv2-radius-xl:16px;
  --hv2-shadow-md:0 4px 16px rgba(0,4,50,.08);
  --hv2-shadow-lg:0 8px 32px rgba(0,4,50,.12);
  --hv2-ease:cubic-bezier(.25,.1,.25,1);
  --hv2-dur:200ms;
}

.hv2 *{box-sizing:border-box}
.hv2{font-family:var(--hv2-font-body);font-weight:300;color:var(--hv2-fg-1);line-height:1.6}
.hv2 .hv2-container{
  width:min(var(--container),calc(100% - 2 * var(--gutter)));
  margin-inline:auto;
}

/* ---------- shared bits ---------- */
.hv2 h1,.hv2 h2,.hv2 h3{
  font-family:var(--clv-font-heading);font-weight:var(--clv-weight-regular);
}
.hv2 h1{font-size:var(--clv-size-2xl)}
.hv2 h2{font-size:var(--clv-size-xl)}
.hv2 h3{font-size:var(--clv-size-md)}
.hv2 .hv2-overline{
  font-family:var(--hv2-font-head);font-weight:500;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hv2-slate-blue);
  display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;
}
.hv2 .hv2-overline::before{content:"";width:24px;height:1px;background:var(--hv2-slate-blue)}
.hv2 .hv2-on-dark .hv2-overline{color:var(--hv2-sage)}
.hv2 .hv2-on-dark .hv2-overline::before{background:var(--hv2-sage)}

/* Buttons: brand variants 1, 2, 6 only. An eighth variant is a defect. */
.hv2 .hv2-btn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--hv2-font-body);
  font-weight:500;font-size:15px;padding:12px 24px;border-radius:var(--hv2-radius-md);
  border:none;cursor:pointer;text-decoration:none;min-height:44px;
  transition:all var(--hv2-dur) var(--hv2-ease);
}
.hv2 .hv2-btn--primary{background:var(--hv2-deep-teal);color:#fff}
.hv2 .hv2-btn--primary:hover{background:var(--hv2-slate-blue);color:#fff}
.hv2 .hv2-btn--secondary{background:transparent;color:var(--hv2-deep-teal);border:1.5px solid var(--hv2-deep-teal)}
.hv2 .hv2-btn--secondary:hover{background:var(--hv2-deep-teal);color:#fff}
.hv2 .hv2-btn--rev{background:#fff;color:var(--hv2-deep-teal)}
.hv2 .hv2-btn--rev:hover{background:var(--hv2-ice);color:var(--hv2-deep-teal)}
.hv2 .hv2-btn--ghost{background:transparent;color:var(--hv2-on-dark-1);border:1.5px solid rgba(255,255,255,.3)}
.hv2 .hv2-btn--ghost:hover{border-color:var(--hv2-sage);color:var(--hv2-sage)}
.hv2 .hv2-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #416581}

/* ---------- hero ---------- */
/* Photographic hero: the offshore-at-dusk image (AI-generated, from main),
   graded to the brand. Three stacked layers over the webp:
   (1) a left-weighted navy scrim so the headline clears WCAG AA regardless of
   what sits behind it, (2) a bottom-up navy wash for depth into the section
   below, (3) a low navy multiply that cools the warm sunset toward Dark Navy.
   The navy background-color is the reduced-motion / slow-connection fallback.

   Grade C (2026-08-19). The multiply previously ran .55/.30 across the whole
   photograph, which darkened the operator and sky rather than the text area
   and made the band read as a silhouette. Because the copy sits in the left
   column, layer 1 keeps its .92 head and only its tail is opened up, so the
   text keeps its protection while the image lifts. Measured worst case (the
   lightest pixel inside each text box at 2560): headline 5.46, lead 5.41,
   proof 13.01, against required 3.0 / 4.5 / 4.5. A further step down on the
   multiply drops the lead to 3.37 and fails AA, so this is near the floor. */
.hv2 .hv2-hero{
  position:relative;
  background-color:var(--hv2-dark-navy);
  background-image:
    linear-gradient(102deg, rgba(0,4,50,.92) 0%, rgba(0,4,50,.60) 36%, rgba(0,4,50,.18) 68%, rgba(0,4,50,0) 100%),
    linear-gradient(0deg, rgba(0,4,50,.82) 0%, rgba(0,4,50,.20) 26%, rgba(0,4,50,0) 55%),
    linear-gradient(0deg, rgba(3,38,78,.28), rgba(0,4,50,.10)),
    url("/assets/img/heroes/windfarm-platform-dawn.webp");
  background-repeat:no-repeat;
  background-size:cover,cover,cover,cover;
  background-position:center,center,center,center 38%;
  background-blend-mode:normal,normal,multiply,normal;
  color:var(--hv2-on-dark-1);
  padding:104px 0 clamp(80px,10vw,132px);
}
.hv2 .hv2-hero__inner{
  width:min(var(--container),calc(100% - 2 * var(--gutter)));
  margin-inline:auto;text-align:left;padding:0;
}
/* One clamp, no breakpoint multipliers: the old calc(--clv-size-2xl * 1.24)
   with 1.1/1.05 media overrides stepped the rendered size at 768, 1024 and
   1440. 40 -> 64px continuously, ceiling reached near 1345px. */
.hv2 .hv2-hero h1{
  font-size:clamp(2.5rem, 1.55rem + 2.9vw, 4rem);line-height:1.04;
  letter-spacing:-.02em;color:#fff;margin:0 0 22px;text-wrap:balance;max-width:17ch;
  text-shadow:0 2px 28px rgba(0,4,50,.5);
}
.hv2 .hv2-hero__lead{
  font-size:20px;font-weight:400;line-height:1.55;color:var(--hv2-on-dark-1);
  max-width:50ch;margin:0 0 36px;text-shadow:0 1px 16px rgba(0,4,50,.55);
}
.hv2 .hv2-hero__ctas{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap}
/* Evidence-gutter proof line: a slate rule + verbatim/reference/review markers
   echo what Synapse does to documents, and give JetBrains Mono a real job. */
.hv2 .hv2-hero__proof{
  font-size:15px;color:var(--hv2-ice);margin:30px 0 0;max-width:56ch;
  padding-left:18px;border-left:2px solid var(--hv2-sage);
  text-shadow:0 1px 12px rgba(0,4,50,.55);
}
.hv2 .hv2-hero__proof a{color:var(--hv2-sage);font-weight:500}
.hv2 .hv2-hero__proof a:hover{color:#fff}

/* ---------- sections ---------- */
.hv2 .hv2-section{padding:96px 0}
.hv2 .hv2-section--surface{background:var(--hv2-surface)}
.hv2 .hv2-section--dark{background:var(--hv2-dark-navy);color:var(--hv2-on-dark-1)}
.hv2 .hv2-section h2{
  line-height:1.12;
  letter-spacing:-.015em;margin:0 0 18px;color:var(--hv2-fg-1);max-width:720px;text-wrap:balance;
}
.hv2 .hv2-section--dark h2{color:#fff}
.hv2 .hv2-section__sub{font-size:18px;font-weight:300;color:var(--hv2-fg-2);max-width:620px;line-height:1.55;margin:0}
.hv2 .hv2-section--dark .hv2-section__sub{color:var(--hv2-on-dark-2)}

/* ---------- feature blocks ---------- */
.hv2 .hv2-feature{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center}
.hv2 .hv2-feature--flip{grid-template-columns:1fr 1.05fr}
.hv2 .hv2-feature__lead{font-size:17px;line-height:1.65;color:var(--hv2-fg-2);margin:0 0 28px}
.hv2 .hv2-feature ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:14px}
.hv2 .hv2-feature li{
  display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:15px;
  color:var(--hv2-fg-1);line-height:1.55;align-items:start;
}
.hv2 .hv2-feature li::before{
  content:"";width:14px;height:14px;border:1.5px solid var(--hv2-sage);border-radius:50%;margin-top:5px;
  background:radial-gradient(circle,var(--hv2-sage) 0%,var(--hv2-sage) 30%,transparent 32%);
}
.hv2 .hv2-feature__ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hv2 .hv2-caselink{
  display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#416581;
  text-decoration:none;margin:0 0 28px;
}
.hv2 .hv2-caselink:hover{color:var(--hv2-fg-1)}
.hv2 .hv2-caselink svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--hv2-dur)}
.hv2 .hv2-caselink:hover svg{transform:translateX(3px)}
.hv2 .hv2-status{
  display:flex;width:fit-content;align-items:center;gap:8px;font-family:var(--hv2-font-head);
  font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  /* fg-2, not slate-blue. Slate blue clears 4.5:1 on white but only reaches 4.37:1 on
     --hv2-surface, and this badge only ever appears on a surface-tinted section. */
  color:var(--hv2-fg-2);margin:0 0 14px;
}
.hv2 .hv2-status .dot{width:7px;height:7px;border-radius:50%;background:var(--hv2-success)}

/* ---------- workpack strip ---------- */
.hv2 .hv2-workpack{
  margin-top:64px;border:1px dashed var(--hv2-border);border-radius:var(--hv2-radius-xl);
  padding:32px 36px;display:flex;align-items:center;gap:32px;justify-content:space-between;flex-wrap:wrap;
}
.hv2 .hv2-workpack h3{margin:0 0 6px;color:var(--hv2-fg-1)}
.hv2 .hv2-workpack p{font-size:14.5px;color:var(--hv2-fg-2);margin:0;max-width:640px}
.hv2 .hv2-workpack__soon{
  font-family:var(--hv2-font-head);font-weight:500;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hv2-fg-2);border:1px solid var(--hv2-border);
  border-radius:9999px;padding:7px 16px;white-space:nowrap;
}

/* ---------- security ---------- */
.hv2 .hv2-secgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.hv2 .hv2-seccard{
  background:var(--hv2-deep-navy);border:1px solid #0D3B54;
  border-radius:var(--hv2-radius-lg);padding:28px;
}
.hv2 .hv2-seccard svg{width:24px;height:24px;stroke:var(--hv2-sage);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.hv2 .hv2-seccard h3{color:var(--hv2-on-dark-1);margin:0 0 8px}
.hv2 .hv2-seccard p{font-size:14px;line-height:1.6;color:var(--hv2-on-dark-2);margin:0}
.hv2 .hv2-seclink{display:inline-flex;align-items:center;gap:8px;margin-top:36px;color:var(--hv2-sage);
  text-decoration:none;font-size:15px}
.hv2 .hv2-seclink:hover{color:var(--hv2-on-dark-1)}
.hv2 .hv2-seclink svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- insights ---------- */
.hv2 .hv2-news{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:56px}
.hv2 .hv2-newslead,.hv2 .hv2-newsmini{text-decoration:none;background:#fff;
  border:1px solid rgba(3,38,78,.10);border-radius:var(--hv2-radius-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(0,4,50,.05);transition:transform var(--hv2-dur),box-shadow var(--hv2-dur)}
.hv2 .hv2-newslead:hover,.hv2 .hv2-newsmini:hover{transform:translateY(-3px);
  box-shadow:0 4px 16px rgba(0,4,50,.08)}
.hv2 .hv2-newslead{display:flex;flex-direction:column}
.hv2 .hv2-newslead__img{display:block;aspect-ratio:2/1;overflow:hidden}
.hv2 .hv2-newslead__img img,.hv2 .hv2-newsmini__img img{width:100%;height:100%;object-fit:cover;display:block}
.hv2 .hv2-newslead__body{display:flex;flex-direction:column;gap:8px;padding:20px 20px 24px}
.hv2 .hv2-newslead__body h3{font-size:24px;line-height:1.25;letter-spacing:-.005em;color:var(--hv2-fg-1);margin:0}
.hv2 .hv2-news__side{display:flex;flex-direction:column;gap:24px}
.hv2 .hv2-newsmini{display:grid;grid-template-columns:160px 1fr;flex:1}
.hv2 .hv2-newsmini__img{display:block;overflow:hidden}
.hv2 .hv2-newsmini__img--contain{background:var(--hv2-surface);padding:8px}
.hv2 .hv2-newsmini__img--contain img{object-fit:contain}
.hv2 .hv2-newsmini__body{display:flex;flex-direction:column;gap:6px;padding:16px}
.hv2 .hv2-newsmini__body h3{font-size:16px;line-height:1.3;color:var(--hv2-fg-1);margin:0}
.hv2 .hv2-news__eyebrow{font-family:var(--hv2-font-mono);font-weight:500;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--hv2-fg-2)}
.hv2 .hv2-news__date{font-family:var(--hv2-font-mono);font-size:12px;color:var(--hv2-fg-2);letter-spacing:.03em}
.hv2 .hv2-allnews{margin-top:40px}

/* ---------- closing CTA ---------- */
.hv2 .hv2-cta{padding:0 0 96px}
.hv2 .hv2-cta__panel{
  background:var(--hv2-ice);border-radius:var(--hv2-radius-xl);padding:72px 64px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
}
.hv2 .hv2-cta h2{letter-spacing:-.015em;color:var(--hv2-fg-1);margin:0 0 14px}
.hv2 .hv2-cta p{font-size:17px;line-height:1.6;color:var(--hv2-fg-2);margin:0;max-width:520px}
.hv2 .hv2-cta__side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.hv2 .hv2-cta__small{font-size:14px;color:var(--hv2-fg-2)}

/* ---------- photography ---------- */
/* Exhibit figures and the three-frame band. Mirrors .photo in styles.css on the
   hv2 tokens. */
.hv2 .hv2-photo{
  position:relative;display:block;margin:0;border-radius:var(--hv2-radius-xl);overflow:hidden;
  aspect-ratio:3/2;background:var(--hv2-dark-navy);
}
.hv2 .hv2-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hv2 .hv2-band{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.hv2 .hv2-band figure{margin:0}
.hv2 .hv2-band figcaption{
  margin-top:12px;font-family:var(--hv2-font-mono);font-weight:500;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--hv2-fg-2);
}

/* Closing panel over the dawn wind-farm frame. The panel gets enough height
   for the turbine line and horizon to show (a 180px strip cropped the image to
   a smudge), the scrim is dense only at the left end where the copy sits, and
   white buttons replace the teal primary on navy. Worst-case contrast is
   probed, not assumed: .scratch/hero-contrast-probe.mjs. */
.hv2 .hv2-cta__panel--photo{
  min-height:360px;
  background-color:var(--hv2-dark-navy);
  background-image:
    linear-gradient(102deg, rgba(0,4,50,.86) 0%, rgba(0,4,50,.66) 44%, rgba(0,4,50,.34) 100%),
    linear-gradient(0deg, rgba(0,4,50,.38) 0%, rgba(0,4,50,0) 55%),
    url("/assets/img/heroes/windfarm-platform-dawn.webp");
  background-size:cover;background-repeat:no-repeat;background-position:center 42%;
}
.hv2 .hv2-cta__panel--photo h2{color:#fff;text-shadow:0 1px 18px rgba(0,4,50,.45)}
.hv2 .hv2-cta__panel--photo p{color:var(--hv2-on-dark-1);text-shadow:0 1px 14px rgba(0,4,50,.45)}
.hv2 .hv2-cta__panel--photo .hv2-cta__small{color:var(--hv2-on-dark-1)}
.hv2 .hv2-cta__panel--photo .hv2-cta__small a{color:var(--hv2-ice)}
.hv2 .hv2-cta__panel--photo .hv2-cta__small a:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .hv2 .hv2-feature,.hv2 .hv2-feature--flip{grid-template-columns:1fr;gap:40px}
  .hv2 .hv2-secgrid{grid-template-columns:1fr}
  .hv2 .hv2-news{grid-template-columns:1fr}
  .hv2 .hv2-news__side{flex-direction:row}
  .hv2 .hv2-newsmini{flex:1}
  .hv2 .hv2-cta__panel{grid-template-columns:1fr;padding:48px 36px}
}
@media (max-width:767px){
  /* Stacked, the headline sits over the dawn horizon, the brightest band in the
     frame; the left-weighted scrim above assumes the copy has the dark left
     third. Vertical here, probed at 390 like the panel below: worst-case h1 5.63,
     lead 5.69, buttons 12.88 against 3.0 / 4.5 / 4.5. One step lighter (.46/.38/.28)
     puts the lead at 4.67, too close to the floor. */
  .hv2 .hv2-hero{
    background-image:
      linear-gradient(180deg, rgba(0,4,50,.56) 0%, rgba(0,4,50,.48) 58%, rgba(0,4,50,.36) 100%),
      linear-gradient(0deg, rgba(0,4,50,.52) 0%, rgba(0,4,50,0) 45%),
      linear-gradient(0deg, rgba(3,38,78,.28), rgba(0,4,50,.10)),
      url("/assets/img/heroes/windfarm-platform-dawn.webp");
    background-position:center,center,center,center 30%;
  }
  .hv2 .hv2-hero__lead{font-size:17px}
  .hv2 .hv2-section{padding:64px 0}
  .hv2 .hv2-news__side{flex-direction:column}
  .hv2 .hv2-newsmini{grid-template-columns:120px 1fr}
  .hv2 .hv2-band{grid-template-columns:1fr}
  /* Stacked, every line of the panel sits over the photograph, so the scrim
     turns vertical and dense; the frame shows through at the foot. */
  .hv2 .hv2-cta__panel--photo{
    background-image:
      linear-gradient(180deg, rgba(0,4,50,.90) 0%, rgba(0,4,50,.84) 62%, rgba(0,4,50,.62) 100%),
      url("/assets/img/heroes/windfarm-platform-dawn.webp");
    background-position:center 40%;
  }
}