:root {
  --white: #F6F1E7;
  --charcoal: #1C1A17;
  --cobalt: #C0603C;
  --max: 1440px;
  --gutter: clamp(24px, 5.3vw, 82px);
  --section-space: max(15vh, 120px);
}

/* 2026 editorial brand refresh — cream / ink / terracotta */
body {
  background: var(--white);
  color: var(--charcoal);
  letter-spacing: -.015em;
}

.site-header {
  height: 88px;
  padding-inline: var(--gutter);
  transition: none;
}

.site-header.scrolled,
.inner-page .site-header {
  height: 72px;
  background: rgba(246, 241, 231, .96);
  color: var(--charcoal);
  border-bottom-color: rgba(28, 26, 23, .14);
}

.brand,
.footer-brand {
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -.075em;
}

.brand {
  width: clamp(118px, 11vw, 148px);
  height: 42px;
  display: flex;
  align-items: center;
}

.brand-logo {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) invert(1);
}

.site-header.scrolled .brand-logo,
.inner-page .site-header .brand-logo,
body.menu-open .brand-logo {
  filter: none;
}

.site-nav a {
  font-weight: 650;
  letter-spacing: -.025em;
}

.hero {
  min-height: 100svh;
  background-color: var(--charcoal);
  background-position: center center;
}

.hero::before {
  background: rgba(28, 26, 23, .58);
}

.hero-copy {
  width: min(840px, 58vw);
}

.hero h1 {
  max-width: 11ch;
  margin-bottom: 30px;
  font-size: clamp(3.9rem, 5.25vw, 6.45rem);
  line-height: 1.04;
  letter-spacing: -.075em;
  font-weight: 800;
  text-wrap: balance;
}

.hero-copy > p {
  max-width: 36ch;
  margin-bottom: 38px;
  color: rgba(246, 241, 231, .86);
  font-weight: 500;
}

h2,
.catalog-page h1,
.contact-page h1,
.about-page h1,
.blog-index-hero h1,
.blog-post-head h1 {
  font-weight: 800;
  letter-spacing: -.065em;
}

h2 {
  max-width: 14ch;
  font-size: clamp(3rem, 5.1vw, 5.45rem);
  line-height: 1.04;
}

h3 {
  font-weight: 750;
}

p,
.section-copy > p,
.section-heading > p,
.stories-intro > p,
.contact-copy > p,
.contact-entry p,
.about-hero-copy > p,
.story-copy > p,
.development-body > p,
.promise-inner p,
.catalog-hero > p,
.contact-page-copy p {
  max-width: 40ch;
}

.button,
.product-buy {
  border-radius: 0;
  font-weight: 750;
}

.button-primary,
.product-buy-primary {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: var(--white);
}

.button-primary:hover,
.product-buy-primary:hover {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: var(--white);
}

.section,
.about-page-section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.about {
  grid-template-columns: 1fr 1fr;
}

.about-media img,
.story-documentary img,
.portrait-crop,
.product-card-media,
.curated-feature,
.quote-block,
.blog-cta {
  border-radius: 0;
}

.section-copy > p,
.section-heading > p,
.stories-intro > p,
.product-copy p,
.product-tagline,
.home-story-card p,
.contact-copy > p,
.contact-entry p,
.catalog-hero > p,
.contact-page-copy p,
.about-hero-copy > p,
.story-copy > p,
.development-body > p,
.promise-inner p,
.blog-index-hero p,
.blog-list-item p,
.blog-author,
.blog-related p,
.blog-faq details p,
.blog-sources li,
.blog-not-found p {
  color: rgba(28, 26, 23, .72);
}

.about-media figcaption,
.portrait-slot figcaption,
.story-documentary figcaption,
.product-loading,
.product-error,
.story-loading {
  color: rgba(28, 26, 23, .6);
}

.product-card,
.home-story-card,
.blog-list-item,
.contact-link,
.contact-entry,
.catalog-heading,
.story-row,
.blog-list,
.blog-related,
.blog-faq details,
.blog-post-nav {
  border-color: rgba(28, 26, 23, .25);
}

.curated-feature {
  background: var(--charcoal);
  color: var(--white);
}

.curated-feature-body {
  justify-content: center;
}

.curated-feature h3 {
  color: rgba(246, 241, 231, .64);
  font-weight: 650;
}

.curated-feature-tagline {
  max-width: 14ch;
  font-weight: 800;
  letter-spacing: -.06em;
}

.curated-feature-review {
  color: rgba(246, 241, 231, .82);
}

.curated-feature-review-note {
  color: rgba(246, 241, 231, .54);
}

.product-card h3,
.home-story-card h3,
.blog-list-item h2,
.story-row strong {
  font-weight: 750;
}

.product-card-media,
.product-image {
  background: var(--white);
}

.stories-intro {
  align-items: start;
}

.home-story-card {
  min-height: 320px;
}

.home-story-card time,
.story-number,
.story-arrow,
.blog-list-item time,
.blog-post-head time,
.blog-post-direction,
.timeline-list span {
  color: var(--cobalt);
  font-weight: 750;
}

.contact {
  align-items: center;
}

.site-footer {
  background: var(--charcoal);
  color: var(--white);
}

.site-footer > div:first-child > p,
.footer-meta,
.copyright {
  color: rgba(246, 241, 231, .68);
}

.footer-meta a {
  color: var(--white);
}

.footer-socials a,
.copyright {
  border-color: rgba(246, 241, 231, .28);
}

.principle-section,
.quote-block,
.blog-cta {
  background: var(--charcoal);
  color: var(--white);
}

.principle-inner p,
.quote-block small {
  color: rgba(246, 241, 231, .7);
}

.quote-block p,
.blog-cta p {
  font-weight: 800;
}

.timeline-list::before {
  background: var(--cobalt);
}

.timeline-list li::before {
  background: var(--white);
  border-color: var(--cobalt);
}

.blog-body h2,
.blog-faq > h2,
.blog-sources h2 {
  max-width: none;
  font-weight: 800;
}

.blog-body {
  max-width: 680px;
}

.blog-tags span {
  border-color: rgba(28, 26, 23, .25);
  color: rgba(28, 26, 23, .7);
}

