/* ==========================================================================
   Seven D Wholesale — page components
   Second layer, loaded after site.css. Values sourced from the capture's
   design-system.md and component-inventory.md.
   ========================================================================== */

/* --- titlebar / page banner -----------------------------------------------
   The original has NO overlay element and NO text-align rule anywhere in its
   cascade, keeps 100px padding at every width, and steps the h1 60 → 48 → 37px.
   Its fallback colour is #f7f7f7; wp-custom-css forces the h1 white over it. */
.titlebar {
  position: relative;
  z-index: 3;
  padding: 100px 0;
  background: #f7f7f7 center/cover no-repeat;
  color: #000;
}
.titlebar .container { position: relative; z-index: 2; }
.titlebar h1 { color: #fff; font-size: 60px; font-weight: 600; margin: 0 0 .25em; }
.titlebar-scroll-link {
  position: absolute;
  bottom: 1.25em;
  margin-inline-start: -15px;
  font-size: 30px;
  line-height: 1;
  color: rgb(255, 255, 255);
  opacity: .6;
  transition: opacity .3s var(--ease-signature);
}
.titlebar-scroll-link:hover { color: #fff; opacity: 1; }
/* No gap between the titlebar and the first section: checked on the reference
   render for /gaf/, /locations/, /contact/ and /tando-composites/ and it is 0
   on every one — the titlebar ends at 430 and the first section starts at 430.
   The 40px that used to sit here was an invention, and it pushed all 40 pages
   down by that much. Sections supply their own top padding upstream. */
@media (max-width: 767px) { .titlebar h1 { font-size: 48px; } }
@media (max-width: 479px) { .titlebar h1 { font-size: 37px; } }

/* --- dark band ------------------------------------------------------------
   #0C2327 — used by the Engineered Lumber intro and the Locations page. */
.section--dark { background-color: var(--c-dark-band); color: rgba(255, 255, 255, .8); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5 { color: #fff; }
.section--dark h6 { color: rgba(255, 255, 255, .6); }
.section--dark p  { color: rgba(255, 255, 255, .8); }
.section--dark a  { color: #fff; }

/* --- floating contact button (the right-hand rail's trigger) ---------------
   57px circle, #2E2E2E, white pencil rotated 90deg — same as the original. */
.floating-cta {
  position: fixed;
  right: 45px;
  bottom: 50px;
  z-index: 90;
  width: 57px;
  height: 57px;
  border-radius: var(--radius-pill);
  background-color: var(--c-circle-btn);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s var(--ease-signature), background-color .3s var(--ease-signature);
}
.floating-cta:hover { color: #fff; transform: translateY(-3px); background-color: #000; }
.floating-cta svg { transform: rotate(90deg); }
/* The original's sticky rail is display:none !important below 992px. */
@media (max-width: 991px) { .floating-cta { display: none; } }

/* --- generic prose --------------------------------------------------------- */
.prose { max-width: 78ch; }
.prose h2 { margin-top: 1.4em; }
.prose p { color: var(--c-text); }

.section-head { max-width: 62ch; margin-bottom: 48px; }
/* Every ld_fancy_heading upstream is `d-inline-block`, so its box hugs the
   longest line instead of filling the column. Invisible when the text is
   left-aligned, but it is what centres a heading on its own measure. */
.section-head h2, .section-head p { display: inline-block; }
.section-head h2 { margin-top: 0; }
/* §1.9 affiliates heading + §1.13 warehouse heading are centred and full-width
   upstream (ld_fancy_heading text-align:center, 31px). */
.section-head--center { max-width: none; text-align: center; }
.section-head--center h2 { font-size: 31px; line-height: 1.1em; letter-spacing: -.2px; }
@media (max-width: 1024px) { .section-head--center h2 { font-size: 42px; } }
@media (max-width: 767px)  { .section-head--center h2 { font-size: 10vw; } }

/* §1.5 brand-carousel heading — 37px on one centred line across the full
   1170 container. Measured on the reference render: 37/40.7/-0.2px, w 925.
   It was inheriting the global h2 (40/48) inside a 62ch box and wrapping. */
.section-head--wide h2 { font-size: 37px; line-height: 1.1em; letter-spacing: -.2px; margin: 0 0 1.5em; }
@media (max-width: 1024px) { .section-head--wide h2 { font-size: 42px; } }
@media (max-width: 767px)  { .section-head--wide h2 { font-size: 10vw; } }

/* §1.7 testimonial heading column carries 27% side margins upstream
   (#67994cf3 margin:0% 27%), which is what pulls the heading to two lines. */
.section-head--inset { margin-inline: 27%; }
@media (max-width: 1024px) { .section-head--inset { margin-inline: 10%; } }
@media (max-width: 767px)  { .section-head--inset { margin-inline: 0; } }
/* "Rated as a leader in distribution." — 17px #505050, not the body token. */
.section-head--inset p { font-size: 17px; line-height: 24.96px; color: #505050; margin: 0 0 2em; }

/* --- §1.1 homepage hero ----------------------------------------------------
   Container #84a9bd6: full-bleed flex column, margin 0, padding 0, no
   background of its own. Its two children are the Slider Revolution module
   and the 40/30/30 strip — they are separate bands, not one banner.
   overflow:hidden is ours: it absorbs the slider's deliberate 2.656%
   overhang (below) instead of letting it scroll the page sideways. */
.hero {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 1.1a — slider wrapper #5c4f594 / module #462b90c.
   The module is authored at 102.656% wide: it overhangs the viewport by
   2.656%, which shifts the centred text layers 1.328% right of centre.
   SR7 settings: size.fullHeight true, fullHeightOffset empty → 100vh. */
.hero-slider {
  position: relative;
  width: 102.656%;
  max-width: 102.656%;
  flex: 0 0 auto;
  height: 100vh;
  background: #101314 center/cover no-repeat;
  color: #fff;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;   /* SR7 slidebg cMode:"cover", position center/center */
}
/* Slide-1 layer "Shape-0": rgba(0,0,0,.5), radius 20px, authored at
   10099x3957 offset -3074/-1694 — i.e. far larger than the module, so the
   radius never shows and it behaves as a full-bleed scrim. */
.hero-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .5);
  border-radius: 20px;
}

/* Layers "Text-1" and "Text-2": both absolute, h-align centre, v-align
   middle. Text-2 carries a +100px y offset from the middle. */
.hero-title,
.hero-tagline {
  position: absolute;
  left: 0; right: 0;
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  z-index: 2;
}
.hero-title {
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);   /* SR7 font.family 'DM Sans' */
  font-size: 108px;
  font-weight: 600;
  line-height: 54px;               /* SR7 lh, deliberately below the em size */
}
.hero-tagline {
  top: calc(50% + 100px);
  transform: translateY(-50%);
  font-family: "Roboto", var(--font-body);  /* no family key; SR7 default */
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
}
/* SR7 breakpoint ladder [1240, 1024, 778, 480]; the 1240 column repeats the
   desktop values, so only the last three steps need rules. */
@media (max-width: 1024px) {
  .hero-title   { font-size: 92px; line-height: 46px; }
  .hero-tagline { font-size: 17px; line-height: 21px; top: calc(50% + 85px); }
}
@media (max-width: 778px) {
  .hero-title   { font-size: 69px; line-height: 34px; }
  .hero-tagline { font-size: 12px; line-height: 15px; top: calc(50% + 64px); }
}
@media (max-width: 480px) {
  .hero-title   { font-size: 42px; line-height: 20px; }
  .hero-tagline { font-size: 7px;  line-height: 9px;  top: calc(50% + 39px); }
}

/* 1.1b — the strip #1b34838: row, align-items centre, margin 0, padding 0,
   gap 0 (the kit sets --widgets-spacing: 0). Cells are 40/30/30 above
   768px and wrap to full width below it. */
.hero-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
/* Cell 1 #3364a88 — the dark statement block. */
.hero-strip-statement {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 12px;
  background-color: #232426;
}
/* Widget #f6027f0: a fixed 443px column, not a fluid one. Family stays
   termina from the .h5 utility; only size, line-height and colour are set. */
.hero-strip-statement h5 {
  width: 443px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-heading);
  line-height: 1.375em;
  color: #ffffff;
}
/* Cells 2 and 3 #41ee30a / #f0e3af3 — display:flex only, so they keep the
   Elementor container default padding of 10px. */
.hero-strip-cell {
  display: flex;
  width: 100%;
  padding: 10px;
}
@media (min-width: 768px) {
  .hero-strip-statement { width: 40%; }
  .hero-strip-cell      { width: 30%; }
}

/* Buttons #262c150 / #de66994 — ld_button, btn-naked + btn-icon-right +
   btn-hover-reveal. Both element rules are byte-identical upstream. */
.hero-strip-btn {
  --icon-font-size: 2em;
  --icon-move: var(--icon-font-size);   /* btn-icon-right: icon-size + 0 */
  position: relative;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  overflow: visible;      /* .btn-naked beats the .overflow-hidden utility */
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-primary);
}
.hero-strip-btn:hover,
.hero-strip-btn:focus-visible { color: var(--c-primary); }
/* btn-hover-reveal: the icon is parked at the button's right edge, invisible,
   and on hover fades in while sliding one icon-width further right. On a
   naked button --btn-pe is 0, so it ends up just outside the button box. */
.hero-strip-btn .btn-icon {
  position: absolute;
  top: auto;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-font-size);
  opacity: 0;
  transform: translateX(0);
  transition: opacity .25s cubic-bezier(0, .71, .4, 1),
              transform .5s cubic-bezier(0, .71, .4, 1);
}
.hero-strip-btn:hover .btn-icon,
.hero-strip-btn:focus-visible .btn-icon {
  opacity: 1;
  transform: translateX(var(--icon-move));
}

/* --- "Why Choose Us" glass cards ------------------------------------------
   The glass treatment comes from wp-custom-css, not Elementor:
   background rgb(51 98 48 / 18%), radius 16px, blur(5px). */
/* Heading block: boxed, 80px top padding only, both lines centred, intro
   clamped to 68.171% and centred in the column. */
.why-head { padding: 80px 0 0; }
/* 40px on a 40px line (1em), not the global 1.2em — measured h=40 upstream. */
.why-head h2 { text-align: center; margin: 0 0 10px; line-height: 1em; }
.why-head .why-lede {
  width: 68.171%;
  max-width: 68.171%;
  margin-inline: auto;
  text-align: center;
  color: var(--e-global-color-primary, #000);
}
@media (max-width: 767px) { .why-head .why-lede { width: 100%; max-width: 100%; } }

/* Cards row: full-bleed, NOT clamped to the container. */
.iconbox-row { padding: 60px 20px; }
@media (max-width: 1024px) { .iconbox-row { padding: 60px 40px; } }
@media (max-width: 767px)  { .iconbox-row { padding: 60px 20px; } }

.iconbox-grid {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  width: 100%;
}
@media (max-width: 1024px) and (min-width: 768px) {
  .iconbox-grid { grid-template-columns: repeat(2, 50%); }
  .iconbox-cell { margin: 0 0 30px; }
}
@media (max-width: 767px) { .iconbox-grid { grid-template-columns: 100%; } }

/* Elementor's default 10px column padding gives the 20px visual gutter. */
.iconbox-cell { padding: 10px; }
/* The divider between cards. Card 4 carries it too, upstream. */
.iconbox-inner {
  margin: 0 10px 0 0;
  padding: 0 30px 0 0;
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: #7070701A;
  height: 100%;
}
@media (max-width: 767px) { .iconbox-inner { margin: 0; padding: 0; border-width: 0; } }

.iconbox {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
  /* wp-custom-css hard-codes height:410px. min-height avoids clipping at
     narrow widths — the one deliberate deviation here. */
  min-height: 410px;
  padding: 20px;
  background: rgb(51 98 48 / 18%);
  border: 1px solid rgba(51, 98, 48, .3);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: box-shadow .3s ease, background .3s ease;
}

/* Small circular badge, top-right — not a large number top-left. */
.iconbox-label {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 50%;
  background-color: #F7F7F7;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000;
}

.iconbox-icon-container {
  display: inline-flex;
  min-width: 52px;
  font-size: 52px;
  margin-bottom: 40px;
}
.iconbox-icon-container > img { width: 52px; height: auto; }

.lqd-iconbox-heading {
  font-size: 15px;
  line-height: 34px;
  margin: 0 0 1.35em;
}
.lqd-iconbox-content { font-size: 14px; line-height: 21px; color: #000000; margin: 0; }

/* --- §1.4 About band — full-bleed 50/50 ------------------------------------
   Section #1023beca is elementor-section-full_width: the image fills the right
   half of the viewport edge-to-edge. Columns are vertically centred; the copy
   column is inset 0 10% 0 15%; the media column has 10px padding and holds the
   parallax image at its natural aspect (w-100). Stacks image-above-text < 768. */
.about-band { padding: 50px 0; overflow: hidden; }
@media (max-width: 1024px) { .about-band { padding: 40px; } }
@media (max-width: 767px)  { .about-band { padding: 30px 20px; } }
.about-band-inner {
  display: flex;
  align-items: center;
}
.about-band-copy { width: 50%; }
/* Padding on this block child, NOT the 50% flex item: percentage padding
   resolves against the containing block's width, so on the flex item it would
   resolve against the full inner (1905px) and swallow the text. On the block
   child it resolves against the 50% column, giving the intended inset. */
.about-band-copy-inner { padding: 0 10% 0 15%; }
.about-band-media { width: 50%; padding: 10px; overflow: hidden; }
.about-band-media img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .about-band-inner { flex-direction: column-reverse; }
  .about-band-copy { width: 100%; margin-top: 20px; }
  .about-band-copy-inner { padding: 10px; }
  .about-band-media { width: 100%; }
}

/* --- two-up about band ------------------------------------------------------ */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 1024px) { .two-up { grid-template-columns: 1fr; gap: 36px; } }
.two-up-media { overflow: hidden; }
.two-up-media img { width: 100%; }
/* §1.4 About heading is an ld_fancy_heading at 37px, not the global h2 40px;
   tablet is deliberately larger (42px). */
.two-up-title { font-size: 37px; line-height: 1.1em; letter-spacing: -.2px; margin: 0 0 1.5em; }
@media (max-width: 1024px) { .two-up-title { font-size: 42px; } }
@media (max-width: 767px)  { .two-up-title { font-size: 10vw; } }

/* --- §1.8 Essential Tools — full-bleed 58/42 --------------------------------
   elementor-section-full_width, so each column is a share of the WINDOW, not
   of the 1170 container. Left column carries margin-right 14%, right column
   padding 0 20% 0 5% — both on an inner block child, because a percentage on
   the flex item itself resolves against the whole row. */
.tools-band { padding: 120px 0; }
@media (max-width: 1024px) { .tools-band { padding: 50px 40px; } }
@media (max-width: 767px)  { .tools-band { padding: 30px 20px; } }
.tools-band-inner { display: flex; align-items: center; }
.tools-band-media { flex: 0 0 58%; }
.tools-band-media-inner { margin-right: 14%; overflow: hidden; }
.tools-band-media-inner img { width: 100%; display: block; }
.tools-band-copy { flex: 0 0 42%; }
.tools-band-copy-inner { padding: 0 20% 0 5%; }
.tools-band-copy-inner > p { margin: 0 0 2em; }
/* The CTA is a naked text button upstream, not a filled pill: 14/500/16,
   mixed case, no tracking, black — none of .btn-naked's uppercase treatment. */
.tools-cta,
.tools-cta .btn-txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-primary);
}
@media (max-width: 1024px) {
  .tools-band-inner { flex-direction: column; align-items: stretch; }
  .tools-band-media, .tools-band-copy { flex: 1 1 auto; }
  .tools-band-media-inner { margin-right: 0; padding: 10px; }
  .tools-band-copy-inner { padding: 0 0 0 10px; }
}
@media (max-width: 767px) { .tools-band-copy-inner { margin-top: 20px; padding: 0; } }

