/* ============================================================
   Hightower Ltd
   ------------------------------------------------------------
   One stylesheet for the whole site. Structure is carried by
   hairline rules and surface shifts rather than shadows and
   rounded cards, so the page reads as a document rather than a
   template. Radius never exceeds 2px and nothing is centred.

   The homepage now leads with photographs, in the order a
   photo-first trades site uses: full-bleed hero, numbers, the two trades, a photo reel, the process.
   The rules above still hold inside every one of those blocks.
   ============================================================ */

/* Fonts are self-hosted (Google Fonts files, SIL Open Font License), so the
   page makes no third-party request before it can paint. Latin and
   latin-ext only. */
/* Chivo 400, latin-ext */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/chivo-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chivo 400, latin */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/chivo-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chivo 700, latin-ext */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/chivo-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chivo 700, latin */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/chivo-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chivo 900, latin-ext */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/chivo-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chivo 900, latin */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/chivo-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400, latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500, latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500, latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 400, latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 400, latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 500, latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 500, latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 600, latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 600, latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    /* Ground and surface. The page is white because the logo's wipe fades to
       an OPAQUE white: on any off-white it paints a visible wedge instead of
       fading out. So the cool off-white moves to the panels, which now sit
       raised on the ground rather than being the ground itself. Near-black
       stays as wet roof membrane and steel. */
    --ink: #0D1317;
    --ink-2: #1A242A;
    --paper: #FFFFFF;      /* the page */
    --surface: #F1F4F5;    /* panels and bands raised off it */
    --white: #FFFFFF;      /* reversed-out text on a saturated fill */
    --steel: #55656F;
    --on-ink: #F1F4F5;
    --on-ink-2: #A3B2BA;

    /* Hairlines carry the structure instead of shadows. --rule is
       decorative, --border is functional and clears 3:1. */
    --rule: #D5DDE0;
    --border: #74848D;

    /* The logo red, kept but made precise. Flat, saturated, used as a
       marker rather than a fill. --red-lite is its dark-panel pair. */
    --red: #C8252C;
    --red-lite: #FF6B6B;

    /* Amber is the real colour of working at height: hi-vis, signage,
       the technician's jacket. It carries the compliance line. */
    --amber: #9A5B00;
    --amber-lite: #E8A33D;

    --display: Chivo, "Helvetica Neue", Arial, sans-serif;
    --body: "IBM Plex Sans", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;

    --gutter: clamp(20px, 5vw, 72px);
    --measure: 62ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; accent-color: var(--red); }
/* Selection in the brand red rather than the browser's default blue. */
::selection { background: var(--red); color: var(--white); }

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

h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* A single label style does a lot of work: mono, small, wide tracking.
   It is how an engineering drawing annotates itself. */
.label {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel);
}

/* Keyboard users get past the masthead without tabbing the whole nav.
   Off-screen until focused, then it lands as a normal block. */
.skip {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 8px;
    z-index: 100;
    background: var(--ink);
    color: var(--on-ink);
    font-family: var(--mono);
    font-size: 13px;
    padding: 10px 16px;
    text-decoration: none;
}
.skip:focus { inset-block-start: 8px; }

.shell { max-width: 1560px; margin-inline: auto; }
.pad { padding-inline: var(--gutter); }

/* ---------- nav ---------- */
.nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 44px);
    padding-block: 12px;
    border-bottom: 1px solid var(--rule);
}
/* The masthead carries the same STACKED lockup (#ht-logo) as the footer, as
   the supplied artwork sets it: the wordmark on top and the diamond beneath.
   The wordmark takes only the top fifth of that box, so the lockup is set at
   the footer's size (64px), which keeps the lettering readable. */
.nav__mark { display: block; line-height: 0; }
/* The wordmark inherits `color`, so one definition serves both the paper
   nav and the ink footer. These are the artwork's own two values. */
.nav__mark .logo { display: block; height: clamp(56px, 4.5vw, 64px); width: auto; color: #020202; }
.nav__links { display: flex; flex-wrap: wrap; gap: 6px clamp(14px, 2vw, 26px); margin-inline-start: auto; }
.nav__links a { font-size: 14px; text-decoration: none; color: var(--steel); padding-block: 5px; display: inline-block; min-height: 24px; }
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }

/* The phone is the conversion on a trades site: most buyers ring rather than
   fill in a form. It was set at the same weight as a nav link, so it read as
   the seventh item in the list. Given the diamond's own red and a rule above
   it, it reads as the action it is without becoming another button. */
