/* ==========================================================================
   LIFESTYLE BUYERS ADVOCACY
   Written to the design direction of 10 Sep 2026.

   The rule that settles every question below: visual interest comes from
   typography, photography, scale, spacing and flat blocks of colour. It never
   comes from decoration. If an element is not functional or essential to
   comprehension, it is not in this file.

   Palette, in order of how much of the page it occupies:
     1  off-white  #F2F2F0   the page itself
     2  cream      #EBE6E0   secondary sections, for separation
     3  light blue #A6D1E4   occasional feature blocks, always flat
     4  navy       #0E223B   type, footer, buttons - used sparingly

   No teal, no grey-blue, no chocolate, no gradients, no extra accents. The
   only overlay anywhere is the flat scrim on photography, which exists so the
   type on top of it can be read - and it is the same value the Advisory page
   uses.
   ========================================================================== */

:root{
  --paper:#F2F2F0;
  --cream:#EBE6E0;
  --blue:#A6D1E4;
  --navy:#0E223B;

  /* secondary type and rules are the navy at reduced strength, never a grey */
  --navy-70:rgba(14,34,59,.70);
  --navy-55:rgba(14,34,59,.70);
  --line:rgba(14,34,59,.14);
  --line-light:rgba(235,230,224,.22);
  --scrim:rgba(14,34,59,.42);

  --font:"Manrope","Segoe UI",Helvetica,Arial,sans-serif;

  /* large, lightweight, sentence case, effectively no tracking */
  --fs-display:clamp(2.5rem,6vw,5rem);
  --fs-h2:clamp(1.95rem,4vw,3.3rem);
  --fs-h3:clamp(1.15rem,1.6vw,1.4rem);
  --fs-lead:clamp(1.05rem,1.35vw,1.22rem);
  --fs-body:1.0625rem;

  --container:1180px;
  --gutter:clamp(1.5rem,6vw,5rem);
  --section:clamp(5rem,10vw,9rem);
  --header-h:88px;
  --radius:16px;          /* measured off lifestylegroup.com.au */
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;font-family:var(--font);font-size:var(--fs-body);font-weight:400;line-height:1.7;
  color:var(--navy);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.on-dark :focus-visible,.site-menu :focus-visible{outline-color:var(--paper)}
::selection{background:var(--blue);color:var(--navy)}
.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:1rem;top:-4rem;z-index:300;padding:.8rem 1.4rem;background:var(--navy);color:var(--paper);border-radius:999px;font-weight:500}
.skip-link:focus{top:1rem}

/* ---------- typography ----------
   Light weights at large sizes. Sentence case. Nothing is picked out in a
   different colour or a heavier weight: emphasis comes from size and position. */
.h-display{font-size:var(--fs-display);font-weight:300;line-height:1.1;letter-spacing:normal;text-wrap:balance}
.h-section{font-size:var(--fs-h2);font-weight:300;line-height:1.19;letter-spacing:normal;text-wrap:balance}
.h-sub{font-size:var(--fs-h3);font-weight:500;line-height:1.35}
.lead{font-size:var(--fs-lead);font-weight:400;line-height:1.62;max-width:34em}
.muted{color:var(--navy-70)}
.on-dark{color:var(--cream)}
.on-dark .muted{color:rgba(242,242,240,.72)}
.accent-i{font-weight:inherit;color:inherit;font-style:normal}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{display:none}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section);position:relative}
.section--beige,.section--cream{background:var(--cream)}
.section--blue{background:var(--blue)}
.section--ink{background:var(--navy);color:var(--paper)}
.section-head{display:grid;gap:1.3rem;max-width:44rem;margin-bottom:clamp(3rem,6vw,5rem)}
.section-foot{margin-top:clamp(3rem,6vw,4.5rem);display:grid;gap:1rem;max-width:44rem;color:var(--navy-70)}

/* ---------- buttons ----------
   The only pill shapes on the site. Navy, off-white type, no icon, no shadow.
   A secondary action is a text link, never a second pill beside the first. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 3.5rem;border-radius:50px;border:1px solid transparent;
  font-size:1rem;font-weight:500;line-height:1;letter-spacing:normal;white-space:nowrap;cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn--solid{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.btn--solid:hover{background:#1b3a5e;border-color:#1b3a5e}
.btn--light{background:var(--cream);color:var(--navy);border-color:var(--cream)}
/* A small outlined pill for "Read more" inside a card. The full-size button is
   50px tall with 3.5rem of padding and would dominate a card this size. */