/* --- logo strip ------------------------------------------------------------- */
.logo-strip {
  display: flex;
  gap: 56px;
  align-items: center;
  overflow-x: auto;
  padding: 12px 0 24px;
  scrollbar-width: none;
}
.logo-strip::-webkit-scrollbar { display: none; }
/* Live shows these brand logos full-colour at natural size (§1.5) — the
   grayscale + dimming was invented. Full colour, a touch larger for presence. */
/* Measured: the logos run 92-100 tall on a 100px row at y=3118, and the band
   itself carries NO section padding — the heading sits on the section's top
   edge at 3022 and the strip ends on its bottom edge at 3218, for 196 total
   against the 420 an 80px-padded .section was giving it. */
.logo-strip img {
  flex: 0 0 auto;
  max-height: 100px;
  width: auto;
}
/* No padding, but an 80px MARGIN each side: measured on the reference, the
   about band ends at 2942 and this starts at 3022, and it ends at 3218 with
   the testimonials starting at 3298. */
.section:has(> .container > .logo-strip) { padding: 0; margin: 80px 0; }
.logo-strip { padding: 0; }
/* The heading's own 55px is the whole gap to the strip — .section-head's 48px
   is on top of it and does not exist upstream. */
.section:has(> .container > .logo-strip) .section-head { margin-bottom: 0; }

/* Affiliates likewise carry no section padding: upstream the heading is its
   own 61-tall band and the logo row is 213, with 10px above the tallest mark
   and 94 below the captions. */
.section:has(> .container > .affiliate-grid) { padding: 0; }
.section:has(> .container > .affiliate-grid) .section-head { margin-bottom: 11px; }

/* --- testimonials ----------------------------------------------------------- */
/* §1.7 carries a full-bleed architectural background (ArchImage2-4.jpg),
   pinned centre-left, contained, not repeated. */
.testimonials {
  background-image: url('/assets/img/ArchImage2-4.jpg');
  background-position: center left;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 80px 0;
}
@media (max-width: 1024px) { .testimonials { padding: 60px 40px; } }
@media (max-width: 767px)  { .testimonials { padding: 60px 20px; } }
/* This section is a boxed Elementor row whose col-100 adds 10px each side,
   so its content measures 1150, not the 1170 of the flex containers. */
.testimonials .container--wide { padding-inline: 25px; }
/* §1.7 testimonial carousel — Flickity, three cells of four in view, no arrows
   and no dots, drag only. Cells are calc(100%/3) of a track that bleeds 50px
   past the container on both sides; each cell insets 50px, and the cell body
   is raw WYSIWYG (quote image, paragraph, h6) with NO card chrome — the
   padding/background/radius that were here are invented. */
