/* One Marketing case study, theme "report" (17 October 2026): the annual report. A white page, ink bands for the hero,
   the results and the closing call, stone bands for the facts and the method, hairline rules for structure, numbered
   sections, small tracked labels over large calm headings, tabular figures, the green as a signal only (one short rule
   at the top of each ink band, the button, the placeholder dot, the rule beside the client's words).
   Standalone: no dependency on the reference site's stylesheet.
   Type: Hanken Grotesk, variable 100 to 900, SIL Open Font Licence, self hosted.
   Palette: ink #090B0C, green #24BC5B, white #FFFFFF, stone #F4F4F2, line #E3E6E4, and tints of ink, green and white.
   Nothing else. Mobile first: the phone layout is the default, 721 px adds the tablet grids, 1024 px adds the two
   column story, the five column facts row and the split method band. No horizontal overflow at 375, 1024 or 1440 px.
   Reduced motion respected. Prints as one column in ink on white. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(../_design/home-v3/fonts-one/hanken-grotesk-latin.woff2) format("woff2")}

:root{
  --ink:#090B0C;--green:#24BC5B;--white:#FFFFFF;--stone:#F4F4F2;--line:#E3E6E4;
  --ink-80:rgba(9,11,12,.80);--ink-64:rgba(9,11,12,.64);--ink-48:rgba(9,11,12,.48);--ink-28:rgba(9,11,12,.28);--ink-12:rgba(9,11,12,.12);
  --w-80:rgba(255,255,255,.80);--w-64:rgba(255,255,255,.64);--w-48:rgba(255,255,255,.48);--w-16:rgba(255,255,255,.16);
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1280px;                       /* the page width; every band's content sits inside it */
  --measure:72ch;                      /* the reading column; never below 70ch */
  --gut:clamp(16px,4vw,48px);          /* the side gutter */
  --rise:clamp(40px,7vw,96px);         /* how far the hero photograph rises out of the ink band into the facts band */
  --band:clamp(56px,7vw,104px);        /* vertical padding of a full width band */
  --aside:clamp(200px,19vw,260px);     /* the story's left column: section number and heading */
  --gap:clamp(40px,5vw,72px);          /* the gap between the story's two columns, reused for the split bands */
  --stick:32px;                        /* where a sticky section heading rests below the top of the viewport */
  --r:6px;                             /* the one radius, for images and blocks; pills only for the tags and the button */
  --ease:cubic-bezier(.16,1,.3,1);
}
/* Between 1024 and 1279 px the viewport, not the measure, bounds the reading column. A tighter gutter and column gap
   keep it at 70ch or wider (720 px at 1024, 71.4ch at 18 px). Scoped to this range so the phone, tablet, 1280 and
   1440 layouts do not move. */
@media (min-width:1024px) and (max-width:1279px){:root{--gut:32px;--gap:40px}}

