/* ==========================================================================
   Bob & Co Cambodia — complete design system.

   Derived from the client-confirmed mockup (design-source/BobCo_Cambodia_
   Website_Mockup.html) and documented in design-dna-cambodia.html.

   This is a STANDALONE stylesheet. The Cambodia site no longer loads the
   parent Bob & Co styles.css — this is a different design language, not a
   variation on it.

   Three rules carry the character:
     1. Headings sit at weight 500, never bold.
     2. Sections are divided by hairline rules, never tinted blocks.
     3. No shadows anywhere, except the gold halo on the major route node.
   ========================================================================== */

:root{
  --navy:#132A4C;
  --navy-deep:#0B1D33;
  --paper:#EFF2EF;
  --card:#FFFFFF;
  --gold:#AC8A54;
  --gold-deep:#7E6234;   /* gold is 3.1:1 on paper — use this when gold sets text */
  --sage:#2F5B4E;
  --ink:#1B2024;
  --sub:#5B6460;
  --line:#D7DAD2;

  --serif:'Fraunces',Georgia,serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',monospace;

  --measure:1080px;
  --gutter:40px;
  --topbar-h:44px;   /* header sticks directly beneath the utility strip */
}

*{box-sizing:border-box;margin:0;padding:0;}

/* Anchors must clear both sticky bars. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:140px;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;height:auto;}

a{color:var(--navy);text-decoration:none;}

/* Hover colour is ground-dependent. gold-deep reads well on paper (5.05:1) but
   collapses to 2.52:1 on navy; gold is the reverse — 2.86:1 on paper, 5.27:1 on
   navy-deep. So light grounds get the dark gold, dark grounds get the light one. */
a:hover{color:var(--gold-deep);}

/* navy-deep grounds: gold is 5.27:1 here, so it passes. */
.site-footer a:hover,
.topbar a:hover{color:var(--gold);}

/* mid-navy grounds: gold drops to 4.45:1, under AA for body text — use white. */
.page-cta a:hover,
.contact-section a:hover,
.page-section--dark a:hover,
.statement-card a:hover{color:#fff;}

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy);color:#fff;padding:12px 20px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.skip-link:focus{left:8px;top:8px;color:#fff;}

/* --------------------------------------------------------------- layout */

.container{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);}

section{padding:64px 0;}

.page-section,
.section,
.focus-section,
.stats-section,
.statement-section,
.industries-section,
.resources-section,
.service-list-section,
.why-section,
.service-overview,
.contact-page-section{
  border-top:1px solid var(--line);
}

/* Tinted-block variants from the parent system become flat paper or navy —
   the mockup has no pastel sections. */
.page-section--mist{background:var(--card);}
.page-section--dark,
.contact-section{background:var(--navy);color:#fff;}

/* --------------------------------------------------- headings & eyebrows */

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--navy);line-height:1.2;}
h1{font-size:46px;line-height:1.15;letter-spacing:-.01em;}
h2{font-size:30px;}
h3{font-size:20px;}
h4{font-size:16px;}

p{color:var(--sub);}

.eyebrow{
  display:block;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--gold-deep);text-transform:uppercase;margin-bottom:10px;
}
.eyebrow--light{color:var(--gold);}

.section-heading{margin-bottom:40px;max-width:680px;}
.section-heading p{margin-top:16px;}

.section-heading--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;max-width:none;flex-wrap:wrap;
}
.section-heading--split > div{max-width:640px;}
.section-heading--split p{max-width:340px;margin-top:0;}

