/* ============================================================
   Feed Love Now — rebuilt off Wix
   Palette + metrics measured from the live Wix render at 1440px.
   ============================================================ */
:root{
  --navy:#0e2e47;      /* rgb(14,46,71)   body copy, brand */
  --ink:#0d2130;       /* rgb(13,33,48)   darker copy */
  --nav:#555f63;       /* rgb(85,95,99)   nav idle */
  --nav-on:#808f95;    /* rgb(128,143,149) nav current */
  --coral:#fc8b8b;     /* rgb(252,139,139) accents */
  --cocoa:#624c40;     /* rgb(98,76,64)   testimonial cards */
  --blush:#efd9ce;     /* rgb(239,217,206) */
  --cream:#f6ebe4;     /* rgb(246,235,228) */
  --wine:#8b0000;      /* rgb(139,0,0)    retreat accent */
  --steel:#9db1bf;
  --wixblue:#00a6ff;   /* Wix default form-label blue, kept as-is */

  /* One face, everywhere. Epilogue is the real Wix face and is on Google
     Fonts, so it is exact — it already set the hero quote and the body copy.
     It now also replaces Jost and Nunito, which were only stand-ins for
     licensed Futura LT and Bree and were never the true faces anyway. */
  --f:"Epilogue",-apple-system,"Helvetica Neue",Arial,sans-serif;

  --stage:1440px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--f);color:var(--navy);
  background:#cfe0e4;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ---- fixed site-background video (shows through header + footer) ---- */
.site-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#cfe0e4}
.site-bg video,.site-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.2) sepia(.3) brightness(1.1) contrast(.92)}
/* the home page ends on the hero's sand, ungraded; its footer line goes navy to read on it */
.site-bg.sand{background:#e6ded6}
.site-bg.sand video{filter:none}

/* ---- stage: the 1440 design grid ---- */
.stage{width:min(100%,var(--stage));margin-inline:auto;position:relative}

/* ---- shared header / nav ---- */
/* A calm, consistent frame for every page. Keep the supplied brand lockup
   and give the navigation its own breathing room at every viewport size. */
.hdr{position:relative;z-index:30;background:#f7f4ee;border-bottom:1px solid rgba(65,60,51,.1)}
body.p-home{background:#f3f4f1}
.hdr .stage{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:20px clamp(24px,4vw,64px)}
.hdr .brand{display:block;flex:0 0 auto;height:56px}
.hdr .brand img{height:100%;width:auto;display:block}
.hdr .nav{display:flex;align-items:center;gap:clamp(28px,3.5vw,56px);list-style:none;margin:0;padding:0}
.hdr .nav li{width:auto}
.hdr .nav a{position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:4px 2px;font-family:var(--f);font-size:15px;font-weight:400;line-height:1.4;letter-spacing:.02em;color:#625e57;text-decoration:none;white-space:nowrap;transition:color .2s}
.hdr .nav a:hover,.hdr .nav a[aria-current="page"]{color:#37352f}
.hdr .nav a::after{content:"";position:absolute;left:2px;right:2px;bottom:4px;height:1px;background:currentColor;opacity:0;transition:opacity .2s}
.hdr .nav a[aria-current="page"]::after{opacity:.65}
.hdr .nav a:hover::after{opacity:.35}
.hdr .nav .book a{color:#37352f}
.hdr a:focus-visible{outline:2px solid #37352f;outline-offset:5px;border-radius:2px}
@media(max-width:900px){
  .hdr .stage{flex-direction:column;gap:16px;padding:20px 20px 12px}
  .hdr .brand{height:50px}
  .hdr .nav{align-self:stretch;justify-content:space-between;gap:12px;max-width:600px;width:100%;margin-inline:auto}
  .hdr .nav a{letter-spacing:0;min-height:44px;padding-inline:4px}
}
@media(max-width:700px){
  .hdr .nav{gap:clamp(4px,1vw,10px);max-width:440px}
  .hdr .nav a{font-size:clamp(11px,3.1vw,13px);padding-inline:0}
}
@media(max-width:359px){
  .hdr .stage{padding-inline:16px}
  .hdr .nav{gap:4px}
  .hdr .nav a{font-size:11px}
}

/* ---- form furniture, shared by all three forms ---- */
/* The honeypot must stay in the DOM for bots and out of sight for people.
   Off-canvas rather than display:none — some bots skip hidden inputs. */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}
.form-note{margin:14px 0 0;font-family:var(--f);font-weight:300;font-size:14px;
  line-height:1.5;color:var(--cocoa);min-height:18px}
.form-note a{color:var(--wine)}

/* ---- generic full-bleed media section ---- */
.band{position:relative;overflow:hidden}
.band > .bg{position:absolute;inset:0;z-index:0}
.band > .bg video,.band > .bg img{width:100%;height:100%;object-fit:cover;display:block}
.band > .stage{position:relative;z-index:1}

/* ---- fixed instagram rail ---- */
.ig-rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:25}
.ig-rail img{width:25px;height:25px}

/* ============================ HOME ============================ */
/* ---- HERO (editorial pass, 2026-09-06) ------------------------------
   The page opens in Sherine's voice: a serif title, one plain sentence with
   no tracking, the sans "who" line as a label, and Begin as a quiet link
   to /begin. Tracking is a label device on this site now, never a
   paragraph one. */
#hero{height:811px}
#hero .stage{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 24px 40px}
#hero .title{margin:0;max-width:900px;font-family:var(--serif);font-weight:400;font-size:64px;line-height:1.08;
  letter-spacing:-.015em;color:var(--navy);font-variation-settings:'opsz' 72;text-wrap:balance}
#hero .lead{margin:28px 0 0;max-width:620px;font-family:var(--serif);font-weight:400;font-size:24px;
  line-height:1.5;color:var(--navy);text-wrap:balance}
#hero .who{margin:34px 0 0;font-family:var(--f);font-weight:400;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(14,46,71,.78)}
#hero .begin{margin:48px 0 0;display:inline-flex;align-items:baseline;gap:12px;text-decoration:none;
  color:var(--navy);font-family:var(--f);font-weight:400;font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  padding-bottom:8px;border-bottom:1px solid rgba(14,46,71,.28);transition:border-color .3s}
#hero .begin i{font-style:normal;letter-spacing:0;transition:transform .3s}
#hero .begin:hover{border-bottom-color:var(--navy)}
#hero .begin:hover i{transform:translateX(4px)}
#hero .begin:focus-visible{outline:2px solid var(--navy);outline-offset:6px;border-radius:4px}

/* ---- the arrow link the whole page uses: a tracked label and an arrow
   that steps forward on hover. Labels may be tracked; sentences are not. */
.go{display:inline-flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--navy);
  font-family:var(--f);font-weight:400;font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  padding-bottom:8px;border-bottom:1px solid rgba(14,46,71,.3);transition:border-color .3s}
.go i{font-style:normal;letter-spacing:0;transition:transform .3s}
.go:hover{border-bottom-color:var(--navy)}
.go:hover i{transform:translateX(4px)}
.go:focus-visible{outline:2px solid var(--navy);outline-offset:6px;border-radius:4px}

/* ---- INTRODUCTION: original Epilogue face, beside the dune film ---- */
#intro{display:grid;grid-template-columns:44% 56%;background:var(--cream)}
#intro > .bg{position:relative;inset:auto;min-height:440px}
#intro .stage{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:64px clamp(32px,5vw,80px);text-align:left}
#intro .title{margin:0;font-family:var(--f);font-weight:400;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(14,46,71,.8)}
#intro .copy{max-width:580px;margin:28px 0 0}
#intro .copy p{margin:0 0 18px;font-family:var(--f);font-weight:400;font-size:23px;line-height:1.65;
  letter-spacing:.06em;color:var(--navy);text-wrap:pretty}
#intro .copy p:last-child{margin-bottom:0;font-size:16px;letter-spacing:.04em;line-height:1.7}
#intro .go{margin-top:30px}

/* ---- SHERINE: a natural portrait and a short introduction ---- */
#about{background:#f7f4ee;padding:80px 24px}
#about .about-in{width:min(100%,1080px);margin:0 auto;display:grid;grid-template-columns:420px 1fr;column-gap:88px;align-items:center}
#about .portrait{margin:0}
#about .portrait img{display:block;width:100%;height:auto;border-radius:6px}
#about h2{margin:0 0 30px;font-family:var(--serif);font-weight:400;font-size:48px;line-height:1.08;
  letter-spacing:-.01em;color:var(--navy);font-variation-settings:'opsz' 48}
#about .about-copy > p{margin:0 0 20px;max-width:560px;font-family:var(--serif);font-size:20px;line-height:1.62;color:var(--navy)}
#about .sig{margin:34px 0 0;font-family:var(--f);font-weight:400;font-size:15px;line-height:1.6;color:var(--navy)}
#about .sig span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(14,46,71,.7)}
#about .go{margin-top:34px}

