/*
 * Contact Us Clone — Test Page Stylesheet
 * Hand-coded (no Elementor, no GSAP). Built from Figma node 836:3306
 * ("Contact Us", file rXkYsvfFcXhSOHgb18Gys2), content/real values swapped
 * in from post 1197's own live page (/contact-us/) per explicit instruction:
 * social links + their real count (2: Instagram + LinkedIn, not Figma's
 * placeholder 4), the 5 real "Select Subject" radio options, the real
 * 7-city office map, and the real recipient/subject config for the form.
 * Scoped under .ctu-page.
 *
 * Two real content bugs on the LIVE page were NOT reproduced here — see
 * section-1-contact.php docblock for the reasoning:
 *   - tel: href was the Elementor demo placeholder "+1012 3456 789"
 *   - mailto: href was "demo@gmail.com" instead of the real info@intone.com
 *
 * CORRECTED 2026-08-20 — the Location section originally used a 7-marker
 * interactive hex-tile map found by grepping the live HTML. That markup is
 * real but unconditionally hidden (elementor-hidden-desktop/tablet/mobile)
 * — it never renders. Replaced with the real visible design: a single flat
 * image (attachment 2025/11/image-12.png) with the pin + "India" label
 * baked in, on a solid navy section background, with a real glassmorphism
 * address bar. See section-2-location.php's own docblock for the full story.
 */

body.page-id-15547 .rkch-spacer,
body.page-id-1197 .rkch-spacer { display: none !important; height: 0 !important; }

.ctu-page {
  --ctu-primary: #233963;
  --ctu-text: #1E2E4C;
  --ctu-white: #FFFFFF;
  --ctu-neutral-9: #F4F6F9;
  --ctu-neutral-8: #EBEEF2;
  --ctu-neutral-7: #DADEE3;
  --ctu-neutral-5: #858C94;
  --ctu-black: #09101D;
  --ctu-accent: #6AC2B7;
  --ctu-gradient-teal-green: linear-gradient(90deg, #47B0A3 0%, #4FB799 30.427%, #4CC86F 77.404%, #84BA4C 100%);
  --ctu-radius: 24px;

  position: relative;
  font-family: "Public Sans", sans-serif;
  color: var(--ctu-text);
  background: #fff;
}

.ctu-page * { box-sizing: border-box; }
.ctu-page img { max-width: 100%; height: auto; display: block; }

.ctu-page section {
  padding: 96px 4vw;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .ctu-page section { padding: 56px 20px; }
}

.ctu-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1; /* above .ctu-pattern-layer (z-index 0) in the contact section */
}

.ctu-page h1, .ctu-page h2, .ctu-page h3 {
  font-family: "Public Sans", sans-serif;
  color: var(--ctu-text);
  font-weight: 700;
  margin: 0;
}

.ctu-page p { margin: 0; line-height: 1.5; }

.ctu-h2 {
  font-size: 42px;
  line-height: 1.25;
  font-weight: 700;
  text-transform: capitalize;
}

@media (max-width: 767px) {
  .ctu-h2 { font-size: 30px; }
}

/* ---------- Hero ---------- */

/* Full viewport height, matching every other clone page's hero. No overlay
   element — removed across all 15 clone pages 2026-08-20 per the design
   direction; the hero art is dark enough on its own on every page. */
.ctu-hero {
  position: relative;
  min-height: 100vh;
  padding: 160px 4vw 120px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;

  /* The source art is a 1749x2331 PNG weighing 2.53 MB, and it was being
     served at full size to every viewport including a 390px phone. Two
     fixes, both real: serve a size that suits the viewport, and serve WebP.
     The plain url() line is the fallback every browser understands; the
     image-set() line below it wins where supported and picks WebP, falling
     back to the same PNG where the format is not decodable.
       desktop  1537x2048  316 KB WebP, 251 KB JPEG fallback
       <=1024   1152x1536   40 KB WebP, 207 KB JPEG fallback
       <=600     900x949    26 KB WebP, 139 KB JPEG fallback
     Fallbacks were PNG (2529/933/633 KB) until 2026-09-09; the source
     art is photographic and fully opaque, so PNG bought nothing.
     1152 wide is kept for phones rather than dropping to 768 because at
     DPR 2 a 390px-wide hero still needs ~1266 real px across the uncropped
     render, and 768 visibly softens. */
  background-image: url("/wp-content/uploads/2025/07/1-1537x2048.jpg");
  background-image: image-set(
    url("/wp-content/uploads/2025/07/1-1537x2048.webp") type("image/webp"),
    url("/wp-content/uploads/2025/07/1-1537x2048.jpg") type("image/jpeg")
  );
}

