/* ============================================================
   LeBretons — recreation
   Typeface: Neue Montreal (self-hosted, as on lebretons.co.uk)
   Brand gold: #857F52
   ============================================================ */

/* ---------- Fonts ---------- */
/* Weight mapping mirrors lebretons.co.uk exactly (Light=100, Medium=600), so
   a given font-weight resolves to the same file on both sites. */
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-Light.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-LightItalic.woff2") format("woff2");font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-Medium.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-MediumItalic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("../fonts/NeueMontreal-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --gold:#857F52;            /* brand base, sampled from lebretons.co.uk */
  --gold-deep:#6E6942;
  --gold-mid:#A2955F;
  --gold-lt:#C4B27E;         /* on dark surfaces */
  --gold-pale:#E4DCC4;

  --black:#0A0A0A;
  --ink:#141414;
  --ink-2:#1C1C1C;
  --graphite:#333333;

  --cream:#F4F2ED;
  --cream-2:#FAF9F6;
  --white:#FFFFFF;

  --body:#5A5A57;
  --body-dark:#333333;
  --muted-on-dark:rgba(255,255,255,.62);
  --line:rgba(20,20,20,.09);
  --line-dark:rgba(255,255,255,.10);

  --wrap:1200px;
  --gutter:clamp(20px,4.5vw,40px);
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --ease:cubic-bezier(.22,.68,.36,1);
  --shadow-card:0 1px 2px rgba(16,16,16,.04),0 8px 28px -14px rgba(16,16,16,.16);
  --shadow-lift:0 2px 6px rgba(16,16,16,.05),0 22px 48px -22px rgba(16,16,16,.30);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* hero and footer are both black — keep overscroll/underfill matching at both ends */
html{-webkit-text-size-adjust:100%;background:var(--black)}
body{
  margin:0;
  font-family:"Neue Montreal","Helvetica Neue",Inter,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.55;              /* original runs 18/27 and 16/24, i.e. 1.5 */
  color:var(--body);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* lebretons.co.uk sets every display heading in Bold at line-height 1.0 with
   roughly -0.02em tracking (h1 78/78 -2.3px, h2 56/56 -1.12px, h3 48/48
   -0.96px). Matching that here. */
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.04}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:var(--gold);color:#fff}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.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;z-index:200;background:var(--gold);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold-mid);outline-offset:3px;border-radius:4px}

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

/* Icons: single stroked system */
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico--14{width:14px;height:14px;stroke-width:1.8}
.ico--12{width:12px;height:12px;stroke-width:2.2}

/* ---------- Shared type ---------- */
.eyebrow{
  margin:0 0 18px;
  font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);
}
.eyebrow--light{color:rgba(255,255,255,.72);letter-spacing:.16em}
.eyebrow--center{text-align:center}

.textlink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:600;color:var(--ink);
  transition:gap .3s var(--ease),color .25s var(--ease);
}
.textlink .ico{color:var(--gold);transition:transform .3s var(--ease)}
.textlink:hover{gap:13px;color:var(--gold)}
.textlink:hover .ico{transform:translateX(2px)}
.textlink--light{color:#fff;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:5px}
.textlink--light:hover{color:var(--gold-lt);border-color:var(--gold-lt)}
.textlink--light .ico{color:var(--gold-lt)}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 26px;border-radius:var(--r-sm);
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-size:14px;font-weight:700;letter-spacing:-.005em;line-height:1;
  transition:transform .25s var(--ease),background .25s var(--ease),
             color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:11px 19px;font-size:13px;border-radius:7px}
.btn--block{display:flex;width:100%}
.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.26)}
.btn--ghost:hover{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn--gold{--btn-bg:var(--gold);--btn-fg:#fff}
.btn--gold:hover{--btn-bg:var(--gold-mid);box-shadow:0 14px 30px -14px rgba(133,127,82,.85)}
.btn--dark{--btn-bg:var(--ink);--btn-fg:#fff}
.btn--dark:hover{--btn-bg:var(--gold);box-shadow:0 14px 30px -14px rgba(133,127,82,.8)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--ink)}
.btn--light:hover{--btn-bg:var(--gold);--btn-fg:#fff}

/* ---------- Tick list ---------- */
.ticks{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13px}
.ticks li{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.68)}
.ticks .ico{color:var(--gold-lt)}
.ticks--stack{flex-direction:column;gap:11px}
.ticks--stack li{color:var(--body)}
.ticks--stack .ico{color:var(--gold)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:fixed;inset:0 0 auto;z-index:100;transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s var(--ease)}
.site-header.is-stuck{background:rgba(10,10,10,.9);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 var(--line-dark)}
.header__inner{display:flex;align-items:center;gap:28px;height:74px}

.brand{display:inline-flex;align-items:center}
/* The supplied logo carries its own wordmark in white, so it only works on
   the dark surfaces it is used on (header and footer). Width is left to the
   aspect ratio — the artwork is 1732x305, i.e. 5.68:1. */
.brand__logo{display:block;height:27px;width:auto}

.nav{margin-inline:auto}
.nav ul{display:flex;gap:34px}
.nav a{position:relative;font-size:15px;font-weight:700;color:rgba(255,255,255,.78);transition:color .25s var(--ease)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;
  background:var(--gold-lt);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.header__actions{display:flex;align-items:center;gap:22px}
.header__tel{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.82);transition:color .25s var(--ease)}
.header__tel .ico{color:var(--gold-lt)}
.header__tel:hover{color:#fff}

.burger{display:none;flex-direction:column;gap:5px;padding:8px;margin-right:-8px}
.burger span{display:block;width:22px;height:1.6px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

.mobile-nav{
  background:rgba(10,10,10,.97);backdrop-filter:blur(16px);
  border-top:1px solid var(--line-dark);
  padding:22px var(--gutter) 30px;
}
.mobile-nav[hidden]{display:none}
.mobile-nav ul{display:grid;gap:2px;margin-bottom:20px}
.mobile-nav a{display:block;padding:13px 0;font-size:17px;color:#fff;border-bottom:1px solid var(--line-dark)}
.mobile-nav__tel{display:block;margin-top:16px;text-align:center;font-size:14px;color:var(--gold-lt)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  /* Owns the whole first screen, so the stats band below starts exactly at
     the fold and none of it is visible until you scroll. */
  min-height:100vh;
  background:var(--black);
  /* Top = 74px header clearance + 24px breathing, bottom = the same 24px.
     Equal padding either side of the centred copy keeps the gaps symmetric on
     tall screens, and guarantees 24px of air when the copy is too tall to
     centre at all on short ones. */
  padding:98px 0 24px;
}
/* warm bloom behind the portrait */
.hero__glow{
  position:absolute;z-index:-2;
  /* Anchored to the same right offset as the portrait and nudged onto his
     head, so the bloom tracks him instead of drifting at other widths. */
  right:clamp(20px,7vw,120px);top:50%;
  transform:translate(20%,-51%);
  width:min(60vw,860px);aspect-ratio:1;
  background:
    radial-gradient(closest-side,rgba(196,178,126,.30),rgba(133,127,82,.15) 46%,transparent 74%);
  filter:blur(40px);
  pointer-events:none;
}
/* The source is a pre-cut PNG with a real alpha channel, so none of the
   radial-mask work the previous photo needed applies here — there is no
   backdrop to hide. He only needs a soft fade where the crop cuts his
   shoulders, so they dissolve into the black instead of ending on a line. */
.hero__media{
  position:absolute;z-index:-1;margin:0;
  right:clamp(20px,7vw,120px);
  /* centred against the copy rather than sat on the hero floor — the hero is
     a full 100vh now, so bottom-anchoring left him low and detached */
  top:50%;transform:translateY(-42%);
  width:min(31vw,440px);
  max-height:88%;
  pointer-events:none;
}
.hero__media img{
  width:100%;height:100%;object-fit:contain;object-position:bottom center;
  /* Keep him neutral grey as shot — the gold comes from the bloom behind him,
     not from tinting his skin. grayscale() guards against any residual cast
     in the source rather than trusting it to be perfectly neutral. */
  filter:grayscale(1) contrast(1.05) brightness(1.02);
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);
}
/* vignette so type stays readable over the photo */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,var(--black) 26%,rgba(10,10,10,.82) 44%,rgba(10,10,10,0) 66%);
}

.hero__inner{position:relative;width:100%;padding-bottom:0}
.hero__copy{max-width:560px}

.hero__title{
  /* size against the shorter of width and height so a 16:9 laptop viewport
     doesn't end up with 68px type in 730px of room */
  margin:0 0 clamp(14px,2.6vh,24px);
  font-size:clamp(38px,min(5.1vw,7.8vh),68px);
  font-weight:700;line-height:1.0;letter-spacing:-.029em;
  color:#fff;
}
.hero__title em{font-style:normal;color:var(--gold-lt)}

.hero__lede{
  max-width:445px;margin-bottom:clamp(18px,3.2vh,30px);
  font-size:16.5px;line-height:1.55;color:rgba(255,255,255,.66);
}

/* email capture */
.lead-form{
  position:relative;
  display:flex;align-items:center;gap:8px;
  width:min(100%,432px);
  padding:6px 6px 6px 8px;
  background:var(--cream-2);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.lead-form:focus-within{border-color:var(--gold-lt);box-shadow:0 0 0 4px rgba(133,127,82,.24)}
.lead-form input{
  flex:1;min-width:0;
  padding:11px 12px;
  border:0;background:transparent;
  font-size:13.5px;color:var(--ink);
}
.lead-form input::placeholder{color:#9C9A94}
.lead-form input:focus{outline:none}
.lead-form__btn{
  flex:none;padding:12px 18px;border-radius:7px;
  background:var(--ink);color:#fff;
  font-size:13px;font-weight:700;line-height:1;white-space:nowrap;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.lead-form__btn:hover{background:var(--gold);transform:translateY(-1px)}
.lead-form__msg{
  position:absolute;left:2px;top:calc(100% + 9px);
  font-size:12.5px;color:var(--gold-lt);opacity:0;transform:translateY(-4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.lead-form__msg.is-on{opacity:1;transform:none}
.lead-form.is-bad{border-color:#C4756A;box-shadow:0 0 0 4px rgba(196,117,106,.2)}
.lead-form.is-bad + .ticks{opacity:.5}

.hero .ticks{margin:clamp(14px,2.4vh,22px) 0 clamp(18px,3.2vh,30px)}
.hero .textlink--light{margin-bottom:4px}
.hero .eyebrow{margin-bottom:clamp(10px,2vh,18px)}

/* ============================================================
   STATS
   ============================================================ */
/* The section division runs through the card rather than above it: with no
   bottom padding the band is exactly as tall as the card, so a hard-stop
   gradient 34px from the bottom puts the black/cream seam behind the card's
   lower edge and it straddles the two sections. A fixed offset rather than a
   percentage, so the overlap stays constant as the card grows taller on
   narrow screens. */
.stats-band{
  background:linear-gradient(to bottom,
    var(--black) calc(100% - 34px),
    var(--cream) calc(100% - 34px));
  padding-bottom:0;
}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,#151515,#101010);
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  padding:34px 8px;
}
/* top-aligned, not centred: two of these labels wrap to two lines and centring
   each stat independently left the four numbers sitting at different heights */
.stat{display:flex;align-items:flex-start;gap:14px;padding:4px 20px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line-dark)}
.stat__icon{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  background:rgba(133,127,82,.16);
  border:1px solid rgba(196,178,126,.24);
  color:var(--gold-lt);
}
.stat__icon .ico{width:19px;height:19px}
.stat__num{font-size:36px;font-weight:700;line-height:1.08;letter-spacing:-.028em;color:#fff;margin-bottom:3px}
/* was 12.5px at .5 alpha — about 5.3:1 on this card, legible on paper but
   muddy in practice. .8 takes it to roughly 12:1 and the extra size stops it
   reading as fine print next to a 31px numeral. */
.stat__label{font-size:14px;line-height:1.45;color:rgba(255,255,255,.8)}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:var(--cream);padding:104px 0 108px}
.section-head{
  display:grid;grid-template-columns:1fr minmax(280px,368px);
  gap:40px;align-items:end;
  margin-bottom:52px;
}
.section-head__title{font-size:clamp(28px,3.1vw,38px);line-height:1.06;letter-spacing:-.02em}
.section-head__note{font-size:16px;line-height:1.55;color:var(--body);padding-bottom:4px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  padding:30px 28px 26px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card::after{
  content:"";position:absolute;z-index:-1;inset:auto -30% -60% auto;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(133,127,82,.14),transparent);
  opacity:0;transition:opacity .45s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:rgba(133,127,82,.3)}
.card:hover::after{opacity:1}
.card__icon{
  display:grid;place-items:center;
  width:42px;height:42px;margin-bottom:24px;border-radius:50%;
  background:linear-gradient(145deg,var(--gold-mid),var(--gold));
  color:#fff;
  box-shadow:0 6px 16px -8px rgba(133,127,82,.9);
  transition:transform .4s var(--ease);
}
.card:hover .card__icon{transform:scale(1.07) rotate(-4deg)}
.card__icon .ico{width:18px;height:18px}
.card__title{font-size:20px;line-height:1.1;letter-spacing:-.02em;margin-bottom:12px}
.card__text{font-size:15px;line-height:1.55;color:var(--body);margin-bottom:22px}
.card .textlink{margin-top:auto;font-size:13px}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.work{background:var(--black);padding:96px 0 100px}
.work__inner{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:56px;align-items:center}
.work .eyebrow{color:var(--gold-lt)}
.work__title{font-size:clamp(28px,3.1vw,38px);line-height:1.06;letter-spacing:-.02em;color:#fff;margin-bottom:20px}
.work__lede{font-size:15.5px;line-height:1.55;color:var(--muted-on-dark);margin-bottom:32px;max-width:300px}

.work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:420px;padding:24px 22px;
  border-radius:var(--r-md);
  background:var(--ink);
}
.case img{
  position:absolute;z-index:-2;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease),filter .6s var(--ease);
  filter:saturate(.78) contrast(1.03);
}
.case::after{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.28) 0%,rgba(10,10,10,.68) 42%,rgba(8,8,8,.94) 100%);
}
.case:hover img{transform:scale(1.06);filter:saturate(.92) contrast(1.05)}
.case__tag{
  font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:12px;
}
.case__title{font-size:21px;line-height:1.08;letter-spacing:-.02em;color:#fff;margin-bottom:10px}
.case__text{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.62);margin-bottom:18px}
.case__stat{padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.case__num{display:block;font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--gold-lt);line-height:1.15}
.case__cap{display:block;font-size:11.5px;color:rgba(255,255,255,.5);margin-top:2px}

/* ============================================================
   PROCESS
   ============================================================ */
.process{background:var(--cream-2);padding:96px 0 104px}
.process__title{
  text-align:center;margin:0 auto 62px;max-width:640px;
  font-size:clamp(27px,3vw,36px);line-height:1.06;letter-spacing:-.02em;
}
.steps{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:16px;counter-reset:none;
}
.step{position:relative;text-align:center;padding:0 6px}
/* dashed connector + arrowhead between steps */
.step:not(:last-child)::before{
  content:"";position:absolute;top:33px;left:calc(50% + 42px);right:calc(-50% + 42px);height:1px;
  background:repeating-linear-gradient(to right,rgba(133,127,82,.55) 0 6px,transparent 6px 12px);
}
.step:not(:last-child)::after{
  content:"";position:absolute;top:29.5px;right:calc(-50% + 42px);
  width:0;height:0;
  border-left:5px solid rgba(133,127,82,.75);
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}
.step__dot{
  display:grid;place-items:center;
  width:66px;height:66px;margin:0 auto 20px;border-radius:50%;
  background:linear-gradient(160deg,var(--ink-2),var(--black));
  color:var(--gold-lt);
  box-shadow:0 12px 26px -14px rgba(10,10,10,.9),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.step:hover .step__dot{transform:translateY(-4px);box-shadow:0 18px 34px -16px rgba(133,127,82,.95),inset 0 1px 0 rgba(255,255,255,.12)}
.step__dot .ico{width:22px;height:22px}
.step__num{font-size:12px;font-weight:600;letter-spacing:.13em;color:var(--gold);margin-bottom:5px}
.step__name{font-size:17.5px;line-height:1.1;letter-spacing:-.02em;margin-bottom:9px}
.step__text{font-size:12.5px;line-height:1.6;color:var(--body);max-width:180px;margin-inline:auto}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{
  position:relative;overflow:hidden;
  padding:92px 0 96px;
  background:
    radial-gradient(105% 135% at -4% 34%,rgba(133,127,82,.46),rgba(133,127,82,.12) 44%,transparent 66%),
    radial-gradient(85% 120% at 102% 92%,rgba(133,127,82,.38),transparent 58%),
    var(--black);
}
.testimonials__inner{display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:56px;align-items:center}
.testimonials .eyebrow{color:var(--gold-lt)}
.testimonials__title{font-size:clamp(26px,2.9vw,34px);line-height:1.06;letter-spacing:-.02em;color:#fff;margin-bottom:18px}
.testimonials__lede{font-size:15.5px;line-height:1.55;color:var(--muted-on-dark);margin-bottom:26px}

.quote-card{
  position:relative;
  background:var(--white);
  border-radius:var(--r-lg);
  padding:42px 44px 26px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.65);
}
.quote-card__mark{
  display:block;
  font-size:104px;line-height:.62;font-weight:700;
  color:var(--gold);
  margin-bottom:6px;
}
.quote-track{display:grid}
.quote{
  grid-area:1/1;margin:0;
  /* Slides stack in one grid cell, so the cell is as tall as the longest
     quote. Laying each out as a column lets the attribution sit at the
     bottom of that shared height, which keeps the name, title and monogram
     on the same line as you move between slides of different lengths. */
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
}
.quote__by{margin-top:auto}
.quote.is-active{opacity:1;visibility:visible;transform:none}
.quote p{
  font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.02em;color:var(--ink);
  margin-bottom:26px;
}
.quote__by{display:flex;align-items:center;gap:13px}
/* Real headshots of the people quoted, cropped square to the face. Served at
   160px for a 40px slot so they stay sharp on high-density screens. */
.quote__by img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.quote__by span{display:flex;flex-direction:column}
.quote__by strong{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.quote__by small{font-size:12px;color:var(--body)}

.quote-nav{display:flex;align-items:center;justify-content:space-between;margin-top:26px}
.dots{display:flex;gap:7px}
.dots button{width:7px;height:7px;border-radius:50%;background:#DCD9D2;transition:width .35s var(--ease),background .35s var(--ease)}
.dots button[aria-selected="true"]{width:20px;border-radius:4px;background:var(--gold)}
.arrows{display:flex;gap:8px}
.arrows button{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);
  font-size:17px;line-height:1;color:var(--body-dark);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.arrows button:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--cream);padding:96px 0 92px}
.cta__inner{display:grid;grid-template-columns:1fr minmax(300px,510px);gap:60px;align-items:center}
.cta__title{font-size:clamp(28px,3.2vw,39px);line-height:1.06;letter-spacing:-.02em;margin-bottom:18px}
.cta__lede{font-size:16px;line-height:1.55;color:var(--body);margin-bottom:24px;max-width:360px}
.cta .ticks--stack{margin-bottom:30px;font-size:13.5px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--black);color:rgba(255,255,255,.55);padding:66px 0 0}
.footer__bottom a.is-here{color:var(--gold-lt)}
.footer__top{
  display:grid;grid-template-columns:1.55fr 1fr 1fr 1.2fr;
  gap:44px;padding-bottom:48px;
}
.footer__brand .brand{margin-bottom:18px}
.footer__brand p{font-size:13px;line-height:1.68;max-width:270px;margin-bottom:22px}
.social{display:flex;gap:9px}
.social a{
  display:grid;place-items:center;width:33px;height:33px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark);
  transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.social svg{width:14px;height:14px;fill:rgba(255,255,255,.72)}
.social a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.social a:hover svg{fill:#fff}

.footer__col h4{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:18px}
.footer__col ul{display:grid;gap:11px}
.footer__col a{font-size:13px;transition:color .25s var(--ease)}
.footer__col a:hover{color:var(--gold-lt)}
.footer__contact li{display:flex;align-items:flex-start;gap:10px;font-size:13px}
.footer__contact .ico{color:var(--gold-lt);margin-top:4px}
.footer__col--contact .btn{margin-top:22px}

.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:22px 0 26px;border-top:1px solid var(--line-dark);
  font-size:12.5px;
}
.footer__bottom ul{display:flex;gap:26px}
.footer__bottom a:hover{color:var(--gold-lt)}

/* ============================================================
   FULL ENQUIRY FORM  (hero step 2, and the CTA panel)
   ============================================================ */
.deep-form{display:grid;gap:12px}
.deep-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.deep-form__field{position:relative;display:grid}

.deep-form input,
.deep-form select,
.deep-form textarea{
  /* metrics taken from the hero's original email bar so every input on the
     site reads the same: cream-2 fill, 10px radius, 13.5px text */
  width:100%;padding:14px 15px;
  border:1px solid transparent;border-radius:10px;
  background:var(--cream-2);color:var(--ink);
  font-family:inherit;font-size:13.5px;line-height:1.3;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.deep-form input::placeholder,
.deep-form textarea::placeholder{color:#9C9A94}
.deep-form input:focus,
.deep-form select:focus,
.deep-form textarea:focus{
  outline:none;border-color:var(--gold-lt);
  box-shadow:0 0 0 4px rgba(133,127,82,.28);
}
.deep-form textarea{min-height:148px;resize:vertical}

/* native arrow removed so the control matches the text inputs */
.deep-form select{
  appearance:none;-webkit-appearance:none;
  padding-right:42px;cursor:pointer;
}
.deep-form__field--select::after{
  content:"";position:absolute;right:17px;top:50%;
  width:9px;height:9px;margin-top:-6px;pointer-events:none;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg);
}

/* Buttons here use .btn--sm, matching the hero email bar's own button
   (12/18 padding, 13px, 7px radius -> 37px tall). Natural width, no stretch. */
.deep-form__actions{display:flex;flex-direction:column;align-items:flex-start;gap:11px;margin-top:6px}
/* icon matched to the 13px line-height, or it drives the button 1px taller
   than the reference and the row stops lining up */
.deep-form__actions .btn .ico{width:13px;height:13px;margin-right:8px}

/* CTA: submit and the message link sit on one line */
.deep-form__actions--row{flex-direction:row;align-items:center;gap:24px;flex-wrap:wrap}

/* the message link keeps its original text-link treatment, lifted to read
   on the dark panel it now sits on */
.form-card .textlink{color:#fff}
.form-card .textlink .ico{color:var(--gold-lt)}
.form-card .textlink:hover{color:var(--gold-lt)}

.deep-form__msg{
  margin-top:2px;font-size:13px;color:#E0A79C;
  opacity:0;transform:translateY(-3px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.deep-form__msg.is-on{opacity:1;transform:none}
.deep-form .is-bad{border-color:#C4756A;box-shadow:0 0 0 4px rgba(196,117,106,.2)}

/* Sent confirmation, replacing the fields in place */
.form-done{display:grid;gap:12px;justify-items:start;padding:8px 0}
.form-done__tick{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(145deg,var(--gold-mid),var(--gold));color:#fff;
}
.form-done__tick .ico{width:24px;height:24px;stroke-width:2.4}
.form-done h3{font-size:22px;letter-spacing:-.02em}
.form-done p{font-size:14.5px;line-height:1.6;max-width:420px}

/* ---- hero: two-step ---- */
.hero__step[hidden]{display:none}
.hero__step--2 .hero__title{margin-bottom:24px}
.hero__copy.is-expanded{max-width:660px}
.hero__step--2 .form-done h3{color:#fff}
.hero__step--2 .form-done p{color:var(--muted-on-dark)}

/* ---- CTA: the form sits on the dark panel the booking card used ---- */
.form-card{
  padding:32px;
  background:linear-gradient(155deg,#171717,#0B0B0B);
  border:1px solid var(--line-dark);
  border-radius:var(--r-xl);
  box-shadow:0 34px 70px -34px rgba(10,10,10,.7);
}
.form-card__head{margin-bottom:20px}
.form-card__head h3{font-size:20px;letter-spacing:-.025em;color:#fff;margin-bottom:6px}
.form-card__head p{font-size:13.5px;color:var(--muted-on-dark)}
.form-card .form-done h3{color:#fff}
.form-card .form-done p{color:var(--muted-on-dark)}

@media (max-width:760px){
  .deep-form__row{grid-template-columns:1fr}
  .deep-form__actions{align-items:stretch}
  .deep-form__actions .btn{width:100%}
  .form-card{padding:22px}
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-hero{background:var(--black);padding:150px 0 62px}
.legal-hero h1{font-size:clamp(30px,3.6vw,44px);line-height:1.06;letter-spacing:-.02em;color:#fff;margin-bottom:14px}
.legal-hero p{font-size:14px;color:var(--muted-on-dark)}

.legal{background:var(--cream);padding:64px 0 96px}
.legal__body{max-width:740px}
.legal__lede{font-size:17px;line-height:1.62;color:var(--body-dark);margin-bottom:8px}
.legal__body h2{font-size:21px;line-height:1.2;margin:42px 0 12px}
.legal__body h3{font-size:16px;line-height:1.25;margin:26px 0 8px}
.legal__body p{font-size:15.5px;line-height:1.66;color:var(--body);margin-bottom:15px}
.legal__body ul{list-style:disc;padding-left:21px;margin:0 0 15px}
.legal__body li{font-size:15.5px;line-height:1.66;color:var(--body);margin-bottom:7px}
.legal__body a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.legal__body a:hover{color:var(--gold-deep)}
.legal__body strong{color:var(--body-dark);font-weight:600}

/* Details only the business can supply. Deliberately loud so a half-finished
   policy cannot go live unnoticed — search the source for "todo" to find them. */
.todo{
  background:#FFEFA8;color:#4A3B00;
  padding:1px 7px;border-radius:3px;
  font-weight:600;font-size:.94em;white-space:nowrap;
}
.legal__note{
  margin:0 0 34px;padding:16px 18px;
  background:#FFF8DC;border:1px solid #E8D48A;border-radius:var(--r-sm);
  font-size:14px;line-height:1.6;color:#5A4A12;
}
.legal__note strong{color:#43370D}

@media (max-width:760px){
  .legal-hero{padding:118px 0 46px}
  .legal{padding:44px 0 70px}
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.07s}
.reveal[data-delay="2"]{transition-delay:.14s}
.reveal[data-delay="3"]{transition-delay:.21s}
.reveal[data-delay="4"]{transition-delay:.28s}
.reveal[data-delay="5"]{transition-delay:.35s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav{display:none}
  .header__actions{margin-left:auto}
  .burger{display:flex}
  .header__tel span{display:none}

  .hero{min-height:100vh}
  .hero__media{right:clamp(12px,3vw,44px);width:min(46vw,430px);opacity:.82}
  .hero::before{background:linear-gradient(100deg,var(--black) 34%,rgba(10,10,10,.8) 54%,rgba(10,10,10,0) 78%)}

  .stats{grid-template-columns:repeat(2,1fr);gap:26px 0;padding:30px 6px}
  .stat:nth-child(odd)::before{display:none}
  .stat + .stat::before{top:0;bottom:0}

  .section-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .section-head__note{max-width:520px}
  .cards{grid-template-columns:repeat(2,1fr)}

  .work__inner{grid-template-columns:1fr;gap:40px}
  .work__lede{max-width:460px}
  .work__grid{grid-template-columns:repeat(3,1fr)}
  .case{min-height:360px}

  .steps{grid-template-columns:repeat(2,1fr);gap:38px 20px}
  .step:not(:last-child)::before,.step:not(:last-child)::after{display:none}

  .testimonials__inner{grid-template-columns:1fr;gap:38px}
  .cta__inner{grid-template-columns:1fr;gap:44px}
  .footer__top{grid-template-columns:repeat(2,1fr);gap:38px}
}

@media (max-width:760px){
  .header__inner{height:66px}
  .header__actions .btn{display:none}
  .header__tel{display:none}

  /* on phones the copy should just flow from the top, not centre in a tall box */
  .hero{display:block;padding-top:118px;min-height:0}
  .hero__inner{padding-bottom:72px}
  /* The old source carried a lot of empty padding, so 88vw was fine there.
     This crop is head-and-shoulders edge to edge, so it needs to be much
     smaller and pushed low or it sits straight across the headline. */
  .hero__media{right:-7vw;top:auto;bottom:4%;transform:none;width:60vw;max-height:42%;opacity:.3}
  .hero::before{background:linear-gradient(180deg,rgba(10,10,10,.72),rgba(10,10,10,.94) 55%,var(--black))}
  .hero__title{font-size:clamp(36px,10vw,50px)}
  .lead-form{flex-wrap:wrap;border-radius:12px}
  .lead-form input{flex:1 0 100%;padding:12px}
  .lead-form__btn{width:100%;padding:14px}
  .lead-form__msg{position:static;margin-top:8px;opacity:1;transform:none;height:0;overflow:hidden}
  .lead-form__msg.is-on{height:auto}

  .stats{grid-template-columns:1fr;gap:0;padding:8px 4px}
  .stat{padding:18px 20px}
  .stat + .stat::before{left:20px;right:20px;top:0;bottom:auto;width:auto;height:1px}
  .stat:nth-child(odd)::before{display:block}

  .services,.work,.process,.testimonials,.cta{padding-top:66px;padding-bottom:70px}
  .cards{grid-template-columns:1fr}
  .work__grid{grid-template-columns:1fr}
  .case{min-height:300px}
  .steps{grid-template-columns:1fr;gap:32px}
  .step__text{max-width:none}

  .quote-card{padding:30px 26px 22px}
  .quote p{font-size:15.5px}

  .footer__top{grid-template-columns:1fr;gap:34px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}