:root{
  --ink:#273142;
  --navy:#244e70;
  --navy-deep:#17364f;
  --sky:#dceef6;
  --sky-soft:#eef7fb;
  --cream:#fff8ef;
  --ivory:#fffdf8;
  --rose:#d88f9d;
  --rose-soft:#f7e7ea;
  --gold:#c89a4b;
  --gold-soft:#f8efd9;
  --sage:#9daf9d;
  --sage-soft:#edf2ec;
  --line:#d9d5cf;
  --muted:#647184;
  --white:#ffffff;
  --shadow:0 12px 30px rgba(28,55,76,.10);
  --shadow-soft:0 5px 16px rgba(28,55,76,.07);
  --radius:18px;
  --max:1120px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  font-family:"Segoe UI", Candara, "Trebuchet MS", Arial, sans-serif;
  line-height:1.7;
  background:
    radial-gradient(circle at top left, rgba(220,238,246,.70), transparent 28%),
    radial-gradient(circle at top right, rgba(247,231,234,.65), transparent 25%),
    linear-gradient(180deg,var(--ivory),#fbf8f2 58%,#f7f3ec);
}

a{color:var(--navy)}
a:hover{color:var(--navy-deep)}

.site-header{
  background:rgba(255,253,248,.96);
  border-bottom:1px solid rgba(36,78,112,.14);
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(10px);
  box-shadow:0 3px 15px rgba(28,55,76,.05);
}

.tagline{
  text-align:center;
  padding:.45rem 1rem;
  background:linear-gradient(90deg,var(--navy-deep),var(--navy));
  color:white;
  font-size:.88rem;
  letter-spacing:.045em;
}

nav{
  max-width:var(--max);
  margin:auto;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.9rem 1.1rem;
  flex-wrap:wrap;
}

nav a{
  text-decoration:none;
  font-weight:600;
  color:var(--ink);
  transition:.2s ease;
}

nav a:hover{color:var(--navy)}

.brand{
  margin-right:auto;
  color:var(--navy-deep)!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.28rem;
  font-weight:700;
  letter-spacing:.01em;
}

.nav-cta{
  background:var(--navy);
  color:white!important;
  padding:.62rem 1rem;
  border-radius:999px;
  box-shadow:var(--shadow-soft);
}

.nav-cta:hover{
  background:var(--navy-deep);
  transform:translateY(-1px);
}

main{
  max-width:var(--max);
  margin:auto;
  padding:0 1rem 3rem;
}

section{
  margin:1.25rem 0;
  padding:3.6rem clamp(1.2rem,3vw,2.2rem);
  border-radius:var(--radius);
  border:1px solid rgba(36,78,112,.10);
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow-soft);
}

section:nth-of-type(even){
  background:linear-gradient(135deg,var(--sky-soft),rgba(255,255,255,.95));
}

.hero{
  margin-top:1.5rem;
  padding:5.2rem clamp(1.3rem,4vw,3.2rem);
  background:
    linear-gradient(135deg,rgba(255,248,239,.96),rgba(238,247,251,.96)),
    white;
  border:1px solid rgba(200,154,75,.28);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.hero:after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  right:-95px;
  top:-90px;
  background:radial-gradient(circle,rgba(216,143,157,.25),rgba(216,143,157,0));
  pointer-events:none;
}

.small-hero{
  padding:4rem clamp(1.3rem,4vw,3rem);
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gold);
  font-size:.82rem;
  font-weight:800;
  margin-bottom:.7rem;
}

h1,h2,h3,h4{
  color:var(--navy-deep);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  letter-spacing:-.015em;
}

h1{
  margin:.25rem 0 1rem;
  font-size:clamp(2.55rem,5.4vw,4.7rem);
  line-height:1.05;
}

h2{
  font-size:clamp(1.9rem,3.4vw,2.75rem);
  line-height:1.14;
  margin-top:0;
}

h3{
  font-size:1.35rem;
  line-height:1.25;
}

p{margin:.7rem 0 1rem}

.lead{
  max-width:850px;
  font-size:1.24rem;
  color:#394b5c;
}

