/*
==================================================================
BOOK YOUR FREE CALL PAGE
Page-scoped styles for the demo/booking form. Reuses the shared
tokens from style.css (brand orange only, glassmorphism, flat fills).
==================================================================
*/

/* overflow-x, NOT overflow - the decorative glows only ever bleed sideways,
   and clipping the vertical axis here would cut off the country picker's popup
   when it opens near the bottom of the form. Same reasoning as hard rule 1 in
   CLAUDE.md: `hidden` clips more than anyone intends. */
.tt-bc-section {
  position: relative;
  overflow-x: clip;
  padding: calc(var(--tt-header-height, 96px) + var(--tt-fold-gap)) 0 5rem;
}

/* Dark hero band so the bright form card stands out. */
.tt-bc-section.tt-bc-dark {
  background:
    var(--tt-gradient-dark);
}

/* Right-side product visual */
.tt-bc-visual-wrap { position: relative; display: flex; justify-content: center; }
.tt-bc-visual-glow {
  position: absolute; inset: -8% -6% -8% -6%;
  background: none;
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.tt-bc-visual {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.6);
}
/* ---------- Proof stats (right column) ----------
   Moved here from the index contact section when that section was removed.
   The original card sat on a light peach panel with solid-orange numerals.
   On this dark band that combination loses contrast badly, so: the surface
   becomes dark glass (glass needs something behind it - it works here, and
   would not on a light page), and the numerals shift to the LIGHT end of the
   brand ramp. Solid --tt-primary on near-black is too dark to read as a
   headline figure. Hue is unchanged - still brand orange only. */
.tt-bc-stats-wrap { position: relative; }

.tt-bc-stats-card {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 3vw, 2.6rem);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

.tt-bc-stats-title {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.3;
  color: #fff;
  margin: 0 0 clamp(1.35rem, 2.4vw, 1.9rem);
}
.tt-bc-stats-title strong { font-weight: 800; }

.tt-bc-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
}

.tt-bc-stat-num {
  display: block;
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 800;
  font-size: clamp(1.95rem, 3.2vw, 2.85rem);
  line-height: 1;
  color: var(--tt-primary);
}
.tt-bc-stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}

.tt-bc-visual-caption {
  position: relative; z-index: 1;
  margin-top: 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}
.tt-bc-visual-caption strong { color: #fff; font-weight: 700; }

/* Ambient brand-orange glows (atmosphere, low opacity).
   Sized via `--g` in `min(<px>, <vw>)` rather than fixed px: a 620px blob is
   ambient at 1440px and a hard visible circle at 375px (pitfall 10). Offsets
   are expressed as a fraction of `--g` so the blob keeps the same bleed past
   the section edge at every width instead of sliding fully off-screen. At
   desktop `min()` resolves to the original px value, so nothing moves there. */
.tt-bc-glow {
  position: absolute;
  width: var(--g);
  height: var(--g);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.tt-bc-glow-a {
  --g: min(520px, 78vw);
  top: calc(var(--g) * -0.31); left: calc(var(--g) * -0.31);
  background: none;
}
.tt-bc-glow-b {
  --g: min(620px, 88vw);
  bottom: calc(var(--g) * -0.35); right: calc(var(--g) * -0.32);
  background: none;
}

.tt-bc-container { position: relative; z-index: 1; }

/* ---------- Left intro column ---------- */
.tt-bc-intro-eyebrow {
  display: inline-block;
  font-family: var(--tt-font-primary);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tt-primary);
  background: rgba(var(--tt-primary-rgb), 0.1);
  border: 1px solid rgba(var(--tt-primary-rgb), 0.22);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.1rem;
}
.tt-bc-intro-title {
  font-family: var(--tt-font-heading, var(--tt-font-primary));
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  color: var(--tt-dark);
  margin-bottom: 1.1rem;
}
.tt-bc-intro-title .tt-bc-accent {
  color: var(--tt-primary);
}
.tt-bc-intro-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--tt-muted, #5b6270);
  margin-bottom: 1.8rem;
  max-width: 34rem;
}

