/* ============================================================
   Big Al's Aluminum — Design System
   Fonts: Fraunces (display/serif) + Inter (body/sans)
   Palette: Ink Navy / Alabaster / Aluminum Silver / Deep Teal / Brass
   ============================================================ */

:root{
  /* Color tokens */
  --ink-900:#0B141C;
  --ink-800:#0F1B24;
  --ink-700:#16242F;
  --ink-600:#22333F;
  --alabaster:#F7F3EA;
  --alabaster-dim:#EFE8D8;
  --sand:#E7DEC9;
  --silver-100:#EDEFF0;
  --silver-300:#C9D0D3;
  --silver-500:#9BA6AB;
  --silver-700:#66727A;
  --teal-600:#0B5D63;
  --teal-700:#094A50;
  --teal-400:#1A7E86;
  --brass-400:#C7A468;
  --brass-500:#AD8A50;
  --brass-600:#8E6E3B;
  --text-ink:#1B2226;
  --text-soft:#4C5860;
  --text-on-dark:#F3EFE4;
  --text-on-dark-soft:#B7C2C7;
  --white:#FFFFFF;
  --danger:#B3432B;

  /* Semantic */
  --bg-page: var(--alabaster);
  --bg-surface: var(--white);
  --bg-dark: var(--ink-800);
  --border-soft: rgba(27,34,38,0.1);
  --border-on-dark: rgba(247,243,234,0.14);

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale (8pt rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(11,20,28,0.08), 0 1px 2px rgba(11,20,28,0.06);
  --shadow-md: 0 8px 24px rgba(11,20,28,0.10), 0 2px 8px rgba(11,20,28,0.06);
  --shadow-lg: 0 24px 64px rgba(11,20,28,0.18), 0 4px 16px rgba(11,20,28,0.08);
  --shadow-brass: 0 10px 30px rgba(173,138,80,0.25);

  --ease-out: cubic-bezier(.16,.8,.28,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms;
  --dur-med: 300ms;
  --dur-slow: 500ms;

  --container: 1240px;
  --container-narrow: 860px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd{ margin: 0; }
ul[class], ol[class]{ list-style: none; margin: 0; padding: 0; }
img, picture, svg{ display: block; max-width: 100%; }
input, button, textarea, select{ font: inherit; color: inherit; }
button{ cursor: pointer; }
a{ color: inherit; text-decoration: none; }

body{
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

main{ display:block; overflow-x: clip; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: var(--text-ink);
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.6rem, 4.4vw + 1rem, 4.6rem); font-weight: 560; }
h2{ font-size: clamp(2rem, 2.6vw + 1rem, 3rem); }
h3{ font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); }
h4{ font-size: 1.125rem; }

p{ color: var(--text-soft); max-width: 62ch; }
p.lead{ font-size: 1.2rem; color: var(--text-soft); }

:focus-visible{
  outline: 3px solid var(--teal-400);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout helpers ---------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container--narrow{ max-width: var(--container-narrow); }

.section{ padding-block: var(--space-8); }
.section--tight{ padding-block: var(--space-6); }
.section--dark{ background: var(--ink-800); color: var(--text-on-dark); }
.section--dark p{ color: var(--text-on-dark-soft); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4{ color: var(--text-on-dark); }
.hero h1, .hero h2, .hero h3, .hero h4{ color: var(--text-on-dark); }
.section--sand{ background: linear-gradient(180deg, var(--alabaster) 0%, var(--alabaster-dim) 100%); }
.section--surface{ background: var(--bg-surface); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-600);
}
.section--dark .eyebrow{ color: var(--brass-400); }
.hero .eyebrow{ color: var(--brass-400); }
.eyebrow::before{
  content: "";
  width: 28px; height: 1.5px;
  background: currentColor;
  display: inline-block;
}

.section-head{ max-width: 680px; margin-bottom: var(--space-6); }
.section-head.center{ margin-inline: auto; text-align: center; }

.grid{ display: grid; gap: var(--space-5); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px){
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  min-height: 44px;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn svg{ width: 18px; height: 18px; flex: none; }

.btn--brass{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, var(--brass-400), var(--brass-500));
  color: var(--ink-900);
  box-shadow: var(--shadow-brass);
}
.btn--brass:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(173,138,80,0.34); }
.btn--brass::after{
  content:""; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: btnShimmer 4.2s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes btnShimmer{ 0%{ left:-60%; } 30%{ left:130%; } 100%{ left:130%; } }
@media (prefers-reduced-motion: reduce){ .btn--brass::after{ animation:none; display:none; } }

.btn--outline-dark{
  background: transparent;
  border-color: var(--ink-800);
  color: var(--ink-800);
}
.btn--outline-dark:hover{ background: var(--ink-800); color: var(--text-on-dark); }

.btn--outline-light{
  background: transparent;
  border-color: rgba(247,243,234,0.5);
  color: var(--text-on-dark);
}
.btn--outline-light:hover{ background: rgba(247,243,234,0.1); border-color: var(--text-on-dark); }

.btn--ghost-light{
  background: rgba(247,243,234,0.08);
  border-color: rgba(247,243,234,0.22);
  color: var(--text-on-dark);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover{ background: rgba(247,243,234,0.16); }

.btn--sm{ padding: 0.6rem 1.1rem; font-size: 0.85rem; }
.btn--block{ width: 100%; }

.text-link{
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--teal-600);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.text-link:hover{ border-color: currentColor; }
.text-link svg{ width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.text-link:hover svg{ transform: translateX(3px); }
.section--dark .text-link{ color: var(--brass-400); }

/* ---------- Top utility bar ---------- */
.utility-bar{
  background: var(--ink-900);
  color: var(--text-on-dark-soft);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.utility-bar .container{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding-block: 8px;
}
.utility-bar__left{ display:flex; align-items:center; gap: var(--space-4); flex-wrap: wrap; }
.utility-bar__left span{ display:inline-flex; align-items:center; gap:6px; }
.utility-bar__left svg{ width:14px; height:14px; color: var(--brass-400); }
.utility-bar a{ color: var(--text-on-dark); font-weight: 600; }
.utility-bar__socials{ display:flex; gap: var(--space-3); }
.utility-bar__socials a{ color: var(--text-on-dark-soft); transition: color var(--dur-fast); }
.utility-bar__socials a:hover{ color: var(--brass-400); }
.utility-bar__socials svg{ width:15px; height:15px; }

@media (max-width: 760px){
  .utility-bar__left span.hide-mobile{ display:none; }
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,243,234,0.72);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(173,138,80,0.16);
  transition: box-shadow var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled{ box-shadow: var(--shadow-sm); background: rgba(247,243,234,0.94); }
.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-3);
  gap: var(--space-4);
}

.brand{ display: flex; align-items: center; gap: 12px; }
.brand__mark{ width: 44px; height: 44px; flex: none; }
.brand__text{ line-height: 1.1; }
.brand__name{
  font-family: var(--font-display); font-weight: 650; font-size: 1.18rem;
  color: var(--ink-800); letter-spacing: -0.01em; display:block;
}
.brand__sub{
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-600); font-weight: 700; display:block; margin-top: 2px;
}

/* Tight gaps are the default, not a breakpoint override: the header row lives inside
   .container (max-width 1240px), so 8 nav links + brand + CTA must fit 1240px at every
   screen size — a wider viewport does not give the header any more room. */
.nav{ display: flex; align-items: center; gap: var(--space-3); }
.nav__list{ display: flex; align-items: center; gap: 14px; }
.nav__list a{
  font-weight: 600; font-size: 0.94rem; color: var(--text-ink);
  position: relative; padding-block: 4px; white-space: nowrap;
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--brass-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after{ transform: scaleX(1); }
.nav__list a[aria-current="page"]{ color: var(--teal-700); }

.header__cta{ display:flex; align-items:center; gap: var(--space-3); }
.header__phone{
  display:flex; align-items:center; gap:8px; font-weight:700; color: var(--ink-800); white-space: nowrap;
}
.header__phone svg{ width:18px; height:18px; color: var(--teal-600); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:transparent; border:none; border-radius: var(--radius-sm);
}
.nav-toggle span{ width:22px; height:2px; background: var(--ink-800); transition: transform var(--dur-fast), opacity var(--dur-fast); display:block; margin-inline:auto; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* The desktop header row is intrinsically wide: brand + 8 nav links + phone + CTA
   button + gaps + container padding needs roughly 1450px at full spacing. Below that
   it would overflow and give the whole page a horizontal scrollbar, so the spacing
   steps down twice before the drawer takes over. Re-measure these three breakpoints
   if a nav item is ever added or removed — each link costs ~75px. */
/* The same 1240px ceiling means the header phone cannot fit alongside 8 nav links at
   any desktop width, so it is hidden whenever the desktop nav is in use. Nothing is
   lost: the identical number sits in the utility bar directly above, and the drawer
   below 1240px shows it again where there is room. */
@media (min-width: 1281px){
  .header__phone{ display:none; }
}
@media (max-width: 1280px){
  .header__phone span{ display:none; }
  .nav{
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); height: 100dvh;
    background: var(--ink-800); flex-direction: column; align-items: flex-start;
    padding: var(--space-8) var(--space-5) var(--space-5);
    transform: translateX(100%); transition: transform var(--dur-med) var(--ease-in-out);
    gap: var(--space-6);
  }
  .nav.is-open{ transform: translateX(0); box-shadow: -20px 0 60px rgba(0,0,0,0.3); }
  .nav__list{ flex-direction: column; align-items: flex-start; gap: var(--space-4); width:100%; }
  .nav__list a{ color: var(--text-on-dark); font-size: 1.15rem; }
  .header__cta{ flex-direction: column; align-items: flex-start; width:100%; }
  .header__cta .btn{ width:100%; }
  .header__phone{ color: var(--text-on-dark); }
  .header__phone svg{ color: var(--brass-400); }
  .nav-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background: var(--ink-800);
  color: var(--text-on-dark);
  overflow: hidden;
  padding-block: var(--space-9) var(--space-8);
}
.hero__aurora{ position:absolute; inset:-15%; z-index:0; filter: blur(60px); opacity:0.6; }
.hero__aurora span{ position:absolute; border-radius:50%; display:block; will-change:transform; }
.hero__aurora span:nth-child(1){
  width:44vw; height:44vw; max-width:600px; max-height:600px; left:-8%; top:-8%;
  background: radial-gradient(circle, var(--teal-400), transparent 70%);
  animation: auroraDrift1 24s ease-in-out infinite;
}
.hero__aurora span:nth-child(2){
  width:36vw; height:36vw; max-width:500px; max-height:500px; right:-6%; top:8%;
  background: radial-gradient(circle, var(--brass-400), transparent 70%);
  animation: auroraDrift2 28s ease-in-out infinite;
}
.hero__aurora span:nth-child(3){
  width:32vw; height:32vw; max-width:440px; max-height:440px; left:32%; bottom:-20%;
  background: radial-gradient(circle, var(--teal-600), transparent 70%);
  animation: auroraDrift3 32s ease-in-out infinite;
}
@keyframes auroraDrift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6%,8%) scale(1.12); } }
@keyframes auroraDrift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-7%,6%) scale(0.9); } }
@keyframes auroraDrift3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(5%,-7%) scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .hero__aurora span{ animation:none !important; } }

