:root {
  --ink: #182126;
  --ink-soft: #344047;
  --paper: #ffffff;
  --muted: #f3f4f2;
  --line: #d9dedb;
  --accent: #c59a4a;
  --accent-dark: #9f7831;
  --dark: #11181c;
  --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.section { padding: 96px 0; }
.section-muted { background: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link { position: absolute; left: -999px; top: 10px; background: #fff; padding: 10px; z-index: 1000; }
.skip-link:focus { left: 10px; }

/* Visible keyboard focus everywhere, including on dark/gold backgrounds */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
}
.hero a:focus-visible,
.process-section a:focus-visible,
.partner-section a:focus-visible {
  outline-color: #e2c58e;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(24,33,38,.08);
  backdrop-filter: blur(12px);
}
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 2px solid var(--accent); font-family: "Montserrat"; font-weight: 700;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; text-transform: uppercase; letter-spacing: .08em; }
.brand-text strong { font-family: "Montserrat"; font-size: 15px; }
.brand-text small { font-size: 9px; margin-top: 5px; }
.primary-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.primary-nav a:hover { color: var(--accent-dark); }
.nav-cta { padding: 12px 18px; background: var(--ink); color: #fff !important; }
.menu-toggle { display:none; border:0; background:none; }
.menu-toggle span:not(.sr-only) { display:block; width:26px; height:2px; background:var(--ink); margin:5px 0; }

/* ============================================================
   Blueprint visual system
   Used in place of stock/placeholder photography across the site.
   Fine grid + registration marks in brand ink/gold, evoking a
   technical drawing rather than an empty image box. Every spot using
   this treatment is a straightforward drop-in for a real project
   photo later — swap the element, keep the surrounding layout.
   ============================================================ */
.blueprint-dark {
  background-color: var(--dark);
  background-image:
    repeating-linear-gradient(0deg, rgba(226,197,142,.07) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(226,197,142,.07) 0 1px, transparent 1px 56px),
    linear-gradient(160deg, #1c272e, #11181c 70%);
  background-position: -1px -1px, -1px -1px, 0 0;
}
.blueprint-light {
  background-color: var(--muted);
  background-image:
    repeating-linear-gradient(0deg, rgba(24,33,38,.09) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(24,33,38,.09) 0 1px, transparent 1px 40px);
}
/* Corner registration marks — a small recurring motif that reads as
   a drafting/survey mark rather than a "missing image" icon. */
.blueprint-mark { position:absolute; width:22px; height:22px; opacity:.55; }
.blueprint-mark::before, .blueprint-mark::after { content:""; position:absolute; background:var(--accent); }
.blueprint-mark::before { top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.blueprint-mark::after { left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.blueprint-mark.tl { top:20px; left:20px; }
.blueprint-mark.tr { top:20px; right:20px; }
.blueprint-mark.bl { bottom:20px; left:20px; }
.blueprint-mark.br { bottom:20px; right:20px; }
.blueprint-mark.light::before, .blueprint-mark.light::after { background: var(--accent-dark); }

.hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  color: white;
  overflow: hidden;
  background: var(--dark);
}
.hero-placeholder { position: absolute; inset: 0; }
.hero-placeholder.blueprint-dark { background-color: var(--dark); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,16,20,.35), transparent 45%); }
/* Small, low-key drawing annotation — a note for anyone editing the
   page, not a loud "image missing" badge. Quiet enough not to read
   as an unfinished page. */
.photo-flag {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 3;
  color: rgba(226,197,142,.5);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .04em;
}
/* Placeholder pattern used on the Featured Work cards until real
   project photography replaces it — same blueprint system as the
   hero, in the light variant since these cards sit on white. */
.img-placeholder {
  background-color: var(--muted);
  background-image:
    repeating-linear-gradient(0deg, rgba(24,33,38,.09) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(24,33,38,.09) 0 1px, transparent 1px 40px);
}
.img-placeholder.project-one,
.img-placeholder.project-two,
.img-placeholder.project-three {
  background-image: none;
}
.photo-flag-inline {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 2;
  color: rgba(24,33,38,.4);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .04em;
}
.hero-content { position:relative; padding: 120px 0 80px; max-width: 880px; margin-left:max(20px, calc((100vw - var(--max))/2)); margin-right:20px; }
.eyebrow { margin:0 0 18px; text-transform:uppercase; letter-spacing:.16em; font-weight:700; font-size:12px; color:#e2c58e; }
.eyebrow.dark { color: var(--accent-dark); }
.hero h1, h2, h3 { font-family: "Montserrat", Arial, sans-serif; }
..hero h1 { margin:0; font-size:clamp(38px,5vw,64px); line-height:1.05; max-width:760px; letter-spacing:-.03em; }
.hero-copy { max-width:760px; font-size:19px; color:rgba(255,255,255,.88); margin:28px 0 32px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
.btn { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:0 24px; font-weight:700; border:1px solid transparent; cursor:pointer; }
.btn-primary { background:var(--accent); color:#111; }
.btn-primary:hover { background:#d4ae67; }
.btn-secondary { color:#fff; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.04); }
.btn-outline-light { color:#fff; border-color:rgba(255,255,255,.55); margin-top:22px; }
.trust-row { margin-top:54px; display:flex; flex-wrap:wrap; gap:22px; font-size:13px; color:rgba(255,255,255,.78); }
.trust-row span::before { content:"✓"; color:#e2c58e; margin-right:7px; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
h2 { margin:0 0 20px; font-size:clamp(34px,4vw,54px); line-height:1.12; letter-spacing:-.025em; }
.body-copy, .split p { font-size:17px; color:var(--ink-soft); }
.section-heading { max-width:760px; margin-bottom:48px; }
.section-heading.narrow { max-width:680px; }
.section-heading p { color:var(--ink-soft); font-size:17px; }

.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card { background:#fff; padding:34px; min-height:320px; display:flex; flex-direction:column; }
.card-number { color:var(--accent-dark); font-size:12px; font-weight:700; letter-spacing:.14em; }
.service-card h3 { font-size:22px; margin:34px 0 12px; }
.service-card p { color:var(--ink-soft); margin:0 0 28px; }
.service-card a, .service-card .text-link.is-disabled { margin-top:auto; font-weight:700; font-size:14px; }
.service-card a span, .text-link span { color:var(--accent-dark); }

.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.benefit-grid article { padding:32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.benefit-grid h3 { margin:0 0 10px; font-size:19px; }
.benefit-grid p { margin:0; color:var(--ink-soft); }

.process-section { background:var(--dark); color:#fff; }
.section-heading.light p { color:rgba(255,255,255,.7); }
.process-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.15); border-left:1px solid rgba(255,255,255,.15); }
.process-list li { min-height:240px; padding:28px; border-right:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); }
.process-list span { color:#e2c58e; font-size:12px; letter-spacing:.15em; font-weight:700; }
.process-list h3 { margin:46px 0 10px; font-size:19px; }
.process-list p { color:rgba(255,255,255,.68); margin:0; font-size:14px; }

.project-grid { display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; gap:18px; min-height:620px; }
.project-card { position:relative; min-height:300px; background-size:cover; background-position:center; overflow:hidden; }
.project-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,18,21,.86), rgba(12,18,21,.05) 68%); }
.project-one { grid-row:1 / span 2; }
/* .project-two, .project-three sizing inherited from .project-card */
.project-content { position:absolute; left:28px; right:28px; bottom:28px; z-index:2; color:#fff; }
.project-content p { margin:0 0 6px; color:#e2c58e; text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.13em; }
.project-content h3 { margin:0 0 8px; font-size:22px; }
.project-content span { color:rgba(255,255,255,.72); font-size:13px; }

.industry-layout { align-items:center; }
.industry-list { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.process-section-link { display:inline-block; margin-top:40px; color:#e2c58e; font-weight:700; }
.process-section-link:hover { color:#fff; }
.industry-list a { padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-weight:700; }
.industry-list a:hover { background:#fff; color:var(--accent-dark); }
.text-link { display:inline-block; margin-top:16px; font-weight:700; }

.partner-section { background:#253038; color:#fff; }
.partner-section p { color:rgba(255,255,255,.72); }
.check-list { list-style:none; padding:0; margin:22px 0 0; }
.check-list li { padding:9px 0 9px 26px; position:relative; border-bottom:1px solid rgba(255,255,255,.12); }
.check-list li::before { content:"✓"; position:absolute; left:0; color:#e2c58e; }

.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.resource-grid article { border:1px solid var(--line); padding:30px; }
.resource-grid span { color:var(--accent-dark); text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.12em; }
.resource-grid h3 { margin:24px 0 10px; font-size:21px; }
.resource-grid p { color:var(--ink-soft); }
.resource-grid a { display:inline-block; margin-top:10px; font-weight:700; }
.text-link.is-disabled { display:inline-block; margin-top:10px; font-weight:700; color:#8b939a; cursor:default; }

.direct-contact { margin-top:22px; font-weight:600; }
.direct-contact a { display:inline-block; }
.direct-contact a:hover { color:var(--accent-dark); }

.consultation-section { padding:100px 0; background:#e9e3d6; }
.consultation-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }
.consultation-form { background:#fff; padding:36px; box-shadow:0 18px 50px rgba(24,33,38,.08); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
label { display:block; font-size:13px; font-weight:700; margin-bottom:16px; }
input, select, textarea { width:100%; margin-top:7px; border:1px solid var(--line); padding:13px; background:#fff; }
textarea { resize:vertical; }
.form-note { font-size:11px; color:#687279; }
.form-error { background:#fdecec; border-left:3px solid #c0392b; color:#8a2c22; padding:14px 16px; font-size:14px; font-weight:600; margin:0 0 20px; }
.hp-field { position:absolute; left:-9999px; top:-9999px; }

.site-footer { background:#101619; color:#fff; padding:72px 0 22px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; }
.footer-brand { margin-bottom:20px; }
.site-footer h3 { font-size:14px; margin:0 0 16px; }
.site-footer a:not(.brand) { display:block; color:rgba(255,255,255,.66); margin:9px 0; font-size:13px; }
.site-footer p { color:rgba(255,255,255,.62); font-size:13px; }
.footer-contact a { margin: 4px 0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:22px; display:flex; justify-content:space-between; color:rgba(255,255,255,.46); font-size:12px; }
.footer-bottom a { display:inline; margin:0; color:inherit; text-decoration:underline; text-underline-offset:2px; }
.footer-bottom a:hover { color:#fff; }

/* Legal pages (Privacy Policy, Terms) */
.legal-updated { color:var(--ink-soft); font-size:14px; margin:0 0 40px; }
.legal-body h2 { font-family:"Montserrat", Arial, sans-serif; font-size:22px; margin:36px 0 12px; }
.legal-body h2:first-child { margin-top:0; }
.legal-body p { margin:0 0 18px; }
.legal-body em { color:var(--ink-soft); }
.legal-flag { font-style:normal; color:rgba(255,255,255,.32); font-size:11px; }

/* Active nav state (used on secondary pages like Partner With Us) */
.primary-nav a[aria-current="page"] { color: var(--accent-dark); }

/* Breadcrumb, used on service/industry pages */
.breadcrumb-nav { padding:18px 0 0; font-size:13px; color:var(--ink-soft); }
.breadcrumb-nav a:hover { color:var(--accent-dark); }
.breadcrumb-nav span[aria-current="page"] { color:var(--ink); font-weight:600; }

/* ============================================================
   Partner With Us page — role cards, capability grid, FAQ, CTA
   ============================================================ */
.role-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.role-card { background:#fff; padding:34px; }
.role-card h3 { font-size:21px; margin:30px 0 12px; }
.role-card p { color:var(--ink-soft); margin:0; }
.role-card em { color:var(--ink-soft); font-style:normal; font-size:15px; }

.capability-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.capability-item { padding:26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.capability-item h3 { margin:0 0 8px; font-size:17px; }
.capability-item p { margin:0; color:var(--ink-soft); font-size:14px; }

.partner-process-list { grid-template-columns:repeat(4,1fr); }

.faq-list { display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); max-width:820px; }
.faq-item { background:#fff; padding:22px 28px; }
.faq-item summary { cursor:pointer; font-weight:700; font-size:16px; list-style:none; position:relative; padding-right:28px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:0; font-size:20px; color:var(--accent-dark); }
.faq-item[open] summary::after { content:"–"; }
.faq-item p { margin:14px 0 0; color:var(--ink-soft); }

.partner-cta { background:var(--muted); padding:80px 0; }
.partner-cta-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:32px; }
.partner-cta-inner > div { max-width:640px; }
.partner-cta h2 { margin-bottom:10px; }

/* ============================================================
   Capability Statement page
   ============================================================ */
.cap-hero { background:var(--paper); border-bottom:4px solid var(--accent); padding:90px 0 60px; }
.cap-hero-inner { max-width:860px; }
.cap-hero-inner h1 { margin:6px 0 4px; font-size:clamp(38px,5vw,58px); letter-spacing:-.02em; }
.cap-hero-tagline { text-transform:uppercase; letter-spacing:.1em; font-size:13px; font-weight:700; color:var(--ink-soft); margin:0 0 26px; }
.cap-hero-copy { max-width:720px; color:var(--ink-soft); }
.cap-hero .hero-actions { margin-top:8px; }

.btn-outline-dark { border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline-dark:hover { background:var(--ink); color:#fff; }

.snapshot-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px; }
.snapshot-item { background:#fff; padding:22px 26px; display:flex; flex-direction:column; gap:6px; }
.snapshot-label { font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--accent-dark); }
.snapshot-value { font-size:15px; color:var(--ink); font-weight:600; line-height:1.5; }
.snapshot-note { display:block; font-weight:400; font-size:12.5px; color:var(--ink-soft); margin-top:4px; }

.placeholder-text {
  color:#8a5a12;
  font-weight:600;
  font-style:italic;
  background:#fbf3e3;
  padding:3px 8px;
  border-left:3px solid var(--accent);
  display:inline-block;
  font-size:14px;
}

.cap-contact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin:36px 0 8px; }
.cap-contact-block { display:flex; flex-direction:column; gap:6px; }
.cap-contact-value { font-size:17px; font-weight:700; }
a.cap-contact-value:hover { color:var(--accent-dark); }
.cap-contact-cta { margin-top:26px; }
.cap-contact .section-heading { margin-bottom:8px; }

.service-area-copy { max-width:720px; }

/* Decorative line-art graphic used in place of a photo in hero
   sections (desktop only — see media queries below). */
.hero-blueprint-graphic { position:absolute; right:6%; top:50%; transform:translateY(-50%); width:320px; height:auto; opacity:.4; z-index:1; pointer-events:none; }
.hero-blueprint-graphic path, .hero-blueprint-graphic line, .hero-blueprint-graphic circle, .hero-blueprint-graphic rect { stroke: #e2c58e; }

/* ============================================================
   Our Project Delivery Process page — numbered timeline
   ============================================================ */
.delivery-timeline { display:flex; flex-direction:column; }
.delivery-step { position:relative; display:grid; grid-template-columns:110px 1fr; gap:36px; padding:44px 0; border-top:1px solid var(--line); }
.delivery-step:first-child { border-top:none; padding-top:0; }
.delivery-step-marker { display:flex; flex-direction:column; align-items:center; }
.delivery-step-number {
  width:64px; height:64px; border-radius:50%;
  border:2px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:"Montserrat", Arial, sans-serif; font-weight:700; font-size:19px;
  color:var(--accent-dark); background:#fff; flex-shrink:0;
}
.delivery-step-content > .eyebrow { margin-bottom:6px; }
.delivery-step-content h3 { margin:0 0 14px; font-size:25px; }
.delivery-step-intro { color:var(--ink-soft); font-size:16px; margin:0 0 20px; max-width:640px; }
.delivery-fields { display:grid; grid-template-columns:repeat(2,1fr); gap:22px 28px; }
.delivery-field-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--accent-dark); margin-bottom:6px; }
.delivery-field p { margin:0; color:var(--ink-soft); font-size:14.5px; }

.delivery-hero-note { max-width:640px; }

/* ============================================================
   Representative Project Types grid (homepage) — reuses .card-grid's
   bordered layout so it stays visually consistent with the service
   cards above it, instead of introducing a new grid pattern.
   ============================================================ */
.project-type-grid { grid-template-columns: repeat(3, 1fr); }
.project-type-card { background: #fff; display: flex; flex-direction: column; }
.project-type-image { position: relative; aspect-ratio: 4 / 3; }
.project-type-body { padding: 22px 24px; }
.project-type-body h3 { margin: 0; font-size: 17px; }

.footer-hours { display: block; color: rgba(255,255,255,.5); font-size: 12px; margin-top: 6px; }
.direct-contact-hours { display: block; margin-top: 8px; font-weight: 400; font-size: 14px; color: var(--ink-soft); }

@media (max-width: 980px) {
  .menu-toggle { display:block; }
  .primary-nav { display:none; position:absolute; top:78px; left:0; right:0; padding:24px; background:#fff; flex-direction:column; align-items:stretch; border-bottom:1px solid var(--line); }
  .primary-nav.open { display:flex; }
  .hero { min-height:680px; }
  .split, .consultation-grid { grid-template-columns:1fr; gap:36px; }
  .card-grid, .benefit-grid, .resource-grid { grid-template-columns:repeat(2,1fr); }
  .process-list, .partner-process-list { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .capability-grid { grid-template-columns:repeat(2,1fr); }
  .cap-contact-grid { grid-template-columns:repeat(2,1fr); }
  .hero-blueprint-graphic { display:none; }
}
@media (max-width: 680px) {
  .container { width:min(100% - 28px, var(--max)); }
  .section { padding:70px 0; }
  .hero { min-height:720px; }
  .hero-content { padding-top:100px; margin-left:14px; }
  .hero h1 { font-size:48px; }
  .hero-copy { font-size:17px; }
  .hero-actions .btn { width:100%; }
  .trust-row { display:grid; gap:8px; }
  .card-grid, .benefit-grid, .resource-grid, .process-list, .industry-list { grid-template-columns:1fr; }
  .project-grid { grid-template-columns:1fr; grid-template-rows:auto; min-height:0; }
  .project-one { grid-row:auto; }
  .form-row, .footer-grid { grid-template-columns:1fr; }
  .consultation-form { padding:24px; }
  .footer-bottom { flex-direction:column; gap:10px; }
  .role-grid, .capability-grid, .partner-process-list { grid-template-columns:1fr; }
  .partner-cta-inner { flex-direction:column; align-items:flex-start; }
  .snapshot-grid, .cap-contact-grid { grid-template-columns:1fr; }
  .delivery-step { grid-template-columns:1fr; gap:16px; }
  .delivery-step-marker { flex-direction:row; }
  .delivery-fields { grid-template-columns:1fr; }
}