/* ============================================================
   CONCEPT LAYOUT — new editorial page template for Three ICC.
   Reuses every color/type token already defined in style.css
   (:root — --bg-cream, --text-black, --menu-accent, --menu-highlight,
   Fira Sans, --gutter, --header-height). Nothing here redefines a
   token; it only adds new section shells. Loaded ONLY on the 3
   concept-review pages so the rest of the site is untouched until
   this direction is approved.
   ============================================================ */

.concept-page main {
  overflow-x: hidden;
}

/* ---- Cinematic hero: full remaining viewport height (not the old
   60vh masthead), thin gold eyebrow line, big title, scroll cue.
   RECOMMENDATION: swap the <img> for a muted looping <video> (drone
   flythrough or render flythrough, 15-25s, same treatment as the
   homepage hero) once footage is available — the markup already has
   a <video> slot commented below the image for that swap. ---- */
.concept-hero {
  position: relative;
  height: calc(100vh - var(--header-height));
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-cream);
}
.concept-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.concept-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.concept-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Single darkening layer — the separate grain texture that used to
     sit under this as a second overlay is switched off for heroes
     below (it was also the source of the z-index bug that let this
     scrim paint over the text). With the text now correctly on top
     and the bold title carrying its own weight, this can run lighter
     than earlier passes while staying legible on bright photography.
     Opacity halved again from the previous pass per direct feedback.
     Axis tilted 7deg off vertical (was "to top" / 0deg; nudged from 5deg
     to 7deg per direct feedback) so the darkest stop (0%) lands at the
     bottom-left corner — where the eyebrow/title/sub actually sit —
     instead of spread evenly across the bottom edge. Top-right (100%)
     dropped from 0.18 to 0 per direct feedback — no vignette there,
     so that corner of the photo reads fully clear. */
  background: linear-gradient(7deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.21) 45%, rgba(0,0,0,0.07) 68%, rgba(0,0,0,0) 100%);
}
.concept-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 72px;
  width: 100%;
}
.concept-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 22px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.concept-hero-eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--white);
  display: inline-block;
}
.concept-hero-title {
  color: var(--white);
  font-size: clamp(40px, 6.5vw, 96px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  max-width: 980px;
}
.concept-hero-sub {
  margin-top: 20px;
  color: var(--white);
  font-size: clamp(17px, 2.9vw, 51px);
  font-weight: 300;
  line-height: 1.3;
  max-width: 720px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.concept-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  margin-top: 28px;
}
.concept-logo-row img {
  max-height: 84px;
  max-width: 210px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.concept-scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 32px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.8);
}
.concept-scroll-cue span {
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.concept-scroll-cue .cue-line {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.5);
  overflow: hidden;
  position: relative;
}
.concept-scroll-cue .cue-line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--menu-highlight);
  animation: cueDrop 2.2s ease-in-out infinite;
}
@keyframes cueDrop {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

/* ---- Editorial intro: asymmetric split, large pull-style headline
   left, tall image right. Reveal-on-scroll handled by a tiny shared
   IntersectionObserver script (concept.js). ---- */
/* Shared scroll offset for every element a submenu link can land on
   (clicking "Configuration Tower A" etc. from the nav) — without this
   the fixed header covers the top of whatever section the browser's
   native anchor jump scrolls to. Every id main.js's slugify() can
   produce lives on one of these element types. */
.concept-intro,
.concept-zigzag,
.concept-timeline-full,
.concept-form-panel,
.concept-masterplan-head,
.concept-chrono {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.concept-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  background: var(--bg-cream);
}
.concept-intro-text {
  padding: 100px var(--gutter) 100px calc(var(--gutter) + 40px);
}
.concept-intro-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--menu-accent);
  margin-bottom: 22px;
}
.concept-intro-headline {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 300;
  line-height: 1.28;
  text-transform: uppercase;
  color: var(--text-black);
  max-width: 620px;
}
.concept-intro-body {
  margin-top: 28px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(0,0,0,0.78);
  max-width: 520px;
}
.concept-intro-media {
  position: relative;
  height: 100%;
  min-height: 640px;
}
.concept-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Stat band: full-width gold-tinted strip, oversized numerals.
   Numbers are pulled directly from the page's own real copy — not
   invented — see generate_concept_pages.py's STAT_BANDS dict. ---- */
