[data-opening='clip'][data-clip-track] {
   position:relative;
   width:100%;
   min-height:100vh;
   min-height:100dvh;
   background-color:var(--ground);
}

/* Ensure hero content is immediately visible and properly layered on desktop */
[data-clip-stage] {
   min-height:80vh !important;
   display:flex !important;
   visibility:visible !important;
   opacity:1 !important;
   z-index:2 !important;
}

.clip-stage__content {
   display:block !important;
   visibility:visible !important;
   opacity:1 !important;
   z-index:10 !important;
}

[data-clip-stage] video,
[data-clip-stage] picture,
[data-clip-stage] img {
   opacity:1 !important;
   visibility:visible !important;
}

@media (min-width: 960px) {
   section#sequence.sequence-section {
      margin-top:2rem !important;
      z-index:1 !important;
   }
}

[data-clip-stage] {
   position:relative;
   width:100%;
   height:100vh;
   height:100dvh;
   display:flex;
   flex-direction:column;
   justify-content:flex-end;
   padding:clamp(2rem, 5vw, 4.5rem) var(--container-pad);
   background-color:var(--surface-deep);
   box-sizing:border-box;
   isolation:isolate;
}

[data-clip-stage] picture,
[data-clip-stage] img,
[data-clip-stage] video {
   position:absolute;
   inset:0;
   width:100%;
   height:100%;
   object-fit:cover;
   z-index:1;
}

[data-clip-stage]::after {
   content:"";
   position:absolute;
   inset:0;
   background:linear-gradient(
      180deg,
      rgba(8, 20, 20, 0.25) 0%,
      rgba(8, 20, 20, 0.65) 50%,
      rgba(8, 20, 20, 0.94) 100%
   );
   z-index:2;
   pointer-events:none;
}

.clip-stage__content {
   position:relative;
   z-index:3;
   max-width:960px;
   width:100%;
   min-width:0;
}

.clip-stage__tag {
   display:inline-flex;
   align-items:center;
   gap:0.5rem;
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   letter-spacing:0.1em;
   text-transform:uppercase;
   color:var(--accent);
   background-color:var(--surface-deep);
   border:1px solid var(--border-hairline);
   padding:0.35rem 0.75rem;
   margin-block-end:clamp(1rem, 2vw, 1.5rem);
   width:fit-content;
}

.clip-stage__title {
   font-family:var(--joha-383);
   font-size:clamp(2.2rem, 6vw, 5.5rem);
   line-height:1.02;
   font-weight:800;
   letter-spacing:-0.035em;
   color:var(--ink);
   margin-block-end:clamp(1.25rem, 2.5vw, 2rem);
   text-wrap:balance;
   overflow-wrap:break-word;
}

[data-clip-caption] {
   font-family:var(--joha-836);
   font-size:clamp(1.125rem, 1.8vw, 1.625rem);
   line-height:1.45;
   color:var(--ink);
   max-width:58ch;
   margin-block-end:clamp(1.5rem, 3vw, 2.25rem);
}

[data-clip-caption][hidden] { display:none !important; }

.clip-stage__actions {
   display:flex;
   align-items:center;
   gap:1rem;
   flex-wrap:wrap;
}

.page-hero {
   position:relative;
   width:100%;
   padding-block:clamp(3rem, 7vw, 6.5rem);
   border-bottom:1px solid var(--border-hairline);
   background-color:var(--ground);
   overflow:hidden;
}

.page-hero--deep { background-color:var(--surface-deep); }

.page-hero__meta {
   display:flex;
   align-items:center;
   gap:1rem;
   flex-wrap:wrap;
   margin-block-end:1.25rem;
}

.page-hero__title {
   font-family:var(--joha-383);
   font-size:clamp(2.4rem, 6vw, 5rem);
   line-height:1.04;
   letter-spacing:-0.03em;
   color:var(--ink);
   margin-block-end:1.5rem;
   max-width:22ch;
   text-wrap:balance;
   overflow-wrap:break-word;

}

