/* ==========================================================
   components.css
   Ordered roughly as they appear down the page.
   ========================================================== */

/* ---------- scroll progress ------------------------------- */

.progress-rail {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 3px; z-index: 200; pointer-events: none;
}
.progress-fill {
  height: 100%; width: 0%;
  background: var(--accent);
  transition: background-color var(--repaint) var(--ease);
}

/* ---------- header ---------------------------------------- */

.site-header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(16px);
  border-block-end: 1px solid var(--line);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding-block: var(--sp-4);
}

.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-weight: 800;
  font-stretch: 112%; font-size: 1.1rem;
  letter-spacing: -.04em; line-height: 1;
}

.brand-mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 50% 50% 50% 6px;
  background: var(--accent); rotate: -8deg;
  transition: background-color var(--repaint) var(--ease), rotate var(--dur) var(--ease);
}
.brand:hover .brand-mark { rotate: 8deg; }

.brand small {
  display: block; font-family: var(--font-mono);
  font-size: .55rem; letter-spacing: .16em; font-weight: 400;
  text-transform: uppercase; color: var(--muted);
  margin-block-start: 4px; font-stretch: normal;
}

.nav-links { display: flex; align-items: center; gap: var(--sp-6); }

.nav-links a:not(.btn) {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  position: relative; padding-block: 2px;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -2px;
  height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

@media (max-width: 880px) { .nav-links .nav-link { display: none; } }

/* ---------- buttons --------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .95rem 1.5rem; border-radius: var(--radius);
  border: 1.5px solid transparent; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background-color var(--repaint) var(--ease),
              border-color var(--repaint) var(--ease),
              color var(--repaint) var(--ease);
}

.btn--solid { background: var(--accent); color: var(--accent-ink); }
.btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 45%, transparent);
}

.btn--outline { border-color: currentColor; }
.btn--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.section--dark .btn--outline:hover { background: var(--paper-2); color: var(--ink); border-color: var(--paper-2); }

.btn--lg { padding: 1.2rem 2.1rem; font-size: .74rem; }
.btn--block { width: 100%; }

/* ==========================================================
   LEAD
   Restrained opening. A large photograph of the work, the
   name, what is offered, and how to make contact. The tool
   is not the pitch, the work is.
   ========================================================== */

.lead { padding-block-end: clamp(3rem, 7vw, 6rem); }

.lead-image {
  width: 100%;
  height: clamp(320px, 58vh, 640px);
  overflow: hidden;
  background: var(--ink-2);
}
.lead-image img { width: 100%; height: 100%; object-fit: cover; }

.lead-body {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-block-start: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 950px) { .lead-body { grid-template-columns: 1fr; } }

.lead-copy h1 { font-size: var(--step-4); max-width: 16ch; }
.lead-copy .lede { margin-block-start: var(--sp-5); max-width: 54ch; }

.lead-actions {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  margin-block-start: var(--sp-6);
}

.lead-facts { display: grid; gap: var(--sp-4); }
.lead-facts > div {
  display: grid; gap: 4px;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
}
.lead-facts dt {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.lead-facts dd { font-size: 1rem; }

/* ==========================================================
   VISUALISER
   Built to feel like a tool, not a widget. Dark shell so the
   photograph is the brightest thing on screen.
   ========================================================== */

.vis {
  --vis-accent: #35513F;
  background: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  color: var(--paper-2);
}

.vis-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--ink-3);
}

.vis-bar-label {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-dark); margin-inline-end: var(--sp-2);
}

.vis-room {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem .85rem; border-radius: 100px;
  border: 1.5px solid var(--ink-3); color: var(--muted-dark);
  transition: all var(--dur-fast) var(--ease);
}
.vis-room:hover { color: var(--paper-2); border-color: var(--paper-2); }
.vis-room[aria-pressed="true"] {
  background: var(--vis-accent); border-color: var(--vis-accent); color: #fff;
}

