:root {
    --canopy: #2E4A31;
    --canopy-deep: #22371F;
    --fern: #4D6E52;
    --brass: #C49835;
    --parchment: #FAF5EC;
    --paper: #ECE8DD;
    --linen: #C8BFB0;
    --ash: #7A6E62;
    --ink: #141413;
    --ink-soft: #3B3B36;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --rail: 190px;
    --gut: 52px;
    --maxw: 1180px;
  }
  /* ===== added 2026-08-08: navigation, progress, mosaic, motion ===== */
  .prog {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%;
    background: var(--brass); transform: scaleX(0); transform-origin: 0 50%;
    z-index: 90; will-change: transform;
  }
  .nav {
    position: fixed; top: 0; left: 0; right: 0; height: 58px; z-index: 80;
    background: rgba(250,245,236,.93); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linen);
    transform: translate3d(0,-104%,0); transition: transform .45s var(--ease);
    will-change: transform;
  }
  .nav.show { transform: translate3d(0,0,0); }
  .nav .in {
    max-width: var(--maxw); margin: 0 auto; padding: 0 32px; height: 100%;
    display: flex; align-items: center; gap: 18px;
  }
  .nav .mk {
    font-family: "Gelasio", Georgia, serif; font-weight: 700; font-size: 16.5px;
    color: var(--ink); text-decoration: none; white-space: nowrap;
  }
  .nav .mk em { color: var(--canopy); font-style: normal; }
  .nav ul { list-style: none; display: flex; gap: 2px; margin-left: auto; position: relative; }
  .nav a.lnk {
    display: block; padding: 8px 12px; text-decoration: none;
    font-family: "Arimo", Arial, sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ash);
    transition: color .22s var(--ease);
  }
  .nav a.lnk:hover, .nav a.lnk.on { color: var(--ink); }
  .nav .ind {
    position: absolute; bottom: -1px; height: 2px; background: var(--brass);
    width: 0; left: 0; pointer-events: none;
    transition: transform .42s cubic-bezier(.22,1.2,.36,1), width .42s cubic-bezier(.22,1.2,.36,1);
    will-change: transform, width;
  }
  .nav .call {
    font-family: "Arimo", Arial, sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
    color: var(--ink); padding: 8px 14px; border: 1px solid var(--linen);
    transition: background .22s, border-color .22s, color .22s;
  }
  .nav .call:hover { background: var(--canopy); border-color: var(--canopy); color: var(--parchment); }
  @media (max-width: 860px) { .nav ul { display: none } .nav .call { margin-left: auto } }
  section[id], header[id] { scroll-margin-top: 74px; }

  /* mosaic: the field photographs, deliberately uneven so it does not read
     as three equal cards */
  .mosaic {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 18px; margin-top: 30px;
  }
  .mosaic figure { overflow: hidden; background: var(--canopy-deep); }
  .mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .mosaic figure:hover img { transform: scale(1.04); }
  /* 4+2 / 2+4 - two mirrored rows, wide-tall then tall-wide. Four
     photographs: i0813 went as a near-duplicate of i0804, and i1665 moved
     to the founder section. */
  .m-a { grid-column: span 4; aspect-ratio: 4 / 3; }
  .m-b { grid-column: span 2; aspect-ratio: 3 / 4; }
  .m-c { grid-column: span 2; aspect-ratio: 3 / 4; }
  .m-f { grid-column: span 4; aspect-ratio: 4 / 3; }
  @media (max-width: 860px) {
    .mosaic { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .m-a { grid-column: span 2; }
    .m-b, .m-c { grid-column: span 2; aspect-ratio: 4 / 3; }
    .m-f { grid-column: span 2; aspect-ratio: 16 / 9; }
  }

  /* photographs lift very slightly under the cursor */
  .slide img, .divider img, .founder-grid img, .shopshot img, .contact-shot img {
    transition: transform .8s var(--ease);
  }
  .founder-grid figure, .shopshot, .contact-shot { overflow: hidden; }
  .founder-grid figure:hover img, .shopshot:hover img, .contact-shot:hover img { transform: scale(1.03); }
  .divider { overflow: hidden; }
  .divider img { will-change: transform; }
  .contact-shot { margin-top: 28px; max-width: 240px; }
  .mag { display: inline-block; will-change: transform; }

  .fstack { display: flex; flex-direction: column; gap: 18px; }
  .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .frow img { width: 100%; height: 190px; object-fit: cover; }
  .frow figure { overflow: hidden; }
  @media (max-width: 640px) { .frow { grid-template-columns: 1fr; } }

  /* The WebP sources added 2026-08-08 wrap every image in <picture>, which is
     an ordinary box. That broke every height:100% chain on the page: the
     carousel sized its slides to 372px while the images rendered at their
     full 1200px and got clipped, which read as awkward cropping.
     display:contents removes the wrapper box so the <img> is once again the
     direct flex or grid child, exactly as before the WebP change. */
  picture { display: contents; }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--parchment);
    color: var(--ink-soft);
    font-family: "Gelasio", Georgia, serif;
    font-size: 17.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }
  img { display: block; max-width: 100%; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

  /* ============================================================
     EDITORIAL RAIL GRID.
     Rule 3, anti-center bias: at DESIGN_VARIANCE 8 a centered single column
     is banned. Section labels sit in a narrow left rail, content in a wider
     right column, which reads as considered editorial typography rather than
     startup asymmetry. Collapses hard to one column under 860px per the
     MOBILE OVERRIDE in section 6.
     ============================================================ */
  .row {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: var(--gut);
    align-items: start;
  }
  .rail { position: sticky; top: 40px; }
  /* numbering removed 2026-08-08; a short rule keeps the rail anchored */
  .rail .lbl::before {
    content: ""; display: block; width: 26px; height: 2px;
    background: var(--brass); margin-bottom: 11px;
  }
  .rail .lbl {
    font-family: "Arimo", Arial, sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: .17em;
    text-transform: uppercase; color: var(--ink-soft); line-height: 1.6;
  }
  .col { max-width: 68ch; }
  section.band { padding: 96px 0; }
  section.band + section.band { padding-top: 0; }

  /* ============================================================
     HERO. Section 8, the Standard Hero Paradigm: no centered text over a dark
     image. Split screen, text left on the green field, photograph right,
     fading into the field rather than sitting under a flat scrim.
     100dvh, never vh, per the viewport stability rule.
     ============================================================ */
  .hero {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    min-height: 92dvh;
    background: var(--canopy-deep);
    color: var(--parchment);
  }
  .hero-text {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 46px clamp(32px, 4.4vw, 64px) 40px;
    padding-left: max(32px, calc((100vw - var(--maxw)) / 2 + 32px));
  }
  .eyebrow {
    font-family: "Arimo", Arial, sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .235em;
    text-transform: uppercase; color: var(--brass); line-height: 1.85;
  }
  .eyebrow span { white-space: nowrap; }
  /* Approved Tower Spire lockup (2026-08-09) replaces the live-text wordmark.
     The PNG is ink-cropped, so its left edge IS the tower's left edge and its
     bottom edge is the brass ground line (which ends flush with the final G). */
  .wordmark-img {
    display: block; height: auto;
    width: min(100%, clamp(340px, 40vw, 500px));
  }

  /* ---- Tower Spire, "Progress" (approved 2026-08-14) ----------------------
     The brass baseline grows as a readout of the car's height on the spire.
     Both run on one 1.2s clock and one easing curve; that shared clock is what
     makes them read as a single motion rather than two overlapping ones. The
     run starts at .85s, as the hero's own rise is settling, so the two connect.
     Pace set to 3.4s by Carlos on 2026-08-14: the mark is legible from frame one,
     so a slow run reads as composure rather than as a wait.

     The resting state below IS the finished mark. Every animation fills
     backwards out of it, so if motion is disabled, or the CSS never loads, the
     logo simply shows complete. Nothing here can leave it half drawn. */
  /* --run is the ONE number that sets the pace. Every delay below is expressed as a
     fraction of it, so changing it rescales the whole choreography rather than
     desynchronising the car, the floors and the baseline from each other. */
  .lec-mark { --t0: .85s; --run: 3.4s; --curve: cubic-bezier(.3, 0, .2, 1); }
  .lec-mark .floor { stroke: var(--parchment); stroke-width: 2.2; }
  .lec-mark .car,
  .lec-mark .bar   { stroke: var(--brass); stroke-width: 2.8; }
  .lec-mark .wm { fill: var(--parchment); font-family: "Gelasio", Georgia, serif;
                  font-size: 44px; font-weight: 600; }
  .lec-mark .tg { fill: var(--parchment); font-family: "Arimo", Arial, sans-serif;
                  font-size: 12.5px; }

  .lec-mark .bar { stroke-dasharray: 292 292; }

  /* The car is each bar in turn: it starts on the bottom floor at that floor's full
     66 units and narrows to trace the tower's stepped profile, so at any height it
     is exactly as wide as the shaft it is in. Two animations, deliberately: the
     climb is eased because that is the run, the narrowing is linear because its
     keyframes already sit at the eased moments the car reaches each floor. */
  .lec-mark .car { stroke-dasharray: 66 66; stroke-dashoffset: 42;
                   animation: lec-rise var(--run) var(--curve) var(--t0) backwards,
                              lec-narrow var(--run) linear var(--t0) backwards; }
  .lec-mark .bar { animation: lec-fill var(--run) var(--curve) var(--t0) backwards; }

  /* Each floor lights just after the car leaves it, so the handoff is visible.
     The fractions are the eased moments the car reaches each floor, solved against
     the travel curve, which is why they are not evenly spaced. */
  .lec-mark .floor { animation: lec-lit calc(var(--run) * .1833) ease-out backwards; }
  .lec-mark .floor:nth-child(6) { animation-delay: calc(var(--t0) + var(--run) * .0333); }
  .lec-mark .floor:nth-child(5) { animation-delay: calc(var(--t0) + var(--run) * .2083); }
  .lec-mark .floor:nth-child(4) { animation-delay: calc(var(--t0) + var(--run) * .2775); }
  .lec-mark .floor:nth-child(3) { animation-delay: calc(var(--t0) + var(--run) * .3458); }
  .lec-mark .floor:nth-child(2) { animation-delay: calc(var(--t0) + var(--run) * .4333); }
  .lec-mark .floor:nth-child(1) { animation-delay: calc(var(--t0) + var(--run) * .5700); }

  @keyframes lec-rise { from { transform: translateY(60px); } }
  @keyframes lec-narrow {
    0%      { stroke-dashoffset: 0;  }
    17.53%  { stroke-dashoffset: 21; }
    24.39%  { stroke-dashoffset: 42; }
    100%    { stroke-dashoffset: 42; }
  }
  @keyframes lec-fill { from { stroke-dashoffset: 292; } }
  @keyframes lec-lit  { from { opacity: .22; } }

  /* Replay hook. The animations above run on load unaided, so the first visit
     works with no JavaScript at all. Restarting them later needs the browser to
     see the animation go away and come back, which is what this class is for. */
  .lec-mark.lec-halt .car,
  .lec-mark.lec-halt .bar,
  .lec-mark.lec-halt .floor { animation: none !important; }

  .descriptor {
    font-family: "Arimo", Arial, sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .235em;
    text-transform: uppercase; color: var(--brass); margin-top: 22px;
  }
  .hair { height: 1px; background: var(--brass); opacity: .85; margin-top: 13px; max-width: 460px; }
  .tagline { font-style: italic; font-size: clamp(22px, 2.5vw, 30px); margin-top: 20px; }
  .hero-meta {
    font-family: "Arimo", Arial, sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .19em;
    text-transform: uppercase; color: var(--brass); line-height: 2;
  }
  .hero-meta a { color: var(--brass); text-decoration: none; }
  .hero-meta a:hover { text-decoration: underline; text-underline-offset: 4px; }

  .hero-shot { position: relative; overflow: hidden; }
  .hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
  /* the fade is what makes the photograph part of the field instead of a panel
     bolted beside it */
  .hero-shot::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, var(--canopy-deep) 0%, rgba(34,55,31,.86) 12%,
        rgba(34,55,31,.34) 42%, rgba(34,55,31,.06) 74%, rgba(34,55,31,.20) 100%),
      linear-gradient(to top, rgba(34,55,31,.55) 0%, rgba(34,55,31,0) 34%);
  }

  /* ---------- type ---------- */
  h2 {
    font-family: "Gelasio", Georgia, serif;
    font-weight: 700; font-size: clamp(26px, 2.9vw, 35px);
    line-height: 1.12; letter-spacing: -.012em;
    color: var(--canopy); margin: 0 0 16px;
  }
  .lede { font-size: clamp(20px, 2.05vw, 25px); line-height: 1.5; color: var(--ink); }
  .lede .first { font-weight: 700; color: var(--canopy); }
  p { margin: 0 0 15px; }
  p:last-child { margin-bottom: 0; }
  a { color: var(--canopy); text-decoration-color: var(--brass); text-underline-offset: 3px; }

  /* ============================================================
     Rule 4, anti-card-overuse. Preflight asks whether cards can be omitted in
     favour of spacing. Most groups here are hairline-divided rather than
     boxed. Two blocks keep a surface because they genuinely carry weight.
     ============================================================ */
  .divide > * { padding: 20px 0; border-top: 1px solid var(--linen); }
  .divide > *:first-child { border-top: 0; padding-top: 0; }
  .divide > *:last-child { padding-bottom: 0; }
  .divide .k {
    font-family: "Arimo", Arial, sans-serif;
    font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
    color: var(--brass); display: block; margin-bottom: 7px;
  }

  /* Unified section treatment (Carlos, 2026-08-08): every band's content
     sits on the paper background, no box borders anywhere. */
  section.band .row { background: var(--paper); padding: 30px clamp(24px, 3vw, 38px); }
  .surface { background: none; padding: 0; }
  .statement {
    font-family: "Gelasio", Georgia, serif;
    font-size: clamp(20px, 2.1vw, 25px); line-height: 1.42;
    color: var(--canopy); font-weight: 700; margin: 0 0 22px;
  }
  .who { font-size: 19px; line-height: 1.8; }

  /* full-bleed photo divider, uncaptioned as on PDF page 2 */
  .divider { background: var(--canopy-deep); overflow: hidden; }
  .divider img { width: 100%; height: clamp(220px, 34dvh, 380px); object-fit: cover; object-position: 50% 52%; }

  /* ============================================================
     CAROUSEL. Slides keep their native aspect ratio and are contained, never
     cropped, on a deep green field. The set mixes one 2:1 panorama with four
     4:5 uprights, and a uniform crop box would cut the subject out of the
     detail studies. Cropping equipment photography is Carlos's call.
     ============================================================ */
  .gallery { background: var(--canopy-deep); padding: 84px 0 0; color: var(--parchment); }
  .gallery h2 { color: var(--parchment); }
  .gallery .rail .lbl { color: rgba(250,245,236,.88); }
  .gallery .note { color: rgba(250,245,236,.72); font-size: 16.5px; }

  .track {
    display: flex; gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin-top: 40px;
    padding-bottom: 4px;
  }
  .track::-webkit-scrollbar { display: none; }
  .slide {
    flex: 0 0 auto; scroll-snap-align: center;
    height: clamp(300px, 60dvh, 560px);
    position: relative; padding: 0 10px;
    display: flex; align-items: flex-end; justify-content: center;
  }
  .slide:first-child { padding-left: max(32px, calc((100vw - var(--maxw)) / 2 + 32px)); }
  .slide:last-child  { padding-right: max(32px, calc((100vw - var(--maxw)) / 2 + 32px)); }
  .slide img {
    height: 100%; width: auto; object-fit: contain;
    transition: transform .5s var(--ease), opacity .5s var(--ease);
    opacity: .82;
  }
  .slide.active img { opacity: 1; }
  .slide:hover img { transform: translateY(-3px); }
  .slide figcaption {
    position: absolute; left: 10px; right: 10px; bottom: 0;
    background: rgba(46,74,49,.94); color: var(--parchment);
    font-family: "Arimo", Arial, sans-serif;
    font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; padding: 10px 13px; line-height: 1.55;
    transition: opacity .4s var(--ease); opacity: .55;
  }
  .slide.active figcaption { opacity: 1; }
  .slide:first-child figcaption { left: max(32px, calc((100vw - var(--maxw)) / 2 + 32px)); }
  .slide:last-child  figcaption { right: max(32px, calc((100vw - var(--maxw)) / 2 + 32px)); }

  .controls { padding: 26px 0 78px; display: flex; align-items: center; gap: 12px; }
  .cbtn {
    flex: 0 0 auto; width: 46px; height: 46px;
    border: 1px solid rgba(196,152,53,.5); background: transparent; color: var(--brass);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .3s var(--ease), border-color .3s var(--ease), transform .18s var(--ease);
  }
  .cbtn svg { width: 17px; height: 17px; }
  .cbtn:hover:not(:disabled) { background: rgba(196,152,53,.15); border-color: var(--brass); }
  /* Rule 5, tactile feedback: a physical push on press */
  .cbtn:active:not(:disabled) { transform: scale(.94); }
  .cbtn:disabled { opacity: .28; cursor: default; }
  .cbtn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
  .counter {
    font-family: "Arimo", Arial, sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .2em; color: var(--parchment); opacity: .7; margin-left: 6px;
  }
  .dots { display: flex; gap: 9px; margin-left: auto; }
  .dot {
    width: 26px; height: 2px; padding: 0; border: 0; cursor: pointer;
    background: rgba(250,245,236,.28);
    transition: background .3s var(--ease), transform .3s var(--ease);
  }
  .dot[aria-current="true"] { background: var(--brass); }
  .dot:hover { background: rgba(250,245,236,.55); }
  .dot:active { transform: scaleY(2); }
  .dot:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

  /* ---------- founder ---------- */
  .founder-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 44px; align-items: start; }
  .founder-grid figure { margin: 0; }
  figcaption.cap {
    font-family: "Arimo", Arial, sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: .17em;
    text-transform: uppercase; color: var(--ash); margin-top: 10px; line-height: 1.6;
  }
  .shopshot { margin-top: 30px; max-width: 320px; }
  /* the two smaller founder photographs sit as a pair under the biography */
  .shoprow { display: grid; grid-template-columns: 1fr 1.34fr; gap: 18px;
             align-items: end; margin-top: 30px; max-width: 460px; }
  .shoprow figure { overflow: hidden; margin: 0; }
  .shoprow img { width: 100%; height: auto; transition: transform .8s var(--ease); }
  .shoprow figure:hover img { transform: scale(1.03); }
  @media (max-width: 560px) { .shoprow { grid-template-columns: 1fr; max-width: 260px; } }

  /* ---------- booking ---------- */
  .book {
    display: flex; align-items: center; justify-content: space-between;
    gap: 26px; flex-wrap: wrap;
    padding: 0 0 26px; margin-bottom: 38px;
    border-bottom: 1px solid var(--linen);
  }
  .bookline { font-size: 17px; color: var(--ink); margin: 6px 0 0; max-width: 40ch; }
  .bookbtn {
    font-family: "Arimo", Arial, sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
    color: var(--parchment); background: var(--canopy);
    padding: 16px 28px; border: 1px solid var(--canopy); white-space: nowrap;
    transition: background .25s var(--ease), border-color .25s var(--ease),
                transform .25s var(--ease);
  }
  .bookbtn:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
  .bookbtn:active { transform: translateY(1px); }
  .bookbtn[aria-busy="true"] { opacity: .6; pointer-events: none; }
  @media (max-width: 560px) { .book { flex-direction: column; align-items: stretch; }
                              .bookbtn { text-align: center; } }

  /* ---------- close ---------- */
  .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 44px; }
  .contact-grid .k {
    font-family: "Arimo", Arial, sans-serif;
    font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
    color: var(--brass); display: block; margin-bottom: 8px;
  }
  .fineprint {
    border-top: 1px solid var(--linen); margin-top: 56px; padding-top: 24px;
    font-size: 13.5px; line-height: 1.6; color: var(--ash);
  }
  .fineprint strong { color: var(--ink-soft); font-weight: 700; }
  .fineprint a { color: var(--fern); }
  .fineprint p { margin: 0 0 11px; }
  footer { padding: 10px 0 44px; font-size: 13.5px; color: var(--ash); }
  footer p { margin: 0 0 4px; }

  /* ============================================================
     MOTION, intensity 6. Fluid CSS only: transform and opacity, one easing
     curve, a stagger cascade on load-in. No scroll listener anywhere; reveals
     are driven by IntersectionObserver.
     ============================================================ */
  /* PROGRESSIVE ENHANCEMENT. The hidden state is scoped to .js, which an inline
     script in the head sets. If JavaScript fails, errors, or is switched off,
     these sections simply render visible rather than staying at opacity 0 and
     leaving the page blank below the hero. Content first, animation second. */
  .js .reveal {
    opacity: 0; transform: translateY(16px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--i, 0) * 85ms);
  }
  .js .reveal.in { opacity: 1; transform: none; }

  .rise { opacity: 0; transform: translateY(20px); animation: rise .9s var(--ease) forwards; }
  .rise:nth-child(1) { animation-delay: .05s; }
  .rise:nth-child(2) { animation-delay: .14s; }
  .rise:nth-child(3) { animation-delay: .23s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .track { scroll-behavior: auto; }
    .js .reveal, .rise { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
    .slide img, .slide figcaption { transition: none; }
    .lec-mark .car, .lec-mark .bar, .lec-mark .floor { animation: none !important; }
  }

  /* ============================================================
     MOBILE OVERRIDE, section 6. Every asymmetric structure collapses to a
     single column below 860px. Nothing may scroll horizontally except the
     carousel track, which is meant to.
     ============================================================ */
  @media (max-width: 980px) {
    :root { --rail: 150px; --gut: 34px; }
  }
  @media (max-width: 860px) {
    body { font-size: 16.5px; }
    .hero { grid-template-columns: 1fr; min-height: 0; }
    .hero-text { padding: 34px 24px 30px; order: 2; gap: 30px; }
    .hero-shot { order: 1; height: 46dvh; min-height: 260px; }
    .hero-shot img { object-position: 56% 42%; }
    .hero-shot::after {
      background: linear-gradient(to bottom, rgba(34,55,31,.30) 0%, rgba(34,55,31,0) 34%, rgba(34,55,31,.92) 100%);
    }
    .hair { max-width: none; }
    .wrap { padding: 0 24px; }
    .row { grid-template-columns: 1fr; gap: 14px; }
    .rail { position: static; }
    .col { max-width: none; }
    section.band { padding: 60px 0; }
    .gallery { padding-top: 58px; }
    .founder-grid { grid-template-columns: 1fr; gap: 26px; }
    .founder-grid figure { max-width: 320px; }
    .contact-grid { grid-template-columns: 1fr; gap: 22px; }
    .slide { height: clamp(260px, 52dvh, 420px); }
    .slide:first-child { padding-left: 24px; }
    .slide:last-child { padding-right: 24px; }
    .slide:first-child figcaption { left: 24px; }
    .slide:last-child figcaption { right: 24px; }
    .controls { padding-bottom: 56px; }
  }


/* DIRECTION C2 (2026-08-08): two-column staggered flow, compact spacing.
   Sections and photographs strictly alternate so no two photos run
   together; the overflow photographs live in a slim carousel below. */
.masonry { max-width: var(--maxw); margin: 0 auto; padding: 40px 32px; columns: 2; column-gap: 28px; }
.masonry > * { break-inside: avoid; margin: 0 0 28px; }
.masonry section.band { padding: 0 !important; }
.masonry section.band .wrap { max-width: none; padding: 0; }
.masonry .row { display: block; }
.masonry .rail { position: static; margin-bottom: 12px; }
.masonry .col { max-width: none; }
.masonry figure.ph { overflow: hidden; }
.masonry figure.ph img { width: 100%; display: block; transition: transform .8s var(--ease); }
.masonry figure.ph:hover img { transform: scale(1.03); }
@media (max-width: 900px) { .masonry { columns: 1; padding: 28px 24px; } }
/* the slim carousel: same machinery, about half the height, on the light panel */
.mini .note { font-size: 16px; color: var(--ink-soft); max-width: 60ch; }
.mini .track { margin-top: 22px; }
.mini .slide { height: clamp(200px, 30dvh, 300px); }
.mini .slide:first-child { padding-left: 0; }
.mini .slide:last-child { padding-right: 0; }
.mini .controls { padding: 14px 0 0; }
/* compact layer, carried over from the compact experiment */
section.band { padding: 44px 0; }
.hero { min-height: 62dvh; }
.hero-text { padding: 30px clamp(28px, 3.5vw, 48px) 26px; gap: 24px; }
body { line-height: 1.52; }
.lede { font-size: clamp(18px, 1.8vw, 21px); }
.who { font-size: 17px; line-height: 1.6; }
.divide > * { padding: 12px 0; }
.founder-grid { gap: 28px; }
.book { margin-bottom: 22px; }
.fineprint { margin-top: 28px; padding-top: 16px; }
.contact-grid { gap: 18px 28px; }
/* Floating contact bar: pinned like a frozen row, so call, text, email,
   and booking stay one tap away at any scroll position. */
.cbar {
  position: fixed; right: 22px; bottom: 22px; z-index: 85;
  display: flex; background: var(--canopy-deep);
  box-shadow: 0 8px 28px rgba(20,20,19,.28);
}
.cbar a {
  font-family: "Arimo", Arial, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--parchment); padding: 13px 18px; display: block;
  border-left: 1px solid rgba(250,245,236,.16);
}
.cbar a:first-child { border-left: 0; }
.cbar a:hover { background: var(--canopy); }
.cbar a.bk { background: var(--brass); color: var(--canopy-deep); }
.cbar a.bk:hover { background: #d3a94a; }
/* Depth: every paper panel and photograph floats off the parchment */
section.band .row,
.masonry figure.ph {
  box-shadow: 0 2px 4px rgba(20,20,19,.08), 0 18px 44px rgba(20,20,19,.20);
}
@media (max-width: 860px) {
  .cbar { left: 0; right: 0; bottom: 0; }
  .cbar a { flex: 1; text-align: center; padding: 15px 8px calc(15px + env(safe-area-inset-bottom)); }
  body { padding-bottom: 52px; }
}


/* ---- the experience-to-evidence loop motif ---- */
.loop-motif { display: block; }
.loop-motif .ring  { fill: none; stroke: var(--canopy); stroke-width: 2; }
.loop-motif .groove{ fill: none; stroke: var(--canopy); stroke-width: 1; opacity: .38; }
.loop-motif .arrow { fill: var(--brass); stroke: none; }
.loop-motif .word  {
  font-family: "Arimo", Arial, sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; fill: var(--ink-soft);
}
.rail .loop-motif { width: 96px; margin-top: 16px; opacity: .9; }
.rail .loop-motif .word { display: none; } /* rail use is the quiet form: geometry only */
.motif-band { border-top: 1px solid var(--linen); }
.motif-band .stage {
  display: flex; gap: 40px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.motif-band .stage .loop-motif { width: min(300px, 70vw); flex: 0 0 auto; }
.motif-note { font-size: 15px; color: var(--ash); max-width: 52ch; }
/* ---- Visual-first devices (Babs, 2026-08-30) ---- */
.devcap { font-family: "Arimo", Arial, sans-serif; font-size: 12.5px; color: var(--ash); margin: 10px 0 22px; }
.verdicts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linen); background: var(--parchment); margin-top: 6px; }
.verdicts div { padding: 20px 8px; text-align: center; font-family: "Arimo", Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--canopy); border-left: 1px solid var(--linen); }
.verdicts div:first-child { border-left: 0; }
.say { font-family: "Gelasio", Georgia, serif; font-style: italic; font-size: 19px; color: var(--canopy); margin: 4px 0 18px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 12px 0 4px; }
.chain .n { border: 1px solid var(--canopy); color: var(--canopy); background: var(--parchment); padding: 9px 12px; font-family: "Arimo", Arial, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.chain .a { color: var(--brass); font-family: "Arimo", Arial, sans-serif; font-weight: 700; }
.scale { display: flex; margin: 12px 0 4px; font-family: "Arimo", Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.scale > div { padding: 12px 8px; }
.scale .s1 { flex: 1.1; background: var(--canopy); color: var(--parchment); }
.scale .s2 { flex: 1; background: var(--fern); color: var(--parchment); }
.scale .s3 { flex: 2.2; background: var(--brass); color: var(--canopy-deep); }
.scale .s3 small { display: block; font-size: 8.5px; letter-spacing: .16em; margin-top: 3px; }
.scale .s4 { flex: 1.3; background: var(--ink); color: var(--parchment); }
.aud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.aud span { border: 1px solid var(--linen); background: var(--parchment); padding: 10px 14px; font-family: "Arimo", Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.nots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 18px; }
.nots div { font-family: "Gelasio", Georgia, serif; font-weight: 700; font-size: clamp(19px, 2vw, 24px); color: var(--canopy); border-top: 2px solid var(--brass); padding-top: 10px; }
.divide.trigger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.divide.trigger-grid > *:nth-child(2) { border-top: 0; padding-top: 0; }
@media (max-width: 640px) {
  .verdicts { grid-template-columns: repeat(2, 1fr); }
  .verdicts div:nth-child(3) { border-left: 0; }
  .verdicts div:nth-child(n+3) { border-top: 1px solid var(--linen); }
  .scale { flex-direction: column; }
  .nots { grid-template-columns: 1fr; }
  .divide.trigger-grid { grid-template-columns: 1fr; }
  .divide.trigger-grid > *:nth-child(2) { border-top: 1px solid var(--linen); padding-top: 12px; }
}
/* ---- The spine and the report (Babs, 2026-08-30) ---- */
.spine-grid { display: grid; grid-template-columns: 1fr 200px 1fr; gap: 26px; align-items: stretch; margin-top: 10px; }
.spine-panel { background: var(--parchment); border: 1px solid var(--linen); padding: 24px 22px; }
.spine-panel h3 { font-family: "Gelasio", Georgia, serif; font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--canopy); margin: 6px 0 12px; }
.spine-panel ul { list-style: none; margin: 0; padding: 0; }
.spine-panel li { padding: 9px 0; border-top: 1px solid var(--linen); font-size: 15px; line-height: 1.5; }
.spine-panel li:first-child { border-top: 0; padding-top: 0; }
.spine-panel .pnl-shot { margin: 16px 0 0; overflow: hidden; max-width: 220px; }
.spine-loop { display: flex; align-items: center; justify-content: center; }
.spine-loop .loop-motif { width: 100%; }
/* motion placeholder, CSS only: the flow travels the ring; arrows stay fixed */
.spine-loop .ring { stroke-dasharray: 6 7; animation: loop-flow 2.8s linear infinite; }
@keyframes loop-flow { to { stroke-dashoffset: -13; } }
@media (prefers-reduced-motion: reduce) { .spine-loop .ring { animation: none; stroke-dasharray: none; } }
.chain-v { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 10px 0 14px; }
.chain-v .n { border: 1px solid var(--canopy); color: var(--canopy); background: var(--paper); padding: 8px 10px; text-align: center; font-family: "Arimo", Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.chain-v .a { text-align: center; color: var(--brass); font-family: "Arimo", Arial, sans-serif; font-weight: 700; line-height: 1; }
.scale.mini { font-size: 8.5px; letter-spacing: .06em; margin: 10px 0 14px; }
.scale.mini > div { padding: 8px 4px; }
.report-stage { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; margin: 26px 6px 10px; }
.plate-fig { position: relative; margin: 0; }
.plate-fig::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; background: var(--canopy); }
.plate-fig::after { content: ""; position: absolute; top: -7px; right: -23px; width: 22px; height: 22px; background: var(--brass); }
.plate-fig img { position: relative; width: 100%; border: 1px solid var(--linen); box-shadow: 0 12px 34px rgba(20,20,19,.22); }
.plate-fig figcaption { position: relative; font-family: "Arimo", Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ash); margin-top: 24px; }
@media (max-width: 900px) {
  .spine-grid { grid-template-columns: 1fr; }
  .spine-loop { max-width: 190px; margin: 0 auto; }
  .spine-loop .loop-motif { transform: rotate(90deg); }
  .report-stage { grid-template-columns: 1fr; gap: 40px; }
  .plate-fig::after { right: -7px; }
}

