/* ==========================================================================
   SLK Security Solutions — Home page concept C: Proof-first
   Every design value lives in :root below. The rest of the file uses only
   these variables (plus 0, 1, 100% and auto, which aren't design values).
   Colors: docs/design-inputs.md §1.1 (sampled from the logo; confirm with the designer).
   Type: §1.2 (Archivo for display, Open Sans for body and UI).
   ========================================================================== */

:root {
  /* Color: brand */
  --color-ink: #100F0F;              /* SLK Black: logo, headings, body text */
  --color-charcoal: #2B292A;         /* dark sections */
  --color-brand: #D5692C;            /* SLK Orange: rules, bands, large type, focus, button fill with ink text */
  --color-brand-text: #A84E1C;       /* orange for small text on white or paper */
  --color-brand-on-dark: #E07A3E;    /* orange for text and marks on charcoal */

  /* Color: warm neutrals */
  --color-white: #FFFFFF;
  --color-paper: #F4F2EE;
  --color-line: #E2DED8;
  --color-line-strong: #C9C2B9;      /* hairlines that carry structure (systems grid, rows) */
  --color-stone: #D4C4B4;            /* image placeholders */
  --color-warm-gray: #6B6560;        /* secondary text */
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #CFC9C2;
  --color-line-on-dark: #4A4748;     /* solid hairline on charcoal (12% white equivalent, flat) */
  --color-flag-bg: #F7E4D6;          /* A-24 staging highlight for [CLIENT REVIEW] */
  --color-flag-text: #100F0F;
  --color-flag-rule: #A84E1C;

  /* Type: families */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Arial, sans-serif;
  --font-stretch-display: 112%;
  --font-stretch-wide: 125%;
  --font-stretch-normal: 100%;

  /* Type: weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type: sizes (fluid between 390 and 1440) */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-md: 19px;
  --text-lg: 22px;
  --text-xl: clamp(22px, 1.4vw + 16px, 28px);
  --text-2xl: clamp(28px, 2.2vw + 19px, 44px);
  --text-display: clamp(40px, 4.2vw + 24px, 80px);

  /* Type: line height and tracking */
  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.6;
  --tracking-display: -0.015em;
  --tracking-eyebrow: 0.08em;
  --tracking-tag: 0.06em;

  /* Spacing (4 px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-section: clamp(64px, 6vw + 40px, 136px);   /* "generous white", §1.4 */
  --space-section-compact: clamp(40px, 3vw + 28px, 72px);

  /* Layout */
  --container-max: 1280px;
  --container-gutter: clamp(16px, 3vw, 40px);
  --header-height: 80px;
  --measure: 62ch;
  --measure-narrow: 44ch;
  --measure-heading: 22ch;
  --measure-display: 15ch;
  --menu-width: 280px;
  --card-width: 560px;
  --card-overlap: 280px;
  --media-max-mobile: 420px;

  /* Photo ratios (A-20 shot list) */
  --ratio-hero: 4 / 5;
  --ratio-portrait: 3 / 4;
  --ratio-wide: 16 / 9;
  --ratio-store: 3 / 2;

  /* Radius: built, not digital. Square corners everywhere. */
  --radius-none: 0;

  /* Brand motifs (§1.4) */
  --jamb-width: 4px;          /* the jamb: the logo's vertical rule */
  --jamb-width-thin: 2px;
  --dash-width: 48px;         /* the short dash */
  --dash-height: 3px;
  --band-opacity: 0.7;        /* the band over a photo */
  --band-width: 12%;
  --band-offset: 18%;
  --hairline: 1px;
  --underline-offset: 0.2em;
  --plus-size: 20px;
  --map-label-mobile: 28px;      /* SVG user units: the map scales down ~2x on phones */
  --map-label-mobile-home: 52px;
  --map-dot-mobile: 10px;          /* "+" corner marks on the systems grid */

  /* Borders, focus, shadow */
  --border-button: 2px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-color: var(--color-brand);
  --focus-color-on-brand: var(--color-ink);
  --shadow-menu: 0 12px 24px rgba(16, 15, 15, 0.08);   /* dropdown only */

  /* Icons */
  --icon-size: 16px;
  --icon-size-lg: 22px;
  --icon-stroke: 1.5px;

  /* Logo */
  --logo-width-header: 168px;
  --logo-width-footer: 200px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --nudge: 4px;

  /* Breakpoints (media queries can't read custom properties; these document the literals used below)
     --bp-nav: 1180px;  --bp-lg: 1024px;  --bp-md: 768px;  --bp-sm: 480px; */

  /* Layers */
  --z-header: 50;
  --z-menu: 60;
  --z-overlay: 2;
}

