/* =========================================================================
   TAG GROUP — Website Design System
   Palette: Warm Charcoal + Soft Gold on Ivory  |  Big4-grade professional services
   Author: Prepared for TAG Group (developer handoff)
   ========================================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand — Charcoal + Gold, warm & airy
     (token names are kept from earlier themes so every rule re-skins from here) */
  --charcoal-900: #1c1915;  /* warm charcoal — dark sections */
  --charcoal-800: #272219;
  --charcoal-700: #3a3328;
  --charcoal-600: #554c3c;
  --charcoal-500: #6e6452;
  --slate-400:    #8d8577;  /* warm grey — muted text */
  --slate-300:    #b8ae9c;
  --slate-200:    #ddd6c8;
  --mist-100:     #f2ede2;
  --mist-50:      #fbfaf6;  /* ivory */
  --white:        #ffffff;

  --emerald-700: #8a6a28;   /* deep gold */
  --emerald-600: #a8823a;   /* primary gold (softened) */
  --emerald-500: #bd9750;
  --emerald-400: #d1ae67;
  --emerald-300: #e4cd92;   /* light gold on dark */
  --emerald-glow: rgba(168, 130, 58, 0.13);

  --gold: #a8823a; /* secondary accent (same family) */

  /* Semantic */
  --bg:            var(--white);
  --bg-alt:        var(--mist-50);
  --bg-dark:       var(--charcoal-900);
  --bg-dark-2:     var(--charcoal-800);
  --text:          var(--charcoal-800);
  --text-muted:    var(--slate-400);
  --text-invert:   var(--white);
  --heading:       var(--charcoal-900);
  --accent:        var(--emerald-600);
  --accent-strong: var(--emerald-700);
  --border:        #ebe5d9;            /* warm hairline */
  --border-dark:   rgba(228,205,146,0.14);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;

  /* Layout */
  --maxw: 1200px;
  --maxw-wide: 1340px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(60,48,28,0.04), 0 2px 10px rgba(60,48,28,0.04);
  --shadow-md: 0 8px 28px rgba(60,48,28,0.07);
  --shadow-lg: 0 26px 64px rgba(60,48,28,0.12);
  --transition: 240ms cubic-bezier(.2,.6,.2,1);

  --header-h: 78px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { color: var(--heading); line-height: 1.15; margin: 0 0 .5em; font-weight: 650; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.12rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--maxw-wide); }
.section { padding-block: clamp(20px, 3vw, 42px); }
.section-sm { padding-block: clamp(12px, 2vw, 28px); }
.section-dark { background: var(--bg-dark); color: var(--slate-200); }
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4 { color: #fff; }
.section-alt { background: var(--bg-alt); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 720px; }
.measure-lg { max-width: 860px; }
.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.hide { display: none !important; }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; }
.section-dark .eyebrow { color: var(--emerald-300); }
.section-dark .eyebrow::before { background: var(--emerald-300); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--text-muted); }
.section-dark .lead { color: var(--slate-300); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: .98rem;
  border: 1px solid transparent; transition: var(--transition); white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--transition); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px var(--emerald-glow); }
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 12px 26px var(--emerald-glow); }
.btn-ghost { background: transparent; color: var(--heading); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-light { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.24); backdrop-filter: blur(6px); }
.btn-light:hover { background: #fff; color: var(--charcoal-900); border-color: #fff; }
.btn-white { background: #fff; color: var(--charcoal-900); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); }
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--transition); }
.link-arrow:hover svg { transform: translateX(4px); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition), background var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); gap: 14px;
}
.nav-links { display: flex; align-items: center; gap: 1px; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 11px; border-radius: 8px; font-weight: 550; font-size: .9rem; color: var(--charcoal-700);
  transition: var(--transition); white-space: nowrap;
}
@media (max-width: 1180px){ .nav-links > li > a { padding: 9px 9px; font-size: .86rem; } .logo-text small{letter-spacing:.24em;} }
.nav-links > li > a:hover, .nav-links > li > a.active { color: var(--accent); background: var(--emerald-glow); }
.nav-links .caret { width: 10px; height: 10px; opacity: .6; }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 320px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden; transition: var(--transition);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown.dropdown-wide { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dropdown a {
  display: block; padding: 11px 14px; border-radius: 9px; transition: var(--transition);
}
.dropdown a:hover { background: var(--mist-50); }
.dropdown a strong { display: block; font-weight: 600; font-size: .95rem; color: var(--heading); }
.dropdown a span { font-size: .82rem; color: var(--text-muted); }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: none; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--charcoal-800); margin: 5px 0; transition: var(--transition); border-radius: 2px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-img { height: 44px; width: auto; display: block; }
.site-footer .logo-img { height: 46px; }
@media (max-width: 560px){ .logo-img { height: 38px; } }
.logo-mark {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--charcoal-800), var(--charcoal-600));
  display: grid; place-items: center; position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.logo-mark span { font-family: var(--font-serif); font-weight: 600; color: #fff; font-size: 1.15rem; letter-spacing: .02em; z-index: 1; }
.logo-mark svg { width: 22px; height: 22px; color: var(--emerald-300); z-index: 1; position: relative; }
.logo-mark::after { content:""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, var(--emerald-400), transparent 60%); opacity: .55; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text b { font-family: var(--font-serif); font-size: 1.32rem; font-weight: 600; color: var(--charcoal-900); letter-spacing: .01em; white-space: nowrap; }
.logo { flex: none; }
@media (max-width: 1280px){ .logo-text b { font-size: 1.18rem; } .logo-img { height: 38px; } }
.logo-text small { font-size: .64rem; letter-spacing: .34em; text-transform: uppercase; color: var(--slate-400); margin-top: 5px; font-weight: 600; }
.site-footer .logo-text b { color: #fff; }

/* =========================================================================
   HERO SLIDER (home)
   ========================================================================= */
.hero {
  position: relative; min-height: min(90vh, 780px); display: grid; align-items: center;
  background: var(--charcoal-900); overflow: hidden; isolation: isolate;
}
/* Layered animated background: mesh gradient + drifting world map + moving sheen */
.hero-bg { position: absolute; inset: 0; z-index: -3; }
.hero-bg::before { /* mesh */
  content:""; position:absolute; inset:0;
  background: url("/assets/img/mesh-hero.svg") center/cover no-repeat, var(--charcoal-900);
}
.hero-bg::after { /* animated colour sheen */
  content:""; position:absolute; inset:-20%;
  background: radial-gradient(40% 50% at 20% 30%, rgba(176,132,47,.42), transparent 60%),
              radial-gradient(45% 55% at 80% 70%, rgba(138,99,32,.5), transparent 60%);
  animation: heroSheen 16s ease-in-out infinite alternate;
}
.hero-map {
  position: absolute; inset: 0; z-index: -2;
  background: url("/assets/img/world-hero.svg") center/cover no-repeat;
  opacity: .9; animation: heroDrift 40s linear infinite alternate;
}
.hero::after { /* left-to-right legibility scrim */
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(100deg, rgba(20,18,15,.95) 0%, rgba(20,18,15,.82) 40%, rgba(20,18,15,.34) 78%, rgba(20,18,15,.08) 100%);
}
@keyframes heroSheen { 0%{transform:translate(0,0)} 100%{transform:translate(3%,2%)} }
@keyframes heroDrift { 0%{transform:scale(1.05) translateX(0)} 100%{transform:scale(1.12) translateX(-3%)} }

.hero-slide { position: absolute; inset: 0; display: grid; align-items: center; opacity: 0; visibility: hidden; pointer-events: none; }
.hero-slide.active { opacity: 1; visibility: visible; pointer-events: auto; }
/* per-slide media: themed artwork + optional photo, with legibility scrim.
   Drop a file at assets/photos/hero/<name>.jpg and it replaces the artwork. */
.hero-media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-color: var(--charcoal-900);
  background-repeat: no-repeat; background-position: center right; background-size: cover;
  transform: scale(1.05); transition: transform 8s ease-out;
}
.hero-slide.active .hero-media { transform: scale(1); }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(28,25,21,.97) 0%, rgba(28,25,21,.90) 34%, rgba(28,25,21,.58) 62%, rgba(28,25,21,.30) 100%);
}
.hero-slide > .hero-content { position: relative; z-index: 3; }
@media (max-width: 860px){
  .hero-media::after { background: linear-gradient(120deg, rgba(28,25,21,.96) 0%, rgba(28,25,21,.90) 55%, rgba(28,25,21,.72) 100%); }
}
/* staged entrance animation for each element */
.hero-slide.active .hero-tag { animation: heroUp .6s .05s both; }
.hero-slide.active h1 { animation: heroUp .7s .16s both; }
.hero-slide.active .hero-sub { animation: heroUp .7s .28s both; }
.hero-slide.active .hero-actions { animation: heroUp .7s .4s both; }
@keyframes heroUp { from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }

.hero-content { position: relative; z-index: 2; padding-block: 40px; width: 100%; }
.hero-content .container { max-width: var(--maxw); }
.hero-tag {
  display: inline-flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 650;
  letter-spacing: .16em; text-transform: uppercase; color: var(--emerald-300);
  border: 1px solid rgba(227,200,126,.42); padding: 7px 16px; border-radius: 999px; margin-bottom: 22px;
  background: rgba(176,132,47,.16);
}
.hero-tag::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--emerald-300); box-shadow: 0 0 0 4px rgba(227,200,126,.28); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero h1 { color: #fff; max-width: 16ch; margin-bottom: 18px; font-size: clamp(2.3rem,5vw,3.7rem); }
.hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--emerald-300); }
.hero-sub { color: rgba(255,255,255,.84); font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 50ch; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-controls { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 3; }
.hero-controls .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero-dots { display: flex; gap: 10px; }
.hero-dots button {
  position: relative; width: 46px; height: 4px; border-radius: 4px; border: none;
  background: rgba(255,255,255,.24); transition: var(--transition); padding: 0; overflow: hidden;
}
.hero-dots button.active { width: 72px; background: rgba(255,255,255,.24); }
.hero-dots button.active::after { /* autoplay progress fill */
  content:""; position:absolute; inset:0; width:0; background: var(--emerald-400); border-radius:4px;
}
.hero-dots button.active.run::after { animation: dotFill var(--slide-ms,6500ms) linear forwards; }
@keyframes dotFill { from{width:0} to{width:100%} }
.hero-arrows { display: flex; gap: 10px; }
.hero-arrows button, .hero-pause {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; transition: var(--transition); backdrop-filter: blur(6px);
}
.hero-arrows button:hover, .hero-pause:hover { background: #fff; color: var(--charcoal-900); }
.hero-arrows svg, .hero-pause svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce){ .hero-bg::after,.hero-map{animation:none} .hero-slide.active *{animation:none} .hero-dots button.active.run::after{animation:none;width:100%} }

/* =========================================================================
   CARDS & COMPONENTS
   ========================================================================= */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; transition: var(--transition); height: 100%;
}
.card:hover { border-color: var(--slate-200); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card .card-icon {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 20px;
  background: var(--emerald-glow); color: var(--accent);
}
.card .card-icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.28rem; margin-bottom: 12px; }
.card p { color: var(--text-muted); font-size: .98rem; margin-bottom: 18px; }
.card .num { font-family: var(--font-serif); font-size: 1.1rem; color: var(--slate-300); font-weight: 600; }

/* Service card variant */
.svc-card { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.svc-card .kicker { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 650; margin-bottom: 14px; }
.svc-card ul.mini { margin: 4px 0 20px; }
.svc-card ul.mini li { font-size: .9rem; color: var(--text-muted); padding: 4px 0 4px 20px; position: relative; }
.svc-card ul.mini li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-400); }
.svc-card .link-arrow { margin-top: auto; }
.svc-card.flagship { background: linear-gradient(160deg, var(--charcoal-800), var(--charcoal-900)); border-color: var(--charcoal-700); color: var(--slate-200); }
.svc-card.flagship h3 { color: #fff; }
.svc-card.flagship .kicker { color: var(--emerald-300); }
.svc-card.flagship ul.mini li { color: var(--slate-300); }
.svc-card.flagship .card-icon { background: rgba(227,200,126,.16); color: var(--emerald-300); }

/* Careers sub-tabs + job list */
.subtabs { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255,255,255,.93); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.subtabs .container { display: flex; gap: 4px; overflow-x: auto; }
.subtabs a { padding: 15px 16px; font-weight: 600; font-size: .92rem; color: var(--charcoal-700); border-bottom: 2px solid transparent; white-space: nowrap; }
.subtabs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.section[id] { scroll-margin-top: calc(var(--header-h) + 56px); }
.joblist { display: flex; flex-direction: column; gap: 14px; }
.jobrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; transition: var(--transition); }
.jobrow:hover { border-color: var(--slate-200); box-shadow: var(--shadow-md); }
.jobrow h4 { margin-bottom: 4px; }
.jobrow .job-loc { font-size: .8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.jobrow .job-loc svg { width: 13px; height: 13px; }
.jobrow p { color: var(--text-muted); font-size: .92rem; margin: 8px 0 0; max-width: 62ch; }
.jobrow .btn { flex: none; }
@media (max-width: 640px){ .jobrow { flex-direction: column; align-items: flex-start; } .jobrow .btn { width: 100%; justify-content: center; } }

/* article body */
.article-body { max-width: 72ch; }
.article-body p { font-size: 1.06rem; color: var(--charcoal-700); margin-bottom: 1.25em; }
.article-body p:first-child { font-size: 1.2rem; color: var(--charcoal-600); }

/* section head with action on the right */
.split-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.split-head h2 { margin:0; }

/* insight / article cards */
.insight-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:var(--transition); height:100%; }
.insight-card:hover { border-color:var(--slate-200); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.ic-tag { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:650; color:var(--accent); margin-bottom:12px; }
.insight-card h3 { font-size:1.2rem; margin-bottom:10px; }
.insight-card p { color:var(--text-muted); font-size:.94rem; margin-bottom:16px; }
.insight-card .ic-meta { font-size:.8rem; color:var(--text-muted); margin-bottom:12px; }
.insight-card .link-arrow { margin-top:auto; }
.insight-card .ic-actions { margin-top:auto; display:flex; gap:14px; align-items:center; }

/* tab panels (Insights & Media / Careers use anchors; this is JS tab variant) */
.tabpanel { display:none; }
.tabpanel.active { display:block; }
.tabbar { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:8px; flex-wrap:wrap; }
.tabbar button { background:none; border:none; padding:14px 18px; font-family:inherit; font-weight:600; font-size:.98rem; color:var(--charcoal-700); border-bottom:2px solid transparent; cursor:pointer; transition:var(--transition); }
.tabbar button:hover { color:var(--accent); }
.tabbar button.active { color:var(--accent); border-bottom-color:var(--accent); }

/* Leadership quote cards */
.qcard { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:34px 30px 28px; display:flex; flex-direction:column; height:100%; transition:var(--transition); }
.qcard:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--slate-200); }
.qcard::before { content:"\201C"; position:absolute; top:10px; left:24px; font-family:var(--font-serif); font-size:4rem; line-height:1; color:var(--emerald-400); opacity:.35; }
.qcard p { color:var(--charcoal-700); font-size:1rem; position:relative; z-index:1; }
.qcard .qmeta { margin-top:auto; padding-top:18px; border-top:1px solid var(--border); }
.qcard .qmeta b { color:var(--heading); font-size:1.04rem; display:inline-block; }
.qcard .qmeta span { color:var(--text-muted); font-size:.86rem; display:block; margin-top:2px; }

