/* Responsive */
@media(max-width:1220px){
  .hero-media{left:40%}
  .hero-copy{width:42vw}
  .hero-veil{background:
    linear-gradient(90deg,var(--paper) 0%,var(--paper) 36%,rgba(245,239,229,.9) 42%,rgba(245,239,229,.4) 50%,transparent 60%),
    linear-gradient(180deg,rgba(245,239,229,.15) 0%,transparent 20%)}
}
@media(max-width:900px){
  .hero{min-height:auto}
  .hero-inner{min-height:auto;display:grid;padding-top:12px}
  .hero-copy{width:100%;padding:48px 0 36px;order:1}
  .hero-media{position:relative;inset:auto;height:420px;order:2;margin:0 -22px;left:auto}
  .hero-veil{display:none}
  .hero-media:after{
    content:"";
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,var(--paper) 0%,rgba(245,239,229,.2) 14%,transparent 32%)
  }
  .hero-h1{font-size:clamp(68px,16vw,108px);line-height:.84;max-width:none}
  .hero-lead{max-width:none}
  .hero-proof{max-width:none}
}
@media(max-width:620px){
  .hero-media{height:300px;margin:0 -14px}
  .hero-h1{font-size:clamp(58px,15.5vw,92px)}
  .hero-ctas{display:grid;gap:14px}
  .hero-ctas .btn{width:100%}
  .hero-copy{padding:36px 0 28px}
}


/* Self-hosted fonts (SIL Open Font License). Same-origin: no third-party
   connection, no render-blocking stylesheet, no external IP logging. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-700.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/barlow-condensed-800.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/barlow-condensed-900.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/inter-tight-var.woff2') format('woff2')}
:root{--paper:#f5efe5;--paper2:#fbf7ef;--ink:#111311;--muted:#625e57;--line:rgba(17,17,15,.15);--yellow:#e9aa2b;--mint:#c9ddcf;--mint2:#e9f0eb;--rose:#e8c7ca;--coral:#e9a27e;--ochre:#e4b454;--black:#111311;--site:1480px;--rail:62px}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter Tight",Arial,sans-serif;overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.wrap{width:min(calc(100% - 76px),var(--site));margin-inline:auto}.page{padding-right:var(--rail)}.display{font-family:"Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;font-weight:900;letter-spacing:0}/* Trajectory sets its eyebrows at 14-16px sentence case in a mid grey rather
   than the 10px letterspaced caps every SaaS page uses. Against Barlow at 900
   the quiet label makes the loud headline louder. 4.94:1 on paper. */
.kicker{font-size:13px;font-weight:500;letter-spacing:.005em;text-transform:none;
 color:#5A5349;font-family:inherit}.muted{color:var(--muted)}
/* Trajectory's nav detaches from the page edge and becomes a centred pill.
   Measured on theirs: 1425px > 850px wide, top 0 > 20px, radius 0 > 8px. Ours
   keeps the phone number in the pill — a head who wants to call should never
   have to scroll back up to find the number. */
.header{position:sticky;top:0;z-index:70;background:rgba(245,239,229,.91);
 backdrop-filter:blur(18px);border-bottom:1px solid rgba(17,17,15,.07);
 transition:background .28s ease,border-color .28s ease}
/* A pill that floats over the page permanently steals a strip of every screen
   a head reads. So it leaves on the way down and comes back the instant they
   scroll up — which is exactly when someone wants the nav or the number. */
/* The header carried the same gold button and the same number as the hero,
   400px apart and both right-aligned — the eye read a repeat, not a hierarchy.
   At the top of the page the header is nav only; the ask belongs to the hero,
   where the argument is. The moment you scroll past it, the header takes the
   ask over. One gold button on screen at any time. */
.header .actions{opacity:0;visibility:hidden;transform:translateY(-4px);
 transition:opacity .28s ease,transform .28s ease,visibility .28s}
.header.is-pill .actions{opacity:1;visibility:visible;transform:none}
.header.is-pill{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.header{transform:translateY(0);transition:transform .32s cubic-bezier(.22,1,.36,1),
 background .28s ease,border-color .28s ease}
.header.is-away{transform:translateY(-118%)}
.header.is-away .header-row{box-shadow:none}
@media(prefers-reduced-motion:reduce){.header{transition:none}}
/* in-page links must not land under it */
#services,#faq,#contact,[id]{scroll-margin-top:96px}
.header .header-row{transition:max-width .42s cubic-bezier(.22,1,.36,1),
 height .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1),
 border-radius .42s ease,background .28s ease,box-shadow .28s ease,transform .42s cubic-bezier(.22,1,.36,1);
 max-width:var(--site);border-radius:0;padding-inline:0}
.header.is-pill .header-row{max-width:1090px;height:64px;padding-inline:22px;
 border-radius:13px;background:var(--paper2);
 backdrop-filter:blur(20px);transform:translateY(11px);
 box-shadow:0 1px 0 rgba(17,17,15,.10) inset,0 14px 34px -20px rgba(17,17,15,.5)}
@media(prefers-reduced-motion:reduce){.header .header-row{transition:none}}.header-row{height:76px;display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center}.brand{font-family:"Barlow Condensed";font-size:32px;line-height:.82;font-weight:900;text-transform:uppercase;letter-spacing:.02em}.brand small{display:block;font-family:"Inter Tight";font-size:7px;line-height:1;letter-spacing:.17em;margin-top:7px;font-weight:800}.nav{display:flex;justify-content:center;gap:34px;font-size:12px;font-weight:650}.nav a{transition:opacity .18s}.nav a:hover{opacity:.48}.actions{display:flex;gap:9px}.btn{appearance:none;border:1px solid var(--ink);background:transparent;padding:14px 20px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-size:12px;line-height:1.1;font-weight:700;transition:transform .18s ease,background .18s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--yellow);border-color:var(--yellow)}.btn-dark{background:var(--black);border-color:var(--black);color:var(--paper2)}.menu-btn{display:none}.arrow{font-size:16px;line-height:1}
.rail{position:fixed;right:0;top:0;bottom:0;width:var(--rail);z-index:65;border-left:1px solid var(--line);display:flex;flex-direction:column}.rail a{flex:1;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}.rail a:nth-child(1){background:var(--mint)}.rail a:nth-child(2){background:var(--rose)}.rail a:nth-child(3){background:var(--coral)}.rail a:nth-child(4){background:var(--ochre)}.rail span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Barlow Condensed";font-size:14px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
@property --p{syntax:'<number>';inherits:true;initial-value:0}.hero-media picture{display:contents}
.hero-curtain{position:absolute;z-index:3;background:var(--paper);pointer-events:none}
.c-l{inset:0 auto 0 46%;width:44px;transform:scaleX(var(--p));transform-origin:left center}
.c-r{inset:0 0 0 auto;width:44px;transform:scaleX(var(--p));transform-origin:right center}
.c-b{inset:auto 0 0 46%;height:34px;transform:scaleY(var(--p));transform-origin:center bottom}.hero-rule{width:48px;height:1px;background:var(--ink);opacity:.46;margin:32px 0 0}
/* Two lines that start out of line and come into line as you read. The move is
   the product. Only .hl-b moves, and only by transform. */

.hero-h1 .hl-a{display:block;white-space:normal}
.hero-h1 .hl-b{display:block;white-space:nowrap}
/* The last line arrives out of line and settles into it — once, on load, in
   about a second. Scroll-driving it was wrong twice over: the resting state
   read as a typesetting error until you scrolled, and only scrollers ever saw
   it resolve. A headline is a promise; it should not still be moving while
   someone is deciding whether to call. */
.hero-h1 .hl-b{transform:none}
.motion-ready .hero-h1 .hl-b{
  transform:translate3d(118px,0,0);
  animation:bm-settle 1.05s cubic-bezier(.16,1,.3,1) .18s forwards}