.vis-upload {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem .95rem; border-radius: 100px;
  border: 1.5px dashed var(--muted-dark); color: var(--paper-2);
  cursor: pointer; transition: all var(--dur-fast) var(--ease);
}
.vis-upload:hover { border-style: solid; border-color: var(--vis-accent); color: var(--vis-accent); }
.vis-upload input { display: none; }

/* ---------- stage ----------------------------------------- */

.vis-stage {
  position: relative;
  background: #0C0E11;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 46vw, 560px);
}

.vis-stage canvas {
  max-width: 100%;
  max-height: clamp(300px, 46vw, 560px);
  width: auto; height: auto;
  cursor: crosshair;
  display: block;
}

/* the nudge that tells people this thing is tappable */
.vis-hint {
  position: absolute; inset-block-end: var(--sp-5); inset-inline-start: 50%;
  translate: -50% 0;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: .6rem 1.1rem; border-radius: 100px;
  background: rgba(12,14,17,.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.16);
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; pointer-events: none;
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.vis.has-painted .vis-hint { opacity: 0; translate: -50% 10px; }

.vis-hint .ring {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--vis-accent);
  animation: ping 1.8s var(--ease) infinite;
}

/* brief flash when a wall lands, so the change is felt */
.vis.did-paint .vis-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--vis-accent); opacity: .16;
  animation: flash 700ms var(--ease) forwards;
}

.vis.is-working .vis-stage { cursor: progress; }
.vis.is-working .vis-stage::before {
  content: "Rolling it on"; position: absolute; z-index: 3;
  inset-block-start: var(--sp-5); inset-inline-start: 50%; translate: -50% 0;
  padding: .5rem 1rem; border-radius: 100px;
  background: var(--vis-accent); color: #fff;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- controls -------------------------------------- */

.vis-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  border-block-start: 1px solid var(--ink-3);
}
@media (max-width: 780px) { .vis-controls { grid-template-columns: 1fr; } }

.vis-readout { display: grid; gap: 2px; }
.vis-readout .nm {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: 1.35rem; letter-spacing: -.04em; line-height: 1;
  color: var(--vis-accent);
  transition: color var(--repaint) var(--ease);
}
.vis-readout .nt { font-size: .84rem; color: var(--muted-dark); font-style: italic; }

.vis-tools { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

.vis-spread { display: flex; align-items: center; gap: var(--sp-3); }
.vis-spread label {
  font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark);
}
.vis-spread input[type="range"] {
  appearance: none; width: 90px; height: 3px;
  border-radius: 100px; background: var(--ink-3); cursor: pointer;
}
.vis-spread input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--vis-accent); border: 2px solid var(--ink); cursor: grab;
}
.vis-spread input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--vis-accent); border: 2px solid var(--ink); cursor: grab;
}
.vis-spread output {
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--paper-2); min-width: 2ch;
}

.vis-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .11em; text-transform: uppercase;
  padding: .6rem .95rem; border-radius: var(--radius);
  border: 1.5px solid var(--ink-3); color: var(--muted-dark);
  transition: all var(--dur-fast) var(--ease);
}
.vis-btn:hover:not(:disabled) { color: var(--paper-2); border-color: var(--paper-2); }
.vis-btn:disabled { opacity: .32; cursor: not-allowed; }

/* ---------- colour rail ----------------------------------- */

.vis-rail {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  overflow-x: auto;
  scrollbar-width: thin;
  border-block-start: 1px solid var(--ink-3);
}

.vis-chip {
  flex: none;
  width: clamp(72px, 12vw, 106px);
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  border: 2px solid transparent;
  position: relative;
  display: flex; align-items: flex-end;
  padding: var(--sp-3);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.vis-chip:hover { transform: translateY(-6px); }
.vis-chip[aria-pressed="true"] { border-color: var(--paper-2); transform: translateY(-6px); }

.vis-chip-name {
  font-family: var(--font-mono); font-size: .52rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.65);
  line-height: 1.25; text-align: left;
}

/* ---------- the payoff row -------------------------------- */