/* ---------- Fonts (OFL, self-hosted; copied from concept B's fetch, see NOTES.md) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-height); }
body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: var(--hairline); text-underline-offset: var(--underline-offset); }
:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-16)); z-index: var(--z-menu);
  background: var(--color-ink); color: var(--color-on-dark); padding: var(--space-3) var(--space-4);
  font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-4); }

.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--container-gutter));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-5);
  max-width: none;
}
/* the short dash under the eyebrow */
.eyebrow::after {
  content: "";
  display: block;
  width: var(--dash-width);
  height: var(--dash-height);
  background: var(--color-brand);
  margin-top: var(--space-3);
}
.eyebrow--on-dark { color: var(--color-on-dark); }
.eyebrow--on-dark::after { background: var(--color-brand-on-dark); }

.h2 {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-6);
  max-width: var(--measure-heading);
}
.h2--on-dark { color: var(--color-on-dark); }
.h3 {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-normal);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}
.lead { font-size: var(--text-md); margin-bottom: var(--space-5); max-width: var(--measure); }
p { max-width: var(--measure); }

/* A-24 staging highlight. The production build fails if any of these remain. */
.review-flag {
  background: var(--color-flag-bg);
  color: var(--color-flag-text);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  padding: 0 var(--space-1);
  box-shadow: inset var(--jamb-width-thin) 0 0 var(--color-flag-rule);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Icons (1.5 px strokes in currentColor; no A-19 shapes) ---------- */
.icon { width: var(--icon-size); height: var(--icon-size); flex: none; }
.icon path { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: square; }
.icon--arrow { width: var(--icon-size-lg); height: var(--icon-size-lg); }

/* ---------- Buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--space-12);
  padding: var(--space-3) var(--space-6);
  border: var(--border-button) solid transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.btn--brand { background: var(--color-brand); color: var(--color-ink); border-color: var(--color-brand); }
.btn--brand:hover { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); }
.btn--ink { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); }
.btn--ink:hover { background: var(--color-charcoal); border-color: var(--color-charcoal); }
.btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--outline:hover { background: var(--color-ink); color: var(--color-on-dark); }
.btn--outline-on-dark { background: transparent; color: var(--color-on-dark); border-color: var(--color-on-dark); }
.btn--outline-on-dark:hover { background: var(--color-on-dark); color: var(--color-ink); }

/* ---------- Motifs ---------- */
/* The jamb: one orange rule on the left of a text column, running its full height */
.jamb { position: relative; padding-left: var(--space-8); }
.jamb::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--jamb-width); background: var(--color-brand);
}
.jamb--thin { padding-left: var(--space-6); }
.jamb--thin::before { width: var(--jamb-width-thin); }
/* The jamb on the outer edge of a photo */
.jamb-edge { position: relative; }
.jamb-edge::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--space-4));
  width: var(--jamb-width); background: var(--color-brand);
}

/* ---------- Image placeholders (B-8): exact ratio, labeled with the shot ---------- */
.ph {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2);
  width: 100%;
  background: var(--color-stone);
  color: var(--color-ink);
  padding: var(--space-6);
  overflow: hidden;
}
.ph--4x5 { aspect-ratio: var(--ratio-hero); }
.ph--3x4 { aspect-ratio: var(--ratio-portrait); }
.ph--16x9 { aspect-ratio: var(--ratio-wide); }
.ph--3x2 { aspect-ratio: var(--ratio-store); }
.ph__tag {
  position: relative; z-index: var(--z-overlay);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tag); text-transform: uppercase;
}
.ph__shot {
  position: relative; z-index: var(--z-overlay);
  font-size: var(--text-sm); line-height: var(--leading-normal);
  max-width: var(--measure-narrow);
}
/* Stock placeholder photos (until the Roanoke shoot, B-8): same ratios, graded per A-20 */
.photo { position: relative; overflow: hidden; background: var(--color-stone); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo__tag {
  position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: var(--z-overlay);
  padding: var(--space-1) var(--space-2);
  background: var(--color-ink); color: var(--color-on-dark);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tag); text-transform: uppercase;
  line-height: var(--leading-snug);
}
/* The band over a photo (brochure cover): flat orange at reduced opacity, one per page */
.ph--band::before {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: var(--z-overlay);
  left: var(--band-offset); width: var(--band-width);
  background: var(--color-brand); opacity: var(--band-opacity);
}

