@layer reset, components, page;
:root{
  --space-xs: 0.25rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 10rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --maxw: 1180px;
  --type-1: 0.8125rem;
  --type-2: 0.9375rem;
  --type-3: 1rem;
  --type-4: 1.125rem;
  --type-5: 1.375rem;
  --type-6: 1.75rem;
  --type-7: 2rem;
  --type-8: 2.5rem;
  --type-9: 4rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --type-10: 6.5rem;
  --type-h1: 4rem;
  --type-h2: 2rem;
  --type-h3: 1.75rem;
  --color-bg: #f9e7da;
  --space-10: 8rem;
  --space-11: 10rem;
  --font-body: 'Montserrat', sans-serif;
  --font-mono: 'Montserrat', sans-serif;
  --type-body: 1.125rem;
  --color-text: #000000;
  --font-serif: 'Inknut Antiqua', serif;
  --color-coral: #e98d5c;
  --color-focus: #6c8b0b;
  --color-lilac: #9d8bf7;
  --color-muted: #685f58;
  --color-royal: #3f63b9;
  --color-accent: #b5ef00;
  --color-border: #d9d9d9;
  --color-danger: #b3372e;
  --font-display: 'Montserrat', sans-serif;
  --type-body-lg: 1.375rem;
  --type-body-sm: 0.9375rem;
  --type-caption: 0.8125rem;
  --type-display: 6.5rem;
  --color-primary: #8047dd;
  --color-success: #2e7d4f;
  --color-surface: #ffffff;
  --color-warning: #9a6f14;
  --color-elevated: #ead9cd;
  --color-midnight: #04211f;
  --color-platinum: #efefea;
  --color-on-accent: #04211f;
  --gradient-aurora: linear-gradient(225deg,#8047dd 0%,#3f63b9 100%);
  --color-accent-ink: #577107;
  --color-on-primary: #ffffff;
  --color-on-surface: #000000;
  --color-accent-soft: #f1e8c0;
  --color-primary-ink: #8047dd;
}
@layer reset{*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
body{min-height:100vh;font-family:var(--font-body,system-ui,-apple-system,'Segoe UI',sans-serif);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;line-height:var(--leading-body,1.6)}
h1,h2,h3,h4{font-family:var(--font-display,var(--font-body));line-height:var(--leading-display,normal);letter-spacing:var(--tracking-display,normal)}
img,picture,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.psf-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}}
@layer components{/* ───────── Megaphone — "The Signal Lands" header ─────────
   Sticky Sand bar · black logo file · quiet Montserrat labels whose
   full stop (the node) drops in on hover · one purple Inknut pill with
   the pulsing node · white rich-panel services submenu · Sand sheet on mobile
   + docked full-width pill once scrolled. */

#nav { position: sticky; top: 0; z-index: 100; }
#nav *, #nav *::before, #nav *::after { box-sizing: border-box; }

/* ── the bar ── */
#nav .bar {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: var(--nav-h-pref, 76px);
  background: var(--color-bg);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow .4s cubic-bezier(.4,0,.2,1), background-color .3s ease, min-height .35s cubic-bezier(.4,0,.2,1);
}
#nav .bar-in {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-8));
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: inherit;
}

/* brand: the supplied logo file, 28px, with 'm'-height clear space */
#nav .brand {
  display: flex;
  align-items: center;
  align-self: center;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-radius: var(--space-2);
  text-decoration: none;
}
#nav .brand img { height: 28px; width: auto; display: block; }

/* links + CTA travel as one cluster: brand | cluster */
#nav .cluster {
  display: flex;
  align-items: stretch;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
}

/* ── primary links ── */
#nav .links { display: flex; align-items: stretch; }
#nav .links > ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch;
  gap: clamp(var(--space-5), 2.6vw, var(--space-7));
}
#nav .links > ul > li { position: relative; display: flex; align-items: center; }

#nav .lnk {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-2);
  letter-spacing: 0;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--space-2);
}
/* the node: a full stop that lands on hover / marks the current page */
#nav .lbl::after {
  content: "";
  display: inline-block;
  width: .3em; height: .3em;
  margin-left: .08em;
  border-radius: 50%;
  background: var(--color-primary);
  transform: translateY(-.5em) scale(0);
  opacity: 0;
  transition: transform .38s cubic-bezier(.3,1.6,.5,1), opacity .2s ease;
}
#nav .lnk:hover .lbl::after,
#nav .lnk:focus-visible .lbl::after,
#nav .lnk[aria-current="page"] .lbl::after,
#nav .has-sub:hover > .lnk .lbl::after,
#nav .has-sub:focus-within > .lnk .lbl::after { transform: none; opacity: 1; }

