:root:has(#landing.active) {
  --paper-photo: url('/assets/images/homepage-image-led/paper.webp');
  --people-photo: url('/assets/images/homepage-image-led/consultation.webp');
  --civic-photo: url('/assets/images/homepage-image-led/civic.webp');
  --meeting-photo: url('/assets/images/home-rotation/concept-6-investigation-room.webp');
  --hearing-photo: url('/assets/images/home-rotation/concept-1-tribunal-room.webp');
  --exterior-photo: url('/assets/images/home-rotation/concept-4-tribunal-exterior.webp');
  --heading: Inter, 'Segoe UI', sans-serif;
  --gutter: clamp(20px, 5vw, 76px);
  --width: 1160px;
  --radius: 17px;
  --or: #a14329;
  --ord: #8b3420;
  --vi: #52316f;
  --vid: #3b234e;
  --tx: #261e2b;
  --tx2: #3d3342;
  --mu: #574c5b;
  --off: #faf5ef;
  --orp: #fbede4;
  --vip: #f2ebf6;
  --bdr: #ded6df;
  --edge: #d9cddc;
  --canvas: #fffcf8;
  --panel: #f9f1eb;
  --section-alt: #f4edf5;
  --dark: #2c1e3e;
  --dark-accent: #ead6f5;
  --hero-photo: var(--people-photo);
  --hero-wash: linear-gradient(90deg,#fcf5ee 0%,#fcf5eef5 28%,#fcf5eeca 46%,#fcf5ee18 72%),linear-gradient(0deg,#fcf5ee 0%,transparent 52%);
  --section-wash: linear-gradient(90deg,#fbf4ec 10%,#fbf4eceb 48%,#fbf4ec9c 100%);
  --card-wash: linear-gradient(105deg,#fffcfafc 12%,#fffcfaf4 55%,#fffcfac7 100%);
  --footer-wash: linear-gradient(100deg,#f1e6eb 10%,#f1e6ebc4 100%);
}

body:has(#landing.active) { background:var(--canvas); font-family:Inter,'Segoe UI',sans-serif; }
#landing :is(h1,h2,h3,.cc-name,.svc-lbl,.hw-t,.cs-out,.fee-price,.art-t,.unsure-home strong) { font-family:var(--heading); }
body:has(#landing.active) nav { padding-inline:var(--gutter); background:#fffcfa; border-color:var(--edge); box-shadow:none; }
body:has(#landing.active) nav .nav-links { border-color:transparent!important; background:transparent!important; }
body:has(#landing.active) nav .nav-links :is(.nlink,.ndrop-btn),body:has(#landing.active) nav .nav-right .n-phone { color:var(--vid)!important; }
body:has(#landing.active) .ndrop-arr,#landing .fq-arr { width:.47rem; height:.47rem; margin:0 .2rem .2rem .15rem; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
body:has(#landing.active) .ndrop:is(:hover,:focus-within) .ndrop-arr,#landing .fq.open .fq-arr { transform:rotate(225deg); margin-bottom:-.2rem; }
body:has(#landing.active) .nav-logo { font-family:var(--heading); font-size:1.42rem; }
body:has(#landing.active) .nav-logo .p { color:var(--or); }
body:has(#landing.active) .nav-logo .h { color:var(--vid); }
body:has(#landing.active) :is(.n-cta,.callback-open) { background:var(--vi); color:white; }
body:has(#landing.active) :is(button,a,summary):focus-visible { outline:3px solid #a7552c; outline-offset:3px; }
:is(#how,#why,#about,#fees,#faqs,#guides,#claim-cards) { scroll-margin-top:78px; }
#landing :is(.hero-in,.si,.svc-strip-in,.era-in,.stats-row) { max-width:var(--width); }
#landing .hero { padding:clamp(48px,5.4vw,78px) var(--gutter) 0; border:0; background:var(--panel); }
#landing .hero::before { background:var(--hero-photo) center 36% / cover; opacity:1; }
#landing .hero::after { background:var(--hero-wash); }
#landing .hero-h { font-family:var(--heading); font-size:clamp(2.8rem,4.65vw,4.8rem); font-weight:800; line-height:1; max-width:785px; }
#landing .hero-h br { display:none; }
#landing .hero-h span { display:block; text-wrap:balance; }
#landing .hero-h .c1 { color:var(--tx); }
#landing .hero-h .c2 { color:var(--vi); }
#landing .hero-sub { color:var(--tx2); font-size:clamp(.95rem,1.15vw,1.08rem); margin:1.25rem 0 1.8rem; max-width:490px; }
#landing .hero-contact { background:#fffdf8f5; box-shadow:none; border-color:var(--edge); margin:0 0 1.35rem; padding:.65rem .78rem; }
#landing .hero-contact span { max-width:240px; font-weight:500; }
#landing .unsure-home { width:100%; margin:2.2rem 0 1rem; background:#fffdf8ea; border:1px solid var(--edge); border-radius:var(--radius); box-shadow:none; }
#landing .unsure-home b { background:var(--vi); }
#landing .cc-grid { gap:.82rem; padding-bottom:clamp(32px,5vw,62px); }
#landing .cc { display:flex; flex-direction:column; min-height:150px; border:1px solid var(--edge)!important; border-radius:var(--radius); padding:1.12rem; box-shadow:0 3px 10px #2217350d; }
#landing .cc:hover { border-color:var(--vi)!important; transform:translateY(-2px); box-shadow:0 8px 20px #22173515; }
#landing .cc::before { display:none; }
#landing .cc .home-icon { width:30px; height:30px; margin-bottom:.65rem; border-color:var(--edge); border-radius:8px; }
#landing .cc-name { font-size:1.08rem; }
#landing .cc-desc { font-size:.82rem; margin-bottom:.7rem; }
#landing .cc-foot { margin-top:auto; }
#landing .cc-award { white-space:normal; }

#landing :is(.cc,.hw,.ba,.cs,.fee,.art-card,.fq) {
  background:var(--card-wash),var(--card-photo,var(--paper-photo)) var(--crop,center) / cover no-repeat;
}
#landing :is(.cc,.hw,.fee,.art-card,.cs):nth-child(3n + 1) { --card-photo:var(--paper-photo); --crop:right 62%; }
#landing :is(.cc,.hw,.fee,.art-card,.cs):nth-child(3n + 2) { --card-photo:var(--meeting-photo); --crop:70% 44%; }
#landing :is(.cc,.hw,.fee,.art-card,.cs):nth-child(3n) { --card-photo:var(--civic-photo); --crop:right 65%; }
#landing .cc:nth-child(4) { --card-photo:var(--exterior-photo); }
#landing .cc:nth-child(5) { --card-photo:var(--people-photo); --crop:80% 45%; }
#landing .cc:nth-child(6) { --card-photo:var(--meeting-photo); }
#landing .ba-good { --card-photo:var(--people-photo); --crop:83% 52%; }
#landing .ba-bad { --card-photo:var(--civic-photo); }

#landing .sec { padding:clamp(43px,6.1vw,90px) var(--gutter); border-color:var(--edge); }
#landing .sh { font-family:var(--heading); font-size:clamp(2.1rem,4.05vw,3.65rem); letter-spacing:-.05em; line-height:1.02; max-width:880px; }
#landing .tag,#landing .tag-v,#landing .svc-lbl { border:none; padding:0; background:none; color:var(--ord); font:750 .71rem/1.25 Inter,'Segoe UI',sans-serif; text-transform:uppercase; letter-spacing:.14em; }
#landing .sub { color:var(--tx2); max-width:740px; font-size:.93rem; }
#landing .svc-strip { background:var(--section-wash),var(--paper-photo) right 64% / cover; padding:1.9rem var(--gutter); border-color:var(--edge); }
#landing .svc-grid { gap:.62rem; }
#landing .svc-btn { background:#fffdf8e8; border-color:var(--edge); border-radius:9px; color:var(--tx); }
#landing .svc-btn:hover { background:#fff; border-color:var(--vi); }
#landing .svc-btn .home-icon { background:var(--vip); color:var(--vid); border-color:var(--edge); }
#landing .era-strip { color:white; background:linear-gradient(95deg,#2c1e3efb 8%,#2c1e3ee3 55%,#2c1e3eb5 100%),var(--civic-photo) right 57% / cover; }
#landing .era-bg-text { display:none; }
#landing .era-in { padding:2.7rem var(--gutter); }
#landing .era-fact-l { color:#fff; }
#landing .stats-row { margin:auto; }
#landing .stats-row .stat { background:var(--canvas); border-color:var(--edge); }
#landing #how { background:var(--section-wash),var(--meeting-photo) center / cover; }
#landing #why { background:var(--canvas)!important; }
#landing #outcomes { background:var(--section-alt)!important; }
#landing #about { background:var(--canvas); }
#landing #fees { background:var(--section-wash),var(--paper-photo) right 50% / cover; }
#landing #faqs { background:var(--panel); }
#landing #guides { background:var(--canvas); }
#landing :is(.hw-wrap,.ba,.cs,.fee,.art-card,.fq) { border-radius:var(--radius); border:1px solid var(--edge); }
#landing .hw-wrap { overflow:visible; gap:.75rem; border:0; }
#landing .hw-wrap .hw { border:1px solid var(--edge); }
#landing .hw-num { color:var(--vi); font-size:1.3rem; margin-bottom:.65rem; }
#landing .hw-icon { display:none; }
#landing .hw-t { color:var(--tx)!important; font-size:1.1rem; }
#landing .hw-d { font-size:.84rem; }
#landing .ba-lbl { font-size:1rem; }
#landing .cs-out,#landing .fee-price { color:var(--vid); }
#landing .about-card { max-width:none; min-height:245px; border-radius:var(--radius); background:linear-gradient(100deg,#2c1e3efa 15%,#2c1e3ee7 51%,#2c1e3e9e 100%),var(--people-photo) right 53% / cover; }
#landing .about-card .about-p,#landing .about-card .about-cred { color:#fff; }
#landing .about-card>div:first-child { max-width:700px; }
#landing .fee { display:flex; flex-direction:column; align-items:stretch; }
#landing .fee.feat { border:2px solid var(--vi); }
#landing .fee-list { margin-bottom:1.35rem; }
#landing .fee .btn { margin-top:auto; }
#landing .fee-badge { background:var(--vi); }
#landing .btn-or { background:var(--vi); }
#landing .fq-head { min-height:56px; }
#landing .fq.open .fq-head { background:#fffbf6eb; }
#landing .art-card { display:block; text-align:left; color:inherit; }
#landing .art-card .art-inner { padding:1.2rem; }
#landing .art-t { font-size:1.02rem; }
#landing .art-p { font-size:.84rem; }
#landing .cred { background:var(--dark); }
#landing .ph-footer { background:var(--canvas)!important; border-color:var(--edge)!important; }
#landing .ph-footer-top { max-width:var(--width); }
#landing .ph-footer-call { background:var(--footer-wash),var(--paper-photo) right 59% / cover; }
#landing .ph-footer-enquiry { background:var(--vi)!important; }
#landing .ph-footer a:not(.ph-footer-enquiry),#landing .ph-footer summary { color:var(--vid)!important; }


/* Image Led */
:root:has(#landing.active) {
  --or:#9a3f29; --ord:#86301b; --vi:#4b305c; --vid:#392445; --edge:#dfd2dc;
  --canvas:#fffafa; --panel:#f9eef2; --section-alt:#f5edf4; --dark:#352540; --radius:22px;
  --hero-photo:url('/assets/images/home-rotation/concept-2-office-consultation.webp');
  --section-wash:linear-gradient(93deg,#faedf2 0%,#faedf2ed 38%,#faedf2b8 79%,#faedf2a6 100%);
  --card-wash:linear-gradient(120deg,#fff9f9fb 16%,#fff9f9ed 55%,#fff9f9a9 100%);
  --footer-wash:linear-gradient(100deg,#f2e3ed 0%,#f2e3edd9 57%,#f2e3ed82 100%);
}
:root:has(#landing.active) #landing .hero { background:#f8edf1; }
:root:has(#landing.active) #landing .hero::before { inset:24px 24px auto auto; width:53%; height:470px; border-radius:28px; background-position:80% center; }
:root:has(#landing.active) #landing .hero::after { inset:24px 24px auto auto; width:53%; height:470px; border-radius:28px; background:linear-gradient(90deg,#f8edf1 0%,#f8edf19e 17%,transparent 41%); }
:root:has(#landing.active) #landing .hero-h { max-width:640px; }
:root:has(#landing.active) #landing .hero-sub { max-width:425px; }
:root:has(#landing.active) #landing .hero-contact { max-width:570px; }
:root:has(#landing.active) #landing .unsure-home { margin-top:3rem; }
:root:has(#landing.active) #landing .cc { min-height:178px; }
:root:has(#landing.active) #landing #why { background:var(--section-wash),var(--civic-photo) right 45% / cover!important; }
:root:has(#landing.active) #landing #outcomes { background:var(--section-wash),var(--meeting-photo) right 52% / cover!important; }
:root:has(#landing.active) #landing #about { background:var(--section-alt); }
:root:has(#landing.active) #landing .about-card { min-height:280px; background-image:linear-gradient(90deg,#33223cf9 14%,#33223cea 53%,#33223c77 92%),var(--civic-photo); }
:root:has(#landing.active) #landing .art-card { min-height:186px; display:flex; align-items:end; background:linear-gradient(0deg,#fffafafc 3%,#fffafae8 42%,#fffafa1a 100%),var(--card-photo) var(--crop) / cover; }
:root:has(#landing.active) #landing .art-inner { width:100%; padding-top:4rem; }
:root:has(#landing.active) #landing .ph-footer-call { background-image:var(--footer-wash),var(--people-photo); }

@media(max-width:1150px) { body:has(#landing.active) nav { padding-inline:1rem; } }
@media(max-width:960px) {
  #landing :is(.hw-wrap,.fee-row,.cs-row,.art-row,.ba-row) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #landing .hero-h { max-width:680px; }
  #landing .hero-contact span { max-width:none; }
  :root:has(#landing.active) #landing .hero::before,:root:has(#landing.active) #landing .hero::after { width:57%; height:440px; }
}
@media(max-width:640px) {
  #landing .hero { padding-top:2.35rem; }
  #landing .hero::before { background-position:71% top; background-size:auto 530px; background-repeat:no-repeat; }
  #landing .hero::after { background:linear-gradient(180deg,#fcf5eedc,#fcf5eeb8 240px,#fcf5ee 510px); }
  #landing .hero-h { font-size:clamp(2.4rem,10.1vw,3.55rem); }
  #landing .hero-sub { margin-bottom:1.15rem; }
  #landing .hero-contact { width:100%; max-width:none; }
  #landing .unsure-home { margin-top:1rem; }
  #landing .sec { padding-block:3rem; }
  #landing :is(.hw-wrap,.fee-row,.cs-row,.art-row,.ba-row) { grid-template-columns:1fr; }
  #landing .about-card { grid-template-columns:1fr; gap:1rem; padding:1.35rem; }
  #landing .fee { padding:1.35rem; }
  #landing .era-facts { grid-template-columns:1fr; gap:1rem; }
  #landing .era-in { padding-block:2rem; }
  :root:has(#landing.active) #landing .hero { padding-top:225px; }
  :root:has(#landing.active) #landing .hero::before,:root:has(#landing.active) #landing .hero::after { inset:10px 10px auto; width:auto; height:235px; border-radius:16px; background-size:cover; }
  :root:has(#landing.active) #landing .hero::after { background:linear-gradient(0deg,#f8edf1,transparent 42%); }
  :root:has(#landing.active) #landing .unsure-home { margin-top:1rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.001s!important; } }

@font-face {
  font-family:'Homepage Inter'; font-weight:400 800; font-style:normal; font-display:swap;
  src:url('/assets/homepage-inter.woff2') format('woff2');
}

/* Give each prominent image its own section and keep text on a light wash. */
:root:has(#landing.active) {
  --heading:'Homepage Inter',Inter,'Segoe UI',sans-serif;
  --meeting-photo: url('/assets/images/home-rotation/concept-6-investigation-room.webp');
  --hall-photo: url('/assets/images/home-rotation/concept-3-hearing-centre-hall.webp');
  --handshake-photo: url('/assets/images/settlement/handshake.jpg');
}

#landing .svc-strip { background-image:var(--section-wash),var(--hall-photo); }
#landing .era-strip { background-image:linear-gradient(95deg,#2c1e3efb 8%,#2c1e3ee3 55%,#2c1e3eb5 100%),var(--hearing-photo); }
#landing #how { background-image:var(--section-wash),var(--meeting-photo); }
:root:has(#landing.active) #landing #why { background-image:var(--section-wash),var(--civic-photo)!important; }
:root:has(#landing.active) #landing #outcomes { background-image:var(--section-wash),var(--handshake-photo)!important; }
:root:has(#landing.active) #landing .about-card { background-image:linear-gradient(90deg,#33223cfc 14%,#33223cf3 52%,#33223c95 100%),var(--people-photo); }
:root:has(#landing.active) #landing .ph-footer-call { background-image:var(--footer-wash),var(--hall-photo); }

#landing :is(.cc,.art-card):nth-child(1) { --card-photo:var(--paper-photo); }
#landing :is(.cc,.art-card):nth-child(2) { --card-photo:var(--meeting-photo); }
#landing :is(.cc,.art-card):nth-child(3) { --card-photo:var(--civic-photo); }
#landing :is(.cc,.art-card):nth-child(4) { --card-photo:var(--exterior-photo); }
#landing :is(.cc,.art-card):nth-child(5) { --card-photo:var(--people-photo); --crop:77% 45%; }
#landing :is(.cc,.art-card):nth-child(6) { --card-photo:var(--hall-photo); }
#landing .fq:nth-child(even) { --card-photo:var(--hall-photo); }
#landing .art-card .art-inner { background:linear-gradient(0deg,#fffafafb 3%,#fffafaf0 42%,#fffafa00 100%); }

/* Keep the chosen colours and CSS chevrons across browser sessions. */
body:has(#landing.active) :is(.ndrop-arr,.fq-arr) { font-size:0; }
#landing .cc .home-icon,#landing .svc-btn .home-icon { font-style:normal; }
#landing :is(.cc,.svc-btn) .home-icon::before { content:'↗'; font:700 .95rem/1 var(--heading); }
#landing .fee .btn-p { background:var(--or); }
#landing .fee .btn-p:hover { background:var(--ord); }

@media(max-width:640px) {
  #landing .hero-h { text-align:left; }
  #landing :is(.art-card,.cc) { min-width:0; }
  #landing .era-act { flex-wrap:wrap; }
}