/* hahe5af.css — Page-specific layouts, scrollytelling, legal architectures & signature treatments */

/* 1. HERO & FIRST SCREEN (Stacked, Picture Under Recipe)                     */
/* -------------------------------------------------------------------------- */
.hero-stage {
  position:relative;
  width:100%;
  padding-top:var(--space-l);
  padding-bottom:0;
  border-bottom:1px solid var(--line);
  background-color:var(--ground);
}

@media (min-width: 1024px) {
  .hero-stage { padding-top:var(--space-xl); }
}

.hero-opening-grid {
  display:flex;
  flex-direction:column;
  gap:var(--space-l);
}

.hero-headline-block {
  display:flex;
  flex-direction:column;
  gap:var(--space-m);
}

@media (min-width: 960px) {
  .hero-headline-block {
    display:grid;
    grid-template-columns:1.35fr 1fr;
    gap:var(--space-xl);
    align-items:end;
  }
}

.hero-title {
  font-size:clamp(2.4rem, 1.8rem + 3.2vw, 4.8rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.03em;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}

.hero-lede-col {
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
}

.hero-lede {
  font-size:var(--vipe-6ef);
  line-height:1.5;
  color:var(--ink);
  max-width:54ch;

}

.hero-meta-row {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-s);
  font-family:var(--vipe-039);
  font-size:var(--step--1);
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.04em;
  border-top:1px solid var(--line);
  padding-top:var(--space-xs);
}

.hero-sequence-frame {
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  aspect-ratio:3 / 2;
  background-color:var(--surface);
  border-top:1px solid var(--line);
  overflow:hidden;
  margin-top:var(--space-s);
}

@media (min-width: 1024px) {
  .hero-sequence-frame { aspect-ratio:3 / 2; }
}

.sequence-media-stack {
  position:relative;
  width:100%;
  height:100%;
}

.sequence-frame-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity var(--dur-moderate) var(--ease-firm);
  pointer-events:none;
}

.sequence-frame-img img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.sequence-frame-img.is-active,
.sequence-frame-img[data-frame='0'] {
  opacity:1;
  pointer-events:auto;
}

.sequence-action-badge {
  position:absolute;
  top:var(--space-m);
  right:var(--space-m);
  z-index:20;
}

@media (min-width: 768px) {
  .sequence-action-badge {
    top:var(--space-l);
    right:var(--space-l);
  }
}

.sequence-indicator-bar {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(43, 38, 28, 0.85);
  backdrop-filter:blur(4px);
  color:var(--ground);
  padding:var(--space-2xs) var(--space-s);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--vipe-039);
  font-size:var(--step--2);
  letter-spacing:0.04em;
  border-top:1px solid var(--line);
}

.sequence-steps {
  display:flex;
  gap:var(--space-2xs);
}

.sequence-step-dot {
  width:2rem;
  height:3px;
  background-color:rgba(222, 210, 188, 0.35);
  transition:background-color var(--dur-rapid) var(--ease-firm);
}

.sequence-step-dot.is-active { background-color:var(--accent); }

/* 2. INNER PAGE HEADERS & INTRO LEDGERS                                      */
/* -------------------------------------------------------------------------- */
.page-intro-header {
  padding-top:var(--space-m);
  padding-bottom:var(--space-l);
  border-bottom:1px solid var(--line);
}

.page-title-row {
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
}

@media (min-width: 860px) {
  .page-title-row {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:var(--space-xl);
    align-items:end;
  }
}

.page-title {
  font-size:clamp(2rem, 1.6rem + 2vw, 3.4rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-0.025em;
  color:var(--ink);
  margin:0;
}

.page-standfirst {
  font-size:var(--vipe-f31);
  line-height:1.54;
  color:var(--ink);
  max-width:56ch;
}

.page-meta-strip {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-m);
  margin-top:var(--space-m);
  padding-top:var(--space-xs);
  border-top:1px solid var(--line);
  font-family:var(--vipe-039);
  font-size:var(--step--1);
  color:var(--ink-soft);

}

.page-meta-item strong {
  color:var(--ink);
  font-weight:600;
}

/* -------------------------------------------------------------------------- */
/* 3. SECTION COMPOSITION — SPECIFICATION LEDGER ROWS & DATA SHEETS           */
/* -------------------------------------------------------------------------- */
.section-ledger-block {
  padding:var(--space-2xl) 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--header-height-full) + 2rem);
}

@media (min-width: 1024px) {
  .section-ledger-block:first-of-type { padding-top:var(--space-3xl); }
}

