/* CFR material pass: Template 1 adapted to the client's light, editorial brief. */
:root {
  --material-edge: rgba(64,59,55,.15);
  --material-light: rgba(244,237,230,.8);
  --material-shadow: rgba(64,59,55,.09);
  --material-radius: 4px;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: 14px;
  background: var(--alabaster);
  border-bottom: 1px solid var(--material-edge);
  box-shadow: 0 6px 24px rgba(64,59,55,.035);
}
.header-top { gap: 24px; }
.brand { width: 310px; }
.site-header nav { margin-top: 13px; padding-block: 13px; }
.site-header nav a { position: relative; padding-bottom: 2px; }
.site-header nav a[aria-current] { border-bottom-color: var(--clay); }
.site-header nav a:hover { color: inherit; text-decoration: underline; }
.hero-copy {
  isolation: isolate;
  background: none;
  padding: clamp(24px,3vw,44px);
  border-radius: var(--material-radius);
  max-width: 720px;
}
.hero-copy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--alabaster);
  border: 1px solid rgba(244,237,230,.65);
  box-shadow: inset 0 1px 0 var(--material-light), 0 18px 48px rgba(64,59,55,.1);
}
@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .site-header {
    background: rgba(244,237,230,.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .hero-copy::before {
    background: rgba(244,237,230,.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}
/* Opaque editorial surfaces: no photo is added behind locked design-only copy. */
.section.mushroom {
  background: linear-gradient(135deg,rgba(216,206,194,.8),var(--mushroom));
  border-block: 1px solid rgba(64,59,55,.06);
}
.section.mushroom > .reading {
  position: relative;
  isolation: isolate;
  padding-top: clamp(30px,4vw,58px);
  padding-bottom: clamp(30px,4vw,58px);
  width: calc(100% - 2 * var(--gutter));
  padding-inline: clamp(24px,5vw,70px);
  background: var(--alabaster);
  border: 1px solid var(--material-edge);
  border-radius: var(--material-radius);
  box-shadow: 0 14px 42px var(--material-shadow);
}
.section.mushroom > .reading::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 35% var(--sheen-y,30%),
    rgba(216,206,194,0) 0%,rgba(216,206,194,.08) 45%,rgba(216,206,194,.42) 100%);
  opacity: var(--sheen-strength,.65);
}
.section.mushroom > .reading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(244,237,230,.9),transparent);
}
.button,.mobile-cta {
  border-radius: var(--material-radius);
  box-shadow: inset 0 1px 0 rgba(244,237,230,.22),0 3px 9px rgba(64,59,55,.06);
  transition: background-color 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,transform 220ms ease;
}
.button:hover,.mobile-cta:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(244,237,230,.4),0 5px 12px rgba(64,59,55,.1);
}
.button:active,.mobile-cta:active { transform: translateY(0); }
.text-link span,.button span,.mobile-cta span { display: none; }
.text-link { text-decoration-thickness: 1px; text-underline-offset: 7px; }
.text-link:hover { text-decoration-thickness: 2px; }
.split > img,.split > figure img,.photo-pair img,.whole-team {
  border-radius: var(--material-radius);
  box-shadow: 0 10px 32px rgba(64,59,55,.09);
}
.person { padding-bottom: 24px; border-bottom: 1px solid var(--mushroom); }
.person img,.janira-portrait { border-radius: var(--material-radius); }
.person h3 { max-width: 25ch; }
.person .text-link { line-height: 1.8; }
.copy-gap { background: rgba(216,206,194,.28); border-left-color: var(--sage); }
.demo-form { border-radius: var(--material-radius); background: rgba(216,206,194,.2); }
footer { border-top: 1px solid var(--sage); box-shadow: inset 0 1px 0 rgba(244,237,230,.15); }
html { scroll-padding-top: 180px; }
@media(max-width:1050px) { .brand { width: 285px; } }
@media(max-width:760px) {
  .site-header { position: sticky; padding-top: 14px; max-height:100dvh; overflow-y:auto; }
  .brand { width: min(61vw,340px); }
  .hero-copy { padding: 22px; max-width: none; }
  .hero-copy h1 { font-size: 38px; }
  .section.mushroom > .reading { width: calc(100% - 2 * var(--gutter)); padding-inline: 23px; }
  .section.mushroom:has(> .reading) { padding-block: 35px; }
  .button:hover,.mobile-cta:hover { transform: none; }
  html { scroll-padding-top: 180px; }
}
@media(max-width:360px) { .hero-copy { padding: 18px; }.hero-copy h1 { font-size: 32px; } }
@media(prefers-reduced-motion:reduce) {
  .button,.mobile-cta { transition: none; }
  .button:hover,.mobile-cta:hover { transform: none; }
  .section.mushroom > .reading::before { opacity: .65; background-position: center; }
}
/* A tint of the approved rose retains the signature color with readable small text. */
.header-cta,.mobile-cta {
  color: var(--charcoal);
  background: #cfa9a4;
  border: 1px solid rgba(64,59,55,.25);
}
.header-cta:hover,.mobile-cta:hover { background: var(--mushroom); }

/* Transparent logo derivative: retain the original wide visual footprint. */
.brand { position:relative; aspect-ratio:1500 / 305; overflow:hidden; flex-shrink:0; }
.brand img { position:absolute; top:-35%; left:0; width:100%; height:auto; max-width:none; mix-blend-mode:normal; }
/* Keep language access inside the narrowest mobile header alongside the logo. */
@media(max-width:760px) {
  .header-top { gap:12px; }
  .brand { flex-shrink:1; min-width:0; }
  .header-tools { flex-shrink:0; }
}
.navigation-shell { display:flow-root; }