:root {
  --ink: #1d211f;
  --ink-soft: #343831;
  --paper: #e9e0d2;
  --paper-light: #f4efe6;
  --saddle: #9a5b32;
  --olive: #60624e;
  --line: rgba(29, 33, 31, 0.22);
  --serif: "Iowan Old Style", "Palatino Linotype", Baskerville, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section: clamp(5rem, 10vw, 10rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--paper-light);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body.dialog-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.sr-only, .honeypot { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0 !important; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 999; padding: .7rem 1rem; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(1.5rem, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 1.5rem max(var(--gutter), env(safe-area-inset-left));
  color: white;
}
.brand img, .footer-brand img { width: clamp(9rem, 14vw, 12rem); }
.primary-nav { display: flex; align-items: baseline; gap: clamp(1.25rem, 3vw, 3rem); }
.primary-nav a { font-size: .73rem; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; }
.primary-nav a:not(.nav-enquire) { opacity: .82; }
.primary-nav a:hover { opacity: 1; }
.nav-enquire { padding-bottom: .14em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.menu-button { display: none; border: 0; background: transparent; padding: .5rem; }
.menu-button span:not(.sr-only) { display: block; width: 1.6rem; border-top: 1px solid white; margin: .35rem 0; }

.hero { position: relative; min-height: 100svh; height: 100dvh; display: grid; align-items: end; color: white; overflow: hidden; }
.hero-image { position: absolute; inset: 0; background: url('/assets/hero-workbench.png') center 52% / cover no-repeat; transform: translate3d(0, var(--hero-shift, 0), 0) scale(var(--hero-scale, 1.035)); transform-origin: 50% 35%; will-change: transform; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 12, 9, .38), rgba(15, 12, 9, .18) 40%, rgba(15, 12, 9, .72)); }
.hero-content { position: relative; z-index: 1; max-width: 1000px; padding: 0 max(var(--gutter), env(safe-area-inset-right)) max(clamp(4.5rem, 10vh, 8rem), calc(3rem + env(safe-area-inset-bottom))) max(var(--gutter), env(safe-area-inset-left)); }
.eyebrow, .section-number, .commission-type { margin: 0 0 1.2rem; font-size: .68rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }
.hero h1 { margin: 0 0 2rem; font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 8vw, 8.2rem); line-height: .91; letter-spacing: -.045em; }
.hero-index { position: absolute; z-index: 1; right: var(--gutter); bottom: 3rem; font-size: .65rem; letter-spacing: .18em; }
.text-link { display: inline-flex; align-items: center; gap: .85rem; padding: 0 0 .45rem; border: 0; border-bottom: 1px solid currentColor; background: transparent; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.text-link span { font-size: 1rem; transition: transform .2s ease; }
.text-link:hover span { transform: translate(.15rem, .08rem); }
.text-link.light { color: white; }

.section-pad { padding: var(--section) max(var(--gutter), env(safe-area-inset-right)) var(--section) max(var(--gutter), env(safe-area-inset-left)); }
.manifesto { --spot-x: 50%; --spot-y: 50%; position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(7rem, 1fr) 4fr; align-items: center; overflow: hidden; isolation: isolate; background: #211711; color: var(--paper-light); perspective: 1200px; }
.manifesto::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle 32rem at var(--spot-x) var(--spot-y), rgba(190,119,70,.34), transparent 70%), linear-gradient(125deg, #160f0b 0%, #2c1c13 52%, #17100c 100%); }
.manifesto::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .18; background: repeating-linear-gradient(96deg, transparent 0 7px, rgba(255,255,255,.035) 8px, transparent 9px 17px); mix-blend-mode: soft-light; pointer-events: none; }
.manifesto .section-number { position: relative; z-index: 2; align-self: start; color: rgba(244,239,230,.62); }
.manifesto blockquote { position: relative; z-index: 2; margin: 0; max-width: 1200px; font-family: var(--serif); font-size: clamp(3.5rem, 7.8vw, 8.8rem); line-height: .92; letter-spacing: -.05em; transform: translate3d(var(--manifesto-shift, 0), 0, 0) scale(var(--manifesto-scale, 1)); opacity: var(--manifesto-opacity, 1); transform-origin: left center; will-change: transform, opacity; pointer-events: none; }
.manifesto-line { display: block; }
.manifesto-word { display: inline-block; margin-right: .19em; color: rgba(244,239,230,.74); }
.manifesto-word[data-key-word="true"] { color: #fff7e9; text-shadow: 0 0 1.2em rgba(224,147,92,.55); }
.manifesto-mark { position: absolute; left: -.78em; top: -.45em; font-family: sans-serif; font-size: .24em; filter: drop-shadow(0 0 1rem rgba(255,189,129,.65)); transform: rotate(calc(-18deg + var(--orbit-turn, 0deg))); transition: transform .2s linear; }
.manifesto-stitch-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.manifesto-thread { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 1px; background: rgba(244,239,230,.14); }
.manifesto-thread::before { content: ""; display: block; width: var(--thread-progress, 0%); height: 1px; background: linear-gradient(90deg, transparent, #d89562 70%, #fff1da); box-shadow: 0 0 1.2rem rgba(216,149,98,.7); }
.manifesto-thread span { position: absolute; top: 50%; left: var(--thread-progress, 0%); width: .48rem; height: .48rem; border-radius: 50%; background: #fff1da; box-shadow: 0 0 1.4rem rgba(255,196,145,.9); transform: translate(-50%, -50%); }

.works { background: var(--paper-light); }
.section-head { display: grid; grid-template-columns: 1fr minmax(250px, 420px); gap: 3rem; align-items: end; margin-bottom: clamp(3rem, 7vw, 6rem); }
.section-head h2, .feature h2, .craft h2, .commissions h2, .enquiry h2 { margin: 0; font-family: var(--serif); font-size: clamp(3.2rem, 6.5vw, 7rem); font-weight: 400; line-height: .95; letter-spacing: -.04em; }
.section-intro { margin: 0; max-width: 38rem; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.25rem); }
.work-filters { display: flex; flex-wrap: wrap; gap: .55rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.filter { border: 1px solid var(--line); border-radius: 100px; padding: .5rem .9rem; background: transparent; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.filter.active, .filter:hover { background: var(--ink); color: var(--paper-light); }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(3rem, 5vw, 5rem) clamp(1rem, 2.25vw, 2.5rem); margin-top: 3rem; }
.work-card { display: grid; grid-template-rows: auto 1fr; align-self: stretch; min-width: 0; width: 100%; border: 0; padding: 0; background: transparent; text-align: left; cursor: pointer; }
.work-image { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1.04; background: #ddd4c8; }
.work-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.work-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.16) 48%, transparent 66%); transform: translateX(-120%); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.work-card:hover .work-image img { transform: scale(1.025); }
.work-card:hover .work-image::after { transform: translateX(120%); }
.work-card-index { position: absolute; top: 1rem; left: 1rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(244,239,230,.9); font-size: .64rem; }
.work-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 1rem; min-width: 0; padding-top: 1rem; }
.work-meta h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.35rem, 2.3vw, 2.2rem); font-weight: 400; line-height: 1.1; }
.work-meta p { margin: .45rem 0 0; color: var(--olive); font-size: .71rem; letter-spacing: .1em; text-transform: uppercase; }
.work-arrow { font-size: 1.25rem; }
.work-loading { grid-column: 1 / -1; padding: 6rem 0; color: var(--olive); }

.feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 820px; }
.feature-image-wrap { min-height: 630px; overflow: hidden; }
.feature-image-wrap img { width: 100%; height: 112%; object-fit: cover; transform: translate3d(0, var(--image-shift, -6%), 0) scale(1.025); will-change: transform; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 8vw, 8rem); background: var(--paper); }
.feature-copy h2 { margin-bottom: 1rem; font-size: clamp(3.5rem, 6vw, 6.5rem); }
.feature-subtitle { margin: 0 0 2.5rem; color: var(--saddle); font-family: var(--serif); font-size: 1.15rem; font-style: italic; }
.feature-copy > p:not(.section-number):not(.feature-subtitle):not(.feature-emphasis) { max-width: 38rem; }
.feature-copy .text-link { margin-top: 2rem; align-self: flex-start; }
.feature-emphasis { max-width: 32rem; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.15; }
.feature-podsaver .feature-copy { background: var(--ink); color: var(--paper-light); }