/* ---- THE NAME, GIVEN MEANING: minimal, lots of room ---- */
/* Sherine (2026-09-07): "a more interesting background, less wordy" — her
   misty forest, a soft dark veil, ivory type. Measured: the veil puts the
   brightest sky patch under the type at ~7:1 against #f6f1e8. */
#nurture{background:#2e3a33;padding:112px 24px;text-align:center;color:#f6f1e8}
#nurture > .bg::after{content:"";position:absolute;inset:0;background:rgba(18,28,22,.42)}
#nurture .nurture-in{position:relative;z-index:1;width:min(100%,720px);margin:0 auto}
#nurture h2{margin:0;font-family:var(--serif);font-weight:400;font-size:52px;line-height:1.1;
  letter-spacing:-.015em;color:#f6f1e8;font-variation-settings:'opsz' 60;text-shadow:0 2px 24px rgba(0,0,0,.35)}
#nurture .ask{margin:26px 0 0;font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.4;color:#f6f1e8;text-shadow:0 1px 16px rgba(0,0,0,.4)}

#nurture .go{margin-top:32px;color:#f6f1e8;border-bottom-color:rgba(246,241,232,.5);font-size:11px;letter-spacing:.24em}

/* Wix drew a coral WHAT PEOPLE SAY here and then hid it behind the cards.
   Sherine's title (2026-09-03): "Client Reflections", in the same voice as
   the quote deck's heading — Newsreader, a hairline, a light tracked line.
   The cards move down 134px to make the room; the band grows to match. */
#testimonials{padding:72px 24px;background:#e6e9eb}
#testimonials .refl-head{position:relative;margin:0 0 36px;text-align:center;z-index:1}
#testimonials .refl-head h2{margin:0;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.15;
  letter-spacing:-.01em;color:var(--navy);font-variation-settings:'opsz' 40}
#testimonials .refl-head .rule{display:block;width:36px;height:1px;margin:16px auto 14px;background:var(--navy);opacity:.35}
#testimonials .refl-head p{margin:0;font-family:var(--f);font-weight:300;font-size:14px;line-height:1.5;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);opacity:.7}
/* Editorial pass (2026-09-06): the cocoa slabs and coral marks were the
   one heavy thing on an ethereal page. Warm ivory cards with a fine border,
   the quotation mark in sage, the words in the serif — and room to breathe. */
#testimonials .cards{position:relative;width:min(100%,1080px);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;z-index:1}
#testimonials .card{background:rgba(251,248,243,.92);border:1px solid rgba(14,46,71,.16);margin:0;
  padding:56px 36px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
#testimonials .card p{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:21px;line-height:1.5;color:var(--navy);text-wrap:balance;font-variation-settings:'opsz' 24}
#testimonials .card .mark{display:block;order:-1;height:.5em;margin:0 0 22px;
  font-family:Georgia,"Times New Roman",serif;font-style:normal;font-weight:700;font-size:56px;line-height:.6;
  color:var(--sage)}

/* The six exported Instagram squares were six white slabs on a beautiful dune.
   The quotes are now set as type directly on the sand — navy on this photo
   measures 5.9:1 at its darkest point, so it needs no plate behind it. */
/* The footprints live on their own transparent layer over an inpainted,
   footprint-free dune, so they can be walked in as the section arrives.
   Same object-fit as the sand beneath it, so the two stay registered. */
#gallery .prints{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;
  /* Default is FULLY WALKED: with no JS the trail is simply in the photograph,
     as it always was. The inline classifier below hands control to the script
     only once we know the script will run, so there is no flash of prints. */
  --walk:130%;
  /* stops must stay monotonic and non-negative: a gradient whose stops all
     collapse to 0% degenerates and stops masking anything at all */
  -webkit-mask-image:linear-gradient(to top right,#000 0%,
      #000 max(0%,calc(var(--walk) - 13%)),transparent max(0.1%,var(--walk)));
          mask-image:linear-gradient(to top right,#000 0%,
      #000 max(0%,calc(var(--walk) - 13%)),transparent max(0.1%,var(--walk)));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
html.js #gallery .prints{--walk:0%}
#gallery .prints.all{--walk:130%}
@media (prefers-reduced-motion:reduce){html.js #gallery .prints{--walk:130%}}

#gallery{padding:132px 0 118px}
/* Sherine's headline over the dune quotes, in the voice of the other
   section titles (Newsreader, a hairline under it). */
#gallery .gal-head{margin:0 auto 54px;text-align:center;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.15;
  letter-spacing:-.01em;color:var(--navy);font-variation-settings:'opsz' 40}
#gallery .gal-head::after{content:"";display:block;width:36px;height:1px;margin:18px auto 0;background:var(--navy);opacity:.35}
/* Editorial pass (2026-09-06): the six borrowed quotes are gone; the
   section speaks to the visitor in the serif, one thought a line, and
   ends on Begin. Navy on the dune measured 5.9:1 at its darkest. */
#gallery .why{width:min(100%,720px);margin:0 auto;text-align:center}
#gallery .why p{margin:0;font-family:var(--serif);font-weight:400;color:var(--navy);
  text-shadow:0 1px 3px rgba(255,246,232,.6);text-wrap:balance}
#gallery .why .beat{font-size:30px;line-height:1.35;font-variation-settings:'opsz' 32}
#gallery .why .beat + .beat{margin-top:14px}
#gallery .why .body{margin:44px auto;max-width:600px;font-size:20px;line-height:1.65;color:rgba(14,46,71,.92)}
#gallery .why .em{font-style:italic}
#gallery .why .go{margin-top:54px;text-shadow:0 1px 3px rgba(255,246,232,.6)}

/* ---- a moment of perspective: the quote deck over the lake ------------
   Measured off the design comp at 1536 wide: photo band 545 tall, horizon
   at 57%, centre card 666x365 with its top at 133, side cards 300 wide
   turned 28 degrees into the scene, arrows 54px at the edges, dots 27px
   under the card. The photograph is the background of .lake; water.js
   draws the same photograph onto a canvas over it with the water moving. */
:root{--serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sage:#a8b49c;--fern:#48724f;--peach:#e1a481;--moss:#728767;--card:#fbf8f5}
/* The whole section — board, lake, foot — stands on one ground, and under
   a mood that ground takes the mood's pale tint (--ground, below), so the
   board and the lake read as one scene rather than a white shelf over a
   coloured band. */
#contact-band{height:auto;padding:0;position:relative;background:var(--ground,#fdfcfb);transition:background 1.4s ease}
#contact-band .lake{position:relative;height:545px;overflow:hidden;scroll-margin-top:8px;
  background:#e3e2e1 center 62%/cover no-repeat}
#contact-band .lake canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
#contact-band .lake > .stage{position:relative;z-index:1;height:100%}

#contact-band .lake-head{text-align:center;padding-top:34px}
/* The heading's ink follows the lake: dark on the pale lakes, and under a
   dark lake (Heavy) the mood's palette turns it light — see --lake-ink. */
#contact-band .lake-head h2{margin:0;font-family:var(--serif);font-weight:400;
  font-size:40px;line-height:1.15;letter-spacing:-.01em;color:var(--lake-ink,#22332f);font-variation-settings:'opsz' 40;
  transition:color 1.4s ease}
#contact-band .lake-head p{margin:8px 0 0;font-family:var(--f);font-weight:400;font-size:17px;
  line-height:1.4;color:var(--lake-ink-soft,rgba(34,51,47,.72));transition:color 1.4s ease}

/* ---- the deck ---- */
/* one card (the home page keeps a single outside voice): nothing to turn */
#contact-band .deck.single .deck-arrow,#contact-band .deck.single .deck-dots{display:none}
#contact-band .deck{position:relative;height:calc(var(--card-h) + 45px);margin-top:20px;--card-h:365px}
#contact-band .deck-track{position:relative;height:var(--card-h);list-style:none;margin:0;padding:0;
  perspective:1400px;perspective-origin:50% 45%;touch-action:pan-y}
#contact-band .q{position:absolute;top:0;left:50%;width:666px;height:var(--card-h);margin:0 0 0 -333px;
  transform-origin:50% 50%;
  /* the turn is unhurried: a long ease-out, so a card drifts into place */
  transition:transform 1.5s cubic-bezier(.3,.7,.15,1),width 1.5s cubic-bezier(.3,.7,.15,1),
    height 1.5s cubic-bezier(.3,.7,.15,1),margin 1.5s cubic-bezier(.3,.7,.15,1),
    opacity 1s ease,font-size 1.5s cubic-bezier(.3,.7,.15,1);
  font-size:36px;will-change:transform}
