@charset "utf-8";

/*
Theme Name: Structa - Construction & Building Contractor HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Tape Off
   1.8 Spirit Level
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Home Mega Menu
   3.5 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Hero Slider
   7.2 Accordion
   7.3 Tabs & Arrows
   7.4 Service & Feature Cards
   7.5 Project Cards
   7.6 Dock & Sector Cards
   7.7 News & Post Cards
   7.8 Team Cards
   7.9 Voices
   7.10 Rings
   7.11 Call To Action Band
   7.12 Faces & Badges
   7.13 Newsletter
8. Widgets & Controls
   8.1 Sidebar & Widgets
   8.2 Rows, Choices & Pages
   8.3 Quantity Stepper
9. Home 01
   9.1 Hero
   9.2 Sectors & Icon Strip
   9.3 Site Timeline
   9.4 About Split
   9.5 Rings
   9.6 News
   9.7 Voices
   9.8 Yellow Band
10. Home 02
   10.1 Hero
   10.2 Projects By Sector
   10.3 Crane Carry
   10.4 Process
   10.5 Safety Band
11. Home 03
   11.1 Hero
   11.2 Mosaic
   11.3 Area Scrub
   11.4 Call Band & Map
   11.5 Quote Row
   11.6 Tender Steps
12. Inner Pages
   12.1 Info Strip
   12.2 About
   12.3 Photos & Panels
   12.4 Service Details
   12.5 Sectors & Finishes
   12.6 Rate Card
   12.7 Team, Profile & Gallery
   12.8 Contact
   12.9 Careers
   12.10 Tables & Client Portal
   12.11 Error Page
13. Build Pages
   13.1 Cost Estimator
   13.2 Tender Wizard
   13.3 Projects Page
   13.4 Project Details
   13.5 Safety Record
14. Plant & Tool Hire
   14.1 Shop Grid
   14.2 Product Page
   14.3 Bag, Checkout & Wishlist
   14.4 Toast
   14.5 Equipment Cards
   14.6 Hire Lines
15. Blog & Account
   15.1 Blog List
   15.2 Blog Details
   15.3 Account Pages
   15.4 Coming Soon & 404
16. Page Title
17. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --st-white: #FFFFFF;
  --st-yellow: #FDB913;
  --st-yellow-rgb: 253, 185, 19;
  --st-yellow-soft: #FED46B;
  --st-amber: #8A5D00;
  --st-ink: #1B1B1B;
  --st-ink-rgb: 27, 27, 27;
  --st-night: #23272A;
  --st-night-rgb: 35, 39, 42;
  --st-night-2: #2E3337;
  --st-slate: #4F5B67;
  --st-black: #0D0F10;
  --st-red: #C2412D;
  --st-green: #2F8A4E;
  /* semantic: the white ground is the default; [data-theme="dark"] is the site after dark */
  --st-bg: #FFFFFF;
  --st-bg-rgb: 255, 255, 255;
  --st-surface: #FFFFFF;
  --st-surface-rgb: 255, 255, 255;
  --st-band: #F4F4F4;
  --st-band-rgb: 244, 244, 244;
  --st-band-2: #EBEBEB;
  --st-heading: #1B1B1B;
  --st-heading-rgb: 27, 27, 27;
  --st-text: #64686D;
  --st-muted: #6E7277;
  --st-line: #E4E4E4;
  --st-line-2: #CFCFCF;
  --st-field: #F2F2F2;
  --st-shelf: #FFFFFF;
  --st-primary: #FDB913;
  --st-on-primary: #1B1B1B;
  --st-accent-text: #8A5D00;
  --st-red-text: #B23A27;
  --st-green-text: #2A7A45;
  --st-shadow: 0 18px 40px rgba(20, 22, 24, 0.09);
  --st-shadow-lg: 0 30px 70px rgba(20, 22, 24, 0.16);
  --st-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  /* type */
  --st-ff-display: 'Sofia Sans Condensed', 'Arial Narrow', Arial, sans-serif;
  --st-ff-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --st-fs-h1: clamp(46px, 5.6vw, 94px);
  --st-fs-h2: clamp(36px, 3.7vw, 62px);
  --st-fs-h3: clamp(25px, 2.05vw, 34px);
  --st-fs-h4: 26px;
  --st-fs-h5: 21px;
  --st-fs-h6: 18px;
  /* WebGL colours (per section below) */
  --gl-1: #FFFFFF;
  --gl-2: #FDB913;
  --gl-3: #1B1B1B;
  --gl-alpha: 0.32;
}
[data-theme="dark"] {
  --st-bg: #1A1D1F;
  --st-bg-rgb: 26, 29, 31;
  --st-surface: #23272A;
  --st-surface-rgb: 35, 39, 42;
  --st-band: #202427;
  --st-band-rgb: 32, 36, 39;
  --st-band-2: #2A2F33;
  --st-heading: #F4F4F2;
  --st-heading-rgb: 244, 244, 242;
  --st-text: #B3B8BD;
  --st-muted: #9EA4AA;
  --st-line: rgba(244, 244, 242, 0.12);
  --st-line-2: rgba(244, 244, 242, 0.24);
  --st-field: #2A2F33;
  --st-accent-text: #FDB913;
  --st-red-text: #F08A75;
  --st-green-text: #7BCB95;
  --st-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  --st-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.5);
  --gl-1: #1A1D1F;
  --gl-3: #000000;
  --gl-alpha: 0.4;
}
/* bands that stay dark in both themes: the charcoal bands, the night panels, the footer */
.is-night,
.is-night-2 {
  --st-heading: #FFFFFF;
  --st-heading-rgb: 255, 255, 255;
  --st-text: #B5BAC0;
  --st-muted: #A2A8AE;
  --st-line: rgba(255, 255, 255, 0.12);
  --st-line-2: rgba(255, 255, 255, 0.24);
  --st-accent-text: #FDB913;
  --st-red-text: #F08A75;
  --st-green-text: #7BCB95;
  --st-surface: #2E3337;
  --st-surface-rgb: 46, 51, 55;
  --st-band: #2E3337;
  --st-field: rgba(255, 255, 255, 0.07);
  --gl-1: #23272A;
  --gl-3: #000000;
  --gl-alpha: 0.3;
  background-color: var(--st-night);
  color: var(--st-text);
}
.is-night-2 {
  --st-surface: #394046;
  --gl-1: #2E3337;
  background-color: var(--st-night-2);
}
/* the safety-yellow band: ink copy on yellow in both themes */
.is-yellow {
  --st-heading: #1B1B1B;
  --st-heading-rgb: 27, 27, 27;
  --st-text: #2B2A26;
  --st-muted: #3B372C;
  --st-line: rgba(27, 27, 27, 0.16);
  --st-line-2: rgba(27, 27, 27, 0.3);
  --st-accent-text: #1B1B1B;
  --st-field: rgba(255, 255, 255, 0.4);
  --gl-1: #FDB913;
  --gl-2: #1B1B1B;
  --gl-3: #FFFFFF;
  --gl-alpha: 0.13;
  background-color: var(--st-yellow);
  color: var(--st-text);
}
/* a white card on any ground keeps the light theme's ink */
.st-on-paper {
  --st-heading: #1B1B1B;
  --st-heading-rgb: 27, 27, 27;
  --st-text: #64686D;
  --st-muted: #6E7277;
  --st-line: #E4E4E4;
  --st-line-2: #CFCFCF;
  --st-accent-text: #8A5D00;
  --st-surface: #FFFFFF;
  --st-field: #F2F2F2;
  background-color: #FFFFFF;
  color: var(--st-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--st-ease), background-color 0.3s var(--st-ease);
}
a:hover {
  color: var(--st-accent-text);
}
::selection {
  background: var(--st-yellow);
  color: var(--st-ink);
}
:focus-visible {
  outline: 2px solid var(--st-yellow);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
/* the base's voice, condensed and tight: Title Case display headings, Poppins for everything else */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 {
  font-size: var(--st-fs-h1);
  line-height: 1.02;
}
h2 {
  font-size: var(--st-fs-h2);
  line-height: 1.06;
}
h3 {
  font-size: var(--st-fs-h3);
  line-height: 1.14;
}
h4 {
  font-size: var(--st-fs-h4);
  line-height: 1.2;
}
h5 {
  font-size: var(--st-fs-h5);
  line-height: 1.25;
}
h6 {
  font-size: var(--st-fs-h6);
  line-height: 1.3;
}
/* a heading at its outline level that looks like another level */
.st-h1 {
  font-size: var(--st-fs-h1);
  line-height: 1.02;
}
.st-h2 {
  font-size: var(--st-fs-h2);
  line-height: 1.06;
}
.st-h3 {
  font-size: var(--st-fs-h3);
  line-height: 1.14;
}
.st-h4 {
  font-size: var(--st-fs-h4);
  line-height: 1.2;
}
.st-h5 {
  font-size: var(--st-fs-h5);
  line-height: 1.25;
}
.st-h6 {
  font-size: var(--st-fs-h6);
  line-height: 1.3;
}
/* an accent word in a title: safety yellow on dark grounds, amber ink on light ones */
h1 em,
h2 em,
h3 em,
.st-h2 em {
  font-style: normal;
  color: var(--st-accent-text);
}
.is-night h1 em,
.is-night h2 em,
.st-photo-band h1 em,
.st-photo-band h2 em,
.st-hero h1 em,
.st-hero h2 em {
  color: var(--st-yellow);
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.st-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--st-text);
}
.st-num {
  font-family: var(--st-ff-display);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
}
.st-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* word masks for the R3 title rise: padded on every side so no letter is cut */
.st-words .w {
  display: inline-block;
  overflow: hidden;
  padding: 0.14em 0.08em 0.2em;
  margin: -0.14em -0.08em -0.2em;
  vertical-align: top;
}
.st-words .w > span {
  display: inline-block;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.st-bg-band {
  background-color: var(--st-band);
}
/* a working panel: forms, summaries, wizards */
.st-panel {
  padding: 40px 42px;
  background: var(--st-surface);
  box-shadow: 0 0 0 1px var(--st-line), var(--st-shadow);
}
.st-bg-band .st-panel {
  box-shadow: var(--st-shadow);
}
.st-panel.is-night {
  background: var(--st-night);
  box-shadow: none;
}
.st-panel h2,
.st-panel h3 {
  margin-bottom: 18px;
}
/* photo band: one style everywhere (a cover photo under a charcoal wash from the copy side, light copy) */
.st-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--st-night);
  --st-heading: #FFFFFF;
  --st-text: rgba(255, 255, 255, 0.84);
  --st-muted: rgba(255, 255, 255, 0.7);
  --st-accent-text: #FDB913;
  --st-line: rgba(255, 255, 255, 0.18);
  --st-line-2: rgba(255, 255, 255, 0.3);
  --st-field: rgba(255, 255, 255, 0.08);
  color: var(--st-text);
}
.st-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(23, 26, 28, 0.94) 0%, rgba(23, 26, 28, 0.8) 45%, rgba(23, 26, 28, 0.42) 100%);
}
.st-photo-band.is-centre::after {
  background: rgba(23, 26, 28, 0.7);
}

/*----- 1.3 Section Titles -----*/
/* the base's section head: a big condensed title and a quiet lead; Structa adds a short hazard bar before the eyebrow */
.st-title {
  margin-bottom: 60px;
}
.st-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--st-accent-text);
  font-family: var(--st-ff-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.st-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 30px;
  height: 7px;
  background: repeating-linear-gradient(-45deg, var(--st-yellow) 0 5px, var(--st-ink) 5px 10px);
}
.is-night .st-eyebrow::before,
.is-night-2 .st-eyebrow::before,
.st-photo-band .st-eyebrow::before,
.st-hero .st-eyebrow::before,
[data-theme="dark"] .st-eyebrow::before {
  background: repeating-linear-gradient(-45deg, var(--st-yellow) 0 5px, transparent 5px 10px);
}
.is-yellow .st-eyebrow::before {
  background: repeating-linear-gradient(-45deg, var(--st-ink) 0 5px, transparent 5px 10px);
}
.st-title h2,
.st-title .st-h2 {
  max-width: 900px;
}
.st-title .st-lead {
  max-width: 640px;
  margin: 20px 0 0;
}
.st-title.text-center h2,
.st-title.text-center .st-h2,
.st-title.text-center .st-lead {
  margin-left: auto;
  margin-right: auto;
}
.st-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.st-title.is-split .st-lead {
  max-width: 480px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
/* the base's button: a yellow face with a slate arrow tab glued to its right. House physics: the face turns ink,
   the tab turns yellow, the arrow slides out and its twin slides in */
.st-btn {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: var(--st-primary);
  color: var(--st-on-primary);
  font-family: var(--st-ff-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 54px;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.35s var(--st-ease), color 0.35s var(--st-ease), box-shadow 0.35s var(--st-ease), transform 0.35s var(--st-ease);
}
.st-btn > i {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  margin: 0 -28px 0 26px;
  overflow: hidden;
  background: var(--st-slate);
  color: #FFFFFF;
  font-size: 13px;
  transition: background-color 0.35s var(--st-ease), color 0.35s var(--st-ease);
}
.st-btn > i::before {
  transition: transform 0.4s var(--st-ease);
}
.st-btn > i::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-420%, -50%);
  transition: transform 0.4s var(--st-ease);
}
.st-btn > i.fa-arrow-right::after {
  content: "\f061";
}
.st-btn:hover {
  background: var(--st-ink);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(20, 22, 24, 0.2);
  transform: translateY(-2px);
}
.st-btn:hover > i {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.st-btn:hover > i.fa-arrow-right::before {
  transform: translateX(420%);
}
.st-btn:hover > i.fa-arrow-right::after {
  transform: translate(-50%, -50%);
}
[data-theme="dark"] .st-btn:hover,
.is-night .st-btn:hover,
.is-night-2 .st-btn:hover,
.st-photo-band .st-btn:hover,
.st-hero .st-btn:hover {
  background: #FFFFFF;
  color: var(--st-ink);
}
.is-yellow .st-btn {
  background: var(--st-ink);
  color: #FFFFFF;
}
.is-yellow .st-btn > i {
  background: #3A3F44;
}
.is-yellow .st-btn:hover {
  background: #FFFFFF;
  color: var(--st-ink);
}
/* tonal: a grey face, ink text, an ink tab */
.st-btn.is-tonal {
  background: var(--st-band);
  color: var(--st-heading);
}
.st-btn.is-tonal > i {
  background: var(--st-ink);
  color: var(--st-yellow);
}
.st-bg-band .st-btn.is-tonal {
  background: var(--st-surface);
}
.st-btn.is-tonal:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.is-night .st-btn.is-tonal,
.is-night-2 .st-btn.is-tonal,
.st-photo-band .st-btn.is-tonal,
.st-hero .st-btn.is-tonal,
[data-theme="dark"] .st-btn.is-tonal {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.is-night .st-btn.is-tonal > i,
.is-night-2 .st-btn.is-tonal > i,
.st-photo-band .st-btn.is-tonal > i,
.st-hero .st-btn.is-tonal > i,
[data-theme="dark"] .st-btn.is-tonal > i {
  background: rgba(255, 255, 255, 0.14);
}
.is-night .st-btn.is-tonal:hover,
.is-night-2 .st-btn.is-tonal:hover,
.st-photo-band .st-btn.is-tonal:hover,
.st-hero .st-btn.is-tonal:hover,
[data-theme="dark"] .st-btn.is-tonal:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.st-on-paper .st-btn.is-tonal {
  background: #F2F2F2;
  color: var(--st-ink);
}
/* small: only inside compact cards */
.st-btn.is-sm {
  height: 44px;
  padding: 0 20px;
  font-size: 13.5px;
  line-height: 44px;
}
.st-btn.is-sm > i {
  width: 44px;
  margin: 0 -20px 0 18px;
}
.st-btn.is-block {
  justify-content: space-between;
  width: 100%;
}
.st-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* "more": the base's arrow link - the words, then a short yellow line that runs out on hover */
.st-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--st-heading);
  font-family: var(--st-ff-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}
.st-more::after {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--st-yellow);
  transition: width 0.4s var(--st-ease);
}
.st-more:hover {
  color: var(--st-accent-text);
}
.st-more:hover::after {
  width: 44px;
}
.st-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
}

