:root {
  --ink: #17171b;
  --deep: #151518;
  --surface-dark: #252529;
  --paper: #f7f5f1;
  --rose-paper: #efebe5;
  --slate: #545359;
  --line: #d7d2cc;
  --accent: #d91b38;
  --accent-hot: #b7132c;
  --accent-text: #a9162d;
}
.site-header .nav-wrap { gap: clamp(12px, 2.4vw, 34px); }
.site-header .desktop-nav { margin-inline: auto; }
.desktop-nav a { position: relative; line-height: 1.3; white-space: nowrap; }
.desktop-nav a[aria-current]::after {
  position: absolute;
  inset: auto 0 -10px;
  height: 3px;
  background: var(--accent);
  content: '';
}
.mobile-nav a[aria-current] { color: #ff879a; }
.site-header .button, .hero-actions .button, .information-actions .button,
.information-contact .button, .catalog-enquiry-actions .button { border-radius: 4px; }
.nav-cta { margin-left: 0; }
.hero-layout { grid-template-columns: 40% 60%; min-height: clamp(400px, 35vw, 540px); }
.hero-content { padding-right: clamp(20px, 3.5vw, 53px); }
.hero-content::before, .hero-visual::after { display: none; }
.hero h1 { max-width: 14ch; font-size: clamp(36px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -.055em; font-weight: 800; text-wrap: balance; }
.hero-photo { object-position: 58% center; }
.hero-link { text-decoration: underline; text-underline-offset: 5px; }
.vehicle-section { background: var(--paper); padding-block: clamp(16px, 2.5vw, 32px); }
.vehicle-layout { grid-template-columns: minmax(0, .65fr) minmax(0, 1.65fr); }
.vehicle-layout h2 { font-size: clamp(22px, 2.65vw, 36px); font-weight: 800; }
.finish-collections { padding-block: clamp(20px, 3vw, 44px); }
.finish-collections h2 { margin: 0 0 13px; font-size: clamp(28px, 3.5vw, 46px); font-weight: 800; }
.finish-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.finish-collection-grid a { display: block; overflow: hidden; background: var(--surface-dark); color: var(--white); border-radius: 4px; }
.finish-collection-grid a > :is(img, .mat-photo) { display: block; width: 100%; aspect-ratio: 2 / 1; }
.finish-collection-grid a > img { height: auto; object-fit: cover; object-position: 95% center; }
.finish-collection-grid a > span:last-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 47px; padding: 8px 13px; font-size: clamp(13px, 1.4vw, 17px); font-weight: 800; }
.finish-collection-grid svg { width: 17px; height: 17px; }
.finish-collection-grid a:hover > span:last-child { background: #35353b; }
.installation-section { padding-block: clamp(18px, 3.2vw, 40px); background: var(--paper); color: var(--ink); }
.installation-heading { border-color: var(--line); }
.installation-heading .lead, .install-figure figcaption, .install-figure .playback-status:not(:empty) { color: var(--slate); }
.installation-copy { border: 0; background: none; padding: 0; }
.installation-copy h3 { font-size: clamp(17px, 2vw, 24px); }
.installation-copy .text-action { color: var(--accent-text); }
.install-checks { margin-top: 7px; }
.install-checks li { border-color: var(--line); color: var(--slate); padding-block: 6px; }
.install-checks li::before { color: var(--accent-text); }
.installation-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.installation-views a { display: block; background: var(--surface-dark); color: var(--white); border-radius: 3px; overflow: hidden; }
.installation-views a .mat-photo { aspect-ratio: 2.1; }
.installation-views a span:last-child { display: block; padding: 3px 7px; font-size: 12px; font-weight: 700; }
.installation-reference-link { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 23px; padding-block: 10px; margin-bottom: 20px; border-block: 1px solid var(--line); }
.installation-reference-link strong { font-size: clamp(16px, 2vw, 23px); }
.cabinarc-original-home .catalog-section { padding-block: clamp(25px, 4.5vw, 62px); }

.mat-photo {
  --photo-scale: 100%;
  --photo-left: 0%;
  --photo-top: 0%;
  --photo-clip: inset(0 0 11.125%);
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 800 / 711;
  background: var(--surface-dark);
}
.mat-photo img { position: absolute; display: block; top: var(--photo-top); left: var(--photo-left); width: var(--photo-scale); max-width: none; height: auto; clip-path: var(--photo-clip); }
.mat-photo--front { aspect-ratio: 800 / 395; }
.mat-photo--rear { aspect-ratio: 800 / 310; --photo-top: -128.1%; }
/* Crop the rear passenger mat when a finish has no separate texture sample. */
.mat-photo--texture { aspect-ratio: 1; --photo-scale: 400%; --photo-left: -248%; --photo-top: -232%; }
.mat-photo--swatch { aspect-ratio: 135 / 52; --photo-scale: 592.6%; --photo-left: -456.3%; --photo-top: -1401.9%; --photo-clip: inset(91.125% 6.125% 2.375% 77%); }
.finish-collection-grid .mat-photo--rear { --photo-scale: 130%; --photo-left: -15%; --photo-top: -129%; }
.installation-views .mat-photo--rear { --photo-scale: 123%; --photo-left: -11.5%; --photo-top: -128.2%; }
.product-gallery-main { display: grid; place-items: center; aspect-ratio: 800 / 711; overflow: hidden; background: #232226; border-radius: 5px; }
.product-gallery-main:has(.mat-photo--texture) { aspect-ratio: auto; padding-block: 12px; background: transparent; }
.product-gallery-main .mat-photo--texture { width: min(100%, clamp(144px, 38vw, 192px)); border-radius: 4px; }
.mat-photo--texture.is-illustration img { position: static; width: 100%; height: 100%; object-fit: cover; clip-path: none; }
.product-gallery-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.product-gallery-choices button { padding: 3px 3px 5px; border: 1px solid var(--line); border-radius: 4px; background: transparent; text-align: center; font-size: 12px; font-weight: 800; }
.product-gallery-choices button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.product-gallery-choices button .mat-photo { aspect-ratio: 2.2; border-radius: 2px; }
.product-gallery-choices button .mat-photo--rear, .about-steps .mat-photo--rear { --photo-scale: 118%; --photo-left: -9%; --photo-top: -128.8%; }
.product-gallery-choices button .mat-photo--texture, .product-detail-previews .mat-photo--texture { aspect-ratio: 2.2; --photo-top: -570.4%; }
.catalog-detail-intro { gap: clamp(16px, 3vw, 40px); }
.catalog-detail-summary h1 { font-size: clamp(32px, 4vw, 56px); font-weight: 800; }
.catalog-detail-summary > .catalog-collection { color: var(--slate); font-size: clamp(16px, 2vw, 23px); font-weight: 600; text-transform: none; letter-spacing: 0; }
.catalog-finish-label { border-top: 1px solid var(--line); margin-top: 15px; padding-top: 12px; font-size: 18px; letter-spacing: -.01em; }
.catalog-colors { gap: 7px; margin: 8px 0 15px; }
.catalog-colors a { width: clamp(65px, 7vw, 96px); aspect-ratio: auto; padding: 3px; }
.catalog-colors .mat-photo { border-radius: 2px; }
.catalog-colors .mat-photo img { width: var(--photo-scale); height: auto; clip-path: var(--photo-clip); border-radius: 0; }
.catalog-color-label { display: block; padding-top: 3px; font-size: 10px; font-weight: 800; line-height: 1.25; }
.catalog-color-label small { display: block; font-size: 9px; font-weight: 600; color: var(--slate); }
.catalog-fit-form { border-color: transparent; }
.catalog-fit-form h2 { font-size: clamp(21px, 2.4vw, 29px); }
.catalog-enquiry-actions > button { flex: 1; }
.fit-quote-note { margin-top: 8px; color: var(--slate); font-size: 13px; }
.catalog-tabs { margin-top: clamp(20px, 4vw, 44px); }
.product-coverage > h2 { margin-bottom: 13px; }
.product-coverage-grid, .product-detail-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.8vw, 22px); }
.product-coverage-grid figure { position: relative; overflow: hidden; border-radius: 4px; }
.product-coverage-grid .mat-photo { aspect-ratio: 2.55; }
.product-coverage-grid .mat-photo--rear { --photo-top: -126.5%; }
.product-coverage-grid figcaption { position: absolute; inset: auto auto 0 0; padding: 6px 10px; background: #17171bea; color: var(--white); font-size: 14px; font-weight: 800; }
.product-coverage-note { margin-block: 8px; color: var(--slate); font-size: 14px; }
.product-references { margin: 10px 0 3px; }
.product-references summary { color: var(--accent-text); cursor: pointer; font-weight: 800; font-size: 14px; }
.product-references .catalog-overview { margin-top: 10px; padding: 12px; }
.product-detail-previews a { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px; background: var(--rose-paper); border: 1px solid var(--line); border-radius: 4px; }
.product-detail-previews a:hover { border-color: var(--accent-text); }
.product-detail-previews strong, .product-detail-previews a > span:last-child > span { display: block; }
.product-detail-previews strong { font-size: clamp(15px, 2vw, 23px); line-height: 1.2; }
.product-detail-previews a > span:last-child > span { margin-top: 4px; color: var(--slate); font-size: 13px; }
.install-preview-image { position: relative; overflow: hidden; display: block; border-radius: 3px; }
.install-preview-image img { width: 100%; height: auto; }
.install-preview-image .play-disc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; border: 1px solid white; background: #17171bc9; color: white; }
.install-preview-image svg { width: 18px; height: 18px; fill: currentColor; }

.information-page h1 { font-size: clamp(38px, 5.6vw, 78px); font-weight: 800; letter-spacing: -.058em; line-height: 1.02; text-wrap: balance; }
.information-page h2 { font-size: clamp(27px, 3.45vw, 46px); font-weight: 800; }
.policy-hero { background: linear-gradient(90deg, #151518 0%, #151518f5 31%, #15151838 77%), url('quilt-detail.webp') right center / min(100%, 1050px) auto no-repeat, var(--deep); color: white; padding-block: clamp(52px, 8vw, 117px); }
.policy-hero p, .about-hero p { margin-top: 10px; max-width: 35ch; font-size: clamp(17px, 2vw, 24px); line-height: 1.45; }
.policy-layout { display: grid; grid-template-columns: minmax(135px, .28fr) minmax(0, 1fr); gap: clamp(17px, 4vw, 56px); align-items: start; padding-block: clamp(30px, 5vw, 68px); }
.policy-index { position: sticky; top: calc(var(--header) + 22px); border-right: 1px solid var(--line); padding-right: 17px; }
.policy-index h2 { margin-bottom: 8px; font-size: 20px; }
.policy-index a { display: block; padding: 8px 0 8px 10px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; font-size: 14px; }
.policy-index a:hover, .policy-index a:focus-visible { border-left-color: var(--accent); color: var(--accent-text); }
.policy-copy { max-width: 850px; }
.policy-copy section { padding: 14px 0 21px; border-top: 1px solid var(--line); }
.policy-copy section:first-child { border: 0; padding-top: 0; }
.policy-copy section:last-child { padding-bottom: 0; }
.policy-copy p { margin: 6px 0 0; color: var(--slate); max-width: 72ch; }
.policy-copy p:first-of-type { color: var(--ink); font-weight: 700; }
.information-contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 13px 24px; margin-block: 0 clamp(25px, 5vw, 60px); padding: clamp(17px, 3vw, 39px); background: var(--deep); color: white; border-radius: 5px; }
.information-contact h2 { font-size: clamp(22px, 3vw, 41px); }
.information-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.about-hero { display: grid; grid-template-columns: 41% 59%; background: var(--rose-paper); }
.about-hero-copy { align-self: center; padding: clamp(23px, 4.7vw, 68px) clamp(13px, 3vw, 35px) clamp(23px, 4.7vw, 68px) max(var(--gutter), calc((100vw - 1280px) / 2)); }
.about-hero > img { width: 100%; height: 100%; min-height: clamp(260px, 34vw, 490px); object-fit: cover; object-position: 56% center; }
.about-hero p { color: var(--slate); }
.about-considerations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(14px, 4vw, 54px); margin-block: clamp(23px, 5vw, 63px); }
.about-considerations > img { width: 100%; height: auto; aspect-ratio: 1.75; object-fit: cover; object-position: 83% center; border-radius: 4px; }
.about-considerations dl { margin: 11px 0 0; }
.about-considerations dl div { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); align-items: baseline; gap: 8px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.about-considerations dt { font-weight: 800; }
.about-considerations dd { margin: 0; color: var(--slate); font-size: 14px; }
.about-steps { margin-bottom: clamp(24px, 5vw, 63px); }
.about-steps ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 0; margin: 13px 0 0; }
.about-steps .mat-photo { aspect-ratio: 2.2; border-radius: 4px; }
.about-steps li > div { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.about-steps li > div span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 3px; background: var(--accent); color: white; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.about-steps h3 { font-size: clamp(15px, 2vw, 22px); }
.about-steps li p { margin: 5px 0 0; color: var(--slate); font-size: 14px; }

@media (max-width: 850px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-visual { grid-row: 1; aspect-ratio: 1.75; }
  .hero-content { padding: 20px var(--gutter) 23px; }
  .hero h1 { max-width: none; }
  .hero-actions { display: flex; }
  .vehicle-layout { grid-template-columns: 1fr; gap: 8px; }
  .catalog-detail-intro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .finish-collection-grid { gap: 6px; }
  .finish-collection-grid a > span:last-child { align-items: start; min-height: 49px; padding: 6px; line-height: 1.25; font-size: 12px; }
  .finish-collection-grid a > span:last-child svg { display: none; }
  .product-detail-previews { grid-template-columns: 1fr; }
  .policy-layout, .about-considerations, .about-hero { grid-template-columns: minmax(0, 1fr); }
  .policy-index { position: static; display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .policy-index h2 { flex-basis: 100%; margin: 0; }
  .policy-index a { padding: 2px 0; border: 0; text-decoration: underline; text-underline-offset: 3px; }
  .policy-hero { background-size: auto, auto 125%; }
  .about-hero > img { min-height: 0; aspect-ratio: 1.8; }
  .about-steps ol { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .about-steps .mat-photo { aspect-ratio: 2.45; }
  .about-steps .mat-photo--rear { --photo-scale: 106%; --photo-left: -3%; --photo-top: -128.8%; }
}
@media (max-width: 410px) {
  .catalog-tabs { gap: 0 10px; }
  .product-coverage-grid figcaption { font-size: 11px; padding: 4px 6px; }
}

.about-company { margin-bottom: clamp(20px, 4vw, 40px); padding: clamp(17px, 3vw, 32px); border: 1px solid var(--line); border-radius: 5px; background: var(--white); }
.about-company h2 { font-size: clamp(22px, 3vw, 36px); }
.business-details { margin-top: 10px; font-size: 14px; overflow-wrap: anywhere; }
.business-details > div + div { margin-top: 7px; }
.business-details dt { font-weight: 800; }
.business-details dd { margin: 0; }
.business-details a, .site-footer a[href^="mailto:"] { text-decoration: underline; text-underline-offset: 3px; }