.statement{
  margin:1.6rem 0;
  padding:1.4rem 1.5rem;
  background:linear-gradient(135deg,var(--gold-soft),#fffdf8);
  border-left:5px solid var(--gold);
  border-radius:0 14px 14px 0;
  font-size:1.12rem;
  box-shadow:var(--shadow-soft);
}

.actions{
  display:flex;
  gap:.85rem;
  flex-wrap:wrap;
  margin:1.4rem 0 .5rem;
}

.button{
  display:inline-block;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));
  color:white;
  text-decoration:none;
  padding:.88rem 1.35rem;
  font-weight:750;
  letter-spacing:.01em;
  box-shadow:0 8px 18px rgba(23,54,79,.18);
  transition:.2s ease;
  cursor:pointer;
}

.button:hover{
  color:white;
  transform:translateY(-2px);
  box-shadow:0 11px 22px rgba(23,54,79,.22);
}

.button.secondary{
  background:white;
  color:var(--navy);
  border:1px solid rgba(36,78,112,.35);
  box-shadow:none;
}

.button.secondary:hover{
  background:var(--sky-soft);
  color:var(--navy-deep);
}

.text-link{
  font-weight:750;
  text-decoration:none;
  border-bottom:1px solid rgba(36,78,112,.25);
}

.text-link:hover{border-color:var(--navy)}

.micro,.small{
  color:var(--muted);
  font-size:.93rem;
}

.three,.four,.color-grid{
  display:grid;
  gap:1.25rem;
}

.three{grid-template-columns:repeat(3,1fr)}
.four{grid-template-columns:repeat(4,1fr)}
.color-grid{grid-template-columns:repeat(4,1fr)}

