/* ==========================================================================
   Vedaa Building Group — theme layer (visual system).

   Loaded AFTER output.css and deliberately NOT wrapped in @layer: unlayered
   CSS always wins over Tailwind's layered utilities regardless of source
   order or specificity, so this file can restyle shared components
   (.btn, .card, header, footer, sections, icons) without touching
   output.css or any of the 15 HTML pages that already use those classes.

   Contents
     1.  Tokens
     2.  Global base — texture, selection, focus, scrollbar
     3.  Typography
     4.  Media
     5.  Header & navigation
     6.  Buttons
     7.  Cards
     8.  Eyebrow
     9.  Section rhythm & tinted bands
     10. Hero sections
     11. Stats strip
     12. Project & service tiles
     13. Testimonials
     14. CTA band
     15. Marquee / trust ticker
     16. Forms
     17. Footer
     18. Motion — reveals, scroll-driven enhancement, reduced motion
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. Tokens                                                              */
/* ---------------------------------------------------------------------- */
:root {
  /* Extended brand ramp — output.css only ships 500/600/700 */
  --o-100: #fdf1e5;
  --o-200: #f8dcc0;
  --o-300: #f2bf8c;
  --o-400: #ed9f56;
  --o-500: #e67d1e;
  --o-600: #cf6f19;
  --o-700: #b25512;
  --o-rgb: 230, 125, 30;

  /* Warm architectural neutrals — replaces the flat cool greys */
  --ink: #1a1917;
  --ink-soft: #2b2a27;
  --sand-50: #faf8f5;
  --sand-100: #f2efe9;
  --sand-200: #e6e1d8;
  --line: rgba(26, 25, 23, 0.09);
  --line-strong: rgba(26, 25, 23, 0.16);

  /* Depth — layered and warm-tinted, never a single flat drop */
  --shadow-xs: 0 1px 2px rgba(26, 25, 23, 0.04);
  --shadow-soft: 0 1px 2px rgba(26, 25, 23, 0.04), 0 10px 28px -12px rgba(26, 25, 23, 0.12);
  --shadow-lifted: 0 2px 4px rgba(26, 25, 23, 0.04), 0 18px 36px -14px rgba(26, 25, 23, 0.18),
    0 40px 72px -32px rgba(26, 25, 23, 0.22);
  --shadow-glow: 0 10px 28px -10px rgba(230, 125, 30, 0.5);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Vertical rhythm — one knob for every section on the site */
  --section-y: clamp(5.5rem, 9vw, 9.5rem);
  --section-y-tight: clamp(4rem, 6vw, 6.5rem);
}

/* ---------------------------------------------------------------------- */
/* 2. Global base                                                          */
/* ---------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background-color: var(--sand-50);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Film grain — a whole-page texture so flat colour fields read as material
   rather than as printer output. Fixed + pointer-events:none so it never
   scrolls, never intercepts clicks, and costs one composited layer. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
}

::selection {
  background-color: rgba(230, 125, 30, 0.22);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--o-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Thin, warm scrollbar instead of the OS default slab */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sand-200) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--sand-200);
  border-radius: 999px;
  border: 3px solid var(--sand-50);
}
::-webkit-scrollbar-thumb:hover { background: var(--o-300); }

/* Wider gutters than the 1440px default — text running the full width of a
   large monitor is the single loudest "old template" tell. */
.container-site {
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .container-site { padding-inline: 4rem; }
}
@media (min-width: 1600px) {
  .container-site { padding-inline: 5rem; }
}

