/* =========================================================================
   Esther's Sheet Metal - site.css
   The multi-page shell: black ground, orange accents, white type.

   HOW THIS FITS WITH THE OLDER STYLESHEETS

   base.css, home.css and configurator.css were written for a single dark
   page and they still style everything app.js renders - the material
   configurator, the comparison tool, the quote form, the location cards,
   the work grid. None of that has been touched, because the comparison
   behaviour in particular is approved and hard-won.

   So this file does two things:

     1. It takes over the PAGE - header, footer, headings, copy, buttons,
        photography. It loads LAST, so its body and html rules win.

     2. It keeps the whole site on ONE dark ground, so the tools and the
        page around them are the same surface with no seam between them.

   WHY DARK, AND HOW IT AVOIDS THE LOOK THAT WAS REJECTED

   The complaint about the old site was not that it was dark - it was that
   it read as a tech-startup landing page: rounded cards everywhere, soft
   panels, gradients, one long scroll. Dark is not the problem; soft is.

   So the ground stays near-black and the corrections are structural:
   square corners, heavy rules instead of card edges, uppercase industrial
   headings, orange used only where something is actionable or worth
   marking, real fabrication photography, and seven short pages instead of
   one endless one.

   The legacy tokens are retuned here from a blue-cast charcoal (#0a0b0c,
   #15181b) to a NEUTRAL near-black. Same roles, same contrast or better -
   every ink still clears 4.5:1 on the lightest surface - but the whole
   site now sits in one black/orange/white family rather than two.
   ========================================================================= */

:root {
  /* ---- brand ------------------------------------------------------- */
  --black:        #111111;   /* the page ground */
  --raised:       #1a1a1a;   /* a band lifted off the ground */
  --panel:        #212121;   /* a panel on a raised band */
  --white:        #ffffff;

  /* READABILITY.
     Body copy started at #b9bcbe, which passes every contrast check and
     still reads as grey-on-grey next to a white heading, and has been
     lifted twice since. It is now within a couple of steps of white:
     descriptive copy - the thing people actually came to read - is not
     allowed to be grey on this site.

     Only two steps sit below it, and they are for supporting lines and for
     metadata. Nothing in the system is dimmer than 8.5:1 on the ground. */
  --body:         #f0f1f2;   /* primary body copy - 16.6:1 on #111 */
  --body-2:       #d2d5d6;   /* supporting lines           - 12.6:1 */
  --faint:        #adb0b2;   /* labels, specs, metadata    -  8.6:1 */

  --rule:         #2f2f2f;   /* hairline */
  --rule-strong:  #454545;

  /* Industrial orange. On this ground one value does the whole job:
     #f36c21 reads 6.27:1 on #111111 and still 5.03:1 on the lightest
     surface in the system, so it is safe as text, as a rule and as a fill.
     --orange-ink survives only for the orange CTA band, where the type is
     black on orange rather than the other way round. */
  --orange:       #f36c21;
  --orange-ink:   #a2410c;
  --orange-dark:  #d4560f;

  /* ---- page metrics ------------------------------------------------ */
  --wrap:         1280px;
  --wrap-wide:    1440px;
  --pad:          clamp(20px, 5vw, 56px);
  --bar:          72px;

  /* ---- softened corners -------------------------------------------
     The radius is spent only on the things a hand goes to or an eye lands
     on: the photography, the buttons, and the cards and panels of the
     materials tool. The structure of the page - bands, rules, the fact
     strip, the service rows - stays square, because that is what keeps
     this industrial rather than bubbly.

     12px on a 600px photograph turned out to be a corner you had to look
     for. These are the sizes where the treatment reads at a glance from
     across the page without any of it becoming a pill. */
  --bev:          20px;      /* photography, cards and large panels */
  --bev-s:        14px;      /* buttons and small controls          */

  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---- legacy tokens ------------------------------------------------
     base.css, configurator.css, home.css and chat.css all read these.
     They are the single lever that brightens the materials tool.

     The complaint about the tool was that it had gone grey-on-grey and
     flat. It had: panels a hair off the ground, hairlines at 10% white,
     and supporting text two steps down. Every value below is lifted -
     surfaces separate from the ground, rules are visible without being
     loud, and the two body inks are near-white. The tool's own layout,
     logic and material data are untouched; only the surface it is drawn
     on has changed. */
  --bg:            #111111;
  --bg-raised:     #1b1b1b;
  --bg-panel:      #212121;
  --bg-elevated:   #2a2a2a;
  --bg-hover:      #333333;
  --line:          rgba(255, 255, 255, 0.18);
  --line-strong:   rgba(255, 255, 255, 0.34);
  --line-soft:     rgba(255, 255, 255, 0.10);
  --ink:           #ffffff;   /* 13.9:1 on the lightest surface */
  --ink-muted:     #e8eaea;   /* 12.2:1 - the tool's reading colour */
  --ink-dim:       #c8cbcc;   /*  9.1:1 - spec detail, meter notes  */
  --ink-faint:     #adb0b2;   /*  6.8:1 - labels and units only     */
}

