/* WEB-26AB modernisation layer, PREVIEW.
   Scoped to body.m26 ON PURPOSE, the d3-document.css precedent: it cannot reach a page that
   does not opt in, and only index.html opts in. Identity is locked: Archivo, the direction.css
   colour tokens, square surfaces, Copper as accent only. This file changes COMPOSITION ONLY.
   Copy is protected data and none of it lives here. */

body.m26{--t1:180ms;--t2:260ms;--t3:400ms}

/* ------------------------------------------------------------ canvas and scale
   Visual canvas widened to about 1480px on a 12-column grid. Mobile keeps 16px gutters,
   which is what the narrow-container gate measures at a true 390px viewport. */
.m26 .wrap{width:min(1480px,calc(100% - 96px))}
@media(max-width:1100px){.m26 .wrap{width:calc(100% - 56px)}}
@media(max-width:760px){.m26 .wrap{width:calc(100% - 32px)}}

/* the doubled .section beats direction.css's main>section:not(...) rule, (0,3,2) against
   (0,3,2), by coming later in the cascade. A single class here silently loses. */
.m26 main .section.section{padding-block:104px}
@media(max-width:760px){.m26 main .section.section{padding-block:72px}}

.m26 h1{font-size:clamp(42px,4.7vw,68px);line-height:1.02;letter-spacing:-.045em}
/* scoped to main: an unscoped .m26 h2 sat at the same specificity as direction.css's
   .footer-grid h2 and, coming later, inflated the 11px footer labels to display size. At a
   768px viewport "Contact EightPillars" then could not fit its column and the page scrolled
   sideways (site gate, 26/9). The footer keeps its own labels. */
.m26 main h2{font-size:clamp(36px,3.5vw,52px)}
.m26 main h3{font-size:clamp(26px,2.2vw,30px)}
/* the same leak reached direction.css's 23px company-details headings on /contact and
   made "Discuss the next step" a two-line 52px heading beside two one-liners; this keeps
   the row's own scale, a little up from 23 to match the layer */
.m26 .contact-details h2{font-size:clamp(23px,1.8vw,26px)}
/* a telephone number never breaks across lines */
.m26 a[href^="tel:"]{white-space:nowrap}
.m26 .lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55}

/* ------------------------------------------------------------ hero
   THE HERO IMAGE RENDERS IMMEDIATELY AND IS NEVER ANIMATED FROM INVISIBLE. Nothing in this
   layer puts opacity, transforms or transitions anywhere near the hero picture. */
.m26 .home-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px;align-items:end;padding-block:56px 84px}
.m26 .home-hero .hero-copy{grid-column:1/6;display:flex;flex-direction:column;gap:30px;padding-bottom:18px}
.m26 .home-hero figure{grid-column:6/13;margin:0}
.m26 .home-hero .hero-copy p{max-width:44ch}
.m26 .home-hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
@media(max-width:980px){
  .m26 .home-hero{display:flex;flex-direction:column;align-items:stretch;gap:34px;padding-block:34px 48px}
}

/* ------------------------------------------------------------ authority rail */
.m26 .m26-rail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:28px}
.m26 .m26-rail-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px 32px}
.m26 .m26-rail-grid p{grid-column:span 4;margin:0;font-size:14px;line-height:1.6;color:var(--grey);max-width:none}
@media(max-width:900px){.m26 .m26-rail-grid{grid-template-columns:minmax(0,1fr);gap:18px 0}.m26 .m26-rail-grid p{grid-column:1;min-width:0}}

/* ------------------------------------------------------------ selected work */
.m26 .m26-case{display:block;margin-bottom:72px}
.m26 .m26-case .case-caption{display:grid;grid-template-columns:repeat(12,1fr);gap:8px 32px;margin-top:26px}
.m26 .m26-case .case-caption .eyebrow{grid-column:1/13;margin-bottom:0}
.m26 .m26-case .case-caption .proof-label{grid-column:1/5}
.m26 .m26-case .case-caption h3{grid-column:5/10}
.m26 .m26-case .case-caption .text-link{grid-column:10/13;justify-self:end;align-self:baseline}
.m26 .case-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:56px 32px}
.m26 .case-grid article{grid-column:span 6}
.m26 .case-grid .case-caption{margin-top:22px}
@media(max-width:900px){
  .m26 .case-grid{grid-template-columns:minmax(0,1fr);gap:56px 0}
  .m26 .case-grid article{grid-column:1;min-width:0}
  .m26 .m26-case .case-caption{display:block}
  .m26 .m26-case .case-caption .proof-label{display:block;margin-bottom:10px}
  .m26 .m26-case .case-caption h3{margin-bottom:14px}
  .m26 .m26-case{margin-bottom:56px}
}

