@font-face {
  font-family:Manrope;
  src:url('fonts/manrope-variable.ttf') format('truetype');
  font-weight:200 800;
  font-display:swap
}
@font-face {
  font-family:'DM Sans';
  src:url('fonts/dm-sans-variable.ttf') format('truetype');
  font-weight:100 1000;
  font-display:swap
}
:root {
  --bg:#151618;
  --panel:#1c1d20;
  --line:#35363a;
  --text:#f2f0ed;
  --muted:#a8a7ab;
  --accent:#efb88f;
  --soft:#f0c7a9;
  color-scheme:dark;
  font-family:'DM Sans',sans-serif;
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:95px
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
img,svg {
  max-width:100%
}
img {
  display:block
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}
button:disabled {
  cursor:default
}
::selection {
  background:var(--accent);
  color:var(--bg)
}
[hidden] {
  display:none!important
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  font-family:Manrope,sans-serif;
  font-weight:500
}
h2 {
  font-size:clamp(36px,4.1vw,58px);
  line-height:1.16;
  letter-spacing:-2.2px
}
p {
  color:var(--muted)
}
.wrap {
  width:min(1360px,calc(100% - 96px));
  margin-inline:auto
}
.eyebrow {
  font:500 10px/1.5 'DM Sans',sans-serif;
  letter-spacing:1.7px;
  color:var(--muted)
}
.skip {
  position:fixed;
  top:12px;
  left:20px;
  padding:12px 20px;
  background:var(--accent);
  color:#171719;
  z-index:100
}
.skip:focus {
  top:12px
}
.skip:not(:focus) {
  clip-path:inset(50%);
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  white-space:nowrap;
}
.site-header {
  height:96px;
  width:min(1440px,calc(100% - 80px));
  margin:auto;
  display:flex;
  align-items:center;
  gap:40px;
  border-bottom:1px solid var(--line)
}
.wordmark {
  display:flex;
  align-items:center;
  font:700 29px/1 Manrope,sans-serif;
  letter-spacing:-1.5px
}
.wordmark svg {
  width:32px;
  height:32px;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.5;
  margin-right:9px;
  stroke-linecap:round;
  stroke-linejoin:round
}
.wordmark-dot {
  color:var(--accent)
}
.site-header nav {
  display:flex;
  gap:32px;
  margin:auto;
  font-size:12px
}
.site-header nav a {
  color:#bbb9bc;
  transition:color .2s
}
.site-header nav a:hover {
  color:var(--accent)
}
.header-link {
  font-size:12px;
  border:1px solid #515154;
  border-radius:5px;
  padding:10px 15px
}
.header-link span {
  margin-left:18px;
  color:var(--accent)
}
.header-link:hover {
  border-color:var(--accent)
}
.menu-toggle {
  display:none
}
.hero {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:56px;
  align-items:center;
  padding:70px 0 82px
}
.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:10px
}
.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:100%;
  flex-shrink:0
}
.hero h1 {
  font-size:clamp(58px,6.4vw,91px);
  font-weight:500;
  letter-spacing:-5px;
  line-height:1.055;
  margin:28px 0
}
.hero h1>span {
  color:var(--accent)
}
.hero-description {
  font-size:16px;
  line-height:1.8;
  max-width:435px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top:30px
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  min-height:48px;
  padding:13px 20px;
  font-size:12px;
  font-weight:600;
  border-radius:5px;
  transition:background .2s,transform .2s
}
.primary {
  background:var(--accent);
  color:#24201d
}
.primary:hover {
  background:var(--soft);
  transform:translateY(-2px)
}
.quiet-link {
  font-size:12px;
  border-bottom:1px solid #4c4d50;
  padding:9px 0
}
.quiet-link span {
  margin-left:15px;
  color:var(--accent)
}
.release-note {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  margin-top:26px
}
.tiny-cross {
  font-size:16px;
  color:#bdb6ae
}
.hero-art {
  position:relative;
  height:580px;
  border:1px solid #333337;
  border-radius:3px;
  background:#18191b
}
.hero-art>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% center;
  border-radius:2px
}
.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
}
.hero-art.video-ready .hero-video { opacity:1; }
.hero-play {
  position:absolute;
  bottom:18px;
  right:18px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 13px;
  border:1px solid #8b7970;
  border-radius:5px;
  background:#242529ed;
  color:var(--soft);
  font-size:11px;
}
.art-corner {
  position:absolute;
  pointer-events:none;
  width:20px;
  height:20px
}
.corner-top {
  top:-1px;
  left:-1px;
  border-top:1px solid #a3a0a0;
  border-left:1px solid #a3a0a0
}
.corner-bottom {
  bottom:-1px;
  right:-1px;
  border-bottom:1px solid #a3a0a0;
  border-right:1px solid #a3a0a0
}







