/* ==========================================================================
   Ovation India DMC — Landing Page
   Design tokens follow the Ovation DMC brand (Poppins / #E81F62 / #2C1C3A)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts — Poppins, self-hosted from the same files the main Ovation DMC
      site serves (wp-content/themes/ovation/fonts/Poppins). Keeping them
      local avoids a third-party request and guarantees identical rendering.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/Poppins-Light.woff') format('woff');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/Poppins-Regular.woff') format('woff');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/Poppins-Medium.woff') format('woff');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/Poppins-SemiBold.woff') format('woff');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/Poppins-Bold.woff') format('woff');
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* brand */
  --pink:        #e81f62;
  --pink-dark:   #c8144f;
  --pink-soft:   #fde9ef;

  --purple:      #2c1c3a;
  --purple-deep: #1a1029;
  --card-line:   rgba(255,255,255,.10);

  --ink:         #212121;
  --ink-2:       #374151;
  --grey:        #6b7280;
  --grey-2:      #9ca3af;
  --line:        #e5e7eb;
  --white:       #fff;

  /* layout */
  --container:   1500px;
  --container-n: 1240px;
  --gutter:      clamp(16px, 2.2vw, 36px);
  --section-py:  clamp(30px, 2.6vw, 50px);
  --radius:      10px;

  /* ------------------------------------------------------------------
     Spacing scale.

     Every structural gap on the page derives from these seven steps, so
     the density of the whole layout is tuned here rather than across the
     ~50 individual declarations it used to live in. Each step is roughly
     1.3x the previous one; the max values are what set the desktop feel.
     ------------------------------------------------------------------ */
  --sp-1: clamp( 4px, .35vw,  6px);
  --sp-2: clamp( 7px, .55vw, 10px);
  --sp-3: clamp(10px, .80vw, 15px);
  --sp-4: clamp(13px, 1.05vw, 20px);
  --sp-5: clamp(17px, 1.40vw, 27px);
  --sp-6: clamp(22px, 1.80vw, 34px);
  --sp-7: clamp(28px, 2.30vw, 44px);

  /* type — one step down from the 1920px design for a tighter page */
  --fs-h1:   clamp(28px, 3.30vw, 63px);
  --fs-h2:   clamp(24px, 2.55vw, 49px);
  --fs-h2b:  clamp(22px, 2.05vw, 39px);
  /* --fs-body (30px) was retired: the About copy came down two steps and
     landed on --fs-lead, so body copy is now one size across the whole page.
     Running text then came down one more step (24->21 / 16->15): at the old
     caps the prose read closer to a brochure than to a corporate site. The
     mobile overrides below keep their own floors — this is a desktop trim. */
  --fs-lead: clamp(14px, 1.12vw, 21px);
  --fs-sm:   clamp(12px, 0.78vw, 15px);
  /* One size for every call to action — the two pill buttons, the form's
     Submit Request, and the floating "Plan my event" tab. The 1.4vw slope
     reaches the 20px cap by 1430px, so both 1440 and 1920 screens get the
     full 20px rather than only the very widest ones. */
  --fs-cta:  clamp(16px, 1.40vw, 20px);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:'Poppins',-apple-system,'Segoe UI',Arial,sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
}

/* Pinning the body is the only lock iOS Safari honours; main.js stores the
   offset in `top` and restores the scroll position on close. The padding
   backfills the scrollbar width so the page does not jump sideways. */
body.is-locked{
  position:fixed;
  inset-inline:0;
  width:100%;
  overflow:hidden;
  padding-right:var(--scrollbar, 0px);
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }

a{ color:inherit; }

button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }

:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:12px 20px; background:var(--pink); color:#fff;
  font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:calc(var(--container-n) + var(--gutter) * 2); }

.section{ padding-block:var(--section-py); }
.section--pink{   background:var(--pink);   color:#fff; }
.section--purple{ background:var(--purple); color:#fff; }

/* Section headings ---------------------------------------------------------- */
.section__title{
  text-align:center;
  line-height:1.22;
  letter-spacing:-.01em;
}
.section__title--light{ font-size:var(--fs-h2);  font-weight:300; }
.section__title--bold{  font-size:var(--fs-h2b); font-weight:700; }
.section__title--dark{  color:var(--ink); }
.section__title--pink{  color:var(--pink); }

.section__sub{
  margin-top:var(--sp-2);
  text-align:center;
  font-size:var(--fs-lead);
  font-weight:300;
  line-height:1.5;
  color:#4b4b4b;
}
.section__sub--light{ color:rgba(255,255,255,.94); }
.section__sub--wide{ letter-spacing:.03em; }

/* Wrapping ------------------------------------------------------------------
   On desktop these headings mostly fit one or two hand-set lines; on a phone
   every one of them wraps, and the default greedy algorithm strands a single
   word on the last line ("Unmatched Local / Expertise"). `balance` evens the
   lines of a short heading, `pretty` only protects the last line, which is the
   right trade for long body copy. Both are progressive — browsers that do not
   support them fall back to normal wrapping. */
.hero__title,
.section__title,
.beyond__title,
.serve__eyebrow,
.s-card__title,
.award__title,
.modal__title{ text-wrap:balance; }

.section__sub,
.about__text,
.beyond__text,
.serve__copy,
.s-card__text,
.award__text,
.hero__tagline{ text-wrap:pretty; }

/* Buttons ------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:var(--sp-2) var(--sp-6);
  border-radius:999px;
  font-size:var(--fs-cta);
  font-weight:400;
  line-height:1.25;
  text-decoration:none;
  transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform:translateY(-2px); }

.btn--dark{ background:var(--purple); color:#fff; }
.btn--dark:hover{ background:var(--purple-deep); box-shadow:0 10px 26px rgba(0,0,0,.25); }

.btn--pink{ background:var(--pink); color:#fff; }
.btn--pink:hover{ background:var(--pink-dark); box-shadow:0 10px 26px rgba(232,31,98,.35); }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
/* Height is tied to the viewport HEIGHT, not its width. Driving it from vw
   made the hero 96% tall on a 1080p monitor but only 40% on an iPad in
   portrait. A full-height hero owns the fold on every device.
   svh = the "address bar visible" height, so a phone never crops the hero. */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#1b0d18;
  color:#fff;
}

.hero__slider{ position:absolute; inset:0; }

/* The scale is driven by a transition, not a keyframe tied to .is-active:
   a keyframe would be dropped the instant the class is removed, snapping the
   outgoing slide back to 1.06 while it is still visibly fading out. */
.hero__slide{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.4s ease, transform 7s ease-out;
  will-change:opacity, transform;
}
.hero__slide.is-active{
  opacity:1;
  transform:scale(1);
}

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 26%),
    linear-gradient(0deg,  rgba(0,0,0,.70) 0%, rgba(0,0,0,0) 42%);
}

.hero__logo{
  position:absolute;
  top:var(--sp-4);
  left:clamp(18px, 2.1vw, 40px);
  z-index:3;
}
.hero__logo img{ width:clamp(126px, 11vw, 212px); height:auto; }

.hero__inner{
  position:relative;
  z-index:2;
  text-align:center;
  padding-bottom:var(--sp-7);
}

.hero__title{
  font-size:var(--fs-h1);
  font-weight:300;
  line-height:1.16;
  letter-spacing:-.005em;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}

.hero__tagline{
  margin-top:var(--sp-3);
  font-size:clamp(13px, 1.67vw, 32px);
  font-weight:300;
  line-height:1.42;
  text-transform:uppercase;
  letter-spacing:.005em;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}

/* --------------------------------------------------------------------------
   5. About
   -------------------------------------------------------------------------- */
/* The measure narrows with the type. Holding 1470px at the smaller size would
   push the line length past 90 characters and lose the paragraph shape the
   layout was drawn with. */
.about__text{
  max-width:1030px;
  margin:var(--sp-4) auto 0;
  text-align:center;
  font-size:var(--fs-lead);
  font-weight:300;
  line-height:1.42;
}
.about__text + .about__text{ margin-top:var(--sp-5); }

.about__cta{ margin-top:var(--sp-6); text-align:center; }

/* --------------------------------------------------------------------------
   6. We serve
   -------------------------------------------------------------------------- */
.serve{
  background:
    radial-gradient(120% 90% at 66% 42%, #34294a 0%, rgba(52,41,74,0) 62%),
    var(--purple);
  color:#fff;
}

.serve__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.09fr);
  gap:var(--sp-7);
  align-items:center;
}

.rule{
  display:block;
  width:clamp(34px,3vw,56px);
  height:3px;
  background:var(--pink);
  border-radius:2px;
}

.serve__eyebrow{
  margin-top:var(--sp-4);
  font-size:clamp(20px,1.8vw,34px);
  font-weight:400;
  line-height:1.2;
}