/* ---------- Header (Adina HeaderTwo, solid white bar) ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-white);
  border-bottom: var(--hairline) solid var(--color-line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  min-height: var(--header-height);
}
.site-header__logo { flex: none; }
.site-header__logo img { width: var(--logo-width-header); }
.td-main-menu { display: flex; align-items: center; gap: var(--space-8); }
.td-main-menu__list { display: flex; align-items: center; gap: var(--space-6); }
.td-main-menu__list > li { position: relative; display: flex; align-items: center; }
.td-main-menu__list > li > a {
  display: inline-block;
  padding: var(--space-6) 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  text-decoration: none;
  position: relative;
}
/* Adina td-main-menu-2 underline, retuned to the jamb orange */
.td-main-menu__list > li > a::before {
  content: ""; position: absolute; left: 0; bottom: var(--space-5);
  width: 0; height: var(--dash-height); background: var(--color-brand);
  transition: width var(--duration-base) var(--ease);
}
.td-main-menu__list > li:hover > a::before,
.td-main-menu__list > li > a:focus-visible::before { width: 100%; }
.submenu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-8); height: var(--space-8);
  margin-left: var(--space-1);
  background: transparent; border: 0; color: var(--color-ink); cursor: pointer;
  border-radius: var(--radius-none);
}
.submenu-toggle .icon { transition: transform var(--duration-base) var(--ease); }
.submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* Adina .td-main-menu nav ul .submenu, with the scaleY reveal kept and the shadow lightened */
.submenu {
  position: absolute; top: 100%; left: 0; z-index: var(--z-menu);
  min-width: var(--menu-width);
  padding: var(--space-3) 0;
  background: var(--color-white);
  border: var(--hairline) solid var(--color-line);
  border-top: var(--dash-height) solid var(--color-brand);
  box-shadow: var(--shadow-menu);
  visibility: hidden; opacity: 0;
  transform-origin: top center; transform: scaleY(0);
  transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), visibility 0s linear var(--duration-base);
}
.has-dropdown:hover > .submenu,
.has-dropdown:focus-within > .submenu,
.has-dropdown.is-open > .submenu { visibility: visible; opacity: 1; transform: scaleY(1); transition-delay: 0s; }
.submenu a {
  display: block; position: relative;
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: padding var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}
.submenu a::before {
  content: ""; position: absolute; left: var(--space-6); top: 50%;
  width: 0; height: var(--hairline); background: var(--color-brand-text);
  transition: width var(--duration-base) var(--ease);
}
.submenu a:hover, .submenu a:focus-visible { color: var(--color-brand-text); padding-left: calc(var(--space-6) + var(--space-5)); }
.submenu a:hover::before, .submenu a:focus-visible::before { width: var(--space-3); }
.submenu a:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-5); }
.site-header__phone { font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; }
.site-header__phone:hover { text-decoration: underline; }
.nav-toggle {
  display: none;
  align-items: center; gap: var(--space-2);
  min-height: var(--space-12); padding: 0 var(--space-3);
  background: transparent; border: var(--border-button) solid var(--color-ink);
  border-radius: var(--radius-none);
  font: inherit; font-weight: var(--weight-semibold); color: var(--color-ink); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: var(--space-5); height: var(--border-button); background: var(--color-ink);
  position: relative; transition: transform var(--duration-base) var(--ease), background-color var(--duration-base);
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: calc(-1 * var(--space-2)); }
.nav-toggle__bars::after { top: var(--space-2); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(var(--space-2)) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(calc(-1 * var(--space-2))) rotate(-45deg); }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-section); }
.section--compact { padding-block: var(--space-section-compact); }
.section--white { background: var(--color-white); }
.section--paper { background: var(--color-paper); }
.section--charcoal { background: var(--color-charcoal); color: var(--color-on-dark); }
.sec-head { margin-bottom: var(--space-12); }
.sec-head__intro { margin-bottom: var(--space-8); max-width: var(--measure); }
.sec-head--split {
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: end;
}
.sec-head--split .h2, .sec-head--split .sec-head__intro { margin-bottom: 0; }
.sec-head--sticky { position: sticky; top: calc(var(--header-height) + var(--space-8)); align-self: start; }
.sec-foot { margin-top: var(--space-12); }

