/* ==========================================================================
   RIA Advisory — CONTACT US  ·  2026-08-18

   Built on the approved product-page language so the two read as one site:
     · the same contained dark panel with a rounded-square badge top-left and
       the copy sitting at the BOTTOM of the panel (not centred),
     · the same white/sky card treatment, hairline borders and mono eyebrows,
     · the same -10px hover lift on interactive cards.

   Band map:
     1  HERO   dark panel · copy left, the three ways to reach us right
     2  FORM   white band · form card left, office/social/trust rail right

   Namespace: ct-  . Shared classes (.wrap, .section, .btn, .ind-crumb) come
   from round3-final.css / industries.css and are NOT overridden here.

   CLIENT RULES honoured: linear gradients only (no circles/blobs/radials —
   the social buttons and every glyph tile are rounded SQUARES), no "01/02"
   numbering, and motion is never wrapped in a reduced-motion query.

   HOUSE RULES: clamp()/calc() need SPACES around +/- ; grid/flex children
   that hold text need min-width: 0 .
   ========================================================================== */

.r3 main > section { scroll-margin-top: 138px; }

/* The global right-hand section rail is built from [data-sec] and is hidden
   on product pages by product-detail.css. This page carries only two
   sections, so a progress rail says nothing — and at ~1500px its pill lands
   on top of the form card. Same decision, declared here because this page
   does not load product-detail.css. */
.r3-rail { display: none; }

/* Shared eyebrow — mono, tracked, orange tick. */
.ct-eyebrow { display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono, monospace); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.ct-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--orange); }

/* ==========================================================================
   BAND 1 · HERO — the approved product-hero composition, reused
   Contained panel (never bled to the viewport edge), all four corners
   rounded, copy bottom-aligned, badge in the panel's top-left corner. The
   right column holds the three contact routes instead of a screenshot.
   ========================================================================== */
.ct-hero { position: relative; isolation: isolate; background: var(--white);
  padding-top: 30px; margin-bottom: 30px; color: var(--ink); }

/* Deliberately SHORTER than the product hero. There the panel had to stand
   as tall as a full dashboard screenshot; here the right column is three
   compact cards, so the same padding just left a hole. --ct-pad, the badge
   and the type are all a notch down, and the columns are centre-aligned
   rather than bottom-aligned — bottom alignment only earned its keep when a
   tall image set the panel height. */
.ct-hero__grid { position: relative; z-index: 1; overflow: hidden; display: grid;
  --ct-pad: clamp(1.25rem, .9rem + 1.5vw, 2.4rem);
  --ct-badge: 46px;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 0; align-items: center;
  border-radius: 24px; padding: 0;
  /* LIGHT panel (client request — the navy read as heavy on a contact page).
     A soft sky wash instead: pale blue bottom-left → near-white top-right,
     linear only. Text colours below flip to ink/navy to suit it. */
  background: linear-gradient(32deg, #DCE9F7 0%, #E8F1FA 38%, #F2F7FC 68%, #FBFDFE 100%);
  border: 1px solid rgba(29,65,121,.16);
  box-shadow: 0 30px 60px -46px rgba(11,24,48,.35); }
.ct-hero__grid > * { min-width: 0; }

/* Rounded SQUARE, never a circle — standing client rule.
   Navy gradient, not orange: on the light panel the orange/pink tile shouted
   over everything, and navy keeps the glyph tiles consistent with the rest
   of the site. */
.ct-hero__badge { position: absolute; z-index: 3;
  top: var(--ct-pad); left: var(--ct-pad);
  width: var(--ct-badge); height: var(--ct-badge);
  display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(150deg, var(--navy) 0%, #2f5f9e 100%);
  box-shadow: 0 16px 28px -14px rgba(29,65,121,.7);
  color: #fff; font-size: 1.05rem; }

/* Top padding must clear the absolutely-positioned badge: its own inset
   (--ct-pad) + the badge box + breathing room, or the eyebrow collides with
   it. Expressed as a sum, not a guessed multiplier, so it stays correct as
   --ct-pad scales. This is the panel's height floor — shrink the badge or
   --ct-pad to go shorter, never this rule alone. */
.ct-hero__copy { min-width: 0;
  padding: calc(var(--ct-pad) + var(--ct-badge) + 1rem) clamp(1rem, .7rem + 1.4vw, 2.2rem)
           var(--ct-pad) var(--ct-pad); }
.ct-hero__lbl { display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono, monospace); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.ct-hero__lbl::before { content: ""; width: 22px; height: 1px; background: var(--navy); opacity: .55; }
/* Thin and large, like the product hero — not the 800 display weight. */
.ct-hero h1 { color: var(--ink); font-weight: 300; font-size: clamp(2rem, 1.3rem + 2.1vw, 3.05rem);
  line-height: 1.06; letter-spacing: -.015em; margin: .75rem 0 .85rem; }
.ct-hero__lead { color: var(--slate); font-size: clamp(.92rem, .9rem + .18vw, 1rem);
  line-height: 1.62; max-width: 34rem; margin: 0 0 1.5rem; }
.ct-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
/* On a light panel the white pill disappears — solid navy instead. */
.ct-hero__cta .btn { padding: .82em 1.45em; font-size: .95rem; }
.ct-hero__cta .btn--accent { background: var(--navy); color: #fff;
  border: 1px solid var(--navy);
  box-shadow: 0 16px 30px -18px rgba(29,65,121,.8); }
.ct-hero__cta .btn--accent:hover { background: #2f5f9e; color: #fff;
  border-color: #2f5f9e;
  box-shadow: 0 18px 34px -16px rgba(29,65,121,.9); }

/* ---- the three ways to reach RIA ---------------------------------------- */
.ct-hero__ways { min-width: 0; align-self: center; display: grid; gap: .55rem;
  padding: var(--ct-pad) var(--ct-pad) var(--ct-pad) 0; }
/* White cards on the light panel — the translucent-white treatment only
   worked against navy. */
.ct-way { display: flex; align-items: center; gap: .8rem; min-width: 0;
  padding: .8rem .9rem; border-radius: 14px; color: var(--ink);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(29,65,121,.14);
  transform: translateY(0); will-change: transform;
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              background .3s ease, border-color .3s ease, box-shadow .4s ease; }
a.ct-way:hover { transform: translateY(-6px);
  background: #fff; border-color: var(--sky);
  box-shadow: 0 26px 44px -28px rgba(11,24,48,.45); }
/* Navy glyph tiles, not orange (client request). */
.ct-way__ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; font-size: .9rem; color: #fff;
  background: linear-gradient(150deg, var(--navy) 0%, #2f5f9e 100%);
  transition: transform .4s cubic-bezier(.22,1,.36,1); }
a.ct-way:hover .ct-way__ico { transform: scale(1.06); }
.ct-way__body { min-width: 0; display: grid; gap: .16rem; }
.ct-way__k { font-family: var(--font-mono, monospace); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate); }
.ct-way__body b { font-family: var(--font-display, sans-serif); font-weight: 700;
  font-size: .94rem; letter-spacing: -.014em; color: var(--ink);
  overflow-wrap: anywhere; }
.ct-way__sub { font-size: .78rem; line-height: 1.4; color: var(--slate); }
.ct-way__go { flex: none; margin-left: auto; font-size: .78rem; color: #9aa6b5;
  transition: transform .3s ease, color .3s ease; }
a.ct-way:hover .ct-way__go { transform: translateX(4px); color: var(--navy); }
.ct-way--static { cursor: default; }

@media (max-width: 1040px) {
  .ct-hero__grid { grid-template-columns: minmax(0, 1fr);
    padding: var(--ct-pad); gap: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
  .ct-hero__copy { padding: 0; align-self: start; }
  .ct-hero__ways { padding: 0; }
  .ct-hero__badge { display: none; }
}
@media (max-width: 620px) {
  .ct-hero__grid { border-radius: 18px; }
  .ct-way { padding: .85rem .9rem; }
}

/* ==========================================================================
   BAND 2 · FORM + RAIL
   Form card carries the weight on the left; the rail on the right holds the
   office, the social accounts and the two trust lines.
   ========================================================================== */
.ct-main { background: var(--white); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.4rem, 1rem + 2.2vw, 3rem); align-items: start; }
.ct-grid > * { min-width: 0; }

.ct-formcard { min-width: 0; border-radius: 22px;
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.6rem);
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 24px 50px -40px rgba(11,24,48,.45); }
.ct-formcard h2 { color: var(--ink); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.12; letter-spacing: -.03em; margin: .85rem 0 .55rem; }
.ct-formcard__sub { color: var(--slate); font-size: .96rem; line-height: 1.62;
  margin-bottom: clamp(1.4rem, 1.1rem + 1vw, 2rem); }

/* ---- the form ----------------------------------------------------------- */
.ct-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem clamp(.8rem, .6rem + .6vw, 1.2rem); }
.ct-field { min-width: 0; display: grid; gap: .4rem; }
.ct-field--wide { grid-column: 1 / -1; }
.ct-field label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.ct-field label span { color: var(--orange); }
.ct-field input,
.ct-field textarea { width: 100%; min-width: 0; font: inherit; font-size: .94rem;
  color: var(--ink); background: #FBFCFE;
  padding: .8rem .95rem; border-radius: 11px; border: 1px solid var(--line-2);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.ct-field textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: #9aa6b5; }
.ct-field input:focus,
.ct-field textarea:focus { outline: none; background: #fff; border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(77,159,215,.16); }
.ct-field input.is-bad,
.ct-field textarea.is-bad { border-color: #D64545; background: #FFFAFA; }
.ct-field input.is-bad:focus,
.ct-field textarea.is-bad:focus { box-shadow: 0 0 0 4px rgba(214,69,69,.14); }

.ct-err { display: block; min-height: 0; font-size: .76rem; line-height: 1.4; color: #C0392B; }
.ct-err:empty { display: none; }

/* Consent row — rounded-SQUARE checkbox, never a pill. */
.ct-consent { display: flex; align-items: flex-start; gap: .7rem; min-width: 0;
  font-size: .84rem; line-height: 1.6; color: var(--slate); cursor: pointer; }
.ct-consent input { flex: none; width: 18px; height: 18px; margin-top: .18rem;
  accent-color: var(--navy); border-radius: 5px; cursor: pointer; }
.ct-consent a { color: var(--navy); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; }
.ct-consent a:hover { color: var(--orange-600, var(--orange)); }

.ct-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: .3rem; }
.ct-actions .btn { padding: .9em 1.7em; }
.ct-status { min-width: 0; font-size: .86rem; line-height: 1.5; color: var(--slate); margin: 0; }
.ct-status:empty { display: none; }
.ct-status.is-ok { color: #1E7A46; font-weight: 600; }
.ct-status.is-bad { color: #C0392B; font-weight: 600; }

@media (max-width: 620px) { .ct-form { grid-template-columns: minmax(0, 1fr); } }

/* ---- right-hand rail ---------------------------------------------------- */
.ct-aside { min-width: 0; display: grid; gap: clamp(1rem, .8rem + .8vw, 1.4rem);
  position: sticky; top: 118px; }

.ct-office { min-width: 0; border-radius: 20px;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  background: linear-gradient(150deg, #EAF3FB 0%, #E0EDF9 58%, #F4F9FD 100%);
  border: 1px solid rgba(77,159,215,.3); }
.ct-office h3 { color: var(--ink); font-size: clamp(1.15rem, 1rem + .6vw, 1.42rem);
  letter-spacing: -.024em; line-height: 1.2; margin: .8rem 0 .8rem; }
.ct-office address { font-style: normal; font-size: .95rem; line-height: 1.75; color: #35455c; }
.ct-office__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  font-size: .86rem; font-weight: 600; color: var(--navy); }
.ct-office__link i { font-size: .7rem; color: var(--orange); transition: transform .3s ease; }
.ct-office__link:hover i { transform: translate(2px, -2px); }
.ct-office__meta { list-style: none; margin: 1.3rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid rgba(29,65,121,.18); display: grid; gap: .65rem; }
.ct-office__meta li { display: flex; align-items: center; gap: .7rem; min-width: 0;
  font-size: .92rem; }
.ct-office__meta i { flex: none; width: 15px; font-size: .8rem; color: var(--sky); }
.ct-office__meta a { color: var(--navy); font-weight: 600; overflow-wrap: anywhere;
  transition: color .25s ease; }
.ct-office__meta a:hover { color: var(--orange-600, var(--orange)); }

.ct-social { min-width: 0; }
.ct-social__row { display: flex; gap: .6rem; margin-top: 1rem; }
/* Rounded SQUARES — the client's no-circles rule applies to social too. */
.ct-social__row a { width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 13px; font-size: 1rem; color: var(--navy);
  background: var(--white); border: 1px solid var(--line-2);
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.22,1,.36,1), background .3s ease,
              color .3s ease, border-color .3s ease, box-shadow .35s ease; }
.ct-social__row a:hover { transform: translateY(-4px); color: #fff; border-color: transparent;
  background: linear-gradient(140deg, var(--navy) 0%, #2f5f9e 55%, var(--orange) 145%);
  box-shadow: 0 18px 34px -20px rgba(11,24,48,.6); }

.ct-trust { list-style: none; margin: 0; padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  display: grid; gap: .8rem; border-radius: 18px;
  background: var(--sky-tint, #F1F7FC); border: 1px solid var(--line); }
.ct-trust li { display: flex; gap: .7rem; align-items: flex-start; min-width: 0;
  font-size: .86rem; line-height: 1.55; color: var(--slate); }
.ct-trust i { flex: none; margin-top: .2rem; font-size: .82rem; color: var(--sky); }

@media (max-width: 980px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); }
  .ct-aside { position: static; }
}