/* ═══════════════════════════════════════════════
   The Benchmark Construction — Premium Design System
   ═══════════════════════════════════════════════ */

/* ● Skip link
   This class had no rule at all, so "Skip to main content" rendered as plain
   visible text above the logo on every load. Hide it until it takes focus. */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  display:inline-flex; align-items:center; min-height:44px; padding:0 1.25rem;
  background:var(--brass); color:var(--near-black); text-decoration:none;
  font-family:var(--font-sans); font-size:0.8rem; letter-spacing:0.08em;
  text-transform:uppercase; border-radius:0 0 6px 0;
}
.skip-link:focus, .skip-link:focus-visible { left:0; outline:2px solid var(--gold); outline-offset:2px; }

/* ● Design Tokens — Benchmark Palette */
:root {
  --slate: #2D5A7A;
  --slate-dark: #1A3345;
  --slate-light: #4A7A9A;
  --brass: #A68B5B;
  --gold: #C9A96E;
  --ivory: #F8F6F1;
  --white: #FFFFFF;
  --near-black: #1F1F1F;
  --bg-dark: #12151c;
  --bg-card: #181c26;
  --surface: #1e2230;
  --border: rgba(166, 139, 91, 0.2);
  --border-light: rgba(166, 139, 91, 0.35);
  --text: rgba(248, 246, 241, 0.85);
  --text-muted: rgba(248, 246, 241, 0.55);
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --nav-height: 72px;
  --max-width: 1240px;
  --radius: 16px;
  --radius-sm: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ● Reset */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
}
::selection { background: rgba(166, 139, 91, 0.35); color: var(--ivory); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ● Custom Cursor */
.cursor-dot, .cursor-ring { position:fixed; pointer-events:none; z-index:99999; will-change:transform; }
.cursor-dot { width:8px; height:8px; background:var(--brass); border-radius:50%; }
.cursor-ring { width:44px; height:44px; border:1.5px solid rgba(166,139,91,.5); border-radius:50%; }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display:none; } }
@media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring { display:none !important; } }

/* ● Atmospheric Background */
body::before {
  content:''; position:fixed; top:-15%; left:-10%; width:60%; height:60%;
  background:radial-gradient(circle, rgba(45,90,122,.08) 0%, transparent 70%);
  pointer-events:none; z-index:0; filter:blur(60px);
}
body::after {
  content:''; position:fixed; bottom:-20%; right:-10%; width:55%; height:55%;
  background:radial-gradient(circle, rgba(166,139,91,.06) 0%, transparent 70%);
  pointer-events:none; z-index:0; filter:blur(60px);
}
#smooth-wrapper, #smooth-content { position:relative; z-index:1; }

/* ● Navigation */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0 2rem; height:var(--nav-height);
  transition:all 0.4s var(--ease-out);
}
.navbar.scrolled { background:rgba(18,21,28,.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.nav-inner {
  max-width:var(--max-width); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; height:100%;
}
.nav-logo { display:flex; align-items:center; gap:0.75rem; }
.nav-logo-icon { flex-shrink:0; }
.nav-logo-text { display:flex; flex-direction:column; }
.nav-logo-title { font-family:var(--font-serif); font-size:1.2rem; color:var(--ivory); line-height:1; }
.nav-logo-sub { font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-muted); }
.nav-links { display:flex; list-style:none; gap:2.5rem; }
.nav-link {
  font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text); position:relative;
  /* 20px of text is under the 24px minimum target — pad the box, keep the look */
  padding:7px 0 9px;
  transition:color 0.3s;
}
.nav-link::after {
  content:''; position:absolute; bottom:5px; left:0; width:0; height:1.5px;
  background:var(--brass); transition:width 0.4s var(--ease-out);
}
.nav-link:hover { color:var(--brass); }
.nav-link:hover::after { width:100%; }

