/* ============================================================
   SchengenLine — "Elegant Navy & Gold" homepage concept
   ============================================================ */

:root{
  /* palette */
  --navy-900:#0B1F35;
  --navy-800:#10233d;
  --navy-700:#16294a;
  --navy-600:#1e3660;
  --navy-500:#2a4372;
  --gold-300:#ecd9a8;
  --gold-400:#ddbf74;
  --gold-500:#C9A24A;
  --gold-600:#ab8339;
  --gold-700:#8a692c;
  --cream-50:#FBF9F4;
  --cream-100:#F4EEE0;
  --paper:#FFFFFF;
  --ink-900:#16213a;
  --ink-700:#3d4759;
  --ink-500:#5c6579;
  --ink-300:#8b93a4;
  --line-soft:#e6e0d0;
  --line-on-navy:rgba(201,162,74,.28);
  --success-bg:#eaf3ec;
  --success-ink:#2c5a3c;
  --success-border:#bcdac7;
  --danger-bg:#fbebe8;
  --danger-ink:#8a3226;
  --danger-border:#f1c3ba;
  --urgent:#a8493c;
  --urgent-bg:#f7e9e5;

  /* type */
  --font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-h1: clamp(2.3rem, 1.55rem + 3.3vw, 3.95rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.5vw, 2.55rem);
  --fs-h3: clamp(1.15rem, 1.06rem + .4vw, 1.32rem);
  --fs-lead: clamp(1.05rem, .98rem + .4vw, 1.22rem);

  /* misc */
  --container-max: 1180px;
  --radius-sm: 7px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 12px rgba(11,31,53,.07);
  --shadow-md: 0 18px 46px -12px rgba(11,31,53,.22);
  --shadow-gold: 0 12px 30px -8px rgba(201,162,74,.38);
  --header-h: 78px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink-900);
  background:var(--paper);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{ font-family:var(--font-serif); color:var(--navy-900); line-height:1.18; margin:0; font-weight:700; }
h1{ font-size:var(--fs-h1); font-weight:800; }
h2{ font-size:var(--fs-h2); font-weight:700; }
h3{ font-size:var(--fs-h3); font-weight:700; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
img,svg{ display:block; max-width:100%; }
address{ font-style:normal; }

.container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.75rem); }

section[id]{ scroll-margin-top: calc(var(--header-h) + 14px); }

:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px; border-radius:3px; }
:focus:not(:focus-visible){ outline:none; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:-60px; left:1rem; z-index:200;
  background:var(--gold-500); color:var(--navy-900); font-weight:700;
  padding:.75rem 1.25rem; border-radius:var(--radius-sm); transition:top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.7rem; border-radius:999px; font-weight:600; font-size:.98rem;
  letter-spacing:.01em; white-space:nowrap; transition:all .22s var(--ease); border:1.5px solid transparent;
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn-primary{ background:var(--gold-500); color:var(--navy-900); box-shadow:var(--shadow-gold); }
.btn-primary:hover{ background:var(--gold-400); transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(201,162,74,.48); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.55); color:inherit; }
.btn-outline:hover{ background:rgba(255,255,255,.1); border-color:#fff; transform:translateY(-2px); }
.btn-outline-navy{ background:transparent; border-color:var(--navy-800); color:var(--navy-900); }
.btn-outline-navy:hover{ background:var(--navy-900); color:var(--cream-50); transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:.6rem 1.15rem; font-size:.88rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(11,31,53,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-on-navy);
  color:var(--cream-50);
}
.header-inner{
  max-width:var(--container-max); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.75rem);
  height:var(--header-h); display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.25rem);
}
.brand{ display:flex; align-items:center; gap:.7rem; margin-inline-end:auto; flex:none; }
.brand-mark{ width:38px; height:38px; color:var(--gold-500); flex:none; object-fit:contain; display:block; border-radius:50%; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family:var(--font-serif); font-weight:700; font-size:1.32rem; color:#fff; letter-spacing:.01em; }
.brand-name .accent{ color:var(--gold-500); font-style:italic; font-weight:600; }
.brand-tagline{ font-size:.66rem; text-transform:uppercase; letter-spacing:.13em; color:var(--gold-300); margin-top:.15rem; }

.main-nav{ display:none; }
.main-nav ul{ display:flex; align-items:center; gap:clamp(1rem,2vw,1.8rem); }
.main-nav a{ font-size:.93rem; font-weight:500; color:rgba(255,255,255,.85); padding:.4rem .1rem; position:relative; }
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1.5px; background:var(--gold-500);
  transform:scaleX(0); transform-origin:center; transition:transform .25s var(--ease);
}
.main-nav a:hover{ color:#fff; }
.main-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:.85rem; flex:none; }

