/* ===========================================================
   TheStartupsHub — shared design system
   =========================================================== */
:root{
  --ink:#0b1020;
  --ink-soft:#3a4358;
  --ink-faint:#6b7385;
  --paper:#f7f6f2;
  --paper-2:#eef0ea;
  --line:#dfe1d9;
  --line-soft:#e8eae3;
  --saffron:#ff7a18;
  --saffron-deep:#e85d04;
  --saffron-soft:#ff9a4d;
  --green:#0f8a5f;
  --green-deep:#0a6b49;
  --indigo:#2f3aa3;
  --indigo-deep:#1f2870;
  --gold:#c79200;
  --rose:#b03060;
  --white:#ffffff;
  --shadow:0 18px 50px rgba(11,16,32,.10);
  --shadow-sm:0 6px 18px rgba(11,16,32,.08);
  --shadow-lg:0 30px 70px rgba(11,16,32,.16);
  --r:18px;
  --r-sm:12px;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:'Sora',sans-serif;line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:'Sora',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--saffron-deep)}

/* ---------- LOGO ---------- */
.brand{display:flex;align-items:center;gap:11px;font-family:'Sora',sans-serif;font-weight:800;font-size:1.18rem;color:var(--ink)}
.brand svg{flex-shrink:0}
.brand .b-startups{color:var(--saffron-deep)}
.brand.on-dark{color:var(--white)}
.brand.on-dark .b-startups{color:var(--saffron-soft)}
.brand .logo-img{height:63px;width:auto;display:block}
.nav .brand .logo-img{height:60px}
footer .brand .logo-img{height:78px}
@media (max-width:560px){.brand .logo-img{height:54px}.nav .brand .logo-img{height:50px}}

/* ---------- BUTTONS ---------- */
.btn{font-family:'Sora',sans-serif;font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:12px;
  border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--white)}
.btn-saffron{background:linear-gradient(120deg,var(--saffron),var(--saffron-deep));color:#fff}
.btn-saffron:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,93,4,.32)}
.btn-lg{padding:15px 26px;font-size:1rem;border-radius:14px}
.btn-block{width:100%;justify-content:center}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(247,246,242,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:84px}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-cta{display:flex;gap:12px;align-items:center}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;font-size:1.5rem;color:var(--ink);
  /* was a 22x29 hit area, well under the 44px minimum. The glyph is
     unchanged; only the tappable box grew, and the negative margin keeps
     the bar from getting taller. */
  width:44px;height:44px;line-height:1;display:none;align-items:center;justify-content:center;
  margin:-7px -10px -7px 0}
/* Mobile-only sign-in route. The header's Log in button is hidden under
   640px, so this takes its place at the end of the hamburger menu. */
.nav-login-m{display:none}

/* ---------- FOOTER ---------- */
footer{background:var(--paper);border-top:1px solid var(--line);padding:54px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.foot-brand p{font-size:.92rem;color:var(--ink-soft);max-width:32ch;margin-top:14px}
.foot-col h4,.foot-col .foot-h{font-family:'Sora',sans-serif;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;font-weight:700}
.foot-col a{display:block;font-size:.9rem;color:var(--ink-soft);padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--saffron-deep)}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--ink-soft)}