/* Flagship banners (home, on dark) */
.flagbanner { display:flex; flex-direction:column; height:100%; background:rgba(255,255,255,.04); border:1px solid var(--border-dark); border-radius:var(--radius); padding:30px; transition:var(--transition); }
.flagbanner:hover { border-color:var(--emerald-400); background:rgba(255,255,255,.07); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.flagbanner .fb-icon { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:rgba(227,200,126,.14); color:var(--emerald-300); margin-bottom:18px; }
.flagbanner .fb-icon svg { width:27px; height:27px; }
.flagbanner .kicker { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--emerald-300); font-weight:650; margin-bottom:10px; }
.flagbanner h3 { color:#fff; margin-bottom:10px; font-size:1.3rem; }
.flagbanner p { color:var(--slate-300); font-size:.95rem; margin-bottom:16px; }
.flagbanner .chips { margin-bottom:20px; }
.flagbanner .link-arrow { margin-top:auto; color:var(--emerald-300); }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.section-dark .stats { background: var(--border-dark); border-color: var(--border-dark); }
.stat { background: #fff; padding: 30px 26px; text-align: center; }
.section-dark .stat { background: var(--charcoal-800); }
.stat .val { font-family: var(--font-serif); font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 600; color: var(--heading); line-height: 1; }
.section-dark .stat .val { color: #fff; }
.stat .val em { color: var(--accent); font-style: normal; }
.section-dark .stat .val em { color: var(--emerald-300); }
.stat .lbl { font-size: .82rem; color: var(--text-muted); margin-top: 12px; letter-spacing: .02em; }

/* Pillars / feature row */
.feature { display: flex; gap: 18px; align-items: flex-start; }
.feature .fx { flex: none; width: 46px; height: 46px; border-radius: 11px; background: var(--emerald-glow); color: var(--accent); display: grid; place-items: center; }
.feature .fx svg { width: 23px; height: 23px; }
.feature h4 { margin-bottom: 6px; }
.feature p { color: var(--text-muted); font-size: .95rem; margin: 0; }

/* Split section */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.split.reverse > :first-child { order: 2; }

/* Logo cloud / chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; font-size: .88rem; color: var(--charcoal-700); background: #fff; }
.section-dark .chip { border-color: var(--border-dark); color: var(--slate-200); background: rgba(255,255,255,.04); }
.chip.accent { border-color: var(--emerald-400); color: var(--accent); }

/* =========================================================================
   PAGE HERO (interior pages)
   ========================================================================= */
.page-hero {
  background: var(--charcoal-900); color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(52px, 7vw, 96px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: url("/assets/img/world-hero.svg") right center/cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}
.page-hero::after {
  content: ""; position: absolute; top: -120px; right: -80px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, var(--emerald-glow), transparent 70%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--emerald-300); }
.page-hero .eyebrow::before { background: var(--emerald-300); }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero p { color: rgba(255,255,255,.78); max-width: 62ch; font-size: clamp(1.02rem,1.5vw,1.2rem); }
.breadcrumb { display: flex; gap: 8px; font-size: .85rem; color: var(--slate-400); margin-bottom: 22px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--emerald-300); }
.breadcrumb span { color: var(--slate-300); }

/* =========================================================================
   SERVICE DETAIL PAGE
   ========================================================================= */
.svc-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.svc-layout > * { min-width: 0; }   /* prevent grid children from forcing overflow */
.side-card .btn { white-space: normal; text-align: left; line-height: 1.35; }
.side-card .pmini-info strong { overflow-wrap: anywhere; }
.svc-nav { position: sticky; top: calc(var(--header-h) + 24px); }
.svc-nav h5 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.svc-nav > a { display: block; padding: 9px 14px; border-radius: 8px; font-size: .92rem; color: var(--charcoal-700); border-left: 2px solid transparent; transition: var(--transition); }
.svc-nav > a:hover, .svc-nav > a.active { background: var(--mist-50); color: var(--accent); border-left-color: var(--accent); }
.svc-block { margin-bottom: 54px; scroll-margin-top: calc(var(--header-h) + 20px); }
.svc-block > h2 { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.svc-block > h2 .n { font-family: var(--font-serif); font-size: 1.1rem; color: var(--accent); border: 1px solid var(--emerald-400); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 600; }
.check-list { display: grid; gap: 12px; }
.check-list.two { grid-template-columns: 1fr 1fr; }
.check-list li { position: relative; padding-left: 32px; color: var(--charcoal-700); font-size: .98rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--emerald-glow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312805e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.phase-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 18px; }
.phase { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: relative; }
.phase .pn { font-family: var(--font-serif); font-size: 2rem; color: var(--emerald-300); font-weight: 600; line-height: 1; }
.phase .pn svg { width: 30px; height: 30px; color: var(--accent); }
.phase h4 { margin: 12px 0 8px; }
.phase p { font-size: .9rem; color: var(--text-muted); margin: 0; }
.callout {
  background: var(--mist-50); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 22px 26px; font-size: .95rem; color: var(--charcoal-700);
}
.deliverables { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 16px; }
.deliverable { display: flex; gap: 12px; align-items: flex-start; padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.deliverable svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 2px; }
.deliverable span { font-size: .92rem; }

/* Connected services */
.connected { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; }
.connected a { display: block; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: var(--transition); }
.connected a:hover { border-color: var(--accent); background: var(--mist-50); }
.connected a strong { display:block; color: var(--heading); font-size: 1rem; }
.connected a span { font-size: .84rem; color: var(--text-muted); }

/* =========================================================================
   PEOPLE / LEADERSHIP
   ========================================================================= */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 22px; margin-bottom: 64px; }
.people-grid.cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.people-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:1180px){ .people-grid.cols-5 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width:920px){ .people-grid.cols-5, .people-grid.cols-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:640px){ .people-grid.cols-5, .people-grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px } }
.person {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  transition: var(--transition); display: flex; flex-direction: column;
}
.person:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--emerald-300); }
/* Studio backdrop — identical to the headshot backdrop so monograms and photos read as one set */
.avatar {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 34%, #f0ebe2 0%, #ddd4c5 55%, #b8ac98 100%);
}
.person .avatar { aspect-ratio: 4 / 5; }
.avatar .initials {
  font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; letter-spacing: .04em;
  color: var(--charcoal-700); position: relative; padding-bottom: 14px;
}
.avatar .initials::after { content:""; position:absolute; left:50%; bottom:0; width:34px; height:2px; background: var(--emerald-600); transform: translateX(-50%); }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; z-index:1; transition: transform .6s ease; }
.person:hover .avatar img { transform: scale(1.035); }
.person .p-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.person .p-role { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 650; margin-bottom: 7px; line-height: 1.4; }
.person h3 { font-size: 1.14rem; margin-bottom: 4px; }
.person .p-title { font-size: .86rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.45; }
.person .link-arrow { margin-top: auto; font-size: .86rem; }
.person-soon .avatar { background: linear-gradient(150deg, var(--charcoal-800), var(--charcoal-700)); }
.person-soon .avatar .initials { color: #fff; }
.p-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.p-tags span { font-size: .74rem; padding: 4px 11px; background: var(--mist-50); border: 1px solid var(--border); border-radius: 999px; color: var(--charcoal-600); }
.p-meta { display: flex; gap: 16px; font-size: .86rem; color: var(--text-muted); margin: 18px 0 8px; flex-wrap: wrap; }
.p-meta a, .p-meta span { display:inline-flex; align-items:center; gap:6px; }
.p-meta svg { width:15px; height:15px; }
.p-meta a { color: var(--accent); }

.person-feature {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 0; margin-bottom: 64px;
  background: #fff; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.person-feature .pf-photo { aspect-ratio: 4 / 5; }
.person-feature .pf-body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.person-feature h2 { margin: 2px 0 6px; }
.person-feature .p-role { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 650; }
.person-feature .p-title { color: var(--text-muted); margin-bottom: 16px; }
.person-feature .pf-lead { font-size: 1.04rem; line-height: 1.7; color: var(--charcoal-700); margin-bottom: 18px; max-width: 62ch; }
@media (max-width:760px){ .person-feature { grid-template-columns: 1fr; } .person-feature .pf-photo { aspect-ratio: 1 / 1; } }

.group-label { display: flex; align-items: center; gap: 16px; margin: 8px 0 26px; }
.group-label h3 { margin: 0; white-space: nowrap; font-size: 1.15rem; letter-spacing: .01em; }
.group-label::after { content:""; height: 1px; background: var(--border); flex: 1; }

/* =========================================================================
   TERRITORY / INTERNATIONAL
   ========================================================================= */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 20px; }
.territory {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; background: #fff; transition: var(--transition); display: block;
}
.territory:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.territory .flagbox { font-size: 1.9rem; margin-bottom: 14px; }
.territory .badge { display: inline-block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.badge-local { background: var(--emerald-glow); color: var(--accent-strong); }
.badge-network { background: #eef1f7; color: #4a5a76; }
.territory h3 { font-size: 1.24rem; margin-bottom: 6px; }
.territory .t-person { font-size: .9rem; color: var(--text-muted); }
.territory .link-arrow { margin-top: 16px; font-size: .9rem; }

/* =========================================================================
   CTA band
   ========================================================================= */
.cta-band {
  background: linear-gradient(120deg, var(--emerald-700), var(--emerald-600));
  color: #fff; border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 68px);
  position: relative; overflow: hidden;
}
.cta-band::after { content:""; position: absolute; right: -60px; bottom: -80px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.08); }
.cta-band h2 { color: #fff; position: relative; z-index: 1; }
.cta-band p { color: rgba(255,255,255,.9); position: relative; z-index: 1; max-width: 54ch; }
.cta-band .hero-actions { position: relative; z-index: 1; margin-top: 26px; }
.cta-band .btn-white { color: var(--emerald-700); }
.cta-band .btn-light { border-color: rgba(255,255,255,.5); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: var(--charcoal-900); color: var(--slate-300); padding-block: 70px 34px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-top h5 { color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; font-weight: 650; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { color: var(--slate-300); font-size: .93rem; transition: var(--transition); }
.footer-links a:hover { color: var(--emerald-300); }
.footer-about p { font-size: .93rem; color: var(--slate-400); margin: 16px 0; max-width: 40ch; }
.footer-office { font-size: .88rem; color: var(--slate-400); margin-bottom: 16px; }
.footer-office strong { color: var(--slate-200); display: block; margin-bottom: 3px; font-weight: 600; }
.footer-bottom {
  margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--border-dark);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .82rem; color: var(--slate-400);
}
.footer-disclaimer { font-size: .76rem; color: var(--slate-500,#5a6874); line-height: 1.6; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-dark); }

/* =========================================================================
   MISC
   ========================================================================= */
.pill-row { display:flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.excl-note { display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color: var(--text-muted); background: var(--mist-50); border:1px dashed var(--border); border-radius: var(--radius-sm); padding: 14px 18px; }
.excl-note svg { width:18px;height:18px;color:var(--slate-400);flex:none;margin-top:2px; }
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* =========================================================================
   IMAGERY / FIGURES
   ========================================================================= */
.media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--charcoal-900); }
.media img { width: 100%; display: block; }
.media-dark { background: var(--charcoal-900); }
/* framed image panel used in split sections */
.img-panel { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; background: var(--charcoal-900) center/cover no-repeat; box-shadow: var(--shadow-lg); }
.img-panel.mesh { background-image: url("/assets/img/mesh-hero.svg"); }
.img-panel .overlay-map { position:absolute; inset:0; background: url("/assets/img/world-light.svg") center/cover no-repeat; opacity:.85; }
.img-panel .panel-caption { position:absolute; left:0; right:0; bottom:0; padding:24px 26px; color:#fff; z-index:2;
  background: linear-gradient(to top, rgba(20,18,15,.92), transparent); }
.img-panel .panel-caption strong { display:block; font-size:1.05rem; }
.img-panel .panel-caption span { font-size:.85rem; color: var(--slate-300); }
.img-panel .floats { position:absolute; inset:0; }
.img-panel .float-stat { position:absolute; background:rgba(255,255,255,.95); border-radius:12px; padding:12px 16px; box-shadow:var(--shadow-md); }
.img-panel .float-stat .v { font-family:var(--font-serif); font-weight:600; color:var(--accent); font-size:1.3rem; line-height:1; }
.img-panel .float-stat .l { font-size:.72rem; color:var(--text-muted); }

/* =========================================================================
   PHOTO SLOTS  — real <img> with duotone artwork fallback underneath.
   Drop a file at the img's src path and it takes over automatically.
   ========================================================================= */
.photo {
  position: relative; overflow: hidden; margin: 0;
  border-radius: var(--radius-lg);
  background-color: var(--charcoal-900);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: var(--shadow-md);
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: block; }
.photo.r32  { aspect-ratio: 3 / 2; }
.photo.r43  { aspect-ratio: 4 / 3; }
.photo.r11  { aspect-ratio: 1 / 1; }
.photo.r169 { aspect-ratio: 16 / 9; }
.photo.r219 { aspect-ratio: 21 / 9; }
.photo.r45  { aspect-ratio: 4 / 5; }
.photo .ph-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 26px;
  color: #fff; background: linear-gradient(to top, rgba(28,25,21,.92), rgba(28,25,21,.5) 55%, transparent);
}
.photo .ph-cap strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.photo .ph-cap span { font-size: .86rem; color: var(--slate-300); }
.photo-frame { position: relative; }
.photo-frame::after { /* thin gold rule offset behind, editorial touch */
  content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--emerald-400);
  opacity: .35; border-radius: var(--radius-lg); z-index: -1;
}
@media (max-width: 860px){ .photo-frame::after { inset: 12px -12px -12px 12px; } }

/* headshot slot inside the existing monogram avatar */
.person .avatar img, .prof-av img, .pmini-av img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; display: block;
}
.pmini-av { position: relative; overflow: hidden; }
.prof-av { overflow: hidden; }

/* facts strip (home 'at a glance', airy light version) */
.factstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.factstrip .fs { background: #fff; padding: 26px 24px; }
.factstrip .fs .fs-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--emerald-glow); color: var(--accent); display: grid; place-items: center; margin-bottom: 12px; }
.factstrip .fs .fs-ic svg { width: 20px; height: 20px; }
.factstrip .fs b { display: block; font-family: var(--font-serif); font-size: 1.28rem; color: var(--heading); font-weight: 600; }
.factstrip .fs span { font-size: .84rem; color: var(--text-muted); display: block; margin-top: 3px; }
@media (max-width: 860px){ .factstrip { grid-template-columns: 1fr 1fr; } }

/* photo grid (Life at TAG) */
.photogrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.photogrid .photo:first-child { grid-row: span 2; aspect-ratio: auto; min-height: 340px; }
@media (max-width: 860px){ .photogrid { grid-template-columns: 1fr 1fr; } .photogrid .photo:first-child { grid-row: auto; min-height: 220px; } }

/* thumbnail on insight cards */
.insight-card .ic-thumb { display: block; margin: -28px -28px 20px; border-radius: var(--radius) var(--radius) 0 0; box-shadow: none; }

/* structured fact panel (home 'at a glance') */
.factpanel { position:relative; overflow:hidden; background:linear-gradient(160deg,var(--charcoal-800),var(--charcoal-900)); border:1px solid var(--charcoal-700); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); height:100%; }
.factpanel .band-img { position:absolute; inset:0; background-size:cover; background-position:center; }
.fp-body { position:relative; z-index:1; padding:clamp(26px,4vw,38px); }
.fp-body h3 { color:#fff; margin-bottom:22px; font-size:clamp(1.35rem,2vw,1.6rem); }
.factgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:22px; }
.fact { background:rgba(255,255,255,.05); border:1px solid var(--border-dark); border-radius:var(--radius-sm); padding:16px 16px 14px; }
.fact .card-icon { width:38px; height:38px; border-radius:10px; margin-bottom:10px; background:rgba(227,200,126,.14); color:var(--emerald-300); display:grid; place-items:center; }
.fact .card-icon svg { width:20px; height:20px; }
.fact b { display:block; color:#fff; font-size:1.05rem; font-family:var(--font-serif); font-weight:600; }
.fact span { font-size:.79rem; color:var(--slate-300); line-height:1.4; display:block; margin-top:2px; }
.fp-note { color:var(--slate-300); font-size:.9rem; margin-bottom:16px; }
@media (max-width:560px){ .factgrid{ grid-template-columns:1fr 1fr; } }

/* full-width visual band (skyline etc.) */
.band-visual { position: relative; background: var(--charcoal-900); overflow: hidden; }
.band-visual .band-img { position:absolute; inset:0; background-position:center bottom; background-size:cover; background-repeat:no-repeat; opacity:.55; }
.band-visual .container { position: relative; z-index: 1; }

/* small inline art beside headings / cards */
.art-tile { border-radius: var(--radius); overflow:hidden; border:1px solid var(--border-dark); background: var(--charcoal-900); }
.art-tile img { width:100%; display:block; }

/* section with subtle dot pattern */
.section-pattern { background-color: var(--bg-alt); background-image: url("/assets/img/dots.svg"); }

/* =========================================================================
   PROFILE PAGES
   ========================================================================= */
.prof-head { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.prof-av {
  width: 100px; height: 100px; border-radius: 22px; flex: none; display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 2.3rem; font-weight: 600; color: #fff;
  background: linear-gradient(150deg, var(--charcoal-700), var(--charcoal-500));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); position: relative; overflow: hidden;
}
.prof-av::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 70% 20%, var(--emerald-glow), transparent 60%); }
.side-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; background: var(--mist-50); }
.side-card h5 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.side-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.side-actions .btn { width: 100%; justify-content: flex-start; font-size: .88rem; padding: 12px 16px; }
.side-actions .btn svg { width: 15px; height: 15px; }
.xp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 34px; }
.xp-col h4 { color: var(--accent); margin-bottom: 12px; }
.timeline { border-left: 2px solid var(--border); padding-left: 26px; display: flex; flex-direction: column; gap: 24px; }
.tl-item { position: relative; }
.tl-item::before { content:""; position:absolute; left:-33px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--emerald-glow); }
.tl-period { font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); font-weight:650; margin-bottom:4px; }
.tl-body strong { display:block; color:var(--heading); font-size:1.02rem; }
.tl-body p { color:var(--text-muted); font-size:.94rem; margin:5px 0 0; }

