:root {
  --surface-inverse: #4a3050;
  --surface-inverse-soft: #5a3d60;
  --surface-footer: #402a47;
  --border-on-dark: rgba(255,255,255,.22);
}
body { margin: 0; background: var(--white); font-family: var(--font-sans); }
/* rose-600 does not clear 3:1 on the lighter plum ground; lift the accent on dark surfaces */
[style*="--surface-inverse"], [style*="--surface-footer"] { --text-accent: var(--rose-400); }
a { color: var(--rose-600); text-decoration: none; }
a:hover { color: var(--rose-700); }
html{scroll-behavior:smooth}
#enquire{scroll-margin-top:80px}
iframe[hidden]{display:none!important}
.ddw{padding-bottom:14px;margin-bottom:-14px}
.dd{display:none!important}
[data-mobile-toggle]{display:none!important}
[data-mobile-menu]{display:none!important}
body.menu-open [data-mobile-menu]{display:block!important}
body.menu-open{overflow:hidden}
:focus-visible{outline:2px solid var(--rose-600);outline-offset:2px}
.ddw:hover .dd,.ddw:focus-within .dd{display:grid!important}
a,button,[data-btn]{transition:background-color var(--duration-fast,120ms) var(--ease-standard,ease),border-color var(--duration-fast,120ms),color var(--duration-fast,120ms),transform var(--duration-base,200ms),box-shadow var(--duration-base,200ms)}
[data-btn]:hover{filter:brightness(.92)}
.h0:hover{color: var(--rose-600) !important}
.h1:hover{background: var(--plum-50) !important;color: var(--rose-600) !important}
.h2:hover{border-color: var(--plum-400) !important;background: var(--plum-50) !important}
.h3:hover{background: var(--plum-50) !important;border-color: var(--plum-300) !important;transform: translateY(-2px) !important;box-shadow: var(--shadow-md) !important}
.h4:hover{transform: translateY(-2px) !important;box-shadow: var(--shadow-md) !important;border-color: var(--plum-300) !important}
.h5:hover{color: var(--white) !important}
.h6:hover{background: var(--plum-50) !important;border-color: var(--plum-300) !important;color: var(--text-accent) !important}
@media (max-width: 960px){
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;gap:var(--space-8)!important}
  h1{font-size:clamp(2.1rem,7.5vw,3.4rem)!important;line-height:1.08!important}
  h2{font-size:clamp(1.6rem,5.5vw,2.4rem)!important}
  main section{padding-top:var(--space-12)!important;padding-bottom:var(--space-12)!important}
  :root{--gutter:20px}
  header nav>a:not([data-btn]),header nav>.ddw{display:none!important}
  header nav{gap:var(--space-3)!important}
  [data-mobile-toggle]{display:flex!important}
  article p,article [style*="font-size: 19px"]{font-size:17px!important}
  footer [style*="justify-content: space-between"]{flex-direction:column;gap:var(--space-3)!important}
}
@media (min-width: 480px) and (max-width: 960px){
  footer [style*="grid-template-columns: 1.3fr"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width: 640px){
  h1{font-size:clamp(2rem,9vw,2.6rem)!important}
  main section:first-of-type{padding-top:var(--space-10)!important}
  [data-btn]{white-space:normal}
}
@media (min-width: 640px) and (max-width: 960px){
  [style*="repeat(3,"],[style*="repeat(4,"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Narrow laptops: keep every header menu item on one line now there are two supervision links. */
@media (min-width: 961px) and (max-width: 1100px){
  header nav{gap:var(--space-4)!important}
  header nav>a,header nav>.ddw>a{white-space:nowrap}
}
/* Home sector grid: "Anyone Else" spans two columns on wider screens; on one-column phones it must not add a column. */
@media (max-width: 639px){
  [style*="grid-column: span 2"]{grid-column:auto!important}
}

/* Long CTA labels carry white-space:nowrap as an INLINE style, which pushed the
   document 7px wider than a 375px viewport and caused horizontal page scroll.
   Inline styles outrank stylesheet rules, so !important is required here. */
@media (max-width: 430px){
  a[data-btn]{white-space:normal!important;text-align:center}
}
/* Smallest phones: keep the header "Enquire now" button on one line. */
@media (max-width: 374px){
  header nav{gap:var(--space-3)!important}
  header a[data-btn]{white-space:nowrap!important;padding:8px 14px!important}
}

/* Sector pages: enquiry form in the banner.
   Phone/tablet: banner text, then the form card underneath.
   Desktop (1100px+): banner text left, form card right. Page sections below stay full width. */
.sector-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
.sector-hero-text{min-width:0}
.sector-form{scroll-margin-top:96px}
.sector-form-card{max-width:560px;width:100%;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-5);color:var(--text-body)}
.sector-form-title{margin:0 0 var(--space-3);font-size:var(--text-xl);color:var(--text-heading);line-height:var(--leading-heading)}
.sector-form-card [data-aud]{flex:1;white-space:nowrap;padding:9px 10px!important}
.sector-form-card iframe{display:block;width:100%;height:740px;border:0}
/* Smallest phones (under 375px): tighter card so the organisations/individuals switch fits. */
@media (max-width: 374px){
  .sector-form-card{padding:var(--space-4)}
  .sector-form-card [data-aud]{padding:8px 4px!important;font-size:14px!important;white-space:normal}
}
@media (min-width: 1100px){
  .sector-hero{grid-template-columns:minmax(0,1fr) 400px;column-gap:var(--space-12);align-items:stretch}
  .sector-form{align-self:start}
  /* Text column matches the form card's height: breadcrumb stays at the top, the rest sits centred beside the form. */
  .sector-hero-text{display:flex;flex-direction:column;align-items:flex-start}
  .sector-hero-text>:first-child{margin-bottom:0!important}
  .sector-hero-text>span:nth-child(2){margin-top:auto}
  .sector-hero-text>:last-child{margin-top:var(--space-10)!important;margin-bottom:auto!important}
  .sector-hero h1{font-size:var(--text-6xl)!important;margin-top:var(--space-6)!important}
  .sector-hero-text>p{font-size:var(--text-xl)!important;margin-top:var(--space-8)!important}
  .sector-form-card{max-width:none}
  .sector-form-card iframe{height:700px}
}