.nav__tel {
    font-family: var(--mono); font-size: 15px; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 0 7px 18px; margin-inline-start: 4px;
    border-inline-start: 1px solid var(--rule);
}
.nav__tel::before { content: ""; width: 7px; height: 7px; background: var(--red); rotate: 45deg; flex: none; }
.nav__tel:hover { color: var(--red); }

/* ---------- hero: asymmetric, flush left, no centring ---------- */
.hero { display: grid; grid-template-columns: 7fr 5fr; border-bottom: 1px solid var(--rule); }
.hero__text { padding: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 64px) clamp(40px, 6vw, 72px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.hero h1 { font-size: clamp(38px, 5.6vw, 78px); }
.q { color: var(--red); }
.hero__sub { margin-top: 26px; max-width: 46ch; font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); }
/* The sentence that actually says what the two trades are for, lifted out of
   the end of the deck. It was the last line of a six-line grey paragraph,
   which is where a reader has already stopped. One step of weight and colour,
   no second typeface and no rule: it has to read as the deck's conclusion,
   not as a pull quote competing with the headline above it. */
.hero__line { margin-top: 18px; max-width: 42ch; font-size: clamp(16px, 1.5vw, 19px); font-weight: 600; color: var(--ink); }
.hero__since { margin-bottom: 26px; }

.hero__media { position: relative; border-inline-start: 1px solid var(--rule); background: var(--ink); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__cap {
    position: absolute; inset-inline: 0; inset-block-end: 0;
    padding: 14px 20px; background: var(--ink); color: var(--on-ink-2);
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    border-block-start: 1px solid var(--ink-2);
}

/* ---------- the two doors ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); }
.door { padding: clamp(36px, 4.5vw, 68px) clamp(24px, 3vw, 52px); display: flex; flex-direction: column; }
.door--glass { background: var(--surface); border-inline-end: 1px solid var(--rule); }
.door--steel { background: var(--ink); color: var(--on-ink); }
.door--steel .label { color: var(--amber-lite); }
.door--steel .door__body { color: var(--on-ink-2); }
.door h2 { font-size: clamp(26px, 3vw, 40px); margin-block: 16px 14px; }
.door__body { max-width: 42ch; color: var(--ink-2); }
.door__list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 0; }
/* A grid, not a flex row, so the values line up whatever the label says. */
.door__list li { display: grid; grid-template-columns: clamp(98px, 20%, 112px) minmax(0, 1fr); gap: 14px; padding-block: 11px; border-block-start: 1px solid var(--rule); font-size: 15px; }
.door--steel .door__list li { border-block-start-color: var(--ink-2); }
.door__list .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); padding-block-start: 3px; }
.door--steel .door__list .k { color: var(--on-ink-2); }
.door__cta { margin-block-start: 32px; }

/* Buttons are rectangles with weight, not pills with gradients. */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 15px 24px; text-decoration: none; border: 1px solid transparent; border-radius: 2px;
    min-height: 44px;
}
.btn--solid { background: var(--ink); color: var(--on-ink); }
.btn--solid:hover { background: var(--ink-2); }
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: #A81D23; }
.btn--amber { background: var(--amber-lite); color: var(--ink); }
.btn--amber:hover { background: #F2B457; }
.btn--ghost { border-color: var(--border); color: var(--ink); }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.door--steel .btn:focus-visible { outline-color: var(--amber-lite); }

.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- proof band: real numbers, mono, rule-divided ---------- */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); background: var(--surface); }
.proof__cell { padding: clamp(24px, 3vw, 40px) clamp(18px, 2vw, 32px); border-inline-start: 1px solid var(--rule); }
.proof__cell:first-child { border-inline-start: 0; }
.proof__n { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.03em; }
.proof__n small { font-size: 0.44em; letter-spacing: 0; }
.proof__d { margin-top: 10px; font-size: 14px; color: var(--steel); max-width: 24ch; }

/* ---------- section scaffolding ---------- */
.sec { padding-block: clamp(52px, 7vw, 104px); border-bottom: 1px solid var(--rule); }
/* The deck sits on the heading's LAST baseline, not its first. Top-aligned, a
   one-line deck floats in the upper right of a two-line 50px heading with
   nothing under it, which reads as a column that failed to fill rather than as
   a decision. Bottom-aligned it sits down on the rule with the heading and the
   pair reads as one object. */
.sec__head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: clamp(20px, 4vw, 56px); align-items: end; margin-bottom: clamp(30px, 4vw, 54px); }
.sec__head h2 { font-size: clamp(28px, 3.6vw, 50px); }
.sec__head p { color: var(--ink-2); max-width: 52ch; }
@media (max-width: 1000px) { .sec__head { align-items: start; } }