.serve__list{
  margin:var(--sp-1) 0 var(--sp-3);
  font-size:clamp(24px,2.6vw,50px);
  font-weight:700;
  line-height:1.22;
  color:var(--pink);
}
.serve__list span{ display:block; }
.serve__list span:not(:last-child)::after{
  content:' \00B7';
  color:var(--pink);
}

.serve__copy{
  margin:var(--sp-4) 0 var(--sp-5);
  font-size:var(--fs-sm);
  font-weight:300;
  line-height:1.62;
  color:rgba(255,255,255,.9);
}

/* Cards --------------------------------------------------------------------- */
.serve__cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-3);
}

.s-card{
  padding:var(--sp-5);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--card-line);
  border-radius:14px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.s-card:hover{
  transform:translateY(-4px);
  border-color:rgba(232,31,98,.55);
  box-shadow:0 16px 34px rgba(0,0,0,.28);
}

.s-card__icon{
  display:grid; place-items:center;
  width:clamp(52px,4.1vw,78px);
  aspect-ratio:1;
  margin-bottom:var(--sp-3);
  border:2px solid var(--pink);
  border-radius:50%;
}
.s-card__icon img{ width:64%; height:auto; }

.s-card__icon--bare{ border:0; }
.s-card__icon--bare img{ width:100%; }