/*----- 1.5 Forms -----*/
.st-field {
  position: relative;
  margin-bottom: 20px;
}
.st-field label,
.st-flabel {
  display: block;
  margin-bottom: 8px;
  color: var(--st-heading);
  font-size: 14px;
  font-weight: 600;
}
/* tonal fields: a grey face, no outline; the focus draws a yellow line under them */
.st-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 48px 0 20px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: var(--st-field);
  color: var(--st-heading);
  font-family: var(--st-ff-body);
  font-size: 15px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.st-bg-band .st-input {
  background: var(--st-surface);
}
textarea.st-input {
  height: 160px;
  padding-top: 16px;
  resize: vertical;
}
.st-input::placeholder {
  color: var(--st-muted);
}
.st-input:focus {
  border-bottom-color: var(--st-yellow);
  outline: 0;
}
.st-input.is-invalid {
  border-bottom-color: var(--st-red);
}
.st-input[type="date"],
.st-input[type="number"] {
  color-scheme: light;
}
[data-theme="dark"] .st-input[type="date"],
.is-night .st-input[type="date"],
[data-theme="dark"] .st-input[type="number"],
.is-night .st-input[type="number"] {
  color-scheme: dark;
}
.st-input[type="file"] {
  height: auto;
  padding: 15px 20px;
  font-size: 14px;
}
.st-field > i {
  position: absolute;
  right: 20px;
  top: 50px;
  color: var(--st-accent-text);
  font-size: 14px;
  pointer-events: none;
}
.st-field.is-area > i {
  top: 54px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--st-muted);
}
.form-status.is-ok {
  color: var(--st-green-text);
}
.form-status.is-error {
  color: var(--st-red-text);
}
.st-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.st-check input {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 5px;
  accent-color: var(--st-amber);
}
/* a native range in the brand */
.st-range {
  width: 100%;
  accent-color: var(--st-yellow);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.st-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--st-band);
  color: var(--st-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--st-ease);
}
.st-social a:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
  transform: translateY(-3px);
}
.is-night .st-social a {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
/* a round portrait beside a name */
.st-face {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
/* overlapping faces + a count */
.st-faces {
  display: inline-flex;
  align-items: center;
}
.st-faces img {
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--st-bg);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.st-faces img:first-child {
  margin-left: 0;
}
.st-faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--st-bg);
  border-radius: 50%;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 12px;
  font-weight: 700;
}
.st-bg-band .st-faces img,
.st-bg-band .st-faces .more {
  border-color: var(--st-band);
}
.is-night .st-faces img,
.is-night .st-faces .more,
.st-photo-band .st-faces img,
.st-photo-band .st-faces .more,
.st-hero .st-faces img,
.st-hero .st-faces .more {
  border-color: var(--st-night);
}
.st-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 22px;
  box-shadow: 0 0 0 14px rgba(var(--st-yellow-rgb), 0.24);
  transition: transform 0.4s var(--st-ease), box-shadow 0.4s ease;
}
.st-play i {
  margin-left: 4px;
}
.st-play:hover {
  color: var(--st-ink);
  box-shadow: 0 0 0 22px rgba(var(--st-yellow-rgb), 0.18);
  transform: scale(1.05);
}
/* a progress bar (build progress, a sector's share): filled by the engines */
.st-meter {
  position: relative;
  height: 6px;
  background: var(--st-line);
}
.st-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--st-yellow);
  transition: width 1.2s var(--st-ease);
}
.st-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--st-yellow);
  font-size: 12px;
}
/* the base's category tag: a small yellow box, ink text */
.st-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-family: var(--st-ff-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.st-tag.is-quiet {
  background: var(--st-band);
  color: var(--st-heading);
}
.st-tag.is-green {
  background: #DDF1E3;
  color: #1F5F35;
}
.st-tag.is-ink {
  background: var(--st-ink);
  color: #FFFFFF;
}
.is-night .st-tag.is-quiet {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
/* a status dot before "Open now" lines */
.st-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--st-muted);
  vertical-align: middle;
}
.is-open .st-dot,
.st-dot.is-open {
  background: #3FB565;
  box-shadow: 0 0 0 4px rgba(63, 181, 101, 0.2);
}
.is-soon .st-dot,
.st-dot.is-soon {
  background: var(--st-yellow);
  box-shadow: 0 0 0 4px rgba(var(--st-yellow-rgb), 0.24);
}
.st-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--st-night);
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: var(--st-shadow-lg);
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--st-ease);
}
.st-toast i {
  color: var(--st-yellow);
}
.st-toast.is-shown {
  transform: translate(-50%, 0);
}
.st-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--st-yellow);
  color: var(--st-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--st-ease), background-color 0.3s ease;
}
.st-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.st-back-top:hover {
  background: var(--st-ink);
  color: #FFFFFF;
}
/* WebGL layers sit under a section's content */
.st-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.st-gl.is-on {
  opacity: 1;
}
/* illustrated icons in two inks: ink lines on the white ground (the default), white lines on dark grounds */
.st-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.st-ico img {
  width: 100%;
  height: 100%;
}
.st-ico .ico-night,
[data-theme="dark"] .st-ico .ico-day,
.is-night .st-ico .ico-day,
.is-night-2 .st-ico .ico-day,
.st-photo-band .st-ico .ico-day {
  display: none;
}
[data-theme="dark"] .st-ico .ico-night,
.is-night .st-ico .ico-night,
.is-night-2 .st-ico .ico-night,
.st-photo-band .st-ico .ico-night {
  display: block;
}
[data-theme="dark"] .st-on-paper .st-ico .ico-day {
  display: block;
}
[data-theme="dark"] .st-on-paper .st-ico .ico-night {
  display: none;
}
/* label / value rows (hours, facts, breakdowns) */
.st-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--st-line);
}
.st-rows li > span {
  color: var(--st-text);
}
.st-rows li > b {
  color: var(--st-heading);
  font-weight: 600;
  text-align: right;
}
.st-rows li.is-today > span,
.st-rows li.is-today > b {
  color: var(--st-accent-text);
  font-weight: 600;
}
.st-rows li.is-total {
  border-bottom: 0;
}
.st-rows li.is-total > span,
.st-rows li.is-total > b {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 24px;
  font-weight: 700;
}
/* a small product beside its name and price (sidebars) */
.product-mini {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--st-line);
  color: var(--st-heading);
}
.product-mini img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #FFFFFF;
}
.product-mini > span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.product-mini small {
  color: var(--st-accent-text);
  font-size: 13px;
}
.product-mini b {
  font-family: var(--st-ff-display);
  font-size: 18px;
  font-weight: 700;
}
.product-mini em {
  font-style: normal;
  font-size: 14px;
}

/*----- 1.7 Tape Off -----*/
/* Tape Off: a charcoal cover over each photo with a hazard-tape cordon across it; the reveal engine tugs the tape,
   pulls it off sideways and the cover wipes after it, while the photo settles */
.st-tape {
  position: relative;
  overflow: hidden;
}
.st-tape-cover {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--st-night);
}
.st-tape-cover::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--st-yellow);
}
.st-tape-strip {
  position: absolute;
  left: -12%;
  right: -12%;
  top: 50%;
  z-index: 5;
  height: 44px;
  margin-top: -22px;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--st-yellow) 0 18px, var(--st-ink) 18px 36px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.st-tape-strip::before,
.st-tape-strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.st-tape-strip::before {
  top: 3px;
}
.st-tape-strip::after {
  bottom: 3px;
}

/*----- 1.8 Spirit Level -----*/
/* the hover accent: a small level on the card's corner; its bubble slides to the centre marks when the card is
   hovered and settles with a little overshoot */
.st-lvl {
  position: relative;
}
.st-level {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 6;
  display: block;
  width: 58px;
  height: 16px;
  padding: 3px;
  background: var(--st-ink);
  pointer-events: none;
}
.st-level > i {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #F3F7B5 0%, #D9E36A 100%);
  overflow: hidden;
}
.st-level > i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 14px;
  margin-left: -7px;
  border-left: 1px solid rgba(27, 27, 27, 0.55);
  border-right: 1px solid rgba(27, 27, 27, 0.55);
}
.st-level > i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 10px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 -1px 1px rgba(120, 130, 30, 0.35);
  transition: left 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.st-level::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -3px;
  height: 3px;
  background: var(--st-yellow);
}
.st-lvl:hover .st-level > i::after,
.st-lvl:focus-within .st-level > i::after {
  left: calc(50% - 5px);
}

/*======================
2. Preloader
========================*/
/* Crane Lift: a tower crane drawn in white steel lowers the yellow block mark onto its landing marks, the hook lets go
   and rises, the wordmark is set beside the block, then the whole panel lifts. Built from boxes and gradients; the
   timeline is in main.js. */
