/* ==========================================================================
   Elvemind — visual system lifted from the printed business cards
   ========================================================================== */

:root{
  /* paper */
  --cream:        #F7EFE5;
  --cream-lift:   #FBF6EE;
  --cream-deep:   #F3E9DC;
  --fringe:       #EFE3D2;

  /* ink */
  --olive:        #3F4A2B;   /* wordmark, icon discs */
  --olive-soft:   #55663A;
  --leaf:         #5B6A49;   /* sage of the logomark's foliage */
  --terracotta:   #9C6B44;   /* script, rules, hearts */
  --terra-mid:    #B4855E;
  --terra-pale:   #DCC5AC;
  --ink:          #4A4536;   /* body copy */
  --ink-soft:     #6E6757;
  --heading:      #59452F;

  /* torn band */
  --kraft:        #C9AB88;
  --kraft-deep:   #B4926F;
  --kraft-ink:    #453522;

  --measure: 62ch;
  --shell: 1180px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);

/* cursor-tokens:start */
  --cursor-leaf:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='translate%283.3 3.3%29 rotate%2842%29'><path d='M0 0C7-6.6 18.5-8.8 25.5-3.6 18 1.6 7 3.2 0 0Z' fill='none' stroke='%23FBF6EE' stroke-width='2.6' stroke-linejoin='round' stroke-miterlimit='2'/><path d='M0 0C7-6.6 18.5-8.8 25.5-3.6 18 1.6 7 3.2 0 0Z' fill='%234C5E33'/></g></svg>") 4 4, auto;
  --cursor-leaf-link: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='translate%283.3 3.3%29 rotate%2842%29'><path d='M0 0C7-6.6 18.5-8.8 25.5-3.6 18 1.6 7 3.2 0 0Z' fill='none' stroke='%23FBF6EE' stroke-width='2.6' stroke-linejoin='round' stroke-miterlimit='2'/><path d='M0 0C7-6.6 18.5-8.8 25.5-3.6 18 1.6 7 3.2 0 0Z' fill='%234C5E33'/></g></svg>") 4 4, pointer;
/* cursor-tokens:end */

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; overflow-x:clip; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Quicksand", ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-weight:400;
  font-size:clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
/* width/height attributes are presentational hints: without this, any image
   whose width CSS overrides keeps its attribute height and distorts */
img{ height:auto; }

/* the cards are printed on a textured stock — a whisper of grain over the page */
body::after{
  content:""; position:fixed; inset:0; z-index:80; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

a{ color:inherit; }

/* ------------------------------------------------------------------ type -- */

.wordmark{
  font-family:"Cormorant Garamond", "Cormorant", Georgia, serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--olive);
  line-height:1;
  margin:0;
}

.tagline{
  font-weight:400;
  letter-spacing:.055em;
  color:var(--ink);
  margin:0;
}

.script{
  font-family:"Parisienne", "Brush Script MT", cursive;
  color:var(--terracotta);
  font-weight:400;
  line-height:1.05;
  letter-spacing:.01em;
}

.hand{                        /* the card's "What is Elvemind?" voice */
  font-weight:700;
  color:var(--heading);
  letter-spacing:.005em;
  line-height:1.3;
  margin:0;
}

.eyebrow{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--terracotta);
  margin:0 0 1.1rem;
}

.lede{
  font-weight:400;
  color:var(--ink);
  max-width:var(--measure);
}

/* underline swash beneath a hand heading */
.swash{ width:clamp(96px,26%,168px); height:10px; margin-top:.35rem; overflow:visible; }
.swash path{ stroke:var(--terracotta); stroke-width:4.1; fill:none; stroke-linecap:round; }
.center .swash{ margin-inline:auto; }

/* hearts */
.heart{ width:1em; height:1em; display:inline-block; vertical-align:-.12em; margin-left:.42em; flex:none; }
.heart path{ fill:none; stroke:var(--terracotta); stroke-width:1.7; }
.heart--solid path{ fill:var(--terra-mid); stroke:none; }

/* --------------------------------------------------------------- layout -- */

.shell{ width:min(100% - (var(--pad) * 2), var(--shell)); margin-inline:auto; }
.section{ padding-block:clamp(4.5rem, 9vw, 7.5rem); position:relative; overflow:hidden; }
.section--tint{ background:var(--cream-deep); }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