#nav .caret {
  width: 10px; height: 6px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
#nav .has-sub:hover .caret,
#nav .has-sub:focus-within .caret { transform: rotate(180deg); }

/* ── services rich-panel ── */
#nav .sub {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-5));
  width: 28.75rem;
  padding-top: var(--space-2);          /* transparent bridge — no dead gap */
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-2));
  transition: opacity .25s ease .2s, transform .25s ease .2s, visibility 0s linear .45s;
  z-index: 5;
}
#nav .has-sub:hover > .sub,
#nav .has-sub:focus-within > .sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}
#nav .sub-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: var(--space-4) var(--space-3) var(--space-3);
  box-shadow:
    0 24px 48px -24px color-mix(in srgb, var(--color-midnight) 32%, transparent),
    0 2px 6px -2px color-mix(in srgb, var(--color-midnight) 10%, transparent);
}
#nav .sub-eyebrow {
  margin: 0 0 var(--space-2);
  padding-inline: var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--type-1);
  line-height: 1.5;
  color: var(--color-midnight);
}
#nav .sub-list { list-style: none; margin: 0; padding: 0; }
#nav .sub-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-4);
  align-items: center;
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  border-radius: 14px;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .25s cubic-bezier(.4,0,.2,1);
}
#nav .sub-row:hover,
#nav .sub-row:focus-visible { background: var(--color-bg); }
#nav .sub-row .ico { width: 32px; height: 32px; display: block; }
#nav .sub-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#nav .sub-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--type-3);
  line-height: 1.25;
}
#nav .sub-name::after {
  content: "";
  display: inline-block;
  width: .28em; height: .28em;
  margin-left: .08em;
  border-radius: 50%;
  background: var(--color-primary);
  transform: translateY(-.5em) scale(0);
  opacity: 0;
  transition: transform .38s cubic-bezier(.3,1.6,.5,1), opacity .2s ease;
}
#nav .sub-row:hover .sub-name::after,
#nav .sub-row:focus-visible .sub-name::after { transform: none; opacity: 1; }
#nav .sub-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-1);
  line-height: 1.45;
  color: var(--color-muted);
}
#nav .sub-all {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--type-2);
  color: var(--color-text);
  text-decoration: none;
  border-radius: 0 0 16px 16px;
}
#nav .sub-all svg {
  width: 18px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
#nav .sub-all:hover svg, #nav .sub-all:focus-visible svg { transform: translateX(var(--space-1)); }

/* outlined illustration icons: Midnight line, brand fills inside */
#nav .ico { fill: none; stroke: var(--color-midnight); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#nav .ico .k { fill: var(--color-accent); }
#nav .ico .c { fill: var(--color-coral); }
#nav .ico .l { fill: var(--color-lilac); }
#nav .ico .p { fill: var(--color-platinum); }

/* ── the one CTA: purple Inknut pill + the node beside it ── */
#nav .cta {
  display: inline-flex; align-items: center; align-self: center;
  gap: var(--space-3);
  text-decoration: none;
  border-radius: 999px;
}
#nav .pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--type-2);
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);
}
#nav .cta:hover .pill,
#nav .cta:focus-visible .pill {
  background: color-mix(in srgb, var(--color-primary) 86%, var(--color-midnight));
  transform: translateY(-1px);
}
#nav .node {
  position: relative;
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  transition: transform .4s cubic-bezier(.3,1.6,.5,1);
}
#nav .node::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--color-primary);
  animation: megNodePulse 3.2s cubic-bezier(.2,.6,.3,1) infinite;
}
#nav .cta:hover .node { transform: translateX(-3px) scale(1.15); }
@keyframes megNodePulse {
  0%   { transform: scale(1);   opacity: .5; }
  55%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ── burger (mobile) ── */
#nav .burger { display: none; }

/* ── focus ── */
#nav a:focus-visible,
#nav button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ── states ── */
#nav.is-scrolled .bar {
  box-shadow:
    0 14px 32px -22px color-mix(in srgb, var(--color-midnight) 42%, transparent),
    0 1px 0 0 color-mix(in srgb, var(--color-midnight) 5%, transparent);
}
#nav.is-condensed .bar { min-height: calc(var(--nav-h-pref, 76px) - var(--space-4)); }
#nav.is-condensed .brand { padding-block: var(--space-3); }

