/* Hand-drawn look for the static org pages.

   Loaded last, after brand-fonts.css and color-palette.css, so it wins on
   order rather than by piling on !important. The rules of the look:
   one ink colour does every outline, shadows are hard offsets with no blur,
   corners are slightly uneven, fills are flat, and there are no gradients.

   The hero's 3D umbrella and meadow are drawn on canvas by org.html's own
   script. Nothing here touches them; the hero just gets framed like a card. */

:root,
:root:not([data-theme="light"]),
:root[data-theme="light"],
:root[data-theme="dark"]{
  --hd-ink:#3b2a54;
  --hd-ink-2:#5b4776;
  --hd-violet:#5e3d96;
  --hd-paper:#fbf7ff;
  --hd-lav:#ede3fb;
  --hd-white:#ffffff;
  --hd-yellow:#ffc94d;
  --hd-cream:#fff0c9;
  --hd-mint:#cdefd8;
  --hd-pink:#f49ac1;
  --hd-sky:#e3f1fc;
  --hd-night:#241533;
  --hd-day:#f6effd;
  --hd-lilac:#c49aea;
  --hd-dash:rgba(59,42,84,.32);

  --hd-r:20px 15px 22px 16px;
  --hd-r-sm:12px 9px 13px 10px;
  --hd-shadow:5px 6px 0 var(--hd-ink);
  --hd-shadow-sm:3px 3px 0 var(--hd-ink);

  --serif:"Shantell Sans","Comic Neue",system-ui,sans-serif;
  --sans:"Nunito","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat","Shantell Sans",cursive;

  /* color-palette.css swaps these to dark values under a dark OS theme.
     This page is paper either way. */
  --paper:var(--hd-paper);
  --surface:var(--hd-white);
  --surface-2:var(--hd-lav);
  --ink:var(--hd-ink);
  --ink-2:var(--hd-ink-2);
  --ink-3:var(--hd-violet);
  --forest:var(--hd-violet);
  --forest-deep:var(--hd-ink);
  --amber:var(--hd-yellow);
  --amber-soft:var(--hd-cream);
  --on-accent:var(--hd-ink);
  --line:var(--hd-ink);
  --line-2:var(--hd-dash);
  --shadow:var(--hd-shadow);
  --interactive-glow:var(--hd-shadow-sm);
}

body{background:var(--hd-lav);color:var(--hd-ink);font-family:var(--sans)}
h1,h2,h3{font-weight:800;letter-spacing:-.01em}
:focus-visible{outline:3px dashed var(--hd-ink);outline-offset:4px}

/* ---------- flat sections, torn-paper dashes between them ---------- */
.visual-section::before,.visual-section::after{content:none;display:none}
.sec-head h2,.about-intro h2,.havensec h2{text-shadow:none}
.about,.havensec,.goals,.chapters{background:var(--hd-lav)}
.about,.havensec,.goals,.chapters{border-top:2.5px dashed var(--hd-dash)}

.eyebrow{font-family:var(--hand);font-size:1.5rem;font-weight:700;line-height:1;
  letter-spacing:0;text-transform:none;color:var(--hd-violet)}
.eyebrow::before{content:none}

/* ---------- nav: ink on paper, since the hero no longer sits under it ---------- */
header.nav{background:transparent;border-bottom:0}
header.nav.scrolled{background:var(--hd-lav);border-bottom:2.5px solid var(--hd-ink);box-shadow:none}
.nav .brand,.nav.scrolled .brand{color:var(--hd-ink);font-family:var(--serif);font-weight:800}
.brand .mark{box-shadow:0 0 0 2.5px var(--hd-ink)}
.nav nav a,.nav.scrolled nav a{color:var(--hd-ink-2);font-weight:700}
.nav nav a:not(.btn):hover,.nav nav a:not(.btn):focus-visible{color:var(--hd-ink);box-shadow:none;
  text-decoration:underline wavy var(--hd-yellow) 2px;text-underline-offset:6px}

.lang-select,.nav.scrolled .lang-select{background:var(--hd-white);color:var(--hd-ink);
  border:2px solid var(--hd-ink);border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}
.static-language-trigger,.nav:not(.scrolled) .static-language-trigger{background:var(--hd-white);color:var(--hd-ink);
  border:2px solid var(--hd-ink);border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}
.static-language-menu{border:2.5px solid var(--hd-ink);border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow)}

/* ---------- buttons ---------- */
.btn{font-family:var(--serif);font-weight:800;color:var(--hd-ink);background:var(--hd-white);
  border:2.5px solid var(--hd-ink);border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm);
  transition:translate .12s ease,box-shadow .12s ease,background-color .12s ease}
.btn:hover,.btn:focus-visible{box-shadow:5px 5px 0 var(--hd-ink);translate:-1px -1px}
.btn:active{box-shadow:0 0 0 var(--hd-ink);translate:3px 3px}
.btn.big{border-radius:var(--hd-r)}
.btn.primary,.btn.light{background:var(--hd-yellow);color:var(--hd-ink)}
.btn.ghost{background:var(--hd-white);color:var(--hd-ink);border-color:var(--hd-ink)}
.btn.ghost:hover{background:var(--hd-cream)}

/* ---------- hero: the umbrella scene, framed like a card on the page ----------
   A pale lilac a step lighter than the page, so it stays in the same purple
   family as the umbrella and the lavender around it, and still reads as a card. */
.hero{
  margin:84px clamp(10px,2.4vw,28px) 0;
  min-height:calc(var(--site-viewport-height,100svh) - 112px);
  background:var(--hd-day);color:var(--hd-ink);
  border:3px solid var(--hd-ink);border-radius:40px 30px 42px 32px;
  box-shadow:8px 10px 0 var(--hd-ink);
}
.hero::after{content:none}
.haven-title{color:var(--hd-ink);font-weight:800}
.hero .lede{color:var(--hd-ink-2)}
.splash{font-family:var(--hand)!important;font-style:normal;font-weight:700;color:var(--hd-violet);
  text-shadow:none;font-size:clamp(1.2rem,2vw,1.6rem)}
.scroll-cue{font-family:var(--hand);font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--hd-ink-2)}

/* the rain over the paper sections read as scratches, so it stays inside the hero */
#rainall{display:none}

.hero-keys li{color:var(--hd-ink);font-weight:800;border:2px solid var(--hd-ink);
  border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}
.hero-keys li:nth-child(4n+1){background:var(--hd-yellow);rotate:-1.5deg}
.hero-keys li:nth-child(4n+2){background:var(--hd-mint);rotate:1deg}
.hero-keys li:nth-child(4n+3){background:var(--hd-pink);rotate:-.6deg}
.hero-keys li:nth-child(4n+4){background:var(--hd-white);rotate:1.4deg}

.hero .btn.ghost{background:var(--hd-white)!important;color:var(--hd-ink)!important;border-color:var(--hd-ink)!important}
.hero .btn.ghost:hover{background:var(--hd-cream)!important}