.section-head-ledger {
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  margin-bottom:var(--space-m);
}

.section-head-title {
  font-size:var(--vipe-769);
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
  letter-spacing:-0.02em;
}

.section-head-standfirst {
  font-size:var(--vipe-f31);
  color:var(--ink);
  max-width:62ch;
  line-height:1.5;
}

.ledger-table-wrap {
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.ledger-matrix {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  border-top:1px solid var(--line);
}

.ledger-matrix th,
.ledger-matrix td {
  padding:var(--space-s) var(--space-xs);
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

.ledger-matrix th {
  font-family:var(--vipe-039);
  font-size:var(--step--1);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--ink-soft);
  background-color:var(--surface);
}

.ledger-matrix td {
  font-size:var(--vipe-f31);
  line-height:1.5;
}

.ledger-matrix td.is-price {
  font-family:var(--vipe-039);
  font-weight:600;
  white-space:nowrap;
  color:var(--ink);

}

.ledger-matrix td.is-meta {
  font-family:var(--vipe-039);
  font-size:var(--step--1);
  color:var(--ink-soft);
}

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
.scrolly-section {
  padding:var(--space-3xl) 0;
  border-bottom:1px solid var(--line);
  position:relative;
}

.scrolly-container {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-l);
  position:relative;
}

@media (min-width: 960px) {
  .scrolly-container {
    grid-template-columns:1fr 1.25fr;
    gap:var(--space-xl);
    align-items:start;
  }
}

.scrolly-sticky-frame {
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  background-color:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
}

@media (min-width: 960px) {
  .scrolly-sticky-frame {
    position:sticky;
    top:calc(var(--header-height-condensed) + var(--space-m));
    aspect-ratio:1 / 1;
    max-height:calc(100vh - var(--header-height-condensed) - 4rem);
    max-height:calc(100svh - var(--header-height-condensed) - 4rem);
  }
}

.scrolly-figure-img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.scrolly-progress-track {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:4px;
  background-color:rgba(158, 144, 116, 0.4);
}

.scrolly-progress-bar {
  height:100%;
  width:0%;
  background-color:var(--accent);
  transition:width 80ms linear;
}

.scrolly-content-stream {
  display:flex;
  flex-direction:column;
  gap:var(--space-2xl);
}

.scrolly-step-card {
  background-color:var(--surface);
  border:1px solid var(--line);
  padding:var(--space-m);
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
  position:relative;
}

.scrolly-step-lead {
  font-family:var(--vipe-039);
  font-size:var(--step--1);
  color:#6e3b19;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.scrolly-step-title {
  font-size:var(--vipe-ad8);
  line-height:1.25;
  color:var(--ink);
  margin:0;
}

.scrolly-step-body {
  font-size:var(--vipe-f31);
  line-height:1.55;
  color:var(--ink);
}

/* -------------------------------------------------------------------------- */
/* 5. SIGNATURE MOMENT — ANNOTATED ARCHITECTURAL DIAGRAM                      */
/* -------------------------------------------------------------------------- */
.annotated-plate-stage {
  padding:var(--space-3xl) 0;
  border-bottom:1px solid var(--line);
  background-color:var(--surface);
}

.annotated-diagram-wrapper {
  position:relative;
  width:100%;
  border:1px solid var(--line);
  background-color:var(--ground);
  overflow:hidden;
}

.annotated-base-photo {
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
}

@media (max-width: 640px) {
  .annotated-base-photo { aspect-ratio:4 / 3; }
}

.annotated-overlay-svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.diagram-callout {
  position:absolute;
  background-color:rgba(43, 38, 28, 0.92);
  color:var(--ground);
  border:1px solid var(--line);
  padding:0.35rem 0.65rem;
  font-family:var(--vipe-039);
  font-size:11px;
  line-height:1.25;
  letter-spacing:0.02em;
  pointer-events:auto;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  max-width:16rem;
}

.diagram-callout strong {
  color:#fff;
  display:block;
  font-weight:600;
  margin-bottom:2px;
}

.diagram-callout-1 {
  top:18%;
  left:8%;
}

.diagram-callout-2 {
  top:36%;
  right:12%;
}

.diagram-callout-3 {
  bottom:16%;
  left:24%;
}

@media (max-width: 767px) {
  .annotated-overlay-svg { display:none; }

  .diagram-callout {
    position:static;
    max-width:none;
    margin-top:var(--space-xs);
  }
}

