:root {
  color-scheme: light;
  --paper: #f8f7f1;
  --ink: #14241c;
  --muted: #46574b;
  --forest: #142d24;
  --lime: #d9ef9f;
  --sage: #e5ecdb;
  --rule: #cdd4c8;
  --max: 1280px;
  --gutter: clamp(20px, 5vw, 78px);
  font: 100%/1.55 "Inter", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #4e8236; outline-offset: 5px; }
.hero :focus-visible, .site-footer :focus-visible { outline-color: var(--lime); }
::selection { color: var(--ink); background: var(--lime); }

.wrap { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.skip { position: fixed; inset: 8px auto auto 8px; z-index: 10; padding: 12px; transform: translateY(-150%); background: var(--paper); }
.skip:focus { transform: none; }

.site-header { border-bottom: 1px solid var(--rule); }
.header-inner, .footer-inner, .site-nav, .brand {
  display: flex;
  align-items: center;
}
.header-inner, .footer-inner { justify-content: space-between; gap: 18px; }
.header-inner { min-height: 76px; padding-block: 10px; }
.brand {
  flex: none;
  gap: 10px;
  font-size: .91rem;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: .065em;
  text-decoration: none;
}
.brand img { border-radius: 50%; }
.brand-light { font-weight: 550; }
.site-nav { gap: clamp(20px, 3.1vw, 48px); }
.site-nav a { text-decoration: none; font-size: .91rem; font-weight: 650; }
.site-nav a:hover, .site-nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.site-nav .button:hover { text-decoration: none; }

.button, .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 44px;
  font-size: .94rem;
  font-weight: 700;
  text-underline-offset: 5px;
}
.button {
  border: 1px solid transparent;
  padding: 10px 17px;
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.button span, .text-link span { font-size: 1.05rem; line-height: 1; }
.button-outline { border-color: #617367; }
.button-outline:hover, .button-dark { color: var(--paper); background: var(--forest); }
.button-dark:hover { background: #28503c; }
.button-lime { color: var(--ink); background: var(--lime); }
.button-lime:hover { background: #edf8d1; }
.text-link:hover { text-decoration-thickness: 2px; }
.menu-button {
  border: 1px solid #617367;
  padding: 8px 12px;
  min-height: 44px;
  color: var(--ink);
  background: var(--paper);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.menu-button span { margin-left: 6px; }

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--paper);
  background: var(--forest);
}
.hero-copy {
  width: min(100%, calc(var(--max) / 2 + var(--gutter)));
  justify-self: end;
  align-self: center;
  padding: clamp(50px, 6vw, 96px) clamp(24px, 3vw, 56px) clamp(54px, 6vw, 96px) var(--gutter);
}
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #425747;
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.kicker > span { width: 18px; height: 2px; background: currentColor; }
.kicker-light { color: var(--lime); }
h1, h2, h3 { font-family: "Archivo Black", "Inter", system-ui, sans-serif; }
h1, h2 { font-weight: 850; letter-spacing: -.069em; line-height: .99; }
.hero h1 {
  margin-top: 25px;
  font-size: clamp(2.9rem, 5.6vw, 5.9rem);
}
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-description {
  max-width: 33ch;
  margin-top: 25px;
  color: #e0e8df;
  font-size: clamp(1rem, 1.25vw, 1.17rem);
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; }
.hero-image {
  position: relative;
  min-height: 100%;
  background: #a8b0a3;
  overflow: hidden;
}
.hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
.hero-image figcaption {
  position: absolute;
  inset: auto 22px 20px auto;
  padding: 6px 10px;
  color: var(--paper);
  background: #14241c;
  font-size: .72rem;
  font-weight: 650;
}
.showcase { isolation: isolate; }
.showcase-stage { position: absolute; inset: 0; perspective: 950px; }
.showcase .showcase-image {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--showcase-scale, 1));
  transition: transform .26s ease-out;
}
.showcase figcaption {
  inset: auto 20px 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 7px 8px 7px 13px;
  background: #14241c;
}
.showcase-controls { display: flex; gap: 4px; }
.showcase-controls button {
  min-height: 44px;
  min-width: 60px;
  padding: 4px 9px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}
.showcase-controls button:hover { border-color: #d9ef9f; }
.showcase-controls button[aria-pressed="true"] { color: var(--ink); background: var(--lime); }

.section { padding-block: clamp(60px, 7.3vw, 110px); }
.section-intro {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: end;
  gap: 20px 52px;
  margin-bottom: 36px;
}
h2 { font-size: clamp(2.45rem, 5.1vw, 5.05rem); }
h3 { font-size: 1.34rem; line-height: 1.2; letter-spacing: -.04em; }
.section-intro p { max-width: 37ch; justify-self: end; color: var(--muted); font-size: 1.05rem; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); }
.service { padding: clamp(20px, 2.6vw, 38px); }
.service + .service { border-left: 1px solid var(--rule); }
.service-photo {
  position: relative;
  aspect-ratio: 5 / 4;
  margin-bottom: 20px;
  isolation: isolate;
  overflow: hidden;
  background: var(--sage);
  perspective: 700px;
}
.service-photo img, .care-photo img { width: 100%; height: 100%; object-fit: cover; }
.service-photo img { transition: transform .32s ease-out; }
.service-photo figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 72px);
  padding: 6px 10px;
  color: var(--paper);
  background: var(--forest);
  font-size: .78rem;
  font-weight: 650;
}
.service-preview {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: var(--lime);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.2rem;
}
.service-preview:focus-visible { outline-offset: -4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .service:hover .service-photo img, .service:focus-within .service-photo img {
    transform: rotateX(5deg) rotateY(-7deg) scale(1.13);
  }
  .service-photo figcaption { transform: translateY(calc(100% + 12px)); transition: transform .25s ease-out; }
  .service:hover figcaption, .service:focus-within figcaption { transform: none; }
}
.team-dialog {
  width: min(700px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  color: var(--ink);
  background: var(--paper);
}
.team-dialog::backdrop { background: rgb(11 24 17 / 78%); }
.team-dialog form { position: absolute; right: 12px; top: 12px; }
.team-dialog-close { min-height: 44px; padding: 6px 13px; border: 1px solid var(--rule); background: var(--paper); cursor: pointer; }
.team-dialog img { width: 100%; height: min(55vh, 480px); object-fit: contain; background: var(--forest); }
.team-dialog-copy { padding: 18px 24px 24px; }
.team-dialog-copy h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); }
.team-dialog-copy p { margin-top: 8px; color: var(--muted); }
.service p { max-width: 32ch; margin-top: 9px; color: var(--muted); }

