/* CTC Construction and Supplies — stylesheet */
/* Light, clean, cinematic: white/paper base, dark reserved for full-bleed
   photography moments (hero scrims, footer), a single muted-gold accent,
   serif display headlines paired with a clean sans body. */

/* ---------- Design tokens ---------- */
:root {
  --navy-900: #14161a;
  --navy-800: #1d2024;
  --navy-700: #2a2d33;
  --navy-600: #383c43;
  --gunmetal: #6b7078;

  --gold-600: #8f701f;
  --gold-500: #b8933f;
  --gold-400: #d4b876;
  --gold-100: #f7f0de;

  --accent-gold: var(--gold-500);
  --accent-gold-light: var(--gold-400);

  --white: #ffffff;
  --gray-50: #f7f7f6;
  --gray-100: #f0efec;
  --gray-200: #e3e1db;
  --gray-400: #9c988e;
  --gray-600: #5f5c54;
  --gray-800: #201f1c;
  --success: #1e7a4c;
  --danger: #b3261e;

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: Georgia, Cambria, "Times New Roman", Times, serif;

  --container-max: 1180px;
  --radius: 6px;
  --shadow-sm: 0 2px 10px rgba(20, 22, 26, 0.06);
  --shadow-md: 0 20px 48px rgba(20, 22, 26, 0.14);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --header-height: 76px;
}

/* ---------- Cross-page navigation transitions ---------- */
/* A slow camera push on the outgoing page and a settle-in on the incoming
   one — reads as a deliberate cut rather than the default instant crossfade. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: page-push-out 420ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
::view-transition-new(root) {
  animation: page-settle-in 460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes page-push-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.015); }
}
@keyframes page-settle-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}
@supports not (view-transition-name: none) {
  body { animation: page-fade-in 320ms ease; }
  @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Native smooth-scroll is left off — Lenis (js/main.js) drives eased
   scrolling; the two fighting over the same scroll caused jitter. */
html { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--gray-800);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Any in-page anchor target clears the fixed header instead of tucking under it. */
[id] { scroll-margin-top: calc(var(--header-height) + 20px); }

section { padding: 72px 0; }
@media (max-width: 768px) {
  section { padding: 48px 0; }
}

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 14px;
}
h1, .h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--navy-900);
}
h2, .h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--navy-900);
}
h3, .h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy-900); }
.lede { font-size: 1.1rem; color: var(--gray-600); max-width: 640px; line-height: 1.7; }
.section-head { max-width: 720px; margin-bottom: 36px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--gold-500); color: var(--white); box-shadow: 0 8px 20px rgba(184, 147, 63, 0.28); }
.btn-primary:hover { background: var(--gold-600); }
.btn-outline { border-color: rgba(255,255,255,0.55); color: var(--white); }
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }
.btn-navy { background: var(--navy-900); color: var(--white); }
.btn-navy:hover { background: var(--navy-700); }
.btn-ghost { color: var(--navy-900); border-color: var(--gray-200); }
.btn-ghost:hover { border-color: var(--navy-900); }
.btn-sm { padding: 10px 20px; font-size: 0.83rem; }
.btn-block { width: 100%; }

/* ---------- Header / Nav (transparent over hero -> solid on scroll) ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), backdrop-filter var(--transition), transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--gray-200);
  box-shadow: var(--shadow-sm);
}
/* Smart scroll: header tucks away on scroll-down, returns on scroll-up. */
.site-header.header-hidden { transform: translateY(-100%); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--white); }
.site-header .brand img { view-transition-name: site-logo; }
.brand img, .footer-brand img {
  height: 42px; width: auto;
  padding: 5px;
  border-radius: 10px;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.12), rgba(255,255,255,0) 62%), var(--navy-800);
  border: 1px solid rgba(184,147,63,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.brand-text { font-weight: 800; font-size: 1.02rem; line-height: 1.15; letter-spacing: 0.01em; color: var(--white); transition: color var(--transition); }
.brand-text span { display: block; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; color: var(--gold-400); text-transform: uppercase; }
.site-header.scrolled .brand-text { color: var(--navy-900); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  position: relative;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 6px 2px;
  transition: color var(--transition);
}
.nav-links a::after {
  content: '';
  position: absolute; left: 2px; right: 2px; bottom: 0; height: 2px;
  background: var(--gold-400);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.site-header.scrolled .nav-links a { color: var(--gray-800); }
.site-header.scrolled .nav-links a::after { background: var(--gold-500); }
.site-header.scrolled .nav-links a:hover, .site-header.scrolled .nav-links a.active { color: var(--navy-900); }
.nav-links a.nav-cta::after { content: none; }
.nav-cta { margin-left: 8px; }
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition: none; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: transform var(--transition), opacity var(--transition), background var(--transition); }
.site-header.scrolled .nav-toggle span { background: var(--navy-900); }

.sound-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.75);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  margin-left: 14px;
  transition: border-color var(--transition), color var(--transition);
}
.sound-toggle:hover { color: var(--white); border-color: rgba(255,255,255,0.6); }
.sound-toggle[aria-pressed="true"] { color: var(--gold-400); border-color: var(--gold-500); }
.site-header.scrolled .sound-toggle { border-color: var(--gray-200); color: var(--gray-600); }
.site-header.scrolled .sound-toggle:hover { color: var(--navy-900); border-color: var(--navy-900); }
.site-header.scrolled .sound-toggle[aria-pressed="true"] { color: var(--gold-600); border-color: var(--gold-500); }