#nav[data-nav-surface="transparent"] .bar { background: transparent; box-shadow: none; }
#nav[data-nav-surface="transparent"].is-scrolled .bar {
  background: var(--color-bg);
  box-shadow: 0 14px 32px -22px color-mix(in srgb, var(--color-midnight) 42%, transparent);
}
#nav[data-nav-surface="frosted"] .bar {
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#nav[data-nav-surface="solid"] .bar {
  background: var(--color-bg);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-midnight) 8%, transparent);
}

/* ── mobile sheet + dock (hidden on desktop) ── */
#nav .nav-menu { display: none; }
#nav .nav-dock { display: none; }

@media (max-width: 1080px) {
  #nav .links > ul { gap: var(--space-5); }
  #nav .cluster { gap: var(--space-6); }
}

@media (max-width: 880px) {
  #nav .links,
  #nav .cluster > .cta { display: none; }
  #nav .cluster { align-items: center; gap: 0; }

  #nav .burger,
  #nav [data-menu-btn].burger {
    display: inline-flex;
    position: relative;
    width: 44px; height: 44px;
    margin-right: calc(-1 * var(--space-2));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
  }
  #nav .burger span {
    position: absolute;
    left: 11px;
    width: 22px; height: 2px;
    border-radius: 2px;
    background: var(--color-text);
    top: 50%;
    transition: transform .42s cubic-bezier(.6,0,.2,1);
  }
  #nav .burger span:nth-child(1) { transform: translateY(-5px); }
  #nav .burger span:nth-child(2) { transform: translateY(4px); }
  #nav.is-open .burger span:nth-child(1) { transform: translateY(-1px) rotate(45deg); }
  #nav.is-open .burger span:nth-child(2) { transform: translateY(-1px) rotate(-45deg); }
  #nav.is-open .bar { box-shadow: none; }

  /* Sand sheet dropping from the top, under the bar */
  #nav .nav-menu {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-bg);
    padding: calc(var(--nav-h-pref, 76px) + var(--space-6)) var(--space-5) calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
    transition: transform .5s cubic-bezier(.6,0,.2,1), visibility 0s linear .5s;
  }
  #nav.is-open .nav-menu {
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s, 0s;
  }

  #nav .m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
  #nav .m-link {
    display: inline-flex; align-items: baseline;
    min-height: 44px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--type-6);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    overflow-wrap: break-word;
  }
  #nav .m-link::after {
    content: "";
    display: inline-block;
    width: .24em; height: .24em;
    margin-left: .06em;
    border-radius: 50%;
    background: var(--color-primary);
  }
  #nav .m-sub {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0 0 0 var(--space-5);
    border-left: 1px solid var(--color-border);
    display: flex; flex-direction: column;
  }
  #nav .m-sub a {
    display: flex; align-items: center;
    min-height: 44px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--type-3);
    color: var(--color-text);
    text-decoration: none;
  }
  #nav .m-cta,
  #nav .nav-dock {
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    border-radius: 999px;
  }
  #nav .m-cta { display: flex; margin-top: var(--space-7); }
  #nav .m-cta .pill,
  #nav .nav-dock .pill { flex: 1; min-height: 52px; font-size: var(--type-3); }
  #nav .m-note {
    margin: var(--space-4) 0 0;
    max-width: 34ch;
    font-family: var(--font-serif);
    font-size: var(--type-2);
    line-height: 1.6;
    color: var(--color-midnight);
  }

  /* docked full-width pill once the page moves */
  #nav .nav-dock {
    display: flex;
    position: fixed;
    left: var(--space-4); right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(100% + var(--space-5)));
    transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease, visibility 0s linear .45s;
  }
  #nav .nav-dock .pill {
    box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--color-midnight) 45%, transparent);
  }
  #nav.is-scrolled .nav-dock {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s, 0s, 0s;
  }
  #nav.is-open .nav-dock {
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(100% + var(--space-5)));
    transition: transform .3s ease, opacity .2s ease, visibility 0s linear .3s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav *, #nav *::before, #nav *::after { transition-duration: .01ms !important; animation: none !important; }
}

