/* Advocates — design prototype.
   Built on tasteskill base.css. Direction: "The sentence is the layout" (seed 1688524401).
   Palette "Sheet and biro". Type: Zodiak for Latin display, Zen Kaku Gothic New for Japanese and text. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f4f4f4;
  --ink: #111111;
  --muted: #6b6b6b;
  --accent: #a51c3a;
  /* the accent mixed 62:38 with the --surface grey: as pale as it goes while large text keeps 3:1 there (3.25:1) */
  --accent-pale: #c36e81;
  --accent-ink: #ffffff;
  --field-1: #111111;
  --field-1-ink: #ffffff;
  --field-1-muted: #b3b3b3;

  --font-display: "Zodiak", "Zen Kaku Gothic New", serif;
  --font-text: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.05rem + 1.1vw, 2.25rem);
  --step-head: clamp(2.125rem, 1.2rem + 3.2vw, 4.25rem);
  --step-display: clamp(2.25rem, 9.4vw, 9.5rem);

  --margin: clamp(1.25rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(7.5rem, 14vw, 13.75rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 300ms;
  --t-reveal: 800ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; line-break: strict; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.85; letter-spacing: 0.02em; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 6rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The wine is too dark to show focus on the black fields, so the ring leans towards each area's ink there. */
.policy :focus-visible, .footer :focus-visible { outline-color: color-mix(in srgb, var(--accent) 70%, var(--field-1-ink)); }
.site-header :focus-visible { outline-color: color-mix(in srgb, var(--accent) 70%, var(--header-ink, var(--ink))); }
.to-top:focus-visible { outline-color: color-mix(in srgb, var(--accent) 70%, var(--corner-ink, var(--ink))); }

/* ---------- type ---------- */
/* Japanese lines break only at the phrase boundaries marked with <wbr> in the HTML (word-break: keep-all on body). */
h1, h2, h3 { font-weight: inherit; text-wrap: balance; font-feature-settings: "palt"; }
.head { font-size: var(--step-head); line-height: 1.25; font-weight: 300; letter-spacing: 0.01em; }
.lead { font-size: var(--step-lead); line-height: 1.6; font-weight: 400; }
.small { font-size: var(--step-small); line-height: 1.6; }
.muted { color: var(--muted); }
p { max-width: 36em; text-wrap: pretty; }
.nums { font-variant-numeric: tabular-nums; }
.latin { font-family: var(--font-display); }
.w-who { color: var(--accent); }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: 0.75rem; z-index: 20; padding: 0.75rem 1rem; background: var(--ink); color: var(--bg); }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.6rem; background: var(--header-ink, var(--ink)); color: var(--header-ground, var(--bg)); border-radius: var(--radius); text-decoration: none; white-space: nowrap; font-weight: 500; letter-spacing: 0.08em; transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease, color var(--t-ui) ease; }
.button:active { transform: scale(0.97); }
.link-plain { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--t-hover) ease, text-underline-offset var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background-color: color-mix(in srgb, var(--header-ink, var(--ink)) 80%, var(--header-ground, var(--bg))); }
  .link-plain:hover { text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}

/* ---------- header: takes the ground and ink of the chapter beneath it ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); min-height: 4.5rem; padding: 0.75rem var(--margin); background: var(--header-ground, var(--bg)); color: var(--header-ink, var(--ink)); transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.wordmark { margin-right: auto; font-family: var(--font-display); font-weight: 300; font-size: var(--step-lead); line-height: 1; letter-spacing: -0.01em; text-decoration: none; }
.site-nav { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.site-nav a, .menu-panel a, .footer-meta nav a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.4em; transition: text-decoration-color var(--t-hover) ease, text-underline-offset var(--t-hover) var(--ease-out); }
.site-nav a:hover, .site-nav a:focus-visible, .footer-meta nav a:hover, .footer-meta nav a:focus-visible { text-decoration-color: currentColor; text-underline-offset: 0.25em; }
.menu { display: none; position: relative; order: 2; }
.site-header .button { order: 1; }
.menu summary { list-style: none; cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; display: flex; align-items: center; justify-content: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu-icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.menu-icon-close { display: none; }
.menu[open] .menu-icon-open { display: none; }
.menu[open] .menu-icon-close { display: inline; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 0.5rem); display: grid; gap: 0.25rem; min-width: 14rem; padding: 0.75rem 1rem; background: var(--bg); color: var(--ink); box-shadow: 0 12px 32px rgb(0 0 0 / 0.18); } /* taste-skill-ignore: a real floating menu */
.menu-panel a { padding-block: 0.5rem; }

