/* ===========================================================================
   MLS Platform — shared styles
   The Caldwell Group  ×  Roebling Collective

   Two house brands, one platform. Rather than blend the palettes into
   something that belongs to neither, the chassis is built from what the two
   systems already share and each brand keeps its own contribution:

     - ONE type system. Prospectus Std over Gotham, DIN Condensed for figures.
       Real licensed faces, matching CaldwellOS exactly. Roebling's identity is
       carried by its mark and the brass, not by a second typeface -- two type
       systems on one page reads as two products stapled together.
     - Caldwell brings the field: navy #0c0f24 leads, royal blue acts.
     - Roebling brings the accent: brass rules, eyebrows and highlights.
     - Warm-neutral light surfaces sit between Roebling bone and Caldwell slate
       so neither mark looks like a guest.
     - Motion is unchanged from both systems: 220ms on the same easing curve.

   Both teams are brokered by eXp Realty; the brokered lockup lives in the
   compliance footer where the design system puts it.
   =========================================================================== */

/* --------------------------------------------------------------- typefaces */

@font-face { font-family: 'Prospectus Std'; src: url('/fonts/brand/ProspectusStdLt.otf')  format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Prospectus Std'; src: url('/fonts/brand/ProspectusStdReg.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Prospectus Std'; src: url('/fonts/brand/ProspectusStdSBd.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/brand/Gotham-Book.otf')   format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/brand/Gotham-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/brand/Gotham-Bold.otf')   format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'DIN Condensed'; src: url('/fonts/brand/DINCondensedBold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Engravers MT';  src: url('/fonts/brand/EngraversMTBold.ttf')  format('truetype'); font-weight: 700; font-display: swap; }

:root {
  /* Caldwell Group ------------------------------------------------------ */
  --cg-dark-blue:   #0c0f24;
  --cg-royal-blue:  #1b489b;
  --cg-muted-blue:  #699abd;
  --cg-light-grey:  #e2e3e4;
  --cg-dark-grey:   #58595b;

  /* Roebling Collective ------------------------------------------------- */
  --rc-ink:         #14110d;
  --rc-charcoal:    #2e2a22;
  --rc-brass:       #9a7b3f;   /* on light fields only */
  --rc-brass-lamp:  #c9a35c;   /* on dark fields only  */
  --rc-bone:        #f3efe4;

  /* Shared neutral ramp: warm enough for bone, cool enough for navy ------ */
  --n-0:   #ffffff;
  --n-25:  #faf9f7;
  --n-50:  #f6f4f0;
  --n-100: #efece6;
  --n-200: #e2ded5;
  --n-300: #cbc6bb;
  --n-600: #58595b;
  --blue-50:  #eef3fb;
  --blue-100: #d8e3f5;
  --blue-700: #163f89;

  /* Semantic ------------------------------------------------------------ */
  --surface:          var(--n-0);
  --surface-sunken:   var(--n-50);
  --surface-dark:     var(--cg-dark-blue);
  --text-strong:      var(--cg-dark-blue);
  --text-body:        #3c3a36;
  --text-muted:       var(--cg-dark-grey);
  --text-on-dark:     #ffffff;
  --text-on-dark-dim: #a7adbf;
  --border-subtle:    var(--n-200);
  --border-strong:    var(--n-300);
  --action:           var(--cg-royal-blue);
  --action-hover:     var(--blue-700);
  --accent:           var(--rc-brass);
  --accent-on-dark:   var(--rc-brass-lamp);
  --status-ok:      #1a7f4b;  --status-ok-bg:   #e9f4ee;
  --status-err:     #a8261f;  --status-err-bg:  #fbeceb;
  --status-warn:    #8a5a00;  --status-warn-bg: #fdf3e2;

  /* Type ---------------------------------------------------------------- */
  --font-display: 'Prospectus Std', Georgia, 'Times New Roman', serif;
  --font-body: 'Gotham', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-numeric: 'DIN Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-engravers: 'Engravers MT', Georgia, serif;
  --ls-wider: 0.12em;
  --ls-logo: 0.18em;

  /* Space, corners, depth ----------------------------------------------- */
  --container-max: 1160px;
  --section-pad-y: 96px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(12, 15, 36, 0.06);
  --shadow-md: 0 8px 28px rgba(12, 15, 36, 0.09);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--action);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a:hover { border-bottom-color: currentColor; }

/* -------------------------------------------------------------- structure */

/* Horizontal padding only, never the shorthand. .masthead__inner composes with
   .container and sets its own vertical padding; a `padding: 0 Npx` here -- or
   worse, in a later media query -- silently resets that to zero and squashes
   the header. */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}
.container--narrow { max-width: 760px; }

.section { padding: var(--section-pad-y) 0; }
.section--tight { padding: 56px 0; }
.section--sunken { background: var(--surface-sunken); }