/* ==== Multipage overrides (Babs, 2026-08-30) ==== */
.nav { transform: none; }
body { padding-top: 58px; }
.page-head { background: var(--canopy-deep); color: var(--parchment); padding: 54px 0 44px; }
.page-head h1 { font-family: "Gelasio", Georgia, serif; font-weight: 700; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -.012em; color: var(--parchment); margin: 10px 0 0; }
.page-head .hair { margin-top: 18px; }
.teaser-link { display: inline-block; margin-top: 16px; font-family: "Arimo", Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--canopy); text-decoration: none; border-bottom: 2px solid var(--brass); padding-bottom: 3px; }
.teaser-link:hover { color: var(--brass); }
.report-stage.single { grid-template-columns: minmax(0, 420px); }
section.band + section.band { padding-top: 0; }

/* ==== Website v2 (Babs, 2026-09-19) ==== */
/* Tower Spire three-bar menu: the bottom three rules of the mark (24 : 45 : 66). */
.nav li.only-menu { display: none; }
.spire-btn { display: none; background: none; border: 0; padding: 10px 2px 10px 12px; cursor: pointer; }
.spire-btn span { display: block; height: 2px; background: var(--canopy); margin: 5px 0; transition: width .32s var(--ease), background .32s var(--ease); }
.spire-btn span:nth-child(1) { width: 9px; }
.spire-btn span:nth-child(2) { width: 16px; }
.spire-btn span:nth-child(3) { width: 24px; }
.spire-btn:hover span { background: var(--ink); }
.nav.open .spire-btn span:nth-child(1) { width: 24px; background: var(--brass); }
@media (max-width: 860px) {
  .spire-btn { display: block; }
  .nav.open ul { display: block; position: absolute; top: 58px; left: 0; right: 0; margin: 0; padding: 6px 24px 14px; background: var(--parchment); border-bottom: 1px solid var(--linen); box-shadow: 0 14px 28px rgba(20,20,19,.12); }
  .nav.open ul a.lnk { padding: 13px 2px; font-size: 12px; border-top: 1px solid var(--linen); }
  .nav.open li:first-child a.lnk { border-top: 0; }
  .nav.open li.only-menu { display: block; }
}
/* page head with media (The Evaluation) */
.page-head.has-media .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; }
.page-head.has-media { padding: 26px 0 18px; }
.ph-media .turntable { display: block; width: 100%; max-height: 340px; object-fit: contain; }
.h1-sub { display: block; font-family: "Arimo", Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-top: 12px; }
@media (max-width: 860px) { .page-head.has-media .wrap { grid-template-columns: 1fr; } .ph-media .turntable { max-height: 210px; } }
/* flip-board: sticky section nav */
.subnav { position: sticky; top: 58px; z-index: 70; background: rgba(236,232,221,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linen); }
.subnav .in { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav .in::-webkit-scrollbar { display: none; }
.subnav a { flex: 0 0 auto; padding: 13px 12px 11px; font-family: "Arimo", Arial, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; color: var(--ash); border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--ink); border-bottom-color: var(--brass); }
.band[id] { scroll-margin-top: 108px; }
@media (max-width: 860px) { .subnav .in { padding: 0 16px; } }
/* flip-board: cards that open a deeper layer */
.fgrid { display: grid; gap: 12px; margin: 14px 0 6px; align-items: start; }
.fgrid.four { grid-template-columns: repeat(4, 1fr); }
.fcard { border: 1px solid var(--linen); background: var(--parchment); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.fcard[open], .fcard:hover { border-color: var(--canopy); }
.fcard[open] { box-shadow: 0 10px 26px rgba(20,20,19,.10); }
.fcard summary { list-style: none; cursor: pointer; padding: 18px 12px 16px; text-align: center; font-family: "Arimo", Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--canopy); position: relative; }
.fcard summary::-webkit-details-marker { display: none; }
.fcard summary::after { content: "+"; display: block; margin-top: 8px; color: var(--brass); font-size: 15px; letter-spacing: 0; line-height: 1; }
.fcard[open] summary::after { content: "\2212"; }
.fcard summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.fcard summary small { display: block; font-size: 8.5px; letter-spacing: .14em; margin-top: 5px; }
.fcard .fbody { padding: 2px 14px 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); border-top: 1px solid var(--linen); margin: 0 10px; padding-top: 12px; }
.fcard.r summary { color: var(--parchment); }
.fcard.r.s1 summary { background: var(--canopy); }
.fcard.r.s2 summary { background: var(--fern); }
.fcard.r.s3 summary { background: var(--brass); color: var(--canopy-deep); }
.fcard.r.s4 summary { background: var(--ink); }
.fcard.r summary::after { color: inherit; opacity: .8; }
.fcard.r .fbody { border-top: 0; }
@media (max-width: 760px) { .fgrid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .fgrid.four { grid-template-columns: 1fr; } }
/* report plates and lightbox */
.plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 18px 0 30px; }
.plate { appearance: none; background: none; border: 0; padding: 0; cursor: zoom-in; text-align: left; position: relative; }
.plate::before { content: ""; position: absolute; inset: 10px -10px 22px 10px; background: var(--canopy); transition: transform .3s var(--ease); }
.plate:hover::before { transform: translate(3px, 3px); }
.plate img { position: relative; display: block; width: 100%; border: 1px solid var(--linen); box-shadow: 0 10px 26px rgba(20,20,19,.2); }
.plate span { position: relative; display: block; margin-top: 16px; font-family: "Arimo", Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ash); }
.plate:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }
@media (max-width: 900px) { .plates { grid-template-columns: 1fr 1fr; } }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 900px); max-height: 94dvh; overflow: auto; }
.lightbox::backdrop { background: rgba(20,20,19,.78); }
.lightbox img { display: block; width: 100%; height: auto; }
.lb-close { position: sticky; top: 0; float: right; z-index: 2; background: var(--canopy-deep); color: var(--parchment); border: 0; padding: 10px 16px; font-family: "Arimo", Arial, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.ask { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--linen); padding-top: 22px; max-width: 760px; }
.ask .bookline { margin: 4px 0 0; }
/* CAD still beside the decision strip */
.cad-still { margin: 18px 0 0; max-width: 460px; }
.cad-still img { display: block; width: 100%; height: auto; }
.wide-shot { margin: 0 0 18px; max-width: 760px; }
.wide-shot img { display: block; width: 100%; height: auto; }
a.inl { color: var(--canopy); font-weight: 700; text-decoration: none; white-space: nowrap; }
a.inl:hover { color: var(--brass); }
.col > .k, .ask .k, .book .k { display: block; font-family: "Arimo", Arial, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); margin: 22px 0 4px; }
.ask .k, .book .k { margin-top: 0; }
@media (max-width: 480px) { .nav .in { padding: 0 20px; } .nav .call { display: none; } .spire-btn { margin-left: auto; } }