.diagram-callout-leader {
  stroke:var(--accent);
  stroke-width:1.5;
  stroke-dasharray:3, 3;
}

.diagram-callout-node {
  fill:var(--accent);
  stroke:#ffffff;
  stroke-width:1.5;
}

/* -------------------------------------------------------------------------- */
/* 6. FULL-WIDTH INCIDENTAL PHOTOGRAPHY INSERTS                               */
/* -------------------------------------------------------------------------- */
.incidental-break {
  width:100%;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:var(--space-2xl) 0;
  background-color:var(--surface);
}

.incidental-img-bleed {
  width:100%;
  aspect-ratio:21 / 9;
  object-fit:cover;
  display:block;
}

@media (max-width: 768px) {
  .incidental-img-bleed { aspect-ratio:16 / 9; }
}

.incidental-caption-strip {
  padding:var(--space-xs) var(--space-s);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--vipe-039);
  font-size:var(--step--2);
  color:var(--ink-soft);
  border-top:1px solid var(--line);
}

/* -------------------------------------------------------------------------- */
/* 7. INTERACTIVE TOOL — OPTION CONFIGURATOR STYLES                           */
/* -------------------------------------------------------------------------- */
.configurator-root {
  background-color:var(--surface);
  border:1px solid var(--line);
  padding:var(--space-l);
  display:flex;
  flex-direction:column;
  gap:var(--space-l);
  margin-top:var(--space-m);
}

@media (min-width: 960px) {
  .configurator-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:var(--space-xl);
    align-items:start;
  }
}

.configurator-controls {
  display:flex;
  flex-direction:column;
  gap:var(--space-m);
}

.configurator-field-group {
  background-color:var(--ground);
  border:1px solid var(--line);
  padding:var(--space-s);
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}

.configurator-legend {
  font-family:var(--vipe-039);
  font-size:var(--step--1);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink);
  display:flex;
  justify-content:space-between;
}

.configurator-legend-sub {
  font-family:var(--vipe-039);
  font-size:var(--step--2);
  color:var(--ink-soft);
  text-transform:none;
}

.configurator-option-row {
  display:flex;
  flex-direction:column;
  gap:var(--space-2xs);
}

.configurator-radio-item {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:var(--space-2xs) var(--space-xs);
  border:1px solid var(--line);
  background-color:var(--surface);
  cursor:pointer;
  transition:background-color var(--dur-rapid) var(--ease-firm);
}

.configurator-radio-item:hover { background-color:var(--surface-2); }

.configurator-radio-item input[type='radio'],
.configurator-radio-item input[type='checkbox'] {
  accent-color:var(--accent);
  margin-right:var(--space-2xs);
}

.configurator-summary-panel {
  background-color:var(--ground);
  border:2px solid var(--line);
  padding:var(--space-m);
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
  position:sticky;
  top:calc(var(--header-height-condensed) + var(--space-m));
}

.configurator-total-block {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:var(--space-s) 0;
  display:flex;
  flex-direction:column;
  gap:var(--space-3xs);
}

.configurator-total-row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}

.configurator-total-label {
  font-family:var(--vipe-039);
  font-size:var(--step--1);
  text-transform:uppercase;
  color:var(--ink-soft);
}

.configurator-total-val {
  font-family:var(--vipe-039);
  font-size:var(--vipe-769);
  font-weight:700;
  color:var(--ink);
}

.configurator-breakdown-list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-3xs);
}

.configurator-breakdown-item {
  font-family:var(--vipe-039);
  font-size:var(--step--2);
  color:var(--ink-soft);
  display:flex;
  justify-content:space-between;
  border-bottom:1px dashed var(--line);
  padding-bottom:2px;
}

.configurator-disclaimer {
  font-family:var(--vipe-039);
  font-size:var(--step--2);
  line-height:1.45;
  color:var(--ink-soft);
}

/* -------------------------------------------------------------------------- */
/* 8. LEGAL ARCHITECTURE 1: PRIVACY.HTML — PINNED JUMP CHIPS                  */
/* -------------------------------------------------------------------------- */
.privacy-chips-nav {
  position:sticky;
  top:0;
  z-index:80;
  background-color:var(--surface);
  border-bottom:1px solid var(--line);
  padding:var(--space-2xs) 0;
  margin-bottom:var(--space-l);
  box-shadow:0 2px 8px rgba(43, 38, 28, 0.05);
}

@media (min-width: 1024px) {
  .privacy-chips-nav { top:var(--header-height-condensed); }
}