.principles-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:26px 0;
  border-block:1px solid var(--line)
}
.principles-bar>span:first-child {
  font:500 18px Manrope,sans-serif;
  letter-spacing:-.5px
}
.principles-bar p {
  font-size:11px
}
.principles-bar i {
  font-style:normal;
  color:#59585b;
  margin-inline:20px
}
.bar-symbol {
  font-size:28px;
  color:var(--accent)
}
.workflow-section {
  padding-block:110px
}
.section-heading {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  column-gap:100px;
  row-gap:25px;
  margin-bottom:56px
}
.section-heading .eyebrow {
  grid-column:1/-1
}
.section-heading>p:last-child {
  max-width:355px;
  margin:auto 0 0 auto;
  font-size:14px;
  line-height:1.8
}
.workflow-layout {
  display:grid;
  grid-template-columns:.84fr 1.16fr;
  gap:66px;
  scroll-margin-top:120px
}
.workflow-steps {
  display:flex;
  flex-direction:column;
  justify-content:center
}
.step {
  display:grid;
  grid-template-columns:27px 1fr 16px;
  align-items:start;
  gap:18px;
  text-align:left;
  padding:28px 4px;
  background:none;
  border:0;
  border-top:1px solid var(--line)
}
.step:last-child {
  border-bottom:1px solid var(--line)
}
.step-number {
  font-size:10px;
  border:1px solid #4b4c50;
  border-radius:50%;
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  margin-top:3px
}
.step strong {
  display:block;
  font:500 21px/1.4 Manrope,sans-serif;
  letter-spacing:-.5px;
  color:#c2bfc0
}
.step small {
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
  margin-top:12px;
  max-width:295px
}
.step-arrow {
  font-size:18px;
  color:#717176;
  line-height:1.7
}
.step:hover strong,.step.is-active strong,.step.is-active .step-arrow {
  color:var(--accent)
}
.step.is-active .step-number {
  color:#1c1c1d;
  background:var(--accent);
  border-color:var(--accent)
}
.workflow-preview {
  align-self:center;
  overflow:hidden;
  border:1px solid #424349;
  border-radius:9px;
  background:#1b1c20;
  box-shadow:0 20px 50px #0002
}
.preview-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  font-size:10px;
  color:#c6c2c0
}
.preview-toolbar>span:first-child {
  display:flex;
  align-items:center;
  gap:8px
}
.preview-counter {
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted)
}
.preview-stage {
  aspect-ratio:700/420;
  position:relative;
  background:#17181b
}
.preview-stage>[data-visual] {
  position:relative;
  width:100%;
  height:100%
}
.idea-visual {
  padding:30px 36px
}
.idea-visual>img {
  width:82%;
  height:89%;
  object-fit:cover;
  transform:rotate(-5deg);
  border:5px solid #42403c;
  box-shadow:10px 10px 22px #0006
}