#footer{
  position:relative;
  background:var(--gradient-aurora);
  color:var(--color-surface);
  font-family:var(--font-body);
  border-radius:clamp(24px,3vw,40px) clamp(24px,3vw,40px) 0 0;
  overflow:clip;
}
#footer *,#footer *::before,#footer *::after{box-sizing:border-box}
#footer .ft-inner{
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding:var(--space-9) clamp(var(--space-5),5vw,var(--space-8)) var(--space-6);
}

/* sign-off line: the footer's dominant element */
#footer .ft-sign{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-4) var(--space-7);
  padding-bottom:var(--space-7);
  border-bottom:1px solid color-mix(in srgb,var(--color-surface) 32%,transparent);
}
#footer .ft-sign-line{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:1.1;
  font-size:clamp(var(--type-5),3vw,var(--type-7));
  overflow-wrap:break-word;
  min-width:0;
}
#footer .ft-node{
  position:relative;
  display:inline-block;
  width:0.28em;
  height:0.28em;
  margin-left:0.08em;
  border-radius:50%;
  background:var(--color-surface);
  vertical-align:baseline;
}
#footer .ft-node::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--color-surface);
  opacity:0;
  animation:ftNodePulse 3.2s cubic-bezier(.4,0,.2,1) 1.2s infinite;
}
@keyframes ftNodePulse{
  0%{transform:scale(1);opacity:.7}
  60%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}
#footer .ft-sign-sub{
  margin:0;
  max-width:38ch;
  font-size:var(--type-body-sm);
  line-height:1.6;
  font-weight:600;
}

/* main grid: brand cell | link columns */
#footer .ft-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,2fr);
  gap:var(--space-7) clamp(var(--space-6),5vw,var(--space-9));
  padding-block:var(--space-8) var(--space-8);
}
#footer .ft-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-5);
  min-width:0;
}
#footer .ft-logo{
  display:inline-flex;
  align-items:center;
 
  border-radius:16px;
  text-decoration:none;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
#footer .ft-logo:hover{transform:translateY(-2px)}
#footer .ft-logo img{display:block;height:clamp(26px,3vw,40px);width:auto;max-width:100%}
#footer .ft-desc{
  margin:0;
  max-width:34ch;
  font-size:var(--type-4);
  line-height:1.55;
  font-weight:400;
}
#footer .ft-contact{
  font-size:var(--type-body-sm);
  line-height:1.7;
  font-style:normal;
  overflow-wrap:anywhere;
}
#footer .ft-contact a{color:var(--color-surface)}
#footer .ft-contact:empty,#footer .ft-social:empty{display:none}
#footer .ft-social{display:flex;flex-wrap:wrap;gap:var(--space-3)}
#footer .ft-social a{color:var(--color-surface)}

#footer .ft-links{
  display:grid;
  grid-template-columns:repeat(var(--footer-cols,3),minmax(0,1fr));
  gap:var(--space-6) var(--space-6);
  min-width:0;
}
#footer .ft-col{min-width:0}
#footer .ft-col-label{
  margin:0 0 var(--space-4);
  font-family:var(--font-serif);
  font-size:var(--type-2);
  font-weight:400;
  line-height:1.4;
  letter-spacing:0;
}
#footer .ft-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
#footer .ft-col a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:36px;
  color:var(--color-surface);
  text-decoration:none;
  font-size:var(--type-3);
  font-weight:600;
  line-height:1.3;
}
#footer .ft-col a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:6px;
  height:2px;
  background:var(--color-surface);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s cubic-bezier(.6,0,.2,1);
}
#footer .ft-col a:hover::after,#footer .ft-col a:focus-visible::after{transform:scaleX(1)}
#footer .ft-col a.ft-more{font-weight:800;text-transform:uppercase;letter-spacing:0.04em;font-size:var(--type-2)}
#footer .ft-col a.ft-more span{margin-left:var(--space-2);transition:transform .25s cubic-bezier(.4,0,.2,1)}
#footer .ft-col a.ft-more:hover span{transform:translateX(4px)}

#footer a:focus-visible{
  outline:2px solid var(--color-surface);
  outline-offset:3px;
  border-radius:4px;
}

/* legal row */
#footer .ft-legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-2) var(--space-6);
  padding-top:var(--space-5);
  border-top:1px solid color-mix(in srgb,var(--color-surface) 32%,transparent);
  font-size:var(--type-caption);
  line-height:1.6;
}
#footer .ft-legal p{margin:0}

