/* CLADSMAN aluminium batten service page. All rules are page-scoped. */
.batten-page {
  --batten-blue: #9fb7c6;
  --batten-copper: #c89568;
  --batten-rule: rgba(19, 20, 21, 0.2);
}

.batten-page .batten-hero {
  height: 218svh;
  min-height: 1360px;
}

.batten-page .axon-hero__copy {
  background: linear-gradient(90deg, #101213 0%, #101213 83%, rgba(16, 18, 19, 0.9) 100%);
}

.batten-page .axon-hero__title {
  max-width: 11.6ch;
  font-size: clamp(42px, 4vw, 72px);
}

.batten-page .axon-hero__lead { max-width: 39ch; }

.batten-hero__media {
  --batten-light-x: 42%;
  --batten-light-y: 28%;
  background: #101315;
}

.batten-page .batten-hero__media .axon-hero__media-inner {
  z-index: 1;
  opacity: 0.29;
  filter: brightness(0.57) saturate(0.72) contrast(1.08);
  transition: opacity 520ms ease, filter 520ms ease;
}

.batten-page .batten-hero__media .axon-hero__media-inner img,
.batten-hero__strip img {
  object-position: 63% 48%;
}

.batten-hero__strips {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  perspective: 1500px;
  opacity: 1;
  transition: opacity 520ms ease;
}

.batten-hero__strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--batten-left);
  width: var(--batten-width);
  overflow: hidden;
  opacity: 0.84;
  transform-origin: center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: paint;
  box-shadow: 0 28px 36px rgba(0, 0, 0, 0.34);
}

.batten-hero__strip picture,
.batten-hero__strip img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--batten-image-left);
  display: block;
  width: var(--batten-image-width);
  height: 100%;
}

.batten-hero__strip img {
  max-width: none;
  object-fit: cover;
}

.batten-hero__strip::before,
.batten-hero__strip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.batten-hero__strip::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.24), transparent 22%, transparent 74%, rgba(3,5,7,.4)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(5,8,10,.16));
  opacity: calc(.16 + var(--batten-edge, 1) * .58);
}

.batten-hero__strip::after {
  background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.13) 45%, transparent 69%);
  opacity: calc(var(--batten-edge, 1) * .36);
}

.batten-page .batten-hero.is-assembled .axon-hero__media-inner {
  opacity: 1 !important;
  filter: none !important;
}

.batten-hero.is-assembled .batten-hero__strips { opacity: 0; }
.batten-page .batten-hero.is-assembled .axon-hero__shade { opacity: .12; }

.batten-hero__measure {
  position: absolute;
  z-index: 5;
  top: 9%;
  right: clamp(20px, 3vw, 46px);
  bottom: 9%;
  width: 34px;
  border-right: 1px solid rgba(255,255,255,.28);
  pointer-events: none;
  transition: opacity 420ms ease;
}

.batten-hero__measure::before,
.batten-hero__measure::after,
.batten-hero__measure i {
  content: "";
  position: absolute;
  right: -1px;
  width: 16px;
  height: 1px;
  background: rgba(255,255,255,.35);
}

.batten-hero__measure::before { top: 0; }
.batten-hero__measure::after { bottom: 0; }
.batten-hero__measure i:nth-child(1) { top: 25%; width: 9px; }
.batten-hero__measure i:nth-child(2) { top: 50%; }
.batten-hero__measure i:nth-child(3) { top: 75%; width: 9px; }
.batten-hero.is-assembled .batten-hero__measure { opacity: .24; }

.batten-note {
  margin-top: 28px;
  padding: 18px 0 18px 22px;
  border-left: 2px solid var(--batten-copper);
  font-size: 14px;
}

.batten-material-strip article { min-height: 330px; }

.batten-profile {
  position: relative;
  display: block;
  width: 76px;
  height: 72px;
  color: var(--ink);
}

.batten-profile i { position: absolute; display: block; background: currentColor; }