/* Option B: the hook line leads the How we know section (2026-09-23) */
.hookline { font-family: "Gelasio", Georgia, serif; font-weight: 600; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.25; color: var(--canopy); max-width: 30ch; margin: 0 0 30px; padding-top: 16px; border-top: 3px solid var(--brass); }

/* How we know: loop A1 (Carlos chose Option A, 2026-09-24) */
.loop-a1 .loop { display: block; width: 100%; margin: 4px auto 10px; }
.loop-a1 .loop-pair { margin-top: -6px; }
.loop-a1 svg text { font-family: "Arimo", Arial, sans-serif; }
.loop-a1 .nt { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; fill: var(--canopy); }
.loop-a1 .lab { font-family: "Gelasio", Georgia, serif; font-style: italic; font-size: 16px; fill: var(--ash); }
.loop-a1 .halo { fill: none; stroke: var(--linen); stroke-width: 22; }
.loop-a1 .arc { fill: none; stroke: var(--canopy); stroke-width: 3; }
.loop-a1 .ah, .loop-a1 .dot { fill: var(--brass); }
.loop-a1 .node { fill: var(--parchment); stroke: var(--brass); stroke-width: 3; }
.loop-a1 .loop-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.loop-a1 .loop-pair .spine-panel { background: var(--parchment); }
@media (prefers-reduced-motion: reduce) { .loop-a1 .dot { display: none; } }
@media (max-width: 860px) { .loop-a1 .loop-pair { grid-template-columns: 1fr; } }

