/* Ground Force Engineering - site stylesheet.
   The look is the Codex design of September 2026: photo-led, dark green and gold
   on warm neutrals.
   This file replaces codex.css + experience.css (kept in the backup folder),
   merged into one sheet with the audit fixes of 1 October 2026:
   text on photographs always sits on a dark panel, no text under 12px,
   touch targets of 24px or more, the firm's own logo on a white header. */

/* ---------------------------------------------------------------- colour --
   Every colour on the site is named here by the job it does, and nothing
   below this block mentions a colour. A colour scheme is therefore one set of
   values for these names. This block is the owner's palette of 1 October
   2026: dark green #1F4638, charcoal #2B2F2D, warm gray #A7A39A, off-white
   #F4F3EF and black #161817, with the logo's gold as the accent. Earlier
   schemes are kept in palettes.py for comparison. */
:root {
  /* light surfaces */
  --paper: #fff;                 /* header, form fields, drawings */
  --ground: #f4f3ef;             /* off-white: the page */
  --ground-alt: #efeee9;         /* the first band of services */
  --tint: #e6e4dd;               /* shaded sections and the light page headings */
  --soft: #eceae4;               /* notices, the frame around a schematic */
  --thumb: #dcd9d1;              /* a tile with an icon instead of a picture */
  --chip: rgba(255, 255, 255, .93);   /* the label on a picture */
  /* lines on light surfaces */
  --line: #dddad3;
  --rule: #c6c2b9;
  --field-line: #7f7b73;         /* the edge of a form field: warm gray darkened to 3 to 1 or better on every light surface */
  --underline: #a7a39a;          /* warm gray */
  /* text on light surfaces */
  --ink: #2b2f2d;                /* charcoal: all text */
  --muted: #5c5a54;              /* warm gray darkened until it reads: 6 to 1 on off-white (warm gray itself is 2.3 to 1) */
  --label: #1f4638;              /* small capital labels */
  --brand: #1f4638;              /* dark green: the accent, for links in use, rules, numbers */
  /* dark surfaces */
  --hero: #1f4638;               /* dark green: page headers */
  --band: #1f4638;               /* the practice band on Home */
  --panel: #1f4638;              /* the sidebar on service pages */
  --button-dark: #1f4638;
  --button-dark-hover: #2a5a49;
  --dark-alt: #2b2f2d;           /* charcoal: the repair band on Services */
  --dark-alt-thumb: #3d423f;
  --deep: #161817;               /* black: the footer */
  --shade: 23, 54, 43;           /* dark green, a little deeper: the wash that keeps text readable over a photograph (red, green, blue) */
  /* text and lines on dark surfaces */
  --on-dark: #fff;
  --on-dark-soft: #e9e7e1;
  --on-dark-muted: #a7a39a;      /* warm gray on black: 6.9 to 1 */
  --hairline: rgba(255, 255, 255, .22);
  --hairline-strong: rgba(255, 255, 255, .38);
  /* Gold: the logo's own. It is an accent, never a surface. It marks the
     button that asks a visitor to get in touch, the small labels on dark
     bands and a few thin marks. No band, strip or panel is gold, and buttons
     that only lead to another page are dark green. */
  --gold: #dba101;               /* measured from the firm's artwork */
  --gold-hover: #e8b62a;
  --gold-edge: #b98900;
  --gold-text: #f4d06e;          /* gold lettering on a dark surface */
  --on-gold: #161817;            /* text on gold */
  --focus: #1f4638;              /* keyboard focus ring on light surfaces: dark green (gold is under 3 to 1 on the shaded sections); dark surfaces use the gold */
  /* messages */
  --error: #b3261e;
  --error-bg: #fbeceb;

  --body: 'DM Sans', Arial, sans-serif;
  --display: Manrope, Arial, sans-serif;
  color-scheme: light;
}