.page-section--dark h1,.page-section--dark h2,.page-section--dark h3,
.contact-section h1,.contact-section h2,.contact-section h3{color:#fff;}
.page-section--dark p,.contact-section p{color:rgba(255,255,255,.78);}

/* Italic serif asides — the voice device of this system. */
.quiet-link,
.focus-section__footer small,
.form-note{font-size:13.5px;}

/* ---------------------------------------------------------------- topbar */
/* Utility strip. Navy-deep matches the footer so the page is bracketed by the
   same dark tone. Gold on navy-deep is 5.27:1 — safe for text, unlike gold on
   paper. Everything here is mono uppercase: it is labelling, not prose. */

.topbar{
  background:var(--navy-deep);color:rgba(255,255,255,.72);
  position:sticky;top:0;z-index:101;
}

.topbar__inner{
  max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);
  min-height:44px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.topbar__locations{display:flex;align-items:center;gap:32px;flex-wrap:wrap;}

.topbar__email{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:rgba(255,255,255,.82);
}
.topbar__email:hover{color:#fff;}
.topbar__email svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}

.topbar__regions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}

.topbar__label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);
}

.topbar__regions a{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.topbar__regions a:hover{color:#fff;}
.topbar__regions a.is-current{color:var(--gold);border-bottom-color:var(--gold);}

.topbar__social{display:flex;align-items:center;gap:8px;}
.topbar__social a,
.topbar__social button{
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;color:rgba(255,255,255,.72);cursor:pointer;
}
.topbar__social a:hover,
.topbar__social button:hover{
  background:var(--gold);border-color:var(--gold);color:var(--navy-deep);
}
.topbar__social svg{width:14px;height:14px;fill:currentColor;}
.topbar__social svg.stroke{
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ------------------------------------------------------------ nav/header */

.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;top:var(--topbar-h);z-index:100;
}

.header-inner{
  max-width:var(--measure);margin:0 auto;
  padding:22px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* align-items must be flex-start: a column flex container stretches its
   children by default, which was squashing the footer logo to the full
   column width at a fixed height. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.brand--header img{width:auto;height:38px;display:block;object-fit:contain;}
.brand-tag{font-size:11px;color:var(--sub);letter-spacing:.04em;}

.brand-mark{
  width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;font-size:15px;color:var(--navy);
  flex-shrink:0;
}
.brand-name{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--navy);letter-spacing:.01em;line-height:1.1;}

.desktop-nav{display:flex;align-items:center;gap:36px;font-size:14px;}
.desktop-nav > a,
.nav-dropdown > summary{color:var(--sub);cursor:pointer;}
.desktop-nav > a:hover,
.nav-dropdown > summary:hover{color:var(--navy);}
.desktop-nav > a.is-current{color:var(--navy);font-weight:500;}

.nav-dropdown{position:relative;}
.nav-dropdown > summary{list-style:none;display:flex;align-items:center;gap:6px;}
.nav-dropdown > summary::-webkit-details-marker{display:none;}
.nav-dropdown > summary::after{
  content:"";width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.nav-dropdown[open] > summary::after{transform:translateY(1px) rotate(-135deg);}
.nav-dropdown__panel{
  position:absolute;top:calc(100% + 14px);left:-16px;z-index:120;
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:8px;min-width:290px;display:flex;flex-direction:column;
}
.nav-dropdown__panel a{
  padding:9px 12px;font-size:13.5px;color:var(--ink);border-radius:3px;
}
.nav-dropdown__panel a:hover{background:var(--paper);color:var(--navy);}

.nav-cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);border:1px solid var(--navy);border-radius:20px;padding:8px 16px;
}
.nav-cta:hover{background:var(--navy);color:#fff;}

.mobile-menu{display:none;}
.mobile-menu > summary{
  list-style:none;cursor:pointer;width:34px;height:34px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
}
.mobile-menu > summary::-webkit-details-marker{display:none;}
.mobile-menu > summary span{display:block;height:1.5px;background:var(--navy);}
.mobile-menu nav{
  position:absolute;left:0;right:0;top:100%;
  background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px var(--gutter) 22px;display:flex;flex-direction:column;gap:2px;
}
.mobile-menu nav a{padding:11px 0;font-size:15px;border-bottom:1px solid var(--line);}
.mobile-submenu > summary{
  list-style:none;cursor:pointer;padding:11px 0;font-size:15px;
  border-bottom:1px solid var(--line);color:var(--navy);
}
.mobile-submenu > summary::-webkit-details-marker{display:none;}
.mobile-submenu div{display:flex;flex-direction:column;padding-left:16px;}
.mobile-menu .nav-cta{align-self:flex-start;margin-top:16px;border-bottom:none;}

/* ------------------------------------------------------------------ hero */

.hero{padding:70px 0 30px;}
.hero__intro{max-width:var(--measure);}
.hero h1{max-width:700px;}
.hero__intro > p{font-size:17px;max-width:610px;margin-top:22px;}
/* Italic serif pull-quote under the hero headline — the voice device. */
.hero-line{
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;
  color:var(--navy);margin-top:20px;
}

.hero__actions{display:flex;align-items:center;gap:26px;margin-top:30px;flex-wrap:wrap;}

.inner-hero{padding:64px 0 56px;border-bottom:1px solid var(--line);}
.inner-hero__layout{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;}
.inner-hero__intro{position:relative;padding-top:6px;}
.inner-hero__intro p{font-size:16.5px;}
.inner-hero__number{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--gold-deep);margin-bottom:12px;
}

/* --------------------------------------------------- route motif (signature) */

.route{display:flex;align-items:flex-start;justify-content:center;margin:56px 0 14px;}
.node{display:flex;flex-direction:column;align-items:center;gap:10px;width:120px;}
.dot{width:13px;height:13px;border-radius:50%;background:var(--navy);}
.node.major .dot{
  width:22px;height:22px;background:var(--gold);
  box-shadow:0 0 0 5px rgba(172,138,84,.15);
}
.node-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--sub);text-transform:uppercase;text-align:center;
}
.node.major .node-label{color:var(--navy);font-weight:500;}
.connector{height:1px;background:var(--line);flex:1;margin-top:6px;max-width:130px;}

