/*
Theme Name: BFI School v17
Theme URI: https://bfi-school.no/
Author: Bjørnafjorden International School
Description: Responsive one-page theme matching the approved BFI v17 preview.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bfi-school-v17
*/

:root{
  --navy:#123b78;
  --blue:#0d77b5;
  --light:#eef8ff;
  --teal:#0fb3b7;
  --green:#68b62e;
  --sky:#48afe0;
  --ink:#15376f;
  --copy:#20447a;
  --line:#66a8da;
  --max:1536px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{width:min(var(--max),calc(100% - 44px));margin:0 auto}

/* HEADER */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(242,250,255,.96);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(15,62,115,.05);
}
.header-inner{
  height:118px;display:flex;align-items:center;gap:28px;
}
.brand{width:420px;max-width:28vw;flex:0 0 auto}
.brand img{width:100%;height:auto}
nav{margin-left:auto}
nav ul{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0}
nav a{
  font-size:14px;font-weight:700;color:#14376f;
  padding:48px 0 43px;position:relative;white-space:nowrap;
}
nav a.active:after,nav a:hover:after{
  content:"";position:absolute;left:0;right:0;bottom:32px;height:2px;background:#123b78;
}
.top-cta{
  margin-left:24px;background:var(--blue);color:#fff;
  border-radius:999px;padding:17px 36px;font-size:16px;font-weight:700;white-space:nowrap;
}

