/* NU Projects, shared stylesheet. Tokens come from tokens.css (the closed palette); never restate them here. */
@import url("/assets/tokens.81d01c6326.css");

/* base: element rules, type scale, wrap, buttons (Dubai site.css 17-46) */
*{box-sizing:border-box}
html{background:var(--nu-black);scroll-behavior:auto}
body{margin:0;background:var(--nu-black);color:var(--ink);font:300 var(--t-body)/1.65 var(--nu-font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--nu-gold-highlight);outline-offset:4px}

/* The skip link, and the landmark it lands in. Judges, 21 Sep 2026 (0.20): not one of the thirteen
   templates carried a <main> or a skip link, so a keyboard arriving on any page had to cross the whole
   bar before it reached a word of the page. The link is the first focusable thing in the document. It is
   off screen at rest rather than hidden, so it keeps its place in the tab order and in the reading order,
   and it is the site's own pill the moment it takes focus: gold brush, black type, over the bar.
   #main takes no ring of its own: the skip link's own ring is what the reader saw, and the page has
   already scrolled to the content by the time focus lands. */
.skip{position:fixed;top:0;left:0;z-index:60;display:inline-flex;align-items:center;height:44px;padding:0 22px;background:var(--nu-gold-gradient);color:var(--nu-black);font:700 var(--t-xs)/1 var(--nu-font);letter-spacing:.16em;text-transform:uppercase;transform:translateY(-130%);transition:transform .25s var(--ease)}
.skip:focus{transform:none}
#main:focus{outline:0}
/* A line only a screen reader reads. It exists where the page already shows the fact on screen and a
   live region has to say it once, in words that make sense out loud. Never display:none and never
   hidden: either would take it out of the accessibility tree, which is the one place it is for. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
/* The gradient paints only inside the box, and italic tails reach past it: the p of prime, the j of journal.
   Room on three sides, taken back by equal negative margins, so the tails are painted and nothing moves.
   Nick, 25 Sep 2026: "P is cut off", "J cut off". */
.gold{background:var(--nu-gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .14em .22em;margin:0 -.14em -.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rule{height:2px;background:var(--nu-gold-gradient)}
.eyebrow{font:700 var(--t-xs)/1 var(--nu-font);letter-spacing:.2em;text-transform:uppercase;color:var(--nu-gold);display:flex;gap:14px;align-items:center;margin:0 0 26px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--nu-gold-gradient)}
.eyebrow i{font-style:normal;color:var(--nu-muted);font-weight:400;letter-spacing:.14em}
h1,h2,h3{font-family:var(--nu-display);font-weight:300;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:1.02}
h2{font-size:var(--t-h2);line-height:1.08}
h3{font-size:var(--t-h3);line-height:1.2;font-weight:400}
em{font-style:italic}
p{margin:0}
.lede{font-size:var(--t-lede);line-height:1.6;color:var(--ink-2);max-width:34em}
.copy{max-width:36em;color:var(--ink-2)}
.copy p+p{margin-top:1.2em}
.mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .14em .3em;margin:0 -.14em -.3em}
.mask>span{display:inline-block;will-change:transform}
.btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 26px;border-radius:var(--radius-s);font:700 var(--t-xs)/1 var(--nu-font);letter-spacing:.16em;text-transform:uppercase;transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.btn.solid{background:var(--nu-gold-gradient);color:var(--nu-black)}
.btn.line{border:1px solid var(--veil-warm-1);color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.btn.line:hover{background:var(--veil-1)}
.btn svg{width:16px;height:16px}

/* Every anchor target on the site, in one rule. The bar floats over the page, so a jump that puts a
   section at the top of the viewport puts it under the bar. --anchor-offset is sized by the same two
   measurements the nav rules below are sized by (tokens.css), so the bar and the distance an anchor
   leaves above its target can never drift apart. Judges, 21 Sep 2026 (0.25): at 390px every in-page jump
   landed its target at top 0 under a 63px bar, and the bar printed itself over the first stat.
   :where() carries no specificity at all, so a block that sets its own scroll-margin still wins outright
   and the two offsets can never add up. */
:where([id],[data-gated]){scroll-margin-top:var(--anchor-offset)}

/* nav */
/* The bar used to shrink on scroll by animating its own padding from 22px to --nav-pad, a layout
   property: the browser has to run a fresh layout pass on the bar and its children every frame, not
   just composite one (design hook, 24 Sep 2026, base.css ~line 62). The padding is now fixed at
   --nav-pad always, so the box never changes size, and the resting (unscrolled) look is reproduced by
   translating the whole bar down by the difference, 22px minus --nav-pad. The background is transparent
   at rest, so the translated box is invisible until .scrolled paints it, and the logo and links land on
   the same pixel in both states as the old padding animation put them on. transform is compositor only. */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:var(--nav-pad) var(--gutter);transform:translateY(calc(22px - var(--nav-pad)));transition:background .5s var(--ease),transform .5s var(--ease),backdrop-filter .5s}