.page-hero__lead {
   font-family:var(--joha-836);
   font-size:clamp(1.15rem, 1.6vw, 1.45rem);
   line-height:1.65;
   color:var(--ink-dim);
   max-width:64ch;
   margin-block-end:2rem;
}

.page-hero__specs {
   display:flex;
   flex-wrap:wrap;
   gap:1rem 2rem;
   padding-block-start:1.5rem;
   border-top:1px solid var(--border-hairline);
}

.page-hero__spec-item {
   display:flex;
   flex-direction:column;
   gap:0.25rem;
}

.page-hero__spec-label {
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   color:var(--ink-dim);
   letter-spacing:0.06em;
   text-transform:uppercase;
}

.page-hero__spec-val {
   font-family:var(--joha-fb8);
   font-size:var(--joha-b83);
   font-weight:600;
   color:var(--accent);
}

.sequence-section {
   position:relative;
   width:100%;
   background-color:var(--surface-deep);
   border-bottom:1px solid var(--border-hairline);
   padding-block:clamp(4rem, 8vw, 8rem);
}

.sequence-container {
   display:grid;
   grid-template-columns:1fr;
   gap:clamp(2.5rem, 5vw, 5rem);
   align-items:center;
}

@media (min-width: 960px) {
   .sequence-container { grid-template-columns:1.1fr 0.9fr; }

}

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

.sequence-frame {
   position:absolute;
   inset:0;
   width:100%;
   height:100%;
   object-fit:cover;
   opacity:0;
   visibility:hidden;
   transition:opacity var(--duration-base) var(--ease-out),
                     visibility var(--duration-base) var(--ease-out);
}

.sequence-frame.is-active,
.sequence-frame:first-child {
   opacity:1;
   visibility:visible;
}

.sequence-frame.is-active ~ .sequence-frame:not(.is-active) {
   opacity:0;
   visibility:hidden;
}

.sequence-overlay-tag {
   position:absolute;
   top:1rem;
   left:1rem;
   z-index:5;
   background-color:var(--surface-deep);
   border:1px solid var(--border-hairline);
   padding:0.35rem 0.65rem;
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   color:var(--accent);
}

.sequence-stepper {
   display:flex;
   flex-direction:column;
   gap:clamp(1.25rem, 3vw, 2.5rem);
}

.sequence-step {
   display:flex;
   gap:1.25rem;
   padding:1.25rem;
   background-color:var(--surface);
   border:1px solid var(--border-hairline);
   transition:border-color var(--duration-fast) var(--ease-out),
                     background-color var(--duration-fast) var(--ease-out);
}

.sequence-step.is-current {

   border-color:var(--accent);
   background-color:#0D2E2E;
}

.sequence-step__index {
   font-family:var(--joha-fb8);
   font-size:var(--joha-438);
   font-weight:600;
   color:var(--accent);
   flex-shrink:0;
   line-height:1.1;
}

.sequence-step__body {
   flex:1 1 auto;
   min-width:0;
}

.sequence-step__title {
   font-family:var(--joha-383);
   font-size:var(--joha-438);
   color:var(--ink);
   margin-block-end:0.4rem;
}

.sequence-step__desc {
   font-size:var(--step--1);
   line-height:1.55;
   color:var(--ink-dim);
   margin-block-end:0;
}

.exchange-section {
   width:100%;
   padding-block:var(--section-gutter);
}

.exchange-layout {
   display:flex;
   flex-direction:column;
   gap:clamp(3.5rem, 7vw, 7rem);
}

.exchange-group {
   display:flex;
   flex-direction:column;
   gap:1.75rem;
   border-top:1px solid var(--border-hairline);
   padding-block-start:2rem;
}

.exchange-group--open {
   border-top:none;
   padding-block-start:0;
}

.customer-prompt {
   border-left:3px solid var(--accent);
   padding-left:clamp(1rem, 3vw, 2.5rem);
}