/* ---------- hero: two fields, the sentence across the seam ---------- */
.hero { position: relative; height: 130svh; overflow: clip; --seam: 50svh; }
.hero-field { position: absolute; inset-inline: 0; }
.hero-field--paper { top: 0; height: var(--seam); background: var(--bg); }
.hero-field--ink { top: var(--seam); bottom: 0; background: var(--field-1); }
.hero-title { --seam-offset: 1.333em; position: absolute; left: var(--margin); right: var(--margin); top: calc(var(--seam) - var(--seam-offset)); height: 2em; margin: 0; font-family: var(--font-display); font-weight: 100; font-size: var(--step-display); line-height: 1; letter-spacing: -0.01em; word-break: normal; text-wrap: nowrap; font-feature-settings: normal; }
.hero-copy { position: absolute; inset: 0; }
.hero-copy .line { display: block; white-space: nowrap; }
.hero-copy--paper { color: var(--ink); clip-path: inset(0 0 calc(100% - var(--seam-offset)) 0); }
.hero-copy--ink { color: var(--field-1-ink); clip-path: inset(var(--seam-offset) 0 0 0); }
.slot { position: relative; display: inline-block; width: 2.4em; height: 0.7em; margin-inline: 0.04em 0.1em; overflow: hidden; vertical-align: baseline; background: var(--surface); }
.slot--blank { background: none; }
/* Crossfade: the next photo fades in on top while the previous one stays fully visible underneath, so the frame
   never dims. The fade time is shared with main.js (FADE). */
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity, transform; }
.slot img.is-on { z-index: 2; opacity: 1; transition: opacity 1000ms var(--ease-in-out); }
.slot img.is-leaving { z-index: 1; opacity: 1; }
.hero-lead { position: absolute; left: var(--margin); right: var(--margin); top: calc(100svh - 3.5rem); transform: translateY(-100%); color: var(--field-1-ink); max-width: 30em; }

/* ---------- belief: the sentence holds while the reasons pass ---------- */
.belief { background: var(--bg); padding-block: var(--section) calc(var(--section) / 2); }
.belief-grid { align-items: start; }
.belief-pin { grid-column: 1 / span 6; position: sticky; top: 32svh; }
.belief-steps { grid-column: 7 / -1; display: grid; gap: 14svh; padding-block: 8svh 4svh; }
.belief-step p + p { margin-top: 0.6em; }
.belief-step figure { margin-top: 1.75rem; }
.belief-step img { width: 100%; object-fit: cover; }
.belief-step--a figure { width: 62%; }
.belief-step--a img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
.belief-step--b img { aspect-ratio: 16 / 10; object-position: 50% 50%; }
.belief-step--c figure { width: 52%; margin-left: auto; }
.belief-step--c img { aspect-ratio: 1 / 1; object-position: 88% 50%; }

