/* ========================================================================== */
/* PHASE 4 — FINAL STATIC POLISH / RESPONSIVE QA                               */
/* ========================================================================== */

/* Keep the homepage banner intentionally framed instead of viewport-fluid. */
.home-v2 .v2-hero-inner{
  width:min(1240px,calc(100% - 64px));
  margin-inline:auto;
}
.home-v2 .v2-hero-lockup{overflow:visible}
.home-v2 .v2-hero-word{max-width:100%}

/* Header now follows the same visual frame as the site instead of feeling wider. */
.nav-shell{width:min(1320px,calc(100% - 32px))}
.site-header.is-scrolled .nav-shell{
  background:rgba(0,0,0,.88);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 18px 54px rgba(0,0,0,.2);
}

/* Font Awesome 7: consistent icon alignment + diagonal-arrow compatibility. */
i[class*="fa-"],span[class*="fa-"]{line-height:1;font-style:normal;flex:0 0 auto}
.icon-diagonal{display:inline-block;transform:rotate(-45deg);transform-origin:center;transition:transform .28s var(--ease)}
.nav-cta:hover .icon-diagonal{transform:translate(3px,-3px) rotate(-45deg)}
.v2-service:hover>.icon-diagonal{transform:translate(4px,-4px) rotate(-45deg)}
.round-link:hover .icon-diagonal{transform:translate(3px,-3px) rotate(-45deg)}
.work-v3-card:hover .icon-diagonal,.case:hover .icon-diagonal,.insight-feature:hover .icon-diagonal{transform:translate(3px,-3px) rotate(-45deg)}
.cap-arrow .icon-diagonal{transition:transform .28s var(--ease)}
.cap-row:hover .cap-arrow .icon-diagonal{transform:translate(2px,-2px) rotate(-45deg)}

/* Tighter, clearer interaction system. */
a,button,.faq-question,.cap-row{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.faq-question:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:4px;
}
.btn,.nav-cta,.round-link,.cap-arrow,.footer-social a,.menu-toggle{will-change:transform}
.btn i,.nav-cta i,.round-link i,.cap-arrow i,.footer-social i{pointer-events:none}

/* Mobile navigation polish. */
.menu-toggle{align-items:center;justify-content:center;font-size:18px;transition:background .25s,color .25s,transform .25s}
.menu-toggle:hover{background:var(--lime);transform:rotate(3deg)}
.mobile-menu{overflow:auto;padding-bottom:max(30px,env(safe-area-inset-bottom))}
.mobile-menu>a{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mobile-menu>a:after{content:"\f061";font-family:"Font Awesome 7 Free";font-weight:900;font-size:18px;opacity:.45;transform:rotate(-45deg)}
.mobile-menu>a:hover:after{opacity:1}
.mobile-meta{padding-top:30px}

/* Footer polish and cleaner vertical rhythm. */
.footer-top{align-items:flex-start}
.footer-col a{position:relative;width:max-content;max-width:100%}
.footer-col a:after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--lime);transition:right .25s var(--ease)}
.footer-col a:hover:after{right:0}
.footer-social a{transition:background .25s,color .25s,border-color .25s,transform .25s}
.footer-social a:hover{background:var(--lime);color:var(--black);border-color:var(--lime);transform:translateY(-2px)}

/* Buttons retain icons and labels cleanly at small widths. */
.btn,.nav-cta,.text-link,.round-link{white-space:nowrap}
.btn i,.nav-cta i,.text-link i,.round-link i{display:inline-block}

/* FAQ interaction state. */
.faq-question i{transition:transform .3s var(--ease)}
.faq-item.is-open .faq-question i{transform:rotate(45deg)}

/* Form control polish. */
.form-v3 input,.form-v3 textarea,.form-v3 select{transition:border-color .25s,background .25s,box-shadow .25s}
.form-v3 input:focus,.form-v3 textarea:focus,.form-v3 select:focus{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}

/* Prevent oversized decorative mockups from forcing horizontal overflow. */
.case-stage,.work-v3-stage,.case-showcase{isolation:isolate}
.case-stage>* ,.work-v3-stage>*{max-width:none}

@media (max-width:1100px){
  .home-v2 .v2-hero-inner{width:min(100% - 48px,1040px)}
  .nav-shell{width:calc(100% - 28px)}
  .footer-top{gap:42px}
  .footer-cols{gap:42px}
}

@media (max-width:980px){
  .home-v2 .v2-hero-inner{width:calc(100% - 40px)}
  .nav-shell{width:calc(100% - 24px)}
  .footer-top{display:block}
  .footer-cols{margin-top:52px;gap:46px}
  .footer-brand{display:inline-block}
}

