/* ===================================================================
   Calderón Martinez & Associates — Stylesheet
   Palette: Navy (trust/authority) + Gold (accent) + Cream (warmth)
=================================================================== */

:root{
  --navy-950:#081227;
  --navy-900:#0a1f44;
  --navy-800:#0d2a5c;
  --navy-700:#123870;
  --gold-500:#c9a15a;
  --gold-400:#d9bd85;
  --gold-100:#f4ead4;
  --cream:#f7f5f0;
  --white:#ffffff;
  --ink:#1b2230;
  --ink-soft:#4a5164;
  --border:#e7e3d9;
  --shadow: 0 20px 40px -20px rgba(10,31,68,.25);
  --radius:14px;
  --maxw:1200px;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box;}
/* Safari/WebKit silently boosts font sizes on some phone widths ("text size
   adjust") to improve readability of non-responsive pages — but this page
   already sets its own responsive type scale, so that heuristic only makes
   text overflow. Locking it to 100% forces every size to render exactly as
   authored, on every device. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html{scroll-behavior:smooth;}
/* The header is fixed and overlaps the top of the page, so a plain anchor
   jump lands each section's heading right underneath it. scroll-margin-top
   stops there instead, leaving the heading visible below the header —
   otherwise every nav link looks like it "landed in the wrong place". */
#inicio, #intro, #servicios, #metodo, #sobre-nosotros, #oficinas, #faq, #contacto{
  scroll-margin-top:90px;
}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
body.nav-open{overflow:hidden;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;color:var(--navy-900);margin:0 0 .5em;line-height:1.15;}
p{margin:0 0 1em;color:var(--ink-soft);}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;font-weight:600;font-size:.92rem;
  letter-spacing:.03em;text-transform:uppercase;border:2px solid transparent;
  cursor:pointer;transition:.25s ease;white-space:nowrap;
}
.btn-primary{background:var(--navy-900);color:var(--white);}
.btn-primary:hover{background:var(--navy-800);}
.btn-gold{background:var(--gold-500);color:var(--navy-950);}
.btn-gold:hover{background:var(--gold-400);transform:translateY(-2px);}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.6);color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.full-width{width:100%;}

/* ---------- Seal (signature mark) ----------
   An engraved medallion — the dotted outer ring plus solid inner ring reads as
   an approval stamp/seal, the visual language of an immigration case moving
   from filed to approved. Reused everywhere a plain circle mark previously
   stood in for it (process steps, FAQ toggle, trust-bar stats), so the whole
   site shares one signature instead of scattering different motifs. */
.seal{position:relative;}
.seal::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px dotted rgba(201,161,90,.5);
}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:200;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-400));
  transition:width .1s linear;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(8,18,39,.0);
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding:20px 0;
}
.site-header.scrolled{
  background:rgba(8,18,39,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,.2);
  padding:12px 0;
  border-bottom:1px solid rgba(201,161,90,.15);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}

/* Logo */
.logo{display:flex;align-items:center;}
.logo-img{height:42px;width:auto;display:block;transition:height .35s ease;}
.site-header.scrolled .logo-img{height:34px;}
.logo-compact{display:none;}

.main-nav{display:flex;align-items:center;gap:28px;position:relative;}
.main-nav a{
  color:rgba(255,255,255,.88);font-size:.86rem;font-weight:500;letter-spacing:.02em;
  position:relative;padding:6px 0;transition:color .25s ease;
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold-500);
  transition:width .25s ease;
}
.main-nav a:hover::after{width:100%;}
.main-nav a.active{color:var(--gold-400);}
.nav-indicator{
  position:absolute;bottom:-2px;left:0;height:2px;width:0;background:var(--gold-500);
  transition:transform .35s cubic-bezier(.65,0,.35,1), width .35s cubic-bezier(.65,0,.35,1), opacity .2s ease;
  opacity:0;pointer-events:none;
}
.nav-indicator.visible{opacity:1;}

