/* ============================================================
   Daivik Ratnam — responsive + cross-browser layer
   Overrides inline styles via !important. Loaded by every page.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; position: relative; width: 100%; }
html, body { max-width: 100%; }
/* nothing may create a sideways scroll: the page moves up/down only */
section, header, footer, main, .journey-grid { max-width: 100%; overflow-x: clip; }
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }
/* Safari / older iOS need the prefixed blur */
[style*="backdrop-filter"] { -webkit-backdrop-filter: blur(10px); }
/* Firefox has no backdrop-filter on some builds — keep panels readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [style*="backdrop-filter"] { background-color: rgba(11, 16, 29, .92) !important; }
}
video { background: #000; }
/* iOS: stop long words / long addresses forcing a horizontal scrollbar */
p, h1, h2, h3, h4, span, a, li { overflow-wrap: break-word; }

/* ---- banner film: always the full frame, never cropped ---- */
#intro { height: auto !important; width: 100% !important; aspect-ratio: 16 / 9; min-height: 150px; background: #000 !important; }
#intro > img, #intro > video { object-fit: contain !important; background: #000; }
.cc-stage { aspect-ratio: 16 / 9; min-height: 0 !important; background: #000; }
.cc-slide { position: absolute !important; inset: 0 !important; }
.cc-media { min-height: 0 !important; background: #000; }
.cc-media > img, .cc-media > video { object-fit: contain !important; }
.exp-card > img, .exp-card > video { object-fit: contain !important; background: #000; }

/* touch devices: the desktop cursor glow is dead weight */
@media (hover: none) {
  #cursorFlare { display: none !important; }
}

/* ---- header ---- */
@media (max-width: 1080px) { .hdr-nav { display: none !important; } }
@media (max-width: 760px) {
  .hdr-spacer { height: 74px !important; }
  header { padding: 10px 14px !important; gap: 10px; }
  header > a:first-child { min-width: 0; flex: 1 1 auto; gap: 7px !important; }
  header > a:first-child > div { min-width: 0; }
  header img[alt="Daivik Ratnam"] { height: 38px !important; flex: none; }
  header [style*="font-size:27px"], header [style*="font-size: 27px"] {
    font-size: clamp(15px, 5.1vw, 22px) !important; letter-spacing: 1.2px !important; white-space: nowrap;
  }
  header [style*="font-size:27px"] sup, header [style*="font-size: 27px"] sup { font-size: 9px !important; margin-left: 2px !important; }
  header [style*="font-size:12px"][style*="letter-spacing:3px"],
  header [style*="font-size: 12px"][style*="letter-spacing: 3px"] {
    font-size: 8.5px !important; letter-spacing: 1.6px !important; margin-top: 3px !important; white-space: nowrap;
  }
  header > div:last-child { flex: none; gap: 8px !important; }
  header > div:last-child a, header > div:last-child button { width: 38px !important; height: 38px !important; font-size: 14px !important; min-height: 38px !important; }
}

/* ============================================================
   TABLET / PHONE — 900px and below
   ============================================================ */
@media (max-width: 900px) {
  /* --- grid collapse: both authored and computed serializations --- */
  [style*="repeat(6, 1fr)"], [style*="repeat(6,1fr)"],
  [style*="repeat(6, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, 1fr) !important; }

  [style*="repeat(5, 1fr)"], [style*="repeat(5,1fr)"],
  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"],
  [style*="repeat(5, minmax(0px, 1fr))"],
  [style*="repeat(4, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, 1fr) !important; }

  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"],
  [style*="repeat(2, 1fr)"], [style*="repeat(2,1fr)"],
  [style*="repeat(3, minmax(0px, 1fr))"],
  [style*="repeat(2, minmax(0px, 1fr))"] { grid-template-columns: 1fr !important; }

  /* two/three-column editorial splits stack */
  [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1fr"],
  [style*="1.5fr 1fr"], [style*="1.4fr 1fr"], [style*="1.3fr"],
  [style*="1.2fr 1fr"], [style*="1.15fr"], [style*="1.1fr 0.9fr"], [style*="1.1fr .9fr"],
  [style*="1.05fr 1fr"], [style*="1fr 1.05fr"], [style*="1fr 1.15fr"],
  [style*="2fr 1fr"], [style*="1fr 2fr"], [style*="40% 60%"], [style*="60% 40%"],
  [style*="55fr 45fr"], [style*="45fr 55fr"] { grid-template-columns: 1fr !important; }

  /* gaps that were tuned for wide canvases */
  [style*="gap: 80px"], [style*="gap:80px"],
  [style*="gap: 70px"], [style*="gap:70px"],
  [style*="gap: 64px"], [style*="gap:64px"],
  [style*="gap: 60px"], [style*="gap:60px"] { gap: 36px !important; }

  /* banner carousel goes edge to edge, ignoring its section padding */
  #curated { padding-left: 0 !important; padding-right: 0 !important; }
  .cc-stage { width: 100% !important; margin: 0 !important; }
  .cc-copy { padding-left: 20px !important; padding-right: 20px !important; }

  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 36px !important; }
  footer > div:last-child { flex-direction: column !important; gap: 8px !important; text-align: center; }

  /* --- section padding: catch every authored variant, spaced or not --- */
  section, header, footer > div { max-width: 100% !important; }
  [class$="-pad"], section[style*="padding"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="padding:160px"], [style*="padding: 160px"],
  [style*="padding:150px"], [style*="padding: 150px"] { padding-top: 64px !important; padding-bottom: 52px !important; }
  [style*="padding:130px"], [style*="padding: 130px"],
  [style*="padding:120px"], [style*="padding: 120px"],
  [style*="padding:110px"], [style*="padding: 110px"],
  [style*="padding:104px"], [style*="padding: 104px"],
  [style*="padding:100px"], [style*="padding: 100px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  [style*="padding:96px"], [style*="padding: 96px"],
  [style*="padding:90px"], [style*="padding: 90px"],
  [style*="padding:88px"], [style*="padding: 88px"],
  [style*="padding:86px"], [style*="padding: 86px"],
  [style*="padding:80px"], [style*="padding: 80px"] { padding-top: 46px !important; padding-bottom: 46px !important; }
  [style*="padding:74px"], [style*="padding: 74px"],
  [style*="padding:70px"], [style*="padding: 70px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  /* inner card padding */
  [style*="padding: 52px 46px"], [style*="padding:52px 46px"] { padding: 30px 22px !important; }
  [style*="padding: 38px 34px"], [style*="padding:38px 34px"] { padding: 26px 20px !important; }
  [style*="padding: 30px 26px"], [style*="padding:30px 26px"] { padding: 24px 20px !important; }

  /* --- tall feature images shrink instead of dominating the scroll --- */
  [style*="min-height:660px"], [style*="min-height: 660px"],
  [style*="min-height:640px"], [style*="min-height: 640px"],
  [style*="min-height:600px"], [style*="min-height: 600px"],
  [style*="min-height:560px"], [style*="min-height: 560px"],
  [style*="min-height:520px"], [style*="min-height: 520px"],
  [style*="min-height:480px"], [style*="min-height: 480px"],
  [style*="min-height:460px"], [style*="min-height: 460px"] { min-height: 300px !important; }

  /* --- type scale --- */
  h1, [style*="font-size:66px"], [style*="font-size: 66px"],
  [style*="font-size:64px"], [style*="font-size: 64px"],
  [style*="font-size:70px"], [style*="font-size: 70px"] { font-size: 40px !important; line-height: 1.06 !important; }
  h2, [style*="font-size:52px"], [style*="font-size: 52px"],
  [style*="font-size:50px"], [style*="font-size: 50px"],
  [style*="font-size:46px"], [style*="font-size: 46px"],
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 31px !important; line-height: 1.1 !important; }
  h3, [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 24px !important; }
  [style*="letter-spacing:6px"], [style*="letter-spacing: 6px"],
  [style*="letter-spacing:5px"], [style*="letter-spacing: 5px"] { letter-spacing: 3px !important; }

  /* --- touch targets --- */
  a[style*="padding: 15px"], a[style*="padding:15px"],
  a[style*="padding: 16px"], a[style*="padding:16px"],
  a[style*="padding: 17px"], a[style*="padding:17px"],
  a[style*="padding: 18px"], a[style*="padding:18px"] {
    min-height: 46px; display: inline-flex !important; align-items: center; justify-content: center;
  }
  button { min-height: 44px; }
  .cc-arrownav { width: 40px !important; height: 40px !important; }
  /* footer + drawer link lists get real tap room */
  footer a, .hdr-drawer a { display: inline-block; padding-top: 8px !important; padding-bottom: 8px !important; }
  footer [style*="flex-direction:column"] a, footer [style*="flex-direction: column"] a { min-height: 40px; display: flex !important; align-items: center; }
  footer a[aria-label] { padding: 0 !important; }

  /* --- horizontal rows wrap instead of overflowing --- */
  [style*="display:flex"][style*="gap"], [style*="display: flex"][style*="gap"] { flex-wrap: wrap; }
  [style*="white-space:nowrap"], [style*="white-space: nowrap"] { white-space: normal !important; }
}

/* ============================================================
   PHONE — 560px and below
   ============================================================ */
@media (max-width: 560px) {
  [style*="repeat(6, 1fr)"], [style*="repeat(6,1fr)"],
  [style*="repeat(6, minmax(0px, 1fr))"],
  [style*="repeat(5, 1fr)"], [style*="repeat(5,1fr)"],
  [style*="repeat(5, minmax(0px, 1fr))"],
  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"],
  [style*="repeat(4, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, 1fr) !important; }

  [class$="-pad"], section[style*="padding"] { padding-left: 16px !important; padding-right: 16px !important; }

  h1, [style*="font-size:66px"], [style*="font-size: 66px"],
  [style*="font-size:64px"], [style*="font-size: 64px"],
  [style*="font-size:70px"], [style*="font-size: 70px"] { font-size: 32px !important; }
  h2, [style*="font-size:52px"], [style*="font-size: 52px"],
  [style*="font-size:46px"], [style*="font-size: 46px"] { font-size: 26px !important; }
  h3 { font-size: 21px !important; }
  [style*="font-size:27px"][style*="italic"], [style*="font-size: 27px"][style*="italic"] { font-size: 21px !important; }
  [style*="min-height:300px"] { min-height: 240px !important; }

  /* contact map: a 21:9 strip is unreadable on a phone */
  a[href*="google.com/maps"] > div[style*="aspect-ratio:21/9"],
  a[href*="google.com/maps"] > div[style*="aspect-ratio: 21 / 9"] { aspect-ratio: 4 / 3 !important; }

  /* contact detail panels: one per row, comfortable padding */
  .ct-split { gap: 14px !important; }
  .ct-split > div { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 22px 20px !important; text-align: left; }
  .ct-split > div > div:first-child { font-size: 11px !important; letter-spacing: 2.4px !important; }
  .ct-split a, .ct-split > div > div:last-child { white-space: normal !important; }

  /* carousel arrows: glass-free on mobile so they never mask the caption text */
  .cc-arrownav, #journeyPrev, #journeyNext {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    width: 38px !important;
    height: 38px !important;
    color: rgba(255,255,255,.85) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.75);
  }
  .cc-arrownav { left: 6px !important; }
  .cc-arrownav[data-cc-next] { left: auto !important; right: 6px !important; }
  #journeyPrev { left: 4px !important; }
  #journeyNext { right: 4px !important; }

  /* custom journey: 5 step tabs must fit the screen, not scroll sideways */
  .journey-nav { flex-wrap: wrap !important; gap: 8px 10px !important; }
  .journey-nav .journey-step { flex: 1 1 28% !important; min-width: 0 !important; }
  .journey-nav .js-label { font-size: 9.5px !important; letter-spacing: 1.2px !important; padding-bottom: 8px !important; white-space: nowrap; }
  .journey-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* the before/after slider needs room for a thumb on touch */
  .cd-ir-track { height: 52px !important; }
  .cd-ir-thumb { width: 26px !important; height: 26px !important; }
  .cd-ir-frame { aspect-ratio: 1 / 1 !important; }
  [class*="ir-label"] { font-size: 9.5px !important; letter-spacing: 1.4px !important; }
}

/* ---- reduce motion: honour the OS setting (also kills jank on low-end phones) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- print / PDF safety ---- */
@media print {
  video, iframe { display: none !important; }
}


/* collections grid: 3 → 2 → 1 */
@media (max-width: 900px) { .col-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px) { .col-grid { grid-template-columns: 1fr !important; } }


/* ---- contact page: phone layout ---- */
@media (max-width: 700px) {
  .ct-split { gap: 12px !important; }
  .ct-split > div { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; padding: 20px 18px !important; gap: 8px !important; }
  .ct-split > div > div:first-child { font-size: 11px !important; letter-spacing: 2.2px !important; }
  .ct-split a, .ct-split > div > div:last-child { font-size: 16.5px !important; line-height: 1.6 !important; white-space: normal !important; overflow-wrap: anywhere; }
  .dr-map, .dr-map + span { }
  [style*="aspect-ratio:21/9"], [style*="aspect-ratio: 21/9"] { aspect-ratio: 4 / 3 !important; }
}


/* ============================================================
   OVERFLOW FIXES — grid/flex children must be allowed to shrink
   ============================================================ */
.kd-c-split, .kd-c-split > *,
.journey-grid, .journey-grid > *,
.cd-create-grid, .cd-create-grid > *,
.col-grid, .col-grid > * { min-width: 0; }

@media (max-width: 900px) {
  /* About Diamonds — the 4Cs panel */
  .kd-c-split { padding: 26px 18px !important; gap: 30px !important; }
  .kd-c-split p, .kd-c-split h3, .kd-c-split span, .kd-c-split div { max-width: 100% !important; }
  .kd-c-split [style*="font-size:62px"], .kd-c-split [style*="font-size: 62px"] { font-size: 34px !important; }
  .kd-scale-letters { font-size: 11px !important; }
  .kd-c-split > div:last-child { padding: 24px 18px !important; }

  /* Home — custom journey */
  .journey-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .journey-nav::-webkit-scrollbar { display: none; }
  #journey, #journey * { max-width: 100%; }
  #journey p, #journey h3 { overflow-wrap: break-word; }
}

@media (max-width: 560px) {
  .kd-c-split { padding: 22px 14px !important; }
  .kd-c-split [style*="font-size:19px"], .kd-c-split [style*="font-size: 19px"] { font-size: 16px !important; }
  .kd-c-split [style*="font-size:17px"], .kd-c-split [style*="font-size: 17px"] { font-size: 15px !important; }
  .kd-c-split [style*="font-size:16px"], .kd-c-split [style*="font-size: 16px"] { font-size: 14.5px !important; }
}

/* scale caption rows inside the 4Cs panel: reflow instead of clipping */
@media (max-width: 620px) {
  .kd-c-split [style*="justify-content:space-between"][style*="text-transform:uppercase"],
  .kd-c-split [style*="justify-content: space-between"][style*="text-transform: uppercase"],
  .kd-c-split [style*="justify-content:space-between"][style*="text-transform: uppercase"],
  .kd-c-split [style*="justify-content: space-between"][style*="text-transform:uppercase"] {
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    gap: 6px 10px !important;
    font-size: 10px !important;
    letter-spacing: .6px !important;
  }
  .kd-scale-letters { font-size: 10px !important; letter-spacing: 0 !important; gap: 2px; flex-wrap: wrap !important; }
}


/* trust bar: slimmer on phones */
@media (max-width: 700px) {
  .trust-bar > div { padding: 10px 14px !important; font-size: 9.5px !important; letter-spacing: 1.8px !important; gap: 24px !important; }
}