/* fonts:start  Both faces are served from this site (SIL Open Font License,
   texts beside the files). The preview bundle removes this block and loads
   the same faces from Google instead. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/dm-sans-latin.woff2?v=7c87a648) 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; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/manrope-latin.woff2?v=938c6e80) 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; }
/* fonts:end */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 116px; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.65; }
a { color: inherit; text-underline-offset: 5px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
/* on a dark surface the ring is gold; a picture card's ring sits outside it, on the light page, so it stays dark green */
.masthead a:focus-visible, .site-footer a:focus-visible, .practice-band a:focus-visible, .closing a:focus-visible,
.repair-band a:focus-visible, .project-sidebar a:focus-visible, .project-sidebar summary:focus-visible { outline-color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
/* hidden means hidden, whatever display a component sets for itself */
[hidden] { display: none !important; }
p { margin: 0 0 20px; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.16; margin: 0 0 22px; font-weight: 600; text-wrap: balance; }
h1 { font-size: 62px; } h2 { font-size: 40px; } h3 { font-size: 24px; } h4 { font-size: 19px; }
.wrap { width: min(1280px, calc(100% - 96px)); margin: auto; }
.section { padding: 88px 0; }
.section.muted { background: var(--tint); }
.eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 22px; }
.lede { font-size: 20px; max-width: 720px; color: var(--muted); }
.section-intro { max-width: 700px; color: var(--muted); margin-bottom: 30px; }
.section-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: end; margin-bottom: 45px; }
.section-heading > p { max-width: 580px; color: var(--muted); font-size: 18px; margin-bottom: 0; }
.section-heading h2 { margin-bottom: 0; }
.section-heading .eyebrow { margin-bottom: 14px; }

.button, .btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 52px; padding: 13px 22px;
  background: var(--gold); color: var(--on-gold); font-size: 15px; font-weight: 650; text-decoration: none; border: 1px solid transparent;
  border-radius: 3px; cursor: pointer; transition: background .18s, transform .18s; position: relative; }
.button:hover, .btn:hover { background: var(--gold-hover); transform: translateY(-1px); }
/* A button lifts a pixel under the pointer. This keeps the row it left part of
   the button, so a pointer resting on its bottom edge does not make it flicker. */
.button:hover::after, .btn:hover::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -2px; height: 2px; }
/* Buttons that lead to another page rather than to the contact form: dark
   green on a light surface, outlined on a dark one. */
.button.dark { background: var(--button-dark); color: var(--on-dark); }
.button.dark:hover { background: var(--button-dark-hover); }
.button.ghost { background: transparent; color: var(--on-dark); border-color: var(--hairline-strong); }
.button.ghost:hover { background: var(--hairline); }
.button[disabled] { opacity: .65; cursor: default; transform: none; }
.text-link { display: inline-block; min-height: 44px; font-weight: 600; padding: 9px 0; }
.skip { position: fixed; left: 12px; top: -100px; z-index: 100; background: var(--paper); color: var(--ink); padding: 15px; }
.skip:focus { top: 10px; }

/* ------------------------------------------------------------- header -- */
/* The header is white because the logo is used exactly as the firm supplies
   it, charcoal and gold, and that artwork is drawn for a white ground. */
.site-header { height: 100px; position: sticky; top: 0; background: var(--paper); color: var(--ink); z-index: 20; border-bottom: 1px solid var(--line); }
.header-inner { height: 100%; width: calc(100% - 72px); max-width: 1540px; margin: auto; display: flex; align-items: center; gap: 22px; }
.brand { display: block; flex-shrink: 0; }
.brand img { height: 80px; width: auto; }
.header-inner nav { display: flex; gap: 20px; align-items: center; margin-left: auto; }
.header-inner nav a { font-size: 14px; font-weight: 550; text-decoration: none; padding: 15px 0; white-space: nowrap; }
.header-inner nav a:hover, .header-inner nav a[aria-current] { color: var(--brand); box-shadow: inset 0 -3px var(--brand); }
.phone { background: var(--button-dark); color: var(--on-dark); border-radius: 3px; padding: 12px 16px; text-decoration: none; font-weight: 650; font-size: 14px; white-space: nowrap; }
.phone:hover { background: var(--button-dark-hover); }
.menu { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 11px; }
.menu span { display: block; background: var(--ink); height: 2px; margin: 5px 0; }
/* open: the three bars become a cross */
.menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------- masthead -- */
.masthead { position: relative; isolation: isolate; overflow: hidden; background: var(--hero); color: var(--on-dark); min-height: 310px; display: flex; align-items: flex-end; }
.masthead.with-image { height: 560px; max-height: calc(100svh - 140px); min-height: 430px; }
.masthead-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; z-index: -3; }
/* The text column always sits on this panel, whatever the photograph or the
   window width: it is anchored to the text block, not to the viewport. */
.masthead.with-image .masthead-content::before { content: ''; position: absolute; z-index: -1; top: -1000px; bottom: -1000px; left: -100vw; width: calc(100vw + 800px);
  background: linear-gradient(90deg, rgba(var(--shade), .93) 0, rgba(var(--shade), .88) calc(100vw + 590px), rgba(var(--shade), 0) 100%); }
