/* Navigator Law, Inc. — site styles
   One dark room: a deep blue-black ground, the brand navy as the raised surface,
   brass gold kept for actions and the instruments themselves. */
:root{
  color-scheme:dark;
  /* colour roles */
  --bg:#0E1728;          /* ground: blue-black taken from the brand navy */
  --surface:#1B2A4A;     /* brand navy: panels, path boxes, the booking band */
  --surface-2:#22355C;   /* one step up, for hover */
  --ink:#E8E6E1;         /* soft bone light, from the compass face */
  --muted:#A7B1C4;       /* secondary notes (8:1 on the ground) */
  --accent:#C9A84C;      /* brand gold: actions and brass */
  --accent-hi:#DCC077;
  --on-accent:#0E1728;
  /* type: one family, five steps */
  --font:"Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step-small:clamp(0.8125rem,0.79rem + 0.1vw,0.875rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + 0.7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-display:clamp(1.625rem,0.3rem + 5.4vw,5.25rem);
  /* space and motion */
  --m:clamp(20px,3.4vw,56px);
  --section:clamp(112px,12vw,200px);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- base ---------- */
.nl{font-family:var(--font);font-size:var(--step-body);font-weight:400;line-height:1.6;letter-spacing:-0.01em;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.nl h1,.nl h2{font-weight:400;margin:0;letter-spacing:-0.03em;line-height:1.05}
.nl p{margin:0}
.nl strong{font-weight:500}
.nl .nl-wrap{padding-inline:var(--m)}
.nl a:focus-visible,.nl summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ---------- header ---------- */
.nl-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.nl-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);font-weight:500;font-size:var(--step-body);letter-spacing:-0.01em}
.nl-brand .nl-mark{height:60px;width:auto;display:block;flex:none;transition:transform 400ms var(--ease-out)}
.nl-links{display:flex;flex-wrap:wrap;gap:4px 28px;font-size:var(--step-small)}
.nl-links a{position:relative;color:var(--muted);text-decoration:none;padding:12px 0;transition:color 200ms ease}
.nl-links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform 260ms var(--ease-out)}
.nl-links a[aria-current]{color:var(--ink)}
.nl-links a[aria-current]::after{transform:scaleX(1)}
.nl-mnav{display:none;position:relative}
.nl-mnav summary{list-style:none;cursor:pointer;color:var(--ink);background:var(--surface);font-weight:500;font-size:var(--step-small);padding:12px 18px;min-height:44px;display:flex;align-items:center;transition:background-color 200ms ease}
.nl-mnav summary::-webkit-details-marker{display:none}
.nl-mnav[open] summary{background:var(--surface-2)}
.nl-mnav nav{position:absolute;right:0;top:52px;background:var(--surface);padding:12px 22px;display:flex;flex-direction:column;min-width:240px;z-index:5}
.nl-mnav nav a{color:var(--ink);text-decoration:none;padding:11px 0}

/* ---------- hero ---------- */
.nl-hero{background:var(--bg);color:var(--ink);overflow-x:clip;min-height:max(820px,100svh);display:flex;flex-direction:column}
.nl .nl-hero h1{font-size:var(--step-display);line-height:1.04;letter-spacing:-0.035em;margin-top:clamp(40px,4.5vw,72px)}
.nl .nl-hero h1.nl-h1short{font-size:clamp(2.75rem,1rem + 7vw,6rem);line-height:1}
/* a line that rises out of a slot: the outer span clips, the inner span moves */
.nl-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.nl-line>span{display:block}
.nl-herofoot{margin-top:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;padding-block:48px clamp(40px,4vw,64px)}
.nl-herotext{grid-column:1 / span 5;display:flex;flex-direction:column;gap:32px}
.nl-herotext.nl-wide{grid-column:1 / span 6}
.nl-herotext p{font-size:var(--step-lead);line-height:1.4;color:var(--ink);max-width:24em}
.nl .nl-herotext .nl-hlead{font-size:var(--step-lead);line-height:1.45;max-width:30em}
.nl-rose{grid-column:8 / span 5;justify-self:end;width:min(100%,380px);height:auto;display:block}
.nl-rose .nl-rneedle{transform-box:view-box;transform-origin:200px 200px}
.nl-hship{margin:0;background:var(--bg);grid-column:7 / span 6;justify-self:end;width:100%;max-width:760px;overflow:hidden}
.nl-hship img{width:100%;height:auto;mix-blend-mode:lighten}

