/* ==========================================================================
   HYBRID OSB — centred and symmetric. A flagship, presented ceremonially.
   The opposite composition to S-OSB; the same stage.
   ========================================================================== */

/* --- HERO ----------------------------------------------------------------- */

.hhero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--nav-h) + clamp(60px, 12vh, 150px));
  padding-bottom: clamp(80px, 11vw, 170px);
}

.hhero__eyebrow { margin-bottom: clamp(26px, 3vw, 44px); }
.hhero__headline { max-width: min(14ch, 100%); }
.hhero__sub { margin-top: clamp(26px, 3vw, 42px); max-width: min(34ch, 100%); }

.hhero__para {
  margin-top: clamp(46px, 6vw, 84px);
  max-width: min(62ch, 100%);
  font-size: var(--fs-small);
}

.hhero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: clamp(34px, 4vw, 54px);
}


/* --- THE EVOLUTION -------------------------------------------------------- */

.evo__inner { padding-block: var(--sp-band); max-width: 1000px; margin-inline: auto; }

.evo__title { margin: 14px auto clamp(56px, 7vw, 100px); max-width: min(18ch, 100%); }

.evo__list { display: flex; flex-direction: column; }

.evo__item {
  padding-block: clamp(34px, 4vw, 58px);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(200px, 4fr) minmax(0, 8fr);
  gap: clamp(16px, 3vw, 50px);
  align-items: baseline;
}
.evo__item h3 { font-size: clamp(19px, 1.6vw, 26px); }
.evo__item p { font-size: var(--fs-small); }

.evo__note {
  margin: clamp(50px, 6vw, 84px) auto 0;
  max-width: min(58ch, 100%);
  padding-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid var(--rule);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 400;
  font-size: 13px;
}

@media (max-width: 720px) {
  .evo__item { grid-template-columns: 1fr; row-gap: 14px; }
}


/* --- WHERE THE FLAGSHIP BELONGS ------------------------------------------- */

.belongs__title { margin: 14px auto clamp(56px, 7vw, 100px); max-width: min(18ch, 100%); }

.belongs__list {
  max-width: 900px;
  margin-inline: auto;
  border-top: 1px solid var(--rule);
}
.belongs__list li {
  display: grid;
  grid-template-columns: minmax(190px, 4fr) minmax(0, 7fr);
  gap: clamp(14px, 2.5vw, 44px);
  align-items: baseline;
  padding-block: clamp(20px, 2.2vw, 32px);
  border-bottom: 1px solid var(--rule);
}
.belongs__list span.dim { font-size: var(--fs-small); }

.belongs__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 25px);
  letter-spacing: -0.022em;
}

@media (max-width: 620px) {
  .belongs__list li { grid-template-columns: 1fr; row-gap: 6px; }
}


/* --- THE FIVE MOVEMENTS — one statement per viewport ---------------------- */

.movements { position: relative; }

.movements__rail {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--gutter);
  width: 1px;
  background: rgba(128, 128, 128, 0.28);
  z-index: 5;
}
.movements__rail span {
  position: absolute;
  inset: 0;
  background: var(--wood-light);
  transform: scaleY(0);
  transform-origin: top center;
}

.movement {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.movement__inner {
  padding-block: var(--sp-block);
  padding-left: clamp(28px, 5vw, 90px);
  max-width: 1100px;
}

.movement__title {
  margin: 18px 0 clamp(30px, 4vw, 50px);
  max-width: min(15ch, 100%);
}
.movement__inner .lead { max-width: min(52ch, 100%); }

@media (max-width: 860px) {
  .movement { min-height: 0; }
  .movement__inner { padding-block: var(--sp-band); }
  .movements__rail { display: none; }
}


/* --- CLOSE ---------------------------------------------------------------- */

.hclose__inner {
  padding-block: var(--sp-band);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hclose__micro { max-width: min(22ch, 100%); }
.hclose__ctas {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(40px, 5vw, 64px);
}

/* innovation and technology — the refined edge */
[data-page="hybrid-osb"] .plate,
[data-page="hybrid-osb"] 
/* objects on this page are made of its own material */
.object { --object-field: url("../assets/fields/edge.svg"); }


/* ==========================================================================
   FROM THE CATALOGUE
   Construction, specification, test results and applications, added when the
   OSB Hybrid Ply catalogue was supplied.
   ========================================================================== */

/* --- THE CONSTRUCTION — the page's signature moment ----------------------- */

.build { padding-block: 0; }
.build__pin {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: var(--sp-block);
}
.build__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
  align-items: center;
}
.build__aside { grid-column: 1 / span 4; }
.build__aside .index { margin-bottom: 8px; }
.build__title { margin: 18px 0 clamp(20px, 2.6vw, 32px); font-size: var(--fs-h2); max-width: min(11ch, 100%); }
.build__note { font-size: var(--fs-small); max-width: min(36ch, 100%); }

.stack {
  grid-column: 6 / span 7;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ply {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: clamp(13px, 1.5vw, 20px) clamp(18px, 2vw, 28px);
  background: var(--plate);
  border-left: 2px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.35vw, 20px);
  letter-spacing: -0.015em;
  color: var(--ink);
  will-change: transform, opacity;
}
/* the cross-laid centre is the one that does the structural work */
.ply--mid { border-left-color: var(--accent); }
.ply__n {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--label-ink);
  flex: 0 0 auto;
}