#contact-band .q .card{position:relative;width:100%;height:100%;margin:0;padding:36px 60px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border-radius:18px;background:var(--card);
  box-shadow:0 22px 56px rgba(30,42,42,.16),0 2px 6px rgba(30,42,42,.06);
  transition:background 1.5s ease,box-shadow 1.5s ease,padding 1.5s cubic-bezier(.3,.7,.15,1)}
/* The landscape inside each card. At the side it is the card; in the
   middle it fades out under the cream. A warm veil over the upper part
   keeps the type on the pale mist, as the comp has it. */
#contact-band .q .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:0;transition:opacity 1.2s ease;pointer-events:none;z-index:0}
#contact-band .q .card::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.2s ease;
  background:linear-gradient(180deg,rgba(252,248,242,.62) 0%,rgba(252,248,242,.44) 55%,rgba(252,248,242,.08) 100%)}
#contact-band .q .card > :not(.bg){position:relative;z-index:1}
#contact-band .q[data-pos="-1"] .bg,#contact-band .q[data-pos="1"] .bg,
#contact-band .q[data-pos="-2"] .bg,#contact-band .q[data-pos="2"] .bg,
#contact-band .q[data-pos="-1"] .card::before,#contact-band .q[data-pos="1"] .card::before,
#contact-band .q[data-pos="-2"] .card::before,#contact-band .q[data-pos="2"] .card::before{opacity:1}
#contact-band .q .qmark{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.55em;
  line-height:.6;height:.45em;color:var(--sage);margin-bottom:.6em;transition:opacity .4s}
#contact-band .q blockquote{margin:0;font-family:var(--serif);font-weight:400;font-size:1em;line-height:1.24;transition:color .6s;
  letter-spacing:-.005em;color:#1f2d29;text-wrap:balance;font-variation-settings:'opsz' 36;max-width:15.5em}
/* Long quotes set smaller so the card keeps its proportions; the deck also
   measures every card and grows --card-h to the tallest, so nothing can
   overflow whatever /api/quotes sends. */
#contact-band .q.long{font-size:30px}
#contact-band .q.longer{font-size:26px}
#contact-band .q .rule{display:block;width:64px;height:2px;background:var(--peach);margin:22px auto 0;border-radius:1px;
  transition:width 1.5s cubic-bezier(.3,.7,.15,1),margin 1.5s cubic-bezier(.3,.7,.15,1)}
#contact-band .q cite{display:block;margin-top:14px;font-style:normal;font-family:var(--f);font-weight:400;
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#434647}
#contact-band .q .like{width:44px;height:44px;margin:18px 0 0;padding:0;flex:none;
  border-radius:50%;border:1px solid #dad7d1;background:#fff;cursor:pointer;display:grid;place-items:center;
  color:#6f736f;transition:border-color .2s,color .2s,transform .2s}
#contact-band .q .like svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;transition:fill .2s}
#contact-band .q .like:hover{border-color:var(--peach);color:var(--peach)}
#contact-band .q .like:active{transform:scale(.92)}
#contact-band .q .like[aria-pressed="true"]{color:var(--peach);border-color:var(--peach)}
#contact-band .q .like[aria-pressed="true"] svg{fill:var(--peach)}
#contact-band .q .like:focus-visible{outline:2px solid var(--moss);outline-offset:2px}

/* positions, set by quotes.js as data-pos. -1/+1 are the tilted side cards;
   beyond that a card is parked out of view, ready to slide in. */
#contact-band .q[data-pos="-1"],#contact-band .q[data-pos="1"]{width:300px;height:338px;margin-left:-150px;
  font-size:26px!important;pointer-events:none}
#contact-band .q[data-pos="-1"] .card,#contact-band .q[data-pos="1"] .card,
#contact-band .q[data-pos="-2"] .card,#contact-band .q[data-pos="2"] .card{padding:40px 30px}
#contact-band .q[data-pos="-1"] .card,#contact-band .q[data-pos="1"] .card{padding:40px 34px;
  align-items:flex-start;text-align:left;background:#d9d6d0;
  box-shadow:0 18px 40px rgba(30,42,42,.12),inset 0 0 0 1px rgba(255,255,255,.3)}
#contact-band .q[data-pos="-1"] .qmark,#contact-band .q[data-pos="1"] .qmark,
#contact-band .q[data-pos="-1"] .like,#contact-band .q[data-pos="1"] .like{opacity:0;visibility:hidden}
#contact-band .q[data-pos="-1"] .like,#contact-band .q[data-pos="1"] .like,
#contact-band .q[data-pos="-2"] .like,#contact-band .q[data-pos="2"] .like{height:0;margin:0;border:0}
#contact-band .q[data-pos="-1"] .rule,#contact-band .q[data-pos="1"] .rule{width:0;margin-top:0}
#contact-band .q[data-pos="-1"] cite,#contact-band .q[data-pos="1"] cite{font-size:11px;margin-top:30px;color:#3f4443;letter-spacing:.2em}
#contact-band .q[data-pos="-1"] blockquote,#contact-band .q[data-pos="1"] blockquote{font-variation-settings:'opsz' 24;max-width:9.6em;line-height:1.32;text-wrap:pretty}
#contact-band .q[data-pos="0"]{transform:translate3d(0,0,0);z-index:3}
#contact-band .q[data-pos="-1"]{transform:translate3d(-463px,12px,-40px) rotateY(-28deg);z-index:2}
#contact-band .q[data-pos="1"]{transform:translate3d(463px,12px,-40px) rotateY(28deg);z-index:2}
#contact-band .q[data-pos="-2"],#contact-band .q[data-pos="2"]{width:300px;height:338px;margin-left:-150px;font-size:26px!important;
  opacity:0;pointer-events:none;z-index:1}
#contact-band .q[data-pos="-2"]{transform:translate3d(-720px,24px,-160px) rotateY(-40deg)}
#contact-band .q[data-pos="2"]{transform:translate3d(720px,24px,-160px) rotateY(40deg)}
#contact-band .q[data-pos="-2"] .card,#contact-band .q[data-pos="2"] .card{background:#d9d6d0;box-shadow:none;
  align-items:flex-start;text-align:left}
#contact-band .q[data-pos="-2"] .qmark,#contact-band .q[data-pos="2"] .qmark,
#contact-band .q[data-pos="-2"] .like,#contact-band .q[data-pos="2"] .like{opacity:0;visibility:hidden}
#contact-band .q[data-pos="-2"] .rule,#contact-band .q[data-pos="2"] .rule{width:0;margin-top:0}
#contact-band .q[data-pos="-2"] cite,#contact-band .q[data-pos="2"] cite{font-size:11px}
#contact-band .q.is-parked{visibility:hidden;transition:none}

/* measuring: centre-stage styling regardless of data-pos, so the deck learns
   its true tallest card. Placed after the position rules on purpose. */
#contact-band .q.is-measure{position:absolute;visibility:hidden;height:auto!important;width:666px!important;
  margin-left:-333px!important;transform:none!important;transition:none!important;opacity:1!important;
  pointer-events:none;font-size:36px!important}
#contact-band .q.long.is-measure{font-size:30px!important}
#contact-band .q.longer.is-measure{font-size:26px!important}
#contact-band .q.is-measure .card{height:auto;padding:36px 60px 20px;background:var(--card);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#contact-band .q.is-measure .qmark{opacity:1;visibility:hidden;height:.45em}
#contact-band .q.is-measure .like{opacity:1;visibility:hidden;height:44px;margin-top:18px;border-width:1px}
#contact-band .q.is-measure .rule{width:64px;margin-top:22px}
#contact-band .q.is-measure cite{font-size:13px;margin-top:14px}
#contact-band .q.is-measure blockquote{max-width:15.5em;font-variation-settings:'opsz' 36;line-height:1.24}

#contact-band .deck-arrow{position:absolute;top:154px;width:54px;height:54px;padding:0;border:0;border-radius:50%;
  background:#fff;color:#3a3f3d;cursor:pointer;display:grid;place-items:center;z-index:4;
  box-shadow:0 8px 24px rgba(30,42,42,.14);transition:transform .2s,box-shadow .2s}
#contact-band .deck-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#contact-band .deck-arrow:hover{transform:scale(1.06);box-shadow:0 10px 28px rgba(30,42,42,.2)}
#contact-band .deck-arrow:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
#contact-band .deck-arrow.prev{left:calc(50% - 711px)}
#contact-band .deck-arrow.next{right:calc(50% - 711px)}
#contact-band .deck-dots{position:absolute;left:0;right:0;top:calc(var(--card-h) + 23px);display:flex;justify-content:center;gap:9px}
#contact-band .deck-dots button{width:16px;height:16px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
#contact-band .deck-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:#b8b9b5;transition:background .3s,transform .3s}
#contact-band .deck-dots button[aria-selected="true"]::before{background:var(--moss);transform:scale(1.15)}
#contact-band .deck-dots button:focus-visible{outline:2px solid var(--moss);outline-offset:1px;border-radius:50%}

