.hero-editorial {
   padding-top: clamp(2.5rem, 5vw, 5.5rem);
   padding-bottom: clamp(3rem, 6vw, 6rem);
   border-bottom: 1px solid var(--rule-strong);
   position: relative;
   overflow: hidden;
}

.hero-editorial::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, var(--accent) 0%, transparent 60%);
   opacity: 0.6;
}

.hero-split {
   display: grid;
   grid-template-columns: minmax(0, 1.85fr) minmax(0, 1.15fr);
   gap: clamp(2rem, 5vw, 5rem);
   align-items: start;
}

.hero-lead-col { min-width: 0; }

.hero-title {
   font-size: clamp(2.4rem, 2rem + 2.5vw, 4.2rem);
   font-weight: 900;
   line-height: 1.12;
   letter-spacing: -0.02em;
   color: var(--ink);
   margin-bottom: var(--space-md);
   text-wrap: balance;
}

.hero-subtitle {
   font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
   line-height: var(--line-height-snug);
   color: var(--ink-muted);
   max-width: 44ch;
   margin-bottom: var(--space-lg);
}

.hero-side-col {
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
}

.hero-frame {
   position: relative;
   border: 1px solid var(--rule-strong);
   border-radius: var(--radius-xs);
   overflow: hidden;
   background-color: var(--ground-deep);
   box-shadow: 0 16px 40px rgba(20, 7, 8, 0.55);
}

.hero-frame img {
   width: 100%;
   height: auto;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   display: block;
}

