/* ==========================================================================
   Leadwood Systems - TNA case study
   Extracted from the Claude Design handoff bundle
   (docs/design_handoff_leadwood_website/Leadwood TNA Case Study.html).
   Page-scoped: every rule below applies only under .case-study.
   ========================================================================== *//* @font-face for 'Inter' removed — served by the Google Fonts link in base.njk. *//* @font-face for 'Playfair Display' removed — served by the Google Fonts link in base.njk. *//* The page background, body colour, dark surface and both typefaces are taken
   from leadwoodsystems.co.za so the two read as one company. The brass accent
   below is this page's own layer on top of that — the site has no gold. */





.case-study, :root {/* Recorded here rather than used here: the figure boxes carry this fill as an
     SVG presentation attribute, which no var() can reach. It is the brand's
     surface tint, and this is where to change it if the palette moves. *//* Secondary surface. The brand's button charcoal, lifted clear of the
     body-text #222 so the dark zones separate from the running text without
     going to black. Neutral, as the site is — the warmth is all in the cream. *//* Amber at its band value is only ~3.5:1 on cream — fine as a fill, short of
     the mark as running text. This is the same hue taken down to 4.7:1 for
     wherever the word "amber" is actually set in its own colour. *//* Brass has the same problem: 3.6:1 on cream. Same remedy — 4.7:1 for the
     places brass is text, while --brass itself stays put for the rules and
     borders it draws, where contrast ratios do not apply. */
  --cream:#F6F2E9; --paper:#FBFAF5;
  
  --surface:#ECE6D6;
  --charcoal:#1B1A16; --brass:#A2854C; --slate:#6A6353;
  --rule:rgba(27,26,22,.16); --rule-soft:#DED6C4;
  --green:#4A6741; --amber:#A8762F; --red:#9B4A3A;

  
  --charcoal-2:#4A4538;
  --brass-lift:#E8D9AE;
  --cream-dim:rgba(246,242,233,.60);

  
  --amber-ink:#8A5F1E;

  
  --brass-ink:#8A6D3C;

  --display:'Playfair Display',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
.case-study *, .case-study *::before, .case-study *::after {box-sizing:border-box}
.case-study {-webkit-text-size-adjust:100%}
.case-study {margin:0;background:var(--cream);color:var(--charcoal);font-family:var(--sans);
  font-size:16px;font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.case-study .wrap {max-width:70rem;margin:0 auto;padding:0 2rem}
.case-study .narrow {max-width:37rem}
.case-study section {padding:5rem 0;border-top:1px solid var(--rule-soft)}
.case-study section:first-of-type {border-top:none}/* Tracking follows the site, which means it goes positive below the top size.
   Negative tracking is a sans habit; a high-contrast serif wants the opposite,
   and Playfair's thin strokes close up badly if it is carried over. */


.case-study h1, .case-study h2, .case-study h3, .case-study h4 {font-family:var(--display);font-weight:400;margin:0;letter-spacing:0}/* Sized for a five-word title rather than the two-word one this replaced:
   smaller ceiling, a measure that forces a sensible break, and balance so the
   lines land evenly instead of leaving one orphan word. */

.case-study h1 {font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.06;letter-spacing:-.01em;
  max-width:19ch;text-wrap:balance}
.case-study h2 {font-size:clamp(1.6rem,2.7vw,2.15rem);line-height:1.2;letter-spacing:.015em;margin-bottom:1.25rem}
.case-study h3 {font-size:1.06rem;font-weight:500;letter-spacing:.02em;margin-bottom:.4rem}
.case-study p {margin:0 0 1.2rem}.case-study p:last-child {margin-bottom:0}
.case-study a {color:inherit;border-bottom:1px solid var(--brass);text-decoration:none}
.case-study a:hover {color:var(--brass)}
.case-study code {font-family:var(--mono);font-size:.86em;background:rgba(34,34,34,.055);
  padding:.12em .38em;border-radius:2px;word-break:normal}
.case-study .lede {font-size:1.2rem;line-height:1.58;color:var(--slate)}
.case-study .muted {color:var(--slate)}
.case-study .label {font-size:.68rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--brass-ink);margin-bottom:1.6rem}/* highlights *//* A swipe that sits under the baseline rather than a full mark, so a figure
   is picked out of a paragraph without stopping the line being read. */



.case-study .key {background:linear-gradient(to top,rgba(145,127,93,.22) 0 .44em,transparent .44em);
  padding:0 .1em;font-weight:600}/* The product bands capability red/amber/green at fixed thresholds. Where the
   page names a band, it is set in that band's own colour and carries the
   swatch — the colour is the subject, not decoration on top of it. *//* No nowrap: the swatch is generated content with no space after it, so it
   cannot be orphaned from the first word, and holding a whole phrase together
   would overflow the measure on a narrow screen. */


.case-study .rag {font-weight:600}
.case-study .rag::before {content:"";display:inline-block;width:.52em;height:.52em;
  margin-right:.4em;vertical-align:.02em;background:currentColor}
.case-study .rag-g {color:var(--green)}
.case-study .rag-a {color:var(--amber-ink)}
.case-study .rag-a::before {background:var(--amber)}
.case-study .rag-r {color:var(--red)}/* masthead + hero */


.case-study .masthead {padding:2.75rem 0 0}
.case-study .mh {display:flex;align-items:center;justify-content:space-between;gap:2rem}
.case-study .mark {width:4.5rem;height:auto;display:block;fill:currentColor}/* The mark's own path carries fill="#111111", which beats the fill on the svg
   element and would leave it near-invisible on the charcoal footer. A CSS
   declaration outranks a presentation attribute, so this is what makes the
   mark follow its surroundings. */

.case-study .mark path, .case-study .fmark path {fill:currentColor}
.case-study .mh .meta {font-size:.67rem;letter-spacing:.17em;text-transform:uppercase;color:var(--slate);
  text-align:right;line-height:1.95}
.case-study .hero {padding:4.5rem 0 4rem}
.case-study .hero h1 {margin-bottom:1.75rem}
.case-study .hero .lede {max-width:34rem}
.case-study .facts {display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:2rem;
  margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--rule)}