/* ------------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.06; font-weight: 300; }
h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.16; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 600; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 18px; line-height: 1.62; color: var(--text-muted); max-width: 62ch; }

/* Eyebrows are brass. It is the one place Roebling's accent leads on every
   page, which is what keeps the platform from reading as Caldwell-only. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; }
.eyebrow--on-dark { color: var(--accent-on-dark); }

.fine { font-size: 12px; line-height: 1.6; color: var(--text-muted); }

/* ------------------------------------------------------- the dual lockup */

/* Logo x Logo x Logo at equal visual weight.
   The source SVGs shipped with a lot of dead space -- Roebling's artwork was
   614x102 inside an 860x180 box, so scaling it to match ink height also scaled
   ~29% of horizontal padding and blew a hole in the middle of the lockup. The
   viewBoxes are now cropped to the artwork, which means box height IS ink
   height and all three can simply share one value. Re-crop if a mark is ever
   re-exported. */
.lockup { display: flex; align-items: center; gap: 22px; }
.lockup__cg,
.lockup__rc,
.lockup__exp { height: 32px; width: auto; flex: none; }
.lockup__x {
  width: 1px; align-self: stretch; min-height: 30px;
  background: var(--border-strong); flex: none;
}
.lockup--on-dark .lockup__x { background: rgba(255, 255, 255, 0.26); }
.lockup--sm .lockup__cg,
.lockup--sm .lockup__rc,
.lockup--sm .lockup__exp { height: 26px; }

.masthead { border-bottom: 1px solid var(--border-subtle); background: var(--surface); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding-top: 24px; padding-bottom: 24px;   /* never the shorthand here either:
                                                it would wipe .container's gutters */
}
.masthead__links { display: flex; gap: 22px; align-items: center; }
.masthead__links a,
.masthead__link {
  font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--text-muted);
}
.masthead__links a:hover { color: var(--action); }

/* ------------------------------------------------------------------- hero */

/* The hero field is a sunburst rather than flat navy: rays fanning off a low
   left origin, which reads as a sunburst and as cables off a bridge tower --
   Roebling's mark -- at the same time. Royal blue and brass rays carry the two
   brands. A navy veil inside the SVG keeps the headline side quiet enough to
   read. Falls back to flat navy if the asset ever fails to load. */
.hero {
  position: relative;
  background-color: var(--surface-dark);
  background-image: url('/brand/sunburst.svg');
  background-size: cover;
  background-position: 50% 60%;
  background-repeat: no-repeat;
  color: var(--text-on-dark);
  padding: 92px 0 100px;
  overflow: hidden;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: var(--text-on-dark); max-width: 17ch; }
.hero .lede { color: var(--text-on-dark-dim); margin-top: 26px; }
.hero__actions { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ------------------------------------------------------------------ stats */

.statband {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
.statband__item { background: var(--surface); padding: 28px 24px; }
.stat__value {
  font-family: var(--font-numeric); font-weight: 700; font-size: 44px; line-height: 1;
  color: var(--cg-dark-blue); font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 10px; font-size: 10px; font-weight: 700;
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted);
}

/* ------------------------------------------------------------------ cards */

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.card--sunken { background: var(--surface-sunken); border-color: transparent; }
.card h3 { margin-bottom: 14px; }

/* Brass tick. Roebling's accent doing the small, repeated work. */
.ticklist { list-style: none; margin: 0; padding: 0; }
.ticklist li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 15px; color: var(--text-body);
}
.ticklist li:last-child { margin-bottom: 0; }
.ticklist li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 9px; height: 9px;
  border: 1.75px solid var(--accent); border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 28px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { border-bottom-color: transparent; }
.btn--primary { background: var(--action); color: #fff; }
.btn--primary:hover { background: var(--action-hover); }
.btn--onDark { background: #fff; color: var(--cg-dark-blue); }
.btn--onDark:hover { background: var(--rc-bone); }
.btn--ghost { background: transparent; color: var(--action); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--action); }
.btn--ghostOnDark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.38); }
.btn--ghostOnDark:hover { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--blue-100); }

/* ------------------------------------------------------------------ forms */

.form {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px;
}
.form__head { margin-bottom: 28px; }
.form__head h2 { margin-bottom: 10px; }

.field { margin-bottom: 20px; }
.field:last-of-type { margin-bottom: 0; }
.field label, .field > .label {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=date], .field textarea, .field select {
  width: 100%;
  font-family: inherit; font-size: 15px; color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--blue-100);
}
.field__help { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.field--mono input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; }
.optional { text-transform: none; letter-spacing: 0; font-weight: 400; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.checkfield {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px; background: var(--surface-sunken);
  border-radius: var(--radius-md);
  font-size: 13px; line-height: 1.55; color: var(--text-muted);
}
.checkfield input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--action); }

/* ---------------------------------------------------------------- message */