.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy-900); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  border: none; box-shadow: var(--shadow-md); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 250ms ease, transform 250ms ease, visibility 250ms, background var(--transition);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold-500); }
@media (max-width: 640px) { .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity 150ms ease, visibility 150ms; } }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--navy-900);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .nav-links.open { max-height: 520px; }
  .nav-links a { width: 100%; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.85) !important; }
  .nav-links a.nav-cta { width: calc(100% - 48px); margin: 16px 24px; padding: 14px 20px; border-bottom: none; }
}

/* ---------- Cinematic full-bleed media (hero + page-hero) ---------- */
.cine-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: var(--navy-900); }
.cine-media-img {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center 40%; background-repeat: no-repeat;
  animation: cineZoom 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cineZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.cine-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,16,20,0.4) 0%, rgba(14,16,20,0.12) 32%, rgba(14,16,20,0.7) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .cine-media-img { animation: none; }
}

/* Per-page hero photos — was inline background-image (CSP-blocked in
   production, see Utilities note above); one class per distinct image. */
.bg-hero-catarman { background-image: url('../assets/images/hero-catarman-aerial.jpg'); }
.bg-hero-about-site { background-image: url('../assets/images/about-site-photo.jpeg'); }
.bg-hero-catarman-construction { background-image: url('../assets/images/catarman-bridge-construction.jpg'); }
.bg-hero-pile-driving { background-image: url('../assets/images/pile-driving-composite.jpeg'); }
.bg-hero-school-buildings { background-image: url('../assets/images/gallery/school-buildings/school-buildings-2.jpeg'); }
.bg-hero-fitout { background-image: url('../assets/images/gallery/fitout-renovation/fitout-renovation-2.jpeg'); }
.bg-hero-bridges-1 { background-image: url('../assets/images/gallery/bridges-construction/bridges-construction-1.jpeg'); }
.bg-hero-bridges-3 { background-image: url('../assets/images/gallery/bridges-construction/bridges-construction-3.jpeg'); }
.bg-vision {
  background-image: linear-gradient(180deg, rgba(20,22,26,0.78), rgba(20,22,26,0.93)), url('../assets/images/catarman-bridge-construction.jpg');
  background-size: cover; background-position: center;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: var(--white);
  padding: calc(var(--header-height) + 28px) 0 44px;
}
.hero-content { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; }
.hero-inner { max-width: 880px; }
.hero h1 { color: var(--white); margin-bottom: 16px; }
.hero .lede { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin-bottom: 26px; max-width: 640px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Full-width bottom strip — uses the space a narrow centered column would
   waste, with hairline dividers between stats instead of a cramped block. */
.hero-stats-row { position: relative; z-index: 2; }
.hero-stats-row .stats-bar {
  display: flex; width: 100%; max-width: none; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 26px;
}
.hero-stats-row .stat {
  flex: 1; padding: 0 28px; border-left: 1px solid rgba(255,255,255,0.22);
}
.hero-stats-row .stat:first-child { padding-left: 0; border-left: none; }
/* Keep stat labels on one line above 640px (where the scroll cue below is
   still shown) — a wrapped label ("Projects" / "Implemented") makes the
   stats row taller than the cue's fixed bottom offset expects, and the
   two visibly overlap. Below 640px the cue is hidden anyway, so wrapping
   there is harmless. */
@media (min-width: 641px) {
  .hero-stats-row .stat .label { white-space: nowrap; }
}

/* A quiet vertical label on the far edge — fills the empty margin beside
   the photo without competing with the headline. */
.hero-side-label {
  position: absolute; right: 28px; top: 50%; z-index: 2;
  transform: translateY(-50%) rotate(90deg); transform-origin: right center;
  color: rgba(255,255,255,0.55); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 1100px) { .hero-side-label { display: none; } }

.hero-scroll-cue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,0.8);
}
.hero-scroll-cue span { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.scroll-line { width: 1px; height: 38px; background: rgba(255,255,255,0.28); position: relative; overflow: hidden; }
.scroll-dot { position: absolute; left: -1.5px; top: -12px; width: 4px; height: 12px; border-radius: 2px; background: var(--gold-400); animation: scrollDot 2s ease-in-out infinite; }
@keyframes scrollDot { 0% { top: -12px; } 100% { top: 38px; } }
@media (prefers-reduced-motion: reduce) { .scroll-dot { animation: none; top: 0; } }
@media (max-width: 640px) { .hero-scroll-cue { display: none; } }
@media (max-width: 640px) {
  .hero-stats-row .stats-bar { flex-wrap: wrap; gap: 16px 0; }
  .hero-stats-row .stat { flex: 1 1 45%; border-left: none; padding-left: 0; }
}

/* Short viewports (small/non-maximized windows, landscape phones): drop
   strict vh sizing so content lays out naturally instead of overflowing
   past the fold, and trim the least essential elements first. */
@media (max-height: 800px) {
  .hero { min-height: 0; padding: calc(var(--header-height) + 24px) 0 32px; }
  .hero-scroll-cue { display: none; }
}
@media (max-height: 620px) {
  .hero-stats-row { display: none; }
}

.page-hero {
  position: relative;
  min-height: 42vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
  padding: calc(var(--header-height) + 28px) 0 36px;
}
@media (max-height: 700px) {
  .page-hero { min-height: 0; }
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1, .page-hero .lede { max-width: 760px; }
.page-hero .stats-bar {
  display: flex; width: 100%; max-width: none; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: 22px; margin-top: 28px;
}
.page-hero .stat { flex: 1; padding: 0 28px; border-left: 1px solid rgba(255,255,255,0.22); }
.page-hero .stat:first-child { padding-left: 0; border-left: none; }
@media (max-width: 640px) {
  .page-hero .stats-bar { flex-wrap: wrap; gap: 16px 0; }
  .page-hero .stat { flex: 1 1 45%; border-left: none; padding-left: 0; }
}
.page-hero h1 { color: var(--white); }
.page-hero .lede { color: rgba(255,255,255,0.85); max-width: 640px; }

/* ---------- In-page section navigation ---------- */
/* Sticks under the fixed header on long pages (services, legal) so the
   sections beneath a cinematic hero stay scannable instead of just long. */
.page-subnav {
  position: sticky; top: var(--header-height); z-index: 40;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-200);
  transition: top 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Smart-scroll header tucks itself away on scroll-down (see
   .site-header.header-hidden) — without this, the subnav would keep
   reserving header-height of empty space above itself and float with a
   gap instead of sliding up to fill it. */
.site-header.header-hidden ~ .page-subnav { top: 0; }
@media (prefers-reduced-motion: reduce) {
  .page-subnav { transition: none; }
}
.page-subnav .subnav-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px 0;
  scrollbar-width: none;
}
.page-subnav .subnav-row::-webkit-scrollbar { display: none; }
.page-subnav a {
  flex: none; padding: 8px 16px; border-radius: 999px;
  font-size: 0.83rem; font-weight: 600; color: var(--gray-600);
  border: 1px solid var(--gray-200); white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.page-subnav a:hover, .page-subnav a:focus-visible {
  background: var(--navy-900); color: var(--white); border-color: var(--navy-900);
}

/* ---------- Stats bar ---------- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
  max-width: 560px;
}
.stat .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.9rem;
  background: linear-gradient(180deg, #ffffff, var(--gold-400) 70%, var(--gold-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .label { font-size: 0.83rem; color: rgba(255,255,255,0.75); }
.stats-strip {
  background: var(--navy-900);
  color: var(--white);
  padding: 44px 0;
}
.stats-strip .stats-bar { max-width: none; grid-template-columns: repeat(3, 1fr); margin: 0; }
.stats-strip .stat .label { color: rgba(255,255,255,0.68); }
@media (max-width: 640px) {
  .stats-bar, .stats-strip .stats-bar { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .stat .num { font-size: 1.6rem; }
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 28px; }
.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: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 30px;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--gray-200); }
.card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(184,147,63,0.14), transparent 70%);
  opacity: 0; transition: opacity 350ms ease;
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card-icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-600);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem;
  margin-bottom: 20px;
  border: 1px solid rgba(184,147,63,0.25);
  transition: transform 240ms ease, background var(--transition), color var(--transition);
  animation: icon-pulse-ring 3.2s ease-in-out infinite;
}
/* Idle "breathing" pulse ring — a small always-on ambient signal so the
   numbered/lettered icons don't sit completely inert between interactions. */
@keyframes icon-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,147,63,0.28); }
  50% { box-shadow: 0 0 0 6px rgba(184,147,63,0); }
}
.card:hover .card-icon { background: var(--gold-500); color: var(--white); transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .card-icon { animation: none; }
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--gray-600); font-size: 0.95rem; }