/* Mobile Nav */
.nav-toggle { display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; background:none; border:none; cursor:pointer;
  /* 44x44 is the WCAG 2.5.5 target size. The bars stay 24px wide — only the
     hit area grows, so the visual is unchanged. */
  width:44px; height:44px; padding:0; margin-right:-10px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--ivory); transition:all 0.3s; }
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
@media (max-width:768px) {
  .nav-toggle { display:flex; }
  .nav-links {
    position:fixed; top:var(--nav-height); left:0; right:0;
    background:rgba(18,21,28,.98); backdrop-filter:blur(20px);
    flex-direction:column; padding:2rem; gap:1.5rem;
    transform:translateY(-120%); opacity:0; transition:all 0.4s var(--ease-out);
    border-bottom:1px solid var(--border);
  }
  .nav-links.open { transform:translateY(0); opacity:1; }
  /* Each row is a full-width 44px target. Without this the links are only as
     tall as their text (20px) — under the 24px minimum, let alone 44px. */
  .nav-links li { width:100%; }
  .nav-links .nav-link { display:flex; align-items:center; width:100%;
    min-height:44px; padding:0 0 0 2px; }
  /* the hover underline anchors to the bottom of the taller box, so drop it —
     there is no hover on touch anyway */
  .nav-links .nav-link::after { display:none; }
}

/* ● Hero */
.hero {
  position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; padding:0 2rem;
}
.hero-bg { position:absolute; inset:0; }
.hero-image { width:100%; height:100%; object-fit:cover; }
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(18,21,28,.92) 0%, rgba(18,21,28,.7) 40%, rgba(45,90,122,.45) 100%);
}
.hero-content { position:relative; z-index:2; max-width:var(--max-width); margin:0 auto; width:100%; padding-top:var(--nav-height); }
.hero-badge {
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--brass); margin-bottom:2rem; opacity:0.8;
}
.hero-title {
  font-family:var(--font-serif); font-weight:350; font-size:clamp(2.8rem, 7vw, 6rem);
  line-height:1.02; letter-spacing:-0.02em; color:var(--ivory); text-wrap:balance;
}
.accent-italic { color:var(--gold); font-style:italic; text-shadow:0 0 40px rgba(201,169,110,.45), 0 0 80px rgba(201,169,110,.15); }
.hero-subtitle {
  max-width:60ch; font-size:1.1rem; line-height:1.7; color:var(--text); margin-top:1.5rem;
  font-weight:300;
}
.hero-actions { display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap; }
.hero-scroll {
  position:absolute; bottom:4rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.75rem;
}
.hero-scroll span { font-size:0.6rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--text-muted); }
.scroll-line { width:1px; height:40px; background:linear-gradient(to bottom,var(--brass),transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ● SplitText Mask */
.mask-line { overflow:hidden; display:block; }
.mask-line .line-inner { display:block; transform:translateY(110%); }
.char { display:inline-block; will-change:transform; }

/* ● Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 2.4rem; font-family:var(--font-sans); font-size:0.8rem;
  letter-spacing:0.08em; text-transform:uppercase; cursor:pointer;
  border-radius:50px; transition:all 0.3s var(--ease-out); position:relative;
  gap:0.6rem; font-weight:500; white-space:nowrap; border:none;
}
.btn-primary {
  background:linear-gradient(135deg, var(--brass), var(--gold));
  color:var(--near-black);
  box-shadow:0 8px 32px rgba(166,139,91,.3), 0 0 0 1px rgba(201,169,110,.15) inset;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(166,139,91,.4); }
.btn-outline {
  background:transparent; color:var(--ivory);
  border:1px solid var(--border-light);
}
.btn-outline:hover { border-color:var(--brass); color:var(--brass); }

/* ● Service page links — a crawlable path to every service from the home page,
   with real 44px targets rather than inline text in a sentence. */
.service-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:2.5rem}
.service-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--border);border-radius:50px;text-decoration:none;color:var(--text);
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  transition:border-color .25s,color .25s}
.service-links a:hover{border-color:var(--brass);color:var(--brass)}
.service-card h3 a{text-decoration:none;color:inherit;transition:color .25s;
  /* the heading text alone measures 21px — under the 24px minimum target */
  display:inline-flex;align-items:center;min-height:44px}
.service-card h3 a:hover{color:var(--brass)}

