/* Katie I'Anson · Birth & Postpartum Doula
   One stylesheet for the whole site. Values are taken 1:1 from the approved design.
   Phone layout lives in the single @media (max-width: 640px) block near the end. */

/* ---------- Fonts (self-hosted, same files Google Fonts serves) ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 400;font-display:swap;src:url(../fonts/fraunces-latin.woff2?v=7234ed860a) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 400;font-display:swap;src:url(../fonts/fraunces-latin-ext.woff2?v=a2930b27d1) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 400;font-display:swap;src:url(../fonts/fraunces-italic-latin.woff2?v=066710ce7e) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 400;font-display:swap;src:url(../fonts/fraunces-italic-latin-ext.woff2?v=4983926d3a) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/nunito-sans-latin.woff2?v=29e3890496) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/nunito-sans-latin-ext.woff2?v=c648ee5bfd) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  /* palette */
  --lavender:#73609A;
  --ink:#2F2638;
  --cream:#F6F0E6;
  --gold:#B8955A;
  /* supporting tones from the design */
  --lavender-deep:#5E4A85;
  --plum:#6A4A8C;
  --plum-deep:#523672;
  --muted:#54465A;
  --mauve:#6A5A6E;
  --quote:#3E3346;
  --gold-line:#C9AC74;
  --gold-border:#D4BC8E;
  --gold-dotted:#CDB487;
  --line:#E6D6B8;
  --line-soft:#EADFCB;
  --blush:#F1EAE9;
  --lilac:#EDE5EE;
  --on-lavender:#FBF7FA;
  --on-lavender-body:#F8F3F6;
  --on-lavender-eyebrow:#F8ECD2; /* design had #F6E7C8 (4.4:1), nudged to pass AA */
  --on-lavender-orn:#F6E7C8;
  --footer-text:#F0EAF3;         /* design had #D8CCE0 (3.5:1), nudged to pass AA */
  --strip-divider:#9584B3;
  --about-photo-border:#A592BF;
  --paper:rgba(251,246,238,0.85);
  --paper-ring:rgba(251,246,238,0.55);
  --field-bg:#FFFDF9;
  --field-border:#D9C7A6;
  --error:#9A2F3E;
  --font-display:'Fraunces',serif;
  --font-body:'Nunito Sans',sans-serif;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:90px}
body{margin:0;background:var(--cream)}
a{color:var(--plum)}a:hover{color:var(--plum-deep)}
picture{display:contents}
picture source{display:none}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:4px}
.on-lavender :focus-visible{outline-color:var(--cream)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--lavender);color:var(--cream);padding:10px 18px;border-radius:999px;font-weight:700;text-decoration:none}
.skip-link:focus{top:12px;color:var(--cream)}

.page{background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;overflow:clip}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;background-image:url(../img/paper-grain.webp?v=ebf7bc082a);background-size:480px 480px;pointer-events:none;mix-blend-mode:multiply;opacity:0.9;z-index:5}
.grain::before{content:"";position:absolute;inset:0;background-image:url(../img/gold-flecks.webp?v=e6ff3f79ad);background-size:600px 600px;pointer-events:none;opacity:0.55;z-index:4}

/* ---------- Shared pieces ---------- */
.eyebrow{font-size:13px;letter-spacing:0.24em;text-transform:uppercase;color:var(--plum);font-weight:700;margin:0}
.eyebrow--sm{font-size:11px;text-align:center}
.orn{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);font-size:14px;line-height:1}
.orn::before,.orn::after{content:"";height:1px;width:56px;background:var(--gold-line)}
.orn-l{justify-content:flex-start}
.h2{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(36px,4vw,56px);line-height:1.08;letter-spacing:-0.01em}
.h2--sm{font-size:clamp(30px,3.4vw,46px)}
.h2--wide{max-width:860px}
.it{font-style:italic}
.card{position:relative;background:var(--paper);border:1px solid var(--gold-border);border-radius:24px;box-shadow:0 0 0 7px var(--paper-ring),0 0 0 8px var(--line)}
.arch{border-radius:18px}
.photo{display:block;width:100%;object-fit:cover;border:1px solid var(--gold-border);box-sizing:border-box}
.photo--portrait{position:relative;aspect-ratio:4 / 5;height:auto}
.frame{position:absolute;inset:0;border:1px solid var(--gold-line)}
.deco{position:absolute;pointer-events:none;mix-blend-mode:multiply}
.bg-mark{position:absolute;pointer-events:none}
.btn{display:inline-block;background:var(--lavender);color:var(--cream);text-decoration:none;padding:15px 28px;border-radius:999px;font-weight:600}
.btn:hover{background:var(--lavender-deep);color:var(--cream)}
.text-link,.text-link:hover{font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--plum);text-decoration:none}
.muted{color:var(--muted)}
.quote-mark{font-family:var(--font-display);font-size:64px;line-height:0.5;color:var(--gold);padding-top:18px}

