/* LA Operations Co. One stylesheet for the homepage, writing, and legal pages.
   Type is Barlow, drawn from California road signs and licence plates.
   Color is the brand's own navy and orange on white. */

@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('/assets/fonts/barlow-semi-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('/assets/fonts/barlow-semi-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --white: #FFFFFF;
  --ink: #0A0E1A;
  --ink-2: #2E3445;
  --muted: #5A6070;
  --line: #D9DBE1;
  --line-strong: #0A0E1A;
  --tint: #F1F2F5;
  --orange: #FF6B35;
  --orange-ink: #B23C0A;
  --on-ink: #FFFFFF;
  --on-ink-2: #B9BDC9;

  --body: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --head: 'Barlow Semi Condensed', 'Barlow', 'Arial Narrow', Arial, sans-serif;

  --shell: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 1.125rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 2px; }
.band-ink :focus-visible, .site-foot :focus-visible { outline-color: var(--orange); }
.band-orange :focus-visible { outline-color: var(--ink); }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 16px; top: -64px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.08; color: inherit; }
.h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: 1.02; }
.h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); font-weight: 600; line-height: 1.2; }
/* The full stop from the wordmark, reused as the one recurring mark. */
.dot::after { content: '.'; color: var(--orange); }
.band-orange .dot::after { color: var(--ink); }
.lede { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.small { font-size: 0.95rem; color: var(--muted); }

/* ---------- Links and buttons ---------- */
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--orange); transition: color 160ms ease; }
.link:hover { color: var(--orange-ink); }
.band-ink .link:hover, .site-foot a:hover { color: var(--orange); }
.band-orange .link { text-decoration-color: var(--ink); }
.band-orange .link:hover { color: var(--ink); text-decoration-thickness: 3px; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border: 2px solid var(--ink); border-radius: 4px; background: var(--ink); color: #fff; font-weight: 600; font-size: 1.05rem; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.btn:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn .arrow { width: 18px; height: 18px; flex: none; }
.btn-sm { padding: 11px 16px; font-size: 0.98rem; }
.band-orange .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--line); transition: transform 300ms var(--ease); }
.site-head.is-hidden { transform: translateY(-101%); }
.head-row { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.mark { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; margin-right: auto; }
.mark-word { font-family: var(--head); font-weight: 700; font-size: 1.75rem; letter-spacing: 0; }
.mark-word::after { content: '.'; color: var(--orange); }
.mark-sub { margin-top: 3px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.nav a { text-decoration: none; font-size: 1.02rem; font-weight: 500; color: var(--ink-2); padding: 8px 0; border-bottom: 2px solid transparent; transition: color 160ms ease, border-color 160ms ease; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); border-bottom-color: var(--orange); }
.menu-btn { display: none; background: none; border: 2px solid var(--ink); border-radius: 4px; padding: 9px 14px; font-weight: 600; font-size: 0.98rem; cursor: pointer; }
.menu { border-top: 1px solid var(--line); padding: 4px 0 16px; }
.menu a { display: block; padding: 14px 0; text-decoration: none; font-family: var(--head); font-weight: 600; font-size: 1.4rem; border-bottom: 1px solid var(--line); }
.menu a:last-child { border-bottom: 0; }
@media (max-width: 900px) { .nav, .head-cta { display: none; } .menu-btn { display: inline-block; } .head-row { min-height: 64px; } }
@media (min-width: 901px) { .menu { display: none !important; } }

/* ---------- Hero: statement on the left, fact sheet on the right ---------- */
.home-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.home-hero .lede { margin-top: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }
.sheet { border-top: 4px solid var(--ink); }
.sheet caption { text-align: left; font-family: var(--head); font-weight: 600; font-size: 1.15rem; padding: 14px 0 12px; }
.sheet table, table.sheet { width: 100%; border-collapse: collapse; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 13px 0; border-top: 1px solid var(--line); font-size: 1.02rem; }
.sheet th { width: 38%; font-weight: 500; color: var(--muted); padding-right: 16px; }
.sheet td { font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 8vw, 120px) 0; }
.section + .section:not(.band-ink):not(.band-orange):not(.band-tint) { border-top: 1px solid var(--line); }
.intro { max-width: 46rem; }
.intro .lede { margin-top: 18px; }
.intro + * { margin-top: clamp(36px, 4.5vw, 60px); }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-ink .lede, .band-ink p { color: var(--on-ink-2); }
.band-orange { background: var(--orange); color: var(--ink); }
.band-orange .lede { color: var(--ink); }
.band-tint { background: var(--tint); }

