/* ==========================================================================
   Snag Master Scotland — "The Snag List"
   Ground: solid #ffffff. Bands: ink #0b1622 and brand navy #0d2d4a.
   Mark #e4572e is the defect pin — small only, never a band.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:        #0b1622;
  --ink-2:      #0f1f30;
  --ink-3:      #132a3f;
  --white:      #ffffff;
  --navy:       #0d2d4a;
  --mark:       #e4572e;
  --steel:      #66717c;
  --panel:      #f3f5f7;          /* report table cells only */
  --line:       rgba(11,22,34,.14);
  --line-strong:rgba(11,22,34,.3);
  --line-up:    rgba(255,255,255,.16);

  /* base.css tokens */
  --surface:    #ffffff;
  --surface-2:  #ffffff;
  --text:       #eef2f5;
  --muted:      #93a0ab;
  --ink-text:   #0b1622;
  --ink-mute:   #5c6873;
  --accent:     #0d2d4a;
  --accent-lit: #e4572e;
  --accent-2:   #e4572e;

  --font-display:"Russo One", "Arial Black", Impact, sans-serif;
  --font-body:   "Ubuntu", system-ui, -apple-system, sans-serif;
  --font-mono:   "B612 Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap-max: 1300px;
  --radius:   2px;
}

body{ background:var(--white); color:var(--ink); font-size:16px; }
::selection{ background:var(--navy); color:#fff; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  padding:.7rem 1rem; background:var(--ink); color:#fff; font-size:.8rem;
}
.skip:focus{ left:.7rem; top:.7rem; }

/* ---------- preloader: the pin motif ---------- */
.pre{ background:var(--ink); }
.pre__mark svg{ width:96px; height:96px; display:block; }
.pre__num{ font-family:var(--font-mono); font-weight:700; }
.pre__ring{ transform-box:fill-box; transform-origin:center; animation:pinPulse 1.7s var(--ease) infinite; }
.pre__lead{ stroke-dasharray:62; stroke-dashoffset:62; animation:pinDraw 1.1s var(--ease) .15s forwards; }
@keyframes pinPulse{ 0%{ transform:scale(.72); opacity:.9 } 70%{ transform:scale(1.25); opacity:0 } 100%{ transform:scale(1.25); opacity:0 } }
@keyframes pinDraw{ to{ stroke-dashoffset:0 } }
.pre__meta{ color:var(--muted); }
.pre__pct{ color:var(--mark); }
.pre__bar{ background:rgba(255,255,255,.14); }
.pre__bar i{ background:var(--mark); }

/* ---------- header ---------- */
.hdr{
  background:var(--white);
  border-bottom:2px solid var(--ink);
  color:var(--ink);
}
@media (min-width:1024px){
  .hdr{
    background:color-mix(in srgb, #ffffff 90%, transparent);
    backdrop-filter:blur(12px) saturate(1.05);
    -webkit-backdrop-filter:blur(12px) saturate(1.05);
  }
}
.hdr__in{ min-height:78px; gap:1.1rem; }

.brand{
  display:inline-block;
  background:var(--navy);
  padding:5px 8px;
  border-radius:var(--radius);
  line-height:0;
}
.brand img{ width:auto; height:40px; }
@media (max-width:1023px){ .brand img{ height:32px; } }

.nav__link{
  font-family:var(--font-body);
  font-size:.845rem;
  letter-spacing:.01em;
  color:var(--ink);
  padding:.55rem .62rem;
  border-radius:var(--radius);
}
.nav__link:hover{ color:var(--navy); background:rgba(13,45,74,.07); }
.nav__item.is-open > .nav__link{ color:var(--navy); background:rgba(13,45,74,.07); }

.mega{
  background:var(--ink-3);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);
  box-shadow:0 30px 60px -24px rgba(11,22,34,.55);
}
.mega__h{ color:var(--mark); border-bottom-color:var(--line-up); }
.mega a{ color:rgba(238,242,245,.86); }
.mega a:hover{ color:#fff; }

.hdr__act{ display:none; }
@media (min-width:1024px){
  /* .nav__foot is only styled for the mobile overlay — never show it in the bar */
  .nav__foot{ display:none; }
}
@media (min-width:1160px){
  .hdr__act{ display:flex; align-items:center; gap:.9rem; margin-left:.5rem; flex-shrink:0; }
}
.hdr__tel{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em;
  color:var(--ink); white-space:nowrap; padding:.35rem 0;
  border-bottom:1px solid var(--line-strong);
  transition:color .18s, border-color .18s;
}
.hdr__tel:hover{ color:var(--mark); border-color:var(--mark); }

.burger{ border-color:var(--line-strong); }
.burger span{ background:var(--ink); }

/* ---------- buttons ---------- */
.btn{
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-weight:500;
  letter-spacing:.015em;
  padding:.82rem 1.3rem;
}
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:var(--navy); transform:translateY(-2px); filter:none; }
.btn--ghost{ border:1px solid var(--line-strong); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); background:none; }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:var(--mark); color:#fff; transform:translateY(-2px); }
.btn--edge{ border:1px solid rgba(255,255,255,.34); color:#fff; }
.btn--edge:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:var(--white);
  color:var(--ink);
  padding-block:clamp(2rem,4vw,3.4rem) clamp(2.6rem,5vw,4.6rem);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  gap:clamp(1.8rem,3.6vw,3.2rem);
  align-items:center;
}
.hero__copy{ min-width:0; }