/* ---------- cards ----------
   The real border goes transparent and an ::after draws it instead, run
   through the #squiggle SVG filter. Filtering the outline alone keeps the
   text inside perfectly crisp. */
.goal,.role-card,.pillars,.apply-cta,.map-panel,.mapwrap,.cta .wrap{
  position:relative;overflow:visible;border:2.5px solid transparent;
  border-radius:var(--hd-r);box-shadow:var(--hd-shadow)}
.goal::after,.role-card::after,.pillars::after,.apply-cta::after,.map-panel::after,.mapwrap::after,.cta .wrap::after{
  content:"";position:absolute;inset:-2.5px;z-index:3;pointer-events:none;
  border:3px solid var(--hd-ink);border-radius:inherit;filter:url(#squiggle)}

/* Keep each card's fill inside its border, so where the squiggled outline
   wobbles inward the fill doesn't poke out past it. !important because the
   per-card background shorthands below would otherwise reset the clip. */
.goal,.role-card,.pillars,.apply-cta,.map-panel,.mapwrap,.cta .wrap,
.feature,.vals .val,.cta-box,.reqs,.cat,.free-note{background-clip:padding-box!important}

/* about */
.about-intro{border-bottom:2.5px dashed var(--hd-dash)}
.about-intro h2 b{color:inherit;box-shadow:inset 0 -.36em 0 var(--hd-yellow);padding:0 .06em}
/* .body opens with its eyebrow, so the page's "first paragraph is the lead"
   rule was landing on the eyebrow. Point each style at the right element. */
.about .body p.eyebrow:first-child{font-family:var(--hand);font-size:1.5rem;font-weight:700;line-height:1;color:var(--hd-violet)}
.about .body .eyebrow + p{font-family:var(--serif);font-weight:600;font-size:1.22rem;line-height:1.5;color:var(--hd-ink);margin-top:12px}
.pillars{gap:0;background:var(--hd-white)}
.pillar{background:transparent}
.pillar + .pillar{border-top:2px dashed var(--hd-dash)}
.pillar h3{font-family:var(--serif);font-weight:800}
.pillar p{color:var(--hd-ink-2)}
.pillar .n{width:2.1em;height:2.1em;display:grid;place-items:center;flex:0 0 2.1em;
  font-family:var(--serif);font-weight:800;font-size:1rem;color:var(--hd-ink);
  background:var(--hd-yellow);border:2px solid var(--hd-ink);border-radius:50% 46% 52% 48%}
.pillar:nth-child(2) .n{background:var(--hd-mint)}
.pillar:nth-child(3) .n{background:var(--hd-pink)}
.pillar:nth-child(4) .n{background:var(--hd-sky)}

/* haven */
.havensec .eyebrow{color:var(--hd-violet)}
.havensec .lede2{color:var(--hd-ink-2)}
.havensec .feat li{color:var(--hd-ink);font-weight:800;border:2px solid var(--hd-ink);
  border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}
.havensec .feat li:nth-child(4n+1){background:var(--hd-yellow)}
.havensec .feat li:nth-child(4n+2){background:var(--hd-mint)}
.havensec .feat li:nth-child(4n+3){background:var(--hd-pink)}
.havensec .feat li:nth-child(4n+4){background:var(--hd-sky)}

/* goals: pastel index cards, slightly off-square */
.goal{background:var(--hd-cream)}
.g-grid .goal:nth-child(1){rotate:-1deg}
.g-grid .goal:nth-child(2){background:var(--hd-mint);rotate:.8deg}
.g-grid .goal:nth-child(3){background:var(--hd-sky);rotate:-.5deg}
.goal .num{color:var(--hd-ink);font-family:var(--serif);font-weight:800}
.goal .lbl{font-family:var(--serif);font-weight:700}
.goal p{color:var(--hd-ink-2)}
.goals .foot{font-family:var(--hand);font-style:normal;font-size:1.3rem;color:var(--hd-violet)}

/* chapters */
.mapwrap{background:var(--hd-white)}
.mapwrap::before{content:none;display:none}
.map-board{background:var(--hd-lav);border:2.5px solid var(--hd-ink);border-radius:var(--hd-r-sm);
  box-shadow:none;transform:none}
.map-board::before{content:none;display:none}
.map-board.has-map{background:var(--hd-night)}
.map-placeholder{background:var(--hd-paper);border:2.5px solid var(--hd-ink);
  border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}
.map-placeholder .mark{background:var(--hd-yellow);color:var(--hd-ink);border:2px solid var(--hd-ink);box-shadow:none}
.map-panel{background:var(--hd-cream);border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}
.map-panel .tagm{font-family:var(--hand);font-size:1.35rem;letter-spacing:0;text-transform:none;color:var(--hd-violet)}
.map-panel b{font-family:var(--serif);font-weight:800}
.map-list i{width:13px;height:13px;background:var(--hd-yellow);border:2px solid var(--hd-ink);box-shadow:none}
.mapboxgl-popup-content{font-family:var(--sans);color:var(--hd-ink);border:2px solid var(--hd-ink);
  border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}
.mapboxgl-popup-content b{font-family:var(--serif);color:var(--hd-ink)}

.role-card{background:var(--hd-white)}
.role-cols .role-card:nth-child(1){rotate:-.4deg}
.role-cols .role-card:nth-child(2){background:var(--hd-paper);rotate:.4deg}
.role-card .kicker{font-family:var(--hand);font-size:1.35rem;letter-spacing:0;text-transform:none;color:var(--hd-violet)}
.role-card h3{font-family:var(--serif);font-weight:800}
.role-card > p{color:var(--hd-ink-2)}
.role-list li{border-top:2px dashed var(--hd-dash)}
.role-list span{color:var(--hd-ink-2)}

.apply-cta{background:var(--hd-cream);rotate:-.3deg}
.apply-cta h3{font-family:var(--serif);font-weight:800}
.apply-cta p{color:var(--hd-ink-2)}

/* ---------- closing call: a big yellow card on paper ---------- */
.cta{background:var(--hd-lav);color:var(--hd-ink);border-top:2.5px dashed var(--hd-dash)}
.cta .wrap{width:min(860px,calc(100% - 32px));margin:0 auto;background:var(--hd-yellow);
  border-radius:38px 28px 40px 30px;box-shadow:8px 10px 0 var(--hd-ink);
  padding:clamp(34px,5vw,58px) clamp(22px,4vw,48px);rotate:-.5deg}
.cta h2,.cta p{color:var(--hd-ink)}
.cta .btn.primary{background:var(--hd-white)}

/* ---------- footer ---------- */
footer{background:var(--hd-ink);color:#e6d9f3}
footer::before{content:none;display:none}
footer .brand{color:var(--hd-paper)}
footer .brand .mark{box-shadow:0 0 0 2.5px var(--hd-paper)}
footer a:hover,footer a:focus-visible{color:var(--hd-yellow);box-shadow:none}
footer .fine{color:#c9b6de;border-top:2px dashed rgba(251,247,255,.25)}

/* ---------- phones ---------- */
@media(max-width:760px){
  .eyebrow,.about .body p.eyebrow:first-child{font-size:1.15rem}
  .about .body .eyebrow + p{font-size:1rem}
  .nav nav a.cta-link:not(.btn){background:var(--hd-yellow);color:var(--hd-ink);
    border:2px solid var(--hd-ink);box-shadow:var(--hd-shadow-sm)}
  .hero{margin:62px 8px 0;min-height:0;padding:34px 0 42px;
    border-width:2.5px;border-radius:26px 20px 28px 22px;box-shadow:5px 6px 0 var(--hd-ink)}
  .goal,.role-card,.pillars,.apply-cta,.mapwrap{box-shadow:4px 4px 0 var(--hd-ink)}
  .g-grid .goal:nth-child(n),.role-cols .role-card:nth-child(n),.apply-cta,.hero-keys li:nth-child(n){rotate:0deg}
  .cta .wrap{rotate:0deg;border-radius:26px 20px 28px 22px;box-shadow:5px 6px 0 var(--hd-ink)}
  .goals .foot,.map-panel .tagm,.role-card .kicker{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* =====================================================================
   about.html and handbook.html
   Same system, their own markup: .site-nav, a .cover header, plain
   sections of .col, and a handful of card shapes.
   ===================================================================== */
.site-nav{background:var(--hd-lav);backdrop-filter:none;border-bottom:2.5px solid var(--hd-ink)}
.site-brand{color:var(--hd-ink);font-family:var(--serif);font-weight:800}
.site-brand-logo{box-shadow:0 0 0 2.5px var(--hd-ink)}
.site-links a{color:var(--hd-ink-2);font-weight:700}
.site-links a:not(.site-cta):hover,.site-links a:not(.site-cta):focus-visible{color:var(--hd-ink);box-shadow:none;
  text-decoration:underline wavy var(--hd-yellow) 2px;text-underline-offset:6px}
.site-links a.here{color:var(--hd-ink);text-decoration:underline wavy var(--hd-violet) 2px;text-underline-offset:6px}
.site-cta{background:var(--hd-yellow)!important;color:var(--hd-ink)!important;border:2.5px solid var(--hd-ink);
  border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}
.site-cta:hover,.site-cta:focus-visible{box-shadow:5px 5px 0 var(--hd-ink)}
.site-nav .language-select{background:var(--hd-white);color:var(--hd-ink);border:2px solid var(--hd-ink);
  border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}

/* the cover gets framed the same way the homepage hero does */
.cover{position:relative;z-index:2;margin:18px clamp(10px,2.4vw,28px) 0;background:var(--hd-day)!important;color:var(--hd-ink);
  border:3px solid var(--hd-ink);border-radius:40px 30px 42px 32px;box-shadow:8px 10px 0 var(--hd-ink)}
.cover .eyebrow{color:var(--hd-violet)}
.cover h1{color:var(--hd-ink)}
.cover p.sub{color:var(--hd-ink-2)}
.cover .tag{font-family:var(--hand);font-size:1.2rem;letter-spacing:0;color:var(--hd-ink);background:var(--hd-cream);
  border:2px solid var(--hd-ink);border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}

.cover ~ section{background:var(--hd-lav)}
.cover ~ section + section{border-top:2.5px dashed var(--hd-dash)}
h2.sec{font-weight:800}
.amber-eye{color:var(--hd-violet)}
.lead{font-family:var(--serif);font-weight:600;color:var(--hd-ink)}
p.body b{color:var(--hd-ink)}
footer a{color:#e6d9f3}

/* a pull quote written on a sticky note */
.pull{margin:28px 0;padding:16px 22px;background:var(--hd-cream);color:var(--hd-ink);
  border:2.5px solid var(--hd-ink);border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm);
  font-family:var(--hand);font-size:1.7rem;line-height:1.2;rotate:-.6deg}

.feature,.vals .val,.cta-box,.reqs,.cat,.free-note{position:relative;overflow:visible;
  border:2.5px solid transparent;border-radius:var(--hd-r);box-shadow:var(--hd-shadow);background:var(--hd-white)}
.feature::after,.vals .val::after,.cta-box::after,.reqs::after,.cat::after,.free-note::after{
  content:"";position:absolute;inset:-2.5px;z-index:3;pointer-events:none;
  border:3px solid var(--hd-ink);border-radius:inherit;filter:url(#squiggle)}

.feature{gap:0}
.feature .row{background:transparent}
.feature .row + .row{border-top:2px dashed var(--hd-dash)}
.feature .row b{font-family:var(--serif);font-weight:800}
.feature .row span{color:var(--hd-ink-2)}

.vals .val:nth-child(1){background:var(--hd-cream);rotate:-.8deg}
.vals .val:nth-child(2){background:var(--hd-mint);rotate:.6deg}
.vals .val:nth-child(3){background:var(--hd-sky);rotate:-.4deg}
.vals .val:nth-child(4){rotate:.7deg}
.val h3{font-family:var(--serif);font-weight:800}
.val p{color:var(--hd-ink-2)}
.checks li b{color:var(--hd-ink)}
.checks li::before{background:var(--hd-violet)}

.cta-box{background:var(--hd-yellow)}
.cta-box p{color:var(--hd-ink)}
.cta-box .btn.primary{background:var(--hd-white)}

/* handbook */
.name-ex .n{font-family:var(--hand);font-size:1.55rem;color:var(--hd-ink);background:var(--hd-white);
  border:2.5px solid var(--hd-ink);border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}
.name-ex .n:nth-child(odd){rotate:-.5deg}
.name-ex .n:nth-child(even){rotate:.5deg}
.haves span{color:var(--hd-ink);font-weight:800;border:2px solid var(--hd-ink);
  border-radius:var(--hd-r-sm);box-shadow:var(--hd-shadow-sm)}
.haves span:nth-child(4n+1){background:var(--hd-yellow)}
.haves span:nth-child(4n+2){background:var(--hd-mint)}
.haves span:nth-child(4n+3){background:var(--hd-pink)}
.haves span:nth-child(4n+4){background:var(--hd-sky)}

.reqs{gap:0}
.reqs li{background:transparent}
.reqs li + li{border-top:2px dashed var(--hd-dash)}
.reqs li::before,.steps li::before{background:var(--hd-yellow);color:var(--hd-ink);border:2px solid var(--hd-ink);
  border-radius:50% 46% 52% 48%;font-family:var(--serif);font-weight:800;width:30px;height:30px}
.reqs .d,.steps li{color:var(--hd-ink-2)}
.thats-it{font-family:var(--hand);font-size:2rem;color:var(--hd-ink)}
.thats-it span{color:var(--hd-ink);box-shadow:inset 0 -.3em 0 var(--hd-yellow)}

.ideas .cat:nth-child(1){background:var(--hd-cream);rotate:-.8deg}
.ideas .cat:nth-child(2){background:var(--hd-mint);rotate:.6deg}
.ideas .cat:nth-child(3){background:var(--hd-sky);rotate:-.5deg}
.cat h3{font-weight:800}
.cat h3 .ic{background:var(--hd-white);border:2px solid var(--hd-ink);border-radius:9px 7px 10px 8px}
.cat li{color:var(--hd-ink-2)}
.cat li::before{color:var(--hd-violet);opacity:1}
.free-note{background:var(--hd-cream);color:var(--hd-ink-2)}

/* handbook's .cta is a row of buttons, not the homepage's closing section */
.col > .cta{background:transparent;border-top:0;padding:0;color:inherit}
.col > .cta .btn.primary{background:var(--hd-yellow)}

@media(max-width:760px){
  .cover{margin:10px 8px 0;border-width:2.5px;border-radius:26px 20px 28px 22px;box-shadow:5px 6px 0 var(--hd-ink)}
  .feature,.vals .val,.cta-box,.reqs,.cat,.free-note{box-shadow:4px 4px 0 var(--hd-ink)}
  .vals .val:nth-child(n),.ideas .cat:nth-child(n),.name-ex .n:nth-child(n),.pull{rotate:0deg}
  .pull{font-size:1.35rem}
}

/* =====================================================================
   team.html
   One card per person: photo on one side, bio on the other, alternating.
   These keep a solid ink border instead of the squiggled one, because the
   card has to clip its photo to the rounded corners, and that clip would
   also cut off an outline drawn outside the edge.
   ===================================================================== */
.lead-card,.member{background:var(--hd-white);border:3px solid var(--hd-ink);
  border-radius:var(--hd-r);box-shadow:var(--hd-shadow)}
.lead-card{margin-bottom:34px}
.lead-card .photo,.lead-card .ava{border-right:3px solid var(--hd-ink)}
.lead-card.rev .photo,.lead-card.rev .ava{border-right:0;border-left:3px solid var(--hd-ink)}
.lead-card:nth-of-type(4n+1){rotate:-.35deg}
.lead-card:nth-of-type(4n+2){background:var(--hd-cream);rotate:.3deg}
.lead-card:nth-of-type(4n+3){background:var(--hd-mint);rotate:-.25deg}
.lead-card:nth-of-type(4n+4){background:var(--hd-sky);rotate:.35deg}
.lead-card .name,.member .name{font-family:var(--serif);font-weight:800;color:var(--hd-ink)}
.lead-card .role,.member .role{font-family:var(--hand);font-size:1.35rem;font-weight:700;line-height:1.2;
  letter-spacing:0;text-transform:none;color:var(--hd-violet);margin-top:4px}
.lead-card .bio,.member .bio{color:var(--hd-ink-2)}
.member .photo,.member .ava{border-bottom:3px solid var(--hd-ink)}

@media(max-width:720px){
  .lead-card .photo,.lead-card .ava,.lead-card.rev .photo,.lead-card.rev .ava{
    border-right:0;border-left:0;border-bottom:3px solid var(--hd-ink)}
  .lead-card:nth-of-type(n){rotate:0deg}
  .lead-card,.member{box-shadow:4px 4px 0 var(--hd-ink)}
  .lead-card .role,.member .role{font-size:1.15rem}
}


/* =====================================================================
   Depth and decoration
   Still flat colour and hard shadows only. The depth comes from stacked
   offset sheets, extruded buttons and headings, and hand-drawn stickers
   tucked into the corners. No gradients, no blurs.
   ===================================================================== */
:root{
  --hd-sheet:#e3d3f7;
  --hd-stack:6px 7px 0 var(--hd-ink),13px 15px 0 var(--hd-sheet),13px 15px 0 3px var(--hd-ink);
  --hd-stack-sm:4px 5px 0 var(--hd-ink),9px 10px 0 var(--hd-sheet),9px 10px 0 2.5px var(--hd-ink);
  --hd-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.3' fill='rgba(59,42,84,.13)'/%3E%3C/svg%3E");
}
html{overflow-x:clip}

/* dotted notebook paper */
body,.about,.havensec,.goals,.chapters,.cta,.cover ~ section{background-image:var(--hd-dots);background-size:24px 24px}

/* big cards sit on a second outlined sheet, like a stack of paper */
.hero,.cover,.cta .wrap{box-shadow:var(--hd-stack)}
.pillars,.mapwrap,.feature,.reqs{box-shadow:var(--hd-stack-sm)}

/* chunky keys that press down */
.btn,.site-cta{box-shadow:0 5px 0 var(--hd-ink)}
.btn:hover,.btn:focus-visible,.site-cta:hover,.site-cta:focus-visible{box-shadow:0 7px 0 var(--hd-ink);translate:0 -2px}
.btn:active,.site-cta:active{box-shadow:0 1px 0 var(--hd-ink);translate:0 4px}

/* raised headings */
.haven-title,.cover h1{text-shadow:4px 4px 0 var(--hd-lilac)}
.sec-head h2,.about-intro h2,.havensec h2,h2.sec,.cta h2{text-shadow:3px 3px 0 rgba(196,154,234,.75)}

/* cards lift under the pointer */
.goal,.role-card,.lead-card,.vals .val,.cat{
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),translate .18s ease,box-shadow .18s ease}
.goal:hover,.role-card:hover,.lead-card:hover,.vals .val:hover,.cat:hover{translate:-3px -4px;box-shadow:9px 11px 0 var(--hd-ink)}

/* ---- homepage hero stickers ----
   The hero clips its canvas to its rounded corners, so the stickers live in a
   sibling layer placed in the same grid cell: it takes the hero's exact size
   and can overlap its edges without being clipped. */
main#top{display:grid;grid-template-columns:minmax(0,1fr)}
main#top > .hero,main#top > .hero-deco{grid-area:1/1}
.hero-deco{position:relative;z-index:47;pointer-events:none;margin:84px clamp(10px,2.4vw,28px) 0}
.stk{position:absolute;display:block;height:auto;filter:drop-shadow(3px 4px 0 var(--hd-ink));animation:stkfloat 7s ease-in-out infinite}
.stk-cloud{width:126px;bottom:-40px;left:4%;rotate:-6deg}
.stk-star{width:60px;top:-26px;right:38%;rotate:12deg;animation-delay:-2s}
.stk-sparkle{width:48px;top:34%;right:-20px;animation-delay:-4s}
.stk-drop{width:40px;top:calc(34% + 72px);right:-12px;rotate:10deg;animation-delay:-1s}
.stk-heart{width:58px;top:-24px;left:-16px;rotate:-12deg;animation-delay:-3s}
.stk-flower{width:72px;bottom:-32px;right:9%;rotate:8deg;animation-delay:-5s}
@keyframes stkfloat{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* ---- scrolling tape between the hero and the first section ---- */
.tape{position:relative;z-index:46;margin:42px -24px -10px;rotate:-1.4deg;overflow:hidden;
  background:var(--hd-yellow);border-block:3px solid var(--hd-ink);box-shadow:0 6px 0 var(--hd-ink)}
.tape-track{display:flex;align-items:center;gap:22px;width:max-content;padding:13px 0;
  font-family:var(--serif);font-weight:800;font-size:1.15rem;color:var(--hd-ink);white-space:nowrap;
  animation:tapescroll 38s linear infinite}
.tape-track i{font-style:normal;color:var(--hd-violet);font-size:1.3rem}
@keyframes tapescroll{to{transform:translateX(-50%)}}

/* ---- page-header stickers (About, Handbook, Team) ---- */
.cover{margin-top:44px}
.cover::after{content:"";position:absolute;z-index:3;pointer-events:none;inset:-34px -6px -30px -6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90'%3E%3Cpath d='M30 78 C12 78 6 62 16 52 C10 36 28 24 42 32 C48 14 76 10 86 28 C100 20 120 30 116 48 C132 50 134 76 114 78 Z' fill='%23e3d3f7' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C18 64 8 46 14 30 C20 14 42 12 50 30 C58 12 80 14 86 30 C92 46 82 64 50 88 Z' fill='%23f49ac1' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;
  background-position:left top,right 18% top 6px,right 3% bottom;background-size:120px,58px,56px;
  filter:drop-shadow(3px 4px 0 var(--hd-ink));animation:stkfloat 8s ease-in-out infinite}

/* ---- doodles in the empty space beside sections, wide screens only ---- */
@media(min-width:1000px){
  .about::after,.havensec::after,.goals::after,.chapters::after,.cta::before{
    content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
    background-repeat:no-repeat;filter:drop-shadow(3px 4px 0 var(--hd-ink))}
  .about::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C18 64 8 46 14 30 C20 14 42 12 50 30 C58 12 80 14 86 30 C92 46 82 64 50 88 Z' fill='%23f49ac1' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 7% top 90px,left 3% bottom 20px;background-size:70px,54px}
  .havensec::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 90'%3E%3Cpath d='M16 10 H94 C102 10 106 14 106 22 V54 C106 62 102 66 94 66 H46 L26 84 L30 66 H16 C8 66 4 62 4 54 V22 C4 14 8 10 16 10 Z' fill='%23ffffff' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='36' cy='38' r='6' fill='%233b2a54'/%3E%3Ccircle cx='55' cy='38' r='6' fill='%233b2a54'/%3E%3Ccircle cx='74' cy='38' r='6' fill='%233b2a54'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 6 C40 26 52 40 52 54 C52 68 42 76 30 76 C18 76 8 68 8 54 C8 40 20 26 30 6 Z' fill='%239cc9ef' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M20 54 C20 62 24 66 30 67' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C54 34 66 46 94 50 C66 54 54 66 50 94 C46 66 34 54 6 50 C34 46 46 34 50 6 Z' fill='%23ffffff' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 13% top 70px,right 30% top 130px,right 7% bottom 80px;background-size:130px,42px,52px}
  .goals::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90'%3E%3Cpath d='M30 78 C12 78 6 62 16 52 C10 36 28 24 42 32 C48 14 76 10 86 28 C100 20 120 30 116 48 C132 50 134 76 114 78 Z' fill='%23e3d3f7' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 5% top 70px,right 21% top 170px;background-size:160px,50px}
  .chapters::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%233b2a54' stroke-width='5'%3E%3Ccircle cx='50' cy='24' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='76' cy='44' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='66' cy='74' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='34' cy='74' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='24' cy='44' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='50' cy='52' r='14' fill='%23ffc94d'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath d='M6 26 C20 6 34 6 42 22 C50 38 64 38 74 20 C84 4 98 6 106 22 C114 38 128 38 138 20 C144 10 150 10 154 14' fill='none' stroke='%238b5fce' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 5% top 80px,right 6% bottom 36px;background-size:84px,150px}
  .cta::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C18 64 8 46 14 30 C20 14 42 12 50 30 C58 12 80 14 86 30 C92 46 82 64 50 88 Z' fill='%23f49ac1' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C54 34 66 46 94 50 C66 54 54 66 50 94 C46 66 34 54 6 50 C34 46 46 34 50 6 Z' fill='%23ffffff' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:left 9% top 34px,right 10% bottom 40px,right 16% top 40px;background-size:58px,64px,42px}
}
@media(min-width:1100px){
  .cover ~ section{position:relative}
  .cover ~ section > .col{position:relative;z-index:1}
  .cover ~ section::after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;filter:drop-shadow(3px 4px 0 var(--hd-ink))}
  .cover ~ section:nth-of-type(odd)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C54 34 66 46 94 50 C66 54 54 66 50 94 C46 66 34 54 6 50 C34 46 46 34 50 6 Z' fill='%23ffffff' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 6 C40 26 52 40 52 54 C52 68 42 76 30 76 C18 76 8 68 8 54 C8 40 20 26 30 6 Z' fill='%239cc9ef' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M20 54 C20 62 24 66 30 67' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 12% top 60px,right 18% top 130px;background-size:50px,34px}
  .cover ~ section:nth-of-type(even)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%233b2a54' stroke-width='5'%3E%3Ccircle cx='50' cy='24' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='76' cy='44' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='66' cy='74' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='34' cy='74' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='24' cy='44' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='50' cy='52' r='14' fill='%23ffc94d'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath d='M6 26 C20 6 34 6 42 22 C50 38 64 38 74 20 C84 4 98 6 106 22 C114 38 128 38 138 20 C144 10 150 10 154 14' fill='none' stroke='%238b5fce' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");background-position:left 10% bottom 50px,left 14% top 70px;background-size:66px,120px}
}

@media(max-width:760px){
  .hero-deco{margin:62px 8px 0}
  .stk-cloud{width:80px;bottom:-24px;left:4%}
  .stk-star{width:40px;top:-18px;right:34%}
  .stk-heart{width:40px;top:-16px;left:-8px}
  .stk-flower{width:48px;bottom:-22px;right:8%}
  .stk-sparkle,.stk-drop{display:none}
  .hero,.cover,.cta .wrap{box-shadow:var(--hd-stack-sm)}
  .pillars,.mapwrap,.feature,.reqs{box-shadow:4px 4px 0 var(--hd-ink)}
  .tape{margin:30px -14px -6px}
  .tape-track{font-size:.95rem;gap:16px;padding:10px 0}
  .cover{margin-top:30px}
  .cover::after{inset:-24px -4px -22px -4px;background-size:80px,40px,40px}
  .haven-title,.cover h1{text-shadow:3px 3px 0 var(--hd-lilac)}
}
@media(prefers-reduced-motion:reduce){
  .stk,.cover::after,.tape-track{animation:none}
  .goal,.role-card,.lead-card,.vals .val,.cat{transition:none}
}


/* =====================================================================
   More stickers: twice the decoration, same rules. These redefine the
   sticker lists above rather than stacking new layers on top of them.
   ===================================================================== */
.stk-sparkle2{width:40px;top:-18px;left:26%;rotate:-10deg;animation-delay:-6s}
.stk-umbrella{width:78px;top:12%;right:-24px;rotate:14deg;animation-delay:-2.5s}
.stk-moon{width:46px;top:44%;left:-24px;rotate:-14deg;animation-delay:-3.5s}
.stk-drop2{width:32px;bottom:22%;left:-12px;rotate:-8deg;animation-delay:-1.5s}
.stk-squiggle{width:130px;bottom:-16px;left:30%;rotate:-4deg;animation-delay:-4.5s}
.stk-bubble{width:78px;bottom:-28px;right:31%;rotate:6deg;animation-delay:-5.5s}

/* second tape, tilted the other way and scrolling the other direction */
.tape-2{z-index:48;margin:-22px -24px -22px;rotate:1.2deg;background:var(--hd-sheet)}
.tape-2 .tape-track{animation-direction:reverse;animation-duration:44s}

.cover::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90'%3E%3Cpath d='M30 78 C12 78 6 62 16 52 C10 36 28 24 42 32 C48 14 76 10 86 28 C100 20 120 30 116 48 C132 50 134 76 114 78 Z' fill='%23e3d3f7' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C18 64 8 46 14 30 C20 14 42 12 50 30 C58 12 80 14 86 30 C92 46 82 64 50 88 Z' fill='%23f49ac1' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C54 34 66 46 94 50 C66 54 54 66 50 94 C46 66 34 54 6 50 C34 46 46 34 50 6 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M64 10 C38 16 22 40 26 64 C30 86 52 96 74 90 C58 84 46 68 46 50 C46 32 54 18 64 10 Z' fill='%23ffe39a' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath d='M6 26 C20 6 34 6 42 22 C50 38 64 38 74 20 C84 4 98 6 106 22 C114 38 128 38 138 20 C144 10 150 10 154 14' fill='none' stroke='%238b5fce' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position:left top,right 18% top 6px,right 3% bottom,left 32% top 12px,right 0 top 48%,left 6% bottom 0;
  background-size:120px,58px,56px,38px,40px,110px}

@media(min-width:1000px){
  .about::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C18 64 8 46 14 30 C20 14 42 12 50 30 C58 12 80 14 86 30 C92 46 82 64 50 88 Z' fill='%23f49ac1' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C54 34 66 46 94 50 C66 54 54 66 50 94 C46 66 34 54 6 50 C34 46 46 34 50 6 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath d='M6 26 C20 6 34 6 42 22 C50 38 64 38 74 20 C84 4 98 6 106 22 C114 38 128 38 138 20 C144 10 150 10 154 14' fill='none' stroke='%238b5fce' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position:right 7% top 90px,left 3% bottom 20px,right 17% top 200px,right 5% bottom 30px;
    background-size:70px,54px,40px,120px}
  .havensec::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 90'%3E%3Cpath d='M16 10 H94 C102 10 106 14 106 22 V54 C106 62 102 66 94 66 H46 L26 84 L30 66 H16 C8 66 4 62 4 54 V22 C4 14 8 10 16 10 Z' fill='%23ffffff' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='36' cy='38' r='6' fill='%233b2a54'/%3E%3Ccircle cx='55' cy='38' r='6' fill='%233b2a54'/%3E%3Ccircle cx='74' cy='38' r='6' fill='%233b2a54'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 6 C40 26 52 40 52 54 C52 68 42 76 30 76 C18 76 8 68 8 54 C8 40 20 26 30 6 Z' fill='%239cc9ef' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M20 54 C20 62 24 66 30 67' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C54 34 66 46 94 50 C66 54 54 66 50 94 C46 66 34 54 6 50 C34 46 46 34 50 6 Z' fill='%23ffffff' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M8 52 C10 20 90 20 92 52 C82 45 72 45 64 52 C56 45 44 45 36 52 C28 45 18 45 8 52 Z' fill='%23c49aea' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M50 52 L50 82 C50 92 36 92 36 83' fill='none' stroke='%233b2a54' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M50 26 L50 16' stroke='%233b2a54' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C18 64 8 46 14 30 C20 14 42 12 50 30 C58 12 80 14 86 30 C92 46 82 64 50 88 Z' fill='%23f49ac1' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position:right 13% top 70px,right 30% top 130px,right 7% bottom 80px,right 22% bottom 50px,right 3% top 200px,right 36% bottom 26px;
    background-size:130px,42px,52px,46px,78px,40px}
  .goals::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90'%3E%3Cpath d='M30 78 C12 78 6 62 16 52 C10 36 28 24 42 32 C48 14 76 10 86 28 C100 20 120 30 116 48 C132 50 134 76 114 78 Z' fill='%23e3d3f7' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M64 10 C38 16 22 40 26 64 C30 86 52 96 74 90 C58 84 46 68 46 50 C46 32 54 18 64 10 Z' fill='%23ffe39a' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 6 C40 26 52 40 52 54 C52 68 42 76 30 76 C18 76 8 68 8 54 C8 40 20 26 30 6 Z' fill='%239cc9ef' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M20 54 C20 62 24 66 30 67' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position:right 5% top 70px,right 21% top 170px,right 32% top 64px,right 14% top 200px;
    background-size:160px,50px,40px,32px}
  .chapters::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%233b2a54' stroke-width='5'%3E%3Ccircle cx='50' cy='24' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='76' cy='44' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='66' cy='74' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='34' cy='74' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='24' cy='44' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='50' cy='52' r='14' fill='%23ffc94d'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath d='M6 26 C20 6 34 6 42 22 C50 38 64 38 74 20 C84 4 98 6 106 22 C114 38 128 38 138 20 C144 10 150 10 154 14' fill='none' stroke='%238b5fce' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C18 64 8 46 14 30 C20 14 42 12 50 30 C58 12 80 14 86 30 C92 46 82 64 50 88 Z' fill='%23f49ac1' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position:right 5% top 80px,right 6% bottom 36px,right 16% top 150px,left 2% bottom 40px;
    background-size:84px,150px,48px,46px}
  .cta::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C18 64 8 46 14 30 C20 14 42 12 50 30 C58 12 80 14 86 30 C92 46 82 64 50 88 Z' fill='%23f49ac1' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C54 34 66 46 94 50 C66 54 54 66 50 94 C46 66 34 54 6 50 C34 46 46 34 50 6 Z' fill='%23ffffff' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90'%3E%3Cpath d='M30 78 C12 78 6 62 16 52 C10 36 28 24 42 32 C48 14 76 10 86 28 C100 20 120 30 116 48 C132 50 134 76 114 78 Z' fill='%23e3d3f7' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M8 52 C10 20 90 20 92 52 C82 45 72 45 64 52 C56 45 44 45 36 52 C28 45 18 45 8 52 Z' fill='%23c49aea' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M50 52 L50 82 C50 92 36 92 36 83' fill='none' stroke='%233b2a54' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M50 26 L50 16' stroke='%233b2a54' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 6 C40 26 52 40 52 54 C52 68 42 76 30 76 C18 76 8 68 8 54 C8 40 20 26 30 6 Z' fill='%239cc9ef' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M20 54 C20 62 24 66 30 67' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position:left 9% top 34px,right 10% bottom 40px,right 16% top 40px,left 5% bottom 50px,right 5% top 130px,left 16% bottom 130px;
    background-size:58px,64px,42px,120px,70px,34px}
}
@media(min-width:1100px){
  .cover ~ section:nth-of-type(odd)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C54 34 66 46 94 50 C66 54 54 66 50 94 C46 66 34 54 6 50 C34 46 46 34 50 6 Z' fill='%23ffffff' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 6 C40 26 52 40 52 54 C52 68 42 76 30 76 C18 76 8 68 8 54 C8 40 20 26 30 6 Z' fill='%239cc9ef' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M20 54 C20 62 24 66 30 67' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 L61 36 L91 38 L67 57 L75 87 L50 70 L25 87 L33 57 L9 38 L39 36 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M64 10 C38 16 22 40 26 64 C30 86 52 96 74 90 C58 84 46 68 46 50 C46 32 54 18 64 10 Z' fill='%23ffe39a' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position:right 12% top 60px,right 18% top 130px,right 8% bottom 60px,right 16% bottom 150px;
    background-size:50px,34px,40px,34px}
  .cover ~ section:nth-of-type(even)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%233b2a54' stroke-width='5'%3E%3Ccircle cx='50' cy='24' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='76' cy='44' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='66' cy='74' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='34' cy='74' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='24' cy='44' r='17' fill='%23cdefd8'/%3E%3Ccircle cx='50' cy='52' r='14' fill='%23ffc94d'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath d='M6 26 C20 6 34 6 42 22 C50 38 64 38 74 20 C84 4 98 6 106 22 C114 38 128 38 138 20 C144 10 150 10 154 14' fill='none' stroke='%238b5fce' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90'%3E%3Cpath d='M30 78 C12 78 6 62 16 52 C10 36 28 24 42 32 C48 14 76 10 86 28 C100 20 120 30 116 48 C132 50 134 76 114 78 Z' fill='%23e3d3f7' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 C54 34 66 46 94 50 C66 54 54 66 50 94 C46 66 34 54 6 50 C34 46 46 34 50 6 Z' fill='%23ffc94d' stroke='%233b2a54' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position:left 10% bottom 50px,left 14% top 70px,left 5% top 160px,left 17% bottom 150px;
    background-size:66px,120px,110px,36px}
}
@media(max-width:760px){
  .stk-sparkle2{width:26px;top:-12px;left:24%}
  .stk-moon{width:30px;top:42%;left:-10px}
  .stk-umbrella,.stk-drop2,.stk-squiggle,.stk-bubble{display:none}
  .tape-2{margin:-14px -14px -14px}
  .cover::after{background-size:80px,40px,40px,26px,28px,74px}
}