.header-actions{display:flex;align-items:center;gap:16px;}
.lang-toggle{
  background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;flex:none;white-space:nowrap;
  border-radius:999px;padding:6px 12px;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;cursor:pointer;
  transition:border-color .25s ease;
}
.lang-toggle:hover{border-color:var(--gold-400);}
.lang-toggle .lang-active{color:var(--gold-400);font-weight:600;transition:color .25s ease;}
.lang-toggle .lang-inactive{color:#fff;opacity:.55;transition:color .25s ease, opacity .25s ease;}
.header-actions .btn-primary{background:var(--gold-500);color:var(--navy-950);padding:11px 22px;font-size:.78rem;}
.header-actions .btn-primary:hover{background:var(--gold-400);}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;z-index:10000;position:relative;}
.hamburger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease, opacity .2s ease;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero (full-bleed sliding carousel) ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;background:var(--navy-950);isolation:isolate;
}

/* Photo panel: covers 100% of the hero. Slides are stacked and cross-fade
   (JS in script.js), each photo doing its own slow zoom-out + pan while
   active — the same unhurried Ken Burns feel as hoyos.law's hero, instead
   of a hard slide/push between images. */
.hero-photo-panel{position:absolute;inset:0;overflow:hidden;background:var(--navy-950);}
.hero-slide{
  position:absolute;inset:0;opacity:0;z-index:1;
  transition:opacity 3.5s ease;
}
.hero-slide.is-active{opacity:1;z-index:2;}
.hero-photo{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:saturate(.72) brightness(.68);
  animation:heroKenBurns 7s ease-out infinite;
}
@keyframes heroKenBurns{
  0%{transform:scale(1.26) translateX(6%);}
  100%{transform:scale(1.02) translateX(-6%);}
}
@media (prefers-reduced-motion: reduce){
  .hero-photo{animation:none;}
  .hero-slide{transition:opacity 1.2s ease;}
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(5,10,20,.92) 0%, rgba(8,18,39,.68) 32%, rgba(5,10,20,.32) 58%, rgba(5,10,20,.55) 100%),
    linear-gradient(180deg, rgba(5,10,20,.15) 0%, rgba(5,10,20,.2) 55%, rgba(5,10,20,.65) 100%);
}

.hero-content{position:relative;z-index:2;max-width:680px;margin:0 auto;padding-top:96px;text-align:center;}
.eyebrow{
  font-family:var(--mono);color:var(--gold-400);text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;
  font-weight:600;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.eyebrow::before{content:'';display:inline-block;width:26px;height:1.5px;background:var(--gold-500);}
.hero h1{color:var(--white);font-size:clamp(2.6rem,5.6vw,4.4rem);margin-bottom:24px;text-shadow:0 4px 24px rgba(0,0,0,.5);}
.hero-subtitle{color:#fff;font-size:1.22rem;max-width:560px;margin:0 auto 36px;text-shadow:0 2px 16px rgba(0,0,0,.6);}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}

.scroll-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;}
.scroll-cue span{
  display:block;width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:20px;position:relative;
}
.scroll-cue span::before{
  content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:4px;height:8px;background:var(--gold-500);border-radius:2px;
  animation:scrollDown 1.6s infinite;
}
@keyframes scrollDown{0%{opacity:1;top:8px;}100%{opacity:0;top:22px;}}

/* ---------- Trust bar ---------- */
.trust-bar{background:var(--navy-900);padding:40px 0;}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(255,255,255,.7);font-size:.78rem;font-family:var(--mono);letter-spacing:.02em;}
.trust-num{
  font-family:var(--serif);color:var(--gold-500);font-weight:700;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  min-width:72px;height:72px;padding:0 8px;
  border:1.5px solid var(--gold-500);border-radius:50%;
}
.trust-num--wide{font-size:1rem;letter-spacing:.02em;}

/* ---------- Section shared ---------- */
.section-head{max-width:680px;margin:0 auto 52px;text-align:center;}
.section-head.light h2, .section-head.light p{color:var(--white);}
.section-kicker{
  display:inline-block;font-family:var(--mono);color:var(--gold-500);text-transform:uppercase;letter-spacing:.08em;
  font-size:.95rem;font-weight:600;margin-bottom:14px;
}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);}
.section-head p{font-size:1.05rem;}

/* ---------- Intro ---------- */
.intro{padding:100px 0;background:var(--cream);text-align:center;}
.intro-grid{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start;}
.intro-tag{display:flex;gap:14px;justify-content:center;}
.tag-line{width:2px;background:var(--gold-500);}
.intro-tag p{font-family:var(--serif);font-style:italic;color:var(--navy-800);font-size:1.05rem;}
.intro-copy h2{font-size:clamp(1.5rem,3vw,2.1rem);}
.intro-copy p{font-size:1.08rem;max-width:680px;margin-left:auto;margin-right:auto;}
.text-link{color:var(--navy-800);font-weight:600;border-bottom:2px solid var(--gold-500);padding-bottom:2px;}

