/* Breeze Heating & Cooling — built in the motion-kit Girder pack (industrial heritage: builders, trades, AEC).
   A white page with one crimson doing all the brand work, slate headings, the 1:8 pitched plate (logo badge, image
   masks, the hero's V-notch, the nav curtain), condensed signage caps over wide technical caps, stats struck like a
   press, a hot-metal pager glow, and a skyline that assembles into the crimson footer. Below: self-hosted fonts,
   girder.css verbatim (minus the Google Fonts import), the pack's landing layout, then this page's layer. */
@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;src:url("../../fonts/examples/oswald-variable.woff2") format("woff2")}
@font-face{font-family:"Saira";font-style:normal;font-weight:100 900;font-stretch:50% 125%;font-display:swap;src:url("../../fonts/examples/saira-variable-wdth.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("../../fonts/examples/open-sans-variable.woff2") format("woff2")}

/* Girder style pack — tokens, type, the pitched plate, chrome and components.
   Design category: industrial heritage — builders & AEC (general contractors, engineering, infrastructure, manufacturing, trades).
   Reconstructed design language (regional general contractor, studied October 2026). Original code; no assets from the source site.
   Concept in one line: one crimson, a steel-plate badge pitched at 1:8 cut into everything, condensed signage caps over a wide
   technical face — and motion that behaves like machinery: short, mechanical, never springy, with one hot-metal glow. */


/* Registered so the plate's pitch can animate (plate press). */
@property --rise { syntax: "<percentage>"; inherits: true; initial-value: 12%; }

:root {
  /* Palette. Crimson is the only hue in the chrome; everything else is steel greys. */
  --red: #a41d39;          /* brand crimson: buttons, stats, links, banner, footer, the logo plate */
  --red-deep: #900324;     /* pressed / focus ring */
  --red-2: #9b0d28;        /* offset crimson for layered panels */
  --red-hot: #c42032;      /* brightest crimson, glows only */
  --red-panel: #af2345;    /* raised panel on crimson (footer offices, curtain rows) */
  --spark: rgba(255, 255, 164, .6);   /* hot-metal yellow: lives only inside the pager glow */
  --white: #fff;
  --offwhite: #f4f4f4;     /* fades and light section backs */
  --gray-50: #f9f9f9;
  --gray-100: #f3f3f3;
  --gray-300: #bcbcbc;     /* disabled, hairlines on light */
  --slate: #545860;        /* display headings on light: never black */
  --ink: #141516;          /* body text, dark sections */
  --ink-2: #262a2b;
  --ok: #2db292; --warn: #dc4b4b;
  --line: #a41d39;                    /* section rules are crimson, 2px */
  --hair: rgba(20, 21, 22, .12);

  /* Fonts. Licensed originals: Trump Soft Pro (condensed gothic), Durno (wide technical sans), Open Sans (body). */
  --f-sign: "Oswald", "Trump Soft Pro", "Trump Gothic", system-ui, Impact, sans-serif;   /* signage caps: hero, section titles, nav */
  --f-wide: "Saira", "Durno", "Eurostile Extended", system-ui, sans-serif;                 /* technical caps: subheads, stats, card titles */
  --f-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Signage tracking: a px floor plus an em part, so small caps stay legible and big caps settle at 3%. */
  --track: calc(.9px + .03em);

  /* The pitch. Every plate edge rises 1:8 (≈7°) to a centre point: logo badge, image masks, the nav curtain, the hero notch. */
  --rise: 12%;             /* plate shoulder as % of the plate's height (matches the source's fixed-aspect masks) */
  --notch: clamp(28px, 5vw, 80px);   /* depth of a section's V-notch edge */

  /* Layout (px, desktop-first, breakpoints 768 / 1024 like the source). */
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --banner-h: 28px;
  --nav-h: 76px;
  --section: clamp(56px, 8vw, 110px);

  /* Motion: mechanical. Chrome reacts in 100ms, overlays in 200–300ms, one hydraulic curve for the big curtain. */
  --e: ease;
  --e-out: ease-out;
  --e-drop: cubic-bezier(.77, 0, .18, 1);   /* hydraulic: the nav curtain drops on this */
  --d-tick: .1s;            /* hover colour, underline, header swap */
  --d-s: .2s;               /* submenu slide, image zoom */
  --d-m: .3s;               /* overlays, diagonal shade */
  --d-glow: .35s;           /* pager glow travelling */
  --d-fade: .5s;            /* hero slide cross-fade */
  --d-drop: .55s;           /* nav curtain */
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 400 15px/2 var(--f-body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--red-deep); outline-offset: 3px; }
::selection { background: var(--red); color: var(--white); }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Type. Two cap voices (condensed sign + wide technical) over a calm, airy body. ---------- */
.t-d1, .t-d2, .t-lbl { font-family: var(--f-sign); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track); }
.t-w1, .t-w2, .t-w3, .t-num { font-family: var(--f-wide); font-stretch: 125%; text-transform: uppercase; }
.t-d1 { font-size: clamp(38px, 4.17vw, 60px); line-height: 1.1; }                                   /* hero: 60/66 */
.t-d2 { font-size: clamp(30px, 3.47vw, 50px); line-height: 1.5; color: var(--slate); }             /* section title: 50/75, slate */
.t-w1 { font-size: clamp(22px, 2.08vw, 30px); line-height: 1.5; font-weight: 800; letter-spacing: .06em; color: var(--slate); }   /* statement: 30/45 */
.t-w2 { font-size: 20px; line-height: 1.15; font-weight: 800; letter-spacing: .075em; }             /* card / project titles */
.t-w3 { font-size: 15px; line-height: 1.35; font-weight: 700; letter-spacing: .09em; color: var(--red); }   /* eyebrow, value titles */
.t-num { font-size: clamp(36px, 3.47vw, 50px); line-height: 1; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; text-transform: none; }
.t-lbl { font-size: 15px; line-height: 1; }                                                          /* nav, banner, pager, buttons */
.t-lead { font-size: clamp(17px, 1.39vw, 20px); line-height: 1.5; }
.t-lead strong, .t-body strong { font-weight: 700; }
.t-body { font-size: 15px; line-height: 2; }                                                         /* 15/30: the airy body is part of the look */
.t-meta { font-size: 15px; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase; }     /* project location */
.t-date { font-size: 12px; font-weight: 700; color: var(--slate); }
.t-red { color: var(--red); } .t-slate { color: var(--slate); } .t-white { color: var(--white); }
@media (max-width: 767px) { .t-body { line-height: 1.8; } }

/* ---------- The pitched plate ---------- */
/* Rectangle whose top and bottom edges rise to a centre point. Logo badge, image masks, hero cards. */
.plate { clip-path: polygon(0 var(--rise), 50% 0, 100% var(--rise), 100% calc(100% - var(--rise)), 50% 100%, 0 calc(100% - var(--rise))); }
.plate--top { clip-path: polygon(0 var(--rise), 50% 0, 100% var(--rise), 100% 100%, 0 100%); }
.plate--pennant { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rise)), 50% 100%, 0 calc(100% - var(--rise))); }
/* Section edge: the next section bites a shallow V out of this one's bottom. Set --notch-c to the next section's colour. */
.notch { position: relative; }
.notch::after { content: ""; position: absolute; inset: auto 0 -1px; height: var(--notch); z-index: 3; background: var(--notch-c, var(--white)); clip-path: polygon(0 0, 50% 79%, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
/* Image frame cut as a plate. Bleeds off the page edge in split sections (see .split). */
.plate-media { position: relative; overflow: hidden; aspect-ratio: 1074 / 617; }
.plate-media > svg, .plate-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Buttons ---------- */
/* Tape: signage caps over a 2px rule. On hover the rule is re-measured from 0 → full, looping like a tape pulled out. */
.btn-tape { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 0 10px; font: 700 20px/2 var(--f-sign); letter-spacing: var(--track); text-transform: uppercase; color: var(--red); }
.btn-tape::after { content: ""; position: absolute; left: 10px; bottom: 0; height: 2px; width: calc(100% - 20px); background: currentColor; transition: width var(--d-tick) var(--e-out); }
.btn-tape:hover::after, .btn-tape:focus-visible::after { animation: gd-tape 1s var(--e) infinite; }
@keyframes gd-tape { from { width: 0; } to { width: calc(100% - 20px); } }

/* Filled pill: crimson, a crimson skin slides off to the right on hover in one tick, exposing slate. */
.btn-fill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 6px 28px 4px; border-radius: 100px; background: var(--red); color: var(--white); font: 700 18px/1 var(--f-sign); letter-spacing: var(--track); text-transform: uppercase; transition: background var(--d-tick) var(--e-out); }
.btn-fill::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--red); transition: left var(--d-tick) var(--e-out); }
.btn-fill:hover { background: var(--slate); }
.btn-fill:hover::after { left: 100%; }
.btn-fill--light { background: var(--white); color: var(--red); }
.btn-fill--light::after { background: var(--white); }
.btn-fill--light:hover { background: var(--ink); color: var(--white); }