.privacy-chips-scroll {
  display:flex;
  gap:var(--space-2xs);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 var(--space-s);
  scrollbar-width:none;
}

.privacy-chips-scroll::-webkit-scrollbar { display:none; }

.privacy-chip-anchor {
  appearance:none;
  background-color:var(--ground);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--vipe-039);
  font-size:var(--step--2);
  padding:0.35rem 0.75rem;
  white-space:nowrap;
  text-decoration:none;
  border-radius:var(--radius-subtle);
  line-height:1;
  transition:background-color var(--dur-rapid) var(--ease-firm),
              border-color var(--dur-rapid) var(--ease-firm),
              color var(--dur-rapid) var(--ease-firm);
}

.privacy-chip-anchor:hover {
  background-color:var(--surface-2);
  border-color:var(--ink);
}

.privacy-chip-anchor:active {
  background-color:var(--accent);
  color:var(--accent-ink);
}

.privacy-legal-section {
  padding:var(--space-l) 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--header-height-condensed) + 4rem);
}

.privacy-standfirst-rule {
  font-size:var(--vipe-f31);
  font-weight:500;
  color:var(--ink);
  padding-bottom:var(--space-s);
  margin-bottom:var(--space-m);
  border-bottom:1px solid var(--line);
  max-width:65ch;
  line-height:1.5;
}

.privacy-legal-body {
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
  max-width:68ch;
}

/* -------------------------------------------------------------------------- */
/* 9. LEGAL ARCHITECTURE 2: COOKIES.HTML — NUMBERED CLAUSES, WIDE MEASURE     */
/* -------------------------------------------------------------------------- */
.cookies-clause-stack {
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
  padding:var(--space-xl) 0;
}

.cookies-clause-row {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xs);
  padding-bottom:var(--space-l);
  border-bottom:1px solid var(--line);
}

@media (min-width: 768px) {
  .cookies-clause-row {
    grid-template-columns:4.5rem 1fr;
    gap:var(--space-l);
  }
}

.cookies-clause-number {
  font-family:var(--vipe-039);
  font-size:var(--vipe-f31);
  color:var(--ink-soft);
  line-height:1.25;
  font-variant-numeric:tabular-nums;
  padding-top:0.15rem;
}

.cookies-clause-content {
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
  max-width:70ch;
}

.cookies-clause-title {
  font-size:var(--vipe-ad8);
  line-height:1.25;
  color:var(--ink);
  margin:0;
}

/* -------------------------------------------------------------------------- */
/* 10. LEGAL ARCHITECTURE 3: TERMS.HTML — TABBED PARTS & ACCORDION            */
/* -------------------------------------------------------------------------- */
.terms-tab-interface { padding:var(--space-l) 0 var(--space-2xl); }

.terms-tab-bar {
  display:none;
  border-bottom:2px solid var(--line);
  gap:var(--space-3xs);
}

@media (min-width: 800px) {
  .terms-tab-bar { display:flex; }
}

.terms-tab-button {
  appearance:none;
  background-color:var(--surface);
  border:1px solid var(--line);
  border-bottom:0;
  color:var(--ink-soft);
  font-family:var(--vipe-039);
  font-size:var(--step--1);
  letter-spacing:0.03em;
  padding:0.65rem 1.25rem;
  cursor:pointer;
  margin-bottom:-2px;
  position:relative;
  transition:background-color var(--dur-rapid) var(--ease-firm),
              color var(--dur-rapid) var(--ease-firm);
}

.terms-tab-button:hover {
  background-color:var(--surface-2);
  color:var(--ink);
}

.terms-tab-button[aria-selected='true'] {
  background-color:var(--ground);
  color:var(--ink);
  font-weight:600;
  border-top:3px solid var(--accent);
  border-bottom:2px solid var(--ground);
}

.terms-tab-panel {
  padding:var(--space-l) 0;
  display:flex;
  flex-direction:column;
  gap:var(--space-m);
  max-width:70ch;
}

@media (min-width: 800px) {
  .terms-tab-panel[hidden] { display:none !important; }
}

/* Below 800px: collapses into stacked accordion style */
@media (max-width: 799px) {
  .terms-mobile-accordion-group { border-top:1px solid var(--line); }

  .terms-mobile-heading-trigger {
    appearance:none;
    width:100%;
    text-align:left;
    background-color:var(--surface);
    border:0;
    border-bottom:1px solid var(--line);
    padding:var(--space-s);
    font-family:var(--vipe-039);
    font-size:var(--vipe-f31);
    font-weight:600;
    color:var(--ink);
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
  }

  .terms-mobile-heading-trigger:hover { background-color:var(--surface-2); }

  .terms-tab-panel {
    padding:var(--space-s);
    border-bottom:1px solid var(--line);
    background-color:var(--ground);
  }

  .terms-tab-panel[hidden] { display:none !important; }
}