@media (max-width: 920px) {
  .site-nav {
    background: var(--white);
    color: var(--charcoal);
  }

  .site-nav a {
    font-size: clamp(2rem, 7vw, 3.2rem);
    font-weight: 800;
  }

  .curated-feature-body {
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .site-header {
    height: 72px;
  }

  .hero {
    min-height: 100svh;
    padding-bottom: max(12svh, 82px);
    background-position: 61% center;
  }

  .hero::before {
    background: rgba(28, 26, 23, .6);
  }

  .hero h1 {
    max-width: 8.6ch;
    font-size: clamp(3rem, 13.4vw, 4.1rem);
    line-height: 1.02;
  }

  .hero-copy > p {
    max-width: 29ch;
  }

  h2 {
    max-width: 11ch;
    font-size: clamp(2.75rem, 12.6vw, 3.75rem);
  }

  .about {
    display: flex;
    flex-direction: column-reverse;
  }

  .about-media img {
    min-height: 58svh;
    object-fit: cover;
  }

  .curated-feature-media {
    aspect-ratio: 4 / 5;
  }

  .curated-feature-body {
    min-height: auto;
    padding: 46px 24px 52px;
  }

  .curated-feature-tagline {
    font-weight: 800;
  }

  .home-story-card {
    min-height: 260px;
  }

  .blog-index-hero h1,
  .catalog-page h1,
  .contact-page h1,
  .about-page h1,
  .blog-post-head h1 {
    font-weight: 800;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 78px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: Pretendard, SUIT, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--cobalt); color: var(--white); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 16px; background: var(--cobalt); color: var(--white); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); color: var(--white); }
.site-header.scrolled { height: 72px; background: var(--white); color: var(--charcoal); border-bottom: 1px solid rgba(46, 46, 46, .16); }
.brand, .footer-brand { font-size: 1.3rem; font-weight: 700; letter-spacing: -.06em; }
.site-nav { display: flex; align-items: center; gap: clamp(28px, 3vw, 52px); }
.site-nav a { position: relative; padding: 28px 0 24px; font-size: .9rem; font-weight: 500; }
.site-nav a.active::after { content: ""; position: absolute; left: 0; bottom: 19px; width: 100%; height: 2px; background: var(--cobalt); }
.menu-toggle { display: none; }

.section { max-width: var(--max); margin: 0 auto; padding: var(--section-space) var(--gutter); }
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 132px var(--gutter) 100px; overflow: hidden; background: var(--charcoal) url("assets/images/hero-bus-tagging.png") center center / cover no-repeat; color: var(--white); }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(46, 46, 46, .92) 0%, rgba(46, 46, 46, .72) 34%, rgba(46, 46, 46, .26) 64%, rgba(46, 46, 46, .06) 100%); }
.hero-copy { position: relative; z-index: 1; width: min(920px, 52vw); }
.hero h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 0 0 34px; font-size: clamp(3.5rem, 4.2vw, 5rem); line-height: 1.12; letter-spacing: -.075em; font-weight: 300; }
.hero-copy > p { max-width: 34ch; margin-bottom: 42px; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.8; }
.hero-actions { display: flex; }
.button { min-height: 58px; display: inline-flex; align-items: center; justify-content: space-between; gap: 44px; padding: 0 25px; border: 1px solid var(--charcoal); background: var(--white); color: var(--charcoal); font-size: .94rem; font-weight: 600; cursor: pointer; }
.button-primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.button-primary:hover { background: var(--charcoal); border-color: var(--charcoal); }
.button:focus-visible, .text-link:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }

h2 { margin-bottom: 38px; font-size: clamp(3rem, 5.4vw, 5.7rem); line-height: 1.14; letter-spacing: -.072em; font-weight: 300; }
h3 { letter-spacing: -.045em; }
.blue-rule { width: 96px; height: 2px; margin: 42px 0 50px; background: var(--cobalt); }
.text-link { display: inline-flex; align-items: center; gap: 48px; padding-bottom: 5px; color: var(--cobalt); border-bottom: 1px solid currentColor; font-size: .92rem; font-weight: 600; }

.about { min-height: 100svh; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(58px, 8vw, 126px); }
.section-copy > p { max-width: 39ch; color: rgba(46, 46, 46, .76); }
.section-copy .text-link { margin-top: 26px; }
.about-media { margin: 0; }
.about-media img { aspect-ratio: 16 / 10; object-fit: cover; }
.about-media figcaption { margin-top: 12px; font-size: .78rem; color: rgba(46, 46, 46, .68); }

.technology-proof {
  background: var(--charcoal);
  color: var(--white);
}
.technology-proof-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
}
.technology-proof-heading {
  display: grid;
  grid-template-columns: 1.2fr .55fr;
  align-items: end;
  gap: clamp(44px, 7vw, 112px);
  margin-bottom: max(9vh, 76px);
}
.technology-proof-heading h2,
.technology-proof-heading p { margin-bottom: 0; }
.technology-proof-heading p {
  max-width: 34ch;
  color: rgba(246, 241, 231, .72);
}
.technology-proof-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
.patent-proof { margin: 0; }
.patent-proof-media {
  height: min(66svh, 680px);
  padding: clamp(24px, 3vw, 46px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--white);
}
.patent-proof-media img {
  width: auto;
  height: 100%;
  object-fit: contain;
}
.patent-proof figcaption {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  color: rgba(246, 241, 231, .68);
  font-size: .78rem;
}
.patent-proof figcaption strong {
  color: var(--white);
  font-size: .92rem;
}
.patent-title-callout {
  margin-top: 24px;
  padding: 26px 28px 30px;
  border-top: 2px solid var(--cobalt);
  background: rgba(246, 241, 231, .08);
}
.patent-title-callout span {
  display: block;
  margin-bottom: 10px;
  color: var(--cobalt);
  font-size: .78rem;
  font-weight: 750;
}
.patent-title-callout strong {
  display: block;
  color: var(--white);
  font-size: clamp(1.18rem, 1.8vw, 1.58rem);
  line-height: 1.42;
  letter-spacing: -.035em;
}
.structure-proof {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
}
.structure-proof-crop {
  width: 100%;
  aspect-ratio: 10 / 9;
  overflow: hidden;
  background: var(--white);
}
.structure-proof-crop img {
  width: 200%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%);
}
.structure-proof figcaption {
  max-width: 46ch;
  margin-top: 18px;
  color: rgba(246, 241, 231, .62);
  font-size: .78rem;
  line-height: 1.7;
}
.proof-link { align-self: flex-start; margin-top: 28px; }
.proof-disclaimer {
  max-width: none;
  margin: 28px 0 0;
  color: rgba(246, 241, 231, .5);
  font-size: .75rem;
}

