/* Ported from the approved r7 prototype (_workspace/brd_site_2026-09/preview/r7/site.css) —
   the design of record, unchanged. */
/* r7 — BRD site. One motion grammar, measured from the library (refs/motion/MOTION_*.md):
   entrances  --e-out  cubic-bezier(.16,1,.3,1)      expo-out; Phantom/Obys/Cuberto/StudioDado
   feedback   --e-ui   cubic-bezier(.215,.61,.355,1) easeOutCubic at .15–.3s; Locomotive
   pops       --e-back cubic-bezier(.34,1.56,.64,1)  back-out overshoot; House of Honey spring analogue
   cuts       --e-cut  cubic-bezier(.4,0,.1,1)       .4–.5s; Lusion menu/route cuts */
html:root { --ink: #0b1216; --panel: #10191e; --foam: #eef0ec; --dim: rgba(238,240,236,.52); --sea: #a6d6db; --u: calc(100vw / 1440);
  --m: calc(40 * var(--u)); --g: calc(20 * var(--u)); --sec: calc(160 * var(--u));
  --e-out: cubic-bezier(.16,1,.3,1); --e-ui: cubic-bezier(.215,.61,.355,1); --e-back: cubic-bezier(.34,1.56,.64,1); --e-cut: cubic-bezier(.4,0,.1,1); }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ── the app shell ────────────────────────────────────────────────────────────────────────────
   This design is served by the Website Agent Next.js app, whose globals.css sets a blanket
   `transition` on every element, `scroll-behavior: smooth` on <html>, and its own --ink/--paper
   tokens. All three fight a design that writes transforms every frame. Each is neutralised here
   at a specificity that beats a bare element or :root selector and loses to every classed rule
   below, so nothing in this stylesheet had to change. */
html:root { background: var(--ink); scroll-behavior: auto; }
html body { color: var(--foam); font-family: Inter, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip;
  background: var(--ink); font-size: 16px; line-height: normal; letter-spacing: normal; }
html body *, html body *::before, html body *::after { transition: none; }
/* The app's Tailwind preflight renormalises <sup>/<sub> to `position: relative; top: -.5em;
   line-height: 0`, which stops them expanding their line box. The prototype was drawn against the
   browser default, and the counts beside "Work" and the filter names sat 3px differently because
   of it. Put the default back, below every rule in this design that sets its own alignment. */
html body sup, html body sub { position: static; top: auto; bottom: auto; line-height: inherit; font-size: smaller; }
html body sup { vertical-align: super; }
html body sub { vertical-align: sub; }

/* Visually hidden, still in the HTML: the wall's tiles and the marquee's rows are picture and
   motion, and this is the text that tells a crawler or a screen reader what they are. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
a { color: inherit; text-decoration: none; }
.lbl { font-size: max(10px, calc(11.5 * var(--u))); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; line-height: 1; }
.disp { font-family: Archivo; font-variation-settings: 'wdth' 62; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.it { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.02em; }
.ch { display: inline-block; }

/* NAV */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: calc(88 * var(--u)); min-height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--m); color: #fff;
  transition: background .4s var(--e-ui), transform .5s var(--e-cut); }
