/* =========================================================
   Site navigation + footer ("Dev instructions: Navigation only / Footer only", Sep 30 2026).
   Ported from nav-only.html / footer-only.html. Shared by the Next.js pages and the static
   /join-the-30 page so both stay identical. Everything is scoped under .tgmt-chrome so the
   reference tokens and resets don't leak into the rest of the site.
   ========================================================= */
.tgmt-chrome{
  --green:#22301f;
  --green-card:#2b3a28;
  --green-soft:#31402f;
  --green-line:#3a4a36;
  --green-shadow:#161f15;
  --gold:#a9803f;
  --gold-soft:#B8956A;
  --cream:#f1ede2;
  --cream-lt:#f6f2e8;
  --sand:#e7e1d0;
  --text-on-dark:#f1ede2;
  --text-on-dark-2:#c9d1bf;
  --text-on-dark-3:#9fab94;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --mono:"SFMono-Regular",Menlo,Consolas,monospace;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
.tgmt-chrome *,.tgmt-chrome *::before,.tgmt-chrome *::after{margin:0;padding:0;box-sizing:border-box;}
.tgmt-chrome a{text-decoration:none;color:inherit;}
.tgmt-chrome h4{font-weight:500;}

/* =========================================================
   LOGO LOCKUP (shared by nav + footer)
   ========================================================= */
.tgmt-chrome .lockup{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.tgmt-chrome .lockup svg{display:block;flex-shrink:0;}
.tgmt-chrome .lockup .words{display:flex;flex-direction:column;line-height:1;}
.tgmt-chrome .lockup .l1{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-on-dark);}
.tgmt-chrome .lockup .l1 .good{
  font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;
  font-size:22px;color:var(--gold-soft);margin-left:4px;position:relative;top:2px;
}
.tgmt-chrome .lockup .l2{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#b9c2ae;margin-top:4px;}

/* =========================================================
   NAV: floating pill
   ========================================================= */
.tgmt-chrome.nav-zone{position:sticky;top:0;z-index:100;padding:18px 24px 0;}
.tgmt-chrome .pill{
  position:relative;max-width:1180px;margin:0 auto;
  display:flex;align-items:center;
  background:var(--green);border-radius:40px;
  padding:12px 210px 12px 26px;
  box-shadow:0 14px 30px -18px rgba(34,48,31,.6);
}
.tgmt-chrome .nav-divider{width:1px;height:30px;background:var(--green-line);margin:0 34px;flex-shrink:0;}
.tgmt-chrome .nav-links{display:flex;gap:26px;}
.tgmt-chrome .nav-links > a{position:relative;color:var(--text-on-dark);font-size:15px;padding:6px 0;white-space:nowrap;}
/* the branch underline */
.tgmt-chrome .nav-links > a::after{
  content:"";position:absolute;left:50%;bottom:-2px;width:0;height:4px;border-radius:4px;
  background:var(--gold-soft);transform:translateX(-50%);transition:width .25s ease;
}
.tgmt-chrome .nav-links > a:hover::after,.tgmt-chrome .nav-links > a:focus-visible::after,.tgmt-chrome .nav-links > a[aria-current="page"]::after{width:18px;}
.tgmt-chrome .nav-links > a:focus-visible{outline:none;}
.tgmt-chrome .nav-links .gd,.tgmt-chrome .mobile-menu .gd{font-family:var(--serif);font-style:italic;color:var(--gold-soft);font-size:1.08em;}

/* CTA sits inside the pill’s right end with an even 6px gap (top, bottom, right), so its
   rounded end runs parallel to the pill’s curve. (Client change, Oct 1: replaces the
   reference file’s 18px overhang, whose curves didn’t line up.) */
.tgmt-chrome .nav-cta{
  position:absolute;right:6px;top:6px;bottom:6px;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--cream-lt);color:var(--green);font-weight:600;font-size:15px;
  padding:0 10px 0 22px;border-radius:999px;white-space:nowrap;
  box-shadow:3px 3px 0 var(--green-shadow);
  transition:transform .15s,box-shadow .15s;
}
.tgmt-chrome .nav-cta:hover{transform:translateY(-1px);box-shadow:3px 4px 0 var(--green-shadow);}
.tgmt-chrome .nav-cta:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px;}
.tgmt-chrome .nav-cta .left{font-size:12px;background:var(--green);color:var(--gold-soft);padding:4px 10px;border-radius:14px;}

