/* ============================================================
   maryleeweir.com, sections below the hero
   Light throughout. Only the closing CTA goes dark.
   ============================================================ */

.mlw-page,
.mlw-page *{box-sizing:border-box}

.mlw-page{
  --ink:#22303a;
  --deep:#0d2137;
  --teal:#0d7377;
  --glow:#1db095;
  --muted:#5c6b70;
  --ivory:#f4f5f0;
  --sand:#eae6dc;
  --white:#fff;
  --hair:#d7d9d0;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  margin:0 calc(50% - 50vw);
  color:var(--ink);
  font-family:Montserrat,"Montserrat Fallback",system-ui,sans-serif;
  line-height:1.75;
  overflow:hidden;
}

.mlw-page .mlw-wrap{width:min(1120px,calc(100% - 48px));margin:0 auto}

/* ---------- bands ---------- */
.mlw-band{padding:96px 0;background:var(--ivory)}
.mlw-band-white{background:var(--white)}
.mlw-band-sand{position:relative;background:var(--sand)}
.mlw-band-sand::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(13,115,119,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,115,119,.09) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 80% at 50% 50%,#000 20%,transparent 82%);
  -webkit-mask-image:radial-gradient(90% 80% at 50% 50%,#000 20%,transparent 82%);
  pointer-events:none;
}
.mlw-band-sand > .mlw-wrap{position:relative;z-index:1}

/* ---------- shared type ---------- */
.mlw-page .mlw-kicker{
  margin:0 0 14px;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--teal);
}
.mlw-page h2{
  margin:0 0 20px;
  font-family:"Cormorant Garamond","Cormorant Garamond Fallback",Georgia,serif;
  font-weight:400;
  font-size:clamp(2.1rem,3.6vw,3.05rem);
  line-height:1.08;
  letter-spacing:-.008em;
  color:var(--deep);
  text-wrap:balance;
  max-width:20ch;
}
.mlw-page h3{
  margin:0 0 10px;
  font-family:Montserrat,"Montserrat Fallback",system-ui,sans-serif;
  font-weight:600;
  font-size:1rem;
  line-height:1.35;
  letter-spacing:.005em;
  color:var(--deep);
}
.mlw-page p{margin:0 0 18px;max-width:66ch}
.mlw-page p:last-child{margin-bottom:0}
.mlw-intro{font-size:1.12rem;color:#40525a;max-width:62ch}

/* ---------- A. the invisible layer ---------- */
.mlw-origin-head{max-width:56ch}
.mlw-origin-head h2{
  margin:0;
  font-size:clamp(1.4rem,2vw,1.8rem);
  color:var(--teal);
  max-width:none;
}

.mlw-statement-big{
  margin:38px 0 0;
  max-width:26ch;
  font-family:"Cormorant Garamond","Cormorant Garamond Fallback",Georgia,serif;
  font-size:clamp(2.1rem,4.4vw,3.65rem);
  font-style:italic;
  line-height:1.1;
  letter-spacing:-.008em;
  color:var(--deep);
  text-wrap:balance;
}
.mlw-statement-big b{font-style:normal;font-weight:400;color:var(--teal)}

.mlw-trace{
  position:relative;
  margin:52px 0 0;
  padding:0;
}
.mlw-trace svg{display:block;width:100%;height:132px}
.mlw-trace .trace-base{fill:none;stroke:#c3ccc4;stroke-width:1.4}
.mlw-trace .trace-live{
  fill:none;
  stroke:var(--glow);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:150 4000;
  stroke-dashoffset:4150;
  animation:mlwTrace 7.5s linear infinite;
}
@keyframes mlwTrace{to{stroke-dashoffset:0}}

.mlw-trace-labels{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:2px;
  padding-top:14px;
  border-top:1px solid var(--hair);
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted);
}
.mlw-trace-labels b{color:var(--teal);font-weight:600}

.mlw-origin-cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;
  margin-top:46px;
}
.mlw-origin-cols p{font-size:.99rem;color:#3d4f57}
.mlw-origin-cols p + p{margin-top:16px}

/* ---------- B. the listening statement ---------- */
.mlw-statement{
  font-family:"Cormorant Garamond","Cormorant Garamond Fallback",Georgia,serif;
  font-size:clamp(1.85rem,3.6vw,3rem);
  line-height:1.16;
  letter-spacing:-.006em;
  color:var(--deep);
  max-width:19ch;
  margin:0;
  text-wrap:balance;
}
.mlw-statement-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  margin-top:46px;
  padding-top:34px;
  border-top:1px solid var(--hair);
}
.mlw-statement-grid p{font-size:.99rem;color:#3d4f57}

/* ---------- C / D. cards ---------- */
.mlw-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
.mlw-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mlw-card{
  position:relative;
  padding:30px 28px 28px;
  background:var(--white);
  border:1px solid var(--hair);
  border-top:3px solid var(--teal);
  border-radius:3px;
}
.mlw-band-white .mlw-card{background:var(--ivory)}
.mlw-band-sand .mlw-card{background:rgba(255,255,255,.78)}
.mlw-card p{margin:0;font-size:.93rem;color:#43555d;max-width:none}
.mlw-card-layer{
  display:block;
  margin:0 0 12px;
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--glow);
}

/* ---------- E. how I work ---------- */
.mlw-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:46px}
.mlw-step{padding-top:20px;border-top:1px solid var(--hair)}
.mlw-step-n{
  display:block;
  margin-bottom:12px;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--teal);
}
.mlw-step p{margin:0;font-size:.93rem;color:#43555d;max-width:none}

/* ---------- F. closing CTA, the one dark band ---------- */
.mlw-close{
  position:relative;
  padding:92px 0 84px;
  overflow:hidden;
  background:
    radial-gradient(110% 90% at 84% 106%, rgba(13,115,119,.6) 0%, rgba(13,115,119,0) 62%),
    #0a1a2b;
  color:#dfe9e8;
}
.mlw-close::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(185,221,218,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(185,221,218,.14) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 25%,transparent 88%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 25%,transparent 88%);
  pointer-events:none;
}
.mlw-close > .mlw-wrap{position:relative;z-index:1}
.mlw-close .mlw-kicker{color:#b9ddda}
.mlw-close h2{color:#fff}
.mlw-close p{color:#c4d6d6}
.mlw-close .mlw-intro{color:#d5e3e2;max-width:64ch}
.mlw-close .mlw-intro b{color:#fff;font-weight:600}

.mlw-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:46px}
.mlw-offer{
  display:flex;
  flex-direction:column;
  padding:30px 28px;
  border:1px solid rgba(185,221,218,.28);
  border-radius:4px;
  background:rgba(4,16,28,.4);
}
.mlw-offer h3{color:#fff;font-size:1.02rem}
.mlw-offer p{font-size:.93rem;max-width:none;color:#b6cbcb}
.mlw-offer-price{
  margin:16px 0 22px;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--glow);
}
.mlw-offer .mlw-btn{margin-top:auto;align-self:flex-start}

.mlw-page .mlw-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  border-radius:3px;
  border:1px solid transparent;
  font-family:Montserrat,"Montserrat Fallback",system-ui,sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.11em;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.mlw-page .mlw-btn::after{content:"→";font-size:1.05rem;font-weight:400;transition:transform .25s ease}
.mlw-page .mlw-btn:hover::after,.mlw-page .mlw-btn:focus-visible::after{transform:translateX(5px)}
.mlw-page .mlw-btn:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.mlw-page .mlw-btn-solid{background:var(--glow);border-color:var(--glow);color:#062018 !important}
.mlw-page .mlw-btn-solid:hover,.mlw-page .mlw-btn-solid:focus-visible{background:#fff;border-color:#fff;color:#0a1a2b !important;transform:translateY(-2px)}
.mlw-page .mlw-btn-line{border-color:rgba(185,221,218,.45);color:#e8ebe4 !important}
.mlw-page .mlw-btn-line:hover,.mlw-page .mlw-btn-line:focus-visible{border-color:#b9ddda;background:rgba(185,221,218,.1);transform:translateY(-2px)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .mlw-band{padding:74px 0}
  .mlw-close{padding:74px 0 68px}
  .mlw-origin,.mlw-statement-grid{grid-template-columns:1fr;gap:38px}
  .mlw-cards,.mlw-cards-3,.mlw-steps,.mlw-offers{grid-template-columns:1fr;gap:22px}
  .mlw-pull{max-width:none}
  .mlw-page h2,.mlw-statement{max-width:none}
}
@media (max-width:560px){
  .mlw-entry{grid-template-columns:1fr;gap:8px}
  .mlw-entry-year{text-align:left;padding-top:0}
  .mlw-entry-year::after{display:none}
  .mlw-timeline::before{display:none}
  .mlw-page .mlw-btn{width:100%;max-width:340px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .mlw-page *{transition:none !important;animation:none !important}
}