/* ---------- Header + navigation ---------- */
/* The header bar is fixed so it follows the reader; the spacer holds its original
   space so nothing jumps. At the top of the page it looks exactly like the design;
   once scrolled (.is-scrolled, set by site.js) it compacts onto a cream backdrop. */
.header-bar{position:fixed;top:0;left:0;right:0;z-index:30;transition:background-color .2s ease,box-shadow .2s ease}
.header-spacer{height:var(--header-h,110px)}
.header-bar.is-scrolled{background:rgba(246,240,230,0.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line),0 10px 24px -18px rgba(63,46,90,0.35)}
.site-header,.brand img,.brand-name,.brand-role{transition:padding .2s ease,height .2s ease,width .2s ease,font-size .2s ease}
.header-bar.is-scrolled .site-header{padding-top:10px;padding-bottom:10px}
.header-bar.is-scrolled .brand img{height:44px;width:44px}
.header-bar.is-scrolled .brand-name{font-size:25px}
.header-bar.is-scrolled .brand-role{font-size:11px}
.main-nav a.is-current:not(.btn){text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:7px}
@media (prefers-reduced-motion:reduce){.header-bar,.site-header,.brand img,.brand-name,.brand-role{transition:none}}
.site-header{position:relative;max-width:1360px;margin:0 auto;padding:22px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.brand,.brand:hover{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:12px;padding:4px 0}
.brand img{height:58px;width:58px}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:30px}
.brand-role{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mauve)}
.menu-btn{display:none}
.main-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;font-size:16.5px;font-family:var(--font-display)}
.main-nav a:not(.btn),.main-nav a:not(.btn):hover{color:var(--ink);text-decoration:none;padding:10px 0}
.main-nav .btn{padding:12px 22px}
.back-link{font-family:var(--font-display);font-size:16.5px;color:var(--ink);text-decoration:none;padding:10px 0}

/* ---------- Hero ---------- */
.hero-wrap{position:relative}
.hero-sprig{position:absolute;left:0;top:-90px;height:820px;width:auto;max-width:9vw;object-fit:cover;object-position:right;mix-blend-mode:multiply;opacity:0.95}
.hero{position:relative;max-width:1340px;margin:0 auto;padding:30px 28px 80px clamp(28px,8vw,120px);display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.hero-text{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:26px}
.hero-kicker{letter-spacing:0.17em;display:flex;flex-wrap:wrap;gap:4px 12px}
.hero-kicker span{white-space:nowrap}
.hero-title{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(44px,5.6vw,76px);line-height:1.04;letter-spacing:-0.01em}
.hero-lede{margin:0;font-size:19px;max-width:500px;color:var(--muted)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px}
.hero-motto{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:520px;padding-top:10px}
.hero-motto-rule{display:flex;align-items:center;gap:14px;width:100%}
.hero-motto-rule span{flex:1;height:1px;background:var(--gold-line)}
.hero-motto-text{font-size:12.5px;letter-spacing:0.3em;text-transform:uppercase;color:var(--mauve);text-align:center}
.hero-media{flex:1.35 1 560px;min-width:0;position:relative}
.hero-media img{width:100%;height:auto;display:block;mix-blend-mode:multiply}

/* ---------- Highlights strip ---------- */
.strip{position:relative;background:var(--lavender);color:var(--on-lavender)}
.strip-inner{max-width:1340px;margin:0 auto;padding:30px 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;font-size:15px;text-align:center;font-family:var(--font-display);list-style:none}
.strip-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.strip-item+.strip-item{border-left:1px solid var(--strip-divider)}
.strip-item img{width:60px;height:58px}
.strip-item strong{font-weight:400;font-size:23px;color:var(--cream)}

/* ---------- Sections ---------- */
.sec{position:relative}
.sec--rule{border-top:1px solid var(--line)}
.sec--clip{overflow:hidden}
.sec--blush{background:var(--blush)}
.sec--lilac{background:var(--lilac)}
.sec--lavender{background:var(--lavender);color:var(--on-lavender)}
.sec-inner{position:relative;max-width:1240px;margin:0 auto;padding:110px 28px}
.sec-inner--narrow{max-width:1100px}
.sec-inner--reading{max-width:860px}
.sec-inner--pad100{padding:100px 28px}
.stack{display:flex;flex-direction:column;gap:52px}
.stack--56{gap:56px}
.stack--40{gap:40px}
.split{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.split--64{gap:64px}
.sec-head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.sec-head-mark{width:96px;height:96px}
.sec-head-mark--92{width:92px;height:92px}
.sec-intro{margin:0;max-width:640px;color:var(--muted)}
.sec-intro--620{max-width:620px}
.col{min-width:0;display:flex;flex-direction:column}

/* Services overview */
.grid-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:40px}
.svc{padding:32px;display:flex;flex-direction:column;gap:16px}
.svc .photo{height:280px}
.svc h3{margin:-6px 0 0;font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.15;text-align:center}
.svc p{margin:0;color:var(--muted);text-align:center}
.svc p strong{color:var(--ink)}
.svc-link{margin-top:auto}
.svc-links{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 22px}

/* Three-up cards (pregnancy & birth, postpartum) */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
.mini{padding:18px 18px 30px;display:flex;flex-direction:column;gap:12px;text-align:center}
.mini .photo{height:190px}
.mini h3{margin:6px 0 0;font-family:var(--font-display);font-weight:400;font-size:25px}
.mini p{margin:0 10px;color:var(--muted);font-size:15px}
.mini--text{justify-content:center;padding:30px 18px}
.mini-cta{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 6px 0}
.mini-cta--inline{flex:none;padding:14px 6px 0}
.mini-cta .btn{text-align:center;line-height:1.35;padding:16px 26px}
.center-row{display:flex;justify-content:center}

/* Ceremony */
.grid-ceremony{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:40px}
.cer{padding:18px;display:flex;flex-direction:column;gap:18px}
.cer .photo{width:100%;height:260px}
.cer-body{width:100%;display:flex;flex-direction:column;gap:10px;padding:4px 12px 12px;text-align:center;align-items:center}
.cer h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1.15}
.cer p{margin:0;color:var(--muted);font-size:15px}
.cer .text-link{margin-top:auto;font-size:18px;color:var(--lavender)}