/* ---------------------------------------------------------------------- */
/* 3. Typography                                                           */
/* ---------------------------------------------------------------------- */
:root {
  --font-display: "Archivo", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
.font-display {
  font-family: var(--font-display);
}

/* Bigger, tighter, more editorial than the original scale. Tracking tightens
   as size grows, which is what makes large type look drawn rather than
   scaled up from body copy. */
.text-display {
  font-size: clamp(2.9rem, 7.2vw, 6.25rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.text-h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.text-h2 {
  font-size: clamp(1.65rem, 2.9vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.text-h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.text-meta {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Serif italic accent — set a phrase inside a heading in <em class="serif">
   for the high/low contrast pairing that reads as art-directed rather than
   as one font doing every job. */
.serif,
em.serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Body copy: shorter measure, warmer grey, better rag. */
p { text-wrap: pretty; }
.text-grey-500 { color: #6f6b64; }
main p:not([class*="text-h"]):not(.eyebrow) { max-width: 68ch; }

/* Lead paragraph — the first paragraph after a heading steps up slightly */
main h1 + p,
main h2 + p {
  font-size: 1.075rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------- */
/* 4. Media                                                                */
/* ---------------------------------------------------------------------- */
/* Every content image gets a radius. Hard 90-degree photo corners sitting
   next to rounded buttons and cards is the main thing that dated the build.
   Full-bleed backdrops and logo marks opt out immediately below. */
main img,
main video {
  border-radius: var(--radius-lg);
}
main .absolute img,
[data-kenburns] img,
#site-header img,
footer img,
.no-round img {
  border-radius: 0;
}

/* Photos usually sit in a clipping wrapper; the wrapper needs the radius too */
main .overflow-hidden {
  border-radius: var(--radius-lg);
}

img {
  transition: transform 700ms var(--ease-out-expo), filter 500ms ease;
}

/* ---------------------------------------------------------------------- */
/* 5. Header & navigation                                                  */
/* ---------------------------------------------------------------------- */
#site-header {
  background-color: rgba(250, 248, 245, 0.6) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
#site-header.is-scrolled {
  background-color: rgba(250, 248, 245, 0.86) !important;
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(26, 25, 23, 0.02), 0 12px 32px -24px rgba(26, 25, 23, 0.4);
}

/* Nav links: an underline that wipes in, not a colour flip */
.header-link {
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 200ms ease;
}
.header-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1.5px;
  width: 100%;
  background: var(--o-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 340ms var(--ease-out-expo);
}
.header-link:hover::after,
.header-link.nav-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.header-link.nav-active { color: var(--ink); }

.mega-menu {
  width: 340px;
  border-radius: var(--radius-md);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-lifted);
  padding: 0.6rem;
  overflow: hidden;
}
.mega-menu-link {
  border-radius: var(--radius-sm);
  transition: background-color 200ms ease, color 200ms ease, transform 260ms var(--ease-out-expo);
}
.mega-menu-link:hover {
  background-color: var(--sand-100);
  transform: translateX(3px);
}
.mega-menu-link [data-icon] {
  flex-shrink: 0;
  width: 30px !important;
  height: 30px !important;
  padding: 6px;
  border-radius: 8px;
  background: rgba(230, 125, 30, 0.1);
}
.mega-menu-viewall {
  border-radius: var(--radius-sm);
  border-top-color: var(--line);
  transition: gap 240ms var(--ease-out-expo);
}
.mega-menu-viewall:hover { gap: 1rem; }

.mobile-menu { background-color: var(--sand-50); transition: transform 420ms var(--ease-out-expo); }
.mobile-link {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  border-bottom-color: var(--line);
  transition: color 200ms ease, padding-left 260ms var(--ease-out-expo);
}
.mobile-link:hover,
.mobile-link.nav-active { color: var(--o-600); padding-left: 0.5rem; }
.mobile-sublink { transition: color 200ms ease, padding-left 260ms var(--ease-out-expo); }
.mobile-sublink:hover { color: var(--o-600); padding-left: 1.35rem; }

/* ---------------------------------------------------------------------- */
/* 6. Buttons                                                              */
/* ---------------------------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.9rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 320ms var(--ease-out-expo), box-shadow 320ms ease,
    background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
/* Specular sweep — a light band that crosses the button on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out-expo);
}
.btn:hover::before { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 80ms; }

/* Arrow icons inside buttons lean forward on hover */
.btn [data-icon] { transition: transform 340ms var(--ease-out-expo); }
.btn:hover [data-icon="arrowRight"] { transform: translateX(4px); }

.btn-accent {
  background: linear-gradient(135deg, var(--o-400) 0%, var(--o-500) 50%, var(--o-700) 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
  border: none;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 320ms var(--ease-out-expo), box-shadow 320ms ease, background-position 600ms ease;
}
.btn-accent:hover {
  background-position: 100% 50%;
  box-shadow: 0 16px 40px -10px rgba(230, 125, 30, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary {
  background: var(--ink);
  box-shadow: 0 10px 26px -14px rgba(26, 25, 23, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.btn-primary:hover {
  background: var(--ink-soft);
  box-shadow: 0 18px 36px -14px rgba(26, 25, 23, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-outline {
  border: 1px solid var(--line-strong);
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
}
.btn-outline:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.96);
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
}

.btn.bg-white {
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 32px -12px rgba(26, 25, 23, 0.45);
}
.btn.bg-white:hover { box-shadow: 0 20px 44px -14px rgba(26, 25, 23, 0.55); }

/* Inline "Learn more →" affordance inside cards opens up on hover */
.group .inline-flex.items-center.gap-2 { transition: gap 300ms var(--ease-out-expo); }
.group:hover .inline-flex.items-center.gap-2 { gap: 0.85rem; }

/* ---------------------------------------------------------------------- */
/* 7. Cards                                                                */
/* ---------------------------------------------------------------------- */
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #fff 0%, #fdfcfa 100%);
  box-shadow: var(--shadow-xs);
  transition: transform 420ms var(--ease-out-expo), box-shadow 420ms ease, border-color 420ms ease;
}
/* Warm wash fading up from the bottom edge on hover — depth without a colour
   flip, so the card never looks like it changed state twice. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(120% 90% at 50% 110%, rgba(230, 125, 30, 0.09), transparent 70%);
  transition: opacity 420ms ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lifted);
  border-color: rgba(230, 125, 30, 0.28);
}
.card:hover::after { opacity: 1; }

/* Icon chips: any icon directly inside a card becomes a soft rounded badge
   instead of a bare glyph — pure CSS, no markup changes, since unlayered
   rules here override the sizing utility on the same [data-icon]. */
.card > [data-icon] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 54px !important;
  height: 54px !important;
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, rgba(230, 125, 30, 0.16), rgba(230, 125, 30, 0.04));
  border: 1px solid rgba(230, 125, 30, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background 380ms ease, transform 460ms var(--ease-spring), border-color 380ms ease;
}
.card:hover > [data-icon] {
  background: linear-gradient(140deg, rgba(230, 125, 30, 0.26), rgba(230, 125, 30, 0.08));
  border-color: rgba(230, 125, 30, 0.32);
  transform: rotate(-4deg) scale(1.06);
}
.card > [data-icon] svg { width: 24px !important; height: 24px !important; }

/* ---------------------------------------------------------------------- */
/* 8. Eyebrow                                                              */
/* ---------------------------------------------------------------------- */
.eyebrow {
  padding: 0.4rem 0.95rem 0.4rem 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  border-radius: var(--radius-pill);
  background-color: rgba(230, 125, 30, 0.09);
  border: 1px solid rgba(230, 125, 30, 0.16);
  color: var(--o-700);
}
.eyebrow::before {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(230, 125, 30, 0.18);
}
/* On dark fields the amber text has to lighten to stay legible */
.bg-charcoal-900 .eyebrow,
.stats-strip .eyebrow,
.text-white .eyebrow {
  background-color: rgba(230, 125, 30, 0.14);
  border-color: rgba(230, 125, 30, 0.26);
  color: var(--o-300);
}
/* Over a hero photograph a translucent amber chip disappears into the image —
   the label needs its own dark backing to stay readable on any crop. */
main > section:first-of-type .eyebrow {
  background-color: rgba(18, 17, 16, 0.5);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--o-300);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------------------- */
/* 9. Section rhythm & tinted bands                                        */
/* ---------------------------------------------------------------------- */
main section[class*="py-24"] { padding-block: var(--section-y); }
main section[class*="py-14"],
main section[class*="py-16"] { padding-block: var(--section-y-tight); }

/* Tinted bands: swap the cool grey for a warm sand, and give the band a
   hairline edge so it reads as a deliberate panel rather than a gap. */
.bg-grey-50 { background-color: var(--sand-100) !important; }
section.bg-grey-50 { border-block: 1px solid var(--line); }
/* A tinted block that is a panel rather than a full-width band (the quote and
   contact forms) reads as a card, so it gets a card's corners and edge. */
main div.bg-grey-50 {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

section.bg-charcoal-900,
footer.bg-charcoal-900 { background-color: var(--ink) !important; }
section.bg-charcoal-900 { position: relative; overflow: hidden; }

/* ---------------------------------------------------------------------- */
/* 10. Hero sections                                                       */
/* ---------------------------------------------------------------------- */
main > section:first-of-type {
  isolation: isolate;
  position: relative;
}
/* Ambient amber light plus a bottom vignette, so white type sits on any
   photo without the flat black scrim the old build painted over everything. */
main > section:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 82% -12%, rgba(230, 125, 30, 0.4), transparent 62%),
    radial-gradient(700px 420px at 4% 108%, rgba(230, 125, 30, 0.16), transparent 68%);
  mix-blend-mode: screen;
}
main > section:first-of-type > .container-site { position: relative; z-index: 2; }

/* Each hero ships its own scrim div. Deepen it, pull the falloff higher, and
   add a left-weighted wash — the headline is left-aligned, so that is the
   side that has to hold contrast no matter how busy the photo is. */
main > section:first-of-type > .bg-gradient-to-t {
  z-index: 1;
  background-image:
    linear-gradient(
      to top,
      rgba(18, 17, 16, 0.9) 0%,
      rgba(18, 17, 16, 0.64) 26%,
      rgba(18, 17, 16, 0.32) 56%,
      rgba(18, 17, 16, 0.08) 100%
    ),
    linear-gradient(to right, rgba(18, 17, 16, 0.55) 0%, rgba(18, 17, 16, 0.14) 42%, transparent 68%) !important;
}

/* Interior heroes are shorter than the home hero; give them a floor so the
   headline never crowds the sticky header on short viewports. */
main > section:first-of-type[class*="pt-40"] { padding-top: clamp(9rem, 16vh, 12rem); }

/* Oversized so js/animations.js can drift the backdrop by up to 12% of the
   hero height without ever exposing an edge. */
[data-kenburns] {
  top: -15% !important;
  bottom: auto !important;
  height: 130%;
  will-change: transform;
}

/* ---------------------------------------------------------------------- */
/* 11. Stats strip                                                         */
/* ---------------------------------------------------------------------- */
.stats-strip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #222120 0%, var(--ink) 100%);
}
.stats-strip::before {
  /* faint dot-grid texture for depth on the flat dark field */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 40%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 40%, black 10%, transparent 75%);
  pointer-events: none;
}
.stats-strip::after {
  content: "";
  position: absolute;
  top: -22%;
  left: 50%;
  transform: translateX(-50%);
  width: 780px;
  height: 440px;
  background: radial-gradient(closest-side, rgba(230, 125, 30, 0.24), transparent 75%);
  pointer-events: none;
}

.stat-card {
  position: relative;
  text-align: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.25rem 1.9rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 420ms var(--ease-out-expo), border-color 380ms ease, background 380ms ease,
    box-shadow 380ms ease;
}
.stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(230, 125, 30, 0.4);
  background: linear-gradient(160deg, rgba(230, 125, 30, 0.13), rgba(255, 255, 255, 0.02));
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
}
.stat-card-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  margin-inline: auto;
  margin-bottom: 1.15rem;
  background: linear-gradient(135deg, rgba(230, 125, 30, 0.24), rgba(230, 125, 30, 0.06));
  border: 1px solid rgba(230, 125, 30, 0.26);
  border-radius: 12px;
  color: var(--o-400);
}
.stat-card-icon svg { width: 20px !important; height: 20px !important; }

.stat-number {
  background: linear-gradient(135deg, #ffc48c, var(--o-500) 58%, var(--o-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.045em;
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  line-height: 1;
}

/* ---------------------------------------------------------------------- */
/* 12. Project & service tiles                                             */
/* ---------------------------------------------------------------------- */
/* Project thumbnails: scrim and inner hairline on hover, so the tile reads as
   an object you can click rather than a picture with a caption below it. */
.group .overflow-hidden {
  position: relative;
  background: var(--sand-200);
}
.group:hover .overflow-hidden img { transform: scale(1.055); }
.group .overflow-hidden::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(26, 25, 23, 0.07);
  background: linear-gradient(to top, rgba(26, 25, 23, 0.35), transparent 45%);
  opacity: 0;
  transition: opacity 420ms ease;
}
.group:hover .overflow-hidden::after { opacity: 1; }

.filter-btn {
  border-radius: var(--radius-pill);
  border-color: var(--line-strong);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease,
    transform 300ms var(--ease-out-expo);
}
.filter-btn:hover { transform: translateY(-2px); }
.filter-btn.is-active {
  background-color: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--shadow-soft);
}

/* ---------------------------------------------------------------------- */
/* 13. Testimonials                                                        */
/* ---------------------------------------------------------------------- */
[data-icon="quote"] {
  background: rgba(230, 125, 30, 0.13);
  border: 1px solid rgba(230, 125, 30, 0.22);
  border-radius: var(--radius-md);
  padding: 12px !important;
  box-sizing: content-box;
  color: var(--o-400);
}

/* ---------------------------------------------------------------------- */
/* 14. CTA band                                                            */
/* ---------------------------------------------------------------------- */
/* The old build ran a flat full-bleed orange strip. Inset it into a rounded
   panel on a neutral ground: it stops competing with the footer and starts
   reading as a card. */
section.bg-orange-500 {
  background: var(--sand-50) !important;
  padding-block: var(--section-y-tight) !important;
}
section.bg-orange-500 > .container-site {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  /* The container itself becomes the panel, so it needs an outer inset of its
     own — sized to land on the same left/right edge as every other section's
     content rather than bleeding to the viewport. */
  width: calc(100% - 3rem);
  max-width: calc(var(--container-max) - 8rem);
  padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 4rem);
  background: linear-gradient(118deg, var(--o-400) 0%, var(--o-500) 48%, var(--o-700) 115%);
  box-shadow: 0 30px 60px -28px rgba(230, 125, 30, 0.65);
}
section.bg-orange-500 > .container-site::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(520px 300px at 12% 10%, rgba(255, 255, 255, 0.22), transparent 68%),
    radial-gradient(420px 260px at 96% 96%, rgba(26, 25, 23, 0.18), transparent 70%);
}
@media (min-width: 1024px) {
  section.bg-orange-500 > .container-site { width: calc(100% - 8rem); }
}
/* Blueprint hairline grid — a nod to the trade, kept faint enough to read as
   texture rather than as pattern. */
section.bg-orange-500 > .container-site::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.7) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(115deg, black, transparent 72%);
  -webkit-mask-image: linear-gradient(115deg, black, transparent 72%);
}