.hero__bg{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.hero__bg svg{ width:100%; height:100%; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, rgba(11,20,28,0.35) 0%, rgba(11,20,28,0.55) 55%, var(--ink-800) 100%);
}
.hero .container{ position: relative; z-index: 3; }
.hero__content{ max-width: 720px; }
.hero__content p.lead{ color: var(--text-on-dark-soft); margin-block: var(--space-4) var(--space-5); }
.hero__actions{ display:flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }

.hero__trust{
  display:flex; flex-wrap:wrap; gap: var(--space-6);
  padding-top: var(--space-5); border-top: 1px solid var(--border-on-dark);
}
.hero__trust-item{ display:flex; align-items:center; gap:10px; }
.hero__trust-item svg{ width:22px; height:22px; color: var(--brass-400); flex:none; }
.hero__trust-item strong{ display:block; font-family: var(--font-display); font-size:1.1rem; color: var(--text-on-dark); }
.hero__trust-item span{ font-size:0.78rem; color: var(--text-on-dark-soft); }

/* ---------- Floating glass stat card (overlaps hero seam) ---------- */
.stat-float{ position:relative; z-index:5; margin-top: -72px; padding-inline: var(--space-4); }
.stat-float__card{
  max-width: var(--container); margin-inline:auto;
  background: linear-gradient(155deg, rgba(15,27,36,0.82), rgba(15,27,36,0.72));
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(247,243,234,0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(247,243,234,0.12);
  padding: var(--space-5) var(--space-6);
  display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5);
}
.stat-float__card .stat strong{ color: var(--brass-400); }
.stat-float__card .stat span{ color: var(--text-on-dark-soft); }
@media (max-width: 760px){
  .stat-float{ margin-top:-48px; }
  .stat-float__card{ grid-template-columns: repeat(2,1fr); row-gap: var(--space-4); padding: var(--space-4); }
}
/* On a phone the stat card sat directly under the hero and pushed the first project
   photos off screen. Reordering (rather than duplicating the markup) moves it down to
   just above the closing CTA, so the hero is followed by real photos. Scoped to .home
   so main only becomes a flex container on the page that needs the reorder, and the
   negative hero-overlap margin is undone since it is no longer next to the hero. */
