:root{
  /* ===== PALETTE: every hex sampled from THEIR logo (see Facts Sheet) ===== */
  --teal:#0B4F4B;        /* script tagline + dove outline  #114E4B / #045553 */
  --teal-2:#15635D;
  --teal-ink:#083A37;
  --sage:#9FD5BF;        /* dove body                      #9FD5BF */
  --sage-2:#BFE4D6;      /* dove body lower                #A4DBD5 */
  --amber:#FCB92E;       /* sun core                       #FCB92E */
  --orange:#FB8930;      /* sun mid                        #FB8930 */
  --orange-d:#FF6A0A;    /* Bright Haven / HOPE deep                #FF6409 */
  --cream:#F6F0E4;       /* logo ground                    #F0F0DC */
  --cream-2:#FDFAF3;
  --white:#FFFFFF;
  --ink-soft:rgba(8,58,55,.62);
  --line:rgba(11,79,75,.14);
  --shadow-lo:0 2px 10px rgba(8,58,55,.07);
  --shadow-md:0 18px 44px -14px rgba(8,58,55,.26);
  --shadow-hi:0 44px 90px -30px rgba(8,58,55,.44);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream-2);color:var(--teal-ink);font-family:"Inter",system-ui,sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.serif{font-family:"Fraunces",Georgia,serif}
.wrap{max-width:1200px;margin:0 auto;padding:0 36px}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:16px 36px;transition:background .3s,box-shadow .3s,padding .3s}
.nav.solid{background:rgba(253,250,243,.88);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line);padding:11px 36px}
/* over the dark hero the nav has no plate behind it, so it inverts until it solidifies */
body.darkhero .nav:not(.solid) .brand .bt b{color:var(--cream-2)}
body.darkhero .nav:not(.solid) .brand .bt span{color:var(--amber)}
body.darkhero .nav:not(.solid) .navlinks a:not(.cta){color:rgba(246,240,228,.88)}
body.darkhero .nav:not(.solid) .navlinks a:not(.cta):hover{color:#fff}
body.darkhero .nav:not(.solid) .navphone{color:var(--sage-2)!important}
body.darkhero .nav:not(.solid) .navlinks .cta{background:rgba(253,250,243,.14);border:1px solid rgba(253,250,243,.32);backdrop-filter:blur(8px)}
body.darkhero .nav:not(.solid) .navlinks .cta:hover{background:var(--orange-d);border-color:var(--orange-d)}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:46px;height:46px;border-radius:11px;object-fit:cover}
.brand .bt b{font-family:"Fraunces",serif;font-weight:900;font-size:16.5px;letter-spacing:-.01em;color:var(--teal);display:block;line-height:1.1}
.brand .bt span{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--orange-d);font-weight:800}
.navlinks{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600}
.navlinks a:not(.cta){color:var(--ink-soft)}
.navlinks a:not(.cta):hover{color:var(--teal)}
.navlinks .cta{background:var(--teal);color:var(--cream);padding:11px 20px;border-radius:100px;font-weight:700;font-size:13.5px;
  box-shadow:0 10px 22px -8px rgba(11,79,75,.6);transition:transform .18s,background .22s}
.navlinks .cta:hover{background:var(--orange-d);transform:translateY(-2px)}
.navphone{color:var(--teal)!important;font-weight:800}

/* ===== HERO ===== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:
    radial-gradient(70% 55% at 76% 42%, rgba(252,185,46,.20) 0%, rgba(252,185,46,0) 62%),
    radial-gradient(60% 50% at 18% 72%, rgba(159,213,191,.30) 0%, rgba(159,213,191,0) 64%),
    linear-gradient(170deg,#FFFDF8 0%,var(--cream) 58%,#F1E9DA 100%)}
/* ===== THE DOVE =====
   The hero's dove, drawn so its wings move (site.js builds it). On load it
   leaves the logo, circles twice just past it and settles back into it. Once
   per load, never a loop. Its size tracks the screen at every width: the
   same as before from 965px up, and it keeps shrinking below that instead
   of stopping at 36px (Mel, 10/24). */
#dove{position:fixed;left:0;top:0;z-index:95;width:min(64px,max(4.4vw,calc(15px + 2.85vw)));pointer-events:none;opacity:0;
  will-change:transform,opacity;filter:drop-shadow(0 10px 18px rgba(6,44,42,.45))}
#dove svg{display:block;width:100%;height:auto;overflow:visible}
#dove .nd-f{fill:url(#ndFeather);stroke:var(--teal);stroke-width:4;stroke-linejoin:round}
#dove .nd-ff{fill:url(#ndFar);stroke:var(--teal-ink);stroke-width:4;stroke-linejoin:round}
#dove .nd-body,#dove .nd-cov{fill:url(#ndBody);stroke:var(--teal);stroke-width:5;stroke-linejoin:round}
#dove .nd-beak{fill:var(--teal)}
#dove .nd-heart{fill:var(--orange-d)}

/* ===== HERO MONTAGE =====
   Five stock shots, every one of them hands and texture with no identifiable
   face, so nothing here can be mistaken for an actual Bright Haven client or caregiver.
   The cut is a deliberate timeline, never a fixed interval: 5.1s establishing
   hold, 2.3s and 2.9s quick, 3.7s medium, 5.8s hold on the payoff, with the
   dissolves between them varied too (.60 / .45 / .50 / .70). The tint is
   heaviest on the copy side and thinnest behind the dial, so the type always
   has ground under it and the footage still breathes. */
