@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --ink:#141414;
  --paper:#F3F4F2;
  --white:#FFFFFF;
  --green:#65953F;       /* exact logo green */
  --green-deep:#3E5E26;  /* readable green for text on light */
  --grey:#858686;        /* exact logo grey */
  --grey-ink:#4C4E4E;    /* readable grey for body text on light */
  --black:#000000;
  --gutter:clamp(20px, 4vw, 40px);
  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
}
img{max-width:100%; display:block;}

h1,h2,h3{
  font-family:'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:0.98;
  letter-spacing:0.005em;
  margin:0;
}

a{color:inherit;}
a:focus-visible, .btn:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}
.on-dark a:focus-visible, .on-dark .btn:focus-visible{outline-color:var(--green);}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- header ---------- */
.site-header{
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:14px;
  padding-bottom:14px;
}
.brand img{height:54px; width:auto;}
.main-nav{display:flex; gap:clamp(18px, 4vw, 36px);}
.main-nav a{
  text-decoration:none;
  font-weight:600;
  padding:6px 0;
  border-bottom:3px solid transparent;
}
.main-nav a:hover{border-bottom-color:var(--grey);}
.main-nav a[aria-current="page"]{border-bottom-color:var(--green);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  padding:14px 26px;
  border:3px solid var(--ink);
  transition:background 0.15s ease, color 0.15s ease;
}
.btn-solid{background:var(--ink); color:var(--white);}
.btn-solid:hover{background:var(--green-deep); border-color:var(--green-deep);}
.btn-line{background:transparent; color:var(--ink);}
.btn-line:hover{background:var(--ink); color:var(--white);}
.actions{display:flex; flex-wrap:wrap; gap:14px;}

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  border-bottom:3px solid var(--ink);
}
.hero-copy{
  padding:clamp(40px, 7vw, 88px) clamp(24px, 4vw, 56px) clamp(40px, 7vw, 88px)
          max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  align-self:center;
}
.hero h1{
  font-size:clamp(3rem, 6.4vw, 5.6rem);
  margin-bottom:22px;
}
.hero p{
  font-size:1.2rem;
  color:var(--grey-ink);
  max-width:34em;
  margin:0 0 30px;
}
.hero-art{
  background:var(--black);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  min-height:520px;
}
.hero-art img{
  width:min(440px, 88%);
  margin-bottom:-70px; /* she is climbing in from below the panel edge */
}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;}
  .hero-copy{padding:44px var(--gutter);}
  .hero-art{min-height:380px;}
  .hero-art img{width:min(320px, 80%); margin-bottom:-48px;}
}

/* ---------- repairs list ---------- */
.repairs{padding:clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);}
.repairs-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:34px;
}
.repairs-head h2{font-size:clamp(2.4rem, 5vw, 3.6rem);}
.repairs-head p{margin:0; max-width:30em; color:var(--grey-ink);}

.repair-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(20px, 4vw, 48px);
  padding:30px 0 34px;
  border-top:3px solid var(--ink);
}
.repair-row:last-child{border-bottom:3px solid var(--ink);}
.repair-row h3{font-size:clamp(2.2rem, 4.4vw, 3.4rem); color:var(--ink);}
.repair-row p{margin:4px 0 0; color:var(--grey-ink);}
.repair-row ul{
  list-style:none;
  margin:4px 0 0;
  padding:0;
}
.repair-row li{
  padding:7px 0 7px 22px;
  position:relative;
  border-bottom:1px solid rgba(20,20,20,0.18);
}
.repair-row li:last-child{border-bottom:none;}
.repair-row li::before{
  content:"";
  position:absolute;
  left:0; top:1.1em;
  width:10px; height:10px;
  background:var(--green);
}
@media (max-width:860px){
  .repair-row{grid-template-columns:1fr; gap:10px;}
}

/* ---------- call to action band ---------- */
.cta{
  background:var(--green);
  color:var(--black);
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  padding:clamp(40px, 6vw, 64px) 0;
}
.cta .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
.cta h2{font-size:clamp(2rem, 4.4vw, 3rem);}
.cta p{margin:8px 0 0; font-weight:500; max-width:32em;}
.cta .btn-solid:hover{background:var(--white); color:var(--ink); border-color:var(--ink);}

/* ---------- footer ---------- */
.site-footer{
  background:var(--black);
  color:#C9CACA;
  padding:34px 0;
}
.site-footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
.site-footer img{height:44px; width:auto;}
.site-footer nav{display:flex; gap:26px;}
.site-footer a{text-decoration:none; color:var(--white); font-weight:600;}
.site-footer a:hover{text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:5px; text-decoration-thickness:3px;}
.site-footer small{display:block; width:100%; color:#A3A4A4; font-size:0.85rem;}

/* ---------- contact page ---------- */
.page-head{
  padding:clamp(44px, 7vw, 84px) 0 clamp(28px, 4vw, 44px);
}
.page-head h1{font-size:clamp(3rem, 6.4vw, 5.2rem); margin-bottom:18px;}
.page-head p{font-size:1.15rem; color:var(--grey-ink); max-width:36em; margin:0;}

.contact{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:clamp(28px, 5vw, 64px);
  padding-bottom:clamp(56px, 8vw, 96px);
  align-items:start;
}
@media (max-width:860px){ .contact{grid-template-columns:1fr;} }

.details{margin:0;}
.details > div{
  padding:22px 0 24px;
  border-top:3px solid var(--ink);
}
.details > div:last-child{border-bottom:3px solid var(--ink);}
.details dt{
  font-weight:600;
  color:var(--grey-ink);
  margin-bottom:4px;
}
.details dd{margin:0;}
.details .big{
  font-family:'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  font-weight:800;
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  line-height:1.05;
  letter-spacing:0.005em;
}
.details a.big{
  text-decoration:underline;
  text-decoration-color:var(--green);
  text-decoration-thickness:4px;
  text-underline-offset:6px;
}
.details a.big:hover{text-decoration-color:var(--ink);}
.hours{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 28px;
  font-size:1.05rem;
}

.prep{
  background:var(--black);
  color:var(--white);
  overflow:hidden;
  position:relative;
}
.prep-body{padding:32px 30px 0;}
.prep h2{font-size:clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom:12px; color:var(--white);}
.prep p{margin:0 0 14px; color:#D4D5D5;}
.prep ul{list-style:none; margin:0; padding:0;}
.prep li{
  padding:9px 0 9px 24px;
  position:relative;
  border-top:1px solid rgba(255,255,255,0.18);
}
.prep li::before{
  content:"";
  position:absolute;
  left:0; top:1.2em;
  width:10px; height:10px;
  background:var(--green);
}
.prep img{
  width:min(260px, 70%);
  margin:20px auto -46px;
}