.concept-stats {
  background: linear-gradient(180deg, #F6E9D8 0%, #F0DEC4 100%);
  padding: 64px var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.concept-stat-num {
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 300;
  color: var(--menu-accent);
  line-height: 1;
}
.concept-stat-label {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.65);
}

/* ---- Zig-zag content sections: alternating image/text, big ghost
   section number in the background for editorial texture. The TEXT
   half reuses the exact same inner HTML the rest of the site already
   renders from PAGE_COPY (bullet groups, spec lists, distance lists,
   pointer lists, timeline, flat lists all still work unchanged —
   only the surrounding shell is new). ---- */
.concept-zigzag {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}
.concept-zigzag.is-reversed {
  direction: rtl;
}
.concept-zigzag.is-reversed > * {
  direction: ltr;
}
.concept-zigzag-media {
  position: relative;
  overflow: hidden;
}
.icc-logo-centered {
  /* Keeps the ICC black-logo pin roughly centred in the visible crop
     of this specific map image, worked out from the pin's actual
     position in the source photo (~64.6%/53.2% across) against this
     panel's rendered box. Mobile's crop overhang is small (image and
     box are close in aspect ratio), so 100% is the closest the pin
     can get to true centre there. */
  object-position: 77% 53%;
}
@media (max-width: 900px) {
  .icc-logo-centered { object-position: 100% 53%; }
}
.concept-zigzag-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 640px;
}

/* ============================================================
   GATED FLOOR PLAN — blurred preview + CTA overlay. Used on the
   Tower A / Tower B configuration sections (The Apartments page)
   to keep the detailed unit-mix plan behind a lead-capture step —
   visitors see the tower's plan silhouette, not the readable
   detail, until they click through to the enquiry form.
   ============================================================ */
.concept-zigzag-media.is-gated img {
  filter: blur(18px);
  transform: scale(1.08);
}
.concept-zigzag-media.is-gated::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 8, 0.35);
  z-index: 1;
}
.gated-plan-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--menu-accent);
  color: var(--white);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}
.gated-plan-cta:hover {
  background: var(--menu-highlight);
  color: #2b2114;
}
.concept-zigzag-text {
  position: relative;
  background: var(--bg-cream);
  padding: 88px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.concept-zigzag-ghost {
  position: absolute;
  top: 24px;
  right: 40px;
  font-size: 140px;
  font-weight: 700;
  color: rgba(141, 106, 62, 0.08);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.concept-zigzag-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--menu-accent);
  margin-bottom: 16px;
}
.concept-zigzag-title {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 300;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-black);
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.concept-zigzag-body {
  position: relative;
  z-index: 1;
}
/* PAGE_COPY's existing fragments render inside .concept-zigzag-body —
   loosen their margins slightly so they sit naturally in this
   narrower column instead of the old full-width page-section. */
.concept-zigzag-body .page-bullet-groups,
.concept-zigzag-body .flat-bullet-list,
.concept-zigzag-body .distance-list,
.concept-zigzag-body .pointer-list,
.concept-zigzag-body .timeline {
  margin-top: 22px;
}
.concept-zigzag-body .page-bullet-groups {
  grid-template-columns: 1fr;
}
/* Location's two panels each carry several pointer-blocks — running
   them 2-up halves the stacked height of the text column, so it no
   longer forces the media column (and its image) taller than the
   photo's native resolution supports. Falls back to 1 column on
   mobile via .pointer-list's own <900px rule in style.css. */
.concept-zigzag-body .pointer-list {
  grid-template-columns: 1fr 1fr;
  gap: 26px 28px;
}
.concept-zigzag-body p.page-body {
  font-size: 16px;
}

/* ---- Text-panel CTA link — used inside a zigzag-text block on the
   homepage's 4 section teasers ("Explore Wadia Group" etc). Lighter
   weight than .concept-cta-btn (that one's built for a dark image
   background); this is a gold text+arrow link for the cream panel. ---- */
.concept-zigzag-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: var(--menu-accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.concept-zigzag-cta svg {
  transition: transform 0.25s ease;
}
.concept-zigzag-cta:hover svg {
  transform: translateX(6px);
}

/* ---- Testimonial quote rows: reuses the SAME .concept-zigzag
   left-right grid used across the rest of the site (alternating
   sides via .is-reversed) — just with a slightly darker background
   than the page's base cream, and a large blockquote + attribution
   in place of the usual eyebrow/title/body copy. ---- */
.concept-quote .concept-zigzag-text {
  background: #F6E9D8;
}
.concept-quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 64px;
  line-height: 1;
  color: var(--menu-accent);
  opacity: 0.45;
  margin-bottom: 4px;
}
.concept-quote-text {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-black);
  max-width: 480px;
  margin-bottom: 22px;
}
.concept-quote-author {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--menu-accent);
}
.concept-quote-role {
  font-size: 13px;
  font-weight: 300;
  color: rgba(0,0,0,0.6);
  margin-top: 4px;
}

/* ---- Reveal-on-scroll (progressive enhancement; content is fully
   visible with no JS — the opacity:0 only ever applies once
   concept.js has confirmed it's running and tagged <body>) ---- */
.js-reveal-ready .concept-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.concept-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Gallery grid: replaces the plain 4-slide carousel with a
   tiled masonry-feel grid (click to enlarge via a lightweight CSS
   lightbox, no JS framework needed). ---- */