.nav.scrolled{background:var(--scrim-6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateY(0);border-bottom:var(--nu-hairline)}
.nav .mark img{height:30px;width:auto}
.nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.nav li a{font:400 var(--t-s)/1 var(--nu-font);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);position:relative;padding:6px 0}
.nav li a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--nu-gold-gradient);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav li a:hover::after{transform:scaleX(1)}
.nav .btn{height:var(--nav-control);padding:0 20px}

/* hero */
.hero{position:relative;padding:calc(120px + 6vw) 0 0}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,90px);align-items:end}
.hero h1{max-width:11em}
.hero .aside{padding-bottom:1.2em}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero .aside{padding-bottom:0}}
.hero-media{margin-top:clamp(56px,8vw,120px);position:relative}
.hero-media .frame{clip-path:inset(0 0 round 0);height:clamp(420px,86vh,960px);overflow:hidden;position:relative;background:var(--surface-1)}
.hero-media .frame img{width:100%;height:100%;object-fit:cover;transform-origin:center}
.hero-media .frame video{width:100%;height:100%;object-fit:cover;display:block}
.hero-media .frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,var(--scrim-5) 100%);pointer-events:none}
.hero-media figcaption{position:absolute;z-index:1;left:var(--gutter);right:var(--gutter);bottom:26px;display:flex;justify-content:space-between;gap:20px;font:400 var(--t-xs)/1.5 var(--nu-font);letter-spacing:.14em;text-transform:uppercase;color:var(--nu-warm-white);text-shadow:0 1px 14px var(--scrim-7)}
.hero-media figcaption b{font-weight:700;color:var(--nu-gold-legible)}
.marquee{overflow:hidden;border-top:var(--nu-hairline);border-bottom:var(--nu-hairline);padding:20px 0;white-space:nowrap}
.marquee .row{display:inline-flex;gap:64px;animation:mq 46s linear infinite;padding-right:64px;font:300 var(--t-l)/1 var(--nu-font);letter-spacing:.24em;text-transform:uppercase;color:var(--nu-muted)}
.marquee .row span::after{content:"\25C6";color:var(--nu-gold);font-size:var(--t-4xs);margin-left:64px;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
section.block{padding:var(--section) 0}
.two{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,120px);align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(48px,6vw,88px);border-top:var(--nu-hairline)}
.facts div{padding:28px 28px 28px 0;border-right:var(--nu-hairline)}
.facts div:last-child{border-right:0}.facts div+div{padding-left:28px}
.facts b{display:block;font:300 clamp(34px,3.4vw,52px)/1 var(--nu-display);margin-bottom:12px}
.facts span{font:400 var(--t-xs)/1.5 var(--nu-font);letter-spacing:.14em;text-transform:uppercase;color:var(--nu-muted)}
@media (max-width:700px){.facts{grid-template-columns:1fr}.facts div,.facts div+div{border-right:0;border-bottom:var(--nu-hairline);padding-left:0}}