/* partner mini-cards (service sidebar / india-entry) */
.pmini { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; transition:var(--transition); background:#fff; }
.pmini:hover { border-color:var(--accent); background:var(--mist-50); transform:translateY(-1px); }
.pmini-av { width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center; font-family:var(--font-serif); font-weight:600; color:#fff; font-size:.95rem; background:linear-gradient(150deg,var(--charcoal-700),var(--charcoal-500)); }
.pmini-info { flex:1; display:flex; flex-direction:column; line-height:1.25; }
.pmini-info strong { font-size:.92rem; color:var(--heading); }
.pmini-info span { font-size:.78rem; color:var(--text-muted); }
.pmini > svg { width:15px; height:15px; color:var(--accent); flex:none; }
.side-card .pmini:last-of-type { margin-bottom:0; }
.side-card .lead-note { font-size:.8rem; color:var(--text-muted); margin:2px 0 12px; }

/* =========================================================================
   PROCESS PICTORIAL (India Entry)
   ========================================================================= */
.process { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pstep { position:relative; padding:26px 20px 22px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; transition:var(--transition); }
.pstep:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--slate-200); }
.pstep .pico { width:56px; height:56px; border-radius:15px; margin-bottom:14px; display:grid; place-items:center; background:var(--emerald-glow); color:var(--accent); }
.pstep .pico svg { width:28px; height:28px; }
.pstep .pnum { position:absolute; top:16px; right:18px; font-family:var(--font-serif); font-weight:600; color:var(--slate-200); font-size:1.3rem; line-height:1; }
.pstep h4 { font-size:1.02rem; margin-bottom:6px; }
.pstep p { font-size:.86rem; color:var(--text-muted); margin:0; }
.pstep .who { margin-top:10px; font-size:.74rem; color:var(--accent); font-weight:600; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .g-4 { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
  .svc-layout { grid-template-columns: 1fr; }
  .svc-nav { position: static; }
  .svc-nav > h5, .svc-nav > a { display: none; }   /* hide quick-links, keep side-card CTA */
  .side-card { margin-top: 0 !important; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: repeat(2,1fr); }
}
/* collapse the desktop nav to the drawer before it can crowd the CTAs */
@media (max-width: 1200px) { .nl-btn { display: none; } }
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu { display: block; }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu { display: block; }
  .split { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .g-3 { grid-template-columns: 1fr; }
  .check-list.two { grid-template-columns: 1fr; }
  .hero-arrows { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .g-2, .g-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .hero-content { padding-block: 24px; }
}

/* =========================================================================
   NEWSLETTER MODAL
   ========================================================================= */
.nl-btn { padding: 11px 16px; font-size: .88rem; }
.nl-btn svg { width: 16px; height: 16px; }
@media (max-width: 1180px){ .nl-btn span { display: none; } }
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(28,25,21,.62); backdrop-filter: blur(3px); }
.modal-card {
  position: relative; z-index: 1; width: min(620px, 100%); max-height: min(88vh, 860px); overflow-y: auto;
  background: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--shadow-lg); animation: modalIn .28s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-card h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: 10px; }
.modal-lead { color: var(--text-muted); font-size: .96rem; margin-bottom: 22px; }
.modal-x {
  position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--charcoal-600);
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center; transition: var(--transition);
}
.modal-x:hover { background: var(--mist-50); color: var(--accent); border-color: var(--accent); }
.req { color: var(--accent); }
.nl-choices { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 18px; }
.nl-choices legend { font-size: .82rem; font-weight: 650; color: var(--charcoal-700); padding: 0 6px; }
/* NOTE: prefixed with .contact-form to out-specify the generic form rules below */
.contact-form .nl-c,
.contact-form .nl-consent { display: flex; align-items: flex-start; gap: 11px; font-weight: 400; cursor: pointer; }
.contact-form .nl-c { padding: 9px 0; }
.contact-form .nl-consent { margin-top: 18px; }
.contact-form .nl-c input,
.contact-form .nl-consent input {
  width: 18px; height: 18px; min-width: 18px; margin: 2px 0 0; padding: 0;
  flex: 0 0 auto; accent-color: var(--accent); border-radius: 4px;
}
.contact-form .nl-c span { display: flex; flex-direction: column; line-height: 1.35; }
.contact-form .nl-c strong { font-size: .93rem; color: var(--heading); font-weight: 600; }
.contact-form .nl-c em { font-style: normal; font-size: .74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 1px; }
.contact-form .nl-consent span { font-size: .84rem; color: var(--text-muted); line-height: 1.5; }
.nl-note { font-size: .76rem; color: var(--text-muted); margin-top: 14px; }
body.modal-open { overflow: hidden; }