.btn--mini{min-height:40px;padding:0 1.5rem;font-size:.92rem;font-weight:500;background:none;color:var(--navy);border-color:var(--line)}
.btn--mini:hover{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.btn--mini:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.btn--light:hover{background:#f6f3ef;border-color:#f6f3ef}
.btn--outline,.link-arrow{
  display:inline-flex;align-items:center;min-height:2.5rem;padding:0;border:0;border-radius:0;
  background:none;color:var(--navy);font-size:.98rem;font-weight:400;white-space:normal;
  text-decoration:underline;text-underline-offset:.32em;text-decoration-thickness:1px;
  text-decoration-color:var(--line);transition:text-decoration-color .3s var(--ease);
}
.btn--outline:hover,.link-arrow:hover{text-decoration-color:var(--navy)}
.on-dark .btn--outline,.on-dark .link-arrow{color:var(--paper);text-decoration-color:var(--line-light)}
.on-dark .btn--outline:hover,.on-dark .link-arrow:hover{text-decoration-color:var(--paper)}
@media (max-width:639.98px){
  .btn--solid,.btn--light{white-space:normal;text-align:center;line-height:1.3;padding:.9rem 1.7rem}
}

/* ---------- wordmark ---------- */
.wordmark{display:flex;flex-direction:row;align-items:center;gap:.8rem;line-height:1;color:var(--navy);flex:none}
.wordmark .wm-svg{height:26px;width:auto;display:block;flex:none;aspect-ratio:238.75/80}
.wordmark .wm-sub{font-size:.78rem;font-weight:400;letter-spacing:.01em;color:var(--navy-70);white-space:nowrap;flex:none}
.on-dark .wordmark,.site-footer .wordmark{color:var(--paper)}
.on-dark .wordmark .wm-sub,.site-footer .wordmark .wm-sub{color:rgba(242,242,240,.7)}
.site-footer .wordmark .wm-svg{height:30px}
.gate-card .wordmark{justify-content:center;margin-bottom:1.6rem}
.gate-card .wordmark .wm-svg{height:28px}
@media (max-width:479.98px){
  .wordmark{gap:.6rem}
  .wordmark .wm-svg{height:22px}
  .wordmark .wm-sub{font-size:.7rem}
}

/* ---------- intro curtain ----------
   Two navy panels part over the wordmark as the site opens. Everything here is
   decorative, so if script never runs the curtain must not exist at all - hence
   the html:not(.js) rule, without which a visitor with JavaScript off would be
   left looking at a navy screen with nothing available to clear it. */
#intro{position:fixed;inset:0;z-index:200}
#intro.is-done{display:none}
html:not(.js) #intro{display:none}
.intro__panel{position:absolute;top:0;bottom:0;width:50.5%;background:var(--navy);transition:transform 1.15s cubic-bezier(.62,.02,.2,1);will-change:transform}
.intro__panel--l{left:0}
.intro__panel--r{right:0}
#intro.is-leaving .intro__panel--l{transform:translateX(-101%)}
#intro.is-leaving .intro__panel--r{transform:translateX(101%)}
#intro.is-leaving{pointer-events:none}

.intro__mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(200px,40vw);color:var(--cream);
  opacity:0;animation:intro-mark .75s var(--ease) forwards;
  transition:opacity .32s ease,transform .32s var(--ease);
}
.intro__mark svg{width:100%;height:auto;display:block}
@keyframes intro-mark{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
/* animation:none matters. A CSS animation with `forwards` outranks an ordinary
   declaration, so without cancelling it the opacity:0 below never applied and
   the wordmark sat at full strength until display:none snapped it away. */
/* The mark is cream, sized to sit on navy. If the panels part while it is
   still painting you get a pale ghost of the wordmark floating over the
   off-white page. So it goes first and the panels follow: visibility:hidden
   lands the instant the fade ends, which makes it unpaintable regardless of
   what any transition is doing. */
#intro.is-leaving .intro__mark{
  animation:none;opacity:0;transform:translate(-50%,-56%);visibility:hidden;
  transition:opacity .32s ease,transform .32s var(--ease),visibility 0s linear .32s;
}
#intro.is-leaving .intro__panel{transition-delay:.34s}

/* ---------- moving between pages ----------
   The curtain runs once, on arrival. Every page after it in the same visit
   gets this instead: the content lifts a little and settles. Different in
   kind, not just shorter - a curtain on every click reads as a toll gate.
   The hero's own staged reveal is skipped on these loads (main.js calls
   revealHero immediately) so there is one motion, not two competing. */
@keyframes page-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.js body.is-entering #main{animation:page-enter .55s var(--ease) both}
@media (prefers-reduced-motion:reduce){
  html.js body.is-entering #main{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .intro__panel,.intro__mark{transition:none;animation:none}
  #intro.is-leaving .intro__mark{visibility:hidden;transition:none}
}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);opacity:0;transition:opacity .35s ease}
.site-header.is-scrolled::before{opacity:1}
.site-header__inner{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h)}
.nav{display:none;margin-left:auto}
.nav__list{display:flex;align-items:center;gap:.35rem}
.nav__link{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .95rem;white-space:nowrap;font-size:.92rem;font-weight:400;letter-spacing:0;color:var(--navy);opacity:.7;transition:opacity .25s ease}
.nav__link:hover,.nav__link:focus-visible,.nav__link[aria-current="page"]{opacity:1}
.nav__cta{display:none;margin-left:1rem}
.nav-toggle{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;color:var(--navy)}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
body.is-locked .site-header::before{opacity:0}
body.is-locked .site-header .wordmark{color:var(--paper)}
body.is-locked .site-header .wordmark .wm-sub{color:rgba(242,242,240,.7)}
body.is-locked .nav-toggle{color:var(--paper)}
@media (min-width:1024px){
  .nav{display:block}
  .nav__cta{display:inline-flex}
  .nav-toggle{display:none}
}
@media (max-width:1023.98px){:root{--header-h:72px}}