/* ---------- buttons and links ---------- */
.nl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px;background:var(--accent);color:var(--on-accent);font-weight:500;font-size:var(--step-body);letter-spacing:-0.005em;text-decoration:none;align-self:flex-start;transition:transform 160ms var(--ease-out),background-color 200ms ease}
.nl-btn:active{transform:scale(0.97)}
.nl-textlink{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px;align-self:flex-start;padding:10px 0;transition:color 200ms ease}

/* ---------- home: choose your path ---------- */
.nl-paths{background:var(--bg);overflow-x:clip;padding-block:var(--section) calc(var(--section) * 0.8)}
.nl-pathshead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 64px;margin-bottom:clamp(56px,6vw,96px)}
.nl .nl-pathshead h2{font-size:var(--step-head)}
.nl-pathshead p{max-width:30em;color:var(--ink)}
.nl-compass{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:". legal ." "edu center fin" ". life .";gap:16px;max-width:1240px;margin-inline:auto}
.nl-a-legal{grid-area:legal}.nl-a-edu{grid-area:edu}.nl-a-center{grid-area:center}.nl-a-fin{grid-area:fin}.nl-a-life{grid-area:life}
.nl-box{position:relative;isolation:isolate;overflow:hidden;background:var(--surface);color:var(--ink);text-decoration:none;padding:36px 32px;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:260px;transition:background-color 300ms ease,scale 160ms var(--ease-out)}
.nl-box:active{scale:.985}
.nl-box>:not(.nl-boximg){position:relative;z-index:1;max-width:56%}
.nl-boximg{position:absolute;top:-12%;right:0;width:54%;height:124%;object-fit:contain;object-position:100% 50%;mix-blend-mode:lighten;opacity:.8;transform:scale(1);transition:opacity 500ms ease,transform 900ms var(--ease-out)}
.nl-a-life .nl-boximg{top:0;height:100%;width:56%;object-position:100% 55%}
.nl-box strong{font-weight:500;font-size:var(--step-lead);line-height:1.15;letter-spacing:-0.02em;color:var(--ink)}
.nl-box span{line-height:1.45;color:var(--ink)}
.nl-box em{font-style:normal;font-size:var(--step-small);color:var(--muted);margin-top:4px}
.nl-box:focus-visible{background:var(--surface-2)}
.nl-box:focus-visible .nl-boximg{opacity:1}
.nl-a-center{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px}
.nl-needle{position:absolute;inset:0;margin:auto;width:26px;height:330px;transition:transform 450ms var(--ease-in-out)}
.nl-needle .n{fill:var(--accent)}
.nl-needle .s{fill:var(--muted);opacity:.45}
.nl-diamond{position:relative;width:176px;height:176px;background:var(--accent);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform 200ms var(--ease-out),background-color 200ms ease}
.nl-diamond:focus-visible{background:var(--accent-hi)}
.nl-diamond:active{transform:rotate(45deg) scale(0.97)}
.nl-diamond>span{transform:rotate(-45deg);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;width:146px;color:var(--on-accent)}
.nl-diamond strong{font-weight:500;font-size:var(--step-body);line-height:1.15;letter-spacing:-0.015em}
.nl-diamond em{font-style:normal;font-size:var(--step-small);line-height:1.3}