.case-study .fact dt {font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--brass-ink);margin-bottom:.45rem}
.case-study .fact dd {margin:0;font-size:.94rem;line-height:1.5}/* figures */


.case-study figure {margin:2.75rem 0 0}
.case-study figure img {display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--paper)}
.case-study figcaption {margin-top:.9rem;font-size:.82rem;line-height:1.6;color:var(--slate);max-width:44rem}
.case-study figcaption b {color:var(--charcoal);font-weight:600}
.case-study .svgfig {border:1px solid var(--rule);background:var(--paper);padding:1.75rem 1.5rem}
.case-study .svgfig svg {display:block;width:100%;height:auto;color:var(--charcoal)}/* spec table */


.case-study .spec {width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:.9rem}
.case-study .spec th, .case-study .spec td {text-align:left;padding:.62rem .9rem .62rem 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.case-study .spec th {font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-ink);font-weight:500}
.case-study .spec td:last-child {color:var(--slate)}
.case-study .spec td code {white-space:nowrap}/* stat band — the one dark zone in the body, and the page's single loud
   moment. The section rule above it is a dark hairline that would vanish
   here, so it is dropped rather than left showing as a seam. */


.case-study .band {background:var(--charcoal-2);color:var(--cream);border-top-color:transparent;
  padding:5.5rem 0}
.case-study .band .label {color:var(--brass-lift)}
.case-study .stats {display:grid;grid-template-columns:repeat(6,1fr);gap:2.5rem 1.5rem}/* 400, not 300: Playfair Display's variable range stops at 400, so a lighter
   value here buys a synthesised fake-light rather than a lighter cut. Same
   reason for .pull and .tagline below. */

.case-study .stat .n {font-family:var(--display);font-size:2.35rem;font-weight:400;line-height:1;
  letter-spacing:-.01em;display:block;margin-bottom:.5rem}
.case-study .band .stat .n {color:var(--brass-lift)}
.case-study .stat .k {font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);line-height:1.55}
.case-study .band .stat .k {color:var(--cream-dim)}/* misc blocks */


.case-study .two {display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.case-study .note {border-left:2px solid var(--brass);padding:.15rem 0 .15rem 1.35rem;margin:2rem 0;
  font-size:.94rem;color:var(--slate);max-width:40rem}
.case-study .note b {color:var(--charcoal);font-weight:600}/* Red rule for a note that records a trap rather than an aside. */

.case-study .note-r {border-left-color:var(--red)}
.case-study .note-r b {color:var(--red)}
.case-study .items {margin-top:2.25rem}
.case-study .item {padding:1.5rem 0;border-top:1px solid var(--rule-soft)}
.case-study .item p {margin:0;color:var(--slate);max-width:42rem;font-size:.95rem}
.case-study .pull {font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.34;letter-spacing:0;max-width:38rem;margin:0}
.case-study .pull cite {display:block;margin-top:1.5rem;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--brass-ink);font-style:normal}/* The footer takes the same charcoal, so the piece closes on the surface it
   turned at the Scale band instead of trailing off on cream. */