/* ---------------------------------------------------------------------- */
/* 15. Marquee / trust ticker                                              */
/* ---------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: marquee-scroll 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.6);
}
.marquee-item [data-icon] {
  width: 18px;
  height: 18px;
  color: var(--o-500);
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------- */
/* 16. Forms                                                               */
/* ---------------------------------------------------------------------- */
input, select, textarea {
  border-radius: var(--radius-sm) !important;
  background-color: #fff;
  border: 1px solid var(--line-strong) !important;
  padding: 0.8rem 1rem !important;
  font-size: 0.95rem;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
input::placeholder, textarea::placeholder { color: #a8a49c; }
input:hover, select:hover, textarea:hover { border-color: rgba(26, 25, 23, 0.26) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--o-500) !important;
  box-shadow: 0 0 0 4px rgba(230, 125, 30, 0.14);
  outline: none;
}
label { font-weight: 600; letter-spacing: -0.005em; }

/* ---------------------------------------------------------------------- */
/* 17. Footer                                                              */
/* ---------------------------------------------------------------------- */
footer.bg-charcoal-900 {
  background: linear-gradient(180deg, var(--ink) 0%, #131211 100%);
  position: relative;
  overflow: hidden;
}
footer.bg-charcoal-900::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 125, 30, 0.55), transparent);
}
footer.bg-charcoal-900::after {
  content: "";
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(230, 125, 30, 0.13), transparent 72%);
}
footer .container-site { position: relative; z-index: 1; }

footer h3 {
  font-size: 0.7rem !important;
  letter-spacing: 0.16em !important;
  color: rgba(255, 255, 255, 0.42) !important;
}
.footer-link {
  color: rgba(255, 255, 255, 0.72);
  transition: color 200ms ease, padding-left 280ms var(--ease-out-expo);
}
.footer-link:hover { color: var(--o-400); padding-left: 0.3rem; }
.social-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  transition: background 280ms ease, border-color 280ms ease, transform 320ms var(--ease-spring),
    box-shadow 280ms ease;
}
.social-btn:hover {
  background: linear-gradient(135deg, var(--o-500), var(--o-700));
  border-color: transparent;
  box-shadow: 0 10px 24px -8px rgba(230, 125, 30, 0.6);
  transform: translateY(-3px);
}
.footer-badges {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-badge [data-icon] {
  width: 16px;
  height: 16px;
  color: var(--o-500);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* 18. Motion                                                              */
/* ---------------------------------------------------------------------- */
/* Reveal: JS adds .is-visible (see js/animations.js). Blur-up over a short
   travel reads as focus pulling in, rather than as a slide. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo),
    filter 800ms var(--ease-out-expo);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .scroll-cue::after { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------- */
/* 19. Home page compositions                                             */
/* ---------------------------------------------------------------------- */
/* output.css is a precompiled Tailwind build containing only the utilities
   the original markup used, so the layouts introduced below are written as
   bespoke classes rather than as utility strings that would not exist. */

/* --- Hero -------------------------------------------------------------- */
.hero-home {
  min-height: 92vh;
  min-height: 92svh;
}
.hero-title { max-width: 15ch; }
.hero-lead {
  max-width: 46ch !important;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
}

/* Glass strip of proof points pinned to the bottom of the hero */
.hero-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
}
@media (min-width: 700px) {
  .hero-facts { grid-template-columns: repeat(3, 1fr); }
}
.hero-fact {
  padding: 1.25rem 1.5rem;
  background: rgba(26, 25, 23, 0.42);
}
.hero-fact dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--o-300);
}
.hero-fact dd {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

/* Sits in the right margin, above the facts strip — never over it. */
.scroll-cue {
  position: absolute;
  right: 1.75rem;
  top: 50%;
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  writing-mode: vertical-rl;
}
@media (min-width: 1280px) { .scroll-cue { display: inline-flex; } }
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 56px;
  background: linear-gradient(rgba(255, 255, 255, 0.5), transparent);
  animation: cue-drop 2.4s var(--ease-out-expo) infinite;
  transform-origin: top;
}
@keyframes cue-drop {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* --- Trust ticker ------------------------------------------------------ */
.ticker-band {
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 1.35rem;
}

/* --- Section headers --------------------------------------------------- */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .sec-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
}
.sec-head-title { max-width: 18ch; }

/* --- Intro: overlapping editorial pair --------------------------------- */
.intro-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .intro-grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(3rem, 6vw, 6rem); }
}
.intro-media { position: relative; }
.intro-media > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: var(--shadow-lifted);
}
/* Small stacked photo overlapping the main one — the depth cue a single flat
   rectangle can never give you. */
.intro-media-inset {
  position: absolute;
  right: -1.25rem;
  bottom: -2rem;
  width: 44%;
  display: none;
}
@media (min-width: 640px) { .intro-media-inset { display: block; } }
.intro-media-inset img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md) !important;
  border: 6px solid var(--sand-50);
  box-shadow: var(--shadow-lifted);
}
.intro-badge {
  position: absolute;
  left: -1rem;
  top: 1.75rem;
  z-index: 2;
  padding: 1rem 1.35rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--o-500), var(--o-700));
  color: #fff;
  box-shadow: 0 16px 34px -14px rgba(230, 125, 30, 0.75);
}
.intro-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.intro-badge span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* Checklist of differentiators under the intro copy */
.tick-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) { .tick-list { grid-template-columns: 1fr 1fr; } }
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.925rem;
  font-weight: 500;
}
.tick-list [data-icon] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  padding: 3px;
  border-radius: 999px;
  color: var(--o-600);
  background: rgba(230, 125, 30, 0.13);
}

