:root{
  --red:#e31b23;
  --black:#070707;
  --ink:#111111;
  --paper:#ffffff;
  --grey:#656561;
  --soft-grey:#9b9b96;
  --line:#d9d9d4;
  --green:#a9cf22;
  --pad:clamp(42px,3.8vw,78px);
  --side:clamp(340px,17vw,380px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --hc-micro:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

.header,
.site-header{
  height:78px;
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  padding:0;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.08);
  transition:height .25s var(--ease),box-shadow .25s
}

.header.scrolled,
.site-header.scrolled{
  height:68px;
  box-shadow:0 6px 28px rgba(0,0,0,.06)
}

.header-inner{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 clamp(24px,5vw,88px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}

.logo,
.brand{
  width:166px;
  min-width:166px;
  max-width:166px;
  display:block;
  flex:0 0 166px
}

.logo img,
.brand img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important
}

.nav,
.top-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:32px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em
}

.nav a,
.top-nav a{
  position:relative;
  padding:8px 0
}

.nav a:not(.nav-cta):after,
.top-nav a:not(.header-cta):after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:2px;
  height:2px;
  background:var(--red);
  transition:right .25s
}

.nav a:not(.nav-cta):hover:after,
.top-nav a:not(.header-cta):hover:after{
  right:0
}

.nav-cta,
.header-cta{
  background:var(--black);
  color:#fff;
  padding:13px 18px !important;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:background .2s
}

.nav-cta:hover,
.header-cta:hover{
  background:var(--red)
}

.menu{
  display:none;
  border:0;
  background:none;
  padding:8px;
  width:42px;
  height:42px
}

.menu span{
  display:block;
  width:100%;
  height:2px;
  background:#111;
  margin:6px 0;
  transition:.25s
}

main{padding-top:78px}

.subhero{
  min-height:225px;
  padding:18px var(--pad) 38px;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(460px,.88fr);
  gap:70px;
  align-items:end;
  background:#fff;
  border-bottom:1px solid var(--line)
}
.subhero .eyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--soft-grey);
  margin-bottom:16px
}

.subhero .eyebrow .brand-wordmark{
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  color:inherit;
}
.subhero h1{
  margin:0;
  font-size:clamp(66px,5.1vw,102px);
  line-height:.87;
  letter-spacing:-.062em;
  font-weight:900
}
.subhero p{
  margin:0 0 2px;
  max-width:610px;
  font-size:19px;
  line-height:1.42;
  letter-spacing:-.018em
}
.statement{
  min-height:114px;
  display:grid;
  grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr);
  gap:76px;
  align-items:center;
  padding:26px var(--pad);
  background:#080808;
  color:#fff
}
.statement strong{
  font-size:23px;
  line-height:1.06;
  letter-spacing:-.025em
}
.statement p{
  margin:0;
  font-size:20px;
  line-height:1.38;
  color:#f4f4f4
}


.tech-section{
  display:grid;
  grid-template-columns:430px minmax(0, 1fr);
  border-bottom:1px solid var(--line);

}
.side{
  background:#070707;
  color:#fff;
  padding:50px 34px 42px;
  min-height:100%;
  border-right:1px solid #222;
  overflow:hidden
}
.side .num{
  color:var(--red);
  font-size:29px;
  font-weight:300;
  margin-bottom:34px
}
.side .kicker{
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:14px
}
.side h2{
  margin:0 0 30px;
  font-size:clamp(48px,2.8vw,58px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.045em;
  max-width:300px
}
.side p{
  margin:0;
  font-size:16px;
  line-height:1.48;
  max-width:255px;
  color:#f2f2f2
}


.content{
  min-width:0;
  background:#fff;
  padding:34px 38px 0
}
.overview-grid{
  min-height:638px;
  display:grid;
  grid-template-columns:215px 305px minmax(0,1fr);
  gap:28px;
  align-items:stretch
}
.spec-col{
  padding:0 25px 0 0;
  border-right:1px solid var(--line)
}
.spec{
  padding:8px 0 15px;
  border-bottom:1px solid var(--line)
}
.spec:last-child{border-bottom:0}
.spec span{
  display:block;
  margin-bottom:7px;
  color:var(--soft-grey);
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase
}
.spec strong{
  display:block;
  font-size:22px;
  line-height:1.13;
  letter-spacing:-.028em
}
.spec small{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.3;
  color:#666
}
.color-chip{
  width:27px;
  height:27px;
  background:#315f7b;
  margin-top:9px;
  border:1px solid #294a64
}
.hero-zone{
  min-width:0;
  display:grid;
  grid-template-rows:465px 1fr
}
.hero-cap{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.hero-cap img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center
}
.view-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:0
}
.view{
  min-width:0;
  text-align:center;
  border-right:1px solid var(--line)
}
.view:last-child{border-right:0}
.view b{
  display:block;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px
}
.view img{
  width:100%;
  height:138px;
  object-fit:contain
}