.lang-switch{ position:relative; }
#langBtn{
  display:flex; align-items:center; gap:.45rem; padding:.55rem .8rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); color:#fff; font-size:.85rem; font-weight:500; background:rgba(255,255,255,.04);
  transition:border-color .2s, background .2s;
}
#langBtn:hover{ border-color:var(--gold-500); background:rgba(255,255,255,.08); }
#langBtn svg{ width:16px; height:16px; flex:none; color:var(--gold-400); }
.lang-caret{ width:11px !important; height:11px !important; color:rgba(255,255,255,.7) !important; transition:transform .2s var(--ease); }
#langBtn[aria-expanded="true"] .lang-caret{ transform:rotate(180deg); }
#langLabel{ max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#langMenu{
  position:absolute; top:calc(100% + 12px); inset-inline-end:0; min-width:230px; max-height:70vh; overflow-y:auto;
  background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  padding:.5rem; z-index:90;
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
#langMenu.open,
#langBtn[aria-expanded="true"] + #langMenu,
.lang-switch:has(#langBtn[aria-expanded="true"]) #langMenu{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
/* styling hooks for the language buttons the shared script injects into #langMenu */
#langMenu button{
  display:flex; width:100%; align-items:center; gap:.6rem; padding:.62rem .8rem; border-radius:var(--radius-sm);
  color:var(--ink-900); font-size:.92rem; text-align:start; transition:background .15s;
}
#langMenu button:hover, #langMenu button:focus-visible{ background:var(--cream-100); }
#langMenu button[aria-current="true"],
#langMenu button.active{ background:var(--cream-100); color:var(--navy-900); font-weight:600; }
#langMenu .lang-more{ display:block; padding:.6rem .8rem .3rem; font-size:.72rem; color:var(--ink-300); border-top:1px solid var(--line-soft); margin-top:.35rem; }

.header-cta{ display:none; }

#hambBtn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
}
#hambBtn .line{ width:19px; height:1.5px; background:#fff; transition:transform .25s var(--ease), opacity .2s var(--ease); }
#hambBtn[aria-expanded="true"] .line:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
#hambBtn[aria-expanded="true"] .line:nth-child(2){ opacity:0; }
#hambBtn[aria-expanded="true"] .line:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

#mobileMenu{
  max-height:0; overflow:hidden; background:var(--navy-800); border-bottom:1px solid transparent;
  transition:max-height .35s var(--ease), border-color .35s var(--ease);
}
#mobileMenu.open,
#hambBtn[aria-expanded="true"] ~ #mobileMenu,
.site-header:has(#hambBtn[aria-expanded="true"]) #mobileMenu{
  max-height:640px; border-bottom-color:var(--line-on-navy);
}
#mobileMenu .mobile-menu-inner{ display:flex; flex-direction:column; padding:.5rem clamp(1.25rem,4vw,2.75rem) 1.75rem; gap:.15rem; }
#mobileMenu a{
  padding:.85rem .2rem; font-size:1.02rem; font-weight:500; color:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(255,255,255,.08);
}
#mobileMenu a.btn{ margin-top:1rem; border-bottom:none; text-align:center; }

@media (min-width:960px){
  .main-nav{ display:block; }
  .header-cta{ display:inline-flex; }
  #hambBtn{ display:none; }
  #mobileMenu{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden; color:var(--cream-50);
  background:radial-gradient(120% 140% at 85% -10%, var(--navy-600) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  padding-top:clamp(3.25rem,6vw,5.5rem);
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(201,162,74,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,74,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
}
.hero-inner{
  position:relative; z-index:1; display:flex; flex-direction:column; gap:3rem;
  padding-bottom:clamp(3rem,6vw,4.5rem);
}
.hero-content{ max-width:640px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; font-size:.8rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); margin-bottom:1.3rem;
}
.eyebrow::before{ content:''; width:28px; height:1.5px; background:var(--gold-500); }
.hero-title{ color:#fff; margin-bottom:1.5rem; }
.hero-title span{ display:block; }
.hero-title .accent{ color:var(--gold-500); font-style:italic; font-weight:600; }
.hero-sub{ font-size:var(--fs-lead); color:rgba(240,238,230,.86); max-width:54ch; margin-bottom:2.1rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.6rem; }
.hero-checks{ display:grid; grid-template-columns:1fr; gap:.9rem; max-width:560px; }
.hero-checks li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.95rem; color:rgba(240,238,230,.92); }
.hero-checks .ico{
  flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-on-navy);
  display:flex; align-items:center; justify-content:center; margin-top:.05rem;
}
.hero-checks .ico svg{ width:12px; height:12px; color:var(--gold-500); }