.st-preloader {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--st-night);
}
/* faint site grid behind the crane */
.st-preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
}
.pre-stage {
  position: relative;
  width: 700px;
  height: 560px;
  flex-shrink: 0;
}
.pre-ground {
  position: absolute;
  left: -40px;
  right: -40px;
  bottom: 30px;
  height: 3px;
  background: rgba(255, 255, 255, 0.5);
}
/* the mast: two rails and a lattice of diagonals */
.pre-mast {
  position: absolute;
  left: 36px;
  top: 68px;
  bottom: 33px;
  width: 30px;
  border-left: 3px solid #FFFFFF;
  border-right: 3px solid #FFFFFF;
  background:
    repeating-linear-gradient(48deg, transparent 0 15px, rgba(255, 255, 255, 0.85) 15px 17px, transparent 17px 32px),
    repeating-linear-gradient(-48deg, transparent 0 15px, rgba(255, 255, 255, 0.85) 15px 17px, transparent 17px 32px);
}
.pre-mast::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: -3px;
  height: 14px;
  background: var(--st-slate);
}
/* the peak above the mast and its two tie bars down to the jib ends */
.pre-peak {
  position: absolute;
  left: 41px;
  top: 0;
  width: 20px;
  height: 46px;
  border-left: 3px solid #FFFFFF;
  border-right: 3px solid #FFFFFF;
}
.pre-tie {
  position: absolute;
  top: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
  transform-origin: 0 50%;
}
.pre-tie.is-long {
  left: 52px;
  width: 536px;
  transform: rotate(4.7deg);
}
.pre-tie.is-short {
  left: 52px;
  width: 120px;
  transform: rotate(158.6deg);
}
/* the jib: a horizontal truss from the counterweight to the far end */
.pre-jib {
  position: absolute;
  left: -64px;
  top: 46px;
  width: 650px;
  height: 22px;
  border-top: 3px solid #FFFFFF;
  border-bottom: 3px solid #FFFFFF;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.85) 9px 11px, transparent 11px 20px);
}
.pre-counter {
  position: absolute;
  left: -58px;
  top: 68px;
  width: 50px;
  height: 36px;
  background: var(--st-slate);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2);
}
.pre-cab {
  position: absolute;
  left: 70px;
  top: 68px;
  width: 34px;
  height: 30px;
  background: var(--st-yellow);
}
.pre-cab::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 22px;
  height: 11px;
  background: var(--st-night);
}
/* the trolley rides under the jib; the cable, the hook block and the load hang from it */
.pre-trolley {
  position: absolute;
  left: 206px;
  top: 68px;
  width: 50px;
  height: 12px;
  background: #FFFFFF;
}
.pre-rig {
  position: absolute;
  left: 230px;
  top: 80px;
  width: 2px;
  height: 0;
}
.pre-cable {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 195px;
  background: rgba(255, 255, 255, 0.9);
}
.pre-hook {
  position: absolute;
  left: -14px;
  top: 0;
  width: 30px;
  height: 52px;
  transform: translateY(195px);
}
.pre-hook::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 22px;
  background: var(--st-yellow);
}
.pre-hook::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 24px;
  width: 16px;
  height: 22px;
  border: 4px solid #FFFFFF;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  border-right-color: transparent;
}
/* the load: two slings from the hook to the block's top corners */
.pre-load {
  position: absolute;
  left: -64px;
  top: 46px;
  width: 128px;
  height: 196px;
  transform: translateY(195px);
  transform-origin: 50% 0;
}
.pre-sling {
  position: absolute;
  top: 0;
  left: 63px;
  width: 2px;
  height: 84px;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: 50% 0;
}
.pre-sling.is-left {
  transform: rotate(36deg);
}
.pre-sling.is-right {
  transform: rotate(-36deg);
}
.pre-block {
  position: absolute;
  left: 0;
  top: 68px;
  width: 128px;
  height: 128px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
}
.pre-block img {
  display: block;
  width: 100%;
  height: 100%;
}
/* the landing marks on the ground and the wordmark set beside the block */
.pre-slot {
  position: absolute;
  left: 160px;
  bottom: 33px;
  width: 140px;
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--st-yellow) 0 8px, var(--st-ink) 8px 16px);
}
.pre-word {
  position: absolute;
  left: 318px;
  bottom: 52px;
  width: 360px;
}
.pre-word img {
  display: block;
  width: 100%;
  height: auto;
}
.pre-word small {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--st-ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/*======================
3. Header
========================*/
/* Structa's header in the base's four moods: "over" is a dark bar boxed inside the container over the hero (Home 01),
   "boxed" a white bar boxed over a dark hero (Home 02), "clear" a transparent full-width bar over the hero (Home 03)
   and "solid" the full-width white bar of the inner pages. All of them turn into the full-width bar once the page
   scrolls. The charcoal top bar carries the address, the phone, the office clock and the language. */
.st-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--st-surface);
  --hd-ink: var(--st-heading);
  --hd-hover: var(--st-accent-text);
  --hd-icon: var(--st-band);
  --hd-line: var(--st-line);
}
.st-header .wide {
  display: flex;
  align-items: center;
  padding: 0 40px;
}
.st-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.st-logo img {
  height: 40px;
  width: auto;
}
.st-logo .logo-light,
[data-theme="dark"] .st-logo .logo-main {
  display: none;
}
[data-theme="dark"] .st-logo .logo-light {
  display: block;
}
/* over a dark band the logo is always the light one */
.header-style-over:not(.is-sticky) .st-logo .logo-main,
.header-style-clear:not(.is-sticky) .st-logo .logo-main {
  display: none;
}
.header-style-over:not(.is-sticky) .st-logo .logo-light,
.header-style-clear:not(.is-sticky) .st-logo .logo-light {
  display: block;
}
.header-style-over,
.header-style-boxed,
.header-style-clear {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.header-style-over:not(.is-sticky),
.header-style-clear:not(.is-sticky) {
  --hd-ink: #FFFFFF;
  --hd-hover: var(--st-yellow);
  --hd-icon: rgba(255, 255, 255, 0.12);
  --hd-line: rgba(255, 255, 255, 0.14);
}
.header-style-over:not(.is-sticky) {
  --hd-bar: rgba(27, 27, 27, 0.82);
}
.header-style-clear:not(.is-sticky) {
  --hd-bar: transparent;
}
.header-style-boxed:not(.is-sticky) {
  --hd-bar: var(--st-surface);
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 42px;
  background: #222327;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  overflow: visible;
  transition: height 0.4s var(--st-ease), opacity 0.3s ease;
}
.header-style-over:not(.is-sticky) .header-top,
.header-style-boxed:not(.is-sticky) .header-top {
  background: rgba(22, 23, 26, 0.86);
}
.header-style-clear:not(.is-sticky) .header-top {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-top a:hover {
  color: var(--st-yellow);
}
.header-top .top-item i {
  margin-right: 8px;
  color: var(--st-yellow);
  font-size: 12px;
}
.st-open {
  display: inline-flex;
  align-items: center;
}
.header-top .st-dot {
  background: rgba(255, 255, 255, 0.45);
}
.header-top .is-open .st-dot {
  background: #5BCB80;
  box-shadow: 0 0 0 4px rgba(91, 203, 128, 0.22);
}
.header-top .top-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.22);
}
.header-top .st-social {
  gap: 4px;
}
.header-top .st-social a {
  width: 28px;
  height: 28px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}
.header-top .st-social a:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
  transform: none;
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-bar {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-bar.wide {
  height: 92px;
  gap: 40px;
}
/* the boxed moods: the bar sits inside the container, a little below the top bar */
.header-style-over:not(.is-sticky) .header-main,
.header-style-boxed:not(.is-sticky) .header-main {
  max-width: 1440px;
  margin: 14px auto 0;
  padding: 0 40px;
}
.header-style-over:not(.is-sticky) .header-bar,
.header-style-boxed:not(.is-sticky) .header-bar {
  padding: 0 30px;
  border-bottom: 0;
}
.header-style-boxed:not(.is-sticky) .header-bar {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.2);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.header-icon .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.st-theme-toggle .ti-sun,
[data-theme="dark"] .st-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .st-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  margin-left: 10px;
}
/* the base's three-bar menu mark */
.st-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 46px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.st-menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--hd-ink);
  transition: width 0.3s var(--st-ease);
}
.st-menu-toggle span:nth-child(2) {
  width: 18px;
}
.st-menu-toggle:hover span {
  width: 26px;
}

/*----- 3.3 Main Menu -----*/
.st-nav > ul {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-nav li {
  position: relative;
}
.st-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 34px 0;
  color: var(--hd-ink);
  font-family: var(--st-ff-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.st-nav > ul > li > a i {
  font-size: 9px;
  opacity: 0.7;
  transition: transform 0.3s var(--st-ease);
}
.st-nav > ul > li:hover > a,
.st-nav > ul > li.active > a {
  color: var(--hd-hover);
}
.st-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.st-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -26px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  background: var(--st-surface);
  border-top: 3px solid var(--st-yellow);
  box-shadow: var(--st-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--st-ease), transform 0.35s var(--st-ease), visibility 0.3s;
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.st-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.st-nav li:hover > .sub-menu,
.st-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.st-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 26px;
  color: var(--st-heading);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.3s var(--st-ease), padding 0.35s var(--st-ease);
}
.st-nav .sub-menu a i {
  font-size: 9px;
  color: var(--st-muted);
}
.st-nav .sub-menu li:hover > a,
.st-nav .sub-menu li.active > a {
  padding-left: 34px;
  color: var(--st-accent-text);
}
.st-nav .sub-menu .sub-menu {
  top: -19px;
  left: 100%;
}
.st-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Home Mega Menu -----*/
.st-nav .has-mega {
  position: static;
}
.st-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(960px, calc(100vw - 60px));
  padding: 28px;
  background: var(--st-surface);
  border-top: 3px solid var(--st-yellow);
  box-shadow: var(--st-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--st-ease), transform 0.35s var(--st-ease), visibility 0.3s;
}
.st-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.st-nav .has-mega:hover > .mega-menu,
.st-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.mega-card {
  display: block;
  color: var(--st-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--st-band);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--st-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--st-accent-text);
  font-size: 13px;
  font-weight: 600;
}
.mega-meta b {
  font-family: var(--st-ff-display);
  font-size: 20px;
  font-weight: 700;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--st-accent-text);
}

/*----- 3.5 Sticky Header -----*/
.st-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: st-header-in 0.6s var(--st-ease) both;
}
.st-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.st-header.is-sticky .header-bar {
  box-shadow: 0 12px 34px rgba(20, 22, 24, 0.12);
}
.st-header.is-sticky .header-bar.wide {
  height: 76px;
}
.st-header.is-sticky .st-nav > ul > li > a {
  padding: 26px 0;
}
.st-header-spacer {
  display: none;
}
.st-header-spacer.is-on {
  display: block;
}
@keyframes st-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.st-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--st-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--st-ease), box-shadow 0.6s var(--st-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.st-offcanvas.open {
  box-shadow: var(--st-shadow-lg);
  transform: none;
}
.st-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20, 22, 24, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.st-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--st-line);
}
.offcanvas-head .st-logo img {
  height: 40px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--st-band);
  color: var(--st-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--st-ease);
}
.offcanvas-close:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--st-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--st-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--st-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 3px solid var(--st-line);
  color: var(--st-text);
  font-size: 15px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--st-yellow);
  color: var(--st-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.offcanvas-foot {
  background: var(--st-night);
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: 28px;
  font-weight: 700;
}
.oc-mail {
  color: var(--st-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.st-select {
  position: relative;
}
.st-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.st-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: var(--st-field);
  font-size: 15px;
  text-align: left;
  color: var(--st-heading);
  transition: border-color 0.3s var(--st-ease);
}
.st-select.is-open .select-button,
.st-select .select-button:hover {
  border-bottom-color: var(--st-yellow);
}
.st-bg-band .st-select .select-button {
  background: var(--st-surface);
}
.st-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.st-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--st-accent-text);
  transition: transform 0.35s var(--st-ease);
}
.st-select.is-open .select-button i {
  transform: rotate(180deg);
}
.st-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--st-surface);
  border-top: 3px solid var(--st-yellow);
  box-shadow: var(--st-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--st-ease), transform 0.3s var(--st-ease), visibility 0.3s;
}
.st-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 3px solid var(--st-yellow);
  transform: translateY(-10px);
}
.st-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.st-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--st-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--st-ease), color 0.2s var(--st-ease);
}
.st-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-accent-text);
}
.st-select .select-option .option-meta.is-none {
  color: var(--st-muted);
}
.st-select .select-option.is-focused,
.st-select .select-option:hover {
  background-color: var(--st-band);
}
.st-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.st-select .select-option.is-selected {
  color: var(--st-accent-text);
}
.st-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--st-accent-text);
}
.st-select.is-compact .select-button {
  height: 48px;
  border: 0;
  border-radius: 0;
  background: var(--st-band);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.st-lang {
  position: relative;
  flex-shrink: 0;
}
.st-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--st-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.st-lang .lang-btn:hover,
.st-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--st-night);
}
.st-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.st-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.st-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.st-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--st-band);
  color: var(--st-heading);
}
.st-lang.is-icon .lang-btn:hover,
.st-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--st-night);
  color: #FFFFFF;
}
.st-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 2px;
  background: var(--st-surface);
  box-shadow: var(--st-shadow-lg);
  font-family: var(--st-ff-body);
  text-align: start;
  white-space: normal;
}
.st-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.st-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.st-lang .lang-menu[hidden] {
  display: none;
}
.st-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-muted);
}
.st-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--st-line);
}
.st-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--st-heading);
  font-family: var(--st-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.st-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--st-muted);
}
.st-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--st-accent-text);
  opacity: 0;
}
.st-lang .lang-item:hover,
.st-lang .lang-item[aria-pressed="true"] {
  background: var(--st-band);
}
.st-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.st-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.st-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--st-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--st-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Hero Slider -----*/
/* the base's hero: a full-bleed site photograph, a big condensed title on set lines, a lead and the arrow-tab
   button; square dark arrows flush with the side edges. Each home sets its own height and copy position */
.st-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--st-night);
  color: #FFFFFF;
}
.st-hero .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 880px;
  overflow: hidden;
}
.st-hero .hero-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-hero .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(20, 22, 24, 0.62) 0%, rgba(20, 22, 24, 0.4) 40%, rgba(20, 22, 24, 0.72) 100%);
  pointer-events: none;
}
.st-hero .container {
  position: relative;
  z-index: 2;
}
.hero-copy {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.hero-copy .st-eyebrow {
  color: var(--st-yellow);
}
.hero-title {
  margin: 0 0 24px;
  color: #FFFFFF;
  font-size: clamp(54px, 7.4vw, 128px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.hero-title em {
  font-style: normal;
  color: var(--st-yellow);
}
.hero-lead {
  max-width: 660px;
  margin: 0 auto 38px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 19px;
  line-height: 1.65;
}
.hero-copy .st-btns {
  justify-content: center;
}
.hero-copy .st-more {
  color: #FFFFFF;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-top: -31px;
  background: rgba(27, 27, 27, 0.72);
  color: #FFFFFF;
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease, width 0.35s var(--st-ease);
}
.hero-arrow:hover {
  width: 76px;
  background: var(--st-yellow);
  color: var(--st-ink);
}
.hero-prev {
  left: 0;
}
.hero-next {
  right: 0;
}
.hero-count {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: 20px;
  font-weight: 700;
}
.hero-count i {
  width: 46px;
  height: 3px;
  background: var(--st-yellow);
}

/*----- 7.2 Accordion -----*/
.st-accordion .acc-item {
  margin-bottom: 10px;
  background: var(--st-band);
}
.st-bg-band .st-accordion .acc-item {
  background: var(--st-surface);
}
.st-accordion .acc-title {
  margin: 0;
  font-family: var(--st-ff-body);
  font-size: inherit;
}
.st-accordion .acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 20px 20px 20px 26px;
  color: var(--st-heading);
  font-family: var(--st-ff-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: start;
}
.st-accordion .acc-head i {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--st-ink);
  color: var(--st-yellow);
  font-size: 12px;
  transition: transform 0.35s var(--st-ease), background-color 0.3s ease, color 0.3s ease;
}
.st-accordion .acc-item.is-open .acc-head i {
  background: var(--st-yellow);
  color: var(--st-ink);
  transform: rotate(45deg);
}
.st-accordion .acc-body {
  padding: 0 26px 24px;
}
.st-accordion .acc-item.is-open {
  box-shadow: inset 4px 0 0 var(--st-yellow);
}

/*----- 7.3 Tabs & Arrows -----*/
.st-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 44px;
}
.st-filter-tabs.justify-content-center {
  justify-content: center;
}
.st-filter-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  background: var(--st-band);
  color: var(--st-heading);
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.st-filter-tabs button span {
  color: var(--st-muted);
  font-size: 12.5px;
}
.st-bg-band .st-filter-tabs button {
  background: var(--st-surface);
}
.is-night .st-filter-tabs button {
  background: rgba(255, 255, 255, 0.08);
}
.st-filter-tabs button:hover {
  background: var(--st-ink);
  color: #FFFFFF;
}
.st-filter-tabs button.is-active {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.st-filter-tabs button.is-active span,
.st-filter-tabs button:hover span {
  color: inherit;
}
.is-hidden,
.is-unmatched {
  display: none !important;
}
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--st-ink);
  color: #FFFFFF;
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.slider-arrow:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.is-night .slider-arrow {
  background: rgba(255, 255, 255, 0.1);
}
.is-night .slider-arrow:hover {
  background: var(--st-yellow);
}
.slider-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}
.slider-arrows {
  display: flex;
  gap: 6px;
}
.swiper-pagination-bullet {
  width: 26px;
  height: 4px;
  border-radius: 0;
  background: var(--st-line-2);
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: var(--st-yellow);
}