/* Badge button: white chip, crimson wide label, drawn arrow. Hero CTA, footer contact. */
.btn-badge { display: inline-flex; align-items: center; gap: 14px; padding: 10px 16px 9px; border-radius: 3px; background: var(--white); color: var(--red); font: 700 12px/1 var(--f-wide); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transition: background var(--d-tick) var(--e-out), color var(--d-tick) var(--e-out); }
.btn-badge:hover { background: var(--red); color: var(--white); }
.btn-badge .arr { width: 16px; }

/* Read more: bold body face, crimson, arrow nudges right. */
.link-more { display: inline-flex; align-items: center; gap: 12px; color: var(--red); font-weight: 800; font-size: 15px; line-height: 2.5; }
.link-more .arr { width: 14px; transition: transform var(--d-s) var(--e); }
.link-more:hover .arr { transform: translateX(4px); }

/* Drawn arrow (shaft + chevron), used everywhere instead of an icon font. */
.arr { display: inline-block; height: 10px; flex: none; position: relative; }
.arr::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 2px; translate: 0 -50%; background: currentColor; }
.arr::after { content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(-45deg); }

/* Round arrows for galleries: 40px crimson discs, 40% opacity when the end is reached. */
.btn-round { width: 40px; height: 40px; border-radius: 70px; display: inline-grid; place-items: center; background: var(--red); border: 1px solid var(--red); color: var(--white); transition: background var(--d-s) var(--e), border-color var(--d-s) var(--e), transform .15s var(--e); }
.btn-round .arr { width: 14px; }
.btn-round--prev .arr { transform: scaleX(-1); }
.btn-round:hover:not([disabled]) { background: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.btn-round[disabled] { opacity: .4; cursor: default; }

/* Glass selector card: frosted card with a hairline gradient border and a radio dot. Filters, plan pickers.
   Meant to sit on a photo or a dark/crimson field. */
.btn-glass { position: relative; display: flex; border-radius: 1rem; text-align: left; color: var(--ink); transition: all var(--d-m) var(--e); }
.btn-glass::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.btn-glass__in { display: flex; align-items: center; gap: 12px; width: 100%; margin: .25rem; padding: 12px 16px; border-radius: .8rem; background: rgba(255, 255, 255, .9); transition: background var(--d-s) var(--e), color var(--d-s) var(--e); }
.btn-glass__dot { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--red); display: grid; place-items: center; }
.btn-glass__dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--white); transition: background var(--d-s) var(--e); }
.btn-glass small { display: block; font-size: 12px; line-height: 1.3; color: var(--slate); }
.btn-glass:not([aria-pressed="true"]):hover::before { display: none; }
.btn-glass:not([aria-pressed="true"]):hover .btn-glass__in { background: rgba(255, 255, 255, .5); }
.btn-glass:hover .btn-glass__dot::after, .btn-glass[aria-pressed="true"] .btn-glass__dot::after { background: var(--red); }
.btn-glass[aria-pressed="true"]::before { display: none; }
.btn-glass[aria-pressed="true"] .btn-glass__in { background: var(--ink); color: var(--white); }
.btn-glass[aria-pressed="true"] small { color: rgba(255, 255, 255, .8); }

