/* ============================================================================
   NTMG Lending - shared stylesheet
   ----------------------------------------------------------------------------
   Ported from the approved design mockups, kept in git history under
   /_mockups/ (NTMG-Website-Desktop.html and NTMG-Website-Mobile.html).

   Three deliberate differences from the mockup:

   1. The mockup is a single page app: it wraps everything in .app / .screen
      with its own scroll container so the phone frame in the mobile file
      works. The real site is multi page and scrolls the document, so .app
      and .screen are gone and the nav sticks to the document instead.

   2. The mockup uses container queries (@container s) for the same reason.
      Here that is a plain @media (max-width: 860px), as specified.

   3. Anything the mockup positioned absolutely inside .app (drawer, chat,
      greeting bubble, sticky mobile bar, toast) is position: fixed here.

   Everything else - tokens, spacing, type scale, animation timing, component
   markup hooks - matches the mockup exactly.

   Load order on every page:
     <link rel="stylesheet" href="/assets/css/ntmg.css">
     <script src="/assets/js/config.js"></script>
     <script src="/assets/js/ntmg.js" defer></script>
     <script src="/assets/js/funnel.js" defer></script>
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Metric matched fallbacks.

   The Google Fonts stylesheet is loaded non render blocking, so the first
   paint uses a system font and swaps later. Without matching the fallback to
   the real font the text re-wraps on swap: 0.19 CLS on faqs.html over a
   throttled connection, 0.08 on the blog index.

   These faces re-serve the local Times and Arial clones, scaled to the real
   fonts' widths and carrying their vertical metrics, so the fallback occupies
   the same space and the swap is invisible. Liberation, Tinos and Arimo are
   metric clones of Times New Roman and Arial.

   One face per weight and style, because local() resolves the regular member
   of the family and the browser synthesises the rest, and a synthesised bold
   is not the width of a real one. Every size-adjust here was calibrated
   against what the browser actually renders for the site's own headlines and
   body copy, not derived from published font metrics.
---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------- FONTS --
   Self-hosted. The pages used to pull these from fonts.googleapis.com, which
   cost two preconnects, a render-blocking stylesheet on a third-party origin
   and a second origin for the files themselves.

   Only the faces actually used are here: Cormorant Garamond 700 roman and
   italic for display type, DM Sans 400/500/700 for everything else. DM Sans
   is a variable font, so all three weights come from one file per subset.

   The metric-matched fallbacks below these rules are unchanged and still do
   the work during swap, which is what keeps CLS at zero.
-------------------------------------------------------------------------- */
/* Cormorant Garamond 700 */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/assets/fonts/cormorant-garamond-700-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/assets/fonts/cormorant-garamond-700-latin-ext.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond 700 italic */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/assets/fonts/cormorant-garamond-700italic-latin.woff2") format("woff2");
  font-style:italic;
  font-weight:700;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/assets/fonts/cormorant-garamond-700italic-latin-ext.woff2") format("woff2");
  font-style:italic;
  font-weight:700;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 400-700 (variable, one file per subset) */
@font-face{
  font-family:"DM Sans";
  src:url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"DM Sans";
  src:url("/assets/fonts/dm-sans-latin-ext.woff2") format("woff2");
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:"Cormorant Fallback";
  src:local("Times New Roman"),local("Times"),local("Tinos"),local("Liberation Serif");
  font-style:normal;
  font-weight:700;
  size-adjust:97.44%;
  ascent-override:100.99%;
  descent-override:31.37%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Cormorant Fallback";
  src:local("Times New Roman"),local("Times"),local("Tinos"),local("Liberation Serif");
  font-style:italic;
  font-weight:700;
  size-adjust:87.45%;
  ascent-override:107.80%;
  descent-override:33.48%;
  line-gap-override:0%;
}
@font-face{
  font-family:"DM Sans Fallback";
  src:local("Arial"),local("Helvetica"),local("Arimo"),local("Liberation Sans");
  font-style:normal;
  font-weight:400;
  size-adjust:103.56%;
  ascent-override:97.21%;
  descent-override:30.38%;
  line-gap-override:0%;
}
@font-face{
  font-family:"DM Sans Fallback";
  src:local("Arial"),local("Helvetica"),local("Arimo"),local("Liberation Sans");
  font-style:normal;
  font-weight:500;
  size-adjust:105.28%;
  ascent-override:97.21%;
  descent-override:30.38%;
  line-gap-override:0%;
}
@font-face{
  font-family:"DM Sans Fallback";
  src:local("Arial"),local("Helvetica"),local("Arimo"),local("Liberation Sans");
  font-style:normal;
  font-weight:700;
  size-adjust:109.03%;
  ascent-override:97.21%;
  descent-override:30.38%;
  line-gap-override:0%;
}

:root{
  --navy:#0C1E35;
  --deep:#162D47;
  --gold:#C9A84C;
  --gold2:#E2C97A;
  --cream:#F5F2EC;
  --slate:#8A9AB0;
  --ink:#0C1E35;
  --line:rgba(245,242,236,.14);
  --vh:100vh;
}
@supports(height:100dvh){:root{--vh:100dvh}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:"DM Sans","DM Sans Fallback",sans-serif;font-weight:400;
  color:var(--cream);background:var(--navy);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Scroll lock, used by the mobile drawer and the focused funnel. */
body.noscroll{overflow:hidden}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%}
/* <picture> is only a wrapper for the WebP/JPG choice. The inner <img> carries
   all the layout, including position:absolute inside heroes and cards, so the
   wrapper must not generate a box of its own. */
picture{display:contents}

.serif{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700}
.num{font-family:"DM Sans","DM Sans Fallback",sans-serif;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- NAV ---- */
.nav{
  position:sticky;top:0;z-index:50;height:84px;margin-bottom:-84px;
  display:flex;align-items:center;justify-content:space-between;padding:0 48px;
  transition:background .35s,height .35s,box-shadow .35s;
}
.nav.solid{background:rgba(12,30,53,.94);backdrop-filter:blur(12px);height:68px;box-shadow:0 1px 0 var(--line)}
body[data-mode=funnel] .nav{background:var(--navy);box-shadow:0 1px 0 var(--line);height:68px}

.logo{display:flex;align-items:center}
/* Always set width AND height on the logo img in the markup. The height here
   is a guard, the attributes are what prevent layout shift. */
.brandlogo{width:200px;height:auto;display:block;transition:width .35s}
.nav.solid .brandlogo,body[data-mode=funnel] .brandlogo{width:170px}
.foot .brandlogo{width:190px}

.links{display:flex;align-items:center;gap:30px;font-size:15px}
.links>a:not(.btn){position:relative;padding:6px 0}
.links>a:not(.btn):after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .3s}
.links>a:not(.btn):hover:after,.links>a.cur:after{transform:scaleX(1)}