.case-study footer {padding:5rem 0 4.5rem;border-top:none;background:var(--charcoal-2);color:var(--cream)}
.case-study .fi {display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;flex-wrap:wrap}
.case-study .fmark {width:5.5rem;height:auto;fill:currentColor;display:block;margin-bottom:1.4rem}
.case-study .tagline {font-family:var(--display);font-size:1.2rem;font-weight:400;color:var(--brass-lift)}
.case-study .fmeta {font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-dim);
  line-height:2;text-align:right}
.case-study footer a {border-bottom-color:var(--brass-lift)}
.case-study footer a:hover {color:var(--brass-lift)}/* --- structural spine ------------------------------------------------------
   The page argues that one definition should serve every consumer, so the
   layout is given the same shape: a single hairline runs the length of the
   document and each section hangs its number and its subject off it. Wide
   viewports only — below that the eyebrow stays in the text column, which is
   where the markup puts it. */


@media (min-width:1160px){
  .case-study {counter-reset:sec}
  .case-study .wrap[data-label] {position:relative;counter-increment:sec;padding-left:11rem;
    background:linear-gradient(var(--rule),var(--rule)) 8.6rem 0/1px 100% no-repeat}/* Numbers are mono so 01 and 08 occupy the same width and the column reads
     as a stack rather than as ragged text. */
  
  .case-study .wrap[data-label]::before {content:counter(sec,decimal-leading-zero);position:absolute;
    left:2rem;top:.05rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;
    color:var(--brass-ink)}
  .case-study .wrap[data-label]::after {content:attr(data-label);position:absolute;left:2rem;top:2.15rem;
    width:6.1rem;font-size:.66rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
    color:var(--slate);line-height:1.6}
  .case-study .wrap[data-label] .narrow>.label {display:none}/* The dark band and the closing quote take the same indent without a number:
     they are turns in the argument, not further sections of it. */
  
  .case-study .band .wrap[data-indent], .case-study .wrap[data-indent] {padding-left:11rem}
}/* --- entrance ---------------------------------------------------------------
   One short fade and a 12px lift, once, on the way in. No reverse animation,
   no stagger, nothing that repeats on the way back up. The class is added by
   script, so with JS off or IntersectionObserver missing the page is simply
   fully visible. */


@media (prefers-reduced-motion:no-preference){
  .case-study.js-rise [data-rise] {opacity:0;transform:translateY(12px)}
  .case-study.js-rise [data-rise].in {opacity:1;transform:none;
    transition:opacity .55s cubic-bezier(.33,0,.2,1),transform .62s cubic-bezier(.22,.61,.36,1)}
}

