/* ==========================================================================
   Stronvar Rest Home  ·  prototype stylesheet
   Bespoke identity: brand plum #3E186B sampled from the logo, arched "roofline"
   image tops echoing the logo mark, Fraunces + Karla, large type for an older
   reader. Canvas is a violet-cast off-white, never the warm cream family.
   ========================================================================== */

:root{
  --plum:#3E186B;
  --plum-deep:#2A1049;
  --plum-mid:#57298C;
  --plum-light:#7A4FA8;
  --lilac:#F3EEF8;
  --lilac-line:#E4DAEE;
  --paper:#FAF8FC;
  --white:#FFFFFF;
  --ink:#241A2E;
  --muted:#655C72;
  --line:#E6E1EC;
  --moss:#3C6B57;
  --moss-soft:#EAF2ED;
  --amber:#C0871F;
  --shadow-sm:0 1px 2px rgba(36,26,46,.06),0 4px 12px rgba(36,26,46,.05);
  --shadow-md:0 2px 6px rgba(36,26,46,.07),0 18px 40px rgba(36,26,46,.10);
  --arch:52% 52% 8px 8px / 22% 22% 8px 8px;
  --wrap:1180px;
  --pad:clamp(20px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:18px;line-height:1.75;font-weight:400;
  /* Fraunces defaults to old-style (x-height) figures, which read as too small
     next to words; force full-height lining figures everywhere */
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--plum);text-underline-offset:3px}
h1,h2,h3,h4{font-family:'Fraunces','Georgia',serif;font-weight:500;color:var(--plum-deep);line-height:1.15;margin:0 0 .5em;font-variation-settings:'SOFT' 30,'WONK' 0}
h1{font-size:clamp(2.3rem,5.4vw,4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.85rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.3}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px}
.lede{font-size:clamp(1.1rem,1.7vw,1.32rem);line-height:1.65;color:#3B3348}
.muted{color:var(--muted)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--plum);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--plum-light);outline-offset:3px;border-radius:4px}

/* scroll reveal: the class is added by JS, so nothing hides if JS never runs */
.reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.6,.3,1),box-shadow .25s,border-color .25s;
}
.reveal.in{opacity:1;transform:none}

/* small serif label, deliberately not an all caps tracked eyebrow */
.label{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.02rem;color:var(--plum-mid);display:block;margin-bottom:.5rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:'Karla',sans-serif;font-size:1.02rem;font-weight:700;
  padding:15px 26px;border-radius:6px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s;
  min-height:52px;
}
.btn-primary{background:var(--plum);color:#fff}
.btn-primary:hover{background:var(--plum-deep)}
.btn-ghost{background:transparent;color:var(--plum);border-color:var(--lilac-line)}
.btn-ghost:hover{border-color:var(--plum);background:var(--lilac)}
.btn-light{background:#fff;color:var(--plum-deep);border-color:#fff}
.btn-light:hover{background:var(--lilac)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn-lg{padding:17px 32px;font-size:1.08rem;min-height:58px}
.btn svg{width:19px;height:19px;flex:none}

/* ---------- header (canonical, identical on every page) ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(255,255,255,0);border-bottom:1px solid rgba(255,255,255,0);
  transition:background .25s,border-color .25s,box-shadow .25s,padding .25s;
  padding:14px 0;
}
.site-header.solid{background:rgba(255,255,255,.97);border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(36,26,46,.06);backdrop-filter:saturate(160%) blur(8px)}
/* hairline reading progress along the top of the header */
.scroll-progress{position:absolute;left:0;right:0;top:0;height:2px;background:transparent;overflow:hidden}
.scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--plum),var(--plum-light))}
.hdr{display:flex;align-items:center;gap:26px}
.brand{flex:none;display:block;line-height:0}
.brand img{height:52px;width:auto;transition:height .25s}
.brand .lg-white{display:block}
.brand .lg-plum{display:none}
.site-header.solid .brand .lg-white{display:none}
.site-header.solid .brand .lg-plum{display:block}
.site-header.solid .brand img{height:46px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
  font-size:.98rem;font-weight:600;color:#fff;text-decoration:none;
  padding:10px 13px;border-radius:5px;white-space:nowrap;transition:background .15s,color .15s;
}
.nav a:hover{background:rgba(255,255,255,.16)}
.site-header.solid .nav a{color:var(--plum-deep)}
.site-header.solid .nav a:hover{background:var(--lilac);color:var(--plum)}
.nav a.on{color:#fff;background:rgba(255,255,255,.2)}
.site-header.solid .nav a.on{color:var(--plum);background:var(--lilac)}
.hdr-cta{display:flex;align-items:center;gap:12px;flex:none}
.hdr-phone{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font-weight:700;
  color:#fff;font-size:1.02rem;padding:12px 20px;border-radius:6px;border:1.5px solid rgba(255,255,255,.5);
  transition:background .18s,border-color .18s,color .18s;
}
.hdr-phone:hover{background:rgba(255,255,255,.14)}
.site-header.solid .hdr-phone{color:#fff;background:var(--plum);border-color:var(--plum)}
.site-header.solid .hdr-phone:hover{background:var(--plum-deep);border-color:var(--plum-deep)}
.burger{display:none;width:50px;height:50px;border:0;background:transparent;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:26px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:26px;height:2px;background:#fff;transition:transform .25s,background .2s}
.burger span::before{top:-8px}.burger span::after{top:8px}
.site-header.solid .burger span,.site-header.solid .burger span::before,.site-header.solid .burger span::after{background:var(--plum-deep)}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(8px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-8px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:89;background:var(--plum-deep);
  padding:100px var(--pad) 40px;overflow-y:auto;
  transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{display:block;color:#fff;text-decoration:none;font-family:'Fraunces',Georgia,serif;font-size:1.55rem;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.mobile-menu .mm-actions{margin-top:26px;display:grid;gap:12px}
.mobile-menu .mm-actions a{border:0;font-family:'Karla',sans-serif;font-size:1.05rem;text-align:center}

/* ---------- hero ----------
   The photograph is shown clean: no tint, no wash, nothing over it. It runs up
   behind the solid white header so no seam can open between the two, and stops
   just short of the fold so the top of the plum trust strip shows on the first
   screen and cues the scroll. The copy sits on a white card floating over the
   foot of the picture, which keeps the text at full contrast without touching
   the image. */
.hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);background:var(--lilac);
}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 46%;
  animation:heroDrift 30s ease-in-out infinite alternate;
}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.055)}}
.hero-panel{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:clamp(28px,4.5vw,60px)}
.hero-card{
  background:#fff;border-radius:14px;max-width:820px;
  padding:clamp(28px,3.6vw,50px) clamp(24px,3.6vw,54px);
  box-shadow:0 2px 6px rgba(36,26,46,.05),0 30px 70px rgba(36,26,46,.16);
}
.hero-card h1{margin-bottom:.32em;max-width:20ch;font-size:clamp(2rem,3.5vw,2.95rem)}
.hero-sub{font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.6;color:#3B3348;max-width:46ch;margin-bottom:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,34px)}
.hero-avail{margin:20px 0 0;font-size:1rem;color:var(--muted);display:flex;align-items:center;gap:.6em}
/* the brief flex: the two marks and two figures, one hairline row */
.hero-proof{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.hero-proof .hp{display:flex;align-items:center;gap:10px}
.hero-proof .hp:not(:first-child){padding-left:18px;border-left:1px solid var(--line)}
.hero-proof img{width:auto;display:block;flex:none}
.hero-proof .hp:nth-child(1) img{height:26px}
.hero-proof .hp:nth-child(2) img{height:20px}
.hero-proof .hp > span{font-size:.86rem;color:var(--muted);line-height:1.35;white-space:nowrap}
.hero-proof b{color:var(--plum-deep);font-size:.98rem}
/* on short screens the card's breathing room would push the trust strip peek
   below the fold, so compact the whole card. This block must stay BELOW the
   base hero-card rules: same specificity, so source order decides. */
@media (max-height:760px){
  .hero-panel{padding-top:92px;padding-bottom:22px}
  .hero-card{padding:clamp(20px,2.6vw,30px) clamp(22px,3.2vw,44px)}
  .hero-card h1{font-size:clamp(1.8rem,2.8vw,2.4rem)}
  .hero-sub{font-size:1.05rem}
  .hero-actions{margin-top:18px}
  .hero-avail{margin-top:14px}
  .hero-proof{margin-top:14px;padding-top:14px}
}
.avail-dot{width:9px;height:9px;border-radius:50%;background:#3C9A6B;box-shadow:0 0 0 5px rgba(60,154,107,.18);flex:none;animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px rgba(60,154,107,.18)}50%{box-shadow:0 0 0 10px rgba(60,154,107,.04)}}

/* ---------- trust strip ---------- */
.trust{background:var(--plum-deep);color:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust .t{padding:30px 26px;border-left:1px solid rgba(255,255,255,.13)}
.trust .t:first-child{border-left:0;padding-left:0}
.trust b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.7rem;font-weight:500;color:#fff;line-height:1.2;margin-bottom:2px;font-variant-numeric:lining-nums tabular-nums}
/* the descriptor line only: a bare `.trust span` would also catch the .cnt
   counter spans inside the figures and shrink the numbers */
.trust .t > span{font-size:.98rem;color:rgba(255,255,255,.72);line-height:1.45;display:block}

/* ---------- how it starts (three steps) ---------- */
.journey{
  list-style:none;margin:clamp(46px,6vw,74px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);
  counter-reset:j;
}
.journey li{position:relative;padding-top:26px;border-top:2px solid var(--lilac-line)}
.journey li::after{
  content:'';position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--plum);
  transition:width .9s cubic-bezier(.2,.6,.3,1) .15s;
}
.journey li.lit::after{width:100%}
.journey .n{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--lilac);color:var(--plum);
  font-family:'Fraunces',Georgia,serif;font-size:1.15rem;margin-bottom:14px;
}
.journey h3{margin-bottom:.35em}
.journey p{color:var(--muted);font-size:1.02rem;margin-bottom:0}

/* ---------- sections ---------- */
section{scroll-margin-top:90px}
.sec{padding:clamp(64px,8vw,110px) 0}
.sec-tint{background:var(--paper)}
.sec-lilac{background:var(--lilac)}
.sec-plum{background:var(--plum-deep);color:rgba(255,255,255,.9)}
.sec-plum h2,.sec-plum h3{color:#fff}
.sec-plum .label{color:#C6A9E4}
.sec-plum .lede{color:rgba(255,255,255,.9)}
.sec-plum .muted{color:rgba(255,255,255,.7)}
/* the white form card sits inside the plum band, so put its own colours back */
.sec-plum .form-card{color:var(--ink)}
.sec-plum .form-card h2,.sec-plum .form-card h3{color:var(--plum-deep)}
.sec-plum .form-card .lede,.sec-plum .form-card p{color:inherit}
.sec-plum .form-card .muted{color:var(--muted)}
.sec-plum .form-card .label{color:var(--plum-mid)}
.sec-head{max-width:720px;margin-bottom:clamp(36px,5vw,58px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* roofline divider, echoes the logo mark */
.roofline{display:block;width:100%;height:44px;color:var(--paper)}
.roofline.to-white{color:#fff}
.roofline.to-lilac{color:var(--lilac)}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px 28px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.6,.3,1),box-shadow .25s,border-color .25s;
}
/* a plum hairline that draws in on hover, so the card reacts without moving much */
.card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--plum);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.6,.3,1)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--lilac-line)}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card-icon{width:46px;height:46px;border-radius:8px;background:var(--lilac);color:var(--plum);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background .25s,color .25s}
.card:hover .card-icon{background:var(--plum);color:#fff}
.card-icon svg{width:24px;height:24px}
.card ul{margin:.6em 0 0;padding-left:1.1em;color:var(--muted)}
.card li{margin-bottom:.3em}
.chip{display:inline-block;align-self:flex-start;background:var(--lilac);color:var(--plum);border-radius:20px;padding:5px 14px;font-size:.92rem;font-weight:700;margin-bottom:14px}
.card-link{display:inline-flex;align-self:flex-start;align-items:center;gap:.45em;margin-top:auto;padding-top:20px;font-weight:700;font-size:1rem;text-decoration:none;color:var(--plum)}
.card-link span{transition:transform .22s}
.card-link:hover{text-decoration:underline}
.card-link:hover span{transform:translateX(4px)}

/* ---------- split blocks ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.split.rev .split-media{order:2}
.split-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--arch);box-shadow:0 24px 50px rgba(36,26,46,.13)}
/* portrait source photos get a portrait crop so they are not squashed */
.split-media.tall img{aspect-ratio:3/4;max-height:660px;margin:0 auto}
.split-body ul.ticks{list-style:none;padding:0;margin:1.3em 0 0}
.split-body ul.ticks li{position:relative;padding:12px 0 12px 34px;border-top:1px solid var(--line);color:#3B3348}
.split-body ul.ticks li:last-child{border-bottom:1px solid var(--line)}
.split-body ul.ticks li::before{
  content:'';position:absolute;left:2px;top:19px;width:16px;height:9px;
  border-left:2px solid var(--plum);border-bottom:2px solid var(--plum);transform:rotate(-45deg);
}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.shot{position:relative;overflow:hidden;border-radius:8px;background:var(--lilac);cursor:pointer;border:0;padding:0;display:block;width:100%}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.shot:hover img{transform:scale(1.05)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:36px 18px 17px;color:#fff;text-align:left;
  font-size:.95rem;background:linear-gradient(180deg,rgba(26,10,45,0),rgba(26,10,45,.88));
  text-shadow:0 1px 6px rgba(26,10,45,.5);
}
.shot.span2{grid-column:span 2;aspect-ratio:4/3}
.shot.span3{grid-column:span 3;aspect-ratio:3/2}
.shot.span4{grid-column:span 4;aspect-ratio:3/2}
.shot.span6{grid-column:span 6;aspect-ratio:21/9}
.shot.tall-16{aspect-ratio:16/10}
.shot.portrait{aspect-ratio:auto}
/* the magnifier only appears on the shots that actually open */
.shot .zoom{
  position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--plum);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s;
}
.shot .zoom svg{width:19px;height:19px}
.shot:hover .zoom,.shot:focus-visible .zoom{opacity:1;transform:scale(1)}

/* ---------- fees ---------- */
.fees{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.fee{background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px 28px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.2,.6,.3,1),box-shadow .25s,border-color .25s}
.fee:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--plum-light)}
.fee.feature{border-color:var(--plum);box-shadow:var(--shadow-md);position:relative}
.fee.feature::after{content:'Most enquired about';position:absolute;top:-13px;left:28px;background:var(--plum);color:#fff;font-size:.82rem;font-weight:700;padding:4px 12px;border-radius:20px}
.fee h3{margin-bottom:.15em}
.fee .price{font-family:'Fraunces',Georgia,serif;font-size:2.5rem;color:var(--plum);line-height:1.1;margin:14px 0 2px;font-weight:500}
.fee .per{font-size:.98rem;color:var(--muted);margin-bottom:16px}
.fee p{font-size:1rem;color:var(--muted)}
.fee .btn{margin-top:auto;width:100%}
.fee-note{margin-top:30px;padding:24px 28px;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--plum);border-radius:8px;font-size:1rem;color:#3B3348}
.fee-note p:last-child{margin-bottom:0}

/* ---------- reviews: horizontal scroller with snap ---------- */
.revwrap{position:relative}
.reviews{
  display:flex;gap:clamp(18px,2.4vw,28px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding:4px 4px 6px;margin:0 -4px;
}
.reviews::-webkit-scrollbar{display:none}
.review{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:34px 32px;
  display:flex;flex-direction:column;flex:0 0 calc(50% - clamp(18px,2.4vw,28px)/2 - 4px);
  scroll-snap-align:start;position:relative;
}
.review::before{
  content:'\201C';position:absolute;top:14px;right:26px;
  font-family:'Fraunces',Georgia,serif;font-size:5rem;line-height:1;color:var(--lilac);
}
.revnav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.rbtn{
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--lilac-line);background:#fff;
  color:var(--plum);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s,color .18s;
}
.rbtn:hover{background:var(--plum);border-color:var(--plum);color:#fff}
.rdots{display:flex;gap:8px}
.rdots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--lilac-line);cursor:pointer;
  transition:background .2s,width .2s;
}
.rdots button.on{background:var(--plum);width:26px;border-radius:5px}
.stars{color:var(--amber);font-size:1.05rem;letter-spacing:2px;margin-bottom:14px}
.review blockquote{margin:0 0 18px;font-family:'Fraunces',Georgia,serif;font-size:1.12rem;line-height:1.6;color:var(--plum-deep);font-weight:400}
.review cite{margin-top:auto;font-style:normal;font-size:.98rem;color:var(--muted)}
.review cite b{display:block;color:var(--ink);font-size:1.02rem}