.concept-gallery {
  padding: 100px var(--gutter);
  background: var(--bg-cream);
}
.concept-gallery-head {
  text-align: center;
  margin-bottom: 48px;
}
/* ---- True-centred eyebrow (icon + label) ----
   Several section eyebrows pair the signature-bracket SVG with a
   centered label. Centering the flex row as a whole shifts the text
   itself left of true centre, by roughly half the icon+gap width, so
   the label reads off-centre against the section below it. This grid
   variant (1fr / auto / 1fr with an empty mirror column) keeps the
   icon snug to the label's left while the label itself lands dead
   centre, regardless of icon width. */
.eyebrow-centered {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.eyebrow-centered .signature-bracket { justify-self: end; }
.eyebrow-centered .eyebrow-label { grid-column: 2; justify-self: center; }

.concept-gallery-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--menu-accent);
  margin-bottom: 14px;
}
.concept-gallery-title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--text-black);
}
.concept-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
  max-width: 1360px;
  margin: 0 auto;
}
.concept-gallery-grid a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.concept-gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.concept-gallery-grid a:hover img {
  transform: scale(1.06);
}
.concept-gallery-grid a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.concept-gallery-grid a:nth-child(4) { grid-column: span 2; }

/* ---- Chronological feed: Media / Blogs / Careers ----
   Clean, single-column list of dated entries, newest first — reuses
   the .concept-gallery-head eyebrow/title pattern for its heading so
   it matches the rest of the site's section-intro typography. Each
   row is a plain content block (date + title + excerpt), no image
   required, so it works even before real photography/thumbnails
   exist for a given entry. */
.concept-chrono {
  padding: 100px var(--gutter);
  background: var(--bg-cream);
}
.concept-chrono-list {
  max-width: 860px;
  margin: 0 auto;
}
.concept-chrono-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.concept-chrono-list .concept-chrono-item:first-child { padding-top: 0; }
.concept-chrono-list .concept-chrono-item:last-child { border-bottom: none; padding-bottom: 0; }
.concept-chrono-date {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--menu-accent);
  padding-top: 4px;
}
.concept-chrono-item-title {
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-black);
  margin-bottom: 10px;
}
.concept-chrono-item-excerpt {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(0,0,0,0.78);
  max-width: 560px;
}
@media (max-width: 767px) {
  .concept-chrono { padding: 64px var(--gutter); }
  .concept-chrono-item { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
}

/* Lightbox: pure-CSS :target technique */
.concept-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
}
.concept-lightbox:target {
  display: flex;
}
.concept-lightbox img {
  max-width: 90vw;
  max-height: 86vh;
  object-fit: contain;
}
.concept-lightbox-close {
  position: absolute;
  top: 28px;
  right: 40px;
  color: var(--white);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 8px 18px;
  border-radius: 2px;
}

/* ---- Closing CTA band ---- */
.concept-cta {
  position: relative;
  height: 52vh;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.concept-cta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.concept-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.5);
}
.concept-cta-inner {
  position: relative;
  z-index: 2;
  color: var(--white);
  padding: 0 24px;
}
.concept-cta-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--menu-highlight);
  margin-bottom: 18px;
}
.concept-cta-title {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.25;
  max-width: 720px;
  margin: 0 auto 32px;
}
.concept-cta-btn {
  display: inline-block;
  padding: 16px 40px;
  border: 1px solid var(--menu-highlight);
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}
.concept-cta-btn:hover {
  background: var(--menu-highlight);
  color: #2b2114;
}

/* ============================================================
   SIGNATURE DEVICES — a recurring visual language applied across
   every page, not just decoration on one. Two elements:

   1. The bracket flourish — the client's own marketing renders
      already use a thin gold curly-bracket accent next to pull text
      (visible in gallery-1.jpg's "A Host of Privileges }" caption).
      Turned into a deliberate, reusable device here (drawn in SVG,
      not a raster crop) so it recurs everywhere a number or a
      pull-quote needs emphasis — the way a monogram recurs on a
      hospitality brand's site.
   2. A subtle grain texture over every dark image scrim (hero, CTA)
      — a cheap SVG noise filter at very low opacity — so photos read
      as cinematic rather than flat/stock. Barely visible on its own,
      but it's the difference between "template" and "considered."
   ============================================================ */
.signature-bracket {
  display: inline-block;
  flex-shrink: 0;
}
.signature-bracket svg {
  display: block;
}
.concept-stat-num-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.grain-overlay {
  position: relative;
}
.grain-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* Heroes run a single darkening layer now (the gradient scrim above) —
   the grain texture that used to double up under it is switched off
   here. It was also the source of a real bug: the override that used
   to tie the grain's sibling rules together also tied ::after (the
   scrim) to .concept-hero-content at the same z-index, and since
   generated content always paints last in its stacking context, the
   scrim ended up rendering ON TOP of the text — quietly washing out
   the eyebrow/title/sub this whole time. Text now simply uses the
   base z-index order (scrim:1, content:2) with nothing to fight it. */
