/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/react-international-phone/dist/index.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
.react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;-moz-appearance:button;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled,.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-country-selector-button--disabled{cursor:auto}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/contact.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================================
   Contact page
   -------------------------------------------------------------------------
   Loaded only by app/contact/page.js. Everything here is namespaced under a
   c-/o- prefix or .contactPage so it cannot leak into the shared sheets.

   Motion inputs, and which hook writes them:
     --ax --ay       useAurora     pointer position over the hero (0–1)
     --bp --bpx      useBannerReveal  banner opening + parallax (0–1)
     --px --py       useSpotlight  pointer position over a card (0–1)
     --tx --ty       useSpotlight  card tilt, in deg
     --mgx --mgy     useMagnetic   magnet offset, in px

   Every one of them has a sane default declared next to its consumer, so the
   page renders correctly with JavaScript disabled or motion reduced.
   ========================================================================= */

.contactPage {
  background: #051b41;
}
.ribbon__flash{display: none;}
/* =========================================================================
   Hero
   ========================================================================= */

.cHero {
  --ax: 0.5;
  --ay: 0.32;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 6rem));
  color: #fff;
}

/* Aurora + grain are shared primitives — see "Motion primitives" in
   globals.css. The hero only has to say where the field sits. */
.cHero > .fxField {
  z-index: -1;
}

/* --- Ticker -------------------------------------------------------------- */

.cTicker {
  position: absolute;
  top: calc(var(--header-h) + 0.5rem);
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.cTicker__track {
  display: flex;
  width: max-content;
  animation: cTickerRun 16s linear infinite; /* was 34s */
}

.cTicker__run {
  display: flex;
  align-items: center;
}

.cTicker__item {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding-inline: 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.11);
}

.cTicker__dot {
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: rgba(248, 166, 25, 0.35);
}

@keyframes cTickerRun {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* --- Headline: line-by-line mask wipe ----------------------------------- */

.cHero__inner {
  position: relative;
  text-align: center;
  padding-bottom:0;
}

.cHero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Each line is its own block so .maskUp can wipe them up on staggered
   delays — same structure as .aboutHero__title. */
.cHero__title > span {
  display: block;
}

.cHero__title em {
  font-style: normal;
  color: var(--gold-500);   padding-left: 10px;
}

/* Rises in just behind the title's mask wipe. `both` matters: it holds the
   from-state during the delay and, more importantly, holds the to-state after
   the run, so the line can never be left invisible. */
/* Same rule-lined label as .aboutHero__label on the About page — keep the two
   blocks in sync if that one changes. */
.cHero__sub {
  display: inline-block;
  margin-top: clamp(1rem, 2.4vw, 1.8rem);
  padding: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* balances the trailing tracking space */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  animation: cSubIn 0.8s var(--ease) 0.42s both;
}

@keyframes cSubIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   Banner
   -------------------------------------------------------------------------
   Uses the shared .bannerOpen primitive — see "Banner opening" in globals.css
   for the mechanics and for why the height is set here rather than derived
   from an aspect-ratio. This block only carries what is specific to Contact:
   the banner's height, its scrim, and the caption on top.
   ========================================================================= */

.cReveal {
 
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* The comp's crop measured at the resting width, so the banner matches the
   design when it arrives and simply widens from there. Held constant through
   the opening, so the page below stays put. */
.cBanner {
  height: clamp(320px, 38.5vw, 730px);
  margin: 0;
}

.cBanner__img {
  object-position: center 38%;
}

/* Bottom scrim so the caption stays legible on any photograph. */
.cBanner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(4, 20, 45, 0.8), transparent 44%);
}

/* Caption: two lines set in the condensed display face, bottom-left.

   Colour runs inside a line rather than per line — "Thoraipakkam's" and
   "Luxury Address" are gold with "Most Signature" white between them, and
   that split falls in the middle of line one. */