/* ---------- Chrome ---------- */
/* Hiring banner: full-width crimson strip, signage caps, arrow. Scrolls away with the page. */
.banner { position: relative; z-index: 31; height: var(--banner-h); display: grid; place-items: center; background: var(--red); color: var(--white); }
.banner a { display: inline-flex; align-items: center; gap: 8px; }
.banner .arr { width: 12px; }

/* Header: fixed, a 3px crimson rule on top. Clear (white ink) while it sits over the top 30% of a .min-header,
   white (crimson logo, ink nav) everywhere else. The swap is one 100ms tick. State classes set by Girder.header(). */
.hdr { position: fixed; inset: var(--hdr-top, var(--banner-h)) 0 auto; z-index: 30; border-top: 3px solid var(--red); background: var(--white); color: var(--ink); transition: background var(--d-tick) var(--e-out), color var(--d-tick) var(--e-out); }
.hdr__row { height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 var(--gutter); }
.hdr__nav { display: flex; gap: clamp(8px, 1.6vw, 28px); }
.hdr__nav--r { justify-content: flex-end; align-items: center; }
.hdr__nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px 6px 0 0; font: 800 12px/1 var(--f-wide); font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; transition: background var(--d-tick) var(--e-out), color var(--d-tick) var(--e-out); }
.hdr__nav a:hover { background: var(--white); color: var(--red); }
.chev { width: 6px; height: 6px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: translateY(-2px) rotate(45deg); transition: border-color var(--d-tick); }
/* Logo plate: an SVG <use> of a plate symbol whose fills read --logo-plate / --logo-ink (inherited into the shadow tree). */
.hdr__logo { width: clamp(96px, 8.4vw, 120px); --logo-plate: var(--red); --logo-ink: var(--white); }
.hdr__icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--red); transition: color var(--d-tick); }
.hdr__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.hdr__burger { display: none; }
.is-clear .hdr { background: transparent; color: var(--white); }
.is-clear .hdr .chev { border-color: var(--white); }
.is-clear .hdr .hdr__nav a:hover .chev { border-color: var(--red); }
.is-clear .hdr .hdr__icon { color: var(--white); }
.is-clear[data-logo="white"] .hdr__logo { --logo-plate: var(--white); --logo-ink: var(--red); }
@media (max-width: 1023px) {
  .hdr__nav { display: none; }
  .hdr__row { grid-template-columns: 40px 1fr 40px; }
  .hdr__logo { justify-self: center; }
  .hdr__burger { display: grid; }
}