.concept-hero.grain-overlay::before { display: none; }
.concept-cta.grain-overlay .concept-cta-inner { z-index: 2; }
.concept-cta.grain-overlay::before { z-index: 1; }

/* ---- Pull-quote treatment: a larger standalone line of copy framed
   by the bracket device, used sparingly (page intros, CTA bands) ---- */
.concept-pull-quote {
  display: flex;
  align-items: center;
  gap: 18px;
}
.concept-pull-quote-text {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--menu-accent);
}

/* ============================================================
   FULL-WIDTH TIMELINE — for pages where a timeline is the whole
   point (Wadia Group), rather than squeezed into a half-width
   zigzag column. Eras run as columns on desktop, stacked on mobile.
   ============================================================ */
.concept-timeline-full {
  padding: 100px var(--gutter);
  background: var(--bg-cream);
}
.concept-timeline-full-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.concept-timeline-full-eras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px;
  max-width: 1200px;
  margin: 0 auto;
}
.concept-timeline-full-era-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--menu-accent);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(141,106,62,0.25);
}
.concept-timeline-full-item {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.concept-timeline-full-year {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-black);
  margin-bottom: 4px;
}
.concept-timeline-full-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(0,0,0,0.78);
}

/* ============================================================
   FULL-WIDTH FAQ — for FAQs, where the accordion IS the page.
   ============================================================ */
.concept-faq-full {
  padding: 100px var(--gutter) 120px;
  background: var(--bg-cream);
  max-width: 900px;
  margin: 0 auto;
}
.concept-faq-full .faq-item { padding: 28px 0; }
.concept-faq-full .faq-question { font-size: 19px; }

/* ============================================================
   GALLERY WALL — for the Gallery page: filter-style category labels
   (visual grouping only — the real photo pool is still shared until
   category-specific photography exists) above a larger masonry wall.
   ============================================================ */
.concept-gallery-wall-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 10px;
  margin-bottom: 56px;
}
.concept-gallery-wall-filters span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--menu-accent);
  border: 1px solid rgba(141,106,62,0.35);
  padding: 9px 18px;
  border-radius: 999px;
  /* Now live filter triggers (see concept.js) as well as the scroll
     targets for Gallery's own submenu items (id=data-filter slug) —
     clickable, with a highlighted state for whichever category is
     currently applied (or none, showing every photo). */
  cursor: pointer;
  scroll-margin-top: calc(var(--header-height) + 24px);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.concept-gallery-wall-filters span:hover { border-color: var(--menu-accent); }
.concept-gallery-wall-filters span.is-active {
  background: var(--menu-accent);
  color: var(--white);
  border-color: var(--menu-accent);
}
.concept-gallery-grid a[hidden] { display: none; }

/* ============================================================
   FORM-STYLE PANELS — for Enquire & Site Visit, a conversion page
   rather than a narrative one, so it looks deliberately different:
   two clear callout cards instead of zigzag storytelling.
   ============================================================ */
.concept-form-section {
  padding: 100px var(--gutter);
  background: var(--bg-cream);
}
.concept-form-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 56px auto 0;
}
.concept-form-panel {
  border: 1px solid rgba(141,106,62,0.3);
  padding: 48px 40px;
  background: #fff;
}
/* Reserves the same vertical space for the eyebrow+title+body copy in
   BOTH panels, regardless of exactly how many lines each one's title
   or body wraps to — that's what keeps every field row (and the
   submit button) lined up on the same horizontal line across the two
   side-by-side forms, rather than drifting out of sync whenever one
   panel's copy runs a line longer than the other's. */
.concept-form-panel-head {
  min-height: 210px;
}
.concept-form-panel-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--menu-accent);
  margin-bottom: 16px;
}
.concept-form-panel-title {
  font-size: 24px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--text-black);
  margin-bottom: 18px;
}
.concept-form-panel-body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(0,0,0,0.78);
  margin-bottom: 28px;
}
.concept-form-field {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  background: transparent;
  padding: 10px 2px;
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  margin-bottom: 18px;
  color: var(--text-black);
}
.concept-form-submit {
  display: inline-block;
  padding: 13px 32px;
  background: var(--menu-accent);
  color: var(--white);
  border: none;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.concept-form-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}
