@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600&family=Parisienne&display=swap");:root{--ink:#3d3a35;--muted:#6b665c;--sage:#8f9b92;--sage2:#b7cabb;--warm:#edebe7;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,-apple-system,sans-serif;--script:"Parisienne",cursive}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--sans);color:var(--ink)}a{text-decoration:none;color:inherit}img{display:block;width:100%}.topbar{height:9px;background:var(--sage)}header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #eee}.head{max-width:1440px;margin:auto;padding:20px 5vw;display:flex;align-items:center;gap:28px;min-height:88px}.brand{margin-right:auto;display:flex;align-items:baseline;gap:11px}.sr{font:31px var(--script)}.name{font:20px var(--serif);letter-spacing:1px;text-transform:uppercase}.desktop-nav{display:flex;gap:25px}.desktop-nav a{font-size:11px;letter-spacing:2px;text-transform:uppercase}.book,.btn{border:1px solid currentColor;padding:14px 22px;font-size:11px;letter-spacing:2px;text-transform:uppercase;display:inline-block}.menu-toggle{display:none;border:0;background:none;padding:10px}.menu-toggle span{display:block;width:25px;height:1px;background:var(--ink);margin:6px}.mobile-menu{display:none}.hero{position:relative;height:clamp(650px,82vh,920px);overflow:hidden;background:#aaa}.hero>img{height:100%;object-fit:cover;object-position:50% 28%}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,24,21,.78),rgba(25,24,21,.42) 36%,transparent 68%)}.hero-copy{position:absolute;z-index:2;left:clamp(24px,6vw,90px);top:50%;transform:translateY(-50%);max-width:520px;color:#fff}.eyebrow{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--sage)}.hero .eyebrow{color:#d7ded8}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h1{font-size:clamp(42px,5vw,68px);line-height:1.06;margin:18px 0}h2{font-size:clamp(30px,4vw,48px)}h3{font-size:23px}p{font-size:16px;line-height:1.8;color:var(--muted)}.hero p{color:#f1eee9}.hero .btn{margin-top:26px}.section{padding:clamp(70px,8vw,110px) 5vw}.soft{background:var(--warm)}.container{max-width:1300px;margin:auto}.title{text-align:center;margin-bottom:50px}.steps,.cards,.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.step{text-align:center;padding:25px}.num{font:italic 22px var(--serif);color:var(--sage)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.portrait{height:620px;background:#faf8f5}.portrait img{height:100%;object-fit:contain}.copy{display:flex;flex-direction:column;gap:20px}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.service{height:620px;position:relative;overflow:hidden;background:#222}.service img{height:100%;object-fit:cover;object-position:center 25%}.service.sarah img{object-fit:contain}.service:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.72))}.service div{position:absolute;z-index:2;left:28px;bottom:28px;color:#fff}.service p{color:#eee}.pagehero{display:grid;grid-template-columns:1fr 1fr;min-height:500px}.pagehero .copy{padding:70px}.pagehero img{height:100%;object-fit:cover;object-position:center 25%}.card,.quote{padding:36px;background:#faf8f5;border-top:4px solid var(--sage2)}.quote{border-top:0;border-left:2px solid var(--sage)}.quote blockquote{font:italic 25px/1.4 var(--serif);margin:0 0 20px}.home-white-cta{padding:clamp(110px,12vw,175px) 20px clamp(130px,14vw,210px);text-align:center;background:#fff}.home-white-cta p{margin:18px auto 32px}.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.info{padding:35px;background:var(--warm)}input,select,textarea{width:100%;padding:13px;margin:7px 0 18px;border:1px solid #ddd}textarea{height:150px}footer{padding:72px 5vw 110px;background:#2f2d29;color:#ddd}.footer-inner{max-width:1300px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:55px}.footer-links{display:flex;flex-direction:column;gap:10px}footer p,footer a{color:#c9c4bb;font-size:14px}.copyright{max-width:1300px;margin:48px auto 0;padding-top:24px;border-top:1px solid #4b4842;font-size:12px}@media(max-width:850px){.desktop-nav,.book{display:none}.menu-toggle{display:block}.mobile-menu{position:fixed;inset:0;z-index:100;background:var(--warm);padding:30px;transform:translateY(-100%);transition:.35s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;visibility:hidden}.mobile-menu.open{transform:translateY(0);visibility:visible}.mobile-menu a{font:32px var(--serif)}.mobile-close{position:absolute;right:24px;top:24px;border:0;background:none;font-size:12px;letter-spacing:2px}.hero{height:78svh;min-height:650px}.hero>img{object-position:58% 24%}.hero:after{background:linear-gradient(0deg,rgba(25,24,21,.82),transparent 72%)}.hero-copy{left:22px;right:22px;top:auto;bottom:35px;transform:none}.steps,.cards,.quotes,.grid2,.services,.pagehero,.contact,.footer-inner{grid-template-columns:1fr}.portrait{height:560px}.service{height:75vh}.pagehero .copy{padding:45px 24px;order:2}.pagehero>div:first-child{min-height:55vh}.pagehero img{height:55vh}.home-white-cta{padding:100px 20px 145px}footer{padding-bottom:120px}}

/* ===== Normal page flow (sticky-stack scroll effect removed) ===== */
main{position:relative}
main > section{
  position:static;
  min-height:0;
  background:#fff;
}

