/* ===================================================================
   Franklin Innovation Group — Site Styles (v3.2 clean/aligned)
   =================================================================== */

/* ---------- Core Tokens (Default / Navy - DARK) ---------- */
:root{
  /* Surfaces */
  --bg: #12172b;
  --bg-2: #0e1426;
  --surface: #171d32;
  --surface-2:#131a2b;
  --edge: rgba(255,255,255,.12);

  /* Text */
  --text: #f2f6ff;
  --muted:#c4cde0;

  /* Brand */
  --brand: #6ea8ff;
  --brand-2:#7be3ff;

  /* Feedback */
  --ok:#27d17a;
  --warn:#ffb455;
  --err:#ff7b7b;

  /* Layout */
  --radius: 18px;
  --shadow: 0 10px 28px rgba(0,0,0,.28);
  --shadow-lg: 0 14px 34px rgba(0,0,0,.36);
  --maxw: 1200px;        /* site max width */
  --maxw-wide: 1500px;   /* available if you want wider sections later */

  /* Form defaults (dark baseline) */
  --form-bg: rgba(255,255,255,.06);
  --form-border: rgba(255,255,255,.16);
  --form-text: var(--text);
  --form-ph: rgba(255,255,255,.48);
  --form-focus-border: #3b82f6;
  --form-focus-ring: rgba(59,130,246,.25);
}

/* ---------- Theme Variants ---------- */
body.theme-emerald{
  --brand:#41e2b8; --brand-2:#92ffd9;
  --bg:#122222; --bg-2:#0f1c1c;
  --surface:#172828; --surface-2:#142323;
  --text:#f7fbff; --muted:#d6efe6;
}
body.theme-plum{
  --brand:#c28bff; --brand-2:#ffa6ea;
  --bg:#1b1524; --bg-2:#161120;
  --surface:#221a2e; --surface-2:#1e1728;
  --text:#fbf7ff; --muted:#e6daf3;
}

/* ---------- Light Theme (opt-in via body.theme-light) ---------- */
body.theme-light{
  --bg:#f6f8ff; --bg-2:#eef2fb;
  --surface:#ffffff; --surface-2:#f7f9ff;
  --edge:rgba(6,20,69,.10);

  --text:#0e1222; --muted:#56607a;

  --brand:#3b82f6; --brand-2:#06b6d4;

  --shadow:0 10px 24px rgba(14,18,34,.08);
  --shadow-lg:0 16px 36px rgba(14,18,34,.12);

  /* Light-theme form tokens */
  --form-bg:#ffffff;
  --form-border:#64748b;
  --form-text:#0b1220;
  --form-ph:#64748b;
  --form-focus-border:#1d4ed8;
  --form-focus-ring:rgba(29,78,216,.28);
}

