:root{
--ink:#1c1c1c;--ink-900:#121513;--ink-800:#1e2320;
--paper:#ffffff;--paper-2:#F4F6F3;--paper-3:#EDF0EB;
--line:#E2E6E0;--line-dark:#333a35;--line-900:#2b332e;
--muted:#5A645D;--muted-dark:#A9B3AC;
--green:#00B889;--green-ink:#00694F;--green-soft:#E4F7F0;
--amber:#FFD34E;--gold:#FFD34E;--berry:#B5476B;--sky:#3E7FD4;--violet:#7B57B8;
--fd:'Poppins',system-ui,sans-serif;--fb:'Raleway',system-ui,sans-serif;--fm:'Poppins',system-ui,sans-serif;
--r-lg:26px;--r:18px;--r-sm:12px;
--gut:clamp(20px,4vw,40px);--maxw:1240px;
/* v7: two spacings (between bands, inside a band) and the symbol as a masked glyph */
--sp:clamp(40px,4.8vw,70px);--sp-in:clamp(28px,3.4vw,48px);
/* the angled band foot: depth, and the apex it points from */
--cut:clamp(48px,7.5vw,140px);--cut-x:50%;
--glyph:url(/assets/ec-symbol-white.png);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);font-size:17px;line-height:1.7;color:var(--ink);background:var(--paper);
-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;line-height:1.14;letter-spacing:-.02em}
h1{font-weight:500;font-size:clamp(2.4rem,4.4vw,3.9rem);letter-spacing:-.035em;line-height:1.05;
overflow-wrap:break-word}
h2{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.1;letter-spacing:-.03em}
h3{font-size:1.15rem}
p{max-width:62ch}
strong,b{font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap-tight{max-width:880px;margin:0 auto;padding:0 var(--gut)}
section{padding:clamp(58px,8vw,116px) 0}
.sec-tight{padding:clamp(40px,5vw,64px) 0}

/* the eyebrow register: Poppins 600 caps, green dot, sitting in a soft pill */
/* the eyebrow lost its green pill (Theo: "this ugly green card"). It was the most
   repeated element on the site and the most AI-default looking thing on it. Now it
   is a plain marked label: the dot carries the brand, the type does the rest. */
.marker{display:block;width:38px;height:25px;margin-bottom:26px;border-radius:0;
background:var(--green);font-size:0;color:transparent;overflow:hidden;
-webkit-mask:var(--glyph) center/contain no-repeat;mask:var(--glyph) center/contain no-repeat}
.marker.on-dark,.band.t-dark .marker,.b-dark .marker,.b-gm .marker{background:#fff}
.marker:empty,.b-svc-chips:empty,.b-hero-note:empty{display:none}
.mono{font-family:var(--fm);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.lede{font-size:clamp(1.05rem,1.4vw,1.18rem);color:var(--muted);line-height:1.62}
.lede-dark{color:var(--muted-dark)}
.rule{height:1px;background:var(--line);border:0}

/* buttons: pills. Ink fill with white text is the primary (17:1). Brand green keeps
   an INK label because white on #00B889 is 2.5:1 and stays banned. */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:600;
font-size:1rem;padding:18px 32px;background:var(--green);color:var(--ink);border:0;
border-radius:999px;cursor:pointer;transition:background .16s ease,transform .16s ease,color .16s ease}
.btn:hover{background:#00D19B;color:var(--ink);text-decoration:none;transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000;color:#fff}
.btn-line{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-line:hover{background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-line-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.btn-line-light:hover{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--paper-2);color:var(--ink)}
.btn-sm{padding:14px 26px;font-size:.95rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn .ar{font-size:1.02em;line-height:0;transform:translateY(1px)}
/* brand softening: any card-ish surface a page invents picks up friendly corners.
   v5 band components deliberately avoid the words card/tile/panel/box so they keep
   their own radii. */
main [class*="card"],main [class*="tile"],main [class*="panel"],main [class*="-col"],
main [class*="box"]{border-radius:var(--r)}
main img{border-radius:var(--r-sm)}
main table img,main .logo-row img,footer img,header img{border-radius:0}

/* ------------------------------------------------------------------ the header */
header{position:sticky;top:0;z-index:900;background:transparent;padding:14px 0;
pointer-events:none}
header .navbar{pointer-events:auto}
.nav-shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* The bar floats: the header carries no ground of its own, so the page shows through
   either side of the pill. Theo, 8 Sep: thin it to the thatworks proportion, and off
   black rather than the old #222724, which was 34/39/36 and read as a green beige. */
.navbar{position:relative;display:flex;align-items:center;gap:4px;background:var(--ink);
border-radius:999px;padding:6px 6px 6px 22px;min-height:56px}
.navbar .logo{flex:none;display:flex;align-items:center}
.navbar .logo img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;list-style:none;margin:0 auto}
.nav-links>li{position:static}
.nav-links>li>a{display:block;padding:9px 13px;color:#fff;font-family:var(--fd);
font-weight:500;font-size:.94rem}
.nav-links>li>a:hover{color:var(--green);text-decoration:none}
.nav-m{display:none}
.nav-right{display:flex;align-items:center;gap:0;flex:none}
.nav-right>a{color:#B4B6B5;font-family:var(--fd);font-weight:500;font-size:.78rem;padding:8px 11px}
.nav-right>a:hover{color:#fff;text-decoration:none}
/* the call is the one action on the bar, so it outranks the menu: bigger type in a
   bigger pill */
.navbar .nav-cta{background:#fff;color:var(--ink);font-family:var(--fd);font-weight:600;
font-size:.92rem;padding:12px 24px;border-radius:999px;margin-left:8px;white-space:nowrap}
.navbar .nav-cta:hover{background:var(--green);color:var(--ink);text-decoration:none}
.mega{position:absolute;top:calc(100% + 12px);left:0;right:0;background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 34px 70px rgba(18,21,19,.20);
padding:30px;z-index:5;
opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
transition:opacity .18s ease,transform .18s ease,visibility 0s linear .4s}
/* an invisible bridge fills the gap between the link and the panel, so the cursor
   never leaves the hover target on the way down */
.mega:before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.nav-links li:hover .mega,.nav-links li:focus-within .mega{opacity:1;visibility:visible;
transform:none;pointer-events:auto;transition:opacity .18s ease,transform .18s ease,visibility 0s}
/* the grace period: leaving the item does not close the panel for 220ms, so a slip
   sideways or a wobble does not flash it shut and open again */
.nav-links li .mega{transition-delay:.22s}
.nav-links li:hover .mega,.nav-links li:focus-within .mega{transition-delay:0s}
.mega-grid{display:grid;grid-template-columns:220px 1fr 260px;gap:34px;align-items:start}
.mega-intro .mono{color:var(--green-ink)}
.mega-intro h4{font-size:1.22rem;margin:10px 0 10px;letter-spacing:-.02em}
.mega-intro p{font-size:.86rem;color:var(--muted);line-height:1.6}
/* the drawing sits at the foot of the intro column, filling what used to be
   half a column of empty paper under the title */
.mega-intro{display:flex;flex-direction:column}
.mega-art{width:100%;max-width:210px;height:auto;margin-top:auto;padding-top:18px}
figure.mega-art{margin-top:auto;padding-top:18px;max-width:230px}
figure.mega-art img{display:block;width:100%;height:clamp(84px,7vw,104px);
object-fit:cover;object-position:top left;border-radius:var(--r-sm);
border:1px solid var(--line)}
/* the capacity chip beside Email marketing: green on the black bar, small enough to
   read as a live status rather than a badge */
/* the availability chip carries a live dot: a green pulse that says the number is
   current rather than decoration */
/* Theo, 8 Sep: the chip stays, and it should glow. The dot keeps its pulse; the
   chip itself now breathes a soft green light so the scarcity reads from across the
   bar rather than only when you are looking straight at it. */
.nav-chip{display:inline-flex;align-items:center;gap:7px;margin-left:8px;
padding:3px 10px 3px 8px;border-radius:999px;background:rgba(0,184,137,.18);
color:#6EE9BF;font-size:.68rem;font-weight:600;letter-spacing:.02em;
vertical-align:middle;animation:chipglow 2.8s ease-in-out infinite}
.nav-chip:before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
background:var(--green);box-shadow:0 0 0 0 rgba(0,184,137,.7);
animation:navpulse 2.4s ease-out infinite}
@keyframes navpulse{
0%{box-shadow:0 0 0 0 rgba(0,184,137,.65)}
70%{box-shadow:0 0 0 7px rgba(0,184,137,0)}
100%{box-shadow:0 0 0 0 rgba(0,184,137,0)}}
@keyframes chipglow{
0%,100%{box-shadow:0 0 0 1px rgba(0,184,137,.30),0 0 10px rgba(0,184,137,.22)}
50%{box-shadow:0 0 0 1px rgba(0,184,137,.55),0 0 22px rgba(0,184,137,.55)}}
/* 3. the call is the one action on the bar, so it breathes too (Theo, 8 Sep) */
.navbar .nav-cta{animation:ctapulse 3.4s ease-out infinite}
@keyframes ctapulse{
0%{box-shadow:0 0 0 0 rgba(255,255,255,.42)}
60%{box-shadow:0 0 0 11px rgba(255,255,255,0)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.navbar .nav-cta:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){
.nav-chip,.nav-chip:before,.navbar .nav-cta{animation:none}}
.mega-links{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
/* the email dropdown is grouped rather than listed: the service, then the flows
   split by whether they fire before or after the first order */
.mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px}
.mega-col{min-width:0}
/* the column heading holds one line: "Post-purchase flows" wrapping made the shelf
   look broken next to a single-line neighbour */
.mega-cols h5{font-family:var(--fd);font-weight:600;font-size:.6rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--muted);padding:0 12px 8px;margin-bottom:4px;
border-bottom:1px solid var(--line);white-space:nowrap}
.mega-cols a{display:block;padding:7px 12px;color:var(--ink);border-radius:var(--r-sm)}
.mega-cols a:hover{background:var(--paper-2);text-decoration:none}
/* flow names stay on one line: "Browse abandonment" wrapping made the column
   ragged and the list hard to scan */
.mega-cols .d-name{font-size:.88rem;margin-bottom:2px;white-space:nowrap}
.mega-cols{grid-template-columns:1.05fr 1.25fr 1fr}
.mega-cols .d-desc{font-size:.74rem}
/* SEO has no featured case, so its panel runs intro plus links only */
.mega-grid-2{grid-template-columns:.9fr 1.6fr}
.mega-links a{display:block;padding:11px 14px;color:var(--ink);border-radius:var(--r-sm)}
.mega-links a:hover{background:var(--paper-2);text-decoration:none}
.d-name{display:block;font-family:var(--fd);font-weight:600;font-size:.93rem;margin-bottom:3px}
.d-desc{display:block;font-size:.78rem;color:var(--muted);line-height:1.5}
.mega-feat{background:var(--ink-900);color:#fff;padding:24px;border-radius:var(--r);overflow:hidden}
/* NO knockout filter. brightness(0) invert(1) forces every pixel white, which on
   the Thermos mark flattened the red banner and its white lettering into one solid
   white blob with no wordmark left. The featured card uses the logo variant that
   already reads on dark, in full colour, like every other logo on the site. */
.mega-feat img.mf-logo{height:26px;width:auto;margin-bottom:16px}
.mega-feat img.mf-thumb{border-radius:var(--r-sm)}
.mega-feat .mf-stat{font-family:var(--fd);font-weight:600;font-size:2rem;color:var(--green);
line-height:1;letter-spacing:-.03em}
.mega-feat .mf-label{font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted-dark);margin:9px 0 12px}
.mega-feat p{font-size:.84rem;color:var(--muted-dark);line-height:1.55;margin-bottom:14px}
.mega-feat a{color:var(--green);font-family:var(--fd);font-weight:600;font-size:.84rem}
.burger{display:none;background:none;border:0;cursor:pointer;padding:12px;margin-left:6px}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

/* ------------------------------------------------------------------ the footer */
/* ------------------------------------------------------------------ the footer
   Rebuilt 9 Aug 2026 (Theo: the old one "looks ridiculous"). Two references, one
   composition: the live Engage footer's paired link columns and its closing line,
   and That Works' black band anchored by an oversized wordmark. Refined to the
   Digest scale: one call band, four tight columns, the wordmark as the last word. */
footer{background:var(--ink-900);color:#fff;padding:clamp(52px,6vw,78px) 0 26px}
/* the call band: the one thing the footer is actually for */
.foot-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;
flex-wrap:wrap;padding-bottom:clamp(34px,4vw,48px);margin-bottom:clamp(34px,4vw,48px)}
.foot-cta h3{font-size:clamp(1.8rem,3vw,2.7rem);font-weight:500;letter-spacing:-.03em;line-height:1.08;max-width:18ch}
.foot-cta p{color:var(--muted-dark);font-size:.92rem;margin-top:8px;max-width:46ch}
.foot-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.foot-grid h4{font-family:var(--fd);font-weight:600;font-size:.86rem;letter-spacing:.01em;
text-transform:none;color:#fff;margin-bottom:14px}
.foot-grid ul{list-style:none}
.foot-grid li a{color:var(--muted-dark);font-size:.9rem;display:block;padding:6px 0;
transition:color .18s ease,transform .18s ease}
.foot-grid li a:hover{color:#fff;text-decoration:none;transform:translateX(3px)}
.foot-logo img{height:42px;width:auto;margin-bottom:20px}
.foot-logo .foot-blurb{font-size:1.02rem;line-height:1.6;max-width:38ch}
.foot-grid p{color:var(--muted-dark);font-size:.86rem;max-width:34ch;line-height:1.65}
/* partner badges sit as a quiet credential, not a second logo: the Shopify mark is
   a wide lockup, so it is capped on width as well as height or it dwarfs the column */
.foot-badges{display:flex;gap:14px;align-items:center;margin-top:22px}
.foot-badges img{height:30px;width:auto;max-width:154px;object-fit:contain}
/* The full width wordmark is gone for real this time (Theo, 8 Sep). The note above it
   said it had gone on 9 Aug, but only the CSS changed: the img was still in
   footer_html, still at width:100%. The columns close the footer, and the hairline
   that used to sit on the mark now sits on the legal line itself. */
.foot-legal{color:var(--muted-dark);font-size:.76rem;display:flex;justify-content:space-between;
gap:20px;flex-wrap:wrap;align-items:center;
margin-top:clamp(40px,5vw,72px);padding-top:clamp(24px,2.8vw,34px);
border-top:1px solid var(--line-dark)}
.foot-legal a{color:var(--muted-dark)}
.foot-legal a:hover{color:#fff}

/* =============================================== THE BANNER BANDS (v7, concept-banner)
   The Bread and Jam exhibition banner is the brand at its best: a green ground, white
   display type, one gold mark, and the client emails standing full length beneath it.
   Two bands carry that onto the site and repeat exactly wherever they appear.

   green moment   full bleed --green-ink (white computes 6.7:1; white on --green is
                  2.5:1 and stays banned), a soft wash of brand green in one corner,
                  white display type, gold for the one mark. One or two per page.
   email wall     full bleed strips of real client email on paper, each at least
                  1:4, anchored to its masthead, cut on one straight line at the foot.
                  No fade, no plate, no caption. The recurring proof motif. */
.b-gm{background:var(--green-ink);color:#fff;position:relative;overflow:hidden}
.b-gm h1,.b-gm h2,.b-gm h3{color:#fff}
.b-gm p{color:#fff}
.b-gm .b-stmt{max-width:none}
.b-gm .b-stmt p{color:#fff;font-weight:500;font-size:clamp(1.7rem,3.3vw,3rem);line-height:1.14;
letter-spacing:-.032em;max-width:26ch;margin:0 auto}
/* the key phrases carry the banner's gold swash rather than a heavier weight: white
   on green has no darker white to go to */
.b-gm .b-stmt p b{font-weight:500;color:#fff;
background-image:linear-gradient(var(--gold),var(--gold));background-size:100% .1em;
background-repeat:no-repeat;background-position:0 96%;
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.b-gm .b-pill{background:#fff;color:var(--ink)}
.b-gm .btn-ink{background:var(--ink-900);color:#fff}
.b-gm .b-logom .lm-more{color:#fff}
/* the proof lines: the banner's bullet list, gold dot, one line each */
.b-gm-l{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
gap:12px clamp(22px,3vw,44px);margin:clamp(26px,3vw,40px) auto 0;padding:0}
.b-gm-l li{display:flex;align-items:center;gap:11px;font-family:var(--fd);font-weight:500;
font-size:clamp(.9rem,1.1vw,1.02rem);color:#fff}
.b-gm-l li:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}

.b-wall{position:relative;overflow:hidden;background:var(--paper);
height:clamp(520px,58vw,820px);padding-top:clamp(18px,2vw,28px)}
.b-wall-t{display:flex;gap:clamp(14px,1.8vw,26px);width:100%;height:100%;
padding:0 clamp(14px,1.8vw,26px)}
/* every strip runs to the band's foot, so the foot is the one straight cut across all
   of them: no fade, no rounded corner surfacing above the line.
   Theo, 8 Sep: taller, and the emails pan on their own, one up while its neighbour
   goes down, easing at each turn and reversing. The reader does not scroll these: the
   figure is overflow:hidden and only the animation moves the image, which is also why
   an inner scroller cannot swallow the page scroll on a phone.
   --pan and --dur are measured per image in JS once it has loaded, because the travel
   is the image's own height minus the window, and every campaign is a different
   length. The travel is capped in JS so no strip ever pans down into its unsubscribe
   block. */
.b-wall figure{flex:1 1 0;min-width:0;height:100%;margin:0;
border-radius:var(--r-sm) var(--r-sm) 0 0;overflow:hidden;background:#fff;
box-shadow:0 22px 46px rgba(18,21,19,.16)}
.b-wall figure:nth-child(even){margin-top:36px;height:calc(100% - 36px)}
.b-wall img{animation:wall-pan var(--dur,54s) ease-in-out infinite alternate}
.b-wall figure:nth-child(even) img{animation-direction:alternate-reverse}
@keyframes wall-pan{to{transform:translateY(var(--pan,0px))}}
@media(prefers-reduced-motion:reduce){.b-wall img{animation:none}}
.b-wall img{width:100%;height:auto;display:block;border-radius:0}
.b-wall figure:nth-child(n+7){display:none}
@media(max-width:1080px){.b-wall figure:nth-child(n+5){display:none}
.b-wall{height:clamp(400px,58vw,560px)}}
@media(max-width:700px){.b-wall figure:nth-child(n+4){display:none}
.b-wall{height:clamp(360px,112vw,480px)}
.b-wall figure:nth-child(even){margin-top:22px}
.b-gm .b-stmt p{max-width:none}
.b-gm-l{justify-content:flex-start}}

/* =================================================================== THE BANDS */
.band{padding:var(--sp) 0;position:relative}
.band.t-well{background:var(--paper-2)}
.band.t-soft{background:var(--green-soft)}
.band.t-dark{background:var(--ink-900);color:#fff}
.band.t-dark h1,.band.t-dark h2,.band.t-dark h3{color:#fff}
.band.t-dark p{color:var(--muted-dark)}
.band.tight{padding:var(--sp-in) 0}

/* The angled band foot (Theo, 8 Sep: the live site's chevron). The band paints the
   colour of the band BELOW into its own bottom padding as two corner triangles, so it
   appears to come to a point over the one under it. Three things this is deliberately
   not: clip-path on .band itself, which would make it a containing block and kill
   .fq-left's position:sticky; an SVG data URI, which gate.py's bgOf() treats as an
   unknown ground (it returns null on any backgroundImage and its caller skips the
   element), silently switching contrast checking off for the whole band; and a
   gradient, which the system bans outright. Two straight cuts, nothing else.
   --cut-x is the apex. The default is centred; b-cut-left moves it off centre so a
   page carrying two chevrons does not print the same shape twice. */
.band.b-cut{padding-bottom:max(var(--sp),calc(var(--cut) + var(--sp-in)))}
.band.b-cut::after{content:"";position:absolute;left:0;right:0;bottom:0;
height:var(--cut);background:var(--cut-fill);pointer-events:none;
clip-path:polygon(0 0,calc(var(--cut-x) - 3px) 100%,calc(var(--cut-x) + 3px) 100%,
100% 0,100% 100%,0 100%)}
.b-cut-paper{--cut-fill:var(--paper)}
.b-cut-well{--cut-fill:var(--paper-2)}
.b-cut-soft{--cut-fill:var(--green-soft)}
.b-cut-dark{--cut-fill:var(--ink-900)}
.b-cut-green{--cut-fill:var(--green-ink)}
.b-cut-left{--cut-x:26%}

/* The send plate: real client creative inside a box, never one email floating in it
   (CONCEPT rule 5). Top anchored and cut on one straight line at the foot, which is
   the refinement over the live site's version, where the four Thermos sends sit at
   four different heights and end ragged. */
.b-sp{display:flex;align-items:stretch;gap:clamp(7px,.9vw,13px);overflow:hidden;
padding:clamp(9px,1.1vw,15px) clamp(9px,1.1vw,15px) 0;border-radius:var(--r);
background:var(--ink-800);height:clamp(210px,24vw,330px)}
.b-sp figure{flex:1 1 0;min-width:0;margin:0}
.b-sp img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;
object-position:top center;border-radius:10px 10px 0 0}
.b-sp-paper{background:var(--paper-2)}
@media(max-width:820px){.b-sp figure:nth-child(n+4){display:none}}
@media(max-width:480px){.b-sp figure:nth-child(n+4){display:none}
.b-sp{height:clamp(190px,52vw,260px)}}

/* The film band: a client saying it themselves, standing over the sends they are
   talking about. Ink, not green: the page already has two green moments and this is a
   change of material, not a third one. Nothing third party loads until it is asked
   for, which is the _cal_slot idiom. */
.b-film h2{margin-bottom:clamp(26px,3.4vw,46px)}
.b-film-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
gap:clamp(24px,3.2vw,52px);align-items:start}
.b-film-v{position:relative;border-radius:var(--r);overflow:hidden;background:#000;
aspect-ratio:16/9}
.b-film-go{display:block;width:100%;height:100%;padding:0;border:0;background:none;
cursor:pointer;position:relative}
.b-film-go img{display:block;width:100%;height:100%;object-fit:cover}
.b-film-play{position:absolute;left:50%;top:50%;width:clamp(58px,6vw,78px);
height:clamp(58px,6vw,78px);margin:0;transform:translate(-50%,-50%);border-radius:50%;
background:var(--green);display:grid;place-items:center}
.b-film-play:after{content:"";width:31%;height:34%;background:var(--ink);
margin-left:12%;clip-path:polygon(0 0,100% 50%,0 100%)}
.b-film-go:hover .b-film-play{background:#00D19B}
.b-film-v iframe{display:block;width:100%;height:100%;border:0}
.b-film-sp{margin-top:clamp(14px,1.6vw,22px)}
.b-film-say blockquote{margin:0;font-family:var(--fd);font-weight:500;
font-size:clamp(1.15rem,1.6vw,1.42rem);line-height:1.45;color:#fff}
.b-film-n{margin:18px 0 0;font-family:var(--fd);font-weight:600;color:#fff;
font-size:.95rem}
.b-film-r{margin:2px 0 0;color:var(--muted-dark);font-size:.9rem}
.b-film-say .b-film-mk{margin-top:22px;display:block;max-height:34px;width:auto}
.b-film-say .btn{margin-top:26px}
@media(max-width:900px){.b-film-in{grid-template-columns:minmax(0,1fr);
gap:clamp(22px,4vw,34px)}}

/* The card rail (Theo, 8 Sep: the live site's skillset shelf). A shelf, not a
   carousel: no autoplay, no dots, no arrows, nothing that moves on its own. The cards
   run off the right edge because the set is longer than the viewport and the page
   should admit it. Every card is an <a>, so tab order walks the track in DOM order and
   the browser scrolls it: no tabindex on the scroller, and padding-block keeps the
   global focus ring off the clip edge. Snap is proximity, never mandatory, so a
   half-flick does not fight the reader. */
.b-rl{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
scroll-padding-inline:max(var(--gut),calc((100% - var(--maxw))/2 + var(--gut)));
padding-block:6px;scrollbar-width:none;-ms-overflow-style:none}
.b-rl::-webkit-scrollbar{display:none}
.b-rl-t{display:flex;gap:clamp(14px,1.7vw,26px);width:max-content;
padding-inline:max(var(--gut),calc((100% - var(--maxw))/2 + var(--gut)))}
/* Theo, 8 Sep, twice. Taller sends, and nothing drawn around them: no plate, no
   outline, no shadow, and no underline on the name or the line under it. The global
   a:hover{text-decoration:underline} at the top of this sheet is what was putting the
   line there, so the card has to turn it off for itself and its children. The send is
   the object; the words just sit under it. */
.b-rl-c{flex:0 0 clamp(250px,22vw,320px);scroll-snap-align:start;text-decoration:none;
color:inherit;display:flex;flex-direction:column;gap:14px}
.b-rl-c:hover,.b-rl-c:hover *{text-decoration:none}
.b-rl-c:hover .b-rl-art{transform:translateY(-4px)}
.b-rl-art{display:block;overflow-y:auto;overflow-x:hidden;
overscroll-behavior-y:contain;scrollbar-width:none;-ms-overflow-style:none;
background:var(--paper-2);border-radius:var(--r);height:clamp(400px,40vw,560px);
transition:transform .2s ease}
.b-rl-art::-webkit-scrollbar{display:none}
.b-rl-art img{display:block;width:100%;height:auto;max-width:none}
.b-rl-n{display:block;font-family:var(--fd);font-weight:600;
font-size:clamp(1.05rem,1.3vw,1.2rem);letter-spacing:-.015em}
.b-rl-p{display:block;color:var(--muted);font-size:.88rem;line-height:1.55;margin-top:4px}
.band.t-dark .b-rl-p{color:var(--muted-dark)}

/* The ticker variant (Theo, 8 Sep: "these should be on a smooth slow ticker").
   The track holds the set TWICE and translates by exactly -50%, so the second copy
   lands where the first began and the loop has no seam. That only holds if both
   halves are the same width, which is why the spacing here is a margin on every card
   rather than a flex gap: gap puts one fewer space in the track than there are cards,
   and the loop would drift by half a gap on every cycle.
   It pauses under the cursor and while anything inside it holds focus, because every
   card is a link and a moving target is a bad one. */
/* The good fit / not a good fit pair. Lived on /our-process/ only; Theo asked for it
   on home too on 8 Sep, so it is one shared band rather than two implementations.
   The rows are disclosure rows: heading and its one line on the face, his own
   paragraph underneath when you open it. */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(20px,3vw,44px);margin-top:clamp(24px,3vw,38px);align-items:stretch}
.fit-col{display:flex;flex-direction:column;gap:clamp(20px,3vw,44px);min-width:0}
.fit-col>.fit-c{flex:1 1 auto}
.fit-c{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(20px,2.6vw,30px);box-shadow:0 22px 48px rgba(20,40,32,.09)}
.fit-c h3{font-size:clamp(1.45rem,2.1vw,1.9rem);letter-spacing:-.025em;
line-height:1.15}
.fit-c>p{font-size:.92rem;color:var(--muted);margin-top:10px;max-width:46ch}
/* the 01 to 08 numerals are part of each row's live copy, so they stay; they were
   green caps micro-type in a 26px rail, and they are now quiet muted figures that
   sit out of the way of the reason itself */
.fit-l{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.fit-l details{border-bottom:1px solid var(--line)}
.fit-l details:last-child{border-bottom:0}
.fit-l summary{display:grid;grid-template-columns:minmax(0,1fr) 14px;gap:14px;
align-items:start;cursor:pointer;list-style:none;padding:15px 0}
.fit-l summary::-webkit-details-marker{display:none}
.fit-l summary:after{content:"";width:8px;height:8px;margin-top:6px;
border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
transform:rotate(45deg);transition:transform .18s}
.fit-l details[open] summary:after{transform:rotate(225deg)}
/* Theo, 8 Sep: no circles. The glyph sits on the paper at its own size, drawn with a
   softer, slightly uneven stroke so it reads as sketched rather than as a UI icon. */
.fit-l b{display:block;font-family:var(--fd);font-weight:600;font-size:.97rem;
line-height:1.35}
.fit-l summary span{display:block;font-size:.88rem;color:var(--muted);
line-height:1.6;margin-top:3px}
.fit-l details p{font-size:.9rem;color:var(--muted);line-height:1.7;
padding:0 22px 18px 44px;max-width:62ch}
@media(max-width:860px){.fit{grid-template-columns:1fr}}

.b-svc-links{list-style:none;margin:22px 0 0;border-top:1px solid var(--line)}
.b-svc-links li{border-bottom:1px solid var(--line)}
.b-svc-links a{display:block;padding:11px 0;color:var(--ink);text-decoration:none}
.b-svc-links a:hover{color:var(--green-ink)}
.b-svc-links b{display:block;font-family:var(--fd);font-weight:600;font-size:.94rem}
.b-svc-links span{display:block;color:var(--muted);font-size:.82rem;line-height:1.5;
margin-top:2px}

/* Theo, 8 Sep: it should still be draggable. overflow-x:auto puts the scrollbar back
   without stopping the loop, and the hover pause above means grabbing it stops the
   travel first, so a hand and the animation never fight over the same track. */
/* Theo, 9 Sep: the reader drags this, the wheel does not. It used to be a CSS
   marquee inside overflow-x:auto, which meant a trackpad swipe anywhere over it took
   the horizontal scroll off the page, and hovering froze it. Both are gone. The drift
   and the drag now share one mechanism, scrollLeft, driven by TICKER_JS below, so the
   speed is one constant in one place and cannot differ between pages. */
.b-rl-tick{overflow:hidden;cursor:grab;touch-action:pan-y}
.b-rl-tick:active{cursor:grabbing}
.b-rl-tick::-webkit-scrollbar{display:none}
.b-rl-tick .b-rl-t{gap:0;padding-inline:0}
.b-rl-tick .b-rl-c{margin-right:clamp(14px,1.7vw,26px)}
.b-rl-tick .b-rl-c img{pointer-events:none}
@media(prefers-reduced-motion:reduce){
.b-rl-tick{overflow-x:auto;cursor:auto}
}

/* The photo banner: one client photograph at full bleed with the heading on a solid
   that shares a straight edge with it. The live site lays white type straight over the
   picture and buys the contrast with a 43 percent black overlay; a wash is banned
   here, so the type sits on its own ground instead and the picture stays untouched.
   The foot takes the chevron, and .band.b-pbn.b-cut at (0,3,0) beats .band.b-cut at
   (0,2,0) so the banner never gains dead space whichever order the sheet is in. */
.band.b-pbn{--pbn-foot:0px;padding:0;overflow:hidden}
.band.b-pbn.b-cut{--pbn-foot:var(--cut);padding-bottom:0}
.b-pbn-in{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);
align-items:stretch;min-height:clamp(330px,33vw,460px)}
.b-pbn-ph{overflow:hidden}
.b-pbn-ph img{display:block;width:100%;height:100%;object-fit:cover}
.b-pbn-say{background:var(--ink-900);color:#fff;display:flex;flex-direction:column;
justify-content:center;align-items:flex-start;gap:clamp(18px,2vw,26px);
padding:clamp(38px,4.6vw,66px) clamp(28px,3.2vw,52px)
calc(clamp(38px,4.6vw,66px) + var(--pbn-foot))}
.b-pbn-say h2{color:#fff;max-width:16ch}
.b-pbn-say p{color:var(--muted-dark);max-width:44ch}
@media(max-width:820px){.b-pbn-in{grid-template-columns:minmax(0,1fr)}
.b-pbn-ph{aspect-ratio:16/10}}

/* band head: heading left, pill CTA right */
.b-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;
margin-bottom:var(--sp-in)}
.b-head h2{max-width:18ch}
.b-head .b-sub{grid-column:1;color:var(--muted);margin-top:14px;max-width:58ch}
.band.t-dark .b-head .b-sub{color:var(--muted-dark)}
.b-head.center{grid-template-columns:1fr;justify-items:center;text-align:center}
.b-head.center h2{max-width:22ch}
.b-head.center .b-sub{margin-left:auto;margin-right:auto}

/* hero, centered */
.b-hero{text-align:center;padding:clamp(40px,5vw,80px) 0 clamp(34px,4vw,56px)}
.b-hero .marker{margin-left:auto;margin-right:auto}
/* balance the rag: a centred headline whose lines run short, full-bleed, short
   reads as off-centre even when it is mathematically centred */
.b-hero h1{max-width:15ch;margin:0 auto;text-wrap:balance}
/* when a hero runs without a sub, the buttons still need air under the headline */
.b-hero h1+.btn-row{margin-top:clamp(26px,3vw,38px)}
h2,.b-heroL h1,.b-hero .b-hero-sub{text-wrap:pretty}
.b-hero .b-hero-sub{margin:24px auto 30px;max-width:58ch;color:var(--muted);
font-size:clamp(1.02rem,1.3vw,1.14rem)}
.b-hero .btn-row{justify-content:center}
.b-hero .b-hero-note{margin:22px auto 0;max-width:52ch;font-family:var(--fd);font-weight:500;
font-size:.78rem;letter-spacing:.06em;color:var(--muted)}
/* the icon chip that sits inside the headline sentence */
.b-ic{display:inline-block;vertical-align:-.14em;width:.92em;height:.92em;border-radius:.2em;
overflow:hidden;margin:0 .04em}
.b-ic img{width:100%;height:100%;object-fit:cover;border-radius:0}

/* hero, left */
/* TOP aligned, never bottom. align-items:end meant that the moment a page put a
   tall object in the right column, the headline was pushed halfway down the page
   to line its foot up with the image. That is the empty-hero bug. */
.b-heroL{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:clamp(24px,4vw,60px);align-items:start}
.b-heroL h1{max-width:15ch}
/* whatever a page floats in the hero, it cannot out-tall the headline column */
.b-heroL-r img{max-height:420px;width:auto}

/* NO FLOATING OBJECTS OVER A TWO-COLUMN HERO. Every page that built a floating
   collage positioned it absolutely across the whole band with viewport-relative
   insets. On a centred hero (home) that works, because the middle is type and the
   sides are empty. On a hero-left the right-hand column holds the intro and the
   CTAs, so the objects landed straight on top of the copy and the buttons: the
   page was unreadable at the one moment it has to sell. The visuals belong in the
   page's own proof band, which every one of these pages has directly beneath. */
.band:has(.b-heroL) [class$="-float"]{display:none}
.b-heroL .b-heroL-r p{color:var(--muted);margin-bottom:26px}
.b-heroL-mark{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}
.b-heroL-mark img{height:40px;width:auto;border-radius:0}
.b-heroL-mark span{font-family:var(--fd);font-weight:500;font-size:.72rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted)}

/* work rail: full bleed frames of real creative */
.b-rail{margin-top:clamp(26px,3.4vw,44px);overflow:hidden;position:relative;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
.b-rail-t{display:flex;gap:18px;width:max-content;animation:brail 78s linear infinite}
/* the rail never stops on hover (Theo): a marquee that halts under the cursor
   reads as broken, not as a feature */
@keyframes brail{to{transform:translateX(-50%)}}
/* Emails are tall. The Bread and Jam banner shows them as strips three to five
   times their width, never as squat cards, and that is what makes them read as
   real client work rather than thumbnails. The rail follows the banner: a tall
   ribbon per email, the top of the creative anchored, and the foot cut clean.
   There was a 76px white gradient across that foot until 14 August, on the
   reasoning that a fade reads as deliberate where a crop does not. Theo, 14 Aug:
   fades "look rubbish". A strip ends where the frame ends. */
.b-rail-f{flex:none;width:230px;height:660px;border-radius:var(--r);overflow:hidden;
position:relative;background:#fff;border:1px solid var(--line);
box-shadow:0 22px 46px rgba(18,21,19,.13)}
.b-rail-f img{width:100%;height:auto;min-height:100%;object-fit:cover;
object-position:top;border-radius:0;display:block}
.b-rail-cap{text-align:center;margin:22px auto 0;font-family:var(--fd);font-weight:500;
font-size:.8rem;letter-spacing:.04em;color:var(--muted)}

/* statement */
.b-stmt{text-align:center;max-width:74ch;margin:0 auto}
.b-stmt .b-pill{display:inline-block;background:var(--ink);color:#fff;font-family:var(--fd);
font-weight:500;font-size:.82rem;padding:9px 20px;border-radius:999px;margin-bottom:26px}
.b-stmt p{font-family:var(--fd);font-weight:500;font-size:clamp(1.02rem,1.4vw,1.24rem);
line-height:1.5;letter-spacing:-.016em;color:var(--ink);max-width:none}
.b-stmt p b{font-weight:600;color:var(--ink)}
.band.t-dark .b-stmt p{color:#fff}

/* logo grid */
.b-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;list-style:none}
.b-logos li{border:1px solid var(--line);border-radius:14px;background:var(--paper);
display:flex;align-items:center;justify-content:center;min-height:58px;padding:10px}
.b-logos img{max-height:calc(var(--h,28px)*.78);max-width:112px;width:auto;height:auto;
object-fit:contain;border-radius:0}
/* the marquee variant: no cells, bigger marks, one moving row. Full colour, never
   greyed, and it does not stop on hover. */
.b-logom{position:relative;overflow:hidden;display:flex;width:100%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
.b-logom .lm-t{display:flex;align-items:center;gap:clamp(38px,5vw,74px);
padding-right:clamp(38px,5vw,74px);flex:none;animation:brail 46s linear infinite}
.b-logom img{height:var(--h,34px);width:auto;max-width:none;object-fit:contain;
border-radius:0;flex:none}
.b-logom .lm-more{font-family:var(--fd);font-weight:600;font-size:.8rem;
color:var(--green-ink);white-space:nowrap;flex:none}
.b-logos li.more{background:var(--green-soft);border-color:transparent;grid-column:span 2;
font-family:var(--fd);font-weight:600;font-size:.88rem;color:var(--green-ink);letter-spacing:-.01em}

/* partner row */
.b-prow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
list-style:none}
.b-prow li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
padding:14px 24px;display:flex;align-items:center}
.b-prow img{height:38px;width:auto;border-radius:0}

/* service cards */
.b-svcs{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px)}
.b-svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(18px,2.2vw,24px);align-items:center}
.b-svc-media{border-radius:var(--r);overflow:hidden;background:var(--paper-2);aspect-ratio:16/10}
.b-svc-media img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:0}
.b-svc.flip .b-svc-media{order:2}
.b-svc-body{padding:clamp(4px,1.4vw,18px)}
.b-svc-ic{width:44px;height:44px;border-radius:13px;background:var(--ink);display:flex;
align-items:center;justify-content:center;margin-bottom:16px}
.b-svc-ic svg{width:22px;height:22px}
.b-svc h3{font-size:clamp(1.6rem,2.6vw,2.3rem);letter-spacing:-.03em;margin-bottom:16px;font-weight:600;line-height:1.08}
.b-svc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.b-svc-chips a{display:inline-block;font-family:var(--fd);font-weight:500;font-size:.77rem;
padding:7px 13px;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:var(--paper)}
.b-svc-chips a:hover{background:var(--green-soft);border-color:var(--green-soft);
color:var(--green-ink);text-decoration:none}
.b-svc-body p{font-size:1.02rem;color:var(--muted);max-width:44ch}
.b-svc-more{margin-top:20px}
.b-svc-tr{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;
padding-top:18px;border-top:1px solid var(--line)}
.b-svc-tr>span{font-family:var(--fd);font-weight:500;font-size:.68rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--muted)}
.b-svc-tr img{max-height:var(--h,18px);width:auto;object-fit:contain;border-radius:0;opacity:.9}

/* the dark panel */
.b-dark{background:var(--ink-900);color:#fff;border-radius:var(--r-lg);
padding:clamp(26px,4vw,58px)}
.b-dark h2,.b-dark h3{color:#fff}
.b-dark .marker{color:var(--green);background:rgba(255,255,255,.08)}
.b-dark .b-head .b-sub{color:var(--muted-dark)}
.b-dark-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.b-dark-it{background:#1A201C;border:0;border-radius:var(--r);
padding:18px;display:flex;flex-direction:column}
.b-dark-vis{border-radius:var(--r-sm);overflow:hidden;background:#fff;height:158px;
margin-bottom:18px;display:flex;align-items:center;justify-content:center;padding:12px}
.b-dark-vis img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:0}
.b-dark-vis.crop img{object-fit:cover;object-position:left top}
.b-dark-it h3{font-size:1.02rem;margin-bottom:8px;letter-spacing:-.01em}
.b-dark-it p{font-size:.88rem;color:#C6CFC8;line-height:1.6;max-width:none}
.b-dark-note{margin-top:clamp(20px,2.6vw,30px);font-family:var(--fd);font-weight:500;
font-size:.78rem;letter-spacing:.03em;color:var(--muted-dark)}
.b-dark-note a{color:var(--green)}

/* case grid: the dark report-cover DNA the six PDFs already use */
.b-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.b-case{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-900);
color:#fff;min-height:268px;padding:24px;display:flex;flex-direction:column;
justify-content:space-between;border:0}
/* the client's own artwork at the head of the card, anchored to its own top edge
   and faded into the ink so the wordmark and story sit on solid ground */
.b-case.has-art{padding:0}
/* the plate has to FILL the head of the card. width:100% on the image was
   resolving against a span that never stretched, so the artwork printed at its own
   size in the top left corner with dark card all round it. */
.b-case-art{position:relative;display:block;width:100%;height:190px;overflow:hidden;
flex:none;background:#0E1210}
/* scoped to .b-case, and it has to be: `.b-case img` further down caps every image
   in the card at 142x30 for the client wordmark, and at equal specificity the LATER
   rule won, so every card with real artwork printed a 30px thumbnail in its top left
   corner on a black plate. Checked in the browser, not by eye: the art image computed
   to 30x30 with max-width 142px. */
.b-case .b-case-art img{position:absolute;inset:0;width:100%;height:100%;
max-width:none;max-height:none;object-fit:cover;object-position:center 22%;
border-radius:0}
/* the fallback plate: the client's own mark, centred at cover scale on the ink
   ground the card already uses, so a card with no photography still has a head */
.b-case-art.mark-only{display:flex;align-items:center;justify-content:center;
padding:26px;background:radial-gradient(circle at 82% 10%,rgba(0,184,137,.26),
transparent 56%),#141917}
.b-case-art.mark-only img{position:static;width:auto;height:auto;max-width:74%;
max-height:64px;object-fit:contain}
.b-case-art.mark-only:after{display:none}
.b-case-art:after{content:"";position:absolute;left:0;right:0;bottom:0;height:88px;
background:linear-gradient(rgba(18,21,19,0),var(--ink-900));pointer-events:none}
.b-case.has-art>div{padding-left:24px;padding-right:24px;position:relative;z-index:2}
.b-case.has-art>div:last-child{padding-bottom:24px}
.b-case.has-art .b-case-top{padding-top:18px}
.b-case:before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 84% 10%,rgba(0,184,137,.30),transparent 54%),
radial-gradient(circle at 4% 98%,rgba(0,184,137,.13),transparent 46%)}
.b-case>*{position:relative;z-index:2}
.b-case:hover{text-decoration:none;border-color:var(--green)}
.b-case-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.b-case img{max-height:30px;max-width:142px;width:auto;height:auto;object-fit:contain;border-radius:0}
.b-case .lb{font-family:var(--fd);font-weight:500;font-size:.62rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--muted-dark);flex:none;padding-top:6px}
/* the card is the client and the story, nothing else: the title carries it, so it
   sets bigger than the old caption did now that no figure competes with it */
.b-case .ti,.b-case .rd{display:block}
.b-case .ti{font-family:var(--fd);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.28rem);
color:#fff;margin-top:26px;line-height:1.35;letter-spacing:-.02em;max-width:26ch}
.b-case .rd{font-family:var(--fd);font-weight:600;font-size:.78rem;color:var(--green);
margin-top:18px}
.b-case:hover .ti{color:inherit}

/* stat band */
.b-stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));
gap:clamp(22px,3vw,42px)}
.b-stat svg{width:30px;height:30px;margin-bottom:18px;color:var(--green-ink)}
.b-stat .v{display:block;font-family:var(--fd);font-weight:600;
font-size:clamp(1.9rem,2.7vw,2.4rem);letter-spacing:-.038em;line-height:1}
.b-stat .c{display:block;color:var(--muted);font-size:.92rem;margin-top:13px;line-height:1.6}
.b-stat a{color:var(--green-ink);border-bottom:1px solid var(--line)}
.b-stat a:hover{border-bottom-color:var(--green-ink);text-decoration:none}
.band.t-dark .b-stat svg{color:var(--green)}
.band.t-dark .b-stat .c{color:var(--muted-dark)}

/* green panel */
.b-green{background:var(--green-soft);border-radius:var(--r-lg);padding:clamp(26px,4vw,56px);
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(22px,4vw,48px);
align-items:center}
.b-green h2{max-width:15ch}
.b-green .marker{background:rgba(0,105,79,.10)}
.b-green p{color:var(--muted);margin-top:16px;max-width:52ch}
.b-green-badges{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end;align-items:center}
.b-green-badges figure{background:var(--paper);border-radius:var(--r);padding:18px 26px;
box-shadow:0 16px 34px rgba(18,21,19,.09);display:flex;align-items:center}
.b-green-badges img{height:46px;width:auto;border-radius:0}

/* sibling services */
.b-sibs{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.b-sib{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
padding:26px 28px;display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:16px;
align-items:center;color:var(--ink)}
.b-sib:hover{text-decoration:none;border-color:var(--ink)}
.b-sib h3{font-size:1.14rem;margin-bottom:11px;letter-spacing:-.02em}
.b-sib .cs{display:flex;flex-wrap:wrap;gap:6px}
.b-sib .cs span{font-family:var(--fd);font-weight:500;font-size:.71rem;color:var(--muted);
border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.b-sib .ar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:.95rem}
.b-sib:hover .ar{background:var(--green);color:var(--ink)}

/* founder closer */
.b-closer .b-closer-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.b-closer .b-closer-ph img{width:100%;height:100%;min-height:100%;object-fit:cover;
object-position:center;border-radius:0}
.b-closer .b-closer-bd{padding:clamp(26px,4vw,54px)}
/* the centred closer: one column on the middle line, the diary joined underneath */
.b-closer-mid .b-closer-in{grid-template-columns:minmax(0,1fr);text-align:center}
.b-closer-mid .b-closer-bd{padding:clamp(26px,3.2vw,42px) clamp(24px,4vw,54px);
display:flex;flex-direction:column;align-items:center;gap:2px}
.b-closer-mid .who{margin-top:14px}
.b-closer-mid .bk{margin-top:10px}
.b-closer-mid .btn-row{margin-top:16px}
.b-closer-mid .waves{margin-top:16px}
.b-closer-mid h2{max-width:20ch}
.b-closer-mid p{margin-left:auto;margin-right:auto;max-width:56ch}
.b-closer-mid .btn-row{justify-content:center}
.b-closer-mid .who{justify-content:center}
.b-closer-mid .waves{max-width:60ch;margin-left:auto;margin-right:auto}
.b-closer h2{max-width:17ch}
.b-closer .b-closer-bd>p{color:var(--muted);margin-top:16px;max-width:46ch}
.b-closer .who{display:flex;align-items:center;margin:28px 0 16px}
.b-closer .who img{width:52px;height:52px;object-fit:cover;border:3px solid var(--paper-2);
border-radius:50%}
.b-closer .who img:first-child{border-radius:15px}
.b-closer .who img+img{margin-left:-14px}
.b-closer .bk{font-family:var(--fd);font-weight:500;font-size:clamp(1.1rem,1.6vw,1.34rem);
line-height:1.55;letter-spacing:-.018em;color:var(--ink);max-width:26ch}
.b-closer .tog{display:inline-flex;background:var(--paper);border:1px solid var(--line);
border-radius:11px;padding:3px;margin:0 5px;vertical-align:middle}
.b-closer .tog a{font-family:var(--fd);font-weight:600;font-size:.78rem;padding:5px 11px;
border-radius:8px;color:var(--muted)}
.b-closer .tog a:hover{text-decoration:none;color:var(--ink)}
.b-closer .tog a.on{background:var(--ink);color:#fff}
.b-closer .tog a.on:hover{color:#fff}
.b-closer .btn-row{margin-top:24px}
.b-closer .mailme{margin-top:24px;font-size:.92rem;color:var(--muted)}
.b-closer .mailme a{font-family:var(--fd);font-weight:600;color:var(--ink)}
.b-closer .waves{margin-top:20px;font-size:.88rem;color:var(--muted);max-width:44ch}
.b-closer .cnote{margin-top:18px;font-family:var(--fd);font-weight:500;font-size:.76rem;
letter-spacing:.05em;color:var(--muted)}

/* founder closer, no photograph.
   Some pages have no honest picture to put in this panel: a buyer's guide, a company
   page, a page whose subject is a conversation. Rather than reach for a stock face or
   an event photograph that has nothing to do with the page, closer(photo=None) drops
   the image and splits the words instead: the heading and the sentence take the left,
   the booking side takes the right, divided by one hairline. The band still reads as a
   composition at 1280 and stacks at 900, so nothing here leaves a hole. */
/* the diary in the box: words left, the calendar right on paper, one rounded panel */
.b-closer-diary .b-closer-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
/* the diary stays dark, as the mid-page band is (Theo, 3 Sep) */
.b-closer-diary .b-closer-cal{background:var(--ink-900);padding:clamp(10px,1.2vw,18px);
display:flex;align-items:stretch}
.b-closer-diary .b-closer-cal iframe{width:100%;min-height:920px;height:100%;border:0;
border-radius:14px;display:block;background:var(--ink-900)}
@media(min-width:1081px){.b-closer-diary .btn-row{display:none}}
@media(max-width:1080px){.b-closer-diary .b-closer-in{grid-template-columns:1fr}
.b-closer-diary .b-closer-cal iframe{min-height:560px}}
.b-closer-solo .b-closer-in{grid-template-columns:1fr}
.b-closer-solo .b-closer-bd{display:grid;
grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
gap:clamp(22px,3.4vw,56px);align-items:center;
padding:clamp(32px,4.4vw,62px) clamp(26px,4vw,54px)}
.b-closer-solo .cs-say h2{max-width:15ch}
.b-closer-solo .cs-say>p{color:var(--muted);margin-top:16px;max-width:44ch}
.b-closer-solo .cs-do{border-left:1px solid var(--line);
padding-left:clamp(22px,3vw,44px)}
.b-closer-solo .cs-do .who{margin-top:0}
.b-closer-solo .cs-say .waves{max-width:44ch;margin-top:22px}
@media(max-width:900px){
.b-closer-solo .b-closer-bd{grid-template-columns:1fr}
.b-closer-solo .cs-say>p{max-width:none}
.b-closer-solo .cs-do{border-left:0;padding-left:0;border-top:1px solid var(--line);
padding-top:clamp(20px,3vw,28px)}
}

/* FAQ block */
.faqs .b-faq-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;
align-items:end;margin-bottom:clamp(24px,3vw,38px)}
.faqs h2{max-width:18ch}
.faq-group{font-family:var(--fd);font-weight:600;font-size:.92rem;letter-spacing:0;
text-transform:none;color:var(--muted);margin:36px 0 12px}
.faq-group:first-child{margin-top:0}
.faqs details{background:var(--paper);border:0;border-radius:var(--r-sm);
margin-bottom:10px;box-shadow:0 2px 10px rgba(18,21,19,.05)}
.faqs details[open]{box-shadow:0 10px 30px rgba(18,21,19,.10)}
.faqs summary{cursor:pointer;font-family:var(--fd);font-weight:600;font-size:1rem;
padding:19px 54px 19px 24px;list-style:none;position:relative}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary:after{content:"";position:absolute;right:26px;top:25px;width:9px;height:9px;
border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);
transition:transform .18s}
.faqs details[open] summary:after{transform:rotate(225deg);top:29px}
.faqs details p{padding:0 24px 22px;color:var(--muted);max-width:80ch}
/* Theo, 8 Sep: left, and no white box. It is a line of copy and a button, not a card. */
.b-faq-foot{display:flex;align-items:center;justify-content:flex-start;gap:18px;
flex-wrap:wrap;background:none;border:0;border-radius:0;box-shadow:none;
padding:0;margin-top:26px}
.b-faq-foot span{font-family:var(--fd);font-weight:500;font-size:.95rem}

/* the long version: hairline rows under the accordion, one per library article. Rules
   only, no plate, so it reads as a continuation of the FAQ list rather than a second
   card competing with it. */
.fq-more{margin-top:30px;border-top:1px solid var(--line)}
.fq-more-h{font-family:var(--fd);font-weight:600;font-size:.7rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--muted);padding:18px 0 4px}
.fq-more a{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink);
font-family:var(--fd);font-weight:500;font-size:1rem;line-height:1.3}
.fq-more a:hover{color:var(--green-ink);text-decoration:none}

/* the legacy closing band, kept so old modules that style .closer still resolve */
.closer{background:var(--ink-900);color:#fff;position:relative;overflow:hidden}
.closer .wrap{position:relative;z-index:2}
.closer h2{max-width:16ch;letter-spacing:-.03em}
.closer p{color:var(--muted-dark);max-width:56ch;margin:20px 0 30px}
.closer-mesh{position:absolute;inset:0;opacity:.5;
background:radial-gradient(circle at 82% 24%,rgba(0,184,137,.30),transparent 45%),
radial-gradient(circle at 96% 84%,rgba(0,184,137,.16),transparent 40%)}

/* prose (legal, articles) */
.prose p{margin:18px 0}
.prose h2{margin:46px 0 8px;font-size:1.7rem}
.prose h3{margin:34px 0 4px;font-size:1.18rem}
.prose ul{margin:18px 0 18px 20px}
.prose li{margin:8px 0;max-width:68ch}
.crumbs{font-family:var(--fm);font-weight:500;font-size:.7rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.crumbs a{color:var(--muted)}
.note{font-family:var(--fm);font-weight:500;font-size:.7rem;letter-spacing:.08em;color:var(--muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:999;background:#fff;padding:10px 16px}

/* popup */
.pp-overlay{position:fixed;inset:0;background:rgba(10,14,12,.72);z-index:1200;display:none;
align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.pp-overlay.open{display:flex}
/* Theo, 8 Sep, with the wellcopy popup: ask who they are first, then the address.
   The answer is the point, not decoration: it goes out with the submission so the
   list is segmented on the way in rather than guessed at later. Two steps, and the
   reader can leave at either without giving anything. */
.pp{background:var(--ink-900);color:#fff;max-width:940px;width:100%;display:grid;
grid-template-columns:minmax(0,47fr) minmax(0,53fr);overflow:hidden;position:relative;
border-radius:var(--r-lg);box-shadow:0 40px 100px rgba(0,0,0,.6)}
.pp .pp-body{padding:clamp(28px,3.2vw,46px);display:flex;flex-direction:column;
justify-content:center;min-width:0}
.pp h3{font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.2;margin-bottom:12px}
.pp p{color:var(--muted-dark);font-size:.93rem;margin-bottom:18px}
.pp input{width:100%;padding:14px 16px;border:1px solid var(--line-dark);background:#242424;
color:#fff;font-family:var(--fb);font-size:.94rem;margin-bottom:10px;border-radius:999px}
.pp input::placeholder{color:#8c968f}
.pp .btn{width:100%;text-align:center;justify-content:center}
.pp-close{position:absolute;top:12px;right:14px;background:rgba(18,21,19,.72);border:0;
color:#fff;font-size:1.4rem;cursor:pointer;line-height:1;width:34px;height:34px;
border-radius:50%;display:grid;place-items:center;z-index:2}
.pp-close:hover{background:var(--ink-900);color:var(--green)}
.pp .pp-small{font-size:.73rem;color:#8c968f;margin-top:12px}
.pp-step{display:none}
.pp-step.on{display:block}
.pp-roles{display:flex;flex-direction:column;gap:9px}
.pp-role{display:block;width:100%;text-align:center;font-family:var(--fd);font-weight:600;
font-size:.88rem;letter-spacing:.02em;padding:13px 18px;border-radius:999px;border:0;
background:var(--green);color:var(--ink);cursor:pointer}
.pp-role:hover{background:#00D19B}
.pp-no{display:block;margin:16px auto 0;background:none;border:0;color:#8c968f;
font-family:var(--fb);font-size:.85rem;text-decoration:underline;cursor:pointer}
.pp-no:hover{color:#fff}
.pp-back{background:none;border:0;color:#8c968f;font-family:var(--fb);font-size:.82rem;
text-decoration:underline;cursor:pointer;padding:0;margin-bottom:14px}
.pp-back:hover{color:#fff}
/* real client sends behind the ask, top anchored and cut on the panel's own foot:
   the same law as the wall and the send plate, no fade and no rounded edge surfacing */
.pp-art{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 12px 0;
background:var(--ink-800);overflow:hidden;align-content:start}
/* each one is clipped to its masthead: a whole email stacked here would put the
   unsubscribe line and a band of white where the next one should start */
.pp-art figure{margin:0;height:clamp(180px,23vh,270px);border-radius:10px 10px 0 0;
overflow:hidden;background:#fff}
.pp-art img{display:block;width:100%;height:auto;border-radius:0}
.pp-art figure:nth-child(even){margin-top:26px}

@media(max-width:1080px){
.nav-links{position:fixed;left:12px;right:12px;top:84px;background:var(--ink-900);
flex-direction:column;align-items:stretch;padding:14px 18px;border-radius:var(--r-lg);
max-height:calc(100vh - 116px);overflow-y:auto;display:none;margin:0;
box-shadow:0 34px 70px rgba(0,0,0,.4)}
.nav-links.open{display:flex}
.nav-links>li>a{padding:14px 2px;border-bottom:1px solid var(--line-dark);font-size:1rem}
.nav-m{display:block}
.mega{position:static;box-shadow:none;background:transparent;border:0;display:block;padding:0 0 8px;
border-radius:0}
.mega-grid{display:block;padding:0}
.mega-intro,.mega-feat{display:none}
.mega-links{display:block}
.mega-links a{color:var(--muted-dark);padding:9px 10px}
.mega-links a:hover{background:transparent}
.mega-links .d-name{color:#fff;font-weight:500;margin:0}
.mega-links .d-desc{display:none}
.burger{display:block}
.nav-right{margin-left:auto}
.nav-right>a{display:none}
.b-svc{grid-template-columns:1fr}
.b-svc.flip .b-svc-media{order:0}
.b-dark-grid,.b-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
.b-green,.b-closer .b-closer-in,.b-heroL{grid-template-columns:1fr}
.b-green-badges{justify-content:flex-start}
.b-closer .b-closer-ph img{min-height:280px;max-height:340px}
.b-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.b-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
.foot-grid{grid-template-columns:1fr 1fr}
.pp{grid-template-columns:1fr;max-width:420px}
.pp{grid-template-columns:minmax(0,1fr)}
.pp-art{display:none}
}
@media(max-width:700px){
/* hero_left and the closer write the primary button first, so they must not use
   the column-reverse that hero_centered's secondary-first markup needs */
.b-heroL .btn-row,.b-closer .btn-row{flex-direction:column}
.b-head,.faqs .b-faq-head{grid-template-columns:1fr}
.b-dark-grid,.b-cases,.b-stats{grid-template-columns:1fr}
.b-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
.b-logos li.more{grid-column:span 2}
.b-rail-f{width:176px;height:470px}
.foot-grid{grid-template-columns:1fr}
.b-hero h1,.b-heroL h1{max-width:none}
/* On a phone the buttons stack, and the markup puts the secondary first so that
   on desktop it sits to the LEFT of the primary. Stacked that way round the
   secondary lands on top, which buries the action. Reverse the column so the
   primary leads, and match their widths: two pills of different lengths sitting
   one above the other read as an accident. */
.btn-row{flex-direction:column-reverse;align-items:stretch;gap:11px}
.btn-row .btn{width:100%;justify-content:center;text-align:center}
}
/* --------------------------------------------------------- the motion layer */
/* Nothing here hides content on its own: the script stamps html.js on real
   browsers, and html.mo-now under webdriver or missing-observer, so crawlers,
   gates and no-JS readers always get the finished page. The reduced-motion
   block below kills the lot. */
html.js .mo{opacity:0;transform:translateY(22px);
transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);
transition-delay:var(--mo-d,0s)}
html.js .mo.mo-in{opacity:1;transform:none}
html.mo-now .mo{opacity:1 !important;transform:none !important;transition:none !important}
.mo-drift{animation:mo-drift var(--mo-t,8s) ease-in-out infinite alternate}
@keyframes mo-drift{from{translate:0 0}to{translate:0 -7px}}
.b-svc,.b-case,.b-sib,.b-logos li{transition:transform .25s ease,box-shadow .25s ease,
border-color .25s ease}
.b-svc:hover,.b-sib:hover{transform:translateY(-4px);box-shadow:0 30px 58px rgba(18,21,19,.13)}
.b-case:hover{transform:translateY(-4px);box-shadow:0 30px 58px rgba(18,21,19,.30)}
.b-logos li:hover{transform:translateY(-2px);border-color:#C7CFC8}
.btn,.btn-ink,.btn-line,.btn-light,.btn-line-light{transition:transform .2s ease,
box-shadow .2s ease,background-color .2s ease,color .2s ease}
.btn:hover,.btn-ink:hover,.btn-line:hover,.btn-light:hover,.btn-line-light:hover{
transform:translateY(-2px)}
.ar{display:inline-block;transition:transform .2s ease}
a:hover .ar{transform:translateX(3px)}
.nav-links>li>a{position:relative}
.nav-links>li>a:after{content:"";position:absolute;left:12px;right:12px;bottom:5px;
height:2px;border-radius:2px;background:var(--green);transform:scaleX(0);
transform-origin:left;transition:transform .25s ease}
.nav-links>li>a:hover:after{transform:scaleX(1)}
header.mo-scr .nav{box-shadow:0 16px 38px rgba(18,21,19,.24)}
header .nav{transition:box-shadow .3s ease}
.faqs details p{overflow:hidden}
.faqs details[open] p{animation:mo-open .38s cubic-bezier(.22,.61,.36,1)}
@keyframes mo-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
::selection{background:var(--green);color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
html.js .mo{opacity:1;transform:none}
html{scroll-behavior:auto}
}

/* the mid page diary: full width, so the description column, the month and the times
   sit on one row and nobody has to scroll inside the frame */
.cal-band .cal-say{max-width:52ch;margin-bottom:clamp(22px,2.6vw,32px)}
.cal-band .cal-say h2{color:#fff}
.cal-band .cal-say p{color:var(--muted-dark);margin-top:12px}
.cal-full{border-radius:var(--r-lg);overflow:hidden;border:0;
background:#0F1311;padding-top:clamp(22px,2.8vw,40px)}
.cal-full iframe{display:block;width:100%;height:clamp(560px,46vw,660px);border:0}
@media(max-width:700px){.cal-full iframe{height:680px}}

/* ---------- the case card: the report cover, carrying the work -------------
   The card kept the dark PDF cover DNA and carried no picture at all, so a grid
   of six of them read as six paragraphs. It now opens with a plate: the client's
   own campaign creative where the client has creative we can show, and the
   client's own wordmark at cover scale where it does not. Nothing on this card
   is drawn. */
.cc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.cc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
min-height:clamp(400px,34vw,470px);border-radius:var(--r);overflow:hidden;
background:var(--ink-900);border:0;color:#fff;transition:transform .25s ease,box-shadow .25s ease}
.cc:hover{text-decoration:none;transform:translateY(-4px);
box-shadow:0 30px 58px rgba(18,21,19,.30)}
/* the client's photograph fills the whole card (Theo, 3 Sep); the words sit on an
   opaque ink plate over its foot, so the contrast is the plate's, not the picture's */
.cc-art{position:absolute;inset:0;height:auto;overflow:hidden;display:flex;align-items:flex-start;
justify-content:center;padding:44px 26px 0;background:#161B18}
.cc-art.shot{padding:0;display:block}
.cc-art.shot img{width:100%;height:100%;min-height:100%;object-fit:cover;
object-position:center;border-radius:0}
/* the wordmark plate: the client's own artwork, at the size a cover gives it */
.cc-art .mk{max-height:56px;max-width:78%;width:auto;height:auto;object-fit:contain;
border-radius:0}
.cc-bd{position:relative;z-index:2;margin:0;padding:140px 24px 26px;display:flex;flex-direction:column;
justify-content:flex-end;gap:12px;
background:linear-gradient(180deg,rgba(18,21,19,0) 0%,rgba(18,21,19,.55) 40%,rgba(18,21,19,.92) 100%)}
.cc-top{display:flex;align-items:center;gap:12px}
.cc-top:empty{display:none}
.cc-top img{max-height:20px;max-width:110px;width:auto;height:auto;object-fit:contain;border-radius:0}
/* the small caps label shows only where the card has no mark to carry the name */
.cc-lb{display:none;font-family:var(--fd);font-weight:600;font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.72)}
.cc-top>.cc-lb:only-child{display:block}
.cc-ti{display:block;font-family:var(--fd);font-weight:500;
font-size:clamp(1.05rem,1.4vw,1.22rem);color:#fff;line-height:1.32;letter-spacing:-.02em;max-width:30ch}
.cc-rd{display:none}
/* Theo, 8 Sep: the title stays white on hover, the card lifting is the feedback */
.cc:hover .cc-ti{color:#fff}
@media(max-width:1080px){
.cc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
.cc-grid{grid-template-columns:1fr}
.cc{min-height:440px}
}

/* the closer's calendar: written on click, never on load, so no page pays for a
   third party frame nobody has asked for yet */
.b-closer .cal-slot{margin-top:20px;border-radius:var(--r);overflow:hidden;
border:1px solid var(--line-900);background:#0F1311}
.b-closer .cal-slot iframe{display:block;width:100%;height:clamp(520px,58vw,640px);border:0}

/* ================================================== v7: the statement beside a photograph */
.sp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(28px,5vw,84px);align-items:center}
.sp.flip .sp-ph{order:2}
.sp-ph{border-radius:var(--r);overflow:hidden;background:var(--paper-2);aspect-ratio:4/5;
box-shadow:0 26px 56px rgba(0,0,0,.18)}
.sp-ph img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0}
.sp-say p{font-family:var(--fd);font-weight:500;font-size:clamp(1.6rem,3vw,2.7rem);
line-height:1.14;letter-spacing:-.032em;color:var(--ink);max-width:22ch}
.sp-say p b{font-weight:600}
.b-gm .sp-say p,.b-gm .sp-say p b{color:#fff}
.b-gm .sp-say p b{font-weight:500;
background-image:linear-gradient(var(--gold),var(--gold));background-size:100% .1em;
background-repeat:no-repeat;background-position:0 96%;
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sp-l{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.sp-l li{display:flex;align-items:center;gap:12px;font-family:var(--fd);font-weight:500;
font-size:clamp(.92rem,1.1vw,1.04rem);color:var(--ink)}
.b-gm .sp-l li{color:#fff}
.sp-l li:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none}
@media(max-width:900px){
.sp{grid-template-columns:1fr;gap:26px}
.sp.flip .sp-ph{order:0}
.sp-ph{aspect-ratio:4/3}
.sp-say p{max-width:none}
}

/* the FAQ split: heading, call and a photograph left, the accordion right */
.fq-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
gap:clamp(28px,4vw,64px);align-items:start}
/* The left column stays pinned until the last row has gone past (Theo, 3 Sep). Two
   things decide when a sticky block lets go: its own height and where its container
   ends. So the photograph is square rather than tall, and the band's bottom padding
   moves inside the right column, which stretches the container under the foot row
   without adding a pixel of space to the page. */
.fq-left{position:sticky;top:88px}
.fq-right{min-width:0;padding-bottom:calc(var(--sp) - 8px)}
.fq-split.band{padding-bottom:8px}
.fq-split .b-faq-head{grid-template-columns:1fr;justify-items:start;gap:22px;margin-bottom:0}
.fq-split .faq-group:first-child{margin-top:0}
.fq-ph{margin:clamp(30px,3.4vw,46px) 0 clamp(26px,3vw,40px);border-radius:var(--r);
overflow:hidden;background:var(--paper-2);aspect-ratio:1/1}
.fq-ph img{width:100%;height:100%;object-fit:cover;border-radius:0}
@media(max-width:900px){
.fq-grid{grid-template-columns:1fr}
.fq-left{position:static}
.fq-right{padding-bottom:0}
.fq-split.band{padding-bottom:var(--sp)}
.fq-ph{aspect-ratio:3/2}
}

/* the closer's diary carries the symbol until the third party frame paints, so it
   never reads as a black void (the record, 12 Aug: keep the diary; 3 Sep: no voids) */
.b-closer .cs-diary{background:#0F1311 url(/assets/ec-symbol-white.png) center/72px auto no-repeat}
/* Theo, 9 Sep: the embed was butted straight against the dark band above it,
   so cal.com's own white chrome started a pixel under our copy. The plate
   keeps its own dark inset above the frame. */
.b-closer .cs-diary{margin-top:0;border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);padding-top:clamp(22px,2.8vw,40px)}
.b-closer .b-closer-in{border-radius:var(--r-lg) var(--r-lg) 0 0}
.b-closer .cs-diary iframe{height:clamp(500px,40vw,600px)}
@media(max-width:700px){.b-closer .cs-diary iframe{height:640px}}

@media(max-width:700px){
h2{font-size:2.5rem;line-height:1.06;letter-spacing:-.035em}
.b-svc h3{font-size:2.5rem;line-height:1.06}
.b-svc-body p{font-size:1.06rem;line-height:1.7}
.b-svc-more{margin-top:26px}
.b-head{margin-bottom:clamp(28px,7vw,40px)}
}