.foot-route{margin-top:48px;opacity:.55;}
.foot-route .dot{background:var(--gold);}
.foot-route .connector{background:rgba(255,255,255,.2);}
.foot-route .node-label{color:rgba(255,255,255,.55);}
.foot-route .node.major .node-label{color:#fff;}

/* ------------------------------------------------------------------ cards */

/* Pastel cards from the parent system become white with hairline borders. */
.featured-services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.featured-card{
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:30px;display:flex;flex-direction:column;
}
.featured-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;}
.featured-card__top small,
.service-list__number,
.directory-card > span{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gold-deep);
}
.featured-card h2{font-size:22px;margin-bottom:10px;}
.featured-card p{font-size:14.5px;flex:1;}
.featured-card > a,
.resource-card__link,
.quiet-link{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);margin-top:20px;display:inline-block;
}
.featured-card > a:hover,.quiet-link:hover{color:var(--gold-deep);}

.service-icon,
.service-list__icon,
.resource-card__icon{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.service-icon svg,.service-list__icon svg,.resource-card__icon svg{
  width:18px;height:18px;fill:none;stroke:var(--navy);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

.service-directory{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.directory-card{
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:30px;display:block;position:relative;
}
.directory-card:hover{border-color:var(--gold);}
.directory-card h2{font-size:21px;margin:10px 0;}
.directory-card p{font-size:14.5px;}
.directory-card i{
  font-style:normal;position:absolute;top:26px;right:28px;color:var(--gold);font-size:15px;
}
/* The parent tint modifiers no longer carry colour — the top rule does. */
.directory-card--sand{border-top:2px solid var(--gold);}
.directory-card--mint{border-top:2px solid var(--sage);}
.directory-card--sky{border-top:2px solid var(--navy);}

/* Single real partner (Aspire), not a wall of logos. The eight stock logos that
   were briefly here are theme-demo placeholders — see optimise_assets.py. */
.partners-section .section-heading{margin-bottom:32px;}
.partner-card{
  display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:4px;padding:36px;
}
.partner-card__logo{
  display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--paper);border-radius:4px;
}
.partner-card__logo img{display:block;width:100%;height:auto;max-width:200px;}
.partner-card h3{margin:8px 0 12px;}
.partner-card p{font-size:14.5px;}
.partner-card__note{
  margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--gold-deep);
}

/* Regional map — live Google Maps embed of the Cambodia office. */
.regional-map{
  margin:0 0 40px;
  background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.regional-map iframe{display:block;width:100%;height:360px;border:0;}
.regional-map figcaption{
  padding:14px 20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sub);
}

/* Directional panels — the mockup's core consulting component. */
.resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.resource-card{
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:32px;display:block;
}
.resource-card:hover{border-color:var(--gold);}
.resource-card small{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--gold-deep);text-transform:uppercase;margin-bottom:16px;
}
.resource-card h3{margin:14px 0 8px;}
.resource-card p{font-size:14.5px;}
.resource-card--blue{border-top:2px solid var(--sage);}