.measure-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 150px;align-items:stretch}
.measure-card{padding:7px 24px 0;border-right:1px solid var(--line)}
.measure-head{display:flex;gap:12px;align-items:flex-start;font-size:12px;font-weight:900;line-height:1.08}
.measure-head b{font-size:24px;font-weight:400}
.measure-value{font-size:28px;color:var(--red);margin:10px 0 6px}
.measure-card img{width:100%;height:175px;object-fit:contain}
.size-table{align-self:center;border:1px solid var(--line);margin-left:18px}
.size-table h3{margin:0;background:#050505;color:#fff;padding:12px 10px;text-align:center;font-size:11px}
.size-table .r{display:grid;grid-template-columns:.7fr 1fr}.size-table span{padding:12px 8px;border-top:1px solid var(--line);text-align:center;font-size:11px}.size-table span+span{border-left:1px solid var(--line)}

.construct-top{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line)}
.citem{padding:9px 15px;border-right:1px solid var(--line);min-width:0}
.citem:last-child{border-right:0}
.citem h3,.mini h3{font-size:10px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 5px}
.citem p,.mini p{font-size:10px;color:#555;line-height:1.3;margin:0}
.citem img{height:105px;width:100%;object-fit:contain;margin-top:4px}
.construct-bottom{display:grid;grid-template-columns:.8fr 1fr 1.2fr}
.mini{padding:8px 15px;border-right:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px}
.mini:last-child{border-right:0}
.mini img{width:100%;height:48px;object-fit:contain}

.brand-grid{display:grid;grid-template-columns:1fr 1fr}
.brand-card{padding:8px 22px 0;border-right:1px solid var(--line);display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:start}
.brand-card:last-child{border-right:0}
.brand-copy h3{color:var(--red);font-size:14px;text-transform:uppercase;margin:0 0 22px}
.brand-copy dl{margin:0;display:grid;gap:14px}.brand-copy dt{font-size:9px;color:#666;text-transform:uppercase;letter-spacing:.06em;font-weight:900}.brand-copy dd{margin:4px 0 0;font-size:10px;line-height:1.35}
.brand-visual img{width:100%;height:155px;object-fit:contain}



/* ============================================================
   EXTERNAL CONTROLS
   ------------------------------------------------------------
   All visual controls are in styles.css:
   layout / widths / spacing / typography / image sizing.
   index.html contains structure and content only.
   ============================================================ */

.text-red{
  color:var(--red)
}

.colour-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:9px
}

.colour-row .color-chip{
  margin-top:0
}

.colour-row small{
  margin:0;
  color:#222
}

.visor-colour-block{
  margin-top:12px
}

.content-flush{
  padding:0
}


/* ============================================================
   SECTION 01 / SPECIFICATION COLUMN WIDTHS
   ------------------------------------------------------------
   LEFT COLUMN  = 215px
   RIGHT COLUMN = 305px

   To widen ONLY the right column later:
   search in Notepad++ for:
   "SECTION 01 / SPECIFICATION COLUMN WIDTHS"

   Then change 305px below.

   This does NOT alter:
   - total page width
   - black sidebar width
   - header
   - fonts
   - other sections
   ============================================================ */

.overview-grid{
  grid-template-columns:215px 305px minmax(0,1fr)
}

.spec-col{
  min-width:0
}

.spec-col-left .spec:nth-child(2) strong{
  white-space:nowrap
}


@media(max-width:1320px){
  :root{--side:300px}

  /* SECTION 01 / medium screens
     LEFT = 190px / RIGHT = 260px */
  .overview-grid{grid-template-columns:190px 260px minmax(0,1fr);gap:22px}
  .hero-zone{
    grid-template-columns:minmax(0,1.9fr) minmax(280px,.9fr);
    grid-template-rows:560px
  }
}
@media(max-width:900px){
  .header-inner{padding:0 20px}
  .top-nav{display:none}
  .menu{display:block;margin-left:auto}
  .site-header.open .top-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    background:#fff;
    padding:14px 20px 20px;
    border-bottom:1px solid var(--line)
  }
  .site-header.open .top-nav > a:not(.header-cta){padding:12px 0}
  .site-header.open .header-cta{
    display:block;
    margin-top:8px;
    padding:13px 18px !important;
    text-align:center
  }
  .tech-section{grid-template-columns:1fr}.side{padding:28px var(--pad)}.side h2{font-size:38px}.side p{max-width:520px}
  .overview-grid{grid-template-columns:1fr 1fr;min-height:0}
  .hero-zone{
    grid-column:1/-1;
    grid-template-columns:1fr;
    grid-template-rows:360px auto
  }
  .hero-cap{
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .view-row{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto
  }
  .view img{
    height:150px
  }
  .measure-grid{grid-template-columns:1fr}.measure-card{border-right:0;border-bottom:1px solid var(--line)}.size-table{max-width:320px}
  .construct-top{grid-template-columns:1fr 1fr}.construct-bottom{grid-template-columns:1fr}.brand-grid{grid-template-columns:1fr}.brand-card{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  :root{--pad:20px}.brand{width:145px}.subhero{grid-template-columns:1fr;min-height:auto;padding-top:36px}.subhero h1{font-size:58px}.subhero p{font-size:17px}.statement{grid-template-columns:1fr;gap:18px}.statement p{font-size:18px}
  .overview-grid{grid-template-columns:1fr}
  .spec-col{border-right:0}
  .hero-zone{grid-template-rows:300px auto}
  .view-row{grid-template-columns:1fr 1fr}
  .brand-card{grid-template-columns:1fr}
}


/* ============================================================
   SECTION 01 / FINAL HERO + 2x2 VIEW LAYOUT
   ------------------------------------------------------------
   IMPORTANT:
   This override is intentionally placed at the END of styles.css
   so it wins over the older Section 01 rules above.

   DESKTOP EFFECT:
   [ LARGE HERO CAP ][ FRONT | LEFT  ]
                      [ RIGHT | BACK ]

   ONLY the white product-image block is changed.
   Specification columns and the rest of the page are untouched.

   NOTEPAD++:
   search for "FINAL HERO + 2x2 VIEW LAYOUT"
   ============================================================ */

@media (min-width: 901px) {

  /* The third column of overview-grid remains the product image zone */
  #overview .hero-zone {
    min-width: 0;
    height: 638px;

    display: grid;

    /* Large main image on left / four views on right */
    grid-template-columns: minmax(0, 2.15fr) minmax(330px, 0.85fr);
    grid-template-rows: 638px;

    gap: 0;
    align-items: stretch;
  }


  /* MAIN CAP — fills the whole left side */
  #overview .hero-cap {
    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  #overview .hero-cap img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;
  }


  /* FOUR VIEWS — true 2 x 2 grid */
  #overview .view-row {
    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));

    gap: 0;

    margin: 0;
    padding: 0;

    border-top: 0;
  }


  /* Individual front / left / right / back cells */
  #overview .view {
    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);

    align-items: stretch;

    padding: 16px 12px 12px;

    text-align: center;

    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }


  /* No right border in the right-hand cells */
  #overview .view:nth-child(2),
  #overview .view:nth-child(4) {
    border-right: 0;
  }


  /* No bottom border in the bottom row */
  #overview .view:nth-child(3),
  #overview .view:nth-child(4) {
    border-bottom: 0;
  }


  /* FRONT / LEFT / RIGHT / BACK label */
  #overview .view b {
    display: block;

    margin: 0 0 8px;
    padding: 0 0 9px;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .04em;
    text-transform: uppercase;

    border-bottom: 1px solid var(--line);
  }


  /* Each thumbnail uses its full cell */
  #overview .view img {
    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: contain;
    object-position: center center;
  }

}


/* ============================================================
   SECTION 01 / MEDIUM DESKTOP
   Same 2x2 composition, slightly narrower right block.
   ============================================================ */

@media (min-width: 901px) and (max-width: 1320px) {

  #overview .hero-zone {
    height: 560px;

    grid-template-columns: minmax(0, 1.9fr) minmax(280px, .9fr);
    grid-template-rows: 560px;
  }

}


/* ============================================================
   SECTION 02 / MEASUREMENTS — ENLARGED COMPACT LAYOUT
   ------------------------------------------------------------
   ONLY the white measurements content area is changed.

   Goal:
   - larger X / Y / Z graphics
   - smaller gaps between the measurement cards
   - larger SIZE TABLE at the end
   - keep the black sidebar and all other sections unchanged

   NOTEPAD++:
   search for "SECTION 02 / MEASUREMENTS — ENLARGED COMPACT LAYOUT"
   ============================================================ */