@media (max-width:960px){
  #footer .ft-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
}
@media (max-width:640px){
  #footer .ft-inner{padding-top:var(--space-8)}
  #footer .ft-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  #footer .ft-grid{padding-block:var(--space-7)}
}
@media (max-width:400px){
  #footer .ft-links{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  #footer .ft-node::after{animation:none;opacity:0}
  #footer *{transition:none!important}
}

.ad-media{position:relative;overflow:hidden;--ad-grade:.08;background:color-mix(in oklab, #e9b48f 22%, #ffffff)}
.ad-media>img{display:block;width:100%;height:100%;object-fit:cover}
.ad-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:#e9b48f;mix-blend-mode:soft-light;opacity:var(--ad-grade)}
.ad-media::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg, #f9e7da 0%, transparent 42%, #3a2418 100%);mix-blend-mode:overlay;opacity:calc(var(--ad-grade)*.6)}

/*
 * Native scroll only. A page-level scroll-behavior:smooth fights ScrollTrigger's
 * programmatic scrolls and shows up as jitter and drift.
 */
html{scroll-behavior:auto!important}

/*
 * The accessibility floor, independent of JavaScript.
 *
 * Effects marked reduced:'skip' are never created, and effects marked
 * reduced:'instant' collapse their own durations - but this block also catches
 * any transition or keyframe the PAGE brought with it, so a reduced-motion
 * visitor is safe even if the runtime never boots.
 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important
  }
}


/* ── HOVER TIER ────────────────────────────────────────────────────────────
 * Parameters arrive as custom properties (--m-lift, --m-scale, --m-thick,
 * --m-fill-pos, --m-fill-size0, --m-hover-dur) written per element by the
 * scanner. Curves come from the brand's compiled motion tokens.
 */

/* hover.lift - the card rises, and any picture inside grows within its frame. */
[data-motion="hover.lift"][data-motion]{
  transition:transform var(--m-hover-dur,var(--m-dur-quick,.35s)) var(--m-ease-out,ease-out),
             box-shadow var(--m-hover-dur,var(--m-dur-quick,.35s)) var(--m-ease-out,ease-out);
  will-change:transform
}
[data-motion="hover.lift"][data-motion]:hover{transform:translateY(calc(var(--m-lift,6px) * -1))}
[data-motion="hover.lift"][data-motion] :is(img,video,picture){
  transition:transform var(--m-dur-standard,.5s) var(--m-ease-out,ease-out)
}
[data-motion="hover.lift"][data-motion]:hover :is(img,video,picture){transform:scale(var(--m-scale,1.04))}

/* hover.underline - the rule enters from one edge and LEAVES from the other.
 * background-position is deliberately not transitioned, so it snaps between the
 * two anchors while only the size animates. Retracing its own path is the
 * version of this effect that reads generic. */
[data-motion="hover.underline"][data-motion]{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-size:0% var(--m-thick,1.5px);
  background-position:100% 100%;
  transition:background-size var(--m-hover-dur,.35s) var(--m-ease-out,ease-out);
  text-decoration:none
}
[data-motion="hover.underline"][data-motion]:hover,
[data-motion="hover.underline"][data-motion]:focus-visible{
  background-size:100% var(--m-thick,1.5px);
  background-position:0% 100%
}

/* hover.fill - a translucent sweep of the element's OWN colour, so the label
 * stays readable on any palette and the effect needs to know nothing about the
 * brand. An author who wants a real brand colour overrides --m-fill.
 *
 * Built on a PSEUDO-ELEMENT, not the element's own background. A page that
 * styles its buttons with the the background shorthand shorthand - which is most pages -
 * resets background-image to none and would silently erase a fill built there.
 * Measured on a real generated page: .btn-primary did exactly that, the custom
 * properties were written correctly, and nothing moved.
 *
 * z-index:-1 inside an isolated stacking context paints the sweep ABOVE the
 * button's own background and BELOW its label, so the label rides through. */
[data-motion="hover.fill"][data-motion]{isolation:isolate;overflow:hidden}
[data-motion="hover.fill"][data-motion]::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--m-fill,color-mix(in srgb,currentColor 16%,transparent));
  transform:var(--m-fill-hidden,translateY(101%));
  transition:transform var(--m-hover-dur,.4s) var(--m-ease-out,ease-out)
}
[data-motion="hover.fill"][data-motion]:hover::before,
[data-motion="hover.fill"][data-motion]:focus-visible::before{transform:translate(0,0)}