/* ---------- Reset / Base ---------- */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth; text-rendering:optimizeLegibility }
body{
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--text); line-height:1.65;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(110,168,255,.14) 0%, transparent 60%),
    radial-gradient(900px 480px at 110% 0%, rgba(123,227,255,.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
img{ max-width:100%; height:auto; display:block; image-rendering:auto }

/* ---------- Containers ---------- */
.container{ width:min(100%, calc(var(--maxw) + 4rem)); margin-inline:auto; padding-inline:2rem; }
.page{      width:min(100%, calc(var(--maxw) + 4rem)); margin-inline:auto; padding-inline:2rem; }

/* ---------- Header (sticky glass) ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,12,22,.65), rgba(10,12,22,.25));
  border-bottom: 1px solid rgba(255,255,255,.10);
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* single, consistent wrapper rule (no side padding; container provides gutters) */
.site-header .wrap,
.site-header .page{
  display:flex; align-items:center; gap:1rem;
  padding-block:.7rem;
  padding-inline:0;
}

.logo{ height:34px; width:auto; display:block }
@media (max-width:560px){ .logo{ height:26px } }

.brand{
  display:flex; align-items:center; gap:.55rem;
  font-weight:800; letter-spacing:.2px; font-size:1.02rem;
  background: linear-gradient(90deg, #1e4ad6, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

nav.site{ margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
nav.site a{
  color:var(--text); font-weight:600; font-size:.95rem; text-decoration:none;
  padding:.55rem .9rem; border-radius:999px;
  border:1px solid var(--edge);
  background: rgba(255,255,255,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
nav.site a:hover{ transform:translateY(-1px); border-color: rgba(255,255,255,.2); box-shadow:0 8px 22px rgba(0,0,0,.25) }

/* Theme toggle */
.theme-toggle{ margin-left:.4rem; padding:.55rem .7rem; border-radius:12px;
  border:1px solid var(--edge); background:rgba(255,255,255,.06); color:var(--text); cursor:pointer;
}
.theme-toggle:focus-visible{ outline:3px solid rgba(123,227,255,.5); outline-offset:2px }

/* Solid header once you scroll a bit */
.site-header.is-scrolled{
  background:#ffffff;
  border-bottom-color:#e2e8f0;
  box-shadow:0 6px 16px rgba(2, 6, 23, .08);
}

/* Header link colors when scrolled or in light theme */
.site-header.is-scrolled nav a,
body.theme-light .site-header nav a { color:#0f172a }
.site-header.is-scrolled nav a:hover,
body.theme-light .site-header nav a:hover { color:#1d4ed8 }

/* ---------- Hero (video variant) ---------- */
header.hero{
  position:relative; overflow:hidden; text-align:center;
  padding: 2.6rem 0 1.1rem;    /* container already provides horizontal gutters */
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.07));
  border-radius: var(--radius);
}
header.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand-2), transparent);
  opacity:.35;
}

/* make hero width match the site container to align edges perfectly */
.hero.hero--video.container{
  width:min(100%, calc(var(--maxw) + 4rem));
}

/* Video behind text — support both class & id used in your pages */
.hero-video,
#heroVideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-1;
  filter: blur(1.5px) brightness(.55) saturate(1.08);
  transform:translateZ(0);
}

/* Foreground hero copy — support both classnames used */
.hero-content,
.hero-overlay{
  position:relative; z-index:1;
  width:min(100%, var(--maxw));
  padding:1.6rem 0;
  margin-inline:auto;
}

h1{
  margin:.1rem 0 .35rem; font-weight:900; letter-spacing:.2px;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.1rem);
  background: linear-gradient(90deg, #1a4ad6, #3b82f6, #06b6d4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tagline, .hero .lead{ color:var(--muted) }

/* ---------- Sections / Cards ---------- */
section{
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--edge); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1rem, .7rem + 1.2vw, 1.6rem);
  margin: 1.1rem 0;
}
h2{ margin:0 0 .6rem; font-size: clamp(1.2rem, .9rem + 1.2vw, 1.55rem); font-weight:800; letter-spacing:.2px; line-height:1.2 }
h3{ margin:.15rem 0 .4rem; font-size:1.06rem; font-weight:800; display:flex; align-items:center; gap:.6rem; }
p{ margin:.35rem 0 1rem; max-width:72ch }
.muted{ color: var(--muted); }

/* Grids */
.grid-2{ display:grid; gap:.9rem }
.grid-3{ display:grid; gap:.9rem }
@media (min-width:700px){ .grid-2{ grid-template-columns:1fr 1fr } }
@media (min-width:760px){ .grid-3{ grid-template-columns:repeat(3,1fr) } }

/* Cards */
.card{
  border:1px solid var(--edge); border-radius: var(--radius);
  padding:.95rem 1rem; background: rgba(255,255,255,.055);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.32); border-color:rgba(255,255,255,.18) }

/* ---------- Icons ---------- */
.icon{ width:22px; height:22px; flex:0 0 22px; color: currentColor }

/* ---------- Links & Buttons ---------- */
a{
  color: var(--brand-2);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .15s ease, text-underline-offset .15s ease;
}
a:hover{ color: var(--brand); text-decoration: underline; text-underline-offset:4px }
/* Light theme link visibility */
body.theme-light a{ color:#1d4ed8 }
body.theme-light a:hover{ color:#1e40af }

/* CTAs */
.cta{
  display:inline-block; padding:.9rem 1.15rem; border-radius:14px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#031423; font-weight:800; text-decoration:none;
  box-shadow: var(--shadow-lg); transition: transform .12s ease, box-shadow .18s ease;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.cta:hover{ transform: translateY(-2px) scale(1.015); box-shadow: 0 14px 34px rgba(0,0,0,.36) }
.button-ghost{
  display:inline-block; padding:.7rem 1rem; border-radius:12px;
  border:1px solid var(--edge); background: rgba(255,255,255,.05); color:var(--text);
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
.button-ghost:active, .cta:active, button:active{ transform: translateY(1px) scale(.995) }

/* ---------- Lists ---------- */
.checks{ list-style:none; padding:0; margin:0 }
.checks li{ display:flex; gap:.55rem; align-items:flex-start; margin:.45rem 0 }
.checks li::before{ content:"✔"; color: var(--ok); font-weight:900; translate: 0 .06rem }

.steps{ counter-reset:s; list-style:none; padding:0 }
.steps li{ position:relative; padding-left:2.2rem; margin:.55rem 0 }
.steps li::before{
  counter-increment:s; content: counter(s);
  position:absolute; left:0; top:.05rem; width:1.6rem; height:1.6rem;
  display:grid; place-items:center; border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#00142a; font-weight:900; box-shadow: var(--shadow);
}

/* ---------- Breadcrumb fix ---------- */
nav[aria-label="Breadcrumb"] ol{ list-style:none; margin:0; padding:0 }
nav[aria-label="Breadcrumb"] li{ display:flex; align-items:center; gap:.4rem }

/* ---------- Bio / Profile ---------- */
.bio-grid{ display:grid; gap:1rem }

/* Default (mobile) size */
.profile-img, .avatar { width:120px; height:120px }

/* Tablet */
@media (min-width:600px){
  .profile-img, .avatar { width:160px; height:160px }
}

/* Desktop — make it nice and big */
@media (min-width:920px){
  .profile-img, .avatar { width:200px; height:200px }
}

/* Float + circular crop + better wrap spacing */
.profile-img{
  float:left;
  width:200px; height:200px;
  margin:0 1.5rem .8rem 0;
  border-radius:50%;
  overflow:hidden;
  shape-outside:circle();
  clip-path:circle();
  box-shadow: var(--shadow);
  border:1px solid var(--edge);
}
.profile-img img{ width:100%; height:100%; object-fit:cover; display:block }

/* CTA sits below the floated image cleanly */
.bio .cta{ clear:left; display:inline-block; margin-top:.6rem; }

/* Tighten snapshot list if used nearby */
.bio .tight{ margin:.35rem 0 0; padding-left:0 }
.bio .tight li{ margin:.25rem 0 }




/* ---------- Contact page polish ---------- */
.contact-wrap{
  border-radius:22px; padding:1.25rem;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(123,227,255,.10), rgba(255,255,255,.02) 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--edge); box-shadow: var(--shadow);
}
.contact-grid{ display:grid; gap:1rem }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 1fr } }

.panel{
  border-radius:16px; padding:1rem 1.1rem;
  background: rgba(255,255,255,.055);
  border:1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.panel:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.32); border-color:rgba(255,255,255,.18) }
.panel h3{ margin-top:0 }
.badge{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#00142a; font-weight:900;
  box-shadow: var(--shadow);
}
.list{ list-style:none; padding:0; margin:.25rem 0 0 }
.list li{ display:flex; gap:.6rem; align-items:center; margin:.45rem 0 }

/* ---------- Forms (theme-adaptive) ---------- */
:where(.input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea){
  width:100%; padding:.85rem 1rem; border-radius:12px;
  border:1px solid var(--form-border);
  background: var(--form-bg);
  color: var(--form-text);
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
  outline:none;
}
:where(.input::placeholder, textarea::placeholder){ color: var(--form-ph) }
:where(.input:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus){
  border-color: var(--form-focus-border);
  box-shadow: 0 0 0 3px var(--form-focus-ring);
}
textarea{ min-height:140px; resize: vertical }
.form-grid{ display:grid; gap:.85rem }
@media (min-width:640px){ .form-grid.two{ grid-template-columns:1fr 1fr } }
.btn-row{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:.5rem }

/* Force readable fields inside #contact regardless of theme */
#contact input, #contact textarea{
  background:#fff; border:1px solid #64748b; color:#0b1220;
}
#contact input:focus, #contact textarea:focus{
  border-color:#1d4ed8; box-shadow:0 0 0 3px rgba(29,78,216,.28);
}

