/* ════════════════════════════════════════════════════════════
   T-1149 — TEMPLATE: light reading grounds, black separation,
   contained images, sharp-against-soft shapes.

   Scope: services/consulting, services/marketing,
          services/strategy-publicity, case-studies, tools, sister.

   WHY THIS FILE EXISTS AND NOT site.css: several agents are editing
   this repo at once and site.css is the collision point. Everything
   here is opt-in by class, so it cannot leak onto a page that has
   not asked for it.

   WHY PER-SECTION AND NOT body: an earlier attempt flipped
   `body { background: bone }` and broke every full-bleed backdrop —
   heroes and closing CTAs legitimately own dark photo/video grounds.
   A section opts in with .t-lite. Nothing else changes.
   ════════════════════════════════════════════════════════════ */

/* ── 1 · THE LIGHT READING GROUND ────────────────────────────
   The mechanism is TOKEN RE-SCOPING, not a pile of descendant
   overrides. site.css paints all of its on-dark text through four
   custom properties (--on-black, --on-black-mute, --on-black-faint,
   --red-text) and its hairlines through --rule-on-black. Redefining
   those five inside .t-lite re-colours every descendant that already
   uses them — .sv-h2, .sv-lede, .eyebrow, .cap-item, .cs-card, the
   lot — without this file having to know each one by name. That is
   what stopped the previous attempts: they targeted `main > section`
   and a handful of classes, and missed everything nested deeper.

   Contrast, measured on the COMPOSITED colour against #faf8f3:
     --ink   #0a0a0a  19.6:1
     --red   #c8102e   5.58:1  (safe for small text ON BONE; it is
                                NOT safe on ink, which is why
                                --red-text exists in the first place)
     #3d3d3a           9.9:1   (muted body)
     #5c5c58           6.3:1   (faint meta)
   No alpha in the text colours here — alpha is what produced the
   1.00:1 eyebrow that shipped once already. */
.t-lite {
  --on-black: var(--ink);
  --on-black-mute: #3d3d3a;
  --on-black-faint: #5c5c58;
  /* SMALL RED TEXT ON BONE. --red (#c8102e) computes to 5.58:1 here, so
     on paper it passes. Measured on real painted pixels it does not:
     these labels are 0.58-0.62rem uppercase mono, and at that weight
     almost every glyph pixel is an anti-aliased blend rather than the
     declared colour, so .cs-card__class and .csi__sector came back at
     4.12-4.17:1 and .pr-step__num at 2.58:1. #a50d26 is the site's
     existing button-hover red, not a new value, and computes to
     7.40:1 — enough headroom that the ANTI-ALIASED result still
     clears 4.5:1. Large display type keeps --red; it only needs 3:1
     and is thick enough to render at its declared colour. */
  --red-text: #a50d26;
  --rule-on-black: rgba(10, 10, 10, .14);
  --fg-rgb: 10, 10, 10;

  /* /tools T.03 draws its three cards with INLINE
     `background: var(--step-card-bg)`. An inline style cannot be
     beaten by any stylesheet rule short of !important — but the
     VARIABLE it resolves is inherited, so re-scoping the token here
     recolours the card without touching the markup or reaching for
     !important. Same for the two hairline/muted tokens beside it.
     #f2eee6 is a half-step down from bone so the card still reads as
     a panel; ink on it measures 18.4:1. */
  --step-card-bg: #f2eee6;
  --hairline-20: rgba(10, 10, 10, .20);
  --muted-40: rgba(10, 10, 10, .62);

  position: relative;
  background: var(--bone);
  color: var(--ink);
}

/* SPECIFICITY. Each of these pages carries its own inline <style> in
   head, and on several of them it paints `.sv-section { background:
   var(--ink) }` at one-class specificity. This file is linked after
   that block so equal specificity resolves here, but the two-class
   forms below make the light ground hold regardless of link order —
   which matters because a parallel agent may reorder the head. */
.t-lite.sv-section,
.t-lite.sv-section--alt,
.t-lite.sv-service-section,
.t-lite.sv-cine,
.t-lite.lab-proof,
.t-lite.csi,
.t-lite.sv-close { background: var(--bone); color: var(--ink); }