.customer-prompt__speaker {
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   color:var(--accent);
   letter-spacing:0.08em;
   text-transform:uppercase;
   margin-block-end:0.4rem;
}

.customer-prompt__query {
   font-family:var(--joha-383);
   font-size:clamp(1.4rem, 2.8vw, 2.25rem);
   font-weight:700;
   line-height:1.18;
   color:var(--ink);
   text-wrap:balance;
}

.bench-response {
   background-color:var(--surface);
   border:1px solid var(--border-hairline);
   padding:clamp(1.5rem, 4vw, 3rem);
}

.bench-response__speaker {
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   color:var(--ink-dim);
   letter-spacing:0.08em;
   text-transform:uppercase;
   margin-block-end:1rem;
   display:flex;
   align-items:center;
   gap:0.5rem;
}

.bench-response__speaker::before {
   content:"";
   display:inline-block;
   width:8px;
   height:8px;
   background-color:var(--accent);
}

.bench-response__body {
   font-size:var(--joha-b83);
   line-height:1.68;
   color:var(--ink);
}

.bench-response__body p { margin-block-end:1.25rem; }

.bench-response__body p:last-child { margin-block-end:0; }

.evidence-block {
   margin-block-start:2rem;
   width:100%;
}

.evidence-block picture,
.evidence-block img {
   width:100%;
   aspect-ratio:16 / 9;
   object-fit:cover;
   border:1px solid var(--border-hairline);
   display:block;
}

.evidence-block__caption {
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   color:var(--ink-dim);
   margin-block-start:0.75rem;
   line-height:1.45;
}

.catalogue-grid {
   display:grid;
   grid-template-columns:1fr;
   gap:2rem;
   margin-block:2.5rem;
}

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

@media (min-width: 1100px) {
   .catalogue-grid--4col { grid-template-columns:repeat(4, 1fr); }
}

.catalogue-item-card {
   display:flex;
   flex-direction:column;
   background-color:var(--surface);
   border:1px solid var(--border-hairline);
   transition:border-color var(--duration-fast) var(--ease-out),
                     transform var(--duration-fast) var(--ease-out);
   height:100%;
}

.catalogue-item-card:hover {
   border-color:var(--accent);
   transform:translateY(-3px);
}

.catalogue-item-card__media {
   position:relative;
   width:100%;
   aspect-ratio:3 / 2;
   overflow:hidden;
   border-bottom:1px solid var(--border-hairline);
   background-color:var(--surface-deep);
}

.catalogue-item-card__media img {
   width:100%;
   height:100%;
   object-fit:cover;
   transition:transform var(--duration-base) var(--ease-out);
}

.catalogue-item-card:hover .catalogue-item-card__media img { transform:scale(1.03); }

.catalogue-item-card__body {
   padding:clamp(1.25rem, 3vw, 2rem);
   display:flex;
   flex-direction:column;
   flex:1 1 auto;
}

.catalogue-item-card__title {
   font-family:var(--joha-383);
   font-size:var(--joha-438);
   line-height:1.2;
   color:var(--ink);
   margin-block-end:0.5rem;
}

.catalogue-item-card__title a {
   color:var(--ink);
   text-decoration:none;
}

.catalogue-item-card__title a:hover { color:var(--accent); }

.catalogue-item-card__price {
   font-family:var(--joha-fb8);
   font-size:var(--joha-b83);
   font-weight:600;
   color:var(--accent);
   margin-block-end:1rem;
}

.catalogue-item-card__desc {
   font-size:var(--step--1);
   line-height:1.6;
   color:var(--ink-dim);
   margin-block-end:1.5rem;
   flex-grow:1;
}

.catalogue-item-card__footer {
   margin-top:auto;
   padding-block-start:1rem;
   border-top:1px solid var(--border-hairline);
   display:flex;
   align-items:center;
   justify-content:space-between;
}