/* ---------- full-screen menu ---------- */
.site-menu{position:fixed;inset:0;z-index:90;background:var(--navy);color:var(--paper);overflow-y:auto;padding:calc(var(--header-h) + 2rem) 0 3rem;display:none}
.site-menu.is-open{display:block}
.site-menu__inner{display:grid;gap:3rem}
.site-menu__list{display:grid}
.site-menu__list a{display:grid;grid-template-columns:auto 1fr;gap:.15rem 1.5rem;align-items:baseline;padding:1.15rem 0;border-bottom:1px solid var(--line-light)}
.site-menu__num{grid-row:1/3;font-size:.9rem;font-weight:400;color:rgba(242,242,240,.5);font-variant-numeric:tabular-nums;align-self:center}
.site-menu__name{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:300;letter-spacing:normal}
.site-menu__blurb{font-size:.92rem;color:rgba(242,242,240,.6)}
.site-menu__aside{display:grid;gap:1.5rem;justify-items:start}
.site-menu__tag{font-size:1.15rem;font-weight:300;color:rgba(242,242,240,.85);max-width:24ch}
.site-menu__ext{font-size:.95rem;color:rgba(242,242,240,.75);text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--line-light)}
@media (min-width:900px){.site-menu__inner{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:5rem}}

/* ==========================================================================
   HERO - oversized lightweight type on one side, one confident photograph on
   the other. One primary action, one text link. Nothing else lives here.
   ========================================================================== */
.hero{position:relative;padding-top:calc(var(--header-h) + clamp(3rem,8vw,7rem));padding-bottom:clamp(3rem,7vw,6rem)}
.hero__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.hero__copy{display:grid;gap:2rem;max-width:38rem}
/* The mask that makes the lines rise also clips descenders - the g in
   'strategy' lost its tail. Pad the bottom and pull it back with a
   negative margin, so the mask sits below the baseline. */
.hero__title .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero__title .line>span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.hero__title .line:nth-child(2)>span{transition-delay:.09s}
.hero__title .line:nth-child(3)>span{transition-delay:.18s}
.hero__lead{color:var(--navy-70);opacity:0;transform:translateY(12px);transition:opacity .9s ease .45s,transform .9s var(--ease) .45s}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.8rem;opacity:0;transform:translateY(12px);transition:opacity .9s ease .6s,transform .9s var(--ease) .6s}
.hero.is-ready .hero__title .line>span{transform:none}
.hero.is-ready .hero__lead,.hero.is-ready .hero__actions{opacity:1;transform:none}
.hero__visual{display:none}
.hero__photo{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;opacity:0;transform:translateY(16px);transition:opacity 1s ease .3s,transform 1.1s var(--ease) .3s}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero.is-ready .hero__photo{opacity:1;transform:none}
.hero__foot{border-top:1px solid var(--line);margin-top:clamp(3rem,6vw,5rem)}
.hero__foot-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.4rem;font-size:.92rem;color:var(--navy-55)}
.hero__foot-inner strong{color:var(--navy);font-weight:500}
.hero__scroll{display:none}
@media (min-width:960px){
  .hero__grid{grid-template-columns:minmax(0,6.5fr) minmax(0,5fr)}
  .hero__visual{display:block}
}
@media (prefers-reduced-motion:reduce){
  .hero__title .line>span,.hero__lead,.hero__actions,.hero__photo{transition:none;transform:none;opacity:1}
}

/* inner-page hero: a heading, one paragraph, air */
.page-hero{padding-top:calc(var(--header-h) + clamp(4rem,9vw,8rem));padding-bottom:clamp(3rem,7vw,6rem)}
.page-hero__inner{display:grid;gap:1.6rem;max-width:46rem}
.page-hero .h-display{font-size:clamp(2.3rem,5vw,4.2rem)}
.page-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.8rem;margin-top:.6rem}
.page-hero .h-display,.page-hero .lead,.page-hero__actions{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .9s var(--ease)}
.page-hero .lead{transition-delay:.12s}
.page-hero__actions{transition-delay:.24s}
.page-hero.is-ready .h-display,.page-hero.is-ready .lead,.page-hero.is-ready .page-hero__actions{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.page-hero .h-display,.page-hero .lead,.page-hero__actions{opacity:1;transform:none;transition:none}}

