/* ═══════════════════════════════════════════════════════════════════════════
   Nearness shell — the two-sided site.
   Loaded by every public page. Owns three things:
     1. the "For families / For business" toggle in the nav
     2. which nav + footer links are visible for the current side
     3. the arrival popup that asks a first-time visitor which side they want
   Everything keys off  <html data-mode="families">  or  data-mode="business",
   set by a tiny blocking script in <head> so there is never a flash of the
   wrong nav.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nav: logo and toggle sit together on the left ───────────────────────────
   The toggle is a new tenant in a bar that was already full: at 1440px the old
   180px logo plus six links plus Sign In plus the call to action came to more
   than the available width, and the links simply overlapped the logo. Two
   changes make room — a smaller logo (the bar keeps its 200px height, so no
   hero offset moves) and nav links that are allowed to shrink. This sheet is
   linked after each page's own <style>, so these win on document order; that
   also means the responsive logo heights below have to be restated here,
   because the old ones live in a media query in the sheet we are overriding. */
.nav-left{display:flex;align-items:center;gap:22px;min-width:0;flex:0 0 auto;}
.nav-logo img{height:118px;}
.nav-links{flex:0 1 auto;min-width:0;}

/* ── The toggle itself ───────────────────────────────────────────────────── */
.mode-toggle{
  display:inline-flex;align-items:center;
  background:var(--orange-pale,#FDF0E8);
  border-radius:999px;padding:4px;flex-shrink:0;
  border:1px solid rgba(237,114,52,0.16);
}
.mode-toggle a{
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  letter-spacing:0.2px;line-height:1;white-space:nowrap;
  color:var(--orange,#ED7234);text-decoration:none;
  padding:10px 18px;border-radius:999px;
  transition:background 0.22s ease,color 0.22s ease,box-shadow 0.22s ease;
}
.mode-toggle a:hover{color:#C9551C;}
html[data-mode="families"] .mode-toggle a[data-mode="families"],
html[data-mode="business"] .mode-toggle a[data-mode="business"]{
  background:var(--orange,#ED7234);color:#fff;
  box-shadow:0 4px 12px -4px rgba(237,114,52,0.7);
}
html[data-mode="families"] .mode-toggle a[data-mode="families"]:hover,
html[data-mode="business"] .mode-toggle a[data-mode="business"]:hover{color:#fff;}

/* ── Show only the links belonging to the current side ───────────────────── */
html[data-mode="families"] .m-biz{display:none !important;}
html[data-mode="business"]  .m-fam{display:none !important;}

/* ── Arrival popup ───────────────────────────────────────────────────────── */
.pathgate{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(30,45,61,0.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity 0.3s ease;
}
.pathgate.open{opacity:1;pointer-events:auto;}
.pathgate[hidden]{display:none;}

.pg-card{
  background:var(--cream,#FAF8F5);border-radius:22px;
  padding:44px 44px 36px;width:100%;max-width:860px;
  max-height:calc(100vh - 48px);overflow-y:auto;
  box-shadow:0 40px 90px -30px rgba(30,45,61,0.55);
  transform:translateY(14px) scale(0.985);
  transition:transform 0.32s cubic-bezier(0.2,0.7,0.3,1);
  position:relative;
}
.pathgate.open .pg-card{transform:none;}

.pg-close{
  position:absolute;top:16px;right:18px;
  background:none;border:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--soft,#8A9BB0);
  padding:4px 8px;border-radius:8px;transition:color 0.2s,background 0.2s;
}
.pg-close:hover{color:var(--charcoal,#1E2530);background:rgba(0,0,0,0.05);}

.pg-title{
  font-family:'Lora',serif;font-weight:600;
  font-size:clamp(24px,3.2vw,32px);line-height:1.25;
  color:var(--navy,#1E2D3D);text-align:center;margin:0 0 6px;
}
.pg-sub{
  font-family:'Inter',sans-serif;font-size:15px;font-weight:300;
  color:var(--soft,#8A9BB0);text-align:center;margin:0 0 30px;
}

.pg-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}

.pg-opt{
  position:relative;background:#fff;border:1.5px solid rgba(30,45,61,0.10);
  border-radius:18px;padding:28px 26px 26px;cursor:pointer;
  transition:border-color 0.22s ease,box-shadow 0.22s ease,transform 0.22s ease;
  display:flex;flex-direction:column;
}
.pg-opt:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(30,45,61,0.4);}
.pg-opt.on{border-color:var(--orange,#ED7234);box-shadow:0 18px 44px -22px rgba(237,114,52,0.55);}

.pg-tag{
  position:absolute;top:16px;right:16px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:0.2px;
  color:#9A5A2E;background:var(--orange-pale,#FDF0E8);
  border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.pg-ico{
  width:52px;height:52px;border-radius:50%;
  background:var(--orange-pale,#FDF0E8);color:var(--orange,#ED7234);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.pg-ico svg{width:24px;height:24px;}
.pg-opt h3{
  font-family:'Lora',serif;font-weight:600;font-size:20px;line-height:1.3;
  color:var(--navy,#1E2D3D);margin:0 0 10px;
}
.pg-opt p{
  font-family:'Inter',sans-serif;font-weight:300;font-size:15px;line-height:1.6;
  color:var(--mid,#4A5568);margin:0 0 22px;flex:1;
}
.pg-btn{
  align-self:flex-start;display:inline-block;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:600;
  background:var(--orange,#ED7234);color:#fff;text-decoration:none;
  border-radius:999px;padding:13px 26px;
  transition:background 0.2s ease,transform 0.2s ease;
}
.pg-btn:hover{background:#D95F22;transform:translateY(-1px);}

.pg-foot{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:300;
  color:var(--soft,#8A9BB0);text-align:center;margin:26px 0 0;
}
.pg-foot b{font-weight:500;color:var(--mid,#4A5568);}

/* The page underneath fades in when you switch sides from inside the popup. */
.pg-switching{opacity:0.35;transition:opacity 0.18s ease;}

@media(max-width:760px){
  /* Extra head room so the close button does not sit on the title. */
  .pg-card{padding:46px 22px 26px;border-radius:18px;}
  .pg-grid{grid-template-columns:1fr;gap:16px;}
  .pg-opt{padding:24px 20px 22px;}
  .pg-tag{position:static;display:inline-block;margin-bottom:12px;align-self:flex-start;}
  .pg-ico{width:44px;height:44px;margin-bottom:14px;}
}

/* ── Nav responsive: keep the toggle visible at every width ──────────────── */
@media(max-width:1340px){
  nav{padding:0 34px;}
  .nav-links{gap:22px;}
  .nav-left{gap:16px;}
  .nav-logo img{height:104px;}
  .mode-toggle a{font-size:13.5px;padding:9px 15px;}
}
@media(max-width:1140px){
  nav{padding:0 22px;}
  .nav-links{gap:16px;font-size:14px;}
  .nav-links a{font-size:14px;}
  .nav-left{gap:12px;}
  .nav-logo img{height:92px;}
  .mode-toggle a{font-size:12.5px;padding:8px 12px;}
}
@media(max-width:900px){
  .nav-logo img{height:80px;}
  .mode-toggle{padding:3px;}
  .mode-toggle a{font-size:13px;padding:8px 14px;}
}
@media(max-width:560px){
  .nav-logo img{height:56px;}
  .nav-left{gap:10px;}
  .mode-toggle a{font-size:11.5px;padding:7px 11px;letter-spacing:0;}
}

/* ── Mobile menu gets its own copy of the toggle, full width ─────────────── */
.mobile-menu .mode-toggle{display:flex;width:100%;margin:0 0 14px;}
.mobile-menu .mode-toggle a{flex:1;text-align:center;font-size:14px;padding:11px 8px;}

/* ── The toggle's two label lengths ──────────────────────────────────────────
   A 360px phone has to fit the logo, the toggle and the hamburger on one line.
   "For families / For business" does not survive that, so below 470px the
   toggle drops the "For". */
.mode-toggle .mt-short{display:none;}
@media(max-width:470px){
  .mode-toggle .mt-long{display:none;}
  .mode-toggle .mt-short{display:inline;}
  .nav-logo img{height:48px;}
  .nav-left{gap:8px;}
  .mode-toggle a{font-size:12px;padding:8px 13px;}
}
/* The mobile menu has the full width to play with, so it keeps the long labels. */
.mobile-menu .mode-toggle .mt-long{display:inline;}
.mobile-menu .mode-toggle .mt-short{display:none;}

/* ── Mobile: the sign-in wrapper must not hold the bar open ──────────────────
   Below 900px the page stylesheet hides the Sign In button and turns the panel
   into a centred modal, but the wrapper around them stays a flex item and keeps
   88px of the bar to itself. With the toggle now sharing that row, those 88px
   pushed the hamburger past the right edge — invisibly, because html has
   overflow-x:hidden, so there was no scrollbar to give it away. Taking the
   wrapper out of flow (rather than hiding it) frees the space while leaving the
   panel in the DOM for the mobile menu's Sign In to open. */
@media(max-width:900px){
  .signin-wrapper{position:absolute;width:0;height:0;}
  /* Only the homepage ever hid this button on phones; every other page left it
     sitting on top of the logo. Hidden everywhere now — the mobile menu's
     Sign In below is the way in on a phone. */
  button.nav-signin{display:none;}
}
@media(max-width:400px){
  .nav-logo img{height:42px;}
  .nav-left{gap:7px;}
  .mode-toggle{padding:2px;}
  .mode-toggle a{font-size:11px;padding:7px 10px;}
}

/* ── Sign In inside the mobile menu ──────────────────────────────────────────
   The desktop Sign In button is hidden on phones and the mobile menu never
   offered a replacement, so there was no way to sign in from a phone at all. */
.mobile-menu .mobile-signin{
  display:block;text-align:center;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:500;
  color:var(--orange,#ED7234);background:var(--orange-pale,#FDF0E8);
  border:1px solid rgba(237,114,52,0.22);border-radius:999px;
  padding:12px;margin-top:10px;text-decoration:none;
}
