/* ==========================================================================
   Workin Space — modern bold redesign
   Brand blue #0070C0 sampled directly from the existing Workin Space logo.
   All copy on this site is taken from workinspace.in. Nothing is invented.
   ========================================================================== */

:root{
  --blue:#0070C0;
  --blue-dark:#005494;
  --blue-light:#3FA0E8;
  --ink:#0B1220;
  --ink-2:#141C2C;
  --ink-3:#1E2838;
  --paper:#FFFFFF;
  --mist:#F4F7FB;
  --line:rgba(11,18,32,.10);
  --line-dark:rgba(255,255,255,.14);
  --muted:#5A6478;
  --muted-dark:#A6B2C6;
  --radius:18px;
  --radius-lg:28px;
  --shadow:0 18px 50px rgba(11,18,32,.10);
  --shadow-lg:0 30px 80px rgba(11,18,32,.16);
  --max:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{
  font-family:'Space Grotesk','Inter',sans-serif;
  line-height:1.05;
  letter-spacing:-.03em;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.02em}
p{margin:0 0 1.1em}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:clamp(64px,9vw,130px) 0}
.section--mist{background:var(--mist)}
.section--ink{background:var(--ink);color:#fff}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.section--ink p{color:var(--muted-dark)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue);display:block}
.section--ink .eyebrow{color:var(--blue-light)}
.section--ink .eyebrow::before{background:var(--blue-light)}

.lede{font-size:clamp(1.02rem,1.6vw,1.22rem);color:var(--muted);max-width:62ch}
.section--ink .lede{color:var(--muted-dark)}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;border-radius:100px;border:2px solid transparent;
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 12px 30px rgba(0,112,192,.30)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,112,192,.42);background:var(--blue-dark)}
.btn--ghost{border-color:currentColor;color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:#fff;transform:translateY(-3px)}
.section--ink .btn--ghost{color:#fff}
.section--ink .btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--wa{background:#25D366;color:#0B1220;box-shadow:0 12px 30px rgba(37,211,102,.32)}
.btn--wa:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(37,211,102,.44)}
.btn--lg{padding:19px 40px;font-size:1.02rem}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 26px rgba(11,18,32,.07)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links > li{position:relative}
.nav-links a{
  display:block;padding:10px 15px;text-decoration:none;
  font-size:.93rem;font-weight:600;color:var(--ink);border-radius:100px;
  transition:color .2s,background .2s;
}
.nav-links a:hover,.nav-links a.is-active{color:var(--blue);background:rgba(0,112,192,.08)}
.has-drop > a::after{content:"";display:inline-block;margin-left:7px;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.drop{
  position:absolute;top:calc(100% + 8px);left:0;min-width:270px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:8px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{padding:11px 14px;border-radius:10px;font-weight:500;font-size:.9rem}
.nav-cta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-cta .btn{padding:10px 16px;font-size:.82rem;white-space:nowrap}
.burger{
  display:none;width:46px;height:46px;border:1px solid var(--line);background:#fff;
  border-radius:12px;cursor:pointer;padding:0;position:relative;
}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:27px}
.burger.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:1150px){
  .burger{display:block}
  .nav-cta .btn{display:none}
  .nav-links{
    position:fixed;top:78px;left:0;right:0;bottom:0;
    background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:20px 24px 60px;overflow-y:auto;
    transform:translateX(100%);transition:transform .4s var(--ease);
  }
  .nav-links.is-open{transform:translateX(0)}
  .nav-links a{padding:15px 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .has-drop > a::after{float:right;margin-top:9px}
  .drop{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:0 0 0 14px;max-height:0;overflow:hidden;
    transition:max-height .35s var(--ease);
  }
  .has-drop.is-open .drop{max-height:520px}
  .drop a{font-size:.95rem;color:var(--muted)}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:172px 0 clamp(70px,9vw,120px);background:var(--ink);color:#fff;overflow:hidden}
.hero::before{
  content:"";position:absolute;width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,112,192,.42) 0%,rgba(0,112,192,0) 68%);
  top:-360px;right:-260px;pointer-events:none;
  animation:drift 16s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:74px 74px;opacity:.28;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 78%);
}
@keyframes drift{to{transform:translate3d(-70px,60px,0) scale(1.12)}}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;max-width:17ch}
.hero h1 .hl{color:var(--blue-light);position:relative;white-space:nowrap}
.hero p{color:var(--muted-dark);max-width:56ch;font-size:clamp(1.02rem,1.7vw,1.24rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px;list-style:none;padding:0}
.hero-tags li{
  font-size:.8rem;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--line-dark);border-radius:100px;padding:8px 17px;color:#fff;
  background:rgba(255,255,255,.04);
}
.hero-figure{margin-top:56px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-figure img{width:100%;height:clamp(240px,38vw,470px);object-fit:cover}

/* page hero (inner pages) */
.page-hero{position:relative;padding:150px 0 60px;background:var(--ink);color:#fff;overflow:hidden}
.page-hero::before{
  content:"";position:absolute;width:720px;height:720px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,112,192,.40) 0%,rgba(0,112,192,0) 70%);
  top:-320px;right:-200px;pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:#fff;max-width:20ch}
.page-hero p{color:var(--muted-dark);max-width:60ch}
.crumb{font-size:.8rem;color:var(--muted-dark);margin-bottom:18px;letter-spacing:.04em}
.crumb a{color:var(--blue-light);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.page-figure{margin-top:44px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.page-figure img{width:100%;height:clamp(220px,32vw,420px);object-fit:cover}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;position:relative;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted);font-size:.96rem;margin:0}
.card img.ico{width:56px;height:56px;object-fit:contain;margin-bottom:18px}
.section--ink .card{background:var(--ink-2);border-color:var(--line-dark)}
.section--ink .card p{color:var(--muted-dark)}

.num-card{counter-increment:step}
.num-card .step{
  font-family:'Space Grotesk',sans-serif;font-size:2.6rem;font-weight:700;
  color:rgba(0,112,192,.22);line-height:1;display:block;margin-bottom:14px;letter-spacing:-.04em;
}

/* feature list with rule */
.feat{border-top:2px solid var(--ink);padding-top:22px}
.feat h3{margin-bottom:.35em}
.feat p{color:var(--muted);font-size:.95rem;margin:0}
.section--ink .feat{border-top-color:var(--blue-light)}
.section--ink .feat p{color:var(--muted-dark)}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery figure{margin:0;overflow:hidden;border-radius:16px;aspect-ratio:4/3;background:var(--mist)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figure:nth-child(1),.gallery figure:nth-child(6){grid-column:span 2;aspect-ratio:8/3}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure:nth-child(1),.gallery figure:nth-child(6){grid-column:span 2}
}

/* marquee for partner logos */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:70px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:44px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .3s,opacity .3s}
.marquee img:hover{filter:none;opacity:1}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;height:100%;max-height:520px;object-fit:cover}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;letter-spacing:-.04em;color:var(--blue-light);line-height:1}
.stat span{font-size:.86rem;color:var(--muted-dark);letter-spacing:.03em}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-weight:600;font-size:1.03rem;letter-spacing:-.01em;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:6px;top:31px;width:13px;height:13px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc .acc-body{padding:0 40px 24px 0;color:var(--muted);font-size:.97rem}

/* ---------- price cards ---------- */
.price{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px 30px;
  display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.price:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.price .tier{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--blue)}
.price .amt{font-family:'Space Grotesk',sans-serif;font-size:2.3rem;font-weight:700;letter-spacing:-.04em;margin:12px 0 4px}
.price .per{font-size:.86rem;color:var(--muted);margin-bottom:22px}
.price ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.price li{position:relative;padding-left:28px;font-size:.93rem;color:var(--muted)}
.price li::before{
  content:"";position:absolute;left:0;top:7px;width:15px;height:8px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg);
}
.price .btn{margin-top:auto}
.price--hero{background:var(--ink);border-color:transparent;color:#fff}
.price--hero .amt{color:#fff}
.price--hero li{color:var(--muted-dark)}
.price--hero .tier{color:var(--blue-light)}

/* ---------- rooms (conference booking) ---------- */
.room{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;
}
@media (max-width:900px){.room{grid-template-columns:1fr}}
.room-media img{width:100%;height:100%;min-height:280px;object-fit:cover}
.room-body{padding:clamp(26px,3vw,40px)}
.room-body h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.room-meta{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:14px}
.room-meta li{display:flex;gap:14px;font-size:.95rem;color:var(--muted);align-items:flex-start}
.room-meta strong{color:var(--ink);min-width:104px;flex-shrink:0;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.rate{display:inline-flex;align-items:baseline;gap:8px;background:rgba(0,112,192,.08);border-radius:100px;padding:10px 22px;margin-bottom:6px}
.rate b{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;letter-spacing:-.03em;color:var(--blue)}
.rate span{font-size:.85rem;color:var(--muted)}
.map-embed{border:0;width:100%;height:260px;display:block;border-radius:16px;margin-top:6px;filter:grayscale(.3)}
.placeholder{
  background:#FFF6E0;border:1px dashed #E0A83C;border-radius:10px;
  padding:10px 14px;font-size:.83rem;color:#8A6114;margin-top:6px;
}

/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,4vw,46px);box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;padding:15px 17px;border:1.5px solid var(--line);border-radius:12px;
  font:inherit;font-size:.97rem;color:var(--ink);background:#fff;
  transition:border-color .25s,box-shadow .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,112,192,.14);
}
.field textarea{min-height:130px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
.err{color:#C2352B;font-size:.82rem;margin-top:6px;display:none}
.field.has-err input,.field.has-err select{border-color:#C2352B}
.field.has-err .err{display:block}
.form-note{font-size:.84rem;color:var(--muted);margin-top:16px}

/* ---------- contact tiles ---------- */
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;gap:18px;align-items:flex-start}
.tile img{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.tile h3{font-size:1.05rem;margin-bottom:.3em}
.tile p,.tile a{color:var(--muted);font-size:.95rem;margin:0;text-decoration:none;word-break:break-word}
.tile a:hover{color:var(--blue)}

/* location mini cards */
.loc{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.loc:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.loc h3{font-size:1.1rem;margin-bottom:.4em}
.loc p{font-size:.88rem;color:var(--muted);margin:0}
.loc .go{display:inline-block;margin-top:14px;font-size:.82rem;font-weight:700;color:var(--blue);letter-spacing:.04em}

/* ---------- CTA band ---------- */
.band{background:var(--blue);color:#fff;border-radius:var(--radius-lg);padding:clamp(38px,6vw,72px);text-align:center;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.20),transparent 55%);pointer-events:none}
.band h2{color:#fff;position:relative}
.band p{color:rgba(255,255,255,.88);max-width:56ch;margin-left:auto;margin-right:auto;position:relative}
.band .btn{position:relative}
.band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.band .btn--ghost:hover{background:#fff;color:var(--blue)}
.band-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#fff;padding:clamp(56px,7vw,86px) 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1fr;gap:40px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-footer img.flogo{height:40px;margin-bottom:20px}
.site-footer h4{font-family:'Space Grotesk',sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-light);margin-bottom:18px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.site-footer a{color:var(--muted-dark);text-decoration:none;font-size:.92rem;transition:color .2s}
.site-footer a:hover{color:#fff}
.site-footer p{color:var(--muted-dark);font-size:.92rem}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{
  width:40px;height:40px;border:1px solid var(--line-dark);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;
  letter-spacing:.02em;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.socials a:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-3px)}
.foot-base{border-top:1px solid var(--line-dark);margin-top:52px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-base p{margin:0;font-size:.85rem}

/* floating whatsapp */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;
  background:#25D366;color:#0B1220;border-radius:100px;padding:14px 22px;
  text-decoration:none;font-weight:700;font-size:.9rem;
  box-shadow:0 14px 34px rgba(37,211,102,.42);
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .3s var(--ease);
}
.wa-float:hover{transform:translateY(-4px) scale(1.03)}
@media (max-width:560px){.wa-float{padding:14px 18px;font-size:.84rem}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

/* --- Compact single-line header --- */
.site-header .wrap{height:auto;min-height:0;padding-top:8px;padding-bottom:8px;gap:14px}
.site-header .brand img{height:32px}
.site-header .nav-links{gap:2px}
.site-header .nav-links > li > a,
.site-header .nav-links .drop-toggle{white-space:nowrap;padding:9px 10px;font-size:14px}
.site-header .nav-cta .btn{white-space:nowrap;padding:9px 13px;font-size:13px}

/* --- Mobile menu panel fix ---
   .site-header uses backdrop-filter, which makes it the containing block for
   position:fixed children. The panel was therefore sized against the 64px
   header, not the viewport. Anchor it to the header instead and give it a real
   height, so it no longer depends on a hardcoded top offset.               --- */
@media (max-width:1150px){
  .site-header .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    bottom:auto;
    height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
    gap:0;
  }
  .site-header .nav-links > li > a,
  .site-header .nav-links .drop-toggle{
    white-space:normal;
    padding:15px 4px;
    font-size:1.05rem;
  }
}

/* --- Mobile header layout: burger left, logo centred, booking button right --- */
@media (max-width:1150px){
  .site-header .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
  .site-header .burger{margin:0;justify-self:start}
  .site-header .brand{justify-self:center}
  .site-header .nav-cta{justify-self:end}
  .site-header .nav-cta .btn{display:inline-flex;padding:7px 10px;font-size:11.5px;white-space:nowrap}
  /* menu now slides in from the left, under the burger */
  .site-header .nav-links{transform:translateX(-100%)}
  .site-header .nav-links.is-open{transform:translateX(0)}
}
@media (max-width:560px){
  .site-header .wrap{padding-left:16px;padding-right:16px}
  .site-header .brand img{height:26px}
  .site-header .burger{width:40px;height:38px}
  .site-header .nav-cta .btn{padding:6px 8px;font-size:10.5px}
}

/* ---------- homepage hero fixes (24 Sep 2026) ---------- */
/* 1) tighten the gap between the fixed header and the eyebrow label */
.hero{padding-top:118px}

/* 2) "Book a conference room" ghost button was dark-on-dark against the hero's
      ink background (invisible until :hover swapped it to white) */
.hero .btn--ghost{color:#fff}
.hero .btn--ghost:hover{background:#fff;color:var(--ink)}
.page-hero .btn--ghost{color:#fff}
.page-hero .btn--ghost:hover{background:#fff;color:var(--ink)}

/* 3) reorder so the CTA buttons sit at the bottom-left of the hero section,
      instead of mid-way up the text block */
.hero .wrap{display:flex;flex-direction:column}
.hero .eyebrow{order:1}
.hero h1{order:2}
.hero > .wrap > p{order:3}
.hero-tags{order:4}
.hero-actions{order:5;margin-top:32px}

/* 4) hide the redundant "Conference Rooms" nav link — "Book a room" already
      does the same job as the header's blue CTA button (site-wide fix, since
      every page shares this stylesheet and the same nav markup) */
@media (min-width:1151px){
  .nav-links li:has(> a[href="conference-room-booking.html"]){display:none}
  .nav-links li:has(> a[href="day-pass-booking.html"]){display:none}
}

/* Below 1151px the nav-cta buttons disappear on the smallest screens (next
   rule), so the burger menu needs the Conference Rooms and Day Pass text
   links back as the only way to reach them there. */
@media (max-width:480px){
  .site-header .nav-cta .btn{display:none}
}

/* ---------- homepage hero: fit CTA buttons above the fold (2 Oct 2026) ---------- */
/* buttons were pushed below the viewport because they were ordered after the
   tag pills and the h1 was rendering very large on wide screens — tighten
   the whole hero stack so "Schedule a visit" / "Book a conference room"
   are visible without scrolling */
.hero{padding-top:96px;padding-bottom:clamp(50px,7vw,90px)}
.hero h1{font-size:clamp(2rem,3.8vw,2.9rem);margin-top:10px}
.hero > .wrap > p{margin-top:10px;max-width:62ch;font-size:clamp(.96rem,1.4vw,1.08rem)}
.hero-actions{order:4;margin-top:20px}
.hero-tags{order:5;margin-top:22px}

/* ---------- mobile header: logo was being squashed (7 Oct 2026) ----------
   The header grid puts logo | CTAs | burger in three columns. With two CTA
   buttons the logo's column collapsed and `img{max-width:100%}` squeezed the
   image to a sliver. Fix: the logo never shrinks, and on phones only the
   Day Pass CTA stays in the bar (Conference Rooms is one tap away in the menu). */
.site-header .brand{min-width:max-content;grid-column:1}
.site-header .brand img{max-width:none;width:auto;flex-shrink:0}
@media (max-width:1150px){
  .site-header .nav-cta{grid-column:2}
  .site-header .burger{grid-column:3}
}
@media (max-width:560px){
  .site-header .wrap{gap:6px}
  .site-header .nav-cta .btn--primary{display:none}
  .site-header .nav-cta .btn--ghost{
    display:inline-flex;
    background:var(--blue);border-color:var(--blue);color:#fff;
    padding:8px 14px;font-size:12px;font-weight:700;
  }
}
@media (max-width:360px){
  .site-header .brand img{height:22px}
  .site-header .nav-cta .btn--ghost{padding:7px 10px;font-size:11.5px}
}

/* Get in touch: tighter spacing around the 3 contact cards (Aniket, 12 Oct) */
.contact-cards{padding:clamp(36px,4.5vw,56px) 0}
.contact-form{padding-top:clamp(48px,6vw,72px)}

/* ===== Hero types (Aniket, 12 Oct): Home = dark navy + quick questions; Locations = brand blue; Service pages = light.
   No photos inside heroes. Shorter heroes so the buttons are always visible on a laptop screen. ===== */
.page-hero{padding:118px 0 56px}
.page-hero h1{font-size:clamp(2.3rem,5.2vw,4.2rem)}
.page-hero .hero-actions{margin-top:26px}

/* Locations: brand blue */
.page-hero--loc{background:linear-gradient(135deg,#0070C0 0%,#005494 62%,#003B68 100%)}
.page-hero--loc::before{background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 70%)}
.page-hero--loc .eyebrow{color:#fff}
.page-hero--loc .crumb,.page-hero--loc .crumb a{color:rgba(255,255,255,.82)}
.page-hero--loc h1 span{color:#BFE3FF !important}
.page-hero--loc p{color:rgba(255,255,255,.88)}
.page-hero--loc .btn--primary{background:#fff;color:var(--blue-dark);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.page-hero--loc .btn--primary:hover{background:var(--ink);color:#fff}
.loc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.loc-chips span{font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff}

/* Service / booking pages: light */
.page-hero--light{background:linear-gradient(180deg,#E6F1FB 0%,#F1F7FD 100%);color:var(--ink);border-bottom:1px solid rgba(0,112,192,.12)}
.page-hero--light::before{background:radial-gradient(circle,rgba(0,112,192,.14) 0%,rgba(0,112,192,0) 70%)}
.page-hero--light h1{color:var(--ink)}
.page-hero--light h1 span{color:var(--blue) !important}
.page-hero--light p{color:var(--muted)}
.page-hero--light .crumb{color:var(--muted)}
.page-hero--light .crumb a{color:var(--blue)}
.page-hero--light .btn--ghost{color:var(--ink)}
.page-hero--light .btn--ghost:hover{background:var(--ink);color:#fff}

/* Location pages: the address/contact strip right after the hero sits tight */
.loc-contact{padding:clamp(32px,4vw,48px) 0}
.loc-contact + .section{padding-top:clamp(48px,6vw,80px)}

/* 12-photo gallery: even 3-column grid */
.gallery--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;columns:auto}
.gallery--grid figure,.gallery--grid figure:nth-child(n){margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;grid-column:auto}
.gallery--grid img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.gallery--grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* Location highlights list (metro, landmarks) */
.loc-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.loc-points li{position:relative;padding-left:30px;color:var(--muted);line-height:1.5}
.loc-points li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
.loc-points b{display:block;color:var(--ink)}
.img-credit{font-size:.72rem;color:var(--muted);margin-top:8px}
.img-credit a{color:inherit}

/* gallery tile that fills an empty slot at the end of the last row */
.gallery figure.span-2{grid-column:span 2;aspect-ratio:8/3}

/* ===== Home hero: copy on the left, quick-question card on the right (Aniket, 12 Oct) ===== */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:center}
.hero-copy{display:flex;flex-direction:column}
.hero-copy > p{order:3;margin-top:10px;max-width:58ch;font-size:clamp(.96rem,1.4vw,1.08rem)}
.qq{background:#fff;color:var(--ink);border-radius:var(--radius-lg);padding:26px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.qq-top{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.qq-k{color:var(--blue)}
.qq-n{color:var(--muted)}
.qq-bar{height:4px;background:#e8ecf2;border-radius:100px;margin:12px 0 18px;overflow:hidden}
.qq-bar i{display:block;height:100%;width:50%;background:var(--blue);border-radius:100px;transition:width .4s var(--ease)}
.qq-step{display:none}
.qq-step.is-on{display:block;animation:qqIn .35s var(--ease)}
@keyframes qqIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qq h3{font-size:1.25rem;margin:0 0 14px;color:var(--ink)}
.qq-opts{display:grid;gap:8px}
.qq-opts button{font:inherit;font-weight:600;font-size:.92rem;text-align:left;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,transform .25s var(--ease)}
.qq-opts button:hover,.qq-opts button:focus-visible{border-color:var(--blue);background:rgba(0,112,192,.06);transform:translateX(3px);outline:none}
.qq-back{margin-top:12px;background:none;border:0;padding:0;font:inherit;font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer}
.qq-back:hover{color:var(--blue)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .qq{padding:22px 18px 18px}
}
.page-hero--loc .eyebrow::before{background:#fff}

/* Phones: keep hero buttons and the quick-question card on the first screen (Aniket, 12 Oct) */
@media (max-width:760px){
  .page-hero{padding:92px 0 36px}
  .page-hero h1{font-size:clamp(1.85rem,8vw,2.3rem)}
  .page-hero p,.hero-copy > p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0}
  .loc-chips{gap:6px;margin-top:14px}
  .loc-chips span{font-size:.74rem;padding:5px 10px}
  .page-hero .hero-actions,.hero-copy .hero-actions{margin-top:18px;gap:10px}
  .page-hero .btn--lg,.hero-copy .btn--lg{padding:13px 22px;font-size:.92rem}
  .hero-tags{display:none}
  .hero{padding-bottom:40px}
}