:root{--ink:#18252f;--navy:#17364b;--forest:#275c47;--moss:#71866f;--ivory:#eee9df;--sand:#e4ddd1;--paper:#f8f5ef;--line:#ddd9cf;--blue:#2d7188;--green:#2f7d52}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;border-bottom:1px solid rgba(24,37,47,.09);position:sticky;top:0;background:rgba(252,251,248,.95);backdrop-filter:blur(12px);z-index:10}.brand img{width:185px;height:auto;display:block}nav{display:flex;gap:30px}nav a{font-size:11px;font-weight:700;letter-spacing:1.45px;color:var(--ink);text-decoration:none}section{padding:104px 8vw}.eyebrow,.section-kicker{font-size:11px;letter-spacing:2.2px;color:var(--forest);font-weight:800}.hero{min-height:710px;display:grid;grid-template-columns:1.18fr .82fr;gap:6vw;align-items:center;background:linear-gradient(110deg,var(--paper) 0 67%,var(--ivory) 67%)}.hero h1{font-size:68px;line-height:1.01;letter-spacing:-2.6px;color:var(--ink);margin:22px 0 28px;max-width:900px}.hero h1 em{font-style:normal;color:var(--forest)}.lead{font-size:20px;line-height:1.65;max-width:760px;color:#48565f}.lead b{color:var(--ink)}.buttons{margin-top:38px;display:flex;align-items:center;gap:28px}.btn{background:var(--ink);color:#fff;text-decoration:none;padding:15px 22px;border-radius:2px;font-size:13px;font-weight:700}.textlink{color:var(--forest);font-weight:700;text-decoration:none;font-size:13px}.brand-story{border-left:1px solid var(--line);padding:36px 0 36px 48px}.brand-story .compass-mark{font-size:78px;color:var(--forest);line-height:1}.brand-story b{display:block;margin-top:26px;font-size:22px;line-height:1.35;color:var(--ink);letter-spacing:.02em}.brand-story p{font-size:15px;line-height:1.7;color:#657078;max-width:360px}.intro{background:var(--ivory)}h2{font-size:48px;line-height:1.12;letter-spacing:-1.3px;color:var(--ink);margin:14px 0 44px}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:70px;font-size:18px;line-height:1.75}.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:58px}.principles div{border-top:2px solid var(--forest);padding:20px 4px}.principles b,.cards span{color:var(--forest);font-size:11px;letter-spacing:1.4px}.principles h3,.cards h3{color:var(--ink);font-size:21px;margin:12px 0}.principles p{color:#5e686e;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards article{background:#fff;border:1px solid var(--line);padding:30px;min-height:250px;transition:.2s}.cards article:hover{transform:translateY(-3px);border-color:#aab3aa;box-shadow:0 16px 40px rgba(24,37,47,.06)}.cards h3{font-size:23px}.cards p,.cross p{line-height:1.65;color:#5b676d}.cards article:nth-child(1),.cards article:nth-child(4){border-top:3px solid var(--forest)}.cards article:nth-child(2),.cards article:nth-child(5){border-top:3px solid var(--navy)}.cards article:nth-child(3){border-top:3px solid var(--moss)}.cross{background:var(--ink);color:#fff}.cross .section-kicker{color:#b8c7b7}.cross h2,.cross h3{color:#fff}.crossgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.crossgrid div{border-top:1px solid #6e8177;padding-top:20px}.crossgrid p{color:#c9d0d2}.work{background:#eeece5}.approach-lead{font-size:18px;color:#5e686e;max-width:780px;margin:-22px 0 44px}.process{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:18px;align-items:start}.process b{color:var(--forest);font-size:12px;letter-spacing:1px}.process p{line-height:1.6}.placeholder{min-height:390px;background:var(--paper)}.contact{display:grid;grid-template-columns:1.3fr .7fr;background:var(--ivory);align-items:end}.contact h2{margin-bottom:0}.contact>div:last-child{border-left:1px solid #b9b7ae;padding-left:34px}.contact a{color:var(--forest);font-weight:700;text-decoration:none}.contact .mail{font-size:20px;margin:8px 0 24px}footer{padding:30px 8vw;background:#101a21;color:#dce1e3;font-size:11px;letter-spacing:1.2px}@media(max-width:900px){nav{display:none}.brand img{width:155px}.hero{grid-template-columns:1fr;min-height:auto;background:var(--paper)}.hero h1{font-size:46px;letter-spacing:-1.5px}.brand-story{border-left:0;border-top:1px solid var(--line);padding:38px 0 0}.twocol,.cards,.principles,.crossgrid,.contact{grid-template-columns:1fr}.process{grid-template-columns:1fr}.process>div:nth-child(even){display:none}h2{font-size:36px}section{padding:72px 7vw}}
.header-right{display:flex;align-items:center;gap:28px}.lang-switch{display:flex;align-items:center;border-left:1px solid var(--line);padding-left:20px;gap:3px}.lang-switch button{appearance:none;border:0;background:transparent;color:#6b7479;font:700 10px/1 Arial,sans-serif;letter-spacing:1px;padding:8px 7px;cursor:pointer}.lang-switch button.active{color:var(--forest);background:#eef0e9;border-radius:2px}.contact{align-items:center}.contact-details{border-left:1px solid #b9b7ae!important;padding-left:34px!important;display:grid;gap:24px}.contact-row{display:grid;gap:6px}.contact-label{font-size:10px;line-height:1.2;letter-spacing:1.7px;font-weight:800;color:#6d746f}.contact-value{font-size:17px!important;line-height:1.35;font-weight:600!important;color:var(--ink)!important;text-decoration:none}.contact-value.motto{font-size:14px!important;font-weight:500!important;letter-spacing:.5px;color:var(--forest)!important}.contact .mail{font-size:inherit;margin:0}@media(max-width:900px){.header-right nav{display:none}.header-right{gap:8px}.lang-switch{padding-left:10px;border-left:0}.contact-details{border-left:0!important;border-top:1px solid var(--line);padding:28px 0 0!important}}

/* V6 — warmer, layered editorial palette */
body{background:#f8f5ef}
header{background:rgba(248,245,239,.94)}
.hero{background:
 radial-gradient(circle at 88% 18%,rgba(54,95,75,.10),transparent 23%),
 linear-gradient(112deg,#f8f5ef 0 66%,#e7e4da 66% 100%)}
.intro{background:#eee9df}
.expertise{background:linear-gradient(180deg,#f8f5ef 0%,#f1ede5 100%)}
.cards article{background:#fbfaf6}
.cross{background:#202b2d}
.work{background:linear-gradient(135deg,#e3e8e1 0%,#eee9df 58%,#e4ddd1 100%)}
.placeholder{background:#f3efe7}
.contact{background:linear-gradient(120deg,#e9e3d8 0%,#f5f1e9 70%,#e3e8e1 100%)}
.contact-details{background:rgba(255,255,255,.34);padding:30px 32px!important;border-left:1px solid #c6c0b5!important}
.btn{background:#202b2d}
.lang-switch button.active{background:#e1e6df;color:#365f4b}
@media(max-width:900px){.hero{background:#f8f5ef}.contact-details{background:transparent;padding:28px 0 0!important}}

/* V7 — international development / multidisciplinary positioning */
:root{--v7-ink:#20282d;--v7-navy:#1f3442;--v7-stone:#eef0ed;--v7-paper:#f7f7f4;--v7-sage:#e3e8e2;--v7-green:#426653;--v7-line:#d5d9d4}
body{background:var(--v7-paper);color:var(--v7-ink)}
header{background:rgba(247,247,244,.95)}
.hero{background:linear-gradient(105deg,#f7f7f4 0 72%,#e7eae6 72% 100%)}
.intro{background:#eceeea}
.expertise{background:#f7f7f4}
.expertise-intro{max-width:760px;margin:22px 0 44px;color:#5f6968;font-size:17px;line-height:1.7}
.expertise-card{cursor:pointer;position:relative;transition:.22s ease;border-top:1px solid var(--v7-line)!important}
.expertise-card:hover,.expertise-card:focus{transform:translateY(-4px);box-shadow:0 16px 36px rgba(30,45,40,.08);outline:none}
.view-projects{display:block;margin-top:24px;font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--v7-green)}
.project-experience{padding:100px 6vw;background:#e5e8e4}
.project-experience .section-head{max-width:780px;margin-bottom:42px}
#project-note{color:#66706e;line-height:1.6;max-width:820px}
.project-list{border-top:1px solid #bfc6c0}
.project-row{display:grid;grid-template-columns:70px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid #c9cec9}
.project-no{font-size:12px;letter-spacing:.15em;color:#718079}
.project-place{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#426653;font-weight:800}
.project-row h3{margin:7px 0 6px;font-size:21px;color:#1f3442}
.project-row p{margin:0;color:#5c6664}
.project-empty{padding:34px 0;color:#69726f}
.cross{background:#1f2c31}
.work{background:#f0f1ee}
.placeholder{background:#e7eae6}
.contact{background:#eceeea}
.contact-details{background:transparent!important}
.contact-label{font-size:12px!important}
.contact-value{font-size:18px!important;font-weight:600!important}
.contact-value.email{color:#426653!important}
@media(max-width:900px){.hero{background:#f7f7f4}.project-row{grid-template-columns:44px 1fr}}

/* V8 — institutional international-development palette */
:root{
 --pi-ink:#17242d;
 --pi-navy:#163247;
 --pi-graphite:#2c363b;
 --pi-stone:#e8ebe9;
 --pi-fog:#f3f4f1;
 --pi-white:#fafaf8;
 --pi-teal:#2f665f;
 --pi-sage:#aab9ae;
 --pi-line:#cfd5d1;
}
body{background:var(--pi-fog);color:var(--pi-ink)}
header{background:rgba(250,250,248,.96);border-bottom:1px solid var(--pi-line)}
.hero{
 background:
 linear-gradient(90deg,rgba(22,50,71,.025),rgba(22,50,71,0) 42%),
 linear-gradient(112deg,#fafaf8 0 73%,#e5e9e6 73% 100%);
}
.hero h1{color:var(--pi-navy)}
.hero h1 em{color:var(--pi-teal)}
.eyebrow,.section-kicker{color:var(--pi-teal)}
.institutional-line{display:flex;gap:22px;flex-wrap:wrap;margin:28px 0 4px;padding-top:20px;border-top:1px solid var(--pi-line)}
.institutional-line span{font-size:11px;letter-spacing:.13em;font-weight:800;color:#58666b}
.btn{background:var(--pi-navy)}
.textlink{color:var(--pi-navy)}
.intro{background:#e7eae7}
.expertise{background:#fafaf8}
.cards article{background:#f5f6f3;border-color:var(--pi-line)}
.cards article:hover{background:#ffffff}
.view-projects{color:var(--pi-teal)}
.project-experience{background:#e5e9e6}
.cross{background:#182a34}
.work{background:#f0f2ef}
.placeholder{background:#e6eae7}
.contact{background:#dde3df}
.contact-details{
 background:rgba(250,250,248,.58)!important;
 border-left:1px solid #bcc7c1!important;
 padding:28px 30px!important;
}
.contact-label{font-size:11px!important;letter-spacing:.15em!important;color:#66716e!important}
.contact-value,.contact-value.email,.contact-value.motto{
 font-size:16px!important;
 line-height:1.45!important;
 font-weight:600!important;
}
.contact-value.email{color:var(--pi-teal)!important}
.contact-value:not(.email){color:var(--pi-navy)!important}
footer{background:#132630}
.lang-switch button.active{background:#dce4df;color:#244f49}
@media(max-width:900px){
 .hero{background:#fafaf8}
 .contact-details{padding:24px 0!important;background:transparent!important;border-left:0!important}
}

/* V9 — post-project continuity as a core differentiator */
.beyond{padding:110px 6vw;background:#f8f8f5;border-top:1px solid #cfd5d1;border-bottom:1px solid #cfd5d1}
.beyond-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:9vw;align-items:start}
.beyond h2{font-size:clamp(36px,4.3vw,66px);line-height:1.02;letter-spacing:-.035em;color:#163247;margin:14px 0 0}
.beyond-copy{border-left:2px solid #2f665f;padding-left:38px}
.beyond-copy p{font-size:17px;line-height:1.75;color:#4c585b;max-width:720px}
.beyond-copy .beyond-lead{font-size:24px;line-height:1.45;color:#17242d;font-weight:650;margin-top:0}
.follow-loop{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:36px;padding:22px 0;border-top:1px solid #cfd5d1;border-bottom:1px solid #cfd5d1}
.follow-loop span{font-size:12px;letter-spacing:.14em;font-weight:850;color:#2f665f}
.follow-loop b{color:#8a9692;font-weight:500}
@media(max-width:900px){.beyond-grid{grid-template-columns:1fr;gap:36px}.beyond-copy{border-left:0;border-top:2px solid #2f665f;padding:28px 0 0}.beyond{padding:78px 6vw}}

/* V10 — editorial institutional palette: warm mineral + midnight + restrained bronze */
:root{
 --v10-midnight:#172936;
 --v10-ink:#252b2e;
 --v10-warm:#f1eee8;
 --v10-paper:#f8f6f1;
 --v10-greige:#ded9d0;
 --v10-mushroom:#c8c0b5;
 --v10-bronze:#9b7658;
 --v10-teal:#3e6964;
 --v10-line:#d4cec4;
}
body{background:var(--v10-warm)!important;color:var(--v10-ink)!important}
header{background:rgba(248,246,241,.97)!important;border-bottom:1px solid var(--v10-line)!important}
.hero{
 background:
 linear-gradient(90deg,rgba(155,118,88,.035),transparent 38%),
 linear-gradient(115deg,#f8f6f1 0 74%,#ded9d0 74% 100%)!important;
}
.hero h1{color:var(--v10-midnight)!important}
.hero h1 em{color:var(--v10-bronze)!important}
.eyebrow,.section-kicker{color:var(--v10-teal)!important}
.institutional-line span{color:#6c665f!important}
.intro{background:#ded9d0!important}
.expertise{background:#f8f6f1!important}
.cards article{background:#f1eee8!important;border-color:#d4cec4!important}
.cards article:hover{background:#fffdf9!important}
.project-experience{background:#e5e0d8!important}
.cross{background:#172936!important}
.work{background:#f8f6f1!important}
.placeholder{background:#e7e2da!important}
.contact{background:#d9d4cc!important}
footer{background:#172936!important}
.btn{background:#172936!important}
.textlink,.contact-value:not(.email){color:#172936!important}
.contact-value.email{color:#8b654b!important}
.view-projects{color:#8b654b!important}
.lang-switch button.active{background:#e3ddd4!important;color:#172936!important}

/* Approach continuity is part of the same narrative, not a detached end-section */
.continuity{
 display:grid;grid-template-columns:74px 1fr;gap:28px;
 margin-top:64px;padding-top:42px;border-top:1px solid var(--v10-line);
 max-width:980px;
}
.continuity-number{font-size:12px;letter-spacing:.15em;font-weight:800;color:var(--v10-bronze);padding-top:5px}
.continuity-kicker{font-size:11px;letter-spacing:.15em;font-weight:800;color:var(--v10-teal);margin:0 0 10px}
.continuity h3{font-size:28px;line-height:1.2;color:var(--v10-midnight);margin:0 0 18px}
.continuity p{font-size:16px;line-height:1.75;color:#53585a;max-width:820px}
.continuity-loop{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px;padding:18px 0;border-top:1px solid var(--v10-line)}
.continuity-loop span{font-size:11px;letter-spacing:.12em;font-weight:850;color:var(--v10-midnight)}
.continuity-loop b{color:var(--v10-bronze);font-weight:500}
@media(max-width:900px){
 .hero{background:#f8f6f1!important}
 .continuity{grid-template-columns:1fr;gap:8px}
}

/* V11 — visibly different premium institutional palette
   Porcelain + Slate + Deep Petrol + Muted Copper */
:root{
 --p11-porcelain:#E8E6E1;
 --p11-shell:#D8D4CD;
 --p11-slate:#42515A;
 --p11-petrol:#173E46;
 --p11-copper:#A56F52;
 --p11-ink:#1D282D;
 --p11-light:#F2F0EC;
 --p11-line:#C7C3BC;
}
html,body{background:var(--p11-porcelain)!important;color:var(--p11-ink)!important}
header{background:rgba(232,230,225,.97)!important;border-bottom:1px solid #c7c3bc!important}
.hero{
 background:
 radial-gradient(circle at 88% 24%,rgba(165,111,82,.15),transparent 18%),
 linear-gradient(118deg,#E8E6E1 0 68%,#C9D0CF 68% 100%)!important;
}
.hero h1{color:#173E46!important}
.hero h1 em{color:#A56F52!important}
.eyebrow,.section-kicker{color:#365F63!important}
.institutional-line{border-color:#bdbab3!important}
.institutional-line span{color:#5a6265!important}
.intro{background:#C9D0CF!important}
.expertise{background:#E8E6E1!important}
.cards article{background:#F0EEEA!important;border-color:#c7c3bc!important}
.cards article:hover{background:#F7F5F1!important}
.expertise-intro{color:#536065!important}
.project-experience{background:#D8D4CD!important}
.project-row{border-color:#bdb8af!important}
.project-place,.view-projects{color:#8A5E48!important}
.cross{background:#173E46!important}
.work{background:#DDE1DE!important}
.continuity{border-color:#b7bfbb!important}
.continuity-number,.continuity-loop b{color:#A56F52!important}
.continuity-kicker{color:#365F63!important}
.placeholder{background:#C9D0CF!important}
.contact{background:#BFC9C5!important}
.contact-details{background:rgba(242,240,236,.72)!important;border-left:1px solid #9eaaa5!important}
.contact-value,.contact-value.email,.contact-value.motto{font-size:15px!important;font-weight:600!important}
.contact-value.email{color:#A15F43!important}
.contact-value:not(.email){color:#173E46!important}
footer{background:#132F35!important}
.btn{background:#173E46!important}
.textlink{color:#173E46!important}
.lang-switch button.active{background:#C8D0CD!important;color:#173E46!important}
@media(max-width:900px){.hero{background:#E8E6E1!important}.contact-details{background:transparent!important}}

/* V12 — stronger contrast for the split compass panel */
.compass-card,.hero-card,.philosophy-card{
 background:
 linear-gradient(118deg,#F3E8D4 0 36%,#244C55 36% 100%)!important;
 color:#F8F4EC!important;
}
.compass-card h3,.hero-card h3,.philosophy-card h3,
.compass-card b,.hero-card b,.philosophy-card b{
 color:#102E3A!important;
}
.compass-card p,.hero-card p,.philosophy-card p{
 color:#E7ECEA!important;
}
/* Catch the existing visual card even if it has no semantic class */
.hero-visual,.hero-side,.hero-aside{
 background:
 linear-gradient(118deg,#F3E8D4 0 36%,#244C55 36% 100%)!important;
}
.view-projects{color:#8A5E48!important;font-weight:850!important}

.hero > div:last-child{
 background:linear-gradient(118deg,#F3E8D4 0 36%,#244C55 36% 100%)!important;
}
.hero > div:last-child p{color:#E7ECEA!important}
.hero > div:last-child b{color:#F7F2E8!important}

/* =========================================================
   V13 — GLOBAL PALETTE RESET
   Professional international-development institutional look
   ========================================================= */
:root{
  --v13-bg:#F4F2ED;
  --v13-paper:#FBFAF7;
  --v13-navy:#102F3E;
  --v13-navy2:#173F50;
  --v13-bluegray:#D9E1E2;
  --v13-bluegray2:#C6D2D3;
  --v13-emerald:#2F6654;
  --v13-sage:#B9C8BE;
  --v13-text:#202B31;
  --v13-muted:#59676D;
  --v13-line:#C8D0CE;
}
html,body{background:var(--v13-bg)!important;color:var(--v13-text)!important}
header{background:rgba(251,250,247,.97)!important;border-bottom:1px solid var(--v13-line)!important}

/* HERO — remove orange and washed-out diagonal background */
.hero{
  background:var(--v13-paper)!important;
  color:var(--v13-text)!important;
}
.hero h1{color:var(--v13-navy)!important}
.hero h1 em{color:var(--v13-emerald)!important}
.hero .lead{color:var(--v13-muted)!important}
.eyebrow,.section-kicker{color:var(--v13-emerald)!important}
.btn{background:var(--v13-navy)!important;color:#fff!important}
.textlink{color:var(--v13-navy)!important}
.institutional-line{border-color:var(--v13-line)!important}
.institutional-line span{color:#53636A!important}

/* Hero compass panel — high contrast and readable */
.hero > div:last-child,
.hero-card,.hero-visual,.hero-side,.hero-aside,
.compass-card,.philosophy-card{
  background:var(--v13-navy)!important;
  color:#fff!important;
}
.hero > div:last-child b,
.hero > div:last-child h3,
.hero-card b,.hero-card h3,.compass-card b,.compass-card h3,
.philosophy-card b,.philosophy-card h3{
  color:#fff!important;
}
.hero > div:last-child p,
.hero-card p,.compass-card p,.philosophy-card p{
  color:#E7EFF0!important;
}
.hero > div:last-child::before,
.hero-card::before,.compass-card::before{
  background:var(--v13-emerald)!important;
}

/* Main sections: deliberate alternation, not washed-out beige */
.intro{background:var(--v13-bluegray)!important}
.intro h2,.intro h3{color:var(--v13-navy)!important}
.expertise{background:var(--v13-paper)!important}
.expertise h2{color:var(--v13-navy)!important}
.expertise-intro{color:var(--v13-muted)!important}
.cards article{
  background:#FFFFFF!important;
  border:1px solid #D7DEDC!important;
  box-shadow:0 7px 22px rgba(16,47,62,.055)!important;
}
.cards article:hover{
  background:#F8FAF8!important;
  box-shadow:0 14px 34px rgba(16,47,62,.10)!important;
}
.cards article h3{color:var(--v13-navy)!important}
.view-projects{color:var(--v13-emerald)!important}

.project-experience{background:var(--v13-bluegray)!important}
.project-experience h2,.project-row h3{color:var(--v13-navy)!important}
.project-row{border-color:#AFBDBD!important}
.project-place{color:var(--v13-emerald)!important}

.cross{background:var(--v13-navy)!important}
.cross h2,.cross h3{color:#fff!important}
.cross p{color:#DCE6E7!important}

.work{background:var(--v13-paper)!important}
.work h2,.work h3{color:var(--v13-navy)!important}
.continuity{border-color:var(--v13-line)!important}
.continuity-number,.continuity-kicker{color:var(--v13-emerald)!important}
.continuity h3{color:var(--v13-navy)!important}
.continuity-loop span{color:var(--v13-navy)!important}
.continuity-loop b{color:var(--v13-emerald)!important}

.placeholder{background:var(--v13-bluegray2)!important}
.placeholder h2{color:var(--v13-navy)!important}

/* Contact — strong, simple, same value size */
.contact{background:#E7ECEA!important}
.contact h2{color:var(--v13-navy)!important}
.contact-details{
  background:rgba(255,255,255,.72)!important;
  border-left:3px solid var(--v13-emerald)!important;
  padding:28px 30px!important;
}
.contact-label{
  color:#657278!important;
  font-size:11px!important;
  letter-spacing:.14em!important;
}
.contact-value,.contact-value.email,.contact-value.motto{
  font-size:15px!important;
  line-height:1.45!important;
  font-weight:600!important;
}
.contact-value.email{color:var(--v13-emerald)!important}
.contact-value:not(.email){color:var(--v13-navy)!important}

footer{background:#0C2734!important;color:#DDE6E6!important}
.lang-switch button.active{background:#D9E4DF!important;color:var(--v13-navy)!important}

@media(max-width:900px){
  .hero{background:var(--v13-paper)!important}
  .contact-details{background:transparent!important;border-left:0!important;border-top:2px solid var(--v13-emerald)!important}
}

/* =========================================================
   V14 — COHESIVE BRAND SYSTEM
   Use the actual logo family actively:
   deep navy + compass blue + Primus green + warm cream.
   Only three major section backgrounds are used.
   ========================================================= */
:root{
  --brand-navy:#0D3553;
  --brand-blue:#087FA8;
  --brand-green:#2F704F;
  --brand-leaf:#72A942;
  --brand-cream:#F5F0E6;
  --brand-cream2:#EAE4D8;
  --brand-ink:#172A35;
  --brand-line:#CFC7B8;
}

/* Global foundation */
html,body{
  background:var(--brand-cream)!important;
  color:var(--brand-ink)!important;
}
header{
  background:rgba(245,240,230,.98)!important;
  border-bottom:1px solid var(--brand-line)!important;
}
header a{color:var(--brand-navy)!important}

/* HERO: cream + one strong navy brand panel */
.hero{
  background:var(--brand-cream)!important;
}
.hero h1{color:var(--brand-navy)!important}
.hero h1 em{color:var(--brand-green)!important}
.hero .lead{color:#43545D!important}
.eyebrow,.section-kicker{color:var(--brand-blue)!important}
.btn{
  background:var(--brand-navy)!important;
  color:#fff!important;
}
.textlink{color:var(--brand-green)!important}
.institutional-line{
  border-color:var(--brand-line)!important;
}
.institutional-line span{
  color:#596A70!important;
}

/* Compass philosophy panel: one uninterrupted dark field.
   No diagonal split, no low-contrast text. */
.hero > div:last-child,
.hero-card,.hero-visual,.hero-side,.hero-aside,
.compass-card,.philosophy-card{
  background:var(--brand-navy)!important;
  color:#fff!important;
  border:none!important;
}
.hero > div:last-child b,
.hero > div:last-child h3,
.hero-card b,.hero-card h3,
.compass-card b,.compass-card h3,
.philosophy-card b,.philosophy-card h3{
  color:#fff!important;
}
.hero > div:last-child p,
.hero-card p,.compass-card p,.philosophy-card p{
  color:#DCEAF0!important;
}
.hero > div:last-child::before,
.hero-card::before,.compass-card::before{
  background:var(--brand-leaf)!important;
}

/* WHO WE ARE: strong green field to create a clear brand rhythm */
.intro{
  background:var(--brand-green)!important;
  color:#fff!important;
}
.intro h2,.intro h3,.intro b{color:#fff!important}
.intro p{color:#EDF5EF!important}
.intro .section-kicker{color:#CBE3B9!important}
.intro *{border-color:rgba(255,255,255,.35)!important}

/* EXPERTISE: return to warm cream for readability */
.expertise{
  background:var(--brand-cream)!important;
}
.expertise h2,.expertise h3{color:var(--brand-navy)!important}
.expertise-intro{color:#526269!important}
.cards article{
  background:#FFFDF8!important;
  border:1px solid #D8D0C2!important;
  box-shadow:0 8px 24px rgba(13,53,83,.07)!important;
}
.cards article:hover{
  background:#FFFFFF!important;
  box-shadow:0 15px 36px rgba(13,53,83,.13)!important;
  border-color:#BFC9C4!important;
}
.view-projects{
  color:var(--brand-blue)!important;
  font-weight:850!important;
}

/* MAIN PROJECT EXPERIENCE: pale green-tinted brand field */
.project-experience{
  background:#DDE7DC!important;
}
.project-experience h2,.project-row h3{color:var(--brand-navy)!important}
.project-row{border-color:#AEBEAF!important}
.project-place{color:var(--brand-green)!important}

/* CROSS CUTTING: dark navy */
.cross{
  background:var(--brand-navy)!important;
}
.cross h2,.cross h3,.cross b{color:#fff!important}
.cross p{color:#DDE9ED!important}
.cross .section-kicker{color:#86C6D8!important}

/* APPROACH: cream */
.work{
  background:var(--brand-cream)!important;
}
.work h2,.work h3{color:var(--brand-navy)!important}
.continuity{border-color:var(--brand-line)!important}
.continuity-number,.continuity-kicker{color:var(--brand-blue)!important}
.continuity h3{color:var(--brand-navy)!important}
.continuity-loop span{color:var(--brand-navy)!important}
.continuity-loop b{color:var(--brand-green)!important}

/* INSIGHTS: light cream-2, not another random gray */
.placeholder{
  background:var(--brand-cream2)!important;
}
.placeholder h2{color:var(--brand-navy)!important}

/* CONTACT: strong green field; contact card stays cream */
.contact{
  background:var(--brand-green)!important;
  color:#fff!important;
}
.contact h2{color:#fff!important}
.contact .section-kicker{color:#D8E8C9!important}
.contact-details{
  background:var(--brand-cream)!important;
  border-left:4px solid var(--brand-blue)!important;
  padding:28px 30px!important;
}
.contact-label{
  color:#657279!important;
  font-size:11px!important;
  letter-spacing:.14em!important;
}
.contact-value,.contact-value.email,.contact-value.motto{
  font-size:15px!important;
  line-height:1.45!important;
  font-weight:600!important;
}
.contact-value.email{color:var(--brand-blue)!important}
.contact-value:not(.email){color:var(--brand-navy)!important}

/* Footer */
footer{
  background:#08283D!important;
  color:#DCE8EC!important;
}
.lang-switch button.active{
  background:#D7E4D4!important;
  color:var(--brand-navy)!important;
}

/* Kill legacy diagonal / pale overlays from older versions */
.hero::before,.hero::after,
.intro::before,.intro::after,
.expertise::before,.expertise::after{
  opacity:0!important;
}

/* Mobile */
@media(max-width:900px){
  .hero{background:var(--brand-cream)!important}
  .contact-details{
    border-left:0!important;
    border-top:4px solid var(--brand-blue)!important;
  }
}

/* =========================================================
   V15 — COHESIVE INTERNATIONAL DEVELOPMENT INSTITUTION
   Principles:
   1) one dominant neutral canvas
   2) brand navy as institutional anchor
   3) green/blue only as accents
   4) constrained content width for professional readability
   5) no alternating full-width green/gray bands
   ========================================================= */
:root{
 --pi15-bg:#F7F6F2;
 --pi15-paper:#FFFFFF;
 --pi15-navy:#10364A;
 --pi15-navy-deep:#0B2A3A;
 --pi15-blue:#1682A8;
 --pi15-green:#347356;
 --pi15-leaf:#78A94B;
 --pi15-ink:#202D33;
 --pi15-muted:#657177;
 --pi15-soft:#EDF1EE;
 --pi15-softblue:#EAF1F3;
 --pi15-line:#D8DEDB;
}

/* GLOBAL */
html,body{background:var(--pi15-bg)!important;color:var(--pi15-ink)!important}
header{background:rgba(247,246,242,.98)!important;border-bottom:1px solid var(--pi15-line)!important}
header a{color:var(--pi15-navy)!important}
section{box-sizing:border-box}
section>*,header>*,footer>*{max-width:1280px;margin-left:auto;margin-right:auto}
.eyebrow,.section-kicker{color:var(--pi15-green)!important}
.btn{background:var(--pi15-navy)!important;color:#fff!important}
.textlink{color:var(--pi15-green)!important}
.lang-switch button.active{background:#DDE8E1!important;color:var(--pi15-navy)!important}

/* HERO — single professional canvas */
.hero{
 background:
 radial-gradient(circle at 86% 18%,rgba(22,130,168,.08),transparent 20%),
 var(--pi15-bg)!important;
 min-height:650px;
}
.hero h1{color:var(--pi15-navy)!important}
.hero h1 em{color:var(--pi15-green)!important}
.hero .lead{color:#4F5E65!important;max-width:760px}
.institutional-line{border-color:var(--pi15-line)!important}
.institutional-line span{color:#66757A!important}

/* Compass statement = clear institutional navy card, not a second background system */
.hero > div:last-child,
.hero-card,.hero-visual,.hero-side,.hero-aside,
.compass-card,.philosophy-card{
 background:var(--pi15-navy)!important;
 color:#fff!important;
 border-radius:2px;
 box-shadow:0 16px 42px rgba(11,42,58,.13)!important;
}
.hero > div:last-child b,.hero > div:last-child h3,
.hero-card b,.hero-card h3,.compass-card b,.compass-card h3,.philosophy-card b,.philosophy-card h3{color:#fff!important}
.hero > div:last-child p,.hero-card p,.compass-card p,.philosophy-card p{color:#DDE9ED!important}

/* WHO WE ARE — same canvas, separated by typography/rule rather than color block */
.intro{
 background:var(--pi15-paper)!important;
 color:var(--pi15-ink)!important;
 border-top:1px solid var(--pi15-line);
 border-bottom:1px solid var(--pi15-line);
}
.intro h2,.intro h3,.intro b{color:var(--pi15-navy)!important}
.intro p{color:#526168!important}
.intro .section-kicker{color:var(--pi15-green)!important}
.intro *{border-color:var(--pi15-line)!important}

/* EXPERTISE */
.expertise{background:var(--pi15-bg)!important}
.expertise h2,.expertise h3{color:var(--pi15-navy)!important}
.expertise-intro{color:var(--pi15-muted)!important}
.cards article{
 background:var(--pi15-paper)!important;
 border:1px solid var(--pi15-line)!important;
 border-top:4px solid var(--pi15-navy)!important;
 box-shadow:0 8px 26px rgba(16,54,74,.055)!important;
}
.cards article:nth-child(2n){border-top-color:var(--pi15-green)!important}
.cards article:nth-child(3n){border-top-color:var(--pi15-blue)!important}
.cards article:hover{box-shadow:0 16px 36px rgba(16,54,74,.10)!important;transform:translateY(-3px)}
.view-projects{color:var(--pi15-green)!important}

/* PROJECT EXPERIENCE — subtle inset, not full random band */
.project-experience{
 background:var(--pi15-soft)!important;
 border-top:1px solid var(--pi15-line);
 border-bottom:1px solid var(--pi15-line);
}
.project-experience h2,.project-row h3{color:var(--pi15-navy)!important}
.project-row{border-color:#C8D1CC!important}
.project-place{color:var(--pi15-green)!important}

/* CROSS-CUTTING — one deliberate dark institutional section */
.cross{background:var(--pi15-navy-deep)!important}
.cross h2,.cross h3,.cross b{color:#fff!important}
.cross p{color:#D9E5E9!important}
.cross .section-kicker{color:#84C4D7!important}

/* APPROACH */
.work{background:var(--pi15-paper)!important}
.work h2,.work h3{color:var(--pi15-navy)!important}
.work p{color:#526168!important}
.continuity{border-color:var(--pi15-line)!important}
.continuity-number,.continuity-kicker{color:var(--pi15-green)!important}
.continuity h3{color:var(--pi15-navy)!important}
.continuity-loop span{color:var(--pi15-navy)!important}
.continuity-loop b{color:var(--pi15-blue)!important}

/* INSIGHTS */
.placeholder{background:var(--pi15-softblue)!important;border-top:1px solid #D5E0E3;border-bottom:1px solid #D5E0E3}
.placeholder h2{color:var(--pi15-navy)!important}

/* CONTACT — neutral, not another full green block */
.contact{background:var(--pi15-bg)!important;color:var(--pi15-ink)!important}
.contact h2{color:var(--pi15-navy)!important}
.contact .section-kicker{color:var(--pi15-green)!important}
.contact-details{
 background:var(--pi15-paper)!important;
 border:1px solid var(--pi15-line)!important;
 border-left:4px solid var(--pi15-green)!important;
 padding:30px 32px!important;
 box-shadow:0 8px 26px rgba(16,54,74,.05)!important;
}
.contact-label{color:#6C777B!important;font-size:11px!important;letter-spacing:.14em!important}
.contact-value,.contact-value.email,.contact-value.motto{font-size:15px!important;line-height:1.45!important;font-weight:600!important}
.contact-value.email{color:var(--pi15-green)!important}
.contact-value:not(.email){color:var(--pi15-navy)!important}

footer{background:var(--pi15-navy-deep)!important;color:#DDE8EB!important}

/* remove legacy decorative overlays */
.hero::before,.hero::after,.intro::before,.intro::after,.expertise::before,.expertise::after{opacity:0!important}

/* Wider screens should not stretch content endlessly */
@media(min-width:1500px){
 .hero,.intro,.expertise,.project-experience,.cross,.work,.placeholder,.contact{padding-left:max(7vw,calc((100vw - 1440px)/2));padding-right:max(7vw,calc((100vw - 1440px)/2))}
}
@media(max-width:900px){
 .hero{background:var(--pi15-bg)!important;min-height:auto}
 .contact-details{border-left:0!important;border-top:4px solid var(--pi15-green)!important}
}

/* V17 — COOL GRAY INSTITUTIONAL
   One professional light-gray canvas + dark charcoal thematic cards + white typography */
:root{
 --cg-bg:#E7EAE9;
 --cg-bg2:#DDE2E1;
 --cg-card:#303A3E;
 --cg-card2:#263F4A;
 --cg-navy:#17313D;
 --cg-white:#FFFFFF;
 --cg-copy:#E6ECEB;
 --cg-muted:#68767A;
 --cg-green:#4B815D;
 --cg-blue:#2486A8;
 --cg-line:#C3CCCA;
}
html,body{background:var(--cg-bg)!important;color:var(--cg-navy)!important}
header{background:rgba(231,234,233,.98)!important;border-bottom:1px solid var(--cg-line)!important}
header a{color:var(--cg-navy)!important}

/* Hero: light institutional gray, dark thematic statement card */
.hero{background:var(--cg-bg)!important;color:var(--cg-navy)!important}
.hero h1{color:var(--cg-navy)!important}
.hero h1 em{color:var(--cg-green)!important}
.hero .lead{color:#4F5F64!important}
.eyebrow,.section-kicker{color:var(--cg-green)!important}
.btn{background:var(--cg-navy)!important;color:#fff!important}
.textlink{color:var(--cg-green)!important}
.institutional-line{border-color:var(--cg-line)!important}
.institutional-line span{color:#5D6B70!important}
.hero > div:last-child,.hero-card,.hero-visual,.hero-side,.hero-aside,.compass-card,.philosophy-card{
 background:var(--cg-card2)!important;color:#fff!important;border:0!important;box-shadow:0 12px 28px rgba(23,49,61,.12)!important
}
.hero > div:last-child b,.hero > div:last-child h3,.hero-card b,.hero-card h3,.compass-card b,.compass-card h3{color:#fff!important}
.hero > div:last-child p,.hero-card p,.compass-card p{color:var(--cg-copy)!important}

/* Who we are: gray canvas; content blocks become charcoal cards */
.intro{background:var(--cg-bg)!important;color:var(--cg-navy)!important}
.intro h2{color:var(--cg-navy)!important}
.intro .section-kicker{color:var(--cg-green)!important}
/* turn lower content columns / principle items into readable dark panels where possible */
.intro article,.intro .intro-copy,.intro .principle,.intro .value{
 background:var(--cg-card)!important;color:#fff!important;padding:28px!important;border:0!important
}
.intro article h3,.intro .principle h3,.intro .value h3,.intro article b{color:#fff!important}
.intro article p,.intro .principle p,.intro .value p{color:var(--cg-copy)!important}

/* Fallback: main intro paragraphs remain high-contrast dark text if markup isn't carded */
.intro p{color:#435359!important}
.intro b{color:var(--cg-navy)!important}

/* Expertise: all five themes = charcoal cards */
.expertise{background:var(--cg-bg2)!important}
.expertise h2{color:var(--cg-navy)!important}
.expertise-intro{color:#55656A!important}
.cards article{
 background:var(--cg-card)!important;
 color:#fff!important;
 border:0!important;
 border-top:5px solid var(--cg-green)!important;
 box-shadow:0 10px 26px rgba(23,49,61,.11)!important;
}
.cards article:nth-child(even){border-top-color:var(--cg-blue)!important}
.cards article h3,.cards article b{color:#fff!important}
.cards article p,.cards article span:not(.view-projects){color:var(--cg-copy)!important}
.cards article:hover{background:#263438!important;box-shadow:0 16px 34px rgba(23,49,61,.17)!important}
.view-projects{color:#9ED4B0!important;font-weight:850!important}

/* Project experience */
.project-experience{background:var(--cg-bg)!important}
.project-experience h2{color:var(--cg-navy)!important}
.project-row{background:var(--cg-card)!important;color:#fff!important;margin:12px 0;padding:24px 28px!important;border:0!important}
.project-row h3{color:#fff!important}
.project-row p{color:var(--cg-copy)!important}
.project-place{color:#9ED4B0!important}
.project-no{color:#A9C9D5!important}

/* Cross-cutting: blue-gray dark field */
.cross{background:var(--cg-card2)!important}
.cross h2,.cross h3,.cross b{color:#fff!important}
.cross p{color:var(--cg-copy)!important}
.cross .section-kicker{color:#91CDDE!important}

/* Approach */
.work{background:var(--cg-bg)!important}
.work h2{color:var(--cg-navy)!important}
.work .section-kicker,.continuity-number,.continuity-kicker{color:var(--cg-green)!important}
.work article,.work .step{
 background:var(--cg-card)!important;color:#fff!important
}
.work article h3,.work .step h3{color:#fff!important}
.work article p,.work .step p{color:var(--cg-copy)!important}
.continuity{border-color:#B8C3C0!important}
.continuity h3{color:var(--cg-navy)!important}
.continuity p{color:#4F5F64!important}
.continuity-loop span{color:var(--cg-navy)!important}
.continuity-loop b{color:var(--cg-blue)!important}

/* Insights */
.placeholder{background:var(--cg-bg2)!important}
.placeholder h2{color:var(--cg-navy)!important}

/* Contact */
.contact{background:var(--cg-bg)!important;color:var(--cg-navy)!important}
.contact h2{color:var(--cg-navy)!important}
.contact-details{
 background:var(--cg-card)!important;
 border:0!important;
 border-left:5px solid var(--cg-green)!important;
 padding:30px 32px!important;
}
.contact-label{color:#B9C8C7!important}
.contact-value,.contact-value.email,.contact-value.motto{font-size:15px!important;font-weight:600!important;color:#fff!important}
.contact-value.email{color:#A9DAB9!important}
footer{background:#202B30!important;color:#E4EBEA!important}
.lang-switch button.active{background:#fff!important;color:var(--cg-navy)!important}

/* remove legacy visual wash */
.hero::before,.hero::after,.intro::before,.intro::after,.expertise::before,.expertise::after{opacity:0!important}
@media(max-width:900px){.hero{background:var(--cg-bg)!important}}

/* V18 — WHITE CANVAS + HIGH-CONTRAST NAVY CONTENT SECTIONS */
:root{
 --hc-white:#FFFFFF;
 --hc-navy:#0D3348;
 --hc-navy2:#163F55;
 --hc-green:#3D7958;
 --hc-blue:#1886AD;
 --hc-soft:#F4F6F5;
 --hc-ink:#172C37;
 --hc-copy:#DDE8EC;
 --hc-line:#D7DEDC;
}
html,body{background:#fff!important;color:var(--hc-ink)!important}
header{background:#fff!important;border-bottom:1px solid var(--hc-line)!important}
header a{color:var(--hc-navy)!important}

/* HERO white, logo stays visible */
.hero{background:#fff!important;color:var(--hc-ink)!important}
.hero h1{color:var(--hc-navy)!important}
.hero h1 em{color:var(--hc-green)!important}
.hero .lead{color:#506168!important}
.eyebrow,.section-kicker{color:var(--hc-green)!important}
.btn{background:var(--hc-navy)!important;color:#fff!important}
.textlink{color:var(--hc-green)!important}
.institutional-line{border-color:var(--hc-line)!important}
.institutional-line span{color:#607177!important}
.hero > div:last-child,.hero-card,.hero-visual,.hero-side,.hero-aside,.compass-card,.philosophy-card{
 background:var(--hc-navy)!important;color:#fff!important;border:0!important
}
.hero > div:last-child b,.hero > div:last-child h3,.hero-card b,.hero-card h3,.compass-card b,.compass-card h3{color:#fff!important}
.hero > div:last-child p,.hero-card p,.compass-card p{color:var(--hc-copy)!important}

/* WHO WE ARE becomes a strong dark feature section */
.intro{
 background:var(--hc-navy)!important;
 color:#fff!important;
}
.intro .section-kicker{color:#8CC7A1!important}
.intro h2,.intro h3,.intro b{color:#fff!important}
.intro p{color:var(--hc-copy)!important}
.intro *{border-color:rgba(255,255,255,.28)!important}

/* EXPERTISE — dark navy so visitors see fields immediately */
.expertise{
 background:var(--hc-navy2)!important;
 color:#fff!important;
}
.expertise .section-kicker{color:#92D0E2!important}
.expertise h2,.expertise h3{color:#fff!important}
.expertise-intro{color:#D7E4E8!important}
.cards article{
 background:#fff!important;
 color:var(--hc-ink)!important;
 border:0!important;
 border-top:5px solid var(--hc-green)!important;
 box-shadow:0 10px 28px rgba(0,0,0,.15)!important;
}
.cards article:nth-child(even){border-top-color:var(--hc-blue)!important}
.cards article h3,.cards article b{color:var(--hc-navy)!important}
.cards article p,.cards article span:not(.view-projects){color:#53646B!important}
.view-projects{color:var(--hc-green)!important;font-weight:850!important}

/* PROJECT EXPERIENCE — white, strong title and dark project rows once selected */
.project-experience{background:#fff!important;color:var(--hc-ink)!important}
.project-experience .section-kicker{color:var(--hc-green)!important}
.project-experience h2{color:var(--hc-navy)!important}
#project-note,.project-empty{color:#596A70!important}
.project-row{background:var(--hc-navy)!important;color:#fff!important;margin:12px 0;padding:24px 28px!important;border:0!important}
.project-row h3{color:#fff!important}
.project-row p{color:var(--hc-copy)!important}
.project-place{color:#A5D5B5!important}
.project-no{color:#A8CEDB!important}

/* CROSS CUTTING remains dark but distinct */
.cross{background:#092A3B!important}
.cross h2,.cross h3,.cross b{color:#fff!important}
.cross p{color:#DDE8EC!important}
.cross .section-kicker{color:#8CCEE0!important}

/* APPROACH white */
.work{background:#fff!important;color:var(--hc-ink)!important}
.work h2,.work h3{color:var(--hc-navy)!important}
.work p{color:#53646B!important}
.work .section-kicker,.continuity-number,.continuity-kicker{color:var(--hc-green)!important}
.continuity{border-color:var(--hc-line)!important}
.continuity-loop span{color:var(--hc-navy)!important}
.continuity-loop b{color:var(--hc-blue)!important}

/* INSIGHTS soft neutral */
.placeholder{background:var(--hc-soft)!important}
.placeholder h2{color:var(--hc-navy)!important}

/* CONTACT: white canvas + dark card with genuinely visible links */
.contact{background:#fff!important;color:var(--hc-ink)!important}
.contact h2{color:var(--hc-navy)!important}
.contact .section-kicker{color:var(--hc-green)!important}
.contact-details{
 background:var(--hc-navy)!important;
 border:0!important;
 border-left:5px solid var(--hc-green)!important;
 padding:32px 34px!important;
 box-shadow:0 12px 30px rgba(13,51,72,.16)!important;
}
.contact-label{color:#BFD0D5!important;font-size:11px!important;letter-spacing:.14em!important}
.contact-value,.contact-value.email,.contact-value.motto{
 font-size:15px!important;line-height:1.45!important;font-weight:650!important;color:#fff!important;
}
.contact-value.email{color:#A8DBBA!important}
.contact-details a{color:#fff!important;text-decoration:none!important}
.contact-details a:hover{color:#A8DBBA!important}
footer{background:#082637!important;color:#DCE7EA!important}
.lang-switch button.active{background:var(--hc-navy)!important;color:#fff!important}

/* eliminate all inherited tinted canvases */
.hero::before,.hero::after,.intro::before,.intro::after,.expertise::before,.expertise::after{opacity:0!important}
@media(max-width:900px){.hero{background:#fff!important}}

/* V19 — STRICT ALTERNATING SYSTEM
   White / Navy / White / Navy ... with explicit contrast */
:root{
 --alt-white:#FFFFFF;
 --alt-navy:#0D3348;
 --alt-navy2:#123E54;
 --alt-green:#4A805E;
 --alt-blue:#2A88AA;
 --alt-ink:#17303D;
 --alt-copy:#E4EDF0;
 --alt-line:#D7DEDC;
}

/* 1 HERO — WHITE */
.hero{background:#fff!important;color:var(--alt-ink)!important}
.hero h1{color:var(--alt-navy)!important}
.hero h1 em{color:var(--alt-green)!important}
.hero .lead{color:#52636A!important}
.hero .eyebrow{color:var(--alt-green)!important}
.hero > div:last-child,.hero-card,.hero-visual,.hero-side,.hero-aside,.compass-card,.philosophy-card{
 background:var(--alt-navy)!important;color:#fff!important
}
.hero > div:last-child p,.hero-card p,.compass-card p{color:var(--alt-copy)!important}

/* 2 WHO WE ARE — NAVY */
.intro{background:var(--alt-navy)!important;color:#fff!important}
.intro .section-kicker{color:#A7D3B4!important}
.intro h2,.intro h3,.intro b{color:#fff!important}
.intro p{color:var(--alt-copy)!important}
.intro *{border-color:rgba(255,255,255,.26)!important}

/* 3 EXPERTISE — WHITE */
.expertise{background:#fff!important;color:var(--alt-ink)!important}
.expertise .section-kicker{color:var(--alt-green)!important}
.expertise h2,.expertise h3{color:var(--alt-navy)!important}
.expertise-intro{color:#596A70!important}
.cards article{
 background:#F7F9F8!important;color:var(--alt-ink)!important;
 border:1px solid var(--alt-line)!important;border-top:5px solid var(--alt-green)!important;
}
.cards article:nth-child(even){border-top-color:var(--alt-blue)!important}
.cards article h3,.cards article b{color:var(--alt-navy)!important}
.cards article p,.cards article span:not(.view-projects){color:#56676E!important}
.view-projects{color:var(--alt-green)!important}

/* 4 MAIN PROJECT EXPERIENCE — NAVY */
.project-experience{background:var(--alt-navy2)!important;color:#fff!important}
.project-experience .section-kicker{color:#9ED2B0!important}
.project-experience h2{color:#fff!important}
#project-note,.project-empty{color:#DCE8EB!important}
.project-row{
 background:rgba(255,255,255,.07)!important;color:#fff!important;
 border:1px solid rgba(255,255,255,.18)!important;margin:12px 0;padding:24px 28px!important;
}
.project-row h3{color:#fff!important}
.project-row p{color:var(--alt-copy)!important}
.project-place{color:#A8DAB8!important}
.project-no{color:#A8CEDB!important}

/* 5 CROSS-CUTTING — WHITE */
.cross{background:#fff!important;color:var(--alt-ink)!important}
.cross .section-kicker{color:var(--alt-green)!important}
.cross h2,.cross h3,.cross b{color:var(--alt-navy)!important}
.cross p{color:#56676E!important}
.cross *{border-color:var(--alt-line)!important}

/* 6 APPROACH — NAVY */
.work{background:var(--alt-navy)!important;color:#fff!important}
.work .section-kicker,.continuity-number,.continuity-kicker{color:#A7D3B4!important}
.work h2,.work h3,.continuity h3{color:#fff!important}
.work p,.continuity p{color:var(--alt-copy)!important}
.work *{border-color:rgba(255,255,255,.24)!important}
.continuity-loop span{color:#fff!important}
.continuity-loop b{color:#8ECFE2!important}

/* 7 INSIGHTS — WHITE */
.placeholder{background:#fff!important;color:var(--alt-ink)!important}
.placeholder .section-kicker{color:var(--alt-green)!important}
.placeholder h2{color:var(--alt-navy)!important}
.placeholder p{color:#596A70!important}

/* 8 CONTACT — NAVY */
.contact{background:var(--alt-navy)!important;color:#fff!important}
.contact .section-kicker{color:#A7D3B4!important}
.contact h2{color:#fff!important}
.contact-details{
 background:#fff!important;
 color:var(--alt-ink)!important;
 border:0!important;border-top:5px solid var(--alt-green)!important;
 padding:34px 36px!important;
}
.contact-label{color:#65747A!important}
.contact-value,.contact-value.email,.contact-value.motto{
 display:block!important;
 font-size:16px!important;line-height:1.5!important;font-weight:700!important;
}
.contact-value.email{color:var(--alt-green)!important}
.contact-value:not(.email){color:var(--alt-navy)!important}
.contact-details a,
.contact-details a:visited{
 color:var(--alt-navy)!important;
 opacity:1!important;
 visibility:visible!important;
 text-decoration:none!important;
}
.contact-details a[href^="mailto:"],
.contact-details a[href^="mailto:"]:visited{
 color:var(--alt-green)!important;
}
.contact-details a:hover{color:var(--alt-blue)!important}

/* Header / footer */
header{background:#fff!important;border-bottom:1px solid var(--alt-line)!important}
header a{color:var(--alt-navy)!important}
footer{background:#082637!important;color:#DCE7EA!important}

/* V20 — alignment + natural flow refinement */
:root{
 --v20-max:1280px;
 --v20-pad:6vw;
 --v20-navy:#0D3348;
 --v20-green-light:#A9D7B7;
 --v20-aqua-light:#A9D9E7;
}

/* One shared content grid across ALL sections */
.hero,.intro,.expertise,.project-experience,.cross,.work,.placeholder,.contact{
 padding-left:var(--v20-pad)!important;
 padding-right:var(--v20-pad)!important;
}
.hero>*,.intro>*,.expertise>*,.project-experience>*,.cross>*,.work>*,.placeholder>*,.contact>*{
 width:100%!important;
 max-width:var(--v20-max)!important;
 margin-left:auto!important;
 margin-right:auto!important;
 box-sizing:border-box!important;
}

/* Hero: remove isolated right-hand rectangle feeling.
   Statement becomes integrated text separated by a vertical rule. */
.hero > div:last-child,
.hero-card,.hero-visual,.hero-side,.hero-aside,.compass-card,.philosophy-card{
 background:transparent!important;
 box-shadow:none!important;
 border:0!important;
 border-left:2px solid #D6DEDC!important;
 border-radius:0!important;
 padding-left:42px!important;
 color:var(--v20-navy)!important;
}
.hero > div:last-child b,.hero > div:last-child h3,
.hero-card b,.hero-card h3,.compass-card b,.compass-card h3{
 color:var(--v20-navy)!important;
}
.hero > div:last-child p,.hero-card p,.compass-card p{
 color:#56686F!important;
}
.hero > div:last-child::before,.hero-card::before,.compass-card::before{
 background:#4A805E!important;
}

/* Project experience: remove accidental inset; align with every other section */
.project-experience .section-head,
.project-experience #project-list{
 max-width:var(--v20-max)!important;
 width:100%!important;
 margin-left:auto!important;
 margin-right:auto!important;
}
.project-experience .section-head{
 padding-left:0!important;
 padding-right:0!important;
}
.project-experience .section-kicker{color:var(--v20-green-light)!important}
.project-experience h2{margin-left:0!important}
.project-experience #project-note{margin-left:0!important;max-width:900px!important}
.project-list{margin-left:0!important}

/* Approach: one exact left edge and visible accent labels */
.work .section-kicker,
.work h2,
.work .approach-lead,
.work .steps,
.work .continuity{
 margin-left:0!important;
}
.work .section-kicker,
.work .continuity-kicker,
.work .continuity-number{
 color:var(--v20-green-light)!important;
}
.work .steps{
 display:grid!important;
 grid-template-columns:repeat(4,1fr)!important;
 gap:32px!important;
}
.work .step,
.work article{
 padding-left:0!important;
 padding-right:18px!important;
 background:transparent!important;
}
.work .step h3,.work article h3{
 color:var(--v20-green-light)!important;
}
.work .step p,.work article p{
 color:#fff!important;
}
.work .steps > * + *{
 border-left:1px solid rgba(255,255,255,.18)!important;
 padding-left:32px!important;
}
.work .continuity{
 width:100%!important;
 max-width:none!important;
}

/* Dark sections: all green labels become a much lighter mint for contrast */
.intro .section-kicker,
.project-experience .section-kicker,
.work .section-kicker,
.work .step h3,
.work article h3,
.contact .section-kicker{
 color:var(--v20-green-light)!important;
}

/* Contact: remove floating white box entirely.
   Details become a natural horizontal information band on navy. */
.contact-details{
 background:transparent!important;
 box-shadow:none!important;
 border:0!important;
 border-top:1px solid rgba(255,255,255,.28)!important;
 padding:30px 0 0!important;
 display:grid!important;
 grid-template-columns:1fr 1fr 1.4fr!important;
 gap:42px!important;
}
.contact-label{
 color:#B9CDD2!important;
 font-size:11px!important;
}
.contact-value,.contact-value.email,.contact-value.motto,
.contact-details a,.contact-details a:visited{
 color:#fff!important;
 font-size:16px!important;
 font-weight:650!important;
 opacity:1!important;
 visibility:visible!important;
}
.contact-value.email,
.contact-details a[href^="mailto:"],
.contact-details a[href^="mailto:"]:visited{
 color:var(--v20-green-light)!important;
}
.contact-details a:hover{color:var(--v20-aqua-light)!important}

/* Large screen alignment stays centered, never narrow/inset */
@media(min-width:1500px){
 .hero,.intro,.expertise,.project-experience,.cross,.work,.placeholder,.contact{
   padding-left:max(7vw,calc((100vw - 1500px)/2))!important;
   padding-right:max(7vw,calc((100vw - 1500px)/2))!important;
 }
}
@media(max-width:900px){
 .hero > div:last-child,.hero-card,.hero-visual,.hero-side,.hero-aside,.compass-card,.philosophy-card{
   border-left:0!important;border-top:2px solid #D6DEDC!important;padding:28px 0 0!important;
 }
 .work .steps{grid-template-columns:1fr!important}
 .work .steps > * + *{border-left:0!important;border-top:1px solid rgba(255,255,255,.18)!important;padding:24px 0 0!important}
 .contact-details{grid-template-columns:1fr!important;gap:26px!important}
}

/* V21 — one master grid + branded hero visual */
:root{--master-max:1280px;--master-pad:6vw;--navy:#0D3348;--mint:#A9D7B7;--line:#D7DEDC}

/* Every section uses exactly the same horizontal origin */
.hero,.intro,.expertise,.project-experience,.cross,.work,.placeholder,.contact{
  padding-left:var(--master-pad)!important;
  padding-right:var(--master-pad)!important;
}
.hero,.intro,.expertise,.project-experience,.cross,.work,.placeholder,.contact{
  box-sizing:border-box!important;
}
.hero>*,.intro>*,.expertise>*,.project-experience>*,.cross>*,.work>*,.placeholder>*,.contact>*{
  max-width:var(--master-max)!important;
  box-sizing:border-box!important;
}

/* Section children that previously centered or indented are reset */
.intro>*,.expertise>*,.project-experience>*,.cross>*,.work>*,.placeholder>*,.contact>*{
  margin-left:0!important;
  margin-right:0!important;
}
.project-experience .section-head,
.project-experience #project-list,
.cross .crossgrid,
.work .process,
.contact>div{
  width:100%!important;
  max-width:var(--master-max)!important;
  margin-left:0!important;
  margin-right:0!important;
}
.project-experience .section-head{padding:0!important}
.project-list{margin:0!important}
.crossgrid{margin-top:34px!important}
.work .process{margin-top:38px!important}

/* Hero itself is a two-column grid but shares the same master left edge */
.hero{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,.8fr)!important;
  gap:72px!important;
  align-items:center!important;
}
.hero>div:first-child{max-width:780px!important;margin:0!important}

/* Right hero: actual brand, not an empty decorative box */
.brand-story{
  border-left:1px solid #C8D3D0!important;
  padding:24px 0 24px 44px!important;
  background:transparent!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:360px!important;
}
.hero-brand-logo{
  width:min(330px,92%)!important;
  height:auto!important;
  object-fit:contain!important;
  margin:0 0 54px 0!important;
  display:block!important;
}
.brand-story-copy{
  border-top:3px solid #4A805E!important;
  padding-top:24px!important;
  max-width:410px!important;
}
.brand-story-copy b{
  color:var(--navy)!important;
  font-size:22px!important;
  line-height:1.3!important;
}
.brand-story-copy p{
  color:#586970!important;
  font-size:16px!important;
  line-height:1.65!important;
  margin-top:18px!important;
}

/* Exact left alignment inside dark sections */
.intro .twocol,.intro .principles,
.cross .crossgrid,
.work .process{
  margin-left:0!important;
  padding-left:0!important;
}
.intro .twocol{max-width:1120px!important}
.intro .principles{width:100%!important}

/* Project experience title starts at same x as all other headings */
.project-experience .section-head{
  display:block!important;
}
.project-experience .section-head h2,
.project-experience .section-head p{
  margin-left:0!important;
}
.project-experience #project-list{padding-left:0!important}

/* Approach: no staggered margins; consistent columns */
.work .process{
  display:grid!important;
  grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr!important;
  gap:18px!important;
  align-items:start!important;
}
.work .process>div{margin:0!important;padding:0!important}
.work .process>div:nth-child(even){
  color:#fff!important;
  text-align:center!important;
  padding-top:2px!important;
}
.work .process b{color:var(--mint)!important}

/* Contact aligns to the same master grid */
.contact{
  display:grid!important;
  grid-template-columns:1.05fr 1.4fr!important;
  gap:80px!important;
  align-items:end!important;
}
.contact-details{margin:0!important}

/* Large screens: keep one common left origin rather than separately centering sections */
@media(min-width:1500px){
 .hero,.intro,.expertise,.project-experience,.cross,.work,.placeholder,.contact{
   padding-left:max(7vw,calc((100vw - 1500px)/2))!important;
   padding-right:max(7vw,calc((100vw - 1500px)/2))!important;
 }
}
@media(max-width:900px){
 .hero{grid-template-columns:1fr!important;gap:42px!important}
 .brand-story{border-left:0!important;border-top:1px solid #C8D3D0!important;padding:34px 0 0!important;min-height:auto!important}
 .hero-brand-logo{width:280px!important;margin-bottom:34px!important}
 .work .process{grid-template-columns:1fr!important}
 .work .process>div:nth-child(even){display:none!important}
 .contact{grid-template-columns:1fr!important;gap:38px!important}
}

/* V22 — refined hero brand integration + stronger expertise framing */
:root{
 --v22-green:#2E6848;
 --v22-blue:#1684A8;
 --v22-navy:#0D3348;
}

/* 1. Darker, more authoritative green for the hero emphasis */
.hero h1 em{
 color:var(--v22-green)!important;
}

/* 2. Hero brand story: remove hard dividing lines.
   Logo and philosophy now sit in one continuous composition. */
.brand-story{
 border-left:0!important;
 padding:18px 0 18px 34px!important;
 position:relative!important;
 min-height:360px!important;
}
.brand-story::before{
 content:""!important;
 position:absolute!important;
 left:0!important;
 top:18%!important;
 width:3px!important;
 height:64%!important;
 background:linear-gradient(to bottom,transparent,var(--v22-green) 18%,var(--v22-blue) 82%,transparent)!important;
 border-radius:3px!important;
}
.hero-brand-logo{
 width:min(350px,94%)!important;
 margin:0 0 34px 0!important;
}
.brand-story-copy{
 border-top:0!important;
 padding-top:0!important;
 max-width:430px!important;
 position:relative!important;
}
.brand-story-copy::before{
 content:""!important;
 display:block!important;
 width:64px!important;
 height:4px!important;
 background:linear-gradient(90deg,var(--v22-green),var(--v22-blue))!important;
 margin:0 0 28px 0!important;
 border-radius:4px!important;
}
.brand-story-copy b{
 font-size:23px!important;
 line-height:1.28!important;
 color:var(--v22-navy)!important;
}
.brand-story-copy p{
 margin-top:18px!important;
}

/* 3. Expertise cards: thicker branded framing top AND bottom */
.cards article{
 border-top-width:8px!important;
 border-bottom:8px solid var(--v22-green)!important;
 padding-top:34px!important;
 padding-bottom:32px!important;
}
.cards article:nth-child(even){
 border-top-color:var(--v22-blue)!important;
 border-bottom-color:var(--v22-blue)!important;
}
.cards article:nth-child(3){
 border-top-color:var(--v22-blue)!important;
 border-bottom-color:var(--v22-blue)!important;
}
.cards article:nth-child(5){
 border-top-color:var(--v22-green)!important;
 border-bottom-color:var(--v22-green)!important;
}
.cards article:hover{
 transform:translateY(-4px)!important;
}

/* slightly stronger project link to match thicker frame */
.view-projects{
 color:var(--v22-green)!important;
 font-weight:900!important;
 letter-spacing:.11em!important;
}
.cards article:nth-child(even) .view-projects,
.cards article:nth-child(3) .view-projects{
 color:#147C9E!important;
}

@media(max-width:900px){
 .brand-story{padding:30px 0 0!important}
 .brand-story::before{display:none!important}
 .hero-brand-logo{width:290px!important}
}

/* V23 — integrated brand, map, and expertise experience */

/* HERO: no unfinished-looking rules; use a soft brand field instead */
.brand-story{
  border:0!important;
  padding:34px 10px 34px 54px!important;
  position:relative!important;
  min-height:390px!important;
  overflow:hidden!important;
}
.brand-story::before{display:none!important}
.brand-orbit{
  position:absolute!important;
  width:390px!important;height:390px!important;
  border-radius:50%!important;
  right:-70px!important;top:-50px!important;
  background:radial-gradient(circle at 35% 35%,rgba(46,104,72,.10),rgba(22,132,168,.045) 48%,transparent 70%)!important;
  z-index:0!important;
}
.hero-brand-logo,.brand-story-copy{position:relative!important;z-index:1!important}
.hero-brand-logo{
  width:min(370px,95%)!important;
  margin:18px 0 58px 0!important;
}
.brand-story-copy{
  border:0!important;padding:0!important;
  max-width:430px!important;
}
.brand-story-copy::before{display:none!important}
.brand-story-copy b{color:#0D3348!important;font-size:23px!important}
.brand-story-copy p{color:#586970!important}

/* WHO WE ARE: map is part of the same section, not a separate card */
.about-heading-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(460px,.9fr)!important;
  gap:76px!important;
  align-items:center!important;
  margin-bottom:54px!important;
}
.experience-map{
  padding:0!important;
  margin:0!important;
  background:transparent!important;
}
.map-label{
  color:#A9D7B7!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
  margin:0 0 14px!important;
}
.experience-map svg{width:100%!important;height:auto!important;display:block!important}
.continents path{
  fill:#214A5C!important;
  stroke:#5F8491!important;
  stroke-width:1!important;
  opacity:.78!important;
}
.markers circle{fill:#A9D7B7!important;stroke:#fff!important;stroke-width:2!important}
.markers text{
  fill:#fff!important;
  font-size:13px!important;
  font-weight:700!important;
}
.map-note{
  color:#B9CDD2!important;
  font-size:12px!important;
  line-height:1.5!important;
  margin:8px 0 0!important;
}

/* PROJECT EXPERIENCE: embedded within OUR EXPERTISE, no separate full-width navy band */
.expertise .project-experience{
  background:transparent!important;
  color:#17303D!important;
  margin-top:72px!important;
  padding:54px 0 0!important;
  border-top:1px solid #D7DEDC!important;
}
.expertise .project-experience .section-head{
  display:grid!important;
  grid-template-columns:.8fr 1.2fr!important;
  gap:70px!important;
  align-items:start!important;
}
.expertise .project-experience .section-kicker{color:#4A805E!important}
.expertise .project-experience h2{
  color:#0D3348!important;
  font-size:clamp(34px,3.5vw,54px)!important;
  margin:10px 0 0!important;
}
.expertise .project-experience #project-note,
.expertise .project-experience .project-empty{
  color:#596A70!important;
}
.expertise .project-experience #project-list{
  margin-top:34px!important;
  border-top:1px solid #D7DEDC!important;
}
.expertise .project-experience .project-row{
  background:#F7F9F8!important;
  color:#17303D!important;
  border:0!important;
  border-left:5px solid #4A805E!important;
  margin:12px 0!important;
}
.expertise .project-experience .project-row h3{color:#0D3348!important}
.expertise .project-experience .project-row p{color:#596A70!important}
.expertise .project-experience .project-place{color:#4A805E!important}
.expertise .project-experience .project-no{color:#1684A8!important}

/* CONTACT: website must be visible */
.contact-details .website-link,
.contact-details .website-link:visited{
  color:#FFFFFF!important;
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
  text-decoration:none!important;
  font-weight:700!important;
}
.contact-details .website-link:hover{color:#A9D7B7!important}

/* Footer */
footer{letter-spacing:.08em!important}

@media(max-width:1050px){
  .about-heading-grid{grid-template-columns:1fr!important;gap:34px!important}
  .experience-map{max-width:720px!important}
}
@media(max-width:900px){
  .brand-story{padding:30px 0 0!important;min-height:auto!important}
  .brand-orbit{display:none!important}
  .hero-brand-logo{width:300px!important;margin-bottom:34px!important}
  .expertise .project-experience .section-head{grid-template-columns:1fr!important;gap:18px!important}
}

/* V24 — WHO WE ARE mirrors hero: left narrative / right map */
.about-heading-grid{
  grid-template-columns:minmax(0,1.2fr) minmax(420px,.8fr)!important;
  gap:90px!important;
  align-items:center!important;
  margin-bottom:46px!important;
}
.about-heading-grid>div:first-child{
  justify-self:start!important;
  width:100%!important;
  max-width:660px!important;
}
.about-heading-grid .experience-map{
  justify-self:end!important;
  width:100%!important;
  max-width:600px!important;
}

/* Keep the WHO WE ARE title firmly on the same left origin as hero copy */
.intro .about-heading-grid,
.intro .twocol,
.intro .principles{
  margin-left:0!important;
  margin-right:0!important;
}
.intro .about-heading-grid h2,
.intro .about-heading-grid .section-kicker{
  margin-left:0!important;
  text-align:left!important;
}

/* Map gets more visual presence on the right */
.experience-map svg{
  width:100%!important;
  max-width:600px!important;
}
.map-label,.map-note{
  text-align:left!important;
}

/* Below the top two-column composition, body copy and principles stay aligned to left grid */
.intro .twocol{
  max-width:1040px!important;
  gap:64px!important;
}
.intro .principles{
  width:100%!important;
  max-width:1280px!important;
}

@media(max-width:1050px){
  .about-heading-grid{grid-template-columns:1fr!important;gap:34px!important}
  .about-heading-grid .experience-map{justify-self:start!important;max-width:720px!important}
}

/* V25 — WHO WE ARE mirrors HERO exactly: left / center divider / right */
.about-heading-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,.8fr)!important;
  gap:72px!important;
  align-items:stretch!important;
  margin:0 0 56px!important;
  width:100%!important;
  max-width:1280px!important;
}
.about-heading-grid>div:first-child{
  grid-column:1!important;
  align-self:center!important;
  justify-self:stretch!important;
  max-width:none!important;
  padding-right:0!important;
}
.about-heading-grid .experience-map{
  grid-column:2!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:26px 0 26px 54px!important;
  border-left:1px solid rgba(255,255,255,.30)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

/* Left title uses the exact same visual width logic as hero */
.about-heading-grid>div:first-child .section-kicker,
.about-heading-grid>div:first-child h2{
  margin-left:0!important;
  text-align:left!important;
}
.about-heading-grid>div:first-child h2{
  max-width:720px!important;
}

/* Right map gets the same role/weight as hero logo+story */
.experience-map .map-label{
  margin:0 0 22px!important;
  color:#A9D7B7!important;
}
.experience-map svg{
  width:100%!important;
  max-width:520px!important;
  margin:0!important;
}
.experience-map .map-note{
  max-width:520px!important;
  margin:16px 0 0!important;
}

/* Keep body copy below the mirrored split, exactly aligned with section left edge */
.intro .twocol{
  margin-top:0!important;
  margin-left:0!important;
  max-width:1040px!important;
}
.intro .principles{
  margin-left:0!important;
  width:100%!important;
  max-width:1280px!important;
}

@media(max-width:1050px){
  .about-heading-grid{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  .about-heading-grid .experience-map{
    grid-column:1!important;
    border-left:0!important;
    border-top:1px solid rgba(255,255,255,.30)!important;
    padding:32px 0 0!important;
  }
}

/* V26 — WHO WE ARE exact full-height split, matching hero composition */
.intro{
  position:relative!important;
}

/* Top composition is a full-width two-column region */
.about-heading-grid{
  display:grid!important;
  grid-template-columns:1fr 1px 1fr!important;
  column-gap:54px!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:1280px!important;
  min-height:430px!important;
  margin:0 0 58px!important;
  position:relative!important;
}

/* Create a true center divider spanning the entire top composition */
.about-heading-grid::after{
  content:""!important;
  grid-column:2!important;
  grid-row:1!important;
  width:1px!important;
  height:100%!important;
  background:rgba(255,255,255,.34)!important;
  align-self:stretch!important;
  justify-self:center!important;
}

/* Left: title */
.about-heading-grid>div:first-child{
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:stretch!important;
  max-width:none!important;
  padding:44px 0!important;
}
.about-heading-grid>div:first-child h2{
  max-width:580px!important;
  margin:14px 0 0!important;
}
.about-heading-grid>div:first-child .section-kicker{
  margin:0!important;
}

/* Right: map */
.about-heading-grid .experience-map{
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:stretch!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:44px 0!important;
  border:0!important;
}
.experience-map .map-label{
  margin:0 0 20px!important;
}
.experience-map svg{
  width:100%!important;
  max-width:560px!important;
  margin:0!important;
}
.experience-map .map-note{
  max-width:560px!important;
  margin:16px 0 0!important;
}

/* Hide old pseudo divider if inherited */
.about-heading-grid .experience-map::before,
.about-heading-grid .experience-map::after{
  display:none!important;
}

/* Body below remains a separate aligned block */
.intro .twocol{
  margin-top:0!important;
  max-width:1040px!important;
}
.intro .principles{
  margin-top:58px!important;
}

@media(max-width:1050px){
  .about-heading-grid{
    grid-template-columns:1fr!important;
    min-height:auto!important;
    row-gap:32px!important;
  }
  .about-heading-grid::after{display:none!important}
  .about-heading-grid>div:first-child,
  .about-heading-grid .experience-map{
    grid-column:1!important;
    grid-row:auto!important;
    padding:28px 0!important;
  }
  .about-heading-grid .experience-map{
    border-top:1px solid rgba(255,255,255,.30)!important;
  }
}

/* V28 — exact split: same divider position as hero; all WHO WE ARE content left */
:root{
  --v28-left:1.55fr;
  --v28-right:.8fr;
  --v28-gap:72px;
}

/* HERO split reference */
.hero{
  grid-template-columns:minmax(0,var(--v28-left)) minmax(340px,var(--v28-right))!important;
  gap:var(--v28-gap)!important;
}

/* WHO WE ARE top uses IDENTICAL grid */
.about-heading-grid{
  display:grid!important;
  grid-template-columns:minmax(0,var(--v28-left)) minmax(340px,var(--v28-right))!important;
  gap:var(--v28-gap)!important;
  min-height:330px!important;
  margin:0!important;
  align-items:stretch!important;
}
.about-heading-grid::after{display:none!important}
.about-heading-grid>div:first-child{
  grid-column:1!important;
  align-self:center!important;
  padding:0!important;
}
.about-empty-right{
  grid-column:2!important;
  border-left:1px solid rgba(255,255,255,.34)!important;
  min-height:330px!important;
  width:100%!important;
}

/* Put ALL remaining WHO WE ARE content to the LEFT of the same divider.
   Right side stays blank all the way down. */
.intro{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,var(--v28-left)) minmax(340px,var(--v28-right))!important;
  column-gap:var(--v28-gap)!important;
}
.intro>.about-heading-grid{
  grid-column:1 / -1!important;
  width:100%!important;
}
.intro>.twocol,
.intro>.principles{
  grid-column:1!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
.intro>.twocol{
  grid-template-columns:1fr 1fr!important;
  gap:42px!important;
  margin-top:42px!important;
}
.intro>.principles{
  grid-template-columns:repeat(4,1fr)!important;
  gap:22px!important;
  margin-top:52px!important;
}

/* One continuous divider at the exact right-column boundary, from top to bottom */
.intro::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  /* left column share of usable width plus half the gap */
  left:calc((100% - var(--v28-gap)) * 0.659574 + (var(--v28-gap) / 2))!important;
  width:1px!important;
  background:rgba(255,255,255,.34)!important;
  pointer-events:none!important;
}

/* Remove any old map/divider artifacts */
.experience-map{display:none!important}
.about-empty-right{border-left:0!important}

/* Make sure no content leaks into right side */
.intro>.twocol,
.intro>.principles{
  padding-right:0!important;
}

@media(max-width:1050px){
  .intro{display:block!important}
  .intro::after{display:none!important}
  .about-heading-grid{grid-template-columns:1fr!important;min-height:auto!important}
  .about-empty-right{display:none!important}
  .intro>.twocol{grid-template-columns:1fr!important}
  .intro>.principles{grid-template-columns:1fr 1fr!important}
}
@media(max-width:650px){
  .intro>.principles{grid-template-columns:1fr!important}
}

/* V29 — make the navy divider explicitly visible at the SAME x-position as hero */
.intro{
  position:relative!important;
}
/* The divider is positioned at the start of the same right column used by HERO.
   It spans the full navy section height. */
.intro::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:calc(((100% - 72px) * 0.659574) + 36px)!important;
  width:1px!important;
  background:rgba(255,255,255,.42)!important;
  z-index:10!important;
  pointer-events:none!important;
}
/* Keep every WHO WE ARE content element on the left side */
.intro>.about-heading-grid,
.intro>.twocol,
.intro>.principles{
  position:relative!important;
  z-index:1!important;
}
@media(max-width:1050px){
  .intro::after{display:none!important}
}

/* V30 — explicit visible divider in WHO WE ARE.
   Same split position as hero. No pseudo-element dependency. */
.intro{
  background-image:
    linear-gradient(
      to right,
      transparent 0,
      transparent 65.95%,
      rgba(255,255,255,.55) 65.95%,
      rgba(255,255,255,.55) calc(65.95% + 1px),
      transparent calc(65.95% + 1px),
      transparent 100%
    )!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
}
/* Disable previous divider implementations to avoid conflicts */
.intro::after{display:none!important}
.about-heading-grid::after{display:none!important}
.about-empty-right{border:0!important}
@media(max-width:1050px){
  .intro{background-image:none!important}
}

/* V31 — precise WHO WE ARE positioning */

/* Remove V30 full-background divider; draw a controlled inset divider instead */
.intro{
  background-image:none!important;
  position:relative!important;
}

/* Match the hero divider position:
   hero content starts at master left and divider begins at the right column.
   Inset vertically so it does not touch navy section edges. */
.intro::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:64px!important;
  bottom:64px!important;
  left:66.2%!important;
  width:1px!important;
  background:rgba(255,255,255,.40)!important;
  z-index:5!important;
  pointer-events:none!important;
}

/* Move ALL navy-section copy further left and keep it comfortably clear of divider */
.intro>.about-heading-grid,
.intro>.twocol,
.intro>.principles{
  grid-column:1!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
}
.intro>.about-heading-grid{
  display:block!important;
  min-height:auto!important;
  margin:0 0 58px!important;
}
.intro>.about-heading-grid>div:first-child{
  width:100%!important;
  max-width:620px!important;
  padding:0!important;
}
.intro .about-empty-right{display:none!important}

/* Body copy only occupies left ~60% of navy area */
.intro>.twocol{
  max-width:760px!important;
  grid-template-columns:1fr 1fr!important;
  gap:48px!important;
  margin-top:0!important;
}

/* Four principles also remain fully left of the divider */
.intro>.principles{
  max-width:820px!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:20px!important;
  margin-top:52px!important;
}

/* Shift the section's visual content left relative to previous version */
.intro .about-heading-grid,
.intro .twocol,
.intro .principles{
  transform:translateX(-22px)!important;
}

@media(max-width:1050px){
  .intro::after{display:none!important}
  .intro .about-heading-grid,
  .intro .twocol,
  .intro .principles{transform:none!important}
  .intro>.twocol{grid-template-columns:1fr!important;max-width:none!important}
  .intro>.principles{grid-template-columns:1fr 1fr!important;max-width:none!important}
}
@media(max-width:650px){
  .intro>.principles{grid-template-columns:1fr!important}
}

/* V32 — divider correction.
   IMPORTANT: divider is relative to the section's INNER content area,
   not to the full viewport width. This matches the Hero divider. */

/* Turn off every previous divider implementation */
.intro{
  background-image:none!important;
}
.intro::after{display:none!important}
.about-heading-grid::after{display:none!important}

/* Use the SAME two-column grid as the Hero for the entire navy section.
   The divider is the left border of the right column. */
.intro{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,.8fr)!important;
  column-gap:72px!important;
  position:relative!important;
}

/* Invisible right column spanning the WHOLE section.
   Its left border IS the divider, so x-position exactly matches Hero.
   Top/bottom margins create the requested breathing room. */
.intro::before{
  content:""!important;
  display:block!important;
  grid-column:2!important;
  grid-row:1 / span 20!important;
  border-left:1px solid rgba(255,255,255,.42)!important;
  margin-top:64px!important;
  margin-bottom:64px!important;
  min-height:calc(100% - 128px)!important;
  width:100%!important;
  align-self:stretch!important;
  pointer-events:none!important;
  z-index:0!important;
}

/* All actual WHO WE ARE content stays in left column */
.intro>.about-heading-grid,
.intro>.twocol,
.intro>.principles{
  grid-column:1!important;
  position:relative!important;
  z-index:1!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
.intro>.about-heading-grid{
  display:block!important;
  min-height:auto!important;
  margin-bottom:58px!important;
}
.intro>.about-heading-grid>div:first-child{
  max-width:620px!important;
}
.intro>.twocol{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:44px!important;
  margin-top:0!important;
}
.intro>.principles{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:18px!important;
  margin-top:52px!important;
}

/* Hide obsolete right placeholder */
.about-empty-right{display:none!important}

@media(max-width:1050px){
  .intro{display:block!important}
  .intro::before{display:none!important}
  .intro>.twocol{grid-template-columns:1fr!important}
  .intro>.principles{grid-template-columns:1fr 1fr!important}
}
@media(max-width:650px){
  .intro>.principles{grid-template-columns:1fr!important}
}

/* ============================================================
   V34 STRUCTURAL FIX
   No calculated/pseudo divider. HERO and WHO WE ARE now use
   the exact same two-column geometry.
   ============================================================ */

/* HERO: canonical split geometry */
.hero{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,.8fr)!important;
  column-gap:72px!important;
  padding-left:8vw!important;
  padding-right:8vw!important;
}
.hero>.brand-story{
  border-left:1px solid #D1D9D7!important;
  padding-left:48px!important;
}

/* WHO WE ARE: EXACT SAME grid and padding as HERO */
.intro-fixed{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,.8fr)!important;
  column-gap:72px!important;
  padding-left:8vw!important;
  padding-right:8vw!important;
  position:relative!important;
  background-image:none!important;
}

/* Kill every divider/layout rule inherited from previous experiments */
.intro-fixed::before,
.intro-fixed::after{display:none!important}
.intro-fixed .about-heading-grid,
.intro-fixed .about-empty-right,
.intro-fixed .experience-map{display:none!important}

/* LEFT: every word stays here */
.intro-fixed>.intro-left{
  grid-column:1!important;
  min-width:0!important;
  padding-right:0!important;
  transform:none!important;
}
.intro-fixed .intro-heading{
  margin:0 0 58px!important;
}
.intro-fixed .intro-heading h2{
  max-width:680px!important;
  margin:14px 0 0!important;
}
.intro-fixed .twocol{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:48px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
}
.intro-fixed .principles{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:20px!important;
  width:100%!important;
  max-width:none!important;
  margin:58px 0 0!important;
  transform:none!important;
}

/* RIGHT: intentionally empty.
   The border IS the divider. Same column boundary as HERO.
   64px top/bottom margins give the requested breathing room. */
.intro-fixed>.intro-right-blank{
  grid-column:2!important;
  border-left:1px solid rgba(255,255,255,.42)!important;
  margin:64px 0!important;
  min-height:calc(100% - 128px)!important;
  padding:0!important;
}

/* Keep content from crowding the divider */
.intro-fixed .twocol p{margin-top:0!important}
.intro-fixed .principles>div{min-width:0!important}

/* Wide screen: HERO and WHO WE ARE remain identical.
   Override older special centering rules. */
@media(min-width:1500px){
  .hero,
  .intro-fixed{
    padding-left:8vw!important;
    padding-right:8vw!important;
  }
}

/* Responsive: divider disappears only when columns stack */
@media(max-width:1050px){
  .hero,
  .intro-fixed{
    grid-template-columns:1fr!important;
    column-gap:0!important;
    padding-left:7vw!important;
    padding-right:7vw!important;
  }
  .intro-fixed>.intro-right-blank{display:none!important}
  .intro-fixed .twocol{grid-template-columns:1fr!important}
  .intro-fixed .principles{grid-template-columns:1fr 1fr!important}
}
@media(max-width:650px){
  .intro-fixed .principles{grid-template-columns:1fr!important}
}

/* V37 — integrate professional map, preserve Navy + White institutional system */
.intro-fixed>.intro-right-map-v37{
  grid-column:2!important;
  border-left:1px solid rgba(255,255,255,.42)!important;
  margin:64px 0!important;
  padding:24px 0 24px 48px!important;
  min-height:calc(100% - 128px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.intro-right-map-v37 img{
  display:block!important;
  width:112%!important;
  max-width:none!important;
  height:auto!important;
  margin-left:-2%!important;
  object-fit:contain!important;
  mix-blend-mode:normal!important;
}

/* Give the map side a subtle green brand cue without creating a box */
.intro-right-map-v37::after{
  content:""!important;
  position:absolute!important;
  right:7.5%!important;
  top:19%!important;
  width:7px!important;
  height:62px!important;
  border-radius:8px!important;
  background:#6FAE63!important;
  opacity:.95!important;
}

/* Existing left section remains untouched. */
@media(max-width:1050px){
  .intro-fixed>.intro-right-map-v37{
    grid-column:1!important;
    border-left:0!important;
    border-top:1px solid rgba(255,255,255,.30)!important;
    margin:36px 0 0!important;
    padding:32px 0 0!important;
    min-height:auto!important;
  }
  .intro-right-map-v37 img{width:100%!important;margin-left:0!important}
  .intro-right-map-v37::after{display:none!important}
}

/* Header alignment and readability — October 2026 */
header{
  min-height:84px;
  height:auto;
  padding-left:8vw;
  padding-right:8vw;
  gap:24px;
}
header>.brand,
header>.header-right{
  max-width:none;
  margin-left:0;
  margin-right:0;
}
header>.brand{
  --header-logo-width:185px;
  flex:0 0 auto;
  /* Align the visible logo, allowing for the image's transparent left margin. */
  margin-left:calc(var(--header-logo-width) * -0.057170543);
}
header .brand img{
  width:var(--header-logo-width);
}
header>.header-right{
  min-width:0;
  justify-content:flex-end;
}
header nav{
  flex-wrap:wrap;
  justify-content:flex-end;
  column-gap:28px;
  row-gap:12px;
}
header nav a{
  font-size:14px;
  line-height:1.4;
  white-space:nowrap;
}
header .lang-switch{
  flex:0 0 auto;
}
header .lang-switch button{
  font-size:12px;
  line-height:1.2;
  padding:9px 8px;
}
@media(max-width:1200px){
  header nav{column-gap:18px;row-gap:8px}
  header>.header-right{gap:20px}
}
@media(max-width:1050px){
  header{padding-left:7vw;padding-right:7vw}
}
@media(max-width:900px){
  header>.brand{--header-logo-width:155px}
  header>.header-right{gap:8px}
}

/* Six-section sequence: white / navy / white / navy / white / navy. */
#insights.integrated-insights{
  background:#0D3348!important;
  color:#FFFFFF!important;
}
#insights.integrated-insights h2,
#insights.integrated-insights h3{color:#FFFFFF!important}
#insights.integrated-insights .section-kicker{color:#A9D7B7!important}
#insights.integrated-insights p{color:#E4EDF0!important}
#insights.integrated-insights .cross-lead{
  max-width:900px!important;
  font-size:20px;
  line-height:1.65;
  margin:0 0 42px!important;
}
#insights.integrated-insights .crossgrid>div{
  border-top:1px solid rgba(255,255,255,.28)!important;
  padding-top:24px;
}
#insights.integrated-insights .insights-note{
  border-top:1px solid rgba(255,255,255,.28)!important;
  margin:42px 0 0!important;
  padding-top:24px;
  font-size:16px;
  line-height:1.7;
}
#work.work{background:#FFFFFF!important;color:#17303D!important}
#work.work .section-kicker{color:#4A805E!important}
#work.work h2,#work.work h3,#work.work b{color:#0D3348!important}
#work.work p{color:#52636A!important}
#work.work *{border-color:#D7DEDC!important}
#work.work .process>div:nth-child(even){color:#4A805E!important}
#contact.contact{background:#0D3348!important;color:#FFFFFF!important}
.project-inline[hidden]{display:none!important}
#expertise .project-inline{margin-top:40px!important;scroll-margin-top:110px}
#expertise .project-inline .project-row{
  background:#F7F9F8!important;
  border-color:#D7DEDC!important;
}
#expertise .project-inline h3{color:#0D3348!important}
#expertise .project-inline p{color:#52636A!important}
#expertise .project-inline .project-place,
#expertise .project-inline .project-no{color:#4A805E!important}
@media(max-width:900px){
  #insights.integrated-insights .crossgrid{grid-template-columns:1fr!important;gap:28px}
}

/* Inset story copy slightly from the visible left edge of the logo artwork. */
.hero .brand-story .brand-story-copy{
  box-sizing:border-box!important;
  padding-left:calc(min(21.1531px,5.431202%) + 16px)!important;
  padding-right:0!important;
}
.hero .brand-story .brand-story-copy>b{
  color:#0D3348!important;
  font-weight:900!important;
  -webkit-text-stroke:0.25px currentColor;
}

/* The heading has its own row; the map starts beside the first body paragraph. */
#about.intro-fixed{
  grid-template-rows:auto auto!important;
  row-gap:0!important;
  align-items:start!important;
}
#about.intro-fixed>.intro-heading{
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
}
#about.intro-fixed>.intro-left{
  grid-row:2!important;
  width:100%!important;
  margin:0!important;
  align-self:start!important;
}
#about.intro-fixed>.intro-right-map-v37{
  grid-row:2!important;
  margin:0!important;
  padding:0 0 0 48px!important;
  min-height:0!important;
  align-self:start!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  min-width:0!important;
}
#about .intro-right-map-v37::after{display:none!important}
#about .intro-right-map-v37>img{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  margin:0!important;
  flex:none!important;
}
#about .geography-regions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 22px;
  width:100%;
  margin-top:28px;
}
#about .region-group{
  min-width:0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.25);
}
#about .region-group h3{
  color:#A9D7B7!important;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:0;
  margin:0 0 8px;
}
#about .region-group ul{
  margin:0;
  padding:0;
  list-style:none;
  color:#E4EDF0;
  font-size:15px;
  line-height:1.65;
}
#about .region-group li{display:inline}
#about .region-group li:not(:last-child)::after{content:' · ';color:#A9D7B7}
#about .geography-source{
  margin:24px 0 0!important;
  font-size:12px;
  line-height:1.5;
}
#about .geography-source a{
  color:#BFD1D8;
  text-decoration:underline;
  text-underline-offset:3px;
}
@media(max-width:1200px) and (min-width:1051px){
  #about.intro-fixed>.intro-right-map-v37{padding-left:28px!important}
  #about .geography-regions{grid-template-columns:1fr;gap:18px}
}
@media(max-width:1050px){
  #about.intro-fixed>.intro-right-map-v37{
    grid-row:3!important;
    padding:32px 0 0!important;
    margin:36px 0 0!important;
  }
}
@media(max-width:520px){
  #about .geography-regions{grid-template-columns:1fr;gap:18px}
}
@media(max-width:900px){
  .hero .brand-story .hero-brand-logo{width:min(300px,100%)!important}
  .hero .brand-story .brand-story-copy{padding-left:calc(min(17.1512px,5.717054%) + 12px)!important}
}

/* Emphasize the approach stages and keep both contact links white. */
#work.work .process>div>b{
  display:block;
  color:#2E6848!important;
  font-size:18px!important;
  font-weight:800!important;
  line-height:1.4!important;
  letter-spacing:.06em!important;
}
#work.work .process>div{min-width:0}
#contact.contact .contact-details a.contact-value,
#contact.contact .contact-details a.contact-value:visited,
#contact.contact .contact-details a.contact-value:hover,
#contact.contact .contact-details a.contact-value:focus{
  color:#FFFFFF!important;
}

/* Institution-grouped project experience from the supplied Word document. */
#expertise #project-title{font-size:28px;line-height:1.3;margin:0 0 12px}
#expertise .project-credit{font-weight:700;margin:0 0 24px}
#expertise .institution-projects{display:grid;gap:30px;min-width:0}
#expertise .institution-group{min-width:0;border:1px solid #D7DEDC;background:#FFF}
#expertise .institution-group h4{margin:0;padding:18px 22px;background:#0D3348;color:#FFF;font-size:20px;line-height:1.4}
#expertise .institution-group table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:16px;line-height:1.6}
#expertise .institution-group th{background:#F0F5F2;color:#0D3348;font-size:14px;text-align:left;padding:12px 22px}
#expertise .institution-group th:first-child{width:100%}
#expertise .institution-group td{padding:20px 22px;vertical-align:top;border-top:1px solid #D7DEDC;overflow-wrap:anywhere}
#expertise .institution-group td strong{color:#0D3348}
#expertise .institution-group .assignment-detail{margin:8px 0 0;font-size:16px;line-height:1.6}
#expertise [data-projects]:focus-visible{outline:3px solid #2E6848;outline-offset:4px}
@media(max-width:700px){
 #expertise #project-title{font-size:24px}
 #expertise .institution-group h4{font-size:18px;padding:16px}
 #expertise .institution-group table,#expertise .institution-group tbody,#expertise .institution-group tr,#expertise .institution-group td{display:block;width:100%}
 #expertise .institution-group thead{display:none}
 #expertise .institution-group tr{padding:16px;border-top:1px solid #D7DEDC}
 #expertise .institution-group td{padding:0;border:0}
}

#expertise .institution-group h4{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 22px}
#expertise .institution-group .government-label{font-size:14px;font-weight:600;line-height:1.5;color:#DDEFE3;border:1px solid rgba(255,255,255,.35);border-radius:3px;padding:4px 10px;max-width:100%}