.hero-film{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--teal-ink)}
.hero-film video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.72) contrast(1.06) brightness(.94)}
/* Tint layers, topmost first. The warm and sage glows sit ABOVE the dark wash
   so they still read; the wash is graded left-heavy (the copy needs ground
   under it) and the vertical vignette holds the nav and the CTA row. */
.hero-tint{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(72% 58% at 78% 42%,rgba(252,185,46,.22) 0%,rgba(252,185,46,0) 62%),
    radial-gradient(58% 52% at 10% 80%,rgba(159,213,191,.17) 0%,rgba(159,213,191,0) 64%),
    linear-gradient(100deg,rgba(6,44,42,.90) 0%,rgba(6,44,42,.76) 32%,rgba(8,58,55,.50) 62%,rgba(11,79,75,.42) 100%),
    linear-gradient(to bottom,rgba(6,44,42,.42) 0%,rgba(6,44,42,0) 22%,rgba(6,44,42,0) 54%,rgba(6,44,42,.74) 88%,rgba(6,44,42,.92) 100%)}
.hero-grain{position:absolute;inset:-40%;pointer-events:none;opacity:.15;mix-blend-mode:soft-light;z-index:3;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.hero-inner{position:relative;z-index:5;width:100%;display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;
  max-width:1280px;margin:0 auto;padding:120px 36px 76px}

.hkick{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--sage-2);background:rgba(253,250,243,.10);border:1px solid rgba(253,250,243,.26);padding:8px 15px;border-radius:100px;
  margin-bottom:22px;backdrop-filter:blur(6px);opacity:0;animation:rise .8s .1s forwards}
.hkick i{width:7px;height:7px;border-radius:50%;background:var(--orange-d);display:block;animation:beat 2.2s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(255,106,10,.5)}70%{box-shadow:0 0 0 9px rgba(255,106,10,0)}100%{box-shadow:0 0 0 0 transparent}}

h1.hl{font-family:"Fraunces",serif;font-weight:900;letter-spacing:-.02em;line-height:1.07;
  font-size:clamp(28px,3.35vw,45px);color:var(--cream-2);max-width:15.5em;text-shadow:0 2px 30px rgba(6,44,42,.55)}
h1.hl .warm{background:linear-gradient(104deg,var(--orange-d) 0%,var(--orange) 46%,var(--amber) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
h1.hl > span{display:inline;opacity:0;animation:fadein .9s forwards}
h1.hl > span:nth-child(1){animation-delay:.18s}h1.hl > span:nth-child(2){animation-delay:.3s}
.hsub{margin-top:15px;font-size:clamp(16px,1.62vw,19.5px);line-height:1.4;color:var(--sage-2);font-weight:600;
  font-style:italic;max-width:25em;opacity:0;animation:rise .9s .4s forwards}
.hbody{margin-top:17px;max-width:35em;opacity:0;animation:rise .9s .5s forwards}
.hbody p{font-size:clamp(14px,1.09vw,15.3px);line-height:1.62;color:rgba(246,240,228,.86);font-weight:500}
.hbody p + p{margin-top:9px}
.hserving{margin-top:14px;font-size:12.5px;font-weight:800;letter-spacing:.015em;color:var(--sage);
  opacity:0;animation:rise .9s .58s forwards}
.hrow{margin-top:21px;display:flex;gap:13px;flex-wrap:wrap;align-items:center;opacity:0;animation:rise .9s .66s forwards}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:15px;padding:16px 28px;border-radius:100px;cursor:pointer;border:none;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .26s;will-change:transform;font-family:inherit}
.btn-warm{background:linear-gradient(118deg,var(--orange-d),var(--orange) 62%,var(--amber));color:#fff;
  box-shadow:0 16px 34px -10px rgba(255,106,10,.6)}
.btn-warm:hover{box-shadow:0 22px 48px -12px rgba(255,106,10,.72)}
.btn-ghost{background:rgba(253,250,243,.10);color:var(--cream-2);border:1.6px solid rgba(253,250,243,.34);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--sage-2);background:rgba(253,250,243,.18)}
.btn .chev{font-style:normal}
.htrust{margin-top:19px;display:flex;gap:10px;flex-wrap:wrap;opacity:0;animation:rise .9s .76s forwards}
.htrust span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--cream-2);
  background:rgba(253,250,243,.09);border:1px solid rgba(253,250,243,.20);padding:7px 13px;border-radius:100px;backdrop-filter:blur(6px)}
.htrust i{width:6px;height:6px;border-radius:50%;background:var(--sage);display:block}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* the dial turns; 90s is ~4deg/sec, slow enough that a tap still lands,
   and it pauses on pointerenter so dragging is never a moving target */
@keyframes turn{from{transform:rotateX(62deg) rotateZ(0deg)}to{transform:rotateX(62deg) rotateZ(360deg)}}
.ringwrap.spin{animation:turn 90s linear infinite}

/* ======================================================================
   SIGNATURE DEVICE — "THE DAY"
   A real 3D ring of 24 hours, tilted in perspective. Every hour starts
   solid teal: it's yours, and you're carrying all of them. Drag across
   the ring to hand hours to Bright Haven. Handed hours warm to the logo sunrise,
   lift out of the plane toward you, and leave a sage glow in the gap.
   The whole scene warms as the load comes off, and the number you build
   is the number that goes in the form.
   ====================================================================== */
.stage{position:relative;height:auto;display:flex;align-items:center;justify-content:center;padding-bottom:156px;
  perspective:1150px;perspective-origin:50% 42%;opacity:0;animation:rise 1.1s .3s forwards}
.ringwrap{position:relative;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(62deg);
  width:clamp(300px,29vw,400px);height:clamp(300px,29vw,400px);will-change:transform}

/* the plate the hours stand on, so the ring reads as one solid object */
.plate{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) rotateX(62deg);
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.88) 0%,rgba(248,243,232,.66) 34%,rgba(216,235,226,.36) 58%,rgba(159,213,191,.14) 78%,rgba(159,213,191,0) 100%);
  box-shadow:0 46px 92px -34px rgba(0,0,0,.72)}
.plate::after{content:"";position:absolute;inset:17%;border-radius:50%;border:1px dashed rgba(11,79,75,.13)}

.dialref{position:absolute;left:50%;top:100%;width:100%;height:100%;border-radius:50%;
  transform:translate(-50%,-50%);visibility:hidden;pointer-events:none}
.hr{position:absolute;left:50%;top:50%;width:30px;height:50%;margin-left:-15px;transform-origin:50% 100%;
  transform-style:preserve-3d}
.hr .cap{position:absolute;top:0;left:0;right:0;height:var(--caph,46px);border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,var(--teal-2),var(--teal));
  box-shadow:0 8px 16px -6px rgba(8,58,55,.66),inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .46s cubic-bezier(.2,1.35,.35,1),background .46s ease,box-shadow .46s ease,filter .2s;
  transform:translateZ(0)}
.hr .cap:hover{filter:brightness(1.22)}
.hr.given .cap{background:linear-gradient(180deg,var(--amber),var(--orange) 54%,var(--orange-d));
  transform:translateZ(46px);
  box-shadow:0 26px 34px -10px rgba(255,106,10,.55),inset 0 1px 0 rgba(255,255,255,.46)}
.hr .gap{position:absolute;top:0;left:-7px;right:-7px;height:var(--caph,46px);border-radius:10px;transform:translateZ(-6px);
  background:radial-gradient(ellipse at 50% 50%,rgba(159,213,191,.95),rgba(159,213,191,0) 70%);
  opacity:0;transition:opacity .55s ease;pointer-events:none}
.hr.given .gap{opacity:1}

/* ===== FLAT OVERLAY: never transformed, so it stays legible at every width ===== */
.readout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;text-align:center;pointer-events:none;white-space:nowrap}

.readout .rin{transform-origin:50% 50%}
.readout::before{content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:230px;height:150px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(253,250,243,.96) 0%,rgba(253,250,243,.72) 46%,rgba(253,250,243,0) 72%);z-index:-1}
.readout .n{font-family:"Fraunces",serif;font-weight:900;font-size:68px;line-height:.86;color:var(--teal);
  text-shadow:0 2px 16px rgba(253,250,243,.9)}
.readout .n.hot{background:linear-gradient(118deg,var(--orange-d),var(--orange) 55%,var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.readout .lab{margin-top:8px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--teal);opacity:.78}
.readout .of{margin-top:4px;font-size:11.5px;font-weight:700;color:var(--orange-d)}

.anchor{position:absolute;z-index:6;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:800;
  color:var(--sage-2);opacity:.72;pointer-events:none;white-space:nowrap}

.stagehint{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:7;display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);white-space:nowrap;
  background:rgba(255,255,255,.9);border:1px solid var(--line);padding:8px 16px;border-radius:100px;box-shadow:var(--shadow-md);
  transition:color .3s}
.stagehint i{width:7px;height:7px;border-radius:50%;background:var(--orange-d);display:block;animation:beat 2.2s infinite;flex:none}
.stagecap{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:6;text-align:center;white-space:nowrap}
.stagecap b{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--sage)}
.stagecap span{font-size:12.5px;color:rgba(246,240,228,.82);font-weight:600}
.resetlink{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:7;font-size:11px;font-weight:700;
  color:var(--sage-2);text-decoration:underline;cursor:pointer;opacity:0;transition:opacity .3s}
.resetlink.on{opacity:1}