@media (min-width: 901px) {

  #measurements .content {
    padding: 24px 24px 0;
  }

  #measurements .measure-grid {
    display: grid;

    /* X / Y / Z stay dominant, table is larger than before */
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      245px;

    align-items: stretch;

    /* Bring all blocks closer together */
    column-gap: 10px;
  }

  #measurements .measure-card {
    min-width: 0;

    padding: 8px 10px 0;

    border-right: 1px solid var(--line);
  }

  #measurements .measure-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;

    font-size: 12px;
    font-weight: 900;
    line-height: 1.06;
  }

  #measurements .measure-head b {
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
  }

  #measurements .measure-value {
    margin: 8px 0 4px;

    font-size: 31px;

    color: var(--red);
  }

  #measurements .measure-card img {
    width: 100%;

    /* Larger images, close to the proportions from the green sketch */
    height: 250px;

    object-fit: contain;
    object-position: center bottom;
  }

  #measurements .size-table {
    width: 100%;

    align-self: center;

    margin-left: 0;

    border: 1px solid var(--line);
  }

  #measurements .size-table h3 {
    margin: 0;

    padding: 18px 12px;

    background: #050505;
    color: #fff;

    font-size: 16px;
    text-align: center;
  }

  #measurements .size-table .r {
    display: grid;
    grid-template-columns: .75fr 1fr;
  }

  #measurements .size-table span {
    padding: 18px 12px;

    border-top: 1px solid var(--line);

    font-size: 14px;
    text-align: center;
  }

  #measurements .size-table span + span {
    border-left: 1px solid var(--line);
  }

}


/* Medium desktop: preserve the same concept with slightly smaller values */
@media (min-width: 901px) and (max-width: 1320px) {

  #measurements .measure-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      210px;

    column-gap: 8px;
  }

  #measurements .measure-card img {
    height: 220px;
  }

  #measurements .size-table h3 {
    padding: 16px 10px;
    font-size: 14px;
  }

  #measurements .size-table span {
    padding: 16px 10px;
    font-size: 13px;
  }

}


/* ============================================================
   SECTION 02 / MEASUREMENTS — LARGER IMAGES V2
   ------------------------------------------------------------
   Final override placed at the end of styles.css.

   Only the X / Y / Z graphics are enlarged further.
   Table size and the rest of the page remain unchanged.

   NOTEPAD++:
   search for "MEASUREMENTS — LARGER IMAGES V2"
   ============================================================ */

@media (min-width: 1321px) {

  #measurements .measure-card img {
    height: 310px;
  }

}

@media (min-width: 901px) and (max-width: 1320px) {

  #measurements .measure-card img {
    height: 270px;
  }

}


/* ============================================================
   SECTION 02 / MEASUREMENTS — FINAL LAYOUT
   ------------------------------------------------------------
   FINAL desktop layout based on the approved reference:

   [ X ] [ Y ] [ Z ] [ SIZE TABLE ]

   Requirements:
   - large X / Y / Z graphics
   - cards close to each other
   - large table at the end
   - compact overall section height
   - black sidebar unchanged
   - all other sections unchanged

   NOTEPAD++:
   search for "SECTION 02 / MEASUREMENTS — FINAL LAYOUT"
   ============================================================ */

@media (min-width: 1321px) {

  #measurements .content {
    padding: 24px 16px 0;
  }

  #measurements .measure-grid {
    display: grid;

    /* 3 equal measurement cards + large table */
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      400px;

    column-gap: 0;
    align-items: stretch;
  }

  #measurements .measure-card {
    min-width: 0;

    padding: 8px 18px 0;

    border-right: 1px solid var(--line);

    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
  }

  #measurements .measure-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    font-size: 12px;
    font-weight: 900;
    line-height: 1.05;
  }

  #measurements .measure-head b {
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
  }

  #measurements .measure-value {
    margin: 8px 0 0;

    font-size: 29px;
    line-height: 1;

    color: var(--red);
  }

  #measurements .measure-card img {
    width: 100%;
    height: 285px;

    margin-top: 0;

    object-fit: contain;
    object-position: center bottom;
  }

  #measurements .size-table {
    width: 100%;
    max-width: none;

    align-self: start;

    margin: 0 0 0 14px;

    border: 1px solid var(--line);
  }

  #measurements .size-table h3 {
    margin: 0;

    padding: 28px 16px;

    background: #050505;
    color: #fff;

    font-size: 24px;
    line-height: 1;

    text-align: center;
  }

  #measurements .size-table .r {
    display: grid;
    grid-template-columns: 0.78fr 1fr;
  }

  #measurements .size-table span {
    min-height: 84px;

    padding: 26px 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-top: 1px solid var(--line);

    font-size: 19px;
    line-height: 1;

    text-align: center;
  }

  #measurements .size-table span + span {
    border-left: 1px solid var(--line);
  }

}


/* Medium desktop — same composition, scaled proportionally */
@media (min-width: 901px) and (max-width: 1320px) {

  #measurements .content {
    padding: 20px 14px 0;
  }

  #measurements .measure-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      300px;

    column-gap: 0;
  }

  #measurements .measure-card {
    padding: 8px 14px 0;
  }

  #measurements .measure-card img {
    height: 235px;
  }

  #measurements .size-table {
    margin-left: 10px;
  }

  #measurements .size-table h3 {
    padding: 22px 12px;
    font-size: 19px;
  }

  #measurements .size-table span {
    min-height: 70px;
    padding: 20px 12px;
    font-size: 16px;
  }

}


/* ============================================================
   SECTION 02 / MEASUREMENTS — TABLE ALIGNMENT V4
   ------------------------------------------------------------
   Final correction requested:
   - the vertical divider line and the table start in the same place
   - the table sits on the bottom edge of the measurements block
   - the table is slightly narrower
   - only Section 02 is affected

   NOTEPAD++:
   search for "TABLE ALIGNMENT V4"
   ============================================================ */

@media (min-width: 1321px) {

  #measurements .measure-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      350px;

    column-gap: 0;
  }

  /* Remove the artificial left offset so the table starts exactly
     on the vertical divider created by the Z card */
  #measurements .size-table {
    width: 100%;
    max-width: none;

    margin: 0;

    align-self: end;
    justify-self: stretch;

    border: 1px solid var(--line);
    border-left: 0;
  }

  /* The table column visually continues the same vertical line */
  #measurements .measure-card:nth-child(3) {
    border-right: 1px solid var(--line);
  }

  /* Keep the bottom of the table visually aligned with
     the bottom edge of the measurements row */
  #measurements .measure-grid {
    align-items: stretch;
  }

  #measurements .size-table {
    margin-bottom: 0;
  }

}


