/*
Theme Name: Tara Founder's Office
Theme URI: https://example.com
Author: Kapil
Description: Custom theme for Tara Founder's Office with ACF integration
Version: 1.0
License: GPLv2 or later
Text Domain: tara-founders-office
*/
:root{
    --plum-950:#1a1428;
    --plum-900:#221a34;
    --plum-800:#2b2140;
    --gold:#c8a05f;
    --gold-light:#e3c789;
    --cream:#faf8f9;
    --paper:#f6f3f6;
    --ink:#221c30;
    --ink-soft:#6c6478;
    --ink-faint:#9992a3;
    --blush:#f3e0e6;
    --blush-deep:#eed3dd;
    --sage:#e0e9e2;
    --lavender:#e9e2f4;
    --sand:#f1ead9;
    --line:rgba(34,28,48,0.09);
    --line-dark:rgba(255,255,255,0.12);
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    font-family:'Inter', sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    overflow-x:hidden;
  }

  ::selection{background:var(--gold-light); color:var(--plum-950);}

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.08;
  }

  .eyebrow{
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--gold);
  }

  .em{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
  }

  a{color:inherit; text-decoration:none;}

  .wrap{
    max-width:1160px;
    margin:0 auto;
    padding:0 40px;
  }
  .mobile-wrap{
    max-width:1160px;
    margin:0 auto;
    padding:0 40px;
  }

  section{
    padding:120px 0;
    position:relative;
  }

  /* ---------- Sparkle signature ---------- */
  .spark{
    width:22px; height:22px;
    display:inline-block;
    position:relative;
  }
  .spark svg{
    width:100%; height:100%;
    animation:spin 14s linear infinite;
  }
  @keyframes spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  .spark-glow{
    filter:drop-shadow(0 0 6px rgba(200,160,95,0.55));
  }

  /* ---------- Nav ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:22px 0;
    transition:background .4s ease, padding .4s ease, border-color .4s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(26,20,40,0.82);
    backdrop-filter:blur(14px);
    padding:14px 0;
    border-bottom:1px solid var(--line-dark);
  }
  nav.wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  nav.wrap-mobile{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:1.02rem;
    color:#fff;
  }
  .brand span{color:var(--gold);}
  .navlinks{
    display:flex;
    gap:34px;
    font-size:0.86rem;
    color:rgba(255,255,255,0.72);
    list-style: none;
  }
  .navlinks a{
    position:relative;
    transition:color .25s ease;
  }
  .mobile-navlinks a
  {
    position:relative;
    transition:color .25s ease;
  }
  .mobile-navlinks a
  {
  display:flex;
    gap:34px;
    font-size:0.86rem;
    color:rgba(255,255,255,0.72);
    list-style: none;
  }
  .mobile-navlinks a:hover{color:#fff;}
  .mobile-navlinks a::after{
    content:'';
    position:absolute;
    left:0; bottom:-6px;
    width:0%; height:1px;
    background:var(--gold);
    transition:width .3s ease;
  }
  .mobile-navlinks a:hover::after{width:100%;}
  .nav-cta{
    border:1px solid var(--gold);
    color:var(--gold-light) !important;
    padding:9px 18px;
    border-radius:100px;
    font-size:0.8rem !important;
    transition:background .3s ease, color .3s ease;
  }
  .nav-cta::after{display:none;}
  .nav-cta:hover{background:var(--gold); color:var(--plum-950) !important;}
  .navlinks a:hover{color:#fff;}
  .navlinks a::after{
    content:'';
    position:absolute;
    left:0; bottom:-6px;
    width:0%; height:1px;
    background:var(--gold);
    transition:width .3s ease;
  }
  .navlinks a:hover::after{width:100%;}
  .nav-cta{
    border:1px solid var(--gold);
    color:var(--gold-light) !important;
    padding:9px 18px;
    border-radius:100px;
    font-size:0.8rem !important;
    transition:background .3s ease, color .3s ease;
  }
  .nav-cta::after{display:none;}
  .nav-cta:hover{background:var(--gold); color:var(--plum-950) !important;}

  /* ---------- Hero ---------- */
  .hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
      radial-gradient(ellipse 70% 55% at 50% 18%, rgba(200,160,95,0.16), transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 85%, rgba(120,80,160,0.14), transparent 60%),
      var(--plum-950);
    color:#fff;
    position:relative;
    overflow:hidden;
    padding-top:80px;
  }
  .hero::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:34px 34px;
    opacity:0.35;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
  }
  .hero-inner{
    position:relative;
    z-index:2;
    max-width:780px;
    padding:0 30px;
  }
  .hero .spark{margin-bottom:26px;}
  .hero .eyebrow{
    display:block;
    margin-bottom:22px;
    opacity:0;
    animation:riseIn .9s ease forwards .15s;
  }
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    color:#fdfbf9;
    opacity:0;
    animation:riseIn 1s ease forwards .3s;
  }
  .hero .sub{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:clamp(1.1rem, 2vw, 1.5rem);
    color:var(--gold-light);
    margin:26px 0 20px;
    opacity:0;
    animation:riseIn 1s ease forwards .5s;
  }
  .hero p.desc{
    color:rgba(255,255,255,0.66);
    font-size:1.02rem;
    max-width:560px;
    margin:0 auto;
    opacity:0;
    animation:riseIn 1s ease forwards .68s;
  }
  .hero-ctas{
    margin-top:44px;
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
    opacity:0;
    animation:riseIn 1s ease forwards .85s;
  }
  @keyframes riseIn{
    from{opacity:0; transform:translateY(18px);}
    to{opacity:1; transform:translateY(0);}
  }

  .btn{
    display:inline-block;
    padding:14px 30px;
    border-radius:100px;
    font-size:0.92rem;
    font-weight:600;
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
  }
  .btn-gold{
    background:var(--gold);
    color:var(--plum-950);
  }
  .btn-gold:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px -10px rgba(200,160,95,0.55);
  }
  .btn-ghost{
    border:1px solid rgba(255,255,255,0.28);
    color:#fff;
  }
  .btn-ghost:hover{
    border-color:#fff;
    transform:translateY(-2px);
  }

  .hero-foot{
    position:absolute;
    left:0; right:0;
    bottom:44px;
    text-align:center;
    font-size:0.74rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.32);
    opacity:0;
    animation:riseIn 1s ease forwards 1s;
    z-index:2;
  }

  /* ---------- Section heads ---------- */
  .head{
    /*max-width:760px;*/
    margin-bottom:56px;
  }
  .head .eyebrow{margin-bottom:16px; display:block;}
  .head h2{
    font-size:clamp(1.8rem, 3.4vw, 2.6rem);
    color:var(--ink);
  }
  .head .lede{
    margin-top:18px;
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    color:var(--ink-soft);
    font-size:1.08rem;
  }
  .head.on-dark h2{color:#fdfbf9;}
  .head.on-dark .lede{color:rgba(255,255,255,0.62);}

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
  }
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- Card grid ---------- */
  .grid{
    display:grid;
    gap:22px;
  }
  .grid-4{grid-template-columns:repeat(4, 1fr);}
  .grid-3{grid-template-columns:repeat(3, 1fr);}
  .grid-2{grid-template-columns:repeat(2, 1fr);}

  .card{
    background:var(--sand);
    border-radius:20px;
    padding:32px 28px;
    transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
    position:relative;
  }
  .card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 40px -22px rgba(34,28,48,0.28);
  }
  .card .num{
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(34,28,48,0.06);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:0.9rem;
    color:var(--ink-soft);
    margin-bottom:22px;
  }
  .card h3{
    font-size:1.12rem;
    margin-bottom:10px;
    color:var(--ink);
  }
  .card p{
    font-size:0.92rem;
    color:var(--ink-soft);
  }
  .c-blush{background:var(--blush);}
  .c-sage{background:var(--sage);}
  .c-lavender{background:var(--lavender);}
  .c-sand{background:var(--sand);}
  .c-blushdeep{background:var(--blush-deep);}

  .card.on-dark{
    background:var(--plum-800);
    border:1px solid var(--line-dark);
  }
  .card.on-dark h3{color:var(--gold-light);}
  .card.on-dark p{color:rgba(255,255,255,0.62);}
  .card.on-dark .num{background:rgba(255,255,255,0.06); color:var(--gold-light);}

  /* ---------- Section: truth ---------- */
  .truth{background:var(--paper);}

  /* ---------- Section: carrying (list) ---------- */
  .carry-list{
    border-top:1px solid var(--line);
  }
  .carry-item{
    display:grid;
    grid-template-columns:56px 1fr;
    gap:24px;
    align-items:start;
    padding:28px 0;
    border-bottom:1px solid var(--line);
  }
  .carry-item .dot{
    width:40px; height:40px;
    border-radius:50%;
    background:var(--sand);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif;
    font-size:0.85rem;
    color:var(--ink-soft);
  }
  .carry-item h3{font-size:1.05rem; margin-bottom:6px;}
  .carry-item p{color:var(--ink-soft); font-size:0.92rem; max-width:640px;}
  .carry-close{
    margin-top:36px;
    font-family:'Fraunces', serif;
    font-style:italic;
    color:var(--gold);
    font-size:1.05rem;
  }

  /* ---------- Section: intro (dark) ---------- */
  .intro{
    background:var(--plum-950);
    color:#fff;
  }
  .intro .head h2{
    color:var(--gold-light);
    font-size:clamp(2rem, 4vw, 3rem);
  }
  .intro .head .eyebrow{color:var(--gold);}
  .intro .head .body-copy{
    margin-top:20px;
    color:rgba(255,255,255,0.6);
    font-size:0.98rem;
    /*max-width:760px;*/
  }
  .intro .lede2{
    font-family:'Fraunces', serif;
    color:rgba(255,255,255,0.86);
    font-size:1.2rem;
    max-width:700px;
    margin-top:14px;
    line-height:1.5;
  }

  /* ---------- Section: six desks ---------- */
  .desks{background:var(--cream);}

  /* ---------- Section: how it works ---------- */
  .how{background:var(--paper);}
  .how .card{padding-bottom:40px;}
  .how .step-label{
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
    margin-bottom:14px;
    display:block;
  }
  .how .card h3{font-size:1.3rem; margin-bottom:14px;}
  .how-note{
    margin-top:40px;
    font-family:'Fraunces', serif;
    font-style:italic;
    color:var(--ink-soft);
    font-size:1.02rem;
  }

  /* ---------- Section: experience ---------- */
  .experience{background:var(--cream);}

  /* ---------- Section: is this you ---------- */
  .fit{background:var(--paper);}
  .fit-col{
    border-radius:22px;
    padding:38px 34px;
  }
  .fit-col.yes{background:var(--sage);}
  .fit-col.no{background:var(--blush);}
  .fit-col h4{
    font-size:0.72rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:22px;
    font-weight:700;
  }
  .fit-col ul{list-style:none;}
  .fit-col li{
    padding:12px 0 12px 26px;
    position:relative;
    font-size:0.96rem;
    border-bottom:1px solid rgba(34,28,48,0.08);
  }
  .fit-col li:last-child{border-bottom:none;}
  .fit-col li::before{
    content:'';
    position:absolute;
    left:0; top:21px;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--gold);
  }

  /* ---------- Section: founder ---------- */
  .founder{
    background:var(--plum-950);
    color:#fff;
  }
  .founder-grid{
    display:grid;
    grid-template-columns:1.3fr 0.7fr;
    gap:70px;
    align-items:center;
  }
  .founder h2{
    font-size:clamp(1.9rem, 3.6vw, 2.7rem);
    color:#fdfbf9;
    margin-bottom:22px;
  }
  .founder .name{
    font-family:'Fraunces', serif;
    font-weight:700;
    color:var(--gold-light);
    font-size:1.3rem;
    margin-bottom:8px;
  }
  .founder .creds{
    font-size:0.82rem;
    color:rgba(255,255,255,0.5);
    margin-bottom:26px;
    line-height:1.8;
  }
  .founder p.bio{
    color:rgba(255,255,255,0.72);
    font-size:0.98rem;
    margin-bottom:18px;
    max-width:600px;
  }
  .founder .quote{
    font-family:'Fraunces', serif;
    font-style:italic;
    color:var(--gold);
    font-size:1.2rem;
    margin-top:26px;
  }
  .founder-photo{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:3/4;
    background:#161020;
  }
  .founder-photo img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    filter:saturate(1.02);
  }
  .founder-photo::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:20px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);
  }

  /* ---------- Final CTA ---------- */
  .cta-final{
    background:var(--plum-950);
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
    padding:150px 0;
  }
  .cta-final::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 60% 55% at 50% 30%, rgba(200,160,95,0.14), transparent 65%);
  }
  .cta-final .inner{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:0 30px;}
  .cta-final .spark{margin-bottom:30px;}
  .cta-final h2{
    font-size:clamp(2rem, 4.4vw, 3.1rem);
    color:#fdfbf9;
  }
  .cta-final p.copy{
    color:rgba(255,255,255,0.62);
    max-width:560px;
    margin:26px auto 8px;
    font-size:0.98rem;
  }
  .cta-final .continued{
    font-family:'Fraunces', serif;
    font-style:italic;
    color:rgba(255,255,255,0.4);
    font-size:0.95rem;
    margin-top:6px;
  }
  .cta-box{
    display:inline-block;
    margin-top:44px;
    border:1px solid rgba(200,160,95,0.5);
    border-radius:18px;
    padding:30px 54px;
    transition:transform .35s ease, border-color .35s ease, background .35s ease;
    cursor:pointer;
  }
  .cta-box:hover{
    transform:translateY(-4px);
    border-color:var(--gold);
    background:rgba(200,160,95,0.06);
  }
  .cta-box h3{
    font-size:1.25rem;
    color:var(--gold-light);
    margin-bottom:8px;
  }
  .cta-box p{
    color:rgba(255,255,255,0.55);
    font-size:0.9rem;
  }
  .cta-final .sign{
    margin-top:56px;
    font-size:0.82rem;
    color:rgba(255,255,255,0.42);
  }
  .cta-final .tagline{
    margin-top:8px;
    font-family:'Fraunces', serif;
    font-style:italic;
    color:var(--gold);
    font-size:1.05rem;
  }

  footer{
    background:var(--plum-950);
    border-top:1px solid var(--line-dark);
    padding:30px 0;
    text-align:center;
    color:rgba(255,255,255,0.35);
    font-size:0.78rem;
    letter-spacing:0.04em;
  }
  footer span{color:var(--gold);}

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .grid-4{grid-template-columns:repeat(2, 1fr);}
    .grid-3{grid-template-columns:repeat(1, 1fr);}
    .founder-grid{grid-template-columns:1fr; gap:40px;}
    .founder-photo{max-width:340px; margin:0 auto;}
    .navlinks,.nav-cta {display:none;}
     /*nav.wrap {display:none;}*/
     header.scrolled {backdrop-filter: none;}
  }
  @media (max-width: 640px){
    .wrap{padding:0 22px;}
    section{padding:30px 0;}
    .grid-4, .grid-2{grid-template-columns:1fr;}
    .fit-col{padding:28px 22px;}
    .cta-box{padding:26px 30px;}
    .head {margin-bottom: 30px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }
  
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger span {
  width: 24px;
  height: 2px;
  background: #fff;
  display: block;
}

.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: 80%;
  height: 100%;
  background: var(--plum-950);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 20px;
  z-index: 999;
}
.mobile-menu.open {
  transform: translateX(0);
}
.mobile-menu .close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  margin-bottom: 20px;
}
.mobile-navlinks {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 980px) {
  .navlinks { display: none; }
  .hamburger { display: flex; }
}