/* Home hero: full-screen video of the South Indian hills (build/hero_new.py writes the markup).
   Every token and rule is scoped to .sih, so nothing else on the site changes. */
.sih{--color-background:#000000;--color-forest:#000000;--color-cream:#FFFFFF;--color-gold:#b7b7b7;
  --sih-text-2:rgba(255,255,255,.88);--sih-line:rgba(255,255,255,.30);--page-gutter:clamp(24px,5vw,80px);
  --sih-ui:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--sih-head:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--color-background);color:var(--color-cream);isolation:isolate}

/* video and its overlay */
.sih-media{position:absolute;inset:0;z-index:-2}
.sih-media video,.sih-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.sih::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.38) 0%,transparent 35%),
             linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.40) 48%,rgba(0,0,0,.10) 100%)}

/* navigation */
.sih-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px var(--page-gutter) 0;font-family:var(--sih-ui)}
.sih-brand{color:var(--color-cream);text-decoration:none;font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.1}
.sih-brand small{display:block;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sih-text-2);margin-top:3px}
.sih-links{display:flex;align-items:center;gap:32px;margin:0;padding:0;list-style:none}
.sih-links a{color:var(--color-cream);text-decoration:none;font-size:15px;font-weight:500;opacity:.9;transition:opacity .25s,color .25s}
.sih-links a:hover{opacity:1;color:var(--color-gold)}
.sih-plan{font:600 14.5px/1 var(--sih-ui);color:var(--color-cream);background:transparent;border:1px solid var(--color-gold);border-radius:999px;padding:12px 20px;cursor:pointer;transition:background .25s,color .25s}
.sih-plan:hover{background:var(--color-gold);color:var(--color-forest)}
.sih-menu{display:none;font:600 14px/1 var(--sih-ui);color:var(--color-cream);background:rgba(0,0,0,.35);border:1px solid var(--sih-line);border-radius:999px;padding:11px 16px;cursor:pointer}
.sih a:focus-visible,.sih button:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px}

/* copy */
.sih-copy{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px var(--page-gutter) 96px;max-width:calc(760px + 2 * var(--page-gutter))}
/* a soft shade behind the words only, for readable text over the bright mist (measured: cream text 5:1+, gold 3:1+ on the brightest frame) */
.sih-copy{position:relative}
.sih-copy::before{content:"";position:absolute;left:0;top:8%;width:min(980px,100%);height:84%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 38% 50%,rgba(0,0,0,.40),rgba(0,0,0,.28) 55%,transparent 100%)}
.sih h1,.sih-line,.sih-eyebrow{text-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 28px rgba(0,0,0,.45)}
.sih-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 24px;font:500 12px/1.3 var(--sih-ui);letter-spacing:.20em;text-transform:uppercase;color:var(--color-cream)}
.sih-eyebrow::before{content:"";width:36px;height:1px;background:var(--color-gold);flex:none}
.sih h1{margin:0;max-width:760px;font-family:var(--sih-head);font-weight:400;font-size:clamp(52px,5.6vw,88px);line-height:.98;letter-spacing:-.035em;color:var(--color-cream)}
.sih h1 em{font-style:italic;color:var(--color-gold)}
.sih-line{margin:24px 0 0;max-width:650px;font-family:var(--sih-head);font-size:clamp(18px,1.6vw,25px);line-height:1.4;color:rgba(255,255,255,.92)}
.sih-cta{align-self:flex-start;margin-top:36px;display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 32px;border:0;border-radius:999px;
  background:#F4F4F4;color:var(--color-forest);   /* white with the dark forest-green text (Ruksana, 28 Oct) */font:600 15px/1 var(--sih-ui);text-decoration:none;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.sih-cta span{display:inline-block;transition:transform .25s ease}
.sih-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28);background:#F4F4F4}
.sih-cta:hover span{transform:translateY(3px)}

/* scroll indicator */
.sih-scroll{position:absolute;left:var(--page-gutter);bottom:30px;display:flex;align-items:center;gap:12px;font:500 10.5px/1 var(--sih-ui);letter-spacing:.20em;text-transform:uppercase;color:var(--sih-text-2)}
.sih-scroll i{position:relative;display:block;width:1px;height:34px;background:var(--sih-line);overflow:hidden}
.sih-scroll i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--color-gold);animation:sih-drop 2.2s ease-in-out infinite}
@keyframes sih-drop{0%{top:-40%}70%,100%{top:100%}}

/* entrance: opacity and a small lift, in order (CSS only) */
@keyframes sih-in{from{opacity:.01;transform:translateY(14px)}to{opacity:1;transform:none}}   /* .01, not 0: looks the same, and the browser counts the text as painted from the first frame */
.sih-nav,.sih-eyebrow,.sih h1,.sih-line,.sih-cta,.sih-scroll{animation:sih-in .6s cubic-bezier(.2,.7,.2,1) both}
.sih-nav{animation-delay:.1s}.sih-eyebrow{animation-delay:.15s}.sih h1{animation-delay:.2s}.sih-line{animation-delay:.35s}.sih-cta{animation-delay:.45s}.sih-scroll{animation-delay:.6s}