.hero-frame-caption {
   padding: 0.75rem 1rem;
   background-color: var(--ground-surface);
   border-top: 1px solid var(--rule);
   font-family: var(--biru-a04);
   font-size: 0.75rem;
   color: var(--ink-faint);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.hero-facts-ledger {
   border: 1px solid var(--rule);
   background-color: var(--ground-deep);
   padding: var(--space-md);
   border-radius: var(--radius-xs);
}

.hero-facts-ledger h6 {
   color: #F7F2EB;
   background-color: var(--ground-surface);
   padding: 0.35rem 0.6rem;
   border-radius: var(--radius-xs);
   display: inline-block;
   margin-bottom: var(--space-xs);
}

/* Secondary Hero for Subpages */
.page-hero {
   padding-top: clamp(2.5rem, 5vw, 4.5rem);
   padding-bottom: clamp(2.5rem, 4vw, 4rem);
   border-bottom: 1px solid var(--rule);
   background: radial-gradient(ellipse at 80% 20%, rgba(212, 175, 55, 0.06) 0%, transparent 60%);
}

.page-hero-inner {
   display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
   gap: clamp(2rem, 4vw, 4.5rem);
   align-items: baseline;
}

.page-hero-title {
   font-size: clamp(2.1rem, 1.8rem + 1.8vw, 3.4rem);
   line-height: var(--line-height-tight);
   margin-bottom: var(--space-xs);
}

.page-hero-intro {
   font-size: var(--font-size-md);
   line-height: var(--line-height-snug);
   color: var(--ink-muted);
   max-width: 52ch;
}

.page-hero-meta {
   font-family: var(--biru-a04);
   font-size: var(--font-size-xs);
   color: var(--ink-faint);
   display: flex;
   flex-direction: column;
   gap: var(--space-2xs);
   border-left: 1px solid var(--rule-strong);
   padding-left: var(--space-md);
}

.spine-section {
   position: relative;
   padding-block: clamp(4rem, 7vw, 7.5rem);
   border-bottom: 1px solid var(--rule);
}

.spine-container {
   display: grid;
   grid-template-columns: 80px minmax(0, 1fr);
   gap: clamp(1.5rem, 3.5vw, 3.5rem);
   position: relative;
}

.spine-rail {
   position: relative;
   display: flex;
   justify-content: center;
}

.spine-svg-wrap {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 80px;
   height: 100%;
}

.spine-svg {
   width: 100%;
   height: 100%;
   overflow: visible;
}

.spine-path-track {
   stroke: var(--rule);
   stroke-width: 2;
   fill: none;
   stroke-dasharray: 4 4;
}

.spine-path-draw {
   stroke: var(--accent);
   stroke-width: 3;
   fill: none;
   stroke-linecap: round;
   transition: stroke-dashoffset 0.1s linear;
}

.spine-milestone {
   position: relative;
   padding-bottom: clamp(3rem, 5vw, 5rem);
}

.spine-milestone:last-child { padding-bottom: 0; }

.spine-milestone-marker {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 2px solid var(--accent);
   background-color: var(--ground-deep);
   position: absolute;
   left: -58px;
   top: 0.35rem;

   z-index: 2;
   box-shadow: 0 0 0 4px var(--ground);
   transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.spine-milestone.is-active .spine-milestone-marker {
   background-color: var(--accent);
   transform: scale(1.2);
   box-shadow: 0 0 12px var(--accent-glow);
}

.spine-milestone-content {
   display: grid;
   grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
   gap: var(--space-lg);
   align-items: start;
}

.spine-milestone-text h3 {
   font-size: var(--font-size-xl);

   margin-bottom: var(--space-xs);
   color: var(--ink);
}

.spine-milestone-text p {
   color: var(--ink-muted);
   line-height: var(--line-height-body);
}

.spine-milestone-media {
   border: 1px solid var(--rule);
   border-radius: var(--radius-xs);
   overflow: hidden;
   background-color: var(--ground-deep);
}

.spine-milestone-media img {
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 10;
   object-fit: cover;
}

.editorial-flow {
   display: flex;
   flex-direction: column;
   gap: clamp(2.5rem, 5vw, 5rem);
}

.reading-unit {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 280px;

   gap: clamp(2rem, 4vw, 4.5rem);
   align-items: start;
}

.reading-main { min-width: 0; }

.reading-main h2 {
   font-size: var(--font-size-2xl);
   line-height: var(--line-height-tight);
   margin-bottom: var(--space-sm);
}

.reading-main h3 {
   font-size: var(--font-size-xl);
   line-height: var(--line-height-snug);
   margin-bottom: var(--space-xs);
}

.reading-margin {
   min-width: 0;
   border-left: 1px solid var(--rule);
   padding-left: var(--space-md);
   margin-top: 0.4rem;
   font-size: var(--font-size-xs);
   color: var(--ink-faint);
   line-height: var(--line-height-snug);
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
}

.margin-card {
   background-color: rgba(56, 21, 24, 0.4);
   border: 1px solid var(--rule);
   padding: 0.85rem;
   border-radius: var(--radius-xs);
}

.margin-card-label {
   font-family: var(--biru-a04);
   font-size: 0.72rem;
   color: var(--accent);
   text-transform: uppercase;
   letter-spacing: var(--tracking-caps);
   display: block;
   margin-bottom: 0.25rem;
}

.margin-card-value {
   font-family: var(--biru-a04);
   font-size: 0.85rem;
   color: var(--ink);
   font-weight: 500;
}

.margin-img-thumb {
   border: 1px solid var(--rule);
   border-radius: var(--radius-xs);
   overflow: hidden;
   margin-top: var(--space-2xs);
}

.margin-img-thumb img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   display: block;
}

.margin-img-thumb figcaption {
   font-family: var(--biru-a04);
   font-size: 0.68rem;
   color: var(--ink-faint);
   padding: 0.35rem 0.5rem;
   background-color: var(--ground-deep);
   border-top: 1px solid var(--rule);
}

/* Full Width Break in Margin Rhythm */
.editorial-break {
   margin-block: var(--space-lg);
   border-top: 1px solid var(--rule-strong);
   border-bottom: 1px solid var(--rule-strong);
   padding-block: var(--space-md);
}

.editorial-break-img {
   width: 100%;
   max-height: 480px;
   object-fit: cover;
   border-radius: var(--radius-xs);
   border: 1px solid var(--rule);
}

.product-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
   gap: clamp(2rem, 5vw, 5rem);
   align-items: start;
}

.product-gallery {
   position: sticky;
   top: calc(5rem + var(--space-md));
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
}

.product-hero-image {
   border: 1px solid var(--rule-strong);
   border-radius: var(--radius-xs);
   overflow: hidden;
   background-color: var(--ground-deep);
   aspect-ratio: 1 / 1;
}

.product-hero-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.product-spec-callout {
   border: 1px solid var(--rule);
   background-color: rgba(56, 21, 24, 0.45);
   padding: var(--space-md);
   border-radius: var(--radius-xs);
}

.product-summary {
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
}

.product-price-bracket {
   padding: 1.1rem 1.4rem;
   background-color: var(--ground-deep);
   border: 1px solid var(--accent);
   border-radius: var(--radius-xs);
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: var(--space-sm);
}

.bracket-amount {
   font-family: var(--biru-a04);
   font-size: clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
   font-weight: 700;
   color: var(--accent);
}

.bracket-note {
   font-size: var(--font-size-xs);
   color: var(--ink-faint);
   font-family: var(--biru-a04);
}

.formula-breakdown-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--rule);
}

.formula-breakdown-item {
   padding: var(--space-sm) 0;
   border-bottom: 1px dashed var(--rule);
   display: grid;
   grid-template-columns: 180px minmax(0, 1fr);
   gap: var(--space-md);
   font-size: var(--font-size-sm);
}

.formula-term {
   font-family: var(--biru-a04);
   font-size: var(--font-size-xs);
   color: var(--accent);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
}

.formula-desc {
   color: var(--ink-muted);
   line-height: var(--line-height-snug);
}

.timeline-ledger {
   display: flex;
   flex-direction: column;
   border-left: 2px solid var(--rule-strong);
   margin-left: 1rem;
   padding-left: var(--space-lg);
   margin-block: var(--space-xl);
   gap: var(--space-xl);
}

.timeline-step { position: relative; }

.timeline-step::before {
   content: '';
   position: absolute;
   left: calc(-1 * var(--space-lg) - 7px);
   top: 0.35rem;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: var(--accent);
   border: 2px solid var(--ground);
}

.timeline-header {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: var(--space-xs);
   margin-bottom: var(--space-2xs);
}

.timeline-duration {
   font-family: var(--biru-a04);
   font-size: var(--font-size-xs);
   color: var(--accent);
}

.matrix-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: var(--space-md);
   margin-block: var(--space-lg);
}

.matrix-card {
   background-color: rgba(56, 21, 24, 0.4);
   border: 1px solid var(--rule);
   padding: var(--space-md);
   border-radius: var(--radius-xs);
}

.matrix-card.is-conflict {
   border-color: rgba(217, 83, 79, 0.6);
   background-color: rgba(217, 83, 79, 0.08);
}

.matrix-card.is-synergy {
   border-color: rgba(85, 179, 105, 0.6);
   background-color: rgba(85, 179, 105, 0.08);
}

.matrix-card-title {
   font-family: var(--biru-a04);
   font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wider);
   margin-bottom: var(--space-2xs);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.statute-container {
   max-width: var(--measure-wide);
   margin-inline: auto;
   padding-block: clamp(2.5rem, 5vw, 5rem);
}

.statute-header {
   border-bottom: 2px solid var(--rule-strong);
   padding-bottom: var(--space-md);
   margin-bottom: var(--space-xl);
}

.statute-columns {
   column-count: 2;
   column-gap: clamp(2rem, 4vw, 4rem);
   column-rule: 1px solid var(--rule);
   text-align: justify;
}

.statute-section {
   break-inside: avoid-column;
   margin-bottom: var(--space-lg);
   font-size: 0.92rem;
   line-height: 1.55;
   color: var(--ink-muted);
   background-color: var(--ground);
}