@media (max-width:980px){
  /* single centred column: the copy now spans the full width, so the wash has
     to be even rather than graded left-heavy, or the type sits over the thin
     side of the tint on a bright frame */
  .hero-tint{background:
    radial-gradient(76% 42% at 50% 28%,rgba(252,185,46,.17) 0%,rgba(252,185,46,0) 68%),
    linear-gradient(180deg,rgba(6,44,42,.90) 0%,rgba(6,44,42,.80) 44%,rgba(6,44,42,.84) 76%,rgba(6,44,42,.92) 100%)}
  .hero-inner{grid-template-columns:1fr;gap:0;padding:96px 30px 56px;text-align:center}
  .hkick,.hrow,.htrust{justify-content:center}
  .hsub,.hbody{margin-left:auto;margin-right:auto}
  .stage{height:auto;min-height:0;order:2;margin-top:18px;padding-bottom:150px}
  .navlinks a:not(.cta):not(.navphone){display:none}
  .wrap{padding:0 24px}
  h1.hl > span{display:block;animation:rise .9s forwards}
  .anchor{display:none}   /* measured: 12 AM overlaps the counter below 980 */
  h1.hl{font-size:clamp(26px,5.6vw,38px);max-width:none}
  .hsub{font-size:17px;margin-top:13px}
  .hrow{margin-top:22px}
  .htrust{margin-top:18px}
}
@media (max-width:620px){
  /* keep the brand on ONE line next to the CTA */
  .nav{padding:11px 18px}
  .nav.solid{padding:9px 18px}
  .brand img{width:38px;height:38px;border-radius:9px}
  .brand .bt b{font-size:14.5px;white-space:nowrap}
  .brand .bt span{display:none}
  .navlinks{gap:0}
  .navlinks .navphone{display:none}
  .navlinks .cta{padding:10px 16px;font-size:12.5px;white-space:nowrap}
  .hero-inner{padding:84px 20px 48px}
  .stage{height:auto;min-height:0;padding-bottom:158px;margin-top:6px}
  .ringwrap{width:min(70vw,268px);height:min(70vw,268px)}
  .hr{width:26px;margin-left:-13px}
  
.readout .rin{transform-origin:50% 50%}
.readout::before{width:180px;height:120px}
  .stagehint{font-size:10px;padding:7px 13px;letter-spacing:.06em}
  .stagecap b{font-size:9.5px}
  .stagecap span{font-size:11.5px}
  .htrust span{font-size:11.5px;padding:6px 11px}
  /* both CTAs share one line on phones: equal halves, chevron dropped to buy room */
  .hrow{flex-wrap:nowrap;gap:10px;width:100%}
  .hrow .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;white-space:nowrap;
    padding:15px 8px;font-size:13px;letter-spacing:0}
  .btn .chev{display:none}
}

/* ===== THE SIX SECTIONS ===== */
.sec{padding:clamp(72px,8vw,118px) 0;position:relative}
.sec-alt{background:linear-gradient(180deg,rgba(159,213,191,.10),rgba(159,213,191,.03))}
.kick{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--teal);background:rgba(255,255,255,.8);border:1px solid var(--line);padding:7px 15px;border-radius:100px;margin-bottom:20px}
.kick i{width:7px;height:7px;border-radius:50%;background:var(--orange-d);display:block;flex:none}
h2.big{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(27px,3.3vw,42px);line-height:1.1;letter-spacing:-.02em;
  color:var(--teal-ink);max-width:17em}
h2.big .warm{background:linear-gradient(104deg,var(--orange-d) 0%,var(--orange) 46%,var(--amber) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin-top:16px;font-size:clamp(15.5px,1.2vw,17px);line-height:1.65;color:var(--ink-soft);max-width:38em}
.lead b{color:var(--teal);font-weight:700}

.grid{display:grid;gap:16px;margin-top:38px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:rgba(255,255,255,.84);border:1px solid var(--line);border-radius:20px;padding:26px 24px;
  box-shadow:0 2px 14px rgba(8,58,55,.05);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px -18px rgba(8,58,55,.3)}
.card h3{font-family:"Fraunces",serif;font-weight:900;font-size:19px;color:var(--teal-ink);letter-spacing:-.01em}
.card p{margin-top:9px;font-size:14.6px;line-height:1.6;color:var(--ink-soft)}
.card .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:15px;
  background:linear-gradient(145deg,rgba(159,213,191,.5),rgba(252,185,46,.22));color:var(--teal)}
.card .ic svg{display:block}

/* how care begins: a real numbered path */
/* the old 4-across step grid is superseded by the numbered .steps list below */

.note{margin-top:26px;display:flex;gap:13px;align-items:flex-start;background:rgba(159,213,191,.17);
  border:1px solid rgba(11,79,75,.14);border-radius:16px;padding:18px 20px;max-width:47em}
.note svg{flex:none;margin-top:2px}
.note p{font-size:14.4px;line-height:1.6;color:var(--teal-ink)}

/* trust */
.facts{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-top:34px}
.fact{background:rgba(255,255,255,.84);border:1px solid var(--line);border-radius:18px;padding:22px}
.fact b{display:block;font-family:"Fraunces",serif;font-weight:900;font-size:clamp(19px,2vw,24px);color:var(--teal);line-height:1.15}
.fact span{display:block;margin-top:7px;font-size:13.4px;line-height:1.5;color:var(--ink-soft)}

/* faq */
.faq{margin-top:34px;max-width:50em}
.q{border-bottom:1px solid var(--line)}
.q summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;font-weight:700;font-size:16px;color:var(--teal-ink)}
.q summary::-webkit-details-marker{display:none}
.q summary:after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:21px;font-weight:400;color:var(--orange-d);transition:transform .25s}
.q[open] summary:after{transform:translateY(-50%) rotate(45deg)}
.q p{padding:0 0 20px;font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:44em}

/* inquiry */
.inq{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start;margin-top:36px}
.form{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow-md)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{margin-top:15px}
.f label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--teal);margin-bottom:7px}
.f input,.f select,.f textarea{width:100%;font-family:inherit;font-size:15px;color:var(--teal-ink);background:#fff;
  border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;transition:border-color .2s,box-shadow .2s}
.f textarea{min-height:104px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(251,137,48,.14)}
.f .hint{margin-top:7px;font-size:12.4px;color:var(--ink-soft)}
.contact{display:grid;gap:12px}
.cl{display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.84);border:1px solid var(--line);
  border-radius:16px;padding:17px 18px}
