/* ==========================================================================
   THE WHOLE SITE SHRINKS AS ONE
   Every size is written against the root, so one percentage here scales the
   entire design at once. The shape never changes, only the size.
   ========================================================================== */

html{ font-size:100%; }

@media(max-width:1400px){ html{ font-size:94%; } }
@media(max-width:1200px){ html{ font-size:88%; } }
@media(max-width:1000px){ html{ font-size:80%; } }
@media(max-width:820px) { html{ font-size:74%; } }
@media(max-width:600px) { html{ font-size:66%; } }
@media(max-width:400px) { html{ font-size:60%; } }

/* ==========================================================================
   DREAMING IN REAL LIFE - the skeleton
   Real HTML and CSS in the shape of the approved rendering.
   Every picture is a named slot in the images folder. Drop the real art in
   over the same filename and nothing else has to change.
   ========================================================================== */

:root{
  --navy:        #16386E;
  --navy-deep:   #0C2450;
  --blue:        #e4eaf6;
  --blue-light:  #5B9BD5;
  --sky:         #DCEBF7;
  --gold:        #F2C75C;
  --gold-bright: #F2C75C;
  --gold-deep:   #B57F12;
  --ink:         #2A3A4E;
  --ink-soft:    #55677D;
  --paper:       #FFFdd9;
  --cream:       #ffffc8;
  --rule:        #E6DFD0;
  --wrap:        73.75rem;

  /* One name for every handwritten line on the site. */
  --script: "Dancing Script","Snell Roundhand","Apple Chancery",cursive;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
img{ max-width:100%; display:block; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem; line-height:1.7; -webkit-font-smoothing:antialiased;
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 1.625rem; }

h1,h2,h3{ font-weight:normal; margin:0 0 0.875rem; color:var(--navy); line-height:1.15; }
p{ margin:0 0 1rem; }

a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--gold-bright); }
a:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:0.25rem; }

.script{
  font-family:var(--script);
  font-style:italic;
}
.sans{ font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; }