@media (max-width:640px){
  :root{--container:min(100% - 28px,1380px)}
  .home-v2 .v2-hero-inner{width:calc(100% - 28px)}
  .nav-shell{width:calc(100% - 16px);padding-left:16px}
  .brand{font-size:25px}
  .menu-toggle{width:48px;height:48px}
  .mobile-menu{padding-left:18px;padding-right:18px}
  .mobile-menu a{font-size:clamp(42px,12vw,68px)}
  .mobile-meta{display:block;font-size:10px;line-height:1.55}
  .mobile-meta span{display:block}
  .mobile-meta span+span{margin-top:12px}
  .v2-hero-meta{padding-bottom:14px}
  .v2-hero-bottom{padding-top:20px}
  .footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:38px 24px}
  .footer-col:last-child{grid-column:1/-1}
  .footer-bottom{align-items:flex-start;flex-wrap:wrap}
  .footer-social{order:3;width:100%;margin-top:6px}
  .btn{min-height:54px;padding-inline:20px}
}

@media (max-width:420px){
  .home-v2 .v2-hero-inner{width:calc(100% - 24px)}
  .v2-hero-actions{gap:18px}
  .round-link{width:102px;height:102px}
  .footer-cols{grid-template-columns:1fr}
  .footer-col:last-child{grid-column:auto}
}

/* ========================================================================== */
/* PHASE 5 — VISUAL REFINEMENT / MOTION TUNING / FINAL STATIC QA              */
/* ========================================================================== */

/* Homepage hero: remove the unexplained full-height colour rail and keep the
   palette expressed through intentional content, glow and interaction states. */
.v2-color-rail,.v2-hero-index{display:none!important}
.home-v2{--home-frame:1240px}
.home-v2 .v2-hero{
  min-height:100svh;
  padding:124px 0 38px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.home-v2 .v2-hero:after{
  content:"";
  position:absolute;
  left:50%;bottom:0;
  width:min(var(--home-frame),calc(100% - 64px));
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,var(--violet) 0 22%,var(--lime) 22% 40%,rgba(255,255,255,.78) 40% 48%,transparent 48% 100%);
  opacity:.72;
  z-index:4;
}
.home-v2 .v2-hero-inner{
  width:min(var(--home-frame),calc(100% - 64px));
  min-height:calc(100svh - 162px);
  margin-inline:auto;
}
.home-v2 .v2-hero-meta{
  position:relative;
  min-height:31px;
  align-items:flex-start;
  border-bottom-color:rgba(255,255,255,.22);
  color:#8f8f8f;
}
.v2-hero-status{display:inline-flex;align-items:center;gap:9px;color:#b8b8b8}
.v2-hero-status i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(198,255,51,.08)}
.home-v2 .v2-hero-lockup{margin:auto 0 42px;min-height:0;align-items:flex-end}
.home-v2 .v2-hero-word{
  font-size:clamp(110px,22.1vw,340px);
  line-height:.66;
  letter-spacing:-.094em;
}
.home-v2 .v2-hero-dot{font-size:clamp(96px,16.5vw,250px);line-height:.58}
.home-v2 .v2-hero-bottom{
  border-top-color:rgba(255,255,255,.22);
  padding-top:26px;
}
.home-v2 .v2-hero-bottom>p{max-width:660px;color:#d0d0d0}
.home-v2 .v2-hero-grid{opacity:.22;background-size:82px 82px}
.home-v2 .v2-hero-glow{right:-13vw;top:-18vw;opacity:.88}

/* Section rhythm is slightly calmer and more editorial without becoming flat. */
.home-v2 .manifesto,
.home-v2 .v2-services,
.home-v2 .v2-work,
.home-v2 .v2-process,
.home-v2 .v2-proof,
.home-v2 .v2-testimonials{padding:clamp(96px,9vw,144px) 0}
.home-v2 .section-rule{padding-bottom:17px}
.home-v2 .v2-services-head,.home-v2 .v2-work-head{padding:58px 0 60px}
.home-v2 .manifesto-layout{padding-top:54px}
.home-v2 .manifesto-foot{margin-top:44px}

/* Service rows: make the icon/action affordance visible before hover as well. */
.home-v2 .v2-service{grid-template-columns:64px minmax(260px,1fr) minmax(250px,.52fr) 46px;padding:25px 0}
.home-v2 .v2-service>i{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  font-size:13px;
  transition:transform .3s var(--ease),border-color .25s,background .25s,color .25s;
}
.home-v2 .v2-service:hover>i{border-color:currentColor;background:rgba(255,255,255,.12)}
.home-v2 .v2-service[data-accent="white"]:hover>i,
.home-v2 .v2-service[data-accent="lime"]:hover>i{background:var(--black);color:var(--white);border-color:var(--black)}
.home-v2 .v2-service[data-accent="violet"]:hover>i{background:var(--white);color:var(--black);border-color:var(--white)}
.home-v2 .v2-service:hover{padding-left:18px;padding-right:18px}

/* Project cards: give every mockup a deliberate stage instead of floating loosely. */
.home-v2 .case{
  min-height:700px;
  border-radius:26px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.home-v2 .case--lime{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.home-v2 .case:hover{transform:translateY(-4px)}
.home-v2 .case--violet:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 28px 80px rgba(125,57,235,.2)}
.home-v2 .case--lime:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 28px 80px rgba(198,255,51,.13)}
.home-v2 .case--black:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 28px 80px rgba(0,0,0,.36)}
.home-v2 .case-stage{
  min-height:520px;
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
}
.home-v2 .case--lime .case-stage{background:rgba(0,0,0,.055);border-color:rgba(0,0,0,.12)}
.home-v2 .case--black .case-stage{background:linear-gradient(145deg,#111,#050505);border-color:rgba(255,255,255,.12)}
.home-v2 .browser,.home-v2 .flow-ui{transition:transform .45s var(--ease),filter .45s var(--ease)}
.home-v2 .case:hover .browser,.home-v2 .case:hover .flow-ui{filter:saturate(1.06) contrast(1.02)}
.home-v2 .case-copy h3{margin-top:18px}
.home-v2 .case-foot{opacity:.9}

/* Process gets a clearer reading path with a subtle active state on hover. */
.home-v2 .process-v2-item{position:relative;transition:padding .3s var(--ease),background .3s var(--ease)}
.home-v2 .process-v2-item:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime);
  transform:scaleY(0);transform-origin:center;transition:transform .3s var(--ease)
}
.home-v2 .process-v2-item:hover{padding-left:18px;background:rgba(255,255,255,.025)}
.home-v2 .process-v2-item:hover:before{transform:scaleY(1)}
.home-v2 .process-v2-item h3{max-width:690px}

