body { margin: 0; background: #0B0B0C; color: #F2EFEA; font-family: "Barlow", "Rubik", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
    a { color: #F2EFEA; text-decoration: none; transition: color .25s ease; } a:hover { color: #EF4345; }
    .display { font-family: "Anton", "Arial Narrow", Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }
    /* TWO FAMILIES, ONE ROLE EACH.
       .display (Anton, uppercase) is for SHORT titles only -- three words or
       fewer. Anything longer takes .headline, which is Barlow in sentence
       case: an uppercase condensed face set as a full sentence is what made
       the page feel dense. The handwritten face is gone entirely. */
    .headline { font-family: "Barlow", "Rubik", "Helvetica Neue", Arial, sans-serif;
                font-weight: 700; letter-spacing: -0.022em; }
    .lead { font-family: "Barlow", "Rubik", Arial, sans-serif; font-weight: 600;
            letter-spacing: -0.01em; color: #EF4345; }
    /* one secondary-link style, so what is clickable is obvious and
       consistent -- and visible at rest, never revealed on hover */
    .qlink { display: inline-flex; align-items: center; gap: 10px; font-size: 16px;
             font-weight: 600; color: #F2EFEA; border: 1px solid #2C2C30;
             padding: 13px 20px; border-radius: 999px;
             transition: border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
    .qlink:hover { color: #F2EFEA; border-color: #EF4345; transform: translateY(-2px); }
    .label { font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase; color: #EF4345; font-weight: 700; }
    .muted { color: #B3ACA2; }
    .box { background: #141416; border: 1px solid #232326; }
    .btn { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 30px; background: #EF4345; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), color .35s ease; }
    .btn::before { content: ""; position: absolute; inset: 0; background: #F2EFEA; transform: translateY(101%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
    .btn:hover { color: #0B0B0C; transform: translateY(-3px); } .btn:hover::before { transform: translateY(0); }
    .btn > * { position: relative; } .btn svg { transition: transform .35s ease; } .btn:hover svg { transform: translateX(6px); }
    .link { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; position: relative; padding-bottom: 4px; }
    .link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #EF4345; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
    .link:hover::after { transform: scaleX(1); transform-origin: left; } .link svg { transition: transform .35s cubic-bezier(.2,.7,.2,1); } .link:hover svg { transform: translate(4px, 0); }
    .ic { width: 52px; height: 52px; border: 1px solid #EF4345; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background .35s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
    .ic svg { width: 22px; height: 22px; stroke: #EF4345; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
    .nb { width: 44px; height: 44px; background: #EF4345; color: #fff; font-family: "Anton", Impact, sans-serif; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform .5s cubic-bezier(.2,.7,.2,1), background .3s ease; }
    .card { position: relative; background: #141416; border: 1px solid #232326; transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .5s ease; }
    .card:hover { transform: translateY(-8px); border-color: #EF4345; box-shadow: 0 40px 80px -40px rgba(239,67,69,0.45); }
    .card:hover .nb { transform: rotate(-8deg) scale(1.08); } .card:hover .ic { background: #EF4345; } .card:hover .ic svg { stroke: #fff; }
    .tile { overflow: hidden; position: relative; } .tile img { transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter: saturate(0.85); } .card:hover .tile img, .tile:hover img { transform: scale(1.06); filter: saturate(1); }
    .q { border-top: 1px solid #232326; cursor: pointer; transition: background .3s ease; }
    .q:hover { background: #111113; }
    .q .qt { transition: color .3s ease; } .q:hover .qt { color: #EF4345; }
    .q .plus { transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s ease; } .q[data-open="true"] .plus { transform: rotate(45deg); background: #EF4345; } .q[data-open="true"] .plus svg { stroke: #fff; }
    .q .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); } .q .ans > div { overflow: hidden; }
    .q[data-open="true"] .ans { grid-template-rows: 1fr; }
    .q[data-open="true"] .nb { background: #F2EFEA; color: #0B0B0C; }
    .wr { transition: background .3s ease, padding-left .35s cubic-bezier(.2,.7,.2,1); border-top: 1px solid #232326; } .wr:hover { background: #111113; padding-left: 14px; }
    /* logos read at rest now -- 0.55 made the client list something you had to
       hover to see, which is the opposite of what a credibility row is for */
    .invert img { filter: invert(1) grayscale(1) brightness(1.25); opacity: 0.88; transition: opacity .4s ease, transform .4s ease; } .invert img:hover { opacity: 1; transform: translateY(-3px); }
    .soc { width: 42px; height: 42px; border: 1px solid #2A2A2E; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: border-color .3s ease, background .3s ease, transform .3s ease; } .soc svg { width: 16px; height: 16px; stroke: #F2EFEA; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; } .soc:hover { border-color: #EF4345; background: #EF4345; transform: translateY(-3px); } .soc:hover svg { stroke: #fff; }
    .field { transition: border-color .3s ease, box-shadow .3s ease; } .field:hover { border-color: #EF4345; box-shadow: 0 0 0 4px rgba(239,67,69,0.15); }
    .pulse { animation: pulse 2.2s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239,67,69,0.6); } 100% { box-shadow: 0 0 0 18px rgba(239,67,69,0); } }
    .glowpulse { animation: glowpulse 5s ease-in-out infinite; } @keyframes glowpulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
    @keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes word { from { clip-path: inset(-60% -25% 160% -25%); transform: translateY(80px); } to { clip-path: inset(-60% -25% -60% -25%); transform: none; } }
    @keyframes portrait { from { clip-path: inset(160% -25% -60% -25%); transform: translateY(60px); } to { clip-path: inset(-60% -25% -60% -25%); transform: none; } }
    @keyframes write { from { clip-path: inset(-60% 125% -60% -25%); } to { clip-path: inset(-60% -25% -60% -25%); } }
    @keyframes marquee { to { transform: translateX(-50%); } }
    .aword { animation: word .6s cubic-bezier(.2,.7,.2,1) 0s both; } .aport { animation: portrait .7s cubic-bezier(.2,.7,.2,1) .12s both; }
    .awrite { animation: write .45s cubic-bezier(.2,.7,.2,1) .10s both; }
        /* the whole fold is present inside 0.8s: nothing the visitor needs to
       read or click waits on an entrance */
    .a1 { animation: up .5s cubic-bezier(.2,.7,.2,1) .14s both; }
    .a2 { animation: up .5s cubic-bezier(.2,.7,.2,1) .22s both; }
    .a3 { animation: up .5s cubic-bezier(.2,.7,.2,1) .30s both; }
    .a4 { animation: up .5s cubic-bezier(.2,.7,.2,1) .06s both; }
    .rv { animation: up .9s cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-duration: auto; animation-range: entry 0% entry 40%; }
    .rv2 { animation: up .9s cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-duration: auto; animation-range: entry 10% entry 55%; }
    .rv3 { animation: up .9s cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-duration: auto; animation-range: entry 20% entry 70%; }
    .track { display: flex; gap: 64px; width: max-content; animation: marquee 44s linear infinite; align-items: center; } .marquee:hover .track { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) { .aword,.aport,.awrite,.a1,.a2,.a3,.a4,.pulse,.glowpulse,.rv,.rv2,.rv3,.track { animation: none !important; } }
    /* --- By the numbers: Anton slab figures --------------------------------
       Figures are the live site's own Elementor counters (95 / 117 / 1350 / 15). */
    @property --n1 { syntax: "<integer>"; initial-value: 0; inherits: false; }
    @property --n2 { syntax: "<integer>"; initial-value: 0; inherits: false; }
    @property --n3 { syntax: "<integer>"; initial-value: 0; inherits: false; }
    @property --n4 { syntax: "<integer>"; initial-value: 0; inherits: false; }
    .nv::after { content: counter(nn); }
    .ncell:nth-child(1) .nv { counter-reset: nn var(--n1); --n1: 95; }
    .ncell:nth-child(2) .nv { counter-reset: nn var(--n2); --n2: 117; }
    .ncell:nth-child(3) .nv { counter-reset: nn var(--n3); --n3: 1350; }
    .ncell:nth-child(4) .nv { counter-reset: nn var(--n4); --n4: 15; }
    .nums:hover .nv { animation-duration: 1.5s; animation-timing-function: cubic-bezier(.2,.75,.2,1); animation-fill-mode: both; }
    .nums:hover .ncell:nth-child(1) .nv { animation-name: cu1; animation-delay: 0s; }
    .nums:hover .ncell:nth-child(2) .nv { animation-name: cu2; animation-delay: .07s; }
    .nums:hover .ncell:nth-child(3) .nv { animation-name: cu3; animation-delay: .14s; }
    .nums:hover .ncell:nth-child(4) .nv { animation-name: cu4; animation-delay: .21s; }
    @keyframes cu1 { from { --n1: 0; } to { --n1: 95; } }
    @keyframes cu2 { from { --n2: 0; } to { --n2: 117; } }
    @keyframes cu3 { from { --n3: 0; } to { --n3: 1350; } }
    @keyframes cu4 { from { --n4: 0; } to { --n4: 15; } }
    /* Was four equal columns split by hairline dividers -- the same stats-row
       shape 02 already uses, so the two directions read alike. Now a poster
       stack: figures sized by the magnitude they report, placed asymmetrically
       on a 12-column grid with the rows offset, no dividers at all. DOM order
       is unchanged so the nth-child counter bindings above still hold. */
    /* First pass scattered the four figures across a 12-column grid in two
       rows; row 2 held one cell in columns 3-5, which orphaned nine columns
       beside it and the whole right half under 1350. That space read as a
       hole, not as air. Now they share one bottom baseline, with widths
       sized to the magnitude each reports, so the band is dense and what is
       left over is a single clean right margin. */
    /* Third pass, and the first two failed for the same measured reason: .nv is
       a flex item, so default align-items:stretch made its box the full column
       width. Measuring the BOX said the gaps were an even 52px; measuring the
       INK said 254 / 253 / 100. The numerals were left-aligned inside boxes of
       318/355/430/318 with 202/201/49/235px of dead space, so the rhythm was
       never even. A divider bounds that dead space and turns it into column
       padding, which is why the shape wants rules. */
    .nums { display: grid; grid-template-columns: 1fr 1fr 1.3fr 0.9fr;
            gap: 0; align-items: stretch; }
    .ncell { position: relative; display: flex; flex-direction: column;
             justify-content: flex-end; gap: 16px; padding: 30px 0 0 42px; }
    .ncell:first-child { padding-left: 0; }
    .ncell + .ncell { border-left: 1px solid rgba(242,239,234,0.15); }
    /* accent cap so the rule reads as drawn, not as a table border */
    .ncell + .ncell::before { content: ""; position: absolute; left: -1px; top: 0;
                              width: 1px; height: 34px; background: #EF4345; }
    .nv { font-family: "Anton", Impact, sans-serif; line-height: 0.82; letter-spacing: 0.005em;
          color: #F2EFEA; transition: color .4s ease; }
    .ncell:nth-child(1) .nv { font-size: 116px; }
    .ncell:nth-child(2) .nv { font-size: 132px; }
    .ncell:nth-child(3) .nv { font-size: 200px; }   /* 1350 leads */
    .ncell:nth-child(4) .nv { font-size: 100px; }
    .ncell:hover .nv { color: #EF4345; }
    .nl { font-size: 18px; line-height: 1.5; color: rgba(242,239,234,0.84);
          max-width: 21ch; min-height: 3em; }
    .nr { height: 3px; background: #EF4345; transform: scaleX(0.18); transform-origin: left;
          transition: transform .6s cubic-bezier(.16,1,.3,1); }
    .ncell:hover .nr { transform: scaleX(1); }

    /* --- Awards + the hummus aside ------------------------------------------ */
    .awd { display: flex; align-items: flex-start; gap: 22px; padding: 26px 0; border-top: 1px solid rgba(242,239,234,0.14); }
    .awd:last-of-type { border-bottom: 1px solid rgba(242,239,234,0.14); }
    .awd .at { font-size: 22px; line-height: 1.4; font-weight: 600; max-width: 40ch; transition: transform .45s cubic-bezier(.16,1,.3,1); }
    .awd:hover .at { transform: translateX(9px); }
    /* Hummus: a photograph card (client, 2026-09-29: "crying out for a visual").
       Soul still, graded to the page's photo rule -- black and white, the red
       paprika the only colour. The plate sits on one side of the image and the
       other side fades to ink, which is where the word goes. Its colours are
       literals outside make-light's map (#0E0E10, #FFFFFF, rgba(255,255,255,x)),
       because the photo stays dark on every ground and so must its type. */
    .hum { position: relative; display: block; height: 620px; overflow: hidden; border-radius: 4px;
           background: #0E0E10; border: 1px solid rgba(255,255,255,0.08); color: #FFFFFF; }
    .hum:hover { color: #FFFFFF; }
    .hum img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
               transform: scale(1.02); transform-origin: 70% 50%;
               transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
    .hum:hover img { transform: scale(1.07) rotate(-2deg); }
    .hcopy { position: absolute; left: 56px; bottom: 52px; display: flex; flex-direction: column;
             gap: 16px; align-items: flex-start; }
    .hw { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: 150px;
          line-height: 0.84; letter-spacing: 0.005em; color: #FFFFFF; }
    .hs { font-size: 22px; line-height: 1.5; color: rgba(255,255,255,0.84); }
    /* .hmlink, not .hl: .hl is the heading highlight ("What I'm hired for"), and a
       same-named link style shrank that highlight to a 16px uppercase pill */
    .hmlink { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700;
          letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF;
          border-bottom: 1px solid #EF4345; padding-bottom: 4px; margin-top: 4px; }
    .hmlink svg { transition: transform .45s cubic-bezier(.16,1,.3,1); }
    .hum:hover .hmlink svg { transform: translateX(6px); }

    /* Celestial orrery -------------------------------------------------------
       Concentric rings with a body travelling each rim, plus a few twinkling
       marks. Everything animates transform/opacity only, so it all stays on the
       compositor -- eight rotating rings across the page, where the previous
       starfield redrew ~1900 pixels into an ImageData buffer every frame.
       Each band's copy sits on the left, so the field is masked clear of it:
       the vertical fade is INTERSECTED with a horizontal one running from
       --clear (transparent) to --solid (full). A ring dissolving mid-arc into
       the dark reads as depth rather than as a cut. */
    .orr { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
           --clear: 34%; --solid: 54%; }
    .orr .neb { position: absolute; inset: 0;
                background: radial-gradient(52% 44% at var(--cx, 62%) var(--cy, 46%),
                            rgba(239,67,69,0.13), rgba(239,67,69,0) 66%); }
    .orrf { position: absolute; left: var(--cx, 62%); top: var(--cy, 46%); width: 0; height: 0; }
    .orb { position: absolute; left: 0; top: 0; border-radius: 50%;
           width: var(--d); height: var(--d);
           margin-left: calc(var(--d) / -2); margin-top: calc(var(--d) / -2);
           border: 1px solid rgba(242,239,234,0.105);
           animation-name: orbspin; animation-duration: var(--dur, 60s);
           animation-timing-function: linear; animation-iteration-count: infinite; }
    .orb.rev { animation-direction: reverse; }
    .orb.warm { border-color: rgba(239,67,69,0.2); }
    @keyframes orbspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .pl { position: absolute; left: 50%; top: 0; border-radius: 50%;
          width: var(--s, 6px); height: var(--s, 6px);
          margin-left: calc(var(--s, 6px) / -2); margin-top: calc(var(--s, 6px) / -2);
          background: rgba(242,239,234,0.72); }
    .pl.hot { background: #EF4345; }
    /* The centre body pulses via a scaling pseudo-element, never a looping
       box-shadow -- a shadow loop repaints instead of compositing. */
    .orbc { position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
            border-radius: 50%; background: #EF4345; }
    .orbc::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
                   border: 1px solid rgba(239,67,69,0.55); opacity: 0;
                   animation-name: orbpulse; animation-duration: 3.8s;
                   animation-iteration-count: infinite;
                   animation-timing-function: cubic-bezier(.2,.7,.2,1); }
    @keyframes orbpulse { 0% { transform: scale(0.5); opacity: 0.85; }
                          100% { transform: scale(2.8); opacity: 0; } }
    .gly { position: absolute; width: 0; height: 0; opacity: 0;
           animation-name: twinkle; animation-duration: var(--gd, 7s);
           animation-delay: var(--gdl, 0s); animation-iteration-count: infinite;
           animation-timing-function: ease-in-out; }
    .gp { position: absolute; background: rgba(242,239,234,0.55); }
    .gly.hot .gp { background: rgba(239,67,69,0.8); }
    .gly .p1 { width: 22px; height: 1px; left: -11px; top: 0; }
    .gly .p2 { width: 1px; height: 22px; left: 0; top: -11px; }
    .gly .p3 { width: 4px; height: 4px; left: -2px; top: -2px; transform: rotate(45deg); }
    @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.8); }
                         50% { opacity: 0.3; transform: scale(1); } }
    .orr.fadeb {
      -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 96%),
                          linear-gradient(90deg, transparent var(--clear), #000 var(--solid));
      -webkit-mask-composite: source-in;
              mask-image: linear-gradient(180deg, #000 62%, transparent 96%),
                          linear-gradient(90deg, transparent var(--clear), #000 var(--solid));
              mask-composite: intersect; }
    .orr.fadeboth {
      -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent),
                          linear-gradient(90deg, transparent var(--clear), #000 var(--solid));
      -webkit-mask-composite: source-in;
              mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent),
                          linear-gradient(90deg, transparent var(--clear), #000 var(--solid));
              mask-composite: intersect; }
    @media (prefers-reduced-motion: reduce) {
      .orb, .orbc::after, .gly { animation: none; }
      .gly { opacity: 0.18; }
    }

    /* The fold's side rail of page sections was removed: the top menu
       already names those destinations, and a second list beside the
       hero competed with the message for the same glance. */
    @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

    /* Photo strip ------------------------------------------------------------
       Captions sit on the image over an always-present scrim; the scrim is not
       a hover reveal, so the text never depends on a state to be readable. */
    .pcard { position: relative; display: block; overflow: hidden; background: #141416;
             border: 1px solid #232326;
             transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease,
                         box-shadow .5s ease; }
    .pcard img { width: 100%; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
    .pcard .pscrim { position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
                     background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0.82) 62%,
                                 rgba(11,11,12,0.95) 100%);
                     transition: opacity .4s ease; }
    .pcard .pcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 26px;
                   display: flex; align-items: baseline; gap: 14px; }
    .pcard .pn { font-family: "Anton", Impact, sans-serif; font-size: 17px; letter-spacing: 0.08em;
                 color: #EF4345; flex: none; }
    .pcard .pt { font-size: 19px; line-height: 1.35; font-weight: 600; color: #F2EFEA; }
    .pcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
                    background: #EF4345; transform: scaleX(0); transform-origin: left;
                    transition: transform .5s cubic-bezier(.2,.7,.2,1); }
    .pcard:hover { color: #F2EFEA; transform: translateY(-8px); border-color: #EF4345;
                   box-shadow: 0 40px 80px -40px rgba(239,67,69,0.45); }
    .pcard:hover img { transform: scale(1.05); }
    .pcard:hover .pt { color: #F2EFEA; }
    .pcard:hover .pn { color: #EF4345; }
    .pcard:hover::after { transform: scaleX(1); }

    /* --- The Lighthouse: reel index ---------------------------------------
       Was a big photo tile beside a copy column with a list under it -- the
       same shape 01 and 02 already use, so all three directions read alike.
       Here the big rectangle is gone entirely and the episodes become a reel
       of stills. Every row carries its own image at rest: the log cards taught
       us that hiding the imagery behind :hover leaves a dead section. */
    .lhs { padding: 120px 72px; display: flex; flex-direction: column; gap: 56px; }
    .lhshead { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 64px; align-items: end; }
    /* A photo-filled headline (background-clip: text) was tried here and cut.
       Measured: every conversation still in the library is low-key --
       stage.jpg means L=42 with 83% of its pixels under L=60, auditorium 82%,
       tv 70% -- so against an L~11 ground the type could be legible or
       photographic, never both. The outlined second line carries the same
       editorial weight with contrast we control outright. */
    /* Anton's caps measure 0.875em of ink, so line-height 0.88 left a 1px
       gap between the two lines -- touching, and the 2px stroke on the
       outlined line closed even that. 1.02 gives a 0.145em (15px) gap. */
    .lhstitle { margin: 14px 0 0 0; font-size: 104px; line-height: 1.02; color: #F2EFEA; }
    /* guarded: transparent fill is only safe where the stroke actually
       paints, or the word disappears -- the trap the photo fill nearly hit */
    .lhstitle .ghost { color: #6E6862; }
    @supports (-webkit-text-stroke: 2px red) {
      .lhstitle .ghost { color: transparent; -webkit-text-stroke: 2px #6E6862;
                         transition: -webkit-text-stroke-color .5s ease; }
      .lhs:hover .lhstitle .ghost { -webkit-text-stroke-color: #EF4345; }
    }
    .lhslede { margin: 0 0 10px 0; font-size: 19px; line-height: 1.65; color: #CCC6BD; }
      /* --- Pro-Bono Day -------------------------------------------------------
       Promoted out of a shared two-up card into its own full-width band. */
    .pb { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 0;
          border: 1px solid #232326; border-radius: 4px; overflow: hidden; background: #141416; }
    .pbcopy { padding: 72px 64px; display: flex; flex-direction: column; gap: 26px;
              align-items: flex-start; justify-content: center; }
    .pbfig { display: flex; align-items: baseline; gap: 16px; }
    .pbn { font-family: "Anton", Impact, sans-serif; font-size: 84px; line-height: 0.9; color: #EF4345; }
    .pbl { font-size: 18px; line-height: 1.5; color: #B3ACA2; max-width: 22ch; }
    .pbimg { position: relative; min-height: 460px; overflow: hidden; }
    .pbimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                 display: block; filter: saturate(0.85); }
    .nlbar { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
             border: 1px solid #232326; border-radius: 4px; background: #141416; padding: 40px 56px; }
      /* --- The Lighthouse: one lead episode plus the rest ---------------------
       Adopts direction 01's shape -- a single large episode alongside
       smaller ones -- because a flat list of three gave no lead item. Titles
       and guest names are set to be read, not to fit. */
    .lhgrid { display: grid; grid-template-columns: 1.38fr 1fr; gap: 22px; align-items: start; }
    .lhfeat { display: flex; flex-direction: column; color: #F2EFEA; background: #141416;
              border: 1px solid #232326; border-radius: 4px; overflow: hidden;
              transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .35s ease; }
    /* anchors: pin the ink so the global a:hover cannot repaint the titles */
    .lhfeat:hover { transform: translateY(-6px); border-color: #3A3A3E; color: #F2EFEA; }
    .lhfim { position: relative; height: 424px; overflow: hidden; }
    .lhfim img { width: 100%; height: 100%; object-fit: cover; display: block;
                 transform: scale(1.03); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
    .lhfeat:hover .lhfim img { transform: scale(1.08); }
    .lhplay { position: absolute; left: 26px; bottom: 26px; width: 66px; height: 66px;
              border-radius: 50%; background: #EF4345; display: inline-flex;
              align-items: center; justify-content: center;
              transition: transform .45s cubic-bezier(.2,.7,.2,1); }
    .lhplay svg { fill: #fff; }
    .lhfeat:hover .lhplay { transform: scale(1.08); }
    .lhfbody { padding: 30px 32px 34px 32px; display: flex; flex-direction: column; gap: 14px; }
    .lhmeta { font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase;
              color: #B3ACA2; font-weight: 700; }
    .lhft { font-size: 30px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.22; }
    .lhside { display: flex; flex-direction: column; gap: 14px; }
    .lhep { display: grid; grid-template-columns: 136px 1fr; gap: 22px; align-items: center;
            color: #F2EFEA; background: #141416; border: 1px solid #232326; border-radius: 4px;
            overflow: hidden; padding-right: 22px;
            transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s ease; }
    .lhep:hover { transform: translateX(8px); border-color: #3A3A3E; color: #F2EFEA; }
    .lhepim { height: 108px; overflow: hidden; }
    .lhepim img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .lhepc { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; }
    .lhept { font-size: 21px; font-weight: 700; line-height: 1.28; letter-spacing: -0.015em; }

      /* --- Work with me: the walkthrough film ------------------------------
       Round 2b (2026-09-29). The client asked for the format of Bearing's film
       "and simply placing me inside the scene": the camera walks into a room,
       pans across the people in it until it reaches him, then cuts to the next
       room. So this is a real film scrubbed by scroll, not photos moved in a
       frame: the band's scroll position IS the film's clock (the same engine as
       Bearing, injected by the builders for any [data-filmwrap] + video[data-film]).
       Five rooms, one per service, equal length, hard cuts between them.
       The footage file is img/tour-film.mp4; swap it and nothing else changes. */
    .tour { position: relative; height: 4800px; margin: 0 72px; }
    .tstage { position: sticky; top: 30px; height: 940px; overflow: hidden; border-radius: 6px;
              background: #0B0B0C; border: 1px solid #232326; }
    .tfilm { position: absolute; inset: 0; }
    .tfilm img, .tfilm video { position: absolute; inset: 0; width: 100%; height: 100%;
                               object-fit: cover; display: block; }
    .tfilm video { opacity: 0; }
    /* legibility ground for the copy column: footage never sits raw under text */
    .tgrade { position: absolute; inset: 0; pointer-events: none;
              background: linear-gradient(90deg, rgba(11,11,12,0.94) 0%, rgba(11,11,12,0.86) 30%,
                          rgba(11,11,12,0.32) 58%, rgba(11,11,12,0.18) 100%),
                          linear-gradient(0deg, rgba(11,11,12,0.72) 0%, rgba(11,11,12,0) 42%); }
    .tcopy { position: absolute; top: 0; bottom: 0; left: 0; width: 820px;
             padding-block: 62px 54px; padding-inline-start: 64px; display: flex; flex-direction: column; gap: 30px; }
    .thead .label { display: block; margin-bottom: 16px; }
    .ttitle { margin: 0; font-size: 68px; line-height: 1.02; color: #F2EFEA; }
    .ttitle .hl { background: #EF4345; color: #fff; padding: 0 14px; border-radius: 8px;
                  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
    .tlist { display: flex; flex-direction: column; gap: 8px; }
    .trow { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 16px;
            align-items: start; padding: 18px 22px; border-radius: 4px;
            border: 1px solid transparent; cursor: pointer; opacity: 0.6;
            transition: opacity .45s ease, background .45s ease, border-color .45s ease; }
    .trow.on { opacity: 1; background: rgba(20,20,22,0.78); border-color: rgba(242,239,234,0.14); }
    .trow:hover { opacity: 1; }
    .trn { font-family: "Anton", Impact, sans-serif; font-size: 22px; line-height: 1.3;
           letter-spacing: 0.02em; color: #EF4345; }
    .trt { display: block; font-size: 25px; font-weight: 700; line-height: 1.22;
           letter-spacing: -0.02em; color: #F2EFEA; }
    /* only the room on screen shows its line, so five rows fit the 940px stage */
    .trx { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
    .trow.on .trx { grid-template-rows: 1fr; }
    .trd { display: block; min-height: 0; overflow: hidden; font-size: 19px; line-height: 1.5; color: #CCC6BD; }
    .trd::before { content: ""; display: block; height: 10px; }
    .tra { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #3A3A3E;
           display: inline-flex; align-items: center; justify-content: center;
           transition: background .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
    .tra svg { stroke: #F2EFEA; }
    .trow.on .tra { border-color: #EF4345; }
    .tra:hover { background: #EF4345; border-color: #EF4345; transform: rotate(-45deg); }
    .tfoot { margin-top: auto; display: flex; align-items: center; gap: 30px; }
    .tbars { display: flex; gap: 8px; }
    .tbar { position: relative; width: 46px; height: 3px; background: rgba(242,239,234,0.22); overflow: hidden; }
    .tbar i { position: absolute; inset: 0; background: #EF4345; transform: scaleX(0);
              transform-origin: left; }
    .tbar:first-child i { transform: scaleX(0.04); }
    .tidx { position: absolute; top: 58px; right: 60px; display: flex; flex-direction: column;
            align-items: flex-end; gap: 14px; pointer-events: none; }
    .tidx .trec { display: inline-flex; align-items: center; gap: 10px; }
    .tidx .tdot { width: 12px; height: 12px; border-radius: 50%; background: #EF4345; }
    .tidx .tnum { display: flex; align-items: baseline; gap: 12px;
                  font-family: "Anton", Impact, sans-serif; color: #F2EFEA; }
    .tidx b { font-weight: 400; font-size: 120px; line-height: 0.82; }
    .tidx .tof { font-size: 34px; color: rgba(242,239,234,0.72); }

      /* --- How we'll work: five stages, set as reading -----------------------
       The 3D route scene is gone (client, 2026-09-29): the tour now carries the
       motion, so this section gives its room back to the words. */
    .pz { padding: 140px 72px 140px 72px; }
    .pzhead { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; margin-bottom: 64px; }
    .pzl { list-style: none; margin: 0; padding: 0; border-top: 1px solid #232326; }
    .pzr { position: relative; display: grid;
           grid-template-columns: 150px 104px minmax(0, 0.72fr) minmax(0, 1.2fr); gap: 44px;
           align-items: start; padding: 52px 0; border-bottom: 1px solid #232326; }
    .pzn { transition: transform .5s cubic-bezier(.16,1,.3,1); }
    .pzt { transition: transform .5s cubic-bezier(.16,1,.3,1), color .35s ease; }
    .pzr:hover .pzn { transform: translateX(6px); }
    .pzr:hover .pzt { transform: translateX(8px); color: #F2EFEA; }
    /* Scroll interaction: a red cap under each numeral draws itself as the row
       enters. Scroll-driven (view timeline), transform only; longhands, because
       an animation: shorthand after animation-timeline would reset it to auto. */
    .pzr::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 150px; height: 2px;
                   background: #EF4345; transform: scaleX(1); transform-origin: left; }
    @supports (animation-timeline: view()) {
      .pzr::before { animation-name: pzcap; animation-timing-function: cubic-bezier(.2,.7,.2,1);
                     animation-fill-mode: both; animation-duration: auto;
                     animation-timeline: view(); animation-range: entry 20% cover 45%; }
    }
    @keyframes pzcap { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Animated icons: one per stage, drawn in the icon's own language. Stroke is
       currentColor so the light grounds recolour it through the stylesheet (make-mix
       maps inline styles and class rules, not SVG attributes). */
    .pzi { width: 96px; height: 96px; display: inline-flex; align-items: center; justify-content: center;
           border: 1px solid #2C2C30; border-radius: 4px; color: #F2EFEA; background: #111113;
           transition: border-color .35s ease, transform .5s cubic-bezier(.16,1,.3,1); }
    .pzi svg { width: 68px; height: 68px; overflow: visible; fill: none; stroke: currentColor;
               stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .pzi .ac { stroke: #EF4345; }
    .pzi .acf { fill: #EF4345; stroke: none; }
    .pzi .mv { transform-box: fill-box; transform-origin: center; }
    .pzr:hover .pzi { border-color: #EF4345; transform: translateY(-4px); }
    /* 01 Experience: the eye scans, and blinks now and then */
    .pzi1 .iris { animation: pzscan 3.6s ease-in-out infinite alternate; }
    .pzi1 .lid { animation: pzblink 6s ease-in-out infinite; }
    @keyframes pzscan { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
    @keyframes pzblink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } }
    /* 02 Ideas: the rays pulse in sequence, the filament flickers */
    .pzi2 .ray { animation: pzray 2.4s ease-in-out infinite; }
    .pzi2 .ray:nth-child(2) { animation-delay: .2s; } .pzi2 .ray:nth-child(3) { animation-delay: .4s; }
    .pzi2 .ray:nth-child(4) { animation-delay: .6s; } .pzi2 .ray:nth-child(5) { animation-delay: .8s; }
    .pzi2 .fil { animation: pzflick 3.2s steps(1, end) infinite; }
    @keyframes pzray { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
    @keyframes pzflick { 0%, 100% { opacity: 1; } 62% { opacity: .35; } 66% { opacity: 1; } 70% { opacity: .5; } 74% { opacity: 1; } }
    /* 03 People: the one in the middle rises -- the people who carry it */
    .pzi3 .lift { animation: pzlift 2.8s cubic-bezier(.45,0,.55,1) infinite; }
    @keyframes pzlift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    /* 04 Strategy: one page, writing itself line by line */
    .pzi4 .ln { transform-box: fill-box; transform-origin: 0 50%; animation: pzwrite 5s cubic-bezier(.2,.7,.2,1) infinite; }
    .pzi4 .ln:nth-of-type(2) { animation-delay: .35s; } .pzi4 .ln:nth-of-type(3) { animation-delay: .7s; }
    .pzi4 .ln:nth-of-type(4) { animation-delay: 1.05s; }
    @keyframes pzwrite { 0% { transform: scaleX(0); opacity: 0; } 12% { opacity: 1; } 30%, 82% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
    /* 05 Action: a paper plane on its first flight -- the pilots. translate(x,y),
       not translateX, so make-hebrew does not flip it; RTL mirrors the whole svg. */
    .pzi5 .plane { animation: pzfly 3.4s cubic-bezier(.45,0,.55,1) infinite; }
    .pzi5 .trail { animation: pztrail 3.4s ease-in-out infinite; }
    @keyframes pzfly { 0%, 100% { transform: translate(0px, 0px) rotate(0deg); } 50% { transform: translate(5px, -6px) rotate(-4deg); } }
    @keyframes pztrail { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
    [dir="rtl"] .pzi5 svg, [dir="rtl"] .pzi4 svg { transform: scaleX(-1); }   /* the plane flies and the page writes right-to-left */
    @media (prefers-reduced-motion: reduce) {
      .pzi .iris, .pzi .lid, .pzi .ray, .pzi .fil, .pzi .lift, .pzi .ln, .pzi .plane, .pzi .trail { animation: none; }
      .pzr::before { animation: none; transform: scaleX(1); }
    }
    .pzn { font-family: "Anton", Impact, sans-serif; font-size: 96px; line-height: 0.86; color: #EF4345; }
    .pzt { margin: 0; font-family: "Anton", Impact, sans-serif; text-transform: uppercase;
           font-size: 64px; line-height: 0.96; letter-spacing: 0.01em; color: #F2EFEA; }
    .pzb { margin: 0; padding-top: 6px; font-size: 29px; line-height: 1.42; font-weight: 600;
           color: #DDD7CE; max-width: 46ch; }

      /* --- People I've worked with: a logo wall -------------------------------
       Given the width of the page and its own band (client, 2026-09-29: "give
       this more prominence -- in Dark Banded it really stands out"). Hairlines
       are the 1px gap showing the grid colour through, so every cell is equal. */
    .clients { padding: 140px 72px 140px 72px; display: flex; flex-direction: column; gap: 56px; }
    .cwall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
             background: #232326; border: 1px solid #232326; }
    /* 25 clients from his site, 5 x 5. Every mark is fitted into the same box so a
       wide wordmark and a square emblem carry about the same weight */
    .cw { height: 190px; display: flex; align-items: center; justify-content: center;
          padding: 0 40px; background: #0B0B0C; transition: background .35s ease; }
    .cw:hover { background: #141416; }
    .cw img { width: 100%; max-width: 210px; height: 88px; object-fit: contain; }
    .cpress { overflow: hidden; border-top: 1px solid #232326; border-bottom: 1px solid #232326; padding: 26px 0; }
    .cpress .track { font-size: 24px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #CCC6BD; }
    .cquote { display: grid; grid-template-columns: 120px minmax(0, 1fr) 420px; gap: 48px;
              align-items: start; background: #EF4345; color: #fff; padding: 64px 64px; }
    .cqm { font-size: 180px; line-height: 0.66; color: rgba(255,255,255,0.6); }
    .cqt { margin: 0; font-size: 40px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
    .cqw { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
    .cqn { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
    .cqr { font-size: 19px; line-height: 1.45; font-weight: 600; color: rgba(255,255,255,0.94); }

  
    /* ======================================================================
       INNER PAGES -- direction 03 "In The Room", Mixed ground.
       Everything above this block is the approved homepage's own stylesheet,
       copied verbatim by build.py, so a button, a label or a card on an inner
       page is the same object as on the homepage. This block only adds the
       shapes the homepage never needed: page heads, reading columns, lists,
       filters and forms. Same tokens: #0B0B0C / #141416 / #232326 grounds,
       #F2EFEA ink, #EF4345 the one accent; light bands are generated from
       these by make-light's map, never hand-written.
       Animate transform/opacity only.
       ====================================================================== */

    /* --- top bar: the homepage bar, with a real menu ---------------------- */
    .ibar { position: relative; display: flex; align-items: center; justify-content: space-between;
            height: 92px; padding: 0 72px; z-index: 5; }
    .ibrand { display: flex; align-items: center; gap: 14px; color: #F2EFEA; }
    .ibrand:hover { color: #F2EFEA; }
    .ibrand img { height: 56px; width: auto; display: block; }
    .ibrand .label { color: #F2EFEA; display: inline-flex; flex-direction: column; gap: 6px;
                     border-left: 1px solid #2A2A2E; padding-left: 16px; }
    .ibrand .label i { width: 40px; height: 2px; background: #EF4345; display: block; }
    .inav { display: flex; gap: 30px; align-items: center; font-size: 16px; letter-spacing: 0.08em;
            text-transform: uppercase; font-weight: 700; }
    .inav a { position: relative; padding: 8px 0; }
    .inav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #EF4345;
                     transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
    .inav a:hover::after, .inav a.cur::after { transform: scaleX(1); }
    .inav a.cur { color: #F2EFEA; }
    .inav .lang { color: #B3ACA2; }
    .iside { display: flex; align-items: center; gap: 24px; }
    .iside .avail { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: 0.08em;
                    text-transform: uppercase; font-weight: 700; }
    .iside .avail i { width: 8px; height: 8px; border-radius: 50%; background: #EF4345; display: inline-block; }

    /* --- page head: the homepage's wordmark move, one word per page ------- */
    .ph { position: relative; isolation: isolate; margin: 0 72px; min-height: 660px;
          display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px;
          align-items: end; padding: 40px 0 110px 0; }
    .crumb { display: flex; align-items: center; gap: 12px; font-size: 16px; letter-spacing: 0.10em;
             text-transform: uppercase; font-weight: 700; color: #B3ACA2; }
    .crumb a { color: #B3ACA2; } .crumb a:hover { color: #EF4345; }
    .crumb b { font-weight: 700; color: #EF4345; }
    .crumb i { width: 18px; height: 1px; background: #3A3A3E; display: inline-block; }
    .phcopy { grid-column: span 7; display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
    .pht { margin: 0; font-family: "Anton", "Arial Narrow", Impact, sans-serif; text-transform: uppercase;
           font-size: 230px; line-height: 0.82; letter-spacing: 0.005em; color: #EF4345;
           text-shadow: 0 0 100px rgba(239,67,69,0.35); }
    .pht.mid { font-size: 168px; }
    .pht.sm { font-size: 128px; }
    .phsub { margin: 0; font-family: "Barlow", "Rubik", "Helvetica Neue", Arial, sans-serif; font-weight: 700;
             letter-spacing: -0.022em; font-size: 54px; line-height: 1.02; color: #F2EFEA; max-width: 18ch; }
    .phl { margin: 0; font-size: 22px; line-height: 1.6; color: #CCC6BD; max-width: 46ch; }
    .phrow { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: center; }
    .phside { grid-column: 8 / span 5; align-self: stretch; display: flex; flex-direction: column;
              justify-content: flex-end; gap: 22px; }
    .phimg { position: relative; display: block; overflow: hidden; border: 1px solid #232326; border-radius: 4px;
             background: #141416; height: 520px; }
    .phimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
                 filter: saturate(0.85); transform: scale(1.02); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
    .phimg:hover img { transform: scale(1.06); }
    .phimg .pscrim { position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
                     background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0.85) 100%); }
    .phimg .pcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 28px; display: flex;
                   align-items: baseline; gap: 14px; }
    .phimg .pn { font-family: "Anton", Impact, sans-serif; font-size: 17px; letter-spacing: 0.08em; color: #EF4345; }
    .phimg .pt { font-size: 19px; line-height: 1.35; font-weight: 600; color: #F2EFEA; }
    .phcut { position: absolute; bottom: 0; height: 620px; width: auto; z-index: 1; display: block;
             filter: drop-shadow(0 40px 60px rgba(0,0,0,0.6)); }
    .phfade { position: absolute; left: -72px; right: -72px; bottom: 0; height: 240px; z-index: 2; pointer-events: none;
              background: linear-gradient(180deg, rgba(11,11,12,0) 0%, #0B0B0C 88%); }
    .ph > .phcopy, .ph > .phside { position: relative; z-index: 3; }

    /* --- scroll-scrubbed film head (the walkthrough's engine, shorter) ---- */
    .fband { position: relative; height: 2900px; margin: 0 72px; }
    .fband .tstage { top: 30px; }
    .fband .tcopy { width: 900px; gap: 26px; justify-content: flex-end; padding-block: 62px 70px; }
    .fband .pht { font-size: 200px; }
    .fband .tidx b { font-size: 96px; }
    .fcaps { display: flex; flex-direction: column; gap: 12px; }
    .fcap { display: flex; align-items: baseline; gap: 16px; font-size: 21px; line-height: 1.4; font-weight: 600;
            color: rgba(242,239,234,0.5); transition: color .45s ease; }
    .fcap b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 20px; color: #EF4345; }
    .fcap.on { color: #F2EFEA; }

    /* --- sections -------------------------------------------------------- */
    .sec { position: relative; padding: 140px 72px; }
    .sec.tight { padding-top: 110px; padding-bottom: 110px; }
    .sec.top0 { padding-top: 0; }
    .shead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: end;
             margin-bottom: 64px; }
    .shead .st { grid-column: span 6; display: flex; flex-direction: column; gap: 16px; }
    .shead .sl { grid-column: 7 / span 4; margin: 0; font-size: 20px; line-height: 1.65; color: #CCC6BD; }
    .shead .sa { grid-column: 11 / span 2; display: flex; justify-content: flex-end; }
    .h2 { margin: 0; font-family: "Barlow", "Rubik", "Helvetica Neue", Arial, sans-serif; font-weight: 700;
          letter-spacing: -0.022em; font-size: 76px; line-height: 0.98; color: #F2EFEA; }
    .h2.d { font-family: "Anton", "Arial Narrow", Impact, sans-serif; font-weight: 400; text-transform: uppercase;
            letter-spacing: 0.01em; }
    .h2.m { font-size: 60px; }

    /* --- reading column -------------------------------------------------- */
    .prose { max-width: 820px; display: flex; flex-direction: column; gap: 26px; }
    .prose p { margin: 0; font-size: 23px; line-height: 1.72; color: #DDD7CE; }
    .prose p.lede { font-size: 30px; line-height: 1.5; font-weight: 600; color: #F2EFEA; letter-spacing: -0.01em; }
    .prose p.drop::first-letter { float: left; font-family: "Anton", Impact, sans-serif; font-size: 118px;
                                  line-height: 0.82; padding: 10px 18px 0px 0px; color: #EF4345; }
    .prose h2, .prose h3 { margin: 22px 0 0 0; font-weight: 700; letter-spacing: -0.02em; color: #F2EFEA; }
    .prose h2 { font-size: 40px; line-height: 1.15; } .prose h3 { font-size: 30px; line-height: 1.2; }
    .prose ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .prose li { position: relative; padding-left: 34px; font-size: 22px; line-height: 1.65; color: #DDD7CE; }
    .prose li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 16px; height: 2px; background: #EF4345; }
    .prose blockquote { margin: 6px 0; padding: 4px 0 4px 32px; border-left: 3px solid #EF4345;
                        font-size: 30px; line-height: 1.45; font-weight: 600; color: #F2EFEA; }
    .prose figure { margin: 14px 0; display: flex; flex-direction: column; gap: 14px; }
    .prose figure img { width: 100%; height: auto; display: block; border: 1px solid #232326; border-radius: 4px; }
    .prose figcaption { font-size: 16px; line-height: 1.5; color: #B3ACA2; letter-spacing: 0.01em; }
    .prose a { color: inherit; border-bottom: 1px solid #EF4345; } .prose a:hover { color: #EF4345; }
    .prose a.btn, .prose a.btn:hover { color: #FFFFFF; border-bottom: 0; } .prose a.btn:hover { color: #0B0B0C; }
    .prose a.qlink { border-bottom: 1px solid #2C2C30; } .prose a.vid { border-bottom: 0; }
    .prose .sig { margin-top: 12px; padding-top: 28px; border-top: 1px solid #232326; font-size: 19px;
                  line-height: 1.6; color: #B3ACA2; font-style: italic; }
    .vid { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
           border: 1px solid #232326; border-radius: 4px; background: #141416; cursor: pointer; }
    .vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
               filter: saturate(0.85); transition: transform 1s cubic-bezier(.16,1,.3,1); }
    .vid:hover img { transform: scale(1.04); }
    .vid .lhplay { left: 50%; top: 50%; bottom: auto; margin: -40px 0px 0px -40px; width: 80px; height: 80px; }
    .vid:hover .lhplay { transform: scale(1.1); }
    .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .vid .vcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 26px;
                 background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0.9) 100%);
                 font-size: 18px; font-weight: 600; color: #F2EFEA; }

    /* --- About: the story, with the stations pulled to a rail ------------- */
    .story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; }
    .srail { grid-column: span 4; position: sticky; top: 40px; display: flex; flex-direction: column; gap: 28px; }
    .srail .sphoto { position: relative; height: 470px; overflow: hidden; border-radius: 4px; border: 1px solid #232326; }
    .srail .sphoto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.06); }
    .stations { list-style: none; margin: 0; padding: 0; border-top: 1px solid #232326; }
    .stations li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; align-items: baseline;
                   padding: 15px 0; border-bottom: 1px solid #232326; font-size: 18px; line-height: 1.4; font-weight: 600;
                   color: #CCC6BD; transition: color .3s ease, transform .45s cubic-bezier(.16,1,.3,1); }
    .stations li:hover { color: #F2EFEA; transform: translateX(6px); }
    .stations li b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 18px; color: #EF4345; }
    .story .prose { grid-column: 6 / span 7; max-width: none; }

    /* --- numbers with their figures in the markup (the home binds them in CSS) */
    .nums2 { display: grid; gap: 0; align-items: stretch; }
    /* figures written in the markup; .nv is bound to CSS counters on the homepage */
    .nv2 { font-family: "Anton", Impact, sans-serif; font-size: 132px; line-height: 0.82; letter-spacing: 0.005em;
           color: #F2EFEA; transition: color .4s ease; }
    .ncell:hover .nv2 { color: #EF4345; }
    .nums2.c4 { grid-template-columns: 1fr 1fr 1.3fr 0.9fr; }
    .nums2.c2 { grid-template-columns: 1fr 1fr; }

    /* --- testimonials: a wall, every voice with its own logo ------------- */
    .twall { columns: 3; column-gap: 24px; }
    .twall.c2 { columns: 2; }
    .tq { break-inside: avoid; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 22px;
          padding: 38px 36px 34px; background: #141416; border: 1px solid #232326; border-radius: 4px;
          transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease; }
    .tq:hover { transform: translateY(-6px); border-color: #EF4345; }
    .tq .tlogo { height: 60px; display: flex; align-items: center; }
    .tq .tlogo img { max-height: 60px; max-width: 210px; width: auto; object-fit: contain; display: block;
                     filter: invert(1) grayscale(1) brightness(1.25); opacity: 0.88; }
    .tq .tqm { font-family: "Anton", Impact, sans-serif; font-size: 72px; line-height: 0.5; color: #EF4345; height: 30px; }
    .tq p { margin: 0; font-size: 22px; line-height: 1.55; font-weight: 600; color: #F2EFEA; }
    .tq .who { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; border-top: 1px solid #232326; }
    .tq .who b { font-size: 20px; font-weight: 700; color: #F2EFEA; }
    .tq .who span { font-size: 16px; line-height: 1.45; color: #B3ACA2; }
    .tq.red { background: #EF4345; border-color: #EF4345; }
    .tq.red p, .tq.red .who b { color: #FFFFFF; } .tq.red .who span { color: rgba(255,255,255,0.9); }
    .tq.red .tqm { color: rgba(255,255,255,0.6); } .tq.red .who { border-color: rgba(255,255,255,0.35); }
    .tq.red .tlogo img { filter: brightness(0) invert(1); opacity: 1; }
    .tq.red:hover { border-color: #F2EFEA; }

    /* --- people (no quote): name, role, logo ------------------------------ */
    .plist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #232326;
             border: 1px solid #232326; }
    .pp { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 26px; align-items: center;
          padding: 34px 32px; background: #0B0B0C; transition: background .35s ease; }
    .pp:hover { background: #141416; }
    .pp .pl2 { height: 64px; display: flex; align-items: center; justify-content: center; }
    .pp .pl2 img { max-width: 120px; max-height: 64px; object-fit: contain; filter: invert(1) grayscale(1) brightness(1.25); opacity: 0.88; }
    .pp b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #F2EFEA; }
    .pp span { display: block; margin-top: 6px; font-size: 17px; line-height: 1.45; color: #B3ACA2; }

    /* --- awards with their certificates ----------------------------------- */
    .aw2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .awc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 34px; align-items: center;
           padding: 30px; background: #141416; border: 1px solid #232326; border-radius: 4px; color: #F2EFEA;
           transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease; }
    .awc:hover { color: #F2EFEA; transform: translateY(-6px); border-color: #EF4345; }
    .awc .awi { height: 220px; overflow: hidden; border-radius: 3px; background: #0E0E10; }
    .awc .awi img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .awc .awt { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
    .awc .awt span.at { font-size: 26px; line-height: 1.32; font-weight: 700; letter-spacing: -0.015em; color: #F2EFEA; }

    /* --- index rows (lectures): number, title, still ----------------------- */
    .lrows { list-style: none; margin: 0; padding: 0; border-top: 1px solid #232326; }
    .lrow { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 420px; gap: 44px;
            align-items: center; padding: 40px 0; border-bottom: 1px solid #232326; }
    .lrow::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 150px; height: 2px;
                    background: #EF4345; transform: scaleX(1); transform-origin: left; }
    @supports (animation-timeline: view()) {
      .lrow::before { animation-name: pzcap; animation-timing-function: cubic-bezier(.2,.7,.2,1);
                      animation-fill-mode: both; animation-duration: auto;
                      animation-timeline: view(); animation-range: entry 20% cover 45%; }
    }
    .lrow .ln2 { font-family: "Anton", Impact, sans-serif; font-size: 96px; line-height: 0.86; color: #EF4345;
                 transition: transform .5s cubic-bezier(.16,1,.3,1); }
    .lrow .lt { margin: 0; font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; color: #F2EFEA;
                transition: transform .5s cubic-bezier(.16,1,.3,1); }
    .lrow .lim { height: 236px; overflow: hidden; border-radius: 4px; border: 1px solid #232326; }
    .lrow .lim img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85);
                     transition: transform .9s cubic-bezier(.2,.7,.2,1); }
    .lrow:hover .ln2 { transform: translateX(6px); }
    .lrow:hover .lt { transform: translateX(8px); }
    .lrow:hover .lim img { transform: scale(1.06); }
    .lrow .lmeta { display: block; margin-top: 14px; }

    /* --- filter chips (press, blog) -------------------------------------- */
    .chips { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .chip { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 999px;
            border: 1px solid #2C2C30; background: transparent; color: #F2EFEA; font: inherit; font-size: 16px;
            font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
            transition: border-color .3s ease, background .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
    .chip:hover { border-color: #EF4345; transform: translateY(-2px); }
    .chip:active { transform: translateY(0) scale(0.98); }
    .chip.on { background: #EF4345; border-color: #EF4345; color: #FFFFFF; }
    .chip i { font-style: normal; font-family: "Anton", Impact, sans-serif; font-size: 15px; letter-spacing: 0.04em;
              color: #EF4345; }
    .chip.on i { color: #FFFFFF; }
    .fempty { display: none; padding: 64px 0; font-size: 22px; color: #B3ACA2; }
    .fempty.show { display: block; }
    [data-item].hide { display: none; }

    /* --- press cards ----------------------------------------------------- */
    .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .prc { display: flex; flex-direction: column; color: #F2EFEA; }
    .prc:hover { color: #F2EFEA; }
    .prc .pri { position: relative; height: 300px; overflow: hidden; background: #0E0E10; }
    .prc .pri img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85);
                    transition: transform .9s cubic-bezier(.2,.7,.2,1); }
    .prc:hover .pri img { transform: scale(1.06); }
    /* an item with no picture (press, or the one Hebrew guest article) gets its section
       set as type, never a stock photo */
    .prt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
           padding: 30px 32px; background: #141416; }
    .prt .prw { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: 76px;
                line-height: 0.88; color: #F2EFEA; }
    .prt .prd { width: 48px; height: 3px; background: #EF4345; }
    .prc .prb { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 30px; }
    .prc .prk { display: flex; gap: 14px; align-items: center; }
    .prc .prh { font-size: 25px; line-height: 1.28; font-weight: 700; letter-spacing: -0.015em; color: #F2EFEA; }
    .prc .prx { font-size: 18px; line-height: 1.55; color: #B3ACA2; }

    /* --- writing: lead piece plus the rest -------------------------------- */
    .feat { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; color: #F2EFEA; background: #141416;
            border: 1px solid #232326; border-radius: 4px; overflow: hidden;
            transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease; }
    .feat:hover { color: #F2EFEA; transform: translateY(-6px); border-color: #EF4345; }
    .feat .fim { position: relative; min-height: 560px; overflow: hidden; }
    .feat .fim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
                     filter: saturate(0.85); transition: transform 1s cubic-bezier(.16,1,.3,1); }
    .feat:hover .fim img { transform: scale(1.05); }
    .feat .fb { padding: 64px 60px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
    .feat .fh2 { margin: 0; font-size: 58px; line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; color: #F2EFEA; }
    .feat .fx { margin: 0; font-size: 22px; line-height: 1.6; color: #CCC6BD; }
    .agrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
    .agrid .card { display: flex; flex-direction: column; color: #F2EFEA; }
    .agrid .card:hover { color: #F2EFEA; }
    .agrid .card .tile img { width: 100%; height: 240px; object-fit: cover; display: block; }
    .agrid .card .ab { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 28px 24px; }
    .agrid .card .abt { font-size: 24px; font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; color: #F2EFEA; }
    .agrid .card .abx { font-size: 17px; line-height: 1.5; color: #B3ACA2; }

    /* --- article page ---------------------------------------------------- */
    .ahead { margin: 0 72px; padding: 60px 0 90px 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
             gap: 40px; align-items: end; }
    .ahead .ac { grid-column: span 9; display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
    .ahead .at1 { margin: 0; font-family: "Barlow", "Rubik", "Helvetica Neue", Arial, sans-serif; font-weight: 700;
                  letter-spacing: -0.03em; font-size: 104px; line-height: 0.98; color: #F2EFEA; max-width: 15ch; }
    .ahead .ax { margin: 0; font-size: 30px; line-height: 1.4; font-weight: 600; color: #EF4345; max-width: 40ch; }
    .ahead .ameta { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 0; border-top: 1px solid #232326; }
    .ahead .ameta div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid #232326;
                        font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #B3ACA2; }
    .ahead .ameta div b { color: #F2EFEA; font-weight: 700; letter-spacing: 0.02em; text-transform: none; font-size: 18px; }
    .ahero { margin: 0 72px; height: 760px; overflow: hidden; border-radius: 4px; border: 1px solid #232326; position: relative; }
    .ahero img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9); }
    .abody { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; }
    .abody .aside { grid-column: span 3; position: sticky; top: 40px; display: flex; flex-direction: column; gap: 18px; }
    .abody .prose { grid-column: 4 / span 7; max-width: none; }
    .aprog { height: 3px; background: rgba(242,239,234,0.18); position: relative; overflow: hidden; }
    .aprog i { position: absolute; inset: 0; background: #EF4345; transform: scaleX(0); transform-origin: left; }
    @supports (animation-timeline: scroll()) {
      .aprog i { animation-name: aprog; animation-timing-function: linear; animation-fill-mode: both;
                 animation-duration: auto; animation-timeline: scroll(root); }
    }
    @keyframes aprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* --- contact band: the live site's own footer form -------------------- */
    .cband { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; }
    .cband .cc { grid-column: span 5; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
    .cband .cf { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; }
    .fld { display: flex; flex-direction: column; gap: 10px; }
    .fld.full { grid-column: 1 / -1; }
    .fld label { font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: #B3ACA2; }
    .fld input, .fld textarea { font: inherit; font-size: 20px; color: #F2EFEA; background: #141416;
                                border: 1px solid #3A3A3E; border-radius: 2px; padding: 0 18px; height: 60px;
                                transition: border-color .3s ease, box-shadow .3s ease; outline: none; }
    .fld textarea { height: 150px; padding: 16px 18px; resize: vertical; line-height: 1.5; }
    .fld input:hover, .fld textarea:hover { border-color: #6E6862; }
    .fld input:focus, .fld textarea:focus { border-color: #EF4345; box-shadow: 0 0 0 4px rgba(239,67,69,0.15); }
    .fld .err { display: none; font-size: 16px; color: #EF4345; font-weight: 600; }
    .fld.bad input, .fld.bad textarea { border-color: #EF4345; } .fld.bad .err { display: block; }
    .chk { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; font-size: 18px; color: #CCC6BD; cursor: pointer; }
    .chk input { width: 22px; height: 22px; accent-color: #EF4345; }
    .fsend { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; }
    .fsend button.btn { border: 0; cursor: pointer; font-family: inherit; }
    .fsend .fok { display: none; font-size: 19px; font-weight: 600; color: #F2EFEA; }
    .fsend .fok.show { display: inline-flex; align-items: center; gap: 10px; }
    .fsend .fok i { width: 10px; height: 10px; border-radius: 50%; background: #EF4345; display: inline-block; }
    .clinks { display: flex; flex-direction: column; gap: 16px; }
    .clinks a { display: inline-flex; align-items: center; gap: 18px; font-size: 19px; font-weight: 600; }

    /* --- footer: the homepage footer, plus the site map -------------------- */
    .ifoot { padding: 0 72px; border-top: 1px solid #232326; }
    .ifmap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; padding: 72px 0 56px; }
    .ifmap .fbrand { grid-column: span 5; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
    .ifmap .fbrand img { height: 64px; width: auto; display: block; }
    .ifmap .fbrand p { margin: 0; font-size: 19px; line-height: 1.6; color: #B3ACA2; max-width: 36ch; }
    .ifmap .fcol { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; font-size: 18px; font-weight: 600; }
    .ifmap .fcol .label { margin-bottom: 6px; }
    .ifmap .fcol a { color: #CCC6BD; } .ifmap .fcol a:hover { color: #EF4345; }
    .ifbase { display: flex; justify-content: space-between; align-items: center; padding: 28px 0 44px;
              border-top: 1px solid #232326; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
              color: #B3ACA2; font-weight: 700; }

    /* --- Lighthouse (life strategy) + Pro-Bono pieces --------------------- */
    .tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
             gap: 0 40px; border-top: 1px solid #232326; }
    .tools li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: baseline;
                padding: 28px 0; border-bottom: 1px solid #232326; font-size: 28px; line-height: 1.3; font-weight: 700;
                letter-spacing: -0.015em; color: #F2EFEA; transition: transform .45s cubic-bezier(.16,1,.3,1); }
    .tools li:hover { transform: translateX(8px); }
    .tools li b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 28px; color: #EF4345; }
    .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .duo .dc { padding: 56px 52px; background: #141416; border: 1px solid #232326; border-radius: 4px;
               display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
    .duo .dc p { margin: 0; font-size: 22px; line-height: 1.65; color: #DDD7CE; }
    .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .trio .tc { display: flex; flex-direction: column; gap: 22px; }
    .trio .tc .ti { height: 420px; overflow: hidden; border-radius: 4px; border: 1px solid #232326; }
    .trio .tc .ti img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85);
                        transition: transform 1s cubic-bezier(.16,1,.3,1); }
    .trio .tc:hover .ti img { transform: scale(1.05); }
    .trio .tc p { margin: 0; font-size: 21px; line-height: 1.65; color: #DDD7CE; }
    .xgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
    .xp { display: flex; flex-direction: column; gap: 14px; color: #F2EFEA; }
    .xp:hover { color: #F2EFEA; }
    .xp .xi { position: relative; aspect-ratio: 1 / 1.1; overflow: hidden; border-radius: 4px; background: #141416;
              border: 1px solid #232326; transition: border-color .35s ease; }
    .xp .xi img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05);
                  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
    .xp:hover .xi { border-color: #EF4345; }
    .xp:hover .xi img { transform: scale(1.05); filter: grayscale(0.2); }
    .xp .xi .xmono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                     font-family: "Anton", Impact, sans-serif; font-size: 96px; color: #3A3A3E; }
    .xp b { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: #F2EFEA; }
    .xp span { font-size: 16px; line-height: 1.5; color: #B3ACA2; }
    .note { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; color: #CCC6BD; }
    .note i { width: 10px; height: 10px; border-radius: 50%; background: #EF4345; display: inline-block; flex: none; }
    .tag { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
           border: 1px solid #2C2C30; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
           font-weight: 700; color: #CCC6BD; }
    .tag.red { border-color: #EF4345; color: #EF4345; }


    /* --- About hero: a real room behind him --------------------------------
       Site media 1045, one of his lecture audiences, graded to black and white.
       It sits under the orrery and the wordmark, masked away on the copy side
       (90deg) and at the top and bottom, so the type never sits on photo. A slow
       scroll drift, transform only. */
    .ahbg { position: absolute; top: -92px; bottom: 0; left: -72px; right: -72px; z-index: -2;
            overflow: hidden; pointer-events: none;
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, #000 68%),
                                linear-gradient(180deg, transparent 0%, #000 20%, #000 60%, transparent 100%);
            -webkit-mask-composite: source-in;
                    mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, #000 68%),
                                linear-gradient(180deg, transparent 0%, #000 20%, #000 60%, transparent 100%);
                    mask-composite: intersect; }
    .ahbg img { position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px);
                object-fit: cover; object-position: 50% 28%; opacity: 0.44; filter: brightness(0.58);
                transform: scale(1.04); }
    .ahbg::after { content: ""; position: absolute; inset: 0;
                   background: radial-gradient(42% 60% at 70% 42%, rgba(239,67,69,0.18), rgba(239,67,69,0) 70%); }
    [dir="rtl"] .ahbg::after { background: radial-gradient(42% 60% at 30% 42%, rgba(239,67,69,0.18), rgba(239,67,69,0) 70%); }
    @supports (animation-timeline: scroll()) {
      .ahbg img { animation-name: ahbgdrift; animation-timing-function: linear; animation-fill-mode: both;
                  animation-duration: auto; animation-timeline: scroll(root); animation-range: 0 900px; }
    }
    @keyframes ahbgdrift { from { transform: translateY(0) scale(1.04); } to { transform: translateY(70px) scale(1.09); } }


    /* --- Photo hero: the photograph IS the hero -------------------------------
       Used on Pro-Bono Day (site media 3056: him presenting Pro Bono Day 4). The
       photo is scaled past the frame and placed by his face (--fx/--fy in the
       photo's own pixels), so he lands on the open side of the band, clear of the
       title; the copy side is shaded so the type never sits on raw photo. */
    .pgh { position: relative; height: 880px; overflow: hidden; isolation: isolate; }
    .pghimg { position: absolute; inset: 0; z-index: -2; }
    .pghimg img { position: absolute; display: block; max-width: none; filter: saturate(0.9) brightness(0.92);
                  transform-origin: 65% 40%; }
    @supports (animation-timeline: scroll()) {
      .pghimg img { animation-name: pghdrift; animation-timing-function: linear; animation-fill-mode: both;
                    animation-duration: auto; animation-timeline: scroll(root); animation-range: 0 880px; }
    }
    @keyframes pghdrift { from { transform: scale(1); } to { transform: scale(1.06) translateY(30px); } }
    .pghshade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
                background: linear-gradient(90deg, rgba(11,11,12,0.97) 0%, rgba(11,11,12,0.93) 36%, rgba(11,11,12,0.55) 53%, rgba(11,11,12,0.06) 70%, rgba(11,11,12,0.12) 100%),
                            linear-gradient(0deg, #0B0B0C 0%, rgba(11,11,12,0) 34%),
                            linear-gradient(180deg, rgba(11,11,12,0.75) 0%, rgba(11,11,12,0) 20%); }
    .pghcopy { position: absolute; left: 72px; bottom: 120px; width: 940px; display: flex; flex-direction: column;
               gap: 30px; align-items: flex-start; z-index: 1; }
    .pghcopy .pht { font-size: 168px; }
    .pghtag { position: absolute; right: 72px; bottom: 120px; z-index: 1; display: flex; align-items: center; gap: 12px;
              font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: #F2EFEA; }
    .pghtag i { width: 10px; height: 10px; border-radius: 50%; background: #EF4345; display: inline-block; }


    /* --- Video hero: a muted, looping clip as the hero -----------------------
       A local file (press-loop.mp4: 20 s of the press reel, cropped above its
       burned-in subtitles, crossfaded at the loop point), so it plays offline and
       in the single-file build. Cover-fitted and anchored to his side of the frame;
       the copy side is shaded like the photo heroes. */
    .pghvid { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0B0B0C; }
    .pghvid video { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
                    object-fit: cover; object-position: 0% 0%; }
    .pghvid .vtag { position: absolute; right: 72px; top: 30px; display: inline-flex; align-items: center; gap: 10px;
                    font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: #F2EFEA;
                    opacity: 0; transition: opacity .6s ease; }
    .pghvid.on .vtag { opacity: 1; }
    .pghvid .vtag i { width: 10px; height: 10px; border-radius: 50%; background: #EF4345; display: inline-block; }

    @media (prefers-reduced-motion: reduce) {
      .lrow::before { animation: none; transform: scaleX(1); }
      .aprog i { animation: none; }
      .ahbg img { animation: none; }
      .pghimg img { animation: none; }
    }

    .lightband { background: #FFFFFF; color: #14141A;
                 box-shadow: 0 0 0 100vw #FFFFFF; clip-path: inset(0 -100vw); }

.lightband { margin: 0; background: #FFFFFF; color: #14141A; font-family: "Barlow", "Rubik", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.lightband a { color: #14141A; text-decoration: none; transition: color .25s ease; }
.lightband a:hover { color: #EF4345; }
.lightband .display { font-family: "Anton", "Arial Narrow", Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }
.lightband /* TWO FAMILIES, .lightband ONE ROLE EACH.
       .display (Anton, .lightband uppercase) is for SHORT titles only -- three words or
       fewer. Anything longer takes .headline, .lightband which is Barlow in sentence
       case: an uppercase condensed face set as a full sentence is what made
       the page feel dense. The handwritten face is gone entirely. */
    .headline { font-family: "Barlow", "Rubik", "Helvetica Neue", Arial, sans-serif;
                font-weight: 700; letter-spacing: -0.022em; }
.lightband .lead { font-family: "Barlow", "Rubik", Arial, sans-serif; font-weight: 600;
            letter-spacing: -0.01em; color: #EF4345; }
.lightband /* one secondary-link style, .lightband so what is clickable is obvious and
       consistent -- and visible at rest, .lightband never revealed on hover */
    .qlink { display: inline-flex; align-items: center; gap: 10px; font-size: 16px;
             font-weight: 600; color: #14141A; border: 1px solid #D6D6DC;
             padding: 13px 20px; border-radius: 999px;
             transition: border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.lightband .qlink:hover { color: #14141A; border-color: #EF4345; transform: translateY(-2px); }
.lightband .label { font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase; color: #EF4345; font-weight: 700; }
.lightband .muted { color: #4A4A53; }
.lightband .box { background: #F4F4F6; border: 1px solid #E2E2E6; }
.lightband .btn { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 30px; background: #EF4345; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), color .35s ease; }
.lightband .btn::before { content: ""; position: absolute; inset: 0; background: #14141A; transform: translateY(101%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.lightband .btn:hover { color: #FFFFFF; transform: translateY(-3px); }
.lightband .btn:hover::before { transform: translateY(0); }
.lightband .btn > * { position: relative; }
.lightband .btn svg { transition: transform .35s ease; }
.lightband .btn:hover svg { transform: translateX(6px); }
.lightband .link { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; position: relative; padding-bottom: 4px; }
.lightband .link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #EF4345; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.lightband .link:hover::after { transform: scaleX(1); transform-origin: left; }
.lightband .link svg { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.lightband .link:hover svg { transform: translate(4px, 0); }
.lightband .ic { width: 52px; height: 52px; border: 1px solid #EF4345; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background .35s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.lightband .ic svg { width: 22px; height: 22px; stroke: #EF4345; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.lightband .nb { width: 44px; height: 44px; background: #EF4345; color: #fff; font-family: "Anton", Impact, sans-serif; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform .5s cubic-bezier(.2,.7,.2,1), background .3s ease; }
.lightband .card { position: relative; background: #F4F4F6; border: 1px solid #E2E2E6; transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .5s ease; }
.lightband .card:hover { transform: translateY(-8px); border-color: #EF4345; box-shadow: 0 40px 80px -40px rgba(239,67,69,0.45); }
.lightband .card:hover .nb { transform: rotate(-8deg) scale(1.08); }
.lightband .card:hover .ic { background: #EF4345; }
.lightband .card:hover .ic svg { stroke: #fff; }
.lightband .tile { overflow: hidden; position: relative; }
.lightband .tile img { transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter: saturate(0.85); }
.lightband .card:hover .tile img, .lightband .tile:hover img { transform: scale(1.06); filter: saturate(1); }
.lightband .q { border-top: 1px solid #E2E2E6; cursor: pointer; transition: background .3s ease; }
.lightband .q:hover { background: #F0F0F3; }
.lightband .q .qt { transition: color .3s ease; }
.lightband .q:hover .qt { color: #EF4345; }
.lightband .q .plus { transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s ease; }
.lightband .q[data-open="true"] .plus { transform: rotate(45deg); background: #EF4345; }
.lightband .q[data-open="true"] .plus svg { stroke: #fff; }
.lightband .q .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
.lightband .q .ans > div { overflow: hidden; }
.lightband .q[data-open="true"] .ans { grid-template-rows: 1fr; }
.lightband .q[data-open="true"] .nb { background: #14141A; color: #FFFFFF; }
.lightband .wr { transition: background .3s ease, padding-left .35s cubic-bezier(.2,.7,.2,1); border-top: 1px solid #E2E2E6; }
.lightband .wr:hover { background: #F0F0F3; padding-left: 14px; }
.lightband /* logos read at rest now -- 0.55 made the client list something you had to
       hover to see, .lightband which is the opposite of what a credibility row is for */
    .invert img { filter: grayscale(1) contrast(1.05); opacity: 0.88; transition: opacity .4s ease, transform .4s ease; }
.lightband .invert img:hover { opacity: 1; transform: translateY(-3px); }
.lightband .soc { width: 42px; height: 42px; border: 1px solid #DCDCE1; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.lightband .soc svg { width: 16px; height: 16px; stroke: #14141A; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.lightband .soc:hover { border-color: #EF4345; background: #EF4345; transform: translateY(-3px); }
.lightband .soc:hover svg { stroke: #fff; }
.lightband .field { transition: border-color .3s ease, box-shadow .3s ease; }
.lightband .field:hover { border-color: #EF4345; box-shadow: 0 0 0 4px rgba(239,67,69,0.15); }
.lightband .pulse { animation: pulse 2.2s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239,67,69,0.6); } 100% { box-shadow: 0 0 0 18px rgba(239,67,69,0); } }
.lightband .glowpulse { animation: glowpulse 5s ease-in-out infinite; } @keyframes glowpulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
    @keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes word { from { clip-path: inset(-60% -25% 160% -25%); transform: translateY(80px); } to { clip-path: inset(-60% -25% -60% -25%); transform: none; } }
    @keyframes portrait { from { clip-path: inset(160% -25% -60% -25%); transform: translateY(60px); } to { clip-path: inset(-60% -25% -60% -25%); transform: none; } }
    @keyframes write { from { clip-path: inset(-60% 125% -60% -25%); } to { clip-path: inset(-60% -25% -60% -25%); } }
    @keyframes marquee { to { transform: translateX(-50%); } }
.lightband .aword { animation: word .6s cubic-bezier(.2,.7,.2,1) 0s both; }
.lightband .aport { animation: portrait .7s cubic-bezier(.2,.7,.2,1) .12s both; }
.lightband .awrite { animation: write .45s cubic-bezier(.2,.7,.2,1) .10s both; }
.lightband /* the whole fold is present inside 0.8s: nothing the visitor needs to
       read or click waits on an entrance */
    .a1 { animation: up .5s cubic-bezier(.2,.7,.2,1) .14s both; }
.lightband .a2 { animation: up .5s cubic-bezier(.2,.7,.2,1) .22s both; }
.lightband .a3 { animation: up .5s cubic-bezier(.2,.7,.2,1) .30s both; }
.lightband .a4 { animation: up .5s cubic-bezier(.2,.7,.2,1) .06s both; }
.lightband .rv { animation: up .9s cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-duration: auto; animation-range: entry 0% entry 40%; }
.lightband .rv2 { animation: up .9s cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-duration: auto; animation-range: entry 10% entry 55%; }
.lightband .rv3 { animation: up .9s cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-duration: auto; animation-range: entry 20% entry 70%; }
.lightband .track { display: flex; gap: 64px; width: max-content; animation: marquee 44s linear infinite; align-items: center; }
.lightband .marquee:hover .track { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) {
.lightband .aword, .lightband .aport, .lightband .awrite, .lightband .a1, .lightband .a2, .lightband .a3, .lightband .a4, .lightband .pulse, .lightband .glowpulse, .lightband .rv, .lightband .rv2, .lightband .rv3, .lightband .track { animation: none !important; } }
.lightband /* --- By the numbers: Anton slab figures --------------------------------
       Figures are the live site's own Elementor counters (95 / 117 / 1350 / 15). */
    @property --n1 { syntax: "<integer>"; initial-value: 0; inherits: false; }
    @property --n2 { syntax: "<integer>"; initial-value: 0; inherits: false; }
    @property --n3 { syntax: "<integer>"; initial-value: 0; inherits: false; }
    @property --n4 { syntax: "<integer>"; initial-value: 0; inherits: false; }
.lightband .nv::after { content: counter(nn); }
.lightband .ncell:nth-child(1) .nv { counter-reset: nn var(--n1); --n1: 95; }
.lightband .ncell:nth-child(2) .nv { counter-reset: nn var(--n2); --n2: 117; }
.lightband .ncell:nth-child(3) .nv { counter-reset: nn var(--n3); --n3: 1350; }
.lightband .ncell:nth-child(4) .nv { counter-reset: nn var(--n4); --n4: 15; }
.lightband .nums:hover .nv { animation-duration: 1.5s; animation-timing-function: cubic-bezier(.2,.75,.2,1); animation-fill-mode: both; }
.lightband .nums:hover .ncell:nth-child(1) .nv { animation-name: cu1; animation-delay: 0s; }
.lightband .nums:hover .ncell:nth-child(2) .nv { animation-name: cu2; animation-delay: .07s; }
.lightband .nums:hover .ncell:nth-child(3) .nv { animation-name: cu3; animation-delay: .14s; }
.lightband .nums:hover .ncell:nth-child(4) .nv { animation-name: cu4; animation-delay: .21s; }
    @keyframes cu1 { from { --n1: 0; } to { --n1: 95; } }
    @keyframes cu2 { from { --n2: 0; } to { --n2: 117; } }
    @keyframes cu3 { from { --n3: 0; } to { --n3: 1350; } }
    @keyframes cu4 { from { --n4: 0; } to { --n4: 15; } }
.lightband /* Was four equal columns split by hairline dividers -- the same stats-row
       shape 02 already uses, .lightband so the two directions read alike. Now a poster
       stack: figures sized by the magnitude they report, .lightband placed asymmetrically
       on a 12-column grid with the rows offset, .lightband no dividers at all. DOM order
       is unchanged so the nth-child counter bindings above still hold. */
    /* First pass scattered the four figures across a 12-column grid in two
       rows; row 2 held one cell in columns 3-5, .lightband which orphaned nine columns
       beside it and the whole right half under 1350. That space read as a
       hole, .lightband not as air. Now they share one bottom baseline, .lightband with widths
       sized to the magnitude each reports, .lightband so the band is dense and what is
       left over is a single clean right margin. */
    /* Third pass, .lightband and the first two failed for the same measured reason: .nv is
       a flex item, .lightband so default align-items:stretch made its box the full column
       width. Measuring the BOX said the gaps were an even 52px; measuring the
       INK said 254 / 253 / 100. The numerals were left-aligned inside boxes of
       318/355/430/318 with 202/201/49/235px of dead space, .lightband so the rhythm was
       never even. A divider bounds that dead space and turns it into column
       padding, .lightband which is why the shape wants rules. */
    .nums { display: grid; grid-template-columns: 1fr 1fr 1.3fr 0.9fr;
            gap: 0; align-items: stretch; }
.lightband .ncell { position: relative; display: flex; flex-direction: column;
             justify-content: flex-end; gap: 16px; padding: 30px 0 0 42px; }
.lightband .ncell:first-child { padding-left: 0; }
.lightband .ncell + .ncell { border-left: 1px solid rgba(20,20,26,0.15); }
.lightband /* accent cap so the rule reads as drawn, .lightband not as a table border */
    .ncell + .ncell::before { content: ""; position: absolute; left: -1px; top: 0;
                              width: 1px; height: 34px; background: #EF4345; }
.lightband .nv { font-family: "Anton", Impact, sans-serif; line-height: 0.82; letter-spacing: 0.005em;
          color: #14141A; transition: color .4s ease; }
.lightband .ncell:nth-child(1) .nv { font-size: 116px; }
.lightband .ncell:nth-child(2) .nv { font-size: 132px; }
.lightband .ncell:nth-child(3) .nv { font-size: 200px; }
.lightband /* 1350 leads */
    .ncell:nth-child(4) .nv { font-size: 100px; }
.lightband .ncell:hover .nv { color: #EF4345; }
.lightband .nl { font-size: 18px; line-height: 1.5; color: rgba(20,20,26,0.84);
          max-width: 21ch; min-height: 3em; }
.lightband .nr { height: 3px; background: #EF4345; transform: scaleX(0.18); transform-origin: left;
          transition: transform .6s cubic-bezier(.16,1,.3,1); }
.lightband .ncell:hover .nr { transform: scaleX(1); }
.lightband /* --- Awards + the hummus aside ------------------------------------------ */
    .awd { display: flex; align-items: flex-start; gap: 22px; padding: 26px 0; border-top: 1px solid rgba(20,20,26,0.14); }
.lightband .awd:last-of-type { border-bottom: 1px solid rgba(20,20,26,0.14); }
.lightband .awd .at { font-size: 22px; line-height: 1.4; font-weight: 600; max-width: 40ch; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.lightband .awd:hover .at { transform: translateX(9px); }
.lightband /* Hummus: a photograph card (client, .lightband 2026-09-29: "crying out for a visual").
       Soul still, .lightband graded to the page's photo rule -- black and white, .lightband the red
       paprika the only colour. The plate sits on one side of the image and the
       other side fades to ink, .lightband which is where the word goes. Its colours are
       literals outside make-light's map (#0E0E10, .lightband #FFFFFF, .lightband rgba(255, .lightband 255, .lightband 255, .lightband x)), .lightband because the photo stays dark on every ground and so must its type. */
    .hum { position: relative; display: block; height: 620px; overflow: hidden; border-radius: 4px;
           background: #0E0E10; border: 1px solid rgba(255,255,255,0.08); color: #FFFFFF; }
.lightband .hum:hover { color: #FFFFFF; }
.lightband .hum img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
               transform: scale(1.02); transform-origin: 70% 50%;
               transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.lightband .hum:hover img { transform: scale(1.07) rotate(-2deg); }
.lightband .hcopy { position: absolute; left: 56px; bottom: 52px; display: flex; flex-direction: column;
             gap: 16px; align-items: flex-start; }
.lightband .hw { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: 150px;
          line-height: 0.84; letter-spacing: 0.005em; color: #FFFFFF; }
.lightband .hs { font-size: 22px; line-height: 1.5; color: rgba(255,255,255,0.84); }
.lightband /* .hmlink, .lightband not .hl: .hl is the heading highlight ("What I'm hired for"), .lightband and a
       same-named link style shrank that highlight to a 16px uppercase pill */
    .hmlink { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700;
          letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF;
          border-bottom: 1px solid #EF4345; padding-bottom: 4px; margin-top: 4px; }
.lightband .hmlink svg { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.lightband .hum:hover .hmlink svg { transform: translateX(6px); }
.lightband /* Celestial orrery -------------------------------------------------------
       Concentric rings with a body travelling each rim, .lightband plus a few twinkling
       marks. Everything animates transform/opacity only, .lightband so it all stays on the
       compositor -- eight rotating rings across the page, .lightband where the previous
       starfield redrew ~1900 pixels into an ImageData buffer every frame.
       Each band's copy sits on the left, .lightband so the field is masked clear of it:
       the vertical fade is INTERSECTED with a horizontal one running from
       --clear (transparent) to --solid (full). A ring dissolving mid-arc into
       the dark reads as depth rather than as a cut. */
    .orr { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
           --clear: 34%; --solid: 54%; }
.lightband .orr .neb { position: absolute; inset: 0;
                background: radial-gradient(52% 44% at var(--cx, 62%) var(--cy, 46%),
                            rgba(239,67,69,0.13), rgba(239,67,69,0) 66%); }
.lightband .orrf { position: absolute; left: var(--cx, 62%); top: var(--cy, 46%); width: 0; height: 0; }
.lightband .orb { position: absolute; left: 0; top: 0; border-radius: 50%;
           width: var(--d); height: var(--d);
           margin-left: calc(var(--d) / -2); margin-top: calc(var(--d) / -2);
           border: 1px solid rgba(20,20,26,0.105);
           animation-name: orbspin; animation-duration: var(--dur, 60s);
           animation-timing-function: linear; animation-iteration-count: infinite; }
.lightband .orb.rev { animation-direction: reverse; }
.lightband .orb.warm { border-color: rgba(239,67,69,0.2); }
    @keyframes orbspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.lightband .pl { position: absolute; left: 50%; top: 0; border-radius: 50%;
          width: var(--s, 6px); height: var(--s, 6px);
          margin-left: calc(var(--s, 6px) / -2); margin-top: calc(var(--s, 6px) / -2);
          background: rgba(20,20,26,0.72); }
.lightband .pl.hot { background: #EF4345; }
.lightband /* The centre body pulses via a scaling pseudo-element, .lightband never a looping
       box-shadow -- a shadow loop repaints instead of compositing. */
    .orbc { position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
            border-radius: 50%; background: #EF4345; }
.lightband .orbc::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
                   border: 1px solid rgba(239,67,69,0.55); opacity: 0;
                   animation-name: orbpulse; animation-duration: 3.8s;
                   animation-iteration-count: infinite;
                   animation-timing-function: cubic-bezier(.2,.7,.2,1); }
    @keyframes orbpulse { 0% { transform: scale(0.5); opacity: 0.85; }
                          100% { transform: scale(2.8); opacity: 0; } }
.lightband .gly { position: absolute; width: 0; height: 0; opacity: 0;
           animation-name: twinkle; animation-duration: var(--gd, 7s);
           animation-delay: var(--gdl, 0s); animation-iteration-count: infinite;
           animation-timing-function: ease-in-out; }
.lightband .gp { position: absolute; background: rgba(20,20,26,0.55); }
.lightband .gly.hot .gp { background: rgba(239,67,69,0.8); }
.lightband .gly .p1 { width: 22px; height: 1px; left: -11px; top: 0; }
.lightband .gly .p2 { width: 1px; height: 22px; left: 0; top: -11px; }
.lightband .gly .p3 { width: 4px; height: 4px; left: -2px; top: -2px; transform: rotate(45deg); }
    @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.8); }
                         50% { opacity: 0.3; transform: scale(1); } }
.lightband .orr.fadeb {
      -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 96%),
                          linear-gradient(90deg, transparent var(--clear), #000 var(--solid));
      -webkit-mask-composite: source-in;
              mask-image: linear-gradient(180deg, #000 62%, transparent 96%),
                          linear-gradient(90deg, transparent var(--clear), #000 var(--solid));
              mask-composite: intersect; }
.lightband .orr.fadeboth {
      -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent),
                          linear-gradient(90deg, transparent var(--clear), #000 var(--solid));
      -webkit-mask-composite: source-in;
              mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent),
                          linear-gradient(90deg, transparent var(--clear), #000 var(--solid));
              mask-composite: intersect; }
    @media (prefers-reduced-motion: reduce) {
.lightband .orb, .lightband .orbc::after, .lightband .gly { animation: none; }
.lightband .gly { opacity: 0.18; }
    }
.lightband /* The fold's side rail of page sections was removed: the top menu
       already names those destinations, .lightband and a second list beside the
       hero competed with the message for the same glance. */
    @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.lightband /* Photo strip ------------------------------------------------------------
       Captions sit on the image over an always-present scrim; the scrim is not
       a hover reveal, .lightband so the text never depends on a state to be readable. */
    .pcard { position: relative; display: block; overflow: hidden; background: #F4F4F6;
             border: 1px solid #E2E2E6;
             transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease,
                         box-shadow .5s ease; }
.lightband .pcard img { width: 100%; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.lightband .pcard .pscrim { position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
                     background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.82) 62%,
                                 rgba(255,255,255,0.95) 100%);
                     transition: opacity .4s ease; }
.lightband .pcard .pcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 26px;
                   display: flex; align-items: baseline; gap: 14px; }
.lightband .pcard .pn { font-family: "Anton", Impact, sans-serif; font-size: 17px; letter-spacing: 0.08em;
                 color: #EF4345; flex: none; }
.lightband .pcard .pt { font-size: 19px; line-height: 1.35; font-weight: 600; color: #14141A; }
.lightband .pcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
                    background: #EF4345; transform: scaleX(0); transform-origin: left;
                    transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.lightband .pcard:hover { color: #14141A; transform: translateY(-8px); border-color: #EF4345;
                   box-shadow: 0 40px 80px -40px rgba(239,67,69,0.45); }
.lightband .pcard:hover img { transform: scale(1.05); }
.lightband .pcard:hover .pt { color: #14141A; }
.lightband .pcard:hover .pn { color: #EF4345; }
.lightband .pcard:hover::after { transform: scaleX(1); }
.lightband /* --- The Lighthouse: reel index ---------------------------------------
       Was a big photo tile beside a copy column with a list under it -- the
       same shape 01 and 02 already use, .lightband so all three directions read alike.
       Here the big rectangle is gone entirely and the episodes become a reel
       of stills. Every row carries its own image at rest: the log cards taught
       us that hiding the imagery behind :hover leaves a dead section. */
    .lhs { padding: 120px 72px; display: flex; flex-direction: column; gap: 56px; }
.lightband .lhshead { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 64px; align-items: end; }
.lightband /* A photo-filled headline (background-clip: text) was tried here and cut.
       Measured: every conversation still in the library is low-key --
       stage.jpg means L=42 with 83% of its pixels under L=60, .lightband auditorium 82%, .lightband tv 70% -- so against an L~11 ground the type could be legible or
       photographic, .lightband never both. The outlined second line carries the same
       editorial weight with contrast we control outright. */
    /* Anton's caps measure 0.875em of ink, .lightband so line-height 0.88 left a 1px
       gap between the two lines -- touching, .lightband and the 2px stroke on the
       outlined line closed even that. 1.02 gives a 0.145em (15px) gap. */
    .lhstitle { margin: 14px 0 0 0; font-size: 104px; line-height: 1.02; color: #14141A; }
.lightband /* guarded: transparent fill is only safe where the stroke actually
       paints, .lightband or the word disappears -- the trap the photo fill nearly hit */
    .lhstitle .ghost { color: #9A9AA4; }
    @supports (-webkit-text-stroke: 2px red) {
.lightband .lhstitle .ghost { color: transparent; -webkit-text-stroke: 2px #9A9AA4;
                         transition: -webkit-text-stroke-color .5s ease; }
.lightband .lhs:hover .lhstitle .ghost { -webkit-text-stroke-color: #EF4345; }
    }
.lightband .lhslede { margin: 0 0 10px 0; font-size: 19px; line-height: 1.65; color: #3A3A42; }
.lightband /* --- Pro-Bono Day -------------------------------------------------------
       Promoted out of a shared two-up card into its own full-width band. */
    .pb { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 0;
          border: 1px solid #E2E2E6; border-radius: 4px; overflow: hidden; background: #F4F4F6; }
.lightband .pbcopy { padding: 72px 64px; display: flex; flex-direction: column; gap: 26px;
              align-items: flex-start; justify-content: center; }
.lightband .pbfig { display: flex; align-items: baseline; gap: 16px; }
.lightband .pbn { font-family: "Anton", Impact, sans-serif; font-size: 84px; line-height: 0.9; color: #EF4345; }
.lightband .pbl { font-size: 18px; line-height: 1.5; color: #4A4A53; max-width: 22ch; }
.lightband .pbimg { position: relative; min-height: 460px; overflow: hidden; }
.lightband .pbimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                 display: block; filter: saturate(0.85); }
.lightband .nlbar { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
             border: 1px solid #E2E2E6; border-radius: 4px; background: #F4F4F6; padding: 40px 56px; }
.lightband /* --- The Lighthouse: one lead episode plus the rest ---------------------
       Adopts direction 01's shape -- a single large episode alongside
       smaller ones -- because a flat list of three gave no lead item. Titles
       and guest names are set to be read, .lightband not to fit. */
    .lhgrid { display: grid; grid-template-columns: 1.38fr 1fr; gap: 22px; align-items: start; }
.lightband .lhfeat { display: flex; flex-direction: column; color: #14141A; background: #F4F4F6;
              border: 1px solid #E2E2E6; border-radius: 4px; overflow: hidden;
              transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .35s ease; }
.lightband /* anchors: pin the ink so the global a:hover cannot repaint the titles */
    .lhfeat:hover { transform: translateY(-6px); border-color: #C4C4CC; color: #14141A; }
.lightband .lhfim { position: relative; height: 424px; overflow: hidden; }
.lightband .lhfim img { width: 100%; height: 100%; object-fit: cover; display: block;
                 transform: scale(1.03); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.lightband .lhfeat:hover .lhfim img { transform: scale(1.08); }
.lightband .lhplay { position: absolute; left: 26px; bottom: 26px; width: 66px; height: 66px;
              border-radius: 50%; background: #EF4345; display: inline-flex;
              align-items: center; justify-content: center;
              transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.lightband .lhplay svg { fill: #fff; }
.lightband .lhfeat:hover .lhplay { transform: scale(1.08); }
.lightband .lhfbody { padding: 30px 32px 34px 32px; display: flex; flex-direction: column; gap: 14px; }
.lightband .lhmeta { font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase;
              color: #4A4A53; font-weight: 700; }
.lightband .lhft { font-size: 30px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.22; }
.lightband .lhside { display: flex; flex-direction: column; gap: 14px; }
.lightband .lhep { display: grid; grid-template-columns: 136px 1fr; gap: 22px; align-items: center;
            color: #14141A; background: #F4F4F6; border: 1px solid #E2E2E6; border-radius: 4px;
            overflow: hidden; padding-right: 22px;
            transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s ease; }
.lightband .lhep:hover { transform: translateX(8px); border-color: #C4C4CC; color: #14141A; }
.lightband .lhepim { height: 108px; overflow: hidden; }
.lightband .lhepim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightband .lhepc { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; }
.lightband .lhept { font-size: 21px; font-weight: 700; line-height: 1.28; letter-spacing: -0.015em; }
.lightband /* --- Work with me: the walkthrough film ------------------------------
       Round 2b (2026-09-29). The client asked for the format of Bearing's film
       "and simply placing me inside the scene": the camera walks into a room, .lightband pans across the people in it until it reaches him, .lightband then cuts to the next
       room. So this is a real film scrubbed by scroll, .lightband not photos moved in a
       frame: the band's scroll position IS the film's clock (the same engine as
       Bearing, .lightband injected by the builders for any [data-filmwrap] + video[data-film]).
       Five rooms, .lightband one per service, .lightband equal length, .lightband hard cuts between them.
       The footage file is img/tour-film.mp4; swap it and nothing else changes. */
    .tour { position: relative; height: 4800px; margin: 0 72px; }
.lightband .tstage { position: sticky; top: 30px; height: 940px; overflow: hidden; border-radius: 6px;
              background: #FFFFFF; border: 1px solid #E2E2E6; }
.lightband .tfilm { position: absolute; inset: 0; }
.lightband .tfilm img, .lightband .tfilm video { position: absolute; inset: 0; width: 100%; height: 100%;
                               object-fit: cover; display: block; }
.lightband .tfilm video { opacity: 0; }
.lightband /* legibility ground for the copy column: footage never sits raw under text */
    .tgrade { position: absolute; inset: 0; pointer-events: none;
              background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 30%,
                          rgba(255,255,255,0.32) 58%, rgba(255,255,255,0.18) 100%),
                          linear-gradient(0deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0) 42%); }
.lightband .tcopy { position: absolute; top: 0; bottom: 0; left: 0; width: 820px;
             padding-block: 62px 54px; padding-inline-start: 64px; display: flex; flex-direction: column; gap: 30px; }
.lightband .thead .label { display: block; margin-bottom: 16px; }
.lightband .ttitle { margin: 0; font-size: 68px; line-height: 1.02; color: #14141A; }
.lightband .ttitle .hl { background: #EF4345; color: #fff; padding: 0 14px; border-radius: 8px;
                  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lightband .tlist { display: flex; flex-direction: column; gap: 8px; }
.lightband .trow { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 16px;
            align-items: start; padding: 18px 22px; border-radius: 4px;
            border: 1px solid transparent; cursor: pointer; opacity: 0.6;
            transition: opacity .45s ease, background .45s ease, border-color .45s ease; }
.lightband .trow.on { opacity: 1; background: rgba(20,20,22,0.78); border-color: rgba(20,20,26,0.14); }
.lightband .trow:hover { opacity: 1; }
.lightband .trn { font-family: "Anton", Impact, sans-serif; font-size: 22px; line-height: 1.3;
           letter-spacing: 0.02em; color: #EF4345; }
.lightband .trt { display: block; font-size: 25px; font-weight: 700; line-height: 1.22;
           letter-spacing: -0.02em; color: #14141A; }
.lightband /* only the room on screen shows its line, .lightband so five rows fit the 940px stage */
    .trx { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
.lightband .trow.on .trx { grid-template-rows: 1fr; }
.lightband .trd { display: block; min-height: 0; overflow: hidden; font-size: 19px; line-height: 1.5; color: #3A3A42; }
.lightband .trd::before { content: ""; display: block; height: 10px; }
.lightband .tra { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #C4C4CC;
           display: inline-flex; align-items: center; justify-content: center;
           transition: background .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.lightband .tra svg { stroke: #14141A; }
.lightband .trow.on .tra { border-color: #EF4345; }
.lightband .tra:hover { background: #EF4345; border-color: #EF4345; transform: rotate(-45deg); }
.lightband .tfoot { margin-top: auto; display: flex; align-items: center; gap: 30px; }
.lightband .tbars { display: flex; gap: 8px; }
.lightband .tbar { position: relative; width: 46px; height: 3px; background: rgba(20,20,26,0.22); overflow: hidden; }
.lightband .tbar i { position: absolute; inset: 0; background: #EF4345; transform: scaleX(0);
              transform-origin: left; }
.lightband .tbar:first-child i { transform: scaleX(0.04); }
.lightband .tidx { position: absolute; top: 58px; right: 60px; display: flex; flex-direction: column;
            align-items: flex-end; gap: 14px; pointer-events: none; }
.lightband .tidx .trec { display: inline-flex; align-items: center; gap: 10px; }
.lightband .tidx .tdot { width: 12px; height: 12px; border-radius: 50%; background: #EF4345; }
.lightband .tidx .tnum { display: flex; align-items: baseline; gap: 12px;
                  font-family: "Anton", Impact, sans-serif; color: #14141A; }
.lightband .tidx b { font-weight: 400; font-size: 120px; line-height: 0.82; }
.lightband .tidx .tof { font-size: 34px; color: rgba(20,20,26,0.72); }
.lightband /* --- How we'll work: five stages, .lightband set as reading -----------------------
       The 3D route scene is gone (client, .lightband 2026-09-29): the tour now carries the
       motion, .lightband so this section gives its room back to the words. */
    .pz { padding: 140px 72px 140px 72px; }
.lightband .pzhead { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; margin-bottom: 64px; }
.lightband .pzl { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E2E2E6; }
.lightband .pzr { position: relative; display: grid;
           grid-template-columns: 150px 104px minmax(0, 0.72fr) minmax(0, 1.2fr); gap: 44px;
           align-items: start; padding: 52px 0; border-bottom: 1px solid #E2E2E6; }
.lightband .pzn { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.lightband .pzt { transition: transform .5s cubic-bezier(.16,1,.3,1), color .35s ease; }
.lightband .pzr:hover .pzn { transform: translateX(6px); }
.lightband .pzr:hover .pzt { transform: translateX(8px); color: #14141A; }
.lightband /* Scroll interaction: a red cap under each numeral draws itself as the row
       enters. Scroll-driven (view timeline), .lightband transform only; longhands, .lightband because
       an animation: shorthand after animation-timeline would reset it to auto. */
    .pzr::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 150px; height: 2px;
                   background: #EF4345; transform: scaleX(1); transform-origin: left; }
    @supports (animation-timeline: view()) {
.lightband .pzr::before { animation-name: pzcap; animation-timing-function: cubic-bezier(.2,.7,.2,1);
                     animation-fill-mode: both; animation-duration: auto;
                     animation-timeline: view(); animation-range: entry 20% cover 45%; }
    }
    @keyframes pzcap { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lightband /* Animated icons: one per stage, .lightband drawn in the icon's own language. Stroke is
       currentColor so the light grounds recolour it through the stylesheet (make-mix
       maps inline styles and class rules, .lightband not SVG attributes). */
    .pzi { width: 96px; height: 96px; display: inline-flex; align-items: center; justify-content: center;
           border: 1px solid #D6D6DC; border-radius: 4px; color: #14141A; background: #F0F0F3;
           transition: border-color .35s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.lightband .pzi svg { width: 68px; height: 68px; overflow: visible; fill: none; stroke: currentColor;
               stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightband .pzi .ac { stroke: #EF4345; }
.lightband .pzi .acf { fill: #EF4345; stroke: none; }
.lightband .pzi .mv { transform-box: fill-box; transform-origin: center; }
.lightband .pzr:hover .pzi { border-color: #EF4345; transform: translateY(-4px); }
.lightband /* 01 Experience: the eye scans, .lightband and blinks now and then */
    .pzi1 .iris { animation: pzscan 3.6s ease-in-out infinite alternate; }
.lightband .pzi1 .lid { animation: pzblink 6s ease-in-out infinite; }
    @keyframes pzscan { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
    @keyframes pzblink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } }
.lightband /* 02 Ideas: the rays pulse in sequence, .lightband the filament flickers */
    .pzi2 .ray { animation: pzray 2.4s ease-in-out infinite; }
.lightband .pzi2 .ray:nth-child(2) { animation-delay: .2s; }
.lightband .pzi2 .ray:nth-child(3) { animation-delay: .4s; }
.lightband .pzi2 .ray:nth-child(4) { animation-delay: .6s; }
.lightband .pzi2 .ray:nth-child(5) { animation-delay: .8s; }
.lightband .pzi2 .fil { animation: pzflick 3.2s steps(1, end) infinite; }
    @keyframes pzray { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
    @keyframes pzflick { 0%, 100% { opacity: 1; } 62% { opacity: .35; } 66% { opacity: 1; } 70% { opacity: .5; } 74% { opacity: 1; } }
.lightband /* 03 People: the one in the middle rises -- the people who carry it */
    .pzi3 .lift { animation: pzlift 2.8s cubic-bezier(.45,0,.55,1) infinite; }
    @keyframes pzlift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.lightband /* 04 Strategy: one page, .lightband writing itself line by line */
    .pzi4 .ln { transform-box: fill-box; transform-origin: 0 50%; animation: pzwrite 5s cubic-bezier(.2,.7,.2,1) infinite; }
.lightband .pzi4 .ln:nth-of-type(2) { animation-delay: .35s; }
.lightband .pzi4 .ln:nth-of-type(3) { animation-delay: .7s; }
.lightband .pzi4 .ln:nth-of-type(4) { animation-delay: 1.05s; }
    @keyframes pzwrite { 0% { transform: scaleX(0); opacity: 0; } 12% { opacity: 1; } 30%, 82% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
.lightband /* 05 Action: a paper plane on its first flight -- the pilots. translate(x, .lightband y), .lightband not translateX, .lightband so make-hebrew does not flip it; RTL mirrors the whole svg. */
    .pzi5 .plane { animation: pzfly 3.4s cubic-bezier(.45,0,.55,1) infinite; }
.lightband .pzi5 .trail { animation: pztrail 3.4s ease-in-out infinite; }
    @keyframes pzfly { 0%, 100% { transform: translate(0px, 0px) rotate(0deg); } 50% { transform: translate(5px, -6px) rotate(-4deg); } }
    @keyframes pztrail { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
.lightband [dir="rtl"] .pzi5 svg, .lightband [dir="rtl"] .pzi4 svg { transform: scaleX(-1); }
.lightband /* the plane flies and the page writes right-to-left */
    @media (prefers-reduced-motion: reduce) {
      .pzi .iris, .pzi .lid, .pzi .ray, .pzi .fil, .pzi .lift, .pzi .ln, .pzi .plane, .pzi .trail { animation: none; }
      .pzr::before { animation: none; transform: scaleX(1); }
    }
.lightband .pzn { font-family: "Anton", Impact, sans-serif; font-size: 96px; line-height: 0.86; color: #EF4345; }
.lightband .pzt { margin: 0; font-family: "Anton", Impact, sans-serif; text-transform: uppercase;
           font-size: 64px; line-height: 0.96; letter-spacing: 0.01em; color: #14141A; }
.lightband .pzb { margin: 0; padding-top: 6px; font-size: 29px; line-height: 1.42; font-weight: 600;
           color: #2A2A32; max-width: 46ch; }
.lightband /* --- People I've worked with: a logo wall -------------------------------
       Given the width of the page and its own band (client, .lightband 2026-09-29: "give
       this more prominence -- in Dark Banded it really stands out"). Hairlines
       are the 1px gap showing the grid colour through, .lightband so every cell is equal. */
    .clients { padding: 140px 72px 140px 72px; display: flex; flex-direction: column; gap: 56px; }
.lightband .cwall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
             background: #E2E2E6; border: 1px solid #E2E2E6; }
.lightband /* 25 clients from his site, .lightband 5 x 5. Every mark is fitted into the same box so a
       wide wordmark and a square emblem carry about the same weight */
    .cw { height: 190px; display: flex; align-items: center; justify-content: center;
          padding: 0 40px; background: #FFFFFF; transition: background .35s ease; }
.lightband .cw:hover { background: #F4F4F6; }
.lightband .cw img { width: 100%; max-width: 210px; height: 88px; object-fit: contain; }
.lightband .cpress { overflow: hidden; border-top: 1px solid #E2E2E6; border-bottom: 1px solid #E2E2E6; padding: 26px 0; }
.lightband .cpress .track { font-size: 24px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #3A3A42; }
.lightband .cquote { display: grid; grid-template-columns: 120px minmax(0, 1fr) 420px; gap: 48px;
              align-items: start; background: #EF4345; color: #fff; padding: 64px 64px; }
.lightband .cqm { font-size: 180px; line-height: 0.66; color: rgba(255,255,255,0.6); }
.lightband .cqt { margin: 0; font-size: 40px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.lightband .cqw { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.lightband .cqn { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.lightband .cqr { font-size: 19px; line-height: 1.45; font-weight: 600; color: rgba(255,255,255,0.94); }
.lightband /* ======================================================================
       INNER PAGES -- direction 03 "In The Room", .lightband Mixed ground.
       Everything above this block is the approved homepage's own stylesheet, .lightband copied verbatim by build.py, .lightband so a button, .lightband a label or a card on an inner
       page is the same object as on the homepage. This block only adds the
       shapes the homepage never needed: page heads, .lightband reading columns, .lightband lists, .lightband filters and forms. Same tokens: #FFFFFF / #F4F4F6 / #E2E2E6 grounds, .lightband #14141A ink, .lightband #EF4345 the one accent; light bands are generated from
       these by make-light's map, .lightband never hand-written.
       Animate transform/opacity only.
       ====================================================================== */

    /* --- top bar: the homepage bar, .lightband with a real menu ---------------------- */
    .ibar { position: relative; display: flex; align-items: center; justify-content: space-between;
            height: 92px; padding: 0 72px; z-index: 5; }
.lightband .ibrand { display: flex; align-items: center; gap: 14px; color: #14141A; }
.lightband .ibrand:hover { color: #14141A; }
.lightband .ibrand img { height: 56px; width: auto; display: block; }
.lightband .ibrand .label { color: #14141A; display: inline-flex; flex-direction: column; gap: 6px;
                     border-left: 1px solid #DCDCE1; padding-left: 16px; }
.lightband .ibrand .label i { width: 40px; height: 2px; background: #EF4345; display: block; }
.lightband .inav { display: flex; gap: 30px; align-items: center; font-size: 16px; letter-spacing: 0.08em;
            text-transform: uppercase; font-weight: 700; }
.lightband .inav a { position: relative; padding: 8px 0; }
.lightband .inav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #EF4345;
                     transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.lightband .inav a:hover::after, .lightband .inav a.cur::after { transform: scaleX(1); }
.lightband .inav a.cur { color: #14141A; }
.lightband .inav .lang { color: #4A4A53; }
.lightband .iside { display: flex; align-items: center; gap: 24px; }
.lightband .iside .avail { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: 0.08em;
                    text-transform: uppercase; font-weight: 700; }
.lightband .iside .avail i { width: 8px; height: 8px; border-radius: 50%; background: #EF4345; display: inline-block; }
.lightband /* --- page head: the homepage's wordmark move, .lightband one word per page ------- */
    .ph { position: relative; isolation: isolate; margin: 0 72px; min-height: 660px;
          display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px;
          align-items: end; padding: 40px 0 110px 0; }
.lightband .crumb { display: flex; align-items: center; gap: 12px; font-size: 16px; letter-spacing: 0.10em;
             text-transform: uppercase; font-weight: 700; color: #4A4A53; }
.lightband .crumb a { color: #4A4A53; }
.lightband .crumb a:hover { color: #EF4345; }
.lightband .crumb b { font-weight: 700; color: #EF4345; }
.lightband .crumb i { width: 18px; height: 1px; background: #C4C4CC; display: inline-block; }
.lightband .phcopy { grid-column: span 7; display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.lightband .pht { margin: 0; font-family: "Anton", "Arial Narrow", Impact, sans-serif; text-transform: uppercase;
           font-size: 230px; line-height: 0.82; letter-spacing: 0.005em; color: #EF4345;
           text-shadow: 0 0 100px rgba(239,67,69,0.35); }
.lightband .pht.mid { font-size: 168px; }
.lightband .pht.sm { font-size: 128px; }
.lightband .phsub { margin: 0; font-family: "Barlow", "Rubik", "Helvetica Neue", Arial, sans-serif; font-weight: 700;
             letter-spacing: -0.022em; font-size: 54px; line-height: 1.02; color: #14141A; max-width: 18ch; }
.lightband .phl { margin: 0; font-size: 22px; line-height: 1.6; color: #3A3A42; max-width: 46ch; }
.lightband .phrow { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: center; }
.lightband .phside { grid-column: 8 / span 5; align-self: stretch; display: flex; flex-direction: column;
              justify-content: flex-end; gap: 22px; }
.lightband .phimg { position: relative; display: block; overflow: hidden; border: 1px solid #E2E2E6; border-radius: 4px;
             background: #F4F4F6; height: 520px; }
.lightband .phimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
                 filter: saturate(0.85); transform: scale(1.02); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.lightband .phimg:hover img { transform: scale(1.06); }
.lightband .phimg .pscrim { position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
                     background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 100%); }
.lightband .phimg .pcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 28px; display: flex;
                   align-items: baseline; gap: 14px; }
.lightband .phimg .pn { font-family: "Anton", Impact, sans-serif; font-size: 17px; letter-spacing: 0.08em; color: #EF4345; }
.lightband .phimg .pt { font-size: 19px; line-height: 1.35; font-weight: 600; color: #14141A; }
.lightband .phcut { position: absolute; bottom: 0; height: 620px; width: auto; z-index: 1; display: block;
             filter: drop-shadow(0 40px 60px rgba(0,0,0,0.6)); }
.lightband .phfade { position: absolute; left: -72px; right: -72px; bottom: 0; height: 240px; z-index: 2; pointer-events: none;
              background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 88%); }
.lightband .ph > .phcopy, .lightband .ph > .phside { position: relative; z-index: 3; }
.lightband /* --- scroll-scrubbed film head (the walkthrough's engine, .lightband shorter) ---- */
    .fband { position: relative; height: 2900px; margin: 0 72px; }
.lightband .fband .tstage { top: 30px; }
.lightband .fband .tcopy { width: 900px; gap: 26px; justify-content: flex-end; padding-block: 62px 70px; }
.lightband .fband .pht { font-size: 200px; }
.lightband .fband .tidx b { font-size: 96px; }
.lightband .fcaps { display: flex; flex-direction: column; gap: 12px; }
.lightband .fcap { display: flex; align-items: baseline; gap: 16px; font-size: 21px; line-height: 1.4; font-weight: 600;
            color: rgba(20,20,26,0.5); transition: color .45s ease; }
.lightband .fcap b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 20px; color: #EF4345; }
.lightband .fcap.on { color: #14141A; }
.lightband /* --- sections -------------------------------------------------------- */
    .sec { position: relative; padding: 140px 72px; }
.lightband .sec.tight { padding-top: 110px; padding-bottom: 110px; }
.lightband .sec.top0 { padding-top: 0; }
.lightband .shead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: end;
             margin-bottom: 64px; }
.lightband .shead .st { grid-column: span 6; display: flex; flex-direction: column; gap: 16px; }
.lightband .shead .sl { grid-column: 7 / span 4; margin: 0; font-size: 20px; line-height: 1.65; color: #3A3A42; }
.lightband .shead .sa { grid-column: 11 / span 2; display: flex; justify-content: flex-end; }
.lightband .h2 { margin: 0; font-family: "Barlow", "Rubik", "Helvetica Neue", Arial, sans-serif; font-weight: 700;
          letter-spacing: -0.022em; font-size: 76px; line-height: 0.98; color: #14141A; }
.lightband .h2.d { font-family: "Anton", "Arial Narrow", Impact, sans-serif; font-weight: 400; text-transform: uppercase;
            letter-spacing: 0.01em; }
.lightband .h2.m { font-size: 60px; }
.lightband /* --- reading column -------------------------------------------------- */
    .prose { max-width: 820px; display: flex; flex-direction: column; gap: 26px; }
.lightband .prose p { margin: 0; font-size: 23px; line-height: 1.72; color: #2A2A32; }
.lightband .prose p.lede { font-size: 30px; line-height: 1.5; font-weight: 600; color: #14141A; letter-spacing: -0.01em; }
.lightband .prose p.drop::first-letter { float: left; font-family: "Anton", Impact, sans-serif; font-size: 118px;
                                  line-height: 0.82; padding: 10px 18px 0px 0px; color: #EF4345; }
.lightband .prose h2, .lightband .prose h3 { margin: 22px 0 0 0; font-weight: 700; letter-spacing: -0.02em; color: #14141A; }
.lightband .prose h2 { font-size: 40px; line-height: 1.15; }
.lightband .prose h3 { font-size: 30px; line-height: 1.2; }
.lightband .prose ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.lightband .prose li { position: relative; padding-left: 34px; font-size: 22px; line-height: 1.65; color: #2A2A32; }
.lightband .prose li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 16px; height: 2px; background: #EF4345; }
.lightband .prose blockquote { margin: 6px 0; padding: 4px 0 4px 32px; border-left: 3px solid #EF4345;
                        font-size: 30px; line-height: 1.45; font-weight: 600; color: #14141A; }
.lightband .prose figure { margin: 14px 0; display: flex; flex-direction: column; gap: 14px; }
.lightband .prose figure img { width: 100%; height: auto; display: block; border: 1px solid #E2E2E6; border-radius: 4px; }
.lightband .prose figcaption { font-size: 16px; line-height: 1.5; color: #4A4A53; letter-spacing: 0.01em; }
.lightband .prose a { color: inherit; border-bottom: 1px solid #EF4345; }
.lightband .prose a:hover { color: #EF4345; }
.lightband .prose a.btn, .lightband .prose a.btn:hover { color: #FFFFFF; border-bottom: 0; }
.lightband .prose a.btn:hover { color: #FFFFFF; }
.lightband .prose a.qlink { border-bottom: 1px solid #D6D6DC; }
.lightband .prose a.vid { border-bottom: 0; }
.lightband .prose .sig { margin-top: 12px; padding-top: 28px; border-top: 1px solid #E2E2E6; font-size: 19px;
                  line-height: 1.6; color: #4A4A53; font-style: italic; }
.lightband .vid { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
           border: 1px solid #E2E2E6; border-radius: 4px; background: #F4F4F6; cursor: pointer; }
.lightband .vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
               filter: saturate(0.85); transition: transform 1s cubic-bezier(.16,1,.3,1); }
.lightband .vid:hover img { transform: scale(1.04); }
.lightband .vid .lhplay { left: 50%; top: 50%; bottom: auto; margin: -40px 0px 0px -40px; width: 80px; height: 80px; }
.lightband .vid:hover .lhplay { transform: scale(1.1); }
.lightband .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightband .vid .vcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 26px;
                 background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%);
                 font-size: 18px; font-weight: 600; color: #14141A; }
.lightband /* --- About: the story, .lightband with the stations pulled to a rail ------------- */
    .story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; }
.lightband .srail { grid-column: span 4; position: sticky; top: 40px; display: flex; flex-direction: column; gap: 28px; }
.lightband .srail .sphoto { position: relative; height: 470px; overflow: hidden; border-radius: 4px; border: 1px solid #E2E2E6; }
.lightband .srail .sphoto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.06); }
.lightband .stations { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E2E2E6; }
.lightband .stations li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; align-items: baseline;
                   padding: 15px 0; border-bottom: 1px solid #E2E2E6; font-size: 18px; line-height: 1.4; font-weight: 600;
                   color: #3A3A42; transition: color .3s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.lightband .stations li:hover { color: #14141A; transform: translateX(6px); }
.lightband .stations li b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 18px; color: #EF4345; }
.lightband .story .prose { grid-column: 6 / span 7; max-width: none; }
.lightband /* --- numbers with their figures in the markup (the home binds them in CSS) */
    .nums2 { display: grid; gap: 0; align-items: stretch; }
.lightband /* figures written in the markup; .nv is bound to CSS counters on the homepage */
    .nv2 { font-family: "Anton", Impact, sans-serif; font-size: 132px; line-height: 0.82; letter-spacing: 0.005em;
           color: #14141A; transition: color .4s ease; }
.lightband .ncell:hover .nv2 { color: #EF4345; }
.lightband .nums2.c4 { grid-template-columns: 1fr 1fr 1.3fr 0.9fr; }
.lightband .nums2.c2 { grid-template-columns: 1fr 1fr; }
.lightband /* --- testimonials: a wall, .lightband every voice with its own logo ------------- */
    .twall { columns: 3; column-gap: 24px; }
.lightband .twall.c2 { columns: 2; }
.lightband .tq { break-inside: avoid; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 22px;
          padding: 38px 36px 34px; background: #F4F4F6; border: 1px solid #E2E2E6; border-radius: 4px;
          transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease; }
.lightband .tq:hover { transform: translateY(-6px); border-color: #EF4345; }
.lightband .tq .tlogo { height: 60px; display: flex; align-items: center; }
.lightband .tq .tlogo img { max-height: 60px; max-width: 210px; width: auto; object-fit: contain; display: block;
                     filter: grayscale(1) contrast(1.05); opacity: 0.88; }
.lightband .tq .tqm { font-family: "Anton", Impact, sans-serif; font-size: 72px; line-height: 0.5; color: #EF4345; height: 30px; }
.lightband .tq p { margin: 0; font-size: 22px; line-height: 1.55; font-weight: 600; color: #14141A; }
.lightband .tq .who { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; border-top: 1px solid #E2E2E6; }
.lightband .tq .who b { font-size: 20px; font-weight: 700; color: #14141A; }
.lightband .tq .who span { font-size: 16px; line-height: 1.45; color: #4A4A53; }
.lightband .tq.red { background: #EF4345; border-color: #EF4345; }
.lightband .tq.red p, .lightband .tq.red .who b { color: #FFFFFF; }
.lightband .tq.red .who span { color: rgba(255,255,255,0.9); }
.lightband .tq.red .tqm { color: rgba(255,255,255,0.6); }
.lightband .tq.red .who { border-color: rgba(255,255,255,0.35); }
.lightband .tq.red .tlogo img { filter: brightness(0) invert(1); opacity: 1; }
.lightband .tq.red:hover { border-color: #14141A; }
.lightband /* --- people (no quote): name, .lightband role, .lightband logo ------------------------------ */
    .plist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #E2E2E6;
             border: 1px solid #E2E2E6; }
.lightband .pp { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 26px; align-items: center;
          padding: 34px 32px; background: #FFFFFF; transition: background .35s ease; }
.lightband .pp:hover { background: #F4F4F6; }
.lightband .pp .pl2 { height: 64px; display: flex; align-items: center; justify-content: center; }
.lightband .pp .pl2 img { max-width: 120px; max-height: 64px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: 0.88; }
.lightband .pp b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #14141A; }
.lightband .pp span { display: block; margin-top: 6px; font-size: 17px; line-height: 1.45; color: #4A4A53; }
.lightband /* --- awards with their certificates ----------------------------------- */
    .aw2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lightband .awc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 34px; align-items: center;
           padding: 30px; background: #F4F4F6; border: 1px solid #E2E2E6; border-radius: 4px; color: #14141A;
           transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease; }
.lightband .awc:hover { color: #14141A; transform: translateY(-6px); border-color: #EF4345; }
.lightband .awc .awi { height: 220px; overflow: hidden; border-radius: 3px; background: #0E0E10; }
.lightband .awc .awi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightband .awc .awt { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.lightband .awc .awt span.at { font-size: 26px; line-height: 1.32; font-weight: 700; letter-spacing: -0.015em; color: #14141A; }
.lightband /* --- index rows (lectures): number, .lightband title, .lightband still ----------------------- */
    .lrows { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E2E2E6; }
.lightband .lrow { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 420px; gap: 44px;
            align-items: center; padding: 40px 0; border-bottom: 1px solid #E2E2E6; }
.lightband .lrow::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 150px; height: 2px;
                    background: #EF4345; transform: scaleX(1); transform-origin: left; }
    @supports (animation-timeline: view()) {
.lightband .lrow::before { animation-name: pzcap; animation-timing-function: cubic-bezier(.2,.7,.2,1);
                      animation-fill-mode: both; animation-duration: auto;
                      animation-timeline: view(); animation-range: entry 20% cover 45%; }
    }
.lightband .lrow .ln2 { font-family: "Anton", Impact, sans-serif; font-size: 96px; line-height: 0.86; color: #EF4345;
                 transition: transform .5s cubic-bezier(.16,1,.3,1); }
.lightband .lrow .lt { margin: 0; font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; color: #14141A;
                transition: transform .5s cubic-bezier(.16,1,.3,1); }
.lightband .lrow .lim { height: 236px; overflow: hidden; border-radius: 4px; border: 1px solid #E2E2E6; }
.lightband .lrow .lim img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85);
                     transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.lightband .lrow:hover .ln2 { transform: translateX(6px); }
.lightband .lrow:hover .lt { transform: translateX(8px); }
.lightband .lrow:hover .lim img { transform: scale(1.06); }
.lightband .lrow .lmeta { display: block; margin-top: 14px; }
.lightband /* --- filter chips (press, .lightband blog) -------------------------------------- */
    .chips { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lightband .chip { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 999px;
            border: 1px solid #D6D6DC; background: transparent; color: #14141A; font: inherit; font-size: 16px;
            font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
            transition: border-color .3s ease, background .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.lightband .chip:hover { border-color: #EF4345; transform: translateY(-2px); }
.lightband .chip:active { transform: translateY(0) scale(0.98); }
.lightband .chip.on { background: #EF4345; border-color: #EF4345; color: #FFFFFF; }
.lightband .chip i { font-style: normal; font-family: "Anton", Impact, sans-serif; font-size: 15px; letter-spacing: 0.04em;
              color: #EF4345; }
.lightband .chip.on i { color: #FFFFFF; }
.lightband .fempty { display: none; padding: 64px 0; font-size: 22px; color: #4A4A53; }
.lightband .fempty.show { display: block; }
.lightband [data-item].hide { display: none; }
.lightband /* --- press cards ----------------------------------------------------- */
    .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lightband .prc { display: flex; flex-direction: column; color: #14141A; }
.lightband .prc:hover { color: #14141A; }
.lightband .prc .pri { position: relative; height: 300px; overflow: hidden; background: #0E0E10; }
.lightband .prc .pri img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85);
                    transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.lightband .prc:hover .pri img { transform: scale(1.06); }
.lightband /* an item with no picture (press, .lightband or the one Hebrew guest article) gets its section
       set as type, .lightband never a stock photo */
    .prt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
           padding: 30px 32px; background: #F4F4F6; }
.lightband .prt .prw { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: 76px;
                line-height: 0.88; color: #14141A; }
.lightband .prt .prd { width: 48px; height: 3px; background: #EF4345; }
.lightband .prc .prb { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 30px; }
.lightband .prc .prk { display: flex; gap: 14px; align-items: center; }
.lightband .prc .prh { font-size: 25px; line-height: 1.28; font-weight: 700; letter-spacing: -0.015em; color: #14141A; }
.lightband .prc .prx { font-size: 18px; line-height: 1.55; color: #4A4A53; }
.lightband /* --- writing: lead piece plus the rest -------------------------------- */
    .feat { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; color: #14141A; background: #F4F4F6;
            border: 1px solid #E2E2E6; border-radius: 4px; overflow: hidden;
            transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease; }
.lightband .feat:hover { color: #14141A; transform: translateY(-6px); border-color: #EF4345; }
.lightband .feat .fim { position: relative; min-height: 560px; overflow: hidden; }
.lightband .feat .fim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
                     filter: saturate(0.85); transition: transform 1s cubic-bezier(.16,1,.3,1); }
.lightband .feat:hover .fim img { transform: scale(1.05); }
.lightband .feat .fb { padding: 64px 60px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.lightband .feat .fh2 { margin: 0; font-size: 58px; line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; color: #14141A; }
.lightband .feat .fx { margin: 0; font-size: 22px; line-height: 1.6; color: #3A3A42; }
.lightband .agrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lightband .agrid .card { display: flex; flex-direction: column; color: #14141A; }
.lightband .agrid .card:hover { color: #14141A; }
.lightband .agrid .card .tile img { width: 100%; height: 240px; object-fit: cover; display: block; }
.lightband .agrid .card .ab { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 28px 24px; }
.lightband .agrid .card .abt { font-size: 24px; font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; color: #14141A; }
.lightband .agrid .card .abx { font-size: 17px; line-height: 1.5; color: #4A4A53; }
.lightband /* --- article page ---------------------------------------------------- */
    .ahead { margin: 0 72px; padding: 60px 0 90px 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
             gap: 40px; align-items: end; }
.lightband .ahead .ac { grid-column: span 9; display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.lightband .ahead .at1 { margin: 0; font-family: "Barlow", "Rubik", "Helvetica Neue", Arial, sans-serif; font-weight: 700;
                  letter-spacing: -0.03em; font-size: 104px; line-height: 0.98; color: #14141A; max-width: 15ch; }
.lightband .ahead .ax { margin: 0; font-size: 30px; line-height: 1.4; font-weight: 600; color: #EF4345; max-width: 40ch; }
.lightband .ahead .ameta { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 0; border-top: 1px solid #E2E2E6; }
.lightband .ahead .ameta div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid #E2E2E6;
                        font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #4A4A53; }
.lightband .ahead .ameta div b { color: #14141A; font-weight: 700; letter-spacing: 0.02em; text-transform: none; font-size: 18px; }
.lightband .ahero { margin: 0 72px; height: 760px; overflow: hidden; border-radius: 4px; border: 1px solid #E2E2E6; position: relative; }
.lightband .ahero img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9); }
.lightband .abody { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; }
.lightband .abody .aside { grid-column: span 3; position: sticky; top: 40px; display: flex; flex-direction: column; gap: 18px; }
.lightband .abody .prose { grid-column: 4 / span 7; max-width: none; }
.lightband .aprog { height: 3px; background: rgba(20,20,26,0.18); position: relative; overflow: hidden; }
.lightband .aprog i { position: absolute; inset: 0; background: #EF4345; transform: scaleX(0); transform-origin: left; }
    @supports (animation-timeline: scroll()) {
.lightband .aprog i { animation-name: aprog; animation-timing-function: linear; animation-fill-mode: both;
                 animation-duration: auto; animation-timeline: scroll(root); }
    }
    @keyframes aprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lightband /* --- contact band: the live site's own footer form -------------------- */
    .cband { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; }
.lightband .cband .cc { grid-column: span 5; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.lightband .cband .cf { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; }
.lightband .fld { display: flex; flex-direction: column; gap: 10px; }
.lightband .fld.full { grid-column: 1 / -1; }
.lightband .fld label { font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: #4A4A53; }
.lightband .fld input, .lightband .fld textarea { font: inherit; font-size: 20px; color: #14141A; background: #F4F4F6;
                                border: 1px solid #C4C4CC; border-radius: 2px; padding: 0 18px; height: 60px;
                                transition: border-color .3s ease, box-shadow .3s ease; outline: none; }
.lightband .fld textarea { height: 150px; padding: 16px 18px; resize: vertical; line-height: 1.5; }
.lightband .fld input:hover, .lightband .fld textarea:hover { border-color: #9A9AA4; }
.lightband .fld input:focus, .lightband .fld textarea:focus { border-color: #EF4345; box-shadow: 0 0 0 4px rgba(239,67,69,0.15); }
.lightband .fld .err { display: none; font-size: 16px; color: #EF4345; font-weight: 600; }
.lightband .fld.bad input, .lightband .fld.bad textarea { border-color: #EF4345; }
.lightband .fld.bad .err { display: block; }
.lightband .chk { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; font-size: 18px; color: #3A3A42; cursor: pointer; }
.lightband .chk input { width: 22px; height: 22px; accent-color: #EF4345; }
.lightband .fsend { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; }
.lightband .fsend button.btn { border: 0; cursor: pointer; font-family: inherit; }
.lightband .fsend .fok { display: none; font-size: 19px; font-weight: 600; color: #14141A; }
.lightband .fsend .fok.show { display: inline-flex; align-items: center; gap: 10px; }
.lightband .fsend .fok i { width: 10px; height: 10px; border-radius: 50%; background: #EF4345; display: inline-block; }
.lightband .clinks { display: flex; flex-direction: column; gap: 16px; }
.lightband .clinks a { display: inline-flex; align-items: center; gap: 18px; font-size: 19px; font-weight: 600; }
.lightband /* --- footer: the homepage footer, .lightband plus the site map -------------------- */
    .ifoot { padding: 0 72px; border-top: 1px solid #E2E2E6; }
.lightband .ifmap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; padding: 72px 0 56px; }
.lightband .ifmap .fbrand { grid-column: span 5; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.lightband .ifmap .fbrand img { height: 64px; width: auto; display: block; }
.lightband .ifmap .fbrand p { margin: 0; font-size: 19px; line-height: 1.6; color: #4A4A53; max-width: 36ch; }
.lightband .ifmap .fcol { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; font-size: 18px; font-weight: 600; }
.lightband .ifmap .fcol .label { margin-bottom: 6px; }
.lightband .ifmap .fcol a { color: #3A3A42; }
.lightband .ifmap .fcol a:hover { color: #EF4345; }
.lightband .ifbase { display: flex; justify-content: space-between; align-items: center; padding: 28px 0 44px;
              border-top: 1px solid #E2E2E6; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
              color: #4A4A53; font-weight: 700; }
.lightband /* --- Lighthouse (life strategy) + Pro-Bono pieces --------------------- */
    .tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
             gap: 0 40px; border-top: 1px solid #E2E2E6; }
.lightband .tools li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: baseline;
                padding: 28px 0; border-bottom: 1px solid #E2E2E6; font-size: 28px; line-height: 1.3; font-weight: 700;
                letter-spacing: -0.015em; color: #14141A; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.lightband .tools li:hover { transform: translateX(8px); }
.lightband .tools li b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 28px; color: #EF4345; }
.lightband .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lightband .duo .dc { padding: 56px 52px; background: #F4F4F6; border: 1px solid #E2E2E6; border-radius: 4px;
               display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.lightband .duo .dc p { margin: 0; font-size: 22px; line-height: 1.65; color: #2A2A32; }
.lightband .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lightband .trio .tc { display: flex; flex-direction: column; gap: 22px; }
.lightband .trio .tc .ti { height: 420px; overflow: hidden; border-radius: 4px; border: 1px solid #E2E2E6; }
.lightband .trio .tc .ti img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85);
                        transition: transform 1s cubic-bezier(.16,1,.3,1); }
.lightband .trio .tc:hover .ti img { transform: scale(1.05); }
.lightband .trio .tc p { margin: 0; font-size: 21px; line-height: 1.65; color: #2A2A32; }
.lightband .xgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.lightband .xp { display: flex; flex-direction: column; gap: 14px; color: #14141A; }
.lightband .xp:hover { color: #14141A; }
.lightband .xp .xi { position: relative; aspect-ratio: 1 / 1.1; overflow: hidden; border-radius: 4px; background: #F4F4F6;
              border: 1px solid #E2E2E6; transition: border-color .35s ease; }
.lightband .xp .xi img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05);
                  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.lightband .xp:hover .xi { border-color: #EF4345; }
.lightband .xp:hover .xi img { transform: scale(1.05); filter: grayscale(0.2); }
.lightband .xp .xi .xmono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                     font-family: "Anton", Impact, sans-serif; font-size: 96px; color: #C4C4CC; }
.lightband .xp b { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: #14141A; }
.lightband .xp span { font-size: 16px; line-height: 1.5; color: #4A4A53; }
.lightband .note { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; color: #3A3A42; }
.lightband .note i { width: 10px; height: 10px; border-radius: 50%; background: #EF4345; display: inline-block; flex: none; }
.lightband .tag { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
           border: 1px solid #D6D6DC; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
           font-weight: 700; color: #3A3A42; }
.lightband .tag.red { border-color: #EF4345; color: #EF4345; }
.lightband /* --- About hero: a real room behind him --------------------------------
       Site media 1045, .lightband one of his lecture audiences, .lightband graded to black and white.
       It sits under the orrery and the wordmark, .lightband masked away on the copy side
       (90deg) and at the top and bottom, .lightband so the type never sits on photo. A slow
       scroll drift, .lightband transform only. */
    .ahbg { position: absolute; top: -92px; bottom: 0; left: -72px; right: -72px; z-index: -2;
            overflow: hidden; pointer-events: none;
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, #000 68%),
                                linear-gradient(180deg, transparent 0%, #000 20%, #000 60%, transparent 100%);
            -webkit-mask-composite: source-in;
                    mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, #000 68%),
                                linear-gradient(180deg, transparent 0%, #000 20%, #000 60%, transparent 100%);
                    mask-composite: intersect; }
.lightband .ahbg img { position: absolute; left: 0; top: -40px; width: 100%; height: calc(100% + 80px);
                object-fit: cover; object-position: 50% 28%; opacity: 0.44; filter: brightness(0.58);
                transform: scale(1.04); }
.lightband .ahbg::after { content: ""; position: absolute; inset: 0;
                   background: radial-gradient(42% 60% at 70% 42%, rgba(239,67,69,0.18), rgba(239,67,69,0) 70%); }
.lightband [dir="rtl"] .ahbg::after { background: radial-gradient(42% 60% at 30% 42%, rgba(239,67,69,0.18), rgba(239,67,69,0) 70%); }
    @supports (animation-timeline: scroll()) {
.lightband .ahbg img { animation-name: ahbgdrift; animation-timing-function: linear; animation-fill-mode: both;
                  animation-duration: auto; animation-timeline: scroll(root); animation-range: 0 900px; }
    }
    @keyframes ahbgdrift { from { transform: translateY(0) scale(1.04); } to { transform: translateY(70px) scale(1.09); } }
.lightband /* --- Photo hero: the photograph IS the hero -------------------------------
       Used on Pro-Bono Day (site media 3056: him presenting Pro Bono Day 4). The
       photo is scaled past the frame and placed by his face (--fx/--fy in the
       photo's own pixels), .lightband so he lands on the open side of the band, .lightband clear of the
       title; the copy side is shaded so the type never sits on raw photo. */
    .pgh { position: relative; height: 880px; overflow: hidden; isolation: isolate; }
.lightband .pghimg { position: absolute; inset: 0; z-index: -2; }
.lightband .pghimg img { position: absolute; display: block; max-width: none; filter: saturate(0.9) brightness(0.92);
                  transform-origin: 65% 40%; }
    @supports (animation-timeline: scroll()) {
.lightband .pghimg img { animation-name: pghdrift; animation-timing-function: linear; animation-fill-mode: both;
                    animation-duration: auto; animation-timeline: scroll(root); animation-range: 0 880px; }
    }
    @keyframes pghdrift { from { transform: scale(1); } to { transform: scale(1.06) translateY(30px); } }
.lightband .pghshade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
                background: linear-gradient(90deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.93) 36%, rgba(255,255,255,0.55) 53%, rgba(255,255,255,0.06) 70%, rgba(255,255,255,0.12) 100%),
                            linear-gradient(0deg, #FFFFFF 0%, rgba(255,255,255,0) 34%),
                            linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 20%); }
.lightband .pghcopy { position: absolute; left: 72px; bottom: 120px; width: 940px; display: flex; flex-direction: column;
               gap: 30px; align-items: flex-start; z-index: 1; }
.lightband .pghcopy .pht { font-size: 168px; }
.lightband .pghtag { position: absolute; right: 72px; bottom: 120px; z-index: 1; display: flex; align-items: center; gap: 12px;
              font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: #14141A; }
.lightband .pghtag i { width: 10px; height: 10px; border-radius: 50%; background: #EF4345; display: inline-block; }
.lightband /* --- Video hero: a muted, .lightband looping clip as the hero -----------------------
       A local file (press-loop.mp4: 20 s of the press reel, .lightband cropped above its
       burned-in subtitles, .lightband crossfaded at the loop point), .lightband so it plays offline and
       in the single-file build. Cover-fitted and anchored to his side of the frame;
       the copy side is shaded like the photo heroes. */
    .pghvid { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #FFFFFF; }
.lightband .pghvid video { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
                    object-fit: cover; object-position: 0% 0%; }
.lightband .pghvid .vtag { position: absolute; right: 72px; top: 30px; display: inline-flex; align-items: center; gap: 10px;
                    font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: #14141A;
                    opacity: 0; transition: opacity .6s ease; }
.lightband .pghvid.on .vtag { opacity: 1; }
.lightband .pghvid .vtag i { width: 10px; height: 10px; border-radius: 50%; background: #EF4345; display: inline-block; }

    @media (prefers-reduced-motion: reduce) {
.lightband .lrow::before { animation: none; transform: scaleX(1); }
.lightband .aprog i { animation: none; }
.lightband .ahbg img { animation: none; }
.lightband .pghimg img { animation: none; }
    }


@media (max-width: 899px) {

  
  html { -webkit-text-size-adjust: 100%; }
  html.mlock { overflow: hidden; }
  body { display: block !important; min-height: 0 !important; }
  #fit { zoom: 1 !important; width: 100% !important; }
  #fit > div { width: 100% !important; min-width: 0 !important; overflow-x: clip !important; }

  
  #fit [style*="padding: 0 72px"], #fit [style*="padding: 120px 72px"], #fit [style*="padding: 32px 72px"] {
    padding-left: 20px !important; padding-right: 20px !important; }
  #fit [style*="padding: 120px 72px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  #fit [style*="72px 120px 72px"] { padding-bottom: 72px !important; }
  #fit [style*="margin: 0 72px"] { margin-left: 20px !important; margin-right: 20px !important; }

  
  #fit [style*="grid-template-columns: repeat(12"], #fit [style*="grid-template-columns: repeat(4"],
  #fit [style*="grid-template-columns: repeat(3"] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  #fit [style*="grid-column"] { grid-column: auto !important; }
  #fit [style*="position: sticky"] { position: relative !important; top: auto !important; }

  
  #fit h2.display, #fit h2.headline { font-size: 42px !important; line-height: 1 !important; }
  #fit .lead { font-size: 22px !important; }
  .label { font-size: 13px; }
  .btn { height: 50px; padding: 0 22px; font-size: 14px; }
  .qlink { font-size: 14px; padding: 11px 16px; }
  .link { font-size: 14px; }
  .nb { width: 38px; height: 38px; font-size: 17px; }
  .ic { width: 44px; height: 44px; }
  .ic svg { width: 19px; height: 19px; }

  
  .ibar, [data-m="top"] { height: 68px !important; padding: 0 20px !important; gap: 12px; }
  .ibar.a4, [data-m="top"] > .a4 { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ibrand img, [data-m="top"] > div:first-child img { height: 36px !important; }
  .ibrand .label, [data-m="top"] > div:first-child .label { display: none !important; }
  .iside { gap: 10px; margin-left: auto; }
  .iside .avail, [data-m="top"] > div:nth-child(3) > span { display: none !important; }
  [data-m="top"] > div:nth-child(3) { margin-left: auto; }
  .ibar .btn, [data-m="top"] .btn { height: 40px !important; padding: 0 14px !important; font-size: 13px !important; gap: 8px !important; }
  .mtog { display: inline-flex !important; position: relative; z-index: 45; flex: none; width: 44px; height: 44px;
          align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 0;
          border: 1px solid #3A3A3E; border-radius: 50%; background: transparent; cursor: pointer; }
  .mtog i { display: block; width: 18px; height: 2px; background: #F2EFEA; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .mopen .mtog i:first-child { transform: translateY(4.5px) rotate(45deg); }
  .mopen .mtog i:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .ibar.mopen, [data-m="top"].mopen { z-index: 100 !important; }
  .mopen .ibrand, .mopen .iside, .mopen > div:first-child, .mopen > div:nth-child(3) { position: relative; z-index: 45; }
  .inav, .hnav { position: fixed !important; inset: 0; z-index: 40; display: flex !important; flex-direction: column;
                 align-items: flex-start !important; justify-content: center; gap: 4px !important; padding: 90px 28px 48px;
                 background: #0B0B0C; font-size: 30px !important; letter-spacing: 0.02em !important;
                 opacity: 0; visibility: hidden; transform: translateY(-12px);
                 transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s; }
  .inav a, .hnav a { padding: 8px 0 !important; color: #F2EFEA; }
  .inav .lang, .hnav .muted { margin-top: 22px; font-size: 18px; color: #B3ACA2 !important; }
  .mopen .inav, .mopen .hnav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

  
  .ph { margin: 0 20px; min-height: 0 !important; display: flex !important; flex-direction: column; align-items: stretch !important;
        gap: 28px; padding: 36px 0 64px 0; }
  .phcopy { gap: 20px; }
  
  .pht { font-size: min(var(--pmax, 92px), calc((100vw - 40px) / (var(--chars, 5) * var(--cw, 0.56)))) !important; }
  .fband .pht { --pmax: 80px; }
  .pghcopy .pht { --pmax: 88px; }
  .phsub { font-size: 28px; }
  .phl { font-size: 17px !important; }
  .phrow { gap: 12px 14px; }
  .phimg { height: 300px !important; }
  .crumb { font-size: 12px; gap: 9px; flex-wrap: wrap; }
  .crumb i { width: 12px; }
  .orr .orrf { transform: scale(0.55); }
  
  .phcut { position: relative !important; left: auto !important; right: auto !important; height: 380px !important;
           align-self: center; margin: 0 auto -64px; }
  .phfade { left: -20px; right: -20px; height: 160px; }

  
  [data-m="hero"] { height: auto !important; padding-top: 392px; display: flex; flex-direction: column; }
  [data-m="hero"] > .aword { top: 18px !important; left: -20px !important; right: -20px !important;
                             font-size: 104px !important; white-space: nowrap; }
  [data-m="hero"] > .aword[data-mark] { font-size: 72px !important; top: 34px !important; }
  [data-m="hero"] > img.aport { left: 0 !important; right: 0 !important; margin: 0 auto !important; top: 52px !important;
                                bottom: auto !important; height: 360px !important; width: auto !important; }
  [data-m="hero"] > div[style*="linear-gradient"] { top: 252px !important; bottom: auto !important; height: 160px !important; }
  [data-m="hero"] > div[style*="flex-direction: column"] { position: relative !important; top: auto !important; left: auto !important;
                                                           right: auto !important; width: auto !important; gap: 18px !important; }
  [data-m="hero"] h1 { gap: 14px !important; }
  [data-m="hero"] .headline { font-size: 34px !important; line-height: 1.02 !important; }
  [data-m="hero"] p { font-size: 16px !important; }
  [data-m="hero"] > .a3 { position: relative !important; top: auto !important; left: auto !important; right: auto !important;
                          margin-top: 26px; gap: 12px !important; }
  [data-m="hero"] .orr .orrf { left: 50% !important; top: 220px !important; }
  .ahbg { left: -20px; right: -20px; top: -68px; height: 470px;
          -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 55%, transparent 100%);
                  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 55%, transparent 100%); }

  
  .pgh { height: auto; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; }
  .pghimg img { left: 0 !important; right: auto !important; top: 0 !important; width: 100% !important; height: 100% !important;
                object-fit: cover; object-position: var(--mx, 50%) 30%; transform-origin: 50% 30%; }
  .pghvid video { object-position: var(--mx, 54%) 0% !important; }
  .pghshade { background: linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0) 22%, rgba(11,11,12,0.1) 42%,
                                          rgba(11,11,12,0.86) 66%, #0B0B0C 88%) !important; }
  .pghcopy { position: relative; left: auto; right: auto; bottom: auto; width: auto; padding: 0 20px 52px; gap: 18px; }
  .pghvid .vtag { right: 20px; top: 84px; font-size: 12px; }

  
  .tour { height: 3600px; margin: 0; }
  .tour .tstage { top: 0; height: 100vh; height: 100svh; border-radius: 0; }
  .tgrade { background: linear-gradient(180deg, rgba(11,11,12,0.5) 0%, rgba(11,11,12,0) 18%) !important; }
  .tour .tcopy { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: auto !important;
                 padding: 140px 20px 26px !important; gap: 16px !important; justify-content: flex-end;
                 background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,0.86) 22%, #0B0B0C 62%); }
  .ttitle { font-size: 34px; }
  .tlist { gap: 4px; }
  .trow { grid-template-columns: 28px minmax(0, 1fr) 34px; gap: 10px; padding: 9px 12px; }
  .trn { font-size: 16px; } .trt { font-size: 17px; } .trd { font-size: 14px; line-height: 1.45; }
  .tra { width: 34px; height: 34px; }
  .tfoot { gap: 16px; flex-wrap: wrap; }
  .tbar { width: 28px; }
  .tidx { top: 84px; right: 20px; gap: 10px; }
  .tidx b, .fband .tidx b { font-size: 44px; }
  .tidx .tof { font-size: 16px; }

  
  .fband { height: auto; margin: 0; }
  .fband .tstage { position: relative; top: auto; height: auto; overflow: visible; border-radius: 0; border: 0; }
  .fband .tfilm { position: relative; inset: auto; height: 56vh; height: 56svh; min-height: 380px; overflow: hidden; }
  .fband .tfilm::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
                         background: linear-gradient(180deg, rgba(11,11,12,0) 0%, #0B0B0C 100%); }
  .fband .tgrade { display: none; }
  .fband .tidx { top: 20px; }
  .fband .tcopy { position: relative !important; inset: auto !important; width: auto !important; margin-top: -84px;
                  padding: 0 20px 64px !important; gap: 18px !important; background: none; z-index: 1; }
  .fband .phsub { font-size: 24px; }
  .fband .phl { font-size: 16px !important; }
  .fcaps { gap: 8px; }
  .fcap { font-size: 16px; gap: 10px; } .fcap b { font-size: 16px; }

  
  .sec { padding: 64px 20px; }
  .sec.tight { padding-top: 56px; padding-bottom: 56px; }
  .sec.top0 { padding-top: 0; }
  .shead { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
  .shead .st { gap: 12px; }
  .shead .sl { font-size: 16px; }
  .shead .sa { justify-content: flex-start; }
  .h2 { font-size: 40px; }
  .h2.m { font-size: 32px !important; }
  .h2.d { font-size: 48px; }
  .h2.d.m { font-size: 38px !important; }

  
  .prose { gap: 20px; }
  .prose p { font-size: 18px; line-height: 1.7; }
  .prose p.lede { font-size: 21px; line-height: 1.5; }
  .prose p.drop::first-letter { font-size: 66px; padding: 6px 12px 0px 0px; }
  .prose h2 { font-size: 28px; } .prose h3 { font-size: 23px; }
  .prose li { font-size: 17px; padding-left: 26px; }
  .prose li::before { width: 12px; }
  .prose blockquote { font-size: 21px; padding-left: 18px; }
  .prose .sig { font-size: 16px; }
  .vid .lhplay { width: 60px; height: 60px; margin: -30px 0px 0px -30px; }
  .vid .vcap { font-size: 15px; padding: 14px 16px; }
  .story { display: flex; flex-direction: column; gap: 36px; }
  .srail { position: relative; top: auto; gap: 22px; }
  .srail .sphoto { height: 320px !important; }
  .stations li { font-size: 16px; padding: 12px 0; }

  
  .nums, .nums2, .nums2.c4, .nums2.c2 { display: grid !important; grid-template-columns: 1fr 1fr !important; row-gap: 34px !important; }
  #fit .nv, #fit .nv2 { font-size: 64px !important; }
  .ncell { padding: 18px 0px 0px 16px !important; gap: 12px; }
  .ncell:nth-child(odd) { padding-left: 0 !important; }
  .ncell:nth-child(odd)::before { display: none; }
  .nl { font-size: 15px; min-height: 2.9em; }

  
  .twall, .twall.c2 { columns: auto; display: flex; gap: 14px; align-items: stretch; overflow-x: auto; scrollbar-width: none;
                      scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 0 -20px; padding: 0 20px 8px; }
  .twall::-webkit-scrollbar { display: none; }
  .tq { flex: 0 0 84%; margin: 0; scroll-snap-align: start; padding: 28px 22px 26px; gap: 16px; }
  .tq .tqm { font-size: 56px; }
  .tq p { font-size: 18px; }
  .tq .who b { font-size: 17px; } .tq .who span { font-size: 14px; }
  .tq .tlogo { height: 46px; } .tq .tlogo img { max-height: 46px; max-width: 170px; }
  .plist { grid-template-columns: minmax(0, 1fr); }
  .pp { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; padding: 22px 18px; }
  .aw2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .awc { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .awc .awi { height: 220px; }
  .awc .awt span.at { font-size: 20px; }

  
  .lrow { grid-template-columns: 52px minmax(0, 1fr); gap: 14px 16px; padding: 26px 0; }
  .lrow::before { width: 52px; }
  .lrow .ln2 { font-size: 40px; }
  .lrow .lt { font-size: 22px; }
  .lrow .lim { grid-column: 1 / -1; height: 200px; }

  
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -20px !important; margin-right: -20px !important;
           padding: 0 20px 4px; margin-bottom: 28px !important; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; height: 42px; padding: 0 16px; font-size: 13px; }

  
  .pgrid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .prc .pri { height: 220px; }
  .prt { padding: 22px 22px; }
  .prt .prw { font-size: 52px; }
  .prc .prb { padding: 18px 18px 24px; }
  .prc .prh { font-size: 21px; }
  .prc .prx { font-size: 15px; }
  .feat { grid-template-columns: minmax(0, 1fr); }
  .feat .fim { min-height: 250px; }
  .feat .fb { padding: 26px 22px 30px; gap: 16px; }
  .feat .fh2 { font-size: 30px; }
  .feat .fx { font-size: 16px; }
  .feat .prw { font-size: 72px !important; }
  .agrid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px; }
  .agrid .card .tile img { height: 220px; }
  .agrid .card .ab { padding: 18px 18px 22px; }
  .agrid .card .abt { font-size: 21px; }
  .agrid .card .abx { font-size: 15px; }

  
  .ahead { margin: 0 20px; padding: 28px 0 40px; display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .ahead .ac { gap: 20px; }
  .ahead .at1 { font-size: 42px; line-height: 1.02; }
  .ahead .ax { font-size: 20px; }
  .ahead .ameta div { font-size: 12px; padding: 12px 0; }
  .ahead .ameta div b { font-size: 15px; }
  .ahero { margin: 0 20px; height: 250px; }
  .abody { display: flex; flex-direction: column; gap: 26px; }
  .abody .aside { position: relative; top: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
  
  .aprog { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; }

  
  .cband { display: flex; flex-direction: column; gap: 36px; }
  .cband .cc { gap: 20px; }
  .cband .cf { grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; }
  .fld label { font-size: 13px; }
  .fld input, .fld textarea { font-size: 17px; height: 54px; }
  .fld textarea { height: 130px; }
  .chk { font-size: 15px; align-items: flex-start; }
  .fsend { flex-wrap: wrap; gap: 14px; }
  .clinks a { font-size: 16px; gap: 14px; }
  .note { font-size: 15px; }

  
  .ifoot { padding: 0 20px; }
  .ifmap { display: flex; flex-direction: column; gap: 36px; padding: 52px 0 40px; }
  .ifmap .fbrand img { height: 48px; }
  .ifmap .fbrand p { font-size: 16px; }
  .ifmap .fcol { font-size: 16px; gap: 12px; }
  .ifbase { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12px; padding: 22px 0 36px; }

  
  .tools { grid-template-columns: minmax(0, 1fr); }
  .tools li { grid-template-columns: 44px minmax(0, 1fr); font-size: 20px; padding: 20px 0; }
  .tools li b { font-size: 20px; }
  .duo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .duo .dc { padding: 30px 22px; gap: 16px; }
  .duo .dc p { font-size: 17px; }
  .duo .dc .h2, .duo .dc h3 { font-size: 30px !important; }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .trio .tc .ti { height: 280px; }
  .trio .tc p { font-size: 17px; }
  .xgrid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .xp b { font-size: 17px; } .xp span { font-size: 14px; }
  .xp .xi .xmono { font-size: 64px; }
  .tag { height: 30px; font-size: 12px; padding: 0 12px; }

  
  .pz { padding: 64px 20px; }
  .pzhead { gap: 12px; }
  .pzr { grid-template-columns: auto minmax(0, 1fr) !important; gap: 12px 18px !important; padding: 30px 0 !important; align-items: center; }
  .pzr::before { width: 56px; }
  .pzn { font-size: 52px; }
  .pzi { width: 60px; height: 60px; justify-self: end; }
  .pzi svg { width: 44px; height: 44px; }
  #fit .pzt { grid-column: 1 / -1; font-size: 28px !important; }
  #fit .pzb { grid-column: 1 / -1; font-size: 17px !important; max-width: none !important; }

  
  
  [data-m="strip"] > div:first-child { flex-direction: column; align-items: flex-start !important; gap: 10px !important; margin-bottom: 26px !important; }
  [data-m="strip"] > div:nth-child(2), [data-m="writing"] > div:nth-child(2) {
    display: flex !important; gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -20px; padding: 0 20px 6px; scroll-padding: 0 20px; }
  [data-m="strip"] > div:nth-child(2)::-webkit-scrollbar, [data-m="writing"] > div:nth-child(2)::-webkit-scrollbar { display: none; }
  [data-m="strip"] .pcard, [data-m="writing"] .card { flex: 0 0 82%; scroll-snap-align: start; }
  [data-m="strip"] .pcard img { height: 300px !important; }
  .pcard .pcap { padding: 18px 18px; } .pcard .pt { font-size: 16px; }
  [data-m="writing"] { gap: 30px !important; }
  [data-m="writing"] > div:first-child { gap: 16px !important; }
  [data-m="writing"] > div:first-child p { font-size: 16px !important; }
  [data-m="writing"] .card img { height: 200px !important; }
  [data-m="writing"] .card > div:last-child { padding: 18px 18px 22px !important; }
  [data-m="writing"] .card > div:last-child > span:first-child { font-size: 20px !important; }

  
  [data-m="faq"] .q { padding: 22px 0 !important; }
  [data-m="faq"] .q > div:first-child { grid-template-columns: 38px minmax(0, 1fr) 38px !important; gap: 14px !important; }
  [data-m="faq"] .qt { font-size: 19px !important; }
  [data-m="faq"] .plus { width: 38px !important; height: 38px !important; }
  [data-m="faq"] .ans [style*="padding"] { padding: 14px 0px 2px 52px !important; }
  [data-m="faq"] .ans p, [data-m="faq"] .ans span { font-size: 16px !important; }

  
  .lhs { padding: 64px 20px; gap: 30px; }
  .lhshead { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lhstitle { font-size: 46px; }
  .lhslede { font-size: 16px; }
  .lhgrid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lhfim { height: 220px; }
  .lhplay { width: 54px; height: 54px; left: 18px; bottom: 18px; }
  .lhfbody { padding: 20px 18px 24px; }
  .lhft { font-size: 21px; }
  .lhep { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .lhepim { height: 78px; }
  .lhepc { padding: 8px 0; gap: 4px; }
  .lhept { font-size: 16px; }
  .lhmeta { font-size: 13px; }

  
  .clients { padding: 64px 20px; gap: 34px; }
  .cwall { grid-template-columns: 1fr 1fr; }
  .cw { height: 104px; padding: 0 20px; }
  .cw img { height: 52px; }
  .cpress .track { font-size: 18px; gap: 34px; }
  .cquote { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 32px 22px; }
  .cqm { font-size: 96px; line-height: 0.6; height: 44px; }
  .cqt { font-size: 22px; }
  .cqn { font-size: 21px; } .cqr { font-size: 15px; }

  
  .pb { grid-template-columns: minmax(0, 1fr); }
  .pbcopy { padding: 32px 22px; gap: 18px; }
  .pbcopy p { font-size: 18px !important; }
  .pbn { font-size: 56px; } .pbl { font-size: 15px; }
  .pbimg { min-height: 250px; }
  .nlbar { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 22px; }
  .nlbar > p { font-size: 18px !important; }
  .nlbar > div { flex-direction: column; align-items: stretch !important; }
  .nlbar .field { width: auto !important; }
  [data-m="awards"], [data-m="numbers"] { padding-top: 64px !important; }
  [data-m="writing"] { padding-top: 56px !important; }
  .awd { gap: 16px; padding: 18px 0; }
  .awd .at { font-size: 17px; }
  .hum { height: 380px; }
  .hcopy { left: 22px; right: 22px; bottom: 24px; gap: 10px; }
  .hw { font-size: 84px; } .hs { font-size: 17px; }
  [data-m="closing"] p { font-size: 17px !important; }
  [data-m="closing"] a[style*="font-size"] { font-size: 16px !important; }
  [data-m="closing"] img { height: 280px !important; }
  [data-m="footer"] { flex-direction: column; align-items: flex-start !important; gap: 22px; padding: 34px 20px 40px !important;
                      font-size: 12px !important; }
  [data-m="footer"] > div:first-child { flex-wrap: wrap; gap: 8px 14px !important; }
  [data-m="footer"] > div:nth-child(2) { flex-wrap: wrap; gap: 10px 18px !important; }
  [data-m="footer"] img { height: 36px !important; }
}


.mtog { display: none; }



@media (max-width: 899px) {
.lightband html.mlock { overflow: hidden; }
.lightband { display: block !important; min-height: 0 !important; }
.lightband #fit { zoom: 1 !important; width: 100% !important; }
.lightband #fit > div { width: 100% !important; min-width: 0 !important; overflow-x: clip !important; }
.lightband #fit [style*="padding: 0 72px"], .lightband #fit [style*="padding: 120px 72px"], .lightband #fit [style*="padding: 32px 72px"] {
    padding-left: 20px !important; padding-right: 20px !important; }
.lightband #fit [style*="padding: 120px 72px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
.lightband #fit [style*="72px 120px 72px"] { padding-bottom: 72px !important; }
.lightband #fit [style*="margin: 0 72px"] { margin-left: 20px !important; margin-right: 20px !important; }
.lightband #fit [style*="grid-template-columns: repeat(12"], .lightband #fit [style*="grid-template-columns: repeat(4"], .lightband #fit [style*="grid-template-columns: repeat(3"] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
.lightband #fit [style*="grid-column"] { grid-column: auto !important; }
.lightband #fit [style*="position: sticky"] { position: relative !important; top: auto !important; }
.lightband #fit h2.display, .lightband #fit h2.headline { font-size: 42px !important; line-height: 1 !important; }
.lightband #fit .lead { font-size: 22px !important; }
.lightband .label { font-size: 13px; }
.lightband .btn { height: 50px; padding: 0 22px; font-size: 14px; }
.lightband .qlink { font-size: 14px; padding: 11px 16px; }
.lightband .link { font-size: 14px; }
.lightband .nb { width: 38px; height: 38px; font-size: 17px; }
.lightband .ic { width: 44px; height: 44px; }
.lightband .ic svg { width: 19px; height: 19px; }
.lightband .ibar, .lightband [data-m="top"] { height: 68px !important; padding: 0 20px !important; gap: 12px; }
.lightband .ibar.a4, .lightband [data-m="top"] > .a4 { animation: none !important; opacity: 1 !important; transform: none !important; }
.lightband .ibrand img, .lightband [data-m="top"] > div:first-child img { height: 36px !important; }
.lightband .ibrand .label, .lightband [data-m="top"] > div:first-child .label { display: none !important; }
.lightband .iside { gap: 10px; margin-left: auto; }
.lightband .iside .avail, .lightband [data-m="top"] > div:nth-child(3) > span { display: none !important; }
.lightband [data-m="top"] > div:nth-child(3) { margin-left: auto; }
.lightband .ibar .btn, .lightband [data-m="top"] .btn { height: 40px !important; padding: 0 14px !important; font-size: 13px !important; gap: 8px !important; }
.lightband .mtog { display: inline-flex !important; position: relative; z-index: 45; flex: none; width: 44px; height: 44px;
          align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 0;
          border: 1px solid #C4C4CC; border-radius: 50%; background: transparent; cursor: pointer; }
.lightband .mtog i { display: block; width: 18px; height: 2px; background: #14141A; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.lightband .mopen .mtog i:first-child { transform: translateY(4.5px) rotate(45deg); }
.lightband .mopen .mtog i:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.lightband .ibar.mopen, .lightband [data-m="top"].mopen { z-index: 100 !important; }
.lightband .mopen .ibrand, .lightband .mopen .iside, .lightband .mopen > div:first-child, .lightband .mopen > div:nth-child(3) { position: relative; z-index: 45; }
.lightband .inav, .lightband .hnav { position: fixed !important; inset: 0; z-index: 40; display: flex !important; flex-direction: column;
                 align-items: flex-start !important; justify-content: center; gap: 4px !important; padding: 90px 28px 48px;
                 background: #FFFFFF; font-size: 30px !important; letter-spacing: 0.02em !important;
                 opacity: 0; visibility: hidden; transform: translateY(-12px);
                 transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s; }
.lightband .inav a, .lightband .hnav a { padding: 8px 0 !important; color: #14141A; }
.lightband .inav .lang, .lightband .hnav .muted { margin-top: 22px; font-size: 18px; color: #4A4A53 !important; }
.lightband .mopen .inav, .lightband .mopen .hnav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lightband .ph { margin: 0 20px; min-height: 0 !important; display: flex !important; flex-direction: column; align-items: stretch !important;
        gap: 28px; padding: 36px 0 64px 0; }
.lightband .phcopy { gap: 20px; }
.lightband .pht { font-size: min(var(--pmax, 92px), calc((100vw - 40px) / (var(--chars, 5) * var(--cw, 0.56)))) !important; }
.lightband .fband .pht { --pmax: 80px; }
.lightband .pghcopy .pht { --pmax: 88px; }
.lightband .phsub { font-size: 28px; }
.lightband .phl { font-size: 17px !important; }
.lightband .phrow { gap: 12px 14px; }
.lightband .phimg { height: 300px !important; }
.lightband .crumb { font-size: 12px; gap: 9px; flex-wrap: wrap; }
.lightband .crumb i { width: 12px; }
.lightband .orr .orrf { transform: scale(0.55); }
.lightband .phcut { position: relative !important; left: auto !important; right: auto !important; height: 380px !important;
           align-self: center; margin: 0 auto -64px; }
.lightband .phfade { left: -20px; right: -20px; height: 160px; }
.lightband [data-m="hero"] { height: auto !important; padding-top: 392px; display: flex; flex-direction: column; }
.lightband [data-m="hero"] > .aword { top: 18px !important; left: -20px !important; right: -20px !important;
                             font-size: 104px !important; white-space: nowrap; }
.lightband [data-m="hero"] > .aword[data-mark] { font-size: 72px !important; top: 34px !important; }
.lightband [data-m="hero"] > img.aport { left: 0 !important; right: 0 !important; margin: 0 auto !important; top: 52px !important;
                                bottom: auto !important; height: 360px !important; width: auto !important; }
.lightband [data-m="hero"] > div[style*="linear-gradient"] { top: 252px !important; bottom: auto !important; height: 160px !important; }
.lightband [data-m="hero"] > div[style*="flex-direction: column"] { position: relative !important; top: auto !important; left: auto !important;
                                                           right: auto !important; width: auto !important; gap: 18px !important; }
.lightband [data-m="hero"] h1 { gap: 14px !important; }
.lightband [data-m="hero"] .headline { font-size: 34px !important; line-height: 1.02 !important; }
.lightband [data-m="hero"] p { font-size: 16px !important; }
.lightband [data-m="hero"] > .a3 { position: relative !important; top: auto !important; left: auto !important; right: auto !important;
                          margin-top: 26px; gap: 12px !important; }
.lightband [data-m="hero"] .orr .orrf { left: 50% !important; top: 220px !important; }
.lightband .ahbg { left: -20px; right: -20px; top: -68px; height: 470px;
          -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 55%, transparent 100%);
                  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 55%, transparent 100%); }
.lightband .pgh { height: auto; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; }
.lightband .pghimg img { left: 0 !important; right: auto !important; top: 0 !important; width: 100% !important; height: 100% !important;
                object-fit: cover; object-position: var(--mx, 50%) 30%; transform-origin: 50% 30%; }
.lightband .pghvid video { object-position: var(--mx, 54%) 0% !important; }
.lightband .pghshade { background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0.1) 42%,
                                          rgba(255,255,255,0.86) 66%, #FFFFFF 88%) !important; }
.lightband .pghcopy { position: relative; left: auto; right: auto; bottom: auto; width: auto; padding: 0 20px 52px; gap: 18px; }
.lightband .pghvid .vtag { right: 20px; top: 84px; font-size: 12px; }
.lightband .tour { height: 3600px; margin: 0; }
.lightband .tour .tstage { top: 0; height: 100vh; height: 100svh; border-radius: 0; }
.lightband .tgrade { background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 18%) !important; }
.lightband .tour .tcopy { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: auto !important;
                 padding: 140px 20px 26px !important; gap: 16px !important; justify-content: flex-end;
                 background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.86) 22%, #FFFFFF 62%); }
.lightband .ttitle { font-size: 34px; }
.lightband .tlist { gap: 4px; }
.lightband .trow { grid-template-columns: 28px minmax(0, 1fr) 34px; gap: 10px; padding: 9px 12px; }
.lightband .trn { font-size: 16px; }
.lightband .trt { font-size: 17px; }
.lightband .trd { font-size: 14px; line-height: 1.45; }
.lightband .tra { width: 34px; height: 34px; }
.lightband .tfoot { gap: 16px; flex-wrap: wrap; }
.lightband .tbar { width: 28px; }
.lightband .tidx { top: 84px; right: 20px; gap: 10px; }
.lightband .tidx b, .lightband .fband .tidx b { font-size: 44px; }
.lightband .tidx .tof { font-size: 16px; }
.lightband .fband { height: auto; margin: 0; }
.lightband .fband .tstage { position: relative; top: auto; height: auto; overflow: visible; border-radius: 0; border: 0; }
.lightband .fband .tfilm { position: relative; inset: auto; height: 56vh; height: 56svh; min-height: 380px; overflow: hidden; }
.lightband .fband .tfilm::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
                         background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%); }
.lightband .fband .tgrade { display: none; }
.lightband .fband .tidx { top: 20px; }
.lightband .fband .tcopy { position: relative !important; inset: auto !important; width: auto !important; margin-top: -84px;
                  padding: 0 20px 64px !important; gap: 18px !important; background: none; z-index: 1; }
.lightband .fband .phsub { font-size: 24px; }
.lightband .fband .phl { font-size: 16px !important; }
.lightband .fcaps { gap: 8px; }
.lightband .fcap { font-size: 16px; gap: 10px; }
.lightband .fcap b { font-size: 16px; }
.lightband .sec { padding: 64px 20px; }
.lightband .sec.tight { padding-top: 56px; padding-bottom: 56px; }
.lightband .sec.top0 { padding-top: 0; }
.lightband .shead { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
.lightband .shead .st { gap: 12px; }
.lightband .shead .sl { font-size: 16px; }
.lightband .shead .sa { justify-content: flex-start; }
.lightband .h2 { font-size: 40px; }
.lightband .h2.m { font-size: 32px !important; }
.lightband .h2.d { font-size: 48px; }
.lightband .h2.d.m { font-size: 38px !important; }
.lightband .prose { gap: 20px; }
.lightband .prose p { font-size: 18px; line-height: 1.7; }
.lightband .prose p.lede { font-size: 21px; line-height: 1.5; }
.lightband .prose p.drop::first-letter { font-size: 66px; padding: 6px 12px 0px 0px; }
.lightband .prose h2 { font-size: 28px; }
.lightband .prose h3 { font-size: 23px; }
.lightband .prose li { font-size: 17px; padding-left: 26px; }
.lightband .prose li::before { width: 12px; }
.lightband .prose blockquote { font-size: 21px; padding-left: 18px; }
.lightband .prose .sig { font-size: 16px; }
.lightband .vid .lhplay { width: 60px; height: 60px; margin: -30px 0px 0px -30px; }
.lightband .vid .vcap { font-size: 15px; padding: 14px 16px; }
.lightband .story { display: flex; flex-direction: column; gap: 36px; }
.lightband .srail { position: relative; top: auto; gap: 22px; }
.lightband .srail .sphoto { height: 320px !important; }
.lightband .stations li { font-size: 16px; padding: 12px 0; }
.lightband .nums, .lightband .nums2, .lightband .nums2.c4, .lightband .nums2.c2 { display: grid !important; grid-template-columns: 1fr 1fr !important; row-gap: 34px !important; }
.lightband #fit .nv, .lightband #fit .nv2 { font-size: 64px !important; }
.lightband .ncell { padding: 18px 0px 0px 16px !important; gap: 12px; }
.lightband .ncell:nth-child(odd) { padding-left: 0 !important; }
.lightband .ncell:nth-child(odd)::before { display: none; }
.lightband .nl { font-size: 15px; min-height: 2.9em; }
.lightband .twall, .lightband .twall.c2 { columns: auto; display: flex; gap: 14px; align-items: stretch; overflow-x: auto; scrollbar-width: none;
                      scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 0 -20px; padding: 0 20px 8px; }
.lightband .twall::-webkit-scrollbar { display: none; }
.lightband .tq { flex: 0 0 84%; margin: 0; scroll-snap-align: start; padding: 28px 22px 26px; gap: 16px; }
.lightband .tq .tqm { font-size: 56px; }
.lightband .tq p { font-size: 18px; }
.lightband .tq .who b { font-size: 17px; }
.lightband .tq .who span { font-size: 14px; }
.lightband .tq .tlogo { height: 46px; }
.lightband .tq .tlogo img { max-height: 46px; max-width: 170px; }
.lightband .plist { grid-template-columns: minmax(0, 1fr); }
.lightband .pp { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; padding: 22px 18px; }
.lightband .aw2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lightband .awc { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
.lightband .awc .awi { height: 220px; }
.lightband .awc .awt span.at { font-size: 20px; }
.lightband .lrow { grid-template-columns: 52px minmax(0, 1fr); gap: 14px 16px; padding: 26px 0; }
.lightband .lrow::before { width: 52px; }
.lightband .lrow .ln2 { font-size: 40px; }
.lightband .lrow .lt { font-size: 22px; }
.lightband .lrow .lim { grid-column: 1 / -1; height: 200px; }
.lightband .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -20px !important; margin-right: -20px !important;
           padding: 0 20px 4px; margin-bottom: 28px !important; }
.lightband .chips::-webkit-scrollbar { display: none; }
.lightband .chip { flex: none; height: 42px; padding: 0 16px; font-size: 13px; }
.lightband .pgrid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.lightband .prc .pri { height: 220px; }
.lightband .prt { padding: 22px 22px; }
.lightband .prt .prw { font-size: 52px; }
.lightband .prc .prb { padding: 18px 18px 24px; }
.lightband .prc .prh { font-size: 21px; }
.lightband .prc .prx { font-size: 15px; }
.lightband .feat { grid-template-columns: minmax(0, 1fr); }
.lightband .feat .fim { min-height: 250px; }
.lightband .feat .fb { padding: 26px 22px 30px; gap: 16px; }
.lightband .feat .fh2 { font-size: 30px; }
.lightband .feat .fx { font-size: 16px; }
.lightband .feat .prw { font-size: 72px !important; }
.lightband .agrid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px; }
.lightband .agrid .card .tile img { height: 220px; }
.lightband .agrid .card .ab { padding: 18px 18px 22px; }
.lightband .agrid .card .abt { font-size: 21px; }
.lightband .agrid .card .abx { font-size: 15px; }
.lightband .ahead { margin: 0 20px; padding: 28px 0 40px; display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
.lightband .ahead .ac { gap: 20px; }
.lightband .ahead .at1 { font-size: 42px; line-height: 1.02; }
.lightband .ahead .ax { font-size: 20px; }
.lightband .ahead .ameta div { font-size: 12px; padding: 12px 0; }
.lightband .ahead .ameta div b { font-size: 15px; }
.lightband .ahero { margin: 0 20px; height: 250px; }
.lightband .abody { display: flex; flex-direction: column; gap: 26px; }
.lightband .abody .aside { position: relative; top: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.lightband .aprog { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; }
.lightband .cband { display: flex; flex-direction: column; gap: 36px; }
.lightband .cband .cc { gap: 20px; }
.lightband .cband .cf { grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; }
.lightband .fld label { font-size: 13px; }
.lightband .fld input, .lightband .fld textarea { font-size: 17px; height: 54px; }
.lightband .fld textarea { height: 130px; }
.lightband .chk { font-size: 15px; align-items: flex-start; }
.lightband .fsend { flex-wrap: wrap; gap: 14px; }
.lightband .clinks a { font-size: 16px; gap: 14px; }
.lightband .note { font-size: 15px; }
.lightband .ifoot { padding: 0 20px; }
.lightband .ifmap { display: flex; flex-direction: column; gap: 36px; padding: 52px 0 40px; }
.lightband .ifmap .fbrand img { height: 48px; }
.lightband .ifmap .fbrand p { font-size: 16px; }
.lightband .ifmap .fcol { font-size: 16px; gap: 12px; }
.lightband .ifbase { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12px; padding: 22px 0 36px; }
.lightband .tools { grid-template-columns: minmax(0, 1fr); }
.lightband .tools li { grid-template-columns: 44px minmax(0, 1fr); font-size: 20px; padding: 20px 0; }
.lightband .tools li b { font-size: 20px; }
.lightband .duo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lightband .duo .dc { padding: 30px 22px; gap: 16px; }
.lightband .duo .dc p { font-size: 17px; }
.lightband .duo .dc .h2, .lightband .duo .dc h3 { font-size: 30px !important; }
.lightband .trio { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.lightband .trio .tc .ti { height: 280px; }
.lightband .trio .tc p { font-size: 17px; }
.lightband .xgrid { grid-template-columns: 1fr 1fr; gap: 16px; }
.lightband .xp b { font-size: 17px; }
.lightband .xp span { font-size: 14px; }
.lightband .xp .xi .xmono { font-size: 64px; }
.lightband .tag { height: 30px; font-size: 12px; padding: 0 12px; }
.lightband .pz { padding: 64px 20px; }
.lightband .pzhead { gap: 12px; }
.lightband .pzr { grid-template-columns: auto minmax(0, 1fr) !important; gap: 12px 18px !important; padding: 30px 0 !important; align-items: center; }
.lightband .pzr::before { width: 56px; }
.lightband .pzn { font-size: 52px; }
.lightband .pzi { width: 60px; height: 60px; justify-self: end; }
.lightband .pzi svg { width: 44px; height: 44px; }
.lightband #fit .pzt { grid-column: 1 / -1; font-size: 28px !important; }
.lightband #fit .pzb { grid-column: 1 / -1; font-size: 17px !important; max-width: none !important; }
.lightband [data-m="strip"] > div:first-child { flex-direction: column; align-items: flex-start !important; gap: 10px !important; margin-bottom: 26px !important; }
.lightband [data-m="strip"] > div:nth-child(2), .lightband [data-m="writing"] > div:nth-child(2) {
    display: flex !important; gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -20px; padding: 0 20px 6px; scroll-padding: 0 20px; }
.lightband [data-m="strip"] > div:nth-child(2)::-webkit-scrollbar, .lightband [data-m="writing"] > div:nth-child(2)::-webkit-scrollbar { display: none; }
.lightband [data-m="strip"] .pcard, .lightband [data-m="writing"] .card { flex: 0 0 82%; scroll-snap-align: start; }
.lightband [data-m="strip"] .pcard img { height: 300px !important; }
.lightband .pcard .pcap { padding: 18px 18px; }
.lightband .pcard .pt { font-size: 16px; }
.lightband [data-m="writing"] { gap: 30px !important; }
.lightband [data-m="writing"] > div:first-child { gap: 16px !important; }
.lightband [data-m="writing"] > div:first-child p { font-size: 16px !important; }
.lightband [data-m="writing"] .card img { height: 200px !important; }
.lightband [data-m="writing"] .card > div:last-child { padding: 18px 18px 22px !important; }
.lightband [data-m="writing"] .card > div:last-child > span:first-child { font-size: 20px !important; }
.lightband [data-m="faq"] .q { padding: 22px 0 !important; }
.lightband [data-m="faq"] .q > div:first-child { grid-template-columns: 38px minmax(0, 1fr) 38px !important; gap: 14px !important; }
.lightband [data-m="faq"] .qt { font-size: 19px !important; }
.lightband [data-m="faq"] .plus { width: 38px !important; height: 38px !important; }
.lightband [data-m="faq"] .ans [style*="padding"] { padding: 14px 0px 2px 52px !important; }
.lightband [data-m="faq"] .ans p, .lightband [data-m="faq"] .ans span { font-size: 16px !important; }
.lightband .lhs { padding: 64px 20px; gap: 30px; }
.lightband .lhshead { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.lightband .lhstitle { font-size: 46px; }
.lightband .lhslede { font-size: 16px; }
.lightband .lhgrid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.lightband .lhfim { height: 220px; }
.lightband .lhplay { width: 54px; height: 54px; left: 18px; bottom: 18px; }
.lightband .lhfbody { padding: 20px 18px 24px; }
.lightband .lhft { font-size: 21px; }
.lightband .lhep { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
.lightband .lhepim { height: 78px; }
.lightband .lhepc { padding: 8px 0; gap: 4px; }
.lightband .lhept { font-size: 16px; }
.lightband .lhmeta { font-size: 13px; }
.lightband .clients { padding: 64px 20px; gap: 34px; }
.lightband .cwall { grid-template-columns: 1fr 1fr; }
.lightband .cw { height: 104px; padding: 0 20px; }
.lightband .cw img { height: 52px; }
.lightband .cpress .track { font-size: 18px; gap: 34px; }
.lightband .cquote { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 32px 22px; }
.lightband .cqm { font-size: 96px; line-height: 0.6; height: 44px; }
.lightband .cqt { font-size: 22px; }
.lightband .cqn { font-size: 21px; }
.lightband .cqr { font-size: 15px; }
.lightband .pb { grid-template-columns: minmax(0, 1fr); }
.lightband .pbcopy { padding: 32px 22px; gap: 18px; }
.lightband .pbcopy p { font-size: 18px !important; }
.lightband .pbn { font-size: 56px; }
.lightband .pbl { font-size: 15px; }
.lightband .pbimg { min-height: 250px; }
.lightband .nlbar { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 22px; }
.lightband .nlbar > p { font-size: 18px !important; }
.lightband .nlbar > div { flex-direction: column; align-items: stretch !important; }
.lightband .nlbar .field { width: auto !important; }
.lightband [data-m="awards"], .lightband [data-m="numbers"] { padding-top: 64px !important; }
.lightband [data-m="writing"] { padding-top: 56px !important; }
.lightband .awd { gap: 16px; padding: 18px 0; }
.lightband .awd .at { font-size: 17px; }
.lightband .hum { height: 380px; }
.lightband .hcopy { left: 22px; right: 22px; bottom: 24px; gap: 10px; }
.lightband .hw { font-size: 84px; }
.lightband .hs { font-size: 17px; }
.lightband [data-m="closing"] p { font-size: 17px !important; }
.lightband [data-m="closing"] a[style*="font-size"] { font-size: 16px !important; }
.lightband [data-m="closing"] img { height: 280px !important; }
.lightband [data-m="footer"] { flex-direction: column; align-items: flex-start !important; gap: 22px; padding: 34px 20px 40px !important;
                      font-size: 12px !important; }
.lightband [data-m="footer"] > div:first-child { flex-wrap: wrap; gap: 8px 14px !important; }
.lightband [data-m="footer"] > div:nth-child(2) { flex-wrap: wrap; gap: 10px 18px !important; }
.lightband [data-m="footer"] img { height: 36px !important; }
}
.lightband .mtog { display: none; }


  html { height: 100%; }
  body { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr);
         justify-items: center; align-content: start; }
  #fit { zoom: 1; }

/* ---- WordPress additions ---------------------------------------------- */
/* a form that could not be sent says so next to its button (assets/js/lead.js) */
.ffail { display: none; align-items: center; gap: 10px; color: #EF4345; font-size: 16px; font-weight: 600; }
.ffail.show { display: inline-flex; }
form[aria-busy="true"] .btn { opacity: 0.6; pointer-events: none; }
/* the admin bar stays out of the artboard's grid */
#wpadminbar { position: fixed !important; }