/* grants.chefmyklove - base styles */
:root{
  --cream:#FAF3E7;
  --card:#F3E9D8;
  --ink:#2B2620;
  --sub:#5c5245;
  --terracotta:#C1663D;
  --moss:#6B7A5E;
  --gold-glow: rgba(224,158,90,0.55);
  --cream-rgb: 250,243,231;
  --ink-rgb: 43,38,32;
  --gold-rgb: 224,158,90;
  /* Ivy-covered wooden door, used for the hero background, the hero
     door, and all four small doors - one continuous scene rather than
     separate flat-color shapes. Photo: Katelyn G on Unsplash, free to
     use under the Unsplash License (no attribution required). */
  --door-photo: url('https://images.unsplash.com/photo-1739511534275-bce28ef0867c?fm=jpg&q=60&w=1600&auto=format&fit=crop');
}
*{box-sizing:border-box;margin:0;padding:0;}
/* 16px root = the 1rem every font-size below is expressed against, so
   the accessibility text-size toggle (which changes only this value)
   scales the whole site instead of just the handful of elements that
   happen to inherit a bare font-size. */
html{scroll-behavior:smooth;overflow-x:hidden;font-size:16px;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Atkinson Hyperlegible', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}
.wrap{max-width:1000px;margin:0 auto;padding:0 40px;}
h1, h2, h3{font-family:'Fraunces', serif; font-weight:500;}
.eyebrow{font-weight:700;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--terracotta);}
.skip-link{
  position:absolute; left:-9999px; top:auto;
  background:var(--ink); color:var(--cream); padding:10px 16px; z-index:100;
}
.skip-link:focus{ left:16px; top:16px; }
:focus-visible{ outline:3px solid var(--terracotta); outline-offset:2px; }

@media (max-width:700px){
  .wrap{ padding:0 20px; }

  /* Nav was never checked against narrow screens: logo + accessibility
     button + CTA together are wider than a phone viewport. Shrink each
     piece and allow wrapping as a fail-safe (with height:auto, since the
     base rule's fixed 68px would clip a second line if wrap ever kicks
     in) rather than letting anything overflow off-screen. */
  .nav-inner{height:auto;min-height:60px;flex-wrap:wrap;gap:8px 10px;padding:10px 0;}
  .logo{font-size:0.9375rem;}
  .nav-right{gap:8px;flex-wrap:wrap;}
  .a11y-btn{font-size:0.71875rem;padding:6px 10px;gap:5px;}
  .nav-cta{font-size:0.75rem;padding:8px 12px;}
  /* Fixed 250px width + a large right-offset was tuned for desktop -
     on a narrow phone that combination pushes the panel's left edge
     off-screen. Cap width to the actual available viewport and anchor
     to the nav-right group's own edge instead of a fixed offset. */
  .a11y-panel{width:min(250px, calc(100vw - 40px));right:0;}
  /* Nav can now wrap to two lines on the narrowest phones - give the
     scroll-margin extra headroom so section headings don't end up
     tucked under a taller nav (see the desktop 84px value above). */
  #doorsSection, #how-it-works, #services, #why-me, #intake-section{
    scroll-margin-top:130px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

:root[data-reduce-motion="true"] *{
  animation-duration:0.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001ms !important;
}

/* ---- Nav + accessibility toolbar ----
   Transparent bar over the page photo - the logo is bare text floating
   on the image, so it gets the same airbrush-swath glow as the rest of
   the site's text. The two buttons (a11y toggle, nav CTA) already carry
   their own solid pill backgrounds and need no extra treatment. */
#site-nav{position:sticky;top:0;z-index:20;}

/* Every section that can be scrolled/swooped to directly (in-page
   anchors and the doors->intake swoop) needs clearance for the sticky
   nav (68px tall) - otherwise scrollIntoView() lands the section flush
   with the very top of the viewport and the nav bar sits on top of it,
   clipping the heading underneath instead of leaving room below it. */
#doorsSection, #how-it-works, #services, #why-me, #intake-section{
  scroll-margin-top:84px;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;}