/* concepts: pinned horizontal gallery */
.concepts{padding:var(--section) 0 0}
.concepts .head{padding-bottom:clamp(40px,5vw,72px)}
.concepts .stage{overflow:hidden}
.concepts .track{display:flex;flex-direction:column;gap:clamp(20px,3vw,48px);padding:0 var(--gutter) var(--section);will-change:transform}
html.motion .concepts .track{flex-direction:row}
@media (max-width:900px){html.motion .concepts .track{flex-direction:column}}
.panel{flex:0 0 clamp(300px,64vw,1080px)}
.panel figure{margin:0}
.panel .img{aspect-ratio:3/2;overflow:hidden;background:var(--surface-1);clip-path:inset(0 0 0 0)}
.panel .img img{width:112%;max-width:none;height:100%;object-fit:cover;margin-left:-6%}
.panel figcaption{display:flex;justify-content:space-between;gap:20px;padding-top:18px;border-top:var(--nu-hairline);margin-top:18px}
.panel figcaption h3{font-size:var(--t-card-xs)}
.panel figcaption small{font:400 var(--t-xs)/1.6 var(--nu-font);letter-spacing:.12em;text-transform:uppercase;color:var(--nu-muted);text-align:right;max-width:22em}
.panel figcaption small b{color:var(--nu-gold);font-weight:700}
.panel.tail{flex-basis:clamp(240px,34vw,520px);display:flex;align-items:center}
@media (max-width:900px){.concepts .track{flex-direction:column;padding-bottom:var(--section)}.panel{flex-basis:auto}.panel .img img{width:100%;margin:0}.panel.tail{flex-basis:auto}}

/* compare */
.compare{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surface-1);user-select:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .top{clip-path:inset(0 0 0 var(--pos,50%))}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;background:var(--nu-gold-highlight);pointer-events:none}
.compare .handle::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);background:var(--scrim-4);border:1px solid var(--nu-gold-highlight);backdrop-filter:blur(6px)}
.compare .handle::before{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--nu-gold-legible);font-size:var(--t-xl);z-index:1}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.compare .tag{position:absolute;bottom:18px;font:700 var(--t-2xs)/1 var(--nu-font);letter-spacing:.18em;text-transform:uppercase;padding:10px 14px;background:var(--scrim-5);color:var(--nu-warm-white);pointer-events:none}
.compare .tag.l{left:18px}.compare .tag.r{right:18px;color:var(--nu-gold-legible)}

/* disciplines: sticky stack */
.stack{display:grid;gap:0}
.card{position:sticky;top:clamp(84px,12vh,140px);min-height:clamp(380px,62vh,640px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);padding:clamp(28px,4vw,56px);background:#0a0a0a;border:1px solid var(--veil-2);margin-bottom:clamp(28px,5vh,60px);transform-origin:top center;will-change:transform}
.card:nth-child(2){background:#0d0c0a}.card:nth-child(3){background:#0b0b0d}.card:nth-child(4){background:#0e0d0b}
.card .n{font:300 clamp(64px,9vw,150px)/.9 var(--nu-display);align-self:start}
.card .n span{display:block;font:700 var(--t-xs)/1 var(--nu-font);letter-spacing:.2em;text-transform:uppercase;color:var(--nu-gold);margin-bottom:22px}
.card .body{align-self:end}
.card h3{margin-bottom:14px}
.card ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;color:var(--nu-muted);font-size:var(--t-l)}
.card li::before{content:"";display:inline-block;width:18px;height:1px;background:var(--nu-gold-gradient);vertical-align:middle;color:var(--nu-gold);margin-right:12px}
@media (max-width:800px){.card{grid-template-columns:1fr;min-height:0}.card .n{font-size:64px}}

/* approach */
.approach .grid{display:grid;grid-template-columns:64px 1fr;gap:clamp(24px,4vw,64px)}
.approach svg{width:2px;height:100%;overflow:visible}
.approach ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,7vw,110px)}
.approach li{display:grid;grid-template-columns:120px 1fr;gap:clamp(20px,4vw,60px);align-items:start}
.approach li b{font:300 clamp(30px,3vw,44px)/1 var(--nu-display)}
.approach li b small{display:block;font:700 var(--t-2xs)/1 var(--nu-font);letter-spacing:.2em;color:var(--nu-gold);margin-top:10px;text-transform:uppercase}
@media (max-width:700px){.approach .grid{grid-template-columns:1fr}.approach svg{display:none}.approach li{grid-template-columns:1fr}}