/* ---------- Hero ---------- */
.hero { background: var(--color-paper); padding-top: var(--space-16); }
.hero__grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-16); align-items: center;
}
.hero__text { padding-block: var(--space-4); }
.hero__title {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-8);
  max-width: var(--measure-display);
}
.hero__intro { font-size: var(--text-md); margin-bottom: var(--space-10); }
.hero__media { align-self: stretch; }
.building-types { padding-block: var(--space-16) var(--space-20); }
.building-types__lead {
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl);
  margin-bottom: var(--space-6);
}
/* Adina HeroTwo bottom tiles, 4 → 8, as a hairline grid */
.building-types__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: var(--hairline) solid var(--color-line-strong);
  border-left: var(--hairline) solid var(--color-line-strong);
}
.building-types__list li {
  display: flex;
  border-right: var(--hairline) solid var(--color-line-strong);
  border-bottom: var(--hairline) solid var(--color-line-strong);
}
.building-types__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex: 1;
  min-height: var(--space-20);
  padding: var(--space-5) var(--space-6);
  background: var(--color-white);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  position: relative;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.building-types__list a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--color-brand); transition: width var(--duration-base) var(--ease);
}
.building-types__list a:hover, .building-types__list a:focus-visible { background: var(--color-ink); color: var(--color-on-dark); }
.building-types__list a:hover::before, .building-types__list a:focus-visible::before { width: var(--jamb-width); }
.building-types__list a:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }

/* ---------- Leadership (Webfolio home-main Team) ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.team-card .photo { margin-bottom: var(--space-5); }
.team-card__name {
  font-family: var(--font-display); font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: var(--leading-snug);
}
.team-card__name a { text-decoration: none; }
.team-card__name a:hover { text-decoration: underline; }
.team-card__role { color: var(--color-warm-gray); font-weight: var(--weight-semibold); }
.team-card__role::before {
  content: ""; display: block; width: var(--dash-width); height: var(--dash-height);
  background: var(--color-brand); margin-block: var(--space-3);
}

/* ---------- Credentials ---------- */
.credentials__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-16); }
.credentials__lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
.cred-list li {
  padding-block: var(--space-3);
  border-bottom: var(--hairline) solid var(--color-line-strong);
  font-size: var(--text-base);
}
.cred-list li:first-child { border-top: var(--hairline) solid var(--color-line-strong); }
.systems { margin-top: var(--space-20); }
.systems__title { margin-bottom: var(--space-8); }
.systems__frame { position: relative; }
/* Adina BrandTwo bordered grid with "+" corner marks */
.systems__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: var(--hairline) 0 0 var(--hairline);
}
.td-brand-logo-border {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--space-32);
  padding: var(--space-6) var(--space-4);
  border: var(--hairline) solid var(--color-line-strong);
  margin: calc(-1 * var(--hairline)) 0 0 calc(-1 * var(--hairline));
  background: var(--color-white);
  text-align: center;
}
.td-brand-logo-border span {
  font-family: var(--font-display); font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-semibold); font-size: var(--text-lg); line-height: var(--leading-snug);
}
.td-brand-shape {
  position: absolute; z-index: var(--z-overlay);
  width: var(--plus-size); height: var(--plus-size);
  background: var(--color-paper);
}
.td-brand-shape::before, .td-brand-shape::after {
  content: ""; position: absolute; background: var(--color-ink);
}
.td-brand-shape::before { left: 0; right: 0; top: 50%; height: var(--hairline); }
.td-brand-shape::after { top: 0; bottom: 0; left: 50%; width: var(--hairline); }
.td-brand-shape-position { top: calc(var(--plus-size) / -2); left: calc(var(--plus-size) / -2); }
.td-brand-shape-position-2 { top: calc(var(--plus-size) / -2); right: calc(var(--plus-size) / -2); }
.td-brand-shape-position-3 { bottom: calc(var(--plus-size) / -2); right: calc(var(--plus-size) / -2); }
.td-brand-shape-position-4 { bottom: calc(var(--plus-size) / -2); left: calc(var(--plus-size) / -2); }