.logo{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.125rem;
  position:relative;isolation:isolate;
}
.logo::before{
  content:"";position:absolute;z-index:-1;
  inset:-10px -16px;
  background:radial-gradient(ellipse at center, rgba(var(--cream-rgb),0.92) 0%, rgba(var(--cream-rgb),0.55) 50%, rgba(var(--cream-rgb),0) 100%);
  filter:blur(8px);
  pointer-events:none;
}
.nav-right{display:flex;align-items:center;gap:12px;position:relative;}
.nav-cta{font-weight:700;font-size:0.84375rem;background:var(--terracotta);color:#fff;padding:9px 16px;border-radius:20px;text-decoration:none;}
.a11y-btn{display:flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid rgba(var(--ink-rgb),0.25);border-radius:20px;padding:8px 14px;font-weight:700;font-size:0.8125rem;color:var(--ink);cursor:pointer;font-family:inherit;}
.a11y-key{display:inline-block;transition:transform 0.35s cubic-bezier(.2,1.4,.4,1);}
.a11y-btn[aria-expanded="true"] .a11y-key{transform:rotate(50deg);}
.a11y-panel{position:absolute;top:calc(100% + 10px);right:120px;background:var(--cream);border:1.5px solid rgba(var(--ink-rgb),0.25);border-radius:14px;padding:16px;width:250px;box-shadow:0 12px 30px rgba(0,0,0,0.14);z-index:21;}
.a11y-panel[hidden]{display:none;}
.a11y-panel-title{font-family:'Atkinson Hyperlegible',sans-serif;font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px;color:var(--sub);}
.a11y-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(var(--ink-rgb),0.12);font-size:0.84375rem;font-weight:700;}
.a11y-row:last-child{border-bottom:none;}
.a11y-seg{display:flex;gap:4px;}
.a11y-seg button{border:1.5px solid var(--ink);background:var(--cream);border-radius:6px;padding:4px 8px;font-size:0.75rem;font-family:inherit;cursor:pointer;}

/* States applied to <html> (text size) / <body> (contrast, dyslexia
   font) by js/accessibility.js. Text size changes the rem root instead
   of body's own font-size so it actually cascades: everything on this
   site sets its own explicit font-size in rem, which only tracks the
   root element's size, not whatever font-size body happens to have. */
html.a11y-text-sm{ font-size:14px; }
html.a11y-text-md{ font-size:16px; }
html.a11y-text-lg{ font-size:19px; }
body.a11y-high-contrast{ --cream:#FFFFFF; --card:#F0F0F0; --ink:#000000; --sub:#222222; --terracotta:#A8391F; }
body.a11y-dyslexia-font, body.a11y-dyslexia-font h1, body.a11y-dyslexia-font h2, body.a11y-dyslexia-font h3{
  font-family: 'Comic Sans MS', 'Atkinson Hyperlegible', sans-serif;
}

/* ---- Doorway arch (shared base for hero + small doors) ----
   Photographic now, not a flat color fill: a moss-to-dark wash
   (multiply) sits under the door photo so every door reads as "this
   site's doors" rather than a random stock image, plus a warm glow
   (screen) near the base. */
.door-arch{
  position:relative;overflow:hidden;
  border-radius:50% 50% 6% 6% / 26% 26% 3% 3%;
  box-shadow:0 8px 18px rgba(31,27,20,0.26), inset 0 0 0 3px rgba(0,0,0,0.15);
}
/* Photo lives on its own ::before layer (not the element's own
   background) specifically so it can be mirrored independently of real
   children like .door-carved-stack below - mirroring .door-arch itself
   would also flip that seal's text backwards. scaleX(-1) corrects the
   photo's hinges to the left side, matching .hero-door/.mini-door's
   rotateY(...) transform-origin:left, which is the side these open
   from - the animation direction was the one worth keeping, so the
   image is what gets flipped to match it, not the other way around. */
.door-arch::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(160deg, rgba(107,122,94,0.38), rgba(107,122,94,0.12) 55%, rgba(0,0,0,0.28) 100%),
    var(--door-photo);
  background-size:cover;
  background-position:center;
  background-blend-mode:multiply, normal;
  transform:scaleX(-1);
}
.door-arch::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 105%, var(--gold-glow), rgba(224,158,90,0) 65%);mix-blend-mode:screen;}

