/* ==========================================================================
   2ME WELDING & REPAIRS — design system
   Airy industrial editorial. Graphite ink, paper white, one spark green.
   ========================================================================== */

:root{
  /* Ink */
  --ink:        #101418;
  --ink-2:      #3A4249;
  --ink-3:      #636C74;

  /* Paper */
  --paper:      #FCFCFA;
  --paper-2:    #F4F4F0;
  --paper-3:    #EDEDE7;

  /* Structure */
  --line:       #E2E2DC;
  --line-2:     #D3D3CB;

  /* Spark — the one colour carried over from the logo */
  --spark:      #00BF4D;   /* vivid: marks, rules, dark-bg text  */
  --spark-ink:  #05793A;   /* AA-safe green text on light paper  */
  --spark-glow: #2BE07A;

  /* Coal — dark bands */
  --coal:       #0C1013;
  --coal-2:     #161C21;
  --coal-line:  #262E35;
  --coal-mute:  #9AA5AC;

  /* Type */
  --display: 'Familjen Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans:    'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space — generous, this is the "airy" dial */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;   --s-7: 6rem;    --s-8: 8rem;
  --s-9: 9rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1280px;
  --radius: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.02}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--spark-ink);outline-offset:3px;border-radius:var(--radius)}

/* ---------- Layout primitives ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4rem,8vw,var(--s-9))}
.section--tight{padding-block:clamp(3rem,5.5vw,5rem)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Micro type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:flex-start; gap:.6rem;
}
.eyebrow::before{
  content:''; width:18px; height:1px; background:var(--spark); flex:none; margin-top:.62em;
}
.eyebrow--plain::before{display:none}
.idx{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  color:var(--spark-ink); font-weight:500;
}

/* ---------- Headings ---------- */
.h-xl{font-size:clamp(2.5rem,5.2vw,4.5rem)}
.h-lg{font-size:clamp(2.1rem,4.6vw,3.5rem)}
.h-md{font-size:clamp(1.6rem,2.8vw,2.25rem)}
.h-sm{font-size:1.3125rem;letter-spacing:-.02em;line-height:1.2}

.lead{
  font-size:clamp(1.0625rem,1.6vw,1.25rem); line-height:1.6;
  color:var(--ink-2); max-width:56ch;
}
.body{color:var(--ink-2);max-width:64ch}
.body + .body{margin-top:var(--s-2)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:0 1.6rem; border-radius:var(--radius);
  font-family:var(--sans); font-size:.9375rem; font-weight:500; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.btn svg{flex:none}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--spark-ink)}
.btn--ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn--spark{background:var(--spark);color:var(--coal);font-weight:600}
.btn--spark:hover{background:var(--spark-glow)}
.btn--onCoal{border:1px solid var(--coal-line);color:var(--paper);background:transparent}
.btn--onCoal:hover{background:var(--paper);color:var(--coal);border-color:var(--paper)}
.btn:active{transform:translateY(1px)}

/* Text link with spark underline */
.tlink{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-weight:500;font-size:.9375rem;color:var(--ink);
  border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:border-color .22s var(--ease), color .22s var(--ease), gap .22s var(--ease);
}
.tlink:hover{border-color:var(--spark);color:var(--spark-ink);gap:.75rem}
.tlink svg{transition:transform .22s var(--ease)}
.tlink:hover svg{transform:translateX(2px)}

/* ==========================================================================
   LOGO — simplified from the original signage:
   a single spark mark + a clean "2ME" wordmark + mono descriptor.
   ========================================================================== */
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.brand__mark{width:26px;height:26px;flex:none;color:var(--spark)}
.brand__type{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--display);font-weight:600;font-size:1.375rem;
  letter-spacing:-.045em;color:var(--ink);
}
.brand__sub{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;
}
.onCoal .brand__name{color:var(--paper)}
.onCoal .brand__sub{color:var(--coal-mute)}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(252,252,250,.86);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:var(--s-4);min-height:76px}
.nav__links{display:flex;align-items:center;gap:var(--s-4);margin-left:auto}
.nav__link{
  text-decoration:none;font-size:.9375rem;font-weight:450;color:var(--ink-2);
  position:relative;padding-block:.4rem;transition:color .2s var(--ease);
}
.nav__link::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--spark);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--ink);font-weight:500}
.nav__cta{display:flex;align-items:center;gap:.75rem}
.nav__tel{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-family:var(--mono);font-size:.8125rem;font-weight:500;letter-spacing:.02em;
  color:var(--ink);white-space:nowrap;transition:color .2s var(--ease);
}
.nav__tel:hover{color:var(--spark-ink)}
.nav__tel svg{color:var(--spark-ink)}
.nav__btn{min-height:44px;padding:0 1.15rem;font-size:.875rem}

.nav__burger{
  display:none;width:44px;height:44px;margin-left:auto;background:none;
  border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
  align-items:center;justify-content:center;color:var(--ink);
}
.nav__burger:hover{border-color:var(--ink)}