/* Nav curtain: a crimson pennant (flat top, pitched point at the bottom) drops from above on the hydraulic curve. */
.curtain { position: fixed; inset: 0; z-index: 50; opacity: 0; pointer-events: none; transition: opacity var(--d-s) var(--e); }
.curtain::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(100% + var(--notch)); background: linear-gradient(0deg, rgba(164, 29, 57, .87) 22%, var(--red) 86%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch))); transform: translateY(calc(-100% - 40px)); transition: transform var(--d-drop) var(--e-drop); }
.curtain__body { position: relative; height: 100%; overflow: auto; padding: calc(var(--nav-h) + 40px) var(--gutter) 80px; display: grid; align-content: start; justify-items: center; gap: 10px; color: var(--white); opacity: 0; transition: opacity .2s var(--e) 0s; }
.curtain__body a.row { width: min(100%, 420px); display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 12px; border-radius: 6px; background: var(--red-panel); font: 700 18px/1 var(--f-sign); letter-spacing: .3em; text-transform: uppercase; }
.curtain__body .chev { border-color: var(--white); transform: rotate(-45deg); }
.curtain__close { position: absolute; right: var(--gutter); top: 18px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--white); z-index: 1; }
.curtain__close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; }
.is-nav-open { overflow: hidden; }
.is-nav-open .curtain { opacity: 1; pointer-events: auto; }
.is-nav-open .curtain::before { transform: none; }
.is-nav-open .curtain__body { opacity: 1; transition: opacity .25s var(--e) .45s; }   /* rows wait until the curtain has landed */