.cBanner__caption {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2.75rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.2vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* Block, so each line wipes up behind the .maskUp clip on its own delay —
   and so the two lines break exactly where the comp breaks them rather than
   wherever the card width happens to wrap them. */
.cBanner__line {
  display: block;
  white-space: nowrap;
}

.cBanner__run--gold {
  color: var(--gold-500);
}

@media (max-width: 700px) {
  .cBanner {
    height: clamp(280px, 62vw, 420px);
  }

  /* The lines are nowrap, so on a narrow card the type has to come down
     rather than reflow — reflowing would break the comp's two-line split. */
  .cBanner__caption {
    font-size: clamp(1.15rem, 6.2vw, 1.75rem);
  }
}

/* =========================================================================
   Office cards
   -------------------------------------------------------------------------
   Flat on the navy, per the comp — there is no card surface here, so no
   panel, border, gloss or tilt. The landmark photograph sits at roughly
   two-thirds of the column width with the copy ranged left beneath it, and
   the type carries the hierarchy instead of a container.
   ========================================================================= */

.offices {
  padding-block: clamp(2.5rem, 6vw, 6rem);
  color: #fff;
}

/* Stacked default. The row alignment below needs a known column count, so it
   is layered on at the breakpoint rather than assumed here. */
.offices__grid {
  display: grid;
  grid-gap: clamp(2rem, 4vw, 3.5rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.oCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --- Row alignment across the three columns ------------------------------
   Each office has a different number of address lines, so left to itself
   every block below the address sits at a different height and the Google
   Maps links stagger.

   subgrid fixes it properly: the card adopts the grid's rows instead of
   creating its own, so plate, chip, address, phone, email and map each share
   one row across all three columns and line up whatever the copy does. The
   grid's own row-gap is zero — the spacing comes from the margins on the
   children, which the row heights absorb.

   Six rows, one per child of .oCard. Adding a child means bumping both
   numbers. Only applied once three columns are actually side by side; when
   the cards stack there is nothing to align them to.
   ------------------------------------------------------------------------ */
@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .offices__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(6, auto);
      row-gap: 0;
    }

    .oCard {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 6;
      justify-items: start;
      align-content: start;
    }
  }

  /* Without subgrid the rows cannot be shared, so at least pin the maps link
     to the bottom of the card — the grid stretches all three to the same
     height, so bottom-aligning it lines the three links up. */
  @supports not (grid-template-rows: subgrid) {
    .oCard {
      height: 100%;
    }

    .oCard__map {
      margin-top: auto;
      padding-top: clamp(1.8rem, 3vw, 3rem);
    }
  }
}

/* --- Plate --------------------------------------------------------------- */

.oCard__plate {
  position: relative;
  overflow: hidden;
  width: min(100%, 320px);
  aspect-ratio: 3 / 2;
  border-radius: 12px;
}

.oCard__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.oCard:hover .oCard__plate img {
  transform: scale(1.05);
}

/* Fallback plate for cities with no landmark photograph yet — set `image` in
   data/contact.js and this is replaced by the real thing. */
.oCard__plate--fallback {
  display: grid;
  place-items: center;
  background: var(--grad-navy-panel);
}

.oCard__plate--fallback::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(248, 166, 25, 0.16) 60deg,
    transparent 140deg,
    rgba(47, 107, 163, 0.3) 220deg,
    transparent 320deg
  );
  animation: cSweep 14s linear infinite;
}

@keyframes cSweep {
  to {
    transform: rotate(1turn);
  }
}

.oCard__monogram {
  position: relative;
  font-family: var(--font-display);
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5);
}

/* A hairline "skyline" under the monogram — bars of differing height, drawn
   with a repeating gradient rather than markup. */
.oCard__skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.14) 0 6px,
    transparent 6px 16px
  );
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
}

/* --- City chip ----------------------------------------------------------- */

.oCard__chip {
  margin-top: clamp(1.4rem, 2.2vw, 2rem);
  padding: 0.5em 1.35em;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-pill);
  font-size: clamp(0.66rem, 0.6vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.oCard:hover .oCard__chip {
  background: var(--gold-500);
  color: var(--navy-900);
}

/* --- Copy ---------------------------------------------------------------- */

.oCard__address {
  margin-top: clamp(1rem, 1.6vw, 1.5rem);
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
}

.oCard__address span {
  display: block;
}

.oCard__line {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.6rem);
  font-size: clamp(1rem, 1.15vw, 1.35rem);
  color: #fff;
}

/* The email block follows the phone one closely — they read as a pair, so it
   gets a tighter gap than the one that opens the group. */
.oCard__line + .oCard__line {
  margin-top: clamp(0.9rem, 1.5vw, 1.5rem);
}

.oCard__label {
font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7cadde;
}

/* Link whose label slides up and is replaced by a gold copy of itself. The
   duplicate comes from data-text, so there is no second node to keep in sync
   and screen readers only ever hear the label once. */
.linkSlide {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.linkSlide > span {
  position: relative;
  display: inline-block;
  transition: transform 0.42s var(--ease);
}

.linkSlide > span::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--gold-500);
}

.linkSlide:hover > span,
.linkSlide:focus-visible > span {
  transform: translateY(-100%);
}

/* --- Maps link ----------------------------------------------------------- */

.oCard__map {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.8rem, 3vw, 3rem);
  font-size: clamp(0.72rem, 0.7vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #fff;
  transition: color 0.42s var(--ease);
}

.oCard__map svg {
  width: clamp(30px, 2.4vw, 42px);
  height: clamp(30px, 2.4vw, 42px);
  flex: none;
  color: #6f97c2;
  transition: transform 0.42s var(--ease), color 0.42s var(--ease);
}

.oCard__map:hover {
  color: #f8a619;
}

.oCard__map:hover svg {
  transform: translate(3px, -3px);
  color: var(--gold-500);
}

/* =========================================================================
   Form
   ========================================================================= */

.cForm {
  padding-block: clamp(3rem, 8vw, 7rem);
  background: var(--paper);
  color: var(--ink-900);
}

.cForm__inner {
  display: grid;
  grid-gap: clamp(2rem, 4vw, 3.5rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
}

.cForm__aside {
  text-align: right;
}

 h2.cForm__heading {
    font-weight: 400;
    font-size: 80px !important;
    text-transform: capitalize;
    line-height: 0.8;
    letter-spacing: -2px;
}

.cForm__heading span {
  display: block;
}

/* Airy leading and near-black, ranged right under the heading — the comp
   gives this paragraph a lot more room than body copy elsewhere. */
.cForm__blurb {
  margin-top: 17px;
  margin-left: auto;
  max-width: 32ch;
  font-size: clamp(0.9rem, 0.95vw, 1.12rem);
  line-height: 1.9;
  color: var(--ink-900);
}

/* --- Panel: the form and the success state are stacked, and cross-fade --- */

.cForm__panel {
  position: relative;
}

.cForm__grid {
  display: grid;
  grid-gap: clamp(1.5rem, 2vw, 1.9rem) clamp(0.9rem, 1.6vw, 1.6rem);
  gap: clamp(1.5rem, 2vw, 1.9rem) clamp(0.9rem, 1.6vw, 1.6rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}

.cForm__panel.is-done .cForm__grid {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.cForm__grid.is-shake {
  animation: cShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes cShake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* --- Field ---------------------------------------------------------------
   A filled navy box with a hairline gold border. The label sits above the
   input at all times rather than floating up out of it — the comp shows both
   the label and the placeholder together, so there is nothing to float.
   ------------------------------------------------------------------------ */

.cField {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 9px 13px;
  border: 1px solid var(--gold-500);
  border-radius: 8px;
  background: #051e3f;
  color: #fff;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  justify-content: center;
  height: 66px;
}

.cForm__panel  .cField--full {
  height: 66px;
}

.cForm__panel .cField:has(textarea) {
  height: 100px;
  justify-content: flex-start;
}

.cField textarea.cField__input {
  flex: 1 1;
  resize: none;
  line-height: 1.4;
}

.cField .rip {
  --react-international-phone-flag-width: 18px;
  --react-international-phone-flag-height: 18px;
  align-items: center;
}

.cField .rip .react-international-phone-country-selector-button {
  padding: 0.1rem 0.35rem;
  min-height: 0;
}

.cField--full {
  grid-column: 1 / -1;
}

.cField:focus-within {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(248, 166, 25, 0.22);
}

.cField.is-error {
  border-color: #e5322d;
  box-shadow: 0 0 0 3px rgba(229, 50, 45, 0.18);
}

.cField__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.cField__label i {
  font-style: normal;
  color: #e5322d;
}

.cField__input {
  width: 100%;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: clamp(0.8rem, 0.86vw, 0.95rem);
  line-height: 1.3;
  resize: vertical;
}

.cField__input:focus {
  outline: none;
}

.cField__input::placeholder {
  color: #94a5bd;
  transition: opacity 0.3s var(--ease);
}

.cField:focus-within .cField__input::placeholder {
  opacity: 0.5;
}

.cField__err {
  position: absolute;
  left: 2px;
  top: 100%;
  margin-top: 3px;
  font-size: 0.68rem;
  line-height: 1.2;
  color: #ff9b9b;
}

.cField__err:empty {
  display: none;
}

.cForm__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
}

.cSubmit {
  --mgx: 0px;
  --mgy: 0px;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  overflow: hidden;
  margin-top: clamp(0.4rem, 1vw, 1rem);
  padding: 1.05em 3.2em;
  border-radius: var(--radius-pill);
  background-color: #0f3d6a;
  background-image: linear-gradient(to right, #f6800e, #f9a51a, #f6800e);
  color: #fff;
  font-size: clamp(0.72rem, 0.72vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Same orange glow as the site's solid CTA (.btn--solid). */
  box-shadow: 0 14px 30px rgba(246, 128, 14, 0.32);
  transform: translate3d(var(--mgx), var(--mgy), 0);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
    letter-spacing 0.45s var(--ease);
}

/* Hover is the site's standard button language, the same as .exbloretwoBtn
   and .btn--duo in globals.css: a sheen sweeps the pill, the tracking opens
   up, and the whole thing lifts.

   The lift has to be folded into the magnet's translate rather than added as
   a second transform — one property, so the -2px is written into the Y term
   alongside --mgy instead of overwriting it.

   Snappier easing while the magnet is engaged; the slower one on the base
   rule handles the spring back when the pointer leaves. */
.cSubmit:hover {
  transition: transform 0.1s linear, box-shadow 0.35s var(--ease),
    letter-spacing 0.45s var(--ease);
  letter-spacing: 0.16em;
  transform: translate3d(var(--mgx), calc(var(--mgy) - 2px), 0);
  box-shadow: 0 18px 38px rgba(246, 128, 14, 0.45);
}

/* The sheen. Same gradient and timing as the shared buttons, so the pill
   reads as part of the same family. */
.cSubmit__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease);
}

.cSubmit:hover .cSubmit__fill {
  transform: translateX(100%);
}

.cSubmit__label,
.cSubmit__dots {
  position: relative;
  z-index: 1;
}

.cSubmit__dots {
  display: none;
  gap: 4px;
}

.cSubmit.is-sending .cSubmit__dots {
  display: inline-flex;
}

.cSubmit__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: cPulse 0.9s var(--ease) infinite;
}

.cSubmit__dots i:nth-child(2) { animation-delay: 0.15s; }
.cSubmit__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes cPulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

.cSubmit:disabled {
  cursor: progress;
}

/* --- Success ------------------------------------------------------------- */

.cDone {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-3);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease) 0.15s, transform 0.6s var(--ease) 0.15s;
}