/* Mobile menu */
.menu{
  position:fixed;inset:0;z-index:200;background:var(--paper);
  display:flex;flex-direction:column;padding:var(--gutter);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.menu[data-open="true"]{opacity:1;visibility:visible;transform:none}
.menu__top{display:flex;align-items:center;justify-content:space-between;min-height:76px;margin-bottom:var(--s-4)}
.menu__close{
  width:44px;height:44px;background:none;border:1px solid var(--line);
  border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--ink);
}
.menu__links{display:flex;flex-direction:column;gap:.25rem;margin-bottom:auto}
.menu__link{
  text-decoration:none;font-family:var(--display);font-size:2rem;font-weight:500;
  letter-spacing:-.03em;color:var(--ink);padding-block:.5rem;
  border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:.9rem;
}
.menu__link span{font-family:var(--mono);font-size:.6875rem;color:var(--spark-ink);letter-spacing:.14em}
.menu__foot{display:grid;gap:.75rem;padding-top:var(--s-4)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(3rem,6vw,5rem)}
.hero__grid{
  display:grid;grid-template-columns:1fr minmax(300px,404px);
  gap:clamp(2rem,5vw,5rem);align-items:end;
}
.hero__copy{max-width:none}
.hero h1{margin-top:var(--s-3);max-width:14ch}
.hero h1 em{font-style:normal;color:var(--spark-ink)}
.hero__lead{margin-top:var(--s-3);max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-4)}
.hero__fig{margin:0;position:relative}
.hero__fig img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  background:var(--paper-3);
}
.hero__cap{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.85rem;display:flex;justify-content:space-between;gap:1rem;
}

/* Service ticker — the refined descendant of the logo's green-dot strip */
.ticker{border-block:1px solid var(--line);background:var(--paper-2);overflow:hidden}
.ticker__track{
  display:flex;align-items:center;gap:0;white-space:nowrap;
  padding-block:1rem;width:max-content;
  animation:ticker 46s linear infinite;
}
.ticker__item{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);padding-inline:1.5rem;
  display:inline-flex;align-items:center;gap:1.5rem;
}
.ticker__item::after{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--spark);flex:none;
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   Editorial splits
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.split--top{align-items:start}
.split__figs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,2vw,1.25rem)}
.split__figs figure{margin:0}
.split__figs img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);background:var(--paper-3)}
.split__figs figure:last-child{margin-top:clamp(1.5rem,5vw,3.5rem)}

.stat-row{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);margin-top:var(--s-5)}
.stat__n{font-family:var(--display);font-size:2.5rem;font-weight:500;letter-spacing:-.04em;line-height:1}
.stat__l{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:.5rem}

/* ---------- Section head ---------- */
.shead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,5rem);align-items:end;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.shead__l{display:grid;gap:var(--s-3)}
.shead__r{padding-bottom:.4rem}

/* ==========================================================================
   Services — hairline list, no boxes. Airy.
   ========================================================================== */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.svc{
  padding:clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2rem);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  display:grid;gap:.9rem;align-content:start;position:relative;
  text-decoration:none;color:inherit;
  transition:background .25s var(--ease);
}
.svcs > .svc:nth-child(3n){border-right:0}
.svc::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--spark);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.svc:hover{background:var(--paper-2)}
.svc:hover::before{transform:scaleX(1)}
.svc__ico{width:26px;height:26px;color:var(--spark-ink);margin-bottom:.35rem}
.svc h3{font-size:1.1875rem;letter-spacing:-.02em;line-height:1.25}
.svc p{font-size:.9375rem;color:var(--ink-2);line-height:1.6}
.svc__more{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:.4rem;margin-top:.35rem;
  transition:color .22s var(--ease),gap .22s var(--ease);
}
.svc:hover .svc__more{color:var(--spark-ink);gap:.65rem}

/* ==========================================================================
   Coal band
   ========================================================================== */
.coal{background:var(--coal);color:var(--paper)}
.coal .eyebrow{color:var(--coal-mute)}
.coal .lead,.coal .body{color:#C6CDD2}
.coal .rule{background:var(--coal-line)}
.coal .stat__l{color:var(--coal-mute)}
.coal .idx{color:var(--spark)}

.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--coal-line);margin-top:clamp(2.5rem,5vw,4rem)}
.spec{padding:var(--s-4) var(--s-3) 0 0;border-right:1px solid var(--coal-line)}
.specs > .spec:last-child{border-right:0}
.spec:not(:first-child){padding-left:var(--s-3)}
.spec__k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--spark);margin-bottom:.7rem}
.spec__v{font-family:var(--display);font-size:1.375rem;font-weight:500;letter-spacing:-.025em;line-height:1.2}
.spec__d{font-size:.875rem;color:var(--coal-mute);margin-top:.5rem;line-height:1.55}

/* ==========================================================================
   Work gallery — portrait cards, the shape their photos actually are
   ========================================================================== */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.6vw,1.25rem)}
