/* R&R Grandeur Properties — site styles.
   Base rules first (formerly supplied by the design-system sheet), then the
   page styles carried over unchanged from the v5 design. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 8px; }
p { margin: 0 0 12px; }
a { text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); }
[id] { scroll-margin-top: 96px; }
.btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-heading); line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent; }
/* Images fill whatever frame holds them; empty frames show a quiet ground. */
.fill { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph { width: 100%; height: 100%; background: var(--color-neutral-300); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--navy); color: #fff; padding: 10px 16px; }
.skip:focus { left: 16px; top: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dstatus.is-ok, .dstatus.is-bad { font-weight: 500; }

/* Three roles, never mixed: paper ground, navy for ground and structure,
   gold for everything that draws attention. Gold has two tones because
   bright gold sits near 1.9:1 on white and vanishes — #C9A227 is reserved
   for navy grounds, #7A600F carries every gold mark on paper. */
:root {
  --page: #F2F2F3;
  --band: color-mix(in srgb, var(--gold) 3%, var(--color-bg));
  --navy: #0E2340;
  --navy-base: #1D456F;
  --gold: #C9A227;
  --gold-ink: #7A600F;
  --gold-press: #A8861F;
  --tl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-heading: 'Inter', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', Roboto, Helvetica, Arial, sans-serif;
  /* The accent role resolves to the on-paper gold, so every existing rule,
     numeral and underline stays legible without being restated. */
  --color-accent: #7A600F;
  --color-accent-100: #F1EEE3;
  --color-accent-200: #EAE2C9;
  --color-accent-300: #C9A227;
  --color-accent-600: #A8861F;
  --color-accent-700: #7A600F;
  --color-accent-800: #5F4A0B;
  --color-accent-900: #433406;
  --color-bg: #F2F2F3;
  --color-text: #1D1F20;
  --color-neutral-200: #E4E4E6;
  --color-neutral-300: #D2D2D4;
  --color-neutral-400: #B6B6B9;
  --color-neutral-500: #86868A;
  --color-neutral-600: #5D5D60;
  --color-neutral-700: #5D5D60;
  --color-neutral-800: #3C3C3E;
}
/* No faux bolding: only the four real Inter weights ever render. */
body, .d, .k, .btn, input, select, textarea, button { font-synthesis-weight: none; }
html[data-tone="cool"] { --page: #ffffff; }
html[data-tone="sand"] { --page: color-mix(in srgb, var(--gold) 6%, #F2F2F3); }
html[data-accent="restrained"] { --color-accent-700: var(--color-neutral-800); }
html[data-accent="ink"] { --color-accent-700: var(--color-text); --color-accent: var(--color-text); }
body { margin: 0; background: var(--page); }
.hero-frame { position: relative; height: clamp(520px, 82vh, 860px); background: var(--color-neutral-300); }
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16,14,13,0.86) 0%, rgba(16,14,13,0.44) 42%, rgba(16,14,13,0) 78%), linear-gradient(to right, rgba(16,14,13,0.42) 0%, rgba(16,14,13,0) 62%); }
.hero-title { font-size: clamp(40px, 4.4vw, 76px); }
html[data-impact="compact"] .hero-frame { height: clamp(320px, 46vh, 480px); }
html[data-impact="compact"] .hero-title { font-size: clamp(30px, 3vw, 48px); }
html[data-impact="compact"] .hero-scrim { background: linear-gradient(to top, rgba(16,14,13,0.78) 0%, rgba(16,14,13,0.3) 52%, rgba(16,14,13,0) 84%); }
html[data-impact="poster"] .hero-frame { height: clamp(620px, 94vh, 1040px); }
html[data-impact="poster"] .hero-title { font-size: clamp(44px, 5.4vw, 96px); }
html[data-impact="poster"] .hero-scrim { background: linear-gradient(to top, rgba(14,12,11,0.92) 0%, rgba(14,12,11,0.55) 46%, rgba(14,12,11,0.08) 82%), linear-gradient(to right, rgba(14,12,11,0.5) 0%, rgba(14,12,11,0) 66%); }
a { color: var(--color-text); }
a:hover { color: var(--color-accent-700); }
.w { max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 72px); }
.k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-600); }
.d { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04;
  margin: 0; color: var(--navy); }