/*----- 7.4 Service & Feature Cards -----*/
/* the base's service card: charcoal on the grey band, a yellow-and-white line icon, the title, a line of copy */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 56px 34px 44px;
  background: var(--st-night);
  text-align: center;
  transition: transform 0.45s var(--st-ease), box-shadow 0.45s var(--st-ease);
}
.svc-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--st-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--st-ease);
}
[data-theme="dark"] .svc-card {
  background: var(--st-night-2);
}
.svc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px rgba(20, 22, 24, 0.26);
}
.svc-card:hover::after {
  transform: scaleX(1);
}
.svc-card .st-ico {
  width: 76px;
  height: 76px;
  margin-bottom: 26px;
}
.svc-card h3 {
  margin-bottom: 14px;
}
.svc-card h3 a:hover {
  color: var(--st-yellow);
}
.svc-card p {
  margin-bottom: 26px;
}
.svc-card .st-more {
  margin-top: auto;
}
/* a feature on a charcoal band: the large line icon, the title, two lines */
.feat {
  text-align: center;
}
.feat .st-ico {
  width: 96px;
  height: 96px;
  margin-bottom: 22px;
  transition: transform 0.5s var(--st-ease);
}
.feat:hover .st-ico {
  transform: translateY(-6px);
}
.feat h3 {
  margin-bottom: 12px;
}
.feat p {
  max-width: 280px;
  margin: 0 auto;
}

/*----- 7.5 Project Cards -----*/
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--st-surface);
  transition: transform 0.45s var(--st-ease), box-shadow 0.45s var(--st-ease);
}
.st-bg-band .project-card {
  background: var(--st-surface);
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--st-shadow-lg);
}
.pj-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--st-band);
}
.pj-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--st-ease);
}
.project-card:hover .pj-img img {
  transform: scale(1.06);
}
.project-card .pj-tag {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 6;
}
.pj-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 28px;
}
.pj-where {
  color: var(--st-muted);
  font-size: 14px;
}
.pj-body h3 {
  margin: 4px 0 18px;
}
.pj-body h3 a:hover {
  color: var(--st-accent-text);
}
.pj-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--st-line);
}
.pj-stats b {
  display: block;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
}
.pj-stats small {
  color: var(--st-muted);
  font-size: 12.5px;
}
.pj-progress {
  margin-top: 18px;
}
.pj-progress .pp-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13.5px;
}
.pj-progress .pp-row b {
  color: var(--st-heading);
  font-weight: 600;
}

/*----- 7.6 Dock & Sector Cards -----*/
/* the base's white cards on the hero's edge: a photo, a centred title, a line of copy */
.dock-card {
  height: 100%;
  padding: 20px 20px 34px;
  text-align: center;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
  transition: transform 0.45s var(--st-ease);
}
.dock-card:hover {
  transform: translateY(-8px);
}
.dock-card .dc-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.dock-card .dc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--st-ease);
}
.dock-card:hover .dc-img img {
  transform: scale(1.06);
}
.dock-card h3 {
  margin: 26px 0 10px;
}
.dock-card h3 a:hover {
  color: var(--st-accent-text);
}
.dock-card p {
  max-width: 300px;
  margin: 0 auto 14px;
}
.dock-card .dc-count {
  color: var(--st-heading);
  font-size: 14px;
  font-weight: 600;
}
.dock-card .dc-count b {
  color: var(--st-accent-text);
  font-family: var(--st-ff-display);
  font-size: 20px;
}

/*----- 7.7 News & Post Cards -----*/
/* the base's news tiles: a dark photo, a yellow tag, the title and a line, the date in yellow */
.news-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 330px;
  height: 100%;
  padding: 30px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.84);
}
.news-tile > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--st-ease);
}
.news-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(23, 26, 28, 0.45) 0%, rgba(23, 26, 28, 0.9) 100%);
}
.news-tile:hover > img {
  transform: scale(1.06);
}
.news-tile .st-tag {
  align-self: flex-start;
  margin-bottom: 16px;
}
.news-tile h3 {
  margin-bottom: 10px;
  color: #FFFFFF;
}
.news-tile h3 a:hover {
  color: var(--st-yellow);
}
.news-tile p {
  margin-bottom: 14px;
  font-size: 14.5px;
  line-height: 1.7;
}
.nt-meta {
  color: var(--st-yellow);
  font-size: 13px;
  font-weight: 500;
}
.news-list li {
  padding: 24px 0;
  border-bottom: 1px solid var(--st-line);
}
.news-list li:first-child {
  padding-top: 0;
}
.news-list h3 {
  margin-bottom: 8px;
}
.news-list h3 a:hover {
  color: var(--st-yellow);
}
.news-list p {
  margin-bottom: 8px;
  font-size: 14.5px;
}
/* the blog's post card: the photo, the tag on it, the title, a line and the meta */
.post-card {
  position: relative;
  height: 100%;
  background: var(--st-surface);
  transition: transform 0.45s var(--st-ease), box-shadow 0.45s var(--st-ease);
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--st-shadow-lg);
}
.pcd-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 11;
}
.pcd-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--st-ease);
}
.post-card:hover .pcd-img img {
  transform: scale(1.06);
}
.post-card .pcd-tag {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 6;
}
.pcd-body {
  padding: 26px 28px 30px;
}
.pcd-meta {
  margin-bottom: 8px;
  color: var(--st-muted);
  font-size: 13.5px;
}
.pcd-body h3 {
  margin-bottom: 12px;
}
.pcd-body h3 a:hover {
  color: var(--st-accent-text);
}
.pcd-body p {
  margin-bottom: 18px;
  font-size: 15px;
}

/*----- 7.8 Team Cards -----*/
.team-card {
  position: relative;
  height: 100%;
  background: var(--st-surface);
}
.tc-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1.08;
  background: var(--st-band);
}
.tc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
  transition: transform 0.9s var(--st-ease);
}
.team-card:hover .tc-img img {
  transform: scale(1.05);
}
.tc-social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  background: linear-gradient(0deg, rgba(23, 26, 28, 0.85), rgba(23, 26, 28, 0));
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s var(--st-ease);
}
.tc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 13px;
}
.tc-social a:hover {
  background: #FFFFFF;
  color: var(--st-ink);
}
.team-card:hover .tc-social,
.team-card:focus-within .tc-social {
  opacity: 1;
  transform: none;
}
.tc-body {
  padding: 22px 24px 24px;
  border-bottom: 4px solid var(--st-yellow);
}
.tc-body h3 a:hover {
  color: var(--st-accent-text);
}
.tc-body span {
  display: block;
  margin-top: 4px;
  color: var(--st-muted);
  font-size: 14px;
}

/*----- 7.9 Voices -----*/
/* the base's quote tile: a big yellow quotation mark, the words in the display face, the name and role */
.voice {
  margin: 0;
}
.voice-mark {
  display: block;
  margin-bottom: 18px;
  color: var(--st-yellow);
  font-size: 54px;
  line-height: 1;
}
.voice blockquote {
  margin: 0 0 26px;
}
.voice blockquote p {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: clamp(25px, 2.1vw, 34px);
  font-weight: 600;
  line-height: 1.22;
}
.voice figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
}
.voice figcaption .st-face {
  width: 58px;
  height: 58px;
}
.voice figcaption b {
  display: block;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.voice figcaption span {
  color: var(--st-muted);
  font-size: 14px;
}
.voice-project {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--st-heading);
  font-size: 14px;
  font-weight: 600;
}
.voice-project i {
  color: var(--st-accent-text);
}

/*----- 7.10 Rings -----*/
/* the base's yellow ring charts, given a meaning: the share fills round from twelve o'clock as it scrolls in */
.st-ring {
  --p: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 176px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: conic-gradient(var(--st-yellow) calc(var(--p) * 1%), var(--st-line) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
}
.ring-wrap {
  position: relative;
  text-align: center;
}
.ring-wrap .ring-val {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}
.ring-wrap .ring-val small {
  font-size: 26px;
}
.ring-wrap h3 {
  margin-bottom: 10px;
}
.ring-wrap p {
  max-width: 250px;
  margin: 0 auto;
  font-size: 14.5px;
}

/*----- 7.11 Call To Action Band -----*/
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 78px 0;
}
.cta-band .cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cta-band h2 {
  margin: 0;
}
.cta-band p {
  margin: 10px 0 0;
  font-size: 17px;
}

/*----- 7.12 Faces & Badges -----*/
.st-avatars {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.st-avatars .txt {
  font-size: 14px;
  line-height: 1.45;
}
.st-avatars .txt b {
  display: block;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 20px;
}
/* the review average with its count (Google-style), never a lorem tally */
.st-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--st-band);
}
.st-review > i {
  color: var(--st-heading);
  font-size: 22px;
}
.st-review .rv-score {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.st-review .rv-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.st-review small {
  color: var(--st-muted);
  font-size: 12.5px;
}
.is-night .st-review,
.st-photo-band .st-review,
.st-hero .st-review {
  background: rgba(255, 255, 255, 0.08);
}
.st-hero .st-review > i,
.st-hero .st-review .rv-score {
  color: #FFFFFF;
}
.st-hero .st-review small {
  color: rgba(255, 255, 255, 0.72);
}

/*----- 7.13 Newsletter -----*/
.st-newsletter {
  position: relative;
  display: flex;
}
.st-newsletter input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: var(--st-field);
  color: var(--st-heading);
  font-family: var(--st-ff-body);
  font-size: 15px;
  outline: 0;
}
.st-newsletter input:focus {
  border-bottom-color: var(--st-yellow);
}
.st-newsletter button {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.st-newsletter button:hover {
  background: #FFFFFF;
}
.st-newsletter + .form-status {
  font-size: 14px;
}

/*======================
8. Widgets & Controls
========================*/
/*----- 8.1 Sidebar & Widgets -----*/
/* the sidebar: each widget on the grey band, a yellow bar under its heading, plain lists */
.st-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.st-sidebar .widget {
  padding: 34px 32px;
  background: var(--st-band);
}
.st-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.st-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--st-yellow);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 18px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--st-field);
  color: var(--st-heading);
  font-family: var(--st-ff-body);
  font-size: 16px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-bottom-color: var(--st-yellow);
}
.widget-search .fs-ico {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: var(--st-accent-text);
  pointer-events: none;
}
.faq-group + .faq-group {
  margin-top: 64px;
}
.faq-group .st-accordion {
  margin-top: 26px;
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: var(--st-yellow);
  color: var(--st-ink);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: var(--st-night);
  color: #FFFFFF;
}
.widget-cats li a,
.widget-cats li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--st-line-2);
  color: var(--st-text);
  font-size: 16px;
  text-align: start;
  transition: color 0.3s ease, padding 0.3s var(--st-ease);
}
.widget-cats li:first-child a,
.widget-cats li:first-child button {
  padding-top: 0;
}
.widget-cats li:last-child a,
.widget-cats li:last-child button {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--st-muted);
  font-size: 14px;
}
.widget-cats li a:hover,
.widget-cats li button:hover,
.widget-cats li button.is-active {
  color: var(--st-accent-text);
}
.widget-cats li button.is-active span {
  color: var(--st-accent-text);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  background: var(--st-surface);
  color: var(--st-heading);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--st-accent-text);
  font-size: 13px;
  transition: transform 0.3s var(--st-ease), color 0.3s ease;
}
.widget-nav li a:hover,
.widget-nav li a.is-current {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.widget-nav li a:hover i,
.widget-nav li a.is-current i {
  color: var(--st-night);
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--st-line-2);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--st-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--st-accent-text);
  font-size: 13px;
  font-weight: 500;
}
.side-posts li > div {
  flex: 1 1 auto;
  min-width: 0;
}
.side-posts h3 a {
  color: var(--st-heading);
}
.side-posts h3 a:hover {
  color: var(--st-accent-text);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--st-text);
}
.widget-tags a:hover {
  color: var(--st-accent-text);
}
.st-sidebar .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--st-night);
  text-align: center;
}
.widget-cta .st-script {
  display: block;
  color: var(--st-yellow-soft);
  font-size: 26px;
  line-height: 1.2;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.widget-line .line-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--st-line-2);
}
.widget-line .line-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.widget-line .st-ico {
  width: 54px;
  height: 54px;
}
.line-row small {
  display: block;
  color: var(--st-muted);
  font-size: 13px;
}
.line-row b {
  color: var(--st-heading);
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.line-row:hover b {
  color: var(--st-accent-text);
}

/*----- 8.2 Rows, Choices & Pages -----*/
.st-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 24px;
  color: var(--st-heading);
  font-size: 18px;
  font-weight: 500;
}
.sum-total b {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 34px;
  font-weight: 800;
}
.st-kv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--st-line);
}
.st-kv li:first-child {
  border-top: 1px solid var(--st-line);
}
.st-kv li b {
  color: var(--st-heading);
  font-weight: 500;
  text-align: end;
}
.st-kv.is-plain li:first-child {
  border-top: 0;
}
.choice-list {
  display: grid;
  gap: 12px;
}
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 60px 16px 18px;
  background: var(--st-band);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.st-bg-band .choice-card,