/* --------------------------------------------------------------- stats */

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.stats-grid > div{border-top:2px solid var(--gold);padding-top:20px;}
.stats-grid strong{
  display:block;font-family:var(--serif);font-weight:500;font-size:40px;
  color:var(--navy);line-height:1;
}
.stats-grid span{
  display:block;margin-top:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--sub);text-transform:uppercase;
}

/* ------------------------------------------------- statement / price card */

.statement-section{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;
  max-width:var(--measure);margin:0 auto;padding:64px var(--gutter);
}
.statement-section__intro h2{margin-top:4px;}
.statement-section__intro p{margin-top:16px;}

.statement-card{
  background:var(--navy);color:#fff;border-radius:6px;padding:44px;position:relative;
}
.statement-card__mark{
  font-family:var(--serif);font-size:56px;line-height:1;color:var(--gold);
  display:block;margin-bottom:10px;
}
.statement-card p{
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:21px;color:#fff;
}
.statement-card footer{
  display:flex;align-items:center;gap:16px;margin-top:30px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.15);
}
.avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;color:var(--gold);
}
.statement-card footer strong{display:block;font-size:14.5px;color:var(--gold);font-weight:600;}
.statement-card footer small{display:block;font-size:13px;color:rgba(255,255,255,.7);margin-top:2px;}

/* --------------------------------------- feature / principle / why grids */

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}

.feature-grid article,
.principle-grid article{padding-top:20px;border-top:2px solid var(--gold);}
.feature-grid article > span,
.principle-grid article > span{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gold-deep);
}
.feature-grid h3,
.principle-grid h3{font-size:16px;font-weight:600;font-family:var(--sans);margin:8px 0;}
.feature-grid p,
.principle-grid p{font-size:14px;}

.split-copy{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
.split-copy p + p{margin-top:14px;}

.focus-section__inner{max-width:720px;}
.focus-section__inner h2{margin-top:4px;}
.focus-section__inner > p{margin-top:16px;}
.focus-section__footer{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap;
}
.focus-section__footer small{
  font-family:var(--serif);font-style:italic;font-size:16px;color:var(--navy);
}

/* --------------------------------------------------------- service lists */

.service-list{display:flex;flex-direction:column;}
.service-list > a{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:20px;align-items:center;
  padding:22px 0;border-top:1px solid var(--line);
}
.service-list > a:hover{background:var(--card);}
.service-list > a:last-child{border-bottom:1px solid var(--line);}
.service-list strong{display:block;font-size:16px;color:var(--navy);font-weight:600;}
.service-list small{display:block;font-size:14px;color:var(--sub);margin-top:3px;}
.service-list i{font-style:normal;color:var(--gold);}

.service-overview__lead{max-width:680px;margin-bottom:40px;}
.service-overview__lead h2{margin-top:4px;}
.service-overview__lead p{margin:16px 0 24px;}

.service-groups{display:grid;grid-template-columns:1fr;gap:24px;}
.service-group{
  background:var(--card);border:1px solid var(--line);border-radius:4px;padding:32px;
}
.service-group h2{font-size:20px;margin-bottom:20px;}
.service-group ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;}
.service-group li{
  padding:14px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink);
  display:flex;gap:12px;align-items:baseline;
}
.service-group li span[aria-hidden]{color:var(--gold);flex-shrink:0;}
.service-group li strong{font-weight:500;color:var(--ink);}