.case-study-teaser {
  display: grid; grid-template-columns: 1fr 1.4fr; padding: 0; overflow: hidden;
}
.case-study-teaser img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }
.case-study-teaser-body { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 700px) {
  .case-study-teaser { grid-template-columns: 1fr; }
  .case-study-teaser img { min-height: 200px; }
}

/* ---------- Founder profile ---------- */
.founder-grid { display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: start; }
@media (max-width: 800px) { .founder-grid { grid-template-columns: 1fr; } }
.founder-photo {
  border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(184,147,63,0.35);
  box-shadow: var(--shadow-md);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
.founder-narrative { margin-top: 18px; font-size: 1.02rem; color: var(--gray-600); line-height: 1.75; max-width: 640px; }
.founder-credentials { margin-top: 28px; display: flex; flex-direction: column; }
.founder-credentials > div {
  display: grid; grid-template-columns: 180px 1fr; gap: 20px;
  padding: 14px 0; border-top: 1px solid var(--gray-200);
}
.founder-credentials > div:last-child { border-bottom: 1px solid var(--gray-200); }
.founder-credentials dt { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-600); margin: 0; }
.founder-credentials dd { margin: 0; color: var(--navy-900); font-weight: 600; font-size: 0.94rem; }
@media (max-width: 560px) {
  .founder-credentials > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Fleet cards use the same icon-badge treatment as service/process cards
   (see .card-icon) rather than a photo placeholder — real spec text
   carries the content until photography is in. */

.info-card {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 20px 22px;
  border: 1px solid var(--gray-100);
}
.info-card .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gray-400); font-weight: 700; }
.info-card .value { font-weight: 700; color: var(--navy-900); margin-top: 4px; overflow-wrap: anywhere; }

