/* Tokens extracted from the Fifth Dimension design-system bundle
   (~/Downloads/bisnow-material/_ds/...). Values are verbatim. */
:root {
  --charcoal-green-50: hsl(180 2% 91%);
  --charcoal-green-100: hsl(150 1% 73%);
  --charcoal-green-200: hsl(160 1% 60%);
  --charcoal-green-300: hsl(156 2% 41%);
  --charcoal-green-400: hsl(160 4% 30%);
  --charcoal-green-900: hsl(160 11% 5%);
  --ivory-lace-100: hsl(60 20% 99%);
  --ivory-lace-600: hsl(36 8% 88%);
  --saturated-orange-500: hsl(20 90% 43%);
  --saturated-orange-600: hsl(20 90% 39%);
  --sunset-orange-500: hsl(29 100% 63%);
  --orange: #F35202;
}

@font-face { font-family: "Groteska"; font-weight: 400; src: url(/fonts/Groteska-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Groteska"; font-weight: 500; src: url(/fonts/Groteska-Medium.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Groteska"; font-weight: 600; src: url(/fonts/Groteska-Bold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Kumbh Sans"; font-weight: 100 900; src: url(/fonts/KumbhSans-Variable.woff2) format("woff2-variations"); font-display: swap; }

* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--charcoal-green-900); font-family: "Kumbh Sans", system-ui, sans-serif; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--saturated-orange-600); }
img { max-width: 100%; }

.page { display: grid; min-height: 100vh; min-height: 100dvh; }

/* Source order is lede → form → pitch → offices, which IS the mobile order.
   The form is the point of this page, so only the logo, headline and one-line
   subheading precede it; the rest of the pitch, the client logos and the
   addresses all sit below. That keeps the form itself on the first screen for
   ad traffic instead of behind a scroll.

   On desktop the grid reassembles Becky's design: lede, pitch and offices
   stack down the left column and the form panel spans the full right edge.
   That media query lives BELOW these component rules, not above — it overrides
   .pitch's padding at the same specificity, so source order decides it. */

/* ---- Left column: lede (logo, headline, subheading) ---- */
.lede { display: flex; flex-direction: column; padding: clamp(28px, 5vw, 48px) clamp(20px, 5.5vw, 76px) 0; }
.lede__logo { height: clamp(36px, 4.5vw, 44px); width: auto; align-self: flex-start; }
.lede__text { padding: clamp(22px, 5vw, 56px) 0 clamp(22px, 3vw, 28px); }
h1 { margin: 0; font: 600 clamp(46px, 7.5vw, 78px)/1 "Groteska", sans-serif; letter-spacing: -0.03em; }
.lede__sub { margin: 16px 0 0; max-width: 46ch; font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6; color: var(--charcoal-green-400); text-wrap: pretty; }

/* ---- Left column: the rest of the pitch ---- */
.pitch { padding: clamp(28px, 5vw, 40px) clamp(20px, 5.5vw, 76px) 0; }
.pitch__intro { margin: 0; max-width: 60ch; font-size: 19px; line-height: 1.6; color: var(--charcoal-green-400); text-wrap: pretty; }

.trust { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--ivory-lace-600); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; font-size: clamp(17px, 2vw, 22px); line-height: 1.45; color: var(--charcoal-green-400); }
.trust__underline { position: relative; font-weight: 600; color: var(--charcoal-green-900); display: inline-block; }
.trust__underline svg { position: absolute; left: -2%; bottom: -9px; width: 104%; height: 11px; overflow: visible; }
.trust__logos { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: clamp(18px, 2.5vw, 28px); flex-wrap: wrap; }
.trust__logos img { width: auto; object-fit: contain; }

.offices { padding: clamp(28px, 4vw, 40px) clamp(20px, 5.5vw, 76px) clamp(28px, 4vw, 44px); }

