/* ==========================================================
   Katie Mares - site styles
   Everything is scoped under .km so any block can also be
   dropped into a GoHighLevel Custom HTML / Code element.
   ========================================================== */
.km *,.km *::before,.km *::after{box-sizing:border-box}

.km{
  /* brand tokens pulled from the live site */
  --km-black:#000000;
  --km-cream:#FFFDFA;
  --km-cream-dim:rgba(255,253,250,.78);
  --km-gold:#C1A57B;
  --km-line:rgba(193,165,123,.28);
  --km-hairline:rgba(255,253,250,.10);
  --km-serif:'Forum',Georgia,'Times New Roman',serif;
  --km-sans:'Lato','Helvetica Neue',Helvetica,Arial,sans-serif;
  --km-pad:clamp(20px,5vw,64px);
  --km-section:clamp(72px,9vw,132px);
  background:var(--km-black);
  color:var(--km-cream);
  font-family:var(--km-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* zero-specificity base rules so component classes always win */
:where(.km p){margin:0 0 1.05em}
:where(.km p:last-child){margin-bottom:0}
:where(.km ul){margin:0;padding:0;list-style:none}
.km a{color:inherit}
.km img{max-width:100%;display:block}
.km-wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:var(--km-pad);padding-right:var(--km-pad)}
.km-wrap-narrow{max-width:900px}

/* ---------- shared type ---------- */
.km-eyebrow{
  font-family:var(--km-sans);font-weight:300;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--km-gold);
  margin:0 0 22px;
}
.km-h2{
  font-family:var(--km-serif);font-weight:400;
  font-size:clamp(32px,3.9vw,48px);line-height:1.12;margin:0 0 24px;
  color:var(--km-cream);text-wrap:balance;
}
.km-lede{font-size:clamp(17px,1.6vw,20px);line-height:1.7;color:var(--km-cream)}
.km-body{color:var(--km-cream-dim);font-size:16.5px;line-height:1.75}
.km-center{text-align:center}

/* ---------- buttons ---------- */
.km-btn{
  display:inline-block;
  font-family:var(--km-sans);font-weight:300;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--km-cream);
  border:1px solid var(--km-gold);
  background:rgba(255,255,255,.05);
  padding:16px 30px;
  cursor:pointer;
  transition:background .28s ease,color .28s ease,border-color .28s ease;
  text-align:center;
}
.km-btn:hover,.km-btn:focus-visible{background:var(--km-gold);color:#000;border-color:var(--km-gold)}
.km-btn:focus-visible{outline:2px solid var(--km-cream);outline-offset:3px}
.km-btn-solid{background:var(--km-gold);color:#000}
.km-btn-solid:hover,.km-btn-solid:focus-visible{background:transparent;color:var(--km-cream)}
.km-textlink{
  display:inline-block;margin-top:22px;font-size:14.5px;color:var(--km-cream-dim);
  text-decoration:none;border-bottom:1px solid var(--km-line);padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease;
}
.km-textlink:hover{color:var(--km-cream);border-bottom-color:var(--km-gold)}

/* ---------- header ---------- */
.km-header{
  position:sticky;top:0;z-index:40;position:-webkit-sticky;
  background:rgba(0,0,0,.92);
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--km-hairline);
}
.km-header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding-top:18px;padding-bottom:18px;
}
.km-brand{text-decoration:none;display:block}
.km-brand-name{font-family:var(--km-serif);font-size:clamp(26px,3.4vw,40px);line-height:1.05;color:var(--km-cream);margin:0}
.km-brand-tag{font-family:var(--km-serif);font-size:11px;letter-spacing:.045em;color:var(--km-cream-dim);margin:6px 0 0}
.km-nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);flex-wrap:wrap;justify-content:flex-end}
.km-nav a{
  font-size:14px;font-weight:300;letter-spacing:.03em;text-decoration:none;
  color:var(--km-cream);opacity:.88;padding:6px 0;
  border-bottom:1px solid transparent;transition:opacity .2s ease,border-color .2s ease;
}
.km-nav a:hover{opacity:1;border-bottom-color:var(--km-gold)}
.km-nav a[aria-current="page"]{color:var(--km-gold);opacity:1}