.vis-cta {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-5);
  background: var(--vis-accent);
  transition: background-color var(--repaint) var(--ease);
}
.vis-cta p {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin-inline-end: auto; opacity: .9;
}
.vis-cta .btn { background: rgba(0,0,0,.28); color: #fff; border-color: rgba(255,255,255,.3); }
.vis-cta .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.vis-cta .btn--go { background: #fff; color: var(--ink); }
.vis-cta .btn--go:hover { background: var(--ink); color: #fff; }

/* ---------- marquee --------------------------------------- */

.marquee {
  background: var(--accent); color: var(--accent-ink);
  padding-block: var(--sp-4); overflow: hidden; white-space: nowrap;
}
.marquee-track { display: inline-flex; gap: var(--sp-7); animation: slide 40s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display); font-weight: 700; font-stretch: 112%;
  font-size: var(--step-1); letter-spacing: -.03em;
  display: inline-flex; align-items: center; gap: var(--sp-7);
}
.marquee-track span::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .5;
}

/* ---------- services list --------------------------------- */

.service-list { border-block-start: 1px solid var(--line); }
.service-row { border-block-end: 1px solid var(--line); }

.service-trigger {
  width: 100%; display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--sp-5);
  padding-block: clamp(1.1rem, 2.6vw, 1.7rem);
  text-align: left;
  transition: padding-inline var(--dur) var(--ease);
}
.service-row:hover .service-trigger { padding-inline-start: var(--sp-4); }

.service-index { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; color: var(--accent); transition: color var(--repaint) var(--ease); }

.service-title {
  font-family: var(--font-display); font-weight: 700; font-stretch: 112%;
  font-size: clamp(1.25rem, 3vw, 2rem);
  letter-spacing: -.04em; line-height: 1.02;
  transition: color var(--dur-fast) var(--ease);
}
.service-row:hover .service-title,
.service-row.is-open .service-title { color: var(--accent); }

.service-plus {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--line); display: grid; place-items: center;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), rotate var(--dur) var(--ease);
}
.service-plus::before, .service-plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.service-plus::before { width: 12px; height: 1.5px; }
.service-plus::after  { width: 1.5px; height: 12px; transition: opacity var(--dur-fast) var(--ease); }

.service-row.is-open .service-plus { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); rotate: 90deg; }
.service-row.is-open .service-plus::after { opacity: 0; }

.service-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.service-row.is-open .service-panel { grid-template-rows: 1fr; }
.service-panel-inner { overflow: hidden; }
.service-panel-inner > div {
  padding-block-end: var(--sp-6);
  padding-inline-start: calc(.64rem + var(--sp-5) + 1.5ch);
  max-width: 62ch; color: var(--muted);
}
.service-panel-inner ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.service-panel-inner li {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .35rem .7rem; border-radius: 100px;
  background: var(--paper-3); color: var(--ink);
}
@media (max-width: 620px) { .service-panel-inner > div { padding-inline-start: 0; } }

/* ---------- gallery --------------------------------------- */

.filter-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin-block-end: var(--sp-6); padding-block-end: var(--sp-5);
  border-block-end: 1px solid var(--ink-3);
}
.filter-btn {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .55rem 1rem; border-radius: 100px;
  border: 1.5px solid var(--ink-3); color: var(--muted-dark);
  transition: all var(--dur-fast) var(--ease);
}
.filter-btn:hover { color: var(--paper-2); border-color: var(--paper-2); }
.filter-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.filter-count {
  margin-inline-start: auto; font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark);
}

.gallery-masonry { column-count: 3; column-gap: var(--sp-5); }
@media (max-width: 1000px) { .gallery-masonry { column-count: 2; } }
@media (max-width: 620px)  { .gallery-masonry { column-count: 1; } }

.shot {
  position: relative; display: block; width: 100%;
  break-inside: avoid; margin-block-end: var(--sp-5);
  border-radius: var(--radius); overflow: hidden;
  background: var(--ink-2); cursor: zoom-in; text-align: left;
}
.shot.is-hidden { display: none; }
.shot img { width: 100%; height: auto; transition: transform 900ms var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,24,28,.9) 0%, rgba(22,24,28,.08) 48%, transparent 70%);
  opacity: .7; transition: opacity var(--dur) var(--ease);
}
.shot:hover::after { opacity: 1; }

.shot-meta {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2;
  padding: var(--sp-5); color: var(--paper-2);
  transform: translateY(8px); opacity: .92;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.shot:hover .shot-meta { transform: translateY(0); opacity: 1; }
.shot-meta .k { display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-block-end: var(--sp-2); transition: color var(--repaint) var(--ease); }
.shot-meta .t { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: 1rem; letter-spacing: -.03em; line-height: 1.2; }

.gallery-cta {
  break-inside: avoid; margin-block-end: var(--sp-5);
  border: 1.5px dashed var(--ink-3); border-radius: var(--radius);
  display: grid; gap: var(--sp-4); padding: var(--sp-7) var(--sp-6);
  text-align: center; color: var(--muted-dark); justify-items: center;
}
.gallery-cta .mono { color: var(--accent); }

/* ---------- lightbox -------------------------------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(9,11,14,.96); display: grid; place-items: center;
  padding: var(--gutter); opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1000px, 90vw); max-height: 78vh; width: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  transform: scale(.96); transition: transform var(--dur) var(--ease-out);
  margin-inline: auto;
}
.lightbox.is-open img { transform: scale(1); }
.lightbox-caption {
  color: var(--paper-2); font-family: var(--font-mono);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  margin-block-start: var(--sp-5); text-align: center;
}
.lightbox-close, .lightbox-nav {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.26); color: var(--paper-2);
  display: grid; place-items: center; line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.16); border-color: var(--paper-2); }
.lightbox-close { inset-block-start: var(--gutter); inset-inline-end: var(--gutter); width: 46px; height: 46px; font-size: 1.5rem; }
.lightbox-nav { inset-block-start: 50%; translate: 0 -50%; width: 52px; height: 52px; font-size: 1.3rem; }
.lightbox-nav.prev { inset-inline-start: var(--gutter); }
.lightbox-nav.next { inset-inline-end: var(--gutter); }
@media (max-width: 700px) {
  .lightbox-nav { inset-block-start: auto; inset-block-end: var(--gutter); translate: none; }
  .lightbox-nav.prev { inset-inline-start: calc(50% - 66px); }
  .lightbox-nav.next { inset-inline-start: calc(50% + 14px); }
}

/* ---------- reviews --------------------------------------- */

.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: start; }
@media (max-width: 1000px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .quote-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.4rem);
  display: grid; gap: var(--sp-5); align-content: start;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.panel:hover { border-color: var(--accent); transform: translateY(-4px); }
.panel blockquote { font-size: 1.06rem; line-height: 1.55; }
.panel figcaption {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.panel figcaption .via {
  padding: .25rem .6rem; border-radius: 100px;
  border: 1px solid var(--line); color: var(--accent);
}

.panel--note { padding: 0; overflow: hidden; gap: 0; }
.panel--note img { width: 100%; height: auto; display: block; }
.panel--note figcaption { padding: var(--sp-5); border-block-start: 1px solid var(--line); }

/* ---------- contact --------------------------------------- */

.contact-panel {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-lg); padding: clamp(2rem, 6vw, 5rem);
  transition: background-color var(--repaint) var(--ease), color var(--repaint) var(--ease);
}
.contact-panel h2 { max-width: 14ch; }
.contact-panel .lede { color: inherit; opacity: .88; }

.contact-lines { display: grid; gap: 0; margin-block-start: var(--sp-7); }
.contact-line {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding-block: var(--sp-4);
  border-block-start: 1px solid color-mix(in srgb, currentColor 26%, transparent);
}
.contact-line .k { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; min-width: 8ch; }
.contact-line .v { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: var(--step-1); letter-spacing: -.03em; }
.contact-line a.v:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- form ------------------------------------------ */