/* ---------- Hero ---------- */
/* Full-height slideshow under the clear header. Slides cross-fade; a glass pager track carries a hot-metal glow. */
.hero { position: relative; min-height: max(640px, 100svh); display: grid; align-items: center; overflow: hidden; color: var(--white); --notch-c: var(--white); }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-fade) var(--e); }
.hero__slide.is-on { opacity: 1; }
.hero__slide > svg, .hero__slide > img, .hero__slide > video { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 21, 22, .55), rgba(20, 21, 22, .15) 45%, rgba(20, 21, 22, .35)); pointer-events: none; }
.hero__copy { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 860px); margin: calc(var(--nav-h) + var(--banner-h)) auto 0; display: grid; gap: 34px; text-align: center; }
.hero__row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; text-align: left; }
.hero__row p { max-width: 430px; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; }
@media (max-width: 767px) { .hero__row { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* Pager: 20px glass pill with a white hairline; dots sit on it, labels hang below; the glow slides under the active dot. */
.pager { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--notch) + 56px); translate: -50% 0; width: min(100% - 4 * var(--gutter), 600px); }
.pager__bar { position: relative; height: 20px; border: 1px solid var(--white); border-radius: 30px; overflow: hidden; background: linear-gradient(0deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4)); }
.pager__glow { position: absolute; left: 0; top: 0; width: 180px; height: 100%; pointer-events: none; will-change: transform; transition: transform var(--d-glow) var(--e); background: linear-gradient(90deg, rgba(164, 29, 57, 0) 5%, var(--red) 30%, var(--spark) 50%, rgba(164, 29, 57, .84) 70%, rgba(164, 29, 57, 0) 95%); }
.pager__items { position: absolute; inset: -7px -4% auto; display: flex; justify-content: space-between; }
.pager__item { display: grid; justify-items: center; gap: 6px; padding: 10px 20px; color: var(--white); }
.pager__item::before { content: ""; width: 14px; height: 14px; border-radius: 10px; background: var(--white); }
.pager__item span { font: 700 13px/1 var(--f-sign); letter-spacing: var(--track); text-transform: uppercase; opacity: .75; transition: opacity var(--d-tick); }
.pager__item[aria-current="true"] span, .pager__item:hover span { opacity: 1; }

/* ---------- Stats strip ---------- */
/* Number in the wide face, crimson; suffix and label stacked beside it. Counted by Girder.stats(). */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 26px 0 30px; border-bottom: 1px solid var(--gray-300); }
.stat { display: flex; gap: 10px; align-items: center; padding: 8px 20px; }
.stat__side { display: grid; gap: 4px; line-height: 1; }
.stat__suf { color: var(--red); font: 800 18px/1 var(--f-wide); font-stretch: 125%; }
.stat__lbl { color: var(--slate); font-weight: 600; font-size: 15px; line-height: 1.15; }
.stat__num { display: inline-block; transform-origin: center; transition: transform .12s linear, text-shadow .12s linear, opacity .12s linear; }
/* While counting, the figure is struck like a press: stretched, sheared, with crimson ghost lines above and below. */
.stat__num.is-counting { transform: scaleY(1.08) skewY(-1.5deg); text-shadow: 0 -1px 0 rgba(164, 29, 57, .1), 0 1px 0 rgba(164, 29, 57, .1), 0 -2px 0 rgba(164, 29, 57, .1), 0 2px 0 rgba(164, 29, 57, .1); }
@media (max-width: 1023px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }   /* two stats side by side need ~430px; stacked on phones */

