/* TPC persistent chrome only, in project mode: the house components arranged nav / wordmark / CTA.
   Existing local font files; no house body selectors; nothing here styles a case interior.
   TPCInter/TPCCardo are the house's own font files under chrome-only names, because case pages also load
   Google's Cardo; the rendering settings match the house body (antialiased, optimizeLegibility). */
@font-face{font-family:TPCInter;src:url('/assets/inter-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:TPCCardo;src:url('/assets/cardo-400.woff2') format('woff2');font-weight:400;font-display:swap}
.tpc-case-page{--tpc-m:clamp(24px,5vw,90px);--tpc-shell:76px;--tpc-ease:cubic-bezier(.22,.7,.18,1);--tpc-in:.16s;--tpc-out:.24s;cursor:auto}
.tpc-case-page a,.tpc-case-page button{cursor:pointer}
.tpc-shell,.tpc-menu{box-sizing:border-box;font:400 16px/1.6 TPCInter,Arial,sans-serif;color:#efe9d9;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.tpc-shell *,.tpc-menu *{box-sizing:border-box}
.tpc-shell a,.tpc-menu a{color:inherit;text-decoration:none}
.tpc-shell button,.tpc-menu button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tpc-shell a:focus-visible,.tpc-shell button:focus-visible,.tpc-menu a:focus-visible,.tpc-menu button:focus-visible{outline:2px solid currentColor;outline-offset:6px}
/* One material: an opaque night frame with the house hairline, so no project image or lettering shows through
   behind the chrome. No blur, no glow; the hero starts beneath it. */
.tpc-shell{position:fixed;inset:0 0 auto;z-index:100;height:var(--tpc-shell);background:#13141e;border-bottom:1px solid #eee9da24}
.tpc-shell-inner{height:100%;padding:0 var(--tpc-m);display:grid;grid-template-columns:1fr auto 1fr;column-gap:24px;align-items:center}
.tpc-wordmark{font:400 16px/1 TPCCardo,Georgia,serif;letter-spacing:.24em;white-space:nowrap;text-transform:uppercase}
/* The trailing tracking is balanced so the centred wordmark sits on the optical centre. */
.tpc-shell .tpc-wordmark{display:inline-flex;align-items:center;min-height:44px;justify-self:center;padding-left:.24em}
.tpc-main-nav{display:flex;align-items:center;gap:38px;justify-self:start;font-size:13px;letter-spacing:.01em}
.tpc-main-nav>a{padding:12px 0;color:#d9d4c8;transition:color var(--tpc-out) var(--tpc-ease)}
.tpc-main-nav>a[aria-current]{color:#fff;text-decoration:underline;text-decoration-color:#c78c66;text-decoration-thickness:1px;text-underline-offset:9px}
.tpc-shell-end{justify-self:end;display:flex;align-items:center}
.tpc-nav-cta{display:flex;gap:26px;align-items:center;border:1px solid #efe9d95c;padding:8px 16px;font-size:13px;letter-spacing:.01em;color:#efe9d9;transition:background-color var(--tpc-out) var(--tpc-ease),color var(--tpc-out) var(--tpc-ease),border-color var(--tpc-out) var(--tpc-ease)}
.tpc-nav-cta span{font-size:19px;line-height:1;transition:transform var(--tpc-out) var(--tpc-ease)}
/* Hover only where a pointer can hover, so touch never keeps a stale state or spends a tap. */
@media(hover:hover){
  .tpc-main-nav>a:hover{color:#fff;transition-duration:var(--tpc-in)}
  .tpc-nav-cta:hover{background-color:#efe9d9;color:#191b29;border-color:#efe9d9;transition-duration:var(--tpc-in)}
  .tpc-nav-cta:hover span{transform:translate(1.4px,-1.4px);transition-duration:var(--tpc-in)}
}
/* Keyboard gets the same orientation at once: the outline, plus the hover state. */
.tpc-main-nav>a:focus-visible{color:#fff;transition:none}
.tpc-shell .tpc-nav-cta:focus-visible{background-color:#efe9d9;color:#191b29;border-color:#efe9d9;outline-color:#efe9d9;transition:none}
.tpc-shell .tpc-nav-cta:focus-visible span{transform:translate(1.4px,-1.4px);transition:none}
/* Press: immediate, colour only, nothing moves. */
.tpc-main-nav>a:active{color:#fff;transition:none}
.tpc-nav-cta:active{background-color:#d9d4c8;color:#191b29;border-color:#d9d4c8;transition:none}
.tpc-shell .tpc-menu-open:active,.tpc-menu .tpc-menu-close:active,.tpc-menu nav a:active{color:#c78c66}
.tpc-shell .tpc-menu-open{display:none;min-height:44px;font-size:13px;letter-spacing:.02em}
/* Skip link: the house treatment (paper on ink), hidden until focused, above the fixed case header. */
.tpc-skip{position:fixed;left:20px;top:-100px;z-index:300;background:#efe9d9;color:#191b29;padding:15px;font:400 16px/1.6 TPCInter,Arial,sans-serif;text-decoration:none}
.tpc-skip:focus{top:10px}
@media print{.tpc-skip{display:none}}
.tpc-menu[hidden]{display:none}
.tpc-menu{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;max-height:100dvh;padding:0 max(var(--tpc-m),env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(var(--tpc-m),env(safe-area-inset-left));background:radial-gradient(90% 55% at 85% 0%,#2d3246 0%,transparent 70%),radial-gradient(60% 40% at 0% 100%,#3b2b2459 0%,transparent 70%),#12131c}
.tpc-menu-bar{height:var(--tpc-shell);flex:none;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee9da24}
.tpc-menu .tpc-menu-close{min-height:44px;font-size:13px}
.tpc-menu nav{display:grid;padding-top:26px}
.tpc-menu nav a{font-size:40px;font-weight:500;line-height:1.15;letter-spacing:-.045em;padding:16px 0;border-bottom:1px solid #eee9da24}
.tpc-menu nav a span{color:#c78c66}
.tpc-menu-note{margin: auto 0 0;padding-top:30px;font-size:13px;line-height:1.8;color:#c8c5bd}
.tpc-menu-note a{color:#efe9d9;text-decoration:underline;text-decoration-color:#efe9d966;text-underline-offset:4px}
/* First-paint arrival is already complete; project composition and interior styles stay local. */
.tpc-case-page .cs-hero-inner .rv,.tpc-case-page .cs-stats .rv{opacity:1;transform:none;transition:none}
.tpc-case-page .cs-hero-img{transition:none}
/* Below desktop the house phone shell takes over: wordmark and Menu; the CTA lives in the menu. */
@media(max-width:1023px){.tpc-case-page{--tpc-shell:68px}.tpc-shell-inner{grid-template-columns:1fr auto}.tpc-main-nav,.tpc-shell .tpc-nav-cta{display:none}.tpc-shell .tpc-wordmark{justify-self:start;padding-left:0}.tpc-shell .tpc-menu-open{display:block}}
@media(max-width:600px){.tpc-case-page{--tpc-m:22px;--tpc-shell:62px}.tpc-wordmark{font-size:13px;letter-spacing:.2em}.tpc-menu nav a{font-size:36px;padding:14px 0}}
@media(prefers-reduced-motion:reduce){.tpc-shell *,.tpc-menu *{transition:none!important}.tpc-nav-cta span{transform:none!important}}

/* Compact mobile notice; suspend while form controls or the menu are in use. */
@media(max-width:640px){
  #cookieBanner.cookie-banner{flex-direction:row;align-items:center;gap:12px;padding:10px 12px}
  #cookieAccept.cookie-btn{align-self:center;min-width:68px;min-height:44px;padding:0 10px}
  #cookieBanner .cookie-text{min-width:0}
  #cookieBanner.cookie-banner.notice-suspended{display:none}
}