.gal--3{grid-template-columns:repeat(3,1fr)}
.gcard{margin:0;position:relative;overflow:hidden;border-radius:var(--radius)}
.gcard img{
  width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--paper-3);
  transition:transform .6s var(--ease);
}
.gcard:hover img{transform:scale(1.035)}
.gcard figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.1rem 1.1rem;
  background:linear-gradient(to top,rgba(12,16,19,.95) 0%,rgba(12,16,19,.86) 40%,rgba(12,16,19,.55) 70%,rgba(12,16,19,0) 100%);
  color:#fff;
}
.gcard__t{font-family:var(--display);font-size:1rem;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.gcard__m{font-family:var(--mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--spark-glow);margin-bottom:.35rem}

/* Offset gallery rhythm on the home page */
.gal--offset .gcard:nth-child(even){margin-top:clamp(1rem,3vw,2.5rem)}

/* ==========================================================================
   Process
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:var(--s-4) var(--s-3) 0 0;border-right:1px solid var(--line)}
.steps > .step:last-child{border-right:0}
.step:not(:first-child){padding-left:var(--s-3)}
.step h3{font-size:1.125rem;margin:.9rem 0 .55rem}
.step p{font-size:.9375rem;color:var(--ink-2);line-height:1.6}

/* ==========================================================================
   Service area
   ========================================================================== */
.areas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s-4);max-width:70ch}
.area{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  padding:.5rem .85rem;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink-2);background:var(--paper);
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.quote{display:grid;gap:1rem;align-content:start;border-top:2px solid var(--spark);padding-top:var(--s-3)}
.quote blockquote{margin:0;font-family:var(--display);font-size:1.1875rem;font-weight:400;letter-spacing:-.015em;line-height:1.4}
.quote figcaption{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta__grid{display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:end}
.cta__actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.form{display:grid;gap:var(--s-3)}
.field{display:grid;gap:.5rem}
.field label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.field label .req{color:var(--spark-ink)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  padding:.85rem 1rem;min-height:52px;background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--radius);width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--spark-ink);box-shadow:0 0 0 3px rgba(5,121,58,.12);
}
.field__help{font-size:.8125rem;color:var(--ink-3)}
.form__note{font-size:.8125rem;color:var(--ink-3);max-width:48ch}

.dl{display:grid;gap:0;border-top:1px solid var(--line)}
.dl__row{display:grid;grid-template-columns:130px 1fr;gap:var(--s-3);padding-block:var(--s-3);border-bottom:1px solid var(--line);align-items:baseline}
.dl__k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.dl__v{font-size:1.0625rem;color:var(--ink)}
.dl__v a{text-decoration:none;border-bottom:1px solid var(--line-2);transition:border-color .2s var(--ease),color .2s var(--ease)}
.dl__v a:hover{color:var(--spark-ink);border-color:var(--spark)}
.dl__v small{display:block;font-size:.875rem;color:var(--ink-3);margin-top:.25rem}

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.phead{padding-top:clamp(3rem,6vw,5.5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.phead__grid{display:grid;grid-template-columns:1fr minmax(280px,440px);gap:clamp(2rem,5vw,5rem);align-items:end}
.crumbs{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-3)}
.crumbs a{text-decoration:none;color:var(--ink-3);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--spark-ink)}
.crumbs span{margin-inline:.5rem;color:var(--ink-3)}

/* ==========================================================================
   Service detail rows
   ========================================================================== */
.srow{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:clamp(2rem,5vw,5rem);align-items:start;padding-block:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line)}
.srow:first-of-type{border-top:1px solid var(--line)}
.srow__body{display:grid;gap:var(--s-3);max-width:60ch}
.srow img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);background:var(--paper-3)}
.checks{display:grid;gap:.7rem;margin-top:.35rem}
.checks li{display:grid;grid-template-columns:18px 1fr;gap:.75rem;align-items:start;font-size:.9375rem;color:var(--ink-2)}
.checks svg{color:var(--spark-ink);margin-top:.35rem}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--line);max-width:82ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding-block:var(--s-3);
  font-family:var(--display);font-size:1.1875rem;font-weight:500;letter-spacing:-.02em;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--spark-ink)}
.faq summary::after{
  content:'';width:12px;height:12px;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:var(--s-3);color:var(--ink-2);max-width:70ch}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{background:var(--coal);color:var(--paper);padding-block:clamp(3.5rem,7vw,var(--s-7)) var(--s-4)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s-5)}
.foot h4{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--spark);margin-bottom:var(--s-3)}
.foot__links{display:grid;gap:.7rem}
.foot__links a{text-decoration:none;font-size:.9375rem;color:#C6CDD2;transition:color .2s var(--ease)}
.foot__links a:hover{color:var(--paper)}
.foot__blurb{font-size:.9375rem;color:var(--coal-mute);max-width:34ch;margin-top:var(--s-3);line-height:1.65}
.foot__social{display:flex;gap:.6rem;margin-top:var(--s-3)}
.foot__social a{
  width:42px;height:42px;border:1px solid var(--coal-line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;color:#C6CDD2;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.foot__social a:hover{border-color:var(--spark);color:var(--spark)}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);justify-content:space-between;
  border-top:1px solid var(--coal-line);margin-top:clamp(3rem,6vw,4.5rem);padding-top:var(--s-3);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--coal-mute);
}
.foot__bar a{color:var(--coal-mute);text-decoration:none}
.foot__bar a:hover{color:var(--paper)}

/* Sticky mobile call bar */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--coal);border-top:1px solid var(--coal-line);
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  gap:.6rem;
}
.callbar .btn{flex:1;min-height:48px;font-size:.875rem}

/* Skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);
  padding:.9rem 1.25rem;text-decoration:none;font-size:.875rem;
}
.skip:focus{left:var(--gutter);top:var(--s-2)}

/* ==========================================================================
   Reveal
   ========================================================================== */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .svcs{grid-template-columns:repeat(2,1fr)}
  .svcs > .svc:nth-child(3n){border-right:1px solid var(--line)}
  .svcs > .svc:nth-child(2n){border-right:0}
  .gal{grid-template-columns:repeat(3,1fr)}
  .specs,.steps{grid-template-columns:repeat(2,1fr)}
  .spec:nth-child(2n),.step:nth-child(2n){border-right:0}
  .spec:nth-child(n+3),.step:nth-child(n+3){border-top:1px solid var(--coal-line);margin-top:var(--s-3)}
  .step:nth-child(n+3){border-top-color:var(--line)}
  .foot__grid{grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-4)}
}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .hero__grid,.phead__grid,.split,.shead,.contact-grid,.srow,.cta__grid{grid-template-columns:1fr}
  .hero__copy{max-width:none}
  .hero__grid{align-items:start}
  .hero__fig{max-width:404px}
  .shead{gap:var(--s-3)}
  .shead__r{padding-bottom:0}
  .cta__grid{gap:var(--s-4)}
  .split__figs figure:last-child{margin-top:var(--s-4)}
  .srow{gap:var(--s-4)}
  .srow img{max-width:380px}
  .quotes{grid-template-columns:1fr}
  .callbar{display:flex}
  body{padding-bottom:76px}
  .foot{padding-bottom:88px}
}

@media (max-width:640px){
  body{font-size:16px}
  .gal,.gal--3{grid-template-columns:repeat(2,1fr)}
  .gal--offset .gcard:nth-child(even){margin-top:0}
  .split__figs{gap:.75rem}
  .specs,.steps{grid-template-columns:1fr}
  .spec,.step{border-right:0;padding-left:0!important;padding-right:0}
  .spec:not(:first-child),.step:not(:first-child){border-top:1px solid var(--coal-line);margin-top:var(--s-3)}
  .step:not(:first-child){border-top-color:var(--line)}
  .foot__grid{grid-template-columns:1fr}
  .dl__row{grid-template-columns:1fr;gap:.4rem}
  .stat-row{gap:var(--s-4)}
  .svcs{grid-template-columns:1fr}
  .svcs > .svc{border-right:0!important}
}

/* ==========================================================================
   Motion / print preferences
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .ticker__track{animation:none}
}

@media print{
  .nav,.callbar,.menu,.ticker{display:none}
  body{font-size:11pt;background:#fff}
  .coal,.foot{background:#fff;color:#000}
}

/* ==========================================================================
   Touch-target compliance (>=44px) — appended after the responsive rules
   so these win where they overlap.
   ========================================================================== */
.brand{min-height:44px}
.foot__social a{width:44px;height:44px}

@media (max-width:900px){
  /* Inline text links get a full-height hit area without changing how they look */
  .tlink{min-height:44px;align-items:center;padding-bottom:0;
         border-bottom:0;box-shadow:inset 0 -1px 0 var(--line-2)}
  .tlink:hover{box-shadow:inset 0 -1px 0 var(--spark)}

  /* Footer link lists: trade the gap for padding so each row is 44px tall */
  .foot__links{gap:0}
  .foot__links a{min-height:44px;display:flex;align-items:center;padding-block:.55rem}

  /* Breadcrumb + detail-list links */
  .crumbs a{display:inline-block;min-height:44px;line-height:44px;padding-inline:8px;margin-inline:-8px}
  .dl__v a{display:inline-block;min-height:44px;line-height:1.5;padding-block:.6rem}
}

/* ==========================================================================
   LANDING HERO — dark, dense, composition-led.
   The source photos are only 360px wide, so nothing here is ever displayed
   above ~400px: presence comes from the dark ground and the overlap, not
   from scaling a small image up.
   ========================================================================== */
.lede{
  position:relative;
  padding-top:clamp(3rem,6vw,5rem);
  padding-bottom:0;
  overflow:hidden;
}
/* Soft radial lift behind the type so the flat black doesn't read as dead */
.lede::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 88% 8%, rgba(0,191,77,.055) 0%, transparent 62%),
    radial-gradient(80% 60% at 4% 96%, rgba(255,255,255,.028) 0%, transparent 66%);
}
.lede > *{position:relative}