.quote-form { display: grid; gap: var(--sp-4); }
.form-field { display: grid; gap: var(--sp-2); }
.form-field label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.form-field input, .form-field textarea {
  background: color-mix(in srgb, var(--paper-2) 92%, transparent);
  border: 1.5px solid transparent; border-radius: var(--radius);
  padding: .9rem 1rem; font-size: .98rem; width: 100%; color: var(--ink);
  font-family: var(--font-read);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field .err { font-size: .76rem; min-height: 1em; font-style: italic; }
.form-field.has-error input, .form-field.has-error textarea { border-color: #8C1D14; }
.form-status {
  font-size: .9rem; padding: var(--sp-4); border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 20%, transparent); display: none;
}
.form-status.is-visible { display: block; }

/* ---------- footer ---------------------------------------- */

.footer { background: var(--ink); color: var(--muted-dark); padding-block: var(--sp-8) var(--sp-6); }
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-7);
  padding-block-end: var(--sp-7); border-block-end: 1px solid var(--ink-3);
}
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr; } }
.footer h4 {
  color: var(--paper-2); font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 400;
  margin-block-end: var(--sp-4); font-stretch: normal;
}
.footer ul { display: grid; gap: var(--sp-3); font-size: .94rem; }
.footer a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  padding-block-start: var(--sp-5); font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- sticky mobile call bar ------------------------ */

.call-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 150;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-3) var(--gutter);
  display: none; align-items: center; justify-content: space-between; gap: var(--sp-4);
  box-shadow: 0 -8px 24px rgba(22,24,28,.22);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease), background-color var(--repaint) var(--ease);
}
.call-bar.is-visible { transform: translateY(0); }
.call-bar .who { display: block; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.call-bar .num { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: 1.05rem; letter-spacing: -.03em; }
.call-bar .btn { background: var(--ink); color: var(--paper-2); padding: .7rem 1.2rem; }
@media (max-width: 880px) { .call-bar { display: flex; } body { padding-block-end: 68px; } }

.vis-foot {
  margin-block-start: var(--sp-5);
  font-size: .84rem; font-style: italic;
  color: var(--muted); max-width: 62ch;
}

/* ==========================================================
   INSPECTOR
   The loupe. Frame is position:relative, lens is an absolutely
   positioned circle carrying a 3.2x copy of the same image.
   ========================================================== */

.inspect-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 820px) { .inspect-grid { grid-template-columns: 1fr; } }

.inspect-item { display: grid; gap: var(--sp-4); }

.inspect-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-2);
  cursor: none;
  aspect-ratio: 4/3;
  touch-action: pan-y;
}

.inspect-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter var(--dur) var(--ease);
}

.inspect-frame.is-inspecting img { filter: brightness(.62) saturate(.85); }

.lens {
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0;
  width: clamp(120px, 22vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 3px var(--paper-2),
    0 0 0 5px rgba(0,0,0,.35),
    0 18px 40px rgba(0,0,0,.55);
  pointer-events: none;
  opacity: 0;
  scale: .8;
  transition: opacity var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease);
  image-rendering: -webkit-optimize-contrast;
}

.inspect-frame.is-inspecting .lens { opacity: 1; scale: 1; }

.inspect-cue {
  position: absolute;
  inset-block-end: var(--sp-4); inset-inline-start: var(--sp-4);
  padding: .45rem .8rem;
  border-radius: 100px;
  background: rgba(12,14,17,.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}

.inspect-frame.is-inspecting .inspect-cue { opacity: 0; }

.inspect-item figcaption { display: grid; gap: var(--sp-2); }
.inspect-item figcaption strong {
  font-family: var(--font-display);
  font-weight: 700; font-stretch: 112%;
  font-size: 1.15rem; letter-spacing: -.03em;
}
.inspect-item figcaption span { color: var(--muted); font-size: .94rem; line-height: 1.5; }

/* ==========================================================
   STEPS
   ========================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink-3);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step {
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  transition: background-color var(--dur) var(--ease);
}
.step:hover { background: var(--ink-2); }

.step-n { color: var(--accent); transition: color var(--repaint) var(--ease); }

.step h3 {
  font-size: 1.2rem;
  letter-spacing: -.03em;
}

.step p { color: var(--muted-dark); font-size: .94rem; line-height: 1.55; }

/* ==========================================================
   INSTAGRAM
   Renders a fallback grid from local images by default. When
   js/instagram.js is configured with a feed it replaces the
   contents in place, so the section never appears broken.
   ========================================================== */

.ig-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}
.ig-head .eyebrow { color: var(--accent); display: block; margin-block-end: var(--sp-3); }
.ig-head h2 { font-size: var(--step-3); }

