/* Corvane Metalworks (concept) - Moseby Studio */

@font-face { font-family: "Stencil"; src: url(fonts/stencil.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Shoulders"; src: url(fonts/shoulders.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --mill: #24282C;
  --mill-2: #2E3338;
  --steel: #8B9096;
  --steel-t: #565C62;     /* secondary text on light */
  --floor: #E7E8E6;
  --floor-2: #DCDEDB;
  --chalk: #F5F5F0;
  --oxide: #9C3A22;
  --oxide-d: #84301B;
  --oxide-l: #E0896F;     /* oxide tint for text on dark */
  --line: #C3C6C4;

  --f-stencil: "Stencil", "Arial Narrow", sans-serif;
  --f-head: "Shoulders", "Arial Narrow", sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;

  --t-sm: 0.875rem;
  --t-0: clamp(1rem, 0.96rem + 0.2vw, 1.0938rem);
  --t-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --t-2: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  --t-3: clamp(2.3rem, 1.6rem + 2.9vw, 4.1rem);
  --t-hero: clamp(3rem, 1.4rem + 5.6vw, 6.6rem);

  --gut: clamp(16px, 4vw, 48px);
  --sec: clamp(72px, 9vw, 140px);
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--floor); color: var(--mill);
  font-family: var(--f-body); font-size: var(--t-0); line-height: 1.55;
  font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--oxide); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gut); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--chalk); color: var(--mill); padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 12px; }