/* An info-card that jumps to more detail further down the page. */
.info-card-link {
  display: block; cursor: pointer; text-decoration: none;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.info-card-link:hover, .info-card-link:focus-visible {
  border-color: var(--gold-400); background: var(--gold-100); transform: translateY(-2px);
}
.info-card-link:hover .value, .info-card-link:focus-visible .value { color: var(--gold-600); }

/* ---------- Section variants ---------- */
.section-alt { background: var(--gray-50); }
/* background-color (not the `background` shorthand) so this doesn't reset
   background-image on elements that also carry a .bg-* image class (e.g.
   .bg-vision) regardless of which rule the cascade orders later. */
.section-dark { background-color: var(--navy-900); color: var(--white); }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .lede { color: rgba(255,255,255,0.72); }

/* ---------- Project / gallery ---------- */
.project-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.project-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.project-card img { height: 200px; width: 100%; object-fit: cover; object-position: center 35%; transition: transform 500ms ease; }
.project-card:hover img { transform: scale(1.04); }
.project-card .body { padding: 20px 22px; }
.project-card .amount { color: var(--gold-600); font-weight: 800; font-size: 1.1rem; }
.project-card .meta { color: var(--gray-600); font-size: 0.87rem; margin-top: 4px; }

.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.gallery-filters button {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 8px 16px; font-size: 0.83rem; font-weight: 600; color: var(--gray-600);
  transition: all var(--transition);
}
.gallery-filters button.active, .gallery-filters button:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery-grid img { width: 100%; height: 175px; object-fit: cover; object-position: center 35%; border-radius: var(--radius); cursor: pointer; transition: transform 350ms ease, opacity var(--transition); }
.gallery-grid img:hover { transform: scale(1.03); opacity: 0.95; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.lightbox {
  position: fixed; inset: 0; background: rgba(14,16,20,0.94);
  display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox img { max-height: 88vh; max-width: 100%; border-radius: 4px; }
.lightbox-close {
  position: absolute; top: 20px; right: 24px; background: none; border: none;
  color: var(--white); font-size: 2rem; line-height: 1;
}

/* ---------- Project locations (live map) ---------- */
/* A real, pannable/zoomable Philippines map (Leaflet + CARTO Positron
   basemap, see js/projects-map.js) plots every contract location from the
   project-record table below — the geographic spread of the work reads at
   a glance and visitors can explore it themselves instead of taking a
   schematic diagram's word for it. */
.projects-map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 24px;
}
@media (max-width: 800px) { .projects-map-wrap { grid-template-columns: minmax(0, 1fr); } }

.projects-map-col { display: flex; flex-direction: column; gap: 10px; position: relative; }
.projects-map {
  width: 100%; height: 460px;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
}
@media (max-width: 560px) { .projects-map { height: 340px; } }
.projects-map .leaflet-container { font: inherit; background: var(--gray-100); }
.projects-map .map-unavailable-msg {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: 0.85rem; text-align: center; padding: 24px;
}

/* Scale callout overlaid on the map — pins alone don't communicate the
   size of the operation, so the headline numbers sit right on top. */
.map-stats-badge {
  position: absolute; top: 12px; right: 12px; z-index: 500;
  background: rgba(20,22,26,0.88); backdrop-filter: blur(4px);
  color: var(--white); padding: 10px 14px; border-radius: var(--radius);
  box-shadow: var(--shadow-md); pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
}
.map-stats-badge strong { color: var(--gold-400); font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.map-stats-badge span { font-size: 0.72rem; color: rgba(255,255,255,0.8); white-space: nowrap; }
@media (max-width: 560px) {
  .map-stats-badge { top: 8px; right: 8px; padding: 8px 11px; }
  .map-stats-badge strong { font-size: 0.92rem; }
  .map-stats-badge span { font-size: 0.66rem; }
}

.map-reset-btn {
  align-self: flex-start;
  font-size: 0.78rem; font-weight: 700; color: var(--gray-600);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--gray-200); background: var(--white);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.map-reset-btn:hover, .map-reset-btn:focus-visible { color: var(--navy-900); border-color: var(--navy-900); }

/* Custom gold-pin markers, sized per contract value, in place of Leaflet's
   default icon (kept CSS-only so no extra image assets/CSP allowances are
   needed for marker art). */
.ctc-map-marker {
  background: var(--gold-500);
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(20,22,26,0.4);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}
.ctc-map-marker:hover, .ctc-map-marker.active { background: var(--gold-600); transform: scale(1.14); }
.ctc-map-marker.hub { background: var(--navy-900); border-color: var(--gold-400); border-width: 3px; }
.ctc-map-marker.hub:hover, .ctc-map-marker.hub.active { background: var(--navy-900); transform: scale(1.14); }

/* Cluster badges — nearby pins (the Northern Samar group especially)
   collapse into one numbered gold/navy badge until zoomed in enough to
   separate, so the map stays legible at every zoom level. */
.ctc-cluster-icon { display: flex; align-items: center; justify-content: center; }
.ctc-cluster-icon span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--navy-900); color: var(--white);
  border: 3px solid var(--gold-400); border-radius: 50%;
  font-weight: 800; font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(20,22,26,0.4);
  transition: transform 160ms ease;
}
.leaflet-marker-icon.ctc-cluster-icon:hover span { transform: scale(1.08); }

.leaflet-tooltip.ctc-map-label {
  background: rgba(255,255,255,0.92); border: none; box-shadow: none;
  padding: 2px 7px; border-radius: 3px;
  font-size: 12px; font-weight: 700; color: var(--navy-900);
}
.leaflet-tooltip.ctc-map-label::before { display: none; }

.leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.leaflet-popup-content { margin: 14px 16px; font-family: inherit; min-width: 190px; }
.map-popup strong { display: block; color: var(--navy-900); font-size: 0.95rem; margin-bottom: 2px; }
.map-popup-summary {
  display: block; color: var(--gold-600); font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px;
}
.map-popup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.map-popup li { font-size: 0.83rem; color: var(--gray-600); display: flex; flex-direction: column; gap: 1px; }
.map-popup li a { color: var(--navy-900); font-weight: 600; }
.map-popup li a:hover { color: var(--gold-600); }
.map-popup li span { color: var(--gray-400); font-size: 0.76rem; }

.location-legend { display: flex; flex-direction: column; gap: 10px; }
.location-legend-note { color: var(--gray-400); font-size: 0.8rem; font-style: italic; margin: 2px 0 0; }
.location-chip {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--radius); background: var(--gray-50); border: 1px solid var(--gray-200);
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.location-chip:hover, .location-chip:focus-visible, .location-chip.active { border-color: var(--gold-500); background: var(--gold-100); }
.location-chip strong { color: var(--navy-900); font-size: 0.92rem; }
.location-chip span { color: var(--gray-600); font-size: 0.82rem; }
.location-chip.outlier { background: var(--white); border-style: dashed; }
.location-chip.outlier:hover, .location-chip.outlier.active { border-style: solid; }
.map-caption { grid-column: 1 / -1; color: var(--gray-400); font-size: 0.78rem; margin-top: 4px; font-style: italic; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
th { background: var(--navy-900); color: var(--white); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: var(--gray-50); }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 0.84rem; font-weight: 700; color: var(--navy-900); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem; color: var(--gray-800); background: var(--white);
  transition: border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-500); }