@media (max-width: 760px){
  main.home{ display:flex; flex-direction:column; }
  main.home > *:last-child{ order: 3; }
  main.home .stat-float{ order: 2; margin-top: var(--space-7); }

  /* The home hero measured 867px on a 375x812 phone — taller than the screen — which
     put the project photos nearly two screens down. Everything below trims it to
     roughly 60vh so the photo strip breaks the fold. .hero:not(.hero--page) keeps this
     scoped to the home hero; the inner pages use the shorter .hero--page variant. */
  .hero:not(.hero--page){ padding-block: var(--space-6) var(--space-5); }
  .hero:not(.hero--page) h1{ font-size: 2.05rem; }
  .hero:not(.hero--page) .eyebrow{ font-size: 0.7rem; }
  /* The lead paragraph alone was 215px, a quarter of the hero. Hiding it on phones is
     what actually gets the photos above the fold — the headline and both CTAs stay. */
  .hero:not(.hero--page) .hero__content p.lead{ display: none; }

  /* Tighten the photo strip's own heading block so the tiles start sooner. The blurb
     is dropped on phones because the magnifier badge on each tile already signals that
     the photos are tappable. */
  .work-strip{ padding-block: var(--space-5); }
  .work-strip .section-head{ margin-bottom: var(--space-4); }
  .work-strip .section-head p.lead{ display: none; }
}