.st-bg-band-2 .choice-card {
  background: var(--st-surface);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card:hover {
  box-shadow: inset 3px 0 0 var(--st-line-2);
}
.choice-card:focus-within {
  box-shadow: 0 0 0 4px rgba(var(--st-yellow-rgb), 0.18);
}
.choice-card.is-checked {
  background: var(--st-band-2);
  box-shadow: inset 3px 0 0 var(--st-yellow);
}
.choice-card.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice-ico {
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--st-accent-text);
  font-size: 18px;
}
.choice-ico .st-ico {
  width: 48px;
  height: 48px;
}
.choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.choice-body b {
  color: var(--st-heading);
  font-size: 16px;
  font-weight: 600;
}
.choice-body span {
  color: var(--st-muted);
  font-size: 14.5px;
}
.choice-tick {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--st-line-2);
  color: transparent;
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.choice-card.is-checked .choice-tick {
  background: var(--st-yellow);
  box-shadow: none;
  color: var(--st-night);
}
.st-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.st-pagination a,
.st-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--st-band);
  color: var(--st-heading);
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.st-pagination a i {
  color: var(--st-accent-text);
  font-size: 13px;
}
.st-pagination .is-current,
.st-pagination a:hover,
.st-pagination a:hover i {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.st-zoom {
  display: block;
  overflow: hidden;
}
.st-zoom img {
  width: 100%;
  transition: transform 0.9s var(--st-ease);
}
.st-zoom:hover img {
  transform: scale(1.05);
}
.grid-empty {
  padding: 40px 0;
  color: var(--st-muted);
  text-align: center;
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
.st-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 2px;
  background: var(--st-line-2);
  accent-color: var(--st-yellow-deep);
  appearance: none;
  -webkit-appearance: none;
}
.st-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 5px solid var(--st-surface);
  border-radius: 50%;
  background: var(--st-yellow);
  box-shadow: 0 2px 8px rgba(8, 11, 15, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.st-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--st-surface);
  border-radius: 50%;
  background: var(--st-yellow);
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--st-muted);
  font-size: 14px;
}

/* chips: tonal round faces for amounts, days and times (the input stays in the form, hidden) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.chip-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-choice > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 0;
  background: var(--st-band);
  color: var(--st-heading);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.st-panel .chip-choice > span {
  background: var(--st-band);
}
.chip-choice:hover > span {
  background: var(--st-band-2);
}
.chip-choice input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(var(--st-yellow-rgb), 0.25);
}
.chip-choice.is-checked > span {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.chip-choice > span small {
  color: var(--st-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-choice.is-off {
  cursor: not-allowed;
}
.chip-choice.is-off > span {
  opacity: 0.5;
  text-decoration: line-through;
}

/*----- 8.3 Quantity Stepper -----*/
.st-qty {
  display: inline-flex;
  align-items: center;
  background: var(--st-band);
}
.st-bg-band .st-qty {
  background: var(--st-surface);
}
.st-qty button {
  width: 46px;
  height: 54px;
  color: var(--st-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.st-qty button:hover {
  background: var(--st-band-2);
  color: var(--st-accent-text);
}
.st-qty input {
  width: 52px;
  height: 54px;
  border: 0;
  border-inline: 1px solid var(--st-line);
  background: transparent;
  color: var(--st-heading);
  font-family: var(--st-ff-body);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  outline: 0;
  -moz-appearance: textfield;
}
.st-qty input::-webkit-outer-spin-button,
.st-qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.st-qty.is-sm button {
  width: 36px;
  height: 42px;
}
.st-qty.is-sm input {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

/*======================
9. Home 01
========================*/
/*----- 9.1 Hero -----*/
.hero-one .swiper-slide {
  min-height: 900px;
  padding: 120px 0 130px;
}
.hero-one .hero-count {
  bottom: 70px;
}

/*----- 9.2 Sectors & Icon Strip -----*/
/* the base's three white cards lifted onto the hero's edge, on the charcoal band that carries the icon strip */
.dock-area {
  position: relative;
  isolation: isolate;
  padding-bottom: 110px;
}
.dock-row {
  position: relative;
  z-index: 3;
  margin-top: -32px;
}
.feat-row {
  margin-top: 90px;
}

/*----- 9.3 Site Timeline -----*/
.tl-track {
  position: relative;
}
.tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 30px;
  margin-bottom: 18px;
}
.tl-read {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.tl-read b {
  min-width: 1.6em;
  color: var(--st-accent-text);
  font-size: 46px;
  font-variant-numeric: tabular-nums;
}
.tl-read i {
  width: 30px;
  height: 3px;
  background: var(--st-yellow);
  align-self: center;
}
.tl-total {
  color: var(--st-muted);
  font-size: 14px;
  font-weight: 600;
}
.tl-rail {
  position: relative;
  height: 14px;
  margin-bottom: 40px;
  background: repeating-linear-gradient(90deg, var(--st-band-2) 0 2px, var(--st-band) 2px 40px);
}
.tl-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: repeating-linear-gradient(-45deg, var(--st-yellow) 0 12px, var(--st-ink) 12px 24px);
}
.tl-phase {
  position: relative;
  height: 100%;
  padding: 0 0 6px;
  opacity: 0.55;
  transition: opacity 0.5s ease, transform 0.5s var(--st-ease);
}
.tl-phase.is-on {
  opacity: 1;
}
.tl-phase.is-now {
  transform: translateY(-6px);
}
.tl-node {
  position: absolute;
  top: -66px;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--st-band-2);
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 18px;
  font-weight: 800;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.tl-phase.is-on .tl-node {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.tl-photo {
  margin: 0 0 22px;
  aspect-ratio: 4 / 3;
}
.tl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tl-weeks {
  display: block;
  margin-bottom: 6px;
  color: var(--st-accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tl-phase h3 {
  margin-bottom: 10px;
}
.tl-phase p {
  font-size: 15px;
}
.tl-phase .st-rows li {
  padding: 9px 0;
  font-size: 14.5px;
}

/*----- 9.4 About Split -----*/
/* the base's split band: the copy on a night panel, a site photograph to the full half */
.split-copy {
  max-width: 660px;
  margin-left: auto;
  padding: 110px 70px 110px 40px;
}
.split-copy h2 {
  margin-bottom: 20px;
}
.split-copy .st-rows {
  margin: 30px 0 36px;
}
.split-copy .st-btns {
  gap: 20px 30px;
}
.split-photo {
  position: relative;
  height: 100%;
  min-height: 460px;
}
.split-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*----- 9.5 Rings -----*/
.rings-proof {
  flex-shrink: 0;
}

/*----- 9.6 News -----*/
.news-area {
  position: relative;
  isolation: isolate;
}
.news-area h2 {
  margin-bottom: 34px;
}
.news-area .news-list {
  margin-bottom: 34px;
}

/*----- 9.7 Voices -----*/
.voices-head h2 {
  margin-bottom: 16px;
}
.voices-head .slider-arrows {
  margin-top: 30px;
}
.voices-card {
  position: relative;
  padding: 56px 56px 50px;
  background: var(--st-band);
}
.voices-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--st-yellow);
}

/*----- 9.8 Yellow Band -----*/
.is-yellow .st-more {
  color: var(--st-ink);
}
.is-yellow .st-more::after {
  background: var(--st-ink);
}

/*======================
10. Home 02
========================*/
/*----- 10.1 Hero -----*/
/* the base's builder home: a giant title across a dark site photograph, then an image / text slider whose photo
   hangs over the photograph's lower edge onto the white page; the arrows sit under the copy */
.hero-two {
  padding-top: 210px;
  background: transparent;
  overflow: visible;
}
.hero-two .hero-bg,
.hero-two::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 150px;
}
.hero-two .hero-bg {
  z-index: -2;
  width: 100%;
  height: calc(100% - 150px);
  object-fit: cover;
}
.hero-two::before {
  content: "";
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 22, 24, 0.7) 0%, rgba(20, 22, 24, 0.82) 100%);
}
.hero-giant {
  margin: 0 0 60px;
  color: #FFFFFF;
  font-size: clamp(60px, 9.2vw, 168px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
}
.hero-giant em {
  font-style: normal;
  color: var(--st-yellow);
}
.hero-split {
  overflow: visible;
}
.hero-split .swiper-slide {
  display: block;
  min-height: 0;
  overflow: visible;
}
.hero-split .swiper-slide::after {
  display: none;
}
.split-text {
  padding: 0 54px 190px 0;
  color: rgba(255, 255, 255, 0.86);
  text-align: right;
}
.split-text h2 {
  margin-bottom: 18px;
  color: #FFFFFF;
}
.split-text p {
  max-width: 420px;
  margin: 0 0 30px auto;
}
.split-img {
  position: relative;
  height: 540px;
  overflow: hidden;
}
.split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--st-yellow);
}
.hero-two .container {
  position: relative;
}
.split-nav {
  position: absolute;
  left: 12px;
  bottom: 44px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(41.666% - 12px);
  padding-right: 54px;
  justify-content: flex-end;
}
.split-dots {
  display: flex;
  gap: 6px;
  margin-right: 20px;
  order: -1;
}

/*----- 10.2 Projects By Sector -----*/
.projects-area {
  padding-top: 110px;
}
/* the sector's figures as one strip of cells */
.sector-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 40px;
  background: var(--st-band);
}
.sector-strip > div {
  padding: 18px 22px;
  border-left: 1px solid var(--st-line-2);
}
.sector-strip > div:first-child {
  border-left: 0;
  background: var(--st-yellow);
  --st-heading: #1B1B1B;
  --st-muted: #3B372C;
}
.sector-strip small {
  display: block;
  color: var(--st-muted);
  font-size: 12.5px;
}
.sector-strip b {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

/*----- 10.3 Crane Carry -----*/
/* the scroll moment: a hook comes down from a crane above the band, a steel beam on two slings, carried across */
.carry-area {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 250px;
}
.carry-rig {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 240px;
  height: 0;
  pointer-events: none;
}
.carry-trolley {
  position: absolute;
  left: 100px;
  top: 0;
  width: 40px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
}
.carry-cable {
  position: absolute;
  left: 119px;
  top: 10px;
  width: 2px;
  height: 70px;
  background: rgba(255, 255, 255, 0.75);
}
.carry-load {
  position: absolute;
  left: 0;
  top: 10px;
  width: 240px;
  height: 120px;
  transform-origin: 120px 0;
}
.carry-hook {
  position: absolute;
  left: 107px;
  top: 0;
  width: 26px;
  height: 18px;
  background: var(--st-yellow);
}
.carry-hook::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 20px;
  width: 12px;
  height: 14px;
  border: 3px solid #FFFFFF;
  border-top: 0;
  border-right-color: transparent;
  border-radius: 0 0 8px 8px;
}
.carry-sling {
  position: absolute;
  left: 119px;
  top: 34px;
  width: 2px;
  height: 96px;
  background: rgba(255, 255, 255, 0.6);
  transform-origin: 50% 0;
}
.carry-sling.is-left {
  transform: rotate(48deg);
}
.carry-sling.is-right {
  transform: rotate(-48deg);
}
/* an I-beam seen from the side: two flanges and the web between, bolt holes, painted ends */
.carry-beam {
  position: absolute;
  left: 0;
  top: 96px;
  width: 240px;
  height: 30px;
  border-top: 6px solid #8E99A3;
  border-bottom: 6px solid #6D7780;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.45) 2px, transparent 2.5px) 12px 50% / 36px 100% repeat-x,
    linear-gradient(180deg, #59636C, #434B52);
  box-shadow: inset 14px 0 0 var(--st-yellow), inset -14px 0 0 var(--st-yellow), 0 16px 26px rgba(0, 0, 0, 0.35);
}
.carry-shadow {
  position: absolute;
  left: 0;
  bottom: 70px;
  z-index: 0;
  width: 240px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
}
.cap-item {
  display: flex;
  gap: 22px;
  height: 100%;
  padding: 30px 28px;
  background: var(--st-night-2);
  transition: background-color 0.4s ease, transform 0.45s var(--st-ease);
}
.cap-item:hover {
  background: #353B40;
  transform: translateY(-5px);
}
.cap-item h3 {
  margin-bottom: 8px;
}
.cap-item p {
  margin: 0;
  font-size: 15px;
}

/*----- 10.4 Process -----*/
/* the base's round photos with a yellow number on their shoulder; the second one larger */
.process-row {
  align-items: flex-start;
}
.process-step {
  text-align: center;
}
.ps-img {
  position: relative;
  display: block;
  width: 210px;
  height: 210px;
  margin: 30px auto 28px;
}
.ps-img.is-big {
  width: 260px;
  height: 260px;
  margin-top: 0;
}
.ps-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 10px var(--st-surface);
}
.ps-img b {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-family: var(--st-ff-display);
  font-size: 30px;
  font-weight: 800;
}
.process-step h3 {
  margin-bottom: 10px;
}
.process-step p {
  max-width: 260px;
  margin: 0 auto;
}

/*----- 10.5 Safety Band -----*/
.lti-board {
  padding: 44px 46px;
  background: rgba(23, 26, 28, 0.82);
  border-top: 6px solid var(--st-yellow);
}
.lti-label {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lti-days {
  display: block;
  margin: 6px 0 18px;
  color: var(--st-yellow);
  font-family: var(--st-ff-display);
  font-size: clamp(80px, 8vw, 132px);
  font-weight: 800;
  line-height: 1;
}

/*======================
11. Home 03
========================*/
/*----- 11.1 Hero -----*/
/* the base's contractor home: a full-bleed photograph under a transparent header; Structa sets the copy to the left */
.hero-three .swiper-slide {
  min-height: 880px;
  padding: 150px 0 110px;
}
.hero-three .swiper-slide::after {
  background: linear-gradient(90deg, rgba(20, 22, 24, 0.8) 0%, rgba(20, 22, 24, 0.5) 50%, rgba(20, 22, 24, 0.2) 100%);
}
.hero-three .hero-copy {
  max-width: 760px;
  margin: 0;
  text-align: left;
}
.hero-three .hero-lead {
  margin-left: 0;
}
.hero-three .hero-copy .st-btns {
  justify-content: flex-start;
}
.hero-three .hero-count {
  left: auto;
}

/*----- 11.2 Mosaic -----*/
/* the base's checkerboard: four columns of charcoal tiles and photographs, an arrow tab in each tile's corner */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 380px;
}
.mo-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 44px;
  text-align: center;
}
.mo-tile h3 {
  margin-bottom: 14px;
}
.mo-tile .st-ico {
  margin-bottom: 18px;
}
.mo-tile p {
  max-width: 290px;
  margin: 0;
}
.mo-tile.is-cta p {
  margin-bottom: 26px;
}
.mo-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  background: var(--st-slate);
  color: #FFFFFF;
  transition: background-color 0.3s ease, color 0.3s ease, width 0.35s var(--st-ease);
}
.mo-arrow:hover {
  width: 78px;
  background: var(--st-yellow);
  color: var(--st-ink);
}
.mo-photo {
  position: relative;
  overflow: hidden;
}
.mo-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--st-ease);
}
.mo-photo:hover img {
  transform: scale(1.05);
}
.mo-photo.is-wide {
  grid-column: span 2;
}
.mo-big {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 34px;
  z-index: 3;
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: clamp(44px, 4.6vw, 78px);
  font-weight: 800;
  line-height: 0.95;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
}
.mo-big em {
  font-style: normal;
  color: var(--st-yellow);
}

