/* ==========================================================================
   Brain Dreamers — braindreamers.com
   Built from BD_Website_XD.xd. Colours, type sizes and section order follow
   the XD artboards; the 1400px board is the desktop reference width.
   ========================================================================== */

:root{
  /* grounds */
  --ink:      #141311;   /* primary band */
  --ink-2:    #1E1C1A;   /* alternate band */
  --ink-3:    #2A2724;   /* venn centre, raised chips */

  /* type */
  --white:    #FFFFFF;
  --body:     #C9C3BB;
  --mute:     #8C8781;
  --silver:   #BEC2C5;   /* logo + badge artwork */

  /* service accents */
  --s1:       #004F71;   /* 01 Branding & Strategy   */
  --s1-deep:  #003E51;
  --s2:       #FE5000;   /* 02 Visual Design & Content + interface accent */
  --s3:       #FF9E1B;   /* 03 Digital Services */
  --s4:       #BE3A34;   /* 04 Marketing & Advertising */
  --s5:       #535435;   /* 05 Special Services */
  --pink:     #E782A9;   /* manifesto 04 */

  /* layout */
  --navh:     100px;     /* fixed header height */
  --shell:    1400px;
  --gutter:   clamp(20px, 5.7vw, 80px);
  --band:     clamp(4.5rem, 9vw, 7.5rem);

  --f: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--f);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--s2); outline-offset:3px; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* section anchors land clear of the header, matching the XD scroll yOffset */
section[id]{ scroll-margin-top:var(--navh); }

.band       { padding-block:var(--band); }
.band--alt  { background:var(--ink-2); }
.band--ink  { background:var(--ink); }

/* --------------------------------------------------------------- type --- */

.eyebrow{
  margin:0;
  font-size:.875rem;          /* 14px */
  font-weight:600;
  letter-spacing:.185em;      /* XD charSpacing 185 */
  text-transform:uppercase;
  color:var(--mute);
}

.h-xl{                         /* 82px */
  margin:0;
  font-size:clamp(2.35rem, 5.85vw, 5.125rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.h-lg{                         /* 76px */
  margin:0;
  font-size:clamp(2.2rem, 5.4vw, 4.75rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.h-md{                         /* 44px */
  margin:0;
  font-size:clamp(1.9rem, 3.15vw, 2.75rem);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.copy{                         /* 21px */
  font-size:clamp(1rem, 1.5vw, 1.3125rem);
  font-weight:500;
  line-height:1.62;
  color:var(--body);
  margin:0;
}
.copy p{ margin:0 0 1.35em; }
.copy p:last-child{ margin-bottom:0; }
.copy strong{ font-weight:800; color:var(--body); }
.copy b{ font-weight:700; }

/* the short orange rule that sits under each section headline */
.rule{
  width:64px; height:3px; border:0; margin:1.5rem 0 0;
  background:var(--s2);
}

/* ------------------------------------------------------------- header --- */

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  height:var(--navh);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:0 var(--gutter);
  background:transparent;
  transition:background .3s ease;
}
/* solid, not translucent — a see-through bar reads as doubled text
   when a section scrolls underneath it */
.site-header.is-stuck{ background:var(--ink); }
.site-header__logo img{ width:180px; height:auto; }

.nav{ display:flex; gap:2.25rem; align-items:center; }
.nav a{
  font-size:.75rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute);
  transition:color .2s ease;
}
.nav a:hover, .nav a:focus-visible{ color:var(--white); }

.menu-toggle{
  display:none;
  font-size:.75rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--body);
}
@media (max-width:900px){
  :root{ --navh:72px; }
  .nav{ display:none; }
  .menu-toggle{ display:block; }
  .site-header__logo img{ width:150px; }
}

/* full-screen menu overlay */
.menu{
  position:fixed; inset:0; z-index:90;
  background:var(--ink);
  display:none; flex-direction:column; justify-content:center;
  padding:var(--gutter);
}
.menu.is-open{ display:flex; }
.menu nav{ display:flex; flex-direction:column; gap:.35rem; }
.menu nav a{
  font-size:clamp(1.9rem, 8.5vw, 3rem);
  font-weight:800; letter-spacing:-.025em; line-height:1.25;
}
.menu__close{
  position:absolute; top:1rem; right:var(--gutter);
  width:3rem; height:3rem; font-size:2rem; line-height:1; color:var(--body);
}
.menu__foot{
  margin-top:3rem; font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
}

/* --------------------------------------------------------------- hero --- */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  background:var(--ink);
  display:flex; flex-direction:column;
  padding-block:var(--navh) 0;
}
.hero__stage{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding-inline:var(--gutter);
}
/* The measure is set in absolute units while the type scales far more
   slowly, so narrowing the window re-wraps the line instead of shrinking
   the whole block. text-wrap:balance evens the lines out; the non-breaking
   space before each final word stops a widow on the last line. */
.hero__line{
  margin:0;
  max-width:min(620px, 86vw);
  font-size:clamp(2.2rem, 3.8vw, 4.25rem);
  font-weight:800; line-height:1.12; letter-spacing:-.025em;
  text-wrap:balance;
  color:var(--white);
  transition:opacity 1s ease-in-out;   /* XD dissolve: 1s ease-in-out */
}
.hero__line.is-out{ opacity:0; }

/* The seal and tagline take up no room until the sequence lands — otherwise
   they'd sit invisible in the middle of the stack and push the quote well
   above centre. Expanding the row is also what lifts the quote as the seal
   fades in. */
.hero__resolve{
  display:grid;
  grid-template-rows:0fr;
  margin-top:0;
  pointer-events:none;
  transition:grid-template-rows .9s cubic-bezier(.22,.7,.28,1),
             margin-top      .9s cubic-bezier(.22,.7,.28,1);
}
.hero__resolve-inner{
  overflow:hidden; min-height:0;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.5rem, 3.5vh, 2.5rem);
}
.hero__resolve.is-in{
  grid-template-rows:1fr;
  margin-top:clamp(1.75rem, 4vh, 3rem);
  pointer-events:auto;
}