.criteria-list {
   display:grid;
   grid-template-columns:1fr;
   gap:1.25rem;
   margin-block:2rem;
}

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

@media (min-width: 960px) {
   .criteria-list { grid-template-columns:repeat(3, 1fr); }
}

.criteria-card {
   background-color:var(--surface);
   border:1px solid var(--border-hairline);
   padding:1.5rem;
}

.criteria-card__title {
   font-family:var(--joha-fb8);
   font-size:var(--joha-b83);
   color:var(--accent);
   margin-block-end:0.5rem;
   display:flex;
   align-items:center;
   gap:0.5rem;
}

.criteria-card__text {
   font-size:var(--step--1);
   line-height:1.55;
   color:var(--ink-dim);
   margin-block-end:0;
}

.materials-stack {
   display:flex;
   flex-direction:column;
   gap:1.5rem;
   margin-block:2rem;
}

.material-row {
   display:grid;
   grid-template-columns:1fr;
   gap:1rem;
   padding:1.5rem;
   background-color:var(--surface);
   border:1px solid var(--border-hairline);
}

@media (min-width: 800px) {
   .material-row {
      grid-template-columns:240px 1fr 180px;
      align-items:center;
   }
}

.material-row__name {
   font-family:var(--joha-383);
   font-size:var(--joha-438);
   color:var(--ink);
}

.material-row__detail {
   font-size:var(--step--1);
   line-height:1.55;
   color:var(--ink-dim);
}

.material-row__stat {
   font-family:var(--joha-fb8);
   font-size:var(--joha-b83);
   font-weight:600;
   color:var(--accent);
   text-align:left;
}

@media (min-width: 800px) {
   .material-row__stat { text-align:right; }
}

.doc-card-layout {
   width:100%;
   padding-block:clamp(3rem, 6vw, 6rem);
}

.doc-card {
   background-color:var(--surface);
   border:1px solid var(--border-hairline);
   box-shadow:0 16px 48px rgba(0, 0, 0, 0.45);
   padding:clamp(2rem, 5vw, 4.5rem);
   max-width:920px;
   margin-inline:auto;
   position:relative;
}

.doc-card__header {
   border-bottom:2px solid var(--accent);
   padding-block-end:2rem;
   margin-block-end:3rem;
}

.doc-card__meta-bar {
   display:flex;
   flex-wrap:wrap;
   gap:0.75rem 1.5rem;
   align-items:center;
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   color:var(--ink-dim);
   margin-block-end:1rem;
}

.doc-card__status-tag {
   color:var(--surface-deep);
   background-color:var(--accent);
   padding:0.2rem 0.5rem;
   font-weight:600;
   letter-spacing:0.05em;
   text-transform:uppercase;
}

.doc-card__title {
   font-family:var(--joha-383);
   font-size:clamp(2rem, 4.5vw, 3.5rem);
   line-height:1.08;
   color:var(--ink);
   margin-block-end:1rem;
}

.doc-card__subtitle {
   font-size:var(--joha-b83);
   color:var(--ink-dim);
   line-height:1.6;
}

.doc-card__body {
   display:flex;
   flex-direction:column;
   gap:2.75rem;
}

.doc-clause {
   display:flex;
   flex-direction:column;
   gap:0.75rem;
   padding-block-start:1.5rem;
   border-top:1px solid var(--border-hairline);
}

.doc-clause--first {
   border-top:none;
   padding-block-start:0;
}

.doc-clause__header {
   display:flex;
   align-items:baseline;
   gap:0.75rem;
   flex-wrap:wrap;
}

.doc-clause__num {
   font-family:var(--joha-fb8);
   font-size:var(--joha-b83);
   font-weight:600;
   color:var(--accent);
}

.doc-clause__title {
   font-family:var(--joha-383);
   font-size:var(--joha-438);
   color:var(--ink);
}

.doc-clause__content {
   font-size:var(--joha-b83);
   line-height:1.7;
   color:var(--ink);
}

.doc-clause__content p { margin-block-end:1rem; }

