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); }

  
    /* ---- LIGHT BANDS ---------------------------------------------------
       A light copy of everything above, scoped to .lightband. Generated by
       make-mix.py -- do not hand-edit; edit the dark artboard and re-run.
       .lightband .x (0,2,0) outranks .x (0,1,0), so only the marked bands
       flip. Inline styles inside those bands are mapped in the markup,
       because an inline colour would beat any rule here.

       A light band carrying its own horizontal margin -- the hero does,
       72px a side -- would let the dark root show through as gutters.
       The spread paints the ground past the border box; the clip stops
       it bleeding vertically into the neighbouring dark band. Turning
       the hero's margin into padding is NOT an option: its children are
       absolutely positioned against that box and would all shift. */
    .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); }

  



@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; }