/* founder */
.founder .two{align-items:center}
.founder .portrait{clip-path:inset(0 0 0 0);aspect-ratio:3/4;overflow:hidden;background:var(--surface-1);max-width:520px}
.founder .portrait img{width:100%;height:116%;object-fit:cover;object-position:top;margin-top:-8%}
.quote{font:300 clamp(24px,2.6vw,38px)/1.25 var(--nu-display);font-style:italic;margin:34px 0 22px;padding-left:22px;border-left:2px solid;border-image:var(--nu-gold-gradient) 1}
.sig{font:400 var(--t-xs)/1.6 var(--nu-font);letter-spacing:.16em;text-transform:uppercase;color:var(--nu-muted)}

/* straight */
.straight{background:var(--surface-1);border-top:var(--nu-hairline);border-bottom:var(--nu-hairline)}
.straight .row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(40px,5vw,72px)}
.straight .row div{padding-top:22px;border-top:1px solid var(--veil-3)}
.straight .row h3{font-size:var(--t-h4);margin-bottom:10px}
.straight .row p{color:var(--nu-muted);font-size:var(--t-l)}
@media (max-width:800px){.straight .row{grid-template-columns:1fr}}

/* contact */
.contact h2{max-width:12em}
.contact form{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;max-width:860px}
.contact label{display:grid;gap:10px;font:700 var(--t-2xs)/1 var(--nu-font);letter-spacing:.18em;text-transform:uppercase;color:var(--nu-muted)}
.contact input,.contact select,.contact textarea{background:transparent;border:0;border-bottom:1px solid var(--veil-4);color:var(--ink);font:300 var(--t-xl)/1.4 var(--nu-font);padding:12px 0;border-radius:0;width:100%}
.contact select{-webkit-appearance:none;appearance:none}
.contact select option{color:var(--nu-black)}
.contact textarea{min-height:110px;resize:vertical}
/* Round 2 review, 20 Sep 2026: this rule set outline 0 on every .contact field and, being more specific
   than the site's own :focus-visible ring above, it won for keyboard users too. All a tabbing reader had
   to follow on a fourteen field form was a hairline changing shade. The hairline treatment is scoped to
   the pointer now, so the gold ring comes back for the keyboard, and the underline is two pixels for
   everyone. Repeated at page-mep.css for the area search, and already written this way on the
   calculator fields. */
.contact input:focus,.contact select:focus,.contact textarea:focus{border-bottom:2px solid var(--nu-gold-highlight);padding-bottom:11px}
.contact input:focus:not(:focus-visible),.contact select:focus:not(:focus-visible),.contact textarea:focus:not(:focus-visible){outline:0}
.contact .full{grid-column:1/-1}
.contact .actions{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:8px}
.contact .note{font-size:var(--t-s);color:var(--nu-muted);max-width:30em}
@media (max-width:700px){.contact form{grid-template-columns:1fr}}

/* footer */
footer{border-top:var(--nu-hairline);padding:64px 0 40px}
footer .grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:start}
footer img{height:34px;width:auto}
footer .small{font:400 var(--t-xs)/1.8 var(--nu-font);letter-spacing:.1em;text-transform:uppercase;color:var(--nu-muted)}
footer .small a:hover{color:var(--nu-gold-legible)}
footer .honest{margin-top:22px;max-width:34em;color:var(--ink-2);font-size:var(--t-l)}
@media (max-width:800px){footer .grid{grid-template-columns:1fr}}