/* Contact form */
.contact-form label { display: block; font-size: .86rem; font-weight: 600; color: var(--charcoal-700); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; margin-top: 7px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .96rem; font-weight: 400; color: var(--text); background: #fff; transition: var(--transition);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--emerald-glow);
}
.contact-form textarea { resize: vertical; }

/* Mobile menu drawer */
.mobile-menu {
  display: none; position: fixed; inset: var(--header-h) 0 0; background: #fff; z-index: 99;
  overflow-y: auto; padding: 24px var(--gutter) 60px; transform: translateX(100%); transition: transform var(--transition); visibility: hidden;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mobile-menu details { border-bottom: 1px solid var(--border); }
.mobile-menu summary { padding: 16px 4px; font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none; display:flex; justify-content: space-between; align-items:center; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.mobile-menu summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; }
.mobile-menu details[open] summary::after { content: "\2212"; }
.mobile-menu .m-sub a { display: block; padding: 10px 14px; color: var(--charcoal-600); font-size: .95rem; }
.mobile-menu > a { display:block; padding: 16px 4px; font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid var(--border); }
.mobile-menu .btn { margin-top: 26px; width: 100%; justify-content: center; }

/* =========================================================================
   CLIENT LOGOS — sliding marquee + static grid
   ========================================================================= */
.logo-band{padding:56px 0}
.logo-band .lb-head{text-align:center;max-width:720px;margin:0 auto 34px}
.logo-marquee{position:relative;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;align-items:center;gap:18px;width:max-content;
  animation:logo-marquee 46s linear infinite}
.logo-marquee:hover .logo-track,.logo-marquee:focus-within .logo-track{animation-play-state:paused}
@keyframes logo-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.logo-marquee + .logo-marquee{margin-top:18px}
.logo-marquee.rev .logo-track{animation-direction:reverse}

.logo-item{position:relative;flex:0 0 auto;width:184px;height:92px;display:flex;
  align-items:center;justify-content:center;padding:14px 18px;box-sizing:border-box;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 1px 2px rgba(60,48,28,.05);transition:.28s ease}
.logo-item:hover{transform:translateY(-3px);border-color:var(--emerald-300);
  box-shadow:0 10px 24px rgba(60,48,28,.10)}
.logo-item > span{font-family:var(--font-display,inherit);font-weight:600;font-size:.86rem;
  line-height:1.25;letter-spacing:.01em;color:var(--charcoal-700);text-align:center}
.logo-item > img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);
  object-fit:contain;background:#fff;opacity:.94;transition:.28s ease}
