/* ============================================================
   HLA — Hafeez Law Associates
   Main stylesheet
============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --ink:        #151A23;
  --ink-2:      #1B2130;
  --ivory:      #FAF8F2;
  --paper:      #F2EDE2;
  --brass:      #AE8B4A;
  --brass-soft: #C9A968;
  --brass-dim:  rgba(174,139,74,.35);
  --body:       #4B515B;
  --hairline:   #E4DCCA;
  --hairline-d: rgba(201,169,104,.22);

  --ok:   #2F7D5B;
  --err:  #B23A3A;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.2,1);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  font-size:16px; line-height:1.7;
  color:var(--body);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.wrap{ width:min(var(--wrap),92%); margin-inline:auto; }

/* ---- hide DB-driven content until live content is applied (no flash of stale defaults) ---- */
[data-bind], [data-bind-html], .logo{ transition:opacity .4s var(--ease); }
/* .logo is no longer hidden here: the header/footer logos are hardcoded repo
   files now (not swapped in from the database), so they can render instantly. */
html.hla-loading [data-bind],
html.hla-loading [data-bind-html]{ visibility:hidden !important; opacity:0 !important; }

::selection{ background:var(--brass); color:#fff; }

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--brass); color:#fff; padding:10px 18px;
  font:600 12px/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:12px; }

/* shared type */
.eyebrow{
  font:600 11px/1 var(--font-body);
  letter-spacing:.26em; text-transform:uppercase; color:var(--brass);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--brass); }
.section-title{
  font:600 clamp(32px,4.4vw,52px)/1.08 var(--font-display);
  color:var(--ink); letter-spacing:.01em; margin-top:16px;
}
.section-title em{ font-style:italic; font-weight:500; color:var(--brass); }
.section-head{ margin-bottom:56px; }
.section-head.center{ text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .eyebrow::before{ display:none; }
section{ padding:110px 0; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font:600 12px/1 var(--font-body);
  letter-spacing:.18em; text-transform:uppercase;
  padding:18px 32px; min-height:52px;
  border:1px solid var(--brass); color:var(--brass);
  background:transparent; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover{ background:var(--brass); color:#fff; }
.btn:hover .arrow{ transform:translateX(5px); }
.btn.solid{ background:var(--brass); color:#fff; }
.btn.solid:hover{ background:var(--brass-soft); border-color:var(--brass-soft); }
.btn.on-dark{ color:var(--brass-soft); border-color:var(--brass-dim); }
.btn.on-dark:hover{ background:var(--brass); border-color:var(--brass); color:#fff; }
.btn[disabled]{ opacity:.6; cursor:progress; }

/* fill-from-bottom hover (homepage “View all” buttons) */
.btn.fill-up{ position:relative; overflow:hidden; z-index:0; background:transparent; }
.btn.fill-up > *{ position:relative; z-index:1; }
.btn.fill-up::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--brass); transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.btn.fill-up:hover{ background:transparent; color:#fff; border-color:var(--brass); }
.btn.fill-up:hover::before{ transform:scaleY(1); }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }

/* ---------- TOP BAR ---------- */
.topbar{ background:var(--ink); color:rgba(255,255,255,.72); font-size:12.5px; letter-spacing:.04em; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; min-height:42px; gap:20px; }
.topbar a{ display:inline-flex; align-items:center; gap:8px; transition:color .3s; }
.topbar a:hover{ color:var(--brass-soft); }
.topbar svg{ width:13px; height:13px; stroke:var(--brass-soft); }
.topbar .consult{ color:var(--brass-soft); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:11px; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,242,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s, box-shadow .4s;
}
.nav.scrolled{ border-bottom-color:var(--hairline); box-shadow:0 12px 32px -24px rgba(21,26,35,.35); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:86px; }
.logo{ display:flex; align-items:center; gap:16px; }
.logo .mono{ font:600 30px/1 var(--font-display); color:var(--ink); letter-spacing:.05em; }
.logo .divider{ width:1px; height:36px; background:var(--brass); }
.logo .full{ font:600 12px/1.5 var(--font-body); letter-spacing:.24em; text-transform:uppercase; color:var(--ink); }
.logo .full span{ display:block; color:var(--brass); font-weight:500; letter-spacing:.3em; font-size:9.5px; margin-top:3px; }
/* uploaded logo image (replaces the text logo) */
.logo.has-logo-img{ gap:0; }
.logo-img{ height:42px; width:auto; max-width:210px; object-fit:contain; display:block; }
.foot-brand .logo-img{ height:46px; }

.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  font:500 12.5px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); padding:8px 0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--brass);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.active{ color:var(--brass); }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:10px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .3s, opacity .3s; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:#12161f center/cover no-repeat;
  background-image:url("../images/banner/hero.jpg");
  color:#fff; overflow:hidden; padding:0;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(174,139,74,.20), transparent 55%),
    linear-gradient(180deg, rgba(18,22,31,.74) 0%, rgba(18,22,31,.60) 42%, rgba(18,22,31,.90) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  min-height:min(90vh,760px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:130px 0 140px;
}
.hero .est{
  font:600 11px/1 var(--font-body); letter-spacing:.34em; text-transform:uppercase;
  color:var(--brass-soft); display:flex; align-items:center; gap:18px;
}
.hero .est::before,.hero .est::after{ content:""; width:44px; height:1px; background:var(--brass-dim); }
.hero h1{
  font:500 clamp(29px,6.4vw,86px)/1.06 var(--font-display);
  letter-spacing:.01em; margin:28px 0 10px; max-width:none; white-space:nowrap;
}
.hero h1 em{ font-style:italic; color:var(--brass-soft); }
.hero .roles{
  font:400 13px/1 var(--font-body); letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:44px;
}
.hero .roles i{ font-style:normal; color:var(--brass); font-size:8px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

.hero .est,.hero h1,.hero .roles,.hero-cta{ text-shadow:0 1px 24px rgba(0,0,0,.28); }

/* ---------- HERO SLIDESHOW (F7) ---------- */
/* Ken-Burns cross-fading cover images layered over the .hero element
   background. Z-order (§5.8): element bg < slides(0) < overlay(1) < inner(2). */
.hero{ --hero-zoom:1.08; --hero-interval:6s; --hero-fade:1200ms; --hero-kb:7.2s; }
.hero-slides{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; background:inherit;
}
.hero-slide{
  position:absolute; inset:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transform:scale(1);
  transition:opacity var(--hero-fade) var(--ease);
  will-change:opacity, transform;
}
.hero-slide.is-active{ opacity:1; }
.hero-slide.is-zooming{
  animation:heroKen var(--hero-kb) linear both;
}
@keyframes heroKen{
  from{ transform:scale(1); }
  to{ transform:scale(var(--hero-zoom)); }
}

/* typewriter caret */
.hero-caret{
  display:inline-block; width:.06em; margin-left:.04em;
  color:var(--brass-soft); font-weight:400;
  animation:heroCaretBlink 1s steps(1,end) infinite;
}
@keyframes heroCaretBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

@media (prefers-reduced-motion:reduce){
  .hero-slide.is-zooming{ animation:none; transform:none; }
  .hero-caret{ animation:none; opacity:1; }
}

/* ---------- WHO WE ARE ---------- */
.about{ background:var(--ivory); }
.about-grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(48px,7vw,110px); align-items:center;
}
.year-block{ position:relative; text-align:center; padding:60px 20px; }
.year-block::before{ content:""; position:absolute; inset:0; border:1px solid var(--hairline); }
.year-block::after{ content:""; position:absolute; inset:14px; border:1px solid var(--brass-dim); }
.year-block .num{ font:500 clamp(90px,10vw,150px)/1 var(--font-display); color:var(--ink); font-variant-numeric:lining-nums; }
.year-block .num .hl{ color:var(--brass); }
.year-block .cap{ font:600 11px/1.8 var(--font-body); letter-spacing:.26em; text-transform:uppercase; color:var(--body); margin-top:14px; }
.about-copy p{ margin-bottom:22px; max-width:56ch; }
.about-copy p.lead{ font:500 clamp(19px,2vw,23px)/1.6 var(--font-display); color:var(--ink); }
.about-copy p.lead::first-letter{ font:600 3.1em/0.82 var(--font-display); color:var(--brass); float:left; padding:8px 12px 0 0; }
.about-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; align-items:stretch; }
/* both buttons share one equal width, and match height */
.about-cta .btn{ flex:1 1 220px; min-width:0; }

/* ---------- WHO WE ARE — full profile page ---------- */
.about-page{ background:var(--ivory); }
.about-prose{ max-width:760px; margin-inline:auto; }
.about-prose p{ margin-bottom:16px; font-size:15.5px; line-height:1.85; color:var(--body); }
.about-prose > p:first-child{ font:500 clamp(18px,1.9vw,21px)/1.7 var(--font-display); color:var(--ink); }
.about-prose p:last-child{ margin-bottom:0; }
.dt-head{
  font:600 12px/1.4 var(--font-body); letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin:34px 0 14px; display:flex; align-items:center; gap:14px;
}
.dt-head::after{ content:""; height:1px; flex:1; background:var(--hairline); }
.about-prose .exp-list{ margin:8px 0 16px; }

/* ---------- EXPERTISE ---------- */
.expertise{ background:var(--paper); border-block:1px solid var(--hairline); }
.exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--hairline); background:var(--hairline); gap:1px; }
/* home expertise = minimal icon + name tiles, links to the full Areas page */
.exp-card{
  background:var(--ivory); position:relative; overflow:hidden;
  min-height:238px; padding:44px 30px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; text-decoration:none; color:inherit;
  transition:background .45s var(--ease);
}
.exp-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease); }
.exp-card:hover::before{ transform:scaleX(1); }
.exp-card:hover{ background:#fff; }
.exp-card .icon{
  width:60px; height:60px; margin-bottom:24px;
  stroke:var(--brass); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .5s var(--ease);
}
.exp-card:hover .icon{ transform:translateY(-5px) scale(1.05); }
.exp-card h3{ font:600 22px/1.3 var(--font-display); color:var(--ink); margin:0; max-width:15ch; transition:color .35s var(--ease); }
.exp-card:hover h3{ color:var(--brass); }

/* “View all …” button row under a section grid */
.section-cta{ margin-top:clamp(40px,5vw,56px); text-align:center; }

/* ---------- SUBPAGE HERO (Areas / Team pages) ---------- */
.subpage-hero{
  background:radial-gradient(92% 130% at 50% -30%, rgba(174,139,74,.16), transparent 62%), var(--ink);
  color:#fff; text-align:center; padding:clamp(74px,10vw,120px) 0 clamp(50px,7vw,80px);
}
.subpage-hero .eyebrow{ color:var(--brass-soft); justify-content:center; }
.subpage-hero .eyebrow::before{ display:none; }
.subpage-title{
  font:500 clamp(38px,6vw,68px)/1.06 var(--font-display);
  letter-spacing:.012em; margin-top:18px; color:#fff;
}
.subpage-title em{ font-style:italic; color:var(--brass-soft); }
.subpage-lead{ max-width:60ch; margin:22px auto 0; color:rgba(255,255,255,.72); font-size:16.5px; line-height:1.7; }

/* ---------- FULL AREAS PAGE ---------- */
.expertise-page{ background:var(--paper); border-block:1px solid var(--hairline); }

/* Areas of Expertise — full-width accordion: icon + heading; click to expand */
.exp-full-grid{ background:var(--ivory); border:1px solid var(--hairline); border-radius:4px; overflow:hidden; box-shadow:0 30px 60px -40px rgba(21,26,35,.35); }
.exp-full{ border-top:1px solid var(--hairline); }
.exp-full:first-child{ border-top:none; }
.exp-full-head{
  width:100%; display:flex; align-items:center; gap:clamp(16px,2vw,24px);
  background:transparent; border:none; cursor:pointer; text-align:left; color:inherit;
  padding:clamp(20px,2.5vw,30px) clamp(22px,3vw,38px);
  transition:background .35s var(--ease);
}
.exp-full-head:hover,
.exp-full.open > .exp-full-head{ background:#fff; }
.exp-full-head .icon{
  width:40px; height:40px; flex:none;
  stroke:var(--brass); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--ease);
}
.exp-full-head:hover .icon,
.exp-full.open > .exp-full-head .icon{ transform:scale(1.08); }
.exp-full-name{
  flex:1; min-width:0;
  font:600 clamp(19px,2vw,26px)/1.25 var(--font-display); color:var(--ink);
  transition:color .3s var(--ease);
}
.exp-full-head:hover .exp-full-name,
.exp-full.open > .exp-full-head .exp-full-name{ color:var(--brass); }
/* publication author/date subtitle under the title */
.pub-meta{
  display:block; margin-top:5px;
  font:500 12.5px/1.4 var(--font-body); letter-spacing:.02em;
  color:var(--body); text-transform:none;
}
/* +/− toggle indicator */
.exp-full-plus{ position:relative; width:20px; height:20px; flex:none; }
.exp-full-plus::before,.exp-full-plus::after{
  content:""; position:absolute; background:var(--brass); border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.exp-full-plus::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
.exp-full-plus::after{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
.exp-full.open .exp-full-plus::after{ transform:translateX(-50%) scaleY(0); opacity:0; }
/* collapsible panel — max-height animated to the exact content height (set by JS) */
.exp-full-panel{ max-height:0; overflow:hidden; background:#fff; transition:max-height .5s var(--ease); }
.exp-full-desc{ padding:2px clamp(22px,3vw,38px) clamp(24px,3vw,32px) clamp(58px,7vw,80px); }
.exp-full-desc p{ font-size:14.5px; line-height:1.78; margin-bottom:12px; text-align:justify; }
.exp-full-desc p:last-child{ margin-bottom:0; }

/* ===== publications index (list of titles) ===== */
.pub-index{ padding:clamp(18px,3vw,34px) 0 clamp(50px,7vw,90px); }
.pub-list{ border-top:1px solid var(--hairline); }
.pub-list a{ display:block; padding:22px clamp(4px,1.6vw,18px); border-bottom:1px solid var(--hairline); }
.pub-list .pub-t{ display:block; font:600 clamp(16.5px,1.9vw,20px)/1.42 var(--font-display); color:var(--brass); transition:color var(--ease); }
.pub-list a:hover .pub-t,
.pub-list a:focus-visible .pub-t{ color:var(--brass-soft); }
.pub-list .pub-m{ display:block; margin-top:6px; font:500 12.5px/1.45 var(--font-body); letter-spacing:.02em; color:var(--body); text-transform:none; }

/* ===== single publication reading page ===== */
.pub-read{ padding:clamp(26px,4vw,54px) 0 clamp(50px,7vw,90px); }
.pub-read .wrap{ max-width:820px; }
.pub-back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:26px; font:500 12px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--brass); }
.pub-back:hover{ color:var(--ink); }
.pub-article p{ font-size:15.5px; line-height:1.85; margin:0 0 16px; text-align:justify; color:var(--body); }
.pub-article p:last-child{ margin-bottom:0; }
.pub-article h2{ font:600 clamp(18px,2.2vw,23px)/1.32 var(--font-display); color:var(--ink); margin:34px 0 12px; }
.pub-article h3{ font:600 15.5px/1.4 var(--font-body); color:var(--ink); margin:24px 0 8px; letter-spacing:.01em; }
.pub-article .pub-abstract{ font-style:italic; border-left:2px solid var(--brass); padding-left:18px; margin-bottom:26px; }
.pub-article blockquote{ margin:0 0 16px; padding-left:18px; border-left:2px solid var(--hairline); font-style:italic; }
.exp-list{ margin:6px 0 14px; display:grid; gap:7px; }
.exp-list li{ position:relative; padding-left:20px; font-size:14px; line-height:1.65; }
.exp-list li::before{ content:"—"; position:absolute; left:0; color:var(--brass); }

/* team bio read-more (Our Team page) */
.bio-more{
  margin-top:16px; background:none; border:none; cursor:pointer;
  font:600 10.5px/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); display:inline-flex; align-items:center; gap:8px; padding:5px 0;
}
.bio-more .arrow{ transition:transform .35s var(--ease); }
.bio-more:hover .arrow{ transform:translateX(4px); }
.member-full.bio-open .bio-more .arrow{ transform:rotate(-90deg); }
.page-loading{ padding:48px 0; text-align:center; color:var(--body); opacity:.7; }

/* ---------- LEGACY QUOTE ---------- */
.legacy{
  background:radial-gradient(90% 120% at 50% -20%, rgba(174,139,74,.14), transparent 60%), var(--ink);
  color:#fff; text-align:center;
}
.legacy .mark{ font:500 90px/0.4 var(--font-display); color:var(--brass); display:block; margin-bottom:8px; }
.legacy blockquote{ font:500 clamp(24px,3.2vw,36px)/1.45 var(--font-display); font-style:italic; max-width:22ch; margin:0 auto 30px; }
.legacy .who{ font:600 11px/1.8 var(--font-body); letter-spacing:.26em; text-transform:uppercase; color:var(--brass-soft); }
.legacy .who span{ display:block; color:rgba(255,255,255,.5); font-weight:400; letter-spacing:.18em; }

/* ---------- TEAM ---------- */
.team{ background:var(--ivory); }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); }
.member{ position:relative; }
.member-media{ position:relative; aspect-ratio:4/5; background:var(--ink-2); overflow:visible; }
.member-media::before{
  content:""; position:absolute; inset:0; border:1px solid var(--brass-dim);
  transform:translate(14px,14px); transition:transform .55s var(--ease); pointer-events:none; z-index:0;
}
.member:hover .member-media::before,
.member:focus-within .member-media::before{ transform:translate(-8px,-8px); }
.member-media .frame{ position:absolute; inset:0; overflow:hidden; z-index:1; background:var(--ink-2); }
.member-media .frame > img,
.member-media .frame > svg{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) sepia(.14) contrast(1.02); transform:scale(1.001);
  transition:filter .6s var(--ease), transform .8s var(--ease);
}
.member:hover .frame > img, .member:hover .frame > svg,
.member:focus-within .frame > img, .member:focus-within .frame > svg{ filter:grayscale(0) sepia(0); transform:scale(1.06); }