/* ---------- the other services, as a typographic index ---------- */
.index { border-block-start: 1px solid var(--ink); }
.index__row { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.35fr) auto; gap: clamp(14px, 2vw, 32px); align-items: baseline; padding-block: 26px; border-block-end: 1px solid var(--rule); text-decoration: none; }
.index__row:hover { background: var(--surface); }
.index__name { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2vw, 26px); letter-spacing: -0.015em; }
.index__desc { color: var(--steel); font-size: 15px; }
.index__go { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); white-space: nowrap; }

/* ---------- faq ---------- */
/* Capped, because a question is a line of text and its marker belongs next to
   it. Stretched to a 1260px band the +/- ends up marooned half a metre from
   the words it opens, and the closed state reads as a list of rules with
   something adrift at the far edge. */
.faq { border-block-start: 1px solid var(--ink); max-width: 940px; }
.faq details { border-block-end: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding-block: 22px; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.8vw, 21px); display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-weight: 400; color: var(--red); font-size: 20px; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding-block-end: 24px; max-width: var(--measure); color: var(--ink-2); }

/* ---------- closing split by buyer ---------- */
/* Subgrid, so the two halves share rows. One eyebrow is "If you want a building
   cleaned" and the other "If you have a compliance deadline": the second wraps
   to two lines at most desktop widths and used to push its heading ~16px below
   its neighbour, which reads as a mistake rather than as a pair of options. */
.close { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; }
.close__half { padding: clamp(40px, 5vw, 76px) clamp(24px, 3vw, 52px); display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; justify-items: start; }
.close__half:first-child { border-inline-end: 1px solid var(--rule); }
.close__half h3 { font-size: clamp(22px, 2.4vw, 32px); margin-block: 12px; align-self: start; }
.close__half p { color: var(--ink-2); max-width: 38ch; margin-block-end: 26px; }
@supports not (grid-template-rows: subgrid) {
    .close__half { display: block; }
    .close__half .label { display: block; min-block-size: 2.2em; }
}

footer { background: var(--ink); color: var(--on-ink-2); padding-block: clamp(40px, 5vw, 64px); }
.foot__brand { margin-block-end: 40px; }
.foot__brand .logo { display: block; height: 64px; width: auto; color: #FFFFFF; }
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 34px; }
.foot h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink-2); margin: 0 0 14px; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot a {
        color: var(--on-ink); text-decoration: none; font-size: 15px;
        /* WCAG 2.5.8: give every footer link a real 24px target rather
           than leaning on the spacing exception. */
        display: inline-block; padding-block: 4px; min-height: 24px;
    }
.foot a:hover { color: var(--amber-lite); }
.foot__legal { margin-block-start: 40px; padding-block-start: 22px; border-block-start: 1px solid var(--ink-2); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 1180px) {
    /* Below this the links get their own row under a hairline rather than
       disappearing. A six-page site cannot afford a nav that vanishes. The
       logo, phone and quote button need about 1100px on one row with the
       links, so this breaks before the quote button wraps on its own. */
    .nav__links {
        order: 3;
        flex-basis: 100%;
        margin-inline-start: 0;
        padding-block-start: 14px;
        border-block-start: 1px solid var(--rule);
    }
    .nav { gap: 16px; }
    .nav__tel { margin-inline-start: auto; }
}

