/* =============================================================
   ALIACE — Page & Section Styles (builds on main.css tokens)
   ============================================================= */

/* ---------- HERO SLIDER ---------- */
.hero{position:relative;padding-top:var(--nav-h);min-height:min(92vh,860px);display:flex;align-items:center;overflow:hidden;background:var(--bg)}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--ink-100) 1px,transparent 1px),linear-gradient(90deg,var(--ink-100) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000,transparent);mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000,transparent);opacity:.6}
.hero-glow{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(90px);opacity:.5}
.hero-glow.a{background:radial-gradient(circle,rgba(216,31,38,.5),transparent 65%);top:-160px;right:-120px}
.hero-glow.b{background:radial-gradient(circle,rgba(232,163,61,.4),transparent 65%);bottom:-200px;left:-120px}
.hero .container{position:relative;z-index:1;width:100%}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center}

.slides{position:relative}
.slide{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);pointer-events:none}
.slide.active{position:relative;opacity:1;transform:none;pointer-events:auto}
.slide .tag{margin-bottom:1.2rem}
.slide h1{font-size:clamp(2.4rem,5.2vw,4rem);letter-spacing:-.035em;margin-bottom:1.2rem;line-height:1.02}
.slide p{font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:46ch;margin-bottom:1.8rem;color:var(--ink-600)}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}
.slider-controls{display:flex;align-items:center;gap:1.2rem;margin-top:2.4rem}
.slider-dots{display:flex;gap:.5rem}
.slider-dot{width:9px;height:9px;border-radius:50%;border:none;background:var(--ink-200);cursor:pointer;padding:0;transition:all .3s var(--ease)}
.slider-dot.active{background:var(--grad-signal);width:30px;border-radius:5px}
.slider-arrows{display:flex;gap:.5rem}
.slider-arrows button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink-700);transition:all .25s}
.slider-arrows button:hover{border-color:var(--accent);color:var(--accent)}
.slider-arrows svg{width:18px;height:18px}

/* Hero visual panel */
.hero-visual{position:relative}
.hero-panel{background:var(--grad-ink);border-radius:var(--r-xl);padding:1.6rem;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.hero-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-signal)}
.hp-bar{display:flex;gap:.4rem;margin-bottom:1.1rem}
.hp-bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.hp-row{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);margin-bottom:.7rem}
.hp-row .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--grad-signal-soft);color:var(--cyan-400);flex-shrink:0}
.hp-row .ic svg{width:20px;height:20px}
.hp-row h5{font-family:var(--font-display);font-size:.94rem;color:#fff;font-weight:600}
.hp-row p{font-size:.78rem;color:var(--ink-400);margin:0}
.hp-row .val{margin-left:auto;font-family:var(--font-mono);font-size:.82rem;color:var(--cyan-400)}
.hero-float{position:absolute;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:.9rem 1.1rem;display:flex;align-items:center;gap:.7rem;border:1px solid var(--border)}
.hero-float.one{bottom:-18px;left:-26px;animation:floaty 5s ease-in-out infinite}
.hero-float.two{top:-20px;right:-14px;animation:floaty 6s ease-in-out infinite .5s}
.hero-float .fi{width:34px;height:34px;border-radius:9px;background:var(--grad-signal);display:grid;place-items:center;color:#fff}
.hero-float .fi svg{width:18px;height:18px}
.hero-float b{font-family:var(--font-display);font-size:.92rem;color:var(--ink-900);display:block}
.hero-float span{font-size:.74rem;color:var(--text-soft)}
@keyframes floaty{50%{transform:translateY(-10px)}}
@media(max-width:940px){.hero-inner{grid-template-columns:1fr}.hero-visual{display:none}}

/* ---------- CLIENTS STRIP ---------- */
.clients-strip{padding-block:2.4rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.clients-strip .container{display:flex;flex-direction:column;gap:1.4rem}
.clients-label{text-align:center;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft)}

/* ---------- FEATURE / SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.rev .split-media{order:-1}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}}
.split-media{position:relative}
.media-card{border-radius:var(--r-xl);overflow:hidden;background:var(--grad-ink);aspect-ratio:4/3.2;position:relative;box-shadow:var(--sh-lg)}
.media-card svg{width:100%;height:100%;padding:2rem;display:block;box-sizing:border-box}
.media-card img{width:100%;height:100%;object-fit:cover;display:block}
.media-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,0) 40%,rgba(10,14,26,.55) 100%);pointer-events:none}
.check-list{margin-top:1.6rem;display:grid;gap:.85rem}
.check-list li{display:flex;gap:.75rem;align-items:flex-start;color:var(--ink-700)}
.check-list .ck{width:24px;height:24px;border-radius:50%;background:var(--grad-signal-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.check-list .ck svg{width:14px;height:14px}

/* ---------- PROCESS TIMELINE ---------- */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:step;position:relative}
.timeline::before{content:"";position:absolute;top:26px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--signal-500),var(--cyan-500));opacity:.3}
.tl-step{position:relative;text-align:center}
.tl-num{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--border);display:grid;place-items:center;margin:0 auto 1.2rem;font-family:var(--font-display);font-weight:700;color:var(--accent);position:relative;z-index:1;transition:all .3s var(--ease)}
.tl-step:hover .tl-num{background:var(--grad-signal);color:#fff;border-color:transparent;box-shadow:var(--sh-signal)}
.tl-step h4{margin-bottom:.4rem}
.tl-step p{font-size:.92rem}
@media(max-width:860px){.timeline{grid-template-columns:1fr 1fr}.timeline::before{display:none}}
@media(max-width:520px){.timeline{grid-template-columns:1fr}}

/* ---------- TABS (industries / tech) ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;justify-content:center}
.tab-btn{padding:.7rem 1.3rem;border-radius:var(--r-pill);border:1.5px solid var(--border);background:#fff;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:.94rem;color:var(--ink-600);transition:all .25s}
.tab-btn:hover{border-color:var(--accent);color:var(--accent)}
.tab-btn.active{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.tab-pane{display:none;animation:fade .5s var(--ease)}
.tab-pane.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- TECH GRID ---------- */
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media(max-width:860px){.tech-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tech-grid{grid-template-columns:1fr}}
.tech-chip{display:flex;align-items:center;gap:1.1rem;padding:1.4rem 1.5rem;border:1.5px solid rgba(166,32,31,.3);border-radius:var(--r-lg);background:#fff;font-family:var(--font-display);font-weight:600;color:var(--ink-700);transition:all .3s var(--ease)}
.tech-chip:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh-md)}
.tech-chip .tc{width:104px;height:104px;border-radius:18px;background:var(--ink-050);display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;padding:14px}
.tech-chip .tc svg{width:100%;height:100%}
.tech-chip .tc img{width:100%;height:100%;object-fit:contain}
.tech-chip .tc.tc-multi svg{width:48%;height:48%}
.tech-chip .label{font-size:.88rem;font-weight:700;color:var(--ink-900);letter-spacing:-.005em;line-height:1.2}

/* ---------- TESTIMONIALS ---------- */
.t-dark-section{background:#000;color:#fff}
.t-dark-section .eyebrow{color:var(--cyan-500)}
.t-dark-section h2{color:#fff}
.t-dark-section .lead{color:var(--ink-400)}

.testimonials{position:relative}
.t-window{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.t-track{display:flex;gap:1.1rem;width:max-content;padding:2.2rem .5rem 1rem;will-change:transform}
.t-card{
  flex:0 0 270px;min-width:0;position:relative;
  background:#151515;border-radius:14px;
  padding:2.2rem 1.4rem 1.4rem;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.t-card .quote-mark{display:none}
.t-avatar-wrap{position:absolute;top:-26px;left:50%;transform:translateX(-50%)}
.t-avatar{width:52px;height:52px;border-radius:50%;background:var(--grad-signal);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:.95rem;box-shadow:0 0 0 4px #000}
.t-gbadge{position:absolute;bottom:-2px;right:-2px;width:19px;height:19px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 0 0 2px #000;display:grid;place-items:center}
.t-gbadge svg{width:100%;height:100%}
.t-name{font-family:var(--font-display);color:#fff;display:block;font-size:.95rem;margin-top:.6rem}
.t-role{font-size:.78rem;color:var(--ink-400);display:block;margin-bottom:.7rem}

.t-stars{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-bottom:.9rem}
.star{position:relative;width:15px;height:15px;display:inline-block;color:rgba(255,255,255,.2)}
.star::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff33'%3E%3Cpath d='M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5L12 3z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}
.star::after{content:"";position:absolute;inset:0;width:0;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2312c6e6'%3E%3Cpath d='M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5L12 3z'/%3E%3C/svg%3E");background-size:15px 15px;background-repeat:no-repeat}
.t-stars .star:nth-child(1)::after{width:calc(min(1,var(--rating)) * 15px)}
.t-stars .star:nth-child(2)::after{width:calc(min(1,max(0,var(--rating) - 1)) * 15px)}
.t-stars .star:nth-child(3)::after{width:calc(min(1,max(0,var(--rating) - 2)) * 15px)}
.t-stars .star:nth-child(4)::after{width:calc(min(1,max(0,var(--rating) - 3)) * 15px)}
.t-stars .star:nth-child(5)::after{width:calc(min(1,max(0,var(--rating) - 4)) * 15px)}
.t-verified{width:15px;height:15px;margin-left:.15rem;flex-shrink:0}
.t-verified svg{width:100%;height:100%}

.t-card blockquote{
  font-family:var(--font-body);font-size:.88rem;color:var(--ink-300);
  line-height:1.55;margin-bottom:.6rem;text-align:left;width:100%;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.t-card blockquote.expanded{-webkit-line-clamp:unset;overflow:visible}
.t-read-more{background:none;border:none;padding:0;font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--ink-400);cursor:pointer;align-self:flex-start}
.t-read-more:hover{color:var(--cyan-500)}

.t-edge-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);cursor:pointer;display:grid;place-items:center;color:#fff;
}
.t-edge-arrow.prev{left:-8px}
.t-edge-arrow.next{right:-8px}
.t-edge-arrow:hover{border-color:var(--cyan-500);color:var(--cyan-500)}
.t-edge-arrow svg{width:16px;height:16px}
@media(max-width:640px){.t-edge-arrow{display:none}}

/* ---------- CTA BAND ---------- */
.cta-band{position:relative;background:var(--grad-ink);border-radius:var(--r-xl);padding:clamp(2.5rem,6vw,4.5rem);overflow:hidden;text-align:center;color:#fff}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(216,31,38,.35),transparent 45%),radial-gradient(circle at 85% 80%,rgba(232,163,61,.28),transparent 45%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;max-width:20ch;margin-inline:auto;margin-bottom:1rem}
.cta-band p{color:var(--ink-300);max-width:52ch;margin-inline:auto;margin-bottom:2rem}
.cta-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ---------- SERVICE DETAIL ---------- */
.svc-layout{display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start}
@media(max-width:940px){.svc-layout{grid-template-columns:1fr}}
.svc-aside{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:1.4rem}
.aside-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;background:#fff}
.aside-media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-xs)}
.aside-media img{width:100%;height:auto;display:block}
.aside-card h4{margin-bottom:1rem}
.aside-nav a{display:block;padding:.55rem .8rem;border-radius:10px;font-size:.94rem;color:var(--ink-600);transition:all .2s}
.aside-nav a:hover{background:var(--ink-050);color:var(--accent)}
.prose h2{margin-top:2.6rem;margin-bottom:1rem}
.prose h3{margin-top:2rem;margin-bottom:.7rem}
.prose p{margin-bottom:1.1rem;color:var(--ink-600)}
.prose ul.bullets{display:grid;gap:.7rem;margin:1.2rem 0}
.prose ul.bullets li{display:flex;gap:.7rem;color:var(--ink-700)}
.prose ul.bullets .ck{color:var(--accent);flex-shrink:0}
.prose ul.bullets svg{width:20px;height:20px}
.feature-mini{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0}
@media(max-width:520px){.feature-mini{grid-template-columns:1fr}}
.feature-mini .fm{padding:1.2rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--ink-050)}
.feature-mini .fm h4{font-size:1rem;margin-bottom:.35rem;display:flex;gap:.5rem;align-items:center}
.feature-mini .fm h4 svg{width:18px;height:18px;color:var(--accent)}
.feature-mini .fm p{font-size:.9rem;margin:0}

/* ---------- BLOG / CARDS ---------- */
.post-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.post-thumb{aspect-ratio:16/9;background:var(--grad-ink);position:relative;overflow:hidden;display:grid;place-items:center}
.post-thumb svg{width:60%;height:60%;opacity:.9}
.post-body{padding:1.6rem;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;gap:.8rem;align-items:center;font-size:.8rem;color:var(--text-soft);margin-bottom:.7rem;font-family:var(--font-mono)}
.post-body h3{font-size:1.2rem;margin-bottom:.6rem}
.post-body p{font-size:.94rem;flex:1}

/* ---- Filter pills ---- */
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.2rem}
.filter-pill{font-family:var(--font-mono);font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--ink-600);background:transparent;border:1.5px solid var(--border);border-radius:var(--r-pill);padding:.55rem 1.2rem;cursor:pointer;transition:all .25s var(--ease)}
.filter-pill:hover{border-color:var(--accent);color:var(--accent)}
.filter-pill.active{color:#fff;background:var(--maroon);border-color:var(--maroon);box-shadow:0 0 0 3px rgba(166,32,31,.14)}

/* ---- Animated project cards ---- */
.work-grid{position:relative}
.work-card{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--grad-ink);border:1px solid rgba(255,255,255,.08);transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .3s var(--ease),max-height .3s var(--ease);isolation:isolate}
.work-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.work-card.is-hidden{display:none}
.work-card[data-constellation]{position:relative}
.constellation-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.work-card .work-tag{position:absolute;top:1.1rem;left:1.1rem;z-index:3;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--ink-200);background:rgba(10,14,26,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:.4rem .85rem}
.work-card .work-shot{position:relative;z-index:2;aspect-ratio:16/10;overflow:hidden}
.work-card .work-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s var(--ease)}
.work-card:hover .work-shot img{transform:scale(1.05)}
.work-card .work-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,0) 45%,rgba(10,14,26,.85) 100%)}
.work-card .work-body{position:relative;z-index:3;padding:1.5rem 1.6rem 1.7rem;margin-top:-3.2rem}
.work-card.no-logo .work-body{margin-top:1.1rem}
.work-card .work-logo{width:52px;height:52px;border-radius:14px;overflow:hidden;box-shadow:var(--sh-md);margin-bottom:.9rem;background:#fff}
.work-card .work-logo img{width:100%;height:100%;object-fit:contain}
.work-card h3{color:#fff;font-size:1.2rem;margin-bottom:.5rem}
.work-card p{color:var(--ink-300);font-size:.92rem;margin-bottom:1.1rem}
.work-card .work-links{display:flex;gap:.7rem;flex-wrap:wrap}
.work-card .work-link{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-weight:600;font-size:.84rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);padding:.5rem .95rem;transition:all .25s var(--ease)}
.work-card .work-link:hover{background:var(--maroon);border-color:var(--maroon)}
.work-card .work-link.url{font-family:var(--font-mono);font-size:.78rem}
.work-card .work-link .arrow{width:14px;height:14px;transition:transform .25s var(--ease)}
.work-card .work-link:hover .arrow{transform:translate(2px,-2px)}

/* ---------- PRICING ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
@media(max-width:860px){.price-grid{grid-template-columns:1fr}}
.price-card{display:flex;flex-direction:column}
.price-card.featured{border-color:var(--accent);box-shadow:var(--sh-md);position:relative}
.price-card.featured::before{content:"Most popular";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad-signal);color:#fff;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .9rem;border-radius:var(--r-pill)}
.price-card .amount{font-family:var(--font-display);font-weight:800;font-size:2.6rem;letter-spacing:-.03em;color:var(--ink-900);margin:.6rem 0}
.price-card .amount small{font-size:.9rem;font-weight:500;color:var(--text-soft)}
.price-card ul{display:grid;gap:.7rem;margin:1.4rem 0;flex:1}
.price-card ul li{display:flex;gap:.6rem;color:var(--ink-700);font-size:.94rem}
.price-card ul svg{width:18px;height:18px;color:var(--green);flex-shrink:0}

/* ---------- CONTACT ---------- */
.contact-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:860px){.contact-layout{grid-template-columns:1fr}}
.contact-info{display:grid;gap:1.2rem}
.ci-row{display:flex;gap:1rem;align-items:flex-start}
.ci-row .ci{width:46px;height:46px;border-radius:12px;background:var(--grad-signal-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.ci-row .ci svg{width:22px;height:22px}
.ci-row h4{font-size:1rem;margin-bottom:.2rem}
.ci-row a,.ci-row p{color:var(--ink-600);font-size:.95rem}
.ci-row a:hover{color:var(--accent)}
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--sh-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}

/* ---------- VALUE / WHY GRID ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:860px){.why-grid{grid-template-columns:1fr}}
.why-item{padding:1.8rem;border-radius:var(--r-lg);border:1px solid var(--border);background:#fff;transition:all .3s var(--ease)}
.why-item:hover{border-color:transparent;box-shadow:var(--sh-md);transform:translateY(-4px)}
.why-item .wi{width:48px;height:48px;border-radius:12px;background:var(--grad-signal);color:#fff;display:grid;place-items:center;margin-bottom:1.1rem}
.why-item .wi svg{width:24px;height:24px}

/* ---------- 404 ---------- */
.err-wrap{min-height:calc(100vh - var(--nav-h));display:grid;place-items:center;text-align:center;padding:4rem var(--gutter)}
.err-code{font-family:var(--font-display);font-weight:800;font-size:clamp(6rem,20vw,12rem);line-height:.9;letter-spacing:-.05em;background:var(--grad-signal);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- CAREERS ---------- */
.job-row{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;transition:all .3s var(--ease);flex-wrap:wrap}
.job-row:hover{border-color:var(--accent);box-shadow:var(--sh-sm);transform:translateX(4px)}
.job-row h4{margin-bottom:.35rem}
.job-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
/* ---------- SIMPLIFIED IMAGE-ONLY PORTFOLIO GRID ---------- */
.work-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:900px){.work-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.work-tiles{grid-template-columns:1fr}}
.work-tile{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;display:block;box-shadow:var(--sh-xs);background:var(--ink-050)}
.work-tile.is-hidden{display:none}
.work-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.work-tile:hover img{transform:scale(1.06)}
.work-tile .tile-tag{position:absolute;top:.8rem;left:.8rem;z-index:2;font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.02em;color:#fff;background:rgba(10,14,26,.6);backdrop-filter:blur(6px);border-radius:var(--r-pill);padding:.35rem .75rem}
.work-tile .tile-caption{position:absolute;inset:auto 0 0 0;z-index:2;padding:1rem 1.1rem;background:linear-gradient(180deg,rgba(10,14,26,0),rgba(10,14,26,.92));color:#fff;transform:translateY(100%);transition:transform .35s var(--ease);display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.work-tile:hover .tile-caption,.work-tile:focus-visible .tile-caption{transform:translateY(0)}
.work-tile .tile-caption b{font-family:var(--font-display);font-size:.92rem;line-height:1.3}
.work-tile .tile-caption span{font-size:.72rem;color:var(--ink-300);white-space:nowrap;flex-shrink:0}

/* ---------- ARTICLE PAGES ---------- */
.article-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.85rem;color:var(--text-soft);margin-top:1.2rem}
.article-meta .tag{margin-right:.2rem}
.article-hero-img{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);margin:2.4rem 0 0}
.article-hero-img img,.article-hero-img svg{width:100%;height:auto;display:block}
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start}
@media(max-width:940px){.article-layout{grid-template-columns:1fr}}
.article-aside{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:1.4rem}
.article-body p{font-size:1.04rem;line-height:1.75}
.article-body ul.bullets li{color:var(--ink-700)}
.article-callout{background:var(--ink-050);border-left:3px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;padding:1.2rem 1.4rem;margin:1.8rem 0;font-size:.98rem;color:var(--ink-700)}
.article-callout strong{color:var(--ink-900)}
.author-box{display:flex;align-items:center;gap:1rem;padding:1.5rem;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;margin-top:3rem}
.author-box .author-avatar{width:48px;height:48px;border-radius:50%;background:var(--grad-signal);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;flex-shrink:0}
.author-box b{display:block;font-family:var(--font-display);color:var(--ink-900)}
.author-box span{font-size:.86rem;color:var(--text-soft)}
.related-posts{margin-top:1rem}
.related-posts h2{margin-bottom:1.4rem}