@keyframes bm-settle{to{transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){
  .motion-ready .hero-h1 .hl-b{transform:none;animation:none}
}
.hero-note{margin:18px 0 0;font-size:13px;line-height:1.5;color:#5A5349;max-width:34ch}
@media(prefers-reduced-motion:reduce){
 .hero{--p:1 !important}
 .hero-h1 .hl-b{transform:none}
}.hero .lead{max-width:520px;font-size:18px;line-height:1.62;color:#504d47;margin:30px 0 0}.hero .lead strong{display:block;color:var(--ink);font-weight:700;margin-bottom:8px}.hero .lead span{display:block;max-width:500px}.hero-ctas{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}
.section{padding:118px 0;border-bottom:1px solid var(--line)}.small{font-size:clamp(46px,4.6vw,72px);line-height:.94;margin:12px 0 0}.problem{display:grid;grid-template-columns:.74fr 1.26fr;gap:92px;align-items:start}.problem p{font-size:15px;line-height:1.68;max-width:390px;color:var(--muted);margin:26px 0 0}.problem-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.problem-list li{display:grid;grid-template-columns:46px 1fr;align-items:center;padding:17px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.35}.problem-list b{width:25px;height:25px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:8px}
.services-intro{display:grid;grid-template-columns:.42fr 1.58fr;gap:78px;align-items:start}.services-heading{position:sticky;top:122px}.services-heading p{font-size:13px;line-height:1.65;color:var(--muted);max-width:310px;margin:24px 0 0}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.service-flip{min-height:500px;position:relative;perspective:1500px;outline:none}.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.16,.78,.2,1),box-shadow .35s ease}.service-flip.is-hovered .flip-inner,.service-flip.is-flipped .flip-inner{transform:rotateY(180deg);box-shadow:0 24px 60px rgba(17,17,15,.09)}.flip-face{position:absolute;inset:0;padding:42px 42px 36px;backface-visibility:hidden;border:1px solid rgba(17,17,15,.06);display:grid;grid-template-rows:auto auto 1fr auto}.service-flip:nth-child(1) .flip-face{background:var(--mint)}.service-flip:nth-child(2) .flip-face{background:var(--rose)}.service-flip:nth-child(3) .flip-face{background:var(--ochre)}.service-flip:nth-child(4) .flip-face{background:#ead8c9}.flip-back{transform:rotateY(180deg)}.service-num{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.flip-face h3{font-size:52px;line-height:1;margin:28px 0 0}.flip-front .tag{font-size:15px;line-height:1.62;margin:24px 0 0;max-width:440px}.flip-cue{align-self:end;border-top:1px solid rgba(17,17,15,.18);padding-top:20px;margin-top:34px;display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:11px;font-weight:750}.flip-toggle{appearance:none;border:0;background:none;padding:3px 0 4px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid currentColor}.flip-back h4{font-family:"Barlow Condensed";text-transform:uppercase;font-size:30px;line-height:1.02;margin:26px 0 0;font-weight:800}.includes{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid rgba(17,17,15,.18)}.includes li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid rgba(17,17,15,.14);font-size:12px;line-height:1.42}.includes li>span:first-child{font-size:9px;font-weight:800;padding-top:2px}.back-actions{align-self:end;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap}.back-actions>a.text-link{order:3;flex:1 0 100%;margin-top:16px;padding-top:14px;border-top:1px solid rgba(17,17,15,.18);border-bottom:0;font-weight:700;justify-content:space-between;opacity:.9}.back-actions>a.text-link:hover{opacity:1}.text-link{appearance:none;border:0;background:none;padding:0 0 3px;font-size:11px;font-weight:800;display:inline-flex;gap:10px;align-items:center;border-bottom:1px solid currentColor}.close-card{border:0;background:none;padding:4px 0;font-size:10px;font-weight:750;opacity:.65}
.standard:last-child{border-right:0}
.continuity{padding:96px 0;border-bottom:1px solid var(--line)}.cont-panel{background:var(--mint);background:linear-gradient(100deg,var(--mint) 0%,var(--mint2) 100%);display:grid;grid-template-columns:.88fr 1.12fr;min-height:430px;overflow:hidden}.cont-copy{padding:58px}.cont-copy h2{font-size:68px;line-height:.94;margin:16px 0 0}.cont-copy p{font-size:15px;line-height:1.65;max-width:500px;margin:22px 0 0;color:#526057}.cont-hint{font-size:10px;color:#64746a;margin-top:18px}.cont-side{border-left:1px solid rgba(17,17,15,.14);display:grid;grid-template-columns:1fr 1fr}.cont-flip{position:relative;min-height:215px;perspective:1100px;appearance:none;border:0;background:transparent;text-align:left;padding:0;color:inherit}.cont-flip:nth-child(1),.cont-flip:nth-child(2){border-bottom:1px solid rgba(17,17,15,.14)}.cont-flip:nth-child(1),.cont-flip:nth-child(3){border-right:1px solid rgba(17,17,15,.14)}.cont-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .78s cubic-bezier(.16,.78,.2,1)}.cont-flip.is-hovered .cont-inner,.cont-flip.is-flipped .cont-inner{transform:rotateX(180deg)}.cont-face{position:absolute;inset:0;padding:32px;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:flex-end}.cont-back{transform:rotateX(180deg);justify-content:center}.cont-face span{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#64746a}.cont-face b{font-family:"Barlow Condensed";font-size:32px;line-height:1.05;text-transform:uppercase;margin-top:10px}.cont-back p{font-size:12px;line-height:1.55;margin:12px 0 0;max-width:250px;color:#435047}
.faq-section{padding-top:122px;padding-bottom:122px}.faq{display:grid;grid-template-columns:.58fr 1.42fr;gap:90px}.faq-intro p{font-size:13px;line-height:1.65;color:var(--muted);max-width:310px;margin:24px 0 0}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none;padding:20px 0;font-size:16px;font-weight:700;display:flex;justify-content:space-between;gap:30px;transition:padding-left .22s ease}summary:hover{padding-left:8px}summary::-webkit-details-marker{display:none}summary:after{content:"+";font-size:21px;font-weight:400}details[open] summary:after{content:"−"}.answer{padding:0 0 20px;max-width:780px;color:var(--muted);font-size:13px;line-height:1.65}
.final{background:var(--ochre);border-bottom:1px solid rgba(17,17,15,.18)}.final-shell{padding:78px 0 82px}.final-kicker{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding-bottom:22px;border-bottom:1px solid rgba(17,17,15,.22)}.final-grid{display:grid;grid-template-columns:1.13fr .87fr;gap:92px;align-items:end;padding-top:44px}.final-grid h2{font-size:clamp(76px,8.4vw,136px);line-height:.84;margin:0;max-width:800px}.final-copy p{font-size:16px;line-height:1.65;max-width:540px;margin:0}.final-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.final-outline{border-color:rgba(17,17,15,.65);background:transparent}.contact{margin-top:30px;padding-top:22px;border-top:1px solid rgba(17,17,15,.22);display:flex;gap:28px;flex-wrap:wrap;font-size:13px;font-weight:750}
.footer{background:var(--black);color:var(--paper2);padding:58px 0 30px}.footer-main{display:grid;grid-template-columns:1.5fr .7fr .6fr .85fr;gap:58px;align-items:start}.footer-brand p{font-size:12px;line-height:1.55;color:rgba(251,247,239,.58);max-width:280px;margin:22px 0 0}.footer-col{display:grid;gap:10px;font-size:12px}.footer-col a{color:rgba(251,247,239,.74)}.footer-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:rgba(251,247,239,.58);margin-bottom:10px}.footer-legal{font-size:10.5px;line-height:1.6;color:rgba(251,247,239,.58);padding:14px 0 0;max-width:78ch;margin-right:auto;margin-left:0}.footer-bottom{margin-top:52px;padding-top:22px;border-top:1px solid rgba(251,247,239,.16);display:flex;justify-content:space-between;gap:20px;font-size:10px;color:rgba(251,247,239,.58)}
.mobile-menu{display:none}.dialog{width:min(680px,100%);background:var(--paper2);padding:34px;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.24)}.dialog-head{display:flex;justify-content:space-between;gap:24px}.dialog h2{font-size:54px;line-height:.94;margin:8px 0 0}.x{background:none;border:0;font-size:27px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.field input,.field select,.field textarea{border:1px solid var(--line);background:#FDFAF4;padding:12px 13px}.field textarea{min-height:110px;resize:vertical}.form-actions{display:flex;justify-content:flex-end;margin-top:16px}
.reveal,.reveal-card{opacity:1;transform:none}.motion-ready .reveal:not(.is-visible),.motion-ready .reveal-card:not(.is-visible){opacity:0;transform:translateY(14px)}.motion-ready .reveal.is-visible{opacity:1;transform:none;transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1)}.motion-ready .reveal-card.is-visible{opacity:1;transform:none;transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1)}.service-grid .reveal-card:nth-child(2){transition-delay:.06s}.service-grid .reveal-card:nth-child(3){transition-delay:.12s}.service-grid .reveal-card:nth-child(4){transition-delay:.18s}
@media(max-width:1220px){.page{padding-right:0}.rail{display:none}.wrap{width:min(calc(100% - 44px),var(--site))}.nav{gap:19px}.hero-media{left:44%}.hero-copy{width:44vw}.standard:nth-child(odd){border-right:0}}
@media(max-width:900px){.header-row{height:68px;grid-template-columns:auto 1fr auto}.nav,.actions{display:none}.menu-btn{display:inline-flex;justify-self:end}.hero{min-height:auto}.hero-inner{min-height:auto;display:grid;padding-top:20px}.hero-copy{width:100%;padding:48px 0 46px}.hero-media{position:relative;inset:auto;height:480px;order:2;margin:0 -22px}.hero-media:after{background:linear-gradient(180deg,var(--paper) 0%,rgba(245,239,229,.08) 17%,transparent 40%)}.hero h1{font-size:clamp(72px,15.8vw,112px);line-height:.9}.problem,.services-intro,.faq,.final-grid,.cont-panel{grid-template-columns:1fr}.services-heading{position:static}.service-grid{grid-template-columns:1fr}.service-flip{min-height:500px}.cont-side{border-left:0;border-top:1px solid rgba(17,17,15,.14)}.footer-main{grid-template-columns:1fr 1fr;gap:42px}.mobile-menu.open{display:block;position:fixed;inset:68px 0 0;z-index:68;background:var(--paper);padding:24px;overflow:auto}.mobile-menu nav{display:grid}.mobile-menu a{font-family:"Barlow Condensed";font-size:42px;line-height:1;text-transform:uppercase;font-weight:900;border-bottom:1px solid var(--line);padding:16px 0;display:flex;justify-content:space-between}.mobile-ctas{display:grid;gap:10px;margin-top:24px}}
@media(max-width:620px){.wrap{width:min(calc(100% - 28px),var(--site))}.hero-media{height:360px;margin:0 -14px}.hero h1{font-size:clamp(66px,18vw,98px);line-height:.92}.hero-ctas{display:grid}.hero-ctas .btn{width:100%}.section{padding:82px 0}.problem{gap:44px}.service-flip{min-height:530px}.flip-face{padding:30px 26px}.flip-face h3{font-size:46px}.flip-cue{display:grid}.standard:last-child{border-bottom:0}.continuity{padding:72px 0}.cont-copy{padding:34px 28px}.cont-copy h2{font-size:54px}.cont-side{grid-template-columns:1fr}.cont-flip{min-height:155px;border-right:0!important;border-bottom:1px solid rgba(17,17,15,.14)!important}.cont-flip:last-child{border-bottom:0!important}.faq-section{padding-top:82px;padding-bottom:82px}.final-shell{padding:56px 0 60px}.final-grid{gap:38px;padding-top:32px}.final-grid h2{font-size:clamp(66px,18vw,96px);line-height:.88}.final-actions{display:grid}.final-actions .btn{width:100%}.footer{padding-top:46px}.footer-main{grid-template-columns:1fr;gap:34px}.footer-bottom{margin-top:38px;flex-direction:column}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media(hover:none){.service-flip.is-hovered .flip-inner,.cont-flip.is-hovered .cont-inner{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.flip-inner,.cont-inner,.reveal,.reveal-card{transition:none!important}.reveal,.reveal-card{opacity:1!important;transform:none!important}}
/* ---------- What you need section ---------- */
.pk-section{
  padding:112px 0 124px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 12% 2%, rgba(255,255,255,.45), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0)),
    var(--paper);
}
.pk-wrap{
  display:block;
}
.pk-head{margin-bottom:36px}
.pk-title{
  margin:18px 0 0;
  font-size:clamp(78px,8.2vw,136px);
  line-height:.82;
}
.pk-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(17,17,15,.1);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 32px rgba(17,17,15,.04);
  background:rgba(255,255,255,.25);
}
.pk-tab{
  position:relative;
  min-height:132px;
  padding:20px 22px 22px;
  border:0;
  border-right:1px solid rgba(17,17,15,.08);
  background:transparent;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:18px;
  justify-content:flex-start;
  cursor:pointer;
  transition:filter .22s ease, transform .22s ease, background .22s ease;
}
.pk-tab:last-child{border-right:0}
.pk-tab:nth-child(1){background:#e4ede6}
.pk-tab:nth-child(2){background:#f2dddf}
.pk-tab:nth-child(3){background:#f2d2bd}
.pk-tab:hover{filter:brightness(.985)}
.pk-tab.is-active{background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)), transparent}
.pk-tab:after{
  content:"";
  position:absolute;
  left:18px; right:18px; bottom:0;
  height:3px;
  background:transparent;
  transition:background .24s ease, transform .24s ease;
}
.pk-tab.is-active:after{background:var(--ink)}
.pk-tab-top{
  display:grid;
  grid-template-columns:68px 1fr;
  gap:18px;
  align-items:start;
}
.pk-tab-num{
  font-family:"Barlow Condensed";
  font-size:40px;
  line-height:1;
  letter-spacing:.01em;
}
.pk-tab-label{
  font-size:15px;
  line-height:1.05;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  max-width:150px;
  display:block;
  padding-top:4px;
}
.pk-tab-copy{
  display:block;
  font-size:12px;
  line-height:1.5;
  color:#4f4b45;
  max-width:320px;
}
.pk-panels{
  margin-top:24px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.36));
  border:1px solid rgba(17,17,15,.08);
  box-shadow:0 14px 40px rgba(17,17,15,.05);
  overflow:hidden;
  position:relative;
}
.pk-panel{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:54px;
  padding:38px 42px 42px;
  animation:pkFade .52s cubic-bezier(.2,.7,.2,1);
}
.pk-panel[hidden]{display:none}
@keyframes pkFade{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:none}
}
.pk-index{
  font-family:"Barlow Condensed";
  font-size:54px;
  line-height:1;
  color:#426f5f;
  margin-bottom:18px;
}
.pk-panel-left h3{
  font-size:64px;
  line-height:.93;
  margin:0 0 24px;
  max-width:520px;
}
.pk-panel-left p{
  max-width:490px;
  font-size:17px;
  line-height:1.72;
  color:var(--muted);
  margin:0;
}
.pk-meta{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid rgba(17,17,15,.1);
  max-width:420px;
}
.pk-subhead{
  font-size:12px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pk-meta p{
  margin-top:10px;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
}
.pk-panel-left .btn{margin-top:30px}
.pk-panel-right{padding-top:8px}
.pk-panel-right .pk-subhead{margin-bottom:18px}
.pk-list{
  list-style:none;
  margin:0;
  padding:0;
}
.pk-list li{
  position:relative;
  padding:18px 0 18px 40px;
  border-top:1px solid rgba(17,17,15,.1);
  font-size:16px;
  line-height:1.4;
}
.pk-list li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:18px;
  color:#426f5f;
  font-weight:900;
}
@media (max-width:1100px){
  .pk-wrap{grid-template-columns:1fr}
  }