/* Retreats */
.retreat-text{flex:1 1 420px;gap:22px}
.notice{padding:26px 28px;max-width:520px;display:flex;flex-direction:column;gap:8px}
.notice strong{font-family:var(--font-display);font-weight:400;font-size:24px}
.notice p{margin:0;color:var(--muted)}
.retreat-media{flex:1 1 400px;min-width:0;position:relative;padding:16px;max-width:500px;margin:0 auto}

/* Pregnancy circle */
.circle-text{flex:1 1 400px;gap:18px}
.circle-text p{margin:0;color:var(--muted)}
.circle-card{flex:1 1 340px;min-width:0;padding:32px;display:flex;flex-direction:column;gap:4px}
.circle-card strong{font-family:var(--font-display);font-weight:400;font-size:24px;text-align:center}
.circle-card p{margin:0 0 14px;color:var(--muted);text-align:center}
.circle-card .btn{text-align:center}

/* About */
.about-photo{flex:1 1 340px;min-width:0;max-width:440px;position:relative;padding:14px}
.about-photo .photo{border-color:var(--about-photo-border)}
.about-text{flex:1 1 480px;gap:22px}
.about-text .eyebrow{color:var(--on-lavender-eyebrow)}
.about-text .h2{color:var(--cream)}
.about-text .orn{color:var(--on-lavender-orn)}
.about-text p{margin:0;color:var(--on-lavender-body)}
.about-text .text-link-light,.about-text .text-link-light:hover{align-self:flex-start;font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--on-lavender)}
.band-left{position:absolute;left:0;bottom:0;height:70%;width:auto;max-width:14vw;object-fit:cover;object-position:left bottom;opacity:0.85}

/* Training & qualifications */
.quals{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin:0;padding:0;list-style:none}
.qual{flex:0 1 340px;min-width:0;padding:22px 26px 24px;display:flex;flex-direction:column;gap:6px;box-sizing:border-box}
.qual-year{margin:0;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--plum);font-weight:700}
.qual h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.25}
.qual p:not(.qual-year){margin:0;color:var(--muted);font-size:15px}