/* vertical rule with a dot at each end — straight off the card */
.rule-v{ display:flex; flex-direction:column; align-items:center; align-self:stretch; gap:.55rem; }
.rule-v i{ width:7px; height:7px; border-radius:50%; background:var(--terracotta); flex:none; }
.rule-v span{ width:1px; flex:1 1 auto; background:var(--terra-mid); opacity:.55; min-height:120px; }

.rule-h{ height:1px; background:var(--terra-pale); border:0; margin:0; }

/* --------------------------------------------------------------- header -- */

.masthead{
  position:fixed; inset:0 0 auto; z-index:60;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.masthead.is-stuck{ border-bottom-color:var(--terra-pale); }
.masthead__inner{
  width:min(100% - (var(--pad) * 2), var(--shell));
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  height:4.75rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand img{ width:40px; height:auto; }
.brand .wordmark{ font-size:1.18rem; letter-spacing:.16em; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav a{
  text-decoration:none; font-size:.9rem; font-weight:500;
  letter-spacing:.04em; color:var(--ink); position:relative; padding-block:.35rem;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:.05rem; height:1.6px;
  background:var(--terracotta); border-radius:2px; transition:right .35s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after{ right:0; }
.nav .btn{ color:var(--cream-lift); font-size:.85rem; }
.nav .btn::after{ display:none; }

.nav-toggle{
  display:none; background:none; border:0; padding:.4rem; cursor:var(--cursor-leaf-link);
  color:var(--olive);
}
.nav-toggle svg{ width:26px; height:26px; }

/* --------------------------------------------------------------- button -- */

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:inherit; font-size:.9rem; font-weight:600; letter-spacing:.06em;
  padding:.8rem 1.6rem; border-radius:999px; text-decoration:none;
  border:1.4px solid var(--olive); background:var(--olive); color:var(--cream-lift);
  cursor:var(--cursor-leaf-link); transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow:0 1px 0 rgba(67,51,31,.06);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(63,74,43,.55); }
.btn--ghost{ background:transparent; color:var(--olive); border-color:var(--terra-mid); }
.btn--ghost:hover{ background:var(--terracotta); border-color:var(--terracotta); color:var(--cream-lift); }
.btn--kraft{ background:var(--kraft-ink); border-color:var(--kraft-ink); color:#F5E9DA; }
.btn--kraft:hover{ background:transparent; color:var(--kraft-ink); }

/* ----------------------------------------------------------------- hero -- */

.hero{
  position:relative;
  padding-block:clamp(7.5rem, 14vw, 10.5rem) clamp(4.5rem, 8vw, 7rem);
  overflow:hidden;
}
.hero__inner{ position:relative; z-index:2; text-align:center; }
.hero .logomark{ width:clamp(130px,15vw,186px); margin:0 auto .75rem; }
.hero .wordmark{ font-size:clamp(3.1rem, 11vw, 7rem); letter-spacing:.11em; margin-left:.11em; }
.hero .tagline{ font-size:clamp(1rem,2.4vw,1.35rem); margin-top:.85rem; }
.hero__lede{ margin:2.4rem auto 0; font-size:clamp(1rem,1.6vw,1.12rem); max-width:52ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2.5rem; }

/* botanicals */
.botanical{ position:absolute; pointer-events:none; user-select:none; z-index:1; }
.botanical--hero{
  right:clamp(-6rem,-3vw,0rem); bottom:-2rem;
  width:clamp(260px, 38vw, 530px); opacity:1;
}
.botanical--corner{ right:-3rem; bottom:-2rem; width:clamp(150px,18vw,260px); opacity:.75; }
.botanical--left{ left:-4rem; top:-1rem; width:clamp(140px,16vw,230px); opacity:.6; transform:scaleX(-1); }

.daisy{ position:absolute; left:clamp(.5rem,3vw,3rem); bottom:2.5rem; width:clamp(56px,7vw,86px); z-index:1; opacity:.9; }
.daisy path, .daisy circle{ stroke:var(--terra-mid); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ---------------------------------------------------------------- about -- */

.about__body p{ margin:0 0 1.35rem; }
.about__body p:last-child{ margin-bottom:0; }
.about__body{ max-width:56ch; margin-inline:auto; }
.about .hand{ font-size:clamp(1.5rem,3.4vw,2rem); display:inline-flex; align-items:center; }

/* -------------------------------------------------------------- pillars -- */

.pillars{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:clamp(3rem,6vw,4.5rem);
}
.pillar{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1rem; padding-inline:clamp(.5rem,2vw,1.5rem);
  border-left:1px solid var(--terra-pale);
}
.pillar:first-child{ border-left:0; }
.pillar__icon{ width:clamp(44px,5vw,58px); height:auto; color:var(--olive); }
.pillar__icon path, .pillar__icon circle{
  fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.pillar h3{
  margin:0; font-size:clamp(.9rem,1.5vw,1rem); font-weight:600;
  letter-spacing:.03em; color:var(--ink); line-height:1.45;
}
.pillar p{ margin:0; font-size:.86rem; color:var(--ink-soft); line-height:1.6; }

/* ------------------------------------------------------------- services -- */

/* section intro paired with a photograph */
.intro-split{
  display:grid; grid-template-columns:1fr .92fr;
  gap:clamp(1.75rem,4.5vw,3.75rem); align-items:center;
}
.shot{ margin:0; }
.shot img{
  width:100%; border-radius:20px;
  border:1px solid color-mix(in srgb, var(--terra-pale) 70%, transparent);
  box-shadow:0 26px 46px -32px rgba(89,69,47,.7);
}
.shot figcaption{
  margin-top:.85rem; font-size:.85rem; color:var(--ink-soft);
  line-height:1.6; max-width:46ch;
}

.grid-3{
  display:grid; gap:clamp(1.25rem,2.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:clamp(2.75rem,5vw,4rem);
}
.card{
  background:var(--cream-lift);
  border:1px solid color-mix(in srgb, var(--terra-pale) 70%, transparent);
  border-radius:20px;
  padding:clamp(1.6rem,3vw,2.2rem);
  display:flex; flex-direction:column; gap:.9rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.section--tint .card{ background:var(--cream); }
.card:hover{
  transform:translateY(-5px);
  border-color:var(--terra-mid);
  box-shadow:0 22px 40px -30px rgba(89,69,47,.55);
}
.card__disc{
  width:52px; height:52px; border-radius:50%; background:var(--olive);
  display:grid; place-items:center; flex:none; color:var(--cream-lift);
}
.card__disc svg{ width:26px; height:26px; }
.card__disc svg path, .card__disc svg circle{
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.card h3{
  margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-weight:600;
  font-size:clamp(1.4rem,2.3vw,1.65rem); color:var(--olive); letter-spacing:.015em; line-height:1.25;
}
.card p{ margin:0; font-size:.96rem; color:var(--ink-soft); }
.card ul{ margin:.2rem 0 0; padding:0; list-style:none; display:grid; gap:.5rem; }
.card li{ position:relative; padding-left:1.35rem; font-size:.92rem; color:var(--ink-soft); }
.card li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--terra-mid);
}

/* ----------------------------------------------------------------- steps -- */

.steps{
  display:grid; gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin-top:clamp(2.75rem,5vw,4rem);
  position:relative;
}
.step{ display:flex; flex-direction:column; gap:.7rem; position:relative; padding-top:.5rem; }
.step__no{
  font-family:"Cormorant Garamond",Georgia,serif; font-size:2.9rem; font-weight:500;
  color:var(--terra-mid); line-height:1; letter-spacing:.02em;
}
.step h3{ margin:0; font-size:1.02rem; font-weight:600; color:var(--olive); letter-spacing:.02em; }
.step p{ margin:0; font-size:.93rem; color:var(--ink-soft); }
.step::after{
  content:""; position:absolute; top:1.4rem; left:2.9rem; right:-1.4rem; height:1px;
  border-top:1.5px dashed var(--terra-pale);
}
.step:last-child::after{ display:none; }

/* -------------------------------------------------------------- founders -- */

.founders{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(1.75rem,4vw,3.5rem); align-items:stretch;
  margin-top:clamp(2.75rem,5vw,4rem);
}
.founder{ display:flex; flex-direction:column; gap:.35rem; }

/* portraits sit under an arch, echoing the logomark above the wordmark */
.founder__portrait{
  margin:0 0 .55rem; width:min(100%, 238px); aspect-ratio:3/4;
  overflow:hidden; border-radius:119px 119px 16px 16px;
  background:var(--cream-lift);
  border:1px solid color-mix(in srgb, var(--terra-pale) 80%, transparent);
  box-shadow:0 20px 36px -28px rgba(89,69,47,.65);
}
.founder__portrait img{ width:100%; height:100%; object-fit:cover; }
.founder__name{ font-size:clamp(2.6rem,6vw,3.6rem); display:flex; align-items:flex-start; }
.founder__name .heart{ width:.5em; height:.5em; margin-left:.22em; margin-top:.06em; }
.founder__role{ font-size:1rem; color:var(--ink); letter-spacing:.03em; line-height:1.55; margin:.15rem 0 0; }
.founder__role b{ font-weight:400; }   /* the card sets both lines in the same weight */
.founder .swash{ width:92px; height:8px; margin-top:.25rem; }
.founder .swash path{ stroke-width:6.2; }
.founder__bio{ margin:1.1rem 0 0; font-size:.95rem; color:var(--ink-soft); }
.founder__line{
  margin-top:1.2rem; padding-top:1.1rem; border-top:1px dashed var(--terra-pale);
  display:flex; align-items:center; gap:.7rem; font-size:.93rem; color:var(--ink);
}
.founder__line svg{ width:17px; height:17px; color:var(--terracotta); flex:none; }
.founder__line svg path{ fill:currentColor; }

/* --------------------------------------------------------------- contact -- */

.contact{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1.75rem,4vw,3.5rem); align-items:stretch; }
.contact__copy .hand{ font-size:clamp(1.5rem,3.2vw,2rem); }
.contact__copy p{ color:var(--ink-soft); }

.contact-list{ display:grid; align-content:center; gap:0; }
.contact-row{
  display:flex; align-items:center; gap:1.05rem;
  padding-block:1.2rem; text-decoration:none;
  border-top:1px dashed var(--terra-pale);
  transition:transform .3s var(--ease);
}
.contact-row:first-child{ border-top:0; padding-top:.25rem; }
.contact-row:hover{ transform:translateX(4px); }
.contact-row__disc{
  width:44px; height:44px; border-radius:50%; background:var(--olive);
  display:grid; place-items:center; flex:none; color:var(--cream-lift);
  transition:background .3s var(--ease);
}
.contact-row:hover .contact-row__disc{ background:var(--terracotta); }
.contact-row__disc svg{ width:21px; height:21px; }

/* the card carries no caption above each line — the disc does that job.
   The label stays in the markup for assistive tech only. */
.contact-row__text{ display:flex; flex-direction:column; gap:.15rem; position:relative; }
.contact-row__label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.contact-row__value{ display:block; font-size:1.06rem; color:var(--ink); font-weight:500; letter-spacing:.015em; line-height:1.45; }

/* icon glyph conventions inside olive discs */
.glyph-solid path{ fill:currentColor; stroke:none; }
.glyph-line path, .glyph-line circle, .glyph-line rect{
  fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------------------------------------------------------------- forms -- */

.booking{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  background:var(--cream-lift);
  border:1px solid color-mix(in srgb, var(--terra-pale) 70%, transparent);
  border-radius:22px; padding:clamp(1.6rem,3.4vw,2.6rem);
}
.booking form{ display:grid; gap:1.05rem; grid-template-columns:repeat(2,1fr); }
.field{ display:grid; gap:.4rem; }
.field--wide{ grid-column:1 / -1; }
.field--wide .btn{ justify-self:start; }
.field label{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terracotta); font-weight:600; }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:.98rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--terra-pale); border-radius:12px;
  padding:.78rem .95rem; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:118px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--terracotta);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--terracotta) 16%, transparent);
}
.form-error{
  grid-column:1 / -1; margin:-.4rem 0 0;
  font-size:.9rem; font-weight:500; color:#9A4038;
}
.form-error[hidden]{ display:none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-color:#B4574C; box-shadow:0 0 0 3px rgba(154,64,56,.13);
}

.booking__note{ grid-column:1 / -1; font-size:.84rem; color:var(--ink-soft); margin:0; }

/* --------------------------------------------------------------- footer -- */

.site-footer{ position:relative; background:var(--kraft); color:var(--kraft-ink); margin-top:clamp(1rem,2.5vw,2.25rem); }
.site-footer__tear{
  display:block; width:100%; height:auto;
  margin-bottom:-1px; position:relative; z-index:2;
}
.site-footer::before{           /* kraft grain */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.18), transparent 58%),
    linear-gradient(180deg, transparent 68%, rgba(116,86,54,.10));
}
.site-footer__inner{ position:relative; z-index:3; padding-block:clamp(2.5rem,5vw,4rem) 0; }
.footer-grid{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:1.4fr 1fr 1.2fr;
  padding-bottom:clamp(2rem,4vw,3rem);
}
.footer-brand .wordmark{ font-size:1.9rem; color:var(--kraft-ink); letter-spacing:.15em; }
.footer-brand img{ width:58px; margin-bottom:.5rem; }
.footer-brand .tagline{ font-size:.95rem; color:#55402A; margin-top:.5rem; }
.footer-brand p{ font-size:.92rem; color:#55402A; max-width:34ch; }
.site-footer h4{
  margin:0 0 .9rem; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:#6A5033;
}
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.site-footer a{ text-decoration:none; font-size:.94rem; color:var(--kraft-ink); transition:opacity .25s var(--ease); }
.site-footer a:hover{ opacity:.62; text-decoration:underline; text-underline-offset:3px; }
.footer-bottom{
  border-top:1px solid rgba(89,66,42,.28);
  padding-block:1.5rem 2.1rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 1.5rem;
  text-align:center;
}
.footer-bottom .keep{
  font-size:clamp(.95rem,2vw,1.16rem); letter-spacing:.045em; color:var(--kraft-ink);
  display:inline-flex; align-items:center;
}
.footer-bottom .keep .heart path{ stroke:#6B5236; }
.footer-legal{ width:100%; font-size:.78rem; color:#6B5236; letter-spacing:.03em; }

/* -------------------------------------------------------------- cursors -- */
/* `cursor` inherits, so the leaf falls through the whole page from here. */
body{ cursor:var(--cursor-leaf); }

/* Browsers force a hand on links and an arrow on buttons from their own
   stylesheets, so the leaf has to be restated here to hold everywhere. Same
   image as above — only the fallback keyword differs. */
a, button, select, summary, label,
[role="button"], .contact-row, .founder__line{ cursor:var(--cursor-leaf-link); }

/* typing needs a real caret — leave these alone */
input, textarea{ cursor:text; }

/* a coarse pointer has no cursor to style, and a custom one can only get in
   the way of assistive pointer settings */
@media (pointer: coarse){
  body, a, button, select, summary, label,
  [role="button"], .contact-row, .founder__line{ cursor:auto; }
}

/* --------------------------------------------------------------- motion -- */

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--olive); color:var(--cream-lift);
  padding:.7rem 1.1rem; z-index:100; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--terracotta); outline-offset:3px; border-radius:4px; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 900px){
  .founders, .contact, .intro-split{ grid-template-columns:1fr; }
  .founders .rule-v, .contact .rule-v{ flex-direction:row; width:100%; }
  .founders .rule-v span, .contact .rule-v span{ width:auto; height:1px; min-height:0; flex:1; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step::after{ display:none; }
}

@media (max-width: 780px){
  .nav{
    position:fixed; inset:4.75rem 0 auto; flex-direction:column; align-items:stretch;
    background:var(--cream-lift); padding:1rem var(--pad) 1.75rem; gap:.25rem;
    border-bottom:1px solid var(--terra-pale);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    max-height:calc(100dvh - 4.75rem); overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding-block:.8rem; border-bottom:1px dashed var(--terra-pale); }
  .nav a::after{ display:none; }
  .nav .btn{ margin-top:1rem; justify-content:center; }
  .nav-toggle{ display:block; }
  .pillars{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; }
  .pillar:nth-child(3){ border-left:0; }
  .pillar:nth-child(n+3){ padding-top:2.5rem; border-top:1px solid var(--terra-pale); margin-top:-.5rem; }
  .booking form{ grid-template-columns:1fr; }
  .botanical--hero{ width:min(52vw,300px); opacity:.62; bottom:-4rem; right:-3rem; }
  /* give the CTAs air so the botanicals never crowd them on a phone */
  .hero{ padding-bottom:clamp(6.5rem,20vw,9rem); }
  .daisy{ bottom:1.5rem; left:-.4rem; width:62px; opacity:.7; }
}

@media (max-width: 520px){
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero .wordmark{ letter-spacing:.08em; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}