.logo-item:hover > img{opacity:1;transform:scale(1.03)}
.logo-item.has-logo > span{display:none}

.section-alt .logo-item,.section-alt .logo-item > img{background:#fff}
.section-dark .logo-item{background:rgba(255,255,255,.96)}

.logo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:34px}
@media (max-width:1100px){.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logo-grid .logo-item{width:100%;height:84px}
  .logo-track .logo-item{width:150px;height:78px}
  .logo-track{gap:12px}}
@media (max-width:460px){.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.logo-grid .logo-item{width:auto}
.logo-note{margin-top:22px;text-align:center;font-size:.86rem;color:var(--slate-400)}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
  .logo-track > .logo-item:nth-child(n+19){display:none}
}
.pmini-sep{display:block;margin:14px 0 6px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-400)}

/* Studio backdrop for small avatars too — photos and monograms match */
.prof-av, .pmini-av { background: radial-gradient(120% 90% at 50% 34%, #f0ebe2 0%, #ddd4c5 55%, #b8ac98 100%); color: var(--charcoal-700); box-shadow: inset 0 0 0 1px rgba(60,48,28,.08); }
.prof-av::after { display:none; }
.prof-av img, .pmini-av img { object-position: 50% 22%; }
.person-feature .pf-photo { aspect-ratio: auto; min-height: 440px; height: 100%; }
@media (max-width:760px){ .person-feature .pf-photo { min-height: 0; aspect-ratio: 1 / 1; } }
/* Larger portrait on profile pages */
.prof-head { gap: clamp(22px, 3.4vw, 44px); align-items: flex-end; }
.prof-av { width: clamp(132px, 15vw, 196px); height: auto; aspect-ratio: 4 / 5; border-radius: 18px; font-size: clamp(2.2rem, 3.4vw, 3rem);
  box-shadow: 0 0 0 1px rgba(228,205,146,.35), 0 18px 40px rgba(0,0,0,.35); }
/* Quantity-aware grids: never leave a single orphan card on the last row */
.phase-grid:has(> :nth-child(4):last-child),
.connected:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); }
.connected:has(> :nth-child(5):last-child) .connected-card:nth-child(n+4) { }
@media (max-width:600px){ .phase-grid:has(> :nth-child(4):last-child), .connected:has(> :nth-child(4):last-child){ grid-template-columns:1fr; } }
/* Contact: office list */
.office-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.office-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm, 12px); }
.office-card .oc-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--emerald-glow, #f4ecdb); color: var(--accent); }
.office-card .oc-ic svg { width: 18px; height: 18px; }
.office-card h4 { font-size: 1rem; margin: 2px 0 6px; }
.office-card h4 em { font-style: normal; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-left: 6px; font-weight: 650; }
.office-card p { font-size: .86rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
@media (max-width: 560px) { .office-list { grid-template-columns: 1fr; } }
.split.top { align-items: start; }

/* Inner-page hero artwork (service-themed, fades in from the right) */
.page-hero.has-art::before { display: none; }
.page-hero .ph-art {
  position: absolute; inset: 0 0 0 34%; background-size: cover; background-position: right center; opacity: .9;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 30%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 30%, #000 70%);
}
@media (max-width: 760px) { .page-hero .ph-art { inset: 0; opacity: .28; } }
/* Home — global reach desk tiles (dark glass) */
.desk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.desk-tile { display: flex; align-items: center; gap: 14px; padding: 20px 18px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(228,205,146,.18); backdrop-filter: blur(4px); transition: .25s ease; min-width: 0; }
.desk-tile:hover { background: rgba(255,255,255,.09); border-color: var(--emerald-300); transform: translateY(-2px); }
.desk-tile .dt-flag { font-size: 1.7rem; line-height: 1; flex: none; }
.desk-tile .dt-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.desk-tile .dt-txt b { color: #fff; font-size: 1.02rem; font-weight: 600; }
.desk-tile .dt-txt em { font-style: normal; color: rgba(255,255,255,.62); font-size: .82rem; margin-top: 2px; }
.desk-tile .dt-tag { flex: none; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 650; color: var(--emerald-300); border: 1px solid rgba(228,205,146,.4); padding: 3px 9px; border-radius: 999px; }
.desk-tile.soon { border-style: dashed; }
@media (max-width: 520px) { .desk-tiles { grid-template-columns: 1fr; } }
/* Insights: four articles → one row on desktop, 2×2 on tablet */
.grid.g-3:has(> .insight-card:nth-child(4):last-child), .grid.g-3:has(> .acard:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) { .grid.g-3:has(> .insight-card:nth-child(4):last-child), .grid.g-3:has(> .acard:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .grid.g-3:has(> .insight-card:nth-child(4):last-child), .grid.g-3:has(> .acard:nth-child(4):last-child) { grid-template-columns: 1fr; } }
.desk-tile { position: relative; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
.desk-tile .dt-tag { position: absolute; top: 16px; right: 16px; }
.desk-tile .dt-txt b { font-size: 1.06rem; line-height: 1.3; padding-right: 54px; }
/* Stats rows size to their count — no empty cells */
.stats:has(> .stat:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stats:has(> .stat:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stats .val em { font-style: normal; }
.stat .val { overflow-wrap: anywhere; }
@media (max-width: 600px) { .stats:has(> .stat:nth-child(3):last-child) { grid-template-columns: 1fr; } }

/* =========================================================================
   RESPONSIVE LAYER — phones & tablets
   Kept last so it wins the cascade. Breakpoints:
   ≤1024 tablet (drawer nav, single-column detail pages) · ≤860 large phone / small tablet
   ≤560 phone
   ========================================================================= */

/* Forms never trigger iOS zoom-on-focus */
input, select, textarea { font-size: 16px !important; }

/* Hero dots: big invisible hit area, thin visible bar */
.hero-dots button {
  height: 28px; overflow: visible; border-radius: 0;
  background: linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,.26)) center / 100% 4px no-repeat;
}
.hero-dots button.active { background: linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,.26)) center / 100% 4px no-repeat; }
.hero-dots button.active::after { inset: auto 0 auto 0; top: 50%; height: 4px; margin-top: -2px; }

/* Phone/tablet: jump chips hidden on desktop */
.jump-chips { display: none; }
.m-actions { display: none; }
.m-contact { display: none; }

@media (max-width: 1024px) {
  /* Drawer navigation (was blocked by cascade order + header backdrop-filter) */
  .mobile-menu { display: block; inset: auto 0 0 0; top: var(--header-h); padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .site-header.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .mobile-menu > a, .mobile-menu summary { min-height: 52px; display: flex; align-items: center; }
  .mobile-menu .m-sub a { padding: 12px 14px; min-height: 44px; display: flex; align-items: center; }
  .m-contact { display: grid; gap: 4px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
  .m-contact a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--charcoal-700); font-size: .95rem; }
  .m-contact svg { width: 18px; height: 18px; color: var(--accent); }

  /* Detail pages: content first, jump chips on top, partner cards after content */
  .svc-layout { display: flex; flex-direction: column; gap: 0; }
  .svc-layout > .jump-chips { order: 0; }
  .svc-layout > :not(.svc-nav):not(.jump-chips) { order: 1; }
  .svc-layout > .svc-nav { order: 2; position: static; margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
  .svc-nav > h5, .svc-nav > a { display: none; }
  .svc-nav .side-card { margin: 0 !important; }
  .jump-chips {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    position: sticky; top: var(--header-h); z-index: 30; margin: -8px calc(-1 * var(--gutter)) 26px;
    padding: 12px var(--gutter); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border);
    scroll-snap-type: x proximity;
  }
  .jump-chips::-webkit-scrollbar { display: none; }
  .jump-chips a {
    flex: none; scroll-snap-align: start; white-space: nowrap; font-size: .86rem; font-weight: 550;
    padding: 9px 15px; min-height: 40px; display: inline-flex; align-items: center;
    border: 1px solid var(--border); border-radius: 999px; color: var(--charcoal-700); background: #fff;
  }
  .jump-chips a.active { background: var(--charcoal-800); border-color: var(--charcoal-800); color: #fff; }
  .svc-block { scroll-margin-top: calc(var(--header-h) + 76px); }

  /* Tablet grids */
  .process { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}

@media (max-width: 860px) {
  /* Quick-action bar */
  .m-actions {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(28,25,21,.97); border-top: 1px solid rgba(228,205,146,.22);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); backdrop-filter: blur(10px);
    transition: transform .3s ease;
  }
  .m-actions a, .m-actions button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px;
    color: rgba(255,255,255,.86); font: 600 .72rem/1 var(--font-sans, inherit); letter-spacing: .04em;
    background: none; border: 0; border-radius: 12px; cursor: pointer;
  }
  .m-actions svg { width: 20px; height: 20px; }
  .m-actions .m-primary { background: var(--emerald-600); color: #fff; margin: 4px; }
  body.menu-open .m-actions, body.modal-open .m-actions { transform: translateY(110%); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  /* Readable labels (min 12px) */
  .kicker, .p-role, .ic-tag, .who, .dt-tag, .side-card h5, .pmini-sep, .eyebrow, .person-feature .p-role { font-size: 12px !important; }
  .p-tags span, .chip { font-size: 12.5px; }

  /* Comfortable touch targets */
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 40px; }
  .breadcrumb { margin-bottom: 10px; align-items: center; }
  .link-arrow { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-office a { display: inline-flex; min-height: 40px; align-items: center; }
  .logo { min-height: 44px; }

  /* Two-column content lists collapse */
  .xp-grid { grid-template-columns: 1fr; gap: 22px; }

  /* Hero on phones: leave room for controls, smaller dots */
  .hero-dots { gap: 6px; }
  .hero-dots button { width: 22px; }
  .hero-dots button.active { width: 42px; }

  /* Careers life grid: lead image full width, then 2×2 */
  .photogrid .photo:first-child { grid-column: 1 / -1; }

  /* CTA bands breathe less */
  .cta-band { padding: 34px 24px; border-radius: 20px; }
  .cta-band h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .cta-band .hero-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  :root { --header-h: 66px; }
  .nav { height: var(--header-h); }
  .section { padding-block: clamp(32px, 9vw, 48px); }
  .page-hero { padding-block: 40px 44px; }
  .page-hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  /* Footer: brand full width, link columns side by side, offices full width */
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > :first-child, .footer-top > :last-child { grid-column: 1 / -1; }
  .footer-disclaimer { font-size: 11.5px; line-height: 1.6; }
  /* Service page scope lists, stats */
  .check-list.two { grid-template-columns: 1fr; }
  .svc-block > h2 { font-size: 1.45rem; gap: 12px; }
  .svc-block > h2 .n { width: 32px; height: 32px; font-size: .95rem; }
  .process { grid-template-columns: 1fr; }
  .modal-card { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 26px 20px; }
}

/* Touch devices: no sticky hover lifts */
@media (hover: none) {
  .person:hover, .card:hover, .insight-card:hover, .desk-tile:hover, .pmini:hover, .logo-item:hover { transform: none; }
  .person:hover .avatar img { transform: none; }
}
/* India Entry steps on phones: compact row cards joined by a timeline rail */
@media (max-width: 560px) {
  .process { gap: 12px; position: relative; }
  .pstep { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; padding: 16px 16px 16px 14px; }
  .pstep .pico { width: 48px; height: 48px; border-radius: 13px; margin: 0; grid-row: 1 / span 3; }
  .pstep .pico svg { width: 24px; height: 24px; }
  .pstep h4, .pstep p, .pstep .who { grid-column: 2; }
  .pstep h4 { padding-right: 34px; }
  .pstep .pnum { top: 14px; right: 14px; font-size: 1.05rem; }
}
/* Fixes found under real mobile emulation */
@media (max-width: 1024px) {
  .svc-layout { align-items: stretch; }
  .svc-layout > * { width: 100%; max-width: 100%; }
  /* Closed drawer must not widen the page: fade/slide instead of parking it off-canvas */
  .mobile-menu { transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
  .mobile-menu.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .25s ease, transform .25s ease; }
}
.logo-marquee { max-width: 100%; }

/* ---- Tablet refinements (561–1024) ---- */
.deliverables:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (min-width: 901px) and (max-width: 1024px) { .process { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 760px) { .deliverables:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .deliverables:has(> :nth-child(6):last-child) { grid-template-columns: 1fr; } }

@media (min-width: 561px) and (max-width: 860px) {
  /* Header keeps its Enquire button on tablets; the bottom bar is for phones */
  .nav-cta .btn-primary { display: inline-flex; padding: 10px 18px; }
  .m-actions { display: none; }
  body { padding-bottom: 0; }
  /* Six-card grids go 2-up rather than a long single column */
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-3:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
  /* Three-item lists become horizontal cards */
  .g-3:has(> .insight-card:nth-child(3):last-child) .insight-card { display: grid; grid-template-columns: 38% 1fr; column-gap: 22px; align-content: start; }
  .g-3:has(> .insight-card:nth-child(3):last-child) .insight-card > .ic-thumb { grid-row: 1 / span 6; margin: -28px 0 -28px -28px; border-radius: var(--radius) 0 0 var(--radius); height: calc(100% + 56px); aspect-ratio: auto; min-height: 200px; }
  .g-3:has(> .insight-card:nth-child(3):last-child) .insight-card > :not(.ic-thumb) { grid-column: 2; }
  .g-3:has(> .flagbanner:nth-child(3):last-child) { grid-template-columns: 1fr; }
  .g-3:has(> .qcard:nth-child(3):last-child) { grid-template-columns: 1fr; }
}
@media (max-width: 860px) { .split.reverse > :has(> .desk-tiles) { order: 2; } }
@media (max-width: 860px) {
  .m-actions a, .m-actions button { font-size: 12px; }
  .tl-period, .office-card h4 em, .territory .badge, .badge { font-size: 12px !important; }
  .hero-dots button { height: 40px; width: 26px; }
  .hero-dots button.active { width: 44px; }
  .hero-dots { gap: 4px; }
}
/* Hero: never shorter than its content on small or landscape screens */
@media (max-width: 560px) { .hero { min-height: max(600px, 86svh); } .hero-content { padding-block: 28px 76px; } }
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 540px; }
  .hero h1 { font-size: clamp(1.8rem, 4.2vw, 2.4rem); margin-bottom: 10px; }
  .hero-sub { font-size: .95rem; margin-bottom: 14px; }
  .hero-content { padding-block: 24px 80px; }
  .mobile-menu { padding-top: 12px; }
}
@media (max-width: 400px) { .hero { min-height: max(650px, 86svh); } }

/* Justify text in partner profiles */
.profile-page .svc-block p:not(.cta-band p) {
  text-align: justify;
}

/* ============================================================
   CMS CONTENT — Blog / Insight rich text rendering
   ============================================================ */
.cms-content {
  font-size: 1.0625rem;
  line-height: 1.82;
  color: var(--text);
  max-width: 72ch;
}

/* Headings */
.cms-content h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.25; margin: 2.2rem 0 .9rem; color: var(--text-dark); }
.cms-content h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 700; line-height: 1.3; margin: 2rem 0 .75rem; color: var(--text-dark); border-bottom: 2px solid var(--primary); padding-bottom: .35rem; }
.cms-content h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700; line-height: 1.35; margin: 1.75rem 0 .6rem; color: var(--text-dark); }
.cms-content h4 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--text-dark); }