@media (max-width: 1000px) {
    .hero { grid-template-columns: 1fr; }
    /* A wider band cropped to the foot of the frame. The photograph is stock and
       still needs replacing -- wrong skyline, another company's mark on the
       harness -- but both of those sit in the middle of the frame, and at 16/10
       the phone crop was centring on exactly them. Cropped to the bottom the
       band holds the anchor, the base plate and the hands working on it, which
       is both the subject and what the caption underneath already claims. */
    .hero__media { border-inline-start: 0; border-block-start: 1px solid var(--rule); aspect-ratio: 2 / 1; }
    .hero__media img { object-position: 50% 100%; }
    .hero__text { padding-inline: var(--gutter); }
    .doors, .close { grid-template-columns: 1fr; }
    .door--glass { border-inline-end: 0; border-block-end: 1px solid var(--rule); }
    .close__half:first-child { border-inline-end: 0; border-block-end: 1px solid var(--rule); }
    .proof { grid-template-columns: 1fr 1fr; }
    .proof__cell:nth-child(3) { border-inline-start: 0; }
    .proof__cell:nth-child(n+3) { border-block-start: 1px solid var(--rule); }
    .sec__head { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    /* Explicit placement, so VIEW sits on the service name's line instead of
       being auto-placed onto a fourth row of its own under the description,
       where it reads as an orphan rather than as the row's way out. */
    .index__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
    .index__row .label { grid-column: 1 / -1; grid-row: 1; }
    .index__name { grid-column: 1; grid-row: 2; }
    .index__go { grid-column: 2; grid-row: 2; }
    .index__desc { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 560px) {
    .proof { grid-template-columns: 1fr; }
    .proof__cell { border-inline-start: 0; border-block-start: 1px solid var(--rule); }
    .proof__cell:first-child { border-block-start: 0; }

    /* A six-link nav on a 375px screen reads as two tidy rows of three rather
       than a ragged 3-then-3 wrap that changes shape with every page title. */
    .nav__links { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 20px; }
    .nav__links a { font-size: 13.5px; }
}

@media (max-width: 1180px) {
    /* With the links on their own row the dividing rule has nothing to divide,
       so it reads as a stray tick to the left of the number. The diamond alone
       carries it. */
    .nav__tel { border-inline-start: 0; padding-inline-start: 0; }
}

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

/* ---------- feedback on touch ----------
   State changes were instant, which is right for a hairline, document-style
   site, but nothing answered a press. These are short colour changes and one
   1px press, on controls only. They are not decoration: each says "this took".
   Transform and colour only, 120ms, so they never hold up a second tap, and
   the reduced-motion rule above removes all of it. */
.btn, .motion-toggle, .nav__links a, .nav__tel, .more, .foot a, .index__row, .field input, .field select, .field textarea {
    transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out;
}
.btn:active, .motion-toggle:active { transform: translateY(1px); }
.btn[disabled]:active { transform: none; }
.faq summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

/* ============================================================
   Inner pages
   ============================================================ */

/* ---------- page head: the inner-page counterpart of the hero ----------
   Two columns, bottoms level, the same move the homepage hero and .sec__head
   make. Stacked flush left with both capped at their own measure, the head
   filled a little over half the band and left the rest of it empty -- not as
   negative space, which has to be shaped by something, but as a column that
   was never filled. The hero opposite it is 7fr/5fr, so inner pages now open
   on the same rhythm instead of on a ragged left stack. */
.page-head { padding-block: clamp(38px, 5vw, 76px) clamp(32px, 4vw, 60px); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(28px, 4vw, 72px); align-items: baseline; }
.page-head > .crumb { grid-column: 1 / -1; }
/* First baselines locked together, so the deck starts on the heading's top line
   whatever length either runs to. Bottom-aligning them instead opens a hole
   above a short heading like "What we do" when the deck runs five lines. */
.page-head > h1 { grid-column: 1; grid-row: 2; font-size: clamp(32px, 4.8vw, 64px); max-width: 17ch; }
.page-head__sub { grid-column: 2; grid-row: 2; max-width: 50ch; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); }
.page-head > .mt { grid-column: 2; grid-row: 3; justify-self: start; margin-block-start: 26px; }
@media (max-width: 900px) {
    .page-head { display: block; }
    .page-head > h1 { max-width: 18ch; }
    .page-head__sub { margin-top: 22px; max-width: 56ch; }
}
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 18px; }
/* WCAG 2.5.8 again: breadcrumb links are small type, so they need the padding
   to reach a 24px target rather than relying on the spacing exception. */
.crumb a, .crumb span { display: inline-block; padding-block: 4px; min-height: 24px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb span[aria-current] { color: var(--ink); }

/* ---------- prose ---------- */
.prose { max-width: var(--measure); }
.prose p { margin-block-end: 18px; color: var(--ink-2); }
.prose p:last-child { margin-block-end: 0; }
.prose h3 { font-size: clamp(20px, 2vw, 27px); margin-block: 34px 12px; }
.prose ul { list-style: none; padding: 0; margin: 20px 0 0; }
.prose li { padding-block: 11px; border-block-start: 1px solid var(--rule); display: flex; gap: 13px; font-size: 15px; }
.prose li::before { content: ""; flex: 0 0 8px; height: 8px; margin-top: 8px; background: var(--red); }

/* ---------- split: copy beside a supporting column ---------- */
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }

/* Where the left column carries nothing but the section label, it is a margin
   note on a long run of prose, so it behaves like one: it stays with its text
   instead of scrolling away at the first paragraph and leaving 600px of empty
   rail behind. No animation, no reveal -- it simply stops moving. Scoped by
   :has() to the label-only rail, so the services and contact splits, whose
   first column carries real content, are untouched. */
@supports selector(:has(*)) {
    @media (min-width: 901px) {
        .split > div:first-child:has(> .label:only-child) {
            position: sticky;
            inset-block-start: 28px;
            align-self: start;
        }
    }
}