/* Honeypot — off-screen rather than display:none so naive bots still fill it */
.concept-form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.concept-form-status {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  min-height: 1.5em;
  color: rgba(0,0,0,0.7);
}
.concept-form-status.is-success { color: #2E6B3F; }
.concept-form-status.is-error { color: #A33A2B; }

/* ============================================================
   LEGAL / QUIET TEMPLATE — for RERA: deliberately understated,
   shorter hero, no video/eyebrow flourish, no gallery or CTA band.
   Content-appropriate restraint, not a lesser version of the
   other template.
   ============================================================ */
.concept-legal-hero {
  height: 34vh;
  min-height: 260px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.concept-legal-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(35%);
}
.concept-legal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.concept-legal-hero-title {
  position: relative;
  z-index: 2;
  color: var(--white);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 300;
  text-transform: uppercase;
  padding: 0 var(--gutter);
}
.concept-legal-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px var(--gutter) 120px;
}
.concept-legal-body .page-body { margin-bottom: 16px; }
.concept-legal-subhead {
  font-size: 22px;
  font-weight: 600;
  margin: 40px 0 14px;
  color: var(--text-black);
}
.concept-legal-subhead:first-child { margin-top: 0; }
.concept-legal-body a { color: var(--menu-accent); text-decoration: underline; }
/* Sized to the width of the surrounding copy (.concept-legal-body,
   max-width 760px) on desktop/tablet — full device width, edge to
   edge, on vertical mobile (see the breakout override below). */
.concept-legal-qr-row {
  margin: 8px 0 32px;
}
.concept-legal-qr {
  margin: 0;
  text-align: left;
}
.concept-legal-qr img {
  display: block;
  width: 100%;
  height: auto;
}
.concept-legal-qr figcaption {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--menu-accent);
  margin-top: 10px;
}
@media (max-width: 767px) {
  .concept-legal-qr-row {
    width: calc(100% + (var(--gutter) * 2));
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
  }
  .concept-legal-qr figcaption { padding: 0 var(--gutter); }
}

/* ---- Partners: real logo grid + eyebrow paragraph ---- */
.concept-partners-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px var(--gutter) 40px;
  text-align: center;
}
.concept-partners-intro .concept-gallery-eyebrow {
  margin-bottom: 18px;
}
.concept-partners-intro .page-body {
  font-size: 19px;
  line-height: 1.7;
}
.concept-logo-grid {
  max-width: var(--frame-width);
  margin: 0 auto;
  padding: 24px var(--gutter) 100px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--menu-highlight);
  border: 1px solid var(--menu-highlight);
}
/* ---- Experiences: NRI/Partner/Testimonials/Gallery quad links ----
   Reuses .concept-logo-grid's tile styling but as its own full-bleed
   cream band (background spans edge-to-edge like every other section
   here) with a 4-column grid sized to the 4 items, so the row centres
   on the page instead of sitting in 4-of-5 columns of the Partners
   page's wider 5-column grid. */
.concept-experiences-links {
  background: var(--bg-cream);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.concept-logo-grid--quad {
  max-width: 900px;
  width: 100%;
  padding: 24px var(--gutter);
  grid-template-columns: repeat(4, 1fr);
}
/* .concept-logo-grid's own 900px rule already drops this to 2 columns
   on mobile — same specificity, later in source, so no duplicate needed. */
.concept-logo-tile {
  background: var(--bg-cream);
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  transition: background-color .25s ease;
}
.concept-logo-tile:hover { background: rgba(228,202,159,0.18); }
.concept-logo-tile svg { opacity: 0.55; }
.concept-logo-tile-img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.concept-logo-tile-label {
  /* Role &mdash; Company (real names as of 2026-09-01's copy-doc sync,
     replacing the earlier "Partner 01"-style placeholders) — noticeably
     longer than the old labels, so this dropped the fixed aspect-ratio
     tile for a min-height one and loosened tracking/line-height so a
     two-line label doesn't clip or run into the tile edge. */
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--menu-accent);
  text-align: center;
}

/* ---- Floor Plans: Master Plan carousel + per-tower plan groups ---- */
.concept-masterplan-head {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px var(--gutter) 32px;
  text-align: center;
}
.concept-masterplan-head .concept-gallery-eyebrow {
  justify-content: center;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.concept-masterplan-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  z-index: 2;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.concept-masterplan-caption span {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--menu-accent);
  background: rgba(255,244,236,0.9);
  padding: 6px 16px;
  border-radius: 2px;
}
.concept-tower-groups { padding: 40px var(--gutter) 60px; max-width: var(--frame-width); margin: 0 auto; }
.concept-tower-group { padding: 48px 0; border-top: 1px solid var(--menu-highlight); }
.concept-tower-group:first-child { border-top: none; }
.concept-tower-group-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
}
.concept-tower-group-name {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--text-black);
}
.concept-tower-group-note {
  font-size: 13px;
  color: var(--menu-accent);
  letter-spacing: 0.04em;
}
.concept-floorplan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.concept-floorplan-card {
  border: 1px solid var(--menu-highlight);
  padding: 28px;
  transition: border-color .25s ease;
}
.concept-floorplan-card:hover { border-color: var(--menu-accent); }
.concept-floorplan-diagram {
  height: 160px;
  border: 1px dashed var(--menu-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: rgba(228,202,159,0.08);
}
.concept-floorplan-name {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-black);
  margin-bottom: 4px;
}
.concept-floorplan-sqft {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--menu-accent);
}

