/* Company pages: About, How we work, Why Dhiyo, Industries, Careers, Contact, Insights, legal, 404. */

/* ---------- Page hero ---------- */
.hero .breadcrumb { margin-bottom: var(--sp-5); }
.hero .breadcrumb a { color: var(--sky); }
.hero .breadcrumb [aria-current] { color: var(--white); }
.hero .eyebrow { margin-bottom: var(--sp-4); }
.page-title { font-size: clamp(2.4rem, 1.7rem + 3vw, 4.25rem); max-width: 16ch; }
.hero .lead { max-width: 56ch; }
.hero--short { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

/* Split text block: heading on the left, copy on the right. */
.split { display: grid; gap: var(--sp-6) var(--sp-8); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.split .prose p { color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.6; }
.on-dark .split .prose p { color: var(--navy-text-muted); }
.split .highlight { margin-top: var(--sp-6); }

/* ---------- About: the name's arc ---------- */
.arc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); counter-reset: arc; }
@media (min-width: 768px) { .arc { grid-template-columns: repeat(3, 1fr); } }
.arc li { position: relative; display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5); border-radius: var(--radius); border: 1px solid var(--navy-line); }
.arc li::before { counter-increment: arc; content: "0" counter(arc); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small); color: var(--sky); }
.arc h3 { font-size: 1.375rem; }
.arc p { color: var(--navy-text-muted); font-size: var(--fs-small); }
.dhi { font-family: var(--font-display); font-weight: 800; font-style: normal; color: var(--sky); }
/* ---------- About › the name: 3D dhī beside the copy, the arc below ---------- */
.dhi-name { background: var(--navy); }
.dhi-name__grid { display: grid; gap: var(--sp-6) var(--sp-8); align-items: center; }
@media (min-width: 900px) { .dhi-name__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.dhi-name__viz { aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; border-radius: var(--radius-lg); }
.dhi-name__copy { display: grid; gap: var(--sp-4); align-content: center; }
.dhi-name__copy h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
/* "dhī" set like the wordmark: white dh, Sky ī. */
.dhi-wordmark { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 2.4rem + 4.5vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--white); }
.dhi-wordmark span { color: var(--sky); }
/* Stacked on phones, the 3D sits right above it, so the 3D carries the word there. */
@media (max-width: 899.98px) {
  .dhi-name__viz { aspect-ratio: 5 / 4; }
  .dhi-wordmark { display: none; }
}
.dhi-name__text { font-size: var(--fs-lead); line-height: 1.6; color: var(--white); }
.dhi-name__lead { color: var(--navy-text-muted); line-height: 1.6; }
.dhi-word { color: var(--sky); white-space: nowrap; }
.dhi-word [lang="sa"] { font-family: "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", "Mangal", sans-serif; font-weight: 700; }
.dhi-name__arc-title { margin: var(--sp-7) 0 var(--sp-4); }
.arc li { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.arc li:hover { border-color: var(--sky); background: var(--navy-raised); box-shadow: -6px 6px 0 0 var(--sky); }

/* ---------- About: timeline ---------- */
.timeline-wrap { position: relative; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.timeline__rail { position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.timeline__fill { position: absolute; inset: 0; background: var(--blue); transform-origin: top; transform: scaleY(var(--progress, 1)); transition: transform 1400ms var(--ease-in-out); }
.timeline li { position: relative; display: grid; gap: var(--sp-1); padding-left: 48px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; transform: rotate(45deg); background: var(--navy); box-shadow: -3px 3px 0 0 var(--sky); transition: background-color var(--dur) var(--ease); }
.timeline li.is-next::before { background: var(--white); border: 2px dashed var(--blue); box-shadow: none; }
.timeline__year { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1; color: var(--navy); }
.timeline__label { color: var(--text-muted); }
.timeline__label a { display: inline-flex; align-items: center; min-height: 24px; }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); padding-top: 40px; }
  .timeline__rail { left: 12px; right: 12px; top: 11px; bottom: auto; width: auto; height: 2px; }
  .timeline__fill { transform-origin: left; transform: scaleX(var(--progress, 1)); }
  .timeline li { padding-left: 0; }
  .timeline li::before { left: 4px; top: -36px; }
}

