/* ---------- Tokens ---------- */
:root{
  --ink: #FFFFFF;
  --ink-2: #F6F2E9;
  --card: #FBF9F2;
  --line: rgba(23,20,15,0.12);
  --gold: #C9A227;
  --gold-bright: #8C6C16;
  --text: #1A1712;
  --muted: #6B6355;
  /* Hero ground: warm press black, so the gold reads as ink not as gilt. */
  --press: #14120D;
  --cream: #F6F2E9;
  --header-h: 76px;
  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --max: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

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

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  margin: 0;
}

.gold{ color: var(--gold-bright); }

.kicker{
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  margin: 0 0 10px;
}

/* Registration bar: the colour-check strip printers run on press sheets.
   Used here as the section marker instead of a generic label. */
.reg-bar{
  display: flex;
  gap: 5px;
  margin: 0 0 20px;
}
.reg-bar span{
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.reg-bar span:nth-child(1){ background: #00AEEF; }
.reg-bar span:nth-child(2){ background: #EC008C; }
.reg-bar span:nth-child(3){ background: #FFE800; }
.reg-bar span:nth-child(4){ background: #F2EDE1; }
.reg-bar span:nth-child(5){ background: var(--gold); }

.section-head{
  max-width: 560px;
  margin: 0 0 48px;
}
.section-head h2{
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--text);
}

:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > *{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.is-visible > *{
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0.03s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 0.11s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 0.27s; }

/* ---------- Press marquee ---------- */
.marquee{
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  padding: 18px 0;
}
.marquee__track{
  display: flex;
  width: max-content;
  gap: 56px;
  animation: marquee 26s linear infinite;
}
.marquee__track span{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 14px;
}
.marquee__track span::after{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.marquee:hover .marquee__track{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
  .reveal, .reveal-stagger > *{ opacity: 1; transform: none; transition: none; }
}

/* ---------- Crop marks (decorative, theme-appropriate) ---------- */
.crop{
  position: fixed;
  width: 34px;
  height: 34px;
  z-index: 40;
  pointer-events: none;
  opacity: 0.5;
}
.crop::before,.crop::after{
  content: "";
  position: absolute;
  background: var(--gold-bright);
}
.crop::before{ width: 100%; height: 1px; top: 50%; }
.crop::after{ width: 1px; height: 100%; left: 50%; }
.crop--tl{ top: 18px; left: 18px; }
.crop--tr{ top: 18px; right: 18px; }
.crop--bl{ bottom: 18px; left: 18px; }
.crop--br{ bottom: 18px; right: 18px; }
@media (max-width: 720px){ .crop{ display:none; } }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.site-header.is-scrolled{ border-bottom-color: var(--line); }

.header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}
.brand-mark{
  display: block;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.14);
  flex-shrink: 0;
}
.brand-dot{ color: var(--gold-bright); }

.nav{
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 0.94rem;
}
.nav a{ color: var(--muted); transition: color 0.15s ease; }
.nav a:hover{ color: var(--text); }
.nav a[aria-current="page"]{ color: var(--gold-bright); }
.nav-cta{
  color: var(--text) !important;
  background: var(--gold);
  padding: 9px 18px;
  border-radius: 2px;
  font-weight: 600;
}
.nav-cta:hover{ background: var(--gold-bright); }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span{
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* Home page: the header floats over the hero plate until you scroll off it. */
.home main{ margin-top: calc(var(--header-h) * -1); }

.home .site-header{
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.home .site-header:not(.is-scrolled):not(.is-nav-open) .brand{ color: var(--cream); }
.home .site-header:not(.is-scrolled):not(.is-nav-open) .brand-dot{ color: var(--gold); }
.home .site-header:not(.is-scrolled):not(.is-nav-open) .nav a{ color: rgba(246,242,233,0.76); }
.home .site-header:not(.is-scrolled):not(.is-nav-open) .nav a:hover{ color: var(--cream); }
.home .site-header:not(.is-scrolled):not(.is-nav-open) .nav a[aria-current="page"]{ color: var(--gold); }
.home .site-header:not(.is-scrolled):not(.is-nav-open) .nav-toggle span{ background: var(--cream); }

.home .site-header.is-scrolled,
.home .site-header.is-nav-open{
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.home .crop::before,
.home .crop::after{ background: var(--gold); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 0.96rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--gold{
  background: var(--gold);
  color: var(--text);
}
.btn--gold:hover{ background: var(--gold-bright); }
.btn--ghost{
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover{ border-color: var(--gold); color: var(--gold-bright); }
.btn--outline{
  border-color: rgba(246,242,233,0.32);
  color: var(--cream);
}
.btn--outline:hover{
  border-color: var(--cream);
  background: rgba(246,242,233,0.09);
}

/* ---------- Hero ----------
   Full-bleed press plate behind an oversized condensed headline. The rail
   along the bottom edge swaps both the plate and the live job ticket, so the
   three things the shop sells are visible without scrolling. */
.hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: min(94vh, 940px);
  background: var(--press);
  color: var(--cream);
  padding: calc(var(--header-h) + 54px) 0 0;
}

.hero-media{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-plate{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 46%;
  opacity: 0;
  transform: scale(1.055);
  transition: opacity 0.9s ease, transform 9s linear;
  will-change: opacity, transform;
}
.hero-plate.is-active{
  opacity: 1;
  transform: scale(1);
}

/* Left-weighted scrim so the headline holds contrast over any plate,
   plus a foot of shade for the rail. */
.hero-scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(13,11,8,0.89) 0%,
      rgba(13,11,8,0.77) 34%,
      rgba(13,11,8,0.21) 66%,
      rgba(13,11,8,0.39) 100%),
    linear-gradient(to top, rgba(9,8,5,0.9) 0%, rgba(9,8,5,0) 46%);
}
.hero-grid{
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: 64px;
  align-items: center;
  padding-bottom: 52px;
}

.hero .kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.hero .kicker::before{
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
}
.hero .gold{ color: var(--gold); }

.hero-title{
  font-size: clamp(2.9rem, 7vw, 6.1rem);
  line-height: 0.86;
  letter-spacing: -0.004em;
  color: var(--cream);
}
.hero-title .line{
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.hero-title .line > span{
  display: block;
  white-space: nowrap;
  transform: translateY(105%);
  animation: line-up 0.78s cubic-bezier(.22,.85,.24,1) forwards;
}
.hero-title .line:nth-child(1) > span{ animation-delay: 0.06s; }
.hero-title .line:nth-child(2) > span{ animation-delay: 0.17s; }
.hero-title .line:nth-child(3) > span{ animation-delay: 0.28s; }
@keyframes line-up{
  to{ transform: translateY(0); }
}

.hero-sub{
  max-width: 44ch;
  color: rgba(246,242,233,0.74);
  font-size: 1.06rem;
  margin: 24px 0 32px;
}
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }

.hero-sub, .hero-actions{
  opacity: 0;
  animation: fade-up 0.7s ease forwards;
  animation-delay: 0.52s;
}
.hero-actions{ animation-delay: 0.64s; }
@keyframes fade-up{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------- Hero: live job ticket ---------- */
.hero-panel{
  opacity: 0;
  animation: fade-up 0.8s ease forwards;
  animation-delay: 0.4s;
  perspective: 1000px;
}
.hero-panel__head{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: rgba(246,242,233,0.62);
}
.hero-panel__head::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6FCF7E;
  box-shadow: 0 0 0 4px rgba(111,207,126,0.16);
}

.hero .job-ticket{
  background: rgba(16,14,10,0.66);
  border: 1px solid rgba(246,242,233,0.2);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  padding: 24px 26px;
  box-shadow: 0 28px 60px -30px rgba(0,0,0,0.9);
}
.hero .job-ticket__row{ border-bottom-color: rgba(246,242,233,0.13); }
.hero .job-ticket__row span:first-child{ color: rgba(246,242,233,0.52); }
.hero .job-ticket__row span:last-child{ color: var(--cream); }
.hero .status-chip{
  background: var(--gold);
  color: #17140F !important;
}

/* ---------- Hero: job-type rail ---------- */
.hero-rail{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  border-top: 1px solid rgba(246,242,233,0.16);
  background: rgba(9,8,5,0.38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-rail__inner{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ticket-tab{
  position: relative;
  display: grid;
  gap: 5px;
  align-content: start;
  text-align: left;
  background: none;
  border: none;
  border-top: 2px solid transparent;
  border-left: 1px solid rgba(246,242,233,0.14);
  margin-top: -1px;
  padding: 22px 26px 24px;
  color: rgba(246,242,233,0.62);
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-top-color 0.2s ease;
}
.ticket-tab:first-child{
  border-left: none;
  padding-left: 0;
}
.ticket-tab:hover{ color: var(--cream); }
.ticket-tab.is-active{
  color: var(--cream);
  border-top-color: var(--gold);
  background: linear-gradient(to bottom, rgba(201,162,39,0.13), rgba(201,162,39,0));
}
.ticket-tab__name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.34rem;
  line-height: 1;
}
.ticket-tab__meta{
  font-size: 0.82rem;
  color: rgba(246,242,233,0.46);
}
.ticket-tab.is-active .ticket-tab__meta{ color: rgba(246,242,233,0.62); }

/* Run timer: how long the current job sits on screen before the next one. */
.ticket-progress{
  height: 2px;
  background: rgba(246,242,233,0.12);
  overflow: hidden;
}
.ticket-progress span{
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold);
}
.ticket-progress span.is-animating{
  animation: ticket-progress-fill 5s linear forwards;
}
@keyframes ticket-progress-fill{
  from{ width: 0%; }
  to{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .ticket-progress{ display: none; }
  .hero-title .line > span, .hero-sub, .hero-actions, .hero-panel{
    animation: none; opacity: 1; transform: none;
  }
  .hero-plate{ transition: opacity 0.3s ease; transform: none; }
  .hero-plate.is-active{ transform: none; }
}

.job-ticket{
  background: var(--card);
  border: 1px solid var(--line);
  padding: 28px;
  font-family: var(--font-body);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.job-ticket.is-swapping{
  opacity: 0;
  transform: translateY(8px) !important;
}
.job-ticket__row{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.job-ticket__row:first-child{ padding-top: 0; }
.job-ticket__row:last-child{ border-bottom: none; padding-bottom: 0; }
.job-ticket__row span:first-child{ color: var(--muted); }
.job-ticket__row span:last-child{ text-align: right; font-weight: 500; }
.status-chip{
  color: var(--ink) !important;
  background: var(--gold-bright);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---------- Capabilities strip ---------- */
.capabilities{
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.capabilities-list{
  list-style: none;
  margin: 0;
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--muted);
}
.capabilities-list li{ position: relative; padding-left: 18px; }
.capabilities-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
}

/* ---------- Services ---------- */
.services{ padding: 100px 0; border-bottom: 1px solid var(--line); }
.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service-card{
  background: var(--ink);
  padding: 36px 30px;
}
.service-card__mark{
  width: 12px; height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.service-card:nth-child(1) .service-card__mark{ background: #00AEEF; }
.service-card:nth-child(2) .service-card__mark{ background: #EC008C; }
.service-card:nth-child(3) .service-card__mark{ background: var(--gold); }
.service-card h3{
  font-size: 1.6rem;
  margin: 14px 0 12px;
  color: var(--text);
}
.service-card p{ color: var(--muted); margin: 0 0 18px; }
.service-card ul{
  list-style: none;
  margin: 0; padding: 16px 0 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--text);
}
.service-card li{ padding: 5px 0; }

/* ---------- Process ---------- */
.process{ padding: 100px 0; border-bottom: 1px solid var(--line); }
.process-list{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.process-list li{ display: flex; flex-direction: column; gap: 14px; }
.process-num{
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold-bright);
  line-height: 1;
}
.process-list h3{ font-size: 1.25rem; margin-bottom: 6px; color: var(--text); }
.process-list p{ color: var(--muted); margin: 0; font-size: 0.95rem; }

/* ---------- Estimate ---------- */
.estimate{ padding: 100px 0; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.estimate-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.section-head--left{ margin: 0; }
.estimate-note{ color: var(--muted); font-size: 0.94rem; max-width: 40ch; }

.estimate-form{
  background: var(--card);
  border: 1px solid var(--line);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field{ display: flex; flex-direction: column; gap: 8px; }
.field label{ font-size: 0.85rem; color: var(--muted); }
.field select, .field input{
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.96rem;
  border-radius: 2px;
}
.field select:focus, .field input:focus{ border-color: var(--gold); }
.field--rush{ grid-column: span 2; max-width: 220px; }

.estimate-submit{ grid-column: span 2; margin-top: 4px; }

.estimate-result{
  grid-column: span 2;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.estimate-result__label{
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.estimate-result__value{
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold-bright);
  display: block;
}
.estimate-result__hint{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---------- Locations ---------- */
.locations{ padding: 100px 0; border-bottom: 1px solid var(--line); }
.location-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.location-card{
  border: 1px solid var(--line);
  padding: 30px;
}
.location-card__mark{
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-bright);
  margin-bottom: 14px;
}
.location-card__address{
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 20px;
}
.location-card a{ color: var(--muted); font-size: 0.9rem; }
.location-card a:hover{ color: var(--gold-bright); }

/* ---------- Contact ---------- */
.contact{ padding: 100px 0; }
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.contact h2{ font-size: clamp(2rem,4vw,2.8rem); margin: 6px 0 14px; }
.contact-lede{ color: var(--muted); max-width: 40ch; }

.contact-details{ display: flex; flex-direction: column; gap: 0; }
.contact-line{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact-line:first-child{ padding-top: 0; }
.contact-line__label{ font-size: 0.8rem; color: var(--muted); }
.contact-line__value{ font-family: var(--font-display); font-size: 1.3rem; }
a.contact-line:hover .contact-line__value{ color: var(--gold-bright); }

/* ---------- Secondary page hero ---------- */
.page-hero{
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--line);
}
.page-hero h1{
  font-size: clamp(2.6rem, 6vw, 4.2rem);
}
.page-hero p{
  max-width: 52ch;
  color: var(--muted);
  font-size: 1.05rem;
  margin: 18px 0 0;
}

/* ---------- Service categories (services.html) ---------- */
.category{
  padding: 84px 0;
  border-bottom: 1px solid var(--line);
}
.category-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.category-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.category-tag span{ width: 10px; height: 10px; border-radius: 50%; }
.category h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 14px; }
.category-lede{ color: var(--muted); max-width: 44ch; }
.category-items{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.category-items li{
  background: var(--ink);
  padding: 18px 20px;
  font-size: 0.98rem;
}
.category-items li span{
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 4px;
}

/* ---------- Capability method cards (services / about) ---------- */
.methods{ padding: 90px 0; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.method-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.method-card{ background: var(--ink-2); padding: 28px 24px; }
.method-card__mark{
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold-bright);
  display: block;
  margin-bottom: 10px;
}
.method-card h3{ font-size: 1.15rem; margin-bottom: 8px; color: var(--text); }
.method-card p{ color: var(--muted); font-size: 0.92rem; margin: 0; }

/* ---------- About page ---------- */
.story{ padding: 96px 0; border-bottom: 1px solid var(--line); }
.story-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.story h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); }
.story-copy p{ color: var(--muted); margin: 0 0 18px; }
.story-copy p:last-child{ margin-bottom: 0; }

.why{ padding: 96px 0; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.why-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.why-card{ background: var(--ink-2); padding: 34px 28px; }
.why-card__mark{ width: 12px; height: 12px; border-radius: 50%; margin-bottom: 16px; }
.why-card:nth-child(1) .why-card__mark{ background: #00AEEF; }
.why-card:nth-child(2) .why-card__mark{ background: #EC008C; }
.why-card:nth-child(3) .why-card__mark{ background: var(--gold); }
.why-card h3{ font-size: 1.3rem; margin-bottom: 10px; color: var(--text); }
.why-card p{ color: var(--muted); margin: 0; font-size: 0.95rem; }

.plant{ padding: 96px 0; }
.plant-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.plant-copy p{ color: var(--muted); }
.plant-list{ list-style: none; margin: 20px 0 0; padding: 0; }
.plant-list li{
  padding: 12px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
}
.plant-list li:last-child{ border-bottom: 1px solid var(--line); }
.plant-list li span:last-child{ color: var(--muted); }

/* ---------- Contact page ---------- */
.contact-page{ padding: 90px 0; }
.contact-page-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.contact-form{
  background: var(--card);
  border: 1px solid var(--line);
  padding: 32px;
  display: grid;
  gap: 20px;
}
.contact-form .field textarea{
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.96rem;
  border-radius: 2px;
  resize: vertical;
  min-height: 120px;
}
.contact-form .field textarea:focus{ border-color: var(--gold); }
.form-status{
  display: none;
  padding: 14px 16px;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-size: 0.92rem;
}
.form-status.is-visible{ display: block; }
.field-error{
  color: #E8746B;
  font-size: 0.8rem;
  min-height: 1em;
}

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid var(--line); }
.footer-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 26px 0;
  font-size: 0.86rem;
  color: var(--muted);
}
.footer-row .footer-contacts{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-row a:hover{ color: var(--gold-bright); }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero{
    min-height: 0;
    padding-top: calc(var(--header-h) + 54px);
  }
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: start;
    padding-bottom: 54px;
  }
  .hero-panel{ max-width: 440px; }
  .hero-plate{ object-position: 58% 42%; }
  .service-grid{ grid-template-columns: 1fr; }
  .process-list{ grid-template-columns: 1fr 1fr; }
  .estimate-grid{ grid-template-columns: 1fr; }
  .location-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .category-grid{ grid-template-columns: 1fr; }
  .method-grid{ grid-template-columns: 1fr 1fr; }
  .story-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .plant-grid{ grid-template-columns: 1fr; }
  .contact-page-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .nav{
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 28px 20px;
    display: none;
  }
  .nav.is-open{ display: flex; }
  .nav a{ padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-cta{ margin-top: 10px; text-align: center; }
  .nav-toggle{ display: flex; }
  .process-list{ grid-template-columns: 1fr; }
  .estimate-form{ grid-template-columns: 1fr; }
  /* Rail becomes a swipeable row rather than three cramped columns.
     No scroll-snap here: mandatory snapping aligns the first tab to the
     scrollport edge, which scrolls the container's own left padding out of
     view and clips the label. The tabs carry the gutter instead. */
  .hero-rail__inner{
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
  }
  .hero-rail__inner::-webkit-scrollbar{ display: none; }
  .ticket-tab{
    flex: 0 0 auto;
    min-width: 176px;
    padding: 17px 20px 19px;
  }
  .ticket-tab:first-child{
    border-left: none;
    padding-left: 28px;
  }
  .ticket-tab:last-child{ padding-right: 28px; }
  .hero-sub{ font-size: 1.02rem; margin: 22px 0 30px; }
  .hero-actions .btn{ flex: 1 1 auto; }
  .hero-scrim{
    background: linear-gradient(to bottom,
      rgba(13,11,8,0.88) 0%,
      rgba(13,11,8,0.70) 44%,
      rgba(13,11,8,0.90) 100%);
  }
  .field--rush{ max-width: none; }
  .estimate-submit, .estimate-result{ grid-column: span 1; }
  .category-items{ grid-template-columns: 1fr; }
  .method-grid{ grid-template-columns: 1fr; }

  /* Desktop's 84-100px section padding reads as dead air once everything
     is stacked in one column on a phone — tighten the rhythm. */
  .services, .process, .estimate, .locations, .methods,
  .category, .why, .plant, .contact-page, .contact{
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .story{ padding: 56px 0; }
  .page-hero{ padding: 44px 0 36px; }
  .section-head{ margin-bottom: 36px; }
}

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

/* ---------- Small phones ----------
   The reveal animation on .hero-title needs white-space: nowrap per line
   (see line ~389), which means on a narrow phone the words can run wider
   than the column and get clipped by the overflow:hidden that makes the
   slide-up effect work, instead of wrapping. Dropping the font-size floor
   further here keeps every line inside the viewport. */
@media (max-width: 480px){
  .wrap{ padding: 0 20px; }
  .hero-title{ font-size: clamp(2rem, 9.5vw, 6.1rem); }
  .hero .job-ticket{ padding: 20px; }
  .ticket-tab{ min-width: 148px; padding: 16px 18px 18px; }
  .ticket-tab:first-child{ padding-left: 20px; }
  .ticket-tab:last-child{ padding-right: 20px; }
  .ticket-tab__name{ font-size: 1.18rem; }
}