/* BridgeWell — CYBHI California landing page styles (v3 copy) */

/* ============================================================
   HERO
   ============================================================ */
.cybhi-hero{
  position:relative;color:var(--on-dark);overflow:hidden;
  min-height:88vh;display:flex;flex-direction:column;
  background:var(--forest);
}
.cybhi-hero-bg{
  position:absolute;inset:0;
  background:var(--forest-deep) url('../assets/texture-darkgreen.png') center/600px 600px;
  pointer-events:none;z-index:0;
}
.cybhi-hero-marks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.cy-mark{position:absolute;border-radius:50%;filter:blur(60px);opacity:.18;}
.cy-mark-a{
  width:520px;height:520px;right:-120px;top:-120px;
  background:var(--yellow);
}
.cy-mark-b{
  width:420px;height:420px;left:-100px;bottom:-160px;
  background:var(--lime-deep);opacity:.22;
}

.cybhi-hero-wrap{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding-top:160px;padding-bottom:96px;}
.cybhi-hero-copy{display:flex;flex-direction:column;gap:26px;max-width:880px;}
.cybhi-hero-copy h1{
  color:var(--on-dark);font-weight:200;
  font-size:clamp(44px,6.6vw,96px);
  line-height:.98;letter-spacing:-.03em;margin:0;
}
.cybhi-hero-copy h1 em{font-style:normal;color:var(--yellow);}
.cybhi-hero-copy .lede{color:var(--on-dark-mute);max-width:62ch;font-size:19px;line-height:1.55;margin:0;}
.cybhi-hero-copy .hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:10px;}
.hero-tertiary{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--lime);font-weight:500;font-size:15px;letter-spacing:-.005em;
  padding:14px 4px;position:relative;
}
.hero-tertiary::after{
  content:"";position:absolute;left:4px;right:24px;bottom:9px;height:1.5px;
  background:currentColor;transform:scaleX(.3);transform-origin:left;
  transition:transform .28s var(--ease-out);
}
.hero-tertiary:hover::after{transform:scaleX(1);}
.hero-tertiary .arr{transition:transform .25s var(--ease-out);}
.hero-tertiary:hover .arr{transform:translateX(3px);}

@media (max-width:920px){
  .cybhi-hero{min-height:0;}
  .cybhi-hero-wrap{padding-top:140px;padding-bottom:64px;}
  .cybhi-hero-copy h1{font-size:clamp(36px,9vw,58px);}
}

/* ============================================================
   SECTION 2 — WHAT CHANGED
   ============================================================ */
.cy-changed{background:var(--surface);padding:var(--section-pad) 0;position:relative;}
.cy-changed-inner{display:flex;flex-direction:column;gap:64px;}
.cy-changed-head{display:flex;flex-direction:column;gap:18px;max-width:820px;}
.cy-changed-head h2{margin:0;color:var(--forest);}
.cy-changed-head h2 em{font-style:normal;}

.cy-changed-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:start;
}
.cy-changed-body{display:flex;flex-direction:column;gap:20px;}
.cy-changed-body p{margin:0;font-size:18px;line-height:1.62;color:var(--ink-2);max-width:56ch;}

/* Old/new compare card */
.cy-changed-aside{position:sticky;top:120px;}
.cy-compare{
  background:var(--surface-2);border-radius:var(--radius-card);
  padding:36px 36px 40px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow-1);
  position:relative;
}
.cy-compare-row{
  display:flex;flex-direction:column;gap:6px;
  padding:22px 24px;border-radius:var(--radius-lg);
  background:var(--surface);
  border:1.5px solid var(--line-soft);
  position:relative;
}
.cy-compare-row--old{
  opacity:.78;
}
.cy-compare-row--old .cy-compare-val{
  text-decoration:line-through;text-decoration-color:rgba(58,74,66,.45);
  text-decoration-thickness:1.5px;
}
.cy-compare-row--new{
  background:var(--forest);color:var(--on-dark);border-color:var(--forest);
}
.cy-compare-tag{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--ink-3);
}
.cy-compare-row--new .cy-compare-tag{color:var(--lime);}
.cy-compare-val{
  font-size:22px;font-weight:500;letter-spacing:-.012em;color:var(--forest);line-height:1.2;
}
.cy-compare-row--new .cy-compare-val{color:var(--on-dark);font-weight:400;}
.cy-compare-meta{font-size:13.5px;line-height:1.5;color:var(--ink-3);}
.cy-compare-row--new .cy-compare-meta{color:var(--on-dark-mute);}

.cy-compare-arrow{
  align-self:center;width:34px;height:34px;border-radius:50%;
  background:var(--yellow);color:var(--forest);
  display:flex;align-items:center;justify-content:center;
  margin:-4px 0;
}
.cy-compare-arrow svg{width:18px;height:18px;}

@media (max-width:920px){
  .cy-changed{padding:var(--section-pad-sm) 0;}
  .cy-changed-grid{grid-template-columns:1fr;gap:48px;}
  .cy-changed-aside{position:relative;top:0;}
}

