/* Audience pages: owners, investors, occupiers, how-we-work, broker-cooperation.
   Motion grammar: scroll reveals via meridian's [data-reveal] observer,
   staggered children, ghost display words, hover slides on every route. */

/* Hero: light field, ghost audience word, path strip */
.au-hero { position: relative; overflow: hidden; background: var(--mist); border-bottom: 1px solid var(--ice); }
.au-hero::after { content: attr(data-word); position: absolute; right: -.03em; bottom: -.16em; z-index: 0; color: rgba(31, 103, 233, .055); font: 700 clamp(110px, 21vw, 300px)/1 var(--sans); letter-spacing: -.05em; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.au-hero-inner { position: relative; z-index: 1; padding: clamp(96px, 11vw, 148px) 0 clamp(48px, 6vw, 76px); }
.au-crumb { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(28px, 3.6vw, 44px); color: var(--grey); font: 500 12px/1 var(--sans); }
.au-crumb a { color: var(--grey); text-decoration: none; transition: color .2s; }
.au-crumb a:hover, .au-crumb a:focus-visible { color: var(--blue); }
.au-crumb i { font-style: normal; opacity: .5; }
.au-hero h1 { margin: 0; max-width: 14ch; color: var(--ink); font: 500 clamp(52px, 5.8vw, 92px)/.96 var(--sans); letter-spacing: -.05em; }
.au-hero h1 span { color: var(--blue); }
.au-thesis { max-width: 720px; margin: 26px 0 0; color: var(--grey); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.62; }
.au-hero-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding-top: 20px; padding-bottom: clamp(24px, 3vw, 34px); border-top: 1px solid rgba(10, 23, 38, .14); color: var(--grey); font: 600 11px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.au-hero-foot i { width: 3px; height: 3px; border-radius: 50%; background: var(--blue); }

/* Sections */
.au-section { padding: clamp(84px, 9vw, 136px) 0; }
.au-section--mist { background: var(--mist); }
.au-head h2 { margin: 0; max-width: 720px; color: var(--ink); font: 500 clamp(36px, 3.8vw, 58px)/1.05 var(--sans); letter-spacing: -.03em; }
.au-head p { max-width: 640px; margin: 22px 0 0; color: var(--grey); font-size: 16px; line-height: 1.7; }

/* Questions: accordion, plus-to-minus, content rises on open */
.au-questions { margin-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--ink); }
.au-q { border-bottom: 1px solid rgba(10, 23, 38, .16); }
.au-q summary { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: clamp(22px, 2.6vw, 30px) 8px clamp(22px, 2.6vw, 30px) 4px; list-style: none; cursor: pointer; color: var(--ink); font: 500 clamp(19px, 1.9vw, 26px)/1.25 var(--sans); letter-spacing: -.02em; transition: padding-left .3s var(--ease), color .2s; }
.au-q summary::-webkit-details-marker { display: none; }
.au-q summary:hover, .au-q summary:focus-visible { padding-left: 18px; color: var(--blue); }
.au-q summary i { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid rgba(10, 23, 38, .25); border-radius: 50%; transition: border-color .25s, background .25s, transform .4s var(--ease); }
.au-q summary i::before, .au-q summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .35s var(--ease), background .25s; }
.au-q summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.au-q[open] summary i { border-color: var(--blue); background: var(--blue); transform: rotate(180deg); }
.au-q[open] summary i::before, .au-q[open] summary i::after { background: #fff; }
.au-q[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.au-q-body { padding: 0 4px clamp(24px, 3vw, 34px); }
.au-q[open] .au-q-body { animation: au-rise .45s var(--ease) both; }
.au-q-body p { margin: 0; max-width: 760px; color: var(--grey); font-size: 15.5px; line-height: 1.8; }
@keyframes au-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Route: night band, ghost word, sliding rows */
.au-route { position: relative; overflow: hidden; background: var(--night); color: #fff; }
.au-route::after { content: attr(data-word); position: absolute; right: -.03em; top: -.14em; color: rgba(95, 168, 255, .06); font: 700 clamp(90px, 15vw, 210px)/1 var(--sans); letter-spacing: -.04em; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.au-route .shell { position: relative; z-index: 1; }
.au-route .au-head h2 { color: #fff; }
.au-route .au-head p { color: rgba(255, 255, 255, .62); }
.au-route-list { margin-top: clamp(40px, 5vw, 58px); border-top: 1px solid rgba(255, 255, 255, .5); }
.au-route-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 26px; padding: clamp(20px, 2.4vw, 27px) 6px; border-bottom: 1px solid rgba(255, 255, 255, .14); color: inherit; text-decoration: none; transition: background .3s, padding-left .35s var(--ease); }
.au-route-list b { font: 650 clamp(17px, 1.6vw, 22px)/1.25 var(--sans); letter-spacing: -.015em; }
.au-route-list span { grid-column: 1; max-width: 620px; color: rgba(255, 255, 255, .58); font: 400 13.5px/1.55 var(--sans); }
.au-route-list a i { grid-row: 1 / span 2; align-self: center; color: var(--blue-bright); font-style: normal; font-size: 17px; transition: transform .3s var(--ease); }
.au-route-list a:hover, .au-route-list a:focus-visible { background: rgba(95, 168, 255, .1); padding-left: 26px; }
.au-route-list a:hover i, .au-route-list a:focus-visible i { transform: translate(4px, -4px); }

/* Tools: cards that draw their top rule on hover */
.au-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 26px); margin-top: clamp(40px, 5vw, 58px); }
.au-tool { position: relative; display: flex; flex-direction: column; min-height: 190px; padding: clamp(22px, 2.2vw, 30px); border: 1px solid var(--ice); background: var(--white); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), border-color .25s, box-shadow .35s; }
.au-tool::before { content: ""; position: absolute; top: -1px; left: -1px; height: 3px; width: 0; background: var(--blue); transition: width .4s var(--ease); }
.au-tool:hover, .au-tool:focus-visible { border-color: var(--blue); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(4, 16, 30, .1); }
.au-tool:hover::before, .au-tool:focus-visible::before { width: calc(100% + 2px); }
.au-tool b { font: 600 17px/1.3 var(--sans); letter-spacing: -.015em; }
.au-tool p { margin: 10px 0 0; color: var(--grey); font-size: 13.5px; line-height: 1.6; }
.au-tool span { margin-top: auto; padding-top: 20px; color: var(--blue); font: 650 12px/1 var(--sans); }
.au-tool span i { display: inline-block; font-style: normal; transition: transform .3s var(--ease); }
.au-tool:hover span i { transform: translate(3px, -3px); }

/* Stages: vertical rail, dots that fill */
.au-stages { position: relative; margin-top: clamp(44px, 5.5vw, 66px); padding-left: clamp(34px, 4vw, 52px); }
.au-stages::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 8px; width: 1px; background: rgba(10, 23, 38, .18); }
.au-stage { position: relative; padding: 0 0 clamp(36px, 4.4vw, 54px); }
.au-stage:last-child { padding-bottom: 0; }
.au-stage::before { content: ""; position: absolute; top: 7px; left: calc(-1 * clamp(34px, 4vw, 52px) + 3px); width: 11px; height: 11px; border: 1.5px solid var(--blue); border-radius: 50%; background: var(--mist); transition: background .3s, transform .3s var(--ease), box-shadow .3s; }
.au-stage:hover::before { background: var(--blue); transform: scale(1.25); box-shadow: 0 0 0 6px rgba(31, 103, 233, .12); }
.au-stage h3 { margin: 0 0 10px; color: var(--ink); font: 500 clamp(20px, 2vw, 27px)/1.2 var(--sans); letter-spacing: -.02em; transition: color .25s; }
.au-stage:hover h3 { color: var(--blue); }
.au-stage p { margin: 0; max-width: 700px; color: var(--grey); font-size: 15.5px; line-height: 1.78; }

/* Quiet statement band (confidentiality, fees, affiliation) */
.au-note { max-width: 820px; margin-top: clamp(30px, 3.6vw, 44px); padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); border-left: 3px solid var(--night); background: var(--white); }
.au-note p { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.75; }
.au-note p + p { margin-top: 14px; }

/* Checklist: markers draw in with the reveal */
.au-list { margin: clamp(36px, 4.4vw, 54px) 0 0; padding: 0; list-style: none; max-width: 720px; }
.au-list li { position: relative; padding: 16px 4px 16px 34px; border-bottom: 1px solid rgba(10, 23, 38, .14); color: var(--ink); font-size: 16.5px; line-height: 1.5; transition: padding-left .3s var(--ease); }
.au-list li::before { content: ""; position: absolute; left: 4px; top: 26px; width: 14px; height: 1.5px; background: var(--blue); transition: width .3s var(--ease); }
.au-list li:hover { padding-left: 42px; }
.au-list li:hover::before { width: 22px; }

/* Close: night CTA with ghost word */
.au-close { position: relative; overflow: hidden; background: var(--night); color: #fff; padding: clamp(84px, 10vw, 140px) 0; }
.au-close::after { content: attr(data-word); position: absolute; left: 50%; bottom: -.2em; transform: translateX(-50%); color: rgba(255, 255, 255, .04); font: 700 clamp(120px, 24vw, 340px)/1 var(--sans); letter-spacing: -.04em; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.au-close .shell { position: relative; z-index: 1; }
.au-close .au-head h2 { color: #fff; max-width: 620px; }
.au-close .au-head p { color: rgba(255, 255, 255, .62); }
.au-close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(30px, 4vw, 44px); }
.au-close-actions .button { border: 1px solid var(--brand-action, var(--blue)); background: var(--brand-action, var(--blue)); color: #fff; }
.au-close-actions .button:hover, .au-close-actions .button:focus-visible { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--night); }
.au-ghostlink { color: rgba(255, 255, 255, .78); font: 600 14px/1 var(--sans); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 4px; transition: color .2s, border-color .2s; }
.au-ghostlink:hover, .au-ghostlink:focus-visible { color: var(--blue-bright); border-color: var(--blue-bright); }

/* Staggered reveals: children of any .au-stagger inherit meridian's reveal with delays */
.js .au-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .au-stagger.revealed > * { opacity: 1; transform: none; }
.au-stagger > *:nth-child(2) { transition-delay: .07s; }
.au-stagger > *:nth-child(3) { transition-delay: .14s; }
.au-stagger > *:nth-child(4) { transition-delay: .21s; }
.au-stagger > *:nth-child(5) { transition-delay: .28s; }
.au-stagger > *:nth-child(6) { transition-delay: .35s; }

/* Serve band on the services route */
.au-serve-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(38px, 4.6vw, 54px); background: var(--ice); border: 1px solid var(--ice); }
.au-serve-grid a { position: relative; overflow: hidden; display: block; padding: clamp(26px, 2.8vw, 38px); background: var(--white); color: var(--ink); text-decoration: none; transition: background .3s; }
.au-serve-grid b { display: block; color: var(--blue); font: 700 11px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; }
.au-serve-grid strong { display: block; margin: 14px 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.au-serve-grid p { margin: 0; color: var(--grey); font-size: 14px; line-height: 1.6; }
.au-serve-grid span { display: inline-block; margin-top: 18px; color: var(--blue); font: 650 12.5px/1 var(--sans); transition: transform .3s var(--ease); }
.au-serve-grid a:hover, .au-serve-grid a:focus-visible { background: var(--mist); }
.au-serve-grid a:hover span { transform: translateX(5px); }

@media (max-width: 900px) {
  .au-tools { grid-template-columns: 1fr; }
  .au-serve-grid { grid-template-columns: 1fr; }
  .au-hero::after, .au-route::after, .au-close::after { font-size: clamp(80px, 24vw, 140px); }
}
@media (prefers-reduced-motion: reduce) {
  .au-q[open] .au-q-body { animation: none; }
  .js .au-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ============ Signature instruments ============ */

/* Owners: the decision compass */
.au-compass-wrap { display: grid; grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); gap: clamp(36px, 5vw, 90px); align-items: start; margin-top: clamp(44px, 5.5vw, 66px); }
.au-compass { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(10,23,38,.2); border: 1px solid rgba(10,23,38,.2); aspect-ratio: 1; }
.au-compass::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--paper, #fff); border: 1.5px solid var(--blue); transform: translate(-50%, -50%); z-index: 2; }
.au-compass button { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: clamp(18px, 2vw, 28px); border: 0; background: var(--white); color: var(--ink); font: 500 clamp(19px, 1.8vw, 26px)/1.1 var(--sans); letter-spacing: -.02em; cursor: pointer; transition: background .3s, color .3s; }
.au-compass button small { font: 600 10px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--grey); transition: color .3s; }
.au-compass button:hover { background: var(--mist); }
.au-compass button[aria-selected="true"] { background: var(--night); color: #fff; }
.au-compass button[aria-selected="true"] small { color: var(--blue-bright); }
.au-compass button:focus-visible { z-index: 3; }
.au-compass-panel h3 { margin: 0 0 14px; font: 500 clamp(24px, 2.4vw, 34px)/1.12 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.au-compass-panel p { margin: 0 0 26px; max-width: 56ch; color: var(--grey); font-size: 16px; line-height: 1.75; }
.au-compass-panel[hidden] { display: none; }
.au-compass-panel:not([hidden]) { animation: au-rise .45s var(--ease) both; }
.au-compass-routes { display: flex; flex-direction: column; gap: 10px; }
.au-compass-routes a { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 420px; padding: 14px 16px; border: 1px solid var(--ice); color: var(--ink); font: 600 14px/1.3 var(--sans); text-decoration: none; transition: border-color .25s, padding-left .3s var(--ease), background .25s; }
.au-compass-routes a i { font-style: normal; color: var(--blue); transition: transform .3s var(--ease); }
.au-compass-routes a:hover, .au-compass-routes a:focus-visible { border-color: var(--blue); background: var(--mist); padding-left: 24px; }
.au-compass-routes a:hover i { transform: translate(3px, -3px); }
.au-compass-note { margin-top: 26px; color: var(--grey); font-size: 13.5px; }
.au-compass-note a { color: var(--blue); text-decoration: none; }
.au-compass-note a:hover { text-decoration: underline; }

/* Investors: lifecycle scrubber */
.au-life { margin-top: clamp(48px, 6vw, 72px); }
.au-life-track { position: relative; display: flex; justify-content: space-between; margin: 0 0 clamp(34px, 4vw, 48px); }
.au-life-track::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.25); }
.au-life-line { position: absolute; top: 6.5px; left: 0; height: 2px; width: 0; background: var(--blue-bright); transition: width .5s var(--ease); }
.au-life-track button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.55); font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .25s; }
.au-life-track button::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); background: var(--night); transition: border-color .25s, background .25s, transform .25s var(--ease), box-shadow .25s; }
.au-life-track button:hover { color: #fff; }
.au-life-track button:hover::before { border-color: var(--blue-bright); }
.au-life-track button.is-past::before { border-color: var(--blue-bright); background: var(--blue-bright); }
.au-life-track button.is-past { color: rgba(255,255,255,.75); }
.au-life-track button[aria-selected="true"] { color: #fff; }
.au-life-track button[aria-selected="true"]::before { border-color: var(--blue-bright); background: var(--blue-bright); transform: scale(1.3); box-shadow: 0 0 0 7px rgba(95,168,255,.15); }
.au-life-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: clamp(30px, 4vw, 70px); align-items: start; }
.au-life-panel[hidden] { display: none; }
.au-life-panel:not([hidden]) { animation: au-rise .45s var(--ease) both; }
.au-life-panel h3 { margin: 0 0 12px; color: #fff; font: 500 clamp(24px, 2.4vw, 34px)/1.12 var(--sans); letter-spacing: -.025em; }
.au-life-panel > div > p { margin: 0; max-width: 56ch; color: rgba(255,255,255,.62); font-size: 15.5px; line-height: 1.75; }
.au-life-links { display: flex; flex-direction: column; gap: 10px; }
.au-life-links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.22); color: #fff; font: 600 13.5px/1.3 var(--sans); text-decoration: none; transition: background .25s, border-color .25s, padding-left .3s var(--ease); }
.au-life-links a i { font-style: normal; color: var(--blue-bright); transition: transform .3s var(--ease); }
.au-life-links a:hover, .au-life-links a:focus-visible { background: rgba(95,168,255,.12); border-color: var(--blue-bright); padding-left: 24px; }
.au-life-links a:hover i { transform: translate(3px, -3px); }

/* Occupiers: the requirement writes itself */
.au-reqwriter { margin-top: clamp(44px, 5.5vw, 66px); }
.au-req-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.au-req-chips button { min-height: 44px; padding: 0 18px; border: 1px solid var(--ice); background: var(--white); color: var(--grey); font: 600 13px/1 var(--sans); letter-spacing: .02em; cursor: pointer; transition: border-color .2s, color .2s, background .25s, transform .2s var(--ease); }
.au-req-chips button:hover { border-color: var(--grey); color: var(--ink); transform: translateY(-1px); }
.au-req-chips button[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.au-req-sentence { margin: clamp(30px, 3.6vw, 44px) 0 0; padding: clamp(26px, 3vw, 40px); border-left: 3px solid var(--blue); background: var(--white); color: var(--ink); font: 500 clamp(21px, 2.2vw, 31px)/1.35 var(--sans); letter-spacing: -.02em; min-height: 3.2em; }
.au-req-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 26px; }
.au-req-actions .button { border: 1px solid var(--blue); background: var(--blue); color: #fff; }
.au-req-actions .button:hover, .au-req-actions .button:focus-visible { background: var(--night); border-color: var(--night); color: #fff; }
.au-req-ghost { color: var(--grey); font: 600 13.5px/1 var(--sans); text-decoration: none; border-bottom: 1px solid var(--ice); padding-bottom: 4px; transition: color .2s, border-color .2s; }
.au-req-ghost:hover, .au-req-ghost:focus-visible { color: var(--blue); border-color: var(--blue); }

/* How we work: sticky rail + scroll-linked fill */
.hw-grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; margin-top: clamp(44px, 5.5vw, 66px); }
.hw-rail { position: sticky; top: 110px; }
.hw-rail-inner { position: relative; padding-left: 22px; }
.hw-rail-inner::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 5px; width: 1px; background: rgba(10,23,38,.16); }
.hw-rail-fill { position: absolute; top: 6px; left: 4.5px; width: 2px; height: 0; background: var(--blue); transition: height .5s var(--ease); }
.hw-rail a { position: relative; display: block; padding: 9px 0; color: var(--grey); font: 600 13.5px/1.3 var(--sans); text-decoration: none; transition: color .25s, padding-left .3s var(--ease); }
.hw-rail a::before { content: ""; position: absolute; top: 50%; left: -22px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; border: 1.5px solid rgba(10,23,38,.25); background: var(--paper, #fff); transition: border-color .25s, background .25s; }
.hw-rail a:hover { color: var(--ink); }
.hw-rail a.is-active { color: var(--blue); padding-left: 6px; }
.hw-rail a.is-active::before { border-color: var(--blue); background: var(--blue); }
.hw-stage { padding: 0 0 clamp(48px, 6vw, 80px); }
.hw-stage:last-child { padding-bottom: 0; }
.hw-stage h3 { margin: 0 0 12px; color: var(--ink); font: 500 clamp(24px, 2.4vw, 34px)/1.15 var(--sans); letter-spacing: -.025em; }
.hw-stage > p { margin: 0 0 18px; max-width: 640px; color: var(--grey); font-size: 16px; line-height: 1.78; }
.hw-stage-detail { max-width: 640px; padding: 18px 22px; border-left: 3px solid var(--ice); color: var(--grey); font-size: 14px; line-height: 1.7; background: var(--mist); }
.hw-stage-detail b { color: var(--ink); font-weight: 600; }

/* Broker cooperation: the registration drafter */
.au-drafter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: start; margin-top: clamp(44px, 5.5vw, 66px); }
.au-drafter-form label { display: block; margin-bottom: 22px; color: var(--grey); font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.au-drafter-form input, .au-drafter-form select, .au-drafter-form textarea { width: 100%; margin-top: 8px; padding: 11px 0 12px; border: 0; border-bottom: 1px solid var(--ice); border-radius: 0; background: transparent; color: var(--ink); font: 400 16px/1.45 var(--sans); transition: border-color .2s; }
.au-drafter-form textarea { resize: vertical; min-height: 64px; }
.au-drafter-form input:hover, .au-drafter-form select:hover, .au-drafter-form textarea:hover { border-bottom-color: var(--grey); }
.au-drafter-form input:focus, .au-drafter-form select:focus, .au-drafter-form textarea:focus { border-bottom-color: var(--night); outline: 0; }
.au-drafter-out { border: 1px solid var(--ice); background: var(--white); box-shadow: 0 18px 50px rgba(4,16,30,.07); }
.au-drafter-head { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--ice); color: var(--grey); font: 700 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.au-drafter-head span:last-child { color: var(--blue); }
.au-drafter-out pre { margin: 0; padding: 22px 20px 26px; white-space: pre-wrap; color: var(--ink); font: 400 14px/1.75 var(--sans); }
.au-drafter-send { display: flex; justify-content: flex-end; padding: 0 20px 20px; }

@media (max-width: 900px) {
  .au-compass-wrap, .au-life-panel, .au-drafter { grid-template-columns: 1fr; }
  .hw-grid { grid-template-columns: 1fr; }
  .hw-rail { position: static; margin-bottom: 10px; }
  .au-life-track button { font-size: 10px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .au-compass-panel:not([hidden]), .au-life-panel:not([hidden]) { animation: none; }
}

/* ============ Imagery layer ============ */

/* Hero entrance: content rises in sequence on load */
.au-hero-inner > * { animation: au-enter .8s var(--ease) both; }
.au-hero-inner > *:nth-child(2) { animation-delay: .08s; }
.au-hero-inner > *:nth-child(3) { animation-delay: .16s; }
.au-hero-inner > *:nth-child(4) { animation-delay: .24s; }
.au-hero-foot { animation: au-enter .8s var(--ease) .34s both; }
@keyframes au-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Photographic interlude band: fixed image plane, line of type over scrim */
.au-photo { position: relative; min-height: clamp(240px, 34vw, 380px); display: flex; align-items: flex-end; overflow: hidden; background: var(--night); }
.au-photo::before { content: ""; position: absolute; inset: -12% 0; background: var(--au-img) center / cover no-repeat; }
.js .au-photo[data-reveal]::before { transform: translateY(4%) scale(1.08); transition: transform 1.6s var(--ease); }
.js .au-photo[data-reveal].revealed::before { transform: translateY(0) scale(1); }
.au-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,21,37,.24) 0%, rgba(7,21,37,.78) 100%); }
.au-photo .shell { position: relative; z-index: 1; padding-top: 40px; padding-bottom: clamp(28px, 3.4vw, 44px); }
.au-photo p { margin: 0; max-width: 26ch; color: #fff; font: 500 clamp(24px, 2.8vw, 40px)/1.16 var(--sans); letter-spacing: -.025em; }
.au-photo p b { color: var(--blue-bright); font-weight: 500; }
.js .au-photo[data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .au-hero-inner > *, .au-hero-foot { animation: none; }
  .js .au-photo[data-reveal]::before { transform: none; transition: none; }
}