/* restrained motion, and none of it for readers who asked for none */
.m26 .image-link{display:block;overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .m26 .image-link img{transition:transform var(--t3) ease}
  .m26 .image-link:hover img,.m26 .image-link:focus-visible img{transform:scale(1.02)}
  .m26 .offer-list h3,.m26 .text-link,.m26 .button{transition:color var(--t1) ease,background var(--t1) ease,border-color var(--t1) ease}
}

/* ------------------------------------------------------------ services as clean routes */
.m26 .offer-list{display:block;border-top:1px solid var(--line)}
.m26 .offer-list>a{display:block;text-decoration:none;border-bottom:1px solid var(--line)}
.m26 .offer-list>a>div{display:grid;grid-template-columns:repeat(12,1fr);gap:6px 32px;align-items:baseline;padding:30px 0}
.m26 .offer-list .offer-audience{grid-column:8/13;grid-row:1;justify-self:end;text-align:right}
.m26 .offer-list h3{grid-column:1/5;grid-row:1;margin:0}
.m26 .offer-list p{grid-column:1/8;grid-row:2;margin:0;color:var(--grey)}
.m26 .offer-list>a:hover h3,.m26 .offer-list>a:focus-visible h3{color:var(--copper-dark)}
@media(max-width:900px){
  .m26 .offer-list>a>div{display:block;padding:24px 0}
  /* justify-self and grid-area belong to the desktop grid; left in place they pinned the
     label to the right edge of the stacked row (WEB-26M) */
  .m26 .offer-list .offer-audience{display:block;text-align:left;margin-bottom:8px;justify-self:auto;grid-area:auto}
  .m26 .offer-list h3{margin-bottom:6px}
}

/* ------------------------------------------------------------ credibility and close */
.m26 .m26-credibility .scope-note{margin-top:0;padding-top:0;border-top:0;font-size:17px;color:var(--ink)}
.m26 .m26-credibility .small-note{font-size:15px;margin-top:14px}
.m26 .m26-credibility .eyebrow{margin-bottom:18px}
.m26 .closing .closing-inner{align-items:end}

/* ============================================================ Part E: every page
   The same canvas, scale and motion as the homepage. Desktop composition rules sit inside a
   min-width query so direction.css's mobile rules, which reset heights and stack grids below
   760px, keep winning where they should. Nothing here touches copy. */