/* Carved "Click / to / Enter" signage - hero door only (.mini-door doors
   on the doors.html page share .door-arch but never get this markup).
   Curved arc text (an earlier version, via SVG textPath) turned out to
   be the legibility problem itself - small curved glyphs are harder to
   read than straight ones no matter the font size - so this is three
   plain, larger, centered lines instead: Click near the top, "to" dead
   center, Enter near the bottom. Positions clear the door's own arched
   top (~26% per .door-arch's border-radius) and its much slighter
   bottom curve (~3-6%), so nothing sits in the curved/narrower part of
   the shape. Same carved dual-tone treatment as the rest of the site's
   door signage: near-transparent ink fill so the photo shows through,
   a light offset up-left plus a dark offset down-right so it reads as
   chiseled rather than printed on top. z-index lifts it above
   .door-arch::after's gold glow, which paints with no z-index of its own. */
.hero-door .door-carved-stack{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;
}
.door-carved-line{
  position:absolute;left:50%;
  transform:translateX(-50%);
  font-family:'Fraunces',serif;font-variant:small-caps;font-weight:500;
  white-space:nowrap;
  color:rgba(0,0,0,0.62);
  text-shadow:0 1px 0 rgba(255,235,205,0.45), 0 2px 3px rgba(0,0,0,0.22);
}
.door-carved-top{ top:30%; font-size:19px; letter-spacing:0.16em; }
.door-carved-mid{ top:50%; transform:translate(-50%,-50%); font-size:16px; letter-spacing:0.12em; }
/* Pulled up from bottom:16% - aiming for just under the doorknob rather
   than pinned near the bottom edge. Best-effort without seeing the
   actual photo - nudge further if it's still not landing right. */
.door-carved-bottom{ bottom:34%; font-size:19px; letter-spacing:0.16em; }

/* ---- Hero ----
   Full-bleed, blurred/dimmed version of the same door photo sits behind
   the copy, so the hero and the doors below read as one continuous
   scene instead of two different treatments. */
.hero-section{position:relative;overflow:hidden;padding:20px 0 10px;}
/* On its own splash page (index.html), the hero is the whole page, not
   one section among several - let it fill the viewport instead of
   sitting at the old small in-page-hero size. */
/* min-height:100vh alone can run taller than what's actually visible on
   mobile (100vh includes the space behind a browser's address bar) -
   100dvh accounts for that. Declared second/as an override: browsers
   without dvh support just keep the vh fallback above it. */
.hero-section-splash{min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:40px 0;}
.hero-section-splash .hero{width:100%;}

/* ---- doors.html page background ----
   Same door photo as the hero, mirrored (faces the other way - reads as
   "the other side of the door" now that you've come through it) and
   kept as a soft, fixed, low-opacity presence rather than a bold dark
   takeover: this page carries a lot of body text sitting directly on
   the page background (not inside opaque cards), so a heavy dim here
   would have meant rewriting text colors throughout instead of just
   adding a background. */
.doors-bg{
  position:fixed;inset:0;z-index:-1;
  background-image:var(--door-photo);
  background-size:cover;
  background-position:center 35%;
  transform:scaleX(-1) scale(1.06);
  filter:saturate(0.8);
}
.doors-bg::after{content:"";position:absolute;inset:0;background:rgba(var(--cream-rgb), 0.45);}

.logo-link{text-decoration:none;color:inherit;}

/* Doors page's own "first screen": heading, doors, and the CTA all fit
   one viewport (nav's own 68px height accounted for), with the button
   centered as one group rather than spread top-to-bottom with a dead
   gap in the middle - rest of the page (how it works, services, etc.)
   begins right after. */
