/* ===========================================================
   BUILT IN DETAIL — Production v1 (Re-Art-Direction of Direction B)
   SECTION CUT — the drawing-register idiom expressed at
   page-composition level, not just as hero corner decoration.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,400..900;1,62..125,400..900&family=Archivo+Narrow:wght@500;600;700;800&display=swap');

:root{
  --ink:#141a22;
  --ink-soft:#232c38;
  --paper:#f3efe4;
  --paper-dim:#e8e1d0;
  --stone:#c9c2b0;
  --mark:#a8462f;
  --mark-dim:#c97a62;
  --line: rgba(20,26,34,0.18);
  --line-on-ink: rgba(243,239,228,0.22);
  font-size: 16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Archivo', system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.5;
}
h1,h2,h3{margin:0;font-family:'Archivo', sans-serif;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
em{font-style:italic;}

/* ---------------- Title block / identity nav (unchanged — already strong) ---------------- */
.titleblock{position:fixed; top:0; left:0; z-index:100; display:flex; flex-direction:column; align-items:flex-start;}
.titleblock__toggle{
  font-family:'Archivo Narrow', sans-serif;
  display:flex; align-items:center; gap:0.75rem;
  background:var(--ink); color:var(--paper); border:none;
  border-bottom:2px solid var(--mark); border-right:2px solid var(--mark);
  padding:0.6rem 1.1rem; cursor:pointer;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
}
.titleblock__mark{font-weight:800; letter-spacing:0.18em;}
.titleblock__sheet em{font-style:normal; color:var(--mark-dim); font-weight:700;}
.navsheet{max-height:0; overflow:hidden; background:var(--paper); border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transition:max-height 0.3s ease; width:min(80vw, 320px);}
.navsheet.is-open{max-height:300px;}
.navsheet__row{display:flex; gap:0.9rem; align-items:baseline; padding:0.65rem 1.1rem; border-top:1px solid var(--line); font-size:0.85rem; font-weight:600;}
.navsheet__row:hover{background:var(--paper-dim);}
.navsheet__num{font-family:'Archivo Narrow', sans-serif; color:var(--mark); font-weight:700; font-size:0.75rem;}
.navsheet__row--proof{background:var(--paper-dim);}

/* ---------------- Reusable sheet header ("SHEET NN — Title" + rule) ---------------- */
.sheethead{
  display:flex; align-items:baseline; gap:1.2rem;
  max-width:1200px; margin:0 auto 2.4rem; padding:0 1.5rem;
}
.sheethead__num{font-family:'Archivo Narrow', sans-serif; font-weight:800; font-size:0.85rem; letter-spacing:0.12em; color:var(--mark); white-space:nowrap;}
.sheethead__title{font-family:'Archivo Narrow', sans-serif; font-weight:600; font-size:0.95rem; letter-spacing:0.02em; white-space:nowrap;}
.sheethead__title em{color:var(--ink-soft); font-size:0.85rem; font-style:normal;}
.sheethead__rule{flex:1; height:1px; background:var(--line); align-self:center;}
.sheethead--on-ink .sheethead__num{color:var(--mark-dim);}
.sheethead--on-ink .sheethead__title{color:var(--paper);}
.sheethead--on-ink .sheethead__rule{background:var(--line-on-ink);}

/* ---------------- Hero — the cut, made structural ---------------- */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:4.6rem 0 3.5rem;
  overflow:hidden;
  min-height:94vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.hero__register{
  display:flex; gap:2.2rem; flex-wrap:wrap;
  padding:0 1.8rem 1.6rem;
  border-bottom:1px solid var(--line-on-ink);
  font-family:'Archivo Narrow', sans-serif;
  font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(243,239,228,0.5);
}