.h2 { font-family: var(--f-head); font-weight: 800; font-size: var(--t-3); line-height: 0.98; letter-spacing: 0.002em; text-wrap: balance; }
.h3 { font-family: var(--f-head); font-weight: 750; font-size: var(--t-2); line-height: 1.05; }
.h4 { font-family: var(--f-body); font-weight: 700; font-size: var(--t-0); font-stretch: 88%; }
.lede { font-size: var(--t-1); line-height: 1.5; max-width: 52ch; }
.small { font-size: var(--t-sm); color: var(--steel-t); }
.hint { font-size: var(--t-sm); color: var(--steel-t); margin: 6px 0 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  font-family: var(--f-body); font-weight: 700; font-stretch: 92%; font-size: 1rem; white-space: nowrap;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn--oxide { background: var(--oxide); color: var(--chalk); }
.btn--oxide:hover { background: var(--oxide-d); }
.btn--ghost { border-color: var(--chalk); color: var(--chalk); background: rgba(36, 40, 44, .35); }
.btn--ghost:hover { background: var(--chalk); color: var(--mill); }

/* ribbon + header */
.ribbon { display: block; background: #1B1E21; color: var(--chalk); text-align: center; font-size: 0.8125rem; font-stretch: 90%; padding: 7px 16px; }
.ribbon a { text-decoration: underline; text-underline-offset: 2px; }

.top { position: sticky; top: 0; z-index: 50; background: var(--mill); color: var(--chalk); border-bottom: 1px solid #3A4045; }
.top__in { max-width: 1360px; margin-inline: auto; padding-inline: var(--gut); height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.mark__name { font-family: var(--f-stencil); font-weight: 800; font-size: 2.05rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; }
.mark__sub { font-size: 0.72rem; line-height: 1.2; font-stretch: 80%; color: #C9CCCC; border-left: 2px solid var(--oxide); padding-left: 10px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; gap: 24px; list-style: none; }
.nav__list a { text-decoration: none; font-weight: 550; font-stretch: 92%; padding: 10px 0; display: inline-block; }
.nav__list a:hover { text-decoration: underline; text-decoration-color: var(--oxide-l); text-decoration-thickness: 2px; }
.nav__tel { font-weight: 700; text-decoration: none; font-stretch: 90%; }
.nav__cta { min-height: 44px; }
.navbtn { display: none; }

@media (max-width: 1080px) {
  .nav__tel { display: none; }
}
@media (max-width: 900px) {
  .navbtn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
    background: none; border: 1px solid #5A6066; color: var(--chalk); cursor: pointer; font-weight: 600;
  }
  .navbtn__bars, .navbtn__bars::before, .navbtn__bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s; }
  .navbtn__bars::before, .navbtn__bars::after { content: ""; position: absolute; left: 0; }
  .navbtn__bars::before { top: -6px; } .navbtn__bars::after { top: 6px; }
  .navbtn[aria-expanded="true"] .navbtn__bars { background: transparent; }
  .navbtn[aria-expanded="true"] .navbtn__bars::before { transform: translateY(6px) rotate(45deg); }
  .navbtn[aria-expanded="true"] .navbtn__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--mill); flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px var(--gut) 24px; border-bottom: 1px solid #3A4045; display: none;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { display: block; padding: 14px 0; border-bottom: 1px solid #3A4045; font-size: 1.125rem; }
  .nav__tel { display: block; padding: 16px 0; font-size: 1.125rem; }
  .nav__cta { width: 100%; }
}
@media (max-width: 420px) { .mark__sub { display: none; } }

/* hero */
.hero { position: relative; min-height: clamp(560px, calc(100svh - 100px), 920px); display: flex; align-items: flex-end; color: var(--chalk); background: var(--mill); overflow: hidden; }
.hero__media, .hero__media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { z-index: 1; opacity: 0; transition: opacity .6s; }
.hero__video.is-on { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; z-index: 2; background:
  linear-gradient(to top, rgba(20, 23, 26, .86) 0%, rgba(20, 23, 26, .55) 30%, rgba(20, 23, 26, 0) 58%),
  linear-gradient(to right, rgba(20, 23, 26, .45) 0%, rgba(20, 23, 26, 0) 55%); }
@media (max-width: 700px) {
  .hero__media > * { object-position: 72% 50%; }
  .hero__scrim { background: linear-gradient(to top, rgba(20, 23, 26, .9) 0%, rgba(20, 23, 26, .7) 45%, rgba(20, 23, 26, .15) 75%, rgba(20, 23, 26, 0) 90%); }
}
.hero__copy { position: relative; z-index: 3; padding-bottom: clamp(56px, 7vw, 96px); }
.hero__h { font-family: var(--f-stencil); font-weight: 800; font-size: var(--t-hero); line-height: 0.9; letter-spacing: 0.004em; text-transform: uppercase; max-width: 13.5em; text-wrap: balance; }
.hero__sub { font-size: var(--t-1); max-width: 40ch; margin: 22px 0 28px; color: #ECEDEA; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__pause { position: absolute; z-index: 3; right: var(--gut); top: 20px; }

@media (prefers-reduced-motion: no-preference) {
  .hero__h, .hero__sub, .hero__cta { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__sub { animation-delay: .15s; } .hero__cta { animation-delay: .28s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); } }
}

.filmbtn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  background: rgba(24, 27, 30, .72); color: var(--chalk); border: 1px solid rgba(245, 245, 240, .45); cursor: pointer;
  font-size: 0.875rem; font-weight: 600; font-stretch: 90%;
}
.filmbtn:hover { background: rgba(24, 27, 30, .9); }
.filmbtn__icon { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.filmbtn[aria-pressed="true"] .filmbtn__icon { border: 0; width: 0; height: 0; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.filmbtn[hidden] { display: none; }

/* schedule strip */
.sched { background: var(--mill); color: var(--chalk); position: relative; }
.sched__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 300px; gap: 40px; align-items: center; padding-block: 36px; }
.sched__h { font-family: var(--f-head); font-weight: 750; font-size: var(--t-2); line-height: 1; }
.sched__note { font-size: var(--t-sm); color: #BFC3C5; margin: 8px 0 0; max-width: 36ch; }
.sched__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
.sched__list > div { padding: 4px 18px; border-left: 1px solid #4A5056; }
.sched__list dt { font-size: var(--t-sm); color: #BFC3C5; font-stretch: 85%; }
.sched__list dd { margin: 2px 0 0; font-stretch: 85%; line-height: 1.25; }
.sched__list b { display: block; font-family: var(--f-head); font-weight: 800; font-size: 2.1rem; line-height: 1; color: var(--chalk); }
.sched__detail { align-self: start; margin-top: -150px; position: relative; z-index: 4; }
.sched__detail img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 6px solid var(--mill); }
.sched__detail figcaption { font-size: 0.8125rem; color: #BFC3C5; margin-top: 8px; line-height: 1.4; }
@media (max-width: 1100px) {
  .sched__in { grid-template-columns: 1fr 220px; }
  .sched__list { grid-column: 1 / -1; grid-row: 2; }
  .sched__detail { grid-row: 1; grid-column: 2; margin-top: -110px; }
}
@media (max-width: 640px) {
  .sched__in { grid-template-columns: 1fr 120px; gap: 24px 16px; padding-block: 28px; }
  .sched__detail { margin-top: -70px; }
  .sched__detail figcaption { display: none; }
  .sched__list { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .sched__list > div { padding: 2px 12px; }
}

/* work */
.work { padding-block: var(--sec) calc(var(--sec) * .8); }
.work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 40px; }
.work__head .h2 { max-width: 12em; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  min-height: 44px; padding: 0 16px; background: transparent; border: 1px solid var(--steel); cursor: pointer;
  font-weight: 600; font-stretch: 90%; color: var(--mill);
}
.filter span { color: var(--steel-t); font-weight: 500; margin-left: 4px; }
.filter:hover { border-color: var(--mill); }
.filter[aria-pressed="true"] { background: var(--mill); color: var(--chalk); border-color: var(--mill); }
.filter[aria-pressed="true"] span { color: #BFC3C5; }

.mosaic { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; transition: opacity .18s; }
.mosaic.is-fading { opacity: 0; }
.job { grid-row: span 2; display: grid; grid-template-rows: subgrid; margin-bottom: 48px; }
.job[hidden] { display: none; }
.job__ph { position: relative; overflow: hidden; background: var(--floor-2); }
.job__ph img { width: 100%; height: 100%; object-fit: cover; }
.job__cap { padding-top: 16px; }
.job__cap h3 { font-family: var(--f-head); font-weight: 750; font-size: 1.6rem; line-height: 1.05; }
.job__cap h3 span { display: block; font-family: var(--f-body); font-size: var(--t-sm); font-weight: 500; color: var(--steel-t); margin-top: 4px; letter-spacing: 0; }
.spec { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.spec dt { font-size: 0.75rem; color: var(--steel-t); font-stretch: 85%; }
.spec dd { margin: 0; font-size: 0.9375rem; font-weight: 600; font-stretch: 85%; line-height: 1.3; }

@media (min-width: 900px) {
  /* all: rows of 7+5, 4+8, 6+3+3; the first card in each row sets the height */
  .count-7 [data-slot="a1"] { grid-column: span 7; }
  .count-7 [data-slot="a2"] { grid-column: span 5; }
  .count-7 [data-slot="b1"] { grid-column: span 4; }
  .count-7 [data-slot="b2"] { grid-column: span 8; }
  .count-7 [data-slot="c1"] { grid-column: span 6; }
  .count-7 [data-slot="c2"], .count-7 [data-slot="c3"] { grid-column: span 3; }
  .count-7 [data-slot="a1"] .job__ph { aspect-ratio: 3 / 2; }
  .count-7 [data-slot="b1"] .job__ph { aspect-ratio: 4 / 5; }
  .count-7 [data-slot="c1"] .job__ph { aspect-ratio: 3 / 2; }
  .count-7 .job__ph img, .mosaic:not(.count-7) .job__ph img { position: absolute; inset: 0; }
  .count-7 [data-slot="a1"] .job__ph img, .count-7 [data-slot="b1"] .job__ph img, .count-7 [data-slot="c1"] .job__ph img { position: static; }

  .count-3 .pos-1, .count-2 .pos-1 { grid-column: span 7; }
  .count-3 .pos-1 .job__ph, .count-2 .pos-1 .job__ph { aspect-ratio: 4 / 3; }
  .count-3 .pos-2, .count-2 .pos-2 { grid-column: span 5; }
  .count-3 .pos-3 { grid-column: span 12; }
  .count-3 .pos-3 .job__ph { aspect-ratio: 21 / 9; }
  .count-1 .pos-1 { grid-column: 1 / -1; grid-template-columns: 7fr 5fr; grid-template-rows: auto; column-gap: 40px; grid-row: auto; }
  .count-1 .pos-1 .job__ph { aspect-ratio: 4 / 3; }
  .count-1 .pos-1 .job__cap { align-self: end; padding-top: 0; }
  .count-1 .pos-1 .job__cap h3 { font-size: var(--t-2); }
}
@media (max-width: 899px) {
  .mosaic { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding: 0 var(--gut) 12px; scroll-padding-inline: var(--gut); scrollbar-width: thin; }
  .job { display: block; flex: 0 0 82%; scroll-snap-align: start; margin-bottom: 0; }
  .job__ph { aspect-ratio: 4 / 5; }
  .count-1 .job { flex-basis: 100%; }
  .work__head { margin-bottom: 24px; }
}

/* gate builder */
.builder { background: var(--mill); color: var(--chalk); padding-block: var(--sec); }
.builder__head { max-width: 760px; margin-bottom: 40px; }
.builder__head p { color: #D3D6D6; font-size: var(--t-1); margin-top: 16px; max-width: 58ch; }
.gb { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: start; }
.gb__sheet { position: sticky; top: calc(var(--header-h) + 16px); }
.gb__paper { background: var(--chalk); color: var(--mill); padding: 22px 24px 18px; position: relative;
  background-image: linear-gradient(rgba(139, 144, 150, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 144, 150, .14) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; }
.gb__label { font-size: 0.8125rem; font-stretch: 85%; color: var(--steel-t); margin: 0; }
.gb__svg { width: 100%; height: auto; margin-top: 4px; }
.gb__svg text { font-family: var(--f-body); font-stretch: 80%; }
.gb__out { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; border-top: 2px solid var(--mill); padding-top: 12px; }
.gb__price, .gb__lead { margin: 0; }
.gb__price span, .gb__lead span { display: block; font-size: 0.8125rem; color: var(--steel-t); font-stretch: 85%; }
.gb__price output { font-family: var(--f-stencil); font-weight: 800; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1; display: block; }
.gb__lead output { font-weight: 700; font-stretch: 85%; font-size: 1.125rem; }
.gb__title { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; border: 1px solid #4A5056; border-top: 0; }
.gb__title > div { padding: 8px 12px; border-left: 1px solid #4A5056; }
.gb__title > div:first-child { border-left: 0; }
.gb__title dt { font-size: 0.6875rem; color: #AEB2B5; font-stretch: 85%; }
.gb__title dd { margin: 0; font-size: 0.875rem; font-weight: 600; font-stretch: 85%; line-height: 1.25; }

.gb__controls { display: grid; gap: 26px; }
.gb__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.gb__set legend, .gb__range > label { font-weight: 700; font-stretch: 88%; margin-bottom: 10px; padding: 0; display: flex; justify-content: space-between; width: 100%; }
.legend-val, .gb__range output { font-weight: 500; color: #D3D6D6; }
.gb__range output { font-family: var(--f-head); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--chalk); }
.gb input[type="radio"], .qf input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiles label { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 1px solid #5A6066; cursor: pointer; font-size: 0.9375rem; font-stretch: 88%; line-height: 1.2; }
.pat { flex: none; width: 28px; height: 34px; border: 2px solid currentColor; }
.pat--slat { background: repeating-linear-gradient(to bottom, currentColor 0 4px, transparent 4px 7px); }
.pat--picket { background: repeating-linear-gradient(to right, transparent 0 4px, currentColor 4px 6px); }
.pat--perf { background: radial-gradient(circle, transparent 1.3px, currentColor 1.6px) 0 0 / 5px 5px; }
.pat--mesh { background: linear-gradient(currentColor 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(90deg, currentColor 1px, transparent 1px) 0 0 / 6px 6px; }
.seg { display: flex; }
.seg label { flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid #5A6066; margin-left: -1px; cursor: pointer; font-size: 0.9375rem; font-stretch: 88%; padding: 4px 6px; line-height: 1.15; }
.seg label:first-of-type { margin-left: 0; }
.tiles input:checked + label, .seg input:checked + label { background: var(--chalk); color: var(--mill); border-color: var(--chalk); position: relative; }
.tiles label:hover, .seg label:hover { border-color: #AEB2B5; }
.gb input:focus-visible + label, .qf input:focus-visible + label { outline: 3px solid var(--oxide-l); outline-offset: 2px; position: relative; z-index: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { width: 44px; height: 44px; background: var(--c); border: 2px solid #5A6066; cursor: pointer; position: relative; }
.chips input:checked + label { border-color: var(--chalk); box-shadow: inset 0 0 0 3px var(--mill); }
.chip--galv { background: radial-gradient(circle at 30% 30%, #D2D6D8 0 18%, transparent 19%), radial-gradient(circle at 70% 65%, #BFC4C6 0 22%, transparent 23%), #A9AFB2; }
.chip--raw { background: linear-gradient(135deg, #5C5E5F, #3E4245 55%, #5A5550); }
.gb__range input[type="range"] { width: 100%; height: 44px; accent-color: var(--oxide-l); cursor: pointer; margin: 0; }
.gb__range .hint, .gb__send .hint { color: #BFC3C5; }
.gb__switch { display: flex; align-items: flex-start; gap: 12px; }
.gb__switch input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--oxide-l); flex: none; cursor: pointer; }
.gb__switch label { font-weight: 700; font-stretch: 88%; cursor: pointer; }
.gb__switch label span { display: block; font-weight: 400; color: #BFC3C5; font-size: var(--t-sm); }
.gb__note { margin: 0; font-size: var(--t-sm); color: #F0C9BC; min-height: 0; }
.gb__note:empty { display: none; }
.gb__send .btn { width: 100%; }

.sample-msg { margin-top: 14px; padding: 14px 16px; border-left: 4px solid var(--oxide); background: var(--chalk); color: var(--mill); font-size: 0.9375rem; }
.sample-msg a { font-weight: 700; color: var(--oxide-d); }

@media (max-width: 980px) {
  .gb { grid-template-columns: 1fr; }
  .gb__sheet { top: calc(var(--header-h) - 1px); z-index: 5; margin-inline: calc(var(--gut) * -1); padding: 8px var(--gut) 10px; background: var(--mill); }
  .gb__paper { padding: 12px 14px 10px; }
  .gb__label { display: none; }
  .gb__svg .dimt { font-size: 30px; }
  .gb__svg .lbl { display: none; }
  .gb__title { display: none; }
  .gb__out { padding-top: 8px; flex-wrap: nowrap; }
  .gb__price output { font-size: 1.7rem; }
  .gb__lead { text-align: right; }
}

/* process */
.process { padding-block: var(--sec); }
.process__h { max-width: 11em; margin-bottom: 40px; }
.process__media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-bottom: 64px; }
.process__film { grid-column: 1 / span 9; grid-row: 1; position: relative; aspect-ratio: 16 / 9; background: var(--mill); overflow: hidden; }
.process__film video, .process__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.process__film video { z-index: 1; opacity: 0; transition: opacity .5s; }
.process__film video.is-on { opacity: 1; }
.process__film .filmbtn { position: absolute; z-index: 2; right: 14px; top: 14px; }
.process__layout { grid-column: 9 / span 4; grid-row: 1; align-self: end; margin-bottom: -56px; position: relative; z-index: 2; }
.process__layout img { border: 8px solid var(--floor); aspect-ratio: 1; object-fit: cover; width: 100%; }
.process__layout figcaption { font-size: var(--t-sm); color: var(--steel-t); margin-top: 6px; padding-inline: 8px; }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding-top: 48px; }
.steps li { counter-increment: step; position: relative; padding-top: 18px; border-top: 3px solid var(--mill); }
.steps li::before { content: counter(step); font-family: var(--f-stencil); font-weight: 800; font-size: 4.2rem; line-height: .8; color: var(--oxide); display: block; margin-bottom: 14px; }
.steps h3 { font-family: var(--f-head); font-weight: 750; font-size: 1.55rem; line-height: 1.05; margin-bottom: 8px; }
.steps p { font-size: 0.9688rem; margin-bottom: 10px; }
.steps__when { font-weight: 700; font-stretch: 85%; font-size: 0.875rem !important; color: var(--steel-t); }
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .process__media { grid-template-columns: repeat(6, 1fr); margin-bottom: 40px; }
  .process__film { grid-column: 1 / -1; }
  .process__layout { grid-column: 3 / -1; grid-row: 2; margin: -60px 0 0; }
  .steps { grid-template-columns: 1fr; gap: 24px; padding-top: 16px; }
  .steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; }
  .steps li::before { grid-row: span 3; font-size: 3.4rem; }
}

/* crew */
.crew { position: relative; background: var(--mill); color: var(--chalk); }
.crew__img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.crew__in { position: relative; }
.crew__card { position: relative; margin-top: -170px; width: min(560px, 100%); background: var(--mill); padding: 36px 40px 30px; z-index: 2; }
.crew__card .h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); margin-bottom: 18px; }
.crew__card p { color: #D9DBDA; }
.crew { padding-bottom: 72px; }
@media (max-width: 700px) {
  .crew__img { aspect-ratio: 4 / 5; }
  .crew__card { margin-top: -90px; padding: 28px 20px 8px; }
  .crew { padding-bottom: 40px; }
}

/* materials */
.materials { padding-top: var(--sec); }
.materials__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.materials__macro img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.materials__macro figcaption { font-size: var(--t-sm); color: var(--steel-t); margin-top: 8px; }
.materials__copy .h2 { margin-bottom: 20px; max-width: 10em; }
.metals { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; margin-top: 36px; padding-top: 28px; border-top: 3px solid var(--mill); }
.metals h3 { font-family: var(--f-head); font-weight: 750; font-size: 1.55rem; line-height: 1.05; margin-bottom: 8px; }
.metals p { font-size: 0.9688rem; margin: 0; }
.powder { position: relative; margin-top: clamp(64px, 8vw, 120px); }
.powder__img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.powder__in { position: relative; }
.powder__card { position: relative; z-index: 2; margin: -140px 0 0 auto; width: min(720px, 100%); background: var(--chalk); padding: 34px 38px 26px; }
.powder__card .h3 { margin-bottom: 12px; max-width: 18em; }
.swatches { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 10px; margin: 22px 0 22px; }
.swatches li { font-size: 0.75rem; font-stretch: 82%; line-height: 1.2; color: var(--mill); }
.swatches li::before { content: ""; display: block; aspect-ratio: 4 / 3; background: var(--c); margin-bottom: 6px; box-shadow: inset 0 0 0 1px rgba(36, 40, 44, .18), inset 0 -10px 18px -10px rgba(0, 0, 0, .35), inset 0 10px 14px -10px rgba(255, 255, 255, .25); }
@media (max-width: 860px) {
  .materials__top { grid-template-columns: 1fr; }
  .materials__macro { order: 2; width: 72%; margin-left: auto; }
  .metals { grid-template-columns: 1fr; gap: 22px; }
  .powder__img { aspect-ratio: 16 / 9; }
  .powder__card { margin-top: -40px; padding: 26px 20px 18px; width: auto; margin-inline: 0; }
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* structural */
.structural { padding-block: var(--sec); }
.structural__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.structural__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.structural__ph figcaption { font-size: var(--t-sm); color: var(--steel-t); margin-top: 8px; max-width: 48ch; }
.structural__copy .h2 { margin-bottom: 20px; }
.facts { list-style: none; margin: 24px 0; border-top: 3px solid var(--mill); }
.facts li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.9688rem; }
.facts li:last-child { border-bottom: 0; }
@media (max-width: 860px) { .structural__in { grid-template-columns: 1fr; } }

/* repairs */
.repairs { position: relative; color: var(--chalk); background: var(--mill); min-height: 700px; display: flex; align-items: center; }
.repairs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.repairs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(20, 23, 26, 0) 25%, rgba(20, 23, 26, .55) 60%); pointer-events: none; }
.repairs__in { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding-block: 72px; }
.repairs__card { width: min(540px, 100%); background: rgba(36, 40, 44, .94); padding: 36px 38px 30px; }
.repairs__card .h2 { margin-bottom: 16px; }
.repairs__card > p { color: #D9DBDA; }
.rates { margin: 26px 0 20px; display: grid; gap: 0; border-top: 3px solid var(--chalk); }
.rates > div { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 12px 0; border-bottom: 1px solid #4A5056; }
.rates dt { font-weight: 700; font-stretch: 88%; }
.rates dd { margin: 0; }
.rates dd:not(.rates__n) { font-family: var(--f-head); font-weight: 800; font-size: 1.9rem; line-height: 1; grid-row: span 2; align-self: center; }
.rates dd span { font-family: var(--f-body); font-size: 0.875rem; font-weight: 500; color: #BFC3C5; }
.rates__n { font-size: 0.875rem; color: #BFC3C5; font-stretch: 90%; }
.repairs__cta { margin: 0; font-weight: 600; }
.repairs__cta a { color: var(--chalk); white-space: nowrap; }
@media (max-width: 760px) {
  .repairs { display: block; min-height: 0; }
  .repairs__img { position: static; aspect-ratio: 4 / 3; height: auto; object-position: 35% 50%; }
  .repairs::after { display: none; }
  .repairs__in { padding-block: 0 40px; }
  .repairs__card { margin-top: -48px; padding: 28px 20px 22px; background: var(--mill); }
}

/* service area */
.area { padding-block: var(--sec); background: var(--floor-2); }
.area__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.map { width: 100%; height: auto; }
.map text { font-family: var(--f-body); font-stretch: 82%; }
.map__fwy rect { fill: var(--chalk); stroke: #6F757B; stroke-width: 1; }
.map__fwy text { font-size: 11px; font-weight: 700; text-anchor: middle; fill: var(--mill); }
.map__town circle { fill: var(--mill); }
.map__town text { font-size: 14px; fill: var(--mill); font-weight: 500; }
.map__shop rect { fill: var(--oxide); stroke: var(--chalk); stroke-width: 2; }
.map__shop text { font-size: 17px; font-weight: 800; fill: var(--oxide-d); }
.map__shop text.sub { font-size: 12px; font-weight: 600; fill: var(--mill); }
.map__ring { font-size: 15px; font-weight: 700; fill: var(--oxide-d); }
.map__ring--in { font-size: 11px; fill: var(--steel-t); }
.map__label { font-size: 12px; fill: var(--steel-t); font-style: italic; }
.map__label--sea { fill: #4F6670; }
.area__copy .h2 { margin-bottom: 18px; }
.towns { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; margin-top: 26px; padding-top: 20px; border-top: 3px solid var(--mill); font-size: 0.9375rem; font-stretch: 90%; }
@media (max-width: 600px) {
  .map__town text { font-size: 24px; font-weight: 600; }
  .map__town .minor, .map__label, .map__ring--in, .map__fwy { display: none; }
  .map__shop text { font-size: 28px; } .map__shop text.sub { display: none; }
  .map__ring { font-size: 22px; }
}
@media (max-width: 860px) {
  .area__in { grid-template-columns: 1fr; }
  .area__map { margin-inline: -8px; }
  .towns { grid-template-columns: 1fr 1fr; }
}

/* faq */
.faq { padding-block: var(--sec); }
.faq__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__side .h2 { margin-bottom: 32px; max-width: 8em; }
.faq__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.faq__ph figcaption { font-size: var(--t-sm); color: var(--steel-t); margin-top: 8px; }
.faq__list { border-top: 3px solid var(--mill); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-family: var(--f-head); font-weight: 750; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: linear-gradient(var(--mill), var(--mill)) center / 16px 3px no-repeat, linear-gradient(var(--mill), var(--mill)) center / 3px 16px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--oxide-d); }
.faq details p { max-width: 64ch; padding-bottom: 8px; margin-top: -4px; }
@media (max-width: 860px) {
  .faq__in { grid-template-columns: 1fr; }
  .faq__ph { display: none; }
  .faq__side .h2 { margin-bottom: 16px; }
}

/* visit */
.visit { position: relative; background: #121a2b; color: var(--chalk); }
.visit__img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; min-height: 520px; }
.visit__in { position: absolute; inset: auto 0 0 0; padding-bottom: 48px; }
.visit__card { width: min(520px, 100%); background: rgba(22, 26, 34, .9); padding: 30px 34px 24px; }
.visit__card .h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); margin-bottom: 14px; }
.visit__card > p { color: #D9DBDA; }
.visit__dl { margin: 20px 0 0; display: grid; gap: 14px; border-top: 1px solid #4A5056; padding-top: 16px; }
.visit__dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.visit__dl dt { color: #BFC3C5; font-size: var(--t-sm); font-stretch: 88%; padding-top: 2px; }
.visit__dl dd { margin: 0; font-size: 0.9688rem; }
@media (max-width: 700px) {
  .visit__img { aspect-ratio: 4 / 5; min-height: 0; }
  .visit__in { position: relative; padding-bottom: 40px; }
  .visit__card { margin-top: -110px; padding: 26px 20px 20px; background: rgba(22, 26, 34, .96); }
  .visit__dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* quote form */
.quote { padding-block: var(--sec); }
.quote__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.quote__side .h2 { margin-bottom: 18px; }
.quote__side .h4 { margin: 28px 0 10px; }
.tips { list-style: none; border-top: 3px solid var(--mill); }
.tips li { padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line); position: relative; font-size: 0.9688rem; }
.tips li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 3px; background: var(--oxide); }
.qf { display: grid; gap: 22px; background: var(--chalk); padding: clamp(22px, 3vw, 40px); border-top: 6px solid var(--mill); }
.qf fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.qf legend, .field > label { font-weight: 700; font-stretch: 88%; margin-bottom: 8px; padding: 0; display: block; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--steel); cursor: pointer; font-weight: 600; font-stretch: 90%; }
.pills input:checked + label { background: var(--mill); color: var(--chalk); border-color: var(--mill); }
.qf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field input:not([type="file"]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; background: #fff; border: 1px solid #8A8F94; border-radius: 0; color: var(--mill);
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--oxide); outline-offset: 0; border-color: var(--mill); }
.field input[type="file"] { width: 100%; padding: 10px; border: 1px dashed #8A8F94; background: #fff; min-height: 48px; }
.field input[type="file"]::file-selector-button { font: inherit; font-weight: 600; margin-right: 12px; padding: 8px 14px; background: var(--mill); color: var(--chalk); border: 0; cursor: pointer; }
.field .hint { margin-top: 6px; }
@media (max-width: 860px) {
  .quote__in { grid-template-columns: 1fr; }
  .qf__row { grid-template-columns: 1fr; }
  .qf { margin-inline: calc(var(--gut) * -1); }
}

/* footer */
.foot { background: var(--mill); color: #D9DBDA; padding: clamp(48px, 7vw, 96px) 0 32px; }
.foot .foot__word { font-family: var(--f-stencil); font-weight: 800; text-transform: uppercase; color: var(--chalk); font-size: clamp(4.5rem, 1rem + 15vw, 15rem); line-height: .8; margin: 0 0 48px; letter-spacing: 0.005em; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 32px; padding-top: 32px; border-top: 1px solid #4A5056; }
.foot__h { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 700; font-stretch: 88%; color: var(--chalk); margin-bottom: 10px; }
.foot p { font-size: 0.9375rem; }
.foot a { color: var(--chalk); }
.foot__map { width: 100%; height: auto; border: 1px solid #4A5056; }
.foot__map text { font-family: var(--f-body); font-stretch: 85%; }
.foot__small { margin-top: 40px; padding-top: 20px; border-top: 1px solid #4A5056; font-size: 0.875rem; color: #BFC3C5; }
.foot__small p { font-size: 0.875rem; max-width: 110ch; }
.foot__disc { color: #D9DBDA; }
@media (max-width: 960px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }