/* SD LAB — polish layer v4
   Keeps the established system intact and adds interaction, hierarchy, accessibility and conversion refinement. */

section[id]{scroll-margin-top:92px}

/* Header / navigation */
.site-header{transition:background .25s,color .25s,border-color .25s}
#nav a[aria-current="true"],#nav a[aria-current="location"]{color:var(--signal)}
#nav a[aria-current="true"]::after,#nav a[aria-current="location"]::after{right:0!important;background:var(--signal)!important}
#nav .nav-contact[aria-current="true"],#nav .nav-contact[aria-current="location"]{color:#fff;background:var(--signal)}
.menu-toggle{min-width:74px;transition:background .2s,color .2s,border-color .2s}

/* Hero refinement */
.hero-side{border-left:1px solid var(--line);padding-left:32px}
.hero-lead{max-width:520px}
.hero-note{line-height:1.55}
.hero-marquee{overflow:hidden}
.hero-marquee span{white-space:nowrap}

.signal-strip{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.signal-track{display:grid;grid-template-columns:repeat(4,1fr)}
.signal-track span{min-height:72px;padding:0 20px;display:flex;align-items:center;border-left:1px solid var(--line);font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;font-weight:800}
.signal-track span:first-child{border-left:0;padding-left:0}
.signal-track span:last-child{padding-right:0}

/* Project cards */
.project-card{transition:transform .32s cubic-bezier(.2,.75,.2,1),box-shadow .32s cubic-bezier(.2,.75,.2,1)}
.project-visual{isolation:isolate}
.visual-note{position:absolute;z-index:5;left:24px;bottom:20px;color:#fff;opacity:.58;font-size:.64rem;text-transform:uppercase;letter-spacing:.11em;max-width:75%}
.web-visual>small{position:absolute;left:24px;bottom:20px;color:#fff;opacity:.58;font-size:.64rem;text-transform:uppercase;letter-spacing:.11em}
.epk-stage,.browser,.lab-window,.orbit{transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s cubic-bezier(.2,.75,.2,1)}
.gira-visual::after{content:"";position:absolute;inset:8%;border:1px solid rgba(255,255,255,.16);border-radius:50%;transform:rotate(-12deg)}
.lab-visual::after{content:"SD LAB / EXPERIMENTAL SYSTEM";position:absolute;left:28px;top:26px;color:rgba(255,177,138,.62);font-size:.58rem;letter-spacing:.14em;font-weight:800}

/* Capabilities */
.cap-statement{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:6px;max-width:430px}
.cap-statement span{font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);font-weight:800}
.cap-statement b{font-family:Georgia,"Times New Roman",serif;font-size:1.35rem;line-height:1.1;font-weight:400}
.cap-list article{transition:padding-left .22s ease,background .22s ease}

/* Selected work */
.work-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.work-card{background:rgba(255,255,255,.015)}
.work-norte .work-screen{height:480px}
.work-mostrador .work-screen{height:390px}
.work-copy{display:flex;flex-direction:column;min-height:300px}
.work-copy p{margin-bottom:22px}
.work-proof{list-style:none;padding:0;margin:0 0 34px;display:flex;flex-wrap:wrap;gap:7px}
.work-proof li{border:1px solid var(--light-line);padding:6px 9px;border-radius:99px;font-size:.66rem;font-weight:700;opacity:.72}
.work-copy b{margin-top:auto;display:inline-flex;width:max-content;border-bottom:1px solid currentColor;padding-bottom:5px}

/* Method — less like a solid promo block, more editorial */
.method{background:linear-gradient(115deg,#c43a00 0%,#c43a00 46%,#b93500 100%)}
.method-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:90px;align-items:start}
.method-head{position:sticky;top:118px;margin:0;display:block}
.method-head h2{font-size:clamp(3.4rem,6vw,6.5rem);line-height:.88}
.method-intro{margin:34px 0 0!important;max-width:520px;font-size:1rem!important;line-height:1.55;opacity:1}
.method-list{border-top-color:rgba(255,255,255,.52)}
.method-list li{grid-template-columns:46px minmax(0,1fr);gap:22px;padding:32px 0}
.method-list li>div{grid-column:2;display:block}
.method-list h3{margin-bottom:12px;font-size:clamp(2.2rem,4vw,4rem)}
.method-list p{opacity:1;line-height:1.5}

/* Contact */
.contact-copy{align-self:start;position:sticky;top:118px}
.contact-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.contact-shortcuts button{border:1px solid var(--line);background:transparent;color:var(--ink);padding:10px 13px;border-radius:99px;font-size:.76rem;font-weight:800;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.contact-shortcuts button:hover,.contact-shortcuts button:focus-visible,.contact-shortcuts button.is-selected{background:var(--signal);border-color:var(--signal);color:#fff}
.contact-form{background:rgba(255,255,255,.2);padding:26px;border:1px solid var(--line);border-radius:18px}
.contact-form input,.contact-form select,.contact-form textarea{padding-left:2px;padding-right:2px}
.submit{border-radius:8px;transition:transform .18s ease,filter .18s ease}
.submit:not(:disabled):hover{transform:translateY(-2px);filter:brightness(.96)}

/* Progressive reveal: content stays visible if JS does not run. */
.reveal-ready .reveal-item{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.2,1)}
.reveal-ready .reveal-item.is-visible{opacity:1;transform:none}
.reveal-ready .project-card.reveal-item{transform:translateY(34px) scale(.992)}
.reveal-ready .project-card.reveal-item.is-visible{transform:none}

@media (hover:hover) and (pointer:fine){
  .project-card:hover{transform:translateY(-4px);box-shadow:0 26px 70px rgba(0,0,0,.16)}
  .project-card:hover .epk-stage{transform:rotate(0deg) scale(1.015);box-shadow:0 44px 90px rgba(0,0,0,.42)}
  .project-card:hover .browser-back{transform:rotate(-2deg) translate(-8px,-6px)}
  .project-card:hover .browser-front{transform:rotate(1deg) translate(8px,5px)}
  .project-card:hover .lab-window{transform:translate(-4px,-4px);box-shadow:26px 26px 0 rgba(255,177,138,.18)}
  .project-card:hover .orbit-a{transform:rotate(12deg) scale(1.02)}
  .project-card:hover .orbit-b{transform:rotate(-12deg) scale(.98)}
  .cap-list article:hover{padding-left:12px;background:rgba(17,17,15,.025)}
}

@media (max-width:980px){
  .hero-side{border-left:0;padding-left:0}
  .signal-track{grid-template-columns:1fr 1fr}
  .signal-track span:nth-child(3){border-left:0;border-top:1px solid var(--line);padding-left:0}
  .signal-track span:nth-child(4){border-top:1px solid var(--line)}
  .work-grid{grid-template-columns:1fr}
  .work-norte .work-screen,.work-mostrador .work-screen{height:430px}
  .method-grid{grid-template-columns:1fr;gap:58px}
  .method-head{position:static}
  .contact-copy{position:static}
}

@media (max-width:720px){
  section[id]{scroll-margin-top:72px}
  body.menu-open{overflow:hidden}
  body.menu-open .site-header{background:var(--ink);color:var(--paper);border-bottom-color:var(--light-line)}
  body.menu-open .menu-toggle{border-color:var(--light-line);color:var(--paper);background:rgba(255,255,255,.06)}

  .js #nav{position:fixed;z-index:95;top:66px;bottom:0;left:0;right:0;height:calc(100dvh - 66px);background:var(--ink);color:var(--paper);border:0;padding:30px 14px 22px;overflow:auto}
  .js #nav.open{display:flex}
  .js #nav a{position:relative;padding:18px 8px 18px 50px;border-bottom:1px solid var(--light-line);font-size:clamp(1.8rem,9vw,3rem);letter-spacing:-.045em;line-height:1;font-weight:800}
  .js #nav a::before{position:absolute;left:8px;top:22px;font-size:.6rem;letter-spacing:.12em;color:#aaa59a;font-weight:800}
  .js #nav a:nth-child(1)::before{content:"01"}.js #nav a:nth-child(2)::before{content:"02"}.js #nav a:nth-child(3)::before{content:"03"}.js #nav a:nth-child(4)::before{content:"04"}.js #nav a:nth-child(5)::before{content:"05"}
  .js #nav a:not(.nav-contact)::after{display:none}
  .js #nav .nav-contact{margin-top:auto;padding:17px 18px;text-align:left;border-radius:8px;background:var(--signal);color:#fff;font-size:1.25rem}
  .js #nav .nav-contact::before{display:none}

  .hero-side{padding-left:0}
  .signal-track{width:100%;grid-template-columns:1fr}
  .signal-track span{min-height:54px;border-left:0;border-top:1px solid var(--line);padding:0!important}
  .signal-track span:first-child{border-top:0}

  .visual-note,.web-visual>small{left:18px;bottom:14px;font-size:.56rem;max-width:82%}
  .cap-statement{margin-top:34px}
  .work-norte .work-screen,.work-mostrador .work-screen{height:330px}
  .work-copy{min-height:auto}
  .work-proof{margin-bottom:26px}
  .work-copy b{margin-top:8px}
  .method-grid{gap:42px}
  .method-head h2{font-size:clamp(3.2rem,14vw,5rem)}
  .method-intro{margin-top:24px!important}
  .contact-shortcuts{margin-top:24px}
  .contact-shortcuts button{flex:1 1 auto;text-align:center;min-height:44px}
  .contact-form{padding:20px 18px;border-radius:14px}
}

@media (max-width:380px){
  .contact-form{padding:18px 14px}
  .signal-track span{font-size:.64rem}
}

@media (prefers-reduced-motion:reduce){
  .reveal-ready .reveal-item{opacity:1!important;transform:none!important;transition:none!important}
  .project-card,.epk-stage,.browser,.lab-window,.orbit{transition:none!important}
}

/* V3 — conversion, focus and small-screen resilience */
html{scrollbar-gutter:stable}
h1,h2,h3,.hero-lead,.project-tagline{text-wrap:balance}
p{text-wrap:pretty}
.hero-actions{display:grid;gap:22px;justify-items:start}
.hero-quicklinks{display:flex;flex-wrap:wrap;gap:8px}
.hero-quicklinks a{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:99px;font-size:.76rem;font-weight:800;transition:background .18s,color .18s,border-color .18s,transform .18s}
.hero-quicklinks a:hover,.hero-quicklinks a:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-1px)}
.contact-shortcuts button[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#fff}

@media (max-width:720px){
  body.menu-open{overscroll-behavior:none}
  .js #nav{padding-bottom:max(22px,env(safe-area-inset-bottom))}
  .hero-actions{gap:20px}
  .hero-quicklinks{width:100%}
  .hero-quicklinks a{flex:1 1 0;justify-content:space-between;min-height:46px}
}

/* V4 — brand consistency and direct conversion */
.contact-email{display:inline-flex;width:max-content;max-width:100%;margin-top:18px!important;padding-bottom:4px;border-bottom:1px solid currentColor;font-weight:700;color:var(--ink)!important;overflow-wrap:anywhere}
.contact-email:hover,.contact-email:focus-visible{color:var(--signal)!important}
.project-webs .project-actions{row-gap:14px}
@media (max-width:720px){
  .project-webs .project-actions{gap:14px 18px}
  .contact-email{font-size:.92rem}
}

/* V5 — accessibility hardening. Keeps the orange system while meeting AA for essential small text. */
:root{--signal:#c43a00;--muted:#6b675f}
.method{background:linear-gradient(115deg,#c43a00 0%,#c43a00 46%,#b93500 100%)}

/* V6 — real published proof inside Selected Work. */
.work-nico{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)}
.work-nico .work-screen{height:430px}
.work-nico .work-copy{padding:44px;min-height:430px;justify-content:center}
.work-nico .work-copy>span{opacity:.72}
.nico-screen{background:radial-gradient(circle at 78% 18%,rgba(215,199,255,.22),transparent 24%),linear-gradient(145deg,#0f0d12,#281f32 58%,#121015);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.nico-proof-top{display:flex;justify-content:space-between;gap:18px;font-size:.68rem;letter-spacing:.12em;font-weight:800}
.nico-proof-title{font-size:clamp(3.4rem,7vw,7rem);line-height:.8;letter-spacing:-.075em;font-weight:800;margin:auto 0}
.nico-proof-nav{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.24);padding-top:18px}
.nico-proof-nav span{border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:7px 10px;font-size:.64rem;font-weight:800;letter-spacing:.08em}
@media(max-width:980px){.work-nico{grid-template-columns:1fr}.work-nico .work-copy{min-height:auto}.work-nico .work-screen{height:430px}}
@media(max-width:720px){.work-nico .work-screen{height:330px}.work-nico .work-copy{padding:26px}.nico-proof-title{font-size:clamp(3rem,15vw,5rem)}.nico-proof-nav{gap:6px}.nico-proof-nav span{font-size:.58rem}}
@media(max-width:380px){.work-nico .work-screen{height:290px}}

/* V8 — interaction semantics and touch resilience */
.project-link{min-height:44px;align-items:center}
@media (max-width:720px){
  .contact-email{min-height:44px;align-items:center}
  .footer-top nav a{min-height:44px;display:flex;align-items:center}
}

/* V9 — no-JS mobile navigation fallback without horizontal overflow. */
@media (max-width:720px){
  html:not(.js) .nav-shell{height:auto;min-height:66px;padding:12px 0;flex-wrap:wrap;gap:10px 16px}
  html:not(.js) #nav{width:100%;min-width:0;display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.78rem}
  html:not(.js) #nav a{min-width:0;overflow-wrap:anywhere}
  html:not(.js) #nav .nav-contact{margin-left:0}
}