:root{
  --bg:#000000;
  --bg-1:#0a0a0a;
  --bg-2:#141414;
  --bg-3:#1a1a1a;
  --bg-deep:#000000;
  --ink:#f4ede0;
  --ink-muted:rgba(244,237,224,0.55);
  --ink-faint:rgba(244,237,224,0.2);
  --gold:#c9a45c;
  --gold-bright:#d8b572;
  --gold-soft:#a88846;
  --navy:#01415c;
  --navy-light:#5e8da1;
  --navy-deep:#013048;
  --line:rgba(201,164,92,0.18);
  --line-strong:rgba(201,164,92,0.4);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --maxw: 1320px;
  --gutter: 40px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ============ USP / TRUST BAR ============ */
.topbar{
  background:#000;
  border-bottom:1px solid rgba(201,164,92,0.25);
  padding:13px 0;
  font-size:10.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ink-muted);
  position:relative; z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,0.02);
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  align-items:center;
  gap:24px;
}
.usp{
  display:flex; align-items:center; gap:10px;
  justify-content:center;
}
.usp .dot{
  width:5px; height:5px; background:var(--navy-light); border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 10px rgba(94,141,161,0.6);
}
.usp-label{white-space:nowrap;}
.usp strong{color:var(--ink); font-weight:500; letter-spacing:2px;}

/* ============ MAIN NAV ============ */
#site-header{display:contents;}
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(0,0,0,0.9);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background .4s ease, border-color .4s ease;
}
.nav.scrolled{
  background:rgba(2, 16, 28, 0.96);
  border-bottom-color:rgba(94, 141, 161, 0.18);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  gap:32px;
}
.logo-wrap{
  display:inline-flex; align-items:center;
  text-decoration:none;
}
.logo-img{
  height:60px; width:auto;
  display:block;
}

.nav-links{
  display:flex; align-items:center; gap:36px;
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  margin-left:auto; margin-right:32px;
}
.nav-links > a,
.nav-links > .nav-dropdown > .nav-dropdown-trigger{
  color:var(--ink-muted); text-decoration:none;
  transition:color .4s ease;
  position:relative; padding:6px 0;
  display:inline-flex; align-items:center; gap:6px;
}
.nav-links > a:hover,
.nav-links > .nav-dropdown:hover > .nav-dropdown-trigger{color:var(--ink);}
.nav-links > a::after,
.nav-links > .nav-dropdown > .nav-dropdown-trigger::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .4s ease;
}
.nav-links > a:hover::after,
.nav-links > .nav-dropdown:hover > .nav-dropdown-trigger::after{width:100%;}
.nav-links > a.nav-active,
.nav-links > .nav-dropdown.nav-active > .nav-dropdown-trigger{color:var(--ink);}
.nav-links > a.nav-active::after,
.nav-links > .nav-dropdown.nav-active > .nav-dropdown-trigger::after{width:100%;}

/* Services dropdown */
.nav-dropdown{position:relative;}
.nav-dropdown .caret{
  font-size:9px; color:var(--gold);
  transition:transform .3s ease;
}
.nav-dropdown:hover .caret{transform:rotate(180deg);}
.nav-dropdown-menu{
  position:absolute; top:100%; left:-20px;
  min-width:300px;
  background:rgba(0,0,0,0.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(201,164,92,0.2);
  padding:8px 0;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  z-index:60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}
/* extend hover area to bridge the gap between trigger and menu */
.nav-dropdown::before{
  content:''; position:absolute; top:100%; left:0; right:0; height:12px;
}
.nav-dropdown-menu a{
  display:flex; align-items:baseline; gap:14px;
  padding:11px 22px;
  color:var(--ink-muted); text-decoration:none;
  font-size:12px; letter-spacing:1px; text-transform:none;
  transition:background .25s ease, color .25s ease;
  font-family:var(--sans);
}
.nav-dropdown-menu a:hover{
  background:rgba(201,164,92,0.06);
  color:var(--ink);
}
.nav-dropdown-menu a::after{display:none;}
.nav-dropdown-menu .dd-num{
  font-family:var(--serif); font-style:italic;
  color:var(--gold); font-size:13px;
  min-width:22px;
}
.nav-dropdown-menu .dd-title{
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:-0.01em;
}

.nav-cta{
  display:flex; flex-direction:column; align-items:flex-end;
  padding:10px 20px;
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold);
  text-decoration:none;
  transition:all .4s ease;
  line-height:1.2;
}
.nav-cta-label{font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-muted); transition:color .4s ease;}
.nav-cta-phone{font-size:15px; font-weight:500; letter-spacing:0.5px; margin-top:2px;}
.nav-cta:hover{background:var(--gold); border-color:var(--gold);}
.nav-cta:hover .nav-cta-label,
.nav-cta:hover .nav-cta-phone{color:#000;}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:calc(100vh - 130px);
  overflow:hidden;
  display:flex; align-items:center;
  padding:16px 0 80px;
}

.px-layer{position:absolute; inset:0; pointer-events:none; will-change:transform;}

.px-grid{
  background-image:
    linear-gradient(rgba(201,164,92,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,164,92,0.03) 1px, transparent 1px);
  background-size:80px 80px;
  opacity:0.6;
}

/* Radial mask keeps the left side dark and clean so heading reads cleanly,
   while the right side (where the blueprint sits) stays visible */
.px-mask{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 25% 50%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0) 75%);
}

.hero-content{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  width:100%;
}
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:24px;
  font-weight:500;
}
.eyebrow .rule{width:48px; height:1px; background:var(--gold);}

.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(44px, 6.6vw, 92px);
  line-height:0.98;
  letter-spacing:-0.02em;
  margin-bottom:26px;
  max-width:14ch;
}
.hero h1 em{font-style:italic; color:var(--gold); font-weight:400;}

.hero p.lede{
  font-size:17px;
  line-height:1.6;
  color:var(--ink-muted);
  max-width:50ch;
  margin-bottom:36px;
  font-weight:300;
}