/* ---------- About: vision and mission ---------- */
.vm { display: grid; gap: var(--gutter); }
@media (min-width: 900px) { .vm { grid-template-columns: 1fr 1fr; } }
.vm__item { display: grid; gap: var(--sp-4); align-content: start; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--radius-lg); background: var(--white); }
.vm__item--navy { background: var(--navy); box-shadow: -12px 12px 0 0 var(--sky); }
.vm__item p:last-child { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.3; color: var(--heading); }

/* ---------- About: values with drawn icons ---------- */
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.value { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-5); border-radius: var(--radius); background: var(--mist); }
.value h3 { font-size: 1.25rem; }
.value p { color: var(--text-muted); font-size: var(--fs-small); }
.value__icon { width: 48px; height: 48px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.value__icon .accent { stroke: var(--blue); }
.value__icon .spark-dot { fill: var(--amber); stroke: none; }
/* Icons draw themselves once in view (about.js adds .is-drawn). Without JS or with reduced motion they are simply shown. */
.js .value__icon [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-in-out); }
.js .value.is-drawn .value__icon [pathLength] { stroke-dashoffset: 0; }
.js .value .value__icon .spark-dot { opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center; transition: opacity 300ms var(--ease) 700ms, transform 400ms var(--ease) 700ms; }
.js .value.is-drawn .value__icon .spark-dot { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .value__icon [pathLength] { stroke-dashoffset: 0; }
  .js .value .value__icon .spark-dot { opacity: 1; transform: none; }
}

/* ---------- About: leadership placeholder ---------- */
.leaders { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
.leader { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-5); align-items: start; padding: var(--sp-5); border-radius: var(--radius); border: 1.5px dashed var(--blue); background: var(--white); }
.leader__photo { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--cloud); color: var(--blue); font-size: var(--fs-xs); font-weight: 700; text-align: center; line-height: 1.2; }
.leader h3 { font-size: 1.125rem; }
.leader p { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--sp-2); }
.note { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--sp-5); }
.on-dark .note { color: var(--navy-text-muted); }

/* ---------- How we work: pinned horizontal process ---------- */
.process-section { overflow: clip; }
.process-path { height: clamp(200px, 15vw + 90px, 330px); margin-bottom: var(--sp-6); border-radius: var(--radius-lg); }
.process-path .scene-box__poster { object-fit: cover; }
/* Pinned on wide screens: the path, heading and cards must all fit one viewport. */
@media (min-width: 1100px) {
  .process-path { height: 230px; margin-bottom: var(--sp-5); }
  .process-section { padding-top: calc(var(--header-h-solid) + var(--sp-6)); padding-bottom: var(--sp-7); }
  .process-section .section-head { margin-bottom: var(--sp-5); }
}
.stage-card { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.stage-card.is-reached { border-color: var(--sky); }
.stage-card.is-current { box-shadow: -8px 8px 0 0 var(--sky); }
.process { position: relative; }
.process__track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); counter-reset: stage; }
.stage-card {
  position: relative; display: grid; gap: var(--sp-4); align-content: start; overflow: hidden; isolation: isolate;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); border-radius: var(--radius-lg); background: var(--navy-raised); border: 1px solid var(--navy-line);
}
.stage-card::after {
  counter-increment: stage; content: "0" counter(stage);
  position: absolute; right: clamp(1rem, 0.8rem + 1vw, 1.75rem); top: clamp(1rem, 0.8rem + 1vw, 1.75rem); z-index: -1;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.75rem, 2.4rem + 1.5vw, 4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--sky);
}
.stage-card__icon { width: 56px; height: 56px; fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage-card h3 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.stage-card p { color: var(--navy-text-muted); max-width: 34ch; }
.stage-card .pill { justify-self: start; }
.process__progress { display: none; }
@media (min-width: 768px) and (max-width: 1099.98px) { .process__track { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .process__track { grid-template-columns: repeat(5, 1fr); } .stage-card { min-height: 360px; } }
/* With motion on wide screens, process.js pins the section and slides the cards sideways. */
.process.is-pinned { overflow: hidden; }
.process.is-pinned .process__track { display: flex; width: max-content; gap: var(--gutter); }
.process.is-pinned .stage-card { width: min(440px, 34vw); min-height: 310px; }
.process.is-pinned .process__progress { display: block; position: relative; height: 2px; margin-top: var(--sp-6); background: var(--navy-line); }
.process.is-pinned .process__progress span { position: absolute; inset: 0; background: var(--sky); transform-origin: left; transform: scaleX(0); }

/* Engagement models */
.models { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.model { display: grid; gap: var(--sp-4); align-content: start; padding: var(--sp-5); border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.model__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.model h3 { font-size: 1.1875rem; }
.model dl { display: grid; gap: var(--sp-3); margin: 0; }
.model dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.model dd { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-small); }
.starters { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-6); }

/* ---------- Why Dhiyo ---------- */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 900px) { .reasons--three { grid-template-columns: repeat(3, 1fr); } }
.reason { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6) var(--sp-5); border-radius: var(--radius); background: var(--white); border-top: 3px solid var(--navy); }
.reason__num { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: var(--fs-small); }
.reason h3 { font-size: 1.25rem; }
.reason p { color: var(--text-muted); font-size: var(--fs-small); }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.points li { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-4); border-top: 2px solid var(--sky); }
.points h3 { font-size: 1.25rem; }
.points p { color: var(--navy-text-muted); font-size: var(--fs-small); }
.trust { display: grid; gap: var(--sp-4); max-width: 820px; }
.trust__big { font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem); line-height: 1.12; }
.founding-band { display: grid; gap: var(--sp-6); align-items: center; padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); border-radius: var(--radius-lg); background: var(--white); }
@media (min-width: 960px) { .founding-band { grid-template-columns: 1.4fr 1fr; } }
.founding-band .diamond-list { font-weight: 700; color: var(--navy); }

