/*
 * public/css/styles.css: the Patacca Services LLC site stylesheet.
 *
 * Ported from docs/mockups/homepage-v9.html, the approved design. Differences
 * from the mockup are deliberate:
 *   - Form, label and input rules are scoped to .inquiry-form so they cannot
 *     leak into any other page.
 *   - The duplicate .company grid rule is merged, and the hexagon-era logo
 *     rules (.logo .mark, .wm) are gone with the old mark.
 *   - The footer legal line is a wrapping list. In the mockup it was one
 *     unbreakable run of   separators that overflowed at 390px.
 *   - The Turnstile placeholder is replaced by the real widget container, and
 *     the legal and error pages have their own small sections at the end.
 *
 * Color rule from the branding guide: gold accents only on dark sections.
 * Gold #D3AE68 is 9.4:1 on ink-950 but 1.9:1 on the light inquiry section,
 * so light sections use Patacca Navy for focus and hover.
 */

:root {
  /* Patacca Services LLC: parent brand */
  --ink-950: #070b14;
  --ink-900: #0b111d;
  --ink-850: #0e1523;
  --ink-800: #121b2b;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #eef1f6;
  --text-muted: #a3adbf;
  --text-faint: #8792a6;      /* 5.9:1 on ink-950, passes WCAG AA */
  /* Brand colors from docs/branding/patacca-services-llc-branding-guide.pdf */
  --pcs-gold: #d3ae68;        /* gold for text and accents on dark, 9.4:1 on ink-950 */
  --pcs-gold-crest: #c9973a;  /* Crest Gold */
  --pcs-navy: #13294b;        /* Patacca Navy; accents on light sections */

  /* Operating company colors, used only inside their own rows */
  --apeg-navy: #0a1628;
  --apeg-gold: #b8966e;
  --k12-purple: #6e3dae;
  --k12-purple-dark: #4d1979;
  --k12-tint: #a989dc;

  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  --radius: 2px;
  --container: 1240px;
  --section-py: clamp(5rem, 10vw, 9rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink-950); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
:focus-visible { outline: 2px solid var(--pcs-gold); outline-offset: 3px; }
.inquiry :focus-visible { outline-color: var(--pcs-navy); }
a, button, select { touch-action: manipulation; }
[id] { scroll-margin-top: 96px; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--text); color: var(--ink-950); font-weight: 600; padding: 12px 16px; border-radius: var(--radius); }
.skip:focus { top: 12px; }

.label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }

/* ─── Logo ─── */
.logo { display: inline-flex; align-items: center; color: var(--text); }
.logo .logo-img { display: block; height: 40px; width: auto; }
.logo-footer { display: block; width: 320px; max-width: 100%; height: auto; }

/* ─── Nav ─── */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(7, 11, 20, 0.9); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); }
.nav > .container { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 32px; }
.nav .primary { display: flex; gap: 40px; list-style: none; font-size: 15px; color: var(--text-muted); }
.nav .primary a { position: relative; display: inline-flex; align-items: center; min-height: 44px; transition: color 200ms ease; }
.nav .primary a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease); }
.nav .primary a:hover { color: var(--text); }
.nav .primary a:hover::after, .nav .primary a[aria-current="true"]::after { transform: scaleX(1); }
.nav .primary a[aria-current="true"] { color: var(--text); }
.nav .right { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav .right .portal { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); }
.nav .right .portal:hover { color: var(--text); }
.menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--text); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn .close { display: none; }
.menu-btn[aria-expanded="true"] .open { display: none; }
.menu-btn[aria-expanded="true"] .close { display: block; }
.mobile-menu { display: none; border-top: 1px solid var(--line); background: var(--ink-950); }
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; padding: 8px 0 20px; }
.mobile-menu a { display: flex; align-items: center; min-height: 52px; font-size: 18px; border-bottom: 1px solid var(--line); }

.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--font-body); padding: 15px 24px; border-radius: var(--radius); transition: background 200ms ease, color 200ms ease, border-color 200ms ease; cursor: pointer; border: 0; }
.btn-light { background: var(--text); color: var(--ink-950); }
.btn-light:hover { background: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--line-strong); color: var(--text); padding: 11px 18px; }
.btn-outline:hover { border-color: var(--text); }
.arrow { display: inline-block; transition: transform 380ms var(--ease); }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }

/* ─── Hero ─── */
.hero { padding: clamp(5rem, 11vw, 9.5rem) 0 0; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.9rem); max-width: none; margin: 28px 0 34px; text-wrap: balance; }
.hero h1 .br-lg { display: none; }
@media (min-width: 900px) { .hero h1 .br-lg { display: inline; } }
.hero .lede { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--text-muted); max-width: 60ch; }
.hero .actions { margin-top: 44px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.hero .actions .text-link { font-weight: 600; font-size: 15px; display: inline-flex; gap: 10px; color: var(--text); border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; }
.hero .actions .text-link:hover { border-color: var(--text); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(4.5rem, 9vw, 7rem); border-top: 1px solid var(--line); }
.fact { padding: 30px 28px 34px 0; border-right: 1px solid var(--line); }
.fact + .fact { padding-left: 28px; }
.fact:last-child { border-right: 0; }
.fact strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.1; }
.fact > span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--text-faint); }
.fact strong .unit { font-size: 0.5em; font-weight: 500; letter-spacing: -0.01em; color: var(--text-faint); }

/* ─── Section scaffolding ─── */
section { padding: var(--section-py) 0; border-top: 1px solid var(--line); }
section.flush { border-top: 0; }
.head { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: end; margin-bottom: 64px; }
.head h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); margin-top: 18px; max-width: 16ch; }
.head p { color: var(--text-muted); max-width: 56ch; }

/* ─── Operating companies index ─── */
.company { display: grid; grid-template-columns: 6px 1.05fr 1.3fr 190px; gap: 0 40px; align-items: stretch; border-top: 1px solid var(--line); transition: background 380ms var(--ease); }
.company:last-child { border-bottom: 1px solid var(--line); }
.company:hover { background: var(--ink-900); }
.company .bar { transform: scaleY(0.35); transform-origin: top; transition: transform 300ms var(--ease); }
.company:hover .bar { transform: scaleY(1); }
.company .id { padding: 44px 0; }
.company .aud { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.company .nm { margin-top: 14px; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.1; }
.company .tag { margin-top: 10px; font-size: 15px; color: var(--text-muted); }
.company .desc { padding: 44px 0; color: var(--text-muted); }
.company .desc ul { list-style: none; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 15px; color: var(--text); }
.company .desc li { padding-left: 18px; position: relative; }
.company .desc li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--text-faint); }
.company .go { padding: 44px 0; display: flex; align-items: flex-start; justify-content: flex-end; font-size: 15px; font-weight: 600; gap: 10px; text-align: right; }
.company .proof { margin-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--k12-tint); }

.company--apeg .bar { background: var(--apeg-gold); }
.company--apeg .aud { color: var(--apeg-gold); }
.company--apeg .tag { color: var(--apeg-gold); }
.company--apeg .nm { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: -0.005em; font-size: clamp(2rem, 3vw, 2.6rem); }
.company--k12 .bar { background: var(--k12-purple); }
.company--k12 .aud { color: var(--k12-tint); }
.company--k12 .nm { font-family: "Figtree", "Avenir Next", "Segoe UI", system-ui, Arial, sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.4rem, 2.05vw, 1.8rem); line-height: 1.2; }
.company--k12 .nm.lockup { display: grid; grid-template-columns: auto 1fr; column-gap: 0.4em; align-items: center; }
.company--k12 .nm.lockup img { height: 3.3em; width: auto; margin: 0; }
.company--k12 .nm.lockup .stack { display: grid; }

/* ─── How we work: org chart and finder ─── */
.org { margin: 0 0 80px; }
.org-parent, .org-child { display: grid; gap: 6px; padding: 26px 28px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--ink-900); }
.org-parent { max-width: 460px; margin: 0 auto; text-align: center; border-color: rgba(201, 151, 58, 0.45); }
.org strong { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.2; }
.org span { font-size: 15px; color: var(--text-muted); }
.org .org-kind { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.org-lines { position: relative; height: 56px; }
.org-lines::before { content: ""; position: absolute; left: 50%; top: 0; height: 28px; border-left: 1px solid var(--line-strong); }
.org-lines span { position: absolute; left: 25%; right: 25%; top: 28px; height: 28px; border: 1px solid var(--line-strong); border-bottom: 0; }
.org-children { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.org-child { text-align: center; }
.org-child--apeg { border-top: 3px solid var(--apeg-gold); }
.org-child--k12 { border-top: 3px solid var(--k12-purple); }

.finder-title { font-size: 1.5rem; letter-spacing: -0.015em; margin-bottom: 20px; }
.finder table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.finder th { text-align: left; font: 600 12px/1.4 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); padding: 0 24px 14px 0; border-bottom: 1px solid var(--line-strong); }
.finder td { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-muted); }
.finder td:first-child { color: var(--text); }
.finder td a { font-weight: 600; color: var(--text); white-space: nowrap; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.finder td a:hover { border-color: var(--text); }

/* ─── History timeline ─── */
.timeline { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-strong); }
.timeline li { position: relative; padding: 36px 24px 0 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--c, var(--text-faint)); }
.timeline li.t-pcs { --c: var(--pcs-gold); }
.timeline li.t-k12 { --c: var(--k12-purple); }
.timeline li.t-apeg { --c: var(--apeg-gold); }
.timeline li.t-today { --c: var(--text); }
.timeline .yr { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 3.6vw, 3.4rem); letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.timeline li.roots .yr { color: var(--text-faint); }
.timeline h3 { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; letter-spacing: 0; line-height: 1.35; margin: 22px 0 6px; }
.timeline p { color: var(--text-faint); font-size: 14.5px; line-height: 1.5; }