.masthead.with-image::after { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, rgba(var(--shade), .55) 0%, rgba(var(--shade), 0) 40%); }
.masthead-content { position: relative; padding-top: 32px; padding-bottom: 46px; }
.masthead h1 { font-size: 52px; max-width: 1000px; margin: 0 0 18px; }
.masthead p:not(.eyebrow) { font-size: 19px; line-height: 1.5; max-width: 690px; margin-bottom: 22px; }
.masthead.with-image h1 { max-width: 600px; }
.masthead.with-image p:not(.eyebrow) { max-width: 540px; }
.masthead .eyebrow { color: var(--gold-text); margin-bottom: 15px; }
.masthead .button { min-height: 48px; }
.concept-label { position: absolute; right: 22px; top: 18px; background: var(--chip); color: var(--ink); padding: 6px 12px; font-size: 12px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; margin-bottom: 22px; color: var(--on-dark-soft); }
.breadcrumbs a { display: inline-block; padding: 5px 0; min-height: 24px; }
.type-only .masthead-content { padding-block: 46px; }

/* A second, quieter menu under the page header: white like the site header,
   with the same dark green bar under the page a visitor is on. */
.sector-strip { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.sector-strip .wrap { display: flex; gap: 40px; }
.sector-strip a { display: block; padding: 16px 0; text-decoration: none; font-weight: 600; font-size: 14px; }
.sector-strip a:hover, .sector-strip a[aria-current] { color: var(--brand); box-shadow: inset 0 -3px var(--brand); }

/* --------------------------------------------------------------- home -- */
.sector-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 42px; }
/* The text starts at the same height in every card (--text-top) and the link
   row sits on the bottom edge, so the three cards line up whatever the copy
   length. The dark ramp is tied to the same height, so the text is always on
   the solid part of it. */
.sector-card { --text-top: 225px; position: relative; min-height: 435px; overflow: hidden; color: var(--on-dark); text-decoration: none; background: var(--hero); border-radius: 4px; isolation: isolate; display: flex; }
.sector-card > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; z-index: -2; transition: transform .3s; }
.sector-card::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--shade), 0) calc(var(--text-top) - 150px), rgba(var(--shade), .94) calc(var(--text-top) - 6px), rgba(var(--shade), .98) 100%); }
.sector-card__text { display: flex; flex-direction: column; width: 100%; padding: var(--text-top) 30px 30px; }
.sector-card h2 { font-size: 32px; margin-bottom: 14px; }
.sector-card p { flex: 1; font-size: 15px; line-height: 1.6; color: var(--on-dark-soft); }
.sector-card b { display: block; font-size: 14px; border-top: 1px solid var(--hairline-strong); padding-top: 18px; }
.sector-card:hover > img { transform: scale(1.025); }

.practice-band { background: var(--band); color: var(--on-dark); padding: 64px 0; }
.practice-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 90px; align-items: start; }
.practice-band .eyebrow { grid-column: 1 / -1; color: var(--gold-text); }
.practice-band h2 { font-size: 44px; grid-row: 2 / 4; }
.practice-band p:not(.eyebrow) { font-size: 19px; color: var(--on-dark-soft); }
.practice-band .button { justify-self: start; }
.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--hairline); }
.facts dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-text); margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 16px; color: var(--on-dark-soft); }

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; }
.feature.flip .feature__text { order: 2; }
.feature h2 { font-size: 36px; }
.feature__text > p:not(.eyebrow) { color: var(--muted); font-size: 18px; max-width: 520px; }
.feature .eyebrow { color: var(--label); }
.feature__image { margin: 0; min-width: 0; position: relative; }
.feature__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.feature__image figcaption { position: absolute; right: 12px; top: 12px; background: var(--chip); color: var(--ink); padding: 5px 10px; font-size: 12px; }
.link-list { list-style: none; padding: 0; margin: 26px 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.link-list li { border-top: 1px solid var(--rule); }
/* each row is a link, and the arrow at its end says so before it is touched */
.link-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; font-size: 15px; font-weight: 550; text-decoration: none; }
.link-list a::after { content: '\2197'; color: var(--brand); font-weight: 400; }
.link-list a:hover { text-decoration: underline; }
.concept-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.sector-cards + .concept-note { margin: -28px auto 42px; }
.repair-band .concept-note { color: var(--on-dark-soft); }

.tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px; }
.track__tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--brand); color: var(--on-dark); padding: 5px 10px; border-radius: 2px; margin: 0 0 8px; }
.track__sub { color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.steps { padding: 0; margin: 0; list-style: none; }
.steps li { display: flex; gap: 22px; border-top: 1px solid var(--line); padding: 22px 0 4px; }
.steps li > span { font-size: 13px; font-weight: 650; padding-top: 5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 20px; margin-bottom: 10px; }
.steps p { color: var(--muted); font-size: 15px; }

/* ----------------------------------------------------- service lists -- */
.intro-band { padding: 46px 0 0; background: var(--ground-alt); }
.intro-band .lede { margin: 0; max-width: 820px; }
.service-band { padding: 66px 0; background: var(--ground-alt); }
.band-title { margin-bottom: 34px; }
.band-title .eyebrow { margin-bottom: 12px; color: var(--label); }
.band-title h2 { font-size: 36px; max-width: 740px; margin-bottom: 14px; }
.band-title p:not(.eyebrow) { max-width: 760px; color: var(--muted); margin: 0; }
.visual-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.visual-service { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: start; text-decoration: none; padding: 22px 0; border-top: 1px solid var(--rule); min-width: 0; }
.visual-service > img, .icon-thumb { width: 170px; height: 128px; object-fit: cover; background: var(--thumb); border-radius: 3px; }
.visual-service > img.is-figure { object-fit: cover; background: var(--paper); }
.icon-thumb { display: flex; align-items: center; justify-content: center; color: var(--brand); }
.icon-thumb svg { width: 54px; height: 54px; stroke-width: 1.3; }
.visual-service h3 { font-size: 23px; line-height: 1.2; margin: 6px 0 10px; }
.visual-service .tile-label { display: block; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--label); }
.visual-service .blurb { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; }
.service-open { font-size: 13px; font-weight: 600; }
.visual-service:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.repair-band { background: var(--dark-alt); color: var(--on-dark); }
.repair-band .band-title .eyebrow, .repair-band .visual-service .tile-label { color: var(--on-dark-soft); }
.repair-band .band-title p:not(.eyebrow), .repair-band .visual-service .blurb { color: var(--on-dark-soft); }
.repair-band .visual-service { border-color: var(--hairline); }
.repair-band .service-open { color: var(--on-dark); }
.repair-band .icon-thumb { background: var(--dark-alt-thumb); color: var(--on-dark-soft); }

.service-row { display: grid; grid-template-columns: minmax(210px, .95fr) minmax(270px, 1.4fr) 28px; gap: 26px; align-items: start; padding: 24px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.service-row:last-child { border-bottom: 1px solid var(--rule); }
.service-row h3 { font-size: 22px; margin: 0; }
.service-row p { font-size: 15px; color: var(--muted); margin: 0; }
.service-row .arrow { font-size: 22px; }
.service-row:hover h3 { color: var(--brand); text-decoration: underline; text-underline-offset: 5px; }
.rows-heading { font-size: 29px; margin: 46px 0 22px; }
.rows-heading:first-child, .eyebrow + .rows-heading { margin-top: 0; }

/* ----------------------------------------------------- sector pages -- */
.market { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 70px; padding: 44px 0; border-top: 1px solid var(--rule); }
.market:first-of-type { border-top: 0; padding-top: 0; }
.market h3 { font-size: 29px; margin-bottom: 10px; }
.market h2 { font-size: 36px; margin-bottom: 12px; }
.market__summary { font-weight: 600; color: var(--brand); margin-bottom: 16px; }
.market__text { color: var(--muted); font-size: 17px; margin: 0; }
.work-label, .market .work-label { font-size: 13px; font-family: var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--label); margin: 6px 0 4px; }
.detail-layout .work-label { margin-top: 26px; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { border-top: 1px solid var(--rule); padding: 11px 0; font-size: 15px; }
.checks li:first-child { border-top: 0; }
/* the whole row is the link, so it is easy to tap */
.checks a { display: block; margin: -11px 0; padding: 11px 0; text-decoration: underline; text-decoration-color: var(--underline); }
.checks a:hover { text-decoration-color: currentColor; }
/* two headings in the first row, their lists in the second, so the lists start level */
.sector-services { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); grid-template-rows: auto auto; grid-auto-flow: column; gap: 0 70px; }
.sector-services .rows-heading { margin-top: 0; }
.sector-services .link-list { margin: 0; align-self: start; }
.sector-services > .link-list:first-of-type { grid-template-columns: 1fr; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.conditions { list-style: none; padding: 0; margin: 0 0 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.conditions li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 14px; align-items: baseline; border-top: 1px solid var(--rule); padding: 14px 0; font-size: 16px; }
.conditions li::before { content: ''; width: 10px; height: 10px; background: var(--gold); border: 1px solid var(--gold-edge); }
.deliverables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.deliverables > div { border-top: 3px solid var(--brand); padding-top: 18px; }
.deliverables h3 { font-size: 20px; margin-bottom: 10px; }
.deliverables p { font-size: 15px; color: var(--muted); margin: 0; }
.note-link { margin: 40px 0 0; font-size: 16px; }
.note-link.flush { margin-top: 0; }
.note-link a { font-weight: 600; }

/* ------------------------------------------------------ service page -- */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 65px; }
.detail-layout article { min-width: 0; padding-bottom: 24px; }
.detail-layout h2 { font-size: 29px; margin-top: 38px; }
.detail-layout article > h2:first-child { margin-top: 0; }
/* running text keeps a readable line length, about 80 characters; lists and drawings use the full column */
.detail-layout article > p { max-width: 40em; }
.body-lede { font-size: 18px; color: var(--muted); }
.scope { padding: 0; list-style: none; margin: 22px 0 10px; }
.scope li { border-top: 1px solid var(--rule); padding: 15px 0; }
/* The panel follows the page down. With the list of services open it can be
   taller than the window, so it scrolls inside itself rather than run off the
   bottom. */
