:root{
  --deep-pine:#16261D;
  --pine:#1F3529;
  --sage:#93A87B;
  --ink:#20241F;
  --slate:#56604E;
  --paper:#F5F7F0;
  --paper-rgb:245, 247, 240;
  --pine-rgb:31, 53, 41;
  --sage-rgb:147, 168, 123;
  --font-display:'GFS Didot', Didot, 'Bodoni 72', 'Playfair Display', Georgia, serif;
  --font-body:Georgia, 'Times New Roman', serif;
  --base:17px;
  --lh:1.65;
  --tracking:0.18em;
  --max:1120px;
  --reading:1120px;
  --space:96px;
  --radius:2px;
  --rule:1px;
  --logo:68px;
  --step-0:1rem;
  --step-1:1.250rem;
  --step-2:1.563rem;
  --step-3:1.953rem;
  --step-4:2.441rem;
  --step-5:3.052rem;
}
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none!important;}
html{font-size:var(--base);-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:var(--lh);font-size:1rem;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--pine);text-underline-offset:.18em;text-decoration-thickness:1px;}
a:hover{color:var(--deep-pine);}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;color:var(--ink);letter-spacing:-0.012em;margin:0 0 .6em;line-height:1.14;}
h1{font-size:clamp(2.1rem,1.35rem + 2.6vw,var(--step-4));}
h2{font-size:clamp(1.65rem,1.2rem + 1.6vw,var(--step-3));}
h3{font-size:var(--step-1);line-height:1.25;}
h4{font-size:var(--step-0);}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
strong{font-weight:700;}
hr{border:0;border-top:var(--rule) solid var(--sage);margin:2rem 0;}
::selection{background:rgba(var(--sage-rgb),.34);}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);}
.reading{max-width:var(--reading);}
.section{padding:calc(var(--space) * .78) 0;}
.section + .section{padding-top:0;}
.section--tight{padding-top:calc(var(--space) * .38);padding-bottom:calc(var(--space) * .38);}
.section--roomy{padding-top:calc(var(--space) * 1.15);padding-bottom:calc(var(--space) * 1.15);}
.section--dark{background:var(--deep-pine);color:var(--paper);padding:var(--space) 0;margin-top:calc(var(--space) * .78);}
.section--dark + .section{padding-top:calc(var(--space) * .78);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--paper);}
.section--dark a{color:var(--paper);}

.eyebrow{font-family:var(--font-body);font-size:.72rem;letter-spacing:var(--tracking);text-transform:uppercase;color:var(--slate);margin:0 0 1.1rem;display:block;}
.section--dark .eyebrow{color:var(--sage);}
.rule{border:0;border-top:var(--rule) solid var(--sage);width:100%;margin:0 0 1.6rem;}
.lede{font-size:var(--step-1);line-height:1.45;color:var(--ink);max-width:var(--reading);}
.muted{color:var(--slate);}

/* Header */
.site-header{background:var(--paper);border-bottom:1px solid rgba(var(--pine-rgb),.12);}
.site-header--flush{border-bottom:0;}
.site-header--sticky{position:sticky;top:0;z-index:60;backdrop-filter:saturate(180%) blur(6px);background:rgba(var(--paper-rgb),.94);}
.site-header--pine{background:var(--deep-pine);border-bottom-color:rgba(var(--sage-rgb),.25);}
.site-header--pine .nav a{color:var(--paper);}
.site-header--pine .nav a:hover,.site-header--pine .nav a[aria-current="page"]{color:var(--sage);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:calc(var(--logo,68px) + 38px);}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;padding:.35rem 0;}
.brand img{height:var(--logo,68px);width:auto;}
.brand .brand-name{font-family:var(--font-display);font-size:1.15rem;color:var(--ink);}
.nav{display:flex;align-items:center;gap:1.6rem;}
.nav a{font-size:.86rem;color:var(--slate);text-decoration:none;letter-spacing:.01em;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--pine);}
.nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--sage);}
.nav-toggle{display:none;background:none;border:1px solid rgba(var(--pine-rgb),.25);border-radius:var(--radius);padding:.5rem .7rem;font-family:var(--font-body);font-size:.8rem;letter-spacing:var(--tracking);text-transform:uppercase;color:var(--pine);cursor:pointer;}
/* A menu item with children. Six services will not fit across a header, and
   showing two of them is worse than showing none — the visitor who came for
   one of the missing four concludes it is not offered. */
