/*
Theme Name: WinZybs
Theme URI: https://winzybshealthcare.com
Author: Mark Bohay Consulting
Description: Federal capability one-pager for WinZybs, a joint venture of Windsor Group LLC and Zybs Medical Group LLC.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: Proprietary
Text Domain: winzybs
*/

/* ============================================================
   WinZybs one-pager prototype v1
   Palette sampled directly from parent-company logo files:
     Windsor Group LLC  #519BFE  /  #414042
     Zybs Medical Group #1E6A23  /  #7BAB49
   ============================================================ */

:root{
  --ink:        #08152A;
  --ink-2:      #0D1F38;
  --ink-3:      #14293F;
  --paper:      #F5F6F4;
  --paper-2:    #ECEEE9;

  --wg-blue:    #519BFE;
  --wg-blue-dk: #1B4E8F;
  --grey:       #414042;

  --zy-green:   #1E6A23;
  --zy-sage:    #7BAB49;

  --rule:       rgba(255,255,255,.14);
  --rule-dk:    rgba(8,21,42,.14);

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Public Sans", -apple-system, sans-serif;
  --mono:  "Roboto Mono", ui-monospace, monospace;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* --- shared type ------------------------------------------------ */
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.015em; line-height:1.1; margin:0; }
h1{ font-size:clamp(2.4rem, 5.6vw, 4.6rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); }
h3{ font-size:clamp(1.15rem, 1.7vw, 1.45rem); line-height:1.25; }

.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.55; flex:none;
}
.lede{ font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.6; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }

/* --- atmosphere: grid + grain ----------------------------------- */
.dark{
  background:var(--ink); color:#E8EDF4; position:relative; isolation:isolate;
}
.dark::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(81,155,254,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81,155,254,.055) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
}
.grain::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ============================================================
   HEADER
   ============================================================ */
/* Fixed rather than sticky so the hero runs underneath it. At the top the header
   is fully transparent and reads as part of the hero; the background only arrives
   once there is content behind it that needs separating. */