/* ============================================================
   SECTION 3 — THE GAP
   ============================================================ */
.cy-gap{position:relative;background:var(--tan);padding:var(--section-pad) 0;overflow:hidden;}
.cy-gap-tex{
  position:absolute;inset:0;
  background:url('../assets/texture-sun.png') center/700px 700px;
  opacity:.18;mix-blend-mode:multiply;pointer-events:none;
}
.cy-gap .container{position:relative;z-index:1;}
.cy-gap-inner{display:flex;flex-direction:column;gap:64px;}
.cy-gap-head{display:flex;flex-direction:column;gap:18px;max-width:820px;}
.cy-gap-head h2{margin:0;color:var(--forest);}
.cy-gap-head h2 em{font-style:normal;color:var(--yellow-deep);}

.cy-gap-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:start;
}
.cy-gap-body{display:flex;flex-direction:column;gap:22px;}
.cy-gap-body p{margin:0;font-size:18px;line-height:1.62;color:var(--ink-2);max-width:54ch;}
.cy-gap-punch{
  font-weight:500;color:var(--forest)!important;
  font-size:22px!important;line-height:1.35!important;
  padding-top:8px;
  letter-spacing:-.008em;
}

/* Claim-record doc card */
.cy-gap-doc{
  margin:0;
  background:var(--surface);border-radius:var(--radius-card);
  padding:32px 32px 28px;
  box-shadow:var(--shadow-2);
  position:relative;
}
.cy-doc-label{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--ink-3);
  padding-bottom:18px;margin-bottom:6px;
  border-bottom:1.5px solid var(--line-soft);
  display:block;
}
.cy-doc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.cy-doc-list li{
  display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:baseline;
  padding:16px 0;border-bottom:1px dashed var(--line-soft);
}
.cy-doc-list li:last-child{border-bottom:0;}
.cy-doc-row-label{
  font-size:13px;color:var(--ink-3);font-weight:500;letter-spacing:.02em;
}
.cy-doc-row-val{
  font-size:15.5px;color:var(--forest);font-weight:500;text-align:right;
  letter-spacing:-.005em;
}
.cy-doc-row--missing{
  position:relative;
  background:transparent;
  margin:8px 0 0;padding:14px 0;border-bottom:0;
  grid-template-columns:1fr auto;
  z-index:0;
}
.cy-doc-row--missing::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-24px;right:-24px;
  background:rgba(242,199,92,.12);
  border-radius:14px;
  z-index:-1;
}
.cy-doc-row--missing .cy-doc-row-val{
  color:var(--ink-2);font-weight:400;text-decoration:line-through;
  text-decoration-color:rgba(156,106,26,.5);text-decoration-thickness:1.5px;
}
.cy-doc-row-flag{
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--yellow-deep);
  padding:5px 10px;border-radius:var(--radius-pill);
  background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--yellow-deep);
  white-space:nowrap;align-self:center;
  grid-column:1/-1;justify-self:start;margin-top:6px;
}

@media (max-width:920px){
  .cy-gap{padding:var(--section-pad-sm) 0;}
  .cy-gap-grid{grid-template-columns:1fr;gap:40px;}
}

/* Phones: claim-record rows were two-column (label | value) and the
   right column got clipped on small screens. Stack vertically. */
@media (max-width:640px){
  .cy-gap-doc{padding:24px 22px 20px;}
  .cy-doc-list li{
    grid-template-columns:1fr;
    align-items:start;
    gap:4px;
    padding:14px 0;
  }
  .cy-doc-row-val{text-align:left;}
  .cy-doc-row--missing{
    padding:14px 0 16px;
  }
  .cy-doc-row--missing::before{
    left:-18px;right:-18px;
  }
  .cy-doc-row-flag{margin-top:8px;}
}

/* ============================================================
   SECTION 4 — BRIDGEWELL'S ROLE
   ============================================================ */
.cy-role{background:var(--surface);padding:var(--section-pad) 0;}
.cy-role-inner{display:flex;flex-direction:column;gap:64px;}
.cy-role-head{display:flex;flex-direction:column;gap:18px;max-width:880px;}
.cy-role-head h2{margin:0;color:var(--forest);}
.cy-role-head h2 em{font-style:normal;}

.cy-role-grid{
  display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start;
}
.cy-role-body{display:flex;flex-direction:column;gap:22px;}
.cy-role-body p{margin:0;font-size:18px;line-height:1.62;color:var(--ink-2);max-width:56ch;}
.cy-role-link{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  margin-top:8px;color:var(--forest);font-weight:600;font-size:15.5px;
  padding:14px 4px;position:relative;
}
.cy-role-link::after{
  content:"";position:absolute;left:4px;right:24px;bottom:9px;height:1.5px;
  background:currentColor;transform:scaleX(.35);transform-origin:left;
  transition:transform .28s var(--ease-out);
}
.cy-role-link:hover::after{transform:scaleX(1);}
.cy-role-link:hover .arr{transform:translateX(3px);}
.cy-role-link .arr{transition:transform .25s var(--ease-out);}