/* ---------- Section head: signage title riding a long crimson rule ---------- */
.rule-head { display: flex; align-items: center; }
.rule-head::after { content: ""; order: 1; flex: 1; height: 2px; margin-left: 16px; background: var(--line); }
.rule-head .tools { order: 2; display: flex; gap: 10px; margin-left: 20px; }

/* ---------- Split: plate image bleeding off the page edge + statement column ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split > .plate-media { margin-left: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2) - 3vw); }
.split__copy { display: grid; gap: 22px; justify-items: start; max-width: 520px; }
@media (max-width: 767px) { .split { grid-template-columns: 1fr; } .split > .plate-media { margin-inline: calc(-1 * var(--gutter)); } }

/* ---------- Values: round crimson icon, wide title, body that opens with a bold sentence ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.value { display: grid; gap: 12px; align-content: start; }
.value__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--red); display: grid; place-items: center; color: var(--white); }
.value__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.value p { font-size: clamp(16px, 1.3vw, 18.75px); line-height: 1.5; }
@media (max-width: 1023px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }

/* ---------- Project rail: native scroll-snap track, one project per view, round arrows ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.project { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.project__media { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.project__media > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.project__body { display: grid; gap: 10px; align-content: start; justify-items: start; }
@media (max-width: 767px) { .project { grid-template-columns: 1fr; } }

/* ---------- Sector tiles: photo with a top-down shade, white wide title + list; hover zooms and lifts a crimson diagonal ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tile { position: relative; aspect-ratio: 1 / 1.2; overflow: hidden; isolation: isolate; color: var(--white); }
.tile > svg, .tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1; transition: scale var(--d-s) var(--e); z-index: -2; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(176deg, rgba(32, 34, 38, .55) 8%, rgba(32, 34, 38, .29) 34%, rgba(32, 34, 38, .14) 68%, rgba(32, 34, 38, 0) 94%); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; transition: opacity var(--d-m) var(--e); background: linear-gradient(24deg, var(--red) 18%, rgba(164, 29, 57, 0) 40%, rgba(164, 29, 57, 0) 67%, var(--red) 100%); }
.tile__body { padding: 18px 20px; display: grid; gap: 8px; }
.tile__body li { font-size: 14px; line-height: 1.45; }
.tile:hover > svg, .tile:hover > img { scale: 1.05; }
.tile:hover::after { opacity: 0; }
@media (max-width: 767px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } .tile { aspect-ratio: 4 / 3; } }

/* ---------- News cards ---------- */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.post { display: grid; gap: 6px; align-content: start; justify-items: start; }
.post__title { color: var(--red); font: 800 15px/1.3 var(--f-body); letter-spacing: .09em; text-transform: uppercase; }
.post p { font-size: 14px; line-height: 1.7; }
@media (max-width: 767px) { .news { grid-template-columns: 1fr; } }

/* ---------- Crane scene: layered silhouettes that converge as you scroll; the crane sways (Girder.crane) ---------- */
/* The footer slides up over the bottom of the scene (negative margin), so keep near layers above that overlap. */
.crane { position: relative; height: 56.25vw; overflow: hidden; margin-bottom: -6vw; }
.crane__fade { position: absolute; inset: 0 0 auto; height: 12vw; z-index: 20; pointer-events: none; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 22%, var(--white) 86%); }
.crane__layer { position: absolute; inset: 0; will-change: transform; }
.crane__layer > svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.crane__sway { transform-origin: 50% 100%; will-change: transform; }