.lede__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 470px;
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
  padding-bottom:clamp(3rem,6vw,5rem);
}

.lede__h1{
  font-size:clamp(2.5rem,5vw,4.25rem);
  letter-spacing:-.035em;line-height:1.02;
  margin-top:var(--s-3);max-width:15ch;
}
.lede__h1 em{font-style:normal;color:var(--spark)}
.lede__lead{
  margin-top:var(--s-3);max-width:50ch;
  font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.6;color:#C6CDD2;
}
.lede__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-4)}

.lede__trust{
  display:flex;flex-wrap:wrap;gap:.75rem var(--s-4);
  margin-top:var(--s-4);padding-top:var(--s-4);
  border-top:1px solid var(--coal-line);
}
.lede__trust li{
  display:flex;align-items:center;gap:.5rem;
  font-size:.875rem;color:#C6CDD2;
}
.lede__trust svg{color:var(--spark);flex:none}

/* --- Image pair: A anchors, B overlaps into the gutter --- */
.lede__stack{position:relative;padding-bottom:clamp(2rem,5vw,4rem)}
.lede__fig{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--coal-2)}
.lede__fig img{width:100%;height:100%;object-fit:cover;display:block}

.lede__fig--a{
  width:100%;aspect-ratio:4/5;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.lede__fig--b{
  position:absolute;left:-96px;bottom:0;
  width:232px;aspect-ratio:3/4;
  border:1px solid var(--coal-line);
  box-shadow:0 22px 48px rgba(0,0,0,.62);
}
.lede__fig--b figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem;
  background:linear-gradient(to top,rgba(12,16,19,.94) 0%,rgba(12,16,19,0) 100%);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:#E4E8EA;line-height:1.3;
}

/* --- Capability strip closing the hero --- */
.lede__bar{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--coal-line);
}
.lbar{padding:var(--s-3) var(--s-3) var(--s-4) 0;border-right:1px solid var(--coal-line)}
.lbar:last-child{border-right:0}
.lbar:not(:first-child){padding-left:var(--s-3)}
.lbar__k{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--spark);margin-bottom:.6rem;
}
.lbar__v{font-size:.9375rem;color:#D4DADE;line-height:1.4}

/* ==========================================================================
   Home-page nav sits over the dark hero
   ========================================================================== */
body.home .nav{background:var(--coal);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
/* scoped to .nav — the mobile menu overlay is light, and the footer brand
   is handled by .onCoal. Unscoped, this made "2ME" white-on-white in the menu. */
body.home .nav .brand__name{color:var(--paper)}
body.home .nav .brand__sub{color:var(--coal-mute)}
body.home .nav__link{color:#C6CDD2}
body.home .nav__link:hover,
body.home .nav__link[aria-current="page"]{color:var(--paper)}
body.home .nav__tel{color:var(--paper)}
body.home .nav__tel svg{color:var(--spark)}
body.home .nav__tel:hover{color:var(--spark)}
body.home .nav__btn.btn--primary{background:var(--spark);color:var(--coal);font-weight:600}
body.home .nav__btn.btn--primary:hover{background:var(--spark-glow)}
body.home .nav__burger{border-color:var(--coal-line);color:var(--paper)}
body.home .nav__burger:hover{border-color:var(--paper)}
body.home .nav.is-stuck{
  background:rgba(12,16,19,.92);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--coal-line);
}

/* ==========================================================================
   Landing hero — responsive
   ========================================================================== */
@media (max-width:1080px){
  .lede__grid{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-4)}
  .lede__fig--b{left:-64px;width:190px}
  .lede__bar{grid-template-columns:repeat(2,1fr)}
  .lbar:nth-child(2n){border-right:0}
  .lbar:nth-child(n+3){border-top:1px solid var(--coal-line)}
}

@media (max-width:900px){
  .lede__grid{grid-template-columns:1fr;align-items:start;gap:var(--s-5)}
  .lede__h1{max-width:none}
  .lede__stack{max-width:400px;padding-bottom:0;padding-left:76px}
  .lede__fig--b{left:0;bottom:-28px;width:172px}
  .lede__stack{padding-bottom:28px}
}

@media (max-width:640px){
  /* --- Phone hero: tighten the stack so the work photo reaches the fold --- */
  .lede{padding-top:var(--s-3)}
  .lede__grid{gap:var(--s-4);padding-bottom:var(--s-4)}
  .lede__h1{font-size:clamp(2.125rem,8.8vw,2.5rem);letter-spacing:-.032em;line-height:1.06}
  .lede__lead{font-size:.9375rem;line-height:1.55;margin-top:var(--s-2)}

  /* Two compact CTAs on one row, not two full-width slabs that
     duplicate the sticky bar sitting right below them */
  .lede__actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:var(--s-3)}
  .lede__actions .btn{min-height:50px;padding:0 .7rem;font-size:.875rem;white-space:nowrap}

  /* Deliberate spec list rather than a wrapped orphan */
  .lede__trust{grid-template-columns:1fr;display:grid;gap:.5rem;
               margin-top:var(--s-3);padding-top:var(--s-3)}
  .lede__trust li{font-size:.8125rem}

  .lede__stack{padding-left:56px;max-width:none}
  .lede__fig--b{width:142px}

  /* 2x2 reads composed; four stacked rows read like a dump */
  .lede__bar{grid-template-columns:1fr 1fr}
  /* nth-child selectors here must beat the base `.lbar:not(:first-child)`
     padding rule, so both columns are stated explicitly */
  .lbar{border-right:1px solid var(--coal-line);padding-block:var(--s-3)}
  .lbar:nth-child(2n+1){padding-left:0;padding-right:var(--s-2)}
  .lbar:nth-child(2n){border-right:0;padding-left:var(--s-2);padding-right:0}
  .lbar:nth-child(n+3){border-top:1px solid var(--coal-line)}
  .lbar__k{letter-spacing:.12em;margin-bottom:.45rem}
  .lbar__v{font-size:.875rem;line-height:1.35}
}