.kicker{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel);
  margin-bottom:1.2rem;
}
.kicker__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--mark); flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(228,87,46,.16);
}

.hero__h1{ font-weight:400; letter-spacing:-.022em; margin-bottom:1.3rem; }
.hero__sub{
  font-size:.98rem; line-height:1.72; color:var(--ink-mute);
  max-width:46ch; margin-bottom:1.7rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1.9rem; }

.trust{
  display:flex; flex-wrap:wrap; gap:.55rem 0;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel);
  border-top:1px solid var(--line); padding-top:.9rem;
}
.trust li{ display:flex; align-items:center; }
.trust li + li::before{
  content:""; width:1px; height:9px; background:var(--line-strong);
  margin:0 .8rem; display:inline-block;
}

/* ---------- the sheet: elevation + report extract ---------- */
.sheet{
  margin:0; min-width:0;
  border:1px solid var(--line-strong);
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
}
.sheet__bar{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem .8rem;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel);
  background:var(--panel);
}
.sheet__body{
  position:relative;
  background-color:var(--white);
  background-image:
    linear-gradient(to right, rgba(11,22,34,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,22,34,.04) 1px, transparent 1px);
  background-size:30px 30px;
  background-position:0 0;
}
.elev{ display:block; width:100%; height:auto; color:var(--ink); }
.elev__pin{ transform-box:fill-box; transform-origin:center; }
.elev text{ font-family:var(--font-mono); font-weight:700; }

.sheet__tab{
  position:absolute; right:0; bottom:6%; width:46%;
  border-left:1px solid var(--line-strong);
  background:var(--white);
}
.sheet__key{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.28rem .8rem;
  padding:.7rem .8rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.04em;
  color:var(--steel);
}
.sheet__key li{ min-width:0; overflow-wrap:anywhere; }
.sheet__key b{ color:var(--mark); font-weight:700; margin-right:.35rem; }
.sheet__cap{
  padding:.55rem .8rem .65rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.55rem; line-height:1.55;
  letter-spacing:.03em; color:var(--steel);
}

/* ---------- report table ---------- */
.rtab{ width:100%; border-collapse:collapse; }
.rtab th{
  font-family:var(--font-mono); font-weight:400; font-size:.5rem;
  letter-spacing:.12em; text-transform:uppercase; text-align:left;
  color:var(--steel); background:var(--panel);
  padding:.42rem .42rem; border-bottom:1px solid var(--line);
}
.rtab td{
  padding:.5rem .42rem; font-size:.7rem; line-height:1.42;
  border-bottom:1px solid var(--line); vertical-align:top;
  overflow-wrap:break-word; min-width:0;
}
.rtab tbody tr:last-child td{ border-bottom:0; }
.rtab td:first-child{ font-family:var(--font-mono); font-size:.62rem; color:var(--mark); white-space:nowrap; }
.rtab td:last-child{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel); white-space:nowrap;
}