/* ---- Desktop: reassemble the two-column design ---- */
@media (min-width: 1024px) {
  /* The 45fr floor is 440px, not the card's 560px max-width: a 560px floor
     would claim 55% of a 1024px viewport and invert the design's 55/45 split,
     squeezing the pitch column. The card simply narrows inside its panel.

     Rows 1 and 3 are equal fr, so the column's slack splits above and below
     the middle: the headline block bottom-aligns in row 1, the rest of the
     pitch follows immediately in row 2, and offices pins to the bottom of
     row 3. Headline and prose then read as one centred block, the way the
     approved design has them — hence .pitch's padding-top going to zero, so
     nothing wedges a gap into the middle of Becky's paragraph. */
  .page { grid-template-columns: minmax(0, 55fr) minmax(440px, 45fr); grid-template-rows: 1fr auto 1fr; }
  .lede { grid-column: 1; grid-row: 1; }
  .pitch { grid-column: 1; grid-row: 2; padding-top: 0; }
  .offices { grid-column: 1; grid-row: 3; align-self: end; }
  .form-panel { grid-column: 2; grid-row: 1 / 4; }
  .lede__text { margin-top: auto; }

  /* Five words where the contact page has two. h1's 7.5vw sizes off the
     viewport, but this grid gives the lede 55% of it, so from 1024px the type
     outgrows its own column and the headline breaks into four lines. Sized off
     the column instead, it holds the two the design wants. Below 1024px the
     lede is full width and the shared h1 rule already fits. */
  .lede__title--long { font-size: clamp(46px, 5.2vw, 78px); }
}
.offices__grid { display: flex; flex-wrap: wrap; gap: 24px 48px; font-size: 13px; line-height: 1.55; color: var(--charcoal-green-300); }
.offices__grid p { margin: 0; }
.offices__city { display: block; font-weight: 600; color: var(--charcoal-green-900); }
.offices__legal { margin: 18px 0 0; font-size: 12px; color: var(--charcoal-green-300); }
.offices__legal a { color: var(--charcoal-green-300); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Right column: form on texture ---- */
.form-panel { background-color: var(--orange); background-image: url(/img/orange-texture.jpg); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 72px) clamp(16px, 4vw, 56px); }
.card { width: 100%; max-width: 560px; background: var(--ivory-lace-100); border-radius: 16px; padding: clamp(26px, 4vw, 38px) clamp(20px, 3vw, 36px) clamp(24px, 3vw, 32px); box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.45); }
.card__title { margin: 0; font: 600 24px "Groteska", sans-serif; letter-spacing: -0.01em; }
.card__rule { margin: 22px 0 24px; border: 0; border-top: 1px solid var(--ivory-lace-600); }

form { display: flex; flex-direction: column; gap: 18px; }
/* Keep this rule: the flex rule above is an author style, which always beats
   the UA's [hidden]{display:none} in the cascade regardless of specificity —
   same bug already fixed for #consent-banner. Without it, submitting leaves
   the filled-in form visible behind the success message. */
#contact-form[hidden], #atlas-form[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; }
.field__optional { font-weight: 400; color: var(--charcoal-green-200); }
.field__req { font-weight: 400; color: var(--charcoal-green-200); }
/* Two fields on one line, as the source form pairs them. Collapses on narrow
   screens: 38px inputs side by side stop being tappable well before that. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* 479px, not 420px: two columns give the card a 420px min-content, so the page
   needs ~455px to lay out. Stacking any later than the width the pair actually
   needs scrolls the whole page sideways, which is what 421-477px did, and that
   band holds the 430px and 440px iPhone Pro Max viewports. */
@media (max-width: 479px) { .field-row { grid-template-columns: 1fr; } }
.field input { height: 38px; padding: 0 12px; font: 400 14px "Kumbh Sans", system-ui, sans-serif; color: var(--charcoal-green-900); background: #fff; border: 1px solid var(--ivory-lace-600); border-radius: 8px; }
.field input::placeholder { color: var(--charcoal-green-200); }
.field input:focus-visible { outline: none; border-color: var(--saturated-orange-500); box-shadow: 0 0 0 3px hsl(20 90% 43% / 0.25); }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Marketing-consent checkbox (/cre-atlas). Overrides .field's column flow so the box
   sits beside its label, and drops the 600-weight label styling: this is a sentence to
   read, not a field name to scan. */
.field--consent { flex-direction: row; align-items: flex-start; gap: 10px; }
.field--consent input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--saturated-orange-500); }
.field--consent label { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--charcoal-green-400); }

.btn-shimmer {
  height: 44px; border: 0; border-radius: 8px; cursor: pointer;
  font: 500 15px "Kumbh Sans", system-ui, sans-serif; color: #fff;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.15) 60%, transparent 100%),
    linear-gradient(to right, var(--saturated-orange-500), var(--sunset-orange-500));
  background-size: 200% 100%, 100% 100%;
  animation: shimmer-sparkle 4s ease-in-out infinite;
}
.btn-shimmer:hover { opacity: 0.9; }
.btn-shimmer:disabled { opacity: 0.6; cursor: default; }
.btn-shimmer:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(20 90% 43% / 0.35); }
@keyframes shimmer-sparkle { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }

.form-status { margin: 0; font-size: 13px; line-height: 1.5; }
.form-status[data-tone="error"] { color: #b3261e; }
.form-status:empty { display: none; }
.fine { margin: 0; font-size: 12px; line-height: 1.55; color: var(--charcoal-green-300); text-align: center; }
.fine a { text-decoration: underline; text-underline-offset: 2px; }
#form-success { text-align: center; }
#form-success h3 { margin: 0; font: 600 22px "Groteska", sans-serif; }
#form-success p { margin: 10px 0 0; font-size: 14px; color: var(--charcoal-green-400); }

/* ---- Consent banner (ported from solo-landing-pages, restyled to 5D DS) ---- */
#consent-banner { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 14px; z-index: 2147483000; pointer-events: none; }
/* Keep this rule: #id+attribute outranks the UA's [hidden]{display:none} which
   the flex rule above would otherwise defeat, leaving the banner stuck on
   screen (learned the hard way in solo-landing-pages). */
#consent-banner[hidden] { display: none; }
@media (min-width: 900px) { #consent-banner { padding: 20px 20px 24px; } }
.consent__card { pointer-events: auto; flex: 1; max-width: 1120px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 20px 26px; background: var(--ivory-lace-100); color: var(--charcoal-green-900); border: 1px solid var(--ivory-lace-600); border-top: 3px solid var(--orange); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); font-family: "Kumbh Sans", system-ui, sans-serif; animation: consent-rise 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); overflow-y: auto; }
@keyframes consent-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.consent__text { flex: 1 1 460px; min-width: 0; }
.consent__eyebrow { margin: 0 0 6px; font: 600 15px "Groteska", sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }
.consent__copy { margin: 0; font-size: 13px; line-height: 1.55; color: var(--charcoal-green-400); }
.consent__more { margin-top: 8px; font-size: 12px; color: var(--charcoal-green-300); }
.consent__more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.consent__more > summary::-webkit-details-marker { display: none; }
.consent__more > summary::after { content: "+"; font-size: 13px; line-height: 1; }
.consent__more[open] > summary::after { content: "\2013"; }
.consent__list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; line-height: 1.5; }
.consent__list b { font-weight: 600; color: var(--charcoal-green-900); }
.consent__note { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--ivory-lace-600); font-size: 11px; line-height: 1.5; color: var(--charcoal-green-200); }
/* Equal prominence (EDPB 03/2022): the pair stays identical in size, padding,
   and font-size — only the fill differs. Do not demote Decline. */
.consent__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consent__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 132px; padding: 13px 24px; border-radius: 8px; border: 2px solid var(--charcoal-green-900); background: transparent; color: var(--charcoal-green-900); font: 600 13px "Kumbh Sans", system-ui, sans-serif; line-height: 1; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; }
.consent__btn:hover { transform: translateY(-1px); }
.consent__btn:active { transform: translateY(0); }
.consent__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(20 90% 43% / 0.35); }
.consent__btn--accept { background: var(--saturated-orange-500); border-color: var(--saturated-orange-500); color: #fff; }
.consent__btn--accept:hover { background: var(--saturated-orange-600); border-color: var(--saturated-orange-600); }
.consent__btn--decline:hover { background: color-mix(in srgb, var(--charcoal-green-900) 6%, transparent); }
@media (max-width: 720px) {
  #consent-banner { padding: 10px; }
  .consent__card { gap: 12px; padding: 14px 16px 16px; }
  .consent__copy { font-size: 12px; }
  .consent__actions { width: 100%; }
  /* Full-width and equal on mobile — never a stacked pair where the top
     button is the easy one to reach. */
  .consent__btn { flex: 1 1 0; min-width: 0; padding: 12px; }
}

/* Short phones (SE-class, 667px and under) miss the submit button by ~20px
   with the default rhythm. Tightening only here brings the whole form onto the
   first screen without spending that space on roomier handsets. Keyed on
   height AND the stacked layout, so desktop is untouched. */
@media (max-width: 1023px) and (max-height: 720px) {
  .lede { padding-top: 22px; }
  .lede__text { padding: 18px 0; }
  .lede__sub { margin-top: 12px; }
  .form-panel { padding-top: 20px; }
  .card__rule { margin: 16px 0 18px; }
  form { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-shimmer { animation: none; }
  .consent__card { animation-duration: 0.01s; }
}