/* Shared foundation: variables, reset, global typography, navigation, and common layout rules. */
* {
  margin:0;
  padding:0;
  box-sizing:border-box
}
.axis-line {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(17px,3vw,22px);
  line-height:1.38;
  color:var(--slate);
  margin-bottom:18px;
  max-width:100%
}

.card,
.usage-card{
  border:1px solid var(--line);
  background:#fff;
  padding:var(--box-pad);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0
}

.check {
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:14.5px;
  line-height:1.55;
  color:var(--soft);
  min-width:0
}
.check input {
  margin-top:5px;
  accent-color:var(--slate)
}
.check-list {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:start
}
.check.all {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:16px;
  color:var(--ink)
}
.choice {
  display:flex;
  height:100%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.35);
  padding:var(--box-pad-sm);
  cursor:pointer;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease
}
.choice input {
  position:absolute;
  opacity:0;
  pointer-events:none
}
.choice input:checked + .choice-body .choice-name,.choice input:checked + .choice-body .choice-axis {
  color:var(--slate)
}
.choice-axis {
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  font-size:16px;
  line-height:1.35;
  color:var(--slate);
  margin-bottom:12px
}
.choice-body {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0
}
.choice-desc {
  display:block;
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:14.5px;
  line-height:1.6;
  color:var(--soft);
  min-width:0
}
.choice-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--grid-gap);
  align-items:stretch
}
.choice-name {
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:22px;
  line-height:1.18;
  color:var(--ink);
  margin-bottom:4px
}
.choice:has(input:checked) {
  border-color:var(--slate);
  box-shadow:0 0 0 1px var(--slate);
  background:rgba(236,233,225,.72)
}
.choice:hover {
  border-color:var(--slate);
  background:rgba(236,233,225,.6)
}
.contact {
  margin-top:clamp(58px,9vw,92px);
  padding-top:clamp(38px,7vw,56px);
  border-top:1px solid var(--line)
}

.eyebrow {
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:24px
}
.field label {
  display:block;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:8px;
  line-height:1.45
}
.fields {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start
}

.form-error {
  margin-top:20px;
  border:1px solid rgba(120,45,38,.25);
  background:rgba(120,45,38,.05);
  padding:16px 18px;
  font-family:'Spectral',serif;
  font-size:14px;
  line-height:1.6;
  color:#6B2E28
}
.form-error a {
  color:#6B2E28;
  text-decoration:none;
  border-bottom:1px solid rgba(107,46,40,.35)
}

.hero h1 {
  font-size:clamp(38px,7.4vw,60px);
  line-height:1.07;
  letter-spacing:-.008em;
  margin-bottom:22px
}
.hint {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:13.5px;
  line-height:1.6;
  color:var(--soft);
  margin-top:10px
}
.intro p,.method p {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:clamp(15.5px,2.5vw,17px);
  line-height:1.74;
  color:var(--ink);
  max-width:100%
}
.label {
  font-size:11.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:clamp(12px,2.5vw,18px)
}
.lang-switch {
  display:flex;
  gap:5px;
  align-items:center
}
.lang-switch .disabled {
  opacity:.35;
  cursor:not-allowed
}
.lang-switch [aria-current="page"] {
  border-color:rgba(243,241,235,.68);
  color:#F3F1EB
}
.lang-switch a,.lang-switch span {
  min-width:28px;
  height:22px;
  padding:0 5px;
  border:1px solid rgba(243,241,235,.24);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-decoration:none;
  font-family:'Spectral',serif;
  font-size:8.8px;
  letter-spacing:.05em;
  line-height:1;
  color:rgba(243,241,235,.82);
  transition:border-color .25s ease,opacity .25s ease,transform .25s ease,background .25s ease,color .25s ease
}
.lang-switch a:hover,.lang-switch a:focus-visible {
  border-color:rgba(243,241,235,.72);
  background:rgba(243,241,235,.08);
  color:#F3F1EB;
  transform:translateY(-1px)
}
.lead {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:clamp(15px,2.4vw,17px);
  line-height:1.72;
  color:var(--soft);
  margin-bottom:clamp(40px,7vw,62px);
  max-width:100%
}
.logo-card,
.suite-card,
.pat-card,
.usage-card,
.card,
.choice,
.field,
.form,
.mood,
.guard-card,
.menu-row{
  min-width:0
}
.logo-grid,
.suite-grid,
.pat-grid,
.usage-grid,
.choice-grid,
.check-list,
.fields,
.menu-row,
.tiu-row,
.marks,
.forms,
.guard-grid,
.type-system-top{
  min-width:0
}
.logo-title,
.choice-name,
.choice-axis,
.menu-row .mname,
.usage-title,
.type-system-role,
.type-system-dev,
.subgroup-title,
.label,
.sec-label,
.eyebrow{
  word-break:keep-all;
  hyphens:none
}