/* Medium desktop */
@media (min-width: 901px) and (max-width: 1320px) {

  #measurements .measure-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      270px;

    column-gap: 0;
  }

  #measurements .size-table {
    width: 100%;
    margin: 0;
    align-self: end;
    border-left: 0;
  }

}


/* ============================================================
   SECTION 02 / MEASUREMENTS — COLUMN LINE ALIGNMENT V5
   ------------------------------------------------------------
   Final correction:
   the vertical line immediately LEFT of SIZE TABLE is shifted
   left so it aligns with the vertical divider in Section 01
   directly above it.

   Only Section 02 is affected.

   NOTEPAD++:
   search for "COLUMN LINE ALIGNMENT V5"
   ============================================================ */

@media (min-width: 1321px) {

  /* Shift the beginning of the SIZE TABLE column 24px left.
     The table itself remains slightly narrower. */
  #measurements .measure-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, calc(1fr - 24px))
      330px;

    column-gap: 0;
  }

  #measurements .size-table {
    width: 330px;
    max-width: 330px;

    margin: 0;

    justify-self: start;
    align-self: end;

    border-left: 1px solid var(--line);
  }

  /* The Z card divider becomes the exact table start line */
  #measurements .measure-card:nth-child(3) {
    border-right: 0;
  }

}


/* Medium desktop */
@media (min-width: 901px) and (max-width: 1320px) {

  #measurements .measure-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, calc(1fr - 18px))
      255px;

    column-gap: 0;
  }

  #measurements .size-table {
    width: 255px;
    max-width: 255px;

    margin: 0;

    justify-self: start;
    align-self: end;

    border-left: 1px solid var(--line);
  }

  #measurements .measure-card:nth-child(3) {
    border-right: 0;
  }

}


/* ============================================================
   SECTION 02 / MEASUREMENTS — VERTICAL LINE RESTORED V6
   ------------------------------------------------------------
   Restores the missing vertical divider before SIZE TABLE.

   The line is drawn independently from the table border so it
   remains visible through the full height of the measurement block.

   NOTEPAD++:
   search for "VERTICAL LINE RESTORED V6"
   ============================================================ */

@media (min-width: 1321px) {

  #measurements .measure-grid {
    position: relative;
  }

  /* Full-height vertical divider exactly at the start of SIZE TABLE */
  #measurements .measure-grid::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    /* SIZE TABLE width = 330px */
    right: 330px;

    width: 1px;

    background: var(--line);

    pointer-events: none;
    z-index: 3;
  }

  /* Avoid a double line on the table itself */
  #measurements .size-table {
    border-left: 0;
  }

}


/* Medium desktop */
@media (min-width: 901px) and (max-width: 1320px) {

  #measurements .measure-grid {
    position: relative;
  }

  #measurements .measure-grid::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    /* SIZE TABLE width = 255px */
    right: 255px;

    width: 1px;

    background: var(--line);

    pointer-events: none;
    z-index: 3;
  }

  #measurements .size-table {
    border-left: 0;
  }

}


/* ============================================================
   SECTION 02 / MEASUREMENTS — DIVIDER SHIFT LEFT V7
   ------------------------------------------------------------
   Only the long vertical divider is moved LEFT.
   The SIZE TABLE stays in its current position and size.

   Desktop:
   previous line position: 330px from right
   new line position:      438px from right

   NOTEPAD++:
   search for "DIVIDER SHIFT LEFT V7"
   ============================================================ */

@media (min-width: 1321px) {

  #measurements .measure-grid::after {
    right: 438px;
  }

}


/* Medium desktop */
@media (min-width: 901px) and (max-width: 1320px) {

  #measurements .measure-grid::after {
    right: 335px;
  }

}


/* ============================================================
   SECTION 02 / MEASUREMENTS — TABLE LEFT BORDER RESTORED V8
   ------------------------------------------------------------
   The long vertical guide/divider stays in the moved-left position,
   but the SIZE TABLE gets its own LEFT BORDER back.

   This restores the missing side of the table without moving
   the table or the long divider.

   NOTEPAD++:
   search for "TABLE LEFT BORDER RESTORED V8"
   ============================================================ */

@media (min-width: 1321px) {

  #measurements .size-table {
    border-left: 1px solid var(--line);
  }

}

@media (min-width: 901px) and (max-width: 1320px) {

  #measurements .size-table {
    border-left: 1px solid var(--line);
  }

}


/* ============================================================
   SECTION 03 / CONSTRUCTION & MATERIALS — 3 ROWS x 3 COLUMNS
   ------------------------------------------------------------
   FINAL SECTION 03 CONTROL

   Layout:
   ROW 1: OUTER SHELL | INNER SHELL | VISOR TOP
   ROW 2: VISOR UNDER | CLOSURE     | EYELETS
   ROW 3: STITCHING   | SWEATBAND   | APPLICATION

   Only Section 03 is changed.
   All graphics remain separate <img> assets.

   NOTEPAD++ SEARCH:
   "SECTION 03 / CONSTRUCTION & MATERIALS — 3 ROWS x 3 COLUMNS"
   ============================================================ */

#construction .content{
  padding:0;
}

#construction .construction-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(270px,auto));
  width:100%;
  min-height:810px;
  background:#fff;
}

#construction .construction-card{
  min-width:0;
  min-height:270px;
  padding:20px 24px 18px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  align-items:start;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

/* Remove outside borders on last column and last row */
#construction .construction-card:nth-child(3n){
  border-right:0;
}

#construction .construction-card:nth-child(n+7){
  border-bottom:0;
}

#construction .construction-copy h3{
  margin:0 0 7px;
  font-size:12px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

#construction .construction-copy p{
  margin:0;
  font-size:11px;
  line-height:1.3;
  color:#555;
}

#construction .construction-card > img{
  width:100%;
  height:205px;
  margin-top:8px;
  object-fit:contain;
  object-position:center center;
}

/* More compact graphic handling for the smallest construction assets */
#construction .construction-card:nth-child(6) > img,
#construction .construction-card:nth-child(7) > img,
#construction .construction-card:nth-child(8) > img{
  height:170px;
}

/* APPLICATION — third card in third row */
#construction .construction-card-application{
  grid-template-rows:auto minmax(0,1fr) auto;
}

#construction .construction-card-application .application-logo{
  width:86%;
  height:120px;
  margin:12px 0 0;
  object-fit:contain;
  object-position:left center;
}