/* Hardcoded literals that no token can reach. .cap-item__name is set
   to var(--bone) for a dark ground — bone on bone is invisible, and a
   DOM style walk would report it as "styled" and pass. */
.t-lite .cap-item__name,
.t-lite .cs-card__title,
.t-lite .csi__name { color: var(--ink); }

/* ── 1b · THE LITERALS THE TOKENS CANNOT REACH ───────────────
   Token re-scoping handles every call site written as
   rgba(var(--fg-rgb),X). But four of these six pages predate that
   token and write rgba(245,241,232,X) as a LITERAL in their own
   inline <style>. Those are bone-on-bone once the ground goes light —
   invisible, and invisible in a way a DOM style walk reports as
   "has a colour, passes". Measured here on the composited pixel
   against #faf8f3:
     rgba(10,10,10,.78)  9.96:1   body
     rgba(10,10,10,.62)  5.51:1   muted / supporting
     rgba(10,10,10,.60)  5.11:1   meta, the floor used here
   Nothing in this block goes below .60; .55 measured 4.29:1 and was
   rejected. Selectors carry .t-lite plus the page's own class, which
   outranks the single-class inline rules regardless of link order. */
.t-lite .sv-thesis-body p,
.t-lite .cap-item__promise,
.t-lite .cap-item__body p,
.t-lite .cap-item__items li,
.t-lite .practice-desc { color: rgba(10, 10, 10, .78); }

/* .pr-steps means two different things on the two pages using it. On
   /tools it is a dark card (background rgba(10,10,10,.55), set in that
   page's inline style). On /sister, T-1121 deliberately STRIPPED the
   card — "four open columns on one hairline, no border box, no
   background". Styling it dark for both left the /sister values
   (Toronto, Canada / Miami, USA) as bone text on a bone ground.
   Both go light instead: the /tools card is dropped rather than
   recoloured, which is what "sections with text use white
   backgrounds" asks for anyway. Text is ink in both places. */
.t-lite .pr-steps {
  background: transparent;
  border-color: rgba(10, 10, 10, .14);
}
.t-lite .pr-step { border-right-color: rgba(10, 10, 10, .14); border-bottom-color: rgba(10, 10, 10, .14); }
.t-lite .pr-step__title { color: var(--ink); }
.t-lite .pr-step__copy  { color: rgba(10, 10, 10, .78); }
.t-lite .pr-step__num   { color: var(--red); }

/* Same anti-aliasing story without the red. rgba(10,10,10,.62)
   computes to 5.51:1 but PAINTED it came back 2.89-4.73:1 on these
   small mono labels. No alpha on small type anywhere in this file.

   WEIGHT, NOT JUST COLOUR. These labels are 0.58-0.62rem uppercase
   mono with .14-.2em tracking. At that size the glyph stems are about
   one pixel wide, so most of what gets painted is a blend with the
   ground no matter how dark the declared colour is — #a50d26 still
   measured 1.86:1 on .sv-anchor__fig. Going darker alone chases the
   number without making the label any easier to read. font-weight 500
   (JetBrains Mono ships it, so no extra download) puts real ink on
   the page, which fixes the measurement and the legibility together. */
.t-lite .sv-anchor__label,
.t-lite .cap-item__count,
.t-lite .cap-item__chevron,
.t-lite .lab-proof__cap,
.t-lite .pr-step__copy { color: #2e2e2c; }

.t-lite .sv-anchor__label,
.t-lite .cap-item__count,
.t-lite .sv-anchor__fig,
.t-lite .cap-item__num,
.t-lite .pr-step__num,
.t-lite .cs-card__class,
.t-lite .csi__sector,
.t-lite .eyebrow,
.t-lite .lab-proof__label,
.t-lite .eyebrow-num { font-weight: 500; }

/* Small red labels take the deeper red, not the brand red. */
.t-lite .cap-item__num,
.t-lite .cs-card__class,
.t-lite .csi__sector,
.t-lite .eyebrow,
.t-lite .lab-proof__label,
.t-lite .eyebrow-num { color: #8c0a20; }
.t-lite .eyebrow-rule { background: #8c0a20; }

/* .sv-anchor__fig ("E.01") and .pr-step__num ("This firm") are the two
   smallest labels on these pages and they stayed under the floor in
   red even at #8c0a20 and weight 500 — measured 2.15:1 and 3.69:1 on
   painted pixels, because at 4-8 tracked characters there is almost no
   solid glyph area to carry the colour. They go ink instead. The red
   accent language is unaffected: eyebrows (4.63-5.35:1), eyebrow
   rules, em italics and the CTAs all still carry it. */
.t-lite .sv-anchor__fig,
.t-lite .pr-step__num { color: #2e2e2c; }

.t-lite .practice-name,
.t-lite .practice-desc em,
.t-lite .lab-proof__title,
.t-lite .lab-proof__cap b { color: var(--ink); }

/* Hairlines drawn as literal bone go to ink at a matching weight. */
.t-lite .cap-list,
.t-lite .cap-item,
.t-lite .cap-item__items,
.t-lite .practice-item,
.t-lite .practice-item:first-child { border-color: rgba(10, 10, 10, .14); }

/* Row hover/open lift was rgba(--fg-rgb,.045) — on bone that reads as
   nothing. Slightly stronger so the affordance survives the flip. */
.t-lite .cap-item:hover,
.t-lite .cap-item[open] { background: rgba(10, 10, 10, .045); }

/* site.css gives .sv-h2/.sv-lede/.eyebrow a text-shadow whenever a
   .has-photo ancestor exists, so light type stays readable over a
   photograph. On a bone ground that shadow is a smudge under black
   type. Killed for opted-in sections only. */
.t-lite .sv-h2,
.t-lite .sv-h3,
.t-lite .sv-lede,
.t-lite .eyebrow,
.t-lite h2,
.t-lite h3,
.t-lite p { text-shadow: none; }

.t-lite .sv-h2 em,
.t-lite .sv-h3 em,
.t-lite h2 em { color: var(--red); }

/* Buttons on bone: the outline variant is drawn for a dark ground. */
.t-lite .btn-cta {
  color: var(--ink);
  border-color: rgba(10, 10, 10, .28);
}
.t-lite .btn-cta:hover { color: var(--on-black); }
.t-lite .btn-cta--red { color: var(--on-black); border-color: var(--red); }

/* ── 2 · BLACK AS SEPARATION ─────────────────────────────────
   Ink is punctuation between light blocks now, not the page itself.
   A .t-band is a shallow ink rule with a shaped edge — it reads as a
   deliberate cut between two bone sections rather than another
   full-height dark screen. Heights are deliberately small: nothing
   here approaches a viewport. */
.t-band {
  position: relative;
  height: clamp(2.2rem, 4.5vw, 3.6rem);
  background: var(--ink);
  overflow: hidden;
}
/* Angled cut — the band drives a diagonal into the light section below. */
.t-band--wedge { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1.6rem)); }
.t-band--wedge-r { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), 0 100%); }
/* Chamfered corners — a sharp counterpart to the bubble radii. */
.t-band--chamfer {
  clip-path: polygon(2.6rem 0, 100% 0, 100% calc(100% - 2.6rem), calc(100% - 2.6rem) 100%, 0 100%, 0 2.6rem);
}

/* Crosshatch — the "crisscross, more sharp" pattern. Two opposed
   diagonal gradient stacks so the weave actually crosses instead of
   reading as one-way hatching. Decorative only, never behind text. */
.t-hatch::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg,  rgba(245,241,232,.10) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(200,16,46,.16)  0 1px, transparent 1px 14px);
}
/* Same weave, inverted for a bone ground. */
.t-lite .t-hatch::after,
.t-hatch--ink::after {
  background:
    repeating-linear-gradient(45deg,  rgba(10,10,10,.09) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(200,16,46,.16) 0 1px, transparent 1px 14px);
}

/* A single sharp diagonal rule used to break a long light section
   without spending a whole band on it. */
.t-rule {
  height: 1px;
  border: 0;
  margin: clamp(2rem, 4vw, 3.2rem) 0;
  background: linear-gradient(90deg, var(--red) 0 3.5rem, rgba(10,10,10,.16) 3.5rem 100%);
}