/* ---- above the lake: the mood board. Below it: the foot. ---- */
#contact-band .lake-above{padding:84px 30px 0;width:min(100%,1536px)}   /* the comp's row is 1476 wide at 1536: wider than the 1440 stage */
#contact-band .lake-below{padding:0 30px 96px;width:min(100%,1536px)}
#contact-band .mood-board{max-width:1476px;margin:0 auto}
#contact-band .mood-head{text-align:center}
#contact-band .mood-head .eyebrow{margin:0 0 12px;font-family:var(--f);font-weight:400;font-size:12px;letter-spacing:.34em;
  text-transform:uppercase;color:#3d4644;opacity:.75}
#contact-band .mood-head :is(h2,h3){margin:0;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.15;
  letter-spacing:-.01em;color:#22332f;font-variation-settings:'opsz' 34}
#contact-band .mood-head .lead{margin:8px 0 0;font-family:var(--f);font-weight:400;font-size:16px;line-height:1.4;color:rgba(34,51,47,.72)}
#contact-band .moods{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:30px}
#contact-band .mood{position:relative;display:block;width:100%;aspect-ratio:9/10;margin:0;padding:0;border:0;border-radius:16px;
  overflow:hidden;background:#dedbd5;cursor:pointer;text-align:left;color:#fff;isolation:isolate;
  box-shadow:0 10px 26px rgba(30,42,42,.10);transition:transform .45s cubic-bezier(.3,.7,.15,1),box-shadow .45s ease,outline-color .3s}
#contact-band .mood img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s cubic-bezier(.3,.7,.15,1),filter .8s ease}
/* the wash is the mood's own colour, deepest at the foot where the word sits */
#contact-band .mood .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,30,28,0) 30%,var(--tint,rgba(20,30,28,.55)) 100%);transition:opacity .6s}
#contact-band .mood .txt{position:absolute;left:18px;right:14px;bottom:16px;display:block;text-shadow:0 1px 10px rgba(10,20,18,.35)}
#contact-band .mood strong{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1;letter-spacing:-.005em;
  font-variation-settings:'opsz' 24}
#contact-band .mood small{display:block;margin-top:5px;font-family:var(--f);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.86}
#contact-band .mood:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(30,42,42,.16)}
#contact-band .mood:hover img{transform:scale(1.05)}
#contact-band .mood[aria-checked="true"]{transform:translateY(-4px);outline:2px solid var(--peach);outline-offset:4px;
  box-shadow:0 18px 38px rgba(30,42,42,.18)}
#contact-band .mood[aria-checked="true"] img{transform:scale(1.05)}
/* a small ring on the chosen tile, top right */
#contact-band .mood::after{content:"";position:absolute;top:12px;right:12px;width:14px;height:14px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);background:rgba(255,255,255,0);transform:scale(.6);opacity:0;transition:transform .4s,opacity .4s,background .4s}
#contact-band .mood[aria-checked="true"]::after{opacity:1;transform:scale(1);background:rgba(255,255,255,.95)}
#contact-band .mood:focus-visible{outline:2px solid var(--moss);outline-offset:4px}
/* The board and deck share one living thread. Its two ends name the input
   and result; after a choice, one bead travels from the mood to its ten
   matching reflections. It is an action, not a second explanatory card. */
#contact-band .mood-flow{width:min(100%,640px);min-height:64px;margin:22px auto 0;display:flex;align-items:center;
  justify-content:center;gap:14px;color:#50635d;color:color-mix(in srgb,var(--moss) 70%,#22332f)}
#contact-band .mood-flow-source,#contact-band .mood-flow-target{min-height:44px;padding:0;border:0;background:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--f);font-weight:400;font-size:13px;
  line-height:1.25;letter-spacing:.045em;white-space:nowrap;color:inherit}
#contact-band .mood-flow-source{cursor:pointer}
#contact-band .mood-flow-source:disabled{cursor:default;opacity:.7}
#contact-band .mood-flow-clear{font-family:Arial,sans-serif;font-size:17px;line-height:1;opacity:1;transition:transform .25s ease,opacity .25s ease}
#contact-band .mood-flow-source:disabled .mood-flow-clear{display:none}
#contact-band .mood-flow-source:not(:disabled):hover .mood-flow-clear{transform:rotate(90deg)}
#contact-band .mood-flow-line{position:relative;flex:1 1 120px;min-width:42px;max-width:260px;height:12px;color:inherit}
#contact-band .mood-flow-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:currentColor;opacity:.34;transform:translateY(-50%)}
#contact-band .mood-flow-bead{position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%;
  background:currentColor;box-shadow:0 0 0 2px var(--ground,#fdfcfb);opacity:0;transform:translateY(-50%)}
#contact-band .mood-flow.is-active .mood-flow-bead{left:calc(100% - 7px);opacity:1}
#contact-band .mood-flow.is-active.is-pulsing .mood-flow-bead{animation:mood-flow-pulse .9s cubic-bezier(.3,.7,.15,1) both}
#contact-band .mood-flow-target{text-decoration:none;cursor:pointer}
#contact-band .mood-flow-target svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
#contact-band .mood-flow-target:hover svg{transform:translateX(3px)}
#contact-band .mood-flow-source:focus-visible,#contact-band .mood-flow-target:focus-visible{outline:2px solid currentColor;
  outline-offset:3px;border-radius:3px}
@keyframes mood-flow-pulse{
  0%{left:0;opacity:.2;transform:translateY(-50%) scale(.65)}
  55%{opacity:1;transform:translateY(-50%) scale(1.2)}
  100%{left:calc(100% - 7px);opacity:1;transform:translateY(-50%) scale(1)}
}

/* The destination answers in the same language as the selected tile. */
#contact-band .lake-head h2.is-refreshing{animation:lake-title-in .55s cubic-bezier(.3,.7,.15,1) both}
@keyframes lake-title-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  #contact-band .mood-flow.is-active.is-pulsing .mood-flow-bead,#contact-band .lake-head h2.is-refreshing{animation:none}
  #contact-band .mood-flow-clear,#contact-band .mood-flow-target svg{transition:none}
}

/* ---- the moods' palettes: the whole section follows whichever is chosen.
   --ground is the section's own ground, --card the centre card, --peach
   the rule and ring, --sage the quote mark, --moss the dots and focus,
   --wash the veil over the lake, --tint the landscape grade on the side
   cards and the tile's own foot. The lake photograph itself is swapped by
   water.js from the tile's data-lake. ---- */
#contact-band .lake .wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--wash,transparent);
  mix-blend-mode:multiply;opacity:0;transition:opacity 1.4s ease,background 1.4s ease}
/* The lake is now that mood's own photograph, so the veil is a light
   unifying tint over it, not the whole of the change. */
#contact-band[data-mood] .lake .wash{opacity:.45}
#contact-band .q .card::after{content:"";position:absolute;inset:0;z-index:0;background:var(--tint,transparent);
  mix-blend-mode:multiply;opacity:0;transition:opacity 1.2s ease;pointer-events:none;border-radius:inherit}
/* Under a mood the side cards carry a real photograph, so their type goes
   white over a scrim that deepens toward the foot — the tiles' treatment.
   (The cream ::before veil sits under the photo in paint order and never
   shows; ::after is the layer that paints over it.) */
#contact-band[data-mood] .q[data-pos="-1"] .card::after,#contact-band[data-mood] .q[data-pos="1"] .card::after,
#contact-band[data-mood] .q[data-pos="-2"] .card::after,#contact-band[data-mood] .q[data-pos="2"] .card::after{opacity:1;mix-blend-mode:normal;
  background:linear-gradient(180deg,rgba(16,24,22,.22) 0%,rgba(16,24,22,.46) 55%,rgba(16,24,22,.72) 100%)}
