/* VLC Circle — global shell. Design tokens live in :root (functions.php). */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--vlc-surface);color:var(--vlc-ink);
  font-family:Poppins,sans-serif;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Poppins,sans-serif;font-weight:600;line-height:1.1;margin:0 0 var(--vlc-sm)}
p{margin:0 0 var(--vlc-sm);max-width:65ch}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

.vlc-skip{position:absolute;left:-9999px}
.vlc-skip:focus{left:var(--vlc-sm);top:var(--vlc-sm);z-index:999;
  background:var(--vlc-accent);color:#fff;padding:var(--vlc-xs) var(--vlc-sm)}
:focus-visible{outline:3px solid var(--vlc-accent);outline-offset:2px}

/* ---------- Buttons: sharp rectangles, never pills ---------- */
.vlc-btn:not(.elementor-widget){display:inline-block;padding:12px 26px;border-radius:0;
  font-size:.9rem;font-weight:500;text-decoration:none;border:0;cursor:pointer;
  transition:background-color .18s ease}
.vlc-btn--primary:not(.elementor-widget){background:var(--vlc-accent);color:#fff}
.vlc-btn--primary:not(.elementor-widget):hover{background:#47A342}
.vlc-btn--secondary:not(.elementor-widget){background:var(--vlc-yellow);color:var(--vlc-ink)}
.vlc-btn--secondary:not(.elementor-widget):hover{background:#E5DE45}
.vlc-link{text-decoration:underline;text-underline-offset:5px;font-size:.9rem}

/* ---------- Header ---------- */
.vlc-header{background:var(--vlc-bg)}
.vlc-header__inner{max-width:1280px;margin:0 auto;padding:var(--vlc-sm) var(--vlc-md);
  display:flex;align-items:center;gap:var(--vlc-md)}
.vlc-logo{flex:0 0 auto;text-decoration:none}
.vlc-logo__img{height:74px;width:auto;display:block}
.vlc-logo__text{display:block;font-weight:600;font-size:1.05rem;line-height:1.05;
  color:var(--vlc-accent);letter-spacing:-.01em}
.vlc-logo__text--rev{color:#fff;font-size:1.5rem}

.vlc-header__bar{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:6px}

/* City switcher: peach fills the active side */
.vlc-cityswitch{display:inline-flex;border-radius:var(--vlc-r-md);overflow:hidden;
  background:#F4EDE2}
.vlc-cityswitch__opt{padding:3px 16px;font-size:.78rem;text-decoration:none;
  color:var(--vlc-muted);transition:background-color .18s ease,color .18s ease}
.vlc-cityswitch__opt.is-active{background:var(--vlc-peach);color:var(--vlc-ink);font-weight:500}
.vlc-cityswitch__opt:hover{color:var(--vlc-ink)}

.vlc-header__row{display:flex;align-items:center;gap:var(--vlc-md);width:100%;
  justify-content:flex-end}
.vlc-nav{flex:1}
.vlc-nav__list{list-style:none;display:flex;justify-content:center;
  gap:22px;margin:0;padding:0;flex-wrap:nowrap}
.vlc-nav__list a{text-decoration:none;font-size:.88rem;white-space:nowrap;
  padding:6px 0;display:inline-block}
.vlc-nav__list .current-menu-item>a,
.vlc-nav__list li>a:hover{color:var(--vlc-accent)}
.vlc-nav__list .menu-item-has-children>a::after{content:"";display:inline-block;
  width:5px;height:5px;margin-left:7px;vertical-align:middle;
  border-right:1.5px solid var(--vlc-accent);border-bottom:1.5px solid var(--vlc-accent);
  transform:rotate(45deg) translateY(-2px)}
.vlc-nav__list .sub-menu{list-style:none;margin:0;padding:var(--vlc-xs) 0;
  position:absolute;background:var(--vlc-surface);border:1px solid var(--vlc-line);
  min-width:200px;display:none;z-index:50}
.vlc-nav__list li{position:relative}
.vlc-nav__list li:hover>.sub-menu,
.vlc-nav__list li:focus-within>.sub-menu{display:block}
.vlc-nav__list .sub-menu a{padding:8px var(--vlc-sm);display:block}

.vlc-header__cta{display:flex;align-items:center;gap:var(--vlc-sm);flex:0 0 auto}

.vlc-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;
  padding:10px;cursor:pointer;margin-left:auto}
.vlc-burger span{width:24px;height:2px;background:var(--vlc-ink);display:block}

/* ---------- Footer ---------- */
.vlc-footer{background:var(--vlc-accent);color:#fff;padding:var(--vlc-lg) var(--vlc-md)}
.vlc-footer__inner{max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr 1.4fr;gap:var(--vlc-md)}
.vlc-footer__h{font-size:1.15rem;margin-bottom:var(--vlc-sm)}
.vlc-footer__tag{font-size:.78rem;opacity:.92;margin-top:var(--vlc-md);max-width:24ch}
.vlc-footer__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.82rem}
.vlc-footer__list a{text-decoration:none;opacity:.95}
.vlc-footer__list a:hover{text-decoration:underline;text-underline-offset:4px}
.vlc-footer__col--news .wpcf7-form{display:flex;background:#fff;
  border-radius:var(--vlc-r-lg);padding:4px;max-width:340px}
.vlc-footer__col--news input[type=email]{flex:1;border:0;padding:10px 16px;
  font-family:inherit;font-size:.82rem;background:transparent;color:var(--vlc-ink)}
.vlc-footer__col--news input[type=email]:focus{outline:none}
.vlc-footer__col--news input[type=submit]{border:0;border-radius:var(--vlc-r-lg);
  background:var(--vlc-accent);color:#fff;padding:10px 22px;font-family:inherit;
  font-size:.82rem;cursor:pointer}

/* ---------- City gate (front page, no shell) ---------- */
.vlc-gate-body{background:var(--vlc-surface)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .vlc-nav__list{gap:14px}
  .vlc-nav__list a{font-size:.82rem}
}
@media (max-width:1024px){
  .vlc-burger{display:flex}
  .vlc-header__inner{flex-wrap:wrap;align-items:flex-start}
  .vlc-header__bar{display:none;width:100%;align-items:stretch;gap:var(--vlc-sm);
    padding-top:var(--vlc-sm)}
  .vlc-header__bar.is-open{display:flex}
  .vlc-nav__list{flex-direction:column;gap:0}
  .vlc-nav__list li{border-bottom:1px solid var(--vlc-line)}
  .vlc-nav__list a{padding:12px 0}
  .vlc-nav__list .sub-menu{position:static;display:block;border:0;padding-left:var(--vlc-sm)}
  .vlc-header__cta{flex-direction:column;align-items:stretch;gap:var(--vlc-xs)}
  .vlc-header__cta .vlc-btn{text-align:center}
  .vlc-cityswitch{align-self:flex-start}
  .vlc-footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .vlc-footer__inner{grid-template-columns:1fr}
}

/* ---------- Signature arc clip ---------- */

/* ---------- Home hero ---------- */
.vlc-hero{background:var(--vlc-bg)}
.vlc-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;text-align:center;
  max-width:16ch;margin-inline:auto}
.vlc-hero__strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--vlc-sm);
  align-items:end;margin-top:var(--vlc-md)}
.vlc-hero__strip .vlc-arc{aspect-ratio:3/4}
.vlc-hero__lede{text-align:center;max-width:46ch;margin-inline:auto;
  margin-top:var(--vlc-md);color:var(--vlc-ink)}
.vlc-hero__cta{display:flex;gap:var(--vlc-sm);justify-content:center;flex-wrap:wrap}
@media (max-width:900px){
  .vlc-hero__strip{grid-template-columns:repeat(2,1fr)}
  .vlc-hero__strip>*:nth-child(odd){transform:none}
}
@media (max-width:520px){
  .vlc-hero__strip{grid-template-columns:1fr 1fr;gap:var(--vlc-xs)}
}

/* Logo (extracted from the source artboards) */
.vlc-logo__img{height:74px;width:auto;display:block}
.vlc-logo__img--rev{height:96px}
@media (max-width:1024px){.vlc-logo__img{height:58px}}

/* Hero tightened so the whole composition lands in one laptop view */
.vlc-hero .e-con-inner{padding:0}
.vlc-hero h1,.vlc-hero .elementor-heading-title{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:0}
.vlc-hero__strip{margin-top:clamp(16px,2.2vw,28px)}
.vlc-hero__strip .vlc-arc{aspect-ratio:4/5}
.vlc-hero__strip img{aspect-ratio:4/5;object-fit:cover;width:100%}
.vlc-hero__lede{margin-top:clamp(16px,2.2vw,28px);font-size:.9rem}
.vlc-hero__cta{margin-top:clamp(14px,1.8vw,22px)}

/* Hero CTA pair reads as one bar, as drawn in the comps */
.vlc-hero__cta{gap:0}
.vlc-hero__cta .elementor-widget-button.vlc-btn .elementor-button{padding:13px 34px}

/* Hero photo shapes vary across the strip, as drawn in the comps:
   a left-arched panel, an oval, a plain rounded rectangle, an oval. */

/* ---- Hero photo shapes -------------------------------------------
   Each strip is drawn differently in its own comp. These are read off
   the artwork, not shared between the two homepages.
   ------------------------------------------------------------------ */
.vlc-arc img{width:100%;height:100%;object-fit:cover;display:block}
.vlc-arc--tl img{border-radius:50% 0 0 0}
.vlc-arc--bl img{border-radius:0 0 0 50%}
.vlc-arc--tr img{border-radius:0 50% 0 0}
.vlc-arc--br img{border-radius:0 0 50% 0}
.vlc-arc--right img{border-radius:0 50% 50% 0}
.vlc-arc--left img{border-radius:50% 0 0 50%}
.vlc-arc--oval img{border-radius:50%}
.vlc-arc--rect img{border-radius:0}
.vlc-arc--soft img{border-radius:var(--vlc-r-md)}

/* Karachi strip: staggered, varied widths, as drawn */

/* Lahore strip: ovals sit taller than the rectangles */

/* ---- Lahore hero strip -------------------------------------------
   Shapes, aspect ratios and vertical offsets measured off the comp.
   Each frame is different; they are not variants of one rule.
   ------------------------------------------------------------------ */
.page-lahore .vlc-hero__strip{grid-template-columns:repeat(4,1fr);align-items:start;gap:clamp(8px,1.1vw,15px)}
.page-lahore .vlc-hero__strip .vlc-arc{aspect-ratio:auto}
.page-lahore .vlc-arc--l1 img{border-radius:52% 34% 0 0;aspect-ratio:114/166}
.page-lahore .vlc-arc--l2 img{border-radius:50% 0 0 50%;aspect-ratio:115/216}
.page-lahore .vlc-arc--l3 img{border-radius:44% 0 0 0;aspect-ratio:115/184}
.page-lahore .vlc-arc--l4 img{border-radius:46% 46% 50% 0;aspect-ratio:114/207}
.page-lahore .vlc-hero__strip>*:nth-child(1){margin-top:8.8%}
.page-lahore .vlc-hero__strip>*:nth-child(2){margin-top:0}
.page-lahore .vlc-hero__strip>*:nth-child(3){margin-top:0}
.page-lahore .vlc-hero__strip>*:nth-child(4){margin-top:4.2%}
@media (max-width:900px){.page-lahore .vlc-hero__strip{grid-template-columns:repeat(2,1fr)}.page-lahore .vlc-hero__strip>*{margin-top:0 !important}}

/* ---- Karachi hero strip ------------------------------------------
   Shapes, aspects and offsets measured off the comp. Different from
   Lahore: these two strips share nothing but the grid.
   ------------------------------------------------------------------ */
.page-karachi .vlc-hero__strip{grid-template-columns:135fr 135fr 133fr 145fr;align-items:start;gap:clamp(8px,1.1vw,16px)}
.page-karachi .vlc-hero__strip .vlc-arc{aspect-ratio:auto}
.page-karachi .vlc-arc--k1 img{border-radius:50% 0 0 0;aspect-ratio:135/176}
.page-karachi .vlc-arc--k2 img{border-radius:34% 0 0 50%;aspect-ratio:135/233}
.page-karachi .vlc-arc--k3 img{border-radius:0 50% 0 0;aspect-ratio:133/196}
.page-karachi .vlc-arc--k4 img{border-radius:50% 0 50% 0;aspect-ratio:145/195}
.page-karachi .vlc-hero__strip>*:nth-child(1){margin-top:8.6%}
.page-karachi .vlc-hero__strip>*:nth-child(2){margin-top:0}
.page-karachi .vlc-hero__strip>*:nth-child(3){margin-top:0}
.page-karachi .vlc-hero__strip>*:nth-child(4){margin-top:16.3%}
@media (max-width:900px){.page-karachi .vlc-hero__strip{grid-template-columns:1fr 1fr}.page-karachi .vlc-hero__strip>*{margin-top:0 !important}}

/* ---- Hero copy alignment -----------------------------------------
   The lede and CTA bar are centred on the page in both comps. The base
   p{max-width:65ch} was leaving the paragraph flush left inside its
   full-width widget wrapper, so it read as off-centre.
   ------------------------------------------------------------------ */
.vlc-hero__lede{width:100%;text-align:center}
.vlc-hero__lede p{max-width:36ch;margin-inline:auto;text-align:center;font-size:.9rem;line-height:1.6}
.vlc-hero h1,
.vlc-hero .elementor-heading-title{max-width:20ch;margin-inline:auto;text-align:center;text-wrap:balance}
.vlc-hero__cta{width:100%;display:flex;justify-content:center;align-items:stretch;gap:0}
.vlc-hero__cta .elementor-widget-button.vlc-btn{align-self:auto}
.vlc-hero__cta .elementor-widget-button.vlc-btn .elementor-button{white-space:nowrap;padding:13px clamp(18px,2.4vw,34px)}


/* ================================================================
   Mobile nav fix.
   .vlc-header__row stayed a right-aligned flex row below 1024px, so the
   nav and the CTA block shared one line and the menu overflowed off the
   left edge. Stack the row, let the nav span the panel, and drop the
   dropdown's desktop surface treatment once it renders inline.
   ================================================================ */
/* mobile nav overflow fix */
@media (max-width:1024px){
  .vlc-header__inner{overflow-x:clip}

  .vlc-header__row{flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:var(--vlc-sm);width:100%}

  .vlc-nav{width:100%}
  .vlc-nav__list{width:100%;align-items:stretch;justify-content:flex-start}
  .vlc-nav__list>li{width:100%}
  .vlc-nav__list a{display:block;width:100%;white-space:normal;text-align:left}

  /* Inline dropdown: no floating panel, no card surface. */
  .vlc-nav__list .sub-menu{position:static;display:block;background:none;
    border:0;min-width:0;width:100%;padding:0 0 6px var(--vlc-sm);z-index:auto}
  .vlc-nav__list .sub-menu li{border-bottom:0}
  .vlc-nav__list .sub-menu a{padding:9px 0;font-size:.86rem;opacity:.85}

  .vlc-header__cta{width:100%}
}