/* ---------- reveals: opacity and a few pixels, nothing more ---------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   EDITORIAL COLUMNS - what replaced the cards.
   A heading, a paragraph, space around both. No background, no border, no
   shadow, no icon, no label.
   ========================================================================== */
.why-grid,.services-grid,.steps-teaser,.strategy-cols{
  display:grid;gap:clamp(2.5rem,5vw,4rem) clamp(2.5rem,5vw,5rem);
}
.why-card,.service,.step-card,.strategy-card{
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
  display:grid;gap:.8rem;align-content:start;
}
.why-card h3,.service h3,.step-card h3,.strategy-card h3{
  font-size:var(--fs-h3);font-weight:500;line-height:1.35;letter-spacing:normal;
}
.why-card p,.service p,.step-card p,.strategy-card p{color:var(--navy-70);max-width:38ch}
.step-card__num{font-size:.95rem;font-weight:400;color:var(--navy-55);font-variant-numeric:tabular-nums}
@media (min-width:700px){.why-grid,.strategy-cols{grid-template-columns:1fr 1fr}}
@media (min-width:640px) and (max-width:1023.98px){.steps-teaser,.services-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.why-grid{grid-template-columns:repeat(4,1fr)}.steps-teaser,.services-grid{grid-template-columns:repeat(3,1fr)}}

/* the lead service is a statement, not a dark tile */
.service--primary{grid-column:1/-1;background:none;border:0;color:inherit;display:grid;gap:1.4rem;padding:0}
.service--primary h3{font-size:var(--fs-h2);font-weight:300;line-height:1.14;letter-spacing:normal}
.service--primary p{color:var(--navy-70);font-size:var(--fs-lead);max-width:46ch}
.service--primary .sp-left{display:grid;gap:1.4rem;justify-items:start}
@media (min-width:900px){.service--primary{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:start}}

/* services page, long form.
   The two-column split belongs on .svc__grid, which holds the head and the
   body. It was on .svc, whose only child is .svc__grid - so every service sat
   in column one and the right half of the page was empty. The heading rule
   also targeted h3 while the markup uses h2, leaving it unstyled. */
.svc{display:grid;gap:1.4rem;padding-top:clamp(2.5rem,5vw,4rem);margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.svc:first-of-type{margin-top:0}
.svc__grid{display:grid;gap:1.6rem}
.svc__head{display:grid;gap:1.3rem;justify-items:start}
.svc__head h2{font-size:var(--fs-h2);font-weight:300;letter-spacing:normal;line-height:1.19;text-wrap:balance}
.svc__body{display:grid;gap:1.2rem;color:var(--navy-70);max-width:46rem}
.svc__list{display:grid;gap:.7rem;color:var(--navy-70)}
.svc__list li{padding-left:1.3rem;position:relative}
.svc__list li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:1px;background:var(--navy-55)}
@media (min-width:900px){
  .svc__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
}

/* ---------- process: an index, and one panel held beside it ---------- */
.process__layout{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.process__intro{display:grid;gap:1.3rem;max-width:44rem;margin-bottom:clamp(3rem,6vw,4.5rem)}
.steps-list{border-top:1px solid var(--line)}
.step-item{border-bottom:1px solid var(--line)}
.step-tab{width:100%;display:flex;align-items:baseline;gap:1.4rem;padding:1.3rem .1rem;min-height:3.8rem;text-align:left;font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:300;letter-spacing:normal;color:var(--navy);opacity:.5;transition:opacity .3s var(--ease)}
.step-tab__num{font-size:.9rem;font-weight:400;color:var(--navy-55);flex:none;font-variant-numeric:tabular-nums}
.step-tab:hover,.step-tab:focus-visible,.step-tab[aria-selected="true"],.step-tab[aria-expanded="true"]{opacity:1}
.step-body{display:grid;gap:.8rem;padding:0 .1rem 1.6rem}
.step-body[hidden]{display:none}
.step-body p{color:var(--navy-70);max-width:52ch}
.process__stage{display:none}
@media (min-width:960px){
  .process__layout{grid-template-columns:5fr 7fr;gap:clamp(3rem,7vw,6rem);align-items:start}
  .step-item .step-body{display:none!important}
  .process__stage{display:block;position:sticky;top:calc(var(--header-h) + 3rem)}
  .stage{background:var(--cream);padding:clamp(2.5rem,4vw,3.5rem);min-height:24rem;display:grid;align-content:space-between;gap:2.5rem}
  .stage__inner{display:grid;gap:1.1rem;transition:opacity .25s ease}
  .stage.is-switching .stage__inner{opacity:0}
  .stage__num{font-size:.95rem;font-weight:400;color:var(--navy-55);font-variant-numeric:tabular-nums}
  .stage__title{font-size:clamp(1.7rem,2.4vw,2.2rem);font-weight:300;letter-spacing:normal;line-height:1.15}
  .stage__text{color:var(--navy-70);max-width:44ch}
  .stage__note{color:var(--navy);max-width:44ch;padding-top:1.1rem;border-top:1px solid var(--line)}
  .stage__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.4rem;border-top:1px solid var(--line)}
  .stage__count{font-size:.9rem;color:var(--navy-55);font-variant-numeric:tabular-nums}
}