/* The hover tier is decoration, so it is silent under reduced motion - but the
 * underline must still APPEAR, because for a link it is an affordance and not
 * an ornament. Instant, not absent. */
@media (prefers-reduced-motion:reduce){
  [data-motion="hover.lift"],
  [data-motion="hover.lift"][data-motion] :is(img,video,picture),
  [data-motion="hover.underline"],
  [data-motion="hover.fill"]{transition:none!important}
  [data-motion="hover.lift"][data-motion]:hover{transform:none}
  [data-motion="hover.lift"][data-motion]:hover :is(img,video,picture){transform:none}
}

/* ── PAGE CHROME ───────────────────────────────────────────────────────────
 * Not effects. A mobile menu button that hides on desktop, an anchor jump that
 * lands below a fixed nav, and the scroll rail. Defaults, never locks: no
 * !important, so a nav that designs its own breakpoint simply out-specifies it.
 */
@media(min-width:881px){[data-menu-btn]{display:none}}
section[id],footer[id]{scroll-margin-top:var(--header-h,84px)}
#m-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--color-primary,var(--color-text,currentColor));z-index:2147483646;pointer-events:none}

/* ── AMBIENT LIFE ──────────────────────────────────────────────────────────
 * Continuous idle motion so a page breathes at rest. Pure CSS, so it works
 * before and without the bundle; transform/opacity only; alternating so
 * nothing creeps away from where it was laid out. DECORATIVE layers only -
 * never on copy, which the catalog's loop-on-copy rule also refuses.
 */
@keyframes m-float{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@keyframes m-drift{from{transform:translateX(0)}to{transform:translateX(26px)}}
@keyframes m-pulse{from{opacity:.55}to{opacity:1}}
@keyframes m-sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
[data-ambient="float"]{animation:m-float 7s ease-in-out infinite alternate}
[data-ambient="drift"]{animation:m-drift 13s ease-in-out infinite alternate}
[data-ambient="pulse"]{animation:m-pulse 4.5s ease-in-out infinite alternate}
[data-ambient="sway"]{animation:m-sway 9s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){#m-progress{display:none}}
/* hover.swap - a second picture stacked over the first, crossfaded on hover.
 *
 * The stacking is done with the SIBLING combinator rather than :nth-of-type,
 * and that is what makes it generic: nth-of-type counts by tag, so it breaks
 * the moment the two pictures are not the same element, while "any media that
 * FOLLOWS other media" is true however the frame was authored. It is also pure
 * CSS, so the swap is live before the bundle parses and survives it never
 * parsing - the only thing the writer contributes is the duration. */
[data-motion="hover.swap"][data-motion]{position:relative;overflow:hidden}
[data-motion="hover.swap"][data-motion] :is(img,video,picture) ~ :is(img,video,picture),
[data-motion="hover.swap"][data-motion] [data-role="media"] ~ [data-role="media"]{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity var(--m-swap-dur,var(--m-dur-standard,.5s)) var(--m-ease-out,ease-out)
}
[data-motion="hover.swap"][data-motion]:hover :is(img,video,picture) ~ :is(img,video,picture),
[data-motion="hover.swap"][data-motion]:hover [data-role="media"] ~ [data-role="media"]{opacity:1}
/* The first picture is faded out underneath only when asked, so the default
   costs one composited layer instead of two. */
[data-motion="hover.swap"][data-motion][data-m-swap-fade] :is(img,video,picture):first-of-type{
  transition:opacity var(--m-swap-dur,var(--m-dur-standard,.5s)) var(--m-ease-out,ease-out)
}
[data-motion="hover.swap"][data-motion][data-m-swap-fade]:hover :is(img,video,picture):first-of-type{opacity:0}

/* hover.glow - a soft light that follows the cursor across the surface.
 *
 * The light is a ::before rather than a background on the element itself, for
 * the same reason hover.fill sweeps a pseudo-element: the page's own
 * "background" shorthand would erase a background-image built here, and a card
 * that sets one is the common case rather than the exception. Coordinates
 * arrive as custom properties written by the JS on pointermove. */
[data-motion="hover.glow"][data-motion]{position:relative}
[data-motion="hover.glow"][data-motion]::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:inherit;
  opacity:0;transition:opacity var(--m-dur-quick,.35s) var(--m-ease-out,ease-out);
  background:radial-gradient(var(--m-glow-size,320px) circle at var(--m-gx,50%) var(--m-gy,50%),
    var(--m-glow-tint,rgba(255,255,255,.16)),transparent 70%)
}
[data-motion="hover.glow"][data-motion]:hover::before{opacity:1}
/* Content has to sit above the light, or a card with no positioned children
   renders the glow over its own text. */
[data-motion="hover.glow"][data-motion] > *{position:relative;z-index:1}

/* ── AMBIENT LOOP TIER ─────────────────────────────────────────────────────
 * Every loop below rests at 0% AND 100% and puts its extreme at the midpoint.
 * That is not a stylistic choice: the reduced-motion floor at the top of this
 * sheet collapses animation-duration to .001ms and iteration-count to 1, so a
 * keyframe set whose 100% was the extreme would land there and STAY, leaving
 * the element permanently offset for exactly the visitor who asked for less
 * motion. Resting at both ends makes the collapse a no-op. */
@keyframes m-float{0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(var(--m-float-x,0px),var(--m-float-y,-12px),0)}}
[data-motion="ambient.float"][data-motion]{
  animation:m-float var(--m-float-dur,7s) var(--m-float-delay,0s) infinite ease-in-out;
  will-change:transform}