#construction .application-colour{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:8px;
}

#construction .application-swatch{
  flex:0 0 auto;
  width:54px;
  height:54px;
  background:#b72b31;
}

#construction .application-colour small,
#construction .application-colour strong{
  display:block;
}

#construction .application-colour small{
  margin-bottom:4px;
  font-size:10px;
  color:#555;
}

#construction .application-colour strong{
  font-size:12px;
  line-height:1.2;
}


/* Medium screens — preserve the 3-column concept, just scale cards */
@media (min-width:901px) and (max-width:1320px){

  #construction .construction-grid{
    grid-template-rows:repeat(3,minmax(235px,auto));
    min-height:705px;
  }

  #construction .construction-card{
    min-height:235px;
    padding:16px 18px 14px;
  }

  #construction .construction-card > img{
    height:165px;
  }

  #construction .construction-card:nth-child(6) > img,
  #construction .construction-card:nth-child(7) > img,
  #construction .construction-card:nth-child(8) > img{
    height:140px;
  }

  #construction .construction-card-application .application-logo{
    height:96px;
  }

}


/* Tablet / mobile — stack cleanly without changing other sections */
@media (max-width:900px){

  #construction .construction-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    min-height:0;
  }

  #construction .construction-card{
    min-height:230px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  #construction .construction-card:nth-child(3n){
    border-right:1px solid var(--line);
  }

  #construction .construction-card:nth-child(2n){
    border-right:0;
  }

  #construction .construction-card:nth-child(n+7){
    border-bottom:1px solid var(--line);
  }

}

@media (max-width:600px){

  #construction .construction-grid{
    grid-template-columns:1fr;
  }

  #construction .construction-card,
  #construction .construction-card:nth-child(2n),
  #construction .construction-card:nth-child(3n){
    border-right:0;
  }

  #construction .construction-card:last-child{
    border-bottom:0;
  }

}


/* ============================================================
   SECTION 03 / COLOUR SWATCHES V2
   ------------------------------------------------------------
   Adds the approved colour information to EVERY construction card.

   Navy components:
   - OUTER SHELL
   - INNER SHELL
   - VISOR TOP
   - VISOR UNDER
   - CLOSURE
   - EYELETS
   - STITCHING
   - SWEATBAND

   Application keeps its separate embroidery colour:
   PMS 188 C

   NOTEPAD++ SEARCH:
   "SECTION 03 / COLOUR SWATCHES V2"
   ============================================================ */

#construction .construction-card:not(.construction-card-application){
  grid-template-rows:auto minmax(0,1fr) auto;
}

#construction .construction-colour{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:58px;
  margin-top:8px;
}

#construction .construction-swatch{
  display:block;
  flex:0 0 auto;
  width:54px;
  height:54px;

  /* Deep Blue / Cloud-77 visual swatch */
  background:#294a63;
  border:1px solid rgba(0,0,0,.08);
}

#construction .construction-colour > span:last-child{
  font-size:12px;
  line-height:1.2;
  color:#111;
}

/* Application red swatch remains visually consistent in size */
#construction .application-swatch{
  width:54px;
  height:54px;
  background:#b72b31;
  border:1px solid rgba(0,0,0,.08);
}

/* Keep graphics from colliding with the new colour rows */
#construction .construction-card > img{
  min-height:0;
}

@media (min-width:901px) and (max-width:1320px){

  #construction .construction-colour{
    min-height:48px;
    gap:11px;
  }

  #construction .construction-swatch,
  #construction .application-swatch{
    width:46px;
    height:46px;
  }

  #construction .construction-colour > span:last-child{
    font-size:11px;
  }

}


/* ============================================================
   SECTION 03 / GENERAL VISOR CARD V1
   ------------------------------------------------------------
   Rebuilds ONLY the former VISOR TOP card (row 1 / column 3).

   The global 3x3 Construction grid is NOT changed.
   The card keeps exactly one grid cell.

   Layout inside the card:
   LEFT:
   - VISOR / Cotton / Cloud-77
   - TOP / Embroidery colour / PMS 188 C
   - TOP / Embroidery colour / PMS 188 C
   - VISOR / Suede effect / Cloud-77

   RIGHT:
   - visor-top.png
   - visor-under.png

   NOTEPAD++ SEARCH:
   "SECTION 03 / GENERAL VISOR CARD V1"
   ============================================================ */

#construction .construction-card-visor{
  /* Override the generic construction-card grid only for this card */
  display:grid;
  grid-template-columns:minmax(165px,.82fr) minmax(0,1.55fr);
  grid-template-rows:1fr;
  gap:18px;

  min-width:0;
  padding:18px 20px 16px;
  align-items:stretch;
}

/* The generic colour-row rule must not create an extra third row here */
#construction .construction-card-visor{
  grid-template-rows:1fr;
}

#construction .visor-summary-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

#construction .construction-card-visor .construction-copy h3{
  margin:0 0 5px;
}

#construction .construction-card-visor .construction-copy p{
  margin:0;
}

#construction .visor-application-row{
  width:100%;
  margin-top:16px;
}

#construction .visor-application-label{
  margin-bottom:7px;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

#construction .visor-application-colour{
  display:flex;
  align-items:center;
  gap:10px;
}

#construction .visor-red-swatch{
  display:block;
  flex:0 0 auto;
  width:46px;
  height:46px;
  background:#b72b31;
  border:1px solid rgba(0,0,0,.08);
}

#construction .visor-application-colour small,
#construction .visor-application-colour strong{
  display:block;
}

#construction .visor-application-colour small{
  margin:0 0 2px;
  color:#666;
  font-size:9px;
  line-height:1.15;
}

#construction .visor-application-colour strong{
  font-size:10px;
  line-height:1.1;
  font-weight:900;
}

#construction .visor-summary-footer{
  margin-top:13px;
}

#construction .visor-summary-footer strong,
#construction .visor-summary-footer small{
  display:block;
}

#construction .visor-summary-footer strong{
  margin-bottom:4px;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
}

#construction .visor-summary-footer small{
  color:#666;
  font-size:9px;
  line-height:1.2;
}

#construction .visor-summary-visuals{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:center;
  justify-items:center;
}

/* Important: direct-child generic image rules do not affect these images */
#construction .visor-summary-visuals img{
  width:100%;
  height:195px;
  margin:0;
  object-fit:contain;
  object-position:center center;
}