.batten-profile--deep i {
  top: 5px;
  width: 12px;
  height: 62px;
  box-shadow: inset -3px 0 rgba(200,149,104,.82);
}
.batten-profile--deep i:nth-child(1) { left: 4px; }
.batten-profile--deep i:nth-child(2) { left: 31px; height: 52px; top: 10px; }
.batten-profile--deep i:nth-child(3) { left: 58px; height: 42px; top: 15px; }

.batten-profile--spacing i {
  top: 7px;
  width: 4px;
  height: 58px;
  background: transparent;
  border: 1px solid currentColor;
}
.batten-profile--spacing i:nth-child(1) { left: 3px; }
.batten-profile--spacing i:nth-child(2) { left: 20px; }
.batten-profile--spacing i:nth-child(3) { left: 37px; }
.batten-profile--spacing i:nth-child(4) { left: 54px; }
.batten-profile--spacing i:nth-child(5) { left: 71px; }

.batten-profile--circle {
  background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 10px);
}
.batten-profile--circle i {
  inset: 12px 14px;
  border: 1px solid var(--batten-copper);
  border-radius: 50%;
  background: var(--paper);
}

.batten-profile--finish i:nth-child(1) {
  inset: 7px 30px 7px 12px;
  background: linear-gradient(90deg, #303336, #111314);
  transform: skewY(-11deg);
}
.batten-profile--finish i:nth-child(2) {
  right: 9px;
  top: 18px;
  width: 24px;
  height: 36px;
  border: 1px solid currentColor;
  background: transparent;
}

.batten-proof .axon-proof__primary img { object-position: 58% center; }
.batten-proof .axon-image-frame--detail img { object-position: 50% 48%; }

.batten-detail-glyph {
  position: relative;
  display: block;
  width: 86px;
  height: 82px;
  margin-top: 40px;
  color: rgba(255,255,255,.62);
  transition: transform 420ms var(--ease), color 420ms ease;
}

.batten-detail-grid article:hover .batten-detail-glyph {
  color: rgba(255,255,255,.82);
  transform: translateY(-3px);
}

.batten-detail-glyph i { position: absolute; display: block; }

.batten-detail-glyph--setout i {
  bottom: 7px;
  width: 5px;
  height: 61px;
  border: 1px solid currentColor;
}
.batten-detail-glyph--setout i:nth-child(1) { left: 4px; }
.batten-detail-glyph--setout i:nth-child(2) { left: 23px; }
.batten-detail-glyph--setout i:nth-child(3) { left: 42px; }
.batten-detail-glyph--setout i:nth-child(4) { left: 61px; }
.batten-detail-glyph--setout i:nth-child(5) { left: 80px; }

.batten-detail-glyph--support::before,
.batten-detail-glyph--support::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1px;
  background: #d5a579;
}
.batten-detail-glyph--support::before { top: 21px; }
.batten-detail-glyph--support::after { bottom: 18px; }
.batten-detail-glyph--support i {
  top: 7px;
  bottom: 7px;
  width: 5px;
  border: 1px solid currentColor;
}
.batten-detail-glyph--support i:nth-child(1) { left: 13px; }
.batten-detail-glyph--support i:nth-child(2) { left: 40px; }
.batten-detail-glyph--support i:nth-child(3) { right: 13px; }

.batten-detail-glyph--opening {
  background: repeating-linear-gradient(90deg, transparent 0 8px, currentColor 8px 12px);
}
.batten-detail-glyph--opening i {
  inset: 14px 16px;
  border: 1px solid #d5a579;
  border-radius: 50%;
  background: #111314;
}

.batten-detail-glyph--junction i:nth-child(1) {
  left: 8px;
  top: 7px;
  width: 24px;
  height: 68px;
  border: 1px solid currentColor;
}
.batten-detail-glyph--junction i:nth-child(2) {
  left: 31px;
  top: 31px;
  width: 47px;
  height: 20px;
  border: 1px solid #d5a579;
}

.batten-applications .axon-applications__image { min-height: 720px; }
.batten-applications .axon-applications__image img { object-position: 54% center; }