/* .ember is a 100px red radial glow (site.css §128) designed to bleed
   between two INK sections. Against bone it is a pink smear across the
   top or bottom of the reading ground — measured overlapping the light
   sections on /services/strategy-publicity by 100px at each end. It is
   suppressed only where it actually touches a light section; every
   other ember on the site is untouched. The separation those embers
   were doing is now done properly by .t-band. */
.t-lite + .ember,
.ember:has(+ .t-lite) { display: none; }

/* ── 3 · CONTAINED IMAGES ────────────────────────────────────
   "no images going left to right border." A section BACKGROUND may
   run full width; the picture inside it may not. .t-fig bounds the
   image, centres it, caps its height so a wide viewport cannot grow
   it, and gives it a real margin. Height caps are well under the
   sitewide screenshot cap of clamp(280px,34vw,440px) and are never
   raised here. */
.t-fig {
  display: block;
  max-width: min(58rem, 84%);
  margin: clamp(1.8rem, 3.5vw, 2.8rem) auto;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.t-fig > img,
.t-fig > video {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(240px, 30vw, 380px);
  object-fit: cover;
  object-position: center;
}
/* A narrower column for portrait/detail shots. */
.t-fig--narrow { max-width: min(34rem, 72%); }
/* Offset placement — the picture sits off the centre line so a page
   with several figures does not read as one stacked column. */
.t-fig--left  { margin-left: 0; margin-right: auto; }
.t-fig--right { margin-right: 0; margin-left: auto; }

.t-fig__cap {
  display: block;
  margin: .7rem 0 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5c5c58;
}

/* ── 4 · SHAPES — SOFT AND SHARP, ALTERNATING ────────────────
   The three soft radii are Ethan's own, lifted verbatim from
   unwrinkled-react/app/globals.css (.arch, .blob-a, .blob-b). The
   sharp set is new and exists so the page alternates instead of
   repeating one bubble down the whole scroll. */
.t-arch   { border-radius: 50% 50% 12% 12% / 34% 34% 8% 8%; overflow: hidden; }
.t-blob-a { border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%; overflow: hidden; }
.t-blob-b { border-radius: 40% 60% 56% 44% / 55% 42% 58% 45%; overflow: hidden; }

/* Sharp counterparts. clip-path, so the cut is a real silhouette and
   not a border trick that a background would show through. */
.t-cut-chamfer { clip-path: polygon(3rem 0, 100% 0, 100% calc(100% - 3rem), calc(100% - 3rem) 100%, 0 100%, 0 3rem); }
.t-cut-blade   { clip-path: polygon(0 2.6rem, 100% 0, 100% calc(100% - 2.6rem), 0 100%); }
.t-cut-notch   { clip-path: polygon(0 0, calc(100% - 3.4rem) 0, 100% 3.4rem, 100% 100%, 0 100%); }
.t-cut-point   { clip-path: polygon(50% 0, 100% 14%, 100% 86%, 50% 100%, 0 86%, 0 14%); }

@media (max-width: 640px) {
  /* Deep cuts eat too much of a narrow image. Shallower, not removed —
     the alternation is the point. */
  .t-cut-chamfer { clip-path: polygon(1.4rem 0, 100% 0, 100% calc(100% - 1.4rem), calc(100% - 1.4rem) 100%, 0 100%, 0 1.4rem); }
  .t-cut-blade   { clip-path: polygon(0 1.1rem, 100% 0, 100% calc(100% - 1.1rem), 0 100%); }
  .t-cut-notch   { clip-path: polygon(0 0, calc(100% - 1.6rem) 0, 100% 1.6rem, 100% 100%, 0 100%); }
}

/* Standalone decorative shapes — used where a second photograph would
   otherwise have been reached for (there are five near-identical
   laptop-at-a-desk photos on this site already; one per page is the
   cap, so the alternative has to be drawn, not shot). */
.t-mark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.t-mark--soft {
  background: linear-gradient(150deg, rgba(200,16,46,.16), rgba(200,16,46,.04));
  border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%;
}
.t-mark--sharp {
  background: linear-gradient(150deg, rgba(10,10,10,.10), transparent 70%);
  clip-path: polygon(0 0, 100% 22%, 78% 100%, 0 72%);
}
.t-mark--ring {
  border: 1px solid rgba(200,16,46,.30);
  border-radius: 50% 50% 12% 12% / 34% 34% 8% 8%;
}
@media (max-width: 900px) { .t-mark { display: none; } }

/* Content inside a .t-lite must clear the decorative marks. */
.t-lite > .inner,
.t-lite > .sv-close__inner { position: relative; z-index: 1; }

/* ── 4a · THE /sister UI SCREENSHOT ──────────────────────────
   sister.html's own style sets `.lab-proof__shot { width: 1312px;
   max-width: none }`. A fixed px width with max-width DISABLED is a
   guaranteed horizontal overflow — the document measured 1483px wide
   in a 1440 viewport, so the whole page scrolled sideways. Contained
   here: bounded width and a real margin.

   The height cap and object-fit: cover that used to be on this rule are
   GONE. The shot is a 1600x1000 support-ticket table; capping it at 440px
   while the box was 896px wide meant cover cropped it to a 2.04 aspect and
   sliced the last table row in half — the "console cut through a row" that
   has been reported and not actually fixed. Containment is a WIDTH problem,
   so it is solved with width alone; the image keeps its own aspect and the
   whole table is on screen. At 1440 that is 896x560, well inside the
   viewport. */
.t-lite .lab-proof__shot {
  width: 100%;
  max-width: min(56rem, 88%);
  height: auto;
  max-height: none;
  object-fit: fill;
  margin: 0 auto;
}
.t-lite .lab-proof__frame { overflow: hidden; }
.t-lite .lab-proof__hint { display: none; }

/* Under 900 the contained shot is about 305x191 — a six-column table at
   0.23x, present but unreadable. .lab-proof__frame was built to be a
   sideways-scrolling viewport for exactly this, so give it back below the
   breakpoint. The frame is the scroll container and the section is a normal
   block, so the DOCUMENT never gains a horizontal scrollbar — verified at
   390: scrollWidth === clientWidth === 390. The hint comes back with it,
   because now there is again something to scroll. */
@media (max-width: 900px) {
  .t-lite .lab-proof__frame {
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .t-lite .lab-proof__shot { width: 1312px; max-width: none; }
  .t-lite .lab-proof__hint { display: block; }
}

/* ── 4a-bis · THE /tools CLOSING BAND'S CONTENT LIFT ─────────
   site.css:141 lifts a media band's content above the z-index:1
   .section-bg-overlay with
     .has-video > :not(.section-bg-video):not(.section-bg-photo)… {
       position: relative; z-index: 2 }
   — scoped to .has-VIDEO only. /tools' closing band is .has-photo with
   no video, on purpose and permanently, so it never matched: the scrim
   painted straight over the headline. Verified with elementFromPoint at
   the centre of the h2, which returned DIV.section-bg-overlay instead of
   the h2, and the whole band rendered at roughly 40% strength beside the
   identical band on /faq.

   Fixed here, not by adding .has-photo to site.css's rule: four other
   sections (media-portfolio, strategy-publicity, two on
   media-production) are .has-photo WITHOUT .has-video, and widening that
   rule would move all of them on pages this change has no business
   touching. .sv-close.has-photo also matches /team and /media, where the
   .has-video rule already sets exactly these two declarations, so it is a
   no-op there. */
.sv-close.has-photo > .sv-close__inner { position: relative; z-index: 2; }

/* ── 4b · TOOLS FILM BAND ────────────────────────────────────
   f1ec207 ("strip the tools lattice") removed the CSS for
   .tfilm__band/__still/__video/__scrim but left the markup in
   tools.html. With no rules at all the <img> and the <video> both
   rendered at intrinsic size, stacked, unpositioned, inside a <figure>
   still carrying the UA's default 40px side margin — a raw 1600x500
   still running the width of the page with a second copy of itself
   under it. Restored here, and contained this time: the band no
   longer touches either edge. Height cap is the ART-GUIDE 380px the
   page's own comment asks for; it is a band, never a hero. */
.tfilm__band {
  position: relative;
  max-width: min(72rem, 88%);
  height: clamp(200px, 26vw, 340px);
  margin: clamp(1.8rem, 3.5vw, 2.8rem) auto;
  overflow: hidden;
  background: var(--ink);
  /* Sharp counterpart to the bubble shapes elsewhere on the page. */
  clip-path: polygon(0 0, calc(100% - 3.4rem) 0, 100% 3.4rem, 100% 100%, 3.4rem 100%, 0 calc(100% - 3.4rem));
}
.tfilm__still,
.tfilm__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
/* The still is the poster underneath; the video fades over it once
   lazy-video.js decides motion is allowed. */
.tfilm__video { z-index: 1; }
.tfilm__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(52% 60% at 16% 88%, rgba(200,16,46,.20) 0%, transparent 64%),
    linear-gradient(to bottom, rgba(10,10,10,.34) 0%, rgba(10,10,10,.06) 44%, rgba(10,10,10,.46) 100%);
}
@media (max-width: 640px) {
  .tfilm__band { clip-path: polygon(0 0, calc(100% - 1.6rem) 0, 100% 1.6rem, 100% 100%, 1.6rem 100%, 0 calc(100% - 1.6rem)); }
}

/* ── 4c · TOOLS STACK GRID ───────────────────────────────────
   Same failure as the film band, one page over. f1ec207 removed the
   /tools link to css/lattice.css to kill the lattice animation, but
   .tools-grid / .tools-cell / .tools-cell__icon LIVED IN THAT FILE.
   With the link gone every vendor <svg> fell back to its intrinsic
   size and rendered one-logo-per-screen: /tools measured 21363px tall.
   The grid rules are ported here rather than re-linking lattice.css,
   so the animation stays gone. Recoloured for the bone ground; the
   1.6rem icon box is the original value, not a new one. */
.tools-grid {
  list-style: none; margin: 2.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid rgba(10,10,10,.14);
  border-left: 1px solid rgba(10,10,10,.14);
}
@media (max-width: 1000px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .tools-grid { grid-template-columns: 1fr; } }
.tools-grid li {
  background: transparent;
  border-right: 1px solid rgba(10,10,10,.14);
  border-bottom: 1px solid rgba(10,10,10,.14);
}
.tools-cell {
  display: block; padding: 1.5rem 1.3rem; text-decoration: none; height: 100%;
  transition: background 220ms var(--ease-out-expo);
}
a.tools-cell:hover, a.tools-cell:focus-visible { background: rgba(200,16,46,.07); outline: none; }
/* THE ACTUAL FIX — without a width/height the <svg> uses its viewBox. */
.tools-cell__icon { display: block; width: 1.6rem; height: 1.6rem; margin-bottom: .8rem; color: var(--ink); }
.tools-cell__name { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.06rem; color: var(--ink); margin-bottom: .5rem; }
.tools-cell__use  { display: block; font-family: var(--font-body); font-size: .83rem; line-height: 1.55; color: rgba(10,10,10,.72); }
a.tools-cell .tools-cell__name::after { content: " \2197"; font-size: .7em; color: var(--red); opacity: 0; transition: opacity 200ms ease; }
a.tools-cell:hover .tools-cell__name::after,
a.tools-cell:focus-visible .tools-cell__name::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tools-cell, a.tools-cell .tools-cell__name::after { transition: none; } }