/* ---------- SECTION SHELL ---------- */
section.block{padding:88px 0}
.head{max-width:680px;margin-bottom:48px}
.head h2{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:800;margin:14px 0 14px}
.head p{font-size:1.06rem;color:var(--ink-soft)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- PAGE HEADER (interior pages) ---------- */
.page-head{background:var(--ink);color:var(--paper);padding:72px 0 64px;position:relative;overflow:hidden}
.page-head::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% -10%,rgba(255,122,24,.22),transparent 50%)}
.page-head .wrap{position:relative;z-index:1}
.page-head .eyebrow{color:var(--saffron-soft)}
.page-head h1{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:800;margin:14px 0 16px;max-width:18ch;
  background:linear-gradient(100deg,var(--saffron-soft),var(--gold) 48%,#3fcf8e);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.page-head p{font-size:1.12rem;color:rgba(247,246,242,.74);max-width:54ch}
.crumb{font-size:.84rem;color:rgba(247,246,242,.6);margin-bottom:6px}
.crumb a:hover{color:#fff}

/* ---------- COLOR TOKENS ---------- */
.c-saffron{color:var(--saffron-deep)}.bg-saffron{background:rgba(255,122,24,.12)}.bar-saffron{background:var(--saffron)}
.c-green{color:var(--green-deep)}.bg-green{background:rgba(15,138,95,.12)}.bar-green{background:var(--green)}
.c-indigo{color:var(--indigo-deep)}.bg-indigo{background:rgba(47,58,163,.12)}.bar-indigo{background:var(--indigo)}
.c-gold{color:var(--gold)}.bg-gold{background:rgba(199,146,0,.14)}.bar-gold{background:var(--gold)}
.c-rose{color:var(--rose)}.bg-rose{background:rgba(176,48,96,.12)}.bar-rose{background:var(--rose)}

/* ---------- RESPONSIVE BASE ---------- */
@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .nav-links{position:absolute;top:84px;left:0;right:0;background:var(--paper);flex-direction:column;
    padding:18px 24px;gap:16px;border-bottom:1px solid var(--line);display:none;z-index:60}
  .nav-links.open{display:flex}
  .menu-toggle{display:flex}
}
@media (max-width:640px){
  .nav-links{position:absolute;top:84px;left:0;right:0;background:var(--paper);flex-direction:column;
    padding:18px 24px;gap:16px;border-bottom:1px solid var(--line);display:none}
  .nav-links.open{display:flex}
  .nav-cta .btn-ghost{display:none}
  .nav-login-m{display:block;margin-top:4px;padding-top:16px;border-top:1px solid var(--line);
    font-weight:600;color:var(--ink)}
  .menu-toggle{display:flex}
  section.block{padding:60px 0}
  .foot-grid{grid-template-columns:1fr;gap:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Content protection: disable text selection ---------- */
/* Body content is non-selectable; form fields remain selectable so users can type and edit. */
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
input, textarea, select, [contenteditable="true"]{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
img{
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:auto;
}

/* ---------- Accessibility: focus + skip link ---------- */
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;
  border-radius:0 0 10px 0;font-family:'Sora',sans-serif;font-weight:600;font-size:.9rem;text-decoration:none}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Human verification widget ---- */
.hv{margin:14px 0}
.hv-label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px;color:var(--ink)}
.hv-q{font-weight:700;color:var(--saffron-deep)}
.hv-input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:.94rem;background:var(--paper);color:var(--ink)}
.hv-input:focus{outline:none;border-color:var(--saffron);box-shadow:0 0 0 3px rgba(255,122,24,.12)}
.hv.hv-ok .hv-input{border-color:var(--green);box-shadow:0 0 0 3px rgba(15,138,95,.12)}
.hv.hv-bad .hv-input{border-color:var(--rose)}
.hv-help{display:block;margin-top:6px;color:var(--ink-faint);font-size:.78rem}

/* ---- Cookie / consent banner ---- */
#cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;background:var(--ink);color:#fff;border-radius:16px;box-shadow:0 20px 50px -16px rgba(0,0,0,.5);opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease;max-width:760px;margin:0 auto}
#cookie-banner.cb-show{opacity:1;transform:translateY(0)}
#cookie-banner .cb-inner{display:flex;align-items:center;gap:18px;padding:16px 20px;flex-wrap:wrap}
#cookie-banner .cb-text{font-size:.9rem;line-height:1.55;color:rgba(247,246,242,.86);margin:0;flex:1;min-width:240px}
#cookie-banner .cb-text a{color:var(--saffron-soft);font-weight:600;text-decoration:underline}
#cookie-banner .cb-actions{display:flex;gap:10px;flex-shrink:0}
#cookie-banner .cb-btn{font-family:inherit;font-weight:600;font-size:.88rem;padding:9px 18px;border-radius:10px;cursor:pointer;border:1.5px solid transparent;transition:all .15s}
#cookie-banner .cb-decline{background:transparent;border-color:rgba(247,246,242,.3);color:#fff}
#cookie-banner .cb-decline:hover{border-color:rgba(247,246,242,.6)}
#cookie-banner .cb-accept{background:linear-gradient(120deg,var(--saffron),var(--saffron-deep));color:#fff}
#cookie-banner .cb-accept:hover{transform:translateY(-1px)}
@media (max-width:560px){
  #cookie-banner{left:10px;right:10px;bottom:10px;border-radius:14px}
  #cookie-banner .cb-inner{gap:12px;padding:13px 15px}
  #cookie-banner .cb-text{font-size:.8rem;line-height:1.45;min-width:0}
  #cookie-banner .cb-actions{width:100%;gap:8px}
  #cookie-banner .cb-btn{flex:1;padding:11px 14px;font-size:.85rem}
}

/* ---------- Image kit (V33) ---------- */
.tsh-media{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  aspect-ratio:var(--ar,1.5);
  background:linear-gradient(135deg,color-mix(in srgb,var(--dom,#726a55) 80%,#0b1020),var(--dom,#726a55));
  isolation:isolate}
.tsh-media__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tsh-media__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,rgba(232,93,4,.10),rgba(47,58,163,.10) 60%,rgba(15,138,95,.08));
  mix-blend-mode:multiply}
.tsh-media--overlay .tsh-media__scrim{
  background:linear-gradient(180deg,rgba(11,16,32,.12) 0%,rgba(11,16,32,.64) 100%),
             linear-gradient(120deg,rgba(232,93,4,.16),rgba(47,58,163,.12));
  mix-blend-mode:normal}
.tsh-media__cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:22px 24px;color:#fff}
.tsh-media__cap :where(h1,h2,h3,h4,p,span){color:#fff}
a.tsh-media,.tsh-hoverzoom{cursor:pointer}
a.tsh-media:hover .tsh-media__img,.tsh-hoverzoom:hover .tsh-media__img{transform:scale(1.05)}
.tsh-media--band{border-radius:0}
.tsh-media--framed{box-shadow:var(--shadow);border:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.tsh-media__img{transition:none}}

/* split hero helper (photo beside text on hub/section pages) */
.tsh-hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
@media (max-width:860px){.tsh-hero-split{grid-template-columns:1fr;gap:26px}}

/* photo band (full-width strip with overlaid heading) */
.tsh-band{position:relative}
.tsh-band .tsh-media{--ar:3.4}
@media (max-width:760px){.tsh-band .tsh-media{--ar:1.7}}

/* image bands & feature grids (V33) */
.tsh-bandsec{margin-top:14px;margin-bottom:8px}
.tsh-media__cap .tsh-bandkicker{font-family:'Sora',sans-serif;font-weight:700;
  font-size:clamp(1rem,2.3vw,1.35rem);line-height:1.25;max-width:24ch;margin:0;
  text-shadow:0 2px 20px rgba(0,0,0,.4)}
.tsh-twoup{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px auto}
@media (max-width:640px){.tsh-twoup{grid-template-columns:1fr}}

/* ============ V34: hero-background photos (left->right gradient) ============ */
/* Dark page-head heroes: colourful text stays on the dark left, photo reveals on the right. */
.page-head.has-photo{position:relative;isolation:isolate}
.page-head.has-photo::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hero);background-size:cover;background-repeat:no-repeat;
  background-position:var(--pos,80%) center}
.page-head.has-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,#0b1020 0%,#0b1020 30%,rgba(11,16,32,.86) 46%,rgba(11,16,32,.48) 61%,rgba(11,16,32,.14) 77%,rgba(11,16,32,0) 93%),
    radial-gradient(circle at 92% -10%,rgba(255,122,24,.20),transparent 52%)}
.page-head.has-photo .wrap{position:relative;z-index:2}
@media (max-width:820px){
  .page-head.has-photo::before{background-position:72% center}
  .page-head.has-photo::after{
    background:linear-gradient(180deg,rgba(11,16,32,.74),rgba(11,16,32,.93)),
      radial-gradient(circle at 85% 0%,rgba(255,122,24,.16),transparent 55%)}
}

/* Custom dark heroes reuse the same treatment via .has-photo on their own container */
.ah-hero.has-photo,.lh-hero.has-photo{position:relative;isolation:isolate}
.ah-hero.has-photo::before,.lh-hero.has-photo::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hero);background-size:cover;background-repeat:no-repeat;background-position:var(--pos,80%) center}
.ah-hero.has-photo::after,.lh-hero.has-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,#0b1020 0%,#0b1020 28%,rgba(11,16,32,.86) 44%,rgba(11,16,32,.58) 62%,rgba(11,16,32,.24) 80%,rgba(11,16,32,.10) 100%),
    radial-gradient(circle at 90% -10%,rgba(255,122,24,.18),transparent 55%)}