/* ---------- founder / attorney-led ---------- */
.nl-founder{background:var(--bg);color:var(--ink);padding-block:calc(var(--section) * 0.6) var(--section)}
.nl-foundergrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.nl-portrait{grid-column:1 / span 4;aspect-ratio:4/5;background:var(--surface);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.nl-portrait svg{width:74%;height:auto;display:block;transform-origin:50% 100%}
.nl-portrait svg *{fill:var(--surface-2)}
.nl-foundertext{grid-column:6 / span 7;display:flex;flex-direction:column;gap:32px}
.nl .nl-foundertext h2{font-size:var(--step-head)}
.nl-foundertext p{font-size:var(--step-lead);line-height:1.4;max-width:22em}

/* ---------- home: book band ---------- */
.nl-band{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:clamp(440px,48vw,680px);background:var(--surface);color:var(--ink);text-decoration:none;padding-block:44px 24px;overflow:hidden;transition:color 350ms ease 80ms}
/* the gold fill rises from the bottom edge on hover and focus */
.nl-band::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scaleY(0);transform-origin:50% 100%;transition:transform 520ms var(--ease-out)}
.nl-band:focus-visible{color:var(--on-accent)}
.nl-band:focus-visible::before{transform:scaleY(1)}
.nl-bandtop{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.nl-bandtop div{display:flex;flex-direction:column;gap:10px}
.nl .nl-bandtop h2{font-size:var(--step-lead);line-height:1.25;letter-spacing:-0.02em}
.nl-bandtop p{color:inherit}
.nl-band svg{flex:none;width:48px;height:48px;color:var(--accent);transition:transform 300ms var(--ease-out),color 450ms ease}
.nl-bandword{display:block;font-weight:400;font-size:clamp(120px,27vw,420px);line-height:0.78;letter-spacing:-0.065em;margin-left:-0.05em;color:var(--accent);transition:color 450ms var(--ease-out)}
.nl-band:focus-visible .nl-bandword,.nl-band:focus-visible svg{color:var(--on-accent)}

/* ---------- custom harness: what we build ---------- */
.nl-build{background:var(--bg);padding-block:var(--section)}
.nl .nl-build h2{font-size:var(--step-head);margin-bottom:clamp(48px,5vw,80px)}
.nl-poster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(20px,2.4vw,36px)}
.nl-poster li{background:var(--bg);isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,340px);align-items:center;gap:clamp(24px,3vw,48px);transition:opacity 240ms ease}
.nl-poster strong{font-weight:400;font-size:var(--step-display);line-height:0.95;letter-spacing:-0.045em;color:var(--ink)}
.nl-posterimg{width:clamp(96px,11vw,168px);height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:lighten;transition:scale 700ms var(--ease-out)}
.nl-poster span{font-size:var(--step-body);line-height:1.5;color:var(--ink)}

/* ---------- custom harness: attorney-led ---------- */
.nl-lead{background:var(--bg);color:var(--ink);padding-block:0 calc(var(--section) * 0.7)}
.nl-leadgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.nl-leadtext{grid-column:1 / span 7;display:flex;flex-direction:column;gap:32px}
.nl .nl-leadtext h2{font-size:var(--step-head)}
.nl-leadtext p{font-size:var(--step-lead);line-height:1.4;max-width:22em}
.nl-lead .nl-portrait{grid-column:9 / span 4}

/* ---------- custom harness: book ---------- */
.nl-book{background:var(--surface);color:var(--ink);padding-block:calc(var(--section) * 0.8)}
.nl-bookgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch}
.nl-booktext{grid-column:1 / span 5;display:flex;flex-direction:column;gap:32px}
.nl .nl-booktext h2{font-size:var(--step-head)}
.nl-cal{grid-column:7 / span 6;background:var(--bg);min-height:440px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:48px}
.nl-cal strong{font-weight:500;font-size:var(--step-lead);line-height:1.25;letter-spacing:-0.02em}
.nl-cal p{color:var(--muted)}