.cl b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:800}
.cl a,.cl span{display:block;margin-top:3px;font-size:16px;font-weight:700;color:var(--teal);word-break:break-word}
.cl svg{flex:none;margin-top:3px}

/* footer */
.ft{background:var(--teal-ink);color:rgba(246,240,228,.82);padding:52px 0 34px;margin-top:0}
.ft a{color:rgba(246,240,228,.82)}
.ft a:hover{color:var(--amber)}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.ft h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);font-weight:800;margin-bottom:14px}
.ft p,.ft li{font-size:14.4px;line-height:1.7}
.ft ul{list-style:none}
.ft .brandline{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ft .brandline img{width:46px;height:46px;border-radius:11px}
.ft .brandline b{font-family:"Fraunces",serif;font-weight:900;font-size:17px;color:var(--cream);display:block}
.ft .brandline span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);font-weight:800}
.ft-bot{margin-top:34px;padding-top:20px;border-top:1px solid rgba(246,240,228,.16);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(246,240,228,.6)}

@media (max-width:980px){
  .g3,.facts{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .inq{grid-template-columns:1fr;gap:26px}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .g2,.g3,.facts,.steps,.row2{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr}
  .card,.step,.fact{padding:21px 18px}
  .form{padding:22px 18px}
  .ft-bot{flex-direction:column;gap:8px}
}


/* ===== RHYTHM: each section changes gear ===== */

/* 2. full-bleed dark band: the page changes ground at the midpoint */
.band{background:
   radial-gradient(70% 90% at 15% 10%, rgba(159,213,191,.16), transparent 60%),
   radial-gradient(60% 80% at 88% 90%, rgba(252,185,46,.14), transparent 62%),
   linear-gradient(165deg,#0E5751 0%,var(--teal-ink) 62%,#06302E 100%);
  color:var(--cream);position:relative;overflow:hidden}
.band:before{content:"";position:absolute;inset:-40%;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.band .kick{color:var(--sage);background:rgba(255,255,255,.07);border-color:rgba(159,213,191,.3)}
.band h2.big{color:var(--cream)}
.band .lead{color:rgba(246,240,228,.74)}

/* the six supports as a big numbered list, not six identical boxes */
.slist{margin-top:44px;border-top:1px solid rgba(246,240,228,.16)}
.srow{display:grid;grid-template-columns:62px 1fr 1.15fr;gap:22px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid rgba(246,240,228,.16);position:relative;transition:background .3s}
.srow:hover{background:rgba(246,240,228,.045)}
.srow .n{font-family:"Fraunces",serif;font-weight:900;font-size:15px;color:var(--amber);letter-spacing:.08em}
.srow h3{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(21px,2.5vw,31px);line-height:1.1;color:var(--cream);letter-spacing:-.015em}
.srow p{font-size:15px;line-height:1.6;color:rgba(246,240,228,.72)}
.srow .bar{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:linear-gradient(90deg,var(--amber),var(--orange-d));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.srow:hover .bar{width:100%}

/* 3. respite: asymmetric, oversized statement, no card grid at all */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,66px);align-items:center;margin-top:10px}
.state{font-family:"Fraunces",serif;font-weight:900;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(34px,6.2vw,76px);color:var(--teal-ink)}
.state em{font-style:normal;background:linear-gradient(104deg,var(--orange-d),var(--orange) 50%,var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rlist{display:grid;gap:4px;margin-top:4px}
.rrow{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;padding:17px 0;border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:0}
.rrow .t{font-family:"Fraunces",serif;font-weight:900;font-size:13px;color:var(--orange-d)}
.rrow b{display:block;font-size:16px;color:var(--teal-ink);font-weight:800}
.rrow span{display:block;margin-top:5px;font-size:14.6px;line-height:1.6;color:var(--ink-soft)}

/* 4. how care begins: a path that draws itself as you scroll */
.path{position:relative;margin-top:46px}
.track{position:absolute;left:0;right:0;top:19px;height:2px;background:var(--line);border-radius:2px}
.track i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--orange-d),var(--amber));border-radius:2px;transition:width .25s linear}
.psteps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.pstep .dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--cream-2);
  border:2px solid var(--line);font-family:"Fraunces",serif;font-weight:900;font-size:15px;color:var(--ink-soft);
  transition:transform .4s cubic-bezier(.2,1.4,.4,1),background .4s,border-color .4s,color .4s,box-shadow .4s}
.pstep.on .dot{background:linear-gradient(145deg,var(--orange-d),var(--amber));border-color:transparent;color:#fff;
  transform:scale(1.1);box-shadow:0 10px 24px -8px rgba(255,106,10,.65)}
.pstep h3{margin-top:18px;font-family:"Fraunces",serif;font-weight:900;font-size:18px;color:var(--teal-ink);
  opacity:.45;transition:opacity .4s}
.pstep p{margin-top:8px;font-size:14.4px;line-height:1.6;color:var(--ink-soft);opacity:.45;transition:opacity .4s}
.pstep.on h3,.pstep.on p{opacity:1}

/* 5. trust: display-scale facts, not six small boxes */
.bigfacts{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.bf{padding:30px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.bf b{display:block;font-family:"Fraunces",serif;font-weight:900;letter-spacing:-.025em;line-height:1;
  font-size:clamp(25px,3.4vw,40px);color:var(--teal)}
.bf span{display:block;margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink-soft);max-width:22em}
.bf:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--orange-d),var(--amber));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bf:hover:after{transform:scaleX(1)}