/* Base */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.12;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd,dt,figure,blockquote{margin:0}
img,svg,picture{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
strong,b{font-weight:600}
::selection{background:var(--green);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.hero :focus-visible,.results :focus-visible,.cta :focus-visible{outline-color:var(--green)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr:focus-visible{position:fixed;top:12px;left:12px;z-index:10;width:auto;height:auto;margin:0;padding:10px 16px;overflow:visible;clip:auto;border-radius:999px;background:var(--green);color:var(--ink);font-weight:600;outline-color:var(--ink)}
.tab{font-variant-numeric:tabular-nums lining-nums}
[id]{scroll-margin-top:24px}

/* The one small label the whole page shares: the eyebrow, the facts labels, the column headings, the section numbers,
   the work numbers and the placeholder tag. Small, bold, uppercase, tracked. */
.eyebrow span,.glance h2,.glance dt,.method h3,.story section::before,.work h3 .no,.ph__tag{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}

/* The one text link and the one button. The button keeps the brand's pill. */
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:inherit}
.tlink span{position:relative}
.tlink span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tlink:hover span::after{transform:scaleX(1)}
.tlink svg{width:16px;height:16px;flex:none;transition:transform .45s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 28px;border-radius:999px;background:var(--green);color:var(--ink);font-weight:600;font-size:1rem;line-height:1.2;text-align:left;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px -16px rgba(36,188,91,.7)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.98)}

/* Placeholder tag: the one component every empty required field renders through. A tag with a green dot, a dashed
   edge and a stone fill, so it cannot be mistaken for copy in any band. */
.ph{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;max-width:100%;margin:4px 0;padding:10px 14px;border:1px dashed var(--ink-28);border-radius:var(--r);background:var(--stone);color:var(--ink);font-size:.9375rem;line-height:1.5;text-wrap:pretty}
.ph__tag{display:inline-flex;align-items:center;gap:7px;color:var(--ink);white-space:nowrap}
.ph__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.ph__note{color:var(--ink-80)}
.ph--block{display:flex;flex-direction:column;gap:8px;width:100%;margin:8px 0;padding:20px 22px}
.ph--block .ph__note{font-size:1.0625rem}
.glance .ph{margin:0;background:var(--white)}
.hero .ph,.results .ph,.cta .ph{background:transparent;border-color:var(--w-48);color:var(--white)}
.hero .ph__tag,.results .ph__tag,.cta .ph__tag{color:var(--white)}
.hero .ph__note,.results .ph__note,.cta .ph__note{color:var(--w-80)}
.ph-row{display:flex;flex-direction:column;gap:6px;margin:8px 0 20px}

/* Hero: an ink band carrying the mast, a short green rule, the eyebrow, a large calm headline, the deck and a tracked
   meta line. The photograph sits inside the header beneath the text and rises out of the band into the facts band:
   the header has no bottom padding, the figure carries a negative bottom margin, and the facts band clears it. */
.hero{position:relative;background:var(--ink);color:var(--white);padding:0}
.mast{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:6px;padding-bottom:6px;border-bottom:1px solid var(--w-16)}   /* 6 + 44 + 6: the band stays 56 px tall on a phone */
.mast__logo,.mast .tlink{display:inline-flex;align-items:center;min-height:44px}   /* 44 px tap targets, the image and the text centred inside */
.mast__logo img{height:16px;width:auto}
.mast .tlink{font-size:.9375rem}
.hero__in{padding-top:clamp(40px,7vw,96px)}
.eyebrow{position:relative;display:flex;align-items:center;gap:14px;padding-top:22px;margin-bottom:clamp(24px,3vw,36px)}
.eyebrow::before{content:"";position:absolute;top:0;left:0;width:48px;height:2px;background:var(--green)}
.eyebrow img{height:22px;width:auto}
.eyebrow span{color:var(--w-80)}
.hero h1{font-size:clamp(2.375rem,1.5rem + 3.4vw,4.5rem);font-weight:600;letter-spacing:-.03em;line-height:1.04;max-width:22ch}
.deck{margin-top:clamp(20px,2.5vw,32px);font-size:clamp(1.0625rem,1rem + .5vw,1.3125rem);line-height:1.55;color:var(--w-80);max-width:62ch;text-wrap:pretty}
.deck b,.deck strong{color:var(--white)}
.meta{margin-top:clamp(20px,2.5vw,32px);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.8;color:var(--w-48);max-width:72ch;font-variant-numeric:tabular-nums lining-nums}
.meta .stone{color:var(--w-80)}
.hero .tlink{min-height:44px;margin-top:clamp(16px,2.5vw,28px);color:var(--white)}   /* the smaller margin offsets the taller box, so the text sits where it did */
.hero-img{position:relative;z-index:1;margin:clamp(32px,6vw,80px) 0 calc(-1 * var(--rise))}
.hero-img img{width:100%;border-radius:var(--r);background:var(--stone)}

/* At a glance: a stone band holding one hairline row of labelled facts, label above value. One column on a phone,
   two on a tablet, five at desktop. The hairlines sit at ink 12 because the line colour vanishes on stone. */
.glance{background:var(--stone);padding:calc(var(--rise) + clamp(32px,5vw,64px)) 0 clamp(48px,6vw,80px)}
.glance h2{color:var(--ink-64);margin-bottom:16px}
.glance dl{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--ink-12)}
.glance dl > div{padding:18px 0;border-bottom:1px solid var(--ink-12)}
.glance dt{color:var(--ink-64);margin-bottom:8px}
.glance dd{font-size:1rem;line-height:1.5;color:var(--ink);text-wrap:pretty}
.glance dd a{border-bottom:1px solid var(--ink-28);transition:border-color .3s var(--ease)}
.glance dd a:hover{border-color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:.8125rem;font-weight:600;line-height:1.2;white-space:nowrap}