.project-sidebar { align-self: start; background: var(--panel); color: var(--on-dark); border-top: 4px solid var(--gold); padding: 26px; position: sticky; top: 128px;
  max-height: calc(100vh - 152px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
.project-sidebar h2 { font-size: 27px; margin-top: 0; }
.project-sidebar p { font-size: 15px; color: var(--on-dark-soft); }
.project-sidebar .eyebrow { font-size: 12px; color: var(--gold-text); margin-bottom: 16px; }
.project-sidebar .button { padding: 12px 15px; font-size: 14px; gap: 12px; width: 100%; }
.sidebar-phone { display: block; text-align: center; padding: 15px 0; font-weight: 650; text-decoration: none; color: var(--on-dark); }
.service-switcher { border-block: 1px solid var(--hairline-strong); margin-top: 12px; }
.service-switcher summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 15px 0; }
.service-switcher nav { display: grid; padding-bottom: 10px; }
.service-switcher a { font-size: 13px; padding: 9px 0; border-top: 1px solid var(--hairline); text-decoration: none; }
.service-switcher a[aria-current] { color: var(--gold-text); }
.sidebar-meta { margin-top: 20px; }
.sidebar-meta strong { font-size: 13px; }
.sidebar-meta ul { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--on-dark-soft); }
.sidebar-meta li { padding: 2px 0; }
.sidebar-facts { list-style: none; padding: 0; margin: 0 0 18px; }
.sidebar-facts li { border-top: 1px solid var(--hairline); padding: 12px 0; font-size: 15px; }
.sidebar-facts span { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-text); margin-bottom: 3px; }
.leader-eyebrow { margin: 44px 0 10px; color: var(--label); }
.detail-layout h2.leader-name { margin: 0 0 6px; }

/* schematic figure with its numbered notes */
.figure-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 34px; align-items: start; margin: 34px 0 40px; padding: 26px; background: var(--soft); border-radius: 4px; }
.figure-block figure { margin: 0; }
.figure-block img { width: 100%; height: auto; background: var(--paper); border: 1px solid var(--rule); }
.figure-block .figure-title { font-size: 22px; margin: 0 0 16px; }
.figure-notes { list-style: none; counter-reset: note; padding: 0; margin: 0; }
.figure-notes li { counter-increment: note; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 0 0 13px; font-size: 15px; line-height: 1.5; }
.figure-notes li::before { content: counter(note); width: 28px; height: 28px; border: 2px solid var(--brand); border-radius: 50%; background: var(--paper); color: var(--brand); font: 700 14px/24px Arial, sans-serif; text-align: center; }
.figure-caption { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* -------------------------------------------- closing band and footer -- */
/* The band that closes most pages: dark green, with the page's one gold button. */
.closing { background: var(--band); color: var(--on-dark); padding: 50px 0; }
.closing-inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.closing h2 { font-size: 32px; margin-bottom: 14px; }
.closing p { margin-bottom: 0; color: var(--on-dark-soft); }
.closing .eyebrow { margin-bottom: 14px; color: var(--gold-text); }
.closing .button { flex-shrink: 0; }
.site-footer { padding: 55px 0 22px; background: var(--deep); color: var(--on-dark); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 45px; }
.footer-grid p { font-size: 14px; color: var(--on-dark-muted); margin: 8px 0; max-width: 430px; }
.footer-grid .footer-motto { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--on-dark); margin: 0 0 10px; }
.footer-grid a { display: block; text-decoration: none; padding: 7px 0; min-height: 38px; font-size: 14px; }
.footer-grid a:hover { text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--hairline); margin-top: 35px; padding-top: 24px; font-size: 12px; color: var(--on-dark-muted); }