/* --- Services: numbered index with hover preview ----------------------- */
/* Replaces the four-up icon-card grid. A ruled index reads as a considered
   list of capabilities; four identical boxes read as a template. */
.svc-index {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-strong);
}
.svc-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line-strong);
  transition: padding-inline 420ms var(--ease-out-expo);
}
/* Placement is explicit rather than auto-flowed: left to itself the arrow
   lands on its own row and stretches column one to its own width, which
   knocks the number away from the title. */
.svc-num { grid-row: 1; grid-column: 1; }
.svc-title { grid-row: 1; grid-column: 2; }
.svc-go { grid-row: 1; grid-column: 3; }
.svc-desc { grid-row: 2; grid-column: 1 / -1; }
@media (min-width: 900px) {
  .svc-row { grid-template-columns: auto minmax(0, 26ch) minmax(0, 1fr) auto; gap: 2.5rem; }
  .svc-row:hover { padding-inline: 1.5rem; }
  .svc-desc { grid-row: 1; grid-column: 3; }
  .svc-go { grid-row: 1; grid-column: 4; }
}
/* Amber wash that wipes in from the left on hover */
.svc-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(230, 125, 30, 0.1), rgba(230, 125, 30, 0));
  opacity: 0;
  transition: opacity 420ms ease;
}
.svc-row:hover::before { opacity: 1; }
.svc-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--o-600);
  font-variant-numeric: tabular-nums;
}
.svc-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  transition: color 300ms ease;
}
.svc-row:hover .svc-title { color: var(--o-700); }
.svc-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #6f6b64;
}
@media (min-width: 900px) { .svc-desc { max-width: 46ch; } }
.svc-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease,
    transform 460ms var(--ease-spring);
}
.svc-go svg { width: 18px; height: 18px; }
.svc-row:hover .svc-go {
  background: var(--o-500);
  border-color: var(--o-500);
  color: #fff;
  transform: rotate(45deg) scale(1.08);
}
/* Floating photo that fades in beside the hovered row. Desktop-only: it is
   decoration, and on touch there is no hover state to trigger it. */