.member-veil{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:56px 26px 22px;
  background:linear-gradient(180deg, rgba(21,26,35,0) 0%, rgba(21,26,35,.88) 42%, rgba(21,26,35,.96) 100%);
  transform:translateY(38px); opacity:0;
  transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.member:hover .member-veil,
.member:focus-within .member-veil{ transform:translateY(0); opacity:1; }
.member-veil .q-label{ font:600 9.5px/1 var(--font-body); letter-spacing:.3em; text-transform:uppercase; color:var(--brass-soft); display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.member-veil .q-label::after{ content:""; height:1px; flex:1; background:var(--hairline-d); }
.member-veil ul{ display:grid; gap:6px; }
.member-veil li{ font:400 12.5px/1.5 var(--font-body); color:rgba(255,255,255,.85); display:flex; gap:10px; }
.member-veil li::before{ content:"—"; color:var(--brass); flex:none; }

.member-rail{ position:absolute; top:16px; right:16px; z-index:3; display:flex; flex-direction:column; gap:10px; }
.member-rail a{
  width:40px; height:40px; display:grid; place-items:center;
  background:rgba(21,26,35,.55); border:1px solid var(--hairline-d);
  backdrop-filter:blur(6px); color:var(--brass-soft);
  opacity:0; transform:translateY(-10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s, color .3s, border-color .3s;
}
.member-rail a svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6; }
.member-rail a:hover{ background:var(--brass); color:#fff; border-color:var(--brass); }
.member:hover .member-rail a,
.member:focus-within .member-rail a{ opacity:1; transform:none; }
.member-rail a:nth-child(1){ transition-delay:.05s; }
.member-rail a:nth-child(2){ transition-delay:.12s; }
.member-rail a:nth-child(3){ transition-delay:.19s; }

.member-meta{ padding:24px 4px 0; position:relative; }
.member-meta::before{ content:""; position:absolute; top:0; left:4px; width:34px; height:1px; background:var(--brass); transition:width .5s var(--ease); }
.member:hover .member-meta::before{ width:76px; }
.member-meta h3{ font:600 25px/1.2 var(--font-display); color:var(--ink); padding-top:16px; }
.member-meta .role{ font:600 10.5px/1.6 var(--font-body); letter-spacing:.24em; text-transform:uppercase; color:var(--brass); margin-top:6px; }
.member-meta .mail{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--body); margin-top:12px; border-bottom:1px solid transparent; transition:color .3s, border-color .3s; }
.member-meta .mail svg{ width:14px; height:14px; stroke:var(--brass); fill:none; stroke-width:1.6; }
.member-meta .mail:hover{ color:var(--ink); border-color:var(--brass); }

/* full Team page: bios under each member */
.team-page .team-grid{ grid-template-columns:repeat(3,1fr); }
.member-full .member-bio{ position:relative; overflow:hidden; max-height:6.4em; margin-top:16px; transition:max-height .45s var(--ease); }
.member-full .member-bio p{ font-size:13.5px; line-height:1.7; color:var(--body); margin-bottom:8px; }
.member-full .member-bio p:last-child{ margin-bottom:0; }
.member-full .member-bio::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2.6em;
  background:linear-gradient(rgba(250,248,242,0), var(--ivory)); pointer-events:none; transition:opacity .3s;
}
.member-full.bio-open .member-bio{ max-height:200em; }
.member-full.bio-open .member-bio::after,
.member-full.no-clamp .member-bio::after{ opacity:0; }
.member-full.no-clamp .member-bio{ max-height:none; }

/* ---------- TEAM BY CITY (F5) ---------- */
/* NOTE: .team-section is a <div>, never a <section> — the global
   section{padding:110px 0} rule would inject huge padding (§9.10).
   Each group reuses the existing .team-grid responsive rules. */
.team-groups{ display:block; }
.team-section{ margin-top:clamp(48px,6vw,80px); }
.team-section:first-child{ margin-top:0; }
.team-city{ margin-bottom:clamp(28px,3.4vw,44px); }
.team-city .eyebrow{ margin-bottom:14px; }
.team-city-title{
  font:600 clamp(26px,3.4vw,38px)/1.1 var(--font-display);
  color:var(--ink); letter-spacing:.01em;
}

/* ---------- CONTACT ---------- */
.contact{ background:var(--paper); border-block:1px solid var(--hairline); }
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(40px,6vw,84px); align-items:start; }