.field textarea { resize: vertical; min-height: 120px; }
.field-hint { font-size: 0.8rem; color: var(--gray-400); margin-top: 4px; }
.field-error { font-size: 0.8rem; color: var(--danger); margin-top: 4px; display: none; }

/* honeypot — hidden from sighted users and keyboard tab order, but present in the DOM for bots to fill */
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status { padding: 14px 16px; border-radius: var(--radius); font-size: 0.9rem; display: none; margin-top: 8px; }
.form-status.success { display: block; background: #e7f5ec; color: var(--success); }
.form-status.error { display: block; background: #fbeceb; color: var(--danger); }

/* ---------- Custom animated dropdown (progressive enhancement over <select>) ---------- */
.cs-wrapper { position: relative; }
.cs-native { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cs-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius);
  background: var(--white); font-family: inherit; font-size: 0.95rem; color: var(--gray-800);
  text-align: left; transition: border-color var(--transition);
}
.cs-wrapper.open .cs-trigger { border-color: var(--gold-500); }
.cs-caret { display: inline-flex; color: var(--gray-400); transition: transform var(--transition); flex-shrink: 0; }
.cs-wrapper.open .cs-caret { transform: rotate(180deg); }
.cs-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  box-shadow: var(--shadow-md); list-style: none; margin: 0; padding: 6px;
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: max-height 220ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 180ms ease, transform 180ms ease;
}
.cs-wrapper.open .cs-list { max-height: 260px; opacity: 1; transform: translateY(0); pointer-events: auto; overflow-y: auto; }
.cs-option { padding: 9px 10px; border-radius: 3px; font-size: 0.9rem; cursor: pointer; transition: background var(--transition); }
.cs-option:hover, .cs-option.active { background: var(--gray-100); }
@media (prefers-reduced-motion: reduce) {
  .cs-list, .cs-caret { transition: none !important; }
}