/* ---------- strategy ---------- */
.strategy-grid{display:grid;gap:clamp(2.5rem,6vw,4.5rem)}
.strategy .lead{max-width:42rem}
.pullquote{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:300;line-height:1.25;letter-spacing:normal;max-width:22em;padding:0;border:0}

/* ==========================================================================
   PHOTOGRAPHY BANDS - large, confident, one flat scrim so the type reads.
   ========================================================================== */
/* The navy sits under the photograph deliberately: if an image is slow or
   fails, off-white type would otherwise land on the off-white page. */
.statement,.cta-band{position:relative;isolation:isolate;overflow:hidden;display:flex;color:var(--paper);background:var(--navy)}
.statement{min-height:70vh;align-items:center}
.cta-band{min-height:58vh;align-items:flex-end}
.statement__media,.cta-band__media{position:absolute;inset:0;z-index:-2}
.statement__media img,.cta-band__media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.statement__scrim,.cta-band__scrim{position:absolute;inset:0;z-index:-1;background:var(--scrim)}
.statement .container{padding-block:clamp(4rem,8vw,7rem)}
.statement .h-display{font-size:clamp(2.1rem,4.6vw,4rem);max-width:20ch}
.cta-band__content{padding-block:clamp(4rem,8vw,7rem);display:grid;gap:1.6rem;max-width:42rem}
.cta-band .h-section{color:var(--paper)}

/* ---------- people ---------- */
.people{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
.person{background:none;border:0;border-radius:0;padding:0;display:grid;gap:1.2rem;align-content:start}
.person__img{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius)}
.person__img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.person__body{padding:0;display:grid;gap:1rem}
.person-top{display:grid;gap:.15rem}
.person-top h3{font-size:var(--fs-h3);font-weight:500}
.person-top .role{font-size:.95rem;color:var(--navy-55);font-weight:400}
.person p{color:var(--navy-70)}
@media (min-width:800px){.people{grid-template-columns:1fr 1fr}}

/* the network band: a flat navy block, nothing behind it */
.connection{background:var(--navy);color:var(--paper);padding:clamp(2.5rem,5vw,4.5rem);display:grid;gap:clamp(2.5rem,5vw,4rem);margin-top:clamp(3rem,6vw,5rem)}
.connection h3{font-size:var(--fs-h2);font-weight:300;letter-spacing:normal;line-height:1.15}
.connection>div:first-child{display:grid;gap:1.4rem;justify-items:start}
.connection p{color:rgba(242,242,240,.75);max-width:46ch}
.stats-row{display:grid;gap:2.2rem;align-content:start}
.stat{display:grid;gap:.35rem}
.stat__value{font-size:clamp(2.4rem,4.5vw,3.6rem);font-weight:200;line-height:1;letter-spacing:normal;color:var(--blue);font-variant-numeric:tabular-nums}
.stat__label{font-size:.95rem;color:rgba(242,242,240,.7)}
@media (min-width:640px){.stats-row{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.connection{grid-template-columns:6fr 5fr;gap:clamp(3rem,6vw,5rem);align-items:center}}

/* ---------- the buyer selector: its own component, well away from the hero ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.chips__label{font-size:.95rem;color:var(--navy-55);margin-right:.4rem}
.chip{
  display:inline-flex;align-items:center;min-height:46px;padding:0 1.5rem;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--navy);font-size:.95rem;font-weight:400;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.chip:hover{border-color:var(--navy)}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--paper);border-color:var(--navy)}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:clamp(3rem,6vw,5rem);align-items:start}
.contact-copy{display:grid;gap:1.8rem;justify-items:start}
.contact-steps{display:grid;gap:1.8rem}
.contact-steps li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline}
.contact-steps .num{font-size:.9rem;font-weight:400;color:var(--navy-55);font-variant-numeric:tabular-nums}
.contact-steps h3{font-size:1.1rem;font-weight:500;margin-bottom:.3rem}
.contact-steps p{color:var(--navy-70)}
.contact-sign{font-size:1.15rem;font-weight:300;color:var(--navy-70);max-width:26ch}
.form-card{background:var(--cream);padding:clamp(2rem,4vw,3rem);border-radius:var(--radius)}
.form{display:grid;gap:1.3rem}
.form__row{display:grid;gap:1.3rem}
.field{display:grid;gap:.45rem}
.field label{font-size:.9rem;font-weight:400;color:var(--navy-70)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:.9rem 1.05rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--navy);width:100%;transition:border-color .2s ease}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:none}
.field textarea{resize:vertical;min-height:120px}
.form .btn{width:100%;margin-top:.4rem}
.form-note{font-size:.88rem;color:var(--navy-55);margin-top:1rem;text-align:center}
#form-done{background:var(--blue);color:var(--navy);padding:2.2rem;display:grid;gap:.6rem}
#form-done h3{font-weight:500;font-size:1.2rem}
@media (min-width:640px){.form__row--2{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.contact-grid{grid-template-columns:5fr 6fr}}

/* ---------- FAQ: the one place a dividing line does a job ---------- */
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem .1rem;font-size:1.12rem;font-weight:400;min-height:3.6rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:1.5rem;color:var(--navy-55);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 .1rem 1.8rem;color:var(--navy-70);max-width:62ch;display:grid;gap:1rem}