/* The section-cut line: a full-width structural device, not a corner mark */
.hero__cutline{
  position:absolute;
  left:0; right:0; top:46%;
  display:flex; align-items:center;
  z-index:1;
  pointer-events:none;
}
.hero__cutline-rule{flex:1; height:2px; background:var(--mark); margin:0 1rem;}
.hero__cutline-tag{
  font-family:'Archivo Narrow', sans-serif;
  font-weight:800; font-size:clamp(2.2rem, 6vw, 4.2rem);
  color:var(--mark-dim);
  -webkit-text-stroke:1px var(--mark);
  line-height:1;
}
.hero__cutline-tag--left{padding-left:1.4rem;}
.hero__cutline-tag--right{padding-right:1.4rem;}

.hero__field{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:0 0 0 2.6rem;
  max-width:62%;
  min-width:0;
}
.eyebrow{
  display:block;
  font-family:'Archivo Narrow', sans-serif;
  text-transform:uppercase; letter-spacing:0.22em; font-size:0.78rem;
  color:var(--mark-dim); font-weight:700;
  margin-bottom:1.4rem;
}
.hero__h1{
  font-weight:800; letter-spacing:-0.02em; line-height:0.94;
  font-size:clamp(2.4rem, 7vw, 6rem);
  display:flex; flex-direction:column;
  flex:1 1 auto;
  width:100%;
  min-width:0;
}
.hero__h1-line{display:block; width:100%; overflow-wrap:break-word;}
.hero__h1-line--above{}
.hero__h1-line--cut{
  /* Sits directly on the cutline — the drawing geometry passes
     behind the headline, deliberately, not around it. */
  position:relative;
}
.hero__h1-line--below em{color:var(--mark-dim); font-weight:500; font-stretch:condensed; font-style:italic;}
/* "Waterproofing" is the longest single word in either headline — a
   slightly smaller ceiling keeps it on one line at desktop widths
   instead of breaking mid-word. */
.hero__h1--detail{font-size:clamp(2.2rem, 6vw, 4.9rem);}

.hero__annotation{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:1.6rem;
  padding:0 1.8rem 0 1.5rem;
  margin-left:auto;
  max-width:36%;
  text-align:right;
}
.hero__intro{font-size:0.98rem; color:rgba(243,239,228,0.82); max-width:34ch;}
.hero__ctas{display:flex; flex-direction:column; gap:0.75rem; align-items:flex-end;}
.callout{
  display:inline-flex; align-items:center; gap:0.7rem;
  font-family:'Archivo Narrow', sans-serif; font-weight:700; letter-spacing:0.03em; font-size:0.88rem;
  padding:0.1rem 0;
  border-bottom:1px solid var(--line-on-ink);
}
.callout__index{
  font-weight:800; font-size:0.78rem;
  border:1.5px solid var(--mark-dim); color:var(--mark-dim);
  width:1.9rem; height:1.9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.callout--primary .callout__index{background:var(--mark); border-color:var(--mark); color:var(--paper);}
.callout__label{padding-bottom:0.15rem;}

/* ---------------- Entry plates (journeys) — genuinely asymmetric ---------------- */
.journeys{padding:5.5rem 1.5rem 3.5rem; max-width:1200px; margin:0 auto;}
.journeys__lede{font-size:1.25rem; max-width:48ch; margin-bottom:3rem; font-weight:500;}
.journeys__grid{
  display:grid;
  grid-template-columns: 1.6fr auto 1fr;
  align-items:stretch;
  gap:0;
}
.journeys__cutline{
  position:relative;
  width:2px;
  background:var(--line);
  margin:1.5rem 1.6rem;
}
.journeys__cutline i{
  position:absolute; top:-1.4rem; left:50%; transform:translateX(-50%);
  font-family:'Archivo Narrow', sans-serif; font-weight:800; font-size:0.8rem; color:var(--mark);
  background:var(--paper); padding:0 0.3rem; font-style:normal;
}
.journeycard{position:relative; border:2px solid var(--ink); padding:2.6rem 2.2rem 3rem; overflow:hidden;}
.journeycard--major{background:var(--paper-dim); transform:translateY(-1.6rem); z-index:2;}
.journeycard--minor{background:var(--stone); transform:translateY(2.4rem); padding-top:4.4rem;}
.journeycard__index{
  font-family:'Archivo Narrow', sans-serif; font-weight:800; color:var(--mark);
  position:absolute; top:-1.2rem; right:0.6rem;
  font-size:6rem; line-height:1; opacity:0.85;
}
.journeycard--minor .journeycard__index{font-size:4.2rem;}
.journeycard__diagram{display:flex; gap:0.25rem; margin-bottom:1.6rem; height:10px;}
.jd{flex:1; display:block;}
.jd--tile{background:var(--stone);}
.jd--membrane{background:var(--mark);}
.jd--screed{background:var(--paper-dim); border:1px solid var(--line);}
.jd--substrate{background:var(--paper);border:1px solid var(--line);}
.journeycard--minor .jd--tile, .journeycard--minor .jd--screed{background:var(--paper-dim);}
.journeycard h3{font-size:1.6rem; margin-bottom:0.9rem; max-width:20ch;}
.journeycard p{margin-bottom:1rem; max-width:40ch;}
.journeycard__demo{font-family:'Archivo Narrow', sans-serif; font-weight:700; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft);}
.journeycard__link{display:inline-block; margin-top:1.1rem; font-weight:700; border-bottom:2px solid var(--mark); padding-bottom:0.15rem;}