/*----- 11.3 Area Scrub -----*/
.scrub-head h2 {
  margin-bottom: 18px;
}
.scrub-area-val {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 34px 0 4px;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-weight: 800;
  line-height: 0.9;
}
.scrub-area-val b {
  font-size: clamp(84px, 8.4vw, 150px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.scrub-area-val span {
  color: var(--st-accent-text);
  font-size: 44px;
}
.scrub-ft {
  display: block;
  margin-bottom: 18px;
  color: var(--st-muted);
  font-size: 14px;
  font-weight: 600;
}
.scrub-meter {
  margin-bottom: 36px;
}
.scrub-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scrub-row {
  display: grid;
  grid-template-columns: 56px 1.3fr 1.6fr 110px;
  align-items: center;
  gap: 20px;
  padding: 16px 22px;
  background: var(--st-band);
}
.scrub-row .st-ico {
  width: 54px;
  height: 54px;
}
.sr-name b {
  display: block;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}
.sr-name small {
  color: var(--st-muted);
  font-size: 13px;
}
.sr-bar {
  position: relative;
  display: block;
  height: 12px;
  background: var(--st-band-2);
}
.sr-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--st-yellow);
  transition: width 0.3s ease;
}
.sr-w1 { width: 10%; }
.sr-w2 { width: 20%; }
.sr-w3 { width: 30%; }
.sr-w4 { width: 40%; }
.sr-w5 { width: 50%; }
.sr-w6 { width: 60%; }
.sr-w7 { width: 70%; }
.sr-w8 { width: 80%; }
.sr-w9 { width: 90%; }
.sr-w10 { width: 100%; }
.sr-cost {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 28px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/*----- 11.4 Call Band & Map -----*/
.call-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  padding: 110px 70px 110px max(40px, calc((100vw - 1440px) / 2 + 12px));
}
.call-panel h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  white-space: nowrap;
}
.call-panel h2 i {
  color: var(--st-yellow);
  font-size: 0.7em;
}
.call-panel h2 a:hover {
  color: var(--st-yellow);
}
.call-panel .st-lead a {
  color: #FFFFFF;
  font-weight: 600;
}
.call-panel .st-btns {
  margin-top: 30px;
}
.call-map {
  height: 100%;
  min-height: 460px;
}
.st-map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 0;
}

/*----- 11.5 Quote Row -----*/
/* the base's last row: a photograph, a white quote tile with the yellow quotation mark, a wide photograph */
.quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  min-height: 420px;
}
.qr-photo {
  position: relative;
  overflow: hidden;
}
.qr-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qr-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 40px;
  background: var(--st-surface);
}
.qr-quote p {
  margin-bottom: 20px;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 700;
  line-height: 1.12;
}
.qr-by {
  color: var(--st-muted);
  font-size: 14px;
}
.qr-by b {
  margin-right: 8px;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 19px;
}

/*----- 11.6 Tender Steps -----*/
.tender-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.tender-steps li {
  position: relative;
  padding: 34px 28px 30px;
  background: var(--st-surface);
}
.tender-steps li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: repeating-linear-gradient(-45deg, var(--st-yellow) 0 8px, var(--st-ink) 8px 16px);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--st-ease);
}
.tender-steps li:hover::after {
  transform: scaleX(1);
}
.tender-steps b {
  display: block;
  margin-bottom: 14px;
  color: var(--st-accent-text);
  font-family: var(--st-ff-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}
.tender-steps h3 {
  margin-bottom: 8px;
}
.tender-steps p {
  margin: 0;
  font-size: 15px;
}

/*======================
12. Inner Pages
========================*/
/*----- 12.1 Info Strip -----*/
/* one strip with dividers (contact, sectors, careers, project and job facts): an icon, a small label, the value */
.info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--st-band);
}
.info-strip.is-five {
  grid-template-columns: repeat(5, 1fr);
}
.info-strip.is-six {
  grid-template-columns: repeat(6, 1fr);
}
.info-strip > li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 24px;
  border-left: 1px solid var(--st-line-2);
}
.info-strip > li:first-child {
  border-left: 0;
  box-shadow: inset 0 5px 0 var(--st-yellow);
}
.info-strip .st-ico {
  width: 52px;
  height: 52px;
}
.info-strip small {
  display: block;
  color: var(--st-muted);
  font-size: 12.5px;
}
.info-strip b {
  display: block;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
.info-strip b a:hover {
  color: var(--st-accent-text);
}
.info-strip .st-open .st-dot {
  margin-right: 8px;
}

/*----- 12.2 About -----*/
.about-intro h2 {
  margin-bottom: 20px;
}
.about-intro .st-review {
  margin-top: 10px;
}
/* the base's tabs over a yellow panel */
.at-list {
  display: flex;
  gap: 4px;
}
.at-list button {
  height: 48px;
  padding: 0 22px;
  background: var(--st-ink);
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: 18px;
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.at-list button.is-active,
.at-list button:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.at-panel {
  padding: 34px 34px 26px;
}
.at-panel p {
  font-size: 16.5px;
}
/* the base's dark service tiles over faint photographs, a title column beside them */
.svt-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 80px 40px 80px max(40px, calc((100vw - 1440px) / 2 + 12px));
}
.svt-head h2 {
  margin-bottom: 14px;
}
.svt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.svt-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  padding: 70px 56px;
  background: var(--st-night-2);
}
.svt-tile.is-2 {
  background: var(--st-night);
}
.svt-tile img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  transition: opacity 0.6s ease, transform 1s var(--st-ease);
}
.svt-tile:hover img {
  opacity: 0.3;
  transform: scale(1.05);
}
.svt-tile h3 {
  margin-bottom: 12px;
}
.svt-tile p {
  max-width: 340px;
  margin-bottom: 26px;
}
/* the story: five years on one rule */
.history-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.history-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 54px;
  height: 4px;
  background: repeating-linear-gradient(-45deg, var(--st-yellow) 0 8px, var(--st-ink) 8px 16px);
}
.history-line li {
  position: relative;
  padding-top: 82px;
}
.history-line li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 46px;
  width: 20px;
  height: 20px;
  background: var(--st-yellow);
  box-shadow: 0 0 0 6px var(--st-bg);
}
.history-line b {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--st-accent-text);
  font-family: var(--st-ff-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}
.history-line h3 {
  margin-bottom: 8px;
}
.history-line p {
  margin: 0;
  font-size: 15px;
}

/*----- 12.3 Photos & Panels -----*/
.routes-photo,
.benefits-photo,
.profile-photo,
.ppe-photo {
  aspect-ratio: 4 / 3;
}
.profile-photo {
  aspect-ratio: 1 / 1.05;
}
.ppe-photo {
  margin-top: 30px;
  aspect-ratio: 16 / 10;
}
.routes-photo img,
.benefits-photo img,
.profile-photo img,
.ppe-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-photo img {
  object-position: center top;
}
.routes-area .st-rows,
.benefits-rows {
  margin: 26px 0 34px;
}
.benefits-rows li b,
.ppe-list li b {
  color: var(--st-accent-text);
}
.apprentice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 6px solid var(--st-yellow);
}
.apprentice b {
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: 22px;
}

/*----- 12.4 Service Details -----*/
.sd-photo {
  margin-bottom: 40px;
  aspect-ratio: 16 / 9;
}
.sd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-body h2 {
  margin-bottom: 18px;
}
.sd-body h3 {
  margin: 44px 0 16px;
}
.phase-card {
  display: flex;
  gap: 18px;
  height: 100%;
  padding: 26px 24px;
  background: var(--st-band);
  border-top: 4px solid var(--st-yellow);
}
.phase-card h4 {
  margin-bottom: 6px;
}
.phase-card p {
  margin-bottom: 8px;
  font-size: 14.5px;
}
.phase-card .pc-meta {
  color: var(--st-accent-text);
  font-size: 13px;
  font-weight: 600;
}
.file-link {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 14px 18px;
  background: var(--st-surface);
  color: var(--st-heading);
}
.file-link i {
  color: var(--st-red-text);
  font-size: 26px;
}
.file-link b {
  display: block;
  font-weight: 600;
}
.file-link small {
  color: var(--st-muted);
}
.file-link:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
}

/*----- 12.5 Sectors & Finishes -----*/
.sector-rows {
  display: flex;
  flex-direction: column;
  gap: 90px;
}
.sector-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 70px;
}
.sector-row.is-flip .sr-photo {
  order: 2;
}
.sr-photo {
  aspect-ratio: 4 / 3;
}
.sr-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sr-copy .st-ico {
  display: flex;
  margin-bottom: 18px;
}
.sr-copy h2 {
  margin-bottom: 16px;
}
.sr-copy .st-rows {
  margin: 22px 0 16px;
}
.sr-copy .st-meter {
  margin-bottom: 30px;
}
.finish-card {
  position: relative;
  height: 100%;
  padding: 40px 30px 34px;
  background: var(--st-surface);
  border-bottom: 5px solid var(--st-yellow);
  transition: transform 0.45s var(--st-ease), box-shadow 0.45s var(--st-ease);
}
.finish-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--st-shadow-lg);
}
.fc-factor {
  display: block;
  margin-bottom: 14px;
  color: var(--st-accent-text);
  font-family: var(--st-ff-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}
.finish-card h3 {
  margin-bottom: 10px;
}
.fc-rate {
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--st-line);
  font-size: 14px;
}
.fc-rate b {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 20px;
}

/*----- 12.6 Rate Card -----*/
.rate-wrap {
  margin-bottom: 26px;
}
.rate-table {
  width: 100%;
  border-collapse: collapse;
}
.rate-table th,
.rate-table td {
  padding: 20px 22px;
  border-bottom: 1px solid var(--st-line);
  text-align: left;
  vertical-align: middle;
}
.rate-table thead th {
  background: var(--st-ink);
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: 18px;
  font-weight: 700;
}
.rate-table thead th:nth-child(3) {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.rate-table tbody th {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 20px;
  font-weight: 700;
}
.rate-table tbody th .st-ico {
  width: 44px;
  height: 44px;
  margin-right: 14px;
  vertical-align: middle;
}
.rate-table tbody th span {
  display: block;
  margin: 4px 0 0 58px;
  color: var(--st-muted);
  font-family: var(--st-ff-body);
  font-size: 13px;
  font-weight: 400;
}
.rate-table td b {
  display: block;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 22px;
  font-weight: 700;
}
.rate-table td small {
  color: var(--st-muted);
  font-size: 12.5px;
}
.rate-table tbody tr:hover {
  background: var(--st-band);
}
.rate-table td:nth-child(3) {
  background: rgba(var(--st-yellow-rgb), 0.12);
}
.rate-note {
  max-width: 900px;
  color: var(--st-muted);
  font-size: 14.5px;
}

/*----- 12.7 Team, Profile & Gallery -----*/
.profile-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 30px;
}
.profile-card > b {
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: 24px;
}
.profile-card .pp-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}
.profile-card .pp-row b {
  color: var(--st-yellow);
}
.profile-rows {
  margin: 24px 0 34px;
}
.profile-sub {
  margin-bottom: 18px;
}
.skill-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 30px;
  margin-bottom: 36px;
}
.skill {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  font-size: 14.5px;
}
.skill b {
  color: var(--st-heading);
}
.skill .st-meter {
  flex-basis: 100%;
}
.gal-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--st-ease);
}
.gal-item:hover img {
  transform: scale(1.06);
}
.gal-cap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  padding: 10px 16px;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 13.5px;
  font-weight: 600;
  transform: translateY(100%);
  transition: transform 0.4s var(--st-ease);
}
.gal-item:hover .gal-cap,
.gal-item:focus-visible .gal-cap {
  transform: none;
}

/*----- 12.8 Contact -----*/
.contact-rows {
  margin: 26px 0 30px;
}
.map-area .st-map {
  min-height: 480px;
}