/* ---------- inset note ---------- */
.note{background:var(--cream);padding:1rem 1.2rem;font-size:.88rem;display:grid;gap:.35rem}
.note b{font-size:.78rem;font-weight:500;color:var(--navy-55)}
.note p{color:var(--navy-70)}
.on-dark .note{background:rgba(242,242,240,.1)}
.on-dark .note p,.on-dark .note b{color:rgba(242,242,240,.75)}
.section--beige .note,.section--cream .note,.form-card .note{background:var(--paper)}
.mt{margin-top:1.5rem}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:var(--paper);padding:clamp(4rem,8vw,6.5rem) 0 2.5rem}
.foot-grid{display:grid;gap:3rem;padding-bottom:3.5rem;border-bottom:1px solid var(--line-light)}
.foot-tag{margin-top:1.4rem;font-size:1.1rem;font-weight:300;max-width:24ch;color:rgba(242,242,240,.75)}
.foot-col h4{font-size:.95rem;font-weight:500;color:rgba(242,242,240,.55);margin:0 0 1.2rem}
.foot-col ul{display:grid;gap:.7rem}
.foot-col a{color:var(--paper);font-size:.98rem;opacity:.82;transition:opacity .2s ease}
.foot-col a:hover{opacity:1}
.foot-legal{padding-top:2.2rem;display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;font-size:.85rem;color:rgba(242,242,240,.5)}
@media (min-width:800px){.foot-grid{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr)}}

/* ---------- the selector block ---------- */
.selector{display:grid;gap:2rem;max-width:52rem}
.selector .h-section{max-width:16ch}
.selector .lead{color:var(--navy);max-width:40rem}

/* ---------- figures band ----------
   The group site's most recognisable device: a full-width flat band of large
   light numbers with a small label under each. Works on the light blue and on
   the navy; the stat colour follows the band it sits in. */