.cForm__panel.is-done .cDone {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cDone__mark {
  width: 62px;
  height: 62px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cDone__ring {
  stroke: var(--gold-500);
  stroke-width: 2;
  /* 2πr for r = 23. Set as both dash and offset so the circle is invisible
     until the animation runs it back to zero. */
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
}

.cDone__tick {
  stroke: var(--navy-500);
  stroke-width: 3.4;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

.cForm__panel.is-done .cDone__ring {
  animation: cDraw 0.7s var(--ease) 0.1s forwards;
}

.cForm__panel.is-done .cDone__tick {
  animation: cDraw 0.4s var(--ease) 0.6s forwards;
}

@keyframes cDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.cDone__title {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--navy-500);
}

.cDone__body {
  max-width: 46ch;
  font-size: var(--fs-body-sm);
  color: var(--ink-500);
}

.cDone__again {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--navy-500);
}



/* =========================================================================
   Responsive
   ========================================================================= */

   @media (max-width: 1300px) {
  .oCard__address{font-size: 14px;}
    .cField__label {  font-size: 11px;}
    .cField__input {  font-size: 12.5px;}
}


@media (max-width: 900px) {
  .cForm__inner {
    grid-template-columns: 1fr;
  }

  .cForm__aside {
    text-align: left;
  }

  .cForm__blurb {
    margin-left: 0;
  }
  h2.cForm__heading {  font-size:60px !important;}
  .cField__label {
    font-size: 14px;}
}

@media (max-width: 620px) {
  .cForm__grid {
    grid-template-columns: 1fr;
  }
h2.cForm__heading span{display: inline; padding-right:5px;}
  .cTicker {
    display: none;
  }
.cForm__blurb {  max-width: 100%;   text-align: justify;}
  /* On a narrow screen the resting card is already nearly full width, so the
     horizontal half of the wipe has almost nothing to travel. Crop taller so
     the vertical half still has a run — otherwise the reveal barely reads. */
  .cReveal {
    --cc-h: calc(var(--cc-w) * 3 / 4);
  }

  /* The lines are nowrap, so on a narrow card the type has to come down
     rather than reflow — reflowing would break the comp's two-line split. */
  .cBanner__caption {
    font-size: clamp(1.15rem, 6.2vw, 1.75rem);
  }
  h2.cForm__heading {  font-size: 50px !important;}
  .cSubmit{ width: 100%; justify-content: center;  font-size: 14px;}
      .cBanner__caption {   font-size: 30px;  }
}

/* =========================================================================
   Reduced motion
   -------------------------------------------------------------------------
   The hooks already bail out, which leaves the custom properties at their
   declared defaults — so this only has to stop the CSS-only loops and land
   the entrance states.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  /* The aurora and grain are quieted by globals.css. */
  .cHero__sub,
  .cTicker__track,
  .oCard__plate--fallback::before,
  .cSubmit__dots i {
    animation: none;
  }

  /* The banner's own reduced-motion fallback lives with the shared
     .bannerOpen primitive in globals.css. */

  .cForm__panel.is-done .cDone__ring,
  .cForm__panel.is-done .cDone__tick {
    animation: none;
    stroke-dashoffset: 0;
  }

  .cForm__grid.is-shake {
    animation: none;
  }
}