/* ● Portfolio outbound */
.projects-more { text-align:center; margin-top:3.5rem; }
.projects-more-note { margin-top:1rem; font-family:var(--font-mono); font-size:0.68rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--text-faint,rgba(248,246,241,.45)); }

.contact-link { display:inline-flex; align-items:center; min-height:44px;
  color:var(--ivory); text-decoration:none; transition:color .3s; }
.contact-link:hover { color:var(--brass); }

/* ● Stats Bar */
.stats {
  padding:5rem 2rem; background:rgba(18,21,28,.5);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stats-grid { max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat-item { text-align:center; }
.stat-number {
  display:block; font-family:var(--font-serif); font-size:clamp(2.5rem,4vw,3.8rem);
  color:var(--gold); font-weight:350; line-height:1;
}
.stat-label { display:block; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin-top:0.5rem; }
@media (max-width:768px) { .stats-grid { grid-template-columns:repeat(2,1fr); gap:2.5rem; } }

/* ● Sections */
.section { padding:8rem 2rem; }
.section-container { max-width:var(--max-width); margin:0 auto; }
.section-header { margin-bottom:4rem; max-width:720px; }
.section-tag {
  display:inline-block; font-family:var(--font-mono); font-size:0.7rem;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--brass); margin-bottom:1rem;
}
.section-title {
  font-family:var(--font-serif); font-weight:350; font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.08; letter-spacing:-0.02em; color:var(--ivory); text-wrap:balance;
}
.section-desc { font-size:1.05rem; color:var(--text); line-height:1.7; margin-top:1rem; max-width:60ch; }

/* ● About */
.about .section-content { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-body p { margin-bottom:1rem; color:var(--text); font-weight:300; }
.text-brass { color:var(--brass); }
.about-metrics { display:flex; align-items:center; gap:1.5rem; margin-top:2rem; }
.metric { text-align:center; }
.metric-value { display:block; font-family:var(--font-serif); font-size:1.6rem; color:var(--brass); }
.metric-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); }
.metric-divider { width:1px; height:40px; background:var(--border); }
.about-image-frame {
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3; border:1px solid var(--border);
}
.about-image-frame img { width:100%; height:100%; object-fit:cover; }
.about-image-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(18,21,28,.7),transparent); pointer-events:none; }
.about-image-badge {
  position:absolute; bottom:1.5rem; left:1.5rem; display:flex; flex-direction:column;
  font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ivory);
}
.about-image-badge strong { font-family:var(--font-serif); font-size:1.1rem; color:var(--gold); }
@media (max-width:768px) { .about .section-content { grid-template-columns:1fr; gap:2.5rem; } }

/* ● Projects */
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; perspective:1200px; }
.project-card {
  position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); transform-style:preserve-3d; will-change:transform;
  aspect-ratio:4/5; cursor:pointer; min-height:380px;
}
.project-image {
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.project-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(18,21,28,.95) 0%, rgba(18,21,28,.3) 50%, rgba(18,21,28,.1) 100%);
  transition:opacity 0.4s;
}
.project-card:hover .project-overlay { opacity:0.85; }
.project-content {
  position:absolute; bottom:0; left:0; right:0; padding:1.75rem;
  transform:translateZ(30px);
}
.project-location {
  display:block; font-family:var(--font-mono); font-size:0.6rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--brass); margin-bottom:0.5rem;
}
.project-name {
  font-family:var(--font-serif); font-size:1.25rem; color:var(--ivory);
  font-weight:400; margin-bottom:0.4rem;
}
.project-scope { font-size:0.82rem; color:var(--text); line-height:1.5; }
.project-tag {
  display:inline-block; margin-top:0.75rem;
  font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.3rem 0.8rem; border:1px solid var(--border-light); border-radius:20px; color:var(--brass);
}
@media (max-width:1024px) { .projects-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .projects-grid { grid-template-columns:1fr; } }