.skip{ position:absolute; left:-624.9375rem; top:0; z-index:99;
  background:var(--navy); color:#fff; padding:0.75rem 1.125rem; }
.skip:focus{ left:0; }

/* ---------- Any picture that is still to be made ---------- */
.slot{
  background:var(--sky) center/cover no-repeat;
  position:relative;
}
.slot[data-art]:after{
  content:attr(data-art);
  position:absolute; left:0.625rem; bottom:0.5rem;
  font:11px/1.3 system-ui,sans-serif; letter-spacing:.08em;
  color:rgba(22,56,110,.42); background:rgba(255,255,255,.72);
  padding:3px 0.5rem; border-radius:0.25rem; pointer-events:none;
}
body.final .slot[data-art]:after{ display:none; }

/* ---------- 1. Header ---------- */

.masthead{ background:var(--paper); border-bottom:1px solid var(--rule); position:relative; z-index:10; }
.masthead .wrap{ display:flex; align-items:center; gap:1.5rem; padding-top:0.875rem; padding-bottom:0.875rem; }

.lockup{ display:flex; align-items:center; gap:0.625rem; flex:0 0 auto; }
.lockup .words .name{
  font-family:var(--script); font-style:normal;
  font-size:2rem; color:var(--navy); display:block; line-height:1.05;
}
.lockup .words .name .tm{ font-size:0.75rem; vertical-align:super; }
.lockup .words .tag{
  display:block; font-size:0.6875rem; letter-spacing:.05em; color:var(--ink-soft); margin-top:2px;
}
.lockup .bloom{ width:2.875rem; height:2.875rem; flex:0 0 46px; }
.lockup .bloom .petal{ fill:var(--gold); }
.lockup .bloom .disc{ fill:var(--gold-deep); }
.lockup .bloom .pip{ fill:#5E3F09; }

.mainnav{ margin-left:auto; }
.mainnav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.25rem; }
.mainnav a{
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:0.9062rem; color:var(--navy); padding-bottom:3px; border-bottom:2px solid transparent;
}
.mainnav a:hover, .mainnav a.on{ color:var(--blue); border-bottom-color:var(--navy); }

.pill{
  display:inline-flex; align-items:center; gap:0.5625rem;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:var(--navy-deep); font-family:system-ui,-apple-system,Arial,sans-serif;
  font-size:0.9375rem; font-weight:700; padding:0.75rem 1.625rem; border-radius:62.4375rem;
  border:0; cursor:pointer; white-space:nowrap;
  box-shadow:0 2px 8px rgba(180,127,18,.28);
}
.pill:hover{ background:var(--gold-bright); color:var(--navy-deep); }
.pill.navy{ background:linear-gradient(180deg,#25528F,var(--navy)); color:#fff; box-shadow:0 2px 10px rgba(12,36,80,.3); }
.pill.navy:hover{ background:#25528F; color:#fff; }

/* ---------- 2. Hero ---------- */

.hero{
  position:relative; min-height:38.75rem; display:flex; align-items:center;
  background:var(--sky) center/cover no-repeat;
}
.hero .wrap{ position:relative; z-index:3; padding-top:2.75rem; padding-bottom:2.75rem;
  display:grid; grid-template-columns:1fr 340px; gap:2.5rem; align-items:center; }

.signpost{
  position:absolute; left:0; top:0; bottom:0; width:16.875rem; z-index:2;
  display:flex; flex-direction:column; justify-content:center; gap:0.875rem; padding-left:0.75rem;
}
.signpost .arm{
  background:linear-gradient(180deg,#9A7A50,#7E6039);
  color:#FFF9EC; font-family:system-ui,Arial,sans-serif;
  font-size:1rem; letter-spacing:.06em; padding:0.6875rem 1.125rem;
  border-radius:3px; box-shadow:0 4px 10px rgba(0,0,0,.28);
  width:max-content; max-width:15.625rem;
}
.signpost .arm:nth-child(2){ margin-left:1.125rem; }
.signpost .arm:nth-child(3){ margin-left:0.375rem; }

.herohead{ text-align:right; }
.herohead .l1{ font-size:4.5rem; color:var(--navy); display:block; }
.herohead .l2{
  font-family:var(--script); font-style:normal;
  font-size:3.75rem; color:var(--gold-deep); display:block;
  line-height:1.05; margin-top:0.25rem;
}
.herohead .heart{ color:var(--gold); font-style:normal; }

.heroside .claim{
  font-size:clamp(1.375rem,2.6vw,1.8125rem); color:var(--navy); line-height:1.28; margin:0 0 0.875rem;
}
.heroside .said{ font-size:0.9688rem; color:var(--ink); margin:0 0 1.25rem; }
.heroside .awaits{
  font-family:var(--script); font-style:normal;
  font-size:1.375rem; color:var(--navy); margin:1rem 0 0;
}

@media(max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .signpost{ position:static; width:auto; flex-direction:row; flex-wrap:wrap;
    justify-content:right; padding:1.5rem 0 0; }
  .signpost .arm{ margin:0 !important; }
}

.hero .wrap > div:first-child,
.hero .heroside{
  background: transparent;
  border-radius: 0;
  padding: 1.375rem 1.5rem;
  width: fit-content;
}
.hero .heroside{ margin-left: auto; justify-content:right; }

/* ---------- 3. Real Tools strip ---------- */

.values{ background:linear-gradient(180deg,#F7FBFE,#FFFFFF); border-bottom:1px solid var(--rule); padding:1.625rem 0; }
.values .row{ display:grid; grid-template-columns:repeat(4,1fr); }
.values .one{ text-align:center; padding:0.375rem 1.125rem; border-right:1px solid #DCE6F0; }
.values .one:last-child{ border-right:0; }
.values .ico{ height:3.25rem; display:flex; align-items:center; justify-content:center; margin-bottom:0.625rem; }
.values .ico svg{ height:2.875rem; width:auto; }
.values h3{
  font-family:system-ui,-apple-system,Arial,sans-serif; font-size:0.9375rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--navy); margin:0 0 0.25rem;
}
.values p{ margin:0; font-size:0.9375rem; color:var(--blue); }
@media(max-width:760px){ .values .row{ grid-template-columns:1fr 1fr; }
  .values .one{ border-right:0; padding-bottom:1.25rem; } }

/* ---------- 4. Heal. Grow. Love. ---------- */

.heal{ padding:3.75rem 0 3.375rem; background:var(--paper); }
.heal .two{ display:grid; grid-template-columns:1fr 1.05fr; gap:2.875rem; align-items:center; }
@media(max-width:900px){ .heal .two{ grid-template-columns:1fr; } }

.overline{
  font-family:system-ui,-apple-system,Arial,sans-serif;
  font-size:0.8438rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--blue); margin:0 0 0.875rem;
}
.heal h2{ font-size:clamp(2rem,4.4vw,2.875rem); line-height:1.1; margin-bottom:1.125rem; }
.heal .swoosh{ width:9.375rem; height:0.5625rem; margin:0 0 1.125rem; }
.heal p{ color:var(--ink); max-width:52ch; }
.heal .yougot{
  font-family:var(--script); font-style:normal;
  font-size:1.625rem; color:var(--gold-deep); display:inline-block; margin-left:1.125rem;
}
.collage{ min-height:23.75rem; border-radius:0.625rem; }

/* ---------- 5. Three doors ---------- */

.doors{ padding:0 0 3.875rem; background:var(--paper); }
.doors .three{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.625rem; }
@media(max-width:900px){ .doors .three{ grid-template-columns:1fr; } }
.door{
  background:linear-gradient(180deg,#FFFFFF,#FCF8F0);
  border:1px solid var(--rule); border-radius:0.625rem; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 6px 22px rgba(22,56,110,.07);
}
.door .shot{ height:10.625rem; }
.door .in{ padding:1.375rem 1.5rem 1.625rem; flex:1; display:flex; flex-direction:column; }
.door h3{
  font-family:system-ui,-apple-system,Arial,sans-serif; font-size:0.9375rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy); margin:0 0 0.625rem;
}
.door p{ font-size:1rem; color:var(--ink); margin:0 0 1.25rem; }
.door .pill{ margin-top:auto; align-self:flex-start; font-size:0.9062rem; padding:0.6875rem 1.375rem; }

/* ---------- 6. The quote card ---------- */

.creed{
  background:linear-gradient(180deg,#FFFFFF,#F7FBFE);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:2.875rem 0; text-align:center;
}
.creed blockquote{ margin:0 auto; max-width:62.5rem; }
.creed blockquote p{
  font-family:var(--script); font-style:normal;
  font-size:clamp(1.25rem,2.5vw,1.6875rem); color:var(--blue); line-height:1.5; margin:0 0 0.625rem;
}
.creed cite{
  font-family:system-ui,-apple-system,Arial,sans-serif; font-style:normal;
  font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
}
.creed .three-things{
  font-family:system-ui,-apple-system,Arial,sans-serif;
  font-size:0.8125rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--navy); margin:1.375rem 0 0;
}
.creed .three-things .hrt{ color:var(--gold); }

/* ---------- 7. Sign up ---------- */

.join{ background:linear-gradient(180deg,var(--cream),#FFF6E2); padding:3.5rem 0; }
.joinbox{
  max-width:45rem; margin:0 auto; text-align:center; background:rgba(255,255,255,.95);
  border:1px solid var(--rule); border-radius:1.125rem; padding:2.375rem 2rem;
  box-shadow:0 14px 40px rgba(22,56,110,.10);
}
.joinbox .overline{ text-align:center; }
.joinbox h2{ font-size:clamp(1.625rem,3.4vw,2.25rem); margin-bottom:0.75rem; }
.joinbox form{ display:grid; grid-template-columns:1fr 1fr auto; gap:0.625rem; margin-top:1.25rem; }
@media(max-width:700px){ .joinbox form{ grid-template-columns:1fr; } }
.joinbox input{
  width:100%; border:1px solid #B9CFE0; border-radius:62.4375rem;
  padding:0.875rem 1.125rem; font:inherit; font-size:1rem; background:#fff;
}
.joinbox input:focus{ outline:3px solid var(--gold); outline-offset:2px; }
.answer{
  border-left:5px solid var(--gold); background:#FFFAF0;
  border-radius:0 0.75rem 0.75rem 0; padding:1rem 1.25rem; margin:1.125rem 0 0; text-align:left;
}
.answer p{ margin:0; }
.tiny{ font-size:0.875rem; color:var(--ink-soft); margin:0.875rem 0 0; }

/* ---------- 8. Footer ---------- */

.footer{ background:var(--paper); border-top:1px solid var(--rule); padding:1.5rem 0; }
.footer .row{ display:flex; align-items:center; gap:1.625rem; flex-wrap:wrap; }
.footer .fmark .name{
  font-family:var(--script); font-style:normal;
  font-size:1.625rem; color:var(--navy); display:block; line-height:1.1;
}
.footer .fmark .name .tm{ font-size:0.6875rem; vertical-align:super; }
.footer .fmark .since{ font-size:1rem; color:var(--navy); display:block; }
.footlinks{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0.375rem 0.875rem;
  font-family:system-ui,-apple-system,Arial,sans-serif; font-size:0.875rem; }
.footlinks li:not(:last-child):after{ content:"|"; color:var(--rule); margin-left:0.875rem; }
.footlinks a{ color:var(--navy); }
.footlinks a:hover{ color:var(--gold-deep); }
.social{ display:flex; gap:0.75rem; margin-left:auto; }
.social a{ width:1.625rem; height:1.625rem; display:block; color:var(--navy); }
.social svg{ width:1.625rem; height:1.625rem; fill:currentColor; }
.keep{
  font-family:var(--script); font-style:normal;
  font-size:1.375rem; color:var(--navy);
}
.keep .hrt{ color:var(--gold); }

.smallprint{ background:var(--paper); color:var(--navy);padding:1.625rem 0 2.125rem; font-size:0.8438rem; line-height:1.6; }
.smallprint p{ margin:0 0 0.5rem; max-width:96ch; }

@media(max-width:820px){
  .masthead .wrap{ flex-wrap:wrap; }
  .mainnav{ margin-left:0; width:100%; }
  .hero{ min-height:auto; }
}
@media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ==========================================================================
   FIXES AFTER THE FIRST LOOK
   ========================================================================== */

/* 1. The hero words need a soft veil or they vanish into a bright sky. */
.hero:before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:none;
}
.herohead .l1, .herohead .l2, .heroside .claim{ text-shadow:none; }
.heroside .said{ text-shadow:none; }
.heroside .awaits{ text-shadow:none; }

/* 2. Keep the headline clear of the signpost. */
.hero .wrap{ padding-left:18.75rem; }
@media(max-width:1100px){ .hero .wrap{ padding-left:1.625rem; } }
.signpost .arm{ font-size:0.9062rem; padding:0.5625rem 0.9375rem; max-width:13.125rem; }

/* 3. Eight navigation words have to fit on one line. */
.mainnav ul{ gap:0.9375rem; }
.mainnav a{ font-size:0.8438rem; white-space:nowrap; }
.lockup .words .name{ font-size:1.75rem; }
.masthead .wrap{ gap:1rem; }
@media(max-width:1200px){ .lockup .words .name{ font-size:1.5rem; } .mainnav ul{ gap:0.75rem; } }

/* 4. The footer stays on one line, with Keep Dreaming at the end. */
.footer .row{ flex-wrap:nowrap; gap:1.25rem; }
.footer .keep{ white-space:nowrap; }
.social{ margin-left:0; }
.footlinks{ margin-left:auto; }
@media(max-width:1050px){ .footer .row{ flex-wrap:wrap; } .footlinks{ margin-left:0; } }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

.pagehead{
  background:linear-gradient(180deg,#F7FBFE,#FFFFFF);
  border-bottom:1px solid var(--rule); padding:2.875rem 0 2.5rem;
}
.pagehead h1{ font-size:clamp(2rem,4.4vw,3.125rem); margin:0 0 0.75rem; }
.pagehead .stand{ font-size:1.1875rem; color:var(--ink-soft); max-width:60ch; margin:0; }
.pagehead .script-line{
  font-family:var(--script); font-style:normal;
  font-size:clamp(1.625rem,3.4vw,2.375rem); color:var(--gold-deep); margin:0.375rem 0 0.75rem; display:block;
}

.sheet{ padding:3.25rem 0; }
.sheet.tint{ background:var(--cream); }
.prose{ max-width:47.5rem; }
.prose h2{ font-size:clamp(1.5rem,3vw,2rem); margin-top:2.125rem; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--ink); }

.rule{ border:0; border-top:1px solid var(--rule); margin:2.25rem 0; }

.pull{
  border-left:5px solid var(--gold); background:#FFFAF0;
  border-radius:0 0.875rem 0.875rem 0; padding:1.25rem 1.5rem; margin:1.625rem 0;
  color:var(--navy); font-size:1.1875rem;
}
.pull p:last-child{ margin:0; }

.ticks{ list-style:none; margin:0 0 1.375rem; padding:0; }
.ticks li{ position:relative; padding:0 0 0.875rem 2rem; }
.ticks li:before{
  content:""; position:absolute; left:3px; top:0.625rem; width:0.6875rem; height:0.6875rem;
  border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(228,168,53,.2);
}

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1.625rem; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.625rem; }
@media(max-width:900px){ .grid2,.grid3{ grid-template-columns:1fr; } }

.tile{
  background:#fff; border:1px solid var(--rule); border-radius:0.625rem; padding:1.625rem 1.75rem;
  box-shadow:0 6px 22px rgba(22,56,110,.06);
}
.tile h3{ font-size:1.25rem; margin:0 0 0.625rem; }
.tile p:last-child{ margin:0; }
.tile .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.625rem; height:2.625rem; border-radius:50%; margin:0 0 0.875rem;
  background:var(--gold); color:var(--navy-deep); font-size:1.125rem;
}

/* Article cards */
.postgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.625rem; }
@media(max-width:900px){ .postgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .postgrid{ grid-template-columns:1fr; } }
.post{
  background:#fff; border:1px solid var(--rule); border-radius:0.625rem; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 6px 22px rgba(22,56,110,.06);
}
.post .shot{ height:10rem; }
.post .in{ padding:1.375rem 1.5rem 1.625rem; flex:1; display:flex; flex-direction:column; }
.post .stamp{
  font-family:system-ui,-apple-system,Arial,sans-serif; font-size:0.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 0.5rem;
}
.post h3{ font-size:1.25rem; margin:0 0 0.625rem; }
.post h3 a{ color:var(--navy); }
.post h3 a:hover{ color:var(--blue); }
.post p{ font-size:1rem; color:var(--ink-soft); }
.post .go{
  margin-top:auto; font-family:system-ui,Arial,sans-serif; font-size:0.875rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--blue);
}

.article-body{ max-width:45rem; }
.article-body .lede{ font-size:1.25rem; color:var(--ink-soft); }
.article-body .topshot{ height:20rem; border-radius:0.625rem; margin:0 0 1.75rem; }

.formbox{
  background:#fff; border:1px solid var(--rule); border-top:4px solid var(--gold);
  border-radius:0.875rem; padding:2rem; max-width:40rem;
  box-shadow:0 8px 26px rgba(22,56,110,.07);
}
.formbox label{
  display:block; font-family:system-ui,Arial,sans-serif; font-size:0.9062rem;
  color:var(--navy); margin:0 0 0.4375rem;
}
.formbox input[type=text], .formbox input[type=email], .formbox textarea{
  width:100%; border:1px solid #B9CFE0; border-radius:0.5rem; padding:0.8125rem 0.9375rem;
  font:inherit; font-size:1rem; margin:0 0 1.125rem; background:#fff;
}
.formbox textarea{ min-height:9.375rem; }
.formbox input:focus, .formbox textarea:focus{ outline:3px solid var(--gold); outline-offset:2px; }

/* ==========================================================================
   EVERY PAGE GETS ITS OWN SHAPE
   The header, footer and colours stay the same so it is one site. Everything
   else about how a page opens and moves is different per page.
   ========================================================================== */

/* --- ABOUT: a portrait beside the story, warm cream ground --- */
.head-portrait{
  background:linear-gradient(180deg,#FFFDF7,#FBF4E6);
  border-bottom:1px solid var(--rule); padding:3.25rem 0;
}
.head-portrait .split{ display:grid; grid-template-columns:320px 1fr; gap:2.75rem; align-items:center; }
@media(max-width:820px){ .head-portrait .split{ grid-template-columns:1fr; } }
.head-portrait .frame{
  aspect-ratio:4/5; border-radius:0.5rem; border:10px solid #fff;
  box-shadow:0 14px 40px rgba(22,56,110,.16); transform:rotate(-1.6deg);
}
.head-portrait h1{ font-size:clamp(1.875rem,4vw,2.75rem); }
.head-portrait .kicker-script{
  font-family:var(--script); font-style:normal;
  font-size:1.875rem; color:var(--gold-deep); display:block; margin:0 0 0.375rem;
}

/* --- THE PROGRAM: a walked path, month by month --- */
.head-path{
  background:linear-gradient(115deg,var(--navy-deep),var(--navy) 55%,#1E4A8A);
  color:#fff; padding:3.5rem 0 3.25rem; border-bottom:5px solid var(--gold);
}
.head-path h1, .head-path .overline{ color:#fff; }
.head-path .overline{ color:var(--gold); }
.head-path .stand{ color:#CFE1F2; }
.head-path .count{
  display:inline-flex; gap:1.625rem; margin:1.375rem 0 0; flex-wrap:wrap;
  font-family:system-ui,Arial,sans-serif;
}
.head-path .count b{
  display:block; font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-weight:normal;
  font-size:2.375rem; color:var(--gold); line-height:1;
}
.head-path .count span{ font-size:0.8125rem; letter-spacing:.18em; text-transform:uppercase; color:#CFE1F2; }

.walk{ position:relative; padding-left:3.375rem; }
.walk:before{
  content:""; position:absolute; left:1.1875rem; top:0.5rem; bottom:0.5rem; width:0.25rem;
  background:linear-gradient(180deg,var(--gold),#F0DCA8); border-radius:2px;
}
.walk .stepbox{ position:relative; margin:0 0 1.625rem; background:#fff;
  border:1px solid var(--rule); border-radius:0.625rem; padding:1.5rem 1.625rem;
  box-shadow:0 6px 22px rgba(22,56,110,.06); }
.walk .stepbox .dot{
  position:absolute; left:-3.375rem; top:1.5rem; width:2.625rem; height:2.625rem; border-radius:50%;
  background:var(--gold); color:var(--navy-deep); display:flex; align-items:center;
  justify-content:center; font-size:1.125rem; box-shadow:0 0 0 6px #fff;
}
.walk .stepbox h3{ margin:0 0 0.5rem; }
.walk .stepbox p:last-child{ margin:0; }

/* --- TOOLS: two heavy panels, nothing else competing --- */
.head-tools{
  background:linear-gradient(180deg,#F3F8FD,#FFFFFF);
  border-bottom:1px solid var(--rule); padding:3.125rem 0; text-align:center;
}
.head-tools h1{ font-size:clamp(1.875rem,4.2vw,2.875rem); }
.head-tools .stand{ margin:0 auto; }
.bigtools{ display:grid; grid-template-columns:1fr 1fr; gap:1.875rem; }
@media(max-width:880px){ .bigtools{ grid-template-columns:1fr; } }
.bigtool{
  border:1px solid var(--rule); border-radius:0.875rem; padding:2.375rem 2.125rem;
  background:linear-gradient(180deg,#FFFFFF,#F8FBFE);
  box-shadow:0 10px 30px rgba(22,56,110,.08);
}
.bigtool .tm-mark{
  font-family:system-ui,Arial,sans-serif; font-size:0.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-deep); margin:0 0 0.625rem;
}
.bigtool h2{ font-size:1.75rem; margin:0 0 0.875rem; }
.bigtool p:last-child{ margin:0; }

/* --- STORIES: a wide numbered ledger --- */
.head-ledger{
  background:var(--navy); color:#fff; padding:3rem 0; border-bottom:5px solid var(--gold);
}
.head-ledger h1, .head-ledger .overline{ color:#fff; }
.head-ledger .overline{ color:var(--gold); }
.head-ledger .stand{ color:#CFE1F2; }
.ledger{ border-top:1px solid var(--rule); }
.ledger .line{
  display:grid; grid-template-columns:74px 1fr; gap:1.25rem;
  padding:1.375rem 0; border-bottom:1px solid var(--rule); align-items:start;
}
.ledger .line .no{
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:1.875rem; color:var(--gold-deep);
  line-height:1; padding-top:2px;
}
.ledger .line p{ margin:0; }
.ledger .line:nth-child(even){ background:#FCFAF5; }

/* --- RESOURCES: a magazine front, one lead story --- */
.head-paper{ background:#fff; border-bottom:3px solid var(--navy); padding:2.5rem 0 1.625rem; }
.head-paper h1{ font-size:clamp(2.125rem,5.4vw,3.875rem); letter-spacing:-.02em; margin:0; }
.head-paper .strap{
  display:flex; justify-content:space-between; gap:1.25rem; flex-wrap:wrap;
  border-top:1px solid var(--rule); margin-top:1.125rem; padding-top:0.75rem;
  font-family:system-ui,Arial,sans-serif; font-size:0.7812rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.lead-story{ display:grid; grid-template-columns:1.15fr 1fr; gap:2.125rem; align-items:center; margin:0 0 2.75rem; }
@media(max-width:860px){ .lead-story{ grid-template-columns:1fr; } }
.lead-story .shot{ height:20.625rem; border-radius:0.625rem; }
.lead-story h2{ font-size:clamp(1.625rem,3.4vw,2.375rem); margin:0 0 0.75rem; }

/* --- SHOP: price rails --- */
.head-store{
  background:linear-gradient(180deg,#FFFDF7,#FDF3DE);
  border-bottom:1px solid var(--rule); padding:3.125rem 0; text-align:center;
}
.head-store h1{ font-size:clamp(2rem,4.6vw,3.125rem); }
.wares{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.625rem; }
@media(max-width:900px){ .wares{ grid-template-columns:1fr; } }
.ware{
  border:1px solid var(--rule); border-radius:0.75rem; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; box-shadow:0 8px 26px rgba(22,56,110,.07);
}
.ware .rail{
  background:var(--navy); color:#fff; padding:0.6875rem 1.375rem;
  font-family:system-ui,Arial,sans-serif; font-size:0.75rem;
  letter-spacing:.2em; text-transform:uppercase;
}
.ware .in{ padding:1.625rem 1.625rem 1.875rem; flex:1; display:flex; flex-direction:column; }
.ware h2{ font-size:1.4375rem; margin:0 0 0.75rem; }
.ware .soon{
  margin-top:auto; font-family:system-ui,Arial,sans-serif; font-size:0.8125rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep);
}

/* --- CONTACT: one quiet column --- */
.head-quiet{ background:#fff; padding:3.5rem 0 0.625rem; text-align:center; }
.head-quiet h1{ font-size:clamp(2rem,4.4vw,3rem); }
.head-quiet .stand{ margin:0 auto; }
.quiet-form{ max-width:37.5rem; margin:0 auto; }

/* ==========================================================================
   PHOTOGRAPHY PASS
   Real pictures behind the page heads, a band of real people on every page,
   and the software preview. Paths are ../images/ because this file lives
   inside the css folder.
   ========================================================================== */

/* --- 1. Each page head now opens on a photograph --- */

.head-path{
  background-image:
    linear-gradient(115deg, rgba(11,31,63,.90), rgba(22,56,110,.80) 55%, rgba(30,74,138,.78)),
    url('../images/band-program.jpg');
  background-size:cover; background-position:center 55%; background-repeat:no-repeat;
}
.head-ledger{
  background-image:
    linear-gradient(180deg, rgba(11,31,63,.90), rgba(22,56,110,.84)),
    url('../images/band-stories.jpg');
  background-size:cover; background-position:center 45%; background-repeat:no-repeat;
}
.head-tools{
  background-image:
    linear-gradient(180deg, rgba(243,248,253,.90), rgba(255,255,255,.93)),
    url('../images/band-tools.jpg');
  background-size:cover; background-position:center 60%; background-repeat:no-repeat;
}
.head-store{
  background-image:
    linear-gradient(180deg, rgba(255,253,247,.88), rgba(253,243,222,.90)),
    url('../images/band-shop.jpg');
  background-size:cover; background-position:center 55%; background-repeat:no-repeat;
}
.head-quiet{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.95)),
    url('../images/band-contact.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding-bottom:2.875rem;
}

/* --- 2. Real people. The same band, used on several pages --- */

.faces{
  background:var(--paper); padding:3.5rem 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.faces h2{ text-align:center; margin:0 0 0.625rem; }
.faces .overline{ text-align:center; }
.faces .lead{ text-align:center; max-width:48.75rem; margin:0 auto 2rem; }
.faces .row4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.375rem; }
.faces .row3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.375rem; }
@media(max-width:900px){ .faces .row4, .faces .row3{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .faces .row4, .faces .row3{ grid-template-columns:1fr; } }
.faces figure{ margin:0; }
.faces .pic{
  height:13.4375rem; border-radius:0.625rem;
  background:var(--sky) center/cover no-repeat;
  box-shadow:0 8px 24px rgba(22,56,110,.11);
}
.faces .row3 .pic{ height:16.25rem; }
.faces figcaption{
  margin-top:0.8125rem; font-family:system-ui,-apple-system,Arial,sans-serif;
  font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
}
.faces figcaption span{
  display:block; margin-top:0.3125rem; letter-spacing:0; text-transform:none;
  font-size:0.9375rem; color:var(--ink); font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

/* --- 3. A look inside the software, still to open --- */

.inside{ background:linear-gradient(180deg,#0B1F3F,#16386E); color:#fff; padding:4rem 0; }
.inside h2{ color:#fff; text-align:center; margin:0 0 0.75rem; }
.inside .overline{ color:var(--gold); text-align:center; }
.inside .lead{ color:#CFE1F2; text-align:center; max-width:50rem; margin:0 auto 2.125rem; }
.inside .screen{
  background:#fff; border-radius:0.875rem; padding:0.875rem;
  box-shadow:0 22px 60px rgba(0,0,0,.38); max-width:55rem; margin:0 auto;
}
.inside .screen img{ display:block; width:100%; height:auto; border-radius:0.5rem; }
.inside .tag{
  text-align:center; margin:1.5rem 0 0;
  font-family:system-ui,-apple-system,Arial,sans-serif; font-size:0.8125rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}

/* --- 4. The store gets a picture on every shelf --- */

.ware .shot{ height:11.25rem; background:var(--sky) center/cover no-repeat; }

/* --- 5. Hero repairs, made after seeing it with the real photograph --- */

/* The headline was falling onto a third line. Give it room. */
.hero .wrap{ grid-template-columns:1fr 380px; padding-left:15.625rem; }
@media(max-width:1100px){ .hero .wrap{ padding-left:1.625rem; grid-template-columns:1fr; } }

/* Every arm of the signpost stays on one line. */
.signpost{ width:15.625rem; }
.signpost .arm{ white-space:nowrap; font-size:0.9375rem; padding:0.625rem 1.0625rem; max-width:none; }

/* The paragraph and the closing line sat too pale on a bright sky. */
.heroside .said{ color:var(--navy); font-size:1rem; }
.heroside .awaits{ color:var(--navy); }

/* The two hero lines have to hold their shape: two lines, then one. */
.hero .wrap{ padding-left:12.5rem; grid-template-columns:1fr 370px; }
@media(max-width:1100px){ .hero .wrap{ padding-left:1.625rem; grid-template-columns:1fr; } }
.herohead .l1{ font-size:clamp(1.5rem,2.6vw,2.0625rem); }
.herohead .l2{ font-size:clamp(2.5rem,5vw,4rem); white-space:nowrap; }
@media(max-width:760px){ .herohead .l2{ white-space:normal; } }

/* --- 6. Two small repairs seen on the finished pages --- */

/* The footer wordmark must never break across two lines. */
.footwrap .name, footer .name, .lockup .words .name{ white-space:nowrap; }

/* The contact page photograph had almost vanished under its veil. */
.head-quiet{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.90)),
    url('../images/band-contact.jpg');
}

/* Your portrait is a square, so the frame is a square. Nothing gets cropped. */
.head-portrait .frame{ aspect-ratio:1/1; }

/* ==========================================================================
   7. THE TOP BAR AND THE FOOTER GET THEIR OWN SKY
   The real sunflower lives in the picture on the left, so there is no
   drawn flower any more.
   ========================================================================== */

.masthead{
  background-image:
    linear-gradient(90deg,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,.22)  6%,
      rgba(255,255,255,.74) 16%,
      rgba(255,255,255,.84) 40%,
      rgba(255,255,255,.86) 100%),
    url('../images/band-top.jpg');
  background-size:cover; background-position:left center; background-repeat:no-repeat;
  padding:0.375rem 0;
}
/* The wordmark starts clear of the flower. */
.masthead .wrap{ padding-left:6.5rem; }
@media(max-width:820px){ .masthead .wrap{ padding-left:4.375rem; } }

.footer{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.80)),
    url('../images/band-foot.jpg');
  background-size:cover; background-position:center 70%; background-repeat:no-repeat;
  padding:2.125rem 0;
}

/* ==========================================================================
   8. THE REAL LOGOTYPE
   Your own artwork, straight from the Illustrator file, so the wordmark is
   identical everywhere instead of a font the visitor may not have.
   ========================================================================== */

.masthead .lockup .name{ display:block; width:auto; height:2.5rem; }
.masthead .lockup .tag{ margin-top:3px; }
.footer .fmark .name{ display:block; width:auto; height:1.875rem; margin-bottom:0.25rem; }
@media(max-width:820px){ .masthead .lockup .name{ height:2rem; } }

/* The wordmark carries the header, and the line under it matches your art. */
.masthead .lockup .name{ height:3rem; }
@media(max-width:820px){ .masthead .lockup .name{ height:2.125rem; } }
.masthead .lockup .tag{
  font-family:system-ui,-apple-system,Arial,sans-serif;
  font-size:0.6875rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--navy); margin-top:0.3125rem;
}

/* The dancing figure stands beside the wordmark, the way your logo is drawn. */
.masthead .lockup{ gap:0.75rem; }
.masthead .lockup .mark{ width:auto; height:3.375rem; flex:0 0 auto; }
@media(max-width:820px){ .masthead .lockup .mark{ height:2.375rem; } }

.footer .fmark{ display:flex; align-items:center; gap:0.6875rem; }
.footer .fmark .mark{ width:auto; height:2.625rem; flex:0 0 auto; }
.footer .fmark .name{ margin-bottom:0; }
.footer .fmark .since{ margin-left:2px; }

/* Everything on the top bar has to sit on one line. */
.masthead .wrap{ padding-left:4.625rem; gap:1.125rem; }
@media(max-width:820px){ .masthead .wrap{ padding-left:3.5rem; } }
.masthead .lockup{ gap:0.5625rem; }
.masthead .lockup .mark{ height:2.8125rem; }
.masthead .lockup .name{ height:2.5rem; }
.masthead .lockup .tag{ font-size:0.625rem; letter-spacing:.16em; }
.mainnav ul{ gap:0.8125rem; }
.mainnav a{ font-size:0.8125rem; }

/* Footer lockup: the figure, then the wordmark with Since 2001 under it. */
.footer .fmark{
  display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto;
  align-items:center; column-gap:0.6875rem; row-gap:2px; flex:0 0 auto;
}
.footer .fmark .mark{ grid-column:1; grid-row:1 / span 2; height:2.75rem; width:auto; }
.footer .fmark .name{ grid-column:2; grid-row:1; height:1.625rem; width:auto; margin:0; }
.footer .fmark .since{ grid-column:2; grid-row:2; font-size:0.875rem; }

/* ==========================================================================
   9. EVERY ROW GETS ITS OWN SKY, THE WAY YOU DREW IT
   ========================================================================== */

/* The four promises sit on a soft, sunlit sky. */
.values{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.80)),
    url('../images/band-values.jpg');
  background-size:cover; background-position:center 40%; background-repeat:no-repeat;
}

/* Heal Grow Love and the three doors share one sky with sunflowers,
   so the picture runs behind both rows without a seam. */
.sunfield{
  background-image:
    linear-gradient(100deg,
      rgba(255,255,255,.93)  0%,
      rgba(255,255,255,.86) 34%,
      rgba(255,255,255,.62) 62%,
      rgba(255,255,255,.48) 100%),
    url('../images/band-heal.jpg');
  background-size:cover; background-position:center top; background-repeat:no-repeat;
}
.sunfield .heal, .sunfield .doors{ background:transparent; }

/* Keep the sunflowers in view on the right, the way the drawing has them. */
.sunfield{ background-position:right top; }

/* Dancing Script is a true script but an easy read. It sits a little lighter
   than the old face, so the handwritten lines get a touch more weight. */
.herohead .l2, .creed blockquote p, .heal .yougot,
.heroside .awaits, .footer .keep, .head-portrait .kicker-script{
  font-weight:600;
}

/* The quote band was too strong a blue. Lay a soft veil over the sky so the
   words sit on it the way they do in your drawing. */
.creed{ position:relative; }
.creed:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58));
}
.creed .wrap{ position:relative; z-index:2; }

/* The sign-up band sits on a faint sunflower field with the mountains behind,
   with your soft yellow wash laid over the top of it. */
.join{
  background-image:
    linear-gradient(180deg, rgba(253,250,243,.85), rgba(255,246,226,.88)),
    url('../images/band-join.jpg');
  background-size:cover; background-position:center 62%; background-repeat:no-repeat;
}

/* ==========================================================================
   10. THE FINAL LOCKUP
   One piece of your own artwork: figure, wordmark and the line beneath it.
   Nothing here is set in a font, so it is identical on every device.
   ========================================================================== */

.masthead .wrap{ padding-left:4.375rem; }
@media(max-width:820px){ .masthead .wrap{ padding-left:3.25rem; } }
.masthead .lockup{ display:block; }
.masthead .lockup .logo{ display:block; width:auto; height:3.875rem; }
@media(max-width:900px){ .masthead .lockup .logo{ height:2.875rem; } }

.footer .fmark{ display:block; flex:0 0 auto; }
.footer .fmark .logo{ display:block; width:auto; height:2.875rem; margin-bottom:0.25rem; }
.footer .fmark .since{
  display:block; font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:0.875rem; color:var(--navy); margin-left:2px;
}

/* The lockup carries the tagline inside it now, so it needs more height. */
.masthead{ padding:0.625rem 0; }
.masthead .lockup .logo{ height:5rem; }
@media(max-width:1100px){ .masthead .lockup .logo{ height:3.875rem; } }
@media(max-width:820px){ .masthead .lockup .logo{ height:3rem; } }
.footer .fmark .logo{ height:3.625rem; }

/* ==========================================================================
   11. FOOTER, FINAL PASS
   ========================================================================== */

/* A larger lockup with Since 2001 centered under it. */
.footer .fmark{ display:block; text-align:center; flex:0 0 auto; }
.footer .fmark .logo{ display:block; width:auto; height:5.25rem; margin:0 auto 0.375rem; }
.footer .fmark .since{
  display:block; text-align:center;
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:0.9375rem; color:var(--navy); margin:0;
}
@media(max-width:900px){ .footer .fmark .logo{ height:4rem; } }

/* The links sit in two even rows instead of one long wrapping line. */
.footlinks{
  display:grid; grid-template-columns:repeat(5,auto); gap:0.5rem 1.625rem;
  justify-content:center; margin-left:auto; margin-right:auto;
}
.footlinks li:not(:last-child):after{ content:none; }
.footlinks li{ text-align:center; white-space:nowrap; }
@media(max-width:1050px){ .footlinks{ grid-template-columns:repeat(3,auto); } }
@media(max-width:600px){ .footlinks{ grid-template-columns:repeat(2,auto); } }

/* The blue small print reads across the page instead of hugging the left. */
.smallprint{ padding:1.875rem 0 2.375rem; text-align:center; }
.smallprint .wrap{ max-width:62.5rem; }
.smallprint p{ max-width:none; margin:0 auto 0.625rem; }
.smallprint p:last-child{ margin-bottom:0; }

/* Since 2001 centers under the logo itself, and the link columns are even. */
.footer .fmark{ width:fit-content; }
.footlinks{ grid-template-columns:repeat(5,1fr); justify-items:center; }
@media(max-width:1050px){ .footlinks{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:600px){ .footlinks{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   12. THE HERO: A REAL WOODEN SIGNPOST, AND A PANEL TO READ ON
   ========================================================================== */

/* The post the arms are nailed to. */
.signpost{ position:relative; width:16.875rem; padding-left:1.625rem; }
.signpost:before{
  content:""; position:absolute; left:2.125rem; top:6%; bottom:0; width:1.375rem; border-radius:3px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 3px, rgba(0,0,0,.07) 3px 7px),
    linear-gradient(90deg,#6F4E2B,#9A7247 35%,#7B5731);
  box-shadow:0 6px 16px rgba(0,0,0,.32);
}

/* Each arm is a plank with a pointed end and two bolts. */
.signpost .arm{
  position:relative; z-index:2;
  background:
    radial-gradient(circle at 12px 50%, rgba(60,38,18,.55) 0 2.4px, transparent 2.6px),
    radial-gradient(circle at 12px 28%, rgba(255,255,255,.20) 0 1.6px, transparent 1.8px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 2px, rgba(0,0,0,.055) 2px 5px),
    linear-gradient(180deg,#B08856 0%,#8E6539 46%,#7A5430 100%);
  color:#FFF7E8;
  font-family:system-ui,-apple-system,Arial,sans-serif;
  font-size:0.9375rem; font-weight:600; letter-spacing:.055em; white-space:nowrap;
  padding:0.8125rem 2.125rem 0.8125rem 1.625rem;
  border-radius:2px 0 0 2px;
  clip-path:polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%);
  text-shadow:0 1px 2px rgba(50,30,10,.55);
  box-shadow:0 7px 16px rgba(0,0,0,.34);
  width:max-content; max-width:none;
}
.signpost .arm:nth-child(2){ margin-left:0.875rem; }
.signpost .arm:nth-child(3){ margin-left:0.3125rem; }

/* The words on the right sit on a soft panel so the sky cannot swallow them. */
.heroside{
  background:rgba(255,255,255,.80);
  border:1px solid rgba(255,255,255,.9);
  border-radius:1rem;
  padding:1.625rem 1.75rem 1.5rem;
  box-shadow:0 12px 34px rgba(22,56,110,.16);
}
.heroside .claim, .heroside .said, .heroside .awaits{ text-shadow:none; }
.heroside .awaits{ margin-bottom:0; }

/* Keep the hero inside the page. The signpost gap is part of the wrap, not extra. */
.hero .wrap{
  box-sizing:border-box; max-width:73.75rem; margin:0 auto;
  padding-left:10.625rem; padding-right:1.625rem;
  grid-template-columns:1fr 350px; gap:2.125rem;
}
@media(max-width:1100px){ .hero .wrap{ padding-left:1.625rem; grid-template-columns:1fr; } }
.herohead .l2{ font-size:clamp(2.375rem,4.4vw,3.5rem); }

/* The closing line holds one line inside the panel. */
.heroside{ padding:1.5rem 1.5rem 1.375rem; }
.heroside .awaits{ font-size:1.1875rem; white-space:nowrap; }
@media(max-width:1100px){ .heroside .awaits{ white-space:normal; } }

/* ==========================================================================
   13. THE LEGAL PAGES
   Long documents, set to be read: one narrow column, generous line height.
   ========================================================================== */

.legalbody{ max-width:78ch; }
.legalbody h2{
  font-size:1.375rem; margin:2.375rem 0 0.75rem; padding-top:1.375rem;
  border-top:1px solid var(--rule);
}
.legalbody h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.legalbody h3{ font-size:1.125rem; margin:1.625rem 0 0.5rem; }
.legalbody p, .legalbody li{ font-size:1.0625rem; line-height:1.72; }
.legalbody ul, .legalbody ol{ padding-left:1.375rem; margin:0 0 1.125rem; }
.legalbody li{ margin:0 0 0.5rem; }
.legalbody table{ width:100%; border-collapse:collapse; margin:0 0 1.375rem; }
.legalbody th, .legalbody td{
  border:1px solid var(--rule); padding:0.625rem 0.75rem; text-align:left;
  font-size:1rem; vertical-align:top;
}
.legalbody th{ background:var(--cream); color:var(--navy); }
.legalbody a{ color:var(--blue); text-decoration:underline; }

.legalnav{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0.625rem 1.25rem;
  justify-items:center; text-align:center;
}
@media(max-width:900px){ .legalnav{ grid-template-columns:repeat(2,1fr); } }
.legalnav a{ color:var(--navy); font-size:0.9688rem; }
.legalnav a:hover{ color:var(--gold-deep); }

/* ==========================================================================
   14. HOME: THE NAV SITS ON THE HERO
   The main image starts at the very top of the page and the navigation
   floats on it, the way the rendering has it. Inner pages keep their band.
   ========================================================================== */

body.home .masthead{
  position:absolute; top:0; left:0; right:0; z-index:20;
  background-image:linear-gradient(180deg,
    rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.52) 55%,
    rgba(255,255,255,0)  100%);
  border-bottom:0;
}
body.home .hero{ padding-top:8.5rem; }
body.home .hero .wrap{ padding-top:0; }
@media(max-width:1100px){ body.home .hero{ padding-top:6.875rem; } }
@media(max-width:820px){
  body.home .masthead{ position:static; background-image:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.86)); }
  body.home .hero{ padding-top:0; }
}

/* The veil only helps the headline. The bottom of the picture is left alone,
   so the sunflowers and the path are their own full color. */
.hero:before{
  background:none;
}

/* The nav band is a whisper, not a white wall. */
body.home .masthead{
  background-image:linear-gradient(180deg,
    rgba(255,255,255,.58) 0%,
    rgba(255,255,255,.26) 62%,
    rgba(255,255,255,0)  100%);
}

/* The nav band has no white behind it. The picture starts at the very top. */
body.home .masthead{ background-color:transparent; }

/* The headline holds its own against the field without washing the picture. */
.herohead .l1, .herohead .l2{
  text-shadow:
    0 2px 10px rgba(255,255,255,.98),
    0 0 26px rgba(255,255,255,.92),
    0 0 46px rgba(255,255,255,.75);
}

/* ==========================================================================
   15. THE REST OF THE LIST
   ========================================================================== */

/* No sunflower in the top bar on the inner pages either. */
.masthead{
  background-image:linear-gradient(180deg,#F4F9FD,#FFFFFF);
  background-color:var(--paper);
}
.masthead .wrap{ padding-left:0; }
@media(max-width:820px){ .masthead .wrap{ padding-left:0; } }

/* The hero words move up into the sky and sit to the left of the sun. */
.hero .wrap{ align-items:start; }
.hero .wrap > div:first-child{ padding-top:0.5rem; }
.herohead{ text-align:left; }
.heroside{ margin-top:0.25rem; }

/* A link to something that is not open yet reads as not open yet. */
.pill.notyet{
  background:#8FA2BE; color:#fff; cursor:default; box-shadow:none;
  align-self:flex-start; margin-top:auto;
}
.pill.notyet:hover{ background:#8FA2BE; }
.comingsoon{
  display:block; margin-top:0.5625rem;
  font-family:system-ui,-apple-system,Arial,sans-serif; font-size:0.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep);
}

/* The path is the point of the picture, so frame it the way the rendering does. */
.hero{ background-position:center 58%; min-height:41.25rem; }

/* ==========================================================================
   16. THE PHONE
   Everything in the hero stacks. Nothing sits beside anything else.
   ========================================================================== */

@media(max-width:820px){

  /* Header: one tidy block, not a 250 pixel wall. */
  .masthead{ padding:0.75rem 0 0.625rem; }
  .masthead .wrap{
    display:flex; flex-direction:column; align-items:center; gap:0.625rem;
    padding:0 1rem;
  }
  .masthead .lockup .logo{ height:2.75rem; }
  .mainnav{ width:100%; }
  .mainnav ul{ justify-content:center; gap:0.75rem 0.875rem; flex-wrap:wrap; }
  .mainnav a{ font-size:0.8125rem; }
  .masthead .pill{ font-size:0.875rem; padding:0.625rem 1.25rem; }

  /* Hero: block flow, full width, nothing overlapping. */
  .hero{
    display:block; min-height:0; padding:0 0 1.625rem;
    background-position:center 58%;
  }
  .hero .wrap{
    display:block; max-width:100%;
    padding:1.125rem 1.25rem 0.25rem; box-sizing:border-box;
  }
  .hero .wrap > div:first-child{ padding-top:0; }
  .hero:before{ background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.10) 46%, rgba(255,255,255,0) 70%); }

  /* The signpost sits in the flow above the words. */
  .signpost{
    position:relative; width:auto; padding-left:0; margin:0 0 1rem;
    display:flex; flex-direction:column; align-items:flex-start; gap:0.5rem;
  }
  .signpost:before{ display:none; }
  .signpost .arm{
    font-size:0.7812rem; padding:0.5625rem 1.625rem 0.5625rem 0.9375rem;
    margin-left:0 !important; box-shadow:0 4px 10px rgba(0,0,0,.28);
  }

  .herohead{ text-align:center; }
  .herohead .l1{ font-size:1.3125rem; }
  .herohead .l2{ font-size:1.9375rem; white-space:normal; }

  .heroside{ margin-top:1rem; padding:1.125rem 1.125rem 1rem; }
  .heroside .claim{ font-size:1.25rem; }
  .heroside .said{ font-size:0.9375rem; }
  .heroside .awaits{ white-space:normal; font-size:1.0625rem; }

  /* Nothing on the page may push the page sideways. */
  html, body{ overflow-x:hidden; }
}

/* ==========================================================================
   17. MATCHING THE RENDERING
   The right column is white type straight on the picture, no panel.
   The signpost is a heavier post with the planks angled off it.
   ========================================================================== */

/* A soft shadow down the right side so white type has something to sit on. */
.hero:after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:none;
}

.heroside{
  background:none; border:0; box-shadow:none; padding:0; margin-top:2.125rem;
}
.heroside .claim{ color:#fff; text-shadow:0 2px 12px rgba(20,35,60,.55); }
.heroside .said{  color:#F2F7FC; text-shadow:0 1px 8px rgba(20,35,60,.6); }
.heroside .awaits{
  color:#fff; font-size:1.3125rem; text-shadow:0 2px 10px rgba(20,35,60,.6);
  margin-top:1.125rem;
}
.heroside .pill{ box-shadow:0 8px 22px rgba(20,35,60,.35); }

/* The post: thicker, taller, weathered, with the planks stepping off it. */
.signpost{ width:18.75rem; padding-left:2.125rem; }
.signpost:before{
  left:2.5rem; top:2%; bottom:-6%; width:1.875rem; border-radius:0.25rem;
  background:
    repeating-linear-gradient(178deg, rgba(255,255,255,.07) 0 4px, rgba(0,0,0,.09) 4px 9px),
    linear-gradient(90deg,#5E4123 0%,#8A6740 30%,#A07C4E 52%,#6B4A28 100%);
  box-shadow:0 8px 20px rgba(0,0,0,.38);
}
.signpost .arm{ font-size:0.9688rem; padding:0.875rem 2.25rem 0.875rem 1.875rem; }
.signpost .arm:nth-child(1){ transform:rotate(-1.2deg); }
.signpost .arm:nth-child(2){ transform:rotate(.8deg); margin-left:0.625rem; }
.signpost .arm:nth-child(3){ transform:rotate(-.6deg); margin-left:2px; }

/* White type has to hold up over whatever picture ends up behind it. */
.hero:after{
  background:none;
}
.heroside .said{ font-size:0.9688rem; text-shadow:0 1px 3px rgba(15,28,50,.85), 0 2px 12px rgba(15,28,50,.6); }
.heroside .claim{ text-shadow:0 2px 4px rgba(15,28,50,.7), 0 4px 18px rgba(15,28,50,.5); }
.heroside .awaits{ text-shadow:0 2px 4px rgba(15,28,50,.75), 0 3px 14px rgba(15,28,50,.5); }

/* ==========================================================================
   18. A COMPLETE SYSTEM, AND MORE THAN YOUR STRUGGLES
   ========================================================================== */

.system{ background:linear-gradient(180deg,#FFFFFF,#F7FBFE); padding:3.625rem 0; }
.system .sysrow{ display:grid; grid-template-columns:1fr 1.25fr; gap:2.75rem; align-items:center; }
@media(max-width:960px){ .system .sysrow{ grid-template-columns:1fr; } }

.quotecard{
  position:relative; margin:0; background:#fff;
  border:1px solid var(--rule); border-radius:1.25rem; padding:2.125rem 2.125rem 1.875rem;
  box-shadow:0 12px 34px rgba(22,56,110,.09);
}
.quotecard:before{
  content:"“"; position:absolute; left:1.5rem; top:2px;
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:4rem; color:var(--blue-light);
}
.quotecard p{
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-style:italic;
  font-size:1.0312rem; line-height:1.62; color:var(--blue); margin:0.625rem 0 1.125rem;
}
.quotecard cite{
  display:block; font-style:normal; font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:0.9375rem; color:var(--navy);
}
.quotecard cite span{ display:block; font-size:0.8125rem; color:var(--ink-soft); }
.quotecard .qheart{ position:absolute; right:1.875rem; bottom:1.375rem; font-size:1.875rem; color:var(--gold); }

.sysgrid h2{ text-align:center; font-size:clamp(1.375rem,2.4vw,1.75rem); color:var(--navy); margin:0 0 1.625rem; }
.sysgrid .four{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.375rem; text-align:center; }
@media(max-width:760px){ .sysgrid .four{ grid-template-columns:1fr 1fr; } }
.pillar .ico{
  display:flex; align-items:center; justify-content:center;
  width:3.5rem; height:3.5rem; margin:0 auto 0.75rem; border-radius:50%;
  background:#E7F0F9; color:var(--blue);
}
.pillar .ico svg{ width:1.6875rem; height:1.6875rem; }
.pillar h3{
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:1rem; color:var(--navy);
  margin:0 0 0.375rem; letter-spacing:0; text-transform:none;
}
.pillar p{ font-size:0.9062rem; color:var(--ink-soft); margin:0; line-height:1.5; }

.miniq{ margin:1.875rem 0 0; text-align:center; }
.miniq p{
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-style:italic;
  font-size:1rem; color:var(--blue); margin:0 auto 0.5rem; max-width:62ch;
}
.miniq cite{ font-style:normal; font-size:0.875rem; color:var(--ink-soft); }
.miniq .hrt{ color:var(--gold); }

.morethan{
  background:linear-gradient(180deg,#FFFFFF,#FBFDFF);
  border-top:1px solid var(--rule); padding:2.875rem 0 3.125rem; text-align:center;
}
.morethan h2{
  font-family:var(--script); font-size:clamp(1.875rem,3.6vw,2.625rem);
  color:var(--blue); margin:0 0 0.875rem; font-weight:600;
}
.morethan h2 .hrt{ color:var(--gold); font-family:inherit; }
.morethan p{ max-width:78ch; margin:0 auto; font-size:1.0625rem; color:var(--ink); }

/* ==========================================================================
   19. THE SIGNPOST IS PART OF THE PICTURE NOW
   The artwork carries the post and the three lines, so the drawn one goes.
   ========================================================================== */

.signpost{ display:none; }

.hero{
  min-height:0; aspect-ratio:2400 / 1342;
  background-position:center center; background-size:cover;
  display:flex; align-items:stretch;
}
.hero .wrap{
  padding-left:1.625rem; padding-right:1.625rem;
  grid-template-columns:1fr 360px; gap:2.5rem;
  align-items:center; align-content:center;
}
body.home .hero{ padding-top:0; }
body.home .hero .wrap{ padding-top:7.5rem; padding-bottom:2.5rem; }

/* The headline clears the baked signpost on the left. */
.hero .wrap > div:first-child{ padding-left:14.375rem; padding-top:0; }
@media(max-width:1200px){ .hero .wrap > div:first-child{ padding-left:10.625rem; } }

@media(max-width:820px){
  .hero{ aspect-ratio:auto; display:block; }
  .hero .wrap{ padding:1.125rem 1.25rem 0.25rem; }
  .hero .wrap > div:first-child{ padding-left:0; }
  body.home .hero .wrap{ padding-top:1.125rem; }
}

/* ==========================================================================
   20. THE HERO ON A PHONE
   The whole picture shows, uncropped, with the signpost intact. The words
   sit underneath it on cream where they are easy to read.
   ========================================================================== */

@media(max-width:820px){
  .hero{
    display:block; aspect-ratio:auto;
    background-color:var(--cream);
    background-size:100% auto;
    background-position:top center;
    background-repeat:no-repeat;
    padding-top:55.92%;
    padding-bottom:1.625rem;
  }
  .hero:before, .hero:after{ display:none; }
  .hero .wrap{ padding:1.375rem 1.375rem 0; }
  body.home .hero .wrap{ padding-top:1.375rem; }

  .herohead{ text-align:center; }
  .herohead .l1{ color:var(--navy); text-shadow:none; font-size:1.3125rem; }
  .herohead .l2{ color:var(--gold-deep); text-shadow:none; font-size:1.9375rem; }

  .heroside{ margin-top:1.25rem; text-align:center; }
  .heroside .claim{ color:var(--navy); text-shadow:none; font-size:1.3125rem; }
  .heroside .said{ color:var(--ink); text-shadow:none; font-size:0.9688rem; }
  .heroside .awaits{ color:var(--navy); text-shadow:none; }
  .heroside .pill{ box-shadow:0 6px 16px rgba(22,56,110,.18); }
}

/* The home page rule above outranks the plain one, so say it that way. */
@media(max-width:820px){
  body.home .hero{ padding-top:55.92%; }
}

.social a{ width:auto; height:auto; font-size:0.875rem; text-decoration:none; }

/* These five were written for a wide screen and had no media query around
   them, so on a phone they beat the phone design further up this file. That
   is where the hard yellow rectangle, the right aligned words and the 72
   pixel headline were coming from. They are desktop only now. */
@media(min-width:821px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero .heroside{
    background:rgba(250,204,21,.30);
    border:0; box-shadow:none; border-radius:0;
    padding:1.625rem 1.875rem;
    width:fit-content;
    margin:0 0 0 auto;
    text-align:right;
  }
  .hero .herohead{ text-align:right; margin:0; }
  .hero .herohead .l1{ font-size:3.25rem; }
  .hero .herohead .l2{ font-size:4.5rem; white-space:normal; }
}

.heal .collage{
  background:url('../images/collage.jpg') center/contain no-repeat;
  min-height:36.25rem;
  border-radius:0; box-shadow:none;
}
@media(max-width:820px){ .heal .collage{ min-height:18.75rem; } }
@media(max-width:560px){ .heal .collage{ min-height:14.375rem; } }

/* ==========================================================================
   21. THE ABOUT PAGE
   Same shape as the home page: a picture across the top that melts into the
   sunflower field, the writing in one column, then the three cards.
   ========================================================================== */

.head-photo{
  position:relative;
  width:100%;
  height:clamp(18.75rem, 41vw, 35rem);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  display:flex;
  align-items:flex-end;
}
.head-photo:before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:62%;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 42%,
    rgba(255,255,255,.90) 76%,
    #FFFFFF 100%);
}
.head-photo .wrap{ position:relative; z-index:2; padding-bottom:1.375rem; }
.head-photo .herohead{ text-align:center; margin:0; }
.head-photo .herohead .l1{
  font-size:clamp(0.9375rem,1.5vw,1.1875rem); letter-spacing:.14em; text-transform:uppercase;
  font-family:system-ui,-apple-system,Arial,sans-serif; font-weight:700;
  color:var(--navy); display:block; margin:0 0 0.375rem;
  text-shadow:0 2px 14px rgba(255,255,255,.95);
}
.head-photo .herohead .l2{
  font-size:clamp(2.5rem,5.2vw,4.125rem); display:block;
  text-shadow:0 2px 16px rgba(255,255,255,.95);
}
@media(max-width:820px){ .head-photo{ height:clamp(14.375rem, 58vw, 25rem); } }

/* The writing runs down the middle of the page, never in two columns. */
.heal.center{ padding:2.75rem 0 2.5rem; text-align:center; }
.heal.center .wrap{ max-width:52.5rem; }
.heal.center p{ max-width:none; margin-left:auto; margin-right:auto; }
.heal.center .swoosh{ margin:0 auto 1.125rem; display:block; }
.heal.center .said{
  font-family:var(--script); font-size:clamp(1.4375rem,2.6vw,1.875rem);
  color:var(--gold-deep); line-height:1.35; margin:1.625rem auto 1.5rem; max-width:26ch;
}
.heal.center .yougot{ display:inline-block; margin-left:1.125rem; }

/* The three cards, soft edged, sitting on the sunflower field. */
.doors.abouts{ padding:0.625rem 0 3.875rem; }
.doors.abouts .door{
  background:rgba(255,255,255,.86);
  border:0; border-radius:1.25rem;
  box-shadow:0 16px 40px rgba(22,56,110,.13);
}
.doors.abouts .door .shot{
  height:auto; aspect-ratio:4 / 3;
  background-position:center center; background-size:cover; background-repeat:no-repeat;
}
.doors.abouts .door .in{ padding:1.125rem 1.375rem 1.375rem; text-align:center; }
.doors.abouts .door h3{ margin:0; }

/* ==========================================================================
   22. ONE FOOTER FOR EVERY PAGE
   The sign-up form, the links and the small print now sit together on the
   sunflower field, and that one picture fills the whole footer.
   ========================================================================== */

/* the footer picture is set once, at the end of this sheet */
.footzone .join,
.footzone .footer,
.footzone .smallprint{
  background:transparent;
  background-image:none;
  border-top:0;
}
.footzone .footer{ border-top:1px solid rgba(22,56,110,.14); margin-top:0.5rem; }

/* ==========================================================================
   23. THE MIDDLE OF THE HOME PAGE IS ONE PICTURE
   The heading, the gold swoosh, the polaroids and "You've got this" are all
   painted into band-heal-new.jpg now. The words stay in the page for screen
   readers and for phones, and are simply not shown where the picture says
   them. The writing sits down the left, and the three cards lay over the
   bottom third of the picture. Every measurement is a percentage, so the
   whole thing keeps its shape at any window width.
   ========================================================================== */

.polafield{
  background-color:#FCFDFD;            /* the same white the picture ends on */
  background-image:url('../images/band-heal-new.jpg');
  background-size:100% auto;
  background-position:center top;
  background-repeat:no-repeat;
}
.polafield .heal,
.polafield .doors{ background:transparent; }

@media(min-width:901px){

  /* the picture is 1360 wide by 1156 tall */
  .polafield{ min-height:0; }
  .polafield .inpic{ display:none; }

  /* The writing lines up under the painted heading, in the clear strip on
     the left of the picture, so it never runs under the polaroids. */
  .polafield .heal{ padding:24.5% 0 0; }
  .polafield .heal .wrap{ max-width:none; padding-left:2.4%; padding-right:0; }
  .polafield .heal .say{ width:29%; }
  .polafield .heal .say p{ max-width:none; }
  .polafield .heal .said{ font-size:0.9062rem; }
  .polafield .heal .awaits{ font-size:1.1875rem; margin:0.75rem 0 0.625rem; }

  /* The cards lay over the bottom third of the picture. */
  .polafield .doors{ padding:13% 0 7%; }
  .polafield .door{
    background:rgba(255,255,255,.88);
    border:0; border-radius:1.25rem;
    box-shadow:0 16px 40px rgba(22,56,110,.16);
  }
}

/* On a phone the painted words would be far too small to read, so the
   picture steps aside and the real words come back. */
@media(max-width:900px){
  .polafield{
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,255,255,.80)),
      url('../images/band-heal.jpg');
    background-size:cover;
  }
  .polafield .heal{ padding:2.75rem 0 1.875rem; }
  .polafield .doors{ padding:0 0 3rem; }
}

/* The footer row was set to never wrap, which pushed "Keep Dreaming" past the
   right edge between 1051 and 1350 pixels and put a sideways scrollbar on
   every page. It wraps again in that range. */
@media(max-width:1350px){ .footer .row{ flex-wrap:wrap; } .footlinks{ margin-left:0; } }

/* ==========================================================================
   24. THE PROGRAM PAGE
   A flyer at the top, then four boxes in two rows of two underneath it.
   The boxes stack into one column on a phone.
   ========================================================================== */

.flyer{ background:var(--paper); padding:0 0 0.625rem; }
.flyer .wrap{ max-width:72.5rem; }
.flyer img{ display:block; width:100%; height:auto; border-radius:1rem; }

.quads{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.625rem;
}
.quad{
  position:relative;
  background:#fff;
  border-radius:1.125rem;
  padding:1.875rem 1.875rem 1.625rem 1.875rem;
  box-shadow:0 14px 34px rgba(22,56,110,.12);
}
.quad .dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.375rem; height:2.375rem; margin-bottom:0.875rem;
  border-radius:50%; background:var(--gold);
  color:#16386E; font-weight:700; font-size:1.125rem;
}
.quad h3{ margin:0 0 0.625rem; }
.quad p:last-child{ margin:0; }

@media(max-width:900px){
  .quads{ grid-template-columns:1fr; gap:1.25rem; }
  .quad{ padding:1.5rem; }
}

/* ==========================================================================
   25. THE SOCIAL LINKS ARE ICONS NOW
   Three of them, no words: LinkedIn, Instagram, Facebook.
   ========================================================================== */

.social{ display:inline-flex; align-items:center; gap:1rem; }
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.125rem; height:2.125rem; border-radius:50%;
  background:rgba(22,56,110,.07);
  color:#16386E;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.social a:hover{ background:#16386E; color:#fff; transform:translateY(-2px); }
.social svg{ width:1.1875rem; height:1.1875rem; fill:currentColor; display:block; }

/* ==========================================================================
   26. ONE SEAMLESS PAGE, NOT BLOCKED ROWS
   Every join between sections gets a soft white fade instead of a hard line,
   so one band melts into the next and the picture only ever hints through.
   ========================================================================== */

.polafield{ position:relative; }

/* the fluffy fade over the bottom of the picture */
.polafield:after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:34%;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.35) 28%,
    rgba(255,255,255,.72) 55%,
    rgba(255,255,255,.92) 78%,
    #FCFDFD               100%);
  filter:blur(1.5px);
}
.polafield > *{ position:relative; z-index:1; }

/* the same soft breath over the top of the picture, so it does not start
   with a hard edge either */
.polafield:before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:12%;
  pointer-events:none;
  background:none;
}

/* the footer picture starts the same way it ends: soft */
.footzone{ position:relative; }
/* the footer picture carries its own fade, so nothing is laid over it */
.footzone > *{ position:relative; z-index:1; }

/* no more ruled lines between bands */
.values{ border-top:0; border-bottom:0; }
.footzone .footer{ border-top:0; }
.sheet + .sheet{ border-top:0; }

/* ==========================================================================
   27. A FULL WIDTH PICTURE
   Edge to edge, no container, no fixed height. The picture keeps its own
   shape at every window width.
   ========================================================================== */

.fullbleed{ background:#FCFDFD; line-height:0; }
.fullbleed img{ display:block; width:100%; height:auto; }

/* ==========================================================================
   28. THE ABOUT PAGE
   Built to the approved rendering. Every band melts into the next, so the
   page reads as one sheet rather than stacked blocks.
   ========================================================================== */

.aboutlede{
  background:linear-gradient(180deg,#FFFFFF 0%, #FCFDFD 100%);
  padding:2.75rem 0 2.125rem; text-align:center;
}
.aboutlede h1{
  font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.24;
  color:#16386E; margin:0 0 1.125rem;
}
.aboutlede p{
  max-width:45rem; margin:0 auto 1.375rem;
  font-size:1.0625rem; line-height:1.7; color:#33455F;
}
.aboutlede .kicker{
  font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:#5B7CA6; margin:1.125rem 0 0;
}
.pill.gold{ background:var(--gold); color:#16386E; border-color:transparent; }
.pill.gold:hover{ filter:brightness(1.05); }

/* --- the four ways in --- */
.waysin{ background:#FCFDFD; padding:0.875rem 0 2.875rem; }
.waysin .four{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.way{
  display:block; text-align:center; text-decoration:none;
  padding:1.625rem 1.375rem; border-right:1px solid rgba(22,56,110,.12);
}
.way:last-child{ border-right:0; }
.way h3{
  margin:0.875rem 0 0.5rem; color:#16386E;
  font-size:0.9375rem; letter-spacing:.10em; text-transform:uppercase;
}
.way p{ margin:0; font-size:0.9062rem; line-height:1.6; color:#4A5D77; }
.way:hover h3{ text-decoration:underline; }

.bub{
  display:inline-flex; align-items:center; justify-content:center;
  width:3.5rem; height:3.5rem; border-radius:50%;
}
.bub svg{ width:1.625rem; height:1.625rem; display:block; }
.bub.rose{ background:#FCE4E6; fill:#D9455A; }
.bub.sky { background:#E1EEFA; fill:#2E6DA4; }
.bub.sun { background:#FDF0D2; fill:#DFA22B; }
.bub.leaf{ background:#E4F2E0; fill:#4C9440; }

/* --- you are more than your struggles --- */
.morethan{ background:#FCFDFD; padding:0.625rem 0 2.125rem; text-align:center; }
.script{
  font-family:'Dancing Script', cursive;
  font-size:clamp(1.875rem,3.8vw,2.625rem); color:#2E6DA4;
  margin:0 0 1rem; font-weight:600;
}
.script .hrt{ color:var(--gold); }
.morethan p{
  max-width:51.25rem; margin:0 auto;
  font-size:1.0625rem; line-height:1.75; color:#33455F;
}

/* --- the four pictures --- */
.fourpix{ background:#FCFDFD; padding:1.625rem 0 2.75rem; }
.fourpix .four{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.625rem; }
.fourpix .pic{
  height:10rem; border-radius:0.75rem;
  background:var(--sky) center/cover no-repeat;
}
.fourpix figure{ margin:0; }
.fourpix figcaption{
  display:block; padding:0.875rem 2px 0;
  font-size:0.9062rem; line-height:1.6; color:#4A5D77;
}
.fourpix figcaption b{
  display:block; margin-bottom:0.375rem;
  font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:1.1875rem; font-weight:600; color:#16386E;
}

/* --- the quote and the system --- */
.systemband{ background:#FCFDFD; padding:1.25rem 0 2.875rem; }
.systemband .pair{ display:grid; grid-template-columns:1fr 1fr; gap:2.375rem; align-items:start; }
.bigquote{
  margin:0; background:#fff; border-radius:1.125rem;
  padding:1.875rem 2rem; box-shadow:0 14px 34px rgba(22,56,110,.10);
}
.bigquote p{
  margin:0 0 1.125rem; font-style:italic;
  font-size:0.9688rem; line-height:1.75; color:#33455F;
}
.bigquote cite{
  display:block; font-style:normal; font-size:0.875rem; color:#5B7CA6;
}
.system h2{
  margin:0 0 1.375rem; text-align:center; color:#2E6DA4;
  font-size:clamp(1.25rem,2.4vw,1.625rem);
}
.sysgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.125rem; text-align:center; }
.sysone h3{
  margin:0.75rem 0 0.375rem; color:#16386E; font-size:0.9375rem;
}
.sysone p{ margin:0; font-size:0.8438rem; line-height:1.55; color:#4A5D77; }
.smallquote{
  margin:1.625rem auto 0; max-width:32.5rem; text-align:center;
  font-style:italic; font-size:0.9062rem; line-height:1.7; color:#4A5D77;
}

/* --- living heaven on earth --- */
.heavenband{
  background-image:
    linear-gradient(180deg, rgba(252,253,253,1) 0%, rgba(255,255,255,.35) 22%, rgba(255,255,255,.25) 100%),
    url('../images/band-values.jpg');
  background-size:cover; background-position:center;
  padding:3.25rem 0 3.625rem; text-align:center;
}
.heavenband .script{ color:#C98A16; margin-bottom:1.375rem; }
.heavenband .together{ font-size:.82em; }

.creedstrip{ background:#16386E; padding:1rem 0; text-align:center; }
.creedstrip p{
  margin:0; color:#DCE8F5;
  font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase;
}

@media(max-width:900px){
  .waysin .four,
  .fourpix .four,
  .sysgrid{ grid-template-columns:1fr 1fr; }
  .systemband .pair{ grid-template-columns:1fr; gap:1.75rem; }
  .way{ border-right:0; border-bottom:1px solid rgba(22,56,110,.12); }
}
@media(max-width:560px){
  .waysin .four,
  .fourpix .four,
  .sysgrid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   29. THE ABOUT PAGE NAV SITS INSIDE THE PICTURE
   The header artwork already carries the logo, so the site logo steps aside
   and only the menu shows, laid over the top of the picture beside it.
   ========================================================================== */

body.overlaynav .masthead{
  position:absolute; top:0; left:0; right:0; z-index:6;
  background:transparent; border-bottom:0; box-shadow:none;
}
body.overlaynav .masthead .wrap{ justify-content:flex-end; gap:1.375rem; }
body.overlaynav .masthead .lockup{ display:none; }
body.overlaynav .mainnav a{ color:#16386E; }
body.overlaynav .mainnav a:hover,
body.overlaynav .mainnav a.on{ color:#0F2A55; }
body.overlaynav .fullbleed{ position:relative; }

@media(max-width:900px){
  body.overlaynav .masthead{ position:static; background:#fff; }
  body.overlaynav .masthead .wrap{ justify-content:space-between; }
  body.overlaynav .masthead .lockup{ display:block; }
}

/* ==========================================================================
   30. THE TRANSFORMATION PANEL READS BIGGER
   No small print. The four lines are the content, so they carry the weight.
   ========================================================================== */

.sysone p{
  font-size:1.0625rem; line-height:1.6; font-weight:700; color:#16386E;
  margin:0.875rem 0 0;
}
.smallquote{
  font-size:1.125rem; line-height:1.7; max-width:43.75rem; color:#33455F;
  font-style:italic; margin:2rem auto 0;
}
.systemband .sysgrid{ gap:1.625rem; }
.system h2{ font-size:clamp(1.375rem,2.8vw,1.875rem); margin-bottom:1.625rem; }

/* ==========================================================================
   31. THE ABOUT HERO IS ONE PIECE
   The picture and the words below it share one background, so the cloud at
   the bottom of the artwork carries straight on into the writing with no
   seam between them.

   The kicker line was left aligned because it had a fixed width with a zero
   left margin. It is auto on both sides now, so it centers.
   ========================================================================== */

.abouthero{
  background:#FFFFFF;   /* the picture's bottom edge is pure white, so the
                           writing sits on the same white with no seam */
  padding:0 0 2.5rem;
  text-align:center;
}
.abouthero .heroshot{ display:block; width:100%; height:auto; }

/* The picture's lower fifteenth is clear white cloud. The writing is pulled
   up into it so the words start inside the picture rather than under it,
   and the two read as one piece. The pull is a percentage of the page width,
   so it holds its place at any window size. */
.abouthero .wrap{
  position:relative;
  margin-top:calc(-19% - 12rem);   /* the extra 192px is your two inches */
  padding-top:0;
}
@media(max-width:900px){
  .abouthero .wrap{ margin-top:calc(-12% - 6rem); }
}
@media(max-width:600px){
  .abouthero .wrap{ margin-top:0; padding-top:1.5rem; }
}
.abouthero h1{
  font-size:clamp(1.75rem,3.6vw,2.625rem); line-height:1.24;
  color:#16386E; margin:0 0 1.125rem;
}
.abouthero p{
  max-width:47.5rem; margin:0 auto 1.25rem;
  font-size:1.0625rem; line-height:1.7; color:#33455F;
}
.abouthero .kicker{
  margin:1.375rem auto 0; max-width:none; text-align:center;
  font-size:0.8125rem; letter-spacing:.16em; text-transform:uppercase; color:#5B7CA6;
}

/* the old lede block is gone, but keep the kicker rule honest anywhere else */
.kicker{ margin-left:auto; margin-right:auto; text-align:center; }

/* ==========================================================================
   32. THE MENU READS TWICE AS BIG
   ========================================================================== */

.mainnav a{ font-size:1.6875rem; letter-spacing:.02em; }   /* was 13.5px */
.masthead .pill{ font-size:1.35em; padding:0.75rem 1.375rem; }
@media(max-width:900px){ .mainnav a{ font-size:1.25rem; } }

/* ==========================================================================
   33. THE FOOTER PICTURE
   ========================================================================== */

.footzone{
  position:relative;
  /* FOOTER.jpg is 1998 x 1120 and already fades to white on all four edges,
     so it needs no overlay and must never be cropped. It sits at its own
     shape across the page width, anchored to the bottom, on the white it
     fades into. */
  background-color:#FFFFFF;
  background-image:url('../images/FOOTER.jpg');
  background-size:100% auto;
  background-position:center bottom;
  background-repeat:no-repeat;
}

/* ==========================================================================
   35. THE DISCLAIMER BAR
   Its own strip under everything, in the same blue as the creed line, edge
   to edge with no gutters, so it eats as little of the page as possible.
   ========================================================================== */

.smallprint{
  background:#16386E;
  padding:0.75rem 0;
  text-align:center;
}
.smallprint .wrap{
  max-width:none;
  width:100%;
  padding-left:1.125rem;
  padding-right:1.125rem;
}
.smallprint p{
  margin:0 0 0.25rem;
  color:#DCE8F5;
  font-size:0.75rem;
  line-height:1.45;
}
.smallprint p:last-child{ margin:0; color:#A9C2DE; }
.smallprint a{ color:#EBD9A8; }

/* the logo and the footer menu drop as low as the picture allows */
.footzone .footer{ margin-top:0; padding-top:4rem; padding-bottom:1.125rem; }
.footzone .join{ padding-bottom:0.625rem; }
@media(max-width:900px){
  .footzone .footer{ padding-top:2rem; }
  .smallprint p{ font-size:0.7812rem; }
}

/* ==========================================================================
   36. LINE DRAWN ICONS AND A HAND DRAWN HEART
   The pastel discs with solid glyphs inside them are gone. Every icon is now
   a single thin stroke in the navy of the logo, drawn open rather than
   filled, so it sits in the same family as the logo mark.
   ========================================================================== */

.ink{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.875rem; height:2.875rem;
  color:#16386E;
}
.ink svg{
  width:2.375rem; height:2.375rem; display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.way:hover .ink{ color:#2E6DA4; }

/* the heart is drawn, not typeset: an open stroke with a tail, in the gold */
.hrt{
  display:inline-block;
  vertical-align:-0.16em;
  line-height:0;
  color:#DFA22B;
}
.hrt svg{
  width:1.05em; height:1em; display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.script .hrt{ width:auto; }
.script .hrt svg{ width:1.15em; height:1.1em; stroke-width:1.5; }
.keep .hrt{ margin-left:0.375rem; }

/* ==========================================================================
   37. A SOFT SHEET INSTEAD OF FLAT WHITE
   ========================================================================== */

.softsheet{
  background:linear-gradient(180deg,#FFFFFF 0%, #F7FAFD 34%, #FCFBF6 100%);
  padding:0.625rem 0 3.75rem;
}
.pagehead{
  text-align:center; color:#16386E;
  font-size:clamp(1.875rem,3.6vw,2.625rem); margin:0 0 0.75rem;
}
.lede{
  text-align:center; max-width:45rem; margin:0 auto 2.5rem;
  font-size:1.0625rem; line-height:1.7; color:#4A5D77;
}

/* ==========================================================================
   38. THE REVIEWS
   ========================================================================== */

.quotes{ max-width:53.75rem; margin:0 auto; }
.quotes blockquote{
  margin:0 0 1.375rem;
  background:#fff;
  border-radius:1rem;
  padding:1.625rem 1.875rem;
  box-shadow:0 10px 26px rgba(22,56,110,.09);
}
.quotes blockquote p{
  margin:0 0 0.875rem;
  font-size:1.0312rem; line-height:1.75; color:#33455F;
}
.quotes blockquote p:last-of-type{ margin-bottom:1rem; }
.quotes cite{
  display:block; font-style:normal;
  font-size:0.875rem; letter-spacing:.04em; color:#5B7CA6;
}
.quotes blockquote.long p{ font-size:0.9688rem; }
@media(max-width:600px){
  .quotes blockquote{ padding:1.25rem 1.25rem; }
}

/* ==========================================================================
   39. THE CLOUD SITS AT THE TOP OF EVERY PAGE
   Home and About carry their own artwork, so they are left alone. Every
   other page opens on the same cloud, in the same place, fading into the
   page underneath it. No page starts on flat white.
   ========================================================================== */

body.cloudtop{
  background-color:#FCFDFD;
  background-image:url('../images/band-tools-cloudy.jpg');
  background-size:100% auto;
  background-position:center top;
  background-repeat:no-repeat;
}
body.cloudtop main{ background:transparent; }
body.cloudtop .softsheet{
  background:linear-gradient(180deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.55) 14%,
    rgba(252,253,253,.94) 34%,
    #FCFBF6               100%);
}
body.cloudtop .legalhead{
  background:transparent;
  padding-top:2.5rem;
  text-align:center;
}
body.cloudtop .legalhead h1{ color:#16386E; }

/* the navy breadcrumb band is retired everywhere */
.head-path{
  background:transparent !important;
  padding:2.125rem 0 0.375rem;
  text-align:center;
}
.head-path h1,
.head-path .overline{ color:#16386E; }
.head-path .stand{ color:#4A5D77; }

/* ==========================================================================
   40. THE ICONS, AS DRAWN IN THE RENDERING
   Big filled discs with a solid glyph inside, in the four colors from the
   rendering. The system panel uses the blue disc. Nothing is crammed and
   nothing is set small.
   ========================================================================== */

.bub{
  display:inline-flex; align-items:center; justify-content:center;
  width:4.875rem; height:4.875rem; border-radius:50%;
  margin-bottom:0.375rem;
}
.bub svg{ width:2.375rem; height:2.375rem; display:block; }
.bub.rose{ background:#FBDDE1; fill:#D63B52; }
.bub.sky { background:#DCEBFA; fill:#2E6DA4; }
.bub.sun { background:#FCEBC6; fill:#E0A32A; }
.bub.leaf{ background:#DFF0DA; fill:#4C9440; }
.way:hover .bub{ transform:translateY(-3px); transition:transform .18s ease; }

.waysin{ padding:1.375rem 0 3.5rem; }
.way{ padding:1.875rem 1.5rem; }
.way h3{ font-size:1rem; margin:1.125rem 0 0.625rem; }
.way p{ font-size:0.9688rem; }

/* the transformation panel gets room to breathe and readable type */
.systemband{ padding:1.875rem 0 3.75rem; }
.systemband .sysgrid{ gap:2.5rem; }
.sysone p{ font-size:1.125rem; line-height:1.55; margin:1.125rem 0 0; }
.system h2{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:2.125rem; }

@media(max-width:900px){
  .bub{ width:4.25rem; height:4.25rem; }
  .bub svg{ width:2.0625rem; height:2.0625rem; }
  .systemband .sysgrid{ gap:1.875rem; }
}

/* ==========================================================================
   41. TWO PLAIN BACKGROUNDS, NOTHING LAID OVER THEM
   Articles sits on the cloud that body.cloudtop already provides, with no
   panel of any kind on top of it. Reviews sits on the path picture, and all
   nineteen reviews share one box.
   ========================================================================== */

.plainbg{ background:transparent; padding:0.625rem 0 3.75rem; }

.pathbg{
  background-color:#FCFDFD;
  background-image:url('../images/path.jpg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
  padding:2.5rem 0 4.375rem;
}
.pathbg .pagehead,
.pathbg .lede{
  color:#fff;
  text-shadow:0 2px 14px rgba(10,25,50,.55);
}

/* one box holds them all */
.quotes.onebox{
  background:rgba(255,255,255,.94);
  border-radius:1.25rem;
  padding:2.125rem 2.5rem;
  box-shadow:0 18px 46px rgba(22,56,110,.20);
}
.quotes.onebox blockquote{
  background:none;
  border-radius:0;
  box-shadow:none;
  padding:0 0 1.375rem;
  margin:0 0 1.375rem;
  border-bottom:1px solid rgba(22,56,110,.12);
}
.quotes.onebox blockquote:last-child{
  border-bottom:0; margin-bottom:0; padding-bottom:0;
}
@media(max-width:600px){
  .quotes.onebox{ padding:1.5rem 1.25rem; }
  .pathbg{ background-attachment:scroll; }
}


/* ==========================================================================
   42. NO WHITE BOXES ON REVIEWS OR ARTICLES
   The top bar goes clear so the picture runs behind it, the path covers the
   whole reviews page, the cloud covers the whole articles page, and the
   footer picture fades into the page above it.
   ========================================================================== */

body.reviews .masthead,
body.articles .masthead{
  background-color:transparent;
  background-image:none;
  border-bottom:0;
  box-shadow:none;
}

/* the path is the page, not a panel on the page */
body.reviews{
  background-color:#FCFDFD;
  background-image:url('../images/path.jpg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body.reviews main{ background:transparent; }
body.reviews .pathbg{
  background-color:transparent;
  background-image:none;
  padding:1.625rem 0 3.75rem;
}

/* the cloud is the page, nothing laid over it */
body.articles main,
body.articles .plainbg{ background:transparent; background-image:none; }

/* the footer picture melts into whatever is above it */
.footzone:before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:22%;
  background:linear-gradient(180deg,#FFFFFF 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,0) 100%);
  pointer-events:none;
  z-index:0;
}
@media(max-width:900px){ body.reviews{ background-attachment:scroll; } }

/* ==========================================================================
   43. THE TOP BAR ON A SMALL SCREEN
   The gutter was set to zero, so the logo hit the wall. The menu was set to
   27 pixels, so it filled the row and pushed everything into the corner.
   Both are fixed here, and under 900 the bar stacks and centers.
   ========================================================================== */

.masthead .wrap{ padding-left:1.625rem; padding-right:1.625rem; }

@media(max-width:900px){

  .masthead .wrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:0.75rem;
    padding-left:1.125rem;
    padding-right:1.125rem;
    padding-top:0.75rem;
    padding-bottom:0.75rem;
  }

  .masthead .lockup{
    width:100%;
    display:flex;
    justify-content:center;
    margin:0;
  }
  .masthead .lockup .logo{
    height:auto;
    width:78%;
    max-width:20.625rem;
    margin:0 auto;
  }

  .mainnav{
    width:100%;
    margin-left:0;
  }
  .mainnav ul{
    justify-content:center;
    gap:0.875rem 1.25rem;
    row-gap:0.5rem;
  }
  .mainnav a{
    font-size:1rem;
    white-space:nowrap;
    padding-bottom:2px;
  }

  .masthead .pill{
    font-size:0.9375rem;
    padding:0.6875rem 1.375rem;
    margin:2px auto 0;
  }
}

@media(max-width:560px){
  .masthead .lockup .logo{ width:84%; max-width:17.5rem; }
  .mainnav a{ font-size:0.9375rem; }
  .mainnav ul{ gap:0.75rem 1rem; }
  .masthead .pill{ font-size:0.875rem; padding:0.625rem 1.25rem; }
}


/* ==========================================================================
   44. THE PHONE, PUT BACK THE WAY IT WAS DRAWN
   Soft edges, no hard rectangles, nothing squared off, and the picture at
   the top of the home page given real height instead of a thin strip.
   ========================================================================== */

@media(max-width:820px){

  /* the hero picture is no longer a thin band */
  body.home .hero{
    padding-top:0;
    min-height:62vh;
    background-size:cover;
    background-position:center 32%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  body.home .hero .wrap{
    padding:0 1.375rem 1.625rem;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,253,247,.72) 34%, rgba(255,253,247,.94) 100%);
    border-radius:0;
  }

  .herohead{ text-align:center; }
  .herohead .l1{ font-size:1.375rem; line-height:1.25; }
  .herohead .l2{ font-size:2rem; line-height:1.1; }

  .heroside{
    background:transparent;
    width:auto;
    margin:1rem 0 0;
    padding:0;
    text-align:center;
    border-radius:0;
    box-shadow:none;
  }

  /* soft edges everywhere, nothing squared off */
  .door,
  .joinbox,
  .quotecard,
  .quotes.onebox,
  .way,
  .sysone,
  .flyer .quads > *{
    border-radius:1.125rem;
  }
  .door .shot{ border-radius:1.125rem 1.125rem 0 0; }

  /* panels breathe instead of touching the walls */
  .wrap{ padding-left:1.25rem; padding-right:1.25rem; }
  .quotes.onebox{ padding:1.375rem 1.125rem; }
  .joinbox{ padding:1.625rem 1.25rem; }

  /* type that does not shout */
  h1{ line-height:1.18; }
  h2{ line-height:1.2; }
  .pagehead{ font-size:clamp(1.625rem,7vw,2.125rem); }
  .lede{ font-size:1rem; }

  /* nothing may push the page sideways */
  html, body{ overflow-x:hidden; }
  img, svg{ max-width:100%; height:auto; }
}

@media(max-width:560px){
  body.home .hero{ min-height:56vh; }
  .herohead .l1{ font-size:1.25rem; }
  .herohead .l2{ font-size:1.75rem; }
}

/* ==========================================================================
   45. NO HARD LINE ACROSS THE TOP OF THE FOOTER
   Every border and every abrupt edge in the footer zone is removed, and the
   white fade at the top is made taller and softer so the picture melts into
   the page above it at any width.
   ========================================================================== */

.footzone,
.footzone .join,
.footzone .footer,
.footzone .smallprint{
  border-top:0;
  border-bottom:0;
  box-shadow:none;
}

.footzone:before{
  height:34%;
  background:linear-gradient(180deg,
    #FFFFFF               0%,
    rgba(255,255,255,.92) 22%,
    rgba(255,255,255,.62) 48%,
    rgba(255,255,255,.26) 74%,
    rgba(255,255,255,0)  100%);
}

@media(max-width:900px){
  .footzone:before{ height:42%; }
  .footzone .footer{ padding-top:1.625rem; }
  .footzone .join{ padding-top:2.125rem; }
}


/* ==========================================================================
   46. THE TOP BAR SITS INSIDE THE PICTURE ON EVERY INNER PAGE
   Program, Articles and every other inner page already open on the cloud.
   The bar was painting a white slab over it. It goes clear so the picture
   runs behind the menu, the way it does on About.
   ========================================================================== */

body.cloudtop .masthead,
body.reviews .masthead,
body.articles .masthead{
  background-color:transparent;
  background-image:none;
  border-bottom:0;
  box-shadow:none;
}

/* the four line breaks at the top of those pages were pushing the first
   words down into empty space */
body.cloudtop main > br,
body.reviews main > br,
body.articles main > br{ display:none; }

body.cloudtop .softsheet{ padding-top:0; }

/* ==========================================================================
   47. NO WHITE BOX BEHIND A PAGE TITLE
   .pagehead was given a white gradient panel and a border on line 342. The
   later rule only restyled the words inside it, so the panel stayed. On any
   page that opens on a picture, the panel and the border go.
   ========================================================================== */

.pagehead{
  background:transparent;
  background-image:none;
  border-bottom:0;
  padding:0;
}
body.reviews .pagehead,
body.articles .pagehead,
body.cloudtop .pagehead,
.pathbg .pagehead,
.plainbg .pagehead{
  background:transparent;
  background-image:none;
  border-bottom:0;
  box-shadow:none;
  padding:0;
}

/* ==========================================================================
   48. THE MENU LIVES INSIDE THE PICTURE AT EVERY SIZE
   Line 1022 was dropping the bar back out of the hero under 820, which put
   a white strip above the picture on phones. It stays inside the picture
   now, at every width, exactly as it does on a wide screen.
   ========================================================================== */

@media(max-width:820px){

  body.home .masthead{
    position:absolute;
    top:0; left:0; right:0;
    z-index:20;
    background-color:transparent;
    background-image:linear-gradient(180deg,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.28) 62%,
      rgba(255,255,255,0)  100%);
    border-bottom:0;
    padding:0.5rem 0;
  }

  /* the picture is tall enough to hold the menu and still show itself */
  body.home .hero{
    padding-top:0;
    min-height:72vh;
    background-size:cover;
    background-position:center 38%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  body.home .hero .wrap{ padding-top:0; }

  /* a tidy menu, not a stack of oversized parts */
  .masthead .wrap{
    flex-wrap:wrap;
    justify-content:center;
    gap:0.4rem;
    padding:0.4rem 1.1rem;
  }
  .masthead .lockup{ width:100%; display:flex; justify-content:center; }
  .masthead .lockup .logo{
    height:auto;
    width:52%;
    max-width:13rem;
  }
  .mainnav{ width:100%; margin-left:0; }
  .mainnav ul{ justify-content:center; gap:0.5rem 1rem; }
  .mainnav a{ font-size:0.92rem; white-space:nowrap; }
  .masthead .pill{ font-size:0.88rem; padding:0.5rem 1.1rem; margin:0.2rem auto 0; }
}

@media(max-width:560px){
  body.home .hero{ min-height:66vh; background-position:center 42%; }
  .masthead .lockup .logo{ width:58%; max-width:11rem; }
  .mainnav a{ font-size:0.88rem; }
  .mainnav ul{ gap:0.4rem 0.8rem; }
}

/* ==========================================================================
   49. THE HEART, AND THE SOFT EDGE ON THE HEADLINE PANEL
   A phone was drawing the heart as a red emoji instead of the gold glyph.
   The yellow panel behind the headline was a flat rectangle with four hard
   edges. It fades out on every side now.
   ========================================================================== */

.heart, .hrt{
  font-variant-emoji:text;
  -webkit-font-feature-settings:"liga" 0;
  color:var(--gold);
}

@media(min-width:821px){
  .hero .heroside{
    background:linear-gradient(105deg,
      rgba(250,204,21,0)   0%,
      rgba(250,204,21,.16) 14%,
      rgba(250,204,21,.30) 42%,
      rgba(250,204,21,.30) 74%,
      rgba(250,204,21,.10) 92%,
      rgba(250,204,21,0)  100%);
    padding:1.9rem 3.2rem 2rem 3.6rem;
    border-radius:0;
  }
}

/* ==========================================================================
   50. REVIEWS: A MASK OVER THE PATH, AND DARK TYPE
   The picture is veiled so it reads as a soft background instead of a photo
   competing with the words, and the title goes dark navy.
   ========================================================================== */

body.reviews{
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.58)  0%,
      rgba(255,255,255,.74) 38%,
      rgba(255,255,255,.86) 70%,
      rgba(255,255,255,.94) 100%),
    url('../images/path.jpg');
}

body.reviews .pagehead,
.pathbg .pagehead,
.pathbg .lede{
  color:#16386E;
  text-shadow:none;
}

/* ==========================================================================
   51. REVIEWS AND ARTICLES CARRY NO PICTURES
   The only two images on these pages are the logo in the top bar and the
   footer picture. No path, no cloud, no band behind the menu, no hero.
   ========================================================================== */

body.reviews,
body.articles{
  background-image:none;
  background-color:#FFFDF9;
}

body.reviews .masthead,
body.articles .masthead{
  background-image:none;
  background-color:transparent;
  border-bottom:0;
}

body.reviews .pathbg,
body.articles .plainbg{
  background-image:none;
  background-color:transparent;
}

/* the footer picture is the one that stays */
body.reviews .footzone,
body.articles .footzone{
  background-image:url('../images/FOOTER.jpg');
  background-color:transparent;
}
body.reviews .footzone:before,
body.articles .footzone:before{ display:none; }