/* ============================================================
   Harriman Plumbing and Heating Limited — concept site
   Brand It! Midlands

   Every colour below was sampled from the pixels of their own
   logo (a blue water droplet with a flame licking its left
   side, on pure black). Nothing here was invented.

     ground   #010101   the logo's field
     flame    #F96F1C   the brightest pixel in the flame
     ember    #A32705   the flame's deep edge
     water    #23CAFC   the droplet's inner highlight
     cobalt   #0C67CF   the droplet's rim
     navy     #02126A   the droplet's deepest blue

   The site is organised on the same split as the mark: HEAT on
   the left, WATER on the right. That is not decoration — every
   service belongs to one side or the other, and the colour
   tells you which before you read the word.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --ground:        #050506;
  --ground-raise:  #0C0D10;
  --panel-heat:    #1C0803;
  --panel-water:   #061029;
  --hairline:      #23262B;

  --flame:         #F96F1C;
  --ember:         #A32705;
  --water:         #23CAFC;
  --cobalt:        #0C67CF;
  --navy:          #02126A;

  --white:         #FFFFFF;
  --text:          #E6E9EC;
  --muted:         #9BA5AE;
  --on-flame:      #140401;

  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(1.25rem, 4vw, 3rem);
  --max: 1180px;
  --max-wide: 1440px;

  --r: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--water); }

:focus-visible {
  outline: 3px solid var(--flame);
  outline-offset: 3px;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap-wide { width: 100%; max-width: var(--max-wide); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--flame); color: var(--on-flame);
  padding: 0.75rem 1.25rem; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  color: var(--white);
}

.label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.lede { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.5; color: var(--text); }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

/* ---------- header ---------- */
/* A thin black strip. The phone sits in it as plain type, large,
   because on a trade site the number is the headline, not a widget. */
.site-head {
  position: sticky; top: 0; z-index: 90;
  /* Solid, not translucent: backdrop-filter would make this the containing
     block for the fixed nav sheet inside it, and the sheet would no longer
     cover the viewport. */
  background: var(--ground);
  border-bottom: 1px solid var(--hairline);
}
.head-in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 66px;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: 30px; object-fit: cover; object-position: 62% 50%; }
.brand-name {
  font-family: var(--display); font-weight: 800; font-size: 1.0625rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); line-height: 1;
}
.brand-sub {
  display: block; font-family: var(--mono); font-size: 0.55rem;
  letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; margin-top: 3px;
}

.head-tel {
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.01em; color: var(--white); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px; white-space: nowrap;
}
.head-tel:hover, .head-tel:focus-visible { border-bottom-color: var(--flame); }
.head-tel .tel-pre {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--flame); text-transform: uppercase; display: block; margin-bottom: 1px;
}

.menu-btn {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); background: transparent;
  border: 1px solid #4A5058; border-radius: var(--r);
  padding: 0.7rem 0.95rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.menu-btn:hover { border-color: var(--white); }
.menu-bars { display: block; width: 15px; height: 9px; position: relative; }
.menu-bars::before, .menu-bars::after {
  content: ""; position: absolute; left: 0; width: 15px; height: 1.5px; background: var(--white);
}
.menu-bars::before { top: 0; }
.menu-bars::after  { bottom: 0; background: var(--flame); }

@media (max-width: 560px) {
  .head-tel { font-size: 1.0625rem; }
  .brand-sub { display: none; }
  .menu-btn { padding: 0.65rem 0.7rem; }
  .menu-btn .menu-word { display: none; }
}

/* ---------- the menu panel ---------- */
/* Full sheet, split the way the logo is split: fire left, water right. */
.nav-panel {
  position: fixed; inset: 0; z-index: 120;
  background: var(--ground);
  overflow-y: auto;
  display: none;
}
.nav-panel[data-open="true"] { display: block; }

.nav-top {
  display: flex; align-items: center; min-height: 66px;
  border-bottom: 1px solid var(--hairline);
}
.nav-close {
  margin-left: auto;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; border: 1px solid #4A5058; border-radius: var(--r);
  color: var(--white); padding: 0.7rem 0.95rem; cursor: pointer;
}
.nav-close:hover { border-color: var(--white); }