.quote-carousel {
  margin-inline: -50px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.quote-carousel::-webkit-scrollbar { display: none; }
.quote-carousel.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.quote-track { display: flex; }
/* The quote mark is BEHIND the text, not above it: measured at [108,3526
   104x300] with the paragraph at [138,3616 317x175] — overlapping on both
   axes. Stacked in flow it added its full 300px to every card and made the
   band 940 against the original's 623. */
.quote {
  position: relative;
  flex: 0 0 calc(100% / 3);
  padding: 90px 50px 0;
  margin: 0;
  background: none;
  border-radius: 0;
}
@media (max-width: 1024px) {
  .quote-carousel { margin-inline: 0; }
  .quote { flex-basis: 100%; padding: 50px 20px 0; }
}
/* The quote mark renders at its natural 104×300 upstream — it is a tall
   decorative glyph, not a small icon. */
.quote img {
  position: absolute;
  left: 20px;
  top: 0;
  z-index: 0;
  width: 104px;
  height: 300px;
  margin: 0;
  opacity: 1;
}
.quote p { position: relative; z-index: 1; margin: 0 0 24px; }
.quote h6 { position: relative; z-index: 1; margin: 0; color: #000; opacity: 1; }

/* --- affiliates (§1.10) -------------------------------------------------------
   ONE ROW OF FOUR, not a 2×2 grid. The reproduction guide reads the CSS as
   "four 50%-wide children → 2×2", but the flex row never wraps at desktop
   (--flex-wrap-mobile:wrap applies to mobile only), so the four 50% items
   shrink to 25% each and sit on a single line. Measured on the reference
   render: children at x 48/340/633/925, each 292.5 wide (1170/4), logos 218px
   (80%), all bottom-aligned. Stacked below 768px.
   Items are bottom-aligned; each is a centred logo above its label. No card
   chrome upstream — the border/padding/radius were invented. */
.affiliate-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  padding: 10px 0 94px;
  align-items: flex-end;
}
@media (max-width: 767px) { .affiliate-grid { flex-wrap: wrap; } }
.affiliate {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 10px;
  color: var(--c-primary);
  text-align: center;
}
@media (max-width: 767px) { .affiliate { flex-basis: 100%; } }
.affiliate:hover { color: var(--c-primary); }
.affiliate img { width: 80%; max-height: none; height: auto; }
.affiliate span { font-size: 14px; font-weight: 500; line-height: 16px; letter-spacing: 0; }

/* --- tabs (locations, product families) --------------------------------------
   The original has no wrap rule here, so 4–7 ALL-CAPS state names overflow at
   375px. This wraps. */
/* The four labels are NOT equal-width: measured 301/266/273/310, summing to
   exactly 1150 with no gaps — content width plus an equal share of the slack,
   i.e. flex:1 1 auto. Equal 25% columns were the rebuild's invention. */
.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  border-bottom: 1px solid #E3E3E3;
}
.tabs-nav li { flex: 1 1 auto; }
.tabs-nav button {
  appearance: none;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 16.5px 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .54);
  cursor: pointer;
  transition: color .3s var(--ease-signature), border-color .3s var(--ease-signature);
}
.tabs-nav button:hover { color: #000; }
.tabs-nav button[aria-selected="true"] { color: #000; border-bottom-color: #000; }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* --- branch cards ------------------------------------------------------------- */
.branch-list { display: grid; gap: 56px; }
.branch-block {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) { .branch-block { grid-template-columns: 1fr; gap: 24px; } }

/* Big-image carousel with a thumbnail strip, not a grid of crops. Measured on
   the reference render: the block is 1098 tall — 60px of padding, a 1150x863
   stage, a 145-tall row of 274x120 thumbs, then 30px. The 2x2 grid of 570x428
   tiles it used to be came out 143 short and read as a contact sheet. */
.branch-gallery { display: block; padding: 60px 0 30px; }
.gal-stage { position: relative; aspect-ratio: 1150 / 863; overflow: hidden; }
/* 50x50 white circles, inset 25px from the stage edges, centred on it.
   Measured at x=153/1223 against a stage running 128..1298, y=1145 against a
   stage of 731..1609. Both glyphs point right upstream — reproduced. */
.gal-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 18px;
  cursor: pointer;
  opacity: .85;
  transition: opacity .3s var(--ease-signature);
}
.gal-arrow:hover { opacity: 1; }
.gal-arrow--prev { left: 25px; }
.gal-arrow--next { right: 25px; }
@media (max-width: 767px) { .gal-arrow { width: 38px; height: 38px; margin-top: -19px; } }
.gal-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease-signature);
  pointer-events: none;
}
.gal-slide.is-active { opacity: 1; pointer-events: auto; }
.gal-slide img,
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumbs {
  display: flex;
  gap: 18px;
  padding-top: 25px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gal-thumbs::-webkit-scrollbar { display: none; }
.gal-thumb {
  flex: 0 0 274px;
  height: 120px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: .55;
  transition: opacity .3s var(--ease-signature);
}
.gal-thumb.is-active,
.gal-thumb:hover { opacity: 1; }
@media (max-width: 767px) { .gal-thumb { flex-basis: 180px; height: 80px; } }
/* Its own 60px band, matching the gallery's — the two stack contiguously.
   Widget stack measured at 351: name 167, address 124, then the line-card
   links at 25 apiece with a 10px spacer between, NOT 55 apiece. */
.branch-info { padding: 60px 0; }
.branch-info p { margin: 0 0 10px; line-height: 24.96px; }
.branch-info p:last-child { margin-bottom: 0; }
.branch-info p .btn { line-height: 24.96px; }
/* The warehouse heading block is 41 — the 31px name on a 34px line plus 7,
   with the tab strip starting immediately after it. */
.warehouse .section-head { margin: 0; padding-bottom: 7px; }
.warehouse .section-head h2 { margin: 0; }
.branch-info h2 { margin-top: 0; font-size: 28px; }
.branch-info address {
  font-style: normal;
  color: var(--c-text);
  line-height: 1.9;
  margin-bottom: 22px;
}
/* Plain address links only — exclude button-class links (.btn/.btn-solid),
   otherwise this out-specifies .btn-solid and paints black text on the black
   PDF pill, making the "Product Listing" buttons invisible. */
.branch-info a:not(.btn) { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.branch-info a:not(.btn):hover { color: var(--c-link); }

/* --- §1.13 Warehouse Locations — the same tab component on a dark #0C2327
   ground for the homepage. The Locations page reuses the light styling above. */
.warehouse { background: var(--c-dark-band); padding: 100px 0; }
/* The tab panes are a nested Elementor document whose container adds 10px a
   side, so their content measures 1150 — the branch name sits at x=138, not
   the 128 of the flex rows above. */
.warehouse .container--wide { padding-inline: 25px; }
@media (max-width: 1024px) { .warehouse { padding: 60px 40px; } }
@media (max-width: 767px)  { .warehouse { padding: 60px 20px; } }
/* Tabs share the row but do NOT divide it equally. Measured on the reference:
   the cells are 301/266/273/310 — `flex: 1 1 auto` with 12px of side padding,
   so each label keeps its own width and takes an equal share of the slack.
   `flex: 1 1 0` gave four 288s. The 277/242/249/286 the old comment quoted
   were the ANCHOR widths inside those cells, which is why they disagreed. */
.warehouse .tabs-nav { border-bottom-color: #fff; justify-content: space-between; gap: 0; }
.warehouse .tabs-nav li { flex: 1 1 auto; padding: 0 12px; }
/* Nav labels are DM Sans 13/24 at weight 400 with 0.8px tracking, in solid
   #fff for all four (not a dimmed inactive state) — not the theme's termina
   `.h3`, which an earlier pass assumed. Anchor box measures 57 tall. */
.warehouse .tabs-nav button {
  width: 100%;
  text-align: center;
  padding: 16.5px 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #fff;
}
.warehouse .tabs-nav button:hover { color: #fff; }
.warehouse .tabs-nav button[aria-selected="true"] { color: #fff; border-bottom-color: #fff; }

/* Pane layout: the gallery spans the pane and the location block sits FULL
   WIDTH beneath it — not in a right-hand column. */
.warehouse .branch-block,
.locations-tabs .branch-block { display: block; }
/* The gallery and the info block now carry their own 60/30 and 60/60 bands,
   and upstream they stack contiguously — no margin between them. */

/* --- Locations page ---------------------------------------------------------
   The nav is black-on-white here (the homepage's is white-on-teal), but each
   location block is the same dark #0C2327 band with the Six Caps name. */
/* This page is a FULL-WIDTH section with 100px 40px of padding, not the boxed
   1170 ladder: measured, the section runs the whole 1425 and its tab strip is
   1325 at x=50, where the boxed container gave 1140 at x=143. Only the branch
   blocks inside the panes go back to 1170. */
.locations-tabs { padding: 100px 40px; background: #fff; }
.locations-inner { width: 100%; }
/* The tab strip is inset 10px inside the 1345 content box (1325 at x=50), and
   the heading sits 7px above it — the heading widget's 1.5em bottom margin is
   pulled back by a -40px container margin upstream, leaving almost nothing. */
.locations-tabs .tabs-nav { margin: 0 10px 32px; }
.locations-tabs .section-head { margin: 0; padding: 10px 0 7px; }
.locations-tabs .section-head h2 { margin: 0; }
.locations-tabs .tabs-nav { justify-content: space-between; gap: 0; border-bottom-color: #E3E3E3; }
.locations-tabs .tabs-nav li { flex: 1 1 auto; padding: 0 12px; }
/* The pane is inset 10px inside the 1345 content box, like the tab strip. */
.locations-tabs .tab-panel { margin-inline: 10px; }
@media (max-width: 1024px) { .locations-tabs { padding: 60px 40px; } }
@media (max-width: 767px)  { .locations-tabs { padding: 60px 20px; } }
.locations-tabs .tabs-nav button {
  width: 100%;
  text-align: center;
  padding: 20px 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  line-height: 17.8px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #000;
}
/* The dark band is the FULL pane width — 1325 at x=50 — with its content inset
   to 1170 at x=128. Capping the block itself at 1170 made the teal stop at the
   edge of the photograph instead of running past it on both sides. Measured:
   two bands, [50,671 1325x1113] around the gallery and [50,1784 1325x472]
   around the branch details, contiguous. */
.locations-tabs .branch-block {
  background: var(--c-dark-band);
  max-width: none;
  padding: 0;
  margin-bottom: 40px;
}
/* Connecticut, New York and Maryland hold a single branch each, and upstream
   there is no trailing gap under the last block — only Pennsylvania's three
   are separated. */
.locations-tabs .branch-block:last-child { margin-bottom: 0; }
.locations-tabs .branch-gallery,
.locations-tabs .branch-info { max-width: 1170px; margin-inline: auto; }
.locations-tabs .branch-info address { color: #fff; line-height: 1.56em; }
.locations-tabs .branch-info address a { color: #fff; }
.locations-tabs .branch-info a:not(.btn) { color: #fff; }
.locations-tabs .warehouse-pdf { color: #BABABA; }
.locations-tabs .warehouse-pdf:hover { color: #fff; }
/* The branch name is Six Caps at 152px on a 152px line — the signature of this
   band, and the single biggest thing the rebuild was missing (it rendered as
   28px termina). */
.warehouse .branch-info h2,
.locations-tabs .branch-info h2 {
  font-family: var(--font-caps);
  font-size: 152px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  color: #fff;
  display: inline-block;
  margin: 0 0 15.2px;
}
@media (max-width: 1024px) {
  .warehouse .branch-info h2,
  .locations-tabs .branch-info h2 { font-size: 110px; }
}
@media (max-width: 767px) {
  .warehouse .branch-info h2,
  .locations-tabs .branch-info h2 { font-size: 20vw; }
}
.warehouse .branch-info address { color: #fff; line-height: 1.56em; }
.warehouse .branch-info address a { color: #fff; }
.warehouse-pdf { margin-top: 6px; color: #BABABA; }
.warehouse-pdf:hover { color: #fff; }
.warehouse-pdf .btn-txt { text-decoration: underline; text-underline-offset: 4px; }

/* --- contact ------------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-detail { margin-bottom: 34px; }
.contact-detail p.footer-eyebrow { color: rgba(0,0,0,.45); margin-bottom: 4px; }
.contact-detail h5 { margin: 0; font-size: 21px; }
.contact-detail h5 a { color: var(--c-primary); }
.contact-detail h5 a:hover { color: var(--c-link); }

/* Real labels with real contrast. The original used grey <p> pseudo-labels at
   rgba(0,0,0,0.3) with no for/id association. */
.form-field { margin-bottom: 22px; }
.form-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--c-primary);
}
.form-field .optional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .6; }
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--c-primary);
  background: #fff;
  border: 1px solid #D5D5D5;
  border-radius: 0;
  transition: border-color .3s var(--ease-signature), box-shadow .3s var(--ease-signature);
}
.form-field textarea { min-height: 160px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}
.form-consent { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 26px; font-size: 14px; }
.form-consent input { margin-top: 4px; }
.form-note {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--c-band-light);
  border-left: 3px solid var(--c-border-btn);
  font-size: 14px;
}
/* Honeypot — never shown, never announced. */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --- category index bands ------------------------------------------------------
   engineered-lumber's intro is a full-bleed #0C2327 split; deck-fasteners' is a
   boxed #29395B single centred column. Both were rendering white. */
.section--band { color: #FFFFFF; }
.section--band h1, .section--band h2, .section--band h3,
.section--band h4, .section--band h5 { color: #FFFFFF; }
.section--band p, .section--band .brand-blurb { color: #FFFFFF; }

/* Flex column so the lede's 36px bottom margin stays INSIDE the band instead
   of collapsing out of it — upstream the container is flex, and the band
   measures 174 (10 + 68 + 86 + 10), not the 138 collapsing gave. */
.cat-intro-center { max-width: 100%; text-align: center; display: flex; flex-direction: column; }
.cat-intro-center h2 { font-size: 40px; margin: 0 0 .5em; }
/* This navy band is a 10px strip, not one of the 80px section bands — the
   dark teal intro on /engineered-lumber/ shares .section--band and does use
   80, so the rule has to key on the centred-intro block. */
.section--band:has(> .container > .cat-intro-center) { padding: 10px 0; }
.cat-intro-lede { font-size: 18px; margin-bottom: 2em; }

.cat-intro-col { text-align: center; padding: 10px; }
.cat-intro-media img { margin-inline: auto; }

.cat-offer { padding: 40px 0 0; }
.cat-offer-title {
  font-size: 60px;
  line-height: .9em;
  text-align: center;
  margin: 0;
  padding: 0 0 10px;
}
@media (max-width: 1024px) { .cat-offer-title { font-size: 12vw; } }

/* LEARN MORE is auto-width upstream, not the 212px brand button. */
.brand-actions-btn--auto { width: auto; margin: 0; }
.btn-brand--auto { width: auto; padding-inline: 2.1em; }

/* --- plywood-lumber ------------------------------------------------------------
   "Wood Species:" is a 42px Six Caps display line; the tiles are aspect-boxed
   photos with the title reversed out over a scrim, not bordered cards. */
.wood-head { padding: 80px 0 0; }
.wood-display {
  font-family: var(--font-caps);
  font-size: 42px;
  font-weight: 400;
  line-height: 1em;
  text-align: center;
  margin: 0 0 .1em;
  padding: 0 0 10px;
}
@media (max-width: 767px) { .wood-display { font-size: 30vw; } }
.wood-lede {
  font-size: 60px;
  line-height: .9em;
  text-align: center;
  /* Its widget carries 10px below it upstream (118 against the heading's own
     108) — the whole of the 10px this head band was short, and with it every
     band below shifted 10px up. */
  margin: 0 0 10px;
}
@media (max-width: 1024px) { .wood-lede { font-size: 12vw; } }
@media (max-width: 767px)  { .wood-lede { font-size: 22vw; } }

.wood-tiles { padding: 80px 0; }
@media (max-width: 1024px) { .wood-tiles { padding: 0 40px; } }
@media (max-width: 767px)  { .wood-tiles { padding: 60px 20px; } }
/* Two 585 Elementor columns, each 10px-padded — NOT a 20px grid gap. The card
   is 565 at x=138/723, not 575 at 128/723, and that 10px inset is also the 14
   the section was short (359 against 345). */
.wood-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.wood-grid > * { padding: 10px; }
@media (max-width: 1024px) { .wood-grid { grid-template-columns: 1fr; } }

/* The image layer sits at scale(1.075) at REST upstream and deliberately
   overflows the 565 card — which is why the two cards touch instead of
   showing the 20px gutter between them. The card itself must not clip it. */
/* The radius belongs to the SCALED image box, not the card — the card no
   longer clips, so a radius here rounds nothing. */
.wood-tile { position: relative; overflow: visible; }
.wood-tile-media {
  position: relative;
  padding-top: 60%;
  overflow: hidden;
  border-radius: 4px;
  /* The independent `scale` property, not transform: the reveal system resets
     transform on everything inside a [data-anim], which silently cancelled it. */
  scale: 1.075;
}
.wood-tile-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .6s var(--ease-signature);
}
.wood-tile:hover .wood-tile-media img { transform: scale(1.08); }
.wood-tile-scrim { position: absolute; inset: 0; background-color: #00000091; }
/* Upstream the caption is an end-aligned flex box padded 32px inside the 565
   card, holding a heading with its own 210px right and 79.8px bottom padding —
   so the text sets at x=169 and its baseline area ends 121.8 above the card's
   bottom edge. Flattened into this one absolute element, those two levels have
   to be added together, which is the ~25px the caption was sitting low by. */
.wood-tile-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0 253px 121.8px 41px;
  font-size: 21px;
  line-height: 27px;
  letter-spacing: -0.21px;
  color: #FFFFFF;
}
@media (max-width: 1024px) { .wood-tile-title { padding-inline-end: 15em; } }
@media (max-width: 767px)  { .wood-tile-title { padding: 2rem; padding-bottom: 2em; } }

/* --- repeated-hero index (engineered lumber, deck fasteners) ------------------- */
.repeat-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 70px 0;
  border-top: 1px solid #EDEDED;
}
.repeat-hero:first-of-type { border-top: 0; }
@media (max-width: 900px) {
  .repeat-hero { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .repeat-hero .repeat-hero-media { order: -1; }
}
.repeat-hero h2 { margin-top: 0; }
.repeat-hero-media { overflow: hidden; }
.repeat-hero-media img { width: 100%; }

/* --- content boxes / feature cards ---------------------------------------------- */
.box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}
.content-box {
  padding: 40px;
  border: 1px solid #E3E3E3;
  border-radius: var(--radius-card);
  background: #fff;
}
.content-box img { width: 100%; margin-bottom: 24px; }
.content-box h2 { margin-top: 0; font-size: 28px; }

/* --- swatch / image tiles --------------------------------------------------------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
}
.tile { text-align: center; }
.tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-card);
  margin-bottom: 10px;
}
.tile span { font-size: 13px; letter-spacing: .6px; }

/* --- portfolio grid (screeneze) -------------------------------------------------------
   Two-up at >=768px, one-up below. The live site sets pointer-events:none on
   both the card overlay and the category link, so neither is clickable —
   reproduced. */
.pf-section { padding: 80px 0 0; }
@media (max-width: 1024px) { .pf-section { padding: 0; } }
/* Measured on the reference: four 592x481 cells at x=121/713 and y=2453/2934 —
   the rows butt straight up against each other with NO gap, and the grid sits
   30px below the section's 80px top padding (80 + 30 + 962 = 1072). The 35px
   card margin was adding 71 across the two rows. */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 30px -22px 0;
}
@media (max-width: 767px) { .pf-grid { grid-template-columns: 1fr; } }
/* Two levels upstream, and the rebuild had flattened them into one: the COLUMN
   is 592 with 0/22px padding, and the CARD inside it is a 548-wide white
   article padded 24/16/16 with a 6px radius and a 35px bottom margin. The
   column's 481 is that 446 card plus its margin, which is why the rows appear
   to butt together with no grid gap. */
.pf-item { padding: 0 22px; }
.pf-card {
  padding: 24px 16px 16px;
  margin-bottom: 35px;
  background: #fff;
  border-radius: 6px;
}
.pf-img {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.pf-img img { width: 100%; }
.pf-overlay {
  position: absolute;
  inset: 0;
  background-color: #FFFFFFD1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease-signature);
}
.pf-item:hover .pf-overlay { opacity: 1; }
/* termina 16/19.2 with a 1.6px bottom margin — not the 21px the rebuild had. */
.pf-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 19.2px;
  margin: 0 0 1.6px;
}
.pf-details p { margin: 0; font-size: 13px; }
.pf-cat { font-size: 13px; pointer-events: none; }

/* --- accordion (FAQ) ---------------------------------------------------------------- */
.accordion { border-top: 1px solid #E3E3E3; }
.accordion-item { border-bottom: 1px solid #E3E3E3; }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 16px;
  background: #e8ebeb;
  border: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: var(--c-primary);
  cursor: pointer;
  transition: background .3s var(--ease-signature);
}
.accordion-trigger:hover,
.accordion-trigger[aria-expanded="true"] { background: #f2f3f3; }
.accordion-trigger .sign { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.accordion-panel { display: none; padding: 20px 16px 28px; }
.accordion-panel.is-open { display: block; }

/* --- blog ------------------------------------------------------------------------------ */
.post-cover {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  background: #232426 center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.post-cover::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.post-cover .container { position: relative; z-index: 2; padding-bottom: 60px; }
.post-cover h1 { color: #fff; max-width: 20ch; }
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 18px;
}
.post-body { max-width: 72ch; margin-inline: auto; }
.post-body p { color: var(--c-text); font-size: 17px; line-height: 1.8; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 34px;
}
.news-card { display: block; color: var(--c-primary); }
.news-card:hover { color: var(--c-primary); }
.news-card-media { overflow: hidden; margin-bottom: 20px; }
.news-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .6s var(--ease-signature);
}
.news-card:hover img { transform: scale(1.04); }
.news-card h3 { font-size: 22px; margin: 0 0 10px; }
.news-card .meta { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: .55; }

/* --- 404 ---------------------------------------------------------------------------------- */
.error-page { text-align: center; padding: 140px 0; }
.error-page h1 { font-size: clamp(80px, 18vw, 200px); line-height: .9; margin: 0 0 20px; }
.error-page p { max-width: 46ch; margin-inline: auto; }

/* --- microsite photo hero (tando) ---------------------------------------
   Upstream this block is elementor-section-stretched with hero-large.jpg as a
   cover background, 180px vertical padding and two 50% columns — the copy on
   the left in white, the right column deliberately EMPTY so the photograph
   reads. The rebuild had it as a plain white section with a black heading. */
.flow-hero {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 180px 0;
}
.flow-hero-inner {
  width: 100%;
  max-width: 1170px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
}
.flow-hero-copy { width: 50%; }
.flow-hero-title {
  font-size: 34px;
  line-height: 1.1em;
  color: #fff;
  margin: 0 0 20px;
}
.flow-hero-copy p { color: #fff; }
.flow-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* White outlined buttons — the page's own .btn-solid is black on black here. */
.btn-ghost {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, .7);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s var(--ease-signature), color .3s var(--ease-signature);
}
.btn-ghost:hover { background: #fff; color: #000; }
@media (max-width: 1024px) { .flow-hero { padding: 100px 0; } .flow-hero-copy { width: 100%; } }
@media (max-width: 767px)  { .flow-hero { padding: 70px 0; } .flow-hero-title { font-size: 8vw; } }

/* --- overlay project cards (tando gallery) -------------------------------
   Upstream these are lqd-fb overlay cards: a 5:3 tile (padding-top 60%) with
   the photo cropped to cover, a #00000091 scrim and the title overlaid at the
   bottom. The rebuild rendered them as two full-width photographs stacked
   under plain headings, which is most of why the page ran long.
   The image is authored WIDER than the tile and clipped — measured 613px wide
   in a ~585px tile — so object-fit:cover is doing real work here. */
.overlay-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 767px) { .overlay-cards { grid-template-columns: 1fr; } }
.overlay-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 60%;
  color: #fff;
  text-decoration: none;
}
.overlay-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-signature);
}
.overlay-card:hover img { transform: scale(1.06); }
.overlay-card-scrim {
  position: absolute;
  inset: 0;
  background: #00000091;
}
.overlay-card-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  /* Same two nested boxes as the wood tiles: a 32px-padded end-aligned flex
     container holding a heading with its own 210px right and 79.8px bottom
     padding. Added together that is 31 in from the card and 110.8 up from its
     bottom, and it holds the text to 291 — which is what sets the caption to
     three lines upstream instead of our two. */
  padding: 0 243px 110.8px 31px;
  font-size: 21px;
  line-height: 27px;
  color: #fff;
}
@media (max-width: 767px) { .overlay-card-title { padding: 20px; font-size: 18px; } }

/* --- video row (tando) ---------------------------------------------------
   50/50 flex row, gap 0, each half 10px-padded; stacks below 768px. The play
   glyph is PAINTED INTO the poster JPEG upstream — there is no DOM play
   button and adding one would show two. The posters are only 358x198 and
   upscale to ~565x318, so they are soft on the original too. */
.video-row { display: flex; gap: 0; }
@media (max-width: 767px) { .video-row { flex-wrap: wrap; } }
.video-cell { flex: 0 0 50%; margin: 0; padding: 10px; }
@media (max-width: 767px) { .video-cell { flex-basis: 100%; } }
.video-poster {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-cell figcaption {
  padding-top: 14px;
  font-size: 18px;
  /* 24.96px, NOT 1.56 x 18: the body line-height inherits down as a LENGTH. */
  line-height: 24.96px;
  text-align: center;
  color: #000;
}
.video-cell iframe, .video-cell video { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* --- testimonial carousel (tando) ---------------------------------------
   quotes2.webp sits behind as contain/center; each slide is a white card.
   Cells per view are 1 / 2 / 1 — tablet shows MORE than desktop. That looks
   like a mistake and is not: it is what the generated CSS says. */
.testi-band {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  padding: 10px 0;
}
.testi-carousel { overflow-x: auto; scrollbar-width: none; cursor: grab; }
.testi-carousel::-webkit-scrollbar { display: none; }
.testi-carousel.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.testi-track { display: flex; }
.testi-cell { flex: 0 0 100%; padding-inline: 30px; }
@media (max-width: 1024px) { .testi-cell { flex-basis: 50%; } }
@media (max-width: 767px)  { .testi-cell { flex-basis: 100%; } }
.testi-card { background: #fff; border-radius: 7px; padding: 30px 35px; text-align: center; }
@media (max-width: 479px) { .testi-card { padding: 25px 15px; } }
.testi-card blockquote { margin: 0 auto 2.5rem; width: 80%; padding: 1rem 0 .5rem; border: 0; }
@media (max-width: 480px) { .testi-card blockquote { width: 100%; } }
.testi-card blockquote p { margin: 0; font-size: 21px; line-height: 1.5em; color: #243858; }
@media (max-width: 479px) { .testi-card blockquote p { font-size: 20px; } }
.testi-card h3 {
  /* 3.5px on the heading plus the 16px the attribution block carries below it
     upstream — the card measured 16px short without it. */
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5em;
  color: #000;
}
/* The dots sit INSIDE the carousel box upstream, pinned to its bottom — the
   carousel is as tall as the tallest slide and the dots ride in the slack
   under the shorter ones. Laid out in flow they added 50px to the band. */
.testi-band > .container { position: relative; }
.testi-dots { display: flex; justify-content: center; gap: 16px; margin-top: 25px; padding: 0; list-style: none; }
.testi-band .testi-dots { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.testi-dots button {
  width: 10px; height: 10px; padding: 0;
  border: 0; border-radius: 5em;
  background: #000;
  cursor: pointer;
  transition: background .3s;
}
.testi-dots button[aria-current="true"], .testi-dots button:hover { background: #FF0000; }

/* --- image rows (microsites) ---------------------------------------------
   Upstream logo strips and feature columns are N-across flex rows. The flow
   renderer had been giving each image its own full-width block, so they came
   out stacked and oversized: 476px where the original is 373, 933 where it is
   565. Images are centred in their column and capped, never blown up. */
.img-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 25px; }
.img-col { flex: 1 1 0; min-width: 0; text-align: center; }
.img-row-2 .img-col { flex-basis: calc(50% - 13px); }
.img-row-3 .img-col { flex-basis: calc(33.333% - 17px); }
.img-col img { max-width: 100%; height: auto; margin-inline: auto; display: block; }
.img-col h3, .img-col h4, .img-col h5, .img-col h6 { margin: 20px 0 10px; }
.img-col p { margin: 0; }
@media (max-width: 767px) {
  .img-row-2 .img-col, .img-row-3 .img-col { flex-basis: 100%; }
}

/* --- 50/50 text | image row (microsites) --------------------------------- */
.split-row { display: flex; align-items: center; gap: 40px; }
.split-copy, .split-media { flex: 1 1 0; min-width: 0; }
.split-copy h2 { margin-top: 0; }
.split-media img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) { .split-row { flex-direction: column; gap: 24px; } }

/* Heading beside its logo strip — the two share a row, they are not stacked. */
.split-row--tight { gap: 30px; align-items: center; }
.split-row--tight .split-copy h2 { margin: 0; }
.split-row--tight .split-media { flex: 1 1 60%; }
.split-row--tight .split-copy { flex: 0 1 40%; }

/* The microsite hero is a tall photographic band with its copy centred on it,
   not a short strip — the copy was clipping out of the top. */
.flow-hero { min-height: 620px; display: flex; align-items: center; }
.flow-hero-inner { width: 100%; }
@media (max-width: 1024px) { .flow-hero { min-height: 460px; } }
@media (max-width: 767px)  { .flow-hero { min-height: 380px; } }

/* ==========================================================================
   /tando-composites/ — authored against the reference render
   ==========================================================================
   Every number here was measured off the captured page at a 1425 content
   width (Elementor ladder: container 1170 at x=128). See render_tando in
   build.pl for the section map. Where a value looks arbitrary — the 42px
   under one icon and 15px under the other two, the 27.99% third icon — it is
   what the generated CSS says, and it is reproduced literally.

   Buttons on this page are a WHITE fill with a 1px #BCBCBC border and black
   13px uppercase text. Upstream the black is an ::after that only unveils on
   hover; the site's own .btn-solid (solid black) is wrong here. */
.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14.95px 27.3px;
  border: 1px solid #BCBCBC;
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 18.1px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background .3s var(--ease-signature), color .3s var(--ease-signature);
}
.t-btn:hover { background: #000; color: #fff; }

/* --- hero: full-bleed photo, copy in the left half ----------------------- */
.t-hero {
  padding: 180px 0;
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.t-hero-copy { width: 50%; padding-left: 7.51%; }
.t-hero-title {
  margin: 0 0 10px;
  max-width: 534px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  /* 30.6px — a length, measured; not a ratio of anything. */
  line-height: 30.6px;
  color: #fff;
}
.t-hero-lede {
  margin: 0 0 32px;
  max-width: 574px;
  /* The box is 574 but the TEXT only gets 448 — upstream carries a 126.344px
     right padding, which is the whole reason this reads as five lines and not
     four. A percentage cannot be used: it would resolve against .t-hero-copy,
     not against the paragraph. */
  padding-right: 126.34px;
  font-size: 16px;
  line-height: 24.96px;
  color: #fff;
}
.t-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 39px;
  margin: 0;
  padding: 20px 0 60px 10px;
}
/* The two hero buttons are wider-padded than every other button on the page:
   212px around a 143px label, where the rest are label+56. */
.t-hero-actions .t-btn { padding-inline: 33.5px; }
@media (max-width: 1024px) { .t-hero { padding: 110px 0; } .t-hero-copy { width: 100%; padding-left: 0; } }
@media (max-width: 767px)  { .t-hero { padding: 70px 0; } .t-hero-actions { gap: 14px; padding-left: 0; } }

/* --- "As Featured In": heading LEFT, press plate RIGHT, one row ---------- */
.t-featured { padding: 40px 0; }
.t-featured-row { display: flex; align-items: center; gap: 8px; }
.t-featured-row h2 {
  flex: 0 0 307px;
  margin: 0;
  /* The heading widget is 41 tall around a 31px line upstream, so centring it
     against the 46px logo plate lands the text 2px down, not 7.5px. */
  padding-bottom: 10px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 30.6px;
  color: #000;
}
.t-featured-plate { flex: 1 1 auto; text-align: center; line-height: 0; }
.t-featured-plate img { display: inline-block; width: 780px; max-width: 100%; height: auto; }
@media (max-width: 991px) {
  .t-featured-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .t-featured-row h2 { flex-basis: auto; }
  .t-featured-plate { width: 100%; }
}

/* --- three square photographs on a grey band ---------------------------- */
.t-squares { padding: 40px 0; background: #EAEAEA; }
.t-squares-row { display: flex; gap: 25px; }
.t-square { flex: 1 1 0; min-width: 0; }
.t-square img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 767px) { .t-squares-row { flex-wrap: wrap; } .t-square { flex-basis: 100%; } }

/* --- three icon columns -------------------------------------------------- */
.t-features { padding: 40px 0; }
.t-features-row { display: flex; align-items: stretch; }
.t-feature {
  flex: 1 1 0; min-width: 0; padding: 10px; text-align: center;
  /* Flex column so the icon margin-bottom and the h3 margin-top do NOT
     collapse into each other — upstream they sit in separate widget boxes
     and both apply. */
  display: flex; flex-direction: column;
}
.t-feature-icon { margin-left: auto; margin-right: auto; margin-top: 0; }
.t-feature-icon img { display: block; width: 100%; height: auto; }
.t-feature h3 {
  margin: 35px 0 14px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 33.6px;
  color: #000;
}
.t-feature p { margin: 0; font-size: 18px; line-height: 24.96px; color: rgba(0,0,0,.54); }
/* p.<class>, not bare .<class>: `.t-feature p` above out-specifies a lone
   class and was zeroing this 20px, pulling the button up against the copy. */
.t-feature p.t-feature-action { margin: 20px 0 0; }
@media (max-width: 767px) { .t-features-row { flex-wrap: wrap; } .t-feature { flex-basis: 100%; } }

/* --- two product blocks --------------------------------------------------
   The columns are vertically CENTRED against each other, not top-aligned:
   the two brand logos are different heights and upstream splits the
   difference (column tops measured 10px and 14px below the row top). */
.t-products { padding: 10px 0; }
.t-products-row { display: flex; align-items: center; }
.t-product { flex: 1 1 0; min-width: 0; padding: 10px; text-align: center; }
.t-product-photo { display: block; width: 100%; aspect-ratio: 565 / 379; object-fit: cover; }
.t-product-logo { width: 64.96%; margin: 40px auto 23px; }
.t-product-logo img { display: block; width: 100%; height: auto; }
.t-product p { margin: 0; font-size: 18px; line-height: 24.96px; color: rgba(0,0,0,.54); }
.t-product p.t-product-action { margin: 20px 0 0; }
@media (max-width: 767px) { .t-products-row { flex-wrap: wrap; } .t-product { flex-basis: 100%; } }

/* --- navy callout bars ---------------------------------------------------
   These are the two blocks the generic renderer lost entirely, emitting
   left-aligned black text on white where the page has a full-width #29395B
   bar with centred white display type. */
.t-navy { padding: 10px 0; }
.t-navy--tall { margin: 40px 0; }
.t-navy-box { padding: 10px; background: #29395B; text-align: center; }
.t-navy-box h2 {
  margin: 30px 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 30.6px;
  color: #fff;
}
.t-navy-action { margin: 0; padding: 20px 0 0; }

/* --- videos: no gap under the poster, 36px under the caption ------------- */
.t-videos { padding: 10px 0; }
.t-videos .video-cell figcaption { padding-top: 0; margin-bottom: 36px; }

/* --- become-a-dealer band ------------------------------------------------
   The "diamond" is part of cta-bg-1.jpg, not a shape element. */
.t-cta {
  padding: 180px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}
.t-cta h2 {
  margin: 30px 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 30.6px;
  color: #fff;
}
.t-cta-action { margin: 0; padding: 20px 0 0; }
@media (max-width: 767px) { .t-cta { padding: 90px 0; } }

/* --- inspire your next project: CENTRED copy over one wide plate ---------
   The "gallery" is a single 1024x353 composite JPEG, not a grid — the
   scanner had been treating it as the testimonial band's background. */
.t-inspire { padding: 60px 0; text-align: center; }
.t-inspire h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 30.6px;
  color: #000;
}
.t-inspire-lede {
  max-width: 585px;
  margin: 0 auto 36px;
  font-size: 18px;
  line-height: 24.96px;
  color: #000;
}
.t-inspire-action { margin: 0; padding: 20px 0 0; }
.t-inspire-plate { padding-top: 50px; }
.t-inspire-plate img { display: block; width: 100%; height: auto; }

/* --- where to buy: copy left, dealer map right, vertically centred ------- */
.t-wtb { padding: 40px 0; }
.t-wtb-row { display: flex; align-items: center; }
.t-wtb-copy, .t-wtb-map { flex: 1 1 0; min-width: 0; padding: 10px; }
.t-wtb-copy h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 30.6px;
  color: #000;
}
.t-wtb-copy p { margin: 0 0 36px; font-size: 18px; line-height: 24.96px; color: #000; }
/* p.<class> again: `.t-wtb-copy p` above was handing this row a 36px bottom
   margin, making the column 253 instead of 217 and lifting the whole
   vertically-centred block 18px. */
.t-wtb-copy p.t-wtb-action { margin: 0; padding-top: 20px; }
.t-wtb-map img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .t-wtb-row { flex-wrap: wrap; } .t-wtb-copy, .t-wtb-map { flex-basis: 100%; } }

/* --- overlay project cards: 80px band, 565x339 tiles --------------------- */
.t-cards { padding: 80px 0; }
/* 10px column padding upstream: the tiles are 565 in a 1150 row, not 575. */
.t-cards .overlay-cards { padding: 10px; }

/* ==========================================================================
   /contact/ — three bands, measured off the reference render
   ==========================================================================
   0 intro  y=430  h=385  pad 120/0/0  · 682 copy column + 486 lede column
   1 photo  y=755  h=560  pad 100/0/0  · tree-grass photo, dark 1069 card
                                         flush LEFT across its lower half
   2 form   y=1315 h=747  pad 50/0/140 · 1021 form area, two 495 columns   */

/* --- 0. intro ------------------------------------------------------------ */
.ct-intro { padding: 120px 0 0; }
.ct-intro-row { display: flex; align-items: flex-start; }
/* The copy column's wrap is padded 6px above upstream, and its eyebrow clears
   24 — not 20. Between them the band was 7px short and everything below it
   sat 7px high. */
.ct-intro-copy { flex: 0 0 682px; max-width: 682px; padding: 6px 0 0 15px; }
.ct-intro-copy .eyebrow { margin-bottom: 24px; }
.ct-intro-lede { flex: 1 1 auto; padding-left: 15px; }
.ct-intro-lede p {
  max-width: 398px;
  margin: 91px 0 0;   /* lede sits 91px below the row top upstream */
  font-size: 16px;
  line-height: 24.96px;
  color: rgba(0, 0, 0, .54);
}
/* The display heading is 102px on an 86.7px line — deliberately tighter than
   the em size, which is what makes it set as a block rather than as lines. */
.ct-display {
  /* Positioned so it paints OVER the photograph band below, which starts 60px
     before this section ends — on the original the second line of "Find our
     office" sits on top of the image. A static heading would go under it. */
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: 102px;
  font-weight: 500;
  line-height: 86.7px;
  color: #000;
}
/* "our office" is an <em class="h3"> upstream — same 102px family and weight,
   but ITALIC and on a 122.4px line rather than 86.7. */
.ct-display em { font-style: italic; line-height: 122.4px; }
@media (max-width: 1200px) { .ct-display { font-size: 8vw; line-height: .85em; } }
@media (max-width: 767px)  { .ct-display { font-size: 12vw; } }
@media (max-width: 1024px) {
  .ct-intro { padding: 60px 0 0; }
  .ct-intro-row { flex-direction: column; }
  .ct-intro-copy { flex-basis: auto; max-width: none; }
  .ct-intro-lede p { margin-top: 24px; }
}

/* --- 1. photograph band with the dark contact card ----------------------- */
/* Starts 60px BEFORE the intro section ends, so the display heading spills
   across the top of the photograph. */
.ct-photo {
  position: relative;
  min-height: 560px;
  margin-top: -60px;
  padding: 100px 0 0;
  background: #0b1b22 center/cover no-repeat;
}
/* Flush LEFT and stopping at 1069 — it is not a centred container. Four equal
   267 cells sitting on the band's bottom edge: three solid #232426, and the
   fourth solid WHITE carrying the CTA. */
.ct-card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1069px;
  max-width: 100%;
}
.ct-card-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 150px;
}
.ct-card-cell {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #232426;
  padding: 0 100px 0 20px;
}
.ct-card-cell:first-child { padding: 0 50px 0 70px; }
.ct-card-label,
.ct-card-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}
.ct-card-label { color: rgba(255, 255, 255, .64); }
.ct-card-value { color: rgba(255, 255, 255, .98); }
.ct-card-value a { color: inherit; }
.ct-card-value a:hover { color: #fff; }
.ct-card-value--todo { color: #ff8a8a; }
/* The fourth cell is WHITE, and the CTA fills it. */
.ct-card-cta { flex: 0 0 25%; display: flex; background: #fff; }
.ct-talk {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 24.96px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
}
/* The arrow is a hover reveal, as it is on the brand CTA's Visit Us — at rest
   the original shows the label alone. Kept in flow so the cell does not resize
   on hover; only its opacity moves. */
.ct-talk::after {
  content: "→";
  margin-left: 18px;
  opacity: 0;
  transition: opacity .3s var(--ease-signature);
}
.ct-talk:hover::after, .ct-talk:focus-visible::after { opacity: 1; }
.ct-talk:hover { color: #000; background: #f2f2f2; }
@media (max-width: 1024px) {
  .ct-photo { min-height: 420px; margin-top: 0; padding-top: 60px; }
  .ct-card { position: static; width: 100%; }
  .ct-card-inner { flex-wrap: wrap; min-height: 0; }
  .ct-card-cell { flex-basis: 50%; padding: 20px; }
  .ct-card-cell:first-child { padding: 20px; }
  .ct-card-cta { flex-basis: 100%; min-height: 60px; }
}

/* --- 2. form ------------------------------------------------------------- */
.ct-form { padding: 50px 0 140px; }
/* Not centred: the form area's left edge measures 212 against a viewport
   centre that would put it at 202 — it sits 10px right of centre upstream. */
.ct-form-inner {
  width: 1021px;
  max-width: calc(100% - 40px);
  margin-left: calc((100% - 1021px) / 2 + 10px);
  margin-right: auto;
}
@media (max-width: 1100px) { .ct-form-inner { margin-inline: auto; } }
/* Upstream this is a Bootstrap row: 525 columns padded 0 15px, so the 30 is a
   COLUMN gap only. The 30 below a field is the field's own bottom margin, and
   the cell measures 105 (25 label + 50 input + 30). Treating the 30 as a grid
   row-gap stacked it on top of .form-field's 22px margin and made every row
   127 — 85px of excess across the form. */
.ct-fields { display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 0; }
.ct-fields .form-field { flex: 0 0 calc(50% - 15px); min-width: 0; margin-bottom: 30px; }
.form-field--wide { margin-top: 0; }
/* Labels are 12px at 30% black — small and pale, above the field, not inside. */
.contact-form label {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 24.96px;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(0, 0, 0, .3);
}
/* Underline only: no box, no radius, a 2px #D0D7DE rule. */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  height: 50px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid #D0D7DE;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 24.96px;
  color: #000;
}
.contact-form textarea { height: 130px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(0, 0, 0, .3); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: 0; border-bottom-color: #232426; }
/* 28 tall with its 30 BELOW, like every other row — not 30 above. */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 28px;
  margin: 0 0 30px;
}
/* The shared .form-field rule caps the textarea at a 160 minimum, which beats
   the 130 the contact page actually uses and made the message row 193. */
.ct-form .form-field textarea { min-height: 0; height: 130px; }
/* The form widget sits in a wrap padded 35 above and 10 below. */
.ct-form-inner { padding: 35px 0 10px; }
.form-consent label {
  font-size: 13.7143px;
  line-height: 20.5714px;
  color: rgba(0, 0, 0, .54);
}
.form-consent a { color: rgba(0, 0, 0, .8); text-decoration: underline; }
.ct-submit {
  display: block;
  width: 100%;
  height: 60px;
  /* Its column is 60 flat upstream — the 30 above it is the consent row's own
     bottom margin, not a margin here. */
  margin: 0;
  padding: 0;
  border: 0;
  background: #232426;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background .3s var(--ease-signature);
}
.ct-submit:hover { background: #000; }
.ct-form .form-note { margin-top: 20px; font-size: 14px; color: rgba(0, 0, 0, .54); }
@media (max-width: 767px) {
  .ct-form { padding: 40px 0 70px; }
  .ct-fields .form-field { flex-basis: 100%; }
}

/* ==========================================================================
   /about/ — three bands, measured off the reference render of /about-2/
   ==========================================================================
   0 intro   428  h443  full-bleed 60/40 · copy padded 80/150/80/50, centred;
                        #1B1B1B panel padded 80/60
   1 mission 871  h640  pad 10px · 843x620 photo panel, copy 562 padded
                        0/60/0/80 and centred
   2 vision 1509  h658  60/40 · white copy padded 80/60; empty 570 column
                        carrying IMG_4960 at cover 50% 100%                  */

.ab-intro,
.ab-vision { display: flex; align-items: stretch; }
/* Literal -2px: the section overlaps the titlebar by two pixels upstream. */
.ab-intro { margin-top: -2px; position: relative; z-index: 12; }

.ab-intro-copy {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* the column is vertically centred upstream */
  padding: 80px 150px 80px 50px;
}
.ab-intro-panel {
  flex: 0 0 40%;
  background: #1B1B1B;
  padding: 80px 60px;
  color: #fff;
}
.ab-intro-panel p { margin: 0 0 1em; color: #fff; }
.ab-intro-panel p:last-child { margin-bottom: 0; }

/* Headings on this page are 32px on a 32px line — a tighter leading than the
   site's h2, and the reason each sits in a 64-tall widget. */
.ab-intro-copy h2,
.ab-mission-copy h2,
.ab-vision-copy h2 {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 32px;
  color: #000;
}
.ab-intro-copy p,
.ab-mission-copy p,
.ab-vision-copy p {
  margin: 0 0 1.5em;
  font-size: 16px;
  line-height: 24.96px;
  color: #000;
}
.ab-intro-copy p:last-child,
.ab-mission-copy p:last-child,
.ab-vision-copy p:last-child { margin-bottom: 0; }
/* Each text widget carries a 30px top padding upstream, except the middle one
   on the vision band. Paragraph breaks inside a widget are <br><br> pairs. */
.ab-mission-copy p.pt30,
.ab-vision-copy p.pt30 { padding-top: 30px; }
.ab-mission-copy p,
.ab-vision-copy p { margin-bottom: 0; }

/* The photograph is a BACKGROUND on an otherwise empty panel upstream, sized
   by a 600px spacer — not an <img>. Reproduced as an aspect-locked panel. */
.ab-mission { display: flex; align-items: center; padding: 10px; }
.ab-mission-photo {
  flex: 0 0 60%;
  align-self: stretch;
  min-height: 620px;
  background: #0b1b22 center/cover no-repeat;
}
.ab-mission-copy { flex: 0 0 40%; padding: 0 60px 0 80px; }

.ab-vision-copy {
  flex: 0 0 60%;
  background: #fff;
  padding: 80px 60px;
}
.ab-vision-photo {
  flex: 0 0 40%;
  align-self: stretch;
  /* 50% 100% — anchored to the BOTTOM of the frame, not centred. */
  background: #0b1b22 50% 100%/cover no-repeat;
}

@media (max-width: 1024px) {
  .ab-intro, .ab-mission, .ab-vision { flex-direction: column; }
  .ab-intro-copy, .ab-intro-panel,
  .ab-mission-photo, .ab-mission-copy,
  .ab-vision-copy, .ab-vision-photo { flex-basis: auto; }
  .ab-intro-copy { padding: 60px 40px; }
  .ab-intro-panel { padding: 60px 40px; }
  .ab-mission-photo { min-height: 380px; margin: 0 0 30px; }
  .ab-mission-copy { padding: 0 40px 40px; }
  .ab-vision-copy { padding: 60px 40px; }
  .ab-vision-photo { min-height: 380px; }
}
@media (max-width: 767px) {
  .ab-intro-copy, .ab-intro-panel, .ab-vision-copy { padding: 40px 20px; }
  .ab-mission-copy { padding: 0 20px 30px; }
}

/* ==========================================================================
   /envision/ — thirteen sections, measured off the reference render
   ==========================================================================
   0 navy 430/199 · 1 lede 629/201 · 2 gap 830/20 · 3-6 collections
   850/1019 + 1869/873 + 2742/873 + 3614/873 · 7 gap 4487/32 ·
   8 difference 4519/368 · 9 flipboxes 4886/310 · 10 grain 5196/496 ·
   11 consumer reports 5693/356 · 12 FAQ 6048/2059                          */

.ev-gap { padding: 0 10px; }
.ev-gap--20 { height: 20px; }
.ev-gap--32 { height: 32px; }

/* --- navy bands ---------------------------------------------------------- */
.ev-navy { padding: 10px 10px; background: #29395B; text-align: center; }
.ev-navy h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  color: #fff;
}
.ev-navy p { margin: 0; font-size: 18px; line-height: 24.96px; color: #fff; }
/* The difference band's copy is 1110 wide inside three nested 10px boxes, not
   the full 1170 — which is a whole line of difference on that paragraph. */
.ev-difference { padding: 10px; }
.ev-difference h2 { margin-bottom: 10px; }
.ev-difference > .container > p { max-width: 1110px; margin-inline: auto; }

/* --- lede + compare button ---------------------------------------------- */
.ev-lede { padding: 10px 10px; text-align: center; }
.ev-lede > .container > p { margin: 0; font-size: 18px; line-height: 24.96px; color: #000; }
.ev-lede-action { margin: 36px 0 0 !important; }

/* --- a collection -------------------------------------------------------
   The copy column is 534 at x=107 — a 713 half padded 0/71.25/0/106.875 —
   beside a 713x713 photograph. LUXURY runs 1019 because its second swatch
   grid outgrows that photo; the other three are sized by the photo itself. */
.ev-collection { padding: 80px 0; }
/* Vertically CENTRED, not top-aligned: on LUXURY the copy column is 859 and
   the 713 photo sits 73px down — exactly (859-713)/2. The other three have a
   shorter copy column, so the photo alone sets the 873 height and starts at
   the top. Reading that 73 as padding made all four 946. */
.ev-collection-inner { display: flex; align-items: center; }
.ev-collection-copy { flex: 0 0 50%; padding: 0 71.25px 0 106.875px; }
.ev-collection-photo { flex: 0 0 50%; }
.ev-collection-photo img { display: block; width: 100%; height: auto; }

/* The eyebrow is a #E3E3E3 pill around 23px/700 type — bigger than the 10px
   pill the brand pages use, and easy to mistake for it. */
.ev-eyebrow { display: inline-block; margin: 0 0 20px; background: var(--c-pill-bg); }
.ev-eyebrow span {
  display: inline-block;
  margin-bottom: 11.5px;
  padding: 0 16px;
  font-size: 23px;
  font-weight: 700;
  /* The kit's h6 tracking. Fourteen characters of it is the whole 11px the
     pill was short, and the 11.5px is the 10 it was short vertically. */
  letter-spacing: .81px;
  line-height: 27.6px;
  color: rgb(8, 27, 34);
}
.ev-wordmark { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 0 0; }
/* Same percentage trap as everywhere else on this site: the lede is a
   shrink-to-fit inline-block with a 126.344px right padding, so its text
   measures ~243 and sets to three lines. */
/* The gap below the wordmark is this paragraph's own 32px BOTTOM margin, not a
   top margin — as a top margin it pushed the lede down 28 and then left the
   button to supply its own spacing. */
.ev-collection-lede {
  display: inline-block;
  max-width: 369px;
  margin: 0 0 32px;
  padding-right: 126.344px;
  font-size: 16px;
  line-height: 24.96px;
  color: #000;
}
/* Two nested 10px containers around a fixed 212px button: 10 + (10 + 50 + 10)
   + 10 = 90, where a bare 50px button plus a 30px margin gave 80. */
.ev-collection-action { margin: 0 !important; padding: 20px 0 20px 10px; }
.ev-collection-action .t-btn { width: 212px; padding-inline: 0; }

/* 20px type, not body 16, inside the same 10px-on-10px container pair. */
.ev-swatch-label {
  margin: 0;
  padding: 20px 108.75px 20px 20px;
  font-size: 20px;
  line-height: 24.96px;
  color: #000;
}
/* Two 257 columns of 237-wide cells, 10px padded — not a full-width row.
   Upstream these are two column CONTAINERS, so the swatches fill top-to-bottom
   and only then across: Rustic Walnut / Grey Wood beside Shaded Auburn /
   Spiced Teak. A row-major grid read the same source order as
   Rustic Walnut / Grey Wood ACROSS, which pairs every swatch with the wrong
   neighbour. column-count fills column-major and does not care how many
   swatches a collection has. */
.ev-swatches {
  column-count: 2;
  column-gap: 0;
  width: 514px;
  max-width: 100%;
  margin: 0 0 0 10px;
  /* The grid outer and each column are both 10px-padded upstream, and both
     columns start on the same line — so 20px here reproduces the pair. */
  padding: 20px 0;
}
.ev-swatch { break-inside: avoid; }
.ev-swatch { margin: 0; padding: 0 10px; text-align: center; }
.ev-swatch img { display: block; width: 72%; height: auto; margin: 0 auto; }
/* 24 above the caption, not 16 — the cell's own 8px tail is what made it read
   as 16. Twelve px per cell, and every collection carries four or eight. */
.ev-swatch figcaption {
  margin: 24px 0 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  color: #000;
}
@media (max-width: 1024px) {
  .ev-collection-inner { flex-direction: column; }
  .ev-collection-copy, .ev-collection-photo { flex-basis: auto; padding: 0 20px; }
  .ev-collection-photo { padding-top: 30px; }
  .ev-swatches { width: 100%; margin-left: 0; }
}

/* --- flipboxes ----------------------------------------------------------
   Both faces are empty upstream — each is a background-image contained on
   white. The reference render shows them blank because it drops the
   per-widget CSS; restored here from the capture. */
.ev-flips { padding: 10px 10px; }
.ev-flips-row { display: flex; }
.ev-flip {
  position: relative;
  flex: 0 0 33.3333%;
  height: 270px;
  padding: 10px;
  perspective: 1000px;
}
.ev-flip-front,
.ev-flip-back {
  position: absolute;
  inset: 10px;
  background: #fff center/contain no-repeat;
  backface-visibility: hidden;
  transition: opacity .5s var(--ease-signature);
}
.ev-flip-back { opacity: 0; }
.ev-flip:hover .ev-flip-back { opacity: 1; }
@media (max-width: 767px) { .ev-flips-row { flex-wrap: wrap; } .ev-flip { flex-basis: 100%; } }

/* --- grain comparison bands ---------------------------------------------
   #BEBEBE, two rows. The copy sits in a 289 column and the photograph fills a
   1096 one as a background at 150%/100% width, anchored center-left. */
.ev-grain { padding: 10px; background: #BEBEBE; }
.ev-grain-row { display: flex; align-items: stretch; padding: 10px; }
.ev-grain-copy { flex: 0 0 289px; max-width: 289px; padding: 10px; }
.ev-grain-copy p { margin: 0; padding-right: 4px; font-size: 18px; line-height: 24.96px; color: #000; }
.ev-grain-photo {
  flex: 1 1 auto;
  min-height: 206px;
  margin: 10px;
  background-position: center left;
  background-repeat: no-repeat;
}
.ev-grain-row--rev .ev-grain-photo { min-height: 231px; }
@media (max-width: 767px) {
  .ev-grain-row, .ev-grain-row--rev { flex-direction: column; }
  .ev-grain-copy { flex-basis: auto; max-width: none; }
  .ev-grain-photo { min-height: 200px; background-size: cover !important; }
}

/* --- consumer reports ---------------------------------------------------- */
.ev-cr { padding: 40px 0; text-align: center; }
.ev-cr-logo { margin: 0; }
.ev-cr-logo img { display: inline-block; width: 328px; max-width: 100%; height: auto; }
/* The claim sits on a white plate inside the band. */
.ev-cr-claim {
  display: inline-block;
  max-width: 838px;
  margin: 0;
  padding: 8px;
  background: #fff;
  font-size: 18px;
  line-height: 24.96px;
  color: #000;
}
.ev-cr-action { margin: 20px 0 0 !important; }
.ev-cr-note {
  max-width: 570px;
  margin: 20px auto 0;
  font-size: 18px;
  line-height: 24.96px;
  color: #000;
}

/* --- FAQ ----------------------------------------------------------------- */
.ev-faq { padding: 80px 0; }
.ev-faq h2 { margin: 0 0 20px; font-size: 40px; line-height: 48px; }
.ev-faq-lede { margin: 0 0 40px; font-size: 18px; line-height: 24.96px; color: #000; }

/* --- envision: type corrections measured off the reference ---------------
   Every one of these was a value the first pass guessed rather than read. */
.ev-navy p { margin: 0 0 36px; }
/* The lede band's paragraph is 1150, not the full 1170 — its container carries
   another 10px inset — and its 36px bottom margin is what spaces the button,
   so the button row itself has none. */
.ev-lede > .container > p { max-width: 1150px; margin: 0 auto 36px; }
.ev-lede-action { margin: 0 !important; }
/* The difference band is set MUCH larger than the intro band it looks like:
   a 60px/54px heading over 25px body, not 40px over 18px. That alone was
   215px of the gap. */
.ev-difference h2 { font-size: 60px; line-height: 54px; margin: 0; }
.ev-difference > .container > p { font-size: 25px; line-height: 24.96px; margin: 0 auto 50px; }
/* FAQ: a shrink-wrapped centred heading, an 825-wide centred lede, and
   accordion triggers in termina 25/37.5 — not body type. */
.ev-faq { text-align: center; }
.ev-faq-lede { max-width: 825px; margin: 0 auto 36px; }
.ev-faq .accordion { max-width: 993px; margin-inline: auto; text-align: left; }
.ev-faq .accordion-trigger {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  line-height: 37.5px;
  padding: 16.25px 0;
  background: none;
}
/* Same panel anatomy /fairway/ has: the ITEM carries the 16px padding and the
   #e8ebeb plate that lightens to #f2f3f3 when open, and the trigger sits on it
   transparently. Ours had the colour on the trigger and no item padding, which
   is 15px short on every closed row — fourteen of them. */
.ev-faq .accordion { border: 0; }
/* The trigger's h3 wrapper keeps its default 17px of margin otherwise, which
   is exactly the amount the 16px item padding then over-corrects by. */
.ev-faq .accordion-item h3 { margin: 0; }
.ev-faq .accordion-item { padding: 16px; background: #e8ebeb; border: 0; }
.ev-faq .accordion-item.is-open { background: #f2f3f3; }
.ev-faq .accordion-panel { padding: 16px 0; }
.ev-faq .accordion-panel p { margin: 0; font-size: 16px; line-height: 24.96px; color: #000; }

/* ==========================================================================
   /fairway/ — measured off the reference render at 1440 (content 1425).
   Section ladder: 430/174 · 604/241 · 845/329 · 1174/1197 · 2372/1052 ·
   3424/1091 · 4515/1044 · 5559/621 · 6180/1568. Document 8685.
   ========================================================================== */

/* --- 0. navy intro ------------------------------------------------------- */
.fw-navy { padding: 10px 0; background: #29395B; text-align: center; }
.fw-navy h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  color: #fff;
}
.fw-navy p { margin: 0 0 36px; font-size: 18px; line-height: 24.96px; color: #fff; }

/* --- 1. three numbered steps --------------------------------------------
   Three 390 columns inside the 1170: a 50px numeral, a 15px gap, then a
   termina 32/38.4 title margined 32/16 over 16/24.96 body at 54% black. */
.fw-steps { padding: 10px 0; }
.fw-steps-row { display: flex; }
/* The 15px sits between two boxes upstream, so it CANNOT collapse into the
   title's 32px top margin. A plain margin here loses all 15 of it. */
.fw-step {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 0 0 33.3333%;
  padding: 10px;
  text-align: center;
}
.fw-step-body { display: flow-root; }
/* Upstream this is the lqd-essentials glyph icon-num-N. The rebuild does not
   ship that icon font (same call as the hero arrow), so the numeral is set in
   the display face inside the same 50px box. */
.fw-step-num {
  margin: 0;
  height: 50px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
  line-height: 50px;
  color: #69727D;
}
.fw-step h3 {
  margin: 32px 0 16px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 38.4px;
  color: #000;
}
.fw-step-copy { margin: 0; font-size: 16px; line-height: 24.96px; color: rgba(0, 0, 0, .54); }

/* --- 2. the steps diagram ------------------------------------------------ */
.fw-diagram { padding: 10px 0; }
.fw-diagram img { display: block; width: 780px; max-width: 100%; height: auto; margin-inline: auto; }

/* --- 3..6 a product collection ------------------------------------------
   The copy column is 534 at x=107 — a 713 half padded 0/71.25/0/106.875 —
   beside a 713x713 photograph, the two VERTICALLY CENTRED. Reading that
   centring offset as padding is the mistake envision already paid for. */
.fw-collection { padding: 80px 0; }
.fw-collection-inner { display: flex; align-items: center; }
.fw-collection-copy { flex: 0 0 50%; }
/* 15%/10% of the 713 COLUMN. On the flex item itself those percentages would
   resolve against the whole 1425 row — the trap this project keeps re-paying. */
.fw-collection-copy-inner { padding: 0 10% 0 15%; }
.fw-collection-photo { flex: 0 0 50%; }
.fw-collection-photo img { display: block; width: 100%; height: auto; }

.fw-eyebrow {
  display: inline-block;
  margin: 0 0 20px;
  background: var(--c-pill-bg);
  border-radius: 2px;
  line-height: 24.96px;
}
.fw-eyebrow span {
  display: inline-block;
  padding: 0 16px;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: .81px;
  text-transform: uppercase;
  color: #081B22;
}
.fw-wordmark { display: block; width: 100%; height: auto; }
/* THE PERCENTAGE TRAP, again: the lede 22% right padding resolves against the
   574 widget (107.471% of the 534 column), not the column — 126.34px, not
   117.5. Hence the wrapper; flattening it away costs a line. */
.fw-lede-wrap { width: 107.471%; }
.fw-lede {
  margin: 0 0 32px;
  padding-right: 22%;
  font-size: 16px;
  line-height: 24.96px;
  color: #000;
}
.fw-cta { margin: 0; padding: 20px 0 20px 10px; }

/* --- the button ---------------------------------------------------------
   Not the site black .btn-solid: a white fill with a 1px #BCBCBC hairline and
   black 13px uppercase text, going black-on-white on hover. */
.fw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 14.95px 27.3px;
  border: 1px solid #BCBCBC;
  background: #fff;
  font-size: 13px;
  line-height: 24.96px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #000;
  transition: background .3s var(--ease-signature), color .3s var(--ease-signature),
              border-color .3s var(--ease-signature);
}
.fw-btn:hover, .fw-btn:focus-visible { background: #000; border-color: #000; color: #fff; }
.fw-btn--fixed { width: 212px; padding-inline: 0; }

/* --- the tab strip ------------------------------------------------------- */
.fw-tabs { padding: 10px; }
.fw-tabs-nav ul {
  display: flex;
  align-items: center;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid #E7EAEE;
}
.fw-tabs-nav li { flex: 0 1 auto; padding: 0 12px; text-align: center; }
/* The first collection nav is justify-content-between upstream, which gives
   its single item flex:1 1 auto — 514 wide, not shrink-to-fit like the rest. */
.fw-tabs-nav--fill li { flex: 1 1 auto; }
.fw-tabs-nav button {
  display: block;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: inherit;
  cursor: pointer;
}
.fw-tab-icon { display: block; height: 0; margin-bottom: 8px; }
.fw-tab-label {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 26px;
  color: #000;
}
/* Every nav but the first carries an 11px override, and its 1.5em padding and
   0.5em icon gap shrink with it. */
.fw-tabs--sm .fw-tabs-nav button { padding: 16.5px 0; font-size: 11px; }
.fw-tabs--sm .fw-tab-icon { margin-bottom: 5.5px; }
.fw-tabs--sm .fw-tab-label { font-size: 11px; line-height: 15.0526px; }

/* --- a tab pane ---------------------------------------------------------
   Two 247 halves. The left is padded 10px all round; the right has NO padding
   at all, only its 1px black left border. Not a slip — measured. */
.fw-pane { display: none; }
.fw-pane.is-active { display: block; }
.fw-pane-inner { display: flex; padding: 10px; }
.fw-pane-col { flex: 0 0 50%; }
.fw-pane-col--l { padding: 10px; }
.fw-pane-col--r { border-left: 1px solid #000; }
/* Both the pane lede and every caption carry the same 0% 22% 0% 0% padding the
   collection ledes do — 22% of the 227/246 column. Without it the lede sets to
   six lines instead of seven and "Top Rail w/ Drink Rail Adaptor" stops
   wrapping, and each column comes up exactly one 24.96 line short. */
.fw-pane-lede { margin: 0 0 32px; padding-right: 22%; font-size: 16px; line-height: 24.96px; color: #000; }
.fw-pane-swatch { display: block; max-width: 100%; height: auto; }
/* The pane button is a 19%-wide box holding a fixed 212px anchor, so the
   anchor overflows its own widget. Upstream does exactly this. */
.fw-pane-action { width: 19%; margin: 20px 0 0; }
.fw-pane-img { display: block; max-width: 100%; height: auto; }
.fw-pane-img--narrow { width: 31%; }
.fw-pane-cap {
  display: inline-block;
  margin: 0 0 32px;
  padding-right: 22%;
  font-size: 16px;
  line-height: 24.96px;
  color: #000;
}

/* --- 7. the navy E-FIT band ---------------------------------------------- */
.fw-efit { padding: 10px 0; background: #29395B; }
.fw-efit-title {
  margin: 0;
  padding-bottom: 10px;
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 500;
  line-height: 54px;
  text-align: center;
  color: #fff;
}
.fw-efit-inner { padding: 10px; }
.fw-efit-row { display: flex; align-items: center; padding: 10px; }
.fw-efit-video, .fw-efit-copy { flex: 0 0 50%; padding: 10px; }
.fw-efit-frame { position: relative; padding-top: 56.25%; }
.fw-efit-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fw-efit-logo { display: block; width: 300px; max-width: 100%; height: auto; margin-inline: auto; }
/* The 20px is padding on each line's own widget, not a margin — as a margin it
   collapses into the previous line's 50px and the band loses 20px. */
.fw-efit-line {
  margin: 0 0 50px;
  padding: 20px 22% 0 0;
  font-size: 25px;
  line-height: 24.96px;
  color: #fff;
}
.fw-efit-line--em { font-style: italic; }
.fw-efit-action { margin: 0; }

/* --- 8. the FAQ ---------------------------------------------------------
   Full-bleed, not boxed: the lede is padded 0 300px and the accordion 0 200px,
   and upstream never resets either at any breakpoint. Item padding is 16px on
   a #e8ebeb panel that lightens to #f2f3f3 when open. */
.fw-faq { padding: 80px 0; text-align: center; }
.fw-faq h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  color: #000;
}
.fw-faq-lede { margin: 0 0 36px; padding: 0 300px; font-size: 18px; line-height: 24.96px; color: #000; }
.fw-faq .accordion { padding: 0 200px; border: 0; text-align: left; }
.fw-faq .accordion-item { padding: 16px; background: #e8ebeb; border: 0; }
.fw-faq .accordion-item.is-open { background: #f2f3f3; }
.fw-faq .accordion-item h3 { margin: 0; }
.fw-faq .accordion-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 16.25px 0;
  background: none;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  line-height: 37.5px;
  color: #000;
}
.fw-faq .accordion-trigger:hover,
.fw-faq .accordion-trigger[aria-expanded="true"] { background: none; }
.fw-faq-expander {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin: 15px 16px 0 0;
  border-left: 5.25px solid transparent;
  border-right: 5.25px solid transparent;
  border-top: 7px solid currentColor;
}
.accordion-trigger[aria-expanded="true"] .fw-faq-expander {
  border-top: 0;
  border-bottom: 7px solid #29395B;
}
.fw-faq-txt { flex: 0 1 auto; text-align: left; }
.fw-faq .accordion-panel { padding: 16px 0; }
/* Answer copy is the kit's body colour (54% black), not solid #000. */
.fw-faq .accordion-panel p,
.fw-faq .accordion-panel ul { margin: 0; font-size: 16px; line-height: 24.96px; color: rgba(0, 0, 0, .54); }
.fw-faq .accordion-panel ul { padding-left: 20px; }

@media (max-width: 1024px) {
  .fw-collection { padding: 40px; }
  .fw-collection-inner { flex-direction: column-reverse; }
  .fw-collection-copy, .fw-collection-photo { flex-basis: auto; width: 100%; padding: 10px; }
  .fw-lede-wrap { width: 100%; }
  .fw-lede, .fw-efit-line { padding-right: 0; }
  .fw-efit-row { flex-wrap: wrap; }
  .fw-efit-video, .fw-efit-copy { flex-basis: 100%; }
  .fw-efit-title { font-size: 12vw; }
  .fw-faq-lede { padding: 0 20px; }
  .fw-faq .accordion { padding: 0 20px; }
  .fw-steps-row { flex-wrap: wrap; }
  .fw-step { flex-basis: 100%; }
}
@media (max-width: 767px) {
  .fw-collection { padding: 30px 20px; }
  .fw-efit-title { font-size: 22vw; }
}