/* Retain native resource typography while keeping source/stage summaries
   readable on the institutional carousel's white background. */
/* Hydration assigns the generic dark heading color to the image-only tiles.
   Keep the captured white foreground on the photo overlay in both locales. */
/* The full institutional category name fits the native two-line badge height
   when its absolute wrapper also respects the right edge of the image. */
/* Narrow headlines sit higher over the bright sky in these two native heroes.
   Extend the existing scrim upward; preserve photographs, crops and layout. */
@media(max-width:767px){
}
/* Partnerships uses the same native photo scrim, including its upper copy area. */
.panasia-language-host {display:flex;align-items:center;gap:12px;}
[data-panasia-language] {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:32px;min-height:40px;border:1px solid currentColor;border-radius:4px;color:var(--nav-text,currentColor);font-size:11px;text-decoration:none;}
[data-panasia-language] {padding-inline:3px;white-space:nowrap;}
[data-panasia-language] a {display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:38px;color:inherit;text-decoration:none;opacity:.58;}
[data-panasia-language] a[aria-current="page"] {font-weight:700;opacity:1;}
[data-panasia-language] a:hover {opacity:1;}
[data-panasia-language] a:focus-visible {outline:2px solid currentColor;outline-offset:-2px;}
[data-panasia-language] > span {opacity:.4;}
/* Reserve intrinsic widths for the logo and locale/CTA controls before
   laying out navigation in the remaining space. */
@media(min-width:768px){
 header [class~="md:grid-layout-desktop"]:has(.panasia-language-host) {grid-template-columns:max-content minmax(0,1fr) max-content;column-gap:28px;}
 header [class~="md:grid-layout-desktop"]:has(.panasia-language-host) > * {grid-column:auto;}
 header [class~="md:grid-layout-desktop"]:has(.panasia-language-host) > nav {overflow-x:auto;}
 header [class~="md:grid-layout-desktop"]:has(.panasia-language-host) > nav > * {flex-shrink:0;white-space:nowrap;}
}
@media(max-width:767px){
 header:has([data-panasia-language]) a.FlatCta {padding-inline:8px;font-size:12px;}
 header:has([data-panasia-language]) a.FlatCta > div:not([aria-hidden]) {padding-inline:4px;}
 header:has([data-panasia-language]) a.FlatCta .cta {font-size:12px;}
 .panasia-language-host {gap:6px;}
 [data-panasia-language] {min-width:24px;min-height:44px;}
}
@media(max-width:359px){header:has([data-panasia-language]) .px-6 {padding-inline:16px;}header:has([data-panasia-language]) a.FlatCta {padding-inline:6px;}}
/* Keep the project board and the colleague pointing at it in the narrow crop. */
@media(max-width:767px){
}
/* The owned monochrome wordmark follows the source's foreground color,
   including its dark header/footer states. The SVG box stays unchanged. */
svg[viewBox="0 0 1377 261"] {
 background:currentColor;
 mask:url('/brand/panasia-wordmark.svg') center/contain no-repeat;
}
/* Source UI illustrations were inverted for the dark canvas. Documentary
   photographs retain their original colors without changing their crop/motion. */
/* GSAP parks each inactive testimonial line edge-on. Its final 90-degree
   surface can rasterize as a white hairline behind the current quote.
   Hide only that settled state; retain the source's intermediate rotation. */

/* Center the standalone headline in the visible film below the navigation.
   The pinned section starts below the announcement, so balance that offset
   against the native navigation row rather than retaining subtitle padding. */
@media(min-width:1024px){
}
@media(max-width:767px){
}

/* Keep the native closing copy/video composition, sized to the shorter brief.
   The source's 384px top padding stranded Panasia's copy beneath a blank field. */
@media(min-width:1024px){
}
@media(max-width:767px){
}

/* Keep the native five-column footer, with a readable navigation scale. */
.Footer .top {column-gap:24px;}
.Footer .top .list {
 display:flex;flex-direction:column;gap:8px;
}
.Footer .top .list a {
 font-size:clamp(1.125rem,1.4vw,1.375rem);
 line-height:1.4;
}
.Footer .top > div:has(.list) > .detail-mono {
 font-size:14px;line-height:1.4;
}
@media(min-width:768px){
 .Footer .top > div:has(.list) > .detail-mono {min-height:2.8em;}
}

/* Both locales keep the captured layout; Korean wraps at word boundaries.
   Korean heading tracking is set in the locale typography section below; the
   -.035em display tracking that stood here collided 한글 syllable blocks. */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }

/* The six core services use the existing calendar slot for an editorial
   image. Keep the native grid, card padding, radius and typography. */

@media (max-width: 767px) {
  /* The native mobile menu replaces the CTA row with its category heading. */
  .panasia-language-host:has(button[aria-expanded="true"]) [data-panasia-language] { display: none; }
}

@media(max-width:359px){
 header:has([data-panasia-language]) a[aria-label="Home"] > svg {max-width:64px;height:auto;}
 [data-panasia-language] a {min-width:20px;}
 header:has([data-panasia-language]) a.FlatCta,
 header:has([data-panasia-language]) a.FlatCta .cta {font-size:11px;}
 header:has([data-panasia-language]) a.FlatCta {max-width:112px;}
 header:has([data-panasia-language]) a.FlatCta .cta {white-space:normal;text-align:center;}
}

/* Standalone quote labels can use the empty gutter beside the source column.
   Keep the quote grid intact while avoiding a single-word trailing line. */
@media(min-width:1024px){
}

/* The source card headline and the owned takeaway retain their hierarchy;
   publication metadata reads as a quieter caption below them. */
/* Two native resource cards should fill the same centered measure as their
   section heading. Keep the captured carousel and its mobile swipe behavior. */
@media(min-width:768px){
 main div:has(> .overflow-x-hidden > .keen-slider > a.keen-slider__slide:nth-child(2):last-child):has(> .overflow-x-hidden > .keen-slider > a.keen-slider__slide h5) {
  width:100%;max-width:1280px;margin-inline:auto;padding-inline:24px;box-sizing:border-box;
 }
 main .keen-slider:has(> a.keen-slider__slide:nth-child(2):last-child):has(> a.keen-slider__slide h5) {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;cursor:auto;
 }
 main .keen-slider:has(> a.keen-slider__slide:nth-child(2):last-child):has(> a.keen-slider__slide h5) > a.keen-slider__slide {
  min-width:0!important;max-width:none!important;width:100%!important;transform:none!important;
 }
}
@media(min-width:1024px){
 main div:has(> .overflow-x-hidden > .keen-slider > a.keen-slider__slide:nth-child(2):last-child):has(> .overflow-x-hidden > .keen-slider > a.keen-slider__slide h5) {padding-inline:32px;}
}

/* The source allows four feature columns. Center a three-item collection
   without changing its widths, order or responsive wrapping. */
@media(min-width:768px){
 main [class~="!flex"].flex-wrap:has(> [class~="md:max-w-[368px]"]:nth-child(3):last-child) {justify-content:center;}
}

/* These two captured embeds now link to the dedicated inquiry page. Their
   empty form hosts must not retain the former 1000px loading reservation. */

/* Documentary resource photos fill their existing preview frame instead of
   inheriting the source logo's 112px square presentation. */

/* The retired TIME iframe has no Panasia media replacement. Keep its native
   wrapper, but do not reserve a video-sized blank below the Polygon record. */

/* Use the captured palette's darker plum for small resource labels. The
   previous pale mauve was difficult to read on the white page. */
main .keen-slider > a:has(h5) p[class~="text-[#D1AAD7]"] {color:#72556f;}
/* Native heading balance only. No columns, card sizes, fonts, line-height,
   images, animation nodes or mobile rules are changed. Korean sibling titles
   already share a height, so these reserves are deliberately English-only.
   Route guards use the existing data-panasia-page attribute. */
@media (min-width: 1280px) {
  /* Korea / What a Korea GTM engagement can include: three native h4 slots. */

  /* Press / company overview: the existing AnimatedText line wrappers add
     0.12em to a two-line block; retain that native allowance and animation. */

  /* Press / two blue resource cards: reserve the existing two-line h2 area. */
}
/* Keep the native three-card width and 8px gap, while centering a two-card last row.
   Six tracks + span 2 reproduce (container - 2 * gap) / 3 exactly.
   Scope to Protocols' two native five-child grids; mobile remains untouched. */
@media (min-width: 1024px) {
}

/* Keep the photographed speaker and branded stage inside the native case-card
   crop; the source photograph is vertical and contains a tall ceiling. */

/* A lone inquiry action should not leave a page-wide empty white form panel.
   Retain the native panel, padding and button; fit only its empty state. */

/* The 3D carousel's image host is a block, so flex-basis alone cannot size
   documentary photos. Preserve the native 12% motion overscan and card frame. */

/* Native project overtitle: maintain contrast on the existing white grid. */
[data-panasia-work-catalog] > div > p > span { color: #636363; margin-bottom: .35rem; }

/* Keep the reviewed subject inside existing responsive photo frames. */
img[src="/replica-photos/pexels-4339794.webp"] {object-position:50% 48%!important;}
img[src="/replica-photos/pexels-4339728.webp"] {object-position:50% 55%!important;}
img[src="/replica-photos/pexels-7652182.webp"] {object-position:50% 55%!important;}
img[src="/replica-photos/pexels-4226272.webp"] {object-position:50% 55%!important;}
img[src="/replica-photos/pexels-13929777.webp"] {object-position:50% 28%!important;}
img[src="/replica-photos/pexels-7653580.webp"] {object-position:50% 60%!important;}
img[src="/replica-photos/pexels-38578266.webp"] {object-position:50% 55%!important;}
img[src="/replica-photos/pexels-7652141.webp"] {object-position:50% 68%!important;}
img[src="/replica-photos/pexels-7598561.webp"] {object-position:50% 55%!important;}
img[src="/replica-photos/pexels-6953826.webp"] {object-position:50% 60%!important;}
img[src="/replica-photos/pexels-34046709.webp"] {object-position:50% 65%!important;}

img[src="/replica-photos/commons-130572554.webp"] {object-position:50% 45%!important;}

/* Reading descriptions need body-copy contrast on the white native gallery. */

/* The native case CTA uses the light page surface. */
/* Keen positions the looped tail from its own 32px spacing; a CSS column gap would stack the last slide over the first. */
/* The captured closing link is coloured for a dark source page; this case page keeps the light surface. */

/* About: the native theme switches to dark while the metrics module is in view; its captured heading and eyebrow carry fixed light-page colours. */

/* Work: wide ium Labs key visuals keep their whole frame inside the captured 4:3 card instead of cropping words at the edges. */

/* Decision framework: every source label in the reference list reads as a link, whichever way the captured markup nests the anchor. */

/* KOL: the captured perspective tiles keep a white surface; the inactive glyph mask needs a dark current colour to be visible. */

/* Briefs: the captured lead tile is the light variant (dark title over a white-tinted image); with photographic covers the title must read like its siblings. */

/* KOL: the captured section heading clamps to two lines; at 390 the sentence needs three, so the clamp cut it mid-word. */
@media (max-width:767px){}

/* OpenLedger: five workstream tabs sit in one captured row; below 420px the source padding pushed the last label past the edge. */
@media (max-width:420px){}

/* PR & Events: the captured section title renders below its own card titles; restore the source section scale. */
@media (min-width:1024px){}

/* Korean ascenders need room: captured headings set line-height equal to the font size, which clips 한글 above the cap line. */
html[data-panasia-locale="ko"] main [class*="leading-[1.0"],html[data-panasia-locale="ko"] main [class*="leading-[1.1"],html[data-panasia-locale="ko"] main .leading-none {line-height:1.28 !important;}

/* Closing CTA: the label shares the pill's entry animation; keep it painted so the button is never a blank pill mid-scroll. */
main a.FlatCta span.cta {opacity:1 !important;}

/* Market entry: the captured table renders an unavailable row in italic placeholder type. This row now carries real content, so it takes the same chip shape as the nine rows above it. */

/* Mobile menu: the captured row centres its label, which only shows when a label wraps. Panasia's longest section name wraps to two lines, so the rows read as one list. */
@media (max-width:767px){header button.w-full.justify-between > span {text-align:left;}}

/* Readable native chat illustration: preserve its bubbles and ranking stack. */
@media(max-width:639px){
}
/* Only a native tooltip's active owner is highlighted; keyboard and touch users can open its existing note. */
/* Case thumbnails identify the cited work rather than implying photographs prove a result. */

/* Show the same native, state-linked tab labels above the mobile swipe panel. */
@media(max-width:1023px){
}

/* Desks: retain all three native 764:560 frames and their existing UI slots.
   Raise micro-labels modestly; broad font enlargement clips the fixed artwork. */

/* Optical corrections inside the existing historical-project logo slots.
   Intrinsic image boxes, native slot spacing and provenance copy stay intact. */
/* The white Polygon wordmark disappears on the native pale resource tile.
   Recolour its alpha silhouette and balance the two wide marks with square peers. */

/* Community & PR: keep the captured 56px icon tile and 24px monochrome glyph.
   Reuse existing deliveryPaths from community-services.mjs for the eight
   working-material roles. Attribute selectors cover EN/KO and Show More.
   Only these material cards change; typography, cards and pagination stay native. */
/* Community Playbook: Open book. */
/* AMA Run of Show: Clipboard. */
/* Announcement Pack: Megaphone. */
/* Product Explainers: Document. */
/* Media Coverage Record: Chart. */
/* Partner Announcements: Envelope. */
/* Content Review: Document check. */
/* Institutional Briefing: Briefcase. */

/* Static readability is an accessibility preference, not a mobile default.
   Normal mobile scrolling retains the native entrance and word reveal.
   Measured on the built site 2026-09-16 after the `max-width:767px` half was
   dropped: the reveal runs at 375px exactly as it does at 1440px, word opacities
   stepping 1, 1, 1, 0.8, 0.6, 0.2, 0.1 as the panel enters view. Reduced motion
   still needs the override because the reveal is scroll-linked — without GSAP
   the words stay at opacity 0 and the statement reads as an empty panel. */
@media(prefers-reduced-motion:reduce) {
}
/* The same dark press tiles already use this white mark in the middle pair. */
@media(max-width:767px) {
 /* Restore readable UI in the same three desks illustration slots. */
 /* Keep genuine action controls comfortably tappable. */
 footer .detail-mono {font-size:12px;line-height:1.5;}
 footer .detail-mono :is(a,.cursor-pointer) {display:inline-flex;align-items:center;min-height:44px;}
 /* PR retains every card and image while removing excessive mobile gaps. */
 /* Retain the complete closing brief inside its existing CTA heading slot. */
 /* Technical SVG author supplies larger mobile labels in the same plate. */
}

/* A dedicated early layer outranks the captured important utility only here. */
@layer panasia-mobile-qa {
 @media(max-width:767px) {
 }
}

/* Readable labels within the native animated Work chart. */
@media (max-width: 767px) {
}
@media (max-width: 767px) {
}

/* The fuller home statement keeps the native quote grid and desktop type.
   Scale only the mobile text so the original line masks fit the same panel. */
@media(max-width:767px) {
}

/* Increase the home orbit's visual size without changing its native controllers.
   Leave room between enlarged photos; smaller viewports retain their compact orbit. */
/* Focus multiplies this resting scale through --panasia-orbit-grow, which
   orbit-focus.js drives by attribute. Keeping growth on the one property the
   orbit already uses means a focused tile grows proportionally at every
   breakpoint instead of composing against a second transform. */
@media (min-width:1280px) {
}
@media (min-width:1440px) {
}

/* Locale typography, contrast, reach and motion. These are grouped as one
   section rather than filed beside their neighbours because each applies
   across routes, and because several settle an equal-specificity tie with an
   earlier rule in this file by being later in source order.
   Route-scoped rules keep the positive data-panasia-page guard: pageNarrativeCss
   reads the attribute value straight out of the selector text, so a guard in a
   negative context would ship the rule to that one route instead of every
   other one. Exclusions are written structurally. */

/* The published Korean face. public/brand/fonts/panasia-kr-400.woff2 is OFL
   and already served, but nothing referenced it, so every 한글 glyph fell out
   of Aeonik's Latin subset into whatever the reader's system offered. Ported
   verbatim from retained-ko; the unicode-range keeps Latin in Aeonik inside
   the same sentence. */
/* Aeonik Medium. The capture loads one Aeonik weight (400) while 43 rendered
   elements ask for 500 or 600, so the browser was synthesising bold by smearing
   the Regular outline — upstream scale.com does the same. Declared across
   500-700 so every weight above Regular resolves to a real face rather than a
   synthetic one; 700 then renders as Medium, which is lighter than asked for but
   is a drawn weight instead of a smear. Licence record in
   public/brand/fonts/AEONIK-LICENCE.md. */
@font-face{font-family:aeonik;src:url("/brand/fonts/aeonik-medium.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Panasia KR";src:url("/brand/fonts/panasia-kr-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF}
/* Captured type never names a family directly: every rule resolves through
   --font-aeonik / --font-aeonik-mono, which the two font module classes declare
   on body. Re-pointing those two properties reaches every captured utility,
   component and prose rule without touching any of them. */
html[lang="ko"] body {
 --font-aeonik:"Panasia KR","aeonik","aeonik Fallback";
 --font-aeonik-mono:"Panasia KR","mono","mono Fallback";
}

/* Korean tracking. Hangul is drawn on a fixed em square and gains nothing from
   Latin display tracking; the captured and previously authored negative values
   measured -2.24px at 64px, -1.59px at 45.6px and -1.12px at 32px, which closes
   the gap between syllable blocks. Zero it at the heading and let the captured
   .line/.word wrappers inherit — they carry no letter-spacing of their own.
   !important because the home hero and closing-CTA rules above set -.035em at
   a higher specificity for both locales. */
html[lang="ko"] :is(h1,h2,h3,h4,h5,h6) { letter-spacing:0 !important; }
/* The home hero is the one heading whose Korean line break was fitted to the
   captured tracking rather than set by the translation. Measured at 390x844 on
   the built site: with tracking zeroed its first line is 328px of glyphs plus a
   word space inside a 334px column, so it wraps and the two-line headline reads
   as three; production at -0.98em-derived tracking measures 320px and holds two
   lines. Keep the captured value here and zero it everywhere else. */
html[lang="ko"] .HomeHero :is(h1,h2) { letter-spacing:-.035em !important; }

/* Korean leading floors. 한글 vowel strokes reach above and below the Latin
   x-height band, so a leading at or near the font size clips them. Raise only
   the captured values measured under the floor — display to 1.25, navigation
   and label copy to 1.45 — so every native rhythm already above it is kept.
   .header1/.header2 are 1 and 1.05 at both breakpoints; .navigation-header-link
   is 1; .detail-mono is 1.2. The leading-* group extends the main-scoped rule
   further up this file to the header and footer. */
html[lang="ko"] :is(.header1,.header2) { line-height:1.25; }
html[lang="ko"] :is([class*="leading-[1.0"],[class*="leading-[1.1"],.leading-none) { line-height:1.28; }
html[lang="ko"] :is(.navigation-header-link,.detail-mono) { line-height:1.45; }

/* Footer column labels. The Footer is bg-black, and the captured
   text-scale-gray-30 token is #575757 — 7.2:1 on the white page body it was
   designed for, 2.91:1 here. Lift it to the grey the same system uses on dark
   surfaces (12.4:1). Scoped to the footer so #575757 keeps its meaning on
   every white surface. */
.Footer .text-scale-gray-30 { color:#c7c7c7; }

/* Card attribution lines. Home's captured cards carry an inline color:#929292
   inside a white article (3.11:1 at 16px), and About repeats the token by class
   over white and the #f2f2f2 Card. #6b6b6b holds the same quiet register at
   5.3:1 and 4.8:1. The home rule needs !important to reach an inline
   declaration, and is held to main article so the same token stays untouched
   on the black hero panel. */

/* Full-bleed photo scrims. The captured .media-overlay is a transparent-to-black
   ramp, so the band where a headline sits reaches only about 47% black and white
   type composites to 3.36:1 over a bright frame. Steepen the ramp so that band
   reaches roughly 72% while the top of the photograph keeps its authored,
   unscrimmed frame. Country heroes keep the gradient authored in
   country-film.css, and the three sections overridden at the head of this file
   keep theirs on specificity. */
.FullBleedMediaSection:not(.panasia-country-hero) .media-overlay {
 background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 28%,rgba(0,0,0,.78) 52%,#000 100%);
}

/* The mobile primary action reads as a disabled grey pill while its desktop
   twin is solid. Point the mobile tokens at the desktop pair so it reads as
   primary at every width, in both the light and dark header themes. */
header:has([data-panasia-language]) {
 --nav-mobile-demo-cta-bg:var(--nav-demo-desktop-cta-bg);
 --nav-mobile-demo-cta-text:var(--nav-demo-desktop-cta-text);
}
/* The locale switcher carried a solid 1px currentColor frame, making it the
   highest-contrast element in the mobile header — louder than the wordmark and
   the primary action. Drop it to a hairline that still clears the 3:1 boundary
   ratio in both header themes; the plain declaration is the fallback. */
[data-panasia-language] {
 border-color:currentColor;
 border-color:color-mix(in srgb,currentColor 45%,transparent);
}

/* Touch reach. Raise each header control to a 44px target without moving what
   is drawn. The dismiss control and the wordmark keep their captured 28x28 and
   80x18 boxes and gain a centred transparent overlay; the announcement bar is
   overflow-hidden and one notch under 44px, so it takes the floor too or it
   would clip that overlay — its own height feeds --announcement-offset, which
   the home hero already reads. The controls that are already flex boxes take a
   min-height the captured h-10/size-10 cannot undercut; FlatCta is
   overflow-hidden, so it takes the min-height rather than an overlay. */
@media (max-width:767px), (hover:none) and (pointer:coarse) {
 div:has(> button[aria-label="Dismiss announcement"]) { min-height:44px; }
 button[aria-label="Dismiss announcement"]::after,
 header a[aria-label="Home"]::after {
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:100%;height:100%;min-width:44px;min-height:44px;
 }
 header a.FlatCta,
 header button[aria-label="Open menu"],
 header button.navigation-header-link { min-height:44px; }
 header button[aria-label="Open menu"] { min-width:44px; }
 /* The two locale links fill the full height of their frame. A 44px-wide
    overlay is deliberately not used here: at 24px apart the two overlays would
    intersect and the later one would swallow half of its neighbour's taps. */
 .panasia-language-host [data-panasia-language] { min-height:46px; }
 [data-panasia-language] a { min-height:44px; }
}

/* Real content type floors at 12px. Matched by exact class token, never by
   substring, so a responsive twin such as md:text-[10px] cannot pull a larger
   base size down. The desks and board plates are captured illustrations whose
   micro-labels are sized against fixed artwork further up this file; they are
   excluded structurally. */
main :is([class~="text-[0.5rem]"],[class~="text-[0.625rem]"],[class~="text-[10px]"],[class~="text-[11px]"]):not([style*="aspect-ratio:764 / 560"] *):not(.build-ai-chat-window-light *) {
 font-size:12px;
}
@media (min-width:768px) {
 main :is([class~="md:text-[0.625rem]"],[class~="md:text-[10px]"],[class~="md:text-[11px]"]):not([style*="aspect-ratio:764 / 560"] *):not(.build-ai-chat-window-light *) {
  font-size:12px;
 }
}

/* Reduced motion. The build already gates its supporting films, the packed
   WebGL scene and the mobile hero in JS, but nothing neutralised the captured
   CSS transitions and keyframes; upstream does this with motion-reduce:
   utilities on each component. Durations collapse rather than disappear so an
   animation still settles on its final frame instead of stranding on frame
   zero, and iteration counts stop looping decorative keyframes. */
@media (prefers-reduced-motion:reduce) {
 *, *::before, *::after {
  animation-duration:1ms !important;
  animation-delay:0ms !important;
  animation-iteration-count:1 !important;
  transition-duration:1ms !important;
  transition-delay:0ms !important;
 }
 html { scroll-behavior:auto !important; }
}

/* The authored skip link. build.mjs prepends it to every document and marks the
   first landmark #main-content tabindex="-1"; unstyled it would print above the
   announcement bar on all 60 routes. Hidden until focused, then painted in the
   site's own type and pill radius above the sticky header and the announcement.
   The landmark's own focus ring is suppressed because a tabindex="-1" target
   would otherwise outline the whole page — the standard pairing for this
   pattern, not an outline removal. */
.panasia-skip:not(:focus) {
 position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.panasia-skip:focus {
 position:fixed;top:12px;left:12px;z-index:2147483647;
 display:inline-flex;align-items:center;min-height:44px;
 padding:0 18px;border-radius:8px;
 background:#000;color:#fff;
 font-family:var(--font-aeonik),-apple-system,Arial,sans-serif;
 font-size:14px;line-height:1.2;text-decoration:none;
 outline:2px solid #fff;outline-offset:-4px;
}
main[tabindex="-1"]:focus { outline:none; }
main[tabindex="-1"] { scroll-margin-top:105px; }

/* /protocols and /ko/protocols ship `text-#839CB2/90` — malformed Tailwind
   (missing brackets) that compiles to no CSS, so the tab labels fall back to the
   button's inline color:#000000. Each tab also ships
   `<div class="absolute w-full h-full -z-10" style="background:#000000">` with
   NO transform, so in the served HTML that panel exactly covers the button and
   all four labels render black on black: 1.00:1, present to a screen reader and
   invisible to the eye. GSAP later parks the panel with an inline
   translate(100%,100%) and the resting surface becomes #839CB2, where the black
   label reads at 7.36:1 — so this is a pre-hydration and no-JS defect, not a
   steady-state one.
   Supply the resting transform the markup omits. Verified both ways: injected
   pre-hydration it takes all four chips from 1.00:1 to 21.00:1 at both
   viewports, and once GSAP runs its inline transform wins, so the animated
   state is pixel-identical and untouched.
   (An earlier note here claimed two chips sat on white and that no CSS-only
   repair existed. Both were wrong — measured by walking for a background
   element instead of sampling the painted pixel.) */


/* Ported verbatim from the captured chunk 1hv5k4cuirvfx.css, which is dropped
   from the head below. That chunk was 24 KB on 58 routes and carried 14
   @font-face declarations for eight families nothing on this site renders —
   including the Test Manuka trial face. Of its 65 class selectors only 7 are
   ever used, and 4 of those are duplicated in the main Tailwind chunk. These
   are the 3 that are not: .light-page (a theme inversion used on 4 routes),
   .no-scrollbar (58 routes) and .prose-x (6 routes). Carried over unchanged so
   the chunk can go without taking live styling with it. */
.light-page{color:#000;background:#fff}
.light-page header:where([class*=bg-black]){color:#000!important;background-color:#fff!important}
.light-page :where(.text-white,[class*=text-white\/]){color:#000!important}
.light-page :where([class*=text-white\/30],[class*=text-white\/35],[class*=text-white\/40],[class*=text-white\/50],[class*=text-white\/60]){color:#0000007a!important}
.light-page :where([class*=text-white\/70],[class*=text-white\/75],[class*=text-white\/80]){color:#000000ad!important}
.light-page :where([class*=bg-black]):where(.text-white,[class*=text-white\/]),.light-page :where([class*=bg-black]) :where(.text-white,[class*=text-white\/]){color:#fff!important}
.light-page :where(.border-white,[class*=border-white\/]){border-color:#0000001a!important}
.light-page :where(.bg-neutral-900){background-color:#f6f6f6!important}
.light-page :where([class*="bg-white/[0.03]"],[class*="bg-white/[0.05]"],[class*=bg-white\/5]){background-color:#00000008!important}
.light-page :where([class*=bg-white\/10],[class*="bg-white/[0.10]"]){background-color:#00000014!important}
.light-page :where(.prose-invert){--tw-prose-body:#000000b3;--tw-prose-headings:#000;--tw-prose-lead:#000000b3;--tw-prose-links:#000;--tw-prose-bold:#000;--tw-prose-counters:#00000073;--tw-prose-bullets:#00000059;--tw-prose-hr:#0000001a;--tw-prose-quotes:#000000b3;--tw-prose-quote-borders:#0000002e;--tw-prose-captions:#00000073;--tw-prose-code:#000;--tw-prose-pre-code:#000000c7;--tw-prose-pre-bg:#0000000a;--tw-prose-th-borders:#0000002e;--tw-prose-td-borders:#0000001a}
.prose-x iframe,.prose-x iframe.ql-video{aspect-ratio:16/9!important;width:100%!important;height:auto!important}

/* Home orbit: hovering a tile enlarges it and names it in the centre slot.
   orbit-focus.js owns the state; this layer owns only the presentation.
   The tile scale is applied to the inner wrapper because GSAP writes `transform`
   inline on .application-item itself every frame — that wrapper is the element
   the capture already gives `transition-transform duration-300 ease-out`, and it
   carries no inline style of its own. Depth is raised here rather than inline for
   the same reason. Hiding the animated centre stack needs `!important`, which
   outranks GSAP's plain inline declarations; the owned readout sits in the same
   clipped slot so the captured overflow behaviour still governs it. */
/* The resting size of a tile is already carried by the CSS `scale` property,
   which the breakpoints above set to 1.15 and 1.3. Focus therefore multiplies
   that same property through a variable instead of adding a second `transform`:
   one property means the growth stays proportional at every breakpoint, and the
   tile keeps whatever resting size its viewport gives it. */
/* The size change is the whole point of the interaction, so reduced motion keeps
   it and drops only the travel between sizes. */
@media (prefers-reduced-motion:reduce) {
}

/* Touch targets. WCAG 2.5.8 sets the AA floor at 24x24 CSS px and exempts links
   inside a block of text, so the footer link columns (25px) and the inline prose
   links already pass. What failed the thumb test at 390px were the controls a
   reader hunts for rather than reads: the menu trigger at 40px, the announcement
   dismiss at 28px, the locale toggle at 24px wide, and the section CTAs at 35-36px.
   Measured 2026-09-17 on the built site.

   The bar controls grow their hit area through a pseudo-element rather than their
   box: an earlier attempt raised the announcement bar from 102px to 114px because
   growing the button grew the bar with it. The overlay is centred and only as
   large as it needs to be, and these three sit alone in their rows, so it cannot
   cover a neighbouring target. Standalone CTAs take real padding, which is what
   their layout expects. */
@media (max-width:767px) {
 html[data-panasia-page] header button.inline-flex[class*="size-"],
 html[data-panasia-page] [class*="z-20"] > div > a[href*="/ko"] {
  position:relative;
 }
 html[data-panasia-page] header button.inline-flex[class*="size-"]::after,
 html[data-panasia-page] [class*="z-20"] > div > a[href*="/ko"]::after {
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:max(100%,44px);height:max(100%,44px);
 }
 /* The announcement dismiss takes real size instead of an overlay: its bar clips
    overflow, so a pseudo-element only reached one edge. It is absolutely
    positioned, so its height never reaches the bar's layout — the earlier
    102px-to-114px regression came from the bar's own line-height, not from this
    button. */
 html[data-panasia-page] [class*="z-30"] > button.absolute {
  width:44px;height:44px;
 }
 /* Standalone calls to action carry their own box, so they take the height. */
 html[data-panasia-page] main button.FlatCta,
 html[data-panasia-page] main a.CMSLink[class*="FlatCta"] {
  min-height:44px;
 }
}

/* Navigation tokens are also live dependencies of the removed font bundle.
   Preserve its light/dark and transition values without restoring unused fonts.
   Both the full-screen mobile backdrop and desktop dropdowns consume them. */
[data-theme=light] body{--nav-background:white;--nav-text:black;--nav-card-background:#f5f5f5;--nav-shadow:#00000029;--nav-dropdown-background:#ffffffeb;--nav-panel-background:#f5f5f5;--nav-ctas-background:#f5f5f5;--nav-mobile-close-background:#eaeaea;--nav-login-cta-border:#c7c7c7;--nav-login-cta-bg:transparent;--nav-login-cta-text:#929292;--nav-demo-desktop-cta-bg:black;--nav-demo-desktop-cta-text:white;--nav-mobile-demo-cta-border:transparent;--nav-mobile-demo-cta-bg:#eaeaea;--nav-mobile-demo-cta-text:black;--nav-mobile-cta-wrapper-bg:white}
[data-transitioning=true] body{--nav-background:transparent}
[data-initial-chrome-theme=dark]{--nav-background:black;--nav-text:white;--nav-card-background:#0006;--nav-shadow:#00000052;--nav-dropdown-background:#212121e0;--nav-panel-background:#212121;--nav-ctas-background:#212121;--nav-mobile-close-background:#575757;--nav-login-cta-border:#575757;--nav-login-cta-bg:transparent;--nav-login-cta-text:#c7c7c7;--nav-demo-desktop-cta-bg:white;--nav-demo-desktop-cta-text:black;--nav-mobile-demo-cta-border:transparent;--nav-mobile-demo-cta-bg:#191919;--nav-mobile-demo-cta-text:white;--nav-mobile-cta-wrapper-bg:#575757}
@supports (color:lab(0% 0 0)){[data-initial-chrome-theme=dark]{--nav-card-background:lab(0% 0 0/.4)}}
[data-theme=dark] body{--nav-background:black;--nav-text:white;--nav-card-background:#0006;--nav-shadow:#00000052;--nav-dropdown-background:#212121e0;--nav-panel-background:#212121;--nav-ctas-background:#212121;--nav-mobile-close-background:#575757;--nav-login-cta-border:#575757;--nav-login-cta-bg:transparent;--nav-login-cta-text:#c7c7c7;--nav-demo-desktop-cta-bg:white;--nav-demo-desktop-cta-text:black;--nav-mobile-demo-cta-border:transparent;--nav-mobile-demo-cta-bg:#191919;--nav-mobile-demo-cta-text:white;--nav-mobile-cta-wrapper-bg:#575757}
@supports (color:lab(0% 0 0)){[data-theme=dark] body{--nav-card-background:lab(0% 0 0/.4)}}