/* ------------------------------------------------------------------ pills */

.industries-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
.industry-pills{display:flex;flex-wrap:wrap;gap:10px;}
.industry-pills span{
  border:1px solid var(--line);border-radius:20px;padding:7px 15px;
  font-size:13px;color:var(--ink);background:var(--card);
}
.industry-pills--dark span{
  border-color:rgba(255,255,255,.25);background:transparent;color:rgba(255,255,255,.88);
}

/* ------------------------------------------------------------- team card */

.team-grid{display:grid;gap:24px;}
.team-grid--single{grid-template-columns:1fr;}
.team-card{background:var(--card);border:1px solid var(--line);border-radius:4px;}
.team-card--portrait{
  display:grid;grid-template-columns:minmax(260px,380px) 1fr;overflow:hidden;
}
.team-card--portrait > div{padding:48px;align-self:center;}
.team-card__photo{width:100%;height:100%;object-fit:cover;object-position:center top;background:var(--line);}
.team-card small{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--gold-deep);text-transform:uppercase;margin-bottom:8px;
}
.team-card h3{font-size:24px;margin-bottom:14px;}
.team-card p{font-size:14.5px;}
.team-card p + p{margin-top:12px;}

/* --------------------------------------------------------------- contact */

.contact-section{padding:64px 0;}
.contact-layout,
.contact-page-layout{
  max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
}
.contact-copy h2{margin-top:4px;}
.contact-copy > p{margin-top:16px;}
.contact-copy dl{margin-top:32px;display:flex;flex-direction:column;gap:20px;}
.contact-copy dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--gold);text-transform:uppercase;margin-bottom:5px;
}
.contact-copy dd{font-size:15px;color:rgba(255,255,255,.9);line-height:1.7;}
.contact-copy dd a{color:#fff;}
.contact-copy dd a:hover{color:var(--gold);}

.contact-details{display:flex;flex-direction:column;gap:16px;}
.contact-detail-card{
  background:var(--card);border:1px solid var(--line);border-radius:4px;padding:22px 24px;
}
.contact-detail-card dt,
.contact-detail-card .label{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--gold-deep);text-transform:uppercase;margin-bottom:6px;
}

.contact-map{
  border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--card);
}
.contact-map iframe{display:block;width:100%;height:320px;border:0;}
.contact-map > a{
  display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border-top:1px solid var(--line);
}

/* form */
.contact-form{
  background:var(--card);border:1px solid var(--line);border-radius:6px;padding:36px;
}
.contact-form__heading{margin-bottom:26px;}
.contact-form__heading h3{margin-top:4px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.contact-form label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--sub);text-transform:uppercase;margin-bottom:18px;
}
.form-grid label{margin-bottom:0;}
.contact-form input,
.contact-form textarea{
  display:block;width:100%;margin-top:7px;
  font-family:var(--sans);font-size:15px;color:var(--ink);text-transform:none;letter-spacing:normal;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:11px 13px;
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--navy);outline:none;}
.contact-form textarea{resize:vertical;min-height:120px;}
.form-note{
  margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--sub);
}

/* ------------------------------------------------------------------- CTA */