/* ---------- footer ---------- */
.nl-foot{background:var(--bg);color:var(--ink);padding-block:48px 32px;min-height:clamp(560px,66svh,680px);display:flex;flex-direction:column}
.nl-foottop{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.nl-foottop .nl-brand{grid-column:1 / span 4}
.nl-foottop p{grid-column:5 / span 5;font-size:var(--step-small);color:var(--muted)}
.nl-foottop .nl-up{grid-column:10 / span 3;justify-self:end;color:var(--accent);font-weight:500;font-size:var(--step-small);padding:10px 0;white-space:nowrap;transition:color 200ms ease}
.nl .nl-mail{margin-top:auto;font-size:var(--step-display);line-height:1;letter-spacing:-0.04em}
.nl-mail a{text-decoration:none;color:var(--ink);transition:color 250ms ease}
.nl .nl-disclaimer{max-width:68ch;margin-top:40px;color:var(--muted);font-size:var(--step-body)}
.nl-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-top:48px;font-size:var(--step-small);color:var(--muted)}
.nl-meta nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.nl-meta a{color:var(--ink);text-decoration:none;padding:8px 0;transition:color 200ms ease}
.nl-legal{display:flex;flex-direction:column;gap:4px;text-align:right;max-width:46ch}
.nl-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:0}

/* ---------- motion ----------
   One rule for curves: --ease-out for anything arriving, --ease-in-out for things moving on screen.
   Section entrances run as animations, not transitions, so they never overwrite an element's own hover transitions.
   They only apply once js/site.js has marked the page, so nothing stays hidden without the script. */