.craft { background: #d6d0c1; }
.craft-head { align-items: start; }
.craft-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.craft-grid article { padding: 2rem 2rem 2rem 0; border-right: 1px solid var(--line); }
.craft-grid article + article { padding-left: 2rem; }
.craft-grid article:last-child { border: 0; }
.craft-grid span { font-size: .65rem; letter-spacing: .15em; }
.craft-grid h3 { margin: 4rem 0 1.5rem; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 400; }
.craft-grid p { max-width: 28rem; margin: 0; color: var(--ink-soft); }

.commissions { background: var(--paper-light); }
.commissions > h2 { max-width: 1100px; margin-bottom: 5rem; }
.commission-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.commission-grid article { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 3rem 3rem 4rem 0; }
.commission-grid article + article { padding-left: 3rem; border-left: 1px solid var(--line); }
.commission-count { display: grid; place-items: center; align-self: start; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 50%; font-size: .7rem; }
.commission-grid h3 { margin: 0 0 1.2rem; font-family: var(--serif); font-size: clamp(2rem, 4vw, 4rem); font-weight: 400; }
.commission-grid p:not(.commission-type) { max-width: 32rem; margin-bottom: 2rem; color: var(--ink-soft); }

.testimonials { background: var(--paper); }
.testimonial-stage { max-width: 1050px; min-height: 350px; }
.testimonial-stage blockquote { margin: 0; }
.testimonial-stage blockquote p { margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 5.5rem); line-height: 1.08; letter-spacing: -.025em; }
.testimonial-stage footer { margin-top: 3rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.testimonial-stage footer span { display: block; margin-top: .35rem; color: var(--olive); font-weight: 400; }
.testimonial-controls { display: flex; gap: 1rem; align-items: center; justify-content: flex-end; margin-top: 2rem; }
.testimonial-controls button { width: 2.7rem; height: 2.7rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.testimonial-controls span { min-width: 4.5rem; text-align: center; font-size: .7rem; letter-spacing: .12em; }

.enquiry { display: grid; grid-template-columns: minmax(280px, .8fr) 1.2fr; gap: clamp(4rem, 9vw, 10rem); background: var(--ink); color: var(--paper-light); }
.enquiry-heading { position: sticky; top: 3rem; align-self: start; }
.enquiry h2 { font-size: clamp(3.5rem, 7vw, 7rem); }
.enquiry-heading > p:last-child { max-width: 27rem; color: rgba(244,239,230,.7); }
.enquiry-form { display: grid; gap: 2rem; }
.enquiry-form label, .choice-field legend { display: grid; gap: .7rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.enquiry-form input, .enquiry-form textarea, .enquiry-form select { width: 100%; border: 0; border-bottom: 1px solid rgba(244,239,230,.32); border-radius: 0; padding: .9rem 0; background: transparent; color: white; outline: none; text-transform: none; letter-spacing: normal; }
.enquiry-form input:focus, .enquiry-form textarea:focus, .enquiry-form select:focus { border-color: var(--paper-light); }
.enquiry-form select option { color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.choice-field { margin: 0; padding: 0 0 1rem; border: 0; }
.choice-field legend { margin-bottom: 1rem; }
.choice-field label { display: inline-flex; width: auto; margin: 0 .7rem .7rem 0; }
.choice-field input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choice-field span { display: block; padding: .65rem 1rem; border: 1px solid rgba(244,239,230,.3); border-radius: 100px; cursor: pointer; }
.choice-field input:checked + span { background: var(--paper-light); color: var(--ink); }
.gifting-fields { display: grid; gap: 2rem; }
.request-prompts { border-top: 1px solid rgba(244,239,230,.25); border-bottom: 1px solid rgba(244,239,230,.25); padding: 1.2rem 0; }
.request-prompts summary { cursor: pointer; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.request-prompts ol { padding-left: 1.25rem; color: rgba(244,239,230,.72); }
.request-prompts label { margin-top: 1.5rem; }
.form-submit-row { display: flex; align-items: center; gap: 1.5rem; }
.submit-button { border: 0; border-radius: 100px; padding: 1rem 1.5rem; background: var(--paper); color: var(--ink); cursor: pointer; }
.submit-button:disabled { opacity: .55; cursor: wait; }
.form-status { margin: 0; color: rgba(244,239,230,.75); }

.footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; padding: 5rem max(var(--gutter), env(safe-area-inset-right)) max(2.5rem, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); background: #101210; color: var(--paper-light); }
.footer p { margin-top: 0; }
.footer a { text-underline-offset: .3rem; }
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.footer-meta p { margin-top: auto; color: rgba(244,239,230,.52); font-size: .7rem; }

.work-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 0; background: var(--paper-light); color: var(--ink); }
.work-dialog::backdrop { background: rgba(15,16,14,.82); }
.dialog-close { position: fixed; z-index: 5; top: 1.25rem; right: 1.25rem; display: flex; align-items: center; gap: .7rem; border: 1px solid var(--line); border-radius: 100px; padding: .55rem .8rem .55rem 1rem; background: rgba(244,239,230,.92); cursor: pointer; }
.dialog-close span { font-size: 1.25rem; line-height: 1; }
.dialog-hero { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 100vh; }
.dialog-hero-image img { width: 100%; height: 100vh; object-fit: cover; }
.dialog-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 7rem); }
.dialog-copy h2 { margin: 0 0 1.5rem; font-family: var(--serif); font-size: clamp(3rem, 5vw, 5.5rem); font-weight: 400; line-height: .96; }
.dialog-copy .summary { font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; }
.dialog-facts { display: grid; gap: .6rem; margin: 2.5rem 0; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dialog-facts p { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; margin: 0; font-size: .82rem; }
.dialog-facts span { color: var(--olive); text-transform: uppercase; letter-spacing: .1em; font-size: .65rem; }
.dialog-story { max-width: 800px; margin: 0 auto; padding: var(--section) var(--gutter); }
.dialog-story p { margin: 0 0 1.5rem; font-family: var(--serif); font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.5; }
.dialog-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; padding: 0 .7rem .7rem; }
.dialog-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.dialog-cta { display: grid; place-items: center; min-height: 60vh; padding: var(--section) var(--gutter); background: var(--paper); text-align: center; }
.dialog-cta h3 { max-width: 900px; margin: 0 0 2rem; font-family: var(--serif); font-size: clamp(3rem, 7vw, 7rem); font-weight: 400; line-height: .98; }

.motion-ready .hero-content > * { animation: hero-arrive .95s cubic-bezier(.2,.7,.2,1) both; }
.motion-ready .hero-content > :nth-child(2) { animation-delay: .12s; }
.motion-ready .hero-content > :nth-child(3) { animation-delay: .25s; }
.reveal { opacity: 0; transform: translate3d(0, 2.25rem, 0); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.in-view { opacity: 1; transform: translate3d(0, 0, 0); }
@keyframes hero-arrive {
  from { opacity: 0; transform: translate3d(0, 2rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 900px) {
  .menu-button { display: block; z-index: 2; }
  .primary-nav { position: fixed; inset: 0; display: none; flex-direction: column; justify-content: center; background: var(--ink); }
  .primary-nav.open { display: flex; }
  .primary-nav a { font-family: var(--serif); font-size: 2rem; letter-spacing: 0; text-transform: none; }
  .manifesto { grid-template-columns: 1fr; align-content: center; gap: 2rem; }
  .section-head { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: 1fr; min-height: auto; }
  .feature-image-wrap { min-height: 75vw; }
  .feature-podsaver .feature-image-wrap { order: -1; }
  .enquiry { grid-template-columns: 1fr; }
  .enquiry-heading { position: static; }
  .dialog-hero { grid-template-columns: 1fr; }
  .dialog-hero-image img { height: 70vh; }
}

@media (max-width: 680px) {
  :root { --gutter: 1.25rem; --section: 5rem; }
  .site-header { padding-top: max(1.1rem, env(safe-area-inset-top)); }
  .brand img, .footer-brand img { width: 8.5rem; }
  .hero-content { padding-bottom: max(4rem, calc(3rem + env(safe-area-inset-bottom))); }
  .hero-index { display: none; }
  .manifesto { min-height: 88svh; }
  .manifesto blockquote { font-size: clamp(3.25rem, 14.5vw, 5.2rem); }
  .manifesto-mark { left: -.15em; top: -.75em; }
  .work-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .work-card { display: grid; width: 100%; margin: 0; }
  .work-meta { grid-template-columns: 1fr 1.5rem; }
  .feature-copy { padding: 4.5rem var(--gutter); }
  .feature-image-wrap { min-height: 110vw; }
  .craft-grid, .commission-grid { grid-template-columns: 1fr; }
  .craft-grid article, .craft-grid article + article { padding: 2rem 0 3rem; border: 0; border-bottom: 1px solid var(--line); }
  .craft-grid h3 { margin-top: 2rem; }
  .commission-grid article, .commission-grid article + article { padding: 2.5rem 0; border: 0; border-bottom: 1px solid var(--line); }
  .field-row { grid-template-columns: 1fr; }
  .form-submit-row { align-items: flex-start; flex-direction: column; }
  .footer { grid-template-columns: 1fr; }
  .footer-meta { align-items: flex-start; text-align: left; }
  .footer-meta p { margin-top: 2rem; }
  .dialog-hero-image img { height: 58vh; }
  .dialog-copy { padding: 3.5rem 1.25rem; }
  .dialog-gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero-image, .manifesto blockquote, .feature-image-wrap img { transform: none !important; }
  .manifesto-word { color: var(--paper-light); transform: none !important; }
  .reveal { opacity: 1; transform: none; }
}