/* Results: an ink band, the page's spine. A short green rule, a calm heading, the figures in white in hairline
   divided columns, the footnote beneath its own hairline. One column on a phone, two on a tablet, one row at desktop. */
.results{background:var(--ink);color:var(--white);padding:var(--band) 0}
.results h2{position:relative;padding-top:22px;margin-bottom:clamp(28px,4vw,56px);font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);font-weight:500;letter-spacing:-.015em;line-height:1.2;max-width:30ch}
.results h2::before{content:"";position:absolute;top:0;left:0;width:48px;height:2px;background:var(--green)}
.results ul{display:grid;grid-template-columns:minmax(0,1fr)}
.results li{padding:22px 0;border-top:1px solid var(--w-16)}
.results li:first-child{padding-top:0;border-top:0}
.results b{display:block;font-size:clamp(2.5rem,1.6rem + 2.6vw,4rem);font-weight:600;letter-spacing:-.035em;line-height:1;white-space:nowrap;color:var(--white)}
.results li span{display:block;margin-top:12px;font-size:.9375rem;line-height:1.45;color:var(--w-64);max-width:22ch}
.results .foot{margin-top:clamp(28px,4vw,48px);padding-top:18px;border-top:1px solid var(--w-16);font-size:.8125rem;line-height:1.5;color:var(--w-48)}

/* The story: numbered sections under hairlines. On a phone and a tablet one column, the number above the heading, the
   text at the measure. At 1024 px and above each section becomes two columns: the number and the sticky heading on the
   left, everything else on the right at the measure. */
