:root{
    --ink:#0B1E33;
    --ink-2:#132B47;
    --paper:#EEF1F4;
    --paper-2:#FFFFFF;
    --line:#5C86A8;
    --line-soft:rgba(126,200,227,0.35);
    --cyan:#7EC8E3;
    --amber:#E8A33D;
    --amber-deep:#C77F1F;
    --text-dark:#16283D;
    --text-mute:#4C6178;
    --text-on-ink:#DCE7F0;
    --text-on-ink-mute:#8FA7BE;
    --radius:2px;
    --serif:'YuraiSerif', Georgia, 'Times New Roman', serif;
    --grotesk:'YuraiGrotesk', 'Courier New', monospace;
    --sans:'YuraiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  }

  @font-face{
    font-family:'YuraiSerif';
    src: local('Georgia');
  }

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

  html{scroll-behavior:smooth;}

  body{
    font-family:var(--sans);
    background:var(--paper);
    color:var(--text-dark);
    line-height:1.5;
    overflow-x:hidden;
  }

  @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
  body, input, button { font-family:'Inter', var(--sans); }
  .display, h1, h2, h3, .logo-word { font-family:'Fraunces', var(--serif); }
  .mono, .eyebrow, .step-num, nav a, .btn, .tag { font-family:'Space Grotesk', var(--grotesk); }

  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img,svg{display:block; max-width:100%;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

  /* Blueprint grid backdrop, used on dark sections */
  .blueprint-bg{
    background-color:var(--ink);
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
    position:relative;
  }
  .blueprint-bg::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(126,200,227,0.10), transparent 70%);
    pointer-events:none;
  }

  /* ===== NAV ===== */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(11,30,51,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(126,200,227,0.18);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 32px; max-width:1180px; margin:0 auto;
  }
  .logo{display:flex; align-items:center; gap:10px;}
  .logo-mark{
    width:34px; height:34px; flex-shrink:0;
    display:block;
  }
  .logo-text{display:flex; flex-direction:column; line-height:1;}
  .logo-word{
    color:var(--text-on-ink); font-size:19px; font-weight:600; letter-spacing:0.02em;
  }
  .logo-sub{
    font-family:'Space Grotesk', var(--grotesk); font-size:10px; letter-spacing:0.28em;
    color:var(--cyan); margin-top:3px; font-weight:500;
  }
  .nav-links{display:flex; gap:36px; align-items:center;}
  .nav-links a{
    color:var(--text-on-ink-mute); font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
    transition:color .2s ease;
  }
  .nav-links a:hover{color:var(--cyan);}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 22px; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
    border:1px solid transparent; cursor:pointer; border-radius:var(--radius);
    font-weight:600; transition:all .2s ease;
  }
  .btn-primary{background:var(--amber); color:var(--ink);}
  .btn-primary:hover{background:var(--amber-deep);}
  .btn-ghost{border-color:rgba(126,200,227,0.4); color:var(--text-on-ink);}
  .btn-ghost:hover{border-color:var(--cyan); color:var(--cyan);}

  /* ===== HERO ===== */
  .hero{
    padding:100px 0 80px;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--cyan); margin-bottom:24px; font-weight:500;
  }
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--cyan);}
  .hero h1{
    font-size:56px; line-height:1.08; color:var(--text-on-ink);
    font-weight:500; letter-spacing:-0.01em; margin-bottom:24px;
  }
  .hero h1 em{font-style:italic; color:var(--cyan); font-weight:400;}
  .hero p.lede{
    font-size:17px; color:var(--text-on-ink-mute); max-width:460px; margin-bottom:36px; line-height:1.65;
  }
  .hero-actions{display:flex; gap:16px; margin-bottom:44px;}
  .hero-meta{
    display:flex; gap:36px; padding-top:28px; border-top:1px solid rgba(126,200,227,0.18);
  }
  .hero-meta div{display:flex; flex-direction:column; gap:4px;}
  .hero-meta .num{font-family:'Fraunces', var(--serif); font-size:26px; color:var(--text-on-ink); font-weight:500;}
  .hero-meta .lbl{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-ink-mute);}

  /* blueprint reveal graphic */
  .draft-panel{
    position:relative; aspect-ratio:1/1.05;
    border:1px solid rgba(126,200,227,0.3);
    background:rgba(255,255,255,0.02);
  }
  .draft-panel svg{width:100%; height:100%;}
  .corner{position:absolute; width:14px; height:14px;}
  .corner::before,.corner::after{content:""; position:absolute; background:var(--amber);}
  .corner::before{width:14px; height:1.5px; top:0; left:0;}
  .corner::after{width:1.5px; height:14px; top:0; left:0;}
  .c-tl{top:-1px; left:-1px;}
  .c-br{bottom:-1px; right:-1px; transform:rotate(180deg);}

  .scroll-draw{
    stroke-dasharray: 900;
    stroke-dashoffset: 900; /* JS sets this per scroll position; this is just the pre-JS fallback */
  }
  .scroll-fill{ opacity: 0; } /* JS sets this per scroll position */

  @media (prefers-reduced-motion: reduce){
    .scroll-draw{ stroke-dashoffset: 0; }
    .scroll-fill{ opacity: 1; }
  }

  /* ===== SECTION shared ===== */
  section{padding:96px 0;}
  section[id]{scroll-margin-top:90px;} /* keeps anchor-scrolled sections clear of the sticky nav */
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head .eyebrow{color:var(--amber-deep);}
  .section-head.on-dark .eyebrow{color:var(--cyan);}
  .section-head h2{font-size:36px; font-weight:500; letter-spacing:-0.01em; line-height:1.2;}
  .section-head.on-dark h2{color:var(--text-on-ink);}
  .section-head p{color:var(--text-mute); margin-top:16px; font-size:16px; line-height:1.6;}
  .section-head.on-dark p{color:var(--text-on-ink-mute);}

  /* ===== PROBLEM STRIP ===== */
  .problem{background:var(--paper-2); border-top:1px solid #DCE1E7; border-bottom:1px solid #DCE1E7;}
  .stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#DCE1E7;}
  .stat{background:var(--paper-2); padding:40px 36px;}
  .stat .num{font-family:'Fraunces', var(--serif); font-size:44px; font-weight:500; color:var(--ink);}
  .stat .cap{font-size:14px; color:var(--text-mute); margin-top:10px; line-height:1.5;}

  /* ===== SERVICES ===== */
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#DCE1E7; border:1px solid #DCE1E7;}
  .service-card{background:var(--paper-2); padding:40px 32px; position:relative;}
  .service-card .tag{
    display:inline-block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--amber-deep); border:1px solid var(--amber); padding:4px 10px; margin-bottom:20px;
  }
  .service-card.soon{opacity:0.6;}
  .service-card.soon .tag{color:var(--text-mute); border-color:#C7CDD4;}
  .service-card h3{font-size:21px; font-weight:500; margin-bottom:12px;}
  .service-card p{font-size:14.5px; color:var(--text-mute); line-height:1.65; margin-bottom:20px;}
  .service-card ul li{font-size:13.5px; color:var(--text-dark); padding:7px 0; border-top:1px dashed #DCE1E7; display:flex; gap:8px;}
  .service-card ul li:first-child{border-top:none;}
  .service-card ul li::before{content:"—"; color:var(--cyan); flex-shrink:0;}

  /* ===== WORK / PORTFOLIO ===== */
  .work-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  .work-card{
    border:1px solid #DCE1E7; background:var(--paper-2);
    display:flex; flex-direction:column; overflow:hidden;
    text-decoration:none; color:inherit;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .work-card:hover{
    border-color:var(--cyan-bright); box-shadow:0 8px 24px rgba(11,30,51,0.08);
    transform:translateY(-2px);
  }
  .work-thumb{
    aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
    background:var(--ink); color:var(--cyan-bright); overflow:hidden;
  }
  .work-thumb-icon{width:56px; height:56px;}
  .work-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .work-card-body{padding:22px 24px 26px;}
  .work-status{
    display:inline-block; font-family:'Space Grotesk', var(--grotesk);
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--amber-deep); border:1px solid var(--amber); padding:3px 9px; margin-bottom:14px;
  }
  .work-card h3{font-size:18px; font-weight:500; margin-bottom:8px; color:var(--text-dark);}
  .work-card p{font-size:13.5px; color:var(--text-mute); line-height:1.6; margin-bottom:14px;}
  .work-link{
    font-family:'Space Grotesk', var(--grotesk); font-size:12px; letter-spacing:0.04em;
    color:var(--cyan); font-weight:500;
  }

  @media (max-width:860px){
    .work-grid{grid-template-columns:1fr;}
  }

  /* ===== PROCESS ===== */
  .process{background:var(--ink);}
  .steps{display:flex; flex-direction:column;}
  .step{
    display:grid; grid-template-columns:100px 1fr; gap:32px;
    padding:32px 0; border-top:1px solid rgba(126,200,227,0.18);
  }
  .steps .step:last-child{border-bottom:1px solid rgba(126,200,227,0.18);}
  .step-num{font-size:15px; color:var(--cyan); padding-top:4px;}
  .step-body h3{color:var(--text-on-ink); font-size:20px; font-weight:500; margin-bottom:8px;}
  .step-body p{color:var(--text-on-ink-mute); font-size:14.5px; line-height:1.65; max-width:560px;}
  .step-body .dur{
    display:inline-block; margin-top:12px; font-family:'Space Grotesk', var(--grotesk);
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber);
    border:1px dashed rgba(232,163,61,0.5); padding:4px 10px;
  }

  /* ===== PRICING ===== */
  .pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .price-card{
    border:1px solid #DCE1E7; background:var(--paper-2); padding:36px 30px;
    display:flex; flex-direction:column;
  }
  .price-card.featured{border-color:var(--amber); position:relative; box-shadow:0 8px 30px rgba(11,30,51,0.08);}
  .price-card.featured::before{
    content:"MOST BOOKED"; position:absolute; top:-11px; left:30px;
    background:var(--amber); color:var(--ink); font-family:'Space Grotesk', var(--grotesk);
    font-size:10px; letter-spacing:0.1em; padding:4px 10px; font-weight:700;
  }
  .price-card .tier-name{font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute); margin-bottom:14px;}
  .price-card .price{font-family:'Fraunces', var(--serif); font-size:38px; font-weight:500; margin-bottom:4px;}
  .price-card .price span{font-size:14px; color:var(--text-mute); font-weight:400; font-family:'Inter',sans-serif;}
  .price-card .best-for{font-size:13px; color:var(--text-mute); margin-bottom:24px; line-height:1.5;}
  .price-card ul{margin-bottom:28px; flex-grow:1;}
  .price-card ul li{font-size:13.5px; padding:8px 0; border-top:1px dashed #E4E8EC; display:flex; gap:8px; align-items:flex-start;}
  .price-card ul li:first-child{border-top:none;}
  .price-card ul li::before{content:"✓"; color:var(--amber-deep); font-weight:700; flex-shrink:0;}
  .price-card .btn{width:100%; justify-content:center;}
  .price-card .btn-outline{border:1px solid var(--ink); color:var(--ink); background:none;}
  .price-card .btn-outline:hover{background:var(--ink); color:var(--text-on-ink);}

  .pricing-foot{
    margin-top:28px; font-size:13.5px; color:var(--text-mute); text-align:center;
  }

  /* ===== INCLUDED BAR ===== */
  .included{background:var(--paper-2); border-top:1px solid #DCE1E7; border-bottom:1px solid #DCE1E7;}
  .included-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; padding:32px 0;}
  .included-label{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-mute); font-weight:600;}
  .included-items{display:flex; gap:36px; flex-wrap:wrap;}
  .included-item{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500;}
  .included-item .dot{width:6px; height:6px; background:var(--amber); border-radius:50%; flex-shrink:0;}

  /* ===== CTA / FOOTER ===== */
  .cta{background:var(--ink); text-align:center; padding:110px 0;}
  .cta h2{color:var(--text-on-ink); font-size:42px; font-weight:500; max-width:600px; margin:0 auto 20px; line-height:1.2;}
  .cta p{color:var(--text-on-ink-mute); max-width:480px; margin:0 auto 40px; font-size:16px;}
  .cta .hero-actions{justify-content:center;}

  footer{background:var(--ink); border-top:1px solid rgba(126,200,227,0.18); padding:40px 0;}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .footer-brand{display:flex; align-items:center; gap:10px;}
  .footer-logo{ width:30px; height:30px; flex-shrink:0; display:block; }
  .footer-brand .logo-word{ font-size:16px; }
  footer p{color:var(--text-on-ink-mute); font-size:12.5px;}

  /* ===== MOBILE NAV ===== */
  .nav-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0;
  }
  .nav-toggle span{width:100%; height:2px; background:var(--text-on-ink); transition:transform .2s ease, opacity .2s ease;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav-mobile{
    display:none; flex-direction:column; gap:2px;
    background:var(--ink); border-top:1px solid rgba(126,200,227,0.18);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav-mobile.open{max-height:320px;}
  .nav-mobile a{
    padding:16px 32px; color:var(--text-on-ink); font-size:15px;
    border-bottom:1px solid rgba(126,200,227,0.1);
  }
  .nav-mobile .btn{margin:16px 32px; text-align:center; justify-content:center;}

  @media (max-width: 860px){
    .hero{grid-template-columns:1fr; padding-top:60px;}
    .hero h1{font-size:38px;}
    .draft-panel{max-width:340px; margin:0 auto;}
    .stat-row, .services-grid, .pricing-grid{grid-template-columns:1fr;}
    .step{grid-template-columns:1fr; gap:8px;}
    .nav-links, .nav-cta-desktop{display:none;}
    .nav-toggle{display:flex;}
    .nav-mobile{display:flex;}
    .cta h2{font-size:30px;}
    section{padding:64px 0;}
  }

/* ===== INTRO ANIMATION OVERLAY ===== */
html.intro-lock, html.intro-lock body{
  overflow:hidden; height:100%;
}

.intro-overlay{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease;
  opacity:1;
}
.intro-overlay.intro-hide{
  opacity:0; pointer-events:none;
}

.intro-stage{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  padding:40px 56px;
}
.intro-stage .corner{width:20px; height:20px;}
.intro-stage .corner::before{width:20px;}
.intro-stage .corner::after{height:20px;}
.intro-stage .c-tl{top:0; left:0;}
.intro-stage .c-br{bottom:0; right:0;}

.intro-mark{
  width:100px; height:100px;
}
.intro-mark rect:first-child{
  stroke-dasharray:460; stroke-dashoffset:460;
  animation:iDraw .9s cubic-bezier(.4,0,.2,1) forwards;
}
.intro-mark rect:last-child{
  opacity:0; transform-origin:60px 60px; transform:scale(.8);
  animation:iFadeScale .7s ease forwards;
  animation-delay:.35s;
}

.intro-word{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.intro-yurai{
  font-family:'Fraunces', serif; font-size:32px; font-weight:500;
  color:var(--text-on-ink); letter-spacing:0.01em;
  opacity:0; transform:translateY(10px);
  animation:iFadeUp .6s ease forwards; animation-delay:.9s;
}
.intro-studio{
  font-family:'Space Grotesk', monospace; font-size:12px; font-weight:500;
  color:var(--cyan); letter-spacing:0.32em;
  opacity:0; transform:translateY(10px);
  animation:iFadeUp .6s ease forwards; animation-delay:1.15s;
}

.intro-dim{
  width:min(70vw, 320px); height:20px;
  opacity:0; animation:iFade .3s ease forwards; animation-delay:1.6s;
}
.intro-dim line:first-child{
  stroke-dasharray:340; stroke-dashoffset:340;
  animation:iDraw .7s ease forwards; animation-delay:1.6s;
}
.intro-dim line:not(:first-child){
  opacity:0; animation:iFade .3s ease forwards; animation-delay:2.1s;
}

@keyframes iDraw{ to{ stroke-dashoffset:0; } }
@keyframes iFade{ to{ opacity:1; } }
@keyframes iFadeUp{ to{ opacity:1; transform:translateY(0); } }
@keyframes iFadeScale{ to{ opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion: reduce){
  .intro-mark rect, .intro-yurai, .intro-studio, .intro-dim, .intro-dim line{
    animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important; transform:none !important;
  }
}

.intro-skip{
  position:absolute; bottom:28px; right:28px; z-index:1000;
  background:rgba(11,30,51,0.35);
  border:1px solid rgba(255,255,255,0.4);
  color:#fff;
  font-family:'Space Grotesk', var(--grotesk);
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  padding:10px 20px; cursor:pointer; border-radius:2px;
  transition:border-color .2s ease, background .2s ease;
}
.intro-skip:hover{ border-color:#fff; background:rgba(11,30,51,0.55); }

@media (max-width:600px){
  .intro-skip{ bottom:20px; right:20px; padding:9px 16px; font-size:11px; }
  .intro-stage{ padding:32px 40px; gap:20px; }
  .intro-mark{ width:80px; height:80px; }
  .intro-yurai{ font-size:26px; }
}

/* ===== SCROLL REVEAL (sections/cards fade+slide up as they enter view) ===== */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
/* stagger siblings within each grid so they don't all snap in at once */
.stat-row .reveal:nth-child(2){transition-delay:.08s;}
.stat-row .reveal:nth-child(3){transition-delay:.16s;}
.services-grid .reveal:nth-child(2){transition-delay:.08s;}
.services-grid .reveal:nth-child(3){transition-delay:.16s;}
.steps .reveal:nth-child(2){transition-delay:.06s;}
.steps .reveal:nth-child(3){transition-delay:.12s;}
.steps .reveal:nth-child(4){transition-delay:.18s;}
.steps .reveal:nth-child(5){transition-delay:.24s;}
.pricing-grid .reveal:nth-child(2){transition-delay:.08s;}
.pricing-grid .reveal:nth-child(3){transition-delay:.16s;}
.work-grid .reveal:nth-child(2){transition-delay:.08s;}
.work-grid .reveal:nth-child(3){transition-delay:.14s;}
.work-grid .reveal:nth-child(4){transition-delay:.2s;}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}