#contact-band[data-mood] .q[data-pos="-1"] blockquote,#contact-band[data-mood] .q[data-pos="1"] blockquote,
#contact-band[data-mood] .q[data-pos="-2"] blockquote,#contact-band[data-mood] .q[data-pos="2"] blockquote{color:#fff;text-shadow:0 1px 14px rgba(8,14,12,.45)}
#contact-band[data-mood] .q[data-pos="-1"] cite,#contact-band[data-mood] .q[data-pos="1"] cite,
#contact-band[data-mood] .q[data-pos="-2"] cite,#contact-band[data-mood] .q[data-pos="2"] cite{color:rgba(255,255,255,.86)}
#contact-band .q .rule,#contact-band .deck-dots button::before{transition:background .9s ease,width 1.5s cubic-bezier(.3,.7,.15,1),margin 1.5s cubic-bezier(.3,.7,.15,1),transform .3s}
#contact-band .q .qmark{transition:color .9s ease,opacity .4s}
#contact-band .deck-track{transition:opacity .38s ease}
#contact-band .deck.is-switching .deck-track{opacity:0}
#contact-band[data-mood="calm"],#contact-band .mood[data-mood="calm"]{--ground:#eef2f5;--card:#f3f6f8;--peach:#9db1bf;--sage:#b7c6cf;--moss:#7f97a6;--wash:rgba(196,211,220,.85);--tint:rgba(120,150,170,.55)}
#contact-band[data-mood="stuck"],#contact-band .mood[data-mood="stuck"]{--ground:#eeefef;--card:#f2f3f3;--peach:#8d9aa1;--sage:#b0b9bd;--moss:#6f7d85;--wash:rgba(200,204,207,.85);--tint:rgba(70,85,95,.55)}
#contact-band[data-mood="hopeful"],#contact-band .mood[data-mood="hopeful"]{--ground:#fbf3ea;--card:#fcf7ef;--peach:#e1a481;--sage:#e6c29f;--moss:#c98a5f;--wash:rgba(245,220,190,.85);--tint:rgba(225,160,100,.5)}
#contact-band[data-mood="anxious"],#contact-band .mood[data-mood="anxious"]{--ground:#f0f3ec;--card:#f4f6f2;--peach:#a8b49c;--sage:#c3ccb9;--moss:#8b9a80;--wash:rgba(214,222,206,.85);--tint:rgba(130,150,120,.5)}
#contact-band[data-mood="heavy"],#contact-band .mood[data-mood="heavy"]{--ground:#e8ede7;--lake-ink:#f1f4ef;--lake-ink-soft:rgba(241,244,239,.8);--card:#eef1ec;--peach:#728767;--sage:#9daa93;--moss:#5d7054;--wash:rgba(186,200,186,.85);--tint:rgba(40,70,50,.6)}
#contact-band[data-mood="grateful"],#contact-band .mood[data-mood="grateful"]{--ground:#fbf1e5;--card:#fdf5ee;--peach:#d9a06a;--sage:#e8c39c;--moss:#b9823f;--wash:rgba(245,215,180,.85);--tint:rgba(215,140,70,.5)}

/* No JavaScript: the deck is a plain stack of cards, all readable. */
html:not(.js) #contact-band .lake{height:auto;padding-bottom:40px}
html:not(.js) #contact-band .deck,html:not(.js) #contact-band .deck-track{height:auto;position:static}
html:not(.js) #contact-band .q{position:relative;left:0;margin:0 auto 20px;width:min(100%,666px);height:auto;font-size:28px;transform:none}
html:not(.js) #contact-band .q .like,html:not(.js) #contact-band .q .bg,html:not(.js) #contact-band .deck-arrow,html:not(.js) #contact-band .deck-dots{display:none}
html:not(.js) #contact-band .mood-board{display:none}   /* the tiles can do nothing without mood.js */

/* ---- shared footer (reviewer, 2026-09-06): restrained, the mark last ---- */
.foot{position:relative;z-index:5;background:#f3f4f1;padding:72px 24px 56px;text-align:center}
.foot .foot-in{width:min(100%,640px);margin:0 auto;display:flex;flex-direction:column;align-items:center}
.to-top{width:44px;height:44px;margin-bottom:44px;background:var(--ink);display:grid;place-items:center;color:#fff;text-decoration:none;font-size:18px}
.to-top:hover{background:var(--navy)}
.foot .brand{margin:0;font-family:var(--f);font-weight:400;font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--navy)}
.foot .tag{margin:10px 0 0;font-family:var(--f);font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(14,46,71,.85)}
.foot .who{margin:28px 0 0;font-family:var(--f);font-weight:300;font-size:14px;line-height:1.7;color:var(--navy)}
.foot .links{margin:24px 0 0;display:flex;gap:28px}
.foot .links a{font-family:var(--f);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--navy);
  text-decoration:none;border-bottom:1px solid rgba(14,46,71,.3);padding-bottom:4px}
.foot .links a:hover{border-bottom-color:var(--navy)}
.foot .copy{margin:30px 0 0;font-family:var(--f);font-weight:300;font-size:12px;letter-spacing:.06em;color:rgba(14,46,71,.7)}
.foot .mark{display:block;width:72px;height:auto;margin-top:34px;opacity:.9}

/* ============================ MY STORY ============================ */

/* ============================ BEGIN (was CONTACT) ============================ */
/* Wix shipped its stock form widget here: #00a6ff labels and pale blue boxed
   inputs on a hard white rectangle, shoved 185px right of centre. Rebuilt in
   the site's own palette — a warm translucent panel so the sand still reads
   through, underline fields, and a real button instead of bare "Submit" text.
   2026-09-06: Sherine folded Contact and Reserve into one page, Begin. The
   same panel now carries the discovery-call calendar first and the form
   under it, both beneath the one headline. */
#begin-page{min-height:calc(100vh - 92px - 125px);display:grid;place-items:center;
  padding:52px 20px 64px}

/* ---- liquid glass ----------------------------------------------------
   Real glass, not a frosted card: the sand photograph stays visible and
   recognisable through the panel. Legibility comes from the BLUR, not from
   opacity — 34px turns the busy ripples into soft tonal cloud, so a light
   veil is then enough to carry navy text at ~9:1.
   The rim is a bevel: bright specular on the top edge, softer returns on the
   other three, plus a highlight that tracks the pointer like light moving
   across a real surface. ------------------------------------------------ */
/* ---- liquid glass ---------------------------------------------------
   Shared by the contact panel and the booking calendar. Readability comes
   from the 52px backdrop blur, not from opacity, so whatever is behind it
   stays visible. glass.js drives --mx/--my on any .panel for the sheen. */
.panel{
  position:relative;border-radius:28px;
  background:
    linear-gradient(157deg, rgba(255,255,255,.50) 0%,
                            rgba(255,255,255,.34) 38%,
                            rgba(255,255,255,.46) 72%,
                            rgba(255,255,255,.56) 100%);
  backdrop-filter:blur(52px) saturate(155%) brightness(1.09);
  -webkit-backdrop-filter:blur(52px) saturate(155%) brightness(1.09);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 34px 80px rgba(18,28,38,.24),
    0 4px 14px rgba(18,28,38,.10),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.34),
    inset 1px 0 0 rgba(255,255,255,.40),
    inset -1px 0 0 rgba(255,255,255,.40);
}
/* specular sheen following the pointer (falls back to a top-left glint) */
.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,26%) var(--my,4%),
             rgba(255,255,255,.58), rgba(255,255,255,0) 62%);
  mix-blend-mode:screen;transition:background .18s linear}
/* rim light down the top edge, the way a bevel catches the sky */
.panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%),
             linear-gradient(to top, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 12%);
  mix-blend-mode:soft-light}
.glass-in{position:relative;z-index:1}

/* the panel's own size: wide enough for Cal's month view (it needs ~800px
   of iframe to keep the time column beside the month) */
#begin-page .panel{width:100%;max-width:980px;padding:58px 62px 46px}

/* Browsers with no backdrop-filter get an opaque panel rather than
   unreadable text over a photograph. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .panel{background:rgba(250,249,246,.96)}
}

#begin-page h1{margin:0;text-align:center;font-family:var(--f);font-weight:300;
  font-size:34px;letter-spacing:.16em;color:var(--navy);
  text-shadow:0 1px 2px rgba(255,255,255,.6)}
#begin-page .lede{margin:16px 0 44px;text-align:center;font-size:16px;line-height:1.65;
  color:rgba(14,46,71,.82);text-shadow:0 1px 2px rgba(255,255,255,.55)}

/* the two parts under the headline: the calendar, then the form */
#begin-page .part h2{margin:0;text-align:center;font-family:var(--f);font-weight:400;
  font-size:22px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
  text-shadow:0 1px 2px rgba(255,255,255,.6)}
#begin-page .part .sub{margin:14px auto 30px;max-width:640px;text-align:center;font-size:16px;
  line-height:1.65;color:rgba(14,46,71,.82);text-shadow:0 1px 2px rgba(255,255,255,.55)}
#begin-page .cal-card{padding:0}
#begin-page .cal-mount{border:1px solid rgba(14,46,71,.14)}
/* a hairline with the word between the two ways in */
#begin-page .rule{display:flex;align-items:center;gap:18px;margin:48px 0 44px;
  color:rgba(14,46,71,.6);font-family:var(--f);font-weight:300;font-size:13px;
  letter-spacing:.24em;text-transform:uppercase}
#begin-page .rule::before,#begin-page .rule::after{content:"";flex:1;height:1px;background:rgba(14,46,71,.22)}
#begin-page .cform{max-width:660px;margin:0 auto}