/* ---------- hamburger (mobile only, injected by site.js) ---------- */
.km-navtoggle{
  display:none;flex:none;width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--km-line);cursor:pointer;
  align-items:center;justify-content:center;
}
.km-navtoggle span{
  display:block;position:relative;width:20px;height:1px;background:var(--km-cream);
  transition:background .2s ease;
}
.km-navtoggle span::before,.km-navtoggle span::after{
  content:"";position:absolute;left:0;width:20px;height:1px;background:var(--km-cream);
  transition:transform .25s ease,top .25s ease;
}
.km-navtoggle span::before{top:-6px}
.km-navtoggle span::after{top:6px}
.km-navtoggle[aria-expanded="true"] span{background:transparent}
.km-navtoggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.km-navtoggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- split hero (home, cx) ---------- */
.km-hero{position:relative;overflow:hidden}
.km-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(32px,5vw,72px);
  min-height:min(88vh,880px);
}
.km-hero-copy{padding:clamp(56px,7vw,104px) 0 clamp(56px,7vw,104px) var(--km-pad);max-width:620px;margin-left:auto}
.km-hero h1{
  font-family:var(--km-serif);font-weight:400;
  font-size:clamp(46px,6.4vw,104px);line-height:.96;letter-spacing:-.005em;
  margin:0 0 clamp(24px,3vw,34px);color:var(--km-cream);
  text-wrap:balance;
}
.km-hero h1.km-h1-long{font-size:clamp(32px,3.9vw,58px);line-height:1.08}
.km-hero-copy p{font-size:clamp(16px,1.35vw,18px);line-height:1.75;color:var(--km-cream-dim);max-width:50ch}
.km-hero-lead{color:var(--km-cream) !important}
.km-hero .km-btn{margin-top:clamp(26px,3vw,36px)}
.km-hero-media{position:relative;align-self:stretch;min-height:420px}
.km-hero-media img{
  position:absolute;inset:0;width:100%;height:100%;
  /* crop from the bottom, never off the top of her head */
  object-fit:cover;object-position:center 8%;
}
.km-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.35) 22%,rgba(0,0,0,0) 55%);
  pointer-events:none;
}

/* ---------- text hero (interior pages) ---------- */
.km-pagehero{padding:clamp(72px,9vw,140px) 0 clamp(48px,6vw,90px);text-align:center}
.km-pagehero h1{
  font-family:var(--km-serif);font-weight:400;
  font-size:clamp(38px,5.4vw,82px);line-height:1.02;
  margin:0 auto;max-width:16ch;color:var(--km-cream);text-wrap:balance;
}
.km-pagehero h1.km-wide{max-width:22ch}
.km-pagehero-sub{
  font-family:var(--km-serif);font-size:clamp(20px,2.1vw,26px);
  color:var(--km-gold);margin:26px auto 0;max-width:40ch;
}
.km-pagehero-lede{
  font-size:clamp(17px,1.6vw,20px);line-height:1.7;color:var(--km-cream-dim);
  max-width:60ch;margin:30px auto 0;text-wrap:balance;
}
.km-pagehero .km-btn{margin-top:clamp(30px,3.4vw,40px)}

/* ---------- generic section ---------- */
.km-section{padding:var(--km-section) 0}
.km-section-tight{padding:clamp(56px,6vw,90px) 0}
.km-section-line{border-top:1px solid var(--km-line)}
.km-section-head{text-align:center;margin-bottom:clamp(44px,5vw,68px)}
.km-section-head .km-eyebrow{margin-bottom:14px}
.km-section-head .km-h2{margin-bottom:0}