.nav-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 5vw, 3.5rem) 0 1rem;
}
@media (max-width: 720px) { .nav-cols { grid-template-columns: 1fr; gap: 2rem; } }

.nav-col-head {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--display); font-weight: 800; font-size: 0.95rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding-bottom: 0.65rem; margin-bottom: 0.35rem;
  border-bottom: 2px solid currentColor;
}
.heat .nav-col-head { color: var(--flame); }
.water .nav-col-head { color: var(--water); }
/* Not a stream — the site pages, which happen to sit in the right column. */
.nav-col-head.neutral { color: var(--muted); }
.nav-col-head span { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em; color: var(--muted); margin-left: auto; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: block; text-decoration: none; color: var(--white);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  padding: 0.72rem 0; border-bottom: 1px solid var(--hairline);
}
.nav-list a:hover { color: var(--flame); padding-left: 0.5rem; transition: padding-left 0.15s ease; }
.water .nav-list a:hover { color: var(--water); }
.nav-list a[aria-current="page"] { color: var(--muted); }
.nav-list a[aria-current="page"]::after { content: " — you are here"; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }

.nav-foot {
  border-top: 1px solid var(--hairline); margin-top: 2rem;
  padding: 1.75rem 0 3rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-end;
}
.nav-foot a { color: var(--white); text-decoration: none; }
.nav-tel { font-family: var(--display); font-weight: 800; font-size: clamp(1.75rem, 6vw, 2.75rem); letter-spacing: -0.02em; }
.nav-tel:hover { color: var(--flame); }

/* ---------- buttons ---------- */
/* Anything that promises an action is an <a href> or a <button>,
   and it is shaped like something you can press. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.01em; text-decoration: none;
  padding: 0.95rem 1.5rem; border-radius: var(--r);
  border: 2px solid transparent; cursor: pointer; line-height: 1.2;
}
.btn-flame { background: var(--flame); color: var(--on-flame); border-color: var(--flame); }
.btn-flame:hover { background: #FF8235; border-color: #FF8235; }
.btn-ghost { background: transparent; color: var(--white); border-color: #4A5058; }
.btn-ghost:hover { border-color: var(--white); }
.btn-water { background: var(--water); color: #021018; border-color: var(--water); }
.btn-water:hover { background: #5AD8FF; border-color: #5AD8FF; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- hero: the droplet ---------- */
/* The one bold thing on this site. Their mark, at full size,
   with a real photograph of their work inside it and their own
   flame — lifted straight off the logo — burning up its left
   flank. Everything else on the page is kept quiet. */
.hero { padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(3rem, 7vw, 5.5rem); text-align: center; }

