/* =============================================================================
   Kyroco brand chrome, generated by scripts/generate-brand-chrome.mjs
   from brand/design-system/chrome/chrome.css. DO NOT EDIT BY HAND: your change
   will be overwritten and the CI drift guard will fail the build.

   Linked after css/base.css on every page so the masthead and footer are styled
   on first paint and with JavaScript off. The local-nav bar and the injected CTA
   keep their CSS in js/site.js, where the cascade order they rely on survives.
   ============================================================================= */

/* ==== Topbar + desktop nav (base) ==== */
.topbar{background:var(--midnight-deep); position:sticky; top:0; z-index:var(--z-sticky);}
.topbar .row{display:flex; align-items:center; gap:32px; height:88px; max-width:var(--container-xl); margin:0 auto; padding:0 32px; box-sizing:border-box;}
.topbar .brand{display:flex; flex-direction:column; align-items:flex-start; gap:5px; justify-content:center; text-decoration:none;}

/* MASTHEAD COMPACTION (Robert, 2026-07-31: "like the anthropic.com site that
   goes from Anthropic to A").

   Scrolled away from the top the wordmark contracts to the Kco mark; back at the
   top it opens out again. site.js decides WHEN by putting .is-compact on the bar
   and does nothing else, so the whole transition lives here rather than half in
   a stylesheet and half in a script.

   IT IS A MORPH, NOT A SWAP. Three layers of one wordmark, stacked in a fixed
   slot: the K holds still and the rest of the name travels left into it, the
   part that survives arriving as "co" and the part that does not fading out on
   the way. Cross-fading two whole words was the first attempt and it read as a
   cut, because the middle of that transition is both words at half strength -
   a dissolve, not a name contracting.

   THE TIMING IS ANTHROPIC'S, MEASURED RATHER THAN GUESSED. Their masthead logo
   is a Lottie; its JSON gives 18 frames at 30fps and one easing curve on every
   property, and the dropped letters' opacity keys end at frame 9. So: 600ms for
   the travel, 300ms for the fade, cubic-bezier(0.77,0,0.175,1) throughout. Both
   halves of that matter. The fade finishing first is what clears the way, so the
   close-up reads as the word contracting rather than as letters dissolving in
   place. And the curve is an ease-IN-out: it starts slowly. The masthead used to
   run on the site's default 200ms expo-out, which puts nine tenths of the motion
   in the first sixth of an already short transition - the reason it read as a
   cut no matter what the layers underneath were doing.

   THE LAYERS REGISTER BECAUSE THEY SHARE A CANVAS. Each layer file keeps the
   full wordmark viewBox and carries only its own letters, so three images at one
   height land pixel-for-pixel where the whole wordmark puts them and the
   composite at rest IS the wordmark. Nothing here is positioned by eye.

   THE MARK DOES NOT RESIZE. It was briefly scaled down with the bar, which made
   the compact mark visibly smaller than the wordmark it came from and broke the
   illusion that one is the other. Anthropic's stays 16px in both states. Ours
   stays 44px. What reclaims the space is the row height and the tagline, which
   is the part a reader actually feels.

   The slot keeps the FULL wordmark's width so nothing reflows, which is also
   what anthropic.com does: its logo box stays 143px wide in both states and the
   compact mark simply sits left-aligned inside it.

   The morph's own timing tokens live with the rest of the brand's motion, in
   brand/design-system/colors_and_type.css, and the why is written there. */
.topbar .brand .brand-mark{
  position:relative; display:block; height:44px;
  /* The slot has to state its own width, because every layer inside it is
     absolutely positioned and an all-absolute box would collapse to nothing.
     Taken from the shared canvas rather than typed as a pixel count, so it
     stays right at whatever height the mark is drawn at. */
  aspect-ratio:2550 / 1200;
}
/* Every layer is the same full-canvas image drawn at the slot's height and
   anchored at the same origin. Registration comes from the shared viewBox, not
   from the box: left/top only, never a right/bottom that could stretch a layer
   to fit and knock it out of alignment with the others. */