/* the seal lands first, the tagline follows a second behind it */
.hero__badge{
  width:200px; max-width:42vw; height:auto;
  opacity:0; transition:opacity 1.2s ease-in-out;
}
.hero__tagline{
  margin:0;
  font-size:clamp(1.05rem, 2.15vw, 1.875rem);   /* 30px */
  font-weight:400;
  color:var(--s3);
  letter-spacing:-.005em;
  opacity:0; transition:opacity 1.2s ease-in-out 1s;
}
.hero__tagline b{ font-weight:800; }
.hero__resolve.is-in .hero__badge,
.hero__resolve.is-in .hero__tagline{ opacity:1; }

.hero__foot{
  padding:0 var(--gutter) clamp(1.5rem, 3vh, 2.5rem);
  width:100%; max-width:var(--shell); margin-inline:auto;
}
.hero__foot hr{ border:0; border-top:1px solid rgba(190,194,197,.18); margin:0 0 1.4rem; }
.hero__disciplines{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem clamp(1.25rem, 3.4vw, 3.25rem);
}
.hero__disciplines li{
  font-size:.8125rem; font-weight:600; letter-spacing:.185em;
  text-transform:uppercase; color:var(--mute);
}

.hero__skip{
  display:block;
  margin:0 auto clamp(1.5rem, 3vh, 2.5rem);
  padding:.6rem 1rem;
  font-size:.68rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#5F5A55;
  transition:color .25s ease, opacity .4s ease;
}
.hero__skip:hover{ color:var(--body); }
/* keeps its space once the sequence lands, so nothing jumps */
.hero__skip.is-done{ visibility:hidden; pointer-events:none; }

/* ----------------------------------------------------- split sections --- */

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 5.5rem);
  align-items:center;
  margin-top:clamp(2rem, 4vw, 3.25rem);
}
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

/* point of view */
.pov__quote{
  margin:2rem 0 1.6rem;
  font-size:1rem; font-weight:800; line-height:1.5;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--s2);
}