.tel{display:flex;align-items:center;gap:8px;color:var(--cream);font-weight:500}
.tel svg{color:var(--gold)}

.burger,.navcall,.funnelx{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:transparent;align-items:center;justify-content:center;cursor:pointer}
body[data-mode=funnel] .links{display:none}
body[data-mode=funnel] .funnelx{display:flex}
.navright{display:flex;gap:10px;align-items:center}

/* ------------------------------------------------------------ BUTTONS ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);color:var(--navy);font-weight:700;padding:15px 26px;border-radius:999px;font-size:15px;border:0;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 10px 30px rgba(201,168,76,.3)}
.btn:disabled{cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(245,242,236,.45)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--gold2);color:var(--gold2)}
.btn.dark{background:var(--navy);color:var(--cream)}.btn.dark:hover{background:var(--deep)}
/* Ghost button sitting on a white or cream card rather than on navy. */
.btn.ghost.on-light{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(12,30,53,.3)}
.btn.ghost.on-light:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold)}
.btn.sm{padding:11px 18px;font-size:14px}

/* --------------------------------------------------------------- TYPE ---- */
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.eyebrow:before{content:"";width:34px;height:1px;background:var(--gold)}
.eyebrow.c{justify-content:center}
/* Brand gold on cream is 2.04:1, well under the 4.5 minimum for 12px
   text. On light sections the eyebrow uses a darker antique gold, 4.86:1.
   Dark sections keep the bright gold, which is 6.6:1 on navy. */