.msg {
  margin-top: 20px; padding: 14px 16px;
  border-radius: var(--radius-md); border-left: 3px solid transparent;
  font-size: 14px; display: none;
}
.msg.ok  { display: block; background: var(--status-ok-bg);  border-left-color: var(--status-ok);  color: var(--status-ok); }
.msg.err { display: block; background: var(--status-err-bg); border-left-color: var(--status-err); color: var(--status-err); }

/* ----------------------------------------------------------------- footer */

.sitefoot {
  background: var(--surface-dark); color: var(--text-on-dark-dim);
  padding: 56px 0 40px; font-size: 13px;
}
.sitefoot__top {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
  padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.sitefoot__links { display: flex; flex-wrap: wrap; gap: 22px; }
.sitefoot a { color: #fff; }
.sitefoot a:hover { color: var(--accent-on-dark); }
.sitefoot__legal { padding-top: 26px; font-size: 11px; line-height: 1.75; color: var(--text-on-dark-dim); }
.sitefoot__legal strong { color: #fff; font-weight: 500; }

/* ------------------------------------------------------------ skyline band */

/* The Cincinnati skyline plate from the brand drive. It is high-key and fades
   to white top and bottom, so it belongs on a light field, not over the navy.
   Anchored to the bottom of the band, full-bleed, with the copy sitting in the
   open sky above it. The Roebling Suspension Bridge is on the left edge of the
   plate, which is why the band is left-aligned: the copy sits over the bridge
   rather than hiding it. */
.skyline {
  position: relative;
  background: var(--surface);
  padding: 88px 0 0;
  overflow: hidden;
}
.skyline__art {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 44px;
  /* Cool the plate very slightly toward navy so it reads as part of this
     palette rather than a dropped-in grey photo. */
  filter: saturate(0) contrast(1.02) brightness(1.01);
  opacity: 0.92;
}
.skyline__copy { max-width: 54ch; }
.skyline__copy h2 { margin-bottom: 16px; }

@media (max-width: 700px) {
  .skyline { padding-top: 56px; }
  .skyline__art { margin-top: 28px; }
}

/* ------------------------------------------------------------ key modal */

/* The issued key is shown exactly once, here, and never emailed. Closing or
   reloading loses it for good -- that is the point -- so the copy is blunt
   about it and the dismiss button is deliberately a confirmation, not an X. */
.keymodal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12, 15, 36, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.keymodal[hidden] { display: none; }
.keymodal__card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  padding: 40px;
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
}
.keymodal__card h2 { margin-bottom: 10px; }
.keymodal__warn {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--status-warn-bg);
  border-left: 3px solid var(--status-warn);
  border-radius: var(--radius-md);
  padding: 14px 16px; margin: 20px 0;
  font-size: 13px; line-height: 1.55; color: var(--status-warn);
}
.keymodal__key {
  display: flex; gap: 10px; align-items: stretch; margin: 20px 0 8px;
}
.keymodal__key code {
  flex: 1; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; line-height: 1.5; color: var(--text-strong);
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  word-break: break-all;
  user-select: all;
}
.keymodal__copy { flex: none; white-space: nowrap; }
.keymodal__steps { margin: 24px 0 0; font-size: 14px; color: var(--text-body); }
.keymodal__steps ol { padding-left: 20px; margin: 10px 0 0; }
.keymodal__steps li { margin-bottom: 8px; }
.keymodal__steps li::marker { color: var(--accent); }
.keymodal__done { margin-top: 28px; width: 100%; }

@media (max-width: 560px) {
  .keymodal__card { padding: 26px; }
  .keymodal__key { flex-direction: column; }
}

/* --------------------------------------------------------------- longform */

.longform h2 { margin: 44px 0 14px; font-size: 25px; }
.longform h2:first-of-type { margin-top: 0; }
.longform p, .longform li { font-size: 16px; color: var(--text-body); }
.longform ul { padding-left: 22px; margin: 0 0 16px; }
.longform li { margin-bottom: 10px; }
.longform li::marker { color: var(--accent); }

/* ---------------------------------------------------------------- utility */

.hidden { display: none !important; }
.stack > * + * { margin-top: 16px; }

@media (max-width: 860px) {
  :root { --section-pad-y: 64px; }
  .container { padding-left: 28px; padding-right: 28px; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .lockup { gap: 16px; }
  .lockup__cg,
  .lockup__rc,
  .lockup__exp { height: 27px; }
}
/* Below this the three-mark lockup needs the whole bar to itself. */
@media (max-width: 860px) {
  .masthead__links a:last-child { display: none; }   /* keep one, drop the pair */
}
@media (max-width: 700px) {
  .masthead__link, .masthead__links { display: none; }
}

@media (max-width: 560px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .row { grid-template-columns: 1fr; }
  .form { padding: 24px; }
  .hero { padding: 60px 0 64px; }
  .lockup { gap: 12px; }
  .lockup__cg,
  .lockup__rc,
  .lockup__exp { height: 22px; }
}