.hero-actions{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.btn-primary{
  background:var(--gold); color:#000;
  padding:16px 32px;
  text-decoration:none;
  font-family:var(--sans); font-weight:500;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  border:none; cursor:pointer;
  transition:all .4s ease;
  display:inline-flex; align-items:center; gap:14px;
}
.btn-primary .arrow{transition:transform .4s ease;}
.btn-primary:hover{background:var(--ink);}
.btn-primary:hover .arrow{transform:translateX(6px);}
.btn-ghost{
  color:var(--ink); text-decoration:none;
  font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:500;
  padding:16px 0;
  border-bottom:1px solid var(--ink-faint);
  transition:border-color .4s ease, color .4s ease;
}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

/* Hero stats are now their own band, see .stats-band below */

/* ============ STATS BAND ============ */
.stats-band{
  background:#080808;
  border-top:1px solid rgba(201,164,92,0.18);
  border-bottom:1px solid rgba(201,164,92,0.18);
  padding:34px 0;
  position:relative;
}
.stats-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.stat{
  display:flex; flex-direction:column; gap:6px;
  flex:1; text-align:center;
}
.stat-num{
  font-family:var(--serif); font-size:44px; font-weight:400;
  color:var(--gold); line-height:1; letter-spacing:-0.02em;
}
.stat-num .plus{font-size:22px; vertical-align:super; color:var(--ink-muted); margin-left:1px;}
.stat-lbl{
  font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--ink-muted); margin-top:6px;
}
/* RICS variant: logo replaces the numerical stat */
.stat-rics{align-items:center;}
.stat-rics-mark{
  height:44px;
  width:auto;
  display:block;
  opacity:0.95;
}
.stat-sep{
  width:1px; height:48px;
  background:linear-gradient(180deg, transparent 0%, rgba(201,164,92,0.25) 50%, transparent 100%);
  flex-shrink:0;
}

/* ============ HERO BLUEPRINT ANIMATIONS ============ */
/* Single animation per element: initial draw-in is the first cycle of the loop */
.draw-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw-stroke 1.4s cubic-bezier(.4,.0,.2,1) forwards;
  animation-delay: var(--delay, 0s);
  will-change: stroke-dashoffset;
}
@keyframes draw-stroke {
  to { stroke-dashoffset: 0; }
}

/* Text elements join the same redraw cycle via opacity */
.draw-text {
  opacity: 0;
  animation: text-fade 1.2s ease forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes text-fade {
  to { opacity: 0.7; }
}

/* Measurement lines & ticks */
.m-line {
  stroke-dasharray: 500; stroke-dashoffset: 500;
  animation: draw-m-line 1.2s ease forwards;
  animation-delay: var(--delay, 0s);
  will-change: stroke-dashoffset;
}
@keyframes draw-m-line {
  to { stroke-dashoffset: 0; }
}
.m-tick {
  opacity: 0;
  animation: fade-in-tick .6s ease forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes fade-in-tick {
  to { opacity: 0.7; }
}

/* Blueprint redraw loop: a SINGLE keyframe that handles draw-in AND the redraw cycle.
   Replaces the stacked-animation approach that was causing jitter from competing properties. */
.bp-group .draw-line {
  animation: bp-redraw 22s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes bp-redraw {
  /* First 6% (~1.3s) is the initial draw-in */
  0% { stroke-dashoffset: 600; }
  6% { stroke-dashoffset: 0; }
  /* Hold visible */
  55% { stroke-dashoffset: 0; }
  /* Erase */
  65% { stroke-dashoffset: 600; }
  /* Brief pause */
  75% { stroke-dashoffset: 600; }
  /* Redraw */
  90%, 100% { stroke-dashoffset: 0; }
}

/* Text elements use opacity to match the same erase/redraw rhythm */
.bp-group .draw-text {
  animation: bp-text-cycle 22s ease infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes bp-text-cycle {
  0% { opacity: 0; }
  6% { opacity: 0.7; }
  55% { opacity: 0.7; }
  65%, 75% { opacity: 0; }
  90%, 100% { opacity: 0.7; }
}

/* Counters: single animation, no stacking */
.counter {
  opacity: 0;
  animation: counter-cycle 22s ease infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes counter-cycle {
  0% { opacity: 0; }
  6% { opacity: 0.7; }
  55% { opacity: 0.7; }
  65%, 75% { opacity: 0; }
  90%, 100% { opacity: 0.7; }
}

/* Measurement lines, ticks, and compass also join the cycle so the whole drawing reads as one piece */
.px-measure .m-line {
  animation: bp-redraw 22s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: var(--delay, 0s);
}
.px-measure .m-tick {
  animation: bp-text-cycle 22s ease infinite;
  animation-delay: var(--delay, 0s);
}
.bp-compass .draw-line {
  animation: bp-redraw 22s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: var(--delay, 0s);
}
.bp-compass .draw-text {
  animation: bp-text-cycle 22s ease infinite;
  animation-delay: var(--delay, 0s);
}

/* Compositor hint for the parallax layers, prevents repaint hiccups on first scroll */
.px-layer {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ============ SERVICES ============ */
.services{
  position:relative;
  padding:80px 0 72px;
  background:var(--bg);
  border-top:1px solid rgba(255,255,255,0.04);
}
.services::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(201,164,92,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,164,92,0.025) 1px, transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
}
.services-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
}
.section-head{
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  margin-bottom:44px; align-items:end;
}
.section-head h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(36px, 5vw, 64px);
  line-height:1.0; letter-spacing:-0.02em;
}
.section-head h2 em{color:var(--gold); font-style:italic;}
.section-head p{color:var(--ink-muted); font-size:16px; line-height:1.7; max-width:46ch;}

.svc-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:rgba(201,164,92,0.12);
  border:1px solid rgba(201,164,92,0.12);
}

/* Service card , image revealed on hover */
.svc-card{
  background:var(--bg);
  position:relative;
  text-decoration:none; color:var(--ink);
  min-height:300px;
  display:block;
  overflow:hidden;
  isolation:isolate;
  --cursor-x:50%;
  --cursor-y:50%;
  box-shadow:inset 0 0 0 0 rgba(94,141,161,0);
  transition:box-shadow .5s ease;
}
.svc-card:hover{
  box-shadow:inset 0 0 0 1px rgba(94,141,161,0.25);
}
.svc-card::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle 220px at var(--cursor-x) var(--cursor-y), rgba(201,164,92,0.10) 0%, rgba(201,164,92,0) 70%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
  z-index:1;
}
.svc-card:hover::after{opacity:1;}
.svc-img{
  position:absolute;
  top:20px; right:20px; bottom:auto; left:auto;
  width:60%; height:55%;
  opacity:0.12;
  transition:opacity .6s ease;
  z-index:0;
  pointer-events:none;
}
.svc-img svg{width:100%; height:100%; display:block;}
/* Outline strokes draw themselves in on hover */
.svc-img svg path,
.svc-img svg rect,
.svc-img svg line,
.svc-img svg circle{
  stroke-dasharray:1200;
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.6s cubic-bezier(.4,.0,.2,1);
}
.svc-card:hover .svc-img{
  opacity:0.85;
}
.svc-card .svc-img svg path,
.svc-card .svc-img svg rect,
.svc-card .svc-img svg line,
.svc-card .svc-img svg circle{
  stroke-dashoffset:1200;
}
.svc-card:hover .svc-img svg path,
.svc-card:hover .svc-img svg rect,
.svc-card:hover .svc-img svg line,
.svc-card:hover .svc-img svg circle{
  stroke-dashoffset:0;
}
.svc-body{
  position:relative; z-index:2;
  padding:32px 28px;
  height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:300px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.svc-card:hover .svc-body{
  transform:translateY(-4px);
}
.svc-body .num{
  font-family:var(--serif); font-style:italic;
  font-size:14px; color:var(--gold);
  letter-spacing:0.5px;
  display:block;
}
.svc-body h3{
  font-family:var(--serif); font-weight:400;
  font-size:26px; line-height:1.05;
  margin-top:auto;
  margin-bottom:8px;
  letter-spacing:-0.01em;
  color:var(--ink);
  transition:color .4s ease;
}
.svc-card:hover h3{color:var(--gold);}
.svc-body .sub{
  font-size:12px; color:var(--ink-muted);
  letter-spacing:0.3px; line-height:1.5;
}
.svc-body .link{
  margin-top:20px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
}
.svc-card:hover .svc-body .link{opacity:1; transform:translateY(0);}
.svc-card .corner{
  position:absolute; top:0; right:0;
  width:32px; height:32px;
  border-top:1px solid var(--gold);
  border-right:1px solid var(--gold);
  opacity:0; transition:opacity .4s ease;
  z-index:3;
}
.svc-card:hover .corner{opacity:1;}

/* ============ CONTACT STRIP ============ */
.contact-strip{
  position:relative;
  padding:72px 0;
  border-top:1px solid rgba(255,255,255,0.04);
  overflow:hidden;
}
.contact-strip::before{
  content:'&';
  font-family:var(--serif); font-style:italic;
  font-size:780px; line-height:0.8;
  color:rgba(201,164,92,0.04);
  position:absolute; right:-80px; top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
.contact-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1.2fr 1fr; gap:80px;
  align-items:center;
}
.contact-inner h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(36px, 4.5vw, 58px);
  line-height:1.05; letter-spacing:-0.02em;
  margin-bottom:24px;
}
.contact-inner h2 em{color:var(--gold); font-style:italic;}
.contact-inner p{
  color:var(--ink-muted); font-size:16px; line-height:1.7;
  max-width:42ch;
}
.contact-card{
  background:var(--bg-2);
  border:1px solid rgba(201,164,92,0.15);
  padding:44px 40px;
  position:relative;
}
.contact-card .label{
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:8px;
}
.contact-card .phone-big{
  font-family:var(--serif); font-weight:400;
  font-size:42px; color:var(--ink);
  letter-spacing:-0.01em; line-height:1;
  margin-bottom:28px;
  display:block; text-decoration:none;
  transition:color .3s ease;
}
.contact-card .phone-big:hover{color:var(--gold);}
.contact-row{
  display:flex; justify-content:space-between;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:13px;
}
.contact-row .k{color:var(--ink-muted); letter-spacing:0.5px;}
.contact-row .v{color:var(--ink); font-weight:400;}
.contact-cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:20px;
  color:var(--gold); text-decoration:none;
  font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:500;
  padding:12px 0;
  border-bottom:1px solid var(--gold);
}