/* CROPPED ART for narrow/tall viewports — fixes the dead grey band under the
   hero on phones.
   The source art's bottom ~19% (from y=1880 of 2331) is a flat grey-green
   "floor" plane. `cover` only crops along the axis that overflows: on a
   desktop 16:9 box the image fits by WIDTH and overflows vertically, so
   center-positioning crops that floor away and it is never seen. But once
   the viewport is TALLER than the art is wide in proportion — any viewport
   aspect below the image's own 0.75 — `cover` flips to fitting by HEIGHT,
   the entire image height is shown, and the floor lands as a flat grey band
   across the bottom of the hero. Vertical `background-position` cannot help
   there, because at that point there is no vertical overflow left to shift.
   So the floor is cropped out of the file instead (1749x1845, aspect 0.95).
   Applied both below 1024px and, via the aspect query, to any unusually
   tall window above it. */
@media (max-width: 1024px) {
  .ctu-hero {
    background-image: url("/wp-content/uploads/2025/07/1-crop-1152.jpg");
    background-image: image-set(
      url("/wp-content/uploads/2025/07/1-crop-1152.webp") type("image/webp"),
      url("/wp-content/uploads/2025/07/1-crop-1152.jpg") type("image/jpeg")
    );
  }
}

@media (min-width: 1025px) and (max-aspect-ratio: 3/4) {
  .ctu-hero {
    background-image: url("/wp-content/uploads/2025/07/1-crop-1152.jpg");
    background-image: image-set(
      url("/wp-content/uploads/2025/07/1-crop-1152.webp") type("image/webp"),
      url("/wp-content/uploads/2025/07/1-crop-1152.jpg") type("image/jpeg")
    );
  }
}

@media (max-width: 600px) {
  .ctu-hero {
    background-image: url("/wp-content/uploads/2025/07/1-crop-900.jpg");
    background-image: image-set(
      url("/wp-content/uploads/2025/07/1-crop-900.webp") type("image/webp"),
      url("/wp-content/uploads/2025/07/1-crop-900.jpg") type("image/jpeg")
    );
  }
}

/* Scaled up to match the by-industry family's hero (100px desktop) — clamped
   rather than stepped so it tracks the viewport instead of snapping at one
   breakpoint. 6.95vw hits ~100px at the 1440px design width. */
/* min lowered 40px -> 32px: at 390px the 40px floor left "Get in Touch with
   Us" breaking after "with" and stranding "Us" alone on line two, running
   nearly edge-to-edge in the 350px of available width. text-wrap:balance
   evens the two lines out wherever it does wrap (ignored harmlessly by
   browsers that don't support it). */
.ctu-hero-h1 {
  position: relative;
  color: #fff !important;
  font-size: clamp(32px, 6.95vw, 100px);
  line-height: 1.04;
  font-weight: 700;
  max-width: 1100px;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .ctu-hero { padding: 140px 20px 80px !important; }
}

/* Landscape phones / short viewports: 100vh is only ~390px there, and the
   desktop 160/120 padding eats 280px of it, squeezing the heading into a
   thin band. Height-based, not width-based — a 844x390 landscape phone is
   "wide" by every width breakpoint but is the case that actually needs
   this. min-height drops to auto so the section is content-sized. */
@media (max-height: 520px) and (orientation: landscape) {
  .ctu-hero {
    min-height: auto;
    padding: 96px 4vw 56px !important;
  }
  .ctu-hero-h1 { font-size: clamp(32px, 5.5vw, 56px); }
}

/* ---------- Contact card ---------- */

/* Scroll-linked horizontal moving pattern, same mechanic as the homepage
   hero and every other clone page's CTA (see contact-test.js). The layer is
   fixed at 170% width from first paint and ONLY its transform is animated,
   so the drift never triggers layout.

   overflow-x: CLIP, not hidden — `overflow-x: hidden` forces the computed
   overflow-y to `auto`, which would turn this section into a scroll
   container and let the absolutely-positioned paper plane produce an inner
   scrollbar. `clip` does the same horizontal clipping without that. */
