/* vikrantgoel.com + hirabakhsh.com. Source: personal/site.css, copied to assets/site.css by build.py.
   The look follows the old Wix sites (flat neutral gray, thin rules, edge-to-edge header and footer),
   redrawn in Plus Jakarta Sans with the yellow mark; no round buttons (Vikrant, 2026-09-29). */
/* Fonts as on the Wix sites: Work Sans semibold for headings, the brand (italic) and labels; the
   body text there was Avenir LT Light, a Wix-licensed font, so Nunito Sans stands in for it. */
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/WorkSans-500-943a4b2d8b.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/WorkSans-600-c536b548fd.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:italic;font-weight:600;font-display:swap;src:url(/assets/fonts/WorkSans-600i-d271d6eef0.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/NunitoSans-300-230d460e8c.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/NunitoSans-400-d9976dd1dc.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/NunitoSans-600-e03e312b8b.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/NunitoSans-700-cb84238e7b.woff2) format('woff2')}

:root{--ground:#F3F3F3;--band:#E7E7E7;--ink:#141414;--body:#444444;--muted:#6B6B6B;--line:#D8D8D8;--field:#888888;--yellow:#F0A500;--gold:#B8860B;--green:#3A6B4F;--gutter:clamp(16px,2.8vw,40px);--head:'Work Sans',system-ui,sans-serif;--text:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.5}
a{color:var(--ink)}a:hover{color:var(--gold)}
p{margin:0;color:var(--body)}
h1,h2,h3{margin:0;font-family:var(--head);font-weight:600;letter-spacing:0;line-height:1.15}
img{display:block;max-width:100%}
.wrap{width:min(1008px,100% - 2*var(--gutter));margin-inline:auto}
/* header and footer run edge to edge like the old site; content stays in .wrap */
.wide{width:100%;padding-inline:var(--gutter)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* header */
.top .wide{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
/* the old brand: Work Sans semibold italic 22px, "entrepreneur" light 16px */
.brand b{font-family:var(--head);font-weight:600;font-style:italic;font-size:22px}
.brand small{font-size:16px;font-weight:300;color:var(--body)}
.brand .who{display:flex;align-items:baseline;gap:12px}
.menu{display:none}
.mark{width:24px;height:24px;background:var(--yellow);border-radius:50%;flex:none}
.mark.diamond{width:20px;height:20px;border-radius:2px;transform:rotate(45deg);margin-inline:2px}
.nav{display:flex;align-items:center;gap:12px 0;flex-wrap:wrap;font-size:16px;font-weight:300;margin:0;padding:0;list-style:none}
.nav li{padding:0 28px;line-height:24px;border-left:1px solid #9A9A9A}
.nav li:first-child{border-left:0}
.nav li:last-child{padding-right:0}
.nav a{text-decoration:none;color:var(--body)}
.nav a:hover{color:var(--gold)}
.nav a[aria-current=page]{color:var(--gold)}

/* footer */
/* the rule is inset by the page gutter, as on the old site, and the text sits a little further in */
.foot{margin-top:auto;padding-inline:var(--gutter)}
.foot .wide{display:grid;grid-template-columns:1fr 1fr auto;gap:24px;align-items:start;border-top:1px solid var(--line);padding:32px clamp(10px,5.5vw,76px);font-size:16px}
.foot b{display:block;font-family:var(--head);font-weight:600;font-size:18px;margin-bottom:4px}
.foot a{text-decoration:none;color:var(--body)}
.foot .copy{color:var(--muted);font-size:13px}
.foot .lic{display:block;color:var(--muted);font-size:12px;margin-top:4px}

/* the footer is pinned to the bottom of the window on short pages; on the home page the hero is
   centred in the space between header and footer, as on the old site */
.page{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;display:flex;flex-direction:column}
.hero{flex:1;display:flex;align-items:center}

/* buttons: rectangular, lightly rounded */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:6px;font-family:var(--head);font-weight:600;font-size:18px;text-decoration:none;border:0;cursor:pointer;line-height:1}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.btn.yellow:hover{color:var(--ink);background:#F7B21A}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{color:#fff;background:#333}
.btn.orange{background:#FF4B33;color:var(--ink)}
.btn.orange:hover{color:var(--ink);background:#FF6650}
.btn.cyan{background:#8ED8DC;color:var(--ink)}
.btn.cyan:hover{color:var(--ink);background:#A6E2E5}
.btn:disabled{opacity:.6;cursor:default}

/* home */
.hero .wide{width:min(1000px,100% - 2*var(--gutter));margin-inline:auto;padding:20px 0 44px;display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:48px;align-items:center}
.portrait{width:100%;max-width:480px;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 50%;background:#E6E6E2}
/* as on Wix: the photo lines up with the top of the text column instead of its middle */
.hero .portrait{align-self:start}
.hello{font-family:var(--head);font-size:22px;font-weight:600}
.hero h1{font-size:clamp(64px,9vw,100px);line-height:1.05;letter-spacing:0;margin:4px 0 20px}
.tagline{font-size:17px;line-height:1.65;font-weight:600;color:var(--ink);max-width:370px;margin-bottom:24px}
.hero .intro{display:grid;gap:24px;max-width:370px}
.hero .intro p{font-size:17px;line-height:1.65}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:56px}
.hero .cta .btn{min-height:64px}
/* Home entrance, as on the Wix sites: photo and text float in (fade + rise 60px, 800ms), the
   three buttons follow 200ms apart. Home page only; off when the visitor asks for reduced motion. */
/* Every other page: the content fades in under a still header and footer, like the Wix page
   transition. */
@keyframes page-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .page:not(.home) main{animation:page-fade 700ms ease-out both}
}
@keyframes float-in{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero .portrait,.hero .wide>div{animation:float-in 800ms cubic-bezier(.445,.05,.55,.95) both}
  .hero .cta .btn{animation:float-in 800ms cubic-bezier(.445,.05,.55,.95) both}
  .hero .cta .btn:nth-child(2){animation-delay:200ms}
  .hero .cta .btn:nth-child(3){animation-delay:400ms}
}

/* about: a darker band across the page with the biography panel inset, as on the old site */
.band{background:var(--band);padding:48px var(--gutter)}
.bio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);background:var(--ground)}
.bio .text{padding:64px clamp(24px,9vw,150px) 64px clamp(24px,9vw,150px)}
.bio h1{font-size:56px;margin-bottom:24px}
.bio p{margin-bottom:20px}
.bio p:last-child{margin-bottom:0}
.bio img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.quote{font-style:italic;color:var(--body)}
.cite{font-style:italic;color:var(--body)}
.resume{width:min(928px,100% - 2*var(--gutter));margin-inline:auto}
.cols{display:grid;gap:44px;padding:44px 0 72px}
.cols h2{font-size:38px;margin-bottom:24px}
.tl{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:40px;margin-bottom:24px;line-height:1.75}
.tl b{display:block;font-weight:700}
.tl span{display:block;font-weight:600}
.tl div+div{color:#555}

/* ventures / projects: open gray sections separated by hairlines */
.h1{padding:56px 0 0}
.h1 h1{font-size:42px}
.h1 .lead{margin-top:16px;max-width:900px}
.vlist{padding:8px 0 64px}
.venture{padding:64px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:80px;align-items:center}
.venture+.venture{border-top:1px solid var(--line)}
.venture h2{font-size:26px;margin-bottom:16px}
.venture p{font-size:16px}
.venture p+p{margin-top:12px}
.venture .lic{display:block;font-size:16px;color:var(--muted);margin-top:24px}
.venture .more{display:inline-block;font-size:16px;font-weight:500;margin-top:24px}
.logo{justify-self:center;width:380px;max-width:100%;height:160px;object-fit:contain}
.logo.square{width:260px;height:260px;border-radius:24px}
.logolink{justify-self:center;display:block;line-height:0}
.logolink:hover .logo{opacity:.8}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:80px;padding:72px 0 96px;align-items:start}
.contact h1{font-size:42px;margin-bottom:8px}
.contact .lead{margin-bottom:28px}
.contact .who{display:grid;gap:22px}
.contact .who b{display:block;font-family:var(--head);font-weight:600;font-size:18px;margin-bottom:2px}
.contact .who a{color:var(--body);text-decoration:none}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:16px;color:var(--body)}
.form .full{grid-column:span 2}
.form input,.form textarea{height:46px;border:1px solid var(--field);border-radius:0;padding:0 12px;font-size:16px;font-family:inherit;color:var(--ink);background:transparent}
.form textarea{min-height:140px;padding:12px;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:2px}
.form .sent{grid-column:span 2;font-size:14px;color:var(--body);min-height:1.4em}
.cf-turnstile{min-height:65px}

/* RE projects (behind the gate) */
.tags{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.tag{font-size:13px;font-weight:600;padding:6px 12px;border:1px solid var(--field);border-radius:4px}
.projects{padding:8px 0 64px}
.project{padding:48px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.project+.project{border-top:1px solid var(--line)}
.project img{width:100%;height:300px;object-fit:cover}
.project h2{font-size:26px;display:inline}
.project .head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.project p{font-size:16px}
.project p+p{margin-top:12px}
.badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.06em;background:var(--ink);color:#fff}
.badge.AIRBNB{background:var(--yellow);color:var(--ink)}
.badge.RENTAL{background:var(--green)}
.badge.REBUILD{background:#5B4A8A}
.nums{display:flex;gap:36px;align-items:end;margin-top:20px;flex-wrap:wrap}
.nums small{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.nums b{font-size:20px;font-weight:700}
.nums a{margin-left:auto;font-size:14px;font-weight:500}
.project.nophoto{grid-template-columns:1fr}

/* gate */
.gate{max-width:440px;margin:96px auto;display:grid;gap:16px}
.gate h1{font-size:28px}
.gate p{font-size:15px}
.gate .err{color:#B3261E;font-weight:600}
.gate label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--body)}
.gate input{height:46px;border:1px solid var(--field);border-radius:0;padding:0 12px;font-size:15px;font-family:inherit;background:transparent}
.gate .btn{justify-self:start}

@media (max-width:900px){
  /* phones, modelled on the Wix mobile site: name with "entrepreneur" under it, menu button,
     24px side margins, centred photo and logos, one-column footer */
  :root{--gutter:24px}
  .wrap,.resume{width:calc(100% - 48px)}
  .top .wide{min-height:0;padding-block:20px;flex-wrap:nowrap;position:relative}
  .brand{align-items:flex-start;gap:12px}
  .mark{margin-top:4px}
  .brand .who{flex-direction:column;gap:0}
  .brand b{font-size:22px;line-height:1.2}
  .nav{display:none}
  .menu{display:block}
  .menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary span{display:block;width:26px;height:2px;background:var(--ink)}
  .menu[open] summary span:nth-child(2){opacity:0}
  .menu[open] summary span:first-child{transform:translateY(8px) rotate(45deg)}
  .menu[open] summary span:last-child{transform:translateY(-8px) rotate(-45deg)}
  .menu ul{position:absolute;left:0;right:0;top:100%;z-index:10;margin:0;padding:8px var(--gutter) 20px;list-style:none;background:var(--ground);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.06)}
  .menu li a{display:block;padding:14px 0;font-size:20px;text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}
  .menu li:first-child a{border-top:0}
  .menu li a[aria-current=page]{color:var(--gold)}
  .hero .wide{width:calc(100% - 48px);grid-template-columns:1fr;gap:28px;padding:16px 0 48px}
  .portrait{max-width:300px;justify-self:center}
  .hero h1{font-size:64px}
  .hero .cta{flex-direction:column;align-items:stretch;gap:12px;margin-top:32px}
  .hero .cta .btn{width:100%;min-height:52px}
  .band{padding:0}
  .bio{grid-template-columns:1fr}
  .bio .text{padding:32px 24px}
  .bio h1{font-size:40px}
  .bio img{height:auto;max-height:460px}
  .cols{gap:36px;padding:36px 0 48px}
  .cols h2{font-size:30px}
  .tl{grid-template-columns:1fr;gap:2px}
  .h1{padding-top:32px}
  .h1 h1,.contact h1{font-size:32px}
  .venture{grid-template-columns:1fr;padding:36px 0;gap:28px}
  .venture h2{font-size:22px}
  .logo{justify-self:center;width:260px;height:110px}
  .logo.square{width:200px;height:200px}
  .contact{grid-template-columns:1fr;gap:32px;padding:32px 0 56px}
  .form{grid-template-columns:1fr}
  .form .full,.form .sent{grid-column:auto}
  .form .btn{width:100%}
  .project{grid-template-columns:1fr;padding:28px 0;gap:20px}
  .project img{height:220px}
  .nums{gap:24px}
  .foot{padding-inline:var(--gutter)}
  .foot .wide{grid-template-columns:1fr;gap:20px;padding:28px 0 32px}
  .foot .copy{grid-column:auto}
  .gate{margin:48px auto}
}