/* 11. WORK / PORTFOLIO PROJECT ARCHIVE                                       */
.portfolio-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-l);
  padding:var(--space-xl) 0;
}

@media (min-width: 840px) {
  .portfolio-grid { grid-template-columns:repeat(2, 1fr); }
}

.project-record-card {
  background-color:var(--surface);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
}

.project-record-media {
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-bottom:1px solid var(--line);
  display:block;
}

.project-record-body {
  padding:var(--space-m);
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
  flex:1 1 auto;
}

.project-record-meta {
  display:flex;
  justify-content:space-between;
  font-family:var(--vipe-039);
  font-size:var(--step--2);
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.project-record-title {
  font-size:var(--vipe-ad8);
  line-height:1.25;
  margin:0;
}

.project-record-deliverables {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line);
  padding-top:var(--space-xs);
  display:flex;
  flex-direction:column;
  gap:var(--space-3xs);
  font-family:var(--vipe-039);
  font-size:var(--step--1);
  color:var(--ink-soft);
}

.project-record-deliverables li strong { color:var(--ink); }

/* 12. FAQ ACCORDION COMPONENT                                                */
.faq-accordion-stack {
  width:100%;
  border-top:1px solid var(--line);
  margin-top:var(--space-m);
}

.faq-accordion-item { border-bottom:1px solid var(--line); }

.faq-accordion-trigger {
  appearance:none;
  width:100%;
  background:transparent;
  border:0;
  padding:var(--space-s) 0;
  text-align:left;
  font-family:var(--vipe-cca);
  font-size:var(--vipe-6ef);
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-s);
  transition:color var(--dur-rapid) var(--ease-firm);
}

.faq-accordion-trigger:hover { color:var(--accent); }

.faq-accordion-trigger .icon {
  transition:transform var(--dur-rapid) var(--ease-firm);
  width:1.25rem;
  height:1.25rem;
  flex-shrink:0;
}

.faq-accordion-trigger[aria-expanded='true'] .icon { transform:rotate(180deg); }

.faq-accordion-panel {
  padding-bottom:var(--space-m);
  display:none;
}

.faq-accordion-panel.is-open { display:block; }

.faq-accordion-content {
  font-size:var(--vipe-f31);
  line-height:1.55;
  color:var(--ink);
  max-width:65ch;
}

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
.contact-layout-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xl);
  padding:var(--space-xl) 0;
}

@media (min-width: 900px) {
  .contact-layout-grid {
    grid-template-columns:1fr 1.35fr;
    gap:var(--space-2xl);
  }
}

.contact-dossier-col {
  display:flex;
  flex-direction:column;
  gap:var(--space-m);
}

.contact-address-card {
  background-color:var(--surface);
  border:1px solid var(--line);
  padding:var(--space-m);
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}

.contact-address-card h3 {
  font-size:var(--vipe-6ef);
  margin-bottom:var(--space-2xs);
}

.contact-address-lines {
  font-family:var(--vipe-039);
  font-size:var(--step--1);
  line-height:1.6;
  color:var(--ink);
}

.contact-registration-box {
  background-color:var(--surface-2);
  border:1px solid var(--line);
  padding:var(--space-s);
  font-family:var(--vipe-039);
  font-size:var(--step--2);
  line-height:1.5;
  color:var(--ink-soft);
}

.contact-registration-box strong { color:var(--ink); }

.contact-form-card {
  background-color:var(--surface);
  border:1px solid var(--line);
  padding:var(--space-l);
}

/* -------------------------------------------------------------------------- */
/* 14. 404 NOT FOUND PAGE SPECIFICATION                                       */
/* -------------------------------------------------------------------------- */
.error-page-container {
  min-height:60vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:var(--space-2xl) 0;
  max-width:60ch;
}

.error-code-badge {
  font-family:var(--vipe-039);
  font-size:var(--vipe-be1);
  font-weight:700;
  line-height:1;
  color:var(--accent);
  margin-bottom:var(--space-xs);
}

.error-message-body {
  font-size:var(--vipe-6ef);
  line-height:1.5;
  color:var(--ink);
  margin-bottom:var(--space-m);
}