.doors-hero{
  min-height:calc(100vh - 68px);
  min-height:calc(100dvh - 68px);
  display:flex;flex-direction:column;
  justify-content:center;
  padding-top:40px;padding-bottom:32px;
}

/* Big, punchy page heading - independent of .section-title (which stays
   a small uppercase label for every other section on this page). A hard-
   edged chip fought the photo instead of sitting naturally on it - this
   is a soft, feathered "airbrush" swath (radial gradient, blurred, no
   visible boundary) bleeding out from behind the text via ::before,
   reading as the photo itself lightening behind the words rather than a
   UI panel dropped on top. */
.doors-heading{
  position:relative;isolation:isolate;
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(2rem,5vw,3.25rem);line-height:1.15;
  color:var(--ink);margin-bottom:14px;
}
.doors-heading::before{
  content:"";position:absolute;z-index:-1;
  inset:-22px -36px;
  background:radial-gradient(ellipse 62% 70% at center, rgba(var(--cream-rgb),0.92) 0%, rgba(var(--cream-rgb),0.6) 45%, rgba(var(--cream-rgb),0) 100%);
  filter:blur(10px);
  pointer-events:none;
}
.hero-bg{
  position:fixed;inset:0;z-index:-1;
  background-image:var(--door-photo);
  background-size:cover;background-position:center 30%;
  filter:blur(2px) brightness(0.55) saturate(0.9);
  transform:scale(1.06);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(var(--ink-rgb),0.72) 0%, rgba(var(--ink-rgb),0.42) 45%, rgba(var(--ink-rgb),0.15) 100%);
}
.hero{position:relative;display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;padding:60px 0;}
.hero .eyebrow{color:#E8B98A;}
.hero h1{color:#fff;font-size:clamp(1.875rem,4vw,2.75rem);line-height:1.14;max-width:12ch;text-shadow:0 2px 12px rgba(0,0,0,0.4);}
.hero-sub{margin-top:16px;font-size:1.0625rem;max-width:42ch;color:var(--card);}
.hero-ctas{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn-primary{background:var(--terracotta);color:#fff;font-weight:700;font-size:0.9375rem;padding:14px 26px;border-radius:26px;text-decoration:none;display:inline-block;border:none;cursor:pointer;font-family:inherit;}
.hero-ctas .btn-secondary{font-weight:700;font-size:0.9375rem;padding:14px 8px;text-decoration:none;color:#fff;border-bottom:2px solid rgba(255,255,255,0.6);}

.hero-door-wrap{width:220px;height:340px;margin:0 auto;position:relative;perspective:700px;}
.hero-door-light{position:absolute;inset:-8%;border-radius:50% 50% 8% 8% / 22% 22% 4% 4%;background:radial-gradient(circle at 50% 55%, var(--gold-glow) 0%, rgba(224,158,90,0) 72%);opacity:0;transition:opacity 0.4s ease 0.1s;filter:blur(8px);}
.hero-door-wrap.open .hero-door-light{opacity:1;}
.hero-door{width:100%;height:100%;cursor:pointer;transform-origin:left center;transition:transform 0.6s cubic-bezier(.5,0,.3,1);}
.hero-door-wrap.open .hero-door{transform:rotateY(-100deg);}
.hero-door:hover{filter:brightness(1.05);}

@media (max-width:700px){
  .hero{grid-template-columns:1fr;text-align:center;}
  .hero h1{max-width:none;margin:0 auto;}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .hero-ctas{justify-content:center;}
}

@media (prefers-reduced-motion: reduce){
  .hero-door, .hero-door-light{transition:none;}
}

/* ---- Which door is yours ---- */
/* Same big, punchy treatment as .doors-heading - these are page-level
   section titles (How it works / What's covered / Why me / Start here),
   not small labels, so they read with the same weight the doors
   heading does rather than a tucked-away uppercase tag. */
.section-title{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(1.5rem,3.5vw,2.25rem);line-height:1.2;
  margin:0 0 12px;color:var(--ink);
}
.section-intro{color:var(--sub);font-size:0.875rem;margin-bottom:20px;max-width:52ch;}

/* Same airbrush-swath treatment as .doors-heading, for the rest of the
   bare text on this page (not inside an opaque card). */
.section-title, .section-intro, .why-me-copy{
  position:relative;isolation:isolate;
}
.section-intro::before{
  content:"";position:absolute;z-index:-1;
  inset:-14px -22px;
  background:radial-gradient(ellipse 62% 70% at center, rgba(var(--cream-rgb),0.9) 0%, rgba(var(--cream-rgb),0.55) 45%, rgba(var(--cream-rgb),0) 100%);
  filter:blur(8px);
  pointer-events:none;
}
/* Why-me runs three full paragraphs of left-aligned copy - a centered
   ellipse left the left edge (where every line starts) under-covered.
   Extra left inset plus shifting the gradient's center leftward keeps
   the haze strong exactly where the text actually begins. */
.why-me-copy::before{
  content:"";position:absolute;z-index:-1;
  inset:-14px -22px -14px -40px;
  background:radial-gradient(ellipse 70% 75% at 38% 50%, rgba(var(--cream-rgb),0.92) 0%, rgba(var(--cream-rgb),0.6) 45%, rgba(var(--cream-rgb),0) 100%);
  filter:blur(8px);
  pointer-events:none;
}
.section-title::before{
  content:"";position:absolute;z-index:-1;
  inset:-22px -36px;
  background:radial-gradient(ellipse 62% 70% at center, rgba(var(--cream-rgb),0.92) 0%, rgba(var(--cream-rgb),0.6) 45%, rgba(var(--cream-rgb),0) 100%);
  filter:blur(10px);
  pointer-events:none;
}
.doors-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:130px;}
.door-item{
  background:var(--card);border-radius:14px;padding:18px 12px 16px;text-align:center;
  opacity:0;transform:translateY(28px);
  transition:opacity 0.6s ease, transform 0.6s ease;
  position:relative;cursor:pointer;
}
.door-item.revealed{opacity:1;transform:translateY(0);}

.door-frame{width:100%;max-width:150px;height:230px;margin:0 auto 12px;position:relative;perspective:700px;}
.door-light{position:absolute;inset:-6%;border-radius:50% 50% 8% 8% / 22% 22% 4% 4%;background:radial-gradient(circle at 50% 55%, var(--gold-glow) 0%, rgba(224,158,90,0) 72%);opacity:0;transition:opacity 0.4s ease 0.15s;filter:blur(6px);}
.door-item.open .door-light{opacity:1;}

/* What's behind the door, not what's under it: a fresh, randomly-picked
   line of encouragement (js/doors.js) revealed in the same physical
   space the door itself occupies, sitting in the doorway between
   .door-light (the glow) and .mini-door (the door leaf, in front,
   swinging away on open) so it reads as something you're seeing
   *through* the open doorway. Same airy treatment as the hero headline
   over its photo - light-weight italic serif, soft white, gentle drop
   shadow - instead of small bold ink, now that it has a warm-to-dark
   backdrop of its own to actually float on. */
.door-behind{
  position:absolute;inset:10%;isolation:isolate;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;
  font-size:clamp(0.78125rem,4vw,0.9375rem);line-height:1.3;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,0.45), 0 0 14px rgba(0,0,0,0.25);
  opacity:0;transition:opacity 0.35s ease 0.3s;
  padding:7%;
}
/* The glow itself, separated out as a blurred, bled-out pseudo-element
   rather than a bordered shape on .door-behind directly - no defined
   edge for the eye to catch, just color fading out into the doorway.
   Rainbow conic-gradient for the color, matching the door-swoop's
   Smolder Pulse effect elsewhere on the site - the soft falloff (same
   0%/45%/72%/100% stops the old single-hue version used) comes from a
   mask instead of the gradient's own alpha, so it keeps the identical
   "no hard edge" shape while the color underneath is now a full
   spectrum instead of one ember tone. */
.door-behind::before{
  content:"";position:absolute;z-index:-1;
  inset:-24% -34%;
  background:conic-gradient(from 0deg, #ff6b6b, #ffd166, #8ee06c, #5ec8e6, #7d8bf7, #d68af0, #ff6b6b);
  -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.18) 72%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.18) 72%, rgba(0,0,0,0) 100%);
  filter:blur(11px);
  pointer-events:none;
}
.door-item.open .door-behind{opacity:1;}

.mini-door{width:100%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 0.5s cubic-bezier(.5,0,.3,1);}
.door-item.open .mini-door{transform:rotateY(-110deg);}

.door-item .label{font-weight:700;font-size:0.8125rem;line-height:1.3;}

/* The reveal text used to live squeezed inside the same card as the
   door (position:absolute but still forcing the card taller to make
   room), which read as cramped and low-contrast. It now floats in its
   own speech-bubble card just below - top:100% anchors it to the
   bottom edge of .door-item without adding to that element's own box
   height, so the card stays sized to just the door + label at rest. */
.door-bubble{
  position:absolute;top:100%;left:50%;
  width:215px;margin-top:10px;
  transform:translateX(-50%) translateY(-8px) scale(0.92);
  background:var(--cream);border:2.5px solid var(--terracotta);border-radius:22px;
  padding:16px 17px 14px;font-size:0.875rem;line-height:1.5;color:var(--ink);
  opacity:0;pointer-events:none;
  transition:opacity 0.3s ease 0.25s, transform 0.3s ease 0.25s;
  box-shadow:0 10px 22px rgba(31,27,20,0.2);
  z-index:5;
}
.door-bubble::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:11px solid var(--terracotta);}
.door-bubble::after{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:9px solid var(--cream);}
.door-item.open .door-bubble{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto;}