.contact-lead{ font:500 clamp(18px,1.9vw,21px)/1.6 var(--font-display); color:var(--ink); max-width:42ch; margin-bottom:36px; }
.contact-points{ display:grid; gap:26px; }
.contact-points li{ display:flex; gap:16px; align-items:flex-start; }
.contact-points svg{ width:20px; height:20px; stroke:var(--brass); fill:none; stroke-width:1.5; flex:none; margin-top:3px; }
.contact-points .k{ display:block; font:600 10px/1 var(--font-body); letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin-bottom:6px; }
.contact-points a,.contact-points div > span{ font-size:15.5px; color:var(--ink); }
.contact-points a{ border-bottom:1px solid transparent; transition:border-color .3s; }
.contact-points a:hover{ border-color:var(--brass); }

.contact-form{ background:var(--ivory); border:1px solid var(--hairline); padding:clamp(26px,4vw,44px); }
.field{ margin-bottom:20px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field label{ display:block; font:600 11px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:9px; }
.field label span{ color:var(--brass); }
.field input,
.field select,
.field textarea{
  width:100%; font:400 16px/1.5 var(--font-body); color:var(--ink);
  background:#fff; border:1px solid var(--hairline);
  padding:14px 15px; min-height:52px;
  transition:border-color .3s, box-shadow .3s;
  -webkit-appearance:none; appearance:none; border-radius:0;
}
.field textarea{ resize:vertical; min-height:130px; }
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AE8B4A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px;
}
.field input::placeholder,
.field textarea::placeholder{ color:#9aa0a8; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-dim); }
.field input:invalid.touched,
.field textarea:invalid.touched{ border-color:var(--err); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* built-in arithmetic CAPTCHA */
.cf-captcha .captcha-row{ display:flex; align-items:center; gap:12px; }
.cf-captcha .captcha-q{
  flex:1 1 auto; min-height:52px; display:flex; align-items:center;
  padding:14px 16px; background:var(--paper); border:1px solid var(--hairline);
  font:600 15px/1.3 var(--font-body); color:var(--ink); letter-spacing:.01em;
  user-select:none;
}
.cf-captcha .captcha-refresh{
  flex:none; width:52px; height:52px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--hairline); color:var(--brass); cursor:pointer;
  transition:border-color .3s, color .3s, background .3s;
}
.cf-captcha .captcha-refresh:hover{ border-color:var(--brass); color:#fff; background:var(--brass); }
.cf-captcha .captcha-refresh svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; }
.cf-captcha .captcha-row input{ flex:0 1 130px; min-width:90px; text-align:center; }

.contact-form .btn{ width:100%; margin-top:4px; }
.form-status{ margin-top:16px; font-size:14px; min-height:1.2em; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ color:var(--ok); }
.form-status.err{ color:var(--err); }
.form-fineprint{ margin-top:16px; font-size:12px; line-height:1.6; color:var(--body); opacity:.8; }

/* ---------- CONTACT PAGE (contact.html — compact split layout) ---------- */
.contact-split{ background:var(--ivory); padding:clamp(42px,5.5vw,76px) 0 clamp(54px,7vw,88px); }
.contact-split .section-head{ margin-bottom:clamp(26px,3.6vw,42px); }

.contact-split-grid{
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  grid-template-areas:"quick form" "offices form";
  column-gap:clamp(30px,4vw,60px);
  row-gap:clamp(28px,3.6vw,44px);
  align-items:start;
}
.contact-quick{ grid-area:quick; }
.contact-form-panel{ grid-area:form; }
.contact-offices{ grid-area:offices; }

/* column headings */
.contact-col-title{
  font:500 clamp(19px,2vw,24px)/1.2 var(--font-display); color:var(--ink);
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--hairline);
}

