/* =============================================================
   Physio by Dr. Rehman - Website Under Development
   Temporary landing page.  Pure HTML + CSS, no JavaScript.

   The logo is a real <img> in index.html (change its src there).
   The decorative pattern path lives in one place only: --pattern.

   SIZING NOTE
   Every type and element size is capped by BOTH viewport width and
   viewport height, via min(Xvw, Yvh) inside clamp().  The height cap
   is what makes the whole composition fit inside one screen at 100%
   browser zoom instead of only looking right when zoomed out.
   No CSS zoom, no transform: scale(), no JavaScript.
   ============================================================= */

:root {
  /* Brand palette */
  --navy:        #061b2c;
  --navy-deep:   #04121f;
  --navy-lift:   #0a2740;
  --cyan:        #12adc3;
  --cyan-soft:   #9fe4ee;
  --red:         #ef2529;
  --white:       #ffffff;
  --muted:       #d6e0e7;

  /* Decorative pattern - change this one path if you move the file */
  --pattern: url("assets/pattern.png");

  /* Tuning */
  --pattern-opacity: 0.62;

  /* Logo: ~185-215px on a laptop, up to ~270px on a 1920 display. */
  --logo-width: clamp(180px, min(14vw, 28vh), 285px);

  /* Vertical rhythm, height-aware so tall blocks never overflow. */
  --gap-sm: clamp(0.7rem, 1.9vh, 1.35rem);
  --gap-md: clamp(1rem, 2.6vh, 1.9rem);
  --gap-lg: clamp(1.2rem, 3.2vh, 2.3rem);

  --ring: 2px solid var(--cyan);

  --font-sans: "Archivo", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
}

/* ----------------------------------------------------------- reset */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: var(--navy);
  color: var(--white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }

/* Keyboard focus stays visible everywhere. */
a:focus-visible {
  outline: var(--ring);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ------------------------------------------------------- backdrop */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%,
      var(--navy-lift) 0%, #071e33 45%, var(--navy-deep) 100%);
}

/* The supplied transparent diagonal-pattern PNG. */
.backdrop__pattern {
  position: absolute;
  inset: -2px;
  background-image: var(--pattern);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--pattern-opacity);
}

/* Settles the middle of the canvas so the copy stays readable over
   the pattern at every screen size. */
.backdrop__calm {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30% 26% at 60% 6%,
      rgba(5, 20, 34, 0.98) 0%, rgba(5, 20, 34, 0.85) 50%, rgba(5, 20, 34, 0) 100%),
    radial-gradient(58% 62% at 52% 50%,
      rgba(5, 20, 34, 0.94) 0%, rgba(5, 20, 34, 0.80) 42%, rgba(5, 20, 34, 0) 78%),
    linear-gradient(180deg,
      rgba(4, 16, 28, 0.35) 0%, rgba(4, 16, 28, 0) 22%,
      rgba(4, 16, 28, 0) 78%, rgba(4, 16, 28, 0.40) 100%);
}

/* ----------------------------------------------------------- page */

.page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 3.25rem);

  /* The wrapper hugs its content and centres as one block, so the
     composition never leaves a wide dead margin on the right. */
  width: fit-content;
  max-width: min(92vw, 1450px);
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 5vh, 3.25rem);
}

/* Grid items must be allowed to shrink below their min-content width,
   otherwise a long word such as DEVELOPMENT forces horizontal overflow. */
.brand,
.content { min-width: 0; max-width: 100%; }

/* ---------------------------------------------------------- brand */

.brand {
  display: flex;
  justify-content: center;
}

.brand__logo {
  width: var(--logo-width);
  height: auto;
}

/* -------------------------------------------------------- content */

.content {
  position: relative;
  padding-left: clamp(1.5rem, 3.2vw, 3.5rem);
}

/* Thin vertical teal divider between the logo and the copy. */
.content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: min(70%, 60vh);
  background: linear-gradient(180deg,
    rgba(18, 173, 195, 0) 0%,
    rgba(18, 173, 195, 0.55) 18%,
    rgba(18, 173, 195, 0.75) 50%,
    rgba(18, 173, 195, 0.55) 82%,
    rgba(18, 173, 195, 0) 100%);
}

/* ------------------------------------------------------- headline */

.headline {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.headline__line { display: block; }

/* Never let the longest word widen the column. */
.headline__line--white,
.headline__line--accent { overflow-wrap: break-word; }

/* DEVELOPMENT is the longest word; it gets its own size on small screens. */

.headline__line--white {
  color: var(--white);
  font-size: clamp(2.1rem, min(4.9vw, 10.5vh), 5.6rem);
}

.headline__line--accent {
  color: var(--cyan);
  font-size: clamp(2.7rem, min(6.4vw, 13.7vh), 7.2rem);
  letter-spacing: 0.005em;
}

/* ----------------------------------------------------------- copy */

.lede {
  margin: var(--gap-md) 0 0;
  max-width: 42ch;
  color: var(--muted);
  font-size: clamp(0.95rem, min(1.15vw, 2.1vh), 1.35rem);
  font-weight: 400;
  line-height: 1.45;
}

.tagline {
  margin: var(--gap-sm) 0 0;
  color: var(--red);                 /* fallback if background-clip fails */
  font-size: clamp(1.05rem, min(1.5vw, 2.7vh), 1.75rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.005em;
}

/* Slow gradient drift across the tagline. The ramp is red for most of its
   length with a narrow teal highlight that sweeps through, so the line
   always reads as the brand's red accent rather than a two-tone fade.
   Applied only where background-clip: text is supported, so the solid red
   fallback above stays visible everywhere else. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tagline {
    /* Red holds most of the ramp. The warm stops sit tight against the
       teal so the red -> teal crossing (which desaturates towards grey in
       sRGB) is only a few percent wide and reads as a highlight edge
       rather than a grey word. */
    background-image: linear-gradient(
      90deg,
      var(--red)  0%,
      var(--red)  42%,
      #ff5a2e     47%,
      var(--cyan) 50%,
      #ff5a2e     53%,
      var(--red)  58%,
      var(--red)  100%);
    background-size: 300% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: tagline-flow 9s ease-in-out infinite;
  }
}


@keyframes tagline-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.divider-h {
  margin: var(--gap-lg) 0 0;
  border: 0;
  height: 1px;
  width: min(100%, 480px);
  background: linear-gradient(90deg,
    rgba(18, 173, 195, 0.55) 0%, rgba(18, 173, 195, 0) 100%);
}

/* -------------------------------------------------------- contact */

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.85rem, 1.8vw, 1.85rem);
  margin-top: var(--gap-md);
  font-style: normal;            /* address defaults to italic */
}

.contact__item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem 0.15rem;
  color: #e6eef5;
  font-size: clamp(0.9rem, min(1vw, 1.85vh), 1.2rem);
  transition: color 0.2s ease, transform 0.2s ease;
}

.contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(34px, min(2.2vw, 4.2vh), 44px);
  height: clamp(34px, min(2.2vw, 4.2vh), 44px);
  border-radius: 50%;
  background: var(--cyan);
  color: #04212f;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.contact__icon svg { width: 48%; height: 48%; }

.contact__sep {
  width: 1px;
  height: 1.7rem;
  background: rgba(255, 255, 255, 0.22);
}

.contact__item:hover,
.contact__item:focus-visible {
  color: var(--cyan-soft);
  transform: translateY(-2px);
}

.contact__item:hover .contact__icon,
.contact__item:focus-visible .contact__icon { background: var(--cyan-soft); }

/* --------------------------------------------------------- social */

.social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 1.2vw, 1.05rem);
  margin-top: var(--gap-lg);
}

.social__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 0.9vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, min(2.2vw, 4.1vh), 42px);
  height: clamp(32px, min(2.2vw, 4.1vh), 42px);
  border: 1.4px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  color: var(--white);
  transition: border-color 0.2s ease, color 0.2s ease,
              background-color 0.2s ease, transform 0.2s ease;
}

.social__link svg { width: 46%; height: 46%; }

.social__link:hover,
.social__link:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
  background-color: rgba(18, 173, 195, 0.10);
  transform: translateY(-3px);
}

.social__handle {
  margin-left: clamp(0.2rem, 0.8vw, 0.85rem);
  color: var(--cyan-soft);
  font-size: clamp(0.9rem, min(1vw, 1.85vh), 1.2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.social__handle:hover,
.social__handle:focus-visible { color: var(--white); }

/* ==================================================== responsive */

/* Narrow desktops / small laptops - tighten the column gap so the
   headline keeps its scale instead of wrapping early. */
@media (max-width: 1280px) {
  .page { gap: clamp(1rem, 2.4vw, 2.25rem); }
  .content { padding-left: clamp(1.15rem, 2.4vw, 2.5rem); }
}

/* Portrait tablets, phones - stack, centre, drop the vertical rule. */
@media (max-width: 900px),
       (max-width: 1100px) and (orientation: portrait) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    gap: clamp(1.5rem, 4.5vh, 2.75rem);
    width: min(92vw, 640px);
    padding-block: clamp(2rem, 6vh, 3.5rem);
  }

  /* Full-width rows, centred by text-align/flex - NOT by justify-items,
     which would let an over-wide child spill out of the column. */
  .brand,
  .content { width: 100%; }

  .content { padding-left: 0; }
  .content::before { display: none; }   /* divider removed when stacked */

  .brand__logo { width: clamp(185px, 40vw, 290px); }

  .headline__line--white  { font-size: clamp(1.65rem, 8.4vw, 3.6rem); }
  .headline__line--accent { font-size: clamp(2.1rem, 11vw, 4.6rem); }

  .lede    { margin-inline: auto; font-size: clamp(0.95rem, 2.6vw, 1.25rem); }
  .tagline { font-size: clamp(1.1rem, 3.6vw, 1.6rem); }

  .divider-h { margin-inline: auto; width: min(100%, 440px); }

  .contact,
  .social,
  .social__list { justify-content: center; }

  .contact       { gap: clamp(0.7rem, 3vw, 1.4rem); }
  .contact__item { padding: 0.5rem 0.4rem; }   /* comfortable tap target */
  .contact__icon { width: 42px; height: 42px; }

  .social__link   { width: 52px; height: 52px; }
  .social__handle { margin-left: 0; width: 100%; }

  /* Keep the pattern present but quieter behind stacked text. */
  .backdrop__pattern { opacity: 0.55; }
  .backdrop__calm {
    background:
      radial-gradient(80% 52% at 50% 50%,
        rgba(5, 20, 34, 0.90) 0%, rgba(5, 20, 34, 0.72) 45%, rgba(5, 20, 34, 0.12) 100%);
  }
}

/* =========================================================
   PHONES (<= 768px) - a composition designed for mobile, not
   the desktop grid collapsed. Top-aligned hero, logo and
   headline read as one unit, tight and deliberate rhythm.
   ========================================================= */
@media (max-width: 768px) {
  .page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;     /* top-aligned, not centred */
    text-align: center;

    width: 100%;
    max-width: 560px;
    min-height: 100vh;
    min-height: 100svh;              /* ignores mobile browser chrome */
    margin-inline: auto;
    gap: 0;                          /* rhythm comes from the margins below */
    padding: clamp(2rem, 5.5vh, 3rem) clamp(1.25rem, 5vw, 1.5rem)
             clamp(1.75rem, 4vh, 2.25rem);
  }

  .brand,
  .content { width: 100%; }

  /* Logo -> headline: one connected hero, 35-50px apart. */
  .brand { margin-bottom: clamp(35px, 5.5vh, 50px); }
  .brand__logo { width: clamp(165px, 46vw, 230px); }

  .content { padding-left: 0; }
  .content::before { display: none; }   /* vertical divider is desktop-only */

  .headline { line-height: 0.95; }
  .headline__line--white  { font-size: clamp(2rem, 9vw, 3.25rem); }
  .headline__line--accent { font-size: clamp(2.5rem, 12vw, 4.25rem); }
  .headline__line--long   { font-size: clamp(1.7rem, 8vw, 2.9rem); }

  /* Headline -> paragraph -> tagline */
  .lede {
    margin: clamp(20px, 2.8vh, 28px) auto 0;
    max-width: 30ch;
    font-size: clamp(0.95rem, 4vw, 1.1rem);
  }
  .tagline {
    margin-top: clamp(18px, 2.4vh, 24px);
    font-size: clamp(1.1rem, 5vw, 1.45rem);
  }

  .divider-h {
    margin: clamp(24px, 3.2vh, 32px) auto 0;
    width: min(100%, 300px);
    background: linear-gradient(90deg,
      rgba(18, 173, 195, 0) 0%,
      rgba(18, 173, 195, 0.6) 50%,
      rgba(18, 173, 195, 0) 100%);   /* centred, so it fades both ends */
  }

  /* Contact: compact stack. The rows share one left edge so the two
     icons line up in a column, and the block as a whole is centred -
     centring each row individually would stagger the icons, because
     the email and the phone number are different lengths. */
  .contact {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
    text-align: left;
    gap: clamp(16px, 2.2vh, 20px);
    margin-top: clamp(24px, 3vh, 28px);
  }
  .contact__sep { display: none; }
  .contact__item {
    gap: 0.7rem;
    padding: 0.4rem 0.5rem;
    font-size: clamp(0.95rem, 4vw, 1.1rem);
  }
  .contact__icon { width: 40px; height: 40px; }

  /* Social: icon row, username directly underneath. */
  .social {
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.4vh, 14px);
    margin-top: clamp(28px, 3.8vh, 36px);
  }
  .social__list { justify-content: center; gap: clamp(10px, 3vw, 14px); }
  .social__link { width: 44px; height: 44px; border-radius: 11px; }
  .social__handle {
    margin-left: 0;
    width: auto;
    font-size: clamp(0.95rem, 4vw, 1.1rem);
  }

  /* Pattern stays present, quieter behind centred text. */
  .backdrop__pattern { opacity: 0.5; }
  .backdrop__calm {
    background:
      radial-gradient(85% 50% at 50% 45%,
        rgba(5, 20, 34, 0.92) 0%, rgba(5, 20, 34, 0.74) 45%, rgba(5, 20, 34, 0.14) 100%);
  }
}

/* Small phones (320-360px): trim padding, keep everything on screen. */
@media (max-width: 380px) {
  .page { padding-inline: 1rem; }
  .brand { margin-bottom: clamp(35px, 5vh, 42px); }
  .brand__logo { width: clamp(150px, 48vw, 185px); }
  .social__link { width: 42px; height: 42px; }
  .social__list { gap: 10px; }
}

/* Short viewports (laptops at 100% zoom with browser chrome, landscape
   phones): the min(vh) caps above already shrink the type - just let the
   page scroll rather than crush if it still runs out of room. */
@media (max-height: 560px) {
  .page { min-height: auto; padding-block: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  .contact__item:hover,
  .social__link:hover { transform: none; }
  .tagline { animation: none; background-position: 0% 50%; }
}