/* static fallback (no GSAP / reduced motion): everything at rest, fully visible */
html.static .mask>span{transform:none!important}
html.static .marquee .row{animation:none}
@media (prefers-reduced-motion:reduce){.marquee .row{animation:none}.btn{transition:none}}


/* shared: current nav link (covers contact + journal; per-page duplicates above become harmless) */
.nav li a[aria-current="page"]{color:var(--ink)}
.nav li a[aria-current="page"]::after{transform:scaleX(1)}

/* shared: the nav button's 44px touch target under 900px (the links hide, so the button and the menu
   are the only nav controls) now comes from --nav-control, which is 44px at that width. */

/* home: the built work band (19 Sep 2026) */
.work{padding:clamp(88px,10vw,150px) 0;border-top:var(--nu-hairline)}
.work .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(40px,5vw,80px)}
.work .pj{margin:0;min-width:0}
.work .pj .ph{overflow:hidden;background:var(--surface-1);aspect-ratio:3/2;clip-path:inset(0 0 0 0)}
.work .pj .ph img{width:100%;height:100%;object-fit:cover;transform-origin:center;display:block}
.work .pj figcaption{margin-top:16px;padding-top:16px;border-top:var(--nu-hairline)}
.work .pj .t{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;font:400 var(--t-xs)/1.6 var(--nu-font);letter-spacing:.12em;text-transform:uppercase;color:var(--nu-muted)}
.work .pj .t b{color:var(--nu-gold);font-weight:700}
.work .pj .s{margin:10px 0 0;color:var(--ink-2);font-size:var(--t-l);line-height:1.65;max-width:34em}
.work .pill{display:inline-block;padding:4px 10px;border:1px solid var(--veil-4);font:700 var(--t-3xs)/1 var(--nu-font);letter-spacing:.18em;text-transform:uppercase;color:var(--nu-muted)}
.work .pill.live{border-color:var(--nu-gold);color:var(--nu-gold)}
.work .more{margin-top:clamp(36px,4vw,60px)}
@media (max-width:900px){.work .grid{grid-template-columns:1fr;gap:clamp(36px,6vw,56px)}}



/* Phone navigation (19 Sep 2026). Six links never fitted one row and a wrapped row read as a fault, and
   the tall nav overlapped the hero by 15px on every page. Below 900px the bar is one row (wordmark,
   WhatsApp, menu) and the links live in a full-screen menu set in the display face, one tall row each. */
.nav .menu{display:none;position:relative;z-index:2;width:var(--nav-control);height:var(--nav-control);margin-left:10px;padding:0;border:1px solid var(--veil-4);background:transparent;cursor:pointer;flex:0 0 auto}
.nav .menu span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),top .4s var(--ease),opacity .3s}
.nav .menu span:first-child{top:16px}.nav .menu span:last-child{top:26px}
.nav.open .menu span:first-child{top:21px;transform:rotate(45deg)}.nav.open .menu span:last-child{top:21px;transform:rotate(-45deg)}
body.menu-open{overflow:hidden}
@media (max-width:900px){
  .nav{flex-wrap:nowrap;gap:10px}
  .nav .mark,.nav .btn{position:relative;z-index:2}
  .nav .menu{display:inline-flex}
  .nav ul{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:0;margin:0;padding:96px var(--gutter) 48px;background:var(--scrim-10);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
  .nav.open ul{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s}
  .nav li{display:block;border-bottom:var(--nu-hairline)}
  .nav li a{display:flex;align-items:center;min-height:62px;padding:0;font:300 clamp(28px,7.6vw,36px)/1.1 var(--nu-display);letter-spacing:0;text-transform:none;color:var(--ink)}
  .nav li a::after{display:none}
  .nav li a[aria-current="page"]{color:var(--nu-gold-legible)}
  .nav.open{background:var(--scrim-10)}
  /* The open menu is a position:fixed list inside the bar. A transform or a backdrop-filter on the bar
     makes the bar the containing block for fixed children, so the "full screen" menu shrank to the bar's
     62px and its links printed over the page (Nick, 25 Sep 2026, on a phone; caused by the translateY that
     replaced the padding animation the day before). On a phone the bar never transforms, and while the
     menu is open it drops its blur. */
  .nav,.nav.scrolled{transform:none}
  .nav.open,.nav.open.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none}
  .work .pill{font-size:var(--t-2xs)}
}
@media (max-width:800px){footer .small{line-height:2.6}footer .small a{display:inline-block;padding:6px 0}}