/* ---- circles ----
   Rooms inside Haven. The cards reuse the squiggled outline the goal and role
   cards already use, one pastel each, so a row of them reads as a set of
   stickers rather than a table. */
.circles{background:var(--hd-paper);border-top:2.5px dashed var(--hd-dash)}
/* auto-fit rather than a fixed count: the About page runs these inside a 720px
   column, where three across breaks the room names onto two lines. */
.circ-grid{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:20px}
.circles .circ-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.circles .circ-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.circ-grid,.circles .circ-grid{grid-template-columns:minmax(0,1fr)}}
.circ{position:relative;overflow:visible;display:flex;flex-direction:column;gap:10px;
  padding:18px 18px 17px;background:var(--hd-white);background-clip:padding-box!important;
  border:2.5px solid transparent;border-radius:var(--hd-r);box-shadow:var(--hd-shadow)}
.circ::after{content:"";position:absolute;inset:-2.5px;z-index:3;pointer-events:none;
  border:3px solid var(--hd-ink);border-radius:inherit;filter:url(#squiggle)}
.circ-grid .circ:nth-child(1){background:var(--hd-mint);rotate:-1deg}
.circ-grid .circ:nth-child(2){background:var(--hd-sky);rotate:.7deg}
.circ-grid .circ:nth-child(3){background:var(--hd-lav);rotate:-.6deg}
.circ-grid .circ:nth-child(4){background:var(--hd-cream);rotate:.9deg}
.circ-grid .circ:nth-child(5){background:var(--hd-pink);rotate:-.8deg}
.circ-grid .circ:nth-child(6){background:var(--hd-yellow);rotate:.5deg}
.circ-top{display:flex;align-items:center;gap:10px}
.circ-name{flex:1;font-family:var(--serif);font-weight:800;font-size:1.16rem;color:var(--hd-ink);word-break:break-word}
.circ-join{font-family:var(--serif);font-weight:800;font-size:.85rem;color:var(--hd-ink);white-space:nowrap;
  background:var(--hd-white);border:2.5px solid var(--hd-ink);border-radius:var(--hd-r-sm);
  box-shadow:var(--hd-shadow-sm);padding:4px 12px}
.circ-tag{margin:0;font-family:var(--hand);font-weight:700;font-size:1.34rem;line-height:1.2;color:var(--hd-violet)}
.circ-rule{align-self:flex-start;font-family:var(--sans);font-weight:700;font-size:.79rem;color:var(--hd-ink-2);
  background:var(--hd-white);border:2px solid var(--hd-ink);border-radius:var(--hd-r-sm);padding:3px 10px}
.circ-note{margin:28px auto 0;max-width:60ch;padding:14px 18px;text-align:center;
  font-family:var(--hand);font-size:1.3rem;line-height:1.35;color:var(--hd-violet);
  border:2.5px dashed var(--hd-dash);border-radius:var(--hd-r)}


/* ---- more depth ----
   The page already stacks paper: --hd-stack lays two offset sheets under the
   hero and the cover. These give the card sets the same stack, and let a card
   tilt toward the cursor so it sits in space instead of flat on the page.
   The tilt goes on `transform`, which leaves the `rotate` property free for
   each card's wonky angle and leaves the stickers' float animation alone. */
.circ,.goal,.val,.role-card,.cta-box{box-shadow:var(--hd-stack-sm)}

@media (hover:hover) and (pointer:fine){
  .tilt3d{transform-style:preserve-3d;will-change:transform;
    transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease}
  .tilt3d:hover{box-shadow:var(--hd-stack);z-index:2}
  /* the squiggled outline rides with the card instead of floating off it */
  .tilt3d::after{transform:translateZ(1px)}
}
@media (prefers-reduced-motion:reduce){
  .tilt3d{transform:none!important;transition:none}
}


/* ---- section decoration ----
   Only the hero carried stickers, which left every section below it looking
   like a template. These sit in the outer gutters, clear of the text column,
   behind the content and deaf to the pointer. They come off on narrow screens,
   where there is no gutter to put them in. */
.about,.havensec,.circles,.goals,.chapters,.cta{position:relative}
.sec-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.about > .wrap,.havensec > .wrap,.circles > .wrap,.goals > .wrap,
.chapters > .wrap,.cta > .wrap{position:relative;z-index:2}
.sec-deco .stk{animation-duration:9s}
.sec-deco .d-a1{left:1%;top:9%;width:76px;rotate:-7deg}
.sec-deco .d-a4{right:2.5%;bottom:11%;width:52px;rotate:13deg}
.sec-deco .d-h2{left:2.5%;top:20%;width:50px;rotate:-13deg}
.sec-deco .d-g2{left:2.5%;top:12%;width:40px;rotate:7deg}
.sec-deco .d-g3{right:1.5%;bottom:10%;width:72px;rotate:5deg}
.sec-deco .d-p1{left:2%;top:10%;width:46px;rotate:-12deg}
.sec-deco .d-t2{right:3.5%;top:14%;width:54px;rotate:14deg}
.sec-deco .d-a2,.sec-deco .d-h3,.sec-deco .d-g2,.sec-deco .d-p4{animation-delay:-3s}
.sec-deco .d-a3,.sec-deco .d-h4,.sec-deco .d-g4,.sec-deco .d-c3{animation-delay:-5s}
.sec-deco .d-a4,.sec-deco .d-c2,.sec-deco .d-p1,.sec-deco .d-t2{animation-delay:-2s}
/* .wrap is 1120px wide, so under ~1280px there is no gutter left and these
   would sit under the reading column. Off they go. */
@media(max-width:1280px){.sec-deco{display:none}}


/* ---- real depth, not just shadows ----
   The tilt puts each card in perspective, so its contents can sit at different
   heights above the card face. Tilt one and the name lifts clear of the text
   under it. The two parallax channels live in their own custom properties so
   scroll and cursor can't overwrite each other, and `transform` is left free
   for the float animation. */
.hero-deco .stk,.sec-deco .stk{translate:var(--px,0) var(--sy,0)}

@media (hover:hover) and (pointer:fine){
  .circ.tilt3d .circ-top{transform:translateZ(26px)}
  .circ.tilt3d .circ-tag{transform:translateZ(14px)}
  .circ.tilt3d .circ-rule{transform:translateZ(32px)}
  .goal.tilt3d .num{transform:translateZ(36px)}
  .goal.tilt3d .lbl{transform:translateZ(20px)}
  .goal.tilt3d p{transform:translateZ(8px)}
  .val.tilt3d h3{transform:translateZ(24px)}
  .val.tilt3d p{transform:translateZ(8px)}
  .role-card.tilt3d .kicker{transform:translateZ(16px)}
  .role-card.tilt3d h3{transform:translateZ(28px)}
  .role-card.tilt3d .role-list{transform:translateZ(8px)}
  .cta-box.tilt3d h3{transform:translateZ(24px)}
  .circ.tilt3d .circ-top,.circ.tilt3d .circ-tag,.circ.tilt3d .circ-rule,
  .goal.tilt3d .num,.goal.tilt3d .lbl,.goal.tilt3d p,
  .val.tilt3d h3,.val.tilt3d p,
  .role-card.tilt3d .kicker,.role-card.tilt3d h3,.role-card.tilt3d .role-list,
  .cta-box.tilt3d h3{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
}

/* the target numbers read as carved rather than printed */
.goal .num{text-shadow:1px 1px 0 var(--hd-violet),2px 2px 0 var(--hd-violet),
  3px 3px 0 var(--hd-violet),4px 5px 0 var(--hd-ink)}


@media (prefers-reduced-motion:reduce){
  .hero-deco .stk,.sec-deco .stk{translate:none}
}
@media(max-width:820px){
  .goal .num{text-shadow:2px 2px 0 var(--hd-violet),3px 4px 0 var(--hd-ink)}
}


/* ---- more of the hand-made stuff ----
   Four more stickers per section, sitting in the middle bands where the first
   four left a gap. A stitch over each section seam, in its own layer so it
   survives on phones where the gutter stickers switch off. Tape holding the
   circle cards down. An arrow leaning back toward the main button. */
.sec-deco .d-a6{right:2%;top:44%;width:40px;rotate:11deg}
.sec-deco .d-h6{right:1.5%;top:34%;width:62px;rotate:6deg}
.sec-deco .d-h7{left:2.5%;top:64%;width:36px;rotate:12deg}
.sec-deco .d-c5{right:2.5%;top:36%;width:30px;rotate:8deg}
.sec-deco .d-c8{left:2%;top:70%;width:40px;rotate:-13deg}
.sec-deco .d-p6{right:2%;top:38%;width:38px;rotate:10deg}
.sec-deco .d-p7{left:2.5%;top:58%;width:30px;rotate:-8deg}
.sec-deco .d-t7{left:4%;top:66%;width:28px;rotate:11deg}

.sec-stitch{position:absolute;top:-17px;left:50%;translate:-50% 0;width:124px;z-index:3;
  pointer-events:none;line-height:0}
.sec-stitch svg{width:100%;height:auto;display:block;filter:drop-shadow(2px 3px 0 rgba(59,42,84,.16))}

/* a strip of tape holding each circle card to the page */
.circ::before{content:"";position:absolute;top:-11px;left:-12px;width:54px;height:19px;z-index:4;
  background:color-mix(in srgb,var(--hd-yellow) 78%,transparent);
  border:2px solid var(--hd-ink);border-radius:3px 5px 4px 6px;rotate:-22deg}
/* all on the left corner: a right-taped card sitting next to a left-taped one
   puts two tapes nose to nose in the gap, and the grid is 3 columns on the
   homepage but 2 on the About page, so alternating sides collides either way. */
/* not every card is taped down: six identical pieces read as a pattern */
.circ-grid .circ:nth-child(2)::before,
.circ-grid .circ:nth-child(3)::before,
.circ-grid .circ:nth-child(5)::before{content:none}
.circ-grid .circ:nth-child(4)::before{rotate:-16deg;width:58px;top:-12px}
.circ-grid .circ:nth-child(6)::before{rotate:-18deg;width:52px;top:-10px}

/* Out of the flex flow: in the row it pushed past the 560px hero column and
   wrapped to its own line on some widths, landing under the buttons pointing
   at nothing. Absolute means it can't wrap, and it now aims up at the button. */
.hero .cta-row{position:relative}
.hero-arrow{position:absolute;left:10px;top:calc(100% + 4px);width:84px;height:auto;rotate:-2deg}

@media(max-width:820px){
  .sec-stitch{width:84px;top:-12px}
  .hero-arrow{display:none}
  .circ::before{width:44px;height:16px}
}