/* A-15 customer placeholder strip */
.pending-strip {
  margin-top: var(--space-16);
  padding: var(--space-6);
  border: var(--border-button) dashed var(--color-warm-gray);
}
.pending-strip__tag {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tag); text-transform: uppercase;
  color: var(--color-warm-gray); margin-bottom: var(--space-4);
}
.pending-strip__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pending-strip__list li {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-1);
  min-height: var(--space-24); padding: var(--space-4);
  background: var(--color-stone);
}
.pending-strip__name { font-weight: var(--weight-semibold); }
.pending-strip__status { font-size: var(--text-sm); }

/* ---------- Service area (Adina MapOne + new static map) ---------- */
.service-area__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: center; }
.service-map { background: var(--color-paper); padding: var(--space-8); }
.service-map__svg { width: 100%; }
.service-map .state { fill: var(--color-stone); stroke: var(--color-white); stroke-width: var(--border-button); stroke-linejoin: round; }
.service-map .state--home { fill: var(--color-charcoal); }
.service-map .state--dc { fill: var(--color-brand); stroke: var(--color-ink); stroke-width: var(--hairline); }
.service-map .map-label {
  font-family: var(--font-display); font-stretch: var(--font-stretch-wide);
  font-weight: var(--weight-bold); font-size: var(--text-lg); fill: var(--color-ink);
}
.service-map .map-label--home { fill: var(--color-on-dark); font-size: var(--text-2xl); }
.service-map .map-label--small { font-size: var(--text-base); }
.service-map .map-leader { stroke: var(--color-ink); stroke-width: var(--hairline); }
.service-map .map-store { fill: var(--color-brand-on-dark); stroke: var(--color-white); stroke-width: var(--border-button); }
.service-map .map-store-label {
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-base); fill: var(--color-on-dark);
}

/* ---------- Occupied buildings (Adina VideoAreaTwo: image with overlapping dark card) ---------- */
.occupied { padding-top: 0; }
.occupied__wrap { position: relative; }
.occupied__card {
  position: relative; z-index: var(--z-overlay);
  width: min(100%, var(--card-width));
  margin: calc(-1 * var(--card-overlap)) 0 0 auto;
  margin-right: var(--space-12);
  padding: var(--space-12);
  background: var(--color-charcoal);
  color: var(--color-on-dark);
}
.occupied__intro { font-size: var(--text-md); margin-bottom: var(--space-5); }
.occupied__body { color: var(--color-on-dark-muted); margin-bottom: var(--space-8); }

/* ---------- One company (Webfolio home-main Intro) ---------- */
.one-company__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-20); align-items: center; }
.one-company__media { margin-right: var(--space-4); }

/* ---------- Services (Webfolio modern-studio services-inline) ---------- */
.services-inline__grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-16); }
.services-inline .item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-6); align-items: start;
  padding-block: var(--space-6);
  border-bottom: var(--hairline) solid var(--color-line-strong);
  position: relative;
}
.services-inline .item:first-child { padding-top: 0; }
.services-inline .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-12); height: var(--space-12);
  border: var(--hairline) solid var(--color-line-strong);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm);
  color: var(--color-brand-text);
}
.services-inline .item__title {
  font-family: var(--font-display); font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}
.services-inline .item__title a { text-decoration: none; }
/* whole row is the hit area */
.services-inline .item__title a::after { content: ""; position: absolute; inset: 0; }
.services-inline .item p { color: var(--color-warm-gray); }
.services-inline .item .icon { margin-top: var(--space-2); transition: transform var(--duration-base) var(--ease), color var(--duration-base); }
.services-inline .item:hover .item__title a { text-decoration: underline; }
.services-inline .item:hover .icon,
.services-inline .item:focus-within .icon { color: var(--color-brand-text); transform: translate(var(--nudge), calc(-1 * var(--nudge))); }