/* ─── Principles ─── */
.principles { background: var(--ink-900); }
.plist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 80px; }
.p { display: grid; grid-template-columns: 56px 1fr; padding: 34px 0; border-top: 1px solid var(--line); }
.p .n { font-family: var(--font-display); font-weight: 600; color: var(--text-faint); font-size: 14px; padding-top: 6px; }
.p h3 { font-size: 1.45rem; letter-spacing: -0.015em; }
.p p { color: var(--text-muted); margin-top: 10px; font-size: 16px; max-width: 46ch; }

/* ─── Leadership ─── */
.leader { display: grid; grid-template-columns: 340px 1fr; gap: 80px; align-items: start; }
.leader figure { margin: 0; }
.leader .ph { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: #1b1b1b; }
.leader .ph picture { display: block; height: 100%; }
.leader .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.02); }
.leader figcaption { margin-top: 18px; }
.leader figcaption strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.leader figcaption span { font-size: 14.5px; color: var(--text-faint); }
.leader blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.25; letter-spacing: -0.02em; margin: 18px 0 36px; max-width: 26ch; }
.leader .bio p { color: var(--text-muted); max-width: 62ch; margin-bottom: 18px; }
.leader .roles { margin-top: 34px; border-top: 1px solid var(--line); }
.leader .roles div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.leader .roles span:last-child { color: var(--text-faint); text-align: right; }

