:root {
  --navy: #18345d;
  --navy-deep: #102540;
  --navy-soft: #eef2f6;
  --navy-wash: #f6f8fa;
  --ink: #202933;
  --muted: #68727d;
  --stone: #f3f1ec;
  --white: #ffffff;
  --line: rgba(24, 52, 93, .15);
  --max: 1180px;
  --serif: "Bodoni 72", "Bodoni MT", Didot, "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
::selection { background: rgba(24,52,93,.16); color: var(--navy-deep); }
.section-about { background: var(--white); padding-top: 128px; }
.section-about::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(24,52,93,.06); }

html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--white); line-height: 1.62; -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(var(--max), calc(100% - 80px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 50; background: #14274f; box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 28px rgba(10,28,50,.06); }
.header-inner { width: min(1280px, calc(100% - 54px)); min-height: 96px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 38px; }
.brand { display: block; width: min(460px, 42vw); min-width: 250px; flex: 0 0 auto; }
.brand img { display: block; width: 100%; height: auto; }
.primary-nav { display: flex; gap: 30px; align-items: center; }
.primary-nav a { color: white; font-size: 13px; text-transform: uppercase; letter-spacing: .13em; padding: 12px 0; position: relative; opacity: .86; transition: opacity .2s ease; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 7px; height: 1px; background: white; transition: right .25s ease; }
.primary-nav a:hover, .primary-nav a.active { opacity: 1; }
.primary-nav a:hover::after, .primary-nav a.active::after { right: 0; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 10px; }
.menu-toggle span { width: 24px; height: 1px; background: white; display: block; margin: 5px 0; }
.section { position: relative; padding: 110px 0; scroll-margin-top: 94px; }
.section-label { position: absolute; top: 45px; left: max(28px, calc((100vw - var(--max))/2)); font-size: 11px; text-transform: uppercase; letter-spacing: .24em; color: rgba(24,52,93,.66); }
h1,h2,h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.015em; }
h1 { font-size: clamp(48px, 5.7vw, 86px); line-height: 1.02; color: var(--navy); margin-bottom: 34px; }
h2 { font-size: clamp(44px, 4.5vw, 68px); line-height: 1.05; color: var(--navy); margin-bottom: 64px; }
h3 { font-size: 31px; line-height: 1.15; color: var(--navy); }
p { margin: 0 0 22px; font-size: 15px; }
.eyebrow { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .23em; font-size: 11px; color: rgba(24,52,93,.62); }
.about-grid { display: grid; grid-template-columns: minmax(300px, .93fr) minmax(400px, 1.07fr); align-items: center; gap: clamp(55px, 8vw, 115px); padding-top: 24px; }
.about-image { overflow: hidden; background: #dedbd4; }
.about-image img { aspect-ratio: 2/3; object-fit: cover; transition: transform .8s ease; }
.about-image:hover img { transform: scale(1.015); }
.about-copy { max-width: 600px; }
.section-services { background: var(--navy-wash); border-top: 1px solid rgba(24,52,93,.06); border-bottom: 1px solid rgba(24,52,93,.06); }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service { min-height: 520px; padding: 42px 46px 52px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-number { display: block; font-size: 11px; letter-spacing: .2em; color: rgba(24,52,93,.48); margin-bottom: 58px; }
.service h3 { max-width: 410px; margin-bottom: 30px; }
.service p { color: #505b66; }
.section-team { background: var(--white); }
.team-list { border-top: 1px solid var(--line); }
.person { display: grid; grid-template-columns: 265px 1fr; gap: 55px; padding: 58px 0 66px; border-bottom: 1px solid var(--line); align-items: start; }
.person-image img { aspect-ratio: 1; object-fit: cover; }
.person-copy h3 { margin-bottom: 24px; font-size: 38px; }
.person-copy p { max-width: 820px; color: #505b66; }
.section-projects { background: var(--navy-deep); }
.section-projects .section-label { color: rgba(255,255,255,.55); }
.section-projects h2 { color: white; }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 30px; }
.project-card { color: white; }
.project-card img { aspect-ratio: 286 / 335; object-fit: cover; background: #243f68; box-shadow: 0 10px 28px rgba(4,16,30,.16); }
.project-copy { padding-top: 23px; }
.project-copy h3 { color: white; font-size: 30px; margin-bottom: 13px; }
.project-copy p { color: rgba(255,255,255,.73); font-size: 13px; line-height: 1.65; }
.section-experience { background: var(--stone); }
.logo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--line); }
.logo-tile { position: relative; min-height: 196px; padding: 26px 28px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(255,255,255,.68); transition: background .22s ease, box-shadow .22s ease; }
.logo-tile::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; pointer-events: none; transition: border-color .22s ease; }
.logo-tile:hover, .logo-tile:focus-visible { background: var(--white); box-shadow: inset 0 0 0 1px rgba(24,52,93,.04); outline: none; }
.logo-tile:hover::after, .logo-tile:focus-visible::after { border-color: rgba(24,52,93,.22); }
.logo-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; text-align: center; }
.logo-stack--brand { width: 100%; max-width: 230px; margin: 0 auto; }
.logo-mark, .logo-wordmark { display: block; width: auto; height: auto; object-fit: contain; opacity: .9; transition: transform .25s ease, opacity .25s ease; margin-left: auto; margin-right: auto; }
.logo-mark { max-width: 210px; max-height: 110px; }
.logo-wordmark { max-width: 188px; max-height: 34px; }
.logo-tile:hover .logo-mark, .logo-tile:focus-visible .logo-mark,
.logo-tile:hover .logo-wordmark, .logo-tile:focus-visible .logo-wordmark { transform: scale(1.035); opacity: 1; }
.logo-arrow { position: absolute; top: 15px; right: 17px; font-size: 14px; line-height: 1; color: rgba(24,52,93,.30); opacity: 0; transform: translate(-3px, 3px); transition: opacity .2s ease, transform .2s ease; }
.logo-tile:hover .logo-arrow, .logo-tile:focus-visible .logo-arrow { opacity: 1; transform: translate(0,0); }
.logo-tile--lescargot img { max-width: 218px; max-height: 132px; }
.logo-tile--pembroke img { max-width: 132px; max-height: 132px; }
.contact-block { margin-top: 90px; padding: 52px 0 0; border-top: 1px solid var(--line); display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.contact-block h3 { font-size: 42px; }
address { font-style: normal; text-align: right; font-size: 15px; line-height: 1.8; }
address a { border-bottom: 1px solid rgba(24,52,93,.30); }
.site-footer { background: #0c1e35; color: rgba(255,255,255,.72); padding: 36px 0; font-size: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.footer-brand { color: white; font-family: var(--serif); font-size: 18px; }
.footer-inner a { text-align: right; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } }
@media (max-width: 980px) {
  .wrap { width: min(var(--max), calc(100% - 48px)); }
  .header-inner { width: calc(100% - 32px); min-height: 82px; }
  .brand { min-width: 210px; width: 360px; }
  .menu-toggle { display: block; position: relative; z-index: 60; }
  .primary-nav { position: fixed; inset: 82px 0 auto 0; background: #14274f; padding: 28px 26px 32px; display: grid; gap: 3px; transform: translateY(-125%); opacity: 0; pointer-events: none; transition: .25s ease; box-shadow: 0 15px 30px rgba(0,0,0,.16); }
  .primary-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .primary-nav a { padding: 12px 4px; }
  .section { scroll-margin-top: 82px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-image { max-width: 560px; }
  .about-copy { max-width: 760px; }
  .person { grid-template-columns: 220px 1fr; gap: 38px; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 36px); }
  .brand { width: min(290px, 62vw); min-width: 0; }
  .section { padding: 88px 0; }
  .section-label { top: 30px; left: 18px; }
  h1 { font-size: 50px; }
  h2 { font-size: 46px; margin-bottom: 48px; }
  .about-grid { gap: 42px; padding-top: 18px; }
  .services-grid { grid-template-columns: 1fr; }
  .service { min-height: 0; padding: 34px 28px 38px; }
  .service-number { margin-bottom: 35px; }
  .person { grid-template-columns: 1fr; gap: 28px; padding: 42px 0 50px; }
  .person-image { width: min(265px, 72vw); }
  .person-copy h3 { font-size: 34px; }
  .projects-grid { grid-template-columns: 1fr; gap: 45px; }
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-tile { min-height: 164px; padding: 20px 18px; }
  .logo-mark { max-width: 180px; max-height: 96px; }
  .logo-wordmark { max-width: 160px; max-height: 28px; }
  .logo-tile--pembroke .logo-mark { max-width: 90px; max-height: 90px; }
  .logo-tile--pembroke .logo-wordmark { max-width: 150px; max-height: 26px; }
    .contact-block { align-items: start; flex-direction: column; margin-top: 65px; }
  address { text-align: left; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-inner a { text-align: left; }
}

/* Experience wall — local high-resolution/transparent brand marks */
.logo-tile--arts .logo-mark { max-width: 174px; max-height: 118px; }
.logo-tile--plaza .logo-mark { max-width: 224px; max-height: 112px; }
.logo-tile--savoy .logo-mark { max-width: 216px; max-height: 62px; }
.logo-tile--devonshire .logo-mark { max-width: 224px; max-height: 72px; }
.logo-tile--lescargot .logo-mark { max-width: 218px; max-height: 118px; }
.logo-tile--dorchester .logo-mark { max-width: 220px; max-height: 64px; }
.logo-tile--simpsons .logo-mark { max-width: 220px; max-height: 78px; opacity: .94; }
.logo-tile--scotts .logo-mark { max-width: 216px; max-height: 84px; }
.logo-tile--langans .logo-mark { max-width: 184px; max-height: 94px; }
.logo-tile--mandarin .logo-mark { max-width: 146px; max-height: 118px; }
.logo-tile--snail .logo-mark { max-width: 206px; max-height: 110px; opacity: .96; }
.logo-tile--pembroke { padding-left: 20px; padding-right: 20px; }
.logo-tile--pembroke .logo-stack--brand { gap: 8px; width: 100%; max-width: 188px; margin: 0 auto; }
.logo-tile--pembroke .logo-mark { max-width: 110px; max-height: 110px; opacity: .92; }
.logo-tile--pembroke .logo-wordmark { display: block; width: 100%; max-width: 188px; max-height: 32px; opacity: .97; margin-left: auto; margin-right: auto; }
.logo-tile--homehouse .logo-stack--brand { gap: 9px; }
.logo-tile--homehouse .logo-mark { max-width: 126px; max-height: 92px; opacity: .92; }
.logo-tile--homehouse .logo-wordmark { max-width: 210px; max-height: 36px; }
.logo-tile--nanson .logo-stack--brand { gap: 7px; }
.logo-tile--nanson .logo-mark { max-width: 118px; max-height: 118px; opacity: .96; }
.logo-tile--nanson .logo-wordmark { max-width: 204px; max-height: 32px; }
.logo-tile--admiralty .logo-mark { max-width: 220px; max-height: 108px; opacity: .9; }
@media (max-width: 700px) {
  .logo-tile--plaza .logo-mark, .logo-tile--devonshire .logo-mark, .logo-tile--simpsons .logo-mark { max-width: 170px; }
  .logo-tile--homehouse .logo-mark { max-width: 112px; max-height: 84px; }
  .logo-tile--homehouse .logo-wordmark { max-width: 158px; max-height: 27px; }
  .logo-tile--nanson .logo-mark { max-width: 104px; max-height: 104px; }
  .logo-tile--nanson .logo-wordmark { max-width: 156px; max-height: 27px; }
}