html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* base.css sets max-width but not height, so an <img> carrying width/height
   attributes keeps its literal pixel height while the width shrinks - which
   turns a 720x900 photo into a very tall sliver in a narrow column. Scoped
   to this file's own components so the configurator, which sizes its own
   imagery deliberately, is left alone. */
img, svg { display: block; max-width: 100%; }
.shot img, .figset img, .hero2__figure img { height: auto; }

/* One visible focus ring for the whole site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange); color: var(--black);
  padding: 12px 18px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 13px;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------- layout */

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

.band { padding-block: clamp(56px, 7vw, 104px); }
.band--tight { padding-block: clamp(40px, 5vw, 68px); }
.band--paper { background: var(--raised); }
.band--rule { border-top: 1px solid var(--rule); }

/*
 * Where app.js renders. The page is already this ground, so this exists to
 * keep the older stylesheets' expectations explicit rather than implied -
 * and so a tool section can be lifted onto a different surface later
 * without hunting for what it assumed.
 */
.band--dark {
  background: var(--bg);
  color: var(--ink);
}
.band--dark a { color: var(--ink); }
.band--dark .section { padding-block: clamp(48px, 6vw, 88px); }
.band--dark .section + .section { border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------------- typography */

.eyb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyb::after { content: ""; height: 3px; flex: 0 0 34px; background: var(--orange); }
.band--dark .eyb, .on-black .eyb { color: var(--orange); }

h1, h2, h3, h4 { font-family: var(--sans); margin: 0; text-wrap: balance; }

.t-hero {
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-transform: uppercase;
}
.t-1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-transform: uppercase;
}
.t-2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.t-3 { font-size: 1.14rem; line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; }

/* .copy is the primary reading colour and is near-white. .copy--sub is the
   one step down, for a supporting line under something already said - not
   for the description of a service or a material, which is the copy people
   came to read. */
.copy { font-size: 1.03rem; line-height: 1.65; color: var(--body); max-width: 62ch; margin: 0; }
.copy--lead { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--white); }
.copy--sub { color: var(--body-2); }
.copy + .copy { margin-top: 1em; }
.band--dark .copy, .on-black .copy { color: var(--ink-muted); }

/*
 * A small mono line of metadata - an address, a phone number, a material
 * list. Called .metaline and not .spec because configurator.css ALREADY owns
 * .spec: it is the card in the material detail panel, and it has a
 * background, 22px of padding and an entrance animation.
 *
 * Same specificity, and this file loads last, so a .spec here quietly took
 * over the font, the tracking and the colour of every spec card on the
 * materials page - uppercase, mono, 11.5px - and inherited them into the
 * detail text underneath. That is a large part of what made the tool look
 * flat. Do not reintroduce the name.
 */
.metaline {
  font-family: var(--mono);
  /* 12px and a step brighter than --faint. This carries the material list
     and the shop address under every service, which people read - it is
     small type, not throwaway type. */
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--body-2);
}

/* ------------------------------------------------------------ buttons */
/* base.css's .btn is a different shape and a different colour, so these are
   named apart and never mixed with it outside a dark band.

   THE CORNER. Hard square edges made the orange button look like a block of
   colour dropped on the page rather than something to press. It carries the
   same softened corner as the photography now - enough to read as a control,
   not enough to become a pill. Everything else about it is unchanged: the
   orange, the size, the uppercase weight. */