/* ============ ACCREDITATIONS ============ */
.accreditations{
  padding:56px 0;
  border-top:1px solid rgba(255,255,255,0.04);
  background:#000;
}
.accred-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1.6fr; gap:60px; align-items:center;
}
.accred-label .kicker{
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.accred-label p{color:var(--ink-muted); font-size:15px; line-height:1.6; max-width:42ch;}

.accred-row{
  display:flex; align-items:center; justify-content:flex-end;
  gap:48px;
  flex-wrap:wrap;
}
.accred-mark-wrap{
  display:flex; align-items:center;
}
.accred-mark{
  height:60px;
  width:auto;
  max-width:240px;
  object-fit:contain;
  display:block;
  transition:transform .4s ease, opacity .4s ease;
  opacity:0.92;
}
.accred-mark:hover{transform:scale(1.03); opacity:1;}

.trust-item{
  display:flex; flex-direction:column; gap:4px;
  padding-left:36px;
  border-left:1px solid rgba(244,237,224,0.12);
  min-width:0;
}
.trust-item .ti-head{
  font-family:var(--serif); font-weight:400;
  font-size:18px; line-height:1.1; color:var(--ink);
  letter-spacing:0.3px;
}
.trust-item .ti-sub{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink-muted);
}

/* ============ FOOTER ============ */
footer{
  background:var(--bg-deep);
  padding:56px 0 28px;
  border-top:1px solid rgba(201,164,92,0.08);
}
/* Footer header line: brand navy accent strip above the footer columns */
footer#site-footer{
  position:relative;
  padding-top:48px;
}
footer#site-footer::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  width:calc(100% - 80px);
  max-width:var(--maxw);
  transform:translateX(-50%);
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(94,141,161,0) 5%,
    rgba(94,141,161,0.6) 50%,
    rgba(94,141,161,0) 95%,
    transparent 100%);
}