/* ---------- Services (staggered, non-uniform rhythm) ---------- */
.services{padding:110px 0;}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-bottom:34px;}
.service-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:34px 26px;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  text-align:center;
}
.service-card:hover{box-shadow:var(--shadow);transform:translateY(-6px);border-color:var(--gold-400);}
.service-icon{
  width:56px;height:56px;border-radius:12px;background:var(--navy-900);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.service-icon svg{width:28px;height:28px;}
.service-card h3{font-size:1.15rem;margin-bottom:10px;}
.service-card p{font-size:.94rem;text-align:justify;}
.card-link{color:var(--navy-800);font-weight:600;font-size:.88rem;}

/* ---------- Method / Process ---------- */
.method{
  padding:140px 0;background:var(--navy-950);position:relative;overflow:hidden;
  clip-path:polygon(0 46px, 100% 0, 100% calc(100% - 46px), 0 100%);
  margin:-46px 0;
}
.method-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.22;
}
.method::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,10,20,.88) 0%, rgba(8,18,39,.94) 60%, var(--navy-950) 100%);
}
.method::before{
  content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle, rgba(201,161,90,.12), transparent 70%);
  z-index:1;
}
.method .container{position:relative;z-index:2;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative;z-index:1;}
.step{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);
  padding:30px 24px;text-align:center;
}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1.5px solid var(--gold-500);color:var(--gold-500);
  font-family:var(--serif);font-weight:700;margin:0 auto 18px;
}
.step h3{color:var(--white);font-size:1.05rem;margin-bottom:8px;}
.step p{color:rgba(255,255,255,.68);font-size:.92rem;margin:0;}
.method-cta{
  margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;position:relative;z-index:1;
  text-align:center;
}
.method-cta p{color:var(--white);font-family:var(--serif);font-size:1.2rem;margin:0;max-width:480px;}

/* ---------- About ---------- */
.about{padding:110px 0;background:var(--cream);position:relative;overflow:hidden;}
/* Same seal motif as the process steps and trust-bar stats, scaled up into a
   faint watermark — the section that vouches for the firm's credibility gets
   the largest, quietest version of the mark. Positioned low and to the side
   (behind the founder card, not the heading) so it never crosses text; hidden
   below 900px, where there isn't enough width for it to clear the copy. */
.about::before{
  content:'';position:absolute;top:220px;right:-170px;width:420px;height:420px;
  border-radius:50%;border:1px dotted rgba(201,161,90,.35);pointer-events:none;
}
.about::after{
  content:'';position:absolute;top:260px;right:-130px;width:340px;height:340px;
  border-radius:50%;border:1.5px solid rgba(201,161,90,.18);pointer-events:none;
}
@media (max-width:900px){
  .about::before, .about::after{display:none;}
}
.about .container{position:relative;z-index:1;}
.about-lead{font-size:1.1rem;max-width:680px;text-align:center;margin-left:auto;margin-right:auto;}
.founder{
  display:grid;grid-template-columns:180px 1fr;gap:36px;align-items:center;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:36px;margin:46px 0 60px;
}
.founder-photo{width:180px;height:180px;border-radius:50%;overflow:hidden;border:3px solid var(--gold-500);flex:none;}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;}
.founder-info h3{font-size:1.5rem;margin-bottom:4px;}
.founder-role{color:var(--gold-500);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;margin-bottom:14px;}
.founder-info p:not(.founder-role){text-align:justify;}

.mvv-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:60px;}
.mvv-card{background:var(--navy-900);border-radius:var(--radius);padding:34px;text-align:center;}
.mvv-card h3{color:var(--gold-500);font-size:1.2rem;}
.mvv-card p{color:rgba(255,255,255,.82);margin:0;text-align:justify;}

.values h3{font-size:1.3rem;margin-bottom:30px;text-align:center;}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.value-item{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 24px;transition:border-color .25s ease, transform .25s ease;text-align:center;
}
.value-item:hover{border-color:var(--gold-400);transform:translateY(-4px);}
/* English gloss sits above the Spanish term — the firm's values, presented
   the way the firm itself works: in both languages, side by side, with
   neither one treated as the translation of the other. */
.value-lang{
  font-family:var(--mono);color:var(--gold-500);font-size:.85rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;opacity:.85;
}
/* In English mode the heading below is already the same English word —
   showing the gloss too would just repeat the title, not pair languages. */
html[lang="en"] .value-lang{display:none;}
.value-item h4{margin:6px 0 8px;font-size:1.05rem;}
.value-item p{font-size:.92rem;margin:0;}

/* ---------- Quote banner (rotating, same crossfade as the hero) ---------- */
.quote-banner{position:relative;width:100%;min-height:clamp(340px,38vw,520px);overflow:hidden;isolation:isolate;background:var(--navy-950);}
.quote-slides{position:absolute;inset:0;}
.quote-slide{position:absolute;inset:0;opacity:0;z-index:1;transition:opacity 3.5s ease;}
.quote-slide.is-active{opacity:1;z-index:2;}
.quote-photo{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:saturate(.85) brightness(.7);animation:heroKenBurns 9s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){.quote-photo{animation:none;}.quote-slide{transition:opacity 1.2s ease;}}
.quote-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(5,10,20,.35) 0%, rgba(5,10,20,.3) 45%, rgba(5,10,20,.65) 100%);
}
.quote-content{position:relative;z-index:3;min-height:clamp(340px,38vw,520px);display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 24px;}
.quote-text{
  font-family:var(--serif);font-style:italic;color:#fff;font-size:clamp(1.4rem,3.4vw,2.3rem);
  line-height:1.45;max-width:820px;margin:0;text-shadow:0 4px 26px rgba(0,0,0,.65);
}

/* ---------- Offices ---------- */
.offices{padding:110px 0;background:var(--white);}
.offices-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.office-card{
  padding:40px;border-radius:var(--radius);background:var(--cream);position:relative;min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center 30%;isolation:isolate;color:#fff;
  transition:transform .35s ease;
}
.office-card h3{font-size:2rem;margin-bottom:12px;color:#fff;}
.office-card p{margin:0;color:rgba(255,255,255,.9);font-size:1.05rem;max-width:360px;}
.office-card .section-kicker{color:var(--gold-400);}
.office-card::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius);z-index:-1;
  background:linear-gradient(180deg, rgba(8,18,39,.1) 0%, rgba(5,10,20,.28) 55%, rgba(5,10,20,.9) 100%);
}
.office-card::after{
  content:'';position:absolute;inset:0;border-radius:var(--radius);z-index:-1;
  border:1px solid rgba(201,161,90,.3);
}
.office-fl{transform:translateY(-22px);}
.office-dc{transform:translateY(22px);}
.office-fl:hover{transform:translateY(-30px);}
.office-dc:hover{transform:translateY(14px);}

/* ---------- FAQ ---------- */
.faq{padding:110px 0;}
.faq-list{max-width:820px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:none;text-align:left;padding:24px 4px;cursor:pointer;
  font-family:var(--serif);font-size:1.08rem;color:var(--navy-900);font-weight:600;
}
.faq-icon{
  flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--gold-500);
  color:var(--gold-500);display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;transition:transform .25s ease;
}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 4px 22px;margin:0;text-align:justify;}
.faq-item.open .faq-a{max-height:220px;}