/* ---------- Footer: crimson field, plate mark, signage slogan, wide column heads, offices on a raised panel ---------- */
.foot { position: relative; z-index: 10; background: var(--red); color: var(--white); padding: clamp(48px, 6vw, 80px) 0 28px; }
.foot__top { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.foot__top .t-d2 { color: var(--white); font-size: clamp(20px, 2vw, 28px); text-align: center; line-height: 1.2; }
.foot__mark { width: 110px; --logo-plate: var(--white); --logo-ink: var(--red); }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 36px 0; }
.foot__cols h4 { font: 800 14px/1.2 var(--f-wide); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.foot__cols a { display: block; font-size: 14px; line-height: 1.8; transition: color var(--d-tick) var(--e-out); }
.foot__cols a:hover { color: rgb(255, 215, 220); }
.offices { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 8px; padding: 26px 12px; border-radius: 8px; background: var(--red-panel); text-align: center; }
.offices a { display: grid; justify-items: center; gap: 12px; font: 800 12px/1 var(--f-wide); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; }
.offices svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: transform var(--d-s) ease-in; }
.offices a:hover svg { transform: scale(1.1); }
.foot__legal { margin-top: 28px; text-align: center; font-size: 11px; opacity: .85; }
@media (max-width: 767px) { .foot__top { grid-template-columns: 1fr; justify-items: center; } .foot__cols { grid-template-columns: 1fr 1fr; } .offices { --n: 3; row-gap: 22px; } }