/* ---------- spec rows: a labelled list that reads like a drawing ----------
   Capped and rebalanced. At full band width the term sat in a 400px column
   holding two words, the definition stopped at 56ch, and every row trailed
   ~250px of nothing to the right of it, so the block's right edge was set by
   where the sentences happened to break rather than by anything drawn. */
.spec { border-block-start: 1px solid var(--ink); max-width: 1040px; }
.spec__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(14px, 3vw, 44px); padding-block: 24px; border-block-end: 1px solid var(--rule); }
.spec__row h3 { font-size: clamp(17px, 1.7vw, 22px); }
.spec__row p { color: var(--ink-2); }

/* ---------- service block ---------- */
.svc { border-block-start: 1px solid var(--ink); padding-block: clamp(34px, 4vw, 62px); }
.svc:first-of-type { border-block-start: 0; }
.svc h2 { font-size: clamp(26px, 3.2vw, 42px); margin-block: 14px 16px; }

/* ---------- panel: a bordered aside on white ---------- */
.panel { background: var(--surface); border: 1px solid var(--rule); padding: clamp(22px, 3vw, 34px); }
.panel--ink { background: var(--ink); color: var(--on-ink-2); border-color: var(--ink-2); }
.panel--ink h3, .panel--ink .proof__n { color: var(--on-ink); }
.panel--ink .label { color: var(--amber-lite); }
.panel h3 { font-size: clamp(18px, 1.8vw, 23px); margin-block: 12px 10px; }
.panel p { color: var(--ink-2); }
.panel--ink p { color: var(--on-ink-2); }
/* A second and third group inside one panel. The practical details were three
   separate boxes, one of which existed to hold a single line about payment;
   the labels already separate them, so the boxes were doing nothing the type
   was not already doing. */
.panel__next { margin-block-start: 26px; }

/* ---------- facts: label and value pairs ---------- */
.facts { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: minmax(88px, 26%) 1fr; gap: 16px; padding-block: 14px; border-block-end: 1px solid var(--rule); font-size: 15px; }
.facts .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); padding-block-start: 3px; }
.facts a { color: var(--red); display: inline-block; padding-block: 3px; min-height: 24px; }

/* ---------- form ---------- */
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 7px; }
.field > label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
    font: inherit;
    font-size: 16px;                       /* 16px stops iOS zooming on focus */
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 12px 14px;
    min-height: 46px;
    width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 40px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--ink); }
.field ::placeholder { color: var(--steel); opacity: 1; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); }
.form__hint { font-size: 13px; color: var(--steel); }
.field__error { font-size: 14px; color: var(--red); }
.form button { font: inherit; cursor: pointer; }
.form button[disabled] { opacity: 0.6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.form-success { display: none; border: 1px solid var(--ink); background: var(--surface); padding: clamp(24px, 3vw, 40px); }
.form-success.show { display: block; }
.form-success h2 { font-size: clamp(24px, 2.6vw, 34px); margin-block-end: 12px; }
.form-success p { color: var(--ink-2); max-width: 46ch; }

/* ---------- note: a stated decision or caveat, not decoration ---------- */
.note { border-inline-start: 3px solid var(--amber); background: var(--surface); padding: 18px 22px; font-size: 15px; color: var(--ink-2); }
.note strong { color: var(--ink); }
noscript .note { margin-block-end: 20px; }

@media (max-width: 820px) {
    .split, .split--even, .spec__row, .form__row { grid-template-columns: 1fr; }
}

/* ---------- a secondary way out of a block, without a second button ---------- */
.more { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); text-decoration: none; display: inline-block; padding-block: 6px; min-height: 24px; }
.more:hover { text-decoration: underline; }
.door--steel .more, .panel--ink .more { color: var(--amber-lite); }
.door__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Narrow screens: the button takes its own row and the secondary ways out share
   the one under it. Left to wrap, the first link sat beside the button and the
   second dropped alone to a third line, which reads as a wrap, not a choice.
   Stated here rather than up in the 560px block because the flex rule above it
   is unqualified and would otherwise win on source order. */