article{
  background:linear-gradient(180deg,#ffffff,#fffdfa);
  border:1px solid rgba(36,78,112,.12);
  border-radius:16px;
  padding:1.45rem;
  box-shadow:var(--shadow-soft);
  transition:.2s ease;
}

article:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.compact article{text-align:center}

.steps article:nth-child(1){background:linear-gradient(180deg,#fff,var(--sky-soft))}
.steps article:nth-child(2){background:linear-gradient(180deg,#fff,var(--rose-soft))}
.steps article:nth-child(3){background:linear-gradient(180deg,#fff,var(--gold-soft))}

.steps span,.steps-list span{
  display:inline-grid;
  place-items:center;
  width:2.35rem;
  height:2.35rem;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),#b37b2e);
  color:white;
  font-weight:800;
  box-shadow:0 4px 12px rgba(179,123,46,.2);
}

.progress-image{
  width:100%;
  height:auto;
  margin:1.7rem 0;
  border-radius:18px;
  border:1px solid rgba(36,78,112,.12);
  box-shadow:var(--shadow);
}

blockquote{
  margin:1.6rem 0;
  padding:1.4rem 1.7rem;
  border-left:5px solid var(--rose);
  background:linear-gradient(135deg,var(--rose-soft),#fff);
  border-radius:0 16px 16px 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.45rem;
  color:#354354;
}

cite{
  display:block;
  margin-top:.7rem;
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:.92rem;
  color:var(--muted);
}

.story-callout{
  background:linear-gradient(135deg,#fff8ef,var(--rose-soft));
  border-color:rgba(216,143,157,.25);
}

.cta{
  text-align:center;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy));
  color:white;
  border:none;
  box-shadow:var(--shadow);
}

.cta h2,.cta h3{color:white}
.cta a{color:white}

.notice{
  background:linear-gradient(135deg,var(--sage-soft),#fff);
  border:1px solid rgba(157,175,157,.28);
  border-radius:14px;
}

.friend-grid article{
  text-align:center;
  overflow:hidden;
}

.friend-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:linear-gradient(135deg,var(--sky-soft),var(--cream));
  border-radius:14px;
  margin-bottom:.9rem;
}

.single-friend{
  display:grid;
  grid-template-columns:minmax(0, 620px);
  justify-content:center;
}

.single-friend-gallery{
  justify-content:center;
}

.inline-friend-gallery.single-friend-gallery img{
  width:min(100%, 360px);
}

.narrow{max-width:820px;margin-left:auto;margin-right:auto}

.steps-list article{margin:1.15rem 0}

.swatch{
  display:block;
  width:58px;
  height:58px;
  border-radius:50%;
  border:2px solid rgba(39,49,66,.12);
  box-shadow:0 4px 10px rgba(39,49,66,.08);
}

.gold{background:#d6ad45}
.pink{background:#ec8ab2}
.white{background:#fff}
.orange{background:#ef8a32}
.yellow{background:#f2d64e}
.lightblue{background:#86c9ea}
.darkblue{background:#275486}
.purple{background:#7e4fa3}

.choices label,.color-choices label{
  border:1px solid rgba(36,78,112,.18);
  border-radius:14px;
  padding:1rem;
  background:#fff;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  transition:.2s ease;
}

.choices label:hover,.color-choices label:hover{
  border-color:var(--gold);
  transform:translateY(-1px);
}

.choices label{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

.color-choices{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.85rem;
}

.field{
  display:block;
  margin:1rem 0;
  font-weight:700;
}

.field input,.field textarea{
  display:block;
  width:100%;
  max-width:680px;
  margin-top:.4rem;
  padding:.85rem 1rem;
  border:1px solid rgba(36,78,112,.24);
  border-radius:12px;
  background:#fff;
  font:inherit;
  color:var(--ink);
}

.field input:focus,.field textarea:focus{
  outline:3px solid rgba(134,201,234,.35);
  border-color:var(--navy);
}

.summary{
  background:linear-gradient(135deg,var(--sky-soft),#fff);
  border:1px solid rgba(36,78,112,.14);
  border-radius:16px;
  padding:1.6rem;
  margin-bottom:3rem;
  box-shadow:var(--shadow-soft);
}

footer{
  max-width:var(--max);
  margin:2rem auto 0;
  padding:2.8rem 1rem 3.2rem;
  display:grid;
  grid-template-columns:2fr 2fr 1fr;
  gap:2rem;
  color:#49596a;
}

footer h3,footer h4{color:var(--navy-deep)}
footer a{text-decoration:none}

@media(max-width:900px){
  .three,.four,.color-grid{grid-template-columns:1fr 1fr}
  footer{grid-template-columns:1fr}
  .site-header{position:static}
  .brand{width:100%}
}

@media(max-width:560px){
  main{padding:0 .65rem 2rem}
  section{padding:2.5rem 1rem}
  .hero{padding:3.5rem 1.15rem}
  .three,.four,.color-grid,.color-choices{grid-template-columns:1fr}
  h1{font-size:2.55rem}
  nav{gap:.7rem}
}


/* Navigation and polished shared refinements */
nav a.active:not(.brand),
nav a[aria-current="page"]:not(.brand){
  color:var(--navy-deep);
  position:relative;
}

nav a.active:not(.brand)::after,
nav a[aria-current="page"]:not(.brand)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.42rem;
  height:3px;
  border-radius:99px;
  background:var(--gold);
}

.small-hero{
  position:relative;
  overflow:hidden;
  padding:3rem clamp(1.3rem,4vw,3rem);
}

.small-hero h1{
  font-size:clamp(2.1rem,3.7vw,3.3rem);
  max-width:900px;
}

.inline-friend-gallery{
  display:flex;
  gap:.85rem;
  margin-top:1.35rem;
  align-items:end;
  justify-content:center;
}

.inline-friend-gallery img{
  width:min(28%,200px);
  aspect-ratio:1/1;
  object-fit:contain;
  background:rgba(255,255,255,.78);
  border-radius:16px;
  padding:.35rem;
  border:1px solid rgba(36,78,112,.12);
  box-shadow:var(--shadow-soft);
}

.story-hero-image{
  display:block;
  width:min(300px,42%);
  margin:1.25rem auto 0;
  aspect-ratio:1/1;
  object-fit:contain;
  background:rgba(255,255,255,.7);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}

.choices{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

.choices label{
  align-items:center;
  text-align:center;
}

.choice-image{
  width:100%;
  max-height:190px;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:12px;
  background:linear-gradient(135deg,var(--sky-soft),var(--cream));
  margin-bottom:.55rem;
}

footer{
  max-width:none;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy));
  color:rgba(255,255,255,.86);
  padding-left:max(1rem,calc((100% - var(--max))/2 + 1rem));
  padding-right:max(1rem,calc((100% - var(--max))/2 + 1rem));
  margin-top:2.5rem;
}

footer h3,footer h4,footer a{color:white}
footer a:hover{color:var(--gold-soft)}

@media(max-width:900px){
  .choices{grid-template-columns:1fr}
  .inline-friend-gallery img{width:30%}
}


/* Compact homepage composition */
.home-page main{
  max-width:1120px;
  padding-bottom:1.5rem;
}

.home-page section{
  margin:.8rem 0;
  padding:2rem clamp(1rem,2.5vw,1.7rem);
}

.home-page .home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(180px,.55fr);
  gap:1.5rem;
  align-items:center;
  padding:2rem clamp(1rem,2.7vw,1.8rem);
  min-height:0;
}

.home-page .home-hero h1{
  font-size:clamp(1.9rem,3vw,2.7rem);
  line-height:1.08;
  margin:.2rem 0 .7rem;
  max-width:680px;
}

.home-page .home-hero .eyebrow{
  font-size:.72rem;
  letter-spacing:.13em;
  margin-bottom:.45rem;
}

.home-page .home-hero .lead{
  font-size:1.02rem;
  line-height:1.58;
  max-width:700px;
  margin:.4rem 0 .8rem;
}

.home-page .home-hero .statement{
  font-size:.94rem;
  line-height:1.55;
  padding:.85rem 1rem;
  margin:.85rem 0;
}

.home-page .home-hero .actions{
  margin:.9rem 0 .3rem;
}

.home-page .home-hero .button{
  padding:.68rem 1rem;
  font-size:.93rem;
}

.home-page .hero-single{
  display:flex;
  justify-content:center;
  align-items:center;
}

.home-page .hero-single img{
  width:190px;
  max-width:100%;
  max-height:220px;
  object-fit:contain;
  background:linear-gradient(145deg,#fff,var(--cream));
  border-radius:18px;
  padding:.4rem;
  border:1px solid rgba(36,78,112,.11);
  box-shadow:var(--shadow-soft);
}

.home-page .progress-section{
  text-align:center;
  background:linear-gradient(135deg,#fff,var(--sky-soft));
}

.home-page .progress-section h2{
  font-size:clamp(1.65rem,2.5vw,2.15rem);
  margin-bottom:.4rem;
}

.home-page .progress-section > p{
  max-width:760px;
  margin:.35rem auto .9rem;
  font-size:.98rem;
}

.home-page .progress-image{
  width:min(100%,760px);
  max-height:510px;
  object-fit:contain;
  margin:.8rem auto;
  display:block;
  box-shadow:var(--shadow-soft);
}

.home-page .progress-captions{
  width:min(100%,760px);
  margin:.65rem auto 0;
  gap:.7rem;
}

.home-page .progress-captions article{
  padding:.8rem .85rem;
  box-shadow:none;
}

.home-page .progress-captions h3{
  font-size:1rem;
  margin:.1rem 0 .3rem;
}

.home-page .progress-captions p{
  font-size:.86rem;
  line-height:1.45;
  margin:0;
}

.home-page .choice-cta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:1.4rem;
  align-items:center;
  background:linear-gradient(135deg,#fff8ef,#fff);
}

.home-page .choice-cta h2{
  font-size:clamp(1.55rem,2.4vw,2rem);
  margin-bottom:.3rem;
}

.home-page .friends-mini{
  display:flex;
  gap:.85rem;
  align-items:center;
  margin:.7rem 0 .5rem;
  flex-wrap:wrap;
}

.home-page .friend-mini{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.45rem .65rem;
  border:1px solid rgba(36,78,112,.12);
  border-radius:999px;
  background:#fff;
}

.home-page .friend-mini img{
  width:48px;
  height:48px;
  object-fit:contain;
  background:var(--sky-soft);
  border-radius:50%;
  padding:.15rem;
}

.home-page .friend-mini strong{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--navy-deep);
  font-size:.95rem;
}

.home-page .home-note{
  margin:.5rem 0 0;
  font-size:.9rem;
  color:var(--muted);
}

.home-page .compact-footer-note{
  font-size:.88rem;
  color:rgba(255,255,255,.78);
}

.home-page .notice{
  padding:1rem 1.1rem;
  font-size:.88rem;
  margin:.7rem 0;
}

.home-page .notice p{
  margin:.2rem 0 0;
}

@media(max-width:820px){
  .home-page .home-hero,
  .home-page .choice-cta{
    grid-template-columns:1fr;
  }

  .home-page .hero-single img{
    width:160px;
  }

  .home-page .choice-cta .actions{
    margin-top:0;
  }
}

@media(max-width:620px){
  .home-page .progress-captions{
    grid-template-columns:1fr;
  }

  .home-page .friends-mini{
    display:grid;
    grid-template-columns:1fr;
  }

  .home-page .friend-mini{
    border-radius:14px;
  }

  .home-page .home-hero h1{
    font-size:2rem;
  }
}


/* Smaller treatment-progress presentation */
.home-page .progress-section{
  padding:1.65rem 1.2rem;
}

.home-page .progress-section h2{
  font-size:clamp(1.45rem,2.1vw,1.85rem);
}

.home-page .progress-section > p{
  max-width:680px;
  font-size:.93rem;
  line-height:1.5;
  margin:.25rem auto .65rem;
}

.home-page .progress-image{
  width:min(100%,520px);
  max-height:350px;
  object-fit:contain;
  margin:.55rem auto .65rem;
  border-radius:14px;
}

.home-page .progress-captions{
  width:min(100%,650px);
  gap:.55rem;
}

.home-page .progress-captions article{
  padding:.65rem .7rem;
  min-height:0;
}

.home-page .progress-captions h3{
  font-size:.92rem;
}

.home-page .progress-captions p{
  font-size:.80rem;
  line-height:1.35;
}

@media(max-width:620px){
  .home-page .progress-image{
    width:min(100%,430px);
    max-height:300px;
  }
}


/* Minimal home-page composition */
.home-page .home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(170px,.5fr);
  gap:1.6rem;
  align-items:center;
  padding:2rem clamp(1rem,2.6vw,1.75rem);
  min-height:0;
}

.home-page .home-hero h1{
  font-size:clamp(1.8rem,2.8vw,2.45rem);
  line-height:1.08;
  max-width:650px;
  margin:.2rem 0 .65rem;
}

.home-page .home-hero .lead{
  font-size:1rem;
  max-width:700px;
  line-height:1.55;
}

.home-page .home-hero .statement{
  font-size:.93rem;
  line-height:1.5;
  padding:.8rem .95rem;
  margin:.8rem 0;
}

.home-page .home-hero .hero-single img{
  width:175px;
  max-height:205px;
}

.home-page .intro-paths{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
  padding:1.35rem;
  background:transparent;
  border:none;
  box-shadow:none;
}

.home-page .intro-paths article{
  padding:1rem;
  min-height:0;
  box-shadow:none;
  text-align:left;
}

.home-page .intro-paths h2{
  font-size:1.18rem;
  margin-bottom:.25rem;
}

.home-page .intro-paths p{
  font-size:.9rem;
  line-height:1.45;
  margin:.25rem 0 .6rem;
}

.home-page .intro-paths .text-link{
  font-size:.9rem;
}

.home-page footer{
  margin-top:1rem;
}

@media(max-width:800px){
  .home-page .home-hero{
    grid-template-columns:1fr;
  }
  .home-page .home-hero .hero-single img{
    width:145px;
  }
  .home-page .intro-paths{
    grid-template-columns:1fr;
  }
}