.doc-clause__content p:last-child { margin-block-end:0; }

.doc-clause__content ul {
   list-style:disc;
   padding-inline-start:1.5rem;
   margin-block:1rem;
}

.doc-clause__content li { margin-block-end:0.5rem; }

.notes-layout {
   width:100%;
   padding-block:clamp(3rem, 6vw, 6rem);
}

.notes-grid {
   display:flex;
   flex-direction:column;
   gap:3rem;
   max-width:1100px;
   margin-inline:auto;
}

.notes-pair {
   display:grid;
   grid-template-columns:1fr;
   gap:1.5rem;
   padding-block-start:2rem;
   border-top:1px solid var(--border-hairline);
}

.notes-pair--first {
   border-top:none;
   padding-block-start:0;
}

@media (min-width: 900px) {
   .notes-pair {
      grid-template-columns:1fr 340px;
      gap:3rem;
      align-items:start;
   }
}

.notes-main-column { min-width:0; }

.notes-main-title {
   font-family:var(--joha-383);
   font-size:var(--joha-45b);
   color:var(--ink);
   margin-block-end:1rem;
}

.notes-main-text {
   font-size:var(--joha-b83);
   line-height:1.7;
   color:var(--ink);
}

.notes-main-text p { margin-block-end:1rem; }

.notes-main-text p:last-child { margin-block-end:0; }

.notes-aside-column {
   background-color:var(--surface-deep);
   border:1px solid var(--border-hairline);
   padding:1.25rem 1.5rem;
   display:flex;
   flex-direction:column;
   gap:0.75rem;
}

.notes-aside-heading {
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   color:var(--accent);
   text-transform:uppercase;
   letter-spacing:0.08em;
   margin-block-end:0.25rem;
}

.notes-aside-meta {
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   line-height:1.55;
   color:var(--ink-dim);
}

.notes-aside-meta strong { color:var(--ink); }

.questions-layout {
   width:100%;
   padding-block:clamp(3rem, 6vw, 6rem);
}

.questions-list {
   display:flex;
   flex-direction:column;
   gap:clamp(2.5rem, 5vw, 4.5rem);
   max-width:860px;
   margin-inline:auto;
}

.question-item {
   display:flex;
   flex-direction:column;
   gap:1.25rem;
   padding-block-start:2rem;
   border-top:1px solid var(--border-hairline);
}

.question-item--first {
   border-top:none;
   padding-block-start:0;
}

.question-item__title {
   font-family:var(--joha-383);
   font-size:clamp(1.6rem, 3.2vw, 2.4rem);
   line-height:1.15;
   color:var(--ink);
   letter-spacing:-0.02em;
   text-wrap:balance;
}

.question-item__answer {
   font-size:var(--joha-b83);
   line-height:1.72;
   color:var(--ink);
   max-width:68ch;
}

.question-item__answer p { margin-block-end:1.2rem; }

.question-item__answer p:last-child { margin-block-end:0; }

.question-item__answer ul {
   list-style:disc;
   padding-inline-start:1.5rem;
   margin-block:1rem;
}

.question-item__answer li { margin-block-end:0.5rem; }

.contact-layout {
   display:grid;
   grid-template-columns:1fr;
   gap:clamp(2.5rem, 5vw, 5rem);
   margin-block:2.5rem;
}

@media (min-width: 900px) {
   .contact-layout {
      grid-template-columns:1fr 1.1fr;
      align-items:start;
   }
}

.contact-info-panel {
   background-color:var(--surface);
   border:1px solid var(--border-hairline);
   padding:clamp(1.75rem, 4vw, 3rem);
   display:flex;
   flex-direction:column;
   gap:2rem;
}

.contact-info-block {
   display:flex;
   flex-direction:column;
   gap:0.5rem;
}

.contact-info-label {
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   color:var(--accent);
   text-transform:uppercase;
   letter-spacing:0.08em;
}