/* How we work: a statement and three plain paragraphs */
.approach { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.approach .lede { margin-top: 18px; }
.points p { padding: 20px 0; border-top: 1px solid var(--line); color: var(--ink-2); max-width: 40em; }
.points p:first-child { border-top: 4px solid var(--ink); }
.points b { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .approach { grid-template-columns: 1fr; } }

/* What we do: an index you can scan, each row opens for detail */
.index { border-top: 4px solid var(--ink); }
.index details { border-bottom: 1px solid var(--line); }
.index summary { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 28px; gap: clamp(14px, 3vw, 44px); align-items: baseline; padding: 20px 0; cursor: pointer; list-style: none; }
.index summary::-webkit-details-marker { display: none; }
.index .name { font-family: var(--head); font-weight: 600; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.15; }
.index .what { color: var(--ink-2); }
.index .sign { justify-self: end; align-self: center; width: 18px; height: 18px; position: relative; }
.index .sign::before, .index .sign::after { content: ''; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--ink); }
.index .sign::after { transform: rotate(90deg); transition: transform 160ms ease; }
.index details[open] .sign::after { transform: rotate(0deg); }
.index summary:hover .name { color: var(--orange-ink); }
.index .more { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 28px; gap: clamp(14px, 3vw, 44px); padding: 2px 0 28px; }
.index .more > div { grid-column: 2; }
.index .more p { color: var(--ink-2); max-width: 40em; }
.index .more ul { margin: 16px 0 18px; padding-left: 1.1em; list-style: square; columns: 2; column-gap: 40px; }
.index .more li { padding: 3px 0; break-inside: avoid; }
.index .more li::marker { color: var(--orange); }
@media (max-width: 760px) {
  .index summary { grid-template-columns: 1fr 28px; }
  .index .what { grid-column: 1; grid-row: 2; }
  .index .sign { grid-column: 2; grid-row: 1; }
  .index .more { grid-template-columns: 1fr; }
  .index .more > div { grid-column: 1; }
  .index .more ul { columns: 1; }
}

/* Case study: the story beside its real week-by-week record */
.case-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.case-grid p { margin-top: 18px; color: var(--on-ink-2); max-width: 34em; }
.case-grid .btn { margin-top: 30px; background: #fff; border-color: #fff; color: var(--ink); }
.case-grid .btn:hover { background: var(--orange); border-color: var(--orange); }
.log { width: 100%; border-collapse: collapse; border-top: 4px solid var(--orange); }
.log caption { text-align: left; font-family: var(--head); font-weight: 600; font-size: 1.15rem; padding: 14px 0 12px; color: #fff; }
.log th, .log td { text-align: left; vertical-align: top; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 1.02rem; }
.log th { width: 6.5em; font-family: var(--head); font-weight: 600; color: var(--orange); white-space: nowrap; padding-right: 18px; }
.log td { color: #fff; }
.sectors { margin-top: clamp(44px, 6vw, 72px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.2); color: var(--on-ink-2); max-width: 52rem; }
.sectors b { color: #fff; font-weight: 600; }
@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } }

/* Engagements: a comparison table, because it is a comparison */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; border-top: 4px solid var(--ink); }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 18px 24px 18px 0; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--head); font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.15; width: 28%; }
.compare thead th:first-child { width: 16%; }
.compare thead th small { display: block; margin-top: 6px; font-family: var(--body); font-size: 0.9rem; font-weight: 600; color: var(--orange-ink); }
.compare tbody th { font-weight: 500; color: var(--muted); font-size: 1rem; }
.compare td { color: var(--ink-2); }
.after-table { margin-top: 26px; }