.method {
  margin-top:clamp(58px,9vw,92px)
}

.method p+p {
  margin-top:16px
}
.motion-stage {
  border:1px solid var(--line);
  background:#fff;
  padding:clamp(34px,6vw,64px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:220px
}

.ms-replay {
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--slate-soft);
  font-family:'Cormorant Garamond',serif;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:9px 20px;
  margin-top:26px;
  cursor:pointer;
  transition:border-color .3s,color .3s
}
.ms-replay:hover {
  border-color:var(--slate);
  color:var(--slate)
}
.note {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:14.5px;
  line-height:1.68;
  color:var(--soft);
  margin-top:16px
}

.sec-label {
  font-size:11.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--faint);
  margin:clamp(56px,8vw,88px) 0 22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line)
}
.sec-sub {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(15.5px,2.4vw,17px);
  line-height:1.55;
  color:var(--slate-soft);
  margin-bottom:26px
}
.section {
  padding:clamp(30px,5vw,42px) 0;
  border-bottom:1px solid var(--line)
}
.section-sub {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:15px;
  line-height:1.68;
  color:var(--soft);
  margin-bottom:24px;
  max-width:100%
}
.section-title {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(23px,4vw,31px);
  line-height:1.16;
  margin-bottom:10px
}
.send-row {
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
  margin-top:28px
}
.site-menu {
  position:absolute;
  left:0;
  top:100%;
  min-width:230px;
  margin-top:0;
  padding:8px 0;
  border:1px solid rgba(201,195,183,.82);
  background:rgba(243,241,235,.94);
  box-shadow:0 18px 40px rgba(25,34,58,.08);
  opacity:0;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .25s ease,transform .25s ease
}
.site-menu a {
  display:block;
  padding:10px 16px;
  font-family:'Spectral',serif;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--soft);
  text-decoration:none
}
.site-menu a:hover,.site-menu a:focus-visible {
  color:var(--ink);
  background:rgba(236,233,225,.62)
}
.site-nav {
  position:relative;
  display:inline-block;
  z-index:20;
  padding:10px 0;
  margin:-10px 0
}
.site-nav:hover .site-menu,.site-nav:focus-within .site-menu {
  opacity:1;
  pointer-events:auto;
  transform:none
}
.site-trigger {
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  width:38px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer
}
.site-trigger-logo {
  display:block;
  width:clamp(24px,2.6vw,34px);
  height:auto
}
.site-trigger:hover .site-trigger-logo,.site-trigger:focus-visible .site-trigger-logo {
  opacity:.82
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0
}

.subgroup {
  margin-top:24px;
  padding:var(--box-pad-sm);
  border:1px solid var(--line);
  background:rgba(236,233,225,.42)
}
.subgroup-title {
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:14px
}

.thumb {
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  padding:0;
  cursor:pointer;
  opacity:.52;
  transition:opacity .25s ease,border-color .25s ease;
  flex:0 0 74px;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center
}
.thumb span {
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  padding:8px;
  text-align:center
}