@media (max-width: 960px) {
  .build__aside, .stack { grid-column: 1 / -1; }
  .stack { margin-top: 44px; }
}
@media (max-width: 860px) { .build__pin { min-height: 0; padding-block: var(--sp-band); } }


/* --- specification + applications ----------------------------------------- */

.hspec__head, .happs__head, .tested__head { margin-bottom: clamp(50px, 7vw, 100px); }

.happs__shot { margin: clamp(56px, 7vw, 100px) 0 0; }
.happs__shot img {
  display: block; width: 100%;
  max-width: 620px; height: auto;
  margin-inline: auto;
}
.happs__shot figcaption { margin-top: 18px; text-align: center; }


/* --- the test table — prescribed against obtained ------------------------- */

.tested__intro { max-width: min(52ch, 100%); margin-bottom: clamp(40px, 5vw, 70px); }
.tested__note { margin-top: 26px; font-size: 13px; max-width: min(60ch, 100%); }

.tt { border-top: 1px solid var(--rule-strong); }
.tt__head, .tt__row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 2.5fr) minmax(0, 2.5fr);
  gap: clamp(14px, 2.5vw, 40px);
  align-items: baseline;
}
.tt__head { padding-block: 15px; border-bottom: 1px solid var(--rule); }
.tt__row  { padding-block: clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--rule); }

.tt__k { margin: 0; font-size: var(--fs-small); color: var(--ink); }
.tt__k em { font-style: normal; color: var(--dim); }
.tt__p, .tt__o {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  font-size: clamp(18px, 1.8vw, 27px);
}
.tt__p { color: var(--ink); opacity: 0.4; }
.tt__o { color: var(--accent); }
.tt__o span {
  display: inline-block;
  margin-left: 7px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  opacity: 0.75;
}

@media (max-width: 760px) {
  .tt__head { display: none; }
  .tt__row  { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .tt__k    { grid-column: 1 / -1; }
  .tt__p::before, .tt__o::before {
    display: block; margin-bottom: 4px;
    font-family: var(--font-body); font-weight: 700; font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75;
  }
  .tt__p::before { content: "Prescribed"; }
  .tt__o::before { content: "Obtained"; }
}

.hclose .dl { margin: clamp(40px, 5vw, 64px) 0 clamp(8px, 2vw, 18px); }

/* a row whose source figure is carried unaltered but needs confirming */
.tt__flag {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.tt__row--flag .tt__o { opacity: 0.75; }

/* the face, and the timber it came from */
.happs__pair {
  margin: clamp(50px, 6vw, 84px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 44px);
}
.happs__pair img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 620px) { .happs__pair { grid-template-columns: 1fr; } }


/* ==========================================================================
   THE OBJECT
   The hero is the board itself rather than a diagram of it. It sits on the
   ground, casts its own shadow, and is never framed or boxed.
   ========================================================================== */

.hobject {
  margin: clamp(52px, 6.5vw, 96px) auto clamp(10px, 2vw, 22px);
  max-width: min(430px, 74vw);
  text-align: center;
}
.hobject img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 42px 58px rgba(0, 0, 0, 0.62));
  will-change: transform, opacity;
}
.hobject figcaption { margin-top: clamp(24px, 3vw, 38px); }


/* ==========================================================================
   THE SEVEN LAYERS
   Not seven rows of specification. One board that separates into the layers
   it is actually made of, is read, and closes again. Thickness is set from
   the catalogue's own construction: the faces are thin, the cross-laid centre
   is the thickest, and the board is symmetrical about it.
   ========================================================================== */