/*----- 12.9 Careers -----*/
.roles-toolbar,
.projects-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 30px;
}
.roles-toolbar .st-filter-tabs,
.projects-toolbar .st-filter-tabs {
  margin-bottom: 0;
}
.pt-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pt-tools .widget-search {
  width: 250px;
}
.pt-tools .widget-search input {
  height: 48px;
}
.pt-tools .widget-search .fs-ico {
  height: 48px;
}
.pt-tools .st-select {
  width: 200px;
}
.job-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.job-row {
  display: grid;
  grid-template-columns: 56px 1.4fr 2fr auto auto;
  align-items: center;
  gap: 26px;
  padding: 26px 28px;
  background: var(--st-band);
  transition: transform 0.4s var(--st-ease), box-shadow 0.4s var(--st-ease);
}
.st-bg-band .job-row {
  background: var(--st-surface);
}
.job-row:hover {
  transform: translateY(-4px);
  box-shadow: var(--st-shadow);
}
.job-row .st-ico {
  width: 54px;
  height: 54px;
}
.job-row .st-level {
  top: 12px;
  right: 12px;
}
.jr-main h3 {
  margin: 8px 0 4px;
}
.jr-main h3 a:hover {
  color: var(--st-accent-text);
}
.jr-where {
  color: var(--st-muted);
  font-size: 14px;
}
.jr-where i {
  margin-right: 8px;
  color: var(--st-accent-text);
}
.jr-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.jr-facts small {
  display: block;
  color: var(--st-muted);
  font-size: 12.5px;
}
.jr-facts b {
  color: var(--st-heading);
  font-size: 14.5px;
  font-weight: 600;
}
.jr-left {
  min-width: 110px;
  color: var(--st-green-text);
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
}
.jr-left.is-soon {
  color: var(--st-red-text);
}
.jd-facts {
  margin-bottom: 44px;
}
.jd-body h2 {
  margin-bottom: 18px;
}
.jd-body h3 {
  margin: 40px 0 14px;
}
.jd-body .st-rows li b i {
  color: var(--st-accent-text);
}
.jd-apply {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.apply-form h3 {
  margin-bottom: 20px;
}
.jd-left {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.jd-left .st-eyebrow {
  margin: 0;
}
.jd-left b {
  color: var(--st-yellow);
  font-family: var(--st-ff-display);
  font-size: 26px;
}

/*----- 12.10 Tables & Client Portal -----*/
.table-wrap {
  margin-bottom: 30px;
}
.st-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.st-table th,
.st-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--st-line);
  text-align: left;
}
.st-table thead th {
  background: var(--st-ink);
  color: #FFFFFF;
  font-weight: 600;
}
.st-table tbody th {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 20px;
}
.st-table td b {
  color: var(--st-heading);
}
.dash-side {
  position: sticky;
  top: 110px;
}
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--st-line);
}
.dash-who img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.dash-who h2 {
  margin: 0;
}
.dash-who span {
  color: var(--st-muted);
  font-size: 13.5px;
}
.dash-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--st-band);
  color: var(--st-heading);
  font-weight: 600;
  text-align: left;
  transition: background-color 0.3s ease;
}
.dash-tabs button .st-ico {
  width: 36px;
  height: 36px;
}
.dash-tabs button.is-active,
.dash-tabs button:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
}
[data-theme="dark"] .dash-tabs button.is-active .ico-night,
[data-theme="dark"] .dash-tabs button:hover .ico-night {
  display: none;
}
[data-theme="dark"] .dash-tabs button.is-active .ico-day,
[data-theme="dark"] .dash-tabs button:hover .ico-day {
  display: block;
}
.dash-panel h2 {
  margin-bottom: 24px;
}
.dash-btns {
  margin-top: 30px;
}
.portal-project {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  padding: 28px;
  background: var(--st-band);
}
.portal-project img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}
.portal-project h3 {
  margin: 12px 0 4px;
}
.portal-project .pp-row {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 8px;
  font-size: 14px;
}
.portal-project .pp-row b {
  color: var(--st-heading);
}
.portal-project .st-rows {
  margin-top: 18px;
}

/*----- 12.11 Error Page -----*/
/* a site board behind hazard tape: the page is not on the drawings */
.error-board {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  padding: 40px;
  background: var(--st-band);
  overflow: hidden;
}
.eb-code {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: clamp(120px, 16vw, 230px);
  font-weight: 800;
  line-height: 0.9;
}
.eb-note {
  margin-top: 10px;
  color: var(--st-accent-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.eb-tape {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 40px;
  background: repeating-linear-gradient(-45deg, var(--st-yellow) 0 18px, var(--st-ink) 18px 36px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}
.eb-tape.is-top {
  top: 16%;
  transform: rotate(-6deg);
}
.eb-tape.is-bottom {
  bottom: 14%;
  transform: rotate(4deg);
}
.error-board .st-ico {
  position: absolute;
  right: 30px;
  bottom: 24px;
  width: 80px;
  height: 80px;
}
.st-error h1 {
  margin-bottom: 18px;
}

/*======================
13. Build Pages
========================*/
/*----- 13.1 Cost Estimator -----*/
.est-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.est-step {
  min-width: 0;
  margin: 0;
  border: 0;
}
.est-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  float: none;
  width: auto;
  margin: 0 0 24px;
  padding: 0;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
.est-legend b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 20px;
  font-weight: 800;
}
.est-area {
  font-family: var(--st-ff-display);
  font-size: 26px;
  font-weight: 700;
}
.est-storeys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
}
.est-storeys .st-flabel {
  margin: 0;
}
.est-storeys small {
  color: var(--st-muted);
  font-size: 13px;
}
.est-step .st-flabel {
  margin-top: 6px;
}
.est-step .chip-row {
  margin-bottom: 18px;
}
.choice-list.is-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.choice-list.is-grid .choice-card {
  margin: 0;
}
.choice-list.is-zones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* the result: charcoal, stays in view beside the form */
.est-result {
  position: sticky;
  top: 106px;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 40px 34px;
  border-top: 6px solid var(--st-yellow);
}
.est-total {
  display: block;
  margin: 4px 0 6px;
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: clamp(54px, 4.6vw, 76px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.est-range {
  display: block;
  font-size: 14.5px;
}
.est-range b {
  color: var(--st-yellow);
  font-weight: 600;
}
.est-summary {
  display: block;
  margin-top: 6px;
  color: var(--st-muted);
  font-size: 13.5px;
}
.est-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 24px 0 30px;
}
.est-kpis > div {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.06);
}
.est-kpis small {
  display: block;
  color: var(--st-muted);
  font-size: 12.5px;
}
.est-kpis b {
  display: block;
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: 22px;
  font-weight: 700;
}
.est-result h3 {
  margin: 26px 0 10px;
}
.est-result .st-rows li {
  padding: 9px 0;
  font-size: 14.5px;
}
.est-phases li {
  display: grid;
  grid-template-columns: 120px 1fr 90px;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--st-line);
  font-size: 14px;
}
.ep-name {
  color: #FFFFFF;
  font-weight: 600;
  line-height: 1.3;
}
.ep-name small {
  display: block;
  color: var(--st-muted);
  font-size: 12px;
  font-weight: 400;
}
.ep-bar {
  position: relative;
  display: flex;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
}
.ep-bar span {
  display: block;
  height: 100%;
  background: var(--st-yellow);
}
.est-phases b {
  color: #FFFFFF;
  text-align: right;
}
.est-result .st-btns {
  margin-top: 30px;
}
.est-note {
  margin: 20px 0 0;
  color: var(--st-muted);
  font-size: 12.5px;
}

/*----- 13.2 Tender Wizard -----*/
.wiz-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 24px;
}
.wiz-steps button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 14px 16px;
  background: var(--st-band);
  color: var(--st-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.wiz-steps button b {
  flex-shrink: 0;
  font-family: var(--st-ff-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--st-muted);
}
.wiz-steps button.is-done b {
  color: var(--st-accent-text);
}
.wiz-steps button.is-current {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.wiz-steps button.is-current b {
  color: var(--st-ink);
}
.wiz-steps button:hover {
  background: var(--st-ink);
  color: #FFFFFF;
}
.wiz-pane {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wiz-pane > legend {
  float: none;
  width: auto;
  margin-bottom: 24px;
  padding: 0;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-weight: 700;
}
.wiz-pane .st-flabel {
  margin-top: 8px;
}
.wiz-pane .chip-row {
  margin-bottom: 16px;
}
.choice-list.is-invalid .choice-card {
  box-shadow: inset 0 -3px 0 var(--st-red);
}
.wiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--st-line);
}
.wiz-count {
  color: var(--st-muted);
  font-family: var(--st-ff-display);
  font-size: 20px;
  font-weight: 700;
}
.wiz-done {
  text-align: center;
}
.wiz-done .st-rows {
  max-width: 460px;
  margin: 20px auto 30px;
  text-align: left;
}
.done-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 28px;
}
.tender-side {
  position: sticky;
  top: 106px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tender-side .st-panel.is-night h3 {
  margin-bottom: 14px;
}
.tender-side .st-rows li {
  font-size: 14px;
}
.tender-promise {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.est-carried {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  padding: 20px 22px;
  background: rgba(var(--st-yellow-rgb), 0.16);
  border-left: 5px solid var(--st-yellow);
}
.est-carried b {
  display: block;
  color: var(--st-heading);
}
.est-carried span {
  font-size: 14px;
}
.review-rows li b {
  max-width: 60%;
}

/*----- 13.3 Projects Page -----*/
.sector-panel {
  position: sticky;
  top: 106px;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 30px;
  border-top: 6px solid var(--st-yellow);
}
.sector-panel h2 {
  margin-bottom: 6px;
}
.sector-panel p {
  font-size: 14px;
}
.panel-rows {
  margin: 18px 0 26px;
}
.panel-rows li {
  padding: 10px 0;
  font-size: 14px;
}
.panel-rows li b {
  color: #FFFFFF;
}

/*----- 13.4 Project Details -----*/
.pd-facts {
  margin-bottom: 30px;
}
.pd-facts > li {
  padding: 22px 20px;
}
.pd-progress {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 70px;
  padding: 36px 40px;
}
.pdp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 30px;
  margin-bottom: 20px;
}
.pdp-head h2 {
  margin: 0;
}
.pdp-head h2 span {
  color: var(--st-yellow);
}
.pdp-dates {
  display: flex;
  gap: 30px;
  font-size: 14px;
}
.pdp-dates b {
  display: block;
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: 20px;
}
.st-meter.is-big {
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
}
.st-meter.is-big span {
  background: repeating-linear-gradient(-45deg, var(--st-yellow) 0 10px, #E0A40C 10px 20px);
}
.pdp-phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 26px;
}
.pdp-phases li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.05);
  opacity: 0.55;
}
.pdp-phases li .st-ico {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
}
.pdp-phases li b {
  color: #FFFFFF;
  font-family: var(--st-ff-display);
  font-size: 20px;
}
.pdp-phases li small {
  font-size: 12.5px;
}
.pdp-phases li.is-done {
  opacity: 1;
}
.pdp-phases li.is-now {
  opacity: 1;
  background: rgba(var(--st-yellow-rgb), 0.16);
  box-shadow: inset 0 4px 0 var(--st-yellow);
}
.pd-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 220px 220px 220px;
  gap: 10px;
  margin-bottom: 44px;
}
.pd-gallery-grid a {
  position: relative;
  display: block;
  overflow: hidden;
}
.pd-gallery-grid .pg-main {
  grid-row: span 3;
}
.pd-gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--st-ease);
}
.pd-gallery-grid a:hover img {
  transform: scale(1.05);
}
.pd-body h2 {
  margin-bottom: 18px;
}
.pd-body h3 {
  margin: 40px 0 14px;
}
.pd-manager {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.pd-manager img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.pd-manager b {
  display: block;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 20px;
}
.pd-manager span {
  font-size: 13.5px;
}
.pd-nav {
  margin-top: 60px;
}

/*----- 13.5 Safety Record -----*/
.kpi-board {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 4px;
}
.kpi {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px 28px;
  background: var(--st-band);
}
.kpi small {
  color: var(--st-muted);
  font-size: 13px;
  font-weight: 600;
}
.kpi b {
  margin: 6px 0 4px;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi b.is-small {
  font-size: 24px;
  line-height: 1.2;
}
.kpi span {
  font-size: 13.5px;
}
.kpi.is-yellow {
  background: var(--st-yellow);
}
.kpi.is-yellow small,
.kpi.is-yellow span {
  color: #2B2A26;
}
.kpi.is-lead b {
  font-size: clamp(80px, 7.4vw, 124px);
}
.safety-table td:last-child {
  min-width: 260px;
}
.sy-bar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sy-bar .st-meter {
  flex: 1;
  height: 10px;
}
.sy-bar b {
  min-width: 40px;
}
.ppe-panel {
  border-top: 6px solid var(--st-yellow);
}
.ppe-panel .st-ico {
  margin-bottom: 14px;
}
.ppe-panel h3 {
  margin-bottom: 16px;
}
.ppe-list {
  margin-bottom: 18px;
}
.cert {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 36px 24px;
  background: var(--st-band);
  text-align: center;
}
.cert .st-ico {
  margin-bottom: 14px;
}
.cert b {
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 24px;
}
.cert span {
  font-size: 14px;
}

/*======================
14. Plant & Tool Hire
========================*/
/*----- 14.1 Shop Grid -----*/
.side-posts .thumb.is-product {
  background: var(--st-shelf);
}
.side-posts .thumb.is-product img {
  object-fit: contain;
}
.tr-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--st-accent-text);
}
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--st-line-2);
}
.shop-toolbar p {
  margin: 0;
}
.shop-toolbar p b {
  font-size: 22px;
  font-weight: 500;
  color: var(--st-heading);
}
.shop-sort {
  width: 230px;
}
[data-shop-grid] > .is-hidden {
  display: none;
}
/*----- 14.2 Product Page -----*/
.pd-main {
  position: relative;
  padding: 20px;
  background: var(--st-shelf);
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.pd-thumbs button {
  padding: 4px;
  background: var(--st-shelf);
  box-shadow: inset 0 0 0 1px var(--st-line-2);
  transition: box-shadow 0.3s var(--st-ease);
}
.pd-thumbs button.is-active,
.pd-thumbs button:hover {
  box-shadow: inset 0 0 0 2px var(--st-yellow);
}
.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.pd-info h2 {
  margin: 6px 0 14px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
}
.pd-price {
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--st-accent-text);
}
.pd-price del {
  margin-left: 10px;
  font-size: 26px;
  color: var(--st-muted);
}
.pd-info .st-kv {
  margin: 24px 0 30px;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.pd-buy .st-btn {
  height: 54px;
}
.pd-wish {
  width: 54px;
  height: 54px;
}
.pd-wish.is-on {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.pd-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14.5px;
}
.pd-note i {
  font-size: 26px;
  color: var(--st-accent-text);
}
.pd-tabs {
  margin-top: 80px;
}
.pd-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--st-line-2);
}
.pd-tablist button {
  position: relative;
  padding: 0 0 18px;
  font-size: 19px;
  font-weight: 500;
  color: var(--st-muted);
}
.pd-tablist button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--st-yellow);
  transform: scaleX(0);
  transition: transform 0.4s var(--st-ease);
}
.pd-tablist button.is-active {
  color: var(--st-heading);
}
.pd-tablist button.is-active::after {
  transform: scaleX(1);
}
.pd-tabs [role="tabpanel"] {
  max-width: 900px;
}
.review-list li {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--st-line);
}
.review-list img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.review-list b {
  margin-right: 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--st-heading);
}
.review-list p {
  margin: 6px 0 0;
}

