/* A single, cinematic opening connects the four Browne offices. */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.brand-header.header { height:104px; padding:0 5%; gap:32px; justify-content:space-between; border:0; z-index:50; }
.brand-header .brand { width:170px; }
.brand-header .brand img { width:170px; height:96px; }
.header-presence { margin-left:auto; font-size:11px; letter-spacing:.14em; }
.header-actions { display:flex; align-items:center; gap:35px; }
.header-conversation { font-size:14px; display:flex; align-items:center; gap:22px; white-space:nowrap; }
.header-conversation > span { font-size:25px; }
.site-menu-toggle { display:flex; align-items:center; gap:28px; padding:17px 23px; border:1px solid #8aa49380; color:inherit; background:transparent; font-size:14px; }
.site-menu-toggle i { display:grid; gap:6px; width:23px; }
.site-menu-toggle b { height:1px; background:currentColor; width:23px; transition:width .3s; }
.site-menu-toggle b:last-child { width:16px; justify-self:end; }
.site-menu-toggle:hover b:last-child { width:23px; }
.home .brand-header { position:fixed; inset:0 0 auto; justify-content:flex-end; background:transparent; color:white; transition:background .35s,box-shadow .35s; }
.home .brand-header.is-scrolled { background:#092d26f5; box-shadow:0 8px 30px #031e1920; backdrop-filter:blur(14px); }
.menu-brand img { filter:brightness(0) invert(1); }
.home .brand-header .site-menu-toggle { background:#103b3159; border-color:#ffffff50; }

.city-hero { position:relative; isolation:isolate; min-height:800px; height:100svh; display:flex; align-items:center; justify-content:center; padding:135px 7% 270px; overflow:hidden; background:#092d26; color:white; }
.city-scenes,.city-scene,.city-shade { position:absolute; inset:0; }
.city-scenes { z-index:-3; }
.city-scene { opacity:0; transition:opacity 1500ms ease; overflow:hidden; }
.city-scene.is-active { opacity:1; }
.city-poster,.city-video { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.city-poster { transform:scale(1.035); }
.city-scene[data-city="natal"] .city-poster { object-position:65% center; }
.city-video { opacity:0; transition:opacity .65s ease; }
.city-scene.video-playing .city-video { opacity:1; }
.city-scene.is-active .city-poster { animation:cityPan 18s ease-out both; }
.city-shade { z-index:-1; background:linear-gradient(180deg,#03231bc7 0%,#03231b2b 31%,#03231b26 50%,#03231bcc 80%,#03231bf5 100%),linear-gradient(90deg,#06261e65,transparent 70%); }
.city-hero-center { position:relative; width:100%; display:flex; align-items:center; flex-direction:column; text-align:center; }
.hero-overline { font-size:12px; letter-spacing:.23em; line-height:1.7; color:#e5edde; animation:brandReveal 1300ms both; }
.hero-brand-art { position:relative; width:min(74vw,1000px); aspect-ratio:410 / 138; flex-shrink:0; overflow:hidden; margin:14px 0 2px; animation:brandReveal 1600ms 120ms both; }
.hero-brand-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:brightness(0) invert(1); }
.hero-brand-thought { font-size:clamp(23px,2.15vw,33px); line-height:1.3; letter-spacing:-.025em; animation:brandReveal 1500ms 350ms both; }
.hero-brand-thought em { color:var(--lime); font-family:Georgia,serif; font-weight:400; }
.hero-brand-link { margin-top:24px; padding:10px 0 10px 20px; display:inline-flex; align-items:center; gap:30px; font-size:14px; animation:brandReveal 1500ms 500ms both; }
.hero-brand-link > span { display:grid; place-items:center; height:42px; width:42px; border:1px solid #ffffff80; border-radius:50%; font-size:25px; transition:background .3s,transform .3s; }
.hero-brand-link:hover > span { background:var(--lime); color:var(--green); transform:translate(2px,-2px); }
.city-caption { position:absolute; left:5%; bottom:190px; max-width:320px; }
.city-location-state { font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:#deebdc; }
.city-location-name { font-size:clamp(28px,3.1vw,44px); line-height:1.25; letter-spacing:-.035em; }
.city-location-line { display:block; margin-top:9px; font-size:13px; color:#d6e1d4; }
.city-office-link { display:inline-flex; align-items:center; gap:20px; margin-top:15px; border-bottom:1px solid #b4c59f80; padding-bottom:4px; font-size:13px; }
.city-office-link > span { color:var(--lime); font-size:18px; }
.city-caption.is-changing { animation:captionReveal .65s both; }
.city-hero-bottom { position:absolute; bottom:30px; left:5%; right:5%; display:flex; align-items:flex-end; gap:55px; }
.city-navigation { flex:1; min-width:0; }
.city-navigation-label { display:block; font-size:10px; letter-spacing:.2em; color:#c3d6c5; margin-bottom:18px; }
.city-selectors { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.city-select { position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:8px; border:0; border-top:1px solid #ffffff45; padding:20px 0 7px; color:#c0d1c4; background:none; text-align:left; transition:color .3s; }
.city-select > span { font-size:17px; font-weight:500; white-space:nowrap; }
.city-select small { font-size:10px; letter-spacing:.1em; }
.city-select i { position:absolute; top:-1px; left:0; width:100%; height:2px; background:var(--lime); transform:scaleX(0); transform-origin:left; }
.city-select.is-active { color:white; }
.city-select.is-active i { transform:scaleX(1); }
.city-hero.is-rotating .city-select.is-active i { animation:cityProgress 12s linear both; }
.city-select:hover { color:var(--lime); }
.city-hero-tools { display:flex; flex-direction:column; align-items:flex-end; gap:21px; padding-bottom:5px; }
.city-hero .motion-toggle { display:flex; gap:10px; align-items:center; color:#d4e1d5; border:0; background:transparent; padding:8px 0; font-size:12px; }
.city-hero .motion-toggle > span:first-child { width:24px; height:24px; display:grid; place-items:center; border:1px solid #ffffff50; border-radius:50%; font-size:12px; }
.city-explore { display:flex; align-items:center; gap:25px; font-size:13px; white-space:nowrap; }
.city-explore > span { font-size:23px; color:var(--lime); animation:exploreNudge 2.5s ease-in-out infinite; }
.office { scroll-margin-top:130px; }
.office:target { outline:1px solid var(--lime); outline-offset:18px; }

/* A spacious menu that keeps all pages and offices within one click. */
.site-menu { position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0 6%; border:0; background:var(--deep); color:#fff; overflow:auto; }
.site-menu::backdrop { background:#041d18e8; }
.site-menu[open] { display:flex; flex-direction:column; animation:menuReveal .55s cubic-bezier(.2,.8,.2,1) both; }
.menu-is-open { overflow:hidden; }
.site-menu-top { display:flex; align-items:center; justify-content:space-between; min-height:112px; flex-shrink:0; border-bottom:1px solid #7c9e843d; }
.menu-brand { width:175px; }
.menu-brand img { width:175px; height:100px; object-fit:contain; }
.site-menu-close { display:flex; align-items:center; gap:24px; border:1px solid #ffffff45; background:none; color:white; padding:9px 18px; font-size:14px; }
.site-menu-close > span { font-size:30px; line-height:1; font-weight:300; }
.site-menu-content { width:100%; max-width:1340px; margin:auto; padding:45px 0; display:grid; grid-template-columns:1.7fr 1fr; gap:12%; }
.site-menu-links { display:flex; flex-direction:column; }
.site-menu-links > a { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:13px 0; font-size:clamp(29px,3.6vw,54px); line-height:1.2; letter-spacing:-.04em; border-bottom:1px solid #7c9e842e; transition:color .3s,padding .3s; }
.site-menu[open] .site-menu-links > a { animation:menuLinkReveal .7s calc(100ms + var(--menu-order) * 60ms) both; }
.site-menu-links > a > span { color:var(--lime); font-size:30px; opacity:0; transform:translate(-8px,8px); transition:opacity .3s,transform .3s; }
.site-menu-links > a:is(:hover,:focus-visible) { color:var(--lime); padding-left:12px; }
.site-menu-links > a:is(:hover,:focus-visible) > span { opacity:1; transform:none; }
.site-menu-aside { border-left:1px solid #7c9e8442; padding-left:45px; }
.site-menu-aside .eyebrow { color:#c1d2b7; font-size:11px; }
.site-menu-units { display:grid; grid-template-columns:1fr 1fr; gap:24px 30px; margin:30px 0; }
.site-menu-units a { font-size:20px; }
.site-menu-units a > span { display:block; margin-top:5px; font-size:11px; color:#b1cba7; }
.site-menu-units a:hover,.menu-email:hover { color:var(--lime); }
.menu-email { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:14px; border-top:1px solid #7c9e8442; padding-top:24px; overflow-wrap:anywhere; }
.menu-manifesto { font-size:clamp(33px,3vw,45px); line-height:1.15; letter-spacing:-.035em; margin-top:38px; color:#cad9c9; }
.menu-manifesto em { font-family:Georgia,serif; color:var(--lime); }
.site-menu-bottom { border-top:1px solid #7c9e843d; min-height:75px; padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:25px; font-size:12px; }
.site-menu-bottom > span { letter-spacing:.15em; color:#b2c5b4; font-size:10px; }
.site-menu-bottom a { display:flex; gap:20px; align-items:center; }

@keyframes brandReveal { from{opacity:0; translate:0 35px} to{opacity:1; translate:0 0} }
@keyframes captionReveal { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
@keyframes cityPan { from{transform:scale(1.035) translateX(-.5%)} to{transform:scale(1.105) translateX(.5%)} }
@keyframes cityProgress { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes exploreNudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@keyframes menuReveal { from{opacity:0; transform:translateY(-25px)} to{opacity:1; transform:none} }
@keyframes menuLinkReveal { from{opacity:0; transform:translateY(25px)} to{opacity:1; transform:none} }
@media(min-width:1600px) { .city-hero { padding-bottom:290px; } .city-caption { bottom:215px; } .city-hero-bottom { bottom:45px; } }
@media(max-width:1100px) {
  .header-presence { display:none; }
  .city-hero { min-height:800px; }
  .city-caption { bottom:188px; }
  .city-hero-bottom { gap:35px; }
  .city-selectors { gap:18px; }
  .city-select small { display:none; }
  .city-select > span { font-size:16px; }
  .site-menu-content { gap:7%; }
  .site-menu-aside { padding-left:30px; }
}
@media(max-width:760px) {
  .brand-header.header { height:88px; padding:0 6%; }
  .brand-header .brand,.brand-header .brand img { width:143px; }
  .brand-header .brand img { height:84px; }
  .header-conversation { display:none; }
  .site-menu-toggle { padding:12px 14px; gap:17px; font-size:13px; }
  .city-hero { min-height:830px; padding:105px 6% 355px; height:100svh; }
  .hero-overline { font-size:9px; letter-spacing:.17em; max-width:260px; }
  .hero-brand-art { width:92vw; margin:22px 0 20px; }
  .hero-brand-thought { font-size:23px; }
  .hero-brand-link { margin-top:22px; font-size:13px; gap:23px; }
  .city-caption { left:6%; right:6%; bottom:240px; max-width:none; }
  .city-location-state { font-size:10px; }
  .city-location-name { font-size:29px; }
  .city-location-line { display:none; }
  .city-office-link { margin-top:8px; font-size:12px; }
  .city-hero-bottom { left:6%; right:6%; bottom:23px; display:block; }
  .city-navigation-label { margin-bottom:13px; font-size:9px; }
  .city-selectors { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 25px; }
  .city-select { padding:12px 0 2px; }
  .city-select > span { font-size:16px; }
  .city-select small { display:block; }
  .city-hero-tools { flex-direction:row; justify-content:space-between; align-items:center; gap:15px; margin-top:19px; padding-bottom:0; }
  .city-hero .motion-toggle { font-size:10px; }
  .city-explore { font-size:12px; gap:13px; }
  .site-menu { padding-inline:6%; }
  .site-menu-top { min-height:88px; }
  .menu-brand,.menu-brand img { width:140px; }
  .menu-brand img { height:80px; }
  .site-menu-close { font-size:12px; gap:15px; padding:8px 13px; }
  .site-menu-content { grid-template-columns:1fr; gap:35px; padding:25px 0; }
  .site-menu-links > a { font-size:clamp(28px,7.5vw,39px); padding:11px 0; }
  .site-menu-links > a > span { opacity:1; transform:none; font-size:23px; }
  .site-menu-aside { border-left:0; border-top:1px solid #7c9e8442; padding:25px 0 0; }
  .site-menu-units { margin:22px 0; gap:17px 30px; }
  .site-menu-units a { font-size:18px; }
  .menu-manifesto { display:none; }
  .site-menu-bottom { min-height:65px; }
  .site-menu-bottom > span { font-size:9px; max-width:160px; }
  .site-menu-bottom a { font-size:11px; gap:10px; }
}
@media(max-height:700px) and (min-width:761px) {
  .city-hero { min-height:740px; padding-top:125px; padding-bottom:250px; }
  .hero-brand-art { width:min(65vw,780px); margin-block:6px; }
  .city-caption { bottom:174px; }
}
@media(prefers-reduced-motion:reduce) {
  .city-scene,.city-video,.brand-header,.site-menu * { transition:none !important; }
  .city-scene .city-poster,.hero-brand-art,.hero-overline,.hero-brand-thought,.hero-brand-link,.city-caption,.site-menu[open],.site-menu[open] .site-menu-links > a,.city-explore > span,.city-select i { animation:none !important; }
  .city-hero.is-rotating .city-select.is-active i { transform:scaleX(1); }
}