/* quick-contact block */
.contact-intro{ font:500 clamp(15.5px,1.6vw,18px)/1.65 var(--font-display); color:var(--ink); margin-bottom:22px; }
.wa-btn{ width:100%; gap:11px; background:#25D366; border-color:#25D366; color:#fff; }
.wa-btn:hover{ background:#1da851; border-color:#1da851; color:#fff; }
.wa-btn svg{ width:21px; height:21px; fill:currentColor; }
.quick-lines{ margin-top:6px; }
.quick-line{
  display:flex; align-items:center; gap:13px; padding:15px 2px;
  font-size:15px; color:var(--ink); border-bottom:1px solid var(--hairline); transition:color .3s;
}
.quick-lines .quick-line:last-child{ border-bottom:none; }
.quick-line svg{ width:18px; height:18px; stroke:var(--brass); fill:none; stroke-width:1.6; flex:none; }
.quick-line:hover{ color:var(--brass); }

/* form panel */
.contact-form-panel .contact-form{ margin:0; background:var(--paper); }

/* offices — compact vertical stack inside the left column */
.office-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.office-box{
  background:var(--paper); border:1px solid var(--hairline);
  padding:20px 22px; display:flex; flex-direction:column; gap:14px;
}
.office-title{
  font:500 clamp(17px,1.7vw,19px)/1.25 var(--font-display); color:var(--ink);
  padding-bottom:12px; border-bottom:1px solid var(--hairline);
}
.office-points{ display:grid; gap:12px; }
.office-points li{ display:flex; gap:12px; align-items:flex-start; }
.office-points svg{ width:18px; height:18px; stroke:var(--brass); fill:none; stroke-width:1.5; flex:none; margin-top:2px; }
.office-points .k{ display:block; font:600 9.5px/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:5px; }
.office-points a,.office-points div > span{ font-size:14.5px; line-height:1.5; color:var(--ink); }
.office-points a{ border-bottom:1px solid transparent; transition:border-color .3s; }
.office-points a:hover{ border-color:var(--brass); }

/* stack on tablet / mobile — form sits right below the quick actions */
@media (max-width:860px){
  .contact-split-grid{
    grid-template-columns:1fr;
    grid-template-areas:"quick" "form" "offices";
    row-gap:clamp(28px,6vw,40px);
  }
}

/* ---------- FOOTER ---------- */
footer{ background:var(--ink); color:rgba(255,255,255,.6); }
.foot-main{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(36px,6vw,90px); padding:84px 0 64px; }
.foot-main .logo .mono,.foot-main .logo .full{ color:#fff; }
.foot-brand p{ margin-top:22px; font-size:14px; max-width:34ch; }
.foot-col h4{ font:600 11px/1 var(--font-body); letter-spacing:.26em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:24px; }
.foot-col li{ margin-bottom:12px; font-size:14px; }
.foot-col a{ transition:color .3s; }
.foot-col a:hover{ color:var(--brass-soft); }
.foot-col .line{ display:flex; gap:12px; align-items:flex-start; }
.foot-col .line svg{ width:15px; height:15px; stroke:var(--brass-soft); fill:none; stroke-width:1.5; margin-top:4px; flex:none; }
.foot-base{ border-top:1px solid rgba(255,255,255,.08); padding:26px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.03em; }

/* WhatsApp float button — always visible, so it anchors the bottom of the stack */
.wa-float{
  position:fixed; right:calc(20px + var(--safe-r)); bottom:calc(20px + var(--safe-b)); z-index:90;
  width:48px; height:48px; display:grid; place-items:center;
  background:#25D366; color:#fff; border:none; border-radius:50%; cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4);
  transition:background .3s, transform .3s;
}
.wa-float:hover{ background:#1da851; transform:translateY(-2px); }
.wa-float svg{ width:26px; height:26px; fill:currentColor; }
.wa-float.hidden{ display:none; }

/* back to top — appears on scroll, stacks above the WhatsApp button */
.to-top{
  position:fixed; right:calc(20px + var(--safe-r)); bottom:calc(78px + var(--safe-b)); z-index:90;
  width:48px; height:48px; display:grid; place-items:center;
  background:var(--brass); color:#fff; border:none; border-radius:50%; cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .4s, transform .4s, background .3s;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--ink); }
.to-top svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1020px){
  .exp-grid{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .team-page .team-grid{ grid-template-columns:repeat(2,1fr); }
  .office-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .about-grid{ grid-template-columns:1fr; }
  .year-block{ max-width:420px; margin-inline:auto; }
  .contact-grid{ grid-template-columns:1fr; gap:44px; }
  .foot-main{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  section{ padding:74px 0; }
  .topbar .wrap{ justify-content:center; }
  .topbar .consult{ display:none; }
  .nav .wrap{ min-height:70px; }

  /* On mobile, drop backdrop-filter: it would make .nav the containing
     block for the position:fixed menu, trapping it at nav height. */
  .nav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--ivory); }

  .nav-links{
    position:fixed; top:0; left:0; width:100%; height:100dvh; z-index:99; background:var(--ivory);
    flex-direction:column; justify-content:center; gap:30px;
    transform:translateX(100%); transition:transform .45s var(--ease);
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:16px; }
  .nav-toggle{ display:block; position:relative; z-index:100; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero{ background-image:url("../images/banner/hero-mobile.jpg"); }
  .hero-inner{ padding:96px 0 110px; min-height:min(86vh,620px); }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ width:100%; }

  /* Who-We-Are buttons: stack full-width, equal size on mobile */
  .about-cta{ flex-direction:column; align-items:stretch; }
  .about-cta .btn{ flex:1 1 auto; width:100%; }

  .exp-grid{ grid-template-columns:1fr; }
  .exp-card{ padding:40px 28px; }
  .team-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .team-page .team-grid{ grid-template-columns:1fr; }

  /* touch devices: keep credentials + icons visible */
  .member-veil{ transform:none; opacity:1; }
  .member-rail a{ opacity:1; transform:none; }
  .member-media::before{ transform:translate(10px,10px); }

  .field-row{ grid-template-columns:1fr; gap:0; }
  .foot-main{ grid-template-columns:1fr; }
  .foot-base{ justify-content:center; text-align:center; }
}
@media (max-width:400px){
  .logo .full{ display:none; }
  .logo .divider{ display:none; }
  .logo-img{ height:36px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}