/* =========================================================
   Abhishek Chaudhary — freelance web design portfolio
   Palette: warm paper + ink + a single hot accent
   ========================================================= */

:root{
  --paper:#fbf9f6;
  --paper-2:#ffffff;
  --paper-3:#f3efe8;
  --ink:#14161a;
  --ink-2:#565d67;
  --ink-3:#8a919b;
  --line:#e7e1d8;
  --accent:#f24a1d;
  --accent-dark:#d63c12;
  --dark:#101216;
  --dark-2:#191c22;
  --dark-line:#2a2f38;
  --radius:14px;
  --radius-lg:22px;
  --wrap:1180px;
  --shadow:0 1px 2px rgba(20,22,26,.05), 0 10px 30px rgba(20,22,26,.07);
  --shadow-lg:0 30px 70px rgba(20,22,26,.16);
  --display:'Space Grotesk', 'Inter', system-ui, sans-serif;
  --body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.12; letter-spacing:-.02em; margin:0}
p{margin:0 0 1rem}
ul{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px}
.wrap.narrow{max-width:820px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--display); font-weight:600; font-size:.95rem;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--accent); color:#fff}
.btn-accent:hover{background:var(--accent-dark)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); background:var(--paper-2)}
.btn-lg{padding:15px 30px; font-size:1.02rem}
.btn-block{width:100%}

/* ---------- header ---------- */
#header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:transparent; transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
#header.solid{background:rgba(251,249,246,.97); border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(20,22,26,.05)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:80px}

.logo{display:inline-flex; align-items:center; gap:12px; text-decoration:none}
.logo-mark{
  width:42px; height:42px; flex:none; border-radius:12px;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:.95rem; letter-spacing:.02em;
}
.logo-text{display:flex; flex-direction:column; font-family:var(--display); font-weight:600; font-size:1.02rem; line-height:1.2}
.logo-text em{font-style:normal; font-family:var(--body); font-weight:400; font-size:.72rem; color:var(--ink-3); letter-spacing:.01em}

.menu{display:flex; align-items:center; gap:30px}
.menu a{text-decoration:none; font-size:.95rem; font-weight:500; color:var(--ink-2); transition:color .2s}
.menu a:hover{color:var(--ink)}
.menu a.btn{color:#fff}

.burger{display:none; flex-direction:column; gap:5px; width:44px; height:44px; border:1px solid var(--line); background:var(--paper-2); border-radius:12px; cursor:pointer; align-items:center; justify-content:center; padding:0}
.burger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:150px 0 90px; position:relative; overflow:hidden}
.hero::before{
  content:''; position:absolute; top:-260px; right:-180px; width:720px; height:720px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(242,74,29,.13), rgba(242,74,29,0) 62%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; position:relative}
.pill{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  padding:7px 16px; font-size:.83rem; font-weight:500; color:var(--ink-2); margin:0 0 24px;
}
.pill i{width:8px; height:8px; border-radius:50%; background:#22b364; box-shadow:0 0 0 4px rgba(34,179,100,.16)}
.hero h1{font-size:clamp(2.4rem, 5.2vw, 3.85rem); margin:0 0 22px}
.hl{color:var(--accent); position:relative; white-space:nowrap}
.hl::after{content:''; position:absolute; left:0; right:0; bottom:.06em; height:.14em; background:rgba(242,74,29,.2); border-radius:4px}
.lead{font-size:1.13rem; color:var(--ink-2); max-width:56ch; margin:0 0 30px}
.lead em{font-style:italic; color:var(--ink)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px}
.ticks{display:flex; flex-wrap:wrap; gap:10px 26px}
.ticks li{font-size:.9rem; color:var(--ink-2); display:flex; align-items:center; gap:8px}
.ticks li::before{content:''; width:16px; height:16px; flex:none; border-radius:50%; background:rgba(242,74,29,.13);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.6 2.6 6.2-6.2' fill='none' stroke='%23f24a1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain}

.hero-art{position:relative}
.mock-lift{transform:rotate(-1.4deg)}
.float-card{
  position:absolute; left:-26px; bottom:-26px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 20px; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.float-card strong{font-family:var(--display); font-size:1.02rem}
.float-card span{font-size:.8rem; color:var(--ink-3)}

/* ---------- browser mockups ---------- */
.mock{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.mock-bar{display:flex; align-items:center; gap:7px; padding:11px 15px; background:#eeeae3; border-bottom:1px solid rgba(0,0,0,.06)}
.mock-bar i{width:9px; height:9px; border-radius:50%; background:#cfc9c0}
.mock-bar u{flex:1; height:15px; margin-left:9px; border-radius:8px; background:#fbf9f6; text-decoration:none}
.mock-body{background:var(--m-bg); color:var(--m-ink); padding:0 0 20px; font-family:var(--m-font, var(--body))}
.mock-nav{display:flex; align-items:center; gap:14px; padding:14px 20px; font-size:.72rem}
.mock-nav b{font-family:var(--m-display, var(--m-font, var(--display))); font-size:.9rem; letter-spacing:var(--m-track, 0); text-transform:var(--m-case, none)}
.mock-nav span{width:26px; height:5px; border-radius:3px; background:currentColor; opacity:.22}
.mock-nav span:first-of-type{margin-left:auto}
.mock-nav em{font-style:normal; font-size:.6rem; padding:5px 11px; border-radius:999px; background:var(--m-accent); color:var(--m-accent-ink,#fff); font-weight:600}
.mock-hero{padding:16px 20px 20px}
.mock-kicker{font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--m-accent); margin:0 0 8px; font-weight:600}
.mock-hero h4{font-family:var(--m-display, var(--m-font, var(--display))); font-size:1.35rem; line-height:1.15; margin:0 0 10px; letter-spacing:var(--m-track, -.01em); text-transform:var(--m-case, none)}
.mock-line{height:6px; border-radius:4px; background:currentColor; opacity:.16; margin:0 0 6px}
.mock-line.short{width:62%}
.mock-cta{display:flex; gap:8px; margin-top:14px}
.mock-cta i{width:74px; height:22px; border-radius:999px; background:var(--m-accent)}
.mock-cta u{width:58px; height:22px; border-radius:999px; border:1.5px solid currentColor; opacity:.3; text-decoration:none}
.mock-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:0 20px}
.mock-cards div{height:52px; border-radius:9px; background:currentColor; opacity:.07}
.mock-cards div:first-child{opacity:.13}

.mock--spa{--m-bg:#fdfaf5; --m-ink:#2c2119; --m-accent:#b5904f; --m-font:'Inter',sans-serif; --m-display:'Space Grotesk',serif}
.mock--dental{--m-bg:#ffffff; --m-ink:#0e2d43; --m-accent:#12a5b8; --m-font:'Inter',sans-serif}
.mock--gym{--m-bg:#131519; --m-ink:#f0f3ef; --m-accent:#c3f13c; --m-accent-ink:#12140f; --m-font:'Inter',sans-serif; --m-case:uppercase; --m-track:.01em}
.mock--gym .mock-bar{background:#25282e}
.mock--gym .mock-bar i{background:#3d424b}
.mock--gym .mock-bar u{background:#171a1f}

/* ---------- trust strip ---------- */
.strip{background:var(--ink); color:var(--paper); padding:44px 0}
.strip-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:34px}
.strip-grid div{display:flex; flex-direction:column; gap:6px}
.strip-grid b{font-family:var(--display); font-size:1rem}
.strip-grid span{font-size:.88rem; color:#a7aeb8; line-height:1.55}

/* ---------- sections ---------- */
.sec{padding:96px 0}
.sec-alt{background:var(--paper-3)}
.sec-head{max-width:660px; margin:0 0 52px}
.kicker{font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 14px}
.sec h2{font-size:clamp(1.85rem, 3.4vw, 2.6rem); margin:0 0 16px}
.sec-sub{color:var(--ink-2); font-size:1.05rem; margin:0}

/* ---------- work ---------- */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.work{display:flex; flex-direction:column}
.work-shot{
  display:block; position:relative; text-decoration:none; border-radius:var(--radius-lg);
  transition:transform .3s ease;
}
.work-shot .mock{box-shadow:var(--shadow); transition:box-shadow .3s ease}
.work-shot:hover{transform:translateY(-6px)}
.work-shot:hover .mock{box-shadow:var(--shadow-lg)}
.work-open{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:#fff; font-family:var(--display); font-weight:600; font-size:.82rem;
  padding:9px 18px; border-radius:999px; opacity:0; transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap;
}
.work-shot:hover .work-open{opacity:1; transform:translateX(-50%) translateY(0)}
.work-meta{padding-top:22px}
.work-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.work-title h3{font-size:1.22rem}
.tag{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line); padding:4px 10px; border-radius:999px}
.work-meta p{color:var(--ink-2); font-size:.95rem}
.work-links{display:flex; align-items:center; gap:14px; margin:0}
.work-links a{font-family:var(--display); font-weight:600; font-size:.93rem; color:var(--accent); text-decoration:none; border-bottom:1.5px solid rgba(242,74,29,.3); padding-bottom:1px}
.work-links a:hover{border-bottom-color:var(--accent)}
.demo-note{font-size:.74rem; color:var(--ink-3); border:1px dashed var(--line); padding:3px 9px; border-radius:999px}
.work-foot{margin:48px 0 0; color:var(--ink-2); font-size:.98rem; max-width:66ch}
.work-foot a{color:var(--accent); font-weight:600}

/* ---------- services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.svc{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 32px; position:relative}
.svc-num{font-family:var(--display); font-weight:700; font-size:.85rem; color:var(--accent); letter-spacing:.1em}
.svc h3{font-size:1.32rem; margin:12px 0 12px}
.svc p{color:var(--ink-2); font-size:.97rem}
.svc ul{border-top:1px solid var(--line); padding-top:16px; margin-top:20px; display:flex; flex-direction:column; gap:9px}
.svc ul li{font-size:.9rem; color:var(--ink-2); display:flex; gap:10px}
.svc ul li::before{content:''; width:6px; height:6px; margin-top:.55em; flex:none; border-radius:50%; background:var(--accent)}

/* ---------- dark sections ---------- */
.dark{background:var(--dark); color:#e9ecf1}
.dark h2{color:#fff}
.dark .sec-sub{color:#9aa3af}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:s}
.steps li{background:var(--dark-2); border:1px solid var(--dark-line); border-radius:var(--radius-lg); padding:30px 26px}
.step-n{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:var(--accent); color:#fff; font-family:var(--display); font-weight:700; font-size:1rem; margin-bottom:18px;
}
.steps h3{font-size:1.16rem; margin:0 0 10px; color:#fff}
.steps p{color:#98a1ad; font-size:.93rem; margin:0}
.process-cta{margin-top:46px}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
.about-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 30px; box-shadow:var(--shadow); position:sticky; top:110px}
.avatar{
  width:70px; height:70px; border-radius:20px; background:var(--ink); color:var(--paper);
  display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.4rem; margin-bottom:20px;
}
.about-card h3{font-size:1.4rem; margin-bottom:4px}
.role{color:var(--accent); font-size:.9rem; font-weight:500; margin:0 0 22px}
.about-facts{display:flex; flex-direction:column; gap:16px; border-top:1px solid var(--line); padding-top:22px}
.about-facts li{display:flex; flex-direction:column; gap:2px}
.about-facts b{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.about-facts span{font-size:.94rem; color:var(--ink-2)}
.about-copy h2{margin-bottom:20px}
.about-copy p{color:var(--ink-2)}
.about-points{display:flex; flex-direction:column; gap:18px; margin-top:30px}
.about-points div{border-left:2.5px solid var(--accent); padding-left:18px; display:flex; flex-direction:column; gap:3px}
.about-points b{font-family:var(--display); font-size:1rem}
.about-points span{font-size:.93rem; color:var(--ink-2)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--ink);
  padding:22px 44px 22px 0; position:relative; line-height:1.4;
}
.q button i{position:absolute; right:6px; top:50%; width:14px; height:14px; margin-top:-7px}
.q button i::before,.q button i::after{content:''; position:absolute; background:var(--accent); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.q button i::before{left:0; top:6px; width:14px; height:2px}
.q button i::after{left:6px; top:0; width:2px; height:14px}
.q.open button i::after{transform:scaleY(0); opacity:0}
.ans{max-height:0; overflow:hidden; transition:max-height .32s ease}
.ans p{color:var(--ink-2); font-size:.97rem; padding:0 40px 22px 0; margin:0}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start}
.contact-copy p{color:#9aa3af}
.contact-list{margin-top:34px; display:flex; flex-direction:column; gap:20px; border-top:1px solid var(--dark-line); padding-top:26px}
.contact-list li{display:flex; flex-direction:column; gap:3px}
.contact-list b{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#6f7885; font-weight:600}
.contact-list a{color:var(--accent); text-decoration:none; font-weight:500}
.contact-list a:hover{text-decoration:underline}
.contact-list span{color:#c2c9d3; font-size:.95rem}

.contact-form{background:var(--dark-2); border:1px solid var(--dark-line); border-radius:var(--radius-lg); padding:34px 32px}
.field{margin-bottom:18px; display:flex; flex-direction:column; gap:7px}
.field label{font-size:.82rem; font-weight:600; color:#c2c9d3; letter-spacing:.01em}
.field .opt{font-weight:400; color:#6f7885}
.field input,.field textarea{
  width:100%; background:#0f1116; border:1px solid var(--dark-line); border-radius:11px;
  padding:13px 15px; color:#eef1f5; font-family:var(--body); font-size:.97rem; resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#5c6572}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,74,29,.16)}
.field.err input,.field.err textarea{border-color:#e0523f}
.form-note{text-align:center; font-size:.82rem; color:#6f7885; margin:14px 0 0}
.form-success{text-align:center; padding:26px 6px}
.form-success .tick{
  width:58px; height:58px; margin:0 auto 18px; border-radius:50%;
  background:rgba(34,179,100,.14); color:#3ecf7f; display:grid; place-items:center; font-size:1.7rem;
}
.form-success h3{font-size:1.4rem; color:#fff; margin-bottom:10px}
.form-success p{color:#9aa3af; font-size:.96rem; margin:0}

/* ---------- footer ---------- */
.footer{background:var(--ink); color:#aeb5bf; padding:60px 0 34px}
.footer-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid #262a31}
.logo--footer .logo-mark{background:var(--paper); color:var(--ink)}
.logo--footer .logo-text{color:#fff}
.logo--footer .logo-text em{color:#7d8794}
.footer-blurb{margin:18px 0 0; font-size:.92rem; max-width:38ch; color:#8b939e}
.footer-nav{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:flex-start}
.footer-nav a{text-decoration:none; font-size:.93rem; color:#aeb5bf}
.footer-nav a:hover{color:#fff}
.footer-bottom{padding-top:24px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.footer-bottom p{margin:0; font-size:.82rem; color:#767e8a}
.footer-disclaimer{max-width:56ch; text-align:right}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.work-shot:hover{transform:none}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1040px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .strip-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  body{font-size:16px}
  .burger{display:flex}
  .menu{
    position:fixed; inset:0; z-index:55;
    background:var(--paper); flex-direction:column; justify-content:center; gap:26px;
    transform:translateX(100%); transition:transform .3s ease; overflow-y:auto; padding:80px 28px;
  }
  .menu.show{transform:translateX(0)}
  .menu a{font-size:1.35rem; font-weight:600; color:var(--ink)}
  .menu a.btn{font-size:1.05rem; padding:14px 34px; margin-top:8px}
  #header{background:rgba(251,249,246,.97); border-bottom-color:var(--line)}

  .hero{padding:120px 0 70px}
  .hero-grid{grid-template-columns:1fr; gap:52px}
  .hero-art{max-width:520px; margin:0 auto; width:100%}
  .mock-lift{transform:none}
  .float-card{left:auto; right:0; bottom:-20px}

  .about-grid{grid-template-columns:1fr; gap:36px}
  .about-card{position:static}
  .contact-grid{grid-template-columns:1fr; gap:40px}
  .sec{padding:74px 0}
  .footer-disclaimer{text-align:left}
}

@media (max-width:680px){
  .wrap{padding:0 20px}
  .work-grid{grid-template-columns:1fr; gap:44px}
  .svc-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .strip-grid{grid-template-columns:1fr; gap:24px}
  .hero-cta .btn{width:100%}
  .logo-text em{display:none}
  .svc{padding:28px 24px}
  .contact-form{padding:28px 22px}
  .work-open{opacity:1; transform:translateX(-50%)}
}