/* ─── Inquiry ─── */
.inquiry { background: #f4f5f8; color: var(--ink-950); border-top: 0; }
.inquiry .label { color: #5a6477; }
.inquiry .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 88px; }
.inquiry h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); margin: 18px 0 24px; }
.inquiry .lede { color: #3b4455; max-width: 44ch; }
.routes { margin-top: 44px; border-top: 1px solid #d5dae3; }
.routes a { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid #d5dae3; font-size: 15.5px; }
.routes a span:first-child b { display: block; font-weight: 600; color: var(--ink-950); }
.routes a span:first-child { color: #5a6477; }
.routes a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.direct { margin-top: 32px; font-size: 15px; color: #5a6477; }
.direct a { color: var(--ink-950); font-weight: 600; }

.inquiry-form { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; background: #fff; padding: 40px; border: 1px solid #e1e5ec; border-radius: var(--radius); align-self: start; }
.inquiry-form .form-title { grid-column: 1 / -1; font-size: 1.4rem; letter-spacing: -0.015em; }
.inquiry-form .req-note { grid-column: 1 / -1; font-size: 13px; color: #5a6477; }
.inquiry-form .req { color: #b42318; }
.inquiry-form label { display: grid; gap: 8px; align-content: start; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; color: #3b4455; }
.inquiry-form label.full { grid-column: 1 / -1; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea { font: 400 16px/1.4 var(--font-body); color: var(--ink-950); background: #fff; border: 1px solid #c7cedb; border-radius: var(--radius); padding: 13px 14px; width: 100%; }
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus { outline: 2px solid var(--pcs-navy); outline-offset: 1px; border-color: transparent; }
.inquiry-form textarea { min-height: 120px; resize: vertical; }
.inquiry-form .err { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #b42318; }
.inquiry-form .err:empty { display: none; }
.inquiry-form .help { font-size: 13px; font-weight: 400; letter-spacing: 0; color: #5a6477; }
.inquiry-form [aria-invalid="true"] { border-color: #b42318; }
.inquiry-form .ts-widget { grid-column: 1 / -1; min-height: 65px; }
.inquiry-form .btn { grid-column: 1 / -1; justify-self: start; background: var(--ink-950); color: #fff; }
.inquiry-form .btn:hover { background: var(--pcs-navy); }
.inquiry-form .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.inquiry-form .agree { grid-column: 1 / -1; font-size: 14px; color: #3d4657; }
.inquiry-form .agree a { color: var(--pcs-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.inquiry-form .form-status { grid-column: 1 / -1; padding: 14px 16px; border-radius: var(--radius); font-size: 15px; }
.inquiry-form .form-status.ok { background: #ecfdf3; border: 1px solid #a6e1bd; color: #05603a; }
.inquiry-form .form-status.fail { background: #fef3f2; border: 1px solid #fecdca; color: #912018; }
.inquiry-form .form-status.fail a { color: inherit; font-weight: 600; text-decoration: underline; }
/* dmxValidator prints its own message after an invalid field; the page shows
   the same message in the .err slot that aria-describedby points at, so the
   validator's copy is hidden to avoid saying it twice. */
.inquiry-form .invalid-feedback { display: none !important; }

/* ─── Footer ─── */
.site-footer { padding: 80px 0 40px; font-size: 14.5px; color: var(--text-muted); border-top: 1px solid var(--line); }
.site-footer .top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.site-footer .about p { margin-top: 20px; max-width: 36ch; }
.site-footer .address { margin-top: 16px; font-style: normal; line-height: 1.6; }
.site-footer .address-label { display: block; font: 600 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.site-footer .fh { font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 20px; }
.site-footer ul { list-style: none; display: grid; gap: 11px; }
.site-footer a:hover { color: var(--text); }
.site-footer .entity { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 13px; color: var(--text-faint); }
.site-footer .entity p { max-width: 90ch; }
.site-footer .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; list-style: none; }
.site-footer .legal-links li + li::before { content: "·"; padding: 0 10px; }

/* ─── Legal pages ─── */
.legal { padding: clamp(4rem, 8vw, 6.5rem) 0 var(--section-py); border-top: 0; }
.legal-body { max-width: calc(72ch + 64px); }
.legal-body h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); margin: 18px 0 12px; }
.legal-body .legal-date { color: var(--text-faint); font-size: 15px; margin-bottom: 48px; }
.legal-body h2 { font-size: 1.45rem; letter-spacing: -0.015em; line-height: 1.2; margin: 48px 0 14px; }
.legal-body p, .legal-body li { color: var(--text-muted); }
.legal-body p + p { margin-top: 14px; }
.legal-body ul { margin: 14px 0 0 1.2em; display: grid; gap: 8px; }
.legal-body a { color: var(--text); border-bottom: 1px solid var(--line-strong); }
.legal-body a:hover { border-color: var(--text); }

/* ─── Error pages ─── */
.error-page { padding: clamp(5rem, 11vw, 9rem) 0 var(--section-py); border-top: 0; }
.error-page h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 24px 0 24px; max-width: 18ch; }
.error-page p { color: var(--text-muted); max-width: 56ch; }
.error-page .actions { margin-top: 40px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

/* ─── Cookie banner ─── */
/* Shown only when JavaScript runs: without site.js the buttons would do nothing. */
.cookie-banner { display: none; }
.js .cookie-banner:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink-850); border-top: 1px solid var(--line-strong); padding: 20px 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35); }
.cookie-banner:focus { outline: none; }
.cookie-banner .container { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; }
.cookie-title { font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.cookie-copy p { font-size: 15px; color: var(--text-muted); max-width: 78ch; }
.cookie-copy a { color: var(--pcs-gold); border-bottom: 1px solid currentColor; }
.cookie-copy a:hover { color: var(--text); }
.cookie-actions { display: flex; gap: 12px; flex-shrink: 0; }
/* Equal weight for both choices: same size, so neither is the easier click. */
.cookie-actions .btn { padding: 13px 22px; min-width: 112px; justify-content: center; }
.cookie-banner .cookie-gpc, .cookie-banner.is-gpc .cookie-ask { display: none; }
.cookie-banner.is-gpc p.cookie-gpc { display: block; }
.cookie-banner.is-gpc div.cookie-gpc { display: flex; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.link-btn:hover { color: var(--text); }
html:not(.js) .js-only { display: none; }

/* ─── Reveal (subtle) ─── */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}
@media (max-width: 1024px) {
  .nav .primary { display: none; }
  .menu-btn { display: inline-flex; }
  .head, .leader, .inquiry .grid { grid-template-columns: 1fr; gap: 40px; }
  .leader figure { max-width: 340px; }
  .company { grid-template-columns: 4px 1fr; }
  .company .id { padding-bottom: 0; }
  .company .desc, .company .go { grid-column: 2; padding: 16px 0; }
  .company .go { justify-content: flex-start; padding-bottom: 36px; }
  .plist { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(3) { padding-left: 0; border-top: 1px solid var(--line); }
  .fact:nth-child(4) { border-top: 1px solid var(--line); }
  .site-footer .top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .org-children { grid-template-columns: 1fr; }
  .org-lines span { left: 50%; right: auto; width: 0; border-right: 0; border-top: 0; }
  .finder thead { display: none; }
  .finder tr { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .finder td { padding: 0; border: 0; }
  .finder td a { white-space: normal; }
}
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .nav .right .portal, .nav .right .btn-outline { display: none; }
  .company .desc ul { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .inquiry-form { grid-template-columns: 1fr; padding: 24px; }
  .site-footer .top { grid-template-columns: 1fr; }
  .site-footer .legal-links { gap: 8px 20px; }
  .site-footer .legal-links li + li::before { content: none; }
  .cookie-banner .container { flex-direction: column; align-items: stretch; }
  .cookie-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}