/* ==========================================================================
   SECTION FURNITURE — the report header with its pin
   ========================================================================== */
.sect{ position:relative; }
.rep{
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:clamp(1.4rem,2.6vw,2rem);
}
.rep__pin{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  background:var(--mark); color:#fff;
  font-family:var(--font-mono); font-size:.62rem; font-weight:700;
  display:grid; place-items:center;
}
.rep__label{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel); min-width:0;
}
.rep__rule{ flex:1 1 auto; height:1px; background:var(--line); min-width:12px; }

.sect__h2{ font-weight:400; letter-spacing:-.012em; line-height:1.1; margin-bottom:1rem; }
.sect__lead{ font-size:.98rem; line-height:1.7; color:var(--ink-mute); }

.sect--ink{ background:var(--ink); color:var(--text); }
.sect--navy{ background:var(--navy); color:var(--text); }
.sect--ink .rep__label,.sect--navy .rep__label{ color:rgba(238,242,245,.58); }
.sect--ink .rep__rule,.sect--navy .rep__rule{ background:var(--line-up); }
.sect--ink .sect__lead,.sect--navy .sect__lead{ color:rgba(238,242,245,.72); }

/* ---------- 01 the definition ---------- */
.def{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(1.6rem,3.6vw,3.4rem);
  align-items:start;
}
.def__main{ min-width:0; }
.def__main .sect__h2{ max-width:22ch; }
.def__p{ font-size:1rem; line-height:1.74; color:rgba(238,242,245,.74); max-width:60ch; }
.def__p + .def__p{ margin-top:1rem; }

.note{
  border:1px solid var(--line-up);
  border-top:2px solid var(--mark);
  padding:1.25rem 1.3rem;
  background:rgba(255,255,255,.03);
}
.note__k{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mark); margin-bottom:.7rem;
}
.note__t{ font-size:.9rem; line-height:1.68; color:rgba(238,242,245,.72); }

/* ---------- 02 scope ---------- */
.scope{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.65fr);
  gap:clamp(1.6rem,3.6vw,3.2rem);
  align-items:start;
}
.scope__main{ min-width:0; }
.scope__main .sect__h2{ max-width:20ch; }
.scope__main .sect__lead{ margin-bottom:2rem; }
.scope .plate{ align-self:end; }

.reg{ border-top:1px solid var(--line); }
.reg__row{
  display:grid;
  grid-template-columns:2.5rem minmax(0,10.5rem) minmax(0,1fr);
  gap:.3rem 1.1rem; align-items:baseline;
  padding:1.05rem 0; border-bottom:1px solid var(--line);
}
.reg__n{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; color:var(--mark); }
.reg__t{
  font-family:var(--font-display); font-weight:400; font-size:.86rem;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.35;
}
.reg__d{ font-size:.88rem; line-height:1.62; color:var(--ink-mute); min-width:0; overflow-wrap:anywhere; }

/* ---------- photo plates ---------- */
.plate{ margin:0; min-width:0; }
.plate__img{
  position:relative; overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--panel);
}
.plate__img img{ display:block; width:100%; height:100%; object-fit:cover; }
.plate--wall .plate__img{ aspect-ratio:5/3; }
.plate--level .plate__img{ aspect-ratio:16/10; }
.plate__pin{
  position:absolute;
  width:28px; height:28px; border-radius:50%;
  background:var(--mark); color:#fff;
  font-family:var(--font-mono); font-size:.56rem; font-weight:700;
  display:grid; place-items:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.92);
}
.plate--wall .plate__pin{ left:53%; top:26%; }
.plate--level .plate__pin{ left:46%; top:36%; }
.plate__pin::after{
  content:""; position:absolute; left:100%; top:50%;
  width:36px; height:1px; background:var(--mark);
}
.plate__cap{
  display:flex; flex-wrap:wrap; gap:.15rem .55rem;
  margin-top:.55rem; padding-top:.55rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel); line-height:1.6;
}
.plate__cap span{ color:var(--mark); }
.sect--navy .plate__img{ border-color:rgba(255,255,255,.22); }
.sect--navy .plate__cap{ color:rgba(238,242,245,.6); border-top-color:var(--line-up); }