/* Trim the eyebrow on phones so "NSW" never orphans onto its own line */
@media (max-width:640px){
  .u-wide-only{display:none}
  .eyebrow{letter-spacing:.13em}
}

/* Nav links stay touch-sized on tablets (they're visible down to 900px) */
.nav__link{padding-block:.72rem}
.nav__tel{padding-block:.72rem}

/* Section headings scale down on phones — 34px reads shouty in a 390px column */
@media (max-width:640px){
  .h-lg{font-size:1.875rem;line-height:1.08}
  .h-md{font-size:1.5rem;line-height:1.12}
}

/* ==========================================================================
   Phones: service cards become compact rows.
   Stacked full-width blocks (icon / number / title / copy / "Detail")
   turned six services into an endless scroll. Pairing the icon and index on
   one line and flushing the cards to the page gutter roughly halves the
   height and reads composed rather than listy.
   ========================================================================== */
@media (max-width:640px){
  .svcs{border-top:1px solid var(--line)}
  .svc{
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:.45rem .7rem;
    padding:1.3rem 0;
  }
  .svc__ico{grid-column:1;grid-row:1;width:22px;height:22px;margin-bottom:0}
  .svc .idx{grid-column:2;grid-row:1;justify-self:start;align-self:center}
  .svc h3{
    grid-column:1/-1;font-size:1.0625rem;margin-top:.1rem;
    position:relative;padding-right:1.6rem;
  }
  /* chevron replaces the "Detail" line as the affordance — the row is the link */
  .svc h3::after{
    content:'';position:absolute;right:2px;top:.28em;width:13px;height:13px;
    background:currentColor;opacity:.32;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .svc p{grid-column:1/-1;font-size:.875rem;line-height:1.55}
  .svc__more{display:none}
  .svc:hover{background:transparent}

  /* Process steps get the same treatment */
  .step{padding-block:1.15rem}
  .step h3{font-size:1.0625rem;margin:.55rem 0 .4rem}
  .step p{font-size:.875rem;line-height:1.55}
}

/* Phones: pair the footer link columns instead of one long stack
   (44px touch rows x 14 links made the footer ~1400px tall) */
@media (max-width:640px){
  .foot__grid{grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-4)}
  .foot__grid > div:nth-child(1),
  .foot__grid > div:nth-child(4){grid-column:1/-1}
  .foot__links a{font-size:.875rem}
  .foot__bar{gap:.5rem}
}

/* .srow__body is a grid, so the stacked-paragraph margin doubled the gap */
.srow__body .body + .body{margin-top:0}

/* ==========================================================================
   BRAND — supplied 2M lockup.
   Two raster variants: the as-supplied dark-ink logo for light surfaces, and
   a lightness-inverted one for the coal nav/footer (the wordmark and the "M"
   are near-black and would otherwise vanish). Green is preserved in both.
   ========================================================================== */
.brand__img{display:block;height:84px;width:auto}
.brand__img--light{display:none}

/* Dark surfaces: home-page nav and the footer */
.onCoal .brand__img--dark,
body.home .nav .brand__img--dark{display:none}
.onCoal .brand__img--light,
body.home .nav .brand__img--light{display:block}

.foot .brand__img{height:110px}
.menu .brand__img{height:72px}

@media (max-width:640px){
  .brand__img{height:64px}
  .foot .brand__img{height:88px}
  .menu .brand__img{height:60px}
}

/* ==========================================================================
   CENTRED MASTHEAD + CENTRED HERO
   Logo sits top-centre; phone left, quote button right; nav links on a
   second centred row. Shrinks on scroll so the sticky bar stays compact.
   ========================================================================== */
.nav__in{display:block;min-height:0;padding-block:.85rem}
.nav__top{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
}
.nav__top .nav__tel{justify-self:start}
.nav__top .brand{justify-self:center}
.nav__top .nav__btn{justify-self:end}