/* who we are — the amber callout bubble */
.bubble{
  position:relative;
  border:2px solid var(--s3);
  border-radius:14px;
  padding:clamp(1.5rem, 2.6vw, 2.25rem);
  color:var(--s3);
  font-size:clamp(1.05rem, 1.86vw, 1.625rem);  /* 26px */
  font-weight:500;
  line-height:1.45;
  max-width:26ch;
}
.bubble b{ font-weight:800; }
.bubble::after,
.bubble::before{
  content:""; position:absolute; bottom:-19px; left:44px;
  width:0; height:0;
  border-left:18px solid transparent;
  border-right:0 solid transparent;
  border-top:19px solid var(--s3);
}
.bubble::after{
  bottom:-15px; left:46px;
  border-top-color:var(--ink);
  border-left-width:14px;
  border-top-width:15px;
}

/* philosophy — venn */
.venn{ width:100%; max-width:460px; margin-inline:auto; height:auto; }
.venn__label{
  font-family:var(--f); font-size:12px; font-weight:700; letter-spacing:1.4px;
}

/* ----------------------------------------------------------- services --- */

.services{ margin-top:clamp(2.5rem, 5vw, 4rem); }

.service{ border-top:1px solid rgba(190,194,197,.16); }
.service:last-child{ border-bottom:1px solid rgba(190,194,197,.16); }

.service__head{
  width:100%;
  display:grid;
  grid-template-columns:clamp(60px, 7.8vw, 109px) minmax(0,1fr) 44px;
  align-items:center;
  gap:clamp(.75rem, 1.5vw, 1.5rem);
  padding-block:clamp(1.5rem, 2.4vw, 2.1rem);
  text-align:left;
}
.service__num{
  font-size:clamp(1.5rem, 2.7vw, 2.375rem);   /* 38px */
  font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--acc);
}
.service__name{
  display:block;
  font-size:clamp(1.4rem, 3.15vw, 2.75rem);   /* 44px */
  font-weight:800; line-height:1.1; letter-spacing:-.02em;
  color:var(--white);
}
.service__subs{
  display:block; margin-top:.55rem;
  font-size:.8125rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--mute);
}
.service__toggle{
  position:relative;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(190,194,197,.35);
  justify-self:end;
  transition:background-color .28s ease, border-color .28s ease;
}
.service__toggle::before,
.service__toggle::after{
  content:""; position:absolute; top:50%; left:50%;
  width:15px; height:1.5px; background:var(--silver);
  transform:translate(-50%,-50%);
  transition:transform .3s ease, background-color .28s ease;
}
.service__toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }

.service.is-open .service__toggle{
  background:var(--acc); border-color:var(--acc);
}
.service.is-open .service__toggle::before,
.service.is-open .service__toggle::after{ background:var(--ink); }
.service.is-open .service__toggle::after{ transform:translate(-50%,-50%) rotate(0deg); }

.service__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,.7,.28,1);
}
.service.is-open .service__panel{ grid-template-rows:1fr; }
.service__panel > div{ overflow:hidden; min-height:0; }

.service__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) 500px;
  gap:clamp(1.75rem, 3.6vw, 3.5rem);
  align-items:start;
  padding:clamp(.5rem,1vw,1rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  padding-left:clamp(0px, 7.8vw, 109px);
}
.service__kicker{
  margin:1.75rem 0 0;
  font-size:clamp(1.2rem, 2.15vw, 1.875rem);   /* 30px */
  font-weight:400; line-height:1.28; letter-spacing:-.01em;
  color:var(--acc);
}

/* the single rotating creative */
.creative{
  position:relative;
  width:100%; max-width:500px; aspect-ratio:1/1;
  background:var(--ink-2);
  overflow:hidden;
  margin:0;
  justify-self:end;
}
.creative img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity 1s ease-in-out;   /* 1s cross-fade, per brief */
}
.creative img.is-showing{ opacity:1; }

@media (max-width:1100px){
  .service__inner{ grid-template-columns:minmax(0,1fr) minmax(0,42vw); }
}
@media (max-width:860px){
  .service__inner{ grid-template-columns:1fr; padding-left:0; }
  .creative{ justify-self:stretch; max-width:none; order:-1; }
  .service__head{ grid-template-columns:clamp(46px,12vw,60px) minmax(0,1fr) 38px; }
  .service__toggle{ width:38px; height:38px; }
}

/* Attribution note under the five drawers. Sits below the closing hairline,
   flush with the section's left edge, in the same grey as the sub-disciplines
   so it reads as a footnote rather than as another piece of copy. */
.work-note{
  margin:clamp(1.5rem, 2.6vw, 2.25rem) 0 0;
  font-size:clamp(.85rem, 1.05vw, .95rem);
  line-height:1.68;
  color:var(--mute);
  max-width:112ch;
}

/* ---------------------------------------------------------- manifesto --- */

/* the cards butt up against each other, divided by a hairline — the 1px
   grid gap lets the container colour show through as the rule */
.manifesto{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(228px, 1fr));
  gap:1px;
  background:rgba(190,194,197,.18);
  border:1px solid rgba(190,194,197,.18);
  margin-top:clamp(2.25rem, 4.5vw, 3.5rem);
}
.value{
  background:var(--ink);
  padding:clamp(1.25rem, 1.7vw, 1.6rem);
  display:flex; flex-direction:column; gap:.95rem;
}
@media (min-width:900px){ .value{ min-height:380px; } }
.value__chip{
  width:32px; height:32px; flex:0 0 auto;
  display:grid; place-items:center;
  font-size:.75rem; font-weight:800; color:var(--white);
  font-variant-numeric:tabular-nums;
}
.value h3{
  margin:0;
  font-size:clamp(1.25rem, 1.45vw, 1.4rem); font-weight:800;
  line-height:1.2; letter-spacing:-.015em;
  color:var(--white);
}
.value p{
  margin:0;
  font-size:clamp(.95rem, 1.12vw, 1.0625rem); line-height:1.58; color:var(--mute);
}
.value__slogan{
  margin-top:auto;
  font-size:clamp(.95rem, 1.12vw, 1.0625rem); font-weight:700; line-height:1.38;
  color:var(--acc);
}
.shop-note{
  margin:clamp(1.75rem, 3vw, 2.5rem) 0 0;
  font-size:clamp(.9rem, 1.2vw, 1.0625rem);
  font-weight:500; line-height:1.6; color:var(--body);
}
.shop-note b{ color:var(--s2); font-weight:800; }

/* ------------------------------------------------------------ plug in --- */

.modes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:clamp(1.25rem, 1.8vw, 1.6rem);
  margin-top:clamp(2.25rem, 4vw, 3.25rem);
}
.mode{
  background:var(--ink-2);
  padding:clamp(1.75rem, 2.7vw, 2.375rem);
  display:flex; flex-direction:column; gap:1.1rem;
}
.mode__label{
  margin:0;
  font-size:clamp(.8rem, 1.35vw, 1.1875rem);
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc);
}
.mode h3{
  margin:0;
  font-size:clamp(1.5rem, 2.7vw, 2.375rem);   /* 38px */
  font-weight:800; line-height:1.12; letter-spacing:-.02em;
}
.mode p{
  margin:0;
  font-size:clamp(.95rem, 1.35vw, 1.1875rem);
  line-height:1.58; color:var(--body);
}
.mode ul{ margin:.35rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.mode li{
  display:flex; gap:.85rem; align-items:baseline;
  font-size:clamp(.9rem, 1.28vw, 1.125rem);
  color:var(--body);
}
.mode li::before{
  content:""; width:10px; height:10px; flex:0 0 auto;
  background:var(--acc); transform:translateY(-1px);
}

/* ------------------------------------------------------------ contact --- */

.contact{ text-align:center; padding-block:clamp(5rem, 10vw, 8.5rem); }
.contact__badge{ width:200px; max-width:42vw; margin:0 auto clamp(2.5rem, 6vw, 5rem); }
.contact__tagline{
  margin:clamp(1.1rem,2vw,1.5rem) 0 clamp(2rem, 3.6vw, 2.75rem);
  font-size:clamp(1rem, 1.5vw, 1.3125rem);
  font-weight:500; color:var(--s2);
}
.btn{
  display:inline-block;
  background:var(--s2); color:var(--ink);
  padding:1.05rem 2.5rem;
  font-size:.875rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  transition:transform .2s ease, background-color .2s ease;
}
.btn:hover, .btn:focus-visible{ transform:translateY(-2px); background:var(--s3); }

.site-footer{ background:var(--ink); }
.site-footer__inner{
  border-top:1px solid rgba(190,194,197,.16);
  padding-block:2.25rem 3rem;
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
}
.site-footer span, .site-footer a{
  font-size:.6875rem; font-weight:600; letter-spacing:.185em;
  text-transform:uppercase; color:var(--mute);
}
.site-footer a:hover{ color:var(--body); }

/* -------------------------------------------------------------- a11y ---- */

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ============================================================ enquiry === */
/* The form ships in the markup but hidden, and opens in place under the
   button — the page reads as clean as the XD until someone asks for it. */

.contact__alt{
  margin:1.25rem 0 0;
  font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute);
}
.contact__alt a{ color:var(--mute); border-bottom:1px solid rgba(190,194,197,.3); }
.contact__alt a:hover{ color:var(--body); }

.contact__cta{ transition:opacity .3s ease; }
.contact__cta.is-gone{ display:none; }

.contact__panel{
  max-width:760px;
  margin:clamp(.5rem,2vw,1.5rem) auto 0;
  text-align:left;
}
.contact__panel[hidden]{ display:none; }
.contact__panel.is-open{
  animation:enquiry-in .45s cubic-bezier(.22,.7,.28,1) both;
}
@keyframes enquiry-in{
  from{ opacity:0; transform:translateY(-10px); }
  to  { opacity:1; transform:none; }
}

.enquiry__intro{
  margin:0 0 clamp(1.5rem,2.6vw,2rem);
  font-size:clamp(.95rem,1.2vw,1.0625rem);
  line-height:1.6; color:var(--mute);
}

.enquiry__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.15rem 1.25rem;
}
.field--wide{ grid-column:1 / -1; }
@media (max-width:640px){ .enquiry__grid{ grid-template-columns:1fr; } }

.field{ margin:0; display:flex; flex-direction:column; gap:.5rem; }
.field label{
  font-size:.6875rem; font-weight:700; letter-spacing:.185em;
  text-transform:uppercase; color:var(--mute);
}
.field label span[aria-hidden]{ color:var(--s2); }
.field__opt{
  font-weight:600; letter-spacing:.14em; color:#5F5A55; text-transform:lowercase;
}

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--f); font-size:1rem; font-weight:500;
  color:var(--white);
  background:var(--ink-2);
  border:1px solid rgba(190,194,197,.18);
  border-radius:0;
  padding:.85rem .95rem;
  transition:border-color .2s ease, background-color .2s ease;
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:8.5rem; line-height:1.6; }
.field select{
  /* the arrow, drawn rather than fetched, so nothing external is needed */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238C8781' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.75rem;
  cursor:pointer;
}
.field input:hover, .field select:hover, .field textarea:hover{
  border-color:rgba(190,194,197,.34);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--s2);
  background:var(--ink-3);
}
.field.is-bad input, .field.is-bad textarea{ border-color:var(--s4); }
.field__error{
  font-size:.78rem; font-weight:600; color:#D9635D; letter-spacing:.02em;
  text-transform:none;
}

/* the honeypot — off-screen rather than display:none, which some bots skip */
.enquiry__trap{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; margin:0;
}

.enquiry__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 1.75rem;
  margin-top:clamp(1.5rem,2.6vw,2rem);
}
.enquiry__foot .btn{ border:0; cursor:pointer; }
.enquiry__foot .btn[disabled]{ opacity:.55; cursor:progress; transform:none; }

.enquiry__cancel{
  font-size:.75rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute);
  transition:color .2s ease;
}
.enquiry__cancel:hover{ color:var(--body); }

.enquiry__status{
  margin:1.1rem 0 0; min-height:1.25rem;
  font-size:.9rem; line-height:1.5; color:#D9635D;
}
.enquiry__status:empty{ margin:0; min-height:0; }

.enquiry__done{ padding:clamp(1.5rem,3vw,2.5rem) 0; }
.enquiry__done[hidden]{ display:none; }
.enquiry__done-head{
  margin:0 0 .65rem;
  font-size:clamp(1.5rem,2.7vw,2.1rem); font-weight:800; letter-spacing:-.02em;
  color:var(--white);
}
.enquiry__done-sub{ margin:0; font-size:1.0625rem; line-height:1.6; color:var(--mute); }
.enquiry__done-sub b{ color:var(--s2); font-weight:800; }

/* with scripting off the form is simply always open */
.no-js .contact__cta{ display:none; }
.no-js .contact__panel[hidden]{ display:block; }
.no-js .enquiry__cancel{ display:none; }