/* ── 4d · THE DRAWN MARKS ────────────────────────────────────
   "more illustration and design", and "the bubble stuff but different
   patterns crisscross the site, more sharp". The service pages carry
   one photograph each (the hero) and there are already five near
   identical laptop-at-a-desk photos on this site, so the second
   element on a page has to be DRAWN rather than shot.

   A .t-deco is a stack of three marks occupying the empty left column
   the editorial split leaves below the F.01/C.01 anchor — measured at
   1440 as roughly 150px wide and 300px tall of nothing. Each stack
   pairs a SOFT shape (Ethan's own bubble radii) against a SHARP one
   (clip-path), and the two .t-deco variants mirror each other so two
   consecutive sections do not repeat the same silhouette. */
/* Anchored top AND bottom rather than given a fixed height: at 260px
   the stack ran past the end of the section and its crosshatch bled
   over the ink band underneath. Bounding it to the section means a
   short section gets a short stack instead of a spill. */
.t-deco {
  position: absolute;
  left: clamp(1.25rem, 5.5vw, 5.5rem);
  width: min(15%, 190px);
  top: 44%;
  bottom: 7%;
  pointer-events: none;
  z-index: 0;
}
.t-deco span { position: absolute; display: block; }

/* soft — the arch, his radius */
.t-deco--a span:nth-child(1) {
  left: 4%; top: 0; width: 62%; height: 46%;
  background: linear-gradient(155deg, rgba(200,16,46,.20), rgba(200,16,46,.05));
  border-radius: 50% 50% 12% 12% / 34% 34% 8% 8%;
}
/* sharp — a blade cutting across the arch */
.t-deco--a span:nth-child(2) {
  left: 30%; top: 30%; width: 66%; height: 40%;
  background: rgba(10,10,10,.86);
  clip-path: polygon(0 24%, 100% 0, 100% 76%, 0 100%);
}
/* crisscross weave, sharp */
.t-deco--a span:nth-child(3) {
  left: 6%; top: 74%; width: 78%; height: 26%;
  background:
    repeating-linear-gradient(45deg,  rgba(10,10,10,.30) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(200,16,46,.34) 0 1px, transparent 1px 11px);
}

