/* Yellowpine Truss — rebuild
   One stylesheet. No frameworks, no build step, no JavaScript.
   Brief: simple and clean. Every rule here should earn its place.

   Dark treatment (Jean, 1 Sep 2026): black throughout, and no picture runs
   edge to edge — every image block is pulled in so black frames it. Square
   corners, not rounded. */

:root{
  --black:#0b0b0b;      /* the page itself */
  --panel:#15161a;      /* cards and tinted blocks sitting on the black */
  --ink:#f2f1ec;        /* body text */
  --ink-soft:#a8a79f;   /* secondary text */
  --line:#2c2d33;
  --yellow:#fac903;     /* taken from the logo */
  --yellow-soft:#ffe07a;
  --wrap:1180px;
  --gap:clamp(3.2rem,6vw,5.5rem);
  --frame:clamp(14px,5vw,96px);   /* the black border around every picture */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--ink);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0;font-weight:600}
h1{font-size:clamp(2rem,4.6vw,3.2rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.08rem;letter-spacing:-.01em}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.narrow{max-width:760px}
.lede{font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.55;color:var(--ink-soft)}
.eyebrow{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--yellow);margin:0 0 .9rem;
}

/* ---------- header: links either side of a centred logo ---------- */
.masthead{background:var(--black)}
.utility{
  display:flex;justify-content:flex-end;align-items:center;gap:1.4rem;
  max-width:var(--wrap);margin:0 auto;padding:.9rem clamp(1.1rem,4vw,2rem) 0;
}
.utility .tel{
  text-decoration:none;font-size:.93rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.utility .tel:hover{color:var(--ink)}
.utility .cta{
  text-decoration:none;background:var(--yellow);color:#111;
  font-weight:650;font-size:.92rem;padding:.55rem 1.1rem;
}
.utility .cta:hover{background:#fff}

.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  max-width:var(--wrap);margin:0 auto;padding:1.6rem clamp(1.1rem,4vw,2rem) 1.6rem;
}
.nav-side{display:flex;align-items:center;gap:clamp(1rem,2.8vw,2.4rem)}
.nav-side.left{justify-content:flex-start}
.nav-side.right{justify-content:flex-end}
.nav a{
  text-decoration:none;font-size:.95rem;font-weight:500;white-space:nowrap;
  padding:.5rem 0;border-bottom:2px solid transparent;color:var(--ink);
}
.nav a:hover{border-bottom-color:var(--yellow)}
.nav a[aria-current="page"]{border-bottom-color:var(--yellow);color:#fff}
.logo{display:block;justify-self:center}
.logo img{width:clamp(240px,26vw,420px)}

@media(max-width:780px){
  .nav{grid-template-columns:1fr;justify-items:center;gap:.9rem}
  .logo{order:-1}
  .nav-side{flex-wrap:wrap;justify-content:center}
  .utility{justify-content:center}
}

/* ---------- framed blocks: nothing touches the edge ---------- */
.framed{margin-left:var(--frame);margin-right:var(--frame)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;background:#000;color:#fff;
  margin:0 var(--frame);
}
.hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;
}
.hero .inner{
  position:relative;max-width:var(--wrap);margin:0 auto;
  padding:clamp(3.5rem,8vw,6.5rem) clamp(1.4rem,4vw,3rem);
}
.hero p{color:#dedcd4;max-width:46ch}
.hero .lede{color:#dedcd4}

/* ---------- the grade band: the line Jean asked to be emphasised ---------- */
.grade{background:var(--yellow);color:#111;margin:var(--gap) var(--frame)}
.grade .inner{max-width:var(--wrap);margin:0 auto;padding:clamp(2rem,4vw,3rem) clamp(1.4rem,4vw,3rem)}
.grade p{margin:0;font-size:clamp(1.12rem,2.3vw,1.65rem);font-weight:650;line-height:1.3;letter-spacing:-.02em;max-width:44ch}
.grade small{display:block;margin-top:.7rem;font-size:.95rem;font-weight:400;opacity:.78;max-width:62ch;letter-spacing:0}

/* ---------- sections ---------- */
section{padding:var(--gap) 0}
section.tint{background:var(--panel);margin:0 var(--frame);padding:var(--gap) 0}
section.tint > .wrap{padding-left:clamp(1.4rem,4vw,3rem);padding-right:clamp(1.4rem,4vw,3rem)}
.section-head{max-width:660px;margin-bottom:2.6rem}
.section-head p{color:var(--ink-soft);margin-bottom:0}

/* cards */
.grid{display:grid;gap:clamp(1.4rem,3vw,2.4rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{background:var(--panel);padding:0 0 1.6rem}
.card.plain{background:transparent;padding:0}
.card h3{margin-bottom:.4rem;padding:0 1.4rem}
.card p{color:var(--ink-soft);margin-bottom:0;font-size:.97rem;padding:0 1.4rem}
.card a{color:var(--yellow);text-decoration:none;font-weight:600}
.card a:hover{text-decoration:underline}
.card img{margin-bottom:1.2rem;aspect-ratio:16/10;object-fit:cover;width:100%}
.card.plain h3,.card.plain p{padding:0}

/* numbered steps — one page, no arrows, no carousel */
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)}
.steps li{
  counter-increment:s;list-style:none;display:grid;
  grid-template-columns:3.4rem 1fr;gap:1.4rem;
  padding:1.7rem 0;border-bottom:1px solid var(--line);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-weight:700;font-size:1rem;color:var(--yellow);
  font-variant-numeric:tabular-nums;padding-top:.15rem;
}
.steps h3{margin-bottom:.3rem;color:#fff}
.steps p{color:var(--ink-soft);margin:0;font-size:.97rem}

/* type sections: photo beside copy, alternating */
.split{display:grid;gap:clamp(1.6rem,4vw,3.2rem);align-items:center;grid-template-columns:1fr}
@media(min-width:880px){
  .split{grid-template-columns:1fr 1fr}
  .split.flip .split-media{order:2}
}
.split-media img{aspect-ratio:4/3;object-fit:cover;width:100%}
.split + .split{margin-top:var(--gap)}
.split h2{margin-bottom:.9rem}
.split .kicker{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:.6rem}
.ticks{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.7rem}
.ticks li{padding-left:1.5rem;position:relative;color:var(--ink-soft);font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;background:var(--yellow)}
.ticks strong{color:var(--ink);font-weight:600}

/* buttons */
.btn{
  display:inline-block;text-decoration:none;font-weight:650;font-size:.96rem;
  padding:.82rem 1.5rem;background:var(--yellow);color:#111;border:2px solid var(--yellow);
}
.btn:hover{background:#fff;border-color:#fff;color:#111}
.btn.ghost{background:transparent;border-color:#5a5b62;color:var(--ink)}
.btn.ghost:hover{background:#fff;border-color:#fff;color:#111}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* closing call to action */
.closer{background:var(--panel);margin:var(--gap) var(--frame) 0}
.closer .inner{max-width:var(--wrap);margin:0 auto;padding:var(--gap) clamp(1.4rem,4vw,3rem)}
.closer h2{margin-bottom:.8rem;color:#fff}
.closer p{color:var(--ink-soft);max-width:54ch}

/* partners */
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(2rem,6vw,4.5rem)}
.partners img{height:34px;width:auto;opacity:.62;filter:brightness(0) invert(1)}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq > div{border-bottom:1px solid var(--line);padding:1.5rem 0}
.faq h3{margin-bottom:.4rem;color:#fff}
.faq p{color:var(--ink-soft);margin:0;font-size:.97rem}
.faq a{color:var(--yellow)}

/* contact */
.contact-grid{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:820px){.contact-grid{grid-template-columns:1.1fr 1fr}}
.contact-block{margin-bottom:2rem}
.contact-block h3{margin-bottom:.35rem;color:#fff}
.contact-block a{font-size:1.14rem;font-weight:600;text-decoration:none;color:var(--yellow);border-bottom:2px solid rgba(250,201,3,.35)}
.contact-block a:hover{border-bottom-color:var(--yellow)}
.contact-block p{color:var(--ink-soft);font-size:.95rem;margin:.35rem 0 0}

/* ---------- footer ---------- */
.foot{background:var(--black);border-top:1px solid var(--line);margin:var(--gap) var(--frame) 0;padding:clamp(2.6rem,5vw,3.6rem) 0 2rem}
.foot > .wrap{padding-left:clamp(1.4rem,4vw,3rem);padding-right:clamp(1.4rem,4vw,3rem)}
.foot-top{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:2.6rem}
.foot h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;margin:0 0 .9rem;color:var(--yellow)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot a{text-decoration:none;color:var(--ink-soft);font-size:.94rem}
.foot a:hover{color:#fff}
.foot .served{color:var(--ink-soft);font-size:.94rem;margin:0}
.foot-bottom{
  border-top:1px solid var(--line);padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.86rem;color:var(--ink-soft);
}
.foot-bottom a{font-size:.86rem}
.made{font-weight:600;color:var(--ink)}

/* legal pages */
.wrap.narrow h1{margin-bottom:1.4rem}
.wrap.narrow h2{font-size:1.32rem;margin:2.4rem 0 .8rem;color:#fff}
.wrap.narrow .ticks{margin:.4rem 0 1.2rem}
.wrap.narrow a{color:var(--yellow)}

/* sandbox marker — remove at go-live */
.sandbox-bar{
  background:#b3261e;color:#fff;text-align:center;
  font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:9px 12px;letter-spacing:.05em;
}

/* gallery grid */
.gallery{display:grid;gap:clamp(.6rem,1.4vw,1rem);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.gallery figure{margin:0;background:var(--panel)}
.gallery img{aspect-ratio:1/1;object-fit:cover;width:100%}
.gallery figcaption{font-size:.82rem;color:var(--ink-soft);padding:.6rem .8rem .8rem}

/* video hero — the film only, nothing written over it */
.hero-video{padding:0;line-height:0}
.hero-video video{width:100%;height:clamp(520px,86vh,940px);object-fit:cover;display:block;opacity:1}
.hero-video img{width:100%;height:100%;object-fit:cover}

/* the words that used to sit on the video now sit under it */
.intro{padding:var(--gap) 0 0}
.intro h1{margin-bottom:.7rem}
.intro .lede{max-width:52ch}

/* ---------- contact page ---------- */
.contact-top{padding-bottom:0}
.contact-top h1{margin-bottom:2.2rem}
.contact-cards{display:grid;gap:clamp(1.2rem,3vw,2.2rem);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.contact-cards > div{border-top:2px solid var(--yellow);padding-top:1rem}
.contact-cards h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;margin:0 0 .6rem;color:var(--yellow)}
.contact-cards a{display:inline-block;font-size:1.1rem;font-weight:600;text-decoration:none;color:#fff;line-height:1.4}
.contact-cards a:hover{color:var(--yellow)}
.contact-cards p{color:var(--ink-soft);font-size:.9rem;margin:.5rem 0 0}

/* form */
.enquiry{display:grid;gap:1.2rem;max-width:900px}
.field-row{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:700px){.field-row{grid-template-columns:1fr 1fr}}
.enquiry label{display:grid;gap:.45rem;font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);text-transform:uppercase}
.enquiry .lbl{display:block}
.enquiry .lbl em{color:var(--yellow);font-style:normal}
.enquiry input,.enquiry select,.enquiry textarea{
  background:#0b0b0b;border:1px solid var(--line);color:var(--ink);
  font:400 16px/1.5 inherit;padding:.8rem .9rem;width:100%;border-radius:0;
}
.enquiry textarea{resize:vertical}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{outline:2px solid var(--yellow);outline-offset:-1px;border-color:var(--yellow)}
.enquiry ::placeholder{color:#6f6f68}
.enquiry button.btn{cursor:pointer;font-family:inherit}
.form-note{font-size:.9rem;color:var(--ink-soft);margin:0}
.form-note a{color:var(--yellow)}

/* plan drop zone */
.dropzone{
  border:2px dashed #45464e;padding:clamp(1.8rem,4vw,2.8rem);text-align:center;
  background:rgba(255,255,255,.02);
}
.dropzone h3{color:#fff;margin-bottom:.4rem}
.dropzone p{color:var(--ink-soft);font-size:.95rem;margin:0}
.dropzone strong{color:var(--yellow)}
.dropzone .dz-note{margin-top:.7rem;font-size:.82rem;color:#8a8a82;font-style:italic}

/* map */
.map{position:relative;aspect-ratio:16/7;background:var(--panel)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}
@media(max-width:700px){.map{aspect-ratio:4/3}}

/* drop zone states */
.dropzone{cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.is-over{border-color:var(--yellow);background:rgba(250,201,3,.05)}
.dropzone:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.dz-bar{display:none;height:6px;background:#2c2d33;margin-top:1.1rem}
.dz-bar span{display:block;height:100%;width:0;background:var(--yellow);transition:width .2s}
.dz-status{margin-top:.8rem;font-size:.9rem;color:var(--ink-soft);min-height:1.2em}
.dz-status.is-ok{color:var(--yellow)}
.dz-status.is-bad{color:#ff8a7a}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-msg{color:#ff8a7a;font-size:.92rem;margin:0;min-height:1.2em}
.sent{border-left:3px solid var(--yellow);padding:1.4rem 1.6rem;background:rgba(250,201,3,.06)}
.sent h3{color:#fff;margin-bottom:.5rem}
.sent p{color:var(--ink-soft);margin:0}
.sent a{color:var(--yellow)}

/* ---------- contact page refinements ---------- */
/* one black, no second shade */
.form-section{background:var(--black)}
.contact-top{padding-bottom:0}

/* heading with the mark sitting top right */
.contact-head{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:2.2rem}
.contact-mark{width:clamp(150px,17vw,240px);opacity:.9;flex:none}
@media(max-width:640px){
  .contact-head{flex-direction:column;align-items:center;text-align:center;gap:1.2rem}
  .contact-mark{width:190px}
}

/* the form block centred on the page, and centred within itself */
.enquiry{margin-left:auto;margin-right:auto}
.form-section .section-head{margin-left:auto;margin-right:auto;text-align:center;max-width:640px}
.btns-center{justify-content:center}
.form-section .form-msg,.form-section .form-note{text-align:center}

/* less air between the header and the first heading */
.contact-top{padding-top:clamp(1.6rem,3vw,2.6rem)}

/* the enquiry block, unambiguously centred */
.form-section > .wrap{display:flex;flex-direction:column;align-items:center}
.form-section .enquiry{width:100%;max-width:820px}
.form-section .section-head{width:100%;max-width:820px}

/* Areas We Serve map in the footer */
.foot-map img{width:100%;max-width:300px;margin-top:.4rem}
@media(max-width:640px){.foot-map img{max-width:220px}}

/* Contact Us sits close under the header */
.contact-top{padding-top:clamp(.4rem,1.2vw,1rem)}
.contact-top h1{margin-bottom:1.8rem}

/* "Where we are" framed in from the edge, like every other picture block */
.where{margin-left:var(--frame);margin-right:var(--frame)}

/* Areas We Serve map right-aligned in its footer column */
.foot-map{text-align:right}
.foot-map img{margin-left:auto;margin-right:0}
@media(max-width:760px){.foot-map{text-align:left}.foot-map img{margin-left:0}}


/* ---------- story hero: film with the headline over it ---------- */
.hero-titled{position:relative}
.hero-titled video{
  height:clamp(460px,74vh,820px);
  object-position:center top;      /* crop the floor away, keep the ceiling */
}
.hero-title{
  position:absolute;inset:0;display:flex;justify-content:center;
  align-items:flex-start;               /* toward the top, as asked */
  padding:clamp(2.4rem,6vh,4.5rem) clamp(1.2rem,4vw,3rem) 0;
  pointer-events:none;line-height:1.1;
}
.hero-title h1{
  margin:0;text-align:center;max-width:22ch;font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.4rem);letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.hero-title .w{color:#fff}
.hero-title .y{color:var(--yellow)}

/* six photos, half the size of the gallery tiles */
.gallery-small{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.gallery-small figcaption{display:none}

/* closing CTA, centred, with the partner marks under it */
.closer-cta .inner{text-align:center;max-width:900px}
.closer-cta p{margin-left:auto;margin-right:auto}
.partners-center{justify-content:center;margin-top:2.6rem}


/* ---------- story: the line sits in the black, on one line ---------- */
.story-line{padding:clamp(2.2rem,5vw,3.4rem) 0 0}
.story-line h1{
  text-align:center;margin:0 auto;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2.5vw,2.15rem);line-height:1.2;
}
.story-line .w{color:#fff}
.story-line .y{color:var(--yellow)}
@media(min-width:900px){.story-line h1{white-space:nowrap}}
.story-body{padding-top:var(--gap)}

/* closing CTA: black, and pulled up */
.closer-cta{background:var(--black);margin-top:0}
.closer-cta .inner{padding-top:clamp(2rem,4vw,3rem)}


/* ---------- story: tighter gap, bigger partner marks ---------- */
/* Jean: about an inch between the line and Our Mission */
.story-body{padding-top:clamp(1.6rem,4vw,2.6rem)}

/* Partner marks, much larger and in Yellowpine yellow.
   Randek's own brand colour is #f1d600 — already a yellow, near enough to
   ours that one palette covers all three without looking arbitrary.

   Capped on BOTH axes: these are wordmarks of very different proportions, so
   sizing by height alone made Randek 554px wide and pushed the row onto two
   lines. Bounding width as well keeps them visually comparable and on one row. */
.closer-cta .partners{
  gap:clamp(1.6rem,4vw,3rem);align-items:center;justify-content:center;
  max-width:none;width:100%;
}
.closer-cta .partners img{
  height:auto;width:auto;
  /* 30% up on Jean's mark: 52→68 tall, 300→390 wide */
  max-height:clamp(44px,5.1vw,68px);
  max-width:clamp(182px,27vw,390px);
  filter:none;opacity:1;
}


/* the partner row sits outside the 900px text column so the larger marks
   still fit on one line */
.partners-wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.4rem,4vw,3rem) var(--gap)}