.nav__links{
  display:flex;justify-content:center;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);
  margin-left:0;margin-top:.7rem;padding-top:.6rem;
  border-top:1px solid var(--line);
}
body.home .nav__links{border-top-color:var(--coal-line)}

/* Logo shrinks once the masthead sticks */
.brand__img{transition:height .3s var(--ease)}
.nav.is-stuck .brand__img{height:46px}

/* ---------- Centred hero ---------- */
.lede__center{
  max-width:820px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.eyebrow--c{justify-content:center}
.eyebrow--c::after{content:'';width:18px;height:1px;background:var(--spark);flex:none;margin-top:.62em}
.lede__center .lede__h1{max-width:18ch;margin-top:var(--s-3)}
.lede__center .lede__lead{max-width:60ch;margin-inline:auto}
.lede__center .lede__actions{justify-content:center}
.lede__center .lede__trust{
  justify-content:center;width:100%;max-width:640px;
  border-top:1px solid var(--coal-line);
}

/* Three portraits, symmetrical under the centred copy */
.lede__strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.75rem,1.6vw,1.25rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.lede__shot{margin:0}
.lede__shot img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);
  background:var(--coal-2);display:block;
}
.lede__shot figcaption{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--coal-mute);margin-top:.75rem;text-align:center;
}

/* Capability strip: centre each cell to match the composition */
.lede__bar{margin-top:clamp(2.5rem,5vw,4rem)}
.lbar{text-align:center;padding:var(--s-4) var(--s-2) var(--s-3)}
.lbar:not(:first-child){padding-left:var(--s-2)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav__top{grid-template-columns:1fr auto 1fr}
  .nav__top .nav__tel,.nav__top .nav__btn{display:none}
  .nav__burger{margin-left:0;justify-self:end;grid-column:3}
  .nav__links{display:none}
  .nav__in{padding-block:.7rem}
}

@media (max-width:640px){
  .lede__strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.5rem;
  }
  .lede__shot figcaption{font-size:.6875rem;letter-spacing:.06em;margin-top:.5rem}
  .lede__center .lede__trust{max-width:none}
  .lbar{padding-inline:var(--s-2)!important;text-align:center}
}

/* ==========================================================================
   Centred-masthead + centred-hero corrections
   ========================================================================== */
/* Explicit placement: hiding the phone link with display:none removed it from
   the grid entirely, so the logo fell back into column 1 and stopped centring. */
.nav__top .nav__tel{grid-column:1}
.nav__top .brand{grid-column:2}
.nav__top .nav__btn{grid-column:3}
.nav__top .nav__burger{grid-column:3;justify-self:end}

/* A centred block of left-aligned ticks reads better than centred text */
.lede__center .lede__trust{justify-content:center}

@media (max-width:640px){
  .lede__center .lede__trust{
    display:grid;grid-template-columns:max-content;justify-content:center;gap:.5rem;
  }
  /* 1 + 2 mosaic: three thumbnails across a phone were too small to show the work */
  .lede__strip{grid-template-columns:1fr 1fr;gap:.6rem}
  .lede__shot:first-child{grid-column:1/-1}
  .lede__shot figcaption{font-size:.6875rem;letter-spacing:.08em}
}

/* A two-row masthead at 146px is too much sticky real estate — compact it
   once scrolled, keeping nav links at a 44px touch height. */
.nav__in,.nav__links{transition:padding .3s var(--ease), margin .3s var(--ease)}
.nav.is-stuck .nav__in{padding-block:.5rem}
.nav.is-stuck .brand__img{height:46px}
.nav.is-stuck .nav__links{margin-top:.4rem;padding-top:.4rem}

/* ==========================================================================
   Landscape gallery card — the aerial structural-steel shot is 3:2, so it
   spans two columns instead of being cropped to a vertical sliver.
   ========================================================================== */
.gcard--wide{grid-column:span 2}
.gcard--wide img{aspect-ratio:3/2}
@media (max-width:640px){
  .gcard--wide{grid-column:span 2}
  .gcard--wide img{aspect-ratio:4/3}
}

/* ==========================================================================
   Persistent call action on desktop.
   The sticky masthead carries the number, but it is not enough on its own —
   people decide to ring mid-page. This pill fades in past the hero.
   ========================================================================== */
.callpill{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:95;
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:56px;padding:0 1.4rem;border-radius:999px;
  background:var(--spark);color:var(--coal);
  font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .2s var(--ease);
}
.callpill svg{flex:none}
.callpill:hover{background:var(--spark-glow)}
body.show-callpill .callpill{opacity:1;visibility:visible;transform:none}
@media (max-width:900px){ .callpill{display:none} }   /* the bottom bar covers mobile */
@media (prefers-reduced-motion:reduce){
  .callpill{transition:none}
}

/* Footer credit sits opposite the client's own copyright line */
.foot__credit{letter-spacing:.1em}
.foot__credit strong{font-weight:600;letter-spacing:.14em}

