/* SNIPCRAFT — editable palette and layout tokens */
:root {
  --cream:#F5EFE0;
  --card:#FBF7EE;
  --navy:#0B1F3A;
  --deep:#07142A;
  --soft:#1C3A63;
  --silver:#C9D1DC;
  --line:rgba(11,31,58,.18);
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Helvetica Neue',Arial,sans-serif;
  --max:1440px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  color:var(--navy);
  background:var(--cream);
  font:16px/1.65 var(--sans)
}
button,input,select,textarea {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
img {
  display:block;
  max-width:100%
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.05
}
h2 {
  font-size:clamp(2.5rem,4.5vw,4.8rem);
  letter-spacing:-.045em
}
h3 {
  font-size:1.8rem
}
em {
  font-weight:400
}
.shell {
  width:calc(100% - 112px);
  max-width:var(--max);
  margin:auto
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--navy);
  color:var(--cream);
  padding:12px;
  z-index:100
}
.skip:focus {
  top:12px
}
:focus-visible {
  outline:2px solid var(--soft);
  outline-offset:5px
}
.nav-wrap {
  position:fixed;
  top:20px;
  left:0;
  width:100%;
  z-index:30;
  transition:top .3s
}
.nav {
  height:86px;
  padding:12px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(251,247,238,.82);
  border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(20px);
  box-shadow:0 10px 35px #07142a08;
  transition:height .3s;
  border-radius:3px
}
.nav-wrap.scrolled {
  top:8px
}
.scrolled .nav {
  height:68px
}
.brand img {
  width:113px;
  height:65px;
  object-fit:contain;
  filter:url(#navy-logo)
}
.nav-links {
  display:flex;
  gap:32px;
  align-items:center;
  font-size:.875rem
}
.nav-links a:hover {
  opacity:.65
}
.nav-quote {
  border:1px solid var(--line);
  padding:10px 20px
}
.menu-toggle {
  display:none
}
.hero {
  min-height:820px;
  display:grid;
  grid-template-columns:1fr 1.08fr;
  align-items:center;
  padding-top:145px;
  padding-bottom:72px;
  gap:20px
}
.eyebrow {
  font-size:.75rem;
  letter-spacing:.17em;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px
}
.eyebrow span {
  height:1px;
  width:24px;
  background:var(--navy)
}
h1 {
  font-size:clamp(4rem,6.9vw,7.4rem);
  line-height:1.02;
  letter-spacing:-.065em;
  margin:0 0 30px;
  position:relative;
  animation:cut-reveal 1.3s ease both
}
h1 em {
  color:var(--soft)
}
.hero-description {
  color:var(--soft);
  line-height:1.8;
  font-size:1rem;
  margin-bottom:34px
}
.actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--navy);
  color:var(--cream);
  padding:16px 24px;
  border:1px solid var(--navy);
  font-size:.875rem;
  transition:background .25s,transform .25s
}
.button:hover {
  background:var(--soft);
  transform:translateY(-2px)
}
.text-link {
  font-size:.875rem;
  border-bottom:1px solid var(--navy);
  padding:8px 0
}
.hero-footnote {
  margin-top:54px;
  display:flex;
  gap:14px;
  align-items:center
}
.hero-footnote p {
  font-size:.75rem;
  line-height:1.6;
  margin:0;
  color:var(--soft)
}
.mini-mark {
  border:1px solid var(--line);
  border-radius:50%;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font:italic 18px var(--serif)
}
.hero-visual {
  position:relative;
  min-height:570px;
  transform-style:preserve-3d;
  transition:transform .2s ease-out;
  background:radial-gradient(ellipse at center,rgba(201,209,220,.25),transparent 67%)
}
.hero-photo {
  position:absolute;
  inset:12px 0 22px;
  overflow:hidden;
  mix-blend-mode:normal
}
.hero-photo img {
  width:100%;
  height:100%;
  object-fit:contain
}
.shine {
  position:absolute;
  inset:-50%;
  background:linear-gradient(110deg,transparent 43%,#fbf7ee88 50%,transparent 57%);
  transform:translateX(-80%);
  animation:shine 7s ease-in-out infinite;
  pointer-events:none
}
.orbit {
  position:absolute;
  border:1px solid var(--line);
  border-radius:50%;
  inset:38px;
  opacity:.5
}
.orbit-two {
  inset:4px 68px;
  transform:rotate(-28deg);
  border-style:dashed
}
.vertical-label {
  position:absolute;
  right:-14px;
  top:150px;
  writing-mode:vertical-rl;
  font-size:.65rem;
  letter-spacing:.24em
}
.visual-cross {
  position:absolute;
  font-size:24px;
  font-weight:200
}
.cross-one {
  top:8%;
  left:12%
}
.cross-two {
  right:9%;
  bottom:20%
}
.hero-caption {
  position:absolute;
  bottom:0;
  left:12px
}
.hero-caption span {
  font-size:.65rem;
  letter-spacing:.14em
}
.hero-caption p {
  font:italic 22px var(--serif);
  margin:9px 0
}
.hero-caption a {
  font-size:.75rem;
  border-bottom:1px solid var(--line)
}
.glass-tag {
  position:absolute;
  right:0;
  bottom:30px;
  backdrop-filter:blur(14px);
  background:#fbf7ee9e;
  border:1px solid #ffffff99;
  padding:15px 21px;
  font-size:.6rem;
  letter-spacing:.14em;
  box-shadow:0 12px 35px #07142a08
}
.glass-tag strong {
  font-size:.8rem;
  letter-spacing:0;
  font-weight:400
}
.craft-strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0
}
.craft-strip .shell {
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:center
}
.craft-strip span {
  font-size:.68rem;
  letter-spacing:.17em;
  white-space:nowrap
}
.craft-strip i {
  font-style:normal
}
.intro {
  position:fixed;
  inset:0;
  background:var(--navy);
  color:var(--cream);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  z-index:100;
  pointer-events:none;
  animation:intro-out .6s .5s forwards
}
.intro span {
  font:32px var(--serif);
  letter-spacing:.15em
}
.intro i {
  width:120px;
  height:1px;
  background:var(--cream);
  animation:cut-reveal .7s
}
.section {
  padding:110px 0
}
.section-head {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-end;
  margin-bottom:40px
}
.section-head h2 {
  margin-bottom:0
}
.section-head>p {
  max-width:340px;
  color:var(--soft)
}
.kicker {
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:20px
}
.muted {
  color:var(--soft)
}
@keyframes intro-out {
  to {
    opacity:0;
    visibility:hidden
  }
}
@keyframes cut-reveal {
  from {
    clip-path:inset(0 100% 0 0)
  }
  to {
    clip-path:inset(0)
  }
}
@keyframes shine {
  0%,40% {
    transform:translateX(-80%)
  }
  80%,100% {
    transform:translateX(80%)
  }
}
@media(min-width:1800px) {
  .hero {
    min-height:940px
  }
  .hero-visual {
    min-height:680px
  }
}
@media(max-width:1000px) {
  .shell {
    width:calc(100% - 48px)
  }
  .nav-links {
    gap:20px
  }
  .hero {
    min-height:750px
  }
  .hero-visual {
    min-height:470px
  }
  .actions {
    gap:16px
  }
  .hero-footnote {
    margin-top:30px
  }
  .craft-strip span:last-child,.craft-strip i:last-of-type {
    display:none
  }
}
@media(max-width:700px) {
  .shell {
    width:calc(100% - 36px)
  }
  .nav-wrap {
    top:12px
  }
  .nav {
    height:70px;
    padding:8px 16px
  }
  .brand img {
    width:94px;
    height:54px
  }
  .menu-toggle {
    display:flex;
    gap:14px;
    align-items:center;
    background:none;
    border:0;
    font-size:.875rem
  }
  .nav-links {
    display:none;
    position:absolute;
    left:18px;
    right:18px;
    top:80px;
    padding:24px;
    flex-direction:column;
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:0 20px 30px #07142a15
  }
  .nav-links.open {
    display:flex
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:132px;
    gap:20px;
    padding-bottom:45px;
    min-height:0
  }
  .eyebrow {
    font-size:.6rem;
    letter-spacing:.12em
  }
  h1 {
    font-size:clamp(3.8rem,14vw,6rem)
  }
  .hero-description {
    font-size:1rem
  }
  .hero-footnote {
    display:none
  }
  .hero-visual {
    min-height:400px;
    margin-top:15px
  }
  .hero-caption {
    left:0
  }
  .glass-tag {
    padding:10px;
    bottom:8px
  }
  .vertical-label {
    right:-6px
  }
  .craft-strip {
    overflow:hidden
  }
  .craft-strip .shell {
    justify-content:center
  }
  .craft-strip span {
    font-size:.55rem
  }
  .craft-strip span:nth-of-type(3),.craft-strip i:nth-of-type(2) {
    display:none
  }
  .section {
    padding:72px 0
  }
  .section-head {
    display:block
  }
  .section-head>p {
    margin-top:24px
  }
  .intro span {
    font-size:26px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .intro {
    display:none
  }
}
/* Section compositions */
.story {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9%;
  align-items:center
}
.story-photo {
  position:relative;
  padding-bottom:30px
}
.story-photo img {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  mix-blend-mode:normal
}
.image-note {
  font-size:.63rem;
  letter-spacing:.19em;
  position:absolute;
  bottom:0;
  left:0
}
.story-copy>p:not(.kicker) {
  max-width:480px;
  color:var(--soft)
}
.story-detail {
  display:flex;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:26px;
  margin-top:28px
}
.story-detail>span {
  font-size:.7rem
}
.story-detail h3 {
  font-size:1.35rem;
  margin-bottom:12px
}
.story-detail p {
  font-size:.875rem
}
.sample-note,.catalog-note {
  font-size:.75rem;
  line-height:1.6;
  color:var(--soft)
}
.collection {
  background:var(--card);
  border-block:1px solid var(--line)
}
.catalog-note {
  max-width:730px;
  margin-bottom:30px
}
.filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:35px
}
.filters button {
  background:transparent;
  border:1px solid var(--line);
  border-radius:30px;
  padding:9px 19px;
  font-size:.8125rem;
  transition:background .2s,color .2s
}
.filters button.active {
  background:var(--navy);
  color:var(--cream)
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px 24px;
  min-height:200px
}
.product-card {
  min-width:0;
  transition:transform .2s;
  animation:card-enter .45s both
}
.product-image {
  display:block;
  position:relative;
  width:100%;
  padding:0;
  background:var(--cream);
  border:1px solid transparent;
  overflow:hidden;
  text-align:left;
  transition:box-shadow .3s,border .3s
}
.product-image:hover {
  border-color:var(--silver);
  box-shadow:0 14px 34px #07142a15
}
.product-image img {
  aspect-ratio:1;
  width:100%;
  object-fit:contain;
  mix-blend-mode:normal;
  transition:transform .6s
}
.product-image:hover img {
  transform:scale(1.045)
}
.product-image .quick-label {
  position:absolute;
  bottom:16px;
  left:16px;
  right:16px;
  padding:9px;
  text-align:center;
  font-size:.75rem;
  letter-spacing:.08em;
  background:#fbf7eed9;
  backdrop-filter:blur(12px);
  border:1px solid #fff7
}
.product-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.63rem;
  letter-spacing:.12em;
  margin:20px 0 9px;
  color:var(--soft)
}
.product-card h3 {
  font-size:1.6rem;
  margin:0 0 10px
}
.product-card>p {
  font-size:.8125rem;
  color:var(--soft);
  margin:0
}
.empty-products {
  grid-column:1/-1;
  padding:55px;
  text-align:center;
  border:1px solid var(--line);
  background:var(--cream)
}
.empty-products h3 {
  margin-bottom:14px
}
.empty-products p {
  max-width:520px;
  margin:0 auto 24px
}
.process {
  background:var(--deep);
  color:var(--cream);
  position:relative;
  overflow:hidden;
  background-image:linear-gradient(#c9d1dc05 1px,transparent 1px),linear-gradient(90deg,#c9d1dc05 1px,transparent 1px);
  background-size:64px 64px
}
.process .section-head>p,.process-note {
  color:var(--silver)
}
.process-note {
  font-size:.75rem
}
.timeline {
  display:grid;
  grid-template-columns:repeat(5,minmax(190px,1fr));
  gap:24px;
  overflow:auto;
  padding:20px 0 20px;
  scroll-snap-type:x mandatory;
  scrollbar-color:var(--silver) var(--soft)
}
.timeline article {
  border-top:1px solid #c9d1dc55;
  padding-top:20px;
  scroll-snap-align:start
}
.timeline article>span {
  font-size:.75rem;
  color:var(--silver)
}
.process-glyph {
  height:90px;
  font:55px var(--serif);
  display:flex;
  align-items:center;
  color:var(--silver)
}
.timeline h3 {
  font-size:1.5rem
}
.timeline p {
  font-size:.8125rem;
  color:var(--silver);
  max-width:205px
}
.timeline-hint {
  font-size:.625rem;
  letter-spacing:.18em;
  margin:16px 0 0;
  color:var(--silver)
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px
}
.feature {
  grid-column:span 2;
  padding:34px;
  background:linear-gradient(135deg,#fbf7eeb3,#fbf7ee55);
  border:1px solid #ffffffbb;
  box-shadow:0 10px 35px #07142a05;
  backdrop-filter:blur(14px)
}
.feature:nth-child(n+4) {
  grid-column:span 3
}
.feature>span {
  font-size:.625rem;
  letter-spacing:.15em;
  display:block;
  margin-bottom:42px
}
.feature h3 {
  font-size:1.6rem
}
.feature p {
  font-size:.875rem;
  color:var(--soft);
  margin-bottom:0
}
.stats-band {
  padding:55px 0;
  background:var(--navy);
  color:var(--cream)
}
.stats-band>.shell>.kicker {
  text-align:center
}
.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  text-align:center
}
.stats>div+div {
  border-left:1px solid #c9d1dc44
}
.stats strong {
  display:block;
  font:clamp(2.8rem,5vw,5rem) var(--serif);
  letter-spacing:-.04em
}
.stats span {
  display:block;
  font-size:.8125rem;
  margin-top:12px;
  color:var(--silver)
}
.stats-band .sample-note {
  color:var(--silver);
  text-align:center;
  margin:30px 0 0
}
.gallery {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:24px;
  align-items:start
}
.gallery button {
  padding:0;
  border:0;
  background:none;
  text-align:left;
  overflow:hidden
}
.gallery button:nth-child(2) {
  margin-top:70px
}
.gallery button:nth-child(3) {
  margin-top:140px
}
.gallery img {
  aspect-ratio:1;
  object-fit:cover;
  width:100%;
  mix-blend-mode:normal;
  transition:transform .6s
}
.gallery button:hover img {
  transform:scale(1.035)
}
.gallery span {
  font-size:.625rem;
  letter-spacing:.14em;
  display:block;
  margin-top:18px
}
.reviews {
  background:var(--card);
  border-block:1px solid var(--line)
}
.review-layout {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:10%;
  align-items:center
}
.review-card {
  background:#f5efe077;
  backdrop-filter:blur(15px);
  border:1px solid #fff;
  padding:40px 48px;
  box-shadow:0 12px 40px #07142a05
}
.quote-mark {
  font:5rem var(--serif);
  height:68px;
  display:block
}
.review-card blockquote {
  margin:0;
  font:1.75rem/1.5 var(--serif);
  min-height:160px
}
.review-author {
  font-size:.75rem;
  margin-top:24px
}
.review-author span {
  display:block;
  color:var(--soft)
}
.review-controls {
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.7rem;
  letter-spacing:.15em
}
.review-controls button {
  border:1px solid var(--line);
  background:transparent;
  border-radius:50%;
  width:40px;
  height:40px;
  margin-left:8px;
  font-size:24px
}
.contact {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:10%;
  align-items:start
}
.contact-copy>p {
  color:var(--soft)
}
.contact-detail {
  margin-top:35px
}
.contact-detail>span {
  display:block;
  font-size:.625rem;
  letter-spacing:.16em;
  margin-bottom:10px
}
.contact-detail strong {
  font:1.35rem var(--serif)
}
.contact-buttons {
  display:flex;
  gap:12px;
  margin-bottom:14px
}
.outline-button {
  border:1px solid var(--line);
  background:transparent;
  padding:9px 22px;
  font-size:.8125rem
}
.inquiry-form {
  padding:36px;
  background:var(--card);
  border:1px solid #fff;
  box-shadow:0 10px 45px #07142a06
}
.inquiry-form h3 {
  font-size:1.7rem;
  margin-bottom:15px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:26px 0
}
.form-grid label {
  font-size:.75rem;
  display:block
}
.form-grid label span {
  color:var(--soft)
}
input,select,textarea {
  display:block;
  width:100%;
  min-width:0;
  margin-top:8px;
  padding:11px 12px;
  background:transparent;
  color:var(--navy);
  border:1px solid var(--line);
  border-radius:0;
  font-size:.875rem
}
textarea {
  resize:vertical
}
input::placeholder,textarea::placeholder {
  color:var(--soft);
  opacity:.75
}
.full {
  grid-column:1/-1
}
.inquiry-form>.button {
  width:100%;
  margin-bottom:15px
}
.form-result {
  background:var(--cream);
  padding:22px;
  border:1px solid var(--line);
  animation:card-enter .4s
}
.form-result p {
  font-size:.875rem
}
.form-result h3 {
  font-size:1.3rem
}
footer {
  background:var(--deep);
  color:var(--cream);
  padding:55px 0 25px
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding-bottom:35px
}
.footer-brand {
  font:2rem var(--serif);
  letter-spacing:.12em
}
.footer-top p {
  font-size:.8125rem;
  color:var(--silver);
  margin:12px 0 0
}
.footer-links {
  display:flex;
  gap:24px;
  font-size:.8125rem
}
.social-links {
  display:flex;
  gap:10px
}
.social-links button {
  width:36px;
  height:36px;
  border:1px solid #c9d1dc55;
  background:none;
  color:var(--cream);
  font-size:18px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #c9d1dc33;
  padding-top:24px;
  font-size:.65rem;
  color:var(--silver)
}
.footer-bottom>span:nth-child(2) {
  letter-spacing:.12em
}
#social-status {
  font-size:.75rem
}
dialog {
  width:min(960px,calc(100% - 36px));
  max-height:90dvh;
  padding:0;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--navy);
  overflow:auto;
  box-shadow:0 30px 100px #07142a55
}
dialog::backdrop {
  background:#07142aaa;
  backdrop-filter:blur(8px)
}
.modal-close {
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  background:var(--cream);
  border:1px solid var(--line);
  width:40px;
  height:40px;
  font-size:28px
}
.modal-layout {
  display:grid;
  grid-template-columns:1fr 1fr
}
.modal-layout>div:first-child {
  padding:28px;
  background:var(--cream)
}
.zoom-image {
  border:0;
  background:none;
  padding:0;
  width:100%;
  overflow:hidden;
  cursor:zoom-in
}
.zoom-image img {
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  mix-blend-mode:normal;
  transition:transform .35s
}
.zoom-image[aria-pressed=true] {
  cursor:zoom-out
}
.zoom-image[aria-pressed=true] img {
  transform:scale(1.9)
}
.zoom-caption {
  margin:20px 0 0
}
.modal-copy {
  padding:60px 35px 35px
}
.modal-copy h2 {
  font-size:2.6rem
}
.modal-copy>p {
  font-size:.875rem
}
.modal-copy dl {
  font-size:.8125rem;
  margin:25px 0
}
.modal-copy dl div {
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid var(--line);
  padding:10px 0
}
.modal-copy dd {
  margin:0;
  text-align:right
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.cursor-dot,.cursor-ring {
  display:none
}
.motion .reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s,transform .7s
}
.motion .reveal.visible {
  opacity:1;
  transform:none
}
@keyframes card-enter {
  from {
    opacity:0;
    transform:translateY(12px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@media(hover:hover) and (pointer:fine) {
  .cursor-dot,.cursor-ring {
    position:fixed;
    top:0;
    left:0;
    border-radius:50%;
    pointer-events:none;
    z-index:120;
    display:block;
    opacity:0
  }
  .cursor-dot {
    width:5px;
    height:5px;
    background:var(--navy);
    box-shadow:0 0 0 1px var(--cream)
  }
  .cursor-ring {
    width:30px;
    height:30px;
    border:1px solid var(--soft);
    box-shadow:0 0 0 1px #fbf7ee55;
    transition:width .2s,height .2s
  }
  .cursor-ring.hover {
    width:52px;
    height:52px
  }
}
@media(max-width:1000px) {
  .story,.contact {
    gap:6%
  }
  .product-grid {
    gap:28px 16px
  }
  .feature {
    padding:25px
  }
  .review-layout {
    gap:5%
  }
  .review-card {
    padding:28px
  }
  .footer-links {
    flex-direction:column;
    gap:8px
  }
  .inquiry-form {
    padding:25px
  }
}
@media(max-width:700px) {
  .story,.contact,.review-layout {
    grid-template-columns:1fr;
    gap:42px
  }
  .story-photo {
    max-width:500px
  }
  .product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 12px
  }
  .product-meta {
    font-size:.55rem;
    letter-spacing:.04em
  }
  .product-card h3 {
    font-size:1.25rem
  }
  .product-card>p {
    font-size:.75rem
  }
  .product-image .quick-label {
    left:8px;
    right:8px;
    bottom:8px;
    font-size:.625rem;
    padding:5px
  }
  .filters {
    gap:7px
  }
  .filters button {
    padding:8px 13px;
    font-size:.75rem
  }
  .feature-grid {
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .feature,.feature:nth-child(n+4) {
    grid-column:auto;
    padding:22px
  }
  .feature:last-child {
    grid-column:1/-1
  }
  .feature h3 {
    font-size:1.35rem
  }
  .feature>span {
    margin-bottom:28px
  }
  .stats strong {
    font-size:2.4rem
  }
  .stats span {
    font-size:.65rem
  }
  .stats-band .sample-note {
    font-size:.65rem
  }
  .gallery {
    gap:12px;
    grid-template-columns:1fr 1fr
  }
  .gallery button:nth-child(2) {
    margin-top:45px
  }
  .gallery button:nth-child(3) {
    margin-top:0;
    grid-column:1/-1;
    width:60%;
    margin-inline:auto
  }
  .gallery span {
    font-size:.55rem
  }
  .review-card blockquote {
    font-size:1.5rem;
    min-height:160px
  }
  .form-grid {
    gap:14px
  }
  .inquiry-form {
    padding:22px
  }
  .footer-top {
    align-items:flex-start;
    flex-wrap:wrap
  }
  .footer-bottom {
    flex-wrap:wrap;
    font-size:.65rem
  }
  .footer-bottom>span:nth-child(2) {
    order:3;
    width:100%
  }
  .modal-layout {
    grid-template-columns:1fr
  }
  .modal-layout>div:first-child {
    padding:20px 40px
  }
  .modal-copy {
    padding:24px
  }
  .modal-copy h2 {
    font-size:2.1rem
  }
  .modal-layout .zoom-image img {
    max-height:280px
  }
  .empty-products {
    padding:30px 20px
  }
  .contact-copy h2 {
    margin-bottom:25px
  }
}
@media(max-width:380px) {
  .form-grid {
    grid-template-columns:1fr
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .feature:last-child {
    grid-column:auto
  }
  .actions {
    align-items:flex-start;
    flex-direction:column
  }
  .hero-visual {
    min-height:355px
  }
  .stats strong {
    font-size:2rem
  }
}
@media(prefers-reduced-motion:reduce) {
  .motion .reveal {
    opacity:1;
    transform:none
  }
  .cursor-dot,.cursor-ring {
    display:none!important
  }
}
/* Contain the rotating blueprint rings at intermediate tablet widths. */
.hero-visual {
  overflow:clip
}
.vertical-label {
  right:4px
}
@media(prefers-reduced-motion:no-preference) {
  .orbit-one {
    animation:blueprint-breathe 9s ease-in-out infinite
  }
  @keyframes blueprint-breathe {
    50% {
      transform:scale(.96);
      opacity:.25
    }
  }
}
/* Maintain legible supporting text and visible focus in dark sections. */
.product-card>p,.timeline p{font-size:.875rem}
.process :focus-visible,footer :focus-visible{outline-color:var(--cream)}
/* Transparent cutouts sit directly on the brand's cream and navy surfaces. */
.hero-photo img {
  padding: 20px 24px 54px;
}
.product-image img {
  padding: 25px 24px 52px;
}
.product-image[data-surface="navy"] {
  background: linear-gradient(145deg, var(--soft), var(--deep));
}
.story-photo img {
  padding: 28px;
  background: var(--card);
}
.gallery img {
  padding: 24px;
  background: var(--card);
}
.gallery button:nth-child(2) img {
  background: linear-gradient(145deg, var(--soft), var(--deep));
}
@media (max-width: 700px) {
  .product-image img { padding: 12px 12px 38px; }
  .hero-photo img { padding: 12px 12px 52px; }
  .gallery img { padding: 14px; }
}
/* Let square cutouts scale with their frame instead of HTML intrinsic heights. */
.product-image img,
.story-photo img,
.gallery img,
.zoom-image img {
  height: auto;
}
/* LUXURY GLASS — cream light, silver edges, deep-blue optical depth. */
:root {
  --glass-light: linear-gradient(135deg, rgba(251,247,238,.9), rgba(251,247,238,.46) 58%, rgba(201,209,220,.24));
  --glass-edge: rgba(251,247,238,.85);
  --glass-shadow: 0 24px 55px -25px rgba(7,20,42,.36), 0 8px 20px -12px rgba(7,20,42,.22), inset 0 1px 0 rgba(251,247,238,.95), inset 0 -1px 0 rgba(11,31,58,.09);
}
body {
  background: radial-gradient(ellipse at 90% 9%, rgba(28,58,99,.15), transparent 25%), radial-gradient(ellipse at 0% 39%, rgba(201,209,220,.5), transparent 23%), radial-gradient(ellipse at 95% 75%, rgba(28,58,99,.09), transparent 22%), var(--cream);
}
.nav {
  color: var(--cream);
  background: linear-gradient(120deg, rgba(28,58,99,.96), rgba(11,31,58,.94) 50%, rgba(7,20,42,.96));
  border: 1px solid rgba(201,209,220,.4);
  border-radius: 14px;
  backdrop-filter: blur(30px) saturate(125%);
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  box-shadow: 0 18px 44px -18px rgba(7,20,42,.6), inset 0 1px 0 rgba(251,247,238,.25), inset 0 -1px 0 rgba(201,209,220,.12);
}
.brand img { filter: url(#cream-logo); }
.nav :focus-visible { outline-color: var(--cream); }
.nav-quote {
  border-color: rgba(201,209,220,.4);
  border-radius: 7px;
  background: linear-gradient(130deg, rgba(251,247,238,.14), rgba(251,247,238,.03));
  box-shadow: inset 0 1px 0 rgba(251,247,238,.16);
}
.nav-links a:hover { opacity: 1; color: var(--silver); }
.menu-toggle { color: var(--cream); }
.hero-visual {
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: radial-gradient(ellipse at 70% 20%, rgba(251,247,238,.9), transparent 60%), linear-gradient(135deg, rgba(251,247,238,.5), rgba(201,209,220,.27));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}
.hero-caption { left: 24px; bottom: 22px; }
.glass-tag { right: 18px; bottom: 28px; border-radius: 10px; }
.glass-tag, .review-card, .feature, .inquiry-form {
  background: var(--glass-light);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(110%);
  -webkit-backdrop-filter: blur(24px) saturate(110%);
}
.feature, .review-card, .inquiry-form { border-radius: 20px; }
.feature { transition: box-shadow .35s, transform .35s; }
.feature:hover { box-shadow: 0 28px 55px -24px rgba(7,20,42,.4), inset 0 1px 0 var(--card); }
.collection, .reviews {
  background: linear-gradient(125deg, rgba(251,247,238,.54), rgba(201,209,220,.18), rgba(251,247,238,.62));
  border-color: rgba(251,247,238,.8);
}
.product-card {
  padding: 12px 12px 24px;
  border: 1px solid var(--glass-edge);
  border-radius: 19px;
  background: var(--glass-light);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.product-meta, .product-card h3, .product-card>p { margin-left: 10px; margin-right: 10px; }
.product-image {
  border-radius: 11px;
  border-color: rgba(251,247,238,.85);
  background: radial-gradient(ellipse at 25% 15%, var(--card), transparent 70%), linear-gradient(145deg, rgba(245,239,224,.9), rgba(201,209,220,.36));
  box-shadow: inset 0 1px 0 var(--card), inset 0 -20px 40px rgba(11,31,58,.045);
}
.product-image[data-surface="navy"] {
  background: radial-gradient(ellipse at 15% 0%, rgba(201,209,220,.2), transparent 60%), linear-gradient(145deg, var(--soft), var(--deep));
  border-color: rgba(201,209,220,.42);
  box-shadow: inset 0 1px 0 rgba(251,247,238,.25), inset 0 -20px 45px rgba(7,20,42,.4);
}
.product-image .quick-label {
  border-radius: 7px;
  background: rgba(251,247,238,.79);
  box-shadow: 0 8px 22px -12px rgba(7,20,42,.5), inset 0 1px 0 var(--card);
}
.story-photo img, .gallery img {
  border: 1px solid var(--glass-edge);
  border-radius: 19px;
  background: var(--glass-light);
  box-shadow: var(--glass-shadow);
}
.gallery button { padding: 1px 1px 25px; }
.gallery img { box-shadow: 0 12px 24px -17px rgba(7,20,42,.35), inset 0 1px 0 var(--card); }
.process, .stats-band, footer {
  background: radial-gradient(ellipse at 12% 0%, rgba(28,58,99,.9), transparent 60%), linear-gradient(120deg, var(--navy), var(--deep));
  box-shadow: inset 0 1px 0 rgba(201,209,220,.35), inset 0 -1px 0 rgba(201,209,220,.18);
}
.timeline article {
  padding: 24px 20px;
  border: 1px solid rgba(201,209,220,.24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(201,209,220,.11), rgba(201,209,220,.025));
  box-shadow: 0 15px 25px -18px rgba(7,20,42,.8), inset 0 1px 0 rgba(251,247,238,.14);
}
.stats { padding: 28px 10px; border: 1px solid rgba(201,209,220,.22); border-radius: 18px; background: linear-gradient(120deg, rgba(201,209,220,.1), rgba(201,209,220,.025)); box-shadow: inset 0 1px 0 rgba(251,247,238,.15); }
.button {
  border-radius: 8px;
  background: linear-gradient(135deg, var(--soft), var(--navy) 68%, var(--deep));
  border-color: rgba(201,209,220,.38);
  box-shadow: 0 12px 22px -13px rgba(7,20,42,.6), inset 0 1px 0 rgba(251,247,238,.25);
}
.outline-button, .filters button { background: rgba(251,247,238,.45); box-shadow: inset 0 1px 0 var(--card); }
.outline-button { border-radius: 7px; }
.filters button.active { background: linear-gradient(130deg, var(--soft), var(--navy)); box-shadow: inset 0 1px 0 rgba(251,247,238,.2), 0 8px 18px -12px var(--deep); }
input, select, textarea { border-radius: 7px; background: rgba(251,247,238,.5); box-shadow: inset 0 2px 7px rgba(7,20,42,.035), 0 1px 0 rgba(251,247,238,.9); }
dialog { border-radius: 20px; background: rgba(251,247,238,.96); border-color: var(--glass-edge); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
dialog::backdrop { background: rgba(7,20,42,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.modal-layout>div:first-child { background: linear-gradient(145deg, rgba(245,239,224,.9), rgba(201,209,220,.35)); }
.modal-close { border-radius: 50%; }
@media(max-width:700px) {
  .nav { border-radius: 12px; }
  .nav-links { color: var(--cream); border-radius: 12px; background: linear-gradient(135deg, rgba(28,58,99,.98), rgba(7,20,42,.98)); border-color: rgba(201,209,220,.3); box-shadow: 0 22px 44px -14px rgba(7,20,42,.6), inset 0 1px 0 rgba(251,247,238,.2); }
  .hero-visual { border-radius: 20px; }
  .hero-caption { left: 15px; bottom: 18px; }
  .hero-caption p { font-size: 18px; }
  .glass-tag { right: 10px; bottom: 90px; }
  .product-card { padding: 7px 7px 17px; border-radius: 13px; }
  .product-meta, .product-card h3, .product-card>p { margin-left: 4px; margin-right: 4px; }
  .feature, .review-card, .inquiry-form { border-radius: 15px; }
}
@supports not (backdrop-filter: blur(1px)) {
  .feature, .review-card, .inquiry-form, .product-card { background: var(--card); }
  .nav { background: var(--navy); }
}
/* Balanced collection: two complete desktop rows, consistent image and text rhythm. */
.product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
  align-items: stretch;
}
.product-card {
  padding: 10px 10px 24px;
  border-radius: 16px;
  box-shadow: 0 14px 32px -23px rgba(7,20,42,.35), inset 0 1px 0 var(--card);
}
.product-image { border-radius: 10px; }
.product-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 22px;
}
.product-image .quick-label {
  position: static;
  display: block;
  margin: 0 12px 12px;
  padding: 9px 6px;
  font-size: .75rem;
  letter-spacing: .1em;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(251,247,238,.7);
}
.product-meta {
  margin: 20px 8px 10px;
  font-size: .6875rem;
  line-height: 1.5;
  letter-spacing: .08em;
}
.product-card h3 {
  margin: 0 8px 12px;
  min-height: 2.4em;
  font-size: clamp(1.3rem, 1.7vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.product-card>p {
  margin: 0 8px;
  font-size: .875rem;
  line-height: 1.65;
}
@media (max-width: 1199px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .product-card h3 { font-size: 1.6rem; }
  .product-image img { padding: 28px; }
}
@media (max-width: 599px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .product-card { padding: 12px 12px 24px; }
  .product-card h3 { min-height: 0; font-size: 1.65rem; }
  .product-card>p { font-size: 1rem; }
  .product-meta { font-size: .75rem; }
  .product-image img { padding: 26px; }
  .product-image .quick-label { padding: 11px; }
}
/* Quiet scroll invitation and direction-aware navigation. */
.nav-wrap {
  opacity: 1;
  transform: translateY(0);
  transition: top .3s, opacity .3s ease, transform .35s ease;
}
.nav-wrap.header-hidden {
  opacity: 0;
  transform: translateY(-22px);
  pointer-events: none;
}
.nav-wrap:has(:focus-visible) {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.scroll-cue {
  display: flex;
  width: fit-content;
  margin: -32px auto 30px;
  align-items: center;
  gap: 12px;
  color: var(--soft);
  font-size: .6875rem;
  letter-spacing: .18em;
}
.scroll-track {
  display: block;
  width: 20px;
  height: 32px;
  border: 1px solid rgba(28,58,99,.4);
  border-radius: 12px;
  position: relative;
}
.scroll-track i {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 2px;
  height: 7px;
  border-radius: 2px;
  background: var(--navy);
  animation: scroll-invitation 1.9s ease-in-out infinite;
}
@keyframes scroll-invitation {
  0%, 15% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  80%, 100% { transform: translateY(11px); opacity: 0; }
}
@media (max-width: 700px) {
  .scroll-cue { margin: -16px auto 26px; font-size: .625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-track i { animation: none; opacity: 1; }
  .nav-wrap { transition: none; }
  .nav-wrap.header-hidden { transform: none; }
}
/* Scroll reveals animate opacity/transform only; no layout shifts or blur repaint. */
.motion .reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .75s cubic-bezier(.2,.65,.3,1), transform .85s cubic-bezier(.2,.65,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion .story-photo.reveal { transform: translate3d(0, 24px, 0) scale(.98); }
.motion .gallery>.reveal { transform: translate3d(0, 32px, 0) scale(.98); }
.motion .reveal.visible,
.motion .reveal:focus-within { opacity: 1; transform: none; }
.product-card { animation: none; }
.scroll-cue:hover .scroll-track { border-color: var(--navy); }
@media(prefers-reduced-motion:reduce) {
  .motion .reveal, .motion .story-photo.reveal, .motion .gallery>.reveal {
    opacity: 1; transform: none; transition: none;
  }
}
@media print {
  .reveal { opacity: 1!important; transform: none!important; }
  .nav-wrap, .scroll-cue { display: none; }
}

/* Original photo-led gallery, proportioned to a laptop viewport. */
#gallery { padding-block: 40px 36px; scroll-margin-top: 0; }
#gallery .section-head { margin-bottom: 28px; }
#gallery .section-head h2 { font-size: clamp(2.5rem,4vw,4.25rem); line-height: 1.05; }
#gallery .section-head > p { font-size: .9rem; }
.gallery-original { --tile-height: clamp(220px,calc(100svh - 410px),380px); grid-template-columns: 1.18fr 1fr 1fr; gap: 24px; align-items: start; }
.gallery-original > button { min-width: 0; padding: 1px 1px 10px; width: 100%; grid-column: auto; margin: 0; }
.gallery-original > button:nth-child(2) { margin-top: 24px; }
.gallery-original > button:nth-child(3) { margin: 48px 0 0; width: 100%; }
.gallery-original img { display: block; width: 100%; height: var(--tile-height); aspect-ratio: auto; object-fit: contain; padding: 22px; border-radius: 20px; background: linear-gradient(135deg,var(--card),rgba(201,209,220,.22)); border: 1px solid rgba(251,247,238,.9); }
.gallery-original > button:nth-child(2) img { background: linear-gradient(145deg,var(--soft),var(--deep)); border-color: rgba(201,209,220,.35); }
.gallery-original > button:not(:first-child) img { height: calc(var(--tile-height) - 48px); }
.gallery-original span { margin-top: 14px; font-size: .64rem; letter-spacing: .14em; }
@media(max-width:700px) {
  #gallery { padding-block: 40px; }
  #gallery .section-head { gap: 20px; }
  .gallery-original { grid-template-columns: 1fr; gap: 24px; }
  .gallery-original > button:nth-child(n) { margin: 0; width: 100%; grid-column: auto; }
  .gallery-original > button:nth-child(n) img { height: clamp(240px,45svh,360px); }
}
@media(prefers-reduced-motion:reduce) { .gallery-original button:hover img { transform: none; } }