/* ---------- Industries: flip cards ---------- */
.inds { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ind { position: relative; scroll-margin-top: calc(var(--header-h-solid) + var(--sp-5)); }
.ind__face { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--radius-lg); }
.ind__front { background: var(--white); border: 1px solid var(--line); }
.ind__back { background: var(--navy); color: var(--white); }
.ind__num { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: var(--fs-small); }
.ind__back .ind__num { color: var(--sky); }
.ind h3 { font-size: 1.375rem; }
.ind__lede { color: var(--text-muted); font-size: var(--fs-small); }
.ind .diamond-list { font-size: var(--fs-small); gap: var(--sp-2); }
.ind__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); margin-top: var(--sp-2); }
.ind__pillars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ind__pillars a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: var(--radius-capsule); background: var(--sky); color: var(--navy); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; }
.ind__pillars a:hover { background: var(--white); }
.ind__services { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ind__services a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 40px; padding: 4px 0; border-bottom: 1px solid var(--navy-line); color: var(--white); text-decoration: none; font-size: var(--fs-small); font-weight: 700; }
.ind__services a:hover { color: var(--sky); }
.ind__services .icon { width: 16px; height: 16px; color: var(--sky); }
.ind__flip { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font-weight: 700; color: var(--link); cursor: pointer; }
.ind__flip .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.ind__flip:hover .icon { transform: rotate(180deg); }
.ind__back .ind__flip { color: var(--sky); }
.ind__back .ind__flip:hover { color: var(--white); }
/* No JS: both faces show, one under the other, and the flip buttons stay hidden. */
.ind__flip { display: none; }
.ind__back { margin-top: var(--gutter); }
/* With JS (industries.js adds .is-flippable): a real 3D flip. */
.ind.is-flippable { perspective: 1400px; }
.ind.is-flippable .ind__flip { display: inline-flex; }
.ind.is-flippable .ind__inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform 700ms var(--ease-in-out); }
.ind.is-flippable .ind__face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; margin: 0; }
.ind.is-flippable .ind__back { transform: rotateY(180deg); }
.ind.is-flippable.is-flipped .ind__inner { transform: rotateY(180deg); }
.ind.is-flippable:target .ind__front, .ind.is-flippable.is-target .ind__front { box-shadow: -10px 10px 0 0 var(--sky); border-color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .ind.is-flippable .ind__inner { transform: none !important; transition: none; }
  .ind.is-flippable .ind__back { transform: none; opacity: 0; transition: opacity 200ms linear; }
  .ind.is-flippable.is-flipped .ind__back { opacity: 1; }
  .ind.is-flippable.is-flipped .ind__front { opacity: 0; }
}

