*{
  box-sizing:border-box;
}

:root{
  --ink:#102b24;
  --green:#1f5d4b;
  --green2:#3f8069;
  --cream:#f6f0e4;
  --muted:#6f7c76;
  --gold:#f0ad4e;
  --white:#ffffff;
  --line:rgba(16,43,36,.12);
}

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

body{
  margin:0;
  min-width:280px;
  overflow-x:hidden;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--cream);
  color:var(--ink);
}

button,
a{
  font:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}


/* HEADER */

.topbar{
  width:min(1200px,calc(100% - 40px));
  min-height:92px;
  margin:0 auto;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:20px;
}

.brand-area{
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;
  justify-self:start;
}

.brand-mark{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:15px;

  display:grid;
  place-items:center;

  background:#10352d;
  color:white;

  font-size:20px;
  font-weight:900;

  box-shadow:0 7px 20px rgba(16,53,45,.12);
}

.brand-text{
  min-width:0;
}

.brand-text strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-size:17px;
  font-weight:800;
  color:#132f28;
}

.brand-text span{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:#77837e;
}


/* CENTERED CREDIT */

.creator-credit{
  position:relative;
  isolation:isolate;
  justify-self:center;

  display:flex;
  align-items:center;
  gap:11px;

  min-width:174px;

  padding:10px 18px 10px 12px;

  overflow:hidden;

  background:rgba(255,255,255,.86);

  border:1px solid rgba(31,93,75,.16);
  border-radius:999px;

  box-shadow:
    0 8px 26px rgba(16,53,45,.08),
    0 0 0 0 rgba(63,128,105,0);

  animation:creditGlow 3.2s ease-in-out infinite;
}

.creator-credit::before{
  content:"";

  position:absolute;
  inset:-60% -35%;
  z-index:-1;

  background:
    linear-gradient(
      115deg,
      transparent 38%,
      rgba(230,246,238,.12) 44%,
      rgba(116,184,153,.34) 50%,
      rgba(255,255,255,.58) 54%,
      transparent 61%
    );

  transform:translateX(-60%) rotate(5deg);

  animation:creditSweep 4s ease-in-out infinite;
}

.credit-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:#e2f0e8;
  color:#24614f;

  font-size:14px;

  animation:creditStar 2.3s ease-in-out infinite;
}

.credit-small{
  display:block;

  color:#7b8983;

  font-size:9px;
  font-weight:900;
  line-height:1;

  letter-spacing:1.55px;
}

.creator-credit strong{
  position:relative;

  display:inline-block;

  margin-top:4px;
  padding-bottom:3px;

  color:#123d31;

  font-size:14px;
  font-weight:900;
  line-height:1;

  animation:radhaFocus 2.7s ease-in-out infinite;
}

.creator-credit strong::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:-2px;

  width:100%;
  height:2px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #5f9f82,
      transparent
    );

  transform:
    translateX(-50%)
    scaleX(.28);

  opacity:.35;

  animation:radhaUnderline 2.7s ease-in-out infinite;
}

.small-btn{
  justify-self:end;

  border:0;

  background:var(--ink);
  color:white;

  border-radius:999px;

  padding:12px 19px;

  font-weight:800;

  cursor:pointer;
}


/* MAIN */

main{
  width:min(1320px,calc(100% - 28px));
  margin:0 auto;
}


/* HERO */

.hero{
  min-height:670px;

  position:relative;
  overflow:hidden;

  border-radius:34px;

  background:
    linear-gradient(
      180deg,
      #dcebe4 0%,
      #bcd8cb 43%,
      #88ae99 100%
    );

  box-shadow:
    0 24px 80px rgba(16,43,36,.12);
}

.hero-copy{
  position:relative;
  z-index:8;

  width:57%;

  padding:88px 0 70px 74px;
}

.eyebrow{
  margin:0 0 14px;

  color:var(--green2);

  font-size:12px;
  font-weight:900;

  letter-spacing:.18em;
}

.hero h1{
  margin:0;

  max-width:100%;

  font-family:Georgia,"Times New Roman",serif;

  font-size:clamp(74px,8vw,126px);
  line-height:.8;

  letter-spacing:-.06em;
}

.hero h1 span{
  color:var(--green);
}

.lead{
  max-width:620px;

  margin:32px 0 0;

  color:#405b52;

  font-size:18px;
  line-height:1.72;
}

.actions{
  display:flex;
  gap:13px;
  flex-wrap:wrap;

  margin-top:30px;
}

.primary-btn,
.secondary-btn{
  min-height:52px;

  border-radius:999px;

  padding:14px 22px;

  font-weight:800;
}

.primary-btn{
  border:0;

  background:var(--ink);
  color:white;

  cursor:pointer;
}

.secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;

  color:var(--ink);

  border:1px solid rgba(16,43,36,.2);

  background:rgba(255,255,255,.35);
}


/* QUICK STATS */

.quick-stats{
  display:flex;
  gap:40px;

  max-width:530px;

  margin-top:44px;
  padding-top:24px;

  border-top:1px solid rgba(16,43,36,.16);
}

.quick-stats div{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.quick-stats strong{
  font-size:24px;
}

.quick-stats span{
  font-size:12px;
  color:#536b62;
}


/* SCENERY */

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

.sun{
  width:112px;
  height:112px;

  position:absolute;
  right:15%;
  top:12%;

  border-radius:50%;

  background:#f7d598;

  box-shadow:
    0 0 70px rgba(247,213,152,.6);
}

.cloud{
  position:absolute;

  border-radius:50%;

  background:rgba(255,255,255,.35);

  filter:blur(22px);
}

.c1{
  width:350px;
  height:85px;

  right:20%;
  top:34%;
}

.c2{
  width:250px;
  height:65px;

  right:1%;
  top:46%;
}

.mountain{
  position:absolute;

  left:36%;
  right:-7%;
  bottom:0;
}

.back{
  height:61%;

  background:#7ca48e;

  opacity:.65;

  clip-path:
    polygon(
      0 100%,
      10% 53%,
      22% 68%,
      38% 28%,
      50% 48%,
      65% 20%,
      78% 43%,
      90% 27%,
      100% 46%,
      100% 100%
    );
}

.middle{
  height:48%;

  background:#4b735f;

  opacity:.9;

  clip-path:
    polygon(
      0 100%,
      8% 63%,
      18% 78%,
      32% 40%,
      45% 58%,
      56% 34%,
      70% 64%,
      82% 41%,
      93% 57%,
      100% 50%,
      100% 100%
    );
}

.front{
  height:34%;

  background:#264d3c;

  clip-path:
    polygon(
      0 100%,
      10% 70%,
      24% 81%,
      35% 55%,
      48% 77%,
      62% 48%,
      76% 69%,
      89% 43%,
      100% 56%,
      100% 100%
    );
}

.tea-lines{
  position:absolute;

  right:-5%;
  bottom:-4%;

  width:58%;
  height:37%;

  background:
    repeating-linear-gradient(
      -10deg,
      rgba(235,243,237,.13) 0 3px,
      transparent 3px 19px
    );

  transform:skewY(-6deg);
}


/* PLACES */

.places-section{
  width:min(1200px,calc(100% - 40px));

  margin:auto;

  padding:110px 0 100px;
}

.section-head{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:60px;

  align-items:end;

  margin-bottom:42px;
}

.section-head h2,
.video-copy h2{
  margin:0;

  font-family:Georgia,"Times New Roman",serif;

  font-size:clamp(42px,5vw,72px);
  line-height:.96;

  letter-spacing:-.04em;
}

.section-head > p{
  margin:0;

  color:var(--muted);

  line-height:1.7;
}

.cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.card{
  min-height:220px;

  padding:26px;

  background:white;

  border:1px solid var(--line);
  border-radius:24px;

  box-shadow:
    0 8px 30px rgba(16,43,36,.04);
}

.card .icon{
  font-size:30px;
}

.card h3{
  margin:36px 0 10px;

  font-size:21px;
}

.card p{
  margin:0;

  color:var(--muted);

  font-size:14px;
  line-height:1.65;
}


/* VIDEO SECTION */

.video-section{
  width:min(1200px,calc(100% - 40px));

  margin:0 auto 100px;

  padding:58px;

  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;

  align-items:center;

  background:var(--ink);
  color:white;

  border-radius:30px;
}

.eyebrow.light{
  color:#a8ccb9;
}

.video-copy p:not(.eyebrow){
  color:#b7c8c1;

  line-height:1.7;
}

.video-button{
  min-height:52px;

  margin-top:12px;

  border:0;
  border-radius:999px;

  padding:14px 22px;

  background:var(--gold);
  color:#2c220e;

  font-weight:900;

  cursor:pointer;
}

.video-poster{
  min-height:390px;

  position:relative;
  overflow:hidden;

  border:0;
  border-radius:24px;

  background:
    linear-gradient(
      #cfe3d9,
      #8fb49e
    );

  cursor:pointer;
}

.poster-sun{
  width:80px;
  height:80px;

  position:absolute;

  right:18%;
  top:15%;

  border-radius:50%;

  background:#f0c980;
}

.poster-mountain{
  position:absolute;

  left:-8%;
  right:-8%;
  bottom:0;
}

.pm1{
  height:67%;

  background:#729781;

  clip-path:
    polygon(
      0 100%,
      12% 47%,
      24% 66%,
      38% 30%,
      50% 54%,
      65% 24%,
      78% 51%,
      90% 35%,
      100% 58%,
      100% 100%
    );
}

.pm2{
  height:49%;

  background:#476e5b;

  clip-path:
    polygon(
      0 100%,
      13% 60%,
      27% 77%,
      42% 38%,
      53% 61%,
      68% 36%,
      81% 67%,
      94% 43%,
      100% 53%,
      100% 100%
    );
}

.pm3{
  height:31%;

  background:#244936;

  clip-path:
    polygon(
      0 100%,
      11% 70%,
      24% 82%,
      37% 55%,
      53% 78%,
      66% 51%,
      81% 70%,
      94% 46%,
      100% 57%,
      100% 100%
    );
}

.play-circle{
  width:82px;
  height:82px;

  position:absolute;

  left:50%;
  top:48%;

  transform:translate(-50%,-50%);

  display:grid;
  place-items:center;

  padding-left:4px;

  border-radius:50%;

  background:rgba(255,255,255,.93);
  color:var(--ink);

  font-size:24px;

  box-shadow:
    0 16px 50px rgba(16,43,36,.2);
}

.poster-title{
  position:absolute;

  left:24px;
  right:24px;
  bottom:22px;

  display:flex;
  justify-content:space-between;
  align-items:end;

  color:white;

  text-align:left;
}

.poster-title strong{
  display:block;

  font-size:22px;
}

.poster-title small{
  display:block;

  margin-top:4px;

  color:rgba(255,255,255,.8);

  font-size:11px;
}

.poster-title span{
  font-size:12px;
}


/* FOOTER */

footer{
  width:min(1200px,calc(100% - 40px));

  margin:auto;

  padding:26px 0 38px;

  display:flex;
  justify-content:space-between;
  gap:20px;

  border-top:1px solid var(--line);

  color:var(--muted);

  font-size:13px;
}

.footer-credit strong{
  color:var(--green);
}


/* VIDEO MODAL */

.modal{
  position:fixed;
  inset:0;
  z-index:9999;

  display:none;
}

.modal.open{
  display:block;
}

.backdrop{
  position:absolute;
  inset:0;

  background:rgba(5,18,14,.92);

  backdrop-filter:blur(8px);
}

.dialog{
  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  width:min(1050px,calc(100% - 34px));

  padding:18px;

  background:#0d1f19;

  border-radius:26px;

  box-shadow:
    0 35px 100px rgba(0,0,0,.45);
}

.close{
  width:42px;
  height:42px;

  position:absolute;

  right:8px;
  top:-50px;

  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;

  background:rgba(255,255,255,.08);
  color:white;

  font-size:27px;

  cursor:pointer;
}

.video-wrap{
  overflow:hidden;

  background:black;

  border-radius:18px;

  aspect-ratio:16/9;
}

.video-wrap video{
  width:100%;
  height:100%;

  display:block;

  background:black;
}

.modal-info{
  padding:22px 12px 8px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;

  color:white;
}

.modal-info h3{
  margin:0;

  font-size:24px;
}

.film-credit{
  margin:0;

  align-self:center;

  color:#adc0b8;

  font-size:13px;
  line-height:1.55;
}

.film-credit strong{
  color:white;
}


/* ANIMATIONS */

@keyframes creditGlow{
  0%,100%{
    box-shadow:
      0 8px 26px rgba(16,53,45,.08),
      0 0 0 0 rgba(63,128,105,0);
  }

  50%{
    box-shadow:
      0 10px 30px rgba(16,53,45,.11),
      0 0 0 6px rgba(63,128,105,.055);
  }
}

@keyframes creditSweep{
  0%,18%{
    transform:translateX(-60%) rotate(5deg);
    opacity:0;
  }

  34%{
    opacity:1;
  }

  58%{
    transform:translateX(62%) rotate(5deg);
    opacity:1;
  }

  72%,100%{
    transform:translateX(62%) rotate(5deg);
    opacity:0;
  }
}

@keyframes creditStar{
  0%,100%{
    transform:scale(1) rotate(0);
  }

  50%{
    transform:scale(1.08) rotate(8deg);
  }
}

@keyframes radhaFocus{
  0%,100%{
    color:#123d31;
    transform:translateY(0);
    text-shadow:none;
  }

  50%{
    color:#17664f;
    transform:translateY(-1px);
    text-shadow:
      0 2px 12px rgba(47,124,98,.18);
  }
}

@keyframes radhaUnderline{
  0%,100%{
    transform:
      translateX(-50%)
      scaleX(.28);

    opacity:.28;
  }

  50%{
    transform:
      translateX(-50%)
      scaleX(1);

    opacity:.95;
  }
}


/* TABLET */

@media(max-width:1000px){

  .topbar{
    width:min(100% - 28px,900px);

    grid-template-columns:minmax(0,1fr) auto;

    grid-template-areas:
      "brand button"
      "credit credit";

    row-gap:12px;

    padding:14px 0 16px;
  }

  .brand-area{
    grid-area:brand;
  }

  .small-btn{
    grid-area:button;
  }

  .creator-credit{
    grid-area:credit;
    justify-self:center;
  }

  .hero-copy{
    width:64%;
    padding-left:42px;
  }

  .cards{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .video-section{
    grid-template-columns:1fr;
  }

}


/* MOBILE - any phone width */

@media(max-width:720px){

  body{
    background:#f4eee2;
  }

  .topbar{
    width:calc(100% - 24px);

    min-height:auto;

    grid-template-columns:minmax(0,1fr) auto;

    grid-template-areas:
      "brand button"
      "credit credit";

    gap:10px 12px;

    padding:
      calc(10px + env(safe-area-inset-top))
      0
      14px;
  }

  .brand-area{
    min-width:0;
    gap:10px;
  }

  .brand-mark{
    width:40px;
    height:40px;
    flex-basis:40px;

    border-radius:13px;

    font-size:17px;
  }

  .brand-text strong{
    max-width:42vw;

    font-size:14px;
  }

  .brand-text span{
    font-size:10px;
  }

  .small-btn{
    min-height:42px;

    padding:10px 14px;

    font-size:13px;
  }

  .creator-credit{
    min-width:162px;

    padding:9px 15px 9px 10px;
  }

  main{
    width:100%;
  }

  .hero{
    width:calc(100% - 20px);

    min-height:0;

    margin:0 auto;

    display:flex;
    flex-direction:column;

    border-radius:24px;
  }

  .hero-copy{
    width:100%;

    padding:54px 28px 24px;
  }

  .eyebrow{
    margin-bottom:12px;

    font-size:11px;
    letter-spacing:.16em;
  }

  .hero h1{
    width:100%;

    font-size:clamp(54px,18vw,78px);
    line-height:.82;

    letter-spacing:-.055em;

    overflow-wrap:normal;
    word-break:normal;
  }

  .lead{
    max-width:none;

    margin-top:26px;

    font-size:16px;
    line-height:1.75;
  }

  .actions{
    width:100%;

    display:grid;
    grid-template-columns:1fr;

    gap:12px;

    margin-top:26px;
  }

  .primary-btn,
  .secondary-btn{
    width:100%;

    min-height:52px;

    padding:13px 18px;

    text-align:center;
  }

  .quick-stats{
    width:100%;
    max-width:none;

    gap:12px;

    justify-content:space-between;

    margin-top:30px;
    padding-top:20px;
  }

  .quick-stats div{
    flex:1;

    text-align:left;
  }

  .quick-stats strong{
    font-size:21px;
  }

  .quick-stats span{
    font-size:10px;
    line-height:1.3;
  }

  /* On mobile scenery gets its own area below the copy,
     so it can never cover or crop the headline/text. */

  .scenery{
    position:relative;

    inset:auto;

    width:100%;
    height:250px;

    overflow:hidden;
  }

  .sun{
    width:82px;
    height:82px;

    right:11%;
    top:14%;
  }

  .cloud.c1{
    width:220px;
    height:58px;

    right:12%;
    top:30%;
  }

  .cloud.c2{
    width:170px;
    height:48px;

    right:-8%;
    top:45%;
  }

  .mountain{
    left:-12%;
    right:-12%;
  }

  .back{
    height:82%;
  }

  .middle{
    height:63%;
  }

  .front{
    height:45%;
  }

  .tea-lines{
    width:100%;
    height:45%;

    right:-8%;
  }

  .places-section{
    width:calc(100% - 28px);

    padding:72px 0 70px;
  }

  .section-head{
    grid-template-columns:1fr;
    gap:18px;

    margin-bottom:28px;
  }

  .section-head h2,
  .video-copy h2{
    font-size:clamp(38px,12vw,54px);
  }

  .section-head > p{
    font-size:15px;
  }

  .cards{
    grid-template-columns:1fr;

    gap:14px;
  }

  .card{
    min-height:0;

    padding:22px;

    border-radius:20px;
  }

  .card h3{
    margin-top:24px;
  }

  .video-section{
    width:calc(100% - 20px);

    margin:0 auto 70px;

    padding:28px 22px;

    gap:28px;

    border-radius:24px;
  }

  .video-button{
    width:100%;
  }

  .video-poster{
    min-height:260px;

    border-radius:20px;
  }

  .play-circle{
    width:68px;
    height:68px;

    font-size:20px;
  }

  .poster-title{
    left:18px;
    right:18px;
    bottom:17px;
  }

  .poster-title strong{
    font-size:18px;
  }

  footer{
    width:calc(100% - 28px);

    flex-direction:column;

    gap:7px;

    padding-bottom:
      calc(30px + env(safe-area-inset-bottom));
  }

  /* Modal is only a fallback. Normally mobile enters
     the native/browser fullscreen video immediately. */

  .dialog{
    width:100%;
    height:100%;

    padding:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border-radius:0;
  }

  .video-wrap{
    width:100%;

    border-radius:0;
  }

  .modal-info{
    padding:18px;

    grid-template-columns:1fr;

    gap:10px;
  }

  .close{
    z-index:3;

    right:
      calc(10px + env(safe-area-inset-right));

    top:
      calc(10px + env(safe-area-inset-top));
  }

}


/* VERY SMALL PHONES */

@media(max-width:380px){

  .topbar{
    grid-template-columns:1fr;

    grid-template-areas:
      "brand"
      "credit"
      "button";
  }

  .brand-area,
  .creator-credit,
  .small-btn{
    justify-self:center;
  }

  .brand-text strong{
    max-width:none;
  }

  .small-btn{
    width:100%;
  }

  .hero-copy{
    padding-left:22px;
    padding-right:22px;
  }

  .hero h1{
    font-size:clamp(50px,17vw,66px);
  }

  .quick-stats{
    gap:8px;
  }

}


/* LANDSCAPE PHONE */

@media(max-height:520px) and (orientation:landscape){

  .dialog{
    width:100vw;
    height:100vh;

    padding:0;
  }

  .video-wrap{
    width:100vw;
    height:100vh;

    aspect-ratio:auto;
  }

  .video-wrap video{
    object-fit:contain;
  }

  .modal-info{
    display:none;
  }

}


@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
  }

  .creator-credit,
  .creator-credit::before,
  .credit-icon,
  .creator-credit strong,
  .creator-credit strong::after{
    animation:none !important;
  }

}
\n\n/* ============================================================\n   PROFESSIONAL MOBILE HEADER + FOOTER OVERRIDES\n   ============================================================ */\n@media(max-width:720px){\n  .topbar{\n    width:calc(100% - 28px);\n    min-height:72px;\n    margin:0 auto;\n    padding:10px 0 12px;\n    display:grid;\n    grid-template-columns:minmax(0,1fr) auto;\n    grid-template-areas:"brand credit";\n    align-items:center;\n    gap:8px 12px;\n  }\n\n  .brand-area{\n    grid-area:brand;\n    justify-self:start;\n    min-width:0;\n    gap:9px;\n  }\n\n  .brand-mark{\n    width:38px;\n    height:38px;\n    flex-basis:38px;\n    border-radius:12px;\n    font-size:16px;\n  }\n\n  .brand-text strong{\n    max-width:none;\n    font-size:13.5px;\n    line-height:1.08;\n    white-space:nowrap;\n  }\n\n  .brand-text span{\n    margin-top:3px;\n    font-size:9.5px;\n  }\n\n  /* Header already has the main CTA inside the hero. Hide the\n     duplicate mobile Watch Tour button for a clean top bar. */\n  .small-btn{\n    display:none;\n  }\n\n  /* Credit is no longer a large third tile on mobile. */\n  .creator-credit{\n    grid-area:credit;\n    justify-self:end;\n    min-width:0;\n    gap:7px;\n    padding:5px 1px 5px 7px;\n    overflow:visible;\n    background:transparent;\n    border:0;\n    border-radius:0;\n    box-shadow:none;\n    animation:none;\n  }\n\n  .creator-credit::before,\n  .creator-credit::after{\n    display:none;\n  }\n\n  .credit-icon{\n    width:27px;\n    height:27px;\n    flex-basis:27px;\n    font-size:11px;\n    background:#e1eee7;\n    animation:creditStar 2.5s ease-in-out infinite;\n  }\n\n  .credit-small{\n    font-size:7.5px;\n    letter-spacing:1px;\n    color:#7e8e87;\n  }\n\n  .creator-credit strong{\n    margin-top:3px;\n    padding-bottom:2px;\n    font-size:12.5px;\n  }\n\n  .creator-credit strong::after{\n    height:1.5px;\n  }\n\n  .hero{\n    margin-top:2px;\n  }\n\n  footer{\n    width:calc(100% - 28px);\n    display:flex;\n    flex-direction:row;\n    align-items:center;\n    justify-content:space-between;\n    flex-wrap:wrap;\n    gap:8px 16px;\n    padding:20px 0 calc(24px + env(safe-area-inset-bottom));\n    font-size:11px;\n    line-height:1.4;\n  }\n\n  .footer-title{\n    color:#708078;\n  }\n\n  .footer-credit{\n    margin-left:auto;\n    white-space:nowrap;\n  }\n}\n\n@media(max-width:380px){\n  .topbar{\n    width:calc(100% - 22px);\n    gap:6px;\n  }\n\n  .brand-area{\n    gap:7px;\n  }\n\n  .brand-mark{\n    width:34px;\n    height:34px;\n    flex-basis:34px;\n    font-size:14px;\n  }\n\n  .brand-text strong{\n    font-size:12.2px;\n  }\n\n  .brand-text span{\n    font-size:8.5px;\n  }\n\n  .credit-icon{\n    width:24px;\n    height:24px;\n    flex-basis:24px;\n  }\n\n  .credit-small{\n    font-size:6.8px;\n    letter-spacing:.8px;\n  }\n\n  .creator-credit strong{\n    font-size:11.5px;\n  }\n\n  footer{\n    width:calc(100% - 24px);\n    font-size:10.5px;\n  }\n}\n\n@media(max-width:320px){\n  .topbar{\n    grid-template-columns:1fr;\n    grid-template-areas:\n      "brand"\n      "credit";\n    justify-items:center;\n    row-gap:6px;\n    padding-bottom:10px;\n  }\n\n  .brand-area,\n  .creator-credit{\n    justify-self:center;\n  }\n\n  footer{\n    justify-content:center;\n    text-align:center;\n  }\n\n  .footer-credit{\n    margin-left:0;\n  }\n}\n
/* ============================================================
   FINAL PROFESSIONAL MOBILE REFINEMENT
   ============================================================ */
@media(max-width:720px){
  .topbar{
    width:calc(100% - 28px) !important;
    min-height:auto !important;
    margin:0 auto !important;
    padding:14px 0 13px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
  }

  .brand-area{
    justify-self:auto !important;
    width:auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
  }

  .brand-mark{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
    border-radius:12px !important;
    font-size:16px !important;
  }

  .brand-text{
    min-width:0 !important;
  }

  .brand-text strong{
    max-width:none !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
    font-size:14px !important;
    line-height:1.05 !important;
  }

  .brand-text span{
    margin-top:3px !important;
    font-size:9.5px !important;
    line-height:1 !important;
  }

  .small-btn{
    display:none !important;
  }

  /* One understated credit line instead of a separate pill/tile. */
  .creator-credit{
    position:relative !important;
    justify-self:auto !important;
    min-width:0 !important;
    display:block !important;
    margin:2px 0 0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    animation:none !important;
  }

  .creator-credit::before,
  .creator-credit::after,
  .credit-icon{
    display:none !important;
  }

  .creator-credit > div{
    display:flex !important;
    align-items:baseline !important;
    justify-content:center !important;
    gap:6px !important;
  }

  .credit-small{
    display:inline !important;
    font-size:7.5px !important;
    line-height:1 !important;
    letter-spacing:1.2px !important;
    color:#87928d !important;
  }

  .creator-credit strong{
    display:inline-block !important;
    margin:0 !important;
    padding:0 0 2px !important;
    font-size:12px !important;
    line-height:1 !important;
    color:#17614c !important;
    animation:radhaFocus 2.7s ease-in-out infinite !important;
  }

  .creator-credit strong::after{
    bottom:-2px !important;
    height:1.5px !important;
  }

  .hero{
    margin-top:2px !important;
  }

  /* Mobile video feature becomes a clean centred content block. */
  .video-section{
    width:calc(100% - 24px) !important;
    margin:0 auto 64px !important;
    padding:26px 20px !important;
    gap:22px !important;
    text-align:center !important;
    border-radius:22px !important;
  }

  .video-copy{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }

  .video-copy p:not(.eyebrow){
    max-width:290px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .video-button{
    width:auto !important;
    min-width:220px !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .video-poster{
    width:100% !important;
    min-height:0 !important;
    aspect-ratio:16/9 !important;
    border-radius:18px !important;
  }

  .poster-title{
    left:16px !important;
    right:16px !important;
    bottom:14px !important;
  }

  .poster-title strong{
    font-size:17px !important;
  }

  .poster-title small{
    font-size:9px !important;
  }

  footer{
    width:calc(100% - 28px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
    padding:22px 0 calc(26px + env(safe-area-inset-bottom)) !important;
    text-align:center !important;
    font-size:11.5px !important;
    line-height:1.45 !important;
  }

  .footer-title,
  .footer-credit{
    width:100% !important;
    margin:0 !important;
    text-align:center !important;
    white-space:normal !important;
  }

  .footer-title{
    color:#677871 !important;
  }

  .footer-credit{
    color:#75847e !important;
  }
}

@media(max-width:360px){
  .topbar{
    width:calc(100% - 22px) !important;
  }

  .brand-mark{
    width:35px !important;
    height:35px !important;
    flex-basis:35px !important;
    font-size:14px !important;
  }

  .brand-text strong{
    font-size:12.8px !important;
  }

  .brand-text span{
    font-size:8.7px !important;
  }

  .credit-small{
    font-size:7px !important;
    letter-spacing:1px !important;
  }

  .creator-credit strong{
    font-size:11.5px !important;
  }
}

/* Fullscreen mobile video. If the browser cannot lock orientation,
   JS adds .force-landscape and this visually presents a landscape player. */
@media(max-width:820px){
  .modal.mobile-video .dialog{
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    padding:0 !important;
    border-radius:0 !important;
    background:#000 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .modal.mobile-video .video-wrap{
    width:100vw !important;
    height:100dvh !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
  }

  .modal.mobile-video .video-wrap video{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    background:#000 !important;
  }

  .modal.mobile-video .modal-info{
    display:none !important;
  }

  .modal.mobile-video .close{
    z-index:50 !important;
    right:calc(10px + env(safe-area-inset-right)) !important;
    top:calc(10px + env(safe-area-inset-top)) !important;
  }

  .modal.force-landscape .dialog{
    width:100dvh !important;
    height:100vw !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) rotate(90deg) !important;
    transform-origin:center center !important;
  }

  .modal.force-landscape .video-wrap{
    width:100dvh !important;
    height:100vw !important;
  }

  .modal.force-landscape .close{
    display:none !important;
  }
}