/* ---------- 03 the report ---------- */
.deliv{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  gap:clamp(1.6rem,3.6vw,3.2rem);
  align-items:start;
}
.deliv__main{ min-width:0; }
.deliv__main .sect__h2{ max-width:24ch; }
.deliv .plate{ align-self:end; }
.rpt{
  margin-top:1.9rem; background:#fff; color:var(--ink);
  border:1px solid rgba(255,255,255,.24);
}
.rpt__bar{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem .7rem; background:var(--panel);
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel);
}
.rpt__note{
  padding:.65rem .7rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.55rem; line-height:1.6; color:var(--steel);
}

/* ---------- 04 the inspector ---------- */
.who{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.6rem,3.6vw,3.2rem);
  align-items:start;
}
.who__main{ min-width:0; }
.who__main .sect__h2{ max-width:24ch; }
.who__p{ font-size:.96rem; line-height:1.74; color:var(--ink-mute); max-width:58ch; }
.who__p + .who__p{ margin-top:1rem; }

.creds{ border-top:1px solid var(--line); margin-top:.4rem; }
.creds__row{
  display:grid; grid-template-columns:minmax(0,8rem) minmax(0,1fr);
  gap:.3rem 1rem; align-items:baseline;
  padding:.8rem 0; border-bottom:1px solid var(--line);
}
.creds dt{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel); line-height:1.6;
}
.creds dd{
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.03em;
  text-transform:uppercase; line-height:1.45; min-width:0; overflow-wrap:anywhere;
}

/* ---------- 05 coverage ---------- */
.cov{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:clamp(1.6rem,3.6vw,3.2rem);
  align-items:start;
}
.cov__intro{ min-width:0; }
.areas{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 1.6rem; border-top:1px solid var(--line-up);
}
.areas a{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.72rem 0; border-bottom:1px solid var(--line-up);
  font-size:.88rem; color:rgba(238,242,245,.86);
  transition:color .18s, padding-left .2s var(--ease);
  min-width:0;
}
.areas a span{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.08em;
  color:var(--mark); flex:0 0 auto;
}
.areas a:hover{ color:#fff; padding-left:4px; }

/* ---------- 06 standards ---------- */
.std{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.6vw,3.4rem);
  align-items:start;
}
.std__main{ min-width:0; }
.std__main .sect__h2{ max-width:20ch; }
.next{ border-top:1px solid var(--line); }
.next a{
  display:grid; grid-template-columns:1.9rem minmax(0,1fr) auto;
  align-items:center; gap:1rem;
  padding:.95rem 0; border-bottom:1px solid var(--line);
  transition:color .18s;
}
.next__n{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.06em; color:var(--mark); }
.next__t{
  font-family:var(--font-display); font-weight:400; font-size:.95rem;
  letter-spacing:.03em; text-transform:uppercase;
}
.next__a{ color:var(--steel); transition:transform .2s var(--ease), color .18s; }
.next a:hover{ color:var(--navy); }
.next a:hover .next__a{ transform:translateX(4px); color:var(--mark); }

/* ---------- contact ---------- */
.ct__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.6rem,3.6vw,3.4rem);
  align-items:end;
}
.ct__grid > div{ min-width:0; }
.ct__loc{
  margin-top:1.3rem;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(238,242,245,.58);
}
.ct__card{ border-top:1px solid rgba(255,255,255,.24); padding-top:1.1rem; }
.ct__k{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mark); margin-bottom:.45rem;
}
.ct__tel{
  display:block; font-family:var(--font-mono); font-weight:700;
  font-size:clamp(1.3rem,3.2vw,2rem); line-height:1.1; color:#fff;
  letter-spacing:.005em; overflow-wrap:anywhere;
  margin-bottom:1.2rem; transition:color .18s;
}
.ct__tel:hover{ color:var(--mark); }
.ct__row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.ct__mail{
  display:block; font-family:var(--font-mono); font-size:.86rem;
  color:rgba(255,255,255,.82); margin-bottom:1.2rem;
  overflow-wrap:anywhere; transition:color .18s;
}
.ct__mail:hover{ color:var(--mark); }


