@font-face{font-family:'Merriweather';font-style:normal;font-weight:400;font-display:swap;src:url('merriweather-400.woff2') format('woff2')}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:700;font-display:swap;src:url('merriweather-700.woff2') format('woff2')}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:900;font-display:swap;src:url('merriweather-900.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('inter-700.woff2') format('woff2')}

/* =================================================================
   AXIOS BUILDING CONSULTANTS: DESIGN SYSTEM
   Fonts: Merriweather (headings) · Inter (body)
   ================================================================= */

:root{
  --navy:#171A1F;          /* charcoal ink */
  --ink-2:#20252B;         /* lifted dark panel */
  --ink-soft:#2B3138;
  --royal:#F58A1E;         /* brand orange (primary actions) */
  --gold:#F58A1E;          /* brand orange accent */
  --gold-dark:#D9740F;     /* burnt orange for glyphs/text on light */
  --orange-2:#FBA94C;      /* lighter orange for gradients */
  --orange-tint:#FCEBD7;   /* soft orange wash */
  --white:#FFFFFF;
  --cream:#F3F4F6;         /* light grey page background */
  --offwhite:#FAFBFC;      /* near-white panel */
  --bluegrey:#EBEDF1;      /* light grey panel */
  --sand-2:#E4E7EC;
  --grey-1:#EFF1F4;
  --grey-2:#E1E4EA;
  --grey-3:#CED3DB;
  --grad-grey:linear-gradient(160deg,#FAFBFC 0%,#E9ECF1 100%);
  --grad-grey-soft:linear-gradient(180deg,#F6F7F9 0%,#EDEFF3 100%);
  --text:#1F2429;
  --muted:#697079;         /* cool grey */
  --footer-text:#C4C8CE;
  --border:#E4E7EB;        /* cool hairline */
  --border-2:#DCE0E6;
  --shadow-sm:0 2px 12px rgba(23,26,31,.04);
  --shadow:0 20px 50px rgba(23,26,31,.08);
  --shadow-lg:0 28px 80px rgba(23,26,31,.10);
  --glow:0 16px 50px rgba(245,138,30,.18);
  --grad-orange:linear-gradient(135deg,#FBA94C 0%,#F58A1E 55%,#E5760A 100%);
  --grad-ink:linear-gradient(160deg,#2B3138 0%,#171A1F 72%);
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:24px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.7;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* grain texture overlay (subtle, above content, non-interactive) */
/* Grain overlay. NOTE: this deliberately does NOT use mix-blend-mode: a full-viewport
   fixed blend layer forces the compositor to re-blend the entire screen on every scroll
   frame, which was the single largest source of scroll jank. Plain alpha is visually
   near-identical here (the noise is already at .04 alpha) and costs nothing. */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{font-family:'Merriweather',Georgia,serif;color:var(--navy);line-height:1.12;font-weight:700;letter-spacing:-.02em}
.sec-head h2,.two-col h2,.about-content h2{font-weight:900}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.center{text-align:center}

/* ---------- Eyebrow & section heads ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:18px;padding:7px 15px 7px 13px;border-radius:30px;
  background:var(--orange-tint);border:1px solid #f6d8b4;
}
.eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--gold-dark)}
.eyebrow.on-navy{color:var(--orange-2);background:rgba(245,138,30,.12);border-color:rgba(245,138,30,.32)}
.eyebrow.on-navy::before{background:var(--orange-2)}
.text-grad{background:var(--grad-orange);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sec-head{max-width:720px;margin:0 auto 28px;text-align:center}
.sec-head h2{font-size:clamp(2.1rem,4vw,3.2rem)}
.sec-head p{color:var(--muted);margin-top:14px;font-size:1.05rem;line-height:1.7}
.gold-rule{width:56px;height:3px;background:var(--grad-orange);border-radius:6px;margin:16px 0}
.center .gold-rule,.sec-head .gold-rule{margin:16px auto}

section{padding:64px 0;position:relative;transition:background .3s}
.bg-off{background:linear-gradient(180deg,var(--offwhite) 0%,#F5F6F8 100%)}
.bg-blue{background:var(--bluegrey);position:relative}
.bg-blue::before{content:"";position:absolute;inset:0;background-image:linear-gradient(135deg,rgba(23,26,31,.028) 1px,transparent 1px);background-size:16px 16px;pointer-events:none;z-index:0}
.bg-blue .wrap{position:relative;z-index:1}
.bg-navy{background:var(--grad-ink);color:#cfd2d6;position:relative}
.bg-navy::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1.4px,transparent 1.5px);background-size:26px 26px;pointer-events:none;z-index:0;-webkit-mask:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);mask:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent)}
.bg-navy .wrap{position:relative;z-index:1}
.bg-navy h2,.bg-navy h3{color:#fff}

/* curved section dividers: soft sweep over the previous section */
/* -32px overlap means the visible top gap is padding-top minus 32, so 96 here
   gives the same 64px the base section rule uses at the bottom. */
.curve-top{border-radius:32px 32px 0 0;margin-top:-32px;padding-top:96px;z-index:3}
.curve-both{border-radius:var(--radius-lg);margin-top:-34px;z-index:3}
.bg-navy.curve-top,.bg-navy.curve-both{box-shadow:var(--shadow-lg)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.96rem;
  padding:15px 30px;border-radius:40px;border:1.5px solid transparent;
  cursor:pointer;transition:all .32s var(--ease);white-space:nowrap;position:relative;overflow:hidden;
}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s var(--ease)}
.btn:hover::after{left:140%}
.btn svg{width:17px;height:17px;position:relative;z-index:1}
.btn span,.btn{position:relative}
.btn-primary{background:var(--grad-orange);color:#fff;box-shadow:0 8px 24px rgba(245,138,30,.22)}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--glow)}
.btn-ghost{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-3px)}
.btn-ghost.on-navy{border-color:rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(4px)}
.btn-ghost.on-navy:hover{background:#fff;border-color:#fff;color:var(--navy)}
.btn-gold{background:var(--grad-orange);color:#fff;box-shadow:0 8px 24px rgba(245,138,30,.22)}
.btn-gold:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--glow)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.center .btn-row{justify-content:center}

/* ---------- Top contact bar ---------- */
.topbar{background:linear-gradient(180deg,#1A1E24 0%,#1F2329 100%);color:rgba(255,255,255,.65);font-size:.79rem;border-top:1px solid rgba(255,255,255,.06);box-shadow:0 4px 20px rgba(0,0,0,.15)}
.topbar .wrap{display:flex;justify-content:center;align-items:center;gap:0;padding-top:7px;padding-bottom:7px}
.topbar .tb-left{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap;white-space:nowrap;min-width:0;max-width:100%}
.topbar a,.topbar span{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.65);transition:color .2s}
.topbar a:hover{color:var(--gold)}
.topbar svg{width:13px;height:13px;color:var(--gold)}
.tb-dot{font-size:.7rem;opacity:.35;gap:0;flex-shrink:0}
.topbar .tb-addr{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1240px){.topbar{font-size:.74rem}.topbar .tb-left{gap:8px}}
@media(max-width:1080px){.topbar .tb-left{flex-wrap:wrap;white-space:normal;justify-content:flex-start}}
.topbar .tb-badge{display:inline-flex;align-items:center;gap:7px;background:var(--grad-orange);color:#fff;font-weight:700;letter-spacing:.08em;font-size:.82rem;padding:8px 18px;border-radius:30px;box-shadow:0 4px 14px rgba(245,138,30,.35);text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.18);white-space:nowrap;flex-shrink:0}
.topbar .tb-badge svg{width:16px;height:16px;color:#fff}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--border);transition:box-shadow .3s}
.header.scrolled{box-shadow:0 4px 20px rgba(21,24,27,.09)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;gap:28px;position:relative;z-index:1}
/* animated blueprint measurement strip behind the nav */
.header-anim{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:0;animation:headerBob 5s ease-in-out infinite}
.header-anim svg{position:absolute;top:50%;left:0;width:3200px;height:44px;transform:translateY(-50%);animation:headerDrift 35s linear infinite}
50%{opacity:.95}100%{opacity:1}
@keyframes headerDrift{0%{transform:translateY(-50%) translateX(-1600px)}100%{transform:translateY(-50%) translateX(0)}}
@keyframes headerBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.brand{display:flex;align-items:center;gap:16px;flex-shrink:0}
.logo-img{height:58px;width:auto;display:block}
.brand .mark{width:48px;height:48px;flex-shrink:0}
.brand-tag{font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;line-height:1.25;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-left:16px;border-left:1.5px solid var(--border-2)}
.brand .name{font-family:'Merriweather',serif;font-weight:700;font-size:1.46rem;color:var(--navy);letter-spacing:.02em;line-height:1}
.brand .name small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.62rem;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:4px}
.brand-rics{display:inline-flex;align-items:center;gap:7px;border-left:1px solid var(--border);padding-left:14px;margin-left:2px}
.brand-rics svg{width:24px;height:24px;color:var(--gold-dark);flex-shrink:0}
.brand-rics span{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);line-height:1.25}

.nav{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}
.nav > a,.nav .has-drop > a{
  display:inline-flex;align-items:center;gap:6px;padding:11px 16px;border-radius:6px;
  font-weight:500;font-size:1rem;color:var(--navy);position:relative;
}
.nav > a::after,.nav .has-drop > a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .26s var(--ease);
}
.nav > a:hover::after,.nav .has-drop:hover > a::after{transform:scaleX(1)}
.nav .caret{width:13px;height:13px;transition:transform .25s}
.has-drop{position:relative}
.has-drop:hover .caret{transform:rotate(180deg)}
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(10px);
  background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);
  padding:18px;width:660px;max-width:92vw;display:grid;grid-template-columns:1fr 230px;gap:16px;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  border-top:3px solid transparent;background-clip:padding-box;z-index:95;
}
.mega::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:16px;height:16px;background:#fff;border-left:1px solid var(--border);border-top:1px solid var(--border);border-radius:3px}
.has-drop:hover .mega,.has-drop:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mega-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;font-size:.88rem;font-weight:500;color:var(--text);transition:background .2s,color .2s,transform .2s;opacity:0;transform:translateY(8px)}
.has-drop:hover .mega-item{opacity:1;transform:none}
.mega-item .mi-ico{width:34px;height:34px;border-radius:9px;background:var(--bluegrey);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.mega-item .mi-ico svg{width:17px;height:17px;color:var(--gold-dark);transition:color .2s}
.mega-item:hover{background:var(--orange-tint);color:var(--gold-dark)}
.mega-item:hover .mi-ico{background:var(--grad-orange)}
.mega-item:hover .mi-ico svg{color:#fff}
.mega-item:nth-child(1){transition-delay:.03s}.mega-item:nth-child(2){transition-delay:.05s}
.mega-item:nth-child(3){transition-delay:.07s}.mega-item:nth-child(4){transition-delay:.09s}
.mega-item:nth-child(5){transition-delay:.11s}.mega-item:nth-child(6){transition-delay:.13s}
.mega-item:nth-child(7){transition-delay:.15s}.mega-item:nth-child(8){transition-delay:.17s}
.mega-item:nth-child(9){transition-delay:.19s}.mega-item:nth-child(10){transition-delay:.21s}
.mega-item:nth-child(11){transition-delay:.23s}.mega-item:nth-child(12){transition-delay:.25s}
.mega-feature{background:var(--grad-ink);border-radius:13px;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:8px;color:#fff;position:relative;overflow:hidden;transition:transform .25s}
.mega-feature::after{content:"";position:absolute;width:160px;height:160px;right:-50px;bottom:-60px;border-radius:50%;background:transparent}
.mega-feature:hover{transform:scale(1.015)}
.mega-feature .mf-eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-2);font-weight:700;position:relative;z-index:1}
.mega-feature strong{font-family:'Merriweather',serif;font-size:1.02rem;line-height:1.35;position:relative;z-index:1}
.mega-feature .mf-cta{display:inline-flex;align-items:center;gap:7px;color:var(--orange-2);font-weight:600;font-size:.9rem;margin-top:4px;position:relative;z-index:1;transition:gap .25s}
.mega-feature .mf-cta svg{width:15px;height:15px}
.mega-feature:hover .mf-cta{gap:12px}
.header-cta{display:flex;align-items:center;gap:18px}
/* RICS credential mark, moved up from the footer. Sits where the duplicated phone
   numbers used to be (those still appear in the contact bar directly below). */
/* Opaque white backing so the drifting building outlines pass behind it rather than
   through it, matching how the solid AXIOS logo already blocks them. Invisible on
   the white header, so it reads as no box at all. */
.header-rics{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  padding:6px 12px;margin:-6px -12px;border:0;background:#fff;transition:opacity .25s}
/* Square crop of the mark alone, so it optically centres against the 'RICS' text
   beside it rather than sitting high with the old wordmark padding below. */
.header-rics img{width:50px;height:50px;object-fit:contain;flex-shrink:0;display:block}
.header-rics .hr-tx{font-family:'Merriweather',serif;font-size:1.42rem;font-weight:700;color:var(--navy);letter-spacing:.04em;line-height:1}
.header-rics:hover{opacity:.7}
.menu-btn{display:none;align-items:center;gap:9px;cursor:pointer;padding:10px 16px;border:1.5px solid var(--border);border-radius:12px;background:#fff;color:var(--navy);font-family:'Inter',sans-serif;font-weight:600;font-size:.92rem;transition:all .3s var(--ease);box-shadow:var(--shadow-sm)}
.menu-btn svg{width:22px;height:22px;color:var(--navy);transition:color .3s,transform .3s}
.menu-btn:hover{background:var(--grad-orange);border-color:transparent;color:#fff;transform:translateY(-2px);box-shadow:var(--glow)}
.menu-btn:hover svg{color:#fff;transform:rotate(90deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;
  background:linear-gradient(120deg,#14171C 0%,#171A1F 52%,#1C2028 100%);
}
.hero .wrap{padding-top:96px;padding-bottom:104px;position:relative;z-index:3}
.hero-inner{max-width:720px;text-align:center;margin:0 auto}
.hero .eyebrow{color:var(--orange-2);background:rgba(245,138,30,.14);border-color:rgba(245,138,30,.34)}
.hero h1{color:#fff;font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.06;letter-spacing:-.025em;text-shadow:0 2px 40px rgba(0,0,0,.3)}
.hero h1 .swash{position:relative;white-space:nowrap}
.hero h1 .swash::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.16em;border-radius:6px;background:var(--grad-orange);opacity:.92;z-index:-1}
.hero p{font-size:1.15rem;color:#c8cdd3;margin:16px auto 24px;max-width:620px;line-height:1.72}
.hero .btn-row{margin-bottom:42px}
.trust-row{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center}
.trust-row .ti{display:flex;align-items:center;gap:9px;font-size:.88rem;color:#dde0e4;font-weight:500;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:10px 18px;border-radius:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s var(--ease)}

.trust-row svg{width:17px;height:17px;color:var(--orange-2);flex-shrink:0}
.hero .ti.cred{color:#fff;background:rgba(245,138,30,.16);border-color:rgba(245,138,30,.4)}

/* ---------- Parallax stage (hero + about top) ---------- */
/* Background video + overlay are defined in the homepage inline <style> and driven
   by JS (scroll-fixed across both sections). Base rule just sets the frame. */
.parallax-stage{
  position:relative;
  background:#14171C;
}
.parallax-stage .hero{background:none}
.parallax-stage .hero::before{content:none}
.about-band{position:relative;padding:0 0 64px}

.about-band .wrap{position:relative;z-index:3;padding-top:64px}
.about-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:340px 1fr;gap:0;overflow:hidden;position:relative}
.about-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad-orange);z-index:3}
.about-portrait{background:linear-gradient(160deg,#14171C 0%,#1C2028 40%,#171A1F 100%);position:relative;min-height:auto;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:36px 32px;overflow:hidden;border-radius:var(--radius) 0 0 var(--radius)}
.about-portrait::after{content:"";position:absolute;width:240px;height:240px;right:-90px;top:-70px;border-radius:50%;background:transparent;filter:blur(12px)}
.ap-head{position:relative;z-index:2;text-align:center}
.ap-head h2{color:#fff;font-size:clamp(1.55rem,2.4vw,2.05rem);margin-top:14px;line-height:1.18}
.about-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-portrait .pcred{position:relative;z-index:2;text-align:center;background:rgba(255,255,255,.06);backdrop-filter:blur(6px);border:1px solid rgba(245,138,30,.4);border-radius:14px;padding:14px 18px;color:#fff;width:100%}
.about-portrait .pcred strong{display:block;font-family:'Merriweather',serif;font-size:1.05rem}
.about-portrait .pcred span{font-size:.82rem;color:var(--orange-2);letter-spacing:.04em}
.about-content{padding:32px 36px}
.about-content .eyebrow{margin-bottom:14px}
.about-content h2{font-size:clamp(1.55rem,2.7vw,2.15rem);margin-bottom:8px}
.about-content p{color:var(--muted);font-size:.99rem;margin:14px 0}
.about-content .trust-line{background:var(--orange-tint);border-left:4px solid var(--gold);border-right:4px solid var(--gold-dark);border-radius:12px;padding:14px 18px;color:var(--text);font-size:.96rem;margin:16px 0}
.about-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;justify-content:center}
/* compact RICS trust pillars inside about */
.about-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 6px}
.ap-pill{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:10px;background:var(--bluegrey);border:1px solid var(--grey-2);font-weight:600;font-size:.84rem;color:var(--navy)}
.ap-pill svg{width:18px;height:18px;color:var(--gold-dark);flex-shrink:0}

/* ---------- Project cards ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.proj-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease);text-decoration:none;box-shadow:var(--shadow-sm)}
.proj-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.proj-img{aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--sand-2),#E6E6E8)}
.proj-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proj-card:hover .proj-img img{transform:scale(1.08)}
.proj-cat{position:absolute;top:16px;left:16px;background:var(--grad-orange);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:7px 14px;border-radius:30px;z-index:2;box-shadow:0 6px 14px rgba(245,138,30,.35)}
.proj-body{padding:24px;display:flex;flex-direction:column;flex:1}
.proj-body h3{font-size:1.15rem;margin-bottom:10px}
.proj-body p{color:var(--muted);font-size:.93rem;flex:1}
.proj-body .more{margin-top:16px;font-weight:600;font-size:.9rem;color:var(--royal);display:inline-flex;align-items:center;gap:7px;transition:gap .25s,color .25s}
.proj-body .more svg{width:15px;height:15px}
.proj-card:hover .more{gap:12px;color:var(--gold-dark)}

/* ---------- Project filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.filter-btn{font-family:'Inter',sans-serif;font-weight:600;font-size:.88rem;padding:9px 18px;border:1.5px solid var(--border);background:#fff;color:var(--text);border-radius:30px;cursor:pointer;transition:all .25s}
.filter-btn:hover{border-color:var(--gold)}
.filter-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.proj-card.hide{display:none}

/* ---------- Map section ---------- */
.map-section{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border)}
.map-frame{min-height:380px;position:relative;overflow:hidden}
/* Interactive Google Maps embed. The address chip sits on top, so it must not swallow
   clicks meant for the map underneath. */
.map-embed{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-frame{background:#E8EAED}
.map-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(23,26,31,.42) 100%);transition:background .3s}
.map-photo:hover{transform:scale(1.04)}
.map-chip{position:absolute;left:18px;bottom:18px;z-index:2;pointer-events:none;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--navy);font-weight:600;font-size:.9rem;padding:10px 16px;border-radius:30px;box-shadow:var(--shadow);border:1px solid var(--border)}
.map-chip svg{width:17px;height:17px;color:var(--gold-dark)}
/* Google requires imagery to be credited. The previous screenshot had the credit
   rendered into it; this one is cropped above it, so it is shown here instead. */
.map-credit{position:absolute;right:10px;top:10px;z-index:2;font-size:.68rem;letter-spacing:.02em;
  color:rgba(255,255,255,.9);background:rgba(12,15,19,.55);padding:3px 8px;border-radius:5px;pointer-events:none}

/* ---- Scroll-fixed video backgrounds (also used inline on the home page) ---- */
[data-vbg]{position:relative;overflow:clip;isolation:isolate}
.vbg{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none;background:#14171C;contain:paint}
/* Pinned with position:sticky so the browser runs it on the compositor thread: no
   scroll listener, and it cannot lag a frame behind the painted scroll offset. */
.vbg-video{display:block;position:sticky;top:0;width:100%;height:100vh;
  object-fit:cover;object-position:center;background:#14171C;backface-visibility:hidden}
.vbg-js .vbg-video{position:absolute;left:0;top:0;will-change:transform;transform:translate3d(0,0,0)}
.vbg-js [data-vbg],.vbg-js .vbg{overflow:hidden}
.vbg-tint{position:absolute;inset:0;pointer-events:none}
.vbg-tint--navy{background:radial-gradient(135% 135% at 50% 20%,rgba(20,23,26,.5) 0%,rgba(20,23,26,.72) 56%,rgba(20,23,26,.85) 100%)}
[data-vbg] > .wrap{position:relative;z-index:2}
@media (prefers-reduced-motion: reduce){.vbg-video{position:absolute!important;inset:0;height:100%;will-change:auto}}
.no-vbgfx .vbg-video{position:absolute!important;inset:0;height:100%;will-change:auto}

/* Shared by the contact page and the home page location card. */
.map-section{position:relative}
.map-section::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:3px;background:linear-gradient(135deg,var(--gold-dark),var(--gold) 45%,#ffe6bd 60%,var(--gold) 75%,var(--gold-dark));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:6;pointer-events:none}

/* The map card is a 1fr 1fr grid; on narrow screens the details column's content
   forced the map column to zero width, so the map vanished on phones entirely. */
@media(max-width:760px){
  .map-section{grid-template-columns:1fr}
  .map-frame{min-height:320px}
  .map-details{padding:30px 24px}
}

/* ---------- Location / contact band (replaces map + form) ---------- */
.location-card{position:relative;overflow:hidden;background:linear-gradient(160deg,#14171C 0%,#1C2028 50%,#171A1F 100%);color:#cfd3d8;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr 1fr;gap:0}
.location-card::after{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad-orange);z-index:2}
.loc-head{grid-column:1/-1;text-align:center;padding:28px 36px 18px;border-bottom:1px solid rgba(255,255,255,.06);position:relative;z-index:1}
.loc-head h2{color:#fff;font-size:clamp(1.45rem,2.5vw,1.95rem);margin:10px 0 12px}
.loc-head p{color:#9aa0a7;font-size:.92rem;max-width:530px;margin:0 auto}
.loc-main{padding:24px 32px;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.loc-main h2{color:#fff;font-size:clamp(1.4rem,2.4vw,1.8rem)}
.loc-addr{display:flex;align-items:flex-start;gap:12px;font-family:'Inter',sans-serif;font-size:.95rem;color:#9aa0a7;margin:0;line-height:1.6;letter-spacing:.01em}
.loc-addr svg{width:22px;height:22px;color:var(--orange-2);flex-shrink:0;margin-top:2px}
.loc-side{background:rgba(255,255,255,.03);border-left:1px solid rgba(255,255,255,.06);padding:22px;display:flex;flex-direction:column;gap:10px;justify-content:center;position:relative;z-index:1}
.loc-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);transition:transform .25s var(--ease),border-color .25s,background .25s}
.loc-item:hover{transform:translateY(-2px);border-color:rgba(245,138,30,.45);background:rgba(245,138,30,.07);box-shadow:0 8px 24px rgba(245,138,30,.1)}
.loc-item .li-ico{width:38px;height:38px;border-radius:10px;background:var(--grad-orange);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px rgba(245,138,30,.25)}
.loc-item .li-ico svg{width:18px;height:18px;color:#fff}
.loc-item small{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:#9aa0a7;font-weight:700}
.loc-item strong{color:#fff;font-size:.92rem}
.loc-foot{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.06);padding:18px 32px;display:flex;justify-content:center;gap:14px;position:relative;z-index:1}
@media(max-width:760px){.location-card{grid-template-columns:1fr}.loc-side{border-left:none;border-top:1px solid rgba(255,255,255,.06)}.loc-main{padding:24px 22px}.loc-foot{flex-direction:column;padding:18px 22px}}
.map-details{background:var(--navy);color:#cdd8e8;padding:42px 40px;display:flex;flex-direction:column;justify-content:center}
.map-details h3{color:#fff;font-size:1.4rem;margin-bottom:20px}
.map-details .info-list .ii{background:rgba(245,138,30,.16)}
.map-details .info-list .ii svg{color:var(--gold)}
.map-details .info-list .lbl{color:#8fa2bb}
.map-details .info-list .val{color:#fff}
.map-details .info-list a.val:hover{color:var(--gold)}
.map-details .btn-row{margin-top:28px}

/* ---------- Two-column intro ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.two-col .media{position:relative;isolation:isolate}
.two-col .media::before{content:"";position:absolute;right:-22px;bottom:-22px;width:74%;height:80%;
  background:var(--bluegrey);border:1px solid var(--border);border-radius:22px;z-index:-1}
.two-col .media::after{content:"";position:absolute;left:-16px;top:30px;width:54px;height:54px;border-radius:15px;
  background:var(--grad-orange);box-shadow:var(--glow);z-index:-1}
.two-col .media img{
  border-radius:24px 24px 60px 24px;box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;object-fit:cover;width:100%;
}
.two-col .media.framed img{border-radius:8px 38px 8px 38px}
.title-accent{display:flex;gap:18px;align-items:flex-start;margin-bottom:8px}
.title-accent .bar{width:5px;background:var(--grad-orange);border-radius:3px;flex-shrink:0;align-self:stretch;min-height:54px}
.two-col h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.two-col p{color:var(--muted);margin:20px 0}

/* ---------- Service cards grid ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
  display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-orange);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.card::after{content:"";position:absolute;inset:0;background:transparent;opacity:0;transition:opacity .4s}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:#f3dcbd}
.card:hover::before{transform:scaleX(1)}
.card:hover::after{opacity:1}
.card .ico{
  width:60px;height:60px;border-radius:16px;background:var(--grad-orange);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;position:relative;z-index:1;
  box-shadow:0 8px 18px rgba(245,138,30,.28);transition:transform .4s var(--ease)
}
.card:hover .ico{transform:rotate(-6deg) scale(1.05)}
.card .ico svg{width:27px;height:27px;color:#fff}
.card h3{font-size:1.18rem;margin-bottom:10px;position:relative;z-index:1}
.card p{color:var(--muted);font-size:.94rem;flex:1;position:relative;z-index:1}
.card .more{
  margin-top:20px;font-weight:600;font-size:.9rem;color:var(--gold-dark);
  display:inline-flex;align-items:center;gap:7px;transition:gap .25s;position:relative;z-index:1;
}
.card .more svg{width:15px;height:15px}
.card:hover .more{gap:12px}

/* ---------- Help cards (3 steps) ---------- */
.help-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:50px 0 44px}
.help-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:36px 28px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s}
.help-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.help-card .num{width:56px;height:56px;border-radius:18px;background:var(--grad-orange);color:#fff;font-family:'Merriweather',serif;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:1.3rem;box-shadow:0 8px 18px rgba(245,138,30,.3)}
.help-card h3{font-size:1.12rem;margin-bottom:10px}
.help-card p{color:var(--muted);font-size:.94rem}
.reassure{text-align:center;color:var(--muted);font-style:italic;max-width:680px;margin:0 auto;font-size:.98rem}

/* ---------- Benefit list ---------- */
.benefits{list-style:none;margin:26px 0 32px}
.benefits li{display:flex;align-items:flex-start;gap:14px;margin-bottom:15px;font-weight:500;color:var(--text)}
.benefits svg{width:24px;height:24px;color:#fff;background:var(--grad-orange);border-radius:8px;padding:4px;flex-shrink:0;margin-top:1px;box-shadow:0 4px 10px rgba(245,138,30,.28)}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative;margin-top:54px}
.steps::before{content:"";position:absolute;top:30px;left:12%;right:12%;height:3px;background:linear-gradient(90deg,var(--orange-2),var(--gold));border-radius:3px;z-index:0;opacity:.5}
.step{position:relative;z-index:1;text-align:center}
.step .circ{width:60px;height:60px;border-radius:20px;background:var(--grad-orange);color:#fff;font-family:'Merriweather',serif;font-weight:700;font-size:1.4rem;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 0 0 10px var(--offwhite),0 10px 22px rgba(245,138,30,.3);transition:transform .35s var(--ease)}
.bg-off .step .circ{box-shadow:0 0 0 10px var(--offwhite),0 10px 22px rgba(245,138,30,.3)}
.step:hover .circ{transform:translateY(-5px) scale(1.05)}
.step h3{font-size:1.1rem;margin-bottom:9px}
.step p{color:var(--muted);font-size:.92rem}

/* ---------- Trust / stat blocks (navy) ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:50px}
.trust-block:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(0,0,0,.2)}
.trust-block{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:34px 26px;text-align:center;backdrop-filter:blur(6px);}

.trust-block .tb-ico{width:56px;height:56px;border-radius:18px;background:var(--grad-orange);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 8px 20px rgba(245,138,30,.35)}
.trust-block .tb-ico svg{width:26px;height:26px;color:#fff}
.trust-block h3{font-size:1.06rem;color:#fff;margin-bottom:6px}
.trust-block p{font-size:.88rem;color:#a9adb2}
.rics-badge{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--gold);color:var(--gold-dark);border-radius:40px;padding:15px 30px;font-weight:600;font-size:.96rem;letter-spacing:.06em;text-transform:uppercase;margin-top:0;background:var(--orange-tint)}
.rics-badge svg{width:18px;height:18px}

/* ---------- CTA band (image overlay) ---------- */
.cta-band{position:relative;color:#fff;text-align:center;overflow:hidden;
  background:linear-gradient(115deg,#14171C 0%,#1C2028 55%,#171A1F 100%);}
.cta-band::before{content:none}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);max-width:780px;margin:0 auto}
.cta-band p{color:#d6d9dd;max-width:640px;margin:18px auto 32px;font-size:1.1rem}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:14px;margin-bottom:10px;background:#fff;overflow:hidden;transition:box-shadow .3s,border-color .3s;box-shadow:var(--shadow-sm)}
.faq-item[open]{border-color:#f3dcbd;box-shadow:var(--shadow)}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:'Merriweather',serif;font-weight:700;color:var(--navy);font-size:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .pl{width:28px;height:28px;flex-shrink:0;position:relative;border-radius:9px;background:var(--orange-tint);transition:transform .3s,background .3s}
.faq-item[open] summary .pl{transform:rotate(45deg);background:var(--grad-orange)}
.faq-item summary .pl::before,.faq-item summary .pl::after{content:"";position:absolute;background:var(--gold-dark);border-radius:2px;transition:background .3s}
.faq-item[open] summary .pl::before,.faq-item[open] summary .pl::after{background:#fff}
.faq-item summary .pl::before{top:13px;left:7px;right:7px;height:2px}
.faq-item summary .pl::after{left:13px;top:7px;bottom:7px;width:2px}
.faq-item .ans{padding:0 22px 18px;color:var(--muted);font-size:.94rem}

/* ---------- Contact / form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:start}
.contact-info h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.contact-info p{color:var(--muted);margin:18px 0 28px}
.info-list{list-style:none;display:flex;flex-direction:column;gap:18px}
.info-list li{display:flex;align-items:flex-start;gap:14px}
.info-list .ii{width:48px;height:48px;border-radius:14px;background:var(--grad-orange);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 14px rgba(245,138,30,.28)}
.info-list .ii svg{width:20px;height:20px;color:#fff}
.info-list .lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.info-list .val{font-weight:600;color:var(--navy);font-size:1.02rem}
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:40px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem;font-weight:600;color:var(--navy)}
.field input,.field select,.field textarea{
  font-family:'Inter',sans-serif;font-size:.96rem;padding:13px 15px;border:1.5px solid var(--border);
  border-radius:12px;background:var(--offwhite);color:var(--text);transition:border-color .2s,box-shadow .2s,background .2s;width:100%;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 3px rgba(245,138,30,.20);background:#fff}
.form-note{font-size:.86rem;color:var(--muted);font-style:italic;margin-top:14px}
.field .err{font-size:.8rem;color:#c0392b;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0392b}
.field.invalid .err{display:block}

/* ---------- Team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.team-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.team-card .ph{aspect-ratio:4/5;background:var(--bluegrey);position:relative;overflow:hidden}
.team-card .ph img{width:100%;height:100%;object-fit:cover}
.team-card .initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Merriweather',serif;font-size:3rem;color:#fff;background:var(--grad-ink)}
.team-card .initials::after{content:"";position:absolute;width:160px;height:160px;right:-50px;bottom:-50px;border-radius:50%;background:transparent}
.team-card .body{padding:24px}
.team-card h3{font-size:1.2rem;margin-bottom:4px}
.team-card .role{color:var(--gold-dark);font-weight:600;font-size:.9rem;letter-spacing:.04em}
.team-card p{color:var(--muted);font-size:.92rem;margin-top:12px}
.team-add{border:2px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:40px;font-size:.95rem}

/* ---------- Page hero (inner) ---------- */
.page-hero{background:var(--grad-ink);color:#fff;padding:96px 0;position:relative;overflow:hidden}
.page-hero::after{content:none}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.2rem);letter-spacing:-.02em;max-width:760px;margin:0 auto}
.page-hero p{color:#cfd3d8;margin:14px auto 0;max-width:660px;font-size:1.1rem}
/* h1 and p are centred blocks capped at 760px with left-aligned text, so the eyebrow
   needs the same offset to sit directly above the title rather than at the wrap edge. */
.page-hero .eyebrow{margin-left:max(0px,calc((100% - 760px)/2))}
.crumbs{font-size:.85rem;color:var(--orange-2);margin-bottom:16px;letter-spacing:.04em}
.crumbs a{color:#a9adb2}.crumbs a:hover{color:var(--orange-2)}

/* ---------- Service detail blocks ---------- */
.svc-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.svc-body h2{font-size:1.5rem;margin:34px 0 14px}
.svc-body h2:first-child{margin-top:0}
.svc-body p{color:var(--muted);margin-bottom:14px}
.svc-body ul{margin:0 0 16px 0;padding-left:0;list-style:none}
.svc-body ul li{position:relative;padding-left:28px;margin-bottom:10px;color:var(--text)}
.svc-body ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--gold);border-radius:50%}
.svc-side{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px}
.side-card{background:var(--offwhite);border:1px solid var(--border);border-radius:var(--radius);padding:30px}
.side-card.navy{background:var(--grad-ink);color:#cfd3d8}
.side-card.navy h3{color:#fff}
.side-card h3{font-size:1.15rem;margin-bottom:14px}
.side-card .rel{display:flex;flex-direction:column;gap:4px}
.side-card .rel a{padding:9px 0;border-bottom:1px solid var(--border);color:var(--text);font-size:.94rem;font-weight:500;display:flex;justify-content:space-between;transition:color .2s,padding .2s}
.side-card .rel a:last-child{border-bottom:none}
.side-card .rel a:hover{color:var(--royal);padding-left:6px}

/* ---------- Footer ---------- */
.footer{background:var(--grad-ink);color:var(--footer-text);padding:52px 0 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin-top:-34px;position:relative;z-index:3;overflow:hidden}
.footer::before{content:none}
.footer .wrap{position:relative;z-index:2}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1.4fr;gap:36px;padding-bottom:26px}
.footer h3{color:#fff;font-size:1.05rem;margin-bottom:20px;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.02em}
.footer p{font-size:.92rem;color:#9fb0c8;margin-top:12px}
.footer .brand .name{color:#fff}
.footer .brand{display:block}
.footer .logo-img{height:auto;width:min(200px,78%);background:#fff;padding:11px 15px;border-radius:12px}
.footer h3{position:relative;padding-bottom:11px;margin-bottom:16px}
.footer h3::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:var(--grad-orange)}
.footer .brand .name small{color:var(--gold)}
.footer ul{list-style:none}
.footer ul li{margin-bottom:8px}
.footer ul a{font-size:.93rem;color:#aebdd2;transition:color .2s,padding .2s}
.footer ul a:hover{color:var(--gold);padding-left:5px}
.footer .fcontact li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem}
.footer .fcontact svg{width:17px;height:17px;color:var(--gold);flex-shrink:0;margin-top:3px}
.footer .fcontact a{color:#aebdd2}
.footer .fcontact a:hover{color:var(--gold)}
.footer .frics{display:inline-flex;align-items:center;gap:8px;background:rgba(245,138,30,.14);border:1px solid rgba(245,138,30,.45);color:var(--orange-2);border-radius:30px;padding:9px 16px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:8px}
.footer .frics svg{width:15px;height:15px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:16px 0;text-align:center;font-size:.86rem;color:#8294ac}

/* ---------- Mobile menu (compact side drawer) ---------- */
.mm-backdrop{position:fixed;inset:0;background:rgba(21,24,27,.45);backdrop-filter:blur(2px);z-index:190;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mm-backdrop.open{opacity:1;visibility:visible}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(330px,86vw);background:#fff;z-index:200;display:flex;flex-direction:column;padding:22px 22px 28px;transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto;box-shadow:-12px 0 40px rgba(21,24,27,.22)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu{overflow-y:auto;-webkit-overflow-scrolling:touch}
.mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.mm-top .name{font-family:'Merriweather',serif;color:var(--navy);font-size:1.25rem;font-weight:700}
.mm-close{background:var(--bluegrey);border:none;cursor:pointer;padding:8px;border-radius:8px;display:flex}
.mm-close svg{width:22px;height:22px;color:var(--navy)}
.mobile-menu a{color:var(--navy);font-size:1.02rem;font-weight:500;padding:12px 6px;border-bottom:1px solid var(--border)}
.mm-acc{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;cursor:pointer;color:var(--navy);font-size:1.02rem;font-weight:500;padding:12px 6px;border-bottom:1px solid var(--border);font-family:inherit}
.mm-acc .caret{width:18px;height:18px;transition:transform .3s}
.mm-acc[aria-expanded="true"] .caret{transform:rotate(180deg)}
.mobile-menu .mm-sub{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);padding:0}
.mobile-menu .mm-sub.open{max-height:680px;padding:4px 0 6px}
.mobile-menu .mm-sub a{font-size:.92rem;font-weight:400;padding:9px 6px 9px 16px;color:var(--muted);border-bottom:none}
.mobile-menu .mm-sub a:hover{color:var(--royal)}
.mobile-menu .mm-label{color:var(--gold-dark);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-top:14px;padding:8px 6px 2px}
.mm-contact{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.mm-contact a{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--text);padding:8px 6px;font-weight:500}
.mm-contact svg{width:17px;height:17px;color:var(--gold-dark)}
/* On short phones the panel's links overflow and a flex child with no shrink guard
   gets squeezed; this keeps the CTA at full tap height and lets the panel scroll. */
.mobile-menu .btn{margin-top:16px;justify-content:center;flex-shrink:0;min-height:48px}
.mm-rics{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border-radius:6px;padding:9px 13px;margin-top:16px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;justify-content:center}
.mm-rics svg{width:17px;height:17px;color:var(--gold)}

/* ---------- Sticky bottom bar (mobile) ---------- */
.sticky-bottom{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--navy);border-top:2px solid var(--gold);box-shadow:0 -4px 16px rgba(0,0,0,.2)}
.sticky-bottom a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 4px;color:#e8e6e2;font-size:.74rem;font-weight:600}
.sticky-bottom a:not(:last-child){border-right:1px solid rgba(255,255,255,.1)}
.sticky-bottom a.q{background:var(--gold);color:var(--navy)}
.sticky-bottom svg{width:21px;height:21px}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-46px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-r{opacity:0;transform:translateX(46px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-s{opacity:0;transform:scale(.94);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-l.in,.reveal-r.in,.reveal-s.in{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.13s}
.stagger.in > *:nth-child(3){transition-delay:.21s}
.stagger.in > *:nth-child(4){transition-delay:.29s}
.stagger.in > *:nth-child(5){transition-delay:.37s}
.stagger.in > *:nth-child(6){transition-delay:.45s}
.stagger.in > *:nth-child(7){transition-delay:.53s}
.stagger.in > *:nth-child(8){transition-delay:.61s}
.stagger.in > *:nth-child(9){transition-delay:.69s}
.stagger.in > *:nth-child(n+10){transition-delay:.75s}

/* ---------- Scrolling keyword marquee ---------- */
.marquee{background:var(--navy);overflow:hidden;padding:26px 0;position:relative;z-index:3}
.marquee-track{display:flex;gap:0;width:max-content;animation:scrollx 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .mq{display:inline-flex;align-items:center;gap:18px;padding:0 26px;font-family:'Merriweather',serif;font-size:1.15rem;font-weight:700;color:#fff;white-space:nowrap}
.marquee .mq .dot{width:9px;height:9px;border-radius:50%;background:var(--grad-orange);flex-shrink:0}
.marquee .mq.muted{color:rgba(255,255,255,.32)}
@keyframes scrollx{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- Decorative floating shapes ---------- */
.float-shape{position:absolute;z-index:0;pointer-events:none}
.float-shape.ring{border:2px solid rgba(245,138,30,.3);border-radius:50%}
.float-shape.blob{background:var(--orange-tint);border-radius:42% 58% 58% 42%/45% 45% 55% 55%}

/* ---------- Homepage side quick-nav ---------- */
.side-nav{position:fixed;left:14px;top:50%;transform:translateY(-50%) translateX(-135%);z-index:70;display:flex;flex-direction:column;opacity:0;transition:transform .5s var(--ease),opacity .5s;box-shadow:var(--shadow-lg);border-radius:14px}
.side-nav.show{transform:translateY(-50%) translateX(0);opacity:1}
.side-nav a{display:flex;align-items:center;width:62px;height:62px;background:rgba(23,26,31,.93);backdrop-filter:blur(6px);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.08);overflow:hidden;white-space:nowrap;transition:width .38s var(--ease),background .25s}
.side-nav a:first-child{border-radius:15px 15px 0 0}
.side-nav a:last-child{border-radius:0 0 15px 15px}
.side-nav a+a{border-top:none}
.side-nav .sn-ico{min-width:62px;height:62px;display:flex;align-items:center;justify-content:center}
.side-nav .sn-ico svg{width:21px;height:21px;color:var(--orange-2);transition:color .25s}
.side-nav .sn-tx{font-size:.84rem;font-weight:600;opacity:0;transition:opacity .3s;padding-right:20px}
.side-nav a:hover{width:188px;background:var(--grad-orange)}
.side-nav a:hover .sn-ico svg{color:#fff}
.side-nav a:hover .sn-tx{opacity:1;color:#fff}

/* ---------- Footer accreditation row ---------- */
.footer-accred{border-top:1px solid rgba(255,255,255,.1);margin-top:10px;padding:30px 0;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.accred-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;height:66px;min-width:128px;padding:0 24px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(255,255,255,.04);color:#fff;font-weight:700;letter-spacing:.04em;font-size:.86rem;text-align:center;transition:border-color .25s,background .25s,transform .25s}
.accred-badge small{display:block;font-weight:500;font-size:.64rem;color:var(--footer-text);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.accred-badge:hover{border-color:rgba(245,138,30,.55);background:rgba(245,138,30,.08);transform:translateY(-3px)}
.accred-note{width:100%;text-align:center;color:#8a9099;font-size:.76rem;margin-top:2px;font-style:italic}

@media(max-width:1180px){.side-nav{display:none}}
@media(max-width:1060px){.brand-tag{display:none}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  .reveal,.reveal-l,.reveal-r,.reveal-s,.stagger>*{opacity:1 !important;transform:none !important;transition:none !important}
  .marquee-track{animation:none !important}
  [data-parallax]{transform:none !important}
  .parallax-stage{background-attachment:scroll !important}
}

100%{background-position:-200% 0}

/* ====== Subtle animated effects ====== */

/* Gold-rule gentle width pulse */
50%{width:72px;opacity:1}

/* About card top edge: gradient color shift */
50%{background-position:100% 50%}

/* Card icon gentle breathe glow */
50%{box-shadow:0 8px 24px rgba(245,138,30,.32)}

/* CTA button soft glow breathe */
50%{box-shadow:0 10px 32px rgba(245,138,30,.38)}

/* Location card accent bar: gradient color shift */

/* Footer top edge: soft fade breathe */

50%{opacity:.8}

/* Curve-top sections: gentle glow line fade */

/* Marquee border lines: gentle opacity breathe */

/* Project card: subtle orange top line on hover */

/* RICS trust block icon: gentle float */
50%{transform:translateY(-3px)}

/* Header shimmer bar */
.header-shimmer{position:absolute;bottom:0;left:0;right:0;height:3px;overflow:hidden;pointer-events:none}
.header-shimmer::before{content:'';position:absolute;top:0;bottom:0;left:0;width:300%;background:repeating-linear-gradient(90deg,transparent 0%,var(--grey-2) 8%,var(--gold) 16%,var(--grey-2) 24%,transparent 33.3333%);animation:glowSlide 4s linear infinite}


100%{background-position:-100% 0}

100%{background-position:-100% 0}

/* Animated glow separator */
/* Compositor-driven sweep. This previously animated background-position, which
   repaints the element every frame; several sit on every page and it was costing
   scroll smoothness. A translated strip inside a clipped bar looks the same and
   runs on the GPU. */
.glow-sep{height:4px;width:60%;margin:0 auto;position:relative;overflow:hidden;border-radius:4px;box-shadow:0 0 12px rgba(245,138,30,.25)}
.glow-sep::before{content:'';position:absolute;top:0;bottom:0;left:0;width:300%;
  background:repeating-linear-gradient(90deg,transparent 0%,var(--grey-3) 5%,var(--gold) 11%,var(--gold-dark) 16.5%,var(--gold) 22%,var(--grey-3) 28%,transparent 33.3333%);
  animation:glowSlide 3s linear infinite}
@keyframes glowSlide{from{transform:translate3d(-33.3333%,0,0)}to{transform:translate3d(0,0,0)}}
@property --abd{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes borderTravel{to{--abd:360deg}}


/* Shimmer on location card accent bar */
.location-card::after{background:linear-gradient(90deg,transparent 0%,var(--grey-3) 15%,var(--gold) 35%,var(--gold-dark) 50%,var(--gold) 65%,var(--grey-3) 85%,transparent 100%) !important;background-size:300% 100% !important;animation:glowSlide 4s linear infinite !important}

/* Shimmer on about card top bar */
.about-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 0%,var(--grey-3) 15%,var(--gold) 35%,var(--gold-dark) 50%,var(--gold) 65%,var(--grey-3) 85%,transparent 100%);background-size:300% 100%;animation:glowSlide 4s linear infinite;border-radius:24px 24px 0 0;z-index:10}

/* ---------- Responsive ---------- */
@media(max-width:1180px){.side-nav{display:none}.header-rics{display:none}}
@media(max-width:1060px){.brand-tag{display:none}}
@media(max-width:980px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .two-col,.contact-grid,.svc-layout{grid-template-columns:1fr;gap:36px}
  .svc-body,.svc-side{min-width:0}
  .svc-body img{width:100%;height:auto}
  .svc-side{position:static}
  .cards,.team-grid,.proj-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:36px}
  .steps::before{display:none}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .about-card{grid-template-columns:1fr}
  .about-portrait{min-height:auto}
  .brand-rics{display:none}
}
@media(max-width:760px){
  .tb-dot{display:none}
  .menu-btn span{display:none}
  .menu-btn{padding:10px}
}
@media(max-width:640px){
  body{font-size:16px}
  section{padding:40px 0}
  /* keep the curved sections' visible top gap equal to the bottom at this size too:
     40 + the 32px overlap */
  .curve-top{padding-top:72px}
  .article-related.curve-top{padding-top:72px}
  .wrap{padding:0 20px}
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:6px}
  .topbar .tb-left{gap:6px 12px;font-size:.78rem}
  .topbar .tb-badge{font-size:.86rem;padding:8px 18px}
  .hero .wrap{padding-top:56px;padding-bottom:72px}
  .hero .btn-row{flex-direction:column}
  .hero .btn-row .btn{justify-content:center}
  .cards,.help-cards,.team-grid,.steps,.trust-grid,.form-grid,.proj-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .form-card{padding:24px}
  .sticky-bottom{display:flex}
  body{padding-bottom:62px}
  .cta-band{background-attachment:scroll}
  .parallax-stage{background-attachment:scroll}
  .about-content{padding:30px 24px}
}


/* ---- Card text alignment: centred titles/CTAs, left-aligned descriptions ---- */
.card p{text-align:left;align-self:stretch}
.trust-block p{text-align:left}
.proj-body h3{text-align:center}
.proj-body .more{align-self:center}

/* ---- Contact "Get in Touch" card: centred details, left-aligned body paragraph ---- */
.contact-info{text-align:left}
.contact-info .info-list{text-align:left;gap:20px}
.contact-info .info-list li{justify-content:flex-start}
.contact-info .glow-sep.under-title{margin-left:0;margin-right:0}

/* ============ ENHANCED PROJECT PAGE COMPONENTS ============ */
/* At-a-glance facts panel */
.pj-glance{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:0 0 36px}
.pj-glance-item{background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:5px}
.pj-glance-item .pgl{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-dark);font-weight:700}
.pj-glance-item .pgv{font-size:.95rem;color:var(--navy);font-weight:600;line-height:1.4}
@media(max-width:760px){.pj-glance{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.pj-glance{grid-template-columns:1fr}}

/* Inspection photo gallery */
.pj-gallery-note{color:var(--muted);font-size:.86rem;font-style:italic;margin:-4px 0 18px}
.pj-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 36px}
.pj-shot{display:block;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/3;cursor:zoom-in;border:1px solid var(--border)}
.pj-shot img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease);display:block}
.pj-shot:hover img{transform:scale(1.07)}
@media(max-width:760px){.pj-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.pj-gallery{grid-template-columns:1fr}}
/* Technical drawings: show the FULL plan (never crop the title block or edge labels) */
.pj-drawings{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 36px}
.pj-drawings .pj-shot{aspect-ratio:auto;background:#fff;cursor:zoom-in}
.pj-drawings .pj-shot img{height:auto;object-fit:contain}
.pj-drawings .pj-shot:hover img{transform:none}
.pj-drawings .pj-shot:hover{box-shadow:var(--shadow)}
@media(max-width:560px){.pj-drawings{grid-template-columns:1fr}}

/* Lightbox */
.pj-lightbox{position:fixed;inset:0;background:rgba(12,15,20,.92);z-index:2000;display:none;align-items:center;justify-content:center;padding:30px}
.pj-lightbox.open{display:flex}
.pj-lightbox img{max-width:94vw;max-height:90vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.pj-lb-close{position:absolute;top:22px;right:28px;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:1.8rem;width:48px;height:48px;border-radius:50%;cursor:pointer;line-height:1;transition:background .2s}
.pj-lb-close:hover{background:rgba(255,255,255,.25)}

/* Key takeaway pull-quote */
.pj-takeaway{background:var(--navy);color:#fff;border-radius:var(--radius);padding:28px 30px;margin:34px 0;border-left:4px solid var(--gold);display:flex;gap:16px;align-items:flex-start}
.pj-takeaway svg{width:28px;height:28px;color:var(--gold);flex-shrink:0;margin-top:2px}
.pj-takeaway p{color:#fff;font-size:1.06rem;line-height:1.6;font-weight:500;margin:0;font-style:italic}

/* Service tags */
.pj-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:30px 0 6px}
.pj-tags-label{font-size:.85rem;color:var(--muted);font-weight:600;margin-right:2px}
.pj-tags a{display:inline-block;padding:7px 16px;background:var(--offwhite);border:1px solid var(--border);border-radius:30px;font-size:.85rem;font-weight:600;color:var(--royal);text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.pj-tags a:hover{background:var(--grad-orange);color:#fff;border-color:transparent}

/* Gallery sub-headings (Exterior / Interior) */
.pj-gallery-sub{font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-dark);font-weight:700;margin:8px 0 14px}
.pj-gallery-sub:not(:first-of-type){margin-top:26px}

/* ================= HOME PAGE FINISHING TOUCHES ================= */
/* Task 2: remove the stationary orange underline beneath the hero word "Trust" */
.hero h1 .swash::after{display:none}

/* Tasks 3,4,5,7,8: the animated bar, relocated to sit under each section title as an
   animated highlight/underline (keeps the same glow-sep style; compact, centred, consistent) */
.glow-sep.under-title{width:clamp(150px,42%,300px);margin:16px auto 0}

/* Tasks 1 & 9: the animated glow now runs all the way around the card, not just the top.
   A masked gradient frame sits just inside the card edges and flows with the same animation. */
.location-card::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;height:auto !important;
  border-radius:inherit;padding:3px;
  background:linear-gradient(135deg,var(--gold-dark),var(--gold) 45%,#ffe6bd 60%,var(--gold) 75%,var(--gold-dark));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  z-index:11;pointer-events:none}

/* Home "Who We Are" card sits on a white background, where the grey/transparent
   parts of the sweep are invisible: so the frame looked open at the sides. Use a
   continuous gold gradient so the animated border stays visible ALL the way around
   the card (matching how the dark Location / map cards read). */
.about-card::before{content:none !important}

/* Task 10: RICS + Chartered Surveyors logos above the wording in the footer badges */
.accred-badge.has-logo{height:auto;min-height:112px;padding:16px 26px;gap:9px}
.accred-badge .ab-text{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.accred-logo{width:46px;height:46px;object-fit:contain;display:block}
.accred-logo-emblem{display:flex;align-items:center;justify-content:center;color:var(--gold)}
.accred-logo-emblem svg{width:42px;height:42px}
.accred-badge.has-logo:hover .accred-logo-emblem{color:var(--gold)}

/* ===== Premium orange CTA panel (shared: About + Services) ===== */
/* ---- Premium orange CTA panel ---- */
.about-cta{padding:clamp(58px,8vw,96px) 0;background:#fff}
.about-cta-panel{position:relative;overflow:hidden;border-radius:30px;padding:clamp(46px,6vw,78px) clamp(26px,6vw,64px);text-align:center;background:linear-gradient(135deg,#F9A03F 0%,#F58A1E 40%,#D9740F 75%,#bd6108 100%);box-shadow:0 34px 80px -34px rgba(217,116,15,.75),inset 0 1px 0 rgba(255,255,255,.28)}
.about-cta-panel::before{content:'';position:absolute;width:440px;height:440px;top:-170px;right:-130px;background:radial-gradient(circle,rgba(255,255,255,.38),transparent 68%);pointer-events:none}
.about-cta-panel::after{content:'';position:absolute;width:400px;height:400px;bottom:-180px;left:-140px;background:radial-gradient(circle,rgba(90,40,0,.28),transparent 70%);pointer-events:none}
.about-cta-eyebrow{position:relative;display:inline-block;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);padding:6px 17px;border-radius:30px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:18px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.about-cta-panel h2{color:#fff;font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.1;letter-spacing:-.02em;margin:0 auto;max-width:660px;position:relative;text-shadow:0 2px 18px rgba(120,55,0,.25)}
.about-cta-panel p{color:rgba(255,255,255,.92);margin:16px auto 0;font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.7;max-width:580px;position:relative}
.about-cta-actions{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.about-cta-actions .btn{display:inline-flex;align-items:center;gap:9px}
.about-cta-primary{background:#fff;color:var(--navy);font-weight:700;padding:15px 34px;border-radius:40px;box-shadow:0 12px 26px -8px rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s}
.about-cta-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -8px rgba(0,0,0,.5)}
.about-cta-primary svg{width:18px;height:18px}
.about-cta-ghost{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.65);color:#fff;font-weight:600;padding:15px 30px;border-radius:40px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background .2s,transform .2s}
.about-cta-ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.about-cta-ghost svg{width:17px;height:17px}

/* ===== Shared hero eyebrow (service + inner pages) ===== */
.hero-eyebrow{display:inline-block;color:#fbbf73;background:rgba(245,138,30,.12);border:1px solid rgba(245,138,30,.4);padding:7px 18px;border-radius:30px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:18px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ===== Accessibility: pause decorative motion when the user prefers reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .glow-sep::before,.header-shimmer::before,
  .glow-sep,.glow-sep.under-title,
  .about-card::before,.location-card::after,.map-section::after,.coverage-grid::after,.split-feature::after,
  .header-anim,.header-shimmer,.marquee-track,
  .about-cta-panel,.process-parallax::before{animation:none !important}
}

/* ===== Testimonials / social proof ===== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.testi-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.testi-quote-mark{font-family:'Merriweather',serif;font-size:3.2rem;line-height:.6;color:var(--gold);opacity:.35;margin-bottom:6px}
.testi-stars{display:flex;gap:3px;margin-bottom:14px}
.testi-stars svg{width:16px;height:16px;color:var(--gold);fill:var(--gold)}
.testi-card p{color:var(--navy);font-size:1rem;line-height:1.7;margin:0 0 20px}
.testi-who{margin-top:auto;display:flex;align-items:center;gap:12px}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--grad-orange);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Merriweather',serif;font-weight:700;font-size:1rem;flex-shrink:0}
.testi-name{font-weight:700;color:var(--navy);font-size:.95rem}
.testi-role{color:var(--muted);font-size:.82rem}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr}}

/* ===== Insights library category headings ===== */
.insight-cat{font-size:1.15rem;letter-spacing:.02em;color:var(--navy);margin:44px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--border);position:relative}
.insight-cat::after{content:'';position:absolute;left:0;bottom:-1px;width:54px;height:3px;border-radius:6px;background:var(--grad-orange)}
.insight-lib .insight-cat:first-child{margin-top:8px}

/* ===== Article parallax hero (image behind title, scroll effect) ===== */
.art-hero{min-height:62vh;display:flex;align-items:center;justify-content:center;position:relative;padding:96px 0;background:#0C0F13}
.art-hero::after{content:none}
.art-hero .inner{position:relative;z-index:2;text-align:center;padding:0 22px;max-width:840px;margin:0 auto}
.art-hero .inner h1{color:#fff;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.16;margin:0;text-shadow:0 2px 22px rgba(0,0,0,.65)}
.art-hero .inner p{color:rgba(255,255,255,.9);font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.7;margin:16px auto 0;max-width:700px;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.art-body{position:relative;z-index:1;background:#fff}

/* ===== Shared "glass card" hero: matches About page (Services/Projects/Articles/Contact) ===== */
.svc-hero-section .inner,.ct-hero .inner,.ins-hero .inner{max-width:980px;width:100%}
.hero-glass-title{color:#fff;font-size:clamp(2.3rem,4.8vw,3.7rem);letter-spacing:-.03em;margin:0 auto;line-height:1.08}
.hero-glass-sub{color:rgba(255,255,255,.62);font-size:.9rem;margin-top:14px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.hero-glass-card{margin:24px auto 0;max-width:880px;background:rgba(18,22,28,.52);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:clamp(24px,3.4vw,40px);box-shadow:0 34px 90px -34px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08)}
.hero-glass-quote{font-family:'Merriweather',serif;font-size:clamp(1.18rem,2.2vw,1.7rem);line-height:1.45;color:#fff;font-style:italic;text-align:center;margin:0}
.hero-glass-quote span{color:var(--gold);font-style:normal}
.hero-glass-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,46px);text-align:left}
.hero-glass-grid p{color:rgba(255,255,255,.84);line-height:1.8;font-size:.96rem;margin:0}
.hero-glass-grid p+p{margin-top:14px}
@media(max-width:720px){.hero-glass-grid{grid-template-columns:1fr;gap:16px;text-align:center}}

/* ===== Professional article layout ===== */
.article-wrap{background:#fff;position:relative;z-index:1;padding:clamp(40px,6vw,70px) 0 44px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:11px;font-size:.83rem;color:var(--muted);margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.article-cat{background:rgba(245,138,30,.1);color:var(--gold-dark);border:1px solid rgba(245,138,30,.32);padding:5px 13px;border-radius:20px;font-weight:700;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase}
.am-sep{color:var(--border)}
.article-content{font-size:1.07rem;line-height:1.85;color:#343a42}
.article-content h2{font-family:'Merriweather',Georgia,serif;font-size:clamp(1.35rem,2.2vw,1.62rem);color:var(--navy);margin:40px 0 15px;line-height:1.3;letter-spacing:-.01em}
.article-content h2:first-child{margin-top:0}
.article-content h2::before{content:'';display:block;width:40px;height:3px;background:var(--grad-orange);border-radius:4px;margin-bottom:17px}
.article-content p{margin-bottom:17px}
.article-content ul{margin:0 0 19px;padding-left:0;list-style:none}
.article-content ul li{position:relative;padding-left:28px;margin-bottom:11px;color:#343a42}
.article-content ul li::before{content:'';position:absolute;left:2px;top:11px;width:7px;height:7px;background:var(--gold);border-radius:50%}
.article-content strong{color:var(--navy);font-weight:700}
.article-content em{color:var(--navy)}
.article-note{margin-top:36px;background:var(--bluegrey);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:12px;padding:16px 20px;font-size:.9rem;color:var(--muted);line-height:1.65;display:flex;gap:12px;align-items:flex-start}
.article-note svg{width:19px;height:19px;color:var(--gold-dark);flex-shrink:0;margin-top:2px}
.article-byline{margin-top:26px;padding-top:22px;border-top:1px solid var(--border);font-size:.92rem;color:var(--muted);display:flex;align-items:center;gap:12px}
.article-byline .ab-badge{width:38px;height:38px;border-radius:50%;background:var(--grad-orange);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Merriweather',serif;font-weight:700;font-size:.85rem;flex-shrink:0}
.article-byline strong{color:var(--navy)}
.article-related{padding:64px 0}
.article-related.curve-top{padding-top:96px}
.article-related .rel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rel-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s;box-shadow:var(--shadow-sm)}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(245,138,30,.4)}
.rel-card .rc-cat{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold-dark);margin-bottom:10px}
.rel-card h3{font-size:1.05rem;line-height:1.35;color:var(--navy);margin:0}
.rel-card .rc-more{margin-top:auto;padding-top:16px;color:var(--gold-dark);font-weight:600;font-size:.86rem}
@media(max-width:820px){.article-related .rel-cards{grid-template-columns:1fr}}

/* ===== Accessibility: skip link + visible focus ===== */
.skip-link{position:fixed;left:12px;top:-60px;z-index:3000;background:var(--navy,#171A1F);color:#fff;
  padding:10px 18px;border-radius:10px;font-weight:600;font-size:.9rem;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.35);transition:top .2s ease}
.skip-link:focus{top:10px;outline:3px solid var(--gold,#F58A1E);outline-offset:2px}
main:focus{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold,#F58A1E);outline-offset:2px;border-radius:4px}

/* Legibility safeguard for small text over the RICS video panel */
#rics .trust-block p{text-shadow:0 1px 3px rgba(0,0,0,.35)}

/* ===== Article breadcrumb + related-service link (SEO internal linking) ===== */
.art-hero .crumbs{margin-bottom:14px;position:relative;z-index:2}
.art-hero .crumbs span{color:rgba(255,255,255,.72)}
.article-service-link{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
  font-size:.95rem;color:var(--muted)}
.article-service-link a{color:var(--gold-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.article-service-link a:hover{color:var(--gold)}

/* ---- Short landscape viewports (phones turned sideways) ----
   Heroes sized in vh plus generous padding run to nearly two screens here, so the
   visitor scrolls a long way before reaching content. Tighten them at this shape only.
   Prefixed with `body` so these beat the per-page hero rules, which sit in later
   inline <style> blocks and would otherwise win on source order. */
@media (max-height:560px) and (orientation:landscape){
  body .soc-hero, body .pj-hero, body .about-hero-section, body .page-hero,
  body .art-hero, body .hero, body .svc-hero-section, body .ct-hero, body .ins-hero{
    min-height:0;padding:44px 0}
  body .soc-hero .inner, body .pj-hero .inner, body .about-hero-section .inner,
  body .svc-hero-section .inner{padding:16px 20px}
  body .about-hero-card{padding:18px 20px}
  body .about-hero-grid{gap:10px}
  body .hero-glass-title{margin-bottom:4px}
  body .sticky-bottom a{padding:7px 4px;font-size:.68rem}
  body .sticky-bottom svg{width:17px;height:17px}
}

/* Body copy reveals: shorter travel and a quicker transition than the card reveals, so a
   page of text does not feel like it is sliding around. */
.reveal.rv-text{transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.rv-text.in{transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-l,.reveal-r,.reveal-s,.stagger>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* Heading groups cascade line by line (eyebrow, then heading, then rule, then intro)
   instead of the whole block fading as one. Tighter delays than the card grids, so the
   lines follow each other closely rather than trickling in. */
.stagger.rv-head > *{transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stagger.rv-head.in > *{transform:none}
.stagger.rv-head.in > *:nth-child(1){transition-delay:0s}
.stagger.rv-head.in > *:nth-child(2){transition-delay:.08s}
.stagger.rv-head.in > *:nth-child(3){transition-delay:.16s}
.stagger.rv-head.in > *:nth-child(4){transition-delay:.24s}
.stagger.rv-head.in > *:nth-child(5){transition-delay:.32s}

/* ---- Accessible brand orange for small text on light backgrounds ----
   #F58A1E reads at 2.46:1 on white and #D9740F at 3.25:1, both under the 4.5:1 required
   for normal-size text. This darker tone gives 5.5:1 on white and 5.0:1 on the off-white
   panels while staying recognisably the same brand colour. It is applied only where orange
   is TEXT on a light surface: buttons, icons, borders, and anything on a dark panel keep
   the original vivid orange, and the dark-scoped rules (.hero .eyebrow, .eyebrow.on-navy)
   outrank this by specificity. */
:root{--gold-text:#A05600}
.more,
.proj-card .more, .card .more, .insight-card .more,
.proj-card:hover .more, .card:hover .more, .insight-card:hover .more,
.rc-more, .rc-cat,
.article-cat, .insight-cat,
.eyebrow{color:var(--gold-text)}
.eyebrow::before{background:var(--gold-text)}
.nav a.active, .nav a[aria-current="page"]{color:var(--gold-text)}

/* Remaining orange-on-light text: mega-menu links (they turn gold on hover and when the
   dropdown is open), emphasis inside prose, and the RICS badge sitting on its pale tint. */
.mega-item:hover, .mega-item:focus, .mega-item.active,
.mega-col a:hover, .mega-panel a:hover,
.article-body em, .art-body em, main em,
.rics-badge{color:var(--gold-text)}
.rics-badge{border-color:var(--gold-text)}

/* Project page related-service chips: gold text on a pale pill. */
.pj-tags a{color:var(--gold-text)}