header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
header.scrolled{
  background:rgba(8,21,42,.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--rule);
}
header:has(#nav.open){ background:rgba(8,21,42,.96); border-bottom-color:var(--rule); }
.bar{
  max-width:var(--max); margin-inline:auto; padding:.85rem var(--gut);
  display:flex; align-items:center; gap:2rem;
}
.mark{ display:flex; align-items:baseline; gap:.55rem; text-decoration:none; color:#fff; flex:none; }
.mark b{ font-family:var(--serif); font-size:1.42rem; font-weight:500; letter-spacing:-.02em; }
.mark b i{ font-style:normal; color:var(--zy-sage); }
header nav{ margin-left:auto; display:flex; align-items:center; gap:2rem; }
header nav a{
  font-family:var(--serif); font-size:1.04rem; letter-spacing:0;
  color:rgba(232,237,244,.78); text-decoration:none; position:relative; padding:.3rem 0;
  transition:color .25s;
}
header nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--wg-blue); transition:right .35s cubic-bezier(.2,.7,.3,1);
}
header nav a:hover{ color:#fff; }
header nav a:hover::after{ right:0; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--serif); font-size:1.02rem; letter-spacing:0;
  /* Optical, not geometric: centring the full ink box counts the descenders on
     p and y, which leaves the caps and x-height sitting 2px high. Shift down. */
  padding:calc(.68rem + 2px) 1.3rem calc(.68rem - 2px); text-decoration:none; border:1px solid transparent;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.btn-primary{ background:var(--wg-blue); color:#05121F; font-weight:500; }
.btn-primary:hover{ background:#7CB4FF; transform:translateY(-1px); }
.btn-ghost{ border-color:rgba(255,255,255,.28); color:#E8EDF4; }
.btn-ghost:hover{ border-color:var(--zy-sage); color:var(--zy-sage); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--wg-blue-dk); transform:translateY(-1px); }
.btn svg{ flex:none; }
.nav-cta{ display:none; }
@media(min-width:1080px){ .nav-cta{ display:inline-flex; } }
.menu-btn{
  margin-left:auto; display:grid; gap:5px; background:none; border:0; padding:.4rem; cursor:pointer;
}
.menu-btn i{ display:block; width:22px; height:1.5px; background:#E8EDF4; }
@media(min-width:900px){ .menu-btn{ display:none; } }
@media(max-width:899px){
  header nav{
    position:fixed; inset:57px 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--ink-2); border-bottom:1px solid var(--rule);
    padding:.5rem var(--gut) 1.5rem; margin:0;
    clip-path:inset(0 0 100% 0); transition:clip-path .4s cubic-bezier(.2,.7,.3,1);
  }
  header nav.open{ clip-path:inset(0 0 0 0); }
  header nav a{ width:100%; padding:.85rem 0; border-bottom:1px solid var(--rule); font-size:1.1rem; }
}

/* ============================================================
   HERO
   ============================================================ */
/* extra top padding replaces the flow space the header gave up when it went fixed */
.hero{ padding:calc(clamp(4rem,10vh,7.5rem) + 58px) 0 0; overflow:hidden; }
/* ── CROSS FIELD, PARKED ──────────────────────────────────────────────
   The medical-cross field carried over from v2 is still fully wired: the
   <canvas id="plusfield"> is in the hero markup and its rAF renderer is at
   the bottom of the script. It is hidden, not deleted.

   To bring it back:
     1. change .plusfield below from display:none to display:block
     2. add  .hero.dark::before{ display:none; }  to drop the ruled grid,
        since the two textures fight if both are on
   Opacity of the crosses is set in the renderer (search "a: 0.035").
   ─────────────────────────────────────────────────────────────────── */
.plusfield{
  display:none;
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr;
}
/* single column since the figure came out: the type widths do the shaping now */

.hero .eyebrow{ color:var(--wg-blue); margin-bottom:1.6rem; }
.hero h1{ color:#fff; max-width:24ch; }
/* background-clip:text paints only inside the element's own box, and italic
   glyphs lean past their advance width, so the last letter on a line loses a
   sliver of its tail. The padding widens the paint box; the negative margin
   takes the space straight back so nothing shifts. */
.hero h1 em{
  font-style:italic; font-weight:300;
  background:linear-gradient(100deg, var(--wg-blue) 10%, var(--zy-sage) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.09em; margin-right:-.09em;
}
.hero .lede{ color:rgba(232,237,244,.76); max-width:52ch; margin:.9rem 0 1.05rem; }
/* the last lede carries the gap down to the buttons; the ones above it just space each other */
.hero p.lede:last-of-type{ margin-bottom:2.4rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* parent lockup */
.parents{
  margin-top:1rem; padding-bottom:1rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2.6rem;
}
.parents p{
  margin:0; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(232,237,244,.45);
}
.parent{ display:flex; align-items:center; gap:.7rem; }
.parent span{ font-size:.92rem; color:rgba(232,237,244,.9); letter-spacing:.01em; }
.dot{ width:9px; height:9px; flex:none; transform:rotate(45deg); }
.dot.b{ background:var(--wg-blue); }
.dot.g{ background:var(--zy-sage); }

/* ============================================================
   STAT BAND
   ============================================================ */
/* the band's own bottom rule closes the hero; the padding below it keeps that
   rule from butting straight into the light section underneath */
.stats{ margin-top:clamp(3.5rem,7vw,5.5rem); padding-bottom:clamp(3rem,5.5vw,4.5rem); }
/* rules top and bottom only: the band is one object, not four cells */
.stat-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
@media(min-width:820px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{
  padding:2.4rem clamp(1rem,2.4vw,2rem) 2.2rem;
  position:relative; overflow:hidden;
}
/* The wipe runs deep into light as it travels left to right, and takes the
   colour of whichever partner the figure belongs to: green for the two Zybs
   clinical numbers, Windsor Group LLC blue for the two federal ones. */
.stat::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--zy-green) 0%, var(--zy-sage) 55%, #A6D874 100%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.stat:nth-child(3)::after,
.stat:nth-child(4)::after{
  background:linear-gradient(90deg, var(--wg-blue-dk) 0%, var(--wg-blue) 55%, #9CC6FF 100%);
}
.stat:hover::after{ transform:scaleX(1); }
.stat b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem,4.6vw,3.5rem); line-height:1; color:#fff;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.stat i{
  font-style:normal; display:block; margin-top:.75rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(232,237,244,.55); line-height:1.5;
}
/* Newsreader italic: this is a footnote in prose, not a data label, so it wants
   the voice face rather than the mono the rest of the band uses. */
.stat-note{
  padding:1.1rem 0 3.2rem; font-size:1rem; color:rgba(232,237,244,.5);
  font-family:var(--serif); font-style:italic; font-weight:300; letter-spacing:0;
}

/* ============================================================
   SECTION SCAFFOLD (light)
   ============================================================ */
.light{ background:var(--paper); padding:clamp(4.5rem,9vw,7.5rem) 0; }

/* Grain only on paper. The ruled grid reads as structure on the dark sections
   but as noise on light ones, so the grey box keeps just the tooth. */
.tex{ position:relative; isolation:isolate; }
.tex::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 40%, transparent 90%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 40%, transparent 90%);
}
.sec-head{ max-width:64ch; margin-bottom:clamp(2.8rem,5vw,4rem); }
.sec-head .eyebrow{ color:var(--wg-blue-dk); margin-bottom:1.3rem; }
.sec-head p{ color:rgba(8,21,42,.68); margin:1.2rem 0 0; }

/* divider seam between sections */
.divider{ height:1px; background:linear-gradient(90deg, var(--wg-blue), var(--zy-green)); opacity:.4; }

/* ============================================================
   CAPABILITIES — the split
   ============================================================ */
.split{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; }
@media(min-width:900px){ .split{ grid-template-columns:1fr 1fr; } }
.col{ position:relative; padding-top:2rem; border-top:2px solid var(--ink); }
.col.clin{ border-top-color:var(--zy-green); }
.col.oper{ border-top-color:var(--wg-blue-dk); }
.col .tag{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:.9rem; display:block;
}
.col.clin .tag{ color:var(--zy-green); }
.col.oper .tag{ color:var(--wg-blue-dk); }
.col h3{ margin-bottom:1.6rem; }
.col ul{ list-style:none; margin:0; padding:0; }
.col li{
  padding:.95rem 0 .95rem 1.9rem; border-bottom:1px solid var(--rule-dk);
  position:relative; font-size:.97rem; line-height:1.5;
}
.col li::before{
  content:""; position:absolute; left:0; top:1.42rem;
  width:8px; height:8px; transform:rotate(45deg);
  border:1.5px solid currentColor; opacity:.85;
}
.col.clin li::before{ color:var(--zy-sage); }
.col.oper li::before{ color:var(--wg-blue); }
.col li:hover::before{ background:currentColor; }

/* ============================================================
   PARTNERSHIP CARDS
   ============================================================ */
.pair{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media(min-width:880px){ .pair{ grid-template-columns:1fr 1fr; gap:2rem; } }
.card{
  background:#fff; border:1px solid var(--rule-dk); padding:clamp(1.75rem,3vw,2.6rem);
  position:relative; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 22px 50px -28px rgba(8,21,42,.45); }
.card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:3px;
}
.card.wg::before{ background:var(--wg-blue); }
.card.zy::before{ background:var(--zy-green); }
.card .role{
  font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(8,21,42,.5); display:block; margin-bottom:.8rem;
}
.card h3{ margin-bottom:1rem; }
.card p{ margin:0 0 1.5rem; color:rgba(8,21,42,.72); font-size:.96rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.36rem .6rem; border:1px solid var(--rule-dk); color:rgba(8,21,42,.7);
  background:var(--paper);
}
.card.wg .chip:hover{ border-color:var(--wg-blue); color:var(--wg-blue-dk); }
.card.zy .chip:hover{ border-color:var(--zy-green); color:var(--zy-green); }

/* ============================================================
   CONTRACT ACCESS — the spec sheet
   ============================================================ */
.spec{ padding:clamp(4.5rem,9vw,7rem) 0; }
.spec .sec-head .eyebrow{ color:var(--zy-sage); }
.spec .sec-head h2{ color:#fff; }
.spec .sec-head p{ color:rgba(232,237,244,.66); }

.veh{ border-top:1px solid var(--rule); }
.veh-row{
  display:grid; grid-template-columns:1fr; gap:.4rem 2rem;
  padding:1.4rem 0; border-bottom:1px solid var(--rule);
  transition:background .3s; align-items:baseline;
}
@media(min-width:760px){ .veh-row{ grid-template-columns:minmax(230px,.9fr) 2fr; } }
.veh-row:hover{ background:rgba(81,155,254,.05); }
.veh-row dt{
  font-size:.95rem; color:#fff; font-weight:500;
}
.veh-row dd{ margin:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.num{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.03em;
  color:var(--wg-blue); background:rgba(81,155,254,.09);
  border:1px solid rgba(81,155,254,.22); padding:.28rem .6rem;
  transition:background .25s, color .25s;
}
.num:hover{ background:rgba(81,155,254,.2); color:#9CC6FF; }
.num small{ color:rgba(232,237,244,.5); font-size:.78em; margin-left:.45rem; letter-spacing:.06em; }

.cred{ display:grid; gap:2.5rem; grid-template-columns:1fr; margin-top:clamp(3rem,5vw,4rem); }
@media(min-width:880px){ .cred{ grid-template-columns:1fr 1fr; gap:3.5rem; } }
.cred h4, .naics h4{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--zy-sage); margin:0 0 1.3rem; font-weight:500;
  padding-bottom:.8rem; border-bottom:1px solid var(--rule);
}
.cred h4.blue{ color:var(--wg-blue); }
.set-list{ list-style:none; margin:0; padding:0; }
.set-list li{
  padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  font-size:.93rem;
}
.set-list li span:last-child{
  font-family:var(--mono); font-size:.76rem; color:rgba(232,237,244,.55); text-align:right;
}
.naics-row{
  display:flex; gap:1rem; padding:.72rem 0; align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,.07); font-size:.93rem;
}
.naics-row b{
  font-family:var(--mono); font-weight:500; color:var(--zy-sage); flex:none; width:5.2rem; font-size:.85rem;
}
.naics-row span{ color:rgba(232,237,244,.78); }
.attrib{
  margin-top:2.5rem; padding:1rem 1.2rem; border-left:2px solid var(--zy-sage);
  background:rgba(123,171,73,.06);
  font-size:.85rem; color:rgba(232,237,244,.62); line-height:1.6;
}

/* ============================================================
   LEADERSHIP
   ============================================================ */
.lead{ padding:clamp(4.5rem,9vw,7rem) 0; }
.lead .sec-head .eyebrow{ color:var(--zy-sage); }
.lead .sec-head h2{ color:#fff; }
.lead .sec-head p{ color:rgba(232,237,244,.66); }

.leads{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media(min-width:760px){ .leads{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media(min-width:1100px){ .leads{ gap:3rem; } }

.leader{ position:relative; }
/* The portraits are cut-outs on transparent ground, so the frame's own gradient
   shows through behind them and gives the figure something to sit in. */
.leader-photo{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--rule); margin-bottom:1.5rem;
  background:radial-gradient(72% 62% at 50% 26%, #17304B 0%, var(--ink-2) 55%, var(--ink) 100%);
}
.leader-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(.94); transition:transform .7s cubic-bezier(.2,.7,.3,1), filter .5s;
}
.leader:hover .leader-photo img{ transform:scale(1.035); filter:saturate(1); }
/* the accent runs along the top of the frame, matching the partnership cards */
.leader-photo::after{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
}
.leader.wg .leader-photo::after{ background:var(--wg-blue); }
.leader.zy .leader-photo::after{ background:var(--zy-sage); }

/* stands in until the photograph lands, so the layout is honest either way */
.leader-photo .await{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(232,237,244,.28); padding:1rem;
}
.leader-photo img{ position:relative; z-index:1; }

.leader .role{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--zy-sage); display:block; margin-bottom:.7rem;
}
.leader.wg .role{ color:var(--wg-blue); }
.leader h3{ color:#fff; font-size:clamp(1.4rem,2.2vw,1.8rem); margin-bottom:.5rem; }
.leader .org{
  font-family:var(--sans); font-size:.92rem; color:rgba(232,237,244,.55);
  display:block; margin-bottom:1.1rem;
}
.leader p{ margin:0; color:rgba(232,237,244,.74); font-size:.97rem; line-height:1.6; }

/* ============================================================
   CERTIFICATIONS
   White ground, no tiles and no cell rules. These marks are drawn for a
   light background and each already carries its own containing shape, so
   boxing them just adds a second frame around a frame. Spacing does the
   ordering instead; the only rules are the tier labels.
   ============================================================ */
.certs .sec-head .eyebrow{ color:var(--zy-green); }

.wall-label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(8,21,42,.45); margin:0 0 1.6rem; padding-bottom:.75rem;
  border-bottom:1px solid var(--rule-dk);
}
.wall{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.75rem,3.4vw,3rem); align-items:center; margin-bottom:3.5rem;
}
@media(min-width:560px){ .wall{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:1000px){ .wall{ grid-template-columns:repeat(8,1fr); } }
@media(min-width:1000px){ .wall-3{ grid-template-columns:repeat(3,1fr); max-width:44%; } }

.mark-cell{ display:grid; place-items:center; }
.mark-cell img{
  max-height:96px; max-width:100%; width:auto; object-fit:contain;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.mark-cell:hover img{ transform:scale(1.06); }

/* ============================================================
   DIFFERENTIATORS
   ============================================================ */
.diff-grid{ display:grid; gap:0; grid-template-columns:1fr; border-top:1px solid var(--rule-dk); }
@media(min-width:700px){ .diff-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1050px){ .diff-grid{ grid-template-columns:repeat(3,1fr); } }
.diff{
  padding:1.9rem 1.6rem 1.9rem 0; border-bottom:1px solid var(--rule-dk);
  display:flex; gap:1.1rem; align-items:baseline;
}
@media(min-width:700px){ .diff:nth-child(odd){ padding-right:2.4rem; } }
/* Top-aligned, and locked to it: the number gets a line box exactly the height
   of the heading's first line, so it optically centers against that line no
   matter how many lines the heading or the body below it runs to. No nudging. */
.diff b{
  font-family:var(--mono); font-size:.72rem; color:var(--wg-blue-dk);
  letter-spacing:.06em; flex:none;
  line-height:calc(1.02rem * 1.35);
}
/* Sans semibold, not the serif: these are short labels at small size, where
   Newsreader goes thin and the whole grid stops holding together. */
.diff h3{
  font-family:var(--sans); font-weight:600;
  font-size:1.02rem; line-height:1.35; margin:0 0 .3rem;
  letter-spacing:-.005em; color:var(--ink);
}
.diff p{ margin:0; font-size:.95rem; line-height:1.55; color:rgba(8,21,42,.74); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:1fr; }
@media(min-width:940px){ .contact{ grid-template-columns:.85fr 1.15fr; } }
.poc{ }
.poc .who{ padding-bottom:1.5rem; margin-bottom:1.5rem; border-bottom:1px solid var(--rule); }
.poc .who b{ display:block; font-family:var(--serif); font-size:1.5rem; color:#fff; font-weight:400; }
.poc .who i{
  font-style:normal; font-family:var(--mono); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--zy-sage); display:block; margin-top:.4rem;
}
.poc dl{ margin:0; display:grid; gap:1.1rem; }
.poc dt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(232,237,244,.42); margin-bottom:.25rem;
}
.poc dd{ margin:0; font-size:1rem; color:#E8EDF4; }
.poc dd a{ text-decoration:none; border-bottom:1px solid rgba(81,155,254,.4); transition:border-color .25s, color .25s; }
.poc dd a:hover{ color:var(--wg-blue); border-color:var(--wg-blue); }

.form-shell{ background:rgba(255,255,255,.03); border:1px solid var(--rule); padding:clamp(1.6rem,3vw,2.4rem); }
.form-shell h3{ color:#fff; margin-bottom:.6rem; }
.form-shell > p{ color:rgba(232,237,244,.6); font-size:.92rem; margin:0 0 1.9rem; }
.gf-note{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--zy-sage); border:1px dashed rgba(123,171,73,.4); padding:.5rem .75rem;
  display:inline-block; margin-bottom:1.6rem;
}
.field{ margin-bottom:1.15rem; }
.field label{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(232,237,244,.55); margin-bottom:.5rem;
}
.field input, .field select, .field textarea{
  width:100%; background:rgba(8,21,42,.5); border:1px solid var(--rule);
  color:#E8EDF4; padding:.8rem .9rem; font-family:var(--sans); font-size:.95rem;
  transition:border-color .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--wg-blue); background:rgba(8,21,42,.8);
}
.field textarea{ min-height:112px; resize:vertical; }
.two{ display:grid; gap:1.15rem; grid-template-columns:1fr; }

/* ============================================================
   GRAVITY FORMS
   GF ships its own markup and stylesheet. Rather than fight it, these rules
   map its class names onto the same treatment the rest of the page uses:
   mono uppercase labels, inset dark fields, serif submit button.
   ============================================================ */
.form-shell .gform_wrapper{ margin:0; }
.form-shell .gform_wrapper form{ margin:0; }
.form-shell .gform_fields{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.15rem; }
.form-shell .gfield{ grid-column:span 12; min-width:0; }
@media(min-width:620px){
  .form-shell .gfield.gfield--width-half{ grid-column:span 6; }
}
.form-shell .gfield_label{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(232,237,244,.55); margin-bottom:.5rem; font-weight:400;
}
.form-shell .gfield_required{ color:var(--zy-sage); margin-left:.25rem; }
.form-shell input[type=text],
.form-shell input[type=email],
.form-shell input[type=tel],
.form-shell select,
.form-shell textarea{
  width:100%; background:rgba(8,21,42,.5); border:1px solid var(--rule);
  color:#E8EDF4; padding:.8rem .9rem; font-family:var(--sans); font-size:.95rem;
  border-radius:0; transition:border-color .25s, background .25s;
}
.form-shell input:focus, .form-shell select:focus, .form-shell textarea:focus{
  outline:none; border-color:var(--wg-blue); background:rgba(8,21,42,.8);
}
.form-shell textarea{ min-height:112px; resize:vertical; }
/* The honeypot. GF renders it as a real, visible field and relies on its OWN
   stylesheet to hide it. We disable that stylesheet, so switching the honeypot on
   put a decoy "LinkedIn" input in front of every visitor: fill it in and the
   submission is silently binned as spam. Hide it here, and keep it out of the
   accessibility tree so a screen reader is not told to complete it either. */
.form-shell .gform_validation_container,
.form-shell .gfield--type-honeypot{
  display:none !important; position:absolute !important; left:-9999px !important;
}

/* reCAPTCHA renders inside an iframe, so nothing in here reaches its interior.
   The widget is switched to Google's dark theme on the field itself, which is
   the only way to stop a white 302px block punching a hole in the navy panel.
   These rules handle the part we do own: the space around it, and the fact that
   the iframe is a fixed 304px wide and will overflow a narrow column. */
.form-shell .gfield--type-captcha{ margin-top:.15rem; }
.form-shell .ginput_recaptcha{ display:block; line-height:0; }
.form-shell .ginput_recaptcha > div{ max-width:100%; }
.form-shell .ginput_recaptcha iframe{ border-radius:0; }
/* Below this the panel is narrower than the widget. Scaling from the left keeps
   it flush with the fields above rather than drifting or clipping. */
@media(max-width:430px){
  .form-shell .ginput_recaptcha{ transform:scale(.85); transform-origin:left top; }
  .form-shell .gfield--type-captcha{ margin-bottom:-.7rem; }
}
.form-shell .gform_footer{ margin:1.6rem 0 0; padding:0; }
.form-shell .gform_button{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--serif); font-size:1.02rem; letter-spacing:0;
  padding:calc(.68rem + 2px) 1.3rem calc(.68rem - 2px); border:1px solid transparent; border-radius:0;
  background:var(--wg-blue); color:#05121F; font-weight:500;
  transition:background .25s, transform .25s;
}
.form-shell .gform_button:hover{ background:#7CB4FF; transform:translateY(-1px); }
.form-shell .gfield_description.validation_message,
.form-shell .gform_validation_errors{
  background:rgba(200,60,60,.12); border:1px solid rgba(220,90,90,.4);
  color:#F0C9C9; font-size:.85rem; padding:.6rem .8rem; margin-top:.5rem; border-radius:0;
}
.form-shell .gform_validation_errors h2{ font-size:.95rem; color:#F0C9C9; margin:0; }
.form-shell .gform_confirmation_message{
  font-family:var(--serif); font-size:1.15rem; line-height:1.5; color:#E8EDF4;
  padding:1rem 0; border-left:2px solid var(--zy-sage); padding-left:1.1rem;
}
.form-shell .form-fallback{ color:rgba(232,237,244,.7); font-size:.95rem; }
.form-shell .form-fallback a{ color:var(--wg-blue); }


@media(min-width:620px){ .two{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:#050F1F; color:#E8EDF4; border-top:1px solid var(--rule);
  padding:clamp(3rem,6vw,4.5rem) 0 0;
}
.foot-top{
  display:grid; gap:2.5rem 2rem; grid-template-columns:1fr;
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
@media(min-width:680px){ .foot-top{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .foot-top{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:3rem; } }

.foot-brand .mark{ margin-bottom:1.1rem; }
.foot-brand > p{
  margin:0 0 1.6rem; font-size:.94rem; line-height:1.6;
  color:rgba(232,237,244,.6); max-width:34ch;
}
.foot-parents{ display:grid; gap:.6rem; padding-top:1.3rem; border-top:1px solid var(--rule); }
.foot-jv{
  margin:0 0 .2rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(232,237,244,.4);
}
.foot-parents span{
  display:flex; align-items:center; gap:.6rem;
  font-size:.84rem; color:rgba(232,237,244,.72);
}

.foot-col h4{
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--zy-sage); margin:0 0 1.15rem;
}
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.foot-col li{ font-size:.92rem; line-height:1.4; color:rgba(232,237,244,.62); }
.foot-col a{
  color:rgba(232,237,244,.72); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .25s, border-color .25s;
}
.foot-col a:hover{ color:#fff; border-bottom-color:var(--wg-blue); }
.foot-col .addr{ font-style:normal; color:rgba(232,237,244,.62); font-size:.92rem; line-height:1.65; }

.foot-bottom{
  border-top:1px solid var(--rule); padding:1.5rem 0 2.2rem;
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center; justify-content:space-between;
}
.foot-bottom p{
  margin:0; font-family:var(--mono); font-size:.66rem; letter-spacing:.11em;
  color:rgba(232,237,244,.5); text-transform:uppercase;
}
/* build credit: present but deferential, brightening only on hover */
/* The build credit sits quieter than the client's own copyright line, and the
   mark is an inline-block tuned onto the text baseline so the whole thing reads
   as one line rather than a mark with a heading beside it. */
.foot-bottom .credit{
  color:rgba(232,237,244,.3); text-decoration:none; margin-left:.65rem;
  border-bottom:1px solid transparent; transition:color .25s, border-color .25s;
}
.foot-bottom .credit-mark{
  display:inline-block; width:14px; height:14px; margin-right:.45rem;
  vertical-align:-.22em; opacity:.45; transition:opacity .25s;
}
.foot-bottom .credit:hover{ color:rgba(232,237,244,.85); border-bottom-color:rgba(232,237,244,.35); }
.foot-bottom .credit:hover .credit-mark{ opacity:1; }
.foot-bottom .credit:hover{ color:var(--wg-blue); border-bottom-color:var(--wg-blue); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.rise{ opacity:0; transform:translateY(26px); transition:opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1); }
.rise.in{ opacity:1; transform:none; }
.rise[data-d="1"]{ transition-delay:.09s; }
.rise[data-d="2"]{ transition-delay:.18s; }
.rise[data-d="3"]{ transition-delay:.27s; }
.rise[data-d="4"]{ transition-delay:.36s; }
.rise[data-d="5"]{ transition-delay:.45s; }

.hero-in{ opacity:0; transform:translateY(20px); animation:heroIn .95s cubic-bezier(.2,.7,.3,1) forwards; }
.hero-in.h1{ animation-delay:.05s; }
.hero-in.h2{ animation-delay:.17s; }
.hero-in.h3{ animation-delay:.29s; }
.hero-in.h4{ animation-delay:.41s; }
.hero-in.h5{ animation-delay:.53s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }
  .rise{ opacity:1; transform:none; }
  .hero-in{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}
::selection{ background:var(--wg-blue); color:#05121F; }