.cform .pair{display:grid;grid-template-columns:1fr 1fr;column-gap:38px}
.cform .field{margin:0 0 30px}
.cform label{display:block;margin-bottom:9px;font-family:var(--f);font-weight:500;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(14,46,71,.95);
  text-shadow:0 1px 2px rgba(255,255,255,.6)}
.cform input,.cform textarea{
  display:block;width:100%;background:transparent;border:0;border-bottom:1px solid rgba(14,46,71,.34);
  padding:7px 2px;font-family:var(--f);font-size:16px;font-weight:300;color:var(--ink);
  transition:border-color .2s}
.cform textarea{resize:vertical;min-height:92px;line-height:1.6}
.cform input:hover,.cform textarea:hover{border-bottom-color:rgba(14,46,71,.45)}
.cform input:focus,.cform textarea:focus{outline:0;border-bottom-color:var(--navy);border-bottom-width:2px;
  padding-bottom:6px}
.cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid rgba(14,46,71,.28);
  outline-offset:6px}

.cform .actions{display:flex;align-items:center;justify-content:center;gap:26px;
  flex-wrap:wrap;margin-top:38px}
.cform .send{height:44px;padding:0 34px;border:0;background:var(--navy);color:#fff;cursor:pointer;
  font-family:var(--f);font-weight:300;font-size:16px;letter-spacing:.04em;
  transition:background .2s}
.cform .send:hover{background:#16456a}
.cform .send:disabled{opacity:.6;cursor:default}
.cform .alt{border:0;background:none;cursor:pointer;padding:0;
  font-family:var(--f);font-weight:300;font-size:15px;color:rgba(14,46,71,.72);
  border-bottom:1px solid rgba(14,46,71,.3);transition:color .2s,border-color .2s}
.cform .alt:hover{color:var(--coral);border-bottom-color:var(--coral)}
.cform .form-note{text-align:center;margin-top:20px}

#begin-page .direct{margin:36px 0 0;text-align:center}
#begin-page .direct a{font-family:var(--f);font-weight:300;font-size:14px;
  letter-spacing:.06em;color:rgba(14,46,71,.88);text-decoration:none;
  border-bottom:1px solid rgba(14,46,71,.22);padding-bottom:3px}
#begin-page .direct a{text-shadow:0 1px 2px rgba(255,255,255,.6)}
#begin-page .direct a:hover{color:var(--navy);border-bottom-color:var(--navy)}