@media (max-width: 900px) {
  .concept-timeline-full-eras { grid-template-columns: 1fr; }
  .concept-form-panels { grid-template-columns: 1fr; }
  .concept-form-panel-head { min-height: auto; } /* panels stack, so no cross-column alignment to preserve */
  .concept-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .concept-experiences-links { min-height: 280px; }
  .concept-floorplan-grid { grid-template-columns: 1fr; }
  /* Beats .concept-zigzag-body .pointer-list's 2-column desktop rule
     on specificity — without this, mobile inherited 2 columns and
     overflowed the narrow viewport. */
  .concept-zigzag-body .pointer-list { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .concept-intro { grid-template-columns: 1fr; }
  .concept-intro-media { min-height: 320px; order: -1; }
  .concept-intro-text { padding: 56px var(--gutter); }
  .concept-stats { grid-template-columns: 1fr 1fr; }
  .concept-zigzag,
  .concept-zigzag.is-reversed { grid-template-columns: 1fr; direction: ltr; }
  .concept-zigzag-media img { min-height: 320px; }
  .concept-zigzag-text { padding: 48px var(--gutter); }
  .concept-zigzag-ghost { font-size: 90px; top: 12px; right: 20px; }
  .concept-gallery { padding: 64px var(--gutter); }
  .concept-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .concept-gallery-grid a:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .concept-hero-title { max-width: 100%; }
}

/* One-line headline modifier (client art changes 01/10/26): the first
   sentence stays on a single line on desktop/tablet; the size scales with
   the viewport so it always fits its column. On phones it wraps normally. */
@media (min-width: 901px) {
  .concept-intro-headline--one-line { font-size: clamp(22px, 2.1vw, 32px); max-width: none; }
  .concept-intro-headline--one-line .one-line { white-space: nowrap; }
}

/* Wide partner tiles (client art changes 01/10/26): the two long credits
   (SN Joshi — MEPF/AV-IT-BMS, and WT Partnership) span two columns so
   their label sits on a single line on desktop. Phones/tablets wrap as usual. */
@media (min-width: 1101px) {
  .concept-logo-grid .concept-logo-tile--wide { grid-column: span 2; }
  .concept-logo-grid .concept-logo-tile--wide .concept-logo-tile-label { white-space: nowrap; }
}

/* ============================================================
   WADIA — Industries & Companies (client art changes 05/10/26):
   the five listings run in two columns on desktop
   (Landmark Residences / Retail Projects / Townships  |
    Marquee Offices / Hospitality Landmarks) so the text column is
   about as tall as the standard 640px zigzag row — the photo no
   longer has to stretch to fit a tall single column (which was
   what made it pixelate). Phones keep a single stack.
   ============================================================ */
.concept-zigzag-body .page-bullet-groups.page-bullet-cols {
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
  align-items: start;
}
.page-bullet-cols .bullet-col { display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 900px) {
  .concept-zigzag-body .page-bullet-groups.page-bullet-cols { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   ENQUIRE & SITE VISIT — forms laid over the masthead image
   (this page only). Desktop: title block on the left, the two
   form cards side by side on the right, all inside the first
   screen. Phones: title, then the two cards stacked on the image.
   ============================================================ */
.concept-hero--enquire {
  height: auto;
  min-height: calc(100vh - var(--header-height));
  align-items: center;
  gap: 40px;
  padding: 48px var(--gutter);
}
.concept-hero--enquire .concept-hero-content {
  padding: 0;
  width: auto;
  flex: 0 0 31%;
}
.concept-hero--enquire .concept-hero-title { font-size: clamp(34px, 4vw, 60px); }
.concept-hero--enquire .concept-hero-sub { font-size: clamp(16px, 1.5vw, 24px); line-height: 1.35; }
.concept-hero--enquire .concept-hero-note {
  position: relative; z-index: 2; margin-top: 14px; color: var(--white);
  font-size: 15px; font-weight: 300; line-height: 1.6;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.concept-hero--enquire .concept-form-panels {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  gap: 24px;
}
.concept-hero--enquire .concept-form-panel {
  background: rgba(255,255,255,0.95);
  padding: 30px 28px 28px;
}
.concept-hero--enquire .concept-form-panel-head { min-height: 200px; }
.concept-hero--enquire .concept-form-panel-title { font-size: 19px; margin-bottom: 14px; }
.concept-hero--enquire .concept-form-panel-body { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.concept-hero--enquire .concept-form-field { margin-bottom: 14px; }
@media (max-width: 900px) {
  .concept-hero--enquire { flex-direction: column; align-items: stretch; gap: 28px; padding: calc(var(--header-height) + 36px) var(--gutter) 56px; }
  .concept-hero--enquire .concept-hero-content { flex: none; }
  .concept-hero--enquire .concept-form-panel-head { min-height: auto; }
  .concept-hero--enquire .concept-form-panel { padding: 28px 22px; }
}

/* Compact variant (Wadia — Industries & Companies, 05/10/26): trims the
   text column's vertical padding and list rhythm on desktop so the row
   lands at the standard zigzag height and the photo isn't over-stretched. */
@media (min-width: 901px) {
  .concept-zigzag--compact .concept-zigzag-text { padding-top: 48px; padding-bottom: 48px; }
  .concept-zigzag--compact .concept-zigzag-body .page-bullet-groups { margin-top: 16px; }
  .concept-zigzag--compact .page-bullet-cols .bullet-col { gap: 14px; }
  .concept-zigzag--compact .bullet-group-title { margin-bottom: 2px; }
  .concept-zigzag--compact .bullet-group-list li { line-height: 1.55; }
  .concept-zigzag--compact .bullet-group-list li::before { top: 10px; }
}

/* THREE ICC wordmark in body copy (05/10/26): bolder than surrounding light copy. */
.brand-bold { font-weight: 700; }

/* Floor-plan carousel slides on /floor-plans (05/10/26): same treatment as the
   gated unit plans on The Apartments — blurred plan, dark wash, centred button. */
.carousel-slide.is-gated { overflow: hidden; }
.carousel-slide.is-gated img { filter: blur(18px); transform: scale(1.08); }
.carousel-slide.is-gated::before {
  content: ''; position: absolute; inset: 0; background: rgba(20,15,8,0.35); z-index: 1;
}

/* Privileges overview (05/10/26): the three age groups now list the actual
   privileges from the copy sheet, split Indoor / Outdoor. */
.privilege-sub-title {
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(0,0,0,0.55); margin: 12px 0 4px;
}
.bullet-group-list .sub-bullet-list { list-style: none; padding: 0 0 0 16px; margin: 2px 0 6px; }
.bullet-group-list .sub-bullet-list li::before { background: transparent; border: 1px solid var(--menu-accent); box-sizing: border-box; }
.privilege-age-adults .bullet-group-list { column-count: 2; column-gap: 28px; }
.privilege-age-adults .bullet-group-list > li { break-inside: avoid; }
@media (min-width: 901px) {
  /* Children and Seniors share the first row; Adults/Families spans the full width beneath. */
  .privilege-age-groups {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "children seniors" "adults adults";
    align-items: start;
    gap: 24px 36px;
  }
  .privilege-age-children { grid-area: children; }
  .privilege-age-seniors { grid-area: seniors; }
  .privilege-age-adults { grid-area: adults; }
}
@media (max-width: 900px) {
  .privilege-age-adults .bullet-group-list { column-count: 1; }
}

/* Age-group lists inside the Indoor / Outdoor zigzags (05/10/26): needs the
   .concept-zigzag-body prefix to beat that block's single-column rule. */
@media (min-width: 901px) {
  .concept-zigzag-body .privilege-age-groups {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "children seniors" "adults adults";
    align-items: start;
    gap: 22px 28px;
  }
}
.concept-zigzag-body .privilege-age-groups .bullet-group-list { font-size: 14px; }

/* ---- Experiences: 3 tiles while Testimonials is hidden ----
   Overrides --quad's 4 columns (and the 900px rule's 2) so no empty
   gold cell shows; drop this class to go back to 4 tiles. */
.concept-logo-grid--trio {
  max-width: 700px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .concept-logo-grid--trio { grid-template-columns: 1fr; }
}

/* ---- Homepage teasers only: equal-height sections ----
   By default a zigzag photo's own aspect ratio sets its section's height,
   so the 5 homepage teasers came out different heights (e.g. 640-767px at
   1920 wide, 640-1025px on tablet). Here the photo FILLS a fixed frame
   instead: 640px side-by-side, one shared height when stacked. */
.concept-zigzag--equal .concept-zigzag-media img {
  position: absolute;
  inset: 0;
  min-height: 0;
}
@media (max-width: 900px) {
  .concept-zigzag--equal .concept-zigzag-media { height: clamp(320px, 56vw, 480px); }
}

/* ---- Carousel in a zigzag image column (Bombay Realty > Completed Projects) ----
   Reuses the site's .page-carousel (wired in js/main.js), stretched to fill
   the image column instead of its usual full-width 46vh strip. */
.concept-zigzag-media--carousel { min-height: 640px; }
.concept-zigzag-media--carousel .page-carousel { position: absolute; inset: 0; max-width: none; }
.concept-zigzag-media--carousel .carousel-track,
.concept-zigzag-media--carousel .carousel-slide { height: 100%; min-height: 0; }
.concept-zigzag-media--carousel .carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.concept-zigzag-media--carousel .carousel-dot { background: rgba(255,255,255,0.6); }
.concept-zigzag-media--carousel .carousel-dot.is-active { background: var(--white); }
@media (max-width: 900px) {
  .concept-zigzag-media--carousel { min-height: 0; height: clamp(320px, 56vw, 480px); }
}

/* ---- Privacy Policy: extra levels the legal template didn't need for RERA ---- */
.concept-legal-updated {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.55);
  margin-bottom: 28px;
}
.concept-legal-minor {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-black);
  margin: 32px 0 12px;
}
.concept-legal-list {
  list-style: disc; /* style.css resets every ul to none */
  margin: 0 0 18px;
  padding-left: 20px;
}
.concept-legal-list li {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 8px;
}
.concept-legal-list li::marker { color: var(--menu-accent); }
.concept-legal-body .concept-legal-list a,
.concept-legal-body .page-body a { overflow-wrap: anywhere; }

/* ---- Enquiry "Thank You" popup (native <dialog>, opened by js/enquire.js) ---- */
.thank-you-dialog {
  margin: auto; /* style.css's * { margin: 0 } reset would pin the dialog top-left */
  border: none;
  padding: 0;
  background: transparent;
  max-width: calc(100vw - 40px);
}
.thank-you-dialog::backdrop { background: rgba(20, 17, 15, 0.55); }
.thank-you-dialog[open] { animation: thank-you-in 0.25s ease-out; }
@keyframes thank-you-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .thank-you-dialog[open] { animation: none; } }
.thank-you-panel {
  width: 420px;
  max-width: 100%;
  padding: 44px 40px 40px;
  background: var(--bg-cream);
  border-top: 3px solid var(--menu-accent);
  text-align: center;
}
.thank-you-icon { display: block; margin: 0 auto 18px; }
.thank-you-title {
  font-size: 26px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-black);
  margin-bottom: 10px;
}
.thank-you-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(0,0,0,0.75);
  margin-bottom: 28px;
}