.s-card__title{
  font-size:clamp(14px,1.05vw,20px);
  font-weight:700;
  line-height:1.28;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.s-card__title::after{
  content:'';
  display:block;
  width:clamp(26px,2.2vw,42px);
  height:3px;
  margin-top:var(--sp-2);
  background:var(--pink);
  border-radius:2px;
}

.s-card__text{
  margin-top:var(--sp-3);
  font-size:clamp(12px,.76vw,15px);
  font-weight:300;
  line-height:1.62;
  color:rgba(255,255,255,.86);
}

/* --------------------------------------------------------------------------
   7. Ovation at a Glance
   -------------------------------------------------------------------------- */
/* The stat labels sit tight under the second row, so the band needs a little
   more room below than the shared section rhythm gives it. */
.glance{ padding-bottom:calc(var(--section-py) + var(--sp-5)); }

/* max-content columns + space-between, not 3x1fr: equal columns left the third
   one starting mid-container, so its short labels ("Clients", "Years of
   experience") died ~200px shy of the right edge and the block read narrower
   than every other section. Sizing tracks to their text and pushing them apart
   puts column 1 flush left and column 3 flush right, so the row spans the same
   left-to-right measure as the cards above it. */
.glance__grid{
  display:grid;
  /* minmax(0,max-content), not bare max-content: a bare max-content track can
     never shrink, so a long label like "Events organized every year" would push
     the grid past the container and put a horizontal scrollbar on the whole
     page at narrow widths. The minmax floor lets it wrap instead. */
  grid-template-columns:repeat(3,minmax(0,max-content));
  justify-content:space-between;
  gap:var(--sp-5) var(--sp-6);
  margin-top:var(--sp-6);
}

/* Left-aligned, not centred: centring each stat inside its column let the icon
   drift with the label width, so "Destinations" and "Languages spoken" no longer
   started on the same vertical line. Flush left keeps the icons in a column. */
.stat{ display:flex; align-items:center; justify-content:flex-start; gap:var(--sp-3); }

/* the source icons are not square (the handshake is 342x218), so constrain
   both axes to a common box and let each keep its own proportions */
.stat__icon{
  width:auto; height:auto;
  max-width:clamp(42px,3.7vw,70px);
  max-height:clamp(38px,3.4vw,64px);
  flex:none;
}

.stat__value{
  display:block;
  font-size:clamp(18px,1.7vw,32px);
  font-weight:700;
  line-height:1.1;
}
.stat__label{
  display:block;
  margin-top:2px;
  font-size:clamp(11px,.73vw,14px);
  font-weight:500;
  line-height:1.35;
}

/* --------------------------------------------------------------------------
   8. Our clients — logo marquee
   -------------------------------------------------------------------------- */
.clients{ background:var(--white); }

/* Full-bleed: the marquee sits outside .container so logos travel the whole
   width and disappear off-screen, while the heading above keeps the container
   measure. The mask feathers both ends so marks fade out instead of being
   guillotined at the viewport edge. */
.lmq{
  --logo-h:clamp(30px,2.6vw,42px);   /* nominal height for a ~4.4:1 wordmark */
  --logo-max-w:clamp(150px,15vw,215px);
  --lmq-gap:clamp(34px,4.4vw,78px);
  --lmq-speed:52s;

  margin-top:var(--sp-7);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}

/* width:max-content stops the two sets wrapping; -50% is exactly one set, so
   the copy lands where the original started and the seam is invisible. */
.lmq__track{
  display:flex;
  width:max-content;
  animation:lmqScroll var(--lmq-speed) linear infinite;
}
@keyframes lmqScroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* Hover anywhere on the strip holds it; play-state resumes from the same
   position rather than restarting. focus-within does the same for keyboards. */
.lmq:hover  .lmq__track,
.lmq:focus-within .lmq__track{ animation-play-state:paused; }

.lmq__set{
  display:flex;
  align-items:center;
  gap:var(--lmq-gap);
  padding-inline:calc(var(--lmq-gap) / 2);
  margin:0;
}
.lmq__item{ display:flex; align-items:center; flex:none; }

/* The source files carried wildly different amounts of built-in padding — the
   Axiom mark filled 17% of its frame height, Hitachi 18%, BCG 19%, while
   Forever filled 100% — so every file here is pre-trimmed to its ink box and
   sizing works off the real artwork.
   --k then evens out how much area each mark covers. Pure equal-area (k as
   1/sqrt(aspect)) over-corrects when aspects run from 0.79 to 8.9: it drops
   the ultra-wide wordmarks to ~20px tall. k = aspect^-0.30 damps that, and
   --logo-max-w caps the longest lockups so none of them runs away with the
   row. Values below are that curve, normalised so a 4.4:1 mark sits at 1. */
.lmq__logo{
  width:auto;
  height:calc(var(--logo-h) * var(--k,1));
  max-width:var(--logo-max-w);
  object-fit:contain;
  filter:grayscale(1);
  opacity:.82;
  transition:opacity .25s ease;
}
.lmq__logo:hover{ opacity:1; }

.lmq__logo--forever              { --k:1.67; }  /* 0.79:1 — the one portrait mark */
.lmq__logo--asia-business-council{ --k:1.55; }  /* 1.01:1 square tile */
.lmq__logo--kpmg                 { --k:1.19; }
.lmq__logo--linux-foundation     { --k:1.12; }
.lmq__logo--mckinsey             { --k:1.10; }
.lmq__logo--cepi                 { --k:1.08; }
.lmq__logo--boeing               { --k:1.00; }
.lmq__logo--bcg                  { --k:0.97; }
.lmq__logo--axiom-asia           { --k:0.96; }
.lmq__logo--deloitte             { --k:0.94; }
.lmq__logo--hitachi-vantara      { --k:0.85; }
.lmq__logo--oracle               { --k:0.84; }
.lmq__logo--motorola-solutions   { --k:0.81; }  /* 8.9:1 — the widest lockup */

/* --------------------------------------------------------------------------
   9. Video bands
   -------------------------------------------------------------------------- */
.video-band{ background:#000; }

/* Both source files are 1920x1080. The band used to be 1920/860 (2.23:1), so
   object-fit:cover threw away ~11% of the frame off the top and the same off
   the bottom — heads and captions were being cut. Matching the band to the
   footage means cover has nothing left to crop and the video plays at 100%. */
.video{
  position:relative;
  margin:0;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
}

.video__poster,
.video__el{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* The two poster JPGs are 1920x983 and 1920x975 — cut for the old wide band,
   not 16:9 — so cover still trims ~4% off each side of the still. Re-export
   them at 1920x1080 and the poster will line up frame-for-frame with play. */
/* the <video> stays out of sight until it can actually play, so a huge file
   buffering never leaves the viewer staring at a black rectangle */
.video__el{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.video.is-playing .video__el{ opacity:1; pointer-events:auto; }

/* buffering indicator over the poster */
.video.is-loading .video__play svg{ opacity:.25; }
.video.is-loading::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:clamp(58px,5.4vw,104px);
  aspect-ratio:1;
  margin:calc(clamp(58px,5.4vw,104px) / -2) 0 0 calc(clamp(58px,5.4vw,104px) / -2);
  border:4px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:videoSpin .9s linear infinite;
}
@keyframes videoSpin{ to{ transform:rotate(360deg); } }

/* brand mark burned over the poster, as per the layout */
.video__brand{
  position:absolute;
  top:clamp(12px,1.2vw,24px);
  right:clamp(14px,1.4vw,28px);
  width:clamp(96px,8.6vw,166px);
  height:auto;
  opacity:.95;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
  pointer-events:none;
}

.video__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.16));
  transition:background-color .3s ease;
}
.video__play svg{
  width:clamp(58px,5.4vw,104px);
  height:auto;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.4));
  transition:transform .3s ease;
}
.video__play:hover svg{ transform:scale(1.08); }