.nav-group{position:relative;}
.nav-group-top{display:flex;align-items:center;gap:.4rem;background:none;border:0;padding:0;font-family:var(--font-body);font-size:.86rem;color:var(--slate);letter-spacing:.01em;cursor:pointer;}
.nav-group.is-here .nav-group-top,.nav-group:hover .nav-group-top,.nav-group-top:focus-visible{color:var(--pine);}
.nav-group.is-here .nav-group-top{box-shadow:inset 0 -1px 0 var(--sage);}
.nav-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.75;}
.nav-sub{position:absolute;top:calc(100% + .5rem);left:-1rem;min-width:16rem;display:flex;flex-direction:column;gap:0;background:var(--paper);border:1px solid rgba(var(--pine-rgb),.14);border-radius:var(--radius);padding:.4rem 0;box-shadow:0 16px 40px rgba(var(--pine-rgb),.14);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .13s ease,transform .13s ease,visibility .13s;z-index:40;}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub{opacity:1;visibility:visible;transform:none;}
.nav-sub a{padding:.5rem 1.15rem;white-space:nowrap;}
.nav-sub a:hover{background:rgba(var(--sage-rgb),.16);color:var(--pine);}
.nav-sub a[aria-current="page"]{box-shadow:none;color:var(--pine);background:rgba(var(--sage-rgb),.16);}
.nav-sub-all{font-weight:600;border-bottom:1px solid rgba(var(--pine-rgb),.1);margin-bottom:.3rem;padding-bottom:.6rem;}
.site-header--pine .nav-group-top{color:var(--paper);}
.site-header--pine .nav-group.is-here .nav-group-top,.site-header--pine .nav-group:hover .nav-group-top{color:var(--sage);}

/* Buttons */
.btn{display:inline-block;font-family:var(--font-body);font-size:.86rem;letter-spacing:.02em;padding:.85rem 1.5rem;border-radius:var(--radius);text-decoration:none;border:1px solid var(--pine);background:var(--pine);color:var(--paper);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.btn:hover{background:var(--deep-pine);border-color:var(--deep-pine);color:var(--paper);}
.btn--ghost{background:transparent;color:var(--pine);}
.btn--ghost:hover{background:rgba(var(--pine-rgb),.06);color:var(--pine);}
.section--dark .btn{background:var(--paper);color:var(--pine);border-color:var(--paper);}
.section--dark .btn:hover{background:var(--sage);border-color:var(--sage);color:var(--deep-pine);}
.section--dark .btn--ghost{background:transparent;color:var(--paper);border-color:rgba(var(--paper-rgb),.5);}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem;}
.link-arrow{font-size:.82rem;letter-spacing:.02em;text-decoration:none;color:var(--pine);border-bottom:1px solid var(--sage);padding-bottom:2px;}
.link-arrow:hover{border-bottom-color:var(--pine);}

/* Hero */
.hero{padding:calc(var(--space) * .95) 0 calc(var(--space) * .7);}
.hero--pine{background:var(--deep-pine);color:var(--paper);}
.hero--pine h1,.hero--pine .lede{color:var(--paper);}
.hero--pine .eyebrow{color:var(--sage);}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;}
.hero-grid.has-media{grid-template-columns:1.15fr .85fr;}
.hero h1{max-width:16ch;}

/* Grids */
.grid{display:grid;gap:2.2rem;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.card{padding-top:1.4rem;border-top:var(--rule) solid var(--sage);}
.card h3{margin-bottom:.5rem;}
.card p{color:var(--slate);font-size:.94rem;}
.card .link-arrow{display:inline-block;margin-top:.9rem;}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.split--left .split-media{order:-1;}
.split-media img{border-radius:var(--radius);}
.split-media--empty{aspect-ratio:4/3;background:var(--deep-pine);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;}
.split-media--empty img{height:38%;width:auto;opacity:.95;}

/* Steps */
.steps{counter-reset:step;display:grid;gap:0;}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:1.6rem 0;border-top:1px solid rgba(var(--pine-rgb),.14);}
.step:last-child{border-bottom:1px solid rgba(var(--pine-rgb),.14);}
.step-num{counter-increment:step;font-family:var(--font-display);font-size:1.05rem;color:var(--sage);min-width:2.2rem;}
.step-num::before{content:counter(step,decimal-leading-zero);}
.step h3{font-size:var(--step-0);margin-bottom:.35rem;}
.step p{color:var(--slate);margin:0;font-size:.94rem;}

/* Checklist */
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2.4rem;}
.check{padding-left:1.6rem;position:relative;}
.check::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--sage);}
.check h3{font-size:var(--step-0);margin-bottom:.3rem;}
.check p{color:var(--slate);font-size:.92rem;margin:0;}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;}
.stat .stat-value{font-family:var(--font-display);font-size:var(--step-3);color:var(--pine);display:block;line-height:1.05;}
.section--dark .stat .stat-value{color:var(--sage);}
.stat .stat-label{font-size:.85rem;color:var(--slate);display:block;margin-top:.5rem;}
.section--dark .stat .stat-label{color:rgba(var(--paper-rgb),.8);}