/* Autofill & states */
input:-webkit-autofill, textarea:-webkit-autofill{
  -webkit-text-fill-color: var(--form-text);
  box-shadow: 0 0 0 1000px var(--form-bg) inset;
  transition: background-color 99999s ease;
}
:where(input, textarea):disabled{ opacity:.7; cursor:not-allowed }
:where(input, textarea):invalid:not(:placeholder-shown){
  border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18);
}

/* ---------- Footer ---------- */
footer.site{ color:var(--muted); text-align:center; padding:1.2rem 2rem 2.4rem }
footer.site a{ color:var(--brand-2) }

/* ---------- Accessibility & Motion ---------- */
:where(a, button, input, textarea, select):focus-visible{
  outline:3px solid rgba(29,78,216,.45); outline-offset:2px; border-radius:10px;
}
button, .button-ghost, .cta{ min-height:44px }
nav.site a{ min-height:36px }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
}

/* ---------- Utilities ---------- */
.prose p+ul, .prose p+ol{ margin-top:-.4rem }
.tiny{ font-size:.9rem }
.tight{ margin:0; padding-left:1.1rem }
.hide{ display:none !important }
::selection{ background: rgba(123,227,255,.35); color:#00142a }
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent }
*::-webkit-scrollbar{ height:10px; width:10px }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.3); border-radius:10px }
*::-webkit-scrollbar-track{ background: transparent }