.hero-art-wrap{ display:flex; justify-content:center; padding-bottom:1rem; }
.hero-art{ width:min(100%,420px); height:auto; color:var(--gold-500); }
.art-ring{ fill:none; stroke:rgba(201,162,74,.3); stroke-width:1; }
.art-ring-slow{ transform-origin:380px 150px; animation:spin 60s linear infinite; }
.art-route{ fill:none; stroke:var(--gold-500); stroke-width:2; stroke-linecap:round; stroke-dasharray:1 10; }
.art-pin{ fill:var(--gold-500); }
.art-pin-ring{ fill:none; stroke:var(--gold-500); stroke-width:1.4; opacity:.55; }
.art-card-bg{ fill:#132a49; stroke:rgba(201,162,74,.55); stroke-width:1.2; }
.art-card-head{ fill:rgba(201,162,74,.16); }
.art-photo{ fill:none; stroke:var(--gold-500); stroke-width:1.4; opacity:.85; }
.art-line{ stroke:rgba(236,217,168,.55); stroke-width:1.6; stroke-linecap:round; }
.art-seal circle{ fill:#0e2137; stroke:var(--gold-500); stroke-width:1.5; }
.art-seal path{ stroke:var(--gold-500); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }

@keyframes spin{ to{ transform:rotate(360deg); } }

@media (min-width:860px){
  .hero-inner{ flex-direction:row; align-items:center; justify-content:space-between; }
  .hero-content{ flex:1 1 54%; }
  .hero-art-wrap{ flex:1 1 40%; padding-bottom:0; }
  .hero-checks{ grid-template-columns:1fr 1fr; column-gap:1.5rem; }
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-section{ background:var(--navy-900); border-top:1px solid var(--line-on-navy); }
.trust{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem;
  padding-block:clamp(2rem,4vw,2.75rem);
}
.trust-tile{ text-align:center; padding-inline:.5rem; border-inline-start:1px solid var(--line-on-navy); }
.trust-tile:first-child{ border-inline-start:none; }
.trust-figure{ display:flex; align-items:baseline; justify-content:center; gap:.15rem; font-family:var(--font-serif); font-weight:700; font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem); color:var(--gold-500); }
.trust-label{ margin-top:.35rem; font-size:.83rem; color:rgba(240,238,230,.82); letter-spacing:.01em; }
@media (min-width:640px){
  .trust{ grid-template-columns:repeat(4,1fr); }
}

/* ============================================================
   SECTION HEADERS (shared)
   ============================================================ */
.section-pad{ padding-block:clamp(4rem,7vw,6.5rem); }
.section-head{ max-width:720px; margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.kicker{
  display:inline-flex; align-items:center; gap:.55rem; font-size:.78rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gold-600); margin-bottom:1rem;
}
.kicker::before{ content:''; width:24px; height:1.5px; background:var(--gold-500); }
.section-head.center .kicker{ justify-content:center; }
.section-head.center .kicker::before{ display:none; }
.section-title{ margin-bottom:1.1rem; }
.section-sub{ font-size:var(--fs-lead); color:var(--ink-500); max-width:62ch; }
.section-head.center .section-sub{ margin-inline:auto; }
.on-navy .section-title{ color:#fff; }
.on-navy .section-sub{ color:rgba(240,238,230,.82); }
.on-navy .kicker{ color:var(--gold-400); }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.vis{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .art-ring-slow{ animation:none; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
noscript .reveal{ opacity:1; }

/* ============================================================
   PRACTICE AREAS
   ============================================================ */
#areas{ background:var(--cream-50); }
.area-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:1.75rem; }
.area-card{
  position:relative; background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-md);
  padding:2rem 1.9rem 2.1rem; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.area-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--gold-400); }
.area-card-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.3rem; }
.area-icon{
  width:52px; height:52px; border-radius:50%; border:1.5px solid var(--gold-400); color:var(--gold-600);
  display:flex; align-items:center; justify-content:center; flex:none; background:var(--cream-100);
}
.area-icon svg{ width:26px; height:26px; }
.area-badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.35rem .65rem; border-radius:999px; }
.area-badge svg{ width:12px; height:12px; }
.area-badge.urgent{ background:var(--urgent-bg); color:var(--urgent); }
.area-card h3{ margin-bottom:.6rem; }
.area-card > p{ color:var(--ink-500); margin-bottom:1.25rem; font-size:.96rem; }
.area-list{ display:flex; flex-direction:column; gap:.6rem; }
.area-list li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem; color:var(--ink-700); }
.area-list svg{ width:15px; height:15px; flex:none; margin-top:.2rem; color:var(--gold-600); }