.svc-peek {
  position: absolute;
  right: 7rem;
  top: 50%;
  z-index: 3;
  width: 230px;
  height: 155px;
  object-fit: cover;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lifted);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateY(14px) rotate(-4deg) scale(0.94);
  transition: opacity 380ms ease, transform 520ms var(--ease-out-expo);
  display: none;
}
@media (min-width: 1100px) and (hover: hover) {
  .svc-peek { display: block; }
  .svc-row:hover .svc-peek {
    opacity: 1;
    transform: translateY(-50%) rotate(-3deg) scale(1);
  }
}

/* --- Featured work: editorial asymmetric grid -------------------------- */
.work-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .work-grid { grid-template-columns: 1.35fr 1fr; align-items: start; }
}
.work-col { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-content: start; }
.work-tile { display: block; }
.work-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand-200);
}
.work-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.work-tile--lead .work-frame { aspect-ratio: 4 / 5; }
.work-tile--stack .work-frame { aspect-ratio: 16 / 10; }
.work-tile:hover .work-frame img { transform: scale(1.05); }
/* Captions sit on unpredictable crops — a bright sky or a lit wall behind the
   label would otherwise wash it out — so the scrim has to carry real weight
   at the bottom rather than a token tint. */
.work-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(16, 15, 14, 0.9) 0%,
    rgba(16, 15, 14, 0.66) 22%,
    rgba(16, 15, 14, 0.25) 48%,
    transparent 70%
  );
  transition: opacity 420ms ease;
}
.work-tile:hover .work-frame::after { opacity: 0.85; }
.work-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  color: #fff;
}
.work-cat {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--o-300);
}
.work-name {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.work-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  transition: gap 320ms var(--ease-out-expo);
}
.work-tile:hover .work-meta { gap: 0.9rem; }
.work-meta [data-icon] { width: 15px; height: 15px; }

/* --- Process ----------------------------------------------------------- */
.process-grid {
  display: grid;
  gap: 1.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  counter-reset: step;
}
@media (min-width: 700px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }
.process-step {
  position: relative;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line-strong);
}
/* Dot sitting on the rule, with the step number below it */
.process-step::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--o-500);
  box-shadow: 0 0 0 4px rgba(230, 125, 30, 0.16);
  transition: transform 420ms var(--ease-spring);
}
.process-step:hover::before { transform: scale(1.35); }
.process-num {
  counter-increment: step;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--o-600);
}
.process-num::before { content: "0" counter(step); }
.process-step h3 {
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.process-step p {
  margin-top: 0.6rem;
  font-size: 0.925rem;
  line-height: 1.6;
  color: #6f6b64;
}

/* --- Testimonial ------------------------------------------------------- */
.quote-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .quote-grid { grid-template-columns: 1.15fr 1fr; } }
.quote-lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.quote-mark {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 4.5rem;
  line-height: 0.5;
  color: rgba(230, 125, 30, 0.6);
}
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--o-400), var(--o-700));
  box-shadow: 0 8px 20px -8px rgba(230, 125, 30, 0.6);
}
/* Rating card sitting opposite the pull-quote */
.quote-aside {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.quote-stars { display: flex; gap: 0.3rem; color: var(--o-400); }
.quote-stars [data-icon] { width: 20px; height: 20px; }
.quote-stars [data-icon] svg { fill: currentColor; }