/* ---- Image disclosure labels (client sheet 05/10/26): AI-generated / Actual /
   Representative / map note, small overlay in the image's corner ---- */
.img-label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  max-width: calc(100% - 24px);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: right;
  pointer-events: none;
}
/* Hero: bottom-right holds the SCROLL cue and bottom-left the title; the hero
   image starts behind the fixed header, so sit just below the header */
.img-label--top { top: calc(var(--header-height) + 12px); bottom: auto; right: var(--gutter); }
/* Lightbox is a full-screen overlay: pin the label to the viewport corner */
.img-label--lightbox { position: fixed; right: 20px; bottom: 20px; }
.concept-gallery-grid a .img-label { right: 6px; bottom: 6px; font-size: 9px; padding: 3px 6px; }
@media (max-width: 767px) {
  .img-label { font-size: 9px; right: 8px; bottom: 8px; }
  .img-label--top { top: calc(var(--header-height) + 8px); bottom: auto; right: 8px; }
}
.img-label::before { content: "*"; } /* client: asterisk before every disclaimer */

/* reCAPTCHA v3: hide Google's floating badge (it covers the mobile call/mail bar);
   Google permits this when the disclosure below is shown with the form. */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(0,0,0,0.5);
}
.recaptcha-note a { color: inherit; text-decoration: underline; }
/* Enquire hero: the forms fill the top-right, so its image label goes bottom-right */
.concept-hero--enquire .img-label--top { top: auto; bottom: 12px; }