.figures{padding-block:clamp(3rem,6vw,4.5rem)}
.figures--blue{background:var(--blue)}
.figures--navy{background:var(--navy);color:var(--cream)}
.figures__grid{display:grid;gap:2.5rem 2rem;grid-template-columns:repeat(2,1fr);text-align:center}
.figures .stat{display:grid;gap:.6rem;justify-items:center}
.figures .stat__value{font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:300;line-height:1;letter-spacing:normal;color:var(--navy);font-variant-numeric:tabular-nums}
.figures--navy .stat__value{color:var(--cream)}
.figures .stat__label{font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;line-height:1.4;max-width:18ch;color:var(--navy-70)}
.figures--navy .stat__label{color:rgba(235,230,224,.72)}
@media (min-width:860px){.figures__grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- prose ----------
   Long runs of straight paragraphs: one readable column, generous leading,
   never the full container width. */
.prose{display:grid;gap:1.4rem;max-width:40rem}
.prose .lead{max-width:none}
.prose .h-section{margin-block:.8rem .2rem}
.prose p{color:var(--navy-70)}
.prose .lead{color:var(--navy)}

/* the short summary line that closes a section */
.sequence{
  margin-top:clamp(2.5rem,5vw,4rem);font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:300;
  line-height:1.3;letter-spacing:normal;color:var(--navy);max-width:20ch;
}

/* ==========================================================================
   PAGE HERO, PHOTOGRAPHIC
   The group site opens every inner page this way: one confident photograph,
   a flat navy scrim so the type reads, and the page title in large light type
   sitting low-left. Replaces the plain text hero on inner pages.
   ========================================================================== */
.page-hero--photo{
  position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:var(--cream);
  display:flex;align-items:flex-end;min-height:clamp(320px,46vh,520px);
  padding-top:calc(var(--header-h) + clamp(2rem,6vw,4rem));padding-bottom:clamp(2.5rem,6vw,4.5rem);
}
.page-hero--photo .page-hero__media{position:absolute;inset:0;z-index:-2}
.page-hero--photo .page-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.page-hero--photo .page-hero__scrim{position:absolute;inset:0;z-index:-1;background:var(--scrim)}
.page-hero--photo .page-hero__inner{gap:1.2rem;max-width:44rem;margin-inline:0}
.page-hero--photo .h-display{color:var(--cream)}
.page-hero--photo .lead{color:rgba(235,230,224,.86)}
.page-hero--photo .btn--outline{color:var(--cream);text-decoration-color:var(--line-light)}
.page-hero--photo .btn--outline:hover{text-decoration-color:var(--cream)}

/* ==========================================================================
   FEATURE - one large image beside one column of text, alternating sides.
   This is the rhythm device the group site leans on hardest, and the reason
   its pages read as composed rather than stacked.
   ========================================================================== */
.feature{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.feature__media{border-radius:var(--radius);overflow:hidden;aspect-ratio:11/13}
.feature__media img{width:100%;height:100%;object-fit:cover}
.feature__body{display:grid;gap:1.3rem;max-width:34rem}
.feature__body p{color:var(--navy-70)}
.feature__body .lead{color:var(--navy)}
.feature__body .btn,.feature__body .btn--outline{justify-self:start;margin-top:.6rem}
@media (min-width:900px){
  .feature{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  /* text first, image second - the alternate composition */
  .feature--flip .feature__media{order:2}
  .feature--flip .feature__body{order:1}
}

/* ==========================================================================
   SPLIT - a large statement on the left, the prose that supports it on the
   right. The composition the feedback pointed at ("Lifestyle was born out of
   love..."), and the right home for a long run of paragraphs.
   ========================================================================== */
.split{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
/* No max-width here. It was 18ch, but ch resolves against THIS element's
   font-size - body copy at 17px - while the heading inside is 52.8px, so
   18ch came out at 187px and broke the headline to one word per line.
   The grid column governs the width; the heading just needs to be sized
   for a statement rather than a page title. */
.split__head{min-width:0}
.split__head .h-section{font-size:clamp(1.45rem,2.5vw,2.15rem);line-height:1.25;text-wrap:pretty}
.split__body{display:grid;gap:1.2rem;max-width:44rem;color:var(--navy-70)}
.split__body .lead{color:var(--navy);max-width:none}
@media (min-width:900px){.split{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2.5rem,6vw,5rem)}}

/* the three-phrase sign-off, one line under the other */
.stack-lines{display:grid;gap:.1rem;font-size:clamp(1.5rem,3vw,2.4rem);font-weight:300;line-height:1.28;letter-spacing:normal;color:var(--navy)}
.stack-lines span{display:block}

/* a person as a split: portrait, name and role on the left, bio on the right */
.split__head .person__img{aspect-ratio:4/5;margin-bottom:1.2rem;max-width:22rem}
.split__head h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:300;letter-spacing:normal;line-height:1.2}
.split__head .role{font-size:1rem;color:var(--navy-55);margin-top:.3rem}
.people-splits{display:grid;gap:clamp(3rem,7vw,6rem)}

/* ---------- header over a photographic hero ----------
   Inner pages open on a dark photograph, and the header's navy type was
   sitting on top of it unreadable until you scrolled far enough for the
   off-white bar to fade in. On those pages the header starts cream and only
   turns navy once the bar is behind it. */
body.has-photo-hero .site-header:not(.is-scrolled) .wordmark,
body.has-photo-hero .site-header:not(.is-scrolled) .nav__link,
body.has-photo-hero .site-header:not(.is-scrolled) .nav-toggle{color:var(--cream)}
body.has-photo-hero .site-header:not(.is-scrolled) .wordmark .wm-sub{color:rgba(235,230,224,.78)}
body.has-photo-hero .site-header:not(.is-scrolled) .nav__cta{background:var(--cream);color:var(--navy);border-color:var(--cream)}
body.has-photo-hero .site-header:not(.is-scrolled) .nav__cta:hover{background:#fff;border-color:#fff}
/* a soft top gradient so the type has something to sit on even over a bright
   photograph - functional, not decorative */
body.has-photo-hero .page-hero--photo::before{
  content:"";position:absolute;inset:0 0 auto 0;height:var(--header-h);z-index:-1;
  background:linear-gradient(rgba(14,34,59,.45),rgba(14,34,59,0));
}

/* ---------- team grid ----------
   The card view: portrait, name, role, then the bio. Preferred over the
   split layout, so the long bios live inside the card rather than beside it. */
.team-grid{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
.team-card{display:grid;gap:.9rem;align-content:start}
.team-card__img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--cream)}
.team-card__img img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.team-card__img--pending{display:grid;place-content:center;padding:1.5rem;text-align:center}
.team-card h3{font-size:1.3rem;font-weight:400;letter-spacing:normal;line-height:1.25}
.team-card .role{font-size:.98rem;color:var(--navy-55);margin-top:-.55rem}
.team-card__bio{display:grid;gap:.9rem;color:var(--navy-70);font-size:.98rem}
.team-card__more{margin-top:.3rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
@media (min-width:700px){.team-grid{grid-template-columns:1fr 1fr}}
/* Three columns. The cards carry a one-line summary now and the full approved
   bio lives on the person's own page, so the narrow measure that ruled three
   columns out no longer applies. */
@media (min-width:1080px){.team-grid{grid-template-columns:repeat(3,1fr);gap:clamp(2.5rem,4vw,3.5rem)}}

/* ---------- the card as a door ----------
   The portrait and the name are one link, because the portrait is what people
   aim at. The "Read the full profile" link under the summary is the visible
   affordance - a hover state on its own never tells anyone a card is clickable. */
.team-card__link{display:grid;gap:.9rem;text-decoration:none;color:inherit}
.team-card__link h3{transition:color .2s ease}
.team-card__link .team-card__img img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.team-card__link:hover h3,.team-card__link:focus-visible h3{color:var(--navy-55)}
.team-card__link:hover .team-card__img img{transform:scale(1.03)}
.team-card__link:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
@media (prefers-reduced-motion:reduce){
  .team-card__link .team-card__img img{transition:none}
  .team-card__link:hover .team-card__img img{transform:none}
}

/* ---------- one person, in full ----------
   No photo hero here: the portrait is the subject, so it sits in the column
   beside the words rather than being cropped into a band above them. */
.profile{padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem))}
.profile__back{margin-bottom:clamp(2rem,4vw,3rem)}
.profile__grid{display:grid;gap:clamp(2.5rem,5vw,3.5rem);align-items:start}
.profile__aside{display:grid;gap:1rem}
.profile__img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--cream)}
.profile__img img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.profile__img--pending{display:grid;place-content:center;padding:1.5rem;text-align:center}
.profile__name{font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:300;line-height:1.15;letter-spacing:normal;text-wrap:balance;margin:0}
.profile__role{font-size:1.05rem;color:var(--navy-55);margin-top:-.5rem}
.profile__bio{display:grid;gap:1.4rem;max-width:36rem;color:var(--navy-70)}
.profile__bio p:first-child{color:var(--navy);font-size:1.18rem;line-height:1.6}
@media (min-width:860px){
  .profile__grid{grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(3rem,6vw,5rem)}
  .profile__aside{position:sticky;top:calc(var(--header-h) + 2rem)}
}

/* the rest of the team, so a profile is not a dead end */
.profile__more{margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:clamp(2rem,4vw,2.8rem);border-top:1px solid var(--line)}
.profile__more h2{font-size:.95rem;font-weight:500;color:var(--navy-55);margin:0 0 1.3rem;letter-spacing:normal}
.profile__more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem 2.2rem}
.profile__more a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line)}
.profile__more a:hover{border-bottom-color:var(--navy)}


/* ---------- no-JavaScript safety net ----------
   The hero copy and photograph start at opacity 0 and are only revealed by
   script. With scripting off that used to mean a blank hero on every page, so
   the hiding is undone when the .js class was never added. [data-reveal] is
   already scoped to .js and needs nothing here. */
html:not(.js) .hero__title .line>span,
html:not(.js) .hero__lead,
html:not(.js) .hero__actions,
html:not(.js) .hero__photo,
html:not(.js) .page-hero .h-display,
html:not(.js) .page-hero .lead,
html:not(.js) .page-hero__actions{opacity:1;transform:none;transition:none}

/* <picture> wraps every image so WebP can be offered ahead of the JPEG.
   display:contents keeps it out of layout, so the <img> remains the child the
   container's own rules were written against. */
picture{display:contents}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields; aria-hidden and tabindex -1 keep it away from real people. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.req{color:var(--navy-55);font-weight:400}
#form-error:empty{display:none}
#form-error{color:#8C3B2E;margin-top:.9rem}

/* Phone and email beside the form, so there is always a way through that does
   not depend on the form working. */
.contact-direct{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.7rem}
.contact-direct li{display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap}
.contact-direct span{font-size:.82rem;color:var(--navy-55);min-width:3.2rem}
.contact-direct a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line);font-size:1.05rem}
.contact-direct a:hover{border-bottom-color:var(--navy)}
.foot-legal a{color:inherit}

.profile__contact{margin-top:.4rem}