@font-face { font-family: Manrope; src: url("/assets/ec/manrope-variable-4.505.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
:root { --display: Manrope, "Helvetica Neue", Helvetica, sans-serif; }
/* The reading scale stays stable across screens. Display sizes respond to the canvas. */
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 104px;
  --space-7: 168px;
  --ease-out: cubic-bezier(.22,1,.36,1);
}

.hero { min-height: 800px; height: min(100svh, 1040px); max-height: 1040px; }
.hero-editorial { padding: 136px clamp(28px, 3.2vw, 64px) 88px; }
.hero-kicker { font-size: 12px; letter-spacing: .1em; margin-bottom: 40px; }
.hero h1 { font-size: clamp(64px, 7.7vw, 148px); font-weight: 450; letter-spacing: -.075em; line-height: .94; }
.hero-description { font-size: clamp(24px, 1.9vw, 32px); line-height: 1.6; margin-top: 32px; }
.hero-detail { font-size: 14px; line-height: 1.85; margin-top: 16px; }
.hero-actions { margin-top: 28px; gap: 24px; }

.hero-bottom { font-size: 11px; }
.hero-image-label { font-size: 11px; letter-spacing: .04em; }
.hero-image-label span:last-child { font-size: 12px; }
.gallery-intro { margin-bottom: 64px; }
.gallery-intro .eyebrow,
.creative-heading > .eyebrow { font-size: 12px; letter-spacing: .12em; }
.gallery-intro > p { font-size: 16px; line-height: 1.85; max-width: 29em; }
.work-grid { gap: 24px; padding-inline: 24px; }
.work { height: clamp(440px, 40vw, 640px); border-radius: 10px; }
.work-udot,
.work-wisteria,
.work-heiwaya { grid-column: span 7; }
.work-suuta,
.work-formee,
.work-black-ivory { grid-column: span 5; }

.work-screen { bottom: 132px; }
.work-image picture,
.work-image picture img { width: 100%; height: 100%; }
/* A white room for the creative work; the optional experiment is a separate dialog. */
.creative { background: #fff; color: #181b20; padding-top: 40px; }
.creative-heading { padding-top: 104px; padding-bottom: 64px; gap: 24px 64px; }
.creative-heading > .eyebrow { color: #5d6470; }
.creative-heading > p:last-child { font-size: 16px; line-height: 1.85; color: #505964; }
.creative-stage { padding: 0 var(--gutter) 96px; }
.world-example { width: 89%; border-radius: 20px; }
.plain-example { width: 23.6%; max-width: 340px; left: var(--gutter); bottom: 0; padding: 12px; background: rgb(255 255 255 / 78%); box-shadow: inset 0 1px 0 #fff, 0 24px 64px #27314526; }
.light-caption { max-width: calc(100% - 48px); background-color: #161719b8; }
.light-caption span { font-size: 11px; margin-bottom: 8px; }
.light-caption strong { font-size: 16px; }

.fashion-studies { display: grid; grid-template-columns: .9fr 1fr 1fr 1fr; gap: 24px; margin: 104px auto 0; align-items: start; }
.fashion-studies-copy { padding: 48px 16px 0 0; }
.fashion-studies-copy .eyebrow { font: 12px var(--display); letter-spacing: .1em; color: #626975; margin-bottom: 24px; }
.fashion-studies-copy h3 { font-size: clamp(24px, 2.2vw, 36px); line-height: 1.6; letter-spacing: -.035em; }
.fashion-studies-copy > p:last-child { margin-top: 24px; font-size: 14px; line-height: 1.9; color: #515964; }
.fashion-study { min-width: 0; }
.fashion-study:nth-of-type(2) { margin-top: 64px; }
.fashion-study img { width: 100%; height: auto; border-radius: 12px; }
.fashion-study figcaption { font: 11px var(--display); letter-spacing: .08em; padding-top: 16px; color: #59616c; }
.creative-footer { padding-top: 64px; padding-bottom: 104px; gap: 32px; }


.lab-note,
.lab-unavailable { margin: 0; font-size: 14px; line-height: 1.8; padding: 20px 28px; }
.lab-unavailable { color: #626975; padding-top: 0; }
.lab-stage[data-effect="unavailable"] ~ .lab-unavailable { display: block !important; }
/* Reading and input sizes do not shrink into captions on mobile. */
.section-intro h2 { font-size: 24px; line-height: 1.5; }
.section-intro p,
.estimate > div > p:first-child { font-size: 16px; line-height: 1.85; }

.contact-copy > .eyebrow { font-size: 12px; }
.contact-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.85; }

.form-status { font-size: 15px; }

.form-notice { font-size: 13px; line-height: 1.8; }

.site-footer > a:not(.brand),
.site-footer small { font-size: 13px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .hero { height: 900px; min-height: 800px; }
  .hero-editorial { padding: 124px 24px 80px; }
  .hero-kicker { font-size: 11px; margin-bottom: 32px; text-align: center; }
  .hero h1 { font-size: 7.7vw; }
  .hero-description { font-size: 24px; }
  .hero-detail { font-size: 14px; }
  .hero-detail br { display: none; }
  .hero-actions { flex-direction: column; gap: 4px; }
  .gallery-intro { gap: 40px; }
  .gallery-intro > p { max-width: 23em; font-size: 15px; }
  .work { height: 420px; }
  .work-heiwaya,
.work-black-ivory { height: 420px; }

  .fashion-studies { grid-template-columns: 1fr 1fr 1fr; }
  .fashion-studies-copy { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; padding: 0; gap: 16px; }
  .fashion-studies-copy .eyebrow { grid-column: 1 / -1; margin: 0; }
  .fashion-studies-copy > p:last-child { margin: 0; align-self: end; }
}
@media (max-width: 760px) {
  :root { --gutter: 24px; }

  .hero { height: auto; min-height: 0; max-height: none; }
  .hero-visual { height: 86svh; min-height: 520px; max-height: 960px; }
  .hero-fashion { object-position: 50% 38%; }
  .hero-editorial { padding: 48px 24px 68px; }
  .hero-kicker { font-size: 11px; margin-bottom: 32px; }
  .hero h1 { font-size: clamp(54px, 15.7vw, 106px); line-height: .94; }
  .hero-description { font-size: 26px; margin-top: 28px; }
  .hero-detail { font-size: 14px; line-height: 1.9; max-width: 28em; margin: 16px auto 0; }
  .hero-detail br { display: none; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; }

  .hero-bottom { font-size: 10px; bottom: 22px; }
  .hero-image-label { left: 20px; bottom: 20px; padding: 12px 16px; }
  .hero-image-label span { font-size: 10px; }
  .hero-image-label span:last-child { font-size: 11px; }
  .gallery-intro { margin-bottom: 32px; }
  .gallery-intro .eyebrow { font-size: 12px; }
  .gallery-intro > p { font-size: 15px; line-height: 1.85; margin-top: 24px; }
  .work-grid { grid-template-columns: 1fr; gap: 20px; padding-inline: 16px; }
  .work { grid-column: 1 / -1; height: 480px; }
  .work-formee { height: 420px; }

  .creative { padding-top: 0; }
  .creative-heading { padding-top: 72px; padding-bottom: 40px; }
  .creative-heading h2 { font-size: clamp(32px, 8vw, 48px); }
  .creative-heading > .eyebrow { font-size: 12px; }
  .creative-heading > p:last-child { font-size: 15px; }
  .creative-stage { padding: 0 16px 76px; }
  .world-example { width: 100%; aspect-ratio: .85; border-radius: 16px; }
  .world-example picture img { object-position: 50% 46%; }
  .plain-example { width: 38.2%; max-width: 210px; left: 24px; padding: 8px; border-radius: 16px; }
  .light-caption { top: 16px; left: 16px; padding: 12px 16px; border-radius: 16px; }
  .light-caption span { font-size: 10px; }
  .light-caption strong { font-size: 14px; }

  .fashion-studies { grid-template-columns: 1fr 1fr; padding-inline: 16px; gap: 20px 16px; margin-top: 72px; }
  .fashion-studies-copy { grid-column: 1 / -1; padding: 0 8px 12px; }
  .fashion-studies-copy .eyebrow { margin-bottom: 16px; }
  .fashion-studies-copy h3 { font-size: 28px; }
  .fashion-studies-copy > p:last-child { font-size: 15px; margin-top: 16px; }
  .fashion-study:nth-of-type(2) { margin-top: 40px; }
  .fashion-study:nth-of-type(3) { grid-column: 1 / -1; width: 72%; margin-top: -20px; }
  .fashion-study figcaption { font-size: 10px; letter-spacing: .02em; padding-top: 12px; }
  .creative-footer { padding-top: 40px; padding-bottom: 72px; gap: 24px; }
  .creative-footer > p:first-child { font-size: 24px; }


  .lab-note,
.lab-unavailable { padding: 16px; font-size: 13px; }
  .section-intro h2 { font-size: 24px; }
  .section-intro p { font-size: 16px; }
  .estimate > div > p:first-child { font-size: 16px; }

  .contact-form { padding: 24px 20px; }
  .contact-copy > p:not(.eyebrow) { font-size: 16px; }
  .form-status { font-size: 15px; }

  .form-notice { font-size: 13px; }

}
@media (max-width: 370px) {

  .hero-actions { gap: 4px 16px; }
  .hero-kicker { font-size: 10px; }

}

@media (prefers-reduced-transparency: reduce) {
  .light-caption { background-color: #202225; }
  .plain-example { background-color: #fff; }
}
/* F1: opal light starts at the section edge, including on a long mobile form. */
.contact { position: relative; isolation: isolate; overflow: hidden; border-radius: 48px 48px 0 0; background: #e8edf2; color: #192024; padding-top: 112px; padding-bottom: 96px; gap: clamp(40px, 6vw, 120px); }
.contact::before,
.contact::after { content: none; }
.contact > .contact-copy,
.contact > .contact-form { position: relative; z-index: 1; }
.contact-copy { align-self: start; padding-top: 56px; }
.contact h2 { font-size: clamp(36px, 3.5vw, 64px); line-height: 1.5; letter-spacing: -.045em; margin-bottom: 30px; }
.contact h2 em { font-style: normal; }
.contact-copy > p:not(.eyebrow) { color: #4b565c; }

.contact .contact-form { background: linear-gradient(120deg,#ffffffeb,#ffffffd6); border-radius: 28px; padding: 36px; box-shadow: inset 0 1px 0 #fff, 0 20px 70px -20px #34465724; color: #192024; }

.contact-form .form-notice { color: #4b565c; }
.opal-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; background: radial-gradient(ellipse 720px 580px at 0% 0%,#c4d7e4 0%,#dce7ec99 48%,#dce7ec00 85%), radial-gradient(ellipse 800px 460px at 100% 0%,#cdc6e1 0%,#e9e0e780 50%,#e9e0e700 85%), radial-gradient(ellipse 580px 660px at 30% 520px,#f2e4d6aa 0%,#f2e4d600 80%), linear-gradient(165deg,#edf0f4,#f3f4f5 55%,#e7ecf2); }
.opal-art i { position: absolute; display: block; border-radius: 50%; animation: opal-drift 22s ease-in-out infinite alternate paused; }
.opal-art i:nth-child(1) { width: 94%; height: 55%; left: 23%; bottom: -28%; background: linear-gradient(105deg,#667e9a,#a2bfd2 22%,#cedbea 40%,#a5a1c1 70%,#fff 95%); filter: blur(38px); transform: rotate(-10deg); }
.opal-art i:nth-child(2) { width: 65%; height: 38%; left: -24%; bottom: -9%; background: linear-gradient(25deg,#f0e8df,#d9b7a0 40%,#f3e6d3 60%,#fff); filter: blur(48px); transform: rotate(25deg); animation-delay: -8s; }
.opal-art i:nth-child(3) { height: 180px; width: 80%; right: -6%; bottom: -15px; background: radial-gradient(ellipse,#fff8 15%,#d0e1e2aa 48%,#fff0 70%); transform: rotate(-10deg); filter: blur(22px); }
.contact[data-in-view="true"] .opal-art i { animation-play-state: running; }
@keyframes opal-drift { to { translate: 2% -7%; scale: 1.03; } }
.site-footer { background: #e7ecf2; color: #192024; padding-top: 32px; padding-bottom: 48px; }
.site-footer small { color: #4b565c; }
.atelier .pointer-light { position: absolute; width: 400px; height: 400px; border-radius: 50%; left: 0; top: 0; transform: translate(-80px,-80px); pointer-events: none; background: radial-gradient(ellipse,#ffffffed 0%,#d4e8ee9c 26%,#ffffff00 68%); z-index: 0; }

.hero h1 { letter-spacing: -.065em; word-spacing: .04em; }
@media (max-width: 1100px) {
  .work-suuta .work-cover { object-position: 30% 50%; }
  .contact { grid-template-columns: 1fr 1.1fr; gap: 32px; padding-top: 80px; }
  .contact-copy { padding-top: 36px; }
  .contact h2 { font-size: 34px; }
  .contact .contact-form { padding: 28px 24px; }

  .hero-detail br { display: block; }
}
@media (max-width: 760px) {
  .contact { grid-template-columns: 1fr; gap: 40px; padding: 64px 24px 64px; border-radius: 32px 32px 0 0; }
  .contact-copy { padding-top: 0; }
  .contact h2 { font-size: clamp(29px,8vw,44px); margin-bottom: 24px; }
  .contact .contact-form { padding: 26px 20px; }

  .contact-copy > p:not(.eyebrow) br { display: none; }
  .site-footer { gap: 24px; padding: 32px 24px 40px; flex-wrap: wrap; }
  .site-footer .brand { width: 160px; }
  .site-footer small { flex-basis: 100%; }
  .work-black-ivory .work-cover { object-position: 60% 50%; }
  .opal-art i:nth-child(1) { height: 35%; width: 160%; left: 0; bottom: -20%; }
  .opal-art i:nth-child(2) { height: 40%; width: 130%; left: -65%; bottom: -5%; }
  .opal-art { background: radial-gradient(ellipse 380px 440px at -12% 0%,#b7d0df 0%,#d6e4ecb3 46%,#d6e4ec00 85%), radial-gradient(ellipse 360px 380px at 110% 80px,#c6bedc 0%,#ddd4e899 44%,#ddd4e800 90%), radial-gradient(ellipse 340px 500px at 80% 560px,#f2dfd2aa 0%,#f2dfd200 80%), linear-gradient(165deg,#e9eef3,#f0f2f4 52%,#e7ecf2); }
}
@media (max-width: 760px) and (max-height: 520px) and (orientation: landscape) {
  .hero-visual { height: 90svh; min-height: 360px; max-height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact[data-in-view="true"] .opal-art i { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .contact .contact-form { background: #f9fbfc; backdrop-filter: none; }
}
.contact-copy > .eyebrow { color: #4b565c; }
.contact-copy { text-shadow: none; }
.contact-copy { top: 0; }