/* ------------------------------------- light page heading and forms -- */
.page-heading { background: var(--tint); padding: 64px 0 55px; border-bottom: 1px solid var(--line); }
.page-heading h1 { font-size: 54px; max-width: 920px; }
.page-heading .lede { margin-bottom: 0; }
.contact-layout { display: grid; grid-template-columns: .85fr 1.4fr; gap: 85px; }
.contact-layout aside > p { max-width: 380px; color: var(--muted); }
.contact-phone { font-size: 29px; display: block; font-weight: 650; text-decoration: none; margin-bottom: 8px; }
.email { font-size: 14px; overflow-wrap: anywhere; display: inline-block; padding: 6px 0; margin-bottom: 18px; }
.contact-layout address { font-style: normal; color: var(--muted); margin-bottom: 6px; }
.contact-layout .firm-line { font-size: 14px; }
.contact-layout hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
.contact-layout h2 { font-size: 25px; }
.contact-layout h3 { font-family: var(--body); font-size: 15px; font-weight: 700; margin: 22px 0 6px; }
.contact-layout aside ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 15px; }
.contact-layout aside li { margin-bottom: 6px; }
.form-heading { margin-bottom: 28px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.full { grid-column: 1 / -1; }
/* city, state and ZIP share one line under the street address */
.field-row { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1.6fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.field label { font-size: 14px; font-weight: 550; }
.field input, .field select, .field textarea { border: 1px solid var(--field-line); background: var(--paper); color: var(--ink); width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border-radius: 3px; }
.field textarea { resize: vertical; }
.field small, .field__help { font-size: 13px; color: var(--muted); margin: 0; }
input::file-selector-button { border: 0; padding: 7px 12px; background: var(--soft); color: var(--ink); border-radius: 2px; margin-right: 12px; cursor: pointer; }
.formstatus:empty { display: none; }
.formstatus { padding: 15px; background: var(--soft); border-left: 3px solid var(--brand); margin: 20px 0 0; }
.formstatus--error { background: var(--error-bg); border-left-color: var(--error); }
.formstatus--pending { border-left-color: var(--underline); color: var(--muted); }
/* shown under a failed send: the phone number and email address, as links */
.formfallback { margin: 0; padding: 0 15px 15px; background: var(--error-bg); border-left: 3px solid var(--error); }
.formfallback a { font-weight: 650; }
.form-note { margin: 0 0 18px; padding: 15px; background: var(--soft); border-left: 3px solid var(--brand); }
.turnstile { margin: 6px 0 4px; max-width: 100%; }
.request-form .button { margin-top: 15px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.filelist { font-size: 13px; overflow-wrap: anywhere; margin: 0; color: var(--brand); }
.filelist:empty { display: none; }
.legalnote { font-size: 13px; color: var(--muted); max-width: 740px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ careers -- */
.joblist { display: grid; gap: 10px; }
.job { border-top: 1px solid var(--rule); padding: 34px 0 10px; }
.job:first-child { border-top: 0; padding-top: 0; }
.job h2 { font-size: 30px; margin-bottom: 10px; }
.job__meta { display: flex; flex-wrap: wrap; gap: 8px 12px; list-style: none; padding: 0; margin: 0 0 18px; font-size: 13px; }
.job__meta li { background: var(--tint); padding: 4px 10px; border-radius: 2px; color: var(--label); font-weight: 550; }
.job > p { max-width: 860px; color: var(--muted); font-size: 17px; }
.job > p.job__apply { font-size: 15px; color: var(--ink); }
/* responsibilities on the left; the two shorter lists stacked on the right */
.job__cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px 56px; align-items: start; margin: 28px 0; }
.job__cols > div:first-child:nth-last-child(3) { grid-row: span 2; }
.job__cols h3 { font-size: 18px; margin-bottom: 12px; }
.job__cols ul { padding-left: 18px; margin: 0; font-size: 14.5px; color: var(--muted); }
.job__cols li { margin-bottom: 9px; }
.applyform { max-width: 760px; }
.no-openings { max-width: 720px; font-size: 18px; color: var(--muted); }

/* ------------------------------------------------- picture focal points --
   The point of each picture that stays in view when it is cropped to a wide
   header, a card or a thumbnail. design.py gives every picture the class
   pic-<name> and stops the build if a name has no rule here. */
.pic-hero { object-position: 62% 56%; }
.pic-residential { object-position: 60% 46%; }
.pic-commercial { object-position: 50% 58%; }
.pic-solar { object-position: 50% 55%; }
.pic-framing { object-position: 50% 55%; }
.pic-retaining { object-position: 50% 55%; }
.pic-basement { object-position: 55% 45%; }
.pic-foam { object-position: 50% 50%; }
.pic-chimney { object-position: 50% 38%; }
.pic-lifting { object-position: 50% 62%; }
/* in the wide page header the chimney is cropped from the top, so its cap stays in view */
.masthead-image.pic-chimney { object-position: 50% 0%; }

/* --------------------------------------------------------- responsive -- */
@media (min-width: 1600px) { .masthead.with-image { height: 600px; } }
@media (max-width: 1150px) {
  .header-inner { gap: 14px; width: calc(100% - 40px); }
  .header-inner nav { gap: 13px; }
  .brand img { height: 72px; }
  .header-inner nav a { font-size: 13px; }
  .phone { font-size: 13px; padding: 10px 12px; }
  .detail-layout { gap: 40px; }
  .contact-layout { gap: 40px; }
  .visual-service { grid-template-columns: 135px minmax(0, 1fr); gap: 16px; }
  .visual-service > img, .icon-thumb { width: 135px; height: 115px; }
  .visual-service h3 { font-size: 20px; }
  .sector-card__text { padding: var(--text-top) 24px 24px; }
  .sector-card h2 { font-size: 27px; }
  .feature { gap: 44px; }
  .market { gap: 44px; }
  .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .site-header { height: 88px; }
  .brand img { height: 68px; }
  .header-inner nav { display: none; position: absolute; left: 0; right: 0; top: 88px; background: var(--paper); padding: 10px 24px 16px; border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 20px rgba(0, 0, 0, .19); max-height: calc(100svh - 80px); overflow: auto; }
  .header-inner nav.open { display: grid; }
  .header-inner nav a { font-size: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
  .header-inner nav a:first-child { border-top: 0; }
  .header-inner nav a:hover { box-shadow: none; }
  /* the page a visitor is on carries a bar at its left edge, not colour alone */
  .header-inner nav a[aria-current] { box-shadow: inset 3px 0 var(--brand); padding-left: 14px; }
  /* In the markup the menu button comes before the links it opens, so the
     keyboard reaches them next. On screen it stays at the right-hand end. */
  .phone { margin-left: auto; order: 1; }
  .menu { display: block; order: 2; }
  .wrap { width: calc(100% - 48px); }
  /* below this width the photograph sits above the text instead of behind it */
  .masthead.with-image { display: block; height: auto; max-height: none; min-height: 0; }
  .masthead.with-image .masthead-image { position: static; height: 300px; z-index: 0; }
  .masthead.with-image .masthead-content::before, .masthead.with-image::after { display: none; }
  .masthead.with-image h1, .masthead.with-image p:not(.eyebrow) { max-width: 100%; }
  .masthead h1 { font-size: 44px; }
  .masthead-content { padding-top: 30px; padding-bottom: 36px; }
  .section-heading { gap: 40px; }
  /* the article takes the full width; the panel follows it, laid out in two columns */
  .detail-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .project-sidebar { position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 44px; align-items: start; }
  .sidebar-more > :first-child { margin-top: 0; }
  .feature { align-items: start; }
  .sector-cards { gap: 14px; }
  .sector-card { --text-top: 190px; }
  .sector-card__text { padding: var(--text-top) 18px 18px; }
  .sector-card h2 { font-size: 24px; }
  .sector-card p { font-size: 14px; }
  .practice-band .wrap { gap: 15px 35px; }
  .practice-band h2 { font-size: 36px; }
  .visual-service { grid-template-columns: 110px minmax(0, 1fr); }
  .visual-service > img, .icon-thumb { width: 110px; height: 110px; }
  .visual-services { gap: 0 25px; }
  .service-row { grid-template-columns: 1fr 1.2fr 20px; gap: 15px; }
  .service-row h3 { font-size: 20px; }
  .contact-layout { grid-template-columns: 1fr 1.3fr; }
  /* the form is narrow from here down: the city takes a line, state and ZIP share the next */
  .field-row { grid-template-columns: 1.4fr 1fr; }
  .field-row .field:first-child { grid-column: 1 / -1; }
  .job__cols { gap: 24px 36px; }
  .tracks { gap: 40px; }
  .conditions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 92px; }
  .wrap { width: calc(100% - 40px); }
  .site-header { height: 76px; }
  .header-inner { width: calc(100% - 24px); gap: 8px; }
  .brand img { height: 58px; }
  .phone { font-size: 13px; padding: 12px 9px; }
  .menu { width: 40px; padding: 9px; }
  .header-inner nav { top: 76px; }
  h2 { font-size: 32px; }
  .section { padding: 44px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
  .section-heading > p { font-size: 16px; }
  .masthead.with-image .masthead-image { height: 230px; }
  .masthead h1 { font-size: 34px; line-height: 1.15; }
  .masthead p:not(.eyebrow) { font-size: 16px; max-width: 100%; }
  .masthead .button { font-size: 14px; padding: 11px 16px; }
  .type-only { min-height: 0; }
  .type-only .masthead-content { padding-block: 34px; }
  .concept-label { right: 12px; top: 12px; padding: 5px 9px; }
  .sector-strip .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .sector-strip a { font-size: 13px; padding: 12px 0; justify-self: start; }
  .sector-cards { grid-template-columns: 1fr; padding-block: 24px; gap: 18px; }
  .sector-cards + .concept-note { margin: -12px auto 24px; }
  .sector-card { min-height: 365px; --text-top: 190px; }
  .sector-card__text { padding: var(--text-top) 25px 25px; }
  .sector-card h2 { font-size: 30px; }
  .sector-card p { font-size: 16px; }
  .practice-band { padding: 42px 0; }
  .practice-band .wrap { display: block; }
  .practice-band h2 { font-size: 34px; }
  .practice-band p:not(.eyebrow) { font-size: 17px; }
  .facts { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .feature { grid-template-columns: 1fr; gap: 28px; }
  .feature.flip .feature__text { order: 0; }
  .feature h2 { font-size: 30px; }
  .link-list { grid-template-columns: 1fr; }
  .tracks { grid-template-columns: 1fr; gap: 44px; }
  .intro-band { padding-top: 34px; }
  .intro-band .lede { font-size: 17px; }
  .service-band { padding: 40px 0; }
  .band-title h2 { font-size: 29px; }
  .visual-services { grid-template-columns: 1fr; }
  /* a small thumbnail leaves the description room to read in three or four lines */
  .visual-service { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 19px 0; align-items: start; }
  .visual-service > img, .icon-thumb { width: 80px; height: 80px; }
  .icon-thumb svg { width: 40px; height: 40px; }
  .visual-service h3 { font-size: 20px; }
  .service-row { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 12px; padding: 20px 0; }
  .service-row p { grid-column: 1; grid-row: 2; font-size: 14.5px; }
  .service-row .arrow { grid-column: 2; grid-row: 1; }
  .rows-heading { font-size: 25px; margin-top: 36px; }
  .market { grid-template-columns: 1fr; gap: 22px; padding: 34px 0; }
  .sector-services { display: block; }
  .sector-services .link-list { grid-template-columns: 1fr; margin-bottom: 36px; }
  .market h2 { font-size: 30px; }
  .conditions { grid-template-columns: 1fr; }
  .deliverables { grid-template-columns: 1fr; gap: 26px; }
  .detail-layout { gap: 32px; }
  .detail-layout h2 { font-size: 26px; }
  .body-lede { font-size: 17px; }
  .project-sidebar { display: block; padding: 25px; }
  .sidebar-more > :first-child { margin-top: 12px; }
  .figure-block { grid-template-columns: 1fr; padding: 14px; gap: 22px; }
  .closing-inner { display: block; }
  .closing h2 { font-size: 29px; }
  .closing .button { margin-top: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-top: 8px; }
  .page-heading { padding: 40px 0; }
  .page-heading h1 { font-size: 38px; }
  .page-heading .lede { font-size: 17px; }
  .contact-layout { grid-template-columns: 1fr; gap: 35px; }
  .contact-phone { font-size: 28px; }
  .fields { grid-template-columns: 1fr; gap: 4px; }
  .field-row { gap: 4px 12px; }
  .request-form .button, .applyform .button { width: 100%; }
  .job__cols { grid-template-columns: 1fr; gap: 18px; }
  .job__cols > div:first-child:nth-last-child(3) { grid-row: auto; }
  .job h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}