@media (max-width: 560px) {
    .door__cta { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 18px 22px; }
    .door__cta .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- utility ---------- */
.stack > * + * { margin-block-start: clamp(20px, 2.5vw, 34px); }
.mt { margin-block-start: clamp(26px, 3vw, 44px); }

/* The quote form earns the wider column, the practical details the narrower one. */
.split--form { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
@media (max-width: 820px) { .split--form { grid-template-columns: 1fr; } }

/* ============================================================
   Homepage, photo-led
   ============================================================ */

/* ---------- sticky masthead ----------
   The phone and the quote button stay in reach while the page scrolls. Only
   while the nav is one row: once the links wrap, pinning the header would
   take a third of the screen. */
.nav__cta { padding: 11px 18px; min-height: 40px; }
@media (min-width: 1181px) {
    .head--sticky { position: sticky; inset-block-start: 0; z-index: 50; background: var(--paper); }
}
@media (max-width: 560px) { .nav__cta { display: none; } }

/* ---------- full-bleed hero, two photographs side by side ---------- */
.hero--full { position: relative; display: grid; align-items: end; min-height: clamp(520px, 80vh, 760px); background: var(--ink); color: var(--on-ink); overflow: hidden; }
.hero__pair { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.hero__pair img, .hero__pair picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__anchor img { object-position: 70% 50%; }
.hero__crew img { object-position: 50% 45%; }
/* The scrim is what makes the headline legible, so it is measured, not
   decorative: near-opaque behind the copy, opening up toward the anchor. */
.hero__pair::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 19, 23, 0.94) 0%, rgba(13, 19, 23, 0.84) 42%, rgba(13, 19, 23, 0.2) 100%),
        linear-gradient(0deg, rgba(13, 19, 23, 0.7) 0%, rgba(13, 19, 23, 0) 45%);
}
.hero__over { position: relative; padding-block: clamp(64px, 9vw, 120px) clamp(48px, 6vw, 88px); max-width: 920px; }
.hero--full h1 { font-size: clamp(40px, 5vw, 72px); color: var(--white); }
.hero--full .q { color: var(--red-lite); }
.hero--full .hero__since { color: var(--on-ink-2); margin-bottom: 24px; }
.hero--full .hero__line { margin-top: 24px; max-width: 40ch; font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; color: var(--on-ink); }
.hero--full .btn:focus-visible { outline-color: var(--amber-lite); }
@media (max-width: 1100px) {
    /* Below this the headline runs most of the way across both photos, so
       the scrim goes flat and the photos become texture behind it. */
    .hero__pair::after { background: rgba(13, 19, 23, 0.82); }
}

/* Pause and play control for the photo reel. */
.motion-toggle {
    font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--paper); color: var(--ink); border: 1px solid var(--border); border-radius: 2px;
    padding: 8px 12px; min-height: 32px; cursor: pointer;
}
.motion-toggle:hover { border-color: var(--ink); }
.motion-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.is-paused { animation-play-state: paused !important; }

/* ---------- intro with trust chips ---------- */
.intro .sec__head { margin-bottom: clamp(22px, 3vw, 34px); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 12px; border: 1px solid var(--rule); border-radius: 2px; font-size: 14px; color: var(--ink-2); }
.chips li::before { content: ""; width: 7px; height: 7px; background: var(--red); rotate: 45deg; flex: none; }

/* ---------- a photograph on each door ----------
   Bled to the door's edges with the door's own padding, so the photo reads
   as the top of the panel rather than as a card placed inside it. */
.door__photo {
    margin: calc(-1 * clamp(36px, 4.5vw, 68px)) calc(-1 * clamp(24px, 3vw, 52px)) clamp(28px, 3vw, 44px);
    aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink);
}
.door__photo img, .door__photo picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.door__photo--low img { object-position: 50% 85%; }

/* ---------- photo reel ----------
   After the Pinks strip: a seamless CSS loop of squares, the band tilted one
   degree. Corners stay at the house 2px. Two copies of the list, so moving
   the track by half its width lands exactly where it started. */
.reel { padding-block: clamp(48px, 6vw, 88px); background: var(--surface); border-bottom: 1px solid var(--rule); overflow: hidden; }
.reel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: clamp(26px, 3vw, 40px); }
.reel__band { --reel-size: 180px; --reel-gap: 14px; rotate: -1deg; margin-inline: -40px; padding-block: 6px; }
@media (min-width: 992px) { .reel__band { --reel-size: 280px; } }
.reel__track { display: flex; width: max-content; animation: ht-reel 210s linear infinite; }
/* Hover pauses the strip so a photo can be looked at. Not focus-within: the
   Play/Pause button lives in .reel, so clicking Play left focus inside it and
   the strip stayed frozen under a button that said it was running. Gated on a
   real hover device so a tap on a phone does not leave it stuck paused. */