/* ==========================================================================
   Hero strip: the drone shot is 3:2, so it takes a double-width slot and the
   whole row runs to one fixed image height. At 1440 that lands the wide slot
   at ~556x374 (3:2) and the portraits at ~278x374 (3:4) — captions align
   without fudging aspect ratios.
   ========================================================================== */
.lede__strip{grid-template-columns:2fr 1fr 1fr;align-items:start}
.lede__shot img{height:clamp(240px,26vw,380px);aspect-ratio:auto}

/* Structural steel service row carries the landscape drone shot */
.srow__fig--wide img{aspect-ratio:3/2}

@media (max-width:900px){
  .srow__fig--wide img{max-width:none}
}

@media (max-width:640px){
  /* drone shot full width, the two portraits paired beneath it */
  .lede__strip{grid-template-columns:1fr 1fr}
  .lede__shot--wide{grid-column:1/-1}
  .lede__shot--wide img{height:auto;aspect-ratio:3/2}
  .lede__shot:not(.lede__shot--wide) img{height:auto;aspect-ratio:3/4}
}

/* ABN / ACN sits under the copyright in the footer bottom bar */
.foot__abn{display:block;margin-top:.35rem;letter-spacing:.08em;color:var(--coal-mute)}

/* Builder credits — same rule-topped card as the quote block, name-led */
.quote--credit{gap:.5rem}
.credit__name{
  font-family:var(--display);font-size:1.375rem;font-weight:500;
  letter-spacing:-.02em;line-height:1.2;color:var(--ink);
}

/* ==========================================================================
   Scope line closing the hero — the client's own "All aspects of welding,
   fabrication & repairs" statement, set as a centred header over the
   capability cells.
   ========================================================================== */
.lede__scope{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:var(--s-4);
  border-top:1px solid var(--coal-line);text-align:center;
}
.lede__scope-k{
  margin:0;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--spark);
}
.lede__scope-v{
  margin:.8rem auto 0;max-width:62ch;
  font-family:var(--display);font-size:clamp(1.0625rem,1.6vw,1.3125rem);
  font-weight:500;letter-spacing:-.01em;line-height:1.45;color:var(--paper);
}
/* the cells now sit directly under the scope line */
.lede__scope + .lede__bar{margin-top:var(--s-4)}

@media (max-width:640px){
  .lede__scope{padding-top:var(--s-3)}
  .lede__scope-k{font-size:.6875rem;letter-spacing:.12em;line-height:1.5}
  .lede__scope-v{font-size:1rem}
  .lede__scope + .lede__bar{margin-top:var(--s-3)}
}
/* balance the scope list so "installation" never orphans onto line two */
.lede__scope-v{text-wrap:balance}

/* ==========================================================================
   MASTHEAD — fixed, over a spacer of identical height.
   It used to be position:sticky, i.e. part of the page flow, and it shrinks
   ~57px on scroll. Shrinking an in-flow element pulls everything below it up;
   scroll anchoring then pulled the scroll position back under the trigger
   threshold, the header grew again, and it looped — visible as shaking.
   Fixed takes the header out of the flow, so its shrink moves nothing.
   The spacer holds the unstuck height, computed from the SAME variables the
   header is built from, so the two cannot drift apart.
   ========================================================================== */
:root{
  --nav-pad:.85rem;                               /* .nav__in top/bottom   */
  --nav-logo:84px;
  --nav-gap:.7rem;                                /* above links hairline  */
  --nav-links-pad:.6rem;                          /* below links hairline  */
  --nav-link-h:calc(1.44rem + .9375rem * 1.65);   /* .72rem pad x2 + line  */
  /* trailing + 1px on each is the .nav border-bottom */
  --nav-h:calc(var(--nav-pad) * 2 + var(--nav-logo) + var(--nav-gap) + 1px
               + var(--nav-links-pad) + var(--nav-link-h) + 1px);
  --nav-h-stuck:calc(1rem + 46px + .8rem + 1px + var(--nav-link-h) + 1px);
}
@media (max-width:900px){
  :root{
    --nav-pad:.7rem;
    --nav-h:calc(var(--nav-pad) * 2 + var(--nav-logo) + 1px);   /* no links row */
    --nav-h-stuck:calc(1rem + 46px + 1px);
  }
}
@media (max-width:640px){
  :root{ --nav-logo:64px; }
}

.nav{position:fixed;top:0;left:0;right:0}
.nav__in{padding-block:var(--nav-pad)}
.nav .brand__img{height:var(--nav-logo)}
.nav__links{margin-top:var(--nav-gap);padding-top:var(--nav-links-pad)}

.nav-spacer{height:var(--nav-h);background:var(--paper)}
body.home .nav-spacer{background:var(--coal)}

/* anchor jumps (services.html#structural etc.) land below the stuck header */
[id]{scroll-margin-top:calc(var(--nav-h-stuck) + 1rem)}

@media print{ .nav-spacer{display:none} }

/* Thank-you page after the quote form */
.thanks{min-height:52vh;display:flex;align-items:center}
.thanks__in{max-width:640px}
.thanks__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-4)}