/* Compact phone country-code selector paired with a number input */
.phone-input-group { display: flex; gap: 8px; align-items: flex-start; }
.phone-input-group .cs-wrapper { width: 128px; flex-shrink: 0; }
.phone-input-group input[type="tel"] { flex: 1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.72); padding: 44px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 28px; }
.footer-grid h4 { color: var(--white); font-size: 0.88rem; letter-spacing: 0.03em; margin-bottom: 16px; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid a:hover { color: var(--gold-400); }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand span { color: var(--white); font-weight: 800; }
.footer-tagline { font-family: var(--font-display); font-style: italic; color: var(--gold-400); font-size: 0.95rem; margin-top: 14px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.8rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-100); color: var(--gold-600);
  padding: 5px 11px; border-radius: 3px; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
}

/* ---------- Scroll-reveal animation ---------- */
.reveal {
  opacity: 0; transform: translateY(26px) scale(0.98);
  transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1), transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-group.visible .reveal-item { opacity: 1; transform: none; }
.reveal-item {
  opacity: 0; transform: translateY(26px) scale(0.98);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Directional variants — used on two-column text/photo sections so the
   copy slides in from whichever side it sits on instead of every block on
   the site doing the identical up-fade. */
.reveal-left {
  opacity: 0; transform: translateX(-36px);
  transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1), transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible { opacity: 1; transform: none; }
.reveal-right {
  opacity: 0; transform: translateX(36px);
  transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1), transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-item, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Cinematic "shutter" reveal for large standalone photography. Unlike
   .reveal above (a one-shot threshold trigger), this is scroll-scrubbed —
   js/animations.js sets clip-path directly from the image's scroll
   position on every frame, so the curtain lifts in step with the actual
   scroll gesture rather than firing once and being done. That also means
   it can't get stuck clipped if a single intersection check is ever missed. */
.img-reveal { clip-path: inset(0 0 100% 0); }

/* Images fade in once actually loaded instead of popping in abruptly;
   skipped for anything already cached (img.complete) on init. */
img[data-img-loading] { opacity: 0; }
img { transition: opacity 420ms ease; }

/* Subtle scroll-linked drift applied via JS (main.js) to a few large
   feature photos — kept small so it reads as depth, not motion sickness. */
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .img-reveal { clip-path: none !important; transition: none !important; }
  img { transition: none !important; opacity: 1 !important; }
  [data-parallax] { transform: none !important; }
}

/* Briefly flags whichever card a redirect (or any #anchor) landed on, so
   it's obvious what the link actually pointed to. */