.build7 {
  grid-column: 6 / span 7;
  /* the layer names hang outside the stack, so the stack gives up their room —
     without this they push the document wider than the viewport */
  list-style: none;
  margin: 0;
  padding: 0 clamp(150px, 22vw, 260px) 0 0;
  display: flex;
  flex-direction: column;
  perspective: 1500px;
  perspective-origin: 50% 45%;
}
.ply7 {
  position: relative;
  height: calc(var(--t) * clamp(9px, 1.5vw, 22px));
  display: flex;
  align-items: center;
  transform-style: preserve-3d;
  will-change: transform;
  /* real timber, not a flat fill */
  background: #6B573F url("../assets/veneers/faces/k6121an.webp") center / cover;
  box-shadow: 0 1px 0 rgba(255, 244, 226, 0.26) inset,
              0 6px 14px rgba(0, 0, 0, 0.42);
}
/* the faces are the finished outside; the cores and longitudinals sit below */
.ply7--face  { filter: brightness(1.06) saturate(1.04); }
.ply7--core  { filter: brightness(0.82) saturate(0.94); }
.ply7--long  { filter: brightness(0.70) saturate(0.88); }
/* the cross-laid centre runs the other way — the reason the board holds */
.ply7--cross {
  filter: brightness(0.62) saturate(0.84);
  background-size: cover;
  background-position: center;
  transform-origin: center;
}
.ply7--cross::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,0.22) 0 2px, rgba(0,0,0,0) 2px 9px);
}

.ply7__n, .ply7__t {
  position: absolute;
  left: calc(100% + 18px);
  white-space: nowrap;
  opacity: 0;
  will-change: opacity;
  font-family: var(--font-body);
}
.ply7__n {
  left: calc(100% + 18px);
  font-weight: 700; font-size: 10px; letter-spacing: 0.14em;
  color: var(--accent);
}
.ply7__t {
  left: calc(100% + 52px);
  font-weight: 400; font-size: 12px; color: var(--dim);
}

@media (max-width: 960px) {
  .build7 { grid-column: 1 / -1; margin-top: 44px; padding-right: 42%; }
  .ply7__t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ply7 { transform: none !important; }
  .ply7__n, .ply7__t { opacity: 1; }
}


/* ==========================================================================
   HERO — the object page
   Every other product page opens on a surface. This one opens on a thing: a
   machined block, lit from the side so the openings cut through its veneer
   face read as depth. Type sits beside it, never over it.
   ========================================================================== */

.hhero { position: relative; overflow: hidden; }

/* The board is no longer an object floating on a stage. It runs the full height
   of the section and off the right edge of the page, cropped inside its own
   face so no cut-out silhouette shows — the reader is looking at material, and
   the type occupies the narrower half beside it. */
.hobject {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  margin: 0;
  max-width: none;
  overflow: hidden;
  text-align: left;
}
.hobject img {
  position: absolute;
  /* the image overhangs its frame so the scroll tween's downward travel and
     the 1.6deg turn never expose the frame's own edge */
  top: -10%; left: -5%;
  width: 110%; height: 114%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 74%;
  /* no cast shadow: nothing is floating over anything now */
  filter: none;
  will-change: transform;
}
/* one soft seam where the board meets the band — not a scrim over the material */
.hobject::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(270deg,
              rgba(29, 22, 14, 0) 52%, rgba(29, 22, 14, 0.45) 80%,
              rgba(29, 22, 14, 0.86) 93%, var(--bg) 100%);
  pointer-events: none;
}

.hhero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: min(100svh, 720px);
  padding-top: calc(var(--nav-h) + clamp(24px, 4vh, 56px));
  padding-bottom: clamp(38px, 7vh, 92px);
  text-align: left;
}
.hhero__type { width: min(52ch, 46%); }

.hhero__eyebrow { color: var(--label-ink); }
.hhero__headline {
  margin-top: clamp(12px, 1.8vw, 20px);
  /* deliberately below the page's section headings: the board leads, not the word */
  font-size: clamp(30px, 3.5vw, 52px);
  max-width: min(12ch, 100%);
  text-align: left;
}
.hhero__sub {
  margin-top: clamp(14px, 2vw, 24px);
  max-width: min(34ch, 100%);
  text-align: left;
}