/* ============================ RETREAT ============================ */
body.p-retreat{background:#fff}
/* ---- ASCEND (2026-09-06): the two paths. Home section and Ascend page share it. ---- */
.ascend{background:#efe9e0;padding:112px 24px 104px;text-align:center}
.ascend .ascend-in{width:min(100%,1080px);margin:0 auto}
.ascend .ascend-in > h1,.ascend .ascend-in > h2{margin:0;font-family:var(--serif);font-weight:400;font-size:56px;line-height:1.06;
  letter-spacing:-.015em;color:#3a4a3f;font-variation-settings:'opsz' 60;text-wrap:balance}
.ascend .lede{margin:26px auto 0;max-width:640px;font-family:var(--serif);font-size:21px;line-height:1.55;color:#2f3a36;text-wrap:balance}
.ascend .ways{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:64px auto 0;max-width:960px;
  background:rgba(58,74,63,.16)}
.ascend .way{background:#f7f4ee;padding:48px 44px 52px}
.ascend .way > h2,.ascend .way > h3{margin:0;font-family:var(--f);font-weight:400;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:#3a4a3f}
.ascend .way .tag{margin:18px 0 0;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.2;color:#3a4a3f;
  font-variation-settings:'opsz' 32;text-wrap:balance}
.ascend .way p:not(.tag){margin:18px auto 0;max-width:380px;font-family:var(--serif);font-size:18px;line-height:1.6;color:#2f3a36}
.ascend .way .go{margin-top:30px;color:#3a4a3f;border-bottom-color:rgba(58,74,63,.3)}
.ascend .way .go:hover{border-bottom-color:#3a4a3f}
.ascend .creds{list-style:none;margin:48px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 0}
.ascend .creds li{font-family:var(--f);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#68736d;padding:0 22px;
  border-left:1px solid rgba(58,74,63,.25)}
.ascend .creds li:first-child{border-left:0}
.ascend > .ascend-in > .go{margin-top:52px;color:#3a4a3f;border-bottom-color:rgba(58,74,63,.3)}
.ascend > .ascend-in > .go:hover{border-bottom-color:#3a4a3f}
#r-top{height:349px}
/* Was a lone wine-red "." from the Wix layout; now the section's label. */
#r-top .dot{position:absolute;left:0;right:0;top:64px;text-align:center;margin:0;
  font-family:var(--f);font-size:12px;letter-spacing:.3em;text-transform:uppercase;line-height:1;color:var(--wine)}
#r-top p{position:absolute;left:0;right:0;margin:0;text-align:center;
  font-family:var(--f);font-weight:300;font-size:26px;letter-spacing:-1.3px;line-height:34.2px;color:var(--navy)}
#r-top .l1{top:136px}

#r-what{height:962px}
#r-what .split{position:absolute;inset:0 0 0 0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
#r-what .pane{position:relative;overflow:hidden}
#r-what .pane > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#r-what .pane .inner{position:relative;z-index:1;text-align:center;color:#fff}
#r-what h2{margin:0;position:absolute;left:177px;width:400px;top:114px;
  font-family:var(--f);font-size:38px;font-weight:400;color:#fff;text-align:center}
#r-what .body{position:absolute;left:199px;width:440px;top:353px;color:#fff;text-align:center;
  font-family:var(--f);font-weight:300;font-size:20px;line-height:36px}
#r-what .body p{margin:0 0 36px;text-wrap:balance}
#r-what .body p:last-child{margin-bottom:0}

#r-details{height:1538px}
#r-details .split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
#r-details .pane{position:relative;overflow:hidden}
#r-details .pane > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#r-details h2{margin:0;position:absolute;left:196px;width:240px;top:47px;
  font-family:var(--f);font-size:38px;font-weight:400;color:#fff;text-align:center}
#r-details .body{position:absolute;left:112px;width:440px;top:155px;color:#fff;text-align:center;
  font-family:var(--f);font-weight:300;font-size:20px;line-height:36px}
#r-details .body p{margin:0 0 36px;text-wrap:balance}
#r-details .body p:last-child{margin-bottom:0}
#r-details .body a{color:#fff}

#r-form{background:#fff;padding:0 0 35px}
#r-form .card{width:630px;margin:0 auto;background:#fff;padding:31px 43px 40px 46px}
#r-form h2{margin:0 0 27px;max-width:396px;font-family:var(--f);font-size:28px;font-weight:400;
  line-height:39.2px;color:var(--wine)}
.rform label{display:block;font-family:var(--f);font-size:13px;line-height:13px;
  color:var(--cocoa);margin:0 0 5px}
.rform input[type=text],.rform input[type=email],.rform input[type=tel],.rform input[type=number]{
  display:block;width:100%;height:32px;border:0;background:rgba(239,217,206,.7);
  padding:0 10px;font-family:var(--f);font-size:13px;color:var(--cocoa)}
.rform .grid2{display:grid;grid-template-columns:255px 255px;column-gap:31px}
.rform .field{margin-bottom:26px}
.rform fieldset{border:0;margin:0 0 40px;padding:0}
.rform legend{font-family:var(--f);font-size:13px;color:var(--cocoa);padding:0;margin-bottom:8px}
.rform .radio{display:flex;align-items:center;gap:9px;margin-bottom:6px;
  font-family:var(--f);font-size:13px;color:var(--cocoa)}
.rform .radio input{accent-color:var(--cocoa);width:14px;height:14px;margin:0}
.rform .actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rform .go{width:192px;height:42px;border:0;background:var(--wine);color:var(--cream);
  font-family:var(--f);font-size:14px;cursor:pointer;transition:background .2s}
.rform .go:hover{background:#a80000}

/* ============================ BOOKING (added) ============================ */
/* ---- FINAL INVITATION (reviewer, 2026-09-06): three lines in the serif,
   the title, the one-sentence sub, two arrow links. The calendar itself
   lives on /begin now. Same graded ocean behind it. ---- */
#book{padding:0;position:relative}
#book .bg video,#book .bg img{filter:saturate(.2) sepia(.3) brightness(1.1) contrast(.92)}
#book .head{padding:96px 24px;text-align:center}
#book .moment{margin:0 auto;max-width:640px;font-family:var(--serif);font-size:26px;line-height:1.45;color:var(--navy);text-wrap:balance}
#book .moment + .moment{margin-top:10px}
#book .moment.em{font-style:italic}
#book h2{margin:0;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.15;
  letter-spacing:-.01em;color:var(--navy);font-variation-settings:'opsz' 40}
#book .sub{margin:18px auto 0;max-width:560px;font-family:var(--serif);font-size:19px;line-height:1.6;color:rgba(14,46,71,.9)}
#book .ways{display:flex;align-items:baseline;justify-content:center;gap:28px;margin-top:44px;flex-wrap:wrap}
#book .or{font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(14,46,71,.7)}
.cal-mount{position:relative;z-index:1;width:100%;min-height:620px;
  border-radius:16px;overflow:hidden}
/* while the embed is on its way: a word in the empty glass, gone the moment
   the iframe lands (or the fallback replaces it) */
.cal-mount::before{content:"Loading the calendar\2026";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);text-align:center;font-family:var(--f);font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(14,46,71,.55);pointer-events:none}
.cal-mount:has(iframe)::before,.cal-mount.is-fallback::before{display:none}
.cal-note{margin:14px auto 0;max-width:640px;text-align:center;font-family:var(--f);font-size:14px;
  line-height:1.5;color:rgba(14,46,71,.78)}
.cal-note a{color:var(--navy)}
.cal-fallback{padding:64px 24px;text-align:center;font-family:var(--f);color:var(--cocoa)}
.cal-fallback a{color:var(--wine)}

.book-btn{display:inline-grid;place-items:center;height:42px;padding:0 26px;background:var(--navy);
  color:#fff;border:0;font-family:var(--f);font-size:14px;letter-spacing:.04em;
  cursor:pointer;text-decoration:none;transition:background .2s}
.book-btn:hover{background:#16456a}
.book-btn.ghost{background:none;color:var(--navy);border:1px solid rgba(14,46,71,.45)}
.book-btn.ghost:hover{background:rgba(14,46,71,.07)}

/* ============================ RESPONSIVE ============================ */
/* ============================ MY STORY ============================
   A quiet editorial profile: About Me, then My Practice, then one real
   photograph. Natural document flow keeps the order identical everywhere. */
body.p-story{background:#e7e1d8}
#story.story-editorial{width:100%;max-width:none;padding:0;color:#2f3a36}
.story-editorial .story-inner{width:min(calc(100% - 48px),1080px);margin-inline:auto}
.story-editorial .story-about{padding:104px 0 116px;background:#f7f4ee;text-align:center}
.story-editorial .story-intro{max-width:760px}
.story-editorial .story-mark{display:block;width:92px;height:auto;margin:0 auto 24px;opacity:.92}
.story-editorial h1,.story-editorial h2{font-family:var(--serif);font-weight:400;color:#3a4a3f;
  letter-spacing:-.01em;font-variation-settings:'opsz' 60}
.story-editorial h1{margin:0;font-size:64px;line-height:1.03}
.story-editorial .story-eyebrow{margin:20px 0 0;font-family:var(--f);font-size:12px;line-height:1.7;
  letter-spacing:.28em;text-transform:uppercase;color:#68736d}
.story-editorial .story-lede{max-width:680px;margin:38px auto 0;font-family:var(--serif);font-size:24px;
  line-height:1.58;color:#2f3a36;text-wrap:balance}
/* My Journey (Sherine's six chapters, 2026-09-06): between About and the
   practice, on the mid tone of the page's two grounds. Each chapter is a
   head column (number, title, one italic line) beside its paragraphs,
   hairlines between chapters; stacks under 900px. */
.story-editorial .story-journey{padding:104px 0 108px;background:#efe9e0}
.story-editorial .chapter{display:grid;grid-template-columns:320px 1fr;column-gap:72px;
  padding:56px 0;border-top:1px solid rgba(58,74,63,.16)}
.story-editorial .chapter:first-of-type{border-top:0;padding-top:16px}
.story-editorial .chapter:last-of-type{padding-bottom:8px}
.story-editorial .chapter-head .story-eyebrow{margin:0}
.story-editorial .chapter h3{margin:14px 0 0;font-family:var(--serif);font-weight:400;font-size:34px;
  line-height:1.15;letter-spacing:-.01em;color:#3a4a3f;font-variation-settings:'opsz' 48;text-wrap:balance}
.story-editorial .chapter-tag{margin:14px 0 0;font-family:var(--serif);font-style:italic;font-size:20px;
  line-height:1.4;color:#68736d}
.story-editorial .chapter-body{max-width:680px}
.story-editorial .chapter-body p{margin:0 0 20px;font-family:var(--serif);font-size:19px;line-height:1.72;color:#2f3a36}
.story-editorial .chapter-body p:last-child{margin-bottom:0}
.story-editorial .chapter-body em{font-style:italic}
@media (max-width:900px){
  .story-editorial .chapter{grid-template-columns:1fr;row-gap:22px;padding:44px 0}
  .story-editorial .chapter-body{max-width:none}
}
.story-editorial .story-practice{padding:104px 0 96px;background:#e7e1d8}
.story-editorial .practice-copy{width:min(100%,760px);margin-inline:auto}
.story-editorial h2{margin:0 0 34px;font-size:52px;line-height:1.08;text-align:center}
.story-editorial .practice-copy p{margin:0 0 22px;font-family:var(--serif);font-size:19px;line-height:1.72;color:#2f3a36}
.story-editorial .practice-copy p:last-child{margin-bottom:0}
.story-editorial .practice-photo{width:min(100%,760px);margin:58px auto 0;text-align:center}
.story-editorial .practice-photo img{width:100%;height:auto;border-radius:6px}
.story-editorial .practice-photo figcaption{margin:14px 0 0;font-family:var(--serif);font-style:italic;
  font-size:15px;line-height:1.4;color:#66716c}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:700px){
  .story-editorial .story-inner{width:min(calc(100% - 40px),760px)}
  .story-editorial .story-about{padding:64px 0 72px}
  .story-editorial .story-mark{width:66px;margin-bottom:18px}
  .story-editorial h1{font-size:44px}
  .story-editorial .story-eyebrow{margin-top:17px;font-size:11px;line-height:1.75;letter-spacing:.22em}
  .story-editorial .story-lede{margin-top:28px;font-size:20px;line-height:1.55}
  .story-editorial .story-journey{padding:64px 0 60px}
  .story-editorial .chapter{padding:36px 0;row-gap:16px}
  .story-editorial .chapter h3{font-size:28px}
  .story-editorial .chapter-tag{font-size:18px}
  .story-editorial .chapter-body p{margin-bottom:18px;font-size:17.5px;line-height:1.68}
  .story-editorial .story-practice{padding:68px 0 64px}
  .story-editorial h2{margin-bottom:28px;font-size:40px}
  .story-editorial .practice-copy p{margin-bottom:20px;font-size:17.5px;line-height:1.68}
  .story-editorial .practice-photo{margin-top:38px}
  .story-editorial .practice-photo figcaption{font-size:14px}
}

@media (max-width:1100px){
  #r-top,#r-what,#r-details,#begin-page{height:auto}
  #hero{height:auto;min-height:78vh}
  #hero .stage{padding:110px 20px 80px}
  #hero .title{font-size:clamp(34px,8vw,52px)}
  #hero .lead{margin-top:22px;font-size:clamp(18px,3.4vw,22px)}
  #hero .who{margin-top:26px;font-size:11px;letter-spacing:.24em}
  #hero .begin{margin-top:40px}
  #intro{grid-template-columns:1fr}
  #intro > .bg{min-height:0;height:clamp(180px,48vw,280px)}
  #intro .stage{padding:40px 24px 48px;align-items:center;text-align:center}
  #intro .copy p{font-size:clamp(18px,4.5vw,21px);line-height:1.6;letter-spacing:.06em}
  #intro .copy p:last-child{font-size:15px}
  #about{padding:64px 20px}
  #about .about-in{grid-template-columns:1fr;row-gap:36px}
  #about .portrait{width:min(100%,360px);margin:0 auto}
  #about h2{font-size:clamp(34px,7.6vw,44px);text-align:center}
  #about .about-copy{text-align:center}
  #about .about-copy > p{margin-inline:auto;font-size:18px}
  .ascend{padding:64px 20px 60px}
  .ascend .ascend-in > h1,.ascend .ascend-in > h2{font-size:clamp(36px,7.6vw,48px)}
  .ascend .lede{font-size:18px}
  .ascend .ways{grid-template-columns:1fr;margin-top:44px}
  .ascend .way{padding:36px 22px 40px}
  .ascend .way .tag{font-size:26px}
  .ascend .creds{flex-direction:column;gap:10px}
  .ascend .creds li{border-left:0;padding:0}
  #nurture{padding:96px 20px}
  #nurture h2{font-size:clamp(34px,7.6vw,44px)}
    #nurture .ask{margin-top:36px;font-size:22px}
  #book .head{padding:88px 20px 96px}
  #book .moment{font-size:clamp(20px,4.6vw,24px)}
  #book h2{margin-top:0;font-size:clamp(28px,6vw,36px)}
  #book .sub{font-size:17px}
  #testimonials{height:auto;padding:70px 20px}
  #testimonials .refl-head{position:static;margin:0 0 40px}
  #testimonials .refl-head h2{font-size:clamp(28px,4.4vw,40px)}
  #testimonials .refl-head p{font-size:clamp(11px,1.6vw,14px);padding:0 12px}
  #testimonials .cards{position:static;width:100%;height:auto;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:14px;}
  #testimonials .card{padding:40px 24px 34px}
  #testimonials .card p{font-size:clamp(17px,3.2vw,20px)}
  #gallery{padding:78px 20px 70px}
  #gallery .why .beat{font-size:clamp(22px,5vw,28px)}
  #gallery .why .body{margin:32px auto;font-size:clamp(16px,3.4vw,19px)}
  #gallery .gal-head{font-size:clamp(28px,4.4vw,40px);margin-bottom:34px}
  #contact-band .lake-above{padding:64px 14px 0}
  #contact-band .lake-below{padding:0 14px 72px}
  #contact-band .moods{grid-template-columns:repeat(3,1fr);gap:14px}
  #contact-band .mood{aspect-ratio:4/3}
  #contact-band .mood-head :is(h2,h3){font-size:clamp(26px,4vw,34px)}
  #contact-band .mood-head .lead{font-size:clamp(14px,1.8vw,16px);padding:0 12px}
  #begin-page{min-height:0;padding:44px 16px 56px}
  #begin-page .panel{padding:40px 24px 34px;border-radius:22px;
    backdrop-filter:blur(40px) saturate(155%) brightness(1.09);
    -webkit-backdrop-filter:blur(40px) saturate(155%) brightness(1.09)}
  #begin-page h1{font-size:clamp(24px,5.4vw,34px)}
  #begin-page .lede{margin-bottom:34px}
  #begin-page .part h2{font-size:clamp(16px,4vw,20px)}
  #begin-page .rule{margin:36px 0 32px}
  .cform .pair{grid-template-columns:1fr;column-gap:0}
  #r-top{padding:64px 20px}
  #r-top .dot,#r-top p{position:static;margin:0 0 8px}
  #r-top p{font-size:clamp(17px,2.6vw,26px);letter-spacing:0;line-height:1.5}
  #r-what .split,#r-details .split{position:static;grid-template-columns:1fr}
  #r-what .pane,#r-details .pane{min-height:520px;padding:60px 24px}
  #r-what h2,#r-what .body,#r-details h2,#r-details .body{position:static}
  #r-what h2,#r-details h2{margin-bottom:40px}
  #r-form .card{width:100%;max-width:630px;padding:24px 20px 34px}
  .rform .grid2{grid-template-columns:1fr;column-gap:0}
  .cal-mount{border-radius:14px}
  .ig-rail{display:none}
}
@media (max-width:1100px){
  /* the hard line breaks exist to reproduce Wix's desktop ragging —
     on a phone they would shred the copy, so let it wrap naturally.
     The blocks that used to be listed here now rag themselves with
     text-wrap:balance and carry no <br> at all. */
  #r-top p br{display:none}
  /* nothing keeps a desktop pixel width on a phone */
  #r-what .body,#r-details .body,#r-what h2,#r-details h2{left:auto;width:auto;max-width:420px;margin-inline:auto}
  #r-top p,#r-top .dot{left:auto;right:auto}
  .cal-mount{min-height:520px}
}
@media (max-width:1439px){
  #contact-band .deck-arrow.prev{left:max(8px,calc(50% - 711px))}
  #contact-band .deck-arrow.next{right:max(8px,calc(50% - 711px))}
}
@media (max-width:1100px){
  #contact-band .lake{height:auto;padding-bottom:36px}
  #contact-band .lake-head{padding-top:30px}
  #contact-band .lake-head h2{font-size:clamp(28px,4.4vw,40px)}
  #contact-band .lake-head p{font-size:clamp(15px,1.8vw,17px);padding:0 16px}
  #contact-band .deck{height:auto;padding-bottom:36px;--card-h:340px}
  #contact-band .deck-track{height:var(--card-h);perspective:none}
  #contact-band .q{width:min(92vw,666px);height:var(--card-h);margin-left:calc(min(92vw,666px) / -2);font-size:clamp(22px,3.6vw,32px)}
  #contact-band .q.long{font-size:clamp(20px,3.1vw,30px)}
  #contact-band .q.longer{font-size:clamp(19px,2.8vw,26px)}
  #contact-band .q.is-measure{width:min(92vw,666px)!important;margin-left:calc(min(92vw,666px) / -2)!important;font-size:clamp(22px,3.6vw,32px)!important}
  #contact-band .q.long.is-measure{font-size:clamp(20px,3.1vw,30px)!important}
  #contact-band .q.longer.is-measure{font-size:clamp(19px,2.8vw,26px)!important}
  #contact-band .q.is-measure .card{padding:34px 28px 20px}
  #contact-band .q.is-measure blockquote{max-width:none}
  #contact-band .q .card{padding:34px 28px 20px}
  #contact-band .q blockquote{max-width:none}
  #contact-band .q[data-pos="-1"],#contact-band .q[data-pos="1"],
  #contact-band .q[data-pos="-2"],#contact-band .q[data-pos="2"]{width:min(92vw,666px);height:var(--card-h);
    margin-left:calc(min(92vw,666px) / -2);font-size:inherit!important;opacity:0}
  #contact-band .q[data-pos="-1"] .card,#contact-band .q[data-pos="1"] .card,
  #contact-band .q[data-pos="-2"] .card,#contact-band .q[data-pos="2"] .card{padding:34px 28px 20px}
  #contact-band .q[data-pos="-1"],#contact-band .q[data-pos="-2"]{transform:translate3d(-40%,0,0) scale(.9)}
  #contact-band .q[data-pos="1"],#contact-band .q[data-pos="2"]{transform:translate3d(40%,0,0) scale(.9)}
  #contact-band .deck-arrow{top:143px;width:44px;height:44px}
  #contact-band .deck-arrow.prev{left:max(6px,calc(50% - min(46vw,333px) - 22px))}
  #contact-band .deck-arrow.next{right:max(6px,calc(50% - min(46vw,333px) - 22px))}
  #contact-band .deck-dots{top:auto;bottom:0}
}
@media (max-width:560px){
  #contact-band .moods{grid-template-columns:repeat(2,1fr)}
  #contact-band .mood strong{font-size:21px}
  #contact-band .mood-flow{min-height:60px;margin-top:18px;gap:8px}
  #contact-band .mood-flow-source,#contact-band .mood-flow-target{gap:4px;font-size:clamp(10px,3vw,12px);letter-spacing:.025em}
  #contact-band .mood-flow-line{flex-basis:56px;min-width:24px}
  #contact-band .mood-flow-target svg{width:15px;height:15px}
  #contact-band .lake-head h2{max-width:360px;margin-inline:auto;padding-inline:12px}
  #testimonials .cards{grid-template-columns:1fr}

}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Short homepage and the separate reflection space. */
.p-home #hero{height:clamp(580px,78svh,780px);min-height:0;display:flex;align-items:center}
.p-home #ascend{padding:72px 24px}
.p-home #ascend .ways{margin-top:36px}
.p-home #ascend .way{padding:36px 32px 40px;display:flex;flex-direction:column;align-items:center}
.p-home #ascend .way p{font-size:23px;line-height:1.5;margin:24px auto 28px}
.p-home #ascend .way .go{margin-top:auto;font-size:11px;letter-spacing:.22em}
.p-reflections{background:#fdfcfb}
.p-reflections .hdr{background:#f7f4ee}
.reflections-header{padding:64px 24px 0;text-align:center}
.reflections-header h1{margin:0;font-family:var(--serif);font-weight:400;font-size:56px;line-height:1.1}
.p-reflections #contact-band .lake-above{padding-top:40px;padding-bottom:28px}
.p-reflections #contact-band .lake{height:600px}
.p-reflections #contact-band .lake-head{padding-top:40px}
.p-reflections #contact-band .lake-below{display:none}
.reflection-motion{margin-top:18px;padding:10px 12px;border:0;background:none;color:var(--navy);font:400 10px/1.5 var(--f);letter-spacing:.08em;cursor:pointer}
.reflection-motion:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.p-reflections #site-foot{background:var(--fln-sand,#eee9df)}
@media(max-width:1100px){
  .p-home #hero{height:clamp(500px,74svh,700px)}
  .p-home #hero .stage{padding:64px 22px}
  .p-home #ascend{padding:56px 20px}
  .p-home #ascend .way{padding:32px 24px}
  .p-home #ascend .way p{font-size:22px}
  .reflections-header{padding-top:40px}
  .reflections-header h1{font-size:42px}
}