.contact-info-val {
   font-size:var(--joha-b83);
   line-height:1.6;
   color:var(--ink);
}

.contact-info-val a {
   color:var(--ink);
   text-decoration:underline;
}

.contact-info-val a:hover { color:var(--accent); }

.contact-hours-table {
   width:100%;
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   border-collapse:collapse;
}

.contact-hours-table td {
   padding-block:0.4rem;
   border-bottom:1px solid var(--border-hairline);
   color:var(--ink-dim);
}

.contact-hours-table tr td:last-child {
   text-align:right;
   color:var(--ink);
}

.accordion-group {
   display:flex;
   flex-direction:column;
   border-top:1px solid var(--border-hairline);
   margin-block:2rem;
}

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

.accordion-trigger {
   width:100%;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:1rem;
   background:transparent;
   border:none;
   padding:1.5rem 0;
   text-align:left;
   cursor:pointer;
   color:var(--ink);
   font-family:var(--joha-383);
   font-size:var(--joha-438);
   line-height:1.25;
   transition:color var(--duration-fast) var(--ease-out);
}

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

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

.accordion-icon {
   width:1.25rem;
   height:1.25rem;
   flex-shrink:0;
   color:var(--accent);
   transition:transform var(--duration-fast) var(--ease-out);
}

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

.accordion-panel {
   padding-bottom:1.5rem;
   font-size:var(--joha-b83);
   line-height:1.7;
   color:var(--ink);
}

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

.error-hero {
   min-height:70vh;
   display:flex;
   align-items:center;
   justify-content:center;
   text-align:center;
   padding:var(--container-pad);
}

.error-hero__code {
   font-family:var(--joha-fb8);
   font-size:clamp(5rem, 15vw, 12rem);
   font-weight:800;
   color:var(--accent);
   line-height:1;
   margin-block-end:1rem;
}

.error-hero__title {
   font-family:var(--joha-383);
   font-size:var(--joha-9ac);
   color:var(--ink);
   margin-block-end:1rem;
}

.error-hero__text {
   font-size:var(--joha-b83);
   color:var(--ink-dim);
   max-width:48ch;
   margin-inline:auto;
   margin-block-end:2rem;
}

.gallery-grid {
   display:grid;
   grid-template-columns:1fr;
   gap:1.5rem;
   margin-block:2.5rem;
}

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

@media (min-width: 1024px) {
   .gallery-grid { grid-template-columns:repeat(3, 1fr); }
}

.gallery-card {
   background-color:var(--surface);
   border:1px solid var(--border-hairline);
   overflow:hidden;
   display:flex;
   flex-direction:column;
}

.gallery-card__media {
   width:100%;
   aspect-ratio:4 / 3;
   overflow:hidden;
   background-color:var(--surface-deep);
}

.gallery-card__media img {
   width:100%;
   height:100%;
   object-fit:cover;
   transition:transform var(--duration-base) var(--ease-out);
}

.gallery-card:hover .gallery-card__media img { transform:scale(1.04); }

.gallery-card__caption {
   padding:1rem 1.25rem;
   font-family:var(--joha-fb8);
   font-size:var(--step--1);
   color:var(--ink-dim);
   line-height:1.45;
}

.notice-banner {
   background-color:var(--surface-deep);
   border-left:3px solid var(--accent);
   border-block:1px solid var(--border-hairline);
   border-right:1px solid var(--border-hairline);
   padding:1.25rem 1.5rem;
   margin-block:2rem;
   display:flex;
   gap:1rem;
   align-items:flex-start;
}

.notice-banner__icon {
   color:var(--accent);
   flex-shrink:0;
   margin-top:0.15rem;
}

.notice-banner__body {
   font-size:var(--joha-b83);
   line-height:1.6;
   color:var(--ink);
}

.notice-banner__body strong { color:var(--accent); }

.notice-banner__body p { margin-block-end:0.5rem; }

.notice-banner__body p:last-child { margin-block-end:0; }