/* ---------- Where to start (Adina PortfolioTwo numbered rows, on charcoal) ---------- */
.td-portfolio-2-wrap { border-top: var(--hairline) solid var(--color-line-on-dark); }
.td-portfolio-2-content {
  display: grid; grid-template-columns: var(--space-16) 1fr auto; gap: var(--space-6); align-items: start;
  padding-block: var(--space-8);
  border-bottom: var(--hairline) solid var(--color-line-on-dark);
  position: relative;
}
.td-portfolio-2-title-pre {
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base);
  color: var(--color-brand-on-dark); padding-top: var(--space-2);
}
.td-portfolio-2-title {
  font-family: var(--font-display); font-stretch: var(--font-stretch-wide);
  font-weight: var(--weight-bold); font-size: var(--text-2xl); line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.td-portfolio-2-title a { text-decoration: none; color: var(--color-on-dark); }
.td-portfolio-2-title a::after { content: ""; position: absolute; inset: 0; }
.td-portfolio-2-title a:focus-visible { outline-color: var(--color-brand-on-dark); }
.td-portfolio-2-text p { color: var(--color-on-dark-muted); }
.td-portfolio-2-content .icon { color: var(--color-on-dark); margin-top: var(--space-3); transition: transform var(--duration-base) var(--ease), color var(--duration-base); }
.td-portfolio-2-content:hover .td-portfolio-2-title a { text-decoration: underline; }
.td-portfolio-2-content:hover .icon,
.td-portfolio-2-content:focus-within .icon { color: var(--color-brand-on-dark); transform: translate(var(--nudge), calc(-1 * var(--nudge))); }
.section--charcoal :focus-visible { outline-color: var(--color-brand-on-dark); }

/* ---------- Stores (Adina ContactThree branch row, compact) ---------- */
.stores__row { display: grid; grid-template-columns: 3fr 6fr 3fr; gap: var(--space-10); align-items: center; }
.stores__title { font-size: var(--text-xl); }
.stores__cta { justify-self: end; }

/* ---------- Closing CTA: the band ---------- */
.closing { background: var(--color-white); padding-block: var(--space-section); }
.band {
  background: var(--color-brand);
  color: var(--color-ink);
  padding: var(--space-20) var(--space-16);
}
.band__title {
  font-family: var(--font-display); font-stretch: var(--font-stretch-wide);
  font-weight: var(--weight-bold); font-size: var(--text-2xl); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-5);
}
.band__intro { font-size: var(--text-md); margin-bottom: var(--space-8); }
.band__phone { font-weight: var(--weight-bold); font-size: var(--text-md); text-decoration: underline; }
.band :focus-visible { outline-color: var(--focus-color-on-brand); }

/* ---------- Footer (Adina FooterFour) ---------- */
.td-footer-area { background: var(--color-ink); color: var(--color-on-dark); }
.td-footer__top {
  display: grid; grid-template-columns: 4fr 2fr 3fr 3fr; gap: var(--space-10);
  padding-block: var(--space-20) var(--space-16);
}
.td-footer__brand img { width: var(--logo-width-footer); margin-bottom: var(--space-6); }
.td-footer__division { color: var(--color-on-dark-muted); font-size: var(--text-sm); }
.td-footer__title {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.td-footer__title::after {
  content: ""; display: block; width: var(--dash-width); height: var(--dash-height);
  background: var(--color-brand-on-dark); margin-top: var(--space-3);
}
.td-footer__col li { margin-bottom: var(--space-2); }
.td-footer__col a { text-decoration: none; color: var(--color-on-dark-muted); }
.td-footer__col a:hover { color: var(--color-on-dark); text-decoration: underline; }
.td-footer__licenses { color: var(--color-on-dark-muted); }
.td-footer-area :focus-visible { outline-color: var(--color-brand-on-dark); }
.td-footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: var(--hairline) solid var(--color-line-on-dark);
  font-size: var(--text-sm); color: var(--color-on-dark-muted);
}
.td-footer-bottom__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.td-footer-bottom__legal a { color: var(--color-on-dark-muted); text-decoration: none; }
.td-footer-bottom__legal a:hover { color: var(--color-on-dark); text-decoration: underline; }

/* ==========================================================================
   Responsive: 1440 (base), 1024, 768, 390
   ========================================================================== */

