/* ══════════════════════════════════════════
   TABLET — max-width: 1024px
   769px–1024px: desktop nav (no hamburger)
══════════════════════════════════════════ */
@media(max-width:1024px){

  html{font-size:106.25%}
  html,body{overflow-x:hidden}
  #cur,#cur-r{display:none}
  body{cursor:auto}

  /* ── NAV — desktop style for larger tablets ── */
  nav,nav.s{padding:18px 28px}
  .logo-img{height:56px}
  .nav-toggle{display:none}
  .nav-r{
    position:static !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    flex-direction:row;
    align-items:center;
    gap:36px;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    pointer-events:all;
    z-index:auto !important;
  }
  .nav-menu{
    display:flex;
    flex-direction:row;
    gap:24px;
    align-items:center;
    list-style:none;
    position:static;
    background:transparent;
    border:none;
    padding:0;
    backdrop-filter:none;
  }
  .nav-menu a{font-size:.68rem;letter-spacing:.18em;opacity:.7}
  .nav-cta{display:inline-flex;font-size:.68rem;padding:10px 22px}

  /* ── HERO — single rule ── */
  #hero{
    min-height:100svh;
    height:auto;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
  }
  .hero-top{
    padding:100px 28px 100px;
    flex-direction:column;
    gap:0;
    align-items:flex-start;
    flex:1;
    justify-content:space-between;
  }
.hero-left{width:100%;padding-bottom:0}
  .hero-display{font-size:clamp(3rem,7.5vw,5rem);line-height:1.0}
  .hero-eyebrow{
    gap:8px;
    margin-bottom:18px;
    flex-wrap:nowrap;
    align-items:center;
  }
  .eyebrow-kicker{font-size:.92rem;letter-spacing:.14em;padding:4px 8px;white-space:nowrap}
  .eyebrow-tags{flex-wrap:nowrap;gap:5px}
  .eyebrow-tags span{font-size:.92rem;letter-spacing:.08em;padding:4px 7px;white-space:nowrap}
  .hero-right{
    width:100%;
    min-width:auto;
    align-items:center;
    padding-bottom:0;
    display:flex;
    justify-content:center;
    margin-top:24px;
  }
  .hero-stats-stack{
    width:100%;
    max-width:480px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    flex-direction:unset;
    margin:0 auto;
  }
  .hss{
    padding:16px 14px;
    border-right:1px solid var(--line);
    border-bottom:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-align:center;
  }
  .hss:last-child{border-right:none}
  .hss-n{font-size:2.4rem}
  .hss-l{font-size:.68rem;letter-spacing:.1em;line-height:1.35}

  /* ── HERO BOTTOM ── */
  .hero-bottom{
    padding:20px 28px 40px;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    margin-top:auto;
    border-top:1px solid var(--line);
    flex-shrink:0;
  }
  .hero-desc{
    max-width:calc(100% - 56px);
    font-size:.86rem;
    margin-bottom:0;
  }

  /* ── HERO SERVICES ── */
  #hero .hero-services{
    display:flex !important;
    flex-direction:column;
    gap:8px;
    list-style:none;
    margin-bottom:4px;
    padding-right:56px;
  }
  .hero-services li{
    font-size:.78rem;
    color:var(--dim2);
    letter-spacing:.06em;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .hero-services li i{
    color:var(--orange);
    font-size:.7rem;
    flex-shrink:0;
  }

  /* ── HERO ACTIONS ── */
  .hero-actions{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:12px;
    margin-top:0;
    align-items:stretch !important;
    flex-shrink:unset !important;
  }
  .btn-main{
    width:100%;
    text-align:center;
    padding:14px 24px;
    display:block;
    font-size:.72rem;
  }
  .btn-ghost{
    width:100%;
    text-align:center;
    padding:14px 24px;
    display:block;
    font-size:.72rem;
  }
  .scroll-cue{display:none}

  /* ── TICKER ── */
  .ti{font-size:.75rem;padding:0 22px}

  /* ── SERVICES ── */
  .svc-top{padding:64px 28px 36px;grid-template-columns:1fr;gap:20px}
  .svc-item{padding:22px 28px;grid-template-columns:52px 1fr auto}
  .svc-tags-row{display:none}

  /* ── WORK ── */
  #work{padding:64px 0 64px 28px}
  .work-head{padding-right:28px;margin-bottom:32px}
  .wcard-desc{font-size:.85rem;line-height:1.8}
  .wcard-cat{font-size:.66rem;letter-spacing:.2em}
  .wchip{font-size:.64rem;letter-spacing:.1em}
  .wcard{flex:0 0 340px;height:500px}
  .wcard-info{padding:24px}
  .wcard-title{font-size:1.8rem}
  .work-scroll-hint{
    display:flex;
    font-size:.62rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--dim);
    align-items:center;
    gap:8px;
  }
  .work-scroll-hint i{color:var(--orange)}

  /* ── PROCESS ── */
#process{padding:48px 28px 32px}
   .p-grid{
    grid-template-columns:1fr 1fr;
    gap:0;
    margin-top:24px;
  }
  .p-grid::before{display:none}
  .p-step{
    padding:24px 16px 28px;
    border-bottom:1px solid var(--line);
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    row-gap:0;
  }
  .p-dot{
    position:relative;
    top:auto;
    left:auto;
    display:inline-flex;
    flex-shrink:0;
  }
  .p-num{
    display:inline-block;
    font-size:1.1rem;
    font-style:italic;
    color:var(--orange);
    opacity:.6;
    margin-bottom:0;
    flex-shrink:0;
  }
  .p-name{
    display:inline;
    font-size:1.2rem;
    margin-bottom:0;
    flex:1;
    line-height:1.3;
  }
  .p-desc{
    width:100%;
    font-size:.92rem;
    line-height:1.9;
    margin-top:12px;
  }

  /* ── SKILLS ── */
  .about-wrap{grid-template-columns:1fr;min-height:auto !important}
  .about-l{
    min-height:auto;
    height:auto;
    border-right:none;
    border-bottom:1px solid var(--line);
    padding:40px 28px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }
  .about-l::before{display:none}
  .about-l::after{display:none}
  .about-giant{display:none !important;width:0;height:0}
  .skills-panel{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    transform:none;
    width:100%;
    max-width:none;
    padding:20px;
  }
  .sp-label{font-size:.90rem;letter-spacing:.2em;margin-bottom:14px}
  .sp-grid{grid-template-columns:1fr 1fr;gap:12px}
  .sp-chip{padding:14px}
  .sp-chip span{font-size:.85rem;letter-spacing:.1em}
  .sp-chip small{font-size:.80rem;line-height:1.4}
  .sp-foot{gap:8px;margin-top:14px}
  .sp-foot span{font-size:.62rem;padding:7px 10px}
  .about-badge{
    position:relative;
    bottom:auto;
    left:auto;
    padding:16px 24px;
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    gap:14px;
  }
  .ab-n{font-size:2.2rem;line-height:1}
  .ab-l{font-size:.80rem;letter-spacing:.12em;margin-top:0}
  .about-r{padding:52px 28px}
  .s-h{font-size:clamp(2.4rem,5.5vw,4rem)}
  .about-body{font-size:.95rem;line-height:2;margin-bottom:40px}
  .sk-n{font-size:.78rem;letter-spacing:.12em}
  .sk-p{font-size:1.1rem}
  .skills{gap:22px}
  #skills-section{padding:0;margin-top:0}
/* ── CONTACT ── */
  #contact{padding-top:32px}
  .c-wrap{grid-template-columns:1fr}
  .c-l{border-right:none;border-bottom:1px solid var(--line);padding:48px 28px}
  .c-r{padding:48px 28px}
  .f-row{grid-template-columns:1fr 1fr}
  .f-note{font-size:1.05rem}
  .f-l{font-size:.95rem;letter-spacing:.2em}
  .f-f input,.f-f textarea{font-size:.99rem}
  .service-suggest{font-size:.72rem;padding:8px 12px}
  .f-btn{font-size:.78rem;padding:16px 36px}
  .c-tagline{font-size:.95rem}
  .c-lbl{font-size:.90rem}
  .c-val{font-size:.90rem}

  /* ── FOOTER ── */
  footer{
    padding:32px 28px;
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
    text-align:center;
    flex-direction:column;
    align-items:center;
  }
  .f-logo-img{height:60px;width:auto;display:block}
  .f-copy{font-size:.68rem;letter-spacing:.08em}
  .f-nav{justify-content:center;flex-wrap:wrap;gap:18px}
  .f-nav a{font-size:.68rem;letter-spacing:.16em}

  /* ── WHATSAPP ── */
  .wa{
    position:fixed;
    top:50%;
    right:0;
    bottom:auto;
    transform:translateY(-50%);
    width:52px;
    height:46px;
    border-radius:10px 0 0 10px;
    z-index:950;
  }
  .wa:hover{transform:translateY(-50%) translateX(-2px)}
  .wa-tip{display:none}

  /* ── TO TOP ── */
  .to-top{
    position:fixed;
    bottom:28px;
    right:16px;
    width:46px;
    height:46px;
    z-index:960;
  }
  .to-top-label{display:none}
  .to-top-tip{display:none}

} /* ── END TABLET 1024px ── */


/* ══════════════════════════════════════════
   SMALL TABLET — max-width: 768px
   Hamburger menu like mobile
══════════════════════════════════════════ */
@media(max-width:768px){

  /* ── NAV — hamburger ── */
  nav,nav.s{padding:16px 24px}
  .nav-toggle{
    display:inline-flex !important;
    width:44px;
    height:44px;
    z-index:1400;
    position:relative;
    background:transparent !important;
    border:1px solid rgba(244,244,238,.15) !important;
    border-radius:6px !important;
    color:var(--white);
    cursor:pointer;
    align-items:center;
    justify-content:center;
    margin-right:4px;
  }
  .nav-cta{display:inline-flex !important;font-size:.85rem;padding:14px 36px}
  .nav-r{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:36px !important;
    background:rgba(8,8,6,.98) !important;
    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;
    transform:translateX(100%) !important;
    transition:transform .4s cubic-bezier(.16,1,.3,1) !important;
    z-index:1300 !important;
    pointer-events:none !important;
  }
  nav.open .nav-r{
    transform:translateX(0) !important;
    pointer-events:all !important;
  }
  .nav-menu{
    flex-direction:column !important;
    gap:28px !important;
    align-items:center !important;
  }
  .nav-menu a{font-size:1.1rem !important;letter-spacing:.2em !important;opacity:1 !important}

  /* ── HERO BOTTOM ── */
  .hero-bottom{padding:20px 24px 48px}

  /* ── WHATSAPP ── */
  .wa{
    position:fixed !important;
    top:50% !important;
    right:0 !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    width:52px !important;
    height:46px !important;
    border-radius:10px 0 0 10px !important;
    z-index:950 !important;
  }
  .wa:hover{transform:translateY(-50%) translateX(-2px) !important}

} /* ── END SMALL TABLET 768px ── */