/* Paragraphs */
.cms-content p { margin: 0 0 1.2rem; }
.cms-content p:last-child { margin-bottom: 0; }

/* Links */
.cms-content a, .cms-content .cms-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  transition: color .15s;
}
.cms-content a:hover, .cms-content .cms-link:hover { color: color-mix(in srgb, var(--primary) 70%, #000); }

/* Lists */
.cms-content ul, .cms-content ol { margin: 0 0 1.2rem 1.5rem; padding: 0; }
.cms-content ul { list-style: disc; }
.cms-content ol { list-style: decimal; }
.cms-content li { margin-bottom: .45rem; }
.cms-content li > ul, .cms-content li > ol { margin-top: .35rem; margin-bottom: 0; }

/* Blockquote */
.cms-content blockquote {
  margin: 1.8rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, #fff);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--text);
}
.cms-content blockquote p { margin: 0; }
.cms-content blockquote p + p { margin-top: .75rem; }

/* Inline code */
.cms-content code {
  font-family: "Fira Code", "Cascadia Code", ui-monospace, monospace;
  font-size: .875em;
  background: #f1f5f9;
  color: #c7254e;
  padding: .15em .45em;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

/* Code block */
.cms-content pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-family: "Fira Code", "Cascadia Code", ui-monospace, monospace;
  font-size: .875rem;
  line-height: 1.65;
}
.cms-content pre code {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  border-radius: 0;
}

/* Horizontal rule */
.cms-content hr {
  border: none;
  border-top: 2px solid #f1f5f9;
  margin: 2.5rem 0;
}

/* Images */
.cms-content img, .cms-content .cms-img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin: 1.75rem auto;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
}

/* Tables */
.cms-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8rem 0;
  font-size: .9rem;
}
.cms-content th {
  background: #f8fafc;
  font-weight: 700;
  text-align: left;
  padding: .65rem 1rem;
  border-bottom: 2px solid #e4e8ee;
  color: var(--text-dark);
}
.cms-content td {
  padding: .6rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  color: var(--text);
  vertical-align: top;
}
.cms-content tr:last-child td { border-bottom: none; }
.cms-content tr:hover td { background: #f8fafc; }

/* Strong / em */
.cms-content strong { font-weight: 700; color: var(--text-dark); }
.cms-content em { font-style: italic; }
.cms-content u { text-decoration: underline; text-underline-offset: 2px; }
.cms-content s { text-decoration: line-through; color: #94a3b8; }

/* ============================================================
   Tiptap editor area styles (admin only)
   ============================================================ */
.cms-editor-area h1 { font-size: 1.9rem; font-weight: 800; margin: 1.5rem 0 .6rem; }
.cms-editor-area h2 { font-size: 1.45rem; font-weight: 700; margin: 1.4rem 0 .5rem; border-bottom: 2px solid #e4e8ee; padding-bottom: .3rem; }
.cms-editor-area h3 { font-size: 1.2rem; font-weight: 700; margin: 1.2rem 0 .4rem; }
.cms-editor-area h4 { font-size: 1rem; font-weight: 700; margin: 1rem 0 .35rem; }
.cms-editor-area p { margin-bottom: 1rem; }
.cms-editor-area ul { list-style: disc; margin: 0 0 1rem 1.5rem; }
.cms-editor-area ol { list-style: decimal; margin: 0 0 1rem 1.5rem; }
.cms-editor-area li { margin-bottom: .35rem; }
.cms-editor-area blockquote { border-left: 4px solid #c9a84c; padding: .75rem 1rem; background: #fffdf0; margin: 1.25rem 0; border-radius: 0 6px 6px 0; font-style: italic; }
.cms-editor-area code { font-family: monospace; background: #f1f5f9; color: #c7254e; padding: .1em .4em; border-radius: 4px; font-size: .875em; }
.cms-editor-area pre { background: #0f172a; color: #e2e8f0; padding: 1rem 1.25rem; border-radius: 8px; overflow-x: auto; font-family: monospace; font-size: .875rem; margin: 1rem 0; }
.cms-editor-area pre code { background: none; color: inherit; padding: 0; }
.cms-editor-area hr { border: none; border-top: 2px solid #e4e8ee; margin: 1.75rem 0; }
.cms-editor-area img { max-width: 100%; border-radius: 8px; display: block; margin: 1rem auto; }
.cms-editor-area a { color: #c9a84c; text-decoration: underline; }
.cms-editor-area strong { font-weight: 700; }
.cms-editor-area .is-editor-empty:first-child::before { content: attr(data-placeholder); color: #9aa5b4; float: left; pointer-events: none; height: 0; }