.tgmt-chrome .nav-cta .label-short{display:none;}
.tgmt-chrome .nav-toggle{
  display:none;margin-left:auto;background:none;border:none;cursor:pointer;
  width:42px;height:42px;border-radius:50%;color:var(--text-on-dark);
}
.tgmt-chrome .nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;margin:4px auto;}
.tgmt-chrome .mobile-menu{display:none;}

/* =========================================================
   WHO WE HELP MENU ("Navigation: Who We Help menu", Oct 13 2026)
   Desktop: a panel under the nav bar. Phones/tablets: an accordion in the hamburger menu.
   Behavior: /chrome/nav.js. Brand colors only:
   cream #F5F1E8 · oat #ECE8DD · mist #FAF7F0 · forest #1A2E1F · pine-needle #2D4A35
   moss #5C6B47 · cedar-amber #B8956A · copper #A07A4F · shadow-green #131F18
   ========================================================= */
.tgmt-chrome{
  --wwh-head:var(--font-archivo,"Archivo"),var(--sans);
  --wwh-serif:var(--font-source-serif,"Source Serif 4"),var(--serif);
  --wwh-mono:var(--font-jetbrains,"JetBrains Mono"),var(--mono);
  --wwh-corner:28px 28px 28px 6px;
  --wwh-corner-flip:28px 28px 6px 28px;
}
/* The label: a button styled like the other links, plus a chevron. */
.tgmt-chrome .wwh-label{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;cursor:pointer;font:inherit;color:var(--text-on-dark);font-size:15px;padding:6px 0;white-space:nowrap;
}
.tgmt-chrome .wwh-label::after{
  content:"";position:absolute;left:50%;bottom:-2px;width:0;height:4px;border-radius:4px;
  background:var(--gold-soft);transform:translateX(-50%);transition:width .25s ease;
}
.tgmt-chrome .wwh-label:hover::after,.tgmt-chrome .wwh-label:focus-visible::after,
.tgmt-chrome .wwh-label[aria-expanded="true"]::after,.tgmt-chrome .wwh-label.is-current::after{width:18px;}
.tgmt-chrome .wwh-label:focus-visible{outline:none;}
.tgmt-chrome .chev{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
.tgmt-chrome [aria-expanded="true"] > .chev{transform:rotate(180deg);}

/* The panel: full width of the nav bar, 12px below it. */
.tgmt-chrome .wwh-panel{
  position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:5;
  background:#FAF7F0;border:1.5px solid #2D4A35;border-radius:var(--wwh-corner);box-shadow:4px 5px 0 #2D4A35;
  padding:20px 24px 14px;color:#2D4A35;text-align:left;white-space:normal;
  animation:wwh-in .14s ease-out;
}
.tgmt-chrome .wwh-panel[hidden]{display:none;}
/* Invisible strip over the 12px gap so the pointer can cross it. */
.tgmt-chrome .wwh-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
@keyframes wwh-in{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.tgmt-chrome .wwh-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:24px;}
.tgmt-chrome .wwh-col ul{list-style:none;margin:10px 0 0;}
.tgmt-chrome .wwh-hub{display:flex;align-items:center;gap:8px;font-family:var(--wwh-head);font-weight:800;font-size:17px;color:#1A2E1F;}
.tgmt-chrome .wwh-hub .pine{flex-shrink:0;}
.tgmt-chrome .wwh-panel .gd{font-family:var(--wwh-serif);font-style:italic;font-weight:500;color:#A07A4F;font-size:1em;}
.tgmt-chrome .wwh-desc{font-family:var(--wwh-serif);font-style:italic;font-size:13.5px;line-height:1.35;color:#2D4A35;margin:4px 0 0 30px;}
.tgmt-chrome .wwh-link{
  display:flex;align-items:center;gap:10px;padding:7px 10px;margin:0 -10px;border-radius:var(--wwh-corner);
  font-family:var(--wwh-head);font-weight:700;font-size:14px;line-height:1.25;color:#1A2E1F;
  transition:background .15s,transform .15s;
}
.tgmt-chrome .wwh-link:hover,.tgmt-chrome .wwh-link:focus-visible,.tgmt-chrome .wwh-link.is-on{background:#ECE8DD;transform:translateX(2px);outline:none;}
.tgmt-chrome .wwh-link .ic,.tgmt-chrome .mm-hubs .ic{width:20px;height:20px;flex-shrink:0;fill:none;stroke:#2D4A35;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tgmt-chrome .wwh-col > .wwh-door{margin-top:8px;font-size:13.5px;color:#2D4A35;position:relative;}
.tgmt-chrome .wwh-col > .wwh-door::before{content:"";position:absolute;left:10px;right:10px;top:-5px;border-top:1.5px solid #ECE8DD;}
.tgmt-chrome .wwh-door .ic,.tgmt-chrome .mm-door .ic{stroke:#A07A4F;}

/* Preview column */
.tgmt-chrome .wwh-preview{background:#ECE8DD;border-radius:var(--wwh-corner);padding:16px;display:flex;flex-direction:column;gap:12px;}
.tgmt-chrome .wwh-plabel{display:flex;align-items:center;gap:7px;font-family:var(--wwh-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#2D4A35;}
.tgmt-chrome .wwh-plabel .dot{width:6px;height:6px;border-radius:50%;background:#B8956A;}
.tgmt-chrome .wwh-idle,.tgmt-chrome .wwh-live{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.tgmt-chrome .wwh-idle[hidden],.tgmt-chrome .wwh-live[hidden]{display:none;}
.tgmt-chrome .wwh-idle p,.tgmt-chrome .wwh-a{font-family:var(--wwh-serif);font-size:14px;line-height:1.5;color:#2D4A35;}
.tgmt-chrome .wwh-q{background:#FAF7F0;border-radius:var(--wwh-corner);padding:10px 14px;font-family:var(--wwh-serif);font-size:14px;line-height:1.45;color:#1A2E1F;}
.tgmt-chrome .wwh-a .you{display:inline-block;background:#B8956A;color:#131F18;font-family:var(--wwh-head);font-weight:800;font-size:12px;padding:1px 8px;border-radius:var(--wwh-corner);}
.tgmt-chrome .wwh-btn{
  display:inline-block;background:#B8956A;color:#131F18;font-family:var(--wwh-head);font-weight:800;font-size:14px;line-height:1.2;
  padding:11px 18px;border-radius:var(--wwh-corner);box-shadow:3px 4px 0 #2D4A35;transition:transform .15s,box-shadow .15s,border-radius .15s;
}
.tgmt-chrome .wwh-btn:hover,.tgmt-chrome .wwh-btn:focus-visible{transform:translateY(-2px);box-shadow:-3px 4px 0 #2D4A35;border-radius:var(--wwh-corner-flip);outline:none;}
.tgmt-chrome .wwh-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding-top:12px;border-top:1.5px solid #ECE8DD;}
.tgmt-chrome .wwh-foot a{font-family:var(--wwh-head);font-weight:700;font-size:13.5px;color:#1A2E1F;border-bottom:2px solid #B8956A;padding-bottom:1px;}
.tgmt-chrome .wwh-spots{font-family:var(--wwh-mono);font-size:11.5px;color:#2D4A35;}
.tgmt-chrome .wwh-spots b{font-weight:500;color:#B8956A;}

/* Mobile accordion (inside the hamburger menu) */
.tgmt-chrome .mm-wwh{
  display:flex;width:100%;justify-content:space-between;align-items:center;background:none;border:0;cursor:pointer;
  font:inherit;color:var(--text-on-dark);font-size:17px;padding:12px 0;border-bottom:1px solid var(--green-line);text-align:left;
}
.tgmt-chrome .mm-wwh .chev{width:12px;height:12px;color:var(--gold-soft);}
/* The nav is sticky, so a long menu scrolls inside itself. */
.tgmt-chrome .mobile-menu.open{max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;}
.tgmt-chrome .mm-hubs{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-bottom:1px solid var(--green-line);}
.tgmt-chrome .mm-hubs[hidden]{display:none;}
.tgmt-chrome .mm-card{background:#FAF7F0;border-radius:var(--wwh-corner);padding:6px 14px;}
.tgmt-chrome .mobile-menu .mm-card a{
  display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #ECE8DD;
  font-family:var(--wwh-head);font-weight:700;font-size:15px;color:#1A2E1F;
}
.tgmt-chrome .mobile-menu .mm-card a:last-child{border-bottom:none;}
.tgmt-chrome .mobile-menu .mm-card .mm-hub{font-weight:800;font-size:16px;}
.tgmt-chrome .mobile-menu .mm-card .gd{color:#A07A4F;font-weight:500;}
.tgmt-chrome .mobile-menu .mm-card .mm-door{color:#2D4A35;}
.tgmt-chrome .mobile-menu .mm-all{border-bottom:none;padding:6px 0 0;font-size:15px;color:var(--gold-soft);}

@media (prefers-reduced-motion:reduce){
  .tgmt-chrome .wwh-panel{animation:none;}
}

/* =========================================================
   FOOTER
   ========================================================= */
.tgmt-chrome.footer{background:var(--green);margin-top:0;}
.tgmt-chrome .ridge{display:block;width:100%;height:60px;background:var(--cream);}
/* Homepage: the FinalCta skyline (/figma/mountains.svg, #131F18) runs straight into the footer. */
.tgmt-chrome.footer--flush{background:#131F18;padding-top:40px;}
.tgmt-chrome .f-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.35fr .8fr .7fr 1.1fr;gap:40px;
  padding:20px 40px 40px;
}
.tgmt-chrome .f-desc{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--text-on-dark-2);margin-top:18px;max-width:320px;}
.tgmt-chrome .f-chips{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.tgmt-chrome .f-chips span{font-size:12.5px;color:var(--text-on-dark);background:var(--green-soft);padding:6px 11px;border-radius:20px;}

.tgmt-chrome .f-col h4{font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;color:var(--gold-soft);font-weight:500;margin-bottom:14px;}
.tgmt-chrome .f-col a{display:block;position:relative;width:max-content;color:#e8e2d2;font-size:15.5px;margin-bottom:12px;}
.tgmt-chrome .f-col a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:3px;border-radius:3px;
  background:var(--gold-soft);transition:width .25s;
}
.tgmt-chrome .f-col a:hover::after,.tgmt-chrome .f-col a:focus-visible::after{width:16px;}
.tgmt-chrome .f-col a:focus-visible{outline:none;}
.tgmt-chrome .f-col a .gd{font-family:var(--serif);font-style:italic;color:var(--gold-soft);}

.tgmt-chrome .f-card{background:var(--green-card);border:1px solid var(--green-line);border-radius:16px;padding:22px;}
.tgmt-chrome .f-card .t{font-family:var(--serif);font-size:20px;color:var(--text-on-dark);line-height:1.3;}
.tgmt-chrome .f-card .s{font-size:13.5px;color:#b9c2ae;margin:8px 0 16px;line-height:1.45;}
.tgmt-chrome .f-card .b{
  display:block;text-align:center;background:var(--gold);color:var(--cream-lt);
  font-weight:600;font-size:15px;padding:13px;border-radius:11px;transition:background .15s,transform .15s;
}
.tgmt-chrome .f-card .b:hover{background:#96702f;transform:translateY(-1px);}
.tgmt-chrome .f-card .b:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px;}

.tgmt-chrome .f-bottom{
  max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--green-line);padding:18px 0 26px;font-size:13px;color:var(--text-on-dark-3);
}
.tgmt-chrome .f-bottom a:hover{color:var(--text-on-dark);}
.tgmt-chrome .f-bottom .legal a+a{margin-left:18px;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .tgmt-chrome .nav-links{gap:18px;}
  .tgmt-chrome .nav-divider{margin:0 22px;}
}
@media (max-width:960px){
  .tgmt-chrome.nav-zone{padding:12px 14px 0;}
  .tgmt-chrome .pill{padding:10px 10px 10px 20px;}
  .tgmt-chrome .nav-divider,.tgmt-chrome .nav-links{display:none;}
  .tgmt-chrome .nav-cta{position:static;transform:none;margin-left:auto;font-size:14px;padding:10px 8px 10px 16px;border-radius:30px;box-shadow:3px 3px 0 var(--green-shadow);}
  .tgmt-chrome .nav-cta:hover{transform:translateY(-1px);box-shadow:3px 4px 0 var(--green-shadow);}
  .tgmt-chrome .nav-toggle{display:block;margin-left:6px;}
  .tgmt-chrome .mobile-menu{
    position:absolute;left:0;right:0;top:calc(100% + 8px);
    background:var(--green);border-radius:22px;padding:14px 22px 18px;
    box-shadow:0 18px 30px -18px rgba(34,48,31,.6);
  }
  .tgmt-chrome .mobile-menu.open{display:block;}
  .tgmt-chrome .mobile-menu a{display:block;color:var(--text-on-dark);font-size:17px;padding:12px 0;border-bottom:1px solid var(--green-line);}
  .tgmt-chrome .mobile-menu a:last-child{border-bottom:none;}

  .tgmt-chrome .f-grid{grid-template-columns:1fr 1fr;gap:30px;padding:16px 24px 32px;}
  .tgmt-chrome .f-brand{grid-column:1 / -1;}
  .tgmt-chrome .f-cta{grid-column:1 / -1;order:-1;}
  .tgmt-chrome .f-bottom{margin:0 24px;}
}
@media (max-width:520px){
  .tgmt-chrome .lockup .l1{font-size:11px;}
  .tgmt-chrome .lockup .l1 .good{font-size:20px;}
  .tgmt-chrome .lockup .l2{font-size:10px;letter-spacing:2px;}
  .tgmt-chrome .nav-cta .label-long{display:none;}
  .tgmt-chrome .nav-cta .label-short{display:inline;}
  .tgmt-chrome .pill{padding:8px 8px 8px 16px;}
  .tgmt-chrome .lockup{gap:9px;}
  .tgmt-chrome .lockup svg{width:22px;height:26px;}
  .tgmt-chrome .nav-toggle{width:38px;height:38px;margin-left:2px;}
}
/* Phones: every footer leads in with the homepage's dark tree skyline instead of the
   cream-backed ridge (client change, Oct 10). The trees sit on the page's own background
   (nothing painted behind them); the footer color starts under them, in the skyline color. */
@media (max-width:767px){
  .tgmt-chrome.footer:not(.footer--flush){background:linear-gradient(#131F18,#131F18) left bottom / 100% calc(100% - 70px) no-repeat;}
  /* Same proportions as the desktop skyline (1440px wide at 131px tall), scaled to 70px: centred,
     not squeezed to the phone's width, so the trees look the way they do on desktop. */
  .tgmt-chrome .ridge{height:70px;background:url(/figma/mountains.svg) center bottom / 770px 100% no-repeat;}
  .tgmt-chrome .ridge path{display:none;}
}
/* =========================================================
   SECTION DIVIDERS ON PHONES
   Skyline and tree line dividers keep the proportions they have on a 1440px screen; they're
   never squeezed to a phone's width (which turns trees into spikes). Phones show the middle
   of the same drawing, smaller. Same rule as the footer skyline above.
   ========================================================= */
@media (max-width:767px){
  /* Tree line between sections on the hub and industry pages (an inline SVG stretched to
     full width on desktop). On phones the same drawing is a background at its desktop width. */
  svg.treeline{background-image:url(/chrome/treeline.svg);background-size:1440px 100%;background-position:center bottom;background-repeat:no-repeat;}
  svg.treeline path{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .tgmt-chrome *,.tgmt-chrome *::before,.tgmt-chrome *::after{transition:none!important;}
}