.ctu-contact { background: #fff; }
.ctu-pattern-host { position: relative; overflow-x: clip; }
.ctu-pattern-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 170%;
  height: 100%;
  background-image: url("/wp-content/uploads/2025/07/54a768dcea5da5e17c5698fa431189da72b85889-scaled-1.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: cover;
  opacity: 0.35;
  pointer-events: none;
  will-change: transform;
  transform: translateX(0%);
  z-index: 0;
}

.ctu-card {
  border: 5px solid var(--ctu-primary);
  border-radius: var(--ctu-radius);
  background: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr);
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.15);
}

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

.ctu-card-info {
  background: var(--ctu-neutral-9);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ctu-info-block { display: flex; flex-direction: column; gap: 4px; }
.ctu-info-block h2 { font-size: 42px; text-transform: capitalize; }
.ctu-info-block p { font-size: 16px; }

.ctu-contact-rows { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.ctu-contact-row { display: flex; align-items: center; gap: 12px; }
.ctu-contact-row svg { flex-shrink: 0; }
.ctu-contact-row a { color: var(--ctu-primary); font-size: 16px; text-decoration: none; }
.ctu-contact-row a:hover { text-decoration: underline; }

.ctu-divider { border: none; border-top: 1px solid var(--ctu-neutral-7); margin: 0; }

.ctu-connect h2 { font-size: 42px; text-transform: capitalize; margin-bottom: 4px; }
.ctu-connect p { font-size: 16px; margin-bottom: 20px; }

/* The two card headings are plain <h2>s, not `.ctu-h2`, so the sitewide
   `.ctu-h2` breakpoint never reached them — they sat at a hardcoded 42px at
   EVERY width, and "Connect With Us" wrapped to two lines in the narrow
   column both at 1024 (2-col, 318px available) and at 390 (262px).
   Sized against the space actually available at each layout stage rather
   than by viewport alone: the column is WIDEST at <=900 (where the card
   collapses to a single column) and narrowest just above it, so this is not
   a monotonic ramp.
   NOTE: these must stay BELOW the two 42px rules above — they carry the
   same (0,1,1) specificity, so source order is the only thing deciding the
   winner. Placed higher up they silently lost, which is exactly how this
   shipped broken the first time. */
@media (max-width: 1100px) {
  .ctu-info-block h2, .ctu-connect h2 { font-size: 32px; }
}
@media (max-width: 900px) {
  .ctu-info-block h2, .ctu-connect h2 { font-size: 36px; }
}
@media (max-width: 560px) {
  .ctu-info-block h2, .ctu-connect h2 { font-size: 30px; }
}
/* 360px (iPhone SE / small Android) leaves only ~231px of column, where
   "Connect With Us" still broke to two lines at 30px. */
@media (max-width: 400px) {
  .ctu-info-block h2, .ctu-connect h2 { font-size: 26px; }
}

.ctu-social-list { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.ctu-social-list a {
  display: flex;
  color: var(--ctu-primary);
  transition: color 0.2s ease, transform 0.2s ease;
}
.ctu-social-list a:hover { color: var(--ctu-accent); transform: translateY(-2px); }
.ctu-social-list svg { width: 26px; height: 26px; }

.ctu-card-form {
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

/* ---------- Form (rendered by contact_form_render()) ---------- */

.ctf-form { display: flex; flex-direction: column; gap: 24px; }
.ctf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.ctf-row { display: flex; gap: 24px; }
@media (max-width: 560px) { .ctf-row { flex-direction: column; gap: 16px; } }

.ctf-field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; }
.ctf-field--full { width: 100%; }
.ctf-label { font-size: 16px; font-weight: 600; color: var(--ctu-black); opacity: 0.8; }
.ctf-req .ctf-label::after { content: " *"; color: #C0392B; opacity: 1; }

.ctf-field input[type="text"],
.ctf-field input[type="email"],
.ctf-field input[type="tel"],
.ctf-field textarea {
  width: 100%;
  border: 1px solid var(--ctu-neutral-5);
  border-radius: 8px;
  background: #fff;
  padding: 12px 16px;
  font-family: "Public Sans", sans-serif;
  font-size: 16px;
  color: var(--ctu-black);
}
.ctf-field textarea { resize: vertical; min-height: 96px; }
.ctf-field input:focus,
.ctf-field textarea:focus {
  outline: none;
  border-color: var(--ctu-primary);
  box-shadow: 0 0 0 3px rgba(35, 57, 99, 0.12);
}

/* The 32px column gap is right when all five options sit on one line, but
   below ~1280 they wrap and that gap just pushes the count of lines up —
   measured 4 lines (116px tall) at 360px. Tightened progressively. */
.ctf-radio-row { display: flex; flex-wrap: wrap; gap: 12px 32px; }
@media (max-width: 1100px) { .ctf-radio-row { gap: 10px 20px; } }
@media (max-width: 480px)  { .ctf-radio-row { gap: 10px 14px; } }
.ctf-radio-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 16px;
  color: var(--ctu-primary);
}
.ctf-radio-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ctf-radio-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ctu-neutral-5);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ctf-radio-pill input:checked + .ctf-radio-check {
  border-color: var(--ctu-primary);
  background: var(--ctu-primary);
}
.ctf-radio-pill input:checked + .ctf-radio-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ctf-radio-pill input:focus-visible + .ctf-radio-check {
  outline: 2px solid var(--ctu-primary);
  outline-offset: 2px;
}

.ctf-error {
  color: #C0392B;
  font-size: 14px;
  margin: 0;
}

.ctf-submit-row { display: flex; justify-content: flex-end; }

/* Figma node 1782:53621 ("All Button"). Every value below is that node's:
     border   2px, gradient teal->green (the shared "Gredient primary" token —
              Figma's Tailwind export flattens it to a flat #6ac2b7, but the
              node's own render is clearly a gradient, and it matches the
              site's existing gradient exactly, so it's applied here with
              `border-image`, the same technique .ictab-outer already uses)
     size     148px wide, 12px/16px padding  (min-width, not a hard width —
              "GET IN TOUCH" at 16px ExtraBold measures ~152px including
              padding and borders, so a fixed 148px would clip it)
     type     Public Sans ExtraBold 16/24, uppercase, #1E2E4C
     glass    backdrop-blur 7.58px over rgba(255,255,255,0.07)
     shadows  a green-tinted outer glow plus two white inset sheens
   No border-radius in the node — and `border-image` cannot be combined with
   one anyway, so the square corners are both faithful and required. */
.ctf-submit {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-image: var(--ctu-gradient-teal-green) 1;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(7.58px);
  -webkit-backdrop-filter: blur(7.58px);
  color: var(--ctu-text);
  font-family: "Public Sans", sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    -11.15px -10.392px 48px 0 rgba(51, 138, 48, 0.05),
    -1.858px -1.732px 12px 0 rgba(79, 173, 93, 0.15),
    inset 2.146px 2px 9.24px 0 rgba(255, 255, 255, 0.13),
    inset 1.217px 1.134px 4.62px 0 rgba(255, 255, 255, 0.13);
  transition: background 0.25s ease, color 0.25s ease;
}
/* Hover/focus is not defined in the node; kept the site's established
   outline-button affordance (fill with the primary navy) so it behaves like
   .ictab-btn and .ctu-btn--outline elsewhere on the site. */
.ctf-submit:hover,
.ctf-submit:focus-visible { background: var(--ctu-primary); color: #fff; }
.ctf-submit:disabled { opacity: 0.6; cursor: default; }

.ctf-success[hidden] { display: none; }
.ctf-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: var(--ctu-neutral-9);
  border-radius: 8px;
  font-size: 16px;
  color: var(--ctu-primary);
}
.ctf-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2ECC71;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

/* Google's reCAPTCHA badge — kept visible (never hidden via CSS) per Google's ToS
   since this form doesn't otherwise disclose reCAPTCHA usage on-page. */
.grecaptcha-badge { visibility: visible !important; }

.ctu-paper-plane {
  position: absolute;
  right: 24px;
  bottom: -18px;
  width: 190px;
  pointer-events: none;
  transform: rotate(-12deg);
  opacity: 0.9;
}
@media (max-width: 900px) { .ctu-paper-plane { display: none; } }

.ctu-privacy-note {
  max-width: 1280px;
  margin: 20px auto 0;
  padding: 0 4vw;
  font-size: 15px;
  color: var(--ctu-text);
}
.ctu-privacy-note a {
  background-image: var(--ctu-gradient-teal-green);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration-line: underline;
}

/* ---------- Location (real design — see docblock in section-2-location.php) ---------- */

/* Geometry is Figma node 838:38336's real values (frame 1440x944) expressed
   as ratios of that frame, so the whole composition scales with the viewport
   instead of drifting: map inset 108/1440 = 7.5%, heading left 84/1440 =
   5.83%, glass bar 645/1440 = 44.8% wide sitting 65/944 = 6.9% off the
   bottom. */
.ctu-location {
  background: var(--ctu-primary);
  padding: 0 !important;
}

.ctu-location-inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 3.6% 7.5% 0;
}

/* A real <img>, so its intrinsic 2448x1588 ratio sets the section height at
   every width — no fixed min-height to leave dead space or crop the art. */
.ctu-location-map-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Desktop: the copy overlays the lower-left of the map, as in Figma. */
.ctu-location-content {
  position: absolute;
  left: 5.83%;
  right: 5.83%;
  bottom: 6.9%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Scoped with the .ctu-page ancestor (0,2,0) — a bare .ctu-location-h2
   (0,1,0) loses to the sitewide ".ctu-page h1,h2,h3{color:var(--ctu-text)}"
   rule above (0,1,1) regardless of source order, leaving the heading
   almost invisible against the navy map. Caught in a real browser check. */
.ctu-page .ctu-location-h2 {
  color: #fff;
  margin-bottom: 4px;
  font-size: clamp(28px, 3.33vw, 48px); /* 48/1440 = 3.33vw */
  text-transform: none;                  /* Figma sets no capitalisation here */
}
.ctu-page .ctu-location-sub {
  color: #fff;
  font-size: clamp(14px, 1.11vw, 16px);
  margin-bottom: clamp(16px, 2.2vw, 32px);
}

/* Width is PROPORTIONAL, not fixed. Figma's bar is 645 of the map's 1224 =
   52.7% of the map. Pinned at a literal 645px it held that ratio only at
   the 1440px design width and then ballooned as the map shrank — measured
   53.3% of the map at 1440 but 84.8% at 910, which read as a completely
   different composition. 51% of this container resolves to ~53% of the map
   (the container runs slightly wider than the image), holding Figma's
   proportion across the whole desktop range; the 645px cap keeps it honest
   on very wide screens. */
.ctu-office-glass {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  width: 51%;
  max-width: 645px;
  padding: clamp(16px, 1.8vw, 26px) clamp(18px, 1.95vw, 28px);
  border-radius: 24px;
  border: 0.8px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(7.58px);
  -webkit-backdrop-filter: blur(7.58px);
  box-shadow:
    -11px -10px 48px -12px rgba(255, 255, 255, 0.15),
    -2px -2px 12px -8px rgba(179, 169, 169, 0.15),
    inset 2px 2px 9px rgba(255, 255, 255, 0.13),
    inset 1px 1px 5px rgba(255, 255, 255, 0.13);
}

.ctu-office-block { flex: 1 1 240px; min-width: 0; }
.ctu-office-block strong { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.ctu-office-block p { font-size: 14px; line-height: 1.4; color: #fff; }

/* Below 900px the map art is too small to read 14px white text over, so the
   copy stops overlapping and stacks underneath it instead. */
@media (max-width: 900px) {
  .ctu-location-inner { padding: 32px 20px 40px; }
  .ctu-location-content {
    position: static;
    margin-top: 28px;
  }
  /* Stacked below the map now, so it takes the full column — the 51%
     proportional width above only makes sense while it overlays the art. */
  .ctu-office-glass { width: 100%; max-width: 100%; }
}

/* `.ctu-office-block { flex: 1 1 240px }` sets flex-BASIS, which follows the
   flex direction — fine as a width in the default row layout, but once the
   bar switches to `column` here that same 240px became a HEIGHT. Each block
   inflated from its ~59px of real content to a 240px box, and the card
   rendered 530px tall instead of ~150px. Reset to content-sized. */
@media (max-width: 560px) {
  .ctu-office-glass { flex-direction: column; gap: 16px; }
  .ctu-office-block { flex: 0 0 auto; }
}

/* ---------- Final CTA ---------- */

/* The background-color here is driven per-frame from scroll position by
   contact-test.js (initCtuCtaTint), fading from transparent to #233963 —
   the exact navy of the Location section — so this section resolves into a
   seamless continuation of the map. Deliberately NO CSS transition on
   background-color: the value already tracks scroll every frame, and a
   transition on top of that produces visible lag/overshoot when scrolling
   fast. The value below is only the pre-JS resting state. */
.ctu-cta-section {
  background-color: rgba(35, 57, 99, 0);
  padding-top: clamp(56px, 6vw, 96px) !important;
}