/* specification read as ruled data, the way it is written on a spec sheet */
.hhero__facts {
  margin: clamp(22px, 3.4vh, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-strong);
  max-width: min(34ch, 100%);
}
.hhero__facts > div { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.hhero__facts > div:nth-child(odd)  { padding-right: 18px; }
.hhero__facts > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--rule); }
.hhero__facts dt { margin-bottom: 6px; color: var(--label-ink); }
.hhero__facts dd {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(15px, 1.3vw, 20px); letter-spacing: -0.018em; color: var(--ink);
  white-space: nowrap;
}
.hhero__ctas {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; row-gap: 16px;
  margin-top: clamp(22px, 3.4vh, 40px);
  justify-content: flex-start;
}

/* short laptops: the composition tightens rather than pushing the action
   below the fold */
@media (min-width: 901px) and (max-height: 700px) {
  .hhero__inner {
    padding-top: calc(var(--nav-h) + 12px);
    padding-bottom: 24px;
  }
  .hhero__headline { font-size: clamp(28px, 3vw, 42px); }
  .hhero__sub { margin-top: 12px; }
  .hhero__facts { margin-top: 18px; }
  .hhero__facts > div { padding: 9px 0; }
  .hhero__ctas { margin-top: 20px; }
}

/* --- phones: composed as a stack, not a squeezed spread --------------------
   material band first, then label, headline, copy, specification, action. */
@media (max-width: 900px) {
  .hhero__inner {
    display: block;
    min-height: 0;
    padding-top: var(--nav-h);
    padding-bottom: clamp(34px, 7vw, 56px);
  }
  .hobject {
    position: relative;
    inset: auto;
    width: auto;
    height: clamp(230px, 31svh, 310px);
    margin: 0 calc(var(--gutter) * -1) clamp(26px, 5vw, 40px);
  }
  .hobject img { top: -14%; left: -6%; width: 112%; height: 126%; object-position: 50% 60%; }
  .hobject::after {
    background: linear-gradient(180deg, rgba(29, 22, 14, 0) 62%, var(--bg) 100%);
  }
  .hhero__type { width: auto; }
  .hhero__facts { max-width: none; }
}


/* ==========================================================================
   THE OBJECT, AND THE BOARD IN SERVICE
   Hybrid was the one product page carrying no photograph of the thing itself —
   its whole argument (a face over a cross-laid core) was made by animation
   alone. These are the client's own photographs: a sample cut through the
   face so the core shows, the bare edge, and the board doing the work its
   specification lists. The page now reads as an engineered object rather
   than a diagram.
   ========================================================================== */

.hcore__head { margin-bottom: clamp(40px, 6vh, 84px); }

.hcore__pair {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(20px, 3vw, 52px);
  align-items: start;
}
.hcore__fig { margin: 0; }
.hcore__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.hcore__fig--edge img {
  /* the edge is a tall, narrow subject: crop it to a column rather than
     letting it dictate the height of the row */
  height: clamp(320px, 52vh, 620px);
  object-fit: cover;
  object-position: 50% 40%;
}
.hcore__fig--face img {
  height: clamp(320px, 52vh, 620px);
  object-fit: cover;
  object-position: 50% 45%;
}
.hcore__fig figcaption { margin-top: 14px; }

@media (max-width: 860px) {
  .hcore__pair { grid-template-columns: 1fr; gap: 28px; }
  .hcore__fig--edge img,
  .hcore__fig--face img { height: clamp(260px, 44vh, 380px); }
}

/* --- the board in service ------------------------------------------------
   A packing case is not a mood board, so the grid is plain and the pieces
   are different sizes only because the subjects are. */

.inservice {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  margin-top: clamp(34px, 5vh, 64px);
}
.inservice figure { margin: 0; }
.inservice img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.inservice figcaption {
  margin-top: 10px;
  opacity: 0.68;
}

.inservice__lead { grid-column: span 4; }
.inservice__lead img { height: clamp(240px, 42vh, 460px); }
.inservice__tall { grid-column: span 2; }
.inservice__tall img { height: clamp(240px, 42vh, 460px); }
.inservice__cell { grid-column: span 2; }
.inservice__cell img { height: clamp(150px, 24vh, 250px); }
.inservice__wide { grid-column: span 6; }
.inservice__wide img { height: clamp(190px, 32vh, 340px); }

@media (max-width: 860px) {
  .inservice { grid-template-columns: repeat(2, 1fr); }
  .inservice__lead,
  .inservice__tall,
  .inservice__cell,
  .inservice__wide { grid-column: span 2; }
  .inservice__lead img,
  .inservice__tall img,
  .inservice__wide img { height: clamp(190px, 30vh, 280px); }
  .inservice__cell img { height: clamp(150px, 24vh, 220px); }
}