.footer-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:60px;
  padding-bottom:48px;
}
.footer-col{display:flex; flex-direction:column; gap:14px;}
.footer-col .footer-h{
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px; font-weight:500;
  position:relative;
  padding-bottom:8px;
}
/* Tiny navy accent line under each footer column heading */
.footer-col .footer-h::after{
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:20px;
  height:1px;
  background:var(--navy-light);
}
.footer-col a{
  color:var(--ink-muted); text-decoration:none; font-size:14px;
  transition:color .3s ease;
}
.footer-col a:hover{color:var(--ink);}
.footer-logo .logo-img{height:72px;}
.footer-addr{color:var(--ink-muted); font-size:13px; line-height:1.6; max-width:30ch;}

.footer-base{
  max-width:var(--maxw); margin:0 auto; padding:24px var(--gutter) 0;
  border-top:1px solid rgba(94,141,161,0.12);
}
.footer-base small{
  color:var(--ink-faint); font-size:11px; letter-spacing:0.3px;
}

/* ============ ENTRY ANIMATIONS ============ */
@keyframes fade-up{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}
.hero h1, .hero p.lede, .hero-actions, .eyebrow{
  animation:fade-up 1.2s cubic-bezier(.2,.8,.2,1) both;
}
.eyebrow{animation-delay:.1s;}
.hero h1{animation-delay:.25s;}
.hero p.lede{animation-delay:.5s;}
.hero-actions{animation-delay:.7s;}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1; transform:translateY(0);}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  *, *::before, *::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .topbar-inner{grid-template-columns:repeat(2, 1fr); gap:16px;}
  .nav-links{gap:24px;}
  .section-head{grid-template-columns:1fr; gap:24px;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .accred-inner{grid-template-columns:1fr; gap:32px;}
  .accred-row{justify-content:flex-start; gap:32px;}
  .trust-item{padding-left:24px;}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:780px){
  :root{--gutter:24px;}
  .nav-links{display:none;}
  .topbar{padding:10px 0;}
  .topbar-inner{grid-template-columns:1fr; gap:8px; padding:0 var(--gutter);}
  .usp{justify-content:flex-start;}
  .contact-inner{grid-template-columns:1fr; gap:40px;}
  .hero-meta{flex-wrap:wrap; gap:24px; bottom:24px;}
  .stat-num{font-size:32px;}
  .scroll-hint{display:none;}
  .svc-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr; gap:40px;}
  .nav-cta-label{display:none;}
  .nav-cta{padding:8px 14px;}
  .logo-img{height:46px;}
}

/* ============ INTERIOR PAGES ============ */

/* Page header band: replaces the hero on interior pages */
.page-header{
  position:relative;
  padding:48px 0 44px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  overflow:hidden;
}
.page-header::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(201,164,92,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,164,92,0.03) 1px, transparent 1px);
  background-size:80px 80px;
  opacity:0.5;
  pointer-events:none;
}
.page-header::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 70% at 25% 50%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.page-header-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
}
.crumb{
  display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:14px;
}
.crumb a{color:var(--ink-muted); text-decoration:none; transition:color .3s ease;}
.crumb a:hover{color:var(--gold);}
.crumb .sep{color:var(--gold); opacity:0.5;}
.crumb .current{color:var(--gold);}
.page-header .eyebrow{margin-bottom:14px !important;}
.page-header h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(36px, 5vw, 64px);
  line-height:1.0; letter-spacing:-0.02em;
  margin-bottom:14px;
  max-width:none;
  white-space:nowrap;
}
.page-header h1.h1-multi{white-space:normal; max-width:18ch;}
.page-header h1 em{color:var(--gold); font-style:italic;}
.page-header .lede{
  font-size:17px; line-height:1.55; color:var(--ink-muted);
  max-width:62ch; font-weight:300;
  margin-bottom:0;
}

/* Hero-style inline CTA on interior page headers */
.page-header .ph-actions{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  margin-top:22px;
}
.page-header .ph-cta{
  display:inline-flex; align-items:center; gap:14px;
  color:var(--gold); text-decoration:none;
  font-family:var(--serif); font-style:italic;
  font-size:18px; font-weight:400;
  padding:4px 0;
  border-bottom:1px solid rgba(201,164,92,0.4);
  transition:border-color .3s ease, gap .3s ease, color .3s ease;
}
.page-header .ph-cta:hover{
  border-bottom-color:var(--gold); color:var(--ink); gap:20px;
}
.page-header .ph-cta .arrow{
  font-family:var(--sans); font-style:normal;
  transition:transform .3s ease;
}
.page-header .ph-cta:hover .arrow{transform:translateX(4px);}
.page-header .ph-divider{
  width:1px; height:24px; background:rgba(201,164,92,0.25);
}
.page-header .ph-phone{
  font-family:var(--sans); font-weight:400;
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink-muted); text-decoration:none;
  transition:color .3s ease;
}
.page-header .ph-phone:hover{color:var(--gold);}
.page-header .ph-phone strong{color:var(--ink); font-weight:500;}

/* Decorative line drawing in the header right side */
.page-header .ph-art{
  position:absolute; top:50%; right:5%;
  transform:translateY(-50%);
  width:340px; height:240px;
  opacity:0.45;
  z-index:1;
  pointer-events:none;
  animation:art-breathe 9s ease-in-out infinite;
}
.page-header .ph-art svg{width:100%; height:100%;}
.page-header .ph-art svg path,
.page-header .ph-art svg rect,
.page-header .ph-art svg line,
.page-header .ph-art svg circle,
.page-header .ph-art svg polygon{
  stroke-dasharray:3000;
  stroke-dashoffset:0;
  animation:art-redraw 8s ease-in-out infinite;
}
/* Stagger by position within the parent group — works for both flat SVGs and SVGs with a wrapping <g> */
.page-header .ph-art svg g > *:nth-child(2){animation-delay:0.15s;}
.page-header .ph-art svg g > *:nth-child(3){animation-delay:0.3s;}
.page-header .ph-art svg g > *:nth-child(4){animation-delay:0.45s;}
.page-header .ph-art svg g > *:nth-child(5){animation-delay:0.6s;}
.page-header .ph-art svg g > *:nth-child(6){animation-delay:0.75s;}
.page-header .ph-art svg g > *:nth-child(7){animation-delay:0.9s;}
.page-header .ph-art svg g > *:nth-child(8){animation-delay:1.05s;}
.page-header .ph-art svg g > *:nth-child(9){animation-delay:1.2s;}
.page-header .ph-art svg g > *:nth-child(10){animation-delay:1.35s;}
.page-header .ph-art svg g > *:nth-child(11){animation-delay:1.5s;}
.page-header .ph-art svg g > *:nth-child(12){animation-delay:1.65s;}
.page-header .ph-art svg g > *:nth-child(13){animation-delay:1.8s;}
.page-header .ph-art svg g > *:nth-child(14){animation-delay:1.95s;}
.page-header .ph-art svg g > *:nth-child(n+15){animation-delay:2.1s;}