.ebtn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid var(--orange);
  border-radius: var(--bev-s);
  background: var(--orange);
  color: var(--black);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease,
              border-color 160ms ease, box-shadow 160ms ease;
}
.ebtn:hover { background: var(--white); border-color: var(--white); color: var(--black); }

.ebtn--orange { background: var(--orange); border-color: var(--orange); color: var(--black); }
.ebtn--orange:hover { background: var(--white); border-color: var(--white); color: var(--black); }

/* The quiet second action: outline only, so the orange one stays the
   obvious thing to press. */
.ebtn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.ebtn--ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }

.ebtn__mark { font-size: 17px; line-height: 1; }

.tlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; text-decoration: none;
  color: var(--white); border-bottom: 3px solid var(--orange);
  padding-bottom: 4px;
}
.tlink:hover { color: var(--orange); }

/* =============================================================== header */

.sitebar {
  position: sticky; top: 0; z-index: 90;
  background: var(--black);
  border-bottom: 3px solid var(--orange);
}
.sitebar__in {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--bar);
}
/*
 * THE HEADER IS TYPE, NOT ARTWORK.
 *
 * The bar used to carry a 400x31 raster of the name. At 30px tall in a black
 * bar it was soft on any display that is not 2x, its grey was a step below
 * the white links beside it, and it read as a rectangle pasted onto the
 * header rather than part of it.
 *
 * The name is set in the page's own face instead. It is crisp at every size
 * and on every display, it scales with the viewport, and it stops growing
 * before it starts taking width the navigation needs.
 *
 * The delivered logo - folded metal mark, "Esther's", "Sheet Metal" - is not
 * gone. It is in the home hero and in the footer, at a size worth having and
 * with room around it, which is what a 72px bar could never give it.
 */
.brandmark {
  display: grid;
  gap: 4px;
  margin-right: auto;
  min-width: 0;
  padding-block: 8px;
  text-decoration: none;
  color: var(--white);
}
.brandmark__name {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--white);
}
.brandmark__sub {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--body-2);
  white-space: nowrap;
}
.brandmark:hover .brandmark__name { color: var(--orange); }
.brandmark:hover .brandmark__sub { color: var(--orange); }

/* On the narrowest phones the second line and the menu button are competing
   for the same 300px. The tracking goes first, then a point of size - the
   line still fits, and the name above it never changes. */
@media (max-width: 430px) {
  .brandmark__name { font-size: 18px; }
  .brandmark__sub { font-size: 8px; letter-spacing: 0.1em; }
}

.sitenav { display: flex; align-items: center; gap: 2px; }
.sitenav a {
  display: inline-flex; align-items: center;
  height: var(--bar); padding: 0 14px;
  color: var(--white); text-decoration: none;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}
.sitenav a:hover { color: var(--orange); }
.sitenav a[aria-current="page"] { color: var(--orange); border-bottom-color: var(--orange); }

/* The one button in the bar. Softened corner, same orange, and a ring on
   hover and focus so it is unmistakably the thing to press. */
.sitebar__cta {
  display: inline-flex; align-items: center;
  height: 42px; padding: 0 20px; margin-left: 10px;
  border-radius: var(--bev-s);
  background: var(--orange); color: var(--black);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.sitebar__cta:hover { background: var(--white); box-shadow: 0 0 0 3px rgba(255,255,255,0.22); }

.navtoggle {
  display: none;
  width: 46px; height: 46px;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: var(--bev-s);
  background: transparent; color: var(--white);
  align-items: center; justify-content: center;
}
.navtoggle:hover { border-color: var(--orange); color: var(--orange); }
.navtoggle span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.navtoggle span::before,
.navtoggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.navtoggle span::before { top: -6px; }
.navtoggle span::after { top: 6px; }

@media (max-width: 940px) {
  .navtoggle { display: inline-flex; }
  .sitebar__cta { display: none; }
  .sitenav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--black);
    border-bottom: 3px solid var(--orange);
    padding: 6px 0 14px;
  }
  .sitebar { position: sticky; }
  .sitebar__in { position: relative; }
  .sitenav.is-open { display: flex; }
  .sitenav a {
    height: auto; padding: 15px var(--pad);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0; font-size: 14px;
  }
  .sitenav a[aria-current="page"] {
    border-bottom-color: rgba(255,255,255,0.1);
    box-shadow: inset 4px 0 0 var(--orange);
  }
  .sitenav .sitenav__cta {
    margin: 12px var(--pad) 0; padding: 15px 18px;
    border-radius: var(--bev-s);
    background: var(--orange); color: var(--black);
    justify-content: center; border-bottom: 0;
  }
}
/* Two selectors deep so it outranks `.sitenav a` above. */
@media (min-width: 941px) { .sitenav a.sitenav__cta { display: none; } }