/* CTA: a little more breathing room and a cleaner orbit treatment. */
.home-v2 .v2-cta{padding:30px 0 44px}
.home-v2 .v2-cta-panel{min-height:620px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.home-v2 .cta-orbit{opacity:.82}
.home-v2 .cta-orbit span{box-shadow:0 0 72px rgba(198,255,51,.28)}




/* General button/icon finish. */
.btn,.nav-cta,.round-link{transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s}
.btn:hover{box-shadow:0 10px 28px rgba(0,0,0,.12)}
.btn--white:hover{background:var(--lime);border-color:var(--lime)}
.nav-cta:hover{background:var(--lime)}
.text-link{transition:color .25s,border-color .25s}
.text-link:hover{border-color:currentColor}

/* Motion restraint: reveal elements should not begin too far away. */
.reveal{will-change:transform,opacity}

@media (max-width:1100px){
  .home-v2 .v2-hero-inner{width:min(1040px,calc(100% - 48px));min-height:calc(100svh - 150px)}
  .home-v2 .v2-hero:after{width:min(1040px,calc(100% - 48px))}
  .home-v2 .v2-service{grid-template-columns:54px minmax(220px,1fr) 42px}
  .home-v2 .v2-service p{display:none}
  .home-v2 .case-stage{min-height:490px}
}
@media (max-width:980px){
  .home-v2 .v2-hero{padding-top:112px}
  .home-v2 .v2-hero-inner{width:calc(100% - 40px);min-height:calc(100svh - 145px)}
  .home-v2 .v2-hero:after{width:calc(100% - 40px)}
  .home-v2 .v2-hero-meta span:nth-child(2){display:none}
  .home-v2 .v2-hero-word{font-size:20.6vw}
  .home-v2 .case-stage{min-height:470px}
  
}
@media (max-width:640px){
  .home-v2 .v2-hero{padding:96px 0 24px;min-height:92svh}
  .home-v2 .v2-hero-inner{width:calc(100% - 28px);min-height:calc(92svh - 120px)}
  .home-v2 .v2-hero:after{width:calc(100% - 28px);height:1px}
  .home-v2 .v2-hero-meta{min-height:25px;font-size:9px}
  .home-v2 .v2-hero-status{gap:7px}
  .home-v2 .v2-hero-status i{width:6px;height:6px}
  .home-v2 .v2-hero-lockup{margin:auto 0 28px}
  .home-v2 .v2-hero-word{font-size:20.1vw}
  .home-v2 .v2-hero-dot{font-size:18.8vw}
  .home-v2 .v2-hero-bottom{padding-top:20px}
  .home-v2 .v2-service{grid-template-columns:38px 1fr 38px;gap:10px;padding:21px 0}
  .home-v2 .v2-service>i{width:34px;height:34px;font-size:11px}
  .home-v2 .v2-service:hover{padding-left:8px;padding-right:8px}
  .home-v2 .case{min-height:690px}
  .home-v2 .case-stage{min-height:365px;border-radius:15px}
  .home-v2 .process-v2-item:hover{padding-left:10px}
  
}
@media (max-width:420px){
  .home-v2 .v2-hero-inner{width:calc(100% - 24px)}
  .home-v2 .v2-hero:after{width:calc(100% - 24px)}
  .home-v2 .v2-hero-status{max-width:150px;justify-content:flex-end;text-align:right}
  .home-v2 .case-stage{min-height:340px}
}

/* =========================================================
   PHASE 6 — INNER PAGE INTERACTION + PROJECT ARCHIVE PARITY
   ========================================================= */

/* Hero chip is a real control now, not a decorative div. */
.inner-hero-chip{
  appearance:none;-webkit-appearance:none;padding:0;background:transparent;color:inherit;
  cursor:pointer;font:inherit;outline:0;overflow:hidden;
  transition:transform .35s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.inner-hero-chip:before{transition:transform .4s var(--ease),background .3s var(--ease)}
.inner-hero-chip i{transition:transform .35s var(--ease)}
.inner-hero-chip:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.7)}
.inner-hero-chip:hover:before{transform:scale(.9);background:var(--lime)}
.inner-hero-chip:hover i{transform:translateY(7px);color:var(--black)}
.inner-hero-chip:focus-visible{box-shadow:0 0 0 3px rgba(198,255,51,.32)}



/* Project filters are progressive-enhancement links styled as pills; navigation still works without JS. */
.work-filter{align-items:center}
.work-filter button,.work-filter a{
  appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--white);
  border-radius:999px;padding:11px 16px;font:700 11px var(--font-ui);text-transform:uppercase;
  letter-spacing:.08em;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.work-filter button:hover,.work-filter a:hover{border-color:rgba(255,255,255,.55);transform:translateY(-1px)}
.work-filter button.is-active,.work-filter a.is-active{background:var(--white);color:var(--black);border-color:var(--white)}
.work-filter button:focus-visible,.work-filter a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.work-filter a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.project-filter-empty{padding:42px 0 0;color:#777;font-size:14px}

/* Project archive now uses the exact same card language/polish as homepage. */
.project-archive-v6 .project-case-stack{gap:26px}
.project-archive-v6 .case{
  min-height:700px;border-radius:26px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .3s var(--ease);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.project-archive-v6 .case--lime{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.project-archive-v6 .case:hover{transform:translateY(-4px)}
.project-archive-v6 .case--violet:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 28px 80px rgba(125,57,235,.2)}
.project-archive-v6 .case--lime:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 28px 80px rgba(198,255,51,.13)}
.project-archive-v6 .case--black:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 28px 80px rgba(0,0,0,.36)}
.project-archive-v6 .case-stage{
  min-height:520px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
}
.project-archive-v6 .case--lime .case-stage{background:rgba(0,0,0,.055);border-color:rgba(0,0,0,.12)}
.project-archive-v6 .case--black .case-stage{background:linear-gradient(145deg,#111,#050505);border-color:rgba(255,255,255,.12)}
.project-archive-v6 .browser,.project-archive-v6 .flow-ui,.project-archive-v6 .brand-board{transition:transform .45s var(--ease),filter .45s var(--ease)}
.project-archive-v6 .case:hover .browser,.project-archive-v6 .case:hover .flow-ui,.project-archive-v6 .case:hover .brand-board{filter:saturate(1.06) contrast(1.02)}
.project-archive-v6 .case-copy h3{margin-top:18px}
.project-archive-v6 .case-foot{opacity:.9}
.project-archive-v6 [data-project-card][hidden]{display:none!important}

/* Extra project mockups for archive categories. */
.case-stage--brand{display:grid;place-items:center}
.brand-board{
  width:88%;height:74%;border-radius:18px;background:var(--surface-dark);color:var(--white);padding:clamp(22px,3vw,42px);
  display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 34px 80px rgba(0,0,0,.28);transform:rotate(-2deg)
}
.brand-board-kicker,.brand-board small{font:700 9px var(--font-ui);text-transform:uppercase;letter-spacing:.13em;color:#999}
.brand-board strong{font:800 clamp(72px,10vw,150px)/.8 var(--font-display);letter-spacing:-.095em}
.brand-board strong span{color:var(--lime)}
.brand-swatches{display:flex;height:34px;border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.brand-swatches i{flex:1}.brand-swatches i:nth-child(1){background:var(--black)}.brand-swatches i:nth-child(2){background:var(--violet)}.brand-swatches i:nth-child(3){background:var(--lime)}.brand-swatches i:nth-child(4){background:var(--white)}
.browser--atlas{transform:rotate(2deg);background:#f7f4eb}
.atlas-ui{height:calc(100% - 42px);padding:clamp(24px,4vw,50px);background:#f7f4eb;color:#111;display:flex;flex-direction:column;justify-content:space-between}
.atlas-ui>small{font:700 9px var(--font-ui);letter-spacing:.13em}
.atlas-ui>strong{font:650 clamp(38px,5vw,74px)/.9 var(--font-display);letter-spacing:-.065em}
.atlas-ui>div{display:flex;flex-wrap:wrap;gap:7px}.atlas-ui>div span{border:1px solid #111;border-radius:999px;padding:8px 11px;font:700 8px var(--font-ui);text-transform:uppercase;letter-spacing:.08em}

@media(max-width:1100px){
  .project-archive-v6 .case-stage{min-height:490px}
}
@media(max-width:980px){
  .project-archive-v6 .case-stage{min-height:470px}
  .inner-title-wrap{display:flex;align-items:flex-end}
  .inner-hero-chip{display:flex;width:88px;height:88px;margin-left:auto}
  .inner-hero-chip:before{inset:9px}.inner-hero-chip i{font-size:20px}
}
@media(max-width:640px){
  .work-filter{gap:7px;margin:34px 0 44px}
  .work-filter button,.work-filter a{padding:9px 12px;font-size:9px}
  .project-archive-v6 .case{min-height:690px}
  .project-archive-v6 .case-stage{min-height:365px;border-radius:15px}
  .brand-board{width:110%;height:72%;padding:20px}.brand-board strong{font-size:23vw}
  .inner-title-wrap{display:block}
  .inner-hero-chip{width:70px;height:70px;margin:24px 0 0}
  .inner-hero-chip:before{inset:7px}
}
@media(max-width:420px){
  .project-archive-v6 .case-stage{min-height:340px}
}

/* ========================================================================== */
/* PHASE 7 — DESIGN SYSTEM PARITY + FUNCTIONALITY QA                          */
/* ========================================================================== */

/* Keyboard access without adding permanent visual clutter. */
.skip-link{position:fixed;left:18px;top:14px;z-index:12000;background:var(--lime);color:var(--black);padding:11px 15px;border-radius:999px;font:700 11px var(--font-ui);text-transform:uppercase;letter-spacing:.08em;transform:translateY(-180%);transition:transform .2s}
.skip-link:focus{transform:translateY(0);outline:2px solid var(--black);outline-offset:2px}

/* Footer no longer contains dead # links. Social icons are clearly dormant until URLs exist. */
.footer-social .social-placeholder{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:#777;cursor:default}
.footer-end{display:flex;align-items:center;gap:14px}
.footer-back-top{appearance:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--white);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.footer-back-top:hover{background:var(--lime);color:var(--black);border-color:var(--lime);transform:translateY(-2px)}
.footer-back-top:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.mobile-menu a.is-active{color:var(--lime)}

/* Detail heroes use the same purposeful circular scroll control as archive heroes. */
.case-v3-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:34px}
.detail-hero-chip{appearance:none;width:118px;height:118px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.38);background:rgba(0,0,0,.12);color:var(--white);display:grid;place-items:center;font-size:24px;cursor:pointer;position:relative;overflow:hidden;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s}
.detail-hero-chip:before{content:"";position:absolute;inset:11px;border-radius:50%;background:rgba(0,0,0,.26);transition:transform .35s var(--ease),background .35s}
.detail-hero-chip i{position:relative;z-index:1;transition:transform .3s var(--ease)}
.detail-hero-chip:hover{transform:translateY(-4px);border-color:var(--lime)}
.detail-hero-chip:hover:before{transform:scale(.9);background:var(--lime)}
.detail-hero-chip:hover i{transform:translateY(6px);color:var(--black)}
.detail-hero-chip:focus-visible{outline:2px solid var(--lime);outline-offset:4px}

/* Archive project cards and case detail now share the exact same visual mockup language. */
.case-showcase-stage{height:clamp(460px,52vw,720px);border-radius:26px;background:#0b0b0b;display:grid;place-items:center;overflow:hidden;position:relative;border:1px solid rgba(0,0,0,.12);box-shadow:0 34px 90px rgba(0,0,0,.12)}
.case-showcase-stage>.browser{width:min(1040px,88%);height:76%}
.case-showcase-stage>.flow-ui{width:min(1040px,88%);height:72%;background-color:var(--surface-dark)}
.case-showcase-stage>.brand-board{width:min(1000px,84%);height:72%}
.project-detail-v7[data-project-theme="lime"] .case-hero-v3{background:var(--lime);color:var(--black)}
.project-detail-v7 main[data-project-theme="lime"] .case-hero-v3{background:var(--lime);color:var(--black)}
[data-project-detail][data-project-theme="lime"] .case-hero-v3{background:var(--lime);color:var(--black)}
[data-project-detail][data-project-theme="black"] .case-hero-v3{background:#090909;color:var(--white)}
[data-project-detail][data-project-theme="black"] .case-hero-v3:after{background:var(--violet)}
[data-project-detail][data-project-theme="lime"] .case-v3-meta{border-bottom-color:rgba(0,0,0,.25)}
[data-project-detail][data-project-theme="lime"] .case-v3-summary p{color:#0009}
[data-project-detail][data-project-theme="lime"] .detail-hero-chip{color:var(--black);border-color:rgba(0,0,0,.35)}

.next-project-v7,.next-article-v7{padding:18px 0 28px;background:#050505}
.next-project-link{min-height:190px;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 0;transition:padding .35s var(--ease),color .3s}
.next-project-link small{display:block;font:700 10px var(--font-ui);text-transform:uppercase;letter-spacing:.12em;color:#777;margin-bottom:12px}
.next-project-link strong{font:650 clamp(38px,5vw,72px)/.95 var(--font-display);letter-spacing:-.055em}
.next-project-link>i{width:58px;height:58px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:grid;place-items:center}
.next-project-link:hover{padding-left:16px;padding-right:16px;color:var(--lime)}

/* Inner service / pricing / about cards now have the same motion and hover finish as homepage cards. */
.service-deliverable{position:relative;overflow:hidden;transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s}
.service-deliverable:before{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.service-deliverable:hover{transform:translateY(-4px);background:#f4f4f4}
.service-deliverable:hover:before{transform:scaleX(1)}
.service-deliverable i{width:50px;height:50px;border-radius:50%;border:1px solid rgba(0,0,0,.2);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.service-deliverable:hover i{background:var(--black);color:var(--white);border-color:var(--black)}
.service-step{transition:padding .3s var(--ease),background .3s}
.service-step:hover{padding-left:16px;padding-right:16px;background:rgba(255,255,255,.025)}

.engagement-card{transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.engagement-card:hover{transform:translateY(-5px);box-shadow:0 24px 70px rgba(0,0,0,.14)}
.engagement-card .btn{margin-top:auto}
.about-principle{transition:padding .35s var(--ease),background .35s,color .35s}
.about-principle:hover{padding-left:20px;padding-right:20px;background:rgba(255,255,255,.035)}
.inner-section--white .about-principle:hover,.inner-section--lime .about-principle:hover{background:rgba(0,0,0,.04)}

/* Insights: real filters + project-card style action cue. */
.insight-filter-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:46px 0 48px}
.insight-filter{display:flex;flex-wrap:wrap;gap:8px}
.insight-filter button{appearance:none;border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--white);border-radius:999px;padding:11px 16px;font:700 11px var(--font-ui);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.insight-filter button:hover{border-color:rgba(255,255,255,.55);transform:translateY(-1px)}
.insight-filter button.is-active{background:var(--white);color:var(--black);border-color:var(--white)}
.insight-filter button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.insight-filter-count{font:700 10px var(--font-ui);text-transform:uppercase;letter-spacing:.1em;color:#777;white-space:nowrap}
.insight-card{position:relative;padding-bottom:62px;transition:transform .35s var(--ease),border-color .3s}
.insight-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.5)}
.insight-art{transition:transform .45s var(--ease),filter .45s var(--ease)}
.insight-card:hover .insight-art{transform:scale(.985);filter:saturate(1.08)}
.insight-card-arrow{position:absolute;left:0;bottom:0;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s,transform .3s}
.insight-card:hover .insight-card-arrow{background:var(--lime);color:var(--black);border-color:var(--lime);transform:translateY(-2px)}
[data-insight-card][hidden]{display:none!important}

/* FAQ: clickable area reads as interactive and exposes state clearly. */
.faq-question{transition:padding .3s var(--ease),color .3s}
.faq-question:hover{padding-left:12px;padding-right:12px;color:var(--lime)}
.faq-question[aria-expanded="true"]{color:var(--lime)}

/* Forms: clearer completion and disabled states while preserving static behavior. */
.form-v3 label{display:block}
.form-v3 button[disabled]{opacity:.7;cursor:wait;transform:none!important}
.form-v3.is-submitted{pointer-events:none;opacity:.82;transition:opacity .3s}
.budget-chip:has(input:focus-visible) span{outline:2px solid var(--lime);outline-offset:3px}

@media(max-width:980px){
  .case-v3-title-row{align-items:flex-end}
  .detail-hero-chip{width:88px;height:88px;font-size:20px}
  .case-showcase-stage{height:560px;border-radius:22px}
  .case-showcase-stage>.browser,.case-showcase-stage>.flow-ui{width:94%}
  .footer-end{width:100%;justify-content:space-between}
}
@media(max-width:640px){
  .case-v3-title-row{display:block}
  .detail-hero-chip{width:70px;height:70px;margin-top:26px}
  .case-showcase-stage{height:390px;border-radius:18px}
  .case-showcase-stage>.browser{width:118%;height:76%}
  .case-showcase-stage>.flow-ui{width:122%;height:76%;transform:scale(.76)}
  .case-showcase-stage>.brand-board{width:108%;height:72%}
  .next-project-link{min-height:150px}.next-project-link>i{width:50px;height:50px}
  .insight-filter-wrap{display:block;margin:34px 0 42px}.insight-filter{gap:7px}.insight-filter button{padding:9px 12px;font-size:9px}.insight-filter-count{display:block;margin-top:14px}
  .service-deliverable:hover{transform:none}
  .footer-end{align-items:center}.footer-legal{max-width:180px;line-height:1.5}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none!important}
}

/* Service archive mirrors the homepage accent-contrast behavior. */
.cap-row[data-accent="violet"]:hover{color:var(--white)}
.cap-row[data-accent="violet"]:hover .cap-no,.cap-row[data-accent="violet"]:hover .cap-desc{color:rgba(255,255,255,.72)}
.cap-row[data-accent="white"]:hover{color:var(--black)}
.article-v3-body [id]{scroll-margin-top:120px}
.next-project-link:hover .icon-diagonal{transform:translate(3px,-3px) rotate(-45deg)}


/* ========================================================================== */
/* PHASE 8 — VISUAL LOCK / RESPONSIVE + INTERACTION QA                         */
/* ========================================================================== */

/* One shared visual frame across Home and every inner page. */
:root{--container:min(1240px,calc(100% - 48px))}
.container,.inner-shell{width:var(--container)}
.nav-shell{width:min(1288px,calc(100% - 32px))}
.inner-v3 main{overflow-x:clip;overflow-y:visible}
section[id],[id].inner-section,.article-v3-body [id]{scroll-margin-top:110px}

/* Typography lock: cleaner wrapping and no accidental viewport-edge collisions. */
.v2-hero-word{margin-block:0}
.display,.v2-section-title,.inner-title,.inner-section-head h2,.service-v3-lockup h1,.case-v3-title,.about-v3-statement,.proof-statement,.quote-v2 blockquote{ text-wrap:balance }
.lede,.inner-hero-top p,.inner-section-head p,.case-v3-summary p,.article-v3-body p,.service-intro-body>p{ text-wrap:pretty }
.inner-title,.service-v3-lockup h1,.case-v3-title{max-width:100%;overflow-wrap:normal;word-break:normal}
.inner-title--article{max-width:1120px}

/* Header/footer parity and more predictable navigation behavior. */
.site-header{transition:transform .35s var(--ease)}
.site-header:focus-within{transform:translateY(0)!important}
.nav-shell{min-height:70px}
.site-header .nav-links a{position:relative;padding:8px 0}
.site-header .nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--lime);transition:right .25s var(--ease)}
.site-header .nav-links a:hover:after,.site-header .nav-links a.is-active:after{right:0}
.nav-cta,.menu-toggle,.footer-back-top{min-width:44px;min-height:44px}
.site-footer{overflow:hidden}
.footer-bottom{gap:24px}

/* Inner heroes now use the same controlled frame/rhythm as the homepage banner. */
.inner-hero{min-height:min(820px,84svh);padding-top:148px;padding-bottom:50px}
.inner-hero-top{margin-bottom:clamp(46px,8vh,88px)}
.inner-title-wrap{min-width:0}
.inner-hero-chip{width:118px;height:118px}
.inner-hero-chip:before{inset:11px}
.inner-hero-chip i{font-size:23px}



/* Section rhythm: same spacing grammar from archive to detail pages. */
.inner-section{padding:clamp(82px,8vw,128px) 0}
.inner-section-head{margin:42px 0 62px}
.inner-section-head h2{max-width:820px}
.inner-section-head p{max-width:440px}
.inner-cta{padding:22px 0 34px}
.inner-cta-box{min-height:500px}

/* Home/archive project cards are now dimensionally identical, not just visually similar. */
.home-v2 .case,.project-archive-v6 .case{min-height:680px;border-radius:24px}
.home-v2 .case-stage,.project-archive-v6 .case-stage{min-height:500px;border-radius:18px}
.home-v2 .case-copy,.project-archive-v6 .case-copy{min-width:0}
.home-v2 .case-copy h3,.project-archive-v6 .case-copy h3{max-width:760px;text-wrap:balance}
.home-v2 .case-foot,.project-archive-v6 .case-foot{min-height:32px;align-items:center}
.case-stage--brand .brand-board{max-width:980px}

/* Filters: usable on desktop, tablet and narrow phones without tiny wrapped pills. */
.work-filter,.insight-filter{scrollbar-width:none}
.work-filter::-webkit-scrollbar,.insight-filter::-webkit-scrollbar{display:none}
.work-filter button,.work-filter a,.insight-filter button{min-height:40px}
.work-filter button.is-active,.work-filter a.is-active,.insight-filter button.is-active{box-shadow:0 0 0 1px rgba(255,255,255,.08)}

/* Service/archive/detail parity. */
.cap-row{min-height:104px}
.cap-name{min-width:0;text-wrap:balance}
.cap-arrow{width:46px;height:46px}
.service-v3-hero{min-height:min(790px,78svh);padding-top:148px}
.service-v3-lockup{min-width:0}
.service-v3-lockup h1{font-size:clamp(56px,8.4vw,132px);line-height:.86;text-wrap:balance}
.service-deliverable{min-height:280px}
.service-deliverable h3{text-wrap:balance}
.service-step div{min-width:0}
.service-step h3{text-wrap:balance}

/* Work/detail mockups: keep UI inside the stage at every breakpoint. */
.case-showcase-stage{height:clamp(450px,50vw,680px)}
.case-showcase-stage>.browser,.case-showcase-stage>.flow-ui,.case-showcase-stage>.brand-board{max-width:1040px}
.work-screen-main,.dash-main{min-width:0}

/* Pricing, article and contact cards get the same readable vertical rhythm. */
.engagement-card{min-width:0}
.engagement-card h3,.contact-v3-copy h2,.faq-v3-side h2{text-wrap:balance}
.article-v3-body{max-width:760px}
.article-v3-body h2{text-wrap:balance}
.article-v3-callout{border-radius:18px}
.form-v3 input,.form-v3 textarea,.form-v3 select{width:100%;min-width:0}
.form-v3 select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px}
.form-actions-v3{gap:24px}
.form-actions-v3 small{max-width:520px;line-height:1.55}

/* Pointer hover effects only where hover actually exists; avoids sticky mobile hover states. */
@media (hover:hover) and (pointer:fine){
  .home-v2 .case:hover,.project-archive-v6 .case:hover{transform:translateY(-4px)}
  .service-deliverable:hover,.engagement-card:hover,.insight-card:hover{transform:translateY(-4px)}
}

@media(max-width:1100px){
  :root{--container:min(100% - 40px,1240px)}
  .nav-shell{width:calc(100% - 24px)}
  .inner-section-head{gap:46px}
  .home-v2 .case,.project-archive-v6 .case{min-height:650px}
  .home-v2 .case-stage,.project-archive-v6 .case-stage{min-height:470px}
  .service-v3-lockup h1{font-size:clamp(54px,9vw,112px)}
}

@media(max-width:860px){
  :root{--container:calc(100% - 36px)}
  .inner-hero{min-height:70svh;padding-top:128px;padding-bottom:38px}
  .inner-hero-top{margin-bottom:54px}
  .inner-title-wrap{display:flex;align-items:flex-end;gap:22px}
  .inner-hero-chip{display:flex;width:82px;height:82px;margin-left:auto}
  .inner-hero-chip:before{inset:8px}
  .inner-hero-chip i{font-size:18px}
  .inner-section-head{display:block}
  .inner-section-head p{margin-top:22px}
  .home-v2 .case,.project-archive-v6 .case{min-height:620px}
  .home-v2 .case-stage,.project-archive-v6 .case-stage{min-height:440px}
  .service-v3-hero{min-height:68svh;padding-top:126px}
  .service-v3-lockup h1{font-size:clamp(50px,11vw,90px)}
}

@media(max-width:640px){
  :root{--container:calc(100% - 28px)}
  .nav-shell{width:calc(100% - 20px)}
  .inner-hero{min-height:64svh;padding:112px 0 28px}
  .inner-hero-top{margin-bottom:42px}
  .inner-hero-top p{font-size:14px;line-height:1.65}
  .inner-title-wrap{display:block}
  .inner-title{font-size:clamp(50px,15vw,78px);line-height:.86}
  .inner-title--sm{font-size:clamp(46px,13vw,70px)}
  .inner-title--article{font-size:clamp(42px,12vw,66px);line-height:.94}
  .inner-hero-chip{width:64px;height:64px;margin:22px 0 0}
  .inner-hero-chip:before{inset:6px}
  .inner-section{padding:68px 0}
  .inner-section-head{margin:32px 0 44px}
  .inner-section-head h2{font-size:clamp(38px,11vw,56px)}
  .work-filter,.insight-filter{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;padding:2px 2px 8px;margin-left:-2px;margin-right:-14px}
  .work-filter button,.work-filter a,.insight-filter button{flex:0 0 auto;min-height:38px;padding:9px 13px;font-size:9px}
  .home-v2 .case,.project-archive-v6 .case{min-height:640px;border-radius:20px}
  .home-v2 .case-stage,.project-archive-v6 .case-stage{min-height:350px;border-radius:15px}
  .case-copy h3{overflow-wrap:anywhere}
  .service-v3-hero{padding:112px 0 30px;min-height:64svh}
  .service-v3-lockup h1{font-size:clamp(46px,12.5vw,68px);line-height:.9;overflow-wrap:anywhere}
  .service-v3-icon{width:78px;height:78px}
  .service-deliverable{min-height:210px}
  .case-showcase-stage{height:370px}
  .case-showcase-stage>.browser{width:114%}
  .case-showcase-stage>.flow-ui{width:118%}
  .case-showcase-stage>.brand-board{width:104%}
  .form-actions-v3{display:flex;flex-direction:column;align-items:flex-start}
  .form-actions-v3 .btn{width:100%}
  .footer-bottom{gap:18px}
}

@media(max-width:420px){
  :root{--container:calc(100% - 24px)}
  .inner-title{font-size:clamp(48px,14.5vw,66px)}
  .inner-title--article{font-size:clamp(40px,11.5vw,58px)}
  .home-v2 .case,.project-archive-v6 .case{min-height:610px}
  .home-v2 .case-stage,.project-archive-v6 .case-stage{min-height:320px}
  .case-foot{grid-template-columns:minmax(0,1fr) auto 24px;gap:8px}
  .case-foot span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .detail-hero-chip{width:62px;height:62px}
  .engagement-card{min-height:460px}
}

/* v12.11.2 — keep the approved project-filter UI while supporting server-side category archives. */
.navigation.pagination{margin-top:56px}.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.page-numbers{min-width:42px;height:42px;padding:0 13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--white);font:700 11px var(--font-ui);letter-spacing:.04em}.page-numbers.current,.page-numbers:hover{background:var(--white);color:var(--black);border-color:var(--white)}.page-numbers:focus-visible{outline:2px solid var(--lime);outline-offset:3px}