/* The space a picture is going to fill, before there is one. A drawn
   rectangle rather than a stock photograph: nothing to fetch, and nothing
   that could be published by accident. */
.image-placeholder{display:flex;align-items:center;justify-content:center;width:100%;border:1px dashed rgba(var(--pine-rgb),.3);border-radius:var(--radius);background:rgba(var(--pine-rgb),.045);color:var(--slate);}
.image-placeholder span{font-size:.82rem;letter-spacing:var(--tracking);text-transform:uppercase;padding:1rem;text-align:center;}
.section--dark .image-placeholder{border-color:rgba(var(--paper-rgb),.35);background:rgba(var(--paper-rgb),.06);color:rgba(var(--paper-rgb),.75);}

/* Moving diagrams
   ----------------
   Every animation runs from the "before" state to the "after", and the rules
   below with no animation applied ARE the after. So reduced motion, a browser
   that will not animate, and a diagram waiting off-screen all show the drawing
   at its conclusion — a still picture that still says something — rather than
   a frozen middle nobody can read.

   Each loop is twelve seconds: the change happens in the first five and the
   resolved picture is held for the remaining seven, because that is the frame
   a visitor is most likely to be looking at.

   Colours are four properties rather than six palette variables, so the whole
   set inverts on the dark ground without a second copy of any drawing. */
.diagram{
  --dg-line:var(--pine);
  --dg-soft:rgba(var(--pine-rgb),.12);
  --dg-text:var(--slate);
  --dg-accent:var(--sage);
  --dg-on:var(--paper);
  margin:0;
}
.section--dark .diagram{
  --dg-line:rgba(var(--paper-rgb),.86);
  --dg-soft:rgba(var(--paper-rgb),.13);
  --dg-text:rgba(var(--paper-rgb),.74);
  --dg-accent:var(--sage);
  --dg-on:var(--deep-pine);
}
.diagram figcaption{margin-top:1.6rem;font-size:.88rem;color:var(--dg-text);max-width:var(--reading);}
.dg{display:block;width:100%;height:auto;}
.dg text{font-family:var(--font-body);}
.dg-cap{font-size:12px;letter-spacing:var(--tracking);text-transform:uppercase;fill:var(--dg-text);}
.dg-tiny{font-size:13px;fill:var(--dg-text);}
.dg-tiny--muted{opacity:.7;}
.dg-tiny--accent{fill:var(--dg-accent);}
.dg-track{fill:var(--dg-soft);}
.dg-axis{stroke:var(--dg-soft);stroke-width:1.5;}
/* The closing line of each drawing, which arrives once the rest has settled. */
.dg-late{opacity:1;animation:dg-late 12s infinite;}
@keyframes dg-late{0%,44%{opacity:0}56%,100%{opacity:1}}

/* A diagram scrolled out of sight is paused by public/site/site.js, which
   also means each is met at its beginning rather than halfway through a
   cycle nobody saw start. */
.dg-paused,.dg-paused *{animation-play-state:paused!important;}

/* 1. Revenue leakage — the leak, and the seal */
.dg-solid{fill:var(--dg-line);}
.dg-gap{fill:var(--dg-on);opacity:0;animation:dg-gap 12s calc(var(--i) * .24s) infinite;}
.dg-seal{fill:none;stroke:var(--dg-accent);stroke-width:2;opacity:1;animation:dg-seal 12s calc(var(--i) * .24s) infinite;}
.dg-drops{opacity:0;animation:dg-drops 12s infinite;}
.dg-drop{fill:var(--dg-accent);opacity:0;animation:dg-drop 2s calc(var(--i) * .22s) infinite;}
.dg-drop--b{animation-delay:calc(var(--i) * .22s + 1s);}
.dg-sweep rect{fill:var(--dg-accent);}
.dg-sweep{opacity:0;animation:dg-sweep 12s infinite;}
.dg-fill{fill:var(--dg-accent);transform-origin:40px 165px;animation:dg-fill 12s infinite;}
@keyframes dg-gap{0%,31%{opacity:1}34%,100%{opacity:0}}
@keyframes dg-seal{0%,32%{opacity:0}38%,100%{opacity:1}}
@keyframes dg-drops{0%,30%{opacity:1}38%,100%{opacity:0}}
@keyframes dg-drop{0%{transform:translateY(0);opacity:0}14%{opacity:.95}72%,100%{transform:translateY(78px);opacity:0}}
@keyframes dg-sweep{0%,30%{transform:translateX(0);opacity:0}32%{opacity:1}44%{transform:translateX(560px);opacity:1}50%,100%{transform:translateX(560px);opacity:0}}
@keyframes dg-fill{0%,30%{transform:scaleX(.5)}48%,100%{transform:scaleX(1)}}

