body,.section{background:var(--color-surface-dark)}.intro h2,.serve h2,.why h2,.work h2,.process h2{font-family:var(--font-body);font-weight:520;letter-spacing:-.065em}.intro h2 em,.serve h2 em,.why h2 em,.work h2 em,.process h2 em{font-family:var(--font-brand);font-style:italic;color:var(--color-brand-light)}.intro-grid p{font-family:var(--font-body);color:#aeb3bd}.serve{padding-top:25px}.serve-head{display:flex;justify-content:space-between;align-items:end;margin:75px 0 44px}.serve-head h2{font-size:clamp(52px,6.4vw,98px);line-height:.85;margin:0}.serve-head>p{font:400 14px/1.7 var(--font-body);color:#999fab;max-width:390px}.service-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.glass-card{--mx:50%;--my:50%;position:relative;min-height:355px;padding:18px;border:1px solid #ffffff18;border-radius:22px;background:linear-gradient(145deg,#ffffff10,#ffffff06);backdrop-filter:blur(18px);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s,border-color .3s}.glass-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(180px circle at var(--mx) var(--my),#7b9bff 0,#456ee6 22%,transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}.glass-card:after{content:"";position:absolute;width:230px;height:230px;left:calc(var(--mx) - 115px);top:calc(var(--my) - 115px);background:radial-gradient(circle,#315ac72b,transparent 68%);opacity:0;transition:opacity .25s;pointer-events:none}.glass-card:hover{transform:translateY(-5px);border-color:#ffffff25}.glass-card:hover:before,.glass-card:hover:after{opacity:1}.glass-icon{display:flex;justify-content:space-between}.glass-icon>span{width:54px;height:54px;border:1px solid #ffffff26;border-radius:15px;background:#ffffff0b;display:grid;place-items:center;font:400 23px var(--font-body)}.glass-icon small{font:600 9px var(--font-body);color:#727986}.glass-card h3{font:500 24px/1.04 var(--font-body);margin:0 0 15px;letter-spacing:-.04em}.glass-card p{font:400 12px/1.65 var(--font-body);color:#949aa5;margin:0}.glass-card>a{font:600 9px var(--font-body);letter-spacing:.13em;color:#b4bac5}.why{background:var(--color-surface-dark-deep);color:#f4f1ea}.why .label{border-color:#252525}.why-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:9%;align-items:center;margin-top:80px}.why-layout>div:last-child>p{font:400 15px/1.75 var(--font-body);color:#a4a9b3}.why h2{font-size:clamp(52px,6vw,90px);line-height:.88;margin:0 0 40px}.monster-mark{height:500px;position:relative;background:var(--color-brand);border-radius:47% 47% 7% 7%;clip-path:polygon(0 15%,10% 0,35% 0,43% 12%,57% 12%,65% 0,90% 0,100% 15%,100% 100%,0 100%)}.monster-mark:before,.monster-mark:after{content:"";position:absolute;top:43%;width:26%;aspect-ratio:1;border:18px solid #fff;border-radius:50%}.monster-mark:before{left:16%}.monster-mark:after{right:16%}.monster-mark span{position:absolute;font:700 68px var(--font-body);color:var(--color-brand-light)}.monster-mark span:nth-child(1){top:-16%;left:7%}.monster-mark span:nth-child(2){top:-28%;left:45%}.monster-mark span:nth-child(3){top:-15%;right:6%}.why-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #292929;margin-top:55px}.why-list article{padding:23px 22px 0 0;border-right:1px solid #292929}.why-list article+article{padding-left:22px}.why-list article:last-child{border:0}.why-list b{font:600 9px var(--font-body);color:var(--color-brand-light)}.why-list h3{font:500 17px var(--font-body);margin:32px 0 12px}.why-list p{font:400 12px/1.65 var(--font-body);color:#8f95a0}.process{background:var(--color-surface-dark)}.steps h3{font-family:var(--font-body);font-size:29px;font-weight:500}.steps p,.work-copy p{font-family:var(--font-body)}@media(max-width:1000px){.service-cards{grid-template-columns:1fr 1fr}.why-layout{grid-template-columns:1fr}.monster-mark{height:350px;width:320px;margin:auto}}@media(max-width:760px){.serve-head{display:block;margin:55px 0 34px}.serve-head>p{margin-top:25px}.service-cards{grid-template-columns:1fr}.glass-card{min-height:300px}.why-layout{gap:55px}.monster-mark{height:285px;width:255px}.why-list{grid-template-columns:1fr}.why-list article,.why-list article+article{padding:22px 0;border-right:0;border-bottom:1px solid #292929}}
footer.footer{background:var(--color-surface-dark);align-items:flex-start;padding:55px 0 65px}footer.footer>div{display:flex;flex-direction:column;gap:12px}footer.footer>div:first-child{max-width:270px}footer.footer img{margin-bottom:10px}footer.footer a{color:#aab0bb}footer.footer>span{align-self:flex-end}
.intro{text-align:center}.intro h2,.intro h2 em{font-family:var(--font-body)!important;font-style:normal!important;color:#fff!important}.intro-grid{margin:0 auto;max-width:920px;text-align:center;border-top:0;padding-top:0;gap:8%}.serve-head{display:block;text-align:center;max-width:900px;margin:75px auto 48px}.serve-head h2,.serve-head h2 em{font-family:var(--font-body)!important;font-style:normal!important;color:#fff!important}.serve-head>p{max-width:560px;margin:24px auto 0}.glass-card{text-align:center;align-items:center;padding:28px 22px}.glass-icon{width:100%;display:block;position:relative}.glass-icon>span{width:94px;height:94px;margin:0 auto;font-size:39px;border-radius:25px}.glass-icon small{position:absolute;right:0;top:0;font-size:14px}.glass-card>div:nth-child(2){display:flex;flex-direction:column;align-items:center}.why-layout{display:block;margin-top:80px;text-align:center}.why-layout h2,.why-layout h2 em{font-family:var(--font-body)!important;font-style:normal!important;color:#fff!important}.why-layout>p{max-width:720px;margin:28px auto 0}.why-list{margin-top:65px;text-align:center}.why-list b{display:block;font-size:36px;line-height:1;color:#fff}.why-list h3{margin-top:26px}.process h2,.process h2 em{font-family:var(--font-body)!important;font-style:normal!important;color:#fff!important}.cta{display:none}
.intro-grid{display:flex!important;flex-direction:column;align-items:center;gap:24px!important}.intro-grid>p,.intro-grid>div{max-width:760px}.intro-grid div>span{margin:8px 0 12px}.serve-head>p{max-width:none!important;white-space:nowrap}.process h2{font-size:clamp(52px,6vw,90px)!important;text-align:center}.steps{text-align:center}.steps article,.steps article+article{padding:32px 22px;display:flex;flex-direction:column;align-items:center}.steps span{font-size:36px!important;line-height:1;color:#fff!important}.steps h3{margin:26px 0 14px}.work{display:none!important}.side,.hint{display:none!important}@media(max-width:760px){.serve-head>p{white-space:normal}.process h2{font-size:clamp(44px,12vw,72px)!important}.steps span{font-size:30px!important}}
.navlinks a.active{background:#fff;color:#111}

/* Shared black-blue glass language */
html,body{overflow-x:hidden}body{background:radial-gradient(circle at 12% 28%,rgba(19,59,169,.19),transparent 28%),radial-gradient(circle at 88% 72%,rgba(19,59,169,.15),transparent 32%),#000;background-attachment:fixed}
.section.serve,.section.why,.section.process{position:relative;background:transparent}
.section.serve,.why>.shell,.process>.shell{border:1px solid rgba(255,255,255,.085);border-radius:34px;background:linear-gradient(145deg,rgba(19,59,169,.12),rgba(255,255,255,.025) 48%,rgba(19,59,169,.065));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 35px 110px rgba(19,59,169,.1);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.section.serve{width:min(calc(100% - 64px),1400px);margin:74px auto;padding:74px 32px}
.section.why,.section.process{padding:74px 0}.why>.shell,.process>.shell{width:min(calc(100% - 64px),1400px);padding:72px 42px}
@media(max-width:760px){.section.serve{width:calc(100% - 28px);margin:36px 14px;padding:55px 16px}.section.why,.section.process{padding:36px 0}.why>.shell,.process>.shell{width:calc(100% - 28px);padding:54px 18px;border-radius:25px}}
.section.serve,.why>.shell,.process>.shell{--mx:50%;--my:50%;position:relative;isolation:isolate;overflow:hidden}
.section.serve:after,.why>.shell:after,.process>.shell:after{content:"";position:absolute;z-index:5;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(280px circle at var(--mx) var(--my),#9aafff 0,var(--color-brand-hover) 24%,transparent 68%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}.section.serve:hover:after,.why>.shell:hover:after,.process>.shell:hover:after{opacity:1}
@media(max-width:760px){.section.serve:after,.why>.shell:after,.process>.shell:after{opacity:.4;background:radial-gradient(190px circle at 50% 0,var(--color-brand-hover) 0,transparent 72%)}}

/* Alternating timber landscape + stronger glassmorphism */
.section.serve,.section.why,.section.process{
  width:100%;
  margin:0;
  padding:96px 0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--color-surface-dark);
}

/* Service card numbering: align consistently to the top-left. */
.service-cards .glass-icon small {
  left: 0 !important;
  right: auto !important;
}

@media (max-width: 760px) {
  .service-cards .glass-icon small {
    left: 1px !important;
    right: auto !important;
  }
}
.section.serve{border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.section.serve::before,.section.why::before,.section.process::before{display:none}
.section-landscape{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
.landscape-base,.landscape-bloom{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% auto;will-change:mask-position,-webkit-mask-position}
.landscape-base{z-index:0;background-image:url('public/assets/little-monster-timber-v3.webp');filter:saturate(.78) brightness(.72) contrast(1.08);opacity:1}
.landscape-bloom{z-index:1;background-image:url('public/assets/little-monster-timber-v3-bloom-alpha.webp');filter:saturate(1.1) brightness(1.05);opacity:0;transition:opacity .22s;-webkit-mask-image:radial-gradient(circle 260px at var(--bx,-999px) var(--by,-999px),#000 0,#000 40%,#000b 60%,#0006 75%,#0002 88%,transparent 100%);mask-image:radial-gradient(circle 260px at var(--bx,-999px) var(--by,-999px),#000 0,#000 40%,#000b 60%,#0006 75%,#0002 88%,transparent 100%)}
.section.serve:hover .landscape-bloom,.section.why:hover .landscape-bloom,.section.process:hover .landscape-bloom{opacity:1}
.section.serve .landscape-base,.section.serve .landscape-bloom,.section.why .landscape-base,.section.why .landscape-bloom,.section.process .landscape-base,.section.process .landscape-bloom{background-position:center 52%;transform:none}
.section.serve .landscape-base,.section.process .landscape-base{background-image:url('public/assets/little-monster-timber-v3-mirrored.webp')}
.section.serve .landscape-bloom,.section.process .landscape-bloom{background-image:url('public/assets/little-monster-timber-v3-bloom-mirrored-alpha.webp')}
.section-landscape::after{display:none}
.section.serve::before,.section.why::before,.section.process::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:-9%;
  background-image:url('public/assets/little-monster-timber-v3.webp');
  background-repeat:no-repeat;
  background-size:100% auto;
  filter:brightness(.72) saturate(.78) contrast(1.08);
  opacity:.9;
  pointer-events:none;
}
.section.serve::after,.section.why::after,.section.process::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 28%,transparent 72%,rgba(0,0,0,.16));
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.section.serve::before,.section.process::before{background-position:center 52%;transform:scaleY(-1)}
.section.why::before{background-position:center 52%}
.section.serve{margin-top:112px}

.serve>.shell,.why>.shell,.process>.shell{
  --mx:50%;
  --my:50%;
  width:min(calc(100% - 64px),1400px);
  padding:72px 42px;
  position:relative;
  z-index:2;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(218,228,255,.15);
  border-radius:34px;
  background:
    radial-gradient(500px circle at var(--mx) var(--my),rgba(90,126,228,.1),transparent 68%),
    linear-gradient(145deg,rgba(13,29,57,.35),rgba(3,7,15,.27) 52%,rgba(19,59,169,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(255,255,255,.035),0 35px 110px rgba(0,0,0,.42);
  backdrop-filter:blur(11px) saturate(1.12);
  -webkit-backdrop-filter:blur(11px) saturate(1.12);
  transition:background-color .35s,backdrop-filter .35s,-webkit-backdrop-filter .35s;
}
.serve>.shell:hover,.why>.shell:hover,.process>.shell:hover{
  background-color:rgba(9,18,35,.28);
  backdrop-filter:blur(20px) saturate(1.24);
  -webkit-backdrop-filter:blur(20px) saturate(1.24);
}
.serve>.shell::after,.why>.shell::after,.process>.shell::after{
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:radial-gradient(300px circle at var(--mx) var(--my),#c7d4ff 0,var(--color-brand-highlight) 25%,transparent 69%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .25s;
  pointer-events:none;
}
.serve>.shell:hover::after,.why>.shell:hover::after,.process>.shell:hover::after{opacity:1}

.shared-footer{
  position:relative;
  isolation:isolate;
  border-top-color:rgba(167,190,255,.2);
  background:linear-gradient(145deg,rgba(11,24,48,.56),rgba(0,0,0,.74));
  box-shadow:0 -24px 90px rgba(19,59,169,.08);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.shared-footer::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:50%;
  top:0;
  bottom:0;
  width:100vw;
  transform:translateX(-50%) scale(1.03);
  background:url('public/assets/little-monster-cover-v2.webp') right 47%/190% auto no-repeat;
  filter:brightness(.2) saturate(.55);
  opacity:.42;
}
.shared-footer::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:0;
  bottom:0;
  width:100vw;
  transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(4,11,25,.58),rgba(0,0,0,.9));
}

@media(max-width:760px){
  .section.serve,.section.why,.section.process{padding:46px 0}
  .section.serve{margin-top:72px}
  .section-landscape,.section.serve::after,.section.why::after,.section.process::after{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%)}
  .section.serve::before,.section.why::before,.section.process::before{inset:-5%;background-size:auto 116%;opacity:.62}
  .landscape-base,.landscape-bloom{background-size:auto 102%}
  .landscape-bloom{opacity:.28;-webkit-mask-image:radial-gradient(circle 210px at 50% 48%,#000 0,#0009 58%,transparent 100%);mask-image:radial-gradient(circle 210px at 50% 48%,#000 0,#0009 58%,transparent 100%)}
  .serve>.shell,.why>.shell,.process>.shell{width:calc(100% - 28px);padding:54px 18px;border-radius:25px}
  .serve>.shell::after,.why>.shell::after,.process>.shell::after{opacity:.38;background:radial-gradient(190px circle at 50% 0,var(--color-brand-highlight) 0,transparent 72%)}
}

/* Clean dark frosted-glass treatment */
.serve>.shell,.why>.shell,.process>.shell{
  width:min(78vw,1120px);
  background:linear-gradient(145deg,rgba(7,16,30,.31),rgba(0,0,0,.17) 52%,rgba(8,20,47,.25));
  border-color:rgba(221,231,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(255,255,255,.03),0 26px 85px rgba(0,0,0,.3);
  backdrop-filter:blur(7px) saturate(1.04);
  -webkit-backdrop-filter:blur(7px) saturate(1.04);
}
.serve>.shell::before,.why>.shell::before,.process>.shell::before{display:none}
.serve>.shell>*,.why>.shell>*,.process>.shell>*{position:relative;z-index:1}
.serve>.shell:hover,.why>.shell:hover,.process>.shell:hover{
  background-color:transparent;
  backdrop-filter:blur(9px) saturate(1.08);
  -webkit-backdrop-filter:blur(9px) saturate(1.08);
}

.glass-card{
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  background-color:transparent;
  border-color:rgba(255,255,255,.095);
  box-shadow:none;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.glass-card:hover{background-color:rgba(19,59,169,.055);border-color:rgba(255,255,255,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

@media(max-width:760px){
  .serve>.shell,.why>.shell,.process>.shell{width:calc(100% - 28px);backdrop-filter:blur(6px) saturate(1.02);-webkit-backdrop-filter:blur(6px) saturate(1.02)}
}

/* The visible hero title is the page's semantic H1; keep its original layout. */
.cover>.title{margin:0}
/* Keep the cursor-reveal layer perfectly registered with the base during intro zoom. */
.cover .scene.reveal {
  animation: zoom 1.8s cubic-bezier(.16, 1, .3, 1) both;
}
/* Keep every text element in the three main glass panels consistently white. */
.section.serve > .shell,
.section.serve > .shell *,
.section.why > .shell,
.section.why > .shell *,
.section.process > .shell,
.section.process > .shell * {
  color: #fff !important;
}
/* Service cards no longer have footer links; keep their remaining content balanced. */
.service-cards .glass-card {
  justify-content: flex-start;
}

.service-cards .glass-card > div:nth-child(2) {
  margin: auto 0;
}

/* Warm brand canvas on the homepage; dark is reserved for imagery and glass. */
html, body { background:var(--color-page-bg); }
.section.serve, .section.why, .section.process { background:var(--color-page-bg); }

body .shared-footer {
  background:var(--color-page-bg);
  color: #57534c;
  border-top-color: rgba(16, 16, 16, .16);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body .shared-footer::before, body .shared-footer::after { display: none; }
body .shared-footer a { color:var(--color-text); border-bottom-color: rgba(23, 23, 23, .45); }
body .shared-footer .footer-brand img { aspect-ratio: 1142 / 337; }

/* Borderless, two-row client carousel inspired by editorial studio layouts. */
.clients {
  position: relative;
  z-index: 3;
  padding: clamp(68px, 7vw, 96px) 32px clamp(76px, 8vw, 108px);
  background:var(--color-page-bg);
  color:var(--color-text);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}
.clients-inner { width: min(100%, 1180px); margin: 0 auto; }
.clients-head { max-width: 760px; margin: 0 auto clamp(46px, 5vw, 68px); text-align: center; }
.clients-kicker {
  margin: 0 0 12px;
  color: #66615a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.clients-title {
  margin: 0 auto;
  color:var(--color-text);
  font-size: clamp(44px, 5.4vw, 74px);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.06em;
}
.clients-note { max-width: 520px; margin: 18px auto 0; color: #5f5b55; font-size: 14px; line-height: 1.55; }
.clients-gallery { position: relative; width: min(100%, 1040px); margin: 0 auto; }
.client-viewport { overflow: hidden; }
.client-track { display: flex; align-items: stretch; transition: transform .55s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.client-page {
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(2, 124px);
  column-gap: clamp(18px, 2.8vw, 40px);
  row-gap: 26px;
}
.client-logo {
  grid-column: span 2;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-page:nth-child(2) .client-logo:nth-child(6) { grid-column: 1 / span 2; }
.client-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 188px;
  object-fit: contain;
  filter: saturate(.96);
  transition: transform .25s ease, filter .25s ease;
}
.client-logo:hover img { transform: scale(1.035); filter: saturate(1.08); }
.client-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color:var(--color-text);
  font: 300 29px/1 Inter, sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .2s, transform .2s;
}
.client-arrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.12); }
.client-arrow:disabled { opacity: .2; cursor: default; }
.client-arrow:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 50%; }
.client-prev { left: -54px; }
.client-next { right: -54px; }
.client-pages { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.client-pages span { width: 18px; height: 2px; background: rgba(23, 23, 23, .22); transition: width .25s, background .25s; }
.client-pages span.is-active { width: 36px; background: #171717; }

@media (max-width: 1160px) {
  .clients-gallery { width: calc(100% - 80px); }
  .client-prev { left: -42px; }
  .client-next { right: -42px; }
}
@media (max-width: 760px) {
  .clients { padding: 60px 18px 70px; }
  .clients-head { margin-bottom: 38px; }
  .clients-note { font-size: 13px; }
  .clients-gallery { width: 100%; padding-bottom: 44px; }
  .client-page { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, 102px); gap: 14px 12px; }
  .client-page:nth-child(2) .client-logo:nth-child(6) { grid-column: span 2; }
  .client-logo { padding: 5px; }
  .client-logo img { max-width: 164px; }
  .client-arrow { top: auto; bottom: 0; transform: none; }
  .client-arrow:hover:not(:disabled) { transform: scale(1.1); }
  .client-prev { left: calc(50% - 52px); }
  .client-next { right: calc(50% - 52px); }
  .client-pages { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .client-track, .client-logo img, .client-arrow { transition: none; }
}

/* Final warm-canvas refinements */
html,
html body,
html body .cover,
html body .section,
html body .clients,
html body .shared-footer {
  background-color:var(--color-page-bg);
}
html,
html body {
  background:var(--color-page-bg) !important;
  background-image: none !important;
}
html body .cover,
html body .section,
html body .clients,
html body .shared-footer {
  background-color:var(--color-page-bg) !important;
}
.cover .scene.base {
  background-image: url('public/assets/little-monster-cover-original-mascot-dim-paper.png?v=20260715-7');
  filter: none;
}
.cover .scene.reveal {
  background-image: url('public/assets/little-monster-cover-vegetation-bloom-paper.png?v=20260715-7');
  filter: none;
}
.cover .scene {
  background-size: auto 106%;
  background-position: center 52%;
  animation: none;
}
.cover .shade { background: none; }
.cover .title {
  top: 11.5%;
  line-height: .92;
}
.cover .title span {
  color: #111;
  font-family:var(--font-brand);
  font-style: normal;
  font-size: clamp(52px, 7.2vw, 112px);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.cover .title strong {
  color: #111;
  margin-top: clamp(3px, .45vw, 7px);
  font-family:var(--font-body);
  font-size: clamp(24px, 3vw, 46px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.045em;
}

/* Desktop hero composition: keep the complete sculptural artwork visible and
   leave a stable text-safe zone below the centred navigation. */
@media (min-width: 761px) {
  html:root {
    --lm-nav-width: clamp(372px, 27vw, 430px);
  }
  html body .cover {
    height: clamp(760px, 92dvh, 1000px);
    min-height: 760px;
  }
  .cover .title {
    top: clamp(96px, 11.5vh, 132px);
  }
  .cover .title strong {
    margin-top: clamp(10px, .8vw, 15px);
  }
  .cover .scene {
    background-size: min(90vw, 1500px) auto;
    background-position: center clamp(165px, 19vh, 210px);
  }
}
.cover .navlinks {
  border-color: rgba(19,59,169,.25);
  background: rgba(251,244,231,.74);
  box-shadow: 0 8px 30px rgba(19,59,169,.08);
}
.cover .navlinks a, .cover .contact { color:var(--color-text); }
.cover .navlinks a:hover, .cover .navlinks a.active { background:var(--color-brand); color: #fff; }

/* Keep glass static; only the timber bloom follows the pointer. */
.serve > .shell, .why > .shell, .process > .shell {
  --line: rgba(255,255,255,.48);
  background: linear-gradient(145deg, rgba(10,28,52,.48), rgba(4,13,28,.42) 52%, rgba(19,59,169,.28));
  border-color: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.serve > .shell:hover, .why > .shell:hover, .process > .shell:hover {
  background-color: transparent;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.glass-card::after { display: none; }
.glass-card::before,
.serve > .shell::after, .why > .shell::after, .process > .shell::after {
  background: radial-gradient(280px circle at var(--mx) var(--my), #fff 0, rgba(255,255,255,.9) 27%, transparent 68%) !important;
}
.glass-card, .glass-icon > span { border-color: rgba(255,255,255,.34); }
.why-list { border-top-color: rgba(255,255,255,.48); }
.why-list article { border-right-color: rgba(255,255,255,.48); }

/* Keep the warm space between panels clean and show each complete timber silhouette. */
.section.serve::before, .section.why::before, .section.process::before,
.section.serve::after, .section.why::after, .section.process::after {
  display: none !important;
}
.section-landscape {
  inset: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.section.serve .landscape-base, .section.serve .landscape-bloom,
.section.why .landscape-base, .section.why .landscape-bloom,
.section.process .landscape-base, .section.process .landscape-bloom {
  background-size: auto 112%;
  background-position: center;
  transform: none;
}
.landscape-base {
  background-image: url('public/assets/little-monster-timber-complete-alpha.png');
  filter: none;
}
.landscape-bloom {
  background-image: url('public/assets/little-monster-timber-complete-bloom-alpha.png');
  filter: none;
}
.section.serve .landscape-base, .section.process .landscape-base {
  background-image: url('public/assets/little-monster-timber-complete-mirrored-alpha.png');
}
.section.serve .landscape-bloom, .section.process .landscape-bloom {
  background-image: url('public/assets/little-monster-timber-complete-bloom-mirrored-alpha.png');
}

.clients-title {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(26px, 4.35vw, 58px);
  line-height: 1;
}
.clients-gallery { width: min(100%, 1100px); }
.client-page { grid-template-rows: repeat(2, 136px); }
.client-logo img { max-width: 210px; }
.client-logo img[src$="/sdcs.webp"], .client-logo img[src$="/idcs.webp"] { width: 108%; max-width: 224px; }

html body .shared-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 58px max(32px, calc((100vw - 1400px) / 2)) 68px;
}

@media (max-width: 760px) {
  .cover .scene {
    background-size: auto 76%;
    background-position: center 54%;
  }
  .section.serve .landscape-base, .section.serve .landscape-bloom,
  .section.why .landscape-base, .section.why .landscape-bloom,
  .section.process .landscape-base, .section.process .landscape-bloom {
    background-size: auto 52%;
  }
  .cover .title { top: 13%; }
  .cover .title span { font-size: clamp(42px, 12.5vw, 62px); }
  .cover .title strong {
    margin-top: 4px;
    font-size: clamp(22px, 6.8vw, 32px);
  }
  .clients-title { font-size: clamp(19px, 5.2vw, 26px); letter-spacing: -.045em; }
  .client-page { grid-template-rows: repeat(5, 110px); }
  .client-logo img { max-width: 178px; }
  html body .shared-footer { padding: 46px 16px 55px; }
  .why-list article, .why-list article + article { border-bottom-color: rgba(255,255,255,.48); }
}

/* Mobile composition: compact editorial grids instead of long single-card stacks. */
@media (max-width: 760px) {
  .service-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .service-cards .glass-card {
    min-height: 218px;
    padding: 12px 8px;
    border-radius: 16px;
  }
  .service-cards .glass-card:nth-child(4) { grid-column: 2; }
  .service-cards .glass-icon > span {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    font-size: 25px;
  }
  .service-cards .glass-icon small {
    right: 1px;
    font-size: 9px;
  }
  .service-cards .glass-card h3 {
    margin-bottom: 9px;
    font-size: 12px;
    line-height: 1.08;
  }
  .service-cards .glass-card p {
    font-size: 8.5px;
    line-height: 1.42;
  }

  .why-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 42px;
  }
  .why-list article,
  .why-list article + article {
    min-width: 0;
    padding: 20px 7px;
    border-right: 1px solid rgba(255,255,255,.48);
    border-bottom: 0;
    text-align: center;
  }
  .why-list article:last-child { border-right: 0; }
  .why-list b { font-size: 23px; }
  .why-list h3 {
    margin: 17px 0 9px;
    font-size: 11px;
    line-height: 1.2;
  }
  .why-list p {
    font-size: 8.5px;
    line-height: 1.48;
  }

  .steps article,
  .steps article + article {
    justify-content: flex-start;
    align-items: center;
    padding: 25px 12px;
    text-align: center;
  }
  .steps span,
  .steps h3,
  .steps p {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* Continuous process divider and desktop-like client rows on mobile. */
@media (max-width: 760px) {
  .steps { position: relative; }
  .steps::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(255,255,255,.48);
    pointer-events: none;
  }
  .steps::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(255,255,255,.48);
    pointer-events: none;
  }

  .client-page {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, 92px);
    gap: 14px 7px;
  }
  .client-page:nth-child(2) .client-logo:nth-child(6) { grid-column: auto; }
  .client-page:nth-child(2) .client-logo:nth-child(n+6) { transform: none; }
  .client-logo {
    grid-column: span 1;
    padding: 2px;
  }
  .client-logo img,
  .client-logo img[src$="/sdcs.webp"],
  .client-logo img[src$="/idcs.webp"] {
    width: 100%;
    max-width: 72px;
    max-height: 46px;
    object-fit: contain;
  }
}

/* Final mobile grid refinements. */
@media (max-width: 760px) {
  .service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .service-cards .glass-card {
    min-height: 245px;
    padding: 16px 11px;
  }
  .service-cards .glass-card:nth-child(4) { grid-column: auto; }
  .service-cards .glass-card h3 { font-size: 15px; }
  .service-cards .glass-card p {
    font-size: 9.5px;
    line-height: 1.5;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
    border-top: 0;
  }
  .steps article,
  .steps article + article,
  .steps article:last-child {
    min-height: 210px;
    padding: 24px 10px;
    justify-content: flex-start;
    align-items: center;
    border: 0;
    text-align: center;
  }
  .steps span,
  .steps h3,
  .steps p {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* Premium process-panel polish: quieter image, refined rules and Inter throughout. */
.process .landscape-base {
  filter: brightness(.68) saturate(.82) blur(1px);
}
.process .landscape-bloom {
  filter: brightness(.82) saturate(.92) blur(.6px);
}
.process .steps,
.process .steps * {
  font-family:var(--font-body) !important;
}
.process .steps {
  border-top: 1px solid rgba(255,255,255,.48) !important;
}
.process .steps article,
.process .steps article + article {
  border-right: 1px solid rgba(255,255,255,.48) !important;
}
.process .steps article:last-child {
  border-right: 0 !important;
}

@media (max-width: 760px) {
  .process .steps {
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.48) !important;
  }
  .process .steps article,
  .process .steps article + article,
  .process .steps article:last-child {
    border: 0 !important;
  }
  .process .steps::before,
  .process .steps::after {
    background: rgba(255,255,255,.48);
  }
  .process .steps::before {
    height: 1px;
  }
  .process .steps::after {
    left: calc(50% - .5px);
    width: 1px;
  }
  .process .steps article,
  .process .steps article + article,
  .process .steps article:last-child {
    min-height: 224px;
    padding: 30px 13px;
    justify-content: flex-start;
  }
  .process .steps span {
    font-size: 29px !important;
    line-height: 1;
  }
  .process .steps h3 {
    margin: 28px 0 17px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.035em;
  }
  .process .steps p {
    max-width: 145px;
    margin: 0 auto;
    font-size: 11px;
    line-height: 1.62;
  }
}