/* ---------- specialty: three specialties, and a blank in the sentence that takes one example after another ---------- */
.specialty { --mark-w: clamp(9rem, 26vw, 24rem); --mark-gap: clamp(1.25rem, 2.6vw, 2.75rem); background: var(--surface); padding-block: calc(var(--section) * 0.7); }
.specialty .wrap { container-type: inline-size; }
/* Without script only the sentences show, each with its own label; the photo and the names need the script. */
.specialty-mark { display: none; }
.js .specialty-grid { display: grid; grid-template-columns: var(--mark-w) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--mark-gap); }
.js .specialty-mark { display: block; grid-row: 1 / span 2; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg); }
.specialty-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
/* Crossfade as in the hero: the next photo fades in on top while the previous one stays visible underneath. */
.specialty-mark img.is-on { z-index: 2; opacity: 1; transition: opacity 400ms var(--ease-in-out); }
.specialty-mark img.is-leaving { z-index: 1; opacity: 1; }
/* The three names stay on one line: the size gives way before the line would wrap. */
.specialty-head { font-size: min(var(--step-head), (100cqi - var(--mark-w) - var(--mark-gap)) / 12.8); font-weight: 300; line-height: 1.2; }
.specialty-head[hidden] { display: none; }
.specialty-tabs { display: flex; flex-wrap: wrap; column-gap: 0.55em; }
.specialty-tab { padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: var(--accent-pale); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: max(2px, 0.035em); text-underline-offset: 0.2em; transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease; }
.specialty-tab[aria-pressed="true"] { color: var(--accent); text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .specialty-tab:hover { color: var(--accent); } }
.specialty-times { max-width: none; }
.specialty-panels { margin-top: clamp(2rem, 4vw, 3.5rem); }
.specialty-panel { max-width: 26em; font-size: var(--step-lead); line-height: 1.6; }
.specialty-panel + .specialty-panel { margin-top: 1.25em; }
.specialty-who { display: block; font-weight: 500; }
.nobr { white-space: nowrap; }
/* The blank: a white box as wide as its longest example, so the sentence never reflows when the example changes. */
.word-slot { display: inline-grid; justify-items: center; margin-inline: 0.15em; padding: 0 0.35em; overflow: hidden; line-height: 1.35; background: var(--bg); }
.word-slot > span { grid-area: 1 / 1; }
html:not(.js) .word-slot > span:not(:first-child) { visibility: hidden; }
/* With script, only one panel shows, stacked in one cell so the section keeps the height of the longest. */
.js .specialty-who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .specialty-panels { display: grid; align-content: start; }
.js .specialty-panel { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.js .specialty-panel.is-on { opacity: 1; visibility: visible; transition: opacity 260ms ease 200ms; }
/* Waiting examples rest unseen in place; only the arriving one (up from below) and the leaving one (out the top) move.
   Shown words take the panel's visibility, so the word of a hidden panel never lies over the sentence on show. */
.js .word-slot > span { opacity: 0; visibility: hidden; }
.js .word-slot > span.is-on { opacity: 1; visibility: inherit; animation: word-in 450ms var(--ease-out) both; }
.js .word-slot > span.is-leaving { visibility: inherit; animation: word-out 450ms var(--ease-out) both; }
@keyframes word-in { from { opacity: 0; transform: translateY(75%); } }
@keyframes word-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-75%); } }

/* ---------- companies: names and descriptions hang from one axis ---------- */
.companies { background: var(--bg); padding-block: var(--section); }
.companies-head { margin-left: 35%; display: grid; gap: 1.75rem; }
.rows { margin: clamp(4rem, 8vw, 7rem) 0 0 35%; display: grid; gap: clamp(2rem, 3.5vw, 3rem); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--gutter); align-items: baseline; }
.companies-cta { margin: clamp(4rem, 8vw, 7.5rem) 0 0 35%; }

