/* =========================================================
   RESPONSIVE — site-wide
   Breakpoints: 1200 / 1024 / 880(nav) / 768 / 600 / 480 / 380 / 340

   HERO ORBIT NOTE: the homepage orbit (.geo-mark) is built on FIXED pixel
   radii (e.g. left:172px) and its labels extend ~60px beyond the ring, so it
   can't fluidly shrink. Below 960px we therefore render it at its true 400px
   size, absolutely centred, and transform:scale() it to a footprint that keeps
   the labels inside the viewport at each step.
========================================================= */

/* ---------- large laptops ---------- */
@media (max-width:1200px) {
  .wrap        { padding:0 40px; }
  .phil-grid   { gap:64px; }
  .found-grid  { gap:60px; }
  .why-grid    { gap:56px 64px; }
  .footer-inner{ gap:48px; }
}

/* ---------- tablet landscape ---------- */
@media (max-width:1024px) {
  section      { padding:120px 0; }
  .matters     { padding:120px 0; }
  .hero-layout { gap:60px; }
  .approach-grid { grid-template-columns:repeat(2,1fr); gap:22px; }
  .work-grid   { grid-template-columns:1fr 1fr; }
  .why-grid    { grid-template-columns:1fr 1fr; gap:48px 56px; }
}

/* ---------- stack the two-column layouts + start scaling the orbit ---------- */
@media (max-width:960px) {
  .hero-layout { grid-template-columns:1fr; gap:48px; }
  .phil-grid   { grid-template-columns:1fr; gap:52px; }
  .found-grid  { grid-template-columns:1fr; gap:48px; }
  .principles  { grid-template-columns:1fr; gap:0; margin-top:48px; }
  .principle   { border-right:none; padding-right:0; padding-bottom:28px; border-bottom:1px solid var(--line); }
  .principle:last-child { border-bottom:none; padding-bottom:0; }
  .why-grid    { grid-template-columns:1fr; gap:40px; }
  .footer-inner{ grid-template-columns:1fr 1fr; gap:44px; }
  .scroll-cue  { display:none; }

  .hero-visual { position:relative; width:380px; height:380px; max-width:none; margin:0 auto 64px; }
  .hero-visual .geo-mark {
    position:absolute; top:50%; left:50%; width:400px; height:400px; max-width:none; margin:0;
    transform:translate(-50%,-50%) scale(.95);
  }
}

/* ============ MOBILE NAV (hamburger) ============ */
@media (max-width:880px) {
  nav { padding:12px 18px; }
  .nav-toggle { display:flex; }

  /* hamburger -> X */
  #nav.open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  #nav.open .nav-toggle span:nth-child(2) { opacity:0; }
  #nav.open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* links collapse into a dropdown panel */
  .nav-links {
    position:absolute; top:calc(100% + 12px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--line); border-radius:18px;
    padding:10px; box-shadow:0 18px 44px rgba(7,62,129,.12);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  #nav.open .nav-links { opacity:1; visibility:visible; transform:translateY(0); }

  /* show every link in the menu (overrides the old desktop hide) */
  .nav-links .nl-hide { display:block; }
  .nav-links a { padding:13px 16px; border-radius:12px; font-size:15px; }
  .nav-links a:hover,
  .nav-links a.active { background:rgba(7,62,129,.05); }
  .nav-links .nav-cta { margin-top:6px; text-align:center; color:#fff !important; }
  .nav-links .nav-cta:hover { transform:none; }
}

/* ---------- tablet portrait ---------- */
@media (max-width:768px) {
  section       { padding:100px 0; }
  .matters      { padding:100px 0; }
  .wrap         { padding:0 32px; }
  .who-head     { padding:0 32px; }
  .hero         { padding-top:118px; padding-bottom:56px; }
  .approach-head{ margin-bottom:54px; }
  .footer-bottom{ justify-content:flex-start; }

  .hero-visual { width:360px; height:360px; margin:0 auto 60px; }
  .hero-visual .geo-mark { transform:translate(-50%,-50%) scale(.9); }
}

/* ---------- phones ---------- */
@media (max-width:600px) {
  section        { padding:84px 0; }
  .matters       { padding:84px 0; }
  .wrap          { padding:0 24px; }
  .who-head      { padding:0 24px; }
  nav            { top:12px; width:calc(100% - 24px); padding:11px 16px; }
  .nav-logo img  { height:34px; }
  .approach-grid { grid-template-columns:1fr; }
  .work-grid     { grid-template-columns:1fr; }
  .footer-inner  { grid-template-columns:1fr; gap:38px; }

  /* compare rows stack their tag above the statement */
  .compare .row     { flex-direction:column; align-items:flex-start; gap:6px; }
  .compare .row .tag{ width:auto; }

  .hero-visual { width:328px; height:328px; margin:0 auto 56px; }
  .hero-visual .geo-mark { transform:translate(-50%,-50%) scale(.82); }
}

/* ---------- small phones ---------- */
@media (max-width:480px) {
  .hero h1     { font-size:clamp(2.1rem, 8.5vw, 2.8rem); }
  .hero-visual { width:288px; height:288px; margin:0 auto 52px; }
  .hero-visual .geo-mark { transform:translate(-50%,-50%) scale(.72); }
  /* labels shrink with the scale — bump them back up for legibility */
  .hero-visual .geo-label    { font-size:.92rem; }
  .hero-visual .geo-label-sm { font-size:.82rem; }
}

/* ---------- very small phones ---------- */
@media (max-width:380px) {
  .wrap        { padding:0 18px; }
  .hero-visual { width:240px; height:240px; margin:0 auto 46px; }
  .hero-visual .geo-mark { transform:translate(-50%,-50%) scale(.6); }
  .hero-visual .geo-label    { font-size:1.05rem; }
  .hero-visual .geo-label-sm { font-size:.95rem; }
}

@media (max-width:340px) {
  .hero-visual { width:208px; height:208px; margin:0 auto 42px; }
  .hero-visual .geo-mark { transform:translate(-50%,-50%) scale(.52); }
  .hero-visual .geo-label    { font-size:1.2rem; }
  .hero-visual .geo-label-sm { font-size:1.05rem; }
}

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