@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:26px}
  .psteps{grid-template-columns:repeat(2,1fr);gap:26px}
  .track{display:none}
  .bigfacts{grid-template-columns:repeat(2,1fr)}
  .srow{grid-template-columns:40px 1fr;gap:14px}
  .srow p{grid-column:2}
}
@media (max-width:620px){
  .psteps{grid-template-columns:1fr;gap:22px}
  .bigfacts{grid-template-columns:1fr}
  .bf{padding:24px 20px}
  .srow{padding:20px 0}
}


/* scroll reveal. Gated on .js so that if the script never runs the content is
   simply visible rather than stuck at opacity 0. */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .slist .reveal{transform:translateY(14px)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
  h1.hl > span,.hkick,.hrow,.htrust,.stage{opacity:1}
  .ringwrap.spin{animation:none}
}

/* ======================================================================
   MULTI-PAGE CHROME
   The one-pager hid its nav links below 980px because it only had four and
   they all pointed at anchors on the same screen. The deck's nav has seven
   real destinations, so hiding them would strand a phone visitor.
   ====================================================================== */
.navlinks a.on{color:var(--teal);font-weight:800}
body.darkhero .nav:not(.solid) .navlinks a.on{color:#fff}
.navtoggle{display:none;width:42px;height:42px;border:1px solid var(--line);background:rgba(253,250,243,.9);
  border-radius:12px;cursor:pointer;align-items:center;justify-content:center;flex:none}
body.darkhero .nav:not(.solid) .navtoggle{background:rgba(253,250,243,.14);border-color:rgba(253,250,243,.34)}
.navtoggle span{display:block;width:17px;height:2px;background:var(--teal);border-radius:2px;position:relative;transition:.22s}
body.darkhero .nav:not(.solid) .navtoggle span{background:var(--cream-2)}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:17px;height:2px;
  background:inherit;border-radius:2px;transition:.22s}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}
.navtoggle[aria-expanded="true"] span{background:transparent}
.navtoggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1080px){
  .navtoggle{display:flex}
  .navlinks{position:fixed;inset:0 0 auto 0;top:0;padding:86px 22px 26px;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--cream-2);box-shadow:var(--shadow-hi);transform:translateY(-102%);transition:transform .34s cubic-bezier(.2,.8,.2,1);
    max-height:100svh;overflow:auto}
  .navlinks.open{transform:none}
  .navlinks a:not(.cta){padding:15px 6px;border-bottom:1px solid var(--line);font-size:16px;color:var(--teal-ink)!important}
  .navlinks .cta{margin-top:16px;text-align:center;padding:15px 20px;font-size:15px}
  .navlinks .cta.ghost{background:transparent;color:var(--teal)!important;border:1.6px solid var(--line);box-shadow:none}
  body.darkhero .nav:not(.solid) .navlinks a:not(.cta){color:var(--teal-ink)!important}
  body.darkhero .nav:not(.solid) .navlinks .cta{background:var(--teal);border-color:var(--teal)}
}

/* ---- interior page header (every page that is not Home) ---- */
.phead{position:relative;padding:150px 0 54px;background:
  radial-gradient(60% 70% at 86% 10%,rgba(252,185,46,.16) 0%,rgba(252,185,46,0) 62%),
  radial-gradient(56% 60% at 6% 86%,rgba(159,213,191,.26) 0%,rgba(159,213,191,0) 64%),
  linear-gradient(168deg,#FFFDF8 0%,var(--cream) 70%,#F1E9DA 100%);
  border-bottom:1px solid var(--line);overflow:hidden}
.phead h1{font-family:"Fraunces",serif;font-weight:900;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(30px,4.4vw,56px);color:var(--teal-ink);max-width:16em}
.phead .lead{margin-top:18px;max-width:46em}
.crumb{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--orange-d);margin-bottom:16px}

/* ---- legal / long-form prose ---- */
.prose{max-width:50em}
.prose h2{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(20px,2.3vw,28px);color:var(--teal-ink);
  margin:40px 0 12px;letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:14px;color:var(--ink-soft);font-size:16px;line-height:1.72}
.prose p b,.prose p strong{color:var(--teal-ink)}
.prose ul{margin:0 0 16px 20px}
.prose li{margin-bottom:8px;color:var(--ink-soft);line-height:1.68}
.prose a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---- numbered step list, used by Getting Started and Careers ---- */
.steps{counter-reset:s;display:grid;gap:14px;margin-top:30px}
.step{counter-increment:s;position:relative;background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:24px 26px 24px 76px;box-shadow:var(--shadow-lo)}
.step::before{content:counter(s);position:absolute;left:24px;top:22px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-family:"Fraunces",serif;font-weight:900;font-size:15px;
  background:linear-gradient(140deg,var(--teal-2),var(--teal));color:var(--cream-2)}
.step h3{font-family:"Fraunces",serif;font-weight:900;font-size:18px;color:var(--teal-ink);margin-bottom:5px}
.step p{color:var(--ink-soft);font-size:15px;line-height:1.65}

