/*
Theme Name: The Iberian Office
Author: Ollie Burns
Description: The Iberian Office - Independent Advisory Iberia
Version: 1.0
*/


* { margin:0; padding:0; box-sizing:border-box; }
body { background:#F5F0E8; font-family:"Cormorant Garamond", Georgia, serif; color:#1C2B4A; }

/* ── NAV ── */
nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.25rem 3rem; border-bottom:0.5px solid rgba(166,138,80,0.35);
  position:sticky; top:0; background:#F5F0E8; z-index:100;
}
.nav-wordmark { font-size:18px; letter-spacing:0.25em; color:#1C2B4A; font-weight:400; }
.nav-links { display:flex; gap:2.5rem; font-size:16px; letter-spacing:0.12em; }
.nav-links a { text-decoration:none; color:rgba(28,43,74,0.6); transition:color 0.2s; }
.nav-links a:hover { color:#1C2B4A; }

/* ── SHARED ── */
.section-map-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0.07; pointer-events:none; z-index:0;
}
.gold-rule { display:flex; align-items:center; gap:12px; margin-bottom:1.75rem; }
.gold-rule.center { justify-content:center; }
.gold-line { width:48px; height:0.5px; background:rgba(166,138,80,0.6); }
.gold-diamond { width:6px; height:6px; background:#A68A50; transform:rotate(45deg); flex-shrink:0; }
.eyebrow { font-size:11px; letter-spacing:0.28em; color:#A68A50; margin-bottom:1rem; font-weight:400; }
.section-title { font-size:44px; font-weight:300; line-height:1.2; color:#1C2B4A; font-style:italic; margin-bottom:1.5rem; }
.section-title span { font-style:normal; }
.section-body { font-size:19px; font-weight:300; line-height:1.85; color:rgba(28,43,74,0.7); }

/* ── HERO ── */
.hero {
  display:grid; grid-template-columns:55% 45%;
  border-bottom:0.5px solid rgba(166,138,80,0.25);
  min-height:820px; overflow:hidden;
}
.hero-left {
  padding:3.5rem 3rem 5rem;
  display:flex; flex-direction:column; align-items:center;
  position:relative; z-index:2; justify-content:center; text-align:center;
}
.hero-right {
  position:relative; display:flex; align-items:stretch; justify-content:center; overflow:hidden;
}
.hero-right img {
  width:96%; height:96%; object-fit:contain; object-position:center center;
  opacity:0.30; mix-blend-mode:multiply; padding:1.5rem 1rem;
}
.hero-logo { width:420px; max-width:90%; display:block; margin:0 auto 2rem; }
.hero-tagline { font-size:14px; letter-spacing:0.22em; color:#A68A50; margin-bottom:2rem; font-weight:400; width:100%; text-align:center; }
.hero-h1 { font-size:38px; font-weight:300; line-height:1.2; color:#1C2B4A; font-style:italic; margin-bottom:2rem; width:100%; white-space:nowrap; text-align:center; }
.hero-h1 span { font-style:normal; font-weight:400; }
.hero-body { font-size:19px; font-weight:300; line-height:1.85; color:rgba(28,43,74,0.7); margin-bottom:3rem; width:100%; text-align:center; }
.cta { font-size:14px; letter-spacing:0.22em; color:#A68A50; border-bottom:1px solid rgba(166,138,80,0.5); padding-bottom:5px; cursor:pointer; text-decoration:none; }

/* ── SERVICES ── */
.services { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:0.5px solid rgba(166,138,80,0.25); }
.service { padding:3rem 2.75rem; border-right:0.5px solid rgba(166,138,80,0.22); }
.service:last-child { border-right:none; }
.service-num { font-size:13px; letter-spacing:0.2em; color:#A68A50; margin-bottom:1rem; }
.service-title { font-size:26px; font-weight:400; color:#1C2B4A; margin-bottom:1rem; line-height:1.25; }
.service-body { font-size:17px; line-height:1.85; color:rgba(28,43,74,0.65); font-weight:300; }

/* ── WHAT WE DO ── */
.what-we-do { position:relative; overflow:hidden; padding:6rem 3rem; }
.what-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; position:relative; z-index:2; }
.what-card { margin-bottom:2.5rem; }
.what-card-title { font-size:22px; font-weight:400; color:#A68A50; margin-bottom:0.75rem; }
.what-card-body { font-size:17px; font-weight:300; line-height:1.8; color:rgba(28,43,74,0.7); }
.not-scope { margin-top:2rem; padding:1.5rem 2rem; border:0.5px solid rgba(166,138,80,0.3); position:relative; z-index:2; }
.not-scope-title { font-size:11px; letter-spacing:0.2em; color:#A68A50; margin-bottom:1rem; }
.scope-tags { display:flex; flex-wrap:wrap; gap:8px; }
.scope-tag { font-size:13px; color:rgba(28,43,74,0.5); border:0.5px solid rgba(28,43,74,0.2); padding:4px 12px; }

/* ── NETWORK ── */
.network-strip {
  background:#1C2B4A; padding:5rem 3rem;
  display:grid; grid-template-columns:1fr 2fr; gap:5rem; align-items:start;
  position:relative; overflow:hidden;
}
.network-map-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0.08; pointer-events:none; z-index:0; mix-blend-mode:screen;
}
.network-label { font-size:12px; letter-spacing:0.25em; color:#A68A50; margin-bottom:1.5rem; position:relative; z-index:2; }
.network-headline { font-size:42px; font-weight:300; color:#F5F0E8; line-height:1.3; font-style:italic; position:relative; z-index:2; }
.network-headline span { font-style:normal; }
.network-sub { font-size:17px; font-weight:300; color:rgba(245,240,232,0.5); line-height:1.8; margin-top:1.5rem; max-width:280px; position:relative; z-index:2; }
.network-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(166,138,80,0.25); border:0.5px solid rgba(166,138,80,0.25); position:relative; z-index:2; }
.network-item { background:#1C2B4A; padding:2.5rem 2.25rem; }
.network-item-title { font-size:11px; letter-spacing:0.18em; color:#A68A50; margin-bottom:0.75rem; }
.network-item-body { font-size:18px; color:rgba(245,240,232,0.72); font-weight:300; line-height:1.75; }

/* ── WHO ── */
.who-section { position:relative; overflow:hidden; padding:6rem 3rem; border-top:0.5px solid rgba(166,138,80,0.2); }
.who-inner { position:relative; z-index:2; max-width:680px; margin:0 auto; text-align:center; }
.who-quote { font-size:28px; font-weight:300; font-style:italic; line-height:1.6; color:#1C2B4A; margin:2rem 0; }

/* ── ABOUT ── */
.about-strip {
  position:relative; overflow:hidden; padding:6rem 3rem;
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
  border-top:0.5px solid rgba(166,138,80,0.2);
}
.about-label { font-size:12px; letter-spacing:0.22em; color:#A68A50; margin-bottom:1.25rem; }
.about-name { font-size:48px; font-weight:300; color:#1C2B4A; font-style:italic; margin-bottom:0.4rem; }
.about-role { font-size:13px; letter-spacing:0.18em; color:rgba(28,43,74,0.42); margin-bottom:2rem; }
.about-body { font-size:18px; font-weight:300; line-height:1.9; color:rgba(28,43,74,0.68); }
.about-body p + p { margin-top:1.25rem; }
.headshot-wrap { overflow:hidden; border:0.5px solid rgba(166,138,80,0.25); aspect-ratio:4/5; position:relative; z-index:2; }
.headshot-wrap img { width:100%; height:100%; object-fit:cover; object-position:center 15%; }
.about-text { position:relative; z-index:2; }

/* ── CONTACT ── */
.contact-strip {
  position:relative; overflow:hidden; background:#1C2B4A; padding:6rem 3rem; text-align:center;
}
.contact-inner { position:relative; z-index:2; max-width:560px; margin:0 auto; }
.contact-title { font-size:44px; font-weight:300; color:#F5F0E8; font-style:italic; margin-bottom:1.5rem; }
.contact-body { font-size:19px; font-weight:300; color:rgba(245,240,232,0.6); line-height:1.85; margin-bottom:2.5rem; }
.contact-email { font-size:22px; letter-spacing:0.12em; color:#A68A50; text-decoration:none; display:block; margin-bottom:0.75rem; }
.contact-phone { font-size:18px; color:rgba(245,240,232,0.5); letter-spacing:0.08em; }

/* ── FOOTER ── */
footer { padding:1.75rem 3rem; border-top:0.5px solid rgba(166,138,80,0.25); display:flex; justify-content:space-between; align-items:center; }
.footer-l { font-size:13px; letter-spacing:0.2em; color:rgba(28,43,74,0.4); }
.footer-r { font-size:15px; letter-spacing:0.12em; color:#A68A50; }

/* ════════════════════════════════════════
   MOBILE RESPONSIVE — max-width 768px
   ════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hide palm on mobile */
  .hero-right { display:none; }

  /* Hero full width since palm is hidden */
  .hero { grid-template-columns:1fr; min-height:unset; }
  .hero-left { padding:2.5rem 1.5rem 3rem; }

  /* Nav */
  nav {
    padding:1rem 1.5rem;
    flex-direction:column; gap:0.75rem; align-items:flex-start;
  }
  .nav-wordmark { font-size:14px; letter-spacing:0.18em; }
  .nav-links {
    gap:1.25rem; font-size:13px; letter-spacing:0.08em; flex-wrap:wrap;
  }

  /* Hero — stack vertically, palm as banner above text */
  .hero {
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    min-height:unset;
  }
  .hero-right {
    order:-1;
    height:260px;
    justify-content:center; align-items:center;
  }
  .hero-right img {
    width:auto; height:240px; padding:1rem;
    object-fit:contain; margin:0 auto;
  }
  .hero-left {
    padding:2rem 1.5rem 3rem;
  }
  .hero-logo { width:260px; margin-bottom:1.5rem; }
  .hero-tagline { font-size:11px; margin-bottom:1.25rem; }
  .hero-h1 {
    font-size:24px; white-space:normal;
    margin-bottom:1.25rem;
  }
  .hero-body { font-size:16px; margin-bottom:2rem; }

  /* Services — single column */
  .services { grid-template-columns:1fr; }
  .service {
    border-right:none;
    border-bottom:0.5px solid rgba(166,138,80,0.22);
    padding:2rem 1.5rem;
  }
  .service:last-child { border-bottom:none; }
  .service-title { font-size:22px; }
  .service-body { font-size:16px; }

  /* What we do */
  .what-we-do { padding:3rem 1.5rem; }
  .what-grid { grid-template-columns:1fr; gap:0; }
  .section-title { font-size:32px; }
  .section-body { font-size:17px; }
  .what-card-title { font-size:20px; }
  .what-card-body { font-size:16px; }

  /* Network */
  .network-strip {
    grid-template-columns:1fr; gap:2.5rem;
    padding:3rem 1.5rem;
  }
  .network-headline { font-size:32px; }
  .network-grid { grid-template-columns:1fr 1fr; }
  .network-item { padding:1.5rem; }
  .network-item-body { font-size:15px; }

  /* Who */
  .who-section { padding:3rem 1.5rem; }
  .who-quote { font-size:20px; }

  /* About — stack photo below text */
  .about-strip {
    grid-template-columns:1fr; gap:2.5rem;
    padding:3rem 1.5rem;
  }
  .about-name { font-size:36px; }
  .about-body { font-size:16px; }
  .headshot-wrap { aspect-ratio:4/5; }

  /* Contact */
  .contact-strip { padding:3rem 1.5rem; }
  .contact-title { font-size:32px; }
  .contact-body { font-size:17px; }
  .contact-email { font-size:17px; }

  /* Footer */
  footer {
    flex-direction:column; gap:0.5rem; text-align:center;
    padding:1.25rem 1.5rem;
  }
}