/* Ambient animations: breathing on the wrapper, draw-erase-redraw on each line */
@keyframes art-breathe{
  0%, 100% { opacity:0.4; transform:translateY(-50%) scale(1); }
  50% { opacity:0.55; transform:translateY(-50%) scale(1.015); }
}
@keyframes art-redraw{
  0% { stroke-dashoffset:0; }
  35% { stroke-dashoffset:3000; }
  50% { stroke-dashoffset:3000; }
  85%, 100% { stroke-dashoffset:0; }
}

/* Prose section */
.prose-section{
  padding:56px 0;
  position:relative;
}
.prose-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 2fr; gap:80px;
}
.prose-aside{
  font-family:var(--serif); font-style:italic;
  font-size:18px; line-height:1.5; color:var(--gold);
  padding-top:8px;
}
.prose-aside .aside-rule{
  width:48px; height:1px; background:var(--gold); margin-bottom:20px;
}
.prose-aside .aside-kicker{
  font-family:var(--sans); font-style:normal;
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.prose{
  color:var(--ink); font-size:16px; line-height:1.75; font-weight:300;
}
.prose p{margin-bottom:24px; color:rgba(244,237,224,0.85);}
.prose p:last-child{margin-bottom:0;}
.prose h2{
  font-family:var(--serif); font-weight:400;
  font-size:32px; line-height:1.1; letter-spacing:-0.01em;
  margin-top:48px; margin-bottom:18px; color:var(--ink);
}
.prose h2:first-child{margin-top:0;}
.prose h2 em{font-style:italic; color:var(--gold);}
.prose h3{
  font-family:var(--serif); font-weight:400;
  font-size:22px; line-height:1.2;
  margin-top:32px; margin-bottom:12px; color:var(--ink);
}
.prose ul{list-style:none; padding:0; margin:0 0 24px 0;}
.prose ul li{
  position:relative; padding-left:28px; margin-bottom:12px;
  color:rgba(244,237,224,0.85);
}
.prose ul li::before{
  content:''; position:absolute; left:0; top:13px;
  width:14px; height:1px; background:var(--gold);
}
.prose strong{color:var(--ink); font-weight:500;}
.prose a{color:var(--gold); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.prose a:hover{color:var(--ink);}

/* Pull quote */
.pull-quote{
  border-top:1px solid rgba(201,164,92,0.2);
  border-bottom:1px solid rgba(201,164,92,0.2);
  padding:32px 0; margin:40px 0;
}
.pull-quote blockquote{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:24px; line-height:1.4; color:var(--ink);
  letter-spacing:-0.01em;
}
.pull-quote .quote-attr{
  display:block; margin-top:14px;
  font-family:var(--sans); font-style:normal;
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold);
}

/* Process / 3-step strip */
.process-strip{
  padding:64px 0;
  background:#080808;
  border-top:1px solid rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.process-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
}
.process-head{
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:32px;
}
.process-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:rgba(201,164,92,0.12);
  border:1px solid rgba(201,164,92,0.12);
}
.process-step{
  background:#080808; padding:32px 28px;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
  isolation:isolate;
  transition:background .4s ease;
  cursor:default;
}
.process-step::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle 280px at 30% 0%, rgba(201,164,92,0.08) 0%, rgba(201,164,92,0) 70%);
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
  z-index:-1;
}
.process-step:hover{
  background:#0c0c0c;
}
.process-step:hover::before{opacity:1;}
.process-step .step-num{
  font-family:var(--serif); font-style:italic;
  font-size:28px; color:var(--gold); line-height:1;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.process-step:hover .step-num{
  transform:translateX(2px);
}
.process-step h4{
  font-family:var(--serif); font-weight:400;
  font-size:22px; line-height:1.15; color:var(--ink);
  transition:color .4s ease;
}
.process-step:hover h4{color:var(--gold);}
.process-step p{
  font-size:13px; line-height:1.6; color:var(--ink-muted);
}

/* Related services strip */
.related{
  padding:56px 0;
  position:relative;
}
.related-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
}
.related-head{
  display:flex; justify-content:space-between; align-items:end;
  margin-bottom:32px;
}
.related-head h2{
  font-family:var(--serif); font-weight:400;
  font-size:32px; line-height:1.1;
}
.related-head a{
  color:var(--gold); text-decoration:none;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  padding-bottom:4px; border-bottom:1px solid var(--gold);
}
.related-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:rgba(201,164,92,0.12);
  border:1px solid rgba(201,164,92,0.12);
}

