/* ============================================================
   ui.css — shadcn/ui token + utility layer
   Loaded AFTER site.css so the seven reference components are
   reproduced exactly. Tokens are shadcn's light "zinc" defaults;
   --primary is SOM's logo blue so the brand still reads.
   ============================================================ */

:root{
  --background:#FFFFFF;
  --foreground:#09090B;
  --card:#FFFFFF;
  --card-foreground:#09090B;
  --muted:#F4F4F5;
  --muted-foreground:#696971;   /* shadcn default #71717A is 4.40:1 on --muted; this clears AA */
  --accent:#F4F4F5;
  --accent-foreground:#18181B;
  --primary:#3A52D9;            /* SOM logo blue, AA-safe variant */
  --primary-foreground:#FAFAFA;
  --secondary:#F4F4F5;
  --secondary-foreground:#18181B;
  --ui-border:#E4E4E7;
  --input:#E4E4E7;
  --ring:#3A52D9;
  --radius:.5rem;               /* rounded-lg  = 8px */
  --radius-md:calc(var(--radius) - 2px);  /* 6px */
  --radius-sm:calc(var(--radius) - 4px);  /* 4px */
  --radius-xl:calc(var(--radius) + 4px);  /* 12px */
  --nav-h:4.8125rem;                      /* sticky header: 1rem + 44px + 1rem + 1px border */
  --radius-2xl:1.25rem;         /* 20px — large media, panels, hero card */
  --ease-smooth:cubic-bezier(.22,.61,.36,1);
}

/* ---------- container + section rhythm ---------- */
.u-container{width:100%;max-width:80rem;margin-inline:auto;padding-inline:1rem}
@media (min-width:640px){.u-container{padding-inline:1.5rem}}
@media (min-width:1024px){.u-container{padding-inline:2rem}}

.u-sec-team{padding-block:4rem}                       /* py-16 */
@media (min-width:768px){.u-sec-team{padding-block:6rem}}   /* md:py-24 */
.u-sec-cta{padding-block:4rem}
@media (min-width:1024px){.u-sec-cta{padding-block:6rem}}
/* The panel reaches further toward the edges than the rest of the page. */
.u-sec-cta .u-container{max-width:94rem}
.u-sec-footer{padding:5rem 0 3.5rem}
@media (min-width:768px){.u-sec-footer{padding:6rem 0 4rem}}
.u-sec-cloud{padding:3rem 1rem}                       /* px-4 py-12 */
@media (min-width:640px){.u-sec-cloud{padding-block:4rem}}  /* sm:py-16 */
.u-sec-marquee{padding-block:4rem 6rem}
@media (min-width:768px){.u-sec-marquee{padding-block:6rem 8rem}}

/* ============================================================
   BUTTON — button-reference.txt
   ============================================================ */
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  border-radius:var(--radius);font-size:.875rem;line-height:1.25rem;font-weight:500;
  height:2.25rem;padding:.5rem 1rem;gap:.5rem;border:1px solid transparent;cursor:pointer;
  font-family:inherit;text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
  outline-offset:2px;
}
.ui-btn:hover{text-decoration:none}
.ui-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--ring) 70%,transparent)}
.ui-btn:disabled,.ui-btn[aria-disabled=true]{pointer-events:none;opacity:.5}
.ui-btn svg{pointer-events:none;flex-shrink:0}

.ui-btn--default{background:var(--primary);color:var(--primary-foreground);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ui-btn--default:hover{background:color-mix(in srgb,var(--primary) 90%,transparent)}
.ui-btn--outline{border-color:var(--input);background:var(--background);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ui-btn--outline:hover{background:var(--accent);color:var(--accent-foreground)}
.ui-btn--secondary{background:var(--secondary);color:var(--secondary-foreground);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ui-btn--secondary:hover{background:color-mix(in srgb,var(--secondary) 80%,transparent)}
.ui-btn--ghost{background:transparent;color:var(--foreground)}
.ui-btn--ghost:hover{background:var(--accent);color:var(--accent-foreground)}
.ui-btn--link{background:transparent;color:var(--primary);height:auto;padding:0;text-underline-offset:4px}
.ui-btn--link:hover{text-decoration:underline}

.ui-btn--sm{height:2rem;border-radius:var(--radius);padding-inline:.75rem;font-size:.75rem}
.ui-btn--lg{height:2.75rem;border-radius:var(--radius);padding-inline:1.5rem;font-size:.9375rem}
.ui-btn--icon{height:2.25rem;width:2.25rem;padding:0}

/* Page-level calls to action are one size everywhere. Stated as a context
   rule rather than a class on each button, because per-page classes are
   exactly how the home page ended up with a different button to the rest. */
.ui-hero-acts .ui-btn,
.ui-cta-actions .ui-btn,
.btn-row .ui-btn,
.form-submit .ui-btn{height:2.75rem;padding-inline:1.5rem;font-size:.9375rem}

/* Reference heights are 32-40px. On touch pointers we raise the hit area to
   the 44px WCAG 2.5.5 minimum without changing the painted box. */
@media (pointer:coarse){
  .ui-btn{position:relative}
  .ui-btn::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
}

/* ============================================================
   NAVBAR — navbar-reference.txt (navbar-5)
   ============================================================ */
.ui-nav-sec{padding-block:1rem;background:var(--background);border-bottom:1px solid var(--ui-border);position:sticky;top:0;z-index:100}
/* Grid, not space-between: equal 1fr rails either side of the menu put the
   links on the exact centre line regardless of how wide the logo or the
   action buttons happen to be. */
.ui-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.ui-nav > .ui-nav-actions,.ui-nav > .ui-nav-trigger{justify-self:end}
@media (max-width:1023px){.ui-nav{grid-template-columns:1fr auto}}
.ui-nav-brand{display:flex;align-items:center;gap:.5rem}
.ui-nav-brand img{max-height:2.75rem;width:auto}
.ui-nav-brand span{font-size:1.125rem;font-weight:600;letter-spacing:-.04em;color:var(--foreground)}

.ui-menu{display:none}
@media (min-width:1024px){.ui-menu{display:block}}
.ui-menu-list{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.ui-menu-trigger,.ui-menu-link{
  display:inline-flex;align-items:center;gap:.25rem;height:2.25rem;padding:.5rem .75rem;
  border-radius:var(--radius-md);background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-size:.875rem;font-weight:500;color:var(--foreground);text-decoration:none;
  transition:background-color .15s ease,color .15s ease;
}
.ui-menu-trigger:hover,.ui-menu-link:hover{background:var(--accent);color:var(--accent-foreground);text-decoration:none}
.ui-menu-trigger:focus-visible,.ui-menu-link:focus-visible{outline:2px solid color-mix(in srgb,var(--ring) 70%,transparent);outline-offset:2px}
.ui-menu-chev{transition:transform .2s ease}
.ui-menu-item-wrap{position:relative}
.ui-menu-item-wrap:hover .ui-menu-chev,.ui-menu-item-wrap:focus-within .ui-menu-chev{transform:rotate(180deg)}

.ui-menu-content{
  position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%) translateY(-4px);
  width:600px;display:grid;grid-template-columns:repeat(2,1fr);padding:.75rem;
  background:var(--background);border:1px solid var(--ui-border);border-radius:var(--radius-md);
  box-shadow:0 10px 38px -10px rgba(9,9,11,.22);
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.ui-menu-item-wrap:hover .ui-menu-content,
.ui-menu-item-wrap:focus-within .ui-menu-content{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ui-menu-sub{display:block;border-radius:var(--radius-md);padding:.75rem;text-decoration:none;transition:background-color .15s ease}
.ui-menu-sub:hover{background:color-mix(in srgb,var(--muted) 70%,transparent);text-decoration:none}
.ui-menu-sub p:first-child{margin:0 0 .25rem;font-weight:600;color:var(--foreground);font-size:.875rem}
.ui-menu-sub p:last-child{margin:0;font-size:.875rem;color:var(--muted-foreground);line-height:1.35}

.ui-nav-actions{display:none;align-items:center;gap:1rem}
@media (min-width:1024px){.ui-nav-actions{display:flex}}
.ui-nav-trigger{display:inline-flex}
@media (min-width:1024px){.ui-nav-trigger{display:none}}

/* Sheet, side="top" */
.ui-sheet-overlay{position:fixed;inset:0;z-index:150;background:rgba(9,9,11,.5);opacity:0;transition:opacity .25s ease}
.ui-sheet-overlay.is-open{opacity:1}
.ui-sheet{
  position:fixed;top:0;left:0;right:0;z-index:160;max-height:100vh;max-height:100dvh;overflow:auto;
  background:var(--background);border-bottom:1px solid var(--ui-border);
  transform:translateY(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.ui-sheet.is-open{transform:translateY(0)}
.ui-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 1.5rem 0}
.ui-sheet-body{display:flex;flex-direction:column;padding:1rem 1.5rem 1.5rem}
.ui-acc{margin:1rem 0 .5rem;border:0}
.ui-acc-trigger{
  display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem;
  padding:1rem 0;background:none;border:0;border-bottom:1px solid var(--ui-border);
  font-family:inherit;font-size:1rem;font-weight:500;color:var(--foreground);cursor:pointer;text-align:left;
}
.ui-acc-trigger:hover{text-decoration:none}
.ui-acc-trigger svg{transition:transform .2s ease;flex-shrink:0;color:var(--muted-foreground)}
.ui-acc-trigger[aria-expanded=true] svg{transform:rotate(180deg)}
.ui-acc-panel{overflow:hidden;padding-block:.5rem}
@media (min-width:768px){.ui-acc-panel{display:grid;grid-template-columns:repeat(2,1fr)}}
.ui-sheet-links{display:flex;flex-direction:column;gap:1.5rem;padding-top:1rem}
.ui-sheet-links a{font-weight:500;color:var(--foreground);font-size:1rem;text-decoration:none}
.ui-sheet-links a:hover{color:var(--primary);text-decoration:none}
.ui-sheet-actions{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem}
.ui-sheet-actions .ui-btn{width:100%;height:2.5rem}
body.sheet-open{overflow:hidden}
@media (min-width:1024px){.ui-sheet,.ui-sheet-overlay{display:none!important}}

/* ============================================================
   TEAM — team-profile-card-reference.txt (team-1)
   ============================================================ */
.ui-team-head{margin-bottom:3rem;text-align:center}
.ui-team-head h2{font-size:2.25rem;line-height:1.1;font-weight:700;color:var(--foreground);text-wrap:balance;margin:0}
@media (min-width:768px){.ui-team-head h2{font-size:3rem}}
.ui-team-head p{margin:1rem auto 0;max-width:42rem;color:var(--muted-foreground);font-size:1rem}
.ui-team-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:640px){.ui-team-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1280px){.ui-team-grid{grid-template-columns:repeat(4,1fr)}}
.ui-team-grid--n1{max-width:20rem;margin-inline:auto}
.ui-team-grid--n2{max-width:42rem;margin-inline:auto}
.ui-team-grid--n3{max-width:64rem;margin-inline:auto}
@media (min-width:1280px){
  .ui-team-grid--n2{grid-template-columns:repeat(2,1fr)}
  .ui-team-grid--n3{grid-template-columns:repeat(3,1fr)}
}

.ui-card{
  position:relative;overflow:hidden;background:var(--card);color:var(--card-foreground);
  border:1px solid var(--ui-border);border-radius:var(--radius-xl);
  transition:box-shadow .3s ease;
}
.ui-card:hover{box-shadow:0 10px 15px -3px rgba(9,9,11,.1),0 4px 6px -4px rgba(9,9,11,.1)}
.ui-card-content{display:flex;height:100%;flex-direction:column;padding:0}
.ui-team-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--muted)}
.ui-team-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform .5s var(--ease-smooth)}
.ui-card:hover .ui-team-img img{transform:scale(1.04)}
.ui-team-body{display:flex;flex-grow:1;flex-direction:column;padding:1.5rem}
.ui-team-id{margin-bottom:1.5rem}
.ui-team-id h3{margin:0 0 .25rem;font-size:1.25rem;line-height:1.4;font-weight:600;color:var(--foreground)}
.ui-team-id p{margin:0;font-size:.875rem;color:var(--muted-foreground)}
.ui-team-facts{margin:0 0 1.5rem;padding:0;list-style:none;display:flex;flex-grow:1;flex-direction:column;gap:1rem}
.ui-team-facts li{display:flex;align-items:flex-start;gap:.75rem}
.ui-team-facts svg{margin-top:.125rem;height:2rem;width:2rem;flex-shrink:0;border-radius:9999px;
  background:var(--muted);color:color-mix(in srgb,var(--foreground) 70%,transparent);padding:.375rem}
.ui-team-facts .k{display:block;margin:0;font-size:.875rem;color:var(--muted-foreground)}
.ui-team-facts .v{display:block;margin:0;font-size:.875rem;font-weight:500;color:var(--foreground)}
.ui-team-facts .v a{color:inherit;text-decoration:none}
.ui-team-facts .v a:hover{color:var(--primary)}
.ui-team-foot{margin-top:auto;background:var(--foreground)}
.ui-team-foot a{
  display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;
  padding:1.5rem;font-size:.875rem;font-weight:500;color:var(--background);text-decoration:none;
  transition:background-color .15s ease;
}
.ui-team-foot a:hover{background:color-mix(in srgb,var(--foreground) 80%,transparent);text-decoration:none}

/* ============================================================
   TESTIMONIALS — testimonials-reference.txt (marquee-01)
   ============================================================ */
.ui-marquee-wrap{position:relative;display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.ui-marquee{display:flex;overflow:hidden;padding:.5rem 0;--gap:.75rem;gap:var(--gap);--duration:34s}
.ui-marquee-track{display:flex;flex-shrink:0;justify-content:space-around;gap:var(--gap);min-width:100%;
  animation:ui-marquee var(--duration) linear infinite}
.ui-marquee--rev .ui-marquee-track{animation-direction:reverse}
.ui-marquee-wrap:hover .ui-marquee-track{animation-play-state:paused}
@keyframes ui-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap)))}}
.ui-review{position:relative;height:100%;width:23rem;flex-shrink:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--ui-border);background:var(--card);border-radius:var(--radius-xl);
  padding:1.5rem;box-shadow:none;transition:border-color .24s var(--ease-smooth)}