/* ---------- footer ---------- */
.foot{ background:var(--ink); border-top:1px solid var(--line-up); }
.foot__top{ grid-template-columns:minmax(0,.82fr) minmax(0,1.78fr); }
.foot__nav{ gap:1.2rem; }
.foot .brand{ display:inline-block; margin-bottom:1.2rem; }
.foot__blurb{ font-size:.84rem; line-height:1.66; color:rgba(238,242,245,.55); max-width:34ch; }
.foot__contact{
  display:grid; gap:.4rem; margin-top:1.1rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.03em;
}
.foot__contact a{ color:rgba(238,242,245,.8); transition:color .18s; }
.foot__contact a:hover{ color:var(--mark); }
.foot__h{ color:rgba(238,242,245,.45); }
.foot__nav a{ font-size:.82rem; color:rgba(238,242,245,.78); }
.foot__nav a:hover{ color:var(--mark); }
.foot__bottom{ color:rgba(238,242,245,.4); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  /* the extract cannot sit beside the drawing in a narrow column */
  .sheet__tab{
    position:static; width:auto;
    border-left:0; border-top:1px solid var(--line);
  }
  .elev__lead{ display:none; }
}

@media (max-width:1023px){
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:2.2rem; align-items:start; }
  .hero__copy{ order:1; }
  .sheet{ order:2; }
  .def,.scope,.deliv,.who,.cov,.std,.ct__grid{
    grid-template-columns:minmax(0,1fr);
    gap:1.8rem;
  }
  .ct__grid{ align-items:start; }

  /* mobile overlay: dark ground, light type */
  .nav{ color:var(--text); }
  .nav__link{ color:var(--text); }
  .nav__link:hover{ color:var(--text); background:none; }
  .nav__item.is-open > .nav__link{ color:#fff; background:none; }
  .nav__head{ border-bottom-color:var(--line-up); }
  .nav__item{ border-bottom-color:var(--line-up); }
  .nav__close{ border-color:rgba(255,255,255,.2); }
  .nav__foot{ color:var(--muted); }
  .nav__foot a{ color:var(--text); font-family:var(--font-mono); }
}

@media (max-width:860px){
  .reg__row{ grid-template-columns:2.2rem minmax(0,1fr); gap:.25rem .9rem; }
  .reg__d{ grid-column:2; }
  .creds__row{ grid-template-columns:minmax(0,7rem) minmax(0,1fr); }
}

@media (max-width:640px){
  .sheet__key{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .areas{ grid-template-columns:minmax(0,1fr); }
  .rep__rule{ display:none; }
  .rtab td{ font-size:.66rem; padding:.45rem .4rem; }
  .rtab th{ font-size:.48rem; padding:.38rem .4rem; letter-spacing:.1em; }
  .rtab td:last-child{ font-size:.5rem; letter-spacing:.06em; }
  .plate__pin{ width:24px; height:24px; }
  .plate__pin::after{ width:26px; }
  .elev__pin{ transform:scale(1.3); }
}

@media (max-width:420px){
  .elev__pin{ transform:scale(1.12); }
  .trust{ gap:.2rem .8rem; }
  .trust li + li::before{ display:none; }
}
@media (max-width:400px){
  .hero__cta .btn{ width:100%; justify-content:center; }
  .trust{ font-size:.54rem; letter-spacing:.12em; }
  .creds__row{ grid-template-columns:minmax(0,1fr); gap:.15rem; }
}

@media (prefers-reduced-motion: reduce){
  .pre__ring{ animation:none; opacity:0; }
  .pre__lead{ stroke-dashoffset:0; animation:none; }
}