/* loop A1, flanked: cards either side of the loop (2026-09-24) */
.loop-a1.flank { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px, 380px) minmax(0,1fr); gap: 26px; align-items: center; }
#spine .row { display: block; }
#spine .rail { position: static; margin-bottom: 14px; }
.loop-a1.flank .spine-panel { background: var(--parchment); }
.loop-a1.flank .loop-mid .loop { width: 100%; margin: 0; position: relative; }
@media (max-width: 1100px) { .loop-a1.flank { grid-template-columns: 1fr 1fr; } .loop-a1.flank .loop-mid { grid-column: 1 / -1; grid-row: 1; max-width: 440px; margin: 0 auto; } }
@media (max-width: 700px) { .loop-a1.flank { grid-template-columns: 1fr; } }

/* The decision: worm & gear still beside the turning sheave (2026-09-24) */
.cad-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-top: 18px; max-width: 860px; }
.cad-pair .cad-still { margin: 0; max-width: none; }
.cad-sheave { margin: 0; }
.cad-sheave canvas { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .cad-pair { grid-template-columns: 1fr; } }

/* How we know: cards with the inside edge cut away to a radius around the loop (2026-09-24) */
@media (min-width: 1101px) {
  .loop-a1.flank { --mid: 380px; --tuck: 70px; --carve: 205px; grid-template-columns: minmax(0,1fr) var(--mid) minmax(0,1fr); gap: 0; align-items: stretch; }
  .loop-a1.flank .loop-mid { align-self: center; position: relative; z-index: 2; }
  .loop-a1.flank .carve-ring { position: absolute; left: 50%; top: 50%; width: calc(2 * var(--carve) + 2px); height: calc(2 * var(--carve) + 2px); transform: translate(-50%, -50%); pointer-events: none; overflow: visible; }
  .loop-a1.flank .carve-ring circle { fill: none; stroke: var(--linen); stroke-width: 1; }
  .loop-a1.flank > .spine-panel { position: relative; z-index: 1; }
  .loop-a1.flank > .spine-panel:first-child { margin-right: calc(-1 * var(--tuck));
    -webkit-mask-image: radial-gradient(circle var(--carve) at calc(100% + var(--mid) / 2 - var(--tuck)) 50%, transparent calc(var(--carve) - 1px), #000 var(--carve));
            mask-image: radial-gradient(circle var(--carve) at calc(100% + var(--mid) / 2 - var(--tuck)) 50%, transparent calc(var(--carve) - 1px), #000 var(--carve)); }
  .loop-a1.flank > .spine-panel:last-child { margin-left: calc(-1 * var(--tuck));
    -webkit-mask-image: radial-gradient(circle var(--carve) at calc(0% - var(--mid) / 2 + var(--tuck)) 50%, transparent calc(var(--carve) - 1px), #000 var(--carve));
            mask-image: radial-gradient(circle var(--carve) at calc(0% - var(--mid) / 2 + var(--tuck)) 50%, transparent calc(var(--carve) - 1px), #000 var(--carve)); }
  .loop-a1.flank .crescent { height: 100%; width: calc(var(--tuck) + 30px); }
  .loop-a1.flank > .spine-panel:first-child .crescent { float: right; margin-right: -30px;
    shape-outside: circle(calc(var(--carve) + 14px) at calc(100% + var(--mid) / 2 - var(--tuck) + 30px) 50%); }
  .loop-a1.flank > .spine-panel:last-child .crescent { float: left; margin-left: -30px;
    shape-outside: circle(calc(var(--carve) + 14px) at calc(0% - var(--mid) / 2 + var(--tuck) - 30px) 50%); }
}

.loop-a1.flank .carve-ring { display: none; }
@media (min-width: 1101px) { .loop-a1.flank .carve-ring { display: block; } }

/* The Evaluation: page head carries both models; report thumbnails (2026-09-24) */
.ph-media.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.ph-media .sheave-turn { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .ph-media.duo { grid-template-columns: 1fr 1fr; } }
.thumbs { display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0 22px; }
.thumbs figure { margin: 0; width: 150px; }
.thumbs img { display: block; width: 100%; height: auto; border: 1px solid var(--linen); box-shadow: 0 6px 16px rgba(20,20,19,.12); background: #fff; }
.thumbs figcaption { font-family: "Arimo", Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); margin-top: 8px; }

.ph-media .worm-drive { display: block; width: 100%; height: auto; }

/* ==== Production additions (website v2 build, 2026-09-24) ==== */
footer .foot-photos { font-size: 12px; line-height: 1.5; max-width: 72ch; margin-top: 10px; }
.thumbs-note { margin-top: -8px; }
/* worm & gear alone (if the sheave comes off the page head): hold the frames near their native size, centered */
.ph-media:not(.duo) .worm-drive { max-width: 300px; margin: 0 auto; }