/* Medium desktop: keep the same internal composition */
@media (min-width:901px) and (max-width:1320px){
  #construction .construction-card-visor{
    grid-template-columns:minmax(135px,.82fr) minmax(0,1.45fr);
    gap:12px;
    padding:15px 16px 13px;
  }

  #construction .visor-application-row{
    margin-top:11px;
  }

  #construction .visor-red-swatch{
    width:38px;
    height:38px;
  }

  #construction .visor-summary-visuals{
    gap:7px;
  }

  #construction .visor-summary-visuals img{
    height:150px;
  }
}

/* Mobile: only this card stacks internally; Section 03 responsive grid stays intact */
@media (max-width:900px){
  #construction .construction-card-visor{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
  }

  #construction .visor-summary-visuals img{
    height:170px;
  }
}


/* ============================================================
   SECTION 03 / VISOR SINGLE IMAGE V2
   ------------------------------------------------------------
   Removes the unnecessary second VISOR graphic.
   The VISOR card keeps the same outer 3x3 grid cell and layout.

   NOTEPAD++ SEARCH:
   "SECTION 03 / VISOR SINGLE IMAGE V2"
   ============================================================ */

#construction .visor-summary-visuals{
  grid-template-columns:1fr;
  justify-items:center;
  align-items:center;
}

#construction .visor-summary-visuals img{
  width:100%;
  max-width:360px;
  height:205px;
  object-fit:contain;
  object-position:center center;
}

@media (min-width:901px) and (max-width:1320px){
  #construction .visor-summary-visuals img{
    max-width:290px;
    height:160px;
  }
}

@media (max-width:900px){
  #construction .visor-summary-visuals img{
    max-width:320px;
    height:170px;
  }
}


/* ============================================================
   SECTION 03 / EXACT GREEN FRAME LAYOUT V1
   ------------------------------------------------------------
   This is the FINAL OVERRIDE for Section 03 only.

   Desktop grid:
   ROW 1: OUTER SHELL | INNER SHELL | VISOR
   ROW 2: EYELETS     | CLOSURE     | APPLICATION
   ROW 3: EMPTY       | APPLICATION | EMPTY

   Target proportions copied from the approved green-frame mockup:
   - 3 equal columns
   - row 1 ≈ 255 px
   - row 2 ≈ 255 px
   - row 3 ≈ 235 px
   - very compact technical typography
   - red PMS 188 C swatches
   - large technical drawings on the right side

   IMPORTANT:
   This block is intentionally at the END of styles.css
   and is scoped only to #construction.

   NOTEPAD++ SEARCH:
   "SECTION 03 / EXACT GREEN FRAME LAYOUT V1"
   ============================================================ */

#construction .content{
  padding:0 !important;
  overflow:hidden;
}

#construction .construction-layout-exact{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:255px 255px 235px;

  width:100%;
  min-height:745px;

  background:#fff;
}

#construction .construction-exact-card,
#construction .construction-exact-empty{
  position:relative;
  min-width:0;
  min-height:0;

  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);

  background:#fff;
  overflow:hidden;
}

/* right edge */
#construction .construction-layout-exact > :nth-child(3n){
  border-right:0;
}

/* last row */
#construction .construction-layout-exact > :nth-child(n+7){
  border-bottom:0;
}


/* ------------------------------------------------------------
   TYPOGRAPHY — deliberately compact to match the approved mockup
   ------------------------------------------------------------ */

#construction .construction-exact-heading h3{
  margin:0 0 4px;

  font-size:10px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:.035em;
  text-transform:uppercase;
}

#construction .construction-exact-heading p{
  margin:0;

  font-size:8px;
  line-height:1.2;
  color:#5f5f5b;
}

#construction .construction-exact-copy{
  min-width:0;
}

#construction .construction-exact-detail{
  margin-top:10px;
}

#construction .construction-exact-detail > strong,
#construction .construction-exact-footer > strong{
  display:block;

  margin:0 0 4px;

  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.025em;
  text-transform:uppercase;
}

#construction .construction-exact-note{
  display:block;

  margin:-1px 0 5px;

  font-size:7px;
  line-height:1.15;
  color:#64645f;
}

#construction .construction-exact-footer{
  margin-top:9px;
}

#construction .construction-exact-footer small{
  display:block;

  font-size:7px;
  line-height:1.15;
  color:#64645f;
}


/* ------------------------------------------------------------
   PMS 188 C COLOUR ROW
   ------------------------------------------------------------ */

#construction .construction-exact-colour{
  display:flex;
  align-items:center;
  gap:7px;
}

#construction .construction-exact-red{
  display:block;
  flex:0 0 auto;

  width:34px;
  height:34px;

  background:#1D2941;
  border:1px solid rgba(0,0,0,.07);
}

#construction .construction-exact-colour small,
#construction .construction-exact-colour b{
  display:block;
}

#construction .construction-exact-colour small{
  margin:0 0 1px;

  font-size:6px;
  line-height:1.05;
  color:#686864;
}

#construction .construction-exact-colour b{
  font-size:7px;
  line-height:1.05;
  font-weight:900;
}


/* ------------------------------------------------------------
   FEATURE CARDS — copy LEFT / technical image RIGHT
   ------------------------------------------------------------ */

#construction .construction-exact-feature{
  display:grid;
  grid-template-columns:145px minmax(0,1fr);
  gap:10px;

  padding:14px 18px 12px;
}

#construction .construction-exact-visual{
  min-width:0;
  min-height:0;

  display:flex;
  align-items:center;
  justify-content:center;
}

#construction .construction-exact-visual img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center center;
}

/* OUTER SHELL */
#construction .construction-layout-exact > article:nth-child(1) .construction-exact-visual{
  padding:25px 6px 18px 0;
}

#construction .construction-layout-exact > article:nth-child(1) .construction-exact-visual img{
  max-width:345px;
  max-height:185px;
}

/* INNER SHELL */
#construction .construction-exact-visual-inner{
  padding:12px 24px 8px 0;
}

#construction .construction-exact-visual-inner img{
  max-width:230px;
  max-height:210px;
}

/* VISOR */
#construction .construction-exact-visual-visor{
  padding:12px 2px 8px 0;
}

#construction .construction-exact-visual-visor img{
  max-width:350px;
  max-height:195px;
}

/* VISOR has three detail groups, so keep spacing tighter */
#construction .construction-layout-exact > article:nth-child(3) .construction-exact-detail{
  margin-top:8px;
}

#construction .construction-layout-exact > article:nth-child(3) .construction-exact-red{
  width:32px;
  height:32px;
}


/* ------------------------------------------------------------
   ROW 02 / EYELETS
   ------------------------------------------------------------ */

#construction .construction-exact-standard{
  display:grid;
  grid-template-columns:145px minmax(0,1fr);
  gap:10px;

  padding:14px 18px 12px;
}

#construction .construction-exact-visual-eyelet{
  padding:10px 30px 0 0;
}