/* ---------- split: copy + photo ---------- */
.km-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(36px,5vw,80px);align-items:center;
}
.km-split-flip .km-split-media{order:2}
.km-split-media{position:relative;aspect-ratio:3/4;overflow:hidden}
.km-split-media img{width:100%;height:100%;object-fit:cover;object-position:center 10%}
.km-split-copy p{color:var(--km-cream-dim);font-size:16.5px;line-height:1.78}
.km-split-copy p + p{margin-top:0}

/* ---------- numbered beliefs ---------- */
.km-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(36px,5vw,72px)}
.km-numbers li{display:flex;gap:18px;align-items:flex-start}
.km-numbers .km-num{
  font-family:var(--km-serif);font-size:24px;line-height:1;color:var(--km-gold);
  flex:none;width:32px;padding-top:2px;
}
.km-numbers p{color:var(--km-cream-dim);font-size:16px;line-height:1.7;margin:0}

/* ---------- dash list ---------- */
.km-dashlist{max-width:78ch;margin:0 auto}
.km-dashlist li{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid var(--km-hairline);
  color:var(--km-cream-dim);font-size:16.5px;line-height:1.65;
}
.km-dashlist li:first-child{border-top:1px solid var(--km-hairline)}
.km-dashlist li::before{content:"—";color:var(--km-gold);flex:none}

/* ---------- cards (three paths, three ways, two paths) ---------- */
.km-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(32px,4.5vw,64px);align-items:stretch;
}
.km-cards-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px;margin:0 auto}
.km-card{display:flex;flex-direction:column;text-align:center}
.km-card h2,.km-card h3,.km-card .km-card-body{text-align:center}
.km-card h2,.km-card h3{
  font-family:var(--km-serif);font-weight:400;
  font-size:clamp(23px,1.9vw,27px);line-height:1.3;
  margin:0 0 20px;color:var(--km-cream);text-wrap:balance;
}
.km-card h2::after,.km-card h3::after{
  content:"";display:block;width:44px;height:1px;background:var(--km-gold);
  margin:20px auto 0;
}
.km-card-body{color:var(--km-cream-dim);font-size:15.5px;line-height:1.72;margin-bottom:34px}
.km-card-body p + p{margin-top:0}
.km-card-meta{display:block;margin-top:14px;color:var(--km-gold);font-size:14px;letter-spacing:.04em}
.km-card-list{margin-top:14px}
.km-card-list li{padding:5px 0;color:var(--km-cream);font-size:15.5px}
.km-card .km-btn{margin-top:auto;align-self:center;min-width:260px}

/* forced breaks so a short heading fills the same lines as its
   neighbours; ignored once the cards stack */
.km-brk{display:none}
@media (min-width:1025px){.km-brk{display:inline}}

/* three columns share one grid so headings, body copy and buttons
   line up across all cards instead of floating independently */
@media (min-width:1025px){
  .km-cards{grid-template-rows:auto 1fr auto}
  .km-card{display:contents}
  .km-card:nth-child(1) > *{grid-column:1}
  .km-card:nth-child(2) > *{grid-column:2}
  .km-card:nth-child(3) > *{grid-column:3}
  .km-card > h2,.km-card > h3{grid-row:1;align-self:end}
  .km-card > .km-card-body{grid-row:2}
  .km-card > .km-btn{grid-row:3;justify-self:center;align-self:start;width:auto}
}

/* ---------- quotes ---------- */
.km-quote{padding:var(--km-section) 0;border-top:1px solid var(--km-line);border-bottom:1px solid var(--km-line)}
.km-quote-inner{max-width:900px;margin:0 auto;text-align:center}
.km-quote blockquote{
  margin:0;font-family:var(--km-sans);font-weight:300;
  font-size:clamp(21px,2.3vw,29px);line-height:1.5;color:var(--km-cream);
  text-wrap:balance;
}
.km-quote-sm blockquote{font-size:clamp(18px,1.8vw,22px);line-height:1.6}
.km-quote cite{
  display:block;margin-top:28px;font-style:normal;
  font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--km-gold);
}