.nav .mark { font-family: Archivo; font-variation-settings: 'wdth' 75; font-weight: 800; font-size: max(15px, calc(19 * var(--u))); letter-spacing: .02em; text-transform: uppercase; }
.nav nav { display: flex; gap: calc(34 * var(--u)); align-items: center; }
.nav.solid { background: rgba(11,18,22,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav.hide { transform: translateY(-100%); }
.pill { display: inline-block; background: var(--foam); color: var(--ink); padding: 1.05em 1.5em; border-radius: 999px; will-change: transform; }
/* A CTA with a long and a phone label (the nav pill, "Explore my options" / "My options"): both are in the served
   HTML and this sheet picks one before first paint, so the label never swaps after hydration. */
.cta__s { display: none; }
/* SERVICES MENU (Peter corpus 898; app/_brd/ServicesMenu.tsx). The button paints exactly what the plain
   "Services" link painted (same .lbl type, same box: no padding, border or background), so the closed header is
   unchanged; it keeps the link's place in the nav order beside Work. The list it opens hangs under it on the
   nav's own glass, in the nav's .lbl caps; the current page is in the sea accent. No rules, rings or borders. */
html.cap-d .nav nav > .svc { order: 1; }
.svc { position: relative; display: flex; }
.svc__btn { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font-family: inherit; cursor: pointer; border-radius: 0; }
.svc__btn:focus-visible, .svc__menu a:focus-visible { outline: 2px solid var(--sea); outline-offset: 4px; }
.svc__menu { position: absolute; top: calc(100% + max(18px, calc(30 * var(--u)))); left: calc(-1 * max(18px, calc(24 * var(--u)))); list-style: none; margin: 0;
  padding: max(6px, calc(8 * var(--u))) 0; background: rgba(11,18,22,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.38); animation: svc-in .32s var(--e-out) both; }
.svc__menu[hidden] { display: none; }
.svc__menu a { display: flex; align-items: center; min-height: 44px; padding: 0 max(18px, calc(24 * var(--u))); white-space: nowrap; color: var(--foam); }
html body .svc__menu a { transition: color .25s var(--e-ui); }
.svc__menu a:hover, .svc__menu a[aria-current="page"] { color: var(--sea); }
@keyframes svc-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .svc__menu { animation: none; } }
/* PHONE MENU (Peter corpus 898, second pass; app/_brd/PhoneMenu.tsx). On upright phones (<= 700px) the header has
   no Work or Services, so a "Menu" button sits between the wordmark and the Free · Check tag, in the nav's .lbl caps,
   a 44 x 44 tap box with the word centred in it. It opens a panel under the bar on the nav's own glass: Work and the
   three service pages in the site's Archivo display caps, the current page in the sea accent. No rules, rings or
   borders. Never drawn above 700px, so the wider headers are untouched. */
.mnu, .mnu__wrap { display: none; }
.mnu { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font-family: inherit; cursor: pointer; border-radius: 0; }
.mnu.is-open { color: var(--sea); }
.mnu:focus-visible, .mnu__panel a:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; }
.mnu__panel { position: absolute; top: calc(100% + 4px); left: var(--m); right: var(--m); list-style: none; margin: 0; padding: 8px 0;
  background: rgba(11,18,22,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.38); animation: svc-in .32s var(--e-out) both; }
.mnu__panel[hidden] { display: none; }
html .nav nav .mnu__panel a { display: flex; align-items: center; min-height: 54px; padding: 0 20px; font-size: 26px; line-height: 1; color: var(--foam); }
html body .mnu__panel a { transition: color .25s var(--e-ui); }
html .nav nav .mnu__panel a:hover, html .nav nav .mnu__panel a[aria-current="page"] { color: var(--sea); }
@media (prefers-reduced-motion: reduce) { .mnu__panel { animation: none; } }
@media (max-width: 700px) {
  html .nav nav > .mnu__wrap { display: flex; }
  html .nav nav a.mnu, html .nav nav .mnu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  /* the word sits 14px (box 9.9px) from the tag at 375-389, 18px from 390 up: the gap the tag keeps from the pill */
  html .nav nav > .mnu, html .nav nav > .mnu__wrap { margin-right: -4px; }
}
@media (max-width: 389px) { html .nav nav > .mnu, html .nav nav > .mnu__wrap { margin-right: -8px; } }
/* Below 375px the three items and Menu do not fit at their 375px spacing (at 320 there was 6.9px between the wordmark
   and the tag). Spacing only, no type size changes: the bar's side margin 16 -> 12px, the gaps 18 -> 8px, the pill's
   side padding 15 -> 9.5px, the tag's paper side padding 11/12 -> 6.5px and its stub 19.5 -> 16px. */
@media (max-width: 374px) {
  html body .nav { padding: 0 12px; }
  html:root.cap-d .nav nav { gap: 8px; }
  html .nav nav > .mnu, html .nav nav > .mnu__wrap { margin-right: -5px; }
  html .nav nav .pill { padding-left: .95em; padding-right: .95em; }
  html .nav .capD__tag--a .capD__body { padding-left: .65em; padding-right: .65em; }
  html .nav .capD__tag--a .capD__stubm { flex-basis: 1.6em; width: 1.6em; }
}