.drop-stage {
  position: relative;
  width: clamp(200px, 33vw, 286px);
  aspect-ratio: 0.76;
  margin: 0 auto clamp(1.5rem, 3.5vw, 2.25rem);
}
.drop-shape {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
  clip-path: url(#dropclip);
  /* A white boiler on pale plaster. Left alone it reads as a blank shape at
     this size — pushed so the copper and the lit dial come forward. */
  filter: contrast(1.34) saturate(1.3) brightness(0.94);
}
/* A cobalt rim on the wet side, so the silhouette holds against the black. */
.drop-rim {
  position: absolute; inset: 0;
  clip-path: url(#dropclip);
  background: linear-gradient(105deg, rgba(2,18,106,0.55) 0%, rgba(2,18,106,0.10) 34%, transparent 58%,
              rgba(12,103,207,0.30) 88%, rgba(35,202,252,0.42) 100%);
  pointer-events: none;
}
.drop-glow {
  position: absolute; inset: -18% -12% -8% -14%;
  background: radial-gradient(46% 40% at 22% 50%, rgba(249,111,28,0.20), transparent 72%),
              radial-gradient(46% 40% at 80% 46%, rgba(12,103,207,0.20), transparent 74%);
  z-index: -1; pointer-events: none;
}
/* Their own flame, cut from their own logo, composited with screen so the
   black field drops out and only the fire lands on the photograph. The
   contrast lift crushes the JPEG's near-blacks to true black — without it
   they screen to a visible grey rectangle around the flame. */
.drop-flame {
  position: absolute; left: -25%; top: 1%;
  width: 62%; height: auto;
  mix-blend-mode: screen;
  filter: contrast(1.6) brightness(1.08) saturate(1.1);
  pointer-events: none;
  animation: flicker 5.5s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 0.94; transform: scale(1) translateY(0); }
  38%      { opacity: 1;    transform: scale(1.035) translateY(-1.5%); }
  67%      { opacity: 0.88; transform: scale(0.985) translateY(0.8%); }
}

.hero h1 {
  font-size: clamp(2.375rem, 7.6vw, 5rem);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.035em; line-height: 0.87;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.hero h1 .half-heat  { color: var(--flame); }
.hero h1 .half-water { color: var(--water); }

.hero-lede { max-width: 47ch; margin: 0 auto clamp(1.5rem, 3.5vw, 2.25rem); color: var(--text); }
.hero .btn-row { justify-content: center; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.hero-eyebrow .label { color: var(--muted); }
.hero-eyebrow .rule { display: block; width: 34px; height: 1px; background: var(--flame); }
.hero-eyebrow .rule.w { background: var(--water); }

/* ---------- the hours band ---------- */
/* The conversion goes first, before the services. A plumber's
   visitor wants the number and whether he is awake. */
.hours {
  background: var(--panel-heat);
  border-top: 1px solid #35150A; border-bottom: 1px solid #35150A;
  padding: clamp(2.25rem, 5vw, 3.75rem) 0;
}
.hours-in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .hours-in { grid-template-columns: 1fr; } }

.hours-tel {
  display: inline-block; text-decoration: none;
  font-family: var(--display); font-weight: 900; letter-spacing: -0.035em;
  font-size: clamp(2.4rem, 8.5vw, 4.25rem); line-height: 0.95;
  color: var(--white); margin: 0.35rem 0 0.85rem;
}
.hours-tel:hover { color: var(--flame); }
.hours-note { color: var(--muted); max-width: 42ch; font-size: 0.9375rem; }

/* the week as a strip — a timetable, because that is what it is */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day {
  padding: 0.85rem 0.3rem 0.9rem; text-align: center;
  background: rgba(255,255,255,0.035);
  border-top: 3px solid var(--flame);
}
.day.shut { border-top-color: #3A3F46; background: rgba(255,255,255,0.015); }
.day-n { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: block; }
.day-v { font-family: var(--display); font-weight: 800; font-size: 0.9375rem; color: var(--flame); display: block; margin-top: 0.35rem; }
.day.shut .day-v { color: #7C848C; }
@media (max-width: 560px) {
  .week { grid-template-columns: repeat(4, 1fr); }
  .day-v { font-size: 0.8125rem; }
}

/* ---------- the offer ---------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head h2 { font-size: clamp(1.875rem, 5vw, 3.25rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; }
.section-head .label { margin-bottom: 0.75rem; }
.section-head p { max-width: 56ch; color: var(--muted); margin-top: 0.9rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 2.5rem; } }

.stream-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding-bottom: 0.85rem; margin-bottom: 0.25rem;
  border-bottom: 2px solid currentColor;
}
.stream-head h3 { font-size: 1.0625rem; letter-spacing: 0.18em; text-transform: uppercase; color: inherit; font-weight: 800; }
.stream-head .count { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--muted); }
.stream.heat  { color: var(--flame); }
.stream.water { color: var(--water); }

.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-link {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.5rem 1rem;
  text-decoration: none; color: var(--white);
  padding: 1.05rem 0.75rem 1.05rem 0;
  border-bottom: 1px solid var(--hairline);
}
.svc-link:hover, .svc-link:focus-visible { background: rgba(255,255,255,0.045); padding-left: 0.75rem; }
.svc-link .n { font-family: var(--display); font-weight: 700; font-size: clamp(1.0625rem, 2.2vw, 1.25rem); letter-spacing: -0.015em; }
.svc-link .d { grid-column: 1 / -1; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.svc-link .arrow { color: currentColor; font-size: 1.1rem; line-height: 1; }
.stream.heat  .svc-link .arrow { color: var(--flame); }
.stream.water .svc-link .arrow { color: var(--water); }

/* ---------- reviews ---------- */
.reviews { background: var(--panel-water); border-top: 1px solid #0B1D45; border-bottom: 1px solid #0B1D45; }

.stars { color: var(--flame); font-size: 1.15rem; letter-spacing: 0.15em; }
.rating-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin-bottom: 1.5rem; }
.rating-n { font-family: var(--display); font-weight: 900; font-size: 2.25rem; color: var(--white); letter-spacing: -0.03em; }

.topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.topic {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  border: 1px solid #1B3B7A; border-radius: 100px;
  padding: 0.38rem 0.8rem; color: var(--text);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.topic b { color: var(--water); font-weight: 500; }
.topics-note { font-size: 0.8125rem; color: var(--muted); max-width: 62ch; }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  background: rgba(255,255,255,0.04); border-left: 3px solid var(--cobalt);
  padding: 1.35rem 1.35rem 1.15rem;
}
.quote p { font-size: 1rem; }
.quote cite { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-style: normal; margin-top: 0.9rem; }
.sample-note {
  margin-top: 1.25rem; font-family: var(--mono); font-size: 0.72rem; line-height: 1.6;
  color: var(--muted); max-width: 74ch;
  border-top: 1px solid #12305F; padding-top: 0.9rem;
}

/* ---------- work strip ---------- */
.strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: 10px; overflow-x: auto; padding-bottom: 0.75rem;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.strip figure { margin: 0; scroll-snap-align: start; }
.strip img { aspect-ratio: 3/4; object-fit: cover; width: 100%; border-radius: var(--r); }
.strip figcaption { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.55rem; line-height: 1.45; }

/* ---------- inner pages ---------- */
.page-head { padding: clamp(2.25rem, 5vw, 3.75rem) 0 clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--hairline); }
.page-head h1 { font-size: clamp(2.125rem, 6.5vw, 4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.035em; margin-bottom: 1rem; }
.page-head .lede { max-width: 58ch; color: var(--muted); }

.tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.4rem 0.75rem; border-radius: 100px; margin-bottom: 1.1rem;
}
.tag-heat  { color: var(--flame); border: 1px solid #5C2408; background: rgba(249,111,28,0.09); }
.tag-water { color: var(--water); border: 1px solid #123E7C; background: rgba(35,202,252,0.08); }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.crumb { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 1.5rem; }
.crumb a { color: var(--muted); text-decoration: none; border-bottom: 1px solid #3A3F46; }
.crumb a:hover { color: var(--white); border-bottom-color: var(--white); }

/* These are phone photographs and most of them are portrait. Cropping them to
   a letterbox cut the subject out of the best one on the site, so the image
   sizes itself and the figure centres it — no crop, either orientation. */
.svc-hero { margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; }
.svc-hero img {
  width: auto; max-width: 100%; height: auto; max-height: 68vh;
  margin-inline: auto; border-radius: var(--r);
}
.svc-hero figcaption {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em;
  color: var(--muted); margin-top: 0.75rem; text-align: center;
}

.svc-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding: clamp(2.5rem, 5vw, 4rem) 0; }
@media (max-width: 880px) { .svc-body { grid-template-columns: 1fr; } }
.prose h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); margin: 2.25rem 0 0.85rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.15rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: 0.5rem; }

.aside { border: 1px solid var(--hairline); border-top: 3px solid var(--flame); padding: 1.5rem; background: var(--ground-raise); }
.aside.water { border-top-color: var(--water); }
.aside h3 { font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; }
.aside dl { margin: 0; }
.aside dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--flame); margin-top: 1.35rem; }
.aside.water dt { color: var(--water); }
.aside dd + dd { margin-top: 0.45rem; }
.aside dt:first-child { margin-top: 0; }
.aside dd { margin: 0.3rem 0 0; font-size: 0.9375rem; }
.aside .btn { width: 100%; margin-top: 1.5rem; }

.also { border-top: 1px solid var(--hairline); padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
.also-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; margin-top: 1.25rem; }
.also-grid a {
  display: block; text-decoration: none; color: var(--white);
  border: 1px solid var(--hairline); border-left: 3px solid var(--flame);
  padding: 1rem 1.1rem; font-family: var(--display); font-weight: 600; font-size: 1rem;
}
.also-grid a.w { border-left-color: var(--water); }
.also-grid a:hover { background: rgba(255,255,255,0.05); border-color: #454B53; }

/* ---------- gallery ---------- */
.gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.gal figure { margin: 0; background: var(--ground-raise); border: 1px solid var(--hairline); }
.gal img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.gal .tall img { aspect-ratio: 3/4; }
.gal .wide { grid-column: span 2; }
.gal .wide img { aspect-ratio: 4/3; }
@media (max-width: 640px) { .gal .wide { grid-column: span 1; } }
.gal figcaption { padding: 0.85rem 1rem 1rem; }
.gal figcaption b { display: block; font-family: var(--display); font-weight: 700; font-size: 0.9375rem; color: var(--white); margin-bottom: 0.3rem; }
.gal figcaption span { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }

/* ---------- facts / about ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.fact { background: var(--ground); padding: 1.4rem 1.25rem; }
.fact dt { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.fact dd { margin: 0.5rem 0 0; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--white); letter-spacing: -0.01em; }
.fact dd small { display: block; font-family: var(--body); font-weight: 400; font-size: 0.8125rem; color: var(--muted); letter-spacing: 0; margin-top: 0.35rem; line-height: 1.45; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding: clamp(2.5rem, 5vw, 4rem) 0; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--water); }
.field input, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--white);
  background: var(--ground-raise); border: 1px solid #3A3F46; border-radius: var(--r);
  padding: 0.8rem 0.9rem; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--water); outline: 2px solid var(--water); outline-offset: 1px; }
.field .hint { font-size: 0.8125rem; color: var(--muted); }

.form-note { font-family: var(--mono); font-size: 0.72rem; line-height: 1.6; color: var(--muted); }

.sent {
  border: 1px solid var(--flame); border-left-width: 3px;
  background: rgba(249,111,28,0.08); padding: 1.25rem 1.35rem;
}
.sent h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; color: var(--flame); }
.sent p { font-size: 0.9375rem; margin-bottom: 0.6rem; }
[hidden] { display: none !important; }

.contact-block { border-top: 3px solid var(--flame); background: var(--ground-raise); padding: 1.5rem; }
.contact-block + .contact-block { margin-top: 1rem; border-top-color: var(--water); }
.contact-block h2 { font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; }
.contact-tel { font-family: var(--display); font-weight: 900; font-size: clamp(1.75rem, 5.5vw, 2.5rem); letter-spacing: -0.03em; color: var(--white); text-decoration: none; display: inline-block; }
.contact-tel:hover { color: var(--flame); }
.contact-block a.plain { color: var(--water); word-break: break-word; }

/* ---------- final call ---------- */
.tail { border-top: 1px solid var(--hairline); padding: clamp(2.75rem, 6vw, 4.5rem) 0; text-align: center; }
.tail h2 { font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; margin-bottom: 1rem; }
.tail p { color: var(--muted); max-width: 46ch; margin-inline: auto; margin-bottom: 1.75rem; }
.tail .btn-row { justify-content: center; }

/* ---------- footer ---------- */
.site-foot { background: #030304; border-top: 1px solid var(--hairline); padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-lockup { width: 168px; margin-bottom: 1.1rem; }
.foot-grid h2 { font-family: var(--mono); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin-bottom: 0.5rem; }
.foot-list a, .foot-contact a { color: var(--text); text-decoration: none; font-size: 0.9375rem; }
.foot-list a:hover, .foot-contact a:hover { color: var(--flame); }
.foot-contact { font-size: 0.9375rem; color: var(--muted); }
.foot-contact a { display: inline-block; margin-bottom: 0.35rem; }
.creds { font-size: 0.875rem; color: var(--muted); margin-top: 1rem; max-width: 34ch; }

.foot-bar {
  border-top: 1px solid var(--hairline); margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--muted);
}
.foot-bar .concept { color: var(--flame); }
.foot-bar .credit a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.foot-bar .credit a:hover, .foot-bar .credit a:focus-visible { color: var(--flame); border-bottom-color: currentColor; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .drop-flame { animation: none; opacity: 0.95; }
}