/* Section backgrounds so they don't bleed through */
main > section.soft{background:var(--warm,#edebe7)}
main > section.hero,main > section.pagehero{background:#1a1815}

/* Kill previous reveal states so nothing stays hidden */
[data-reveal],[data-stagger] > *,.reveal-img::after,.reveal-img img,.hero-copy,.pagehero .copy{
  opacity:1!important;transform:none!important;transition:none!important
}
.reveal-img::after{display:none!important}

/* ===== Lighten dark backgrounds site-wide ===== */
:root{--cream:#f4f1ec;--stone:#e9e6df}

/* pagehero split panel — was #1a1815 */
main > section.pagehero,.pagehero{background:var(--cream)!important}
.pagehero .copy{color:var(--ink)}
.pagehero .copy .eyebrow{color:var(--sage)}

/* footer — was #2f2d29 with light text */
footer{background:var(--cream)!important;color:var(--ink)!important;border-top:1px solid #e2ded6}
footer p,footer a{color:var(--muted)!important}
footer h3,footer h4,footer .brand{color:var(--ink)!important}
.copyright{border-top-color:#e2ded6!important;color:var(--muted)!important}

/* service card fallback — was #222 (image sits over it, but keep it soft) */
.service{background:var(--stone)!important}

/* hero fallback bg (image covers it, but if it flashes make it soft) */
main > section.hero{background:var(--cream)!important}

/* ===== Hero: give more height so text isn't clipped ===== */
.hero{height:auto;min-height:100vh}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero-copy{
  position:relative;
  top:auto;transform:none;
  padding:clamp(120px,18vh,220px) clamp(24px,6vw,90px) clamp(80px,14vh,160px);
  max-width:min(560px,92vw);
  z-index:2;
}
@media (max-width:720px){
  .hero{min-height:100svh}
  .hero-copy{padding:clamp(100px,14vh,160px) 24px clamp(70px,10vh,120px)}
}

/* ===== Colour Analysis feature ===== */
.colour-analysis{background:#efece5}
.colour-analysis .container.grid2{gap:clamp(40px,6vw,90px);align-items:center}
.colour-analysis .ca-copy .eyebrow{color:var(--sage)}
.colour-analysis .ca-copy h2{margin:.15em 0 .35em;font-size:clamp(38px,4.6vw,64px);line-height:1.02}
.colour-analysis .ca-copy .lead{font-size:clamp(18px,1.35vw,22px);line-height:1.5;color:var(--ink);margin-bottom:1em}
.colour-analysis .ca-copy p{color:var(--muted);line-height:1.65}
.colour-analysis .ca-copy em{font-family:"Parisienne",cursive;font-style:normal;color:var(--sage)}
.ca-list{list-style:none;padding:0;margin:1.4em 0 1.8em;display:grid;grid-template-columns:1fr 1fr;gap:.55em 1.5em}
.ca-list li{position:relative;padding-left:1.1em;color:var(--ink);font-size:.98rem}
.ca-list li:before{content:"";position:absolute;left:0;top:.65em;width:.5em;height:.5em;border-radius:999px;background:var(--sage)}
.ca-visual{position:relative}
.ca-visual img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;display:block}
/* This section's photo (20260723Sarah-104.jpg) is landscape, not portrait
   like the original — a 4:5 box would crop away nearly half its width, so
   use a box closer to the photo's own 3:2 shape instead. */
.ca-visual img{aspect-ratio:4/3;object-position:center center}
.ca-palette{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:14px}
.ca-palette span{aspect-ratio:1;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.06) inset,0 1px 3px rgba(0,0,0,.05)}
@media (max-width:820px){
  .colour-analysis .container.grid2{grid-template-columns:1fr}
  .ca-list{grid-template-columns:1fr}
}

/* Full-width top bar in the brand-kit sage green (#8f9b92).
   Text is the deep ink rather than cream: white on this green is only
   2.8:1 contrast (fails WCAG AA for 11px nav text), ink gives 5.2:1. */
.topbar{display:none}
header{background:#8f9b92;border-bottom:none}
.head .brand,.head .name,.head .brand-sub{color:#2a2622!important}
.brand{flex-direction:column;align-items:flex-start;gap:1px;line-height:1.1}
.brand .name{font:20px var(--serif);letter-spacing:2px;text-transform:uppercase}
.brand-sub{font-size:9px;letter-spacing:4px;text-transform:uppercase;font-family:var(--sans);opacity:.85}
.desktop-nav a{color:#2a2622}
.desktop-nav a:hover{color:#f4f1ec}
.book{background:#2a2622;color:#f4f1ec!important;border-color:#2a2622}
.book:hover{background:#1c1b14;border-color:#1c1b14}
.menu-toggle span{background:#2a2622}
.mobile-menu a{color:#2a2622}
@media(max-width:850px){
  header{background:#8f9b92}
}

/* Shorter nav bar, so more of the hero photo shows above the fold */
.head{padding:10px 5vw!important;min-height:60px!important;gap:20px}
.sr{font-size:23px!important}
.name{font-size:15px!important}
.head .book{padding:10px 18px!important}
.desktop-nav a{font-size:10px!important}
@media(max-width:850px){
  .head{min-height:56px!important;padding:8px 20px!important}
}

/* ---- Homepage "Hi, I'm Sarah" band: photo fills the left half of the
   screen edge-to-edge, copy sits in the right half. object-fit:cover so
   the photo genuinely fills its half (it is cropped to do so). ---- */
.intro-sarah{padding:0!important}
.intro-sarah > .container{max-width:none;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.intro-sarah .portrait{height:clamp(380px,52vh,620px);min-height:0;background:none;margin:0}
.intro-sarah .portrait img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 32%}
.intro-sarah .copy{padding:clamp(40px,5vw,90px);justify-content:center;max-width:620px}
@media(max-width:850px){
  .intro-sarah > .container{grid-template-columns:1fr}
  .intro-sarah .portrait{height:clamp(320px,52svh,460px)}
  .intro-sarah .copy{padding:34px 24px;max-width:none}
}

/* ===== Homepage hero: full-bleed, edge-to-edge =====
   The photo is portrait-shaped, so filling the full screen width means
   cropping it: object-position is tuned so her hair (6% into the file),
   face (17%) and the mug (43%) all stay inside the visible band. */
.home-hero{position:relative;overflow:hidden;background:var(--cream);width:100%;height:min(1500px,116svh)!important;min-height:560px!important;padding:0;display:block;margin-bottom:clamp(70px,8vw,130px)}
.home-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;z-index:0}
.home-hero:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(25,24,21,.62),rgba(25,24,21,.28) 42%,rgba(25,24,21,.05) 66%)}
.home-hero .hero-copy{position:absolute!important;z-index:2;left:clamp(22px,6vw,90px);top:50%!important;transform:translateY(-50%)!important;max-width:min(560px,80vw);padding:0!important;color:#fff}
.home-hero .hero-copy .eyebrow{color:#d7ded8}
.home-hero .hero-copy h1{font-size:clamp(36px,4.6vw,66px);margin:16px 0 18px;color:#fff}
.home-hero .hero-copy p{color:#f1eee9}
.home-hero .hero-copy .btn{color:#fff;border-color:#fff;margin-top:26px}
@media(max-width:850px){
  .home-hero{height:78svh!important;min-height:460px!important;margin-bottom:clamp(48px,10vw,80px)}
  .home-hero .hero-bg{object-position:52% 8%}
  .home-hero:after{background:linear-gradient(0deg,rgba(25,24,21,.78),rgba(25,24,21,.15) 62%)}
  .home-hero .hero-copy{left:22px;right:22px;top:auto!important;bottom:34px;transform:none!important;max-width:none}
}

/* Homepage: alternate light backgrounds between sections so each one
   reads as distinct from the one above/below it (no dark backgrounds) */
main > section.soft,.soft{background:#fff!important}
main > section.about-teaser,.about-teaser{background:var(--warm)!important}
main > section.services-heading{background:#fff!important}
main > section.home-quote,.home-quote{background:var(--brand-green,var(--sage2))!important}

/* Premium redesign pass: more generous, deliberate spacing between
   sections; refined section intros; gallery grid; homepage quote band.
   Palette, type and structure stay the same — this is spacing + content. */
.section{padding:clamp(112px,13vw,200px) 5vw}
.title{margin-bottom:64px}
.title-lead{max-width:560px;margin:18px auto 0;font-size:17px;line-height:1.75;color:var(--muted)}
.title-lead + .title-lead{margin-top:16px}
/* ---- Contact page: image left, details + form right ---- */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);align-items:center}
.contact-media img{width:100%;height:clamp(420px,64vh,620px);object-fit:cover;object-position:center 30%;border-radius:4px}
.contact-panel{max-width:560px}
.contact-panel h1{font-size:clamp(32px,3.4vw,50px);margin:14px 0 16px}
.contact-intro{margin-bottom:26px}
.contact-details{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid #e2ded6}
.contact-details a{border-bottom:1px solid var(--sage)}
.enquiry-form{margin:0 0 38px}
.enquiry-form label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sage);margin-top:14px}
.enquiry-form input,.enquiry-form select{margin:6px 0 0;background:#fff;font-family:var(--sans);font-size:15px;border:1px solid #ddd8d0}
.enquiry-form input:focus,.enquiry-form select:focus{outline:none;border-color:var(--sage)}
.enquiry-form button{margin-top:22px;background:none;cursor:pointer;font-family:var(--sans)}
.cm-heading{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.contact-methods{display:grid;gap:0;margin:0 0 32px;border-top:1px solid #e2ded6;padding-top:18px}
.contact-method{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #e2ded6;transition:color .2s}
a.contact-method:hover{color:var(--sage)}
.cm-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sage)}
.cm-value{font-size:16px;text-align:right}
.contact-method.is-static .cm-value{color:var(--muted)}
.contact-primary{margin-top:4px}
@media(max-width:850px){
  .contact-split{grid-template-columns:1fr}
  .contact-media img{height:clamp(280px,42vh,400px)}
  .contact-panel{max-width:none}
}

.tile-price{display:block;margin-top:10px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#fff;opacity:.85}
.steps-footnote{text-align:center;margin-top:44px;font-size:15px;color:var(--muted)}
.steps-footnote a{border-bottom:1px solid var(--sage);white-space:nowrap}
.step strong{font-weight:500;color:var(--ink)}
main > section.vision,.vision{background:var(--warm)!important}
.vision .title{margin-bottom:0}
.steps,.cards,.quotes{gap:44px}
.step p{margin-top:6px}
.grid2{gap:clamp(50px,7vw,110px)}

.services-heading .title{margin-bottom:0}
.services-heading .services{margin:clamp(50px,7vw,80px) -5vw 0}
@media(max-width:850px){.services-heading .services{margin:clamp(50px,7vw,80px) -6vw 0}}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.gallery-grid img{width:100%;height:380px;object-fit:cover;border-radius:6px;display:block}
.gallery-grid img:nth-child(2),.gallery-grid img:nth-child(5){object-position:center 20%}

.home-quote .title{margin-bottom:32px;text-align:center}
.home-quote .quotes{margin-bottom:56px}
.home-quote .quote{background:#fff;text-align:left}
.home-quote .quote blockquote{font-size:19px}
.home-quote .quote cite{display:block;margin-top:16px;font:italic 17px var(--serif);font-style:italic;color:var(--ink)}

@media(max-width:850px){
  .section{padding:clamp(64px,14vw,96px) 6vw}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .gallery-grid img{height:220px}
}

/* Services row (heading + 3 images) was taller than one screen — with the
   sticky-stack scroll effect that meant a long extra scroll before the next
   section could take over. Tighten the spacing and let the image height
   scale with viewport height so the whole section fits one screen again. */
main > section.services-heading{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.services-heading .services{margin-top:clamp(24px,3vw,40px)}
.services-more{max-width:1300px;margin:22px auto 0;padding:0 5vw;text-align:center;font-size:13px;line-height:2;color:var(--muted)}
.services-more span:not(.sep){letter-spacing:1px;text-transform:uppercase;font-size:11px;color:var(--sage);margin-right:6px}
.services-more a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ccc}
.services-more a:hover{color:var(--sage);text-decoration-color:var(--sage)}
.services-more .sep{margin:0 8px;color:#ccc}
.services-cta{text-align:center;margin-top:24px}
@media(min-width:851px){
  .service{height:min(620px,50vh)}
}
@media(max-width:850px){
  /* On mobile the 3 services stack vertically (1 above the other), so the
     old fixed 75vh each meant ~225vh of images alone inside one pinned
     section. Scale each card down so all 3 stacked cards fit one screen. */
  .service{height:clamp(120px,19vh,190px)}
  .services-more{margin-top:16px;line-height:1.8;font-size:12px}
  .services-cta{margin-top:16px}
}

/* ===== Page heroes (all pages use normal flow now) =====
   grid-template-rows:minmax(0,1fr) caps the single row at the section's
   real height — without it a grid item won't shrink below its content's
   natural size, so a tall portrait photo blows the section open and the
   overflow hides behind the next section. */
main > section.pagehero{
  min-height:auto;
  height:clamp(340px,52vh,520px);
  overflow:hidden;
}
.pagehero{
  grid-template-rows:minmax(0,1fr);
  overflow:hidden;
}
.pagehero > div:first-child{
  min-height:0;
  height:100%;
  overflow:hidden;
}
.pagehero .copy{
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px clamp(28px,4vw,60px);
}
@media(max-width:850px){
  main > section.pagehero{
    height:auto;
    overflow:visible;
  }
  .pagehero,
  .pagehero > div:first-child{
    height:auto;
  }
  .pagehero{
    grid-template-rows:auto;
    overflow:visible;
  }
}

/* ---- Services overview: one full-screen section per service ----
   Image and info side by side; the photo is shown whole (contain), not
   cropped, so portrait and landscape shots both display in full. ---- */
.service-full{min-height:100vh;display:flex;align-items:center;padding:clamp(40px,6vh,80px) 5vw}
.service-full .sf-inner{max-width:1300px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.service-full:nth-of-type(even) .sf-media{order:2}
.service-full .sf-media{min-height:0;display:flex;justify-content:center}
.service-full .sf-media img{width:auto;max-width:100%;height:auto;max-height:calc(100vh - 200px);object-fit:contain}
.service-full .sf-info{max-width:520px}
.service-full .sf-info h2{margin:14px 0 18px;font-size:clamp(32px,3.6vw,54px);line-height:1.05}
.service-full .sf-info p{margin-bottom:22px}
.sf-price{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sage);margin-bottom:26px}
@media(max-width:850px){
  .service-full{min-height:0;padding:clamp(44px,8vw,70px) 6vw}
  .service-full .sf-inner{grid-template-columns:1fr;gap:26px}
  .service-full:nth-of-type(even) .sf-media{order:0}
  .service-full .sf-media img{max-height:52svh}
  .service-full .sf-info{max-width:none}
}

/* ---- Services overview: hero CTA + service group cards ---- */
.pagehero .copy .btn{margin-top:8px}
.pagehero + .service-group{padding-top:clamp(90px,11vw,140px)}
.service-group .title{text-align:left;max-width:640px;margin:0 0 36px}
.service-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.service-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ece8e1;text-align:left}
.service-card .thumb{height:220px;overflow:hidden;background:var(--stone)}
.service-card.wide .thumb{height:min(52vw,460px)}
@media(max-width:850px){.service-card.wide .thumb{height:280px}}
.service-card .thumb img{width:100%;height:100%;object-fit:cover}
.service-card .body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.service-card h3{font-size:22px}
.service-card p{font-size:15px;line-height:1.6;margin:10px 0 18px;flex:1}
.service-card .meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage);border-top:1px solid #eee;padding-top:16px}
.service-card .meta .price{color:var(--muted);letter-spacing:.5px;text-transform:none;font-size:13px}
.service-card:hover h3{color:var(--sage)}

/* ---- Featured package band (Complete Style Edit) ---- */
.featured-package{background:var(--sage2)}
.featured-package .container{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,90px);align-items:center;max-width:1300px}
.featured-package .eyebrow{color:#3a4033}
.featured-package h2{margin:.2em 0 .3em;font-size:clamp(32px,3.6vw,46px)}
.featured-package p{color:#2f3329}
.journey-mini{display:flex;gap:22px;margin:26px 0 30px}
.journey-mini div{flex:1}
.journey-mini .num{font:italic 20px var(--serif);color:#3a4033}
.journey-mini h4{font-size:15px;margin:4px 0 4px}
.journey-mini p{font-size:13px;color:#3f4438;margin:0}
.featured-package .price-line{font:italic 28px var(--serif);color:var(--ink);margin-bottom:20px}
.featured-package .btn{border-color:#242920;color:#242920}
.featured-package .btn:hover{background:#242920;color:#fff}
.featured-visual{height:clamp(320px,38vw,480px);overflow:hidden}
.featured-visual img{width:100%;height:100%;object-fit:cover}
@media(max-width:850px){
  .featured-package .container{grid-template-columns:1fr}
  .featured-visual{order:-1;height:280px}
  .journey-mini{flex-direction:column;gap:16px}
}

/* ---- Service detail pages ---- */
.back-link{display:inline-block;margin:0 0 22px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sage)}
.detail-body{max-width:740px;margin:0 auto}
.detail-body h2{margin:1.7em 0 .5em;font-size:clamp(25px,3vw,32px)}
.detail-body h2:first-of-type{margin-top:0}
.detail-body p{margin:0 0 1.1em;line-height:1.75;color:var(--muted)}
.detail-body .lead{font-size:clamp(18px,1.3vw,21px);color:var(--ink);line-height:1.6}
.detail-list{list-style:none;padding:0;margin:1.1em 0 1.9em;display:grid;grid-template-columns:1fr 1fr;gap:.6em 2em}
.detail-list li{position:relative;padding-left:1.2em;color:var(--ink);font-size:.98rem;line-height:1.55}
.detail-list li:before{content:"";position:absolute;left:0;top:.6em;width:.5em;height:.5em;border-radius:999px;background:var(--sage)}
@media(max-width:720px){.detail-list{grid-template-columns:1fr}}
.investment{background:var(--warm);border-top:4px solid var(--sage2);padding:34px 38px;margin:2.2em 0}
.investment .price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.investment .price{font:italic 32px var(--serif);color:var(--ink)}
.investment .duration{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--sage)}
.investment p{margin:.9em 0 0;color:var(--muted);font-size:.95rem}
.detail-cta{text-align:center;padding:8px 0 4px}
.detail-cta .btn{margin-right:14px}
@media(max-width:600px){.detail-cta .btn{display:block;margin:0 0 14px}}

.photo-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(160deg,var(--warm),var(--sage2));text-align:center}
.photo-placeholder .sr{font-size:40px;color:var(--sage)}
.photo-placeholder .note{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* .portrait (about.html, homepage about-teaser + intro-sarah) was a fixed
   620px/560px tall regardless of screen height, so on shorter viewports the
   whole grid2 section overflowed one screen — with the sticky-stack scroll
   effect that meant a long stuck scroll before the next section appeared.
   Scale it to the viewport instead, same fix as the homepage services row. */
@media(min-width:851px){.portrait{height:min(620px,52vh)}}
@media(max-width:850px){.portrait{height:min(360px,34vh)}}

.bg-white{background:#fff!important}
.bg-warm{background:var(--warm)!important}
.bg-cream{background:var(--cream)!important}

.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:1.4em 0 1.8em}
.explore-grid h3{margin-bottom:8px;color:var(--ink)}
.explore-grid p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65}
@media(max-width:720px){.explore-grid{grid-template-columns:1fr}}

.journey-mini + .price-line,.price-line{font:italic 24px var(--serif);color:var(--ink);margin-bottom:18px}
.detail-body .journey-steps{margin:1.4em 0 2em}

/* ---- Services page: uniform, bordered service boxes ----
   Each service is one outlined box that runs the full width of the screen
   (the 1300px container cap and wide side gutters are dropped here), all the
   same height, with an identical two-column grid so the image edge and the
   text column line up from one box to the next. The photo fills its half
   flush to the border — cover, not contain — which is what keeps the boxes
   identical and the images as large as the column allows. ---- */
.service-full{border:0;padding:0}
@media(min-width:851px){
  .service-full{min-height:0;height:100svh;align-items:stretch;padding:0 clamp(18px,2.4vw,40px)}
  .service-full .sf-inner{max-width:none;height:100%;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;border:1px solid rgba(61,58,53,.22);overflow:hidden}
  .service-full .sf-media{height:100%;justify-content:stretch}
  .service-full .sf-media img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center 26%}
  .service-full .sf-info{max-width:none;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,4vw,76px)}
  .service-full .sf-info > *{max-width:640px}
  .service-full .sf-info h2{margin:16px 0 22px}
  .service-full .sf-info p{margin-bottom:26px;font-size:17px;line-height:1.85}
}
@media(max-width:850px){
  .service-full{padding:22px 18px}
  .service-full .sf-inner{border:1px solid rgba(61,58,53,.22);gap:0}
  .service-full .sf-media img{width:100%;height:clamp(300px,46svh,420px);max-height:none;object-fit:cover;object-position:center 26%}
  .service-full .sf-info{padding:30px 24px 34px}
}

/* Services hero: full viewport height (header 88px + topbar 9px removed). */
main > section.pagehero.pagehero-tall{height:calc(100svh - 97px);min-height:560px}
@media(max-width:850px){
  main > section.pagehero.pagehero-tall{height:auto;min-height:0}
}

/* ---- Homepage "Hi, I'm Sarah": full-height section with breathing room ----
   The portrait is a 3:2 landscape shot, so cover-cropping it into a tall
   half-width column cut the photo badly — contain shows it whole against the
   warm ground, and the section padding gives the panel space above and below. */
.intro-sarah{padding:clamp(70px,9vh,130px) 0!important;min-height:100svh;display:flex;align-items:center}
.intro-sarah > .container{width:100%}
.intro-sarah .portrait{height:auto;min-height:clamp(420px,58vh,700px);background:var(--warm)}
.intro-sarah .portrait img{object-fit:contain;object-position:center}
@media(max-width:850px){
  .intro-sarah{padding:clamp(48px,8vw,80px) 0!important;min-height:0;display:block}
  .intro-sarah .portrait{height:auto;min-height:clamp(280px,42svh,420px)}
}

/* ---- Services dropdown in the top nav ----
   Hover on desktop, :focus-within for keyboard; an invisible ::after bridges
   the gap between the link and the panel so the hover doesn't drop out. ---- */
.desktop-nav{align-items:center}
.nav-services{position:relative;display:flex;align-items:center}
.nav-services > .nav-services-top{display:flex;align-items:center;gap:7px}
.nav-services .caret{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s,opacity .25s;opacity:.65}
.nav-services:hover .caret,.nav-services:focus-within .caret{opacity:1;transform:rotate(225deg) translate(-2px,-2px)}
.nav-services::after{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:26px}
.nav-drop{position:absolute;top:calc(100% + 24px);left:50%;transform:translate(-50%,-8px);min-width:268px;display:flex;flex-direction:column;background:#fff;border:1px solid #eae7e1;box-shadow:0 18px 44px rgba(45,42,38,.13);padding:12px 0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s;z-index:40}
.nav-services:hover .nav-drop,.nav-services:focus-within .nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.desktop-nav .nav-drop a{font-size:12px;letter-spacing:.6px;text-transform:none;color:var(--ink);padding:10px 24px;line-height:1.35;transition:background .2s,color .2s;white-space:nowrap}
.desktop-nav .nav-drop a:hover{background:var(--warm);color:var(--sage)}

/* Mobile menu: the sub-services sit under Services as a quieter list. */
.mobile-sub{display:flex;flex-direction:column;align-items:center;gap:12px;margin:2px 0 6px}
.mobile-menu .mobile-sub a{font:15px var(--sans);letter-spacing:.4px;color:var(--muted)}
@media(max-width:850px){
  .mobile-menu{overflow-y:auto;justify-content:flex-start;padding:84px 30px 48px;gap:18px}
  .mobile-menu a{font-size:26px}
}

/* ---- Brand kit green, unified ----
   #b7cabb is the lighter green from Sarah's actual brand kit (the other
   swatch, #8f9b92, stays as --sage for small text/accents — see note below).
   --brand-green now equals --sage2 exactly: footer, closing band, topbar and
   any other fill/background use of green are all this one value. ---- */
:root{--brand-green:#b7cabb}

/* ---- Header/nav: white bar, brand green text (Option C) ----
   --nav-green is deliberately darker than --brand-green: the pale brand
   green is a background colour, not a text colour — at nav/eyebrow text
   sizes on white it fails contrast badly (~1.7:1; WCAG AA needs 4.5:1). This
   is the same reason the very first header pass switched white-on-green nav
   text to ink — see the topbar comment above. Kept separate from
   --brand-green so the footer and closing band (which use the pale green as
   a background fill, where it reads perfectly well) are unaffected. */
:root{--nav-green:#5f7a6f}
.topbar{background:var(--brand-green)}
header{background:#fff;border-bottom:1px solid #eee}
header .brand,header .desktop-nav a,header .menu-toggle span,.nav-ig{color:var(--nav-green)}
header .menu-toggle span{background:var(--nav-green)}
.desktop-nav a{position:relative}
.desktop-nav > a:hover,.nav-services:hover > .nav-services-top{opacity:.68}
@media(max-width:850px){.mobile-menu{background:#fff}}
@media(max-width:850px){.mobile-menu a{color:var(--nav-green)}.mobile-menu .mobile-sub a{color:var(--nav-green);opacity:.82}.mobile-menu .mobile-ig{color:var(--nav-green)}.mobile-close{color:var(--nav-green)}}
.desktop-nav .nav-drop .nav-drop-all{margin-top:8px;padding-top:15px;border-top:1px solid #eae7e1;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--sage)}

/* Numbered services (01–08) on the Services page — CSS counter so the
   sequence stays right if a service is added, removed or reordered. */
main{counter-reset:svc}
.service-full{counter-increment:svc}
.service-full .sf-info h2::before{content:counter(svc,decimal-leading-zero);display:inline-block;margin-right:16px;font:italic .52em var(--serif);color:var(--sage);vertical-align:baseline;letter-spacing:1px}
@media(max-width:850px){.service-full .sf-info h2::before{margin-right:12px}}

/* Per-service focal points. The boxes are landscape but several photos are
   2:3 portraits, so a centred cover-crop cut heads off; each one is pinned
   near the subject's face instead. */
#discover-your-style .sf-media img{object-position:center 38%}
#colour-analysis .sf-media img{object-position:center 22%}
#wardrobe-edit .sf-media img{object-position:center 42%}
#personal-shopping .sf-media img{object-position:center 12%}
#online-edit .sf-media img{object-position:center 30%}
#style-hour .sf-media img{object-position:center 28%}
#group-colour .sf-media img{object-position:center 40%}
#mens-style-edit .sf-media img{object-position:center 10%}

/* ---- Instagram link ---- */
.desktop-nav .nav-ig{display:flex;align-items:center;color:var(--nav-green,var(--ink));opacity:.8;transition:opacity .2s,transform .2s}
.desktop-nav .nav-ig:hover{opacity:1;transform:translateY(-1px)}
.mobile-menu .mobile-ig{display:flex;align-items:center;gap:10px;font:12px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--nav-green,var(--ink));opacity:.85;margin-top:4px}
.mobile-menu .mobile-ig svg{width:19px;height:19px}

/* ---- About page: long-form story sections ---- */
.story-section .prose{max-width:790px;margin:0 auto}
.story-section .prose h2{margin:14px 0 30px}
.story-section .prose p{font-size:17px;line-height:1.9;margin-bottom:22px}
.story-section .prose p.lead-para{font-size:20px;line-height:1.75;color:var(--ink)}
.story-section .prose em{font-style:italic}
.story-section .prose-quote{font:italic 26px/1.5 var(--serif)!important;color:var(--ink)!important;border-left:2px solid var(--sage);padding-left:26px;margin:36px 0 34px!important}
.story-section .btn{margin-top:4px}
@media(max-width:850px){
  .story-section .prose p{font-size:16px}
  .story-section .prose p.lead-para{font-size:18px}
  .story-section .prose-quote{font-size:21px!important;padding-left:18px}
}

/* Homepage hero: headline, supporting line, then the detail paragraph. */
.home-hero .hero-copy{max-width:620px}
.home-hero .hero-sub{font:400 clamp(20px,2vw,26px)/1.45 var(--serif);color:#f4f1ec;margin-top:-4px}
.home-hero .hero-copy > p:not(.hero-sub){font-size:16px;line-height:1.8;margin-top:16px;max-width:560px}
@media(max-width:850px){
  .home-hero .hero-copy{max-width:none}
  .home-hero .hero-sub{font-size:19px}
  .home-hero .hero-copy > p:not(.hero-sub){font-size:15px;line-height:1.7}
}

/* Homepage "About Sarah": full-bleed split — photo fills the left half of the
   screen, copy sits in the right half. */
.about-teaser{padding:0!important}
.about-teaser > .container{max-width:none;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.about-teaser .portrait{height:auto;min-height:clamp(440px,64vh,760px);margin:0;background:var(--warm)}
.about-teaser .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 26%}
.about-teaser .copy{justify-content:center;padding:clamp(40px,5vw,90px);max-width:660px}
@media(max-width:850px){
  .about-teaser > .container{grid-template-columns:1fr}
  .about-teaser .portrait{min-height:clamp(320px,48svh,460px)}
  .about-teaser .copy{padding:34px 24px;max-width:none}
}

/* ---- About page: photo and text side by side, half the screen each ----
   The story text is long, so the photo column is sticky: it stays filling its
   half of the screen while the copy scrolls beside it. ---- */
.story-split{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.story-split .story-media{position:sticky;top:97px;height:calc(100svh - 97px);background:var(--warm);overflow:hidden}
.story-split .story-media img{width:100%;height:100%;object-fit:cover;object-position:center 26%}
.story-split.reverse .story-media{order:2}
.story-split .story-prose{padding:clamp(60px,6.5vw,120px) clamp(28px,4.5vw,86px);max-width:760px;min-height:calc(100svh - 97px);display:flex;flex-direction:column;justify-content:center}
.story-split.reverse .story-prose{margin-left:auto}
.story-split .story-prose h2{margin:14px 0 28px}
.story-split .story-prose p{font-size:17px;line-height:1.9;margin-bottom:22px}
.story-split .story-prose p.lead-para{font-size:20px;line-height:1.75;color:var(--ink)}
.story-split .story-prose em{font-style:italic}
.story-split .prose-quote{font:italic 25px/1.5 var(--serif)!important;color:var(--ink)!important;border-left:2px solid var(--sage);padding-left:24px;margin:32px 0 30px!important}
.story-split .btn{align-self:flex-start;margin-top:4px}
.about-intro .story-prose{min-height:clamp(420px,58vh,640px)}
.about-intro .story-media{height:clamp(420px,58vh,640px);position:static}
@media(max-width:850px){
  .story-split{grid-template-columns:1fr}
  .story-split .story-media,.about-intro .story-media{position:static;height:clamp(320px,48svh,460px)}
  .story-split.reverse .story-media{order:0}
  .story-split .story-prose{padding:40px 24px 48px;max-width:none;min-height:0}
  .story-split .story-prose p{font-size:16px}
  .story-split .story-prose p.lead-para{font-size:18px}
  .story-split .prose-quote{font-size:21px!important;padding-left:18px}
}

/* About page now opens straight into the story split — its h1 sits where an
   h2 did, so match the heading scale to the rest of the section. */
.story-split .story-prose h1{font-size:clamp(34px,4vw,54px);line-height:1.08;margin:14px 0 28px}

/* Homepage "Hi, I'm Sarah": centre the copy in its half instead of letting it
   sit hard left with dead space to the right. */
.intro-sarah .copy{max-width:640px;margin:0 auto;align-items:center;text-align:center}
.intro-sarah .copy .btn{align-self:center}
@media(max-width:850px){.intro-sarah .copy{max-width:none;margin:0}}

/* Outline the "Hi, I'm Sarah" panel so the photo and the copy read as one
   boxed section, the same treatment as the service boxes. */
.intro-sarah{padding:clamp(70px,9vh,130px) clamp(18px,2.4vw,40px)!important;border:0}
.intro-sarah > .container{border:1px solid rgba(61,58,53,.22);overflow:hidden}
@media(max-width:850px){.intro-sarah{padding:clamp(48px,8vw,80px) 18px!important}}

/* Footer in the brand green, matching the header band. */
footer{background:var(--brand-green)!important;color:var(--ink)!important;border-top:1px solid rgba(61,58,53,.16)!important}
footer h3,footer h4,footer .brand{color:var(--ink)!important}
footer p,footer a{color:var(--ink)!important;opacity:.82}
footer a:hover{opacity:1}
.copyright{border-top-color:rgba(61,58,53,.22)!important;color:var(--ink)!important;opacity:.72}

/* Homepage hero framing: the photo is a tall 1600x1896 portrait, so a 28%
   vertical offset was cutting the top of Sarah's head off. 5% leaves a small
   gap between her head and the menu bar at every desktop width. */

/* ---- Homepage hero: split layout, whole photo visible ----
   The old full-bleed cover crop cut off Sarah's feet on a tall portrait shot.
   A two-column split shows the photo in full (contain) against a soft ground,
   with the copy given its own half rather than overlaid on the image. */
.home-hero-split{display:grid;grid-template-columns:1.02fr 1fr;align-items:stretch;height:auto!important;min-height:0!important;background:var(--warm);margin-bottom:clamp(70px,8vw,130px)!important;overflow:visible}
.home-hero-split:after{display:none}
.home-hero-split .home-hero-media{position:relative;height:min(820px,92vh);overflow:hidden;background:var(--warm)}
.home-hero-split .home-hero-media .hero-bg{position:static;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.home-hero-split .hero-copy{position:static!important;transform:none!important;color:var(--ink);padding:clamp(50px,7vw,100px) clamp(28px,4.5vw,80px)!important;display:flex;flex-direction:column;justify-content:center;max-width:540px}
.home-hero-split .hero-copy .eyebrow{color:var(--sage)}
.home-hero-split .hero-copy h1{color:var(--ink)}
.home-hero-split .hero-copy .hero-sub{color:var(--ink)}
.home-hero-split .hero-copy p:not(.hero-sub){color:var(--muted)}
.home-hero-split .hero-copy .btn{color:var(--ink);border-color:var(--ink)}
@media(max-width:850px){
  .home-hero-split{grid-template-columns:1fr}
  .home-hero-split .home-hero-media{height:min(70svh,560px);order:-1}
}

/* Style Hour photo: tall 2:3 portrait, subject roughly mid-frame. */
.detail-split .detail-media img[src$="service-style-refresh.jpg"]{object-position:center 20%}

/* ---- Service detail pages: same boxed layout as the Services page ----
   One outlined box running the full width of the screen, photo flush to the
   border filling its half, service details in the other half. Sides alternate
   from one service to the next. ---- */
.detail-split{padding:clamp(18px,2vw,34px) clamp(18px,2.4vw,40px)}
.detail-split .detail-inner{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;border:1px solid rgba(61,58,53,.22);overflow:hidden}
.detail-split .detail-media{min-height:0;overflow:hidden}
.detail-split .detail-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.detail-split.reverse .detail-media{order:2}
.detail-split .detail-prose{max-width:none;margin:0;padding:clamp(40px,4vw,76px);display:flex;flex-direction:column;justify-content:center}
.detail-split .detail-prose > *{max-width:640px}
.detail-split .detail-prose h1{font-size:clamp(32px,3.4vw,50px);line-height:1.08;margin:12px 0 26px}
.detail-split .detail-prose .back-link{margin-bottom:16px}
.detail-split .detail-prose h2:first-of-type{margin-top:1.7em}
.detail-split .detail-cta{text-align:left;padding-top:10px}
@media(max-width:850px){
  .detail-split{padding:22px 18px}
  .detail-split .detail-inner{grid-template-columns:1fr}
  .detail-split .detail-media{height:clamp(320px,50svh,470px)}
  .detail-split.reverse .detail-media{order:0}
  .detail-split .detail-prose{padding:30px 24px 40px;max-width:none}
}
/* Two-up bullet lists are too cramped in a half-width column. */
.detail-split .detail-list{grid-template-columns:1fr;gap:.55em 0}
@media(min-width:1500px){.detail-split .detail-list{grid-template-columns:1fr 1fr;gap:.6em 2em}}

/* ---- Full client testimonials ---- */
.full-quotes .title{margin-bottom:46px}
.full-quote{margin:0 auto 46px;max-width:880px;background:#fff;border:1px solid rgba(61,58,53,.16);border-left:2px solid var(--sage);padding:clamp(30px,3.4vw,52px)}
.full-quote blockquote{margin:0}
.full-quote blockquote p{font-size:16.5px;line-height:1.85;color:var(--muted);margin:0 0 1.1em}
.full-quote blockquote p:first-child{font-size:18px;color:var(--ink)}
.full-quote blockquote p:last-child{margin-bottom:0}
.full-quote figcaption{margin-top:26px;padding-top:20px;border-top:1px solid rgba(61,58,53,.14);display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.full-quote .fq-name{font:italic 24px var(--serif);color:var(--ink)}
.full-quote .fq-service{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sage)}
.quotes-cta{text-align:center;margin-top:10px}
@media(max-width:850px){
  .full-quote{margin-bottom:32px}
  .full-quote blockquote p{font-size:16px}
  .full-quote blockquote p:first-child{font-size:17px}
  .full-quote .fq-name{font-size:21px}
}

/* ---- Homepage "Does this sound familiar?" + 4-step process ---- */
.familiar-list{max-width:640px;margin:28px auto 0;text-align:left;grid-template-columns:1fr;gap:14px}
.familiar-list li{font-size:17px;line-height:1.65;color:var(--muted)}
.steps-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px) and (min-width:851px){.steps-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.steps-4{grid-template-columns:1fr}}

/* Online Edit photo: face sits slightly right of centre, high in frame. */
.detail-split .detail-media img[src$="service-online-edit.jpg"]{object-position:60% 18%}

/* Contact page: the photo was a fixed height beside a taller form, so the two
   columns never lined up. Stretch it to the panel so tops and bottoms match. */
.contact-split{align-items:stretch}
.contact-media{display:flex}
.contact-media img{height:100%!important;min-height:clamp(420px,58vh,620px);border-radius:0}
@media(max-width:850px){
  .contact-media img{height:clamp(280px,42svh,400px)!important;min-height:0}
}

/* ---- Testimonials: photo beside the quotes, not above them ----
   The photo column spans the full height of the testimonials so the two sides
   start and finish together; the picture itself sticks so it stays in view
   while the quotes scroll past. ---- */
.testimonials-split .story-prose{justify-content:flex-start;padding-top:clamp(52px,5.5vw,96px)}
.testimonials-split .story-prose .lead-para{margin-bottom:38px;max-width:60ch}
.testimonials-split .full-quote{max-width:none;margin:0 0 28px;padding:clamp(24px,2.4vw,34px)}
.testimonials-split .full-quote blockquote p{font-size:16px;line-height:1.8}
.testimonials-split .full-quote blockquote p:first-child{font-size:17px}
.testimonials-split .full-quote figcaption{margin-top:20px;padding-top:16px}
.testimonials-split .full-quote .fq-name{font-size:21px}
.testimonials-split .quotes-cta{text-align:left;margin-top:14px}
@media(max-width:850px){
  .testimonials-split .story-prose{padding-top:36px}
  .testimonials-split .full-quote{margin-bottom:22px}
}
/* Homepage hero focal point is controlled by the admin image manager
   (assets/focus.css). Two !important rules used to live here and beat it
   on specificity (.home-hero .hero-bg = 2 classes vs img[src$=] = 1 attr +
   1 element), so every focal point chosen in the admin was ignored and the
   crop stayed pinned near the top. The base rule above still applies as a
   fallback when focus.css has no entry for the image. */