/* ================================================================= hero */

.hero2 { background: var(--black); color: var(--white); }
.hero2__in { border-bottom: 0; }
.hero2__in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 92px);
}
/*
 * THE BRAND BLOCK. This is where the delivered logo lives - the folded metal
 * mark with "Esther's" and "Sheet Metal" under it. It is the first thing in
 * the hero column, above the location line, with a rule under it and real
 * space either side.
 *
 * It sits ABOVE the headline rather than beside it deliberately: at 52px it
 * is a masthead, and "Built to fit. Made to last." three times that size a
 * moment later is still unmistakably the loudest thing on the page.
 */
.hero2__brand { margin: 0 0 28px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
/* SIZE IT PROPERLY OR DO NOT USE IT. The artwork is a folded metal mark with
   "SHEET METAL" set small under the name; below about 70px tall that second
   line is a smudge and the mark is a grey blur - which is exactly the
   complaint that got the old header lockup removed. Here there is room, so
   it gets the height it needs to be legible. */
.hero2__brand img { height: clamp(56px, 6.6vw, 88px); width: auto; }

.hero2__since {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--orange); margin: 0 0 20px;
}
.hero2 h1 { color: var(--white); }
.hero2 h1 em { font-style: normal; color: var(--orange); }
.hero2__copy { margin-top: 22px; color: var(--body); max-width: 46ch; font-size: 1.05rem; }
.hero2__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero2__figure { position: relative; }
.hero2__figure img {
  width: 100%; object-fit: cover; aspect-ratio: 4 / 5;
  border-radius: var(--bev);
}
/* The tag sits in the figure's corner, so it takes the figure's radius on
   the two edges it shares with it and a smaller one on the inside corner. */
.hero2__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--orange); color: var(--black);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 9px 14px;
  border-bottom-left-radius: var(--bev);
  border-top-right-radius: var(--bev-s);
}

@media (max-width: 860px) {
  .hero2__in { grid-template-columns: 1fr; padding-block: 40px 0; }
  /* Full-bleed below this width, and a corner radius on an edge that runs
     off the screen only shows the ground through a notch. Square it. */
  .hero2__figure { margin: 36px calc(var(--pad) * -1) 0; }
  .hero2__figure img { aspect-ratio: 3 / 2; border-radius: 0; }
  .hero2__tag { border-radius: 0; border-top-right-radius: var(--bev-s); }
}

/* ------------------------------------------------------- strip of facts */

.strip { background: var(--raised); color: var(--white); border-block: 1px solid var(--rule); }
.strip__in {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.strip__cell { padding: 22px 0 24px; border-left: 1px solid var(--rule); padding-left: 22px; }
.strip__cell:first-child { border-left: 0; padding-left: 0; }
.strip__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); }
.strip__v { font-size: 15px; font-weight: 600; margin-top: 6px; color: var(--white); }
@media (max-width: 780px) {
  .strip__in { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .strip__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .strip__cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ------------------------------------------------------------ page head */

.phead {
  background: var(--raised);
  color: var(--white);
  padding-block: clamp(40px, 5.5vw, 76px);
  border-bottom: 1px solid var(--rule);
}
.phead h1 { color: var(--white); }
.phead .copy { color: var(--body); margin-top: 20px; }
.crumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 18px; }
.crumb a { color: var(--ink-dim); text-decoration: none; }
.crumb a:hover { color: var(--orange); }

/* ----------------------------------------------------------- structures */

/* A plain list of things with a rule between them. Not a card. */
.rows { border-top: 2px solid var(--orange); }
.rowitem {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: clamp(18px, 3vw, 40px);
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.rowitem__n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--orange); padding-top: 4px; }
.rowitem__b .copy { margin-top: 9px; }