@media (hover: hover) { .reel__band:hover .reel__track { animation-play-state: paused; } }
.reel__list { display: flex; gap: var(--reel-gap); list-style: none; margin: 0; padding: 0 var(--reel-gap) 0 0; }
.reel__list li { flex: none; width: var(--reel-size); height: var(--reel-size); border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; background: var(--paper); }
.reel__list img, .reel__list picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel__ph {
    height: 100%; display: flex; align-items: flex-end; padding: 16px;
    background: repeating-linear-gradient(-45deg, transparent 0 11px, var(--rule) 11px 12px), var(--paper);
}
.reel__ph .label { background: var(--paper); padding: 4px 6px; }
@keyframes ht-reel { to { transform: translateX(-50%); } }

/* ---------- process, one column per trade ---------- */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.steps__col h3 { font-size: clamp(20px, 2vw, 26px); padding-block-end: 14px; border-block-end: 2px solid var(--red); }
.steps__col--amber h3 { border-block-end-color: var(--amber-lite); }
.steps__list { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: step; }
.steps__list li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); row-gap: 4px; padding-block: 18px; border-block-end: 1px solid var(--rule); }
.steps__list li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-family: var(--mono); font-size: 12px; color: var(--red); padding-block-start: 4px; }
.steps__col--amber .steps__list li::before { color: var(--amber); }
.steps__list b { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.steps__list span { color: var(--ink-2); font-size: 15px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* ---------- closing split, reversed out ---------- */
.close--ink { background: var(--ink); color: var(--on-ink); }
.close--ink .label { color: var(--amber-lite); }
.close--ink .close__half:first-child .label { color: var(--red-lite); }
.close--ink .close__half p { color: var(--on-ink-2); }
.close--ink .close__half:first-child { border-color: var(--ink-2); }
.close--ink .btn:focus-visible { outline-color: var(--amber-lite); }

/* Without motion the strips become rows you can scroll yourself, and the
   copies and pause buttons that only exist for the loop go away. */
@media (prefers-reduced-motion: reduce) {
    .reel__band { overflow-x: auto; }
    .reel__band { rotate: 0deg; margin-inline: 0; padding-inline: var(--gutter); scroll-snap-type: x mandatory; }
    .reel__list li { scroll-snap-align: start; }
    .reel__list[aria-hidden="true"], .motion-toggle { display: none; }
}

/* ============================================================
   Inner pages, photo-led
   ============================================================ */

/* ---------- page head over a photograph ----------
   The inner-page counterpart of the full-bleed hero, on the service pages
   that have a photo that fits. Copy runs in both columns, so the scrim is
   near-even across the width rather than opening to one side. */
.page-head--photo { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); border-bottom: 0; padding-block: clamp(56px, 7vw, 112px) clamp(44px, 5vw, 80px); }
.page-head--photo > * { position: relative; }
.page-head--photo > .page-head__bg { position: absolute; inset: 0; }
.page-head__bg img, .page-head__bg picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-head__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 19, 23, 0.9) 0%, rgba(13, 19, 23, 0.82) 60%, rgba(13, 19, 23, 0.7) 100%); }
.page-head--photo h1 { color: var(--white); }
.page-head--photo .page-head__sub { color: var(--on-ink); }
.page-head--photo .page-head__sub a { color: var(--on-ink); }
.page-head--photo .crumb, .page-head--photo .crumb a { color: var(--on-ink-2); }
.page-head--photo .crumb a:hover, .page-head--photo .crumb span[aria-current] { color: var(--on-ink); }
.page-head--photo .btn:focus-visible, .page-head--photo a:focus-visible { outline-color: var(--amber-lite); }
/* From tablet up the copy stacks in the left column on plain ink and the
   photograph takes the right as a panel, faded in from the ink. Under a
   full-width scrim the crews were invisible, and these are real job photos
   worth seeing. Below 901px the full-bleed scrim above still applies. */
@media (min-width: 901px) {
    .page-head--photo { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
    .page-head--photo > .page-head__sub { grid-column: 1; grid-row: 3; margin-top: 24px; max-width: 52ch; }
    .page-head--photo > .mt { grid-column: 1; grid-row: 4; }
    .page-head--photo > .page-head__bg { inset: 0 0 0 52%; }
    .page-head--photo > .page-head__bg::after {
        background: linear-gradient(90deg, var(--ink) 0%, rgba(13, 19, 23, 0.6) 18%, rgba(13, 19, 23, 0.08) 48%, rgba(13, 19, 23, 0.08) 100%);
    }
}

/* Trust chips under a plain page head, across both columns. */
.page-head > .chips { grid-column: 1 / -1; grid-row: 4; margin-block-start: clamp(24px, 3vw, 36px); }

/* The one ghost button that lands on the dark closing band. */
.close--ink .btn--ghost { color: var(--on-ink); border-color: var(--on-ink-2); }
.close--ink .btn--ghost:hover { background: var(--ink-2); border-color: var(--on-ink); }

/* Three-cell proof band, once the ageing count and the engineer cell came out. */
.proof--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) {
    .proof--3 { grid-template-columns: 1fr; }
    .proof--3 .proof__cell { border-inline-start: 0; border-block-start: 1px solid var(--rule); }
    .proof--3 .proof__cell:first-child { border-block-start: 0; }
}