/* --------------------------------------------------------------------------
   10. India beyond expectations
   -------------------------------------------------------------------------- */
.beyond{
  position:relative;
  display:flex;
  align-items:flex-end;
  /* was 61.8vw/1187px — the same width-driven sizing the hero had, which made
     this band enormous on wide screens. Height-relative keeps it in proportion.
     Raised from 52vh/760px: at that height the 1.51:1 photograph had to lose
     ~709px to fill a 3.44:1 slot, and half of that came off the top — straight
     through the dome. A taller band both crops less and gives the monument the
     presence a full-bleed hero image is there for. */
  min-height:clamp(340px, 74vh, 920px);
  overflow:hidden;
  color:#fff;
  background:#3a2a20;
}
/* 12%, not the default 50%: whatever the band still has to crop is taken from
   the river foreground at the bottom rather than split evenly, so the finial
   (9.8% down the file) and the minaret tips clear the top edge at every width.
   The foreground it gives up is the part the text gradient already covers. */
.beyond__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 12%;
}
.beyond::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,8,4,.72) 0%, rgba(20,8,4,.28) 26%, rgba(20,8,4,0) 52%);
}
.beyond__inner{
  position:relative;
  z-index:2;
  padding-bottom:var(--sp-6);
  text-align:center;
}

.beyond__title{
  font-size:var(--fs-h2b);
  font-weight:700;
  line-height:1.2;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.beyond__text{
  max-width:1000px;
  margin:var(--sp-3) auto 0;
  font-size:var(--fs-lead);
  font-weight:300;
  line-height:1.42;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
   11. See India differently
   -------------------------------------------------------------------------- */
.differently{ background:var(--white); }

/* --------------------------------------------------------------------------
   12. Awards
   -------------------------------------------------------------------------- */
.awards{
  position:relative;
  /* extra headroom: this section butts straight up against the video band, so
     the heading needs more clearance than the standard section padding gives */
  padding-top:calc(var(--section-py) + var(--sp-5));
  color:#fff;
  background:
    url('../images/Recognised for Excellence/background-texture.webp') center/cover no-repeat,
    radial-gradient(85% 78% at 50% 0%, #4a1c46 0%, #2a1739 44%, #201634 100%);
  background-blend-mode:overlay, normal;
}

.awards__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-7);
  margin-top:var(--sp-7);
}

.award{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--sp-4);
}
.award__img{
  height:auto;
  flex:none;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.4));
}
/* Sized from each trophy's own proportions so the two read as equals. The max
   matches the PNG's intrinsic width so neither is ever upscaled. */