/* 2. Fractional sales director — the days, and the pipeline */
.dg-day rect{fill:var(--dg-soft);}
.dg-day text{fill:var(--dg-text);}
.dg-day--on rect{fill:var(--dg-accent);animation:dg-day 12s calc(var(--i) * .35s) infinite;}
.dg-day--on text{fill:var(--dg-on);}
.dg-scribble{fill:none;stroke:var(--dg-line);stroke-width:2;opacity:0;animation:dg-scribble 12s infinite;}
.dg-rung rect{fill:var(--dg-line);transform-origin:320px center;}
.dg-rung text{fill:var(--dg-on);}
.dg-rung{animation:dg-rung 12s calc(1.4s + var(--i) * .4s) infinite;}
.section--dark .dg-rung rect{fill:var(--dg-accent);}
@keyframes dg-day{0%,10%{fill:var(--dg-soft)}22%,100%{fill:var(--dg-accent)}}
@keyframes dg-scribble{0%,12%{opacity:.5}30%,100%{opacity:0}}
@keyframes dg-rung{0%,12%{opacity:0;transform:scaleX(.18)}34%,100%{opacity:1;transform:scaleX(1)}}

/* 3. Revenue operations — a forecast you can believe */
.dg-target{fill:none;stroke:var(--dg-text);stroke-width:1.5;stroke-dasharray:5 6;opacity:.7;}
.dg-wander{fill:none;stroke:var(--dg-line);stroke-width:2;opacity:0;animation:dg-wander 12s infinite;}
.dg-true{fill:none;stroke:var(--dg-accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:0;animation:dg-draw 12s infinite;}
.dg-chip rect{fill:none;stroke:var(--dg-accent);stroke-width:1.5;}
.dg-chip text{fill:var(--dg-accent);}
.dg-chip{opacity:1;animation:dg-chip 12s calc(var(--i) * .45s) infinite;}
@keyframes dg-wander{0%,18%{opacity:.85}34%,100%{opacity:0}}
@keyframes dg-draw{0%,22%{stroke-dashoffset:600}48%,100%{stroke-dashoffset:0}}
@keyframes dg-chip{0%,10%{opacity:.22}24%,100%{opacity:1}}

/* 4. GTM consultancy — narrowing the field, then the route */
.dg-far{fill:var(--dg-line);opacity:.14;animation:dg-far 12s infinite;}
.dg-near{fill:var(--dg-accent);opacity:1;animation:dg-near 12s calc(var(--i) * .08s) infinite;}
.dg-ring{fill:none;stroke:var(--dg-accent);stroke-width:1.5;stroke-dasharray:4 7;opacity:.85;animation:dg-ring 12s infinite;}
.dg-icp{opacity:1;animation:dg-ring 12s infinite;}
.dg-route{fill:none;stroke:var(--dg-line);stroke-width:2;stroke-dasharray:420;stroke-dashoffset:0;animation:dg-route 12s infinite;}
.dg-stop circle{fill:var(--dg-line);}
.dg-stop{opacity:1;animation:dg-stop 12s calc(3.5s + var(--i) * .45s) infinite;}
@keyframes dg-far{0%,12%{opacity:.55}28%,100%{opacity:.14}}
@keyframes dg-near{0%,10%{opacity:.3}26%,100%{opacity:1}}
@keyframes dg-ring{0%,16%{opacity:0}30%,100%{opacity:.85}}
@keyframes dg-route{0%,28%{stroke-dashoffset:420}50%,100%{stroke-dashoffset:0}}
@keyframes dg-stop{0%,2%{opacity:0}10%,100%{opacity:1}}

/* 5. GTM tech stack — rationalise, then connect */
.dg-retire rect{fill:none;stroke:var(--dg-line);stroke-width:1.5;stroke-dasharray:3 4;}
.dg-retire text{fill:var(--dg-text);}
.dg-retire{opacity:.32;animation:dg-retire 12s calc(var(--i) * .1s) infinite;}
.dg-keep rect{fill:var(--dg-line);}
.dg-keep text{fill:var(--dg-on);}
.section--dark .dg-keep rect{fill:var(--dg-accent);}
.dg-wire{fill:none;stroke:var(--dg-line);stroke-width:2;stroke-dasharray:24;stroke-dashoffset:0;animation:dg-wire 12s infinite;}
.dg-flow{fill:none;stroke:var(--dg-accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:4 20;animation:dg-flow 1.4s linear infinite,dg-late 12s infinite;}
@keyframes dg-retire{0%,18%{opacity:1}36%,100%{opacity:.32}}
@keyframes dg-wire{0%,30%{stroke-dashoffset:24}48%,100%{stroke-dashoffset:0}}
@keyframes dg-flow{to{stroke-dashoffset:-24}}

/* 6. Non-executive director — the independent seat */
.dg-table{fill:var(--dg-soft);}
.dg-seat{fill:var(--dg-line);}
.dg-seat--ind{fill:var(--dg-accent);}
.dg-arrive{animation:dg-arrive 12s infinite;}
.dg-indlabel{opacity:1;animation:dg-indlabel 12s infinite;}
.dg-challenge{fill:none;stroke:var(--dg-accent);stroke-width:2;stroke-dasharray:180;stroke-dashoffset:0;animation:dg-challenge 12s infinite;}
.dg-marker .dg-bar{fill:var(--dg-accent);transform-origin:452px center;animation:dg-marker 12s calc(var(--i) * .35s) infinite;}
@keyframes dg-arrive{0%,10%{transform:translateY(120px);opacity:0}16%{opacity:1}30%,100%{transform:translateY(0);opacity:1}}
@keyframes dg-indlabel{0%,26%{opacity:0}38%,100%{opacity:1}}
@keyframes dg-challenge{0%,32%{stroke-dashoffset:180}50%,100%{stroke-dashoffset:0}}
@keyframes dg-marker{0%,40%{transform:scaleX(.16)}62%,100%{transform:scaleX(1)}}

/* 7. Revenue operations — the operating rhythm */
.dg-loop{fill:none;stroke:var(--dg-line);stroke-width:2;stroke-dasharray:380;stroke-dashoffset:0;animation:dg-loopdraw 12s infinite;}
.dg-return{fill:none;stroke:var(--dg-accent);stroke-width:2;stroke-dasharray:6 8;opacity:1;animation:dg-late 12s infinite;}
.dg-beat circle{fill:none;stroke:var(--dg-accent);stroke-width:2;}
.dg-beat-when{fill:var(--dg-accent);}
.dg-beat{opacity:1;animation:dg-beat 12s calc(var(--i) * .5s) infinite;}
@keyframes dg-loopdraw{0%,16%{stroke-dashoffset:380}44%,100%{stroke-dashoffset:0}}
@keyframes dg-beat{0%,6%{opacity:.15}22%,100%{opacity:1}}

/* 8. Home — six services, one thing they are for */
.dg-spoke rect{fill:var(--dg-line);}
.dg-spoke text{fill:var(--dg-on);}
.section--dark .dg-spoke rect{fill:var(--dg-accent);}
.dg-feed{fill:none;stroke:var(--dg-line);stroke-width:1.5;opacity:.5;stroke-dasharray:200;stroke-dashoffset:0;animation:dg-feed 12s calc(var(--i) * .28s) infinite;}
.dg-spoke{opacity:1;animation:dg-spoke 12s calc(var(--i) * .22s) infinite;}
.dg-outcome circle{fill:none;stroke:var(--dg-accent);stroke-width:2;stroke-dasharray:5 7;}
.dg-outcome-a{fill:var(--dg-accent);}
.dg-outcome{opacity:1;animation:dg-late 12s infinite;}
@keyframes dg-spoke{0%,4%{opacity:0;transform:translateX(-14px)}20%,100%{opacity:1;transform:none}}
@keyframes dg-feed{0%,22%{stroke-dashoffset:200}52%,100%{stroke-dashoffset:0}}

/* 9. About — the record behind the advice */
.dg-spine{stroke:var(--dg-soft);stroke-width:3;}
.dg-spine-fill{fill:none;stroke:var(--dg-accent);stroke-width:3;stroke-dasharray:560;stroke-dashoffset:0;animation:dg-spinedraw 12s infinite;}
.dg-stage circle{fill:var(--dg-line);}
.dg-stage{opacity:1;animation:dg-stage 12s calc(var(--i) * .5s) infinite;}
@keyframes dg-spinedraw{0%,8%{stroke-dashoffset:560}52%,100%{stroke-dashoffset:0}}
@keyframes dg-stage{0%,6%{opacity:0}20%,100%{opacity:1}}

/* 10. Contact — what happens after you write */
.dg-thread{fill:none;stroke:var(--dg-line);stroke-width:2;stroke-dasharray:480;stroke-dashoffset:0;animation:dg-thread 12s infinite;}
.dg-hop circle{fill:var(--dg-accent);}
.dg-hop-n{fill:var(--dg-on);font-weight:600;}
.dg-hop{opacity:1;animation:dg-stage 12s calc(var(--i) * .55s) infinite;}
@keyframes dg-thread{0%,10%{stroke-dashoffset:480}54%,100%{stroke-dashoffset:0}}

/* 11. Book a meeting — what is in the half hour */
.dg-slice rect{fill:var(--dg-accent);transform-origin:40px 75px;}
.dg-slice text{fill:var(--dg-text);}
.dg-slice{animation:dg-slice 12s calc(var(--i) * .45s) infinite;}
@keyframes dg-slice{0%,8%{opacity:0;transform:scaleX(.05)}30%,100%{opacity:1;transform:scaleX(1)}}

/* A diagram scales with the width of the page, so its type shrinks with it.
   These steps scale the type back up in user units, which keeps a label at
   roughly the same size on the screen from a desktop down to a phone. Every
   label is sized to fit its shape at the largest of them. */
@media (max-width:900px){
  .dg text{font-size:17px;}
  .dg-cap{font-size:16px;}
}
@media (max-width:640px){
  .dg text{font-size:24px;}
  .dg-cap{font-size:22px;}
  /* The drawings with many boxed labels have less room than the rest: a
     step down for each keeps every label inside its box in the wide serif
     a phone actually renders. Measured, not guessed — the audit in the
     self-test holds these to their boxes at this exact size. */
  .dg--services text{font-size:20px;}
  .dg--revops text{font-size:20px;}
  .dg--stack text{font-size:18px;}
}

/* Asked for stillness, given the finished picture rather than a frozen frame. */
@media (prefers-reduced-motion:reduce){
  .dg,.dg *{animation:none!important;}
}

/* Quote */
.quote{max-width:760px;margin:0 auto;text-align:center;}
.quote blockquote{margin:0;font-family:var(--font-display);font-size:var(--step-2);line-height:1.3;color:var(--ink);}
.quote .attribution{margin-top:1.6rem;font-size:.78rem;letter-spacing:var(--tracking);text-transform:uppercase;color:var(--slate);}

/* FAQ */
.faq{border-top:1px solid rgba(var(--pine-rgb),.14);}
.faq details{border-bottom:1px solid rgba(var(--pine-rgb),.14);}
.faq summary{cursor:pointer;padding:1.25rem 2rem 1.25rem 0;font-family:var(--font-display);font-size:var(--step-1);position:relative;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:1.1rem;color:var(--sage);font-family:var(--font-body);font-size:1.3rem;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq .answer{padding:0 0 1.4rem;color:var(--slate);max-width:var(--reading);}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field--full{grid-column:1 / -1;}
label{font-size:.76rem;letter-spacing:var(--tracking);text-transform:uppercase;color:var(--slate);}
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:#fff;border:1px solid rgba(var(--pine-rgb),.25);border-radius:var(--radius);padding:.75rem .85rem;width:100%;}
textarea{min-height:150px;resize:vertical;}
input:focus,select:focus,textarea:focus{border-color:var(--pine);outline:none;box-shadow:0 0 0 3px rgba(var(--sage-rgb),.3);}
.form-note{font-size:.82rem;color:var(--slate);}
.contact-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.contact-aside{border-top:var(--rule) solid var(--sage);padding-top:1.4rem;}
.contact-aside p{font-size:.92rem;color:var(--slate);}
.alert{padding:1rem 1.15rem;border-radius:var(--radius);margin-bottom:1.5rem;font-size:.92rem;}
.alert--ok{background:rgba(var(--sage-rgb),.22);border:1px solid var(--sage);color:var(--ink);}
.alert--err{background:#fdf1f1;border:1px solid #d9a2a2;color:#7a2020;}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* Consent */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--deep-pine);color:rgba(var(--paper-rgb),.92);border-top:var(--rule) solid var(--sage);box-shadow:0 -6px 24px rgba(22,38,29,.18);}
.consent-inner{display:flex;gap:clamp(1rem,3vw,2.5rem);align-items:center;justify-content:space-between;padding-top:1.1rem;padding-bottom:1.1rem;}
.consent h2{font-size:var(--step-0);color:var(--paper);margin:0 0 .3rem;}
.consent p{font-size:.88rem;margin:0;max-width:68ch;color:rgba(var(--paper-rgb),.82);}
.consent a{color:var(--sage);}
.consent-actions{display:flex;gap:.6rem;flex:none;}
.consent-actions .btn{background:var(--paper);color:var(--pine);border-color:var(--paper);white-space:nowrap;}
.consent-actions .btn:hover{background:var(--sage);border-color:var(--sage);color:var(--deep-pine);}
@media (max-width:760px){
  .consent-inner{flex-direction:column;align-items:flex-start;}
  .consent-actions{width:100%;}
  .consent-actions .btn{flex:1;text-align:center;}
}
@media print{.consent{display:none;}}

/* Footer */
.site-footer{background:var(--deep-pine);color:rgba(var(--paper-rgb),.86);margin-top:calc(var(--space) * .9);padding:calc(var(--space) * .7) 0 2.2rem;font-size:.9rem;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(auto-fit,minmax(160px,1fr));gap:2.5rem;}
.site-footer img.footer-mark{height:56px;width:auto;border-radius:var(--radius);}
.site-footer h4{color:var(--paper);font-family:var(--font-body);font-size:.72rem;letter-spacing:var(--tracking);text-transform:uppercase;margin-bottom:1rem;}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.site-footer a{color:rgba(var(--paper-rgb),.86);text-decoration:none;}
.site-footer a:hover{color:var(--sage);}
.footer-note{max-width:34ch;color:rgba(var(--paper-rgb),.7);margin-top:1.1rem;}
.footer-company{max-width:70ch;margin:2.4rem 0 0;padding-top:1.4rem;border-top:1px solid rgba(var(--sage-rgb),.18);font-size:.78rem;color:rgba(var(--paper-rgb),.55);}
.footer-legal{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(var(--sage-rgb),.28);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.8rem;color:rgba(var(--paper-rgb),.62);}

/* Booking */
.booking{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.booking-panel{border-top:var(--rule) solid var(--sage);padding-top:1.4rem;}
.slot-days{display:grid;gap:1.6rem;}
.slot-day h4{font-family:var(--font-body);font-size:.76rem;letter-spacing:var(--tracking);text-transform:uppercase;color:var(--slate);margin-bottom:.75rem;}
.slot-list{display:flex;flex-wrap:wrap;gap:.5rem;}
.slot{font-family:var(--font-body);font-size:.86rem;padding:.6rem .95rem;border:1px solid rgba(var(--pine-rgb),.28);border-radius:var(--radius);background:#fff;color:var(--ink);cursor:pointer;}
.slot:hover{border-color:var(--pine);}
.slot[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:var(--paper);}
.meeting-types{display:grid;gap:.75rem;margin-bottom:1.5rem;}
.meeting-type{display:block;width:100%;text-align:left;font-family:var(--font-body);border:1px solid rgba(var(--pine-rgb),.2);border-radius:var(--radius);padding:.9rem 1rem;cursor:pointer;background:#fff;}
.meeting-type[aria-pressed="true"]{border-color:var(--pine);box-shadow:inset 3px 0 0 var(--sage);}
.meeting-type strong{display:block;font-family:var(--font-display);font-size:1.02rem;font-weight:400;}
.meeting-type span{font-size:.84rem;color:var(--slate);}
.booking-status{font-size:.88rem;color:var(--slate);}

@media (max-width:900px){
  .hero-grid.has-media,.split,.contact-grid,.booking{grid-template-columns:1fr;}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .split--left .split-media{order:0;}
}
/* The menu folds away well before a phone. Six things in the header will not
   sit on one line much under a laptop, and a navigation that wraps onto two
   rows looks like a mistake rather than a choice. */
@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid rgba(var(--pine-rgb),.15);padding:.5rem clamp(1.25rem,4vw,2.5rem) 1.25rem;box-shadow:0 14px 30px rgba(var(--pine-rgb),.10);}
  .nav.is-open{display:flex;}
  .nav a{padding:.7rem 0;width:100%;border-bottom:1px solid rgba(var(--pine-rgb),.08);}
  .site-header{position:relative;}
  /* Once the header is a button there is nothing to hover with, so the
     submenu stops being one: it is an ordinary list, indented, always open. */
  .nav-group{width:100%;}
  .nav-group-top{width:100%;padding:.7rem 0;border-bottom:1px solid rgba(var(--pine-rgb),.08);justify-content:space-between;}
  .nav-caret{display:none;}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;min-width:0;border:0;border-radius:0;box-shadow:none;padding:0 0 .3rem 1rem;background:transparent;}
  .nav-sub a{padding:.6rem 0;white-space:normal;}
  .nav-sub a:hover,.nav-sub a[aria-current="page"]{background:transparent;}
  .nav-sub-all{border-bottom:1px solid rgba(var(--pine-rgb),.08);margin-bottom:0;}
}
@media (max-width:680px){
  .grid--2,.grid--3,.checklist,.form-grid{grid-template-columns:1fr;}
  .header-inner{min-height:70px;}
  .brand img{height:calc(var(--logo,68px) * .72);}
}
@media print{
  .site-header,.site-footer,.btn-row{display:none;}
  body{background:#fff;}
}

/* The person behind the work */
.person{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;margin-top:2rem;}
.person--nophoto{grid-template-columns:1fr;}
.person-photo img{width:100%;height:auto;border-radius:var(--radius);display:block;}
.person-name{font-family:var(--font-display);font-size:var(--step-2);font-weight:400;margin:0;}
.person-role{font-family:var(--font-body);font-size:.82rem;letter-spacing:var(--tracking);text-transform:uppercase;color:var(--slate);margin:.35rem 0 1.2rem;}
.person-facts{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:1.8rem;border-top:var(--rule) solid var(--sage);padding-top:1.2rem;}
.person-facts li{display:grid;gap:.15rem;}
.person-facts strong{font-family:var(--font-display);font-size:var(--step-1);font-weight:400;}
.person-facts span{font-size:.82rem;color:var(--slate);}
.person-links{margin-top:1.2rem;display:flex;gap:1.2rem;flex-wrap:wrap;}

/* Engagements, as evidence */
.cases{display:grid;gap:1.2rem;margin-top:2rem;}
.case{background:#fff;border:1px solid rgba(var(--pine-rgb),.14);border-radius:var(--radius);padding:clamp(1.3rem,3vw,2rem);border-top:var(--rule) solid var(--sage);}
.case-sector{font-family:var(--font-body);font-size:.78rem;letter-spacing:var(--tracking);text-transform:uppercase;color:var(--slate);margin:0;}
.case-figure{font-family:var(--font-display);font-size:clamp(2rem,5vw,2.9rem);line-height:1;margin:.5rem 0 .2rem;color:var(--pine);}
.case-result{font-family:var(--font-display);font-size:var(--step-1);font-weight:400;margin:0 0 1.1rem;}
.case-part{margin-top:1rem;}
.case-part h4{font-family:var(--font-body);font-size:.76rem;letter-spacing:var(--tracking);text-transform:uppercase;color:var(--slate);margin:0 0 .35rem;}
.case-part p{margin:0;font-size:.94rem;}
.case-quote{margin:1.3rem 0 0;padding-left:1rem;border-left:2px solid var(--sage);font-style:italic;color:var(--slate);}
.case-quote cite{display:block;font-style:normal;font-size:.82rem;margin-top:.4rem;}
.cases-note{margin-top:1.4rem;font-size:.86rem;color:var(--slate);max-width:60ch;}
@media (min-width:900px){.cases{grid-template-columns:repeat(3,1fr);}}

/* The self-check */
.assess{margin-top:2rem;max-width:52rem;}
.assess-questions{display:grid;gap:1rem;}
.q{border:1px solid rgba(var(--pine-rgb),.14);border-radius:var(--radius);padding:1.1rem 1.2rem;margin:0;background:#fff;transition:border-color .15s;}
.q.is-done{border-color:rgba(var(--sage-rgb),.85);}
.q.is-missing{border-color:#b4463a;}
.q legend{font-family:var(--font-display);font-size:1.06rem;padding:0;display:flex;gap:.7rem;align-items:baseline;}
.q-num{font-family:var(--font-body);font-size:.76rem;color:var(--slate);flex:none;}
.q-opt{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem 0 .5rem 1.9rem;cursor:pointer;font-size:.94rem;}
.q-opt input{margin-top:.22rem;flex:none;accent-color:var(--pine);}
.assess-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem;flex-wrap:wrap;}
.assess-progress{margin:0;font-size:.86rem;color:var(--slate);}
.assess-result{margin-top:2rem;max-width:52rem;}
.assess-band{font-family:var(--font-display);font-size:var(--step-2);margin:0 0 .8rem;color:var(--pine);}
.assess-verdict p{margin:0 0 1rem;}
.assess-capture{margin-top:1.8rem;padding-top:1.5rem;border-top:var(--rule) solid var(--sage);}
.assess-capture-ask{font-family:var(--font-display);font-size:1.1rem;margin:0 0 .9rem;}
.assess-capture-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.assess-capture-row input{flex:1 1 12rem;padding:.7rem .8rem;font:inherit;font-size:.94rem;border:1px solid rgba(var(--pine-rgb),.2);border-radius:var(--radius);background:var(--paper);}
.assess-capture-row .btn{flex:none;}
.assess-note{font-size:.84rem;color:var(--slate);margin:.8rem 0 0;}
.assess-said{font-size:.88rem;margin:.6rem 0 0;color:var(--slate);}
.assess-done{font-family:var(--font-display);font-size:1.1rem;margin:0;}
@media (max-width:600px){
  .person{grid-template-columns:1fr;}
  .person-photo{max-width:220px;}
  .assess-capture-row .btn{width:100%;}
}