.card:target {
  animation: target-flash 1800ms ease;
}
@keyframes target-flash {
  0% { background: var(--gold-100); border-color: var(--gold-400); }
  100% { background: var(--white); border-color: var(--gray-200); }
}
@media (prefers-reduced-motion: reduce) {
  .card:target { animation: none; }
}

/* ---------- Focus states (keyboard navigation) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Custom scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--gray-400) var(--gray-50); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 999px; border: 2px solid var(--gray-50); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

/* ---------- Utilities ---------- */
/* CSP (see _headers) is style-src 'self' (no 'unsafe-inline') — any inline
   style="" attribute is silently dropped in production even though it
   renders fine in local dev (which sends no CSP header at all). These
   utility/semantic classes replace what used to be one-off inline styles
   across the site; add new ones here rather than reaching for style="". */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.m-0 { margin: 0; }
.mt-4 { margin-top: 4px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-36 { margin-top: 36px; }
.mb-20 { margin-bottom: 20px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mt-12-auto { margin: 12px auto 0; }
.mt-16-auto { margin: 16px auto 0; }
.mt-12-auto-mb28 { margin: 12px auto 28px; }
.m-12-0-16 { margin: 12px 0 16px; }
.maxw-420 { max-width: 420px; }
.maxw-520 { max-width: 520px; }
.maxw-640-center { max-width: 640px; margin: 0 auto; }
.maxw-720 { max-width: 720px; }
.maxw-820 { max-width: 820px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-40 { gap: 40px; }
.gap-56 { gap: 56px; }
.row-center-56 { align-items: center; gap: 56px; }
.justify-center { justify-content: center; }
.color-inherit { color: inherit; }
.minh-40vh { min-height: 40vh; }
.minh-92vh { min-height: 92vh; }
.link-gold { color: var(--gold-600); font-weight: 600; }
.tagline-gold { color: var(--gold-600); margin: 12px 0 0; }
.lede-emphasis { margin-top: 20px; font-size: 1.1rem; }
.btn-align-start { margin-top: 20px; align-self: flex-start; }
.credential-img { border-radius: 6px; margin-bottom: 16px; }
.feature-photo { border-radius: 8px; box-shadow: var(--shadow-md); }
.fullwidth-img { border-radius: 6px; width: 100%; display: block; }
.figcaption-sm { margin-top: 10px; font-size: 0.88rem; }
.scope-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.bullet-list { margin-top: 16px; padding-left: 20px; list-style: disc; color: var(--gray-600); line-height: 1.9; }
.policy-h2 { font-size: 1.4rem; }
.error-lede { margin: 16px auto 32px; max-width: 520px; }
.hidden { display: none !important; }
.skeleton { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 210;
  background: rgba(20, 22, 26, 0.06); pointer-events: none;
}
.scroll-progress-bar {
  height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress-bar { transition: none !important; } }
@media not (prefers-reduced-motion: reduce) { .scroll-progress-bar { transition: transform 80ms linear; } }

/* ---------- Magnetic buttons ---------- */
@media (pointer: fine) {
  .btn { will-change: transform; }
}

/* ---------- Clickable "card" blocks that redirect to detail content ---------- */
/* Applied to cards that are real <a> links (credential/service summaries on
   the home page) — cursor + hover lift already come from .card; this adds a
   small arrow badge that swings in on hover/focus as an affordance so users
   know the block leads somewhere. */
.card-link { cursor: pointer; text-decoration: none; }
.card-link::after {
  content: '↗';
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-100); color: var(--gold-600); font-size: 0.95rem; font-weight: 700;
  opacity: 0; transform: translate(-6px, 6px) scale(0.7);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), background var(--transition), color var(--transition);
  pointer-events: none;
}
.card-link:hover, .card-link:focus-visible { border-color: var(--gold-400); }
.card-link:hover::after, .card-link:focus-visible::after { opacity: 1; transform: translate(0, 0) scale(1); }
.card-link:hover .badge, .card-link:focus-visible .badge { background: var(--gold-500); color: var(--white); }
@media (prefers-reduced-motion: reduce) { .card-link::after { transition: none; } }

/* Project-category cards on the Projects page: clickable to filter the
   gallery below rather than navigate, so they get the same arrow affordance
   but stay same-page (no back-navigation toast involved). */
.project-card.card-link { cursor: pointer; }
.project-card.card-link::after { top: auto; bottom: 14px; right: 14px; }

/* ---------- Back-navigation toast ---------- */
/* Appears after following a card redirect (e.g. a credentials/service card
   to its detail page) so users can hop straight back without hunting for
   the nav. Auto-dismisses on a visible countdown, or instantly if the user
   picks a main nav link themselves. */
.back-nav-toast {
  position: fixed; left: 24px; bottom: 24px; z-index: 190;
  display: flex; align-items: center; gap: 2px;
  background: var(--navy-900); color: var(--white);
  padding: 10px 12px 12px; border-radius: 999px; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.96);
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 320ms;
}
.back-nav-toast.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.back-nav-action {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: inherit; font-family: inherit;
  cursor: pointer; padding: 2px 6px 2px 2px; border-radius: 999px;
  transition: color var(--transition);
}
.back-nav-action:hover .label, .back-nav-action:hover .icon { color: var(--white); }
.back-nav-toast .icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; color: var(--gold-400);
  animation: back-nav-nudge 1.6s ease-in-out infinite;
}
.back-nav-toast .label { font-size: 0.86rem; font-weight: 600; white-space: nowrap; color: rgba(255,255,255,0.9); }
.back-nav-toast .label strong { color: var(--gold-400); font-weight: 700; }
.back-nav-toast .close {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 2px; border-radius: 50%;
  background: none; border: none; color: rgba(255,255,255,0.55); flex-shrink: 0; cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.back-nav-toast .close:hover { color: var(--white); background: rgba(255,255,255,0.12); }
.back-nav-toast .countdown-track {
  position: absolute; left: 8px; right: 8px; bottom: 5px; height: 2px;
  background: rgba(255,255,255,0.14); border-radius: 2px; overflow: hidden;
}
.back-nav-toast .countdown-bar {
  height: 100%; width: 100%; background: var(--gold-500); transform-origin: 0 50%;
  transform: scaleX(1);
}
.back-nav-toast.counting .countdown-bar { transition: transform linear; }
@keyframes back-nav-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}
@media (max-width: 640px) {
  .back-nav-toast { left: 16px; right: 16px; bottom: 16px; }
  .back-nav-toast .label { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .back-nav-toast { transition: opacity 150ms ease, visibility 150ms; }
  .back-nav-toast .icon { animation: none; }
  .back-nav-toast.counting .countdown-bar { transition: none; }
}

/* ---------- Map <-> table sync (Projects page) ---------- */
tr.row-match td { background: var(--gold-100); }
tr.row-dim { opacity: 0.35; }
.table-wrap table tbody tr { transition: opacity var(--transition), background var(--transition); }

/* ---------- Form field validation states ---------- */
.field.valid input, .field.valid select, .field.valid textarea { border-color: var(--success); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.field-error.visible { display: block; }
.field.shake { animation: field-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes field-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.form-status { transition: opacity 300ms ease, transform 300ms ease; }
.form-status.success, .form-status.error {
  animation: status-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes status-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .field.shake { animation: none; }
  .form-status.success, .form-status.error { animation: none; }
}

/* ---------- Office Location column ---------- */
/* Stretches to match the contact form card's height (grid default
   align-items: stretch), then lets the map grow/shrink to fill whatever
   space is left after the compact info list — so the map's bottom edge
   lines up with the form's bottom edge instead of the column running its
   own, usually-shorter, natural height. */
.office-info-col { display: flex; flex-direction: column; }
.office-info-footer { margin-top: 16px; }

.office-map-embed {
  position: relative; width: 100%; flex: 1 1 auto; min-height: 220px;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-200); margin-top: 16px;
}
.office-map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { .office-map-embed { flex: none; height: 260px; } }

/* ---------- Compact contact-info list (with click-to-copy) ---------- */
.contact-info-list {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  overflow: hidden;
}
.cir {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  transition: background var(--transition);
}
.cir:last-child { border-bottom: none; }
.cir:hover, .cir:focus-visible { background: var(--gold-100); }
.cir:active { background: var(--gold-100); }
.cir-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: var(--gold-100); color: var(--gold-600);
}
.cir-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cir-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400); font-weight: 700; }
.cir-value { font-size: 0.88rem; font-weight: 700; color: var(--navy-900); overflow-wrap: anywhere; }

/* Hover/focus-only "click to copy" affordance — no persistent button, just
   a hint that fades in, and swaps to a checkmark + "Copied!" after a click. */
.cir-hint {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  color: var(--gold-600); font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: translateX(4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.cir:hover .cir-hint, .cir:focus-visible .cir-hint { opacity: 1; transform: translateX(0); }
.cir-hint .check-icon { display: none; }
.cir.copied .cir-hint { opacity: 1; transform: translateX(0); color: var(--success); }
.cir.copied .cir-hint .copy-icon { display: none; }
.cir.copied .cir-hint .check-icon { display: block; }
@media (max-width: 480px) { .cir-hint .hint-text { display: none; } }
@media (prefers-reduced-motion: reduce) { .cir-hint { transition: none; } }