@keyframes nl-lineup{from{transform:translateY(110%)}to{transform:none}}
@keyframes nl-letterup{from{transform:translateY(135%)}to{transform:none}}
@keyframes nl-rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:none}}
@keyframes nl-rose{from{opacity:0;transform:translateY(20px) scale(0.97)}to{opacity:1;transform:none}}
@keyframes nl-build{from{clip-path:inset(0 100% 0 0);transform:scale(1.04)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes nl-curtain{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes nl-settle{from{transform:scale(1.12)}to{transform:none}}
@keyframes nl-fade{from{opacity:0}}
/* a compass needle finding north: overshoot, then smaller and smaller corrections */
@keyframes nl-swing{0%{transform:rotate(-60deg);animation-timing-function:var(--ease-in-out)}40%{transform:rotate(14deg);animation-timing-function:var(--ease-in-out)}62%{transform:rotate(-6deg);animation-timing-function:var(--ease-in-out)}80%{transform:rotate(2.5deg);animation-timing-function:var(--ease-in-out)}100%{transform:rotate(0deg)}}
@keyframes nl-find{0%{opacity:0;rotate:-400deg;animation-timing-function:var(--ease-in-out)}10%{opacity:1}50%{rotate:16deg;animation-timing-function:var(--ease-in-out)}68%{rotate:-7deg;animation-timing-function:var(--ease-in-out)}84%{rotate:2.5deg;animation-timing-function:var(--ease-in-out)}100%{opacity:1;rotate:0deg}}
/* the compass assembles: each point arrives from its own direction */
@keyframes nl-diamond{from{opacity:0;rotate:-45deg;scale:.85}}
@keyframes nl-from-n{from{opacity:0;translate:0 -64px}}
@keyframes nl-from-e{from{opacity:0;translate:64px 0}}
@keyframes nl-from-s{from{opacity:0;translate:0 64px}}
@keyframes nl-from-w{from{opacity:0;translate:-64px 0}}
/* scroll-linked */
@keyframes nl-lift{to{opacity:.25;translate:0 -48px}}
@keyframes nl-turnaway{to{translate:0 -90px;rotate:-24deg}}
@keyframes nl-sail{to{translate:18% -6%}}
@keyframes nl-push{from{translate:16% 0}}
/* page to page */
@keyframes nl-page-out{to{opacity:0;transform:translateY(-24px)}}
@keyframes nl-page-in{from{opacity:0;transform:translateY(32px)}}

@media (prefers-reduced-motion:no-preference){
  /* first screen, on load */
  .nl-hero h1 .nl-line>span{animation:nl-lineup 1000ms 100ms var(--ease-out) backwards}
  .nl-hero h1 .nl-line+.nl-line>span{animation-delay:190ms}
  .nl-herotext{animation:nl-rise 1000ms 380ms var(--ease-out) backwards}
  .nl-rose{animation:nl-rose 1100ms 300ms var(--ease-out) backwards}
  .nl-rose .nl-rneedle{animation:nl-swing 1600ms 700ms backwards}
  .nl-hship img{animation:nl-build 1800ms 250ms var(--ease-in-out) backwards}

  /* section parts rise in turn as they enter */
  .nl[data-reveal] :is(.nl-rv,.nl-rv2):not(.nl-masked):not([data-visible]){opacity:0}
  .nl[data-reveal] :is(.nl-rv,.nl-rv2)[data-visible]:not(.nl-masked){animation:nl-rise 800ms var(--ease-out) var(--d,0ms) backwards}
  /* headings rise out of a slot */
  .nl[data-reveal] .nl-masked:not([data-visible]) .nl-line>span{transform:translateY(110%)}
  .nl[data-reveal] .nl-masked[data-visible] .nl-line>span{animation:nl-lineup 900ms var(--ease-out) var(--d,0ms) backwards}
  /* portraits open like a curtain */
  .nl[data-reveal] [data-anim=wipe]:not([data-visible]){clip-path:inset(100% 0 0 0)}
  .nl[data-reveal] [data-anim=wipe][data-visible]{animation:nl-curtain 900ms var(--ease-in-out) backwards}
  .nl[data-reveal] [data-anim=wipe][data-visible] svg{animation:nl-settle 1300ms var(--ease-out) backwards}
  /* the big Book word rises from under the band's bottom edge */
  .nl[data-reveal] [data-anim=word]:not([data-visible]){transform:translateY(135%)}
  .nl[data-reveal] [data-anim=word][data-visible]{animation:nl-letterup 1100ms 120ms var(--ease-out) backwards}
  /* the compass assembles: centre, then north, east, south, west, while the needle spins and settles */
  .nl[data-reveal] [data-anim=assemble]:not([data-visible]) :is(.nl-box,.nl-diamond,.nl-needle){opacity:0}
  .nl[data-reveal] [data-anim=assemble][data-visible] .nl-diamond{animation:nl-diamond 1000ms var(--ease-out) backwards}
  .nl[data-reveal] [data-anim=assemble][data-visible] .nl-needle{animation:nl-find 2200ms 250ms backwards}
  .nl[data-reveal] [data-anim=assemble][data-visible] .nl-a-legal{animation:nl-from-n 1000ms 320ms var(--ease-out) backwards}
  .nl[data-reveal] [data-anim=assemble][data-visible] .nl-a-fin{animation:nl-from-e 1000ms 420ms var(--ease-out) backwards}
  .nl[data-reveal] [data-anim=assemble][data-visible] .nl-a-life{animation:nl-from-s 1000ms 520ms var(--ease-out) backwards}
  .nl[data-reveal] [data-anim=assemble][data-visible] .nl-a-edu{animation:nl-from-w 1000ms 620ms var(--ease-out) backwards}

  /* page to page: the logo and menu hold still while the page beneath changes */
  ::view-transition-old(root){animation:nl-page-out 280ms var(--ease-out) both}
  ::view-transition-new(root){animation:nl-page-in 640ms 60ms var(--ease-out) both}
}
@view-transition{navigation:auto}
.nl-top .nl-brand{view-transition-name:nl-brand}
.nl-top .nl-links{view-transition-name:nl-links}

/* scroll-linked moves, where the browser supports them; elsewhere the page simply stays still */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .nl-hero h1{animation:nl-lift linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .nl-rose{animation:nl-rose 1100ms 300ms var(--ease-out) backwards,nl-turnaway linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
    .nl-hship{animation:nl-sail linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .nl-bandword{animation:nl-push linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  }
}

@media (prefers-reduced-motion:reduce){
  /* fewer and gentler: the first screen fades in, nothing travels */
  .nl-hero h1,.nl-herotext,.nl-rose,.nl-hship{animation:nl-fade 500ms ease both}
}

@media (hover:hover) and (pointer:fine){
  .nl-links a:hover{color:var(--ink)}
  .nl-links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
  .nl-btn:hover{background:var(--accent-hi)}
  .nl-box:hover{background:var(--surface-2)}
  .nl-box:hover .nl-boximg{opacity:1;transform:scale(1.04)}
  .nl-diamond:hover{background:var(--accent-hi);transform:rotate(45deg) scale(1.04)}
  .nl-textlink:hover{color:var(--ink)}
  .nl-band:hover{color:var(--on-accent)}
  .nl-band:hover::before{transform:scaleY(1)}
  .nl-band:hover .nl-bandword,.nl-band:hover svg{color:var(--on-accent)}
  .nl-band:hover svg{transform:translate(6px,-6px)}
  .nl-poster:has(li:hover) li:not(:hover){opacity:.35}
  .nl-poster li:hover .nl-posterimg{scale:1.06}
  .nl-mail a:hover{color:var(--accent)}
  .nl-foottop .nl-up:hover{color:var(--ink)}
  .nl-meta nav a:hover{color:var(--accent)}
  .nl-brand:hover .nl-mark{transform:rotate(-8deg)}
  .nl-mnav summary:hover{background:var(--surface-2)}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nl-links{display:none}.nl-mnav{display:block}
  .nl-hero{min-height:0}
  .nl-herofoot{margin-top:clamp(56px,10vw,96px)}
  .nl-herotext,.nl-herotext.nl-wide{grid-column:1 / span 7}.nl-rose{grid-column:9 / span 4}
  .nl-hship{grid-column:8 / span 5}
  .nl-compass{grid-template-columns:minmax(0,1fr);grid-template-areas:"legal" "edu" "center" "fin" "life"}
  .nl-a-center{min-height:240px}.nl-needle{display:none}
  .nl-portrait{grid-column:1 / span 6}.nl-foundertext{grid-column:1 / -1}
  .nl-leadtext,.nl-booktext,.nl-cal{grid-column:1 / -1}
  .nl-lead .nl-portrait{grid-column:1 / span 6;grid-row:1}
  .nl-foottop .nl-brand,.nl-foottop p{grid-column:1 / -1}.nl-foottop .nl-up{grid-column:1 / -1;justify-self:start}
  .nl-legal{text-align:left}
}
@media (max-width:560px){
  .nl-brand span{display:none}
  .nl-hero{min-height:0}
  .nl-herofoot{grid-template-columns:minmax(0,1fr);padding-block:40px 56px}
  .nl-herotext,.nl-herotext.nl-wide{grid-column:1}
  .nl-rose{grid-column:1;order:-1;justify-self:start;width:220px}
  .nl-hship{grid-column:1;max-width:none}
  .nl-box{min-height:220px;padding:28px 24px}
  .nl-box>:not(.nl-boximg){max-width:58%}
  .nl-boximg{width:46%}
  .nl-portrait{grid-column:1 / -1;max-width:320px}
  .nl-lead .nl-portrait{grid-column:1 / -1;max-width:280px}
  .nl-band{min-height:440px}
  .nl-bandword{font-size:34vw}
  .nl-poster li{grid-template-columns:auto minmax(0,1fr);gap:8px 20px}
  .nl-poster strong{grid-column:1 / -1;font-size:14vw}
  .nl-posterimg{width:88px}
  .nl-poster span{font-size:var(--step-body)}
  .nl-cal{min-height:300px;padding:28px}
  .nl .nl-mail{font-size:11vw}.nl-mail span{display:block}
  .nl-meta{flex-direction:column;align-items:flex-start}
}