/* ---------- Contact ---------- */
.contact{padding:110px 0;background:var(--navy-950);}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;}
.contact-info{text-align:center;}
.contact-info h2{color:var(--white);}
.contact-info p{color:rgba(255,255,255,.75);}
.contact-list{margin:30px 0;display:flex;flex-direction:column;align-items:center;gap:20px;}
.contact-list li{display:flex;flex-direction:column;align-items:center;gap:2px;}
.contact-label{font-family:var(--mono);color:var(--gold-500);font-size:.88rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.contact-list a, .contact-list span{color:#fff;font-size:1.05rem;}
.contact-list a:hover{color:var(--gold-400);}
.social-links{display:flex;flex-direction:column;align-items:center;gap:14px;}
.social-links a{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);}
.social-links a:hover{color:var(--gold-400);}

.contact-form{background:var(--white);border-radius:var(--radius);padding:38px;box-shadow:var(--shadow);}
.form-row{margin-bottom:18px;display:flex;flex-direction:column;gap:6px;}
.form-row label{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.03em;color:var(--navy-800);text-transform:uppercase;text-align:center;}
.form-row input, .form-row select, .form-row textarea{
  border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-family:var(--sans);
  font-size:.95rem;color:var(--ink);background:var(--cream);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:2px solid var(--gold-400);outline-offset:1px;background:var(--white);
}
.form-note{font-size:.78rem;color:var(--ink-soft);margin-top:14px;text-align:center;}

/* ---------- Footer ---------- */
.site-footer{background:#050d1c;padding:70px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center;}
.footer-brand{display:flex;flex-direction:column;align-items:center;}
.footer-logo-img{height:38px;width:auto;display:block;margin:0 auto;}
.footer-brand p{color:rgba(255,255,255,.6);margin-top:14px;font-size:.9rem;max-width:220px;}
.footer-col h4{font-family:var(--mono);font-weight:600;color:var(--gold-500);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;}
.footer-col{display:flex;flex-direction:column;align-items:center;gap:10px;}
.footer-col a, .footer-col span{color:rgba(255,255,255,.68);font-size:.9rem;}
.footer-col a:hover{color:var(--gold-400);}
.footer-bottom{padding:24px 0;}
.footer-bottom p{color:rgba(255,255,255,.45);font-size:.82rem;margin:0;text-align:center;}

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width: 1000px){
  .nav-indicator{display:none;}
  .hamburger{display:flex;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .mvv-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .offices-grid{grid-template-columns:1fr;gap:40px;}
  .office-fl, .office-dc{transform:none;}
  .office-fl:hover, .office-dc:hover{transform:translateY(-6px);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .intro-grid{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}

  /* Mobile nav panel with cascading (staggered) link entrance. The Capitol
     photo is the same one the hero opens on — a fixed, deliberate background
     rather than whatever slide the hero carousel happened to be showing, so
     it looks identical every time the menu opens. The gradient on top is
     nearly opaque so it never fights with the link text for legibility. */
  .main-nav{
    display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;
    background:
      linear-gradient(180deg, rgba(5,10,20,.88) 0%, rgba(5,10,20,.8) 55%, rgba(5,10,20,.94) 100%),
      url('../assets/hero-1.jpg');
    background-size:cover;background-position:center 25%;
    padding:110px 32px 40px;gap:22px;z-index:9999;
    transform:translateX(100%);visibility:hidden;transition:transform .4s cubic-bezier(.6,0,.2,1), visibility 0s linear .4s;
  }
  .main-nav.open{transform:translateX(0);visibility:visible;transition:transform .4s cubic-bezier(.6,0,.2,1), visibility 0s linear 0s;}
  .main-nav a{font-size:1.25rem;padding:8px 0;opacity:0;transform:translateY(16px);transition:opacity .4s ease, transform .4s ease;}
  .main-nav.open a{opacity:1;transform:translateY(0);}
  .main-nav.open a:nth-of-type(1){transition-delay:.08s;}
  .main-nav.open a:nth-of-type(2){transition-delay:.14s;}
  .main-nav.open a:nth-of-type(3){transition-delay:.20s;}
  .main-nav.open a:nth-of-type(4){transition-delay:.26s;}
  .main-nav.open a:nth-of-type(5){transition-delay:.32s;}
  .main-nav.open a:nth-of-type(6){transition-delay:.38s;}
}

@media (max-width: 1000px){
  .hero{min-height:100vh;padding:120px 0 80px;}
  .hero-content{max-width:100%;padding-top:0;}
  .scroll-cue{display:none;}
  .method{clip-path:none;margin:0;padding:80px 0;}
  /* Every other section shared the same ~110px top+bottom padding, so two
     sections back to back added up to 220px+ of dead space — proportionally
     huge on a phone screen. Consistent, smaller padding on mobile everywhere. */
  .trust-bar{padding:32px 0;}
  .intro, .services, .about, .offices, .faq, .contact{padding:80px 0;}
}

@media (max-width: 640px){
  .service-grid, .steps, .values-grid, .footer-grid{grid-template-columns:1fr;}
  .founder{grid-template-columns:1fr;text-align:center;}
  .founder-photo{margin:0 auto;}
  .header-actions .btn-primary{display:none;}
  .header-inner{gap:12px;}
  .logo-full{display:none;}
  .logo-compact{display:block;height:38px;}
}