/* ---------- homepage: stacked section heads ----------
   Headline over its paragraph, one column. The side-by-side head reads as two
   messages competing, and on the homepage every section has one job. */
.sec__head--stack { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.sec__head--stack p { max-width: 65ch; }

/* Where we work, as one plain line under the trust chips. */
.towns { margin-block-start: 22px; max-width: 65ch; color: var(--ink-2); }
.towns a { color: var(--red); white-space: nowrap; margin-inline-start: 6px; }

/* The homepage index has no category label column. */
.index--plain .index__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto; }
@media (max-width: 720px) {
    .index--plain .index__row { grid-template-columns: minmax(0, 1fr) auto; }
    .index--plain .index__name { grid-row: 1; }
    .index--plain .index__go { grid-row: 1; }
    .index--plain .index__desc { grid-row: 2; }
}

/* ---------- brand motto and footer hours ---------- */
.foot__motto {
    margin: 16px 0 0; font-family: var(--mono); font-size: 12px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-2);
}
.foot li.foot__hours { color: var(--on-ink-2); font-size: 15px; padding-block: 4px; }

/* ---------- Access | Clean | Inspect ----------
   The tag from Hightower's own 2025 artwork: wide-tracked capitals split by
   short red bars, with a red rule under it in the footer lockup. Left
   aligned like everything else here, so the rule runs the tag's width. */
.tagline {
    display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 6px;
    margin: 0; font-family: var(--body); font-size: 12px; font-weight: 500;
    letter-spacing: 0.34em; text-transform: uppercase; line-height: 1.2;
}
.tagline span + span::before {
    content: ""; display: inline-block; width: 2px; height: 1em;
    margin-inline: 0.75em 1.1em; background: var(--red); vertical-align: -0.12em;
}
.hero--full .hero__tag { display: flex; margin-top: 22px; font-size: 13px; color: var(--on-ink); }
.hero--full .hero__tag span + span::before { background: var(--red-lite); }
.foot__brand .logo { height: 88px; }
.foot__brand .tagline { margin-top: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--red); color: var(--on-ink); }
.foot__brand .tagline span + span::before { background: var(--red-lite); }

/* ---------- two crew photographs side by side ----------
   Real job photos on a page that otherwise has none. Same height, cropped
   to fit, stacked on a phone. */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding-block: 0; }
.photo-pair picture, .photo-pair img { display: block; width: 100%; height: clamp(280px, 34vw, 520px); object-fit: cover; }
.photo-pair img { border-radius: 2px; }
@media (max-width: 640px) { .photo-pair { grid-template-columns: 1fr; } .photo-pair picture, .photo-pair img { height: 300px; } }

/* ============================================================
   Mobile call bar
   ============================================================
   The phone is how most buyers convert, and on a phone the header scrolls
   away and its quote button is hidden. This keeps both in reach. Phones only:
   from 561px the header carries them, and from 1181px it is sticky. Same ink,
   red and mono as the rest of the site, no shadow. The body gets matching
   padding so the bar never covers the last line of the footer. */
.callbar { display: none; }
@media (max-width: 560px) {
    body { padding-block-end: calc(52px + env(safe-area-inset-bottom, 0px)); }
    .callbar {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
        background: var(--ink); border-block-start: 1px solid var(--ink-2);
        padding-block-end: env(safe-area-inset-bottom, 0px);
    }
    .callbar a {
        display: flex; align-items: center; justify-content: center; gap: 9px;
        min-height: 52px; text-decoration: none;
        font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
        transition: background-color 120ms ease-out;
    }
    .callbar a:focus-visible { outline: 2px solid var(--amber-lite); outline-offset: -4px; }
    .callbar__call { color: var(--on-ink); padding-inline: 14px; }
    .callbar__call::before { content: ""; width: 7px; height: 7px; background: var(--red-lite); rotate: 45deg; flex: none; }
    .callbar__call:active { background: var(--ink-2); }
    .callbar__quote { background: var(--red); color: var(--white); padding-inline: 20px; }
    .callbar__quote:active { background: #A81D23; }
}
@media print { .callbar { display: none; } }