@media (max-width:860px){
  .pk-panel{
    grid-template-columns:1fr;
    gap:28px;
    padding:28px 24px 30px;
  }
  .pk-panel-left h3{
    font-size:54px;
  }
}
@media (max-width:640px){
  .pk-section{padding:82px 0 94px}
  .pk-title{
    font-size:clamp(68px,16vw,96px);
    line-height:.86;
  }
  .pk-tabs{
    grid-template-columns:1fr;
  }
  .pk-tab{
    min-height:0;
    border-right:0;
    border-bottom:1px solid rgba(17,17,15,.08);
    gap:12px;
    padding:18px 18px 16px;
  }
  .pk-tab:last-child{border-bottom:0}
  .pk-tab-top{grid-template-columns:50px 1fr;gap:14px}
  .pk-tab-num{font-size:34px}
  .pk-tab-label{font-size:14px;max-width:none}
  .pk-tab-copy{font-size:11px;max-width:none}
  .pk-panel-left h3{
    font-size:44px;
  }
  .pk-panel-left p, .pk-meta p, .pk-list li{font-size:15px}
}
/* Production accessibility / enquiry states */
.skip-link{position:fixed;left:14px;top:14px;z-index:200;transform:translateY(-160%);background:var(--black);color:var(--paper2);padding:12px 16px;font-size:12px;font-weight:800;border:1px solid var(--paper2)}
.skip-link:focus{transform:none}
.form-status{display:none;margin-top:16px;padding:13px 14px;border:1px solid var(--line);font-size:12px;line-height:1.5}
.form-status.is-visible{display:block}
.form-status.success{background:var(--mint2)}
.form-status.error{background:#f5e2df}
/* ---------- services as a schedule of business ----------
   The artefact Boardmet produces is the formal record: numbered items, ruled
   divisions, a marginal note against each. The section is set in that language
   rather than as cards, which is both more distinctive and considerably denser. */
.svc-section{padding:82px 0 74px}
@media(max-width:620px){.svc-section{padding:72px 0 64px}}
/* ---------- the offer ----------
   A firm with no client list cannot show testimonials. It can remove the buyer's
   risk instead, and say so where nobody can miss it. The band's ground, type
   scale and spacing are set in the offer/proof zone further down; only the
   link's own anatomy lives here. */
.offer-link{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
 font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
 text-decoration:none;color:var(--ink);padding-bottom:3px;
 border-bottom:1px solid rgba(17,19,17,.42)}
.offer-link span{transition:transform .25s ease}
.offer-link:hover{border-bottom-color:var(--ink)}
.offer-link:hover span{transform:translateX(4px)}
/* label — detail coverage lines read faster than a middot run-on */
/* ---------- enquiry, on the page ---------- */
.enq-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:start;
 padding-top:38px}
.enq-ask h2{font-size:clamp(46px,5.6vw,80px);line-height:.92;margin:0}
.enq-ask > p{font-size:15px;line-height:1.65;max-width:44ch;margin:24px 0 0}
.enq-term{font-size:13px;line-height:1.6;margin:22px 0 0;padding-top:18px;
 border-top:1px solid rgba(17,17,15,.22);max-width:46ch;opacity:.82}
.enq-term strong{opacity:1;font-weight:700}
.enq-direct{display:flex;gap:26px;flex-wrap:wrap;margin:24px 0 0;font-size:13px;font-weight:700}
.enq-direct a{text-decoration:none;border-bottom:1px solid rgba(17,17,15,.4);padding-bottom:2px}
.enq-form{background:var(--paper2);border:1px solid rgba(17,17,15,.16);padding:30px}
.enq-form .field label{font-size:9.5px}
@media(max-width:960px){.enq-grid{grid-template-columns:1fr;gap:34px;padding-top:28px}
 .enq-form{padding:24px 20px}}
.field-hint{font-size:10px;line-height:1.45;color:var(--muted)}
.bm-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:640px;margin:0 auto;
 background:var(--paper2);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.18);
 padding:18px 20px;display:grid;gap:14px}
.bm-consent p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.bm-consent a{text-decoration:underline}
.bm-consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.bm-consent button{border:1px solid var(--ink);background:transparent;padding:9px 16px;font-size:11px;
 font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bm-consent .bm-accept{background:var(--ink);color:var(--paper)}
@media(max-width:620px){.bm-consent{left:10px;right:10px;bottom:10px}}
/* Visible focus, everywhere — a governance audience uses the keyboard. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
/* ═══ SPACING SCALE ═══════════════════════════════════════════════════════
   Section rhythm was ad hoc (82/74/96/118). A scale means every gap is a
   deliberate step rather than a number someone typed. Base 4, roughly 1.5x. */
:root{
  --s1:8px; --s2:16px; --s3:24px; --s4:36px;
  --s5:56px; --s6:84px; --s7:120px;
}
.svc-section{padding:var(--s6) 0}
.enq-grid{padding-top:var(--s4);gap:var(--s6)}
.faq-section{padding-top:var(--s7);padding-bottom:var(--s7)}
/* ═══ ARRIVAL ═════════════════════════════════════════════════════════════
   One orchestrated moment, on load, in reading order — not scattered effects.
   Each element is 70ms behind the last; the whole sequence is under 600ms so
   it reads as the page settling, never as something to wait for. */
/* Gated on .motion-ready, which JS adds — so if scripting or animation fails,
   the hero is simply visible rather than invisible. Never hide content behind
   an animation that might not run. */
@media (prefers-reduced-motion: no-preference){
  
  /* The h1 fades only. Rising it 14px while the last line travels 118px
     compounds two transforms and the whole headline appears to swim. */
  
  
  
  
  
  
  
}
@keyframes bm-arrive{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes bm-fade{from{opacity:0}to{opacity:1}}
@media(max-width:900px){}
/* ---------- services: intro left, cards right ---------- */
.svc-section{padding:var(--s6) 0}
.svc-layout{display:grid;grid-template-columns:.4fr 1.6fr;gap:64px;align-items:stretch}
.svc-intro{position:relative}
.svc-intro-in{position:sticky;top:112px}
.svc-intro h2{margin:14px 0 0}
.svc-lede{font-size:15px;line-height:1.66;color:#2b2a27;max-width:34ch;margin:22px 0 0}
.svc-note{font-size:13px;line-height:1.6;color:var(--muted);max-width:34ch;margin:22px 0 0;
 padding-top:18px;border-top:1px solid var(--line)}
.svc-note strong{color:var(--ink)}
.svc-intro .btn{margin-top:20px}
.svc-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc-card{display:flex;flex-direction:column;padding:34px 32px 28px;
 border:1px solid rgba(17,17,15,.07);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.svc-card[data-tone="mint"]{background:var(--mint)}
.svc-card[data-tone="rose"]{background:var(--rose)}
.svc-card[data-tone="ochre"]{background:var(--ochre)}
.svc-card[data-tone="sand"]{background:#ead8c9}
.svc-card[data-tone="coral"]{background:var(--coral)}
.svc-card-kicker{font-size:13px;font-weight:500;letter-spacing:.005em;
 text-transform:none;opacity:1;color:rgba(17,19,17,.66)}
.svc-card h3{font-size:clamp(30px,2.9vw,40px);line-height:1;margin:18px 0 0}
.svc-card-trigger{font-size:14.5px;line-height:1.5;font-weight:700;margin:14px 0 0;max-width:34ch}
.svc-card-items{margin:22px 0 0;border-top:1px solid rgba(17,17,15,.2);flex:1}
.svc-item{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 10px;
 padding:13px 0;border-bottom:1px solid rgba(17,17,15,.13);font-size:13px;line-height:1.55}
.svc-item:last-child{border-bottom:0}
.svc-item-n{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:10.5px;
 opacity:.6;padding-top:2px;font-variant-numeric:tabular-nums}
.svc-item b{font-weight:700}
.svc-card-link{align-self:flex-end;margin-top:20px;display:inline-flex;align-items:center;gap:9px;
 font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
 padding-bottom:3px;border-bottom:1px solid currentColor}
.svc-card-link span{transition:transform .25s ease}
@media(hover:hover) and (pointer:fine){
 .svc-card:hover{transform:translateY(-3px);box-shadow:0 22px 54px rgba(17,17,15,.11)}
 .svc-card-link:hover span{transform:translateX(4px)}
}
@media(max-width:1080px){.svc-layout{grid-template-columns:1fr;gap:var(--s4)}
 .svc-intro-in{position:static}.svc-lede,.svc-note{max-width:56ch}}
@media(max-width:720px){.svc-cards{grid-template-columns:1fr}.svc-card{padding:28px 24px 24px}}
@media(prefers-reduced-motion:reduce){.svc-card,.svc-card-link span{transition:none}}
/* ---------- the offer/proof zone: one paper, two tones ----------
   Both halves now sit on the same warm paper as the Continuity panel further
   down, so the zone stops reading as a foreign slab dropped into the page.
   The split is done with luminance alone on a single hue (62 — sand's axis):
   the offer takes the deeper tone because it carries the promise, the proof
   steps up to the panel's own paper2 because small credential type needs the
   lightest ground it can get. Measured 1.40:1 between them — a step you read
   as two sections, not two colours. The brand gold stays 1.36:1 clear of the
   offer ground, so the CTA keeps its signal. */
.offer{background:#E7CFBB;background:oklch(0.868 0.038 62);color:var(--ink);border-bottom:0}
.offer-in{display:flex;align-items:center;justify-content:space-between;gap:44px;
 flex-wrap:wrap;padding:34px 0 32px}
.offer .kicker{color:rgba(17,19,17,.72);margin-bottom:11px}
.offer-line{margin:0;font-size:15px;line-height:1.55;max-width:64ch;color:rgba(17,19,17,.78)}
.offer-line strong{display:block;color:var(--ink);font-weight:700;
 font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-size:30px;
 letter-spacing:.012em;text-transform:uppercase;line-height:1;margin-bottom:9px}
.offer-link{border-bottom-color:rgba(17,19,17,.5)}
@media(max-width:900px){
 .offer-in{gap:26px;padding:30px 0 28px}
 .offer-line strong{font-size:26px}
}
@media(max-width:560px){
 .offer-in{padding:26px 0 24px;gap:18px}
 .offer-line strong{font-size:23px}
 .offer-line{font-size:14.5px}
}
/* ---------- proof ----------
   On a pale ground the rail's own pale fills would disappear, so the index
   marks hold the four brand hue angles (155/12/62/82) at a single lower
   lightness — the same system, re-tuned for paper rather than ink. The
   numerals stay neutral so the type reads as data, not decoration.
   The bottom hairline is what separates this from the services paper below:
   1.07:1 of tone cannot do it, and a drawn rule is the panel's own grammar. */
.proof{background:var(--paper2);color:var(--ink);
 border-bottom:1px solid rgba(17,17,15,.16)}
.proof-grid{display:grid;grid-template-columns:.86fr repeat(4,1fr);gap:0;padding:36px 0 38px}
.proof-lead{padding-right:38px;border-right:1px solid rgba(17,17,15,.16)}
.proof-lead .kicker{color:var(--muted)}
.proof-lead h2{font-size:clamp(30px,2.9vw,40px);line-height:.98;margin:12px 0 0;color:var(--ink)}
.proof-item{padding:0 24px;border-right:1px solid rgba(17,17,15,.16);
 display:flex;flex-direction:column;align-items:flex-start}
.proof-item:last-child{border-right:0;padding-right:0}
.proof-item .bar{display:block;width:34px;height:3px;border-radius:2px;margin-bottom:15px}
.proof-item[data-hue="a"] .bar{background:#249057;background:oklch(0.58 0.13 155)}
.proof-item[data-hue="b"] .bar{background:#BA5566;background:oklch(0.58 0.13 12)}
.proof-item[data-hue="c"] .bar{background:#B95C3A;background:oklch(0.58 0.13 40)}
.proof-item[data-hue="d"] .bar{background:#A07100;background:oklch(0.58 0.13 82)}
.proof-item .n{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:900;
 font-size:22px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;
 color:rgba(17,17,15,.46);display:block;margin-bottom:11px}
.proof-item b{display:block;font-size:13px;line-height:1.3;margin-bottom:6px;color:var(--ink)}
.proof-item .t{display:block;font-size:11.5px;line-height:1.55;color:#4A463F}
@media(max-width:1080px){
 .proof-grid{grid-template-columns:1fr 1fr;gap:26px 0;padding:32px 0 34px}
 .proof-lead{grid-column:1/-1;padding:0 0 24px;border-right:0;
  border-bottom:1px solid rgba(17,17,15,.16)}
 /* .proof-lead spans both columns as child 1, so the LEFT column is children
    2 and 4 — they carry the divider; 3 and 5 sit against the outer edge and
    must not, or a hairline hangs off the right of the grid. */
 .proof-item{padding:0;border-right:0}
 .proof-item:nth-child(2),.proof-item:nth-child(4){padding-right:24px;
  border-right:1px solid rgba(17,17,15,.16)}
}
@media(max-width:620px){
 .proof-grid{grid-template-columns:1fr;gap:22px}
 .proof-item{padding:0!important;border-right:0!important}
}
/* ── audit fixes ──────────────────────────────────────────────────────────
   Text sizes: a headteacher fills this form on a phone. 9.5px labels and a
   7px brand line were unreadable at arm's length. */
.field label{font-size:11px!important}
.brand small{font-size:8.5px!important}
.footer-label{font-size:10px!important}
.field-hint{font-size:11px!important}
/* Tap targets: these links render as 15–19px tall, well under the 44px floor.
   Padding extends the touch area on coarse pointers without moving anything. */
@media (pointer: coarse){
  .svc-card-link,.footer-col a,.contact a,.final-copy .contact a,a.enquire{
    padding-top:13px;padding-bottom:13px;
  }
  /* Underlined links get their hit area from a pseudo-element instead: padding
     would drag the rule 13px clear of the baseline and leave it floating. */
  .offer-link,.enq-direct a{position:relative}
  .offer-link::after,.enq-direct a::after{content:"";position:absolute;
    left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
  .footer-col{gap:0}
  .enq-direct{gap:18px 26px}
}
/* Footer padding was the one section off the spacing scale (58/30). */
.footer{padding:var(--s5) 0 var(--s3)}

/* The fallback sits after the four, spanning the grid — it is a way out, not a
   fifth option competing with them. */



@media(max-width:1080px){}

/* ---------- the fifth thing ----------
   It is not a fifth service, it is what comes before the four — so it is built
   as a panel that belongs to the set without competing with it: same border
   language as the cards, no fill, and a mark carrying all four card tones to
   say "any of these". Its CTA is specific, so it no longer duplicates the
   section's ask word for word. */
.svc-fifth{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
 gap:0 30px;align-items:center;margin-top:14px;padding:28px 32px;
 border:1px solid rgba(17,17,15,.22);background:var(--paper2)}
.svc-fifth-mark{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:34px}
.svc-fifth-mark span{display:block;height:15px;border-radius:2px}
.svc-fifth-mark span:nth-child(1){background:var(--mint)}
.svc-fifth-mark span:nth-child(2){background:var(--rose)}
.svc-fifth-mark span:nth-child(3){background:var(--ochre)}
.svc-fifth-mark span:nth-child(4){background:#ead8c9}
.svc-fifth-kicker{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
 color:var(--muted)}
.svc-fifth h3{font-size:clamp(24px,2.2vw,30px);line-height:1;margin:9px 0 0}
.svc-fifth p{font-size:13.5px;line-height:1.6;color:#2b2a27;margin:10px 0 0;max-width:64ch}
.svc-fifth strong{font-weight:700}
.svc-fifth .btn{white-space:nowrap}
@media(max-width:900px){
 .svc-fifth{grid-template-columns:auto minmax(0,1fr);gap:0 20px;padding:24px 22px}
 .svc-fifth .btn{grid-column:1/-1;margin-top:20px;justify-content:center}
}
@media(max-width:560px){
 .svc-fifth{grid-template-columns:1fr}
 .svc-fifth-mark{margin-bottom:16px}
}

.bm-mark{display:block;flex:none}
.brand.has-mark{display:flex;align-items:center;gap:11px}
.brand.has-mark .brand-txt{display:block}
.svc-fifth-mark{display:flex;align-items:center;width:auto}
@media(max-width:560px){.brand.has-mark{gap:9px}.brand.has-mark .bm-mark{width:26px;height:26px}}

/* ── mobile ─────────────────────────────────────────────────────────────────
   On a phone the split has nowhere to go, so the picture takes its own block
   under the copy at full width. It stays at full strength there too. */
@media(max-width:900px){
 /* .hero-media is a sibling of .hero-inner, not a child of it, so `order` only
    works if .hero itself is the flex container. Without this the picture lands
    above the headline and the first thing a head sees on a phone is furniture. */
 .hero{min-height:auto;display:flex;flex-direction:column}
 .hero-inner{min-height:auto;display:grid;padding-top:8px;order:1}
 .hero-media{position:relative;inset:auto;height:340px;order:2;margin:0 -22px}
 .hero-media img{object-position:56% 54%}
 .hero-copy{width:100%;padding:38px 0 30px}
 .hero-h1{white-space:normal;font-size:clamp(58px,13vw,96px) !important}
 .hero-h1 .hl-a,.hero-h1 .hl-b{white-space:normal}
 .motion-ready .hero-h1 .hl-b{transform:translate3d(54px,0,0)}
 .c-l,.c-r{inset:0 auto 0 0;width:0}.c-b{inset:auto 0 0 0;height:0}
}
@media(max-width:620px){
 .hero-media{height:260px;margin:0 -14px}
 .motion-ready .hero-h1 .hl-b{transform:translate3d(34px,0,0)}
}

/* ── the hero copy block ────────────────────────────────────────────────────
   Three cuts, all Ogilvy: one ask instead of two competing blocks; a single
   lede line instead of a 32-word paragraph doing second-paragraph work; and
   the short-notice fact promoted out of the gutter, because it is the most
   persuasive sentence we own and it was sitting under the buttons.
   The picture takes the larger share — a narrow type column against a generous
   image is what separates a designed split from an assembled one. */
.hero-media{inset:0 0 0 40% !important}
.c-l{inset:0 auto 0 40% !important}
.c-b{inset:auto 0 0 40% !important}
.hero-copy{width:min(520px,36vw) !important;padding:96px 0 0 !important;
 display:flex;flex-direction:column;justify-content:center;min-height:inherit}
.hero-inner{align-items:stretch}
/* Three sentences, three lines. Set as a run it broke mid-phrase — "One
   meeting. A short / absence." — and a triad set as a triad reads harder
   anyway: each line is one of the three situations we cover. */
.hero-lead{margin:26px 0 0;font-size:21px;line-height:1.28;font-weight:600;
 color:var(--ink)}
.hero-lead strong{display:block;font-weight:700}
.hero-lead span{display:block;margin-top:calc(var(--u)*1.25);font-weight:500;
 font-size:.86em;color:#3B3830}
.hero-ctas{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:34px}
.hero-tel{font-size:14px;color:#4A463F;text-decoration:none;white-space:nowrap}
.hero-tel b{font-weight:700;color:var(--ink);border-bottom:1px solid rgba(17,19,17,.34);
 padding-bottom:2px}
.hero-tel:hover b{border-bottom-color:var(--ink)}
/* The fact shares a baseline with the foot of the picture, which is what makes
   the two halves read as one composition rather than two panels. */
.hero-fact{margin:auto 0 0;padding:16px 0 40px;max-width:40ch;
 border-top:1px solid rgba(17,17,15,.18);
 font-size:13.5px;line-height:1.5;color:#4A463F}
@media(max-width:1220px){
 .hero-media{inset:0 0 0 42% !important}
 .c-l{inset:0 auto 0 42% !important}.c-b{inset:auto 0 0 42% !important}
 .hero-copy{width:38vw !important}
}
@media(max-width:900px){
 .hero-media{inset:auto !important}
 .c-l,.c-r,.c-b{inset:0 auto 0 0 !important;width:0 !important;height:0 !important}
 .hero-copy{width:100% !important;min-height:0}
 .hero-lead{font-size:20px}
 .hero-fact{margin-top:30px;padding-bottom:26px}
 .hero-ctas{gap:16px}
}
@media(max-width:620px){
 .hero-ctas{display:grid;gap:14px}
 .hero-ctas .btn{width:100%}
 .hero-tel{font-size:15px}
}

/* ═══ PROOF ════════════════════════════════════════════════════════════════
   The claim at display scale with its evidence beside it. It follows the hero
   directly now, and paper2 sits only 1.07:1 from the hero's paper — tone alone
   cannot separate them, so a drawn rule does it. */
/* ── the claim, at display scale, with its evidence beside it ───────────── */
.proofb{--u:8px;background:var(--paper2);color:var(--ink);
 border-top:1px solid rgba(17,17,15,.18);
 border-bottom:1px solid rgba(17,17,15,.16)}
.pb-grid{display:grid;grid-template-columns:.86fr repeat(4,1fr);gap:0;
 padding:calc(var(--u)*5) 0 calc(var(--u)*6)}
.pb-lead{padding-right:calc(var(--u)*5);border-right:1px solid rgba(17,17,15,.16)}
.proofb .kicker{color:var(--muted);margin:0}
.pb-lead h2{font-size:clamp(30px,2.9vw,40px);line-height:.98;margin:calc(var(--u)*1.5) 0 0}
.pb-i{position:relative;padding:0 clamp(20px,2.2vw,30px);
 border-right:1px solid rgba(17,17,15,.16)}
.pb-i:last-child{border-right:0;padding-right:0}
.pb-i::before{content:"";position:absolute;top:2px;left:clamp(20px,2.2vw,30px);
 width:30px;height:3px;border-radius:2px}
.pb-i[data-t=a]::before{background:#249057}
.pb-i[data-t=b]::before{background:#BA5566}
.pb-i[data-t=c]::before{background:#B95C3A}
.pb-i[data-t=d]::before{background:#A07100}
.pb-n{display:block;margin-top:calc(var(--u)*2.5);
 font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:900;
 font-size:22px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;
 color:rgba(17,17,15,.46)}
.pb-i b{display:block;margin-top:calc(var(--u)*1.5);font-size:13.5px;line-height:1.3;
 font-weight:700;color:var(--ink)}
.pb-t{display:block;margin-top:calc(var(--u)*.75);font-size:12px;line-height:1.55;
 color:#4A463F}

@media(max-width:1080px){
 .pb-grid{grid-template-columns:1fr 1fr;gap:calc(var(--u)*4) 0}
 .pb-lead{grid-column:1/-1;padding:0 0 calc(var(--u)*3);border-right:0;
  border-bottom:1px solid rgba(17,17,15,.16)}
 .pb-i{padding-left:0}
 .pb-i:nth-child(even){border-right:0}
 .pb-i:nth-child(odd){padding-right:0;border-right:0}
 .pb-i:nth-child(2),.pb-i:nth-child(4){padding-right:clamp(20px,2.2vw,30px);
  border-right:1px solid rgba(17,17,15,.16)}
 .pb-i::before{left:0}
 .pb-i:nth-child(2)::before,.pb-i:nth-child(4)::before{left:0}
}
@media(max-width:620px){
 .pb-grid{grid-template-columns:1fr;gap:calc(var(--u)*4)}
 .pb-i{padding:0!important;border-right:0!important}
 .pb-i::before{left:0}
}

/* ═══ HERO — illustrated ═══════════════════════════════════════════════════
   Copy left, the scene right. The illustration is atmosphere, not information:
   it is washed into the paper palette and its lettered surfaces are blurred,
   so nothing in it competes with the type or invites reading. */
.hero{--u:8px;position:relative;min-height:760px;overflow:hidden;
 background:var(--paper);border-bottom:1px solid rgba(17,17,15,.16)}
.hero-media{position:absolute;inset:0 0 0 46%;overflow:hidden;background:#EFE7DA}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:64% 54%;
 display:block}
.hero-inner{position:relative;z-index:2;min-height:760px;display:flex;
 align-items:center}
.hero-copy{width:min(560px,41vw);padding:calc(var(--u)*9) 0}
.hero-copy .kicker{margin:0 0 calc(var(--u)*3)}
.hero-h1{display:block;margin:0}
.hero-h1 span{display:block;font-size:clamp(50px,7.2vw,102px);line-height:.9;
 letter-spacing:-.008em;margin-left:-.02em}  /* optical, not metric, alignment */
.hero-lead{margin:calc(var(--u)*4) 0 0;font-size:clamp(18px,1.55vw,22px);
 line-height:1.32;font-weight:600;color:var(--ink)}
.hero-lead span{display:block}
.hero-ctas{display:flex;align-items:center;flex-wrap:wrap;
 gap:calc(var(--u)*2.5);margin-top:calc(var(--u)*4.5)}
.hero-ctas .btn{flex:0 0 auto;width:max-content;min-height:54px;
 padding:16px 28px;font-size:12.5px}
.hero-tel{font-size:14px;color:#4A463F;text-decoration:none;white-space:nowrap}
.hero-tel b{font-weight:700;color:var(--ink);
 border-bottom:1px solid rgba(17,19,17,.34);padding-bottom:2px}
.hero-tel:hover b{border-bottom-color:var(--ink)}
.hero-fact{margin:calc(var(--u)*6) 0 0;padding-top:calc(var(--u)*3);
 max-width:40ch;border-top:1px solid rgba(17,17,15,.22);
 font-size:13.5px;line-height:1.55;color:#4A463F}

@media(max-width:980px){
 .hero{min-height:0;display:flex;flex-direction:column}
 .hero-inner{min-height:0;order:1;display:block}
 .hero-copy{width:100%;padding:calc(var(--u)*6) 0 calc(var(--u)*5)}
 .hero-media{position:relative;inset:auto;order:2;height:330px;margin:0 -22px}
}
@media(max-width:620px){
 .hero-media{height:240px;margin:0 -14px}
 .hero-ctas{display:grid;gap:calc(var(--u)*2);width:100%}
 .hero-ctas .btn{width:100%}
}

/* ── the offer band ─────────────────────────────────────────────────────── */
.offerb{--u:8px;background:#E7CFBB;background:oklch(0.868 0.038 62);color:var(--ink)}
.ob-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--u)*5);
 align-items:center;padding:calc(var(--u)*5) 0}
.offerb .kicker{margin:0 0 calc(var(--u)*1.5);color:rgba(17,19,17,.72)}
.ob-h{font-size:clamp(26px,3.1vw,40px);line-height:1;margin:0;letter-spacing:.006em}
.ob-sub{margin:calc(var(--u)*1.75) 0 0;font-size:15.5px;line-height:1.5;
 color:rgba(17,19,17,.8);max-width:62ch}
.ob-link{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
 font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
 text-decoration:none;color:var(--ink);padding-bottom:3px;cursor:pointer;
 border-bottom:1px solid rgba(17,19,17,.5)}
.ob-link span{transition:transform .25s ease}
.ob-link:hover{border-bottom-color:var(--ink)}
.ob-link:hover span{transform:translateX(4px)}
@media(max-width:900px){.ob-in{grid-template-columns:1fr;align-items:start;gap:calc(var(--u)*3)}}

/* ── the rail reports position ──────────────────────────────────────────── */
.rail a{position:relative}
.rail a span{color:rgba(17,19,17,.6);transition:color .3s ease}
.rail a[aria-current] span{color:var(--ink)}
.rail a::after{content:"";position:absolute;left:0;top:50%;width:2px;height:0;
 background:var(--ink);transform:translateY(-50%);
 transition:height .32s cubic-bezier(.22,1,.36,1)}
.rail a[aria-current]::after{height:34px}

/* ── entrance timing ────────────────────────────────────────────────────── */
.motion-ready .reveal.is-visible{transition-duration:.5s}
.motion-ready .reveal-card.is-visible{transition-duration:.46s}
.svc-cards .reveal-card:nth-child(2){transition-delay:.07s}
.svc-cards .reveal-card:nth-child(3){transition-delay:.14s}
.svc-cards .reveal-card:nth-child(4){transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
 .rail a span,.rail a::after{transition:none}
 .svc-cards .reveal-card{transition-delay:0s!important}
}

/* ── Elite hero (Ogilvy build) ─────────────────────────────────────────── */
.hero{
  --p:0;
  position:relative;
  min-height:min(92vh,860px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:var(--paper);
}
.hero-media{
  position:absolute;
  inset:0 0 0 42%;
  overflow:hidden;
  background:#EFE7DA;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% 46%;
  display:block;
  transform:scale(1.03);
  transform-origin:60% 45%;
  filter:saturate(1.05) contrast(1.04);
}
.hero-veil{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      var(--paper) 0%,
      var(--paper) 38%,
      rgba(245,239,229,.92) 42%,
      rgba(245,239,229,.45) 48%,
      transparent 58%),
    linear-gradient(180deg,
      rgba(245,239,229,.18) 0%,
      transparent 22%,
      transparent 78%,
      rgba(245,239,229,.12) 100%);
}
.hero-inner{
  position:relative;
  z-index:4;
  min-height:min(92vh,860px);
  display:flex;
  align-items:center;
}
.hero-copy{
  width:min(540px,40vw);
  padding:96px 0 100px;
}
.hero-kicker{
  margin:0 0 22px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#5A5349;
}
.hero-h1{
  font-family:"Barlow Condensed","Arial Narrow",sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(72px,9.2vw,148px);
  line-height:.82;
  letter-spacing:-.018em;
  margin:0;
  color:var(--ink);
  max-width:12ch;
}
.hero-lead{
  margin:28px 0 0;
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.45;
  color:var(--ink);
  font-weight:500;
  max-width:28ch;
}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 28px;
  margin-top:36px;
}
.hero-ctas .btn{
  min-height:52px;
  padding:0 26px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
}
.hero-tel{
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(17,17,15,.35);
  padding-bottom:1px;
  transition:border-color .2s ease, color .2s ease;
}
.hero-tel:hover{border-bottom-color:var(--ink);color:var(--ink)}
.hero-tel b{font-weight:700;text-decoration:none}
.hero-proof{
  margin:42px 0 0;
  padding-top:22px;
  border-top:1px solid rgba(17,17,15,.18);
  font-size:14px;
  line-height:1.55;
  color:#5A5349;
  max-width:34ch;
}

/* Elite cascade lock — wins over residual media queries */
@media(max-width:900px){
  .hero .hero-media{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    height:380px !important;
    order:2 !important;
    margin:0 -22px !important;
  }
  .hero .hero-veil{display:none !important}
  .hero .hero-inner{
    min-height:auto !important;
    display:grid !important;
    padding-top:8px !important;
  }
  .hero .hero-copy{
    width:100% !important;
    padding:44px 0 32px !important;
    order:1 !important;
  }
  .hero .hero-h1{
    font-size:clamp(64px,15.5vw,104px) !important;
    line-height:.84 !important;
    max-width:none !important;
  }
}
@media(max-width:620px){
  .hero .hero-media{height:280px !important;margin:0 -14px !important}
  .hero .hero-h1{font-size:clamp(56px,15vw,88px) !important}
  .hero .hero-ctas{display:grid !important;gap:12px !important}
  .hero .hero-ctas .btn{width:100% !important}
}

/* ═══ HERO — final ══════════════════════════════════════════════════════════
   The file had accumulated 13 competing .hero-copy rules, 10 .hero-ctas and 7
   each of .hero and .hero-h1 across successive redesigns, several carrying
   !important. Deleting them one by one is how a stylesheet gets silently
   broken, so this block settles every property that matters by cascade: it is
   last, and it is specific enough to win. The dead rules are inert.

   Colour enters twice, and both times it means something rather than
   decorates. The headline's full stop is the brand accent — the one mark in
   129px of black type, and it points at the button below it in the same
   family. The rule above the proof line is the company mark at page scale:
   four segments, the same four hues as the logo squares and the side rail, in
   the same order. Tints at their logo values disappear on paper, so these are
   the same hues held at a lower lightness — the system, re-tuned for the
   ground it sits on. */
.hero .hero-copy{width:min(660px,50vw)}
/* balance was the cause of the bad break, not the cure: it evens the lines at
   24ch each, which lands mid-phrase after "short". A measure just wide enough
   for the first two sentences breaks it at a full stop instead. */
/* The break is authored, not left to the wrapper: text-wrap:balance evens the
   lines at 24ch and lands mid-phrase, and any max-width that fits sentence one
   also fits the next word. Below 620 the measure is short enough to wrap on
   its own, so the hard break comes out. */
.hero .hero-lead{max-width:34ch}
@media(max-width:620px){ .hero .hero-lead .lb{display:none} }

/* an earlier generation set .hero-h1 span{display:block}, which threw the
   full stop onto its own line the moment it was wrapped for colour */
.hero-h1 .fs{display:inline;color:#B0660C}

.hero .hero-seg{display:flex;gap:6px;width:min(340px,40vw);margin:44px 0 0}
.hero .hero-seg i{flex:1;height:3px;border-radius:2px}
.hero .hero-seg i:nth-child(1){background:#249057}
.hero .hero-seg i:nth-child(2){background:#BA5566}
.hero .hero-seg i:nth-child(3){background:#B95C3A}
.hero .hero-seg i:nth-child(4){background:#A07100}
/* the segmented rule replaces the plain hairline it sits in place of */
/* This line is the whole argument — short notice is normal, and you get a
   person rather than a pool. It was set as 14px fine print under the CTA;
   at 16/1.55 in near-ink it carries the weight the claim deserves without
   competing with the lede above it. */
.hero .hero-proof{margin:20px 0 0 !important;padding-top:0 !important;
 border-top:0 !important;max-width:56ch;
 font-size:16px;line-height:1.55;color:#3D382F}
.hero .hero-proof b{font-weight:600;color:var(--ink)}
@media(max-width:620px){
 .hero .hero-proof{font-size:15px}
 /* the CTA stack stretches its children, which dragged the phone link to the
    full 362px — its underline then read as a section divider rather than a
    link. Shrink it to its own content. */
 /* .hero-ctas is a grid, so align-self does nothing horizontally */
 .hero .hero-tel{justify-self:start;width:auto;max-width:100%}
 /* min-height was leaving ~160px of empty paper under the proof line on a
    390×844 screen. Let the content set the height here. */
 .hero{min-height:0}
}

@media(max-width:900px){
 .hero .hero-copy{width:100%}
 .hero .hero-seg{width:min(300px,60vw);margin-top:36px}
}
@media(prefers-reduced-motion:reduce){.hero .hero-seg i{transition:none}}

/* The band between the header and the kicker measured 139px: 96px of
   .hero-copy top padding plus the kicker's own leading. Down a quarter to
   ~104px. The hero's height is content-driven, so this shortens the whole
   section rather than pushing the space to the bottom. Desktop only — the
   mobile hero was already tight at 575px. */
@media(min-width:901px){
 /* Two things set that band. .hero-copy carries padding-top:96px !important
    (so this needs !important to win), and .hero / .hero-inner are pinned at
    min(92vh,860px) with align-items:center — which halves any padding change
    by re-centring. Pulling the height down by the same 35px makes the cut
    land entirely on the top band and leaves the space below the proof line
    at its original 43px. 139px → 104px → 68px → 45px. */
 /* Pinning the copy to the top instead of centring it makes padding-top the
    band itself, rather than half of it, so this is now one number to move
    instead of two that have to stay in step. min-height then just sets how
    much room is left under the proof line. */
 .hero .hero-copy{justify-content:flex-start !important;padding-top:45px !important}
 /* the proof line went from two lines to one, which handed 25px back to the
    space beneath it — take it off the height so the hero keeps its footing */
 .hero,.hero .hero-inner{min-height:min(78.8vh,742px) !important}
}

/* ══════════════════════════════════════════════════════════════════
   PROOF BAND — four credentials, no headline claiming them
   With the lead column gone the band is one row of four. The old grid
   put clamp(20px,2.2vw,30px) of left padding on every item, including
   the first, so column one sat ~30px inside the page's left margin
   while the hero, the offer band and every section head sat on it.
   Column one now starts on that margin and column four ends on the
   right one, so the band reads against the same vertical as the rest
   of the page. Within each column the rule, numeral, label and text
   share one left edge.
   ══════════════════════════════════════════════════════════════════ */
.proofb .pb-grid{grid-template-columns:repeat(4,minmax(0,1fr));
 padding:calc(var(--u)*5) 0 calc(var(--u)*5.5)}
.proofb .pb-i{padding:0 clamp(22px,2.4vw,34px)}
.proofb .pb-i:first-child{padding-left:0}
.proofb .pb-i:first-child::before{left:0}
.proofb .pb-i:last-child{padding-right:0;border-right:0}
/* numeral and label were drifting apart at 22px/900; tighten the step
   so each column reads as one stack rather than three loose parts */
.proofb .pb-n{margin-top:calc(var(--u)*2.25)}
.proofb .pb-i b{margin-top:calc(var(--u)*1.25)}

@media(max-width:1080px){
 .proofb .pb-grid{grid-template-columns:1fr 1fr;gap:calc(var(--u)*4) 0}
 .proofb .pb-i:nth-child(odd){padding-left:0}
 .proofb .pb-i:nth-child(odd)::before{left:0}
 .proofb .pb-i:nth-child(even){border-right:0;padding-right:0}
}
@media(max-width:620px){
 .proofb .pb-grid{grid-template-columns:1fr;gap:calc(var(--u)*3.5)}
 .proofb .pb-i{padding:0 !important;border-right:0 !important}
 .proofb .pb-i::before{left:0 !important}
}

/* — the card's first element is now the kicker, not the counter — */
.svc-card .svc-card-kicker{margin-top:0}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   Was set at 9px labels / 12px links / 10.5px legal at .58 alpha on
   near-black. Too small to read comfortably and too faint to pass AA.
   Sizes raised across the board, alpha lifted, and the columns given
   an even rhythm instead of the arbitrary 1.5 / .7 / .6 / .85 split.
   The four-mark rule that opens the hero now closes the page, in the
   light brand hues rather than the darkened set, because the ground
   is inverted here.
   ══════════════════════════════════════════════════════════════════ */
.footer{background:var(--black);color:var(--paper2);padding:0 0 34px;position:relative}
.footer-rule{display:flex;gap:0;width:100%;height:3px}
.footer-rule i{flex:1;height:3px}
.footer-rule i:nth-child(1){background:#c9ddcf}
.footer-rule i:nth-child(2){background:#e8c7ca}
.footer-rule i:nth-child(3){background:#e9a27e}
.footer-rule i:nth-child(4){background:#e4b454}

.footer .footer-main{
 display:grid;grid-template-columns:1.7fr repeat(3,minmax(0,1fr));
 gap:44px clamp(28px,3.4vw,56px);align-items:start;padding-top:62px}
.footer .footer-brand p{
 margin:18px 0 0;max-width:34ch;font-size:13.5px;line-height:1.62;
 color:rgba(251,247,239,.72)}
.footer .footer-col{display:grid;gap:11px;font-size:13.5px;align-content:start}
.footer .footer-label{
 font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
 color:rgba(251,247,239,.55);margin:0 0 5px}
.footer .footer-col a{
 color:rgba(251,247,239,.86);text-decoration:none;line-height:1.4;
 border-bottom:1px solid transparent;justify-self:start;
 transition:color .18s ease,border-color .18s ease}
.footer .footer-col a:hover{color:#fff;border-bottom-color:rgba(251,247,239,.5)}
.footer .footer-col a:focus-visible{outline:2px solid #e4b454;outline-offset:3px;border-radius:1px}

.footer .footer-bottom{
 margin-top:54px;padding-top:20px;border-top:1px solid rgba(251,247,239,.18);
 display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
 font-size:12px;color:rgba(251,247,239,.72)}
/* was .wrap.footer-legal with margin:0 auto 0 0, which cancelled .wrap's own
   centring and threw the line to x:0, outside the container. It is now a child
   of .wrap, so the grid holds it and max-width only sets the measure. */
.footer .footer-legal{
 font-size:12px;line-height:1.65;color:rgba(251,247,239,.62);
 padding:16px 0 0;max-width:92ch;margin:0}

@media(max-width:900px){
 .footer .footer-main{grid-template-columns:1fr 1fr;gap:38px 32px;padding-top:48px}
 .footer .footer-brand{grid-column:1/-1}
}
@media(max-width:560px){
 .footer .footer-main{grid-template-columns:1fr;gap:32px}
 .footer .footer-bottom{flex-direction:column;gap:8px}
}

/* ══════════════════════════════════════════════════════════════════
   AA on the re-toned grounds
   Card three moved from ochre to coral and card four from sand to
   ochre, which pulled two secondary greys under 4.5:1 (coral 4.27,
   ochre 4.45). The rail labels failed the same way, worst on coral at
   3.71. Ink at 0.68 alpha is the mathematical floor across all four
   brand grounds; 0.76 is used so nothing sits on the line, and both
   still read as clearly secondary to the ink around them.
   Measured after: mint 7.1 · rose 6.7 · coral 5.5 · ochre 5.9.
   ══════════════════════════════════════════════════════════════════ */
.svc-card .svc-card-kicker{color:rgba(17,19,17,.76)}
.rail a span{color:rgba(17,19,17,.76)}

/* ══════════════════════════════════════════════════════════════════
   Honeypot field. This was positioned with an inline style attribute,
   which style-src 'self' blocks — CSP hashes do not cover style
   attributes without 'unsafe-hashes' — so hardening the policy left
   the field visible in the form. It belongs in the stylesheet.
   ══════════════════════════════════════════════════════════════════ */
.hp-field{position:absolute !important;left:-9999px !important;
 width:1px !important;height:1px !important;overflow:hidden !important;
 opacity:0 !important;pointer-events:none !important}
/* noscript fallback — also moved out of style attributes so it survives
   style-src 'self' and actually renders styled when JS is unavailable */
.ns-bar{padding:12px 18px;margin:0;background:#111311;color:#fbf7ef;
 font:14px/1.5 Arial,Helvetica,sans-serif;text-align:center}
.ns-link{color:inherit;text-decoration:underline}

/* enquiry form status line */
.form-status{margin:14px 0 0;font-size:14px;line-height:1.5;color:#3D382F;min-height:1px}
.form-status.is-error{color:#8E2C14;font-weight:500}
.form-status a{color:inherit}

/* Turnstile sits above the submit button when a site key is configured. */
.turnstile-slot{margin:0 0 18px;min-height:0}
.turnstile-slot:empty{display:none}

/* ---------- service card actions ----------
   The card's primary action is now the enquiry form with the service already
   selected, rather than a page load. Sending a ready buyer to another page to
   go and find a form costs a step, and the step is where they leave.

   The detail link stays as the secondary action for two reasons: it is the
   strongest internal link those four pages get, and a headteacher committing
   two to three thousand a year often wants to read before they enquire. */
.svc-card-actions{align-self:stretch;margin-top:20px;display:flex;align-items:center;
  gap:10px 18px;flex-wrap:wrap}
.svc-card-actions .svc-card-link{align-self:auto;margin-top:0;margin-left:auto}
.svc-card-cta{background:var(--ink);border-color:var(--ink);color:var(--paper);
  padding:12px 18px;min-height:42px}
.svc-card-cta:hover{background:#000;border-color:#000}
.svc-card-cta .arrow{transition:transform .18s ease}
.svc-card-cta:hover .arrow{transform:translateX(3px)}
@media(max-width:560px){
  .svc-card-actions{gap:12px}
  .svc-card-actions .svc-card-link{margin-left:0}
  .svc-card-cta{width:100%}
}
@media(prefers-reduced-motion:reduce){.svc-card-cta .arrow{transition:none}}

/* .field is a grid, so a field with a hint under it makes its whole row taller
   and the neighbouring field stretches its label and control to fill. That put
   the Support needed select 19px below the Next important date input once the
   two were paired. Let the rows keep their natural height instead. */
.form-grid .field{align-content:start}

/* Urgent-date branch on the enquiry form. Sits in the .field grid under the
   date hint. Needs !important on the size because .field-hint already carries
   one, and this has to read as a prompt rather than as fine print. */
.urgent-hint{margin:2px 0 0;font-size:12.5px!important;line-height:1.5;color:var(--ink);border-left:2px solid #a07100;padding-left:10px}
.urgent-hint a{color:inherit;text-underline-offset:2px}


/* ---------- priority service panel ----------
   Sits with the fifth panel rather than against it: identical skeleton,
   padding and type scale, so it belongs to the set. The only difference is
   the ground. Contrast is the whole argument — an urgent route has to be
   findable at a glance without being bigger than the services beside it.
   The three steps carry the real weight, because the barrier to paying a
   supplier found ten minutes ago is not price, it is not knowing what
   happens next. Showing the mechanism beats promising about it. */
.svc-urgent{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
 gap:0 30px;align-items:center;margin-top:14px;padding:28px 32px;
 border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.su-mark{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:34px}
.su-mark span{display:block;height:15px;border-radius:2px}
.su-mark span:nth-child(1){background:var(--mint)}
.su-mark span:nth-child(2){background:var(--rose)}
.su-mark span:nth-child(3){background:var(--ochre)}
.su-mark span:nth-child(4){background:var(--coral)}
.su-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.14em;
 text-transform:uppercase;color:var(--ink);background:var(--ochre);padding:3px 7px;border-radius:2px}
.su-kicker{color:rgba(245,239,229,.58);margin:11px 0 0}
.svc-urgent h3{font-size:clamp(24px,2.2vw,30px);line-height:1;margin:9px 0 0}
.svc-urgent p{font-size:13.5px;line-height:1.6;color:rgba(245,239,229,.82);margin:10px 0 0;max-width:64ch}
.su-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:18px 0 0}
.su-cta{background:var(--ochre);border-color:var(--ochre);color:var(--ink);
 padding:12px 18px;min-height:42px;white-space:nowrap}
.su-cta:hover{background:#eebf62;border-color:#eebf62}
.su-micro{font-size:11px;color:rgba(245,239,229,.5)}
.su-steps{list-style:none;margin:0;padding:0 0 0 30px;min-width:214px;
 border-left:1px solid rgba(245,239,229,.2)}
.su-steps li{display:flex;align-items:center;gap:13px;padding:9px 0}
.su-steps li+li{border-top:1px solid rgba(245,239,229,.13)}
.su-steps b{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:900;
 color:var(--ochre);font-size:19px;line-height:1;min-width:22px}
.su-steps span{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 color:rgba(245,239,229,.9)}
@media(max-width:900px){
 .svc-urgent{grid-template-columns:1fr;gap:18px;padding:24px 22px}
 .su-steps{border-left:0;border-top:1px solid rgba(245,239,229,.2);padding:8px 0 0;min-width:0}
}