/* ---------------- Negation panel — positioning as a plate ---------------- */
.negation{background:var(--ink); color:var(--paper); padding:5.5rem 0 5.5rem;}
.negation__list{max-width:1100px; margin:0 auto 2.4rem; padding:0 1.5rem;}
.negation__list li{display:flex; align-items:baseline; gap:1rem; margin-bottom:0.5rem;}
.negation__ref{font-family:'Archivo Narrow', sans-serif; font-weight:700; font-size:0.9rem; color:var(--mark-dim); flex:none; width:3.2rem;}
.negation__strike{font-size:clamp(2rem, 6vw, 4rem); font-weight:800; letter-spacing:-0.01em; position:relative; display:inline-block;}
.negation__strike::after{content:""; position:absolute; left:-2%; right:-2%; top:50%; height:4px; background:var(--mark); transform:rotate(-3deg);}
.negation__body{max-width:62ch; margin:0 auto; padding:0 1.5rem; color:rgba(243,239,228,0.82); font-size:1.05rem;}

/* ---------------- Stamps (how content is made) ---------------- */
.stamps{max-width:1100px; margin:0 auto; padding:5rem 1.5rem 6rem;}
.stamps__body{max-width:62ch; margin-bottom:2.2rem; color:var(--ink-soft);}
.stamps__row{display:flex; flex-wrap:wrap; gap:0.9rem;}
.stamp{font-family:'Archivo Narrow', sans-serif; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; border:2px solid var(--ink); padding:0.55rem 1rem; background:var(--paper-dim);}

/* ---------------- Detail hero variant ---------------- */
.hero--detail{background:var(--ink-soft);}
.hero__cutline--detail .hero__cutline-rule{background:var(--mark-dim);}