/* The home page's index form: names only, each one a way into /services.
   Square, ruled and industrial - the bevel is spent elsewhere. */
.rows--index { list-style: none; margin: 0; padding: 0; }
.rows--index .rowitem { padding: 18px 0; align-items: center; }
.rowitem__link {
  display: inline-block;
  color: var(--white);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.rowitem__link:hover { color: var(--orange); border-bottom-color: var(--orange); }
@media (max-width: 620px) {
  .rowitem { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
}

/* Two-column editorial split. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 28px; } }

.figset { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.figset img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--bev); }
@media (max-width: 520px) { .figset { grid-template-columns: 1fr; } }

/* Photo with a caption bar, used on Home and Gallery. The frame is softened;
   the caption underneath is still a rule and a line of type, not a card, so
   these read as photographs rather than tiles. */
.shot { margin: 0; background: transparent; }
.shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--bev); }
.shot figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 13px 0 0;
  border-top: 2px solid var(--orange);
  margin-top: 12px;
}
.shot__t { font-size: 14.5px; font-weight: 700; color: var(--white); }
.shot__m { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 30px); }
@media (max-width: 900px) { .shots { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .shots { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ service sections */
/*
 * The Services page, not the home page's list of the same names.
 *
 * Home answers "what do they make". This answers "what does that actually
 * mean when I order it" - what the work includes, where it goes, what it can
 * be made from, which of the two shops does it, and a photograph of one. One
 * section per service, alternating sides so the page reads as a sequence of
 * subjects rather than a stack of tiles.
 */
.svc {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(26px, 4.5vw, 64px);
  align-items: start;
}
/* Alternating sides. The photograph moves, the reading column does not -
   the eye keeps landing in the same place down the page. */
.svc--flip .svc__media { order: -1; }
/* One service has no photograph of its own yet. Rather than borrow a photo of
   something else and caption it as panels, that section drops the media
   column - but its reading column keeps the width the others have, so the
   lines do not stretch to 1400px and the section still lines up with them. */
.svc--solo { grid-template-columns: minmax(0, 1fr); }
.svc--solo > * { max-width: 720px; }
/* height:auto is load-bearing, not tidiness. These <img> carry width/height
   attributes, which map to the height property - and aspect-ratio is only
   consulted when one axis is auto. Without this the 4/3 crop is ignored and
   a 1200x1600 photograph renders 1600px tall. */
.svc__media img {
  width: 100%; height: auto;
  /* 1:1, for the same reason the gallery crops square: these are portrait,
     landscape and square shop photographs, and a square crop treats all of
     them evenly instead of gutting one. */
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--bev);
}
.svc__media figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--body-2); margin-top: 12px;
}
.svc__lists {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px); margin-top: 28px;
}
.svc__h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--orange); margin: 0 0 11px;
}
.svc__list { margin: 0; padding: 0; list-style: none; }
.svc__list li {
  position: relative; padding-left: 19px;
  font-size: 0.97rem; line-height: 1.55; color: var(--body); margin-bottom: 8px;
}
/* A cut mark rather than a bullet - the shop's own vocabulary. */
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: 0.63em;
  width: 9px; height: 2px; background: var(--orange);
}
.svc__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule);
}
.svc__where { margin: 0; }

@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; }
  /* Source order below this width: heading, copy, lists, photo, button. The
     alternation only reads as alternation when there are two columns. */
  .svc--flip .svc__media { order: 0; }
  .svc__lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .svc__lists { grid-template-columns: 1fr; gap: 22px; }
}

/* ------------------------------------------------------ specialty callout

   Used once, on the services page, for the louvered and architectural cap
   work. It is a facet of a service above rather than a service of its own,
   so it is deliberately NOT built from .svc: a panel lifted off the ground
   with one orange edge, and a photograph capped well below the size of a
   service photo so the two never read as siblings.

   The media column is clamped rather than a fraction. At 1440 a plain
   0.8fr would hand the photograph a 480px column and a 640px height, which
   is taller than the text beside it and turns a callout back into a
   service row. */