/* while the hero is on screen the page's own floating menu button and side rail stay out of the way (no double navigation) */
html.sih-on .mnav-btn,html.sih-on .rail{opacity:0!important;pointer-events:none!important;visibility:hidden}
.mnav-btn,.rail{transition:opacity .3s}

/* tablets and phones */
@media (max-width:900px){
  .sih-links,.sih-plan{display:none}
  .sih-menu{display:inline-flex}
  .sih-nav{padding-top:24px}
}
@media (max-width:760px){
  .sih h1{font-size:clamp(42px,11vw,58px);line-height:1.02}
  .sih-copy{padding:32px var(--page-gutter) 88px}
  .sih-cta{height:56px;padding:0 28px}
  /* the same overlay, a little stronger on the right because the text runs the full width of a phone */
  .sih::before{background:linear-gradient(0deg,rgba(0,0,0,.42) 0%,transparent 38%),linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.40) 60%,rgba(0,0,0,.28) 100%)}
}
@media (max-width:380px),(max-height:620px){.sih-scroll{display:none}}

/* v57: the hero lives inside the pinned opening. The text layer (.sih-ui) sits over the video layer (.sih-layer); the intro
   script clips the video layer down into the Mysuru tile and fades the text layer out as the visitor scrolls. */
.sih.sih-ui{position:absolute;inset:0;min-height:0;background:transparent;overflow:visible;isolation:auto;will-change:opacity,transform}
.sih.sih-ui::before{content:none}
.hero-ui.sih-ui-wrap::after{content:none;display:none}
.hero-layer.sih-layer{will-change:clip-path}
.hero-layer.sih-layer::after{background:linear-gradient(0deg,rgba(0,0,0,.38) 0%,transparent 35%),
  linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.40) 48%,rgba(0,0,0,.10) 100%);opacity:var(--shade,1)}
@media (max-width:760px){
  .hero-layer.sih-layer::after{background:linear-gradient(0deg,rgba(0,0,0,.42) 0%,transparent 38%),linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.40) 60%,rgba(0,0,0,.28) 100%)}
}

@media (prefers-reduced-motion:reduce){
  /* no shrinking: hero and grid swap at the halfway point with a short fade (opacity only) */
  .sih.sih-ui,.works .tile,#tileVideo,.tile-ui{transition:opacity .35s ease}
  .sih-nav,.sih-eyebrow,.sih h1,.sih-line,.sih-cta,.sih-scroll{animation:none}
  .sih-scroll i::after{animation:none;top:30%}
  .sih-cta,.sih-cta span{transition:none}
}

/* logo at the top-left beside the name; "Plan a Trip" styled like the "Explore South India" button (Ruksana, 28 Oct) */
.sih-brand{display:flex;align-items:center;gap:12px}
.sih-brand>span{display:block}
.sih-logo{display:block;height:46px;width:auto;padding:5px 9px;border-radius:12px;background:#F4F4F4;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.sih-plan{display:inline-flex;align-items:center;height:48px;padding:0 26px;border:0;border-radius:999px;background:#F4F4F4;color:var(--color-forest);font:600 15px/1 var(--sih-ui);transition:transform .25s ease,box-shadow .25s ease,background .25s}
.sih-plan:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28);background:#F4F4F4;color:var(--color-forest)}
@media (max-width:760px){.sih-logo{height:38px;padding:4px 7px;border-radius:10px}.sih-plan{display:none}}
@media (prefers-reduced-motion:reduce){.sih-plan{transition:none}}

/* the top-right "Plan a Trip" is removed: the floating "Plan a trip" button does the same job (Ruksana, 28 Oct) */
.sih-plan{display:none!important}

/* Editorial redesign (Ruksana, 30 Oct; layout and hierarchy from the Noovo reference): the words sit low on the left, 5-6% in from
   the edge, so the video stays open. Cormorant serif heading in warm ivory with an italic accent, clean sans for everything else, a
   small ivory pill. The video is untouched; the shade now sits low on the left, under the words. */
.sih{--page-gutter:clamp(24px,5.5vw,96px);--color-gold:#D9D9D9;--sih-ivory:#FFFFFF}
.sih-nav{padding-top:24px}
.sih-brand{font-size:17px}
.sih-brand small{font-size:10px;letter-spacing:.16em}
.sih-logo{height:40px;padding:4px 8px;border-radius:10px;background:var(--sih-ivory);box-shadow:none}
.sih-links{gap:clamp(22px,2.6vw,36px)}
.sih-links a{font-size:14px;font-weight:400;letter-spacing:.005em}
.sih-links a:hover{opacity:1;color:var(--sih-ivory);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.sih-copy{justify-content:flex-end;padding:40px var(--page-gutter) clamp(44px,8vh,84px)}
.sih-copy::before{left:0;top:auto;bottom:0;width:min(900px,100%);height:100%;background:radial-gradient(70% 62% at 22% 72%,rgba(0,0,0,.34),rgba(0,0,0,.16) 58%,transparent 100%)}
.sih h1,.sih-line,.sih-eyebrow{text-shadow:0 1px 18px rgba(0,0,0,.34)}
.sih-eyebrow{margin-bottom:20px;font-size:11.5px;letter-spacing:.24em;font-weight:500}
.sih-eyebrow::before{width:40px;opacity:.8}
.sih h1{max-width:none;font-weight:400;font-size:clamp(46px,5.25vw,76px);line-height:1.04;letter-spacing:-.018em}
.sih h1 em{font-style:italic;font-weight:300;color:var(--color-gold)}
.sih-line{margin-top:18px;font-family:var(--sih-ui);font-weight:400;font-size:clamp(16px,1.3vw,19px);line-height:1.5;letter-spacing:-.003em}
.sih-cta{margin-top:28px;height:48px;padding:0 24px;background:var(--rf-olive-deep,#111111);color:var(--rf-cream,#FFFFFF);font-weight:500;font-size:14px}
.sih-cta:hover{background:var(--rf-olive-deeper,#2B2B2B);box-shadow:0 8px 22px rgba(0,0,0,.28)}
@media (max-width:1100px) and (min-width:768px){.sih h1{font-size:clamp(50px,7vw,68px)}}
.sih-scroll{display:none}                                         /* the button already leads down; the reference has no extra cue here */
.hero-layer.sih-layer::after{background:linear-gradient(0deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.20) 34%,transparent 58%),
  linear-gradient(90deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.12) 46%,transparent 72%),linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 18%)}
@media (max-width:760px){
  .hero-layer.sih-layer::after{background:linear-gradient(0deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.30) 44%,transparent 68%),linear-gradient(180deg,rgba(0,0,0,.32) 0%,transparent 20%)}
}

/* v62: phones (767 px and narrower) - the hero is a compact, framed video card with rounded corners, like an App Store card,
   instead of a full-screen video (Ruksana, 29 Oct). Everything stays on the video exactly as before (logo, Menu, eyebrow,
   heading, sentence, button, colours); only the frame is smaller. The intro script clips the video to the card (--card-*) and,
   on scroll, into the Mysuru tile. Desktop and tablets are unchanged. */
@media (max-width:767px){
  /* before the script measures: the same card, so the first paint never shows a full-screen frame */
  .hero-layer.sih-layer{clip-path:inset(var(--card-t,12px) var(--card-x,12px) calc(100vh - var(--card-t,12px) - var(--card-h,80vh)) var(--card-x,12px) round var(--card-r,22px))}
  .sih.sih-ui{inset:auto;top:var(--card-t,12px);left:var(--card-x,12px);right:var(--card-x,12px);height:var(--card-h,80vh)}
  .sih-nav{padding:16px 18px 0}
  .sih-copy{padding:16px 18px 26px}
  .sih h1{font-size:clamp(38px,10.6vw,50px)}
  .sih-eyebrow{margin-bottom:14px;gap:10px;font-size:10px;letter-spacing:.16em}
  .sih-eyebrow::before{width:24px}
  .sih-line{margin-top:14px;font-size:16px}
  .sih-cta{margin-top:22px;height:48px;padding:0 22px}
  .sih-scroll{display:none}
}

/* Opening transition from the owner's reference video (30 Oct; build/hero_transition.py): the stage is one screen, the destination tiles
   are placed in it by the script around the hero window, and a wedge in the next section's colour rises over the end. */
.intro .stage{height:100vh;overflow:hidden;background:var(--bg)}
.intro .wrap.works{position:absolute;inset:0;max-width:none;margin:0;padding:0;z-index:1}
.intro .works .row{display:contents}
.intro .works .tile,.intro .works .row-1 .tile,.intro .works .row-1 .tile.feature,.intro .works .row-2 .tile,.intro .works .row-3 .tile{position:absolute;aspect-ratio:auto;grid-column:auto;grid-row:auto;will-change:transform;visibility:hidden}
.intro .works .tile video{will-change:transform}
.hero-layer.sih-layer{z-index:5}
.hero-layer.sih-layer video{transform-origin:50% 50%;will-change:transform}
.tw-wedge{position:absolute;left:0;right:0;top:0;z-index:6;background:var(--bg);visibility:hidden;will-change:transform;pointer-events:none}
#proof{position:relative;z-index:1;margin-top:-34vh}
@media (max-width:767px){#proof{margin-top:-26vh}}
@media (prefers-reduced-motion:reduce){#proof{margin-top:0}.tw-wedge{display:none}}