/* ---------- books ---------- */
.km-bookblock{padding:var(--km-section) 0;border-top:1px solid var(--km-hairline)}
.km-bookblock:first-of-type{border-top:0}
.km-bookblock h2{
  font-family:var(--km-serif);font-weight:400;
  font-size:clamp(32px,3.6vw,46px);line-height:1.1;margin:0 0 10px;color:var(--km-cream);
}
.km-book-sub{
  font-size:clamp(17px,1.7vw,21px);color:var(--km-gold);margin:0 0 26px;line-height:1.45;
}
.km-book-copy p{color:var(--km-cream-dim);font-size:16px;line-height:1.75}
.km-book-copy .km-btn{margin-top:14px}
.km-ticks{margin:0 0 22px}
.km-ticks li{
  position:relative;padding:6px 0 6px 26px;color:var(--km-cream-dim);
  font-size:16px;line-height:1.6;
}
.km-ticks li::before{
  content:"";position:absolute;left:0;top:16px;
  width:10px;height:1px;background:var(--km-gold);
}
.km-book-note{
  margin-top:26px;padding:18px 22px;border:1px solid var(--km-line);
  color:var(--km-cream);font-size:15px;line-height:1.6;
}
.km-book-note strong{font-weight:400;color:var(--km-gold);display:block;letter-spacing:.04em}

/* ---------- final cta ---------- */
.km-cta{padding:var(--km-section) 0;text-align:center}
.km-cta h2{
  font-family:var(--km-serif);font-weight:400;
  font-size:clamp(36px,4.4vw,54px);line-height:1.12;margin:0 0 18px;color:var(--km-cream);
  text-wrap:balance;
}
.km-cta-sub{font-size:clamp(19px,1.7vw,22px);color:var(--km-cream);margin:0 0 20px}
.km-cta-body{max-width:56ch;margin:0 auto 14px;color:var(--km-cream-dim);font-size:16.5px;line-height:1.75}
.km-cta-kicker{margin:0 0 clamp(30px,3.4vw,40px);color:var(--km-cream);font-size:17px}