.products { min-height: 100svh; }
.section-heading { display: grid; grid-template-columns: 1.25fr .55fr; align-items: end; gap: 40px; margin-bottom: max(9vh, 76px); }
.section-heading h2, .section-heading p { margin-bottom: 0; }
.section-heading > p { max-width: 30ch; color: rgba(46, 46, 46, .72); }
.product-list { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(34px, 4vw, 64px); align-items: start; }
.product-item { min-width: 0; display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.2, .75, .25, 1); }
.product-item:first-child { grid-row: span 2; }
.product-item:hover { transform: translateY(-7px); }
.product-image { height: 300px; overflow: hidden; background: var(--white); }
.product-item:first-child .product-image { height: 720px; }
.product-image img { height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2, .75, .25, 1); }
.product-item:hover .product-image img { transform: scale(1.025); }
.product-image.image-on-white img { object-fit: contain; padding: 18px; }
.product-copy { padding: 24px 2px 42px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 22px; }
.product-copy .item-number { color: var(--cobalt); font-size: .78rem; }
.product-copy h3 { width: calc(100% - 52px); margin: 0; font-size: clamp(1.35rem, 2.1vw, 2rem); font-weight: 500; }
.product-copy p { width: 100%; max-width: 38ch; margin: 16px 0 20px 52px; color: rgba(46, 46, 46, .72); }
.product-copy .text-link { margin-left: 52px; }

.product-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 5vw, 76px) clamp(24px, 3vw, 44px); }
.product-card { min-width: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(46, 46, 46, .28); transition: transform .4s cubic-bezier(.2, .75, .25, 1); }
.product-card:hover { transform: translateY(-7px); }
.product-card-media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--white); }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .75, .25, 1); }
.product-card:hover .product-card-media img { transform: scale(1.025); }
.product-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 0 0; }
.product-card h3 { max-width: 36ch; margin: 0; font-size: clamp(1.15rem, 1.65vw, 1.5rem); line-height: 1.45; font-weight: 500; }
.product-tagline { max-width: 34ch; margin: 14px 0 28px; color: rgba(46, 46, 46, .68); font-size: .94rem; line-height: 1.7; }
.product-buy { min-width: 126px; min-height: 48px; margin-top: auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid var(--charcoal); font-size: .9rem; font-weight: 600; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.product-buy:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.product-card-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.product-card-actions .product-buy { margin-top: 0; }
.product-detail { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.product-more { display: flex; justify-content: flex-end; margin-top: 58px; }
.store-button { min-width: 190px; }
.product-loading, .product-error { grid-column: 1 / -1; min-height: 280px; display: grid; place-items: center; color: rgba(46, 46, 46, .68); }

.curated-products { display: grid; gap: clamp(76px, 10vh, 120px); }
.curated-feature { min-height: min(70svh, 760px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); background: var(--charcoal); color: var(--white); overflow: hidden; }
.curated-feature-media { min-height: 100%; overflow: hidden; }
.curated-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2, .75, .25, 1); }
.curated-feature:hover .curated-feature-media img { transform: scale(1.018); }
.curated-feature-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(38px, 4vw, 60px); }
.curated-feature h3 { max-width: 24ch; margin: 0 0 24px; color: rgba(255, 255, 255, .68); font-size: clamp(.82rem, 1.05vw, .98rem); line-height: 1.65; font-weight: 500; }
.curated-feature-tagline { max-width: 17ch; margin: 0 0 28px; font-size: clamp(2.15rem, 2.9vw, 3.35rem); line-height: 1.2; letter-spacing: -.06em; font-weight: 300; }
.curated-feature-review { max-width: 37ch; margin: 0 0 18px; color: rgba(255, 255, 255, .82); font-size: clamp(.9rem, 1vw, 1rem); line-height: 1.8; }
.curated-feature-review-note { margin: 0 0 34px; color: rgba(255, 255, 255, .52); font-size: .72rem; line-height: 1.6; }
.product-buy-primary { min-width: 156px; border-color: var(--cobalt); background: var(--cobalt); color: var(--white); }
.product-buy-primary:hover { border-color: var(--white); background: var(--white); color: var(--charcoal); }
.curated-feature-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.product-buy-secondary { border-color: rgba(246, 241, 231, .54); color: var(--white); }
.product-buy-secondary:hover { border-color: var(--white); background: var(--white); color: var(--charcoal); }
.curated-product-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(58px, 7vw, 96px) clamp(22px, 3vw, 44px); }
.curated-product-grid .product-card { grid-column: span 4; }
.curated-product-grid .product-card:nth-child(4),
.curated-product-grid .product-card:nth-child(5) { grid-column: span 6; }
.curated-product-grid .product-card-media { aspect-ratio: 4 / 3; }

.catalog-page h1 { margin: 0; font-size: clamp(3.7rem, 5.4vw, 5.9rem); line-height: 1.14; letter-spacing: -.075em; font-weight: 300; }
.catalog-hero { min-height: 72svh; max-width: var(--max); margin: 0 auto; padding: max(14vh, 120px) var(--gutter) max(15vh, 120px); display: grid; grid-template-columns: 1.2fr .55fr; align-items: end; gap: clamp(50px, 8vw, 120px); }
.catalog-hero > p { max-width: 31ch; margin-bottom: 12px; color: rgba(46, 46, 46, .72); }
.catalog-section { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) var(--section-space); }
.catalog-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-bottom: 58px; padding-top: 32px; border-top: 1px solid rgba(46, 46, 46, .34); }
.catalog-heading h2 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); }
.catalog-heading p { margin: 0; color: rgba(46, 46, 46, .68); font-size: .88rem; }
.catalog-grid { padding-bottom: max(8vh, 60px); }

.stories { min-height: 100svh; display: flex; flex-direction: column; }
.story-image { order: 1; height: min(62vh, 690px); margin-bottom: max(10vh, 80px); overflow: hidden; }
.story-image img { height: 100%; object-fit: cover; object-position: center 56%; }
.stories-intro { order: 1; display: grid; grid-template-columns: 1.15fr .65fr; align-items: end; gap: 52px; margin-bottom: 62px; }
.stories-intro h2, .stories-intro > p { margin-bottom: 0; }
.stories-intro > p { max-width: 34ch; color: rgba(46, 46, 46, .72); }
.story-list { order: 3; }
.story-row { min-height: 108px; display: grid; grid-template-columns: 64px 1fr 1fr 28px; align-items: center; gap: 24px; border-top: 1px solid rgba(46, 46, 46, .36); }
.story-row:last-child { border-bottom: 1px solid rgba(46, 46, 46, .36); }
.story-number, .story-arrow { color: var(--cobalt); }
.story-row strong { font-size: clamp(1rem, 1.5vw, 1.26rem); font-weight: 500; }
.story-row > span:nth-child(3) { max-width: 40ch; color: rgba(46, 46, 46, .68); font-size: .9rem; }
.story-arrow { font-size: 1.25rem; }