/* ---------------- Cutaway — the signature moment, reversed to a dark plate ---------------- */
.buildup{background:var(--ink); color:var(--paper); padding:6rem 0 6.5rem;}
.buildup__grid{
  max-width:1200px; margin:0 auto; padding:0 1.5rem;
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap:4rem; align-items:center;
}
.buildup__diagram{position:relative; padding-top:1.6rem;}
.buildup__platemark{
  position:absolute; top:-1.4rem; left:2rem;
  font-family:'Archivo Narrow', sans-serif; font-weight:800; font-size:0.78rem;
  letter-spacing:0.14em; color:var(--mark-dim); text-transform:uppercase;
}
.cutaway{position:relative; border:2px solid var(--paper); background:var(--ink-soft); box-shadow: 16px 16px 0 var(--mark); margin:0 2.5rem 2rem 2rem;}
.cutaway__layer{display:flex; align-items:baseline; gap:0.8rem; padding:1.15rem 1.4rem; border-bottom:1px solid var(--line-on-ink); font-family:'Archivo Narrow', sans-serif; font-size:0.78rem; letter-spacing:0.02em; font-weight:600;}
.cutaway__tag{font-weight:800; color:var(--mark-dim); flex:none; width:1.4rem;}
.cutaway__layer span:last-child{display:block;}
.cutaway__layer--tile{background:var(--stone); color:var(--ink);}
.cutaway__layer--membrane{background:var(--mark); color:var(--paper); font-weight:700;}
.cutaway__layer--screed{background:var(--paper-dim); color:var(--ink);}
.cutaway__layer--substrate{background:var(--paper); color:var(--ink); border-bottom:none;}
.cutaway__layer--substrate .cutaway__tag{color:var(--mark);}
.cutaway__drain{
  display:flex; align-items:baseline; gap:0.8rem;
  margin-top:1.2rem; padding:0 1.4rem;
  font-family:'Archivo Narrow', sans-serif; font-size:0.78rem; font-weight:700; color:var(--mark-dim);
}
.cutaway__drain::before{content:"05"; font-weight:800; width:1.4rem; flex:none;}
.buildup__text h2{font-size:2rem; margin-bottom:1.2rem; max-width:14ch; color:var(--paper);}
.buildup__text p{max-width:52ch; color:rgba(243,239,228,0.78); font-size:1.02rem;}

/* ---------------- Approval block — one connected drawing register, not three badges ---------------- */
.approval{max-width:1200px; margin:0 auto; padding:5.5rem 1.5rem 6rem;}
.approval__table{border:2px solid var(--ink);}
.approval__row{display:grid; grid-template-columns: 13rem 14rem 1fr; border-bottom:2px solid var(--ink);}
.approval__row:last-child{border-bottom:none;}
.approval__row--mark{background:var(--paper-dim);}
.approval__cell{padding:1.4rem 1.3rem; border-right:1px solid var(--line);}
.approval__cell:last-child{border-right:none;}
.approval__cell--label{font-family:'Archivo Narrow', sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; font-size:0.82rem; display:flex; align-items:center; gap:0.7rem;}
.approval__prmark{font-family:'Archivo Narrow', sans-serif; font-weight:800; font-size:0.95rem; border:2px solid var(--mark); color:var(--mark); padding:0.1rem 0.4rem; line-height:1;}
.approval__cell--status{font-family:'Archivo Narrow', sans-serif; font-weight:700; font-size:0.85rem; color:var(--mark); display:flex; align-items:center;}
.approval__cell--note{color:var(--ink-soft); font-size:0.92rem;}

/* ---------------- Bridge — a real section reference, not a decorative rule ---------------- */
.bridge{max-width:1200px; margin:0 auto; padding:3.4rem 1.5rem 5rem; position:relative;}
.bridge__refline{position:relative; height:2px; background:repeating-linear-gradient(90deg, var(--mark) 0 18px, transparent 18px 30px); margin-bottom:1.8rem;}
.bridge__reftag{position:absolute; right:0; top:-1.6rem; font-family:'Archivo Narrow', sans-serif; font-weight:800; font-size:0.72rem; letter-spacing:0.1em; color:var(--mark); text-transform:uppercase;}
.bridge__kicker{font-family:'Archivo Narrow', sans-serif; text-transform:uppercase; letter-spacing:0.1em; font-size:0.78rem; font-weight:700; color:var(--mark); margin-bottom:1rem;}
.bridge__body{max-width:60ch; margin-bottom:2rem; color:var(--ink-soft);}
.bridge__card{display:grid; grid-template-columns:auto 1fr; gap:0.4rem 1.4rem; border:2px solid var(--ink); padding:1.8rem; max-width:640px; background:var(--paper-dim);}
.bridge__card-index{font-family:'Archivo Narrow', sans-serif; font-weight:800; font-size:2.4rem; color:var(--mark); grid-row:1 / 3;}
.bridge__card-title{font-size:1.25rem; font-weight:700;}
.bridge__card-sub{color:var(--ink-soft); font-size:0.92rem;}