/* mirrored: blob against a chamfered plate */
.t-deco--b span:nth-child(1) {
  left: 12%; top: 4%; width: 70%; height: 42%;
  background: linear-gradient(200deg, rgba(10,10,10,.90), rgba(10,10,10,.55));
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}
.t-deco--b span:nth-child(2) {
  left: 0; top: 40%; width: 58%; height: 38%;
  border: 1px solid rgba(200,16,46,.55);
  border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%;
}
.t-deco--b span:nth-child(3) {
  left: 34%; top: 76%; width: 62%; height: 24%;
  background:
    repeating-linear-gradient(-45deg, rgba(10,10,10,.30) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(45deg,  rgba(200,16,46,.34) 0 1px, transparent 1px 11px);
}

/* The marks live in the gutter the copy does not use. Below 1024 the
   editorial split collapses to one column and that gutter is gone, so
   the decoration goes with it rather than sitting under the text. */
@media (max-width: 1180px) { .t-deco { display: none; } }

/* ── 4e · THE CAPABILITY ROW ON A NARROW SCREEN ──────────────
   The summary is a three-column flex row: number, heading+promise,
   then "N deliverables" and the chevron. The pages' own mobile query
   only relaxes the number's fixed width, which is not enough — on
   /services/strategy-publicity the numbers are ten tracked characters
   (C.01.02.01) and the meta column never moves, so at 390px the
   middle column collapsed to roughly one word per line down the whole
   list. Wrapped into two rows instead: identifier and meta share the
   first, the heading and its promise get the full width beneath. */
@media (max-width: 700px) {
  .t-lite .cap-item > summary { flex-wrap: wrap; gap: .45rem .8rem; }
  .t-lite .cap-item__num { width: auto; flex: 0 0 auto; padding-top: 0; }
  .t-lite .cap-item__meta { margin-left: auto; padding-top: 0; }
  .t-lite .cap-item__head { flex: 1 0 100%; order: 3; }
}

/* ── 5 · SHORTER SECTIONS ────────────────────────────────────
   "sections are too long." site.css sets .sv-section to
   clamp(4rem,8vw,6.5rem) top and bottom. On a light ground the copy
   carries itself without as much air, and the black bands now do the
   separating that padding used to do. */
.t-lite.sv-section,
.t-lite.sv-service-section { padding: clamp(2.6rem, 5vw, 4.2rem) 0; }
.t-lite.sv-section--tight { padding: clamp(2.4rem, 4.5vw, 3.6rem) 0; }

/* Measure. Long light paragraphs need a shorter line than the same
   text reversed out of black. */
.t-lite p { max-width: 66ch; }