.doors-cta-row{text-align:center;margin-top:18px;}

@media (max-width:700px){
  .doors-row{grid-template-columns:repeat(2,1fr);}
  /* Fixed 200px was sized for the desktop 4-across layout, where each
     column has room to spare. In the mobile 2-column grid a column is
     only ~150-160px wide, so a 200px bubble centered on it bleeds past
     the viewport edge for the outer doors - narrow it to fit. */
  .door-bubble{width:165px;font-size:0.78125rem;padding:13px 13px 11px;}
}

@media (prefers-reduced-motion: reduce){
  .door-item{transition:none;opacity:1;transform:none;}
  .mini-door{transition:none;}
  .door-bubble{transition:none;}
  .door-behind{transition:none;}
}

/* ---- Door-open swoop: "Smolder Pulse" ----
   A dim glow (this element) and a swarm of embers (#swoop-particles,
   drawn on canvas by js/hero-swoop.js / js/doors-swoop.js using the pure
   math in js/door-swoop-pure.js) both travel outward from the clicked
   door's on-screen position, arriving together instead of the old
   clip-path circle that just wiped the screen instantly. Background and
   opacity are set inline by JS per-fire (position depends on the click),
   so this rule only carries the resting/shared state. */
#door-flash{
  position:fixed;inset:0;z-index:998;pointer-events:none;
  opacity:0;
}
#swoop-particles{
  position:fixed;inset:0;z-index:999;pointer-events:none;
}
/* Rainbow recolor: same gradient shape as the gold default, just swept
   through hue via filter - one full rotation over the swoop's own
   duration (animation-duration set inline in JS to match). */