/* Reviews strip */
.rv-wrap{overflow:hidden;margin:0 -28px;padding:14px 0 18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rv-wrap:focus-visible{outline-offset:-2px}
.rv-track{display:flex;gap:36px;width:max-content;animation:rvscroll 150s linear infinite reverse;padding:0 18px}
.rv-wrap:hover .rv-track,.rv-wrap:focus-within .rv-track,.rv-wrap.is-paused .rv-track{animation-play-state:paused}
.rv{flex:0 0 420px;width:420px;box-sizing:border-box;margin:0;padding:40px 34px 34px;display:flex;flex-direction:column;gap:18px;text-align:center}
.rv blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-weight:300;font-size:19px;line-height:1.45}
.rv figcaption,.story-name{font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mauve)}
/* JS-driven mode (site.js): drift + drag/swipe. touch-action keeps vertical page scroll. */
.rv-wrap.is-js{cursor:grab;touch-action:pan-y}
.rv-wrap.is-js .rv-track{animation:none;will-change:transform}
.rv-wrap.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}
@keyframes rvscroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 18px))}}
@media (prefers-reduced-motion:reduce){
  .rv-track{animation:none}
  .rv-wrap{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .rv{scroll-snap-align:center}
  .rv-dup{display:none}
}

/* Contact */
.contact-text{flex:1 1 340px;gap:18px}
.contact-text p{margin:0;color:var(--muted)}
.contact-links{display:flex;flex-direction:column;gap:6px;font-size:16px}
.contact-links a{font-weight:700;padding:6px 0}
.form{flex:1 1 420px;min-width:0;padding:40px;display:flex;flex-direction:column;gap:14px}
.form label{font-weight:600;font-size:15px}
.field{min-height:48px;border-radius:12px;border:1px solid var(--field-border);background:var(--field-bg);padding:0 14px;font:inherit;color:var(--ink)}
textarea.field{padding:12px 14px}
.field[aria-invalid="true"]{border-color:var(--error)}
.field-error{margin:-8px 0 0;font-size:14px;color:var(--error);font-weight:600}
.field-error:empty{display:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-submit{min-height:52px;border:none;font:inherit;font-weight:700;cursor:pointer;margin-top:6px}
.form-submit[disabled]{opacity:0.7;cursor:progress}
.form-note{margin:0;font-size:14px;color:var(--mauve);text-align:center}
.form-status{margin:0;font-size:15px;border-radius:12px;padding:12px 14px;line-height:1.5}
.form-status:empty{display:none}
.form-status.is-ok{background:#EAF1E4;color:#2E4A22;border:1px solid #BCD0AE}
.form-status.is-error{background:#F7E6E6;color:var(--error);border:1px solid #E2BDBD}

/* Full stories */
.story{margin:0;padding:40px 44px;display:flex;flex-direction:column;gap:16px}
.story blockquote{margin:0;display:flex;flex-direction:column;gap:14px;color:var(--quote);font-size:17px;line-height:1.7}
.story blockquote p{margin:0}
.story figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px dotted var(--gold-dotted);padding-top:14px}

/* Footer */
.site-footer{position:relative;background:var(--lavender);color:var(--footer-text)}
.footer-inner{max-width:1240px;margin:0 auto;padding:44px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;font-size:14px}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand img{height:46px;width:46px}
.footer-brand span{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--cream)}
.footer-legal{max-width:1240px;margin:0 auto;padding:0 28px 28px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.footer-legal a,.footer-legal a:hover{color:var(--footer-text)}

/* Privacy / simple text pages */
.prose{max-width:720px;margin:0 auto;padding:40px 28px 100px}
.prose .card{padding:40px 44px}
.prose h1{margin:0 0 6px;font-family:var(--font-display);font-weight:300;font-size:clamp(36px,4vw,52px);line-height:1.1}
.prose h2{margin:28px 0 6px;font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1.25}
.prose p,.prose li{color:var(--muted)}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:22px}

/* ---------- Decorative placements (desktop) ---------- */
.d-svc-gold{width:560px;left:-230px;top:60px;opacity:0.38}
.d-svc-lav{width:520px;right:-220px;bottom:-60px;opacity:0.22}
.d-svc-moon{width:120px;right:8%;top:70px}
.d-more-gold{width:300px;left:-110px;top:60px;opacity:0.4}
.d-more-sprig{height:420px;right:0;top:60px;max-width:12vw;object-fit:cover;object-position:right}
.d-pp-lav{width:520px;left:-220px;top:60px;opacity:0.2}
.d-cer-lav{width:520px;right:-220px;top:40px;opacity:0.2}
.d-ret-lav{width:560px;right:-200px;top:-40px;opacity:0.2}
.d-ret-moon{width:120px;right:-36px;top:-20px}
.d-circle-gold{width:620px;height:620px;left:-220px;top:50%;transform:translateY(-50%);opacity:0.3}
.d-about-cream{width:640px;height:640px;right:-200px;bottom:-220px;opacity:0.22}
.d-quals-gold{width:420px;left:-170px;top:60px;opacity:0.22}
.d-words-lav{width:480px;right:-190px;top:30px;opacity:0.22}
.d-words-sprig{height:180px;left:4%;top:90px}
.d-contact-gold{width:520px;left:-240px;top:-80px;opacity:0.32}
.d-contact-lav{width:220px;left:6%;bottom:40px;opacity:0.2}
.d-contact-sprig{height:380px;right:0;bottom:0;max-width:12vw;object-fit:cover;object-position:right}
.d-stories-gold{width:420px;right:-170px;top:60px;opacity:0.22}

/* Object positions for photo crops */
.op-50-50{object-position:50% 50%}
.op-50-40{object-position:50% 40%}
.op-50-75{object-position:50% 75%}
.op-50-25{object-position:50% 25%}
.op-50-45{object-position:50% 45%}
.op-50-70{object-position:50% 70%}

/* ---------- Phone layout ---------- */
@media (max-width:640px){
  .header-bar,.header-bar.is-scrolled{background:rgba(246,240,230,0.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:none;border-bottom:1px solid var(--line)}
  .header-spacer{height:var(--header-h,81px)}
  .site-header,.header-bar.is-scrolled .site-header{padding:12px 18px;gap:10px;flex-wrap:nowrap;max-width:none}
  .brand img,.header-bar.is-scrolled .brand img{height:40px;width:40px}
  .brand-name,.header-bar.is-scrolled .brand-name{font-size:24px}
  .brand-role,.header-bar.is-scrolled .brand-role{font-size:10px}
  .menu-btn{display:flex;align-items:center;gap:10px;font:inherit;font-family:var(--font-display);font-size:16px;line-height:inherit;color:var(--lavender);background:transparent;border:1px solid var(--gold-line);border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap;flex:none;margin:0}
  .menu-btn i{display:block;width:15px;height:1.5px;background:var(--lavender);box-shadow:0 -5px 0 var(--lavender),0 5px 0 var(--lavender)}
  .menu-btn[aria-expanded="true"]{background:rgba(115,96,154,0.08)}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);border-bottom:1px solid var(--line);padding:6px 24px 22px;box-shadow:0 24px 30px -20px rgba(63,46,90,0.35);font-size:22px}
  .main-nav.is-open{display:flex}
  .main-nav a:not(.btn),.main-nav .btn{padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .main-nav .btn{margin-top:16px;text-align:center;border-bottom:none;font-size:17px;font-family:var(--font-body)}

  .hero-sprig{display:none}
  .hero{padding:0 22px 52px;gap:22px}
  .hero-media{order:-1;flex:none;width:calc(100% + 44px);margin:0 -22px;-webkit-mask-image:radial-gradient(ellipse 82% 92% at 45% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 82% 92% at 45% 50%,#000 62%,transparent 100%)}
  .hero-title{font-size:40px}
  .hero-ctas>a{flex:1 1 100%;text-align:center}

  .sec-inner,.sec-inner--pad100{padding:60px 22px}
  .stack,.split{gap:30px}
  .h2,.h2--sm{font-size:34px}

  .strip-inner{grid-template-columns:1fr 1fr;gap:24px 12px;padding:32px 16px}
  .strip-item:last-child{grid-column:1/-1}
  .strip-item img{border-radius:50%;width:52px;height:52px}
  .strip-item strong{font-size:20px}
  .strip-item+.strip-item{border-left:none}

  .grid-services,.grid-ceremony,.grid-3{grid-template-columns:1fr;gap:30px}
  .svc,.circle-card{padding:24px 22px}
  img{max-width:100%}
  h2,h3,p,blockquote{overflow-wrap:break-word}
  .story,.rv,.form{padding:22px}
  .hero-text,.retreat-text,.form,.about-text,.about-photo,.circle-card,.contact-text{flex-basis:100%}
  .deco{opacity:0.25}
  .footer-inner{padding:32px 22px 28px}
  .footer-legal{padding:0 22px 28px}
  .rv{flex-basis:300px;width:300px}
  /* the design's base .rv-wrap / .rv blockquote rules came after its phone block, so phones keep -28px and 19px */
  .band-left{display:none}
  .qual{flex-basis:100%;padding:20px 22px}
  .prose{padding:28px 22px 60px}
  .prose .card{padding:24px 22px}
}