/* ---------- Trust marquee ribbon ---------- */
.marquee{
  position:relative; overflow:hidden; background: var(--ink-900);
  border-block: 1px solid var(--border-on-dark); padding-block: var(--space-3);
}
.marquee::before, .marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background: linear-gradient(90deg, var(--ink-900), transparent); }
.marquee::after{ right:0; background: linear-gradient(270deg, var(--ink-900), transparent); }
.marquee__track{
  display:flex; width:max-content; gap: var(--space-8);
  animation: marqueeScroll 34s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
.marquee__item{
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:0.82rem;
  letter-spacing:0.04em; text-transform:uppercase; color: var(--text-on-dark-soft); white-space:nowrap;
}
.marquee__item svg{ width:16px; height:16px; color: var(--brass-400); flex:none; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; overflow-x:auto; }
}

/* ---------- Sticky mobile CTA bar ---------- */
.mobile-cta-bar{ display:none; }
@media (max-width: 760px){
  .mobile-cta-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:200; gap:10px;
    background: rgba(11,20,28,0.92); backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top:1px solid rgba(247,243,234,0.14);
    padding: 10px max(14px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
  }
  .mobile-cta-bar .btn{ flex:1; }
  body{ padding-bottom: 72px; }
}

.hero--page{ padding-block: var(--space-7) var(--space-7); }
.hero--page h1{ font-size: clamp(2.2rem, 3.2vw + 1rem, 3.4rem); }
.hero--page .container{ max-width: var(--container); }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:0.85rem; color: var(--text-on-dark-soft); margin-bottom: var(--space-4); }
.breadcrumb a{ color: var(--text-on-dark-soft); font-weight:600; }
.breadcrumb a:hover{ color: var(--brass-400); }

/* ---------- Cards: services ---------- */
.service-card{
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  display:flex; flex-direction:column; gap: var(--space-3);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
  height:100%;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--brass-400); }
.service-card__icon{
  width:56px; height:56px; border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--teal-600), var(--ink-700));
  display:flex; align-items:center; justify-content:center;
  color: var(--brass-400);
}
.service-card__icon svg{ width:28px; height:28px; }
.service-card h3{ margin-top: 4px; }
.service-card ul{ display:flex; flex-direction:column; gap:8px; margin-block: 4px 8px; }
.service-card ul li{ display:flex; gap:8px; align-items:flex-start; font-size:0.92rem; color: var(--text-soft); }
.service-card ul li svg{ width:16px; height:16px; color: var(--teal-600); flex:none; margin-top:3px; }
.service-card__link{ margin-top:auto; }