/* THE WAY BACK IS NOT THE WAY OUT PLAYED BACKWARDS unless it is made to be, and
   getting that wrong is visible and looks like a bug (Robert, 2026-07-31: "when
   you scroll back up the yroco moves so slow it draws over the k").

   The travel takes 600ms and the fade 300ms, so on the way OUT the letters are
   gone early - by the time "yro" has moved far enough to reach the K it is not
   there to be seen. Run the same fade first on the way BACK and it is exactly
   inverted: the letters return to full strength while still sitting a third of
   the mark to the left, printed on top of the K, and then crawl off it.

   So the fade waits. Coming back, nothing shows for the first 300ms while the
   letters travel, and they come up over the last 300ms as they arrive - which is
   the honest mirror of going out, and it is what Anthropic's own animation does
   in reverse, since a Lottie played backwards moves its opacity keys to the end.
   CSS reads transition properties off the state being transitioned TO, so the
   delay belongs on the resting rule and the compact rule takes it away. */
.topbar .brand .brand-mark img{
  position:absolute; left:0; top:0; display:block; height:100%; width:auto;
  transform:translateX(0);
  transition:transform var(--duration-morph) var(--ease-morph),
             opacity var(--duration-morph-fade) var(--ease-morph) var(--duration-morph-fade);
}
.topbar.is-compact .brand .brand-mark img{
  transition:transform var(--duration-morph) var(--ease-morph),
             opacity var(--duration-morph-fade) var(--ease-morph) 0s;
}
/* THE WHOLE TAIL OF THE NAME MOVES, and by the same distance, so it travels as
   one piece of type rather than as letters drifting apart. That distance is not
   a chosen number: the generator measures it out of the artwork by comparing
   where the same "co" outline sits in the wordmark and in the Kco mark, and
   substitutes it here. A percentage because it is a share of the canvas, so it
   holds at any height the mark is ever drawn at.

   Anthropic converges each dropped letter individually onto the anchor, which
   needs a target position per letter. Ours has one measured target and moves
   everything to it - the same gesture, and every number in it comes from the
   artwork instead of being placed by hand. */
.topbar.is-compact .brand .mark-yro,
.topbar.is-compact .brand .mark-co{transform:translateX(-41.961%);}
/* "yro" is the part that does not survive. It goes while it travels, and it is
   gone by the halfway point - the K it would otherwise slide over is never
   reached by anything still visible. */
.topbar.is-compact .brand .mark-yro{opacity:0;}

/* The bar and the tagline move on the morph's clock too. On different timing
   they would read as two things happening at once instead of one masthead
   contracting. */
.topbar .row{transition:height var(--duration-morph) var(--ease-morph);}
/* Same asymmetry, same fix. The tagline's height opens over the full 600ms while
   its ink fades in 300ms, so without the delay it came back to full strength
   inside a two-pixel slot and was briefly a line of type sliced through the
   middle. It now waits for the room it needs. */
.topbar .brand .tagline{
  transition:opacity var(--duration-morph-fade) var(--ease-morph) var(--duration-morph-fade),
             max-height var(--duration-morph) var(--ease-morph);
  max-height:1.4em; overflow:hidden;
}
.topbar.is-compact .row{height:64px;}
.topbar.is-compact .brand .tagline{
  opacity:0; max-height:0;
  transition:opacity var(--duration-morph-fade) var(--ease-morph) 0s,
             max-height var(--duration-morph) var(--ease-morph);
}

/* Somebody who has asked for less motion gets the end state without the travel:
   the wordmark is still the Kco mark and the bar is still compact, it simply
   arrives rather than animates.

   THE COMPACT SELECTORS ARE REPEATED HERE, and they have to be. The rules that
   give the morph its direction are written on .topbar.is-compact, which outranks
   a plain .topbar no matter that this block comes later in the file - so listing
   only the resting selectors would silence the way back and leave the way out
   animating at full length. Nothing about a media query beats specificity. */
@media (prefers-reduced-motion:reduce){
  .topbar .row,
  .topbar .brand .brand-mark,
  .topbar .brand .brand-mark img,
  .topbar .brand .tagline,
  .topbar.is-compact .brand .brand-mark img,
  .topbar.is-compact .brand .tagline{transition:none;}
}
.topbar .brand .tagline{font-size:var(--text-2xs); font-weight:500; letter-spacing:0.14em; color:var(--coral); line-height:1; text-transform:none;}
/* The three-CTA cluster (UX doc section 6): Sign in is the lightest weight (a
   plain cream text link), Get started a ghost pill, and exactly one coral pill
   (Start a conversation). Site-only: Salon's masthead carries Sign in alone. */
.nav-cta-cluster{display:flex; align-items:center; gap:18px; flex-shrink:0;}
.nav-signin{font-size:var(--text-sm); font-weight:500; color:rgba(255,255,255,0.78); transition:color var(--duration-normal) var(--ease-out);}
.nav-signin:hover{color:#fff; text-decoration:underline; text-underline-offset:4px;}
.nav{display:flex; gap:28px; align-items:center; flex:1; margin-left:12px;}
.nav .nav-link{font-size:var(--text-sm); font-weight:500; color:rgba(255,255,255,0.78); position:relative; padding:6px 0;
  display:inline-flex; align-items:center; text-decoration:none; transition:color var(--duration-normal) var(--ease-out);}
.nav .nav-link:hover{color:#fff;}

.nav .nav-link.active{color:#fff; font-weight:600;}

/* The "you are here" rule. This underline used to sit at bottom:-30px, which
   parked it near the bottom edge of the 88px bar with no visible relationship
   to the label above it. It now hugs the item it belongs to. The indicator is
   driven by body data-section, so it is present on EVERY page in a section,
   including deep ones like korium-how.html and case-study.html, where the old
   page-key matching produced no indicator at all. */
.nav .nav-link.active::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--coral); border-radius:2px;}

/* An open panel also marks its trigger, so it is obvious which menu you opened
   even when you are not in that section. Deliberately distinct from .active:
   white rather than coral, and it never claims aria-current. */
.nav .nav-link[aria-expanded="true"]{color:#fff;}
.nav .nav-link[aria-expanded="true"]::before{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:rgba(255,255,255,0.34); border-radius:2px;}
.nav .nav-link.active[aria-expanded="true"]::before{content:none;}

.nav .nav-item{position:relative; display:flex; align-items:center;}

/* Five labels, a two-line wordmark and the CTA button share the 88px row.
   Tighten the gap before the bar can collide with the CTA on smaller laptops;
   below 760px the mobile rules hide the bar entirely for the drawer (site) or
   for the footer (Salon). */
@media (max-width:1120px){.nav{gap:20px; margin-left:4px;}}
@media (max-width:940px){.nav{gap:15px; margin-left:0;} .topbar .row{gap:20px;}}

.nav-caret{display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:4px solid currentColor; opacity:0.6;
  transition:opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);}
.nav .nav-link:hover .nav-caret{opacity:1;}

.nav .nav-link[aria-expanded="true"] .nav-caret{opacity:1; transform:rotate(180deg);}

/* ==== Hover panels (the apple.com / openai.com pattern) ==== */
/* Full-bleed panel dropped from the masthead; content left-aligned into the
   same container so the columns line up under the wordmark. Panels replace
   BOTH the old small dropdown and the old sticky sub-nav bar. Site only: Salon's
   funnel uses a CSS-only disclosure, which needs no JavaScript to open. */
.nav-panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--midnight-deep);
  border-top:1px solid rgba(255,255,255,0.08);
  box-shadow:0 22px 44px rgba(0,0,0,0.42);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--duration-normal) var(--ease-out),
             transform var(--duration-normal) var(--ease-out),
             visibility 0s linear var(--duration-normal);
}
.nav-panel.open{opacity:1; visibility:visible; transform:none; transition-delay:0s;}
.nav-panel-inner{
  max-width:var(--container-xl); margin:0 auto; padding:36px 32px 40px;
  display:flex; gap:72px; align-items:flex-start;
}
.nav-col{display:flex; flex-direction:column; min-width:0;}
.nav-col h3{
  font-family:var(--font-body); font-size:var(--text-2xs); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:rgba(255,255,255,0.42); margin:0 0 14px;
}
.nav-col a{
  display:flex; flex-direction:column; gap:3px; padding:9px 12px; margin-left:-12px;
  border-radius:var(--radius-sm); color:rgba(255,255,255,0.82);
  transition:background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}
.nav-col a .t{font-size:var(--text-base); font-weight:600; line-height:1.3;}
.nav-col a .n{font-size:var(--text-xs); color:rgba(255,255,255,0.5); line-height:1.4;}
.nav-col a:hover,.nav-col a:focus-visible{background:rgba(255,255,255,0.08); color:#fff; outline:none;}
.nav-col a:hover .n,.nav-col a:focus-visible .n{color:rgba(255,255,255,0.7);}

/* Page dim behind an open panel, so the panel reads as a layer rather than as
   part of the page content underneath it. */
.nav-scrim{
  position:fixed; inset:0; z-index:calc(var(--z-sticky) - 1);
  background:rgba(12,8,6,0.34); opacity:0;
  transition:opacity var(--duration-normal) var(--ease-out);
}
.nav-scrim[hidden]{display:none;}
.nav-scrim.open{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .nav-panel,.nav-scrim,.nav-caret{transition:none;}
  .nav .nav-link[aria-expanded="true"] .nav-caret{transform:none;}
}

/* ==== Footer (base) ==== */
.footer{background:var(--midnight-deep); color:rgba(255,255,255,0.65);}
.footer .top{
  max-width:var(--container-xl); margin:0 auto; padding:56px 32px 40px;
  display:grid; grid-template-columns:1.2fr 1.8fr 1fr; gap:40px; box-sizing:border-box;
}
.footer .brand img{height:26px; width:auto; margin-bottom:18px;}
.footer .tag{font-size:var(--text-sm); color:rgba(255,255,255,0.55); max-width:300px; line-height:1.6;}
.footer .col h4{
  font-family:var(--font-body); font-size:var(--text-2xs); font-weight:700;
  text-transform:uppercase; letter-spacing:var(--tracking-caps); color:rgba(255,255,255,0.45);
  margin:6px 0 16px;
}
.footer .col a{
  display:block; font-size:var(--text-sm); color:rgba(255,255,255,0.75);
  padding:6px 0; text-decoration:none; transition:color var(--duration-normal) var(--ease-out);
}
/* The Company list runs THREE ACROSS so the footer stops being taller than it
   has any reason to be (Robert, 2026-07-31). Six links stacked made that one
   column six rows deep and the whole footer with it, while the two columns
   beside it held two lines between them. Three across brings it to two rows.

   The grid above gives Company 1.8fr rather than the 1fr it used to share with
   Get in touch, because three columns inside a 1fr slot are about 90px each and
   "Use cases" wraps to two lines - which puts back the height this is meant to
   reclaim. At 1.8fr each column is roughly 140px and every label fits on one
   line. The brand cell keeps 1.2fr, still wider than the tagline's 300px cap.

   `.links` and not `.col` so it applies to the one list that is long enough to
   need it: Get in touch has two entries and would look sparse split in three.
   Column-count rather than a grid, because it is a reflow of one list and
   nothing here needs to line up with anything opposite it.

   The ladder steps down with the room: three at full width, two once the grid
   tightens, one when the footer stacks. */
.footer .col .links{column-count:3; column-gap:28px;}
.footer .col .links a{break-inside:avoid;}
@media (max-width:1000px){.footer .col .links{column-count:2;}}
@media (max-width:720px){.footer .col .links{column-count:1;}}
.footer .col a:hover{color:#fff;}
.footer .bar{border-top:1px solid rgba(255,255,255,0.10);}
.footer .bar .row{
  max-width:var(--container-xl); margin:0 auto; padding:22px 32px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:var(--text-sm); color:rgba(255,255,255,0.5); gap:20px; flex-wrap:wrap; box-sizing:border-box;
}
.footer .bar a:hover{color:rgba(255,255,255,0.85);}

/* ==== Hamburger button (site only: Salon's funnel has no drawer) ==== */
.nav-toggle{
  display:none; flex-direction:column; justify-content:space-between;
  width:28px; height:20px;
  background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.nav-toggle span{
  display:block; height:2px; background:rgba(255,255,255,0.85); border-radius:2px;
  transition:transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* ==== Mobile nav drawer (site only) ==== */
.nav-mobile{
  display:none; flex-direction:column;
  background:var(--midnight-deep);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:8px 24px 32px;
}
.nav-mobile.open{display:flex;}
.nav-mobile > a{
  font-size:var(--text-base); font-weight:500;
  color:rgba(255,255,255,0.78);
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
  text-decoration:none;
  transition:color var(--duration-normal) ease;
  display:block;
}
.nav-mobile > a:hover{color:#fff;}

/* Same "you are here" rule as the desktop bar, driven by the same section key.
   The drawer previously carried no active state at all. */
.nav-mobile > a.active{color:#fff; font-weight:700; box-shadow:inset 2px 0 0 var(--coral); padding-left:12px;}

/* Sub-list in the drawer: an always-expanded indented list of the section's
   destinations, so a visitor can jump straight to one on a tap. */
.nav-mobile-sub{
  display:flex; flex-direction:column;
  margin:2px 0 2px 4px; padding-left:14px;
  border-left:2px solid rgba(255,255,255,0.12);
}
.nav-mobile-sub a{
  font-size:var(--text-base); color:rgba(255,255,255,0.60);
  padding:11px 0; border-bottom:none; display:block;
}
.nav-mobile-sub a:hover{color:#fff;}
/* The drawer CTA stack (UX doc section 6 mobile order): Sign in rides at the
   top as a text link, then the nav, then Start a conversation (the one coral)
   stacked above the ghost Get started at the bottom. The coral fill rests on
   coral-deep for AA contrast on white labels; hover adds the glow, not a
   darker shade (the accessible state is the default state). */
.nav-mobile .nav-mobile-cta{
  margin-top:24px;
  padding:14px 26px;
  border-radius:var(--radius-full);
  background:var(--coral-deep);
  color:#fff;
  font-weight:600;
  font-size:var(--text-base);
  text-align:center;
  border-bottom:none;
  display:block;
}
.nav-mobile .nav-mobile-cta:hover{box-shadow:var(--shadow-glow-coral);}
.nav-mobile .nav-mobile-getstarted{
  margin-top:12px;
  padding:14px 26px;
  border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.9);
  font-weight:600;
  font-size:var(--text-base);
  text-align:center;
  display:block;
}
.nav-mobile .nav-mobile-getstarted:hover{border-color:rgba(255,255,255,0.45); color:#fff;}
.nav-mobile .nav-mobile-signin{
  font-size:var(--text-base);
  color:rgba(255,255,255,0.66);
  padding:12px 0;
}

/* ==== Mobile breakpoint (site) ====
   Salon's narrow-width chrome is a different shape (no drawer to open, the
   footer carries every destination), so it lives in chrome-salon.css. */
@media(max-width:760px){
  .nav{display:none !important;}
  .nav-cta-cluster{display:none !important;}
  .nav-panel{display:none !important;}
  .nav-scrim{display:none !important;}
  .nav-toggle{display:flex; margin-left:auto;}
  .topbar .row{height:72px; padding:0 20px;}
  /* The SLOT shrinks, not the images: they are sized off it, and its
     aspect-ratio carries the width down with the height. */
  .topbar .brand .brand-mark{height:36px;}
  .topbar .brand .tagline{font-size:var(--text-2xs);}
  .footer .top{grid-template-columns:1fr; gap:28px;}
  .footer .bar .row{flex-direction:column; gap:8px; text-align:center;}
}