/* Display type reversed out of a navy ground keeps its own colour. */
.poster .d, footer .d { color: inherit; }
.body { font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); }
/* Section lede — the one paragraph under a chapter heading. */
.lede { font-size: 17.5px; line-height: 1.64; color: var(--color-neutral-800); }
/* Figures never wrap and always align: tabular numerals, one weight. */
.fig { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: -0.01em; color: var(--color-text); }
.navlink { font-size: 13.5px; font-weight: 500; letter-spacing: 0.06em; }
.wordmark { font-family: var(--font-heading); font-weight: 700; font-size: clamp(19px, 2.1vw, 30px);
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; color: var(--color-text); text-decoration: none; }
.row { display: grid; grid-template-columns: 240px 1fr; gap: 56px; padding: 20px 0; }
.sec { max-width: 1440px; margin: 0 auto; padding: 72px clamp(24px, 4vw, 72px) 80px; }
.band { position: relative; }
html[data-sections="banded"] .band[data-band="on"] { background: var(--band); }
html[data-sections="banded"] .band[data-band="on"] .sec { border-top: 0; }
html[data-sections="rules"] .sec { border-top: 2px solid var(--color-text); padding-top: 104px; padding-bottom: 112px; }
html[data-sections="rules"] .row, html[data-sections="rules"] .kv, html[data-sections="rules"] .arow { border-top: 1px solid var(--color-neutral-300); }
html[data-sections="rules"] .row { padding: 34px 0; }
html[data-sections="rules"] .kv { padding: 10px 0; }
html[data-sections="rules"] .arow { padding: 17px 0; }
html[data-sections="quiet"] .secnum { display: none; }
.sechead { display: flex; align-items: baseline; gap: 18px; margin-bottom: 0; }
/* Chapter numeral — tabular so 01 and 04 occupy identical width. */
.secnum { font-family: var(--font-heading); font-weight: 700; font-size: clamp(42px, 4.6vw, 74px);
  line-height: 0.86; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--gold-ink); }
/* The chapter label sits 22px under its numeral, in muted ink. */
.sechead + .k, .secnum + .k { font-size: 12px; font-weight: 600; letter-spacing: 0.26em;
  color: var(--color-neutral-600); margin-top: 22px; }
html[data-accent="ink"] .secnum, html[data-accent="restrained"] .secnum { color: var(--color-neutral-300); }
/* Navy is ground and structure only — never small text on paper. */
.poster { background: var(--navy); color: #fff; }
/* Contact — a split panel: copy left, a photo card with details right. */
/* Nav — the section you are in takes ink and a bronze underline. */
.navlink { position: relative; text-decoration: none; color: var(--color-neutral-600);
  padding-bottom: 5px; transition: color 300ms ease; }
.navlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform 340ms var(--tl-ease); }
.navlink:hover { color: var(--color-text); }
.navlink.is-here { color: var(--color-text); }
.navlink.is-here::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .navlink, .navlink::after { transition: none; } }
.contact-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(48px, 6vw, 88px); align-items: start; }
.contact-panel > * { min-width: 0; }
/* The details sit as a ruled column rather than a card, so their first label
   shares the heading column's baseline and no empty box is left under them
   when the form runs longer. Sticky keeps them beside the field the visitor
   is on instead of stranded at the top. */
.contact-aside { position: sticky; top: 96px; padding-left: clamp(24px, 3vw, 40px);
  border-left: 1px solid var(--color-neutral-300); }
@media (max-width: 940px) {
  .contact-aside { position: static; padding-left: 0; border-left: 0; padding-top: 30px;
    border-top: 1px solid var(--color-neutral-300); }
}
/* Platform — a strip of numbered plates above the four written rows. Each
   lifts and brightens on hover; nothing expands or reflows. */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 18px 0 6px; }
.tiles > * { min-width: 0; }
.tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-neutral-300);
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.tile:hover { transform: translateY(-8px); }
.tile-img { position: absolute; inset: 0; display: block; filter: brightness(0.62) saturate(0.6); transition: filter 520ms ease; }
.tile:hover .tile-img { filter: brightness(0.92) saturate(1); }
.tile-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16,14,13,0.82) 0%, rgba(16,14,13,0.26) 60%, rgba(16,14,13,0.06) 100%); }
.tile-num { position: absolute; top: 16px; left: 20px; font-family: var(--font-heading); font-weight: 700;
  font-size: 15px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--gold); }
.tile-title { position: absolute; left: 20px; right: 20px; bottom: 18px; font-family: var(--font-heading);
  font-weight: 700; font-size: clamp(15px, 1.5vw, 22px); line-height: 1.12; letter-spacing: -0.015em; color: #fff; }
@media (max-width: 720px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .tile, .tile-img { transition: none !important; } }
/* Approach — a five-stage rule with restrained microanimation: the line
   eases toward the active step, the node fills and rings, the title draws a
   hairline underline, the description lifts 8px. Base state is fully
   legible, so no-JS and reduced-motion read plainly. */
.tl { position: relative; margin-top: 30px; margin-left: 296px; }
@media (max-width: 940px) { .tl { margin-left: 0; } }
/* A vertical spine: the rule runs down the left edge, nodes sit on it, and
   each stage's copy sits beside its node. */
.tl-rail { position: absolute; left: 18px; top: 22px; bottom: 26px; width: 1px; }
.tl-track { position: absolute; inset: 0; background: var(--color-neutral-300); }
.tl-fill { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: var(--color-accent); }
.tl-grid { position: relative; display: grid; grid-template-columns: 1fr; }
.tl-grid > * { min-width: 0; }
/* Each step is a two-column row: node on the spine, copy beside it. The
   node spans both copy rows so it stays level with the title. */
.tl-step { position: relative; display: grid; grid-template-columns: 37px 210px minmax(0, 1fr);
  gap: 0 28px; align-items: start; padding: 24px 0 26px;
  background: none; border: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.tl-step:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.tl-node { position: relative; display: grid; place-items: center;
  width: 37px; height: 37px; background: var(--page);
  box-shadow: inset 0 0 0 1px var(--color-neutral-400);
  transition: box-shadow 340ms var(--tl-ease), transform 340ms var(--tl-ease); }
.tl-ring { position: absolute; inset: -5px; box-shadow: 0 0 0 1px var(--color-accent-300);
  opacity: 0; transform: scale(0.9); transition: opacity 340ms ease, transform 340ms var(--tl-ease); }
.tl-dot { position: absolute; inset: 0; background: var(--color-accent); opacity: 0; transition: opacity 340ms ease; }
.tl-n { position: relative; font-family: var(--font-heading); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--color-neutral-700); transition: color 340ms ease; }
.tl-step.is-past .tl-node { box-shadow: inset 0 0 0 1px var(--color-accent-300); }
.tl-step.is-past .tl-n { color: var(--color-accent-700); }
.tl-step.is-on .tl-node { transform: scale(1.04); box-shadow: inset 0 0 0 1px var(--color-accent); }
.tl-step.is-on .tl-dot { opacity: 1; }
.tl-step.is-on .tl-n { color: #fff; }
.tl-step.is-on .tl-ring { opacity: 1; transform: scale(1); }
.tl-t { position: relative; display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.02em; margin: 0; grid-column: 2;
  color: var(--color-neutral-700); transition: color 360ms ease; }
.tl-step.is-on .tl-t { color: var(--navy); }
.tl-b { display: block; grid-column: 3; font-size: 15px; line-height: 1.6; max-width: 58ch;
  color: var(--color-neutral-700); margin: 0;
  transition: opacity 440ms ease, transform 440ms var(--tl-ease), color 440ms ease; }
@keyframes tlEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Gaining .is-on starts the animation, so no state needs unwinding later. */
.tl-step.is-on .tl-b { color: var(--color-neutral-800); animation: tlEnter 440ms var(--tl-ease) both; }
@media (hover: hover) {
  .tl-step:hover .tl-node { transform: scale(1.03); box-shadow: inset 0 0 0 1px var(--color-accent); }
  .tl-step:hover .tl-t { color: var(--navy); }
  .tl-step:hover .tl-b { color: var(--color-neutral-800); }
}
@media (max-width: 820px) {
  .tl-step { grid-template-columns: 37px minmax(0, 1fr); gap: 0 22px; }
  .tl-node { grid-row: 1 / span 2; }
  .tl-t { margin-bottom: 9px; }
  .tl-b { grid-column: 2; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-node, .tl-ring, .tl-dot, .tl-n, .tl-t, .tl-b { transition: none !important; }
  .tl-step.is-on .tl-b { animation: none !important; }
  .tl-fill { height: 100% !important; }
}
/* Deal intake — ruled fields with caption labels, sized to read as an
   acquisition form rather than a contact form. */
.dform { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; max-width: 620px; }
.dform > * { min-width: 0; }
.dfield-wide { grid-column: 1 / -1; }
.dfield label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 8px; transition: color 260ms ease; }
.dfield:focus-within label { color: var(--color-accent-700); }
.dfield input, .dfield select, .dfield textarea { width: 100%; box-sizing: border-box; background: none;
  border: 0; border-bottom: 1px solid var(--color-neutral-400); border-radius: 0; padding: 7px 0 10px;
  font-family: var(--font-body); font-size: 16px; color: var(--color-text);
  transition: border-color 260ms ease; }
.dfield textarea { resize: vertical; min-height: 104px; line-height: 1.6; }
.dfield select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-neutral-600) 50%),
    linear-gradient(135deg, var(--color-neutral-600) 50%, transparent 50%);
  background-position: right 6px center, right 1px center; background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat; padding-right: 20px; }
.dfield input:hover, .dfield select:hover, .dfield textarea:hover { border-bottom-color: var(--color-neutral-600); }
.dfield input:focus, .dfield select:focus, .dfield textarea:focus { outline: none; border-bottom-color: var(--color-accent); }
.dform-foot { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 6px; }
.dsubmit { display: inline-flex; align-items: center; gap: 13px; padding: 16px 26px; border: 0; cursor: pointer;
  background: var(--gold); color: var(--navy); font-family: var(--font-heading); font-weight: 500;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 300ms ease, color 300ms ease; }
.dsubmit:hover { background: var(--gold-ink); color: var(--page); }
.dsubmit:active { background: var(--gold-press); color: var(--navy); }
.dsubmit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.dsubmit-arrow { display: inline-block; transition: transform 300ms var(--tl-ease); }
.dsubmit:hover .dsubmit-arrow { transform: translateX(5px); }
.dmail { font-size: 13.5px; color: var(--color-neutral-700); text-decoration: none;
  border-bottom: 1px solid var(--color-neutral-400); padding-bottom: 2px; }
.req { color: var(--color-accent-700); font-weight: 700; }
.dnote { font-size: 12.5px; line-height: 1.64; letter-spacing: 0.01em; color: var(--color-neutral-600); }
/* Submission feedback lives in the form, never in an alert. */
.dstatus { margin: 0; font-size: 13.5px; line-height: 1.55; max-width: 46ch; display: none; }
.dstatus.is-shown { display: block; }
.dstatus.is-ok { color: var(--color-accent-700); font-weight: 500; }
.dstatus.is-bad { color: var(--color-neutral-800); }
.dsubmit[disabled] { opacity: 0.45; cursor: default; }
.dfield input:user-invalid, .dfield select:user-invalid, .dfield textarea:user-invalid { border-bottom-color: var(--color-accent); }
.dform.is-sent .dfield, .dform.is-sent .dnote, .dform.is-sent .dsubmit { display: none; }
.dmail:hover { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }
@media (max-width: 640px) { .dform { grid-template-columns: 1fr; gap: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .dfield label, .dfield input, .dfield select, .dfield textarea, .dsubmit, .dsubmit-arrow { transition: none !important; }
}
/* Areas served — each state name takes a gold wash that wipes in behind it,
   one after the next, when the line comes into view. The wash sits behind
   the text so the ink keeps full contrast. */
.geo-m { position: relative; display: inline-block; font-weight: 700; color: var(--navy); white-space: nowrap; }
.geo-m::before { content: ''; position: absolute; left: -3px; right: -3px; bottom: 1px; height: 0.58em;
  background: var(--color-accent-200); z-index: -1; transform: scaleX(0); transform-origin: left center;
  transition: transform 560ms var(--tl-ease); }
.geo.is-lit .geo-m::before { transform: scaleX(1); }
.geo.is-lit .geo-m:nth-of-type(2)::before { transition-delay: 130ms; }
.geo.is-lit .geo-m:nth-of-type(3)::before { transition-delay: 260ms; }
.geo.is-lit .geo-m:nth-of-type(4)::before { transition-delay: 390ms; }
@media (prefers-reduced-motion: reduce) {
  .geo-m::before { transform: scaleX(1); transition: none; }
}
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; max-width: 560px; }
.cform > * { min-width: 0; }
@media (max-width: 640px) { .cform { grid-template-columns: 1fr; } }
.crow { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--color-neutral-200); }
/* The guide asks for flush-left labels; the component centers them. */
/* Buttons are the one solid object: gold fill, navy label, flush left. */
.btn { justify-content: flex-start; text-align: left; padding: 15px 26px; text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em; border-radius: 0;
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease; }
.btn-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-ink); color: var(--page); border-color: var(--gold-ink); }
.btn-primary:active { background: var(--gold-press); color: var(--navy); }
.btn-secondary { background: none; color: var(--color-text); border: 1px solid var(--color-neutral-400); }
.btn-secondary:hover { background: var(--color-accent-100); color: var(--gold-ink); border-color: var(--gold-ink); }
.btn-secondary:active { background: var(--color-accent-200); }
.btn:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.foot-top { display: block; }
.foot-top > * { min-width: 0; }
@media (max-width: 940px) {
  .contact-panel { grid-template-columns: 1fr; gap: 32px; }
  .foot-top { grid-template-columns: 1fr; gap: 26px; }
}
html[data-accent="ink"] .poster { background: var(--color-text); }
.poster-in { max-width: 1440px; margin: 0 auto; padding: 96px clamp(24px, 4vw, 72px); }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
.foot-link { color: rgba(255,255,255,0.78); text-decoration: none; transition: color 240ms ease; }
.foot-link:hover { color: var(--gold); }
.soon { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-ink); padding: 2px 6px; margin-left: 4px; vertical-align: 1px; }
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.four > * { min-width: 0; }
.pass { list-style: none; margin: 0; padding: 0; }
.pass li { font-size: 15px; line-height: 1.5; color: var(--color-neutral-800); padding: 12px 0; border-top: 1px solid var(--color-neutral-300); }
.pass li::before { content: '—'; color: var(--gold-ink); margin-right: 10px; }
.arow-head { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-neutral-300); }
.markets { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; }
.markets span { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.mk { padding-top: 22px; border-top: 2px solid var(--color-text); }
.partners { background: var(--navy); color: #fff; }
.btn-onnavy { background: none; color: #fff; border: 1px solid rgba(255,255,255,0.55); }
.btn-onnavy:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 940px) {
  .four { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) { .four { grid-template-columns: 1fr; } }
.arow { display: grid; grid-template-columns: minmax(0, 1.4fr) 1.2fr 1.2fr 0.8fr; gap: 24px; padding: 15px 0; font-size: 15px; align-items: baseline; }
.three, .two, .row, .arow { min-width: 0; }
.three > *, .two > *, .row > *, .arow > * { min-width: 0; }
.media { width: 100%; height: 300px; background: var(--color-neutral-200); margin-bottom: 20px; }
.portrait { width: 100%; height: 420px; background: var(--color-neutral-200); margin-bottom: 22px; }
@media (min-width: 941px) { .media { height: 260px; } }
@media (max-width: 940px) {

  .row, .two, .three { grid-template-columns: 1fr !important; gap: 14px !important; }
  .sec { padding-top: 56px; padding-bottom: 64px; }
  .navlinks { display: none !important; }
  .arow { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .arow > span:first-child { grid-column: 1 / -1; font-weight: 600; margin-bottom: 4px; }
  .arow > span:nth-child(n+2)::before { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 2px; }
  .arow > span:nth-child(2)::before { content: 'Market'; }
  .arow > span:nth-child(3)::before { content: 'Focus'; }
  .arow > span:nth-child(4)::before { content: 'Status'; }
  .arow.arow-head { display: none; }
}

/* Nav labels stay on one line; below the width where they fit, the section
   links drop out (the same as the design's tablet breakpoint) and only the
   wordmark and contact link remain. */
header .k { white-space: nowrap; }
@media (max-width: 1399px) { .navlinks { display: none !important; } }