/* ===== v28.9: Ubuntu typography, circle markers, echo side feather, mobile nav dedupe, seamless dark glass, real fade-out exit, self-blurring dark glass, work glass, See-more resolve, toggle icons, responsive ===== */

/* ENTER: content fades + scales in WHILE the veil is already leaving , overlapped, flowy */
@media (prefers-reduced-motion: no-preference){
  main,header.hero,footer,.section,.pgsec,.clients{animation:laV28In .8s cubic-bezier(.22,.61,.36,1) .06s both}
  main,header.hero,footer,.clients{animation-name:laV28InT}
  #pageVeil{animation:laVeilThrough .95s cubic-bezier(.65,.05,.36,1) .18s forwards}
}
@keyframes laV28In{from{opacity:0}}
@keyframes laV28InT{from{opacity:0;transform:translate3d(0,14px,0) scale(.975)}}
/* EXIT: content eases 100→0 slowly with a gentle scale-out, overlapping the glass slide */
html.la-exit main,html.la-exit header.hero,html.la-exit footer,
html.la-exit .section,html.la-exit .pgsec,html.la-exit .clients{
  opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1)}
html.la-exit main,html.la-exit header.hero,html.la-exit footer,html.la-exit .clients{
  transform:translate3d(0,10px,0) scale(.97);
  transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}

/* WORK-SECTION GLASS: own compositing surface + readable fallback (both themes) */
.work-wrap::after{transform:translateZ(0)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .work-wrap::after{background:linear-gradient(to bottom,rgba(24,22,19,0) 8%,var(--paper) 68%,var(--paper))}
  html[data-theme="light"] .work-wrap::after{background:linear-gradient(to bottom,rgba(247,246,242,0) 8%,var(--paper) 68%,var(--paper))}
  #pageVeil{background:var(--paper);opacity:.97}
  html:not([data-theme="light"]) .glassmat{background:rgba(30,28,24,.94)}
  html[data-theme="light"] .glassmat{background:rgba(255,255,255,.94)}
  html:not([data-theme="light"]) #nav{background:rgba(24,22,19,.92)}
  html[data-theme="light"] #nav{background:rgba(247,246,242,.92)}
}

/* SEE MORE feather: resolve fully to paper at the wrap edge (no clipped blur band),
   then a below-wrap echo dissolves paper back into the page so no rectangle survives */
html:not([data-theme="light"]) .work-wrap::after{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  /* horizontal feather: the tint dissolves before it reaches the wrap sides,
     so no vertical line survives at the left/right edges */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  background:linear-gradient(to bottom,
    rgba(24,22,19,0) 0%,
    rgba(24,22,19,.28) 30%,
    rgba(24,22,19,.6) 55%,
    rgba(24,22,19,.9) 80%,
    var(--paper) 95%,
    var(--paper) 100%)}
/* dark: the glass lives on the cards, not on an overlay - veiled cards blur
   themselves, so there is no backdrop-filter boundary left to hard-cut */
html:not([data-theme="light"]) .work-wrap::after{height:520px}
html:not([data-theme="light"]) .work-wrap:not(.expanded) .work-grid .card:not(:first-child){
  filter:blur(16px) saturate(.85) brightness(.72)!important;
  opacity:.55;
  -webkit-mask-image:radial-gradient(105% 105% at 50% 50%,#000 50%,rgba(0,0,0,.5) 72%,transparent 95%);
  mask-image:radial-gradient(105% 105% at 50% 50%,#000 50%,rgba(0,0,0,.5) 72%,transparent 95%)}
html:not([data-theme="light"]) .work-grid .card:not(:first-child){
  transition:transform .5s var(--ease),filter 1.4s ease,opacity 1.4s ease}
html[data-theme="light"] .work-wrap::after{
  background:linear-gradient(to bottom,
    rgba(247,246,242,0) 16%,
    rgba(247,246,242,.5) 52%,
    var(--paper) 92%,
    var(--paper) 100%)}
.wl-echo{position:relative;z-index:2;height:150px;margin:0 0 -150px;pointer-events:none;
  background:linear-gradient(to bottom,var(--paper) 0%,rgba(24,22,19,0) 100%);
  transition:opacity 2s linear}
html[data-theme="light"] .wl-echo{background:linear-gradient(to bottom,var(--paper) 0%,rgba(247,246,242,0) 100%)}
.work-wrap.expanded+.wl-echo,.work-wrap.done+.wl-echo{opacity:0}

/* Collapsed work grid: veiled cards are inert so hover can't fight the glass
   (no 3D-tilt promotion under the mask, no white inset flare bleeding through) */
.work-wrap:not(.done) .work-grid .card:not(:first-child){pointer-events:none;transform:none!important}



/* ===== Ubuntu type pass, site-wide (loaded through the public Ubuntu stylesheet) ===== */



:root{--sans:'Ubuntu',system-ui,sans-serif;--mono:'Ubuntu',system-ui,sans-serif}
body,button,input,select,textarea{font-family:'Ubuntu',system-ui,sans-serif}
h1,h2,h3{font-weight:700}
.hero h1 .g{font-weight:500}

/* markers: every small diamond becomes a circle, site-wide */
.eyebrow::before,.scroll-cue i,#cursorView .cvp::before,.cvf .cvp::before,.rail-kf i,
.marq span::after,.card .client::before,.tier .inc div::before,.perk::before,.step::before,
.soc-lab::before,.fq > span::before,.dd-opt::before,#case .panel-top .who::before,
.head-meta::before,.f-lab::before,.case-side .lab::before,.deliv .d::before,
.back-all::before,.tl::before,.perk h3::before,.role-card .rt::before,.work-ey::before{border-radius:50%}

/* the paper echo under See more dissolves at its sides exactly like the tint above it */
html:not([data-theme="light"]) .wl-echo{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}

/* THEME TOGGLE: each icon scales on its own , hover, keyboard focus, press and touch */
@media (prefers-reduced-motion: no-preference){
  .theme-tg:hover{transform:none}
  .theme-tg svg{transition:transform .38s var(--spr),background-color .3s ease,color .35s ease,opacity .35s ease}
  .theme-tg svg:hover,.theme-tg svg.tap{transform:translateY(-50%) scale(1.22);background:var(--glass)}
  .theme-tg:focus-visible svg{transform:translateY(-50%) scale(1.14)}
  .theme-tg svg:active{transform:translateY(-50%) scale(.92)}
}
@media (prefers-reduced-motion: reduce){
  .theme-tg svg{transition:none}
}

/* Editorial scroll (shared with /work): cards leaving the top settle back and dim */
.wi{transform-origin:50% 0}

/* RESPONSIVE PASS: touch targets, small portrait, short landscape */
@media (pointer:coarse){
  #seeMore{min-height:44px}
  .theme-tg{min-width:44px;min-height:30px}
}
/* mobile nav: only the tg-m toggle survives; desktop one inside .nav-links hides,
   and the toggle sits left of the hamburger */
@media(max-width:820px){
  .nav-links .theme-tg{display:none}
  #nav .theme-tg.tg-m{order:8}
  #nav .nav-toggle{order:9}
}
@media (max-width:520px){
  .work-wrap::after{height:340px}
  html:not([data-theme="light"]) .work-wrap::after{height:400px}
  #seeMore{bottom:44px}
  .wl-echo{height:110px;margin-bottom:-110px}
}
@media (max-height:480px) and (orientation:landscape){
  .hero-inner::before{inset:-1.1rem -1rem;border-radius:20px}
  .hero-inner::after{inset:calc(-1.1rem + 8px) calc(-1rem + 8px);border-radius:16px}
}