/* remaining phone tap targets (19 Sep 2026 audit): in-page contact links and the wordmark link */
@media (max-width:800px){.links a{display:inline-block;padding:8px 0}.nav .mark{display:flex;align-items:center;min-height:44px}}

/* phone: the eyebrow flows as text, the nav pill never folds */
.nav .btn{white-space:nowrap}
@media (max-width:600px){.eyebrow{display:block;line-height:1.9}.eyebrow::before{display:inline-block;vertical-align:middle;margin-right:14px}}
@media (max-width:480px){.nav .btn{padding:0 14px;letter-spacing:.12em}}

/* founder film (home): 9:16 frame, gold play at rest */
.founder .film{margin:0}
.founder .portrait{position:relative}
.founder .portrait.video{aspect-ratio:9/16;max-width:420px}
.founder .portrait video{width:100%;height:100%;object-fit:cover;display:block;background:var(--nu-black)}
.founder .play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:var(--radius-pill);border:0;background:var(--nu-gold-gradient);color:var(--nu-black);display:grid;place-items:center;cursor:pointer;transition:transform .35s var(--ease)}
.founder .play:hover{transform:scale(1.06)}
.founder .film figcaption{margin-top:14px;font:400 var(--t-xs)/1.5 var(--nu-font);letter-spacing:.14em;text-transform:uppercase;color:var(--nu-muted)}
.founder .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* contact form: honeypot and status */
.contact .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact .status{grid-column:1/-1;font:400 var(--t-l)/1.6 var(--nu-font);color:var(--ink)}
.contact .status.ok{color:var(--nu-gold-legible)}
.contact .status.err{border-left:2px solid var(--nu-gold-highlight);padding-left:14px}
.contact .status a{text-decoration:underline;text-underline-offset:3px}
/* A message about one field, under that field. 21 Sep 2026: the one sentence used to go in the .status
   line at the foot of the form while focus moved to the field at fault near the top of it, so on four of
   five forms the browser scrolled the message between 229 and 958px off the screen and a person who sent
   an incomplete form saw nothing happen. Empty and out of the flow until there is something to say, so no
   field changes size, and the sentence is added under the field rather than inside it. */
.field-err:empty{display:none}
.field-err{margin:8px 0 0;font:400 var(--t-s)/1.55 var(--nu-font);color:var(--nu-gold-highlight)}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--nu-gold-highlight)}
/* these two home sections carry no .block class, so they would sit flush: give them Dubai's section padding */
.founder,.contact{padding:var(--section) 0}

/* founder film, 16:9 studio variant */
.founder.wide .two{grid-template-columns:7fr 5fr}
.founder .portrait.film16{aspect-ratio:16/9;max-width:none}
/* .founder.wide .two (0,3,0) outranks the .two (0,1,0) rule inside the 900px media query, so the
   phone collapse has to be restated at the same weight or the film and the copy stay side by side */
@media (max-width:900px){.founder.wide .two{grid-template-columns:1fr}}

/* Every band boundary carries the same hairline. pages.css states this for a section that was a child of
   <body>; the page's content is inside <main> from 21 Sep 2026, so the same three shapes are stated here
   for the element that holds them now. Same rule, same value, one landmark later. pages.css belongs to
   another agent this minute, which is the only reason the number is written down twice. */
main > section + section,
main > section + div > section,
main > div + section{border-top:var(--nu-hairline)}