#construction .construction-exact-visual-eyelet img{
  width:100%;
  max-width:250px;
  max-height:175px;
  object-fit:contain;
}


/* ------------------------------------------------------------
   ROW 02 / CLOSURE
   ------------------------------------------------------------ */

#construction .construction-exact-visual-closure{
  padding:15px 18px 8px 0;
}

#construction .construction-exact-visual-closure img{
  max-width:250px;
  max-height:190px;
}


/* ------------------------------------------------------------
   APPLICATION CARDS
   ------------------------------------------------------------ */

#construction .construction-exact-application{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;

  padding:14px 20px 15px;
}

#construction .construction-exact-logo{
  width:92%;
  height:105px;

  margin:8px 0 0;

  object-fit:contain;
  object-position:left center;
}

#construction .construction-exact-application-colour{
  margin-top:6px;
}

#construction .construction-exact-application-bottom{
  grid-template-rows:auto minmax(0,1fr);

  padding:14px 25px 16px;
}

#construction .construction-exact-application-bottom .construction-exact-logo{
  width:92%;
  height:120px;
  margin-top:12px;
}


/* ------------------------------------------------------------
   EMPTY CELLS — intentional, preserve exact grid geometry
   ------------------------------------------------------------ */

#construction .construction-exact-empty{
  background:#fff;
}


/* ------------------------------------------------------------
   MEDIUM DESKTOP
   Same visual logic, scaled down without changing other sections.
   ------------------------------------------------------------ */

@media (min-width:901px) and (max-width:1320px){

  #construction .construction-layout-exact{
    grid-template-rows:230px 230px 210px;
    min-height:670px;
  }

  #construction .construction-exact-feature,
  #construction .construction-exact-standard{
    grid-template-columns:125px minmax(0,1fr);
    gap:8px;
    padding:12px 14px 10px;
  }

  #construction .construction-exact-heading h3{
    font-size:9px;
  }

  #construction .construction-exact-heading p{
    font-size:7px;
  }

  #construction .construction-exact-red{
    width:30px;
    height:30px;
  }

  #construction .construction-exact-logo{
    height:92px;
  }

}


/* ------------------------------------------------------------
   TABLET / MOBILE
   Keeps every object readable; no changes outside Section 03.
   ------------------------------------------------------------ */

@media (max-width:900px){

  #construction .construction-layout-exact{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:0;
  }

  #construction .construction-exact-card,
  #construction .construction-exact-empty{
    min-height:240px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  #construction .construction-exact-empty{
    display:none;
  }

  #construction .construction-exact-feature,
  #construction .construction-exact-standard{
    grid-template-columns:150px minmax(0,1fr);
  }

  #construction .construction-layout-exact > :last-child{
    border-bottom:0;
  }

}


/* ============================================================
   SECTION 03 / TYPOGRAPHY SCALE V2
   ------------------------------------------------------------
   Only typography in Section 03 is enlarged proportionally.
   Layout, grid, images, swatches and spacing remain unchanged.

   NOTEPAD++ SEARCH:
   "SECTION 03 / TYPOGRAPHY SCALE V2"
   ============================================================ */

/* Main card headings */
#construction .construction-exact-heading h3{
  font-size:13px;
  line-height:1.08;
}

/* Main card subtitles */
#construction .construction-exact-heading p{
  font-size:14px;
  line-height:1.25;
}

/* Labels: TOP / STITCHING / SWEATBAND / VISOR */
#construction .construction-exact-detail > strong,
#construction .construction-exact-footer > strong{
  font-size:12px;
  line-height:1.05;
}

/* Secondary notes: To match panel / 3mm foam backed / etc. */
#construction .construction-exact-note{
  font-size:9px;
  line-height:1.2;
}

/* Footer material note under VISOR */
#construction .construction-exact-footer small{
  font-size:9px;
  line-height:1.2;
}

/* Text next to PMS swatches */
#construction .construction-exact-colour small{
  font-size:12px;
  line-height:0.9;
}

/* PMS 188 C */
#construction .construction-exact-colour b{
  font-size:10px;
  line-height:1.1;
}

/* Keep the black sidebar consistent with the rest of the site */
#construction .side .kicker{
  font-size:12px;
}

#construction .side h2{
  font-size:clamp(48px,2.8vw,58px);
}

#construction .side p{
  font-size:16px;
  line-height:1.4;
}


/* Medium desktop — proportional reduction, still larger than before */
@media (min-width:901px) and (max-width:1320px){

  #construction .construction-exact-heading h3{
    font-size:12px;
  }

  #construction .construction-exact-heading p{
    font-size:9px;
  }

  #construction .construction-exact-detail > strong,
  #construction .construction-exact-footer > strong{
    font-size:11px;
  }

  #construction .construction-exact-note,
  #construction .construction-exact-footer small{
    font-size:8px;
  }

  #construction .construction-exact-colour small{
    font-size:7px;
  }

  #construction .construction-exact-colour b{
    font-size:9px;
  }

}


/* ============================================================
   SECTION 01 / PANTONE 533 C COLOUR ROW
   ------------------------------------------------------------
   Replaces the old:
   [blue square] Phanton 7334

   with:
   [navy square] Embroidery colour
                 PANTONE 533 C

   This styling affects ONLY the colour row inside Section 01.
   Section 03 remains untouched.

   NOTEPAD++ SEARCH:
   "SECTION 01 / PANTONE 533 C COLOUR ROW"
   ============================================================ */

#overview .overview-pantone-colour{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:9px;
}

/* Swatch colour: HEX #1D2941 */
#overview .overview-pantone-colour .construction-exact-red{
  display:block;
  flex:0 0 auto;

  width:34px;
  height:34px;

  background:#1D2941;
  border:1px solid rgba(0,0,0,.07);
}

#overview .overview-pantone-colour small,
#overview .overview-pantone-colour b{
  display:block;
  margin:0;
}

#overview .overview-pantone-colour small{
  font-size:12px;
  line-height:0.9;
  color:#686864;
}

#overview .overview-pantone-colour b{
  margin-top:2px;
  font-size:10px;
  line-height:1.1;
  font-weight:900;
  color:#111;
}


/* ============================================================
   SECTION 03 / INNER SHELL / TRIM — TWO COLOURS
   ============================================================ */
#construction .construction-exact-two-colours{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:nowrap;
}
#construction .construction-exact-two-colours .construction-exact-colour{
  margin-top:0;
}
#construction .construction-exact-red-186{
  background:#D81416;
}
#construction .construction-exact-blue-533{
  background:#1D2941;
}


