/* UNOMI custom styles — dock button, liquid-glass cards.
   Single source of truth: edit here, every page updates on build. */

:root{--glass-accent:#24abff;--glass-accent2:#7adcff;--glass-ease-out:cubic-bezier(.23,1,.32,1);--glass-radius:24px}
/* Bottom nav: use the official theme's native fixed footer nav (gnav_wrapper
   + .button toggle + .fixed_contact), exactly as on unomi-jp.com. No overrides. */





/* SERVICE detail cards: restored to the official theme behaviour — each item is a
   position:sticky 100vh card and GSAP drives --scale-progress (brightness) and
   --mask-progress (clip-path reveal) on scroll. We only keep a safe, NON-important
   initial value (see below) so the first paint isn't black before GSAP inits; the
   theme's inline (GSAP) styles then take over the animation. */

/* WE WORK list (about): these rows are restyled as glass cards (.think_list>li
   above), but the theme's flat-list borders + zero gap make them collide into a
   seamed block, and the thumbnail looks lost. Give the cards breathing room,
   drop the leftover list borders, round the thumbnail, and balance the columns.
   Stays within the existing glass theme. */
.about_page .think__main .think_list li{border:none!important}
.about_page .think__main .think_list li .thumb{border-radius:12px;overflow:hidden}
.about_page .think__main .think_list li .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.about_page .think__main .think_list{display:flex;flex-direction:column;gap:16px}
/* NOTE: this theme switches layouts with the body .dt (desktop) / .mb (mobile)
   classes, NOT viewport width — using @media here created a conflict band where
   the theme's 2-col grid kept its column sizes while our fixed-width thumbnail
   overflowed onto the text (image/text overlap). Scope to .dt / .mb to match. */
/* Desktop: an editorial 2-column card — a large image on the left, and a single
   grouped content block on the right (WORK label → title → description → MORE),
   vertically centered. Fixes the old layout where "WORK 0X" was stranded far
   left and the text column was cramped. */
.dt .about_page .think__main .think_list li a{
  grid-template-columns:minmax(0,44%) minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:52px;align-content:center;align-items:start;
  padding:34px 44px;
}
.dt .about_page .think__main .think_list li .thumb{grid-column:1;grid-row:1/span 3;align-self:center;width:100%;aspect-ratio:3/2}
.dt .about_page .think__main .think_list li .num{grid-column:2;grid-row:1;align-self:end;width:auto!important;justify-items:start!important;text-align:left!important;margin-bottom:10px;white-space:nowrap}
.dt .about_page .think__main .think_list li .num br{display:none!important}
.dt .about_page .think__main .think_list li .text{grid-column:2;grid-row:2}
.dt .about_page .think__main .think_list li .text .description{margin-top:12px}
.dt .about_page .think__main .think_list li .link{grid-column:2;grid-row:3;align-self:start;justify-content:flex-start!important;margin-top:20px}
/* Mobile (.mb): the theme's 2-column grid leaves "WORK 0X" stranded on its own
   row and the thumbnail floating in a half-empty column. Re-flow as a clean
   stacked card: full-width cover image on top, then label → title → desc → MORE. */
.mb .about_page .think__main .think_list li a{display:flex!important;flex-direction:column;align-items:stretch;gap:14px;padding:18px!important}
.mb .about_page .think__main .think_list li .thumb{order:1;width:100%!important;aspect-ratio:16/10}
.mb .about_page .think__main .think_list li .num{order:2;margin:0;width:100%!important;justify-items:start!important;text-align:left!important}
.mb .about_page .think__main .think_list li .text{order:3;padding:0!important}
.mb .about_page .think__main .think_list li .text .description{padding-left:0!important}
.mb .about_page .think__main .think_list li .link{order:4;position:static!important;width:100%;display:flex!important;justify-content:flex-end!important}

/* ===== WE WORK card — UI-kit polish (surface, hover accent, image zoom, arrow) =====
   Tasteful lift that stays within the existing accent (--glass-accent #24abff)
   and glass aesthetic; applies to both breakpoints. */
.about_page .think__main .think_list li{
  background:linear-gradient(158deg,rgba(255,255,255,.78),rgba(255,255,255,.46));
  border:1px solid rgba(18,25,46,.07)!important;
  box-shadow:0 8px 26px -16px rgba(18,25,46,.22),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .5s var(--glass-ease-out),box-shadow .5s var(--glass-ease-out),border-color .4s;
}
.about_page .think__main .think_list li:hover{
  transform:translateY(-3px);
  border-color:rgba(36,171,255,.4)!important;
  box-shadow:0 22px 44px -22px rgba(36,171,255,.42),inset 0 1px 0 rgba(255,255,255,.85);
}
/* Thumbnail: gentle zoom on hover */
.about_page .think__main .think_list li .thumb{box-shadow:inset 0 0 0 1px rgba(18,25,46,.05)}
.about_page .think__main .think_list li .thumb img{transition:transform .6s var(--glass-ease-out)}
.about_page .think__main .think_list li a:hover .thumb img{transform:scale(1.06)}
/* WORK 0X label: refined accent */
.about_page .think__main .think_list li .num{color:var(--glass-accent);font-weight:500;letter-spacing:.14em}
/* MORE: label brightens + arrow slides on hover */
.about_page .think__main .think_list li .link .label{transition:color .3s}
.about_page .think__main .think_list li .link .-arrow1{transition:transform .35s var(--glass-ease-out)}
.about_page .think__main .think_list li a:hover .link .-arrow1{transform:translateX(7px)}

/* Fix: service_list items invisible due to missing CSS variable initial values.
   The theme JS sets --scale-progress and --mask-progress via ScrollTrigger,
   but on direct page load (not via barba transition), the JS may not init them
   before first paint, causing brightness(0) = black and clip-path mask. */
/* Safe first-paint defaults (NON-important so GSAP's inline styles win and animate).
   --scale-progress:1 -> brightness(1) visible; --mask-progress:0 -> clip-path inset(0). */
.service_list li { --scale-progress: 1; --mask-progress: 0; }

/* ============================================================
   GLOBAL FIX: Scroll-animation initial states
   
   The theme relies on GSAP ScrollTrigger to reveal elements by
   animating CSS custom properties (--scale-progress, --mask-progress)
   and opacity. When a page is loaded directly (not via barba
   transition), these properties may not have initial values,
   causing content to be invisible.
   
   Set safe defaults so content is visible before JS kicks in.
   ============================================================ */

/* Service page: nav items start invisible */
.service_page .summary__main .lnav_list li {
  opacity: 1 !important;
}

/* Service page: stalker element */
.service_page .service__main .stalker {
  opacity: 1 !important;
}

/* About page: photo starts invisible */
.about_page .summary__foot .photo {
  opacity: 1 !important;
}

/* Contact CTA: starts invisible */
.-contact_cta .contact_cta__main {
  opacity: 1 !important;
}

/* All pages: ensure scrollInFade elements are visible by default.
   The theme JS uses setScrollInFade() which checks opacity==="0"
   before animating. We keep opacity:1 and let JS override when ready. */
[data-gradient-method="inview"] {
  opacity: 1 !important;
}

/* Footer nav reliability (static export):
   At the page bottom the theme adds .auto_open, which hides the collapsed
   button and reveals the nav via .scroller transform/opacity. The theme's
   GSAP sets an inline transform on .scroller that overrides the reveal CSS,
   so sometimes the content stays shifted out of view while the button is
   hidden -> the footer appears to vanish. Force the revealed state in both
   open + auto_open so the footer content always renders. */
.gnav .scroller {
  opacity: 1 !important;
}
.gnav_wrapper.open .gnav .scroller,
.gnav_wrapper.auto_open .gnav .scroller {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}


/* (Removed) The former overrides here flattened the official sticky-stack scroll
   effect into a plain flex column and froze the GSAP progress vars with !important.
   They are gone so the service page now matches unomi-jp.com's scroll animation. */

/* SERVICE item image position + text centering (desktop).
   Our vendored style.css copy predates these two rules that unomi-jp.com's live
   style.css carries. Without them the theme's `.photo{margin-top:auto}` shoves the
   image to the very bottom of the 100vh sticky card -> a huge gap under the heading,
   and because the image then sits below the fold its lazy-load never fires so it
   renders 0x0 (appears missing). These restore the official layout: image sits just
   under the heading, description block vertically centered. Matches unomi-jp.com. */
@media (min-width: 769px) {
  .service_page .service__main .service_list li a > figure.photo { margin-top: 1rem !important; }
  .service_page .service__main .service_list li a > .content { align-self: center; }
}

/* ============================================================
   Dock hover panel — expands upward from the dock on hover
   Shows footer navigation without scrolling to the bottom
   ============================================================ */


















@media (max-width: 760px) {
  
  
  
}




.dock, .dock-panel { display: none !important; }