/* ============================================================
   WHY US
   ============================================================ */
#why{ background:var(--navy-900); position:relative; }
#why::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(60% 60% at 15% 10%, rgba(201,162,74,.10), transparent 60%);
}
.why-grid{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:2.25rem 1.75rem; }
.why-item{ border-inline-start:1px solid var(--line-on-navy); padding-inline-start:1.4rem; }
.why-num{ display:block; font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.9rem; color:var(--gold-500); margin-bottom:.75rem; }
.why-item h3{ color:#fff; margin-bottom:.65rem; }
.why-item p{ color:rgba(240,238,230,.78); font-size:.94rem; }

/* ============================================================
   PROCESS
   ============================================================ */
#process{ background:var(--cream-50); }
.process-grid{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:2.5rem 1.75rem; }
.process-line{ display:none; }
@media (min-width:820px){
  .process-line{
    display:block; position:absolute; top:26px; left:calc(12.5% ); right:calc(12.5%);
    height:1px; background:repeating-linear-gradient(90deg, var(--gold-400) 0 8px, transparent 8px 16px);
  }
}
.process-step{ position:relative; text-align:center; }
.step-num{
  width:54px; height:54px; border-radius:50%; background:var(--navy-900); color:var(--gold-500);
  font-family:var(--font-serif); font-weight:700; font-size:1.25rem; display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.4rem; box-shadow:var(--shadow-sm); position:relative; z-index:1; border:3px solid var(--cream-50);
}
.process-step h3{ margin-bottom:.6rem; }
.process-step p{ color:var(--ink-500); font-size:.92rem; max-width:32ch; margin-inline:auto; }

/* ============================================================
   CASE STUDIES
   ============================================================ */
#cases{ background:var(--paper); }
.case-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); gap:2rem; }
.case-card{
  display:flex; flex-direction:column;
  background:var(--cream-50); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3vw,2.75rem); border-inline-start:4px solid var(--gold-500);
}
.case-tag{ font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-600); margin-bottom:.9rem; display:block; }
.case-card h3{ margin-bottom:1.1rem; font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); }
.case-card p{ color:var(--ink-700); font-size:.95rem; margin-bottom:.95rem; }
.case-card p:last-of-type{ margin-bottom:1.4rem; }
.case-result{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.5rem; background:var(--success-bg); color:var(--success-ink);
  border:1px solid var(--success-border); font-weight:600; font-size:.88rem; padding:.6rem 1.05rem; border-radius:999px;
}

/* ============================================================
   FAQ  (JS builds .faq-item > .faq-q + .faq-a into #faqList)
   ============================================================ */
#faq{ background:var(--cream-50); }
#faqList{ max-width:820px; margin-inline:auto; border-top:1px solid var(--line-soft); }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.4rem .3rem; text-align:start; font-family:var(--font-serif); font-weight:600; font-size:1.05rem; color:var(--navy-900);
}
.faq-q:hover{ color:var(--gold-600); }
.plus{
  flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--gold-400); color:var(--gold-600);
  display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), background .3s;
}
.plus svg{ width:14px; height:14px; }
.faq-item.open .plus{ transform:rotate(135deg); background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); }
.faq-a{
  max-height:0; overflow:hidden; box-sizing:border-box;
  transition:max-height .38s var(--ease);
  color:var(--ink-500); font-size:.96rem; line-height:1.7;
}
.faq-a > *{ padding:0 .3rem 1.5rem; }
.faq-item.open .faq-q{ color:var(--gold-600); }

/* ============================================================
   CONTACT
   ============================================================ */
#contact{
  background:radial-gradient(120% 140% at 15% 0%, var(--navy-600) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  color:var(--cream-50);
}
.contact-grid{ display:grid; grid-template-columns:1fr; gap:3rem; }
.contact-bullets{ display:flex; flex-direction:column; gap:.85rem; margin-top:1.75rem; }
.contact-bullets li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.94rem; color:rgba(240,238,230,.9); }
.contact-bullets .ico{
  flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-on-navy);
  display:flex; align-items:center; justify-content:center; margin-top:.05rem;
}
.contact-bullets .ico svg{ width:12px; height:12px; color:var(--gold-500); }

.form-card{
  background:var(--cream-50); color:var(--ink-900); border-radius:var(--radius-lg); padding:clamp(1.75rem,4vw,2.75rem);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.45);
}
.field{ margin-bottom:1.35rem; }
.field label{ display:block; font-size:.83rem; font-weight:600; color:var(--navy-800); margin-bottom:.5rem; letter-spacing:.01em; }
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select,
.field textarea{
  width:100%; border:1.5px solid var(--line-soft); background:var(--paper); border-radius:var(--radius-sm);
  padding:.85rem 1rem; font-size:.96rem; color:var(--ink-900); transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,74,.22); outline:none;
}
.field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8493c' stroke-width='2'><path d='M5 8l7 7 7-7'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:14px;
  padding-inline-end:2.5rem;
}
[dir="rtl"] .field select{ background-position:left 1rem center; }
.field-row{ display:grid; grid-template-columns:1fr; gap:1.35rem 1.25rem; }
@media (min-width:620px){ .field-row{ grid-template-columns:1fr 1fr; } .field-row .field{ margin-bottom:0; } }

.file-field{
  display:block; border:1.5px dashed var(--line-soft); border-radius:var(--radius-sm); padding:1.1rem 1rem;
  cursor:pointer; transition:border-color .2s, background .2s;
}
.file-field:hover{ border-color:var(--gold-500); background:#fffdf8; }
.file-field .file-row{ display:flex; align-items:center; gap:.7rem; }
.file-field svg{ width:19px; height:19px; color:var(--gold-600); flex:none; }
.file-field input[type=file]{ margin-top:.65rem; width:100%; font-size:.85rem; color:var(--ink-500); }

.consent-note,.form-note{ font-size:.8rem; color:var(--ink-300); line-height:1.6; margin-top:.25rem; }

#formSuccess.success{
  background:var(--success-bg); color:var(--success-ink); border:1px solid var(--success-border);
  border-radius:var(--radius-sm); padding:1rem 1.15rem; font-size:.92rem; font-weight:600; margin-block:1.25rem;
}
#formError{
  background:var(--danger-bg); color:var(--danger-ink); border:1px solid var(--danger-border);
  border-radius:var(--radius-sm); padding:1rem 1.15rem; font-size:.9rem; margin-block:1.25rem;
}
#formError a{ text-decoration:underline; font-weight:600; }

@media (min-width:980px){
  .contact-grid{ grid-template-columns:.85fr 1.15fr; align-items:start; }
}

/* ---------- offices ---------- */
.offices{ margin-top:clamp(3.5rem,6vw,5rem); }
.offices-head{ margin-bottom:2rem; }
.offices-head h3{ color:#fff; font-size:var(--fs-h3); }
.offices-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:1.5rem; }
.office-card{
  background:rgba(255,255,255,.04); border:1px solid var(--line-on-navy); border-radius:var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column;
}
.office-map{ position:relative; width:100%; aspect-ratio:16/9; background:var(--navy-700); filter:grayscale(.15) saturate(.8); }
.office-map iframe{ width:100%; height:100%; border:0; display:block; }
.office-body{ padding:1.4rem 1.5rem 1.6rem; }
.office-city{ font-family:var(--font-serif); font-weight:700; font-size:1.08rem; color:#fff; margin-bottom:.2rem; display:flex; align-items:center; gap:.4rem; }
.office-pin{ width:15px; height:15px; color:var(--gold-500); flex:none; }
.office-country{ font-size:.85rem; color:rgba(240,238,230,.7); margin-bottom:1.1rem; }
.office-link{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; color:var(--gold-400); }
.office-link svg{ width:14px; height:14px; }
.office-link:hover{ color:var(--gold-300); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy-900); color:rgba(240,238,230,.75); border-top:1px solid var(--line-on-navy); }
.footer-inner{ padding-block:clamp(3rem,5vw,4.5rem) 2rem; display:grid; grid-template-columns:1fr; gap:2.5rem; }
.footer-brand .brand{ margin-bottom:1rem; }
.footer-brand p{ max-width:36ch; font-size:.92rem; }
.footer-col h3{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.15rem; font-family:var(--font-sans); font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ font-size:.92rem; transition:color .2s; }
.footer-col a:hover{ color:var(--gold-400); }
.footer-disclaimer{ font-size:.8rem; color:rgba(240,238,230,.55); max-width:70ch; padding-block:1.75rem; border-top:1px solid var(--line-on-navy); }
.footer-bottom{ padding-block:1.5rem; border-top:1px solid var(--line-on-navy); font-size:.82rem; color:rgba(240,238,230,.6); display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; }

@media (min-width:640px){ .footer-inner{ grid-template-columns:1.4fr 1fr 1fr; } }

/* ============================================================
   RTL adjustments
   ============================================================ */
[dir="rtl"] .btn svg,
[dir="rtl"] .office-link svg{ transform:scaleX(-1); }
[dir="rtl"] .hero-art{ transform:scaleX(-1); }
[dir="rtl"] .eyebrow::before,[dir="rtl"] .kicker::before{ }
[dir="rtl"] #hambBtn[aria-expanded="true"] .line:nth-child(1){ transform:translateY(6.5px) rotate(-45deg); }
[dir="rtl"] #hambBtn[aria-expanded="true"] .line:nth-child(3){ transform:translateY(-6.5px) rotate(45deg); }
[dir="rtl"] .plus svg{ transform:none; }


/* ============================================================
   MULTI-PAGE ADDITIONS (v1.1 - lean homepage + topic pages)
   ============================================================ */
.skip-link{
  position:absolute; left:0; top:0; background:var(--navy-900); color:#fff;
  padding:.85rem 1.25rem; z-index:500; border-radius:0 0 10px 0; font-weight:600;
  transform:translateY(-120%); transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }
[dir="rtl"] .skip-link{ left:auto; right:0; border-radius:0 0 0 10px; }

.area-card{ display:flex; flex-direction:column; }
.area-card-go, .case-more{
  margin-top:auto; padding-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.88rem; color:var(--gold-600);
}
.case-more{ margin-top:1rem; }
.area-card-go svg, .case-more svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.area-card:hover .area-card-go svg, .case-card:hover .case-more svg{ transform:translateX(4px); }
[dir="rtl"] .area-card:hover .area-card-go svg,[dir="rtl"] .case-card:hover .case-more svg{ transform:translateX(-4px); }

/* topic sub-hero */
.topic-hero{ background:var(--navy-900); position:relative; overflow:hidden; padding-block:clamp(2.75rem,6vw,4.5rem) clamp(3.25rem,6vw,5rem); }
.topic-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(900px 500px at 85% -10%, var(--navy-600), transparent 60%); pointer-events:none; }
.breadcrumb{ position:relative; display:inline-flex; align-items:center; gap:.5rem; color:rgba(240,238,230,.7); font-size:.88rem; margin-bottom:1.75rem; }
.breadcrumb svg{ width:15px; height:15px; }
[dir="rtl"] .breadcrumb svg{ transform:scaleX(-1); }
.breadcrumb:hover{ color:#fff; }
.topic-hero-top{ position:relative; display:flex; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.topic-icon{
  width:72px; height:72px; border-radius:50%; border:1.5px solid var(--gold-400); color:var(--gold-400);
  display:flex; align-items:center; justify-content:center; flex:none; background:rgba(201,162,74,.08);
}
.topic-icon svg{ width:36px; height:36px; }
.topic-hero h1{ position:relative; color:#fff; font-size:var(--fs-h2); margin-bottom:1rem; max-width:26ch; }
.topic-hero .lede{ position:relative; color:rgba(240,238,230,.88); font-size:var(--fs-lead); max-width:62ch; }
.topic-hero .area-badge.urgent{ position:relative; margin-bottom:1rem; }

.topic-body{ padding-block:clamp(2.75rem,6vw,4.5rem); }
.topic-body h2{ margin-bottom:1.5rem; }
.topic-body .area-list{ max-width:680px; gap:1rem; }
.topic-body .area-list li{ font-size:1.02rem; background:var(--cream-50); border:1px solid var(--line-soft); border-radius:var(--radius-md); padding:1.05rem 1.25rem; }
.topic-body .area-list svg{ width:19px; height:19px; }

.cta-band{ background:var(--navy-900); position:relative; overflow:hidden; padding-block:clamp(2.75rem,6vw,4rem); text-align:center; }
.cta-band::before{ content:''; position:absolute; inset:0; background:radial-gradient(700px 400px at 50% 0%, var(--navy-600), transparent 65%); pointer-events:none; }
.cta-band h2{ position:relative; color:#fff; margin-bottom:.85rem; }
.cta-band p{ position:relative; color:rgba(240,238,230,.82); max-width:56ch; margin-inline:auto; margin-bottom:1.75rem; font-size:var(--fs-lead); }
.cta-band .btn{ position:relative; }

.case-grid.stacked{ grid-template-columns:1fr; max-width:760px; margin-inline:auto; }
.case-grid.stacked .case-card{ border-inline-start-width:5px; }

/* Fix: pre-existing bug - on narrow phones (esp. in RTL, where overflow direction
   mirrors) the header's brand + language-name button + hamburger don't all fit on
   one row and the header-actions group gets pushed off-canvas. Below 480px, drop
   the language button down to icon-only (its menu still shows full native names). */
@media (max-width:479px){
  #langLabel{ display:none; }
  #langBtn{ padding:.55rem; }
  .header-inner{ gap:.6rem; padding-inline:1rem; }
  .brand-tagline{ display:none; }
}

/* 404 */
.notfound{ min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--navy-900); padding:3rem 1.5rem; }
.notfound-code{ font-family:var(--font-serif); font-size:clamp(3.5rem,10vw,6rem); color:var(--gold-500); font-weight:800; line-height:1; margin-bottom:1rem; }
.notfound h1{ color:#fff; margin-bottom:1rem; }
.notfound p{ color:rgba(240,238,230,.82); margin-bottom:2rem; font-size:var(--fs-lead); }

/* office cards - subtle gold accent + lift, echoes the brand's gold/navy premium feel */
.office-card{ border-top:2px solid var(--gold-500); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.office-card:hover, .office-card:focus-within{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(11,31,53,.18); }

/* The base stylesheet's scroll-triggered ".reveal" fade-in (opacity:0 until an
   IntersectionObserver adds .vis) relies on the browser firing that observer while
   scrolling past each element. Verified with automated scrolling that this can be
   missed - elements land at opacity:0 and never recover if the observer's callback
   doesn't land before the element's intersection window passes. That's too much risk
   for the area cards, which are the whole point of the trimmed-down homepage. Now that
   pages are short, the staged-reveal effect adds little anyway, so disable it outright
   and let content simply be visible - the .reveal/.vis classes and JS stay harmless. */
.reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ============================================================
   AUDIT FIXES (v1.2)
   ============================================================ */

/* --- Mobile menu: 6 invisible tab stops -------------------------------------
   The closed menu was hidden with max-height:0 + overflow:hidden only, which
   clips it visually but leaves every link in the tab order. On a phone, tabbing
   from the logo landed on six controls with no focus ring anywhere on screen.
   visibility:hidden removes them from the tab order; it still animates because
   visibility is transitioned alongside max-height. */
#mobileMenu{ visibility:hidden; }
#mobileMenu.open,
#hambBtn[aria-expanded="true"] ~ #mobileMenu,
.site-header:has(#hambBtn[aria-expanded="true"]) #mobileMenu{ visibility:visible; }

/* --- Language menu is now a list of links, not injected buttons ------------- */
#langMenu ul{ display:block; list-style:none; margin:0; padding:0; }
#langMenu a{
  display:flex; width:100%; align-items:center; gap:.6rem; padding:.62rem .8rem;
  border-radius:var(--radius-sm); color:var(--ink-900); font-size:.92rem; text-align:start;
  transition:background .15s;
}
#langMenu a:hover, #langMenu a:focus-visible{ background:var(--cream-100); }
#langMenu a[aria-current="true"]{ background:var(--cream-100); color:var(--navy-900); font-weight:600; }

/* --- Focus visibility ------------------------------------------------------
   .field input:focus{outline:none} out-specifies the global :focus-visible rule,
   so text fields had no focus ring at all - the only cue was a border colour
   change measuring 1.88:1, well under the 3:1 WCAG 2.4.11 threshold. Restore an
   outline for keyboard users while keeping mouse clicks ring-free. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:2px solid var(--navy-800) !important;
  outline-offset:2px;
  border-color:var(--gold-600);
}
/* gold-500 on cream/white is only 2.28:1. Pair the gold ring with a dark outer
   ring so the indicator is visible on light and dark surfaces alike. */
:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px; box-shadow:0 0 0 5px rgba(11,31,53,.55); }
.site-header :focus-visible, .site-footer :focus-visible,
.topic-hero :focus-visible, .cta-band :focus-visible, .notfound :focus-visible,
#contact :focus-visible{ box-shadow:0 0 0 5px rgba(251,249,244,.5); }

/* --- Text contrast ---------------------------------------------------------
   Measured against the real backgrounds: gold-600 on cream is 3.31:1 and
   ink-300 on cream is 2.81:1, both below the 4.5:1 needed at these sizes.
   gold-700 measures ~4.8:1 and ink-500 ~5.9:1. */
.kicker{ color:var(--gold-700); }
.on-navy .kicker{ color:var(--gold-400); }
.faq-q:hover, .faq-item.open .faq-q{ color:var(--gold-700); }
.case-tag{ color:var(--gold-700); }
.area-card-go, .case-more{ color:var(--gold-700); }
.consent-note, .form-note{ color:var(--ink-500); }

/* --- FAQ accordion --------------------------------------------------------
   Panels are toggled with the `hidden` attribute now instead of max-height:0.
   The old approach kept collapsed answers in the accessibility tree (a screen
   reader read four questions and four unattached answers with no state), and
   the px max-height written at click time was never recomputed, so an open
   answer got clipped when the phone was rotated or the page zoomed. */
.faq-a{ max-height:none; overflow:visible; transition:none; }
.faq-a[hidden]{ display:none; }
.faq-q .plus{ transition:transform .3s var(--ease), background .3s; }

/* --- Buttons must not overflow narrow viewports ---------------------------
   .btn had white-space:nowrap, so the French CTA ("Réservez une première
   consultation gratuite") rendered 420px wide inside a 390px viewport and its
   trailing arrow sat off-screen. Spanish did the same. */
@media (max-width:520px){
  .btn{ white-space:normal; text-align:center; }
}

/* --- Google Maps click-to-load facade ------------------------------------- */
.map-facade{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  background:var(--navy-700); color:rgba(240,238,230,.92); text-align:center;
  padding:1rem; cursor:pointer; transition:background .2s var(--ease);
}
.map-facade:hover{ background:var(--navy-600); }
.map-facade-pin svg{ width:26px; height:26px; color:var(--gold-400); }
.map-facade-label{ font-weight:700; font-size:.95rem; }
.map-facade-note{ font-size:.74rem; color:rgba(240,238,230,.66); max-width:26ch; line-height:1.5; }

/* --- Footer now carries a fourth column (the service pages) --------------- */
@media (min-width:640px){ .footer-inner{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .footer-inner{ grid-template-columns:1.5fr 1fr 1fr 1fr; } }

/* Upload is three discrete fields now (Netlify accepts one file per field). */
.file-field input[type=file] + input[type=file]{ margin-top:.4rem; }

/* --- FAQ question is a real heading now, so strip the h3's own styling ----- */
.faq-h{ margin:0; font-size:inherit; font-weight:inherit; line-height:inherit; }

/* --- Related-areas cross-links on the service pages ----------------------- */
.topic-related{ margin-top:2.75rem; padding-top:1.75rem; border-top:1px solid var(--line-soft); max-width:680px; }
.topic-related h2{ font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-700);
  font-family:var(--font-sans); font-weight:700; margin-bottom:1rem; }
.topic-related ul{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:0; }
.topic-related a{
  display:inline-flex; align-items:center; padding:.5rem .95rem; border-radius:999px;
  border:1px solid var(--line-soft); background:var(--cream-50); color:var(--navy-900);
  font-size:.9rem; font-weight:600; transition:border-color .2s, background .2s;
}
.topic-related a:hover{ border-color:var(--gold-500); background:#fffdf8; }

/* Topic pages now open with a real subheading rather than jumping to the CTA. */
.topic-body > .container > h2{ font-size:var(--fs-h3); margin-bottom:1.5rem; }