/* ● Services */
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.service-card {
  background:linear-gradient(160deg, rgba(166,139,91,.10) 0%, var(--bg-card) 40%, var(--surface) 100%);
  border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem 1.75rem;
  position:relative; overflow:hidden; transition:all 0.4s var(--ease-out);
}
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--brass), var(--gold), transparent);
  opacity:1; box-shadow:0 0 12px rgba(166,139,91,.5);
}
.service-card:hover { transform:translateY(-6px); border-color:var(--border-light); }
.service-icon { margin-bottom:1.5rem; }
.service-card h3 { font-family:var(--font-serif); font-size:1.2rem; color:var(--ivory); font-weight:400; margin-bottom:0.75rem; }
.service-card p { font-size:0.85rem; color:var(--text); line-height:1.65; font-weight:300; }
@media (max-width:900px) { .services-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px) { .services-grid { grid-template-columns:1fr; } }

/* ● Process */
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.process-step { text-align:center; }
.step-number {
  font-family:var(--font-serif); font-size:3rem; color:var(--brass);
  font-weight:300; line-height:1; margin-bottom:0.75rem; opacity:0.6;
}
.process-step h3 { font-family:var(--font-serif); font-size:1.15rem; color:var(--ivory); font-weight:400; margin-bottom:0.5rem; }
.process-step p { font-size:0.85rem; color:var(--text-muted); line-height:1.6; }
@media (max-width:768px) { .process-steps { grid-template-columns:repeat(2,1fr); gap:2rem; } }

/* ● Marquee */
.marquee-section .section-header { margin-bottom:3rem; }
.marquee { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:1.5rem 0; }
.marquee-track { display:flex; width:fit-content; }
.marquee-group { display:flex; gap:2rem; align-items:center; white-space:nowrap; padding-right:2rem; }
.marquee-group span { font-family:var(--font-serif); font-size:1.5rem; color:var(--text-muted); }
.marquee-group span:nth-child(odd) { color:var(--brass); font-size:1rem; opacity:0.5; }

/* ● Contact */
.contact-wrap { display:grid; grid-template-columns:1fr 1.5fr; gap:3rem; }
.contact-info { display:flex; flex-direction:column; gap:1rem; }
.contact-card {
  display:flex; align-items:center; gap:1rem;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.25rem 1.5rem; transition:border-color 0.3s;
}
.contact-card:hover { border-color:var(--border-light); }
.contact-card-icon { color:var(--brass); flex-shrink:0; }
.contact-card span { font-size:0.9rem; color:var(--text); }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form-group.full { grid-column:1/-1; }
.form-group { position:relative; }
.form-input {
  width:100%; padding:1rem 1.25rem; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--ivory); font-family:var(--font-sans);
  font-size:0.9rem; transition:all 0.3s; outline:none;
}
.form-input:focus { border-color:var(--brass); box-shadow:0 0 0 3px rgba(166,139,91,.1); }
.form-textarea { min-height:120px; resize:vertical; }
.form-label {
  position:absolute; left:1.25rem; top:1rem; font-size:0.85rem; color:var(--text-muted);
  pointer-events:none; transition:all 0.3s var(--ease-out); background:transparent; padding:0 0.25rem;
}
.form-input:focus + .form-label, .form-input:not(:placeholder-shown) + .form-label {
  top:-0.5rem; left:0.75rem; font-size:0.65rem; color:var(--brass);
}
.btn-submit { grid-column:1/-1; margin-top:0.5rem; }

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

/* ● Footer */
.footer { border-top:1px solid var(--border); padding:3rem 2rem 2rem; }
.footer-inner { max-width:var(--max-width); margin:0 auto; }
.footer-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; }
.footer-brand { display:flex; align-items:center; gap:0.75rem; }
.footer-name { font-family:var(--font-serif); color:var(--ivory); font-size:1rem; }
.footer-tagline { font-size:0.8rem; color:var(--text-muted); }
.footer-divider { height:1px; background:var(--border); margin-bottom:1.5rem; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; font-size:0.75rem; color:var(--text-muted); }

/* ● Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .mask-line .line-inner { transform:none !important; }
  .char { transform:none !important; }
  .project-card { transform:none !important; }
  .scroll-line { animation:none; opacity:0.3; }
}