/* ============================================================
   GenFi 360 — shared chrome
   Tokens, nav, buttons, CTA band, footer. Page-specific CSS
   stays inline in each page. Single source of truth for tokens.
   ============================================================ */

:root{
  /* sampled from the actual logo file, not guessed */
  --orange:#c86828; --green:#80a850; --ink:#202020; --slate:#687890;
  --ink-deep:#101319; --ground:#f2f0ec; --ground-2:#eae7e1;
  --muted:#c2c2c2; --text-grey:#5c5c5c; --border:#2020201a;
  --radius:1rem; --radius-sm:.375rem;
  --site-w:90rem; --pad:clamp(1rem,4vw,4rem);
  --nav-h:4.6rem;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:Manrope,sans-serif;background:var(--ground);color:var(--ink);
  -webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
.wrap{max-width:var(--site-w);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(4rem,8vw,7rem)}

/* ---------- labels + controls ---------- */
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;display:inline-block;padding-bottom:.5rem;position:relative}
.eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:.6rem;font:inherit;font-weight:600;
  font-size:1rem;padding:.85rem 1.4rem;border-radius:var(--radius-sm);cursor:pointer;
  text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.btn .dot{width:.42rem;height:.42rem;border-radius:50%;background:#ffffff59;transition:background .25s}
.btn--primary{background:var(--orange);color:#fff;border:1px solid var(--orange)}
.btn--primary:hover{background:var(--ink);border-color:var(--ink)}
.btn--outline{background:transparent;color:#fff;border:1px solid #ffffff8c}
.btn--outline:hover{background:#fff;color:var(--ink)}
.btn--ink{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--ink .dot{background:#20202040}
.btn--ink:hover{background:var(--ink);color:#fff}
.btn:hover .dot{background:currentColor}
/* Link labels carry no trailing arrow (removed 2026-08-30). They grow slightly
   on hover instead; transform-origin pins the text at its left edge so the words
   swell in place rather than drifting right. */
.alink{color:var(--orange);font-weight:600;text-decoration:none;
  display:inline-block;transform-origin:left center;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.alink:hover{transform:scale(1.06)}
.statement{font-size:clamp(1.2rem,2vw,2rem);font-weight:600;line-height:1.32;
  letter-spacing:-.02em;max-width:66rem;margin-top:1.1rem}

/* ---------- nav ----------
   The sticky element is the WRAPPER, not the nav row, so the promo bar rides
   along with it. --nav-h is measured off .sitehead (see site.js) and therefore
   covers nav + promo — every consumer of it (hero pin, subnav, scroll-margin)
   stays correct without knowing the promo exists. */
.sitehead{position:sticky;top:0;z-index:40}
/* The nav row must outrank the promo row INSIDE .sitehead. .promo carries an
   animation with fill-mode:forwards, so its computed transform stays a matrix
   rather than `none` — a non-none transform creates a stacking context, which
   painted the bar over the nav dropdowns once they extended past the header.
   Layering the two rows explicitly scopes the dropdowns above it. */
.nav{display:flex;align-items:center;gap:.5rem;
  padding:.55rem var(--pad);background:var(--ground);
  position:relative;z-index:2}
.nav.scrolled{background:#f2f0ecdd;backdrop-filter:blur(10px)}
/* The client's own logo file, unaltered — only the white margin is trimmed.
   Its background is white, so the white plate is what makes it sit seamlessly
   on the ground colour; do NOT key the white out, the mark's inner G is white too. */
.nav__logo{display:flex;align-items:center;text-decoration:none;flex:none;
  background:#fff;border-radius:var(--radius-sm);padding:.3rem .55rem;
  box-shadow:0 1px 3px #2020200f;transition:box-shadow .25s,transform .25s}
.nav__logo:hover{box-shadow:0 4px 14px #20202026;transform:translateY(-1px)}
.nav__logo img{height:3.2rem;width:auto;display:block}

/* ---------- promo bar (drops down from under the nav) ----------
   .promowrap reserves the bar's height from first paint and clips it; the bar
   itself starts translated up behind the nav and slides down. Transform doesn't
   affect layout, so there is no shift and --nav-h is stable from load. */
.promowrap{overflow:hidden;position:relative;z-index:1}   /* below .nav — see above */
.promo{display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--orange);color:#fff;text-decoration:none;text-align:center;
  padding:.52rem var(--pad);font-size:.9rem;line-height:1.35;letter-spacing:.005em;
  transform:translateY(-100%);animation:promodrop .55s cubic-bezier(.2,.7,.2,1) .45s forwards;
  transition:background .25s}
.promo b{font-weight:800}
.promo:hover{background:#ac5620}
.promo__go{flex:none;font-size:1rem;transition:transform .25s}
.promo:hover .promo__go{transform:translateX(4px)}
@keyframes promodrop{to{transform:none}}
.nav__group{display:flex;gap:.5rem;flex:1;justify-content:center}
.pill{position:relative;display:flex;align-items:center;gap:1.2rem;
  background:#202020b3;color:#f2f0ec;font:inherit;font-size:.95rem;border:none;
  padding:.8rem 1.1rem;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;
  backdrop-filter:blur(8px);transition:background .25s}
.pill:hover{background:#202020e6}
.pill .dot{width:.42rem;height:.42rem;border-radius:50%;background:#f2f0ec40;transition:background .25s,transform .25s}
.pill:hover .dot{background:#f2f0ec;transform:scale(1.2)}
.pill.active .dot{background:var(--orange)}

/* ---------- nav dropdowns (hover + keyboard) ---------- */
.navitem{position:relative}
/* .dropdown itself is transparent and starts flush at the pill's bottom edge; the
   padding-top is the hover BRIDGE so the cursor can cross the visual gap without
   the menu closing. The visible panel is the inner element. */
.dropdown{position:absolute;top:100%;left:0;padding-top:.4rem;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-.35rem);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.navitem:hover .dropdown,
.navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown__panel{min-width:100%;width:max-content;max-width:18rem;
  background:#202020f2;backdrop-filter:blur(10px);border-radius:var(--radius-sm);
  overflow:hidden;box-shadow:0 14px 34px #00000040;padding:.3rem}
.dropdown a{display:block;color:#e9e7e7;text-decoration:none;font-size:.9rem;
  padding:.55rem .8rem;border-radius:calc(var(--radius-sm) - 1px);white-space:nowrap;
  transition:background .18s,color .18s}
.dropdown a:hover,.dropdown a:focus-visible{background:#ffffff1a;color:#fff;outline:none}
.dropdown a:focus-visible{box-shadow:inset 0 0 0 2px var(--orange)}

/* sticky nav would otherwise cover the heading an anchor jumps to */
[id]{scroll-margin-top:calc(var(--nav-h) + 1.25rem)}

/* ---------- mobile: hamburger + full-screen panel ---------- */
.navtoggle{display:none;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;
  padding:0;border:none;border-radius:var(--radius-sm);background:#202020b3;cursor:pointer;
  flex:none;transition:background .22s}
.navtoggle:hover{background:#202020e6}
.navtoggle span{display:block;position:relative;width:1.15rem;height:2px;background:#f2f0ec;
  border-radius:2px;transition:background .2s}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;
  width:100%;height:2px;background:#f2f0ec;border-radius:2px;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),top .2s,bottom .2s}
.navtoggle span::before{top:-.38rem}
.navtoggle span::after{bottom:-.38rem}
body.menu-open .navtoggle span{background:transparent}
body.menu-open .navtoggle span::before{top:0;transform:rotate(45deg)}
body.menu-open .navtoggle span::after{bottom:0;transform:rotate(-45deg)}

.mobilemenu{position:fixed;inset:0;z-index:55;background:var(--ink-deep);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--nav-h) + 1.2rem) var(--pad) 2.5rem;
  opacity:0;visibility:hidden;transform:translateY(-.6rem);
  transition:opacity .3s ease,transform .3s ease,visibility .3s}
body.menu-open .mobilemenu{opacity:1;visibility:visible;transform:none}
.mobilemenu__grp{border-bottom:1px solid #ffffff1f}
.mobilemenu__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mobilemenu__row > a{flex:1;display:block;color:#fff;text-decoration:none;
  font-size:1.35rem;font-weight:700;letter-spacing:-.01em;padding:1.05rem 0}
.mobilemenu__row > a:hover{color:var(--orange)}
.mobilemenu__x{flex:none;width:2.6rem;height:2.6rem;border:1px solid #ffffff2e;
  border-radius:var(--radius-sm);background:transparent;color:#c9cdd3;cursor:pointer;
  font-size:1rem;line-height:1;display:grid;place-items:center;transition:background .2s,color .2s}
.mobilemenu__x:hover{background:#ffffff14;color:#fff}
.mobilemenu__x svg{width:.85rem;height:.85rem;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.mobilemenu__grp.open .mobilemenu__x svg{transform:rotate(180deg)}
.mobilemenu__sub{overflow:hidden;max-height:0;transition:max-height .34s cubic-bezier(.2,.7,.2,1)}
.mobilemenu__grp.open .mobilemenu__sub{max-height:26rem}
.mobilemenu__sub a{display:block;color:#a9b0ba;text-decoration:none;font-size:1rem;
  padding:.62rem 0 .62rem 1rem;border-left:2px solid #ffffff1f;margin-left:.15rem}
.mobilemenu__sub a:last-child{margin-bottom:.9rem}
.mobilemenu__sub a:hover{color:#fff;border-left-color:var(--orange)}
.mobilemenu__cta{margin-top:2rem}
.mobilemenu__cta .btn{width:100%;justify-content:center;font-size:1.05rem;padding:1rem}
.mobilemenu__tel{display:block;text-align:center;margin-top:1.1rem;color:#c9cdd3;
  text-decoration:none;font-weight:700;font-size:1.05rem}
.mobilemenu__tel:hover{color:var(--green)}
body.menu-open{overflow:hidden}
/* the panel is fixed over everything, so lift the header above it — otherwise the
   close button sits underneath the panel and the menu can only be dismissed by Esc.
   The promo keeps its own solid background and stays legible over the dark panel,
   and the panel's top padding already accounts for it via --nav-h. */
body.menu-open .sitehead{z-index:60}
body.menu-open .nav{background:transparent;border-bottom:none}
body.menu-open .nav.scrolled{background:transparent;backdrop-filter:none;border-bottom:none}

@media (max-width:900px){
  .nav__group{display:none}
  .navtoggle{display:flex}
  .nav{justify-content:space-between}
  .nav > .btn--primary{display:none}     /* the CTA lives inside the panel on mobile */
  .nav__logo img{height:2.7rem}
  .promo{font-size:.82rem;padding-inline:.9rem;gap:.45rem}
}
@media (max-width:420px){
  .nav__logo img{height:2.4rem}
  .promo{font-size:.76rem;line-height:1.3}
}
@media (min-width:901px){
  .mobilemenu{display:none}
}
@media (prefers-reduced-motion: reduce){
  .dropdown,.mobilemenu,.mobilemenu__sub,.navtoggle span::before,.navtoggle span::after{transition:none}
  .promo{transform:none;animation:none}
  /* the hover grow is decorative — index.html's classes are listed here too so the
     guard lives in one place; they simply match nothing on the other pages */
  .alink:hover,.card:hover .card__go,.pcard__btn:hover span,.res a:hover .get{transform:none}
}

/* ---------- lead gate modal ---------- */
.gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.2rem;
  background:#101319d9;backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.gate.open{opacity:1;visibility:visible}
.gate__card{width:min(30rem,100%);max-height:92vh;overflow-y:auto;background:var(--ground);
  border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.2rem);
  box-shadow:0 30px 80px #00000059;transform:translateY(.8rem);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.gate.open .gate__card{transform:none}
.gate__card h2{font-size:1.5rem;line-height:1.2;letter-spacing:-.02em;margin-bottom:.5rem}
.gate__lead{font-size:.95rem;line-height:1.55;color:var(--text-grey);margin-bottom:.9rem}
.gate__to{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-grey);
  background:#2020200a;border-radius:var(--radius-sm);padding:.55rem .75rem;margin-bottom:1.2rem}
.gate__to::before{content:"↗";color:var(--orange);font-weight:800}
.gate__dest{font-weight:700;color:var(--ink)}
.gate__row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.gate label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--text-grey);margin-bottom:.3rem}
.gate input{width:100%;font:inherit;font-size:1rem;padding:.7rem .8rem;border-radius:var(--radius-sm);
  border:1px solid #20202029;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.gate input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px #c8682833}
.gate input[aria-invalid="true"]{border-color:#b3261e}
.gate__field{margin-bottom:.85rem}
/* honeypot: off-screen, not display:none — some bots skip hidden fields */
.gate__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gate__err{font-size:.85rem;color:#b3261e;font-weight:600;margin-bottom:.8rem;min-height:1.1em}
.gate__submit{width:100%;justify-content:center;font-size:1rem;padding:.9rem}
.gate__consent{font-size:.78rem;line-height:1.5;color:var(--text-grey);margin-top:.9rem}
.gate__preview{margin-top:.9rem;padding:.55rem .7rem;border-radius:var(--radius-sm);
  background:#c868281a;border:1px dashed #c8682866;color:#8c4414;
  font-size:.75rem;font-weight:700;line-height:1.45}
.gate__consent a{color:var(--orange)}
.gate__skip{display:block;width:100%;margin-top:.9rem;padding:.55rem;background:none;border:none;
  font:inherit;font-size:.88rem;color:var(--text-grey);text-decoration:underline;cursor:pointer;
  text-underline-offset:3px;transition:color .2s}
.gate__skip:hover{color:var(--ink)}
.gate__x{position:absolute;top:.7rem;right:.7rem;width:2.2rem;height:2.2rem;border:none;
  border-radius:50%;background:#2020200f;color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s}
.gate__x:hover{background:#20202021}
.gate__head{position:relative}
@media (max-width:420px){.gate__row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gate,.gate__card{transition:none}}

/* ---------- sub-page header band (no animation) ---------- */
.pagehead{position:relative;min-height:44vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink-deep)}
.pagehead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagehead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(16,19,25,.72) 0%,rgba(16,19,25,.35) 55%,rgba(16,19,25,.15) 100%)}
.pagehead__in{position:relative;z-index:2;width:100%;max-width:var(--site-w);
  margin-inline:auto;padding:0 var(--pad) clamp(2rem,5vh,3.5rem)}
.pagehead .eyebrow{color:#f2f0ec}
.pagehead h1{color:#fff;font-size:clamp(2.2rem,5vw,4rem);font-weight:700;
  line-height:1.06;letter-spacing:-.03em;margin-top:1rem}
.pagehead .chip{display:inline-flex;align-items:center;gap:.4rem;background:#f2f0ecd9;
  color:var(--ink);border-radius:999px;padding:.45rem 1rem;font-size:.88rem;
  font-weight:600;margin-top:1.2rem}

/* ---------- CTA band ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem}
.panel{border-radius:var(--radius);padding:clamp(2rem,4vw,3.2rem);min-height:17rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;color:#fff;
  transition:transform .3s}
.panel:hover{transform:translateY(-4px)}
.panel--org{background:var(--orange)}
.panel--ink{background:var(--ink-deep)}
.panel h3{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.18;letter-spacing:-.02em;max-width:18ch}
.panel small{display:block;margin-top:.6rem;font-size:.95rem;font-weight:400;color:#ffffffc9}
/* Panels whose copy invites booking lead with Calendly; the phone stays as a
   secondary line so the direct contact route isn't lost from the band. */
.panel__cta{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.panel__or{font-size:.9rem;color:#ffffffc9}
.panel__or a{color:#fff;font-weight:700;text-decoration:none;
  border-bottom:1px solid #ffffff5c;transition:border-color .2s}
.panel__or a:hover{border-bottom-color:#fff}
@media (max-width:760px){.duo{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.footer{background:var(--ink-deep);color:#c9cdd3;padding-block:3.5rem 2rem}
.footer .eyebrow{color:#e9e7e7}
.partners{display:flex;gap:2.5rem;flex-wrap:wrap;margin:1.5rem 0 3rem}
.partners a{color:#8f96a3;font-weight:700;text-decoration:none;text-transform:uppercase;
  letter-spacing:.05em;font-size:.95rem}
.partners a:hover{color:var(--green)}
.fcols{display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap;
  border-top:1px solid #ffffff1a;padding-top:2.5rem;margin-bottom:2.5rem}
.fbrand{max-width:22rem}
.fbrand .flogo{font-weight:800;font-size:1.5rem;color:#fff}
.fbrand .flogo b{color:var(--orange)}
.fbrand p{margin-top:.8rem;line-height:1.6;font-size:.95rem}
.fbrand .tel{display:inline-block;margin-top:.8rem;color:#fff;font-weight:700;
  font-size:1.15rem;text-decoration:none}
/* ---------- footer: Let's Connect ---------- */
.fsocial{margin-top:1.9rem}
.fsocial h4{color:#fff;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.35rem}
.fsocial p{font-size:.9rem;color:#8f96a3;margin-bottom:1rem}
.social{display:flex;gap:.7rem;flex-wrap:wrap}
.social a{display:grid;place-items:center;width:2.9rem;height:2.9rem;flex:none;
  border-radius:50%;border:1px solid #ffffff26;background:#ffffff0a;color:#c9cdd3;
  text-decoration:none;
  transition:background .22s,color .22s,border-color .22s,transform .22s}
.social a svg{width:1.25rem;height:1.25rem;fill:currentColor;display:block}
.social a:hover{background:var(--green);border-color:var(--green);color:#16210d;transform:translateY(-3px)}
.social a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* .social is built for the dark footer; on a light ground the borders and glyphs vanish. */
.social--light a{border-color:#20202026;background:#2020200a;color:var(--ink)}
.social--light a:hover{background:var(--green);border-color:var(--green);color:#16210d}
@media (max-width:520px){
  .social a{width:2.6rem;height:2.6rem}
  .social a svg{width:1.1rem;height:1.1rem}
}
.fcol h4{color:#fff;font-size:.95rem;margin-bottom:.9rem}
.fcol a{display:block;color:#8f96a3;text-decoration:none;padding:.28rem 0;font-size:.95rem}
.fcol a:hover{color:var(--green)}
.privacy{border-top:1px solid #ffffff1a;padding-top:2rem;margin-bottom:2rem;max-width:56rem}
.privacy h4{color:#fff;margin-bottom:.7rem;font-size:1rem}
.privacy p{font-size:.9rem;line-height:1.65}
.privacy details{margin-top:.8rem}
.privacy summary{cursor:pointer;color:var(--green);font-weight:600;font-size:.9rem}
.privacy details p{margin-top:.7rem;color:#8f96a3}
.legal{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  border-top:1px solid #ffffff1a;padding-top:1.4rem;font-size:.85rem;color:#8f96a3}
.clock{font-family:"IBM Plex Mono",monospace}