.thumb:hover,
.thumb:focus-visible{
  opacity:1;
  border-color:var(--slate)
}
.brand-masthead {
  height:var(--masthead-h);
  background:#151C2B;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 var(--page-x);
  position:relative
}
.brand-masthead-logo {
  display:block;
  width:clamp(90px,8vw,124px);
  height:auto;
  position:relative;
  z-index:70;
  pointer-events:none;
  transform:translateY(2px)
}
.topbar {
  position:fixed;
  top:var(--nav-initial-top);
  left:0;
  right:0;
  z-index:60;
  background:rgba(25,34,58,.14);
  border-bottom:0;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:top .34s ease,background .28s ease
}
.mb-nav-docked .topbar {
  top:0
}
.topbar-inner {
  max-width:864px;
  margin:0 auto;
  padding:11px var(--page-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}
.transition-line {
  height:1px;
  width:0;
  background:var(--slate)
}
.transition-screen {
  position:fixed;
  inset:0;
  z-index:260;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease
}
.transition-screen.run {
  opacity:1;
  visibility:visible;
  pointer-events:auto
}

.wrap {
  width:100%;
  max-width:792px;
  margin-inline:auto;
  padding-top:var(--wrap-padding-top,calc(var(--topbar-h) + clamp(46px,7vw,82px)));
  padding-bottom:max(120px,8vh);
  padding-left:var(--page-x);
  padding-right:var(--page-x)
}
.wrap.contact-wrap,.wrap.thanks-wrap {
  max-width:812px
}
:focus-visible {
  outline:2px solid var(--slate);
  outline-offset:4px
}
:root {
  --bg:#F3F1EB;
  --ink:#19223A;
  --soft:#4A5260;
  --faint:#6A7280;
  --line:#C9C3B7;
  --slate:#222E48;
  --slate-soft:#6E7A88;
  --panel:#ECE9E1;
  --topbar-h:54px;
  --masthead-h:clamp(72px,6vw,88px);
  --nav-initial-top:calc((var(--masthead-h) - var(--topbar-h)) / 2);
  --page-x:clamp(24px,5vw,40px);
  --box-pad:clamp(22px,3.5vw,32px);
  --box-pad-sm:clamp(18px,3vw,24px);
  --box-pad-lg:clamp(28px,5vw,52px);
  --inner-x:clamp(16px,3vw,22px);
  --grid-gap:16px;
  --media-fade-y:linear-gradient(180deg,
    transparent 0%,rgba(0,0,0,.06) 3%,rgba(0,0,0,.16) 7%,
    rgba(0,0,0,.34) 12%,rgba(0,0,0,.58) 18%,rgba(0,0,0,.78) 24%,
    rgba(0,0,0,.92) 29%,rgba(0,0,0,.98) 33%,#000 36%,#000 68%,
    rgba(0,0,0,.98) 72%,rgba(0,0,0,.92) 76%,rgba(0,0,0,.78) 82%,
    rgba(0,0,0,.50) 89%,rgba(0,0,0,.28) 94%,rgba(0,0,0,.10) 98%,transparent 100%);
  --media-fade-bottom:linear-gradient(180deg,
    #000 0%,#000 62%,rgba(0,0,0,.98) 67%,rgba(0,0,0,.92) 72%,
    rgba(0,0,0,.80) 78%,rgba(0,0,0,.62) 84%,rgba(0,0,0,.42) 89%,
    rgba(0,0,0,.24) 92%,rgba(0,0,0,.09) 97%,transparent 100%);
  --media-fade-waterline:linear-gradient(180deg,
    transparent 0%,rgba(0,0,0,.10) 3%,rgba(0,0,0,.30) 7%,
    rgba(0,0,0,.58) 12%,rgba(0,0,0,.82) 17%,rgba(0,0,0,.96) 22%,
    #000 26%,#000 78%,rgba(0,0,0,.96) 82%,rgba(0,0,0,.80) 87%,
    rgba(0,0,0,.54) 92%,rgba(0,0,0,.26) 96%,transparent 100%)
}
[hidden] {
  display:none
}
body {
  background:var(--bg);
  color:var(--ink);
  font-family:'Spectral',Georgia,serif;
  font-weight:400;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
button[type="submit"] {
  border:1px solid var(--slate);
  background:var(--slate);
  color:#ECE9E1;
  padding:13px 22px;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-family:'Spectral',serif;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,opacity .25s ease
}
button[type="submit"]:disabled {
  opacity:.55;
  cursor:not-allowed
}
button[type="submit"]:hover {
  background:transparent;
  color:var(--slate)
}
form {
  border-top:1px solid var(--line)
}
h1 {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(34px,6.4vw,54px);
  line-height:1.08;
  letter-spacing:-.006em;
  margin-bottom:20px
}
html {
  scroll-behavior:smooth
}
html,body {
  max-width:100%;
  overflow-x:hidden
}
input:focus,textarea:focus,select:focus {
  outline:2px solid var(--slate);
  outline-offset:3px
}
input[type="text"],input[type="email"],input[type="url"],textarea,select {
  width:100%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  padding:13px 14px;
  font-family:'Spectral',serif;
  font-size:15px;
  color:var(--ink);
  border-radius:0
}
textarea {
  min-height:150px;
  resize:vertical;
  line-height:1.6
}
.is-hidden-field {
  display:none
}
.field-spaced {
  margin-top:18px
}
.subgroup-flush {
  margin-top:0
}

@keyframes transitionLine {
  0% {
    width:0;
    opacity:1
  }
  82% {
    width:min(42vw,420px);
    opacity:1
  }
  100% {
    width:min(42vw,420px);
    opacity:0
  }
}
@keyframes hmRise {
  to {
    transform:translateY(0);
    opacity:1
  }
}
@keyframes hmDraw {
  to {
    width:84px
  }
}