/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   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. */

  /* Tier 1 — Primary: the main page card (largest surface) */
  --glass-1-bg: rgba(255,255,255,0.38);
  --glass-1-blur: blur(64px) saturate(190%) contrast(104%);
  --glass-1-border: rgba(255,255,255,0.72);
  --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,.2),
    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,0.50);
  --glass-2-blur: blur(42px) saturate(190%) contrast(104%);
  --glass-2-border: rgba(255,255,255,0.74);
  --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,.18),
    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,0.30);
  --glass-3-blur: blur(28px) saturate(175%) contrast(103%);
  --glass-3-border: rgba(255,255,255,0.58);
  --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-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;
  }
}

.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);
}
@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}
}
@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;
}

.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:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 26px; border-bottom:0.5px solid var(--hairline);
  flex-wrap:wrap;
}
.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}

.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 img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.75)}
.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{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 img{width:100%; height:100%; object-fit:cover; max-height:88vh; display:block; filter:saturate(.8)}
.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;
  }
}