/* About: team / values grid */
.values-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:rgba(201,164,92,0.12);
  border:1px solid rgba(201,164,92,0.12);
  margin-top:40px;
}
.value{
  background:var(--bg);
  padding:32px 28px 32px;
  display:flex; flex-direction:column;
  position:relative;
  isolation:isolate;
  transition:background .4s ease;
  cursor:default;
  min-height:240px;
}
.value::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle 280px at 30% 0%, rgba(201,164,92,0.08) 0%, rgba(201,164,92,0) 70%);
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
  z-index:-1;
}
.value:hover{background:#0c0c0c;}
.value:hover::before{opacity:1;}

.value .v-num{
  font-family:var(--serif); font-style:italic;
  font-size:14px; color:var(--gold);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  margin-bottom:auto; /* pushes heading + description to the bottom of card */
  display:block;
}
.value:hover .v-num{transform:translateX(2px);}

.value h3{
  font-family:var(--serif); font-weight:400;
  font-size:22px; line-height:1.25; color:var(--ink);
  margin:0 0 14px 0;
  transition:color .4s ease;
}
.value:hover h3{color:var(--gold);}

.value p{
  font-size:13px; line-height:1.6; color:var(--ink-muted);
  margin:0;
}

/* Contact: form + side card layout */
.contact-page{
  padding:48px 0 72px;
}
.contact-grid{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1.4fr 1fr; gap:80px;
  align-items:start;
}
.contact-form{
  display:flex; flex-direction:column; gap:24px;
}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold);
}
.field input, .field textarea, .field select{
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(201,164,92,0.3);
  padding:12px 0;
  color:var(--ink);
  font-family:var(--sans); font-size:15px; font-weight:300;
  transition:border-color .3s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;
  border-bottom-color:var(--gold);
}
.field textarea{resize:vertical; min-height:120px;}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer; background-image:linear-gradient(45deg, transparent 50%, #c9a45c 50%), linear-gradient(135deg, #c9a45c 50%, transparent 50%); background-position:calc(100% - 14px) 18px, calc(100% - 8px) 18px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat;}
.field select option{background:#000; color:var(--ink);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.form-submit{
  align-self:flex-start;
  margin-top:8px;
  background:var(--gold); color:#000;
  padding:16px 32px;
  border:none; cursor:pointer;
  font-family:var(--sans); font-weight:500;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  transition:background .3s ease;
  display:inline-flex; align-items:center; gap:14px;
}
.form-submit:hover{background:var(--ink);}

.contact-aside{
  background:var(--bg-2, #141414);
  border:1px solid rgba(201,164,92,0.15);
  padding:36px 32px;
}
.contact-aside .ca-label{
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px;
}
.contact-aside .ca-phone{
  font-family:var(--serif); font-weight:400;
  font-size:36px; line-height:1; color:var(--ink);
  letter-spacing:-0.01em; margin-bottom:24px;
  display:block; text-decoration:none;
}
.contact-aside .ca-phone:hover{color:var(--gold);}
.contact-aside .ca-row{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,0.06);
}
.contact-aside .ca-row .k{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink-muted);
}
.contact-aside .ca-row .v{color:var(--ink); font-size:14px;}
.contact-aside .ca-row a{color:var(--ink); text-decoration:none;}
.contact-aside .ca-row a:hover{color:var(--gold);}

/* Map placeholder */
.map-band{
  height:380px;
  background:#080808 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 380"><g stroke="%23c9a45c" stroke-width="0.5" fill="none" opacity="0.25"><line x1="0" y1="60" x2="1600" y2="60"/><line x1="0" y1="120" x2="1600" y2="120"/><line x1="0" y1="180" x2="1600" y2="180"/><line x1="0" y1="240" x2="1600" y2="240"/><line x1="0" y1="300" x2="1600" y2="300"/><line x1="200" y1="0" x2="200" y2="380"/><line x1="400" y1="0" x2="400" y2="380"/><line x1="600" y1="0" x2="600" y2="380"/><line x1="800" y1="0" x2="800" y2="380"/><line x1="1000" y1="0" x2="1000" y2="380"/><line x1="1200" y1="0" x2="1200" y2="380"/><line x1="1400" y1="0" x2="1400" y2="380"/></g><g stroke="%23c9a45c" stroke-width="1" fill="none" opacity="0.6"><path d="M200 100 L400 80 L500 150 L650 140 L750 200 L900 180 L1100 240 L1300 220 L1500 280"/><path d="M100 250 L300 280 L500 250 L700 300 L850 280 L1050 320 L1250 290 L1450 340"/></g><g transform="translate(800, 190)"><circle r="14" fill="%23c9a45c" opacity="0.2"/><circle r="6" fill="%23c9a45c"/><circle r="2" fill="%23000"/></g></svg>') center/cover no-repeat;
  border-top:1px solid rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.04);
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.map-band::after{
  content:'Preston · PR2 8BP';
  font-family:var(--serif); font-style:italic;
  font-size:18px; color:var(--gold);
  padding:8px 24px;
  border:1px solid rgba(201,164,92,0.4);
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(4px);
}

/* Responsive */
@media (max-width:1100px){
  .prose-inner{grid-template-columns:1fr; gap:32px;}
  .process-grid{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:repeat(2, 1fr);}
  .values-grid{grid-template-columns:repeat(2, 1fr);}
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  .page-header .ph-art{display:none;}
}
@media (max-width:780px){
  .page-header{padding:80px 0 60px;}
  .related-grid, .values-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

/* ============ SERVICE PAGE CTA ============ */
.service-cta{
  position:relative;
  padding:72px 0;
  background:#080808;
  border-top:1px solid rgba(201,164,92,0.2);
  border-bottom:1px solid rgba(201,164,92,0.2);
  text-align:center;
  overflow:hidden;
}
.service-cta::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 100% at 50% 50%, rgba(201,164,92,0.06) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.service-cta-inner{
  position:relative; z-index:2;
  max-width:780px; margin:0 auto; padding:0 var(--gutter);
}
.service-cta .kicker{
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.service-cta h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px, 3.5vw, 44px); line-height:1.1;
  letter-spacing:-0.02em; margin-bottom:14px;
}
.service-cta h2 em{color:var(--gold); font-style:italic;}
.service-cta p{
  color:var(--ink-muted); font-size:16px; line-height:1.6;
  max-width:54ch; margin:0 auto 28px;
}
.service-cta-actions{
  display:flex; gap:20px; justify-content:center; align-items:center; flex-wrap:wrap;
}

/* ============ TEAM GRID (About) ============ */
.team-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:32px;
  margin-top:40px;
}
/* When only one team member, centre the card with a comfortable width */
.team-grid:has(> :only-child){
  grid-template-columns:minmax(0, 720px);
  justify-content:center;
}
.team-card{
  background:#0a0a0a;
  border:1px solid rgba(201,164,92,0.15);
  padding:40px 36px;
  text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:18px;
  transition:border-color .4s ease, transform .4s ease;
  position:relative;
}
.team-card:hover{
  border-color:rgba(201,164,92,0.4);
  transform:translateY(-4px);
}
.team-card .tc-portrait{
  width:90px; height:90px;
  border-radius:50%;
  background:#1f1f1f center/cover no-repeat;
  border:1px solid rgba(201,164,92,0.25);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic;
  font-size:34px; color:var(--gold);
  flex-shrink:0;
  overflow:hidden;
  filter:grayscale(0.15) contrast(1.05);
}
.team-card .tc-portrait.has-photo{
  font-size:0;
}
.team-card .tc-name{
  font-family:var(--serif); font-weight:400;
  font-size:30px; line-height:1; letter-spacing:-0.01em;
  color:var(--ink);
}
.team-card .tc-role{
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold);
  margin-top:6px;
}
.team-card .tc-quals{
  font-family:var(--serif); font-style:italic;
  font-size:14px; color:var(--ink-muted);
  margin-top:8px;
}
.team-card .tc-bio{
  font-size:14px; line-height:1.6; color:rgba(244,237,224,0.78);
  margin-top:6px;
}
.team-card .tc-cta{
  margin-top:auto; padding-top:14px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold);
  display:inline-flex; align-items:center; gap:10px;
  transition:gap .3s ease;
}
.team-card:hover .tc-cta{gap:16px;}