/* ---------------- Material schedule (Build Basket, reframed as a drawing legend) ---------------- */
.basket{max-width:900px; margin:0 auto; padding:2rem 1.5rem 7rem;}
.basket__table{border:2px solid var(--ink);}
.basket__row{display:grid; grid-template-columns: 6rem 1fr; border-bottom:1px solid var(--line);}
.basket__row:last-child{border-bottom:none;}
.basket__row--head{background:var(--ink); color:var(--paper); border-bottom:2px solid var(--ink);}
.basket__row--head .basket__cell{font-family:'Archivo Narrow', sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; font-size:0.72rem;}
.basket__cell{padding:0.9rem 1.2rem; border-right:1px solid var(--line);}
.basket__row--head .basket__cell{border-right:1px solid var(--line-on-ink);}
.basket__cell:last-child{border-right:none;}
.basket__cell--ref{font-family:'Archivo Narrow', sans-serif; font-weight:700; color:var(--mark);}
.basket__cell--item{font-weight:600;}
.basket__note{margin-top:1.6rem; max-width:60ch; color:var(--ink-soft); font-size:0.92rem;}

/* ---------------- Footer ---------------- */
.footer{background:var(--ink); color:rgba(243,239,228,0.6); display:flex; justify-content:space-between; padding:2rem 1.8rem; font-family:'Archivo Narrow', sans-serif; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;}

/* ===========================================================
   MOBILE — a distinct composition, not a deleted one.
   The cut rotates from a horizontal line across the viewport
   to a vertical spine down the left edge; cards overlap instead
   of stacking flat; schedules/tables collapse to single column
   while keeping ref/tag language.
   =========================================================== */
@media (max-width: 860px){
  .hero{padding:2.6rem 0 3.4rem; min-height:auto;}
  .hero__register{gap:1.1rem; font-size:0.6rem; padding:0 1.2rem 1.2rem; flex-wrap:wrap;}
  .hero__cutline{left:1.2rem; right:auto; top:3.2rem; bottom:1rem; flex-direction:column; width:2px;}
  .hero__cutline-rule{flex:1; width:2px; height:auto; margin:0.8rem 0;}
  .hero__cutline-tag{font-size:1.6rem; padding:0;}
  .hero__field{max-width:100%; padding:2.2rem 1.4rem 1.6rem 2.6rem; flex:none;}
  .eyebrow{position:static; margin-bottom:1.2rem; display:block;}
  .hero__h1{font-size:clamp(1.85rem, 8.6vw, 2.75rem);}
  .hero__h1--detail{font-size:clamp(1.6rem, 7.6vw, 2.35rem);}
  .hero__annotation{max-width:100%; align-items:flex-start; text-align:left; margin-left:0; padding:0 1.4rem 0 2.6rem;}
  .hero__ctas{align-items:flex-start;}

  .sheethead{flex-wrap:wrap; gap:0.6rem;}
  .sheethead__title{white-space:normal;}

  .journeys__grid{grid-template-columns:1fr; gap:0;}
  .journeys__cutline{width:auto; height:2px; margin:0;}
  .journeys__cutline i{top:50%; left:1.5rem; transform:translateY(-50%);}
  .journeycard--major{transform:translateY(0); margin-bottom:-1.4rem; margin-right:1.4rem; z-index:2;}
  .journeycard--minor{transform:translateY(0); margin-left:1.4rem; padding-top:2.8rem;}

  .buildup__grid{grid-template-columns:1fr; gap:2.4rem;}
  .cutaway{margin:0 0.6rem 1.2rem 1.2rem; box-shadow:10px 10px 0 var(--mark);}
  .cutaway__drain{flex-wrap:wrap;}

  .approval__row{grid-template-columns:1fr;}
  .approval__cell{border-right:none; border-bottom:1px solid var(--line);}
  .approval__row .approval__cell:last-child{border-bottom:none;}

  .basket__row{grid-template-columns: 4.4rem 1fr;}

  .negation__strike{font-size:clamp(1.5rem,8vw,2.3rem);}
  .negation__list li{align-items:flex-start;}
  .bridge__card{grid-template-columns:1fr;}
  .bridge__card-index{grid-row:auto;}
}