/* Last section breathing room */
section:last-of-type{ margin-bottom: 2rem }

/* ===== Before & After legibility (works site-wide) ===== */
.on-dark h2 { color:#eef3ff; text-shadow:0 2px 8px rgba(0,0,0,.45); }
.on-dark p, .on-dark li { color:#dbe4fb; }
.on-dark h2 { font-weight:900; letter-spacing:.15px; }

.glass-strong{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: saturate(130%) blur(8px);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

/* If a section contains the before/after slider, treat its left column as "on dark" */
section:has(.ba-wrap) .ba-copy h2 { color:#eef3ff; text-shadow:0 2px 8px rgba(0,0,0,.45); }
section:has(.ba-wrap) .ba-copy p,
section:has(.ba-wrap) .ba-copy li { color:#dbe4fb; }

/* Anchor offset so sections aren’t hidden under the sticky header */
[id]{ scroll-margin-top: 84px }
@media (max-width: 640px){ [id]{ scroll-margin-top: 72px } }

/* ==== Bio layout (avatar + copy + snapshot) ==== */
.bio{ display:grid; gap:1rem; }

/* Desktop: 2 columns (main + snapshot) */
@media (min-width: 900px){
  .bio{
    grid-template-columns: 1fr 360px;
    align-items: stretch;
  }
}

/* Main row: avatar + text */
.bio-flex{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 1.1rem 1.25rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border:1px solid var(--edge);
  border-radius: var(--radius);
  background: rgba(255,255,255,.055);
  box-shadow: var(--shadow);
}

/* Avatar (bio card variant) */
.bio .profile-img{
  width:140px; height:140px; border-radius:50%;
  overflow:hidden; flex:0 0 auto;
  box-shadow: var(--shadow);
  border:1px solid var(--edge);
}
.bio .profile-img img{ width:100%; height:100%; object-fit:cover; display:block }

.bio-content{ min-width:0 }
.bio-content p{ margin:.35rem 0 .6rem }
.bio .cta{ margin-top:.4rem }

.bio-card{
  padding: 1rem 1.1rem;
  border:1px solid var(--edge);
  border-radius: var(--radius);
  background: rgba(255,255,255,.055);
  box-shadow: var(--shadow);
}

@media (max-width: 899.98px){
  .bio-flex{ grid-template-columns: 110px 1fr; padding: .9rem 1rem; }
  .bio .profile-img{ width:110px; height:110px }
  .bio-card{ margin-top:.25rem }
}

.bio-card .tight{ margin:.35rem 0 0; padding-left: 0 }
.bio-card .tight li{ margin:.25rem 0 }
/* Let hero section span full width, but keep content aligned */
header.hero {
  border-radius: 0;                 /* remove rounding so video fills cleanly */
  margin-inline: 0;                 /* no side gutters */
  width: 100%;                      /* full bleed background */
}

.hero-content,
.hero-overlay {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 2rem;             /* keep nice gutters on text */
}
/* ---- FINAL ALIGNMENT + FULL-BLEED HERO PATCH ---- */

/* Header wrapper = same width as site */
.page{
  width:min(100%, calc(var(--maxw) + 4rem));
  margin-inline:auto;
  padding-inline:2rem;
}

/* Let the hero background/video span edge-to-edge */
header.hero { 
  width:100%;
  margin-inline:0;
  border-radius:0;
  overflow:hidden;
}

/* In case this older rule exists anywhere, neutralize it */
.hero.hero--video.container { width:100% !important; }

/* Stack the text on top of the video and align to the site width */
#heroVideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-1;
  filter: blur(1.5px) brightness(.55) saturate(1.08);
}

/* Make the hero text container use the SAME max width as the site */
.hero-overlay{
  position:relative; z-index:1;
  max-width: var(--maxw);         /* match sections/cards */
  margin-inline:auto;
  padding-inline:2rem;            /* same side gutters */
}
/* Make hero text wrapper use the EXACT same width + gutters as site containers */
.hero-overlay,
.hero-content {
  width: min(100%, calc(var(--maxw) + 4rem));
  margin-inline: auto;
  padding-inline: 2rem;
}

/* Optional: keep paragraphs from being narrower than the container in hero */
header.hero .hero-overlay p {
  max-width: none;   /* remove the 72ch limit here so the hero copy aligns perfectly */
}
/* --- Legal/reading pages: make cards narrower and centered --- */
main.prose {
  /* a comfortable reading width; tweak 940–1040px if you like */
  width: min(100%, 980px);
  margin-inline: auto;      /* center the column */
  padding-inline: 2rem;     /* keep the same side gutters */
}

main.prose section {
  /* let each card fill the prose column, not the full site container */
  max-width: 100%;
  margin-inline: auto;
}