/* ============ PERSON PAGE ============ */
.person-header{
  position:relative;
  padding:72px 0 48px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  overflow:hidden;
}
.person-header::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(201,164,92,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,164,92,0.03) 1px, transparent 1px);
  background-size:80px 80px;
  opacity:0.4;
  pointer-events:none;
}
.person-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  position:relative; z-index:2;
  display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center;
}
.person-portrait{
  width:200px; height:200px;
  border-radius:50%;
  background:#1f1f1f center/cover no-repeat;
  border:1px solid rgba(201,164,92,0.25);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic;
  font-size:80px; color:var(--gold);
  flex-shrink:0;
  overflow:hidden;
  filter:grayscale(0.15) contrast(1.05);
}
.person-portrait.has-photo{
  font-size:0;
}
.person-info h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(36px, 5vw, 56px); line-height:1.0; letter-spacing:-0.02em;
  margin-bottom:8px;
}
.person-info .role{
  font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.person-info .quals{
  font-family:var(--serif); font-style:italic;
  font-size:18px; color:var(--ink-muted);
}
.person-info .contact-line{
  display:flex; gap:24px; margin-top:20px; flex-wrap:wrap;
}
.person-info .contact-line a{
  color:var(--ink); text-decoration:none;
  font-size:14px; padding-bottom:3px;
  border-bottom:1px solid rgba(201,164,92,0.3);
  transition:border-color .3s ease, color .3s ease;
}
.person-info .contact-line a:hover{
  color:var(--gold); border-bottom-color:var(--gold);
}

.person-body{
  padding:56px 0;
}
.person-body-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 2fr; gap:64px;
}
.person-side{
  position:sticky; top:120px; align-self:start;
}
.person-side .side-kicker{
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.person-side .side-rule{
  width:48px; height:1px; background:var(--gold); margin-bottom:20px;
}
.person-side ul{
  list-style:none; padding:0; margin:0;
}
.person-side ul li{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:13px; color:rgba(244,237,224,0.78);
  display:flex; flex-direction:column; gap:4px;
}
.person-side ul li:last-child{border-bottom:none;}
.person-side ul li strong{
  font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--gold); font-weight:400;
}

/* ============ OUR WORK / PROJECTS ============ */
.work-filters{
  padding:24px 0 0;
  position:relative;
}
.filter-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.filter-label{
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--ink-muted); margin-right:8px;
}
.filter-chip{
  background:transparent;
  border:1px solid rgba(201,164,92,0.25);
  color:var(--ink-muted);
  padding:8px 16px;
  font-family:var(--sans); font-size:12px;
  letter-spacing:1.5px; text-transform:uppercase; font-weight:500;
  cursor:pointer;
  transition:all .3s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.filter-chip:hover{
  border-color:var(--gold); color:var(--ink);
}
.filter-chip.active{
  border-color:var(--gold); background:var(--gold); color:#000;
}
.filter-chip .count{
  font-size:10px; opacity:0.7;
}

.projects-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:rgba(201,164,92,0.12);
  border:1px solid rgba(201,164,92,0.12);
  margin-top:40px;
}
.project-card{
  background:#0a0a0a;
  padding:0;
  text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column;
  min-height:360px;
  position:relative;
  overflow:hidden;
}
.project-image{
  background:#080808 center/cover no-repeat;
  min-height:240px;
  position:relative;
  overflow:hidden;
}
.project-image::after{
  /* dark overlay on photo */
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.project-image .image-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:36px 32px;
  z-index:0;
}
.project-image .image-fallback svg{
  width:100%; max-width:320px; height:auto;
  opacity:0.55;
  transition:opacity .5s ease, transform .8s cubic-bezier(.2,.8,.2,1);
  animation:art-drift 14s ease-in-out infinite;
}
.project-card:hover .image-fallback svg{
  opacity:0.85;
  transform:scale(1.04);
}
/* When the bg image actually loads, the fallback becomes a 'no-op' (the image covers it) */
.project-image:not([style*=".jpg"]) .image-fallback{display:flex;}

.project-meta{
  padding:24px 32px 28px;
  display:flex; flex-direction:column; gap:6px;
  flex-grow:1;
}
.project-meta .pm-type{
  font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold);
}
.project-meta .pm-title{
  font-family:var(--serif); font-weight:400;
  font-size:24px; line-height:1.15; letter-spacing:-0.01em;
  color:var(--ink);
}
.project-meta .pm-location{
  font-family:var(--serif); font-style:italic;
  font-size:14px; color:var(--ink-muted);
  margin-top:0px;
}
.project-meta .pm-desc{
  font-size:13px; line-height:1.6; color:rgba(244,237,224,0.7);
  margin-top:8px;
}
.project-meta .pm-tag-list{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:auto; padding-top:14px;
}
.project-meta .pm-tag{
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink-muted);
  padding:3px 10px;
  border:1px solid rgba(201,164,92,0.2);
  border-radius:2px;
}

/* Responsive */
@media (max-width:1100px){
  .team-grid{grid-template-columns:1fr;}
  .projects-grid{grid-template-columns:1fr;}
  .person-inner{grid-template-columns:1fr; gap:24px; text-align:center; justify-items:center;}
  .person-info .contact-line{justify-content:center;}
  .person-body-inner{grid-template-columns:1fr; gap:32px;}
  .person-side{position:static;}
}
@media (max-width:780px){
  .nav-dropdown-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; background:transparent; border:none; padding:0;
    margin-left:16px;
  }
  .person-portrait{width:140px; height:140px; font-size:56px;}
}