.award__img--crystal{ width:clamp(72px, 6.4vw,  122px); }
.award__img--wow    { width:clamp(124px,12.3vw, 237px); }
.award__title{
  font-size:clamp(15px,1.15vw,22px);
  font-weight:600;
  line-height:1.3;
}
.award__text{
  margin-top:var(--sp-1);
  font-size:clamp(12px,.76vw,15px);
  font-weight:300;
  line-height:1.5;
  color:rgba(255,255,255,.86);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.footer{
  padding:var(--sp-6) var(--gutter);
  text-align:center;
  background:var(--purple-deep);
  color:rgba(255,255,255,.6);
}
.footer__logo{ display:inline-block; }
.footer__logo img{ width:clamp(120px,9.5vw,182px); height:auto; margin-inline:auto; }
.footer__copy{
  margin-top:var(--sp-2);
  font-size:clamp(12px,.7vw,13px);
  font-weight:300;
  color:rgba(255,255,255,.72);   /* .6 fell under 4.5:1 on this background */
}

/* --------------------------------------------------------------------------
   14. Floating actions
   -------------------------------------------------------------------------- */
.floaters{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.floaters__tab{
  display:block;                 /* it is an <a> so the no-JS CTA still works */
  text-decoration:none;
  cursor:pointer;
  writing-mode:vertical-rl;
  padding:clamp(16px,1.5vw,28px) clamp(6px,.6vw,11px);
  background:var(--pink);
  color:#fff;
  font-size:var(--fs-cta);
  font-weight:500;
  letter-spacing:.01em;
  border-radius:12px 0 0 12px;
  box-shadow:-4px 4px 16px rgba(0,0,0,.22);
  transition:background-color .25s ease, padding-right .25s ease;
}
.floaters__tab:hover{ background:var(--pink-dark); padding-right:clamp(10px,.9vw,16px); }

.floaters__btn{
  display:block;
  margin-right:6px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:-2px 4px 14px rgba(0,0,0,.22);
  transition:transform .25s ease;
}
.floaters__btn:hover{ transform:scale(1.08); }
.floaters__btn img{ width:clamp(36px,2.6vw,48px); height:auto; }

/* The call glyph is a solid black disc, so it sits on a white circle to stay
   readable against dark page sections. Spread on the white layer is dialled to
   0 — raise it if the icon ever needs a visible ring beyond its own edge. */
.floaters__btn--call{
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 0px #fff, -2px 4px 14px rgba(0,0,0,.22);
}

/* --------------------------------------------------------------------------
   15. Modal
   -------------------------------------------------------------------------- */
/* Flex + `margin:auto` on the dialog, not `place-items:center`: auto margins
   never resolve negative, so a dialog taller than the viewport still scrolls
   to its own top instead of hiding it above the scroll origin. */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  padding:clamp(12px,2vw,40px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.modal[hidden]{ display:none; }

.modal__overlay{
  position:fixed;
  inset:0;
  background:rgba(24,10,26,.62);
  backdrop-filter:blur(2px);
  animation:fadeIn .25s ease;
}

.modal__dialog{
  position:relative;
  margin:auto;
  width:100%;
  max-width:1055px;
  padding:var(--sp-6) var(--sp-7);
  background:#fff;
  border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  animation:popIn .3s cubic-bezier(.2,.8,.3,1);
}

@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }

.modal__close{
  position:absolute;
  top:clamp(14px,1.2vw,22px);
  right:clamp(14px,1.2vw,22px);
  display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  transition:border-color .2s ease, background-color .2s ease;
}
.modal__close:hover{ border-color:var(--pink); background:var(--pink-soft); }
.modal__close img{ width:18px; }

.modal__head{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding-right:52px;
}
.modal__badge{
  display:grid; place-items:center;
  width:clamp(46px,3.4vw,62px);
  aspect-ratio:1;
  flex:none;
  background:var(--pink-soft);
  border-radius:14px;
}
.modal__badge img{ width:56%; }

.modal__title{
  font-size:clamp(20px,1.6vw,31px);
  font-weight:700;
  line-height:1.2;
  color:#1f2937;
}
.modal__sub{
  margin-top:2px;
  font-size:clamp(12px,.76vw,15px);
  font-weight:400;
  color:var(--grey);
}

/* Form ---------------------------------------------------------------------- */
.pform{ margin-top:var(--sp-5); }

.pform__row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-5);
}

.field{ margin-bottom:var(--sp-4); min-width:0; }

.field__label{
  display:block;
  margin-bottom:var(--sp-1);
  font-size:clamp(12px,.83vw,16px);
  font-weight:600;
  color:var(--ink-2);
}
.field__label i,
.pform__required i{ font-style:normal; color:var(--pink); }

.field__control{ position:relative; }

.field__icon{
  position:absolute;
  top:50%;
  left:clamp(12px,.85vw,17px);
  transform:translateY(-50%);
  width:clamp(17px,1.05vw,20px);
  pointer-events:none;
}
.field__icon--flag{ width:clamp(20px,1.3vw,25px); }

.field__control input,
.field__control select,
.field__control textarea{
  width:100%;
  padding:clamp(11px,.85vw,16px) clamp(14px,1vw,18px) clamp(11px,.85vw,16px) clamp(38px,2.7vw,52px);
  font-family:inherit;
  font-size:clamp(13px,.88vw,17px);
  font-weight:400;
  color:var(--ink-2);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .2s ease, box-shadow .2s ease;
  appearance:none;
}
.field__control input::placeholder,
.field__control textarea::placeholder{ color:var(--grey-2); }

.field__control input:focus,
.field__control select:focus,
.field__control textarea:focus{
  outline:none;
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(232,31,98,.12);
}