/* shared heroes: copy left, principal image right, on the 12-column canvas */
@media(min-width:981px){
  .m26 .feature-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px;align-items:end;padding-block:56px 84px}
  .m26 .feature-hero>div{grid-column:1/6}
  .m26 .feature-hero>figure{grid-column:6/13;margin:0}
  .m26 .feature-hero .hero-landscape{height:auto;aspect-ratio:16/10}
  .m26 .feature-hero .hero-landscape img{object-position:50% 50%}
  .m26 .text-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px;align-items:center;padding-block:64px 84px}
  .m26 .text-hero>*:first-child{grid-column:1/8}
  .m26 .text-hero>*:last-child{grid-column:8/13}
  .m26 .contact-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px;align-items:center;padding-block:72px 84px}
  .m26 .contact-hero>*:first-child{grid-column:1/8}
  .m26 .contact-hero>.contact-primary{grid-column:8/13}
  .m26 .page-intro{padding-block:72px 56px}
  .m26 .page-intro .lead{max-width:56ch}
  /* case studies breathe on the wider canvas */
  .m26 .project-evidence-photos{height:600px;gap:16px;margin:40px 0}
  /* the six-frame variant is two rows and sizes itself from its frames; without this the
     600px clamp above beat direction.css's height:auto at equal specificity and the second
     row ran 96px past the box into the notes (review, 26/9) */
  .m26 .project-evidence-photos.project-evidence-six{height:auto}
  .m26 .project-evidence-photos.project-evidence-six>.photo{height:340px}
  .m26 .story-heading{gap:48px;margin-bottom:36px}
  .m26 .closing{padding-block:96px}
  .m26 .closing-inner{align-items:end}
  .m26 .closing h2{max-width:18ch}
  /* desktop only: unqueried, align-items:center outranked direction.css's mobile
     flex-start and centred the stacked hero actions under left-aligned copy at 390px */
  .m26 .feature-hero .actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:6px}
}
.m26 .feature-hero h1,.m26 .text-hero h1,.m26 .contact-hero h1{margin-bottom:22px}
.m26 .contact-primary .contact-role{margin:18px 0 0;font-family:Plex,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#ddaa88}
.m26 .contact-primary .contact-email{padding:12px 0 18px}
@media(max-width:980px) and (min-width:761px){
  .m26 .feature-hero,.m26 .text-hero,.m26 .contact-hero{display:flex;flex-direction:column;align-items:stretch;gap:34px;padding-block:40px 56px}
  .m26 .feature-hero .hero-landscape{height:auto;aspect-ratio:4/3}
}
@media(max-width:760px){
  .m26 .closing{padding-block:56px}
}

/* ============================================================ WEB-26M composition fixes
   Nine layout nits listed in the WEB-26L report. Composition only, no copy. Each rule was
   tried live in a browser and measured before it was written here. */

/* 1  no one-word orphan line in an h1 below the desktop grid ("builder." alone at 768) */
@media(max-width:980px){.m26 h1{text-wrap:balance}}

/* 2  caption rows: proof label, heading and link share a first baseline */
.m26 .m26-case .case-caption{align-items:baseline}

/* 3  phone: the last frame of a gallery that would sit alone in half a row spans the row.
      Six-frame galleries run 1 + 2 + 2 + 1, and a two-frame band runs 1 + 1. The
      four-frame variant is 2 x 2 and is left alone. */
@media(max-width:760px){
  .m26 .project-evidence-photos:not(.project-evidence-four)>.photo:last-child:nth-child(even),
  .m26 .rectification-proof-six>.photo:last-child:nth-child(even){grid-column:1/-1}
  .m26 .project-evidence-six>.photo:last-child:nth-child(even),
  .m26 .rectification-proof-six>.photo:last-child:nth-child(even){height:250px}
}

/* 4  tablet: the story heading stacks above its note instead of squeezing to a 250px column */
@media(min-width:761px) and (max-width:980px){
  .m26 .story-heading{display:block;margin-bottom:30px}
  .m26 .story-heading>p{margin-top:20px;max-width:62ch}
}

/* 5  a card with no photograph takes its own height instead of stretching to its neighbour's */
.m26 .evidence-case-grid>article:not(:has(picture)){align-self:start}

/* 6  /about: the company section uses the width, heading left and prose right */
@media(min-width:981px){
  .m26 .company-delivery>.wrap:has(>.evidence-prose){display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;align-items:start}
  .m26 .company-delivery>.wrap:has(>.evidence-prose)>.section-head{grid-column:1/6;margin:0;display:block}
  .m26 .company-delivery>.wrap:has(>.evidence-prose)>.evidence-prose{grid-column:6/13;max-width:none}
}

/* 7  /capability: air between the "Made to order" heading and its lead */
.m26 #downloads .section-head h2{margin-bottom:26px}

/* ============================================================ WEB-26N
   /about portrait slot. The empty 168 x 224 Ink box that stood for the Director's portrait is
   hidden until a photograph is supplied. The markup stays in about.html, at the end of the
   Delivery column, with the `hidden` attribute. TO REVEAL: put the photograph inside the div
   as a <picture> with alt text, keep the size from direction.css (.portrait-slot), and delete
   the `hidden` attribute. This rule makes sure no author display value can show it early. */
.m26 .portrait-slot[hidden]{display:none}