/*----- 14.3 Bag, Checkout & Wishlist -----*/
.bag-lines {
  border-top: 1px solid var(--st-line-2);
}
.bag-line {
  display: grid;
  grid-template-columns: 110px 1fr auto auto 40px;
  align-items: center;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--st-line-2);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 110px 1fr auto 40px;
}
.bl-img {
  padding: 4px;
  background: var(--st-shelf);
  box-shadow: inset 0 0 0 1px var(--st-line);
}
.bl-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.bl-cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-accent-text);
}
.bl-body h4 {
  margin: 2px 0 4px;
  font-size: 20px;
}
.bl-body h4 a {
  color: var(--st-heading);
}
.bl-price {
  font-size: 14px;
  color: var(--st-muted);
}
.bl-total {
  min-width: 90px;
  font-size: 20px;
  font-weight: 500;
  text-align: right;
  color: var(--st-heading);
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--st-band);
  color: var(--st-heading);
  font-size: 13px;
  transition: background-color 0.3s var(--st-ease), color 0.3s var(--st-ease);
}
.bl-remove:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  position: relative;
  display: flex;
  gap: 10px;
}
.coupon-form input {
  width: 220px;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--st-line-2);
  background: var(--st-surface);
  color: var(--st-heading);
  font-family: var(--st-ff-body);
  font-size: 15px;
  outline: none;
}
.coupon-form input:focus {
  border-color: var(--st-yellow);
}
.coupon-form .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  white-space: nowrap;
}
.order-summary {
  position: sticky;
  top: 120px;
}
.ship-meter {
  height: 4px;
  overflow: hidden;
  background: var(--st-line);
}
.ship-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--st-yellow);
  transition: width 0.8s var(--st-ease);
}
.ship-note {
  margin: 10px 0 20px;
  font-size: 14px;
}
.ship-note b {
  color: var(--st-accent-text);
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--st-line);
  font-size: 15px;
}
.ol-img {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  padding: 2px;
  background: var(--st-shelf);
  box-shadow: inset 0 0 0 1px var(--st-line);
}
.ol-img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.ol-img b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 11px;
}
.ol-name {
  flex: 1 1 auto;
  color: var(--st-heading);
}
.order-lines li > b {
  font-weight: 500;
  color: var(--st-heading);
}
.order-summary .st-kv {
  margin-top: 18px;
}
.choice-list.is-pay {
  margin: 10px 0 20px;
}
.pay-choice {
  padding: 14px 56px 14px 18px;
}
.co-terms {
  margin-bottom: 20px;
}
.cart-empty,
.order-done {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 50px;
  text-align: center;
}
.cart-empty > i {
  margin-bottom: 20px;
  font-size: 46px;
  color: var(--st-accent-text);
}
.cart-empty h2,
.order-done h2 {
  margin-bottom: 12px;
}
.order-done p b {
  color: var(--st-accent-text);
}

/*----- 14.4 Toast -----*/
.st-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--st-night);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  color: var(--st-paper);
  font-size: 14.5px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity 0.4s var(--st-ease), transform 0.4s var(--st-ease), visibility 0.4s;
}
.st-toast i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 11px;
}
.st-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/*----- 14.5 Equipment Cards -----*/
/* the depot's card: the packshot on a white shelf, a wishlist heart, the hire button sliding up on hover */
.product-card {
  position: relative;
  height: 100%;
  background: var(--st-surface);
  transition: transform 0.45s var(--st-ease), box-shadow 0.45s var(--st-ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--st-shadow-lg);
}
.pc-media {
  position: relative;
  overflow: hidden;
  background: var(--st-shelf);
}
.pc-img {
  display: block;
}
.pc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 26px;
  transition: transform 0.8s var(--st-ease);
}
.product-card:hover .pc-img img {
  transform: scale(1.05);
}
.pc-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 3;
  padding: 4px 10px;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 12px;
  font-weight: 600;
}
.pc-badge.is-ink {
  background: var(--st-ink);
  color: #FFFFFF;
}
.product-card .st-level {
  top: 16px;
  right: 64px;
}
.pc-wish {
  position: absolute;
  right: 14px;
  top: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--st-band);
  color: var(--st-ink);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pc-wish:hover,
.pc-wish.is-on {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.pc-add {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  background: var(--st-ink);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(100%);
  transition: transform 0.4s var(--st-ease), background-color 0.3s ease, color 0.3s ease;
}
.product-card:hover .pc-add,
.pc-add:focus-visible {
  transform: none;
}
.pc-add:hover {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.pc-body {
  padding: 20px 22px 24px;
  border-top: 1px solid var(--st-line);
}
.pc-cat {
  display: block;
  margin-bottom: 4px;
  color: var(--st-accent-text);
  font-size: 12.5px;
  font-weight: 600;
}
.pc-body h3 {
  margin-bottom: 6px;
}
.pc-body h3 a:hover {
  color: var(--st-accent-text);
}
.pc-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 8px;
  color: var(--st-heading);
  font-family: var(--st-ff-display);
  font-size: 23px;
  font-weight: 700;
}
.pc-price small {
  color: var(--st-muted);
  font-family: var(--st-ff-body);
  font-size: 13px;
  font-weight: 400;
}
.pc-sep {
  width: 1px;
  height: 14px;
  background: var(--st-line-2);
}

/*----- 14.6 Hire Lines -----*/
.bag-line.has-days {
  grid-template-columns: 96px 1fr auto auto auto 40px;
}
.bl-days {
  min-width: 112px;
  color: var(--st-muted);
  font-size: 14px;
  text-align: center;
}
.st-qty.is-days input {
  width: 46px;
}
.ol-name small {
  display: block;
  color: var(--st-muted);
  font-size: 13px;
}

/*======================
15. Blog & Account
========================*/
/*----- 15.1 Blog List -----*/
/* Structa's blog: wide photo posts with a coral date tile, and coloured quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--st-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.post-date b {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 15, 0.28);
}
.post-thumb.is-video .st-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .slider-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--st-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .st-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--st-accent-text);
}
.bp-body h3 a {
  color: var(--st-heading);
}
.bp-body h3 a:hover {
  color: var(--st-accent-text);
}
.bp-body .st-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the quote post: a night card with the title set large in light caps and a faint quote mark behind it */
.blog-post.is-quote {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
  background: var(--st-night);
  --st-heading: #EEF0F2;
}
.blog-post.is-quote .pcd-meta,
.blog-post.is-quote .pcd-meta a {
  color: var(--st-yellow-soft);
}
.blog-post.is-quote .pcd-meta a:hover {
  color: #EEF0F2;
}
.blog-post.is-quote h3 {
  position: relative;
  max-width: 560px;
  margin: 12px 0 18px;
}
.blog-post.is-quote h3 a {
  color: #EEF0F2;
}
.blog-post.is-quote h3 a:hover {
  color: var(--st-yellow-soft);
}
.blog-post .nc-by {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-post.is-quote .nc-by {
  color: rgba(238, 240, 242, 0.78);
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: 30px;
  color: rgba(238, 240, 242, 0.1);
  font-size: 120px;
}

/*----- 15.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .st-rule {
  margin: 20px 0 26px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--st-band-2);
  border-inline-start: 4px solid var(--st-yellow);
}
.article-quote p {
  margin-bottom: 14px;
  color: var(--st-heading);
  font-size: 24px;
  line-height: 1.5;
}
.article-quote cite {
  color: var(--st-accent-text);
  font-size: 42px;
  font-style: normal;
  line-height: 1;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--st-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--st-line);
}
.article-rows dt {
  color: var(--st-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--st-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--st-yellow);
  color: var(--st-ink);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--st-night);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  background: var(--st-band);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .st-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--st-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--st-accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-nav b {
  font-weight: 500;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--st-band);
  color: var(--st-accent-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.post-nav .pn-all {
  color: var(--st-accent-text);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--st-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--st-heading);
  font-size: 18px;
  font-weight: 500;
}
.comment-list li > div > span {
  color: var(--st-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 15.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--st-surface);
  box-shadow: var(--st-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: var(--st-night);
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(8, 11, 15, 0.1) 0%, rgba(8, 11, 15, 0.55) 45%, rgba(8, 11, 15, 0.95) 100%);
}
.account-side > .st-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.account-side .as-seal {
  width: 96px;
}
.as-copy {
  margin-top: auto;
}
.as-copy .st-script {
  color: var(--st-yellow);
  font-size: 44px;
  line-height: 1;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .st-avatars .faces img,
.as-copy .st-avatars .more {
  border-color: var(--st-night);
}
.account-form {
  padding: 56px 54px;
}
.account-form .st-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--st-accent-text);
  font-weight: 500;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--st-accent-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--st-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--st-chilli);
  transition: width 0.4s var(--st-ease), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--st-yellow);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--st-leaf);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--st-muted);
  font-size: 13px;
}

/*----- 15.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other: Structa's split, with the seal turning on the seam */
.st-bare-page {
  min-height: 100vh;
  background: var(--st-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-seal {
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 2;
  width: 140px;
  margin-top: -70px;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner > .st-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 58px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .st-rule {
  margin: 24px 0;
}
.bare-inner .st-lead {
  max-width: 560px;
}
.bare-inner .st-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--st-accent-text);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line .st-ico {
  width: 58px;
  height: 58px;
}
.bare-line small {
  display: block;
  color: var(--st-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--st-heading);
  font-size: 22px;
  font-weight: 500;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  background: var(--st-surface);
  color: var(--st-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.launch-count .is-gold {
  background: var(--st-yellow);
  color: var(--st-ink);
}
.launch-count b {
  font-family: var(--st-ff-body);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: var(--st-surface);
  color: var(--st-heading);
  font-family: var(--st-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--st-yellow);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.mini-nav .slider-arrow {
  border-color: transparent;
  background: var(--st-paper);
  color: var(--st-ink);
}

/*======================
16. Page Title
========================*/
/* two of the base's page titles: "split" puts a charcoal title panel beside a site photograph (the about page);
   "plain" is a charcoal band with the title and the breadcrumb centred (the project and shop pages). The rebar mesh
   drifts in the charcoal behind the copy */
.st-subheader {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--st-night);
  --st-heading: #FFFFFF;
  --st-text: rgba(255, 255, 255, 0.84);
  --st-accent-text: #FDB913;
  --gl-1: #23272A;
  --gl-3: #000000;
  --gl-alpha: 0.28;
  color: var(--st-text);
}
.st-subheader.is-split {
  display: flex;
  min-height: 500px;
}
.st-subheader .sub-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 40%;
  padding: 100px 60px 100px max(40px, calc((100vw - 1440px) / 2 + 12px));
  overflow: hidden;
}
.st-subheader .sub-photo {
  position: relative;
  width: 60%;
  overflow: hidden;
}
.st-subheader .sub-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-subheader .sub-photo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: var(--st-yellow);
}
.st-subheader h1 {
  margin-bottom: 16px;
  color: #FFFFFF;
  font-size: clamp(44px, 4.6vw, 80px);
  line-height: 1;
}
.st-subheader .st-lead {
  max-width: 460px;
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.84);
}
.st-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}
.st-crumbs a {
  color: #FFFFFF;
}
.st-crumbs a:hover {
  color: var(--st-yellow);
}
.st-crumbs i {
  color: var(--st-yellow);
  font-size: 9px;
}
.st-crumbs span {
  color: var(--st-yellow);
}
.st-subheader.is-plain {
  padding: 110px 0 100px;
  text-align: center;
}
.st-subheader.is-plain .st-lead {
  margin: 0 auto 22px;
}
.st-subheader.is-plain .st-crumbs {
  justify-content: center;
}

/*======================
17. Footer
========================*/
/* the base's black footer in four columns over a darker copyright bar; Structa adds the yard on top, where a
   knuckle-boom crane arm picks steel beams and stacks them (WebGL, solved by inverse kinematics each frame) */
.st-footer {
  position: relative;
  isolation: isolate;
  background: var(--st-black);
  --gl-1: #0D0F10;
  --gl-2: #FDB913;
  --gl-3: #FFFFFF;
  --gl-alpha: 1;
}
.footer-yard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-yard .yard-scene {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
}
.footer-yard .yard-scene .st-gl {
  z-index: 0;
}
.yard-copy {
  position: relative;
  z-index: 2;
  max-width: 520px;
  padding: 120px 0 120px;
}
.yard-copy h2 {
  margin-bottom: 16px;
}
.yard-copy p {
  margin-bottom: 28px;
}
.footer-main {
  padding: 80px 0 64px;
}
.st-footer .widget > h2 {
  position: relative;
  margin-bottom: 26px;
  padding-bottom: 14px;
}
.st-footer .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--st-yellow);
}
.footer-brand .footer-logo img {
  height: 40px;
  width: auto;
}
.footer-brand p {
  margin: 22px 0 24px;
}
.footer-links li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--st-text);
}
.footer-links li a i {
  color: var(--st-yellow);
  font-size: 10px;
  transition: transform 0.3s var(--st-ease);
}
.footer-links li a:hover {
  color: var(--st-yellow);
}
.footer-links li a:hover i {
  transform: translateX(4px);
}
.footer-contact li {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}
.footer-contact li i {
  width: 16px;
  margin-top: 7px;
  color: var(--st-yellow);
  font-size: 14px;
}
.footer-contact li a:hover {
  color: var(--st-yellow);
}
.footer-open {
  margin-bottom: 14px;
  color: #FFFFFF;
  font-weight: 500;
}
.footer-hours li {
  padding: 8px 0;
  font-size: 14.5px;
}
.footer-bottom {
  background: #161819;
}
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 14px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--st-yellow);
}
.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}