/* ---------- policy: the commitments as one sentence, on the dark field ---------- */
.policy { background: var(--field-1); color: var(--field-1-ink); padding-block: calc(var(--section) * 0.75); }
.policy-sentence { max-width: 40em; font-size: var(--step-lead); line-height: 1.7; font-feature-settings: "palt"; }
.policy-open { font-weight: 500; }
.js .policy-sentence { color: #808080; }
.js .policy-open { color: var(--field-1-ink); }
.policy-item { transition: color 400ms ease; }
.js .policy-item.is-lit { color: var(--field-1-ink); }
.policy-note { margin-top: 2.5rem; max-width: none; color: var(--field-1-muted); }
.policy-note a { color: var(--field-1-ink); }

/* ---------- news: the list hangs from the companies axis; a title opens its text ---------- */
.news { background: var(--surface); padding-block: var(--section); row-gap: clamp(3rem, 6vw, 5rem); }
.news-title { grid-column: 1 / -1; }
.news-title .indent { padding-left: 3vw; }
.news-list { grid-column: 1 / -1; margin-left: 35%; display: grid; gap: 1.5rem; }
.news-list li { display: grid; grid-template-columns: 8.5em 6.5em minmax(0, 1fr); column-gap: 1rem; align-items: baseline; }
.news-list time, .news-kind { color: var(--muted); }
.news-item summary { cursor: pointer; list-style: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: text-decoration-thickness var(--t-hover) ease, text-underline-offset var(--t-hover) ease; }
.news-item summary::-webkit-details-marker { display: none; }
.news-item p { margin-top: 0.75rem; }
@media (hover: hover) and (pointer: fine) { .news-item summary:hover { text-decoration-thickness: 2px; text-underline-offset: 0.2em; } }

/* ---------- footer: the address is the headline ---------- */
.footer { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding: clamp(5rem, 9vw, 8rem) var(--margin) 2rem; background: var(--field-1); color: var(--field-1-ink); }
.footer-mail { justify-self: start; display: grid; gap: clamp(1rem, 2vw, 1.75rem); text-decoration: none; }
.footer-mail-lead { font-size: var(--step-lead); line-height: 1.6; }
.footer-mail-address { font-family: var(--font-display); font-weight: 100; font-size: var(--step-display); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.footer-mail-address .at { display: block; }
@media (hover: hover) and (pointer: fine) {
  .footer-mail:hover > span { text-decoration: underline; text-decoration-thickness: 2px; }
  .footer-mail:hover .footer-mail-lead { text-underline-offset: 0.3em; }
  .footer-mail:hover .footer-mail-address { text-underline-offset: 0.12em; }
}
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; padding-right: calc(3rem + var(--gutter)); font-size: var(--step-small); line-height: 1.7; }
.footer-meta nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.credits summary { cursor: pointer; }
.credits p { max-width: 60em; margin-top: 0.75rem; font-size: var(--step-body); color: var(--field-1-muted); }

/* ---------- back to the top: appears once scrolling starts, inverts against what is beneath ---------- */
.to-top { position: fixed; right: var(--margin); bottom: var(--margin); z-index: 9; display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--corner-ink, var(--ink)); color: var(--corner-ground, var(--bg)); transition: opacity 240ms ease, visibility 240ms, transform 240ms var(--ease-out), background-color var(--t-ui) ease, color var(--t-ui) ease; }
.to-top svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.js .to-top:not(.is-shown) { opacity: 0; visibility: hidden; transform: translateY(0.5rem); }
.to-top:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .to-top:hover { background-color: color-mix(in srgb, var(--corner-ink, var(--ink)) 80%, var(--corner-ground, var(--bg))); } }

/* ---------- sub pages ---------- */
.page { padding: calc(4.5rem + var(--section) / 2) var(--margin) var(--section); }
.page-title { font-size: var(--step-head); line-height: 1.25; font-weight: 300; }
.page-lead { margin-top: 2rem; }
.page-body { margin-top: clamp(3rem, 6vw, 5rem); display: grid; gap: 2.5rem; max-width: 46rem; margin-left: 35%; }
.page-body h2 { font-size: var(--step-lead); line-height: 1.5; font-weight: 500; }
.page-body section > * + * { margin-top: 0.75rem; }
/* Numbered clauses as in Japanese legal documents: (1) (2) (3), with the text hanging clear of the number. */
@counter-style paren-decimal { system: extends decimal; prefix: "("; suffix: ") "; }
.page-body ol { max-width: 36em; padding-left: 2.75em; list-style: paren-decimal; }
.page-body li + li { margin-top: 0.4em; }
.facts { width: 100%; border-collapse: collapse; }
.facts th, .facts td { padding: 0 0 1.4rem; text-align: left; vertical-align: top; font-weight: 400; }
.facts th { width: 9em; padding-right: 1.5rem; color: var(--muted); }
.note { color: var(--muted); }