/* ---- the plan strip: THE AGREED PLAN ---- */
.plan{position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(102%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
  background:rgba(8,58,55,.97);backdrop-filter:blur(14px);color:var(--cream-2);box-shadow:0 -18px 50px -20px rgba(0,0,0,.6)}
.plan.up{transform:none}
.plan-in{max-width:1200px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.plan-t{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--sage);flex:none}
.plan-items{display:flex;gap:7px;flex-wrap:wrap;flex:1 1 320px;min-width:0}
.plan-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:100px;
  background:rgba(253,250,243,.12);border:1px solid rgba(253,250,243,.2)}
.plan-chip.open{background:transparent;border-style:dashed;color:var(--sage-2)}
.plan-chip b{font-weight:800}
.plan-go{flex:none;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(118deg,var(--orange-d),var(--orange) 62%,var(--amber));
  color:#fff;font-weight:800;font-size:14px;padding:12px 22px;border-radius:100px;border:none;cursor:pointer;font-family:inherit}
.plan-x{flex:none;background:none;border:none;color:rgba(246,240,228,.6);cursor:pointer;font-size:19px;line-height:1;padding:6px;font-family:inherit}
.plan-x:hover{color:#fff}
@media (max-width:620px){
  .plan-in{padding:11px 16px;gap:10px}
  .plan-t{width:100%}
  .plan-go{width:100%;justify-content:center}
}
/* a picker row: the visitor's own hand builds the plan */
.pick{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--white);border:1.6px solid var(--line);border-radius:16px;padding:18px 20px;transition:.2s;box-shadow:var(--shadow-lo)}
.pick:hover{border-color:var(--sage)}
.pick[aria-pressed="true"]{border-color:var(--teal);background:linear-gradient(160deg,#fff,#F3FAF6)}
.pick .box{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;
  margin-top:2px;transition:.2s}
.pick[aria-pressed="true"] .box{background:var(--teal);border-color:var(--teal)}
.pick .box svg{opacity:0;transition:.2s}
.pick[aria-pressed="true"] .box svg{opacity:1}
.pick b{display:block;font-family:"Fraunces",serif;font-size:17px;color:var(--teal-ink);margin-bottom:4px}
.pick span{display:block;color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:13px;margin-top:30px}

/* ---- form furniture the deck's two forms need ---- */
.fnote{margin-top:14px;font-size:13.4px;color:var(--ink-soft)}
.formmsg{margin-top:16px;font-size:14.6px;font-weight:700;line-height:1.6;color:var(--teal)}
.formmsg.bad{color:#C0341A}
.f .err{display:block;margin-top:6px;font-size:13px;font-weight:700;color:#C0341A}
.f input.invalid,.f select.invalid,.f textarea.invalid{border-color:#C0341A}
.ft .brandline span span{display:block}
@media (max-width:900px){ .ft-top{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .ft-top{grid-template-columns:1fr} }

/* ======================================================================
   THE DARK BAND INVERTS EVERYTHING INSIDE IT
   Measured 2026-10-18 across all nine band sections: 28 real elements were
   rendering dark ink on the dark band at contrast 1.0, invisible. The FAQ
   answers, the CLTS and Careers step headings, the About pull-quote, and the
   whole Client Rights block including "For an immediate emergency, call 911."
   The band only ever recoloured .kick and h2.big, so every other component
   kept the colour it was given for a light ground. This inverts the band as
   a rule, so any component dropped into one from now on is readable.
   ====================================================================== */
.band p,.band li,.band .lead{color:rgba(246,240,228,.84)}
.band h3,.band b,.band strong,.band p.state,.band .prose h2{color:var(--cream-2)}
.band p.state em{color:var(--sage-2)}
.band a:not(.btn):not(.cta){color:var(--sage-2);text-decoration-color:rgba(159,213,191,.5)}
.band a:not(.btn):not(.cta):hover{color:#fff}
.band .q{border-bottom-color:rgba(246,240,228,.2)}
.band .q summary{color:var(--cream-2)}
.band .q p{color:rgba(246,240,228,.82)}
.band .step{background:rgba(253,250,243,.07);border-color:rgba(253,250,243,.16);box-shadow:none}
.band .step p{color:rgba(246,240,228,.82)}
.band .card{background:rgba(253,250,243,.07);border-color:rgba(253,250,243,.16)}
.band .card h3{color:var(--cream-2)}
.band .card p{color:rgba(246,240,228,.82)}
.band .note{background:rgba(253,250,243,.09);border-color:rgba(253,250,243,.2)}
.band .note p{color:rgba(246,240,228,.92)}
.band .note svg{stroke:var(--sage-2)}
/* .prose p b is (0,1,2) and beat .band b at (0,1,1). This is the 911 line on
   the rights page, so it gets a selector that actually wins. */
.band .prose p b,.band .prose p strong{color:var(--cream-2)}

/* ======================================================================
   SIGNATURE: THE DOVE (it replaced THE DAY ring, Mel 10/24; home.js drives it)
   The stage gives up the room the ring's caption and hint needed, and the
   dove gets a fixed-height scene under the hero copy.
   ====================================================================== */
.stage.dove{padding-bottom:0;perspective:none}
.dv-stage{position:relative;width:min(100%,440px);height:clamp(330px,34vw,440px);margin:0 auto}
@media (max-width:980px){.dv-stage{height:350px;width:min(100%,420px)}.stage.dove{margin-top:24px}}
@media (max-width:620px){.dv-stage{height:318px}}
/* the service the lit feather stands for (matches the site's other pills) */
.dv-pill{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:9px;
  white-space:nowrap;padding:9px 16px;border-radius:100px;background:rgba(253,250,243,.92);color:var(--teal);
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 14px 30px -12px rgba(4,30,28,.55)}
.dv-pill i{width:7px;height:7px;border-radius:50%;background:var(--orange-d);display:block;animation:beat 2.2s infinite;flex:none}
.dv-pill svg{width:15px;height:15px;flex:none}
@media (max-width:620px){.dv-pill{font-size:10.5px;padding:8px 13px}}
/* Request Services answers when the dove brings it a service */
.dv-pulse{animation:dvPulse 1.6s ease-out 1}
@keyframes dvPulse{0%{box-shadow:0 0 0 0 rgba(252,185,46,.85)}70%{box-shadow:0 0 0 22px rgba(252,185,46,0)}100%{box-shadow:0 0 0 0 rgba(252,185,46,0)}}

.dv{position:absolute;inset:0}
.dv-glow{position:absolute;left:50%;bottom:10%;width:120%;height:70%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 70%,rgba(252,185,46,.30),rgba(255,106,10,.10) 45%,rgba(255,106,10,0) 72%)}
.dv-sun{position:absolute;left:50%;bottom:17%;width:44%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translate(-50%,46%);
  background:radial-gradient(circle at 50% 44%,#FFF0C2 0%,#FFD978 16%,var(--amber) 34%,var(--orange) 62%,rgba(255,106,10,.85) 76%,rgba(255,106,10,0) 79%);
  -webkit-mask:linear-gradient(180deg,#000 50%,rgba(0,0,0,.35) 56%,transparent 62%);mask:linear-gradient(180deg,#000 50%,rgba(0,0,0,.35) 56%,transparent 62%);
  filter:blur(.4px) drop-shadow(0 0 34px rgba(252,185,46,.55));animation:dvRise 16s ease-in-out infinite alternate}
@keyframes dvRise{from{transform:translate(-50%,52%)}to{transform:translate(-50%,40%)}}
.dv-horizon{position:absolute;left:4%;right:4%;bottom:16.5%;height:30px;pointer-events:none;overflow:visible}
.dv-horizon path{fill:none;stroke:url(#dvLine);stroke-width:2.4;stroke-linecap:round}
.dv-bird{position:absolute;left:0;top:0;width:clamp(178px,50%,236px);transform-style:preserve-3d;will-change:transform;
  cursor:pointer;outline:none;filter:drop-shadow(0 20px 22px rgba(3,28,26,.38))}
.dv-bird:focus-visible{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px var(--amber))}
.dv-bird svg{display:block;width:100%;height:auto;overflow:visible;backface-visibility:visible}
.dv-f{fill:url(#dvFeather);stroke:var(--teal);stroke-width:2.1;stroke-linejoin:round;transition:fill .5s}
.dv-f.lit{fill:url(#dvLit)}
.dv-ff{fill:url(#dvFar);stroke:var(--teal-ink);stroke-width:2;stroke-linejoin:round}
.dv-body{fill:url(#dvBody);stroke:var(--teal);stroke-width:2.4;stroke-linejoin:round}
.dv-cov{fill:url(#dvBody);stroke:var(--teal);stroke-width:2.1}
.dv-beak{fill:var(--teal)}
.dv-heart{fill:var(--orange-d)}

/* ---- square-corner buttons on every page (Mel, 10/23: "Square corners") ---- */
.btn,.navlinks .cta{border-radius:3px}

/* ---- bubbles under the buttons: never wider than the buttons; one line on phones (Mel, 10/23) ---- */
.htrust{gap:6px}
.htrust span{font-size:10px;padding:5px 9px;gap:5px}
.htrust i{width:4px;height:4px}
@media (max-width:620px){
  .htrust{gap:5px}
  .htrust span{font-size:clamp(8.5px,2.65vw,10.5px);padding:5px 6px;gap:5px}
  .htrust i{width:4px;height:4px}
}
@media (min-width:340px) and (max-width:620px){.htrust{flex-wrap:nowrap}.htrust span{white-space:nowrap}}

/* ---- hero type + CTAs, bigger at every width (Mel, 10/23: "why is that stuff so small") ---- */
.hero-inner{grid-template-columns:1.22fr .78fr}
.hkick{font-size:12.5px;padding:9px 17px}
h1.hl{font-size:clamp(40px,4.3vw,62px)}
.hsub{font-size:clamp(19px,1.85vw,25px)}
.hbody p{font-size:clamp(16px,1.3vw,18.5px)}
.hrow .btn{font-size:17px;padding:19px 34px}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  h1.hl{font-size:clamp(34px,6.6vw,56px)}
  .hsub{font-size:21px}
  .hbody p{font-size:16.5px}
}
@media (max-width:620px){
  .hkick{font-size:11.5px;padding:8px 15px}
  /* as big as the screen allows while "Compassionate Support" stays one line
     (it measures 11.77x its font size; 12.15 leaves room), and it meets the
     tablet size at 620px instead of jumping */
  h1.hl{font-size:min(41px,calc((100vw - 40px) / 12.15))}
  .hsub{font-size:18.5px}
  .hbody p{font-size:16px}
  .hrow .btn{font-size:14.5px;padding:16px 8px}
}