/* dev.analogtrsh.com — shared stylesheet (EN + ES pages)
   Font loading is handled via <link rel="preconnect"> + <link rel="stylesheet">
   in each page's <head>, not via @import here. */

:root{
  --bg:#f2f2f2; --surface:#ffffff; --surface2:#e8e8e8;
  --border:#d0d0d0; --border-hi:#000000;
  --text:#000000; --muted:rgba(0,0,0,.5);
  --accent:#ff3b1f;
  --font-mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  --font-display:'Archivo Black','Arial Black',Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-mono); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none; cursor:pointer;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:1200px; margin:0 auto;}

/* ── proto banner ── */
.proto{
  position:sticky; top:0; z-index:60;
  background:#000; color:#fff;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 36px; text-align:center;
}
.proto b{color:var(--accent);}

/* ── header ── */
.hd{
  position:sticky; top:var(--proto-h, 34px); z-index:50;
  display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
  padding:20px 36px; border-bottom:1px solid var(--border); background:var(--bg);
}
.hd-logo{display:flex; align-items:center; gap:10px;}
.hd-word{font-family:var(--font-display); font-weight:900; font-size:17px; letter-spacing:-0.01em; text-transform:uppercase; transition:color 140ms;}
.hd-logo:hover .hd-word{color:var(--accent);}
.word-sub{color:var(--accent);}
.hd-nav{display:flex; gap:30px; justify-content:center;}
.hd-nav a{font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap; transition:color 140ms, border-color 140ms;}
.hd-nav a:hover{color:var(--accent); border-color:var(--accent);}
.hd-nav a.is-active{color:var(--accent); border-color:var(--accent);}
.hd-r{display:flex; align-items:center; gap:16px;}
.lang-switch{font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border:1px solid #000; color:#000; white-space:nowrap; transition:background 140ms, color 140ms;}
.lang-switch:hover{background:#000; color:#fff;}
.hd-status{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;}
.hd-dot{width:7px; height:7px; background:var(--accent); border-radius:999px; flex-shrink:0;}
.hd-cta{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 16px; border:1px solid #000; background:#000; color:#fff;
  white-space:nowrap;
}
.hd-cta:hover{background:var(--accent); border-color:var(--accent); color:#000;}

/* burger button — shown only on mobile */
.hd-burger{
  display:none;
  background:none; border:1px solid #000; color:#000;
  font-size:18px; line-height:1; padding:7px 11px;
  cursor:pointer; transition:background 140ms, color 140ms;
}
.hd-burger:hover{background:#000; color:#fff;}

/* ── slide-in drawer (mobile nav) ── */
.hd-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:260px; background:#000; color:#fff;
  display:flex; flex-direction:column;
  padding:0;
  transform:translateX(100%);
  transition:transform 260ms cubic-bezier(0.2,0.6,0.2,1), visibility 0s linear 260ms;
  visibility:hidden;
}
.hd-drawer.is-open{transform:translateX(0); visibility:visible; transition:transform 260ms cubic-bezier(0.2,0.6,0.2,1), visibility 0s linear 0s;}
.drawer-close{
  background:none; border:none; color:#fff;
  font-size:20px; line-height:1; padding:18px 20px 14px;
  align-self:flex-end; cursor:pointer;
  transition:color 140ms;
}
.drawer-close:hover{color:var(--accent);}
.hd-drawer a{
  display:block; padding:16px 24px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#e0e0e0; border-bottom:1px solid #1a1a1a;
  transition:color 140ms, background 140ms;
}
.hd-drawer a:hover, .hd-drawer a.is-active{color:var(--accent); background:#0a0a0a;}
.hd-drawer .drawer-cta{
  display:block; text-align:center; margin:16px 24px; padding:12px 16px;
  background:var(--accent); border:1px solid var(--accent); color:#000; border-bottom:none;
}
.hd-drawer .drawer-cta:hover{background:#fff; border-color:#fff; color:#000;}

/* ── dim overlay (drawer open) ── */
.hd-dim{
  position:fixed; inset:0; z-index:70;
  background:#000; opacity:0; pointer-events:none;
  transition:opacity 260ms ease;
}
.hd-dim.is-open{opacity:0.5; pointer-events:auto;}

/* responsive header */
@media (max-width:1080px){
  .hd{grid-template-columns:1fr auto; grid-template-areas:"logo r" "nav nav"; row-gap:14px; padding:16px 20px;}
  .hd-logo{grid-area:logo;}
  .hd-r{grid-area:r;}
  .hd-nav{grid-area:nav; justify-content:flex-start; flex-wrap:wrap; gap:16px 22px; border-top:1px dashed var(--border); padding-top:12px;}
}
@media (max-width:768px){
  .hd{grid-template-columns:1fr auto; grid-template-areas:"logo r"; row-gap:0; padding:14px 20px;}
  .hd-nav{display:none;}
  .hd-burger{display:block;}
}
@media (max-width:480px){
  .hd-status-t{display:none;}
  .hd-cta{display:none;} /* drawer CTA handles it on mobile */
  .lang-switch{padding:5px 8px; font-size:10px;}
  .proto{padding:8px 16px; font-size:10px; line-height:1.5;}
}

/* ── hero (dark hatched — brand-fixed, independent of page theme) ── */
.hero{position:relative; background:#000; color:#fff; overflow:hidden; padding:72px 36px 76px;}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 1px, transparent 1px 14px);
}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start;}
.eyebrow{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#ccc; margin-bottom:22px;}
.eyebrow .dot{width:7px; height:7px; background:var(--accent); border-radius:999px;}
.boot-line{font-size:11px; color:#888; margin:0 0 10px; min-height:14px;}
.boot-line .caret{display:inline-block; width:7px; height:12px; background:var(--accent); margin-left:1px; vertical-align:-1px; animation:mCaret 900ms steps(1) infinite;}
.disp{font-family:var(--font-display); font-weight:900; font-size:clamp(48px,9vw,120px); line-height:.9; letter-spacing:-.02em; margin:0;}
.disp .out{color:transparent; -webkit-text-stroke:2px #f0f0f0;}
.disp .fill{color:#f0f0f0;}
.disp .slash{color:var(--accent); display:inline-block; transform:skew(-14deg); padding:0 .05em;}
.hero-copy{font-size:14px; line-height:1.6; color:#e6e6e6; max-width:400px; margin:26px 0 0;}
.hero-r{display:flex; flex-direction:column; gap:24px; padding-top:8px; max-width:360px;}
.tags{display:flex; flex-wrap:wrap; gap:6px;}
.tag{font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:7px 11px; border:1px solid currentColor; color:#f0f0f0; line-height:1;}
.tag.accent{color:var(--accent); border-color:var(--accent);}
.hcta{align-self:flex-start; display:inline-flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid #f0f0f0; color:#f0f0f0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; transition:all .1s;}
.hcta:hover{background:#f0f0f0; color:#000;}
.hcta span{color:var(--accent);}

/* on-light modifier */
.hcta.on-light{border-color:#000; color:#000; opacity:1;}
.hcta.on-light:hover{background:#000; color:#fff; border-color:#000;}
.hback{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#999; border-bottom:1px solid #444; padding-bottom:2px; align-self:flex-start;}
.hback:hover{color:var(--accent); border-color:var(--accent);}
.bleed{position:absolute; bottom:-40px; right:-90px; font-family:var(--font-display); font-weight:900; font-size:260px; line-height:.85; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.07); z-index:0; pointer-events:none;}

@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;}
  .disp{font-size:clamp(44px,13vw,80px);}
  .hero-r{max-width:none;}
  .bleed{font-size:180px; bottom:-24px; right:-50px;}
}
@media (max-width:640px){
  .hero{padding:52px 20px 56px;}
  .hero-copy{max-width:none; font-size:13px;}
  .tags{gap:8px;}
  .hcta,.hback{width:100%; justify-content:center; text-align:center;}
  .bleed{display:none;}
}
@media (max-width:400px){
  .disp{font-size:clamp(36px,15vw,52px); letter-spacing:-.015em;}
}

/* ── light sections ── */
.sec{padding:64px 36px; scroll-margin-top:24px;}
.sec.alt{background:var(--surface2);}
.sh{display:flex; align-items:center; gap:16px; margin-bottom:32px;}
.sh-eye{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;}
.sh-eye .dot{width:7px; height:7px; background:var(--accent); border-radius:999px;}
.sh-rule{flex:1; height:1px; background:var(--border);}
.sh-meta{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap;}

@media (max-width:640px){
  .sec{padding:44px 20px;}
  .sh{gap:12px; margin-bottom:24px;}
  .sh-meta{display:none;}
}

/* window-chrome panel */
.win{background:var(--surface); border:1px solid var(--border);}
.win-tb{display:flex; align-items:center; gap:12px; padding:10px 14px; background:#000; color:#fff;}
.win-lights{display:flex; gap:5px;}
.win-l{width:10px; height:10px; border:1px solid #fff;}
.win-l.fill{background:var(--accent); border-color:var(--accent);}
.win-name{font-size:11px; letter-spacing:.08em; color:#f0f0f0;}
.win-body{padding:20px 22px;}
@media (max-width:640px){ .win-body{padding:16px 18px;} }

/* ── clickable-card color inversion (service cards) ── */
.win.is-clickable{cursor:pointer; display:block; transition:background 140ms var(--ease-out,linear), border-color 140ms;}
.win.is-clickable:hover{background:#000; border-color:#000;}
.win.is-clickable:hover .win-body{color:#fff;}
.win.is-clickable:hover .card-title{color:#fff;}
.win.is-clickable:hover .card-p{color:#dcdcdc;}
.win.is-clickable:hover .card-price{color:var(--accent); border-top-color:#333;}
.win.is-clickable:hover .win-body > .tag{color:#fff; border-color:#fff;}

/* service cards */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:980px){ .cards{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .cards{grid-template-columns:1fr;} }
.card-title{font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.01em; margin:14px 0 8px;}
.card-p{font-size:12px; color:#444; margin:0 0 14px;}
.card-price{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border-top:1px dashed var(--border); padding-top:18px; margin-top:auto;}
.cards .win-body{display:flex; flex-direction:column; height:100%;}

/* stack log */
.log-r{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px dashed var(--border);}
.log-r:last-child{border-bottom:none;}
.log-k{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#666;}
.log-v{font-size:13px; font-weight:600; text-align:right;}

/* live-sites status widget */
.status-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.status-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px dashed var(--border); font-size:13px;}
.status-row:last-child{border-bottom:none;}
.status-name{font-weight:600;}
.status-pill{display:inline-flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--border-hi); color:var(--text);}
.status-pill .status-dot{width:6px; height:6px; border-radius:999px; background:currentColor;}
.status-pill.is-down{border-color:var(--accent); color:var(--accent);}
.status-empty{font-size:12px; color:#666; margin:0;}
.status-meta{font-size:10px; letter-spacing:.06em; color:#999; margin-top:10px;}
.status-link{display:inline-block; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#666;}
.status-link:hover{color:var(--accent);}

/* process */
.proc{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .proc{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .proc{grid-template-columns:1fr;} }
.proc-i{border:1px solid var(--border); background:var(--surface); padding:20px;}
.proc-n{font-family:var(--font-display); font-weight:900; font-size:28px; color:var(--accent); margin-bottom:10px;}
.proc-t{font-family:var(--font-display); font-weight:800; font-size:15px; margin-bottom:8px;}
.proc-p{font-size:12px; color:#444; margin:0;}
@media (max-width:560px){ .proc-i{padding:16px;} }

/* work cards */
.work{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:900px){ .work{grid-template-columns:1fr;} }
.work-i{border:1px solid var(--border); background:var(--surface); padding:22px; display:flex; flex-direction:column; gap:10px; min-height:190px;}
.work-i.ghost{border-style:dashed; color:#888; align-items:flex-start; justify-content:center;}
.work-tags{display:flex; gap:6px; flex-wrap:wrap;}
.work-tags .tag{color:#000; border-color:#000; font-size:9px; padding:5px 8px;}
.work-t{font-family:var(--font-display); font-weight:800; font-size:19px; margin:2px 0 0;}
.work-p{font-size:12px; color:#444; margin:0;}
.work-link{margin-top:auto; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);}
@media (max-width:640px){ .work-i{min-height:0; padding:18px;} }

/* ── clickable-card color inversion (case-study cards) ── */
.work-i.is-clickable{cursor:pointer; display:flex; transition:background 140ms, border-color 140ms;}
.work-i.is-clickable:hover{background:#000; border-color:#000;}
.work-i.is-clickable:hover .work-t{color:#fff;}
.work-i.is-clickable:hover .work-p{color:#dcdcdc;}
.work-i.is-clickable:hover .work-link{color:var(--accent);}
.work-i.is-clickable:hover .work-tags .tag{color:#fff; border-color:#fff;}

/* ── reveal-on-scroll: fade in along a 45° diagonal ── */
@keyframes revealDiag{
  from{ opacity:0; transform:translate3d(-26px,26px,0); }
  to{ opacity:1; transform:translate3d(0,0,0); }
}
.reveal{opacity:0; transform:translate3d(-26px,26px,0);}
.reveal.is-in{animation:revealDiag 520ms cubic-bezier(0.2,0.6,0.2,1) forwards;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none;}
  .reveal.is-in{animation:none;}
}

/* ── case study / service modal ── */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity 200ms ease, visibility 0s linear 200ms;
}
.modal-overlay.is-open{opacity:1; visibility:visible; transition:opacity 200ms ease, visibility 0s linear 0s;}
body.modal-open{overflow:hidden;}
.modal{
  background:var(--surface); border:1px solid #000;
  width:100%; max-width:520px; max-height:86vh;
  display:flex; flex-direction:column;
  transform:translateY(16px) scale(.97); opacity:0;
  transition:transform 240ms cubic-bezier(0.2,0.6,0.2,1), opacity 240ms cubic-bezier(0.2,0.6,0.2,1);
}
.modal-overlay.is-open .modal{transform:translateY(0) scale(1); opacity:1;}
.modal .win-tb{cursor:default;}
.modal .win-l.fill{cursor:pointer;}
.modal-body{padding:22px 22px 24px; overflow-y:auto;}
.modal-type{font-size:12px; color:#777; margin-bottom:16px; min-height:16px;}
.modal-type .caret{display:inline-block; width:7px; height:13px; background:var(--accent); margin-left:1px; vertical-align:-2px; animation:mCaret 900ms steps(1) infinite;}
@keyframes mCaret{50%{opacity:0;}}
.modal-content{opacity:0; transform:translateY(6px); transition:opacity 260ms ease, transform 260ms ease;}
.modal-content.is-in{opacity:1; transform:translateY(0);}
.modal-title{font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.01em; margin:12px 0 8px;}
.modal-desc{margin:0 0 18px;}
.modal-desc p{font-size:13px; line-height:1.6; color:#444; margin:0 0 10px;}
.modal-desc p:last-child{margin-bottom:0;}
.modal-meta{margin:0 0 20px;}
.modal-meta .log-r{padding:10px 0;}
.modal-draft{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#999; border:1px dashed var(--border); padding:16px; margin-bottom:18px;}
.modal-imgs{display:flex; gap:8px; overflow-x:auto; margin-bottom:16px; padding-bottom:4px; scrollbar-width:thin;}
.modal-imgs img{height:140px; width:auto; object-fit:cover; border:1px solid var(--border); flex-shrink:0;}
@media (max-width:480px){ .modal-body{padding:18px 18px 20px;} .modal-title{font-size:20px;} .modal-imgs img{height:110px;} }

/* CTA strip */
.strip{position:relative; background:#000; color:#fff; overflow:hidden; scroll-margin-top:24px;}
.strip-hatch{height:12px; background:repeating-linear-gradient(45deg, var(--accent) 0 12px, #000 12px 24px);}
.strip-body{position:relative; padding:40px 36px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px;}
.strip-body::before{content:''; position:absolute; inset:0; pointer-events:none; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px);}
.strip-l{position:relative; z-index:1;}
.strip-t{font-family:var(--font-display); font-weight:900; font-size:28px; margin:0 0 6px; letter-spacing:-.01em;}
.strip-p{font-size:12px; color:#ccc; margin:0; max-width:520px;}
.strip-body > .hcta{position:relative; z-index:1;}
@media (max-width:760px){ .strip-body{grid-template-columns:1fr; padding:32px 20px;} .strip-body > .hcta{width:100%; justify-content:center;} }
@media (max-width:400px){ .strip-t{font-size:22px;} }

/* footer */
.ft{background:#000; color:#f0f0f0; padding:32px 36px 20px;}
.ft-top{display:flex; justify-content:space-between; align-items:center; gap:24px;}
.ft-logo{display:flex; align-items:center; gap:10px;}
.ft-soc{display:flex; gap:20px;}
.ft-soc a{font-size:11px; letter-spacing:.08em; text-transform:uppercase;}
.ft-soc a:hover{color:var(--accent);}
.ft-rule{height:1px; background:#222; margin:22px 0;}
.ft-bot{display:flex; justify-content:space-between; font-size:10px; letter-spacing:.1em; color:#777;}
@media (max-width:700px){ .ft-top,.ft-bot{flex-direction:column; align-items:flex-start; gap:12px;} .ft{padding:28px 20px 18px;} .ft-soc{flex-wrap:wrap; gap:14px 20px;} }

/* wider modal when images are present */
@media (min-width:640px){ .modal.is-wide{max-width:760px;} }

/* ── error win ── */
.err-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity 160ms ease,visibility 0s linear 160ms;}
.err-overlay.is-open{opacity:1;visibility:visible;transition:opacity 160ms ease,visibility 0s linear 0s;}
.err-win{background:var(--surface);border:1px solid var(--border-hi);width:340px;max-width:calc(100vw - 40px);}
.err-body{padding:20px 20px 16px;display:flex;flex-direction:column;gap:14px;}
.err-body p{font-size:12px;line-height:1.65;color:var(--fg);}
.err-ok{align-self:flex-end;font-family:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 18px;background:none;border:1px solid var(--border-hi);color:var(--fg);cursor:pointer;transition:background 140ms,color 140ms,border-color 140ms;}
.err-ok:hover{background:var(--accent);border-color:var(--accent);color:#000;}

/* ── lightbox ── */
.lb-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px; cursor:zoom-out;
  opacity:0; visibility:hidden;
  transition:opacity 180ms ease, visibility 0s linear 180ms;
}
.lb-overlay.is-open{opacity:1; visibility:visible; transition:opacity 180ms ease, visibility 0s linear 0s;}
.lb-img{max-width:100%; max-height:76vh; object-fit:contain; display:block; cursor:default; border:1px solid #222;}
.lb-caption{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#e6e6e6; margin-top:14px; min-height:16px; text-align:center;}
.lb-close{position:absolute; top:20px; right:24px; background:none; border:none; color:#fff; font-size:20px; line-height:1; padding:8px; cursor:pointer; transition:color 140ms;}
.lb-close:hover{color:var(--accent);}