/* ---------- motion (content stays visible without JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* One slow zoom per photo. It keeps running while the photo is "leaving", and is longer than the time a photo
     can be seen (its fade-in, the hold, the next photo's fade-in: HOLD + 2 × FADE in main.js), so the zoom never
     stops or snaps back on screen. */
  .slot img.is-on, .slot img.is-leaving { animation: slot-drift 5600ms linear both; }
  .js .hero-title .line, .js .hero-lead { opacity: 0; transform: translateY(24px); animation: rise 1000ms var(--ease-out) forwards; }
  .js .hero-title .line:nth-child(2) { animation-delay: 120ms; }
  .js .hero-lead { animation-delay: 360ms; transform: translateY(calc(-100% + 24px)); animation-name: rise-lead; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 450ms var(--ease-out), transform 650ms var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .news-item[open] p { animation: unfold 450ms var(--ease-out) both; }
}
@keyframes slot-drift { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes rise-lead { to { opacity: 1; transform: translateY(-100%); } }
@keyframes unfold { from { opacity: 0; transform: translateY(-0.5rem); } }

/* ---------- tablet and phone ---------- */
@media (max-width: 60em) {
  .site-nav { display: none; }
  .menu { display: block; }
  .belief-pin { position: static; grid-column: 1 / -1; }
  .belief-steps { grid-column: 1 / -1; gap: 6rem; padding-top: 4rem; }
  .belief-step--a figure { width: 64%; }
  .belief-step--b figure { width: 78%; margin-left: auto; }
  .belief-step--c figure { width: 52%; margin-left: 0; }
  .companies-head, .rows, .companies-cta, .news-list { margin-left: 0; }
  .page-body { margin-left: 0; }
}
@media (max-width: 48em) {
  .hero { --seam: 46svh; }
  .footer-meta { flex-direction: column; }
}
/* Phone: a narrower frame keeps "Who [frame] Advocates" on one line in landscape. */
@media (max-width: 40em) {
  :root { --margin: 1rem; --step-display: 10vw; }
  .slot { width: 1.4em; }
  .policy-sentence, .specialty-panel { font-size: var(--step-body); line-height: 1.85; }
  /* Phone: the photo becomes a band above the names, and the names stack one per line, as the hero's words do. */
  .js .specialty-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .js .specialty-mark { grid-row: auto; aspect-ratio: 2 / 1; margin-bottom: 1.25rem; }
  .specialty-head { font-size: min(var(--step-head), 100cqi / 9); }
  .specialty-tabs { flex-direction: column; align-items: flex-start; }
  .specialty-tab { padding-block: 0.08em; }
  .row { grid-template-columns: minmax(0, 1fr); row-gap: 0.25rem; }
  .news-list li { grid-template-columns: auto minmax(0, 1fr); }
  .news-item { grid-column: 1 / -1; }
}
/* Portrait: one word per line, sized so "Advocates" fills the width and the title clears the header.
   The frame ends flush with "Advocates": Who 2.16em + space 0.22em + frame 2.54em = Advocates 4.92em. */
@media (orientation: portrait) {
  .hero { container-type: inline-size; }
  .hero-title { --seam-offset: 2.333em; height: 3em; font-size: min((100cqi - 2 * var(--margin)) / 5, (var(--seam) - 5.5rem) / 2.333); }
  .hero-copy .w-adv { display: block; }
  .slot { width: 2.54em; margin-inline-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .button, .policy-item, .specialty-tab, .specialty-panel, .specialty-mark img, .word-slot > span, .to-top { transition: none !important; }
  .word-slot > span { animation: none !important; }
}