.field__control select{ cursor:pointer; padding-right:44px; }

/* Destination select has no leading icon — pull the text back to the normal inset */
.field__control--select select{ padding-left:clamp(14px,1vw,18px); }
.field__control--select select:has(option[value=""]:checked){ color:var(--grey-2); }
.field__control--select select:has(option[value=""]:checked) ~ .field__tick{ display:none; }

.field__control--area .field__icon{ top:clamp(16px,1.2vw,22px); transform:none; }
.field__control textarea{
  min-height:clamp(88px,6.6vw,124px);
  padding-bottom:34px;
  resize:none;
  line-height:1.5;
}
.field__counter{
  position:absolute;
  right:clamp(12px,.85vw,17px);
  bottom:clamp(8px,.6vw,12px);
  font-size:clamp(11px,.68vw,13px);
  color:var(--grey-2);
  pointer-events:none;
}

.field__tick{
  position:absolute;
  top:50%;
  right:clamp(12px,.85vw,17px);
  transform:translateY(-50%);
  width:clamp(18px,1.15vw,22px);
  pointer-events:none;
}

.field__pick{
  position:absolute;
  top:50%;
  right:clamp(8px,.6vw,12px);
  transform:translateY(-50%);
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:8px;
  transition:background-color .2s ease;
}
.field__pick:hover{ background:var(--pink-soft); }
.field__pick img{ width:20px; }

/* hide the native date/number affordances so the custom ones line up */
.field__control input[type=date]::-webkit-calendar-picker-indicator{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}
.field__control input[type=number]::-webkit-outer-spin-button,
.field__control input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.field__control input[type=number]{ -moz-appearance:textfield; }

/* invalid state */
.field.is-invalid .field__control input,
.field.is-invalid .field__control select,
.field.is-invalid .field__control textarea,
.field.is-invalid .dropzone{ border-color:var(--pink); }

.field__error{
  margin-top:5px;
  font-size:clamp(11px,.68vw,13px);
  color:var(--pink);
  min-height:0;
}

/* Dropzone ------------------------------------------------------------------ */
.dropzone{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  border:1.5px dashed #d7d7db;
  border-radius:var(--radius);
  transition:border-color .2s ease, background-color .2s ease;
}
.dropzone.is-over{ border-color:var(--pink); background:var(--pink-soft); }
.dropzone__icon{ width:clamp(26px,2vw,38px); flex:none; }

.dropzone__title{
  font-size:clamp(12px,.85vw,16px);
  font-weight:600;
  color:var(--ink-2);
}
.dropzone__hint{
  margin-top:2px;
  font-size:clamp(11px,.7vw,14px);
  font-weight:400;
  color:var(--grey);
}
.dropzone__browse{
  padding:0;
  color:var(--pink);
  font-weight:600;
  text-decoration:underline;
}
.dropzone__file{
  margin-top:8px;
  font-size:clamp(11px,.7vw,14px);
  color:var(--ink-2);
}
.dropzone__file[hidden]{ display:none; }

/* Form foot ----------------------------------------------------------------- */
.pform__foot{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--sp-5);
  margin-top:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
}

.pform__secure{
  display:flex; align-items:center; gap:8px;
  font-size:clamp(12px,.83vw,16px);
  font-weight:600;
  color:var(--ink-2);
}
.pform__secure img{ width:clamp(16px,1.1vw,21px); }

.pform__policy{
  margin-top:3px;
  font-size:clamp(9.5px,.57vw,11px);
  line-height:1.5;
  color:var(--grey);
}
.pform__policy a{ color:var(--pink); }

.pform__required{
  justify-self:end;
  font-size:clamp(11px,.73vw,14px);
  color:var(--grey);
  white-space:nowrap;
}

.btn--submit{
  border-radius:8px;
  padding:var(--sp-3) var(--sp-7);
  font-weight:600;              /* size comes from .btn — --fs-cta */
  white-space:nowrap;
}
.btn--submit img{ width:clamp(17px,1.1vw,21px); }
.btn--submit[disabled]{ opacity:.6; pointer-events:none; }

.pform__success{
  display:flex; align-items:center; gap:10px;
  margin-top:16px;
  padding:14px 18px;
  background:var(--pink-soft);
  border-radius:var(--radius);
  font-size:clamp(12px,.83vw,16px);
  font-weight:500;
  color:var(--pink-dark);
}
.pform__success[hidden]{ display:none; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .serve__grid{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .glance__grid{ grid-template-columns:repeat(2,minmax(0,max-content)); }
  .awards__grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .beyond{ min-height:480px; }
}

@media (max-width:768px){
  :root{
    --fs-h1:   clamp(26px, 6.4vw, 40px);
    --fs-h2:   clamp(23px, 5.6vw, 34px);
    --fs-h2b:  clamp(21px, 5.2vw, 32px);
    /* 14px floor, not 13px: --fs-lead now carries the About body copy too */
    --fs-lead: clamp(14px, 3.2vw, 18px);
    --fs-sm:   clamp(13px, 3.1vw, 17px);
    --section-py: 44px;
  }

  /* 13px floor, not 11px: 2.9vw bottomed out at the 11px minimum on any phone
     narrower than ~380px, and this line is uppercase with letter-spacing, so it
     reads smaller than its size. The 16px cap is kept so the step back to the
     desktop rule at 769px stays the same size it always was. */
  .hero__tagline{ font-size:clamp(13px, 3.5vw, 16px); }

  /* --sp-7 bottoms out at 28px, which left the tagline sitting almost on the
     bottom edge of the screen. env() adds clearance for the home indicator on
     notched handsets and resolves to 0 everywhere else. */
  .hero__inner{ padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px)); }
  .beyond__inner{ padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px)); }
  .hero__tagline br{ display:none; }

  .serve__cards{ grid-template-columns:minmax(0,1fr); }
  .serve__copy br,
  .beyond__text br,
  .section__sub br{ display:none; }

  /* Fewer logos are on screen at once on a phone, so the same 52s would crawl.
     Shorter cycle keeps the perceived speed roughly constant, and a tighter
     mask keeps more of the strip at full opacity on a narrow viewport. */
  .lmq{
    --lmq-speed:34s;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  }

  .pform__row{ grid-template-columns:minmax(0,1fr); }
  .pform__foot{ grid-template-columns:minmax(0,1fr); text-align:center; }
  .pform__secure{ justify-content:center; }
  .pform__policy{ text-align:center; }
  .pform__required{ justify-self:center; }
  .btn--submit{ width:100%; }

  .modal__head{ padding-right:44px; }

  .floaters__tab{ padding-block:14px; }
  /* 44px, not 38: the anchor is only as big as the image, and 38px is under
     the 44px minimum touch target both iOS and WCAG 2.5.8 ask for. */
  .floaters__btn img{ width:44px; }

  /* Anything under 16px makes iOS Safari zoom the whole page the moment the
     field takes focus, and it does not zoom back out — so every tap into this
     form left the user stranded at 1.3x with the layout shifted sideways.
     The controls are pinned to 16px on phones for that reason alone. */
  .field__control input,
  .field__control select,
  .field__control textarea{ font-size:16px; }

  /* The surrounding form chrome bottoms out at 12px, small enough to strain
     on a phone; these are the labels a user reads while filling the form. */
  .field__label,
  .dropzone__title,
  .modal__sub{ font-size:14px; }

  /* The photo is 1.51:1 landscape. Holding the 480px band on a ~375px screen
     forced a portrait crop that threw away both minarets; 360px keeps far more
     of the monument in frame. */
  .beyond{ min-height:360px; }

  /* Several clamps bottom out at 9.5–11px, which is below a readable floor on
     a phone. Error copy in particular has to be legible, so raise the small
     type here rather than weakening the desktop sizes that match the design. */
  .stat__label,
  .dropzone__hint,
  .dropzone__file,
  .field__error,
  .field__counter,
  .pform__policy,
  .pform__required{ font-size:13px; }

  .s-card__text,
  .award__text{ font-size:14px; }
}

@media (max-width:480px){
  /* single column: space-between has no gap left to distribute, so drop back to
     a full-width track and let the stats sit flush left down the page */
  .glance__grid{ grid-template-columns:minmax(0,1fr); justify-content:start; }
  .award{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
  .dropzone{ flex-direction:column; text-align:center; }
}

/* --------------------------------------------------------------------------
   17. Motion / print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  /* The rule above only forces animation-iteration-count, which would strand
     the marquee track mid-slide at -50%. Kill the animation outright and hand
     the user a normal horizontal scroll instead. */
  .lmq{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .lmq__track{ animation:none; }
  .lmq__set[aria-hidden="true"]{ display:none; }
}

@media print{
  .floaters,.modal,.video__play{ display:none !important; }
}