.everyday { background: #eeebf2; }
.design-gallery { margin-top: clamp(30px, 5vw, 66px); }
.team-sample-note { margin-top: 10px; }
.design-gallery > p { margin-top: 8px; color: var(--muted); }
.design-grid, .everyday-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.design-grid { margin-top: 18px; }
.design-grid figure { border: 1px solid var(--rule); }
.design-grid img, .everyday-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.design-grid figcaption { display: flex; flex-wrap: wrap; gap: 3px 10px; justify-content: space-between; padding: 13px; font-weight: 700; }
.design-grid figcaption span, .sample-note { color: var(--muted); font-size: .84rem; font-weight: 550; }
.kit-view { position: relative; aspect-ratio: 1; perspective: 900px; background: #edeae7; }
.kit-view > img { height: 100%; }
.kit-turn {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.kit-turn:focus-visible { outline-offset: -5px; }
.kit-sides { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .48s ease; }
.kit-sides img { position: absolute; inset: 0; height: 100%; backface-visibility: hidden; }
.kit-sides img + img { transform: rotateY(180deg); }
.kit-view[data-side="back"] .kit-sides { transform: rotateY(180deg); }
.kit-control {
  position: absolute;
  right: 9px;
  bottom: 9px;
  padding: 6px 10px;
  color: var(--paper);
  background: var(--forest);
  font-size: .76rem;
  font-weight: 700;
}
.everyday-grid article { border: 1px solid #d0c8d6; background: var(--paper); }
.everyday-grid h3 { margin: 18px 18px 0; }
.everyday-grid p { margin-top: 9px; color: var(--muted); }
.everyday-grid article p { margin: 8px 18px 20px; }
.everyday .sample-note { margin-top: 10px; }
.apparel-materials { max-width: 65ch; margin-top: 22px; }
.everyday-link { margin-top: 12px; }

.engraving { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: clamp(24px, 5vw, 72px); }
.engraving p { max-width: 54ch; margin-top: 14px; color: var(--muted); }
.engraving-note { margin: 22px 0 10px; padding: 14px 18px; border-left: 3px solid #6a8a57; background: var(--sage); }
.engraving-note h3 { font-size: 1.1rem; }
.engraving-note p { margin-top: 6px; }
.engraving figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.engraving figcaption { margin-top: 8px; color: var(--muted); font-size: .82rem; }

.work-section { color: var(--paper); background: var(--forest); }
.work-section .section-intro p, .work-section .work-disclosure { color: #d7e3d7; }
.work-section :focus-visible { outline-color: var(--lime); }
.work-options, .work-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.work-options article { padding: clamp(18px, 3vw, 38px); color: var(--ink); background: var(--sage); }
.work-options p, .work-next p { margin-top: 10px; }
.work-steps {
  counter-reset: work-step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 0;
  margin: clamp(28px, 5vw, 64px) 0;
  list-style: none;
}
.work-steps li { counter-increment: work-step; border-top: 1px solid #739181; padding-top: 12px; }
.work-steps li::before { content: counter(work-step); display: block; margin-bottom: 6px; color: var(--lime); font-weight: 750; }
.work-steps p { margin-top: 8px; color: #d7e3d7; }
.work-shipping {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 60px);
  margin-bottom: clamp(24px, 4vw, 52px);
  padding: clamp(18px, 3vw, 38px);
  border: 1px solid #739181;
}
.work-shipping h3 { margin-bottom: 12px; }
.work-shipping details { border-top: 1px solid #739181; }
.work-shipping summary { padding: 12px 0; cursor: pointer; font-weight: 700; }
.work-shipping details p { max-width: 72ch; margin-bottom: 14px; color: #d7e3d7; }
.shipping-visual { min-width: 0; }
.shipping-visual figcaption { margin-top: 8px; color: #d7e3d7; font-size: .78rem; }
.box-scene {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #739181;
  background: #1a382c;
}
.box-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box-motion {
  position: absolute;
  inset: 0;
  background: url("assets/parcel-open.jpg") center / cover;
}
.box-motion-backdrop {
  position: absolute;
  inset: 0 0 auto;
  height: 31.3%;
  background: url("assets/parcel-closed.jpg") center top / 100% auto;
}
.box-hinged-lid {
  position: absolute;
  top: 31.2%;
  left: 8.6%;
  width: 83%;
  height: 47.5%;
  transform-origin: center top;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transition: transform .7s cubic-bezier(.25,.67,.26,1);
}
.box-lid-top, .box-lid-inside {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.box-lid-top {
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  background: url("assets/parcel-closed.jpg") 50.6% 59.4% / 120.48% 210.53% no-repeat;
}
.box-lid-inside {
  transform: rotateX(180deg);
  clip-path: polygon(4% 100%, 96% 100%, 100% 0, 0 0);
  background: url("assets/parcel-open.jpg") 50.6% 4.8% / 120.48% 360% no-repeat;
}
.is-open .box-hinged-lid { transform: rotateX(126deg); }
.box-closed { opacity: 1; transition: opacity .08s .61s; }
.box-open { opacity: 0; transition: opacity .08s; }
.is-open .box-closed { opacity: 0; transition-delay: 0s; }
.is-open .box-open { opacity: 1; transition-delay: .61s; }
.box-toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 14px;
  border: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 750;
}
.box-toggle span { padding: 7px 11px; background: #10241c; }
.box-toggle span + span { padding-left: 0; }
.box-toggle:focus-visible { outline-offset: -5px; }
.work-craft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.work-craft figure { color: var(--ink); background: var(--paper); }
.work-craft img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.work-craft figcaption { padding: 14px 18px 20px; }
.work-craft figcaption span { display: block; margin-top: 5px; color: var(--muted); }
.work-media { align-items: center; margin-top: clamp(22px, 4vw, 50px); gap: clamp(18px, 4vw, 55px); }
.work-media video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #10241c; }
.work-media figcaption, .work-disclosure { margin-top: 8px; font-size: .83rem; }
.work-next .button { margin-top: 14px; }
.work-gif-link { display: flex; width: fit-content; margin-top: 6px; }
.work-disclosure { margin-top: 20px; }

.guide-hero { background: var(--sage); }
.care-strip {
  color: var(--paper);
  background: linear-gradient(90deg, #10241cf5 0%, #10241ce8 27%, #10241c73 63%, #10241c0f 100%), #173327 url("assets/care-banner.jpg") center 48% / cover no-repeat;
}
.care-strip .kicker, .care-strip :focus-visible { color: var(--lime); outline-color: var(--lime); }
.care-strip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: clamp(290px, 29vw, 440px);
  padding-block: 44px;
}
.care-strip h2 { margin-top: 10px; font-size: clamp(2.2rem, 4vw, 4rem); }
.care-strip p:not(.kicker) { margin-top: 12px; color: #edf2e7; }
.care-strip .button { flex-shrink: 0; }
.contact { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 38px 68px; }
.contact h2 { margin-block: 14px 16px; }
.contact p:not(.kicker) { max-width: 38ch; color: var(--muted); margin-bottom: 22px; }
.contact-details { padding: clamp(22px, 3vw, 39px); border-top: 3px solid var(--forest); background: var(--sage); }
.contact-details ul { margin-block: 12px 8px; padding-left: 20px; }
.contact-details li + li { margin-top: 5px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #ffc439;
  color: #142c58;
  font-size: .76rem;
  font-weight: 700;
}
.payment-badge strong { font-size: 1rem; font-style: italic; }
.payment-badge strong span { color: #00559d; }
.site-footer { background: var(--forest); color: var(--paper); }
.footer-inner { min-height: 84px; padding-block: 14px; }
.footer-since { display: block; margin-top: 5px; font-size: .73rem; font-weight: 500; letter-spacing: 0; }
.footer-legal { color: #d7e3d7; font-size: .78rem; }
@media (max-width: 620px) {
  .footer-inner { flex-wrap: wrap; }
  .footer-legal { order: 1; flex-basis: 100%; }
}

.guide-hero-inner { padding-block: 32px clamp(48px, 7vw, 95px); }
.guide-hero h1 { margin-top: 20px; font-size: clamp(3.25rem, 8vw, 7.2rem); }
.guide-hero p { margin-top: 22px; max-width: 43ch; color: var(--muted); font-size: 1.1rem; }
.care-editorial { padding-block: 24px clamp(42px, 6vw, 90px); }
.care-jump { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.care-jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 4px; }
.care-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 22px clamp(24px, 5vw, 78px);
  padding-block: clamp(26px, 4vw, 58px);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 12px;
}
.care-story:nth-of-type(even) .care-photo { order: 1; }
.care-photo { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--sage); }
.care-photo img { transition: transform .45s ease-out; }
.care-story:hover img { transform: scale(1.045); }
.care-story h2, .care-faq h2 { font-size: clamp(1.85rem, 3.5vw, 3.45rem); }
.care-story p { margin-top: 16px; color: var(--muted); }
.care-tip { padding-left: 14px; border-left: 3px solid #6a8a57; }
@media (prefers-reduced-motion: no-preference) {
  .care-water img { animation: basin-motion 2.3s ease-in-out; }
  .care-water::after {
    content: "";
    position: absolute;
    inset: 46% auto auto 53%;
    width: 33%;
    height: 15%;
    border: 2px solid rgb(255 255 255 / 68%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: water-ripple 1.35s .25s ease-out 2;
  }
  @keyframes basin-motion {
    0%, 100% { transform: scale(1); }
    55% { transform: scale(1.065) translateY(1.6%); }
  }
  @keyframes water-ripple {
    0% { opacity: 0; transform: scale(.42) rotate(-12deg); }
    25% { opacity: .55; }
    100% { opacity: 0; transform: scale(1.3) rotate(-12deg); }
  }
}
.guide-note { padding: 20px; background: var(--sage); }
.care-faq { margin-top: 30px; padding: clamp(20px, 4vw, 50px); }
.care-faq h2 { margin-bottom: 18px; }
.care-faq details { border-top: 1px solid #afbeaa; padding-block: 10px; }
.care-faq summary { cursor: pointer; padding-block: 8px; font-weight: 700; }
.care-faq details p { max-width: 64ch; margin: 4px 0 8px; color: var(--muted); }

@media (max-width: 1050px) {
  .site-nav { gap: 12px; }
  .site-nav a { font-size: .82rem; }
}
@media (max-width: 820px) {
  .work-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1.04fr 1fr; }
  .hero h1 { font-size: clamp(2.65rem, 5.7vw, 4rem); }
  .header-inner { min-height: 68px; flex-wrap: wrap; gap: 8px; }
  .site-nav { width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-block: 5px; }
  .site-nav a { display: flex; align-items: center; min-height: 44px; padding-inline: 8px; }
  .site-nav a + a { border-top: 1px solid var(--rule); }
  .site-nav .button { align-self: flex-start; padding-inline: 10px; border-color: #617367; margin-top: 5px; }
}
@media (max-width: 700px) {
  .engraving { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { justify-self: stretch; padding: 41px var(--gutter) 35px; }
  .hero h1 { font-size: clamp(2.65rem, 9.6vw, 4.9rem); }
  .hero-image { min-height: 0; aspect-ratio: 1.08; }
  .hero-image figcaption { inset: auto 12px 12px auto; }
  .showcase figcaption { left: 12px; }
  .section-intro, .contact, .care-story { grid-template-columns: 1fr; }
  .section-intro { margin-bottom: 25px; }
  .section-intro p { justify-self: start; }
  .service-grid, .design-grid, .everyday-grid, .work-craft, .work-options, .work-media, .work-shipping { grid-template-columns: 1fr; }
  .service + .service { border-left: none; border-top: 1px solid var(--rule); }
  .service p { margin-top: 5px; }
  .care-strip-inner { flex-direction: column; align-items: flex-start; }
  .care-strip { background-position: center, 62% 50%; }
  .care-story:nth-of-type(even) .care-photo { order: 0; }
}
@media (max-width: 355px) {
  .brand { font-size: .78rem; gap: 6px; }
  .brand img { width: 34px; height: 34px; }
  .hero h1 { font-size: 2.55rem; }
  .footer-inner { flex-wrap: wrap; gap: 5px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .care-story:hover img { transform: none; }
}