@media (max-width:860px){
  .case-study .wrap {padding:0 1.35rem}
  .case-study section {padding:3.25rem 0}/* .band and footer set padding on a class/element rule that the plain
     `section` selector above cannot override, so they are trimmed by name. */
  
  .case-study .band {padding:3.5rem 0}
  .case-study footer {padding:3.5rem 0 3rem}
  .case-study .hero {padding:2.5rem 0 3rem}
  .case-study .stats {grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .case-study .two {grid-template-columns:1fr;gap:2rem}
  .case-study .mh {flex-direction:column;align-items:flex-start;gap:1rem}
  .case-study .mh .meta, .case-study .fmeta {text-align:left}
  .case-study .fi {flex-direction:column;align-items:flex-start}
  .case-study .svgfig {padding:1.1rem .85rem}
}/* Anything mid-transition when the print dialog opens would print faded. */

@media print{.case-study.js-rise [data-rise] {opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:no-preference){.case-study a {transition:color .18s ease}}

@media print{
  @page{margin:15mm}
  .case-study {background:#fff;color:#000;font-size:10pt;line-height:1.5}
  .case-study .wrap {max-width:none;padding:0 4mm}
  .case-study section {padding:1.2rem 0;break-inside:avoid}/* Both charcoal zones revert to paper. Printing them would cost a page of
     ink each and read worse, and their light-on-dark text has to come back
     with them or it prints invisibly. */
  
  .case-study .band, .case-study footer {background:transparent;color:#000;padding:1.2rem 0}
  .case-study .band .stat .n, .case-study .band .label, .case-study .tagline {color:#000}
  .case-study .band .stat .k, .case-study .fmeta {color:#333}
  .case-study .key {background:none;text-decoration:underline;text-underline-offset:.18em}
  .case-study figure, .case-study .svgfig, .case-study .item, .case-study table {break-inside:avoid}
  .case-study figure img {max-height:88mm;object-fit:contain;object-position:left}
  .case-study h1 {font-size:26pt;max-width:none}.case-study h2 {font-size:14pt}
  .case-study .stat .n {font-size:17pt}
  .case-study a {border-bottom:none}
  .case-study .mark, .case-study .fmark {width:3.2rem}
}/* ---- Aligned with the Leadwood Systems homepage system ---- */



.case-study, :root {
  --cream:#F6F2E9; --paper:#FBFAF5; --surface:#F0EBDF;
  --charcoal:#1B1A16; --charcoal-2:#4A4538;
  --brass:#A2854C; --brass-ink:#8A6D3C; --brass-lift:#E8D9AE;
  --slate:#6A6353;
  --rule:#DED6C4; --rule-soft:rgba(27,26,22,.08);
  --cream-dim:rgba(246,242,233,.66);
  --mono:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
.case-study {scroll-behavior:smooth;scroll-padding-top:6.5rem}
/* The site paints an ambient branch as a fixed body::before at z-index 0, so a
   static article renders underneath it — the motif was landing on top of the
   running text and the product screenshots. Every other page section answers
   this the same way: position:relative and z-index:1. The fill goes with it.
   --cream is the body's own ground, so painting it here only walls the branch
   off completely; leaving the article transparent puts the motif back where it
   belongs, behind the page rather than over it. */
.case-study {background:transparent;position:relative;z-index:1}
.case-study .wrap[id] {scroll-margin-top:6.5rem}
.case-study .provenance {display:flex;align-items:flex-start;gap:1.4rem;margin-top:2.5rem;padding:1.35rem 1.6rem;
  background:var(--paper);border:1px solid var(--rule);border-left:2px solid var(--brass);border-radius:7px;
  box-shadow:0 1px 1px rgba(27,26,22,.03),0 10px 28px -16px rgba(27,26,22,.2);max-width:52rem}
.case-study .provenance .prov-k {font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-ink);padding-top:.22rem;white-space:nowrap}
.case-study .provenance p {margin:0;font-size:.9rem;line-height:1.75;color:var(--slate)}
@media (max-width:860px){.case-study .provenance {flex-direction:column;gap:.7rem}}
.case-study ::selection {background:#ECE2CC;color:var(--charcoal)}/* masthead — matches the site header: sticky, hairline, bone */


.case-study .masthead {position:sticky;top:0;z-index:60;padding:14px 0;
  background:rgba(251,250,245,.9);backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--rule)}
.case-study .masthead .mark {width:2.4rem}
.case-study .mh .meta {font-size:.66rem;letter-spacing:.16em;color:var(--slate)}
.case-study .masthead .wrap.mh {max-width:76rem}

.case-study .backlink {display:inline-flex;align-items:center;gap:.6rem;font-size:.68rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);border-bottom:none;
  margin-bottom:2.2rem}
.case-study .backlink:hover {color:var(--brass-ink)}
.case-study .backlink-arrow {display:inline-block;transition:transform .18s ease}
.case-study .backlink:hover .backlink-arrow {transform:translateX(-3px)}/* running text — a longer, calmer measure */


.case-study section {padding:6.5rem 0}
.case-study .narrow {max-width:39rem}
.case-study .narrow p {font-size:1.075rem;line-height:1.9;margin-bottom:1.45rem}
.case-study .narrow p:first-of-type {font-size:1.14rem;line-height:1.85;color:#353128}
.case-study h2 {margin-bottom:1.5rem;letter-spacing:-.01em}
.case-study h2+p {margin-top:.2rem}
.case-study h3 {font-size:1.1rem;letter-spacing:.01em;margin-bottom:.55rem}
.case-study .lede {font-size:1.28rem;line-height:1.62;color:#4A4538;font-weight:300}
.case-study figure {margin-top:3.25rem}
.case-study figure img {border:1px solid var(--rule);border-radius:7px;
  box-shadow:0 1px 1px rgba(27,26,22,.03),0 10px 28px -14px rgba(27,26,22,.22)}
.case-study .svgfig {border-radius:7px;box-shadow:0 1px 1px rgba(27,26,22,.03),0 10px 28px -14px rgba(27,26,22,.22)}
.case-study figcaption {font-size:.85rem;line-height:1.7}
.case-study .label {color:var(--brass-ink);letter-spacing:.2em}
.case-study .band {padding:6.5rem 0}
.case-study .stat .n {color:var(--cream)}
.case-study footer {background:var(--charcoal-2)}
.case-study .tagline {color:var(--brass-lift)}
/* The structural spine above is the whole side index: each section hangs its
   own number and subject in the gutter. A fixed floating rail was tried here
   and removed — it sat on the spine line, so it collided with the hero, which
   carries no gutter indent. Nothing above may re-suppress the pseudo-elements
   the spine draws. */
@media print{.case-study .backlink {display:none}}