/* Homepage master — same purple/sunset visual system as the approved interior pages. */
.home-site{background:#fffaf6}
.home-main{position:relative;z-index:2}

.home-hero{
  position:relative;
  max-width:1448px;
  min-height:650px;
  margin:0 auto;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) 560px;
  align-items:center;
  gap:18px;
  padding:56px 68px 76px;
  background:
    radial-gradient(ellipse at 48% 67%,rgba(255,235,188,.92) 0 7%,rgba(255,205,160,.48) 29%,transparent 57%),
    radial-gradient(ellipse at 94% 38%,rgba(83,24,92,.28) 0 10%,rgba(111,50,121,.15) 26%,transparent 46%),
    radial-gradient(ellipse at 7% 35%,rgba(120,56,139,.22) 0 13%,transparent 38%),
    linear-gradient(180deg,#dfb3d2 0%,#f1bdbd 27%,#ffd2a7 57%,#efac9e 78%,#ad77aa 100%);
  isolation:isolate;
}
.home-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.26),transparent 38%,rgba(74,23,111,.06)),
    radial-gradient(ellipse at 50% 43%,rgba(255,250,242,.36) 0 18%,transparent 62%);
}
.home-hero:after{
  content:"";
  position:absolute;
  left:-5%;right:-5%;bottom:-61px;
  height:92px;
  z-index:8;
  background:#fffaf6;
  border-radius:50% 50% 0 0/70% 70% 0 0;
  pointer-events:none;
}
.home-hero-copy{position:relative;z-index:4;max-width:700px;padding:22px 0 76px}
.home-hero-copy .script{font-size:clamp(3.8rem,5.2vw,5.6rem);color:#542071;margin-bottom:13px}
.home-hero-copy .script:after{width:70px;background:#f2b52a}
.home-hero-copy .headline{font-family:Georgia,"Times New Roman",serif;color:#542071;font-size:clamp(3.35rem,4.8vw,5.15rem);line-height:1.01;letter-spacing:-1.6px;max-width:760px;margin-bottom:24px}
.home-hero-copy .lede{color:#4f3b57;font-size:clamp(1.12rem,1.45vw,1.32rem);line-height:1.55;max-width:640px}
.home-hero-copy .button.primary{background:#542071;box-shadow:0 10px 25px rgba(74,23,111,.20)}
.home-hero-copy .button.primary:hover{background:#672885}

/* Lighthouse detail is a clean crop from the existing approved homepage artwork,
   used only as a quiet scenic accent behind the new live HTML. */
.home-lighthouse{
  position:absolute;
  z-index:0;
  left:-20px;
  bottom:30px;
  width:168px;
  height:395px;
  opacity:.24;
  background-image:url('/assets/home-campaign-purple-sunset-v9.webp?v=20260901-homeportrait10');
  background-repeat:no-repeat;
  background-size:1448px 1086px;
  background-position:-2px -185px;
  filter:saturate(.78) hue-rotate(292deg) contrast(.92);
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.95),rgba(0,0,0,.55) 58%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,rgba(0,0,0,.95),rgba(0,0,0,.55) 58%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%);
  mask-composite:intersect;
  pointer-events:none;
}

/* Keep Laura on the homepage only. Crop the approved portrait from the existing
   homepage master and feather it into the sunset so it no longer reads as a poster. */
.home-portrait{
  position:relative;
  z-index:3;
  height:590px;
  overflow:hidden;
  align-self:end;
  margin-right:-26px;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 54% 45%,#000 0 50%,rgba(0,0,0,.96) 58%,rgba(0,0,0,.66) 70%,rgba(0,0,0,.20) 80%,transparent 90%);
  mask-image:radial-gradient(ellipse 62% 78% at 54% 45%,#000 0 50%,rgba(0,0,0,.96) 58%,rgba(0,0,0,.66) 70%,rgba(0,0,0,.20) 80%,transparent 90%);
}
.home-portrait:before{
  content:"";
  position:absolute;
  inset:7% 1% 3% -4%;
  z-index:-1;
  background:radial-gradient(ellipse at 53% 46%,rgba(254,187,133,.28),rgba(102,38,119,.10) 52%,transparent 72%);
  filter:blur(18px);
}
.home-portrait img{
  position:absolute;
  width:1260px;
  max-width:none;
  height:auto;
  left:-603px;
  top:-79px;
  filter:saturate(.98) contrast(1.01) brightness(1.015);
  user-select:none;
  -webkit-user-drag:none;
}

.home-story{position:relative;background:#fffaf6;padding:28px 54px 48px}
.home-story-inner{max-width:980px;margin:0 auto;text-align:center}
.home-story-script{font-size:clamp(2.9rem,4.2vw,4rem);color:#542071;margin:0 0 20px}
.home-story-script:after{width:68px;margin:16px auto 0;background:#f2b52a}
.home-story-inner>p:not(.script){max-width:820px;margin:0 auto 14px;color:#514657;font-size:1.08rem;line-height:1.62}
.home-story-inner .home-accent{color:#542071!important;font-weight:800}

.home-priorities{padding-top:34px;padding-bottom:56px}
.home-priority-grid{gap:24px}
.home-priority-card{min-height:250px;display:flex;flex-direction:column}
.home-priority-card .icon{margin-bottom:17px}
.home-priority-card h3{font-size:1.18rem;line-height:1.16}
.home-priority-card p{font-size:.98rem;line-height:1.48;flex:1}
.home-priority-card a{align-self:flex-start;color:#542071;font-weight:800;text-decoration:none;border-bottom:2px solid #f2b52a;padding-bottom:3px}

.home-contribute{background:#fffaf6;padding:26px 36px;border-top:1px solid rgba(84,32,113,.12)}
.home-contribute-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px}
.home-contribute-kicker{margin:0 0 4px;color:#542071;font-size:.82rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.home-contribute h2{margin:0 0 5px;color:#4a176f;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.65rem,2.4vw,2.15rem)}
.home-contribute-inner p:not(.home-contribute-kicker){margin:0;color:#55475a;line-height:1.55}
.home-contribute-button{background:#542071;color:#fff;box-shadow:0 7px 16px rgba(84,32,113,.14);white-space:nowrap}
.home-contribute-button:hover{background:#682b83}

.home-cta{background:linear-gradient(90deg,#32104e 0%,#541d6b 55%,#32104e 100%);color:#fff;padding:32px 36px;border-top:1px solid rgba(242,181,42,.38)}
.home-cta-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px}
.home-cta-script{font-family:"Segoe Script","Brush Script MT",cursive;font-size:clamp(2.2rem,3.4vw,3.25rem);line-height:1.05;margin:0 0 5px;color:#fff}
.home-cta-inner p:not(.home-cta-script){margin:0;color:#f6eaf8}
.home-cta-button{background:#f2b52a;color:#3a1749;box-shadow:0 8px 18px rgba(29,7,41,.22);white-space:nowrap}
.home-cta-button:hover{background:#f7c44c}

@media(max-width:1120px){
  .home-hero{grid-template-columns:minmax(0,1fr) 465px;padding-left:48px;padding-right:44px}
  .home-portrait{height:545px;margin-right:-18px}
  .home-portrait img{width:1165px;left:-558px;top:-72px}
  .home-lighthouse{opacity:.18}
}
@media(max-width:900px){
  .home-hero{grid-template-columns:1fr;min-height:auto;padding:44px 28px 74px;text-align:center}
  .home-hero-copy{max-width:820px;margin:0 auto;padding:12px 0 10px}
  .home-hero-copy .script:after{margin-left:auto;margin-right:auto}
  .home-hero-copy .lede{margin-left:auto;margin-right:auto}
  .home-hero-copy .actions{justify-content:center}
  .home-lighthouse{left:-40px;bottom:250px;opacity:.11}
  .home-portrait{width:min(560px,100%);height:500px;margin:0 auto -30px}
  .home-portrait img{width:1060px;left:-501px;top:-67px}
  .home-priority-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:620px){
  .home-hero{padding:32px 18px 64px}
  .home-hero-copy .script{font-size:3rem}
  .home-hero-copy .headline{font-size:2.75rem;letter-spacing:-.8px}
  .home-hero-copy .lede{font-size:1.05rem}
  .home-lighthouse{display:none}
  .home-portrait{height:410px;width:100%;margin-bottom:-22px}
  .home-portrait img{width:875px;left:-410px;top:-54px}
  .home-story{padding:24px 20px 42px}
  .home-priority-grid{grid-template-columns:1fr!important}
  .home-priority-card{min-height:0}
  .home-contribute-inner{display:block;text-align:center}
  .home-contribute-button{width:100%;margin-top:18px}
  .home-cta-inner{display:block;text-align:center}
  .home-cta-button{width:100%;margin-top:20px}
}

/* 2026-09-01 mobile enforcement pass.
   Desktop rules above remain untouched. These overrides only apply to narrow
   screens so the homepage reflows instead of behaving like a scaled desktop
   canvas. */
@media(max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .home-site{width:100%;max-width:100%;min-height:100dvh;overflow-x:hidden}
  .topbar{width:100%;max-width:none;padding:16px 18px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
  .brand{width:min(330px,92vw);min-width:0;justify-content:center}
  .brand-crop{width:min(330px,92vw);height:84px;margin:0 auto}
  .brand-crop img{width:980px;left:-18px;top:-6px}
  .nav{width:100%;margin:0;justify-content:center;gap:8px 14px;flex-wrap:wrap;font-size:14px}
  .nav a{padding:8px 0 6px}
  .nav .cta{flex-basis:100%;max-width:240px;margin-top:2px;padding:11px 15px;text-align:center}
  .home-main{width:100%;max-width:100%;overflow-x:hidden}
  .home-hero{width:100%;max-width:none;grid-template-columns:1fr;min-height:auto;padding:38px 24px 70px;text-align:center}
  .home-hero-copy{width:100%;max-width:760px;margin:0 auto;padding:8px 0 8px}
  .home-hero-copy .script:after{margin-left:auto;margin-right:auto}
  .home-hero-copy .lede{margin-left:auto;margin-right:auto}
  .home-hero-copy .actions{justify-content:center}
  .home-lighthouse{left:-42px;bottom:235px;opacity:.10}
  .home-portrait{width:min(540px,100%);height:480px;margin:0 auto -28px}
  .home-portrait img{width:1020px;left:-482px;top:-64px}
  .home-story{width:100%;padding-left:24px;padding-right:24px}
  .home-priority-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .home-cta-inner{width:100%}
}

@media(max-width:620px){
  .topbar{width:100%;padding:12px 14px 10px;gap:6px}
  .brand{width:min(286px,90vw)}
  .brand-crop{width:min(286px,90vw);height:72px}
  .brand-crop img{width:850px;left:-15px;top:-4px}
  .nav{width:100%;gap:5px 10px;font-size:12.5px;line-height:1.2}
  .nav a{padding:6px 0 5px}
  .nav .cta{width:100%;max-width:260px;flex-basis:100%;padding:10px 13px;margin-top:3px}
  .home-hero{grid-template-columns:1fr;padding:28px 16px 58px}
  .home-hero-copy .script{font-size:2.85rem}
  .home-hero-copy .headline{font-size:2.55rem;line-height:1.02;letter-spacing:-.7px}
  .home-hero-copy .lede{font-size:1.02rem;line-height:1.5}
  .home-lighthouse{display:none}
  .home-portrait{width:100%;height:370px;margin:0 auto -18px}
  .home-portrait img{width:800px;left:-374px;top:-48px}
  .home-story{padding:22px 18px 38px}
  .home-story-script{font-size:2.65rem}
  .home-priorities{padding-top:28px;padding-bottom:44px}
  .home-priority-grid{grid-template-columns:1fr!important;gap:16px}
  .home-priority-card{min-height:0}
  .home-cta{padding:28px 18px}
  .home-cta-inner{display:block;text-align:center}
  .home-cta-button{width:100%;margin-top:18px;white-space:normal}
  .footer{width:100%;padding:16px 18px}
}

/* Dedicated logo asset rendering fix — keep the existing header layout, but
   render the standalone Laura Hughes logo normally instead of cropping it as
   if it were the old full-page composite artwork. */
.home-site .brand-crop img{
  position:static;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  left:auto;
  top:auto;
  object-fit:contain;
  object-position:center center;
}

/* v17: dedicated approved portrait asset. The previous rules cropped a full
   1280px homepage screenshot using large negative offsets; this element now
   contains only Laura's approved portrait, so render it directly and let the
   existing portrait frame/mask handle both desktop and mobile layouts. */
.home-site .home-portrait img{
  position:static;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  object-position:center center;
  left:auto;
  top:auto;
}