.tt-bc-points { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.9rem; }
.tt-bc-point { display: flex; align-items: flex-start; gap: 0.75rem; }
.tt-bc-point-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(var(--tt-primary-rgb), 0.1);
  border: 1px solid rgba(var(--tt-primary-rgb), 0.22);
  color: var(--tt-primary);
}
.tt-bc-point-text { color: var(--tt-dark); font-weight: 500; line-height: 1.5; }
.tt-bc-point-text span { display: block; font-weight: 400; font-size: 0.9rem; color: var(--tt-muted, #5b6270); }

.tt-bc-assurance {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--tt-primary-rgb), 0.14);
}
.tt-bc-assurance div { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--tt-muted, #5b6270); }
.tt-bc-assurance i { color: var(--tt-primary); }

/* ---------- Form card ---------- */
.tt-bc-form-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(var(--tt-primary-rgb), 0.14);
  border-radius: 22px;
  box-shadow: 0 34px 80px -28px rgba(0, 0, 0, 0.55), 0 6px 18px -8px rgba(0, 0, 0, 0.25);
  padding: 2.1rem;
  /* NO `overflow: hidden` here. It used to be, purely to clip the ::before
     accent bar to the card's rounded corners - but it also clipped the country
     picker's popup (.tt-cc-pop), which is absolutely positioned inside the card
     and is TALLER than the space below the phone field. The visible symptom was
     the flag list being cut off part-way down. The accent bar now rounds its own
     top corners instead, which needs no clipping. Anything absolutely positioned
     inside this card depends on this staying visible. */
}
/* Slim brand-orange accent bar along the top edge of the card. Still no
   overflow clip - see above - so the bar has to follow the card's rounded
   corners by itself.

   IT IS A BORDER-TOP ON A FULL-SIZE OVERLAY, NOT A 4px-TALL BAR, and that is
   the whole point. It was previously `height: 4px` + `border-radius: 22px 22px
   0 0`, which renders BROKEN: when a corner's vertical radius (22px) exceeds
   the box height (4px), CSS scales every radius down by f = 4/22, and on a box
   only 4px tall the resulting curve eats the bar's entire height at both ends.
   The line tapered to nothing before reaching the corners and read as a gap.
   A 4px bar simply cannot carry a 22px corner.

   So the overlay takes the card's real 22px radius and paints only its top
   border, which the browser arcs into the corners natively. `inset: -1px`
   aligns it to the card's BORDER box (absolute positioning resolves against
   the padding box, and the card has a 1px border), so the radii match exactly
   and the orange covers the card's own top border rather than sitting inside it.

   `pointer-events: none` is REQUIRED, not tidiness: this element now covers the
   entire card, so without it every field, the country picker and the Continue
   button become unclickable. */
.tt-bc-form-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  border-top: 4px solid var(--tt-gradient-primary);
  pointer-events: none;
}
.tt-bc-form-head { margin-bottom: 1.5rem; }
.tt-bc-form-title { font-weight: 800; font-size: 1.45rem; color: #1c1f26; margin-bottom: 0.35rem; }
.tt-bc-form-sub { font-size: 0.94rem; color: #5b6270; margin: 0; }

.tt-bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.1rem; }
.tt-bc-field { display: flex; flex-direction: column; }
.tt-bc-field.tt-bc-full { grid-column: 1 / -1; }

.tt-bc-label {
  font-family: var(--tt-font-primary);
  font-weight: 600;
  font-size: 0.85rem;
  color: #2a2e37;
  margin-bottom: 0.4rem;
}
.tt-bc-label .req { color: var(--tt-primary); margin-left: 2px; }

.tt-bc-input,
.tt-bc-select,
.tt-bc-textarea,
.tt-bc-multi-toggle {
  width: 100%;
  font-family: var(--tt-font-primary);
  font-size: 0.95rem;
  color: #1c1f26;
  background: #f1f3f6;
  border: 1.5px solid #cbd0d9;
  border-radius: 11px;
  padding: 0.78rem 0.95rem;
  box-shadow: inset 0 1px 2px rgba(16, 20, 28, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  appearance: none;
}
.tt-bc-input::placeholder,
.tt-bc-textarea::placeholder { color: #868c98; }

.tt-bc-input:focus,
.tt-bc-select:focus,
.tt-bc-textarea:focus,
.tt-bc-multi-toggle:focus-visible,
.tt-bc-multi.is-open .tt-bc-multi-toggle {
  outline: none;
  border-color: var(--tt-primary);
  box-shadow: 0 0 0 3px rgba(var(--tt-primary-rgb), 0.16);
  background: #fff;
}

.tt-bc-textarea { resize: vertical; min-height: 120px; }

/* Native select caret */
.tt-bc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F37021' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}

/* ---------- Module chip selector ---------- */
.tt-bc-modsel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.tt-bc-modsel-count { font-size: 0.82rem; font-weight: 600; color: var(--tt-primary); white-space: nowrap; }

.tt-bc-modsel-search { position: relative; display: flex; align-items: center; margin-bottom: 1rem; }
.tt-bc-modsel-search > i { position: absolute; left: 0.9rem; color: #868c98; font-size: 0.85rem; pointer-events: none; }
.tt-bc-modsel-input {
  width: 100%; padding: 0.65rem 0.9rem 0.65rem 2.3rem;
  border-radius: 10px; border: 1.5px solid #cbd0d9; background: #f1f3f6;
  font-family: var(--tt-font-primary); font-size: 0.9rem; color: #1c1f26;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.tt-bc-modsel-input::placeholder { color: #868c98; }
.tt-bc-modsel-input:focus { outline: none; border-color: var(--tt-primary); box-shadow: 0 0 0 3px rgba(var(--tt-primary-rgb), 0.14); background: #fff; }
.tt-bc-modsel-clear {
  position: absolute; right: 0.4rem;
  background: none; border: none; cursor: pointer;
  color: var(--tt-primary); font-weight: 600; font-size: 0.82rem; padding: 0.35rem 0.55rem;
}

.tt-bc-modsel-scroll { max-height: 300px; overflow-y: auto; padding-right: 0.25rem; }
.tt-bc-modsel-group[hidden] { display: none; }
.tt-bc-modsel-group + .tt-bc-modsel-group { margin-top: 1rem; }
.tt-bc-modsel-grouptitle {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tt-primary); margin: 0 0 0.6rem;
}
.tt-bc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tt-bc-chip { position: relative; margin: 0; cursor: pointer; }
.tt-bc-chip[hidden] { display: none; }
.tt-bc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tt-bc-chip-label {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem; border-radius: 999px;
  border: 1.5px solid #cbd0d9; background: #f4f5f7; color: #2a2e37;
  font-size: 0.85rem; font-weight: 500; line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tt-bc-chip-label::before {
  content: "\f067";                 /* fa plus */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: 0.68rem; color: #9aa0ab; transition: inherit;
}
.tt-bc-chip:hover .tt-bc-chip-label { border-color: var(--tt-primary); color: var(--tt-primary); }
.tt-bc-chip:hover .tt-bc-chip-label::before { color: var(--tt-primary); }
.tt-bc-chip input:checked + .tt-bc-chip-label {
  background: rgba(var(--tt-primary-rgb), 0.12);
  border-color: var(--tt-primary);
  color: var(--tt-accent-deep, #C1440E); font-weight: 600;
}
.tt-bc-chip input:checked + .tt-bc-chip-label::before { content: "\f00c"; color: var(--tt-primary); } /* fa check */
.tt-bc-chip input:focus-visible + .tt-bc-chip-label { box-shadow: 0 0 0 3px rgba(var(--tt-primary-rgb), 0.2); }

.tt-bc-modsel-empty { color: #868c98; font-size: 0.9rem; text-align: center; padding: 1rem 0 0.25rem; margin: 0; }

/* ---------- Submit + status ---------- */
.tt-bc-submit-row { margin-top: 1.6rem; }
.tt-bc-submit { width: 100%; justify-content: center; font-size: 1rem; padding: 0.95rem 1.5rem; }
.tt-bc-privacy { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--tt-muted, #5b6270); text-align: center; }
.tt-bc-privacy a { color: var(--tt-primary); text-decoration: none; }

/* ---------- Success popup ---------- */
.tt-bc-modal {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.tt-bc-modal[hidden] { display: none; }
.tt-bc-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(14, 16, 20, 0.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.tt-bc-modal-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px;
  background: #fff; border-radius: 20px;
  padding: 2.3rem 2rem;
  text-align: center;
  box-shadow: 0 34px 90px -22px rgba(0, 0, 0, 0.55);
  animation: ttBcModalIn 0.25s ease;
}
@keyframes ttBcModalIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.tt-bc-modal-icon {
  width: 66px; height: 66px; border-radius: 50%;
  margin: 0 auto 1.1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--tt-primary-rgb), 0.12);
  color: var(--tt-primary); font-size: 1.9rem;
}
.tt-bc-modal-title { font-weight: 800; font-size: 1.45rem; color: #1c1f26; margin: 0 0 0.5rem; }
.tt-bc-modal-text { color: #5b6270; font-size: 0.98rem; line-height: 1.55; margin: 0 0 1.5rem; }
.tt-bc-modal-btn { width: 100%; justify-content: center; }

/* Submitted form is locked (disabled) until refresh. */
.tt-bc-form-card form.is-submitted { opacity: 0.7; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .tt-bc-modal-card { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .tt-bc-section { padding-top: calc(var(--tt-header-height, 96px) + var(--tt-fold-gap)); }
}
/* Stack the paired fields on phones/small tablets so inputs stay comfortably wide. */
@media (max-width: 767.98px) {
  .tt-bc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .tt-bc-form-card { padding: 1.4rem; }
  .tt-bc-visual-caption { font-size: 0.88rem; }
}

/* The form card is intentionally a bright white surface in both light and dark
   themes (it sits on the dark hero band), so its internal text/controls use
   fixed dark values above and need no theme overrides. */

/* ---------- Stepper: progress bar ---------- */
.tt-bc-progress { margin: 0 0 1.7rem; }
.tt-bc-progress-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.tt-bc-progress-label { font-weight: 700; font-size: 0.95rem; color: #1c1f26; }
.tt-bc-progress-count { font-size: 0.82rem; font-weight: 600; color: var(--tt-primary); }
.tt-bc-progress-track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(var(--tt-primary-rgb), 0.14);
}
.tt-bc-progress-fill {
  height: 100%; width: 33.33%;
  border-radius: 999px;
  background: var(--tt-gradient-primary);
  transition: width 0.35s ease;
}

.tt-bc-step { display: none; }
.tt-bc-step.is-active { display: block; animation: ttBcStepIn 0.25s ease; }
@keyframes ttBcStepIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

.tt-bc-step-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.7rem; }
.tt-bc-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: 1px solid rgba(var(--tt-primary-rgb), 0.3);
  color: #2a2e37; border-radius: 11px; padding: 0.72rem 1.1rem; font-weight: 600;
  font-family: var(--tt-font-primary); font-size: 0.95rem; cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.tt-bc-back:hover { border-color: var(--tt-primary); color: var(--tt-primary); }
/* Both forward buttons sit compact on the right, with Back on the left.
   Submit used to be full-width, which made the last step look like a different
   form; matching Continue keeps the two steps visually identical. */
.tt-bc-step-actions .tt-bc-next,
.tt-bc-step-actions .tt-bc-submit {
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
  justify-content: center;
}
.tt-bc-privacy { margin-top: 0.9rem; }

/* Phones: Back and the forward button share the row rather than stacking into
   two full-width blocks - at two steps the pair reads better side by side.
   Back stays narrow, the primary action takes the remaining width. */
@media (max-width: 575.98px) {
  .tt-bc-step-actions { flex-wrap: nowrap; gap: 0.6rem; }
  .tt-bc-back {
    flex: 0 0 auto;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
  .tt-bc-step-actions .tt-bc-next,
  .tt-bc-step-actions .tt-bc-submit {
    flex: 1 1 auto;
    width: auto;
    margin-left: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Very narrow phones: Back collapses to just its arrow so the primary action
   keeps a readable label. (The field grid already goes single-column at 768px.) */
@media (max-width: 419.98px) {
  .tt-bc-back .tt-bc-back-text { display: none; }
  .tt-bc-back { gap: 0; }
}

.tt-bc-hint { font-weight: 500; color: #868c98; }

@media (prefers-reduced-motion: reduce) {
  .tt-bc-progress-fill { transition: none; }
  .tt-bc-step.is-active { animation: none; }
}


/*
==================================================================
OFFICES + MAPS
Moved in from the retired contact.html - this page doubles as the
site's contact page. The .tt-ct- prefix is kept from that page so
the markup did not have to be rewritten; read it as "contact
block", not "contact page".
==================================================================
*/
/* ==================================================================
   1. PAGE HEAD
   ================================================================== */
.tt-ct-head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
}
.tt-ct-title {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 800;
  font-size: var(--tt-fs-h1);
  color: var(--tt-dark);
  margin-bottom: 0.9rem;
}
/* Short brand rule under the title, as in the reference. */
.tt-ct-rule {
  display: block;
  width: 120px;
  height: 3px;
  margin: 0 auto 1.1rem;
  border-radius: 3px;
  background: var(--tt-gradient-primary);
}
.tt-ct-lead {
  font-size: var(--tt-fs-body-lg);
  line-height: 1.7;
  color: var(--tt-muted);
  margin: 0;
}

/* ==================================================================
   2. OFFICE BLOCKS
   ================================================================== */
.tt-ct-office + .tt-ct-office { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

.tt-ct-office-head {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}
.tt-ct-city {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 800;
  font-size: var(--tt-fs-h3);
  color: var(--tt-dark);
  margin: 0 0 0.2rem;
}
.tt-ct-role {
  font-size: var(--tt-fs-body-sm);
  font-weight: 700;
  color: var(--tt-primary);
  margin: 0;
}

.tt-ct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}
/* Alternate the map side down the page so the rhythm is not a stack of
   identical rows. */
.tt-ct-office:nth-child(even) .tt-ct-map { order: -1; }

/* ---------- Detail cards ---------- */
.tt-ct-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
  align-content: start;
}
/* The address runs longer than the rest - give it the full row. */
.tt-ct-item-wide { grid-column: 1 / -1; }

.tt-ct-item {
  display: flex;
  align-items: stretch;
  min-height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tt-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
              0 10px 26px -16px rgba(16, 24, 40, 0.2);
  text-decoration: none;
  transition: var(--tt-transition-standard);
}
.tt-ct-item:hover {
  border-color: rgba(var(--tt-primary-rgb), 0.42);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05),
              0 18px 34px -14px rgba(var(--tt-primary-rgb), 0.3);
  transform: translateY(-3px);
}

/* Solid orange icon column, as in the reference. */
.tt-ct-item-icon {
  flex: 0 0 auto;
  width: 62px;
  display: grid;
  place-items: center;
  background: var(--tt-gradient-primary);
  color: #fff;
  font-size: 1.25rem;
}
.tt-ct-item-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.95rem 1.1rem;
}
.tt-ct-item-label {
  display: block;
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: 1rem;
  font-weight: 700;
  color: var(--tt-dark);
  margin-bottom: 0.2rem;
}
.tt-ct-item-value {
  display: block;
  font-size: var(--tt-fs-body-sm);
  line-height: 1.6;
  color: var(--tt-muted);
  word-break: break-word;
}
a.tt-ct-item:hover .tt-ct-item-value { color: var(--tt-primary); }

/* ---------- Map ---------- */
.tt-ct-map {
  position: relative;
  min-height: 300px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--tt-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
              0 10px 26px -16px rgba(16, 24, 40, 0.2);
  background: rgba(var(--tt-dark-rgb), 0.05);
}
.tt-ct-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
}


/* ---------- Offices: responsive ---------- */
@media (max-width: 991.98px) {
  .tt-ct-grid { grid-template-columns: minmax(0, 1fr); }
  .tt-ct-office:nth-child(even) .tt-ct-map { order: 0; }
  .tt-ct-map { min-height: 260px; }
  .tt-ct-map iframe { min-height: 260px; }
}

@media (max-width: 575.98px) {
  .tt-ct-details { grid-template-columns: minmax(0, 1fr); }
  .tt-ct-item-icon { width: 54px; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-ct-item { transition: none; }
  .tt-ct-item:hover { transform: none; }
}


/* --- Honeypot + send failure (added with the Web3Forms wiring) ----------- */

/* Off-screen rather than display:none - some spam bots skip fields that never
   render, which would defeat the purpose of the honeypot. */
.tt-bc-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Shown only when Web3Forms did not accept the submission. The form must never
   claim a delivery that did not happen. */
.tt-bc-senderror {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 11px;
  background: rgba(220, 38, 38, 0.06);
  font-family: var(--tt-font-primary);
  font-size: var(--tt-fs-body-sm);
  line-height: 1.55;
  color: #B91C1C;
}
.tt-bc-senderror[hidden] { display: none; }
.tt-bc-senderror i { margin-top: 0.2em; }
.tt-bc-senderror a { color: #B91C1C; font-weight: 700; text-decoration: underline; }
/* Repeat-submit notice. Amber, not red: nothing failed, we simply already have
   this visitor's details. */
.tt-bc-formerror {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(245, 158, 11, 0.42);
  border-radius: 11px;
  background: rgba(245, 158, 11, 0.09);
  font-family: var(--tt-font-primary);
  font-size: var(--tt-fs-body-sm);
  line-height: 1.55;
  color: #92400E;
}
.tt-bc-formerror[hidden] { display: none; }
/* The phone country selector that used to live here moved to
   assets/css/phone-country.css when become-a-partner.html started using it
   too. This page still links it; do not copy the rules back.
   Component: assets/js/phone-country.js + assets/js/country-flags.js. */