.statute-runin {
   font-family: var(--biru-fad);
   font-weight: 700;
   font-size: 0.95rem;
   letter-spacing: var(--tracking-caps);
   text-transform: uppercase;
   color: var(--accent);
   display: inline;
   margin-right: 0.35rem;
}

.statute-columns p {
   display: inline;
   margin-bottom: 0;
}

.statute-columns p + p {
   display: block;
   margin-top: 0.65rem;
}

.statute-table-break {
   column-span: all;
   margin-block: var(--space-lg);
   border-block: 1px solid var(--rule-strong);
   padding-block: var(--space-md);
}

.statute-dsar-intake {
   column-span: all;
   margin-top: var(--space-2xl);
   padding-top: var(--space-lg);
   border-top: 2px solid var(--rule-strong);
}

.cookie-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 260px;
   gap: clamp(2rem, 5vw, 4.5rem);
   align-items: start;
   max-width: var(--shell-max);
   margin-inline: auto;
   padding-block: clamp(2.5rem, 5vw, 5rem);
}

.cookie-main-flow { min-width: 0; }

.cookie-block {
   margin-bottom: var(--space-xl);
   position: relative;
}

.cookie-block h2 {
   font-size: var(--font-size-xl);
   margin-bottom: var(--space-sm);
   color: var(--ink);
}

.cookie-block p {
   font-size: var(--font-size-base);
   line-height: var(--line-height-body);
}

.cookie-margin-col {
   min-width: 0;
   border-left: 1px solid var(--rule);
   padding-left: var(--space-md);
   margin-top: 0.35rem;
}

.cookie-aside-item {
   margin-bottom: var(--space-xl);
   font-size: var(--font-size-xs);
   color: var(--ink-faint);
   line-height: var(--line-height-snug);
}

.cookie-aside-item strong {
   color: var(--accent);
   display: block;
   margin-bottom: 0.2rem;
   font-family: var(--biru-a04);
   letter-spacing: var(--tracking-wide);
}

/* In-flow aside for small screens */
.cookie-aside-inline { display: none; }

.terms-measure-wrap {
   max-width: var(--measure-wide);
   margin-inline: auto;
   padding-block: clamp(2.5rem, 5vw, 5.5rem);
}

.terms-header-block {
   border-bottom: 1px solid var(--rule-strong);
   padding-bottom: var(--space-lg);
   margin-bottom: var(--space-2xl);
}

.terms-clause-row {
   display: grid;
   grid-template-columns: 80px minmax(0, 1fr);
   gap: var(--space-md);
   margin-bottom: var(--space-2xl);
   align-items: baseline;
}

.clause-num {
   font-family: var(--biru-a04);
   font-size: var(--font-size-sm);
   color: var(--accent);
   font-weight: 500;
   letter-spacing: var(--tracking-caps);
   user-select: none;
}

.clause-content { min-width: 0; }

.clause-heading {
   font-size: var(--font-size-lg);
   font-weight: 700;
   margin-bottom: var(--space-xs);
   color: var(--ink);
}

.varo911 {
   font-size: var(--font-size-base);
   line-height: var(--line-height-loose);
   color: var(--ink-muted);
}

.varo911 p {
   max-width: 72ch;
   margin-bottom: var(--space-sm);
}

.faq-ledger {
   border-top: 1px solid var(--rule-strong);
   margin-block: var(--space-lg);
}

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

.faq-trigger {
   width: 100%;
   background: transparent;
   border: 0;
   padding: var(--space-md) 0.5rem;
   text-align: left;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-md);
   cursor: pointer;
   min-height: 44px;
   font-family: var(--biru-fad);
   font-size: var(--font-size-md);
   font-weight: 600;
   color: var(--ink);
   transition: color var(--motion-fast) ease, padding-left var(--motion-fast) ease;
}

.faq-trigger:hover {
   color: var(--accent);
   padding-left: 0.85rem;
}

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

.faq-trigger:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}