/* Consent / disclaimer field on contact form */
.consent-field{font-size:11px; line-height:1.55;}
.consent-field label{
  display:flex; gap:10px; align-items:flex-start;
  color:var(--ink-muted); letter-spacing:0.3px; text-transform:none;
  font-size:12px; font-weight:300;
  cursor:pointer;
}
.consent-field input[type="checkbox"]{
  width:auto; flex-shrink:0; margin-top:3px;
  accent-color:var(--gold);
}
.consent-field a{color:var(--gold); text-decoration:underline;}

/* ============ PROJECT CARD ENHANCEMENTS ============ */
.project-card{cursor:pointer;}
.project-image{
  position:relative;
  transition:filter .4s ease;
}
.project-card:hover .project-image{filter:brightness(1.08);}
.project-card:hover .project-image::after{
  background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
}
.photo-badge{
  position:absolute;
  bottom:16px; right:16px;
  z-index:2;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(201,164,92,0.3);
  color:var(--ink);
  padding:6px 12px;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:500;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .3s ease, border-color .3s ease, transform .4s ease;
}
.photo-badge .cam-icon{
  color:var(--gold); font-size:10px;
}
.project-card:hover .photo-badge{
  background:rgba(201,164,92,0.95);
  color:#000;
  border-color:var(--gold);
  transform:translateY(-2px);
}
.project-card:hover .photo-badge .cam-icon{color:#000;}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
  display:flex; align-items:center; justify-content:center;
  padding:40px 80px;
}
.lightbox.open{
  opacity:1; visibility:visible;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
.lb-stage{
  position:relative;
  max-width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.lb-image{
  max-width:100%; max-height:calc(100vh - 160px);
  object-fit:contain;
  border:1px solid rgba(201,164,92,0.2);
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
  animation:lb-fade .4s ease;
}
@keyframes lb-fade{
  from{opacity:0; transform:scale(0.98);}
  to{opacity:1; transform:scale(1);}
}
.lb-caption{
  margin-top:18px;
  text-align:center;
  display:flex; flex-direction:column; gap:6px;
}
.lb-title{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:18px; color:var(--gold);
  letter-spacing:0.3px;
}
.lb-counter{
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--ink-muted);
}
.lb-close,
.lb-prev,
.lb-next{
  position:absolute;
  background:transparent;
  border:1px solid rgba(201,164,92,0.3);
  color:var(--ink);
  font-family:var(--sans);
  cursor:pointer;
  transition:all .3s ease;
  display:flex; align-items:center; justify-content:center;
  z-index:10;
}
.lb-close{
  top:24px; right:24px;
  width:44px; height:44px;
  font-size:24px; line-height:1;
}
.lb-prev,
.lb-next{
  top:50%; transform:translateY(-50%);
  width:48px; height:48px;
  font-size:18px;
}
.lb-prev{left:24px;}
.lb-next{right:24px;}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover{
  background:rgba(201,164,92,0.15);
  border-color:var(--gold);
  color:var(--gold);
}

@media (max-width:780px){
  .lightbox{padding:20px;}
  .lb-prev{left:8px;}
  .lb-next{right:8px;}
  .lb-close{top:12px; right:12px;}
  .lb-prev,.lb-next{width:40px; height:40px;}
  .lb-image{max-height:calc(100vh - 200px);}
}

/* ============ GALLERY GRID (Our Work recent work section) ============ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
  margin-top:32px;
}
.gallery-item{
  position:relative;
  cursor:pointer;
  overflow:hidden;
  aspect-ratio:1 / 1;
  background:#080808;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .4s ease;
  filter:brightness(0.9);
}
.gallery-item::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.gallery-item:hover img{
  transform:scale(1.06);
  filter:brightness(1.05);
}
.gallery-item:hover::after{opacity:1;}
.gallery-item:hover .gallery-caption{transform:translateY(0); opacity:1;}
.gallery-caption{
  position:absolute; bottom:0; left:0; right:0;
  padding:14px 16px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink);
  font-weight:500;
  z-index:2;
  transform:translateY(8px);
  opacity:0;
  transition:transform .4s ease, opacity .4s ease;
  pointer-events:none;
}

@media (max-width:1100px){
  .gallery-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:780px){
  .gallery-grid{grid-template-columns:repeat(2, 1fr);}
}

/* External link arrow on Facebook link in footer */
.footer-col a .ext{
  display:inline-block;
  font-size:11px;
  margin-left:4px;
  opacity:0.5;
  transition:opacity .3s ease, transform .3s ease;
}
.footer-col a:hover .ext{
  opacity:1;
  transform:translate(2px, -2px);
}

/* Ext arrow inside contact aside */
.contact-aside a .ext{
  display:inline-block;
  font-size:11px;
  margin-left:4px;
  opacity:0.6;
  transition:opacity .3s ease, transform .3s ease;
}
.contact-aside a:hover .ext{
  opacity:1;
  transform:translate(2px, -2px);
}

/* ============ RICS ACCREDITATION BAND ============ */
.rics-band{
  padding:80px 0;
  border-top:1px solid rgba(244,237,224,0.06);
  position:relative;
}
.rics-band::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  width:calc(100% - 80px);
  max-width:var(--maxw);
  transform:translateX(-50%);
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(94,141,161,0) 5%,
    rgba(94,141,161,0.4) 50%,
    rgba(94,141,161,0) 95%,
    transparent 100%);
}
.rics-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.rics-mark-col{
  display:flex; align-items:center; justify-content:flex-start;
}
.rics-mark{
  width:100%; max-width:420px; height:auto;
  display:block;
}
.rics-copy .kicker{
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.rics-copy h2{
  font-family:var(--serif); font-weight:400;
  font-size:32px; line-height:1.2; color:var(--ink);
  margin-bottom:20px;
  max-width:18ch;
}
.rics-copy h2 em{
  font-style:italic; color:var(--gold);
}
.rics-copy > p{
  color:var(--ink-muted); font-size:15px; line-height:1.7;
  max-width:54ch;
}

@media (max-width:880px){
  .rics-inner{
    grid-template-columns:1fr;
    gap:40px;
  }
  .rics-mark{max-width:340px;}
  .rics-copy h2{font-size:26px;}
}