/* ---------- credentials ---------- */
.creds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);align-items:stretch}
.cred-card{background:#fff;border-radius:12px;padding:clamp(26px,3vw,40px);color:var(--ink);box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.cred-top{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.cred-big{font-family:'Fraunces',Georgia,serif;font-size:clamp(2.6rem,4vw,3.4rem);color:var(--plum);line-height:1;font-weight:500;flex:none}
.cred-big small{font-size:.45em;color:var(--muted);font-weight:400}
.cred-top b{display:block;font-size:1.12rem;color:var(--plum-deep);line-height:1.35}
/* the organisations' own marks; both sit on white, same as the card */
.cred-logo{display:block;height:38px;width:auto;margin-bottom:8px}
.cred-logo-wide{height:26px}
/* the descriptor line lives inside the div; a bare `.cred-top span` would also
   catch the .cred-big figure and shrink it (the .trust span lesson again) */
.cred-top div span{color:var(--muted);font-size:.98rem}
.cred-card p{color:#3B3348;font-size:1.02rem}
.cred-card .card-link{margin-top:auto;padding-top:18px}
.cqc-areas{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:6px 0 0}
.cqc-areas li{position:relative;padding:9px 16px 9px 38px;background:var(--lilac);border-radius:8px;font-weight:700;font-size:.95rem;color:var(--plum-deep)}
.cqc-areas li::before{content:'';position:absolute;left:16px;top:50%;width:12px;height:7px;border-left:2px solid var(--moss);border-bottom:2px solid var(--moss);transform:translateY(-70%) rotate(-45deg)}
.cred-card .cred-note{margin:18px 0 0;font-size:.95rem;color:var(--muted)}

/* ---------- areas ---------- */
/* padding:0 matters: the browser default 40px ul indent pushed the town list
   out of line with the heading and buttons around it */
.areas{display:flex;flex-wrap:wrap;gap:0;padding:0;border-top:1px solid var(--line);margin-top:8px}
.areas li{list-style:none;flex:1 1 190px;padding:16px 8px 16px 0;border-bottom:1px solid var(--line);font-size:1.05rem;color:#3B3348}
.areas li b{color:var(--plum-deep);font-weight:700}

/* ---------- faq ---------- */
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:'Fraunces',Georgia,serif;font-size:1.18rem;color:var(--plum-deep);line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:32px;width:12px;height:12px;
  border-right:2px solid var(--plum);border-bottom:2px solid var(--plum);
  transform:rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:36px}
.faq .ans{padding:0 40px 26px 0;color:#3B3348}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- contact / forms ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,64px);align-items:start}
.contact-list{list-style:none;padding:0;margin:26px 0 0}
.contact-list li{display:flex;gap:16px;padding:20px 0;border-top:1px solid rgba(255,255,255,.16)}
.contact-list li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.contact-list .ci{width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex:none}
.contact-list .ci svg{width:20px;height:20px;color:#fff}
.contact-list b{display:block;color:#fff;font-size:1.08rem}
.contact-list a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.contact-list span{color:rgba(255,255,255,.72);font-size:.98rem}

.form-card{background:#fff;border-radius:12px;padding:clamp(26px,3.4vw,42px);box-shadow:var(--shadow-md);color:var(--ink)}
.form-card h3{margin-bottom:.3em}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:.98rem;margin-bottom:7px;color:var(--plum-deep)}
.field .hint{font-weight:400;color:var(--muted);font-size:.92rem}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;border:1.5px solid var(--line);border-radius:6px;
  font-family:'Karla',sans-serif;font-size:1.02rem;color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s;
}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--plum);box-shadow:0 0 0 3px rgba(62,24,107,.12);outline:0}
.field.err input,.field.err select{border-color:#B3261E}
.field .msg{display:none;color:#B3261E;font-size:.9rem;margin-top:6px}
.field.err .msg{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.choices{display:grid;gap:10px}
/* specificity has to beat .field label, which these labels also match */
.field .choices .choice,.choices .choice{
  display:flex;align-items:flex-start;gap:12px;padding:15px 16px;margin:0;
  border:1.5px solid var(--line);border-radius:8px;cursor:pointer;font-weight:400;color:var(--ink);
  transition:border-color .18s,background .18s;
}
.choices .choice:hover{border-color:var(--plum-light);background:var(--paper)}
.choices .choice input{margin:4px 0 0;accent-color:var(--plum);width:19px;height:19px;flex:none}
.choices .choice b{display:block;color:var(--plum-deep)}
.choices .choice small{color:var(--muted);font-size:.94rem;line-height:1.45;display:block}
.choices .choice:has(input:checked){border-color:var(--plum);background:var(--lilac)}
.field .consent,.consent{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;font-weight:400;color:var(--muted);line-height:1.5;margin:4px 0 20px}
.consent input{margin-top:3px;accent-color:var(--plum);width:18px;height:18px;flex:none}

/* multi step */
.steps{display:flex;gap:8px;margin-bottom:26px}
.steps .s{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background .3s}
.steps .s.on{background:var(--plum)}
.step{display:none}
.step.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step-nav{display:flex;gap:12px;margin-top:22px}
.step-nav .btn{flex:1}
.summary{background:var(--lilac);border-radius:8px;padding:20px 22px;margin-bottom:20px;font-size:1rem}
.summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
.summary dt{color:var(--muted)}
.summary dd{margin:0;color:var(--plum-deep);font-weight:700}
.done{text-align:center;padding:16px 0}
.done .tick{width:64px;height:64px;border-radius:50%;background:var(--moss-soft);color:var(--moss);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.done .tick svg{width:30px;height:30px}

/* ---------- footer ---------- */
.site-footer{background:var(--plum-deep);color:rgba(255,255,255,.72);padding:clamp(52px,6vw,76px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,52px)}
.site-footer img.flogo{height:62px;width:auto;margin-bottom:20px}
.site-footer h4{color:#fff;font-family:'Karla',sans-serif;font-size:.98rem;font-weight:700;letter-spacing:.01em;margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:11px;font-size:1rem}
.site-footer a{color:rgba(255,255,255,.78);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer p{font-size:1rem;line-height:1.7}
.foot-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.badge{border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:8px 13px;font-size:.9rem;color:rgba(255,255,255,.85)}
.badge b{color:#fff}
.foot-bottom{margin-top:clamp(36px,5vw,58px);border-top:1px solid rgba(255,255,255,.14);padding:24px 0 30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.94rem}
.foot-bottom a{border-bottom:0}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(26,10,45,.94);display:none;align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:80vh;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb .cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-size:1rem;padding:0 20px}
.lb button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .18s}
.lb button:hover{background:rgba(255,255,255,.24)}
.lb .x{top:22px;right:22px}
.lb .prev{left:20px;top:50%;transform:translateY(-50%)}
.lb .next{right:20px;top:50%;transform:translateY(-50%)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:130;background:rgba(26,10,45,.62);display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.modal.open{display:flex}
.modal-inner{background:#fff;border-radius:12px;max-width:560px;width:100%;padding:clamp(26px,3.4vw,40px);position:relative;max-height:92vh;overflow-y:auto;box-shadow:0 40px 90px rgba(0,0,0,.3)}
.modal-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border:0;background:var(--lilac);color:var(--plum-deep);border-radius:50%;font-size:20px;cursor:pointer}

/* ---------- inner page hero ---------- */
.page-hero{background:var(--plum-deep);color:#fff;padding:150px 0 clamp(56px,7vw,84px)}
.page-hero h1{color:#fff;max-width:20ch}
.page-hero .lede{color:rgba(255,255,255,.86);max-width:56ch}
.page-hero .label{color:#C6A9E4}
.crumb{font-size:.96rem;color:rgba(255,255,255,.6);margin-bottom:18px}
.crumb a{color:rgba(255,255,255,.82);text-decoration:none}
.crumb a:hover{color:#fff}

/* ---------- brochure page ---------- */
.broch{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,64px);align-items:center}
.broch-cover{border-radius:var(--arch);overflow:hidden;box-shadow:var(--shadow-md);background:var(--plum-deep);color:#fff;padding:clamp(34px,5vw,58px) clamp(26px,4vw,44px);text-align:center;min-height:440px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.broch-cover img{height:78px;width:auto;margin-bottom:26px}
.broch-cover h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.1rem)}
.broch-cover p{color:rgba(255,255,255,.75);font-size:1rem;margin-bottom:0}
.broch-cover .rule{width:64px;height:1px;background:rgba(255,255,255,.4);margin:20px 0}
.dl-list{list-style:none;padding:0;margin:0 0 28px}
.dl-list li{position:relative;padding:11px 0 11px 32px;border-bottom:1px solid var(--line);color:#3B3348}
.dl-list li::before{content:'';position:absolute;left:2px;top:18px;width:14px;height:8px;border-left:2px solid var(--plum);border-bottom:2px solid var(--plum);transform:rotate(-45deg)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .trust .t{border-left:0;border-top:1px solid rgba(255,255,255,.13);padding:24px 0}
  .trust .t:nth-child(-n+2){border-top:0}
  .trust .t:nth-child(even){padding-left:26px;border-left:1px solid rgba(255,255,255,.13)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none}
  /* the nav's margin-left:auto is what pushes the actions right on desktop;
     with the nav hidden, the cta group needs its own */
  .hdr-cta{margin-left:auto}
  .burger{display:flex}
  .hdr-cta .hdr-phone span{display:none}
  .hdr-cta .hdr-phone{padding:12px 14px}
  .split,.contact-grid,.broch{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .split-media img{aspect-ratio:16/11;max-height:none}
  .g3,.fees{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr;gap:0}
  .journey li{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:38px 1fr;column-gap:16px}
  .journey li::after{display:none}
  .journey .n{grid-row:span 2;margin-bottom:0}
  .journey h3,.journey p{grid-column:2}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .shot.span3{grid-column:span 2}
  .shot.span2{grid-column:span 2}
  .shot.span4{grid-column:span 4}
  .shot.span6{grid-column:span 4}
  .shot.portrait{aspect-ratio:4/3}
  .review{flex:0 0 86%}
  .creds{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:17px}
  /* a wide landscape hero crops hard on a phone, so frame the entrance rather
     than the middle of the roof; the card stays anchored to the foot */
  .hero-media img{object-position:62% center}
  .hero-panel{padding-top:104px;padding-bottom:18px}
  .hero-card{border-radius:12px;padding:24px 20px 26px}
  /* on a phone the trust strip with the full figures peeks right below the
     card, so the in-card row keeps only the two marks, logo stacked on label */
  .hero-proof{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:14px}
  .hero-proof .hp{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-proof .hp:not(:first-child){padding-left:0;border-left:0}
  .hero-proof .hp > span{white-space:normal}
  .hero-proof .hp-plain{display:none}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .g2,.g4,.two{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr;gap:12px}
  .shot.span2,.shot.span3,.shot.span4,.shot.span6,.shot.portrait,.shot.tall-16{grid-column:span 1;aspect-ratio:4/3}
  .foot-grid{grid-template-columns:1fr}
  .areas li{flex:1 1 100%}
  .step-nav{flex-direction:column-reverse}
  .brand img{height:44px}
  .site-header.solid .brand img{height:40px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .site-header,.mobile-menu,.hero-actions{display:none!important}
}