/* ============================================================
   SECTION 03 / LABELS — TWO LARGE IMAGES
   ------------------------------------------------------------
   Changes ONLY the LABELS card in row 03 / column 02.

   Goal:
   - two separate image slots
   - both images large
   - both images editable independently in index.html
   - keep the whole Section 03 grid unchanged

   NOTEPAD++ SEARCH:
   "SECTION 03 / LABELS — TWO LARGE IMAGES"
   ============================================================ */

#construction .construction-exact-labels{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);

  padding:14px 18px 14px;
}

/* Two equal large image columns */
#construction .construction-exact-labels-grid{
  min-width:0;
  min-height:0;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:16px;

  margin-top:10px;
  align-items:stretch;
}

/* Each image gets its own independent slot */
#construction .construction-exact-label-image{
  min-width:0;
  min-height:0;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

/* Large artwork inside the LABELS cell */
#construction .construction-exact-label-image img{
  display:block;

  width:100%;
  height:100%;

  min-height:170px;
  max-height:205px;

  object-fit:contain;
  object-position:center center;
}

/* Medium desktop */
@media (min-width:901px) and (max-width:1320px){

  #construction .construction-exact-labels{
    padding:12px 14px 12px;
  }

  #construction .construction-exact-labels-grid{
    gap:12px;
    margin-top:8px;
  }

  #construction .construction-exact-label-image img{
    min-height:145px;
    max-height:180px;
  }

}

/* Mobile */
@media (max-width:900px){

  #construction .construction-exact-labels-grid{
    grid-template-columns:1fr;
  }

  #construction .construction-exact-label-image img{
    min-height:180px;
    max-height:220px;
  }

}


/* ============================================================
   SECTION 03 / APPLICATION — THREE COLOURS
   ------------------------------------------------------------
   Changes ONLY the APPLICATION card in row 02 / column 03.

   The three colour entries are displayed in one horizontal row.
   Existing Section 03 grid and image sizing remain unchanged.

   NOTEPAD++ SEARCH:
   "SECTION 03 / APPLICATION — THREE COLOURS"
   ============================================================ */

#construction .construction-exact-application-colours{
  display:flex;
  align-items:flex-end;
  gap:28px;
  flex-wrap:nowrap;
  margin-top:6px;
}

#construction .construction-exact-application-colours
.construction-exact-application-colour{
  margin-top:0;
  flex:0 0 auto;
}

/* Third colour — edit ONLY this value once the Pantone is confirmed */
#construction .construction-exact-colour-03{
  background:#ffffff;
  border:1px solid #bdbdb8;
}

/* Keep all three labels readable inside the current APPLICATION box */
#construction .construction-exact-application-colours
.construction-exact-colour small{
  white-space:nowrap;
}

#construction .construction-exact-application-colours
.construction-exact-colour b{
  white-space:nowrap;
}

@media (min-width:901px) and (max-width:1320px){

  #construction .construction-exact-application-colours{
    gap:18px;
  }

}

@media (max-width:900px){

  #construction .construction-exact-application-colours{
    flex-wrap:wrap;
    gap:14px 22px;
  }

}


/* ============================================================
   SECTION 04 / BRANDING & PLACEMENT — LARGE 3 COLUMN LAYOUT
   ------------------------------------------------------------
   Desktop: three equal, tall columns with large readable images.
   Only Section 04 is affected.
   ============================================================ */
@media (min-width: 901px) {
  #branding .content {
    padding: 0;
  }

  #branding .brand-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 720px;
    width: 100%;
    align-items: stretch;
  }

  #branding .brand-card {
    min-width: 0;
    min-height: 720px;
    padding: 18px 20px 24px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    overflow: hidden;
  }

  #branding .brand-card:last-child {
    border-right: 0;
  }

  #branding .brand-copy {
    position: relative;
    z-index: 2;
    padding-top: 0;
  }

  #branding .brand-copy h3 {
    margin: 0 0 24px;
    color: var(--red);
    font-size: 14px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  #branding .brand-copy dl {
    margin: 0;
    display: grid;
    gap: 18px;
  }

  #branding .brand-copy dt {
    margin: 0;
    color: #666;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  #branding .brand-copy dd {
    margin: 5px 0 0;
    font-size: 11px;
    line-height: 1.35;
  }

  #branding .brand-visual {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #branding .brand-visual img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
  }
}

@media (min-width: 901px) and (max-width: 1320px) {
  #branding .brand-grid { min-height: 600px; }
  #branding .brand-card {
    min-height: 600px;
    grid-template-columns: 120px minmax(0, 1fr);
    padding: 15px 16px 20px;
    gap: 12px;
  }
}



/* ============================================================
   HEAD & CAP TECH-PACK MICRO TYPOGRAPHY
   Clear, neutral small-label system across the entire tech pack.
   ============================================================ */

.subhero .eyebrow,
.side .kicker,
.spec span,
.view .label,
.citem h3,
.mini h3,
.brand-copy h3,
.brand-copy dt,
#construction .construction-copy h3,
#construction .visor-application-label,
#construction .construction-exact-heading,
#construction .construction-exact-subheading {
  font-family:var(--hc-micro);
  font-weight:700;
  color:#555550;
}

.subhero .eyebrow {
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.2;
  color:#555550;
}

.side .kicker,
.spec span,
.view .label,
.citem h3,
.mini h3,
.brand-copy h3,
.brand-copy dt,
#construction .construction-copy h3,
#construction .visor-application-label,
#construction .construction-exact-heading,
#construction .construction-exact-subheading {
  font-size:11px;
  letter-spacing:.05em;
  line-height:1.25;
}



/* ============================================================
   FINAL HEADER LOCK — MATCH HOMEPAGE
   Do not remove. This is intentionally the last header override.
   ============================================================ */

@media (min-width:901px){
  .site-header.header{
    height:78px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 !important;
  }

  .site-header.header.scrolled{
    height:68px !important;
  }

  .site-header .header-inner{
    width:100% !important;
    padding:0 clamp(24px,5vw,88px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .site-header .logo.brand{
    width:166px !important;
    min-width:166px !important;
    max-width:166px !important;
    flex:0 0 166px !important;
  }

  .site-header .logo.brand img{
    display:block !important;
    width:166px !important;
    max-width:166px !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .site-header .nav.top-nav{
    margin-left:auto !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:32px !important;
    padding:0 !important;
  }

  .site-header .nav.top-nav > a{
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:.04em !important;
  }

  .site-header .nav.top-nav > .nav-cta.header-cta{
    padding:13px 18px !important;
    background:#070707 !important;
    color:#fff !important;
  }

  .site-header .nav.top-nav > .nav-cta.header-cta:hover{
    background:var(--red) !important;
  }
}