@keyframes door-flash-hue-pulse{
  0%{ filter:hue-rotate(0deg); }
  100%{ filter:hue-rotate(360deg); }
}
#door-flash.rainbow{
  animation-name:door-flash-hue-pulse;
  animation-timing-function:linear;
  animation-iteration-count:1;
}
/* On doors.html only: the page loads already fully covered by this same
   flash (continuing the hero page's swoosh across the navigation)
   instead of starting hidden - js/doors-swoop.js fades it away on load.
   No click position to anchor to here, so this is a plain centered
   cover rather than the per-fire JS-computed gradient. */
#door-flash.page-enter-cover{
  opacity:1;
  background:radial-gradient(circle at 50% 50%, rgba(var(--cream-rgb),0.96) 0%, rgba(var(--gold-rgb),0.55) 55%, rgba(var(--gold-rgb),0.9) 100%);
}
@media (prefers-reduced-motion: reduce){
  #door-flash.page-enter-cover{opacity:0;}
  #door-flash.rainbow{animation:none;}
}

/* ---- How it works ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(43,38,32,0.14);border-radius:8px;overflow:hidden;margin-top:18px;margin-bottom:40px;}
.step{background:var(--cream);padding:24px 22px;}
.step-num{font-family:'Fraunces',serif;font-size:1.375rem;color:var(--terracotta);margin-bottom:8px;}
.step h3{font-size:1rem;margin-bottom:8px;}
.step p{font-size:0.84375rem;color:var(--sub);line-height:1.5;}

@media (max-width:700px){
  .steps{grid-template-columns:1fr;}
}

/* ---- Services & covered hours ---- */
.services-table{width:100%;border-collapse:collapse;margin:20px 0 30px;font-size:0.90625rem;position:relative;isolation:isolate;}
.services-table::before{
  content:"";position:absolute;z-index:-1;
  inset:-18px -28px;
  background:radial-gradient(ellipse 65% 70% at center, rgba(var(--cream-rgb),0.9) 0%, rgba(var(--cream-rgb),0.55) 45%, rgba(var(--cream-rgb),0) 100%);
  filter:blur(9px);
  pointer-events:none;
}
.services-table th, .services-table td{text-align:left;padding:12px 14px;border-bottom:1px solid rgba(43,38,32,0.14);}
.services-table th{font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--sub);font-weight:700;}
.services-alt{background:var(--card);border-radius:12px;padding:22px;margin-bottom:40px;}
.services-alt h3{font-size:1rem;margin-bottom:8px;}
.services-alt p{font-size:0.875rem;color:var(--sub);}
.services-alt a{color:var(--terracotta);font-weight:700;}

/* ---- Why me ---- */
.why-me-copy{font-size:1rem;line-height:1.7;color:var(--sub);max-width:62ch;margin-bottom:40px;}
.why-me-copy p{margin-bottom:14px;}
.why-me-copy p:last-child{margin-bottom:0;}

/* ---- Start here (intake form) ---- */
.intake-box{background:var(--card);border-radius:16px;padding:36px;max-width:560px;margin:20px auto 60px;}
/* Honeypot: a real form field a scripted bot will fill and a sighted
   human never sees. Off-screen (not display:none/visibility:hidden,
   which some bots skip filling) plus aria-hidden so screen readers
   skip it too, rather than presenting an unlabeled input. */
.honeypot-field{position:absolute;left:-9999px;}
.intake-field{margin-bottom:16px;text-align:left;}
.intake-field label{display:block;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--sub);margin-bottom:6px;}
.intake-field input, .intake-field textarea{width:100%;font-family:inherit;font-size:0.9375rem;padding:11px 13px;border:1.5px solid rgba(43,38,32,0.25);border-radius:8px;background:var(--cream);color:var(--ink);}
.intake-field textarea{min-height:90px;resize:vertical;}
.intake-box button[type="submit"]{width:100%;margin-top:4px;}
.intake-status{margin-top:14px;font-size:0.84375rem;color:var(--sub);}

/* ---- Footer ----
   Same treatment as the nav: transparent bar over the page photo, each
   bare text/link run gets its own airbrush-swath glow instead of a
   solid bar behind the whole footer. */
.site-footer{padding:18px 0;font-size:0.8125rem;color:var(--sub);}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;}
.footer-inner span, .footer-inner a{position:relative;isolation:isolate;}
.footer-inner span::before, .footer-inner a::before{
  content:"";position:absolute;z-index:-1;
  inset:-8px -14px;
  background:radial-gradient(ellipse at center, rgba(var(--cream-rgb),0.9) 0%, rgba(var(--cream-rgb),0.5) 50%, rgba(var(--cream-rgb),0) 100%);
  filter:blur(7px);
  pointer-events:none;
}
.footer-inner a{color:var(--terracotta);font-weight:700;}