*,*::before,*::after{box-sizing:border-box}
html,body{font-family:'DM Sans',sans-serif;scroll-behavior:smooth}
h1,h2,h3,h4,h5,h6{font-family:'PT Sans',sans-serif}
body{transition:background-color .3s,color .3s}
img{max-width:100%;height:auto;display:block}

/* noise overlay */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}

/* scrollbar */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#FF6B2B;border-radius:99px}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* nav underline */
.nl{position:relative}
.nl::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:currentColor;transition:width .22s cubic-bezier(.4,0,.2,1)}
.nl:hover::after,.nl.on::after{width:100%}
.nl.on{font-weight:500}

/* shimmer */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:rgba(255,255,255,.18);transform:skewX(-20deg);transition:left .4s cubic-bezier(.4,0,.2,1)}
.shimmer:hover::after{left:160%}

/* photo frames — images always auto-fit */
.pf{overflow:hidden;background:#d4d4d8}
.pf img{width:100%;height:100%;object-fit:cover}

/* card hover */
.card-h{transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .18s}
.card-h:hover{transform:translateY(-4px)}

/* skill tag */
.stag{transition:border-color .18s}

/* timeline connector */
.tl-item:not(:last-child)::before{content:'';position:absolute;left:19px;top:40px;bottom:-12px;width:2px;background:linear-gradient(to bottom,#FF6B2B,transparent)}

/* Reviews slider */
.rv-slider-outer{overflow:hidden;position:relative}
.rv-slider-track{display:flex;transition:transform .65s cubic-bezier(.25,.46,.45,.94);gap:1.25rem}
.rv-card{flex-shrink:0;text-align:justify;align-self:stretch;
  width:calc((100% - 2 * 1.25rem) / 3);min-height:280px}
@media(max-width:1023px){.rv-card{width:calc((100% - 1.25rem) / 2);min-height:260px}}
@media(max-width:639px){.rv-card{width:100%;min-height:auto}}
/* dots */
.rv-dot{width:.5rem;height:.5rem;border-radius:9999px;background:#e4e4e7;transition:all .25s;cursor:pointer}
.dark .rv-dot{background:#3f3f46}
.rv-dot.active{background:#FF6B2B;width:1.25rem}
/* prev/next buttons */
.rv-btn{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;
  border-radius:9999px;border:1.5px solid #e4e4e7;background:white;cursor:pointer;
  transition:border-color .18s,background .18s;flex-shrink:0}
.dark .rv-btn{border-color:#3f3f46;background:#18181b;color:white}
.rv-btn:hover{border-color:#FF6B2B;background:#fff7f4}
.dark .rv-btn:hover{background:#27272a}

/* justify body paragraphs everywhere */
section p:not(.no-justify){text-align:justify}
.rv-card p{text-align:justify}

[x-cloak]{display:none!important}

/* ═══ MOBILE OVERRIDES (< 768px) ═══ */
@media(max-width:767px){

  /* ── HERO mobile — fit entire section in one viewport ── */
  #hero{
    min-height:100svh !important;
    min-height:100vh !important;
    display:flex !important;
    align-items:flex-start !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  #hero .relative.z-10{padding-top:6.5rem !important;padding-bottom:1rem !important}
  /* Tighter internal spacing to fit everything in one screen */
  #hero h1{font-size:2.25rem !important;line-height:1.08 !important;margin-bottom:0.6rem !important;letter-spacing:-0.01em !important}
  #hero p.reveal.d2{font-size:0.875rem !important;line-height:1.55 !important;margin-bottom:1rem !important;text-align:left !important}
  #hero p.reveal.text-sm{font-size:0.65rem !important;margin-bottom:0.4rem !important;letter-spacing:0.12em !important}
  #hero .md\:justify-end .pf{height:220px !important;border-radius:1.25rem 1.25rem 0 0 !important}
  /* Stats row tighter */
  #hero .md\:hidden.flex.flex-wrap{gap:1rem !important;margin-top:0.875rem !important;padding-top:0.875rem !important}
  /* Stats row on mobile — handled by separate md:hidden div below the image */
  /* Show photo below stats on mobile — ref shows photo at bottom */
  #hero .md\:justify-end{display:flex !important;justify-content:center !important;margin-top:1.75rem !important;padding-bottom:0 !important}
  #hero .md\:justify-end .relative{width:100% !important;height:auto !important;max-width:100% !important}
  #hero .md\:justify-end .pf{width:100% !important;height:260px !important;border-radius:1.25rem 1.25rem 0 0 !important}
  /* Hero badges — always inside image, no position tweaks needed */
  .hero-badge-projects{font-size:0.72rem !important;padding:0.45rem 0.9rem !important}
  .hero-badge-location{font-size:0.65rem !important;padding:0.3rem 0.7rem !important}
  /* Gap between nav and hero content on mobile */
  #hero .relative.z-10{padding-top:6.5rem !important}
  /* Buttons — centered on mobile, hidden until after stats */
  #hero .reveal.d3{justify-content:center !important;gap:0.75rem !important}
  /* Mobile stats row — centered */
  #hero .md\:hidden.flex.flex-wrap{justify-content:center !important;text-align:center !important}

  /* ── Section spacing: tight on mobile ── */
  section{padding-top:2rem !important;padding-bottom:2rem !important}
  #hero{padding-top:0 !important;padding-bottom:0.75rem !important}
  .mb-14{margin-bottom:1.5rem !important}
  .mb-10{margin-bottom:1.25rem !important}
  .py-24{padding-top:2rem !important;padding-bottom:2rem !important}
  .py-14{padding-top:1.75rem !important;padding-bottom:1.75rem !important}

  /* ── Section inner padding ── */
  .max-w-6xl.mx-auto.px-6,
  .max-w-4xl.mx-auto.px-6{padding-left:1.125rem !important;padding-right:1.125rem !important}

  /* ── Services: single column ── */
  #services .grid{grid-template-columns:1fr !important;gap:0.75rem !important}
  #services article{padding:1rem !important}
  #services .w-12.h-12{width:2.25rem !important;height:2.25rem !important;margin-bottom:0.75rem !important}

  /* ── Section headings ── */
  h2.text-4xl,h2.md\:text-5xl{font-size:1.625rem !important}

  /* ── Small project cards: horizontal layout ── */
  .mini-proj-card{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    gap:0.75rem !important;
    padding:0.75rem !important;
  }
  .mini-proj-logo{
    width:2.5rem !important;height:2.5rem !important;
    min-width:2.5rem !important;
    margin-bottom:0 !important;
    flex-shrink:0;
    border-radius:0.625rem !important;
  }
  .mini-proj-body{display:flex;flex-direction:column;min-width:0;flex:1}
  .mini-proj-body h3{font-size:0.8rem !important;margin-bottom:0.15rem !important}
  .mini-proj-body p{font-size:0.7rem !important;margin-bottom:0.25rem !important;text-align:left !important;line-height:1.4 !important}
  .mini-proj-body span{font-size:0.7rem !important}
  .mini-proj-card{min-height:auto !important}

  /* ── About section: stack photo below text ── */
  #about .grid{grid-template-columns:1fr !important;gap:1rem !important}
  #about .aspect-square{max-width:9rem !important;margin:0 auto !important}

  /* ── Timeline mobile tighten ── */
  .tl-item .flex-1,.tl-item > div:last-child{padding:0.75rem !important}
  .tl-item .flex-1 p,.tl-item > div:last-child p{font-size:0.75rem !important}
  .space-y-4{gap:0.625rem !important}
  .md\:hidden.space-y-4{display:flex !important;flex-direction:column}

  /* ── Featured project cards ── */
  #work > div > div.grid.md\:grid-cols-2{grid-template-columns:1fr !important;gap:0.75rem !important}
  #work .md\:row-span-2{grid-row:auto !important}
  #work .h-64,.w-full.h-64{height:10rem !important}
  #work .h-44{height:8rem !important}
  #work .p-7{padding:1rem !important}
  #work .p-6{padding:0.875rem !important}

  /* ── Blog/Reviews marquee ── */
  .rv-card{padding:1.25rem !important}

  /* ── FAQ ── */
  .faq-btn-like{padding:0.875rem 1rem !important}

  /* ── Contact — compact on mobile ── */
  #contact .rounded-3xl{border-radius:1rem !important;padding:1.25rem !important}
  #contact .grid.md\:grid-cols-2{grid-template-columns:1fr !important;gap:0 !important}
  /* Left panel hidden on mobile — mobile strip shows instead */
  #contact .grid.md\:grid-cols-2 > div:first-child{display:none !important}
  /* Form panel */
  #contact h2{font-size:1.25rem !important;margin-bottom:0.25rem !important;line-height:1.2 !important}
  #contact p.text-zinc-400{font-size:0.75rem !important;margin-bottom:0.75rem !important;text-align:left !important}
  #contact input,#contact textarea{
    padding:0.6rem 0.875rem !important;font-size:0.8rem !important;
    border-radius:0.75rem !important;
  }
  #contact textarea{min-height:5rem !important}
  #contact label{font-size:0.7rem !important;margin-bottom:0.2rem !important}
  #contact .grid.sm\:grid-cols-2{grid-template-columns:1fr !important;gap:0.5rem !important}
  #contact .flex.flex-col.gap-4{gap:0.625rem !important}
  #contact button[type=button],#contact .w-full.bg-accent{font-size:0.85rem !important;padding:0.75rem !important}

  /* ── Footer — center on mobile ── */
  footer .max-w-6xl{flex-direction:column !important;align-items:center !important;text-align:center !important;gap:1rem !important}
  footer .flex.flex-wrap{justify-content:center !important}
}

/* reduce motion */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .shimmer::after{display:none}
  .card-h{transition:none}
  .rv-slider-track{transition:none}
}