.feat {
  display: grid;
  grid-template-columns: clamp(220px, 30%, 330px) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 48px);
  align-items: center;
  background: var(--panel);
  border-radius: var(--bev);
  border-left: 3px solid var(--orange);
  padding: clamp(22px, 3vw, 40px);
}
.feat__media { margin: 0; }
/* The frame is 3/4. The architectural shroud in it is 720x1080 (2/3), so
   cover trims about 11% off the height - ceiling and pallet edge, not the
   piece. Swap in a 3/4 photograph and it crops nothing. */
.feat__media img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--bev-s);
}
.feat__media figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--body-2); margin-top: 12px;
}
.feat__body .t-2 { margin-bottom: 14px; }
.feat__ask {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--rule-strong);
}
.feat__who {
  font-size: 1.03rem; line-height: 1.5; font-weight: 700;
  color: var(--white); margin: 0 0 8px;
}
/* The address sits in a .metaline, which uppercases - and MANAGER@ESTHERS.CA
   is not how the rest of the site writes an email. Every other mailto on the
   site renders in normal case; this one matches them. */
.feat__mail {
  color: var(--orange); text-decoration: none;
  text-transform: none; letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
}
.feat__mail:hover, .feat__mail:focus-visible { border-bottom-color: currentColor; }

@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; }
  /* Heading first on a phone. The photograph is the evidence, not the
     introduction, so it follows the copy the way the service rows do.

     The cap is the point of the whole block. Stacked and unconstrained
     this portrait photo runs to 914px tall at 820 - taller than the 658px
     square a real service row gets, so the callout would end up shouting
     louder than the services it is a footnote to. */
  .feat__media { order: 1; max-width: 340px; }
}

/* --------------------------------------------------------------- CTA band */

.cta {
  background: var(--orange);
  color: var(--black);
  padding-block: clamp(40px, 5.5vw, 72px);
}
.cta__in { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.03; letter-spacing: -0.025em; font-weight: 800; text-transform: uppercase; max-width: 18ch; }
.cta p { margin: 12px 0 0; max-width: 46ch; color: #2b1506; font-size: 1.02rem; }
.cta .ebtn { border-color: var(--black); background: var(--black); color: var(--white); }
.cta .ebtn:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* =============================================================== footer */

.sitefoot { background: var(--raised); color: var(--body); border-top: 3px solid var(--orange); }
.sitefoot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(26px, 3.4vw, 52px);
  padding-block: clamp(40px, 5vw, 64px);
}
/* The second home of the delivered logo. The footer column is the widest
   thing on the page that is not a photograph, so the full lockup fits here
   at a size where the folded mark is legible instead of a smudge. */
.sitefoot__logo { display: inline-block; }
.sitefoot__logo img { height: clamp(48px, 4.6vw, 62px); width: auto; }
.sitefoot h2 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--orange); margin: 0 0 16px;
  padding-bottom: 9px; border-bottom: 1px solid var(--rule);
}
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin-bottom: 9px; font-size: 14.5px; }
.sitefoot a { color: var(--body); text-decoration: none; }
.sitefoot a:hover { color: var(--orange); }
.sitefoot address { font-style: normal; font-size: 14.5px; line-height: 1.55; }
.sitefoot__tel { display: inline-block; margin-top: 7px; color: var(--white); font-weight: 700; }
.sitefoot__blurb { font-size: 14.5px; max-width: 40ch; margin: 16px 0 0; }
.sitefoot__legal {
  border-top: 1px solid var(--rule);
  padding-block: 20px 26px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--faint);
}
@media (max-width: 900px) { .sitefoot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sitefoot__grid { grid-template-columns: 1fr; } }

/* ==================================================== dark-band retrofit */
/*
 * Everything below only restates what the older stylesheets expect, inside
 * the black panel. Nothing here changes how the tools behave; it puts back
 * the surface they were designed against after site.css turned the page
 * white.
 */
.band--dark .shell { max-width: var(--wrap-wide); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--ink); }

/* The tool bands carry their own heading treatment from base.css, but the
   eyebrow there is the old accent colour. Orange is the brand now. */
.band--dark .eyebrow { color: var(--orange); }

/* home.css draws the location cards and the work grid on the dark ground,
   which is exactly what .band--dark provides. Nothing to override. */

/* ------------------------------------------------------------ utilities */
.stack > * + * { margin-top: 18px; }
.mt-l { margin-top: clamp(28px, 4vw, 48px); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }