/* =====================================================================
   Peshagi — Coming Soon landing page
   Cloned from Figma (Peshagi_GUI, node 2001:221).
   Design canvas: 1920 px wide. Fonts: Poppins (body) + Shotflick Demo
   (script headings, self-hosted from assets/ShotflickDemoRegular.ttf).
   ===================================================================== */

:root {
  --green: #093b35;
  /* brand dark green (headings, footer, logo) */
  --green-deep: #003c35;
  /* contact form card */
  --green-ink: #0a3b35;
  /* large "HEALING…" headline */
  --overlay: rgba(9, 59, 53, 0.28);
  --muted: #7a7a7a;
  /* placeholder / helper text */
  --field: rgba(255, 255, 255, 0.86);
  --max: 1920px;
  --pad: clamp(20px, 6.25vw, 120px);
  /* 120px gutters at 1920 */
}

/* Script face used in the design ("Shotflick Demo"), self-hosted. */
@font-face {
  font-family: "Shotflick Demo";
  src: url("assets/ShotflickDemoRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Poppins", system-ui, sans-serif;
  color: #000;
  background: #fff;
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.script {
  font-family: "Shotflick Demo", "Poppins", cursive;
  color: var(--green);
  font-weight: 400;
  line-height: 1.1;
}

/* ============================== HERO ============================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;                  /* fill exactly one screen */
  overflow: hidden;
  color: #fff;
  background: #093b35;                  /* brand green fallback, only shown if the poster itself fails to load */
}

/* Hero backdrop — looping video, cover-fit. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* The `poster` attribute renders the video's exact first frame instantly, so
   the video element is fully visible from the first paint — no green flash and
   no fade. Playback swaps from the poster to the identical first frame with no
   visible seam. (The old opacity cross-fade is gone; it would have hidden the
   poster too and re-introduced the green flash it was meant to cover.) */

/* Brand-green overlay over the video for text legibility. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(9, 59, 53, 0.32) 0%, rgba(9, 59, 53, 0.5) 100%);
  z-index: 1;
}

/* Fixed site header — transparent over the hero, turns solid white with the
   dark logo once the user scrolls (`.is-scrolled` toggled in JS). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header__inner {
  display: flex;
  align-items: center;
  padding-block: clamp(16px, 2.6vw, 34px);
  transition: padding 0.3s ease;
}

.site-header.is-scrolled {
  background: #fff;
  /* box-shadow: 0 6px 24px rgba(9, 59, 53, 0.10); */
}

.site-header.is-scrolled .site-header__inner {
  padding-block: clamp(12px, 1.8vw, 20px);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.logo__icon {
  height: clamp(46px, 3.5vw, 66px);
  width: auto;
}

.logo__word {
  height: clamp(34px, 2.6vw, 50px);
  width: auto;
}

/* colour swap: light logo by default, dark logo once scrolled */
.logo__img--dark {
  display: none;
}

.site-header.is-scrolled .logo__img--light {
  display: none;
}

.site-header.is-scrolled .logo__img--dark {
  display: block;
}

.hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: var(--pad);
  padding-block: 3.75rem;
}

.hero__title {
  font-weight: 700;
  font-size: clamp(2.1rem, 8vw, 88px);
  line-height: 1.1;
  letter-spacing: 0.5px;
  max-width: 100%;
  overflow-wrap: break-word;
}

.hero__sub {
  max-width: 74.75rem;
  margin-top: clamp(18px, 2vw, 30px);
  font-weight: 400;
  font-size: clamp(1rem, 1.45vw, 22px);
  line-height: 1.6;
}

.notify {
  margin-top: clamp(26px, 3vw, 40px);
  display: flex;
  align-items: center;
  width: min(37.625rem, 100%);
  height: 3.75rem;
  background: #fff;
  border-radius: 0.375rem;
  padding: 0.125rem 0.129rem 0.125rem 1.25rem;
}

.notify input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: 400 1rem "Poppins", sans-serif;
  color: #333;
  outline: none;
}

.notify input::placeholder {
  color: var(--muted);
}

.notify button {
  flex: none;
  position: relative;
  z-index: 1;
  /* sit above the white pill so a forward lift isn't pinned to its walls */
  overflow: hidden;
  /* keep the water within the button */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: 0.25rem;
  background: var(--green);
  color: #fff;
  font: 500 0.875rem "Poppins", sans-serif;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.25s ease;
}

/* on hover: darken and add a soft shadow — no lift, no 3D push.
   Only the label zooms (see .submit__label rule below). */
.notify button:hover {
  z-index: 2;
  background: #0c4d45;
  box-shadow: 0 14px 30px -6px rgba(0, 0, 0, 0.32);
}

.notify button:active {
  z-index: 2;
  box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.26);
}

/* wider water graphic on the Join Peshagi button (desktop) */
.notify button .submit__water {
  width: 85%;
}

/* the label eases in a subtle zoom on hover, reinforcing the
   "moving toward you" feel without resizing the button itself */
.notify button .submit__label {
  display: inline-block;
  transition: transform 0.25s ease;
  transform-origin: center;
}

.notify button:hover .submit__label {
  transform: scale(1.08);
}

.hero__note {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.2vw, 18px);
}

.hero__audio {
  position: absolute;
  left: var(--pad);
  bottom: clamp(28px, 4vw, 60px);
  z-index: 2;
  display: flex;
  gap: 1.5rem;
}

.icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.icon-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.icon-btn.is-off {
  opacity: 0.45;
}

.icon-btn img {
  width: 2.5rem;
  height: 2.5rem;
}

/* ============================== ABOUT ============================== */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "left right"
    "leaf .";
  column-gap: clamp(40px, 6vw, 120px);
  align-items: start;
  padding-top: clamp(64px, 8vw, 150px);
  padding-bottom: clamp(40px, 5vw, 90px);
}

.about__left {
  grid-area: left;
  text-align: justify;
}

.about__script {
  font-size: clamp(2.4rem, 4.6vw, 80px);
  margin-bottom: clamp(18px, 2vw, 34px);
}

.about__text p {
  font-size: 1rem;
  line-height: 1.7;
  color: #000;
  margin-bottom: 1rem;
}

.about__text p:last-child {
  margin-bottom: 0;
}

/* Highlighted lines in the about copy, rendered in the brand green accent. */
.about__text p.about__accent {
  color: var(--green);
}

.about__text p.about__accent--bold {
  font-weight: 600;
}

.about__text p.about__accent--medium {
  font-weight: 500;
}

/* Offset the right column by the height of the "Relating to us" heading
   (line-height 1.1 + its margin) so the vision text lines up with about__text. */
.about__right {
  grid-area: right;
  padding-top: calc(clamp(2.4rem, 4.6vw, 80px) * 1.1 + clamp(18px, 2vw, 34px));
}

.about__headline {
  position: relative;
  isolation: isolate;
  /* contain the blend to this box */
  overflow: hidden;
  /* clip the video so its edges can't peek */
  font-weight: 700;
  font-size: clamp(2.6rem, 5.4vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* hero video playing behind the letters */
.about__headline__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* darken the light hero footage so the video-filled letters stay legible
     on the white page (screen blend keeps the non-text area white) */
  filter: brightness(0.5) contrast(1.15) saturate(1.15);
}

/* white knockout layer: screen blend => text shows the video, rest stays white */
.about__headline__fill {
  position: relative;
  z-index: 1;
  display: block;
  background: #fff;
  color: #000;
  mix-blend-mode: screen;
}

/* typewriter reveal — letters type in one-by-one; only active once JS runs
   (letters stay visible without JS) */
.about__headline.js-anim .char {
  opacity: 0;
  transition: opacity 0.05s linear;
}

.about__headline.js-anim.is-revealed .char {
  opacity: 1;
}

/* respect users who prefer no motion — show the full line at once */
@media (prefers-reduced-motion: reduce) {
  .about__headline.js-anim .char {
    opacity: 1;
    transition: none;
  }
}

/* ============================= LEAF DIVIDER ============================= */
.about__leaf {
  grid-area: leaf;
  justify-self: center;
  width: clamp(74px, 7vw, 111px);
  height: auto;
  margin-top: clamp(28px, 3.5vw, 56px);
}

/* ============================== VIDEO ============================== */
.video {
  padding-bottom: clamp(48px, 6vw, 96px);
}

.video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 864;
  /* matches the clip's real proportions */
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video__media {
  /* frame ratio == clip ratio, so this
                                          shows the whole video uncropped and
                                          fills the poster cleanly */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Native fullscreen: the video fills the whole screen, whose aspect ratio
   rarely matches the clip's — so `cover` would crop/overflow it. Switch to
   `contain` (letterbox) and reset the frame-fitting styles so the clip shows
   whole and centred on any screen shape. */
.video__media:fullscreen,
.video__media:-webkit-full-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Dark scrim + play button shown while paused; both clear once playing so the
   native controls (mute/unmute, seek, fullscreen) are unobstructed. */
.video__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
  /* never blocks the native controls */
  transition: opacity 0.25s ease;
}

.video__frame.is-playing::before {
  opacity: 0;
}

.video__play {
  position: relative;
  z-index: 2;
  border: 0;
  padding: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.video__play:hover {
  transform: scale(1.06);
}

.video__play img {
  display: block;
  width: clamp(58px, 6vw, 90px);
  height: auto;
}

.video__frame.is-playing .video__play {
  display: none;
}

/* ============================== VISION ============================== */
.vision {
  text-align: center;
  padding-block: clamp(48px, 7vw, 110px);
}

.vision__label {
  font-size: clamp(2rem, 3.4vw, 54px);
  margin-bottom: clamp(14px, 1.8vw, 26px);
}

.vision__quote {
  max-width: 62.5rem;
  margin: 0 auto;
  font: italic 600 clamp(1.35rem, 2.6vw, 40px) / 1.35 "Poppins", sans-serif;
  color: var(--green-ink);
}

/* ============================= CONTACT ============================= */
.contact {
  text-align: center;
  padding-bottom: clamp(56px, 6vw, 120px);
}

.contact__sprout {
  width: clamp(34px, 3vw, 47px);
  height: auto;
  margin: 0 auto clamp(12px, 1.6vw, 22px);
}

.contact__title {
  font-size: clamp(2rem, 3.6vw, 60px);
  margin-bottom: clamp(24px, 3vw, 46px);
}

.contact__form {
  position: relative;
  max-width: 69.375rem;
  margin-inline: auto;
  background: var(--green-deep);
  border-radius: 0.5rem;
  overflow: hidden;
  padding: clamp(40px, 5vw, 96px) clamp(24px, 4vw, 60px);
}

.contact__water {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  pointer-events: none;
}

.contact__water img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact__fields {
  position: relative;
  z-index: 1;
  width: min(33.5rem, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 32px);
  text-align: left;
}

.field {
  width: 100%;
  height: 3.25rem;
  border: 0;
  border-radius: 0.25rem;
  background: var(--field);
  padding: 0 1rem;
  font: 400 1rem "Poppins", sans-serif;
  color: #333;
  outline: none;
}

.field::placeholder {
  color: var(--muted);
}

.field:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.row {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
}

.row .field {
  flex: 1;
  min-width: 0;
}

.select-field {
  position: relative;
}

.select-field .field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  color: var(--muted);
  cursor: pointer;
}

.select-field .field:has(option:checked:not([disabled])) {
  color: #333;
}

.select-field::after {
  /* dropdown caret */
  content: "";
  position: absolute;
  right: 1.125rem;
  top: 50%;
  transform: translateY(-30%);
  border-style: solid;
  border-width: 0.4375rem 0.3125rem 0 0.3125rem;
  border-color: var(--muted) transparent transparent transparent;
  pointer-events: none;
}

.textarea-field {
  position: relative;
}

.textarea-field .field {
  height: 5.25rem;
  /* match the other fields */
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  /* right pad clears the count badge */
  line-height: 1.5;
  resize: none;
}

.count {
  position: absolute;
  right: 0.75rem;
  bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.submit {
  align-self: center;
  position: relative;
  overflow: hidden;
  /* keep the water within the button */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14.5rem;
  max-width: 100%;
  height: 2.5rem;
  margin-top: clamp(6px, 1vw, 12px);
  border: 0;
  border-radius: 0.25rem;
  background: #fff;
  color: #000;
  font: 400 0.875rem "Poppins", sans-serif;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.submit__water {
  /* decorative graphic, contained, behind the label */
  position: absolute;
  inset: 0;
  width: 48%;
  height: 108%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.submit__label {
  position: relative;
  z-index: 1;
}

/* on hover: stay in place and push toward the viewer (out of the screen) */
.submit:hover {
  background: #ececec;
  transform: perspective(600px) translateZ(28px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.submit:active {
  transform: perspective(600px) translateZ(12px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.submit:disabled {
  opacity: 0.7;
  cursor: default;
}

.notify button:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Inline form feedback — both forms sit on dark backgrounds, so use light tints */
.form-status {
  margin-top: 0.75rem;
  min-height: 1.125rem;
  font: 400 0.875rem "Poppins", sans-serif;
  text-align: center;
}

.form-status.is-success {
  color: #8fe3cd;
}

.form-status.is-error {
  color: #ffb1a3;
}

/* ============================== FOOTER ============================== */
.footer {
  min-height: 3.75rem;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem 1rem;
}

.footer__divider {
  color: inherit;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer__social-link:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

/* ============================ RESPONSIVE ============================ */

/* Tablet — stack the about columns; leaf now sits between paragraph and headline */
@media (max-width: 860px) {
  .about {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "leaf"
      "right";
  }

  .about__right {
    padding-top: 3rem;
  }

  .about__leaf {
    margin-block: clamp(20px, 5vw, 40px) 0;
  }

  .about__headline {
    line-height: 1.06;
  }
}

/* Mobile — matches the Figma mobile frame (393px):
   centered about content, single-column form, no audio controls. */
@media (max-width: 600px) {

  /* hero */
  .hero {
    min-height: 100svh;
  }

  .hero__title {
    font-size: 34px;
    letter-spacing: 0.3px;
  }

  .hero__sub {
    font-size: 14px;
    max-width: 340px;
    margin-top: 20px;
  }

  .hero__note {
    font-size: 14px;
    margin-top: 18px;
  }

  .hero__audio {
    display: none;
  }

  .logo__icon {
    height: 42px;
  }

  .logo__word {
    height: 31px;
  }

  .notify {
    height: 50px;
    padding: 2px 2px 2px 16px;
  }

  .notify input {
    font-size: 14px;
  }

  .notify button {
    height: 46px;
    width: 107px;
    font-size: 14px;
  }

  /* about — centered */
  .about {
    text-align: center;
    padding-top: clamp(48px, 12vw, 84px);
  }

  .about__script {
    font-size: clamp(42px, 15vw, 60px);
    margin-bottom: 32px;
    margin-top: 40px;
  }

  .about__text p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .about__leaf {
    width: 74px;
    margin-block: clamp(24px, 8vw, 40px) clamp(28px, 8vw, 44px);
  }

  .about__right {
    padding-top: 3rem;
  }

  /* Grow to fill the full available width on mobile.
     Gutters are 6.25vw/side, so usable width is ~87.5vw at any mobile size;
     "HEALING IS" (~5.6em in Poppins Bold) fills that at ~15vw. */
  .about__headline {
    font-size: 9vw;
    line-height: 1.04;
  }

  /* video */
  .video {
    padding-bottom: 70px;
  }

  .submit__water {

    width: 100%;
    height: 100%;

  }

  .notify button .submit__water {
    width: 100%;
  }

  /* contact */
  .contact__sprout {
    width: 40px;
  }

  .contact__title {
    font-size: clamp(42px, 15vw, 60px);
    margin-bottom: 28px;
  }

  .contact__form {
    padding: 24px 20px;
  }

  .row {
    flex-direction: column;
    gap: 16px;
  }

  /* column stack: don't let flex-basis:0 collapse the field heights */
  .row .field {
    flex: 0 0 auto;
  }

  .field {
    height: 44px;
    font-size: 14px;
    background: #fff;
  }

  .textarea-field .field {
    height: 102px;
    padding: 11px 40px 11px 16px;
  }

  .submit {
    width: 135px;
    margin-top: 6px;
  }
}

/* ==================== DESKTOP PROPORTIONAL SCALING ====================
   The design canvas is 1920px. Above the tablet breakpoint we make the root
   font-size track that canvas — 16px at 1920px, shrinking linearly with the
   viewport — so every rem-based length scales the whole page proportionally.
   At 1270px the page renders as a faithful ~66% of the 1920 comp; it locks at
   16px above 1920px so the design never balloons on large monitors.

   Values expressed as clamp() in the base rules (which still drive the
   601–860px tablet range) are restated here as their plain 1920 rem value so
   they scale cleanly on desktop instead of freezing at their max cap. Fixed
   px values were converted to rem in place and scale automatically via the
   root; only clamp()-based values need to appear below. */
@media (min-width: 861px) {
  html {
    font-size: min(16px, calc(100vw / 120));
  }

  .site-header__inner {
    padding-block: 2.125rem;
  }

  .site-header.is-scrolled .site-header__inner {
    padding-block: 1.25rem;
  }

  .logo__icon {
    height: 4.125rem;
  }

  .logo__word {
    height: 3.125rem;
  }

  .hero__title {
    font-size: 5.5rem;
  }

  .hero__sub {
    margin-top: 1.875rem;
    font-size: 1.375rem;
  }

  .notify {
    margin-top: 2.5rem;
  }

  .hero__note {
    margin-top: 1.375rem;
    font-size: 1.125rem;
  }

  .hero__audio {
    bottom: 3.75rem;
  }

  .about {
    column-gap: 7.5rem;
    padding-top: 9.375rem;
    padding-bottom: 5.625rem;
  }

  .about__script {
    font-size: 5rem;
    margin-bottom: 2.125rem;
  }

  .about__right {
    padding-top: calc(5rem * 1.1 + 2.125rem);
  }

  .about__headline {
    font-size: 5.5rem;
  }

  .about__leaf {
    width: 6.9375rem;
    margin-top: 3.5rem;
  }

  .video {
    padding-bottom: 6rem;
  }

  .video__play img {
    width: 5.625rem;
  }

  .vision {
    padding-block: 6.875rem;
  }

  .vision__label {
    font-size: 3.375rem;
    margin-bottom: 1.625rem;
  }

  .vision__quote {
    font-size: 2.5rem;
  }

  .contact {
    padding-bottom: 7.5rem;
  }

  .contact__sprout {
    width: 2.9375rem;
    margin: 0 auto 1.375rem;
  }

  .contact__title {
    font-size: 3.75rem;
    margin-bottom: 2.875rem;
  }

  .contact__form {
    padding: 6rem 3.75rem;
  }

  .contact__fields {
    gap: 2rem;
  }

  .row {
    gap: 1.75rem;
  }

  .submit {
    margin-top: 0.75rem;
  }
}