.home-story-grid { order: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(32px, 4vw, 60px); }
.home-story-card { min-height: 290px; display: flex; flex-direction: column; padding: 28px 0 32px; border-top: 1px solid rgba(46, 46, 46, .36); transition: transform .35s cubic-bezier(.2, .75, .25, 1); }
.home-story-card:hover { transform: translateY(-6px); }
.home-story-card time { color: var(--cobalt); font-size: .78rem; letter-spacing: .04em; }
.home-story-card h3 { margin: 28px 0 16px; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.38; font-weight: 400; }
.home-story-card p { max-width: 40ch; margin: auto 0 0; color: rgba(46, 46, 46, .68); font-size: .92rem; }
.story-loading { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; color: rgba(46, 46, 46, .68); }
.story-more { order: 3; display: flex; justify-content: flex-end; margin-top: 58px; }

/* 이야기 목록·상세 */
.blog-index { min-height: 100svh; }
.blog-index-hero { min-height: 72svh; width: min(680px, calc(100% - (var(--gutter) * 2))); margin: 0 auto; padding: max(14vh, 120px) 0 max(12vh, 100px); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.blog-index-hero h1 { margin: 0; font-size: clamp(3.7rem, 5.4vw, 5.9rem); line-height: 1.14; letter-spacing: -.075em; font-weight: 300; }
.blog-index-hero p { max-width: 33ch; margin: 34px 0 0; color: rgba(46, 46, 46, .7); }
.blog-list-section { width: min(680px, calc(100% - (var(--gutter) * 2))); margin: 0 auto; padding-bottom: var(--section-space); }
.blog-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(46, 46, 46, .3); }
.blog-list-item { border-top: 1px solid rgba(46, 46, 46, .3); }
.blog-list-item a { display: block; padding: 42px 0; transition: transform .3s ease; }
.blog-list-item a:hover { transform: translateX(6px); }
.blog-list-item time { color: var(--cobalt); font-size: .78rem; letter-spacing: .04em; }
.blog-list-item h2 { margin: 10px 0 12px; font-size: clamp(1.55rem, 2.4vw, 2.15rem); line-height: 1.4; letter-spacing: -.045em; font-weight: 400; }
.blog-list-item p { max-width: 40ch; margin: 0; color: rgba(46, 46, 46, .68); font-size: .93rem; }
.blog-empty { min-height: 360px; display: grid; place-items: center; color: rgba(46, 46, 46, .68); }

.blog-reading-shell { width: min(680px, calc(100% - (var(--gutter) * 2))); margin: 0 auto; padding: max(10vh, 90px) 0 var(--section-space); }
.blog-back { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid rgba(46, 46, 46, .4); color: rgba(46, 46, 46, .68); font-size: .82rem; }
.blog-article { padding-top: max(10vh, 84px); }
.blog-post-head time { color: var(--cobalt); font-size: .8rem; letter-spacing: .04em; }
.blog-post-head h1 { margin: 16px 0 18px; font-size: clamp(2.5rem, 4.7vw, 4.35rem); line-height: 1.24; letter-spacing: -.065em; font-weight: 300; }
.blog-author { margin: 0 0 18px; color: rgba(46, 46, 46, .65); font-size: .84rem; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.blog-tags span { padding: 3px 10px; border: 1px solid rgba(46, 46, 46, .3); color: rgba(46, 46, 46, .7); font-size: .72rem; }
.blog-rule { width: 96px; margin: 46px 0 54px; border: 0; border-top: 2px solid var(--cobalt); }
.blog-body { font-size: 1.03rem; line-height: 1.95; }
.blog-body p { margin: 0 0 1.75em; }
.blog-body h2 { margin: 2.45em 0 .85em; font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.45; letter-spacing: -.045em; font-weight: 500; }
.blog-body ul,
.blog-body ol { margin: 0 0 1.8em; padding-left: 1.2em; }
.blog-body li { margin-bottom: .5em; }
.blog-body li::marker { color: var(--cobalt); }
.blog-media { margin: 2.8em 0; }
.blog-media img,
.blog-media video { width: 100%; height: auto; display: block; background: rgba(28, 26, 23, .08); }
.blog-media video { aspect-ratio: 16 / 9; object-fit: cover; }
.blog-media-portrait { width: min(390px, 100%); margin-right: auto; margin-left: auto; }
.blog-media-portrait video { aspect-ratio: 9 / 16; object-fit: contain; }
.blog-media figcaption { max-width: 58ch; margin-top: 12px; color: rgba(28, 26, 23, .65); font-size: .78rem; line-height: 1.65; }
.blog-youtube-short { width: min(390px, 100%); margin-right: auto; margin-left: auto; }
.blog-youtube-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #1C1A17; }
.blog-youtube-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blog-youtube-short figcaption a { color: var(--cobalt); border-bottom: 1px solid currentColor; }
.blog-media-wide { width: min(920px, calc(100vw - (var(--gutter) * 2))); margin-left: 50%; transform: translateX(-50%); }
.blog-media-compact { width: min(416px, 100%); margin-right: auto; margin-left: auto; }
.blog-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.blog-media-note { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--cobalt); color: rgba(28, 26, 23, .72); font-size: .82rem; }
.blog-related { margin-top: 62px; padding: 28px 0; border-top: 1px solid rgba(46, 46, 46, .25); border-bottom: 1px solid rgba(46, 46, 46, .25); }
.blog-related p { margin: 0; color: rgba(46, 46, 46, .72); }
.blog-related-title { display: block; margin-bottom: 14px; font-size: .82rem; letter-spacing: .04em; }
.blog-related-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.blog-related-list li { margin: 0; }
.blog-related a, .blog-sources a { color: var(--cobalt); border-bottom: 1px solid currentColor; }
.blog-faq { margin-top: 80px; }
.blog-faq > h2 { margin: 0 0 22px; font-size: 1.55rem; line-height: 1.4; font-weight: 500; }
.blog-faq details { padding: 18px 0; border-top: 1px solid rgba(46, 46, 46, .25); }
.blog-faq details:last-child { border-bottom: 1px solid rgba(46, 46, 46, .25); }
.blog-faq summary { cursor: pointer; font-weight: 600; }
.blog-faq summary::marker { color: var(--cobalt); }
.blog-faq details p { margin: 12px 0 0; color: rgba(46, 46, 46, .72); }
.blog-sources { margin-top: 72px; }
.blog-sources h2 { margin: 0 0 16px; font-size: 1.25rem; line-height: 1.45; font-weight: 500; }
.blog-sources ul { margin: 0; padding-left: 1.15em; }
.blog-sources li { color: rgba(46, 46, 46, .72); }
.blog-cta { margin-top: 72px; padding: clamp(32px, 6vw, 52px); background: var(--charcoal); color: var(--white); }
.blog-cta p { max-width: 31ch; margin: 0 0 24px; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.5; letter-spacing: -.04em; font-weight: 300; }
.blog-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 90px; padding-top: 10px; border-top: 1px solid rgba(46, 46, 46, .3); }
.blog-post-nav a { min-width: 0; padding: 22px 0; }
.blog-post-direction { display: block; margin-bottom: 7px; color: var(--cobalt); font-size: .75rem; }
.blog-post-nav strong { display: block; font-size: .96rem; line-height: 1.55; font-weight: 500; }
.blog-post-nav a:last-child { text-align: right; }
.blog-not-found { min-height: 60svh; display: grid; align-content: center; justify-items: start; }
.blog-not-found h1 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; }
.blog-not-found p { color: rgba(46, 46, 46, .68); }