.light .eyebrow{color:#7a6829}
.light .eyebrow:before{background:#7a6829}
h1,h2,h3{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;margin:0}
.h1{font-size:clamp(46px,5.1vw,78px);line-height:1;letter-spacing:-.5px}.h1 em{color:var(--gold2)}
.h2{font-size:clamp(38px,4.2vw,60px);line-height:1.04}.h2 em{color:var(--gold)}
/* Brand gold on cream is 2.04:1. Antique gold for headline accents on
   light sections, matching .light .eyebrow. */
.light .h1 em,.light .h2 em,.light h2 em,.light h3 em{color:#7a6829}
.lead{font-size:19px;line-height:1.6;color:#c9d1dc;max-width:560px}
.muted{color:var(--slate)}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px}
.trust span{display:flex;align-items:center;gap:7px}
.trust span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ----------------------------------------------------------- SECTIONS ---- */
.sec{padding:120px 48px}
.wrap{max-width:1240px;margin:0 auto}
.light{background:var(--cream);color:var(--ink)}.light .lead{color:#44536a}.light .muted{color:#5b6a80}
.deep{background:var(--deep)}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.head{margin-bottom:56px;display:flex;flex-direction:column;gap:18px}
/* Copy beside a funnel card. Collapses to one column on mobile, which an
   inline grid-template-columns on the element would not do. */
.split2{display:grid;grid-template-columns:1fr 480px;gap:64px;align-items:center}
.split2.flip{grid-template-columns:480px 1fr}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.fu{opacity:0;transform:translateY(26px);animation:fu .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fu{to{opacity:1;transform:none}}
/* The hero headline is normally the Largest Contentful Paint element.
   Starting it at opacity:0 makes LCP wait for the entrance animation to run,
   which measured a 6.2 second render delay on a throttled phone. It slides
   up at full opacity instead, so it paints immediately and still animates.
   Everything else in the hero keeps the fade. */
.hero .h1.fu{opacity:1;animation-name:fu-slide}
@keyframes fu-slide{from{transform:translateY(26px)}to{transform:none}}

/* --------------------------------------------------------------- HERO ---- */
.hero{position:relative;min-height:var(--vh,100vh);display:flex;align-items:center;overflow:hidden;padding:120px 48px 90px}
.hero.short{min-height:calc(var(--vh,100vh)*.82)}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero img.bg{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,30,53,.96),rgba(12,30,53,.78) 48%,rgba(12,30,53,.3)),linear-gradient(0deg,rgba(12,30,53,1),rgba(12,30,53,0) 30%)}
.hero .grid{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
.hero .copy{display:flex;flex-direction:column;gap:24px}
/* Hero video is hidden until ntmg.js decides the viewport is wide enough.
   preload="none" plus no src attribute means mobile never downloads it. */
.hero video.vid{display:none}
/* Only the first variant is a real element, so the H1's text content is one
   complete sentence for crawlers and the h1 carries an aria-label so screen
   readers get that same sentence and nothing else. The other two variants are
   generated content, which never enters the DOM or textContent.

   All three share one grid cell, so the track is as wide as the widest variant
   and the line never reflows as they swap.

   Timing: each variant fades in over 400ms, holds at full opacity for 3s, then
   crossfades out over 400ms exactly as the next one fades in. That is a 3.4s
   turn per variant and a 10.2s cycle for three, with the delays stepping by
   3.4s so the handover lands on the frame the outgoing word leaves. A word is
   fully legible for 3 of every 3.4s, and no two are ever both mid-fade for
   longer than the 400ms crossfade. As percentages of 10.2s: 0.4s = 3.92%,
   3.4s = 33.33%, 3.8s = 37.25%. */
.rot{display:inline-grid;height:1.05em;overflow:hidden;vertical-align:bottom}
.rot>span,.rot::before,.rot::after{grid-area:1/1;color:var(--gold2);font-style:italic;animation:rot 10.2s infinite both;opacity:0;white-space:nowrap}
.rot::before{content:attr(data-alt-a);animation-delay:3.4s}
.rot::after{content:attr(data-alt-b);animation-delay:6.8s}
@keyframes rot{0%{opacity:0;transform:translateY(60%)}3.92%,33.33%{opacity:1;transform:none}37.25%,100%{opacity:0;transform:translateY(-60%)}}
.cue{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);color:var(--slate);font-size:10px;letter-spacing:3px;display:flex;flex-direction:column;align-items:center;gap:8px}
.cue i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{opacity:0}}

/* -------------------------------------------------- GLASS FUNNEL CARD ---- */
.glass{background:rgba(12,30,53,.62);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(226,201,122,.28);border-radius:24px;padding:30px;box-shadow:0 40px 80px rgba(0,0,0,.35)}
/* An inline funnel host ships empty and is filled by funnel.js after load.
   Reserve the height of step one so the fill never shifts the page. Measured
   from the rendered card: ~534px desktop, ~557px mobile. */
.glass[data-funnel]{min-height:540px}

.fn-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12px;letter-spacing:2px;color:var(--gold);font-weight:700;text-transform:uppercase}
.fn-q{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:34px;line-height:1.08;margin:6px 0 6px}
.fn-sub{color:var(--slate);font-size:14px;margin:0 0 20px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.opts.one{grid-template-columns:1fr}
.opt{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 16px;min-height:64px;border-radius:14px;border:1px solid var(--line);background:rgba(245,242,236,.04);cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.opt:hover{border-color:rgba(226,201,122,.6);background:rgba(245,242,236,.08)}
.opt:active{transform:scale(.98)}
.opt.sel{border-color:var(--gold);background:rgba(201,168,76,.16)}
.opt .ic{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid rgba(201,168,76,.4);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.opt b{display:block;font-weight:700;font-size:15px}
.opt small{display:block;color:var(--slate);font-size:12.5px;margin-top:2px}
.opt .arr{margin-left:auto;color:var(--gold);opacity:.7}
.bar{height:4px;border-radius:9px;background:rgba(245,242,236,.1);overflow:hidden;margin:14px 0 22px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .5s cubic-bezier(.2,.7,.2,1)}
/* The bar restarts when the finishing questions begin. Snap so it never animates backwards. */
.bar.snap i{transition:none}
.big{font-family:"DM Sans","DM Sans Fallback",sans-serif;font-weight:700;font-variant-numeric:tabular-nums;font-size:48px;letter-spacing:-1px;text-align:center;margin:8px 0 2px}
.biglab{text-align:center;color:var(--slate);font-size:13px;letter-spacing:1px}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;touch-action:pan-y;margin:14px 0 0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:9px;background:linear-gradient(90deg,var(--gold) var(--p,50%),rgba(245,242,236,.15) var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--cream);border:3px solid var(--gold);margin-top:-12px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
input[type=range]::-moz-range-track{height:6px;border-radius:9px;background:rgba(245,242,236,.15)}
input[type=range]::-moz-range-progress{height:6px;background:var(--gold);border-radius:9px}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--cream);border:3px solid var(--gold)}
.ends{display:flex;justify-content:space-between;color:var(--slate);font-size:12px}

.eqbox{margin-top:14px;border:1px solid rgba(201,168,76,.35);border-radius:14px;padding:14px;display:flex;justify-content:space-between;align-items:center;background:rgba(201,168,76,.08)}
.eqbox span{font-size:13px;color:var(--slate)}
.eqbox b{font-size:24px;color:var(--gold2)}

.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.fld label{font-size:12px;letter-spacing:1px;color:var(--slate);text-transform:uppercase}
.fld input,.fld select{font:inherit;font-size:16px;color:var(--cream);background:rgba(245,242,236,.06);border:1px solid var(--line);border-radius:12px;padding:15px 16px;min-height:52px;width:100%}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--gold)}
.fld select option{color:#000}
.fld input.bad,.fld select.bad{border-color:#e2a04c}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.consent{display:flex;gap:10px;font-size:11.5px;line-height:1.5;color:var(--slate);margin:6px 0 16px}
.consent input{margin-top:3px;accent-color:var(--gold);width:18px;height:18px;flex:none}
.fn-go{width:100%;margin-top:18px;padding:18px}
.fn-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13px;color:var(--slate)}
.fn-back{background:none;border:0;color:var(--slate);cursor:pointer;padding:10px 0}
.fn-back:hover{color:var(--cream)}
.step{animation:stepin .45s cubic-bezier(.2,.7,.2,1) both}.step.back{animation-name:stepback}
@keyframes stepin{from{opacity:0;transform:translateX(30px)}}
@keyframes stepback{from{opacity:0;transform:translateX(-30px)}}
.done{text-align:center;padding:10px 0}
.done .ck{width:74px;height:74px;border-radius:50%;margin:0 auto 18px;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);animation:pop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.shield{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:var(--slate)}
.shield span:before{content:"\2713 ";color:var(--gold)}

/* ---------------------------------- GOOGLE PLACES AUTOCOMPLETE ---------- */
/* The key on this account has Places API (New) enabled, not the classic
   Places API, so this is google.maps.places.PlaceAutocompleteElement.
   It is a custom element, not an <input>, so it cannot inherit .fld input
   styling and has to be themed through its own custom properties and
   ::part() selectors. Values below match the .fld input they sit above. */
.gpac-grp{margin-bottom:12px;display:flex;flex-direction:column;gap:6px}
.gpac-grp label{font-size:12px;letter-spacing:1px;color:var(--slate);text-transform:uppercase}
.gpac-ph{font:inherit;font-size:16px;width:100%;color:var(--slate);background:rgba(245,242,236,.06);border:1px solid var(--line);border-radius:12px;padding:15px 16px;min-height:52px;-webkit-appearance:none}
gmp-place-autocomplete{
  display:block;width:100%;
  --gmp-mat-color-surface:#12294a;
  --gmp-mat-color-surface-container:#12294a;
  --gmp-mat-color-surface-container-low:#12294a;
  --gmp-mat-color-surface-container-high:#12294a;
  --gmp-mat-color-surface-container-highest:#17335a;
  --gmp-mat-color-on-surface:#F5F2EC;
  --gmp-mat-color-on-surface-variant:#B8C5D4;
  --gmp-mat-color-outline:rgba(138,154,176,.2);
  --gmp-mat-color-outline-decorative:rgba(138,154,176,.14);
  --gmp-mat-color-primary:#C9A84C;
  --gmp-mat-color-on-primary:#0C1E35;
  --gmp-mat-color-hover-state-layer-color:#C9A84C;
  --gmp-mat-color-focus-state-layer-color:#C9A84C;
  --gmp-mat-font-family:"DM Sans","DM Sans Fallback",sans-serif;
  --gmp-mat-font-size-body-large:16px;
  --gmp-mat-font-size-body-medium:14px;
}
gmp-place-autocomplete::part(input){background:rgba(245,242,236,.06);color:var(--cream);border:1px solid var(--line);border-radius:12px;padding:15px 16px;min-height:52px;font-family:"DM Sans","DM Sans Fallback",sans-serif;font-size:16px}
gmp-place-autocomplete::part(input):focus{border-color:var(--gold);outline:none}
gmp-place-autocomplete::part(prediction-item){color:var(--cream);font-family:"DM Sans","DM Sans Fallback",sans-serif;font-size:14px}
gmp-place-autocomplete::part(prediction-item):hover{background:rgba(201,168,76,.16)}
gmp-place-autocomplete::part(prediction-item-selected){background:rgba(201,168,76,.16)}
gmp-place-autocomplete::part(prediction-item-match){color:var(--gold);font-weight:700}

/* Send failure notice. Shown in place of the thank you screen so the entry is
   never lost silently. */
.fn-err{display:none;margin-top:14px;border:1px solid rgba(226,160,76,.55);background:rgba(226,160,76,.12);border-radius:14px;padding:14px 16px;font-size:13.5px;line-height:1.55;color:var(--cream)}
.fn-err.on{display:block}
.fn-err a{color:var(--gold2);font-weight:700;white-space:nowrap}

/* --------------------------------------------------- FOCUSED FUNNEL ------ */
.fpage{min-height:var(--vh,100vh);padding:100px 20px 60px;display:grid;grid-template-columns:1fr 520px 1fr;background:radial-gradient(1200px 600px at 50% -10%,#1d3a5e,transparent),var(--navy)}
.fpage .glass{grid-column:2;background:rgba(22,45,71,.6)}
.fside{grid-column:3;align-self:center;padding-left:40px;max-width:320px;display:flex;flex-direction:column;gap:18px}
.fside .rv{border:1px solid var(--line);border-radius:16px;padding:18px;font-size:14px;line-height:1.5}
.stars{color:var(--gold2);letter-spacing:3px;font-size:13px}
/* Full screen overlay that funnel.js creates when an inline funnel hands off. */
#ntmg-funnel-focus{position:fixed;inset:0;z-index:55;overflow-y:auto;background:var(--navy);display:none}
#ntmg-funnel-focus.on{display:block}

/* ------------------------------------------------------------ MARQUEE ---- */
.marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:22px 0;background:var(--navy)}
.marq div{display:flex;gap:48px;width:max-content;animation:mq 45s linear infinite;color:var(--slate);font-size:14px;letter-spacing:3px;white-space:nowrap;align-items:center}
.marq .memb{width:24px;height:auto;opacity:.35;flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* -------------------------------------------------------- PATH CARDS ----- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{position:relative;overflow:hidden;border-radius:22px;min-height:460px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;color:var(--cream);isolation:isolate}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.pcard:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(12,30,53,.97) 10%,rgba(12,30,53,.15) 65%)}
.pcard:hover img{transform:scale(1.08)}
.pcard h3{font-size:40px;margin-bottom:10px}
.pcard p{margin:0 0 20px;color:#cfd6e0;line-height:1.5}
.pcard .tags{color:var(--gold);font-size:11.5px;font-weight:700;letter-spacing:1.5px}
.pcard .go{position:absolute;top:24px;right:24px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(245,242,236,.4);display:flex;align-items:center;justify-content:center;transition:.3s}
.pcard:hover .go{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:rotate(-45deg)}

/* -------------------------------------------------------------- STEPS ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
/* Four-up variant, used by the use-case row. A class, not an inline
   grid-template-columns, so the mobile query can still collapse it. */
.steps.four{grid-template-columns:repeat(4,1fr)}
.steps.four .stepc h3{font-size:26px}
.stepc{padding:34px;border-radius:20px;background:#fff;box-shadow:0 1px 0 rgba(12,30,53,.06),0 20px 50px rgba(12,30,53,.07)}
.stepc .n{font-family:"DM Sans","DM Sans Fallback",sans-serif;font-weight:700;font-variant-numeric:tabular-nums;color:var(--gold);font-size:14px;letter-spacing:2px}
.stepc h3{font-size:32px;margin:14px 0 10px}
.stepc p{margin:0;color:#4b5a70;line-height:1.6}

/* ---------------------------------------------------------- SPOTLIGHT ---- */
.spot{color:var(--cream);display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:28px;overflow:hidden;background:var(--navy);min-height:560px}
.spot .ph{position:relative;overflow:hidden}
.spot .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 2s cubic-bezier(.2,.7,.2,1)}
.spot.in .ph img{transform:scale(1)}
.spot .tx{padding:64px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:6px 0 10px}
.checks div{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
.checks svg{color:var(--gold);flex:none;margin-top:2px}

/* -------------------------------------------------------------- STATS ---- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.stats b{display:block;font-size:48px;color:var(--cream);letter-spacing:-1px}
.stats span{font-size:12px;letter-spacing:2px;color:var(--slate)}
.fine{font-size:12px;color:var(--slate);text-align:center;margin-top:28px}
/* Slate is 2.56:1 on cream. */
.light .fine{color:#5b6a80}

/* ------------------------------------------------------------ REVIEWS ---- */
.rvrow{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:none}
.rvrow::-webkit-scrollbar{display:none}
.rvc{flex:0 0 380px;scroll-snap-align:start;background:#fff;color:var(--ink);border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:14px}
.rvc q{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:26px;line-height:1.2;quotes:"\201C" "\201D"}
.rvc .who{margin-top:auto;font-size:14px}
.rvc .who small{display:block;color:#5b6a80;margin-top:2px}
/* Full review text ships in the HTML. Long ones are clamped so one long
   review cannot make every card in the row enormous, with a link out to the
   full review on Zillow. Same pattern the current site uses. */
.rvc h3{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:24px;line-height:1.15;margin:0}
.rvbody{font-size:14px;line-height:1.65;color:#4b5a70;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.rvbody p{margin:0 0 10px}.rvbody p:last-child{margin-bottom:0}
.rvmore{font-size:13px;font-weight:700;color:#0C1E35;text-decoration:underline;text-decoration-color:rgba(201,168,76,.5);text-underline-offset:3px}
.rvmore:hover{text-decoration-color:var(--gold)}
.rvfoot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(12,30,53,.12);font-size:13px;display:flex;flex-direction:column;gap:3px}
.rvfoot b{font-size:14px}
.rvfoot small{color:#5b6a80}
.rvnote{font-size:12px;color:#4b5a70;margin-top:14px}
.rvnote a{text-decoration:underline;text-decoration-color:rgba(12,30,53,.35);text-underline-offset:2px}
.rvnav{display:flex;gap:10px}
.rvnav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(12,30,53,.25);background:transparent;cursor:pointer;color:var(--ink)}
.zbadge{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#006AFF}

/* ------------------------------------------------- PILLARS / IC CARDS ---- */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ic-card{border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px;transition:border-color .3s,transform .3s;background:rgba(245,242,236,.02)}
.ic-card:hover{border-color:rgba(201,168,76,.5);transform:translateY(-4px)}
.ic-card .ic{width:48px;height:48px;border-radius:14px;border:1px solid rgba(201,168,76,.45);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.ic-card h2,.ic-card h3{font-size:28px}
.ic-card p{margin:0;color:#b8c2cf;line-height:1.6;font-size:15px}
.light .ic-card{border-color:rgba(12,30,53,.12);background:#fff}
.light .ic-card p{color:#4b5a70}
/* Brand gold is 2.28:1 on white. Darker antique gold on light cards. */
.light .ic-card .more{color:#7a6829}
.ic-card .more{margin-top:auto;padding-top:8px;color:var(--gold);font-weight:700;font-size:14px}

/* --------------------------------------------------------------- TEAM ---- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tm{border-radius:22px;overflow:hidden;background:#fff;color:var(--ink);display:flex;flex-direction:column}
.tm .ph{aspect-ratio:1/1;background:linear-gradient(160deg,#1d3a5e,var(--navy));overflow:hidden}
.tm .ph img{width:100%;height:100%;object-fit:cover;display:block}
.tm .bd{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.tm h2{font-size:26px;line-height:1.15;margin:0}
.tm .role{font-size:11px;color:#7a6829;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
/* Full bio text always ships in the HTML. On mobile it clamps with a
   Read more toggle so four long bios do not turn into a scroll marathon. */
.tmbio{font-size:13.5px;line-height:1.7;color:#4b5a70;margin:0}
.tmmore{display:none;background:none;border:0;padding:0;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;align-self:flex-start;text-decoration:underline;text-decoration-color:rgba(201,168,76,.55);text-underline-offset:3px}
.tmmeta{margin-top:auto;padding-top:14px;border-top:1px solid rgba(12,30,53,.12);display:flex;flex-direction:column;gap:6px;font-size:13px}
.tmmeta a{display:flex;align-items:center;gap:7px;color:#44536a;word-break:break-word;min-height:26px}
.tmmeta a:hover{color:var(--ink)}
.tmmeta svg{color:var(--gold);flex:none}
.tmnmls{font-size:11.5px;color:#5b6a80;display:flex;align-items:center;min-height:26px}
.tmnmls a{display:inline;color:#5b6a80;text-decoration:underline;text-decoration-color:rgba(201,168,76,.55);text-underline-offset:2px}
.tmbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tmbtns .btn{padding:12px 8px;font-size:13px;gap:6px}
.tmnote{font-size:13px;font-style:italic;color:#5b6a80;text-align:center;margin-top:26px}
@media(max-width:1200px){.team{grid-template-columns:repeat(2,1fr)}}

/* Team preview row, used on the About page. */
.tmrow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tmini{display:block;border-radius:18px;overflow:hidden;background:#fff;color:var(--ink)}
/* height:auto matters: without it the height="800" attribute wins and
   aspect-ratio never applies, which renders a 294x800 letterbox. */
.tmini img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.tmini:hover img{transform:scale(1.05)}
.tminib{padding:16px 18px 18px}
.tminib b{display:block;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:21px;font-weight:700;line-height:1.15}
.tminib small{display:block;font-size:11px;color:#7a6829;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}

/* ------------------------------------------------------------- HIRING ---- */
.poscards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.poscard{border:1px solid var(--line);border-radius:12px;padding:26px 20px;text-align:center;background:rgba(245,242,236,.03);font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:19px;line-height:1.25}

/* --------------------------------------------------------------- TABS ---- */
.tabs{display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:#fff;box-shadow:0 1px 0 rgba(12,30,53,.08);margin-bottom:32px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;padding:12px 22px;border-radius:999px;cursor:pointer;font-weight:500;color:var(--ink);white-space:nowrap;min-height:44px}
.tabs button.on{background:var(--navy);color:var(--cream)}

/* ----------------------------------------------------- PROGRAM TAGS ------ */
.ptags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.ptag{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7a6829;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.3);padding:4px 9px;border-radius:20px}

/* --------------------------------------------------------- CALCULATOR ---- */
.calc{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 30px 70px rgba(12,30,53,.1)}
.calc .in{padding:40px}
.calc .out{background:var(--navy);color:var(--cream);padding:40px;display:flex;flex-direction:column;justify-content:center}
.calc label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14px;color:#4b5a70;margin-top:20px}
.calc label:first-child{margin-top:0}
/* The value column is locked and tabular so dragging a slider cannot widen
   the row and shove the page sideways on a phone. */
.calc label b{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;flex:0 0 auto;min-width:9ch;white-space:nowrap}
.calc input[type=range]{touch-action:none;-webkit-tap-highlight-color:transparent}
.calc input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--gold) var(--p,50%),#e3ddd0 var(--p,50%))}
.calc .res{font-family:"DM Sans","DM Sans Fallback",sans-serif;font-weight:700;font-variant-numeric:tabular-nums;font-size:64px;letter-spacing:-2px;line-height:1;display:flex;align-items:baseline;justify-content:center;gap:2px}
.calc .calc-payment-currency{font-size:34px;letter-spacing:0}
.calc .biglab{margin-bottom:10px}
.calc-note{font-size:11.5px;color:var(--slate);text-align:center;margin:12px 0 0;line-height:1.5}
.calc-rows{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;font-size:14px}
.calc-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.calc-rows span{color:var(--slate)}
.calc-rows b{font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:8ch;text-align:right;white-space:nowrap}

/* ------------------------------------------------------------ CONTACT ---- */
.cinfo{display:flex;flex-direction:column;gap:14px}
.cbox{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid rgba(12,30,53,.12);border-radius:16px;padding:20px 22px;color:var(--ink);transition:border-color .25s,transform .25s}
.cbox:hover{border-color:rgba(201,168,76,.6);transform:translateY(-2px)}
.cbox .ic{flex:none;width:46px;height:46px;border-radius:12px;border:1px solid rgba(201,168,76,.45);display:flex;align-items:center;justify-content:center;color:#7a6829}
.cbox b{display:block;font-size:16px;line-height:1.35}
.cbox small{display:block;color:#5b6a80;font-size:12.5px;margin-top:3px}

/* -------------------------------------------------------------- LEGAL ---- */
.legalgrid{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start;max-width:1060px}
.legaltoc{position:sticky;top:104px;font-size:13.5px;display:flex;flex-direction:column}
.legaltoc a{display:block;padding:7px 0;color:#4b5a70;border-left:2px solid rgba(12,30,53,.1);padding-left:14px;margin-left:-2px}
.legaltoc a:hover{color:var(--ink);border-left-color:var(--gold)}
.legalbody{max-width:720px;font-size:17px;line-height:1.75;color:#2e3b4e}
.legalbody h2{font-size:30px;margin:44px 0 14px;scroll-margin-top:100px}
.legalbody h2:first-child{margin-top:0}
.legalbody h3{font-size:21px;margin:26px 0 10px}
.legalbody p{margin:0 0 16px}
.legalbody ul{margin:0 0 18px;padding-left:22px}
.legalbody li{margin-bottom:8px}
.legalbody a{color:#7a6829;text-decoration:underline;text-decoration-color:rgba(201,168,76,.55);text-underline-offset:2px}
.legalbody strong{color:var(--ink)}

/* ---------------------------------------------------------------- FAQ ---- */
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid rgba(12,30,53,.14)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:19px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--gold);font-size:26px;line-height:1;transition:transform .3s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq p{margin:0 0 24px;color:#4b5a70;line-height:1.7}

/* ----------------------------------------------------------- CTA BAND ---- */
.cta{position:relative;overflow:hidden;border-radius:28px;padding:80px 64px;display:flex;justify-content:space-between;align-items:center;gap:40px;isolation:isolate}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,30,53,.96),rgba(12,30,53,.6))}

/* ------------------------------------------------------------- FOOTER ---- */
.foot{background:#08172a;padding:80px 48px 40px;color:#c3ccd8;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;max-width:1240px;margin:0 auto}
.fgrid h3,.fgrid h4{margin:0 0 16px;font-size:12px;letter-spacing:2px;color:var(--gold);font-family:"DM Sans","DM Sans Fallback",sans-serif;font-weight:700}
.fgrid a{display:block;padding:6px 0}
.fgrid a:hover{color:var(--gold2)}
.legal{max-width:1240px;margin:50px auto 0;padding-top:28px;border-top:1px solid var(--line);font-size:12px;line-height:1.7;color:var(--slate)}
.ehl{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12px}

/* ------------------------------------------- STICKY MOBILE BAR + CHAT ---- */
.mbar{display:none}
.chatfab{position:fixed;bottom:24px;right:28px;z-index:40;width:60px;height:60px;border-radius:50%;background:var(--gold);color:var(--navy);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .2s}
.chatfab:hover{transform:scale(1.06)}
body[data-mode=funnel] .chatfab{display:none}

/* Greeting bubble. Opens the real NTMG chat widget when one is present. */
.greet{position:fixed;right:28px;bottom:98px;z-index:42;width:300px;background:var(--cream);color:var(--navy);border-radius:18px 18px 4px 18px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.greet.on{opacity:1;transform:none;pointer-events:auto}
body[data-mode=funnel] .greet{display:none}
.greet .gx{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;background:transparent;color:#5b6a80;cursor:pointer;display:flex;align-items:center;justify-content:center}
.greet .gx svg{width:16px;height:16px}
.greet .gbody{display:flex;gap:12px;align-items:flex-start;text-align:left;background:none;border:0;padding:0 22px 0 0;cursor:pointer;color:var(--navy)}
.greet .gav{flex:none;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center}
.greet .gav svg{width:18px;height:18px}
.greet b{display:block;font-size:13px;margin-bottom:2px}
.greet .gbody span span{font-size:14.5px;line-height:1.45}
.greet .gq{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.greet .gq a,.greet .gq button{border:1px solid rgba(12,30,53,.25);background:#fff;border-radius:99px;padding:9px 13px;font-size:13px;line-height:1.2;cursor:pointer;color:var(--navy);text-decoration:none;font-family:inherit;display:inline-flex;align-items:center}
.greet .gq a:hover,.greet .gq button:hover{border-color:var(--gold)}
.greet .gq a:focus-visible,.greet .gq button:focus-visible,.greet .gx:focus-visible,.greet .gbody:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* -------------------------------------------------------------- DRAWER --- */
.drawer{position:fixed;inset:0;z-index:60;pointer-events:none}
.drawer.open{pointer-events:auto}
.drawer .panel{position:absolute;top:0;left:0;right:0;height:100%;background:var(--navy);padding:84px 24px 30px;display:flex;flex-direction:column;gap:4px;transform:translateY(-102%);transition:transform .45s cubic-bezier(.2,.7,.2,1);overflow:auto}
.drawer.open .panel{transform:none}
.drawer a.big-l{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:36px;padding:10px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer a.big-l:after{content:"\2192";font-family:"DM Sans","DM Sans Fallback",sans-serif;font-size:18px;color:var(--gold)}
.drawer .sm-l{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:18px 0;color:var(--slate)}
.drawer .sm-l a{padding:10px 0}

/* ========================================================== MOBILE ======= */
@media (max-width:860px){
  .nav{padding:0 16px;height:64px;margin-bottom:-64px}
  .nav.solid,body[data-mode=funnel] .nav{height:60px}
  .links{display:none}.burger,.navcall{display:flex}
  .brandlogo,.nav.solid .brandlogo,body[data-mode=funnel] .brandlogo{width:150px}
  body[data-mode=funnel] .burger{display:none}
  .sec{padding:72px 20px}.head{margin-bottom:34px}
  .hero{min-height:auto;padding:92px 20px 34px;align-items:flex-start}.hero.short{min-height:auto}
  .hero .shade{background:linear-gradient(180deg,rgba(12,30,53,.7),rgba(12,30,53,.85) 40%,var(--navy) 88%)}
  .hero .grid{grid-template-columns:1fr;gap:26px}.hero .copy{gap:16px}
  .h1{font-size:44px;line-height:1.02}.h2{font-size:38px}.lead{font-size:16.5px}
  .hero .lead.hide-m{display:none}.cue{display:none}
  .trust{font-size:12.5px;gap:8px 14px}
  .split2,.split2.flip{grid-template-columns:1fr;gap:28px}
  .calc{grid-template-columns:1fr}.calc .in,.calc .out{padding:26px 20px}
  .calc .res{font-size:46px}.calc .calc-payment-currency{font-size:26px}
  .calc label b{min-width:8ch;font-size:13px}
  .tabs{display:flex;width:100%;margin-bottom:24px}.tabs button{padding:11px 16px;font-size:14px}
  .legalgrid{grid-template-columns:1fr;gap:0}.legaltoc{display:none}
  .legalbody{font-size:16.5px}.legalbody h2{font-size:26px;margin:34px 0 12px}
  .split2.flip>*:first-child{order:2}
  .glass{padding:20px;border-radius:20px}
  .glass[data-funnel]{min-height:560px}.fn-q{font-size:28px}
  .opts{grid-template-columns:1fr}.opt{min-height:60px;padding:14px}
  .big{font-size:42px}
  .fpage{grid-template-columns:1fr;padding:76px 14px 40px;background:var(--navy);align-content:start}
  .fpage .glass{grid-column:1;background:transparent;border:0;box-shadow:none;padding:6px 4px;backdrop-filter:none}
  .fside{display:none}
  .fpage .fn-go{position:sticky;bottom:12px}
  .paths{grid-template-columns:1fr;gap:14px}.pcard{min-height:280px;padding:22px}.pcard h3{font-size:34px}.pcard p{display:none}
  .steps,.steps.four{grid-template-columns:1fr;gap:14px}
  .stepc{padding:24px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
  .stepc .n{grid-row:span 2;font-size:28px;letter-spacing:0}.stepc h3{font-size:26px;margin:0}
  .spot{grid-template-columns:1fr;border-radius:22px;min-height:0}.spot .ph{height:220px}.spot .tx{padding:28px 22px}.checks{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:26px 10px}.stats b{font-size:36px}.stats div:last-child{grid-column:span 2}
  .rvc{flex-basis:84%;padding:22px}.rvc q{font-size:22px}.rvnav{display:none}
  .cards4,.cards3,.poscards{grid-template-columns:1fr;gap:14px}.ic-card{padding:22px}
  .team{grid-template-columns:1fr;gap:16px}
  .tmrow{grid-template-columns:1fr 1fr;gap:14px}
  .tmbio{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .tmbio.open{display:block}
  .tmmore{display:inline-block}
  .tmbtns{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:flex-start;padding:40px 24px;border-radius:22px}
  .faq summary{font-size:17px;padding:20px 0}
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}.fgrid>div:first-child{grid-column:span 2}
  .foot{padding:56px 20px 110px}
  /* The sticky action bar carries its own chat button, so the floating one
     is redundant on a phone. The greeting bubble is not: it is positioned
     above the bar below. */
  .chatfab{display:none}
  .mbar{display:grid;grid-template-columns:auto auto 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(8,23,42,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(0);transition:transform .35s}
  .mbar a,.mbar button{min-height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px}
  .mbar .ico{width:54px;border:1px solid var(--line);background:transparent;color:var(--cream)}
  .mbar.hide{transform:translateY(110%)}
  /* The greeting clears the sticky action bar, which is 70px plus the safe
     area, so neither the bar's buttons nor the bubble's own buttons are
     covered. z-index stays below .mbar. */
  .greet{display:block;right:12px;left:auto;bottom:calc(84px + env(safe-area-inset-bottom));
    width:min(300px,calc(100vw - 24px));z-index:44}
  body[data-mode=funnel] .mbar{display:none}
  /* The NTMG chat widget renders its own launcher, .ntmg-widget-bubble, fixed
     to the bottom right at z-index 9998. On mobile that lands on top of the
     sticky action bar, so lift it clear. Vendor class, so if the widget is
     ever rebuilt check this selector still matches. */
  .ntmg-widget-bubble{bottom:calc(80px + env(safe-area-inset-bottom))!important}
  body[data-mode=funnel] .ntmg-widget-bubble{display:none!important}
  .row2{grid-template-columns:1fr}
  .m-hide{display:none!important}
}
@media (min-width:861px){.d-hide{display:none!important}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .fu,.reveal{opacity:1;transform:none}
  .rot::before,.rot::after{opacity:0}.rot>span{opacity:1}
}

/* ============================================================================
   BLOG

   The card markup is generated by scripts/new-post.py and re-parsed by it on
   every publish, so none of it can change. Class names, element types,
   attribute order and nesting are all load bearing. Everything below is a
   restyle of that fixed markup:

     <a class="post-card" data-cat data-date href>
       <img class="post-thumb" src alt width height loading>
       <div class="post-inner">
         <span class="post-cat">    <div class="post-title">
         <div class="post-excerpt"> <div class="post-meta">
           <span class="post-time"> <span class="post-read">

   Same for the related block: .related / .related-head / .post-grid.
---------------------------------------------------------------------------- */

/* ---- category filter ---- */
.cat-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.cat-tab{background:rgba(245,242,236,.05);border:1px solid var(--line);color:var(--cream);font-family:"DM Sans","DM Sans Fallback",sans-serif;font-size:13.5px;font-weight:500;padding:11px 20px;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.cat-tab:hover{border-color:rgba(201,168,76,.5)}
.cat-tab.active{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:700}

/* ---- post grid ---- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{display:flex;flex-direction:column;background:var(--deep);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.post-card:hover{transform:translateY(-4px);border-color:rgba(201,168,76,.45);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.post-thumb{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block;background:#0b1a2e;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.post-card:hover .post-thumb{transform:scale(1.04)}
.post-inner{display:flex;flex-direction:column;flex:1;padding:24px 24px 22px;gap:12px}
.post-cat{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,168,76,.35);border-radius:999px;padding:5px 11px}
.post-title{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:25px;line-height:1.18;color:var(--cream)}
.post-excerpt{font-size:14.5px;line-height:1.6;color:var(--slate);flex:1}
.post-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px}
.post-time{color:var(--slate)}
.post-read{color:var(--gold);font-weight:700;white-space:nowrap}

/* Featured post. :first-child carries it on load so there is no shift, and
   .feat, which ntmg.js puts on the first visible card, carries it once a
   category filter hides that first card. It is never written into the markup,
   because new-post.py requires the card to open with exactly
   class="post-card". Scoped to #postGrid so related cards stay uniform. */
@media(min-width:861px){
  #postGrid > .post-card:first-child,
  #postGrid > .post-card.feat{grid-column:1/-1;flex-direction:row;align-items:stretch}
  #postGrid > .post-card:first-child .post-thumb,
  #postGrid > .post-card.feat .post-thumb{width:54%;aspect-ratio:auto;min-height:340px;align-self:stretch}
  #postGrid > .post-card:first-child .post-inner,
  #postGrid > .post-card.feat .post-inner{width:46%;justify-content:center;padding:44px 44px 40px;gap:16px}
  #postGrid > .post-card:first-child .post-title,
  #postGrid > .post-card.feat .post-title{font-size:40px}
  #postGrid > .post-card:first-child .post-excerpt,
  #postGrid > .post-card.feat .post-excerpt{font-size:16px;flex:0 0 auto}
}

/* ---- empty state and load more ---- */
.blog-empty{text-align:center;padding:70px 20px;border:1px dashed var(--line);border-radius:18px}
.blog-empty-title{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:32px;color:var(--cream);margin-bottom:10px}
.blog-empty p{color:var(--slate);max-width:460px;margin:0 auto 22px;line-height:1.6}
.blog-empty a{color:var(--gold);font-weight:700;text-decoration:none}
/* display:flex would otherwise beat the hidden attribute the blog JS toggles. */
[hidden]{display:none!important}
.load-more-wrap{display:flex;justify-content:center;margin-top:46px}
.load-more{background:transparent;border:1px solid var(--line);color:var(--cream);font-family:"DM Sans","DM Sans Fallback",sans-serif;font-size:14px;font-weight:500;padding:15px 34px;border-radius:999px;cursor:pointer;transition:border-color .2s,background .2s}
.load-more:hover{border-color:var(--gold);background:rgba(201,168,76,.08)}

/* ---- reading progress ---- */
.rprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .1s linear}

/* ---- article ---- */
.artgrid{max-width:1180px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:minmax(0,720px) 320px;gap:64px;justify-content:center;align-items:start}
.artmain{min-width:0}
.article-head{max-width:720px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 0 30px}
.article-title{font-size:clamp(34px,4.4vw,54px);line-height:1.07;letter-spacing:-.5px;color:var(--cream)}
.article-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;font-size:13.5px;color:var(--slate)}
.article-hero{max-width:720px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.article-hero img{width:100%;height:auto;display:block;aspect-ratio:1200/630;object-fit:cover}

.article-body{max-width:720px;margin:0 auto;padding:44px 0 0;font-size:18px;line-height:1.75;color:#c9d1dc}
.article-body h2{font-size:32px;line-height:1.2;color:var(--cream);margin:48px 0 14px}
.article-body h3{font-size:24px;line-height:1.25;color:var(--cream);margin:34px 0 10px}
.article-body p{margin:0 0 22px}
.article-body strong{color:var(--cream);font-weight:700}
.article-body a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(201,168,76,.4);text-underline-offset:3px;transition:text-decoration-color .2s}
.article-body a:hover{text-decoration-color:var(--gold)}
.article-body ul,.article-body ol{margin:0 0 24px;padding-left:24px}
.article-body li{margin-bottom:9px}
.article-body blockquote{border-left:2px solid var(--gold);background:rgba(22,45,71,.5);padding:20px 24px;margin:28px 0;font-style:italic;color:var(--cream);border-radius:0 12px 12px 0}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 24px}
.article-body th{background:rgba(201,168,76,.1);color:var(--cream);font-weight:700;text-align:left;padding:12px 14px;border:1px solid var(--line)}
.article-body td{padding:12px 14px;border:1px solid var(--line);vertical-align:top}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;background:rgba(8,21,37,.6);padding:2px 6px;border-radius:4px;color:var(--gold2)}
.article-body hr{border:none;border-top:1px solid var(--line);margin:36px 0}
.article-body img{max-width:100%;height:auto;border-radius:12px}
.tablewrap{overflow-x:auto;margin:0 0 24px}

/* ---- author box ---- */
.author-box{max-width:720px;margin:48px auto 0;display:flex;gap:20px;align-items:flex-start;background:var(--deep);border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.author-box picture{flex:0 0 auto;display:contents}
.author-shot{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 20%;display:block;flex:0 0 auto;border:1px solid rgba(201,168,76,.35)}
.author-avatar{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.35);color:var(--gold);font-weight:700;font-size:22px;letter-spacing:1px}
/* Author headshot. new-post.py only ever supplies initials, so the photo is a
   CSS background keyed off data-author on .author-box. That keeps
   blog/template.html author agnostic and any author not listed here falls
   back to their initials with no broken image. Same WebP crops as team.html. */
.author-box[data-author] .author-avatar{background-size:cover;background-position:50% 18%;background-repeat:no-repeat}
.author-box[data-author="Noah Monson"] .author-avatar{background-image:url("/assets/img/team/noah-monson-400.webp");font-size:0}
.author-box[data-author="Thomas Petko"] .author-avatar{background-image:url("/assets/img/team/thomas-petko-400.webp");font-size:0}
.author-box[data-author="Fernando Chavez"] .author-avatar{background-image:url("/assets/img/team/fernando-chavez-400.webp");font-size:0}
.author-name{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:22px;color:var(--cream)}
.author-role{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:3px 0 9px}
.author-line{font-size:14.5px;line-height:1.65;color:var(--slate)}
.author-nmls{font-size:12.5px;color:var(--slate);margin-top:9px}
.author-nmls a{color:var(--gold);text-decoration:none;font-weight:700}
.author-more{display:inline-block;margin-top:10px;font-size:13px;color:var(--gold);text-decoration:none;font-weight:700}
.author-more:hover{text-decoration:underline}

.post-disclaimer{max-width:720px;margin:34px auto 0;font-size:11.5px;line-height:1.7;color:rgba(245,242,236,.55)}

/* ---- sticky equity rail ---- */
.artside{position:sticky;top:104px;display:flex;flex-direction:column;gap:14px}
.eqcard{background:var(--deep);border:1px solid var(--line);border-radius:18px;padding:26px 24px}
.eqcard h2{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:26px;line-height:1.15;color:var(--cream);margin:0 0 10px}
.eqcard p{font-size:14px;line-height:1.6;color:var(--slate);margin:0 0 18px}
.eqcard .btn{width:100%}
.eqcard .trust{flex-direction:column;gap:9px;font-size:12.5px;color:var(--slate);margin-top:16px}

/* ---- inline CTA card. .post-cta is also the anchor the legacy
       --rebuild-related fallback in new-post.py looks for. ---- */
.post-cta{max-width:720px;margin:56px auto 0}
.post-cta-inner{background:linear-gradient(140deg,#16314f,#0d2036);border:1px solid rgba(201,168,76,.28);border-radius:20px;padding:38px 34px;text-align:center}
.post-cta-title{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:32px;line-height:1.15;color:var(--cream);margin-bottom:8px}
.post-cta-title em{color:var(--gold2)}
.post-cta-sub{font-size:14px;color:var(--slate);line-height:1.6;margin-bottom:24px}
.post-cta-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
.disp-opt{display:flex;gap:12px;align-items:center;background:rgba(245,242,236,.04);border:1px solid var(--line);border-radius:14px;padding:15px 16px;text-decoration:none;transition:border-color .2s,background .2s}
.disp-opt:hover{border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.07)}
.disp-opt-icon{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(201,168,76,.12);color:var(--gold)}
.disp-opt-title{font-size:14.5px;font-weight:700;color:var(--cream)}
.disp-opt-sub{font-size:12px;color:var(--slate);line-height:1.4;margin-top:2px}
.disp-trust{margin-top:20px;font-size:12.5px;color:var(--slate)}

/* ---- related ---- */
.related{max-width:1180px;margin:72px auto 0;padding:0 48px}
.related-head{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:700;font-size:34px;color:var(--cream);margin-bottom:28px}
.related .post-grid{grid-template-columns:repeat(3,1fr)}

@media(max-width:1100px){
  .artgrid{grid-template-columns:1fr;gap:0;max-width:860px}
  .artside{position:static;flex-direction:row;margin:40px auto 0;max-width:720px}
  .artside .eqcard{flex:1}
}
@media(max-width:1024px){
  .post-grid,.related .post-grid{grid-template-columns:repeat(2,1fr)}
  .post-cta-opts{grid-template-columns:1fr}
}
@media(max-width:860px){
  .post-grid,.related .post-grid{grid-template-columns:1fr;gap:20px}
  .artgrid{padding:0 20px}
  .related{padding:0 20px;margin-top:56px}
  .related-head{font-size:28px}
  .article-body{font-size:17px;padding-top:34px}
  .article-body h2{font-size:27px;margin:38px 0 12px}
  .article-body h3{font-size:21px}
  .article-hero{border-radius:14px}
  .author-box{flex-direction:column;gap:14px;padding:22px}
  .artside{flex-direction:column}
  .post-cta-inner{padding:28px 22px}
  .post-cta-title{font-size:26px}
  .cat-tabs{gap:8px;margin-bottom:30px}
  .cat-tab{padding:10px 16px;font-size:13px}
}