.batten-perspectives .axon-perspectives__figure--lead img { object-position: 52% center; }
.batten-perspectives .axon-perspectives__media--elevation img { object-position: center; }
.batten-perspectives .axon-perspectives__media--junction img { object-position: 64% 48%; }

.batten-process {
  padding: clamp(92px, 10vw, 158px) 0;
  background: #151718;
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,.15);
}

.batten-process header {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(42px, 8vw, 126px);
  align-items: end;
  margin-bottom: clamp(50px, 7vw, 96px);
}

.batten-process header .axon-kicker { color: #d5a579; }
.batten-process h2 { font-size: clamp(48px, 7vw, 104px); line-height: .9; max-width: 9ch; }
.batten-process ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }
.batten-process li {
  display: grid;
  grid-template-columns: minmax(84px, .7fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
  min-height: 154px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.batten-process li > .mono { color: #d5a579; }
.batten-process li div { display: contents; }
.batten-process h3 { font-size: clamp(21px, 2vw, 30px); line-height: 1.12; }
.batten-process li p { color: rgba(255,255,255,.62); max-width: 54ch; }

@media (max-width: 1100px) {
  .batten-page .axon-hero__title { font-size: clamp(39px, 4.5vw, 55px); }
  .batten-material-strip article { min-height: 290px; }
}

@media (max-width: 860px) {
  .batten-page .batten-hero { height: 205svh; min-height: 1450px; }
  .batten-page .axon-hero__title { font-size: clamp(35px, 7.2vw, 54px); max-width: 12ch; }
  .batten-page .batten-hero__media .axon-hero__media-inner img,
  .batten-hero__strip img { object-position: 66% 48%; }
  .batten-hero__strip { box-shadow: 0 18px 24px rgba(0,0,0,.28); }
  .batten-hero__strip::after { display: none; }
  .batten-hero__measure { top: 8%; bottom: 8%; right: 18px; }
  .batten-proof .axon-proof__primary { min-height: 70svh; }
  .batten-process header { grid-template-columns: 1fr; gap: 26px; }
  .batten-process li { grid-template-columns: 64px minmax(0, 1fr); gap: 14px 22px; }
  .batten-process li div { display: block; }
  .batten-process li p { margin-top: 10px; }
}

@media (max-width: 640px) {
  .batten-page .batten-hero { height: 198svh; min-height: 1320px; }
  .batten-page .axon-hero__stage { grid-template-rows: minmax(0, .98fr) minmax(0, 1.02fr); }
  .batten-page .axon-breadcrumb { margin-bottom: 30px; font-size: 9px; }
  .batten-page .axon-hero__title { font-size: clamp(32px, 8.7vw, 40px); }
  .batten-page .axon-scroll-cue { margin-top: 24px; }
  .batten-material-strip article { min-height: 0; }
  .batten-material-strip .batten-profile { grid-row: 1 / 4; }
  .batten-proof .axon-proof__primary,
  .batten-proof .axon-proof__side .axon-image-frame { min-height: 60svh; }
  .batten-proof .axon-image-frame figcaption { grid-template-columns: 1fr; gap: 8px; padding: 22px 20px; }
  .batten-applications .axon-applications__image { min-height: 58svh; }
  .batten-process h2 { font-size: 47px; }
  .batten-process li { grid-template-columns: 46px minmax(0, 1fr); min-height: 0; padding: 28px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .batten-page .batten-hero { height: auto; min-height: 0; }
  .batten-page .batten-hero__strips,
  .batten-page .batten-hero__measure { display: none; }
  .batten-page .batten-hero__media .axon-hero__media-inner { opacity: 1 !important; filter: none !important; }
}

html:not(.js) .batten-page .batten-hero { height: auto; min-height: 0; }
html:not(.js) .batten-page .batten-hero__strips,
html:not(.js) .batten-page .batten-hero__measure { display: none; }
html:not(.js) .batten-page .batten-hero__media .axon-hero__media-inner { opacity: 1; filter: none; }