/* Snapshot: the offer, on the brand's orange */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); counter-reset: none; }
.step { border-top: 4px solid var(--ink); padding-top: 16px; }
.step .when { font-family: var(--head); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1; }
.step .h3 { margin-top: 14px; }
.step p { margin-top: 8px; max-width: 26em; }
.snapshot-cta { margin-top: clamp(36px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* Writing and about, side by side */
.two-up { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.reads { margin-top: 26px; border-top: 4px solid var(--ink); }
.reads a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.reads b { display: block; font-family: var(--head); font-weight: 600; font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.2; transition: color 160ms ease; }
.reads span { display: block; margin-top: 4px; font-size: 0.98rem; color: var(--muted); }
.reads a:hover b { color: var(--orange-ink); }
.reads-foot { margin-top: 22px; }
.about p { margin-top: 18px; color: var(--ink-2); }
.about p.small { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 900px) { .two-up { grid-template-columns: 1fr; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-aside .lede { margin-top: 18px; }
.next { margin-top: 28px; padding-left: 1.2em; list-style: decimal; }
.next li { padding: 6px 0 6px 6px; }
.next li::marker { font-family: var(--head); font-weight: 700; color: var(--orange-ink); }
.direct { margin-top: 24px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--ink); padding: clamp(22px, 3vw, 36px); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 1rem; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; background: #fff; border: 1.5px solid #8A90A0; border-radius: 4px; padding: 12px 13px; font-size: 1.05rem; transition: border-color 140ms ease, box-shadow 140ms ease; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230A0E1A' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 38px; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.45); }
.field [aria-invalid='true'] { border-color: #B3261E; }
.field .err { font-size: 0.92rem; font-weight: 500; color: #B3261E; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 4px; }
.form-foot p { font-size: 0.95rem; color: var(--muted); max-width: 28em; }
.form-status { grid-column: 1 / -1; padding: 13px 15px; border: 1.5px solid #B3261E; border-radius: 4px; color: #8C1D18; background: #FCEEEE; font-weight: 500; }
.form-done { border-top: 4px solid var(--ink); padding: 26px 0; }
.form-done p { margin-top: 10px; color: var(--ink-2); max-width: 32em; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .form { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); color: var(--on-ink-2); padding: clamp(48px, 6vw, 80px) 0 28px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: clamp(26px, 4vw, 56px); padding-bottom: clamp(36px, 5vw, 60px); }
.foot-mark { font-family: var(--head); font-weight: 700; font-size: 2.6rem; line-height: 1; color: #fff; }
.foot-mark::after { content: '.'; color: var(--orange); }
.foot-line { margin-top: 14px; max-width: 24em; font-size: 1rem; }
.site-foot h2 { font-family: var(--head); font-weight: 600; font-size: 1.1rem; color: #fff; margin-bottom: 12px; }
.site-foot li { padding: 4px 0; font-size: 1rem; }
.site-foot a { color: #fff; text-decoration: none; transition: color 160ms ease; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.95rem; }
.foot-base nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-base a { color: var(--on-ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-top > div:first-child { grid-column: 1 / -1; } }

/* ---------- Article pages: writing and legal ---------- */
.wrap { max-width: 740px; margin-inline: auto; padding-inline: 24px; }
.hero { display: flex; flex-direction: column; padding: clamp(40px, 6vw, 80px) 0 clamp(22px, 3vw, 36px); border-bottom: 4px solid var(--ink); margin-bottom: clamp(26px, 4vw, 44px); }
.hero h1 { order: 1; font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.06; }
.hero .meta { order: 2; margin-top: 18px; }
.hero .kicker { order: 3; margin-top: 6px; }
.kicker { font-size: 0.98rem; font-weight: 600; color: var(--orange-ink); }
.meta { color: var(--muted); font-size: 1rem; }
.meta a { color: var(--muted); }
article { padding-bottom: clamp(48px, 6vw, 88px); font-size: 1.16rem; line-height: 1.65; color: var(--ink-2); }
article h2 { font-size: clamp(1.6rem, 2.8vw, 2.05rem); line-height: 1.14; color: var(--ink); margin: 2.2em 0 0.55em; }
article h3 { font-family: var(--body); font-weight: 600; font-size: 1.18rem; line-height: 1.3; color: var(--ink); margin: 1.7em 0 0.4em; }
article p { margin: 0 0 1.1em; }
article ul, article ol { margin: 0 0 1.1em 1.25em; list-style: revert; }
article li { margin-bottom: 0.45em; padding-left: 0.15em; }
article li::marker { color: var(--orange-ink); }
article a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
article a:hover { color: var(--orange-ink); }
article strong { color: var(--ink); font-weight: 600; }
article blockquote { margin: 0 0 1.1em; padding: 18px 22px; background: var(--tint); color: var(--ink); font-weight: 500; }
.quick-answer { background: var(--tint); padding: 24px 26px 26px; margin: 0 0 2.2em; }
.quick-answer .qa-label { display: block; font-family: var(--head); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-bottom: 8px; }
.quick-answer p { margin: 0; color: var(--ink); }
.table-scroll { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.table-scroll table { margin: 0; min-width: 520px; }
article table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 1.02rem; line-height: 1.45; border-top: 4px solid var(--ink); }
article th, article td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
article th { color: var(--ink); font-weight: 600; }
.faq h3 { margin-top: 1.5em; }
.cta { background: var(--orange); color: var(--ink); padding: clamp(26px, 4vw, 40px); margin: 2.8em 0; }
.cta h2 { margin: 0 0 10px; }
.cta p { margin: 0 0 22px; color: var(--ink); }
.cta .btn { text-decoration: none; color: #fff; }
.cta .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.post-grid { margin-bottom: clamp(48px, 6vw, 88px); }
.post-card { display: block; padding: 24px 0 26px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.post-card:first-child { padding-top: 0; }
.post-card h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); line-height: 1.15; margin: 0 0 8px; transition: color 160ms ease; }
.post-card p { color: var(--ink-2); font-size: 1.06rem; max-width: 38em; }
.post-card .kicker { display: block; margin-top: 10px; font-size: 0.95rem; }
.post-card { display: flex; flex-direction: column; }
.post-card h2 { order: 1; } .post-card p { order: 2; } .post-card .kicker { order: 3; }
.post-card:hover h2 { color: var(--orange-ink); }

/* ---------- Motion: one entrance on load, then the page holds still ---------- */
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.home-hero .h1, .home-hero .lede, .home-hero .hero-actions, .home-hero .sheet tr, .home-hero .sheet caption { animation: enter 520ms var(--ease) both; }
.home-hero .lede { animation-delay: 80ms; }
.home-hero .hero-actions { animation-delay: 160ms; }
.home-hero .sheet caption { animation-delay: 220ms; }
.home-hero .sheet tr:nth-child(1) { animation-delay: 280ms; }
.home-hero .sheet tr:nth-child(2) { animation-delay: 330ms; }
.home-hero .sheet tr:nth-child(3) { animation-delay: 380ms; }
.home-hero .sheet tr:nth-child(4) { animation-delay: 430ms; }
.home-hero .sheet tr:nth-child(5) { animation-delay: 480ms; }
.home-hero .sheet tr:nth-child(6) { animation-delay: 530ms; }
.home-hero .sheet { position: relative; border-top-color: transparent; }
.home-hero .sheet::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: var(--ink); transform-origin: 0 50%; animation: wipe 700ms var(--ease) 120ms both; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 140ms ease both vt-out; }
::view-transition-new(root) { animation: 220ms ease both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .site-head.is-hidden { transform: none; }
  @view-transition { navigation: none; }
}

@media print {
  .site-head, .site-foot, .cta, #contact { display: none !important; }
}