.contact { min-height: 100svh; display: grid; grid-template-columns: .82fr 1.18fr; align-items: start; gap: clamp(64px, 10vw, 150px); }
.contact-copy > p { max-width: 36ch; color: rgba(46, 46, 46, .72); }
.contact-entry { align-self: center; padding-top: 14px; border-top: 1px solid rgba(46, 46, 46, .32); }
.contact-entry p { max-width: 34ch; margin-bottom: 34px; color: rgba(46, 46, 46, .72); }
.contact-entry .button { min-width: 240px; }

.site-footer { display: grid; grid-template-columns: 1.2fr .75fr 1fr; gap: 60px; padding: 82px var(--gutter) 36px; background: var(--charcoal); color: var(--white); }
.site-footer > div:first-child > p, .footer-meta, .copyright { color: rgba(255, 255, 255, .68); }
.footer-brand { display: inline-block; margin-bottom: 24px; font-size: 1.7rem; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 16px 34px; }
.footer-links a:hover, .footer-meta a:hover { color: var(--cobalt); }
.footer-meta { font-size: .88rem; }
.footer-meta a { color: var(--white); }
.footer-socials { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer-socials a { padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.copyright { grid-column: 1 / -1; margin: 46px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .24); font-size: .76rem; }

/* 연락하기 페이지 */
.contact-page h1 { margin: 0; font-size: clamp(3.7rem, 5.4vw, 5.9rem); line-height: 1.14; letter-spacing: -.075em; font-weight: 300; }
.contact-page-hero { min-height: calc(100svh - 72px); max-width: var(--max); margin: 0 auto; padding: max(14vh, 120px) var(--gutter) max(15vh, 120px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); align-items: end; gap: clamp(60px, 9vw, 150px); }
.contact-page-copy p { max-width: 34ch; margin: 34px 0 0; color: rgba(46, 46, 46, .72); font-size: clamp(1rem, 1.2vw, 1.15rem); }
.contact-links { display: grid; border-bottom: 1px solid rgba(46, 46, 46, .34); }
.contact-link { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 22px 2px; border-top: 1px solid rgba(46, 46, 46, .34); transition: color .25s ease, padding .3s ease; }
.contact-link strong { font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.4; font-weight: 500; }
.contact-link span { color: var(--cobalt); font-size: .84rem; font-weight: 600; }
.contact-link:hover { padding-left: 12px; color: var(--cobalt); }
.contact-link:focus-visible { outline-offset: 6px; }

/* 내 소개 페이지 */
.inner-page { padding-top: 72px; }
.inner-page .site-header { background: var(--white); color: var(--charcoal); border-bottom: 1px solid rgba(46, 46, 46, .16); }
.about-page h1 { margin: 0; font-size: clamp(3.7rem, 5.4vw, 5.9rem); line-height: 1.14; letter-spacing: -.075em; font-weight: 300; }
.about-page-section { max-width: var(--max); margin: 0 auto; padding: var(--section-space) var(--gutter); }
.about-hero { max-width: var(--max); min-height: calc(100svh - 72px); margin: 0 auto; padding: max(10vh, 84px) var(--gutter) var(--section-space); display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: clamp(60px, 8vw, 126px); }
.about-hero-copy > p { max-width: 34ch; color: rgba(46, 46, 46, .72); font-size: clamp(1rem, 1.3vw, 1.18rem); }
.portrait-slot { margin: 0; }
.portrait-crop { height: min(70vh, 720px); overflow: hidden; background: var(--white); }
.portrait-slot img { display: block; width: 100%; height: 111.6%; object-fit: cover; object-position: 50% 0; }
.portrait-slot figcaption { font-size: .78rem; }
.portrait-slot figcaption { margin-top: 11px; color: rgba(46, 46, 46, .64); }

.founder-story { min-height: 100svh; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(60px, 8vw, 126px); }
.story-copy > p, .development-body > p { max-width: 39ch; color: rgba(46, 46, 46, .76); }
.story-documentary { margin: 0; }
.story-documentary img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.story-documentary figcaption { margin-top: 11px; color: rgba(46, 46, 46, .64); font-size: .78rem; }

.development-story { min-height: 100svh; display: grid; grid-template-columns: 1fr .72fr; align-items: start; gap: clamp(70px, 10vw, 160px); }
.development-heading { position: sticky; top: 130px; }
.development-body { padding-top: 16px; }
.development-body > p { margin-bottom: 36px; font-size: clamp(1rem, 1.22vw, 1.13rem); }

.principle-section { min-height: 88svh; display: grid; align-items: center; padding: var(--section-space) var(--gutter); background: var(--charcoal); color: var(--white); }
.principle-inner { width: min(100%, calc(var(--max) - var(--gutter) * 2)); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .65fr; align-items: end; gap: clamp(70px, 10vw, 160px); }
.principle-inner h2 { margin-bottom: 0; }
.principle-inner p { max-width: 39ch; margin-bottom: 8px; color: rgba(255, 255, 255, .72); }

.customer-quote { min-height: 100svh; display: grid; grid-template-columns: .68fr 1.32fr; align-items: center; gap: clamp(70px, 9vw, 140px); }
.quote-block { margin: 0; padding: clamp(46px, 6vw, 86px); background: var(--charcoal); color: var(--white); }
.quote-block p { max-width: 25ch; margin-bottom: 42px; font-size: clamp(2rem, 3.3vw, 3.7rem); line-height: 1.42; letter-spacing: -.055em; font-weight: 300; }
.quote-block footer { margin-bottom: 12px; font-size: .92rem; }
.quote-block small { color: rgba(255, 255, 255, .6); font-size: .76rem; }

.timeline-section { min-height: 100svh; }
.timeline-heading { margin-bottom: max(12vh, 94px); }
.timeline-heading h2 { max-width: 1100px; }
.timeline-list { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.timeline-list::before { content: ""; position: absolute; top: 38px; left: 0; right: 0; height: 2px; background: var(--cobalt); }
.timeline-list li { position: relative; padding-top: 74px; }
.timeline-list li::before { content: ""; position: absolute; z-index: 1; top: 30px; left: 0; width: 14px; height: 14px; border: 2px solid var(--cobalt); border-radius: 50%; background: var(--white); }
.timeline-list span { position: absolute; top: 0; left: 0; color: var(--cobalt); font-size: .84rem; font-weight: 600; }
.timeline-list strong { display: block; margin-bottom: 12px; font-size: 1.05rem; font-weight: 600; }
.timeline-list p { max-width: 18ch; color: rgba(46, 46, 46, .68); font-size: .86rem; }

.promise-section { min-height: 82svh; display: grid; align-items: center; padding: max(20vh, 150px) var(--gutter); }
.promise-inner { width: min(100%, calc(var(--max) - var(--gutter) * 2)); margin: 0 auto; }
.promise-inner h2 { max-width: 1160px; }
.promise-inner p { max-width: 39ch; margin-bottom: 44px; color: rgba(46, 46, 46, .72); font-size: clamp(1rem, 1.2vw, 1.16rem); }
.promise-inner .button { width: auto; min-width: 230px; }

.reveal { opacity: 1; transform: none; }
.motion-enabled .reveal { opacity: 0; transform: translateY(32px); transition: opacity .72s cubic-bezier(.2, .75, .25, 1), transform .72s cubic-bezier(.2, .75, .25, 1); }
.motion-enabled .reveal.visible { opacity: 1; transform: none; }
.motion-enabled .product-item.reveal.visible:hover { transform: translateY(-7px); }

@media (max-width: 920px) {
  .site-header { height: 72px; }
  .menu-toggle { position: relative; z-index: 102; width: 42px; height: 42px; display: grid; place-content: center; gap: 7px; border: 0; background: transparent; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { display: block; width: 24px; height: 2px; background: currentColor; }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(4.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
  body.menu-open .site-header { color: var(--charcoal); }
  .site-nav { position: fixed; inset: 0; z-index: 101; display: none; flex-direction: column; justify-content: center; gap: 22px; background: var(--white); color: var(--charcoal); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 8px; font-size: 1.75rem; font-weight: 300; }
  .site-nav a.active::after { display: none; }
  .site-nav a.active { color: var(--cobalt); }
  .hero-copy { width: min(700px, 78vw); }
  .about, .contact { grid-template-columns: 1fr; }
  .about { gap: 70px; }
  .section-heading, .stories-intro { grid-template-columns: 1fr; align-items: start; }
  .product-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .curated-feature { min-height: auto; grid-template-columns: 1fr; }
  .curated-feature-media { aspect-ratio: 16 / 10; }
  .curated-feature-body { min-height: 540px; }
  .curated-product-grid .product-card { grid-column: span 6; }
  .curated-product-grid .product-card:nth-child(5) { grid-column: 4 / span 6; }
  .catalog-hero { grid-template-columns: 1fr; align-content: end; }
  .product-item:first-child .product-image { height: 580px; }
  .story-row { grid-template-columns: 48px 1fr 26px; padding: 24px 0; }
  .story-row > span:nth-child(3) { grid-column: 2; }
  .story-arrow { grid-column: 3; grid-row: 1 / 3; }
  .about-hero, .founder-story, .development-story, .principle-inner, .customer-quote { grid-template-columns: 1fr; }
  .contact-page-hero { grid-template-columns: 1fr; align-content: center; }
  .about-hero { gap: 70px; }
  .portrait-crop { height: 62svh; }
  .development-heading { position: static; }
  .principle-inner { gap: 52px; }
  .timeline-list { grid-template-columns: 1fr; gap: 0; padding-left: 32px; }
  .timeline-list::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .timeline-list li { padding: 0 0 58px; }
  .timeline-list li::before { top: 4px; left: -32px; }
  .timeline-list span { position: static; display: block; margin-bottom: 8px; }
  .timeline-list p { max-width: 34ch; }
  .blog-index-hero { min-height: 68svh; }
}

@media (max-width: 640px) {
  :root { --gutter: 22px; --section-space: max(15svh, 96px); }
  body { font-size: 15px; }
  .hero { min-height: 100svh; align-items: flex-end; padding: 120px var(--gutter) 128px; background-position: 61% center; }
  .hero::before { background: linear-gradient(0deg, rgba(46, 46, 46, .94) 0%, rgba(46, 46, 46, .72) 50%, rgba(46, 46, 46, .2) 100%); }
  .hero-copy { width: 100%; }
  .hero h1 { margin-bottom: 24px; font-size: clamp(2.9rem, 13vw, 4rem); line-height: 1.12; }
  .hero-copy > p br { display: none; }
  .button { width: 100%; }
  h2 { font-size: clamp(2.65rem, 12vw, 3.8rem); }
  .about { min-height: auto; gap: 54px; }
  .about-media img { aspect-ratio: 16 / 10; }
  .section-heading { margin-bottom: 64px; }
  .product-list { grid-template-columns: 1fr; gap: 28px; }
  .product-card-grid { grid-template-columns: 1fr; gap: 54px; }
  .curated-products { gap: 76px; }
  .curated-feature-media { aspect-ratio: 1 / 1; }
  .curated-feature-body { min-height: 560px; padding: 36px 26px 38px; }
  .curated-feature h3 { margin-bottom: 22px; }
  .curated-feature-tagline { max-width: 13ch; margin-bottom: 26px; font-size: clamp(2.25rem, 10.2vw, 3.05rem); }
  .curated-feature-review { font-size: .92rem; line-height: 1.78; }
  .curated-feature-review-note { margin-bottom: 32px; }
  .curated-product-grid { grid-template-columns: 1fr; gap: 56px; }
  .curated-product-grid .product-card,
  .curated-product-grid .product-card:nth-child(4),
  .curated-product-grid .product-card:nth-child(5) { grid-column: 1; }
  .product-card h3 { max-width: 31ch; font-size: 1.25rem; }
  .product-buy { width: 100%; }
  .curated-feature-actions { width: 100%; }
  .product-more { justify-content: flex-start; margin-top: 46px; }
  .catalog-page h1 { font-size: clamp(2.9rem, 13vw, 4rem); }
  .catalog-hero { min-height: 78svh; padding-top: 108px; padding-bottom: 100px; gap: 34px; }
  .catalog-hero > p br { display: none; }
  .catalog-heading { margin-bottom: 46px; }
  .product-item:first-child { grid-row: auto; }
  .product-image, .product-item:first-child .product-image { height: auto; aspect-ratio: 1.18; }
  .product-copy { padding-bottom: 52px; }
  .story-image { height: 62svh; min-height: 390px; margin-bottom: 70px; }
  .story-image img { object-position: 63% center; }
  .stories-intro { gap: 4px; margin-bottom: 46px; }
  .home-story-grid { grid-template-columns: 1fr; gap: 26px; }
  .home-story-card { min-height: 250px; }
  .story-more { justify-content: flex-start; margin-top: 46px; }
  .story-row { gap: 12px; }
  .story-row > span:nth-child(3) { font-size: .8rem; }
  .site-footer { grid-template-columns: 1fr; gap: 42px; padding-top: 68px; }
  .copyright { margin-top: 8px; }
  .about-page h1 { font-size: clamp(2.9rem, 13vw, 4rem); }
  .contact-page h1 { font-size: clamp(2.9rem, 13vw, 4rem); }
  .contact-page-hero { min-height: auto; padding-top: 104px; padding-bottom: var(--section-space); gap: 76px; }
  .contact-link { min-height: 86px; }
  .contact-link:hover { padding-left: 2px; }
  .about-hero { min-height: auto; padding-top: 92px; }
  .portrait-crop { height: 58svh; }
  .founder-story, .development-story, .customer-quote { min-height: auto; }
  .story-documentary img { aspect-ratio: 4 / 3; }
  .principle-section { min-height: 100svh; }
  .quote-block { padding: 42px 26px; }
  .quote-block p { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .promise-section { padding-top: max(18svh, 120px); padding-bottom: max(18svh, 120px); }
  .promise-inner .button { width: 100%; }
  .blog-index-hero { min-height: 72svh; padding-top: 104px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 34px; }
  .blog-index-hero h1 { font-size: clamp(2.9rem, 13vw, 4rem); }
  .blog-list-item a { padding: 34px 0; }
  .blog-reading-shell { padding-top: 70px; }
  .blog-article { padding-top: 70px; }
  .blog-post-head h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); }
  .blog-post-head h1 { overflow-wrap: anywhere; word-break: normal; }
  .blog-post-nav { grid-template-columns: 1fr; gap: 0; }
  .blog-post-nav a:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-enabled .reveal, .reveal { opacity: 1; transform: none; }
  .product-item:hover, .product-item:hover .product-image img, .product-card:hover, .product-card:hover .product-card-media img, .home-story-card:hover, .blog-list-item a:hover { transform: none; }
}

/* Final cascade: public brand system */
body { background: var(--white); color: var(--charcoal); letter-spacing: -.015em; }
.site-header { height: 88px; transition: none; }
.site-header.scrolled,
.inner-page .site-header { height: 72px; background: rgba(246, 241, 231, .96); color: var(--charcoal); border-bottom-color: rgba(28, 26, 23, .14); }
.brand, .footer-brand { font-size: 1.42rem; font-weight: 800; letter-spacing: -.075em; }
.site-nav a { font-weight: 650; letter-spacing: -.025em; }

.hero { min-height: 100svh; background-color: var(--charcoal); background-position: center; }
.hero::before { background: rgba(28, 26, 23, .58); }
.hero-copy { width: min(840px, 58vw); }
.hero h1 { max-width: 11ch; margin-bottom: 30px; font-size: clamp(3.9rem, 5.25vw, 6.45rem); line-height: 1.04; letter-spacing: -.075em; font-weight: 800; text-wrap: balance; }
.hero-copy > p { max-width: 36ch; margin-bottom: 38px; color: rgba(246, 241, 231, .86); font-weight: 500; }

h2,
.catalog-page h1,
.contact-page h1,
.about-page h1,
.blog-index-hero h1,
.blog-post-head h1 { font-weight: 800; letter-spacing: -.065em; }
h2 { max-width: 14ch; font-size: clamp(3rem, 5.1vw, 5.45rem); line-height: 1.04; }
h3 { font-weight: 750; }
p,
.section-copy > p,
.section-heading > p,
.stories-intro > p,
.contact-copy > p,
.contact-entry p,
.about-hero-copy > p,
.story-copy > p,
.development-body > p,
.promise-inner p,
.catalog-hero > p,
.contact-page-copy p { max-width: 40ch; }

.section, .about-page-section { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.button, .product-buy { border-radius: 0; font-weight: 750; }
.button, .product-buy, .contact-link, .blog-list-item a { transition: none; }
.button-primary,
.button-primary:hover,
.product-buy-primary,
.product-buy-primary:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.about { grid-template-columns: 1fr 1fr; }
.about-media img,
.story-documentary img,
.portrait-crop,
.product-card-media,
.curated-feature,
.quote-block,
.blog-cta { border-radius: 0; }

.section-copy > p,
.section-heading > p,
.stories-intro > p,
.product-copy p,
.product-tagline,
.home-story-card p,
.contact-copy > p,
.contact-entry p,
.catalog-hero > p,
.contact-page-copy p,
.about-hero-copy > p,
.story-copy > p,
.development-body > p,
.promise-inner p,
.blog-index-hero p,
.blog-list-item p,
.blog-author,
.blog-related p,
.blog-faq details p,
.blog-sources li,
.blog-not-found p { color: rgba(28, 26, 23, .72); }
.about-media figcaption,
.portrait-slot figcaption,
.story-documentary figcaption,
.product-loading,
.product-error,
.story-loading { color: rgba(28, 26, 23, .6); }
.product-card,
.home-story-card,
.blog-list-item,
.contact-link,
.contact-entry,
.catalog-heading,
.story-row,
.blog-list,
.blog-related,
.blog-faq details,
.blog-post-nav { border-color: rgba(28, 26, 23, .25); }

.curated-feature { background: var(--charcoal); color: var(--white); }
.curated-feature-body { justify-content: center; }
.curated-feature h3 { color: rgba(246, 241, 231, .64); font-weight: 650; }
.curated-feature-tagline { max-width: 14ch; font-weight: 800; letter-spacing: -.06em; }
.curated-feature-review { color: rgba(246, 241, 231, .82); }
.curated-feature-review-note { color: rgba(246, 241, 231, .54); }
.product-card h3,
.home-story-card h3,
.blog-list-item h2,
.story-row strong { font-weight: 750; }
.product-card-media, .product-image { background: var(--white); }
.stories-intro { align-items: start; }
.home-story-card { min-height: 320px; }
.home-story-card time,
.story-number,
.story-arrow,
.blog-list-item time,
.blog-post-head time,
.blog-post-direction,
.timeline-list span { color: var(--cobalt); font-weight: 750; }
.contact-link:hover { padding-left: 2px; color: inherit; }
.blog-list-item a:hover { transform: none; }

.contact { align-items: center; }
.site-footer { background: var(--charcoal); color: var(--white); }
.site-footer > div:first-child > p,
.footer-meta,
.copyright { color: rgba(246, 241, 231, .68); }
.footer-meta a { color: var(--white); }
.footer-socials a, .copyright { border-color: rgba(246, 241, 231, .28); }
.principle-section, .quote-block, .blog-cta { background: var(--charcoal); color: var(--white); }
.principle-inner p, .quote-block small { color: rgba(246, 241, 231, .7); }
.quote-block p, .blog-cta p { font-weight: 800; }
.timeline-list::before { background: var(--cobalt); }
.timeline-list li::before { background: var(--white); border-color: var(--cobalt); }
.blog-body { max-width: 680px; }
.blog-body h2, .blog-faq > h2, .blog-sources h2 { max-width: none; font-weight: 800; }
.blog-tags span { border-color: rgba(28, 26, 23, .25); color: rgba(28, 26, 23, .7); }

.use-proof { border-bottom: 1px solid rgba(28, 26, 23, .16); }
.use-proof .section-heading { margin-bottom: max(7vh, 64px); }
.use-proof-media { margin: 0; }
.use-proof-desktop-image {
  width: 100%;
  aspect-ratio: 20 / 9;
  object-fit: cover;
}
.use-proof-mobile-stack { display: none; }
.use-proof-media figcaption {
  margin-top: 14px;
  color: rgba(28, 26, 23, .6);
  font-size: .78rem;
}

.customer-proof { padding-top: var(--section-space); }
.customer-proof-heading {
  display: grid;
  grid-template-columns: 1.2fr .55fr;
  align-items: end;
  gap: clamp(44px, 7vw, 112px);
  margin-bottom: max(9vh, 76px);
}
.customer-proof-heading h2,
.customer-proof-heading p { margin-bottom: 0; }
.customer-proof-heading p {
  max-width: 34ch;
  color: rgba(28, 26, 23, .72);
}
.customer-proof-list { border-top: 1px solid rgba(28, 26, 23, .26); }
.customer-proof-card {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(290px, .72fr) minmax(0, 1.28fr);
  border-bottom: 1px solid rgba(28, 26, 23, .26);
}
.customer-proof-card-reverse { grid-template-columns: minmax(0, 1.28fr) minmax(290px, .72fr); }
.customer-proof-card-reverse .customer-proof-media { order: 2; }
.customer-proof-card-reverse .customer-proof-copy { order: 1; }
.customer-proof-media { min-height: 100%; margin: 0; overflow: hidden; }
.customer-proof-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .75, .25, 1);
}
.customer-proof-card:hover .customer-proof-media img { transform: scale(1.018); }
.customer-proof-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 6vw, 92px);
}
.customer-proof-context {
  margin-bottom: 24px;
  color: var(--cobalt);
  font-size: .82rem;
  font-weight: 750;
}
.customer-proof-copy h3 {
  max-width: 19ch;
  margin: 0 0 28px;
  font-size: clamp(1.85rem, 3vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: -.055em;
}
.customer-proof-copy blockquote {
  max-width: 40ch;
  margin: 0;
  color: rgba(28, 26, 23, .76);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.85;
}
.customer-proof-note {
  max-width: none;
  margin: 28px 0 0;
  color: rgba(28, 26, 23, .56);
  font-size: .75rem;
  line-height: 1.7;
}

@media (max-width: 920px) {
  .site-nav { background: var(--white); color: var(--charcoal); }
  .site-nav a { font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 800; }
  .curated-feature-body { justify-content: flex-end; }
  .technology-proof-heading { grid-template-columns: 1fr; align-items: start; }
  .technology-proof-grid { grid-template-columns: .82fr 1.18fr; }
  .customer-proof-heading { grid-template-columns: 1fr; align-items: start; }
  .customer-proof-card,
  .customer-proof-card-reverse { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); }
}