.faq-icon {
   width: 1.25em;
   height: 1.25em;
   transition: transform var(--motion-fast) ease;
   color: var(--accent);
   flex-shrink: 0;
}

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

.faq-panel {
   display: none;
   padding: 0 0.5rem var(--space-md);
   color: var(--ink-muted);
   line-height: var(--line-height-body);
}

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

.contact-split {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
   gap: clamp(2rem, 5vw, 5rem);
   align-items: start;
   margin-block: var(--space-xl);
}

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

.studio-card-plate {
   border: 1px solid var(--rule-strong);
   background-color: rgba(56, 21, 24, 0.45);
   padding: clamp(1rem, 2.5vw, var(--space-lg));
   border-radius: var(--radius-xs);
}

.studio-card-plate h3 {
   font-size: var(--font-size-lg);
   margin-bottom: var(--space-xs);
   color: var(--ink);
}

.studio-detail-list {
   list-style: none;
   padding: 0;
   margin: var(--space-md) 0 0;
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
   font-size: var(--font-size-sm);
}

.studio-detail-item {
   display: flex;
   align-items: flex-start;
   gap: var(--space-xs);
   line-height: var(--line-height-snug);
}

.studio-detail-item a { color: var(--ink); }

.studio-detail-item a:hover { color: var(--accent); }

.error-scene {
   padding-block: clamp(4rem, 8vw, 8rem);
   text-align: left;
}

.error-split {
   display: grid;
   grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
   gap: clamp(2rem, 4vw, 4.5rem);
   align-items: center;
}

.error-code {
   font-family: var(--biru-a04);
   font-size: clamp(3.5rem, 6vw, 7rem);
   color: var(--accent);
   line-height: 1;
   font-weight: 700;
   margin-bottom: var(--space-xs);
}

@media (max-width: 1024px) {
   .hero-split,
   .page-hero-inner,
   .product-layout,
   .spine-milestone-content,
   .contact-split,
   .error-split {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
   }

   .product-gallery { position: static; }

   .statute-columns {
      column-count: 1;
      column-rule: 0;
      text-align: left;
   }

   .cookie-layout {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
   }

   .cookie-margin-col { display: none; }

   .cookie-aside-inline {
      display: block;
      margin-top: var(--space-xs);
      margin-bottom: var(--space-md);
      padding: 0.65rem 0.85rem;
      border-left: 2px solid var(--accent);
      background-color: rgba(56, 21, 24, 0.4);
      font-size: var(--font-size-xs);
      color: var(--ink-faint);
   }

   .reading-unit {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
   }

   .reading-margin {
      border-left: 2px solid var(--accent-dim);
      padding-left: var(--space-sm);
      margin-bottom: var(--space-lg);
   }
}

@media (max-width: 768px) {
   .spine-container {
      grid-template-columns: 1fr;
      gap: var(--space-md);
   }

   .spine-rail { display: none; }

   .spine-milestone-marker {
      position: static;
      margin-bottom: var(--space-2xs);
      display: inline-block;
   }

   .timeline-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25rem;
   }

   .timeline-ledger {
      margin-left: 0.5rem;
      padding-left: var(--space-sm);
   }

   .timeline-step::before { left: calc(-1 * var(--space-sm) - 7px); }

   .formula-breakdown-item {
      grid-template-columns: 1fr;
      gap: var(--space-3xs);
   }

   .terms-clause-row {
      grid-template-columns: 1fr;
      gap: var(--space-2xs);
      margin-bottom: var(--space-xl);
   }

   .clause-num {
      display: inline-block;
      border-bottom: 1px solid var(--rule-strong);
      padding-bottom: 2px;
      width: fit-content;
   }
}

@media (max-width: 360px) {
   .hero-title { font-size: 2rem; }

   .page-hero-title { font-size: 1.85rem; }

   .bracket-amount { font-size: 1.3rem; }

   .statute-section { font-size: 0.88rem; }
}