.page-cta{background:var(--navy);color:#fff;padding:56px 0;}
.page-cta .container{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.page-cta h2{color:#fff;max-width:560px;}

/* --------------------------------------------------------------- buttons */

.button{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--navy);border-radius:20px;padding:11px 22px;
  color:var(--navy);background:transparent;cursor:pointer;
}
.button:hover{background:var(--navy);color:#fff;}
.button--dark{background:var(--navy);color:#fff;}
.button--dark:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff;}
.button--signal{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);}
.button--signal:hover{background:#fff;border-color:#fff;color:var(--navy);}
.page-cta .button{border-color:rgba(255,255,255,.4);color:#fff;}
.page-cta .button:hover{background:#fff;color:var(--navy);border-color:#fff;}

/* ---------------------------------------------------------------- footer */

.site-footer{background:var(--navy-deep);color:#fff;padding:60px 0 40px;}
.footer-main{
  max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;
}
.footer-brand p{font-size:14px;color:rgba(255,255,255,.7);margin-top:16px;max-width:280px;}
/* Real white artwork from the brand library — no invert filter needed.
   Explicit width keeps the 600x222 ratio intact regardless of flex context. */
.brand--footer img{height:44px;width:119px;display:block;object-fit:contain;flex:0 0 auto;}
.footer-column h2{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  color:var(--gold);text-transform:uppercase;margin-bottom:16px;
}
.footer-column a,
.footer-column address{
  display:block;font-size:14px;color:rgba(255,255,255,.72);
  font-style:normal;line-height:1.75;margin-bottom:8px;
}
.footer-column a:hover{color:#fff;}
.social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;margin-top:20px;
  border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);
}
.social-link:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);}
.social-link svg{width:17px;height:17px;fill:currentColor;}
.footer-bottom{
  max-width:var(--measure);margin:44px auto 0;padding:22px var(--gutter) 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer-bottom p{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.5);
}

/* ----------------------------------------------------------- placeholder */

.tbc{
  display:inline-block;padding:.12em .5em;border:1px dashed var(--gold);
  border-radius:3px;background:#FBF6EC;color:var(--gold-deep);
  font-family:var(--mono);font-size:.86em;font-style:normal;
}
.tbc::before{content:"TBC: ";font-weight:500;}
.site-footer .tbc,.contact-copy .tbc{
  border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#F0D9A8;
}

/* --------------------------------------------------------------- responsive */

@media (max-width:1000px){
  .footer-main{grid-template-columns:1fr 1fr;gap:36px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .featured-services,.feature-grid,.principle-grid{grid-template-columns:repeat(2,1fr);}
  .inner-hero__layout,.split-copy,.industries-layout,.statement-section{grid-template-columns:1fr;gap:32px;}
  .service-group ul{grid-template-columns:1fr;}
}

@media (max-width:800px){
  :root{--gutter:22px;}
  h1{font-size:32px;}
  h2{font-size:25px;}
  .desktop-nav{display:none;}
  .mobile-menu{display:block;}
  .site-header{position:relative;}
  .featured-services,.feature-grid,.principle-grid,
  .service-directory,.resource-grid,
  .contact-layout,.contact-page-layout,.form-grid{grid-template-columns:1fr;}
  .team-card--portrait{grid-template-columns:1fr;}
  .team-card--portrait > div{padding:30px 24px 36px;}
  .team-card__photo{aspect-ratio:4/5;max-height:600px;}
  .route{flex-wrap:wrap;gap:14px;}
  .connector{display:none;}
  .service-list > a{grid-template-columns:auto 1fr;gap:14px;}
  .service-list__icon{display:none;}
  .section-heading--split{flex-direction:column;align-items:flex-start;}
  .footer-bottom{flex-direction:column;gap:10px;}

  /* Topbar: the email is the least useful item on a phone (the footer and
     contact page both carry it), so it goes first and the regions stay. */
  :root{--topbar-h:38px;}
  .topbar__inner{min-height:0;padding-top:9px;padding-bottom:9px;gap:12px;}
  .topbar__email{display:none;}
  .topbar__locations{gap:16px;}
  .topbar__regions{gap:14px;}
  .topbar__label{display:none;}
}

@media (max-width:520px){
  /* The strip stacks here, so its height is no longer predictable — let it
     scroll away and stick the header alone at the top. */
  .topbar{position:static;}
  .site-header{top:0;}
  .topbar__inner{flex-direction:column;align-items:flex-start;gap:10px;}
  .topbar__social{align-self:flex-start;}
}

@media (max-width:560px){
  .stats-grid,.footer-main{grid-template-columns:1fr;}
  .statement-card,.contact-form,.service-group,.team-card--portrait > div{padding:26px 22px;}
  .contact-map iframe{height:240px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
}

@media print{
  .site-header,.site-footer,.skip-link,.page-cta,.contact-form{display:none!important;}
  body{background:#fff;}
  .tbc{border-color:#999;background:transparent;}
}