@keyframes m-pulse{0%,100%{transform:scale(1);opacity:var(--m-pulse-lo,.62)}
  50%{transform:scale(var(--m-pulse-scale,1.06));opacity:var(--m-pulse-hi,1)}}
[data-motion="ambient.pulse"][data-motion]{
  animation:m-pulse var(--m-pulse-dur,4.5s) var(--m-pulse-delay,0s) infinite ease-in-out;
  will-change:transform,opacity}

/* The sweep is an overlay, so the effect needs to know nothing about what it is
   sweeping across - a card, a button, a picture, a heading all take it. */
@keyframes m-shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}
[data-motion="ambient.shimmer"][data-motion]{position:relative;overflow:hidden}
[data-motion="ambient.shimmer"][data-motion]::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:linear-gradient(105deg,transparent 38%,
    var(--m-shimmer-tint,rgba(255,255,255,.16)) 50%,transparent 62%);
  background-size:250% 100%;background-repeat:no-repeat;
  animation:m-shimmer var(--m-shimmer-dur,3.6s) var(--m-shimmer-delay,0s) infinite linear}
:root{--m-ease-sig:cubic-bezier(0.22,1,0.36,1);--m-ease-in:cubic-bezier(0.4,0,1,1);--m-ease-out:cubic-bezier(0,0,0.2,1);--m-dur-quick:0.24s;--m-dur-standard:0.5s;--m-dur-slow:0.8s}}
@layer page{}
:root{--nav-h:0px;--nav-pad:0px;--nav-pull:0px;--nav-offset:0px;--nav-top:0px;--px-topbar-h:0px}
html{scroll-padding-top:var(--nav-offset)}
#nav[data-nav-position="fixed"]{position:fixed;top:var(--nav-top);left:0;right:0;bottom:auto}
#nav[data-nav-position="sticky"]{position:sticky;top:0;bottom:auto}
#nav[data-nav-position="static"]{position:relative;top:auto;left:auto;right:auto;bottom:auto}
[data-site-page-root]{padding-top:var(--nav-pad);margin-top:calc(var(--nav-pull) * -1);transition:padding-top .32s var(--m-ease-sig,ease),margin-top .32s var(--m-ease-sig,ease)}
#nav[data-nav-surface="transparent"] > [data-part="bar"], #nav[data-nav-surface="transparent"]:not(:has(> [data-part="bar"])) > :first-child:not(script):not(style){background:transparent;box-shadow:none;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#nav[data-nav-surface="frosted"] > [data-part="bar"], #nav[data-nav-surface="frosted"]:not(:has(> [data-part="bar"])) > :first-child:not(script):not(style){background:color-mix(in srgb,var(--nav-ground,#fff) 74%,transparent);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)}
#nav[data-nav-surface="solid"] > [data-part="bar"], #nav[data-nav-surface="solid"]:not(:has(> [data-part="bar"])) > :first-child:not(script):not(style){background:var(--nav-ground,#fff)}
#nav[data-nav-surface="transparent"][data-nav-ink="light"] > [data-part="bar"], #nav[data-nav-surface="transparent"][data-nav-ink="light"]:not(:has(> [data-part="bar"])) > :first-child:not(script):not(style){color:#fff}
#nav[data-nav-surface="transparent"][data-nav-ink="light"] > [data-part="bar"] :is(a,button,span,svg):not([data-part="cta"]):not([data-part="cta"] *), #nav[data-nav-surface="transparent"][data-nav-ink="light"]:not(:has(> [data-part="bar"])) > :first-child:not(script):not(style) :is(a,button,span,svg):not([data-part="cta"]):not([data-part="cta"] *){color:inherit}
#nav[data-nav-edge="none"] > [data-part="bar"], #nav[data-nav-edge="none"]:not(:has(> [data-part="bar"])) > :first-child:not(script):not(style){box-shadow:none;border-bottom-color:transparent}
#nav[data-nav-edge="hairline"] > [data-part="bar"], #nav[data-nav-edge="hairline"]:not(:has(> [data-part="bar"])) > :first-child:not(script):not(style){box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--nav-ink,#000) 14%,transparent)}
#nav[data-nav-edge="shadow"] > [data-part="bar"], #nav[data-nav-edge="shadow"]:not(:has(> [data-part="bar"])) > :first-child:not(script):not(style){box-shadow:0 1px 0 color-mix(in srgb,var(--nav-ink,#000) 7%,transparent),0 12px 32px -14px color-mix(in srgb,var(--nav-ink,#000) 30%,transparent)}
#nav[data-nav-scroll="stay"] > [data-part="bar"], #nav[data-nav-scroll="stay"]:not(:has(> [data-part="bar"])) > :first-child:not(script):not(style),#nav[data-nav-scroll="stay"]{transform:none!important}
#nav[data-nav-cta="hide"] [data-part="cta"]{display:none}
#nav[data-nav-height="compact"]{--nav-h-pref:56px}#nav[data-nav-height="regular"]{--nav-h-pref:68px}#nav[data-nav-height="tall"]{--nav-h-pref:84px}
#px-topbar{position:relative;z-index:1001;display:flex;align-items:center;justify-content:center;gap:.5em;min-height:38px;padding:.55em 1.25em;background:var(--nav-ink,#111);color:var(--nav-ground,#fff);font:500 .8125rem/1.35 var(--font-body,system-ui,sans-serif);letter-spacing:.01em;text-align:center}
#px-topbar a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
@media (prefers-reduced-motion:reduce){[data-site-page-root]{transition:none}}

