: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;    /* TSR / 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 =====
   Their own dove, lifted straight out of the logo artwork rather than redrawn,
   so it IS the mark and not a lookalike. On load it leaves the logo, flies a
   lap of the hero and settles back into it. Once per load, never a loop. */
#dove{position:fixed;left:0;top:0;z-index:95;width:clamp(36px,4.4vw,64px);pointer-events:none;opacity:0;
  will-change:transform,opacity;filter:drop-shadow(0 10px 18px rgba(6,44,42,.45))}

/* ===== 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 TSR 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 TSR. 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} }