/* HERO — the reel at 2:1; the statement enters letter by letter; the film recedes (scale .95, brightness 30%) as you leave it */
.hero { position: relative; }
.film { position: sticky; top: 0; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; background: #0d1a20 url(/media/reel/delmar-reel.jpg) center / 100% 100% no-repeat; will-change: transform, filter; transform-origin: 50% 30%; }
.film video { width: 100%; height: 100%; display: block; }
.film::after { content: ''; position: absolute; inset: 0 0 auto; height: calc(220 * var(--u)); background: linear-gradient(rgba(6,14,18,.55), rgba(6,14,18,0)); pointer-events: none; }
.hero__over { position: relative; margin-top: calc(-720 * var(--u)); }
.hero__meta { position: absolute; left: var(--m); right: var(--m); top: calc(112 * var(--u)); display: flex; justify-content: space-between; color: #fff; }
.statement { padding: calc(430 * var(--u)) var(--m) 0; pointer-events: none; }
.statement h1 { font-size: calc(250 * var(--u)); line-height: .8; white-space: nowrap; }
.statement .row { display: flex; align-items: baseline; }
.statement .ln { display: block; overflow: hidden; padding-bottom: .02em; } .statement .row .ln { flex: none; }
.statement .ch { transform: translateY(105%) rotate(6deg); transform-origin: 0 100%; transition: transform 1.2s var(--e-out); }
.statement em { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.03em; font-size: .27em; color: var(--sea); margin-left: .4em;
  opacity: 0; filter: blur(12px); transform: translateY(.3em); transition: opacity 1s var(--e-out) .7s, filter 1.2s var(--e-out) .7s, transform 1.2s var(--e-out) .7s; }
.go .statement .ch { transform: none; } .go .statement em { opacity: 1; filter: none; transform: none; }
.intro { position: relative; margin: 0 var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding: calc(200 * var(--u)) 0 0; }
.intro .cap { grid-column: 1 / span 4; color: var(--dim); padding-top: .5em; }
.intro p { grid-column: 7 / span 5; font-size: max(15px, calc(19 * var(--u))); line-height: 1.5; color: var(--dim); }
.intro p b { color: var(--foam); font-weight: 400; }
.hero__bg { position: absolute; inset: calc(560 * var(--u)) 0 0; background: linear-gradient(rgba(11,18,22,0), var(--ink) calc(260 * var(--u))); z-index: -1; }

/* reveal-on-enter: words rise (expo-out, 30ms stagger) */
.rv .ch, .rv .w { transform: translateY(110%); transition: transform 1s var(--e-out); }
.rv .wrap { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.rv.in .ch, .rv.in .w { transform: none; }

/* FOOTER — closes with confidence, not an ask (Peter 09-24: the marquee footer read "desperate").
   The page lifts away to reveal it (sticky underlay); one large contact, a quiet grid, the wordmark rising at the end. */
main { position: relative; z-index: 1; background: var(--ink); }
.foot { position: sticky; bottom: 0; z-index: 0; padding: calc(120 * var(--u)) var(--m) calc(28 * var(--u)); background: #081013; }
.foot__k { color: var(--dim); margin-bottom: calc(22 * var(--u)); }
.foot__mail { display: inline-block; font-size: calc(104 * var(--u)); line-height: .9; text-transform: none; letter-spacing: -.01em; }
.foot__mail .c { display: inline-block; overflow: hidden; vertical-align: top; height: 1.16em; }   /* tall enough for p/g descenders */
.foot__mail .c > span { display: block; height: 1.16em; line-height: 1.16; transition: transform .6s var(--e-out); }
.foot__mail .c > span + span { color: var(--sea); }
.foot__mail:hover .c > span { transform: translateY(-100%); }
.foot__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); margin-top: calc(90 * var(--u)); line-height: 2; color: var(--dim); }
.foot__grid > div { grid-column: span 3; } .foot__grid .k { color: rgba(238,240,236,.35); }
.foot__grid a { color: var(--foam); transition: color .25s var(--e-ui); } .foot__grid a:hover { color: var(--sea); }
@media (min-width: 360px) { .foot__grid .nw { white-space: nowrap; } } /* a service name stays whole (corpus 898); at 320 its column is narrower than "Funnel & conversion" */
.foot__word .in { display: inline-block; }
.foot__word { margin-top: calc(80 * var(--u)); line-height: .78; white-space: nowrap; overflow: hidden; color: var(--foam); }
.foot__word .ch { transform: translateY(100%); transition: transform 1.1s var(--e-out); }
.foot.in .foot__word .ch { transform: none; }
.foot__nap { font-style: normal; }
/* A2P 10DLC / Do-Not-Call fine print. Same dim colour and size as the base line; sentence case,
   because a legal sentence set in the .lbl small caps would be a wall of capitals and would
   change the footer's look. Peter 09-24: the footer closes with confidence, never an ask. */
/* It runs the full measure on purpose: the whole notice fits on two lines there, which keeps the
   footer inside one screen. Narrower, it was four lines and 100px, and the footer stopped fitting
   (926px in a 900px viewport) — the top of it, the kicker, would never be seen. */
.foot__fine { margin-top: calc(20 * var(--u)); font-size: max(10px, calc(11.5 * var(--u)));
  line-height: 1.7; letter-spacing: .02em; color: rgba(238,240,236,.35); }
.foot__fine a { color: rgba(238,240,236,.55); text-decoration: underline; transition: color .25s var(--e-ui); }
.foot__fine a:hover { color: var(--sea); }
.foot__base { display: flex; justify-content: space-between; margin-top: calc(24 * var(--u)); color: rgba(238,240,236,.35); }
/* The sister-studio link (corpus 926) in the grid's link colours, so it reads as a link, not as the dim base text. */
.foot__base .foot__sis { color: var(--foam); transition: color .25s var(--e-ui); } .foot__base .foot__sis:hover { color: var(--sea); }
@media (max-width: 700px) {
  html:root { --m: 16px; --g: 8px; --sec: 88px; }
  .nav nav a:not(.pill), .nav nav .svc { display: none; }
  .cta__l { display: none; } .cta__s { display: inline; }
  .film { position: relative; } .hero__over { margin-top: 0; } .hero__meta { display: none; }
  .statement { padding: 0; margin: -9vw var(--m) 0; } .statement h1 { font-size: 21vw; } .statement .row { flex-wrap: wrap; } .statement em { flex-basis: 100%; margin: .12em 0 0; font-size: .4em; }
  .intro { grid-template-columns: 1fr; padding-top: 22px; row-gap: 14px; } .intro p, .intro .cap { grid-column: 1; }
  /* The resting end of the page is the footer filling the screen, as on desktop. Shorter than the screen, the
     Booked room's last 200px showed above it with its button cut by the nav (navclear.py, 393x659). */
  .foot { position: relative; min-height: 100svh; padding-top: 96px; display: flex; flex-direction: column; }
  .foot__grid { margin-bottom: auto; } .foot__mail { align-self: flex-start; font-size: 7.2vw; } .foot__grid { grid-template-columns: 1fr 1fr; row-gap: 18px; } .foot__grid > div { grid-column: auto; }
  .foot__fine { line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) { .statement .ch, .rv .ch, .rv .w { transform: none !important; } .statement em { opacity: 1; filter: none; transform: none; } }

/* PAGE TRANSITIONS — native cross-document View Transitions (Chrome 126+, Safari 18.2+; others just navigate).
   Leave fast, enter patient (Locomotive .2s / .45s); the clicked piece morphs into the case page's hero. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s var(--e-cut) both vt-out; }
::view-transition-new(root) { animation: .5s cubic-bezier(.23,1,.32,1) .08s both vt-in; }
::view-transition-group(piece) { animation-duration: .75s; animation-timing-function: var(--e-out); z-index: 90; }
::view-transition-old(piece), ::view-transition-new(piece) { animation-duration: .75s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-2%); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(4%); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* LAYOUT RESERVATIONS — paint nothing new; they only stop the page jumping while it loads
   (scripts/brd_perf_check.py, CLS on /). site.js fits the hero statement and the footer wordmark to
   the measure once the web fonts are in, so until then both sat at their CSS sizes and then snapped:
   on a 1440x900 screen the statement shrank 250px -> 239.4px and the footer grew 648px -> 885px tall,
   which with the font swap was the whole of the 0.50 desktop CLS. These rules start both at the size
   the fit is going to arrive at (the constants are the fonts' measured widths per 1px of font-size:
   5.5961 for the statement's second row with its signature, 4.23 for "BuiltRight" as site.js rounds
   it). site.js still does the fit, from the same starting size as before (the statement's rule
   drops off once it sets data-fit), so the size that ends up on screen is the one it always was. */
@media (min-width: 701px) {
  .statement { container-type: inline-size; }
  .statement h1:not([data-fit]) { font-size: calc(100cqw * .985 / 5.5961); }
}
.foot { container-type: inline-size; }
.foot__word { font-size: calc(100cqw * .995 / 4.23); }
/* The statement's letters wait out of sight (clipped below their line, the signature at opacity 0)
   until site.js adds `go` once the fonts are in, so nobody sees them swap from the fallback font —
   but the browser still counted their swap as the page jumping (0.21 of the desktop CLS). Hiding
   them with visibility until `go` hides nothing that was visible and ends that. Not under reduced
   motion: there the letters show at once, and still do. */
@media (prefers-reduced-motion: no-preference) { body:not(.go) #h1 { visibility: hidden; } }