.story{max-width:var(--wrap);margin:0 auto;padding:clamp(32px,4vw,56px) var(--gut) clamp(64px,8vw,120px);font-size:1.0625rem;line-height:1.6}
.story section{padding:clamp(28px,3.5vw,44px) 0 clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.story section:first-child{border-top:0;padding-top:0}
.story section::before{content:attr(data-no);display:block;margin-bottom:12px;color:var(--ink-64);font-variant-numeric:tabular-nums lining-nums}
.story section > :not(h2){max-width:var(--measure)}
.story h2{font-size:clamp(1.625rem,1.25rem + 1vw,1.875rem);line-height:1.15;margin-bottom:24px}
.story p{margin-bottom:20px;text-wrap:pretty}
.story p:last-child{margin-bottom:0}
.story a{border-bottom:1px solid var(--ink-28);transition:border-color .3s var(--ease)}
.story a:hover{border-color:var(--ink)}
.story figure{margin:0 0 32px}
.story figure img{width:100%;border-radius:var(--r);background:var(--stone)}
.story figcaption{margin-top:12px;font-size:.875rem;line-height:1.5;color:var(--ink-64)}
.story .lead-in{font-size:1rem;color:var(--ink-64)}
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:16px;margin:0 0 24px;border-top:1px solid var(--line);font-size:1rem;line-height:1.5}
.facts li{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.facts b{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.facts li span{color:var(--ink-80)}
.facts li.noval span{grid-column:1 / -1;color:var(--ink)}

/* What we did: numbered work items, a hairline above each, the number and the name on one line, the result figure set
   large above its line, the figure beneath. */
.work{display:grid;gap:0;margin-top:8px}
.work__item{padding:22px 0 clamp(32px,4vw,44px);border-top:1px solid var(--line)}
.work__item:last-child{padding-bottom:0}
.work h3{display:flex;align-items:baseline;gap:14px;font-size:1.25rem;font-weight:600;letter-spacing:-.015em;margin-bottom:14px}
.work h3 .no{color:var(--ink-64);font-variant-numeric:tabular-nums lining-nums;flex:none}
.work__result{margin-top:26px;font-size:.9375rem;line-height:1.5;color:var(--ink-64)}
.work__result b{display:block;margin-bottom:8px;font-size:clamp(2rem,1.6rem + 1vw,2.5rem);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.work .ph-row{margin-bottom:0}
.work figure{margin:28px 0 0}

/* Pull line, tools line, result leads, the client's words */
.pull{margin:36px 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:1.25rem;font-weight:500;letter-spacing:-.02em;line-height:1.35;text-wrap:balance}
.tools{font-size:1rem}
.produced strong{font-weight:600}
.story .words{margin:8px 0 0;padding-left:24px;border-left:2px solid var(--green)}
.words blockquote{margin:0}
.words p{font-size:1.375rem;font-weight:500;letter-spacing:-.02em;line-height:1.35;text-wrap:balance}
.words figcaption{margin-top:18px;font-size:.875rem;color:var(--ink-64)}

/* How we would run this for you: a stone band. The logo, the heading and the lead-in, then two hairline ruled columns,
   then the agency line under its own hairline. At desktop the heading sits left and the columns right. */
.method{background:var(--stone);padding:var(--band) 0}
.method__logo{height:18px;width:auto;margin-bottom:clamp(28px,4vw,48px)}
.method h2{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);line-height:1.1;margin-bottom:14px;max-width:18ch}
.method .lead-in{font-size:1.0625rem;color:var(--ink-64);max-width:40ch;text-wrap:pretty}
.method__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:32px var(--gap);margin-top:clamp(28px,4vw,48px)}
.method h3{color:var(--ink-64);margin-bottom:10px}
.method ul li{padding:13px 0;border-top:1px solid var(--ink-12);font-size:1.0625rem;line-height:1.5}
.method ul li:last-child{border-bottom:1px solid var(--ink-12)}
.method__about{margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid var(--ink-12);font-size:1.0625rem;line-height:1.6;max-width:var(--measure);text-wrap:pretty}

/* Closing call: an ink band, centred, the short green rule, one pill button, the next case study beneath */
.cta{background:var(--ink);color:var(--white);padding:clamp(72px,9vw,128px) 0;text-align:center}
.cta h2{position:relative;padding-top:22px;margin:0 auto 18px;font-size:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);line-height:1.1;max-width:20ch}
.cta h2::before{content:"";position:absolute;top:0;left:50%;width:48px;height:2px;margin-left:-24px;background:var(--green)}
.cta p{font-size:1.0625rem;color:var(--w-80);max-width:46ch;margin:0 auto 36px;text-wrap:pretty}
.cta .next{margin:44px auto 0;font-size:.9375rem;color:var(--w-64)}
.cta .next a{color:var(--white);border-bottom:1px solid var(--w-48)}
.cta .next a:hover{border-color:var(--white)}

/* Footer: a hairline top rule, the logo left and the notes right */
footer.foot{padding:40px 0 56px;font-size:.8125rem;line-height:1.6;color:var(--ink-64);border-top:1px solid var(--line)}
footer.foot .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:20px var(--gap);align-items:start}
footer.foot img{height:18px;width:auto;margin-top:3px}
footer.foot p{max-width:80ch;text-wrap:pretty}
footer.foot p + p{margin-top:8px}
footer.foot .note{font-weight:600;color:var(--ink)}