/* ---------- Careers ---------- */
.roles { margin-top: var(--sp-5); }
.roles .chip { font-size: var(--fs-small); min-height: 40px; padding: 6px 18px; background: var(--white); }
.apply { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 960px) { .apply { grid-template-columns: 1.4fr 1fr; } .apply__actions { justify-self: end; } }
.apply__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); align-items: center; }
.placeholder-block { display: grid; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); border-radius: var(--radius); border: 1.5px dashed var(--blue); background: var(--white); }

/* ---------- Contact ---------- */
.contact { display: grid; gap: var(--sp-7) var(--sp-8); align-items: start; }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.enquiry { display: grid; gap: var(--sp-5); padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); }
.enquiry h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.enquiry__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .enquiry__grid { grid-template-columns: 1fr 1fr; } .enquiry__grid .field--wide { grid-column: 1 / -1; } }
.field__label-opt { font-weight: 400; color: var(--text-muted); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field__error { display: flex; gap: 6px; align-items: center; font-size: var(--fs-xs); font-weight: 700; color: var(--error); }
.field__error:empty { display: none; }
.field__error::before { content: ""; width: 7px; height: 7px; flex: none; transform: rotate(45deg); background: var(--error); }
.field .check { font-weight: 400; color: var(--text); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); align-items: start; font-size: var(--fs-small); color: var(--text); }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy); }
.check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__foot { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); align-items: center; }
.enquiry__foot .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.form-status { display: none; gap: var(--sp-3); grid-template-columns: auto 1fr; align-items: start; padding: var(--sp-5); border-radius: var(--radius); font-size: var(--fs-small); }
.form-status.is-success, .form-status.is-error { display: grid; }
.form-status.is-success { background: var(--cloud); color: var(--navy); }
.form-status.is-error { background: var(--error-wash); color: var(--graphite); }
.form-status .icon { width: 24px; height: 24px; color: var(--blue); }
.form-status.is-error .icon { color: var(--error); }
.form-status strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; color: var(--navy); margin-bottom: 2px; }
.form-status .link-arrow { min-height: 0; margin-top: var(--sp-2); }

.reach { display: grid; gap: var(--sp-4); }
.reach__card { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); align-items: start; padding: var(--sp-5); border-radius: var(--radius); background: var(--white); }
.reach__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--white); box-shadow: -3px 3px 0 0 var(--sky); }
.reach__icon .icon { width: 20px; height: 20px; }
.reach__card h3 { font-size: var(--fs-xs); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.reach__card p, .reach__card address { font-style: normal; color: var(--text); }
.reach__card a { font-weight: 700; }
.map { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--radius); background: var(--white); }
.map__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--cloud); display: grid; place-items: center; text-align: center; padding: var(--sp-5); }
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__frame p { font-size: var(--fs-small); color: var(--text-muted); max-width: 34ch; }
.map__note { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- Insights ---------- */
.topics { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); counter-reset: topic; }
.topic { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-5); border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.topic__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.topic__meta::before { counter-increment: topic; content: counter(topic, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small); color: var(--blue); }
.topic h3 { font-size: 1.125rem; line-height: 1.35; }
.pill--quiet { background: var(--cloud); color: var(--navy); }

/* ---------- Legal and 404 ---------- */
.legal-text { max-width: 72ch; }
.legal-text > * + * { margin-top: var(--sp-4); }
.legal-text h2 { font-size: var(--fs-h3); margin-top: var(--sp-7); }
.legal-text h3 { font-size: var(--fs-h4); margin-top: var(--sp-5); }
.legal-text p, .legal-text li { color: var(--text); }
.legal-text ul { padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.legal { display: grid; gap: var(--sp-7); }
.legal .placeholder-block p { color: var(--text-muted); }
.legal dl { display: grid; gap: var(--sp-4); margin: 0; }
.legal dt { font-weight: 700; color: var(--navy); }
.legal dd { margin: 2px 0 0; color: var(--text-muted); }
.lost { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; }
.lost__mark { position: absolute; right: var(--margin); bottom: var(--sp-7); width: clamp(140px, 24vw, 320px); height: auto; opacity: 0.12; pointer-events: none; }
.lost__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-6); }