/* Stat card */
.cy-role-stat{position:sticky;top:120px;}
.cy-stat-card{
  background:var(--forest-deep) url('../assets/texture-darkgreen.png') center/600px 600px;
  color:var(--on-dark);
  border-radius:var(--radius-card);
  padding:40px 36px 36px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-2);
}
.cy-stat-card > *{position:relative;z-index:1;}
.cy-stat-eyebrow{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--lime);
}
.cy-stat-num{
  font-weight:200;font-size:clamp(96px,12vw,148px);
  line-height:.9;letter-spacing:-.045em;color:var(--lime);
  display:flex;align-items:flex-start;gap:6px;margin:6px 0 -4px;
}
.cy-stat-pct{font-size:.42em;font-weight:300;margin-top:.34em;letter-spacing:-.02em;}
.cy-stat-lbl{font-size:16px;line-height:1.45;color:var(--on-dark);max-width:24ch;}
.cy-stat-divider{height:1.5px;background:rgba(177,214,117,.22);margin:22px 0 6px;}
.cy-stat-compliance{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.cy-stat-compliance li{
  display:flex;align-items:center;gap:12px;
  font-size:14.5px;color:var(--on-dark-mute);
}
.cy-comp-dot{
  width:6px;height:6px;border-radius:50%;background:var(--yellow);flex:0 0 6px;
}

@media (max-width:920px){
  .cy-role{padding:var(--section-pad-sm) 0;}
  .cy-role-grid{grid-template-columns:1fr;gap:48px;}
  .cy-role-stat{position:relative;top:0;}
}

/* ============================================================
   SECTION 5 — CTA BLOCK (reuses .finalcta look, scoped overrides)
   ============================================================ */
.cy-cta{
  position:relative;padding:var(--section-pad) 0;color:var(--on-dark);overflow:hidden;
}
.cy-cta .tex-layer{position:absolute;inset:0;background:var(--forest) url('../assets/texture-darkgreen.png') center/600px 600px;z-index:0;}
.cy-cta .swoop{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.4;}
.cy-cta .swoop svg{width:100%;height:100%;display:block;}
@media (max-width:640px){.cy-cta .swoop{opacity:.28;}}
.cy-cta .container{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;max-width:880px;}
.cy-cta h2{
  color:var(--on-dark);font-weight:200;
  font-size:clamp(40px,5.2vw,76px);
  line-height:1.0;letter-spacing:-.03em;margin:0;max-width:20ch;
}
.cy-cta h2 em{font-style:normal;color:var(--lime);}
.cy-cta p{
  margin:0;color:var(--on-dark-mute);
  font-size:18px;line-height:1.55;max-width:60ch;
}
.cy-cta .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:14px;}
.cy-cta-trust{
  margin-top:18px!important;
  font-size:14px;color:var(--on-dark-mute);opacity:.75;
  font-style:italic;
  display:inline-flex;align-items:center;gap:10px;
}
.cy-cta-trust::before{
  content:"";width:24px;height:1.5px;background:var(--lime);opacity:.5;
}

@media (max-width:920px){
  .cy-cta{padding:var(--section-pad-sm) 0;}
}

/* ============================================================
   CALCULATOR MODAL
   ============================================================ */
.calc-modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:32px;
}
.calc-modal[hidden]{display:none;}
.calc-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(14,31,24,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s var(--ease-out);
}
.calc-modal.is-open .calc-modal-backdrop{opacity:1;}
.calc-modal-panel{
  position:relative;
  width:min(1440px, 96vw);
  height:min(900px, 92vh);
  background:var(--surface-2);
  border-radius:20px;
  box-shadow:0 24px 64px rgba(14,31,24,.32), 0 4px 12px rgba(14,31,24,.18);
  overflow:hidden;
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .25s var(--ease-out), transform .28s var(--ease-out);
}
.calc-modal.is-open .calc-modal-panel{opacity:1;transform:none;}
.calc-modal-frame{
  width:100%;height:100%;border:0;background:transparent;display:block;
}
.calc-modal-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(255,255,255,.92);color:var(--forest);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(14,31,24,.18);
  transition:background .15s var(--ease-out), transform .15s var(--ease-out);
}
.calc-modal-close:hover{background:#fff;transform:scale(1.05);}
.calc-modal-close:focus-visible{outline:2px solid var(--lime);outline-offset:2px;}
.calc-modal-close svg{width:18px;height:18px;}

body.calc-modal-open{overflow:hidden;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:760px){
  .calc-modal{padding:12px;}
  .calc-modal-panel{width:100%;height:100%;border-radius:14px;}
  .calc-modal-close{top:10px;right:10px;width:36px;height:36px;}
}