/* ---------- forms ---------- */
.km-form{max-width:680px;margin:0 auto;text-align:left}
.km-field{margin-bottom:22px}
.km-field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.km-form label{
  display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--km-gold);margin-bottom:9px;
}
.km-form input,.km-form select,.km-form textarea{
  width:100%;font-family:var(--km-sans);font-weight:300;font-size:16px;
  color:var(--km-cream);background:rgba(255,255,255,.04);
  border:1px solid var(--km-hairline);border-radius:0;
  padding:14px 16px;transition:border-color .2s ease,background .2s ease;
  -webkit-appearance:none;appearance:none;
}
.km-form textarea{min-height:150px;resize:vertical;line-height:1.6}
.km-form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--km-gold) 50%),linear-gradient(135deg,var(--km-gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:44px;
}
.km-form select option{background:#111;color:var(--km-cream)}

/* ---------- on-brand dropdown (replaces the OS select menu) ---------- */
.km-select{position:relative}
.km-select-btn{
  width:100%;text-align:left;font-family:var(--km-sans);font-weight:300;font-size:16px;
  color:var(--km-cream);background:rgba(255,255,255,.04);
  border:1px solid var(--km-hairline);border-radius:0;
  padding:14px 46px 14px 16px;cursor:pointer;position:relative;
  transition:border-color .2s ease,background .2s ease;
}
.km-select-btn::after{
  content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;
  border-right:1px solid var(--km-gold);border-bottom:1px solid var(--km-gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.km-select.is-open .km-select-btn::after{transform:translateY(-20%) rotate(-135deg)}
.km-select.is-open .km-select-btn,.km-select-btn:focus-visible{
  border-color:var(--km-gold);background:rgba(255,255,255,.06);outline:none;
}
.km-select-btn.is-empty{color:rgba(255,253,250,.35)}
.km-select-list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:#0d0d0d;border:1px solid var(--km-gold);
  max-height:290px;overflow:auto;display:none;
  box-shadow:0 18px 40px rgba(0,0,0,.65);
}
.km-select.is-open .km-select-list{display:block}
.km-select-opt{
  padding:12px 16px;cursor:pointer;color:var(--km-cream-dim);font-size:15.5px;
  border-bottom:1px solid rgba(255,253,250,.06);
}
.km-select-opt:last-child{border-bottom:0}
.km-select-opt.is-active,.km-select-opt:hover{background:var(--km-gold);color:#000}
.km-select-opt[aria-selected="true"]{color:var(--km-cream)}
.km-select-opt[aria-selected="true"].is-active,.km-select-opt[aria-selected="true"]:hover{color:#000}

.km-form input:focus,.km-form select:focus,.km-form textarea:focus{
  outline:none;border-color:var(--km-gold);background:rgba(255,255,255,.06);
}
.km-form input::placeholder,.km-form textarea::placeholder{color:rgba(255,253,250,.35)}
.km-form .km-btn{width:100%;margin-top:6px}
.km-opt{text-transform:none;letter-spacing:0;color:rgba(255,253,250,.4)}
.km-form-note{margin-top:16px;font-size:13.5px;color:rgba(255,253,250,.5);text-align:center}
.km-form-msg{
  margin-top:18px;padding:14px 16px;border:1px solid var(--km-line);
  font-size:15px;line-height:1.55;display:none;
}
.km-form-msg.is-on{display:block}
.km-form-msg.is-err{border-color:rgba(255,120,120,.5);color:#ffb4b4}
.km-form-msg.is-ok{border-color:var(--km-gold);color:var(--km-cream)}
.km-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.km-footer{border-top:1px solid var(--km-hairline);padding:40px 0 44px;text-align:center}
.km-footer-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0 0 22px;
}
.km-footer-nav a{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--km-cream-dim);transition:color .2s ease;
}
.km-footer-nav a:hover{color:var(--km-gold)}
.km-footer p{font-size:13px;letter-spacing:.03em;color:rgba(255,253,250,.55)}

/* ---------- sticky connect dock ---------- */
.km-dock{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:flex;gap:10px;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.km-dock.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
.km-dock.is-hidden{opacity:0;transform:translateY(12px);pointer-events:none}
.km-dock button{
  font-family:var(--km-sans);font-weight:300;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:13px 20px;cursor:pointer;border:1px solid var(--km-gold);
  transition:background .25s ease,color .25s ease;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.km-dock .km-dock-primary{background:var(--km-gold);color:#000}
.km-dock .km-dock-primary:hover{background:#d8bd92}
.km-dock .km-dock-ghost{background:rgba(0,0,0,.78);color:var(--km-cream)}
.km-dock .km-dock-ghost:hover{background:var(--km-gold);color:#000}
@media (max-width:640px){
  .km-dock{
    right:0;left:0;bottom:0;gap:0;
    border-top:1px solid var(--km-gold);
    /* the bar itself is opaque all the way down, including the home-indicator
       strip, so no page content can show through underneath it */
    background:#000;
  }
  .km-dock button{
    flex:1;border:0;border-radius:0;box-shadow:none;font-size:11.5px;letter-spacing:.1em;
    padding:15px 10px;
    padding-bottom:calc(15px + env(safe-area-inset-bottom,0px));
  }
  .km-dock .km-dock-ghost{background:rgba(0,0,0,.94);border-left:1px solid rgba(193,165,123,.4)}
  .km-footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}

/* ---------- modals ---------- */
.km-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,32px);
  background:rgba(0,0,0,.82);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .25s ease;
}
.km-modal.is-open{display:flex;opacity:1}
.km-modal-panel{
  position:relative;width:100%;max-width:1000px;height:auto;
  max-height:92vh;max-height:92dvh;
  background:#fff;border:1px solid var(--km-gold);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(14px);transition:transform .28s ease;
}
.km-modal-sm .km-modal-panel{max-width:560px;background:#0a0a0a}
.km-modal.is-open .km-modal-panel{transform:translateY(0)}
.km-modal-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px 14px 22px;background:#000;border-bottom:1px solid var(--km-gold);
}
.km-modal-title{
  font-family:var(--km-sans);font-weight:300;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--km-gold);margin:0;
}
.km-modal-close{
  appearance:none;background:transparent;border:1px solid rgba(193,165,123,.55);
  color:var(--km-cream);width:38px;height:38px;font-size:20px;line-height:1;
  cursor:pointer;transition:background .2s ease,color .2s ease;flex:none;
}
.km-modal-close:hover{background:var(--km-gold);color:#000}
.km-modal-body{flex:0 0 auto;min-height:0;overflow:hidden;-webkit-overflow-scrolling:touch;background:#fff}
.km-modal-sm .km-modal-body{flex:1 1 auto;overflow:auto;background:#0a0a0a;padding:clamp(24px,4vw,34px)}
.km-cal-scale{transform-origin:top center;width:100%}
.km-modal-body iframe{width:100%;min-height:560px;border:0;display:block}
.km-modal-intro{color:var(--km-cream-dim);font-size:15.5px;line-height:1.65;margin:0 0 24px}
.km-noscroll{overflow:hidden !important}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .km-cards{grid-template-columns:1fr;gap:clamp(48px,7vw,64px);max-width:640px;margin:0 auto}
  .km-numbers{grid-template-columns:1fr}
}
@media (max-width:900px){
  /* the nav collapses behind a hamburger, so the header can stay pinned */
  .km-header-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
  .km-navtoggle{display:flex}
  .km-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:#000;border-bottom:1px solid var(--km-gold);
    padding:4px 0 10px;display:none;
    max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto;
  }
  .km-nav.is-open{display:flex}
  .km-nav a{
    padding:15px var(--km-pad);font-size:15px;opacity:1;
    border-bottom:1px solid var(--km-hairline);
  }
  .km-nav a:last-child{border-bottom:0}
  .km-nav a:hover{border-bottom-color:var(--km-hairline)}
  .km-hero-grid{grid-template-columns:1fr;min-height:0;gap:0}
  .km-hero-copy{order:2;padding:clamp(40px,8vw,64px) var(--km-pad);max-width:none;margin:0 auto}
  .km-hero-media{order:1;min-height:min(70vh,560px)}
  .km-hero-media::after{
    background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.85) 100%);
  }
  .km-hero-copy p{max-width:none}
  .km-btn{width:100%;max-width:360px}
  .km-split{grid-template-columns:1fr;gap:34px}
  .km-split-flip .km-split-media{order:0}
  .km-split-media{aspect-ratio:4/3;max-height:60vh}
  .km-field-row{grid-template-columns:1fr;gap:0}
}
@media (max-width:640px){
  /* pad the overlay past the notch and the home indicator, then let the panel
     fill exactly what is left. It can never be taller than the visible area,
     so the close button cannot end up under the status bar. */
  .km-modal{
    padding-top:max(12px,env(safe-area-inset-top,0px));
    padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
    padding-left:10px;padding-right:10px;
    align-items:stretch;
  }
  .km-modal-panel{max-height:100%;margin:auto 0}
}
@media (max-width:480px){
  .km-brand-tag{display:none}
  /* keep the long CTA label on a single line */
  .km-btn{font-size:13px;letter-spacing:.08em;padding:15px 18px}
  .km-nav{gap:12px}
  .km-nav a{font-size:13px}
}