.prompt-slip {
  position:absolute;
  bottom:24px;
  right:24px;
  display:flex;
  align-items:center;
  gap:15px;
  background:#28282c;
  border:1px solid #545052;
  box-shadow:0 10px 30px #0005;
  border-radius:6px;
  padding:18px 20px;
  max-width:85%
}
.prompt-slip p {
  font-size:12px;
  line-height:1.7;
  color:#e7e0da
}
.prompt-symbol {
  font-size:26px;
  color:var(--accent)
}
.draft-visual>svg {
  display:block;
  width:100%;
  height:100%
}
.mini-timeline {
  position:absolute;
  left:16px;
  right:16px;
  bottom:12px;
  display:flex;
  gap:14px;
  align-items:center;
  font-size:8px;
  color:#afadb4
}
.mini-timeline>div {
  flex:1;
  display:flex;
  justify-content:space-around;
  border-top:1px solid #68616a;
  height:12px;
  padding-top:5px
}
.mini-timeline i {
  width:5px;
  height:5px;
  background:var(--accent);
  transform:rotate(45deg)
}
.mini-timeline b {
  height:3px;
  width:35px;
  background:#695347
}
.refine-visual>img {
  width:100%;
  height:100%;
  object-fit:cover
}


.preview-caption {
  padding:15px 18px;
  border-top:1px solid var(--line)
}
.preview-caption p {
  color:#d3c9c2;
  font-size:11px;
  margin-bottom:7px
}
.preview-caption>span {
  font-size:8px;
  color:var(--muted);
  letter-spacing:.2px
}
.direction-section {
  background:#1c1d20;
  padding-block:100px;
  border-block:1px solid var(--line)
}
.direction-layout {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:110px
}
.direction-layout h2 {
  margin-top:30px
}
.direction-layout h2 span {
  color:var(--accent)
}
.direction-intro {
  max-width:310px;
  font-size:13px;
  line-height:1.8;
  margin-top:25px
}
.distinctions article {
  display:grid;
  grid-template-columns:34px 1fr 15px;
  gap:22px;
  padding:26px 0;
  border-bottom:1px solid #3d3d42
}
.distinctions article:first-child {
  padding-top:0
}
.feature-symbol {
  font-size:25px;
  line-height:1.4;
  color:var(--accent)
}
.distinctions h3 {
  font-size:20px;
  letter-spacing:-.5px;
  margin-bottom:9px
}
.distinctions p {
  font-size:12px;
  line-height:1.8;
  max-width:390px
}
.row-number {
  font-size:9px;
  color:#a29d9b;
  margin-top:8px
}
.possibilities-section {
  padding-block:110px
}
.possibilities-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:45px
}
.possibilities-heading h2 {
  margin-top:24px
}
.possibilities-heading>p {
  font-size:13px;
  line-height:1.8;
  margin-bottom:4px
}
.gallery {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:24px
}
.gallery figure {
  min-width:0
}
.gallery img {
  width:100%;
  height:420px;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:3px
}
.gallery-main img {
  object-position:63% center
}
.gallery-side img {
  object-position:55% center
}
.gallery figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 0
}
.gallery figcaption div>span {
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted)
}
.gallery h3 {
  font-size:20px;
  letter-spacing:-.4px;
  margin-top:9px
}
.gallery-marker {
  font-size:25px;
  color:var(--accent)
}
.image-note {
  font-size:9px;
  line-height:1.8;
  color:#a4a1a5;
  margin-top:16px
}
.questions-section {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:110px;
  padding-block:0 110px
}
.questions-section h2 {
  margin-top:24px
}
.faq-list {
  border-top:1px solid var(--line)
}
.faq-list details {
  border-bottom:1px solid var(--line);
  padding:23px 0
}
.faq-list summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:14px
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary:after {
  content:'+';
  font-size:20px;
  font-weight:300;
  color:var(--accent)
}
.faq-list details[open] summary:after {
  content:'−'
}
.faq-list p {
  font-size:12px;
  line-height:1.9;
  padding-top:15px;
  max-width:460px
}
.closing {
  border-top:1px solid var(--line);
  padding-block:70px 85px;
  position:relative;
  text-align:center
}
.closing-star {
  font-size:55px;
  line-height:1;
  color:var(--accent);
  display:block;
  margin-bottom:22px
}
.closing h2 {
  font-size:clamp(42px,5vw,70px);
  letter-spacing:-3px;
  margin:23px 0 30px
}
.closing h2 span {
  color:var(--accent)
}
.closing-note {
  font-size:10px;
  margin-top:22px
}
.site-footer {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-block:30px
}
.site-footer .wordmark {
  font-size:25px
}
.site-footer p {
  font-size:11px
}
.site-footer>span {
  font-size:9px;
  color:var(--muted)
}
@media(min-width:1600px) {
  .hero {
    gap:86px;
    padding-block:90px 100px
  }
  .hero-art {
    height:640px
  }
  .hero h1 {
    font-size:98px
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .site-header {
    width:calc(100% - 64px)
  }
  .hero {
    gap:32px;
    padding-top:55px
  }
  .hero-art {
    height:500px
  }
  .hero h1 {
    font-size:72px;
    letter-spacing:-4px
  }
  .hero-description {
    font-size:14px
  }
  .hero-actions {
    gap:20px
  }
  .principles-bar i {
    margin-inline:12px
  }
  .section-heading {
    column-gap:45px
  }
  .workflow-layout {
    gap:35px
  }
  .step {
    gap:12px;
    padding-block:24px
  }
  .step strong {
    font-size:19px
  }
  .direction-layout,.questions-section {
    gap:60px
  }
  .gallery img {
    height:340px
  }
  .prompt-slip {
    padding:12px
  }
  .prompt-slip p {
    font-size:10px
  }
  .step small {
    font-size:11px
  }
  
  
}
@media(max-width:800px) {
  .site-header {
    height:80px
  }
  .site-header nav {
    gap:20px;
    margin-left:auto;
    margin-right:0
  }
  .header-link {
    display:none
  }
  .hero {
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .hero h1 {
    font-size:58px;
    letter-spacing:-3px
  }
  .hero-art {
    height:460px
  }
  .hero-actions {
    gap:16px
  }
  .quiet-link {
    font-size:11px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1px
  }
  .release-note {
    font-size:9px;
    max-width:250px
  }
  .hero-description {
    font-size:13px
  }
  .principles-bar p {
    font-size:10px
  }
  .principles-bar i {
    margin-inline:6px
  }
  .principles-bar>span:first-child {
    font-size:15px
  }
  .bar-symbol {
    display:none
  }
  .section-heading {
    column-gap:30px
  }
  .section-heading>p:last-child {
    font-size:12px
  }
  .workflow-layout {
    grid-template-columns:1fr;
    gap:28px
  }
  .workflow-steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
  }
  .step {
    grid-template-columns:25px 1fr;
    gap:10px;
    border-bottom:0!important
  }
  .step-arrow {
    display:none
  }
  .step small {
    font-size:11px;
    line-height:1.7;
    grid-column:1/-1
  }
  .step strong {
    font-size:16px
  }
  .step-number {
    margin-top:0
  }
  .workflow-preview {
    width:100%
  }
  .direction-layout {
    gap:35px
  }
  .direction-intro {
    font-size:12px
  }
  .distinctions article {
    gap:14px;
    grid-template-columns:24px 1fr 14px
  }
  .distinctions h3 {
    font-size:17px
  }
  .distinctions p {
    font-size:11px
  }
  .gallery img {
    height:300px
  }
  .gallery h3 {
    font-size:16px
  }
  .questions-section {
    gap:40px
  }
  .faq-list summary {
    font-size:12px
  }
  .site-footer p {
    display:none
  }
}
@media(max-width:599px) {
  :root {
    scroll-padding-top:80px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    width:calc(100% - 40px);
    height:76px;
    gap:20px;
    position:relative
  }
  .wordmark {
    font-size:26px
  }
  .wordmark svg {
    width:29px;
    height:29px
  }
  .menu-toggle {
    display:flex;
    align-items:center;
    gap:15px;
    margin-left:auto;
    padding:8px 0 8px 8px;
    background:none;
    border:0;
    font-size:12px
  }
  .menu-toggle span {
    font-size:22px;
    color:var(--accent)
  }
  .site-header nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:75px;
    padding:22px;
    background:#202124;
    border:1px solid #46464b;
    border-radius:0 0 8px 8px;
    flex-direction:column;
    gap:22px;
    z-index:20
  }
  .site-header nav.is-open {
    display:flex
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:40px;
    padding-block:45px 64px
  }
  .hero h1 {
    font-size:70px;
    letter-spacing:-4px;
    margin-top:24px;
    margin-bottom:24px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.3px
  }
  .hero-description {
    font-size:14px;
    max-width:400px
  }
  .hero-actions {
    margin-top:26px;
    gap:25px
  }
  .button {
    font-size:11px;
    gap:24px;
    min-height:46px;
    padding:12px 17px
  }
  .release-note {
    font-size:9px;
    max-width:none;
    margin-top:22px
  }
  .hero-art {
    height:auto;
    aspect-ratio:1/.94
  }
  .hero-art>img {
    object-position:65% center
  }
  
  
  
  .principles-bar {
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding-block:22px
  }
  .principles-bar p {
    font-size:9px;
    line-height:1.8
  }
  .principles-bar>span:first-child {
    font-size:17px
  }
  .principles-bar i {
    margin-inline:9px
  }
  .workflow-section,.possibilities-section {
    padding-block:70px
  }
  .section-heading {
    display:block;
    margin-bottom:30px
  }
  .section-heading h2 {
    margin-top:22px;
    font-size:38px;
    letter-spacing:-1.6px
  }
  .section-heading>p:last-child {
    font-size:13px;
    line-height:1.8;
    max-width:none;
    margin-top:22px
  }
  .workflow-steps {
    display:flex;
    gap:0
  }
  .step {
    grid-template-columns:25px 1fr 18px;
    gap:14px;
    padding:20px 0
  }
  .step-arrow {
    display:block
  }
  .step strong {
    font-size:19px
  }
  .step small {
    font-size:12px;
    margin-top:7px;
    max-width:none
  }
  .step:last-child {
    border-bottom:1px solid var(--line)!important
  }
  .workflow-layout {
    gap:30px
  }
  .preview-toolbar {
    font-size:8px;
    padding:12px
  }
  .preview-counter {
    font-size:7px
  }
  .idea-visual {
    padding:24px
  }
  
  .prompt-slip {
    bottom:15px;
    right:15px;
    padding:10px 12px;
    gap:10px
  }
  .prompt-slip p {
    font-size:9px
  }
  .prompt-symbol {
    font-size:22px
  }
  .preview-caption {
    padding:14px 12px
  }
  .preview-caption p {
    font-size:10px
  }
  .preview-caption>span {
    font-size:7px
  }
  
  .direction-section {
    padding-block:65px
  }
  .direction-layout,.questions-section {
    display:block
  }
  .direction-layout h2 {
    font-size:43px;
    letter-spacing:-1.8px;
    margin-top:22px
  }
  .direction-intro {
    font-size:13px;
    line-height:1.8;
    max-width:310px
  }
  .distinctions {
    margin-top:35px
  }
  .distinctions article {
    padding-block:24px;
    gap:18px;
    grid-template-columns:25px 1fr 12px
  }
  .distinctions article:first-child {
    padding-top:24px;
    border-top:1px solid #3d3d42
  }
  .distinctions h3 {
    font-size:19px
  }
  .distinctions p {
    font-size:12px
  }
  .possibilities-heading {
    display:block;
    margin-bottom:28px
  }
  .possibilities-heading h2 {
    font-size:39px;
    letter-spacing:-1.7px
  }
  .possibilities-heading>p {
    font-size:12px;
    margin-top:20px
  }
  .gallery {
    grid-template-columns:1fr;
    gap:22px
  }
  .gallery img {
    height:330px
  }
  .gallery h3 {
    font-size:19px
  }
  .gallery figcaption {
    padding-block:17px
  }
  .gallery figcaption div>span {
    font-size:8px
  }
  .image-note {
    font-size:9px;
    line-height:1.9;
    margin-top:20px
  }
  .questions-section {
    padding-bottom:70px
  }
  .questions-section h2 {
    font-size:39px;
    letter-spacing:-1.7px
  }
  .faq-list {
    margin-top:32px
  }
  .faq-list summary {
    font-size:13px
  }
  .faq-list details {
    padding-block:22px
  }
  .faq-list p {
    font-size:12px
  }
  .closing {
    padding-block:52px 60px
  }
  .closing-star {
    font-size:43px
  }
  .closing h2 {
    font-size:44px;
    letter-spacing:-2px;
    margin-top:20px
  }
  .closing .eyebrow {
    font-size:8px
  }
  .site-footer {
    flex-wrap:wrap;
    padding-block:25px;
    gap:20px
  }
  .site-footer .wordmark {
    font-size:24px
  }
  .site-footer>span {
    font-size:8px;
    max-width:180px;
    text-align:right
  }
}
@media(max-width:360px) {
  .hero h1 {
    font-size:62px
  }
  .hero-actions {
    gap:16px
  }
  .quiet-link {
    font-size:10px
  }
  .principles-bar i {
    margin-inline:5px
  }
  .gallery img {
    height:290px
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}

/* Shared motion can be paused from the header and follows the system preference. */
.motion-toggle {
  width:34px;
  height:34px;
  min-width:34px;
  border:1px solid var(--line);
  border-radius:50%;
  padding:7px;
  background:transparent;
  color:var(--accent);
}
.footer-legal { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.footer-legal a,.footer-legal button { font:inherit; font-size:10px; color:var(--muted); }
.footer-legal button { border:0; padding:0; background:none; }
.footer-legal a:hover,.footer-legal button:hover { color:var(--accent); }
.legal-page { max-width:900px; padding-block:75px 100px; }
.legal-page h1 { font-size:clamp(42px,6vw,68px); line-height:1.15; letter-spacing:-2.5px; margin:22px 0; }
.legal-intro { font-size:18px; line-height:1.7; }
.legal-updated { font-size:11px; margin-top:18px; }
.legal-copy { margin-top:45px; }
.legal-copy h2 { font-size:25px; letter-spacing:-.6px; margin:34px 0 16px; }
.legal-copy p,.legal-copy li { font-size:14px; line-height:1.9; }
.legal-copy p+p { margin-top:15px; }
.legal-copy a { color:var(--soft); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.legal-copy .button { text-decoration:none; color:#24201d; margin-top:20px; }
.legal-table-wrap { overflow:auto; }
.legal-copy table { border-collapse:collapse; width:100%; font-size:12px; line-height:1.7; }
.legal-copy th,.legal-copy td { padding:14px 12px; text-align:left; border:1px solid var(--line); vertical-align:top; }
.legal-copy th { color:var(--text); background:var(--panel); font-weight:500; }
.legal-copy td { color:var(--muted); }
.cookie-banner {
  position:fixed; bottom:20px; left:20px; right:20px; z-index:80;
  max-width:1150px; margin-inline:auto; display:flex; gap:35px; align-items:center;
  padding:24px 26px; background:#242529; border:1px solid #666066; border-radius:10px;
  box-shadow:0 15px 65px #0008;
}
.cookie-banner h2 { font-size:19px; letter-spacing:-.5px; margin-bottom:10px; }
.cookie-banner p { font-size:12px; line-height:1.8; max-width:565px; }
.cookie-banner a { font-size:11px; color:var(--soft); display:inline-block; margin-top:9px; }
.cookie-actions { display:flex; flex-wrap:wrap; gap:9px; min-width:295px; justify-content:flex-end; }
.cookie-actions button,.cookie-secondary { border:1px solid #8b7970; border-radius:5px; padding:10px 14px; min-height:42px; background:#303034; color:#f3ebe5; font-size:11px; }
.cookie-actions button:hover,.cookie-secondary:hover { background:#433a34; }
.cookie-actions .cookie-manage { width:100%; border:0; background:none; color:var(--soft); padding-block:5px; min-height:30px; }
.cookie-dialog { color:var(--text); background:#202124; border:1px solid #686069; border-radius:12px; width:min(560px,calc(100% - 32px)); max-height:calc(100dvh - 40px); overflow:auto; padding:28px; }
.cookie-dialog::backdrop { background:#000b; backdrop-filter:blur(4px); }
.cookie-dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.cookie-dialog h2 { font-size:27px; letter-spacing:-1px; }
.cookie-close { background:transparent; border:1px solid var(--line); border-radius:5px; font-size:22px; min-width:36px; min-height:36px; }
.cookie-dialog>p { font-size:12px; line-height:1.8; }
.cookie-category { display:flex; justify-content:space-between; align-items:center; gap:25px; padding-block:20px; border-top:1px solid var(--line); margin-top:20px; }
.cookie-category h3,.cookie-category label { font-size:15px; letter-spacing:0; color:var(--text); }
.cookie-category p { font-size:11px; margin-top:8px; line-height:1.8; }
.cookie-category>span { color:var(--soft); font-size:11px; white-space:nowrap; }
.cookie-category input { accent-color:var(--accent); width:21px; height:21px; flex-shrink:0; }
.cookie-tracking-note { border-top:1px solid var(--line); padding-top:16px; }
.cookie-dialog-actions { display:flex; align-items:center; flex-wrap:wrap; gap:15px; margin-top:24px; }
.cookie-policy-link { display:block; font-size:11px; color:var(--soft); margin-top:20px; }
@media(max-width:800px) {
  .cookie-banner { display:block; padding:21px; }
  .cookie-actions { margin-top:16px; justify-content:flex-start; min-width:0; }
  .cookie-actions .cookie-manage { width:auto; }
  .site-footer { flex-wrap:wrap; }
  .footer-legal { order:5; width:100%; gap:16px; }
}
@media(max-width:599px) {
  .cookie-banner { left:12px; right:12px; bottom:12px; padding:20px; }
  .cookie-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .cookie-actions .cookie-manage { grid-column:1/-1; }
  .cookie-banner h2 { font-size:18px; }
  .cookie-dialog { padding:23px; }
  .cookie-dialog h2 { font-size:24px; }
  .cookie-dialog-actions { align-items:stretch; }
  .cookie-dialog-actions>* { flex:1; white-space:nowrap; }
  .legal-page { padding-block:50px 70px; }
  .legal-intro { font-size:15px; }
  .legal-copy h2 { font-size:23px; }
  .legal-copy p,.legal-copy li { font-size:13px; }
}
.motion-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.motion-play { display:none; }
:root[data-motion='off'] .motion-play { display:block; }
:root[data-motion='off'] .motion-pause { display:none; }
.motion-toggle:disabled { color:var(--muted); }
.site-header { gap:28px; }
.site-header nav a { position:relative; }
.site-header nav a::after {
  content:''; position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.site-header nav a:hover::after,.site-header nav a[aria-current='page']::after { transform:scaleX(1); }
.site-header nav a[aria-current='page'] { color:var(--accent); }
.hero-art { overflow:hidden; }
.button > span,.header-link > span,.quiet-link > span { display:inline-block; transition:transform .25s ease; }
.button:hover > span,.header-link:hover > span { transform:translate(3px,-3px); }
.quiet-link:hover > span { transform:translateY(4px); }
.step { transition:padding .3s ease,background .3s ease; }
.step:hover { padding-left:10px; }
.step-arrow { transition:transform .3s ease; }
.step:hover .step-arrow { transform:translate(3px,-3px); }
.gallery figure { overflow:hidden; }
.gallery img { transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.gallery figure:hover img { transform:scale(1.025); }
.gallery-marker,.feature-symbol,.closing-star { display:inline-block; transition:transform .4s ease; }
.gallery figure:hover .gallery-marker { transform:translate(4px,-4px); }
.distinctions article:hover .feature-symbol { transform:rotate(-15deg); }
.closing:hover .closing-star { transform:rotate(30deg); }
.footer-contact { font-size:12px; color:var(--accent); }
:root[data-motion='on'] .reveal.is-visible { animation:reveal-enter .7s cubic-bezier(.2,.7,.2,1) backwards; }
:root[data-motion='on'] .hero-copy > :nth-child(2) { animation-delay:.07s; }
:root[data-motion='on'] .hero-copy > :nth-child(3) { animation-delay:.14s; }
:root[data-motion='on'] .hero-copy > :nth-child(4) { animation-delay:.21s; }
:root[data-motion='on'] .hero-copy > :nth-child(5) { animation-delay:.28s; }
:root[data-motion='on'] .workflow-preview [data-visual]:not([hidden]) { animation:scene-enter .4s ease both; }
:root[data-motion='on'] .faq-list details[open] p { animation:scene-enter .3s ease both; }
:root[data-motion='on'] .contact-star { animation:star-turn 18s linear infinite; }
:root[data-motion='off'] { scroll-behavior:auto; }
:root[data-motion='off'] *,:root[data-motion='off'] *::before,:root[data-motion='off'] *::after {
  animation:none!important; transition:none!important;
}
@keyframes reveal-enter { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes scene-enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes star-turn { to { transform:rotate(360deg); } }

.contact-main { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-block:80px; align-items:start; }
.contact-intro h1 { font-size:clamp(50px,5.2vw,72px); line-height:1.1; letter-spacing:-3px; margin:26px 0; }
.contact-intro h1 span { color:var(--accent); }
.contact-intro > p:not(.eyebrow) { max-width:355px; font-size:15px; line-height:1.8; }
.contact-art { margin-top:38px; height:230px; border-radius:6px; overflow:hidden; }
.contact-art img { width:100%; height:100%; object-fit:cover; object-position:65% 60%; }
.contact-panel { padding:34px; border:1px solid #3b3c41; border-radius:12px; background:#1c1d20; position:relative; }
.contact-panel h2 { font-size:36px; letter-spacing:-1.5px; margin-bottom:12px; }
.contact-form-intro { font-size:13px; margin-bottom:27px; padding-right:20px; }
.contact-star { position:absolute; right:32px; top:30px; font-size:30px; color:var(--accent); }
#contact-form { display:flex; flex-direction:column; }
#contact-form label { font-size:12px; margin:0 0 8px; color:#e2ddda; }
#contact-form input,#contact-form textarea {
  width:100%; border:1px solid #4b4c52; background:#151618; color:var(--text);
  padding:13px; border-radius:6px; font:inherit; font-size:14px; margin-bottom:22px;
  transition:border-color .2s,box-shadow .2s;
}
#contact-form textarea { resize:vertical; min-height:150px; }
#contact-form input:focus,#contact-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px #efb88f15; }
#contact-form input::placeholder,#contact-form textarea::placeholder { color:#86858b; }
.contact-submit { border:0; align-self:flex-start; min-width:180px; }
.contact-submit:disabled { opacity:.55; transform:none; cursor:not-allowed; }
.contact-status { font-size:12px; line-height:1.8; margin-top:18px; color:var(--soft); }
.contact-status:empty { display:none; }
.contact-status.is-error { color:#f4aaa2; }
.contact-privacy { font-size:10px; line-height:1.8; margin-top:14px; }
.field-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:1000px) {
  .site-header { gap:18px; }
  .site-header nav { gap:20px; }
  .contact-main { gap:45px; }
  .contact-panel { padding:26px; }
}
@media(max-width:800px) {
  .contact-main { grid-template-columns:1fr; gap:42px; max-width:600px; }
  .contact-intro h1 { font-size:64px; }
  .contact-art { display:none; }
}
@media(max-width:599px) {
  .site-header { gap:18px; }
  .motion-toggle { margin-left:0; }
  .contact-main { padding-block:45px 60px; }
  .contact-intro h1 { font-size:49px; letter-spacing:-2.5px; }
  .contact-intro > p:not(.eyebrow) { font-size:14px; }
  .contact-panel { padding:26px 22px; }
  .contact-panel h2 { font-size:32px; }
  .contact-star { top:24px; right:25px; }
  .contact-form-intro { font-size:12px; }
  .contact-submit { width:100%; }
  .site-footer { justify-content:space-between; }
}