.ui-review:hover{border-color:#C9C9D1}
@media (max-width:560px){.ui-review{width:18rem;padding:1.25rem}}
.ui-review-c{padding:0;display:flex;flex-direction:column;gap:.875rem}
.ui-review-top{display:flex;flex-direction:row;align-items:center;gap:.5rem}
.ui-review-av{width:40px;height:40px;border-radius:9999px;flex-shrink:0;background:var(--muted);
  color:var(--muted-foreground);display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:600}
.ui-review-id{display:flex;flex-direction:column}
.ui-review-id .n{margin:0;font-size:.9375rem;font-weight:600;color:var(--foreground)}
.ui-review-id .u{margin:0;font-size:.8125rem;font-weight:500;color:var(--muted-foreground)}
.ui-review-b{margin:0;font-size:.9375rem;line-height:1.6;color:var(--foreground);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ui-fade{pointer-events:none;position:absolute;top:0;bottom:0;width:12%;z-index:2}
.ui-fade--l{left:0;background:linear-gradient(to right,var(--background),transparent)}
.ui-fade--r{right:0;background:linear-gradient(to left,var(--background),transparent)}

/* ============================================================
   LOGO CLOUD — logo-clouds-reference.txt
   ============================================================ */
.ui-cloud-head{margin-inline:auto;max-width:48rem;text-align:center}
.ui-cloud-head h2{margin:0;font-size:2.25rem;line-height:1.1;font-weight:700;letter-spacing:-.03em;
  color:var(--foreground);text-wrap:balance}
@media (min-width:768px){.ui-cloud-head h2{font-size:3rem}}
.ui-cloud-head p{margin:1rem auto 0;max-width:42rem;font-size:1rem;color:var(--muted-foreground)}
.ui-cloud-body{margin:2.5rem auto 0;max-width:64rem}
@media (min-width:640px){.ui-cloud-body{margin-top:3rem}}
.ui-cloud-row{display:none}
@media (min-width:640px){.ui-cloud-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.5rem}}
@media (min-width:768px){.ui-cloud-row{gap:2rem}}
@media (min-width:1024px){.ui-cloud-row{gap:2.5rem}}
.ui-cloud-grid{display:grid;grid-template-columns:repeat(3,1fr);place-items:center;row-gap:1.5rem}
@media (min-width:640px){.ui-cloud-grid{display:none}}
.ui-logo{display:flex;width:4.5rem;flex-shrink:0;cursor:default;flex-direction:column;align-items:center;gap:.5rem;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}
@media (min-width:640px){.ui-logo{width:5.625rem}}
.ui-logo:hover{transform:scale(1.07)}
.ui-logo-mark{display:flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;color:var(--muted-foreground)}
@media (min-width:640px){.ui-logo-mark{height:2.5rem;width:2.5rem}}
.ui-logo-name{user-select:none;white-space:nowrap;font-size:10px;font-weight:500;letter-spacing:.025em;color:var(--muted-foreground)}
@media (min-width:640px){.ui-logo-name{font-size:11px}}
@keyframes ui-wipe{
  0%{clip-path:inset(0 0% 0 0);filter:blur(0);opacity:1}
  40%{clip-path:inset(0 100% 0 0);filter:blur(8px);opacity:.2}
  100%{clip-path:inset(0 0% 0 0);filter:blur(0);opacity:1}
}
.ui-logo.is-waving{animation:ui-wipe .92s cubic-bezier(.16,1,.3,1) var(--d,0s) both}

/* ============================================================
   CTA — heavenlly.framer.website
   A blue rounded panel: wordmark, heading, one white pill, and a
   photo on the right cut by an angled corner.
   ============================================================ */
.ui-cta{
  position:relative;overflow:hidden;border-radius:var(--radius-2xl);
  background:var(--primary);color:#fff;
  display:grid;grid-template-columns:1fr;min-height:360px;
}
@media (min-width:900px){.ui-cta{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}}
.ui-cta-body{padding:2.5rem 1.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
@media (min-width:768px){.ui-cta-body{padding:3.5rem}}
.ui-cta-logo{height:2.5rem;width:auto;margin-bottom:.5rem}
.ui-cta h2{margin:0;font-size:2rem;line-height:1.08;letter-spacing:-.035em;font-weight:600;
  max-width:16ch;color:#fff;text-wrap:balance}
@media (min-width:768px){.ui-cta h2{font-size:2.75rem}}
.ui-cta p{margin:0;font-size:1rem;line-height:1.6;color:#E3E8FF;max-width:42ch}
.ui-cta-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.ui-btn--onblue{background:#fff;color:var(--primary);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ui-btn--onblue:hover{background:#F2F4FF}
.ui-btn--onblue-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.ui-btn--onblue-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

.ui-cta-media{position:relative;min-height:220px;background:#2F44BC}
@media (min-width:900px){
  .ui-cta-media{min-height:0;
    /* the reference cuts the photo with a house-shoulder angle */
    clip-path:polygon(28% 0, 100% 0, 100% 100%, 0 100%)}
}
.ui-cta-media img{width:100%;height:100%;object-fit:cover}
.ui-cta-media .ph{background:repeating-linear-gradient(45deg,#4860DD,#4860DD 12px,#4254CE 12px,#4254CE 24px)}
.ui-cta-media .ph b{color:#fff}
.ui-cta-media .ph span{color:#DDE3FF}

/* ============================================================
   FOOTER — footer-reference.txt (footer-7), dark
   The reference footer is light. SOM's runs dark on the same black
   as the team card's action bar, so the page closes on one surface.
   Every colour below is measured against #09090B:
   #FAFAFA 19.06:1 · #A1A1AA 7.76:1 · #8B9DFF 7.92:1.
   ============================================================ */
.ui-footer{
  --foot-bg:#09090B;
  --foot-fg:#FAFAFA;
  --foot-muted:#A1A1AA;
  --foot-link-hover:#8B9DFF;
  --foot-rule:rgba(255,255,255,.14);
  background:var(--foot-bg);color:var(--foot-fg);border-top:0;
}
.ui-foot-top{display:flex;width:100%;flex-direction:column;justify-content:space-between;gap:2.5rem}
@media (min-width:1024px){.ui-foot-top{flex-direction:row;align-items:flex-start;text-align:left}}
.ui-foot-brand{display:flex;width:100%;flex-direction:column;justify-content:space-between;gap:1.5rem}
@media (min-width:1024px){.ui-foot-brand{align-items:flex-start}}
.ui-foot-logo{display:flex;align-items:center;gap:.5rem}
.ui-foot-logo img{height:4rem;width:auto}
/* Larger than the nav's 2.75rem on purpose: SOM's logo IS the wordmark, and
   "A REAL ESTATE FINANCING CO." is unreadable below about 60px. The nav bar
   has no room for it; the footer does. */
.ui-foot-logo h2{margin:0;font-size:1.25rem;font-weight:600;color:var(--foot-fg)}
.ui-foot-desc{margin:0;max-width:70%;font-size:.875rem;color:var(--foot-muted);line-height:1.6}
.ui-foot-addr{margin:0;font-style:normal;font-size:.875rem;color:var(--foot-muted);line-height:1.7}
.ui-foot-addr a{color:var(--foot-fg);text-decoration:none}
.ui-foot-addr a:hover{color:var(--foot-link-hover)}
.ui-foot-social{display:flex;align-items:center;gap:1.5rem;margin:0;padding:0;list-style:none;color:var(--foot-muted)}
.ui-foot-social li{font-weight:500}
.ui-foot-social a{color:inherit;display:flex;text-decoration:none}
.ui-foot-social a:hover{color:var(--foot-link-hover)}
.ui-foot-cols{display:grid;width:100%;gap:1.5rem}
@media (min-width:768px){.ui-foot-cols{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.ui-foot-cols{gap:5rem}}
.ui-foot-cols h3{margin:0 0 1rem;font-weight:700;font-size:1rem;color:var(--foot-fg)}
.ui-foot-cols ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.75rem;
  font-size:.875rem;color:var(--foot-muted)}
.ui-foot-cols li{font-weight:500}
.ui-foot-cols a{color:inherit;text-decoration:none}
.ui-foot-cols a:hover{color:var(--foot-link-hover)}
.ui-foot-legalwrap{margin-top:2rem;border-top:1px solid var(--foot-rule);padding-top:2rem;padding-bottom:1.5rem;
  font-size:.75rem;font-weight:500;color:var(--foot-muted)}
/* The long disclosure closes the footer: centred, 11px, and held to a
   readable measure so it stays legible without dominating the block. */
.ui-foot-disc{margin:2rem auto 0;max-width:78rem;text-align:center;
  font-size:.6875rem;font-weight:400;line-height:1.55;color:#8A8A93}
.ui-foot-bar{display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
@media (min-width:768px){.ui-foot-bar{flex-direction:row;align-items:center;text-align:left}}
.ui-foot-bar p{margin:0;order:2;color:var(--foot-fg)}
@media (min-width:1024px){.ui-foot-bar p{order:1}}
.ui-foot-bar ul{order:1;display:flex;flex-direction:column;gap:.5rem;list-style:none;margin:0;padding:0;
  color:var(--foot-muted)}
@media (min-width:768px){.ui-foot-bar ul{order:2;flex-direction:row;gap:1rem}}
.ui-foot-bar a{color:inherit;text-decoration:none}
.ui-foot-bar a:hover{color:var(--foot-link-hover)}
@media (max-width:767px){.ui-foot-desc{max-width:none}.ui-foot-disc{grid-template-columns:1fr}
  /* Loan Programs | Resources side by side; Disclaimers spans both, in two columns. */
  .ui-foot-cols{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .ui-foot-cols > :last-child{grid-column:1 / -1}
  .ui-foot-cols > :last-child ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem}
  .ui-foot-cols h3{margin-bottom:.5rem}
  .ui-foot-bar ul{flex-direction:row;flex-wrap:wrap;column-gap:1.25rem}}

/* Same reasoning as the footer: breadcrumbs and the stacked contact details
   are navigation, not prose, so they get a full target on a phone. Links that
   sit inside a sentence are deliberately left alone — WCAG exempts them. */
@media (max-width:767px){
  .crumb a{display:inline-flex;align-items:center;min-height:2.75rem}
  .cblock p > a[href^="tel:"],.cblock p > a[href^="mailto:"],.cblock p > a[href$=".html"]{
    display:inline-flex;align-items:center;min-height:2.75rem}
  /* a link alone in its own paragraph is a button in all but name */
  main p > a:only-child{display:inline-flex;align-items:center;min-height:2.75rem}
}

/* Full-width actions on a phone: easier to hit, and it stops a two-button
   row from stacking at two different widths. */
@media (max-width:539px){
  .ui-cta-actions .ui-btn,.btn-row .ui-btn{flex:1 1 100%;justify-content:center}
}

/* ---- Touch targets in the footer (WCAG 2.5.5) ----
   Footer links were 17px tall — a long list of thumb-sized misses on a phone.
   The anchors become the full row height; the list gap shrinks to compensate,
   so the footer does not get taller. Desktop keeps a 24px minimum (2.5.8). */
.ui-foot-cols a,.ui-foot-bar a,.ui-foot-addr a{display:inline-flex;align-items:center;min-height:1.5rem}
.ui-foot-social a{align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem}
@media (max-width:1023px){
  .ui-foot-cols ul{gap:0}
  .ui-foot-bar a,.ui-foot-addr a{min-height:2.75rem}
  /* Compact by request: 36px rows, above WCAG 2.5.8's 24px floor (AA). */
  .ui-foot-cols a{min-height:2.25rem}
  .ui-foot-bar ul{gap:0}
  .ui-foot-social{gap:.75rem}
  .ui-foot-social a{min-width:2.75rem;min-height:2.75rem;margin-inline:-.5rem}
}

/* The menu button is the only navigation on a phone; make it a full target. */
@media (max-width:1023px){
  .ui-btn.ui-nav-trigger{width:2.75rem;height:2.75rem}
}
.skip:focus{min-height:2.75rem;display:inline-flex;align-items:center}

@media (prefers-reduced-motion:reduce){
  .ui-marquee-track{animation:none;flex-wrap:wrap;justify-content:center}
  .ui-marquee--rev{display:none}
  .ui-fade{display:none}
  .ui-logo.is-waving{animation:none}
  .ui-sheet,.ui-sheet-overlay{transition:none}
}

/* ============================================================
   PAGE FURNITURE
   One vocabulary for every page, built from the same tokens as
   the seven reference components above. Added 2026-10-01 because
   the home page was drifting from the rest of the site.
   ============================================================ */
.u-sec{padding-block:4rem}
@media (min-width:768px){.u-sec{padding-block:6rem}}
.u-sec--tight{padding-block:3rem}
@media (min-width:768px){.u-sec--tight{padding-block:4rem}}
.u-sec--muted{background:var(--muted)}
.u-sec--muted .ui-card,.u-sec--muted .ui-prog{background:var(--background)}

/* Section header — identical rules to .ui-team-head, so every
   section title on the site is set the same way. */
.ui-head{margin-bottom:3rem;text-align:center}
.ui-head h2{margin:0;font-size:2.25rem;line-height:1.1;font-weight:700;
  letter-spacing:-.03em;color:var(--foreground);text-wrap:balance}
@media (min-width:768px){.ui-head h2{font-size:3rem}}
.ui-head p{margin:1rem auto 0;max-width:42rem;color:var(--muted-foreground);font-size:1rem}
.ui-head--left{text-align:left}
.ui-head--left h2{max-width:22ch}
.ui-head--left p{margin-inline:0}

.ui-arrow{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;
  font-size:.875rem;font-weight:500;color:var(--primary);text-decoration:none}
.ui-arrow svg{transition:transform .22s ease}
.ui-arrow:hover{text-decoration:none}
.ui-arrow:hover svg{transform:translateX(4px)}

/* ---- Loan programs (4) ---- */
.ui-prog-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:640px){.ui-prog-grid{grid-template-columns:repeat(2,1fr)}}
/* Cards sit on a tinted surface rather than white so they read as objects
   on the page. Contrast on #EDEDF0: body 4.66:1, heading 17.03:1,
   arrow 5.30:1; the chips use their own darker pair at 4.81:1. */
.ui-prog{
  --prog-bg:#EDEDF0; --prog-border:#DCDCE2; --prog-chip:#E0E0E6; --prog-chip-fg:#5F5F67;
  display:flex;flex-direction:column;background:var(--prog-bg);
  border:1px solid var(--prog-border);border-radius:var(--radius-xl);padding:1.75rem;
  transition:box-shadow .3s ease,background-color .3s ease}
.ui-prog:hover{background:#E8E8EC;box-shadow:0 10px 15px -3px rgba(9,9,11,.1),0 4px 6px -4px rgba(9,9,11,.1)}
.ui-prog h3{margin:0;font-size:1.375rem;font-weight:600;letter-spacing:-.02em;color:var(--foreground)}
.ui-prog-fit{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:.875rem 0 0;padding:0}
.ui-prog-fit li{background:var(--prog-chip);color:var(--prog-chip-fg);border-radius:9999px;
  padding:.25rem .625rem;font-size:.75rem;font-weight:500}
.ui-prog p{margin:1rem 0 0;font-size:.9375rem;line-height:1.6;color:var(--muted-foreground)}
.ui-prog-note{font-size:.875rem!important}
.ui-prog .ui-arrow{margin-top:auto;padding-top:1rem}
/* On a muted section the cards invert so they still separate from the band. */
.u-sec--muted .ui-prog{--prog-bg:#FFFFFF;--prog-border:#E4E4E7;--prog-chip:#F0F0F2;--prog-chip-fg:#5F5F67}
.u-sec--muted .ui-prog:hover{background:#FFFFFF}

/* ---- Document columns ---- */
.ui-doc-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:768px){.ui-doc-grid{grid-template-columns:repeat(2,1fr)}}
.ui-doc h3{margin:0 0 1rem;padding-bottom:1rem;border-bottom:1px solid var(--ui-border);
  font-size:1rem;font-weight:600;color:var(--foreground)}
.ui-doc ul{margin:0;padding:0;list-style:none}
.ui-doc li{position:relative;padding:.4rem 0 .4rem 1.25rem;font-size:.9375rem;color:var(--muted-foreground)}
.ui-doc li::before{content:"";position:absolute;left:0;top:1rem;width:7px;height:1px;background:var(--primary)}

/* ---- Process ---- */
.ui-steps{counter-reset:none;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:640px){.ui-steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.ui-steps{grid-template-columns:repeat(4,1fr)}}
.ui-step{border-top:1px solid var(--ui-border);padding-top:1rem}
.ui-step-n{display:block;font-size:.75rem;font-weight:600;letter-spacing:.12em;
  color:var(--primary);font-variant-numeric:tabular-nums;margin-bottom:.5rem}
.ui-step-t{display:block;font-size:1rem;font-weight:600;line-height:1.35;color:var(--foreground)}
.ui-step-d{display:block;margin-top:.35rem;font-size:.875rem;line-height:1.5;color:var(--muted-foreground)}
.ui-steps-note{margin:2rem 0 0;font-size:.8125rem;color:var(--muted-foreground)}

/* ---- Three-up feature row ---- */
.ui-feat{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:768px){.ui-feat{grid-template-columns:repeat(3,1fr)}}
.ui-feat > div{border-top:1px solid var(--ui-border);padding-top:1.5rem}
.ui-feat-ico{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;
  margin-bottom:1rem;border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}
.ui-feat h3{margin:0 0 .5rem;font-size:1.125rem;font-weight:600;letter-spacing:-.018em;color:var(--foreground)}
.ui-feat p{margin:0;font-size:.9375rem;line-height:1.65;color:var(--muted-foreground)}

/* ---- Stats ---- */
/* stats-reference.txt (demo layout): a muted band, heading and lede above,
   figures in a plain grid below. */
.u-sec-stats{background:color-mix(in srgb,var(--muted) 50%,var(--background));padding-block:6rem}
.ui-stats-wrap{max-width:64rem;margin-inline:auto;padding-inline:1.5rem}
.ui-stats-wrap h2{margin:0;font-size:2.25rem;font-weight:600;letter-spacing:-.025em;
  line-height:1.15;color:var(--foreground)}
@media (min-width:1024px){.ui-stats-wrap h2{font-size:3rem}}
.ui-stats-wrap > div:first-child > p{margin:1rem 0 0;font-size:1.125rem;line-height:1.6;
  color:var(--muted-foreground);text-wrap:balance;max-width:52rem}
.ui-stats{display:grid;grid-template-columns:1fr;gap:0;margin-top:2rem}
@media (max-width:767px){.ui-stats > div{padding-block:1.25rem;border-top:1px solid var(--ui-border)}
  .ui-stats > div:last-child{border-bottom:1px solid var(--ui-border)}}
@media (min-width:768px){.ui-stats{margin-top:4rem;gap:1rem;grid-template-columns:repeat(3,1fr)}}
.ui-stat-n{font-size:2.25rem;font-weight:700;line-height:1.1;color:var(--foreground)}
.ui-stat-l{margin:0;color:var(--muted-foreground)}

/* ---- Home hero ---- */
.ui-hero{padding-block:3.5rem}
@media (min-width:768px){.ui-hero{padding-block:5rem 4rem}}
.ui-hero-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media (min-width:1024px){.ui-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:4rem}}
.ui-hero h1{margin:0;font-size:2.5rem;line-height:1.05;font-weight:700;letter-spacing:-.04em;
  color:var(--foreground);max-width:17ch;text-wrap:balance}
@media (min-width:768px){.ui-hero h1{font-size:3.5rem}}
@media (min-width:1280px){.ui-hero h1{font-size:4rem}}
.ui-hero .lede{max-width:46ch}
.ui-hero-acts{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.ui-hero-trust{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:2.5rem 0 0;padding:1.5rem 0 0;
  border-top:1px solid var(--ui-border);list-style:none;font-size:.875rem;color:var(--muted-foreground)}

/* ---- "Which one sounds like you" ---- */
.ui-pick-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.ui-pick-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.ui-pick-grid{grid-template-columns:repeat(4,1fr)}}
.ui-pick{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  border:1px solid var(--ui-border);border-radius:var(--radius-xl);
  background:var(--background);transition:border-color .24s ease,box-shadow .24s ease}
.ui-pick-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--muted)}
.ui-pick-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-smooth)}
.ui-pick:hover .ui-pick-img img{transform:scale(1.04)}
.ui-pick-img .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;height:100%;text-align:center;padding:1rem}
.ui-pick-body{display:flex;flex-direction:column;flex:1;padding:1.5rem}
.ui-pick:hover{text-decoration:none;border-color:#C9C9D1;
  box-shadow:0 10px 15px -3px rgba(9,9,11,.08),0 4px 6px -4px rgba(9,9,11,.08)}
.ui-pick h3{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;
  line-height:1.35;color:var(--foreground)}
.ui-pick p{margin:.625rem 0 1.25rem;font-size:.875rem;line-height:1.6;color:var(--muted-foreground)}
.ui-pick-body > p{flex:1}
.ui-pick .ui-arrow{margin-top:auto;min-height:auto}

/* ---- Process: five steps ---- */
.ui-steps--5{grid-template-columns:1fr}
@media (min-width:640px){.ui-steps--5{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.ui-steps--5{grid-template-columns:repeat(5,1fr)}}
.ui-step-n{text-transform:none;letter-spacing:.04em}

/* ---- Lender cloud: placeholder state ---- */
/* Deliberately unfinished-looking. Nothing here should read as a real
   lender relationship until the list is confirmed. */
.ui-logo--todo .ui-logo-mark{
  border:1px dashed #C4C4CC;border-radius:var(--radius-md);color:#A1A1AA;
  background:repeating-linear-gradient(45deg,#FAFAFA,#FAFAFA 6px,#F2F2F4 6px,#F2F2F4 12px);
  height:3rem;width:4rem}
@media (min-width:640px){.ui-logo--todo .ui-logo-mark{height:3.25rem;width:5rem}}
.ui-logo--todo .ui-logo-name{color:#8B8B94}
.ui-cloud-todo{margin:2rem auto 0;max-width:42rem;text-align:center;
  font-size:.8125rem;color:#6B5B37;background:#FDF7E8;border-left:3px solid #C99A2E;
  padding:.75rem 1rem;border-radius:var(--radius-sm)}
.ui-cloud-todo code{font-size:.75rem}

/* ============================================================
   HERO — heavenlly.framer.website
   An inset rounded media card with the headline overlaid.
   ============================================================ */
.ui-hero{padding:0}
/* Full bleed: the photograph is the section, edge to edge, no inset card. */
.ui-hero .u-container{max-width:none;padding:0}
.ui-hero-card{
  position:relative;overflow:hidden;border-radius:0;
  display:flex;align-items:center;background:var(--muted);
  /* Fill the first screen exactly: viewport less the sticky header above it.
     svh, not vh, so mobile browser chrome doesn't push the bottom off-screen.
     The vh line is the fallback for engines without svh. */
  min-height:max(560px,calc(100vh - var(--nav-h)));
  min-height:max(560px,calc(100svh - var(--nav-h)));
}
/* clamp, not min-height + max-height: a min-height always wins over a
   max-height, so the pair silently lets the hero grow without limit. */
@media (min-width:768px){.ui-hero-card{
  min-height:0;
  height:max(560px,calc(100vh - var(--nav-h)));
  height:max(560px,calc(100svh - var(--nav-h)));
}}
.ui-hero-media{position:absolute;inset:0}
.ui-hero-media img{width:100%;height:100%;object-fit:cover}
/* The scrim is what keeps the overlaid copy legible whatever photo lands
   here. Measured against the darkest stop: #FFFFFF on #141720 is 15.8:1. */
.ui-hero-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,10,16,.82) 0%,rgba(9,10,16,.66) 38%,rgba(9,10,16,.18) 70%,rgba(9,10,16,.06) 100%);
}
.ui-hero-body{position:relative;z-index:2;width:100%;max-width:80rem;margin-inline:auto;
  padding:3rem 1rem}
@media (min-width:640px){.ui-hero-body{padding-inline:1.5rem}}
@media (min-width:1024px){.ui-hero-body{padding:4rem 2rem}}
.ui-hero-body > *{max-width:46rem}
.ui-hero-eyebrow{margin:0 0 1.25rem;font-size:.6875rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#C8D0FF}
.ui-hero-body h1{margin:0;font-size:2.25rem;line-height:1.06;letter-spacing:-.04em;font-weight:700;
  color:#fff;max-width:19ch;text-wrap:balance}
@media (min-width:768px){.ui-hero-body h1{font-size:3.25rem}}
@media (min-width:1280px){.ui-hero-body h1{font-size:3.75rem}}
.ui-hero-lede{margin:1.25rem 0 0;font-size:1.0625rem;line-height:1.6;color:#E6E8F2;max-width:46ch}
.ui-hero-acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.ui-btn--onimage{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55);
  backdrop-filter:blur(6px)}
.ui-btn--onimage:hover{background:rgba(255,255,255,.18);border-color:#fff}
.ui-hero-ph{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:.5rem;
  height:100%;text-align:right;padding:2rem;
  background:repeating-linear-gradient(45deg,#2A2E3C,#2A2E3C 14px,#242836 14px,#242836 28px)}
.ui-hero-ph b{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#C8D0FF;font-weight:600}
.ui-hero-ph span{font-size:.8125rem;color:#AEB4C6;max-width:34ch;line-height:1.5}

/* ============================================================
   FIND AN OFFICER — the reference's agent grid and profile
   ============================================================ */
.ui-officer-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:640px){.ui-officer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.ui-officer-grid{grid-template-columns:repeat(4,1fr)}}
.ui-officer-grid--n1{max-width:20rem;margin-inline:auto}
.ui-officer-grid--n2{max-width:42rem;margin-inline:auto}
.ui-officer-grid--n3{max-width:64rem;margin-inline:auto}
@media (min-width:1024px){
  .ui-officer-grid--n2{grid-template-columns:repeat(2,1fr)}
  .ui-officer-grid--n3{grid-template-columns:repeat(3,1fr)}
}
.ui-officer{display:block;text-decoration:none;color:inherit}
.ui-officer:hover{text-decoration:none}
.ui-officer-img{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-xl);
  background:var(--muted)}
.ui-officer-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform .5s var(--ease-smooth)}
.ui-officer:hover .ui-officer-img img{transform:scale(1.04)}
.ui-officer-row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  margin-top:1rem}
.ui-officer-n{font-size:1rem;font-weight:600;letter-spacing:-.012em;color:var(--foreground)}
.ui-officer-nmls{font-size:.8125rem;color:var(--muted-foreground);white-space:nowrap}
.ui-officer-r{display:block;margin-top:.35rem;font-size:.875rem;color:var(--muted-foreground)}

.ui-profile{display:grid;grid-template-columns:1fr;overflow:hidden;
  border-radius:var(--radius-2xl);background:var(--muted)}
@media (min-width:900px){.ui-profile{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}}
.ui-profile-img{background:#E4E4E7;min-height:320px}
@media (min-width:900px){.ui-profile-img{min-height:420px}}
.ui-profile-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.ui-profile-body{padding:2rem 1.5rem}
@media (min-width:768px){.ui-profile-body{padding:3rem}}
.ui-profile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap}
.ui-profile-body h1{margin:0;font-size:2rem;line-height:1.1;letter-spacing:-.035em;font-weight:700;
  color:var(--foreground)}
@media (min-width:768px){.ui-profile-body h1{font-size:2.5rem}}
.ui-profile-role{margin:.5rem 0 0;font-size:.9375rem;color:var(--muted-foreground)}
.ui-profile-links{display:flex;gap:.5rem}
.ui-profile-links a{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;
  border-radius:9999px;background:var(--primary);color:var(--primary-foreground);text-decoration:none;
  transition:background-color .2s ease}
.ui-profile-links a:hover{background:#2F44BC;text-decoration:none}
.ui-profile-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.ui-profile-facts .v{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;
  color:var(--foreground)}
@media (min-width:768px){.ui-profile-facts .v{font-size:1.5rem}}
.ui-profile-facts .k{margin:.25rem 0 0;font-size:.8125rem;color:var(--muted-foreground)}
@media (max-width:560px){.ui-profile-facts{grid-template-columns:1fr}}

/* ---- Lender cloud with real marks ---- */
.ui-cloud-row--img{gap:2.5rem}
@media (min-width:1024px){.ui-cloud-row--img{gap:3.5rem}}
.ui-cloud-row--img .ui-logo,
.ui-cloud-grid--img .ui-logo{width:auto}
.ui-cloud-row--img .ui-logo-mark,
.ui-cloud-grid--img .ui-logo-mark{height:3rem;width:auto;max-width:9rem}
.ui-cloud-row--img .ui-logo-mark img,
.ui-cloud-grid--img .ui-logo-mark img{max-height:3rem;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .3s var(--ease-smooth),opacity .3s var(--ease-smooth)}
.ui-logo:hover .ui-logo-mark img{filter:grayscale(0);opacity:1}
.ui-cloud-grid--img{grid-template-columns:repeat(2,1fr);row-gap:2rem;column-gap:1.5rem}
@media (prefers-reduced-motion:reduce){
  .ui-cloud-row--img .ui-logo-mark img,
  .ui-cloud-grid--img .ui-logo-mark img{filter:grayscale(0);opacity:1}
}

/* ---- Rounder cards, to match the reference's softness ---- */
.ui-card,.ui-prog,.ui-pick,.ui-review{border-radius:var(--radius-xl)}
.ui-team-img{border-radius:0}

/* ---- Back link + wide page heading ---- */
.ui-back{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;margin-bottom:1rem;
  font-size:.875rem;font-weight:500;color:var(--muted-foreground);text-decoration:none}
.ui-back:hover{color:var(--foreground);text-decoration:none}
.ui-head--wide{max-width:52rem;margin-inline:auto}
.ui-head--wide h1{margin:0;font-size:2.25rem;line-height:1.08;font-weight:700;letter-spacing:-.035em;
  color:var(--foreground);text-wrap:balance}
@media (min-width:768px){.ui-head--wide h1{font-size:3.25rem}}
.ui-head--wide p{margin:1.25rem auto 0;max-width:46rem;color:var(--muted-foreground);font-size:1.0625rem}

.ui-profile-about{margin-top:1.75rem}
.ui-profile-about h2{margin:0 0 .5rem;font-size:1rem;font-weight:600;color:var(--foreground)}
.ui-profile-about p{margin:0;font-size:.9375rem;line-height:1.65;color:var(--muted-foreground);
  max-width:52ch}

/* The placeholder caption has nowhere to sit beside the copy on a phone,
   so it is hidden there. It disappears entirely once a real photo lands. */
@media (max-width:900px){.ui-hero-ph b,.ui-hero-ph span{display:none}}

/* ---- Lender cards ---- */
/* Flex rather than grid so a short last row (11 lenders) sits centred. */
.ui-lender-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.ui-lender-grid > *{flex:0 0 calc((100% - 1rem) / 2)}
@media (min-width:640px){.ui-lender-grid > *{flex-basis:calc((100% - 2rem) / 3)}}
@media (min-width:1024px){.ui-lender-grid{gap:1.25rem}
  .ui-lender-grid > *{flex-basis:calc((100% - 3.75rem) / 4)}}
.ui-lender{display:flex;align-items:center;justify-content:center;
  min-height:8.5rem;padding:1.5rem;background:var(--card);
  border:1px solid var(--ui-border);border-radius:var(--radius-xl);
  transition:border-color .24s var(--ease-smooth),box-shadow .24s var(--ease-smooth),
             transform .24s var(--ease-smooth)}
.ui-lender:hover{border-color:#C9C9D1;transform:translateY(-2px);
  box-shadow:0 10px 15px -3px rgba(9,9,11,.08),0 4px 6px -4px rgba(9,9,11,.08)}
.ui-lender img{max-height:2.75rem;max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.75;transition:filter .3s var(--ease-smooth),opacity .3s var(--ease-smooth)}
.ui-lender:hover img{filter:grayscale(0);opacity:1}
.u-sec--muted .ui-lender{background:var(--background)}
.ui-lender-name{font-weight:600;font-size:1.05rem;letter-spacing:-.01em;text-align:center;
  color:var(--foreground);opacity:.75;transition:opacity .3s var(--ease-smooth)}
.ui-lender:hover .ui-lender-name{opacity:1}
@media (prefers-reduced-motion:reduce){.ui-lender img{filter:grayscale(0);opacity:1}}

/* ---- Team card, booking action only (home page) ---- */
/* Home: the reference's agent-card treatment — no card chrome, the photo is the
   object, with the name, role and the single CTA stacked beneath it. */
.ui-team-grid--min .ui-card{border:0;background:transparent}
.ui-team-grid--min .ui-card:hover{box-shadow:none}
.ui-team-grid--min .ui-team-img{height:auto;border-radius:var(--radius-xl)}
.ui-team-grid--min .ui-team-body{padding:1rem 0 0}
.ui-team-grid--min .ui-team-id{margin-bottom:0}
.ui-team-grid--min .ui-team-id h3{font-size:1.0625rem}
.ui-team-grid--min .ui-team-foot{margin-top:.6rem;background:transparent}
.ui-team-grid--min .ui-team-foot a{justify-content:flex-start;padding:0;min-height:2.75rem;
  font-weight:500;color:var(--primary)}
.ui-team-grid--min .ui-team-foot a:hover{background:transparent;text-decoration:underline}

/* ============================================================
   TIMELINE — modern-timeline-reference.txt
   Rail down the left, a circular node per step, card to the right
   with title, meta, a step badge, description and a progress bar.
   ============================================================ */
.ui-tl{position:relative;list-style:none;margin:0;padding:0;max-width:56rem;margin-inline:auto}
.ui-tl::before{content:"";position:absolute;left:1.5rem;top:1.5rem;bottom:1.5rem;width:1px;
  background:var(--ui-border)}
@media (min-width:640px){.ui-tl::before{left:2rem}}
.ui-tl-item{position:relative;display:flex;align-items:flex-start;gap:1rem}
@media (min-width:640px){.ui-tl-item{gap:1.5rem}}
.ui-tl-item + .ui-tl-item{margin-top:2rem}
@media (min-width:640px){.ui-tl-item + .ui-tl-item{margin-top:3rem}}
.ui-tl-node{position:relative;z-index:1;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:9999px;
  background:var(--background);border:2px solid var(--background);
  box-shadow:0 1px 3px rgba(9,9,11,.12),0 0 0 1px var(--ui-border);
  color:var(--primary);transition:transform .2s var(--ease-smooth)}
@media (min-width:640px){.ui-tl-node{width:4rem;height:4rem}}
.ui-tl-item:hover .ui-tl-node{transform:scale(1.05)}
.ui-tl-card{flex:1;min-width:0;background:var(--card);
  border:1px solid var(--ui-border);border-radius:var(--radius-xl);
  padding:1.25rem;transition:border-color .3s var(--ease-smooth),box-shadow .3s var(--ease-smooth),
  transform .3s var(--ease-smooth)}
@media (min-width:640px){.ui-tl-card{padding:1.5rem}}
.ui-tl-item:hover .ui-tl-card{border-color:color-mix(in srgb,var(--primary) 30%,transparent);
  box-shadow:0 10px 15px -3px rgba(9,9,11,.08),0 4px 6px -4px rgba(9,9,11,.08);transform:translateY(-2px)}
.ui-tl-head{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}
@media (min-width:640px){.ui-tl-head{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem}}
.ui-tl-head h3{margin:0 0 .25rem;font-size:1.125rem;font-weight:600;letter-spacing:-.015em;
  line-height:1.3;color:var(--foreground);transition:color .3s var(--ease-smooth)}
@media (min-width:640px){.ui-tl-head h3{font-size:1.25rem}}
.ui-tl-item:hover .ui-tl-head h3{color:var(--primary)}
.ui-tl-meta{margin:0;font-size:.875rem;color:var(--muted-foreground)}
.ui-tl-badge{align-self:flex-start;flex-shrink:0;white-space:nowrap;
  display:inline-flex;align-items:center;border-radius:9999px;
  padding:.125rem .625rem;font-size:.75rem;font-weight:600;line-height:1.25rem;
  background:color-mix(in srgb,var(--primary) 12%,transparent);
  color:#2F44BC;border:1px solid color-mix(in srgb,var(--primary) 22%,transparent)}
.ui-tl-desc{margin:0 0 1rem;font-size:.9375rem;line-height:1.65;color:var(--muted-foreground)}
.ui-tl-bar{height:4px;border-radius:9999px;background:var(--muted);overflow:hidden}
.ui-tl-bar span{display:block;height:100%;border-radius:9999px;background:var(--primary);
  transform-origin:left;animation:ui-tl-fill 1.1s var(--ease-smooth) both}
@keyframes ui-tl-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.ui-tl-bar span{animation:none}}

/* ============================================================
   TESTIMONIALS — testimonials-with-marquee reference
   ============================================================ */
.ui-tsec{display:flex;flex-direction:column;align-items:center;gap:1rem;
  max-width:80rem;margin-inline:auto}
@media (min-width:640px){.ui-tsec{gap:4rem}}
.ui-tsec-head{display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding-inline:1rem;text-align:center}
@media (min-width:640px){.ui-tsec-head{gap:2rem}}
.ui-tsec-head h2{margin:0;max-width:720px;font-size:1.875rem;font-weight:600;line-height:1.2;
  letter-spacing:-.025em;color:var(--foreground);text-wrap:balance}
@media (min-width:640px){.ui-tsec-head h2{font-size:3rem}}
.ui-tsec-head p{margin:0;max-width:600px;font-size:1rem;font-weight:500;color:var(--muted-foreground)}
@media (min-width:640px){.ui-tsec-head p{font-size:1.25rem}}

.ui-tmarquee-wrap{position:relative;display:flex;width:100%;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden}
.ui-tmarquee{display:flex;width:100%;overflow:hidden;padding:.5rem 0;--gap:.75rem;gap:var(--gap);--duration:46s}
.ui-tmarquee-track{display:flex;flex-shrink:0;justify-content:space-around;gap:var(--gap);
  min-width:100%;animation:ui-marquee var(--duration) linear infinite}
.ui-tmarquee-wrap:hover .ui-tmarquee-track{animation-play-state:paused}
.ui-tcard{display:flex;flex-direction:column;flex-shrink:0;width:min(86vw,420px);max-width:420px;
  padding:1rem;text-align:start;border-radius:var(--radius);border:0;
  border-top:1px solid var(--ui-border);
  background:linear-gradient(to bottom,color-mix(in srgb,var(--muted) 50%,transparent),
                                       color-mix(in srgb,var(--muted) 10%,transparent));
  transition:background .3s var(--ease-smooth)}
@media (min-width:640px){.ui-tcard{padding:1.5rem}}
.ui-tcard:hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--muted) 85%,transparent),
                                                     color-mix(in srgb,var(--muted) 35%,transparent))}
.ui-tcard-top{display:flex;align-items:center;gap:.75rem}
.ui-tcard-av{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:3rem;height:3rem;border-radius:9999px;background:var(--background);
  border:1px solid var(--ui-border);
  font-size:.875rem;font-weight:600;color:var(--muted-foreground)}
.ui-tcard-id{display:flex;flex-direction:column;align-items:flex-start}
.ui-tcard-id h3{margin:0;font-size:1rem;font-weight:600;line-height:1;color:var(--foreground)}
.ui-tcard-id p{margin:.35rem 0 0;font-size:.875rem;color:var(--muted-foreground)}
.ui-tcard-b{margin:1rem 0 0;font-size:.875rem;line-height:1.6;color:var(--muted-foreground)}
@media (min-width:640px){.ui-tcard-b{font-size:1rem}}
.ui-tfade{pointer-events:none;position:absolute;top:0;bottom:0;width:33.333%;z-index:2;display:none}
@media (min-width:640px){.ui-tfade{display:block}}
.ui-tfade--l{left:0;background:linear-gradient(to right,var(--background),transparent)}
.ui-tfade--r{right:0;background:linear-gradient(to left,var(--background),transparent)}
@media (prefers-reduced-motion:reduce){
  .ui-tmarquee-track{animation:none;flex-wrap:wrap;justify-content:center}
  .ui-tmarquee-track[aria-hidden="true"]{display:none}
  .ui-tfade{display:none}
}

/* "Why a loan officer" carries no cards or images, so it needs more air than a
   standard band to read as a deliberate pause between the two tinted sections. */
.u-sec-why{padding-block:9rem}
@media (max-width:767px){.u-sec-why{padding-block:5.5rem}}

/* ---- Hero on a phone ----
   A 16:9 photograph in a ~1:2 box crops to almost nothing: at the default
   centre the loan officer and one client fall outside the frame entirely.
   Shift the frame right to keep the group, drop the copy to the bottom and
   swap the left-weighted scrim for a vertical one, so the faces stay in the
   light and the text sits over the darkest part of the picture. */
@media (max-width:767px){
  .ui-hero-media img{object-position:64% 50%}
  .ui-hero-card{align-items:flex-end}
  .ui-hero-card::after{background:linear-gradient(to bottom,
    rgba(9,10,16,.55) 0%,rgba(9,10,16,.38) 30%,rgba(9,10,16,.72) 72%,rgba(9,10,16,.90) 100%)}
  .ui-hero-body{padding-block:0 3rem}
  .ui-hero-acts{gap:.75rem}
  .ui-hero-acts .ui-btn{flex:1 1 100%;justify-content:center}
}

/* ============================================================
   LEAD PAGE — the consultation form is the whole page
   ============================================================ */
.u-sec-lead{padding-block:5rem 6rem}
@media (min-width:768px){.u-sec-lead{padding-block:7rem 8rem}}
.form-card--lead{max-width:36rem;margin-inline:auto;border-radius:var(--radius-xl);
  background:var(--card);box-shadow:0 1px 2px rgba(9,9,11,.04),0 10px 30px -12px rgba(9,9,11,.10)}
@media (min-width:768px){.form-card--lead{padding:2.5rem}}
.form-card--lead .form-error#err-consent{margin-left:2.6rem}
.ui-faq-narrow{max-width:46rem;margin-inline:auto}

/* ============================================================
   BOOKING (unlisted) + CONFIRMATION
   ============================================================ */
.u-sec-book,.u-sec-ty{padding-block:4rem 5rem}
@media (min-width:768px){.u-sec-book,.u-sec-ty{padding-block:6rem 7rem}}

.ui-book-eyebrow{margin:0 0 1rem;font-size:.6875rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-foreground)}

/* The calendar embed's frame. Sized so a typical month view fits without the
   iframe scrolling inside the page. */
.ui-cal{max-width:56rem;margin-inline:auto;border:1px solid var(--ui-border);
  border-radius:var(--radius-xl);background:var(--card);overflow:hidden;min-height:34rem;
  display:flex;align-items:center;justify-content:center}
.ui-cal iframe{width:100%;min-height:34rem;border:0;display:block}
.ui-cal-ph{display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:3rem 1.5rem;text-align:center;color:var(--muted-foreground)}
.ui-cal-ph b{font-size:1rem;color:var(--foreground)}
.ui-cal-ph span{max-width:32ch;font-size:.875rem;line-height:1.6}
.ui-cal-ph svg{color:color-mix(in srgb,var(--foreground) 35%,transparent)}

.ui-book-foot{display:grid;grid-template-columns:1fr;gap:2.5rem;max-width:56rem;
  margin:3.5rem auto 0}
@media (min-width:768px){.ui-book-foot{grid-template-columns:1fr 1fr;gap:3rem}}
.ui-book-foot h2{margin:0 0 1rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.ui-book-alt{margin:1.25rem 0 0;font-size:.875rem;color:var(--muted-foreground)}

.ui-ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.75rem}
.ui-ticks li{position:relative;padding-left:1.75rem;font-size:.9375rem;line-height:1.6;
  color:var(--muted-foreground)}
.ui-ticks li::before{content:"";position:absolute;left:0;top:.45rem;width:.95rem;height:.55rem;
  border-left:2px solid var(--primary);border-bottom:2px solid var(--primary);
  transform:rotate(-45deg)}

/* Scoped to the header so .ui-head--wide p (a general paragraph rule) can't reset it. */
.ui-head .ui-ty-badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 2rem;
  padding:.4rem .85rem;border-radius:9999px;font-size:.8125rem;font-weight:600;
  color:#166534;background:#DCFCE7}

/* Video slot: the 16:9 box and the frame live on the wrapper so the embed can
   be dropped in without carrying any styling of its own. */
.ui-video{position:relative;max-width:56rem;margin:3rem auto 0;aspect-ratio:16/9;
  overflow:hidden;border-radius:var(--radius-xl);border:1px solid var(--ui-border);
  background:color-mix(in srgb,var(--muted) 70%,var(--background))}
.ui-video iframe,.ui-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.ui-video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.6rem;text-align:center;padding:1.5rem;color:var(--muted-foreground)}
.ui-video-ph b{font-size:1rem;color:var(--foreground)}
.ui-video-note{font-size:.875rem}
.ui-video-play{display:flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;
  margin-bottom:.4rem;border-radius:9999px;background:var(--background);color:var(--primary);
  box-shadow:0 10px 24px -12px rgba(9,9,11,.4)}

.ui-expect{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:1rem;
  max-width:52rem;margin-inline:auto}
@media (min-width:768px){.ui-expect{grid-template-columns:repeat(2,1fr);gap:1.25rem}}
.ui-expect li{display:flex;gap:1rem;padding:1.5rem;border:1px solid var(--ui-border);
  border-radius:var(--radius-xl);background:var(--background)}
.ui-expect-n{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:2rem;height:2rem;border-radius:9999px;background:var(--primary);color:#fff;
  font-size:.875rem;font-weight:600}
.ui-expect li b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.01em;
  color:var(--foreground)}
.ui-expect li p{margin:.4rem 0 0;font-size:.9375rem;line-height:1.6;color:var(--muted-foreground)}
.ui-expect-acts{justify-content:center;margin-top:2.5rem}

/* ============================================================
   CHAT WIDGET (front end only — GoHighLevel replaces the script)
   Bottom LEFT, deliberately: GHL's own launcher defaults to bottom right,
   so the two will not sit on top of each other during the switchover.
   ============================================================ */
.ui-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.ui-chat{position:fixed;right:1.25rem;bottom:1.25rem;z-index:120;
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;pointer-events:none}
.ui-chat > *{pointer-events:auto}
.ui-chat-fab{position:relative;display:flex;align-items:center;justify-content:center;
  width:3.5rem;height:3.5rem;border:0;border-radius:9999px;cursor:pointer;
  background:var(--primary);color:#fff;
  box-shadow:0 10px 24px -8px rgba(58,82,217,.55),0 2px 6px rgba(9,9,11,.18);
  transition:transform .2s var(--ease-smooth),box-shadow .2s var(--ease-smooth)}
.ui-chat-fab:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(58,82,217,.6)}
/* Held back over a full-screen hero (see chat.js) so the launcher never
   covers the hero's own buttons. */
.ui-chat[data-ready="false"]{opacity:0;visibility:hidden;transform:translateY(8px)}
.ui-chat{transition:opacity .25s var(--ease-smooth),transform .25s var(--ease-smooth)}
.ui-chat-fab:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.ui-chat-i-close{display:none}
.ui-chat[data-open="true"] .ui-chat-i-open{display:none}
.ui-chat[data-open="true"] .ui-chat-i-close{display:block}
.ui-chat-badge{position:absolute;top:-.15rem;right:-.15rem;min-width:1.15rem;height:1.15rem;
  display:flex;align-items:center;justify-content:center;padding:0 .3rem;border-radius:9999px;
  background:#E5484D;color:#fff;font-size:.6875rem;font-weight:700;line-height:1}
.ui-chat-badge[hidden]{display:none}

.ui-chat-panel{order:-1;display:flex;flex-direction:column;overflow:hidden;
  width:min(23rem,calc(100vw - 2.5rem));height:min(30rem,calc(100vh - 8rem));
  border:1px solid var(--ui-border);border-radius:var(--radius-xl);background:var(--background);
  box-shadow:0 24px 48px -12px rgba(9,9,11,.28),0 8px 16px -8px rgba(9,9,11,.14);
  transform-origin:bottom left;
  animation:ui-chat-in .22s var(--ease-smooth)}
.ui-chat-panel[hidden]{display:none}
@keyframes ui-chat-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

.ui-chat-head{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;
  background:var(--primary);color:#fff}
.ui-chat-av{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:2.25rem;height:2.25rem;border-radius:9999px;background:rgba(255,255,255,.18);
  font-size:.625rem;font-weight:700;letter-spacing:.06em}
.ui-chat-id{display:flex;flex-direction:column;min-width:0;flex:1}
.ui-chat-id b{font-size:.9375rem;font-weight:600;line-height:1.2}
.ui-chat-status{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:rgba(255,255,255,.82)}
.ui-chat-status i{width:.4rem;height:.4rem;border-radius:9999px;background:#4ADE80}
.ui-chat-x{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  border:0;border-radius:.5rem;background:transparent;color:#fff;cursor:pointer}
.ui-chat-x:hover{background:rgba(255,255,255,.16)}
.ui-chat-x:focus-visible{outline:2px solid #fff;outline-offset:2px}

.ui-chat-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;
  background:color-mix(in srgb,var(--muted) 45%,var(--background))}
.ui-chat-msg{max-width:85%;padding:.6rem .85rem;border-radius:1rem;font-size:.875rem;
  line-height:1.5;white-space:pre-wrap}
.ui-chat-msg--bot{align-self:flex-start;border-bottom-left-radius:.3rem;
  background:var(--background);border:1px solid var(--ui-border);color:var(--foreground)}
.ui-chat-msg--me{align-self:flex-end;border-bottom-right-radius:.3rem;
  background:var(--primary);color:#fff}
.ui-chat-msg a{color:inherit;text-decoration:underline}
.ui-chat-msg--bot a{color:var(--primary)}
.ui-chat-typing{display:flex;gap:.25rem;align-self:flex-start;padding:.7rem .85rem;
  border-radius:1rem;border-bottom-left-radius:.3rem;background:var(--background);
  border:1px solid var(--ui-border)}
.ui-chat-typing i{width:.4rem;height:.4rem;border-radius:9999px;
  background:color-mix(in srgb,var(--foreground) 45%,transparent);
  animation:ui-chat-bounce 1.1s infinite}
.ui-chat-typing i:nth-child(2){animation-delay:.15s}
.ui-chat-typing i:nth-child(3){animation-delay:.3s}
@keyframes ui-chat-bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}

.ui-chat-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .75rem;
  background:color-mix(in srgb,var(--muted) 45%,var(--background))}
.ui-chat-chips:empty{display:none}
.ui-chat-chip{padding:.45rem .75rem;border:1px solid var(--primary);border-radius:9999px;
  background:var(--background);color:var(--primary);font:inherit;font-size:.8125rem;
  font-weight:500;cursor:pointer;line-height:1.3}
.ui-chat-chip:hover{background:color-mix(in srgb,var(--primary) 8%,var(--background))}
.ui-chat-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.ui-chat-form{display:flex;align-items:center;gap:.5rem;padding:.75rem;
  border-top:1px solid var(--ui-border);background:var(--background)}
.ui-chat-form input{flex:1;min-height:2.5rem;padding:.5rem .75rem;font:inherit;font-size:.875rem;
  border:1px solid var(--ui-border);border-radius:9999px;background:var(--background);
  color:var(--foreground)}
.ui-chat-form input:focus{outline:0;border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.ui-chat-send{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:2.5rem;height:2.5rem;border:0;border-radius:9999px;background:var(--primary);
  color:#fff;cursor:pointer}
.ui-chat-send:hover{background:#2F44BC}
.ui-chat-send:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Delete this line and its element when the real chat goes live. */
.ui-chat-foot{margin:0;padding:0 .9rem .75rem;background:var(--background);
  font-size:.6875rem;line-height:1.4;color:var(--muted-foreground);text-align:center}

@media (max-width:480px){
  .ui-chat{left:1rem;bottom:1rem;right:1rem}
  .ui-chat-panel{width:100%;height:min(70vh,30rem)}
}
@media (prefers-reduced-motion:reduce){
  .ui-chat-panel{animation:none}
  .ui-chat-typing i{animation:none}
  .ui-chat-fab:hover{transform:none}
}

/* ============================================================
   SECTION RHYTHM
   Every band carries 6rem top and bottom. Where a tint change marks
   the boundary that reads correctly. Where two untinted bands meet,
   96px + 96px of nothing reads as a hole, so the join collapses to a
   single unit. The hero and the inner-page hero are excluded: both
   already set their own spacing.
   ============================================================ */
main > section:not(.ui-hero):not(.page-hero):not(.u-sec--muted):not(.u-sec-stats):not(.band--mist)
  + section:not(.u-sec--muted):not(.u-sec-stats):not(.band--mist){padding-top:0}

/* The band directly under the full-bleed hero keeps its full top space. */
.ui-hero + section{padding-top:6rem}
@media (max-width:767px){
  main > section{padding-block:4rem}
  .ui-hero + section{padding-top:4rem}
  .u-sec-stats{padding-block:4rem}
}

/* ============================================================
   CONFIRMATION PAGE (thank-you.html)
   ============================================================ */
.ty-preview{max-width:46rem;margin:0 auto 1.5rem;padding:.6rem 1rem;border-radius:9999px;
  background:#FDF7E8;border:1px solid #F0DFB4;color:#7A5A12;font-size:.8125rem;font-weight:500;text-align:center}
.ty-preview[hidden]{display:none}

/* "Watch for our call" — the single biggest lever on pickup rate */
.ty-watch{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;max-width:46rem;margin:2.5rem auto 0;
  padding:1.25rem 1.5rem;border:1px solid var(--ui-border);border-radius:var(--radius-xl);background:#fff}
.ty-watch-ico{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2.5rem;height:2.5rem;
  border-radius:9999px;background:#EEF0FD;color:var(--primary)}
.ty-watch p{flex:1 1 16rem;margin:0;font-size:.9375rem;line-height:1.6;color:var(--muted-foreground)}
.ty-watch p b{color:var(--foreground)}
.ty-watch a:not(.ui-btn){color:var(--primary);font-weight:500;white-space:nowrap}
@media (max-width:540px){.ty-watch .ui-btn{width:100%}}

/* Priority card — sooner contact for leads that meet the criteria */
.ty-priority{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:56rem;margin:2rem auto 0;padding:1.75rem;
  border-radius:var(--radius-2xl);background:linear-gradient(135deg,#EEF0FD,#F7F8FF);border:1px solid #D9DEFA}
@media (min-width:768px){.ty-priority{grid-template-columns:1fr auto;align-items:center;gap:2.5rem;padding:2.25rem 2.5rem}}
.ty-priority[hidden]{display:none}
.ty-priority-eyebrow{margin:0 0 .5rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.ty-priority h2{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--foreground)}
@media (min-width:768px){.ty-priority h2{font-size:1.75rem}}
.ty-priority-body > p:not(.ty-priority-eyebrow){max-width:36rem;margin:.75rem 0 0;font-size:.9375rem;line-height:1.6;color:var(--muted-foreground)}
.ty-priority-acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.ty-priority-acts .ui-btn[hidden]{display:none}
@media (max-width:540px){.ty-priority-acts .ui-btn{width:100%}}
.ty-officer{display:flex;align-items:center;gap:1rem}
@media (min-width:768px){.ty-officer{flex-direction:column;gap:.75rem;text-align:center}}
.ty-officer img{flex-shrink:0;width:72px;height:90px;object-fit:cover;border-radius:var(--radius-xl)}
@media (min-width:768px){.ty-officer img{width:112px;height:140px}}
.ty-officer b{display:block;font-size:1rem;color:var(--foreground)}
.ty-officer div > span{display:block;font-size:.8125rem;line-height:1.5;color:var(--muted-foreground)}

/* What to expect on your first call */
.ty-prep{display:grid;grid-template-columns:1fr;gap:1rem;max-width:64rem;margin:0 auto}
@media (min-width:768px){.ty-prep{grid-template-columns:repeat(2,1fr);gap:1.25rem}}
.ty-prep-card{padding:1.75rem;border:1px solid var(--ui-border);border-radius:var(--radius-xl);background:#fff}
.ty-prep-n{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-bottom:1rem;
  border-radius:9999px;background:var(--primary);color:#fff;font-size:.875rem;font-weight:600}
.ty-prep-card h3{margin:0 0 1rem;font-size:1.125rem;font-weight:600;letter-spacing:-.01em;color:var(--foreground)}
.ty-prep-note{margin:1rem 0 0;font-size:.8125rem;font-style:italic;color:var(--muted-foreground)}

/* Testimonial wall — masonry via CSS columns, collapsed behind "Show more" */
.ty-wall{columns:1;column-gap:1.25rem}
@media (min-width:640px){.ty-wall{columns:2}}
@media (min-width:1024px){.ty-wall{columns:3}}
.ty-quote{display:flex;flex-direction:column;gap:1rem;break-inside:avoid;margin:0 0 1.25rem;padding:1.5rem;
  border:1px solid var(--ui-border);border-radius:var(--radius-xl);background:#fff}
.ty-quote-mark{color:#C9D0F7}
.ty-quote blockquote{margin:0;font-size:.9375rem;line-height:1.65;color:var(--muted-foreground)}
.ty-quote figcaption{display:flex;align-items:center;gap:.75rem}
.ty-quote-av{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:9999px;background:var(--muted)}
.ty-quote figcaption b{display:block;font-size:.9375rem;color:var(--foreground)}
.ty-quote figcaption b + span{font-size:.8125rem;color:var(--muted-foreground)}
.ty-wall-wrap{position:relative}
/* Height cap on a plain wrapper: capping a multi-column box spills columns sideways instead of clipping. */
.ty-wall-wrap.is-collapsible:not(.is-open) .ty-wall-clip{max-height:52rem;overflow:hidden}
.ty-wall-wrap.is-collapsible:not(.is-open)::after{content:"";position:absolute;left:0;right:0;bottom:4.25rem;height:10rem;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none}
.ty-wall-more{display:flex;justify-content:center;margin-top:1.5rem}
.ty-wall-more .ui-btn[hidden]{display:none}

.u-sec .draft.ui-faq-narrow{margin:0 auto 2rem}
.ty-foot{margin:2rem 0 0;text-align:center;font-size:.9375rem;color:var(--muted-foreground)}
.ty-foot a{color:var(--primary);font-weight:500}

/* Primary actions on the lead and confirmation pages meet the 44px touch target (WCAG 2.5.5). */
.step-nav .ui-btn,.ty-watch .ui-btn,.ty-priority-acts .ui-btn,.ty-wall-more .ui-btn{height:auto;min-height:2.75rem;padding-inline:1.25rem}
/* The confirmation headline is a full sentence; one step down from display size keeps it calm. */
.u-sec-ty .ui-head h1{font-size:clamp(1.875rem,1.4rem + 1.6vw,2.75rem);line-height:1.15;max-width:40rem;margin-inline:auto}

/* ============================================================
   MOBILE TYPE
   Section titles stay at one or two lines on a phone. The ch caps on
   .h-display/.h-section exist for wide screens; on a phone they only
   force extra breaks.
   ============================================================ */
@media (max-width:767px){
  .ui-head--wide h1,.page-hero .h-display,.h-display{font-size:1.875rem;line-height:1.12;max-inline-size:none}
  .ui-head h2,.ui-team-head h2,.ui-cloud-head h2,.ui-stats-wrap h2,.ui-tsec-head h2,.h-section{
    font-size:1.75rem;line-height:1.15;max-inline-size:none}
  .prose h2{font-size:1.25rem}
  .ui-hero-body h1{font-size:1.75rem;max-width:none}
  /* The 560px floor is for short desktop windows; on a phone it is taller
     than an iPhone SE's visible screen, so the hero would always run off it. */
  .ui-hero-card{min-height:max(420px,calc(100vh - var(--nav-h)));min-height:max(420px,calc(100svh - var(--nav-h)))}
}
@media (max-width:380px){
  .ui-hero-body h1{font-size:1.625rem}
}
@media (max-width:370px){
  .ui-hero-body h1{font-size:1.5rem}
  .ui-head--wide h1,.page-hero .h-display,.h-display{font-size:1.75rem}
  .ui-hero-lede{font-size:.9375rem}
  .ui-hero-lede{font-size:1rem}
  .ui-hero-eyebrow{margin-bottom:1rem}
}

/* Confirmation page: a short headline, the confirmation sentence as a lead line beneath it. */
.ui-head .ty-lead{margin:.75rem auto 0;max-width:36rem;font-size:1.25rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--foreground)}
@media (min-width:768px){.ui-head .ty-lead{font-size:1.375rem}}