/* =========================
   Valandar post-WF tweaks
   ========================= */

/* 1-A  |  Headline width & centering
-------------------------------------*/
.heading-style-h1.hero-headline{
    /* keeps lines ~70–80 ch on wide screens */
    max-width:40rem;          /* ≈ 640 px */
    margin-inline:auto;       /* centres the block */
    text-align:center;        /* matches current layout */
    line-height:1.1;          /* tight for big display text */
  }
  
  /* 1-B  |  Optional single-line on ≥1440 px */
  @media (min-width:1440px){
    .heading-style-h1.hero-headline{max-width:52rem;}
  }
  
  /* 2 |  Pill / “Ultimate vision” spacing
  ----------------------------------------*/
  .hero-feature{
     margin-bottom:1rem;      /* +16 px breathing room */
  }
  
  /* 3 |  Sub-headline rhythm
  ---------------------------*/
  .hero-sub{
    max-width:46rem;          /* keeps ~75 words section tidy */
    margin-inline:auto;
    margin-top:0.75rem;       /* 12 px gap to headline */
    margin-bottom:2rem;       /* 32 px to CTA form */
    text-align:center;
    line-height:1.4;
    font-size:clamp(1.1rem,2.5vw,1.25rem);
  }
  
  /* 4 |  CTA email form alignment
  --------------------------------*/
  .hero-form{
    justify-content:center;   /* keep field + button centred */
    gap:0.75rem;              /* 12 px between input & button */
  }
  
  /* 5 |  Remove accidental text-transform inherit
     (only if Webflow is forcing lower-case somewhere) */
  .heading-style-h1.hero-headline,
  .hero-sub{
    text-transform:none;
  }
/* desktop default: two lines */
.brand-hero { 
    font-size: clamp(2.5rem, 5vw + .5rem, 4.5rem);
    line-height: 1.1;
    max-width: 22ch;   /* keeps each line in that 30-ish char zone */
  }
  
  /* phones ≤ 480 px: let it run as one line to save vertical space */
  @media (max-width: 480px){
    .brand-hero { 
      max-width: none;
      white-space: normal;   /* browser breaks at spaces, <br> ignored */
    }
    .brand-hero br { display:none; }
  }
  

  .hero {
    text-align:center;
    padding:6rem 1rem 4rem;
  }
  
  .hero-head{
    /*font-weight:700;
    font-size:clamp(2.5rem, 7vw, 5.5rem);
    line-height:1.1; */
    max-width:18ch;      /* pulls line-lengths closer together */
    /*margin:0 auto; */
    text-align: left;
  }
  
  
  .hero-sub{
    font-size:clamp(1rem,2.2vw,1.35rem);
    line-height:1.35;
    max-width:42ch;      /* keeps the sub-head from spanning full width */
    margin:2.25rem auto 0;
    color:#555;
    text-align:left
  }

  :root{
    --vl-indigo:#1E234A;  /* shield / V */
    --vl-amber:#e2d896;   /* sun & rays */
  }
  
  /* dark-mode tweak */
  @media (prefers-color-scheme:dark){
    :root{ --vl-indigo:#F1F3FF; }
  }
  

  /* ---------- 2. logo drawing ---------- */

/* size the SVG once and let it scale in flex-layouts */
.valandar-logo{
  width:44px;                 /* tweak until it feels right */
  height:auto;
  display:block;              /* removes inline-svg baseline gap */
}

/* shield & V: always visible */
.valandar-logo .shield,
.valandar-logo .vee{
  stroke:var(--vl-indigo);
  stroke-width:2.5;
  fill:none;
  stroke-linejoin:round;
}

/* sun & rays: invisible until interaction  */
.valandar-logo .sun,
.valandar-logo .sun-rays{
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
}

/* small spring-pop on the rays */
.valandar-logo .sun-rays{
  transform:scale(.6);
  transform-origin:center;
  stroke:var(--vl-amber);
  stroke-width:2;
  stroke-linecap:round;
}

/* reveal on mouse-hover OR keyboard focus */
.logo:hover   .sun,
.logo:focus-visible .sun,
.logo:hover   .sun-rays,
.logo:focus-visible .sun-rays{
  opacity:1;
  transform:scale(1);
}

/* after the main logo rules */
.navbar .valandar-logo .shield,
.navbar .valandar-logo .vee{
  stroke:#F1F3FF;        /* pick any light colour that reads well */
}


/* optional “pulse” micro-animation */
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.logo:hover .sun-rays{ animation:pulse .8s ease-in-out; }
/* ---------- 3. pill-nav layout ---------- */
/* make the black pill a tidy flex bar */
.navbar{
    display:flex;
    align-items:center;
    height:68px;        /* locks vertical rhythm */
    padding:0 32px;     /* side padding of the pill */
  }
  
  /* brand link = icon + word-mark */
  .logo{
    display:flex;
    align-items:center;
    gap:12px;           /* space between SVG + “Valandar” */
    padding:0;          /* override Webflow’s default */
  }
  
  /* push the menu items to the right */
  .navbar-menu{ margin-left:auto; }
  
  .valandar-logo .sun{
    fill:var(--vl-amber);      /* ← add this */
    opacity:0;                 /* already in your rules */
    transition:opacity .25s ease;
  }