/* Source: /css/styles.css */
:root{--ink:#10131e;--muted:#657083;--line:#e5e8f0;--paper:#fff;--soft:#f7f8fc;--blue:#1d35ff;--violet:#7048ff;--pink:#e243c4;--coral:#ff705e;--cyan:#18c8d6;--dark:#070d16;--dark-2:#0a111d;--max:1680px;--pad:clamp(28px,4vw,76px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}em{font-style:normal}.site{max-width:var(--max);margin:0 auto;overflow:hidden;background:#fff}.section{padding:76px var(--pad)}.eyebrow,.section-kicker,.block-index,.panel-index{color:var(--blue);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.13em}.block-index,.panel-index{display:flex;gap:16px;align-items:center}.btn{min-height:50px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:18px;border-radius:4px;font-size:12px;font-weight:800;text-transform:uppercase}.btn-dark{background:#080e19;color:#fff}.text-link,.dark-link{display:inline-flex;align-items:center;gap:16px;padding-bottom:8px;border-bottom:2px solid var(--blue);font-size:12px;font-weight:800;text-transform:uppercase}.dark-link{color:#fff;border-color:rgba(255,255,255,.35)}.site-header{height:88px;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:34px}.brand{display:inline-flex;flex-direction:column;align-items:flex-start}.brand-name{font-size:24px;line-height:1;font-weight:850;letter-spacing:.25em}.brand-name span{color:var(--blue)}.brand-sub{margin-top:7px;color:var(--blue);font-size:9px;line-height:1;font-weight:850;letter-spacing:.24em}.main-nav{display:flex;align-items:center;gap:38px}.main-nav a{font-size:12px;font-weight:750}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}.header-cta{min-height:44px;padding:0 22px;display:inline-flex;align-items:center;border-radius:999px;background:#0a0f18;color:#fff;font-size:11px;font-weight:800;text-transform:uppercase}.menu-dot{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#0a0f18;color:#fff;font-size:18px}.hero{min-height:650px;padding:18px var(--pad) 48px;display:grid;grid-template-columns:54px minmax(0,.82fr) minmax(620px,1.18fr);gap:30px;align-items:center}.side-index{align-self:center;display:flex;flex-direction:column;align-items:center;gap:12px;color:#b2b9c6}.side-index strong{color:var(--blue);font-size:18px}.side-index i{width:1px;height:120px;background:#cad0dc}.side-index span{width:6px;height:6px;border-radius:50%;border:1px solid #c8ced9}.side-index span:first-of-type{background:var(--blue);border-color:var(--blue)}.hero-copy{max-width:650px}.hero h1{margin:16px 0 26px;font-size:clamp(62px,5vw,92px);line-height:.94;letter-spacing:-.058em}.dot{color:var(--pink)}.hero p{max-width:500px;margin:0 0 28px;color:var(--muted);font-size:16px;line-height:1.72}.hero-actions{display:flex;gap:30px;align-items:center;flex-wrap:wrap}.hero-art{position:relative;min-height:560px;display:grid;place-items:center;perspective:1000px}.hero-grid{position:absolute;inset:12% 2% 4% 0;background:linear-gradient(rgba(65,79,140,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(65,79,140,.08) 1px,transparent 1px);background-size:44px 44px;transform:rotateX(60deg) rotateZ(-9deg);transform-origin:center bottom}.hero-orb{position:absolute;width:320px;height:320px;right:11%;top:7%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd2cb 0 12%,#f484d2 35%,#7257ff 72%,#315bff 100%);opacity:.92}.glass-panel{position:absolute;width:300px;height:340px;left:16%;top:17%;border:1px solid rgba(100,113,170,.22);background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(116,135,255,.18));backdrop-filter:blur(10px);border-radius:8px;box-shadow:0 24px 60px rgba(70,80,130,.10)}.dark-ui{position:absolute;width:390px;height:245px;right:17%;top:24%;border-radius:10px;background:linear-gradient(145deg,#0b111e,#101827);box-shadow:0 26px 54px rgba(8,13,24,.26)}.stone-base{position:absolute;width:470px;height:120px;right:17%;bottom:15%;background:linear-gradient(145deg,#fff,#d8d9dd);transform:skewX(-9deg);box-shadow:0 28px 50px rgba(70,72,88,.14)}.stone-arch{position:absolute;width:235px;height:240px;right:37%;bottom:20%;background:linear-gradient(145deg,#fefefe,#d6d7db);box-shadow:0 24px 45px rgba(70,72,86,.18)}.stone-arch:before{content:"";position:absolute;left:60px;bottom:0;width:112px;height:132px;background:#eef0f5;border-radius:70px 70px 0 0;box-shadow:inset 18px 0 25px rgba(0,0,0,.12)}.blue-cube{position:absolute;width:145px;height:145px;left:18%;bottom:18%;background:linear-gradient(135deg,rgba(42,64,255,.95),rgba(26,206,255,.42));box-shadow:0 25px 46px rgba(29,53,255,.22);opacity:.92}.hero-node{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--blue)}.node-a{left:18%;top:30%}.node-b{right:7%;top:42%;background:var(--coral)}.node-c{right:24%;bottom:12%;background:var(--violet)}.dark-section{padding:70px var(--pad);background:radial-gradient(circle at 70% 30%,rgba(48,55,100,.18),transparent 26%),linear-gradient(115deg,#070d16,#090f19 62%,#070b12);color:#fff}.label-row{display:flex;gap:26px;align-items:center}.section-num{display:inline-block;color:#fff;font-size:13px;font-weight:850}.section-num.blue{color:var(--blue)}.light{color:#fff}.work-layout{margin-top:34px;display:grid;grid-template-columns:1.52fr .72fr;gap:60px;align-items:stretch}.work-main{min-height:500px;display:grid;grid-template-columns:.54fr 1fr;gap:28px;align-items:center}.work-copy{max-width:410px}.work-index{color:#7e88a0;font-size:11px;font-weight:800}.work-copy h2{margin:38px 0 10px;font-size:40px;letter-spacing:-.04em}.work-copy h3{margin:0 0 22px;font-size:21px}.work-copy p{margin:0 0 28px;max-width:360px;color:#b6becd;font-size:14px;line-height:1.72}.work-image{min-height:430px;border-radius:8px;background-size:cover;background-position:center}.work-image-main{background-image:linear-gradient(90deg,rgba(8,13,22,0),rgba(8,13,22,.2)),url('https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1600&q=88');transform:rotate(-8deg) translateX(-20px);box-shadow:0 35px 70px rgba(0,0,0,.24)}.work-side{display:flex;flex-direction:column;gap:24px}.work-side article{min-height:190px;padding:24px;display:grid;grid-template-columns:.8fr 1fr;gap:20px;border:1px solid rgba(255,255,255,.12);border-radius:10px}.work-side span{color:#8c94a6;font-size:12px;font-weight:800}.work-side h3{margin:20px 0 5px}.work-side p{margin:0 0 16px;color:#adb6c6;font-size:13px}.side-thumb{border-radius:8px;background-size:cover;background-position:center}.thumb-lumina{background-image:url('https://images.unsplash.com/photo-1559028006-448665bd7c7f?auto=format&fit=crop&w=900&q=85')}.thumb-aurora{background-image:url('https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=900&q=85')}.view-all{align-self:flex-end;margin-top:auto;color:#fff;font-size:12px;font-weight:800;text-transform:uppercase}.section-head-inline{display:flex;gap:28px;align-items:center;margin-bottom:28px}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.service-card{min-height:380px;padding:48px 42px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}.service-card:before{content:"";position:absolute;inset:0;z-index:0;opacity:.82}.service-a:before{background:radial-gradient(circle at 74% 24%,rgba(210,215,230,.42),transparent 30%),linear-gradient(135deg,#fff,#f4f5f9)}.service-b:before{background:radial-gradient(circle at 60% 35%,rgba(112,72,255,.18),transparent 36%),linear-gradient(135deg,#fff,#f2f0ff)}.service-c:before{background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.74)),url('https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1000&q=80');background-size:cover;background-position:center}.service-card>*{position:relative;z-index:1}.service-number{display:block;margin-bottom:54px;font-size:24px;color:#111827}.service-card h2{margin:0 0 20px;max-width:290px;font-size:29px;line-height:1.08;letter-spacing:-.035em}.service-card p{max-width:310px;margin:0 0 28px;color:var(--muted);font-size:14px;line-height:1.7}.service-card a{font-size:22px}.split-showcase{display:grid;grid-template-columns:1fr 1fr;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.philosophy-block,.studio-block{min-height:460px;position:relative;overflow:hidden;padding:58px var(--pad)}.philosophy-block{border-right:1px solid var(--line);background:linear-gradient(135deg,#fff,#f7f5ff)}.philosophy-block h2,.studio-block h2{margin:38px 0 24px;font-size:clamp(44px,4vw,66px);line-height:1;letter-spacing:-.052em}.philosophy-block h2 em,.studio-block h2 em,.guide-panel h2 em{background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--coral));color:transparent;-webkit-background-clip:text;background-clip:text}.philosophy-block p{margin:0 0 26px;color:#1f2633;font-size:16px;line-height:1.7}.sphere-art{position:absolute;width:52%;height:75%;right:5%;top:16%;pointer-events:none}.sphere-main{position:absolute;width:250px;height:250px;left:18%;top:19%;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,#e4e5eb 48%,#bbc0cb);box-shadow:0 26px 45px rgba(65,70,92,.14)}.sphere-small{position:absolute;width:58px;height:58px;left:8%;bottom:17%;border-radius:50%;background:radial-gradient(circle at 30% 28%,#fff,#ffd3cd,#ff7b69)}.sphere-dark{position:absolute;width:92px;height:92px;right:18%;bottom:24%;border-radius:50%;background:radial-gradient(circle at 33% 30%,#fff,#7349ff 35%,#0a0d18 78%)}.orbit-line{position:absolute;width:350px;height:110px;left:0;top:36%;border:1px solid rgba(112,72,255,.35);border-radius:50%;transform:rotate(-13deg)}.studio-block{display:grid;grid-template-columns:.74fr 1fr;gap:36px;align-items:center}.studio-text p{max-width:420px;margin:0 0 26px;color:var(--muted);font-size:14px;line-height:1.72}.studio-collage{min-height:360px;position:relative}.studio-photo,.studio-note,.studio-ui-panel{position:absolute;border-radius:6px;box-shadow:0 20px 40px rgba(50,60,90,.12)}.studio-photo{background-size:cover;background-position:center}.photo-a{width:50%;height:72%;right:4%;top:8%;background-image:url('/assets/practice/design-workspace.webp')}.photo-b{width:39%;height:42%;left:10%;bottom:10%;background-image:url('/assets/practice/brand-identity.webp')}.photo-c{width:33%;height:36%;left:19%;top:4%;background-image:url('/assets/practice/responsive-interface.webp')}.studio-note{width:36%;height:42%;left:0;top:28%;display:grid;place-items:center;background:#fff;font-family:Georgia,serif;font-size:68px}.studio-ui-panel{width:42%;height:50%;right:18%;bottom:0;background:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(145deg,#0a0f19,#11192a);background-size:18px 18px,18px 18px,cover}.process{padding-top:64px;padding-bottom:70px}.process-top{margin-bottom:44px}.process-line{display:grid;grid-template-columns:repeat(5,1fr);position:relative}.process-line:before{content:"";position:absolute;left:5%;right:5%;top:28px;height:1px;background:linear-gradient(90deg,var(--blue),#392df1,var(--violet),var(--pink),var(--coral))}.process-line article{position:relative;min-height:150px;padding-right:30px}.process-line span{color:#111827;font-size:13px;font-weight:800}.process-line b{display:block;width:9px;height:9px;margin:20px 0 27px;border-radius:50%;background:#0d1320;position:relative;z-index:1}.process-line h3{margin:0 0 9px;font-size:17px;text-transform:uppercase}.process-line p{max-width:205px;margin:0;color:var(--muted);font-size:12px;line-height:1.55}.lab-guide{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.lab-panel,.guide-panel{min-height:520px;position:relative;overflow:hidden;padding:64px var(--pad)}.lab-panel{color:#fff;background:radial-gradient(circle at 70% 52%,rgba(112,72,255,.16),transparent 28%),linear-gradient(125deg,#070d16,#08111f 62%,#070b13)}.lab-panel h2,.guide-panel h2{margin:42px 0 22px;font-size:clamp(42px,4vw,64px);line-height:1;letter-spacing:-.05em}.lab-panel h2 em{background:linear-gradient(90deg,#7357ff,#e243c4,#ff705e);color:transparent;-webkit-background-clip:text;background-clip:text}.lab-panel p{max-width:360px;margin:0 0 28px;color:#aeb8c8;font-size:14px;line-height:1.72}.particle-art{position:absolute;right:4%;top:15%;width:56%;height:72%;display:grid;place-items:center}.particle-shape{width:340px;height:250px;background:radial-gradient(circle,#1e48ff 1px,transparent 1.4px),radial-gradient(circle,#e243c4 1px,transparent 1.4px);background-size:13px 13px,19px 19px;filter:drop-shadow(0 0 22px rgba(112,72,255,.28));mask-image:radial-gradient(circle at center,#000 0 58%,transparent 76%);transform:rotate(-12deg)}.play{position:absolute;width:86px;height:86px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);backdrop-filter:blur(10px)}.guide-panel{background:radial-gradient(circle at 100% 7%,rgba(226,67,196,.20),transparent 32%),linear-gradient(135deg,#fff,#f7f7fc)}.guide-panel p{max-width:355px;color:var(--muted);font-size:14px;line-height:1.7}.guide-options{position:absolute;right:var(--pad);top:82px;width:46%;display:grid;grid-template-columns:1fr;gap:16px}.guide-options div{min-height:100px;padding:22px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.78)}.guide-options span{color:var(--blue);font-size:24px}.guide-options h3{margin:8px 0 4px;font-size:17px}.guide-options p{margin:0;font-size:12px}.muted-option{background:linear-gradient(135deg,#fff,#f0f1f6)!important}.faq-insights{display:grid;grid-template-columns:.42fr 1fr;gap:60px}.faq-block h2{margin:36px 0 28px;font-size:clamp(36px,3.2vw,52px);line-height:1;letter-spacing:-.048em}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;list-style:none;font-size:12px;font-weight:700}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{color:var(--blue);font-size:18px}.faq-list p{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.6}.insights-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.insights-top a{font-size:12px;font-weight:800;text-transform:uppercase}.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.article-image{height:210px;margin-bottom:22px;border-radius:8px;background-size:cover;background-position:center}.article-a{background-image:url('https://images.unsplash.com/photo-1541701494587-cb58502866ab?auto=format&fit=crop&w=900&q=85')}.article-b{background-image:url('https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=900&q=85')}.article-c{background-image:url('https://images.unsplash.com/photo-1557682250-33bd709cbe85?auto=format&fit=crop&w=900&q=85')}.article-card span{color:var(--muted);font-size:10px;text-transform:uppercase}.article-card h3{margin:10px 0 12px;font-size:20px;line-height:1.2;letter-spacing:-.03em}.article-card p{color:var(--muted);font-size:11px;text-transform:uppercase}.site-footer{padding:70px var(--pad) 32px;background:radial-gradient(circle at 88% 12%,rgba(80,55,255,.15),transparent 25%),linear-gradient(180deg,#09111e,#050a12);color:#fff}.footer-inner{min-height:285px;display:grid;grid-template-columns:1.4fr .8fr 1fr .8fr 1.25fr;gap:0}.footer-brand{padding-right:40px}.brand-footer .brand-name{color:#fff}.footer-brand p{max-width:280px;margin:30px 0 26px;color:#abb4c3;font-size:12px;line-height:1.7}.socials{display:flex;gap:10px}.socials a{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:5px;font-size:11px;font-weight:800}.footer-col,.footer-cta{padding:0 28px;border-left:1px solid rgba(255,255,255,.13)}.footer-col h3{margin:0 0 18px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.footer-col a{min-height:38px;display:block;color:#aeb7c6;font-size:11px}.footer-cta h2{max-width:310px;margin:0 0 22px;font-size:28px;line-height:1.08;letter-spacing:-.035em}.footer-cta a{color:#b0a9ff;font-size:11px;font-weight:800;text-transform:uppercase}.footer-bottom{margin-top:38px;padding-top:24px;display:grid;grid-template-columns:1fr auto auto auto;gap:24px;border-top:1px solid rgba(255,255,255,.12);color:#748092;font-size:10px}@media(max-width:1200px){.hero{grid-template-columns:1fr 1fr}.side-index{display:none}.hero h1{font-size:clamp(52px,5vw,72px)}.work-layout{grid-template-columns:1fr}.work-side{display:grid;grid-template-columns:1fr 1fr}.services-grid{grid-template-columns:1fr}.split-showcase,.lab-guide,.faq-insights{grid-template-columns:1fr}.philosophy-block{border-right:0;border-bottom:1px solid var(--line)}.footer-inner{grid-template-columns:1.2fr 1fr 1fr;row-gap:36px}.footer-cta{grid-column:2 / 4}}@media(max-width:780px){:root{--pad:22px}.site-header{height:78px;grid-template-columns:1fr auto}.main-nav,.header-cta{display:none}.brand-name{font-size:19px}.hero{grid-template-columns:1fr;min-height:auto;padding-top:32px}.hero-art{min-height:420px;transform:scale(.8);transform-origin:center top}.work-main{grid-template-columns:1fr}.work-image-main{transform:none}.work-side{grid-template-columns:1fr}.studio-block{grid-template-columns:1fr}.process-line{grid-template-columns:1fr;gap:28px}.process-line:before{display:none}.lab-panel,.guide-panel{min-height:auto;padding-top:48px;padding-bottom:48px}.particle-art{position:relative;width:100%;height:260px;right:auto;top:auto;margin-top:30px}.guide-options{position:relative;width:100%;right:auto;top:auto;margin-top:30px}.articles-grid{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr}.footer-col,.footer-cta{padding:28px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.13)}.footer-cta{grid-column:auto}.footer-bottom{grid-template-columns:1fr}}@media(max-width:520px){.hero h1{font-size:45px}.hero-actions{flex-direction:column;align-items:flex-start}.work-copy h2{font-size:34px}.philosophy-block h2,.studio-block h2,.lab-panel h2,.guide-panel h2{font-size:42px}.sphere-art{opacity:.28;right:-12%}}


/* =========================================================
   V2 FIX — Header without menu-dot + clean guide-panel layout
   ========================================================= */

/* Header: remove third circular menu visual cleanly */
.site-header{
  grid-template-columns:1fr auto 1fr;
}

.header-actions{
  gap:0;
}

.menu-dot{
  display:none !important;
}

/* Guide section: replace absolute-positioned options with a stable grid layout */
.guide-panel{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(360px,1.22fr);
  column-gap:clamp(38px,5vw,72px);
  align-items:center;
  min-height:520px;
  padding:64px var(--pad);
}

.guide-panel > .panel-index,
.guide-panel > h2,
.guide-panel > p,
.guide-panel > .btn{
  grid-column:1;
  position:relative;
  z-index:2;
}

.guide-panel h2{
  max-width:520px;
  margin:32px 0 20px;
  font-size:clamp(42px,4vw,64px);
  line-height:.98;
  letter-spacing:-.05em;
}

.guide-panel p{
  max-width:390px;
  margin:0 0 26px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}

.guide-panel .btn{
  justify-self:start;
}

.guide-options{
  grid-column:2;
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:100% !important;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-self:center;
  z-index:2;
}

.guide-options div{
  min-height:154px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 40px rgba(42,50,80,.05);
}

.guide-options span{
  display:block;
  margin-bottom:18px;
  color:var(--blue);
  font-size:28px;
  line-height:1;
}

.guide-options h3{
  margin:0 0 7px;
  font-size:20px;
  letter-spacing:-.025em;
}

.guide-options p{
  margin:0;
  max-width:none;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}

.muted-option{
  background:
    radial-gradient(circle at 82% 18%,rgba(112,72,255,.13),transparent 34%),
    linear-gradient(135deg,#fff,#f0f1f6) !important;
}

/* Keep the right-side pink glow but prevent it from visually washing over the title */
.guide-panel::before{
  content:"";
  position:absolute;
  right:-8%;
  top:-10%;
  width:44%;
  height:60%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(226,67,196,.17),transparent 70%);
  pointer-events:none;
}

.guide-panel > *{
  position:relative;
}

@media(max-width:1100px){
  .guide-panel{
    grid-template-columns:1fr;
    row-gap:34px;
  }

  .guide-options{
    grid-column:1;
  }
}

@media(max-width:720px){
  .guide-panel{
    padding:48px var(--pad);
  }

  .guide-options{
    grid-template-columns:1fr;
  }

  .guide-options div{
    min-height:130px;
  }
}


/* =========================================================
   V3 FIX — Lab + Guide redesign
   ========================================================= */

.lab-guide-v3{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.lab-guide-v3 .lab-panel{
  min-height:560px;
  padding:clamp(54px,5vw,78px) var(--pad);
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(320px,1.08fr);
  gap:clamp(34px,4vw,64px);
  align-items:center;
  background:
    radial-gradient(circle at 80% 52%,rgba(112,72,255,.19),transparent 31%),
    radial-gradient(circle at 96% 18%,rgba(226,67,196,.10),transparent 28%),
    linear-gradient(125deg,#070d16,#08111f 64%,#060a12);
}

.lab-guide-v3 .lab-panel-copy{
  position:relative;
  z-index:3;
  max-width:520px;
}

.lab-guide-v3 .lab-panel h2{
  margin:42px 0 24px;
  font-size:clamp(46px,4.2vw,72px);
  line-height:.96;
  letter-spacing:-.055em;
}

.lab-guide-v3 .lab-panel p{
  max-width:430px;
  margin:0 0 30px;
  color:#aeb8c8;
  font-size:15px;
  line-height:1.75;
}

.lab-guide-v3 .particle-art{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:100% !important;
  height:390px !important;
  display:grid;
  place-items:center;
  margin:0 !important;
}

.lab-guide-v3 .particle-shape{
  width:min(100%,430px);
  height:320px;
  background:
    radial-gradient(circle,#1e48ff 1.25px,transparent 1.6px),
    radial-gradient(circle,#e243c4 1.25px,transparent 1.6px);
  background-size:14px 14px,22px 22px;
  mask-image:radial-gradient(circle at center,#000 0 56%,transparent 76%);
  transform:rotate(-8deg) scale(1.04);
  filter:
    drop-shadow(0 0 24px rgba(112,72,255,.32))
    saturate(1.18);
}

.lab-guide-v3 .play{
  width:88px;
  height:88px;
  font-size:22px;
}

.lab-guide-v3 .guide-panel{
  min-height:560px;
  padding:clamp(54px,5vw,78px) var(--pad);
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(420px,1.25fr);
  gap:clamp(34px,4vw,64px);
  align-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 104% 0%,rgba(226,67,196,.18),transparent 34%),
    radial-gradient(circle at 82% 84%,rgba(112,72,255,.08),transparent 30%),
    linear-gradient(135deg,#fff,#f8f8fd);
}

.lab-guide-v3 .guide-panel::before{
  content:"";
  position:absolute;
  right:-12%;
  top:-10%;
  width:48%;
  height:56%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(226,67,196,.15),transparent 72%);
  pointer-events:none;
}

.lab-guide-v3 .guide-panel-copy{
  position:relative;
  z-index:2;
  max-width:520px;
}

.lab-guide-v3 .guide-panel h2{
  margin:38px 0 22px;
  max-width:560px;
  font-size:clamp(48px,4.4vw,76px);
  line-height:.96;
  letter-spacing:-.056em;
}

.lab-guide-v3 .guide-panel p{
  max-width:430px;
  margin:0 0 30px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}

.lab-guide-v3 .guide-options{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:100% !important;
  grid-column:auto !important;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-self:center;
  z-index:2;
}

.lab-guide-v3 .guide-options div{
  min-height:168px;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.86);
  box-shadow:0 22px 44px rgba(40,48,80,.055);
}

.lab-guide-v3 .guide-options span{
  display:block;
  margin-bottom:20px;
  color:var(--blue);
  font-size:30px;
  line-height:1;
}

.lab-guide-v3 .guide-options h3{
  margin:0 0 8px;
  font-size:21px;
  line-height:1.1;
  letter-spacing:-.025em;
}

.lab-guide-v3 .guide-options p{
  margin:0;
  max-width:none;
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}

.lab-guide-v3 .muted-option{
  background:
    radial-gradient(circle at 82% 18%,rgba(112,72,255,.14),transparent 34%),
    linear-gradient(135deg,#fff,#f0f1f6) !important;
}

.lab-guide-v3 .guide-panel > .panel-index,
.lab-guide-v3 .guide-panel > h2,
.lab-guide-v3 .guide-panel > p,
.lab-guide-v3 .guide-panel > .btn{
  grid-column:auto !important;
}

/* =========================================================
   V3 FIX — Footer redesign
   ========================================================= */

.site-footer{
  min-height:540px;
  padding:88px var(--pad) 36px;
  background:
    radial-gradient(circle at 92% 8%,rgba(97,66,255,.18),transparent 25%),
    radial-gradient(circle at 9% 88%,rgba(31,55,255,.10),transparent 26%),
    linear-gradient(180deg,#09111e 0%,#050a12 100%);
}

.footer-inner{
  min-height:335px;
  display:grid;
  grid-template-columns:1.45fr .82fr 1.02fr .82fr 1.28fr;
  gap:0;
  align-items:stretch;
}

.footer-brand{
  padding:0 48px 0 0;
}

.footer-brand p{
  max-width:320px;
  margin:34px 0 30px;
  color:#aeb7c7;
  font-size:13px;
  line-height:1.75;
}

.socials{
  gap:12px;
}

.socials a{
  width:40px;
  height:40px;
  border-radius:6px;
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.18);
}

.footer-col{
  padding:2px 34px 0;
  border-left:1px solid rgba(255,255,255,.13);
}

.footer-col h3{
  margin:0 0 24px;
  color:#fff;
  font-size:11px;
  letter-spacing:.15em;
}

.footer-col a{
  min-height:44px;
  display:flex;
  align-items:center;
  color:#aeb7c6;
  font-size:12px;
  border-top:1px solid rgba(255,255,255,.075);
}

.footer-col a:last-child{
  border-bottom:1px solid rgba(255,255,255,.075);
}

.footer-col a:hover{
  color:#fff;
}

.footer-cta{
  margin-left:28px;
  padding:34px;
  align-self:stretch;
  border-left:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:
    radial-gradient(circle at 100% 0%,rgba(112,72,255,.22),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}

.footer-cta h2{
  max-width:340px;
  margin:0 0 22px;
  font-size:clamp(32px,2.8vw,44px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.footer-cta a{
  display:inline-flex;
  margin-top:14px;
  padding-bottom:8px;
  border-bottom:2px solid rgba(140,130,255,.65);
  color:#c2bdff;
}

.footer-bottom{
  margin-top:50px;
  padding-top:28px;
  min-height:62px;
  grid-template-columns:1fr auto auto auto;
  gap:30px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:10px;
}

@media(max-width:1240px){
  .lab-guide-v3{
    grid-template-columns:1fr;
  }

  .lab-guide-v3 .lab-panel,
  .lab-guide-v3 .guide-panel{
    min-height:auto;
  }

  .footer-inner{
    grid-template-columns:1.2fr 1fr 1fr;
    row-gap:42px;
  }

  .footer-cta{
    grid-column:1/-1;
    margin-left:0;
  }
}

@media(max-width:860px){
  .lab-guide-v3 .lab-panel,
  .lab-guide-v3 .guide-panel{
    grid-template-columns:1fr;
    padding-top:54px;
    padding-bottom:54px;
  }

  .lab-guide-v3 .particle-art{
    height:300px !important;
  }

  .lab-guide-v3 .guide-options{
    grid-template-columns:1fr;
  }

  .footer-inner{
    grid-template-columns:1fr;
  }

  .footer-brand{
    padding-right:0;
  }

  .footer-col{
    padding:28px 0 0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.13);
  }

  .footer-cta{
    padding:30px;
  }

  .footer-bottom{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V4 FIX — Match approved Lab + Guide composition
   Reference: compact horizontal split panel
   ========================================================= */

.lab-guide-v3{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  min-height:360px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* LEFT: QUARZON LAB */
.lab-guide-v3 .lab-panel{
  min-height:360px !important;
  padding:46px var(--pad) !important;
  display:grid !important;
  grid-template-columns:.58fr 1.05fr !important;
  gap:34px !important;
  align-items:center !important;
  background:
    radial-gradient(circle at 72% 58%,rgba(42,49,92,.28),transparent 38%),
    linear-gradient(125deg,#070d16,#08111f 62%,#060a12) !important;
  overflow:hidden;
}

.lab-guide-v3 .lab-panel-copy{
  max-width:360px !important;
  position:relative;
  z-index:3;
}

.lab-guide-v3 .lab-panel .panel-index{
  margin-bottom:34px;
}

.lab-guide-v3 .lab-panel h2{
  margin:0 0 22px !important;
  font-size:clamp(34px,3vw,50px) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}

.lab-guide-v3 .lab-panel p{
  max-width:335px !important;
  margin:0 0 26px !important;
  color:#aeb8c8;
  font-size:13px !important;
  line-height:1.68 !important;
}

.lab-guide-v3 .lab-panel .dark-link{
  font-size:10px;
}

/* Particle visual should sit in the middle-right, not low or tiny */
.lab-guide-v3 .particle-art{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:100% !important;
  height:265px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
}

.lab-guide-v3 .particle-shape{
  width:min(100%,390px) !important;
  height:250px !important;
  background:
    radial-gradient(circle,#1e48ff 1.15px,transparent 1.55px),
    radial-gradient(circle,#e243c4 1.15px,transparent 1.55px) !important;
  background-size:13px 13px,21px 21px !important;
  mask-image:radial-gradient(circle at center,#000 0 56%,transparent 75%) !important;
  transform:rotate(-9deg) scale(1.03) !important;
  filter:
    drop-shadow(0 0 22px rgba(112,72,255,.34))
    saturate(1.2) !important;
}

.lab-guide-v3 .play{
  width:70px !important;
  height:70px !important;
  font-size:18px !important;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.26);
}

/* RIGHT: SMART PROJECT GUIDE */
.lab-guide-v3 .guide-panel{
  min-height:360px !important;
  padding:42px var(--pad) !important;
  display:grid !important;
  grid-template-columns:.58fr 1fr !important;
  gap:34px !important;
  align-items:center !important;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%,rgba(226,67,196,.18),transparent 38%),
    linear-gradient(135deg,#fff,#f8f8fd) !important;
}

.lab-guide-v3 .guide-panel::before{
  content:"";
  position:absolute;
  right:-18%;
  top:-30%;
  width:46%;
  height:86%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(226,67,196,.15),transparent 72%);
  pointer-events:none;
}

.lab-guide-v3 .guide-panel-copy{
  max-width:310px !important;
  position:relative;
  z-index:3;
}

.lab-guide-v3 .guide-panel .panel-index{
  margin-bottom:34px;
  line-height:1.25;
}

.lab-guide-v3 .guide-panel h2{
  max-width:310px !important;
  margin:0 0 22px !important;
  font-size:clamp(36px,3.4vw,58px) !important;
  line-height:.98 !important;
  letter-spacing:-.052em !important;
}

.lab-guide-v3 .guide-panel p{
  max-width:270px !important;
  margin:0 0 24px !important;
  color:var(--muted);
  font-size:13px !important;
  line-height:1.62 !important;
}

.lab-guide-v3 .guide-panel .btn{
  min-height:46px;
  padding:0 20px;
  font-size:10px;
}

/* Options layout: 3 stacked cards + 1 tall visual card */
.lab-guide-v3 .guide-options{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:100% !important;
  grid-column:auto !important;
  display:grid !important;
  grid-template-columns:1fr .78fr !important;
  grid-template-rows:repeat(3,1fr) !important;
  gap:14px !important;
  align-self:center;
  z-index:3;
}

.lab-guide-v3 .guide-options div{
  min-height:82px !important;
  padding:18px 22px !important;
  display:grid !important;
  grid-template-columns:32px 1fr;
  grid-template-rows:auto auto;
  column-gap:14px;
  align-content:center;
  justify-content:initial !important;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 36px rgba(40,48,80,.045);
}

.lab-guide-v3 .guide-options div:nth-child(1){
  grid-column:1;
  grid-row:1;
}

.lab-guide-v3 .guide-options div:nth-child(2){
  grid-column:1;
  grid-row:2;
}

.lab-guide-v3 .guide-options div:nth-child(3){
  grid-column:1;
  grid-row:3;
}

.lab-guide-v3 .guide-options .muted-option{
  grid-column:2;
  grid-row:1 / span 3;
  min-height:274px !important;
  display:flex !important;
  flex-direction:column;
  justify-content:flex-end !important;
  position:relative;
  overflow:hidden;
  padding:24px !important;
  background:
    radial-gradient(circle at 56% 26%,#fff 0 9%,#eceef6 26%,#cfd2df 50%,transparent 52%),
    radial-gradient(circle at 75% 47%,#6f55ff 0 8%,transparent 9%),
    linear-gradient(135deg,#fff,#f2f3f8) !important;
}

.lab-guide-v3 .guide-options .muted-option::before{
  content:"";
  position:absolute;
  width:118px;
  height:118px;
  top:34px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#e1e3ea 55%,#c6cad7);
  box-shadow:0 20px 38px rgba(70,76,100,.16);
}

.lab-guide-v3 .guide-options .muted-option::after{
  content:"";
  position:absolute;
  width:34px;
  height:34px;
  right:35px;
  top:116px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,#7153ff 54%,#4b34c9);
  box-shadow:0 14px 24px rgba(91,65,255,.26);
}

.lab-guide-v3 .guide-options span{
  grid-column:1;
  grid-row:1 / span 2;
  display:flex !important;
  align-items:flex-start;
  margin:0 !important;
  color:var(--blue);
  font-size:22px !important;
  line-height:1;
}

.lab-guide-v3 .guide-options h3{
  grid-column:2;
  grid-row:1;
  margin:0 0 4px !important;
  font-size:15px !important;
  line-height:1.1;
  letter-spacing:-.015em;
}

.lab-guide-v3 .guide-options p{
  grid-column:2;
  grid-row:2;
  margin:0 !important;
  max-width:none !important;
  font-size:11px !important;
  line-height:1.35 !important;
  color:var(--muted);
}

.lab-guide-v3 .muted-option span,
.lab-guide-v3 .muted-option h3,
.lab-guide-v3 .muted-option p{
  position:relative;
  z-index:2;
}

.lab-guide-v3 .muted-option span{
  display:block !important;
  margin:0 0 14px !important;
}

.lab-guide-v3 .muted-option h3{
  font-size:18px !important;
  margin-bottom:6px !important;
}

/* Responsive */
@media(max-width:1240px){
  .lab-guide-v3{
    grid-template-columns:1fr !important;
  }

  .lab-guide-v3 .lab-panel,
  .lab-guide-v3 .guide-panel{
    grid-template-columns:.62fr 1fr !important;
  }
}

@media(max-width:860px){
  .lab-guide-v3 .lab-panel,
  .lab-guide-v3 .guide-panel{
    grid-template-columns:1fr !important;
    padding-top:48px !important;
    padding-bottom:48px !important;
  }

  .lab-guide-v3 .particle-art{
    height:260px !important;
  }

  .lab-guide-v3 .guide-options{
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
  }

  .lab-guide-v3 .guide-options div,
  .lab-guide-v3 .guide-options div:nth-child(1),
  .lab-guide-v3 .guide-options div:nth-child(2),
  .lab-guide-v3 .guide-options div:nth-child(3),
  .lab-guide-v3 .guide-options .muted-option{
    grid-column:1 !important;
    grid-row:auto !important;
    min-height:95px !important;
  }

  .lab-guide-v3 .guide-options .muted-option{
    display:grid !important;
    grid-template-columns:32px 1fr;
    padding:18px 22px !important;
  }

  .lab-guide-v3 .guide-options .muted-option::before,
  .lab-guide-v3 .guide-options .muted-option::after{
    display:none;
  }
}


/* =========================================================
   V5 FIX — Inset dark sections + stronger footer CTA
   ========================================================= */

/* Make selected work the same visual width as the rest of the page content */
.selected-work.dark-section{
  margin-left:var(--pad);
  margin-right:var(--pad);
  padding-left:clamp(28px,4vw,58px);
  padding-right:clamp(28px,4vw,58px);
  border-radius:0;
  overflow:hidden;
}

/* Make Lab + Guide match the same content width instead of full-bleed */
.lab-guide.lab-guide-v3{
  margin-left:var(--pad);
  margin-right:var(--pad);
  width:auto;
  border:1px solid var(--line);
  overflow:hidden;
}

/* Remove duplicated outside border feeling when the inset panel is used */
.lab-guide-v3 .lab-panel,
.lab-guide-v3 .guide-panel{
  border:0;
}

.lab-guide-v3 .guide-panel{
  border-left:1px solid var(--line);
}

/* Footer CTA: more premium, clearer hierarchy, stronger call to action */
.footer-cta{
  position:relative;
  overflow:hidden;
  min-height:260px;
  padding:42px 38px !important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 92% 8%,rgba(117,89,255,.35),transparent 30%),
    radial-gradient(circle at 12% 86%,rgba(29,53,255,.16),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 32px 70px rgba(0,0,0,.18);
}

.footer-cta::before{
  content:"";
  position:absolute;
  right:-42px;
  top:-42px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.32),transparent 15%),
    radial-gradient(circle,rgba(112,72,255,.45),rgba(226,67,196,.18) 58%,transparent 70%);
  opacity:.9;
}

.footer-cta::after{
  content:"";
  position:absolute;
  right:22px;
  bottom:20px;
  width:150px;
  height:58px;
  border:1px solid rgba(145,135,255,.35);
  border-radius:50%;
  transform:rotate(-18deg);
  opacity:.55;
}

.footer-cta h2{
  position:relative;
  z-index:2;
  max-width:360px;
  margin:0 0 22px !important;
  font-size:clamp(34px,2.8vw,48px) !important;
  line-height:.98 !important;
  letter-spacing:-.05em !important;
}

.footer-cta h2::before{
  content:"✦";
  display:block;
  margin-bottom:22px;
  color:#8d82ff;
  font-size:22px;
  line-height:1;
}

.footer-cta a{
  position:relative;
  z-index:2;
  width:max-content;
  min-height:46px;
  padding:0 18px;
  display:inline-flex !important;
  align-items:center;
  gap:14px;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#fff !important;
  font-size:10px !important;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.footer-cta a::after{
  content:"→";
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#090f1b;
  font-size:13px;
}

@media(max-width:900px){
  .selected-work.dark-section,
  .lab-guide.lab-guide-v3{
    margin-left:0;
    margin-right:0;
  }

  .lab-guide-v3 .guide-panel{
    border-left:0;
    border-top:1px solid var(--line);
  }
}

@media(max-width:700px){
  .selected-work.dark-section{
    padding-left:var(--pad);
    padding-right:var(--pad);
  }

  .footer-cta{
    min-height:240px;
    padding:34px 28px !important;
  }
}


/* =========================================================
   V6 FIX — Full-width section backgrounds/borders
   Content keeps internal page margins
   ========================================================= */

/* Section background/border should span full page width */
.selected-work.dark-section{
  margin-left:0 !important;
  margin-right:0 !important;
  width:100% !important;
  padding-left:var(--pad) !important;
  padding-right:var(--pad) !important;
  border-radius:0 !important;
}

/* Lab + Guide section should also span full page width */
.lab-guide.lab-guide-v3{
  margin-left:0 !important;
  margin-right:0 !important;
  width:100% !important;
  border-left:0 !important;
  border-right:0 !important;
  border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
}

/* Keep the actual content aligned through panel padding */
.lab-guide-v3 .lab-panel{
  padding-left:var(--pad) !important;
}

.lab-guide-v3 .guide-panel{
  padding-right:var(--pad) !important;
}

/* Preserve the visual divider between dark Lab and light Guide */
.lab-guide-v3 .guide-panel{
  border-left:1px solid var(--line) !important;
}

@media(max-width:1240px){
  .lab-guide-v3 .guide-panel{
    border-left:0 !important;
    border-top:1px solid var(--line) !important;
  }
}


/* =========================================================
   V7 FIX — Process line + white Lab panel
   ========================================================= */

/* 1) Process line starts at step 01 and extends to the section edge */
.process-line::before{
  left:0 !important;
  right:0 !important;
  top:28px !important;
}

.process-line article:first-child b{
  margin-left:0 !important;
}

.process-line article:last-child{
  padding-right:0 !important;
}

/* 2) QUARZON Lab panel now uses a light premium background */
.lab-guide-v3 .lab-panel{
  color:var(--ink) !important;
  background:
    radial-gradient(circle at 76% 50%,rgba(112,72,255,.10),transparent 34%),
    radial-gradient(circle at 90% 16%,rgba(226,67,196,.08),transparent 28%),
    linear-gradient(135deg,#ffffff 0%,#f8f9fd 100%) !important;
  border-right:1px solid var(--line);
}

.lab-guide-v3 .lab-panel h2{
  color:var(--ink) !important;
}

.lab-guide-v3 .lab-panel h2 em{
  background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--coral));
  color:transparent !important;
  -webkit-background-clip:text;
  background-clip:text;
}

.lab-guide-v3 .lab-panel p{
  color:var(--muted) !important;
}

.lab-guide-v3 .lab-panel .dark-link{
  color:var(--ink) !important;
  border-color:var(--blue) !important;
}

.lab-guide-v3 .particle-shape{
  opacity:.92;
  filter:
    drop-shadow(0 0 18px rgba(112,72,255,.22))
    saturate(1.08) !important;
}

.lab-guide-v3 .play{
  color:#fff !important;
  background:#0a0f18 !important;
  border-color:rgba(10,15,24,.12) !important;
  box-shadow:0 18px 38px rgba(10,15,24,.18);
}

@media(max-width:1240px){
  .lab-guide-v3 .lab-panel{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
}


/* =========================================================
   V8 FIX — Light Selected Work + right-aligned menu
   ========================================================= */

/* 1) Header: move main menu close to the CTA */
.site-header{
  grid-template-columns:auto 1fr auto !important;
}

.main-nav{
  justify-self:end !important;
  margin-left:auto !important;
  margin-right:28px !important;
  gap:30px !important;
}

.header-actions{
  justify-self:end !important;
}

/* 2) Selected Work: convert from dark section to clean white premium section */
.selected-work.dark-section{
  color:var(--ink) !important;
  background:
    radial-gradient(circle at 78% 18%,rgba(112,72,255,.055),transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#fafbfe 100%) !important;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.selected-work .section-num{
  color:var(--blue) !important;
}

.selected-work .section-kicker.light,
.selected-work .light{
  color:#202736 !important;
}

.selected-work .work-layout{
  grid-template-columns:1.55fr .72fr;
  gap:42px;
  align-items:stretch;
}

/* Main featured project as a large light editorial card */
.selected-work .work-main{
  min-height:500px;
  padding:38px;
  display:grid;
  grid-template-columns:.56fr 1fr;
  gap:34px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 24%,rgba(29,53,255,.07),transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f5f7fc 100%);
  box-shadow:0 24px 70px rgba(42,50,80,.055);
}

.selected-work .work-index{
  color:var(--blue) !important;
}

.selected-work .work-copy h2{
  color:var(--ink) !important;
  margin-top:30px;
}

.selected-work .work-copy h3{
  color:var(--ink) !important;
}

.selected-work .work-copy p{
  color:var(--muted) !important;
}

.selected-work .dark-link{
  color:var(--ink) !important;
  border-color:var(--blue) !important;
}

/* Make the visual feel like a product/case-study mockup instead of a dark block */
.selected-work .work-image-main{
  min-height:410px;
  border-radius:12px;
  transform:rotate(-6deg) translateX(-12px);
  box-shadow:0 34px 70px rgba(40,48,80,.14);
}

/* Side project cards in light mode */
.selected-work .work-side{
  gap:20px;
}

.selected-work .work-side article{
  min-height:190px;
  padding:22px;
  display:grid;
  grid-template-columns:.85fr 1fr;
  gap:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 16px 44px rgba(42,50,80,.045);
}

.selected-work .work-side span{
  color:var(--blue) !important;
}

.selected-work .work-side h3{
  color:var(--ink) !important;
}

.selected-work .work-side p{
  color:var(--muted) !important;
}

.selected-work .work-side a{
  color:var(--ink);
}

.selected-work .view-all{
  color:var(--ink) !important;
  border-bottom:2px solid var(--blue);
  padding-bottom:7px;
}

/* Thumbnails keep image impact but with softer edges */
.selected-work .side-thumb{
  border-radius:9px;
  min-height:140px;
}

/* Responsive refinements */
@media(max-width:1200px){
  .main-nav{
    margin-right:22px !important;
    gap:24px !important;
  }

  .selected-work .work-layout{
    grid-template-columns:1fr;
  }

  .selected-work .work-side{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:900px){
  .main-nav{
    display:none !important;
  }

  .selected-work .work-main{
    grid-template-columns:1fr;
  }

  .selected-work .work-image-main{
    transform:none;
  }

  .selected-work .work-side{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .selected-work .work-main{
    padding:26px;
  }

  .selected-work .work-side article{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V9 — About page
   ========================================================= */

.about-hero{
  min-height:640px;
  padding:38px var(--pad) 80px;
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:clamp(44px,6vw,96px);
  align-items:center;
  background:
    radial-gradient(circle at 88% 12%,rgba(226,67,196,.08),transparent 28%),
    linear-gradient(180deg,#fff 0%,#fafbfe 100%);
}

.about-hero-copy h1{
  margin:18px 0 26px;
  max-width:780px;
  font-size:clamp(58px,5vw,92px);
  line-height:.94;
  letter-spacing:-.058em;
}

.about-hero-copy h1 em,
.about-approach h2 em{
  background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--coral));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.about-hero-copy p{
  max-width:560px;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}

.about-hero-visual{
  min-height:520px;
  position:relative;
  perspective:1000px;
}

.about-visual-grid{
  position:absolute;
  inset:10% 0 0;
  background:
    linear-gradient(rgba(65,79,140,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(65,79,140,.08) 1px,transparent 1px);
  background-size:42px 42px;
  transform:rotateX(60deg) rotateZ(-10deg);
  transform-origin:center bottom;
}

.about-visual-panel{
  position:absolute;
  border-radius:12px;
  border:1px solid rgba(120,130,170,.16);
  box-shadow:0 30px 70px rgba(40,50,90,.12);
}

.panel-one{
  width:42%;
  height:56%;
  left:14%;
  top:13%;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(109,129,255,.16));
}

.panel-two{
  width:46%;
  height:45%;
  right:8%;
  top:18%;
  background:linear-gradient(145deg,#0a0f19,#131b2e);
}

.about-visual-card{
  position:absolute;
  width:45%;
  height:30%;
  left:30%;
  bottom:16%;
  border-radius:14px;
  background:linear-gradient(135deg,#fff,#e5e7f0);
  box-shadow:0 34px 70px rgba(65,72,96,.16);
}

.about-visual-orb{
  position:absolute;
  width:260px;
  height:260px;
  right:5%;
  bottom:12%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#8d77ff 45%,#e243c4 78%);
  opacity:.86;
}

.about-visual-cube{
  position:absolute;
  width:120px;
  height:120px;
  left:15%;
  bottom:18%;
  background:linear-gradient(135deg,#1d35ff,rgba(24,200,214,.45));
  box-shadow:0 24px 50px rgba(29,53,255,.22);
}

.about-node{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
}

.about-node-a{left:10%;top:28%}
.about-node-b{right:14%;top:58%;background:var(--coral)}

.about-intro{
  display:grid;
  grid-template-columns:.32fr 1fr;
  gap:60px;
  border-top:1px solid var(--line);
}

.about-intro-text h2{
  max-width:1050px;
  margin:0 0 28px;
  font-size:clamp(44px,4.2vw,72px);
  line-height:1;
  letter-spacing:-.055em;
}

.about-intro-text p{
  max-width:780px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}

.about-principles{
  background:#fafbfe;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.about-principles-grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.about-principles-grid article{
  min-height:270px;
  padding:34px 34px 30px 0;
  border-right:1px solid var(--line);
}

.about-principles-grid article + article{
  padding-left:34px;
}

.about-principles-grid article:last-child{
  border-right:0;
}

.about-principles-grid span{
  color:var(--blue);
  font-size:14px;
  font-weight:850;
}

.about-principles-grid h3{
  max-width:330px;
  margin:48px 0 14px;
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.035em;
}

.about-principles-grid p{
  max-width:360px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

.about-approach{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(44px,7vw,96px);
  align-items:center;
}

.approach-copy h2{
  max-width:720px;
  margin:28px 0 24px;
  font-size:clamp(46px,4.4vw,76px);
  line-height:.98;
  letter-spacing:-.055em;
}

.approach-copy p{
  max-width:610px;
  margin:0 0 26px;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

.approach-board{
  min-height:500px;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 20%,rgba(112,72,255,.12),transparent 30%),
    linear-gradient(145deg,#f6f7fb,#eef0f6);
}

.board-photo,
.board-sheet,
.board-code,
.board-token{
  position:absolute;
  border-radius:8px;
  box-shadow:0 24px 50px rgba(45,55,88,.13);
}

.board-photo{
  background-size:cover;
  background-position:center;
}

.board-photo-a{
  width:48%;
  height:68%;
  right:7%;
  top:9%;
  background-image:url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1000&q=85");
}

.board-photo-b{
  width:36%;
  height:38%;
  left:10%;
  bottom:10%;
  background-image:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1000&q=85");
}

.board-sheet{
  width:34%;
  height:38%;
  left:8%;
  top:20%;
  display:grid;
  place-items:center;
  background:#fff;
  font-family:Georgia,serif;
  font-size:72px;
}

.board-code{
  width:42%;
  height:45%;
  right:16%;
  bottom:5%;
  background:
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(145deg,#0a0f19,#11192a);
  background-size:18px 18px,18px 18px,cover;
}

.board-token{
  width:38px;
  height:38px;
  border-radius:50%;
}

.token-a{left:42%;top:14%;background:var(--blue)}
.token-b{left:51%;top:22%;background:var(--pink)}
.token-c{right:8%;bottom:18%;background:var(--coral)}

.about-process{
  border-top:1px solid var(--line);
  background:#fff;
}

.about-process-grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-top:1px solid var(--line);
}

.about-process-grid article{
  min-height:220px;
  padding:32px 26px 0 0;
  border-right:1px solid var(--line);
}

.about-process-grid article + article{
  padding-left:26px;
}

.about-process-grid article:last-child{
  border-right:0;
}

.about-process-grid h3{
  margin:0 0 18px;
  font-size:22px;
}

.about-process-grid p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.about-tech{
  min-height:500px;
  padding:70px var(--pad);
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:60px;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 78% 45%,rgba(112,72,255,.22),transparent 28%),
    linear-gradient(125deg,#070d16,#08111f 64%,#060a12);
}

.about-tech-copy h2{
  max-width:620px;
  margin:34px 0 24px;
  font-size:clamp(44px,4vw,70px);
  line-height:.98;
  letter-spacing:-.055em;
}

.about-tech-copy p{
  max-width:560px;
  color:#aeb8c8;
  font-size:15px;
  line-height:1.75;
}

.about-tech-visual{
  min-height:360px;
  position:relative;
  display:grid;
  place-items:center;
}

.tech-particle-shape{
  width:min(100%,520px);
  height:330px;
  background:
    radial-gradient(circle,#1e48ff 1.25px,transparent 1.6px),
    radial-gradient(circle,#e243c4 1.25px,transparent 1.6px);
  background-size:14px 14px,22px 22px;
  mask-image:radial-gradient(circle at center,#000 0 56%,transparent 76%);
  transform:rotate(-8deg);
  filter:drop-shadow(0 0 24px rgba(112,72,255,.32));
}

.tech-core{
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#7257ff 40%,#e243c4 78%);
  box-shadow:0 0 70px rgba(112,72,255,.3);
}

.about-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  background:
    radial-gradient(circle at 90% 12%,rgba(226,67,196,.09),transparent 26%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.about-cta h2{
  max-width:920px;
  margin:16px 0 0;
  font-size:clamp(40px,3.8vw,64px);
  line-height:1;
  letter-spacing:-.052em;
}

@media(max-width:1100px){
  .about-hero,
  .about-intro,
  .about-approach,
  .about-tech,
  .about-cta{
    grid-template-columns:1fr;
  }

  .about-principles-grid,
  .about-process-grid{
    grid-template-columns:1fr;
  }

  .about-principles-grid article,
  .about-principles-grid article + article,
  .about-process-grid article,
  .about-process-grid article + article{
    padding-left:0;
    padding-right:0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .about-principles-grid article:last-child,
  .about-process-grid article:last-child{
    border-bottom:0;
  }

  .about-cta{
    align-items:flex-start;
  }
}

@media(max-width:720px){
  .about-hero{
    min-height:auto;
    padding-top:36px;
    padding-bottom:56px;
  }

  .about-hero-copy h1{
    font-size:46px;
  }

  .about-hero-visual{
    min-height:390px;
    transform:scale(.86);
    transform-origin:center top;
  }

  .about-approach,
  .about-principles,
  .about-process{
    padding-top:56px;
    padding-bottom:56px;
  }

  .approach-board{
    min-height:390px;
  }

  .about-tech{
    padding-top:56px;
    padding-bottom:56px;
  }
}


/* =========================================================
   V10 — Premium About page redesign
   ========================================================= */

/* ABOUT HERO */
.about-premium-hero{
  min-height:720px;
  padding:40px var(--pad) 88px;
  background:
    radial-gradient(circle at 88% 8%,rgba(226,67,196,.08),transparent 28%),
    radial-gradient(circle at 70% 78%,rgba(29,53,255,.055),transparent 30%),
    linear-gradient(180deg,#fff 0%,#fafbfe 100%);
}

.about-hero-label{
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:46px;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:11px;
  font-weight:850;
}

.about-hero-label span{
  font-size:14px;
}

.about-hero-main{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(56px,7vw,110px);
  align-items:center;
}

.about-hero-copy h1{
  max-width:860px;
  margin:18px 0 28px;
  font-size:clamp(64px,5.6vw,108px);
  line-height:.91;
  letter-spacing:-.064em;
}

.about-hero-copy h1 em,
.about-editorial-split h2,
.about-approach-premium h2,
.about-final-cta h2{
  font-style:normal;
}

.about-hero-copy h1 em,
.editorial-copy h2,
.about-tech-premium h2,
.about-final-cta h2{
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 35%,var(--blue) 55%,var(--violet) 72%,var(--pink) 88%,var(--coral));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.about-hero-copy p{
  max-width:610px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.78;
}

.about-hero-composition{
  min-height:560px;
  position:relative;
  perspective:1000px;
}

.hero-comp-grid{
  position:absolute;
  inset:12% 0 0;
  background:
    linear-gradient(rgba(65,79,140,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(65,79,140,.08) 1px,transparent 1px);
  background-size:42px 42px;
  transform:rotateX(60deg) rotateZ(-10deg);
  transform-origin:center bottom;
}

.hero-comp-photo{
  position:absolute;
  width:42%;
  height:68%;
  right:5%;
  top:13%;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(5,8,14,.0),rgba(5,8,14,.18)),
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1200&q=88");
  background-size:cover;
  background-position:center;
  box-shadow:0 38px 80px rgba(40,48,80,.16);
}

.hero-comp-dark{
  position:absolute;
  width:44%;
  height:48%;
  left:20%;
  top:17%;
  border-radius:16px;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(145deg,#0a0f19,#11192a);
  background-size:20px 20px,20px 20px,cover;
  box-shadow:0 35px 70px rgba(10,15,25,.24);
}

.hero-comp-sheet{
  position:absolute;
  width:36%;
  height:44%;
  left:5%;
  bottom:14%;
  border-radius:14px;
  background:
    radial-gradient(circle at 80% 12%,rgba(112,72,255,.10),transparent 28%),
    linear-gradient(145deg,#fff,#f0f2f8);
  box-shadow:0 30px 60px rgba(54,64,96,.13);
}

.hero-comp-orb{
  position:absolute;
  width:220px;
  height:220px;
  right:30%;
  bottom:12%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#8d77ff 45%,#e243c4 78%);
  opacity:.86;
  box-shadow:0 30px 60px rgba(112,72,255,.18);
}

.hero-comp-cube{
  position:absolute;
  width:120px;
  height:120px;
  left:28%;
  bottom:11%;
  background:linear-gradient(135deg,#1d35ff,rgba(24,200,214,.42));
  box-shadow:0 24px 50px rgba(29,53,255,.22);
}

.hero-comp-node{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
}

.hero-comp-node.node-one{left:13%;top:21%}
.hero-comp-node.node-two{right:8%;top:62%;background:var(--coral)}

/* MANIFESTO */
.about-manifesto{
  padding:88px var(--pad);
  display:grid;
  grid-template-columns:.32fr 1fr;
  gap:60px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}

.manifesto-text h2{
  max-width:1180px;
  margin:0;
  font-size:clamp(48px,4.8vw,86px);
  line-height:.98;
  letter-spacing:-.06em;
}

/* DEFINITION */
.about-definition{
  background:
    radial-gradient(circle at 92% 8%,rgba(112,72,255,.07),transparent 28%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.definition-intro{
  display:grid;
  grid-template-columns:.18fr .82fr;
  column-gap:44px;
  align-items:end;
  margin-bottom:42px;
}

.definition-intro h2{
  max-width:900px;
  margin:20px 0 0;
  font-size:clamp(42px,4vw,68px);
  line-height:1;
  letter-spacing:-.054em;
}

.definition-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.definition-grid article{
  min-height:330px;
  padding:38px 38px 34px 0;
  border-right:1px solid var(--line);
}

.definition-grid article + article{
  padding-left:38px;
}

.definition-grid article:last-child{
  border-right:0;
}

.definition-grid span{
  color:var(--blue);
  font-size:14px;
  font-weight:850;
}

.definition-grid h3{
  max-width:370px;
  margin:64px 0 16px;
  font-size:31px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.definition-grid p{
  max-width:390px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.72;
}

/* EDITORIAL SPLIT */
.about-editorial-split{
  min-height:660px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.editorial-visual{
  min-height:660px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 20%,rgba(112,72,255,.12),transparent 30%),
    linear-gradient(145deg,#f6f7fb,#eef0f6);
}

.editorial-photo-large,
.editorial-photo-small,
.editorial-code-panel,
.editorial-type-card{
  position:absolute;
  border-radius:12px;
  box-shadow:0 30px 70px rgba(45,55,88,.14);
}

.editorial-photo-large{
  width:46%;
  height:62%;
  right:8%;
  top:12%;
  background:
    linear-gradient(180deg,rgba(5,8,14,.0),rgba(5,8,14,.12)),
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1100&q=88");
  background-size:cover;
  background-position:center;
}

.editorial-photo-small{
  width:36%;
  height:34%;
  left:9%;
  bottom:12%;
  background:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=88");
  background-size:cover;
  background-position:center;
}

.editorial-code-panel{
  width:40%;
  height:46%;
  right:20%;
  bottom:7%;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(145deg,#0a0f19,#11192a);
  background-size:18px 18px,18px 18px,cover;
}

.editorial-type-card{
  width:34%;
  height:36%;
  left:11%;
  top:14%;
  display:grid;
  place-items:center;
  background:#fff;
  font-family:Georgia,serif;
  font-size:82px;
}

.editorial-token{
  position:absolute;
  width:42px;
  height:42px;
  border-radius:50%;
  box-shadow:0 16px 32px rgba(40,48,80,.14);
}

.token-one{
  left:48%;
  top:18%;
  background:var(--blue);
}

.token-two{
  right:12%;
  bottom:20%;
  background:var(--pink);
}

.editorial-copy{
  padding:82px var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.editorial-copy h2{
  max-width:720px;
  margin:34px 0 26px;
  font-size:clamp(46px,4.2vw,76px);
  line-height:.98;
  letter-spacing:-.058em;
}

.editorial-copy p{
  max-width:640px;
  margin:0 0 30px;
  color:var(--muted);
  font-size:16px;
  line-height:1.78;
}

/* APPROACH */
.about-approach-premium{
  background:#fff;
}

.approach-premium-head{
  display:grid;
  grid-template-columns:1fr .56fr;
  gap:72px;
  align-items:end;
  margin-bottom:54px;
}

.approach-premium-head h2{
  max-width:980px;
  margin:22px 0 0;
  font-size:clamp(44px,4.2vw,76px);
  line-height:.98;
  letter-spacing:-.058em;
  background:linear-gradient(90deg,var(--ink),var(--ink) 58%,var(--blue));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.approach-premium-head p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.76;
}

.approach-map{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.approach-map article{
  min-height:310px;
  padding:34px 32px 30px 0;
  border-right:1px solid var(--line);
}

.approach-map article + article{
  padding-left:32px;
}

.approach-map article:last-child{
  border-right:0;
}

.approach-map span{
  color:var(--blue);
  font-size:14px;
  font-weight:850;
}

.approach-map h3{
  margin:80px 0 14px;
  font-size:27px;
  line-height:1.08;
  letter-spacing:-.035em;
}

.approach-map p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.68;
}

/* DARK TECH */
.about-tech-premium{
  min-height:590px;
  padding:78px var(--pad);
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 80% 45%,rgba(112,72,255,.24),transparent 30%),
    radial-gradient(circle at 96% 12%,rgba(226,67,196,.12),transparent 28%),
    linear-gradient(125deg,#070d16,#08111f 64%,#060a12);
}

.about-tech-copy h2{
  max-width:680px;
  margin:36px 0 26px;
  font-size:clamp(46px,4.4vw,78px);
  line-height:.98;
  letter-spacing:-.058em;
  background:linear-gradient(90deg,#fff,#fff 55%,#7e72ff 78%,#f05abd);
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.about-tech-copy p{
  max-width:600px;
  color:#aeb8c8;
  font-size:15px;
  line-height:1.78;
}

.about-tech-art{
  min-height:420px;
  position:relative;
  display:grid;
  place-items:center;
}

.tech-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(117,102,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(117,102,255,.12) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at center,#000 0 48%,transparent 76%);
  transform:perspective(800px) rotateX(62deg) rotateZ(-16deg);
}

.tech-wave{
  width:min(100%,540px);
  height:330px;
  background:
    radial-gradient(circle,#1e48ff 1.2px,transparent 1.55px),
    radial-gradient(circle,#e243c4 1.2px,transparent 1.55px);
  background-size:14px 14px,22px 22px;
  mask-image:radial-gradient(circle at center,#000 0 56%,transparent 76%);
  transform:rotate(-8deg);
  filter:drop-shadow(0 0 24px rgba(112,72,255,.34));
}

.tech-orb{
  position:absolute;
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#7257ff 40%,#e243c4 78%);
  box-shadow:0 0 70px rgba(112,72,255,.32);
}

.tech-card{
  position:absolute;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}

.card-one{
  width:210px;
  height:120px;
  left:6%;
  top:8%;
}

.card-two{
  width:180px;
  height:150px;
  right:8%;
  bottom:6%;
}

/* FIT */
.about-fit{
  background:
    radial-gradient(circle at 88% 16%,rgba(112,72,255,.06),transparent 28%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.about-fit-head h2{
  max-width:1000px;
  margin:24px 0 46px;
  font-size:clamp(44px,4vw,72px);
  line-height:1;
  letter-spacing:-.058em;
}

.fit-large-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.fit-large-grid article{
  min-height:310px;
  padding:38px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 22px 60px rgba(40,48,80,.045);
}

.fit-large-grid h3{
  max-width:410px;
  margin:0 0 18px;
  font-size:30px;
  line-height:1.06;
  letter-spacing:-.04em;
}

.fit-large-grid p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

/* CTA */
.about-final-cta{
  min-height:360px;
  padding:76px var(--pad);
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px;
  align-items:center;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 10%,rgba(226,67,196,.09),transparent 26%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.about-final-cta h2{
  max-width:1040px;
  margin:18px 0 0;
  font-size:clamp(46px,4.2vw,76px);
  line-height:.98;
  letter-spacing:-.058em;
}

/* Responsive premium about */
@media(max-width:1180px){
  .about-hero-main,
  .about-manifesto,
  .about-editorial-split,
  .approach-premium-head,
  .about-tech-premium,
  .about-final-cta{
    grid-template-columns:1fr;
  }

  .definition-intro{
    grid-template-columns:1fr;
  }

  .definition-grid,
  .approach-map,
  .fit-large-grid{
    grid-template-columns:1fr;
  }

  .definition-grid article,
  .definition-grid article + article,
  .approach-map article,
  .approach-map article + article{
    padding-left:0;
    padding-right:0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .definition-grid article:last-child,
  .approach-map article:last-child{
    border-bottom:0;
  }

  .about-editorial-split{
    min-height:auto;
  }

  .editorial-visual{
    min-height:520px;
  }
}

@media(max-width:760px){
  .about-premium-hero{
    min-height:auto;
    padding-top:34px;
    padding-bottom:56px;
  }

  .about-hero-copy h1{
    font-size:46px;
  }

  .about-hero-copy p{
    font-size:15px;
  }

  .about-hero-composition{
    min-height:390px;
    transform:scale(.86);
    transform-origin:center top;
  }

  .about-manifesto,
  .about-definition,
  .about-approach-premium,
  .about-fit{
    padding-top:56px;
    padding-bottom:56px;
  }

  .manifesto-text h2,
  .definition-intro h2,
  .editorial-copy h2,
  .approach-premium-head h2,
  .about-tech-copy h2,
  .about-fit-head h2,
  .about-final-cta h2{
    font-size:40px;
  }

  .editorial-visual{
    min-height:420px;
  }

  .editorial-copy{
    padding:56px var(--pad);
  }

  .about-tech-premium{
    min-height:auto;
    padding-top:56px;
    padding-bottom:56px;
  }

  .about-tech-art{
    min-height:320px;
  }

  .about-final-cta{
    min-height:auto;
    padding-top:56px;
    padding-bottom:56px;
  }
}


/* =========================================================
   V11 — About page visual correction
   More premium, cleaner, fewer awkward blocks
   ========================================================= */

/* HERO */
.about-v11-hero{
  min-height:720px;
  padding:48px var(--pad) 86px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);
  gap:clamp(48px,7vw,110px);
  align-items:center;
  background:
    radial-gradient(circle at 92% 8%,rgba(226,67,196,.075),transparent 30%),
    radial-gradient(circle at 67% 82%,rgba(29,53,255,.055),transparent 31%),
    linear-gradient(180deg,#fff 0%,#fbfcff 100%);
}

.about-v11-index,
.about-v11-section-label{
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--blue);
  font-size:11px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.about-v11-index span,
.about-v11-section-label span,
.about-v11-small-num{
  color:var(--blue);
  font-weight:850;
}

.about-v11-hero h1{
  max-width:850px;
  margin:30px 0 28px;
  font-size:clamp(64px,5.8vw,108px);
  line-height:.91;
  letter-spacing:-.066em;
}

.about-v11-hero h1 em,
.about-editorial-copy h2,
.about-technology h2,
.about-v11-final h2{
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 35%,var(--blue) 56%,var(--violet) 72%,var(--pink) 88%,var(--coral));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.about-v11-hero p{
  max-width:610px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.76;
}

.about-v11-hero-actions{
  margin-top:32px;
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
}

.about-v11-hero-art{
  min-height:560px;
  position:relative;
  perspective:1000px;
}

.about-v11-grid{
  position:absolute;
  inset:14% 0 0;
  background:
    linear-gradient(rgba(65,79,140,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(65,79,140,.08) 1px,transparent 1px);
  background-size:42px 42px;
  transform:rotateX(60deg) rotateZ(-10deg);
  transform-origin:center bottom;
}

.about-v11-photo{
  position:absolute;
  width:44%;
  height:62%;
  right:5%;
  top:12%;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(5,8,14,.02),rgba(5,8,14,.14)),
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1200&q=88");
  background-size:cover;
  background-position:center;
  box-shadow:0 38px 80px rgba(40,48,80,.16);
}

.about-v11-dark-panel{
  position:absolute;
  width:43%;
  height:45%;
  left:21%;
  top:18%;
  border-radius:16px;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(145deg,#0a0f19,#11192a);
  background-size:20px 20px,20px 20px,cover;
  box-shadow:0 35px 70px rgba(10,15,25,.24);
}

.about-v11-white-card{
  position:absolute;
  width:38%;
  height:28%;
  left:5%;
  bottom:19%;
  border-radius:14px;
  background:linear-gradient(145deg,#fff,#eff1f8);
  box-shadow:0 30px 60px rgba(54,64,96,.13);
}

.about-v11-orb{
  position:absolute;
  width:210px;
  height:210px;
  right:30%;
  bottom:14%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#8d77ff 45%,#e243c4 78%);
  opacity:.86;
  box-shadow:0 30px 60px rgba(112,72,255,.18);
}

.about-v11-cube{
  position:absolute;
  width:112px;
  height:112px;
  left:28%;
  bottom:13%;
  background:linear-gradient(135deg,#1d35ff,rgba(24,200,214,.42));
  box-shadow:0 24px 50px rgba(29,53,255,.22);
}

.about-v11-node{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
}

.about-v11-node.node-a{left:12%;top:24%}
.about-v11-node.node-b{right:8%;top:60%;background:var(--coral)}

/* STATEMENT */
.about-v11-statement{
  padding:88px var(--pad);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}

.about-v11-statement-grid{
  margin-top:42px;
  display:grid;
  grid-template-columns:1.15fr .65fr;
  gap:clamp(44px,7vw,110px);
  align-items:end;
}

.about-v11-statement h2{
  max-width:1050px;
  margin:0;
  font-size:clamp(48px,4.9vw,86px);
  line-height:.98;
  letter-spacing:-.06em;
}

.about-v11-statement p{
  max-width:520px;
  margin:0 0 6px;
  color:var(--muted);
  font-size:16px;
  line-height:1.78;
}

/* PRINCIPLES */
.about-values-section{
  background:
    radial-gradient(circle at 90% 9%,rgba(112,72,255,.06),transparent 28%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.about-v11-heading{
  display:grid;
  grid-template-columns:.22fr .9fr .72fr;
  gap:42px;
  align-items:end;
  margin-bottom:46px;
}

.about-v11-heading span{
  color:var(--blue);
  font-weight:850;
}

.about-v11-heading h2{
  max-width:760px;
  margin:0;
  font-size:clamp(44px,4vw,72px);
  line-height:1;
  letter-spacing:-.058em;
}

.about-v11-heading p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

.about-values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.about-values-grid article{
  min-height:330px;
  padding:34px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 22px 60px rgba(40,48,80,.04);
}

.about-values-grid article span{
  color:var(--blue);
  font-size:14px;
  font-weight:850;
}

.about-values-grid h3{
  max-width:380px;
  margin:70px 0 16px;
  font-size:31px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.about-values-grid p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.72;
}

/* EDITORIAL */
.about-editorial{
  min-height:650px;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.about-editorial-visual{
  min-height:650px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 22%,rgba(112,72,255,.12),transparent 30%),
    linear-gradient(145deg,#f6f7fb,#eef0f6);
}

.about-v11-board-photo,
.about-v11-board-code,
.about-v11-board-type,
.about-v11-board-sheet{
  position:absolute;
  border-radius:14px;
  box-shadow:0 30px 70px rgba(45,55,88,.14);
}

.about-v11-board-photo{
  width:48%;
  height:64%;
  right:8%;
  top:12%;
  background:
    linear-gradient(180deg,rgba(5,8,14,.0),rgba(5,8,14,.12)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1100&q=88");
  background-size:cover;
  background-position:center;
}

.about-v11-board-code{
  width:40%;
  height:46%;
  right:21%;
  bottom:7%;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(145deg,#0a0f19,#11192a);
  background-size:18px 18px,18px 18px,cover;
}

.about-v11-board-type{
  width:34%;
  height:34%;
  left:9%;
  top:17%;
  display:grid;
  place-items:center;
  background:#fff;
  font-family:Georgia,serif;
  font-size:82px;
}

.about-v11-board-sheet{
  width:35%;
  height:34%;
  left:13%;
  bottom:12%;
  background:
    radial-gradient(circle at 75% 20%,rgba(112,72,255,.13),transparent 30%),
    linear-gradient(145deg,#fff,#f0f2f8);
}

.about-v11-board-dot{
  position:absolute;
  width:34px;
  height:34px;
  border-radius:50%;
  box-shadow:0 16px 32px rgba(40,48,80,.16);
}

.about-v11-board-dot.dot-one{
  left:40%;
  top:20%;
  background:var(--blue);
}

.about-v11-board-dot.dot-two{
  right:11%;
  bottom:22%;
  background:var(--pink);
}

.about-editorial-copy{
  padding:82px var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.about-editorial-copy h2{
  max-width:720px;
  margin:34px 0 26px;
  font-size:clamp(46px,4.2vw,76px);
  line-height:.98;
  letter-spacing:-.058em;
}

.about-editorial-copy p{
  max-width:640px;
  margin:0 0 30px;
  color:var(--muted);
  font-size:16px;
  line-height:1.78;
}

/* APPROACH */
.about-v11-approach{
  background:#fff;
}

.about-v11-approach-head{
  display:grid;
  grid-template-columns:1fr .52fr;
  gap:72px;
  align-items:end;
  margin-bottom:56px;
}

.about-v11-approach-head h2{
  max-width:980px;
  margin:18px 0 0;
  font-size:clamp(44px,4.2vw,76px);
  line-height:.98;
  letter-spacing:-.058em;
}

.about-v11-approach-head p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.76;
}

.about-process-map{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.about-process-map article{
  min-height:280px;
  padding:34px 32px 30px 0;
  border-right:1px solid var(--line);
}

.about-process-map article + article{
  padding-left:32px;
}

.about-process-map article:last-child{
  border-right:0;
}

.about-process-map span{
  color:var(--blue);
  font-weight:850;
}

.about-process-map h3{
  margin:76px 0 14px;
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.035em;
}

.about-process-map p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.68;
}

/* TECH DARK */
.about-technology{
  min-height:600px;
  padding:82px var(--pad);
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:70px;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 80% 45%,rgba(112,72,255,.24),transparent 30%),
    radial-gradient(circle at 96% 12%,rgba(226,67,196,.12),transparent 28%),
    linear-gradient(125deg,#070d16,#08111f 64%,#060a12);
}

.light-label{
  color:#b7b0ff;
}

.about-technology h2{
  max-width:720px;
  margin:36px 0 26px;
  font-size:clamp(46px,4.3vw,78px);
  line-height:.98;
  letter-spacing:-.058em;
  background:linear-gradient(90deg,#fff,#fff 54%,#7e72ff 76%,#f05abd);
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.about-technology p{
  max-width:610px;
  margin:0;
  color:#aeb8c8;
  font-size:15px;
  line-height:1.78;
}

.about-v11-tech-art{
  min-height:430px;
  position:relative;
  display:grid;
  place-items:center;
}

.tech-v11-field{
  width:min(100%,540px);
  height:330px;
  background:
    radial-gradient(circle,#1e48ff 1.2px,transparent 1.55px),
    radial-gradient(circle,#e243c4 1.2px,transparent 1.55px);
  background-size:14px 14px,22px 22px;
  mask-image:radial-gradient(circle at center,#000 0 56%,transparent 76%);
  transform:rotate(-8deg);
  filter:drop-shadow(0 0 24px rgba(112,72,255,.34));
}

.tech-v11-orb{
  position:absolute;
  width:132px;
  height:132px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#7257ff 40%,#e243c4 78%);
  box-shadow:0 0 70px rgba(112,72,255,.32);
}

.tech-v11-card{
  position:absolute;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}

.tech-v11-card.card-a{
  width:210px;
  height:120px;
  left:6%;
  top:8%;
}

.tech-v11-card.card-b{
  width:180px;
  height:150px;
  right:8%;
  bottom:6%;
}

/* FIT */
.about-project-fit{
  background:
    radial-gradient(circle at 88% 16%,rgba(112,72,255,.06),transparent 28%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.about-v11-fit-head span{
  color:var(--blue);
  font-weight:850;
}

.about-v11-fit-head h2{
  max-width:1060px;
  margin:24px 0 46px;
  font-size:clamp(44px,4vw,72px);
  line-height:1;
  letter-spacing:-.058em;
}

.about-v11-fit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.about-v11-fit-grid article{
  min-height:300px;
  padding:38px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 22px 60px rgba(40,48,80,.045);
}

.about-v11-fit-grid h3{
  max-width:410px;
  margin:0 0 18px;
  font-size:30px;
  line-height:1.06;
  letter-spacing:-.04em;
}

.about-v11-fit-grid p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

/* FINAL CTA */
.about-v11-final{
  min-height:360px;
  padding:76px var(--pad);
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px;
  align-items:center;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 10%,rgba(226,67,196,.09),transparent 26%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.about-v11-final h2{
  max-width:1040px;
  margin:18px 0 0;
  font-size:clamp(46px,4.2vw,76px);
  line-height:.98;
  letter-spacing:-.058em;
}

/* RESPONSIVE */
@media(max-width:1180px){
  .about-v11-hero,
  .about-v11-statement-grid,
  .about-v11-heading,
  .about-editorial,
  .about-v11-approach-head,
  .about-technology,
  .about-v11-final{
    grid-template-columns:1fr;
  }

  .about-v11-hero-art{
    min-height:500px;
  }

  .about-values-grid,
  .about-process-map,
  .about-v11-fit-grid{
    grid-template-columns:1fr;
  }

  .about-process-map article,
  .about-process-map article + article{
    padding-left:0;
    padding-right:0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .about-process-map article:last-child{
    border-bottom:0;
  }

  .about-editorial-visual{
    min-height:520px;
  }
}

@media(max-width:760px){
  .about-v11-hero{
    min-height:auto;
    padding-top:36px;
    padding-bottom:58px;
  }

  .about-v11-hero h1{
    font-size:46px;
  }

  .about-v11-hero p{
    font-size:15px;
  }

  .about-v11-hero-art{
    min-height:380px;
    transform:scale(.86);
    transform-origin:center top;
  }

  .about-v11-statement,
  .about-values-section,
  .about-v11-approach,
  .about-project-fit{
    padding-top:58px;
    padding-bottom:58px;
  }

  .about-v11-statement h2,
  .about-v11-heading h2,
  .about-editorial-copy h2,
  .about-v11-approach-head h2,
  .about-technology h2,
  .about-v11-fit-head h2,
  .about-v11-final h2{
    font-size:40px;
  }

  .about-editorial-visual{
    min-height:420px;
  }

  .about-editorial-copy{
    padding:58px var(--pad);
  }

  .about-technology{
    min-height:auto;
    padding-top:58px;
    padding-bottom:58px;
  }

  .about-v11-tech-art{
    min-height:320px;
  }

  .about-v11-final{
    min-height:auto;
    padding-top:58px;
    padding-bottom:58px;
  }
}


/* =========================================================
   V12 — About cleanup
   ========================================================= */

/* After removing `.about-v11-statement`, the principles section needs cleaner top rhythm */
.about-values-section{
  border-top:1px solid var(--line);
}

/* Simplified heading: left aligned, no number, no paragraph */
.about-v11-heading-simple{
  display:block !important;
  margin-bottom:46px;
}

.about-v11-heading-simple h2{
  max-width:900px;
  margin:0 !important;
  text-align:left;
}

/* Prevent old grid styles from adding empty columns */
.about-v11-heading-simple::before,
.about-v11-heading-simple::after{
  content:none !important;
}

@media(max-width:1180px){
  .about-v11-heading-simple{
    display:block !important;
  }
}


/* =========================================================
   V13 — About CTA redesign + Services page
   ========================================================= */

/* Replace old about final CTA with a more aesthetic editorial CTA */
.about-v13-final{
  min-height:430px;
  padding:76px var(--pad);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.78fr);
  gap:clamp(42px,6vw,86px);
  align-items:center;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 88% 8%,rgba(226,67,196,.09),transparent 28%),
    radial-gradient(circle at 72% 80%,rgba(29,53,255,.06),transparent 30%),
    linear-gradient(180deg,#ffffff,#fafbfe);
}

.about-v13-final-copy h2{
  max-width:980px;
  margin:18px 0 20px;
  font-size:clamp(46px,4.6vw,82px);
  line-height:.96;
  letter-spacing:-.062em;
  background:linear-gradient(90deg,var(--ink),var(--ink) 45%,var(--blue) 64%,var(--violet) 78%,var(--pink));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.about-v13-final-copy p{
  max-width:620px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}

.about-v13-final-actions{
  margin-top:30px;
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
}

.about-v13-final-card{
  min-height:320px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 18%,rgba(112,72,255,.16),transparent 34%),
    linear-gradient(145deg,#ffffff,#f0f2f8);
  box-shadow:0 26px 70px rgba(40,48,80,.07);
}

.final-card-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(65,79,140,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(65,79,140,.08) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(circle at center,#000 0 48%,transparent 78%);
}

.final-card-panel{
  position:absolute;
  width:46%;
  height:42%;
  right:12%;
  top:16%;
  border-radius:14px;
  background:linear-gradient(145deg,#0a0f19,#11192a);
  box-shadow:0 24px 54px rgba(10,15,25,.22);
}

.final-card-orb{
  position:absolute;
  width:138px;
  height:138px;
  right:26%;
  bottom:18%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#7257ff 42%,#e243c4 78%);
  box-shadow:0 24px 54px rgba(112,72,255,.24);
}

.final-card-cube{
  position:absolute;
  width:82px;
  height:82px;
  left:18%;
  bottom:22%;
  background:linear-gradient(135deg,#1d35ff,rgba(24,200,214,.42));
  box-shadow:0 18px 42px rgba(29,53,255,.2);
}

.final-card-node{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
}

.final-card-node.node-one{left:16%;top:26%}
.final-card-node.node-two{right:18%;bottom:18%;background:var(--coral)}

/* Hide old V11 final styles in case old classes remain somewhere */
.about-v11-final{
  display:none !important;
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */

.services-v13-hero{
  min-height:720px;
  padding:48px var(--pad) 86px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);
  gap:clamp(48px,7vw,110px);
  align-items:center;
  background:
    radial-gradient(circle at 92% 8%,rgba(226,67,196,.075),transparent 30%),
    radial-gradient(circle at 67% 82%,rgba(29,53,255,.055),transparent 31%),
    linear-gradient(180deg,#fff 0%,#fbfcff 100%);
}

.services-v13-index{
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--blue);
  font-size:11px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.services-v13-index span{
  font-size:14px;
}

.services-v13-hero h1{
  max-width:900px;
  margin:30px 0 28px;
  font-size:clamp(62px,5.6vw,106px);
  line-height:.91;
  letter-spacing:-.066em;
}

.services-v13-hero h1 em,
.services-v13-overview h2,
.service-detail h2,
.creative-tech-v13 h2,
.services-v13-process h2,
.services-v13-cta h2{
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 42%,var(--blue) 62%,var(--violet) 76%,var(--pink) 90%,var(--coral));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.services-v13-hero p{
  max-width:610px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.76;
}

.services-v13-actions{
  margin-top:32px;
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
}

.services-v13-hero-art{
  min-height:560px;
  position:relative;
  perspective:1000px;
}

.services-v13-grid{
  position:absolute;
  inset:14% 0 0;
  background:
    linear-gradient(rgba(65,79,140,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(65,79,140,.08) 1px,transparent 1px);
  background-size:42px 42px;
  transform:rotateX(60deg) rotateZ(-10deg);
  transform-origin:center bottom;
}

.services-v13-panel{
  position:absolute;
  border-radius:16px;
  box-shadow:0 35px 70px rgba(10,15,25,.18);
}

.services-v13-panel.dark-panel{
  width:44%;
  height:46%;
  right:8%;
  top:18%;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(145deg,#0a0f19,#11192a);
  background-size:20px 20px,20px 20px,cover;
}

.services-v13-panel.glass-panel{
  width:34%;
  height:48%;
  left:12%;
  top:16%;
  border:1px solid rgba(120,130,170,.16);
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(109,129,255,.18));
  backdrop-filter:blur(10px);
}

.services-v13-platform{
  position:absolute;
  width:54%;
  height:20%;
  right:16%;
  bottom:16%;
  transform:skewX(-8deg);
  background:linear-gradient(145deg,#fff,#dfe2eb);
  box-shadow:0 30px 60px rgba(55,64,90,.14);
}

.services-v13-orb{
  position:absolute;
  width:240px;
  height:240px;
  right:4%;
  bottom:19%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#8d77ff 45%,#e243c4 78%);
  opacity:.82;
  box-shadow:0 30px 60px rgba(112,72,255,.18);
}

.services-v13-cube{
  position:absolute;
  width:118px;
  height:118px;
  left:20%;
  bottom:16%;
  background:linear-gradient(135deg,#1d35ff,rgba(24,200,214,.42));
  box-shadow:0 24px 50px rgba(29,53,255,.22);
}

.services-v13-node{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
}

.services-v13-node.node-a{left:12%;top:26%}
.services-v13-node.node-b{right:11%;top:60%;background:var(--coral)}

/* Services overview */
.services-v13-overview{
  background:#fff;
  border-top:1px solid var(--line);
}

.services-v13-heading{
  display:grid;
  grid-template-columns:.2fr .95fr .7fr;
  gap:42px;
  align-items:end;
  margin-bottom:48px;
}

.services-v13-heading span{
  color:var(--blue);
  font-weight:850;
}

.services-v13-heading h2{
  max-width:850px;
  margin:0;
  font-size:clamp(44px,4.2vw,76px);
  line-height:.98;
  letter-spacing:-.058em;
}

.services-v13-heading p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.76;
}

.services-v13-core-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.services-v13-core-grid article{
  min-height:360px;
  padding:38px;
  border:1px solid var(--line);
  border-radius:16px;
  background:
    radial-gradient(circle at 85% 16%,rgba(112,72,255,.07),transparent 30%),
    linear-gradient(145deg,#fff,#f7f8fc);
  box-shadow:0 22px 60px rgba(40,48,80,.045);
}

.services-v13-core-grid article span{
  color:var(--blue);
  font-size:14px;
  font-weight:850;
}

.services-v13-core-grid h3{
  max-width:380px;
  margin:78px 0 18px;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.services-v13-core-grid p{
  margin:0 0 28px;
  color:var(--muted);
  font-size:14px;
  line-height:1.72;
}

.services-v13-core-grid a{
  color:var(--blue);
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
}

/* Service detail split sections */
.service-detail{
  min-height:620px;
  padding:78px var(--pad);
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:clamp(48px,7vw,100px);
  align-items:center;
  border-top:1px solid var(--line);
}

.service-detail-light{
  background:
    radial-gradient(circle at 92% 10%,rgba(112,72,255,.06),transparent 28%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.service-detail-dark{
  color:#fff;
  background:
    radial-gradient(circle at 80% 45%,rgba(112,72,255,.24),transparent 30%),
    radial-gradient(circle at 96% 12%,rgba(226,67,196,.12),transparent 28%),
    linear-gradient(125deg,#070d16,#08111f 64%,#060a12);
}

.service-detail-dark h2{
  background:linear-gradient(90deg,#fff,#fff 50%,#7e72ff 75%,#f05abd);
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.service-detail-dark p,
.service-detail-dark .service-list li{
  color:#aeb8c8;
}

.service-detail-num{
  color:var(--blue);
  font-size:14px;
  font-weight:850;
  margin-right:18px;
}

.service-detail h2{
  max-width:760px;
  margin:34px 0 24px;
  font-size:clamp(44px,4.2vw,74px);
  line-height:.98;
  letter-spacing:-.058em;
}

.service-detail p{
  max-width:620px;
  margin:0 0 28px;
  color:var(--muted);
  font-size:15px;
  line-height:1.76;
}

.service-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 20px;
}

.service-list li{
  color:var(--muted);
  font-size:13px;
}

.service-list li::before{
  content:"→";
  color:var(--blue);
  margin-right:10px;
}

.service-detail-visual{
  min-height:430px;
  position:relative;
  overflow:hidden;
  border-radius:18px;
}

/* Brand visual */
.brand-visual{
  background:
    radial-gradient(circle at 80% 18%,rgba(112,72,255,.12),transparent 30%),
    linear-gradient(145deg,#f6f7fb,#eef0f6);
}

.brand-sheet,
.brand-type,
.brand-gradient{
  position:absolute;
  border-radius:14px;
  box-shadow:0 28px 60px rgba(45,55,88,.13);
}

.brand-sheet.sheet-one{
  width:45%;
  height:56%;
  right:12%;
  top:13%;
  background:#fff;
}

.brand-sheet.sheet-two{
  width:38%;
  height:40%;
  left:12%;
  bottom:12%;
  background:linear-gradient(145deg,#fff,#f0f2f8);
}

.brand-type{
  width:30%;
  height:36%;
  left:12%;
  top:14%;
  display:grid;
  place-items:center;
  background:#fff;
  font-family:Georgia,serif;
  font-size:78px;
}

.brand-gradient{
  width:35%;
  height:25%;
  right:18%;
  bottom:15%;
  background:linear-gradient(135deg,#1d35ff,#7048ff 50%,#e243c4);
}

/* Experience visual */
.experience-visual{
  background:linear-gradient(145deg,#0a0f19,#11192a);
}

.experience-screen{
  position:absolute;
  border-radius:16px;
  box-shadow:0 28px 70px rgba(0,0,0,.28);
}

.experience-screen.screen-one{
  width:58%;
  height:58%;
  left:10%;
  top:18%;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(145deg,#111a2d,#070b13);
  background-size:20px 20px,20px 20px,cover;
}

.experience-screen.screen-two{
  width:38%;
  height:44%;
  right:9%;
  bottom:12%;
  background:linear-gradient(145deg,#182fff,#7b48ff 60%,#e243c4);
}

.experience-orb{
  position:absolute;
  width:160px;
  height:160px;
  right:18%;
  top:14%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#7257ff 40%,#e243c4 78%);
}

.experience-field{
  position:absolute;
  width:60%;
  height:58%;
  right:3%;
  top:22%;
  background:
    radial-gradient(circle,#1e48ff 1px,transparent 1.45px),
    radial-gradient(circle,#e243c4 1px,transparent 1.45px);
  background-size:14px 14px,22px 22px;
  mask-image:radial-gradient(circle at center,#000 0 52%,transparent 74%);
}

/* Technology visual */
.technology-visual{
  background:
    radial-gradient(circle at 82% 18%,rgba(112,72,255,.12),transparent 30%),
    linear-gradient(145deg,#f6f7fb,#eef0f6);
}

.tech-service-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(65,79,140,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(65,79,140,.08) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(circle at center,#000 0 55%,transparent 82%);
}

.tech-service-card{
  position:absolute;
  border-radius:14px;
  box-shadow:0 28px 60px rgba(45,55,88,.13);
}

.tech-service-card.card-one{
  width:45%;
  height:42%;
  left:12%;
  top:16%;
  background:linear-gradient(145deg,#fff,#eef0f7);
}

.tech-service-card.card-two{
  width:40%;
  height:46%;
  right:12%;
  bottom:12%;
  background:linear-gradient(145deg,#0a0f19,#11192a);
}

.tech-service-cube{
  position:absolute;
  width:120px;
  height:120px;
  left:42%;
  top:38%;
  background:linear-gradient(135deg,#1d35ff,#7048ff 58%,#e243c4);
  box-shadow:0 28px 60px rgba(112,72,255,.22);
}

/* Creative Tech dark panel */
.creative-tech-v13{
  min-height:590px;
  padding:82px var(--pad);
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:70px;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 80% 45%,rgba(112,72,255,.24),transparent 30%),
    radial-gradient(circle at 96% 12%,rgba(226,67,196,.12),transparent 28%),
    linear-gradient(125deg,#070d16,#08111f 64%,#060a12);
}

.creative-tech-v13 h2{
  max-width:760px;
  margin:36px 0 26px;
  font-size:clamp(44px,4.2vw,74px);
  line-height:.98;
  letter-spacing:-.058em;
  background:linear-gradient(90deg,#fff,#fff 50%,#7e72ff 75%,#f05abd);
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.creative-tech-v13 p{
  max-width:610px;
  margin:0;
  color:#aeb8c8;
  font-size:15px;
  line-height:1.78;
}

.creative-tech-art{
  min-height:420px;
  position:relative;
  display:grid;
  place-items:center;
}

.creative-wave{
  width:min(100%,540px);
  height:330px;
  background:
    radial-gradient(circle,#1e48ff 1.2px,transparent 1.55px),
    radial-gradient(circle,#e243c4 1.2px,transparent 1.55px);
  background-size:14px 14px,22px 22px;
  mask-image:radial-gradient(circle at center,#000 0 56%,transparent 76%);
  transform:rotate(-8deg);
  filter:drop-shadow(0 0 24px rgba(112,72,255,.34));
}

.creative-orb{
  position:absolute;
  width:132px;
  height:132px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#7257ff 40%,#e243c4 78%);
  box-shadow:0 0 70px rgba(112,72,255,.32);
}

.creative-card{
  position:absolute;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}

.creative-card.card-a{
  width:210px;
  height:120px;
  left:6%;
  top:8%;
}

.creative-card.card-b{
  width:180px;
  height:150px;
  right:8%;
  bottom:6%;
}

/* Services process */
.services-v13-process{
  background:#fff;
}

.services-process-head{
  margin-bottom:48px;
}

.services-process-head span{
  color:var(--blue);
  font-weight:850;
}

.services-process-head h2{
  max-width:900px;
  margin:22px 0 0;
  font-size:clamp(44px,4vw,72px);
  line-height:1;
  letter-spacing:-.058em;
}

.services-process-line{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.services-process-line article{
  min-height:260px;
  padding:34px 32px 30px 0;
  border-right:1px solid var(--line);
}

.services-process-line article + article{
  padding-left:32px;
}

.services-process-line article:last-child{
  border-right:0;
}

.services-process-line span{
  color:var(--blue);
  font-weight:850;
}

.services-process-line h3{
  margin:78px 0 14px;
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.035em;
}

.services-process-line p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.68;
}

/* Services CTA */
.services-v13-cta{
  min-height:380px;
  padding:76px var(--pad);
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px;
  align-items:center;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 10%,rgba(226,67,196,.09),transparent 26%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.services-v13-cta h2{
  max-width:1040px;
  margin:18px 0 0;
  font-size:clamp(46px,4.2vw,76px);
  line-height:.98;
  letter-spacing:-.058em;
}

/* Responsive */
@media(max-width:1180px){
  .about-v13-final,
  .services-v13-hero,
  .services-v13-heading,
  .service-detail,
  .creative-tech-v13,
  .services-v13-cta{
    grid-template-columns:1fr;
  }

  .services-v13-hero-art{
    min-height:500px;
  }

  .services-v13-core-grid,
  .services-process-line{
    grid-template-columns:1fr;
  }

  .services-process-line article,
  .services-process-line article + article{
    padding-left:0;
    padding-right:0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .services-process-line article:last-child{
    border-bottom:0;
  }
}

@media(max-width:760px){
  .about-v13-final,
  .services-v13-hero,
  .services-v13-overview,
  .service-detail,
  .creative-tech-v13,
  .services-v13-process,
  .services-v13-cta{
    padding-top:58px;
    padding-bottom:58px;
  }

  .about-v13-final-copy h2,
  .services-v13-hero h1,
  .services-v13-heading h2,
  .service-detail h2,
  .creative-tech-v13 h2,
  .services-process-head h2,
  .services-v13-cta h2{
    font-size:40px;
  }

  .about-v13-final-card{
    min-height:280px;
  }

  .services-v13-hero-art{
    min-height:380px;
    transform:scale(.86);
    transform-origin:center top;
  }

  .service-list{
    grid-template-columns:1fr;
  }

  .service-detail-visual,
  .creative-tech-art{
    min-height:320px;
  }

  .services-v13-core-grid article{
    min-height:280px;
  }
}


/* =========================================================
   V14 — Premium Portfolio page
   ========================================================= */

.portfolio-v14-hero{min-height:720px;padding:48px var(--pad) 86px;display:grid;grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr);gap:clamp(48px,7vw,110px);align-items:center;background:radial-gradient(circle at 92% 8%,rgba(226,67,196,.075),transparent 30%),radial-gradient(circle at 67% 82%,rgba(29,53,255,.055),transparent 31%),linear-gradient(180deg,#fff 0%,#fbfcff 100%)}
.portfolio-v14-index{display:flex;align-items:center;gap:18px;color:var(--blue);font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.portfolio-v14-index span{font-size:14px}.portfolio-v14-hero h1{max-width:920px;margin:30px 0 28px;font-size:clamp(62px,5.6vw,106px);line-height:.91;letter-spacing:-.066em}.portfolio-v14-hero h1 em,.portfolio-featured h2,.portfolio-index-head h2,.portfolio-method-head h2,.portfolio-v14-cta h2{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 42%,var(--blue) 62%,var(--violet) 76%,var(--pink) 90%,var(--coral));color:transparent;-webkit-background-clip:text;background-clip:text}.portfolio-v14-hero p{max-width:620px;margin:0;color:var(--muted);font-size:17px;line-height:1.76}.portfolio-v14-actions{margin-top:32px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}.portfolio-v14-hero-art{min-height:560px;position:relative;perspective:1000px}.portfolio-v14-grid{position:absolute;inset:14% 0 0;background:linear-gradient(rgba(65,79,140,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(65,79,140,.08) 1px,transparent 1px);background-size:42px 42px;transform:rotateX(60deg) rotateZ(-10deg);transform-origin:center bottom}.portfolio-v14-main-screen{position:absolute;width:50%;height:46%;right:8%;top:18%;border-radius:16px;background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(145deg,#0a0f19,#11192a);background-size:20px 20px,20px 20px,cover;box-shadow:0 35px 70px rgba(10,15,25,.23)}.portfolio-v14-side-screen{position:absolute;width:36%;height:48%;left:10%;top:18%;border:1px solid rgba(120,130,170,.16);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(109,129,255,.18));backdrop-filter:blur(10px);box-shadow:0 30px 60px rgba(54,64,96,.13)}.portfolio-v14-image-card{position:absolute;width:46%;height:35%;left:18%;bottom:11%;border-radius:16px;background:linear-gradient(180deg,rgba(5,8,14,.0),rgba(5,8,14,.18)),url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1200&q=88");background-size:cover;background-position:center;box-shadow:0 34px 70px rgba(45,55,88,.16)}.portfolio-v14-orb{position:absolute;width:230px;height:230px;right:4%;bottom:16%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,#8d77ff 45%,#e243c4 78%);opacity:.82;box-shadow:0 30px 60px rgba(112,72,255,.18)}.portfolio-v14-cube{position:absolute;width:112px;height:112px;left:24%;bottom:18%;background:linear-gradient(135deg,#1d35ff,rgba(24,200,214,.42));box-shadow:0 24px 50px rgba(29,53,255,.22)}.portfolio-v14-node{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--blue)}.portfolio-v14-node.node-a{left:12%;top:26%}.portfolio-v14-node.node-b{right:11%;top:62%;background:var(--coral)}
.portfolio-featured{min-height:690px;padding:82px var(--pad);display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(52px,7vw,110px);align-items:center;border-top:1px solid var(--line);background:radial-gradient(circle at 90% 12%,rgba(112,72,255,.06),transparent 28%),linear-gradient(180deg,#fff,#fafbfe)}.portfolio-featured-num{color:var(--blue);font-size:14px;font-weight:850;margin-right:18px}.portfolio-featured h2{margin:34px 0 12px;font-size:clamp(58px,5.4vw,104px);line-height:.9;letter-spacing:-.065em}.portfolio-featured h3{max-width:640px;margin:0 0 24px;font-size:clamp(30px,3vw,50px);line-height:1.04;letter-spacing:-.045em}.portfolio-featured p{max-width:600px;margin:0 0 26px;color:var(--muted);font-size:15px;line-height:1.76}.portfolio-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}.portfolio-tags span{padding:9px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.portfolio-featured-visual{min-height:520px;position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:radial-gradient(circle at 78% 18%,rgba(112,72,255,.14),transparent 34%),linear-gradient(145deg,#f6f7fb,#eef0f6);box-shadow:0 30px 80px rgba(40,48,80,.07)}.featured-device{position:absolute;width:62%;height:58%;left:15%;top:20%;border-radius:22px;background:linear-gradient(180deg,rgba(5,8,14,.02),rgba(5,8,14,.16)),url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1400&q=88");background-size:cover;background-position:center;transform:rotate(-7deg);box-shadow:0 38px 80px rgba(30,40,70,.22)}.featured-panel{position:absolute;border-radius:14px;box-shadow:0 24px 54px rgba(45,55,88,.12)}.featured-panel.panel-a{width:30%;height:34%;right:8%;top:13%;background:linear-gradient(145deg,#0a0f19,#11192a)}.featured-panel.panel-b{width:25%;height:24%;left:10%;bottom:12%;background:#fff}.featured-gradient{position:absolute;width:120px;height:120px;right:20%;bottom:16%;background:linear-gradient(135deg,#1d35ff,#7048ff 58%,#e243c4);box-shadow:0 28px 60px rgba(112,72,255,.22)}
.portfolio-index-section{border-top:1px solid var(--line);background:#fff}.portfolio-index-head{display:grid;grid-template-columns:.18fr .92fr .72fr;gap:42px;align-items:end;margin-bottom:48px}.portfolio-index-head span{color:var(--blue);font-weight:850}.portfolio-index-head h2{max-width:760px;margin:0;font-size:clamp(44px,4vw,72px);line-height:1;letter-spacing:-.058em}.portfolio-index-head p{max-width:560px;margin:0;color:var(--muted);font-size:15px;line-height:1.76}.portfolio-index-list{border-top:1px solid var(--line)}.portfolio-index-list a{min-height:112px;display:grid;grid-template-columns:70px 1fr 1.2fr 54px;gap:24px;align-items:center;border-bottom:1px solid var(--line)}.portfolio-index-list span{color:var(--blue);font-size:14px;font-weight:850}.portfolio-index-list strong{font-size:32px;letter-spacing:-.04em}.portfolio-index-list em{font-style:normal;color:var(--muted);font-size:15px}.portfolio-index-list i{width:42px;height:42px;display:grid;place-items:center;justify-self:end;border:1px solid var(--line);border-radius:50%;font-style:normal}
.portfolio-case-grid{padding:0 var(--pad) 82px;display:grid;grid-template-columns:1fr 1fr;gap:32px;background:#fff}.portfolio-case-card{min-height:620px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 24px 70px rgba(40,48,80,.045)}.portfolio-case-card.case-large{grid-column:1/-1;display:grid;grid-template-columns:1.12fr .88fr;min-height:600px}.case-card-image{min-height:330px;background-size:cover;background-position:center}.case-large .case-card-image{min-height:600px}.lumina-image{background-image:linear-gradient(180deg,rgba(5,8,14,.02),rgba(5,8,14,.16)),url("https://images.unsplash.com/photo-1559028006-448665bd7c7f?auto=format&fit=crop&w=1400&q=88")}.aurora-image{background-image:url("https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=1200&q=88")}.velo-image{background-image:url("https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=1200&q=88")}.case-card-copy{padding:44px;display:flex;flex-direction:column;justify-content:flex-end}.case-card-copy span{color:var(--blue);font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.case-card-copy h2{max-width:680px;margin:28px 0 18px;font-size:clamp(32px,3vw,54px);line-height:1.02;letter-spacing:-.052em}.case-card-copy p{max-width:520px;margin:0 0 26px;color:var(--muted);font-size:14px;line-height:1.72}.case-card-copy a{color:var(--blue);font-size:12px;font-weight:850;text-transform:uppercase}
.portfolio-lab-showcase{min-height:590px;padding:82px var(--pad);display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:center;color:#fff;background:radial-gradient(circle at 80% 45%,rgba(112,72,255,.24),transparent 30%),radial-gradient(circle at 96% 12%,rgba(226,67,196,.12),transparent 28%),linear-gradient(125deg,#070d16,#08111f 64%,#060a12)}.portfolio-lab-showcase h2{max-width:720px;margin:36px 0 26px;font-size:clamp(46px,4.3vw,78px);line-height:.98;letter-spacing:-.058em;background:linear-gradient(90deg,#fff,#fff 54%,#7e72ff 76%,#f05abd);color:transparent;-webkit-background-clip:text;background-clip:text}.portfolio-lab-showcase p{max-width:610px;margin:0 0 30px;color:#aeb8c8;font-size:15px;line-height:1.78}.portfolio-lab-art{min-height:430px;position:relative;display:grid;place-items:center}.portfolio-wave{width:min(100%,540px);height:330px;background:radial-gradient(circle,#1e48ff 1.2px,transparent 1.55px),radial-gradient(circle,#e243c4 1.2px,transparent 1.55px);background-size:14px 14px,22px 22px;mask-image:radial-gradient(circle at center,#000 0 56%,transparent 76%);transform:rotate(-8deg);filter:drop-shadow(0 0 24px rgba(112,72,255,.34))}.portfolio-play{position:absolute;width:86px;height:86px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);backdrop-filter:blur(10px)}.portfolio-floating-card{position:absolute;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);backdrop-filter:blur(10px)}.portfolio-floating-card.card-a{width:210px;height:120px;left:6%;top:8%}.portfolio-floating-card.card-b{width:180px;height:150px;right:8%;bottom:6%}
.portfolio-method{background:radial-gradient(circle at 90% 12%,rgba(112,72,255,.06),transparent 28%),linear-gradient(180deg,#fff,#fafbfe)}.portfolio-method-head span{color:var(--blue);font-weight:850}.portfolio-method-head h2{max-width:980px;margin:22px 0 46px;font-size:clamp(44px,4vw,72px);line-height:1;letter-spacing:-.058em}.portfolio-method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.portfolio-method-grid article{min-height:300px;padding:38px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 22px 60px rgba(40,48,80,.045)}.portfolio-method-grid h3{margin:0 0 18px;font-size:32px;line-height:1.06;letter-spacing:-.04em}.portfolio-method-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.portfolio-v14-cta{min-height:380px;padding:76px var(--pad);display:grid;grid-template-columns:1fr auto;gap:50px;align-items:center;border-top:1px solid var(--line);background:radial-gradient(circle at 90% 10%,rgba(226,67,196,.09),transparent 26%),linear-gradient(180deg,#fff,#fafbfe)}.portfolio-v14-cta h2{max-width:1040px;margin:18px 0 0;font-size:clamp(46px,4.2vw,76px);line-height:.98;letter-spacing:-.058em}
@media(max-width:1180px){.portfolio-v14-hero,.portfolio-featured,.portfolio-index-head,.portfolio-case-card.case-large,.portfolio-lab-showcase,.portfolio-v14-cta{grid-template-columns:1fr}.portfolio-v14-hero-art{min-height:500px}.portfolio-case-grid,.portfolio-method-grid{grid-template-columns:1fr}.portfolio-index-list a{grid-template-columns:52px 1fr 42px}.portfolio-index-list em{grid-column:2}}
@media(max-width:760px){.portfolio-v14-hero,.portfolio-featured,.portfolio-index-section,.portfolio-lab-showcase,.portfolio-method,.portfolio-v14-cta{padding-top:58px;padding-bottom:58px}.portfolio-v14-hero h1,.portfolio-featured h2,.portfolio-index-head h2,.portfolio-lab-showcase h2,.portfolio-method-head h2,.portfolio-v14-cta h2{font-size:40px}.portfolio-v14-hero-art{min-height:380px;transform:scale(.86);transform-origin:center top}.portfolio-featured-visual,.portfolio-lab-art{min-height:320px}.portfolio-index-list a{min-height:130px;grid-template-columns:1fr 42px;gap:12px}.portfolio-index-list span{grid-column:1}.portfolio-index-list strong,.portfolio-index-list em{grid-column:1}.portfolio-index-list i{grid-column:2;grid-row:1/span 3}.portfolio-case-grid{padding-bottom:58px}.portfolio-case-card,.portfolio-case-card.case-large{min-height:auto}.case-large .case-card-image,.case-card-image{min-height:300px}.case-card-copy{padding:30px}}


/* =========================================================
   V15 — Global cleanup + original portfolio page
   ========================================================= */

.section-num,
.portfolio-featured-num,
.service-detail-num,
.about-v11-small-num{
  display:none !important;
}

.hero h1,
.about-v11-hero h1,
.services-v13-hero h1{
  max-width:820px;
}

.service-detail h2,
.creative-tech-v13 h2,
.services-v13-cta h2,
.about-v11-fit-head h2,
.about-v11-final h2,
.about-v13-final-copy h2,
.portfolio-v15 h1,
.portfolio-v15 h2{
  text-wrap:balance;
}

.portfolio-v15{
  background:#fff;
}

.portfolio-v15-opening{
  padding:64px var(--pad) 46px;
  display:grid;
  grid-template-columns:1fr .58fr;
  gap:clamp(42px,6vw,90px);
  align-items:end;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 88% 12%,rgba(226,67,196,.07),transparent 26%),
    linear-gradient(180deg,#fff,#fbfcff);
}

.portfolio-v15-opening h1{
  max-width:900px;
  margin:18px 0 0;
  font-size:clamp(52px,5vw,92px);
  line-height:.94;
  letter-spacing:-.064em;
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 48%,var(--blue) 67%,var(--violet) 80%,var(--pink));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.portfolio-v15-opening p{
  max-width:560px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.76;
}

.portfolio-v15-feature{
  min-height:690px;
  padding:0 var(--pad) 82px;
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:clamp(44px,6vw,96px);
  align-items:stretch;
  background:#fff;
}

.portfolio-v15-feature-copy{
  padding:52px 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.portfolio-v15-label{
  color:var(--blue);
  font-size:11px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.portfolio-v15-feature h2{
  margin:36px 0 18px;
  font-size:clamp(70px,7vw,132px);
  line-height:.82;
  letter-spacing:-.075em;
}

.portfolio-v15-feature p{
  max-width:530px;
  margin:0 0 26px;
  color:var(--muted);
  font-size:15px;
  line-height:1.76;
}

.portfolio-v15-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:30px;
}

.portfolio-v15-tags span{
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.portfolio-v15-feature-stage{
  min-height:610px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 78% 20%,rgba(112,72,255,.16),transparent 34%),
    radial-gradient(circle at 25% 85%,rgba(29,53,255,.09),transparent 30%),
    linear-gradient(145deg,#f7f8fc,#eef0f6);
  box-shadow:0 32px 90px rgba(40,48,80,.075);
}

.portfolio-v15-feature-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(65,79,140,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(65,79,140,.08) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at center,#000 0 54%,transparent 82%);
}

.portfolio-v15-device{
  position:absolute;
  width:62%;
  height:54%;
  left:17%;
  top:21%;
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(5,8,14,.0),rgba(5,8,14,.18)),
    url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1600&q=90");
  background-size:cover;
  background-position:center;
  transform:rotate(-7deg);
  box-shadow:0 42px 90px rgba(30,40,70,.24);
}

.portfolio-v15-panel{
  position:absolute;
  border-radius:16px;
  box-shadow:0 24px 54px rgba(45,55,88,.12);
}

.portfolio-v15-panel.panel-dark{
  width:30%;
  height:32%;
  right:8%;
  top:12%;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(145deg,#0a0f19,#11192a);
  background-size:18px 18px,18px 18px,cover;
}

.portfolio-v15-panel.panel-light{
  width:24%;
  height:24%;
  left:9%;
  bottom:14%;
  background:#fff;
}

.portfolio-v15-gradient-block{
  position:absolute;
  width:124px;
  height:124px;
  right:20%;
  bottom:17%;
  background:linear-gradient(135deg,#1d35ff,#7048ff 58%,#e243c4);
  box-shadow:0 28px 60px rgba(112,72,255,.22);
}

.portfolio-v15-orb{
  position:absolute;
  width:150px;
  height:150px;
  left:24%;
  top:16%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#8d77ff 45%,#e243c4 78%);
  opacity:.82;
}

.portfolio-v15-mosaic{
  padding:82px var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:minmax(420px,auto);
  gap:30px;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 12%,rgba(112,72,255,.06),transparent 28%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.v15-card{
  min-height:520px;
  display:grid;
  grid-template-rows:1fr auto;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 70px rgba(40,48,80,.05);
}

.v15-card-wide{
  grid-column:1 / -1;
  grid-template-columns:1.16fr .84fr;
  grid-template-rows:none;
}

.v15-card-tall{
  min-height:660px;
}

.v15-card-image{
  min-height:330px;
  background-size:cover;
  background-position:center;
}

.v15-card-wide .v15-card-image{
  min-height:560px;
}

.lumina-v15{
  background-image:
    linear-gradient(180deg,rgba(5,8,14,.0),rgba(5,8,14,.15)),
    url("https://images.unsplash.com/photo-1559028006-448665bd7c7f?auto=format&fit=crop&w=1600&q=88");
}

.aurora-v15{
  background-image:url("https://images.unsplash.com/photo-1555041469-a586c61ea9bc?auto=format&fit=crop&w=1200&q=88");
}

.velo-v15{
  background-image:url("https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=1200&q=88");
}

.v15-card-content{
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.v15-card-content span{
  color:var(--blue);
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.v15-card-content h2{
  max-width:700px;
  margin:26px 0 16px;
  font-size:clamp(34px,3.2vw,58px);
  line-height:.98;
  letter-spacing:-.055em;
}

.v15-card-content p{
  max-width:520px;
  margin:0 0 24px;
  color:var(--muted);
  font-size:14px;
  line-height:1.72;
}

.v15-card-content a{
  color:var(--blue);
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
}

.v15-card-dark{
  min-height:660px;
  color:#fff;
  background:
    radial-gradient(circle at 70% 48%,rgba(112,72,255,.24),transparent 31%),
    linear-gradient(125deg,#070d16,#08111f 64%,#060a12);
}

.v15-card-dark .v15-card-content p{
  color:#aeb8c8;
}

.v15-card-dark .v15-card-content a{
  color:#fff;
}

.v15-particle-art{
  min-height:360px;
  position:relative;
  display:grid;
  place-items:center;
}

.v15-particle-wave{
  width:min(100%,420px);
  height:280px;
  background:
    radial-gradient(circle,#1e48ff 1.2px,transparent 1.55px),
    radial-gradient(circle,#e243c4 1.2px,transparent 1.55px);
  background-size:14px 14px,22px 22px;
  mask-image:radial-gradient(circle at center,#000 0 56%,transparent 76%);
  transform:rotate(-8deg);
  filter:drop-shadow(0 0 24px rgba(112,72,255,.34));
}

.v15-particle-core{
  position:absolute;
  width:96px;
  height:96px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#7257ff 40%,#e243c4 78%);
}

.v15-card-soft{
  min-height:520px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  background:
    radial-gradient(circle at 82% 18%,rgba(112,72,255,.12),transparent 30%),
    linear-gradient(145deg,#fff,#f6f7fb);
}

.v15-soft-composition{
  min-height:360px;
  position:relative;
}

.soft-card,
.soft-orb,
.soft-cube{
  position:absolute;
  box-shadow:0 24px 54px rgba(45,55,88,.12);
}

.soft-card{border-radius:14px;}
.soft-card.card-a{width:48%;height:40%;left:12%;top:18%;background:#fff;}
.soft-card.card-b{width:42%;height:46%;right:11%;bottom:14%;background:linear-gradient(145deg,#0a0f19,#11192a);}
.soft-orb{width:120px;height:120px;left:38%;top:38%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,#8d77ff 45%,#e243c4 78%);}
.soft-cube{width:78px;height:78px;left:18%;bottom:20%;background:linear-gradient(135deg,#1d35ff,#7048ff 58%,#e243c4);}

.portfolio-v15-index{
  padding:82px var(--pad);
  border-top:1px solid var(--line);
  background:#fff;
}

.portfolio-v15-index-head{
  display:grid;
  grid-template-columns:.42fr 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:42px;
}

.portfolio-v15-index-head h2{
  max-width:920px;
  margin:0;
  font-size:clamp(42px,4vw,72px);
  line-height:1;
  letter-spacing:-.058em;
}

.portfolio-v15-index-list{border-top:1px solid var(--line);}

.portfolio-v15-index-list a{
  min-height:106px;
  display:grid;
  grid-template-columns:1fr 1.1fr 52px;
  gap:24px;
  align-items:center;
  border-bottom:1px solid var(--line);
}

.portfolio-v15-index-list strong{
  font-size:clamp(28px,3vw,50px);
  letter-spacing:-.055em;
}

.portfolio-v15-index-list span{
  color:var(--muted);
  font-size:15px;
}

.portfolio-v15-index-list i{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  justify-self:end;
  border:1px solid var(--line);
  border-radius:50%;
  font-style:normal;
}

.portfolio-v15-cta{
  min-height:380px;
  padding:76px var(--pad);
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px;
  align-items:center;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 10%,rgba(226,67,196,.09),transparent 26%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.portfolio-v15-cta h2{
  max-width:1040px;
  margin:18px 0 0;
  font-size:clamp(46px,4.2vw,76px);
  line-height:.98;
  letter-spacing:-.058em;
}

@media(max-width:1180px){
  .portfolio-v15-opening,
  .portfolio-v15-feature,
  .v15-card-wide,
  .v15-card-soft,
  .portfolio-v15-index-head,
  .portfolio-v15-cta{
    grid-template-columns:1fr;
  }
  .portfolio-v15-mosaic{grid-template-columns:1fr;}
}

@media(max-width:760px){
  .portfolio-v15-opening,
  .portfolio-v15-mosaic,
  .portfolio-v15-index,
  .portfolio-v15-cta{
    padding-top:58px;
    padding-bottom:58px;
  }
  .portfolio-v15-opening h1,
  .portfolio-v15-feature h2,
  .portfolio-v15-index-head h2,
  .portfolio-v15-cta h2{
    font-size:40px;
  }
  .portfolio-v15-feature{
    padding-top:0;
    padding-bottom:58px;
  }
  .portfolio-v15-feature-stage{min-height:360px;}
  .portfolio-v15-device{width:72%;height:48%;}
  .v15-card,
  .v15-card-tall,
  .v15-card-dark,
  .v15-card-soft{min-height:auto;}
  .v15-card-wide .v15-card-image,
  .v15-card-image{min-height:300px;}
  .v15-card-content{padding:30px;}
  .portfolio-v15-index-list a{
    grid-template-columns:1fr 42px;
    min-height:126px;
  }
  .portfolio-v15-index-list span{grid-column:1;}
  .portfolio-v15-index-list i{grid-column:2;grid-row:1 / span 2;}
  .portfolio-v15-cta{grid-template-columns:1fr;}
}


/* =========================================================
   V16 — Portfolio inspired by premium visual mosaic reference
   ========================================================= */

.portfolio-page{
  background:#fff;
}

.portfolio-introduction{
  padding:70px var(--pad) 42px;
  display:grid;
  grid-template-columns:1fr .52fr;
  gap:clamp(40px,6vw,86px);
  align-items:end;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfcff);
}

.portfolio-introduction h1{
  max-width:960px;
  margin:18px 0 0;
  font-size:clamp(50px,5vw,92px);
  line-height:.94;
  letter-spacing:-.064em;
  text-wrap:balance;
}

.portfolio-introduction p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}

.portfolio-v16-filter{
  padding:0 var(--pad) 36px;
  display:flex;
  gap:clamp(18px,3vw,52px);
  align-items:center;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  background:#fff;
}

.portfolio-v16-filter a{
  position:relative;
  color:var(--ink);
  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.portfolio-v16-filter a.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-13px;
  width:7px;
  height:7px;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--blue);
}

.portfolio-gallery-grid{
  padding:54px var(--pad) 80px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:185px;
  gap:30px;
  background:#fff;
}

.portfolio-gallery-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:18px;
  background:#f6f7fb;
  box-shadow:0 18px 60px rgba(26,31,48,.065);
  transition:transform .25s ease, box-shadow .25s ease;
}

.portfolio-gallery-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 90px rgba(26,31,48,.11);
}

.portfolio-gallery-link{
  position:absolute;
  inset:0;
  z-index:5;
}

.p16-large{grid-column:span 3;grid-row:span 3;}
.p16-small{grid-column:span 1.5;grid-row:span 2;}
.p16-tall{grid-column:span 3;grid-row:span 4;}
.p16-wide{grid-column:1 / -1;grid-row:span 3;}
.p16-medium{grid-column:span 3;grid-row:span 3;}

.portfolio-project-visual{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

.portfolio-gallery-details{
  position:absolute;
  left:30px;
  right:74px;
  bottom:28px;
  z-index:3;
  color:var(--ink);
}

.portfolio-gallery-details.compact{
  right:24px;
  bottom:24px;
}

.portfolio-gallery-details span{
  display:block;
  margin-bottom:12px;
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(10,14,24,.58);
}

.portfolio-gallery-details h2{
  margin:0 0 10px;
  font-size:clamp(26px,3vw,54px);
  line-height:.92;
  letter-spacing:-.058em;
  text-wrap:balance;
}

.portfolio-gallery-details.compact h2{
  font-size:28px;
}

.portfolio-gallery-details p{
  max-width:420px;
  margin:0;
  color:rgba(10,14,24,.62);
  font-size:13px;
  line-height:1.55;
}

.p16-arrow{
  position:absolute;
  right:22px;
  bottom:22px;
  z-index:4;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  font-size:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.11);
}

/* Card color environments */
.p16-purple{background:linear-gradient(135deg,#d9b7ff,#b286ff);}
.p16-blue{background:#9cc7df;}
.p16-yellow{background:#fff39b;}
.p16-softblue{background:linear-gradient(135deg,#c6def4,#d9d4ff 55%,#fff2b8);}
.p16-dark{background:linear-gradient(135deg,#303c3c,#202928); color:#fff;}
.p16-dark .portfolio-gallery-details,
.p16-dark .portfolio-gallery-details span,
.p16-dark .portfolio-gallery-details p{color:#fff;}
.p16-pink{background:#ffd9d3;}
.p16-lilac{background:linear-gradient(135deg,#f6ddff,#eef0ff);}
.p16-stage{background:linear-gradient(180deg,#f2b3de,#f7d2c5);}
.p16-earth{background:#ffc51c;}
.p16-construct{background:#c99a8f;}

/* Orbit object */
.p16-orbit{
  filter:drop-shadow(0 30px 40px rgba(76,32,150,.18));
}

.p16-orbit .ring{
  position:absolute;
  border-radius:50%;
  border:22px solid rgba(110,67,231,.52);
}

.p16-orbit .r1{
  width:46%;
  height:46%;
  transform:rotate(-20deg);
}

.p16-orbit .r2{
  width:34%;
  height:34%;
  border-width:16px;
  opacity:.78;
  transform:rotate(35deg);
}

.p16-orbit .blob{
  position:absolute;
  border-radius:999px;
  background:linear-gradient(135deg,#8f5df3,#b087ff);
}

.p16-orbit .b1{width:170px;height:92px;left:25%;top:30%;transform:rotate(-22deg);}
.p16-orbit .b2{width:130px;height:130px;right:24%;top:24%;}
.p16-orbit .b3{width:88px;height:88px;left:32%;bottom:28%;}
.p16-orbit .b4{width:54px;height:54px;right:16%;bottom:34%;}

/* Brush globe */
.p16-brush .stroke{
  position:absolute;
  left:18%;
  right:12%;
  height:42px;
  border-radius:999px;
  background:#ffd21d;
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.12));
}

.p16-brush .s1{top:28%;transform:rotate(16deg);}
.p16-brush .s2{top:38%;background:#178bd0;transform:rotate(-10deg);}
.p16-brush .s3{top:48%;background:#ffdd27;transform:rotate(12deg);}
.p16-brush .s4{top:58%;background:#fff;transform:rotate(-14deg);}

.p16-brush::after{
  content:"";
  width:300px;
  height:300px;
  border-radius:50%;
  position:absolute;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 38%);
}

/* Ribbon */
.p16-ribbon span{
  width:110px;
  height:190px;
  border-radius:60% 40% 60% 40%;
  background:
    radial-gradient(circle at 35% 20%,#fff,transparent 22%),
    linear-gradient(135deg,#ffbf17,#ff7b00,#ffd647);
  transform:rotate(-28deg);
  box-shadow:0 20px 40px rgba(239,136,0,.24);
}

/* Halo */
.p16-halo .halo-sphere{
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 28%,#fff,#c9c1ff 44%,#82afff 80%);
  box-shadow:0 28px 60px rgba(115,119,255,.24);
}

.p16-halo .halo-curve{
  position:absolute;
  width:260px;
  height:115px;
  border-radius:50%;
  border:34px solid rgba(255,255,255,.36);
  transform:rotate(-18deg);
}

/* Atlas dark collage */
.p16-atlas .paper{
  position:absolute;
  width:120px;
  height:74px;
  background:#e8d5bd;
  box-shadow:0 18px 28px rgba(0,0,0,.18);
}

.p16-atlas .paper-one{left:33%;top:45%;transform:rotate(-14deg);}
.p16-atlas .paper-two{left:42%;top:50%;transform:rotate(18deg);background:#b99470;}

.p16-atlas .wire{
  position:absolute;
  width:230px;
  height:230px;
  border:3px solid rgba(255,255,255,.65);
  border-radius:53% 47% 61% 39%;
  transform:rotate(-18deg);
}

.p16-atlas .object{
  position:absolute;
  border-radius:50%;
  background:#c0754c;
}

.p16-atlas .object-one{width:120px;height:28px;right:26%;top:34%;transform:rotate(-22deg);}
.p16-atlas .object-two{width:80px;height:42px;left:34%;bottom:26%;transform:rotate(20deg);}

/* Softform */
.p16-softform span{
  width:150px;
  height:190px;
  border-radius:80px 80px 34px 34px;
  background:
    radial-gradient(circle at 30% 16%,#fff,rgba(255,255,255,.45) 28%,transparent 42%),
    repeating-radial-gradient(ellipse at 50% 10%,#fff 0 10px,#ffc7c2 11px 23px);
  filter:drop-shadow(0 20px 35px rgba(255,138,130,.24));
}

/* Prism cubes */
.p16-prism .cube{
  position:absolute;
  width:74px;
  height:74px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(95,76,255,.28));
  border:1px solid rgba(110,95,255,.12);
  box-shadow:0 18px 35px rgba(92,89,200,.15);
}

.p16-prism .c1{left:32%;top:32%;}
.p16-prism .c2{right:28%;top:34%;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(226,67,196,.28));}
.p16-prism .c3{left:42%;bottom:28%;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(24,200,214,.24));}
.p16-prism .c4{right:38%;bottom:38%;width:54px;height:54px;}

/* Podium */
.p16-podium .podium,
.p16-podium .ball{
  position:absolute;
  box-shadow:0 28px 60px rgba(171,89,83,.12);
}

.p16-podium .podium{
  border-radius:10px 10px 0 0;
  background:linear-gradient(145deg,#ffd8c2,#fff0cf);
}

.p16-podium .podium.main{width:260px;height:150px;left:50%;top:48%;transform:translateX(-50%);}
.p16-podium .podium.left{width:180px;height:105px;left:25%;top:59%;}
.p16-podium .podium.right{width:180px;height:105px;right:25%;top:59%;}

.p16-podium .ball{
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff3d9,#ff9c82);
}

.p16-podium .ball.main{width:150px;height:150px;left:50%;top:28%;transform:translateX(-50%);}
.p16-podium .ball.left{width:88px;height:88px;left:31%;top:48%;}
.p16-podium .ball.right{width:88px;height:88px;right:31%;top:48%;}

/* Earth */
.p16-earth-art span{
  width:270px;
  height:270px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 24%,rgba(255,255,255,.65),transparent 18%),
    repeating-conic-gradient(from 8deg,#1d6fc8 0 4deg,#2bb66b 4deg 8deg,#ffffff 8deg 10deg,#1266b2 10deg 13deg);
  box-shadow:0 32px 60px rgba(0,78,120,.26);
  transform:rotate(-12deg);
}

/* Construct */
.p16-construct-art .triangle{
  position:absolute;
  width:240px;
  height:240px;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  border:2px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.16);
}

.p16-construct-art .beam{
  position:absolute;
  width:70px;
  height:240px;
  background:repeating-linear-gradient(45deg,#ffd3ab 0 18px,#c77c59 18px 34px);
  transform:rotate(28deg);
}

.p16-construct-art .dot{
  position:absolute;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#ff8d49;
}

.p16-construct-art .d1{left:36%;top:49%;}
.p16-construct-art .d2{right:36%;top:33%;background:#fff;}

/* Statement */
.portfolio-project-inquiry{
  min-height:360px;
  padding:76px var(--pad);
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px;
  align-items:center;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 10%,rgba(226,67,196,.09),transparent 26%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.portfolio-project-inquiry h2{
  max-width:1040px;
  margin:18px 0 0;
  font-size:clamp(44px,4vw,72px);
  line-height:1;
  letter-spacing:-.058em;
  text-wrap:balance;
}

/* Correct fractional card spans for CSS grid */
@supports (grid-template-columns: subgrid){
  .p16-small{grid-column:span 1;}
}

@media(min-width:1181px){
  .p16-small{grid-column:span 1;}
  .p16-small:nth-of-type(3),
  .p16-small:nth-of-type(4),
  .p16-small:nth-of-type(6),
  .p16-small:nth-of-type(7){grid-column:span 1;}
}

@media(max-width:1280px){
  .portfolio-gallery-grid{
    grid-template-columns:repeat(4,1fr);
  }
  .p16-large{grid-column:span 2;}
  .p16-tall{grid-column:span 2;}
  .p16-medium{grid-column:span 2;}
  .p16-small{grid-column:span 2;}
}

@media(max-width:900px){
  .portfolio-introduction,
  .portfolio-project-inquiry{
    grid-template-columns:1fr;
  }

  .portfolio-gallery-grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }

  .p16-large,
  .p16-small,
  .p16-tall,
  .p16-wide,
  .p16-medium{
    grid-column:1;
    grid-row:auto;
    min-height:430px;
  }

  .p16-wide{
    min-height:520px;
  }

  .portfolio-gallery-card.p16-stage{
    min-height:520px;
  }
}

@media(max-width:640px){
  .portfolio-introduction{
    padding-top:56px;
  }

  .portfolio-introduction h1,
  .portfolio-project-inquiry h2{
    font-size:40px;
  }

  .portfolio-gallery-grid{
    padding-top:36px;
    gap:22px;
  }

  .portfolio-gallery-details{
    left:24px;
    right:66px;
    bottom:24px;
  }

  .portfolio-gallery-card{
    border-radius:16px;
  }
}


/* =========================================================
   V17 — Compact internal page heroes for About + Services
   Inspired by premium image-overlay page banners
   ========================================================= */

.page-hero-compact{
  position:relative;
  min-height:360px;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  border-top:1px solid rgba(255,255,255,.04);
  background:#0a0f18;
}

.page-hero-compact::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
}

.page-hero-about::before{
  background-image:url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1800&q=88");
}

.page-hero-services::before{
  background-image:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=88");
}

.page-hero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 22% 18%,rgba(226,67,196,.32),transparent 34%),
    radial-gradient(circle at 78% 72%,rgba(29,53,255,.28),transparent 38%),
    linear-gradient(90deg,rgba(5,8,16,.74),rgba(5,8,16,.42),rgba(5,8,16,.72));
}

.page-hero-compact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  opacity:.32;
}

.page-hero-content{
  width:min(100% - 48px,1040px);
  margin:0 auto;
  text-align:center;
  color:#fff;
}

.page-hero-kicker{
  display:inline-block;
  margin-bottom:22px;
  color:#d8d5ff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.page-hero-content h1{
  margin:0;
  font-size:clamp(46px,5vw,78px);
  line-height:.96;
  letter-spacing:-.055em;
  color:#fff;
  text-shadow:0 18px 48px rgba(0,0,0,.28);
}

.page-hero-content p{
  max-width:660px;
  margin:24px auto 0;
  color:rgba(255,255,255,.78);
  font-size:15px;
  line-height:1.65;
}

/* Because About/Services now use compact banners, reduce the top heaviness of the next section */
.page-hero-compact + .about-values-section,
.page-hero-compact + .services-v13-overview{
  border-top:0 !important;
}

/* Keep internal page heroes clearly shorter than Home hero */
@media(min-width:1181px){
  .page-hero-compact{
    min-height:360px;
  }
}

@media(max-width:760px){
  .page-hero-compact{
    min-height:300px;
  }

  .page-hero-content h1{
    font-size:42px;
  }

  .page-hero-content p{
    font-size:14px;
  }
}


/* =========================================================
   V18 — Portfolio compact hero + Contact page
   ========================================================= */

/* Portfolio uses the same compact page hero language as About and Services */
.page-hero-portfolio::before{
  background-image:url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1800&q=88");
}

.page-hero-contact::before{
  background-image:url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1800&q=88");
}

/* Portfolio intro after compact hero should feel like a section header, not a second hero */
.portfolio-introduction-detail{
  padding-top:54px !important;
  padding-bottom:38px !important;
}

.portfolio-introduction-detail h2{
  max-width:880px;
  margin:18px 0 0;
  font-size:clamp(42px,4vw,72px);
  line-height:1;
  letter-spacing:-.058em;
  text-wrap:balance;
}

/* CONTACT PAGE */
.contact-v18-main{
  padding:82px var(--pad);
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(54px,7vw,110px);
  align-items:start;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 8%,rgba(112,72,255,.06),transparent 28%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.contact-v18-intro{
  position:sticky;
  top:110px;
}

.contact-v18-intro h2{
  max-width:720px;
  margin:22px 0 24px;
  font-size:clamp(46px,4.4vw,78px);
  line-height:.98;
  letter-spacing:-.058em;
  background:linear-gradient(90deg,var(--ink),var(--ink) 48%,var(--blue) 68%,var(--violet) 82%,var(--pink));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  text-wrap:balance;
}

.contact-v18-intro p{
  max-width:610px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.76;
}

.contact-v18-info{
  margin-top:42px;
  display:grid;
  gap:14px;
}

.contact-v18-info a{
  padding:22px 24px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 48px rgba(40,48,80,.04);
}

.contact-v18-info span{
  color:var(--blue);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.contact-v18-info strong{
  color:var(--ink);
  text-align:right;
  font-size:14px;
}

/* Contact form */
.contact-v18-form{
  padding:42px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 80px rgba(40,48,80,.06);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.contact-v18-form label{
  display:block;
  margin-bottom:22px;
}

.contact-v18-form label span{
  display:block;
  margin-bottom:10px;
  color:var(--ink);
  font-size:11px;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.contact-v18-form input,
.contact-v18-form select,
.contact-v18-form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 18px;
  color:var(--ink);
  background:#fafbfe;
  font:inherit;
  font-size:14px;
  outline:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.contact-v18-form textarea{
  resize:vertical;
  min-height:170px;
}

.contact-v18-form input:focus,
.contact-v18-form select:focus,
.contact-v18-form textarea:focus{
  border-color:rgba(29,53,255,.55);
  background:#fff;
  box-shadow:0 0 0 4px rgba(29,53,255,.08);
}

.contact-v18-form button{
  border:0;
  cursor:pointer;
}

.form-note{
  max-width:620px;
  margin:20px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
}

/* Contact cards */
.contact-v18-cards{
  padding:0 var(--pad) 82px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  background:#fafbfe;
}

.contact-v18-cards article{
  min-height:270px;
  padding:34px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 22px 60px rgba(40,48,80,.045);
}

.contact-v18-cards span{
  color:var(--blue);
  font-size:13px;
  font-weight:850;
}

.contact-v18-cards h3{
  max-width:360px;
  margin:62px 0 16px;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.contact-v18-cards p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

/* Contact closing CTA */
.contact-v18-cta{
  min-height:360px;
  padding:76px var(--pad);
  display:grid;
  grid-template-columns:1fr .55fr;
  gap:70px;
  align-items:end;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 10%,rgba(226,67,196,.09),transparent 26%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.contact-v18-cta h2{
  max-width:920px;
  margin:18px 0 0;
  font-size:clamp(44px,4vw,72px);
  line-height:1;
  letter-spacing:-.058em;
  text-wrap:balance;
}

.contact-v18-cta p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.76;
}

@media(max-width:1180px){
  .contact-v18-main,
  .contact-v18-cta{
    grid-template-columns:1fr;
  }

  .contact-v18-intro{
    position:static;
  }

  .contact-v18-cards{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .contact-v18-main,
  .contact-v18-cta{
    padding-top:58px;
    padding-bottom:58px;
  }

  .form-row{
    grid-template-columns:1fr;
    gap:0;
  }

  .contact-v18-form{
    padding:28px;
  }

  .contact-v18-info a{
    display:block;
  }

  .contact-v18-info strong{
    display:block;
    margin-top:8px;
    text-align:left;
  }

  .contact-v18-intro h2,
  .contact-v18-cta h2,
  .portfolio-introduction-detail h2{
    font-size:40px;
  }

  .contact-v18-cards{
    padding-bottom:58px;
  }
}


/* =========================================================
   V19 — Modern Contact redesign
   ========================================================= */

/* Hide old contact page sections if older classes remain */
.contact-v18-main,
.contact-v18-cards,
.contact-v18-cta{
  display:none !important;
}

/* Control-room intro */
.contact-v19-control{
  min-height:560px;
  padding:82px var(--pad);
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(54px,7vw,110px);
  align-items:center;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 88% 12%,rgba(112,72,255,.07),transparent 28%),
    linear-gradient(180deg,#fff,#fbfcff);
}

.contact-v19-copy h2{
  max-width:720px;
  margin:22px 0 24px;
  font-size:clamp(52px,5vw,88px);
  line-height:.94;
  letter-spacing:-.064em;
  background:linear-gradient(90deg,var(--ink),var(--ink) 48%,var(--blue) 68%,var(--violet) 82%,var(--pink));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  text-wrap:balance;
}

.contact-v19-copy p{
  max-width:610px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.76;
}

.contact-v19-direct{
  margin-top:38px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.contact-v19-direct a{
  min-height:120px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 50px rgba(40,48,80,.045);
}

.contact-v19-direct span{
  color:var(--blue);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.contact-v19-direct strong{
  color:var(--ink);
  font-size:15px;
  line-height:1.35;
}

/* Dark signal visual */
.contact-v19-signal{
  min-height:430px;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:
    radial-gradient(circle at 70% 48%,rgba(112,72,255,.28),transparent 34%),
    radial-gradient(circle at 92% 14%,rgba(226,67,196,.14),transparent 28%),
    linear-gradient(125deg,#070d16,#08111f 62%,#060a12);
  box-shadow:0 34px 90px rgba(10,15,25,.16);
}

.signal-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(circle at center,#000 0 56%,transparent 82%);
  opacity:.7;
}

.signal-orbit{
  position:absolute;
  width:360px;
  height:360px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
}

.signal-orbit::before,
.signal-orbit::after{
  content:"";
  position:absolute;
  inset:46px;
  border-radius:50%;
  border:1px solid rgba(117,102,255,.34);
}

.signal-orbit::after{
  inset:92px;
  border-color:rgba(226,67,196,.28);
}

.signal-core{
  position:absolute;
  width:132px;
  height:132px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#7257ff 42%,#e243c4 78%);
  box-shadow:0 0 80px rgba(112,72,255,.35);
}

.signal-card{
  position:absolute;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(10px);
}

.signal-card.card-one{
  width:220px;
  height:126px;
  left:8%;
  top:11%;
}

.signal-card.card-two{
  width:190px;
  height:150px;
  right:9%;
  bottom:10%;
}

.signal-line{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
}

.signal-line.line-one{
  width:62%;
  left:18%;
  top:33%;
  transform:rotate(-12deg);
}

.signal-line.line-two{
  width:50%;
  left:22%;
  bottom:30%;
  transform:rotate(18deg);
}

/* Brief section */
.contact-v19-brief{
  padding:82px var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(44px,6vw,88px);
  align-items:start;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 92% 10%,rgba(226,67,196,.07),transparent 28%),
    linear-gradient(180deg,#fff,#fafbfe);
}

.brief-side h2{
  max-width:760px;
  margin:22px 0 40px;
  font-size:clamp(44px,4.2vw,74px);
  line-height:.98;
  letter-spacing:-.058em;
  text-wrap:balance;
}

.brief-routes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.brief-routes article{
  min-height:210px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 50px rgba(40,48,80,.04);
}

.brief-routes span{
  color:var(--blue);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.brief-routes h3{
  margin:56px 0 12px;
  font-size:25px;
  line-height:1.05;
  letter-spacing:-.035em;
}

.brief-routes p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

/* Modern brief form */
.contact-v19-form{
  padding:38px;
  border-radius:24px;
  background:#080d16;
  color:#fff;
  box-shadow:0 34px 90px rgba(10,15,25,.18);
}

.form-header{
  margin-bottom:28px;
  padding-bottom:22px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.form-header span{
  color:#fff;
  font-size:20px;
  font-weight:850;
  letter-spacing:-.03em;
}

.form-header strong{
  max-width:220px;
  color:#aeb8c8;
  font-size:12px;
  font-weight:600;
  text-align:right;
  line-height:1.5;
}

.contact-v19-form label{
  display:block;
  margin-bottom:20px;
}

.contact-v19-form label span{
  display:block;
  margin-bottom:10px;
  color:#d8d5ff;
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.contact-v19-form input,
.contact-v19-form select,
.contact-v19-form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:16px 18px;
  color:#fff;
  background:rgba(255,255,255,.055);
  font:inherit;
  font-size:14px;
  outline:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.contact-v19-form textarea{
  min-height:170px;
  resize:vertical;
}

.contact-v19-form input::placeholder,
.contact-v19-form textarea::placeholder{
  color:rgba(255,255,255,.42);
}

.contact-v19-form select{
  color:#fff;
}

.contact-v19-form option{
  color:#111;
}

.contact-v19-form input:focus,
.contact-v19-form select:focus,
.contact-v19-form textarea:focus{
  border-color:rgba(126,114,255,.78);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 4px rgba(112,72,255,.16);
}

.contact-v19-form .btn{
  border:0;
  cursor:pointer;
  background:#fff;
  color:#080d16;
}

.contact-v19-form .form-note{
  color:#8f9bad;
}

/* Expectations */
.contact-v19-expect{
  padding:82px var(--pad);
  border-top:1px solid var(--line);
  background:#fff;
}

.expect-head{
  display:grid;
  grid-template-columns:.34fr 1fr;
  gap:50px;
  align-items:end;
  margin-bottom:46px;
}

.expect-head h2{
  max-width:940px;
  margin:0;
  font-size:clamp(42px,4vw,72px);
  line-height:1;
  letter-spacing:-.058em;
  text-wrap:balance;
}

.expect-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.expect-grid article{
  min-height:270px;
  padding:34px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    radial-gradient(circle at 88% 12%,rgba(112,72,255,.06),transparent 28%),
    linear-gradient(145deg,#fff,#f7f8fc);
  box-shadow:0 22px 60px rgba(40,48,80,.04);
}

.expect-grid span{
  color:var(--blue);
  font-size:13px;
  font-weight:850;
}

.expect-grid h3{
  margin:68px 0 14px;
  font-size:29px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.expect-grid p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

@media(max-width:1180px){
  .contact-v19-control,
  .contact-v19-brief,
  .expect-head{
    grid-template-columns:1fr;
  }

  .expect-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .contact-v19-control,
  .contact-v19-brief,
  .contact-v19-expect{
    padding-top:58px;
    padding-bottom:58px;
  }

  .contact-v19-copy h2,
  .brief-side h2,
  .expect-head h2{
    font-size:40px;
  }

  .contact-v19-direct,
  .brief-routes,
  .form-row{
    grid-template-columns:1fr;
  }

  .contact-v19-signal{
    min-height:320px;
  }

  .contact-v19-form{
    padding:28px;
  }

  .form-header{
    display:block;
  }

  .form-header strong{
    display:block;
    margin-top:8px;
    text-align:left;
  }
}


/* =========================================================
   V20 — Contact simplified
   ========================================================= */

/* Removed `.contact-v19-control`; start directly with the project brief */
.contact-v19-brief{
  border-top:0 !important;
  padding-top:82px !important;
}

/* Give the first contact content a cleaner page rhythm after compact hero */
.page-hero-contact + .contact-v19-brief{
  background:
    radial-gradient(circle at 92% 10%,rgba(226,67,196,.06),transparent 28%),
    linear-gradient(180deg,#fff,#fafbfe) !important;
}

/* Make the remaining heading feel like the primary contact intro */
.brief-side h2{
  max-width:780px;
}

/* Since the dark visual intro is removed, let route cards breathe a little more */
.brief-routes article{
  min-height:230px;
}

@media(max-width:760px){
  .contact-v19-brief{
    padding-top:58px !important;
  }
}


/* =========================================================
   V21 — Services heading cleanup + white Contact form
   ========================================================= */

/* Services heading: remove descriptive paragraph and keep title in one line on desktop */
.services-v13-heading{
  display:block !important;
  margin-bottom:48px !important;
}

.services-v13-heading p{
  display:none !important;
}

.services-v13-heading h2{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  white-space:nowrap !important;
  font-size:clamp(34px,3.7vw,62px) !important;
  line-height:1 !important;
}

/* Contact form: clean white premium form */
.contact-v19-form{
  color:var(--ink) !important;
  background:
    radial-gradient(circle at 92% 10%,rgba(112,72,255,.055),transparent 28%),
    linear-gradient(145deg,#ffffff,#fafbfe) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 28px 80px rgba(40,48,80,.06) !important;
}

.contact-v19-form .form-header{
  border-bottom:1px solid var(--line) !important;
}

.contact-v19-form .form-header span{
  color:var(--ink) !important;
}

.contact-v19-form .form-header strong{
  color:var(--muted) !important;
}

.contact-v19-form label span{
  color:var(--blue) !important;
}

.contact-v19-form input,
.contact-v19-form select,
.contact-v19-form textarea{
  color:var(--ink) !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
}

.contact-v19-form input::placeholder,
.contact-v19-form textarea::placeholder{
  color:#8b94a6 !important;
}

.contact-v19-form input:focus,
.contact-v19-form select:focus,
.contact-v19-form textarea:focus{
  border-color:rgba(29,53,255,.55) !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(29,53,255,.08) !important;
}

.contact-v19-form .btn{
  color:#fff !important;
  background:#080d16 !important;
}

.contact-v19-form .form-note{
  color:var(--muted) !important;
}

/* Mobile: allow the Services title to wrap naturally */
@media(max-width:900px){
  .services-v13-heading h2{
    white-space:normal !important;
  }
}


/* =========================================================
   V22 — Premium footer CTA + Portfolio intro cleanup
   ========================================================= */

/* 1) Footer CTA: more aesthetic premium card inspired by the provided reference */
.site-footer .footer-cta{
  position:relative !important;
  min-height:260px !important;
  padding:34px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  overflow:hidden !important;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 76% 3%,rgba(162,115,255,.48),transparent 24%),
    radial-gradient(circle at 88% 20%,rgba(226,67,196,.16),transparent 28%),
    linear-gradient(145deg,#11182d 0%,#09111f 58%,#070d16 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 90px rgba(0,0,0,.22) !important;
}

.site-footer .footer-cta::before{
  content:"✦";
  position:absolute;
  left:30px;
  top:30px;
  z-index:-1;
  color:#9b92ff;
  font-size:18px;
  line-height:1;
  text-shadow:0 0 24px rgba(155,146,255,.45);
}

.site-footer .footer-cta::after{
  content:"";
  position:absolute;
  left:28%;
  bottom:24px;
  z-index:-1;
  width:210px;
  height:72px;
  border:1px solid rgba(135,128,255,.25);
  border-radius:50%;
  transform:rotate(-12deg);
}

.site-footer .footer-cta h2{
  max-width:260px !important;
  margin:0 0 28px !important;
  color:#fff !important;
  font-size:clamp(30px,2.6vw,46px) !important;
  line-height:.95 !important;
  letter-spacing:-.055em !important;
}

.site-footer .footer-cta a{
  position:relative !important;
  min-height:54px !important;
  padding:0 62px 0 22px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:999px !important;
  color:#fff !important;
  background:rgba(255,255,255,.045) !important;
  backdrop-filter:blur(10px);
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
}

.site-footer .footer-cta a::after{
  content:"→";
  position:absolute;
  right:8px;
  top:50%;
  width:38px;
  height:38px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#07101d;
  background:#fff;
  font-size:18px;
  letter-spacing:0;
}

.site-footer .footer-cta a:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.48) !important;
}

/* 2) Portfolio intro: remove paragraph and keep heading in one line on desktop */
.portfolio-introduction.portfolio-introduction-detail{
  display:block !important;
  padding-top:54px !important;
  padding-bottom:38px !important;
}

.portfolio-introduction.portfolio-introduction-detail p{
  display:none !important;
}

.portfolio-introduction.portfolio-introduction-detail h2{
  max-width:none !important;
  width:100% !important;
  margin:18px 0 0 !important;
  white-space:nowrap !important;
  font-size:clamp(34px,3.8vw,64px) !important;
  line-height:1 !important;
}

@media(max-width:900px){
  .portfolio-introduction.portfolio-introduction-detail h2{
    white-space:normal !important;
  }
}

@media(max-width:760px){
  .site-footer .footer-cta{
    min-height:240px !important;
    padding:30px !important;
  }

  .site-footer .footer-cta h2{
    font-size:34px !important;
  }
}


/* =========================================================
   V23 — Footer CTA refined / more integrated with footer
   ========================================================= */

/* Softer CTA card: less bright, less decorative, closer to the footer language */
.site-footer .footer-cta{
  position:relative !important;
  min-height:230px !important;
  padding:30px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  overflow:hidden !important;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:16px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018) 58%,rgba(29,53,255,.035)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 20px 60px rgba(0,0,0,.14) !important;
}

/* Replace bright star with a subtle blue accent line */
.site-footer .footer-cta::before{
  content:"" !important;
  position:absolute;
  left:30px;
  top:30px;
  z-index:-1;
  width:42px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),rgba(255,255,255,.12));
  box-shadow:none !important;
}

/* Make decorative orbit almost invisible and aligned with footer mood */
.site-footer .footer-cta::after{
  content:"" !important;
  position:absolute;
  right:-52px;
  bottom:-34px;
  z-index:-1;
  width:210px;
  height:90px;
  border:1px solid rgba(118,128,170,.16);
  border-radius:50%;
  transform:rotate(-14deg);
  opacity:.55;
}

/* Softer CTA title */
.site-footer .footer-cta h2{
  max-width:270px !important;
  margin:58px 0 24px !important;
  color:#f4f7ff !important;
  font-size:clamp(26px,2.2vw,36px) !important;
  line-height:1 !important;
  letter-spacing:-.048em !important;
}

/* Button integrated with footer, no very bright pill */
.site-footer .footer-cta a{
  position:relative !important;
  min-height:46px !important;
  padding:0 46px 0 18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:999px !important;
  color:#f6f8ff !important;
  background:rgba(255,255,255,.035) !important;
  backdrop-filter:none !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
}

/* Smaller, quieter arrow treatment */
.site-footer .footer-cta a::after{
  content:"→";
  position:absolute;
  right:8px;
  top:50%;
  width:30px;
  height:30px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:#f6f8ff;
  background:rgba(255,255,255,.055);
  font-size:14px;
  letter-spacing:0;
}

.site-footer .footer-cta a:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.26) !important;
  background:rgba(255,255,255,.055) !important;
}

@media(max-width:760px){
  .site-footer .footer-cta{
    min-height:220px !important;
    padding:28px !important;
  }

  .site-footer .footer-cta h2{
    margin-top:54px !important;
    font-size:30px !important;
  }
}


/* =========================================================
   V24 — Minimal footer CTA + Contact expect-head alignment
   ========================================================= */

/* 1) Footer CTA: new content/design, same background language as the footer */
.site-footer .footer-cta{
  position:relative !important;
  min-height:auto !important;
  padding:0 0 0 34px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  overflow:visible !important;
  border:0 !important;
  border-left:1px solid rgba(255,255,255,.12) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  isolation:auto !important;
}

/* Remove decorative card effects from previous versions */
.site-footer .footer-cta::before,
.site-footer .footer-cta::after{
  content:none !important;
  display:none !important;
}

.site-footer .footer-cta .footer-cta-label{
  display:block;
  margin-bottom:28px;
  color:#f4f7ff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.site-footer .footer-cta p{
  max-width:260px;
  margin:0 0 28px;
  color:#aeb8c8;
  font-size:16px;
  line-height:1.65;
}

.site-footer .footer-cta a{
  position:relative !important;
  min-height:auto !important;
  padding:0 0 9px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.22) !important;
  border-radius:0 !important;
  color:#f6f8ff !important;
  background:transparent !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
}

.site-footer .footer-cta a::after{
  content:none !important;
  display:none !important;
}

.site-footer .footer-cta a span{
  display:inline-block;
  color:var(--blue);
  font-size:14px;
  transform:translateY(-1px);
}

.site-footer .footer-cta a:hover{
  transform:translateX(2px);
  border-color:rgba(255,255,255,.38) !important;
  background:transparent !important;
}

/* 2) Contact `.expect-head`: match the visual rhythm of `.brief-side` heading */
.contact-v19-expect .expect-head{
  display:block !important;
  margin-bottom:40px !important;
}

.contact-v19-expect .expect-head .eyebrow{
  display:inline-block;
}

.contact-v19-expect .expect-head h2{
  max-width:760px !important;
  margin:22px 0 40px !important;
  font-size:clamp(44px,4.2vw,74px) !important;
  line-height:.98 !important;
  letter-spacing:-.058em !important;
  text-wrap:balance;
  background:linear-gradient(90deg,var(--ink),var(--ink) 48%,var(--blue) 68%,var(--violet) 82%,var(--pink));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

@media(max-width:980px){
  .site-footer .footer-cta{
    padding-left:0 !important;
    border-left:0 !important;
    padding-top:30px !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
  }
}

@media(max-width:760px){
  .contact-v19-expect .expect-head h2{
    font-size:40px !important;
  }
}


/* =========================================================
   V25 — Contact brief-side equal height with form
   ========================================================= */

/* Make both columns stretch to the same height */
.contact-v19-brief{
  align-items:stretch !important;
}

/* Left content becomes a full-height panel matching the form height */
.contact-v19-brief .brief-side{
  height:100% !important;
  min-height:100% !important;
  padding:38px !important;
  display:flex !important;
  flex-direction:column !important;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 92% 10%,rgba(112,72,255,.055),transparent 28%),
    linear-gradient(145deg,#ffffff,#fafbfe);
  box-shadow:0 28px 80px rgba(40,48,80,.045);
}

/* Keep the title area compact so cards can fill the remaining height */
.contact-v19-brief .brief-side h2{
  margin-bottom:34px !important;
}

/* Cards fill the remaining vertical space */
.contact-v19-brief .brief-routes{
  flex:1 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;
  align-items:stretch !important;
}

/* Individual route cards stretch evenly */
.contact-v19-brief .brief-routes article{
  min-height:auto !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

/* Cleaner spacing inside stretched cards */
.contact-v19-brief .brief-routes h3{
  margin:42px 0 12px !important;
}

@media(max-width:1180px){
  .contact-v19-brief .brief-side{
    height:auto !important;
    min-height:0 !important;
  }
}

@media(max-width:760px){
  .contact-v19-brief .brief-side{
    padding:28px !important;
  }

  .contact-v19-brief .brief-routes{
    grid-template-columns:1fr !important;
  }

  .contact-v19-brief .brief-routes article{
    min-height:210px !important;
  }
}


/* =========================================================
   V26 — Contact brief-side natural height solution
   ========================================================= */

/* Better solution: do not wrap `.brief-side` in an extra bordered panel */
.contact-v19-brief{
  align-items:start !important;
}

/* Remove the artificial panel treatment added in V25 */
.contact-v19-brief .brief-side{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  display:block !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Keep the heading as the main visual anchor */
.contact-v19-brief .brief-side h2{
  margin-bottom:42px !important;
}

/* Make the cards themselves carry the height and visual weight */
.contact-v19-brief .brief-routes{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:22px !important;
  align-items:stretch !important;
}

/* Taller cards so title + cards visually approach the form height */
.contact-v19-brief .brief-routes article{
  min-height:285px !important;
  height:auto !important;
  padding:30px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 18px 50px rgba(40,48,80,.04) !important;
}

/* More balanced spacing inside taller cards */
.contact-v19-brief .brief-routes h3{
  margin:0 0 14px !important;
  font-size:27px !important;
}

.contact-v19-brief .brief-routes p{
  margin:0 !important;
}

/* Preserve clear card label position */
.contact-v19-brief .brief-routes article span{
  margin-bottom:auto;
}

/* On large screens, this creates a natural visual height close to the form */
@media(min-width:1181px){
  .contact-v19-brief .brief-routes article{
    min-height:300px !important;
  }
}

/* Tablet/mobile returns to comfortable natural stacking */
@media(max-width:1180px){
  .contact-v19-brief{
    align-items:start !important;
  }

  .contact-v19-brief .brief-side{
    padding:0 !important;
  }
}

@media(max-width:760px){
  .contact-v19-brief .brief-routes{
    grid-template-columns:1fr !important;
  }

  .contact-v19-brief .brief-routes article{
    min-height:220px !important;
    padding:26px !important;
  }
}


/* =========================================================
   V27 — CSS-only Motion System v1
   Premium futuristic motion without JavaScript
   ========================================================= */

/* Smooth in-page navigation */
html{
  scroll-behavior:smooth;
}

/* Performance hints for animated elements */
.page-hero-compact::before,
.page-hero-overlay,
.page-hero-compact::after,
.hero-orb,
.hero-grid,
.glass-panel,
.dark-ui,
.portfolio-gallery-card,
.portfolio-project-visual *,
.portfolio-gallery-grid .portfolio-gallery-card,
.services-v13-core-grid article,
.service-detail-visual,
.brief-routes article,
.expect-grid article,
.contact-v19-form,
.footer-col a,
.site-footer .footer-cta a{
  will-change:transform, opacity;
}

/* ---------------------------------------------------------
   1) CSS scroll reveal — sections/cards enter softly
   Uses modern scroll-driven animations when supported.
   --------------------------------------------------------- */

@supports (animation-timeline:view()){
  .section,
  .selected-work,
  .lab-guide,
  .page-hero-compact + section,
  .portfolio-v16-filter,
  .portfolio-gallery-grid,
  .portfolio-project-inquiry,
  .contact-v19-brief,
  .contact-v19-expect,
  .services-v13-overview,
  .service-detail,
  .creative-tech-v13,
  .services-v13-process,
  .services-v13-cta,
  .about-values-section,
  .about-editorial,
  .about-v11-approach,
  .about-technology,
  .about-project-fit,
  .about-v13-final{
    animation:quarzon-section-reveal linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 22%;
  }

  .services-v13-core-grid article,
  .brief-routes article,
  .expect-grid article,
  .about-values-grid article,
  .about-process-map article,
  .portfolio-gallery-grid .portfolio-gallery-card,
  .portfolio-v15-index-list a,
  .contact-v19-form,
  .footer-col,
  .footer-brand,
  .site-footer .footer-cta{
    animation:quarzon-card-reveal linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 28%;
  }
}

/* Fallback visible state for browsers without scroll timelines */
@supports not (animation-timeline:view()){
  .section,
  .selected-work,
  .lab-guide,
  .portfolio-gallery-grid .portfolio-gallery-card,
  .services-v13-core-grid article,
  .brief-routes article,
  .expect-grid article{
    opacity:1;
    transform:none;
  }
}

@keyframes quarzon-section-reveal{
  from{
    opacity:.15;
    transform:translateY(34px);
    filter:blur(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@keyframes quarzon-card-reveal{
  from{
    opacity:.1;
    transform:translateY(28px) scale(.985);
    filter:blur(8px);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

/* Staggered feel without JavaScript */
.services-v13-core-grid article:nth-child(2),
.about-values-grid article:nth-child(2),
.brief-routes article:nth-child(2),
.expect-grid article:nth-child(2),
.portfolio-gallery-grid .portfolio-gallery-card:nth-child(2){
  animation-range:entry 4% cover 30%;
}

.services-v13-core-grid article:nth-child(3),
.about-values-grid article:nth-child(3),
.brief-routes article:nth-child(3),
.expect-grid article:nth-child(3),
.portfolio-gallery-grid .portfolio-gallery-card:nth-child(3){
  animation-range:entry 8% cover 32%;
}

/* ---------------------------------------------------------
   2) Ambient internal page hero motion
   --------------------------------------------------------- */

.page-hero-compact::before{
  animation:quarzon-hero-drift 18s ease-in-out infinite alternate;
}

.page-hero-overlay{
  animation:quarzon-overlay-breathe 12s ease-in-out infinite;
}

.page-hero-compact::after{
  animation:quarzon-grid-drift 22s linear infinite;
}

@keyframes quarzon-hero-drift{
  from{
    transform:scale(1.02) translate3d(-8px,-4px,0);
  }
  to{
    transform:scale(1.08) translate3d(10px,6px,0);
  }
}

@keyframes quarzon-overlay-breathe{
  0%,100%{
    opacity:1;
    filter:saturate(1);
  }
  50%{
    opacity:.92;
    filter:saturate(1.18);
  }
}

@keyframes quarzon-grid-drift{
  from{
    background-position:0 0,0 0;
  }
  to{
    background-position:42px 42px,-42px 42px;
  }
}

/* ---------------------------------------------------------
   3) Home hero subtle depth motion
   --------------------------------------------------------- */

.hero-grid{
  animation:quarzon-grid-float 18s linear infinite;
}

.hero-orb{
  animation:quarzon-orb-float 8s ease-in-out infinite alternate;
}

.glass-panel{
  animation:quarzon-panel-float 10s ease-in-out infinite alternate;
}

.dark-ui{
  animation:quarzon-panel-float-alt 12s ease-in-out infinite alternate;
}

.blue-cube{
  animation:quarzon-cube-float 9s ease-in-out infinite alternate;
}

@keyframes quarzon-grid-float{
  from{background-position:0 0,0 0;}
  to{background-position:44px 44px,-44px 44px;}
}

@keyframes quarzon-orb-float{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(8px,-14px,0) scale(1.025);}
}

@keyframes quarzon-panel-float{
  from{transform:translate3d(0,0,0) rotate(-8deg);}
  to{transform:translate3d(0,-12px,0) rotate(-6deg);}
}

@keyframes quarzon-panel-float-alt{
  from{transform:translate3d(0,0,0) rotate(5deg);}
  to{transform:translate3d(-8px,10px,0) rotate(3deg);}
}

@keyframes quarzon-cube-float{
  from{transform:translate3d(0,0,0) rotate(0deg);}
  to{transform:translate3d(10px,-10px,0) rotate(4deg);}
}

/* ---------------------------------------------------------
   4) Premium hover system for cards and links
   --------------------------------------------------------- */

.services-v13-core-grid article,
.brief-routes article,
.expect-grid article,
.about-values-grid article,
.portfolio-method-grid article,
.fit-large-grid article,
.contact-v19-form,
.portfolio-gallery-card{
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    box-shadow .38s cubic-bezier(.2,.8,.2,1),
    border-color .38s ease,
    background .38s ease;
}

.services-v13-core-grid article:hover,
.brief-routes article:hover,
.expect-grid article:hover,
.about-values-grid article:hover,
.portfolio-method-grid article:hover,
.fit-large-grid article:hover{
  transform:translateY(-6px);
  border-color:rgba(29,53,255,.18) !important;
  box-shadow:0 30px 90px rgba(32,42,76,.09) !important;
}

.portfolio-gallery-card:hover{
  transform:translateY(-7px) scale(1.004);
  box-shadow:0 36px 100px rgba(20,26,50,.14);
}

.portfolio-gallery-card:hover .p16-arrow{
  transform:translate(4px,-4px);
  background:#0a0f18;
  color:#fff;
}

.p16-arrow{
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    background .3s ease,
    color .3s ease;
}

.text-link,
.dark-link,
.footer-col a,
.main-nav a{
  transition:color .25s ease, transform .25s ease, opacity .25s ease;
}

.footer-col a:hover,
.main-nav a:hover{
  color:#fff;
  transform:translateX(2px);
}

.site-header .main-nav a:hover{
  color:var(--blue);
}

/* ---------------------------------------------------------
   5) Portfolio abstract object motion
   --------------------------------------------------------- */

.p16-orbit .ring{
  animation:quarzon-slow-rotate 18s linear infinite;
}

.p16-orbit .r2{
  animation-duration:24s;
  animation-direction:reverse;
}

.p16-orbit .blob,
.p16-halo .halo-sphere,
.p16-ribbon span,
.p16-softform span,
.p16-earth-art span,
.p16-prism .cube,
.p16-podium .ball,
.p16-construct-art .beam{
  animation:quarzon-object-float 7s ease-in-out infinite alternate;
}

.p16-orbit .b2,
.p16-prism .c2,
.p16-podium .ball.left{
  animation-delay:-1.4s;
}

.p16-orbit .b3,
.p16-prism .c3,
.p16-podium .ball.right{
  animation-delay:-2.8s;
}

.p16-brush .stroke{
  animation:quarzon-brush-breathe 6s ease-in-out infinite alternate;
}

.p16-brush .s2{animation-delay:-1s;}
.p16-brush .s3{animation-delay:-2s;}
.p16-brush .s4{animation-delay:-3s;}

.p16-particle-wave,
.tech-v11-field,
.creative-wave,
.portfolio-wave,
.v15-particle-wave{
  animation:quarzon-particle-drift 16s linear infinite;
}

@keyframes quarzon-slow-rotate{
  to{transform:rotate(360deg);}
}

@keyframes quarzon-object-float{
  from{
    translate:0 0;
    filter:saturate(1);
  }
  to{
    translate:0 -12px;
    filter:saturate(1.12);
  }
}

@keyframes quarzon-brush-breathe{
  from{
    translate:0 0;
    scale:1;
  }
  to{
    translate:0 -8px;
    scale:1.025;
  }
}

@keyframes quarzon-particle-drift{
  from{
    background-position:0 0,0 0;
  }
  to{
    background-position:84px 84px,-88px 88px;
  }
}

/* ---------------------------------------------------------
   6) Buttons and form microinteractions
   --------------------------------------------------------- */

.btn,
.header-cta,
.contact-v19-form button{
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    background .28s ease,
    color .28s ease;
}

.btn:hover,
.header-cta:hover,
.contact-v19-form button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(10,15,25,.16);
}

.contact-v19-form input,
.contact-v19-form select,
.contact-v19-form textarea{
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease,
    background .25s ease;
}

.contact-v19-form input:focus,
.contact-v19-form select:focus,
.contact-v19-form textarea:focus{
  transform:translateY(-1px);
}

/* ---------------------------------------------------------
   7) Footer minimal motion
   --------------------------------------------------------- */

.site-footer{
  position:relative;
  overflow:hidden;
}

.site-footer::after{
  content:"";
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(29,53,255,.65),rgba(112,72,255,.28),transparent);
  animation:quarzon-footer-line 7s ease-in-out infinite;
  opacity:.65;
}

.site-footer .footer-cta a span{
  transition:transform .25s ease;
}

.site-footer .footer-cta a:hover span{
  transform:translate(3px,-1px);
}

@keyframes quarzon-footer-line{
  0%,100%{
    opacity:.18;
    transform:scaleX(.72);
  }
  50%{
    opacity:.68;
    transform:scaleX(1);
  }
}

/* ---------------------------------------------------------
   8) Reduced motion accessibility
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto !important;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    scroll-behavior:auto !important;
  }
}


/* =========================================================
   V28 — Visible CSS Motion System
   More noticeable, browser-friendlier, still 100% CSS
   ========================================================= */

/* Page-load entrance motion: visible even without CSS scroll timelines */
body{
  animation:quarzon-page-fade .65s ease both;
}

@keyframes quarzon-page-fade{
  from{opacity:.01;}
  to{opacity:1;}
}

.hero-copy,
.hero-visual,
.page-hero-content,
.services-v13-heading,
.portfolio-introduction,
.brief-side,
.contact-v19-form{
  animation:quarzon-visible-rise .85s cubic-bezier(.2,.8,.2,1) both;
}

.hero-visual,
.contact-v19-form{
  animation-delay:.12s;
}

@keyframes quarzon-visible-rise{
  from{
    opacity:0;
    transform:translateY(32px) scale(.985);
    filter:blur(10px);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

/* Stronger internal banner futuristic motion */
.page-hero-compact{
  position:relative;
}

.page-hero-compact::before{
  animation:quarzon-v28-hero-zoom 14s ease-in-out infinite alternate !important;
}

.page-hero-compact::after{
  opacity:.55 !important;
  animation:quarzon-v28-scan-grid 12s linear infinite !important;
}

.page-hero-content h1{
  animation:quarzon-title-glow 4.8s ease-in-out infinite;
}

@keyframes quarzon-v28-hero-zoom{
  from{
    transform:scale(1.02) translate3d(-14px,-8px,0);
    filter:saturate(1) contrast(1);
  }
  to{
    transform:scale(1.1) translate3d(14px,8px,0);
    filter:saturate(1.28) contrast(1.08);
  }
}

@keyframes quarzon-v28-scan-grid{
  from{background-position:0 0,0 0;}
  to{background-position:80px 80px,-80px 80px;}
}

@keyframes quarzon-title-glow{
  0%,100%{text-shadow:0 0 0 rgba(255,255,255,0);}
  50%{text-shadow:0 0 34px rgba(126,114,255,.24);}
}

/* More visible Home hero motion */
.hero-visual{
  animation:quarzon-visible-rise .85s cubic-bezier(.2,.8,.2,1) .12s both,
            quarzon-hero-visual-breathe 7s ease-in-out 1s infinite alternate;
}

.hero-orb{
  animation:quarzon-v28-orb-drift 6s ease-in-out infinite alternate !important;
}

.glass-panel{
  animation:quarzon-v28-panel-one 7s ease-in-out infinite alternate !important;
}

.dark-ui{
  animation:quarzon-v28-panel-two 8s ease-in-out infinite alternate !important;
}

.blue-cube{
  animation:quarzon-v28-cube 6.5s ease-in-out infinite alternate !important;
}

@keyframes quarzon-hero-visual-breathe{
  from{filter:saturate(1);}
  to{filter:saturate(1.15);}
}

@keyframes quarzon-v28-orb-drift{
  from{transform:translate3d(-6px,4px,0) scale(1);}
  to{transform:translate3d(16px,-20px,0) scale(1.045);}
}

@keyframes quarzon-v28-panel-one{
  from{transform:translate3d(0,0,0) rotate(-8deg);}
  to{transform:translate3d(10px,-18px,0) rotate(-4deg);}
}

@keyframes quarzon-v28-panel-two{
  from{transform:translate3d(0,0,0) rotate(5deg);}
  to{transform:translate3d(-16px,14px,0) rotate(8deg);}
}

@keyframes quarzon-v28-cube{
  from{transform:translate3d(0,0,0) rotate(0deg) scale(1);}
  to{transform:translate3d(18px,-16px,0) rotate(9deg) scale(1.06);}
}

/* Clearer card hover and shine */
.services-v13-core-grid article,
.brief-routes article,
.expect-grid article,
.about-values-grid article,
.portfolio-gallery-card{
  position:relative;
  overflow:hidden;
}

.services-v13-core-grid article::after,
.brief-routes article::after,
.expect-grid article::after,
.about-values-grid article::after,
.portfolio-gallery-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(120deg,transparent 0%,rgba(29,53,255,.08) 45%,rgba(226,67,196,.07) 56%,transparent 100%);
  transform:translateX(-70%);
  transition:opacity .35s ease;
}

.services-v13-core-grid article:hover::after,
.brief-routes article:hover::after,
.expect-grid article:hover::after,
.about-values-grid article:hover::after,
.portfolio-gallery-card:hover::after{
  opacity:1;
  animation:quarzon-card-shine 1.1s ease both;
}

@keyframes quarzon-card-shine{
  from{transform:translateX(-70%);}
  to{transform:translateX(70%);}
}

.services-v13-core-grid article:hover,
.brief-routes article:hover,
.expect-grid article:hover,
.about-values-grid article:hover{
  transform:translateY(-10px) scale(1.01) !important;
  border-color:rgba(29,53,255,.28) !important;
  box-shadow:0 36px 100px rgba(30,38,76,.13) !important;
}

.portfolio-gallery-card:hover{
  transform:translateY(-12px) scale(1.012) !important;
  box-shadow:0 42px 110px rgba(20,26,50,.18) !important;
}

/* Portfolio: make abstract objects visibly alive */
.portfolio-project-visual{
  overflow:hidden;
}

.portfolio-project-visual::before{
  content:"";
  position:absolute;
  inset:-30%;
  opacity:.16;
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),transparent 12%),
    radial-gradient(circle at 70% 55%,rgba(29,53,255,.8),transparent 14%),
    radial-gradient(circle at 52% 78%,rgba(226,67,196,.7),transparent 11%);
  animation:quarzon-visual-light-drift 9s ease-in-out infinite alternate;
}

.portfolio-gallery-card:hover .portfolio-project-visual::before{
  opacity:.28;
}

@keyframes quarzon-visual-light-drift{
  from{transform:translate3d(-18px,-12px,0) rotate(0deg);}
  to{transform:translate3d(22px,18px,0) rotate(14deg);}
}

.p16-ribbon span,
.p16-softform span,
.p16-earth-art span,
.p16-prism .cube,
.p16-podium .ball,
.p16-construct-art .beam,
.p16-halo .halo-sphere{
  animation-duration:4.8s !important;
}

.portfolio-gallery-card:hover .p16-arrow{
  transform:translate(6px,-6px) scale(1.08) !important;
}

/* Stronger button and form feedback */
.btn:hover,
.header-cta:hover,
.contact-v19-form button:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 24px 60px rgba(10,15,25,.22) !important;
}

.contact-v19-form input:hover,
.contact-v19-form select:hover,
.contact-v19-form textarea:hover{
  border-color:rgba(29,53,255,.28) !important;
}

.contact-v19-form input:focus,
.contact-v19-form select:focus,
.contact-v19-form textarea:focus{
  transform:translateY(-2px) !important;
  border-color:rgba(29,53,255,.75) !important;
  box-shadow:0 0 0 5px rgba(29,53,255,.1), 0 14px 32px rgba(40,48,80,.08) !important;
}

/* More visible footer link motion, still subtle */
.footer-col a{
  position:relative;
  display:inline-block;
}

.footer-col a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:1px;
  background:linear-gradient(90deg,var(--blue),rgba(255,255,255,.45));
  transition:width .28s ease;
}

.footer-col a:hover::after{
  width:100%;
}

.site-footer::after{
  opacity:.85 !important;
  animation-duration:4.8s !important;
}

/* Animated accent for the Contact form header */
.contact-v19-form .form-header{
  position:relative;
  overflow:hidden;
}

.contact-v19-form .form-header::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:42%;
  height:1px;
  background:linear-gradient(90deg,var(--blue),var(--violet),transparent);
  animation:quarzon-form-line 4s ease-in-out infinite;
}

@keyframes quarzon-form-line{
  0%,100%{
    transform:translateX(0);
    opacity:.35;
  }
  50%{
    transform:translateX(85%);
    opacity:1;
  }
}

/* Keep accessibility setting */
@media (prefers-reduced-motion: reduce){
  body,
  .hero-copy,
  .hero-visual,
  .page-hero-content,
  .services-v13-heading,
  .portfolio-introduction,
  .brief-side,
  .contact-v19-form,
  .page-hero-compact::before,
  .page-hero-compact::after,
  .page-hero-content h1,
  .hero-orb,
  .glass-panel,
  .dark-ui,
  .blue-cube,
  .portfolio-project-visual::before,
  .contact-v19-form .form-header::after,
  .site-footer::after{
    animation:none !important;
  }
}


/* =========================================================
   V31 — Geometric 3D line icons instead of numbered blocks
   ========================================================= */

.geo-icon{
  --geo-size:46px;
  --geo-line:rgba(29,53,255,.72);
  --geo-soft:rgba(112,72,255,.34);
  --geo-bg:linear-gradient(145deg,rgba(255,255,255,.82),rgba(245,247,255,.48));
  position:relative !important;
  display:inline-block !important;
  width:var(--geo-size) !important;
  height:var(--geo-size) !important;
  flex:0 0 var(--geo-size) !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(29,53,255,.14) !important;
  border-radius:14px !important;
  color:var(--geo-line) !important;
  background:
    radial-gradient(circle at 70% 18%,rgba(112,72,255,.10),transparent 34%),
    var(--geo-bg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 16px 34px rgba(40,48,80,.055) !important;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:-9999px !important;
  overflow:hidden !important;
  transform-style:preserve-3d;
}

.geo-icon::before,
.geo-icon::after{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  pointer-events:none;
  box-sizing:border-box;
}

.geo-cube::before{
  left:12px;
  top:15px;
  width:19px;
  height:17px;
  border:1.5px solid currentColor;
  border-radius:3px;
  transform:skewY(-10deg);
}

.geo-cube::after{
  left:17px;
  top:10px;
  width:19px;
  height:17px;
  border:1.5px solid currentColor;
  border-left:0;
  border-bottom:0;
  border-radius:2px;
  opacity:.68;
  transform:skewY(-10deg);
}

.geo-diamond::before{
  left:13px;
  top:13px;
  width:20px;
  height:20px;
  border:1.5px solid currentColor;
  border-radius:4px;
  transform:rotate(45deg) skew(-5deg,-5deg);
}

.geo-diamond::after{
  left:17px;
  top:17px;
  width:12px;
  height:12px;
  border:1px solid var(--geo-soft);
  border-radius:3px;
  transform:rotate(45deg);
}

.geo-orbit::before{
  left:9px;
  top:17px;
  width:28px;
  height:13px;
  border:1.5px solid currentColor;
  border-radius:50%;
  transform:rotate(-18deg);
}

.geo-orbit::after{
  left:19px;
  top:16px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:currentColor;
  box-shadow:11px 7px 0 -4px var(--geo-soft);
}

.geo-prism::before{
  left:13px;
  top:12px;
  width:20px;
  height:22px;
  border-left:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:skewX(-12deg);
}

.geo-prism::after{
  left:13px;
  top:12px;
  width:20px;
  height:14px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid var(--geo-soft);
  transform:skewX(22deg) rotate(-12deg);
}

.geo-frame::before{
  left:11px;
  top:11px;
  width:24px;
  height:24px;
  border:1.5px solid currentColor;
  border-radius:6px;
  transform:perspective(70px) rotateX(16deg) rotateY(-18deg);
}

.geo-frame::after{
  left:16px;
  top:16px;
  width:14px;
  height:14px;
  border:1px solid var(--geo-soft);
  border-radius:4px;
  transform:perspective(70px) rotateX(16deg) rotateY(-18deg);
}

.geo-node::before{
  left:12px;
  top:12px;
  width:8px;
  height:8px;
  border:1.5px solid currentColor;
  border-radius:50%;
  box-shadow:
    16px 4px 0 0 currentColor,
    8px 18px 0 0 currentColor;
}

.geo-node::after{
  left:17px;
  top:16px;
  width:18px;
  height:17px;
  border-top:1.5px solid var(--geo-soft);
  border-left:1.5px solid var(--geo-soft);
  transform:skewY(-26deg);
}

.dark-section .geo-icon,
.about-technology .geo-icon,
.site-footer .geo-icon{
  --geo-line:rgba(255,255,255,.76);
  --geo-soft:rgba(126,114,255,.48);
  --geo-bg:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.work-side span.geo-icon,
.process-line span.geo-icon,
.services-v13-core-grid article span.geo-icon,
.services-process-line span.geo-icon,
.about-values-grid article span.geo-icon,
.about-process-map span.geo-icon,
.about-v11-section-label span.geo-icon,
.expect-grid span.geo-icon{
  display:inline-block !important;
  width:46px !important;
  height:46px !important;
  color:var(--geo-line) !important;
  font-size:0 !important;
  font-weight:normal !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.work-side span.geo-icon{
  margin-bottom:14px !important;
}

.services-v13-core-grid h3,
.about-values-grid h3,
.expect-grid h3{
  margin-top:70px !important;
}

.process-line article .geo-icon{
  margin-bottom:20px !important;
}

.process-line b{
  margin-top:18px !important;
}

.about-process-map span.geo-icon,
.services-process-line span.geo-icon{
  margin-bottom:74px !important;
}

.about-process-map h3,
.services-process-line h3{
  margin-top:0 !important;
}

.about-v11-section-label .geo-icon{
  --geo-size:30px;
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
  vertical-align:middle;
}

.about-v11-section-label .geo-icon::before{
  transform:scale(.68) rotate(45deg) skew(-5deg,-5deg);
  transform-origin:center;
}

.about-v11-section-label .geo-icon::after{
  transform:scale(.68) rotate(45deg);
  transform-origin:center;
}

.geo-icon{
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    border-color .34s ease,
    box-shadow .34s ease,
    background .34s ease;
}

article:hover > .geo-icon,
.work-side article:hover .geo-icon{
  transform:translateY(-4px) rotate(-2deg) !important;
  border-color:rgba(29,53,255,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 24px 50px rgba(29,53,255,.10) !important;
}

/* Preserve previous heading cleanup */
.about-v11-approach-head p{
  display:none !important;
}

.about-v11-fit-head h2{
  max-width:none !important;
  width:100% !important;
  white-space:nowrap !important;
  font-size:clamp(34px,3.8vw,64px) !important;
  line-height:1 !important;
}

.contact-v19-expect .expect-head h2,
.expect-head h2{
  max-width:none !important;
  width:100% !important;
  white-space:nowrap !important;
  font-size:clamp(34px,3.8vw,64px) !important;
  line-height:1 !important;
}

@media(max-width:980px){
  .about-v11-fit-head h2,
  .contact-v19-expect .expect-head h2,
  .expect-head h2{
    white-space:normal !important;
  }
}

@media(max-width:760px){
  .geo-icon{
    --geo-size:40px;
  }

  .work-side span.geo-icon,
  .process-line span.geo-icon,
  .services-v13-core-grid article span.geo-icon,
  .services-process-line span.geo-icon,
  .about-values-grid article span.geo-icon,
  .about-process-map span.geo-icon,
  .expect-grid span.geo-icon{
    width:40px !important;
    height:40px !important;
  }

  .services-v13-core-grid h3,
  .about-values-grid h3,
  .expect-grid h3{
    margin-top:58px !important;
  }

  .about-process-map span.geo-icon,
  .services-process-line span.geo-icon{
    margin-bottom:46px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .geo-icon,
  article:hover > .geo-icon,
  .work-side article:hover .geo-icon{
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   V32 — Home SVG service icons + process numbers + filled portfolio grid
   ========================================================= */

/* 1) Home selected work: remove old visible index cleanly */
.work-index{
  display:none !important;
}

.work-copy h2{
  margin-top:0 !important;
}

/* 2) Home service-number replaced with high-quality inline SVG 3D line icons */
.service-number{
  display:none !important;
}

.service-svg-icon{
  position:relative;
  z-index:1;
  width:78px;
  height:78px;
  margin:0 0 46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(29,53,255,.12);
  border-radius:22px;
  background:
    radial-gradient(circle at 72% 18%,rgba(112,72,255,.12),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.86),rgba(246,248,255,.62));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 22px 48px rgba(34,44,85,.07);
  transition:
    transform .36s cubic-bezier(.2,.8,.2,1),
    box-shadow .36s ease,
    border-color .36s ease;
}

.service-svg-icon svg{
  width:62px;
  height:62px;
  display:block;
}

.service-card:hover .service-svg-icon{
  transform:translateY(-6px) rotate(-2deg) scale(1.035);
  border-color:rgba(29,53,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 30px 70px rgba(29,53,255,.13);
}

.service-card:hover .service-svg-icon svg{
  animation:service-svg-float 1.8s ease-in-out infinite alternate;
}

@keyframes service-svg-float{
  from{transform:translateY(0);}
  to{transform:translateY(-4px);}
}

/* 3) Home process-line can use numbers */
.process-line span.geo-icon{
  display:none !important;
}

.process-line .process-number{
  position:relative;
  z-index:2;
  width:auto !important;
  height:auto !important;
  display:inline-block !important;
  color:#111827 !important;
  font-size:13px !important;
  font-weight:850 !important;
  letter-spacing:.11em !important;
  line-height:1 !important;
  text-indent:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.process-line article:hover .process-number{
  color:var(--blue) !important;
}

/* Restore the original process-line spacing for numbered process steps */
.process-line article .process-number{
  margin-bottom:0 !important;
}

.process-line b{
  margin:20px 0 27px !important;
}

/* 4) Portfolio grid: explicit filled mosaic, no empty holes inside #portfolio-grid */
#portfolio-grid.portfolio-gallery-grid{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  grid-auto-rows:88px !important;
  grid-auto-flow:dense !important;
  gap:28px !important;
  align-items:stretch !important;
}

#portfolio-grid .portfolio-gallery-card{
  min-height:0 !important;
  height:100% !important;
}

/* Desktop filled layout */
#portfolio-grid .portfolio-gallery-card:nth-child(1){
  grid-column:1 / 5 !important;
  grid-row:1 / 5 !important;
}

#portfolio-grid .portfolio-gallery-card:nth-child(2){
  grid-column:5 / 9 !important;
  grid-row:1 / 5 !important;
}

#portfolio-grid .portfolio-gallery-card:nth-child(3){
  grid-column:9 / 13 !important;
  grid-row:1 / 3 !important;
}

#portfolio-grid .portfolio-gallery-card:nth-child(4){
  grid-column:9 / 13 !important;
  grid-row:3 / 5 !important;
}

#portfolio-grid .portfolio-gallery-card:nth-child(5){
  grid-column:1 / 5 !important;
  grid-row:5 / 10 !important;
}

#portfolio-grid .portfolio-gallery-card:nth-child(6){
  grid-column:5 / 9 !important;
  grid-row:5 / 7 !important;
}

#portfolio-grid .portfolio-gallery-card:nth-child(7){
  grid-column:9 / 13 !important;
  grid-row:5 / 7 !important;
}

#portfolio-grid .portfolio-gallery-card:nth-child(8){
  grid-column:5 / 13 !important;
  grid-row:7 / 10 !important;
}

#portfolio-grid .portfolio-gallery-card:nth-child(9){
  grid-column:1 / 7 !important;
  grid-row:10 / 14 !important;
}

#portfolio-grid .portfolio-gallery-card:nth-child(10){
  grid-column:7 / 13 !important;
  grid-row:10 / 14 !important;
}

/* Make compact cards read better in the new filled grid */
#portfolio-grid .portfolio-gallery-card:nth-child(3) .portfolio-gallery-details,
#portfolio-grid .portfolio-gallery-card:nth-child(4) .portfolio-gallery-details,
#portfolio-grid .portfolio-gallery-card:nth-child(6) .portfolio-gallery-details,
#portfolio-grid .portfolio-gallery-card:nth-child(7) .portfolio-gallery-details{
  bottom:22px !important;
}

/* Tablet: dense 4-column mosaic without empty holes */
@media(max-width:1180px){
  #portfolio-grid.portfolio-gallery-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-rows:150px !important;
  }

  #portfolio-grid .portfolio-gallery-card{
    grid-column:auto !important;
    grid-row:auto !important;
  }

  #portfolio-grid .portfolio-gallery-card:nth-child(1),
  #portfolio-grid .portfolio-gallery-card:nth-child(2),
  #portfolio-grid .portfolio-gallery-card:nth-child(9),
  #portfolio-grid .portfolio-gallery-card:nth-child(10){
    grid-column:span 2 !important;
    grid-row:span 3 !important;
  }

  #portfolio-grid .portfolio-gallery-card:nth-child(3),
  #portfolio-grid .portfolio-gallery-card:nth-child(4),
  #portfolio-grid .portfolio-gallery-card:nth-child(6),
  #portfolio-grid .portfolio-gallery-card:nth-child(7){
    grid-column:span 2 !important;
    grid-row:span 2 !important;
  }

  #portfolio-grid .portfolio-gallery-card:nth-child(5){
    grid-column:span 2 !important;
    grid-row:span 4 !important;
  }

  #portfolio-grid .portfolio-gallery-card:nth-child(8){
    grid-column:1 / -1 !important;
    grid-row:span 3 !important;
  }
}

/* Mobile: single column, natural stacking */
@media(max-width:900px){
  #portfolio-grid.portfolio-gallery-grid{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
    gap:22px !important;
  }

  #portfolio-grid .portfolio-gallery-card,
  #portfolio-grid .portfolio-gallery-card:nth-child(n){
    grid-column:1 !important;
    grid-row:auto !important;
    min-height:430px !important;
  }

  #portfolio-grid .portfolio-gallery-card:nth-child(8){
    min-height:520px !important;
  }
}

@media(max-width:640px){
  .service-svg-icon{
    width:68px;
    height:68px;
    border-radius:19px;
    margin-bottom:38px;
  }

  .service-svg-icon svg{
    width:54px;
    height:54px;
  }
}

@media (prefers-reduced-motion: reduce){
  .service-card:hover .service-svg-icon svg{
    animation:none !important;
  }
}


/* =========================================================
   V33 — Premium 3D SVG icons
   Replaces weaker CSS/line icons with refined inline SVG icons
   ========================================================= */

/* Hide legacy icon shells if any remain */
.geo-icon{
  display:none !important;
}

/* Shared premium SVG icon system */
.premium-svg-icon,
.service-svg-premium{
  position:relative;
  z-index:1;
  display:inline-grid !important;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  isolation:isolate;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:0 !important;
  color:inherit;
  background:
    radial-gradient(circle at 72% 18%,rgba(112,72,255,.13),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(244,247,255,.66));
  border:1px solid rgba(29,53,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 20px 44px rgba(34,44,85,.07);
  transform-style:preserve-3d;
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    border-color .38s ease,
    box-shadow .38s ease,
    background .38s ease;
}

.premium-svg-icon::before,
.service-svg-premium::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  opacity:.64;
  background:
    linear-gradient(135deg,rgba(255,255,255,.72),transparent 34%),
    radial-gradient(circle at 22% 16%,rgba(255,255,255,.78),transparent 18%);
  pointer-events:none;
}

.premium-svg-icon svg,
.service-svg-premium svg{
  display:block;
  overflow:visible;
  transform:translateZ(0);
}

/* General geometric icons used where numbers were replaced */
.premium-svg-icon{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
}

.premium-svg-icon svg{
  width:54px;
  height:54px;
}

/* Larger Home service icons */
.service-svg-premium{
  width:92px !important;
  height:92px !important;
  margin:0 0 42px !important;
  border-radius:26px !important;
}

.service-svg-premium svg{
  width:80px !important;
  height:80px !important;
}

/* Placement in known card systems */
.work-side .premium-svg-icon,
.process-line .premium-svg-icon,
.services-v13-core-grid article .premium-svg-icon,
.services-process-line .premium-svg-icon,
.about-values-grid article .premium-svg-icon,
.about-process-map .premium-svg-icon,
.expect-grid .premium-svg-icon{
  margin-bottom:22px !important;
}

.about-v11-section-label .premium-svg-icon{
  width:36px !important;
  height:36px !important;
  border-radius:12px !important;
  margin-right:4px;
}

.about-v11-section-label .premium-svg-icon svg{
  width:34px !important;
  height:34px !important;
}

/* Dark section adaptation */
.about-technology .premium-svg-icon,
.dark-section .premium-svg-icon,
.site-footer .premium-svg-icon{
  background:
    radial-gradient(circle at 72% 18%,rgba(112,72,255,.16),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  border-color:rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 42px rgba(0,0,0,.16);
}

/* Better rhythm after the larger premium icons */
.services-v13-core-grid h3,
.about-values-grid h3,
.expect-grid h3{
  margin-top:58px !important;
}

.about-process-map h3,
.services-process-line h3{
  margin-top:0 !important;
}

/* Icon motion and hover polish */
article:hover > .premium-svg-icon,
article:hover .premium-svg-icon,
.service-card:hover .service-svg-premium{
  transform:translateY(-7px) rotateX(8deg) rotateY(-8deg) scale(1.035) !important;
  border-color:rgba(29,53,255,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 30px 74px rgba(29,53,255,.15);
}

.premium-svg-icon svg,
.service-svg-premium svg{
  transition:transform .38s cubic-bezier(.2,.8,.2,1), filter .38s ease;
}

article:hover > .premium-svg-icon svg,
article:hover .premium-svg-icon svg,
.service-card:hover .service-svg-premium svg{
  transform:translateY(-2px) scale(1.035);
  filter:saturate(1.14);
}

/* Subtle constant life only for service icons */
.service-svg-premium svg{
  animation:premium-service-icon-breathe 5.8s ease-in-out infinite alternate;
}

@keyframes premium-service-icon-breathe{
  from{transform:translateY(0) scale(1);}
  to{transform:translateY(-3px) scale(1.018);}
}

/* Keep process-line numbers from v32 intact */
.process-line .process-number{
  display:inline-block !important;
}

/* Mobile icon sizing */
@media(max-width:760px){
  .premium-svg-icon{
    width:50px !important;
    height:50px !important;
    border-radius:16px !important;
  }

  .premium-svg-icon svg{
    width:48px !important;
    height:48px !important;
  }

  .service-svg-premium{
    width:78px !important;
    height:78px !important;
    border-radius:22px !important;
    margin-bottom:36px !important;
  }

  .service-svg-premium svg{
    width:68px !important;
    height:68px !important;
  }

  .services-v13-core-grid h3,
  .about-values-grid h3,
  .expect-grid h3{
    margin-top:48px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .premium-svg-icon,
  .premium-svg-icon svg,
  .service-svg-premium,
  .service-svg-premium svg{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   V34 — Original angular 3D SVG icons
   No circular/curved icon language, no repeated icon system
   ========================================================= */

/* Hide older icon systems if any remain */
.geo-icon,
.premium-svg-icon{
  display:none !important;
}

/* Angular SVG icon wrapper */
.angular-svg-icon,
.service-svg-angular{
  position:relative;
  z-index:1;
  display:inline-grid !important;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  isolation:isolate;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:0 !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,247,255,.68));
  border:1px solid rgba(29,53,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 20px 44px rgba(34,44,85,.07);
  clip-path:polygon(13% 0,100% 0,100% 82%,82% 100%,0 100%,0 13%);
  transform-style:preserve-3d;
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    border-color .38s ease,
    box-shadow .38s ease,
    background .38s ease;
}

/* Non-curved angular lighting */
.angular-svg-icon::before,
.service-svg-angular::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),transparent 34%),
    linear-gradient(315deg,rgba(29,53,255,.08),transparent 42%);
}

.angular-svg-icon::after,
.service-svg-angular::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:34%;
  height:34%;
  z-index:-1;
  background:linear-gradient(135deg,transparent,rgba(112,72,255,.10));
  clip-path:polygon(100% 0,100% 100%,0 100%);
}

/* Standard icon size */
.angular-svg-icon{
  width:62px !important;
  height:62px !important;
}

.angular-svg-icon svg{
  width:58px !important;
  height:58px !important;
  display:block;
  overflow:visible;
}

/* Larger Home services icons */
.service-svg-angular{
  width:96px !important;
  height:96px !important;
  margin:0 0 42px !important;
}

.service-svg-angular svg{
  width:84px !important;
  height:84px !important;
  display:block;
  overflow:visible;
}

/* Placement consistency */
.work-side .angular-svg-icon,
.services-v13-core-grid article .angular-svg-icon,
.services-process-line .angular-svg-icon,
.about-values-grid article .angular-svg-icon,
.about-process-map .angular-svg-icon,
.expect-grid .angular-svg-icon{
  margin-bottom:22px !important;
}

/* Section labels need smaller angular icons */
.about-v11-section-label .angular-svg-icon{
  width:38px !important;
  height:38px !important;
  margin-right:4px;
}

.about-v11-section-label .angular-svg-icon svg{
  width:36px !important;
  height:36px !important;
}

/* Dark section adaptation */
.about-technology .angular-svg-icon,
.dark-section .angular-svg-icon,
.site-footer .angular-svg-icon{
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 42px rgba(0,0,0,.16);
}

.about-technology .angular-svg-icon::before,
.dark-section .angular-svg-icon::before,
.site-footer .angular-svg-icon::before{
  background:
    linear-gradient(135deg,rgba(255,255,255,.14),transparent 34%),
    linear-gradient(315deg,rgba(112,72,255,.16),transparent 42%);
}

/* Hover motion: angular, premium, no circular rotation */
article:hover > .angular-svg-icon,
article:hover .angular-svg-icon,
.service-card:hover .service-svg-angular{
  transform:translateY(-7px) skewX(-2deg) skewY(1deg) scale(1.035) !important;
  border-color:rgba(29,53,255,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 32px 76px rgba(29,53,255,.15);
}

.angular-svg-icon svg,
.service-svg-angular svg{
  transition:transform .38s cubic-bezier(.2,.8,.2,1), filter .38s ease;
}

article:hover > .angular-svg-icon svg,
article:hover .angular-svg-icon svg,
.service-card:hover .service-svg-angular svg{
  transform:translate3d(2px,-3px,0) scale(1.035);
  filter:saturate(1.14);
}

/* Subtle angular idle motion only on Home service icons */
.service-svg-angular svg{
  animation:angular-service-icon-breathe 5.6s ease-in-out infinite alternate;
}

@keyframes angular-service-icon-breathe{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(3px,-4px,0);}
}

/* Rebalance after new larger icon system */
.services-v13-core-grid h3,
.about-values-grid h3,
.expect-grid h3{
  margin-top:54px !important;
}

/* Process line numbers must remain numbers */
.process-line .process-number{
  display:inline-block !important;
}

.process-line .angular-svg-icon{
  display:none !important;
}

/* Mobile */
@media(max-width:760px){
  .angular-svg-icon{
    width:54px !important;
    height:54px !important;
  }

  .angular-svg-icon svg{
    width:50px !important;
    height:50px !important;
  }

  .service-svg-angular{
    width:82px !important;
    height:82px !important;
    margin-bottom:36px !important;
  }

  .service-svg-angular svg{
    width:72px !important;
    height:72px !important;
  }

  .services-v13-core-grid h3,
  .about-values-grid h3,
  .expect-grid h3{
    margin-top:46px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .angular-svg-icon,
  .angular-svg-icon svg,
  .service-svg-angular,
  .service-svg-angular svg{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   V35 — Clean original 3D SVG line icons
   No icon background, no icon shadow, no curved/circular language
   ========================================================= */

/* Hide older icon systems if any survived */
.geo-icon,
.premium-svg-icon,
.angular-svg-icon,
.service-svg-angular,
.service-svg-premium{
  display:none !important;
}

/* New clean SVG icons: transparent wrapper, no shadow, no card background */
.line3d-icon,
.service-clean-icon{
  position:relative;
  z-index:1;
  display:inline-grid !important;
  place-items:center;
  flex:0 0 auto;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  clip-path:none !important;
  overflow:visible !important;
  isolation:auto !important;
  font-size:0 !important;
  line-height:0 !important;
  text-indent:0 !important;
  color:inherit;
  transform-style:preserve-3d;
  transition:transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s ease;
}

.line3d-icon::before,
.line3d-icon::after,
.service-clean-icon::before,
.service-clean-icon::after{
  content:none !important;
  display:none !important;
}

/* Standard icons used where block numbers were removed */
.line3d-icon{
  width:72px !important;
  height:72px !important;
  margin-bottom:20px !important;
}

.line3d-icon svg{
  width:72px !important;
  height:72px !important;
  display:block;
  overflow:visible;
  filter:none !important;
}

/* Larger Home services icons */
.service-clean-icon{
  width:108px !important;
  height:108px !important;
  margin:0 0 40px !important;
}

.service-clean-icon svg{
  width:108px !important;
  height:108px !important;
  display:block;
  overflow:visible;
  filter:none !important;
}

/* Remove older background/shadow effects from previous icon wrappers */
.service-svg-icon{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  clip-path:none !important;
}

/* Placement in existing content systems */
.work-side .line3d-icon,
.services-v13-core-grid article .line3d-icon,
.services-process-line .line3d-icon,
.about-values-grid article .line3d-icon,
.about-process-map .line3d-icon,
.expect-grid .line3d-icon{
  margin-bottom:22px !important;
}

.about-v11-section-label .line3d-icon{
  width:42px !important;
  height:42px !important;
  margin:0 8px 0 0 !important;
}

.about-v11-section-label .line3d-icon svg{
  width:42px !important;
  height:42px !important;
}

/* Better rhythm after clean larger icons */
.services-v13-core-grid h3,
.about-values-grid h3,
.expect-grid h3{
  margin-top:44px !important;
}

/* Keep Home process-line numbers only */
.process-line .process-number{
  display:inline-block !important;
}

.process-line .line3d-icon,
.process-line .service-clean-icon{
  display:none !important;
}

/* Hover: 3D movement only; no background/shadow/glow added */
article:hover > .line3d-icon,
article:hover .line3d-icon,
.service-card:hover .service-clean-icon{
  transform:translate3d(4px,-7px,0) skewX(-2deg) skewY(1deg) !important;
}

.line3d-icon svg,
.service-clean-icon svg{
  transition:transform .34s cubic-bezier(.2,.8,.2,1), filter .34s ease;
}

article:hover > .line3d-icon svg,
article:hover .line3d-icon svg,
.service-card:hover .service-clean-icon svg{
  transform:translate3d(2px,-2px,0) scale(1.03);
  filter:saturate(1.14) !important;
}

/* Quiet ambient motion only for the three main service icons */
.service-clean-icon svg{
  animation:clean-icon-drift 5.8s ease-in-out infinite alternate;
}

@keyframes clean-icon-drift{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(3px,-4px,0);}
}

/* Mobile sizes */
@media(max-width:760px){
  .line3d-icon{
    width:62px !important;
    height:62px !important;
  }

  .line3d-icon svg{
    width:62px !important;
    height:62px !important;
  }

  .service-clean-icon{
    width:92px !important;
    height:92px !important;
    margin-bottom:34px !important;
  }

  .service-clean-icon svg{
    width:92px !important;
    height:92px !important;
  }

  .services-v13-core-grid h3,
  .about-values-grid h3,
  .expect-grid h3{
    margin-top:36px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .line3d-icon,
  .line3d-icon svg,
  .service-clean-icon,
  .service-clean-icon svg{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   QUARZON HOME — CONSOLIDATED STABLE OVERRIDES
   Built on the clean original v35 stylesheet.
   No legacy experimental Home overrides are carried forward.
   ========================================================= */

/* ---------- Header / mobile navigation ---------- */
.home-mobile-nav{display:none}

@media(max-width:780px){
  .site-header{
    position:relative;
    z-index:100;
    grid-template-columns:1fr auto;
  }

  .main-nav,
  .header-actions{
    display:none;
  }

  .home-mobile-nav{
    display:block;
    position:relative;
    justify-self:end;
  }

  .home-mobile-nav summary{
    width:44px;
    height:44px;
    display:grid;
    place-content:center;
    gap:6px;
    cursor:pointer;
    list-style:none;
    border:1px solid var(--line);
    border-radius:50%;
    background:#fff;
  }

  .home-mobile-nav summary::-webkit-details-marker{display:none}

  .home-mobile-nav summary span{
    width:16px;
    height:1.5px;
    display:block;
    background:#111827;
    transition:transform .2s ease;
  }

  .home-mobile-nav[open] summary span:first-child{
    transform:translateY(3.75px) rotate(45deg);
  }

  .home-mobile-nav[open] summary span:last-child{
    transform:translateY(-3.75px) rotate(-45deg);
  }

  .home-mobile-nav nav{
    width:min(290px,calc(100vw - 44px));
    position:absolute;
    right:0;
    top:54px;
    padding:12px;
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    box-shadow:0 24px 55px rgba(30,40,70,.13);
  }

  .home-mobile-nav nav a{
    min-height:48px;
    display:flex;
    align-items:center;
    padding:0 14px;
    border-bottom:1px solid #edf0f4;
    color:#111827;
    font-size:12px;
    font-weight:750;
  }

  .home-mobile-nav nav a:last-child{border-bottom:0}
}

/* ---------- Hero: side-index was removed, so the grid is now truly 2 columns ---------- */
.hero{
  grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr);
}

@media(max-width:1200px){
  .hero{grid-template-columns:1fr 1fr}
}

@media(max-width:780px){
  .hero{grid-template-columns:1fr}
}

/* ---------- Services ---------- */
.home-services-redesign{
  padding-top:96px;
  padding-bottom:100px;
  background:
    radial-gradient(circle at 92% 10%,rgba(112,72,255,.055),transparent 22%),
    linear-gradient(180deg,#fff 0%,#fbfbfd 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.home-services-head{
  display:block;
  margin-bottom:54px;
}

.home-services-head>div{max-width:none}

.home-services-head h2{
  max-width:none;
  margin:22px 0 0;
  white-space:nowrap;
  font-size:clamp(42px,4.6vw,72px);
  line-height:1;
  letter-spacing:-.055em;
}

.home-services-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  background:#fff;
}

.home-service-card{
  min-height:330px;
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:34px 38px 30px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  overflow:hidden;
  transition:background .25s ease;
}

.home-service-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,var(--cyan),var(--blue),var(--violet),var(--pink));
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .28s ease;
}

.home-service-card:hover{background:#fafbff}
.home-service-card:hover::before{transform:scaleY(1)}

.home-service-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  min-height:86px;
}

.home-service-card .service-clean-icon{
  width:74px;
  height:74px;
  flex:0 0 74px;
  margin:0;
}

.home-service-card .service-clean-icon svg{
  width:100%;
  height:100%;
  display:block;
}

.home-service-card-body{
  align-self:center;
  padding:24px 0 30px;
}

.home-service-card h3{
  margin:0 0 16px;
  max-width:430px;
  color:#111827;
  font-size:clamp(27px,2.2vw,36px);
  line-height:1.06;
  letter-spacing:-.043em;
}

.home-service-card p{
  max-width:510px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.72;
}

.home-service-link{
  min-height:42px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-top:18px;
  border-top:1px solid #eceef3;
}

.home-service-link span{
  color:#5f6878;
  font-size:9px;
  line-height:1;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.home-service-link b{
  color:var(--blue);
  font-size:18px;
  line-height:1;
  font-weight:500;
}

@media(max-width:880px){
  .home-services-head h2{white-space:normal}
  .home-services-grid{grid-template-columns:1fr}
}

@media(max-width:560px){
  .home-services-redesign{padding-top:76px;padding-bottom:80px}
  .home-services-head h2{font-size:42px}
  .home-service-card{min-height:280px;padding:28px 26px 26px}
  .home-service-card .service-clean-icon{width:62px;height:62px;flex-basis:62px}
}

/* ---------- Why QUARZON ---------- */
#why-quarzon.why-quarzon-v2{
  min-height:650px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(430px,.92fr) minmax(520px,1.08fr);
  gap:clamp(70px,8vw,140px);
  align-items:center;
  padding:104px var(--pad);
  background:
    radial-gradient(circle at 78% 18%,rgba(77,74,255,.065),transparent 23%),
    radial-gradient(circle at 24% 88%,rgba(16,194,212,.045),transparent 24%),
    #fff;
  color:#111827;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.why-design-copy{position:relative;z-index:3;max-width:720px}

.why-design-copy h2{
  margin:24px 0 26px;
  max-width:760px;
  color:#111827;
  font-size:clamp(52px,4.9vw,82px);
  line-height:1.01;
  letter-spacing:-.061em;
}

.why-design-copy h2 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.why-design-copy>p{
  max-width:560px;
  margin:0 0 30px;
  color:var(--muted);
  font-size:14px;
  line-height:1.74;
}

.why-design-system{
  position:relative;
  z-index:3;
  padding:18px 0;
}

.why-design-system::before{
  content:"";
  position:absolute;
  left:37px;
  top:36px;
  bottom:36px;
  width:1px;
  background:linear-gradient(180deg,rgba(25,44,255,.08),rgba(25,44,255,.52),rgba(112,72,255,.50),rgba(26,194,210,.10));
}

.why-design-principle{
  min-height:156px;
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}

.why-design-principle:first-child{border-top:1px solid var(--line)}

.why-design-principle h3{
  margin:0 0 9px;
  color:#111827;
  font-size:clamp(24px,2vw,32px);
  line-height:1.08;
  letter-spacing:-.036em;
}

.why-design-principle p{
  max-width:560px;
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.68;
}

.why-v2-symbol{
  width:76px;
  height:76px;
  position:relative;
  display:grid;
  place-items:center;
  border:1px solid #dfe3ea;
  border-radius:50%;
  background:#fff;
  box-shadow:0 12px 28px rgba(35,45,75,.05);
}

/* Custom vector pictograms, based on QUARZON's graphite/steel-blue service icons. */
.why-v2-symbol img{
  width:58px;
  height:58px;
  display:block;
  object-fit:contain;
  pointer-events:none;
}

.why-v2-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.why-v2-axis{position:absolute;opacity:.16}
.why-v2-axis.axis-x{width:36%;height:1px;right:-6%;top:25%;background:linear-gradient(90deg,transparent,var(--violet),transparent);transform:rotate(-14deg)}
.why-v2-axis.axis-y{width:1px;height:42%;left:48%;bottom:-12%;background:linear-gradient(180deg,transparent,var(--cyan),transparent);transform:rotate(19deg)}
.why-v2-orbit{position:absolute;border:1px solid rgba(40,50,100,.065);border-radius:50%}
.why-v2-orbit.orbit-a{width:390px;height:390px;right:-190px;top:-190px}
.why-v2-orbit.orbit-b{width:210px;height:210px;left:-110px;bottom:-100px}
.why-v2-dot{position:absolute;width:6px;height:6px;border-radius:50%}
.why-v2-dot.dot-a{right:7%;top:15%;background:var(--violet)}
.why-v2-dot.dot-b{left:8%;bottom:12%;background:var(--cyan)}
.why-v2-dot.dot-c{left:49%;top:12%;width:4px;height:4px;background:var(--blue)}

@media(max-width:1050px){
  #why-quarzon.why-quarzon-v2{grid-template-columns:1fr;gap:56px;padding-top:80px;padding-bottom:80px}
}

/* ---------- Split Showcase: one stable breakpoint, no bounce ---------- */
.split-showcase{
  grid-template-columns:1.02fr .98fr;
}

.philosophy-block.philosophy-visual-v4{
  min-height:520px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
  padding:48px clamp(34px,4vw,66px) 34px;
  border-right:1px solid var(--line);
  background:
    linear-gradient(rgba(45,60,110,.034) 1px,transparent 1px),
    linear-gradient(90deg,rgba(45,60,110,.034) 1px,transparent 1px),
    radial-gradient(circle at 72% 24%,rgba(112,72,255,.08),transparent 28%),
    radial-gradient(circle at 20% 92%,rgba(24,200,214,.05),transparent 25%),
    #fff;
  background-size:36px 36px,36px 36px,auto,auto,auto;
}

.philosophy-v4-top{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.philosophy-v4-meta{
  color:#a1a8b6;
  font-size:7.5px;
  line-height:1;
  font-weight:850;
  letter-spacing:.15em;
}

.philosophy-v4-canvas{min-height:385px;position:relative}
.philosophy-v4-q{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);z-index:1;color:#111827;font-size:clamp(210px,18vw,300px);line-height:.75;font-weight:900;letter-spacing:-.11em;opacity:.045;user-select:none}
.philosophy-v4-plane{position:absolute;z-index:2;border:1px solid rgba(85,95,145,.15);border-radius:12px;box-shadow:0 22px 48px rgba(50,60,100,.055);backdrop-filter:blur(6px)}
.philosophy-v4-plane.plane-a{width:36%;height:52%;left:22%;top:18%;background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(29,53,255,.055));transform:rotate(-8deg)}
.philosophy-v4-plane.plane-b{width:38%;height:48%;left:42%;top:31%;background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(112,72,255,.06));transform:rotate(6deg)}
.philosophy-v4-plane.plane-c{width:23%;height:32%;right:9%;top:13%;background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(24,200,214,.055));transform:rotate(10deg)}

.philosophy-v4-tag{position:absolute;z-index:5;padding:8px 12px;border:1px solid #dfe3ea;border-radius:999px;background:rgba(255,255,255,.94);color:#556072;font-size:7.5px;line-height:1;font-weight:850;letter-spacing:.13em;text-transform:uppercase;box-shadow:0 8px 18px rgba(40,50,80,.04)}
.philosophy-v4-tag.tag-clear{right:5%;top:13%}
.philosophy-v4-tag.tag-useful{left:8%;bottom:25%}
.philosophy-v4-tag.tag-distinctive{right:12%;bottom:11%}

.philosophy-v4-guide{position:absolute;z-index:0;height:1px;transform-origin:left center}
.philosophy-v4-guide.guide-a{width:49%;left:20%;top:34%;background:linear-gradient(90deg,rgba(29,53,255,.34),rgba(112,72,255,.13),transparent);transform:rotate(-12deg)}
.philosophy-v4-guide.guide-b{width:47%;left:28%;top:52%;background:linear-gradient(90deg,rgba(24,200,214,.12),rgba(112,72,255,.22),transparent);transform:rotate(7deg)}
.philosophy-v4-guide.guide-c{width:35%;left:47%;top:66%;background:linear-gradient(90deg,rgba(112,72,255,.12),rgba(226,67,196,.25),transparent);transform:rotate(18deg)}

.philosophy-v4-node{position:absolute;z-index:6;width:7px;height:7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(40,50,90,.12)}
.philosophy-v4-node.node-a{left:20%;top:26%;background:var(--blue)}
.philosophy-v4-node.node-b{right:13%;top:46%;background:var(--pink)}
.philosophy-v4-node.node-c{left:42%;bottom:13%;background:var(--cyan)}

@media(max-width:1050px){
  .split-showcase{grid-template-columns:1fr}
  .philosophy-block.philosophy-visual-v4{border-right:0;border-bottom:1px solid var(--line)}
}

@media(max-width:780px){
  .studio-block{grid-template-columns:1fr}
}

@media(max-width:560px){
  .philosophy-block.philosophy-visual-v4{min-height:470px;padding:38px var(--pad) 28px}
  .philosophy-v4-top{align-items:flex-start;flex-direction:column;gap:9px}
  .philosophy-v4-canvas{min-height:315px}
  .philosophy-v4-plane.plane-a{width:44%;left:12%}
  .philosophy-v4-plane.plane-b{width:44%;left:38%}
}

/* ---------- Process ---------- */
#process .section-kicker{
  width:100%;
  display:block;
  text-align:center;
  font-size:12px;
  line-height:1;
  letter-spacing:.17em;
}

.process-line.process-flow-v2{
  min-height:310px;
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  padding:40px 0 8px;
}

.process-line.process-flow-v2::before{display:none}

.process-flow-connector{
  position:absolute;
  z-index:1;
  top:67px;
  left:10%;
  right:10%;
  height:2px;
  background:linear-gradient(90deg,var(--blue),#5148ff,var(--violet),var(--pink),var(--coral));
  border-radius:999px;
  opacity:.78;
}

.process-flow-step,
.process-flow-step:nth-of-type(even),
.process-flow-step:not(:first-of-type){
  min-height:250px;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  padding:0 26px 18px;
}

.process-flow-marker{
  width:54px;
  height:54px;
  position:relative;
  display:grid;
  place-items:center;
  margin:0 auto 34px;
  border:1px solid #dce1ea;
  border-radius:50%;
  background:#fff;
  box-shadow:0 12px 28px rgba(35,45,75,.055);
}

.process-flow-marker::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(29,53,255,.07);
  border-radius:50%;
}

/* geometric stage symbols */
.process-flow-marker i{display:block;position:relative;z-index:2;margin:0}
.marker-circle i{width:13px;height:13px;border:2px solid var(--blue);border-radius:50%;background:#fff}
.marker-diamond i{width:13px;height:13px;border-radius:2px;background:var(--violet);transform:rotate(45deg)}
.marker-ring i{width:21px;height:21px;border:1.5px solid var(--violet);border-radius:50%;background:#fff}
.marker-ring i::after{content:"";width:7px;height:7px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--pink)}
.marker-square i{width:16px;height:16px;border:1.5px solid var(--cyan);border-radius:2px;background:linear-gradient(135deg,transparent 45%,rgba(24,200,214,.16) 46%)}
.marker-final i{width:19px;height:19px;border:1.5px solid var(--coral);border-radius:50%;background:#fff}
.marker-final i::after{content:"";width:7px;height:7px;position:absolute;right:-2px;top:-2px;border-radius:50%;background:var(--coral)}

.process-line.process-flow-v2 h3{
  margin:0 0 10px;
  color:#111827;
  font-size:18px;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-align:center;
}

.process-line.process-flow-v2 p{
  max-width:210px;
  margin:0 auto;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  text-align:center;
}

.process-flow-step::after{display:none!important;content:none!important}

@media(max-width:900px){
  .process-line.process-flow-v2{grid-template-columns:repeat(3,1fr);gap:34px 0}
  .process-flow-connector{display:none}
  .process-flow-step,
  .process-flow-step:nth-of-type(even),
  .process-flow-step:not(:first-of-type){
    min-height:220px;
    padding:24px 20px 18px;
    border-top:1px solid var(--line);
  }
}

@media(max-width:760px){
  .process-line.process-flow-v2{grid-template-columns:1fr;gap:0}
  .process-flow-step,
  .process-flow-step:nth-of-type(even),
  .process-flow-step:not(:first-of-type){
    min-height:auto;
    display:grid;
    grid-template-columns:62px minmax(0,1fr);
    column-gap:20px;
    padding:24px 0 28px;
  }
  .process-flow-marker{grid-row:1 / span 2;margin:0}
  .process-line.process-flow-v2 h3,
  .process-line.process-flow-v2 p{text-align:left;margin-left:0;margin-right:0}
}

/* ---------- FAQ ---------- */
#faq .section-kicker{
  width:100%;
  display:block;
  text-align:center;
  font-size:12px;
  line-height:1;
  letter-spacing:.17em;
}

.home-faq-redesign{
  position:relative;
  overflow:hidden;
  padding-top:96px;
  padding-bottom:100px;
  background:
    linear-gradient(rgba(45,60,105,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(45,60,105,.026) 1px,transparent 1px),
    linear-gradient(180deg,#fafbfe 0%,#f7f8fb 100%);
  background-size:42px 42px,42px 42px,auto;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.home-faq-head{
  display:block;
  max-width:100%;
  margin:0 auto 52px;
  text-align:center;
}

.home-faq-head>div{max-width:none}

.home-faq-head h2{
  max-width:none;
  margin:22px auto 0;
  color:#111827;
  text-align:center;
  white-space:nowrap;
  font-size:clamp(44px,4.8vw,72px);
  line-height:1;
  letter-spacing:-.055em;
}

.home-faq-uniform-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.home-faq-uniform-item{
  min-height:154px;
  overflow:hidden;
  border:1px solid #dde2eb;
  border-radius:12px;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 26px rgba(40,50,80,.035);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease,background .22s ease;
}

.home-faq-uniform-item:hover{
  border-color:#cfd6e4;
  box-shadow:0 18px 38px rgba(40,50,80,.06);
  transform:translateY(-2px);
}

.home-faq-uniform-item[open]{
  border-color:#c8d0f0;
  background:radial-gradient(circle at 100% 0%,rgba(112,72,255,.055),transparent 28%),#fff;
}

.home-faq-uniform-item summary{
  min-height:152px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px;
  gap:22px;
  align-items:center;
  padding:28px 30px;
  cursor:pointer;
  list-style:none;
}

.home-faq-uniform-item summary::-webkit-details-marker{display:none}

.home-faq-uniform-item summary strong{
  max-width:500px;
  color:#111827;
  font-size:clamp(20px,1.55vw,25px);
  line-height:1.2;
  letter-spacing:-.03em;
  font-weight:730;
}

.home-faq-toggle{
  width:34px;
  height:34px;
  position:relative;
  justify-self:end;
  border:1px solid #d8dde7;
  border-radius:50%;
  background:#fff;
}

.home-faq-toggle::before,
.home-faq-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:1px;
  background:#111827;
  transform:translate(-50%,-50%);
}

.home-faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}

.home-faq-uniform-item[open] .home-faq-toggle{
  border-color:var(--blue);
  background:#f2f4ff;
  transform:rotate(180deg);
}

.home-faq-uniform-item[open] .home-faq-toggle::after{opacity:0}

.home-faq-uniform-answer{padding:0 76px 30px 30px}
.home-faq-uniform-answer p{max-width:520px;margin:0;color:var(--muted);font-size:12px;line-height:1.72}

@media(max-width:900px){
  .home-faq-head h2{white-space:normal}
  .home-faq-uniform-grid{grid-template-columns:1fr}
}

@media(max-width:560px){
  .home-faq-redesign{padding-top:76px;padding-bottom:80px}
  .home-faq-head h2{font-size:42px}
  .home-faq-uniform-item{min-height:132px}
  .home-faq-uniform-item summary{min-height:130px;grid-template-columns:minmax(0,1fr) 32px;gap:16px;padding:24px 22px}
  .home-faq-uniform-answer{padding:0 54px 26px 22px}
}

/* ---------- Final CTA: light version ---------- */
#start-project.home-final-cta{
  min-height:540px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(520px,1fr) minmax(380px,.8fr);
  align-items:center;
  gap:60px;
  padding:78px var(--pad);
  background:
    radial-gradient(circle at 88% 18%,rgba(112,72,255,.06),transparent 26%),
    radial-gradient(circle at 18% 90%,rgba(24,200,214,.045),transparent 24%),
    linear-gradient(180deg,#fff 0%,#fafbfe 100%);
  color:#111827;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.home-final-cta-copy{position:relative;z-index:2;max-width:760px}

.home-final-cta-copy h2{
  margin:24px 0;
  color:#111827;
  font-size:clamp(58px,6vw,96px);
  line-height:.94;
  letter-spacing:-.065em;
}

.home-final-cta-copy h2 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.home-final-cta-copy p{
  max-width:540px;
  margin:0 0 32px;
  color:var(--muted);
  font-size:14px;
  line-height:1.72;
}

.btn-light-outline{
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-height:50px;
  padding:0 22px;
  border:1px solid #cfd5e3;
  color:#111827;
  background:#fff;
}

.btn-light-outline span{color:var(--blue)}

.home-final-cta-art{min-height:350px;position:relative;z-index:2}
.cta-grid-art{position:absolute;inset:4% 4% 6% 10%;opacity:.20;background-image:linear-gradient(rgba(20,30,50,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(20,30,50,.08) 1px,transparent 1px);background-size:36px 36px}
.cta-orb{position:absolute;width:260px;height:260px;right:8%;top:8%;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.28),transparent 18%),linear-gradient(145deg,#18c8d6 0%,#1d35ff 38%,#7048ff 72%,#e243c4 100%);box-shadow:0 28px 60px rgba(45,55,95,.18)}
.cta-panel{position:absolute;width:47%;height:43%;left:9%;bottom:7%;border:1px solid #dfe3ea;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);box-shadow:0 20px 45px rgba(35,45,75,.08)}
.cta-node{position:absolute;width:7px;height:7px;border-radius:50%}
.cta-node-a{left:5%;top:18%;background:var(--cyan)}
.cta-node-b{right:4%;bottom:10%;background:var(--pink)}

@media(max-width:1000px){
  #start-project.home-final-cta{grid-template-columns:1fr}
  .home-final-cta-art{min-height:300px}
}

@media(max-width:560px){
  .home-final-cta-copy h2{font-size:56px}
  .home-final-cta-art{min-height:215px}
  .cta-orb{width:170px;height:170px}
}

/* ---------- Footer minor stabilization ---------- */
.footer-legal-text{
  color:#748092;
  font-size:10px;
}

.site-footer .footer-col a[href="services.html"]{
  min-height:32px;
}

/* ---------- Accessibility ---------- */
.site-header a:focus-visible,
.home-mobile-nav summary:focus-visible,
.home-services-redesign a:focus-visible,
#why-quarzon a:focus-visible,
.split-showcase a:focus-visible,
#process a:focus-visible,
#faq summary:focus-visible,
#start-project a:focus-visible,
.site-footer a:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:4px;
}

@media(prefers-reduced-motion:reduce){
  .home-mobile-nav summary span,
  .home-service-card,
  .home-service-card::before,
  .home-faq-uniform-item{
    transition:none;
  }
}


/* =========================================================
   HOME LOGO CONSISTENCY FIX
   Match the Home header logo to the internal pages.
   ========================================================= */

body.home-page .site-header .brand,
.site-header .brand{
  align-items:flex-start;
}

.site-header .brand-name{
  font-size:24px;
  line-height:1;
  font-weight:850;
  letter-spacing:.25em;
}

.site-header .brand-name span{
  color:var(--blue);
}

.site-header .brand-sub{
  margin-top:7px;
  color:var(--blue);
  font-size:9px;
  line-height:1;
  font-weight:850;
  letter-spacing:.24em;
}


/* =========================================================
   FOOTER LINK DIVIDER FIX
   Dividers belong under each footer item, not above the text.
   ========================================================= */

.site-footer .footer-col a{
  border-top:0 !important;
  border-bottom:1px solid rgba(255,255,255,.075);
}

.site-footer .footer-col a:last-child{
  border-bottom:1px solid rgba(255,255,255,.075);
}


/* =========================================================
   FOOTER ROW DIVIDERS — NOT TEXT UNDERLINES
   Dividers span the full footer menu column width.
   ========================================================= */

/* Disable the old hover underline generated under the text itself. */
.site-footer .footer-col a::after{
  content:none !important;
  display:none !important;
}

/* Footer columns stretch their children so borders become row dividers. */
.site-footer .footer-col{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* The line belongs to the menu row, not to the text width. */
.site-footer .footer-col a{
  width:100% !important;
  max-width:none !important;
  align-self:stretch !important;
  display:flex !important;
  align-items:center;
  min-height:40px;
  padding:0 0 12px !important;
  margin:0 0 12px !important;
  border-top:0 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  text-decoration:none !important;
}

/* Divider only between links, not after the final row. */
.site-footer .footer-col a:last-child{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
  border-bottom:0 !important;
}

/* Keep footer column title visually separated from the menu list. */
.site-footer .footer-col h3{
  margin-bottom:18px;
}


/* =========================================================
   FOOTER DEPTH + WHY CLEAN + PROCESS LARGER CIRCLES
   ========================================================= */

/* 1) Footer depth effect.
   The base footer color remains the same; only subtle perspective
   lines and glow accents are added above it. */
.site-footer{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.site-footer::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-58px;
  height:260px;
  z-index:0;
  pointer-events:none;
  opacity:.34;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.105) 0 1px,
      transparent 1px 86px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.085) 0 1px,
      transparent 1px 38px
    );
  transform-origin:center bottom;
  transform:perspective(760px) rotateX(63deg);
  filter:blur(.05px);
}

.site-footer::after{
  content:"";
  position:absolute;
  inset:auto -18% -42% -18%;
  height:360px;
  z-index:0;
  pointer-events:none;
  opacity:.42;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(112,72,255,.24),transparent 58%),
    radial-gradient(ellipse at 18% 20%,rgba(24,200,214,.13),transparent 48%),
    radial-gradient(ellipse at 84% 28%,rgba(226,67,196,.10),transparent 48%);
}

.site-footer > *{
  position:relative;
  z-index:1;
}

/* 2) Remove divider lines from Why QUARZON principles */
.why-design-principle{
  border-bottom:0 !important;
}

/* Keep the first top divider optional but softer */
.why-design-principle:first-child{
  border-top-color:rgba(20,30,50,.08);
}

/* 3) Larger Process circles while keeping the connector centered */
.process-line.process-flow-v2{
  padding-top:40px;
}

.process-flow-connector{
  top:75px !important;
  left:10%;
  right:10%;
}

.process-flow-marker{
  width:70px !important;
  height:70px !important;
  margin:0 auto 32px !important;
}

.process-flow-marker::after{
  inset:-9px !important;
}

.process-flow-marker i{
  transform-origin:center;
}

/* Scale the internal geometric symbols proportionally */
.marker-circle i{
  width:17px !important;
  height:17px !important;
}

.marker-diamond i{
  width:17px !important;
  height:17px !important;
}

.marker-ring i{
  width:27px !important;
  height:27px !important;
}

.marker-ring i::after{
  width:9px !important;
  height:9px !important;
}

.marker-square i{
  width:21px !important;
  height:21px !important;
}

.marker-final i{
  width:25px !important;
  height:25px !important;
}

.marker-final i::after{
  width:9px !important;
  height:9px !important;
}

/* Mobile keeps the larger markers but returns to left alignment */
@media(max-width:760px){
  .process-flow-marker{
    width:62px !important;
    height:62px !important;
  }

  .marker-circle i{
    width:15px !important;
    height:15px !important;
  }

  .marker-diamond i{
    width:15px !important;
    height:15px !important;
  }

  .marker-ring i{
    width:24px !important;
    height:24px !important;
  }

  .marker-square i{
    width:19px !important;
    height:19px !important;
  }

  .marker-final i{
    width:22px !important;
    height:22px !important;
  }
}


/* ==========================================================
   V7.3.9.18 — Philosophy imagery + unified footer + Why cleanup
   ========================================================== */

/* No top rule above the first Why QUARZON principle. */
#why-quarzon .why-design-principle:first-child {
  border-top: 0 !important;
}

/* A single continuous footer: no separately shaded lower band. */
.site-footer {
  background: linear-gradient(112deg, #07101d 0%, #0a1322 100%);
  padding-bottom: clamp(46px, 4vw, 70px);
}
.site-footer::before {
  bottom: 0;
  height: 100%;
  opacity: .11;
}
.site-footer::after { display: none; }
.site-footer .footer-copyright {
  display:block;
  margin-top:26px;
  color:#98a4b5;
  font-size:11px;
  font-weight:500;
  line-height:1.55;
}
.site-footer .footer-cta .footer-email {
  display:inline-block;
  margin-top:20px;
  padding-bottom:2px;
  border-bottom:0;
  color:#a9b5c6;
  font-size:11px;
  font-weight:550;
  text-transform:none;
  letter-spacing:0;
}
.site-footer .footer-cta .footer-email:hover { color:#fff; }

/* Replace the old pale Q and glass rectangles with architectural art. */
.philosophy-v4-canvas {
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(0, .67fr);
  grid-template-rows:repeat(2, minmax(0, 1fr));
  align-content:center;
  gap:14px;
  min-height:385px;
  padding:22px 0 4px;
}
.philosophy-v4-canvas .philosophy-art-piece {
  display:block;
  position:relative;
  min-width:0;
  min-height:0;
  margin:0;
  overflow:hidden;
  border:1px solid #e8ecf4;
  background:#fff;
}
.philosophy-v4-canvas .philosophy-art-main {
  grid-row:1 / 3;
}
.philosophy-v4-canvas .philosophy-art-piece img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
@media(max-width:1050px) {
  .philosophy-v4-canvas {min-height:385px;}
}
@media(max-width:560px) {
  .philosophy-v4-canvas {
    min-height:250px;
    grid-template-columns:minmax(0, 1.1fr) minmax(0, .72fr);
    gap:9px;
    padding:20px 0 0;
  }
}

/* Minimal, readable footer contact detail; no decorative link divider. */
.site-footer .footer-cta a.footer-email {
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:500 !important;
}
.site-footer .footer-cta a.footer-email::before,
.site-footer .footer-cta a.footer-email::after {
  display:none !important;
  content:none !important;
}

/* V7.3.9.19 — Editorial split showcase: assets and collage only. */
.split-showcase .philosophy-v4-canvas .philosophy-art-piece {background:#fff;}
.split-showcase .philosophy-v4-canvas .philosophy-art-piece img {object-fit:cover; object-position:center;}
.split-showcase .studio-collage-editorial {position:relative; min-height:355px; isolation:isolate;}
.split-showcase .studio-collage-editorial .studio-photo {
  position:absolute;display:block; border-radius:3px; background-color:#fff;
  background-repeat:no-repeat; background-size:cover; background-position:center;
  border:1px solid rgba(208,218,232,.7);box-shadow:0 13px 30px rgba(24,37,65,.10);
}
.split-showcase .studio-collage-editorial .photo-a {
  width:57%;height:69%;right:1%;top:2%;left:auto;bottom:auto;
  background-image:url('/assets/practice/design-workspace.webp');z-index:1;
}
.split-showcase .studio-collage-editorial .photo-b {
  width:47%;height:56%;left:0%;top:24%;right:auto;bottom:auto;
  background-image:url('/assets/practice/brand-identity.webp');z-index:3;
}
.split-showcase .studio-collage-editorial .photo-c {
  width:59%;height:43%;right:6%;bottom:0;left:auto;top:auto;
  background-image:url('/assets/practice/responsive-interface.webp');z-index:4;
}
@media (max-width:660px) {
 .split-showcase .studio-collage-editorial {min-height:290px;max-width:480px;margin-inline:auto;width:100%;}
}

/* V7.3.9.20 — Independent Practice collage matched to approved editorial visual. */
.split-showcase .studio-block {
  grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr);
  column-gap: 6px;
  padding-right: clamp(22px, 2.6vw, 47px);
}
.split-showcase .studio-text {position:relative; z-index:2; min-width:0;}
.split-showcase .studio-text h2 {
  font-size:clamp(40px, 3.6vw, 60px);
  overflow-wrap:normal;
}
.split-showcase .studio-collage-editorial {
  position:relative;
  z-index:1;
  min-height:475px;
  height:100%;
  width:100%;
  max-width:none;
  overflow:visible;
  isolation:isolate;
  margin:0;
  align-self:center;
}
.split-showcase .studio-collage-editorial .studio-collage-visual {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center right;
  border:0;
  border-radius:0;
  box-shadow:none;
  mix-blend-mode:normal;
}
@media (max-width:1280px) and (min-width:1051px) {
  .split-showcase .studio-block {grid-template-columns:minmax(0,1fr) minmax(0,.72fr);padding-left:clamp(28px,3.5vw,48px);}
  .split-showcase .studio-text h2 {font-size:clamp(36px,3.4vw,44px)}
  .split-showcase .studio-collage-editorial {min-height:390px;}
}
@media (max-width:1050px) {
  .split-showcase .studio-block {grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:22px;}
  .split-showcase .studio-text h2 {font-size:clamp(42px,5vw,66px)}
  .split-showcase .studio-collage-editorial {min-height:490px;max-width:440px;justify-self:end;}
}
@media (max-width:780px) {
  .split-showcase .studio-block {grid-template-columns:1fr;gap:12px;padding-left:var(--pad);padding-right:var(--pad)}
  .split-showcase .studio-collage-editorial {min-height:0;height:auto;width:min(100%,430px);max-width:430px;aspect-ratio:485/697;justify-self:center;}
  .split-showcase .studio-collage-editorial .studio-collage-visual {width:100%;height:100%;}
}

@media (min-width:1680px) {
  .split-showcase .studio-collage-editorial .studio-collage-visual {
    transform:scale(1.08);
    transform-origin:right center;
  }
}


/* Source: /css/site-fixes.css */
/* Preserve styles for inert social placeholders from the last V35 site. No 3D/WebGL. */
.site-footer .socials span[aria-hidden="true"] {
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); border-radius:6px;
  background:rgba(255,255,255,.025);
  font-size:11px; font-weight:800; color:#aeb7c6;
}


/* Source: /css/header-navigation-v7.3.9.61.css */
/* QUARZON V7.3.9.61 — restrained shared header navigation.
   CTA removed in the Header Astro component; nav sits at right.
   Applies to navigation on all five pages. No changes to Home hero/cube. */
.site-header {
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: clamp(24px, 4vw, 72px);
  align-items: center;
}
.site-header > .brand { min-width: 0; justify-self: start; }
.site-header > .main-nav {
  display: flex;
  justify-self: end !important;
  justify-content: flex-end;
  margin: 0 !important;
  padding: 0;
  gap: clamp(19px, 2.6vw, 42px) !important;
  min-width: 0;
}
.site-header > .main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 1px;
  color: #253047;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .035em;
  white-space: nowrap;
  transition: color .2s ease;
}
.site-header > .main-nav a::after {
  content: '';
  position: absolute;
  inset: auto 1px 5px;
  height: 2px;
  background: #1d35ff;
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: center;
  transition: opacity .2s ease, transform .2s ease;
}
.site-header > .main-nav a[aria-current="page"],
.site-header > .main-nav a:hover,
.site-header > .main-nav a:focus-visible { color: #1d35ff; }
.site-header > .main-nav a[aria-current="page"]::after,
.site-header > .main-nav a:hover::after,
.site-header > .main-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}
.site-header a:focus-visible,
.site-header .home-mobile-nav summary:focus-visible {
  outline: 2px solid #1d35ff;
  outline-offset: 4px;
}
/* The legacy stylesheet hides desktop links at 900px but doesn't show
   the mobile menu until 780px. Close that 781–900px navigation gap. */
@media (max-width: 900px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto !important; }
  .site-header > .main-nav { display: none !important; }
  .site-header > .home-mobile-nav {
    display: block;
    position: relative;
    justify-self: end;
    z-index: 102;
  }
  .site-header > .home-mobile-nav summary {
    width: 44px;
    height: 44px;
    display: grid;
    place-content: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    border: 1px solid #dfe4ee;
    background: white;
    border-radius: 0;
  }
  .site-header > .home-mobile-nav summary::-webkit-details-marker {display: none;}
  .site-header > .home-mobile-nav summary span {
    display: block;
    width: 17px;
    height: 2px;
    background: #0f1b31;
    transition: background-color .2s;
  }
  .site-header > .home-mobile-nav[open] summary {border-color:#1d35ff;}
  .site-header > .home-mobile-nav[open] summary span {background:#1d35ff;}
  .site-header > .home-mobile-nav nav {
    width: min(290px, calc(100vw - 44px));
    position: absolute;
    right: 0;
    top: 54px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: #fff;
    border: 1px solid #dfe4ee;
    border-radius: 0;
    box-shadow: 0 14px 30px rgba(18,29,53,.12);
  }
  .site-header > .home-mobile-nav nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid #edf0f4;
    font-size: 12px;
    font-weight: 750;
    color: #17243d;
  }
  .site-header > .home-mobile-nav nav a:last-child {border-bottom: 0;}
  .site-header > .home-mobile-nav nav a[aria-current="page"] {color:#1d35ff;}
}
@media (prefers-reduced-motion: reduce) {
  .site-header > .main-nav a,
  .site-header > .main-nav a::after,
  .site-header > .home-mobile-nav summary span {transition: none;}
}


/* Source: /css/footer-v7.3.9.31.css */
/* QUARZON V7.3.9.31 — precise four-column footer, separated links,
   social icons at the left. Scoped to the shared Footer component. */
.site-footer.q-footer31 {
  position:relative;
  padding:clamp(58px,5.7vw,86px) var(--pad) 24px;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  color:#f5f7ff;
  background:#091321;
}
.site-footer.q-footer31::before,.site-footer.q-footer31::after {content:none;display:none}
.q-footer31 .qf31-main {
  display:grid;
  grid-template-columns:minmax(0,1.34fr) minmax(0,.67fr) minmax(0,1.08fr) minmax(0,1.19fr);
  gap:0;
  align-items:stretch;
  padding-bottom:clamp(42px,4.5vw,67px);
}
.q-footer31 .qf31-main > * {min-width:0}
.q-footer31 .qf31-main > :not(:first-child){
  border-left:1px solid rgba(185,204,240,.18);
  padding-left:clamp(22px,2.55vw,40px);
}
.q-footer31 .qf31-main > :not(:last-child){padding-right:clamp(21px,2.4vw,38px)}
.q-footer31 .qf31-wordmark {
  display:inline-block;
  max-width:100%;
  color:#fdfdff;
  font-size:clamp(26px,2.45vw,37px);
  line-height:1.1;
  letter-spacing:.18em;
  font-weight:840;
}
.q-footer31 .qf31-wordmark span{color:#536dff}
.q-footer31 .qf31-brand-line{
  display:block;
  margin-top:12px;
  color:#859afa;
  font-size:9px;
  font-weight:820;
  letter-spacing:.21em;
}
.q-footer31 .qf31-brand p{
  max-width:275px;
  margin:24px 0 20px;
  color:#acb8ca;
  font-size:13px;
  font-weight:400;
  line-height:1.8;
}
.q-footer31 .qf31-socials{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 33px}
.q-footer31 .qf31-social-icon{
  width:39px;height:39px;
  display:grid;place-items:center;
  border:1px solid rgba(184,202,237,.25);
  border-radius:6px;
  color:#dbe4f6;
  background:rgba(255,255,255,.025);
}
.q-footer31 .qf31-social-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.q-footer31 .qf31-signature{
  display:flex;gap:12px;align-items:center;
  color:#8a9bb6;
  font-size:9px;
  font-weight:720;
  letter-spacing:.065em;
  line-height:1.55;
}
.q-footer31 .qf31-signature::before {content:"";height:2px;width:23px;flex:0 0 23px;background:#6177ff}
.q-footer31 .qf31-links h2,.q-footer31 .qf31-contact h2{
  margin:4px 0 28px;
  color:#f9faff;
  font-size:11px;
  font-weight:810;
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1.4;
}
.q-footer31 .qf31-link-list{border-top:1px solid rgba(185,204,240,.15)}
.q-footer31 .qf31-link-list a{
  width:100%;min-height:42px;
  display:flex;align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(185,204,240,.15);
  color:#b7c4d6;
  text-decoration:none;
  font-size:12.5px;
  line-height:1.45;
  transition:color .18s ease,padding-left .18s ease;
}
.q-footer31 .qf31-contact p{
  max-width:320px;
  margin:0 0 30px;
  color:#afbdd0;
  font-size:13px;
  line-height:1.78;
}
.q-footer31 .qf31-email{
  display:inline-flex;align-items:center;gap:10px;max-width:100%;
  padding:0 0 11px;
  border-bottom:1px solid #7589ff;
  color:#fff;
  font-size:clamp(16px,1.5vw,22px);
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.32;
  overflow-wrap:anywhere;
}
.q-footer31 .qf31-email span{color:#8da0ff;font-size:19px;flex:none}
.q-footer31 .qf31-contact-link{
  display:flex;align-items:center;gap:11px;
  width:max-content;max-width:100%;
  margin-top:30px;
  color:#c0ccde;
  font-size:11px;
  font-weight:720;
  letter-spacing:.045em;
}
.q-footer31 .qf31-contact-link span{font-size:16px;color:#96a5ff}
.q-footer31 .qf31-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  min-height:63px;
  border-top:1px solid rgba(185,204,240,.19);
  padding:20px 0 0;
  color:#91a1b7;
  font-size:11px;
  line-height:1.6;
}
.q-footer31 .qf31-bottom small{font-size:inherit}
.q-footer31 .qf31-bottom a{white-space:nowrap;color:#d2dced}
.q-footer31 .qf31-bottom a span{margin-left:9px;color:#8297ff}
@media(hover:hover) and (pointer:fine){
  .q-footer31 .qf31-link-list a:hover{color:#fff;padding-left:5px}
  .q-footer31 .qf31-email:hover{color:#cbd5ff;border-color:#b5c0ff}
  .q-footer31 .qf31-contact-link:hover,.q-footer31 .qf31-bottom a:hover{color:#fff}
}
.q-footer31 a:focus-visible{outline:2px solid #8ba0ff;outline-offset:4px;border-radius:2px}
@media(max-width:1180px){
  .q-footer31 .qf31-main{grid-template-columns:minmax(0,1.16fr) minmax(0,.85fr);gap:37px 0}
  .q-footer31 .qf31-main > *{padding:0!important;border-left:0!important}
  .q-footer31 .qf31-main > :nth-child(even){border-left:1px solid rgba(185,204,240,.18)!important;padding-left:clamp(24px,4vw,48px)!important}
  .q-footer31 .qf31-main > :nth-child(odd){padding-right:clamp(24px,4vw,48px)!important}
  .q-footer31 .qf31-main > :nth-child(n + 3){padding-top:31px!important;border-top:1px solid rgba(185,204,240,.18)}
  .q-footer31 .qf31-brand p{margin-top:23px}
}
@media(max-width:680px){
  .site-footer.q-footer31{padding-top:53px;padding-bottom:25px}
  .q-footer31 .qf31-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding-bottom:41px}
  .q-footer31 .qf31-main > *{padding:0!important;border:0!important}
  .q-footer31 .qf31-brand{grid-column:1/-1;padding-bottom:32px!important}
  .q-footer31 .qf31-explore{grid-column:1;grid-row:2;padding:28px 20px 32px 0!important;border-top:1px solid rgba(185,204,240,.18)!important}
  .q-footer31 .qf31-services{grid-column:2;grid-row:2;padding:28px 0 32px 20px!important;border-top:1px solid rgba(185,204,240,.18)!important;border-left:1px solid rgba(185,204,240,.18)!important}
  .q-footer31 .qf31-contact{grid-column:1/-1;grid-row:3;border-left:0!important;border-top:1px solid rgba(185,204,240,.18)!important;padding-top:31px!important}
  .q-footer31 .qf31-links h2,.q-footer31 .qf31-contact h2{margin-bottom:23px}
  .q-footer31 .qf31-socials{margin-bottom:20px}
  .q-footer31 .qf31-bottom{flex-wrap:wrap;gap:9px 18px}
  .q-footer31 .qf31-bottom > span{display:none}
}
@media(max-width:375px){
  .q-footer31 .qf31-explore{padding-right:12px!important}
  .q-footer31 .qf31-services{padding-left:12px!important}
  .q-footer31 .qf31-link-list a{font-size:11.5px}
  .q-footer31 .qf31-email{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.q-footer31 a{transition:none!important}}


/* Source: /css/hero-cube.css */
/* QUARZON V7.3.9 — Clean 3D Hero (cube, shadow, no matrix/grid/particles) */
body.home-page .site { position: relative; }
body.home-page .site-header {
  position: relative;
  z-index: 10;
  background: transparent;
}
body.home-page .hero.hero-cube-full {
  position: relative;
  isolation: isolate;
  overflow: visible; /* preserve the approved cube framing and transparent header */
  background: #fff;
  z-index: 1;
}
/* Preserve the V7.3.9 cube camera/framing; the canvas is transparent. */
.hero-cube-full > .hero-cube-stage {
  position: absolute;
  top: calc(-1 * var(--quarzon-header-height, 88px));
  left: 0;
  right: 0;
  height: calc(100% + var(--quarzon-header-height, 88px));
  width: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.hero-cube-full.cube-ready > .hero-cube-stage { opacity: 1; }
.hero-cube-full .quarzon-cube-canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.hero-cube-full > .hero-copy { position: relative; z-index: 2; }
.hero-cube-full > .hero-art-cube {
  position: relative; z-index: 1; min-width: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
/* The artwork zone is intentionally empty until WebGL is ready: no image flash. */
.hero-cube-full > .hero-art-cube {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  background: none !important;
  filter: none;
  box-shadow: none;
}
/* Drag controls activate only after the first rendered Three.js frame. */
.hero-cube-full.cube-ready > .hero-art-cube {
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  outline-offset: -5px;
}
.hero-cube-full.cube-ready > .hero-art-cube.is-dragging { cursor: grabbing; }
.hero-cube-full.cube-ready > .hero-art-cube:focus-visible { outline: 3px solid #7048ff; }
.quarzon-cube-status[hidden] { display: none !important; }
.quarzon-cube-status {
  position: absolute;
  z-index: 3;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  width: min(300px, calc(100% - 2 * var(--pad)));
  border: 1px solid rgba(112,72,255,.17);
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  padding: 16px 18px;
  box-shadow: 0 8px 30px rgba(35,36,65,.08);
  text-align: center;
}
.quarzon-cube-status-message { margin: 0 0 12px; overflow-wrap:anywhere; font-size: 12px; line-height: 1.5; color: #424b61; }
.quarzon-cube-retry { border: 0; border-radius: 8px; padding: 11px 16px; color: #fff; background: #25284b; cursor: pointer; font-size: 12px; font-weight:700; }
.quarzon-cube-retry:focus-visible {outline: 2px solid #7048ff; outline-offset: 2px;}
.hero-cube-hint {
  position: absolute;
  bottom: 20px;
  right: var(--pad);
  z-index: 3;
  color: #5b4c84;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(112,72,255,.12);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 7px 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.hero-cube-full.cube-ready .hero-cube-hint { opacity: 1; }

/* Pure white canvas behind cube; intentionally no CSS fallback grid. */
.hero-cube-full .quarzon-cube-canvas { position: relative; z-index: 1; }
/* Header nav/brand remain fully interactive on top of the shared backdrop. */
body.home-page .site-header a,
body.home-page .site-header button,
body.home-page .site-header summary { position: relative; z-index: 1; }
@media (max-width:780px) {
  .hero-cube-full > .hero-cube-stage { top: calc(-1 * var(--quarzon-header-height, 78px)); height: calc(100% + var(--quarzon-header-height, 78px)); }
  .hero-cube-full > .hero-art-cube { transform:none; min-height:390px; width:100%; }
  .quarzon-cube-status { top: auto; bottom: 35px; transform: none; left: 50%; right: auto; translate: -50% 0; }
  .hero-cube-full > .hero-copy { padding-bottom:25px; }
}
@media (max-width:520px) {
  .hero-cube-full > .hero-art-cube { min-height:330px; }
}
/* Controls — original Titanium Cube functionality, matching the studio UI. */
.quarzon-controls-tab[hidden],.quarzon-controls-panel[hidden] { display: none !important; }
.quarzon-controls-tab {
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  width:42px;height:106px;border:0;padding:8px 0;z-index:1002;
  border-radius:10px 0 0 10px;background:#10131e;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;box-shadow:-6px 0 20px rgba(12,17,32,.2);
  transition:right .3s ease,background .2s ease;
}
.quarzon-controls-tab:hover {background:#24243e;}
.quarzon-controls-tab.is-open {right:min(320px,calc(100vw - 46px));}
.quarzon-tab-arrow {font-size:21px;line-height:1;}
.quarzon-tab-label {font-size:9px;letter-spacing:.1em;font-weight:800;text-transform:uppercase;writing-mode:vertical-rl;}
.quarzon-controls-panel {
  position:fixed;top:0;right:0;bottom:0;width:min(320px,calc(100vw - 46px));
  z-index:1001;background:#fff;color:#10131e;
  border-left:1px solid rgba(0,0,0,.08);
  box-shadow:-12px 0 46px rgba(12,20,45,.10);
  transform:translateX(105%);visibility:hidden;
  transition:transform .3s ease,visibility .3s ease;
  display:flex;flex-direction:column;
}
.quarzon-controls-panel.is-open {transform:translateX(0);visibility:visible;}
.quarzon-panel-head {display:flex;justify-content:space-between;align-items:flex-start;padding:18px 18px 14px;border-bottom:1px solid #e8eaf1;}
.quarzon-panel-head strong {font-size:12px;letter-spacing:.12em;}
.quarzon-panel-head p {font-size:10px;color:#768094;margin:5px 0 0;}
.quarzon-panel-close {width:29px;height:29px;border:1px solid #e8eaf1;border-radius:6px;background:#fff;font-size:23px;line-height:1;cursor:pointer;}
.quarzon-panel-body {overflow-y:auto;overscroll-behavior:contain;padding:18px;display:flex;flex-direction:column;gap:22px;}
.quarzon-panel-body fieldset {min-width:0;margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:10px;}
.quarzon-panel-body legend {font-size:10px;font-weight:800;letter-spacing:.09em;color:#727b8d;text-transform:uppercase;margin-bottom:11px;}
.quarzon-palette-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
.quarzon-palette {height:32px;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:6px;background:#fff;border:1px solid #e6e8ee;cursor:pointer;padding:3px;}
.quarzon-palette span {display:block;width:10px;height:10px;border:1px solid rgba(0,0,0,.12);border-radius:50%;}
.quarzon-palette[aria-pressed=true] {outline:2px solid #121729;outline-offset:1px;}
.quarzon-slider {display:grid;grid-template-columns:72px minmax(0,1fr) 35px;align-items:center;gap:8px;font-size:11px;color:#4d586b;}
.quarzon-slider input {width:100%;accent-color:#7048ff;cursor:pointer;}
.quarzon-slider output {font-variant-numeric:tabular-nums;text-align:right;font-size:10px;font-weight:800;color:#10131e;}
.quarzon-reset-controls {border:1px solid #e6e8ee;border-radius:6px;background:#f7f7fa;padding:10px;cursor:pointer;font-size:10px;font-weight:800;letter-spacing:.03em;}
.quarzon-reset-controls {margin-top:0;background:#fff;color:#535c72;}
.quarzon-controls-tab:focus-visible,.quarzon-controls-panel button:focus-visible,.quarzon-controls-panel input:focus-visible {outline:2px solid #7048ff;outline-offset:3px;}
@media (max-width:520px) {
 .quarzon-controls-tab {width:39px;height:88px;}
 .quarzon-panel-body {padding:15px;gap:18px;}
}
@media (prefers-reduced-motion:reduce) {
  .hero-cube-full > .hero-cube-stage,.hero-cube-full > .hero-art-cube,
  .quarzon-controls-tab,.quarzon-controls-panel {transition:none;}
}

/* Keep the original interaction area and layout unchanged. */
.hero-cube-full .hero-art-cube { justify-self: stretch; }

/* QUARZON V7.3 — composition-only adjustments.
   Do not modify the original matrix shader, cube material or page content. */
@media (min-width: 1201px) {
  body.home-page .hero.hero-cube-full {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    column-gap: clamp(12px, 1.3vw, 22px);
    min-height: clamp(690px, 43vw, 735px);
  }
  body.home-page .hero-cube-full > .hero-art-cube {
    min-height: 608px;
    margin-left: -26px;
  }
}
@media (min-width: 781px) and (max-width: 1200px) {
  body.home-page .hero.hero-cube-full {
    column-gap: clamp(14px, 1.6vw, 22px);
    min-height: 690px;
  }
  body.home-page .hero-cube-full > .hero-art-cube {
    min-height: 590px;
  }
}




/* Source: /css/hero-copy.css */
/* QUARZON Astro V7.3.2 — restrained editorial styling for Home hero-copy.
   Intentionally scoped: no changes to cube, grid, navigation, or inner pages. */

body.home-page .hero-cube-full > .hero-copy-refined {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding-top: 20px;
  padding-bottom: 23px;
}

body.home-page .hero-copy-refined .hero-copy-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  max-width: 445px;
}
body.home-page .hero-copy-refined .hero-copy-kicker .eyebrow {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 820;
  line-height: 1.2;
  letter-spacing: .145em;
  color: #3e4963;
}
body.home-page .hero-copy-refined .hero-kicker-symbol {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(73,86,133,.20);
  border-radius: 6px;
  background: rgba(255,255,255,.60);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
body.home-page .hero-copy-refined .hero-kicker-symbol span {
  width: 8px;
  height: 8px;
  border: 1.5px solid #6454dc;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(145deg,#22c7df,#8a56eb);
  box-shadow: 0 0 0 2px rgba(113,76,214,.08);
}
body.home-page .hero-copy-refined .hero-kicker-rule {
  flex: 1 1 auto;
  min-width: 16px;
  height: 1px;
  background: linear-gradient(90deg,rgba(54,70,111,.28),rgba(112,72,255,0));
}

/* Keep the original three lines and their natural text width: changing the
   width can trigger the responsive 3D framing and shrink the actual cube. */
body.home-page .hero-copy-refined h1 {
  position: relative;
  margin: 26px 0 0;
  color: #101724;
  font-weight: 820;
  line-height: .985;
  letter-spacing: -.060em;
  text-wrap: nowrap;
}
body.home-page .hero-copy-refined .hero-copy-metal {
  display: inline;
  color: #262f46;
  background: linear-gradient(112deg,#161b29 2%,#303c57 44%,#555bb1 74%,#7357da 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-page .hero-copy-refined h1 .dot {
  color: #d75bb6;
  -webkit-text-fill-color: #d75bb6;
}
body.home-page .hero-copy-refined .hero-copy-summary {
  position: relative;
  margin: 31px 0 31px;
  padding-left: 20px;
  max-width: 505px;
}
body.home-page .hero-copy-refined .hero-copy-summary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 3px;
  background: linear-gradient(180deg,#1d35ff,#7048ff 56%,#e243c4);
}
body.home-page .hero-copy-refined .hero-copy-summary p {
  max-width: 475px;
  margin: 0;
  color: #586176;
  font-size: clamp(14px, 1.08vw, 16px);
  line-height: 1.72;
  font-weight: 440;
}
body.home-page .hero-copy-refined .hero-copy-actions {
  display: flex;
  align-items: center;
  gap: clamp(16px,1.9vw,27px);
  flex-wrap: wrap;
}
body.home-page .hero-copy-refined .hero-primary-cta {
  min-height: 54px;
  padding: 5px 6px 5px 20px;
  gap: 18px;
  border: 1px solid #171c33;
  border-radius: 9px;
  background: linear-gradient(145deg,#111825,#1a2138);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .05em;
  box-shadow: 0 12px 25px rgba(12,22,54,.14),inset 0 1px 0 rgba(255,255,255,.11);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.home-page .hero-copy-refined .hero-cta-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 6px;
  background: linear-gradient(135deg,rgba(60,101,255,.30),rgba(148,79,207,.40));
  border: 1px solid rgba(190,188,255,.17);
  color: #f1efff;
  font-size: 19px;
  line-height: 1;
  transition: transform .2s ease;
}
body.home-page .hero-copy-refined .hero-secondary-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(71,67,135,.36);
  color: #252c44;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
  transition: color .2s ease,border-color .2s ease;
}
body.home-page .hero-copy-refined .hero-secondary-cta span {
  font-size: 17px;
  color: #7156cd;
  line-height: 1;
}
@media (hover:hover) and (pointer:fine) {
  body.home-page .hero-copy-refined .hero-primary-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(12,22,54,.19),inset 0 1px 0 rgba(255,255,255,.12);
  }
  body.home-page .hero-copy-refined .hero-primary-cta:hover .hero-cta-icon { transform: translate(2px,-2px); }
  body.home-page .hero-copy-refined .hero-secondary-cta:hover { color: #5a45ad; border-color:#7357da; }
}
body.home-page .hero-copy-refined a:focus-visible { outline: 2px solid #6650dd; outline-offset: 4px; }
body.home-page .hero-copy-refined .hero-copy-finish {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(340px, 88%);
  margin-top: 34px;
  opacity: .75;
}
body.home-page .hero-copy-refined .hero-copy-finish-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
body.home-page .hero-copy-refined .hero-copy-finish-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8893b0;
}
body.home-page .hero-copy-refined .hero-copy-finish-dots i:nth-child(1) { background: #25bed4; }
body.home-page .hero-copy-refined .hero-copy-finish-dots i:nth-child(2) { background: #7858dc; }
body.home-page .hero-copy-refined .hero-copy-finish-dots i:nth-child(3) { background: #d56cba; }
body.home-page .hero-copy-refined .hero-copy-finish-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,rgba(83,93,124,.27),rgba(120,94,207,0));
}
@media (max-width: 1200px) {
  body.home-page .hero-copy-refined h1 { letter-spacing: -.059em; }
  body.home-page .hero-copy-refined .hero-copy-summary { margin-top: 28px; margin-bottom: 28px; }
}
@media (max-width:780px) {
  body.home-page .hero-cube-full > .hero-copy-refined { padding-top: 8px; padding-bottom: 0; }
  body.home-page .hero-copy-refined h1 { margin-top: 22px; }
  body.home-page .hero-copy-refined .hero-copy-summary { margin: 26px 0 27px; }
  body.home-page .hero-copy-refined .hero-copy-finish { margin-top: 25px; }
}
@media (max-width:520px) {
  body.home-page .hero-copy-refined .hero-copy-kicker .eyebrow {font-size: 9px;letter-spacing: .10em;white-space:normal;}
  body.home-page .hero-copy-refined h1 { font-size:clamp(34px,9.8vw,45px);letter-spacing:-.061em; }
  body.home-page .hero-copy-refined .hero-copy-summary {padding-left:15px;}
  body.home-page .hero-copy-refined .hero-copy-summary p {font-size:14px;line-height:1.66;}
  body.home-page .hero-copy-refined .hero-primary-cta {min-height:52px;}
  body.home-page .hero-copy-refined .hero-secondary-cta {min-height:40px;}
  body.home-page .hero-copy-refined .hero-copy-finish {display:none;}
}
@media (prefers-reduced-motion: reduce) {
  body.home-page .hero-copy-refined .hero-primary-cta,
  body.home-page .hero-copy-refined .hero-cta-icon,
  body.home-page .hero-copy-refined .hero-secondary-cta { transition: none; }
}


/* Source: /css/service-icons.css */
/* QUARZON 7.3.9.2 — source-accurate traced outline illustrations.
   Only affects the six Home service cards; hero and inner pages unchanged. */
.home-services-redesign .home-service-card-top{
  justify-content:flex-start;
  align-items:flex-start;
  min-height:0;
}
.home-services-redesign .home-service-card .service-clean-icon{
  display:block;
  position:relative;
  width:132px !important;
  height:132px !important;
  flex:0 0 132px !important;
  margin:0 !important;
  color:inherit;
  background:none !important;
  box-shadow:none !important;
  transform:none !important;
}
.home-services-redesign .home-service-card .service-clean-icon img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
}
.home-services-redesign .home-service-card-body{
  align-self:start;
  padding:14px 0 30px;
}
.home-services-redesign .home-service-card{
  min-height:365px;
}
@media(max-width:560px){
  .home-services-redesign .home-service-card .service-clean-icon{
    width:108px !important;
    height:108px !important;
    flex-basis:108px !important;
  }
  .home-services-redesign .home-service-card{min-height:330px;}
  .home-services-redesign .home-service-card-body{padding-top:12px;}
}


/* Source: /css/process-connected-v7.3.9.21.css */
/* QUARZON — Connected Creative Process V7.3.9.21
   Isolated to #process. Retains a connected five-stage sequence.
   SVG illustrations use flat, editable vector fills without filters/gradients. */
#process.design-process {
  position: relative;
  padding-block: clamp(76px, 7vw, 116px) clamp(80px, 7vw, 112px);
  background: #ffffff;
  overflow: hidden;
}
#process .process-v3-heading {text-align:center;max-width:850px;margin:0 auto 34px;}
#process .process-v3-heading .section-kicker{
  display:flex;width:auto;align-items:center;justify-content:center;gap:18px;
  font-size:12px;letter-spacing:.20em;color:#1858eb;font-weight:800;
}
#process .process-v3-heading .section-kicker::before,
#process .process-v3-heading .section-kicker::after{
  content:"";display:inline-block;width:34px;height:1.5px;background:#346bf4;
}
#process .process-v3-heading h2{
  margin:21px 0 14px;color:#101626;
  font-size:clamp(38px,4.6vw,66px);line-height:1.05;
  letter-spacing:-.057em;font-weight:820;
}
#process .process-v3-heading h2 em{
  font-style:normal;
  background:linear-gradient(105deg,#146df4,#6555f8 55%,#a13bf1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#process .process-v3-heading>p{max-width:740px;margin:0 auto;color:#64738b;font-size:clamp(14px,1.35vw,17px);line-height:1.6;}
#process .design-process-steps{
  --process-track-y:186px;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;margin:0;padding:0;list-style:none;position:relative;
}
#process .design-process-steps::before{
  content:"";position:absolute;z-index:0;
  top:var(--process-track-y);left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,#7cb5ff,#5473f2 38%,#7765f6 70%,#b883f3);
}
#process .design-process-stage{
  position:relative;z-index:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 clamp(6px,1.05vw,17px) 0;
}
#process .process-v3-art{
  width:100%;height:176px;display:grid;place-items:center;position:relative;
}
#process .process-v3-art img{
  width:min(100%,244px);height:176px;display:block;object-fit:contain;
  transition:transform .32s ease;
}
#process .design-process-stage:hover .process-v3-art img{transform:translateY(-4px)}
#process .design-process-node{
  position:relative;z-index:2;display:block;flex:none;
  width:19px;height:19px;margin:0 auto 25px;
  background:#fff;border:2px solid #2e66e7;border-radius:50%;
  box-shadow:0 0 0 8px #fff;
}
#process .design-process-node::after{
  content:"";position:absolute;inset:5px;background:#326cf3;border-radius:50%;
}
#process .process-v3-title{
  display:flex;justify-content:center;align-items:center;gap:11px;
  min-height:36px;width:100%;
}
#process .process-v3-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:45px;height:30px;flex:none;
  border:1px solid #92b2f8;color:#175bea;background:#fff;
  font-size:16px;line-height:1;letter-spacing:-.04em;font-weight:850;
  border-radius:999px;
}
#process .process-v3-title h3{
  margin:0;font-size:clamp(16px,1.45vw,21px);
  line-height:1.14;letter-spacing:-.025em;
  color:#101626;text-transform:uppercase;font-weight:850;
}
#process .design-process-stage>p{
  width:100%;max-width:235px;margin:13px auto 0;
  font-size:clamp(12px,1.02vw,14px);line-height:1.58;
  color:#62718a;
}
@media(max-width:1050px) and (min-width:761px){
  #process .design-process-steps{--process-track-y:165px;}
  #process .process-v3-art{height:155px;}
  #process .process-v3-art img{height:155px;}
  #process .process-v3-title{flex-wrap:wrap;gap:6px 9px;}
  #process .process-v3-number{width:39px;height:28px;font-size:14px;}
  #process .process-v3-title h3{font-size:16px;}
  #process .design-process-stage>p{font-size:12px;}
}
@media(max-width:760px){
  #process.design-process{padding-block:70px 78px;}
  #process .process-v3-heading{text-align:left;margin:0 0 30px;}
  #process .process-v3-heading .section-kicker{justify-content:flex-start;}
  #process .process-v3-heading .section-kicker::before{display:none;}
  #process .process-v3-heading h2{margin:18px 0 14px;max-width:430px;}
  #process .process-v3-heading>p{margin:0;max-width:490px;}
  #process .design-process-steps{display:flex;flex-direction:column;gap:0;}
  #process .design-process-steps::before{
    top:24px;bottom:40px;left:17px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,#7cb5ff,#5473f2 35%,#7765f6 72%,#b883f3);
  }
  #process .design-process-stage{
    display:grid;grid-template-columns:36px minmax(0,1fr) 108px;
    grid-template-rows:auto auto;align-items:center;text-align:left;
    gap:0 14px;min-height:130px;
    padding:14px 0 22px;
  }
  #process .design-process-node{grid-column:1;grid-row:1 / 3;margin:0 0 0 8.5px;width:19px;height:19px;align-self:start;margin-top:18px;}
  #process .process-v3-title{grid-column:2;grid-row:1;justify-content:flex-start;flex-wrap:wrap;gap:7px 10px;min-height:36px;}
  #process .design-process-stage>p{grid-column:2;grid-row:2;margin:3px 0 0;max-width:350px;}
  #process .process-v3-art{grid-column:3;grid-row:1 / 3;height:113px;align-self:center;}
  #process .process-v3-art img{max-width:108px;height:113px;}
}
@media(max-width:410px){
  #process .design-process-stage{grid-template-columns:31px minmax(0,1fr) 85px;gap:0 7px;}
  #process .design-process-steps::before{left:15px;}
  #process .design-process-node{margin-left:6.5px;}
  #process .process-v3-title h3{font-size:15px;}
  #process .process-v3-number{width:34px;height:24px;font-size:12px;}
  #process .design-process-stage>p{font-size:11.5px;}
  #process .process-v3-art,#process .process-v3-art img{height:95px;}
  #process .process-v3-art img{max-width:85px;}
}
@media(prefers-reduced-motion:reduce){
  #process .process-v3-art img{transition:none;}
  #process .design-process-stage:hover .process-v3-art img{transform:none;}
}


/* Source: /css/designed-purpose-v7.3.9.14.css */
/* QUARZON v7.3.9.14 — aligned image artwork with the left text margin.
   The same inner edge token controls both sides of the main card. */
/* QUARZON v7.3.9.13 — editorial bento, white background, flat-color vectors.
   This stylesheet replaces the old purpose-specific styles instead of stacking them. */
.purpose-showcase {
  background:#fff; padding:clamp(35px,4.5vw,76px) clamp(16px,3vw,54px) clamp(48px,5vw,80px);
  color:#0b1630;
}
.purpose-showcase-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:1500px;margin:0 auto;}
.purpose-showcase .purpose-feature-card,.purpose-showcase .purpose-small-card {
  box-sizing:border-box;position:relative;display:grid;min-width:0;overflow:hidden;isolation:isolate;
  background:#fff;border:1px solid #e4ebf3;border-radius:18px;box-shadow:none;color:#0b1630;
}
.purpose-showcase .purpose-feature-card {grid-template-columns:minmax(0,46%) minmax(0,54%);min-height:545px;align-items:center;aspect-ratio:auto;border-radius:0;--purpose-card-edge:clamp(34px,5.1vw,76px);}
.purpose-showcase .purpose-feature-copy {position:relative;z-index:2;inset:auto;top:auto;left:auto;width:auto;max-width:none;padding:38px 0 38px var(--purpose-card-edge);}
.purpose-showcase .purpose-eyebrow {display:inline-flex;align-items:center;gap:16px;white-space:nowrap;color:#3c5070;font-size:11px;font-weight:650;letter-spacing:.23em;line-height:1.5;}
.purpose-showcase .purpose-eyebrow i {display:block;width:35px;height:1px;background:#286fff;flex:none;}
.purpose-showcase .purpose-feature-title {display:flex;flex-direction:column;margin:18px 0 0;color:#0b1027;font-size:clamp(77px,7.2vw,113px);line-height:.80;letter-spacing:-.066em;font-weight:850;}
.purpose-showcase .purpose-feature-gradient {width:max-content;margin-top:10px;background:linear-gradient(105deg,#058cff 0%,#2359f7 54%,#8335f4 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.purpose-showcase .purpose-feature-copy h3 {max-width:460px;margin:22px 0 0;color:#101a32;font-size:clamp(24px,2.4vw,34px);font-weight:450;line-height:1.17;letter-spacing:-.03em;}
.purpose-showcase .purpose-feature-copy p {max-width:490px;margin:21px 0 0;font-size:clamp(15px,1.12vw,17px);font-weight:400;line-height:1.53;color:#475b7a;}
.purpose-showcase .purpose-feature-actions {display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px;}
.purpose-showcase .purpose-primary-btn {display:inline-flex;align-items:center;justify-content:center;gap:17px;min-width:0;min-height:54px;width:auto;padding:0 24px;margin:0;border-radius:999px;background:linear-gradient(106deg,#058eff,#215cf7 54%,#8331ee);color:white;font-size:11px;font-weight:700;letter-spacing:.13em;box-shadow:0 7px 16px rgba(41,92,212,.15);text-decoration:none;white-space:nowrap;}
.purpose-showcase .purpose-primary-btn:hover {transform:translateY(-2px);box-shadow:0 9px 20px rgba(41,92,212,.22);}
.purpose-showcase .purpose-primary-btn span {font-size:20px;line-height:1;letter-spacing:0;font-weight:400;}
.purpose-showcase .purpose-inline-link {display:inline-flex;gap:10px;align-items:center;width:max-content;max-width:100%;margin:0;padding:0 0 7px;border-bottom:1.5px solid #345ff3;color:#214bdd;font-size:11px;letter-spacing:.16em;line-height:1.35;text-decoration:none;font-weight:700;white-space:nowrap;}
.purpose-showcase .purpose-inline-link span {font-size:18px;letter-spacing:0;font-weight:400;line-height:1;}
.purpose-showcase .purpose-feature-link {margin:0;}
.purpose-showcase .purpose-feature-bottom {display:none;}
.purpose-showcase .purpose-feature-visual {height:100%;min-width:0;display:grid;place-items:center end;background:#fff;padding:18px var(--purpose-card-edge);}
.purpose-showcase .purpose-feature-art {display:block;position:static;justify-self:end;width:100%;height:auto;max-width:540px;max-height:510px;object-fit:contain;background:transparent;mix-blend-mode:normal;pointer-events:none;user-select:none;}
.purpose-showcase .purpose-secondary-column {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:20px;min-width:0;}
.purpose-showcase .purpose-secondary-column > .purpose-small-card {border-radius:0;}
.purpose-showcase .purpose-small-card {grid-template-columns:minmax(0,55%) minmax(0,45%);min-height:315px;align-items:center;}
.purpose-showcase .purpose-small-copy {position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;width:auto;height:auto;padding:clamp(27px,3.1vw,44px) 0 clamp(25px,3vw,42px) clamp(28px,3.2vw,48px);}
.purpose-showcase .purpose-small-copy h2 {margin:16px 0 0;color:#0b112a;font-size:clamp(37px,3.4vw,54px);font-weight:850;line-height:1;letter-spacing:-.055em;}
.purpose-showcase .purpose-small-copy h3 {max-width:295px;margin:15px 0 0;color:#121d36;font-size:clamp(19px,1.77vw,26px);font-weight:450;line-height:1.18;letter-spacing:-.025em;}
.purpose-showcase .purpose-small-copy p {max-width:285px;margin:13px 0 0;color:#526480;font-size:clamp(13px,1.04vw,16px);font-weight:400;line-height:1.45;}
.purpose-showcase .purpose-small-copy .purpose-inline-link {margin-top:20px;}
.purpose-showcase .purpose-small-visual {display:grid;place-items:center;min-width:0;height:100%;padding:18px clamp(10px,2.4vw,34px) 18px 0;background:transparent;}
.purpose-showcase .purpose-small-art {display:block;position:static;width:100%;height:auto;max-width:265px;max-height:275px;object-fit:contain;background:transparent;pointer-events:none;user-select:none;opacity:1;}
@media(max-width:1130px) and (min-width:841px) {
 .purpose-showcase .purpose-feature-card {--purpose-card-edge:42px;}
 .purpose-showcase .purpose-feature-title {font-size:clamp(75px,8.3vw,96px);}
 .purpose-showcase .purpose-feature-actions {gap:17px;}
 .purpose-showcase .purpose-secondary-column {grid-template-columns:1fr;}
 .purpose-showcase .purpose-small-card {grid-template-columns:60% 40%;min-height:270px;}
 .purpose-showcase .purpose-small-art {max-height:235px;}
}
@media(max-width:840px) {
 .purpose-showcase .purpose-feature-card {grid-template-columns:1fr;min-height:0;--purpose-card-edge:clamp(26px,6vw,54px);}
 .purpose-showcase .purpose-feature-copy {padding:clamp(30px,6vw,54px) clamp(26px,6vw,54px) 0;}
 .purpose-showcase .purpose-feature-title {font-size:clamp(72px,12vw,105px);}
 .purpose-showcase .purpose-feature-copy h3 {max-width:620px;}
 .purpose-showcase .purpose-feature-copy p {max-width:650px;}
 .purpose-showcase .purpose-feature-visual {padding:0 var(--purpose-card-edge) 32px;place-items:center;}
 .purpose-showcase .purpose-feature-art {width:min(100%,470px);max-height:400px;justify-self:center;}
 .purpose-showcase .purpose-secondary-column {grid-template-columns:1fr;}
 .purpose-showcase .purpose-small-card {grid-template-columns:minmax(0,57%) minmax(0,43%);min-height:280px;}
 .purpose-showcase .purpose-small-copy {padding:34px 0 34px 40px;}
 .purpose-showcase .purpose-small-art {max-height:230px;}
}
@media(max-width:500px) {
 .purpose-showcase {padding:22px 12px 42px;}
 .purpose-showcase-grid,.purpose-showcase .purpose-secondary-column {gap:13px;}
 .purpose-showcase .purpose-secondary-column > .purpose-small-card {border-radius:0;}
 .purpose-showcase .purpose-feature-card {--purpose-card-edge:25px;}
 .purpose-showcase .purpose-feature-copy {padding:32px var(--purpose-card-edge) 0;}
 .purpose-showcase .purpose-eyebrow {font-size:9px;letter-spacing:.17em;gap:10px;}
 .purpose-showcase .purpose-eyebrow i {width:25px;}
 .purpose-showcase .purpose-feature-title {font-size:clamp(60px,16vw,82px);margin-top:18px;}
 .purpose-showcase .purpose-feature-copy h3 {font-size:25px;line-height:1.16;margin-top:21px;}
 .purpose-showcase .purpose-feature-copy p {font-size:14px;margin-top:16px;line-height:1.52;}
 .purpose-showcase .purpose-feature-actions {margin-top:23px;gap:18px;}
 .purpose-showcase .purpose-primary-btn {min-height:48px;padding:0 22px;font-size:10px;}
 .purpose-showcase .purpose-inline-link {font-size:10px;}
 .purpose-showcase .purpose-feature-visual {padding:12px var(--purpose-card-edge) 25px;}
 .purpose-showcase .purpose-feature-art {width:min(100%,330px);}
 .purpose-showcase .purpose-small-card {grid-template-columns:1fr;min-height:0;}
 .purpose-showcase .purpose-small-copy {padding:28px 25px 5px;}
 .purpose-showcase .purpose-small-copy h2 {font-size:43px;}
 .purpose-showcase .purpose-small-copy h3 {max-width:350px;font-size:22px;}
 .purpose-showcase .purpose-small-copy p {max-width:350px;font-size:14px;}
 .purpose-showcase .purpose-small-visual {padding:2px 30px 17px;}
 .purpose-showcase .purpose-small-art {max-width:190px;max-height:180px;}
}
@media(prefers-reduced-motion:reduce) {.purpose-showcase .purpose-primary-btn:hover {transform:none;}}


/* Source: /css/start-project-v7.3.9.32.css */
/* QUARZON V7.3.9.32 — premium abstract-editorial closing CTA.
   Flat, restrained abstract backdrop; no icons, photographs, or 3D. */
#start-project.project-inquiry-section {
  --sp31-ink:#111a2c;
  --sp31-muted:#526178;
  position:relative;
  isolation:isolate;
  display:block;
  min-height:0;
  padding:0 var(--pad);
  overflow:hidden;
  background:linear-gradient(111deg,#ffffff 0%,#fdfdff 55%,#f8faff 100%);
  border-top:1px solid #e4e9f2;
  border-bottom:1px solid #e6eaf3;
  color:var(--sp31-ink);
}
#start-project.project-inquiry-section .project-inquiry-background {
  position:absolute;
  z-index:-1;
  pointer-events:none;
  top:0;right:0;bottom:0;
  width:55%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 18%,#000 72%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.2) 18%,#000 72%);
}
#start-project.project-inquiry-section .project-inquiry-background svg {width:100%;height:100%;display:block}
#start-project.project-inquiry-section .project-inquiry-inner {
  position:relative;
  z-index:1;
  max-width:1560px;
  margin:0 auto;
  padding:clamp(57px,5vw,72px) 0 clamp(66px,5.65vw,84px);
}
#start-project.project-inquiry-section .project-inquiry-eyebrow-row {display:flex;align-items:center;gap:22px}
#start-project.project-inquiry-section .project-inquiry-eyebrow {
  display:flex;align-items:center;gap:13px;flex:none;
  margin:0;
  color:#1c2a47;
  font-size:clamp(10px,.76vw,12px);
  letter-spacing:.16em;
  font-weight:820;
  line-height:1.4;
  white-space:nowrap;
}
#start-project.project-inquiry-section .project-inquiry-accent {
  width:37px;height:3px;flex:0 0 37px;
  background:linear-gradient(90deg,#2455f8,#7044f4);
}
#start-project.project-inquiry-section .project-inquiry-rule {
  height:1px;flex:1;
  background:linear-gradient(90deg,#c9d1df 0%,rgba(201,209,223,.55) 66%,transparent 100%);
}
#start-project.project-inquiry-section .project-inquiry-content {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(45px,5.3vw,87px);
  align-items:center;
  padding-top:clamp(52px,4.8vw,72px);
}
#start-project.project-inquiry-section h2 {
  margin:0;
  font-size:clamp(55px,5.25vw,81px);
  font-weight:825;
  letter-spacing:-.064em;
  line-height:1.045;
  color:#111827;
  text-wrap:balance;
}
#start-project.project-inquiry-section h2 span {
  color:#4e45ee;
  background:linear-gradient(105deg,#2453ff 5%,#7548ea 90%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
#start-project.project-inquiry-section .project-inquiry-message {
  min-width:0;
  border-left:1px solid #cbd4e3;
  padding:7px 0 8px clamp(29px,3vw,50px);
}
#start-project.project-inquiry-section .project-inquiry-message p {
  max-width:440px;
  margin:0 0 30px;
  color:var(--sp31-muted);
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.7;
}
#start-project.project-inquiry-section .project-inquiry-button {
  min-height:54px;
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,43px);
  max-width:100%;
  padding:5px 5px 5px 22px;
  border-radius:9px;
  border:1px solid #0c1628;
  background:#0c1628;
  color:#fff;
  box-shadow:0 12px 25px rgba(18,31,55,.11);
  font-size:11px;
  font-weight:790;
  letter-spacing:.13em;
  line-height:1.2;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
#start-project.project-inquiry-section .project-inquiry-button-arrow {
  width:43px;height:43px;flex:0 0 43px;
  display:grid;place-items:center;
  border-radius:6px;
  color:#fff;
  background:linear-gradient(135deg,#3557ff,#7144eb);
  font-size:22px;
  line-height:1;
  transition:transform .2s ease;
}
#start-project.project-inquiry-section .project-inquiry-button:focus-visible {outline:3px solid #7282f4;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
  #start-project.project-inquiry-section .project-inquiry-button:hover{transform:translateY(-2px);box-shadow:0 15px 31px rgba(18,31,55,.17)}
  #start-project.project-inquiry-section .project-inquiry-button:hover .project-inquiry-button-arrow{transform:translate(2px,-2px)}
}
@media(max-width:1100px){
  #start-project.project-inquiry-section .project-inquiry-content{gap:33px}
  #start-project.project-inquiry-section h2{font-size:clamp(49px,5.3vw,66px)}
  #start-project.project-inquiry-section .project-inquiry-message{padding-left:25px}
}
@media(max-width:760px){
  #start-project.project-inquiry-section .project-inquiry-inner{padding:52px 0 73px}
  #start-project.project-inquiry-section .project-inquiry-content{grid-template-columns:1fr;gap:29px;padding-top:58px}
  #start-project.project-inquiry-section h2{font-size:clamp(51px,8.5vw,70px)}
  #start-project.project-inquiry-section .project-inquiry-message{border-left:0;border-top:1px solid #cbd4e3;padding:23px 0 0}
  #start-project.project-inquiry-section .project-inquiry-message p{max-width:540px}
  #start-project.project-inquiry-section .project-inquiry-background{width:85%;opacity:.64}
}
@media(max-width:520px){
  #start-project.project-inquiry-section .project-inquiry-inner{padding:42px 0 65px}
  #start-project.project-inquiry-section .project-inquiry-eyebrow-row{gap:13px}
  #start-project.project-inquiry-section .project-inquiry-eyebrow{gap:10px;font-size:9px;letter-spacing:.11em}
  #start-project.project-inquiry-section .project-inquiry-accent{width:27px;flex-basis:27px}
  #start-project.project-inquiry-section .project-inquiry-content{padding-top:47px;gap:27px}
  #start-project.project-inquiry-section h2{font-size:clamp(43px,10.2vw,53px)}
  #start-project.project-inquiry-section .project-inquiry-message{padding-top:21px}
  #start-project.project-inquiry-section .project-inquiry-message p{font-size:14px;line-height:1.72;margin-bottom:25px}
  #start-project.project-inquiry-section .project-inquiry-background{width:100%;opacity:.42}
  #start-project.project-inquiry-section .project-inquiry-button{min-height:51px;font-size:10px;padding-left:17px;letter-spacing:.1em}
  #start-project.project-inquiry-section .project-inquiry-button-arrow{width:39px;height:39px;flex-basis:39px}
}
@media(max-width:360px){#start-project.project-inquiry-section h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){
  #start-project.project-inquiry-section .project-inquiry-button,#start-project.project-inquiry-section .project-inquiry-button-arrow{transition:none}
  #start-project.project-inquiry-section .project-inquiry-button:hover,#start-project.project-inquiry-section .project-inquiry-button:hover .project-inquiry-button-arrow{transform:none}
}

/* V7.3.9.32 — quiet lower abstract counterweight: no objects, icons or 3D. */
#start-project.project-inquiry-section .project-inquiry-ground {
  position:absolute;
  inset:auto 0 0;
  height:clamp(120px,17vw,220px);
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
#start-project.project-inquiry-section .project-inquiry-ground svg {width:100%;height:100%;display:block}
#start-project.project-inquiry-section .project-inquiry-background {width:54%}
#start-project.project-inquiry-section .project-inquiry-message {position:relative}
#start-project.project-inquiry-section .project-inquiry-message::before {
  content:"";
  position:absolute;
  top:0;
  left:-1px;
  width:2px;
  height:31px;
  background:linear-gradient(to bottom,#5465ef,#9680e9);
  opacity:.85;
}
@media(max-width:760px){
  #start-project.project-inquiry-section .project-inquiry-message::before{top:-1px;left:0;width:38px;height:2px;background:linear-gradient(to right,#5465ef,#9680e9)}
  #start-project.project-inquiry-section .project-inquiry-ground{height:155px;opacity:.72}
}
@media(max-width:520px){
  #start-project.project-inquiry-section .project-inquiry-ground{height:128px;opacity:.48}
  #start-project.project-inquiry-section .project-inquiry-message::before{width:30px}
}


/* Source: /css/site-title-system-v7.3.9.62.css */
/* QUARZON V7.3.9.62 — shared editorial H1/H2 title system.
   Gradient values are copied from Home hero .hero-copy-metal (hero-copy.css).
   Page hero animation, overlay, header, and 3D cube are untouched. */
:root {
  --qz-title-ink: #101724;
  --qz-title-gradient: linear-gradient(112deg, #161b29 2%, #303c57 44%, #555bb1 74%, #7357da 100%);
  --qz-title-dot: #d75bb6;
}

/* Shared accent on deliberately marked words, never the whole section or card. */
.qz-gradient-text {
  color: #555bb1;
  background: var(--qz-title-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
@supports not (background-clip: text) {
  .qz-gradient-text { color: #555bb1 !important; -webkit-text-fill-color: #555bb1 !important; }
}

/* Inner hero H1 follows the same dark base + Home hero accent. */
.page-hero-compact .page-hero-content h1,
.contact-v50 > .page-hero-contact .page-hero-content h1 {
  color: var(--qz-title-ink) !important;
}
.page-hero-compact .page-hero-content h1 .qz-gradient-text,
.contact-v50 > .page-hero-contact .page-hero-content h1 .qz-gradient-text {
  color: #555bb1 !important;
  background: var(--qz-title-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.page-hero-compact .page-hero-content h1 .page-hero-title-dot,
.contact-v50 > .page-hero-contact .page-hero-content h1 .page-hero-title-dot {
  color: var(--qz-title-dot) !important;
  -webkit-text-fill-color: var(--qz-title-dot) !important;
}

/* Equal hierarchy for the FIRST H2 across About, Services, Portfolio and Contact. */
.qz-page-intro { min-width: 0; }
.qz-page-intro .section-kicker,
.qz-page-intro .contact-section-eyebrow {
  display: inline-block;
  margin: 0 0 17px !important;
  color: #33425f !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  line-height: 1.4;
  text-transform: uppercase;
}
.qz-page-intro h2,
.about-values-section .about-v11-heading.qz-page-intro h2,
.portfolio-introduction.portfolio-introduction-detail.qz-page-intro h2,
.contact-orientation.qz-page-intro h2 {
  max-width: 1200px !important;
  margin: 0 !important;
  color: var(--qz-title-ink) !important;
  font-size: clamp(38px, 4vw, 66px) !important;
  font-weight: 790 !important;
  line-height: 1.02 !important;
  letter-spacing: -.052em !important;
  text-align: left !important;
  text-wrap: balance;
  white-space: normal !important;
}
.contact-orientation.qz-page-intro .contact-introduction {
  margin-top: 22px;
}
/* The original Portfolio intro had a stronger display-style treatment. */
.portfolio-introduction.portfolio-introduction-detail.qz-page-intro {
  display: block !important;
  background: #fff;
}

/* Bring the first editorial title modestly closer to the hero. */
.page-hero-compact + .about-values-section {
  padding-top: clamp(49px, 4.6vw, 68px) !important;
}
.page-hero-compact + .services-overview {
  padding-top: clamp(50px, 4.2vw, 61px) !important;
}
.page-hero-compact + .portfolio-introduction.portfolio-introduction-detail {
  padding-top: clamp(37px, 3.4vw, 46px) !important;
}
.contact-v50 > .page-hero-compact + .contact-main-layout {
  padding-top: clamp(48px, 5vw, 75px) !important;
}

/* Home hero stays as-is. Other Home editorial headings share its accent palette. */
body.home-page .home-services-head h2,
body.home-page .home-faq-head h2 { color: var(--qz-title-ink); }

@media (max-width: 760px) {
  .qz-page-intro .section-kicker,
  .qz-page-intro .contact-section-eyebrow { margin-bottom: 14px !important; font-size: 10px !important; }
  .qz-page-intro h2,
  .about-values-section .about-v11-heading.qz-page-intro h2,
  .portfolio-introduction.portfolio-introduction-detail.qz-page-intro h2,
  .contact-orientation.qz-page-intro h2 {
    font-size: clamp(33px, 8vw, 46px) !important;
    letter-spacing: -.048em !important;
  }
  .page-hero-compact + .about-values-section { padding-top: 48px !important; }
  .page-hero-compact + .services-overview { padding-top: 47px !important; }
  .page-hero-compact + .portfolio-introduction.portfolio-introduction-detail { padding-top: 35px !important; }
  .contact-v50 > .page-hero-compact + .contact-main-layout { padding-top: 45px !important; }
}


/* Source: /css/home-nav-intro-v7.3.9.64.css */
/* QUARZON V7.3.9.64 — editorial H2 continuity and requested layout adjustments.
 * Preserve the About heading as visual reference. Home hero, WebGL and overlays untouched.
 * Header rules apply consistently to all five pages (shared component).
 */
:root { --qz-nav-ink: #1b2941; --qz-nav-accent: #1d35ff; }

/* Keep all three first-intro headings visually equivalent to the About reference. */
.services-overview .services-introduction.qz-page-intro,
.portfolio-page .portfolio-introduction.qz-page-intro {
  display: block !important;
  max-width: none !important;
  min-width: 0;
  background: transparent !important;
}
.services-overview .services-introduction.qz-page-intro > div,
.portfolio-page .portfolio-introduction.qz-page-intro > div { min-width: 0; }
.services-overview .services-introduction.qz-page-intro h2,
.portfolio-page .portfolio-introduction.qz-page-intro h2 {
  display: block;
  margin: 0 !important;
  max-width: 1200px !important;
  font-size: clamp(38px, 4vw, 66px) !important;
  font-weight: 790 !important;
  letter-spacing: -.052em !important;
  line-height: 1.02 !important;
  white-space: normal !important;
  text-wrap: balance;
  color: #101724 !important;
}
.services-overview .services-introduction.qz-page-intro .qz-gradient-text,
.portfolio-page .portfolio-introduction.qz-page-intro .qz-gradient-text {
  background: var(--qz-title-gradient) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Refinement of inner Hero headings only. No changes to Home Hero. */
.page-hero-compact > .page-hero-content h1 {
  font-weight: 820 !important;
  letter-spacing: -.058em !important;
  line-height: 1.025 !important;
  text-wrap: balance;
  text-shadow: none !important;
}


/* V7.3.9.64 — classic right-aligned navigation (V7.3.9.61 is the base).
 * The segmented/pill navigation from 63 has been removed from the layout.
 * Navigation labels are uppercase in the component itself.
 */
.site-header > .main-nav a,
.site-header > .home-mobile-nav nav a {
  text-transform: uppercase;
  letter-spacing: .085em;
}
@media (min-width: 901px) {
  .site-header > .main-nav a { font-size: 11px; }
}

/* Home: vertically align the entire copy group with the cube's lifted
 * center (the Three.js framing sets lift=21px on desktop).
 * Translate property is independent from the page entrance animation's
 * transform and does not affect the live 3D framing's text measurements.
 */
@media (min-width: 781px) {
  body.home-page .hero.hero-cube-full > .hero-copy.hero-copy-refined {
    align-self: center;
    translate: 0 -21px;
  }
}
@media (max-width: 780px) {
  body.home-page .hero.hero-cube-full > .hero-copy.hero-copy-refined {
    translate: none;
  }
}

/* Match Portfolio's measured hero → first-section padding for the other
 * inner pages. Portfolio remains at its existing 62 reference values.
 * The extra 1px aligns the actual kicker baseline with Portfolio's block;
 * these rules load after the 62 stylesheet so they are authoritative.
 */
.page-hero-compact + .about-values-section,
.page-hero-compact + .services-overview,
.contact-v50 > .page-hero-compact + .contact-main-layout {
  padding-top: calc(clamp(37px, 3.4vw, 46px) + 1px) !important;
}
@media (max-width: 760px) {
  .page-hero-compact + .about-values-section,
  .page-hero-compact + .services-overview,
  .contact-v50 > .page-hero-compact + .contact-main-layout {
    padding-top: 36px !important;
  }
}


/* Source: /css/refinements-v7.3.9.65.css */
/* QUARZON V7.3.9.65 — requested fine refinements only.
   Shared footer: tighter plain-text email, editorial back-to-top control.
   Inner-page kickers: black. About visual retains its image/background layer. */

/* Email intentionally plain text: no mailto link, no arrow, no misleading underline. */
.q-footer31 .qf31-email {
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  color:#f2f5ff;
  font-size:clamp(13px, 1vw, 15px);
  font-weight:590;
  line-height:1.45;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Native anchor navigation, precise flat treatment (no intrusive floating button).
   Arrow occupies its own square to visually balance the narrow bottom strip. */
.q-footer31 .qf31-bottom .qf31-backtop {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:13px;
  min-height:43px;
  max-width:100%;
  padding:4px 4px 4px 14px;
  border:1px solid rgba(183,200,232,.30);
  border-radius:2px;
  background:rgba(255,255,255,.025);
  color:#e4eafa;
  font-size:10px;
  font-weight:780;
  letter-spacing:.105em;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.q-footer31 .qf31-bottom .qf31-backtop-icon {
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  margin:0;
  flex:0 0 33px;
  border-radius:1px;
  background:#1d35ff;
  color:#fff;
  font-family:inherit;
  font-size:20px;
  font-weight:480;
  line-height:1;
  transition:background-color .18s ease,transform .18s ease;
}
@media (hover:hover) and (pointer:fine) {
  .q-footer31 .qf31-bottom .qf31-backtop:hover {
    background:rgba(255,255,255,.075);
    border-color:rgba(195,207,242,.65);
    color:#fff;
  }
  .q-footer31 .qf31-bottom .qf31-backtop:hover .qf31-backtop-icon {
    background:#4055ff;
    transform:translateY(-1px);
  }
}
.q-footer31 .qf31-bottom .qf31-backtop:focus-visible {
  outline:2px solid #95a9ff;
  outline-offset:4px;
}
@media (max-width:680px) {
  .q-footer31 .qf31-bottom .qf31-backtop {
    padding-left:12px;
    min-height:40px;
    font-size:9px;
  }
  .q-footer31 .qf31-bottom .qf31-backtop-icon {
    width:30px;
    height:30px;
    flex-basis:30px;
  }
  .q-footer31 .qf31-email {font-size:14px;}
}
@media(prefers-reduced-motion:reduce) {
  .q-footer31 .qf31-bottom .qf31-backtop,
  .q-footer31 .qf31-bottom .qf31-backtop-icon {transition:none;}
  .q-footer31 .qf31-bottom .qf31-backtop:hover .qf31-backtop-icon {transform:none;}
}

/* Page-hero kicker dark, with cobalt rules deliberately retained.
   Excludes Home and avoids touching any homepage copy styling. */
body:not(.home-page) .page-hero-compact .page-hero-kicker,
body:not(.home-page) .contact-v50 > .page-hero-contact .page-hero-kicker {
  color:#111827 !important;
}

/* About editorial art board: requested precise light background. */
.about-editorial .about-editorial-visual {background:#fefdfe;}


/* Source: /css/refinements-v7.3.9.72.css */
/* QUARZON V7.3.9.72 — Home, About and Services targeted refinement.
   All divider rules are scoped to the requested components. */

/* 1. Home: vertical division along the existing 46/54 split. */
.purpose-showcase .purpose-feature-card > .purpose-feature-visual {
  box-sizing: border-box;
  border-left: 1px solid #dfe6f0;
}

/* 2. About: studio-model split uses image on left, copy on right. */
@media (min-width: 1181px) {
  .about-editorial > .about-editorial-copy {
    box-sizing: border-box;
    border-left: 1px solid #dfe6f0;
  }
}

/* 3. Services: use a real-alpha PNG of the existing exact illustration,
   and enlarge it modestly without changing the white frame or grid design. */
.services-v67-custom .services-custom-artwork .services-artwork-image.services-artwork-image-optimized {
  width: min(100%, 525px);
  max-height: 525px;
  object-fit: contain;
  mix-blend-mode: normal;
}

/* Once two columns stack, the separator becomes horizontal. */
@media (max-width: 1180px) {
  .about-editorial > .about-editorial-copy {
    box-sizing: border-box;
    border-left: 0;
    border-top: 1px solid #dfe6f0;
  }
}
@media (max-width: 840px) {
  .purpose-showcase .purpose-feature-card > .purpose-feature-visual {
    border-left: 0;
    border-top: 1px solid #dfe6f0;
    margin-top: clamp(24px, 4vw, 36px);
  }
}
@media (min-width: 521px) and (max-width: 1100px) {
  .services-v67-custom .services-custom-artwork .services-artwork-image.services-artwork-image-optimized {
    width: min(100%, 495px);
    max-height: 495px;
  }
}
@media (max-width: 520px) {
  .services-v67-custom .services-custom-artwork .services-artwork-image.services-artwork-image-optimized {
    width: min(100%, 390px);
    max-height: 390px;
  }
}


/* Source: /css/refinements-v7.3.9.74.css */
/* QUARZON V7.3.9.74 — Home editorial column alignment.
   Restore a real half-and-half visual axis in two-sided home sections.
   Does not alter the intentionally wider 3D cube hero, assets or copy. */

/* STAND OUT: line and image now start at the exact card midpoint. */
@media (min-width: 841px) {
  .purpose-showcase .purpose-feature-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* DEFINE / CONNECT: artwork and copy receive the same available width
   whenever their content is arranged horizontally. */
@media (min-width: 501px) {
  .purpose-showcase .purpose-small-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* WHY QUARZON: two genuinely equal columns, with measured breathing room. */
@media (min-width: 1051px) {
  #why-quarzon.why-quarzon-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(48px, 5vw, 76px);
  }

  /* OUR PHILOSOPHY / INDEPENDENT PRACTICE — exact central division. */
  .split-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split-showcase .studio-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final contact CTA: center line is now truly halfway across the inner
   container rather than shifted to the right by an asymmetrical grid/gap. */
@media (min-width: 761px) {
  #start-project.project-inquiry-section .project-inquiry-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }
  #start-project.project-inquiry-section .project-inquiry-content > h2 {
    min-width: 0;
    padding-right: clamp(22px, 3vw, 46px);
  }
  #start-project.project-inquiry-section .project-inquiry-message {
    padding-left: clamp(26px, 3vw, 46px);
  }
}


/* Source: /css/refinements-v7.3.9.75.css */
/* QUARZON V7.3.9.75 — Shared seam and centered Why QUARZON divider.
   Home-only adjustments. The original artwork, copy and breakpoints remain intact. */

/* DEFINE and CONNECT are a single continuous panel. The inner line is
   formed by the second card's border, avoiding a doubled 2px seam. */
.purpose-showcase .purpose-secondary-column {
  gap: 0;
}
.purpose-showcase .purpose-secondary-column > .purpose-small-card {
  border-radius: 0;
}
@media (min-width: 1131px) {
  .purpose-showcase .purpose-secondary-column > .purpose-define {
    border-right: 0;
  }
}
@media (max-width: 1130px) {
  .purpose-showcase .purpose-secondary-column > .purpose-define {
    border-bottom: 0;
  }
}

/* Desktop: the pseudo-element remains on the original system container,
   but is aligned to the central axis BETWEEN equal Why QUARZON columns,
   rather than running through the icons at its former left:37px position. */
@media (min-width: 1051px) {
  #why-quarzon.why-quarzon-v2 .why-design-system::before {
    left: calc(0px - clamp(24px, 2.5vw, 38px));
    top: 0;
    bottom: 0;
  }
}

/* When Why QUARZON stacks, the same separator turns horizontal and
   sits at the midpoint of the existing 56px inter-column gap. */
@media (max-width: 1050px) {
  #why-quarzon.why-quarzon-v2 .why-design-system::before {
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    top: -28px;
    bottom: auto;
    background: linear-gradient(90deg,
      rgba(25,44,255,.08), rgba(25,44,255,.35),
      rgba(112,72,255,.35), rgba(26,194,210,.08));
  }
}


/* Source: /css/refinements-v7.3.9.76.css */
/* QUARZON V7.3.9.76 — unified 50/50 closing CTA on every page.
   The gutter is deliberately zero: the invitation border sits on the true
   midpoint, while the spacing remains inside each half. */
@media (min-width: 761px) {
  #start-project.project-inquiry-section .project-inquiry-content,
  #about-contact.project-inquiry-section .project-inquiry-content,
  #portfolio-contact.project-inquiry-section .project-inquiry-content,
  .services-v46-cta.project-inquiry-section .project-inquiry-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }

  #start-project.project-inquiry-section .project-inquiry-content > h2,
  #about-contact.project-inquiry-section .project-inquiry-content > h2,
  #portfolio-contact.project-inquiry-section .project-inquiry-content > h2,
  .services-v46-cta.project-inquiry-section .project-inquiry-content > h2 {
    min-width: 0;
    padding-right: clamp(22px, 3vw, 46px);
  }

  #start-project.project-inquiry-section .project-inquiry-message,
  #about-contact.project-inquiry-section .project-inquiry-message,
  #portfolio-contact.project-inquiry-section .project-inquiry-message,
  .services-v46-cta.project-inquiry-section .project-inquiry-message {
    min-width: 0;
    padding-left: clamp(26px, 3vw, 46px);
  }
}
/* At 760px and below, keep the project's original single-column layout and
   horizontal divider from the existing page-specific responsive rules. */


/* Source: /css/rebrand-davidmros-v7.3.9.78.css */
/* V7.3.9.78: Wordmark-only sizing for the longer personal name.
   The existing header/footer composition, colors and graphics stay unchanged. */
.site-header .brand-name {
  font-size: clamp(19px, 1.6vw, 23px);
  letter-spacing: .105em;
  white-space: nowrap;
}
.q-footer31 .qf31-wordmark {
  font-size: clamp(22px, 2.1vw, 30px);
  letter-spacing: .085em;
  white-space: nowrap;
}
@media (max-width: 375px) {
  .site-header .brand-name {font-size: 19px;letter-spacing: .075em;}
}


/* Source: /css/davidmros-v7.3.9.79.css */
/* V7.3.9.79 - keep the approved desktop layout, hide the 3D hero on phones. */
.david-contact-honeypot{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.contact-submit-button:disabled{opacity:.65;cursor:wait}
@media (max-width:600px){
  body.home-page .hero.hero-cube-full{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    padding-bottom:clamp(35px,8vw,68px)!important;
  }
  body.home-page .hero.hero-cube-full > .hero-copy-refined{
    width:100%!important;max-width:none!important;
    padding-bottom:0!important;
  }
  body.home-page .hero-cube-full > .hero-cube-stage,
  body.home-page .hero-cube-full > .hero-art-cube,
  body.home-page .hero-cube-full > .hero-cube-hint,
  body.home-page .hero-cube-full > .quarzon-cube-status,
  body.home-page .quarzon-controls-tab,
  body.home-page .quarzon-controls-panel{display:none!important}
}

/* Concept cards are display studies without case-study destination links. */
.portfolio-gallery-link[data-concept]{pointer-events:none!important;cursor:default!important}


/* Source: /css/davidmros-v7.3.9.80.css */
/* David Mizrahi V7.3.9.80 — targeted edits only; approved design system unchanged. */
/* Move hero copy slightly higher alongside the cube on desktop, without changing the cube. */
@media (min-width: 781px) {
  body.home-page .hero.hero-cube-full > .hero-copy.hero-copy-refined {
    translate: 0 -35px;
  }
}
/* Shared social icons: Behance is the only verified link; X is informational only. */
.q-footer31 .qf31-socials a.qf31-social-icon {
  text-decoration:none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.q-footer31 .qf31-socials a.qf31-social-icon:hover,
.q-footer31 .qf31-socials a.qf31-social-icon:focus-visible {
  background:rgba(103,124,255,.16);
  border-color:rgba(153,172,255,.6);
  color:#fff;
}
.q-footer31 .qf31-socials a.qf31-social-icon:focus-visible{outline:2px solid #9eacff;outline-offset:3px}
.q-footer31 .qf31-social-icon.qf31-social-pending{cursor:default;opacity:.75}
.q-footer31 .qf31-social-icon.qf31-social-pending svg{stroke:none;fill:currentColor}

/* Behance-backed project cards. Semantic names avoid version numbers and placeholder IDs. */
.portfolio-projects{padding:28px var(--pad) clamp(72px,7.4vw,120px);background:#fff}
.portfolio-projects-introduction{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:0 0 32px;padding:0 0 25px;border-bottom:1px solid #dce3ee}
.portfolio-projects-introduction p{max-width:670px;margin:0;color:#58677e;font-size:15px;line-height:1.7}
.portfolio-projects-introduction>a{display:inline-flex;align-items:center;gap:14px;flex:0 0 auto;color:#223cff;font-size:11px;font-weight:800;letter-spacing:.065em;text-transform:uppercase;padding:0 0 5px;border-bottom:1px solid #7d8cfb;transition:color .2s ease}
.portfolio-projects-introduction>a:hover{color:#5b49c3}
.portfolio-project-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,2vw,27px)}
.portfolio-project-grid .portfolio-project-card{grid-column:span 2}
/* Centre the last pair of the 14 projects within the three-column composition. */
.portfolio-project-grid .portfolio-project-card:nth-last-child(2){grid-column:2 / span 2}
.portfolio-project-grid .portfolio-project-card:last-child{grid-column:4 / span 2}
.portfolio-project-card{position:relative;min-width:0;background:#fff;border:1px solid #e2e7f0;overflow:hidden;transition:border-color .22s ease,box-shadow .22s ease,translate .22s ease}
.portfolio-project-card:hover{border-color:#c7d2f5;box-shadow:0 18px 42px rgba(23,44,89,.075);translate:0 -3px}
.portfolio-project-link{display:block;height:100%;color:inherit;text-decoration:none}
.portfolio-project-link:focus-visible{outline:3px solid #4359f6;outline-offset:-4px}
.portfolio-project-image{position:relative;overflow:hidden;aspect-ratio:1.3;background:linear-gradient(140deg,#f5f7fb,#e7eefa);display:grid;place-items:center;isolation:isolate;border-bottom:1px solid #e2e7f0}
.portfolio-project-image::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(52,85,170,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(52,85,170,.055) 1px,transparent 1px);background-size:30px 30px}
.portfolio-project-image img{position:absolute;inset:0;width:100%;height:100%;z-index:1;object-fit:cover;object-position:center top;transition:transform .5s ease}
.portfolio-project-card:hover .portfolio-project-image img{transform:scale(1.035)}
.portfolio-project-image-fallback{position:relative;z-index:0;max-width:80%;text-align:center;color:#25365b;font-size:clamp(25px,3vw,40px);font-weight:780;line-height:1.12;letter-spacing:-.045em}
.portfolio-project-open{position:absolute;z-index:2;right:15px;bottom:15px;width:35px;height:35px;display:grid;place-items:center;background:#fff;color:#1d35ff;border:1px solid #d4dced;font-size:19px}
.portfolio-project-details{display:flex;flex-direction:column;align-items:flex-start;min-height:163px;padding:23px clamp(20px,2.1vw,30px) 24px}
.portfolio-project-category{font-size:10px;color:#526687;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.portfolio-project-details h3{margin:13px 0 19px;color:#111a2b;font-size:clamp(22px,2vw,29px);font-weight:800;line-height:1.12;letter-spacing:-.042em}
.portfolio-project-action{margin-top:auto;color:#2744ed;font-size:11px;font-weight:790;letter-spacing:.045em;text-transform:uppercase}
.portfolio-project-action span{margin-left:8px}
@media(max-width:1050px){.portfolio-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-project-grid .portfolio-project-card,.portfolio-project-grid .portfolio-project-card:nth-last-child(2),.portfolio-project-grid .portfolio-project-card:last-child{grid-column:auto}.portfolio-projects-introduction{align-items:flex-start}}
@media(max-width:670px){.portfolio-projects{padding:16px var(--pad) 76px}.portfolio-projects-introduction{display:block;margin-bottom:21px;padding-bottom:24px}.portfolio-projects-introduction p{font-size:14px}.portfolio-projects-introduction>a{margin-top:18px}.portfolio-project-grid{grid-template-columns:1fr;gap:18px}.portfolio-project-details{min-height:138px;padding:21px 22px}.portfolio-project-details h3{font-size:24px;margin:11px 0 17px}}
@media(prefers-reduced-motion:reduce){.portfolio-project-card,.portfolio-project-image img,.q-footer31 .qf31-socials a.qf31-social-icon{transition:none!important}.portfolio-project-card:hover{translate:none}.portfolio-project-card:hover .portfolio-project-image img{transform:none}}


/* Source: /css/davidmros-v7.3.9.86.css */
/* V7.3.9.86 — performance/accessibility: no inner-page WebGL on phones. */
@media (max-width: 600px), (prefers-reduced-motion: reduce) {
  .procedural-page-hero-background canvas { display: none !important; }
}


/* Shared keyboard and reduced-motion support */
/* Keyboard access improvements — visually unchanged until focus or reduced-motion settings. */
.skip-to-content {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 12px;
  z-index: 2147483647;
  display: inline-block;
  padding: 12px 18px;
  transform: translateY(-160%);
  background: #ffffff;
  color: #111d36;
  border: 2px solid #2452ed;
  border-radius: 3px;
  font: 700 14px/1.4 system-ui, sans-serif;
  text-decoration: none;
}
.skip-to-content:focus, .skip-to-content:focus-visible {
  transform: translateY(0);
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #224eff !important;
  outline-offset: 3px;
}
#main-content { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}