/* Tablet and up */
@media (min-width:721px){
  body{font-size:1.0625rem}
  .mast{padding-top:18px;padding-bottom:18px}   /* 18 + 44 + 18: the band is 80 px tall from the tablet up */
  .mast__logo img{height:20px}
  .eyebrow{gap:18px}
  .eyebrow img{height:26px}
  .btn{white-space:nowrap}
  .glance dl{grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--ink-12)}   /* the band closes full width, whatever the item count */
  .glance dl > div{padding:22px 0}
  .glance dl > div:nth-child(odd){padding-right:28px}
  .glance dl > div:nth-child(even){padding-left:28px;border-left:1px solid var(--ink-12)}
  .glance dl > div:last-child,.glance dl > div:nth-child(odd):nth-last-child(2){border-bottom:0}   /* the last row's cells drop their own rule so it is not doubled */
  .results ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .results li{padding:26px 28px 6px 0;border-top:1px solid var(--w-16)}
  .results li:first-child{border-top:0}
  .results li:nth-child(2){padding-top:0;border-top:0}
  .results li:nth-child(even){padding-left:28px;padding-right:0;border-left:1px solid var(--w-16)}
  .story{font-size:1.125rem}
  .story .lead-in{font-size:1.0625rem}
  .facts{column-gap:20px;font-size:1.0625rem}
  .tools{font-size:1.0625rem}
  .pull{font-size:1.5rem}
  .words p{font-size:1.625rem}
  .method__logo{height:20px}
  .method__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta p{font-size:1.125rem}
  footer.foot .wrap{grid-template-columns:minmax(140px,1fr) minmax(0,4fr)}
}

/* Desktop: the two column story, the five column facts row, the one row of results, the split method band */
@media (min-width:1024px){
  .glance dl{grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--ink-12)}
  .glance dl > div:nth-child(odd),.glance dl > div:nth-child(even){padding:24px 24px 28px 24px;border-bottom:0;border-left:1px solid var(--ink-12)}
  .glance dl > div:nth-child(5n+1){padding-left:0;border-left:0}
  .glance dl > div:last-child{padding-right:0}
  .glance dl > div:nth-child(n+6){border-top:1px solid var(--ink-12)}
  .glance dd{font-size:.9375rem}
  .results ul{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .results li:nth-child(odd),.results li:nth-child(even){padding:0 24px 8px 24px;border-top:0;border-left:1px solid var(--w-16)}
  .results li:first-child{padding-left:0;border-left:0}
  .results li:last-child{padding-right:0}
  /* Each story section is a grid: the number in row 1 of the left column, the heading beneath it spanning every row
     that follows so it can stick, the first body element level with the number, every other body element in its own
     row on the right. Rows carry no gap; the vertical rhythm is the elements' own margins. */
  .story section{display:grid;grid-template-columns:var(--aside) minmax(0,1fr);column-gap:var(--gap);row-gap:0;align-items:start}
  .story section::before{grid-column:1;grid-row:1;margin:0 0 10px;padding-top:7px}
  .story h2{grid-column:1;grid-row:2 / span 60;position:sticky;top:var(--stick);align-self:start;margin:0;padding-right:16px;padding-bottom:24px}
  .story section > :not(h2){grid-column:2}
  .story h2 + *{grid-row:1 / span 2}
  .method .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gap);align-items:start}
  .method__logo{grid-column:1;grid-row:1}
  .method h2{grid-column:1;grid-row:2}
  .method .lead-in{grid-column:1;grid-row:3}
  .method__cols{grid-column:2;grid-row:1 / span 4;margin-top:0}
  .method__about{grid-column:1 / -1;grid-row:5;max-width:none;padding-right:35%}   /* the hairline runs the full width; the text keeps to about the measure */
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .btn:hover,.btn:active{transform:none}
  .story h2{position:static}
}

@media print{
  .hero,.results,.cta{background:var(--white);color:var(--ink)}
  .mast,.hero .tlink,.cta{display:none}
  .eyebrow span,.deck,.meta,.meta .stone,.results b,.results li span,.results .foot{color:var(--ink)}
  .results li,.results .foot{border-color:var(--line)}
  .hero-img{margin-bottom:0}
  .glance{padding-top:32px}
  .story section,.method .wrap{display:block}
  .story h2{position:static;margin-bottom:16px}
  .story figure img,.hero-img img{border-radius:0}
}