/* ---------- Feature list / why us ---------- */
.feature{
  display:grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto;
  column-gap: var(--space-3); row-gap: 2px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  transition: background var(--dur-med);
}
.feature:hover{ background: rgba(247,243,234,0.5); }
.section--dark .feature:hover{ background: rgba(247,243,234,0.05); }
.feature__icon{
  grid-column: 1; grid-row: 1 / 3;
  width:48px; height:48px; border-radius:50%;
  background: var(--alabaster-dim);
  display:flex; align-items:center; justify-content:center;
  color: var(--teal-600);
}
.section--dark .feature__icon{ background: rgba(247,243,234,0.08); color: var(--brass-400); }
.feature__icon svg{ width:22px; height:22px; }
.feature h4{ grid-column: 2; grid-row: 1; margin-bottom:4px; align-self:end; }
.feature p{ grid-column: 2; grid-row: 2; font-size: 0.92rem; margin:0; }

/* ---------- Stats ---------- */
.stat-strip{
  display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5);
  border-top: 1px solid var(--border-on-dark); border-bottom: 1px solid var(--border-on-dark);
  padding-block: var(--space-6);
}
.stat{ text-align:center; }
.stat strong{ display:block; font-family: var(--font-display); font-size: clamp(2rem,2.4vw,2.6rem); color: var(--brass-400); }
.stat span{ font-size:0.82rem; color: var(--text-on-dark-soft); letter-spacing:0.03em; }
@media (max-width: 760px){ .stat-strip{ grid-template-columns: repeat(2,1fr); row-gap: var(--space-5); } }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: var(--space-3); }
.gallery-tile{
  position:relative; border-radius: var(--radius-md); overflow:hidden;
  aspect-ratio: 1/1; grid-column: span 2;
  color: var(--text-on-dark);
  isolation:isolate;
}
.gallery-tile.tall{ aspect-ratio: 1/1.35; }
.gallery-tile.wide{ grid-column: span 4; aspect-ratio: 16/9.5; }
.gallery-tile img, .gallery-tile svg.art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-tile::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image: repeating-linear-gradient(115deg, rgba(247,243,234,0.07) 0 2px, transparent 2px 16px);
}
.gallery-tile::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: radial-gradient(120% 90% at 20% 0%, rgba(247,243,234,0.12), transparent 60%);
}
.gallery-tile.art-teal{ background: linear-gradient(135deg, #0F3238, #0B141C 70%); }
.gallery-tile.art-brass{ background: linear-gradient(135deg, #C7A468, #7A5C31 75%); }
.gallery-tile.art-navy{ background: linear-gradient(140deg, #2B3F4D, #0B141C 75%); }
.gallery-tile.art-teal-brass{ background: linear-gradient(150deg, #0B5D63, #16242F 55%, #8E6E3B 130%); }
.gallery-tile.art-silver{ background: linear-gradient(140deg, #66727A, #16242F 80%); }
.gallery-tile.has-photo::before, .gallery-tile.has-photo::after{ content: none; }
.gallery-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.gallery-tile__label{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: var(--space-3);
  background: linear-gradient(180deg, transparent, rgba(11,20,28,0.85));
}
.gallery-tile__label span{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--brass-400); font-weight:700; }
.gallery-tile__label strong{ display:block; font-family: var(--font-display); font-size:1.05rem; font-weight:600; }
@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-tile, .gallery-tile.wide{ grid-column: span 1; aspect-ratio: 4/3; }
}

/* ---------- Process steps ---------- */
.process{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); counter-reset: step; }
.process__step{ position:relative; padding-top: var(--space-5); }
.process__step::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size:2.2rem; color: var(--silver-300);
  display:block; margin-bottom: var(--space-2);
}
.section--dark .process__step::before{ color: var(--ink-600); }
.process__step h4{ margin-bottom:6px; }
.process__step p{ font-size:0.92rem; }
.process__step:not(:last-child)::after{
  content:""; position:absolute; top: 34px; left: calc(100% - 4px); width: calc(var(--space-4) + 8px);
  height:1px; background: var(--border-soft);
}
@media (max-width: 900px){
  .process{ grid-template-columns: repeat(2,1fr); }
  .process__step:not(:last-child)::after{ display:none; }
}
@media (max-width: 560px){ .process{ grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.testimonial{
  background: var(--bg-surface); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm); border:1px solid var(--border-soft);
  display:flex; flex-direction:column; gap: var(--space-3); height:100%;
}
.testimonial__stars{ display:flex; gap:4px; color: var(--brass-500); }
.testimonial__stars svg{ width:16px; height:16px; }
.testimonial p{ color: var(--text-ink); font-style: italic; font-size:1rem; }
.testimonial__author{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.testimonial__avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  background: linear-gradient(160deg, var(--teal-600), var(--ink-700));
  display:flex; align-items:center; justify-content:center; color: var(--brass-400);
  font-family: var(--font-display); font-weight:600;
}
.testimonial__author strong{ display:block; font-size:0.92rem; }
.testimonial__author span{ font-size:0.78rem; color: var(--text-soft); }

/* ---------- Service area ---------- */
.service-area{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items:center; }
.area-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-3) var(--space-5); }
.area-list li{ display:flex; align-items:center; gap:10px; font-weight:600; padding-block:6px; border-bottom:1px solid var(--border-soft); }
.area-list li svg{ width:16px; height:16px; color: var(--teal-600); flex:none; }
.service-area__portrait{ display:flex; justify-content:center; }
/* Source cutout is only 210x285, so cap the width near its native size to keep it
   sharp rather than letting it stretch to fill the grid column. */
.service-area__portrait img{ width:100%; max-width:260px; height:auto; }
@media (max-width: 900px){
  .service-area{ grid-template-columns: 1fr; }
}

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative; overflow:hidden;
  background: linear-gradient(120deg, var(--teal-700), var(--ink-800));
  color: var(--text-on-dark); border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-5); flex-wrap:wrap;
}
.cta-banner h2{ color: var(--text-on-dark); max-width: 520px; }
.cta-banner p{ color: var(--text-on-dark-soft); }
.cta-banner__art{ position:absolute; right:-40px; top:-40px; opacity:0.5; width:280px; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-weight:600; font-size:0.88rem; }
.form-field .req{ color: var(--danger); }
.form-field input, .form-field select, .form-field textarea{
  border:1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem; background: var(--bg-surface); min-height:44px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-field textarea{ min-height:120px; resize:vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(11,93,99,0.14); outline:none;
}
.form-field .hint{ font-size:0.78rem; color: var(--text-soft); }
.form-note{ font-size:0.82rem; color: var(--text-soft); margin-top: var(--space-3); }
.form-success{
  display:none; align-items:center; gap:10px; background:#EAF4EE; color:#1E5E38;
  border:1px solid #BFE1CB; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  margin-bottom: var(--space-4); font-weight:600;
}
.form-success.is-visible{ display:flex; }
.form-success svg{ width:20px; height:20px; flex:none; }

@media (max-width: 700px){ .form-grid{ grid-template-columns: 1fr; } }

/* ---------- FAQ accordion ---------- */
.faq-item{ border-bottom:1px solid var(--border-soft); }
.faq-item__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--space-3);
  background:transparent; border:none; text-align:left; padding: var(--space-4) 0;
  font-family: var(--font-display); font-size:1.08rem; font-weight:600; color: var(--text-ink);
}
.faq-item__q svg{ width:20px; height:20px; flex:none; color: var(--teal-600); transition: transform var(--dur-med) var(--ease-out); }
.faq-item[data-open="true"] .faq-item__q svg{ transform: rotate(45deg); }
.faq-item__a{ max-height:0; overflow:hidden; transition: max-height var(--dur-med) var(--ease-in-out); }
.faq-item__a-inner{ padding-bottom: var(--space-4); }
.faq-item__a p{ max-width: 70ch; }

/* ---------- Split / about blocks ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items:center; }
.split.reverse .split__media{ order:2; }
@media (max-width: 900px){
  .split, .split.reverse .split__media{ grid-template-columns: 1fr; order:0; }
}
.split__media{ position:relative; }
.split__eyebrow-tag{
  position:absolute; bottom:-18px; left:-18px; background: var(--bg-surface);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4);
  display:flex; align-items:center; gap:10px; font-weight:700;
}
.split__eyebrow-tag svg{ width:22px; height:22px; color: var(--brass-500); }

.photo-frame{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 4/3;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-frame.tall{ aspect-ratio: 3/4; }
.photo-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); }
@media (max-width: 760px){ .photo-grid{ grid-template-columns: 1fr; } }

/* ---------- Contact page compact header ---------- */
/* The form is the entire point of this page, so the header is kept short enough that
   the first fields stay above the fold — no hero art, no trust marquee. */
.contact-header{
  padding-block: var(--space-5) var(--space-4);
  background: linear-gradient(180deg, var(--alabaster) 0%, var(--alabaster-dim) 100%);
  border-bottom: 1px solid var(--border-soft);
}
.contact-header h1{ font-size: clamp(1.5rem, 1.6vw + 0.95rem, 2.15rem); margin: 0; }
/* .breadcrumb is coloured for the dark hero it normally lives in, so it would be
   almost invisible on this light background — recolour it just here. */
.contact-header .breadcrumb{ color: var(--text-soft); margin-bottom: var(--space-2); }
.contact-header .breadcrumb a{ color: var(--text-soft); }
.contact-header .breadcrumb a:hover{ color: var(--brass-600); }

/* ---------- Gallery page ---------- */
.gallery-jump{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: var(--space-3); margin-top: var(--space-5);
}
.gallery-cta{ display:flex; justify-content:center; margin-top: var(--space-5); }

/* ---------- Photo lightbox ---------- */
.is-zoomable{ cursor: zoom-in; }
.is-zoomable:focus-visible{ outline: 3px solid var(--brass-500); outline-offset: 3px; }
/* Magnifier badge, so it reads as tappable on touch where there is no hover to
   discover. Needs three classes to beat `.gallery-tile.has-photo::after{content:none}`. */
.gallery-tile.has-photo.is-zoomable::after,
.photo-frame.is-zoomable::after{
  content:""; position:absolute; z-index:3; top:10px; right:10px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(247,243,234,0.28);
  background: rgba(11,20,28,0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F3EA' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3Cline x1='11' y1='8.5' x2='11' y2='13.5'/%3E%3Cline x1='8.5' y1='11' x2='13.5' y2='11'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  opacity:0.92; pointer-events:none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.is-zoomable:hover::after{ opacity:1; transform: scale(1.08); }

.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding: max(18px, env(safe-area-inset-top)) 76px max(18px, env(safe-area-inset-bottom));
  background: rgba(6,12,17,0.95);
  backdrop-filter: blur(6px);
}
.lightbox.is-open{ display:flex; animation: lightbox-in var(--dur-med) var(--ease-out); }
@keyframes lightbox-in{ from{ opacity:0 } to{ opacity:1 } }
.lightbox__figure{
  margin:0; display:flex; flex-direction:column; gap: var(--space-3);
  max-width: min(1200px, 100%); max-height:100%;
}
.lightbox__img{
  display:block; margin-inline:auto;
  max-width:100%; max-height:78vh; width:auto; height:auto;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lightbox__caption{ text-align:center; color: var(--text-on-dark); }
.lightbox__cat{ display:block; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--brass-400); font-weight:700; }
.lightbox__cat[hidden]{ display:none; }
.lightbox__title{ display:block; font-family: var(--font-display); font-size:1.15rem; font-weight:600; margin-top:4px; }
.lightbox__count{ display:block; margin-top:6px; font-size:0.8rem; color: var(--text-on-dark-soft); }

.lightbox__btn{
  position:absolute; z-index:2;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(247,243,234,0.1); color: var(--text-on-dark);
  border:1px solid rgba(247,243,234,0.28);
  cursor:pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lightbox__btn:hover{ background: rgba(247,243,234,0.22); }
.lightbox__btn:focus-visible{ outline:3px solid var(--brass-500); outline-offset:2px; }
.lightbox__btn svg{ width:22px; height:22px; }
/* display:flex above would otherwise defeat the hidden attribute */
.lightbox__btn[hidden]{ display:none; }
.lightbox__close{ top: max(14px, env(safe-area-inset-top)); right:14px; }
.lightbox__prev{ left:14px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:14px; top:50%; transform:translateY(-50%); }

@media (max-width: 700px){
  .lightbox{ padding-inline: 58px; }
  .lightbox__img{ max-height:70vh; }
  .lightbox__btn{ width:42px; height:42px; }
  .lightbox__btn svg{ width:19px; height:19px; }
  .lightbox__prev{ left:8px; }
  .lightbox__next{ right:8px; }
}
@media (prefers-reduced-motion: reduce){
  .lightbox.is-open{ animation:none; }
  .lightbox__btn, .is-zoomable::after{ transition:none; }
}

/* ---------- Chips / swatches ---------- */
.swatches{ display:flex; gap: var(--space-3); flex-wrap:wrap; }
.swatch{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.swatch__dot{ width:52px; height:52px; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), var(--shadow-sm); }
.swatch span{ font-size:0.78rem; font-weight:600; color: var(--text-soft); }

.pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--radius-pill);
  background: var(--alabaster-dim); font-size:0.8rem; font-weight:700; color: var(--teal-700);
  border:1px solid var(--border-soft);
}

/* ---------- Compare table ---------- */
.table-wrap{ overflow-x:auto; border-radius: var(--radius-md); border:1px solid var(--border-soft); }
table.specs{ width:100%; border-collapse:collapse; min-width:560px; background: var(--bg-surface); }
table.specs th, table.specs td{ padding: var(--space-3) var(--space-4); text-align:left; border-bottom:1px solid var(--border-soft); font-size:0.92rem; }
table.specs thead th{ background: var(--ink-800); color: var(--text-on-dark); font-family: var(--font-display); font-weight:600; }
table.specs tbody tr:last-child td{ border-bottom:none; }
table.specs tbody tr:hover{ background: var(--alabaster-dim); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink-900); color: var(--text-on-dark-soft); }
.footer__top{ padding-block: var(--space-8) var(--space-6); display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); }
.footer__brand p{ color: var(--text-on-dark-soft); margin-top: var(--space-3); max-width:32ch; }
.footer__col h4{ color: var(--text-on-dark); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; font-family: var(--font-body); font-weight:700; margin-bottom: var(--space-3); }
.footer__col ul{ display:flex; flex-direction:column; gap:10px; }
.footer__col a{ transition: color var(--dur-fast); }
.footer__col a:hover{ color: var(--brass-400); }
.footer__contact li{ display:flex; align-items:flex-start; gap:10px; }
.footer__contact svg{ width:16px; height:16px; color: var(--brass-400); flex:none; margin-top:3px; }
.footer__socials{ display:flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer__socials a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border-on-dark);
  display:flex; align-items:center; justify-content:center; transition: background var(--dur-fast), border-color var(--dur-fast);
}
.footer__socials a:hover{ background: rgba(247,243,234,0.08); border-color: var(--brass-400); }
.footer__socials svg{ width:16px; height:16px; }
.footer__bottom{
  border-top:1px solid var(--border-on-dark); padding-block: var(--space-4);
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); flex-wrap:wrap;
  font-size:0.8rem;
}
.footer__bottom a{ font-weight:600; }
.footer__bottom a:hover{ color: var(--brass-400); }

@media (max-width: 900px){
  .footer__top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns: 1fr; }
}

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity:0; transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-visible{ opacity:1; transform: none; }

/* ---------- Misc page bits ---------- */
.divider-brass{ width:64px; height:3px; background: linear-gradient(90deg, var(--brass-500), var(--brass-400)); border-radius:2px; margin-block: var(--space-3); }
.two-col-text{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-6); }
@media (max-width: 760px){ .two-col-text{ grid-template-columns: 1fr; } }

.badge-row{ display:flex; flex-wrap:wrap; gap: var(--space-3); }
.badge{
  display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--radius-pill);
  background: var(--bg-surface); border:1px solid var(--border-soft); font-weight:700; font-size:0.85rem; box-shadow: var(--shadow-sm);
}
.badge svg{ width:18px; height:18px; color: var(--teal-600); }

/* ---------- Film grain overlay (premium editorial texture) ---------- */
.grain-overlay{
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- Glow-ring hover polish (glass/futuristic touch) ---------- */
.service-card:hover{
  box-shadow: 0 0 0 1px rgba(199,164,104,0.45), var(--shadow-md);
}
.testimonial:hover, .badge:hover{
  box-shadow: 0 0 0 1px rgba(11,93,99,0.25), var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.gallery-tile{ transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.gallery-tile:hover{ transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(199,164,104,0.5), var(--shadow-lg); }

/* ---------- Gradient accent text ---------- */
.text-gradient{
  background: linear-gradient(100deg, var(--brass-400), var(--teal-400) 65%, var(--brass-400));
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientDrift 8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .text-gradient{ animation:none; } }
@keyframes gradientDrift{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }