/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TATWO · macOS 26 Liquid Glass unified tokens
   Only edit tokens in :root. Everything else composes from them.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{
  /* — Neutrals: 3 inks + 3 papers, nothing else — */
  --ink:      #0e0f12;   /* primary text, strong UI */
  --ink-2:    #44464c;   /* body text */
  --ink-3:    #8b8d94;   /* meta, labels */
  --paper:    #f6f7f9;   /* base bg */
  --paper-2:  #ecedf0;   /* inset bg */
  --paper-3:  #e1e3e7;   /* separators as fill */

  /* — Cool accent (used sparingly: dots, focus, active states) — */
  --accent-h: 218;
  --accent:   oklch(62% 0.08 var(--accent-h));
  --accent-ink: oklch(38% 0.05 var(--accent-h));

  /* — Hairline (single border token) — */
  --hairline:  rgba(14,15,18,0.08);
  --hairline-2:rgba(14,15,18,0.14);

  /* — Type — */
  --serif: "Source Serif 4","Noto Serif TC",ui-serif,serif;
  --sans:  "Inter","Noto Sans TC",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --mono:  "JetBrains Mono","SF Mono",ui-monospace,monospace;

  /* — Radii (unified) — */
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-xs: 8px;

  /* — Motion — */
  --ease: cubic-bezier(.22,.8,.28,1);
  --ease-glass: cubic-bezier(.19,1,.22,1);
  --ease-press: cubic-bezier(.2,.9,.2,1);

  /* ━━ GLASS SYSTEM ━━
     Three tiers. Every surface in the app picks one. No bespoke glass. */
  --liquid-alpha-1:.40;
  --liquid-alpha-2:.54;
  --liquid-alpha-3:.34;
  --liquid-blur-1:64px;
  --liquid-blur-2:42px;
  --liquid-blur-3:28px;
  --liquid-saturation:190%;
  --liquid-contrast:104%;
  --liquid-radius:28px;
  --liquid-edge-alpha:.72;
  --liquid-shadow-alpha:.18;

  /* Tier 1 — Primary: the main page card (largest surface) */
  --glass-1-bg: rgba(255,255,255,var(--liquid-alpha-1));
  --glass-1-blur: blur(var(--liquid-blur-1)) saturate(var(--liquid-saturation)) contrast(var(--liquid-contrast));
  --glass-1-border: rgba(255,255,255,var(--liquid-edge-alpha));
  --glass-1-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 -1px 0 rgba(14,15,18,.045) inset,
    0 36px 72px -34px rgba(14,15,18,calc(var(--liquid-shadow-alpha) + .02)),
    0 10px 28px -24px rgba(255,255,255,.72) inset,
    0 1px 8px rgba(14,15,18,.045);

  /* Tier 2 — Heavy: nav pills, cards, floating elements */
  --glass-2-bg: rgba(255,255,255,var(--liquid-alpha-2));
  --glass-2-blur: blur(var(--liquid-blur-2)) saturate(var(--liquid-saturation)) contrast(var(--liquid-contrast));
  --glass-2-border: rgba(255,255,255,calc(var(--liquid-edge-alpha) + .02));
  --glass-2-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(14,15,18,.04) inset,
    0 14px 34px -18px rgba(14,15,18,var(--liquid-shadow-alpha)),
    0 4px 16px -12px rgba(255,255,255,.86) inset,
    0 1px 2px rgba(14,15,18,.045);

  /* Tier 3 — Tint: inset chrome, gentle callouts */
  --glass-3-bg: rgba(255,255,255,var(--liquid-alpha-3));
  --glass-3-blur: blur(var(--liquid-blur-3)) saturate(calc(var(--liquid-saturation) - 15%)) contrast(calc(var(--liquid-contrast) - 1%));
  --glass-3-border: rgba(255,255,255,calc(var(--liquid-edge-alpha) - .14));
  --glass-3-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 -1px 0 rgba(14,15,18,.035) inset,
    0 8px 22px -18px rgba(14,15,18,.16),
    0 1px 3px rgba(14,15,18,.035);

  --glass-specular:
    radial-gradient(120% 80% at 16% 0%, rgba(255,255,255,.68), transparent 48%),
    radial-gradient(80% 90% at 92% 10%, rgba(255,255,255,.24), transparent 54%),
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 48%, rgba(14,15,18,.035));
  --glass-edge:
    linear-gradient(180deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.32) 28%,
      rgba(255,255,255,0) 54%,
      rgba(255,255,255,.28) 100%);

  /* ━━ LEGACY ALIASES (so existing component code keeps compiling) ━━ */
  --w-0:#fff;    --w-1:var(--paper);  --w-2:var(--paper-2);
  --w-3:var(--paper-3); --w-4:#c9ccd1;
  --k-0:var(--ink);     --k-1:var(--ink);
  --k-2:var(--ink-2);   --k-3:var(--ink-2);
  --k-4:var(--ink-3);   --k-5:var(--ink-3);
  --serif-alt:var(--serif);
  --glass-bg:var(--glass-2-bg);
  --glass-border:var(--glass-2-border);
  --glass-shadow:var(--glass-2-shadow);
  --accent-hue:var(--accent-h);
}

/* 2026-05-28 portfolio detail gallery controls. */
.work-focus-media-button{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  cursor:zoom-in;
  overflow:hidden;
}

.work-focus-media-button img{
  width:100%;
  height:100%;
  display:block;
}

.work-gallery-viewer{
  position:fixed;
  inset:0;
  z-index:260;
  display:grid;
  place-items:center;
  padding:clamp(18px, 5vw, 52px);
  background:rgba(7,8,10,.72);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  animation:workGalleryFadeIn .22s ease both;
}

.work-gallery-stage{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  touch-action:pan-y;
}

.work-gallery-image{
  width:auto !important;
  height:auto !important;
  max-width:min(100%, 1120px) !important;
  max-height:100% !important;
  object-fit:contain !important;
  border-radius:18px;
  box-shadow:0 22px 70px rgba(0,0,0,.28);
  filter:none !important;
  transform-origin:center;
  transform:translateX(var(--viewer-drag-x, 0px));
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
  animation:workGalleryImageIn .34s cubic-bezier(.2,.8,.2,1) both;
}

.work-gallery-image.is-next{
  animation:workGalleryImageNext .38s cubic-bezier(.2,.8,.2,1) both;
}

.work-gallery-image.is-prev{
  animation:workGalleryImagePrev .38s cubic-bezier(.2,.8,.2,1) both;
}

.work-gallery-close,
.work-gallery-arrow{
  position:fixed;
  z-index:262;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(247,249,250,.22);
  color:rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 14px 32px rgba(0,0,0,.18);
  cursor:pointer;
}

.work-gallery-arrow{
  display:none !important;
}

.work-gallery-close{
  top:calc(18px + env(safe-area-inset-top));
  right:18px;
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:26px;
  line-height:1;
}

.work-gallery-arrow{
  top:50%;
  width:44px;
  height:58px;
  border-radius:999px;
  font-size:42px;
  transform:translateY(-50%);
}

.work-gallery-arrow.is-prev{left:18px}
.work-gallery-arrow.is-next{right:18px}

.work-gallery-count{
  position:fixed;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:262;
  transform:translateX(-50%);
  padding:6px 12px;
  border-radius:999px;
  background:rgba(247,249,250,.18);
  border:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.86);
  font-size:12px;
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
}

@keyframes workGalleryFadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes workGalleryImageIn{
  from{opacity:0; transform:translateY(10px) scale(.985)}
  to{opacity:1; transform:translateX(var(--viewer-drag-x, 0px)) translateY(0) scale(1)}
}

@keyframes workGalleryImageNext{
  from{opacity:.42; transform:translateX(64px) scale(.985)}
  to{opacity:1; transform:translateX(var(--viewer-drag-x, 0px)) scale(1)}
}

@keyframes workGalleryImagePrev{
  from{opacity:.42; transform:translateX(-64px) scale(.985)}
  to{opacity:1; transform:translateX(var(--viewer-drag-x, 0px)) scale(1)}
}

@media (max-width:760px){
  .work-focus .work-focus-media .work-focus-media-button,
  .work-focus .work-focus-media .work-focus-media-button > img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
  }

  .work-focus .work-focus-media .work-focus-media-button > img{
    object-fit:cover !important;
    object-position:center center !important;
    filter:none !important;
  }

  .work-focus .modal{
    touch-action:pan-y !important;
  }

  .work-focus .modal:has(.work-gallery-viewer){
    touch-action:none !important;
  }

  .work-gallery-viewer{
    padding:calc(58px + env(safe-area-inset-top)) 0 calc(54px + env(safe-area-inset-bottom));
    background:rgba(5,7,10,.7);
  }

  .work-gallery-stage{
    touch-action:pan-y !important;
  }

  .work-gallery-image{
    max-width:100vw !important;
    max-height:calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius:10px;
    box-shadow:0 18px 58px rgba(0,0,0,.24);
  }

  .work-gallery-close{
    width:38px;
    height:38px;
    top:calc(92px + env(safe-area-inset-top));
    right:14px;
    background:rgba(248,249,250,.2);
  }

  .work-gallery-arrow{
    width:38px;
    height:52px;
    font-size:36px;
    background:rgba(248,249,250,.14);
  }

  .work-gallery-arrow.is-prev{left:8px}
  .work-gallery-arrow.is-next{right:8px}

  .work-gallery-count{
    bottom:calc(14px + env(safe-area-inset-bottom));
  }
}

/* 2026-05-27 iPhone works detail overlay pass. */
@media (max-width:760px){
  .work-focus .modal{
    position:relative !important;
    display:block !important;
    height:calc(100dvh - 72px - env(safe-area-inset-top)) !important;
    overflow:hidden !important;
    background:#eef0ef !important;
  }

  .work-focus-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#eef0ef !important;
  }

  .work-focus-media img,
  .work-focus-media video{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    transition:filter .22s ease, opacity .22s ease !important;
  }

  .work-focus .info{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2 !important;
    padding:18px 20px calc(22px + env(safe-area-inset-bottom)) !important;
    background:rgba(247,248,247,.82) !important;
    border-top:1px solid rgba(17,18,22,.08) !important;
    backdrop-filter:blur(16px) saturate(1.06) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.06) !important;
  }

  .work-focus .info.is-collapsed{
    min-height:0 !important;
    display:block !important;
  }

  .work-focus .info.is-collapsed .eyebrow{
    display:none !important;
  }

  .work-focus .info.is-collapsed .work-info-summary{
    margin:0 !important;
    padding:0 !important;
    border-top:0 !important;
    min-height:44px !important;
    align-items:flex-start !important;
  }

  .work-focus .info.is-collapsed .work-info-title{
    font-size:24px !important;
    line-height:1.08 !important;
  }

  .work-focus .info.is-collapsed .work-info-title span{
    margin-top:3px !important;
    font-size:14px !important;
  }

  .work-focus .info.is-collapsed .work-info-hint{
    padding-top:4px !important;
    font-size:13px !important;
  }

  .work-focus .info.is-collapsed .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin:14px 0 0 !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }

  .work-focus .info.is-expanded{
    top:0 !important;
    min-height:0 !important;
    overflow-y:auto !important;
    background:rgba(247,248,247,.62) !important;
    padding:calc(72px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .work-focus .info.is-expanded ~ *,
  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.42) saturate(.9) !important;
  }

  .work-focus .info.is-expanded .work-info-summary{
    margin:0 !important;
    padding:0 !important;
  }

  .work-focus .info.is-expanded .work-info-details{
    display:block !important;
    margin-top:22px !important;
  }

  .work-focus .info.is-expanded .work-story{
    display:block !important;
    min-height:2.2em !important;
    color:rgba(17,18,22,.86) !important;
  }

  .work-focus .info.is-expanded .work-detail-list{
    margin-top:22px !important;
  }

  .work-focus .info.is-expanded .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin-top:24px !important;
    padding:8px 14px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }
}

/* 2026-05-27 EOF iPhone works image-fit override. */
@media (max-width:760px){
  .work-focus .work-focus-media .work-focus-media-item > img,
  .work-focus .work-focus-media .work-focus-media-item > video{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}

/* 2026-05-27 iPhone works-detail v3: centered image, anchored bottom meta, glass story drawer. */
@media (max-width:760px){
  .work-focus .modal{
    background:#111216 !important;
    border-radius:28px 28px 0 0 !important;
  }

  .work-focus .close{
    top:calc(86px + env(safe-area-inset-top)) !important;
    right:18px !important;
    width:46px !important;
    height:46px !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.68) !important;
    background:rgba(245,246,245,.72) !important;
    color:rgba(17,18,22,.84) !important;
    box-shadow:0 8px 24px -16px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.7) !important;
    backdrop-filter:blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;
  }

  .work-focus-media-item{
    place-items:stretch !important;
  }

  .work-focus-media-item::before{
    filter:blur(10px) brightness(.96) saturate(.96) !important;
    transform:scale(1.02) !important;
    opacity:.5 !important;
  }

  .work-focus-media img,
  .work-focus-media video{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  .work-focus .info{
    min-height:0 !important;
    background:rgba(248,249,248,.72) !important;
    border-top:1px solid rgba(255,255,255,.44) !important;
    box-shadow:0 -16px 48px -34px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.42) !important;
    backdrop-filter:blur(22px) saturate(1.28) contrast(1.04) !important;
    -webkit-backdrop-filter:blur(22px) saturate(1.28) contrast(1.04) !important;
  }

  .work-focus .info.is-collapsed{
    height:auto !important;
    padding:18px 20px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .work-focus .info.is-collapsed .work-info-details{
    display:none !important;
  }

  .work-focus .info.is-collapsed .work-book-cta{
    position:static !important;
    width:auto !important;
    min-width:152px !important;
    max-width:190px !important;
    min-height:34px !important;
    margin:14px 0 0 !important;
    padding:8px 14px !important;
  }

  .work-focus .info.is-expanded{
    height:100% !important;
    background:rgba(248,249,248,.24) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -120px 120px -100px rgba(255,255,255,.55) !important;
    backdrop-filter:blur(30px) saturate(1.35) contrast(1.06) !important;
    -webkit-backdrop-filter:blur(30px) saturate(1.35) contrast(1.06) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media-item::before{
    filter:blur(12px) brightness(.62) saturate(.84) !important;
    opacity:.78 !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.52) saturate(.86) !important;
  }

  .work-focus .info.is-expanded .work-info-summary{
    position:absolute !important;
    left:22px !important;
    right:22px !important;
    top:calc(78px + env(safe-area-inset-top)) !important;
    z-index:2 !important;
  }

  .work-focus .info.is-expanded .work-info-details{
    display:block !important;
    margin:0 !important;
  }

  .work-focus .info.is-expanded .work-story{
    position:absolute !important;
    left:22px !important;
    right:22px !important;
    top:calc(184px + env(safe-area-inset-top)) !important;
    bottom:238px !important;
    overflow-y:auto !important;
    margin:0 !important;
    padding-right:2px !important;
    color:rgba(17,18,22,.92) !important;
    font-size:17px !important;
    line-height:1.85 !important;
  }

  .work-focus .info.is-expanded .work-detail-list{
    position:absolute !important;
    left:22px !important;
    right:22px !important;
    bottom:104px !important;
    margin:0 !important;
  }

  .work-focus .info.is-expanded .work-book-cta{
    position:absolute !important;
    left:22px !important;
    bottom:calc(28px + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    max-width:190px !important;
    margin:0 !important;
  }
}

/* 2026-05-03 mobile corrections from real phone review. */
@media (max-width:760px){
  .tabnav{
    top:calc(10px + env(safe-area-inset-top)) !important;
    bottom:auto !important;
    left:10px !important;
    right:10px !important;
  }
  .page-stage{
    top:calc(72px + env(safe-area-inset-top)) !important;
    bottom:12px !important;
  }
  .ask-fab{
    bottom:calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

/* Front-only phone preview shell for the local in-app browser. */
.mobile-editor-front-shell{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.9), transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(203,218,218,.45), transparent 34%),
    linear-gradient(135deg,#f7f5f5,#e9eff0 64%,#dde7e8);
  color:var(--ink);
  overflow:hidden;
}
.mobile-editor-front-top{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  border-bottom:1px solid rgba(14,15,18,.08);
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.mobile-editor-front-top strong{
  display:block;
  font-family:var(--serif);
  font-size:23px;
  font-weight:400;
  margin-top:2px;
}
.mobile-editor-front-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.mobile-editor-front-actions button{
  height:34px;
  border:1px solid rgba(14,15,18,.08);
  border-radius:999px;
  padding:0 14px;
  background:rgba(255,255,255,.6);
  color:var(--ink-2);
  font:13px var(--sans);
  cursor:pointer;
}
.mobile-editor-front-actions button.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.mobile-editor-front-stage{
  min-height:0;
  display:grid;
  place-items:center;
  padding:22px;
  overflow:auto;
}
.mobile-editor-front-phone{
  width:390px;
  height:min(844px, calc(100vh - 108px));
  min-height:620px;
  overflow:hidden;
  border-radius:34px;
  background:var(--paper);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:
    0 26px 80px -38px rgba(14,20,28,.5),
    inset 0 1px 0 rgba(255,255,255,.88);
}
.mobile-editor-front-phone.is-430{
  width:430px;
  height:min(932px, calc(100vh - 108px));
}
.mobile-editor-front-phone iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}

.home-work-wheel{
  --wheel-size:154px;
  --wheel-radius:58px;
  position:relative;
  width:var(--wheel-size);
  height:var(--wheel-size);
  flex:none;
  border-radius:50%;
  touch-action:none;
  cursor:grab;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.82) 0 25%, rgba(255,255,255,.28) 26% 54%, transparent 55%),
    conic-gradient(from 0deg, rgba(14,15,18,.08), rgba(255,255,255,.46), rgba(14,15,18,.06), rgba(255,255,255,.42), rgba(14,15,18,.08));
  border:1px solid rgba(255,255,255,.58);
  box-shadow:var(--sys-material-inset), 0 14px 30px -24px rgba(14,15,18,.34);
}
.home-work-wheel.is-dragging{
  cursor:grabbing;
}
.home-wheel-center{
  position:absolute;
  inset:50%;
  width:56px;
  height:56px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  z-index:3;
  border:1px solid rgba(14,15,18,.18);
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 24px -18px rgba(14,15,18,.38);
}
.home-wheel-center img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.68;
  filter:saturate(.72);
}
.home-wheel-center span{
  position:absolute;
  inset:auto 7px 7px auto;
  min-width:20px;
  min-height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--sys-control-selected);
  color:#fff;
  font-family:var(--mono);
  font-size:9px;
}
.home-work-wheel .home-work-chip{
  position:absolute;
  left:50%;
  top:50%;
  width:44px;
  height:56px;
  margin:-28px 0 0 -22px;
  transform:
    rotate(calc(var(--rotation) + var(--angle)))
    translateY(calc(var(--wheel-radius) * -1))
    rotate(calc(-1 * (var(--rotation) + var(--angle))));
  transform-origin:center center;
}
@media (min-width:761px){
  .home-work-picker{
    grid-template-columns:minmax(126px, 168px) auto !important;
  }
}
@media (max-width:760px){
  .page-home.is-work-selector .home-left{
    padding:20px 18px 142px !important;
  }
  .page-home.is-work-selector .home-lower{
    bottom:90px !important;
  }
  .page-home.is-work-selector .home-work-picker{
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center;
    gap:12px;
    padding:11px 12px !important;
  }
  .page-home.is-work-selector .home-picker-copy{
    display:flex !important;
    gap:5px;
  }
  .page-home.is-work-selector .home-picker-copy b{
    font-size:18px !important;
  }
  .page-home.is-work-selector .home-picker-copy small{
    max-width:148px !important;
    text-align:left !important;
  }
  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:178px;
    --wheel-radius:68px;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip{
    width:52px !important;
    height:66px !important;
    margin:-33px 0 0 -26px;
  }
  .page-home.is-work-selector .home-wheel-center{
    width:66px;
    height:66px;
  }
  .page-home.is-work-selector .home-right-dock{
    bottom:12px !important;
  }
}

@media (max-width:760px){
  .page-faq-letter{
    overflow-y:auto !important;
  }
  .letter-two{
    gap:14px !important;
  }
  .letter-qcol{
    padding-top:0 !important;
  }
  .letter-qlist{
    display:grid;
    gap:8px;
    padding-bottom:12px !important;
  }
  .letter-qlist li{
    border:1px solid rgba(14,15,18,.08);
    border-radius:16px;
    background:rgba(255,255,255,.42);
  }
  .letter-q{
    min-height:56px;
    padding:11px 12px !important;
    gap:12px;
  }
  .letter-q:hover{
    padding-left:12px !important;
  }
  .letter-q-num{
    width:26px;
    font-size:10px;
  }
  .letter-q-text{
    font-size:15px;
    line-height:1.35;
  }
  .letter-acol{
    min-height:132px;
    padding:13px 14px !important;
    border:1px solid rgba(14,15,18,.08);
    border-radius:18px;
    background:rgba(255,255,255,.36);
  }
  .letter-empty{
    display:none !important;
  }
  .letter-answer-q{
    font-size:18px !important;
    margin-bottom:10px !important;
  }
  .letter-answer-body .letter-ans{
    font-size:15px !important;
    line-height:1.72 !important;
  }
  .letter-ask-input,
  .consult-input-flat .letter-ask-input{
    font-size:16px !important;
    min-height:44px;
  }
  .page-faq-letter.is-consulting .consult-rail{
    bottom:calc(18px + env(safe-area-inset-bottom)) !important;
    height:min(70vh, 620px) !important;
  }
}

@media (max-width:760px){
  .process-head{
    padding:24px 20px 14px !important;
  }
  .process-head .h-section{
    font-size:clamp(33px, 10vw, 44px) !important;
    line-height:1.08 !important;
  }
  .process-grid{
    gap:10px !important;
    padding:0 18px 24px !important;
  }
  .proc-card{
    min-height:auto !important;
    padding:18px 18px 16px !important;
    border-radius:18px !important;
  }
  .proc-card .num{
    font-size:38px !important;
    margin-bottom:8px !important;
  }
  .proc-card h3{
    font-size:19px !important;
  }
  .proc-card p{
    font-size:13.5px !important;
    line-height:1.62 !important;
  }
}

/* Phone review v2 final override: this block intentionally stays last. */
.home-work-wheel .home-work-chip{
  opacity:.68;
  z-index:1;
  transform:
    rotate(calc(var(--rotation) + var(--angle)))
    translateY(calc(var(--wheel-radius) * -1))
    rotate(var(--counter-angle)) !important;
}
.home-work-wheel .home-work-chip.is-active{
  opacity:1;
  z-index:5;
  border-color:rgba(14,15,18,.42) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.68), 0 10px 22px -17px rgba(14,15,18,.44) !important;
}

@media (max-width:760px){
  .tabnav{
    top:calc(10px + env(safe-area-inset-top)) !important;
    bottom:auto !important;
    left:10px !important;
    right:10px !important;
    z-index:90 !important;
  }
  .page-stage{
    top:calc(72px + env(safe-area-inset-top)) !important;
    bottom:12px !important;
  }
  .page-home.is-work-selector .home-left{
    padding:20px 18px 144px !important;
  }
  .page-home.is-work-selector .home-lower{
    left:14px !important;
    right:14px !important;
    bottom:88px !important;
  }
  .page-home.is-work-selector .home-work-picker{
    grid-template-columns:minmax(118px,1fr) 150px !important;
    align-items:center !important;
    gap:10px !important;
    min-height:174px !important;
    padding:12px 12px 12px 14px !important;
    overflow:hidden !important;
  }
  .page-home.is-work-selector .home-picker-copy{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:5px !important;
    min-width:0 !important;
  }
  .page-home.is-work-selector .home-picker-copy span{
    font-size:10px !important;
    line-height:1.2 !important;
  }
  .page-home.is-work-selector .home-picker-copy b{
    width:100% !important;
    font-size:24px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .page-home.is-work-selector .home-picker-copy small{
    max-width:100% !important;
    font-size:11px !important;
    line-height:1.2 !important;
    text-align:left !important;
  }
  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:150px;
    --wheel-radius:56px;
    justify-self:end !important;
  }
  .page-home.is-work-selector .home-wheel-center{
    width:58px !important;
    height:58px !important;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip{
    width:42px !important;
    height:52px !important;
    margin:-26px 0 0 -21px !important;
    border-radius:14px !important;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip span{
    left:5px !important;
    bottom:5px !important;
    min-width:17px !important;
    min-height:17px !important;
    font-size:8px !important;
  }
  .page-home.is-work-selector .home-right-dock{
    bottom:12px !important;
  }
  .page-faq-letter{
    overflow-y:auto !important;
  }
  .page-faq-letter.is-consulting{
    overflow:hidden !important;
  }
  .page-faq-letter.is-consulting .consult-rail{
    position:fixed !important;
    inset:auto 10px calc(18px + env(safe-area-inset-bottom)) 10px !important;
    height:min(70vh,620px) !important;
    overflow:hidden !important;
  }
  .page-faq-letter.is-consulting .consult-chat-col{
    height:100% !important;
    overflow:hidden !important;
  }
  .page-faq-letter.is-consulting .consult-chat{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .letter-ask-input,
  .consult-input-flat .letter-ask-input{
    font-size:16px !important;
  }
}

/* Phone review v2: top navigation, fixed FAQ consult UI, and a compact work-palette wheel. */
.home-work-wheel .home-work-chip{
  transform:
    rotate(calc(var(--rotation) + var(--angle)))
    translateY(calc(var(--wheel-radius) * -1))
    rotate(var(--counter-angle)) !important;
}
.home-work-wheel .home-work-chip{
  opacity:.68;
  z-index:1;
}
.home-work-wheel .home-work-chip.is-active{
  opacity:1;
  z-index:5;
  border-color:rgba(14,15,18,.42) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.68), 0 10px 22px -17px rgba(14,15,18,.44) !important;
}

@media (max-width:760px){
  .tabnav{
    top:calc(10px + env(safe-area-inset-top)) !important;
    bottom:auto !important;
    left:10px !important;
    right:10px !important;
    z-index:90 !important;
  }
  .page-stage{
    top:calc(72px + env(safe-area-inset-top)) !important;
    bottom:12px !important;
  }
  .page-home.is-work-selector .home-left{
    padding:20px 18px 144px !important;
  }
  .page-home.is-work-selector .home-lower{
    left:14px !important;
    right:14px !important;
    bottom:88px !important;
  }
  .page-home.is-work-selector .home-work-picker{
    grid-template-columns:minmax(118px,1fr) 150px !important;
    align-items:center !important;
    gap:10px !important;
    min-height:174px !important;
    padding:12px 12px 12px 14px !important;
    overflow:hidden !important;
  }
  .page-home.is-work-selector .home-picker-copy{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:5px !important;
    min-width:0 !important;
  }
  .page-home.is-work-selector .home-picker-copy span{
    font-size:10px !important;
    line-height:1.2 !important;
  }
  .page-home.is-work-selector .home-picker-copy b{
    width:100% !important;
    font-size:24px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .page-home.is-work-selector .home-picker-copy small{
    max-width:100% !important;
    font-size:11px !important;
    line-height:1.2 !important;
    text-align:left !important;
  }
  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:150px;
    --wheel-radius:56px;
    justify-self:end !important;
  }
  .page-home.is-work-selector .home-wheel-center{
    width:58px !important;
    height:58px !important;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip{
    width:42px !important;
    height:52px !important;
    margin:-26px 0 0 -21px !important;
    border-radius:14px !important;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip span{
    left:5px !important;
    bottom:5px !important;
    min-width:17px !important;
    min-height:17px !important;
    font-size:8px !important;
  }
  .page-home.is-work-selector .home-right-dock{
    bottom:12px !important;
  }
  .page-faq-letter{
    overflow-y:auto !important;
  }
  .page-faq-letter.is-consulting{
    overflow:hidden !important;
  }
  .page-faq-letter.is-consulting .consult-rail{
    position:fixed !important;
    inset:auto 10px calc(18px + env(safe-area-inset-bottom)) 10px !important;
    height:min(70vh,620px) !important;
    overflow:hidden !important;
  }
  .page-faq-letter.is-consulting .consult-chat-col{
    height:100% !important;
    overflow:hidden !important;
  }
  .page-faq-letter.is-consulting .consult-chat{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .letter-ask-input,
  .consult-input-flat .letter-ask-input{
    font-size:16px !important;
  }
}

/* Final phone-review overrides: keep these last. */
@media (max-width:760px){
  .tabnav{
    top:calc(10px + env(safe-area-inset-top)) !important;
    bottom:auto !important;
    left:10px !important;
    right:10px !important;
  }
  .page-stage{
    top:calc(72px + env(safe-area-inset-top)) !important;
    bottom:12px !important;
  }
  .ask-fab{
    bottom:calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

.home-work-wheel{
  --wheel-size:154px;
  --wheel-radius:58px;
  position:relative;
  width:var(--wheel-size);
  height:var(--wheel-size);
  flex:none;
  border-radius:50%;
  touch-action:none;
  cursor:grab;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.82) 0 25%, rgba(255,255,255,.28) 26% 54%, transparent 55%),
    conic-gradient(from 0deg, rgba(14,15,18,.08), rgba(255,255,255,.46), rgba(14,15,18,.06), rgba(255,255,255,.42), rgba(14,15,18,.08));
  border:1px solid rgba(255,255,255,.58);
  box-shadow:var(--sys-material-inset), 0 14px 30px -24px rgba(14,15,18,.34);
}
.home-work-wheel.is-dragging{cursor:grabbing}
.home-wheel-center{
  position:absolute;
  inset:50%;
  width:56px;
  height:56px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  z-index:3;
  border:1px solid rgba(14,15,18,.18);
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 24px -18px rgba(14,15,18,.38);
}
.home-wheel-center img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.68;
  filter:saturate(.72);
}
.home-wheel-center span{
  position:absolute;
  inset:auto 7px 7px auto;
  min-width:20px;
  min-height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--sys-control-selected);
  color:#fff;
  font-family:var(--mono);
  font-size:9px;
}
.home-work-wheel .home-work-chip{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:44px;
  height:56px;
  margin:-28px 0 0 -22px;
  transform:
    rotate(calc(var(--rotation) + var(--angle)))
    translateY(calc(var(--wheel-radius) * -1))
    rotate(calc(-1 * (var(--rotation) + var(--angle)))) !important;
  transform-origin:center center;
}
@media (min-width:761px){
  .home-work-picker{
    grid-template-columns:minmax(126px,168px) auto !important;
  }
}
@media (max-width:760px){
  .page-home.is-work-selector .home-left{
    padding:20px 18px 142px !important;
  }
  .page-home.is-work-selector .home-lower{
    bottom:90px !important;
  }
  .page-home.is-work-selector .home-work-picker{
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:12px !important;
    padding:11px 12px !important;
  }
  .page-home.is-work-selector .home-picker-copy{
    display:flex !important;
    gap:5px !important;
  }
  .page-home.is-work-selector .home-picker-copy b{
    font-size:18px !important;
  }
  .page-home.is-work-selector .home-picker-copy small{
    max-width:148px !important;
    text-align:left !important;
  }
  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:178px;
    --wheel-radius:68px;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip{
    width:52px !important;
    height:66px !important;
    margin:-33px 0 0 -26px !important;
  }
  .page-home.is-work-selector .home-wheel-center{
    width:66px !important;
    height:66px !important;
  }
  .page-home.is-work-selector .home-right-dock{
    bottom:12px !important;
  }
}

@media (max-width:760px){
  .page-faq-letter{
    overflow-y:auto !important;
  }
  .letter-two{
    gap:14px !important;
  }
  .letter-qcol{
    padding-top:0 !important;
  }
  .letter-qlist{
    display:grid !important;
    gap:8px !important;
    padding-bottom:12px !important;
  }
  .letter-qlist li{
    border:1px solid rgba(14,15,18,.08) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.42) !important;
  }
  .letter-q{
    min-height:56px !important;
    padding:11px 12px !important;
    gap:12px !important;
  }
  .letter-q:hover{
    padding-left:12px !important;
  }
  .letter-q-num{
    width:26px !important;
    font-size:10px !important;
  }
  .letter-q-text{
    font-size:15px !important;
    line-height:1.35 !important;
  }
  .letter-acol{
    min-height:132px !important;
    padding:13px 14px !important;
    border:1px solid rgba(14,15,18,.08) !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.36) !important;
  }
  .letter-empty{
    display:none !important;
  }
  .letter-answer-q{
    font-size:18px !important;
    margin-bottom:10px !important;
  }
  .letter-answer-body .letter-ans{
    font-size:15px !important;
    line-height:1.72 !important;
  }
  .letter-ask-input,
  .consult-input-flat .letter-ask-input{
    font-size:16px !important;
    min-height:44px !important;
  }
  .page-faq-letter.is-consulting .consult-rail{
    bottom:calc(18px + env(safe-area-inset-bottom)) !important;
    height:min(70vh,620px) !important;
  }
}

@media (max-width:760px){
  .process-head{
    padding:24px 20px 14px !important;
  }
  .process-head .h-section{
    font-size:clamp(33px,10vw,44px) !important;
    line-height:1.08 !important;
  }
  .process-grid{
    gap:10px !important;
    padding:0 18px 24px !important;
  }
  .proc-card{
    min-height:auto !important;
    padding:18px 18px 16px !important;
    border-radius:18px !important;
  }
  .proc-card .num{
    font-size:38px !important;
    margin-bottom:8px !important;
  }
  .proc-card h3{
    font-size:19px !important;
  }
  .proc-card p{
    font-size:13.5px !important;
    line-height:1.62 !important;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
}
#root{height:100%}

/* ━━━━━━━━━━━ BACKGROUND ━━━━━━━━━━━ */
.page-bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(900px 620px at 12% 10%, rgba(255,255,255,.72) 0%, transparent 66%),
    radial-gradient(820px 560px at 86% 16%, rgba(222,228,231,.42) 0%, transparent 62%),
    linear-gradient(180deg,#eef2f3 0%,#e5eaec 54%,#dfe5e8 100%);
}
.page-bg::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.08  0 0 0 0 0.1  0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.44; mix-blend-mode:multiply; pointer-events:none;
}
body.no-grain .page-bg::after{display:none}

/* Fog blobs — rendered with radial-gradient (no heavy filter:blur,
   which forces massive compositor layers and degrades overall quality). */
.fog{
  position:fixed; pointer-events:none; z-index:-1;
  border-radius:50%;
  opacity:.24;
  animation:drift 34s var(--ease) infinite alternate;
}
.fog.a{
  width:720px; height:720px; top:-260px; left:-220px;
  background:radial-gradient(closest-side, rgba(213,218,224,.9), rgba(213,218,224,0) 70%);
}
.fog.b{
  width:820px; height:820px; top:20%; right:-320px;
  background:radial-gradient(closest-side, rgba(220,224,230,.9), rgba(220,224,230,0) 70%);
  animation-duration:38s;
}
.fog.c{
  width:680px; height:680px; bottom:-260px; left:18%;
  background:radial-gradient(closest-side, rgba(207,212,219,.85), rgba(207,212,219,0) 70%);
  animation-duration:44s;
}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,-40px) scale(1.08)}}

/* ━━━━━━━━━━━ GLASS UTILITIES ━━━━━━━━━━━ */
.glass,
.glass-1{
  background:
    var(--glass-specular),
    var(--glass-1-bg);
  backdrop-filter:var(--glass-1-blur);
  -webkit-backdrop-filter:var(--glass-1-blur);
  border:0.5px solid var(--glass-1-border);
  box-shadow:var(--glass-1-shadow);
  border-radius:var(--r-lg);
  position:relative; isolation:isolate;
}
.glass-2{
  background:
    var(--glass-specular),
    var(--glass-2-bg);
  backdrop-filter:var(--glass-2-blur);
  -webkit-backdrop-filter:var(--glass-2-blur);
  border:0.5px solid var(--glass-2-border);
  box-shadow:var(--glass-2-shadow);
  border-radius:var(--r-md);
  position:relative; isolation:isolate;
}
.glass-3{
  background:
    var(--glass-specular),
    var(--glass-3-bg);
  backdrop-filter:var(--glass-3-blur);
  -webkit-backdrop-filter:var(--glass-3-blur);
  border:0.5px solid var(--glass-3-border);
  box-shadow:var(--glass-3-shadow);
  border-radius:var(--r-md);
  position:relative; isolation:isolate;
}
/* Signature macOS 26 highlight edge — applied once, to all glass */
.glass::before,.glass-1::before,.glass-2::before,.glass-3::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--glass-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:2;
}
.glass::after,.glass-1::after,.glass-2::after,.glass-3::after{
  content:""; position:absolute; inset:1px; border-radius:inherit;
  background:
    linear-gradient(105deg,
      transparent 8%,
      rgba(255,255,255,.18) 24%,
      transparent 42%),
    radial-gradient(90% 55% at 50% 0%, rgba(255,255,255,.24), transparent 58%);
  opacity:.32;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}
.page-card.glass::after{opacity:.16}

/* ━━━━━━━━━━━ TAB NAV ━━━━━━━━━━━ */
.tabnav{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:50; padding:5px 7px; border-radius:999px;
  display:flex; align-items:center; gap:4px;
  max-width:calc(100vw - 32px);
  overflow:hidden;
  transition:transform .34s var(--ease-glass), box-shadow .34s var(--ease-glass);
}
.tabnav:hover{
  transform:translateX(-50%) translateY(-1px);
}
.tabnav:active{
  transform:translateX(-50%) translateY(0) scale(.997);
}
.tabnav .brand{
  display:flex; align-items:center; gap:8px;
  padding:7px 14px 7px 10px; margin-right:2px;
  font-family:var(--serif); font-weight:500; font-size:14px;
  border-right:0.5px solid var(--hairline);
  color:var(--ink);
}
.tabnav .brand .mark{
  width:22px; height:22px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:11px; font-weight:500;
}
.tabnav .tabs{display:flex; gap:2px; position:relative}
/* Pill indicator — clean, non-deforming slide.
   [data-pill-style="ios"]      : smooth slide, gentle tail settle (no scaling)
   [data-pill-style="spotlight"]: smooth slide + scale-in on first appearance */
.tabnav .tab-indicator{
  position:absolute; top:0; left:0; height:100%;
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.24), transparent 48%),
    linear-gradient(180deg, #17191d, var(--ink) 54%, #050608);
  border-radius:999px;
  transform:translateX(var(--x,0));
  width:var(--w,0);
  opacity:0;
  transition:
    transform .54s var(--ease-glass),
    width    .54s var(--ease-glass),
    opacity  .22s ease-out;
  z-index:0; pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.34),
    0 7px 18px -8px rgba(14,15,18,.42);
  will-change:transform,width;
}
.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after{
  content:""; position:absolute; inset:1px 9%;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  opacity:0;
  transform:translateX(-45%);
  transition:opacity .25s var(--ease), transform .52s var(--ease-glass);
  pointer-events:none;
}
.tabnav .tab-indicator.is-visible::after,
.filter-pills .pill-indicator.is-visible::after,
.sliding-pills .pill-indicator.is-visible::after{
  opacity:.55;
  transform:translateX(0);
}
.tabnav .tab-indicator.is-settling,
.filter-pills .pill-indicator.is-settling,
.sliding-pills .pill-indicator.is-settling{
  animation:pill-glass-settle .46s var(--ease-glass);
}
.tabnav .tab-indicator.is-visible{opacity:1}

/* Spotlight entrance: first appearance scales in, no blur */
[data-pill-style="spotlight"] .tabnav .tab-indicator.is-entering{
  animation:pill-enter .38s cubic-bezier(.34,1.3,.5,1);
}
@keyframes pill-enter{
  0%   { transform:translateX(var(--x,0)) scale(.7); opacity:0; }
  60%  { opacity:1; }
  100% { transform:translateX(var(--x,0)) scale(1); opacity:1; }
}
@keyframes pill-glass-settle{
  0%{filter:brightness(1.12) saturate(1.08)}
  45%{filter:brightness(1.04) saturate(1.03)}
  100%{filter:none}
}
.tabnav button.tab{
  position:relative; z-index:1;
  background:transparent; border:none; cursor:pointer;
  font-family:var(--sans); font-size:13px;
  color:var(--ink-2); padding:7px 13px; border-radius:999px;
  transition:color .35s var(--ease), transform .2s var(--ease-press), text-shadow .25s var(--ease);
  white-space:nowrap;
}
.tabnav button.tab:hover{color:var(--ink); transform:translateY(-.5px)}
.tabnav button.tab:active{transform:scale(.94)}
.tabnav button.tab.active{color:#fff}
.tabnav .book-cta{
  margin-left:5px; padding:7px 14px; border-radius:999px;
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.24), transparent 48%),
    linear-gradient(180deg, #17191d, var(--ink) 58%, #050608);
  color:#fff; font-size:12.5px;
  border:none; cursor:pointer; font-family:var(--sans); font-weight:500;
  white-space:nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 7px 18px -10px rgba(14,15,18,.42);
  transition:filter .25s var(--ease), transform .2s var(--ease-press), box-shadow .25s var(--ease);
}
.tabnav .book-cta:hover{filter:brightness(1.08); transform:translateY(-1px)}
.tabnav .book-cta:active{transform:scale(.95)}
.tabnav .book-cta.is-active{filter:brightness(1.08)}

@media (max-width:760px){
  .tabnav{flex-wrap:wrap; max-width:calc(100vw - 16px); border-radius:24px}
  .tabnav .brand{border-right:none; padding-right:0}
  .tabnav .tabs{flex-wrap:wrap; justify-content:center}
}

/* ━━━━━━━━━━━ PAGE STAGE ━━━━━━━━━━━ */
.page-stage{
  position:fixed; top:78px; left:22px; right:22px; bottom:22px;
  display:flex; animation:pageIn .5s var(--ease);
}
.page-stage.is-travel-route{
  top:0;
  left:0;
  right:0;
  bottom:0;
}
@keyframes pageIn{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}
@media (max-width:760px){
  .page-stage{top:120px; left:12px; right:12px; bottom:12px}
  .page-stage.is-travel-route{top:0; left:0; right:0; bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
.page-card{
  flex:1; border-radius:var(--r-xl); overflow:hidden;
  display:grid; min-height:0;
}

/* ━━━━━━━━━━━ TYPE PRIMITIVES ━━━━━━━━━━━ */
.eyebrow{
  font-family:var(--sans); font-size:12px;
  color:var(--ink-3); font-weight:400;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:20px; height:1px; background:var(--ink-3)}

.h-display{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(40px,5.5vw,82px); line-height:1.04;
  letter-spacing:-.018em; margin:0; color:var(--ink);
}
.h-display em{font-style:normal; color:inherit; font-weight:inherit}

.h-section{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3vw,40px); line-height:1.1; letter-spacing:-.018em;
  margin:0; color:var(--ink);
}
.h-section em{font-style:normal; color:inherit}

.lede{
  font-size:15px; line-height:1.75; color:var(--ink-2);
  max-width:54ch; margin:0;
  white-space:pre-line;
}

.muted{color:var(--ink-3)}

/* ━━━━━━━━━━━ BUTTONS ━━━━━━━━━━━ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px; border-radius:999px;
  font-family:var(--sans); font-size:14px; font-weight:500;
  text-decoration:none; cursor:pointer; border:none;
  position:relative; overflow:hidden;
  transform:translateZ(0);
  transition:
    transform .22s var(--ease-press),
    filter .25s var(--ease),
    background .28s var(--ease),
    border-color .28s var(--ease),
    box-shadow .28s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:1px 12%;
  border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  opacity:0; transform:translateX(-38%);
  transition:opacity .25s var(--ease), transform .45s var(--ease-glass);
  pointer-events:none;
}
.btn:hover::before{opacity:.5; transform:translateX(0)}
.btn:active{transform:scale(.965); transition-duration:.1s}
.btn-ink{
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.22), transparent 48%),
    linear-gradient(180deg, #17191d, var(--ink) 58%, #050608);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 8px 22px -12px rgba(14,15,18,.42);
}
.btn-ink:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn-ghost{
  background:rgba(255,255,255,.22);
  color:var(--ink);
  border:0.5px solid rgba(255,255,255,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 8px 22px -18px rgba(14,15,18,.18);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.4);
  border-color:rgba(14,15,18,.18);
  transform:translateY(-1px);
}
.btn-glass{
  background:var(--glass-specular), var(--glass-2-bg); color:var(--ink);
  backdrop-filter:var(--glass-2-blur);
  border:0.5px solid var(--glass-2-border);
  box-shadow:var(--glass-2-shadow);
}

/* ━━━━━━━━━━━ PAGE: HOME ━━━━━━━━━━━ */
.page-home{
  grid-template-columns:1.05fr 1fr; gap:0;
  --home-color:#86A697;
  --home-accent:var(--home-color);
  --home-ink:#101314;
  --home-photo-filter:saturate(.78) contrast(.97) brightness(1.02);
  background:
    linear-gradient(135deg,
      rgba(247,249,249,.16) 0%,
      rgba(237,241,241,.08) 48%,
      rgba(248,249,248,.14) 100%);
  overflow:hidden;
}
@media (max-width:900px){.page-home{grid-template-columns:1fr; grid-template-rows:1fr 1fr}}
.home-left{
  padding:clamp(28px,4.2vw,58px) clamp(32px,5vw,72px) clamp(18px,2.4vw,32px);
  display:flex; flex-direction:column;
  justify-content:space-between; min-height:0;
  overflow:hidden;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.26) 0%,
      rgba(245,247,248,.14) 48%,
      rgba(255,255,255,.2) 100%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--home-color) 18%, transparent) 0%,
      color-mix(in srgb, var(--home-color) 24%, transparent) 48%,
      color-mix(in srgb, var(--home-color) 12%, transparent) 100%);
  transition:background .35s var(--ease);
}
.home-left > div:first-child{
  min-height:0;
  display:flex;
  flex-direction:column;
}
.home-left .h-display{
  margin-top:clamp(10px,1.5vh,18px) !important;
  font-size:clamp(44px,5.2vw,78px);
}
.home-left .lede{
  margin-top:clamp(12px,1.8vh,20px) !important;
  line-height:1.62;
}
.page-home .btn-ink{
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.22), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-ink) 72%, #fff 8%), var(--home-ink) 58%, #050608);
}
.page-home .btn-ink:hover{filter:brightness(1.08); transform:translateY(-1px)}
.page-home .btn-ghost:hover{background:color-mix(in srgb, var(--home-accent, var(--accent)) 9%, transparent)}
.home-left .meta-row{
  display:flex; gap:clamp(18px,2.4vw,28px); flex-wrap:wrap;
  margin-top:clamp(12px,1.8vh,18px);
  font-size:12.5px; color:var(--ink-3);
}
.home-left .meta-row b{
  color:var(--ink); font-weight:500; font-size:13.5px;
  display:block; margin-top:3px;
}
.home-left .actions{
  display:flex; gap:10px;
  margin-top:clamp(18px,2.6vh,26px);
  flex-wrap:wrap;
}
.home-lower{
  flex:none;
  position:relative;
  min-height:0;
  height:clamp(118px,16vh,148px);
  margin-top:auto;
  padding-top:clamp(12px,1.6vh,16px);
  padding-bottom:0;
  border-top:0.5px solid var(--hairline);
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}
.home-color-pad{
  display:grid;
  grid-template-columns:62px minmax(0,392px);
  align-items:center;
  gap:14px;
  width:min(540px,100%);
  max-width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.home-tone-dial{
  position:relative;
  width:62px;
  height:62px;
  border-radius:50%;
  border:0.5px solid rgba(14,15,18,.14);
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.62), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.34), rgba(238,244,243,.24) 46%, rgba(255,255,255,.38)),
    color-mix(in srgb, var(--wheel-current) 82%, #edf1f1 18%);
  background-blend-mode:screen, screen, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 18px rgba(14,15,18,.08),
    0 8px 18px -17px rgba(14,15,18,.34);
  cursor:grab;
  touch-action:none;
  outline:none;
  overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.home-tone-dial::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(245,248,247,.32), rgba(245,248,247,.12));
  pointer-events:none;
}
.page-home.is-tone-original .home-tone-dial{
  border-color:rgba(14,15,18,.12);
}
.home-tone-dial:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -10px 18px rgba(14,15,18,.08),
    0 8px 18px -17px rgba(14,15,18,.34);
}
.home-tone-dial:focus-visible{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -10px 18px rgba(14,15,18,.08),
    0 8px 18px -17px rgba(14,15,18,.34);
  outline:0.5px solid rgba(14,15,18,.22);
  outline-offset:2px;
}
.home-tone-dial.is-dialing{
  cursor:grabbing;
  transform:scale(1.03);
}
.home-tone-copy{
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.home-tone-copy > span{
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1;
  letter-spacing:0;
}
.home-tone-copy b{
  color:var(--home-ink);
  font-family:var(--serif);
  font-size:16px;
  font-weight:400;
  line-height:1.14;
  transition:color .25s var(--ease);
}
.home-tone-copy small{
  color:var(--ink-3);
  font-size:10.5px;
  line-height:1.1;
  white-space:nowrap;
}
.home-tone-beads{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:5px;
  padding:3px 2px 6px;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--home-color) 42%, rgba(14,15,18,.18)) transparent;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.home-tone-beads::-webkit-scrollbar{height:3px}
.home-tone-beads::-webkit-scrollbar-track{background:transparent}
.home-tone-beads::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--home-color) 44%, rgba(14,15,18,.18));
  border-radius:999px;
}
.home-tone-beads button{
  width:12px;
  height:12px;
  flex:none;
  border-radius:0;
  border:0.5px solid rgba(14,15,18,.16);
  background:color-mix(in srgb, var(--swatch) 72%, #edf1f1 28%);
  cursor:pointer;
  box-shadow:none;
  transition:background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.home-tone-beads button:hover,
.home-tone-beads button.is-active{
  border-color:rgba(14,15,18,.42);
  background:color-mix(in srgb, var(--swatch) 86%, #edf1f1 14%);
}
.home-tone-beads button:focus-visible{
  outline:1px solid var(--home-accent);
  outline-offset:2px;
}

.home-right{
  position:relative;
  overflow:hidden;
  background:rgba(237,241,241,.1);
  border-left:0.5px solid rgba(255,255,255,.42);
}
.home-right::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(16,19,20,.08)),
    linear-gradient(90deg, rgba(14,15,18,.02), transparent 44%);
  pointer-events:none;
}
.home-right .feat{position:absolute; inset:0}
.home-right .feat img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.62) contrast(.94) brightness(1.01);
}
.home-right .badge{
  position:absolute; top:18px; right:18px;
  padding:6px 12px; border-radius:999px;
  font-size:12px; color:var(--ink); font-weight:500;
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.home-right .badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:#7d8784; animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.3)}}
.home-right-dock{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
  padding:12px 16px 10px;
  border-radius:22px;
  display:grid;
  grid-template-columns:minmax(238px, auto) minmax(0, 1fr);
  grid-template-areas:
    "actions meta"
    "caption caption";
  column-gap:18px;
  row-gap:8px;
  align-items:start;
}
.home-right-dock .actions{
  grid-area:actions;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0;
  align-self:start;
}
.home-right-dock .actions .btn{
  min-width:0;
  padding:10px 18px;
  font-size:13px;
  gap:8px;
}
.home-right-meta{
  grid-area:meta;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px 16px;
  margin:0;
  padding-top:2px;
  font-size:11px;
  color:var(--ink-3);
}
.home-right-meta > div{
  min-width:0;
}
.home-right-meta b{
  display:block;
  margin-top:2px;
  color:var(--ink);
  font-size:12.5px;
  font-weight:500;
  line-height:1.3;
}
.home-right .caption{
  grid-area:caption;
  position:static;
  padding:8px 0 0;
  border-radius:0;
  border-top:0.5px solid rgba(255,255,255,.24);
  background:transparent;
  box-shadow:none;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-end;
}
.home-right .caption .l{font-family:var(--serif); font-size:13px; color:var(--ink)}
.home-right .caption .r{font-size:11px; color:var(--ink-3); white-space:nowrap; text-align:right}
@media (max-width:1180px){
  .home-right-dock{
    grid-template-columns:1fr;
    grid-template-areas:
      "actions"
      "meta"
      "caption";
    row-gap:10px;
  }
}
@media (max-width:900px){
  .home-right-dock{
    padding:14px 14px 12px;
    gap:10px;
    grid-template-columns:1fr;
    grid-template-areas:
      "actions"
      "meta"
      "caption";
  }
  .home-right-meta{
    grid-template-columns:1fr;
    gap:8px;
  }
  .home-right .caption{
    flex-direction:column;
    align-items:flex-start;
  }
  .home-right .caption .r{
    text-align:left;
    white-space:normal;
  }
}
@media (max-width:680px){
  .home-lower{
    height:116px;
  }
  .home-color-pad{
    grid-template-columns:56px minmax(0,1fr);
    gap:12px;
    width:min(320px,100%);
  }
  .home-tone-dial{
    width:56px;
    height:56px;
  }
  .home-tone-beads{
    gap:3px;
  }
  .home-tone-beads button{
    width:10px;
    height:10px;
  }
  .home-right-dock .actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* ━━━━━━━━━━━ PAGE: ABOUT ━━━━━━━━━━━ */
.page-about{grid-template-columns:.9fr 1.1fr; gap:0}
@media (max-width:900px){.page-about{grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow-y:auto}}
.about-portrait{position:relative; overflow:hidden; background:var(--paper-2)}
.about-portrait svg{width:100%; height:100%; display:block}
.about-portrait .quote{
  position:absolute; bottom:24px; left:24px; right:24px;
  padding:14px 18px; border-radius:var(--r-md);
  font-family:var(--serif); font-size:15px; color:var(--ink);
  line-height:1.6;
}
.about-text{padding:clamp(32px,4.5vw,64px); overflow-y:auto; min-height:0}
.about-text h1{margin:14px 0 24px}
.about-text p{font-size:14.5px; line-height:1.85; color:var(--ink-2); margin:0 0 16px}
.about-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin-top:32px; padding-top:24px; border-top:0.5px solid var(--hairline);
}
.about-facts dt{font-size:12px; color:var(--ink-3); margin-bottom:4px}
.about-facts dd{margin:0; font-family:var(--serif); font-size:18px; color:var(--ink)}
@media (max-width:560px){.about-facts{grid-template-columns:repeat(2,1fr)}}

/* ━━━━━━━━━━━ PAGE: WORKS ━━━━━━━━━━━ */
.page-works{grid-template-rows:auto 1fr; gap:0; padding:0}
.works-bar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:12px 16px;
  padding:18px 26px;
  border-bottom:0.5px solid var(--hairline);
}
.works-bar .title{font-family:var(--serif); font-size:20px; font-weight:400; color:var(--ink)}
.works-bar .title em{font-style:normal; color:var(--ink-3); margin-right:6px}
.works-bar-head{
  display:contents;
}

.works-bar-head.has-post-entry{
  width:auto;
  flex:none;
}

.works-bar .filter-pills,
.works-bar .sliding-pills{
  grid-column:1 / -1;
}

.works-post-entry{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  border:1px solid rgba(17,18,22,.1);
  border-radius:999px;
  padding:0 13px 0 10px;
  color:#111216;
  background:rgba(255,255,255,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 12px 28px -22px rgba(17,18,22,.28);
}

.works-post-entry span{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#111216;
  font-size:16px;
  line-height:1;
}

.works-post-entry b{
  font-size:13px;
  font-weight:600;
}

.work-post-composer{
  position:fixed;
  inset:0;
  z-index:2400;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.72);
  font-family:var(--sans);
  pointer-events:auto;
  isolation:isolate;
}

.work-post-screen{
  position:relative;
  z-index:1;
  width:min(430px, 100vw);
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  color:#eef2f5;
  background:#071014;
}

.work-post-topbar{
  position:relative;
  z-index:3;
  min-height:72px;
  display:grid;
  grid-template-columns:52px 1fr 72px;
  align-items:center;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.work-post-topbar strong{
  justify-self:center;
  font-size:18px;
  font-weight:700;
}

.work-post-back,
.work-post-next{
  position:relative;
  z-index:4;
  border:0;
  color:#eef2f5;
  background:transparent;
  pointer-events:auto;
}

.work-post-back{
  width:38px;
  height:38px;
  font-size:44px;
  line-height:.68;
}

.work-post-next{
  justify-self:end;
  opacity:.5;
  font-size:13px;
}

.work-post-body{
  min-height:0;
  overflow:auto;
  padding:22px 18px 96px;
  -webkit-overflow-scrolling:touch;
}

.work-post-preview{
  position:relative;
  width:min(250px, 70vw);
  margin:0 auto 28px;
  overflow:hidden;
  border-radius:18px;
  background:#f0f2f3;
  isolation:isolate;
  box-shadow:0 18px 48px -28px rgba(0,0,0,.65);
}

.work-post-file-input,
.work-post-preview input{
  position:absolute;
  inset:0;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.work-post-image-drop{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px dashed rgba(238,242,245,.24);
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    #10191d;
}

.work-post-main-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#10191d;
}

.work-post-main-preview{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  display:block;
  overflow:hidden;
  background:#10191d;
}

.work-post-main-preview img{
  transition:filter .24s ease, transform .24s ease;
}

.work-post-empty-call{
  width:84px;
  height:84px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(238,242,245,.72);
  background:rgba(255,255,255,.08);
  font-size:13px;
  font-weight:700;
}

.work-post-preview-upload{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:5;
  border:0;
  border-radius:999px;
  padding:7px 11px;
  color:#071014;
  background:rgba(238,242,245,.92);
  font-size:12px;
  font-weight:800;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.7);
}

.work-post-preview::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(180deg, rgba(246,248,249,.62) 0%, rgba(246,248,249,.22) 30%, rgba(246,248,249,.04) 52%, rgba(246,248,249,.74) 100%),
    linear-gradient(90deg, rgba(246,248,249,.56), rgba(246,248,249,.06) 48%, rgba(246,248,249,.42)),
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.88), rgba(255,255,255,.34) 26%, transparent 58%);
  transition:opacity .22s ease;
}

.work-post-preview.has-cover-fog::after{
  opacity:var(--cover-fog-strength, .56);
}

.work-post-preview.has-cover-fog .work-post-main-preview img{
  filter:saturate(.95) contrast(.97) brightness(.98);
}

.work-post-caption{
  width:100%;
  min-height:96px;
  border:0;
  outline:0;
  resize:none;
  color:#eef2f5;
  background:transparent;
  font-size:16px;
  line-height:1.6;
}

.work-post-caption::placeholder{
  color:rgba(238,242,245,.48);
}

.work-post-upload{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px dashed rgba(238,242,245,.24);
  border-radius:16px;
  padding:0 12px 0 14px;
  color:rgba(238,242,245,.82);
  background:rgba(255,255,255,.055);
  font-size:14px;
  font-weight:650;
}

.work-post-upload::after{
  content:"上傳";
  flex:none;
  border-radius:999px;
  padding:6px 10px;
  color:#071014;
  background:#eef2f5;
  font-size:12px;
}

.work-post-upload input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.work-post-photo-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:0 0 12px;
  min-height:58px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.work-post-photo-strip::-webkit-scrollbar{
  display:none;
}

.work-post-photo-strip.is-empty{
  min-height:auto;
  padding:0 2px 10px;
  color:rgba(238,242,245,.46);
  font-size:13px;
}

.work-post-photo-strip figure{
  position:relative;
  flex:0 0 56px;
  height:56px;
  margin:0;
  overflow:hidden;
  border-radius:11px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  cursor:grab;
  touch-action:none;
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.work-post-photo-strip figure.is-dragging{
  z-index:3;
  opacity:.72;
  cursor:grabbing;
  transform:scale(.94);
}

.work-post-photo-strip figure.is-drop-target{
  border-color:rgba(238,242,245,.72);
  box-shadow:0 0 0 3px rgba(238,242,245,.12);
  transform:translateY(-4px) scale(1.04);
}

.work-post-photo-strip img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}

.work-post-thumb-preview{
  width:100%;
  height:100%;
  border:0;
  padding:0;
  display:block;
  overflow:hidden;
  background:transparent;
  touch-action:none;
}

.work-post-photo-strip figcaption{
  position:absolute;
  left:5px;
  bottom:5px;
  width:auto;
  min-width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0 5px;
  color:#fff;
  background:rgba(7,16,20,.58);
  font-size:8px;
  font-weight:700;
  line-height:1;
  text-shadow:none;
}

.work-post-photo-strip button{
  position:absolute;
  top:3px;
  right:3px;
  width:20px;
  height:20px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  color:#fff;
  background:rgba(7,16,20,.58);
  font-size:15px;
  line-height:16px;
}

.work-post-photo-strip .work-post-thumb-preview{
  position:static;
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:inherit;
  line-height:normal;
}

.work-post-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  grid-template-rows:1fr auto;
  place-items:center;
  padding:calc(18px + env(safe-area-inset-top)) 0 calc(26px + env(safe-area-inset-bottom));
  background:rgba(3,7,9,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:workPostLightboxIn .22s cubic-bezier(.2,.8,.2,1) both;
}

.work-post-lightbox-stage{
  position:relative;
  width:100vw;
  min-height:54vh;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:workPostStageIn .28s cubic-bezier(.2,.8,.2,1) both;
}

.work-post-lightbox-stage img{
  max-width:100vw;
  max-height:78vh;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 28px 60px -34px rgba(0,0,0,.84);
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}

.work-post-lightbox-image{
  transform:translateX(var(--preview-drag-x, 0px));
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
  animation:workPostImageSettle .34s cubic-bezier(.2,.8,.2,1) both;
}

.work-post-lightbox-image.is-next{
  animation:workPostImageNext .38s cubic-bezier(.2,.8,.2,1) both;
}

.work-post-lightbox-image.is-prev{
  animation:workPostImagePrev .38s cubic-bezier(.2,.8,.2,1) both;
}

.work-post-lightbox-close{
  position:fixed;
  top:calc(12px + env(safe-area-inset-top));
  right:16px;
  z-index:2;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#eef2f5;
  background:rgba(255,255,255,.10);
  font-size:24px;
  line-height:34px;
}

.work-post-lightbox-arrow{
  position:absolute;
  top:50%;
  z-index:2;
  width:40px;
  height:56px;
  border:0;
  border-radius:999px;
  color:#eef2f5;
  background:rgba(7,16,20,.38);
  font-size:38px;
  line-height:48px;
  transform:translateY(-50%);
}

.work-post-lightbox-arrow{
  display:none !important;
}

.work-post-lightbox-arrow.is-prev{
  left:10px;
}

.work-post-lightbox-arrow.is-next{
  right:10px;
}

.work-post-lightbox-count{
  align-self:end;
  border-radius:999px;
  padding:7px 12px;
  color:#eef2f5;
  background:rgba(255,255,255,.10);
  font-size:12px;
  font-weight:700;
}

@keyframes workPostLightboxIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes workPostStageIn{
  from{opacity:0; transform:translateY(12px) scale(.982)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

@keyframes workPostImageSettle{
  from{opacity:.72; transform:translateX(var(--preview-drag-x, 0px)) scale(.986)}
  to{opacity:1; transform:translateX(var(--preview-drag-x, 0px)) scale(1)}
}

@keyframes workPostImageNext{
  from{opacity:.46; transform:translateX(64px) scale(.99)}
  to{opacity:1; transform:translateX(var(--preview-drag-x, 0px)) scale(1)}
}

@keyframes workPostImagePrev{
  from{opacity:.46; transform:translateX(-64px) scale(.99)}
  to{opacity:1; transform:translateX(var(--preview-drag-x, 0px)) scale(1)}
}

.work-post-input{
  width:100%;
  min-height:44px;
  border:0;
  border-bottom:1px solid rgba(238,242,245,.12);
  outline:0;
  color:#eef2f5;
  background:transparent;
  font-size:16px;
}

.work-post-input::placeholder{
  color:rgba(238,242,245,.42);
}

.work-post-delete{
  width:100%;
  min-height:46px;
  border:1px solid rgba(255,112,112,.35);
  border-radius:14px;
  color:#ffd7d7;
  background:rgba(255,73,73,.10);
  font-weight:700;
}

.work-post-error{
  border-radius:12px;
  padding:10px 12px;
  color:#ffd8d8;
  background:rgba(255,82,82,.12);
  font-size:13px;
  line-height:1.5;
}

.work-manage-entry{
  position:absolute;
  top:8px;
  left:8px;
  z-index:4;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  padding:5px 8px;
  color:#fff;
  background:rgba(14,15,18,.62);
  font-size:11px;
  font-weight:700;
  box-shadow:0 8px 18px -12px rgba(0,0,0,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.work-post-quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 20px;
  align-items:flex-start;
}

.work-post-category-control{
  display:grid;
  gap:10px;
  position:relative;
}

.work-post-quick-actions button,
.work-post-category-panel input{
  min-height:42px;
  border:0;
  border-radius:10px;
  padding:0 14px;
  color:#edf2f5;
  background:#171e23;
  font-weight:650;
}

.work-post-quick-actions button.is-active{
  color:#071014;
  background:#eef2f5;
}

.work-post-category-panel{
  position:static;
  width:min(250px, calc(100vw - 54px));
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(19,26,31,.98);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.75);
}

.work-post-category-current{
  margin-bottom:10px;
  color:rgba(238,242,245,.62);
  font-size:12px;
  font-weight:600;
}

.work-post-category-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.work-post-category-list button{
  min-height:34px;
  border-radius:999px;
  padding:0 11px;
  color:rgba(238,242,245,.78);
  background:rgba(255,255,255,.06);
}

.work-post-category-list button.is-selected{
  color:#071014;
  background:#eef2f5;
}

.work-post-category-panel input{
  width:100%;
  color:#eef2f5;
  background:rgba(255,255,255,.075);
  font-size:14px;
}

.work-post-category-panel input::placeholder{
  color:rgba(238,242,245,.46);
}

.work-post-category-create{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
}

.work-post-category-create button{
  min-width:64px;
  border-radius:10px;
  padding:0 12px;
}

.work-post-fog-control{
  display:grid;
  gap:10px;
  margin:-6px 0 18px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.045);
}

.work-post-fog-control.is-disabled{
  opacity:.48;
}

.work-post-fog-control > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#eef2f5;
  font-size:13px;
  font-weight:650;
}

.work-post-fog-control input{
  width:100%;
}

.work-post-options{
  display:grid;
  gap:2px;
  border-top:1px solid rgba(255,255,255,.06);
}

.work-post-options button{
  min-height:62px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  border:0;
  color:#eef2f5;
  background:transparent;
  text-align:left;
}

.work-post-options span{
  color:#fff;
  font-size:26px;
  text-align:center;
}

.work-post-options b{
  font-size:17px;
  font-weight:600;
}

.work-post-options em{
  min-width:48px;
  border-radius:999px;
  padding:4px 10px;
  color:#fff;
  background:#0a8dff;
  font-size:12px;
  font-style:normal;
  font-weight:800;
  text-align:center;
}

.work-post-options i{
  color:rgba(238,242,245,.48);
  font-size:30px;
  font-style:normal;
}

.work-post-footer{
  padding:12px 18px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(7,16,20,.92);
}

.work-post-footer button{
  width:100%;
  min-height:54px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:#4964ff;
  font-size:17px;
  font-weight:800;
}

.filter-pills{
  display:flex; flex-wrap:wrap; gap:3px;
  padding:3px; border-radius:999px;
  background:var(--glass-specular), var(--glass-3-bg);
  backdrop-filter:var(--glass-3-blur);
  -webkit-backdrop-filter:var(--glass-3-blur);
  border:0.5px solid var(--glass-3-border);
  box-shadow:var(--glass-3-shadow);
  position:relative;
  overflow:hidden;
}
/* goo filter removed from pill containers — it swallowed sub-pixel text.
   Liquid feel comes from spring easing + stretch + translucent backdrop. */
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator{
  position:absolute; top:3px; left:0; height:calc(100% - 6px);
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.24), transparent 48%),
    linear-gradient(180deg, #17191d, var(--ink) 58%, #050608);
  border-radius:999px;
  transform:translateX(var(--x,0));
  width:var(--w,0);
  opacity:0;
  transition:
    transform .54s var(--ease-glass),
    width    .54s var(--ease-glass),
    opacity  .22s ease-out;
  z-index:0; pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 7px 18px -9px rgba(14,15,18,.38);
  will-change:transform,width;
}
.filter-pills .pill-indicator.is-visible,
.sliding-pills .pill-indicator.is-visible{opacity:1}
[data-pill-style="spotlight"] .filter-pills .pill-indicator.is-entering,
[data-pill-style="spotlight"] .sliding-pills .pill-indicator.is-entering{
  animation:pill-enter .38s cubic-bezier(.34,1.3,.5,1);
}
.filter-pills button,
.sliding-pills.filter-pills button{
  position:relative; z-index:1;
  padding:6px 12px; border-radius:999px; font-size:12.5px;
  background:transparent; border:none; cursor:pointer; color:var(--ink-2);
  transition:color .35s var(--ease), transform .2s var(--ease-press); font-family:var(--sans);
}
.filter-pills button:hover,
.sliding-pills.filter-pills button:hover{color:var(--ink); transform:translateY(-.5px)}
.filter-pills button:active,
.sliding-pills.filter-pills button:active{transform:scale(.94)}
.filter-pills button.active,
.sliding-pills.filter-pills button.active{color:#fff; background:transparent}

/* Generic sliding-pills (used for booking steps row, etc) */
.sliding-pills{
  display:flex; gap:2px; padding:3px; border-radius:999px;
  background:var(--glass-specular), var(--glass-3-bg);
  backdrop-filter:var(--glass-3-blur);
  -webkit-backdrop-filter:var(--glass-3-blur);
  border:0.5px solid var(--glass-3-border);
  box-shadow:var(--glass-3-shadow);
  position:relative;
  overflow:hidden;
}
.sliding-pills button{
  position:relative; z-index:1;
  padding:7px 14px; border-radius:999px; font-size:12.5px;
  background:transparent; border:none; cursor:pointer; color:var(--ink-2);
  transition:color .35s var(--ease), transform .2s var(--ease-press); font-family:var(--sans); white-space:nowrap;
}
.sliding-pills button:hover{color:var(--ink); transform:translateY(-.5px)}
.sliding-pills button:active{transform:scale(.94)}
.sliding-pills button.active{color:#fff}

.works-stage{position:relative; overflow:hidden; min-height:0}

/* GRID */
.works-grid{
  position:absolute; inset:0; padding:22px;
  display:grid; grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (max-width:1100px){.works-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:680px){.works-grid{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,minmax(0,1fr)); overflow-y:auto; position:static; height:100%}}

.work-tile{
  position:relative; overflow:hidden; border-radius:var(--r-md); cursor:pointer;
  background:var(--paper-2);
  border:0.5px solid rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 26px -18px rgba(14,15,18,.26);
  transition:transform .42s var(--ease-glass), box-shadow .42s var(--ease-glass), filter .35s var(--ease);
}
.work-tile:hover{
  transform:translateY(-3px) scale(1.008);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    0 18px 34px -18px rgba(14,15,18,.32);
}
.work-tile:active{transform:translateY(-1px) scale(.992)}
.work-tile .work-media{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.75)}
.work-tile video.work-media{background:var(--paper-2)}
.work-media-badge{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:700 10px/1 var(--sans);
  color:#fff;
  background:rgba(14,15,18,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.work-tile .meta{
  position:absolute; inset:auto 0 0 0; padding:12px 14px 10px;
  background:linear-gradient(180deg,transparent,rgba(14,15,18,.8));
  color:#fff; opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.work-tile:hover .meta{opacity:1; transform:translateY(0)}
.work-tile .meta .t{font-family:var(--serif); font-size:14px}
.work-tile .meta .s{font-size:11.5px; opacity:.75; margin-top:2px}

/* CAROUSEL */
.works-carousel{
  position:absolute; inset:0; padding:22px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
}
.carousel-stage{height:100%; min-width:0; position:relative;
  display:flex; align-items:center; justify-content:center}
.carousel-track{display:flex; gap:12px; height:100%; align-items:center;
  transition:transform .55s var(--ease)}
.carousel-card{
  flex:0 0 auto; height:100%; aspect-ratio:4/5;
  border-radius:var(--r-md); overflow:hidden; cursor:pointer;
  border:0.5px solid rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 14px 32px -16px rgba(14,15,18,.3);
  transition:transform .46s var(--ease-glass), opacity .4s var(--ease), box-shadow .35s var(--ease);
  opacity:.4; transform:scale(.85);
}
.carousel-card.center{opacity:1; transform:scale(1)}
.carousel-card.center:hover{transform:translateY(-3px) scale(1.01)}
.carousel-card img,
.carousel-card .work-media{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.75)}
.carousel-arrow{
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--ink);
}
.carousel-counter{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  padding:5px 12px; border-radius:999px; font-size:11.5px; color:var(--ink-2);
}

/* MOSAIC */
.works-mosaic{
  position:absolute; inset:0; padding:22px;
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:1fr 1fr; gap:10px;
}
@media (max-width:900px){.works-mosaic{display:none}}

/* FOCUS MODAL */
.work-focus{
  position:fixed; inset:0; z-index:100;
  background:rgba(14,15,18,.34);
  backdrop-filter:blur(28px) saturate(180%);
  display:grid; place-items:center; padding:30px;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.work-focus.open{opacity:1; pointer-events:all}
.work-focus .modal{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  width:min(1100px,100%); max-height:88vh;
  background:var(--glass-specular), rgba(255,255,255,.82);
  backdrop-filter:blur(48px) saturate(190%);
  -webkit-backdrop-filter:blur(48px) saturate(190%);
  border-radius:var(--r-xl); overflow:hidden;
  border:0.5px solid var(--glass-1-border);
  box-shadow:var(--glass-1-shadow), 0 40px 80px -24px rgba(14,15,18,.28);
  position:relative;
}
@media (max-width:780px){.work-focus .modal{grid-template-columns:1fr; max-height:92vh; overflow-y:auto}}
.work-focus-media{
  min-height:0;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.work-focus-media::-webkit-scrollbar{display:none}
.work-focus-media img,
.work-focus-media video{width:100%; height:100%; object-fit:cover; max-height:88vh; display:block; filter:saturate(.8); scroll-snap-align:start; background:var(--paper-2)}
.work-focus .info{padding:34px 34px 30px; overflow-y:auto}
.work-focus .close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background:var(--glass-2-bg); backdrop-filter:var(--glass-2-blur);
  border:0.5px solid var(--glass-2-border); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--glass-2-shadow);
  z-index:2; color:var(--ink);
}

/* ━━━━━━━━━━━ PAGE: PROCESS ━━━━━━━━━━━ */
.page-process{grid-template-rows:auto 1fr; gap:0}
.process-head{padding:36px clamp(32px,4vw,52px) 20px; max-width:900px}
.process-head .h-section{margin-top:14px}
.process-grid{
  flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  padding:0 clamp(22px,4vw,44px) clamp(22px,4vw,44px);
  min-height:0;
}
@media (max-width:900px){.process-grid{grid-template-columns:repeat(2,1fr); grid-template-rows:1fr 1fr}}
@media (max-width:560px){.process-grid{grid-template-columns:1fr; grid-template-rows:repeat(4,1fr); overflow-y:auto}}
.proc-card{
  padding:26px; border-radius:var(--r-lg);
  display:flex; flex-direction:column; min-height:0;
}
.proc-card .num{
  font-family:var(--serif); font-size:42px; line-height:1;
  color:var(--ink); margin-bottom:16px;
}
.proc-card h3{font-family:var(--serif); font-weight:500; font-size:19px; margin:0 0 4px; color:var(--ink)}
.proc-card .en{font-family:var(--sans); font-size:12px; color:var(--ink-3); margin-bottom:12px}
.proc-card p{font-size:13px; line-height:1.7; color:var(--ink-2); margin:0}
.proc-card .dur{
  margin-top:auto; padding-top:16px;
  font-size:11.5px; color:var(--ink-3);
  display:flex; align-items:center;
}

/* ━━━━━━━━━━━ PAGE: BOOKING ━━━━━━━━━━━ */
.page-book{grid-template-columns:236px 1fr; gap:0}
@media (max-width:780px){.page-book{grid-template-columns:1fr; grid-template-rows:auto 1fr}}
.book-rail{
  padding:22px 14px;
  border-right:0.5px solid var(--hairline);
  display:flex; flex-direction:column; gap:2px; overflow-y:auto; min-height:0;
}
@media (max-width:780px){
  .book-rail{flex-direction:row; overflow-x:auto; border-right:none;
    border-bottom:0.5px solid var(--hairline); padding:12px}
}
.book-rail .step{
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--r-md);
  cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease-press), box-shadow .25s var(--ease); white-space:nowrap;
  background:transparent; border:none; font-family:var(--sans); font-size:13px; color:var(--ink-2);
  text-align:left;
}
.book-rail .step:hover{background:rgba(255,255,255,.32); color:var(--ink); transform:translateX(1px)}
.book-rail .step:active{transform:scale(.975)}
.book-rail .step .num{
  width:22px; height:22px; border-radius:50%;
  background:rgba(14,15,18,.07); color:var(--ink-2);
  display:grid; place-items:center; font-size:11px; font-weight:500;
}
.book-rail .step.active{
  background:var(--glass-specular), var(--glass-2-bg); color:var(--ink); font-weight:500;
  backdrop-filter:var(--glass-2-blur);
  -webkit-backdrop-filter:var(--glass-2-blur);
  border:0.5px solid var(--glass-2-border);
  box-shadow:var(--glass-2-shadow);
}
.book-rail .step.active .num{background:var(--ink); color:#fff}
.book-rail .step.done .num{background:var(--ink-2); color:#fff}
.book-rail .step.done .num::after{content:"✓"}
.book-rail .step.done .num .n{display:none}
.book-rail .step .lbl{display:flex; flex-direction:column; line-height:1.2}
.book-rail .step .lbl .en{font-size:11px; color:var(--ink-3); margin-top:2px}

.book-panel{
  padding:30px clamp(22px,3.5vw,44px); display:flex; flex-direction:column;
  overflow-y:auto; min-height:0;
}
.book-panel .head{margin-bottom:18px; padding-bottom:14px; border-bottom:0.5px solid var(--hairline)}
.book-panel .head .pos{font-size:12px; color:var(--ink-3)}
.book-panel .head h3{font-family:var(--serif); font-size:23px; font-weight:400; margin:6px 0 4px; color:var(--ink)}
.book-panel .head p{margin:0; color:var(--ink-2); font-size:13px}
.book-panel .body{flex:1; min-height:0}
.book-panel .nav{
  margin-top:18px; padding-top:16px; border-top:0.5px solid var(--hairline);
  display:flex; justify-content:space-between; gap:12px;
}

/* FORM ATOMS */
.form-row{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:12px}
.form-row.full{grid-template-columns:1fr}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.field label{display:block; font-size:12px; color:var(--ink-3); margin-bottom:6px; font-weight:500}
.field input,.field select,.field textarea{
  width:100%; padding:10px 12px;
  border:0.5px solid rgba(255,255,255,.58);
  background:rgba(255,255,255,.34);
  border-radius:var(--r-sm);
  font-family:var(--sans); font-size:13px; color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 1px 2px rgba(14,15,18,.035);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease-press);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:rgba(14,15,18,.24); background:rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 0 0 3px rgba(255,255,255,.44),
    0 10px 24px -20px rgba(14,15,18,.22);
  transform:translateY(-1px);
}
.field textarea{min-height:70px; resize:vertical}

.chip-group{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  padding:7px 13px; border:0.5px solid var(--hairline-2);
  background:rgba(255,255,255,.3); border-radius:999px;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  cursor:pointer; font-size:12.5px; color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .2s var(--ease-press), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  display:inline-flex; align-items:center; gap:6px; font-family:var(--sans);
}
.chip:hover{border-color:rgba(14,15,18,.24); background:rgba(255,255,255,.56); transform:translateY(-1px)}
.chip:active{transform:scale(.965)}
.chip.sel{
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.24), transparent 48%),
    linear-gradient(180deg, #17191d, var(--ink) 58%, #050608);
  color:#fff; border-color:rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 22px -14px rgba(14,15,18,.38);
}

.upload{
  border:1px dashed var(--hairline-2); border-radius:var(--r-md);
  padding:26px 16px; text-align:center; cursor:pointer;
  transition:transform .25s var(--ease-press), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  background:var(--glass-specular), rgba(255,255,255,.28);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--glass-3-shadow);
}
.upload:hover{border-color:rgba(14,15,18,.25); background:var(--glass-specular), rgba(255,255,255,.52); transform:translateY(-1px)}
.upload:active{transform:scale(.99)}
.upload .ic{
  width:34px; height:34px; margin:0 auto 10px; border-radius:50%;
  background:rgba(14,15,18,.06); display:grid; place-items:center; color:var(--ink-2);
}
.upload .t{font-family:var(--serif); font-size:16px; color:var(--ink)}
.upload .s{font-size:11px; color:var(--ink-3); margin-top:2px}
.upl-prev{display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; margin-top:12px}
.upl-prev .p{aspect-ratio:1; border-radius:var(--r-sm); background:var(--paper-2); position:relative; overflow:hidden}
.upl-prev .p img{width:100%; height:100%; object-fit:cover; display:block}
.upl-prev .p .x{
  position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius:50%;
  background:rgba(14,15,18,.8); color:#fff; display:grid; place-items:center;
  font-size:10px; cursor:pointer;
}

/* BODY PICKER */
.body-picker{display:grid; grid-template-columns:160px 1fr; gap:16px; align-items:start}
@media (max-width:560px){.body-picker{grid-template-columns:1fr}}
.body-svg-wrap{
  aspect-ratio:1/2; background:rgba(255,255,255,.4);
  border:0.5px solid var(--hairline); border-radius:var(--r-md); padding:14px;
}
.body-svg-wrap svg{width:100%; height:100%}
.body-part{
  fill:rgba(14,15,18,.06); stroke:rgba(14,15,18,.18); stroke-width:.5;
  cursor:pointer; transition:fill .2s var(--ease);
}
.body-part:hover{fill:rgba(14,15,18,.16)}
.body-part.sel{fill:var(--ink)}

/* CALENDAR */
.cal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.cal-head h4{font-family:var(--serif); font-weight:400; font-size:18px; margin:0; color:var(--ink)}
.cal-nav{display:flex; gap:6px}
.cal-nav button{
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.3); border:0.5px solid rgba(255,255,255,.55); cursor:pointer;
  display:grid; place-items:center; color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48), 0 6px 16px -14px rgba(14,15,18,.22);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:transform .2s var(--ease-press), background .2s var(--ease), box-shadow .2s var(--ease);
}
.cal-nav button:hover{background:rgba(255,255,255,.56); transform:translateY(-1px)}
.cal-nav button:active{transform:scale(.94)}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.cal-grid .dow{
  text-align:center; font-size:11.5px; color:var(--ink-3);
  padding:6px 0; font-weight:500;
}
.cal-grid .day{
  aspect-ratio:1; display:grid; place-items:center;
  font-size:13px; border-radius:8px; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease-press), box-shadow .2s var(--ease); position:relative;
  color:var(--ink-2); background:transparent; border:none; font-family:var(--sans);
}
.cal-grid .day:hover:not(.disabled):not(.booked){background:rgba(255,255,255,.42); transform:translateY(-1px)}
.cal-grid .day.disabled{color:rgba(14,15,18,.18); cursor:not-allowed}
.cal-grid .day.booked{color:rgba(14,15,18,.28); cursor:not-allowed}
.cal-grid .day.booked::after{
  content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:rgba(14,15,18,.28);
}
.cal-grid .day.avail::after{
  content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:var(--accent);
}
.cal-grid .day.sel{
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.24), transparent 48%),
    linear-gradient(180deg, #17191d, var(--ink) 58%, #050608);
  color:#fff;
  box-shadow:0 7px 16px -10px rgba(14,15,18,.38);
}
.cal-grid .day.today{font-weight:600; color:var(--ink)}

.time-slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:6px; margin-top:14px}
.time-slots .slot{
  padding:9px; border-radius:var(--r-xs);
  background:rgba(255,255,255,.32); border:0.5px solid rgba(255,255,255,.55);
  cursor:pointer; font-size:12px; text-align:center; font-family:var(--mono); color:var(--ink);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .2s var(--ease-press), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.time-slots .slot:hover:not(.disabled){border-color:rgba(14,15,18,.24); background:rgba(255,255,255,.58); transform:translateY(-1px)}
.time-slots .slot:active:not(.disabled){transform:scale(.965)}
.time-slots .slot.sel{
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.24), transparent 48%),
    linear-gradient(180deg, #17191d, var(--ink) 58%, #050608);
  color:#fff; border-color:rgba(255,255,255,.18);
}
.time-slots .slot.disabled{opacity:.3; cursor:not-allowed; text-decoration:line-through}

.summary{
  padding:22px; border-radius:var(--r-lg);
  background:rgba(14,15,18,.95); color:#fff; margin-top:14px;
}
.summary dl{display:grid; grid-template-columns:1fr 2fr; gap:10px 18px; margin:0}
.summary dt{font-size:11.5px; color:rgba(255,255,255,.5); font-weight:500}
.summary dd{margin:0; font-family:var(--serif); font-size:14px}

.book-success{text-align:center; padding:24px}
.book-success .ic{
  display:inline-grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:rgba(14,15,18,.06); margin-bottom:12px;
}
.book-success h3{font-family:var(--serif); font-weight:400; font-size:26px; margin:8px 0; color:var(--ink)}

/* ━━━━━━━━━━━ PAGE: FAQ ━━━━━━━━━━━ */
.page-faq{padding:clamp(28px,4vw,52px); overflow-y:auto; display:block}
.faq-head{max-width:780px; margin-bottom:28px}
.faq-head .h-section{margin-top:14px}
.faq-list{max-width:780px}
.faq-item{border-bottom:0.5px solid var(--hairline)}
.faq-item summary{
  padding:18px 0; list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:18px;
  font-family:var(--serif); font-size:17px; font-weight:400; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; margin-left:auto; font-size:22px; color:var(--ink-3); font-weight:300}
.faq-item[open] summary::after{content:"−"}
.faq-item .num{font-size:12px; color:var(--ink-3)}
.faq-item .ans{padding:0 0 22px 46px; font-size:14px; line-height:1.8; color:var(--ink-2); max-width:64ch}

/* ━━━━━━━━━━━ PAGE: FAQ (letter with inline threads) ━━━━━━━━━━━ */
.page-faq-letter{
  padding:clamp(28px,4vw,52px);
  overflow:hidden;
  display:block;
  position:relative;
}
.letter{
  max-width:760px;
  width:100%;
  height:100%;
  display:flex; flex-direction:column;
  animation:letter-in .5s ease-out;
  transition:max-width .35s cubic-bezier(.32,.72,.24,1);
}
.page-faq-letter.is-consulting .letter{
  max-width:min(760px, calc(100% - 440px));
}
@keyframes letter-in{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:none}
}
.letter-title{
  font-family:var(--serif);
  font-size:clamp(20px, 2vw, 26px);
  font-weight:400;
  line-height:1.35;
  color:var(--ink);
  margin:8px 0 14px;
  letter-spacing:-0.005em;
}
.letter-title em{font-style:italic; color:var(--ink-2)}
.letter-body{margin-bottom:8px; max-width:76ch}
.letter-body p{
  font-family:var(--serif);
  font-size:14px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 8px;
}

.letter-section{margin-top:18px}
.letter-kicker{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:8px;
}

.letter-two{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(280px, 340px) 1fr;
  gap:clamp(32px, 4vw, 60px);
  min-height:0;
  margin-top:22px;
}
.letter-qcol{
  display:flex; flex-direction:column;
  min-height:0;
}
.letter-acol{
  min-height:0;
  overflow-y:auto;
  padding-right:4px;
  padding-top:24px;
  padding-bottom:60px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 60px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 60px), transparent 100%);
}
.letter-acol::-webkit-scrollbar{display:none; width:0; height:0}

.letter-qcol{
  padding-top:20px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 48px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 48px), transparent 100%);
}

.letter-qlist{
  list-style:none; padding:0; margin:0;
  flex:1 1 auto;
  overflow-y:auto;
  min-height:0;
  padding-bottom:80px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.letter-qlist::-webkit-scrollbar{display:none; width:0; height:0}
.letter-qlist li{transition:background .25s var(--ease); position:relative}
.letter-qlist li.is-active .letter-q-text{color:var(--ink); font-style:italic}
.letter-qlist li.is-active .letter-q-num{color:var(--ink)}

/* Answer pane */
.letter-empty{
  font-family:var(--serif);
  color:var(--ink-3);
  padding:24px 0;
  max-width:48ch;
}
.letter-empty-mark{
  font-family:var(--serif);
  font-size:48px; font-style:italic;
  color:var(--ink-4, rgba(14,15,18,.18));
  line-height:1;
  margin-bottom:16px;
}
.letter-empty p{
  font-size:14px; line-height:1.8; color:var(--ink-3);
  margin:0 0 10px;
}
.letter-answer{
  animation:answer-in .45s cubic-bezier(.32,.72,.24,1);
  max-width:60ch;
  padding-top:4px;
}
@keyframes answer-in{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}
.letter-answer-q{
  font-family:var(--serif);
  font-size:20px; font-weight:400;
  font-style:italic;
  color:var(--ink);
  line-height:1.4;
  margin:6px 0 18px;
  letter-spacing:-0.005em;
}
.letter-answer-body{
  padding-top:4px;
}
.letter-answer-body .letter-ans{
  font-family:var(--serif);
  font-size:14.5px; line-height:1.85; color:var(--ink-2);
  white-space:pre-wrap;
  margin-bottom:0;
}
.letter-q{
  width:100%;
  display:flex; align-items:center; gap:14px;
  padding:12px 4px;
  background:transparent; border:none; cursor:pointer;
  text-align:left;
  font-family:var(--serif);
  color:var(--ink);
  transition:color .25s var(--ease), padding .25s var(--ease);
}
.letter-qlist li:hover{background:rgba(14,15,18,.025)}
.letter-q:hover{padding-left:10px}
.letter-q-num{
  font-family:var(--mono);
  font-size:10px; color:var(--ink-3);
  flex:none; width:22px;
  transition:color .25s var(--ease);
}
.letter-q-text{
  font-size:14px; line-height:1.45;
  flex:1;
  transition:color .25s var(--ease), font-style .25s var(--ease);
}

/* ━━ Floating liquid-glass ask pill ━━ */
.ask-fab{
  position:absolute;
  right:clamp(18px, 2.4vw, 32px);
  bottom:clamp(18px, 2.4vw, 32px);
  z-index:20;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  pointer-events:none;
}
.ask-fab > *{pointer-events:auto}
.ask-fab-btn{
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:0.5px solid rgba(255,255,255,.68);
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.46), transparent 48%),
    rgba(255,255,255,.24);
  backdrop-filter:blur(28px) saturate(180%) contrast(104%);
  -webkit-backdrop-filter:blur(28px) saturate(180%) contrast(104%);
  box-shadow:
    0 12px 30px -18px rgba(14,15,18,.26),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(14,15,18,.05);
  cursor:pointer;
  color:var(--ink);
  transition:transform .25s var(--ease-press), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), filter .25s var(--ease);
  position:relative;
  overflow:hidden;
}
.ask-fab-btn:hover{
  transform:translateY(-2px) scale(1.015);
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.58), transparent 48%),
    rgba(255,255,255,.36);
  border-color:rgba(255,255,255,.82);
  box-shadow:
    0 18px 38px -16px rgba(14,15,18,.32),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(14,15,18,.05);
}
.ask-fab-btn:active{transform:scale(.94)}
.ask-fab-icon, .ask-fab-x{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
.ask-fab-x{font-size:24px; font-weight:300; line-height:1}

/* ━━ Consultation rail: embedded in the far-right whitespace ━━ */
.consult-rail{
  position:absolute;
  top:clamp(210px, 28vh, 260px);
  right:clamp(84px, 7vw, 140px);
  bottom:96px;
  width:clamp(280px, 23vw, 360px);
  z-index:15;
  overflow-y:auto;
  padding:2px 2px 0 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.consult-rail::-webkit-scrollbar{display:none; width:0; height:0}
.consult-chat-col{
  display:flex; flex-direction:column;
  min-height:0;
  height:100%;
  gap:16px;
  padding-top:12px;
  animation:consult-in .4s cubic-bezier(.32,.72,.24,1);
}
.consult-inline-head{
  max-width:58ch;
  padding-bottom:2px;
}
.consult-inline-head .letter-answer-q{
  margin-bottom:10px;
}
.consult-inline-head p{
  font-family:var(--serif);
  font-size:13.5px;
  line-height:1.8;
  color:var(--ink-3);
  margin:0;
}
.consult-chat{
  flex:0 0 auto;
  max-height:min(30vh, 220px);
  overflow-y:auto;
  padding:4px 6px 12px 0;
  display:flex; flex-direction:column; gap:2px;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
}
.consult-chat::-webkit-scrollbar{display:none; width:0; height:0}

.consult-input-flat{
  display:flex; gap:8px; align-items:center;
  margin-top:auto;
  padding:3px 3px 3px 14px;
  border-radius:999px;
  border:0.5px solid rgba(255,255,255,.58);
  background:rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px -18px rgba(14,15,18,.18);
  backdrop-filter:blur(20px) saturate(155%);
  -webkit-backdrop-filter:blur(20px) saturate(155%);
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.consult-input-flat:focus-within{
  border-color:rgba(14,15,18,.22);
  background:rgba(255,255,255,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 12px 26px -20px rgba(14,15,18,.24);
}
.consult-input-flat .letter-ask-input{
  flex:1; padding:8px 0;
  background:transparent; border:none; outline:none;
  font-family:var(--serif); font-size:13.5px; color:var(--ink);
}
.consult-input-flat .letter-ask-input::placeholder{color:var(--ink-4, rgba(14,15,18,.32)); font-style:italic}
.consult-input-flat .letter-ask-send{
  width:32px; height:32px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:none;
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.24), transparent 48%),
    linear-gradient(180deg, #17191d, var(--ink) 58%, #050608);
  color:#fff;
  cursor:pointer;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.consult-input-flat .letter-ask-send:disabled{opacity:.25; cursor:not-allowed}
.consult-input-flat .letter-ask-send:not(:disabled):hover{transform:scale(1.05)}

.consult-summary-col{
  display:block;
  min-height:0;
  padding-top:14px;
  border-top:0.5px solid var(--hairline);
  animation:consult-in .4s cubic-bezier(.32,.72,.24,1);
  animation-delay:.06s;
  animation-fill-mode:both;
}
.consult-summary-list{
  overflow:visible;
  display:flex; flex-direction:column;
  padding-top:4px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.consult-summary-list::-webkit-scrollbar{display:none; width:0; height:0}

.consult-chat .letter-follow{
  display:flex; gap:10px;
  padding:8px 0;
  font-size:13.5px; line-height:1.7;
  border-top:0.5px dashed var(--hairline);
}
.consult-chat .letter-follow > span:last-child{
  flex:1 1 auto; min-width:0;
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
}
.consult-chat .letter-follow-label{
  flex:none; width:32px;
}

@keyframes consult-in{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:none}
}

@media (max-width:1180px){
  .page-faq-letter.is-consulting .letter{
    max-width:min(680px, calc(100% - 360px));
  }
  .consult-rail{
    right:34px;
    width:300px;
  }
}
@media (max-width:860px){
  .page-faq-letter.is-consulting .letter{
    max-width:760px;
  }
  .consult-rail{
    position:static;
    width:auto;
    max-height:none;
    margin-top:18px;
    padding-right:0;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .consult-rail .consult-chat-col{
    height:auto;
  }
}

/* ━━ Consult Panel — floats on the RIGHT SIDE, outside the page-card when possible ━━ */
.consult-panel{
  position:fixed;
  top:96px;
  right:max(22px, calc((100vw - 880px) / 2 - 380px - 16px));
  width:min(380px, calc(100vw - 44px));
  max-height:calc(100vh - 180px);
  display:flex; flex-direction:column;
  padding:20px 20px 16px;
  border-radius:var(--r-lg, 20px);
  background:var(--glass-specular), var(--glass-1-bg, rgba(255,255,255,0.55));
  backdrop-filter:var(--glass-1-blur, blur(40px) saturate(175%));
  -webkit-backdrop-filter:var(--glass-1-blur, blur(40px) saturate(175%));
  border:0.5px solid var(--glass-1-border, rgba(255,255,255,0.55));
  box-shadow:var(--glass-1-shadow, 0 30px 60px -20px rgba(14,15,18,.25), 0 2px 8px rgba(14,15,18,.06));
  z-index:60;
  animation:consult-panel-in .35s cubic-bezier(.32,.72,.24,1);
}
@keyframes consult-panel-in{
  from{opacity:0; transform:translateX(20px) scale(.98)}
  to{opacity:1; transform:none}
}
.consult-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px;
  border-bottom:0.5px solid var(--hairline);
  margin-bottom:10px;
}
.consult-panel-close{
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--ink-3);
  font-size:22px; font-weight:300; line-height:1;
  cursor:pointer; border-radius:999px;
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease-press);
}
.consult-panel-close:hover{background:rgba(255,255,255,.48); color:var(--ink); transform:translateY(-1px)}
.consult-panel-close:active{transform:scale(.9)}
.consult-panel-body{
  flex:1 1 auto;
  min-height:0;
  display:flex; flex-direction:column;
  gap:14px;
  overflow:hidden;
}
.consult-panel .consult-chat{
  flex:1 1 auto;
  min-height:120px;
  max-height:260px;
}
.consult-panel .consult-summary-col{
  flex:none;
  border-top:0.5px solid var(--hairline);
  padding-top:10px;
}
.consult-panel .consult-summary-list{
  max-height:180px;
  overflow-y:auto;
}
.consult-panel .consult-input-flat{
  margin-top:12px;
}

/* On narrower screens (no room beside card) — dock panel to the right edge over the card */
@media (max-width: 1320px){
  .consult-panel{
    right:22px;
    width:min(360px, calc(100vw - 44px));
  }
}
@media (max-width: 760px){
  .consult-panel{
    top:auto;
    bottom:96px;
    right:16px; left:16px;
    width:auto;
    max-height:70vh;
  }
}

.sum-row{
  padding:11px 0;
  display:flex; flex-direction:column; gap:3px;
  border-bottom:0.5px solid var(--hairline);
}
.sum-row:last-child{border-bottom:none}
.sum-label{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3);
}
.sum-opt{font-size:9.5px; letter-spacing:.1em; margin-left:4px; color:var(--ink-4, rgba(14,15,18,.3))}
.sum-value{
  font-family:var(--serif); font-size:13.5px; color:var(--ink-2);
  line-height:1.5; min-height:20px;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.sum-empty{color:var(--ink-4, rgba(14,15,18,.22))}
.sum-hint{font-family:var(--sans); font-size:10.5px; color:var(--ink-3); font-style:normal}
.sum-row.is-filled .sum-value{
  color:var(--ink); font-style:italic;
  animation:sum-fill-in .45s cubic-bezier(.32,.72,.24,1);
}
.sum-row.is-filled .sum-hint{display:none}
@keyframes sum-fill-in{
  from{opacity:0; transform:translateY(-3px)}
  to{opacity:1; transform:none}
}

.consult-gobook{
  margin-top:18px;
  padding:12px 18px;
  border-radius:999px;
  border:0.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:.04em;
  display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), opacity .25s var(--ease);
  opacity:.4;
}
.consult-gobook:not(:disabled){opacity:1}
.consult-gobook.is-ready{
  background:var(--ink); color:#fff;
  animation:ready-pulse 1.6s ease-in-out 2;
}
@keyframes ready-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(14,15,18,0)}
  50%{box-shadow:0 0 0 6px rgba(14,15,18,.08)}
}
.consult-gobook:not(:disabled):hover{transform:translateY(-1px)}
.consult-gobook:disabled{cursor:not-allowed; border-style:dashed}

@media (max-width:760px){
  .letter-two.is-consult{
    grid-template-columns:1fr;
    gap:24px;
  }
  .letter-two.is-consult .letter-qcol{display:none}
}

/* ask-pop-close reused */
.ask-pop-close{
  width:26px; height:26px; border-radius:999px; flex:none;
  border:none; background:transparent; color:var(--ink-3);
  cursor:pointer; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.ask-pop-close:hover{background:rgba(14,15,18,.06); color:var(--ink)}

.ask-pop{
  width:min(360px, calc(100vw - 48px));
  padding:14px 14px 12px;
  border-radius:20px;
  border:0.5px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:
    0 20px 50px -20px rgba(14,15,18,.3),
    0 4px 14px -4px rgba(14,15,18,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
  display:flex; flex-direction:column; gap:10px;
  animation:ask-pop-in .32s cubic-bezier(.32,.72,.24,1);
  transform-origin:bottom right;
}
@keyframes ask-pop-in{
  from{opacity:0; transform:translateY(8px) scale(.96)}
  to{opacity:1; transform:none}
}
.ask-pop-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 2px 6px;
  border-bottom:0.5px solid var(--hairline);
}
.ask-pop-close{
  width:22px; height:22px; border-radius:999px;
  border:none; background:transparent; color:var(--ink-3);
  cursor:pointer; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.ask-pop-close:hover{background:rgba(14,15,18,.06); color:var(--ink)}
.ask-pop-stream{
  max-height:min(40vh, 280px);
  overflow-y:auto;
  display:flex; flex-direction:column; gap:2px;
  padding:2px 2px;
}
.ask-pop-hint{
  font-family:var(--serif); font-size:13px; color:var(--ink-3);
  line-height:1.7; padding:8px 2px;
}

/* thread: answer + follow-ups, opens in place */
.letter-thread{
  padding:2px 2px 14px 36px;
  animation:thread-in .4s ease-out;
}
@keyframes thread-in{
  from{opacity:0; transform:translateY(-4px)}
  to{opacity:1; transform:none}
}
.letter-ans{
  font-family:var(--serif);
  font-size:13.5px; line-height:1.8; color:var(--ink-2);
  white-space:pre-wrap;
  margin-bottom:10px;
}
.letter-ans-loading{
  display:inline-flex; gap:5px; align-items:center;
  padding:6px 0;
}
.letter-ans-loading span{
  width:5px; height:5px; border-radius:999px; background:var(--ink-3);
  animation:chatq-dot 1.2s infinite ease-in-out;
}
.letter-ans-loading span:nth-child(2){animation-delay:.15s}
.letter-ans-loading span:nth-child(3){animation-delay:.3s}
@keyframes chatq-dot{
  0%,60%,100%{transform:translateY(0); opacity:.4}
  30%{transform:translateY(-4px); opacity:1}
}

.letter-follow{
  display:flex; gap:10px;
  padding:8px 0;
  font-size:13.5px; line-height:1.7;
  border-top:0.5px dashed var(--hairline);
  animation:follow-in .3s ease-out;
}
@keyframes follow-in{
  from{opacity:0; transform:translateY(-3px)}
  to{opacity:1; transform:none}
}
.letter-follow-label{
  flex:none; width:32px;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); padding-top:4px;
}
.letter-follow-user{color:var(--ink)}
.letter-follow-assistant{color:var(--ink-2); font-family:var(--serif); font-size:13.5px}
.letter-follow > span:last-child{flex:1; white-space:pre-wrap}

.letter-follow-form{
  display:flex; gap:6px; align-items:center;
  margin-top:10px;
  padding:3px 3px 3px 12px;
  border:0.5px solid var(--hairline);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  transition:border-color .25s var(--ease);
}
.letter-follow-form:focus-within{border-color:var(--ink-3)}
.letter-follow-input{
  flex:1; border:none; background:transparent; outline:none;
  font-family:var(--sans); font-size:12.5px; color:var(--ink);
  padding:6px 0;
}
.letter-follow-input::placeholder{color:var(--ink-3)}
.letter-follow-send{
  width:26px; height:26px; flex:none; border-radius:999px; border:none;
  background:var(--ink); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease);
}
.letter-follow-send:hover:not(:disabled){background:var(--ink-2)}
.letter-follow-send:disabled{opacity:.25; cursor:not-allowed}

/* Free-form section at the bottom — fixed, doesn't scroll */
.letter-free{display:none}

.letter-ask{margin-top:8px}
.letter-ask-row{
  display:flex; gap:8px; align-items:center;
  padding:4px 4px 4px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  border:0.5px solid var(--hairline);
  box-shadow:0 4px 14px -8px rgba(14,15,18,.12);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.letter-ask-row:focus-within{
  border-color:var(--ink-3);
  box-shadow:0 6px 20px -8px rgba(14,15,18,.2);
}
.letter-ask-input{
  flex:1; border:none; background:transparent; outline:none;
  font-family:var(--sans); font-size:13.5px; color:var(--ink);
  padding:8px 0;
}
.letter-ask-input::placeholder{color:var(--ink-3)}
.letter-ask-send{
  width:34px; height:34px; flex:none; border-radius:999px; border:none;
  background:var(--ink); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.letter-ask-send:hover:not(:disabled){background:var(--ink-2); transform:scale(1.05)}
.letter-ask-send:disabled{opacity:.25; cursor:not-allowed}

@media (max-width:860px){
  .letter-two{grid-template-columns:1fr; gap:16px}
  .letter-acol{padding-left:0; padding-top:0}
}
@media (max-width:760px){
  .page-faq-letter{padding:20px}
  .letter-title{font-size:19px}
  .letter-thread{padding-left:28px}
}

/* ━━━━━━━━━━━ PAGE: STUDIO ━━━━━━━━━━━ */
.page-studio{grid-template-columns:1fr 1fr; gap:0}
@media (max-width:900px){.page-studio{grid-template-columns:1fr; grid-template-rows:1fr 1fr; overflow-y:auto}}
.studio-info{padding:clamp(28px,4vw,48px); overflow-y:auto; display:flex; flex-direction:column; min-height:0}
.studio-info h2{
  font-family:var(--serif); font-weight:400; font-size:30px; margin:14px 0 16px;
  line-height:1.1; letter-spacing:0; color:var(--ink);
}
.studio-info h2 em{font-style:normal; color:inherit}
.studio-info > p{color:var(--ink-2); line-height:1.8; font-size:14px; margin:0 0 20px}
.studio-about{
  margin:2px 0 22px;
  padding:18px 0 16px;
  border-top:0.5px solid var(--hairline);
  border-bottom:0.5px solid var(--hairline);
  display:grid;
  gap:14px;
}
.studio-about-label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:8px;
}
.studio-about h3{
  font-family:var(--serif);
  font-size:22px;
  font-weight:400;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 10px;
}
.studio-about p{
  margin:0 0 10px;
  color:var(--ink-2);
  font-size:13.5px;
  line-height:1.75;
}
.studio-about p:last-child{margin-bottom:0}
.studio-about-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0;
}
.studio-about-facts div{
  padding-top:9px;
  border-top:0.5px solid rgba(14,15,18,.12);
}
.studio-about-facts dt{
  color:var(--ink-3);
  font-size:11.5px;
  margin-bottom:4px;
}
.studio-about-facts dd{
  margin:0;
  color:var(--ink);
  font-family:var(--serif);
  font-size:15px;
  line-height:1.35;
}
@media (max-width:1180px){.studio-about-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.studio-info .lines{margin-top:auto; border-top:0.5px solid var(--hairline); padding-top:8px}
.studio-info .line{
  display:flex; align-items:flex-start; gap:14px; padding:13px 0;
  border-bottom:0.5px solid var(--hairline);
}
.studio-info .line:last-child{border:none}
.studio-info .line .k{
  font-size:11.5px; color:var(--ink-3);
  min-width:80px; padding-top:2px;
  display:flex; align-items:center; gap:6px;
}
.studio-info .line .v{flex:1; font-size:14px; line-height:1.6; color:var(--ink)}
.studio-info .line .v a{
  color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--hairline-2); text-underline-offset:3px;
}

.studio-map{position:relative; overflow:hidden; background:var(--paper-2)}
.studio-map svg{position:absolute; inset:0; width:100%; height:100%}
.map-pin{position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); z-index:2}
.map-pin .pin{
  width:32px; height:32px; border-radius:50% 50% 50% 0;
  background:var(--ink); transform:rotate(-45deg); border:2.5px solid #fff;
  box-shadow:0 10px 24px -6px rgba(14,15,18,.4);
}
.map-pin .pin::after{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); width:7px; height:7px; border-radius:50%; background:#fff;
}
.map-pin .pulse{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:60px; height:18px;
  background:radial-gradient(ellipse, rgba(14,15,18,.22), transparent 70%);
  animation:mp 2.4s ease-out infinite;
}
@keyframes mp{0%{transform:translateX(-50%) scale(.8); opacity:1} 100%{transform:translateX(-50%) scale(2.2); opacity:0}}
.map-overlay{position:absolute; bottom:18px; left:18px; right:18px; padding:14px 18px; border-radius:var(--r-md)}
.map-overlay h4{margin:0 0 2px; font-family:var(--serif); font-weight:500; font-size:17px; color:var(--ink)}
.map-overlay p{margin:0; font-size:12px; color:var(--ink-2)}

/* ━━━━━━━━━━━ TWEAKS PANEL ━━━━━━━━━━━ */
.tweaks-panel{
  position:fixed; bottom:20px; right:20px; z-index:60;
  width:276px; padding:16px 18px; border-radius:var(--r-lg);
  max-height:calc(100vh - 40px); overflow-y:auto;
}
.tweaks-panel h4{
  font-size:13px; margin:0 0 12px; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; font-weight:500;
}
.tweaks-panel .close-t{
  width:22px; height:22px; border-radius:50%;
  background:rgba(14,15,18,.07); border:none; cursor:pointer;
  display:grid; place-items:center; font-size:13px; color:var(--ink);
}
.tweak-row{margin-bottom:14px}
.tweak-row > label{display:block; font-size:11.5px; color:var(--ink-3); margin-bottom:6px; font-weight:500}
.tweak-row .opts{display:flex; flex-wrap:wrap; gap:5px}
.tweak-row .opts button{
  padding:5px 9px; border-radius:999px; font-size:10.5px; cursor:pointer;
  background:rgba(255,255,255,.32); border:0.5px solid rgba(255,255,255,.5); color:var(--ink-2); font-family:var(--sans);
  backdrop-filter:blur(14px) saturate(145%);
  -webkit-backdrop-filter:blur(14px) saturate(145%);
  transition:transform .2s var(--ease-press), background .2s var(--ease), color .2s var(--ease);
}
.tweak-row .opts button:hover{transform:translateY(-1px); background:rgba(255,255,255,.55); color:var(--ink)}
.tweak-row .opts button:active{transform:scale(.95)}
.tweak-row .opts button.on{
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.24), transparent 48%),
    linear-gradient(180deg, #17191d, var(--ink) 58%, #050608);
  color:#fff;
}
.tweak-row input[type="range"]{width:100%; accent-color:var(--ink)}

/* utils */
.scroll-y{overflow-y:auto}

/* ━━━━━━━━━━━ ADMIN PANEL ━━━━━━━━━━━ */
.admin-bar{
  position:fixed; top:18px; left:22px; right:22px; z-index:50;
  padding:8px 16px; border-radius:999px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.admin-bar .brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-weight:500; font-size:14px; color:var(--ink);
}
.admin-bar .brand .mark{
  width:22px; height:22px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:11px;
}
.admin-bar-right{display:flex; align-items:center; gap:14px}

.page-admin{
  display:flex; flex-direction:column; gap:18px;
  padding:clamp(20px,3vw,32px); overflow-y:auto;
}
.admin-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap; padding-bottom:16px;
  border-bottom:0.5px solid var(--hairline);
}
.admin-actions{display:flex; gap:8px; flex-wrap:wrap}
.admin-actions .btn{padding:9px 16px; font-size:13px}

.admin-dropzone{
  padding:28px; border-radius:var(--r-lg);
  border:1.5px dashed var(--hairline-2);
  background:var(--glass-specular), rgba(255,255,255,.25);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  text-align:center; transition:all .25s var(--ease);
  cursor:default;
}
.admin-dropzone.drag{
  border-color:var(--ink); background:rgba(255,255,255,.6);
}
.admin-dropzone .ic{
  width:44px; height:44px; margin:0 auto 10px; border-radius:50%;
  background:rgba(14,15,18,.06); display:grid; place-items:center; color:var(--ink-2);
}
.admin-dropzone .t{font-family:var(--serif); font-size:16px; color:var(--ink)}
.admin-dropzone .s{font-size:12px; color:var(--ink-3); margin-top:3px}

.admin-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.admin-card{
  border-radius:var(--r-md); overflow:hidden;
  background:var(--glass-specular), var(--glass-2-bg);
  backdrop-filter:var(--glass-2-blur);
  -webkit-backdrop-filter:var(--glass-2-blur);
  border:0.5px solid var(--glass-2-border);
  box-shadow:var(--glass-2-shadow);
  display:flex; flex-direction:column;
  transition:transform .24s var(--ease-press), box-shadow .24s var(--ease), opacity .2s var(--ease);
}
.admin-card:hover{transform:translateY(-3px); box-shadow:var(--glass-2-shadow), 0 18px 34px -22px rgba(14,15,18,.28)}
.admin-card.is-hidden{opacity:.55}
.admin-card.is-featured{box-shadow:var(--glass-2-shadow), 0 0 0 2px var(--accent) inset}
.admin-card.drop-target{box-shadow:var(--glass-2-shadow), 0 0 0 2px var(--ink) inset}
.admin-card .thumb{
  position:relative; aspect-ratio:4/5; background:var(--paper-2); overflow:hidden;
}
.admin-card .thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.8)}
.admin-card .badge-f,
.admin-card .badge-h,
.admin-card .badge-s{
  position:absolute; top:8px; padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:500; backdrop-filter:blur(10px);
}
.admin-card .badge-f{
  left:8px; background:var(--accent); color:#fff; font-size:12px;
}
.admin-card .badge-h{
  right:8px; background:rgba(14,15,18,.78); color:#fff;
}
.admin-card .badge-s{
  left:8px; bottom:8px; top:auto;
  background:rgba(255,255,255,.75); color:var(--ink-2);
}
.admin-card .meta{padding:10px 12px 6px}
.admin-card .meta .t{font-family:var(--serif); font-size:14px; color:var(--ink)}
.admin-card .meta .s{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.admin-card .row-actions{
  display:flex; flex-wrap:wrap; gap:4px; padding:6px 10px 10px;
  border-top:0.5px solid var(--hairline); margin-top:6px;
}
.admin-card .row-actions button{
  flex:1; min-width:46px; padding:6px 8px; border-radius:var(--r-xs);
  background:rgba(255,255,255,.28); border:0.5px solid rgba(255,255,255,.45); cursor:pointer;
  font-size:11.5px; color:var(--ink-2); font-family:var(--sans);
  transition:transform .2s var(--ease-press), background .2s var(--ease), color .2s var(--ease);
}
.admin-card .row-actions button:hover{background:rgba(255,255,255,.54); color:var(--ink); transform:translateY(-1px)}
.admin-card .row-actions button:active{transform:scale(.95)}
.admin-card .row-actions button.on{
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.24), transparent 48%),
    linear-gradient(180deg, #17191d, var(--ink) 58%, #050608);
  color:#fff;
}
.admin-card .row-actions button.danger:hover{background:#c13a3a; color:#fff}

/* edit modal reuses .work-focus .modal */
.work-focus .modal.admin-edit{grid-template-columns:.9fr 1.1fr}
@media (max-width:780px){.work-focus .modal.admin-edit{grid-template-columns:1fr}}
.ae-img{position:relative; background:var(--paper-2)}
.ae-img img{width:100%; height:100%; object-fit:cover; max-height:88vh}
.ae-replace{
  position:absolute; bottom:14px; left:14px; padding:7px 14px;
  border-radius:999px; background:var(--glass-specular), var(--glass-2-bg);
  backdrop-filter:var(--glass-2-blur);
  -webkit-backdrop-filter:var(--glass-2-blur);
  border:0.5px solid var(--glass-2-border);
  box-shadow:var(--glass-2-shadow);
  font-size:12px; color:var(--ink); cursor:pointer;
  transition:transform .2s var(--ease-press), filter .2s var(--ease);
}
.ae-replace:hover{transform:translateY(-1px); filter:brightness(1.04)}
.ae-replace:active{transform:scale(.96)}
.ae-replace input{display:none}
.ae-form{padding:30px 32px; overflow-y:auto}
.ae-toggles{
  display:flex; flex-direction:column; gap:10px; margin-top:14px;
  padding-top:14px; border-top:0.5px solid var(--hairline);
}
.ae-toggles label{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--ink); cursor:pointer;
}
.ae-toggles input[type="checkbox"]{accent-color:var(--ink); width:16px; height:16px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   macOS-native glass correction
   Pull back the glossy/Android-like treatment: thinner material, quieter
   highlights, tiny press depth, and simple system-style selected pills.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root{
  --ease-glass:cubic-bezier(.32,.72,.24,1);
  --ease-press:cubic-bezier(.2,.8,.2,1);
  --black-pill-bg:
    linear-gradient(180deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.065) 18%,
      rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #202227 0%, #111216 52%, #07080b 100%);
  --black-pill-highlight:
    linear-gradient(180deg,
      rgba(255,255,255,.58) 0%,
      rgba(255,255,255,.20) 46%,
      rgba(255,255,255,0) 100%);
  --black-pill-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 .5px rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(0,0,0,.52),
    0 8px 18px -13px rgba(14,15,18,.46);

  --glass-1-bg:rgba(255,255,255,.44);
  --glass-1-blur:blur(52px) saturate(170%);
  --glass-1-border:rgba(255,255,255,.58);
  --glass-1-shadow:
    inset 0 .5px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(14,15,18,.025),
    0 30px 60px -36px rgba(14,15,18,.18),
    0 1px 2px rgba(14,15,18,.035);

  --glass-2-bg:rgba(255,255,255,.56);
  --glass-2-blur:blur(34px) saturate(165%);
  --glass-2-border:rgba(255,255,255,.64);
  --glass-2-shadow:
    inset 0 .5px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(14,15,18,.025),
    0 14px 30px -24px rgba(14,15,18,.16),
    0 1px 2px rgba(14,15,18,.035);

  --glass-3-bg:rgba(255,255,255,.34);
  --glass-3-blur:blur(22px) saturate(150%);
  --glass-3-border:rgba(255,255,255,.48);
  --glass-3-shadow:
    inset 0 .5px 0 rgba(255,255,255,.58),
    0 7px 20px -18px rgba(14,15,18,.13),
    0 1px 1px rgba(14,15,18,.025);

  --glass-specular:
    linear-gradient(180deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 42%,
      rgba(14,15,18,.012) 100%);
  --glass-edge:
    linear-gradient(180deg,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.16) 34%,
      rgba(255,255,255,0) 58%,
      rgba(255,255,255,.12) 100%);
}

.glass::after,
.glass-1::after,
.glass-2::after,
.glass-3::after{
  display:none;
}

.tabnav{
  background:var(--glass-specular), rgba(255,255,255,.58);
  border-color:rgba(255,255,255,.66);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.82),
    0 16px 32px -26px rgba(14,15,18,.18),
    0 1px 2px rgba(14,15,18,.035);
  transition:transform .28s var(--ease-glass), box-shadow .28s var(--ease-glass);
}
.tabnav:hover{transform:translateX(-50%) translateY(-.5px)}
.tabnav:active{transform:translateX(-50%) translateY(0) scale(.999)}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator{
  background:var(--black-pill-bg);
  box-shadow:var(--black-pill-shadow);
  transition:
    transform .42s var(--ease-glass),
    width .42s var(--ease-glass),
    opacity .18s ease-out;
}
.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after{
  content:"";
  display:block;
  position:absolute;
  left:9px; right:9px; top:1px; height:42%;
  border-radius:999px;
  background:var(--black-pill-highlight);
  opacity:.72;
  transform:none;
  transition:opacity .18s var(--ease);
  pointer-events:none;
  mix-blend-mode:screen;
}
.tabnav .tab-indicator.is-settling,
.filter-pills .pill-indicator.is-settling,
.sliding-pills .pill-indicator.is-settling{
  animation:none;
}

.tabnav button.tab,
.filter-pills button,
.sliding-pills.filter-pills button,
.sliding-pills button{
  transition:color .24s var(--ease), transform .16s var(--ease-press);
}
.tabnav button.tab:hover,
.filter-pills button:hover,
.sliding-pills.filter-pills button:hover,
.sliding-pills button:hover{
  transform:none;
}
.tabnav button.tab:active,
.filter-pills button:active,
.sliding-pills.filter-pills button:active,
.sliding-pills button:active{
  transform:scale(.985);
}

.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  position:relative;
  overflow:hidden;
  background:var(--black-pill-bg);
  color:#fff;
  box-shadow:var(--black-pill-shadow);
  filter:none;
}
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  content:"";
  display:block;
  position:absolute;
  left:12px; right:12px; top:1px; height:44%;
  border-radius:999px;
  background:var(--black-pill-highlight);
  opacity:.78;
  transform:none;
  transition:opacity .18s var(--ease);
  pointer-events:none;
  mix-blend-mode:screen;
}
.tabnav .book-cta:hover::before,
.btn-ink:hover::before,
.page-home .btn-ink:hover::before{
  opacity:.9;
}
.tabnav .book-cta:hover,
.tabnav .book-cta.is-active,
.btn-ink:hover,
.page-home .btn-ink:hover{
  filter:none;
  transform:translateY(-.5px);
}
.tabnav .book-cta:active,
.btn:active,
.page-home .btn-ink:active,
.chip:active,
.admin-card .row-actions button:active,
.ae-replace:active{
  transform:scale(.985);
}

.btn::before{display:none}
.btn-ink::before,
.page-home .btn-ink::before{display:block}
.tabnav button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.filter-pills button:focus:not(:focus-visible),
.sliding-pills button:focus:not(:focus-visible),
.book-rail .step:focus:not(:focus-visible),
.chip:focus:not(:focus-visible){
  outline:none;
}
.tabnav button:focus-visible,
.btn:focus-visible,
.filter-pills button:focus-visible,
.sliding-pills button:focus-visible,
.book-rail .step:focus-visible,
.chip:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset:2px;
}
.btn-ghost,
.btn-glass,
.filter-pills,
.sliding-pills,
.book-rail .step.active,
.consult-input-flat,
.consult-panel,
.admin-dropzone,
.admin-card,
.ae-replace{
  background:var(--glass-specular), rgba(255,255,255,.44);
  border-color:rgba(255,255,255,.52);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.62),
    0 10px 26px -22px rgba(14,15,18,.15),
    0 1px 2px rgba(14,15,18,.03);
}
.btn-ghost:hover,
.btn-glass:hover,
.upload:hover,
.admin-card .row-actions button:hover,
.ae-replace:hover{
  filter:none;
  transform:translateY(-.5px);
}

.work-tile:hover,
.carousel-card.center:hover,
.admin-card:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.62),
    0 14px 30px -26px rgba(14,15,18,.18);
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  transform:none;
  border-color:rgba(14,15,18,.18);
  background:rgba(255,255,255,.54);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.72),
    0 0 0 3px rgba(255,255,255,.36);
}

.book-rail .step:hover{
  transform:none;
  background:rgba(255,255,255,.28);
}
.book-rail .step:active{transform:scale(.99)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Switch-derived Liquid Glass v2
   Reference model from Codex Switch: native material first, then a very
   thin top-leading sheen, a masked white rim, and almost no drop shadow.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root{
  --switch-ease:cubic-bezier(.32,.72,.24,1);
  --switch-spring:cubic-bezier(.18,.9,.22,1);

  --native-glass-bg:rgba(255,255,255,.42);
  --native-glass-bg-strong:rgba(255,255,255,.54);
  --native-glass-filter:blur(46px) saturate(168%) contrast(101%);
  --native-glass-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.34) 24%,
      rgba(255,255,255,.10) 58%,
      rgba(255,255,255,.26) 100%);
  --native-glass-sheen:
    linear-gradient(135deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 35%,
      rgba(255,255,255,0) 72%);
  --native-glass-shadow:
    inset 0 .5px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(14,15,18,.025),
    0 24px 46px -34px rgba(14,15,18,.18),
    0 1px 2px rgba(14,15,18,.035);

  --prominent-pill-bg:
    radial-gradient(160% 92% at 32% -36%, rgba(255,255,255,.66) 0%, rgba(255,255,255,.26) 22%, rgba(255,255,255,0) 47%),
    linear-gradient(180deg, #3a3c42 0%, #1a1b20 44%, #08090c 100%);
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.74) 0%,
      rgba(255,255,255,.30) 28%,
      rgba(255,255,255,.10) 58%,
      rgba(0,0,0,.58) 100%);
  --prominent-pill-inner:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 0 0 .75px rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.70),
    0 7px 15px -12px rgba(0,0,0,.58);
}

.glass,
.glass-1,
.glass-2,
.glass-3,
.btn-glass,
.btn-ghost,
.filter-pills,
.sliding-pills,
.book-rail .step.active,
.consult-input-flat,
.consult-panel,
.admin-dropzone,
.admin-card,
.ae-replace{
  background:var(--native-glass-sheen), var(--native-glass-bg) !important;
  backdrop-filter:var(--native-glass-filter) !important;
  -webkit-backdrop-filter:var(--native-glass-filter) !important;
  border-color:rgba(255,255,255,.58) !important;
  box-shadow:var(--native-glass-shadow) !important;
}

.glass::before,
.glass-1::before,
.glass-2::before,
.glass-3::before{
  background:var(--native-glass-rim) !important;
  opacity:.92;
}
.glass::after,
.glass-1::after,
.glass-2::after,
.glass-3::after{
  display:none !important;
}

.tabnav{
  background:
    linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.08) 48%, rgba(255,255,255,.02)),
    rgba(255,255,255,.58) !important;
  backdrop-filter:blur(34px) saturate(170%) !important;
  -webkit-backdrop-filter:blur(34px) saturate(170%) !important;
  border-color:rgba(255,255,255,.68) !important;
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.86),
    0 18px 32px -26px rgba(14,15,18,.18),
    0 1px 2px rgba(14,15,18,.035) !important;
}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator{
  overflow:hidden;
  background:var(--prominent-pill-bg) !important;
  border:0;
  box-shadow:var(--prominent-pill-inner) !important;
  transition:
    transform .44s var(--switch-ease),
    width .44s var(--switch-ease),
    opacity .16s ease-out !important;
}
.tabnav .tab-indicator::before,
.filter-pills .pill-indicator::before,
.sliding-pills .pill-indicator::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--prominent-pill-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:12%;
  right:12%;
  top:1px;
  height:46%;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.13) 58%, transparent);
  opacity:.90 !important;
  transform:none !important;
  filter:blur(.15px);
  mix-blend-mode:screen;
  pointer-events:none;
}
.tabnav .tab-indicator.is-settling,
.filter-pills .pill-indicator.is-settling,
.sliding-pills .pill-indicator.is-settling{
  animation:none !important;
}

.tabnav button.tab,
.filter-pills button,
.sliding-pills.filter-pills button,
.sliding-pills button{
  text-shadow:none;
  transition:color .20s var(--ease), transform .18s var(--switch-spring) !important;
}
.tabnav button.tab.active,
.filter-pills button.active,
.sliding-pills.filter-pills button.active,
.sliding-pills button.active{
  color:#fff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.54);
}

.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  position:relative;
  overflow:hidden;
  background:var(--prominent-pill-bg) !important;
  color:#fff !important;
  border:0.5px solid rgba(255,255,255,.16) !important;
  box-shadow:var(--prominent-pill-inner) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  transform:translateZ(0);
}
.tabnav .book-cta::after,
.btn-ink::after,
.page-home .btn-ink::after,
.chip.sel::after,
.admin-card .row-actions button.on::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--prominent-pill-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:13%;
  right:13%;
  top:1px;
  height:48%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.12) 60%, transparent);
  opacity:.92 !important;
  transform:none !important;
  filter:blur(.15px);
  mix-blend-mode:screen;
  pointer-events:none;
}

.tabnav button.tab:hover,
.filter-pills button:hover,
.sliding-pills.filter-pills button:hover,
.sliding-pills button:hover{
  transform:none !important;
}
.tabnav .book-cta:hover,
.btn-ink:hover,
.page-home .btn-ink:hover{
  filter:none !important;
  transform:translateY(-.35px) scale(1.006) !important;
}
.tabnav .book-cta:active,
.btn-ink:active,
.page-home .btn-ink:active,
.tabnav button.tab:active,
.filter-pills button:active,
.sliding-pills.filter-pills button:active,
.sliding-pills button:active{
  transform:scale(.972) !important;
}

.btn-ghost,
.btn-glass{
  border-color:rgba(255,255,255,.62) !important;
}
.btn-ghost:hover,
.btn-glass:hover{
  background:var(--native-glass-sheen), var(--native-glass-bg-strong) !important;
  transform:translateY(-.35px) !important;
}
.page-card.glass{
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 42%, rgba(255,255,255,0)),
    rgba(255,255,255,.32) !important;
}
.tabnav button:focus,
.tabnav button:focus-visible,
.btn:focus,
.btn:focus-visible{
  outline:none !important;
}

/* Concave correction: native prominent controls read like a shallow inset well,
   not a raised gel capsule. */
:root{
  --prominent-pill-bg:
    linear-gradient(180deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,.18) 18%,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,.10) 100%),
    radial-gradient(95% 74% at 50% 55%,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,.30) 38%,
      rgba(0,0,0,0) 74%),
    radial-gradient(110% 88% at 50% 118%,
      rgba(255,255,255,.25) 0%,
      rgba(255,255,255,.09) 32%,
      rgba(255,255,255,0) 64%),
    linear-gradient(180deg, #26282e 0%, #17191e 38%, #090a0d 58%, #17191d 100%);
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.20) 22%,
      rgba(0,0,0,.18) 48%,
      rgba(255,255,255,.42) 100%);
  --prominent-pill-inner:
    inset 0 1px 2px rgba(0,0,0,.74),
    inset 0 -1px 0 rgba(255,255,255,.30),
    inset 0 0 0 .75px rgba(255,255,255,.12),
    0 3px 8px -8px rgba(0,0,0,.42);
}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  background:var(--prominent-pill-bg) !important;
  box-shadow:var(--prominent-pill-inner) !important;
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  left:9% !important;
  right:9% !important;
  top:2px !important;
  height:calc(100% - 4px) !important;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.20) 22%,
      rgba(255,255,255,0) 54%,
      rgba(255,255,255,.26) 100%) !important;
  opacity:.82 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

.tabnav .book-cta:hover,
.btn-ink:hover,
.page-home .btn-ink:hover{
  transform:translateY(.25px) scale(.998) !important;
}
.tabnav .book-cta:active,
.btn-ink:active,
.page-home .btn-ink:active,
.tabnav button.tab:active,
.filter-pills button:active,
.sliding-pills.filter-pills button:active,
.sliding-pills button:active{
  transform:scale(.982) !important;
}

/* Deeper native inset: kill the raised candy-shell read on black pills. */
:root{
  --prominent-pill-bg:
    radial-gradient(82% 66% at 50% 48%,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.50) 52%,
      rgba(0,0,0,0) 78%),
    radial-gradient(96% 58% at 50% 116%,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.08) 34%,
      rgba(255,255,255,0) 68%),
    linear-gradient(180deg,
      #07080b 0%,
      #111319 24%,
      #050609 58%,
      #17191f 100%);
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.38) 0%,
      rgba(255,255,255,.10) 13%,
      rgba(0,0,0,.50) 36%,
      rgba(0,0,0,.20) 58%,
      rgba(255,255,255,.34) 100%);
  --prominent-pill-inner:
    inset 0 1.5px 3px rgba(0,0,0,.92),
    inset 0 -1px 1px rgba(255,255,255,.26),
    inset 0 0 0 .75px rgba(255,255,255,.10),
    inset 0 0 18px rgba(0,0,0,.30),
    0 1px 2px -2px rgba(0,0,0,.30);
}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  background:var(--prominent-pill-bg) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:var(--prominent-pill-inner) !important;
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  inset:2px 8% !important;
  border-radius:inherit;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.46) 22%,
      rgba(0,0,0,.08) 48%,
      rgba(255,255,255,.18) 100%) !important;
  opacity:.72 !important;
}

.tabnav .book-cta:hover,
.btn-ink:hover,
.page-home .btn-ink:hover{
  transform:translateY(.35px) scale(.996) !important;
}

/* Concavity pass 2: dark top lip + lower internal catchlight. */
:root{
  --prominent-pill-bg:
    radial-gradient(82% 70% at 50% 52%,
      rgba(0,0,0,.28) 0%,
      rgba(0,0,0,.56) 55%,
      rgba(0,0,0,0) 82%),
    radial-gradient(86% 46% at 50% 118%,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.12) 34%,
      rgba(255,255,255,0) 72%),
    linear-gradient(180deg,
      #030406 0%,
      #0b0d11 20%,
      #07080b 58%,
      #1b1d23 100%);
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(0,0,0,.56) 0%,
      rgba(255,255,255,.16) 16%,
      rgba(255,255,255,.06) 28%,
      rgba(0,0,0,.34) 54%,
      rgba(255,255,255,.44) 100%);
  --prominent-pill-inner:
    inset 0 2px 3px rgba(0,0,0,.96),
    inset 0 -1.25px 1px rgba(255,255,255,.34),
    inset 0 0 0 .75px rgba(255,255,255,.08),
    inset 0 0 20px rgba(0,0,0,.38),
    0 1px 1px -2px rgba(0,0,0,.24);
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.50) 24%,
      rgba(0,0,0,.04) 56%,
      rgba(255,255,255,.24) 100%) !important;
  opacity:.74 !important;
}

/* Black glass pass: smoky transparent material, not dead solid black. */
:root{
  --prominent-pill-bg:
    linear-gradient(180deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.045) 14%,
      rgba(0,0,0,.12) 34%,
      rgba(255,255,255,.055) 100%),
    radial-gradient(96% 74% at 50% 52%,
      rgba(22,26,29,.42) 0%,
      rgba(8,10,12,.68) 54%,
      rgba(8,10,12,.44) 100%),
    radial-gradient(72% 46% at 50% 118%,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.09) 34%,
      rgba(255,255,255,0) 72%),
    rgba(7,9,11,.58);
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.10) 17%,
      rgba(0,0,0,.38) 42%,
      rgba(255,255,255,.08) 66%,
      rgba(255,255,255,.46) 100%);
  --prominent-pill-inner:
    inset 0 1.5px 2.5px rgba(0,0,0,.72),
    inset 0 -1.25px 1.5px rgba(255,255,255,.32),
    inset 0 0 0 .75px rgba(255,255,255,.13),
    inset 0 0 18px rgba(0,0,0,.22),
    0 8px 18px -18px rgba(5,7,10,.55);
}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  background:var(--prominent-pill-bg) !important;
  background-blend-mode:screen, normal, screen, normal;
  backdrop-filter:blur(18px) saturate(150%) brightness(.86) contrast(112%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%) brightness(.86) contrast(112%) !important;
  box-shadow:var(--prominent-pill-inner) !important;
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.32) 24%,
      rgba(255,255,255,.035) 57%,
      rgba(255,255,255,.26) 100%) !important;
  opacity:.66 !important;
}

/* Smoke transparency trim: keep the glass black, let the page breathe through it. */
:root{
  --prominent-pill-bg:
    linear-gradient(180deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.055) 16%,
      rgba(0,0,0,.10) 38%,
      rgba(255,255,255,.065) 100%),
    radial-gradient(100% 76% at 50% 52%,
      rgba(28,32,36,.34) 0%,
      rgba(8,10,12,.56) 55%,
      rgba(8,10,12,.34) 100%),
    radial-gradient(72% 46% at 50% 118%,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.11) 35%,
      rgba(255,255,255,0) 72%),
    rgba(8,10,12,.46);
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.14) 18%,
      rgba(0,0,0,.32) 42%,
      rgba(255,255,255,.10) 66%,
      rgba(255,255,255,.52) 100%);
  --prominent-pill-inner:
    inset 0 1.5px 2.5px rgba(0,0,0,.62),
    inset 0 -1.25px 1.5px rgba(255,255,255,.36),
    inset 0 0 0 .75px rgba(255,255,255,.16),
    inset 0 0 18px rgba(0,0,0,.16),
    0 8px 18px -18px rgba(5,7,10,.48);
}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  color:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(22px) saturate(155%) brightness(.88) contrast(110%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(155%) brightness(.88) contrast(110%) !important;
}

/* Groove alignment: fixed optical inset so the concave well tracks the pill shell. */
.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  isolation:isolate;
}

.tabnav .tab-indicator::before,
.filter-pills .pill-indicator::before,
.sliding-pills .pill-indicator::before,
.tabnav .book-cta::after,
.btn-ink::after,
.page-home .btn-ink::after,
.chip.sel::after,
.admin-card .row-actions button.on::after{
  inset:0 !important;
  border-radius:inherit !important;
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  top:2px !important;
  right:2px !important;
  bottom:2px !important;
  left:2px !important;
  width:auto !important;
  height:auto !important;
  border-radius:inherit !important;
  transform:none !important;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,.26) 24%,
      rgba(255,255,255,.025) 55%,
      rgba(255,255,255,.24) 100%) !important;
  opacity:.58 !important;
}

/* Transparency pass: lighter smoky black glass without losing the groove. */
:root{
  --prominent-pill-bg:
    linear-gradient(180deg,
      rgba(255,255,255,.25) 0%,
      rgba(255,255,255,.075) 18%,
      rgba(0,0,0,.075) 40%,
      rgba(255,255,255,.09) 100%),
    radial-gradient(100% 76% at 50% 52%,
      rgba(32,36,40,.24) 0%,
      rgba(8,10,12,.42) 55%,
      rgba(8,10,12,.24) 100%),
    radial-gradient(72% 46% at 50% 118%,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.14) 35%,
      rgba(255,255,255,0) 72%),
    rgba(8,10,12,.32);
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.50) 0%,
      rgba(255,255,255,.18) 18%,
      rgba(0,0,0,.24) 42%,
      rgba(255,255,255,.13) 66%,
      rgba(255,255,255,.58) 100%);
  --prominent-pill-inner:
    inset 0 1.5px 2.5px rgba(0,0,0,.46),
    inset 0 -1.25px 1.5px rgba(255,255,255,.40),
    inset 0 0 0 .75px rgba(255,255,255,.20),
    inset 0 0 18px rgba(0,0,0,.10),
    0 8px 18px -18px rgba(5,7,10,.42);
}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  color:rgba(255,255,255,.97) !important;
  text-shadow:0 1px 1.5px rgba(0,0,0,.55);
  backdrop-filter:blur(24px) saturate(165%) brightness(.95) contrast(108%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(165%) brightness(.95) contrast(108%) !important;
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.40) 0%,
      rgba(0,0,0,.20) 24%,
      rgba(255,255,255,.035) 56%,
      rgba(255,255,255,.28) 100%) !important;
  opacity:.50 !important;
}

/* Balanced black glass: deeper smoke while preserving translucency. */
:root{
  --prominent-pill-bg:
    linear-gradient(180deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.060) 17%,
      rgba(0,0,0,.11) 42%,
      rgba(255,255,255,.075) 100%),
    radial-gradient(100% 76% at 50% 52%,
      rgba(24,28,32,.30) 0%,
      rgba(6,8,10,.54) 56%,
      rgba(8,10,12,.34) 100%),
    radial-gradient(76% 48% at 50% 118%,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.12) 35%,
      rgba(255,255,255,0) 72%),
    rgba(7,9,11,.43);
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.45) 0%,
      rgba(255,255,255,.15) 18%,
      rgba(0,0,0,.32) 43%,
      rgba(255,255,255,.10) 66%,
      rgba(255,255,255,.54) 100%);
  --prominent-pill-inner:
    inset 0 1.5px 2.5px rgba(0,0,0,.56),
    inset 0 -1.25px 1.5px rgba(255,255,255,.36),
    inset 0 0 0 .75px rgba(255,255,255,.18),
    inset 0 0 18px rgba(0,0,0,.15),
    0 8px 18px -18px rgba(5,7,10,.46);
}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  color:rgba(255,255,255,.98) !important;
  text-shadow:0 1px 1.5px rgba(0,0,0,.62);
  backdrop-filter:blur(24px) saturate(160%) brightness(.90) contrast(110%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(160%) brightness(.90) contrast(110%) !important;
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.25) 24%,
      rgba(255,255,255,.030) 56%,
      rgba(255,255,255,.26) 100%) !important;
  opacity:.54 !important;
}

/* Depth pass: darker black glass, still translucent and grooved. */
:root{
  --prominent-pill-bg:
    linear-gradient(180deg,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.050) 17%,
      rgba(0,0,0,.15) 43%,
      rgba(255,255,255,.060) 100%),
    radial-gradient(100% 76% at 50% 52%,
      rgba(20,24,28,.34) 0%,
      rgba(5,7,9,.66) 56%,
      rgba(7,9,11,.44) 100%),
    radial-gradient(76% 48% at 50% 118%,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.10) 35%,
      rgba(255,255,255,0) 72%),
    rgba(6,8,10,.52);
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.40) 0%,
      rgba(255,255,255,.13) 18%,
      rgba(0,0,0,.40) 43%,
      rgba(255,255,255,.085) 66%,
      rgba(255,255,255,.50) 100%);
  --prominent-pill-inner:
    inset 0 1.5px 2.5px rgba(0,0,0,.66),
    inset 0 -1.25px 1.5px rgba(255,255,255,.32),
    inset 0 0 0 .75px rgba(255,255,255,.16),
    inset 0 0 18px rgba(0,0,0,.20),
    0 8px 18px -18px rgba(5,7,10,.48);
}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  text-shadow:0 1px 1.5px rgba(0,0,0,.68);
  backdrop-filter:blur(24px) saturate(158%) brightness(.84) contrast(112%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(158%) brightness(.84) contrast(112%) !important;
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.30) 24%,
      rgba(255,255,255,.026) 56%,
      rgba(255,255,255,.24) 100%) !important;
  opacity:.58 !important;
}

/* Soft rim pass: merge split outlines into one liquid-glass edge. */
:root{
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.10) 20%,
      rgba(0,0,0,.24) 44%,
      rgba(255,255,255,.07) 68%,
      rgba(255,255,255,.34) 100%);
  --prominent-pill-inner:
    inset 0 1.25px 2.25px rgba(0,0,0,.60),
    inset 0 -1px 1.35px rgba(255,255,255,.26),
    inset 0 0 0 .45px rgba(255,255,255,.12),
    inset 0 0 16px rgba(0,0,0,.18),
    0 8px 18px -19px rgba(5,7,10,.44);
}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  border-color:rgba(255,255,255,.065) !important;
  box-shadow:var(--prominent-pill-inner) !important;
}

.tabnav .tab-indicator::before,
.filter-pills .pill-indicator::before,
.sliding-pills .pill-indicator::before,
.tabnav .book-cta::after,
.btn-ink::after,
.page-home .btn-ink::after,
.chip.sel::after,
.admin-card .row-actions button.on::after{
  padding:.55px !important;
  background:var(--prominent-pill-rim) !important;
  opacity:.68;
  filter:blur(.16px);
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.26) 25%,
      rgba(255,255,255,.020) 56%,
      rgba(255,255,255,.20) 100%) !important;
  opacity:.52 !important;
}

.btn-ghost,
.btn-glass{
  border-color:rgba(255,255,255,.44) !important;
  box-shadow:
    inset 0 .75px 0 rgba(255,255,255,.44),
    inset 0 0 0 .45px rgba(255,255,255,.18),
    0 8px 20px -20px rgba(14,15,18,.16) !important;
}

/* Black pill rim refine: remove hard frame, keep soft refractive edge. */
:root{
  --prominent-pill-rim:
    linear-gradient(180deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.075) 21%,
      rgba(0,0,0,.18) 45%,
      rgba(255,255,255,.055) 68%,
      rgba(255,255,255,.25) 100%);
  --prominent-pill-inner:
    inset 0 1.15px 2.15px rgba(0,0,0,.62),
    inset 0 -.85px 1.15px rgba(255,255,255,.23),
    inset 0 0 0 .22px rgba(255,255,255,.10),
    inset 0 0 15px rgba(0,0,0,.18),
    0 8px 18px -20px rgba(5,7,10,.42);
}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  border-color:transparent !important;
  box-shadow:var(--prominent-pill-inner) !important;
}

.tabnav .tab-indicator::before,
.filter-pills .pill-indicator::before,
.sliding-pills .pill-indicator::before,
.tabnav .book-cta::after,
.btn-ink::after,
.page-home .btn-ink::after,
.chip.sel::after,
.admin-card .row-actions button.on::after{
  padding:.42px !important;
  opacity:.48 !important;
  filter:blur(.22px);
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,.24) 25%,
      rgba(255,255,255,.018) 56%,
      rgba(255,255,255,.18) 100%) !important;
  opacity:.48 !important;
}

/* Uneven refraction pass: glass edges should read as liquid thickness,
   not a uniform hairline. */
:root{
  --native-glass-rim:
    radial-gradient(165% 118% at 11% -18%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.68) 20%,
      rgba(255,255,255,.28) 38%,
      rgba(255,255,255,.06) 55%,
      transparent 72%),
    radial-gradient(118% 82% at 94% 8%,
      rgba(255,255,255,.58) 0%,
      rgba(255,255,255,.25) 30%,
      rgba(255,255,255,.05) 54%,
      transparent 74%),
    radial-gradient(138% 96% at 102% 112%,
      rgba(7,10,13,.27) 0%,
      rgba(7,10,13,.16) 28%,
      rgba(7,10,13,.05) 50%,
      transparent 70%),
    radial-gradient(108% 74% at -5% 96%,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.18) 32%,
      rgba(255,255,255,.05) 56%,
      transparent 76%),
    conic-gradient(from 206deg at 50% 50%,
      rgba(255,255,255,.12) 0deg,
      rgba(255,255,255,.66) 38deg,
      rgba(255,255,255,.31) 86deg,
      rgba(9,12,15,.18) 150deg,
      rgba(255,255,255,.08) 214deg,
      rgba(255,255,255,.42) 286deg,
      rgba(9,12,15,.13) 334deg,
      rgba(255,255,255,.16) 360deg);
  --native-glass-sheen:
    radial-gradient(176% 96% at 15% -30%,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.16) 30%,
      rgba(255,255,255,.04) 54%,
      transparent 76%),
    radial-gradient(84% 58% at 88% 12%,
      rgba(255,255,255,.15) 0%,
      rgba(255,255,255,.05) 42%,
      transparent 70%),
    linear-gradient(136deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.055) 42%,
      rgba(13,16,20,.032) 78%,
      rgba(255,255,255,.075) 100%);
  --native-glass-shadow:
    inset 1.4px 1.65px 1.8px rgba(255,255,255,.54),
    inset -1.45px -1.65px 2px rgba(11,14,18,.11),
    inset 8px 10px 24px rgba(255,255,255,.07),
    inset -10px -12px 24px rgba(11,14,18,.06),
    0 24px 46px -34px rgba(14,15,18,.20),
    0 1px 2px rgba(14,15,18,.04);
  --prominent-pill-rim:
    radial-gradient(150% 104% at 15% -34%,
      rgba(255,255,255,.44) 0%,
      rgba(255,255,255,.22) 32%,
      rgba(255,255,255,.05) 58%,
      transparent 76%),
    radial-gradient(118% 86% at 96% 112%,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.18) 36%,
      rgba(0,0,0,.04) 62%,
      transparent 78%),
    conic-gradient(from 210deg at 50% 50%,
      rgba(255,255,255,.08) 0deg,
      rgba(255,255,255,.28) 44deg,
      rgba(255,255,255,.10) 94deg,
      rgba(0,0,0,.18) 150deg,
      rgba(255,255,255,.04) 218deg,
      rgba(255,255,255,.22) 292deg,
      rgba(0,0,0,.13) 338deg,
      rgba(255,255,255,.08) 360deg);
  --prominent-pill-inner:
    inset 1px 1.15px 1.6px rgba(255,255,255,.15),
    inset 0 1.35px 2.2px rgba(0,0,0,.64),
    inset -1px -1.2px 1.45px rgba(255,255,255,.25),
    inset 0 0 16px rgba(0,0,0,.20),
    0 8px 18px -20px rgba(5,7,10,.42);
}

.glass,
.glass-1,
.glass-2,
.glass-3,
.btn-glass,
.btn-ghost,
.filter-pills,
.sliding-pills,
.book-rail .step.active,
.consult-input-flat,
.consult-panel,
.admin-dropzone,
.admin-card,
.ae-replace{
  border-color:rgba(255,255,255,.42) !important;
  box-shadow:var(--native-glass-shadow) !important;
}

.glass::before,
.glass-1::before,
.glass-2::before,
.glass-3::before{
  padding:2.15px !important;
  background:var(--native-glass-rim) !important;
  opacity:.92 !important;
  filter:blur(.28px) saturate(1.04);
}

.glass::after,
.glass-1::after,
.glass-2::after,
.glass-3::after{
  display:block !important;
  content:"";
  position:absolute;
  inset:1.2px;
  border-radius:inherit;
  background:
    radial-gradient(132% 72% at 14% 0%,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.11) 36%,
      transparent 68%),
    radial-gradient(92% 66% at 100% 102%,
      rgba(10,13,17,.065) 0%,
      rgba(10,13,17,.025) 36%,
      transparent 68%),
    linear-gradient(126deg,
      transparent 6%,
      rgba(255,255,255,.12) 28%,
      transparent 52%,
      rgba(9,12,15,.035) 80%,
      transparent 100%);
  opacity:.46 !important;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}

.page-card.glass::before{padding:2.45px !important}
.page-card.glass::after{opacity:.30 !important}

.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator,
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  box-shadow:var(--prominent-pill-inner) !important;
}

.tabnav .tab-indicator::before,
.filter-pills .pill-indicator::before,
.sliding-pills .pill-indicator::before,
.tabnav .book-cta::after,
.btn-ink::after,
.page-home .btn-ink::after,
.chip.sel::after,
.admin-card .row-actions button.on::after{
  padding:.92px !important;
  background:var(--prominent-pill-rim) !important;
  opacity:.70 !important;
  filter:blur(.28px) saturate(1.04);
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  left:8% !important;
  right:20% !important;
  top:1px !important;
  height:50% !important;
  background:
    radial-gradient(94% 110% at 18% 0%,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.11) 48%,
      transparent 72%),
    linear-gradient(180deg,
      rgba(0,0,0,.40) 0%,
      rgba(0,0,0,.20) 28%,
      rgba(255,255,255,.035) 62%,
      rgba(255,255,255,.18) 100%) !important;
  opacity:.52 !important;
  filter:blur(.28px);
}

/* Natural refraction pass: remove the synthetic ring feel and let each
   surface carry a slightly different light/shadow falloff. */
:root{
  --glass-light-x:12%;
  --glass-light-y:-20%;
  --glass-side-x:88%;
  --glass-side-y:6%;
  --glass-dark-x:98%;
  --glass-dark-y:112%;
  --glass-flow-angle:132deg;
  --pill-light-x:18%;
  --pill-light-y:-34%;
  --pill-dark-x:96%;
  --pill-dark-y:112%;

  --native-glass-rim:
    radial-gradient(190% 145% at var(--glass-light-x) var(--glass-light-y),
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.58) 18%,
      rgba(255,255,255,.22) 36%,
      rgba(255,255,255,.055) 58%,
      transparent 78%),
    radial-gradient(132% 96% at var(--glass-side-x) var(--glass-side-y),
      rgba(255,255,255,.36) 0%,
      rgba(255,255,255,.14) 34%,
      rgba(255,255,255,.035) 58%,
      transparent 78%),
    radial-gradient(150% 108% at var(--glass-dark-x) var(--glass-dark-y),
      rgba(6,8,10,.22) 0%,
      rgba(6,8,10,.12) 32%,
      rgba(6,8,10,.035) 58%,
      transparent 78%),
    linear-gradient(var(--glass-flow-angle),
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.045) 31%,
      rgba(8,10,12,.075) 64%,
      rgba(255,255,255,.12) 100%);
  --native-glass-sheen:
    radial-gradient(220% 120% at var(--glass-light-x) var(--glass-light-y),
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.105) 34%,
      rgba(255,255,255,.02) 62%,
      transparent 82%),
    linear-gradient(var(--glass-flow-angle),
      rgba(255,255,255,.09) 0%,
      rgba(255,255,255,.038) 44%,
      rgba(8,10,12,.026) 78%,
      rgba(255,255,255,.055) 100%);
  --native-glass-shadow:
    inset 1.4px 1.6px 2px rgba(255,255,255,.42),
    inset -1.2px -1.4px 2px rgba(8,10,12,.095),
    inset 12px 14px 28px rgba(255,255,255,.048),
    inset -12px -14px 30px rgba(8,10,12,.052),
    0 24px 46px -34px rgba(14,15,18,.20),
    0 1px 2px rgba(14,15,18,.04);
  --prominent-pill-rim:
    radial-gradient(190% 122% at var(--pill-light-x) var(--pill-light-y),
      rgba(255,255,255,.40) 0%,
      rgba(255,255,255,.20) 31%,
      rgba(255,255,255,.045) 61%,
      transparent 80%),
    radial-gradient(136% 102% at var(--pill-dark-x) var(--pill-dark-y),
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.18) 36%,
      rgba(0,0,0,.04) 64%,
      transparent 82%),
    linear-gradient(138deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.035) 38%,
      rgba(0,0,0,.18) 72%,
      rgba(255,255,255,.10) 100%);
  --prominent-pill-inner:
    inset 1px 1.15px 1.6px rgba(255,255,255,.12),
    inset 0 1.4px 2.4px rgba(0,0,0,.62),
    inset -1px -1.2px 1.5px rgba(255,255,255,.22),
    inset 0 0 16px rgba(0,0,0,.19),
    0 8px 18px -20px rgba(5,7,10,.42);
}

.page-card.glass{
  --glass-light-x:7%;
  --glass-light-y:-15%;
  --glass-side-x:76%;
  --glass-side-y:4%;
  --glass-dark-x:100%;
  --glass-dark-y:110%;
  --glass-flow-angle:128deg;
}
.tabnav{
  --glass-light-x:24%;
  --glass-light-y:-38%;
  --glass-side-x:92%;
  --glass-side-y:18%;
  --glass-dark-x:86%;
  --glass-dark-y:122%;
  --glass-flow-angle:116deg;
}
.home-right-dock,
.caption,
.badge{
  --glass-light-x:16%;
  --glass-light-y:-28%;
  --glass-side-x:82%;
  --glass-side-y:0%;
  --glass-dark-x:98%;
  --glass-dark-y:116%;
  --glass-flow-angle:122deg;
}
.btn-ghost,
.btn-glass,
.home-tone-dial{
  --glass-light-x:22%;
  --glass-light-y:-30%;
  --glass-side-x:96%;
  --glass-side-y:18%;
  --glass-dark-x:92%;
  --glass-dark-y:118%;
  --glass-flow-angle:140deg;
}
.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator{
  --pill-light-x:24%;
  --pill-light-y:-42%;
  --pill-dark-x:88%;
  --pill-dark-y:116%;
}
.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  --pill-light-x:16%;
  --pill-light-y:-36%;
  --pill-dark-x:96%;
  --pill-dark-y:118%;
}

.glass::before,
.glass-1::before,
.glass-2::before,
.glass-3::before{
  padding:1.72px !important;
  opacity:.86 !important;
  filter:blur(.46px) saturate(1.02);
}
.page-card.glass::before{padding:2px !important}
.glass::after,
.glass-1::after,
.glass-2::after,
.glass-3::after{
  background:
    radial-gradient(170% 92% at var(--glass-light-x) var(--glass-light-y),
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.09) 38%,
      transparent 72%),
    radial-gradient(116% 82% at var(--glass-dark-x) var(--glass-dark-y),
      rgba(8,10,12,.052) 0%,
      rgba(8,10,12,.018) 42%,
      transparent 74%),
    linear-gradient(var(--glass-flow-angle),
      transparent 4%,
      rgba(255,255,255,.095) 34%,
      transparent 58%,
      rgba(8,10,12,.026) 83%,
      transparent 100%);
  opacity:.38 !important;
}
.page-card.glass::after{opacity:.24 !important}

.tabnav .tab-indicator::before,
.filter-pills .pill-indicator::before,
.sliding-pills .pill-indicator::before,
.tabnav .book-cta::after,
.btn-ink::after,
.page-home .btn-ink::after,
.chip.sel::after,
.admin-card .row-actions button.on::after{
  padding:.76px !important;
  opacity:.62 !important;
  filter:blur(.44px) saturate(1.02);
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  left:7% !important;
  right:24% !important;
  height:54% !important;
  background:
    radial-gradient(120% 118% at 16% 0%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 52%,
      transparent 82%),
    linear-gradient(180deg,
      rgba(0,0,0,.36) 0%,
      rgba(0,0,0,.18) 30%,
      rgba(255,255,255,.026) 64%,
      rgba(255,255,255,.14) 100%) !important;
  opacity:.48 !important;
  filter:blur(.42px);
}

/* Light-strip correction: Liquid Glass reads from uneven white strips,
   especially where the radius bends. */
:root{
  --native-glass-rim:
    radial-gradient(72px 46px at 0 0,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.74) 22%,
      rgba(255,255,255,.32) 46%,
      transparent 74%),
    radial-gradient(42px 70px at 100% 0,
      rgba(255,255,255,.76) 0%,
      rgba(255,255,255,.36) 34%,
      rgba(255,255,255,.08) 62%,
      transparent 82%),
    radial-gradient(68px 58px at 100% 100%,
      rgba(7,9,12,.24) 0%,
      rgba(7,9,12,.12) 32%,
      rgba(255,255,255,.16) 58%,
      transparent 82%),
    radial-gradient(52px 42px at 0 100%,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.18) 38%,
      transparent 76%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.78) 5%,
      rgba(255,255,255,.96) 9%,
      rgba(255,255,255,.52) 16%,
      rgba(255,255,255,.13) 28%,
      transparent 43%,
      transparent 68%,
      rgba(255,255,255,.34) 79%,
      rgba(255,255,255,.16) 88%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.36) 0%,
      rgba(255,255,255,.07) 18%,
      transparent 44%,
      rgba(9,12,15,.10) 78%,
      rgba(255,255,255,.22) 100%);
  --native-glass-sheen:
    linear-gradient(91deg,
      transparent 0%,
      rgba(255,255,255,.20) 6%,
      rgba(255,255,255,.105) 18%,
      transparent 38%,
      transparent 70%,
      rgba(255,255,255,.085) 83%,
      transparent 100%),
    radial-gradient(120px 70px at 4% 0,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.08) 44%,
      transparent 78%);
  --native-glass-shadow:
    inset 1.6px 1.8px 1.8px rgba(255,255,255,.48),
    inset -1.4px -1.6px 2px rgba(7,9,12,.12),
    inset 10px 9px 24px rgba(255,255,255,.05),
    inset -14px -16px 34px rgba(7,9,12,.058),
    0 24px 46px -34px rgba(14,15,18,.20),
    0 1px 2px rgba(14,15,18,.04);
  --prominent-pill-rim:
    radial-gradient(34px 24px at 0 0,
      rgba(255,255,255,.54) 0%,
      rgba(255,255,255,.24) 42%,
      transparent 78%),
    radial-gradient(24px 34px at 100% 0,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.14) 42%,
      transparent 76%),
    radial-gradient(36px 28px at 100% 100%,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.16) 42%,
      transparent 78%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.35) 6%,
      rgba(255,255,255,.18) 18%,
      transparent 38%,
      transparent 66%,
      rgba(255,255,255,.14) 82%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.11) 0%,
      rgba(0,0,0,.18) 56%,
      rgba(255,255,255,.12) 100%);
}

.glass::before,
.glass-1::before,
.glass-2::before,
.glass-3::before{
  padding:2.35px !important;
  opacity:.96 !important;
  filter:blur(.16px) saturate(1.06);
}
.page-card.glass::before{padding:3px !important}
.tabnav::before,
.home-right-dock::before,
.caption::before,
.badge::before{padding:2.15px !important}

.glass::after,
.glass-1::after,
.glass-2::after,
.glass-3::after{
  background:
    linear-gradient(91deg,
      transparent 0%,
      rgba(255,255,255,.12) 5%,
      rgba(255,255,255,.05) 17%,
      transparent 42%,
      transparent 72%,
      rgba(255,255,255,.06) 86%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      transparent 36%,
      rgba(8,10,12,.034) 100%);
  opacity:.34 !important;
}
.page-card.glass::after{opacity:.20 !important}

.tabnav .tab-indicator::before,
.filter-pills .pill-indicator::before,
.sliding-pills .pill-indicator::before,
.tabnav .book-cta::after,
.btn-ink::after,
.page-home .btn-ink::after,
.chip.sel::after,
.admin-card .row-actions button.on::after{
  padding:1px !important;
  opacity:.76 !important;
  filter:blur(.14px) saturate(1.05);
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  left:5% !important;
  right:28% !important;
  top:1px !important;
  height:42% !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.32) 7%,
      rgba(255,255,255,.16) 22%,
      transparent 48%,
      rgba(255,255,255,.08) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.32) 0%,
      rgba(0,0,0,.18) 34%,
      rgba(255,255,255,.036) 72%,
      rgba(255,255,255,.13) 100%) !important;
  opacity:.56 !important;
  filter:blur(.18px);
}

/* Non-strip refraction: keep thick/thin corners, remove lamp-bar reads. */
:root{
  --native-glass-rim:
    radial-gradient(80px 52px at 6px 5px,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.55) 24%,
      rgba(255,255,255,.17) 50%,
      transparent 78%),
    radial-gradient(58px 78px at calc(100% - 5px) 9px,
      rgba(255,255,255,.58) 0%,
      rgba(255,255,255,.22) 33%,
      rgba(255,255,255,.06) 58%,
      transparent 82%),
    radial-gradient(76px 60px at calc(100% - 7px) calc(100% - 5px),
      rgba(7,9,12,.22) 0%,
      rgba(7,9,12,.11) 34%,
      rgba(255,255,255,.11) 60%,
      transparent 84%),
    radial-gradient(56px 44px at 7px calc(100% - 6px),
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.12) 40%,
      transparent 78%),
    radial-gradient(62% 78% at 24% 0%,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.06) 44%,
      transparent 72%),
    linear-gradient(138deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.025) 34%,
      rgba(8,10,12,.07) 72%,
      rgba(255,255,255,.08) 100%);
  --native-glass-sheen:
    radial-gradient(116px 70px at 9px 5px,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.065) 46%,
      transparent 80%),
    radial-gradient(86px 66px at calc(100% - 8px) 11px,
      rgba(255,255,255,.10) 0%,
      transparent 72%),
    radial-gradient(74px 52px at calc(100% - 8px) calc(100% - 8px),
      rgba(7,9,12,.045) 0%,
      transparent 74%);
  --native-glass-shadow:
    inset 1.3px 1.55px 1.9px rgba(255,255,255,.42),
    inset -1.35px -1.5px 2.1px rgba(7,9,12,.11),
    inset 8px 8px 22px rgba(255,255,255,.042),
    inset -12px -13px 28px rgba(7,9,12,.05),
    0 24px 46px -34px rgba(14,15,18,.20),
    0 1px 2px rgba(14,15,18,.04);
  --prominent-pill-rim:
    radial-gradient(34px 24px at 5px 3px,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.18) 48%,
      transparent 82%),
    radial-gradient(26px 34px at calc(100% - 4px) 4px,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.09) 48%,
      transparent 80%),
    radial-gradient(36px 28px at calc(100% - 4px) calc(100% - 3px),
      rgba(0,0,0,.32) 0%,
      rgba(0,0,0,.14) 48%,
      transparent 82%),
    linear-gradient(146deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.025) 38%,
      rgba(0,0,0,.17) 74%,
      rgba(255,255,255,.08) 100%);
  --prominent-pill-inner:
    inset 1px 1.1px 1.5px rgba(255,255,255,.12),
    inset 0 1.35px 2.3px rgba(0,0,0,.62),
    inset -1px -1.15px 1.45px rgba(255,255,255,.21),
    inset 0 0 15px rgba(0,0,0,.19),
    0 8px 18px -20px rgba(5,7,10,.42);
}

.glass::before,
.glass-1::before,
.glass-2::before,
.glass-3::before{
  padding:2.05px !important;
  opacity:.90 !important;
  filter:blur(.26px) saturate(1.04);
}
.page-card.glass::before{padding:2.55px !important}
.tabnav::before,
.home-right-dock::before,
.caption::before,
.badge::before{padding:1.9px !important}

.glass::after,
.glass-1::after,
.glass-2::after,
.glass-3::after{
  background:
    radial-gradient(116px 70px at 9px 5px,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.045) 48%,
      transparent 82%),
    radial-gradient(74px 54px at calc(100% - 8px) calc(100% - 8px),
      rgba(8,10,12,.038) 0%,
      transparent 76%);
  opacity:.30 !important;
}
.page-card.glass::after{opacity:.18 !important}

.tabnav .tab-indicator::before,
.filter-pills .pill-indicator::before,
.sliding-pills .pill-indicator::before,
.tabnav .book-cta::after,
.btn-ink::after,
.page-home .btn-ink::after,
.chip.sel::after,
.admin-card .row-actions button.on::after{
  padding:.82px !important;
  opacity:.66 !important;
  filter:blur(.24px) saturate(1.04);
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  left:8% !important;
  right:30% !important;
  height:48% !important;
  background:
    radial-gradient(62px 32px at 0 0,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.08) 52%,
      transparent 84%),
    linear-gradient(180deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.18) 34%,
      rgba(255,255,255,.026) 70%,
      rgba(255,255,255,.12) 100%) !important;
  opacity:.50 !important;
  filter:blur(.28px);
}

/* Patch-glint refraction: avoid continuous lamp-strip highlights. */
:root{
  --native-glass-rim:
    radial-gradient(118px 72px at 18px 10px,
      rgba(255,255,255,.76) 0%,
      rgba(255,255,255,.38) 25%,
      rgba(255,255,255,.105) 58%,
      transparent 84%),
    radial-gradient(72px 88px at calc(100% - 14px) 18px,
      rgba(255,255,255,.46) 0%,
      rgba(255,255,255,.17) 38%,
      transparent 80%),
    radial-gradient(70px 52px at 11px calc(100% - 18px),
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.075) 45%,
      transparent 82%),
    radial-gradient(112px 76px at calc(100% - 18px) calc(100% - 14px),
      rgba(5,7,10,.18) 0%,
      rgba(5,7,10,.08) 40%,
      transparent 82%),
    radial-gradient(160px 56px at 58% calc(100% - 4px),
      rgba(5,7,10,.055) 0%,
      transparent 76%),
    radial-gradient(80px 54px at 58% 8px,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.07) 48%,
      transparent 82%);
  --native-glass-sheen:
    radial-gradient(166px 94px at 7% 5%,
      rgba(255,255,255,.15) 0%,
      rgba(255,255,255,.046) 46%,
      transparent 78%),
    radial-gradient(120px 78px at 72% 9%,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.034) 48%,
      transparent 76%),
    radial-gradient(122px 82px at 92% 96%,
      rgba(7,9,12,.030) 0%,
      transparent 72%);
  --native-glass-shadow:
    inset 1.3px 1.35px 1.9px rgba(255,255,255,.40),
    inset -1.25px -1.45px 2.1px rgba(7,9,12,.12),
    inset 12px 9px 28px rgba(255,255,255,.038),
    inset -16px -14px 32px rgba(7,9,12,.060),
    0 22px 46px -36px rgba(14,15,18,.20),
    0 1px 2px rgba(14,15,18,.035);
  --prominent-pill-rim:
    radial-gradient(34px 24px at 7px 4px,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.16) 46%,
      transparent 82%),
    radial-gradient(34px 18px at 58% 4px,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.075) 52%,
      transparent 82%),
    radial-gradient(26px 30px at calc(100% - 5px) 5px,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.060) 48%,
      transparent 82%),
    radial-gradient(38px 30px at calc(100% - 4px) calc(100% - 4px),
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,.13) 48%,
      transparent 84%),
    radial-gradient(34px 22px at 9px calc(100% - 4px),
      rgba(255,255,255,.08) 0%,
      transparent 78%);
  --prominent-pill-inner:
    inset .9px .95px 1.4px rgba(255,255,255,.105),
    inset 0 1.45px 2.7px rgba(0,0,0,.60),
    inset -1px -1px 1.3px rgba(255,255,255,.17),
    inset 0 0 15px rgba(0,0,0,.18),
    0 8px 18px -21px rgba(5,7,10,.40);
}

.glass::before,
.glass-1::before,
.glass-2::before,
.glass-3::before{
  padding:1.55px !important;
  opacity:.76 !important;
  filter:blur(.34px) saturate(1.03);
}
.page-card.glass::before{
  padding:1.85px !important;
  opacity:.58 !important;
}
.tabnav::before,
.home-right-dock::before,
.caption::before,
.badge::before{
  padding:1.55px !important;
  opacity:.74 !important;
}

.glass::after,
.glass-1::after,
.glass-2::after,
.glass-3::after{
  background:var(--native-glass-sheen) !important;
  opacity:.29 !important;
  filter:blur(.16px);
}
.page-card.glass::after{opacity:.16 !important}

.tabnav .tab-indicator::before,
.filter-pills .pill-indicator::before,
.sliding-pills .pill-indicator::before,
.tabnav .book-cta::after,
.btn-ink::after,
.page-home .btn-ink::after,
.chip.sel::after,
.admin-card .row-actions button.on::after{
  padding:.72px !important;
  opacity:.66 !important;
  filter:blur(.26px) saturate(1.03);
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  inset:0 !important;
  height:auto !important;
  background:
    radial-gradient(54px 30px at 18% 8%,
      rgba(255,255,255,.25) 0%,
      rgba(255,255,255,.088) 48%,
      transparent 78%),
    radial-gradient(44px 22px at 62% 7%,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.042) 50%,
      transparent 80%),
    radial-gradient(52px 32px at 86% 92%,
      rgba(0,0,0,.22) 0%,
      rgba(0,0,0,.075) 48%,
      transparent 82%),
    radial-gradient(42px 26px at 92% 10%,
      rgba(255,255,255,.10) 0%,
      transparent 78%) !important;
  opacity:.56 !important;
  filter:blur(.32px);
}

/* Control Center reference pass: separated white glints and dark thickness. */
:root{
  --native-glass-bg:rgba(184,190,187,.24);
  --native-glass-bg-strong:rgba(196,202,198,.34);
  --native-glass-filter:blur(34px) saturate(116%) contrast(103%) brightness(.99);
  --native-glass-rim:
    radial-gradient(138px 82px at 16px 10px,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.44) 23%,
      rgba(255,255,255,.11) 55%,
      transparent 82%),
    radial-gradient(104px 36px at 44% 6px,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.10) 46%,
      transparent 78%),
    radial-gradient(80px 96px at calc(100% - 14px) 20px,
      rgba(255,255,255,.56) 0%,
      rgba(255,255,255,.19) 36%,
      transparent 78%),
    radial-gradient(84px 54px at 14px calc(100% - 18px),
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.07) 46%,
      transparent 82%),
    radial-gradient(130px 88px at calc(100% - 18px) calc(100% - 16px),
      rgba(6,8,10,.20) 0%,
      rgba(6,8,10,.085) 38%,
      transparent 80%),
    radial-gradient(190px 58px at 54% calc(100% - 4px),
      rgba(6,8,10,.070) 0%,
      rgba(6,8,10,.025) 48%,
      transparent 78%);
  --native-glass-sheen:
    radial-gradient(180px 102px at 8% 6%,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.038) 42%,
      transparent 76%),
    radial-gradient(136px 72px at 58% 7%,
      rgba(255,255,255,.070) 0%,
      rgba(255,255,255,.022) 48%,
      transparent 78%),
    radial-gradient(118px 92px at 90% 12%,
      rgba(255,255,255,.080) 0%,
      rgba(255,255,255,.026) 50%,
      transparent 80%),
    radial-gradient(150px 94px at 92% 96%,
      rgba(7,9,12,.050) 0%,
      rgba(7,9,12,.018) 48%,
      transparent 76%);
  --native-glass-shadow:
    inset 1.25px 1.25px 1.8px rgba(255,255,255,.46),
    inset -1.5px -1.65px 2.4px rgba(7,9,12,.145),
    inset 12px 10px 30px rgba(255,255,255,.044),
    inset -18px -16px 34px rgba(7,9,12,.066),
    0 24px 48px -36px rgba(7,9,12,.24),
    0 1px 2px rgba(7,9,12,.04);
  --prominent-pill-rim:
    radial-gradient(42px 26px at 8px 5px,
      rgba(255,255,255,.54) 0%,
      rgba(255,255,255,.20) 44%,
      transparent 82%),
    radial-gradient(46px 20px at 54% 4px,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.09) 50%,
      transparent 84%),
    radial-gradient(32px 34px at calc(100% - 6px) 6px,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.08) 48%,
      transparent 84%),
    radial-gradient(44px 34px at calc(100% - 5px) calc(100% - 5px),
      rgba(0,0,0,.36) 0%,
      rgba(0,0,0,.15) 48%,
      transparent 84%),
    radial-gradient(62px 22px at 54% calc(100% - 4px),
      rgba(0,0,0,.16) 0%,
      rgba(0,0,0,.045) 50%,
      transparent 82%);
  --prominent-pill-inner:
    inset 1px 1px 1.4px rgba(255,255,255,.14),
    inset 0 1.5px 2.8px rgba(0,0,0,.58),
    inset -1.2px -1.3px 1.7px rgba(255,255,255,.18),
    inset 0 -8px 18px rgba(0,0,0,.20),
    0 9px 18px -20px rgba(4,6,8,.44);
}

.glass,
.glass-1,
.glass-2,
.glass-3,
.btn-glass,
.btn-ghost,
.filter-pills,
.sliding-pills,
.book-rail .step.active,
.consult-input-flat,
.consult-panel,
.admin-dropzone,
.admin-card,
.ae-replace{
  background:
    var(--native-glass-sheen),
    rgba(184,190,187,.24) !important;
  backdrop-filter:var(--native-glass-filter) !important;
  -webkit-backdrop-filter:var(--native-glass-filter) !important;
  border-color:rgba(255,255,255,.34) !important;
  box-shadow:var(--native-glass-shadow) !important;
}

.page-card.glass{
  background:
    var(--native-glass-sheen),
    rgba(188,194,190,.16) !important;
  backdrop-filter:blur(26px) saturate(112%) contrast(102%) brightness(.98) !important;
  -webkit-backdrop-filter:blur(26px) saturate(112%) contrast(102%) brightness(.98) !important;
}

.home-right-dock,
.caption,
.badge,
.btn-ghost,
.btn-glass{
  background:
    var(--native-glass-sheen),
    rgba(190,196,192,.32) !important;
}

.glass::before,
.glass-1::before,
.glass-2::before,
.glass-3::before{
  padding:1.95px !important;
  background:var(--native-glass-rim) !important;
  opacity:.86 !important;
  filter:blur(.26px) saturate(1.03);
}

.page-card.glass::before{
  padding:1.65px !important;
  opacity:.70 !important;
}

.tabnav::before,
.home-right-dock::before,
.caption::before,
.badge::before{
  padding:1.85px !important;
  opacity:.88 !important;
}

.glass::after,
.glass-1::after,
.glass-2::after,
.glass-3::after{
  display:block !important;
  inset:1px !important;
  background:var(--native-glass-sheen) !important;
  opacity:.22 !important;
  mix-blend-mode:screen;
  filter:blur(.12px);
}

.page-card.glass::after{
  opacity:.10 !important;
}

.tabnav .tab-indicator::before,
.filter-pills .pill-indicator::before,
.sliding-pills .pill-indicator::before,
.tabnav .book-cta::after,
.btn-ink::after,
.page-home .btn-ink::after,
.chip.sel::after,
.admin-card .row-actions button.on::after{
  padding:.86px !important;
  background:var(--prominent-pill-rim) !important;
  opacity:.82 !important;
  filter:blur(.20px) saturate(1.03);
}

.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.btn-ink::before,
.page-home .btn-ink::before,
.chip.sel::before,
.admin-card .row-actions button.on::before{
  inset:0 !important;
  height:auto !important;
  background:
    radial-gradient(64px 34px at 18% 9%,
      rgba(255,255,255,.32) 0%,
      rgba(255,255,255,.11) 46%,
      transparent 78%),
    radial-gradient(54px 22px at 56% 7%,
      rgba(255,255,255,.15) 0%,
      rgba(255,255,255,.048) 50%,
      transparent 80%),
    radial-gradient(48px 28px at 90% 12%,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.040) 50%,
      transparent 80%),
    radial-gradient(58px 34px at 88% 92%,
      rgba(0,0,0,.24) 0%,
      rgba(0,0,0,.080) 48%,
      transparent 82%),
    radial-gradient(70px 20px at 52% 96%,
      rgba(0,0,0,.13) 0%,
      transparent 78%) !important;
  opacity:.64 !important;
  filter:blur(.26px);
}

/* Codex continuation polish: narrow-view layout pass.
   Keep the existing Liquid Glass tokens, but stop the nav from covering the
   hero and give the home screen enough vertical rhythm on phone-sized panes. */
@media (max-width:760px){
  .tabnav{
    top:auto;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    transform:none !important;
    max-width:none;
    width:auto;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:5px;
    padding:6px;
    border-radius:24px;
    overflow:hidden;
  }
  .tabnav:hover,
  .tabnav:active{
    transform:none !important;
  }
  .tabnav .brand{
    margin:0;
    padding:6px 7px;
    border-right:0;
    gap:0;
    font-size:0;
  }
  .tabnav .brand .mark{
    width:25px;
    height:25px;
    font-size:11px;
  }
  .tabnav .tabs{
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    justify-content:flex-start;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
  }
  .tabnav .tabs::-webkit-scrollbar{display:none}
  .tabnav button.tab{
    flex:0 0 auto;
    padding:7px 10px;
    font-size:0 !important;
  }
  .tabnav button.tab::after{
    content:attr(data-short);
    font-size:12px;
    line-height:1;
  }
  .tabnav .book-cta{
    margin-left:0;
    padding:8px 12px;
    font-size:12px;
  }

  .page-stage{
    top:12px;
    left:10px;
    right:10px;
    bottom:calc(82px + env(safe-area-inset-bottom));
  }
  .page-card{
    border-radius:24px;
  }
}

@media (max-width:900px){
  .page-home{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(310px,48vh);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .home-left{
    min-height:0;
    overflow:visible;
    justify-content:flex-start;
    gap:22px;
    padding:30px 28px 20px;
  }
  .home-left > div:first-child{
    min-height:0;
  }
  .home-left .h-display{
    margin-top:12px !important;
    font-size:clamp(42px,12vw,62px);
    line-height:1.02;
  }
  .home-left .lede{
    margin-top:14px !important;
    font-size:14px;
    line-height:1.72;
    max-width:36em;
  }
  .home-lower{
    height:auto;
    min-height:0;
    margin-top:0;
    padding-top:16px;
    align-items:flex-start;
  }
  .home-color-pad{
    width:100%;
    grid-template-columns:54px minmax(0,1fr);
    gap:12px;
  }
  .home-tone-dial{
    width:54px;
    height:54px;
  }
  .home-tone-copy b{
    font-size:15px;
  }
  .home-tone-copy small{
    white-space:normal;
  }
  .home-right{
    min-height:310px;
    border-left:0;
    border-top:0.5px solid rgba(255,255,255,.42);
  }
  .home-right .feat img{
    object-position:center 34%;
  }
  .home-right-dock{
    left:12px;
    right:12px;
    bottom:12px;
    padding:12px;
    border-radius:20px;
  }
  .home-right-dock .actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .home-right-dock .actions .btn{
    width:auto;
    justify-content:center;
    padding:10px 12px;
  }
}

@media (max-width:560px){
  .home-left{
    padding:24px 22px 18px;
  }
  .home-left .h-display{
    font-size:clamp(36px,11vw,46px);
  }
  .home-left .lede{
    font-size:13.5px;
  }
  .home-right{
    min-height:330px;
  }
  .home-right .badge{
    top:12px;
    right:12px;
    padding:6px 10px;
    font-size:11px;
  }
  .home-right-meta{
    display:none;
  }
  .home-right .caption{
    padding-top:7px;
  }
  .home-right .caption .l{
    font-size:12.5px;
  }
  .home-right .caption .r{
    font-size:10.5px;
  }
}

/* macos26-ui repair pass: make material functional, not decorative.
   Model: repair + content-material. Content surfaces are readable system
   material; only navigation and direct controls keep a weak translucent layer. */
:root{
  --sys-material-surface:rgba(247,248,249,.88);
  --sys-material-elevated:rgba(250,251,252,.82);
  --sys-material-control:rgba(248,249,250,.74);
  --sys-material-control-hover:rgba(255,255,255,.86);
  --sys-material-border:rgba(14,15,18,.105);
  --sys-material-border-strong:rgba(14,15,18,.16);
  --sys-material-shadow:
    0 18px 42px -34px rgba(14,15,18,.34),
    0 1px 1px rgba(14,15,18,.035);
  --sys-material-inset:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(14,15,18,.035);
  --sys-control-selected:#17181c;
  --sys-control-selected-hover:#202126;
}

.glass::before,
.glass-1::before,
.glass-2::before,
.glass-3::before,
.glass::after,
.glass-1::after,
.glass-2::after,
.glass-3::after,
.tabnav::before,
.tabnav::after,
.home-right-dock::before,
.home-right-dock::after,
.caption::before,
.caption::after,
.badge::before,
.badge::after,
.tabnav .tab-indicator::before,
.tabnav .tab-indicator::after,
.filter-pills .pill-indicator::before,
.filter-pills .pill-indicator::after,
.sliding-pills .pill-indicator::before,
.sliding-pills .pill-indicator::after,
.tabnav .book-cta::before,
.tabnav .book-cta::after,
.btn-ink::before,
.btn-ink::after,
.page-home .btn-ink::before,
.page-home .btn-ink::after,
.chip.sel::before,
.chip.sel::after,
.admin-card .row-actions button.on::before,
.admin-card .row-actions button.on::after{
  display:none !important;
  content:none !important;
}

.page-card.glass,
.page-card.glass-1,
.page-card.glass-2,
.page-card.glass-3{
  background:var(--sys-material-surface) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.46) !important;
  box-shadow:var(--sys-material-shadow) !important;
}

.glass,
.glass-1,
.glass-2,
.glass-3,
.admin-card,
.admin-dropzone,
.ae-replace,
.consult-panel,
.work-focus .modal{
  background:var(--sys-material-elevated) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid var(--sys-material-border) !important;
  box-shadow:var(--sys-material-shadow) !important;
}

.tabnav,
.home-right-dock,
.badge,
.caption,
.btn-glass,
.btn-ghost,
.filter-pills,
.sliding-pills,
.book-rail .step.active,
.consult-input-flat,
.ask-fab-btn{
  background:var(--sys-material-control) !important;
  backdrop-filter:blur(18px) saturate(118%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(118%) !important;
  border:1px solid rgba(255,255,255,.52) !important;
  box-shadow:var(--sys-material-inset), 0 10px 24px -22px rgba(14,15,18,.28) !important;
}

.tabnav{
  overflow:hidden;
}
.tabnav .tab-indicator,
.filter-pills .pill-indicator,
.sliding-pills .pill-indicator{
  background:var(--sys-control-selected) !important;
  box-shadow:none !important;
  filter:none !important;
}
.tabnav button.tab,
.filter-pills button,
.sliding-pills button{
  color:var(--ink-2) !important;
  text-shadow:none !important;
}
.tabnav button.tab.active,
.filter-pills button.active,
.sliding-pills button.active{
  color:#fff !important;
  text-shadow:none !important;
}

.tabnav .book-cta,
.btn-ink,
.page-home .btn-ink,
.chip.sel,
.admin-card .row-actions button.on{
  background:var(--sys-control-selected) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}
.tabnav .book-cta:hover,
.btn-ink:hover,
.page-home .btn-ink:hover,
.chip.sel:hover,
.admin-card .row-actions button.on:hover{
  background:var(--sys-control-selected-hover) !important;
  transform:none !important;
  filter:none !important;
}
.tabnav .book-cta:active,
.btn-ink:active,
.page-home .btn-ink:active,
.tabnav button.tab:active,
.filter-pills button:active,
.sliding-pills button:active{
  transform:scale(.985) !important;
}

.btn-ghost:hover,
.btn-glass:hover,
.filter-pills button:hover,
.sliding-pills button:hover,
.book-rail .step:hover{
  background:var(--sys-material-control-hover) !important;
  transform:none !important;
  filter:none !important;
}

.home-left{
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.14)),
    color-mix(in srgb, var(--home-color) 7%, rgba(247,248,249,.86)) !important;
}
.home-right{
  background:rgba(244,246,247,.62) !important;
}
.home-right::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(14,15,18,.05)),
    linear-gradient(90deg, rgba(14,15,18,.025), transparent 48%) !important;
}
.home-right-dock{
  color:var(--ink);
}
.home-right .badge{
  color:var(--ink);
}

.work-focus{
  background:rgba(14,15,18,.28) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.work-focus .close{
  background:var(--sys-material-control) !important;
  backdrop-filter:blur(14px) saturate(112%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(112%) !important;
  border:1px solid rgba(255,255,255,.54) !important;
  box-shadow:var(--sys-material-inset) !important;
}

.field input,
.field textarea,
.upload,
.cal-nav button,
.calendar .day,
.body-picker button,
.chip,
.letter-ask-input,
.consult-input-flat .letter-ask-send{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

@media (prefers-reduced-transparency:reduce){
  .tabnav,
  .home-right-dock,
  .badge,
  .caption,
  .btn-glass,
  .btn-ghost,
  .filter-pills,
  .sliding-pills,
  .book-rail .step.active,
  .consult-input-flat,
  .ask-fab-btn{
    background:rgba(250,251,252,.96) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* Home lower-right cleanup from browser comments:
   remove the large info container and compress all status details into the
   small caption strip. */
.home-right-dock{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-areas:"actions caption" !important;
  align-items:end !important;
  column-gap:10px !important;
  row-gap:0 !important;
}
.home-right-meta{
  display:none !important;
}
.home-right-dock .actions{
  align-self:end;
}
.home-right-dock .actions .btn{
  padding:10px 16px;
  font-size:12.5px;
}
.home-right .caption{
  padding:7px 10px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.52) !important;
  background:rgba(248,249,250,.74) !important;
  backdrop-filter:blur(14px) saturate(112%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(112%) !important;
  box-shadow:var(--sys-material-inset), 0 8px 18px -18px rgba(14,15,18,.22) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "title since"
    "facts facts" !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:4px !important;
  min-width:0;
}
.home-right .caption-title{
  grid-area:title;
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:0;
  white-space:nowrap;
}
.home-right .caption-name{
  flex:0 0 auto;
  font-family:var(--serif) !important;
  font-size:11.5px !important;
  line-height:1.1 !important;
  color:var(--ink) !important;
}
.home-right .caption-location{
  min-width:0;
  font-family:var(--sans) !important;
  font-size:10.5px !important;
  line-height:1.1 !important;
  color:var(--ink-3) !important;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home-right .caption-since{
  grid-area:since;
  justify-self:end;
  font-size:9.5px !important;
  line-height:1 !important;
  color:var(--ink-3) !important;
  white-space:nowrap;
}
.home-right .caption-facts{
  grid-area:facts;
  display:grid;
  grid-template-columns:auto minmax(132px,1fr) auto;
  align-items:center;
  gap:8px;
  min-width:0;
  padding-top:4px;
  border-top:1px solid rgba(34,38,43,.07);
}
.home-right .caption-fact{
  display:flex;
  align-items:baseline;
  gap:3px;
  min-width:0;
  white-space:nowrap;
  font-family:var(--sans);
  font-size:9.5px;
  line-height:1.12;
}
.home-right .caption-fact b{
  flex:0 0 auto;
  font-weight:500;
  color:var(--ink-3) !important;
}
.home-right .caption-fact span{
  min-width:0;
  color:var(--ink-2) !important;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:1180px){
  .home-right-dock{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "actions"
      "caption" !important;
    row-gap:8px !important;
  }
  .home-right .caption{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .home-right .caption-facts{
    grid-template-columns:1fr;
    gap:4px;
  }
}

/* Mobile site v1: QR landing and shared work-photo selector. */
.mobile-title,
.mobile-lede{
  display:none;
}
.home-work-picker{
  width:min(620px,100%);
  display:grid;
  grid-template-columns:168px minmax(0,1fr);
  align-items:center;
  gap:14px;
}
.home-picker-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.home-picker-copy span{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--ink-3);
}
.home-picker-copy b{
  font-family:var(--serif);
  font-size:18px;
  font-weight:400;
  color:var(--ink);
  line-height:1.15;
}
.home-picker-copy small{
  font-size:11px;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home-work-rail{
  min-width:0;
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 7px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:rgba(14,15,18,.18) transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
}
.home-work-rail::-webkit-scrollbar{height:3px}
.home-work-rail::-webkit-scrollbar-thumb{background:rgba(14,15,18,.18); border-radius:999px}
.home-work-chip{
  flex:0 0 auto;
  width:50px;
  height:66px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.58);
  border-radius:12px;
  background:rgba(255,255,255,.5);
  cursor:pointer;
  scroll-snap-align:start;
  box-shadow:0 8px 18px -16px rgba(14,15,18,.28);
  transition:transform .22s var(--ease), border-color .22s var(--ease), opacity .22s var(--ease);
}
.home-work-chip img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.76) contrast(.97);
}
.home-work-chip span{
  position:absolute;
  left:5px;
  bottom:5px;
  min-width:18px;
  min-height:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:var(--ink-2);
  font-family:var(--mono);
  font-size:9px;
}
.home-work-chip:hover{
  transform:translateY(-2px);
  border-color:rgba(14,15,18,.18);
}
.home-work-chip.is-active{
  transform:translateY(-3px);
  border-color:rgba(14,15,18,.38);
  opacity:1;
}
.home-work-chip.is-active span{
  background:var(--sys-control-selected);
  color:#fff;
}
.work-book-cta{
  margin-top:24px;
  width:100%;
  justify-content:center;
}
.date-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:24px;
}

@media (max-width:760px){
  html,
  body,
  #root{
    overflow:hidden;
  }
  .page-home.is-work-selector{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:1fr !important;
    min-height:100%;
    overflow:hidden !important;
    background:rgba(246,248,249,.92) !important;
  }
  .page-home.is-work-selector .home-left,
  .page-home.is-work-selector .home-right{
    grid-area:1 / 1;
  }
  .page-home.is-work-selector .home-right{
    height:100%;
    min-height:0 !important;
    border:0 !important;
    background:transparent !important;
  }
  .page-home.is-work-selector .home-right::after{
    background:
      linear-gradient(180deg, rgba(246,248,249,.92) 0%, rgba(246,248,249,.54) 28%, rgba(246,248,249,.1) 48%, rgba(246,248,249,.9) 78%, rgba(246,248,249,.98) 100%),
      linear-gradient(90deg, rgba(246,248,249,.76), rgba(246,248,249,.08) 48%, rgba(246,248,249,.58));
  }
  .page-home.is-work-selector .home-right .feat{
    inset:0;
  }
  .page-home.is-work-selector .home-right .feat img{
    object-fit:cover;
    object-position:center 44%;
    filter:saturate(.68) contrast(.95) brightness(1.02);
  }
  .page-home.is-work-selector .home-left{
    z-index:2;
    min-height:0;
    height:100%;
    padding:22px 18px 156px;
    background:transparent !important;
    justify-content:flex-start;
    gap:0;
    overflow:hidden;
  }
  .page-home.is-work-selector .home-copy{
    max-width:330px;
    padding-top:2px;
  }
  .desktop-title,
  .desktop-lede{
    display:none !important;
  }
  .mobile-title,
  .mobile-lede{
    display:block;
  }
  .page-home.is-work-selector .mobile-title{
    font-size:clamp(38px, 12.2vw, 50px) !important;
    line-height:.98;
    max-width:7.6em;
  }
  .page-home.is-work-selector .mobile-lede{
    width:min(318px, 88vw);
    font-size:13.5px;
    line-height:1.64;
    color:var(--ink-2);
  }
  .page-home.is-work-selector .home-lower{
    position:absolute;
    left:16px;
    right:16px;
    bottom:106px;
    z-index:4;
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    display:block;
  }
  .page-home.is-work-selector .home-work-picker{
    width:100%;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px 10px 9px;
    border:1px solid rgba(255,255,255,.58);
    border-radius:18px;
    background:rgba(248,249,250,.78);
    backdrop-filter:blur(16px) saturate(116%);
    -webkit-backdrop-filter:blur(16px) saturate(116%);
    box-shadow:var(--sys-material-inset), 0 14px 28px -26px rgba(14,15,18,.32);
  }
  .page-home.is-work-selector .home-picker-copy{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "label label"
      "title meta";
    align-items:end;
    column-gap:8px;
  }
  .page-home.is-work-selector .home-picker-copy span{grid-area:label; font-size:9.5px}
  .page-home.is-work-selector .home-picker-copy b{
    grid-area:title;
    font-size:15.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .page-home.is-work-selector .home-picker-copy small{
    grid-area:meta;
    max-width:112px;
    font-size:10px;
    text-align:right;
  }
  .page-home.is-work-selector .home-work-chip{
    width:58px;
    height:76px;
    border-radius:13px;
  }
  .page-home.is-work-selector .home-right .badge{
    top:14px;
    right:14px;
    z-index:5;
  }
  .page-home.is-work-selector .home-right-dock{
    left:16px !important;
    right:16px !important;
    bottom:14px !important;
    z-index:5;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "actions"
      "caption" !important;
    row-gap:8px !important;
  }
  .page-home.is-work-selector .home-right-dock .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .page-home.is-work-selector .home-right-dock .actions .btn{
    min-height:42px;
    width:auto;
    justify-content:center;
    padding:10px 12px;
    font-size:12.5px;
  }
  .page-home.is-work-selector .home-right .caption{
    display:none !important;
  }

  .works-bar{
    position:relative;
    z-index:3;
    padding:16px 14px 10px;
    grid-template-columns:1fr;
    gap:10px;
  }
  .works-bar .title{
    font-size:13px;
  }
  .works-bar .filter-pills,
  .works-bar .sliding-pills{
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .works-stage{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .works-grid{
    position:relative !important;
    inset:auto !important;
    height:auto !important;
    min-height:0;
    padding:10px 14px 18px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:none !important;
    grid-auto-rows:auto;
    gap:10px !important;
    overflow:visible !important;
  }
  .work-tile{
    aspect-ratio:4 / 5;
    border-radius:14px;
  }
  .work-tile .meta{
    opacity:1;
    transform:none;
    padding:22px 10px 9px;
  }
  .work-focus{
    padding:0 !important;
    place-items:stretch !important;
  }
  .work-focus .modal{
    width:100%;
    height:100%;
    max-height:none !important;
    border-radius:0 !important;
    grid-template-rows:minmax(300px,46vh) 1fr;
  }
  .work-focus img{
    max-height:none !important;
    height:100%;
  }
  .work-focus .info{
    padding:24px 20px calc(34px + env(safe-area-inset-bottom));
  }

  .page-faq-letter{
    padding:22px 18px 26px !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .page-faq-letter .letter,
  .page-faq-letter.is-consulting .letter{
    max-width:none !important;
  }
  .letter-title{
    font-size:23px;
  }
  .letter-body p{
    font-size:13.5px;
  }
  .letter-two{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:16px;
  }
  .letter-qcol,
  .letter-acol{
    padding-top:0;
    overflow:visible;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .letter-qlist{
    max-height:none;
    overflow:visible;
    padding-bottom:24px;
  }
  .ask-fab{
    position:fixed;
    right:16px;
    bottom:calc(86px + env(safe-area-inset-bottom));
  }
  .page-faq-letter.is-consulting .consult-rail{
    position:fixed !important;
    inset:auto 10px calc(78px + env(safe-area-inset-bottom)) 10px !important;
    width:auto !important;
    height:min(74vh, 650px);
    z-index:70;
    padding:0;
    border:1px solid rgba(255,255,255,.58);
    border-radius:24px 24px 18px 18px;
    background:rgba(248,249,250,.94);
    box-shadow:0 -18px 42px -34px rgba(14,15,18,.42), var(--sys-material-inset);
    -webkit-mask-image:none;
            mask-image:none;
  }
  .page-faq-letter.is-consulting .consult-chat-col{
    padding:18px 16px 14px;
  }
  .consult-chat{
    min-height:180px;
  }

  .page-book{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto 1fr !important;
    overflow:hidden !important;
  }
  .book-rail{
    padding:10px 10px 9px !important;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .book-rail::-webkit-scrollbar{display:none}
  .book-rail .step{
    flex:0 0 auto;
    padding:8px 10px;
    border-radius:14px;
  }
  .book-rail .step .lbl .en{
    display:none;
  }
  .book-panel{
    padding:18px 16px 0 !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .book-panel .head h3{
    font-size:23px;
  }
  .book-panel .body{
    min-height:auto;
  }
  .book-panel .nav{
    position:sticky;
    bottom:0;
    padding:12px 0 calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(247,248,249,0), rgba(247,248,249,.94) 24%);
    z-index:3;
  }
  .book-panel .nav .btn{
    min-height:44px;
  }
  .chip-group{
    gap:8px;
  }
  .chip{
    min-height:38px;
  }
  .field input,
  .field select,
  .field textarea{
    min-height:44px;
    font-size:16px;
  }
  .field textarea{
    min-height:104px;
  }
  .date-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .time-slots{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .page-studio,
  .page-process{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .page-studio{
    grid-template-columns:1fr !important;
  }
  .studio-info{
    padding:24px 20px 28px !important;
  }
  .studio-info h2{
    font-size:26px !important;
  }
  .studio-map{
    min-height:280px;
  }
  .process-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    padding:0 16px 24px !important;
  }
}

/* Final phone-review overrides: keep these last. */
@media (max-width:760px){
  .tabnav{
    top:calc(10px + env(safe-area-inset-top)) !important;
    bottom:auto !important;
    left:10px !important;
    right:10px !important;
  }
  .page-stage{
    top:calc(72px + env(safe-area-inset-top)) !important;
    bottom:12px !important;
  }
  .ask-fab{
    bottom:calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

.home-work-wheel{
  --wheel-size:154px;
  --wheel-radius:58px;
  position:relative;
  width:var(--wheel-size);
  height:var(--wheel-size);
  flex:none;
  border-radius:50%;
  touch-action:none;
  cursor:grab;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.82) 0 25%, rgba(255,255,255,.28) 26% 54%, transparent 55%),
    conic-gradient(from 0deg, rgba(14,15,18,.08), rgba(255,255,255,.46), rgba(14,15,18,.06), rgba(255,255,255,.42), rgba(14,15,18,.08));
  border:1px solid rgba(255,255,255,.58);
  box-shadow:var(--sys-material-inset), 0 14px 30px -24px rgba(14,15,18,.34);
}
.home-work-wheel.is-dragging{cursor:grabbing}
.home-wheel-center{
  position:absolute;
  inset:50%;
  width:56px;
  height:56px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  z-index:3;
  border:1px solid rgba(14,15,18,.18);
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 24px -18px rgba(14,15,18,.38);
}
.home-wheel-center img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.68;
  filter:saturate(.72);
}
.home-wheel-center span{
  position:absolute;
  inset:auto 7px 7px auto;
  min-width:20px;
  min-height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--sys-control-selected);
  color:#fff;
  font-family:var(--mono);
  font-size:9px;
}
.home-work-wheel .home-work-chip{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:44px;
  height:56px;
  margin:-28px 0 0 -22px;
  transform:
    rotate(calc(var(--rotation) + var(--angle)))
    translateY(calc(var(--wheel-radius) * -1))
    rotate(calc(-1 * (var(--rotation) + var(--angle)))) !important;
  transform-origin:center center;
}
@media (min-width:761px){
  .home-work-picker{
    grid-template-columns:minmax(126px,168px) auto !important;
  }
}
@media (max-width:760px){
  .page-home.is-work-selector .home-left{
    padding:20px 18px 142px !important;
  }
  .page-home.is-work-selector .home-lower{
    bottom:90px !important;
  }
  .page-home.is-work-selector .home-work-picker{
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:12px !important;
    padding:11px 12px !important;
  }
  .page-home.is-work-selector .home-picker-copy{
    display:flex !important;
    gap:5px !important;
  }
  .page-home.is-work-selector .home-picker-copy b{
    font-size:18px !important;
  }
  .page-home.is-work-selector .home-picker-copy small{
    max-width:148px !important;
    text-align:left !important;
  }
  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:178px;
    --wheel-radius:68px;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip{
    width:52px !important;
    height:66px !important;
    margin:-33px 0 0 -26px !important;
  }
  .page-home.is-work-selector .home-wheel-center{
    width:66px !important;
    height:66px !important;
  }
  .page-home.is-work-selector .home-right-dock{
    bottom:12px !important;
  }
}

@media (max-width:760px){
  .page-faq-letter{
    overflow-y:auto !important;
  }
  .letter-two{
    gap:14px !important;
  }
  .letter-qcol{
    padding-top:0 !important;
  }
  .letter-qlist{
    display:grid !important;
    gap:8px !important;
    padding-bottom:12px !important;
  }
  .letter-qlist li{
    border:1px solid rgba(14,15,18,.08) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.42) !important;
  }
  .letter-q{
    min-height:56px !important;
    padding:11px 12px !important;
    gap:12px !important;
  }
  .letter-q:hover{
    padding-left:12px !important;
  }
  .letter-q-num{
    width:26px !important;
    font-size:10px !important;
  }
  .letter-q-text{
    font-size:15px !important;
    line-height:1.35 !important;
  }
  .letter-acol{
    min-height:132px !important;
    padding:13px 14px !important;
    border:1px solid rgba(14,15,18,.08) !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.36) !important;
  }
  .letter-empty{
    display:none !important;
  }
  .letter-answer-q{
    font-size:18px !important;
    margin-bottom:10px !important;
  }
  .letter-answer-body .letter-ans{
    font-size:15px !important;
    line-height:1.72 !important;
  }
  .letter-ask-input,
  .consult-input-flat .letter-ask-input{
    font-size:16px !important;
    min-height:44px !important;
  }
  .page-faq-letter.is-consulting .consult-rail{
    bottom:calc(18px + env(safe-area-inset-bottom)) !important;
    height:min(70vh,620px) !important;
  }
}

@media (max-width:760px){
  .process-head{
    padding:24px 20px 14px !important;
  }
  .process-head .h-section{
    font-size:clamp(33px,10vw,44px) !important;
    line-height:1.08 !important;
  }
  .process-grid{
    gap:10px !important;
    padding:0 18px 24px !important;
  }
  .proc-card{
    min-height:auto !important;
    padding:18px 18px 16px !important;
    border-radius:18px !important;
  }
  .proc-card .num{
    font-size:38px !important;
    margin-bottom:8px !important;
  }
  .proc-card h3{
    font-size:19px !important;
  }
  .proc-card p{
    font-size:13.5px !important;
    line-height:1.62 !important;
  }
}

/* Phone review v2 final override: this block intentionally stays after all older mobile rules. */
.home-work-wheel .home-work-chip{
  opacity:.68;
  z-index:1;
  transform:
    rotate(calc(var(--rotation) + var(--angle)))
    translateY(calc(var(--wheel-radius) * -1))
    rotate(var(--counter-angle)) !important;
}
.home-work-wheel .home-work-chip.is-active{
  opacity:1;
  z-index:5;
  border-color:rgba(14,15,18,.42) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.68), 0 10px 22px -17px rgba(14,15,18,.44) !important;
}

@media (max-width:760px){
  .tabnav{
    top:calc(10px + env(safe-area-inset-top)) !important;
    bottom:auto !important;
    left:10px !important;
    right:10px !important;
    z-index:90 !important;
  }
  .page-stage{
    top:calc(72px + env(safe-area-inset-top)) !important;
    bottom:12px !important;
  }
  .page-home.is-work-selector .home-left{
    padding:20px 18px 144px !important;
  }
  .page-home.is-work-selector .home-lower{
    left:14px !important;
    right:14px !important;
    bottom:88px !important;
  }
  .page-home.is-work-selector .home-work-picker{
    grid-template-columns:minmax(118px,1fr) 150px !important;
    align-items:center !important;
    gap:10px !important;
    min-height:174px !important;
    padding:12px 12px 12px 14px !important;
    overflow:hidden !important;
  }
  .page-home.is-work-selector .home-picker-copy{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:5px !important;
    min-width:0 !important;
  }
  .page-home.is-work-selector .home-picker-copy span{
    font-size:10px !important;
    line-height:1.2 !important;
  }
  .page-home.is-work-selector .home-picker-copy b{
    width:100% !important;
    font-size:24px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .page-home.is-work-selector .home-picker-copy small{
    max-width:100% !important;
    font-size:11px !important;
    line-height:1.2 !important;
    text-align:left !important;
  }
  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:150px;
    --wheel-radius:56px;
    justify-self:end !important;
  }
  .page-home.is-work-selector .home-wheel-center{
    width:58px !important;
    height:58px !important;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip{
    width:42px !important;
    height:52px !important;
    margin:-26px 0 0 -21px !important;
    border-radius:14px !important;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip span{
    left:5px !important;
    bottom:5px !important;
    min-width:17px !important;
    min-height:17px !important;
    font-size:8px !important;
  }
  .page-home.is-work-selector .home-right-dock{
    bottom:12px !important;
  }
  .page-faq-letter{
    overflow-y:auto !important;
  }
  .page-faq-letter.is-consulting{
    overflow:hidden !important;
  }
  .page-faq-letter.is-consulting .consult-rail{
    position:fixed !important;
    inset:auto 10px calc(18px + env(safe-area-inset-bottom)) 10px !important;
    height:min(70vh,620px) !important;
    overflow:hidden !important;
  }
  .page-faq-letter.is-consulting .consult-chat-col{
    height:100% !important;
    overflow:hidden !important;
  }
  .page-faq-letter.is-consulting .consult-chat{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .letter-ask-input,
  .consult-input-flat .letter-ask-input{
    font-size:16px !important;
  }
}
/* TATWO Studio 2026-05-03 orientation pass.
   Phone portrait stays mobile. Phone landscape uses a compact wide layout.
   iPad portrait gets its own tablet composition instead of inheriting desktop. */
@media (orientation: landscape) and (max-height:560px) and (max-width:980px){
  html,
  body{
    overflow:hidden !important;
  }
  .tabnav{
    top:calc(8px + env(safe-area-inset-top)) !important;
    bottom:auto !important;
    left:50% !important;
    right:auto !important;
    width:min(720px, calc(100vw - 20px)) !important;
    max-width:none !important;
    transform:translateX(-50%) !important;
    display:flex !important;
    grid-template-columns:none !important;
    padding:5px !important;
    border-radius:999px !important;
  }
  .tabnav .brand{
    font-size:13px !important;
    padding:6px 10px !important;
    gap:7px !important;
  }
  .tabnav .brand .mark{
    width:24px !important;
    height:24px !important;
  }
  .tabnav .tabs{
    display:flex !important;
    flex:1 1 auto !important;
    overflow-x:auto !important;
    justify-content:center !important;
  }
  .tabnav button.tab{
    flex:0 0 auto !important;
    padding:7px 10px !important;
    font-size:12px !important;
  }
  .tabnav button.tab::after{
    content:none !important;
  }
  .tabnav .book-cta{
    flex:0 0 auto !important;
    padding:8px 13px !important;
    font-size:12px !important;
  }
  .page-stage{
    top:calc(58px + env(safe-area-inset-top)) !important;
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
  }
  .page-card{
    border-radius:22px !important;
  }
  .page-home.is-work-selector{
    grid-template-columns:minmax(300px,42%) minmax(360px,58%) !important;
    grid-template-rows:1fr !important;
    overflow:hidden !important;
  }
  .page-home.is-work-selector .home-left,
  .page-home.is-work-selector .home-right{
    min-height:0 !important;
    height:100% !important;
  }
  .page-home.is-work-selector .home-left{
    position:relative !important;
    padding:18px 16px 118px !important;
    gap:8px !important;
    overflow:hidden !important;
  }
  .page-home.is-work-selector .home-copy{
    max-width:none !important;
  }
  .page-home.is-work-selector .desktop-title,
  .page-home.is-work-selector .desktop-title{
    display:block !important;
    margin-top:10px !important;
    font-size:clamp(30px,6vw,46px) !important;
    line-height:.96 !important;
  }
  .page-home.is-work-selector .desktop-lede,
  .page-home.is-work-selector .desktop-lede{
    display:block !important;
    max-height:5.2em !important;
    overflow:hidden !important;
    margin-top:10px !important;
    font-size:12px !important;
    line-height:1.58 !important;
  }
  .page-home.is-work-selector .mobile-title,
  .page-home.is-work-selector .mobile-lede{
    display:none !important;
  }
  .page-home.is-work-selector .home-lower{
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    height:auto !important;
    padding:0 !important;
  }
  .page-home.is-work-selector .home-work-picker{
    grid-template-columns:minmax(116px,1fr) 118px !important;
    min-height:112px !important;
    padding:10px 10px 10px 12px !important;
    gap:9px !important;
    overflow:hidden !important;
  }
  .page-home.is-work-selector .home-picker-copy b{
    font-size:20px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .page-home.is-work-selector .home-picker-copy small{
    font-size:10px !important;
    line-height:1.25 !important;
  }
  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:118px !important;
    --wheel-radius:43px !important;
  }
  .page-home.is-work-selector .home-wheel-center{
    width:48px !important;
    height:48px !important;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip{
    width:32px !important;
    height:40px !important;
    margin:-20px 0 0 -16px !important;
    border-radius:11px !important;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip span{
    min-width:15px !important;
    min-height:15px !important;
    font-size:7.5px !important;
  }
  .page-home.is-work-selector .home-right{
    border-left:.5px solid rgba(255,255,255,.46) !important;
    border-top:0 !important;
  }
  .page-home.is-work-selector .home-right .feat img{
    object-position:center 35% !important;
  }
  .page-home.is-work-selector .home-right-dock{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    padding:10px !important;
    border-radius:18px !important;
  }
  .page-home.is-work-selector .home-right-meta,
  .page-home.is-work-selector .caption-facts{
    display:none !important;
  }
  .page-home.is-work-selector .home-right-dock .actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .page-home.is-work-selector .home-right-dock .actions .btn{
    min-height:36px !important;
    justify-content:center !important;
    padding:8px 10px !important;
    font-size:12px !important;
  }
  .page-home.is-work-selector .home-right .caption{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:10px !important;
    padding-top:7px !important;
    font-size:11px !important;
  }
  .page-process{
    overflow:auto !important;
  }
  .process-grid{
    grid-template-columns:repeat(4,minmax(160px,1fr)) !important;
    grid-template-rows:1fr !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  .proc-card{
    min-width:160px !important;
    padding:18px !important;
  }
  .proc-card .n{
    font-size:48px !important;
  }
}

@media (min-width:761px) and (max-width:1180px) and (min-height:700px){
  .page-home.is-work-selector{
    grid-template-columns:minmax(320px,45%) minmax(360px,55%) !important;
  }
  .page-home.is-work-selector .home-left{
    padding:42px 34px 170px !important;
  }
  .page-home.is-work-selector .home-lower{
    left:28px !important;
    right:28px !important;
    bottom:28px !important;
  }
  .page-home.is-work-selector .home-work-picker{
    grid-template-columns:minmax(160px,1fr) 190px !important;
  }
  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:190px !important;
    --wheel-radius:72px !important;
  }
}

@media (min-width:761px) and (max-width:900px) and (orientation:portrait){
  .page-home.is-work-selector{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:1fr !important;
    overflow:hidden !important;
    background:rgba(246,248,249,.92) !important;
  }
  .page-home.is-work-selector .home-left,
  .page-home.is-work-selector .home-right{
    grid-area:1 / 1 !important;
    min-height:0 !important;
    height:100% !important;
  }
  .page-home.is-work-selector .home-right{
    border:0 !important;
    background:transparent !important;
  }
  .page-home.is-work-selector .home-right::after{
    background:
      linear-gradient(180deg, rgba(246,248,249,.94) 0%, rgba(246,248,249,.56) 27%, rgba(246,248,249,.08) 50%, rgba(246,248,249,.86) 78%, rgba(246,248,249,.98) 100%),
      linear-gradient(90deg, rgba(246,248,249,.82), rgba(246,248,249,.12) 48%, rgba(246,248,249,.62));
  }
  .page-home.is-work-selector .home-right .feat{
    inset:0 !important;
  }
  .page-home.is-work-selector .home-right .feat img{
    object-fit:cover !important;
    object-position:center 42% !important;
    filter:saturate(.68) contrast(.95) brightness(1.03) !important;
  }
  .page-home.is-work-selector .home-left{
    z-index:2 !important;
    padding:48px 52px 218px !important;
    background:transparent !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
  }
  .page-home.is-work-selector .home-copy{
    width:min(620px, 100%) !important;
    max-width:620px !important;
  }
  .page-home.is-work-selector .desktop-title{
    display:block !important;
    max-width:none !important;
    font-size:clamp(58px, 9.8vw, 78px) !important;
    line-height:.98 !important;
  }
  .page-home.is-work-selector .desktop-lede{
    display:block !important;
    width:min(560px, 100%) !important;
    max-width:560px !important;
    font-size:15px !important;
    line-height:1.68 !important;
  }
  .page-home.is-work-selector .mobile-title,
  .page-home.is-work-selector .mobile-lede{
    display:none !important;
  }
  .page-home.is-work-selector .home-right .badge{
    top:24px !important;
    right:24px !important;
    z-index:5 !important;
  }
  .page-home.is-work-selector .home-lower{
    position:absolute !important;
    left:38px !important;
    right:38px !important;
    bottom:106px !important;
    z-index:4 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    display:block !important;
  }
  .page-home.is-work-selector .home-work-picker{
    width:100% !important;
    grid-template-columns:minmax(240px,1fr) 212px !important;
    align-items:center !important;
    gap:18px !important;
    min-height:202px !important;
    padding:18px 18px 18px 22px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.6) !important;
    border-radius:24px !important;
    background:rgba(248,249,250,.8) !important;
    backdrop-filter:blur(18px) saturate(116%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(116%) !important;
    box-shadow:var(--sys-material-inset), 0 18px 36px -30px rgba(14,15,18,.34) !important;
  }
  .page-home.is-work-selector .home-picker-copy{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:7px !important;
    min-width:0 !important;
  }
  .page-home.is-work-selector .home-picker-copy span{
    font-size:11px !important;
    line-height:1.2 !important;
  }
  .page-home.is-work-selector .home-picker-copy b{
    width:100% !important;
    font-size:32px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .page-home.is-work-selector .home-picker-copy small{
    max-width:100% !important;
    font-size:12px !important;
    line-height:1.3 !important;
    text-align:left !important;
  }
  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:212px !important;
    --wheel-radius:80px !important;
    justify-self:end !important;
  }
  .page-home.is-work-selector .home-wheel-center{
    width:68px !important;
    height:68px !important;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip{
    width:48px !important;
    height:60px !important;
    margin:-30px 0 0 -24px !important;
    border-radius:15px !important;
  }
  .page-home.is-work-selector .home-work-wheel .home-work-chip span{
    left:6px !important;
    bottom:6px !important;
    min-width:18px !important;
    min-height:18px !important;
    font-size:8.5px !important;
  }
  .page-home.is-work-selector .home-right-dock{
    left:38px !important;
    right:38px !important;
    bottom:24px !important;
    z-index:5 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "actions"
      "caption" !important;
    row-gap:9px !important;
    padding:14px !important;
    border-radius:24px !important;
  }
  .page-home.is-work-selector .home-right-meta,
  .page-home.is-work-selector .caption-facts{
    display:none !important;
  }
  .page-home.is-work-selector .home-right-dock .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .page-home.is-work-selector .home-right-dock .actions .btn{
    min-height:46px !important;
    width:auto !important;
    justify-content:center !important;
    padding:11px 14px !important;
    font-size:13px !important;
  }
  .page-home.is-work-selector .home-right .caption{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:12px !important;
    padding-top:8px !important;
  }
}

/* 2026-05-17 final phone-only overrides from mobile screenshots.
   Keep this last so older phone-review blocks cannot reintroduce boxes/maps. */
@media (max-width:760px){
  .works-bar{
    grid-template-columns:minmax(0, 1fr) auto !important;
    padding:14px 14px 8px !important;
    gap:8px 10px !important;
  }
  .works-bar-head{
    display:contents !important;
    min-height:0 !important;
  }
  .works-post-entry{
    flex:0 0 auto !important;
    min-height:34px !important;
    padding:0 12px 0 9px !important;
    background:rgba(255,255,255,.76) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.16) !important;
    backdrop-filter:blur(18px) saturate(1.16) !important;
  }
  .works-bar .filter-pills,
  .works-bar .sliding-pills{
    width:100% !important;
    max-width:100% !important;
    min-height:48px !important;
    height:48px !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:4px !important;
    padding:4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    border-radius:24px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch;
  }
  .works-bar .filter-pills::-webkit-scrollbar,
  .works-bar .sliding-pills::-webkit-scrollbar{
    display:none !important;
  }
  .works-bar .filter-pills .pill-indicator,
  .works-bar .sliding-pills .pill-indicator{
    top:4px !important;
    height:40px !important;
    border-radius:20px !important;
  }
  .works-bar .filter-pills button,
  .works-bar .sliding-pills button{
    flex:0 0 auto !important;
    height:40px !important;
    min-width:max-content !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 15px !important;
    border-radius:20px !important;
    white-space:nowrap !important;
    line-height:1 !important;
    transform:none !important;
  }
  .works-bar .filter-pills button:active,
  .works-bar .sliding-pills button:active{
    transform:none !important;
  }

  .page-faq-letter{
    background:
      linear-gradient(180deg, rgba(255,255,255,.76), rgba(248,249,250,.86)),
      var(--paper) !important;
  }
  .letter-two{
    display:block !important;
  }
  .letter-qcol{
    padding-top:0 !important;
  }
  .letter-qlist{
    display:block !important;
    margin:0 !important;
    padding:0 0 18px !important;
    border-top:1px solid rgba(14,15,18,.08) !important;
  }
  .letter-qlist li{
    border:0 !important;
    border-bottom:1px solid rgba(14,15,18,.08) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .letter-q{
    min-height:62px !important;
    width:100% !important;
    padding:0 2px !important;
    gap:18px !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-align:left !important;
  }
  .letter-q:hover,
  .letter-q:active{
    padding-left:2px !important;
    background:transparent !important;
  }
  .letter-q-num{
    width:38px !important;
    flex:0 0 38px !important;
    font-family:var(--mono) !important;
    font-size:11px !important;
    color:rgba(14,15,18,.42) !important;
  }
  .letter-q-text{
    font-family:var(--serif) !important;
    font-size:18px !important;
    line-height:1.35 !important;
    color:rgba(14,15,18,.82) !important;
    transition:color .22s var(--ease), transform .22s var(--ease);
  }
  .letter-qlist li.is-active .letter-q-text{
    color:var(--ink) !important;
    transform:translateX(4px);
  }
  .letter-qlist li.is-active .letter-q-num{
    color:var(--ink) !important;
  }
  .letter-qlist li.is-active .mobile-letter-inline-answer{
    display:block !important;
    padding:0 2px 18px 56px !important;
  }
  .mobile-letter-inline-answer p{
    margin:0 !important;
    font-size:14px !important;
    line-height:1.75 !important;
    color:var(--ink-2) !important;
  }
  .letter-acol{
    display:none !important;
  }

  .page-studio{
    display:block !important;
    overflow-y:auto !important;
  }
  .studio-info{
    padding:24px 20px 22px !important;
  }
  .studio-info .lines{
    margin-top:16px !important;
  }
  .studio-email-line{
    display:none !important;
  }
  .studio-map-toggle-line{
    display:flex !important;
  }
  .studio-map-toggle{
    appearance:none;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    width:100%;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-align:left;
    cursor:pointer;
  }
  .studio-map-toggle span{
    flex:none;
    font-family:var(--mono);
    font-size:10px;
    color:var(--ink-3);
  }
  .studio-mobile-map-panel{
    display:none;
  }
  .page-studio.is-map-open .studio-mobile-map-panel{
    display:flex !important;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin:14px 0 0;
    padding:15px 16px;
    border-radius:20px;
    border:1px solid rgba(14,15,18,.08);
    background:rgba(255,255,255,.48);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  }
  .studio-mobile-map-title{
    font-family:var(--serif);
    font-size:18px;
    color:var(--ink);
  }
  .studio-mobile-map-panel p{
    margin:3px 0 0;
    font-size:12.5px;
    color:var(--ink-2);
  }
  .studio-mobile-map-panel a{
    flex:none;
    border-radius:999px;
    padding:9px 12px;
    background:var(--ink);
    color:#fff;
    font-size:12px;
    text-decoration:none;
  }
  .studio-map{
    display:none !important;
  }
  .page-studio.is-map-open .studio-map{
    display:block !important;
    position:relative !important;
    min-height:176px !important;
    height:176px !important;
    margin:0 20px 22px !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }
  .page-studio.is-map-open .studio-map svg{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }
  .page-studio.is-map-open .map-overlay{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    padding:10px 12px !important;
    border-radius:16px !important;
  }
}

@media (min-width:761px){
  .mobile-letter-inline-answer,
  .studio-map-toggle-line,
  .studio-mobile-map-panel{
    display:none !important;
  }
}

/* 2026-05-18 phone hard stop: prevent desktop-width children inside phone preview. */
@media (max-width:760px){
  html,
  body{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  .page-stage,
  .page-card,
  .page-works,
  .works-stage{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }

  .page-stage[data-screen-label="works"]{
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .page-works{
    display:flex !important;
    flex-direction:column !important;
  }

  .works-bar{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:112px !important;
    padding:14px 14px 12px !important;
    gap:10px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  .works-bar .title{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.25 !important;
    white-space:normal !important;
  }

  .works-bar .title em{
    display:none !important;
  }

  .works-bar .filter-pills,
  .works-bar .sliding-pills{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    touch-action:pan-x !important;
    gap:4px !important;
    padding:4px 22px !important;
    scroll-padding-inline:22px !important;
    scroll-snap-type:x mandatory !important;
    overscroll-behavior-x:contain !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
    mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
  }

  .works-bar .filter-pills::-webkit-scrollbar,
  .works-bar .sliding-pills::-webkit-scrollbar{
    display:none !important;
  }

  .works-bar .filter-pills::after,
  .works-bar .sliding-pills::after{
    content:"" !important;
    flex:0 0 16px !important;
    height:1px !important;
    pointer-events:none !important;
  }

  .works-bar .filter-pills .pill-indicator,
  .works-bar .sliding-pills .pill-indicator{
    top:4px !important;
    height:38px !important;
  }

  .works-bar .filter-pills button,
  .works-bar .sliding-pills button{
    flex:0 0 auto !important;
    height:38px !important;
    padding:0 14px !important;
    line-height:38px !important;
    min-width:max-content !important;
    white-space:nowrap !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:normal !important;
  }

  .works-stage{
    flex:1 1 auto !important;
    min-height:0 !important;
  }

  .page-home.is-work-selector .home-right-dock .actions{
    display:none !important;
  }

  .page-home.is-work-selector .home-left{
    padding-bottom:22px !important;
  }

  .page-home.is-work-selector .home-lower{
    display:block !important;
    position:absolute !important;
    left:auto !important;
    right:4px !important;
    bottom:4px !important;
    width:112px !important;
    height:88px !important;
    pointer-events:none !important;
    z-index:8 !important;
  }

  .page-home.is-work-selector .home-work-picker{
    display:grid !important;
    grid-template-columns:auto 18px !important;
    align-items:end !important;
    justify-content:end !important;
    gap:6px !important;
    width:112px !important;
    height:88px !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    pointer-events:none !important;
  }

  .page-home.is-work-selector .home-work-picker::before,
  .page-home.is-work-selector .home-work-picker::after{
    display:none !important;
  }

  .page-home.is-work-selector .home-picker-copy{
    display:none !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:76px !important;
    --wheel-radius:30px !important;
    width:76px !important;
    height:76px !important;
    align-self:end !important;
    pointer-events:auto !important;
    opacity:.92 !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.86) 0 27%, rgba(255,255,255,.34) 28% 56%, transparent 57%),
      conic-gradient(from 0deg, rgba(14,15,18,.10), rgba(255,255,255,.52), rgba(14,15,18,.06), rgba(255,255,255,.44), rgba(14,15,18,.10)) !important;
    border:1px solid rgba(255,255,255,.68) !important;
    box-shadow:var(--sys-material-inset), 0 14px 30px -24px rgba(14,15,18,.38) !important;
  }

  .page-home.is-work-selector .home-wheel-center{
    width:34px !important;
    height:34px !important;
  }

  .page-home.is-work-selector .home-wheel-center span{
    min-width:15px !important;
    min-height:15px !important;
    right:3px !important;
    bottom:3px !important;
    font-size:7px !important;
  }

  .page-home.is-work-selector .home-work-wheel .home-work-chip{
    width:24px !important;
    height:30px !important;
    margin:-15px 0 0 -12px !important;
    border-radius:9px !important;
    opacity:.72 !important;
  }

  .page-home.is-work-selector .home-work-wheel .home-work-chip span{
    min-width:12px !important;
    min-height:12px !important;
    font-size:6px !important;
  }

  .page-home.is-work-selector .home-side-ai-control{
    position:relative !important;
    align-self:end !important;
    width:16px !important;
    height:78px !important;
    border-radius:999px !important;
    pointer-events:auto !important;
    touch-action:none !important;
    cursor:ns-resize !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.78), rgba(246,247,248,.34)),
      rgba(255,255,255,.36) !important;
    border:1px solid rgba(14,15,18,.10) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.86),
      inset 0 -1px 0 rgba(14,15,18,.08),
      0 12px 24px -20px rgba(14,15,18,.45) !important;
    overflow:hidden !important;
  }

  .page-home.is-work-selector .home-side-ai-control span{
    position:absolute !important;
    top:6px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    font:600 6.5px var(--sans) !important;
    letter-spacing:.02em !important;
    color:rgba(14,15,18,.62) !important;
    z-index:2 !important;
    pointer-events:none !important;
  }

  .page-home.is-work-selector .home-side-ai-control i{
    position:absolute !important;
    left:3px !important;
    right:3px !important;
    top:calc(10px + var(--progress, 0%)) !important;
    height:18px !important;
    transform:translateY(-50%) !important;
    border-radius:999px !important;
    background:var(--sys-control-selected) !important;
    box-shadow:0 5px 12px -7px rgba(14,15,18,.65) !important;
    pointer-events:none !important;
  }

  .works-grid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:0 !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:1px !important;
    box-sizing:border-box !important;
    background:rgba(14,15,18,.06) !important;
  }

  .work-tile{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    aspect-ratio:1 / 1 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .work-tile .work-media,
  .work-tile img,
  .work-tile video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .work-tile .meta{
    opacity:1 !important;
    transform:none !important;
    padding:0 5px 5px !important;
    background:transparent !important;
    color:rgba(14,15,18,.76) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    text-shadow:none !important;
  }

  .work-tile .meta .t{
    font-size:10.5px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .work-tile .meta .s{
    margin-top:1px !important;
    font-size:9px !important;
    line-height:1.15 !important;
    opacity:.68 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:1 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .work-media-badge{
    top:5px !important;
    right:5px !important;
    min-width:17px !important;
    height:17px !important;
    padding:0 5px !important;
    font-size:8px !important;
  }

  .work-tile:hover{
    transform:none !important;
  }

  .page-faq-letter .letter{
    padding:26px 22px 30px !important;
  }

  .letter-qlist{
    border-top:1px solid rgba(14,15,18,.10) !important;
  }

  .letter-qlist li{
    border-bottom:1px solid rgba(14,15,18,.10) !important;
  }

  .letter-q{
    min-height:58px !important;
    padding:0 !important;
  }

  .letter-q-text{
    font-size:18px !important;
    letter-spacing:0 !important;
  }

  .letter-qlist li.is-active .mobile-letter-inline-answer{
    padding:0 0 20px 54px !important;
  }

  .studio-email-line{
    display:none !important;
  }

  .page-studio .lines .studio-email-line{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }

  .page-studio:not(.is-map-open) .studio-map,
  .page-studio:not(.is-map-open) .studio-mobile-map-panel{
    display:none !important;
  }

  .page-studio.is-map-open .studio-map{
    display:none !important;
  }
}

/* 2026-05-18 mobile image clarity pass:
   avoid softened artwork on the phone homepage/works wall. */
@media (max-width:760px){
  .page-home.is-work-selector .home-right .feat img,
  .page-home.is-work-selector .home-wheel-center img,
  .page-home.is-work-selector .home-work-wheel .home-work-chip img,
  .work-tile .work-media,
  .work-tile img,
  .work-tile video,
  .carousel-card .work-media,
  .carousel-card img,
  .work-focus-media img,
  .work-focus-media video,
  .work-focus img{
    opacity:1 !important;
    filter:saturate(1) contrast(1.08) brightness(1.01) !important;
    transform:translateZ(0);
    backface-visibility:hidden;
  }

  .page-home.is-work-selector .home-right::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }

  .page-home.is-work-selector .home-right .feat img{
    opacity:1 !important;
    filter:none !important;
  }

  .page-home.is-work-selector.has-cover-fog .home-right::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg, rgba(246,248,249,.62) 0%, rgba(246,248,249,.22) 30%, rgba(246,248,249,.04) 52%, rgba(246,248,249,.74) 100%),
      linear-gradient(90deg, rgba(246,248,249,.56), rgba(246,248,249,.06) 48%, rgba(246,248,249,.42)) !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    opacity:1 !important;
  }
}

/* Cover fog is now a per-work setting controlled in Studio Works editor. */
.page-home.is-work-selector.no-cover-fog .home-right::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
.page-home.is-work-selector.has-cover-fog .home-right::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:var(--cover-fog-strength, .65) !important;
  background:
    linear-gradient(180deg, rgba(246,248,249,.62) 0%, rgba(246,248,249,.22) 30%, rgba(246,248,249,.04) 52%, rgba(246,248,249,.74) 100%),
    linear-gradient(90deg, rgba(246,248,249,.56), rgba(246,248,249,.06) 48%, rgba(246,248,249,.42)) !important;
}

/* 2026-05-18 annotation 12:
   phone home preview removes the bottom-right work wheel so it cannot clip at
   the mobile edge. Desktop and tablet selectors keep their existing layout. */
@media (max-width:760px){
  .page-home.is-work-selector .home-lower{
    display:none !important;
  }
}

/* 2026-05-18 Studio phone preview edge fix:
   page-stage uses left/right offsets, so forcing width:100% makes the right
   rounded edge exceed the phone viewport. Keep the stage inset-based and make
   mobile nav labels optically centered. */
@media (max-width:760px){
  .page-stage{
    width:auto !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  .page-card{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .tabnav button.tab,
  .tabnav .book-cta{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  .tabnav button.tab::after{
    display:block !important;
    line-height:1 !important;
  }
}

/* 2026-05-19 mobile typography fix:
   keep the brand title on one line and stop mobile nav from replacing
   full labels with shortened data-short text. */
@media (max-width:760px){
  .page-home.is-work-selector .mobile-title{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-wrap:nowrap !important;
    font-size:clamp(32px, 9.2vw, 40px) !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  .page-home.is-work-selector .mobile-lede{
    width:min(320px, 92vw) !important;
    max-width:100% !important;
  }

  .tabnav{
    gap:3px !important;
    padding:5px !important;
  }

  .tabnav .brand{
    padding:5px 4px !important;
  }

  .tabnav .brand .mark{
    width:23px !important;
    height:23px !important;
    font-size:10px !important;
  }

  .tabnav .tabs{
    gap:0 !important;
    justify-content:space-evenly !important;
    overflow:visible !important;
    -webkit-mask-image:none !important;
            mask-image:none !important;
  }

  .tabnav button.tab{
    flex:0 1 auto !important;
    min-width:0 !important;
    padding:7px 5px !important;
    font-size:0 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
  }

  .tabnav button.tab::after{
    content:attr(data-short) !important;
    display:block !important;
    font-size:10.5px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  .tabnav .book-cta{
    padding:7px 10px !important;
    font-size:11px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
}

/* 2026-05-19 clear work dial:
   replace the blocked homepage picker with one transparent lens-style control. */
.home-work-wheel::before,
.home-work-wheel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}

.home-work-wheel::before{
  background:url("content/uploads/2026-05-19--clear-lens-work-dial.png") center/150% no-repeat;
  opacity:.62;
  mix-blend-mode:multiply;
  z-index:0;
}

.home-work-wheel::after{
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(255,255,255,.22) 24%, transparent 47%),
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.20), rgba(255,255,255,.05) 42%, transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.18) 46%, rgba(13,16,18,.08));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.96),
    inset 0 -1px 2px rgba(13,16,18,.14);
  z-index:1;
}

.home-wheel-center{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.home-wheel-center img,
.home-wheel-center > span:not(.home-wheel-sheen),
.home-work-wheel .home-work-chip img{
  display:none !important;
}

.home-wheel-sheen{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 46% 44%, rgba(255,255,255,.60), rgba(255,255,255,.12) 48%, rgba(13,16,18,.08) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.46),
    inset 0 8px 16px rgba(255,255,255,.26);
  pointer-events:none;
}

.home-work-dot{
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
}

@media (max-width:760px){
  .page-home.is-work-selector .home-lower{
    display:block !important;
    position:absolute !important;
    left:auto !important;
    right:10px !important;
    bottom:12px !important;
    width:136px !important;
    height:136px !important;
    padding:0 !important;
    pointer-events:none !important;
    z-index:40 !important;
  }

  .page-home.is-work-selector .home-work-picker{
    display:block !important;
    position:relative !important;
    width:136px !important;
    height:136px !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    pointer-events:none !important;
    overflow:visible !important;
  }

  .page-home.is-work-selector .home-picker-copy,
  .page-home.is-work-selector .home-side-ai-control,
  .page-home.is-work-selector .home-work-picker::before,
  .page-home.is-work-selector .home-work-picker::after{
    display:none !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:48px !important;
    --wheel-radius:52px !important;
    position:absolute !important;
    right:0 !important;
    bottom:0 !important;
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.78) !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.34), rgba(255,255,255,.12) 58%, rgba(255,255,255,.04)),
      rgba(255,255,255,.10) !important;
    box-shadow:
      0 10px 26px -20px rgba(13,16,18,.42),
      inset 0 0 0 1px rgba(255,255,255,.50) !important;
    opacity:.92 !important;
    pointer-events:auto !important;
    touch-action:none !important;
    cursor:grab !important;
    transition:
      width .22s ease,
      height .22s ease,
      opacity .18s ease,
      box-shadow .22s ease,
      transform .22s ease !important;
    -webkit-tap-highlight-color:transparent;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:124px !important;
    height:124px !important;
    opacity:1 !important;
    transform:translate(-2px, -2px) !important;
    box-shadow:
      0 18px 38px -26px rgba(13,16,18,.48),
      inset 0 0 0 1px rgba(255,255,255,.62) !important;
  }

  .page-home.is-work-selector .home-wheel-center{
    inset:50% !important;
    width:28px !important;
    height:28px !important;
    transform:translate(-50%, -50%) !important;
    border-radius:50% !important;
    z-index:4 !important;
    transition:width .22s ease, height .22s ease !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded .home-wheel-center,
  .page-home.is-work-selector .home-work-wheel.is-dragging .home-wheel-center,
  .page-home.is-work-selector .home-work-wheel:focus-visible .home-wheel-center{
    width:52px !important;
    height:52px !important;
  }

  .page-home.is-work-selector .home-work-wheel .home-work-chip{
    width:20px !important;
    height:20px !important;
    margin:-10px 0 0 -10px !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.70) !important;
    background:rgba(255,255,255,.36) !important;
    color:rgba(13,16,18,.54) !important;
    box-shadow:none !important;
    opacity:0 !important;
    display:grid !important;
    place-items:center !important;
    gap:0 !important;
    padding:0 !important;
    z-index:2 !important;
    pointer-events:none !important;
    transition:opacity .18s ease, background .18s ease, color .18s ease !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded .home-work-chip,
  .page-home.is-work-selector .home-work-wheel.is-dragging .home-work-chip,
  .page-home.is-work-selector .home-work-wheel:focus-visible .home-work-chip{
    opacity:.72 !important;
    pointer-events:auto !important;
  }

  .page-home.is-work-selector .home-work-wheel .home-work-chip.is-active{
    opacity:1 !important;
    color:#fff !important;
    background:rgba(13,16,18,.88) !important;
    border-color:rgba(255,255,255,.92) !important;
    box-shadow:0 6px 16px -10px rgba(13,16,18,.52) !important;
  }

  .page-home.is-work-selector .home-work-wheel .home-work-chip span{
    position:static !important;
    display:block !important;
    min-width:0 !important;
    min-height:0 !important;
    background:transparent !important;
    color:inherit !important;
    font-family:var(--mono) !important;
    font-size:7px !important;
    line-height:1 !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .page-home.is-work-selector .home-work-wheel .home-work-chip .home-work-dot{
    display:none !important;
  }
}

/* 2026-05-19 clear dial correction:
   no numbered stops or dark active dot. Interaction keeps the same transparent
   lens and only changes scale, light, and texture motion. */
@keyframes tatwoLensPressSpin{
  from{ background-position:center center; }
  to{ background-position:center 55%; }
}

@media (max-width:760px){
  .page-home.is-work-selector .home-work-wheel{
    --wheel-size:48px !important;
    --wheel-radius:0 !important;
    width:48px !important;
    height:48px !important;
    overflow:hidden !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:76px !important;
    height:76px !important;
    transform:translate(-4px, -4px) scale(1.02) !important;
    background:
      radial-gradient(circle at 38% 25%, rgba(255,255,255,.76), rgba(255,255,255,.20) 38%, transparent 68%),
      radial-gradient(circle at 54% 58%, rgba(255,255,255,.22), rgba(255,255,255,.04) 64%),
      rgba(255,255,255,.12) !important;
    box-shadow:
      0 18px 38px -28px rgba(13,16,18,.44),
      inset 0 0 0 1px rgba(255,255,255,.70),
      inset 0 12px 24px rgba(255,255,255,.24) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging::before{
    animation:tatwoLensPressSpin .42s linear infinite alternate;
    opacity:.72 !important;
  }

  .page-home.is-work-selector .home-work-wheel::after{
    background:
      radial-gradient(circle at 34% 24%, rgba(255,255,255,.88), rgba(255,255,255,.22) 26%, transparent 48%),
      linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.16) 48%, rgba(13,16,18,.04)) !important;
  }

  .page-home.is-work-selector .home-wheel-center{
    width:100% !important;
    height:100% !important;
    inset:0 !important;
    transform:none !important;
    opacity:.42 !important;
    z-index:3 !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded .home-wheel-center,
  .page-home.is-work-selector .home-work-wheel.is-dragging .home-wheel-center,
  .page-home.is-work-selector .home-work-wheel:focus-visible .home-wheel-center{
    width:100% !important;
    height:100% !important;
  }

  .page-home.is-work-selector .home-wheel-sheen{
    inset:12% !important;
    background:
      radial-gradient(circle at 45% 38%, rgba(255,255,255,.46), rgba(255,255,255,.08) 58%, transparent 74%) !important;
    box-shadow:none !important;
  }

  .page-home.is-work-selector .home-work-wheel .home-work-chip,
  .page-home.is-work-selector .home-work-wheel .home-work-chip.is-active,
  .page-home.is-work-selector .home-work-wheel.is-expanded .home-work-chip,
  .page-home.is-work-selector .home-work-wheel.is-dragging .home-work-chip,
  .page-home.is-work-selector .home-work-wheel:focus-visible .home-work-chip{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

/* 2026-05-19 exact requested dial:
   use the supplied IMG_5312 image directly. Do not reinterpret it as a dark
   ripple, generated asset, or abstract glass disk. */
.home-work-wheel::before,
.home-work-wheel::after{
  display:none !important;
}

@media (max-width:760px){
  .page-home.is-work-selector .home-lower{
    right:14px !important;
    bottom:34px !important;
    width:62px !important;
    height:62px !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:62px !important;
    height:62px !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    width:52px !important;
    height:52px !important;
    right:0 !important;
    bottom:0 !important;
    overflow:hidden !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.82) !important;
    background:
      url("content/uploads/2026-05-19--IMG_5312-lens-ring.jpg?v=4") center/100% 100% no-repeat !important;
    box-shadow:
      0 10px 24px -18px rgba(13,16,18,.36),
      0 0 0 3px rgba(255,255,255,.52),
      inset 0 0 0 1px rgba(255,255,255,.72) !important;
    opacity:1 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:58px !important;
    height:58px !important;
    transform:translate(-3px, -3px) scale(1.02) !important;
  }

  .page-home.is-work-selector .home-wheel-center,
  .page-home.is-work-selector .home-wheel-sheen{
    display:none !important;
  }
}

/* 2026-05-27 final iPhone-only format override. Desktop intentionally untouched. */
@media (max-width:760px){
  .tabnav .tabs{
    scroll-padding-inline:38px !important;
  }

  .tabnav .tab-indicator{
    transition:transform .18s ease, width .18s ease, opacity .18s ease !important;
  }

  .work-focus{
    position:fixed !important;
    inset:0 !important;
    z-index:210 !important;
    display:block !important;
    padding:calc(72px + env(safe-area-inset-top)) 0 0 !important;
    background:rgba(243,245,244,.98) !important;
    backdrop-filter:blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;
  }

  .work-focus .modal{
    position:relative !important;
    width:100% !important;
    height:calc(100dvh - 72px - env(safe-area-inset-top)) !important;
    max-height:none !important;
    display:block !important;
    overflow:hidden !important;
    border-radius:28px 28px 0 0 !important;
    background:#eef0ef !important;
    box-shadow:0 -18px 56px -34px rgba(0,0,0,.3) !important;
  }

  .work-focus .close{
    position:fixed !important;
    top:calc(84px + env(safe-area-inset-top)) !important;
    right:18px !important;
    z-index:4 !important;
  }

  .work-focus-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#eef0ef !important;
  }

  .work-focus-media img,
  .work-focus-media video{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    transition:filter .22s ease, opacity .22s ease !important;
  }

  .work-focus .info{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2 !important;
    padding:18px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    background:rgba(247,248,247,.82) !important;
    border-top:1px solid rgba(17,18,22,.08) !important;
    backdrop-filter:blur(16px) saturate(1.06) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.06) !important;
  }

  .work-focus .info.is-collapsed{
    min-height:0 !important;
    display:block !important;
  }

  .work-focus .info.is-collapsed .eyebrow{
    display:none !important;
  }

  .work-focus .info.is-collapsed .work-info-summary{
    margin:0 !important;
    padding:0 !important;
    border-top:0 !important;
    min-height:44px !important;
    align-items:flex-start !important;
  }

  .work-focus .info.is-collapsed .work-info-title{
    font-size:24px !important;
    line-height:1.08 !important;
  }

  .work-focus .info.is-collapsed .work-info-title span{
    margin-top:3px !important;
    font-size:14px !important;
  }

  .work-focus .info.is-collapsed .work-info-hint{
    padding-top:4px !important;
    font-size:13px !important;
  }

  .work-focus .info.is-collapsed .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin:14px 0 0 !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }

  .work-focus .info.is-expanded{
    top:0 !important;
    min-height:0 !important;
    overflow-y:auto !important;
    background:rgba(247,248,247,.62) !important;
    padding:calc(72px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.42) saturate(.9) !important;
  }

  .work-focus .info.is-expanded .work-info-summary{
    margin:0 !important;
    padding:0 !important;
  }

  .work-focus .info.is-expanded .work-info-details{
    display:block !important;
    margin-top:22px !important;
  }

  .work-focus .info.is-expanded .work-story{
    display:block !important;
    min-height:2.2em !important;
    color:rgba(17,18,22,.86) !important;
  }

  .work-focus .info.is-expanded .work-detail-list{
    margin-top:22px !important;
  }

  .work-focus .info.is-collapsed{
    min-height:calc(52dvh - env(safe-area-inset-bottom)) !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .work-focus .info.is-collapsed .work-info-summary{
    margin-top:clamp(96px, 18dvh, 150px) !important;
    padding-top:16px !important;
    border-top:1px solid rgba(17,18,22,.08) !important;
  }

  .work-focus .info.is-collapsed .work-info-details{
    display:none !important;
  }

  .work-focus .info.is-collapsed .work-book-cta{
    margin-top:22px !important;
  }

  .work-focus .info.is-expanded .work-info-summary{
    margin-top:12px !important;
    padding-top:0 !important;
    border-top:0 !important;
  }

  .work-info-summary{
    min-height:48px !important;
  }

  .work-info-hint{
    min-width:64px !important;
    text-align:right !important;
  }

  .work-focus .info.is-expanded .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin-top:24px !important;
    padding:8px 14px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }

  .page-process{
    display:block !important;
    grid-template-rows:none !important;
    padding:28px 20px 20px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .process-head{
    padding:26px 10px 18px !important;
  }

  .process-head .h-section,
  .page-process .h-section{
    font-size:clamp(38px, 13.8vw, 54px) !important;
    line-height:1.08 !important;
    letter-spacing:0 !important;
  }

  .process-grid{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    grid-auto-rows:auto !important;
    gap:12px !important;
    padding:0 10px 18px !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .proc-card{
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:20px 20px 18px !important;
  }

  .proc-card .num{
    font-size:52px !important;
    line-height:.9 !important;
  }

  .proc-card h3{
    margin-top:10px !important;
    font-size:24px !important;
  }

  .proc-card p{
    margin-top:14px !important;
    font-size:15px !important;
    line-height:1.65 !important;
  }
}

/* 2026-05-27 absolute last iPhone works-detail correction. */
@media (max-width:760px){
  .work-focus .modal{
    position:relative !important;
    display:block !important;
    overflow:hidden !important;
    background:#111216 !important;
  }

  .work-focus-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    display:block !important;
    overflow:hidden !important;
    background:#111216 !important;
  }

  .work-focus-media-item{
    position:absolute !important;
    inset:0 !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    background:#111216 !important;
  }

  .work-focus-media-item::before{
    content:"" !important;
    position:absolute !important;
    inset:-28px !important;
    background-image:var(--work-image) !important;
    background-size:cover !important;
    background-position:center center !important;
    filter:blur(18px) brightness(.82) saturate(.9) !important;
    transform:scale(1.04) !important;
    opacity:.74 !important;
  }

  .work-focus-media img,
  .work-focus-media video{
    position:relative !important;
    z-index:1 !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    filter:none !important;
  }

  .work-focus .info{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2 !important;
    background:rgba(247,248,247,.78) !important;
    border-top:1px solid rgba(255,255,255,.32) !important;
    backdrop-filter:blur(18px) saturate(1.06) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.06) !important;
  }

  .work-focus .info.is-collapsed{
    min-height:0 !important;
    display:block !important;
  }

  .work-focus .info.is-collapsed .eyebrow{
    display:none !important;
  }

  .work-focus .info.is-collapsed .work-info-summary{
    margin:0 !important;
    padding:0 !important;
    border-top:0 !important;
    min-height:44px !important;
  }

  .work-focus .info.is-collapsed .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin:14px 0 0 !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }

  .work-focus .info.is-expanded{
    top:0 !important;
    overflow-y:auto !important;
    background:rgba(247,248,247,.34) !important;
    padding:calc(72px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media-item::before{
    filter:blur(18px) brightness(.32) saturate(.72) !important;
    opacity:.94 !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.24) saturate(.78) !important;
  }

  .work-focus .info.is-expanded .work-info-details{
    display:block !important;
    margin-top:22px !important;
  }

  .work-focus .info.is-expanded .work-story{
    display:block !important;
    color:rgba(17,18,22,.94) !important;
  }

  .work-focus .info.is-expanded .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin-top:24px !important;
    padding:8px 14px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }
}

/* 2026-05-27 terminal iPhone works detail overlay pass. */
@media (max-width:760px){
  .work-focus .modal{
    position:relative !important;
    display:block !important;
    height:calc(100dvh - 72px - env(safe-area-inset-top)) !important;
    overflow:hidden !important;
    background:#eef0ef !important;
  }

  .work-focus-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#eef0ef !important;
  }

  .work-focus-media img,
  .work-focus-media video{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    transition:filter .22s ease, opacity .22s ease !important;
  }

  .work-focus .info{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2 !important;
    padding:18px 20px calc(22px + env(safe-area-inset-bottom)) !important;
    background:rgba(247,248,247,.82) !important;
    border-top:1px solid rgba(17,18,22,.08) !important;
    backdrop-filter:blur(16px) saturate(1.06) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.06) !important;
  }

  .work-focus .info.is-collapsed{
    min-height:0 !important;
    display:block !important;
  }

  .work-focus .info.is-collapsed .eyebrow{
    display:none !important;
  }

  .work-focus .info.is-collapsed .work-info-summary{
    margin:0 !important;
    padding:0 !important;
    border-top:0 !important;
    min-height:44px !important;
    align-items:flex-start !important;
  }

  .work-focus .info.is-collapsed .work-info-title{
    font-size:24px !important;
    line-height:1.08 !important;
  }

  .work-focus .info.is-collapsed .work-info-title span{
    margin-top:3px !important;
    font-size:14px !important;
  }

  .work-focus .info.is-collapsed .work-info-hint{
    padding-top:4px !important;
    font-size:13px !important;
  }

  .work-focus .info.is-collapsed .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin:14px 0 0 !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }

  .work-focus .info.is-expanded{
    top:0 !important;
    min-height:0 !important;
    overflow-y:auto !important;
    background:rgba(247,248,247,.62) !important;
    padding:calc(72px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.42) saturate(.9) !important;
  }

  .work-focus .info.is-expanded .work-info-summary{
    margin:0 !important;
    padding:0 !important;
  }

  .work-focus .info.is-expanded .work-info-details{
    display:block !important;
    margin-top:22px !important;
  }

  .work-focus .info.is-expanded .work-story{
    display:block !important;
    min-height:2.2em !important;
    color:rgba(17,18,22,.86) !important;
  }

  .work-focus .info.is-expanded .work-detail-list{
    margin-top:22px !important;
  }

  .work-focus .info.is-expanded .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin-top:24px !important;
    padding:8px 14px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }
}

/* 2026-05-27 final iPhone-only format override. Desktop intentionally untouched. */
@media (max-width:760px){
  .tabnav .tabs{
    scroll-padding-inline:38px !important;
  }

  .tabnav .tab-indicator{
    transition:transform .18s ease, width .18s ease, opacity .18s ease !important;
  }

  .work-focus{
    position:fixed !important;
    inset:0 !important;
    z-index:210 !important;
    display:block !important;
    padding:calc(72px + env(safe-area-inset-top)) 0 0 !important;
    background:rgba(243,245,244,.98) !important;
    backdrop-filter:blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;
  }

  .work-focus .modal{
    position:relative !important;
    width:100% !important;
    height:calc(100dvh - 72px - env(safe-area-inset-top)) !important;
    max-height:none !important;
    display:block !important;
    overflow:hidden !important;
    border-radius:28px 28px 0 0 !important;
    background:#111216 !important;
    box-shadow:0 -18px 56px -34px rgba(0,0,0,.3) !important;
  }

  .work-focus .close{
    position:fixed !important;
    top:calc(84px + env(safe-area-inset-top)) !important;
    right:18px !important;
    z-index:4 !important;
  }

  .work-focus-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    display:block !important;
    overflow:hidden !important;
    background:#111216 !important;
  }

  .work-focus-media-item{
    position:absolute !important;
    inset:0 !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    background:#111216 !important;
  }

  .work-focus-media-item::before{
    content:"" !important;
    position:absolute !important;
    inset:-28px !important;
    background-image:var(--work-image) !important;
    background-size:cover !important;
    background-position:center center !important;
    filter:blur(18px) brightness(.82) saturate(.9) !important;
    transform:scale(1.04) !important;
    opacity:.74 !important;
  }

  .work-focus-media img,
  .work-focus-media video{
    position:relative !important;
    z-index:1 !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    filter:none !important;
  }

  .work-focus .info{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2 !important;
    padding:18px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    background:rgba(247,248,247,.78) !important;
    border-top:1px solid rgba(255,255,255,.32) !important;
    backdrop-filter:blur(18px) saturate(1.06) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.06) !important;
  }

  .work-focus .info.is-collapsed{
    min-height:0 !important;
    display:block !important;
  }

  .work-focus .info.is-collapsed .eyebrow{
    display:none !important;
  }

  .work-focus .info.is-collapsed .work-info-summary{
    margin:0 !important;
    padding:0 !important;
    border-top:0 !important;
    min-height:44px !important;
    align-items:flex-start !important;
  }

  .work-focus .info.is-collapsed .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin:14px 0 0 !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }

  .work-focus .info.is-expanded{
    top:0 !important;
    overflow-y:auto !important;
    background:rgba(247,248,247,.38) !important;
    padding:calc(72px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media-item::before{
    filter:blur(18px) brightness(.36) saturate(.75) !important;
    opacity:.92 !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.28) saturate(.82) !important;
  }

  .work-focus .info.is-expanded .work-info-details{
    display:block !important;
    margin-top:22px !important;
  }

  .work-focus .info.is-expanded .work-story{
    display:block !important;
    color:rgba(17,18,22,.92) !important;
  }

  .work-focus .info.is-expanded .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin-top:24px !important;
    padding:8px 14px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }

  .work-focus .eyebrow{
    font-size:11px !important;
  }

  .work-info-summary{
    min-height:48px !important;
  }

  .work-info-hint{
    min-width:64px !important;
    text-align:right !important;
  }

  .work-book-cta{
    width:100% !important;
    min-height:48px !important;
    justify-content:center !important;
    margin-top:18px !important;
  }

  .page-process{
    display:block !important;
    grid-template-rows:none !important;
    padding:28px 20px 20px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .process-head{
    padding:26px 10px 18px !important;
  }

  .process-head .h-section,
  .page-process .h-section{
    font-size:clamp(38px, 13.8vw, 54px) !important;
    line-height:1.08 !important;
    letter-spacing:0 !important;
  }

  .process-grid{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    grid-auto-rows:auto !important;
    gap:12px !important;
    padding:0 10px 18px !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .proc-card{
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:20px 20px 18px !important;
  }

  .proc-card .num{
    font-size:52px !important;
    line-height:.9 !important;
  }

  .proc-card h3{
    margin-top:10px !important;
    font-size:24px !important;
  }

  .proc-card p{
    margin-top:14px !important;
    font-size:15px !important;
    line-height:1.65 !important;
  }
}

/* 2026-05-27 final iPhone-only format override. Desktop intentionally untouched. */
@media (max-width:760px){
  .tabnav .tabs{
    scroll-padding-inline:38px !important;
  }

  .tabnav .tab-indicator{
    transition:transform .18s ease, width .18s ease, opacity .18s ease !important;
  }

  .work-focus{
    position:fixed !important;
    inset:0 !important;
    z-index:210 !important;
    display:block !important;
    padding:calc(72px + env(safe-area-inset-top)) 0 0 !important;
    background:rgba(243,245,244,.98) !important;
    backdrop-filter:blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;
  }

  .work-focus .modal{
    width:100% !important;
    height:calc(100dvh - 72px - env(safe-area-inset-top)) !important;
    max-height:none !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(280px, 48dvh) auto !important;
    overflow-y:auto !important;
    border-radius:28px 28px 0 0 !important;
    background:rgba(247,248,247,.98) !important;
    box-shadow:0 -18px 56px -34px rgba(0,0,0,.3) !important;
  }

  .work-focus .close{
    position:fixed !important;
    top:calc(84px + env(safe-area-inset-top)) !important;
    right:18px !important;
    z-index:4 !important;
  }

  .work-focus-media{
    min-height:0 !important;
    height:48dvh !important;
    max-height:48dvh !important;
    background:#eef0ef !important;
  }

  .work-focus-media img,
  .work-focus-media video{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:cover !important;
  }

  .work-focus .info{
    padding:18px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    background:rgba(247,248,247,.98) !important;
  }

  .work-focus .eyebrow{
    font-size:11px !important;
  }

  .work-info-summary{
    min-height:48px !important;
  }

  .work-info-hint{
    min-width:64px !important;
    text-align:right !important;
  }

  .work-book-cta{
    width:100% !important;
    min-height:48px !important;
    justify-content:center !important;
    margin-top:18px !important;
  }

  .page-process{
    display:block !important;
    grid-template-rows:none !important;
    padding:28px 20px 20px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .process-head .h-section,
  .page-process .h-section{
    font-size:clamp(38px, 13.8vw, 54px) !important;
    line-height:1.08 !important;
    letter-spacing:0 !important;
  }

  .process-grid{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    grid-auto-rows:auto !important;
    gap:12px !important;
    padding-bottom:18px !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .proc-card{
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:20px 20px 18px !important;
  }

  .proc-card .num{
    font-size:52px !important;
    line-height:.9 !important;
  }

  .proc-card h3{
    margin-top:10px !important;
    font-size:24px !important;
  }

  .proc-card p{
    margin-top:14px !important;
    font-size:15px !important;
    line-height:1.65 !important;
  }
}

.brand-mark-button{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:0;
  border-radius:50%;
  padding:0;
  color:inherit;
  background:transparent;
  cursor:pointer;
}

.brand-mark-button:focus-visible{
  outline:2px solid rgba(17,18,22,.42);
  outline-offset:3px;
}

.tatwo-auth-layer{
  position:fixed;
  inset:0;
  z-index:230;
  pointer-events:auto;
  font-family:var(--sans);
  background:
    linear-gradient(180deg, rgba(10,12,16,.055), rgba(10,12,16,.16));
  touch-action:none;
}

.tatwo-auth-launcher{
  position:fixed;
  top:calc(78px + env(safe-area-inset-top));
  left:18px;
  width:min(210px, calc(100vw - 36px));
  display:grid;
  gap:7px;
  padding:10px;
  overflow:hidden;
  border:1px solid var(--glass-2-border);
  border-radius:calc(var(--liquid-radius) - 6px);
  color:#111216;
  background:var(--glass-specular), var(--glass-2-bg);
  box-shadow:var(--glass-2-shadow);
  -webkit-backdrop-filter:var(--glass-2-blur);
  backdrop-filter:var(--glass-2-blur);
  transform-origin:28px -22px;
  animation:tatwo-auth-pop .18s cubic-bezier(.2,.8,.2,1);
}

.tatwo-auth-hotspot{
  position:fixed;
  z-index:3;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  padding:0;
  color:#fff;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
}

.tatwo-auth-hotspot span{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#111216;
  font-family:var(--serif);
  font-size:10px;
  font-weight:500;
  line-height:1;
}

.tatwo-auth-hotspot:focus-visible{
  outline:2px solid rgba(17,18,22,.42);
  outline-offset:3px;
}

.tatwo-auth-launcher::before{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:1px;
  border-radius:calc(var(--liquid-radius) - 7px);
  background:
    var(--glass-edge),
    linear-gradient(302deg, transparent 50%, rgba(255,255,255,.16) 58%, transparent 70%);
  opacity:.55;
}

.tatwo-auth-launcher::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:-26px -42px auto auto;
  width:116px;
  height:150px;
  border-radius:999px;
  background:
    linear-gradient(112deg, rgba(255,255,255,.24), rgba(255,255,255,.05) 48%, transparent 72%);
  filter:blur(4px);
  opacity:.22;
  transform:rotate(24deg);
}

.tatwo-auth-launcher > *{
  position:relative;
  z-index:1;
}

@keyframes tatwo-auth-pop{
  from{
    opacity:0;
    transform:translateY(-5px) scale(.97);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.tatwo-auth-launcher header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 2px 5px;
  border-bottom:1px solid rgba(17,18,22,.07);
}

.tatwo-auth-launcher header span{
  display:block;
  color:#747981;
  font-size:9px;
  letter-spacing:.12em;
}

.tatwo-auth-launcher header strong{
  display:block;
  font-family:var(--serif);
  font-size:17px;
  font-weight:500;
  line-height:1.1;
}

.tatwo-auth-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:6px;
  border:1px solid var(--glass-3-border);
  border-radius:calc(var(--liquid-radius) - 13px);
  background:var(--glass-3-bg);
  box-shadow:var(--glass-3-shadow);
  -webkit-backdrop-filter:var(--glass-3-blur);
  backdrop-filter:var(--glass-3-blur);
}

.tatwo-auth-status span{
  min-width:0;
  overflow:hidden;
  color:#747981;
  font-family:var(--sans);
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tatwo-auth-status strong{
  overflow:hidden;
  font-size:13px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tatwo-auth-status small{
  flex:1 1 100%;
  color:#8d2636;
  font-size:10px;
  line-height:1.35;
}

.tatwo-auth-actions{
  display:flex;
  flex:0 0 auto;
}

.tatwo-auth-status .tatwo-auth-actions{
  margin-top:0;
}

.tatwo-auth-actions button,
.tatwo-auth-menu button,
.tatwo-auth-menu a,
.travel-shell-actions button,
.travel-shell-actions a{
  min-height:44px;
  border:1px solid var(--glass-3-border);
  border-radius:calc(var(--liquid-radius) - 14px);
  padding:9px 10px;
  color:#111216;
  background:var(--glass-specular), var(--glass-3-bg);
  text-align:left;
  text-decoration:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 10px 24px -22px rgba(4,7,12,.35);
  -webkit-backdrop-filter:var(--glass-3-blur);
  backdrop-filter:var(--glass-3-blur);
}

.tatwo-auth-actions button{
  min-height:30px;
  padding:4px 11px;
  border-radius:999px;
  text-align:center;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
}

.tatwo-auth-actions button:disabled,
.travel-shell-actions button:disabled{
  cursor:not-allowed;
  opacity:.48;
}

.travel-shell-actions button,
.travel-shell-actions a{
  min-height:44px;
  border:1px solid rgba(17,18,22,.08);
  border-radius:16px;
  padding:10px 12px;
  background:rgba(255,255,255,.64);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.tatwo-auth-menu{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.tatwo-auth-edit-actions,
.tatwo-auth-step-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.tatwo-auth-menu button,
.tatwo-auth-menu a,
.tatwo-auth-edit-actions button,
.tatwo-auth-step-actions button{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:9px 8px;
  text-align:center;
}

.tatwo-auth-menu b,
.tatwo-auth-menu small,
.tatwo-auth-edit-actions b,
.tatwo-auth-step-actions b{
  display:block;
}

.tatwo-auth-menu b,
.tatwo-auth-edit-actions b,
.tatwo-auth-step-actions b{
  margin-bottom:0;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  line-height:1;
}

.tatwo-auth-menu small{
  display:none;
}

.tatwo-liquid-panel{
  display:grid;
  gap:8px;
  padding:9px;
  border:1px solid var(--glass-3-border);
  border-radius:calc(var(--liquid-radius) - 12px);
  background:var(--glass-3-bg);
  box-shadow:var(--glass-3-shadow);
  -webkit-backdrop-filter:var(--glass-3-blur);
  backdrop-filter:var(--glass-3-blur);
}

.tatwo-liquid-panel.is-compact{
  margin:10px 12px 0;
  border-radius:18px;
  background:rgba(255,255,255,.48);
}

.tatwo-liquid-panel label{
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 38px;
  align-items:center;
  gap:7px;
  color:#4b5057;
  font-family:var(--sans);
  font-size:12px;
  line-height:1;
}

.tatwo-liquid-panel input[type="range"]{
  width:100%;
  accent-color:#111216;
}

.tatwo-liquid-panel output{
  color:#111216;
  font-family:var(--mono);
  font-size:10px;
  text-align:right;
}

.tatwo-liquid-actions{
  display:flex;
  gap:6px;
}

.tatwo-liquid-actions button{
  flex:1 1 0;
  min-height:30px;
  border:1px solid var(--glass-3-border);
  border-radius:999px;
  background:rgba(255,255,255,.44);
  color:#111216;
  font-size:11px;
  font-weight:600;
}

.travel-shell{
  width:min(100%, 780px);
  min-height:min(70vh, 640px);
  display:grid;
  align-items:center;
  margin:0 auto;
  padding:clamp(22px, 5vw, 56px);
}

.travel-shell.is-embedded{
  width:100%;
  min-height:calc(100dvh - 118px);
  align-items:stretch;
  padding:0;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:#f6ecd3;
}

.travel-shell.is-embedded iframe{
  width:100%;
  height:calc(100dvh - 118px);
  min-height:620px;
  border:0;
  background:#f6ecd3;
}

body[data-tatwo-page="travel"]{
  background:#f6ecd3;
}

body[data-tatwo-page="travel"] .page-bg,
body[data-tatwo-page="travel"] .fog{
  display:none;
}

body[data-tatwo-page="travel"] .page-stage.is-travel-route{
  padding:0;
}

body[data-tatwo-page="travel"] .page-stage.is-travel-route .travel-shell,
body[data-tatwo-page="travel"] .page-stage.is-travel-route .travel-shell.is-embedded{
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
  border-radius:0;
}

body[data-tatwo-page="travel"] .page-stage.is-travel-route .travel-shell.is-embedded iframe{
  height:100%;
  min-height:100%;
  border-radius:0;
}

.travel-shell-login{
  position:absolute;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:12;
  width:min(360px, calc(100% - 36px));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:22px;
}

.travel-shell-login span,
.travel-shell-login strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.travel-shell-login span{
  color:#747981;
  font-size:11px;
}

.travel-shell-login strong{
  font-size:14px;
}

.travel-shell-login button{
  min-height:36px;
  padding:0 14px;
  border:1px solid rgba(17,18,22,.08);
  border-radius:999px;
  background:#111216;
  color:#fff;
  font-weight:700;
}

.travel-shell-copy{
  display:grid;
  gap:16px;
}

.travel-shell h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(44px, 10vw, 96px);
  font-weight:500;
  line-height:.95;
}

.travel-shell p{
  max-width:34em;
  margin:0;
  color:#3f444a;
  font-size:16px;
  line-height:1.8;
}

.travel-shell-status{
  width:min(100%, 360px);
  display:grid;
  gap:3px;
  padding:12px 14px;
  border:1px solid rgba(17,18,22,.08);
  border-radius:16px;
  background:rgba(255,255,255,.62);
}

.travel-shell-status span{
  color:#747981;
  font-size:11px;
  letter-spacing:.08em;
}

.travel-shell-status strong{
  overflow:hidden;
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.travel-shell-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.travel-shell-actions button,
.travel-shell-actions a{
  min-width:132px;
  text-align:center;
  font-weight:600;
}

@media (max-width:520px){
  .tatwo-auth-launcher{
    top:calc(74px + env(safe-area-inset-top));
    left:18px;
    width:min(210px, calc(100vw - 36px));
  }

  .travel-shell{
    min-height:calc(100dvh - 132px);
    padding:28px 18px;
  }

  .travel-shell-actions{
    display:grid;
  }
}

/* 2026-05-27 TATWO mobile edit + works-detail corrections. */
.home-inline-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}

.direct-custom-textbox{
  position:absolute;
  left:0;
  top:0;
  max-width:min(420px, calc(100% - 32px));
  padding:10px 14px;
  border:1px solid rgba(17,18,22,.18);
  border-radius:12px;
  background:rgba(255,255,255,.66);
  box-shadow:0 18px 46px -34px rgba(0,0,0,.42);
  color:var(--k-1);
  font-size:15px;
  line-height:1.55;
  z-index:8;
}

.direct-section-tools{
  position:fixed;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:235;
  display:flex;
  gap:8px;
  transform:translateX(-50%);
  padding:8px;
  border:1px solid rgba(17,18,22,.14);
  border-radius:14px;
  background:rgba(250,250,247,.86);
  box-shadow:0 18px 54px -32px rgba(0,0,0,.38);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}

.direct-section-tools button{
  border:0;
  border-radius:10px;
  padding:9px 12px;
  background:#111216;
  color:#fff;
  font-size:13px;
  cursor:pointer;
}

.direct-section-tools button + button{
  background:rgba(17,18,22,.1);
  color:#111216;
}

.work-info-summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  width:100%;
  margin:12px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.work-info-title{
  min-width:0;
  font-family:var(--serif);
  font-size:30px;
  font-weight:650;
  line-height:1.12;
}

.work-info-title span{
  display:inline-block;
  margin-left:6px;
  color:var(--k-4);
  font-size:17px;
  font-weight:400;
}

.work-info-hint{
  flex:0 0 auto;
  margin-top:5px;
  color:var(--k-4);
  font-size:12px;
}

.work-story{
  margin:18px 0 0;
  color:var(--k-2);
  font-size:14px;
  line-height:1.85;
}

.work-detail-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  margin:24px 0 0;
}

.work-detail-list dt{
  color:var(--k-4);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.work-detail-list dd{
  margin:4px 0 0;
  font-family:var(--serif);
  font-size:15px;
}

@media (max-width:760px){
  .direct-section-tools{
    width:calc(100% - 28px);
    justify-content:center;
  }

  .direct-section-tools button{
    flex:1;
    min-height:40px;
  }

  .direct-custom-textbox{
    max-width:calc(100% - 28px);
    font-size:14px;
  }

  .work-focus{
    padding-top:52px !important;
  }

  .work-focus .modal{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(280px, 52vh) auto !important;
    overflow-y:auto !important;
  }

  .work-focus .info{
    overflow:visible !important;
  }

  .work-info-title{
    font-size:22px;
  }

  .work-info-title span{
    display:block;
    margin:4px 0 0;
    font-size:13px;
  }

  .work-focus .info.is-collapsed .work-info-details{
    display:none !important;
  }

  .work-info-summary{
    align-items:center;
  }

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

  .page-faq-letter .letter,
  .page-faq-letter.is-consulting .letter{
    border-top:0 !important;
  }
}

/* PUBLIC-STRIP-DIRECT-EDIT-BEGIN */
.tatwo-direct-editing{
  -webkit-user-select:text;
  user-select:text;
}

/* 2026-05-27 iPhone-only format pass. Desktop layout intentionally untouched. */
@media (max-width:760px){
  .tabnav .tabs{
    scroll-padding-inline:38px;
  }

  .tabnav .tab-indicator{
    transition:transform .18s ease, width .18s ease, opacity .18s ease !important;
  }

  .work-focus{
    position:fixed !important;
    inset:0 !important;
    z-index:210 !important;
    display:block !important;
    padding:calc(72px + env(safe-area-inset-top)) 0 0 !important;
    background:rgba(243,245,244,.98) !important;
    backdrop-filter:blur(18px) saturate(1.08);
    -webkit-backdrop-filter:blur(18px) saturate(1.08);
  }

  .work-focus .modal{
    width:100% !important;
    height:calc(100dvh - 72px - env(safe-area-inset-top)) !important;
    max-height:none !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(280px, 48dvh) auto !important;
    overflow-y:auto !important;
    border-radius:28px 28px 0 0 !important;
    background:rgba(247,248,247,.98) !important;
    box-shadow:0 -18px 56px -34px rgba(0,0,0,.3) !important;
  }

  .work-focus .close{
    position:fixed !important;
    top:calc(84px + env(safe-area-inset-top)) !important;
    right:18px !important;
    z-index:4 !important;
  }

  .work-focus-media{
    min-height:0 !important;
    height:48dvh !important;
    max-height:48dvh !important;
    background:#eef0ef !important;
  }

  .work-focus-media img,
  .work-focus-media video{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:cover !important;
  }

  .work-focus .info{
    padding:18px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    background:rgba(247,248,247,.98) !important;
  }

  .work-focus .eyebrow{
    font-size:11px !important;
  }

  .work-info-summary{
    min-height:48px;
  }

  .work-info-hint{
    min-width:64px;
    text-align:right;
  }

  .work-book-cta{
    width:100% !important;
    min-height:48px !important;
    justify-content:center !important;
    margin-top:18px !important;
  }

  .page-process{
    padding:28px 20px 20px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .process-head .h-section,
  .page-process .h-section{
    font-size:clamp(38px, 13.8vw, 54px) !important;
    line-height:1.08 !important;
    letter-spacing:0 !important;
  }

  .process-grid{
    gap:12px !important;
    padding-bottom:18px !important;
  }

  .proc-card{
    min-height:190px !important;
    padding:20px 20px 18px !important;
  }

  .proc-card .num{
    font-size:52px !important;
    line-height:.9 !important;
  }

  .proc-card h3{
    margin-top:10px !important;
    font-size:24px !important;
  }

  .proc-card p{
    margin-top:14px !important;
    font-size:15px !important;
    line-height:1.65 !important;
  }
}

.tatwo-direct-editing .direct-inline-text{
  position:relative;
  z-index:6;
  min-width:1.5em;
  border-radius:10px;
  outline:1px dashed rgba(17,18,22,.26);
  outline-offset:5px;
  cursor:text;
  touch-action:none;
  white-space:pre-line;
}

.tatwo-direct-editing .direct-inline-text{
  font-size:var(--direct-font-size) !important;
}

.tatwo-direct-editing .direct-inline-text.is-selected{
  outline:2px solid rgba(216,148,0,.84);
  outline-offset:6px;
  background:rgba(255,255,255,.32);
}

.tatwo-direct-editing .direct-inline-input{
  display:block;
  width:min(100%, 760px);
  border:0;
  padding:0;
  color:inherit;
  background:rgba(255,255,255,.46);
  -webkit-appearance:none;
  appearance:none;
  resize:none;
  touch-action:auto;
}

.tatwo-direct-editing input.direct-inline-input{
  height:auto;
}

.tatwo-direct-editing textarea.direct-inline-input{
  min-height:calc(1em * 1.45 * 2);
  overflow:hidden;
}

.tatwo-direct-editing .direct-inline-text:focus{
  outline:2px solid rgba(17,18,22,.7);
  background:rgba(255,255,255,.42);
  box-shadow:0 10px 30px -20px rgba(0,0,0,.35);
}

.tatwo-direct-editing .direct-inline-text.is-dragging{
  cursor:grabbing;
  outline-color:#d89400;
  background:rgba(255,255,255,.58);
}

.tatwo-direct-editing .direct-inline-text.is-resizing{
  cursor:zoom-in;
  outline-color:#111216;
  box-shadow:0 0 0 1px rgba(255,255,255,.72), 0 18px 44px -30px rgba(0,0,0,.52);
}

.direct-edit-guide{
  pointer-events:none;
  position:fixed;
  z-index:240;
  background:rgba(216,148,0,.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.48), 0 0 18px rgba(216,148,0,.34);
}

.direct-edit-guide.is-x{
  top:0;
  bottom:0;
  width:1px;
}

.direct-edit-guide.is-y{
  left:0;
  right:0;
  height:1px;
}

.direct-edit-toast{
  pointer-events:none;
  position:fixed;
  z-index:230;
  left:18px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  max-width:min(360px, calc(100vw - 36px));
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:16px;
  color:#111216;
  background:rgba(248,249,249,.9);
  box-shadow:0 18px 48px -28px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(24px) saturate(1.28);
  backdrop-filter:blur(24px) saturate(1.28);
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
}

.direct-edit{
  position:fixed;
  inset:0;
  z-index:220;
  pointer-events:none;
  font-family:var(--sans);
}

.direct-edit button,
.direct-edit input,
.direct-edit textarea{
  font:inherit;
}

.direct-edit-trigger{
  pointer-events:auto;
  position:fixed;
  z-index:2;
  top:calc(31px + env(safe-area-inset-top));
  left:31px;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  color:transparent;
  background:transparent;
  box-shadow:none;
}

.direct-edit-trigger span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.tatwo-launcher{
  pointer-events:auto;
  position:fixed;
  top:calc(82px + env(safe-area-inset-top));
  left:17px;
  width:min(312px, calc(100vw - 34px));
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  color:#111216;
  background:rgba(248,249,249,.9);
  box-shadow:0 22px 64px -34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(24px) saturate(1.28);
  backdrop-filter:blur(24px) saturate(1.28);
}

.tatwo-launcher header{
  display:flex;
  align-items:end;
  justify-content:space-between;
  padding:4px 4px 8px;
  border-bottom:1px solid rgba(17,18,22,.08);
}

.tatwo-launcher header span{
  color:#747981;
  font-size:11px;
  letter-spacing:.08em;
}

.tatwo-launcher header strong{
  font-family:var(--serif);
  font-size:20px;
  font-weight:500;
}

.tatwo-launcher button,
.tatwo-launcher a{
  min-height:58px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:1px solid rgba(17,18,22,.08);
  border-radius:16px;
  padding:9px 10px;
  color:#111216;
  background:rgba(255,255,255,.58);
  text-align:left;
  text-decoration:none;
}

.tatwo-launcher b,
.tatwo-launcher small{
  display:block;
}

.tatwo-launcher b{
  margin-bottom:2px;
  font-size:14px;
  font-weight:600;
}

.tatwo-launcher small{
  overflow:hidden;
  color:#6e747b;
  font-size:12px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.launcher-mark{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#111216;
  font-family:var(--serif);
  font-size:15px;
}

.direct-edit-sheet{
  pointer-events:auto;
  position:absolute;
  left:12px;
  right:12px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  max-height:min(68vh, 620px);
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px 24px 18px 18px;
  background:rgba(248,249,249,.9);
  color:#111216;
  box-shadow:0 28px 80px -34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(26px) saturate(1.36);
  backdrop-filter:blur(26px) saturate(1.36);
}

.direct-edit-head,
.direct-edit-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
}

.direct-edit-head{
  border-bottom:1px solid rgba(17,18,22,.08);
}

.direct-edit-head span{
  display:block;
  margin-bottom:3px;
  color:#747981;
  font-size:11px;
}

.direct-edit-head strong{
  font-family:var(--serif);
  font-size:20px;
  font-weight:500;
  letter-spacing:0;
}

.direct-edit-head button,
.direct-edit-actions button,
.direct-edit-tabs button,
.direct-edit-rail button{
  border:1px solid rgba(17,18,22,.1);
  color:#33383d;
  background:rgba(255,255,255,.62);
}

.direct-edit-head button,
.direct-edit-actions button{
  min-height:38px;
  border-radius:999px;
  padding:0 14px;
}

.direct-edit-tabs{
  display:flex;
  gap:8px;
  overflow:auto;
  padding:10px 12px;
  border-bottom:1px solid rgba(17,18,22,.08);
  scrollbar-width:none;
}

.direct-edit-tabs::-webkit-scrollbar,
.direct-edit-rail::-webkit-scrollbar{
  display:none;
}

.direct-edit-tabs button{
  flex:0 0 auto;
  min-height:34px;
  border-radius:999px;
  padding:0 13px;
}

.direct-edit-tabs button.is-active,
.direct-edit-rail button.is-active,
.direct-edit-actions button.is-primary{
  color:#fff;
  border-color:#111216;
  background:#111216;
}

.direct-edit-message{
  margin:10px 12px 0;
  padding:10px 12px;
  border:1px solid rgba(17,18,22,.08);
  border-radius:14px;
  color:#596067;
  background:rgba(255,255,255,.6);
  font-size:13px;
}

.direct-edit-body{
  min-height:0;
  overflow:auto;
  padding:12px;
}

.direct-edit-fields{
  display:grid;
  gap:10px;
}

.direct-edit-toggle{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(17,18,22,.1);
  border-radius:14px;
  padding:10px 12px;
  color:#33383d;
  background:rgba(255,255,255,.62);
}

.direct-edit-toggle span{
  color:#4b5057;
  font-size:12px;
}

.direct-edit-toggle input{
  width:20px;
  height:20px;
  accent-color:#111216;
}

.direct-edit-media{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:12px;
  align-items:stretch;
  padding:10px;
  border:1px solid rgba(17,18,22,.1);
  border-radius:16px;
  background:rgba(255,255,255,.58);
}

.direct-edit-media-preview{
  min-height:96px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#747981;
  background:rgba(14,15,18,.045);
  font-size:12px;
}

.direct-edit-media-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.direct-edit-upload{
  display:grid;
  align-content:center;
  gap:8px;
  color:#4b5057;
  font-size:12px;
}

.direct-edit-upload input{
  width:100%;
  font-size:12px;
}

.direct-edit-grid{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:12px;
}

.direct-edit-rail{
  max-height:330px;
  display:flex;
  flex-direction:column;
  gap:7px;
  overflow:auto;
  padding-right:2px;
}

.direct-edit-rail button{
  min-height:38px;
  border-radius:14px;
  padding:8px 10px;
  overflow:hidden;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.direct-edit-field{
  display:grid;
  gap:6px;
}

.direct-edit-field > span,
.direct-edit-field-label > span{
  color:#686e75;
  font-size:12px;
}

.direct-edit-field-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.direct-typeboard-open{
  min-height:28px;
  border:1px solid rgba(17,18,22,.1);
  border-radius:999px;
  padding:0 10px;
  color:#f4f5f5;
  background:#1f2022;
  font-size:12px;
}

.direct-edit-field input,
.direct-edit-field textarea{
  width:100%;
  border:1px solid rgba(17,18,22,.12);
  border-radius:14px;
  color:#111216;
  background:rgba(255,255,255,.76);
  outline:none;
  padding:11px 12px;
}

.direct-edit-field textarea{
  min-height:136px;
  resize:vertical;
  line-height:1.65;
}

.direct-edit-field input:focus,
.direct-edit-field textarea:focus{
  border-color:rgba(17,18,22,.38);
  box-shadow:0 0 0 3px rgba(17,18,22,.05);
}

.direct-edit-actions{
  border-top:1px solid rgba(17,18,22,.08);
  background:rgba(255,255,255,.32);
}

.direct-edit-empty{
  padding:18px;
  border:1px dashed rgba(17,18,22,.16);
  border-radius:16px;
  color:#747981;
}

.direct-typeboard{
  position:fixed;
  inset:0;
  z-index:360;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.54);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08);
}

.direct-typeboard-panel{
  width:min(720px, calc(100vw - 28px));
  height:min(560px, calc(100dvh - 64px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  color:#f4f4f4;
  background:#202020;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 90px rgba(0,0,0,.48);
}

.direct-typeboard-panel header,
.direct-typeboard-panel footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 22px;
}

.direct-typeboard-panel header span{
  display:block;
  margin-bottom:4px;
  color:rgba(245,245,245,.46);
  font-size:13px;
  letter-spacing:.08em;
}

.direct-typeboard-panel header strong{
  display:block;
  color:rgba(245,245,245,.74);
  font-size:32px;
  font-weight:650;
  letter-spacing:0;
}

.direct-typeboard-panel textarea{
  min-height:0;
  width:100%;
  height:100%;
  border:0;
  outline:0;
  resize:none;
  padding:4px 42px 18px;
  color:#f7f7f7;
  background:transparent;
  font-family:ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size:22px;
  line-height:1.65;
  letter-spacing:.02em;
  white-space:pre-wrap;
}

.direct-typeboard-panel textarea::selection{
  background:rgba(255,255,255,.22);
}

.direct-typeboard-panel button{
  min-height:38px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:0 14px;
  color:rgba(245,245,245,.7);
  background:rgba(255,255,255,.06);
}

.direct-typeboard-panel button.is-primary{
  color:#202020;
  border-color:rgba(255,255,255,.72);
  background:rgba(245,245,245,.86);
}

.direct-typeboard-panel footer{
  justify-content:flex-end;
  color:rgba(245,245,245,.42);
  font-size:13px;
}

@media (max-width:760px){
  .direct-edit-trigger{
    top:calc(17px + env(safe-area-inset-top));
    left:17px;
    width:42px;
    height:42px;
  }

  .direct-edit-sheet{
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    max-height:72vh;
    border-radius:20px;
  }

  .direct-edit-grid{
    grid-template-columns:1fr;
  }

  .direct-edit-rail{
    max-height:none;
    flex-direction:row;
    overflow:auto;
    padding:0 0 2px;
  }

  .direct-edit-rail button{
    flex:0 0 auto;
    max-width:172px;
  }

  .direct-typeboard{
    align-items:end;
    padding:10px;
  }

  .direct-typeboard-panel{
    width:100%;
    height:min(78dvh, 680px);
    border-radius:26px 26px 18px 18px;
  }

  .direct-typeboard-panel header{
    padding:18px 18px 12px;
  }

  .direct-typeboard-panel header strong{
    font-size:28px;
  }

  .direct-typeboard-panel textarea{
    padding:8px 22px 12px;
    font-size:19px;
    line-height:1.72;
  }

  .direct-typeboard-panel footer{
    padding:12px 14px 16px;
  }
}
/* PUBLIC-STRIP-DIRECT-EDIT-END */

/* 2026-05-20 verified flower-edge work switch:
   This block must stay after the old v=8 JPG override. The control itself is
   transparent wavy lace from IMG_5312, not a white JPG square or circular wrapper. */
.page-home.is-work-selector .home-work-wheel::before,
.page-home.is-work-selector .home-work-wheel::after,
.home-work-wheel::before,
.home-work-wheel::after{
  display:none !important;
  content:none !important;
  background:none !important;
  box-shadow:none !important;
}

@media (max-width:760px){
  .page-home.is-work-selector .home-lower{
    right:14px !important;
    bottom:44px !important;
    width:64px !important;
    height:64px !important;
    pointer-events:none !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:64px !important;
    height:64px !important;
    pointer-events:none !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    width:58px !important;
    height:58px !important;
    right:0 !important;
    bottom:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
    background:url("content/uploads/2026-05-20--IMG_5312-flower-edge-button.svg?v=1") center/100% 100% no-repeat !important;
    box-shadow:none !important;
    opacity:1 !important;
    filter:drop-shadow(0 2px 2px rgba(13,16,18,.10)) drop-shadow(0 0 1px rgba(255,255,255,.62)) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    pointer-events:auto !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:64px !important;
    height:64px !important;
    transform:translate(-3px, -3px) scale(1.02) !important;
    filter:drop-shadow(0 3px 4px rgba(13,16,18,.13)) drop-shadow(0 0 1px rgba(255,255,255,.72)) !important;
  }

  .page-home.is-work-selector .home-wheel-center,
  .page-home.is-work-selector .home-wheel-sheen,
  .page-home.is-work-selector .home-work-wheel .home-work-chip,
  .page-home.is-work-selector .home-work-wheel .home-work-chip.is-active,
  .page-home.is-work-selector .home-work-wheel.is-expanded .home-work-chip,
  .page-home.is-work-selector .home-work-wheel.is-dragging .home-work-chip,
  .page-home.is-work-selector .home-work-wheel:focus-visible .home-work-chip{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

/* 2026-05-20 verified flower-edge work switch:
   This block must stay at EOF. The control itself is transparent wavy lace
   from IMG_5312, not a white JPG square or circular wrapper. */
.page-home.is-work-selector .home-work-wheel::before,
.page-home.is-work-selector .home-work-wheel::after,
.home-work-wheel::before,
.home-work-wheel::after{
  display:none !important;
  content:none !important;
  background:none !important;
  box-shadow:none !important;
}

@media (max-width:760px){
  .page-home.is-work-selector .home-lower{
    right:14px !important;
    bottom:44px !important;
    width:64px !important;
    height:64px !important;
    pointer-events:none !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:64px !important;
    height:64px !important;
    pointer-events:none !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    width:58px !important;
    height:58px !important;
    right:0 !important;
    bottom:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
    background:url("content/uploads/2026-05-20--IMG_5312-flower-edge-button.svg?v=1") center/100% 100% no-repeat !important;
    box-shadow:none !important;
    opacity:1 !important;
    filter:drop-shadow(0 2px 2px rgba(13,16,18,.10)) drop-shadow(0 0 1px rgba(255,255,255,.62)) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    pointer-events:auto !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:64px !important;
    height:64px !important;
    transform:translate(-3px, -3px) scale(1.02) !important;
    filter:drop-shadow(0 3px 4px rgba(13,16,18,.13)) drop-shadow(0 0 1px rgba(255,255,255,.72)) !important;
  }

  .page-home.is-work-selector .home-wheel-center,
  .page-home.is-work-selector .home-wheel-sheen,
  .page-home.is-work-selector .home-work-wheel .home-work-chip,
  .page-home.is-work-selector .home-work-wheel .home-work-chip.is-active,
  .page-home.is-work-selector .home-work-wheel.is-expanded .home-work-chip,
  .page-home.is-work-selector .home-work-wheel.is-dragging .home-work-chip,
  .page-home.is-work-selector .home-work-wheel:focus-visible .home-work-chip{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

/* 2026-05-20 verified flower-edge work switch:
   the control itself is the transparent wavy edge from IMG_5312, not a
   white JPG square, not a circular wrapper, and not the annotation ring. */
.page-home.is-work-selector .home-work-wheel::before,
.page-home.is-work-selector .home-work-wheel::after,
.home-work-wheel::before,
.home-work-wheel::after{
  display:none !important;
  content:none !important;
  background:none !important;
  box-shadow:none !important;
}

@media (max-width:760px){
  .page-home.is-work-selector .home-lower{
    right:14px !important;
    bottom:44px !important;
    width:64px !important;
    height:64px !important;
    pointer-events:none !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:64px !important;
    height:64px !important;
    pointer-events:none !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    width:58px !important;
    height:58px !important;
    right:0 !important;
    bottom:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
    background:url("content/uploads/2026-05-20--IMG_5312-flower-edge-button.svg?v=1") center/100% 100% no-repeat !important;
    box-shadow:none !important;
    opacity:1 !important;
    filter:drop-shadow(0 2px 2px rgba(13,16,18,.10)) drop-shadow(0 0 1px rgba(255,255,255,.62)) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    pointer-events:auto !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:64px !important;
    height:64px !important;
    transform:translate(-3px, -3px) scale(1.02) !important;
    filter:drop-shadow(0 3px 4px rgba(13,16,18,.13)) drop-shadow(0 0 1px rgba(255,255,255,.72)) !important;
  }

  .page-home.is-work-selector .home-wheel-center,
  .page-home.is-work-selector .home-wheel-sheen,
  .page-home.is-work-selector .home-work-wheel .home-work-chip,
  .page-home.is-work-selector .home-work-wheel .home-work-chip.is-active,
  .page-home.is-work-selector .home-work-wheel.is-expanded .home-work-chip,
  .page-home.is-work-selector .home-work-wheel.is-dragging .home-work-chip,
  .page-home.is-work-selector .home-work-wheel:focus-visible .home-work-chip{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

/* 2026-05-19 real final: flower-edge image itself is the button.
   Keep this last. */
.page-home.is-work-selector .home-work-wheel::before,
.page-home.is-work-selector .home-work-wheel::after,
.home-work-wheel::before,
.home-work-wheel::after{
  display:none !important;
  background:none !important;
}

@media (max-width:760px){
  .page-home.is-work-selector .home-lower{
    right:12px !important;
    bottom:32px !important;
    width:62px !important;
    height:70px !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:62px !important;
    height:70px !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    width:54px !important;
    height:64px !important;
    right:0 !important;
    bottom:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
    background:url("content/uploads/2026-05-19--IMG_5312-lens-ring.jpg?v=7") center/contain no-repeat !important;
    box-shadow:none !important;
    opacity:1 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:58px !important;
    height:68px !important;
    transform:translate(-2px, -2px) scale(1.02) !important;
  }

  .page-home.is-work-selector .home-wheel-center,
  .page-home.is-work-selector .home-wheel-sheen{
    display:none !important;
  }
}

/* 2026-05-26 final travel route override:
   keep the iframe route flush to the viewport even after later mobile
   review rules push the shared page-stage down for normal TATWO pages. */
body[data-tatwo-page="travel"] .page-stage.is-travel-route{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
}

body[data-tatwo-page="travel"] .page-stage.is-travel-route .travel-shell,
body[data-tatwo-page="travel"] .page-stage.is-travel-route .travel-shell.is-embedded{
  min-height:100dvh !important;
}

body[data-tatwo-page="travel"] .page-stage.is-travel-route .travel-shell.is-embedded iframe{
  width:100% !important;
  height:100dvh !important;
  min-height:100dvh !important;
}

/* 2026-05-19 actual requested direction:
   the supplied flower-edge image is the button. No circular wrapper, no
   generated edge extraction, no extra glass disk around it. */
.page-home.is-work-selector .home-work-wheel::before,
.page-home.is-work-selector .home-work-wheel::after,
.home-work-wheel::before,
.home-work-wheel::after{
  display:none !important;
}

@media (max-width:760px){
  .page-home.is-work-selector .home-lower{
    right:12px !important;
    bottom:32px !important;
    width:62px !important;
    height:70px !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:62px !important;
    height:70px !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    width:54px !important;
    height:64px !important;
    right:0 !important;
    bottom:0 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
    background:url("content/uploads/2026-05-19--IMG_5312-lens-ring.jpg?v=6") center/contain no-repeat !important;
    box-shadow:none !important;
    opacity:1 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:58px !important;
    height:68px !important;
    transform:translate(-2px, -2px) scale(1.02) !important;
  }

  .page-home.is-work-selector .home-wheel-center,
  .page-home.is-work-selector .home-wheel-sheen{
    display:none !important;
  }
}

/* 2026-05-19 requested placement:
   compact lower-right clear lens. Red circles in review screenshots are
   annotation marks, not the button styling. */
@media (max-width:760px){
  .page-home.is-work-selector .home-lower{
    right:13px !important;
    bottom:14px !important;
    width:58px !important;
    height:58px !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:58px !important;
    height:58px !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    width:46px !important;
    height:46px !important;
    right:0 !important;
    bottom:0 !important;
    border:1px solid rgba(255,255,255,.82) !important;
    background:
      radial-gradient(circle at 38% 24%, rgba(255,255,255,.82), rgba(255,255,255,.20) 39%, transparent 68%),
      rgba(255,255,255,.12) !important;
    box-shadow:
      0 8px 20px -16px rgba(13,16,18,.36),
      0 0 0 3px rgba(255,255,255,.56),
      inset 0 0 0 1px rgba(255,255,255,.64) !important;
    opacity:1 !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:52px !important;
    height:52px !important;
    transform:translate(-3px, -3px) scale(1.03) !important;
    border-color:rgba(255,255,255,.92) !important;
    box-shadow:
      0 10px 24px -16px rgba(13,16,18,.42),
      0 0 0 4px rgba(255,255,255,.62),
      inset 0 0 0 1px rgba(255,255,255,.72) !important;
  }

  .page-home.is-work-selector .home-work-wheel::before{
    opacity:.42 !important;
    background-size:178% !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging::before{
    opacity:.50 !important;
  }

  .page-home.is-work-selector .home-work-wheel::after{
    background:
      radial-gradient(circle at 36% 25%, rgba(255,255,255,.90), rgba(255,255,255,.20) 29%, transparent 58%),
      linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,255,255,.12) 52%, rgba(13,16,18,.04)) !important;
  }

  .page-home.is-work-selector .home-wheel-center{
    width:100% !important;
    height:100% !important;
    opacity:1 !important;
    z-index:4 !important;
  }

  .page-home.is-work-selector .home-wheel-sheen{
    inset:18% !important;
    opacity:.48 !important;
  }

  .page-home.is-work-selector .home-wheel-index{display:none !important}
}

/* 2026-05-19 iPhone home polish:
   use the requested floral-ring lens texture, lift the dial for thumb reach,
   lock customer-side copying, and align the lower card radius to iPhone glass. */
body.tatwo-copy-locked,
body.tatwo-copy-locked *:not(input):not(textarea):not(select):not([contenteditable="true"]):not([contenteditable=""]){
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}

body.tatwo-copy-locked img,
body.tatwo-copy-locked svg{
  -webkit-user-drag:none !important;
  user-drag:none !important;
}

.home-work-wheel::before{
  background:url("content/uploads/2026-05-19--IMG_5312-lens-ring.jpg?v=3") center/98% 114% no-repeat !important;
  opacity:.82 !important;
  mix-blend-mode:multiply !important;
  filter:grayscale(1) contrast(1.55) brightness(.98) !important;
  z-index:1 !important;
}

.home-work-wheel::after{
  background:
    url("content/uploads/2026-05-19--IMG_5312-lens-ring-lines-soft.png?v=1") center/96% 112% no-repeat,
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.48), rgba(255,255,255,.10) 30%, transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 54%, rgba(13,16,18,.025)) !important;
  z-index:2 !important;
}

@media (max-width:760px){
  .page-stage{
    border-radius:24px 24px 30px 30px !important;
    overflow:visible !important;
  }

  .page-card{
    border-radius:24px 24px 30px 30px !important;
    overflow:hidden !important;
  }

  .page-home.is-work-selector{
    border-radius:24px 24px 30px 30px !important;
  }

  .page-home.is-work-selector .home-lower{
    right:14px !important;
    bottom:34px !important;
    width:58px !important;
    height:58px !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:58px !important;
    height:58px !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    width:46px !important;
    height:46px !important;
    right:0 !important;
    bottom:0 !important;
    background:
      radial-gradient(circle at 38% 24%, rgba(255,255,255,.58), rgba(255,255,255,.16) 42%, transparent 70%),
      rgba(255,255,255,.10) !important;
    box-shadow:
      0 8px 20px -16px rgba(13,16,18,.34),
      0 0 0 3px rgba(255,255,255,.54),
      inset 0 0 0 1px rgba(255,255,255,.62) !important;
  }

  .page-home.is-work-selector .home-work-wheel::before{
    background-size:98% 114% !important;
    opacity:.86 !important;
  }

  .page-home.is-work-selector .home-work-wheel::after{
    background:
      url("content/uploads/2026-05-19--IMG_5312-lens-ring-lines-soft.png?v=1") center/96% 112% no-repeat,
      radial-gradient(circle at 38% 26%, rgba(255,255,255,.44), rgba(255,255,255,.08) 31%, transparent 60%),
      linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.05) 54%, rgba(13,16,18,.025)) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:52px !important;
    height:52px !important;
    transform:translate(-3px, -3px) scale(1.03) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging::before{
    opacity:.94 !important;
  }

  .page-home.is-work-selector .home-wheel-sheen{
    inset:16% !important;
    opacity:.22 !important;
  }
}

/* 2026-05-19 final local dial asset:
   clean generated glass texture, based on the requested wavy-ring direction. */
.home-work-wheel::before{
  background:url("content/uploads/2026-05-19--generated-glass-floral-dial.png?v=1") center/100% 100% no-repeat !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
  z-index:2 !important;
}

.home-work-wheel::after{
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.26), rgba(255,255,255,.08) 28%, transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 54%, rgba(13,16,18,.02)) !important;
  z-index:3 !important;
}

@media (max-width:760px){
  .page-home.is-work-selector .home-work-wheel::before{
    background:url("content/uploads/2026-05-19--generated-glass-floral-dial.png?v=1") center/100% 100% no-repeat !important;
    opacity:1 !important;
  }

  .page-home.is-work-selector .home-work-wheel::after{
    background:
      radial-gradient(circle at 36% 24%, rgba(255,255,255,.24), rgba(255,255,255,.07) 30%, transparent 60%),
      linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 54%, rgba(13,16,18,.02)) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging::before{
    opacity:1 !important;
  }
}

/* 2026-05-19 correction:
   previous asset read as a plain white dot. Use transparent ripple linework and
   keep the actual button glass clear. */
.home-work-wheel::before{
  background:url("content/uploads/2026-05-19--glass-ripple-dial-clear.png?v=1") center/100% 100% no-repeat !important;
  opacity:.92 !important;
  mix-blend-mode:normal !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.28)) !important;
  z-index:2 !important;
}

.home-work-wheel::after{
  background:
    radial-gradient(circle at 33% 22%, rgba(255,255,255,.34), rgba(255,255,255,.08) 25%, transparent 54%),
    radial-gradient(circle at 52% 58%, rgba(255,255,255,.08), transparent 62%) !important;
  z-index:3 !important;
}

@media (max-width:760px){
  .page-home.is-work-selector .home-work-wheel{
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,.035) 58%, rgba(255,255,255,.015)),
      rgba(255,255,255,.035) !important;
    border-color:rgba(255,255,255,.62) !important;
    box-shadow:
      0 8px 18px -16px rgba(13,16,18,.34),
      0 0 0 2px rgba(255,255,255,.34),
      inset 0 0 0 1px rgba(255,255,255,.38) !important;
    -webkit-backdrop-filter:blur(8px) saturate(1.08);
    backdrop-filter:blur(8px) saturate(1.08);
  }

  .page-home.is-work-selector .home-work-wheel::before{
    background:url("content/uploads/2026-05-19--glass-ripple-dial-clear.png?v=1") center/100% 100% no-repeat !important;
    opacity:.94 !important;
  }

  .page-home.is-work-selector .home-work-wheel::after{
    background:
      radial-gradient(circle at 34% 22%, rgba(255,255,255,.34), rgba(255,255,255,.07) 26%, transparent 56%),
      radial-gradient(circle at 52% 58%, rgba(255,255,255,.07), transparent 62%) !important;
  }

  .page-home.is-work-selector .home-wheel-sheen{
    opacity:.08 !important;
  }
}

/* 2026-05-19 final override: exact supplied IMG_5312 button.
   This block intentionally comes last so the previous generated/ripple trials
   cannot override it. */
.page-home.is-work-selector .home-work-wheel::before,
.page-home.is-work-selector .home-work-wheel::after,
.home-work-wheel::before,
.home-work-wheel::after{
  display:none !important;
  background:none !important;
}

@media (max-width:760px){
  .page-home.is-work-selector .home-lower{
    right:12px !important;
    bottom:32px !important;
    width:62px !important;
    height:70px !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:62px !important;
    height:70px !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    width:54px !important;
    height:64px !important;
    right:0 !important;
    bottom:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
    border:0 !important;
    background:url("content/uploads/2026-05-19--IMG_5312-lens-ring.jpg?v=8") center/contain no-repeat !important;
    box-shadow:none !important;
    opacity:1 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:58px !important;
    height:68px !important;
    transform:translate(-2px, -2px) scale(1.02) !important;
  }

  .page-home.is-work-selector .home-wheel-center,
  .page-home.is-work-selector .home-wheel-sheen{
    display:none !important;
  }
}

/* 2026-05-27 terminal iPhone-only format override. Desktop intentionally untouched. */
@media (max-width:760px){
  .tabnav .tabs{
    scroll-padding-inline:38px !important;
  }

  .tabnav .tab-indicator{
    transition:transform .18s ease, width .18s ease, opacity .18s ease !important;
  }

  .work-focus{
    position:fixed !important;
    inset:0 !important;
    z-index:210 !important;
    display:block !important;
    padding:calc(72px + env(safe-area-inset-top)) 0 0 !important;
    background:rgba(243,245,244,.98) !important;
    backdrop-filter:blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;
  }

  .work-focus .modal{
    width:100% !important;
    height:calc(100dvh - 72px - env(safe-area-inset-top)) !important;
    max-height:none !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(280px, 48dvh) auto !important;
    overflow-y:auto !important;
    border-radius:28px 28px 0 0 !important;
    background:rgba(247,248,247,.98) !important;
    box-shadow:0 -18px 56px -34px rgba(0,0,0,.3) !important;
  }

  .work-focus .close{
    position:fixed !important;
    top:calc(84px + env(safe-area-inset-top)) !important;
    right:18px !important;
    z-index:4 !important;
  }

  .work-focus-media{
    min-height:0 !important;
    height:48dvh !important;
    max-height:48dvh !important;
    background:#eef0ef !important;
  }

  .work-focus-media img,
  .work-focus-media video{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  .work-focus .info{
    padding:18px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    background:rgba(247,248,247,.98) !important;
  }

  .work-info-summary{
    min-height:48px !important;
  }

  .work-info-hint{
    min-width:64px !important;
    text-align:right !important;
  }

  .work-book-cta{
    width:100% !important;
    min-height:48px !important;
    justify-content:center !important;
    margin-top:18px !important;
  }

  .page-process{
    display:block !important;
    grid-template-rows:none !important;
    padding:28px 20px 20px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .process-head{
    padding:26px 10px 18px !important;
  }

  .process-head .h-section,
  .page-process .h-section{
    font-size:clamp(38px, 13.8vw, 54px) !important;
    line-height:1.08 !important;
    letter-spacing:0 !important;
  }

  .process-grid{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    grid-auto-rows:auto !important;
    gap:12px !important;
    padding:0 10px 18px !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .proc-card{
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    padding:20px 20px 18px !important;
  }

  .proc-card .num{
    font-size:52px !important;
    line-height:.9 !important;
  }

  .proc-card h3{
    margin-top:10px !important;
    font-size:24px !important;
  }

  .proc-card p{
    margin-top:14px !important;
    font-size:15px !important;
    line-height:1.65 !important;
  }
}

/* 2026-05-27 true-final iPhone works-detail correction. */
@media (max-width:760px){
  .work-focus .modal{
    position:relative !important;
    display:block !important;
    overflow:hidden !important;
    background:#111216 !important;
  }

  .work-focus-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    display:block !important;
    overflow:hidden !important;
    background:#111216 !important;
  }

  .work-focus-media-item{
    position:absolute !important;
    inset:0 !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    background:#111216 !important;
  }

  .work-focus-media-item::before{
    content:"" !important;
    position:absolute !important;
    inset:-28px !important;
    background-image:var(--work-image) !important;
    background-size:cover !important;
    background-position:center center !important;
    filter:blur(18px) brightness(.82) saturate(.9) !important;
    transform:scale(1.04) !important;
    opacity:.74 !important;
  }

  .work-focus-media img,
  .work-focus-media video{
    position:relative !important;
    z-index:1 !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    filter:none !important;
  }

  .work-focus .info{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2 !important;
    background:rgba(247,248,247,.78) !important;
    border-top:1px solid rgba(255,255,255,.32) !important;
    backdrop-filter:blur(18px) saturate(1.06) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.06) !important;
  }

  .work-focus .info.is-collapsed{
    min-height:0 !important;
    display:block !important;
  }

  .work-focus .info.is-collapsed .eyebrow{
    display:none !important;
  }

  .work-focus .info.is-collapsed .work-info-summary{
    margin:0 !important;
    padding:0 !important;
    border-top:0 !important;
    min-height:44px !important;
  }

  .work-focus .info.is-collapsed .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin:14px 0 0 !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }

  .work-focus .info.is-expanded{
    top:0 !important;
    overflow-y:auto !important;
    background:rgba(247,248,247,.34) !important;
    padding:calc(72px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media-item::before{
    filter:blur(18px) brightness(.32) saturate(.72) !important;
    opacity:.94 !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.24) saturate(.78) !important;
  }

  .work-focus .info.is-expanded .work-info-details{
    display:block !important;
    margin-top:22px !important;
  }

  .work-focus .info.is-expanded .work-story{
    display:block !important;
    color:rgba(17,18,22,.94) !important;
  }

  .work-focus .info.is-expanded .work-book-cta{
    width:auto !important;
    min-width:152px !important;
    min-height:34px !important;
    margin-top:24px !important;
    padding:8px 14px !important;
    justify-content:flex-start !important;
    font-size:13px !important;
  }
}

/* 2026-05-27 EOF iPhone works image-fit override. */
@media (max-width:760px){
  .work-focus .work-focus-media .work-focus-media-item > img,
  .work-focus .work-focus-media .work-focus-media-item > video{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}

/* 2026-05-27 EOF iPhone expanded glass tuning. */
@media (max-width:760px){
  .work-focus .info.is-expanded{
    background:rgba(248,249,248,.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -140px 150px -110px rgba(255,255,255,.48),
      0 18px 70px -46px rgba(0,0,0,.52) !important;
    backdrop-filter:blur(40px) saturate(1.55) contrast(1.08) !important;
    -webkit-backdrop-filter:blur(40px) saturate(1.55) contrast(1.08) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media-item::before{
    filter:blur(16px) brightness(.58) saturate(.9) !important;
    opacity:.74 !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.48) saturate(.88) !important;
  }

  .work-focus .info.is-expanded .work-story,
  .work-focus .info.is-expanded .work-detail-list dd,
  .work-focus .info.is-expanded .work-info-title{
    color:rgba(10,11,13,.94) !important;
  }
}

/* 2026-05-27 EOF iPhone expanded bottom-anchor and clearer glass. */
@media (max-width:760px){
  .work-focus .info.is-expanded{
    display:flex !important;
    flex-direction:column !important;
    background:rgba(248,249,248,.13) !important;
    backdrop-filter:blur(46px) saturate(1.72) contrast(1.1) !important;
    -webkit-backdrop-filter:blur(46px) saturate(1.72) contrast(1.1) !important;
    position:absolute !important;
  }

  .work-focus .info.is-expanded::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    z-index:0 !important;
    background:
      radial-gradient(120% 70% at 18% 8%, rgba(255,255,255,.34), rgba(255,255,255,0) 58%),
      radial-gradient(90% 60% at 84% 20%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%),
      linear-gradient(115deg, rgba(255,255,255,.18), rgba(255,255,255,0) 32%, rgba(255,255,255,.13) 57%, rgba(255,255,255,0) 78%) !important;
    mix-blend-mode:screen !important;
    opacity:.72 !important;
  }

  .work-focus .info.is-expanded > *{
    position:relative !important;
    z-index:1 !important;
  }

  .work-focus .info.is-expanded .work-info-summary{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:18px !important;
    flex:0 0 auto !important;
  }

  .work-focus .info.is-expanded .work-info-title{
    min-width:0 !important;
  }

  .work-focus .info.is-expanded .work-info-hint{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    max-width:96px !important;
    overflow:hidden !important;
    text-overflow:clip !important;
  }

  .work-focus .info.is-expanded .work-info-details{
    display:flex !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    flex-direction:column !important;
    margin-top:24px !important;
  }

  .work-focus .info.is-expanded .work-story{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:auto !important;
    margin:0 !important;
    padding:0 0 22px !important;
  }

  .work-focus .info.is-expanded .work-detail-list{
    flex:0 0 auto !important;
    margin-top:auto !important;
  }

  .work-focus .info.is-expanded .work-book-cta{
    flex:0 0 auto !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media-item::before{
    filter:blur(17px) brightness(.72) saturate(.96) !important;
    opacity:.8 !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.62) saturate(.96) !important;
  }

  .work-focus .close{
    background:rgba(248,249,250,.74) !important;
    border:1px solid rgba(255,255,255,.74) !important;
    color:rgba(16,17,20,.78) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.62), 0 10px 26px rgba(12,13,16,.16) !important;
  }
}

/* 2026-05-27 EOF iPhone liquid-glass polish. */
@media (max-width:760px){
  .work-focus{
    background:rgba(244,246,245,.94) !important;
    backdrop-filter:blur(8px) saturate(1.04) !important;
    -webkit-backdrop-filter:blur(8px) saturate(1.04) !important;
  }

  .work-focus .modal{
    isolation:isolate !important;
    border:0 !important;
    outline:0 !important;
    background:#f7f8f7 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.82),
      0 -10px 34px -28px rgba(16,17,20,.28) !important;
  }

  .work-focus .modal::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;
    pointer-events:none !important;
    border-radius:28px 28px 0 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      inset 1px 0 0 rgba(255,255,255,.36),
      inset -1px 0 0 rgba(255,255,255,.18) !important;
  }

  .work-focus-media,
  .work-focus-media-item{
    background:#f7f8f7 !important;
  }

  .work-focus .info{
    box-sizing:border-box !important;
  }

  .work-focus .info.is-collapsed{
    background:rgba(250,251,250,.46) !important;
    border-top:1px solid rgba(255,255,255,.72) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.82),
      inset 0 -28px 42px rgba(255,255,255,.18),
      0 -18px 54px -40px rgba(16,17,20,.22) !important;
    backdrop-filter:blur(34px) saturate(1.42) contrast(1.04) !important;
    -webkit-backdrop-filter:blur(34px) saturate(1.42) contrast(1.04) !important;
  }

  .work-focus .info.is-collapsed::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:
      radial-gradient(100% 78% at 8% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%),
      linear-gradient(110deg, rgba(255,255,255,.28), rgba(255,255,255,0) 38%, rgba(255,255,255,.18) 72%, rgba(255,255,255,0)) !important;
    mix-blend-mode:screen !important;
    opacity:.74 !important;
  }

  .work-focus .info.is-collapsed > *{
    position:relative !important;
    z-index:1 !important;
  }

  .work-focus .info.is-expanded{
    box-sizing:border-box !important;
    background:rgba(250,251,250,.11) !important;
    border:0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.58),
      inset 0 -80px 90px -70px rgba(255,255,255,.56),
      0 14px 48px -42px rgba(16,17,20,.24) !important;
    backdrop-filter:blur(38px) saturate(1.64) contrast(1.04) !important;
    -webkit-backdrop-filter:blur(38px) saturate(1.64) contrast(1.04) !important;
  }

  .work-focus .info.is-expanded::before{
    background:
      radial-gradient(110% 64% at 12% 0%, rgba(255,255,255,.38), rgba(255,255,255,0) 58%),
      radial-gradient(80% 58% at 90% 14%, rgba(255,255,255,.2), rgba(255,255,255,0) 62%),
      linear-gradient(118deg, rgba(255,255,255,.16), rgba(255,255,255,0) 33%, rgba(255,255,255,.12) 62%, rgba(255,255,255,0) 82%) !important;
    opacity:.62 !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media-item::before{
    filter:blur(16px) brightness(.9) saturate(1.02) !important;
    opacity:.74 !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.82) saturate(1.02) !important;
  }

  .work-focus .info.is-expanded .work-info-summary{
    box-sizing:border-box !important;
    max-width:100% !important;
  }

  .work-focus .info.is-expanded .work-info-hint{
    display:none !important;
  }

  .work-focus .info.is-expanded .work-story{
    color:rgba(11,12,15,.88) !important;
    text-shadow:0 1px 12px rgba(255,255,255,.18) !important;
  }

  .work-focus .info.is-expanded .work-detail-list dt{
    color:rgba(142,148,156,.64) !important;
  }

  .work-focus .close{
    z-index:5 !important;
    background:rgba(246,248,249,.68) !important;
    backdrop-filter:blur(24px) saturate(1.35) contrast(1.04) !important;
    -webkit-backdrop-filter:blur(24px) saturate(1.35) contrast(1.04) !important;
    border:1px solid rgba(255,255,255,.78) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.84),
      inset 0 -10px 18px rgba(230,233,236,.28),
      0 12px 30px rgba(16,17,20,.14) !important;
  }

  .work-focus .info.is-expanded .eyebrow{
    display:none !important;
  }

  .work-focus .info.is-expanded .work-info-summary{
    margin-top:0 !important;
  }
}

/* 2026-05-27 EOF iPhone glass taste pass. */
@media (max-width:760px){
  .work-focus .info.is-collapsed .work-book-cta,
  .work-focus .info.is-expanded .work-book-cta{
    min-width:128px !important;
    width:auto !important;
    min-height:32px !important;
    height:32px !important;
    padding:7px 13px !important;
    font-size:12px !important;
    line-height:1 !important;
    gap:8px !important;
  }

  .work-focus .close{
    background:rgba(247,249,250,.42) !important;
    backdrop-filter:blur(28px) saturate(1.55) contrast(1.06) !important;
    -webkit-backdrop-filter:blur(28px) saturate(1.55) contrast(1.06) !important;
    border:1px solid rgba(255,255,255,.62) !important;
    color:rgba(18,19,22,.64) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -12px 18px rgba(225,229,232,.14),
      0 10px 26px rgba(16,17,20,.1) !important;
  }

  .work-focus .info.is-expanded{
    background:rgba(252,253,252,.07) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.54),
      inset 1px 0 0 rgba(255,255,255,.18),
      inset -1px 0 0 rgba(255,255,255,.1),
      inset 0 -76px 88px -72px rgba(255,255,255,.44),
      0 12px 42px -38px rgba(16,17,20,.18) !important;
    backdrop-filter:blur(34px) saturate(1.82) contrast(1.03) brightness(1.04) !important;
    -webkit-backdrop-filter:blur(34px) saturate(1.82) contrast(1.03) brightness(1.04) !important;
  }

  .work-focus .info.is-expanded::before{
    background:
      radial-gradient(100% 58% at 8% 0%, rgba(255,255,255,.24), rgba(255,255,255,0) 60%),
      radial-gradient(84% 56% at 94% 10%, rgba(255,255,255,.13), rgba(255,255,255,0) 64%),
      linear-gradient(124deg, rgba(255,255,255,.1), rgba(255,255,255,0) 36%, rgba(255,255,255,.08) 68%, rgba(255,255,255,0) 86%) !important;
    opacity:.38 !important;
  }

  .work-focus .info.is-expanded::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    border-radius:28px 28px 0 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.58),
      inset 0 0 0 1px rgba(255,255,255,.08) !important;
    opacity:.82 !important;
  }

  .work-focus .info.is-expanded > *{
    z-index:1 !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.9) saturate(1.04) contrast(1.01) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media-item::before{
    filter:blur(14px) brightness(.98) saturate(1.04) !important;
    opacity:.62 !important;
  }
}

/* 2026-05-27 EOF iPhone calmer expanded glass. */
@media (max-width:760px){
  .work-focus .info.is-expanded{
    background:rgba(252,253,252,.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 1px 0 0 rgba(255,255,255,.16),
      inset -1px 0 0 rgba(255,255,255,.1),
      inset 0 -1px 0 rgba(255,255,255,.2),
      0 10px 38px -34px rgba(16,17,20,.16) !important;
    backdrop-filter:blur(18px) saturate(1.34) contrast(1.01) brightness(1.02) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.34) contrast(1.01) brightness(1.02) !important;
  }

  .work-focus .info.is-expanded::before{
    background:
      linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(255,255,255,.12)),
      linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0) 14%, rgba(255,255,255,0) 86%, rgba(255,255,255,.1)) !important;
    opacity:.46 !important;
    mix-blend-mode:screen !important;
  }

  .work-focus .info.is-expanded::after{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.56),
      inset 0 0 0 1px rgba(255,255,255,.07),
      inset 0 -1px 0 rgba(255,255,255,.2) !important;
    opacity:.72 !important;
  }

  .work-focus .info.is-expanded .work-story{
    color:rgba(12,13,16,.9) !important;
    text-shadow:none !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.96) saturate(1.02) contrast(1) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media-item::before{
    filter:blur(10px) brightness(1.02) saturate(1.02) !important;
    opacity:.48 !important;
  }
}

/* 2026-05-27 EOF iPhone expanded control polish. */
@media (max-width:760px){
  .work-focus .info.is-collapsed .work-book-cta,
  .work-focus .info.is-expanded .work-book-cta{
    min-width:0 !important;
    width:auto !important;
    height:30px !important;
    min-height:30px !important;
    padding:6px 11px !important;
    border-radius:999px !important;
    background:rgba(248,249,250,.28) !important;
    color:rgba(13,14,17,.82) !important;
    border:1px solid rgba(255,255,255,.46) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.58),
      inset 0 -8px 14px rgba(230,233,236,.1),
      0 8px 22px rgba(16,17,20,.08) !important;
    backdrop-filter:blur(18px) saturate(1.24) contrast(1.02) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.24) contrast(1.02) !important;
    font-size:11px !important;
    gap:7px !important;
  }

  .work-focus .close{
    width:38px !important;
    height:38px !important;
    background:rgba(248,249,250,.26) !important;
    color:rgba(18,19,22,.58) !important;
    border-color:rgba(255,255,255,.5) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.56),
      inset 0 -8px 14px rgba(225,229,232,.08),
      0 8px 20px rgba(16,17,20,.08) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media img,
  .work-focus:has(.info.is-expanded) .work-focus-media video{
    filter:brightness(.9) saturate(1.01) contrast(1) !important;
  }

  .work-focus:has(.info.is-expanded) .work-focus-media-item::before{
    filter:blur(10px) brightness(.96) saturate(1.01) !important;
    opacity:.46 !important;
  }
}

/* 2026-05-27 EOF iPhone expanded white meta text. */
@media (max-width:760px){
  .work-focus .info.is-expanded .work-info-title,
  .work-focus .info.is-expanded .work-info-title span,
  .work-focus .info.is-expanded .work-detail-list dt{
    color:rgba(255,255,255,.9) !important;
    text-shadow:0 1px 10px rgba(0,0,0,.18) !important;
  }
}

/* 2026-05-28 EOF iPhone direct-edit works stability.
   Keep after older phone blocks: direct-edit outlines and filter rails must not
   create retained horizontal scroll when returning to Works from another tab. */
@media (max-width:760px){
  body.tatwo-direct-editing{
    width:100vw !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"]{
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    transform:none !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .page-works,
  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .works-stage{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    transform:none !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .works-bar{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    transform:none !important;
    overflow:hidden !important;
    align-items:center !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .works-bar-head,
  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .works-bar-head.has-post-entry{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    flex:none !important;
    display:contents !important;
    gap:0 !important;
    transform:none !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .works-bar .title{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .works-post-entry{
    flex:0 0 auto !important;
    transform:none !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .filter-pills,
  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .sliding-pills{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    transform:none !important;
    box-sizing:border-box !important;
    overscroll-behavior-x:contain !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .works-grid{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    transform:none !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .work-tile{
    min-width:0 !important;
    transform:none !important;
    overflow:hidden !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .work-tile .meta{
    left:0 !important;
    right:0 !important;
    max-width:100% !important;
    min-width:0 !important;
    transform:none !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body.tatwo-direct-editing .page-stage[data-screen-label="works"] .work-tile .direct-inline-text{
    max-width:100% !important;
    min-width:0 !important;
    outline-offset:2px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }
}

/* 2026-05-28 final portfolio detail viewer override. Keep this last. */
.work-focus-media-item .work-focus-media-button{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  cursor:zoom-in !important;
}

.work-focus-media-item .work-focus-media-button > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.work-focus .modal:has(.work-gallery-viewer){
  overflow:visible !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
}

.work-focus:has(.work-gallery-viewer){
  z-index:5000 !important;
}

.work-gallery-viewer{
  position:fixed !important;
  inset:0 !important;
  z-index:5001 !important;
  overflow:hidden !important;
  background:rgba(238,241,240,.34) !important;
  isolation:isolate !important;
  opacity:1 !important;
  animation:none !important;
}

.work-gallery-viewer::before{
  content:"" !important;
  position:absolute !important;
  inset:-46px !important;
  z-index:0 !important;
  background-image:
    linear-gradient(180deg, rgba(248,250,250,.18), rgba(248,250,250,.04) 24%, rgba(248,250,250,.08) 76%, rgba(248,250,250,.18)),
    var(--viewer-bg) !important;
  background-size:cover !important;
  background-position:center 42% !important;
  filter:blur(34px) saturate(1.2) brightness(.9) contrast(1.02) !important;
  transform:scale(1.18) !important;
  opacity:.96 !important;
}

.work-gallery-viewer::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.10) 18%, rgba(255,255,255,.05) 72%, rgba(255,255,255,.24)),
    radial-gradient(120% 88% at 50% 10%, rgba(255,255,255,.24), rgba(255,255,255,0) 54%),
    radial-gradient(110% 72% at 50% 100%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%),
    rgba(238,241,240,.18) !important;
  backdrop-filter:blur(18px) saturate(1.28) contrast(1.02) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.28) contrast(1.02) !important;
}

.work-gallery-viewer .work-gallery-close,
.work-gallery-close{
  display:none !important;
}

body:has(.work-gallery-viewer) .tabnav{
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
}

body:has(.work-gallery-viewer){
  background:#dfe5e3 !important;
  overflow:hidden !important;
}

html:has(.work-gallery-viewer){
  background:#dfe5e3 !important;
}

.work-focus .modal{
  transform:translate3d(0, var(--work-drag-y, 0px), 0) !important;
  transition:transform .28s cubic-bezier(.22, 1, .36, 1), opacity .28s ease !important;
  will-change:transform;
}

.work-focus .modal:has(.work-gallery-viewer){
  transform:none !important;
  transition:none !important;
  animation:none !important;
  will-change:auto !important;
}

.work-focus .modal.is-next-work{
  animation:workFocusNextIn .42s cubic-bezier(.22, 1, .36, 1) both !important;
}

.work-focus .modal.is-prev-work{
  animation:workFocusPrevIn .42s cubic-bezier(.22, 1, .36, 1) both !important;
}

@keyframes workFocusNextIn{
  from{opacity:.52; transform:translate3d(0, 58px, 0) scale(.992)}
  to{opacity:1; transform:translate3d(0, var(--work-drag-y, 0px), 0) scale(1)}
}

@keyframes workFocusPrevIn{
  from{opacity:.52; transform:translate3d(0, -58px, 0) scale(.992)}
  to{opacity:1; transform:translate3d(0, var(--work-drag-y, 0px), 0) scale(1)}
}

.work-gallery-image{
  width:auto !important;
  height:auto !important;
  max-width:min(100vw, 1120px) !important;
  max-height:100dvh !important;
  object-fit:contain !important;
  filter:none !important;
  position:relative !important;
  z-index:1 !important;
  transform:translate3d(calc(var(--viewer-drag-x, 0px) + var(--viewer-pan-x, 0px)), var(--viewer-pan-y, 0px), 0) scale(var(--viewer-zoom, 1)) !important;
  transition:transform .16s cubic-bezier(.18, .9, .2, 1) !important;
  will-change:transform !important;
  cursor:zoom-in !important;
  touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-user-drag:none !important;
}

.work-gallery-stage{
  touch-action:none !important;
  position:relative !important;
  z-index:1 !important;
  overflow:hidden !important;
  align-items:center !important;
}

@media (max-width:760px){
  .work-gallery-close{
    top:calc(92px + env(safe-area-inset-top)) !important;
  }

  .work-gallery-image{
    max-width:100vw !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }

  .work-gallery-viewer{
    padding:0 !important;
    background:rgba(238,241,240,.3) !important;
  }

  .work-gallery-viewer::before{
    inset:-64px -46px !important;
    background-size:cover !important;
    background-position:center 36% !important;
    filter:blur(34px) saturate(1.22) brightness(.88) contrast(1.03) !important;
    opacity:1 !important;
  }

  .work-gallery-viewer::after{
    background:
      linear-gradient(180deg, rgba(242,246,245,.68), rgba(242,246,245,.22) 14%, rgba(242,246,245,.04) 62%, rgba(242,246,245,.2)),
      radial-gradient(120% 86% at 50% 4%, rgba(255,255,255,.34), rgba(255,255,255,0) 48%),
      rgba(230,236,234,.14) !important;
    backdrop-filter:blur(16px) saturate(1.22) contrast(1.02) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.22) contrast(1.02) !important;
  }

  .work-gallery-stage{
    padding:0 !important;
    align-items:center !important;
  }

  .work-focus .info,
  .work-focus .info.is-collapsed{
    border-top:0 !important;
    box-shadow:0 -12px 42px -36px rgba(16,17,20,.18) !important;
  }

  .work-focus .info.is-collapsed::before{
    top:-1px !important;
  }

  .work-focus .modal > .close{
    position:absolute !important;
    top:16px !important;
    right:16px !important;
  }

  html,
  body{
    overscroll-behavior:none !important;
    overflow-x:hidden !important;
    touch-action:pan-y manipulation;
  }
}

/* 2026-05-28 final FAQ paper cleanup. Keep this after older phone FAQ overrides. */
.page-faq-letter{
  background:#fdfdfc !important;
}

.page-faq-letter .eyebrow::before{
  display:none !important;
  content:none !important;
}

.page-faq-letter .letter-kicker{
  margin-bottom:12px !important;
  letter-spacing:.08em !important;
}

.page-faq-letter .letter-qlist{
  border-top:0 !important;
  box-shadow:none !important;
}

.page-faq-letter .letter-qlist li{
  border-bottom:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.page-faq-letter .letter-q{
  min-height:58px !important;
  padding:0 !important;
  background:transparent !important;
}

.page-faq-letter .letter-q:hover,
.page-faq-letter .letter-q:active,
.page-faq-letter .letter-qlist li:hover{
  background:transparent !important;
  padding-left:0 !important;
}

.page-faq-letter .mobile-letter-inline-answer{
  border-top:0 !important;
  padding-top:0 !important;
}

/* 2026-06-09 Product Design mobile dial anti-alias pass:
   replace the bitmap phone wheel surface with a vector-soft ring so the
   tiny homepage control stays clean on iPhone Retina. Layout and behavior
   intentionally remain unchanged. */
@media (max-width:760px){
  .page-home.is-work-selector .home-work-wheel{
    width:56px !important;
    height:56px !important;
    right:0 !important;
    bottom:0 !important;
    border-radius:50% !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at 38% 24%, rgba(255,255,255,.42), rgba(255,255,255,.08) 42%, transparent 70%),
      rgba(116,122,123,.28) !important;
    box-shadow:
      0 8px 18px -16px rgba(13,16,18,.32),
      0 0 0 1px rgba(255,255,255,.40),
      inset 0 0 0 1px rgba(255,255,255,.30) !important;
    filter:none !important;
    transform:translateZ(0) !important;
    backface-visibility:hidden !important;
    -webkit-font-smoothing:antialiased;
    contain:paint;
  }

  .page-home.is-work-selector .home-work-wheel::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:-1px !important;
    border-radius:50% !important;
    background:url("content/uploads/2026-06-09--home-dial-smooth-ring.svg?v=1") center/100% 100% no-repeat !important;
    opacity:.96 !important;
    transform:translateZ(0) !important;
    backface-visibility:hidden !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  .page-home.is-work-selector .home-work-wheel::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:50% !important;
    background:
      radial-gradient(circle at 34% 22%, rgba(255,255,255,.24), rgba(255,255,255,.06) 30%, transparent 60%),
      linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 58%, rgba(13,16,18,.025)) !important;
    pointer-events:none !important;
    z-index:3 !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:60px !important;
    height:60px !important;
    transform:translate3d(-2px, -2px, 0) !important;
  }
}

/* 2026-06-09 Product Design unified homepage dial:
   portrait and landscape now use the same smooth vector ring surface.
   This intentionally disables the older numbered desktop wheel and bitmap
   phone wheel while keeping the same picker interaction target. */
.page-home.is-work-selector .home-work-picker{
  overflow:visible !important;
}

.page-home.is-work-selector .home-work-wheel{
  --wheel-size:56px !important;
  --wheel-radius:0 !important;
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  min-height:56px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  border:0 !important;
  background:
    radial-gradient(circle at 38% 24%, rgba(255,255,255,.42), rgba(255,255,255,.08) 42%, transparent 70%),
    rgba(116,122,123,.26) !important;
  box-shadow:
    0 8px 18px -16px rgba(13,16,18,.32),
    0 0 0 1px rgba(255,255,255,.40),
    inset 0 0 0 1px rgba(255,255,255,.30) !important;
  opacity:1 !important;
  filter:none !important;
  transform:translateZ(0) !important;
  backface-visibility:hidden !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  contain:paint !important;
}

.page-home.is-work-selector .home-work-wheel::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:50% !important;
  background:url("content/uploads/2026-06-09--home-dial-smooth-ring.svg?v=2") center/100% 100% no-repeat !important;
  opacity:.96 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
  transform:translateZ(0) !important;
  backface-visibility:hidden !important;
  pointer-events:none !important;
  z-index:2 !important;
}

.page-home.is-work-selector .home-work-wheel::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.24), rgba(255,255,255,.06) 30%, transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 58%, rgba(13,16,18,.025)) !important;
  pointer-events:none !important;
  z-index:3 !important;
}

.page-home.is-work-selector .home-work-wheel.is-expanded,
.page-home.is-work-selector .home-work-wheel.is-dragging,
.page-home.is-work-selector .home-work-wheel:focus-visible{
  width:60px !important;
  height:60px !important;
  min-width:60px !important;
  min-height:60px !important;
  transform:translate3d(-2px, -2px, 0) !important;
}

.page-home.is-work-selector .home-wheel-center,
.page-home.is-work-selector .home-wheel-sheen,
.page-home.is-work-selector .home-work-wheel .home-work-chip,
.page-home.is-work-selector .home-work-wheel .home-work-chip.is-active,
.page-home.is-work-selector .home-work-wheel.is-expanded .home-work-chip,
.page-home.is-work-selector .home-work-wheel.is-dragging .home-work-chip,
.page-home.is-work-selector .home-work-wheel:focus-visible .home-work-chip{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

@media (min-width:761px){
  .page-home.is-work-selector .home-work-picker{
    grid-template-columns:auto !important;
    width:64px !important;
    min-width:64px !important;
    padding:4px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .page-home.is-work-selector .home-picker-copy,
  .page-home.is-work-selector .home-side-ai-control{
    display:none !important;
  }
}

/* 2026-06-10 production phone bugfixes.
   Scope: abandon black-Changhong nav experiment; focus public phone site.
   - Keep iOS standalone status handling on default/light instead of forcing
     black-translucent.
   - Do not add an artificial top spacer; Safari/in-app browser status chrome is
     outside the webpage and should not squeeze the homepage layout.
   - Start the cover below the mobile text block, then let object-fit preserve
     artwork proportion while filling the lower cover area.
   - Keep the established clear lower-right work dial unchanged. */
:root{
  color-scheme:light;
}

html,
body,
#root{
  background:#eef2f3 !important;
}

@media (max-width:760px){
  html,
  body,
  #root{
    min-height:100dvh !important;
    background:#eef2f3 !important;
  }

  .tabnav{
    top:calc(10px + env(safe-area-inset-top, 0px)) !important;
  }

  .page-stage{
    top:calc(73px + env(safe-area-inset-top, 0px)) !important;
  }

  body::before{
    content:"" !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    height:max(0px, env(safe-area-inset-top, 0px)) !important;
    z-index:9999 !important;
    pointer-events:none !important;
    background:#eef2f3 !important;
  }

  .page-bg{
    background:
      radial-gradient(720px 520px at 12% 6%, rgba(255,255,255,.76) 0%, transparent 66%),
      radial-gradient(760px 520px at 86% 12%, rgba(222,228,231,.42) 0%, transparent 62%),
      linear-gradient(180deg,#eef2f3 0%,#e5eaec 54%,#dfe5e8 100%) !important;
  }

  .page-home.is-work-selector .home-right .feat{
    left:0 !important;
    right:0 !important;
    top:clamp(176px, 22dvh, 214px) !important;
    bottom:0 !important;
    display:block !important;
    overflow:hidden !important;
    background:
      linear-gradient(180deg, rgba(246,248,249,.40), rgba(226,232,234,.28)),
      #eef2f3 !important;
  }

  .page-home.is-work-selector .home-right .feat img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    min-height:100% !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
    object-position:center top !important;
    filter:none !important;
    transform:none !important;
  }
}