@media (max-width: 640px) {
  .site-header { height: 72px; }
  .brand { width: 112px; height: 44px; }
  .catalog-page h1 {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .catalog-hero { min-width: 0; }
  .blog-media { margin: 2.2em 0; }
  .blog-media-wide { width: 100%; margin-left: 0; transform: none; }
  .blog-media-grid { grid-template-columns: 1fr; }
  .hero { min-height: 100svh; padding-bottom: max(12svh, 82px); background-position: 61% center; }
  .hero::before { background: rgba(28, 26, 23, .6); }
  .hero-copy { width: 100%; }
  .hero h1 { max-width: 8.6ch; font-size: clamp(3rem, 13.4vw, 4.1rem); line-height: 1.02; }
  .hero-copy > p { max-width: 29ch; }
  h2 { max-width: 11ch; font-size: clamp(2.75rem, 12.6vw, 3.75rem); }
  .about { display: flex; flex-direction: column-reverse; }
  .about-media img {
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }
  .technology-proof-heading { gap: 34px; margin-bottom: 68px; }
  .technology-proof-grid { grid-template-columns: 1fr; gap: 62px; }
  .patent-proof-media { height: 68svh; padding: 28px; }
  .patent-title-callout { padding: 24px 22px 26px; }
  .patent-title-callout strong { font-size: 1.28rem; }
  .use-proof .section-heading { margin-bottom: 54px; }
  .use-proof-desktop-image { display: none; }
  .use-proof-mobile-stack { display: grid; gap: 18px; }
  .use-proof-mobile-frame {
    width: 100%;
    aspect-ratio: 1 / 1.08;
    overflow: hidden;
  }
  .use-proof-mobile-frame img {
    width: 200%;
    max-width: none;
    height: 100%;
    object-fit: cover;
  }
  .use-proof-mobile-left img { transform: translateX(0); }
  .use-proof-mobile-right img { transform: translateX(-50%); }
  .customer-proof-heading { gap: 30px; margin-bottom: 62px; }
  .customer-proof-card,
  .customer-proof-card-reverse { min-height: 0; display: flex; flex-direction: column; }
  .customer-proof-card-reverse .customer-proof-media,
  .customer-proof-card-reverse .customer-proof-copy { order: initial; }
  .customer-proof-media { aspect-ratio: 16 / 9; }
  .customer-proof-copy { padding: 28px 0 38px; }
  .customer-proof-context { margin-bottom: 14px; }
  .customer-proof-copy h3 { margin-bottom: 18px; font-size: 1.72rem; }
  .customer-proof-copy blockquote { font-size: .94rem; line-height: 1.7; }
  .customer-proof-note { margin-top: 24px; }
  .curated-feature-media { aspect-ratio: 4 / 5; }
  .curated-feature-body { min-height: auto; padding: 46px 24px 52px; }
  .curated-feature-tagline { font-weight: 800; }
  .curated-product-grid .product-card:nth-child(n + 4) { display: none; }
  .curated-product-grid { gap: 44px; }
  .home-story-card { min-height: 210px; }
  .home-story-card h3 { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-enabled .reveal, .reveal { opacity: 1 !important; transform: none !important; }
  .product-item:hover,
  .product-item:hover .product-image img,
  .product-card:hover,
  .product-card:hover .product-card-media img,
  .curated-feature:hover .curated-feature-media img,
  .customer-proof-card:hover .customer-proof-media img,
  .home-story-card:hover,
  .blog-list-item a:hover { transform: none !important; }
}