.ah-hero.has-photo>*,.lh-hero.has-photo>*{position:relative;z-index:2}
@media (max-width:820px){
  .ah-hero.has-photo::after,.lh-hero.has-photo::after{background:linear-gradient(180deg,rgba(11,16,32,.74),rgba(11,16,32,.93))}
}

/* Light heroes (home, accounting): photo as a soft textured backdrop, paper wash keeps text crisp. */
.has-photo-light{position:relative;overflow:hidden;isolation:isolate}
.has-photo-light::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--hero) right center/cover no-repeat;opacity:.30}
.has-photo-light::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 22%,rgba(247,246,242,.70) 46%,rgba(247,246,242,.38) 70%,rgba(247,246,242,.20) 100%)}
.has-photo-light>.wrap,.has-photo-light>*{position:relative;z-index:1}
@media (max-width:820px){
  .has-photo-light::before{opacity:.10}
  .has-photo-light::after{background:linear-gradient(180deg,rgba(247,246,242,.86),rgba(247,246,242,.72))}
}

/* V35: photo behind the other dark, centered CTA blocks (map CTAs, submit, volunteer) */
.rp-mapcta,.fp-mapcta,.submit-cta,.sb-volcta{
  background:linear-gradient(120deg,rgba(11,16,32,.92) 0%,rgba(11,16,32,.86) 45%,rgba(11,16,32,.78) 100%),
    url('/assets/img/img-20-coworking-2-1600.webp') center/cover !important;
}