/* ---------- Page corners (optional chrome): crimson wedges in the top corners, 40vw at rest, closing to 0 as you scroll ---------- */
.corners { position: fixed; inset: 0 0 auto; height: 0; z-index: 25; pointer-events: none; }
.corners::before, .corners::after { content: ""; position: absolute; top: 0; width: var(--corner-size, 0px); height: calc(var(--corner-size, 0px) * .25); background: var(--red); }
.corners::before { left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.corners::after { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* ---------- Plate press (kit addition, not in the source): a plate lands flat, then its edges pitch into shape ---------- */
.press { --rise: 0%; transition: --rise .7s var(--e-drop); }
.press.is-in { --rise: 12%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .press { --rise: 12%; }
}

/* ───────────── Girder landing layout (from styles/girder/landing.html) ───────────── */
/* Layout for this template. Tokens, type, chrome and components live in girder.css. */
.sec { padding-block: var(--section); }
.intro { display: grid; gap: 22px; max-width: 1080px; }
.cols-head { display: grid; grid-template-columns: auto 1fr; gap: 8px 48px; align-items: baseline; margin-bottom: 28px; }
.cols-head p { font-size: 20px; line-height: 1.4; }
@media (max-width: 767px) { .cols-head { grid-template-columns: 1fr; } }
.rail-wrap .rule-head { margin-bottom: 36px; }
.foot__top .btn-badge { justify-self: end; }
@media (max-width: 767px) { .foot__top .btn-badge { justify-self: center; } }
.crane { background: linear-gradient(180deg, #fff 0%, #eef0f2 32%, #e3dcd6 70%, #d9c9c0 100%); }

/* ───────────── Breeze page layer ───────────── */
:root{--rib:32px}
html.shot{--rib:0px}
html{scroll-padding-top:calc(var(--rib) + 110px)}
body{padding-top:var(--rib)}
.hdr{inset:calc(var(--rib) + var(--hdr-top, var(--banner-h))) 0 auto}

/* prices: heating / cooling switch over hairline rows */
.switch{display:inline-flex;gap:4px;padding:4px;border-radius:100px;background:var(--gray-100,#f3f3f3)}
.switch button{min-height:40px;padding:6px 22px 4px;border:0;border-radius:100px;background:transparent;color:var(--slate);font:700 16px/1 var(--f-sign);letter-spacing:var(--track);text-transform:uppercase;cursor:pointer;transition:background var(--d-tick) var(--e-out),color var(--d-tick) var(--e-out)}
.switch button[aria-pressed="true"]{background:var(--red);color:var(--white)}
.prices{margin-top:28px;border-top:2px solid var(--red)}
.prices[hidden]{display:none}
.price{display:grid;grid-template-columns:minmax(0,1fr) 140px 150px;gap:8px 32px;align-items:baseline;padding:22px 0 20px;border-bottom:1px solid var(--gray-300,#bcbcbc)}
.price h3{color:var(--slate)}
.price p{grid-column:1;font-size:15px;line-height:1.7}
.price .t-meta{grid-row:1;grid-column:2;color:var(--slate)}
.price .t-num{grid-row:1 / span 2;grid-column:3;justify-self:end;font-size:34px;line-height:1}
.price .t-num small{font:800 14px/1 var(--f-wide);font-stretch:125%;letter-spacing:.06em}
.prices-note{margin-top:18px;font-size:14px;color:var(--slate)}
@media (max-width:767px){.price{grid-template-columns:1fr auto}.price .t-meta{grid-row:auto;grid-column:1}.price .t-num{grid-column:2;grid-row:1 / span 3;font-size:26px}}

/* emergency band: a crimson plate */
.sos{position:relative;padding:56px 0;background:var(--red);color:var(--white);clip-path:polygon(0 12%,50% 0,100% 12%,100% 88%,50% 100%,0 88%)}
.sos .wrap{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center}
.sos .t-d2{color:var(--white)}
.sos p{font-size:18px;line-height:1.5;opacity:.9}
@media (max-width:767px){.sos .wrap{grid-template-columns:1fr}}

/* areas */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;margin-top:28px}
.areas li{padding:12px 0 10px;border-bottom:1px solid var(--gray-300,#bcbcbc);font:800 13px/1.4 var(--f-wide);font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
@media (max-width:767px){.areas{grid-template-columns:1fr 1fr}}

/* survey form: a plate-cornered card */
.survey{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.survey form{display:grid;gap:22px;padding:36px;background:var(--gray-50,#f9f9f9);border-top:3px solid var(--red)}
.survey legend,.survey label>span{display:block;margin-bottom:10px;font:800 12px/1 var(--f-wide);font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.survey .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.survey .ex-chip{display:grid;gap:4px;min-height:58px;padding:10px 12px 8px;border:1px solid var(--gray-300,#bcbcbc);border-radius:3px;background:var(--white);text-align:left;cursor:pointer;transition:border-color var(--d-tick) var(--e-out),background var(--d-tick) var(--e-out),color var(--d-tick) var(--e-out)}
.survey .ex-chip b{font:700 17px/1 var(--f-sign);letter-spacing:var(--track);text-transform:uppercase}
.survey .ex-chip small{font-size:12px;line-height:1.3;color:var(--slate)}
.survey .ex-chip[aria-pressed="true"]{border-color:var(--red);background:var(--red);color:var(--white)}
.survey .ex-chip[aria-pressed="true"] small{color:rgba(255,255,255,.85)}
.survey .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.survey input{width:100%;height:46px;padding:0 14px;border:1px solid var(--gray-300,#bcbcbc);border-radius:3px;background:var(--white);font:400 15px/1 var(--f-body)}
.survey input:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}
.survey .btn-fill{justify-self:start;border:0;cursor:pointer}
.survey [data-note]:empty{display:none}
.survey [data-note]{padding:12px 14px;border-left:3px solid var(--red);background:var(--white);font-size:14px;line-height:1.6}
@media (max-width:1023px){.survey{grid-template-columns:1fr}}
@media (max-width:520px){.survey .opts,.survey .pair{grid-template-columns:1fr}.survey form{padding:24px 18px}}

/* the footer scene: rooftop units instead of a crane; the fan turns slowly */
.fan{transform-box:fill-box;transform-origin:center;animation:fan 3.2s linear infinite}
@keyframes fan{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fan{animation:none}}

/* ?shot — the 600×780 poster: the hero only */
.shot .banner{display:none}
.shot .hdr{inset:0 0 auto}
.hdr__nav a{white-space:nowrap}