/* Header collapses below 1180 */
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .td-main-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - var(--header-height)); overflow-y: auto;
    background: var(--color-white);
    border-top: var(--hairline) solid var(--color-line);
    border-bottom: var(--dash-height) solid var(--color-brand);
    padding: var(--space-2) var(--container-gutter) var(--space-6);
  }
  .td-main-menu.is-open { display: flex; }
  .td-main-menu__list { flex-direction: column; align-items: stretch; gap: 0; }
  .td-main-menu__list > li { flex-wrap: wrap; justify-content: space-between; border-bottom: var(--hairline) solid var(--color-line); }
  .td-main-menu__list > li > a { padding: var(--space-4) 0; flex: 1; }
  .td-main-menu__list > li > a::before { display: none; }
  .submenu-toggle { width: var(--space-12); height: var(--space-12); }
  .submenu {
    position: static; flex-basis: 100%;
    display: none; visibility: visible; opacity: 1; transform: none;
    border: 0; box-shadow: none; padding: 0 0 var(--space-3);
  }
  .has-dropdown:hover > .submenu, .has-dropdown:focus-within > .submenu { display: none; }
  .has-dropdown.is-open > .submenu { display: block; }
  .submenu a { padding-left: var(--space-4); }
  .site-header__actions { padding-top: var(--space-6); justify-content: space-between; }
}

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .building-types__list { grid-template-columns: repeat(2, 1fr); }
  .credentials__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .sec-head--sticky { position: static; }
  .service-area__grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .occupied__card { margin-right: var(--space-6); }
  .one-company__grid { gap: var(--space-12); }
  .services-inline__grid { grid-template-columns: 1fr; gap: 0; }
  .td-footer__top { grid-template-columns: 1fr 1fr; }
  .stores__row { grid-template-columns: 4fr 8fr; }
  .stores__cta { grid-column: 2; justify-self: start; }
}

@media (max-width: 768px) {
  .hero { padding-top: var(--space-10); }
  .hero__grid { grid-template-columns: 1fr; }
  .sec-head--split { grid-template-columns: 1fr; gap: var(--space-6); }
  .team-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .credentials__lists { grid-template-columns: 1fr; }
  .systems__grid { grid-template-columns: repeat(2, 1fr); }
  .pending-strip__list { grid-template-columns: 1fr; }
  .service-area__grid { grid-template-columns: 1fr; }
  .service-map { padding: var(--space-4); }
  .occupied__card { width: auto; margin: 0; padding: var(--space-8) var(--space-6); }
  .one-company__grid { grid-template-columns: 1fr; }
  .one-company__media { max-width: var(--media-max-mobile); }
  .td-portfolio-2-content { grid-template-columns: var(--space-10) 1fr; }
  .td-portfolio-2-content .icon { display: none; }
  .stores__row { grid-template-columns: 1fr; }
  .stores__cta { grid-column: auto; }
  .band { padding: var(--space-12) var(--space-6); }
}

@media (max-width: 480px) {
  .site-header__logo img { width: calc(var(--logo-width-header) - var(--space-8)); }
  .nav-toggle__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .nav-toggle { padding: 0 var(--space-3); }
  .building-types__list { grid-template-columns: 1fr; }
  .building-types__list a { min-height: var(--space-16); }
  .team-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .team-card { display: grid; grid-template-columns: 2fr 3fr; column-gap: var(--space-5); align-items: end; }
  .team-card .photo { grid-row: span 2; margin-bottom: 0; }
  .systems__grid { grid-template-columns: 1fr 1fr; }
  .td-brand-logo-border { min-height: var(--space-24); }
  .td-brand-logo-border span { font-size: var(--text-base); }
  .service-map .map-label { font-size: var(--text-2xl); }
  .service-map .map-label--home { font-size: var(--map-label-mobile-home); }
  .service-map .map-store-label { font-size: var(--map-label-mobile); }
  .service-map .map-store { r: var(--map-dot-mobile); }
  .services-inline .item { grid-template-columns: auto 1fr; }
  .services-inline .item .icon { display: none; }
  .td-footer__top { grid-template-columns: 1fr; }
  .site-header__actions { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .site-header__actions .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  .ph { padding: var(--space-4); }
  .photo__tag { left: var(--space-2); bottom: var(--space-2); }
  .team-card .photo__tag { left: 0; bottom: 0; white-space: nowrap; letter-spacing: 0; padding: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}