/* HERO */
.hero{
  position:relative;overflow:hidden;
  min-height:650px;
  background:linear-gradient(90deg,#f8fcff 0%,#eff8ff 42%,#e6f4ff 100%);
}
.hero-photo{
  position:absolute;right:0;top:0;bottom:0;width:70%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 6%,rgba(0,0,0,.25) 15%,rgba(0,0,0,.68) 28%,#000 43%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 6%,rgba(0,0,0,.25) 15%,rgba(0,0,0,.68) 28%,#000 43%,#000 100%);
}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;
}
.hero-photo:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#f8fcff 0%,rgba(248,252,255,.98) 7%,rgba(248,252,255,.80) 18%,rgba(248,252,255,.39) 30%,rgba(248,252,255,.08) 42%,transparent 53%);
}
.hero-inner{
  position:relative;z-index:3;width:53%;
  padding:72px 0 52px 5vw;
}
.kicker{
  color:#126ca8;text-transform:uppercase;letter-spacing:.34em;
  font-size:16px;margin-bottom:25px;
}
h1,h2,h3{margin:0}
.hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(60px,5.1vw,84px);
}
.hero h1 .blue{color:#0d6ea9}
.hero-copy{
  margin:28px 0 34px;max-width:690px;
  font-size:21px;line-height:1.48;color:#173b72;
}
.buttons{display:flex;gap:18px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:58px;padding:0 31px;border-radius:999px;
  font-size:16px;font-weight:700;border:2px solid var(--blue)
}
.btn.primary{background:var(--blue);color:#fff}
.btn.secondary{background:rgba(255,255,255,.8);color:var(--ink)}
.arrow{font-size:27px;font-weight:400}

/* AUDIENCE ROW */
.audience-row{
  margin-top:-10px;position:relative;z-index:6;
  padding:20px 5vw 28px;
  background:linear-gradient(180deg,rgba(248,252,255,0),#f9fcff 22%,#fff 100%);
}
.audiences{
  display:grid;grid-template-columns:repeat(4,1fr);gap:44px;
}
.audience{
  display:grid;grid-template-columns:86px 1fr;gap:22px;align-items:center
}
.icon{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#0c4b9f
}
.audience:nth-child(2) .icon{background:var(--teal)}
.audience:nth-child(3) .icon{background:var(--green)}
.audience:nth-child(4) .icon{background:var(--sky)}
.icon svg{width:46px;height:46px;fill:none;stroke:#fff;stroke-width:2.2}
.audience h3{font-size:20px;margin-bottom:5px}
.audience p{font-size:15px;line-height:1.35;margin:0;color:#173a71}
.connect{
  display:grid;grid-template-columns:1fr auto 1fr;gap:27px;align-items:center;
  margin:24px 4vw 0;color:#1268a6
}
.connect:before,.connect:after{content:"";height:1px;background:#67a9d8}
.connect span{font-size:13px;letter-spacing:.33em;font-weight:700;white-space:nowrap}

/* LOWER SECTIONS */
.section{padding:96px 0}
.section.light{background:linear-gradient(135deg,#f2f9ff,#e6f4ff)}
.section.white{background:#fff}
.section.dark{background:#0d3260;color:#fff}
.section-head{max-width:890px;margin-bottom:46px}
.section-label{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#0d73b0;font-weight:800;margin-bottom:14px}
.section h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:52px;font-weight:500;letter-spacing:-.025em;line-height:1.06;margin-bottom:18px
}
.section .lead{font-size:21px;line-height:1.5;color:#506d8e}
.dark .section-label{color:#8ed1f1}.dark .lead{color:#dbe9f5}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  background:#fff;border:1px solid #d8e7f2;border-radius:20px;
  padding:31px;box-shadow:0 10px 30px rgba(17,58,105,.05)
}
.card h3{font-size:22px;margin-bottom:10px}.card p{font-size:16px;line-height:1.48;color:#526d8b;margin:0}
.dark .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.dark .card h3{color:#fff}.dark .card p{color:#dbe9f5}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.big-photo{border-radius:18px;overflow:hidden;box-shadow:0 20px 45px rgba(13,55,120,.12)}
.big-photo img{width:100%;height:430px;object-fit:cover;object-position:50% 55%}
.checks{list-style:none;padding:0;margin:22px 0 0}
.checks li{position:relative;padding:8px 0 8px 28px;font-size:18px;color:#526d8b}
.checks li:before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;border-radius:50%;background:var(--green)}
.pathway{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative;margin-top:45px}
.pathway:before{content:"";position:absolute;left:9%;right:9%;top:27px;height:2px;background:#bdd5e8}
.step{text-align:center;position:relative;z-index:2}
.num{width:56px;height:56px;margin:0 auto 15px;border-radius:50%;display:grid;place-items:center;background:#0d78b7;color:#fff;font-weight:800;border:8px solid #edf8ff}
.step:nth-child(2) .num{background:var(--teal)}.step:nth-child(3) .num{background:var(--green)}.step:nth-child(4) .num{background:var(--navy)}
.step strong{display:block;margin-bottom:5px}.step span{font-size:14px;color:#68809a}
.cta-panel{display:flex;align-items:center;justify-content:space-between;gap:32px;background:linear-gradient(135deg,#0d3778,#0877b9);padding:48px;border-radius:28px;color:#fff}
.cta-panel h2{font-size:42px;color:#fff;margin-bottom:10px}.cta-panel p{margin:0;color:#e0edf8;max-width:730px}
.cta-panel .btn{background:#fff;color:var(--navy);border-color:#fff}

footer{background:#081f42;color:#cbd9e6;padding:48px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:42px}
.footer-logo{width:300px;filter:brightness(0) invert(1);margin-bottom:14px}
footer h3{color:#fff;margin-bottom:12px}footer a{color:#fff}
.footer-links{display:grid;gap:8px}
.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;font-size:13px}

/* RESPONSIVE */
@media(max-width:1200px){
  .brand{width:320px}.nav ul,nav ul{gap:18px}.hero-inner{width:59%}.audiences{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .header-inner{height:auto;min-height:94px;flex-wrap:wrap;padding:12px 0}.brand{width:260px;max-width:none}
  nav{order:3;width:100%;overflow:auto;margin-left:0}nav ul{justify-content:flex-start}.top-cta{margin-left:auto}
  .hero{min-height:880px}.hero-inner{width:100%;padding-right:5vw}.hero-photo{top:420px;width:100%;height:460px}
  .cards,.two-col{grid-template-columns:1fr}.pathway{grid-template-columns:repeat(2,1fr)}.pathway:before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:620px){
  .hero h1{font-size:48px}.hero-copy{font-size:17px}.buttons{flex-direction:column;align-items:flex-start}
  .audiences{grid-template-columns:1fr}.connect span{font-size:9px;letter-spacing:.18em}.section h2{font-size:38px}
  .pathway{grid-template-columns:1fr}.cta-panel{display:block;padding:32px 24px}.cta-panel .btn{margin-top:20px}
  .footer-grid{grid-template-columns:1fr}
}

/* --- v2 corrections to match uploaded reference --- */
header{
  position:absolute!important;
  top:0;left:0;right:0;
  z-index:100;
  background:transparent!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
.header-inner{
  height:126px!important;
  padding-top:10px;
  align-items:flex-start!important;
}
.brand{
  width:430px!important;
  max-width:29vw!important;
  margin-top:2px;
  overflow:visible!important;
}
.brand img{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left top!important;
  overflow:visible!important;
}
nav{
  padding-top:4px;
}
nav a{
  padding:46px 0 40px!important;
}
nav a.active:after,nav a:hover:after{
  bottom:29px!important;
}
.top-cta{
  margin-top:16px!important;
}
.hero{
  min-height:760px!important;
  padding-top:0!important;
}
.hero-photo{
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:79%!important;
}
.hero-photo img{
  object-position:50% 51%!important;
}
.hero-inner{
  width:54%!important;
  padding:183px 0 58px 5vw!important;
}
.audience-row{
  margin-top:-16px!important;
}
@media(max-width:1200px){
  .brand{width:360px!important;max-width:31vw!important}
  .hero-photo{width:76%!important}
  .hero-inner{width:58%!important}
}
@media(max-width:900px){
  header{position:relative!important;background:rgba(242,250,255,.96)!important}
  .header-inner{height:auto!important;align-items:center!important;padding-top:12px!important}
  .brand{width:260px!important;max-width:none!important}
  .top-cta{margin-top:0!important}
  .hero-inner{padding-top:54px!important;width:100%!important}
  .hero-photo{top:430px!important;width:100%!important;height:450px!important}
}


/* --- v3: taller first-screen composition --- */
@media (min-width:901px){
  /* Keep the complete opening composition within one normal desktop viewport,
     while giving the hero/photo substantially more vertical room. */
  .hero{
    min-height:calc(100vh - 150px)!important;
    height:calc(100vh - 150px)!important;
  }
  .hero-photo{
    height:100%!important;
  }
  .hero-photo img{
    object-position:50% 47%!important;
  }
  .hero-inner{
    padding-top:205px!important;
    padding-bottom:32px!important;
  }
  .kicker{
    margin-bottom:20px!important;
  }
  .hero-copy{
    margin-top:22px!important;
    margin-bottom:26px!important;
  }
  .audience-row{
    min-height:150px!important;
    height:150px!important;
    padding-top:8px!important;
    padding-bottom:7px!important;
    margin-top:0!important;
  }
  .audience{
    grid-template-columns:72px 1fr!important;
    gap:16px!important;
  }
  .icon{
    width:68px!important;
    height:68px!important;
  }
  .icon svg{
    width:39px!important;
    height:39px!important;
  }
  .audience h3{
    font-size:17px!important;
  }
  .audience p{
    font-size:13px!important;
  }
  .connect{
    margin-top:12px!important;
  }
}


/* --- v4 requested refinements --- */
@media (min-width:901px){
  /* Move the main hero text block down by roughly 15% */
  .hero-inner{
    padding-top:245px!important;
  }

  /* Make the top logo ~20% smaller and move it further left */
  .brand{
    width:288px!important;
    max-width:none!important;
    margin-left:-28px!important;
    margin-top:4px!important;
  }
  .brand img{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:left top!important;
  }

  /* Keep header spacing balanced after shrinking logo */
  .header-inner{
    gap:24px!important;
  }
}

/* Footer logo: always show the complete logo without cropping */
.footer-logo{
  width:260px!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
  filter:brightness(0) invert(1)!important;
}

/* Mobile/tablet: keep logo fully visible as well */
@media(max-width:900px){
  .brand{
    margin-left:0!important;
    width:230px!important;
  }
  .brand img{
    max-height:none!important;
  }
  .footer-logo{
    width:230px!important;
  }
}


/* --- v5 requested refinements --- */
@media (min-width:901px){
  .brand{
    margin-left:0!important;
  }
}


/* --- v6: move top logo 15% left --- */
@media (min-width:901px){
  .brand{
    transform:translateX(-15%)!important;
  }
}


/* --- v7: bind top logo to hero text alignment --- */
.hero-brand{
  display:block!important;
  width:288px!important;
  max-width:24vw!important;
  height:auto!important;
  margin:0 0 18px 0!important;
  transform:translateX(-5.5%)!important;
  position:relative!important;
  z-index:4!important;
  overflow:visible!important;
}
.hero-brand img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left top!important;
}

/* The header now contains only navigation and CTA. */
.header-inner{
  justify-content:flex-end!important;
}

/* Remove obsolete desktop positioning from the former header logo. */
@media (min-width:901px){
  .brand{display:none!important;}
  .hero-brand{
    width:288px!important;
    max-width:24vw!important;
  }
}

/* Keep the same B-to-A alignment on smaller screens as the text reflows. */
@media (max-width:900px){
  .hero-brand{
    width:230px!important;
    max-width:68vw!important;
    transform:translateX(-5.5%)!important;
    margin-bottom:16px!important;
  }
}


/* --- v8: logo aligned horizontally with top navigation,
   hero text slightly higher, with more space below logo --- */
@media (min-width:901px){
  .hero-inner{
    padding-top:155px!important;
  }

  .hero-brand{
    position:absolute!important;
    top:28px!important;
    left:5vw!important;
    width:288px!important;
    max-width:24vw!important;
    margin:0!important;
    transform:translateX(-5.5%)!important;
    z-index:110!important;
  }

  .kicker{
    margin-top:38px!important;
    margin-bottom:20px!important;
  }
}

/* Responsive relationship remains tied to the hero content start */
@media (max-width:900px){
  .hero-brand{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    margin-bottom:34px!important;
  }
  .hero-inner{
    padding-top:42px!important;
  }
}


/* --- v9: move hero text from "A STRONGER TOMORROW" 5 cm down --- */
@media (min-width:901px){
  .hero-inner{
    padding-top:344px!important; /* previous 155px + approx. 189px (5 cm) */
  }
  .hero-brand{
    /* Keep logo fixed on the top-menu line */
    top:28px!important;
  }
  .kicker{
    margin-top:38px!important;
  }
}


/* --- v10: show original full-colour BFI logo in footer --- */
.footer-logo{
  filter:none!important;
  opacity:1!important;
}


/* --- v11: footer only — preserve graphic, make logo text white --- */
.footer-logo-wrap{
  position:relative!important;
  width:260px!important;
  max-width:100%!important;
  line-height:0!important;
}
.footer-logo-wrap > .footer-logo{
  width:100%!important;
  height:auto!important;
  display:block!important;
  filter:none!important;
  opacity:1!important;
}
.footer-logo-wrap > .footer-logo-white-text{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:auto!important;
  filter:brightness(0) invert(1)!important;
  clip-path:inset(74% 0 0 0)!important;
  pointer-events:none!important;
}
@media(max-width:900px){
  .footer-logo-wrap{width:230px!important;}
}


/* --- v12: vertically center top menu links with Get in touch button --- */
@media (min-width:901px){
  nav{
    padding-top:16px!important;
    align-self:flex-start!important;
  }
  nav a{
    padding-top:46px!important;
    padding-bottom:28px!important;
  }
  .top-cta{
    margin-top:16px!important;
  }
}


/* --- v13: menu text centered on the vertical midpoint of Get in touch --- */
@media (min-width:901px){
  nav{
    padding-top:0!important;
    margin-top:16px!important;
    height:52px!important;
    display:flex!important;
    align-items:center!important;
  }
  nav a{
    padding-top:0!important;
    padding-bottom:0!important;
    height:52px!important;
    display:flex!important;
    align-items:center!important;
    line-height:1!important;
  }
  nav a.active:after,
  nav a:hover:after{
    bottom:3px!important;
  }
  .top-cta{
    margin-top:16px!important;
    min-height:52px!important;
    display:flex!important;
    align-items:center!important;
  }
}


/* --- v14: fade existing hero image at the bottom as well as the left --- */
@media (min-width:901px){
  .hero-photo{
    -webkit-mask-image:
      linear-gradient(to right,
        transparent 0%,
        rgba(0,0,0,.05) 6%,
        rgba(0,0,0,.25) 15%,
        rgba(0,0,0,.68) 28%,
        #000 43%,
        #000 100%),
      linear-gradient(to bottom,
        #000 0%,
        #000 72%,
        rgba(0,0,0,.94) 77%,
        rgba(0,0,0,.72) 84%,
        rgba(0,0,0,.38) 91%,
        transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right,
        transparent 0%,
        rgba(0,0,0,.05) 6%,
        rgba(0,0,0,.25) 15%,
        rgba(0,0,0,.68) 28%,
        #000 43%,
        #000 100%),
      linear-gradient(to bottom,
        #000 0%,
        #000 72%,
        rgba(0,0,0,.94) 77%,
        rgba(0,0,0,.72) 84%,
        rgba(0,0,0,.38) 91%,
        transparent 100%);
    mask-composite: intersect;
  }

  /* Extra soft pale overlay so the lower transition visually matches
     the light page background and leaves no hard image edge. */
  .hero-photo::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:
      linear-gradient(to bottom,
        transparent 0%,
        transparent 70%,
        rgba(248,252,255,.05) 76%,
        rgba(248,252,255,.22) 84%,
        rgba(248,252,255,.62) 93%,
        #f8fcff 100%)!important;
  }
}


/* --- v15: longer, softer fade into the background of the strip below --- */
@media (min-width:901px){
  .hero-photo{
    -webkit-mask-image:
      linear-gradient(to right,
        transparent 0%,
        rgba(0,0,0,.05) 6%,
        rgba(0,0,0,.25) 15%,
        rgba(0,0,0,.68) 28%,
        #000 43%,
        #000 100%),
      linear-gradient(to bottom,
        #000 0%,
        #000 54%,
        rgba(0,0,0,.98) 60%,
        rgba(0,0,0,.92) 67%,
        rgba(0,0,0,.80) 74%,
        rgba(0,0,0,.63) 81%,
        rgba(0,0,0,.43) 88%,
        rgba(0,0,0,.22) 94%,
        transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right,
        transparent 0%,
        rgba(0,0,0,.05) 6%,
        rgba(0,0,0,.25) 15%,
        rgba(0,0,0,.68) 28%,
        #000 43%,
        #000 100%),
      linear-gradient(to bottom,
        #000 0%,
        #000 54%,
        rgba(0,0,0,.98) 60%,
        rgba(0,0,0,.92) 67%,
        rgba(0,0,0,.80) 74%,
        rgba(0,0,0,.63) 81%,
        rgba(0,0,0,.43) 88%,
        rgba(0,0,0,.22) 94%,
        transparent 100%);
    mask-composite:intersect;
  }

  .hero-photo::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:
      linear-gradient(to bottom,
        transparent 0%,
        transparent 53%,
        rgba(238,248,255,.015) 59%,
        rgba(238,248,255,.05) 66%,
        rgba(238,248,255,.12) 73%,
        rgba(238,248,255,.24) 80%,
        rgba(238,248,255,.42) 87%,
        rgba(238,248,255,.68) 94%,
        #eef8ff 100%)!important;
  }

  /* Ensure the bottom of the hero itself meets the audience strip
     in the exact same pale background colour. */
  .hero{
    background:linear-gradient(to bottom,#f8fcff 0%,#f8fcff 52%,#f3faff 76%,#eef8ff 100%)!important;
  }
}


/* --- v16: remove visible bottom seam without starting fade earlier --- */
@media (min-width:901px){
  .hero{
    overflow:visible!important;
    background:#eef8ff!important;
  }

  .hero-photo{
    bottom:-4px!important;
    -webkit-mask-image:
      linear-gradient(to right,
        transparent 0%,
        rgba(0,0,0,.05) 6%,
        rgba(0,0,0,.25) 15%,
        rgba(0,0,0,.68) 28%,
        #000 43%,
        #000 100%),
      linear-gradient(to bottom,
        #000 0%,
        #000 72%,
        rgba(0,0,0,.98) 76%,
        rgba(0,0,0,.88) 81%,
        rgba(0,0,0,.68) 86%,
        rgba(0,0,0,.44) 90%,
        rgba(0,0,0,.22) 94%,
        rgba(0,0,0,.07) 97%,
        transparent 99%,
        transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right,
        transparent 0%,
        rgba(0,0,0,.05) 6%,
        rgba(0,0,0,.25) 15%,
        rgba(0,0,0,.68) 28%,
        #000 43%,
        #000 100%),
      linear-gradient(to bottom,
        #000 0%,
        #000 72%,
        rgba(0,0,0,.98) 76%,
        rgba(0,0,0,.88) 81%,
        rgba(0,0,0,.68) 86%,
        rgba(0,0,0,.44) 90%,
        rgba(0,0,0,.22) 94%,
        rgba(0,0,0,.07) 97%,
        transparent 99%,
        transparent 100%);
    mask-composite:intersect;
  }

  .hero-photo::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:linear-gradient(to bottom,
      transparent 0%,
      transparent 72%,
      rgba(238,248,255,.03) 77%,
      rgba(238,248,255,.12) 83%,
      rgba(238,248,255,.30) 88%,
      rgba(238,248,255,.55) 93%,
      rgba(238,248,255,.82) 97%,
      #eef8ff 99%,
      #eef8ff 100%)!important;
  }

  .audience-row{
    position:relative!important;
    z-index:5!important;
    background:#eef8ff!important;
  }
}


/* --- v17: responsive desktop/laptop scaling --- */

/* Shared layout geometry */
:root{
  --page-pad: clamp(28px, 5vw, 84px);
  --hero-logo-w: clamp(220px, 18vw, 288px);
  --hero-copy-w: clamp(470px, 46vw, 760px);
  --hero-title-size: clamp(52px, 5.1vw, 84px);
  --hero-body-size: clamp(17px, 1.25vw, 21px);
  --nav-size: clamp(13px, .92vw, 16px);
}

/* Keep the main content grid aligned at every width */
.wrap{
  width:min(100% - (2 * var(--page-pad)), var(--max))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Header/navigation scales rather than relying on fixed offsets */
.header-inner{
  min-height:clamp(86px, 8.2vw, 126px)!important;
  height:auto!important;
  padding-top:clamp(8px, .8vw, 14px)!important;
  padding-bottom:0!important;
}

nav{
  gap:clamp(14px, 1.55vw, 30px)!important;
  margin-top:clamp(10px, 1.05vw, 16px)!important;
  height:clamp(44px, 3.4vw, 52px)!important;
}

nav a{
  font-size:var(--nav-size)!important;
  height:clamp(44px, 3.4vw, 52px)!important;
  white-space:nowrap!important;
}

.top-cta{
  font-size:var(--nav-size)!important;
  margin-top:clamp(10px, 1.05vw, 16px)!important;
  min-height:clamp(44px, 3.4vw, 52px)!important;
  padding-left:clamp(18px, 1.55vw, 28px)!important;
  padding-right:clamp(18px, 1.55vw, 28px)!important;
  white-space:nowrap!important;
}

/* Hero occupies a proportional first-screen area */
@media (min-width:901px){
  .hero{
    min-height:clamp(650px, 72vh, 860px)!important;
    height:auto!important;
    overflow:visible!important;
  }

  .hero-inner{
    width:var(--hero-copy-w)!important;
    max-width:52vw!important;
    padding-left:var(--page-pad)!important;
    padding-top:clamp(250px, 28vh, 344px)!important;
    padding-bottom:clamp(36px, 5vh, 72px)!important;
  }

  .hero-brand{
    position:absolute!important;
    top:clamp(18px, 2.1vw, 28px)!important;
    left:var(--page-pad)!important;
    width:var(--hero-logo-w)!important;
    max-width:none!important;
    transform:translateX(-5.5%)!important;
  }

  .hero h1{
    font-size:var(--hero-title-size)!important;
    line-height:.98!important;
  }

  .hero-copy{
    font-size:var(--hero-body-size)!important;
    line-height:1.55!important;
    max-width:clamp(480px, 39vw, 670px)!important;
  }

  .hero-photo{
    width:clamp(66%, 73vw, 79%)!important;
    right:0!important;
    top:0!important;
    bottom:-4px!important;
  }

  .hero-photo img{
    object-position:center 47%!important;
  }

  .audience-row{
    min-height:clamp(138px, 12vh, 160px)!important;
    height:auto!important;
    padding-top:clamp(8px, 1vw, 14px)!important;
    padding-bottom:clamp(8px, 1vw, 14px)!important;
  }

  .audience{
    grid-template-columns:clamp(58px, 4.8vw, 72px) 1fr!important;
    gap:clamp(12px, 1.1vw, 16px)!important;
  }

  .icon{
    width:clamp(58px, 4.6vw, 68px)!important;
    height:clamp(58px, 4.6vw, 68px)!important;
  }

  .connect{
    margin-top:clamp(8px, 1vw, 14px)!important;
  }
}

/* Laptop range: keep the same composition, just scaled */
@media (min-width:901px) and (max-width:1366px){
  :root{
    --page-pad: clamp(30px, 4vw, 54px);
    --hero-logo-w: clamp(205px, 18vw, 245px);
    --hero-copy-w: clamp(455px, 49vw, 610px);
    --hero-title-size: clamp(48px, 5vw, 68px);
    --hero-body-size: clamp(16px, 1.3vw, 18px);
    --nav-size: clamp(12px, .9vw, 14px);
  }

  nav{
    gap:clamp(10px, 1.15vw, 18px)!important;
  }

  .top-cta{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .hero-inner{
    max-width:54vw!important;
    padding-top:clamp(225px, 29vh, 292px)!important;
  }

  .hero-photo{
    width:74%!important;
  }

  .hero-copy{
    max-width:520px!important;
  }

  .audience h3{
    font-size:clamp(15px, 1.2vw, 17px)!important;
  }

  .audience p{
    font-size:clamp(12px, .95vw, 13px)!important;
  }
}

/* Compact laptop / landscape tablet */
@media (min-width:901px) and (max-width:1120px){
  nav{
    gap:10px!important;
  }

  nav a{
    font-size:12px!important;
  }

  .top-cta{
    font-size:12px!important;
    padding-left:15px!important;
    padding-right:15px!important;
  }

  .hero-inner{
    max-width:57vw!important;
  }

  .hero-photo{
    width:71%!important;
  }
}

/* Mobile/tablet remains stacked and fluid */
@media (max-width:900px){
  :root{
    --page-pad:24px;
  }

  .wrap{
    width:calc(100% - 48px)!important;
  }

  .hero-inner{
    width:auto!important;
    max-width:none!important;
    padding-left:var(--page-pad)!important;
    padding-right:var(--page-pad)!important;
  }

  .hero h1{
    font-size:clamp(42px, 11vw, 62px)!important;
  }

  .hero-copy{
    font-size:17px!important;
  }
}