/* ==========================================================================
   INTER — SELF-HOSTED (2026-09-23)
   ==========================================================================
   One VARIABLE font file per subset covers the whole 300–700 range the site
   uses, so this is two files, not ten. Served from the theme rather than
   fonts.googleapis.com: that request was render-blocking on a third party and
   measured 2830ms cold / ~380ms warm here, holding DOMContentLoaded at ~2.9s
   on every page regardless of page weight.

   `font-display: swap` means text paints immediately in the fallback and
   re-renders when Inter arrives — never an invisible page.

   The unicode-range on each face is Google's own: the browser downloads
   latin-ext ONLY if the page actually contains a character from it, so the
   typical page fetches just the 48 KB latin file (preloaded in functions.php).

   To update Inter: re-fetch from
   https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap
   with a modern browser User-Agent, drop the new .woff2 files into
   assets/fonts/ and copy the unicode-range values back into these two rules.
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   ATECH INTERIORS — Consolidated Stylesheet
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root {
  /* Colours */
  --bg:          #121212;
  --bg-alt:      #171512;
  --bg-card:     #1c1815;
  --white:       #ffffff;
  --ink:         #121212;
  --accent:      #e5921a;
  --accent-soft: rgba(229,146,26,0.14);
  --accent-line: rgba(229,146,26,0.4);
  --surface-light: #f5f3f0;   /* warm off-white for nested surfaces */

  /* On-dark text */
  --muted:   rgba(255,255,255,0.62);
  --muted-2: rgba(255,255,255,0.50);   /* 5.3 : 1 on --bg-alt — was 0.40 (3.8 : 1) */

  /* On-light text — verified WCAG AA against #ffffff */
  --muted-dark: #525252;   /* ~8.0 : 1 contrast */

  /* Borders */
  --hair:      rgba(255,255,255,0.10);
  --hair-dark: rgba(18,18,18,0.12);

  /* Spacing */
  --maxw: 1440px;

  /* Motion — durations */
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* Motion — easings */
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);

  /* Typography */
  /* Client, 2026-09-23: one family across the whole site. --font-head is kept
     as a token (not deleted) so the heading voice is still changeable in one
     place if they ever want a display face back. */
  --font-head: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Shape */
  --radius: 4px;

  /* Spacing scale */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 1rem;      /* 16px */
  --space-4: 1.5rem;    /* 24px */
  --space-5: 2.5rem;    /* 40px */
  --space-6: 4rem;      /* 64px */

  /* Layout — change --container-max for wider content; --gutter for side margins */
  --container-max: 1280px;
  --gutter:        clamp(1rem, 3vw, 2rem);
  --header-height: 76px;

  /* Semantic aliases */
  --surface:        var(--bg-alt, #171512);    /* mid-depth surface */
  --surface-raised: var(--bg-card, #1c1815);   /* elevated card */
  --text:           var(--white, #ffffff);     /* flips in .section--light */
  --text-muted:     var(--muted, rgba(255,255,255,0.62));
  --border:         var(--hair, rgba(255,255,255,0.10));      /* flips to --hair-dark in .section--light */
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Inter is set on the ROOT, not just body: the site uses one family
   everywhere (client, 2026-09-23), and anchoring it at :root means nothing —
   including markup a plugin injects outside body's own rules — can inherit the
   UA serif. body repeats it so a stray `font-family: initial` cannot win. */
html { scroll-behavior: smooth; font-family: 'Inter', sans-serif; }
body {
  background: var(--bg, #121212);
  color: var(--white, #ffffff);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  /* `clip`, never `hidden` — see the note in the RESPONSIVE TIERS block.
     `hidden` makes this a scroll container, which breaks position: sticky
     inside it. `hidden` is kept first purely as a fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  * {
    transition-property: background-color, color, border-color, opacity, box-shadow, fill, stroke !important;
    transition-duration: 160ms !important;
    transition-timing-function: ease !important;
  }
}
h1, h2, h3, h4 { font-family: 'Inter', sans-serif; font-weight: 300; line-height: 1.08; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- LAYOUT ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); }

.wrap-narrow { max-width: 1000px;      margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); }
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }

/*
 * Form controls do not inherit font-family from the UA stylesheet, so any
 * <button>, <input> or <select> the theme does not style by hand falls back to
 * Arial — verified on production 2026-09-23 on the nav toggle, the contact-dock
 * toggle and the dialog close buttons. Everything on the site is Inter, so
 * these are the only exceptions and they must inherit.
 */
button, input, select, textarea, optgroup { font-family: inherit; }

/* ---------- UTILITY ATOMS ---------- */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent, #e5921a);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--accent, #e5921a); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 16px 30px; border-radius: 2px;
  cursor: pointer; border: 1px solid transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-sm { padding: 11px 20px; font-size: 11.5px; }
.btn-primary { background: var(--accent, #e5921a); color: var(--ink, #121212); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: #f2a53a; transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(229,146,26,0.6); } }
.btn-outline { border-color: rgba(255,255,255,0.35); color: var(--white, #ffffff); }
@media (hover: hover) and (pointer: fine) { .btn-outline:hover { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); } }
.btn-outline-dark { border-color: rgba(18,18,18,0.35); color: var(--ink, #121212); }
@media (hover: hover) and (pointer: fine) { .btn-outline-dark:hover { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); } }
.btn svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover svg { transform: translateX(4px); } }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* Ghost variant: border + text colour auto-adapts via --border / --text tokens */
.btn-ghost { border-color: var(--border, rgba(255,255,255,0.10)); color: var(--text, #ffffff); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); } }
/* Keyboard focus ring only — suppress browser outline on mouse/touch */
.btn:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible { outline: 2px solid var(--accent, #e5921a); outline-offset: 3px; }
.btn:active { transform: scale(0.97); transition: transform 100ms ease-out; }
.accent-link { color: var(--accent, #e5921a); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .accent-link:hover { opacity: .8; } }

/* ---------- SCROLL REVEAL ---------- */
/*
 * ⚠️ CSS FAILSAFE — content must never depend on JavaScript to be visible.
 *
 * .reveal starts at opacity 0 and JS adds .in. If that JS does not run, EVERY
 * section on the site stays invisible and the page is a white screen. That is
 * not hypothetical: WP Rocket's "Delay JavaScript Execution" on staging holds
 * atech.js until the visitor interacts, so the page rendered blank until the
 * first tap — and that tap was spent waking the script rather than pressing the
 * button (client, 2026-09-23: "white screen and lot of delay", "need to click
 * twice"). Any JS error, blocked script or optimisation plugin does the same.
 *
 * So the animation below reveals everything after 1.2s no matter what. If JS is
 * working it adds .in long before that and nothing changes visually; if it never
 * runs, the content still appears. `forwards` holds the end state, and .in
 * cancels the animation so the two mechanisms cannot fight.
 *
 * Do not "simplify" this away — it is the only thing standing between a JS
 * failure and a blank site.
 */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-spring), transform var(--dur-slow) var(--ease-spring);
  animation: atech-reveal-failsafe 1ms linear 1.2s forwards;
}
.reveal.in { opacity: 1; transform: translateY(0); animation: none; }
@keyframes atech-reveal-failsafe { to { opacity: 1; transform: none; } }
/* Reduced motion: no slide, and show immediately rather than after the delay. */
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; animation-delay: 0s; }
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }

/* ---------- LIGHT / WHITE SECTION — colour-token context switch ----------
   Apply .section--light to flip any section to white background.
   --muted and --hair are REDEFINED here so child elements using var(--muted, rgba(255,255,255,0.62))
   automatically receive on-light values without per-class patches.
   Dark cards intentionally floating on white (sv-why-card, stack-card, proj-card,
   transf-card, mv-card, form-card) re-assert dark-context tokens in the rule below.
   ----------------------------------------------------------------------- */
.light-section,
.section--light {
  --muted: #525252;               /* on-light secondary text → 8 : 1 contrast */
  --hair:  rgba(18,18,18,0.12);   /* on-light dividers */
  --text:  var(--ink, #121212);            /* btn-ghost / accent-link text flips to dark */
  background: var(--white, #ffffff);
  color:      var(--ink, #121212);
}
.light-section .eyebrow,
.section--light .eyebrow { color: var(--accent, #e5921a); }
.light-section .section-head p,
.section--light .section-head p,
.light-section p,
.section--light p { color: var(--muted-dark, #525252); }

/* Dark cards inside light sections: restore dark-context tokens so their white
   text remains readable against the dark card backgrounds. */
.section--light .sv-why-card,
.section--light .stack-card,
.section--light .transf-card,
.section--light .mv-card,
.section--light .team-card,
.section--light .standard-card,
.section--light .form-card,
.light-section  .sv-why-card,
.light-section  .stack-card,
.light-section  .transf-card,
.light-section  .mv-card,
.light-section  .team-card,
.light-section  .standard-card {
  --muted:      rgba(255,255,255,0.62);
  --hair:       rgba(255,255,255,0.10);
  --text:       var(--white, #ffffff);
  --text-muted: rgba(255,255,255,0.62);
  --border:     rgba(255,255,255,0.12);
}

/* Marquee sections */
.section--light.marquee-section {
  background: var(--white, #ffffff);
  border-top-color: var(--hair-dark, rgba(18,18,18,0.12));
  border-bottom-color: var(--hair-dark, rgba(18,18,18,0.12));
}
.section--light .marquee-label { color: rgba(18,18,18,0.62); }   /* 5.3 : 1 — was 0.45 (3.0 : 1) */
.section--light .logo-pill { color: rgba(18,18,18,0.62); }
@media (hover: hover) and (pointer: fine) { .section--light .logo-pill:hover { opacity: 1; filter: grayscale(0); color: var(--ink, #121212); } }

/* Stats */
.section--light .stat-label { color: var(--muted-dark, #525252); }

/* Why Choose — placeholder card border visible on white */
.section--light .why-visual { border-color: var(--hair-dark, rgba(18,18,18,0.12)); }

/* Walkthrough */
.section--light.walkthrough {
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(229,146,26,0.07), transparent 65%), var(--white, #ffffff);
}
.section--light.walkthrough p { color: var(--muted-dark, #525252); }
.section--light .wt-icon { border-color: rgba(18,18,18,0.18); }

/* Featured projects: dark cards on white — border visible */
.section--light .project-card { border-color: rgba(18,18,18,0.12); }
.section--light .project-note { color: var(--muted-dark, #525252); }

/* Contact info card (light surface on light section) */

/* Process timeline track on light sections */
.section--light .process-line-track { background: rgba(18,18,18,0.14); }

/* Outline button on white background */
.section--light .btn-outline { border-color: rgba(18,18,18,0.28); color: var(--ink, #121212); }
@media (hover: hover) and (pointer: fine) { .section--light .btn-outline:hover { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); } }

/* ---------- SECTION GENERIC ---------- */
section { position: relative; }
.section-pad { padding-block: clamp(72px, 9vw, 140px); }

/* Continuation utilities — replace ad-hoc inline padding styles */
.section-flush-top { padding-block-start: 0; }

.inner-top { padding-block-start: clamp(72px, 9vw, 140px); }

.section { padding-block: clamp(2rem, 4vw, 3.5rem); }
.card { background: var(--surface-raised, #1c1815); border: 1px solid var(--border, rgba(255,255,255,0.10)); padding: var(--space-5); border-radius: var(--radius); }

/* Anchor-target offset — clears the sticky header on hash scroll and scrollIntoView() */
#home,
#about,
#services,
#portfolio,
#contact,
#consultation,
#quote-form,
/* #projects carries the filter pills at its top; without this the sticky
   header covers the first row of them when "View Projects" jumps here. */
#projects,
.faq-section[id] {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.section-head { max-width: 680px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 300; margin-top: 20px; }
.section-head p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 16px; line-height: 1.7; margin-top: 20px; font-weight: 400; }

/* ---------- NAV ---------- */
header.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 26px 0;
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
header.site-nav.scrolled {
  background: rgba(18,18,18,0.86);
  backdrop-filter: blur(14px);
  padding: 16px 0;
  border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10));
}
/* While the mobile menu is open the header is pinned to its compact solid
   state, so --mobile-header-height (the menu sheet's top offset) is exact. */
body.nav-open header.site-nav,
body.header-solid header.site-nav {
  background: rgba(18,18,18,0.86);
  backdrop-filter: blur(14px);
  padding: 16px 0;
  border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10));
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { display: block; height: 52px; width: auto; transition: height .4s ease; }
header.site-nav.scrolled .logo img,
body.nav-open header.site-nav .logo img,
body.header-solid header.site-nav .logo img { height: 46px; }
@media (max-width: 600px) { .logo img, header.site-nav.scrolled .logo img, body.nav-open header.site-nav .logo img, body.header-solid header.site-nav .logo img { height: 40px; } }
/* ⚠️ While the menu is open the header must NOT have a backdrop-filter.
   backdrop-filter creates a containing block for `position: fixed`
   DESCENDANTS, and .nav-links.nav-open is fixed and lives inside the header —
   so the sheet was being laid out inside the ~79px header box instead of the
   viewport, and rendered 48px tall (found by the responsive test suite,
   2026-09-21). The header is opaque while the menu is open anyway, so there is
   nothing to blur. Same applies to `filter`, `transform` and `will-change`:
   never add one to header.site-nav. */
body.nav-open header.site-nav {
  background: var(--bg, #121212);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Fallback only — atech.js measures the real header and overwrites this on the
   root element every time the menu opens, because the exact height depends on
   the logo, the 44px tap target and the font. Never trust the constant. */
:root { --mobile-header-height: 77px; }
@media (max-width: 600px) { :root { --mobile-header-height: 77px; } }
/* Lock the page behind the open menu without losing the scroll position.
   position:fixed (not overflow:hidden — iOS ignores that) with the JS holding
   the body at -scrollY, so the page does not jump to the top when the menu
   opens part-way down a page. See setOpen() in atech.js. */
body.nav-open {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}
.logo:focus-visible { outline: 2px solid var(--accent, #e5921a); outline-offset: 4px; }

/* Desktop nav links */
.nav-links { display: flex; align-items: center; gap: 38px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.nav-links > a,
.nav-links > li > a {
  position: relative; padding: 4px 0;
  color: var(--muted, rgba(255,255,255,0.62)); transition: color .3s ease;
}
.nav-links > a.current { color: var(--white, #ffffff); }
@media (hover: hover) and (pointer: fine) { .nav-links > a:hover, .nav-links > li > a:hover { color: var(--white, #ffffff); } }
/* Underline bar: plain links only — .btn items get accent border instead (see below) */
.nav-links > a:not(.btn)::after,
.nav-links > li > a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--accent, #e5921a); transition: width .3s ease;
}
.nav-links > a.current:not(.btn)::after { width: 100%; }
@media (hover: hover) and (pointer: fine) { .nav-links > a:not(.btn):hover::after, .nav-links > li > a:not(.btn):hover::after { width: 100%; } }
/* Contact Us CTA active state — accent border/colour, no underline bar */
.nav-links > a.current.btn { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); }

/* Nav Contact Us: remove border box — accent-coloured plain link */
.nav-links a.nav-cta,
.nav-links li > a.nav-cta { border: none; padding: 4px 0; color: var(--accent, #e5921a); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; background: transparent; }
.nav-links a.nav-cta.current { color: var(--white, #ffffff); }
@media (hover: hover) and (pointer: fine) { .nav-links a.nav-cta:hover { color: var(--white, #ffffff); } }

/* Mobile toggle — hamburger icon (client, 2026-09-21: no "Menu" wording).
   Three bars that morph into an X; driven entirely by aria-expanded so the
   JS never has to touch the icon markup. */
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: transparent; border: 0; color: var(--accent, #e5921a);
  position: relative; z-index: 102;
  align-items: center; justify-content: center;
}
.nav-toggle:focus-visible { outline: 2px solid var(--accent, #e5921a); outline-offset: 2px; }
.nav-toggle-bars { display: block; width: 26px; height: 18px; position: relative; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-base, .28s) var(--ease-out, cubic-bezier(.2,.8,.2,1)),
              opacity 160ms var(--ease-out, cubic-bezier(.2,.8,.2,1));
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 8px; }
.nav-toggle-bars span:nth-child(3) { top: 16px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 900px) {
  .site-nav .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile menu open state */
/* Mobile menu open state — a sheet BELOW the header bar, so the logo and the
   close button stay visible and tappable the whole time (they were covered by
   the old inset:0 panel, which is most of why the menu "didn't work well").
   Rewritten 2026-09-21. */
.nav-links.nav-open {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  position: fixed; left: 0; right: 0; bottom: 0;
  top: var(--mobile-header-height, 72px);
  background: var(--bg, #121212);
  padding: 8px 24px calc(40px + env(safe-area-inset-bottom, 0px));
  z-index: 101;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.nav-links.nav-open > a,
.nav-links.nav-open .nav-dropdown { width: 100%; border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10)); }
.nav-links.nav-open > a,
.nav-links.nav-open .nav-drop-trigger {
  padding: 17px 2px; font-size: 18px; display: flex; align-items: center;
  justify-content: space-between; width: 100%; color: var(--white, #ffffff);
}
/* The underline-bar hover effect makes no sense in a stacked sheet. */
.nav-links.nav-open > a::after { display: none; }
.nav-links.nav-open > a.current { color: var(--accent, #e5921a); }
.nav-links.nav-open .nav-drop-trigger::after { margin-top: 0; transition: transform var(--dur-base, .28s) var(--ease-out, cubic-bezier(.2,.8,.2,1)); }
.nav-links.nav-open .nav-dropdown.expanded .nav-drop-trigger { color: var(--accent, #e5921a); }
.nav-links.nav-open .nav-dropdown.expanded .nav-drop-trigger::after { transform: rotate(225deg); }
/* Submenu expands with a height transition instead of snapping display:block. */
/* Collapse with max-height, NOT the grid 0fr→1fr trick.
   `grid-template-rows: 0fr` sizes only the FIRST row; the other two links drop
   into implicit rows sized `auto`, so a "closed" menu still stood 108px tall and
   pushed the items below it around — the Services and Portfolio dropdowns looked
   broken on a phone (reported on iPhone, 2026-09-21). max-height collapses the
   whole box however many links it holds, and still animates. */
.nav-links.nav-open .nav-dropdown-menu {
  position: static; transform: none; visibility: visible; display: block;
  max-height: 0; overflow: hidden; opacity: 0;
  min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0;
  transition: max-height 320ms var(--ease-out, cubic-bezier(.2,.8,.2,1)), opacity 220ms ease;
}
.nav-links.nav-open .nav-dropdown.expanded .nav-dropdown-menu { max-height: 60vh; opacity: 1; padding-bottom: 10px; }
.nav-links.nav-open .nav-dropdown-menu a { padding: 12px 0 12px 16px; font-size: 16px; overflow: hidden; }
/* Contact Us keeps its accent treatment but becomes a full-width tap target. */
.nav-links.nav-open a.nav-cta { margin-top: 22px; border-bottom: 0; justify-content: center; border: 1px solid var(--accent, #e5921a); padding: 16px; font-size: 14px; }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-drop-trigger {
  cursor: pointer; color: var(--muted, rgba(255,255,255,0.62)); font-size: 13px; font-weight: 500;
  letter-spacing: .02em; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 0; transition: color .3s ease;
}
.nav-drop-trigger.current { color: var(--white, #ffffff); }
.nav-drop-trigger::after {
  content: ''; width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .3s ease; margin-top: -3px;
}
.nav-dropdown:focus-within .nav-drop-trigger { color: var(--white, #ffffff); }
@media (hover: hover) and (pointer: fine) { .nav-dropdown:hover .nav-drop-trigger { color: var(--white, #ffffff); } }
@media (hover: hover) and (pointer: fine) { .nav-dropdown:hover .nav-drop-trigger::after { transform: rotate(225deg); margin-top: 3px; } }
/* ⚠️ DESKTOP ONLY. `:focus-within` counts as a class, so
   `.nav-dropdown:focus-within .nav-dropdown-menu` is (0,3,0) — exactly the same
   weight as the mobile rule `.nav-links.nav-open .nav-dropdown-menu`, and it
   sits later in this file, so it WON. Tapping "Services" on a phone focuses the
   trigger, which re-applied `translateX(-50%)` and threw the open menu half its
   own width off to the left: all you saw was the tail of the longest link
   ("…provals") clipped at the edge (reported 2026-09-21).

   A programmatic .click() never fires :focus-within on a <span>, which is why
   this passed every scripted test and only failed on a real tap. Scoping the
   whole desktop treatment to >=901px is the fix — the mobile sheet can no
   longer be reached by these rules at all. */
@media (min-width: 901px) {
  .nav-dropdown-menu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(6px) scale(0.97);
    transform-origin: top center;
    min-width: 230px; background: var(--bg-alt, #171512); border: 1px solid var(--hair, rgba(255,255,255,0.10));
    padding: 8px 0; z-index: 50;
    opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s linear .2s;
    box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55);
  }
.nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); } }
  .nav-dropdown-menu a { white-space: nowrap; }
}
.nav-dropdown-menu a {
  display: block; padding: 11px 22px; font-size: 13px;
  color: var(--muted, rgba(255,255,255,0.62));
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a.current { color: var(--accent, #e5921a); background: rgba(255,255,255,0.03); }
@media (hover: hover) and (pointer: fine) { .nav-dropdown-menu a:hover { color: var(--accent, #e5921a); background: rgba(255,255,255,0.03); } }

/* ---------- FOOTER (static, every page) ---------- */
.site-footer { padding: clamp(56px, 7vw, 88px) 0 28px; background: var(--bg-alt, #171512); border-top: 1px solid var(--hair, rgba(255,255,255,0.10)); }
.footer-grid {
  display: grid; gap: clamp(32px, 4vw, 56px);
  grid-template-columns: 1.3fr 1fr 1fr minmax(220px, 280px);
  align-items: start;
}
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .logo img { height: 60px; }
.footer-brand p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 14px; line-height: 1.75; margin-top: 18px; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair, rgba(255,255,255,0.10));
  display: flex; align-items: center; justify-content: center; color: var(--muted, rgba(255,255,255,0.62));
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .footer-social a:hover { color: var(--accent, #e5921a); border-color: var(--accent, #e5921a); } }
.footer-social svg { width: 17px; height: 17px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--muted, rgba(255,255,255,0.62)); }
.footer-col a { transition: color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--accent, #e5921a); } }
.footer-heading { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--white, #ffffff); margin-bottom: 6px; }
.footer-heading--spaced { margin-top: 18px; }

/* Square map */
.footer-map-col .footer-heading { margin-bottom: 16px; }
.footer-map {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  border-radius: var(--radius); border: 1px solid var(--hair, rgba(255,255,255,0.10));
  background: var(--bg-card, #1c1815); overflow: hidden;
}
.footer-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: grayscale(1) invert(.92) contrast(.9); /* dark map to match the theme */
  transition: filter var(--dur-base) ease;
}
.footer-map:focus-within iframe { filter: none; }
@media (hover: hover) and (pointer: fine) { .footer-map:hover iframe { filter: none; } }
.footer-map-link { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--accent, #e5921a); }
@media (hover: hover) and (pointer: fine) { .footer-map-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 1000px) { .footer-map-col { max-width: 320px; } }
@media (max-width: 560px)  { .footer-map-col { max-width: none; } }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--hair, rgba(255,255,255,0.10));
  font-size: 12.5px; color: var(--muted-2, rgba(255,255,255,0.50));
  /* The bottom bar now holds only the copyright — the Privacy Policy link
     moved up into the brand column, away from the floating contact dock that
     is fixed over this corner. */
}
@media (max-width: 600px) {
  /* Row stacks; the dock then sits beside the link rather than on it. */
  .footer-bottom { padding-right: 0; padding-bottom: 76px; }
}
@media (hover: hover) and (pointer: fine) { .footer-bottom a:hover { color: var(--accent, #e5921a); } }

/* ---------- FLOATING CONTACT DOCK (footer.php, every page) ----------
   Collapsed: one accent button. Expanded: calculator + WhatsApp + quote + call.
   Items stagger in with transform/opacity only. */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}
/*
 * ⚠️ The dock CONTAINER is pointer-events: none; only the toggle button (and
 * the items once open) accept taps. The container is 58x314px fixed over the
 * bottom-right edge of every page — with pointer-events: auto it swallowed
 * every tap in that strip, whether or not the dock was open, killing any CTA
 * or card link underneath it. CLAUDE.md has warned since 2026-09-19 that
 * "anything placed there is unclickable"; this makes that no longer true.
 * Anything added to the dock must set pointer-events: auto on itself.
 */
.contact-dock { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
/*
 * ⚠️ pointer-events: none on the LIST, not just the items.
 *
 * The <li>s already go pointer-events: none when collapsed, but the <ul> itself
 * still occupied 52x244px of the bottom-right edge with pointer-events: auto —
 * a dead strip up the side of every page where taps hit the invisible list and
 * nothing happened. On a 390px phone that is a sixth of the screen width and a
 * third of its height, over the area where CTAs and card links often sit
 * (reported 2026-09-23: "when i click any button it just doesnt take action").
 * Re-enabled on .open, where the items are actually there to be tapped.
 */
.contact-dock-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.contact-dock.open .contact-dock-items { pointer-events: auto; }
.contact-dock-items li {
  opacity: 0; transform: translateY(10px) scale(0.9); pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.contact-dock.open .contact-dock-items li { opacity: 1; transform: none; pointer-events: auto; }
/* Stagger: nearest the button first, 45ms apart. Counted from the LAST item,
   so adding or removing a dock entry does not need these numbers rewritten. */
.contact-dock.open .contact-dock-items li:nth-last-child(1) { transition-delay: 0ms; }
.contact-dock.open .contact-dock-items li:nth-last-child(2) { transition-delay: 45ms; }
.contact-dock.open .contact-dock-items li:nth-last-child(3) { transition-delay: 90ms; }
.contact-dock.open .contact-dock-items li:nth-last-child(4) { transition-delay: 135ms; }
.contact-dock.open .contact-dock-items li:nth-last-child(5) { transition-delay: 180ms; }

.dock-item {
  display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body);
}
.dock-icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card, #1c1815); border: 1px solid rgba(229,146,26,0.35); color: var(--accent, #e5921a);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.6);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.dock-icon svg { width: 23px; height: 23px; }
.dock-label {
  background: var(--bg-card, #1c1815); color: var(--white, #ffffff);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 30px;
  padding: 8px 16px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,0.6);
  opacity: 0; transform: translateX(8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .dock-item:hover .dock-label { opacity: 1; transform: none; }
  .dock-item:hover .dock-icon { background: var(--accent, #e5921a); color: var(--ink, #121212); transform: translateY(-2px); }
}
.dock-item:focus-visible { outline: none; }
.dock-item:focus-visible .dock-icon { outline: 2px solid var(--accent, #e5921a); outline-offset: 3px; }
.dock-item:focus-visible .dock-label { opacity: 1; transform: none; }
@media (max-width: 600px) { .dock-label { display: none; } }

.contact-dock-toggle { pointer-events: auto; }
.contact-dock-toggle {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent, #e5921a); color: var(--ink, #121212);
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 14px 34px -12px rgba(229,146,26,0.65);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .contact-dock-toggle:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(229,146,26,0.75); }
}
.contact-dock-toggle:active { transform: scale(0.96); }
.contact-dock-toggle:focus-visible { outline: 2px solid var(--white, #ffffff); outline-offset: 3px; }
.contact-dock-toggle svg { width: 25px; height: 25px; position: absolute; transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out); }
.dock-close-icon { opacity: 0; transform: rotate(-90deg); }
.contact-dock.open .dock-open-icon { opacity: 0; transform: rotate(90deg); }
.contact-dock.open .dock-close-icon { opacity: 1; transform: none; }
@media (max-width: 600px) { .contact-dock { right: 16px; bottom: 16px; } }

/* ---------- DIALOGS: calculator modal + gallery lightbox ----------
   [hidden] removed → .open added next frame, so opacity/scale transition in.
   Transitions (not keyframes) so a fast close mid-open reverses smoothly. */
.calc-modal-overlay,
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.calc-modal-overlay[hidden],
.lightbox[hidden] { display: none; }
.calc-modal-overlay.open,
.lightbox.open { opacity: 1; }

.calc-modal-overlay { background: rgba(10,8,6,0.6); backdrop-filter: blur(4px); }
.calc-modal {
  background: var(--white, #ffffff); color: var(--ink, #121212); width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  border-radius: var(--radius); position: relative; box-shadow: 0 40px 100px -20px rgba(0,0,0,0.5);
  transform: translateY(12px) scale(0.96);
  transition: transform 240ms var(--ease-out);
}
.calc-modal-overlay.open .calc-modal { transform: none; }
.calc-modal-head { padding: 30px 30px 0; }
.calc-modal-title { font-family: var(--font-head); font-size: 21px; font-weight: 300; margin-top: 14px; color: var(--ink, #121212); }
.calc-modal-close {
  position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(18,18,18,0.15); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink, #121212); font-size: 16px; line-height: 1; background: none;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .calc-modal-close:hover { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); } }
.calc-modal-body { padding: 22px 30px 30px; }
.calc-field { margin-bottom: 18px; }
.calc-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(18,18,18,0.62); display: block; margin-bottom: 9px; }
.calc-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-pill {
  border: 1px solid rgba(18,18,18,0.15); padding: 9px 15px; font-size: 12.5px; color: rgba(18,18,18,0.7);
  border-radius: 30px; cursor: pointer; background: none; font-family: var(--font-body);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .calc-pill:hover { border-color: var(--accent, #e5921a); } }
.calc-pill.selected { border-color: var(--accent, #e5921a); background: var(--accent, #e5921a); color: var(--ink, #121212); font-weight: 600; }
.calc-field input[type=number] {
  width: 100%; background: var(--white, #ffffff); border: 1px solid rgba(18,18,18,0.15); color: var(--ink, #121212);
  font-family: var(--font-body); font-size: 14px; padding: 12px 14px; border-radius: 2px; outline: none;
  transition: border-color var(--dur-fast) ease;
}
.calc-field input[type=number]:focus { border-color: var(--accent, #e5921a); }
.calc-result { background: var(--bg-card, #1c1815); color: var(--white, #ffffff); border-radius: 2px; padding: 22px; text-align: center; margin: 22px 0; }
.calc-result-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 9px; }
.calc-result-value { font-family: var(--font-head); font-size: 26px; color: var(--accent, #e5921a); font-weight: 400; }
.calc-disclaimer { font-size: 11.5px; color: rgba(18,18,18,0.62); line-height: 1.65; margin-bottom: 18px; }
.calc-modal-body .btn { width: 100%; justify-content: center; }

/* Lightbox */
.lightbox { background: rgba(8,7,6,0.94); padding: 64px 72px; }
.lightbox-figure {
  margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px;
  transform: scale(0.96);
  transition: transform 240ms var(--ease-out);
}
.lightbox.open .lightbox-figure { transform: none; }
.lightbox-img {
  max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; object-fit: contain; border-radius: 2px;
  transition: opacity 180ms var(--ease-out);
}
.lightbox.loading .lightbox-img { opacity: 0.35; }
.lightbox-caption { color: var(--muted, rgba(255,255,255,0.62)); font-size: 13px; letter-spacing: .04em; text-align: center; }
.lightbox-btn {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(18,18,18,0.5); color: var(--white, #ffffff);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .lightbox-btn:hover { color: var(--accent, #e5921a); border-color: var(--accent, #e5921a); } }
.lightbox-btn svg { width: 18px; height: 18px; }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .lightbox { padding: 64px 12px 88px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 20px; transform: none; }
  .lightbox-prev { left: calc(50% - 56px); }
  .lightbox-next { right: calc(50% - 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .calc-modal, .lightbox-figure { transform: none; }
}

/* ---------- SHARED: PAGE HERO (inner pages) ---------- */
.page-hero { padding: 100px 0 70px; position: relative; overflow: hidden; }
.page-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 55% 55% at 85% 0%, rgba(229,146,26,0.14), transparent 60%),
    linear-gradient(160deg, #151210 0%, #121212 55%, #0f0f0f 100%);
}
.page-hero-inner { position: relative; z-index: 1; }
/* Sized to match the service / portfolio heroes (.hero-copy-col) — the About
   page was running a bigger h1 and 16px full-measure copy, so it read as a
   different brand (client, 2026-09-21). Keep these three in step with the
   .hero-copy-col rules further down. */
.page-hero h1 { font-size: clamp(2.2rem, 3.5vw, 3rem); font-weight: 300; margin-top: 20px; line-height: 1.1; }
.page-hero p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 15px; line-height: 1.8; margin-top: 20px; max-width: 620px; }
.page-hero p + p { margin-top: 14px; }

/* ---------- SHARED: CONTACT GRID ---------- */
/* Get In Touch (template-parts/contact-section.php + contact-info.php) */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 300; margin-top: 20px; }
.contact-intro { font-size: 15.5px; line-height: 1.75; margin-top: 22px; max-width: 520px; color: var(--muted, rgba(255,255,255,0.62)); }
.section--light .contact-intro { color: var(--muted-dark, #525252); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.section--light .contact-actions .btn-outline { border-color: rgba(18,18,18,0.28); color: var(--ink, #121212); }

/* Square card: four stacked rows (icon left, label above value) */
.contact-card {
  width: 100%; max-width: 440px; aspect-ratio: 1 / 1;
  background: var(--bg-card, #1c1815); color: var(--white, #ffffff);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.45);
}
.contact-card-wrap { width: 100%; max-width: 440px; justify-self: end; }
@media (max-width: 900px) { .contact-card-wrap { justify-self: start; } }
.contact-card-grid { display: grid; grid-template-rows: repeat(4, 1fr); height: 100%; padding: 0 clamp(22px, 2.6vw, 32px); }
.contact-card-item {
  min-width: 0; display: flex; align-items: center; gap: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.contact-card-item:last-child { border-bottom: 0; }
.contact-card-icon {
  width: 44px; height: 44px; padding: 11px; flex-shrink: 0;
  color: var(--accent, #e5921a); border: 1px solid rgba(229,146,26,0.35); border-radius: 50%;
  transition: background-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .contact-card-item:has(a:hover) .contact-card-icon { background-color: rgba(229,146,26,0.12); } }
.contact-card-text { min-width: 0; }
.contact-card-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 5px; }   /* 6.1 : 1 on --bg-card */
.contact-card-value { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--white, #ffffff); overflow-wrap: anywhere; }
.contact-card-value a { transition: color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .contact-card-value a:hover { color: var(--accent, #e5921a); } }
/*
 * The full Google-listing address (client, 2026-09-23) is far longer than the
 * "Dubai, UAE" it replaced, and the card is a client-approved square — so the
 * address row alone drops a size and tightens its leading to keep three lines
 * inside its quarter of the card. Do not shorten the address to fit.
 */
.contact-card-value--address { font-size: 13px; line-height: 1.45; font-weight: 400; }
@media (max-width: 420px) {
  .contact-card-item { gap: 14px; }
  .contact-card-icon { width: 38px; height: 38px; padding: 9px; }
  .contact-card-value { font-size: 14px; }
  .contact-card-value--address { font-size: 11.5px; line-height: 1.4; }
}
/* Footer address: long, hyphenated, must never force the column wider. */
.footer-address { overflow-wrap: anywhere; line-height: 1.6; }
.contact-inline-card { margin-top: var(--space-5); }

/* ==========================================================================
   HOMEPAGE — HERO
   ========================================================================== */
.hero {
  position: relative; height: 100vh; min-height: 680px; max-height: 960px;
  display: flex; flex-direction: column; padding-top: 104px; padding-bottom: 26px; overflow: hidden;
}
@media (max-width: 900px) { .hero { height: auto; min-height: 0; max-height: none; padding-top: 96px; padding-bottom: 44px; } }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 82% 10%, rgba(229,146,26,0.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 12% 95%, rgba(229,146,26,0.08), transparent 60%),
    linear-gradient(160deg, #151210 0%, #121212 46%, #0f0f0f 100%);
}
.hero-grid-line {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  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: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 10%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 10%, black, transparent 75%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; flex: 1; display: flex; align-items: stretch; gap: 56px; min-height: 0; }
@media (max-width: 900px) { .hero-inner { flex-direction: column; gap: 34px; } }
.hero-text-col { flex: 0 0 43%; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
@media (max-width: 900px) { .hero-text-col { flex: none; } }

/* Hero slides */
.hero-slides { position: relative; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring), visibility 0s linear 0.65s; }
.hero-slide.active { position: relative; opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring); }
.hero-tag { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted, rgba(255,255,255,0.62)); margin-bottom: 20px; display: block; }

/* The active h1 and hidden slides use .hero-headline styled identically */
.hero-slide h1,
.hero-slide .hero-headline {
  font-size: clamp(2rem, 3vw, 3.1rem); font-weight: 300; letter-spacing: -0.01em;
  font-family: 'Inter', sans-serif; line-height: 1.08;
}
.hero-slide h1 em,
.hero-slide .hero-headline em { font-style: normal; color: var(--accent, #e5921a); font-weight: 400; }
.hero-sub { font-size: 15.5px; color: var(--muted, rgba(255,255,255,0.62)); max-width: 440px; margin: 18px 0 28px; line-height: 1.62; font-weight: 400; }

/* Hero controls */
.hero-controls-row { display: flex; align-items: center; gap: 20px; margin-top: 40px; }
.banner-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25); background: transparent; color: var(--white, #ffffff);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .3s ease; flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) { .banner-arrow:hover { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); } }
.banner-arrow svg { width: 15px; height: 15px; }
.hero-dots { display: flex; gap: 10px; }
.hero-dot { width: 28px; height: 2px; background: rgba(255,255,255,0.22); cursor: pointer; position: relative; overflow: hidden; }
.hero-dot span { position: absolute; inset: 0; background: var(--accent, #e5921a); transform: scaleX(0); transform-origin: left; transition: transform .35s linear; }
.hero-dot.active span { transform: scaleX(1); }

/* Hero image column */
.hero-image-col {
  flex: 1; position: relative; min-height: 400px;
  border-radius: 3px; overflow: hidden; border: 1px solid var(--hair, rgba(255,255,255,0.10));
}
@media (max-width: 900px) { .hero-image-col { height: 46vh; min-height: 320px; } }

/* Panel container — overlay mode, no scroll.
   ⚠️ Fills its column ABSOLUTELY, not with height: 100%. .hero-image-col is a
   flex item (flex: 1 1 0%) in the column-flex .wrap, so its height comes from
   flex layout and Chrome treats it as indefinite for percentage children —
   height: 100% here resolved to 0, which collapsed .banner-panel (inset: 0)
   and left the homepage hero photo invisible on phones with just its bordered
   empty box showing. inset: 0 against the relatively positioned column needs
   no definite height at all. Found 2026-09-23; pre-dates that session. */
.hero-banner-row { position: absolute; inset: 0; }

/* Each panel overlays the image column; only .active is visible */
.banner-panel {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.65s var(--ease-spring), visibility 0s linear 0.65s;
}
.banner-panel.active {
  opacity: 1; visibility: visible;
  transition: opacity 0.65s var(--ease-spring);
}
/* Image support — drop a real <img> inside any panel and it fills with cover */
.banner-panel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.banner-panel img { transform: scale(1.05); transition: transform 900ms var(--ease-out); }
.banner-panel.active img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .banner-panel img, .banner-panel.active img { transform: none; } }
.banner-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,6,0.7) 0%, rgba(10,8,6,0.02) 40%, transparent 60%); z-index: 1; }
.banner-caption { position: absolute; left: 30px; bottom: 28px; z-index: 2; }
.banner-caption .cat { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #e5921a); display: block; margin-bottom: 6px; }
.banner-caption h4 { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 21px; color: var(--white, #ffffff); }

/* Hero scroll cue — left matches .wrap gutter so it aligns with hero-text-col */
.hero-scroll-cue {
  position: absolute; z-index: 3; left: clamp(20px, 5vw, 40px); bottom: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2, rgba(255,255,255,0.50));
  pointer-events: none;
}
@media (max-width: 900px) { .hero-scroll-cue { display: none; } }
.hero-scroll-cue .line { width: 1px; height: 26px; background: linear-gradient(var(--accent, #e5921a), transparent); animation: scrollcue 2.2s ease-in-out infinite; }
@keyframes scrollcue {
  0%   { opacity: .2; transform: scaleY(.4); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: .2; transform: scaleY(.4); transform-origin: top; }
}

/* ---------- LOGO MARQUEE ---------- */
.marquee-section { padding: 90px 0; border-top: 1px solid var(--hair, rgba(255,255,255,0.10)); border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10)); background: var(--bg-alt, #171512); }
.marquee-label { text-align: center; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2, rgba(255,255,255,0.50)); margin-bottom: 36px; }
.marquee-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
/* ---------- Continuous carousels: one shared speed ----------
   Used by both homepage logo strips AND the Approvals photo carousel.

   SPEED: a fixed animation-duration can never give equal speed, because each
   strip is a different length — at 72s / 86s / 54s they ran at 58, 124 and
   99 px/s, so "Trusted By" went twice as fast as "Certified & Approved", and
   the photo carousel even changed speed between desktop and phone. atech.js
   measures each strip and writes --marquee-duration so they all travel at the
   SAME pixels per second. The durations below are only the no-JS fallback.

   iPHONE — two reasons they froze (reported 2026-09-22):
   1. `:hover` sticks on iOS. Touching the strip while scrolling past it
      applies :hover and it stays until you tap elsewhere — which paused the
      animation. Pause-on-hover is now for real mouse devices only.
   2. The strip sits inside a mask-image. WebKit can stop repainting a
      transform animation inside a masked parent unless the moving element has
      its own compositor layer; will-change + translate3d gives it one. */
.marquee-track {
  display: flex; align-items: center; gap: 34px; width: max-content;
  animation: scrollx var(--marquee-duration, 72s) linear infinite;
  will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* Second (Trusted By) strip runs the other way — same speed. */
.marquee-track--reverse { animation-direction: reverse; }
@media (hover: hover) and (pointer: fine) {
  .marquee-track:hover { animation-play-state: paused; }
}
@keyframes scrollx { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.logo-pill { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 500; color: var(--muted, rgba(255,255,255,0.62)); letter-spacing: .02em; white-space: nowrap; opacity: .7; filter: grayscale(1); transition: opacity .3s ease, filter .3s ease; display: flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .logo-pill:hover { opacity: 1; filter: grayscale(0); color: var(--white, #ffffff); } }
/* Logo frames are 600x200 with transparency; cap the height and let the
   width follow so mixed logo shapes sit on one optical baseline. */
.logo-pill:has(.marquee-logo) { opacity: 1; filter: grayscale(1); }
@media (hover: hover) and (pointer: fine) { .logo-pill:has(.marquee-logo):hover { filter: grayscale(0); } }
.marquee-logo { height: 116px; width: auto; max-width: 380px; object-fit: contain; display: block; }
@media (max-width: 700px) { .marquee-logo { height: 76px; max-width: 240px; } }

/* ---------- WHY CHOOSE ---------- */
.why-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 50px; } }
.why-visual {
  position: relative; aspect-ratio: 4/5; border-radius: 2px; overflow: hidden;
  background: linear-gradient(150deg, #2a2015 0%, #1c1815 45%, #100e0c 100%);
  border: 1px solid var(--hair, rgba(255,255,255,0.10));
}
.why-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.why-visual::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(229,146,26,0.05) 0 2px, transparent 2px 40px); }
@media (hover: hover) and (pointer: fine) { .why-visual:hover img { transform: scale(1.04); } }
.why-visual .corner-tag { position: absolute; bottom: 26px; left: 26px; right: 26px; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, rgba(255,255,255,0.62)); }
.stats-row { display: flex; gap: 0; margin-top: 48px; }
.stat { flex: 1; padding: 28px 24px 0 0; }
.stat-num { font-family: 'Inter', sans-serif; font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 400; color: var(--accent, #e5921a); }
.stat-label { font-size: 12px; color: var(--muted, rgba(255,255,255,0.62)); letter-spacing: .05em; margin-top: 8px; }

/* ---------- SERVICES GRID ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; gap: 16px; } }
.service-card {
  background: var(--bg-card, #1c1815);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 36px 32px 32px;
  display: flex; flex-direction: column; min-height: 380px;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) { .service-card:hover { border-color: rgba(229,146,26,0.45);
  transform: translateY(-3px);
  box-shadow: 0 22px 54px -18px rgba(0,0,0,0.7); } }
.service-tag { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,0.52); margin-bottom: 20px; }
.service-card h3 { font-size: 22px; font-weight: 400; margin: 0 0 14px; font-family: 'Inter', sans-serif; }
.service-card p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 14px; line-height: 1.75; margin-bottom: 24px; flex-grow: 1; }
.service-link { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--accent, #e5921a); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .service-link:hover { text-decoration: underline; text-underline-offset: 4px; } }
.service-link svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) { .service-card:hover .service-link svg, .service-link:hover svg { transform: translateX(5px); } }

/* ---------- PROCESS SECTION ---------- */
.process-section { background: var(--bg-alt, #171512); border-top: 1px solid var(--hair, rgba(255,255,255,0.10)); border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10)); }
.process-intro-copy { color: var(--muted, rgba(255,255,255,0.62)); font-size: 15px; line-height: 1.75; max-width: 820px; margin-top: 20px; }
.process-rail { position: relative; margin-top: 70px; }
.process-line-track { position: absolute; top: 19px; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.14); }
.process-line-fill { position: absolute; top: 19px; left: 0; height: 1px; background: var(--accent, #e5921a); width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 12px rgba(229,146,26,0.6); }
.process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; }
@media (max-width: 900px) { .process-steps { grid-template-columns: 1fr; gap: 0; } .process-line-track, .process-line-fill { display: none; } }
.process-step { cursor: pointer; padding-top: 0; }
button.process-step { background: none; border: 0; color: inherit; font: inherit; text-align: left; display: block; width: 100%; }
button.process-step .step-title { display: block; }
button.process-step:focus-visible { outline: 2px solid var(--accent, #e5921a); outline-offset: 6px; }
.step-node { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--muted, rgba(255,255,255,0.62)); background: var(--bg-alt, #171512); transition: border-color 0.35s var(--ease-spring), color 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring); position: relative; z-index: 2; }
.process-step.active .step-node { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); box-shadow: 0 0 0 5px rgba(229,146,26,0.12); }
.step-title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; margin: 22px 0 10px; color: var(--white, #ffffff); transition: color 0.35s var(--ease-spring); }
.process-step.active .step-title { color: var(--accent, #e5921a); }

/* Desktop: body is hidden inside the grid cell; shown in the detail panel below */
.step-body { font-size: 13px; line-height: 1.72; color: var(--muted, rgba(255,255,255,0.62)); }
@media (min-width: 901px) {
  .step-body { display: none; }
}

/* Detail panel — sits below the step rail, narrow column */
.process-detail-panel {
  margin-top: 36px;
  max-width: 480px;
  padding-top: 28px;
  border-top: 1px solid var(--accent-line, rgba(229,146,26,0.4));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-spring), transform 0.5s var(--ease-spring);
}
.process-detail-panel.visible {
  opacity: 1;
  transform: translateY(0);
}
.process-detail-label {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #e5921a);
  margin-bottom: 14px; display: block;
}
.process-detail-text {
  font-size: 13px; line-height: 1.72; color: var(--muted, rgba(255,255,255,0.62));
}

/* Mobile: accordion-style (step body inside each step) */
@media (max-width: 900px) {
  .process-step { border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10)); padding: 24px 0; }
  /* The 0fr → 1fr collapse only works on a real grid ITEM. Bare text inside
     .step-body is an anonymous item that cannot take min-height: 0, so every
     step stayed open at once — all five bodies stacked (reported on iPhone,
     2026-09-21). The templates now wrap the copy in <p>; this guards the case
     where someone forgets, by collapsing the box itself as well. */
  .step-body { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; max-height: 0; transition: grid-template-rows 420ms var(--ease-out), max-height 420ms var(--ease-out), opacity 320ms var(--ease-out); }
  .step-body > * { min-height: 0; margin: 0; }
  .process-step.active .step-body { grid-template-rows: 1fr; opacity: 1; max-height: 60vh; }
  .process-detail-panel { display: none; }
}

/* ---------- WALKTHROUGH BANNER ---------- */
.walkthrough {
  padding: 110px 0; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(229,146,26,0.12), transparent 65%), var(--bg, #121212);
}
.walkthrough h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); max-width: 760px; margin: 22px auto 24px; font-weight: 300; }
.walkthrough p { max-width: 600px; margin: 0 auto 40px; color: var(--muted, rgba(255,255,255,0.62)); line-height: 1.75; font-size: 15.5px; }
.wt-icon { width: 64px; height: 64px; margin: 0 auto 30px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wt-icon svg { width: 22px; height: 22px; fill: var(--accent, #e5921a); }

/* ---------- EXPERTISE TABS ---------- */
.expertise-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); margin-bottom: 48px; }
.tab-btn { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 400; padding: 0 0 20px; margin-right: 48px; color: var(--muted-dark, #525252); cursor: pointer; position: relative; background: none; border: none; }
.tab-btn.active { color: var(--ink, #121212); }
.tab-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent, #e5921a); transform: scaleX(0); transition: transform .35s ease; }
.tab-btn.active::after { transform: scaleX(1); }
.tab-panels { position: relative; }
.tab-panel { display: none; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: start; }
.tab-panel.active { display: grid; }
@media (max-width: 900px) { .tab-panel.active { grid-template-columns: 1fr; } }
.tab-visual { aspect-ratio: 1/1; border-radius: 2px; position: relative; overflow: hidden; position: sticky; top: 120px; background: linear-gradient(150deg, #ece5d8, #d8c9ab 55%, #c7a86c); }
.tab-visual.residential { background: linear-gradient(150deg, #eee7dc, #e4c9a0 55%, #cf9b52); }
.tab-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tab-visual:hover img { transform: scale(1.04); } }
/* Photo fades in when its tab becomes active */
.tab-panel .tab-visual img { opacity: 0; }
.tab-panel.active .tab-visual img { opacity: 1; transition: opacity 320ms var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.tab-visual::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(18,18,18,0.05) 0 2px, transparent 2px 42px); }
.tab-copy p { color: var(--muted-dark, #525252); font-size: 14.5px; line-height: 1.75; margin-bottom: 20px; }

/* ---------- FEATURED PROJECTS ---------- */
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .projects-grid { grid-template-columns: 1fr; } }
.project-card { position: relative; aspect-ratio: 4/5; border-radius: 2px; overflow: hidden; background: linear-gradient(160deg, #211c17, #171310); border: 1px solid var(--hair, rgba(255,255,255,0.10)); display: flex; align-items: flex-end; }
.project-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent 55%); }
.project-meta { position: relative; z-index: 2; padding: 26px; width: 100%; }
.project-meta .cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent, #e5921a); margin-bottom: 8px; display: block; }
.project-meta h4 { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 19px; color: var(--white, #ffffff); }
.section--light .project-meta h4 { color: var(--white, #ffffff); }
.project-note { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--muted-2, rgba(255,255,255,0.50)); margin-top: 8px; font-style: italic; }

/* ---------- TESTIMONIALS ---------- */
.testi-section { background: var(--bg-alt, #171512); border-top: 1px solid var(--hair, rgba(255,255,255,0.10)); border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10)); }
.testi-wrap { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.testi-quote { font-family: 'Inter', sans-serif; font-weight: 300; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.65; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.testi-name { margin-top: 32px; font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.testi-role { color: var(--muted, rgba(255,255,255,0.62)); font-size: 13px; margin-top: 4px; }
.testi-nav { display: flex; justify-content: center; gap: 14px; margin-top: 40px; }
.testi-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: background .3s ease, transform .3s ease; }
.testi-dot.active { background: var(--accent, #e5921a); transform: scale(1.3); }

/* ==========================================================================
   ABOUT PAGE — dark editorial system
   ========================================================================== */
.body-copy p { color: var(--text-muted, rgba(255,255,255,0.62)); font-size: 15.5px; line-height: 1.8; margin-top: 20px; max-width: 760px; }
.body-copy p:first-child { margin-top: 0; }

/* Mission & Vision — two real cards with gap */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 800px) { .mv-grid { grid-template-columns: 1fr; } }
.mv-card { background: var(--surface-raised, #1c1815); border: 1px solid var(--border, rgba(255,255,255,0.10)); padding: var(--space-5); border-radius: var(--radius); }
.mv-card p { color: var(--text-muted, rgba(255,255,255,0.62)); font-size: 14.5px; line-height: 1.75; margin-top: var(--space-2); }

/* Values chips — resting state identical to FAQ jump pills */
.values-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); }
.value-pill { border: 1px solid var(--border, rgba(255,255,255,0.10)); padding: 9px 20px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted, rgba(255,255,255,0.62)); border-radius: 30px; cursor: default; }

/* Team grid — card-styled tiles, photo edge-to-edge, name/role padded */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { background: var(--surface-raised, #1c1815); border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: var(--radius); overflow: hidden; }
.team-photo { aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(150deg, #2a2015, #1c1815 55%, #100e0c); position: relative; }
.team-photo::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(229,146,26,0.05) 0 2px, transparent 2px 40px); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-name { font-family: var(--font-head); font-size: 15px; font-weight: 500; color: var(--text, #ffffff); padding: var(--space-3) var(--space-3) 0; }
.team-role { font-size: 12px; color: var(--text-muted, rgba(255,255,255,0.62)); padding: 4px var(--space-3) var(--space-3); letter-spacing: .03em; }
.team-note { margin-top: var(--space-4); font-size: 13px; color: var(--text-muted, rgba(255,255,255,0.62)); font-style: italic; }

/* Standards — three real cards with gaps */
.standards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 900px) { .standards-grid { grid-template-columns: 1fr; } }
.standard-card { background: var(--surface-raised, #1c1815); border: 1px solid var(--border, rgba(255,255,255,0.10)); padding: var(--space-5); border-radius: var(--radius); }
.standard-card .num { font-family: var(--font-head); font-size: 13px; color: var(--accent, #e5921a); letter-spacing: .1em; margin-bottom: var(--space-3); display: block; font-weight: 600; }
.standard-card h3 { font-family: var(--font-head); font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 400; color: var(--text, #ffffff); margin-bottom: var(--space-2); }
.standard-card p { color: var(--text-muted, rgba(255,255,255,0.62)); font-size: 14px; line-height: 1.72; }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.page-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; align-items: end;
}
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; gap: 36px; } }
.page-hero .tagline { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2, rgba(255,255,255,0.50)); margin-top: 16px; display: block; }
.hero-side-card { background: var(--bg-card, #1c1815); border: 1px solid var(--hair, rgba(255,255,255,0.10)); padding: 36px; border-radius: 2px; }
.hero-side-card .row { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10)); font-size: 13.5px; }
.hero-side-card .row:last-of-type { border-bottom: none; }
.hero-side-card .row span:first-child { color: var(--muted-2, rgba(255,255,255,0.50)); letter-spacing: .05em; text-transform: uppercase; font-size: 10.5px; }
.hero-side-card .row span:last-child { color: var(--white, #ffffff); font-weight: 500; }
.hero-side-card .btn { width: 100%; justify-content: center; margin-top: 22px; }

/* Form */
.form-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
/*
 * ⚠️ On a phone the FORM comes first, the copy after it.
 *
 * Every "Request a Quote" / "Book a Meeting" CTA on the site points at
 * #quote-form. On desktop the two columns sit side by side, so landing on the
 * section shows the form. Stacked on a phone it did not: the eyebrow, heading,
 * intro paragraph and the contact details card came first, putting the actual
 * form 824px below the fold — you landed on the section and saw no form, which
 * read as "the button doesn't go to the form" (client, 2026-09-23).
 * Ordering the form first means the anchor lands on what the button promised.
 */
@media (max-width: 900px) {
  .form-wrap { grid-template-columns: 1fr; gap: 36px; }
  .form-wrap .form-card { order: -1; }
}
.form-card { background: var(--bg-card, #1c1815); border: 1px solid var(--hair, rgba(255,255,255,0.10)); padding: 44px; border-radius: 2px; }
@media (max-width: 520px) { .form-card { padding: 28px 22px; } }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2, rgba(255,255,255,0.50)); }
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field textarea {
  background: var(--bg, #121212); border: 1px solid var(--hair, rgba(255,255,255,0.10)); color: var(--white, #ffffff);
  font-family: 'Inter', sans-serif; font-size: 14px;
  padding: 14px 16px; border-radius: 2px; outline: none; transition: border-color .3s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--accent, #e5921a); }
.field textarea { resize: vertical; min-height: 110px; }

.form-info-copy p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 15px; line-height: 1.8; margin-top: 18px; }
.form-info-copy p:first-of-type { margin-top: 0; }

/* Consultation banner */
.consult-banner {
  padding: 90px 0; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(229,146,26,0.12), transparent 65%), var(--bg-alt, #171512);
  border-top: 1px solid var(--hair, rgba(255,255,255,0.10)); border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10));
}
.consult-banner h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); max-width: 700px; margin: 20px auto 22px; font-weight: 300; }
.consult-banner p { max-width: 600px; margin: 0 auto 34px; color: var(--muted, rgba(255,255,255,0.62)); line-height: 1.75; font-size: 15px; }



/* ==========================================================================
   FAQ PAGE — dark editorial
   ========================================================================== */

/* Jump pills */
.faq-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 38px; position: relative; z-index: 1; }
.jump-pill { font-size: 12px; letter-spacing: .05em; padding: 9px 20px; border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: 30px; color: var(--text-muted, rgba(255,255,255,0.62)); background: transparent; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .jump-pill:hover { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); } }
.jump-pill.active { border-color: var(--accent, #e5921a); background: var(--accent, #e5921a); color: var(--ink, #121212); }
.section--light .jump-pill:not(.active),
.light-section .jump-pill:not(.active) { color: var(--muted-dark, #525252); border-color: rgba(18,18,18,0.18); }
@media (hover: hover) and (pointer: fine) { .section--light .jump-pill:not(.active):hover { color: var(--accent, #e5921a); border-color: var(--accent, #e5921a); } }

/* FAQ body wrapper */
.faq-body { padding-block: clamp(4rem, 8vw, 7rem); }

/* Category sections */
.faq-section { padding-top: var(--space-6); }
.faq-section:first-child { padding-top: var(--space-4); }
.faq-cat-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.faq-cat-head .idx { font-family: var(--font-head); font-weight: 700; line-height: 1; font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--accent, #e5921a); flex-shrink: 0; }
.faq-cat-head h2 { font-family: var(--font-head); font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 400; color: var(--text, #ffffff); line-height: 1.2; }

/* Accordion list — divider rows */
.faq-list { border-top: 1px solid var(--border, rgba(255,255,255,0.10)); }
.faq-item { border-bottom: 1px solid var(--border, rgba(255,255,255,0.10)); position: relative; }

/* Left accent marker — scales in on hover / open */
.faq-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent, #e5921a); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-fast) var(--ease-spring); pointer-events: none; }
.faq-item.open::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) { .faq-item:hover::before { transform: scaleY(1); } }

/* Q heading reset */
.faq-heading { margin: 0; }

/* Q row button */
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0 var(--space-3) var(--space-3); background: transparent; border: none; cursor: pointer; text-align: left; transition: background-color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .faq-q:hover { background: rgba(255,255,255,0.025); } }
.faq-q:focus-visible { outline: 2px solid var(--accent, #e5921a); outline-offset: -2px; border-radius: 2px; }
.faq-q:focus:not(:focus-visible) { outline: none; }
.faq-q-text { font-family: var(--font-body); font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--text, #ffffff); }

/* Toggle icon: + morphs to − */
.faq-q-icon { width: 10px; height: 10px; flex-shrink: 0; position: relative; }
.faq-q-icon::before, .faq-q-icon::after { content: ''; position: absolute; background: var(--text-muted, rgba(255,255,255,0.62)); transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.faq-q-icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-q-icon::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.faq-item.open .faq-q-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-item.open .faq-q-icon::before { background: var(--accent, #e5921a); }
@media (hover: hover) and (pointer: fine) { .faq-q:hover .faq-q-icon::before, .faq-q:hover .faq-q-icon::after { background: var(--accent, #e5921a); } }

/* Answer panel — grid-row reveal (no max-height hack) */
.faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 360ms var(--ease-out), opacity 280ms var(--ease-out); }
.faq-item.open .faq-a { grid-template-rows: 1fr; opacity: 1; }
.faq-a-inner { overflow: hidden; color: var(--text-muted, rgba(255,255,255,0.62)); font-size: 14.5px; line-height: 1.75; max-width: 820px; padding-left: var(--space-3); padding-bottom: 0; transition: padding-bottom 360ms var(--ease-out); }
.faq-item.open .faq-a-inner { padding-bottom: var(--space-4); }
.faq-a-inner p { margin-top: 14px; }
.faq-a-inner p:first-child { margin-top: 0; }
.faq-a-inner .btn { margin-top: var(--space-3); }
.faq-a-inner .service-list { color: var(--text, #ffffff); font-weight: 500; }

/* Mobile */
@media (max-width: 640px) {
  .faq-cat-head { gap: var(--space-2); }
  .faq-q { padding-left: var(--space-2); }
  .faq-a-inner { padding-left: var(--space-2); }
}

/* ==========================================================================
   SERVICE + PORTFOLIO PAGES (split hero)
   ========================================================================== */
.service-hero-split { position: relative; display: flex; align-items: stretch; overflow: hidden; }
@media (max-width: 900px) { .service-hero-split { flex-direction: column; } }
.hero-copy-col {
  flex: 0 0 45%; position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 170px min(5vw, 56px) 70px min(6vw, 64px);
  background:
    radial-gradient(ellipse 90% 60% at 20% 20%, rgba(229,146,26,0.14), transparent 60%),
    linear-gradient(160deg, #151210 0%, #121212 60%, #0f0f0f 100%);
}
/* Phone/tablet: heading → carousel → content (client, 2026-09-21).
   .hero-copy-col becomes display:contents so its two halves and the carousel
   are all flex children of .service-hero-split and can be ordered. The copy
   column's gradient moves onto the hero itself so nothing changes visually —
   the carousel is opaque and covers its slice of it. */
@media (max-width: 900px) {
  .service-hero-split {
    background:
      radial-gradient(ellipse 90% 40% at 20% 10%, rgba(229,146,26,0.14), transparent 60%),
      linear-gradient(160deg, #151210 0%, #121212 60%, #0f0f0f 100%);
  }
  .hero-copy-col { display: contents; }
  .hero-copy-head { order: 1; padding: 130px 24px 24px; }
  .hero-carousel  { order: 2; }
  .hero-copy-body { order: 3; padding: 30px 24px 44px; }
  .hero-copy-head .eyebrow { margin-bottom: 4px; }
}
/* Desktop: the two wrappers are invisible — the copy column stays one column. */
@media (min-width: 901px) {
  .hero-copy-head, .hero-copy-body { display: contents; }
}
.hero-copy-col h1 { font-size: clamp(2.2rem, 3.5vw, 3rem); font-weight: 300; margin-top: 20px; line-height: 1.1; }
.hero-copy-col p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 15px; line-height: 1.8; margin-top: 20px; max-width: 480px; }
.hero-copy-col p + p { margin-top: 14px; }
.hero-copy-col .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ==========================================================================
   ELEMENTOR COMPATIBILITY — full-width page override
   ========================================================================== */
.elementor-section-full_width .wrap { max-width: none; padding: 0; }

/* ==========================================================================
   SERVICE / PORTFOLIO INNER PAGES — SHARED COMPONENTS
   ========================================================================== */

/* Section--light cascade fixes for classes defined later in stylesheet */
.section--light .body-copy p { color: var(--muted-dark, #525252); }
.section--light .form-info-copy p { color: var(--muted-dark, #525252); }
.section--light .mv-card p { color: var(--muted, rgba(255,255,255,0.62)); } /* mv-cards stay dark-bg */
.section--light .lead-copy p { color: var(--muted-dark, #525252); }
.section--light .space-block p { color: var(--muted-dark, #525252); }

/* Hero image carousel (right column, service/portfolio split hero) */
.hero-carousel { flex: 1; position: relative; }
@media (max-width: 900px) { .hero-carousel { height: 360px; } }
.hero-carousel-row { height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; cursor: grab; user-select: none; scrollbar-width: none; }
.hero-carousel-row::-webkit-scrollbar { display: none; }
.hero-carousel-row.dragging { cursor: grabbing; scroll-snap-type: none; }
.hero-carousel-panel { position: relative; flex: 0 0 100%; scroll-snap-align: start; height: 100%; overflow: hidden; background: linear-gradient(150deg, #3a2c19, #241c14 55%, #171210); }
.hero-carousel-panel:nth-child(2) { background: linear-gradient(150deg, #312a22, #211a14 55%, #141110); }
.hero-carousel-panel:nth-child(3) { background: linear-gradient(150deg, #3d2f1a, #221b12 55%, #151210); }
.hero-carousel-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,6,0.7) 0%, rgba(10,8,6,0.02) 38%, transparent 55%), linear-gradient(to bottom, rgba(10,8,6,0.5) 0%, transparent 20%); }
.carousel-caption { position: absolute; left: 32px; bottom: 28px; z-index: 2; }
.carousel-caption .cat { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #e5921a); display: block; margin-bottom: 6px; }
.carousel-title { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 20px; color: var(--white, #ffffff); }
@media (hover: hover) and (pointer: fine) { a.carousel-title:hover { color: var(--accent, #e5921a); } }
.hero-carousel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(18,18,18,0.35); backdrop-filter: blur(6px); color: var(--white, #ffffff); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s ease; }
@media (hover: hover) and (pointer: fine) { .carousel-arrow:hover { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); background: rgba(18,18,18,0.6); } }
.carousel-arrow svg { width: 15px; height: 15px; }
.carousel-arrow.prev { left: 20px; } .carousel-arrow.next { right: 20px; }
.carousel-dots { position: absolute; bottom: 26px; right: 28px; z-index: 3; display: flex; gap: 8px; }
.carousel-dot { width: 22px; height: 2px; background: rgba(255,255,255,0.3); cursor: pointer; position: relative; overflow: hidden; }
.carousel-dot span { position: absolute; inset: 0; background: var(--accent, #e5921a); transform: scaleX(0); transform-origin: left; transition: transform .35s linear; }
.carousel-dot.active span { transform: scaleX(1); }

/* Who teaser strip (light, below split hero on service pages) */
.who-teaser { padding: 56px 0; border-top: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); border-bottom: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); background: var(--white, #ffffff); color: var(--ink, #121212); }
.who-teaser .eyebrow { color: var(--accent, #e5921a); margin-bottom: 10px; }
/* "More About Atech" is an accent/solid button, exactly like Book a Meeting
   (client, 2026-10-04 — highlight only; the link and its target are unchanged).
   It sits on white, so it needs the full .btn-primary treatment, not a border
   recolour. Written against .btn-outline so the markup keeps its class. */
.who-teaser .btn-outline { background: var(--accent, #e5921a); border-color: var(--accent, #e5921a); color: var(--ink, #121212); }
@media (hover: hover) and (pointer: fine) { .who-teaser .btn-outline:hover { background: #f2a53a; border-color: #f2a53a; color: var(--ink, #121212); transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(229,146,26,0.6); } }
.who-teaser-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.who-teaser-title { font-family: var(--font-head); font-size: 20px; font-weight: 400; line-height: 1.3; max-width: 520px; color: var(--ink, #121212); margin-top: 10px; }

/* Lead form (Book a Free 3D Design, service pages) */
.lead-form-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: start; }
@media (max-width: 900px) { .lead-form-wrap { grid-template-columns: 1fr; gap: 36px; } }
.lead-copy p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 15px; line-height: 1.8; margin-top: 18px; max-width: 460px; }
.lead-copy p:first-of-type { margin-top: 0; }
.lead-copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 300; margin: 20px 0 4px; }

/* Space blocks ("For Different Spaces") */
.space-block { padding: 64px 0; border-top: 1px solid var(--hair, rgba(255,255,255,0.10)); }
.section--light .space-block,
.light-section .space-block { border-top-color: var(--hair-dark, rgba(18,18,18,0.12)); }
.space-block:first-of-type { border-top: none; }
.space-block h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 400; margin-bottom: 16px; }
.space-block p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 14.5px; line-height: 1.78; max-width: 800px; }
.space-block p + p { margin-top: 16px; }
.space-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
@media (max-width: 720px) { .space-images { grid-template-columns: 1fr 1fr; } }
.img-tile { aspect-ratio: 4/3; border-radius: 2px; background: linear-gradient(150deg, #2b2b2b, #1e1e1e 55%, #131313); border: 1px solid var(--hair, rgba(255,255,255,0.10)); position: relative; overflow: hidden; }
.section--light .img-tile,
.light-section .img-tile { border-color: var(--hair-dark, rgba(18,18,18,0.12)); }
.img-tile::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 40px); }
.showcase-note { font-size: 12px; color: var(--muted-2, rgba(255,255,255,0.50)); font-style: italic; margin-top: 14px; }
.section--light .showcase-note,
.light-section .showcase-note { color: rgba(18,18,18,0.4); }

/* Service "Why Atech" — self-contained card grid. Same gap/card tokens as .standards-grid.
   Incomplete last rows left-align with gap — no empty bordered cells. */
.sv-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); align-items: stretch; margin-top: 50px; }
@media (max-width: 800px) { .sv-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sv-why-grid { grid-template-columns: 1fr; } }
.sv-why-card { background: var(--surface-raised, #1c1815); border: 1px solid var(--border, rgba(255,255,255,0.10)); border-radius: var(--radius); padding: 36px 30px; }
.sv-why-card .num { font-family: 'Inter', sans-serif; color: var(--accent, #e5921a); font-size: 13px; letter-spacing: .08em; display: block; margin-bottom: 14px; }
.sv-why-card h3 { font-size: 16.5px; font-weight: 500; margin-bottom: 12px; font-family: 'Inter', sans-serif; color: var(--white, #ffffff); }
.sv-why-card p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 13.5px; line-height: 1.72; }
.sv-why-card { transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) { .sv-why-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -12px rgba(0,0,0,0.55); } }

/* Gallery grid (inner service pages) */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
@media (max-width: 800px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-tile { aspect-ratio: 4/5; border-radius: 2px; background: linear-gradient(160deg, #222222, #191919); border: 1px solid var(--hair, rgba(255,255,255,0.10)); }
.section--light .gallery-tile,
.light-section .gallery-tile { border-color: var(--hair-dark, rgba(18,18,18,0.12)); }

/* Consultation banner: light variant (contact page) */
.consult-banner--light {
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(229,146,26,0.16), transparent 65%), var(--white, #ffffff);
  color: var(--ink, #121212); border-top: none; border-bottom: none;
}
.consult-banner .eyebrow { color: var(--accent, #e5921a); justify-content: center; }
.consult-banner--light p { color: var(--muted-dark, #525252); }

/* ==========================================================================
   ABOUT PAGE — LIGHT SECTION OVERRIDES
   ========================================================================== */
/* Values pills on white */
.section--light .value-pill,
.light-section .value-pill { border-color: rgba(18,18,18,0.22); color: var(--muted-dark, #525252); }
/* Team on white */
.section--light .team-name,
.light-section .team-name { color: var(--ink, #121212); }
.section--light .team-role,
.light-section .team-role { color: rgba(18,18,18,0.45); }
.section--light .team-note,
.light-section .team-note { color: rgba(18,18,18,0.4); }
.section--light .team-photo,
.light-section .team-photo { border-color: var(--hair-dark, rgba(18,18,18,0.12)); }

/* ==========================================================================
   RESIDENTIAL PORTFOLIO — STACKING CARDS
   ========================================================================== */
.stack-section { padding: 20px 0 110px; }
.stack-intro { max-width: 640px; margin-bottom: 56px; }
.stack-intro h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 300; margin-top: 16px; color: var(--ink, #121212); }
.stack-wrap { position: relative; }
.stack-card {
  position: sticky;
  background: linear-gradient(150deg, #1e1e1e, #191919 65%);
  border: 1px solid var(--hair, rgba(255,255,255,0.10)); border-radius: 4px;
  padding: 52px 48px 44px; margin-bottom: 36px;
  box-shadow: 0 40px 70px -30px rgba(0,0,0,0.65);
}
.stack-card:nth-child(1) { top: 96px; z-index: 1; }
.stack-card:nth-child(2) { top: 112px; z-index: 2; }
.stack-card:nth-child(3) { top: 128px; z-index: 3; }
.stack-card:nth-child(4) { top: 144px; z-index: 4; }
.stack-card:nth-child(5) { top: 160px; z-index: 5; }
.stack-card-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.stack-num { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--accent, #e5921a); letter-spacing: .1em; flex-shrink: 0; }
.stack-card h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 400; color: var(--white, #ffffff); }
.stack-card p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 14.5px; line-height: 1.8; max-width: 760px; }
.stack-card p + p { margin-top: 14px; }
.stack-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent, #e5921a); border-radius: 4px 4px 0 0; opacity: 0.85; }
@media (max-width: 720px) {
  .stack-card { padding: 34px 26px 30px; }
  .stack-card:nth-child(1) { top: 80px; } .stack-card:nth-child(2) { top: 92px; }
  .stack-card:nth-child(3) { top: 104px; } .stack-card:nth-child(4) { top: 116px; }
  .stack-card:nth-child(5) { top: 128px; }
}

/* ==========================================================================
   PORTFOLIO PAGES — "OUR APPROACH" RAIL
   --------------------------------------------------------------------------
   Same component as the homepage "Our Process" (client, 2026-09-21): identical
   markup, identical behaviour, only the section colours differ. Everything
   structural lives in the PROCESS SECTION block above; this block only carries
   the light-section colour flips and the 6-column variant.

   The old .process-steps-6 / .port-process-detail design (a separate detail
   card, hover-to-change, a 2-column grid on phones) was removed here — it broke
   at phone widths and read as a second, unrelated component.
   ========================================================================== */
.process-section--port { background: var(--bg-alt, #171512); border-top: 1px solid var(--hair, rgba(255,255,255,0.10)); border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10)); }
.section--light.process-section--port { background: var(--white, #ffffff); border-color: var(--hair-dark, rgba(18,18,18,0.12)); }

/* Step-count variants — the base rule is 5 (homepage). */
.process-steps--4 { grid-template-columns: repeat(4, 1fr); }
.process-steps--6 { grid-template-columns: repeat(6, 1fr); gap: 20px; }
.process-steps--6 .step-title { font-size: 15px; }

/* Light-section colours for the whole rail. */
.section--light .process-line-track,
.light-section  .process-line-track { background: rgba(18,18,18,0.14); }
.section--light .step-node,
.light-section  .step-node { background: var(--white, #ffffff); border-color: rgba(18,18,18,0.22); color: var(--muted-dark, #525252); }
.section--light .process-step.active .step-node,
.light-section  .process-step.active .step-node { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); }
.section--light .step-title,
.light-section  .step-title { color: var(--ink, #121212); }
.section--light .process-step.active .step-title,
.light-section  .process-step.active .step-title { color: var(--accent, #e5921a); }
.section--light .step-body,
.light-section  .step-body,
.section--light .process-detail-text,
.light-section  .process-detail-text { color: var(--muted-dark, #525252); }
.section--light .process-step,
.light-section  .process-step { border-bottom-color: var(--hair-dark, rgba(18,18,18,0.12)); }

/* ==========================================================================
   PORTFOLIO PAGES — PROJECT CARD GRID
   ========================================================================== */
.proj-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; }
@media (max-width: 900px) { .proj-card-grid { grid-template-columns: 1fr; } }
.proj-card { border: 1px solid var(--hair, rgba(255,255,255,0.10)); border-radius: 2px; overflow: hidden; background: var(--bg-card, #1c1815); transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) { .proj-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -16px rgba(0,0,0,0.65); } }
.section--light .proj-card { border-color: var(--hair-dark, rgba(18,18,18,0.12)); }
.section--light .proj-card { background: var(--white, #ffffff); }
@media (hover: hover) and (pointer: fine) { .section--light .proj-card:hover { box-shadow: 0 20px 50px -20px rgba(18,18,18,0.28); } }
.proj-card[hidden] { display: none; }
.proj-card-link { display: flex; flex-direction: column; height: 100%; }
.proj-card-link:focus-visible { outline: 2px solid var(--accent, #e5921a); outline-offset: 3px; }
.proj-card-img { aspect-ratio: 4/3; background: linear-gradient(150deg, #2b2b2b, #1e1e1e 55%, #131313); position: relative; overflow: hidden; }
.proj-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.proj-card-img:has(img)::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .proj-card:hover .proj-card-img img { transform: scale(1.04); }
}
.proj-card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #e5921a); }
.proj-card-cta svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .proj-card:hover .proj-card-cta svg { transform: translateX(4px); } }
.proj-card-img::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 40px); }
.proj-card-body { padding: 26px 24px; display: flex; flex-direction: column; flex: 1; }
.proj-card-body .ptype { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent, #e5921a); display: block; margin-bottom: 8px; }
.proj-card-title { font-size: 19px; font-weight: 400; margin-bottom: 6px; color: var(--white, #ffffff); }
.section--light .proj-card-title { color: var(--ink, #121212); }
.proj-card-body .loc { font-size: 12.5px; color: var(--muted-2, rgba(255,255,255,0.50)); margin-bottom: 14px; }
.section--light .proj-card-body .loc { color: var(--muted-dark, #525252); }
.proj-card-body p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 13px; line-height: 1.68; margin-bottom: 18px; }
.section--light .proj-card-body p { color: var(--muted-dark, #525252); }

/* ==========================================================================
   PORTFOLIO PAGES — DETAIL BLOCKS, TRANSFORMATION CARDS, FINAL CTA
   ========================================================================== */

/* Transformation / renovation cards — dark bg-card always, light vs dark section changes gap lines */
.transf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair-dark, rgba(18,18,18,0.12)); border: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); margin-top: 50px; }
@media (max-width: 800px) { .transf-grid { grid-template-columns: 1fr; } }
.transf-card { background: var(--bg-card, #1c1815); padding: 36px 32px; }
.transf-card h3 { font-size: 18px; font-weight: 400; margin-bottom: 14px; font-family: 'Inter', sans-serif; color: var(--white, #ffffff); }
.transf-card p { color: var(--muted, rgba(255,255,255,0.62)); font-size: 13.8px; line-height: 1.75; }
.transf-card { transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) { .transf-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -12px rgba(0,0,0,0.55); } }

/* Final CTA (portfolio pages) */
.final-cta { padding: 100px 0; text-align: center; position: relative; overflow: hidden; }
.final-cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 700px; margin: 20px auto 22px; font-weight: 300; }
.final-cta p { max-width: 600px; margin: 0 auto 36px; line-height: 1.75; font-size: 15px; }
.final-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.final-cta--light { background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(229,146,26,0.16), transparent 65%), var(--white, #ffffff); color: var(--ink, #121212); }
.final-cta--light .eyebrow { color: var(--accent, #e5921a); justify-content: center; }
.final-cta--light p { color: var(--muted-dark, #525252); }
.final-cta--light .btn-outline { border-color: rgba(18,18,18,0.35); color: var(--ink, #121212); }
@media (hover: hover) and (pointer: fine) { .final-cta--light .btn-outline:hover { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); } }

/* ==========================================================================
   NINJA FORMS — scoped to .form-card (dark card context)
   Selectors are deliberately broad (input, label, textarea inside .form-card)
   plus NF-specific class names. !important is used selectively to beat NF's
   own enqueued stylesheet without nuking the cascade site-wide.
   ========================================================================== */

/* Transparent container so card bg shows through */
.form-card .nf-form-cont,
.form-card .nf-form-layout { background: transparent !important; box-shadow: none !important; }

/* Form title ("Contact Me" if enabled in NF settings) */
.form-card .nf-form-title h3,
.form-card .nf-form-title {
  color: var(--white, #ffffff) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important; font-weight: 400 !important;
  margin-bottom: 20px !important;
}

/* "Fields marked with an * are required" note */
.form-card .nf-form-fields-required,
.form-card .nf-required-note {
  color: var(--muted, rgba(255,255,255,0.62)) !important;
  font-size: 12.5px !important; margin-bottom: 22px !important;
  letter-spacing: .02em; background: transparent !important;
}

/* Required asterisk — accent colour for visibility */
.form-card .ninja-forms-req-symbol { color: var(--accent, #e5921a) !important; }

/* Field container rhythm */
.form-card .nf-field-container,
.form-card .field-wrap { margin-bottom: 18px !important; }

/* Labels */
.form-card .nf-field-label label,
.form-card label {
  color: var(--muted, rgba(255,255,255,0.62)) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important; letter-spacing: .08em !important;
  text-transform: uppercase !important;
  display: block !important; margin-bottom: 8px !important;
  font-weight: 500 !important;
}

/* All text/email/tel/textarea inputs */
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card input[type="number"],
.form-card input[type="url"],
.form-card textarea,
.form-card select,
.form-card .ninja-forms-field,
.form-card .nf-element:not([type="submit"]) {
  display: block !important;
  width: 100% !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: var(--white, #ffffff) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 13px 16px !important;
  border-radius: 2px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease !important;
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box !important;
}

/* Textarea min-height */
.form-card textarea,
.form-card textarea.ninja-forms-field,
.form-card textarea.nf-element { min-height: 130px !important; resize: vertical !important; }

/* reCAPTCHA: Google hides its token textarea with an inline display:none, which the
   display:block !important above overrides — the token then shows under Submit once
   the box is ticked. Found on production 2026-09-22. Its label is noise too. */
.form-card textarea.g-recaptcha-response { display: none !important; }
.form-card .recaptcha-container .nf-field-label { display: none !important; }

/* Placeholder text */
.form-card input::placeholder,
.form-card textarea::placeholder { color: rgba(255,255,255,0.30) !important; }

/* Focus state — orange accent glow */
.form-card input[type="text"]:focus,
.form-card input[type="email"]:focus,
.form-card input[type="tel"]:focus,
.form-card input[type="number"]:focus,
.form-card textarea:focus,
.form-card select:focus,
.form-card .ninja-forms-field:focus,
.form-card .nf-element:not([type="submit"]):focus {
  border-color: var(--accent, #e5921a) !important;
  box-shadow: 0 0 0 3px rgba(229,146,26,0.14) !important;
}

/* Submit button */
.form-card input[type="submit"],
.form-card button[type="submit"],
.form-card .nf-element[type="submit"],
.form-card .submit-container .nf-element,
.form-card .submit-wrap input[type="button"] {
  background: var(--accent, #e5921a) !important;
  color: var(--ink, #121212) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  padding: 15px 32px !important;
  cursor: pointer !important; width: 100% !important;
  box-shadow: none !important;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring) !important;
  -webkit-appearance: none; appearance: none;
}
@media (hover: hover) and (pointer: fine) { .form-card input[type="submit"]:hover, .form-card button[type="submit"]:hover, .form-card .nf-element[type="submit"]:hover { background: #f2a53a !important;
  transform: translateY(-1px) !important; } }

/* Validation errors */
.form-card .nf-error-msg,
.form-card .nf-error .nf-error-msg,
.form-card .ninja-forms-nf-error-field-errors { color: #f87171 !important; font-size: 12px !important; margin-top: 5px !important; display: block !important; }
.form-card .nf-error .ninja-forms-field,
.form-card .nf-error .nf-element:not([type="submit"]) { border-color: #f87171 !important; }

/* Success response */
.form-card .nf-response-msg,
.form-card .nf-response-msg p { color: var(--accent, #e5921a) !important; font-size: 14px !important; padding: 12px 0; }

/* ==========================================================================
   BLOG — Index / Category Archive / Single Post
   All colours via tokens. .section--light context handles the white-bg flip
   automatically for text, borders, and .jump-pill (via --muted / --hair).
   ========================================================================== */

/* ---- Extra top clearance: push first section below fixed nav ---- */
.blog-listing-section,
.single-article-section { padding-top: calc(var(--header-height) + clamp(2rem, 4vw, 3rem)); }

/* ---- Category filter row ---- */
.blog-filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-5); }

/* ---- Featured post (2-col, image left) ---- */
.blog-featured { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; margin-top: var(--space-6); }
@media (max-width: 900px) { .blog-featured { grid-template-columns: 1fr; gap: var(--space-4); } }
.blog-featured-img { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); background: var(--surface-light, #f5f3f0); position: relative; display: flex; align-items: center; justify-content: center; }
.blog-featured-img::after { content: 'ATECH'; font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: .14em; color: rgba(18,18,18,.1); position: relative; z-index: 0; }
.blog-featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.blog-cat { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #e5921a); display: block; margin-bottom: 14px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { a.blog-cat:hover { opacity: .8; } }
.blog-featured-copy h2 { font-size: clamp(1.5rem,2.6vw,2.1rem); font-weight: 400; line-height: 1.2; color: var(--ink, #121212); margin-bottom: 12px; }
.blog-featured-copy h2 a { color: inherit; }
@media (hover: hover) and (pointer: fine) { .blog-featured-copy h2 a:hover { color: var(--accent, #e5921a); } }
.blog-meta { font-size: 12px; color: var(--muted-dark, #525252); margin-bottom: 16px; }
.blog-featured-copy p { color: var(--muted-dark, #525252); font-size: 14.5px; line-height: 1.75; margin-bottom: 24px; max-width: 520px; }

/* ---- Blog grid (3-up, collapses to 2 then 1) ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); margin-top: var(--space-5); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---- Blog card ---- */
.blog-card { border: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); border-radius: var(--radius); overflow: hidden; background: var(--white, #ffffff); display: flex; flex-direction: column; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .blog-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(18,18,18,.18); } }
.blog-card-img img { transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .blog-card:hover .blog-card-img img { transform: scale(1.03); } }
.blog-card-img { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--surface-light, #f5f3f0); flex-shrink: 0; }
.blog-card-img::after { content: 'A'; font-family: var(--font-head); font-size: 28px; font-weight: 700; letter-spacing: .1em; color: rgba(18,18,18,.1); position: relative; z-index: 0; }
.blog-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.blog-card-body { padding: var(--space-4) var(--space-3); flex: 1; display: flex; flex-direction: column; }
.blog-card-body .blog-cat { margin-bottom: 10px; }
.blog-card-body h2,
.blog-card-body h3 { font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--ink, #121212); margin-bottom: 10px; }
.blog-card-body h2 a,
.blog-card-body h3 a { color: inherit; }
@media (hover: hover) and (pointer: fine) { .blog-card-body h2 a:hover, .blog-card-body h3 a:hover { color: var(--accent, #e5921a); } }
.blog-card-body .blog-meta { font-size: 11px; margin-bottom: 12px; }
.blog-card-body p { color: var(--muted-dark, #525252); font-size: 13px; line-height: 1.68; margin-bottom: 16px; }
.blog-card-body .accent-link { font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }
.blog-card-body .accent-link svg { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .blog-card:hover .accent-link svg { transform: translateX(4px); } }

/* ---- Pagination (WP paginate_links type=list) ---- */
.blog-pagination { margin-top: var(--space-5); display: flex; justify-content: center; }
.blog-pagination .page-numbers { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.blog-pagination .page-numbers li a,
.blog-pagination .page-numbers li span.page-numbers { display: inline-block; border: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); padding: 10px 16px; font-size: 13px; color: var(--muted-dark, #525252); border-radius: var(--radius); transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease; text-decoration: none; }
.blog-pagination .page-numbers li span.current { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); }
@media (hover: hover) and (pointer: fine) { .blog-pagination .page-numbers li a:hover { border-color: var(--accent, #e5921a); color: var(--accent, #e5921a); } }

/* ---- Archive header ---- */
.archive-header { margin-bottom: var(--space-5); }
.archive-header h1 { font-size: clamp(1.8rem,3.2vw,2.5rem); font-weight: 300; margin-top: var(--space-3); color: var(--ink, #121212); }
.archive-desc { color: var(--muted-dark, #525252); font-size: 15px; margin-top: var(--space-3); }

/* ---- Empty state ---- */
.no-posts { color: var(--muted-dark, #525252); font-size: 15px; padding: var(--space-5) 0; grid-column: 1/-1; }

/* ---- Newsletter banner (dark strip) ---- */
.newsletter-banner { padding: clamp(3rem,7vw,5.5rem) 0; text-align: center; position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 100% at 50% 0%,rgba(229,146,26,.14),transparent 65%), var(--bg-alt, #171512); border-top: 1px solid var(--hair, rgba(255,255,255,0.10)); border-bottom: 1px solid var(--hair, rgba(255,255,255,0.10)); }
.newsletter-banner .eyebrow { justify-content: center; }
.newsletter-banner h2 { font-size: clamp(1.7rem,3.2vw,2.4rem); max-width: 600px; margin: 20px auto 16px; font-weight: 300; color: var(--white, #ffffff); }
.newsletter-banner > .container > p,
.newsletter-banner .nl-inner > p { max-width: 500px; margin: 0 auto var(--space-5); color: var(--muted, rgba(255,255,255,0.62)); line-height: 1.7; font-size: 15px; }

/* ── Newsletter · Ninja Forms (id=3) — scoped ONLY to .newsletter ─────────
   Prefixed .newsletter on every rule — zero impact on any other NF form.
   ────────────────────────────────────────────────────────────────────────── */

/* 1 ── Strip NF chrome */
.newsletter .nf-form-cont,
.newsletter .nf-form-wrap,
.newsletter .nf-form-layout,
.newsletter .nf-form-layout form,
.newsletter .nf-form-layout form > div,
.newsletter .nf-form-content { background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.newsletter .nf-form-title,
.newsletter .nf-before-form-content,
.newsletter .nf-after-form-content,
.newsletter .nf-before-form,
.newsletter .nf-after-form,
.newsletter .nf-form-fields-required,
.newsletter .nf-before-field,
.newsletter .nf-debug-msg { display: none !important; }

/* 2 ── Centre the form block at 520px */
.newsletter .nf-form-layout,
.newsletter .nf-form-content { max-width: 520px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }

/* 3 ── Stacked column — email input full-width, button centred below */
.newsletter .nf-form-content,
.newsletter .nf-form-content .nf-fields-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
}

/* 4 ── All field containers: reset NF clear/float/margin; both take full width */
.newsletter .nf-field-container {
  clear: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

/* 5 ── Submit container: full-width row so we can centre the button inside it */
.newsletter .nf-field-container.submit-container,
.newsletter .nf-field-container.submit_container {
  flex: 0 0 auto !important;
  width: 100% !important;
}

/* 6 ── All inner wrappers (general): stretch to fill email container */
.newsletter .nf-field-container .nf-field,
.newsletter .nf-field-container .field-wrap,
.newsletter .nf-field-container .nf-row,
.newsletter .nf-field-container .nf-field-element {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* 7 ── Submit container inner wrappers: full-width with centred content.
         align-items:center on the flex column centres the auto-width button. */
.newsletter .nf-field-container.submit-container .nf-field,
.newsletter .nf-field-container.submit-container .field-wrap,
.newsletter .nf-field-container.submit-container .nf-row,
.newsletter .nf-field-container.submit-container .nf-field-element,
.newsletter .nf-field-container.submit_container .nf-field,
.newsletter .nf-field-container.submit_container .field-wrap,
.newsletter .nf-field-container.submit_container .nf-row,
.newsletter .nf-field-container.submit_container .nf-field-element {
  flex: 0 0 auto !important;
  width: 100% !important;
  align-items: center !important;
}

/* 8 ── Visually-hidden label */
.newsletter .nf-field-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* 9 ── Email input — height:40px total; box-sizing:border-box beats NF's padding inflation */
.newsletter .nf-field-container .nf-field-element input.ninja-forms-field,
.newsletter .nf-field-container .nf-field-element input:not([type="submit"]) {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  background: var(--surface-raised, #1c1815) !important;
  color: var(--text, #ffffff) !important;
  border: 1px solid var(--border, rgba(255,255,255,0.10)) !important;
  border-radius: var(--radius) !important;
  padding: 0 16px !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  transition: border-color .2s ease !important;
}
.newsletter .nf-field-container .nf-field-element input:not([type="submit"]):focus { border-color: var(--accent, #e5921a) !important; }
.newsletter .nf-field-container .nf-field-element input:not([type="submit"])::placeholder,
.newsletter .nf-field-container .nf-field-element input:not([type="submit"])::-webkit-input-placeholder { color: var(--text-muted, rgba(255,255,255,0.62)) !important; opacity: 1 !important; }

/* 10 ── Submit button — compact: height:40px, padding:0 20px, width:auto.
   box-sizing:border-box + min-height:0 kill NF's height:50px / padding:12px inflation. */
.newsletter .nf-field-container.submit-container input[type="submit"],
.newsletter .nf-field-container.submit-container input.ninja-forms-field,
.newsletter .nf-field-container.submit-container input.nf-element,
.newsletter .nf-field-container.submit_container input[type="submit"],
.newsletter .nf-field-container.submit_container input.ninja-forms-field,
.newsletter .nf-field-container.submit_container input.nf-element {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  background: var(--accent, #e5921a) !important;
  color: #171208 !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  padding: 0 20px !important;
  font-family: var(--font-head) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  -webkit-appearance: none !important;
  transition: background var(--dur-fast) ease, transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) !important;
}
@media (hover: hover) and (pointer: fine) { .newsletter .nf-field-container.submit-container input[type="submit"]:hover, .newsletter .nf-field-container.submit-container input.ninja-forms-field:hover, .newsletter .nf-field-container.submit_container input[type="submit"]:hover, .newsletter .nf-field-container.submit_container input.ninja-forms-field:hover { background: #f2a53a !important; transform: translateY(-2px) !important; box-shadow: 0 12px 30px -10px rgba(229,146,26,0.6) !important; } }

/* 11 ── Mobile (<600px): button stretches full-width (layout is already column) */
@media (max-width: 599px) {
  .newsletter .nf-field-container.submit-container .nf-field-element,
.newsletter .nf-field-container.submit_container .nf-field-element { align-items: stretch !important; }
  .newsletter .nf-field-container.submit-container input[type="submit"],
.newsletter .nf-field-container.submit-container input.ninja-forms-field,
.newsletter .nf-field-container.submit_container input[type="submit"],
.newsletter .nf-field-container.submit_container input.ninja-forms-field { display: block !important; box-sizing: border-box !important; width: 100% !important; min-height: 0 !important; }
}

/* 12 ── Messages */
.newsletter .nf-response-msg { display: block !important; text-align: center; margin-top: var(--space-4); }
.newsletter .nf-response-msg,
.newsletter .nf-response-msg * { color: var(--accent, #e5921a) !important; font-size: 14px !important; line-height: 1.6 !important; }
.newsletter .nf-after-field { margin: 4px 0 0 !important; clear: none !important; }
.newsletter .nf-error-msg,
.newsletter .ninja-forms-req-symbol { color: #f87171 !important; font-size: 12px !important; }

/* ── Subscribe embed — compact form inside .form-card on service pages ────────
   Hook: .nf-subscribe-embed on the form-card wrapper (renovations id=3, fitout id=2).
   Layout: inline row (email fills, button auto-width) → stacked on mobile.
   Button matches newsletter compact: height 40px, width:auto, padding 0 20px.
   Overrides .form-card generic rules via higher specificity + later cascade.
   ────────────────────────────────────────────────────────────────────────────── */

/* Heading block that sits above the NF form inside nf-subscribe-embed cards.
   Uses dark-card tokens: --white for heading, --muted for sub. Works in both
   dark-section (renovations) and light-section-with-dark-card (fitout) contexts
   because .section--light re-asserts dark tokens on .form-card children. */
.nf-embed-head { margin-bottom: 24px; }
.nf-embed-head h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 400; color: var(--white, #ffffff); line-height: 1.25; margin: 8px 0 10px; }
.nf-embed-head p { font-size: 13.5px; color: var(--muted, rgba(255,255,255,0.62)); line-height: 1.65; margin: 0; }

/* Strip NF chrome */
.nf-subscribe-embed .nf-form-cont,
.nf-subscribe-embed .nf-form-wrap,
.nf-subscribe-embed .nf-form-layout,
.nf-subscribe-embed .nf-form-layout form,
.nf-subscribe-embed .nf-form-layout form > div,
.nf-subscribe-embed .nf-form-content { background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.nf-subscribe-embed .nf-form-title,
.nf-subscribe-embed .nf-before-form-content,
.nf-subscribe-embed .nf-after-form-content,
.nf-subscribe-embed .nf-before-form,
.nf-subscribe-embed .nf-after-form,
.nf-subscribe-embed .nf-form-fields-required,
.nf-subscribe-embed .nf-before-field,
.nf-subscribe-embed .nf-debug-msg { display: none !important; }

/* Inline row: email flex:1, button auto-width beside it */
.nf-subscribe-embed .nf-form-content,
.nf-subscribe-embed .nf-form-content .nf-fields-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 10px !important;
}

/* All field containers: reset NF margin/float, email takes remaining space */
.nf-subscribe-embed .nf-field-container {
  clear: none !important; float: none !important;
  margin: 0 !important; padding: 0 !important;
  flex: 1 1 auto !important; min-width: 0 !important;
}

/* Submit container: shrinks to button width */
.nf-subscribe-embed .nf-field-container.submit-container,
.nf-subscribe-embed .nf-field-container.submit_container {
  flex: 0 0 auto !important; width: auto !important;
}

/* Submit container inner wrappers */
.nf-subscribe-embed .nf-field-container.submit-container .nf-field,
.nf-subscribe-embed .nf-field-container.submit-container .field-wrap,
.nf-subscribe-embed .nf-field-container.submit-container .nf-row,
.nf-subscribe-embed .nf-field-container.submit-container .nf-field-element,
.nf-subscribe-embed .nf-field-container.submit_container .nf-field,
.nf-subscribe-embed .nf-field-container.submit_container .field-wrap,
.nf-subscribe-embed .nf-field-container.submit_container .nf-row,
.nf-subscribe-embed .nf-field-container.submit_container .nf-field-element {
  flex: 0 0 auto !important; width: auto !important;
  display: flex !important; align-items: center !important;
}

/* Visually-hidden label (overrides .form-card label display:block) */
.nf-subscribe-embed .nf-field-label,
.nf-subscribe-embed .nf-field-label label {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Email input — 40px height, dark-card colours (inside form-card dark bg) */
.nf-subscribe-embed .nf-field-container .nf-field-element input.ninja-forms-field,
.nf-subscribe-embed .nf-field-container .nf-field-element input:not([type="submit"]) {
  display: block !important; box-sizing: border-box !important;
  width: 100% !important; height: 40px !important;
  min-height: 0 !important; min-width: 0 !important;
  background: rgba(255,255,255,0.05) !important; color: var(--white, #ffffff) !important;
  border: 1px solid rgba(255,255,255,0.16) !important; border-radius: var(--radius) !important;
  padding: 0 16px !important; font: inherit !important;
  font-size: 14px !important; line-height: 1 !important;
  box-shadow: none !important; outline: none !important;
  -webkit-appearance: none !important; transition: border-color .2s ease !important;
}
.nf-subscribe-embed .nf-field-container .nf-field-element input:not([type="submit"]):focus { border-color: var(--accent, #e5921a) !important; }
.nf-subscribe-embed .nf-field-container .nf-field-element input:not([type="submit"])::placeholder { color: rgba(255,255,255,0.30) !important; opacity: 1 !important; }

/* Submit button — compact, width:auto */
.nf-subscribe-embed .nf-field-container.submit-container input[type="submit"],
.nf-subscribe-embed .nf-field-container.submit-container input.ninja-forms-field,
.nf-subscribe-embed .nf-field-container.submit-container input.nf-element,
.nf-subscribe-embed .nf-field-container.submit_container input[type="submit"],
.nf-subscribe-embed .nf-field-container.submit_container input.ninja-forms-field,
.nf-subscribe-embed .nf-field-container.submit_container input.nf-element {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  box-sizing: border-box !important; width: auto !important; min-width: 0 !important;
  height: 40px !important; min-height: 0 !important; line-height: 1 !important;
  flex: 0 0 auto !important;
  background: var(--accent, #e5921a) !important; color: #171208 !important;
  border: 1px solid transparent !important; border-radius: 2px !important;
  padding: 0 20px !important; font-family: var(--font-head) !important;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  cursor: pointer !important; white-space: nowrap !important;
  -webkit-appearance: none !important;
  transition: background var(--dur-fast) ease, transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) !important;
}
@media (hover: hover) and (pointer: fine) { .nf-subscribe-embed .nf-field-container.submit-container input[type="submit"]:hover, .nf-subscribe-embed .nf-field-container.submit_container input[type="submit"]:hover { background: #f2a53a !important; transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px -10px rgba(229,146,26,0.6) !important; } }

/* Mobile (<600px): stack column, button full-width */
@media (max-width: 599px) {
  .nf-subscribe-embed .nf-form-content,
.nf-subscribe-embed .nf-form-content .nf-fields-wrap { flex-direction: column !important; }
  .nf-subscribe-embed .nf-field-container { flex: 0 0 auto !important; width: 100% !important; }
  .nf-subscribe-embed .nf-field-container.submit-container input[type="submit"],
.nf-subscribe-embed .nf-field-container.submit_container input[type="submit"] {
    display: block !important; box-sizing: border-box !important;
    width: 100% !important; min-height: 0 !important;
  }
}

/* Messages */
.nf-subscribe-embed .nf-response-msg { display: block !important; margin-top: var(--space-4); }
.nf-subscribe-embed .nf-response-msg,
.nf-subscribe-embed .nf-response-msg * { color: var(--accent, #e5921a) !important; font-size: 14px !important; line-height: 1.6 !important; }
.nf-subscribe-embed .nf-after-field { margin: 4px 0 0 !important; clear: none !important; }
.nf-subscribe-embed .nf-error-msg,
.nf-subscribe-embed .ninja-forms-req-symbol { color: #f87171 !important; font-size: 12px !important; }

/* ---- Single post ---- */
.article-wrap { max-width: 760px; margin-inline: auto; }
.article-header { margin-bottom: var(--space-5); }
.article-header .blog-cat { margin-bottom: var(--space-3); }
.article-header h1 { font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 300; line-height: 1.15; color: var(--ink, #121212); }
.article-meta { font-size: 13px; color: var(--muted-dark, #525252); margin-top: var(--space-3); }
.article-thumb { margin-block: var(--space-5); aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Article body typography — WP's the_content() output */
/* Blog body copy uses the SAME scale, colour and rhythm as .svc-article (the
   service / portfolio page copy). It was 16px pure-black on a looser leading,
   which is why the blog inner pages read in a different type voice from every
   other page (client, 2026-09-21). Headings inherit Inter from the base
   h1–h4 rule; body text is Inter at --muted-dark like the rest of the site. */
.article-body { font-size: 15.5px; line-height: 1.8; color: var(--muted-dark, #525252); }
.article-body h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 400; line-height: 1.25; margin: 40px 0 14px; color: var(--ink, #121212); }
.article-body h3 { font-family: 'Inter', sans-serif; font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 500; line-height: 1.3; margin: 30px 0 10px; color: var(--ink, #121212); }
.article-body h4 { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; margin: 26px 0 10px; color: var(--ink, #121212); }
.article-body p { margin: 0 0 18px; color: var(--muted-dark, #525252); }
.article-body strong, .article-body b { color: var(--ink, #121212); font-weight: 600; }
.article-body ul,
.article-body ol { margin: 0 0 22px; padding-left: 20px; color: var(--muted-dark, #525252); }
.article-body li { font-size: 15.5px; line-height: 1.75; color: var(--muted-dark, #525252); margin-bottom: 9px; }
.article-body li::marker { color: var(--accent, #e5921a); }
.article-body > *:first-child { margin-top: 0; }
.article-body blockquote { border-left: 3px solid var(--accent, #e5921a); padding-left: var(--space-4); margin: var(--space-5) 0; font-style: italic; color: var(--muted-dark, #525252); }
.article-body a { color: var(--ink, #121212); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent, #e5921a); }
@media (hover: hover) and (pointer: fine) { .article-body a:hover { color: var(--accent, #e5921a); } }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin-block: var(--space-4); }
/* Copy pasted from Google Docs on the old site carries inline styles — on the
   words (<span style="font-family: Arial; font-size: 11pt; color: #000000">,
   125 in one post) AND on the blocks (<p style="line-height: 1.38;
   margin: 12pt 0">). Inline styles beat the theme, so the article read in a
   different voice from every other page (2026-09-22).
   1. Inline wrappers (and bare <div>/<ul> wrappers) hand font, size and
      colour back to their paragraph.
      Weight and italics are left alone, so bold and emphasis survive.
      Links and <strong> are not in the list — they keep the theme's colours.
   2. Styled blocks get the theme's own values back, re-stated here because an
      inline style can only be beaten with !important. Keep these in step with
      the .article-body / .svc-article rules above.
   Declarations pasted WITH !important cannot be beaten from a stylesheet;
   atech_strip_inline_important() (functions.php) removes the keyword. */
.article-body :is(span, font, em, i, u, mark, small, sub, sup, div, ul, ol)[style],
.svc-article :is(span, font, em, i, u, mark, small, sub, sup, div, ul, ol)[style] {
  font-family: inherit !important; font-size: inherit !important; line-height: inherit !important;
  color: inherit !important; background-color: transparent !important;
}
/* Anything styled INSIDE a heading follows the heading entirely. */
.article-body :is(h1, h2, h3, h4, h5, h6) [style],
.svc-article :is(h1, h2, h3, h4, h5, h6) [style] {
  font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important;
  line-height: inherit !important; color: inherit !important; background-color: transparent !important;
}
/* Styled bold / links in running text: keep their colour and weight, lose
   the pasted family and size (e.g. <b style="font-size: 32px">). */
.article-body :is(b, strong, a)[style],
.svc-article :is(b, strong, a)[style] {
  font-family: inherit !important; font-size: inherit !important; line-height: inherit !important;
  background-color: transparent !important;
}
.article-body p[style], .svc-article p[style] {
  font-family: inherit !important; font-size: 15.5px !important; line-height: 1.8 !important;
  color: var(--muted-dark, #525252) !important; margin: 0 0 18px !important;
}
.article-body li[style], .svc-article li[style] {
  font-family: inherit !important; font-size: 15.5px !important; line-height: 1.75 !important;
  color: var(--muted-dark, #525252) !important; margin: 0 0 9px !important;
}
.article-body :is(h2, h3, h4)[style], .svc-article :is(h2, h3, h4)[style] {
  font-family: 'Inter', sans-serif !important; font-style: normal !important;
  color: var(--ink, #121212) !important; background-color: transparent !important;
  border: 0 !important; padding: 0 !important;
}
.article-body h2[style] { font-size: clamp(1.25rem, 2vw, 1.55rem) !important; font-weight: 400 !important; line-height: 1.25 !important; margin: 40px 0 14px !important; }
.article-body h3[style] { font-size: clamp(1.05rem, 1.6vw, 1.2rem) !important; font-weight: 500 !important; line-height: 1.3 !important; margin: 30px 0 10px !important; }
.article-body h4[style] { font-size: 1rem !important; font-weight: 600 !important; margin: 26px 0 10px !important; }
.svc-article h2[style] { font-size: clamp(1.45rem, 2.6vw, 2rem) !important; font-weight: 300 !important; line-height: 1.25 !important; margin: 56px 0 18px !important; }
.svc-article h3[style] { font-size: 1.12rem !important; font-weight: 400 !important; margin: 34px 0 12px !important; }
.svc-article h4[style] { font-size: 1rem !important; font-weight: 600 !important; margin: 26px 0 10px !important; }
.article-body > [style]:first-child, .svc-article > [style]:first-child { margin-top: 0 !important; }
/* Pasted images sit in a bare <div>, so once the pasted paragraph margins are
   gone they touch the text below. Same breathing room as .article-body img. */
.svc-article img { margin-block: var(--space-4, 22px); }

/* All Articles sits on its own row at the top; Previous and Next then sit
   on one row beneath it, hard left and hard right. */
.article-footer {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--hair-dark, rgba(18,18,18,0.12));
  display: flex; flex-direction: column; gap: var(--space-3);
}
.back-to-blog {
  align-self: center;
  font-size: 13px; color: var(--muted-dark, #525252); display: inline-flex; align-items: center; gap: 6px;
}
/* At the top of a post, above the title — same treatment as the project pages */
.back-to-blog--top {
  align-self: flex-start; margin-bottom: 18px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) { .back-to-blog:hover { color: var(--accent, #e5921a); } }
.post-navigation { width: 100%; }
.post-navigation .nav-links {
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: var(--space-3); width: 100%;
}
/* Keeps Next on the right even when there is no Previous (first/last post) */
.post-navigation .nav-previous { margin-right: auto; text-align: left; }
.post-navigation .nav-next { margin-left: auto; text-align: right; }
.post-navigation .nav-previous a,
.post-navigation .nav-next a { font-size: 13px; color: var(--muted-dark, #525252); }
@media (hover: hover) and (pointer: fine) { .post-navigation .nav-previous a:hover, .post-navigation .nav-next a:hover { color: var(--accent, #e5921a); } }
.post-navigation .nav-subtitle { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(18,18,18,.45); margin-bottom: 2px; }
.post-navigation .nav-title { display: block; }

/* ==========================================================================
   SINGLE PROJECT (single-project.php)
   ========================================================================== */
.project-header { padding: calc(var(--header-height) + clamp(48px, 6vw, 80px)) 0 0; }
.back-link { display: flex; width: fit-content; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted-dark, #525252); margin-bottom: 34px; transition: color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .back-link:hover { color: var(--accent, #e5921a); } }
.back-link svg { width: 13px; height: 13px; }
.project-header h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; max-width: 880px; margin-top: 18px; color: var(--ink, #121212); }
.project-meta-row { display: flex; flex-wrap: wrap; margin-top: 40px; border-top: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); }
.project-meta-item { flex: 1; min-width: 150px; padding: 22px 24px 0 0; margin-right: 24px; border-right: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); }
.project-meta-item:last-child { border-right: none; margin-right: 0; }
@media (max-width: 720px) {
  .project-meta-item { flex: 1 1 40%; border-right: none; border-bottom: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); padding-bottom: 18px; }
}
.project-meta-item .tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(18,18,18,0.5); margin-bottom: 8px; }
.project-meta-item .val { font-family: var(--font-head); font-size: 17px; font-weight: 400; color: var(--ink, #121212); }
.project-hero-img {
  margin-top: 44px; aspect-ratio: 16 / 7; border-radius: 2px; overflow: hidden; position: relative;
  background: linear-gradient(150deg, #2a2015, #1c1815 55%, #100e0c);
}
.project-hero-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .project-hero-img { aspect-ratio: 4 / 3; } }

.project-body { padding-top: clamp(24px, 4vw, 48px); }
.text-block { padding: 56px 0; border-top: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); }
.text-block:first-child { border-top: none; }
.text-block-grid { display: grid; grid-template-columns: 0.4fr 0.6fr; gap: 48px; }
@media (max-width: 800px) { .text-block-grid { grid-template-columns: 1fr; gap: 16px; } }
.text-block-label { position: sticky; top: calc(var(--header-height) + 24px); align-self: start; }
@media (max-width: 800px) { .text-block-label { position: static; } }
.text-block-label .num { font-family: var(--font-head); font-size: 13px; color: var(--accent, #e5921a); letter-spacing: .08em; display: block; margin-bottom: 10px; }
.text-block-label h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 400; color: var(--ink, #121212); }
.text-block-body { max-width: 680px; font-size: 16px; line-height: 1.85; color: var(--muted-dark, #525252); }
.text-block-body p + p { margin-top: 18px; }
.text-block-body h3 { font-size: 1.25rem; font-weight: 500; color: var(--ink, #121212); margin: 28px 0 10px; }
.text-block-body ul, .text-block-body ol { margin: 14px 0 14px 20px; }
.text-block-body img { border-radius: 2px; margin-block: 18px; }

.gallery-section { padding: 56px 0; border-top: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); }
.gallery-title { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 300; color: var(--ink, #121212); margin-top: 14px; }
.project-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
@media (max-width: 800px) { .project-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .project-gallery { grid-template-columns: 1fr; } }
.project-gallery .gallery-tile {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px;
  border: 0; background: var(--surface-light, #f5f3f0); cursor: zoom-in;
}
.project-gallery .gallery-tile:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* Last photo stretches so the 3-column grid never ends with empty cells */
@media (min-width: 801px) {
  .project-gallery .gallery-tile:last-child:nth-child(3n+2):not(:first-child) { grid-column: span 2; aspect-ratio: auto; }
  .project-gallery .gallery-tile:last-child:nth-child(3n+1):not(:first-child) { grid-column: span 3; aspect-ratio: 16 / 6; }
}
@media (max-width: 520px) { .project-gallery .gallery-tile:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; } }
.project-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.project-gallery .gallery-tile:focus-visible { outline: 2px solid var(--accent, #e5921a); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .project-gallery .gallery-tile:hover img { transform: scale(1.03); }
}

.project-nav-strip {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 36px 0 0; border-top: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); margin-top: 20px;
}
.project-nav-link { font-size: 13px; font-weight: 600; color: var(--ink, #121212); display: inline-flex; align-items: center; gap: 10px; transition: color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .project-nav-link:hover { color: var(--accent, #e5921a); } }
.project-nav-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.project-nav-link small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(18,18,18,0.5); margin-bottom: 3px; }
.project-nav-link.all { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-dark, #525252); }
.project-nav-link.next { justify-self: end; text-align: right; }
@media (max-width: 640px) {
  .project-nav-strip { grid-template-columns: 1fr 1fr; }
  .project-nav-link.all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* ==========================================================================
   PROJECT LISTINGS — filter, home "more" row, default + Elementor pages
   ========================================================================== */
.project-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.project-filter + .proj-card-grid { margin-top: 36px; }
/*
 * Six pills now, one of them "Dubai Municipality Approvals" — they must wrap
 * rather than push the row wide, and stay a 44px tap target on a phone.
 */
.project-filter .jump-pill { min-height: 40px; }
@media (max-width: 600px) {
  .project-filter { gap: 8px; }
  .project-filter .jump-pill { min-height: 44px; padding: 10px 16px; font-size: 11.5px; }
}
/* Shown by the filter JS only when a pill leaves the grid empty. */
.proj-filter-empty { margin-top: 36px; font-size: 15px; color: var(--muted-dark, #525252); }
.proj-filter-empty[hidden] { display: none; }
.project-filter-links,
.projects-more { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
.projects-more { justify-content: center; }

.page-elementor { padding-top: var(--header-height); }
.page-default { padding-top: calc(var(--header-height) + clamp(2rem, 5vw, 4rem)); min-height: 60vh; }
.page-default-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; color: var(--ink, #121212); margin-bottom: 28px; }
.entry-content { font-size: 16px; line-height: 1.8; color: var(--muted-dark, #525252); }
.entry-content > * + * { margin-top: 1em; }
.entry-content h2, .entry-content h3 { color: var(--ink, #121212); font-weight: 400; margin-top: 1.6em; }
.entry-content a { color: var(--accent, #e5921a); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.2em; }

/* Homepage services on white — cards stay dark */
.services-section .services-grid { background: transparent; }
.services-section .service-card { --muted: rgba(255,255,255,0.62); color: var(--white, #ffffff); }
.services-section .service-card p { color: var(--muted, rgba(255,255,255,0.62)); }

/* ---------- LONG-TAIL SERVICE PAGES (tmpl-service-detail.php) ---------- */
.svc-standfirst {
  max-width: 62ch; margin-top: 22px;
  font-size: 17px; line-height: 1.75; color: var(--muted-dark, #525252);
}
.svc-detail-head .project-hero-img { margin-top: 38px; }

/* Article + sticky contents */
.svc-body-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start; }
@media (max-width: 980px) { .svc-body-grid { grid-template-columns: 1fr; gap: 36px; } }

/* The grid sets align-items: start, which collapses this column to the height
   of its own content — leaving position: sticky nothing to travel inside, so
   the rail scrolled away instead of following the reader (found 2026-09-21).
   Stretching only the outer column fixes it; the inner box keeps its own size. */
.svc-toc { align-self: stretch; }
.svc-toc-inner { position: sticky; top: calc(var(--header-height) + 24px); }
.svc-toc-title {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-dark, #525252); margin-bottom: 16px;
}
.svc-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); }
.svc-toc li { margin: 0; }
.svc-toc a {
  display: block; padding: 7px 0 7px 16px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13.5px; line-height: 1.45; color: var(--muted-dark, #525252); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.svc-toc a:focus-visible { color: var(--ink, #121212); border-left-color: var(--accent, #e5921a); }
@media (hover: hover) and (pointer: fine) { .svc-toc a:hover { color: var(--ink, #121212); border-left-color: var(--accent, #e5921a); } }
.svc-toc-cta { margin-top: 26px; width: 100%; justify-content: center; }
@media (max-width: 980px) {
  .svc-toc-inner { position: static; }
  .svc-toc ul {
    display: flex; flex-wrap: wrap; gap: 8px;
    border-left: 0; border-top: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); padding-top: 16px;
  }
  .svc-toc a {
    padding: 7px 14px; border: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); border-radius: 100px; margin-left: 0;
  }
.svc-toc a:focus-visible { border-color: var(--accent, #e5921a); }
@media (hover: hover) and (pointer: fine) { .svc-toc a:hover { border-color: var(--accent, #e5921a); } }
  .svc-toc-cta { width: auto; }
}

/* Article body — production copy, so style by element */
.svc-article { max-width: 74ch; }
.svc-article--wide { max-width: 90ch; margin-inline: auto; }
.svc-article > *:first-child { margin-top: 0; }
.svc-article h2 {
  font-family: 'Inter', sans-serif; font-weight: 300;
  font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.25;
  color: var(--ink, #121212); margin: 56px 0 18px; scroll-margin-top: calc(var(--header-height) + 20px);
}
.svc-article h3 {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 1.12rem; color: var(--ink, #121212); margin: 34px 0 12px;
}
.svc-article h4 { font-size: 1rem; font-weight: 600; color: var(--ink, #121212); margin: 26px 0 10px; }
/* Some headings arrive wrapped in <b> and some don't; normalise so the
   heading scale is consistent down the page. */
.svc-article h2 b, .svc-article h2 strong,
.svc-article h3 b, .svc-article h3 strong,
.svc-article h4 b, .svc-article h4 strong { font-weight: inherit; color: inherit; }
.svc-article p { font-size: 15.5px; line-height: 1.8; color: var(--muted-dark, #525252); margin: 0 0 18px; }
.svc-article strong, .svc-article b { color: var(--ink, #121212); font-weight: 600; }
.svc-article ul, .svc-article ol { margin: 0 0 22px; padding-left: 20px; }
.svc-article li { font-size: 15.5px; line-height: 1.75; color: var(--muted-dark, #525252); margin-bottom: 9px; }
.svc-article li::marker { color: var(--accent, #e5921a); }
.svc-article a { color: var(--ink, #121212); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent, #e5921a); }
@media (hover: hover) and (pointer: fine) { .svc-article a:hover { color: var(--accent, #e5921a); } }

/* Cost tables — scroll rather than overflow the page on phones */
.svc-article table {
  width: 100%; border-collapse: collapse; margin: 0 0 26px;
  font-size: 14.5px; border: 1px solid var(--hair-dark, rgba(18,18,18,0.12));
}
.svc-article th, .svc-article td {
  padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--hair-dark, rgba(18,18,18,0.12));
  color: var(--muted-dark, #525252); line-height: 1.6;
}
.svc-article th { background: var(--surface-light, #f5f3f0); color: var(--ink, #121212); font-weight: 600; }
.svc-article tr:last-child td { border-bottom: 0; }

/* Gallery + FAQ blocks reuse the project components; just tighten spacing */
.svc-gallery-section, .svc-faq-section { padding-top: 0; }
.svc-faq-wrap { max-width: 860px; }
.svc-faq-wrap h2 { margin: 16px 0 34px; }

/* Related services grid */
.svc-related { border-top: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); }
.svc-related-title { margin: 16px 0 40px; }
/* 3-up, matching .blog-grid exactly — same column count, same gap, same
   breakpoints (client, 2026-09-23: "fit them into 3 how it looks in blog
   page, the same size"). The 980px cap is gone; at two columns it was what
   kept the cards wide, and at three it would squeeze them narrower than the
   blog cards. Keep these three lines in step with .blog-grid. */
.svc-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .svc-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-related-grid { grid-template-columns: 1fr; } }
.svc-related-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--white, #ffffff); border: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); border-radius: 2px; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
/* 4/3 box like .blog-card-img, but STILL contain, not cover (client choice,
   2026-09-23): these are authority graphics with their wording baked into the
   picture — DEWA, Nakheel, Trakhees — and cropping to fill cuts the text off.
   A photo that does not match 4/3 sits on a small white margin, which is the
   deliberate trade. Do not "fix" this by switching to object-fit: cover. */
.svc-related-img {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--white, #ffffff);
  border-bottom: 1px solid var(--hair-dark, rgba(18,18,18,0.12));
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
.svc-related-img img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Same padding / type scale as .blog-card-body so the two grids read alike. */
.svc-related-body { padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* Type matched to .blog-card-body: 16px title, 13px body — at three columns
   the old 1.02rem/13.5px was proportionally larger than the blog cards. */
.svc-related-body h3 { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.35; color: var(--ink, #121212); }
.svc-related-body p { font-size: 13px; line-height: 1.68; color: var(--muted-dark, #525252); }
.svc-related-more { margin-top: auto; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #e5921a); }
.svc-related-back { margin-top: 38px; }
@media (hover: hover) and (pointer: fine) {
  a.svc-related-card:hover { transform: translateY(-4px); border-color: var(--accent, #e5921a); box-shadow: 0 14px 34px rgba(18,18,18,0.09); }
  a.svc-related-card:hover .svc-related-img img { transform: scale(1.05); }
}

/* ---------- GALLERY: few photos ----------
   The default 3-column grid with a 2x2 lead tile leaves the remaining photos
   at a third of the width, which looks tiny on a page that only has 2-4.
   Below 5 photos, drop to two big columns with a full-width lead image. */
.project-gallery--few { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.project-gallery--few .gallery-tile { aspect-ratio: 3 / 2; }
.project-gallery--few .gallery-tile:first-child {
  grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9;
}
@media (min-width: 801px) {
  /* A lone trailing tile stretches instead of leaving a gap. */
  .project-gallery--few .gallery-tile:last-child:nth-child(even):not(:first-child) {
    grid-column: 1 / -1; aspect-ratio: 16 / 7;
  }
}
@media (max-width: 520px) {
  .project-gallery--few { grid-template-columns: 1fr; }
  .project-gallery--few .gallery-tile,
  .project-gallery--few .gallery-tile:first-child { aspect-ratio: 4 / 3; }
}

/* "For Different Spaces" tiles now carry real photos */
.img-tile.has-photo { background: var(--surface-light, #f5f3f0); border-color: transparent; }
.img-tile.has-photo::after { content: none; }
.img-tile.has-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .img-tile.has-photo:hover img { transform: scale(1.04); }
}

/* Blog index label — replaced the category filter pills */
.blog-latest-label {
  margin-top: 30px; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent, #e5921a);
}

/* ---------- DEFAULT PAGES (page.php) — Privacy Policy etc. ----------
   Long legal copy in the site's own type scale. Definition terms come in
   as <h3>, which is what renders them bold like the live page. */
.page-default { padding-block: clamp(3.5rem, 7vw, 6rem); }
.page-default-title {
  font-family: 'Inter', sans-serif; font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12;
  color: var(--ink, #121212); margin-bottom: 14px;
}
.page-default-title { position: relative; padding-bottom: 18px; }
.page-default-title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 2px; background: var(--accent, #e5921a);
}
.page-default-title + .entry-content { margin-top: 24px; }
.page-default .entry-content { max-width: 76ch; }
.page-default .entry-content > *:first-child { margin-top: 0; }
.entry-content h2 {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.3;
  color: var(--ink, #121212); margin: 34px 0 10px; padding-top: 18px;
  border-top: 1px solid var(--hair-dark, rgba(18,18,18,0.12));
}
.entry-content h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.entry-content h3 {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: .97rem; color: var(--ink, #121212); margin: 16px 0 3px;
}
.entry-content h4 { font-size: .95rem; font-weight: 600; color: var(--ink, #121212); margin: 20px 0 6px; }
.entry-content p { font-size: 15px; line-height: 1.62; color: var(--muted-dark, #525252); margin: 0 0 10px; }
.entry-content strong, .entry-content b { color: var(--ink, #121212); font-weight: 600; }
.entry-content ul, .entry-content ol { margin: 0 0 14px; padding-left: 20px; }
.entry-content li { font-size: 15px; line-height: 1.6; color: var(--muted-dark, #525252); margin-bottom: 5px; }
.entry-content li::marker { color: var(--accent, #e5921a); }
.entry-content a { color: var(--ink, #121212); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent, #e5921a); }
@media (hover: hover) and (pointer: fine) { .entry-content a:hover { color: var(--accent, #e5921a); } }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 14.5px; border: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); }
.entry-content th, .entry-content td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); color: var(--muted-dark, #525252); }
.entry-content th { background: var(--surface-light, #f5f3f0); color: var(--ink, #121212); font-weight: 600; }

/* ---------- LARGE PHOTO MARQUEE (Approvals) ----------
   Images are shown whole, never cropped — they are authority graphics.
   Same continuous scroll as the homepage logo marquees. */
.photo-marquee-section { overflow: hidden; }
.photo-marquee-wrap {
  margin-top: 46px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.photo-marquee-track {
  display: flex; align-items: center; gap: 34px; width: max-content;
  animation: scrollx var(--marquee-duration, 54s) linear infinite;
  will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .photo-marquee-track:hover { animation-play-state: paused; }
}
.photo-marquee-item {
  flex: 0 0 auto;
  width: clamp(300px, 42vw, 620px);
  height: clamp(220px, 30vw, 430px);
  background: var(--white, #ffffff);
  border: 1px solid var(--hair-dark, rgba(18,18,18,0.12)); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
.photo-marquee-item img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
}
@media (prefers-reduced-motion: reduce) {
  .photo-marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* Service hero with no carousel column (Approvals) */
/* Approvals hero has no photo column, so the copy column must stop being a
   45% flex track — otherwise the text stays in a narrow strip with a large
   empty gap beside it. Full width, centred, wider measure. */
.service-hero-split--solo .hero-copy-col {
  flex: 1 1 100%;
  align-items: center;
  padding-inline: clamp(20px, 5vw, 40px);
}
/* .hero-copy-head / .hero-copy-body are display:contents, so centre the real
   children rather than the wrappers. */
.service-hero-split--solo .hero-copy-head > *,
.service-hero-split--solo .hero-copy-body > * {
  width: 100%; max-width: 1180px; margin-inline: auto;
}
/* The Approvals hero has no carousel, so its copy stays one uninterrupted
   column on phones — just restore the padding display:contents dropped. */
@media (max-width: 900px) {
  .service-hero-split--solo .hero-copy-head { padding-bottom: 0; }
  .service-hero-split--solo .hero-copy-body { padding-top: 18px; }
}
.service-hero-split--solo .hero-copy-col p { max-width: 1180px; }

/* Lead section: contact CTA card replacing the subscribe form */
.lead-cta-card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* .form-card stays DARK inside .section--light, so the text in it must be
   light — otherwise it inherits the on-white colours and disappears. */
.lead-cta-card .eyebrow { color: var(--accent, #e5921a); }
.lead-cta-card h3 {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 1.3rem; line-height: 1.25; color: var(--white, #ffffff);
}
.lead-cta-card p { font-size: 14.5px; line-height: 1.7; color: var(--muted-2, rgba(255,255,255,0.50)); }
.lead-cta-btn { margin-top: 10px; }

/* Privacy Policy link — footer brand column, under the social icons */
.footer-privacy {
  display: inline-block; margin-top: 20px;
  font-size: 12.5px; color: var(--muted-2, rgba(255,255,255,0.50)); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.footer-privacy:focus-visible { color: var(--accent, #e5921a); border-bottom-color: var(--accent, #e5921a); }
@media (hover: hover) and (pointer: fine) { .footer-privacy:hover { color: var(--accent, #e5921a); border-bottom-color: var(--accent, #e5921a); } }

/* Contact form fallback — revealed by atech.js only if Ninja Forms never
   renders its fields (see the watchdog in atech.js). .form-card stays dark
   inside .section--light, so this text must set its own light colours. */
.form-fallback[hidden] { display: none; }
.form-fallback { padding: 8px 0; }
.form-fallback-title { font-size: 1.05rem; font-weight: 500; color: var(--white, #ffffff); margin-bottom: 8px; }
.form-fallback-text { font-size: 14.5px; line-height: 1.7; color: var(--muted-2, rgba(255,255,255,0.50)); margin-bottom: 16px; }
.form-fallback-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.form-fallback-list a { color: var(--accent, #e5921a); font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   BLOCK EDITOR — IMAGES AND MEDIA IN A POST  (client, 2026-09-25)
   --------------------------------------------------------------------------
   "I am not able to increase the size of image in the WordPress editor."

   The article column is 760px (.article-wrap), so an image can never be wider
   than that unless the block carries an alignment. The editor only offers
   Wide / Full when the theme declares add_theme_support('align-wide') — it now
   does (functions.php) — and these are the front-end half of that pair.

   .alignfull stops at the page container, NOT at the viewport edge: a 100vw
   rule is wider than the page whenever a scrollbar is present, and this site
   deliberately locks horizontal scrolling (html { overflow-x: clip }), which
   would hide the overflow rather than prevent it. Container-width is also the
   right look for a text page — the photo lines up with the header and footer.

   Applies to the blog body, the long-tail service article and the default page
   body, so an editor gets the same controls wherever they are typing.
   ========================================================================== */
.article-body figure,
.svc-article figure,
.entry-content figure { margin: var(--space-4) 0; }

.article-body figure img,
.svc-article figure img,
.entry-content figure img { display: block; }

.article-body figcaption,
.svc-article figcaption,
.entry-content figcaption {
  font-size: 13px; line-height: 1.6; color: var(--muted-dark, #525252);
  text-align: center; margin-top: 10px;
}

/* ⚠️ The width CANNOT be capped with `100%` here: a percentage resolves against
   the containing block, which is the 760px article column, so `min(1040px,100%)`
   collapses straight back to 760px and the alignment does nothing at all (built
   that way first, measured 760/760/760, 2026-09-25). The cap has to be the
   viewport, minus the page gutter on each side so a desktop scrollbar can never
   push the element wider than the page — this site clips horizontal overflow
   rather than scrolling, so an overshoot would be invisible, not harmless. */

/* Wide: past the 760px measure, still centred and still inside the page. */
.article-body .alignwide,
.svc-article .alignwide,
.entry-content .alignwide {
  width: min(1040px, calc(100vw - (2 * var(--gutter))));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Full: the page container's width — the same edges as the header and footer. */
.article-body .alignfull,
.svc-article .alignfull,
.entry-content .alignfull {
  width: min(var(--container-max, 1280px), calc(100vw - (2 * var(--gutter))));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.article-body .alignwide img,
.article-body .alignfull img,
.svc-article .alignwide img,
.svc-article .alignfull img,
.entry-content .alignwide img,
.entry-content .alignfull img { width: 100%; height: auto; }

.article-body .aligncenter,
.svc-article .aligncenter,
.entry-content .aligncenter { margin-inline: auto; text-align: center; }

.article-body .alignleft,
.svc-article .alignleft,
.entry-content .alignleft { float: left; margin: 6px var(--space-4) var(--space-3) 0; max-width: 50%; }

.article-body .alignright,
.svc-article .alignright,
.entry-content .alignright { float: right; margin: 6px 0 var(--space-3) var(--space-4); max-width: 50%; }

.article-body .wp-block-image,
.svc-article .wp-block-image,
.entry-content .wp-block-image { margin-block: var(--space-4); }

/* A gallery block keeps the theme's radius and gap. */
.article-body .wp-block-gallery,
.svc-article .wp-block-gallery,
.entry-content .wp-block-gallery { gap: var(--space-3); margin-block: var(--space-4); }

.article-body .wp-block-embed iframe,
.svc-article .wp-block-embed iframe,
.entry-content .wp-block-embed iframe { max-width: 100%; border-radius: var(--radius); }

@media (max-width: 900px) {
  /* Below the measure there is nothing to break out of: everything is one
     column, and a float would leave 50% of a phone screen for the text. */
  .article-body .alignwide, .article-body .alignfull,
  .svc-article .alignwide, .svc-article .alignfull,
  .entry-content .alignwide, .entry-content .alignfull {
    width: 100%; max-width: 100%; margin-left: 0; transform: none;
  }
  /* Here 100% IS right: below the measure the column already fills the page. */
  .article-body .alignleft, .article-body .alignright,
  .svc-article .alignleft, .svc-article .alignright,
  .entry-content .alignleft, .entry-content .alignright {
    float: none; max-width: 100%; margin-inline: 0;
  }
}

/* ==========================================================================
   TOUCH TARGETS — PHONE TAP RELIABILITY  (client, 2026-09-24)
   --------------------------------------------------------------------------
   "Some buttons need tapping twice on the phone." After ruling out hover, the
   dock and delayed JS, the measurement that explained the rest: 116 tap targets
   on staging were under Apple's 44px minimum, many only 14-17px tall —
   "Read Article" 324x15, footer links x16, footer phone/email x17, the service
   "Explore …" links 312x16, the blog category label 324x14. A 15px target is
   about a third of a fingertip, so you miss it and tap again. That is why it was
   "some places": the 48px .btn buttons always worked, the small text links did
   not.

   Two fixes here, both scoped to coarse pointers so the desktop design is
   untouched:

   1. touch-action: manipulation — removes Safari's double-tap-to-zoom wait, so
      a tap registers immediately instead of after ~300ms.
   2. A real 44px minimum height on the small text links, via padding rather
      than an invisible overlay — overlapping pseudo-element hit areas would let
      a tap land on the neighbouring link in a stacked list, which is worse than
      a small target. Padding keeps each target honest and separate.
   ========================================================================== */
@media (pointer: coarse) {
  a, button, input[type="submit"], [role="button"], [data-open-calc], .jump-pill {
    touch-action: manipulation;
  }

  /* Small standalone text links: give them a real finger-sized box. */
  .accent-link,
  .blog-cat,
  .footer-col a,
  .footer-address,
  .footer-privacy,
  .footer-map-link,
  .service-link,
  .back-link,
  .back-to-blog,
  .svc-related-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Stacked link lists: space them so neighbouring targets cannot be hit. */
  .footer-col a { padding-block: 4px; }

  /* Card CTAs sit at the foot of a card — pad upward only so the card does not grow. */
  .blog-card-body .accent-link,
  .proj-card-cta { min-height: 44px; }

  /* Contact card values are links (tel:, mailto:, the map). */
  .contact-card-value a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Round controls: 40px is close but still under the minimum. */
  .banner-arrow,
  .carousel-arrow,
  .contact-dock-toggle { min-width: 44px; min-height: 44px; }

  /* .hero-dot is NOT a round control — it is a 28x2px line with a painted
     background, so a min-width/min-height on it does not enlarge a hit area,
     it draws a 44x44 SOLID SQUARE. That is exactly what shipped: the three
     hero dots rendered as big grey/orange blocks between the two arrows on
     every phone (client, 2026-09-24). The tap area goes on a pseudo-element
     instead, so the line keeps its designed size. 38px wide is the dot pitch
     (28px dot + 10px gap), so neighbouring areas sit edge to edge and a tap
     can never land on the wrong dot. */
  .hero-dot { min-width: 0; min-height: 0; overflow: visible; }
  .hero-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Homepage expertise tabs ("Commercial Spaces" / "Residential Spaces") were 33px. */
  .tab-btn { min-height: 44px; }

  /* "On this page" rail on the long-tail service pages was 36px. */
  .svc-toc a { display: flex; align-items: center; min-height: 44px; }

  /* Project prev/next row: .prev and .next clear 44px because of their eyebrow
     line, but "All Commercial Projects" is one 11.5px line and measured 14px. */
  .project-nav-link.all { min-height: 44px; }

  /* Blog pagination numbers were 38px. */
  .blog-pagination .page-numbers li a,
  .blog-pagination .page-numbers li span.page-numbers {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* The header logo is a link; 170x40 -> 44 tall. */
  .site-nav .logo, .site-nav .logo img { min-height: 44px; }

  /* Footer social icons were 40x40. */
  .footer-social a { min-width: 44px; min-height: 44px; }
}

/* ==========================================================================
   TOUCH DEVICES — NO HOVER EFFECTS  (client, 2026-09-23)
   --------------------------------------------------------------------------
   Every :hover rule in this file already sits inside
   @media (hover: hover) and (pointer: fine), so none of them reach a phone.
   This block is belt-and-braces against CSS the theme does not control —
   Elementor, Instagram Feed and anything else a plugin injects — because on
   iOS the first tap on an element carrying a hover style is spent applying
   that style, and the button only fires on the second tap.

   Scoped to the properties iOS actually keys on (transform / opacity shifts
   that move or reveal something), on the site's interactive components only.
   Deliberately NOT a blanket `* { transform: none }` — that would break the
   carousels, the reveal animations and the marquees, all of which transform
   for reasons that have nothing to do with hover.
   ========================================================================== */
@media (hover: none) {
  .btn:hover,
  .proj-card:hover,
  .blog-card:hover,
  .svc-related-card:hover,
  .service-card:hover,
  .dock-item:hover,
  .contact-dock-toggle:hover,
  .carousel-arrow:hover,
  .banner-arrow:hover,
  .jump-pill:hover {
    transform: none;
  }
  /* Photos that zoom under the cursor stay still on a finger. */
  .proj-card:hover .proj-card-img img,
  .blog-card:hover .blog-card-img img,
  .svc-related-card:hover .svc-related-img img,
  .why-visual:hover img,
  .tab-visual:hover img {
    transform: none;
  }
}

/* ==========================================================================
   DARK-SURFACE GUARD  (2026-09-20)
   --------------------------------------------------------------------------
   Any component that keeps a DARK background while sitting inside a
   .section--light / .light-section must re-assert the on-dark tokens AND set
   its own light text colour. Inheriting the on-white tokens paints near-black
   text (#121212 / #525252) onto a near-black card (#1c1815) — invisible.

   This bit the homepage Services cards on staging, and the lead CTA card
   before that. Rule: if you add a dark card, add its class here.
   ========================================================================== */
.section--light .service-card,
.section--light .sv-why-card,
.section--light .stack-card,
.section--light .transf-card,
.section--light .mv-card,
.section--light .team-card,
.section--light .standard-card,
.section--light .form-card,
.section--light .card,
.section--light .hero-side-card,
.section--light .contact-card,
.section--light .calc-result,
.section--light .project-card,
.light-section  .service-card,
.light-section  .sv-why-card,
.light-section  .stack-card,
.light-section  .transf-card,
.light-section  .mv-card,
.light-section  .team-card,
.light-section  .standard-card,
.light-section  .form-card,
.light-section  .card,
.light-section  .hero-side-card,
.light-section  .contact-card,
.light-section  .calc-result,
.light-section  .project-card {
  --muted:      rgba(255,255,255,0.62);
  --muted-dark: rgba(255,255,255,0.62);
  --ink:        var(--white, #ffffff);
  --hair:       rgba(255,255,255,0.10);
  --text:       var(--white, #ffffff);
  --text-muted: rgba(255,255,255,0.62);
  --border:     rgba(255,255,255,0.12);
  color: var(--white, #ffffff);
}
/* .port-process-detail was removed on 2026-09-21 — the portfolio "Our Approach"
   rail now uses the homepage .process-rail component, which has no dark card. */
/* .proj-card deliberately flips to a WHITE card on light sections. */
.section--light .proj-card,
.light-section  .proj-card {
  --muted: #525252; --muted-dark: #525252; --ink: #121212;
  --text: #121212; --text-muted: #525252;
  --hair: rgba(18,18,18,0.12); --border: rgba(18,18,18,0.12);
  color: var(--ink, #121212);
}

/* Homepage Services cards — explicit, so they survive any future token churn. */
.service-card { color: var(--white, #ffffff); }
.service-card h3 { color: var(--white, #ffffff); }
.service-card p { color: rgba(255,255,255,0.62); }
.service-tag { color: rgba(255,255,255,0.52); }
.service-link { color: var(--accent, #e5921a); }

/* Dark tiles on light sections — captions must stay light. */
.section--light .project-meta h4,
.light-section  .project-meta h4 { color: var(--white, #ffffff); }
.section--light .project-meta .cat,
.light-section  .project-meta .cat { color: var(--accent, #e5921a); }

/* ==========================================================================
   RESPONSIVE TIERS  (2026-09-20)
   --------------------------------------------------------------------------
   The stylesheet above jumps straight from full desktop to 900px, so every
   layout stayed at desktop proportions through the whole tablet-landscape /
   small-laptop band (901–1180px) — 3-up service cards at 300px, a 5-column
   process rail, a 4-column footer, a 100vh side-by-side hero. This block adds
   the missing tiers and the large-screen tier.

   Breakpoints, in the order they cascade:
     >= 1600px  large desktop / TV
     <= 1180px  small laptop & tablet landscape   (NEW)
     <=  900px  tablet portrait  (existing rules live above; extras here)
     <=  600px  phone
     <=  380px  small phone
   ========================================================================== */

/* ---------- Global overflow guards (all sizes) ---------- */
/* The page must never move sideways (client, 2026-09-21: "gaps on the left and
   right when I scroll"). `clip` rather than `hidden` on purpose — `hidden`
   makes the element a scroll container, which silently kills every
   `position: sticky` descendant (the expertise photo, the long-tail "On this
   page" rail). `hidden` is listed first only as a fallback for browsers
   without `clip`; they lose sticky, newer ones do not.
   overscroll-behavior-x stops the rubber-band / swipe-back drift on trackpads
   and phones. It does NOT affect inner horizontal scrollers, so the hero
   carousels and the logo marquees still swipe normally.
   overscroll-behavior-y (client, 2026-09-22): no bounce at the top or bottom
   either. On an iPhone the page could be dragged past the footer and stay
   stuck on blank background. Inner scrollers (mobile menu sheet, calculator)
   keep their own `contain`. Side effect: no pull-to-refresh on Android.

   ⚠️ This is a lock, not a licence: it must never be used INSTEAD of finding an
   element that is too wide. tools-free check — open any page and run
   `document.documentElement.scrollWidth` in the console; it must equal
   `window.innerWidth`. The test matrix in DEPLOY-TO-STAGING.md I4 covers it. */
html {
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}
html, body { max-width: 100%; }
body { overscroll-behavior-x: none; overscroll-behavior-y: none; }
img, svg, video, iframe, table { max-width: 100%; }
.wrap, .wrap-narrow, .container { width: 100%; }
/* Long URLs / emails inside copy must not push a column wide. */
.entry-content a, .article-body a, .svc-article a,
.contact-card-value, .footer-contact a { overflow-wrap: anywhere; }
/* Any grid child may shrink below its content width. */
.services-grid > *, .projects-grid > *, .proj-card-grid > *,
.blog-grid > *, .footer-grid > *, .contact-grid > *,
.why-grid > *, .tab-panel > *, .mv-grid > *, .team-grid > *,
.sv-why-grid > *, .svc-related-grid > *, .gallery-grid > * { min-width: 0; }

/* ---------- >= 1600px — large desktop ---------- */
@media (min-width: 1600px) {
  :root { --maxw: 1600px; --container-max: 1480px; }
  .hero { max-height: 1040px; }
  .hero-slide h1,
  .hero-slide .hero-headline { font-size: clamp(2.6rem, 2.6vw, 3.6rem); }
  .section-head { max-width: 780px; }
}

/* ---------- <= 1180px — small laptop & tablet landscape ---------- */
@media (max-width: 1180px) {
  :root { --header-height: 68px; }

  /* Header: 7 nav items + logo stop fitting well before 900px. */
  .nav-links { gap: 24px; }

  /* Hero: stop forcing a full viewport height on short landscape screens. */
  .hero { height: auto; min-height: 0; max-height: none; padding-top: 112px; padding-bottom: 56px; }
  .hero-inner { gap: 36px; }
  .hero-text-col { flex: 0 0 48%; }
  .hero-image-col { min-height: 420px; }

  /* Services: 3 cards at ~300px are unreadable; go 2-up + 1. */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .service-card { min-height: 0; padding: 30px 26px 28px; }

  /* Process rail: 5 columns at ~180px each wraps every title. */
  .process-steps { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
  .process-line-track, .process-line-fill { display: none; }
  .process-detail-panel { max-width: 100%; }

  /* Expertise tabs */
  .tab-panel { grid-template-columns: 1fr 1fr; gap: 40px; }
  /* `relative`, never `static`: the photo inside is position:absolute, so a
     static .tab-visual hands it to .tab-panels (position:relative) and the
     image grows to the height of the whole panel, covering the copy. */
  .tab-visual { position: relative; top: auto; }

  /* Featured projects */
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* Why Choose */
  .why-grid { grid-template-columns: 1fr 1fr; gap: 44px; }

  /* Contact */
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-map-col { grid-column: 1 / -1; max-width: 420px; }

  /* Inner pages */
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-body-grid { gap: 40px; }
  .marquee-logo { height: 92px; max-width: 300px; }
}

/* ---------- <= 900px — tablet portrait (extras) ---------- */
/* ⚠️ EVERY multi-column rule from the 1180px tier above must be re-stated here
   (or in the 600px tier) if it should not survive down to a phone. Both media
   queries match at 390px, this block comes later, so LATER WINS — it is not
   about specificity. Missing overrides for .contact-grid, .footer-grid,
   .team-grid and .hero-text-col are why "Get In Touch" rendered as a squeezed
   two-column block on every page and the footer stayed 3-up on phones
   (client feedback, fixed 2026-09-21). Check this block when adding to 1180. */
@media (max-width: 900px) {
  .hero { padding-top: 104px; }
  .hero-slide h1,
  .hero-slide .hero-headline { font-size: clamp(1.9rem, 6vw, 2.6rem); }
  .hero-sub { max-width: none; }
  .hero-controls-row { margin-top: 28px; }
  /* Undo the 1180 tier's side-by-side hero proportions — the hero is a column
     here, so a 48% flex-basis squeezed the copy to half the viewport height. */
  .hero-text-col { flex: none; }
  .hero-image-col { min-height: 320px; }

  /* Service / portfolio split hero: .hero-carousel carries flex:1 from its
     desktop rule, which is declared LATER in the file than the hero's own
     media query — and a media query adds no specificity, so it won. In a
     column flex container flex-basis:0 is a HEIGHT of 0, collapsing the
     carousel to nothing behind the heading. Pin it here, where the tiers
     block cascades last. */
  .hero-carousel { flex: 0 0 auto; height: 360px; }

  .contact-actions, .projects-more { gap: 10px; }

  .process-steps { grid-template-columns: 1fr; gap: 0; }
  .tab-panel { grid-template-columns: 1fr; gap: 28px; }
  .why-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .marquee-section { padding: 60px 0; }
  .marquee-logo { height: 76px; max-width: 240px; }
  .section-head { margin-bottom: 28px; }

  /* "Get In Touch": one column, card below the copy, full width. */
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-card-wrap { max-width: none; justify-self: stretch; }
  .contact-title { margin-top: 14px; }
  .contact-intro { max-width: none; }

  /* Footer: 2-up, map last and full width. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-map-col { grid-column: 1 / -1; max-width: 100%; }
}

/* ---------- <= 600px — phone ---------- */
@media (max-width: 600px) {
  :root { --header-height: 64px; }

  /* Side gutters trimmed 18px → 16px (client: "excess space on the left and
     right in mobile", 2026-09-21). The bulk of that complaint was the squeezed
     two-column "Get In Touch" block fixed in the 900px tier above. */
  .wrap, .wrap-narrow, .container { padding-inline: 16px; }
  .section-pad { padding-block: clamp(52px, 12vw, 72px); }
  .hero-copy-head { padding-inline: 16px; }
  .hero-copy-body { padding-inline: 16px; }

  .hero { padding-top: 92px; padding-bottom: 36px; }
  .hero-image-col { height: 38vh; min-height: 260px; }
  .banner-caption { left: 18px; bottom: 18px; }
  .banner-caption h4 { font-size: 17px; }
  .hero-tag { font-size: 10.5px; letter-spacing: .18em; }

  /* Stats sat in a 3-up flex row and clipped on narrow phones. */
  .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }
  .stat { padding: 20px 8px 0 0; }
  .stat-label { font-size: 11px; }

  /* Expertise tabs overflowed sideways with two long labels. */
  .expertise-tabs { gap: 24px; margin-bottom: 32px; }
  .tab-btn { margin-right: 0; font-size: 15px; padding-bottom: 14px; }

  /* CTA stacks go full width — a comfortable tap target. Scoped to the
     stacking containers only, so inline buttons keep their natural width. */
  .contact-actions, .projects-more, .lead-cta-card { align-items: stretch; }
  .contact-actions { flex-direction: column; }
  .projects-more { flex-direction: column; }
  .contact-actions .btn,
  .projects-more .btn,
  .walkthrough .btn,
  .lead-cta-card .btn,
  .hero-slide .btn { width: 100%; justify-content: center; padding: 15px 22px; }
  .btn { padding: 15px 24px; }

  .service-card { padding: 26px 22px 24px; }
  .form-card { padding: 26px 20px; }
  .walkthrough { padding: 72px 0; }
  .marquee-section { padding: 48px 0; }
  .testi-quote { min-height: 0; }

  /* Expertise photos were a full-width 1:1 square — roughly a whole phone
     screen of image before any copy (client, 2026-09-21). Landscape crop,
     and no sticky offset to fight with. */
  /* `relative` — see the note in the 1180 tier: `static` let the absolutely
     positioned photo escape to .tab-panels and cover the tab copy (that was
     the "images look too big, you have to scroll twice" report, 2026-09-23). */
  .tab-visual { aspect-ratio: 16 / 10; position: relative; top: auto; }
  .why-visual { aspect-ratio: 4 / 3; }

  /* Contact details card: the 1:1 square forced four rows into ~340px and the
     text collided with the icons. Let it grow to its content instead. */
  .contact-card { aspect-ratio: auto; max-width: none; }
  .contact-card-grid { grid-template-rows: none; padding: 6px clamp(18px, 5vw, 24px); }
  .contact-card-item { padding: 18px 0; }

  /* Footer: one column, tighter rhythm — the 4-column grid squeezed onto a
     phone was the "cluttered" report. The two link columns stay side by side
     as a single 2-up block so the footer does not become a long scroll. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .site-footer { padding-top: 48px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; font-size: 13.5px; margin-top: 14px; }
  .footer-brand .logo img { height: 46px; }
  .footer-social { margin-top: 18px; }
  .footer-col { gap: 9px; font-size: 13.5px; }
  .footer-heading { font-size: 10.5px; }
  .footer-heading--spaced { margin-top: 14px; }
  .footer-map-col { grid-column: 1 / -1; }
  .footer-map { aspect-ratio: 16 / 10; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-copy { font-size: 12px; }
}

/* ---------- <= 380px — small phone (iPhone SE) ---------- */
@media (max-width: 380px) {
  .wrap, .wrap-narrow, .container { padding-inline: 14px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stats-row .stat:last-child { grid-column: 1 / -1; }
  .marquee-logo { height: 62px; max-width: 190px; }
  .nav-toggle { padding: 8px 12px; font-size: 11px; }
}

/* ---------- Forms & tables: never wider than their column ---------- */
input, select, textarea, .nf-element { max-width: 100%; }
.svc-article table, .entry-content table, .article-body table { display: block; overflow-x: auto; }
@media (max-width: 600px) {
  /* Ninja Forms lays fields out in a row by default; stack them on phones. */
  .form-card .nf-form-content { padding: 0 !important; }
  .form-card .nf-field-container { width: 100% !important; }
  .form-card input[type="submit"] { width: 100% !important; }
}

/* ---------- Imported page copy (template-parts/page-body.php) ----------
   The body field of a page that also has a theme design — the long-tail
   service copy, the approvals copy. It used to be emitted bare and ran
   edge-to-edge with no typography. Centred on its measure here. */
.page-body .svc-article { margin-inline: auto; }
.page-body .svc-article img { border-radius: var(--radius, 4px); margin: 22px 0; }
.page-body .svc-article > *:last-child { margin-bottom: 0; }

/* ---------- About hero: wide, centred block (desktop only) ----------
   Client, 2026-09-21: match the Dubai Municipality Approvals hero — the copy
   sits centred on the page and runs the full measure, instead of a 620px strip
   hugging the left with a large empty space on the right.

   Deliberately desktop-only: on a phone there is no spare width, and the normal
   left-aligned stack reads better. Mirrors .service-hero-split--solo. */
@media (min-width: 901px) {
  .page-hero--wide .page-hero-inner {
    max-width: 1180px;
    margin-inline: auto;
  }
  .page-hero--wide p { max-width: none; }
}

/* ---------- Split hero (Services + Portfolio): wider copy, unstretched photo ----------
   Client, 2026-09-23: "increase the width of the content and reduce the size of
   the photo — it looks too stretched and the quality is gone."

   The photo column used to stretch to the full hero height, which on these
   pages is set by four paragraphs of copy: a 1920x840 hero crop was being
   squeezed into a ~790x1400 box, so it was both heavily cropped and upscaled.
   Here the copy takes 56% with a wider measure, and the photo is a framed
   ~44% x 620px panel centred in the hero — close to its natural proportions.

   ⚠️ This block MUST stay at the foot of the file: `.hero-carousel { flex: 1 }`
   is declared around line 1271 and a media query adds no specificity, so an
   earlier rule would lose. Desktop only — the <=900px order
   (heading -> carousel -> content) is untouched. */
@media (min-width: 901px) {
  /* The gradient moves onto the hero itself so the area above and below the
     framed photo stays dark; the copy column paints its own copy on top. */
  .service-hero-split {
    align-items: center;
    background:
      radial-gradient(ellipse 90% 60% at 20% 20%, rgba(229,146,26,0.14), transparent 60%),
      linear-gradient(160deg, #151210 0%, #121212 60%, #0f0f0f 100%);
  }
  /* The hero now paints the gradient, so the column must not paint a second
     one over it — the two offsets left a visible vertical seam. */
  /* ⚠️ :not(--solo). The Approvals hero has NO photo column, so a 56% track
     with a 640px measure left its copy in a narrow strip against the left edge
     and the right 44% of the hero empty — this block was added for the
     two-column heroes and reached the solo one too, undoing the full-width
     centred treatment .service-hero-split--solo sets earlier in the file
     (reported 2026-09-23: make it read like the About hero). */
  .service-hero-split:not(.service-hero-split--solo) .hero-copy-col { flex: 0 0 56%; align-self: stretch; background: none; }
  .service-hero-split:not(.service-hero-split--solo) .hero-copy-col p { max-width: 640px; }
  /* Solo hero: full width, centred block, copy running the full measure —
     the same shape as .page-hero--wide on About. */
  .service-hero-split--solo .hero-copy-col { flex: 1 1 100%; background: none; }
  .service-hero-split .hero-carousel {
    flex: 0 0 44%;
    align-self: center;
    height: clamp(440px, 46vw, 620px);
  }
  /* Captions and arrows sat against the old full-height panel. */
  .service-hero-split .carousel-caption { left: 26px; bottom: 24px; }
}

/* ---------- Request a Quote CTA — always accent ----------
   Client, 2026-09-23: "it is white until we hover and then it becomes yellow —
   keep the same hover colour before and after." So this button wears the hover
   state permanently: accent border + accent label, everywhere it appears,
   including on .section--light where .btn-outline otherwise turns dark.
   Declared at the foot of the file so it beats the later section--light and
   contact-actions overrides of .btn-outline. */
.btn-quote,
.section--light .btn-quote,
.section--light .contact-actions .btn-quote,
.final-cta--light .btn-quote,
.who-teaser .btn-quote {
  border-color: var(--accent, #e5921a);
  color: var(--accent, #e5921a);
}
/* Hover keeps the same colours and adds only the usual lift + a faint wash,
   so nothing changes colour on hover any more. */
@media (hover: hover) and (pointer: fine) { .btn-quote:hover, .section--light .btn-quote:hover, .section--light .contact-actions .btn-quote:hover { border-color: var(--accent, #e5921a);
  color: var(--accent, #e5921a);
  background: rgba(229,146,26,0.10); } }

/* ---------- Contact page: cross-fading Page Gallery photos ----------
   Client, 2026-09-23: the contact details card is gone from the Contact page
   hero and from its "Get In Touch" section; photos that keep changing take its
   place. They keep the card's square frame and 440px cap, so the page's layout
   is unchanged at every width. Behaviour: assets/js/atech.js. */
.contact-photos {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: var(--contact-photo-ratio, 1 / 1);
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-card, #1c1815);
  border: 1px solid var(--hair, rgba(255,255,255,0.10));
}
.section--light .contact-photos,
.light-section .contact-photos { border-color: var(--hair-dark, rgba(18,18,18,0.12)); }
.contact-photos figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 700ms var(--ease-out, ease-out); }
.contact-photos figure.active { opacity: 1; }
.contact-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-photo-dots { position: absolute; right: 16px; bottom: 14px; z-index: 2; display: flex; gap: 7px; }
.contact-photo-dot { width: 18px; height: 2px; background: rgba(255,255,255,0.4); }
.contact-photo-dot.active { background: var(--accent, #e5921a); }
/* In the dark contact hero the frame sits beside the copy, bottom-aligned with
   it (.page-hero-grid uses align-items: end), and may use the full column. */
.contact-photos--hero { max-width: 100%; justify-self: end; }
@media (max-width: 900px) {
  .contact-photos { max-width: none; }
  /* A full-width square is most of a phone screen; landscape reads better and
     matches what the expertise photos do at this width. */
  .contact-photos, .contact-photos--hero { aspect-ratio: 16 / 11; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-photos figure { transition: none; }
}