.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

.ig-post {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-3);
  display: block;
}
.ig-post img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease);
}
.ig-post:hover img { transform: scale(1.06); }

.ig-post::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,24,28,.82), transparent 55%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.ig-post:hover::after { opacity: 1; }

.ig-cap {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2;
  padding: var(--sp-4);
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; line-height: 1.35;
  opacity: 0; translate: 0 6px;
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.ig-post:hover .ig-cap { opacity: 1; translate: 0 0; }

.ig-badge {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3);
  z-index: 2; padding: .2rem .5rem; border-radius: 100px;
  background: rgba(0,0,0,.55); color: #fff;
  font-family: var(--font-mono); font-size: .5rem;
  letter-spacing: .1em; text-transform: uppercase;
}

.instagram.is-loading .ig-grid { opacity: .5; transition: opacity var(--dur) var(--ease); }

/* ---------- grouped colour rail --------------------------- */

.vis-rail { gap: var(--sp-5); }

.vis-group { flex: none; display: grid; gap: var(--sp-3); }

.vis-group-name {
  font-family: var(--font-mono); font-size: .5rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-dark);
}

.vis-group-chips { display: flex; gap: var(--sp-2); }

/* ---------- visualiser: modes + miss feedback ------------- */

.vis-modes { display: inline-flex; gap: 0; }
.vis-modes .vis-btn { border-radius: 0; }
.vis-modes .vis-btn:first-child { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); }
.vis-modes .vis-btn:last-child  { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); border-inline-start: 0; }
.vis-modes .vis-btn[aria-pressed="true"] {
  background: var(--vis-accent); border-color: var(--vis-accent); color: #fff;
}

.vis[data-mode="erase"] .vis-stage canvas { cursor: cell; }

.vis-miss {
  position: absolute; inset-block-start: var(--sp-5); inset-inline-start: 50%;
  translate: -50% 0; z-index: 3;
  padding: .5rem 1rem; border-radius: 100px;
  background: rgba(12,14,17,.88);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; pointer-events: none;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.vis.missed .vis-miss { opacity: 1; }

/* ==========================================================
   METHOD
   Two capability cards. The artwork is diagrammatic on
   purpose: it explains the mechanism, which a generic stock
   photo of a man holding a spray gun does not.
   ========================================================== */

.method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 880px) { .method-grid { grid-template-columns: 1fr; } }

.method-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.method-card:hover { border-color: var(--accent); transform: translateY(-4px); }

.method-figure { background: var(--paper); border-block-end: 1px solid var(--line); }
.method-figure img { width: 100%; height: auto; display: block; }

.method-body { padding: clamp(1.5rem, 3vw, 2.2rem); display: grid; gap: var(--sp-4); align-content: start; }
.method-body h3 { font-size: var(--step-2); letter-spacing: -.035em; }
.method-body p { color: var(--muted); }

.method-points { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-2); }
.method-points li {
  position: relative;
  padding-inline-start: var(--sp-5);
  font-size: .94rem;
  line-height: 1.5;
}
.method-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  width: 8px; height: 2px;
  background: var(--accent);
  transition: background-color var(--repaint) var(--ease);
}

/* ---------- form: honeypot + status states ---------------- */

/* Hidden from people without display:none, which some bots skip. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-status.is-pending { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.form-status.is-warn    { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.form-status.is-ok {
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  color: var(--paper-2);
}
.form-status.is-error {
  background: #8C1D14;
  color: #fff;
}

.quote-form button[type="submit"]:disabled { opacity: .6; cursor: progress; }