/* single-page chrome: phone link beside the CTA, footer notes */
#nav .tel{font-weight:700;font-size:var(--type-3);color:var(--color-text);text-decoration:none;white-space:nowrap;padding:var(--space-3) 0}
#nav .tel:hover{text-decoration:underline;text-underline-offset:.25em}
#nav .cluster{display:flex;align-items:center;gap:var(--space-6)}
@media (max-width:880px){#nav .tel{display:none}}
#footer .ft-grid{align-items:start}
#footer .ft-notes{display:grid;gap:var(--space-4);max-width:62ch}
#footer .ft-notes p{margin:0;font-size:var(--type-2);line-height:1.65;color:color-mix(in srgb,var(--color-surface) 88%,transparent)}
#footer .ft-desc a{color:var(--color-surface)}
@media (max-width:880px){#footer .ft-inner{padding-bottom:calc(var(--space-9) + env(safe-area-inset-bottom,0px))}}
@layer components{#footer .ft-inner{padding-top:var(--space-8)}}
@media (max-width:880px){@layer components{#footer .ft-inner{padding-top:var(--space-7)}}}
@layer components{
/* touch targets on phones: footer links and social icons reach 44px */
@media (max-width:880px){
  #footer .pxs-social{gap:6px}
  #footer .pxs-social a{width:44px;height:44px;align-items:center;justify-content:center}
  #footer .ft-col a{min-height:44px;display:inline-flex;align-items:center}
}
}
@layer components{
@media (max-width:767px){
  #footer .ft-legal,#footer .ft-legal p,#footer .ft-sign-sub{font-size:.875rem;line-height:1.5}
}
}
@layer components{
@media (max-width:767px){ #footer{padding-bottom:calc(52px + 2rem)} }
}
@layer components{
#footer .ft-desc,#footer .ft-desc a{overflow-wrap:anywhere}
}