/* Experiences page: NRI Corner / Partner Corner / Gallery tiles.
   Hover matches the site's buttons (solid bronze, white text) instead of
   the pale gold wash the partner-logo tiles use. */
/* The grid's gold background is what draws the 1px lines between tiles;
   its padding was showing that gold as a thick frame, so the spacing moves
   outside the grid instead. */
.concept-experiences-links .concept-logo-grid {
  padding: 0;
  width: calc(100% - 2 * var(--gutter));
}
.concept-experiences-links .concept-logo-tile { text-decoration: none; }
.concept-experiences-links .concept-logo-tile-label {
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  padding: 24px 12px;
  transition: color .25s ease;
}
.concept-experiences-links .concept-logo-tile:hover,
.concept-experiences-links .concept-logo-tile:focus-visible { background: var(--menu-accent); }
.concept-experiences-links .concept-logo-tile:hover .concept-logo-tile-label,
.concept-experiences-links .concept-logo-tile:focus-visible .concept-logo-tile-label { color: var(--white); }

/* Zigzag text panels carry the cream background, so moving/fading the
   panel itself exposed the white page behind it (a visible gap above
   the next section / footer while scrolling). Keep the panel still and
   reveal only its contents. */
.js-reveal-ready .concept-zigzag-text.concept-reveal { opacity: 1; transform: none; }
.js-reveal-ready .concept-zigzag-text.concept-reveal > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.concept-zigzag-text.concept-reveal.is-visible > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .concept-zigzag-text.concept-reveal > * { opacity: 1; transform: none; transition: none; }
}

/* Experiences: 2 tiles while NRI Corner and Testimonials are hidden. */
.concept-logo-grid--duo {
  max-width: 480px;
  grid-template-columns: repeat(2, 1fr);
}