:root { --ink:#222222; --ivory:#f7f4ee; --terra:#c96a43; --teal:#4f8c8d; --green:#617a46; --sand:#d7c5a8; --line:rgba(34,34,34,.17); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ivory); font-family:"DM Sans",Arial,sans-serif; font-size:16px; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.15; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; padding:18px clamp(22px,5vw,76px); position:absolute; inset:0 0 auto; z-index:5; }
.brand-logo { display:block; width:238px; height:76px; overflow:hidden; }
.brand-logo img { display:block; width:100%; height:100%; object-fit:contain; object-position:left center; filter:invert(1); }
.footer-logo { display:block; width:100%; height:100%; object-fit:contain; object-position:left center; mix-blend-mode:multiply; }
nav { display:flex; gap:30px; margin-left:80px; }
nav a,.header-cta,.arrow-link { color:var(--ink); text-decoration:none; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.site-header nav a,.site-header .header-cta { color:var(--ivory); }
.header-cta { background:none; border:0; padding:8px 0; }
.header-cta span,.arrow-link span,.button span,.text-button span { font-size:17px; margin-left:7px; }
.hero { min-height:100dvh; padding:0; display:block; position:relative; overflow:hidden; color:var(--ivory); background:var(--ink); }
.hero::after { content:""; position:absolute; z-index:2; inset:auto 0 0; height:clamp(100px,18vh,260px); pointer-events:none; background:linear-gradient(to bottom,rgba(247,244,238,0),var(--ivory) 94%); }
.hero-copy { position:absolute; z-index:3; left:clamp(22px,8vw,150px); top:52%; width:min(610px,calc(100% - 44px)); transform:translateY(-42%); }
.eyebrow { font:500 10px/1.4 "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; margin:0 0 22px; }
h1,h2 { font-family:Fraunces,Georgia,serif; font-weight:500; letter-spacing:-.065em; line-height:.91; margin:0; }
h1 { font-size:clamp(58px,7vw,105px); max-width:630px; }
h2 { font-size:clamp(42px,5vw,76px); }
em { color:var(--terra); font-style:italic; }
.intro { font-size:18px; line-height:1.55; max-width:435px; margin:32px 0; color:rgba(247,244,238,.9); }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.button { border:1px solid currentColor; padding:14px 19px; text-decoration:none; display:inline-flex; align-items:center; text-transform:uppercase; letter-spacing:.07em; font-size:11px; font-weight:600; transition:transform .25s ease, background .25s ease, color .25s ease; }
.button:hover,.button:active { transform:translateY(-2px); }
.button-dark { background:var(--ink); color:var(--ivory); }
.button-dark:hover { background:var(--terra); border-color:var(--terra); }
.button-light { background:var(--ivory); color:var(--ink); border-color:var(--ivory); }
.text-button { background:none; border:0; padding:0; color:var(--ivory); font-size:13px; border-bottom:1px solid currentColor; padding-bottom:4px; }
.hero-art { position:absolute; inset:0; overflow:hidden; background:var(--sand); }
.hero-art::before { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(17,21,19,.84) 0%,rgba(17,21,19,.58) 30%,rgba(17,21,19,.16) 66%,rgba(17,21,19,.18) 100%),linear-gradient(0deg,rgba(17,21,19,.5),transparent 45%); }
.hero-scene-frame { position:absolute; inset:0; width:100%; height:100%; }
.hero-scene-frame::after { content:""; position:absolute; inset:-20% -60%; pointer-events:none; background:linear-gradient(108deg, transparent 38%, rgba(255,248,224,.28) 49%, transparent 60%); transform:translateX(-43%); animation:lightSweep 9s ease-in-out infinite; mix-blend-mode:screen; }
.hero-scene { width:100%; height:100%; object-fit:cover; animation:sceneBreath 8s ease-in-out infinite alternate; }
.product-hotspot { position:absolute; z-index:2; display:flex; align-items:center; gap:8px; font:500 9px/1 "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; color:var(--ivory); text-shadow:0 1px 5px rgba(0,0,0,.5); }
.product-hotspot i { display:block; width:9px; height:9px; border-radius:50%; border:2px solid var(--ivory); background:var(--terra); box-shadow:0 0 0 0 rgba(201,106,67,.7); animation:hotspotPulse 2.6s ease-out infinite; }
.product-hotspot b { max-width:0; overflow:hidden; white-space:nowrap; opacity:0; font-weight:500; transition:max-width .35s ease, opacity .2s ease; }
.hero-art:hover .product-hotspot b { max-width:100px; opacity:1; }
.hotspot-tray { left:31%; top:50%; }
.hotspot-coaster { left:51%; top:77%; }
.hotspot-sign { left:64%; top:31%; }
.hero-scroll-cue { position:absolute; z-index:3; bottom:42px; left:clamp(22px,8vw,150px); display:flex; gap:10px; align-items:center; font:10px/1 "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.hero-scroll-cue i { display:block; position:relative; width:27px; height:1px; background:var(--ivory); overflow:hidden; }
.hero-scroll-cue i::after { content:""; position:absolute; inset:0; background:var(--terra); animation:scrollCue 1.5s ease-in-out infinite; }
.hero-caption { position:absolute; z-index:3; right:clamp(22px,5vw,76px); bottom:42px; color:var(--ivory); font:10px/1.55 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.hero-caption span { color:var(--terra); display:block; margin-bottom:5px; }
.statement { max-width:920px; padding:140px 24px 150px; margin:auto; text-align:center; }
.statement h2 { max-width:760px; margin:auto; }
.statement > p:last-child { max-width:470px; margin:28px auto 0; line-height:1.6; }
.gallery { padding:90px clamp(22px,8vw,150px) 130px; background:#e9e1d5; }
.section-heading { display:grid; grid-template-columns:1fr 1.25fr auto; align-items:end; gap:30px; padding-bottom:56px; }
.section-heading .eyebrow { align-self:start; }
.arrow-link { border-bottom:1px solid var(--ink); padding-bottom:7px; white-space:nowrap; }
.gallery-grid { display:grid; gap:clamp(42px,5vw,82px); }
.work-row { display:grid; gap:clamp(26px,3vw,46px); align-items:start; }
.work-row-collection { grid-template-columns:1fr 1fr; }
.work-row-brand { grid-template-columns:.8fr 1.2496fr 1.5fr; }
.work-row-objects { grid-template-columns:1.5fr 1fr; }
.gallery-note { margin:-30px 0 48px; font-size:.95rem; opacity:.7; font-style:italic; }
.work-card { min-width:0; display:flex; flex-direction:column; }
.image-wrap { height:auto; overflow:hidden; position:relative; display:grid; place-items:center; }
.image-wrap img { max-width:100%; max-height:100%; object-fit:contain; position:relative; z-index:1; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.work-card:hover img { transform:scale(1.035); }
.gallery-photo { background:#f8f7f4; border:1px solid rgba(34,34,34,.08); }
.gallery-photo img { display:block; width:100%; height:auto; object-fit:initial; transform:none; }
.work-card:hover .gallery-photo img { transform:none; }
.work-meta { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:13px; margin:14px 0 0; font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.work-meta span:last-child { color:#66615a; }
.material-strip { padding:clamp(82px,10vw,145px) 0; background:var(--green); color:var(--ivory); overflow:clip; }
.material-intro { display:grid; grid-template-columns:minmax(230px,.75fr) minmax(290px,1fr) minmax(220px,.75fr); align-items:end; gap:40px; padding:0 clamp(22px,8vw,150px) 58px; }
.material-intro .eyebrow { grid-column:1; margin:0; }
.material-intro h2 { grid-column:2; font-size:clamp(54px,6.4vw,104px); }
.material-intro > p:not(.eyebrow) { grid-column:3; margin:0 0 8px; max-width:240px; font-size:15px; line-height:1.55; }
.material-hint { grid-column:2; grid-row:2; margin-top:18px; font:10px/1 "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.material-hint b { font:400 20px/0 sans-serif; margin-left:7px; }
.material-rail-wrap { --material-scroll-distance:90vh; position:relative; height:calc(100vh + var(--material-scroll-distance)); }
.material-rail-sticky { position:sticky; top:calc(50vh - 195px); }
.material-rail { display:flex; gap:16px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:none; scroll-padding-left:clamp(22px,8vw,150px); padding:3px clamp(22px,8vw,150px) 18px; scrollbar-width:none; -ms-overflow-style:none; }
.material-rail::-webkit-scrollbar { display:none; }
.material-arrow { position:absolute; z-index:3; top:50%; width:52px; height:52px; border:1px solid rgba(247,244,238,.7); border-radius:50%; color:var(--ivory); background:rgba(30,48,27,.78); backdrop-filter:blur(8px); font:300 27px/1 Arial,sans-serif; transform:translateY(-50%); transition:background .2s ease,transform .2s ease,opacity .2s ease; }
.material-arrow:hover { background:var(--terra); transform:translateY(-50%) scale(1.06); }
.material-arrow:disabled { opacity:.28; pointer-events:none; }
.material-arrow-prev { left:clamp(8px,3vw,48px); }
.material-arrow-next { right:clamp(8px,3vw,48px); }
.material-card { flex:0 0 min(320px,72vw); min-height:360px; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:23px; overflow:hidden; scroll-snap-align:start; isolation:isolate; color:var(--ivory); border:1px solid rgba(247,244,238,.25); background:#466636; }
.material-card::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.84; background-image:linear-gradient(135deg,rgba(19,25,21,.28),rgba(19,25,21,.03) 65%,rgba(19,25,21,.25)),url("assets/website-gallery/material-texture-contact-sheet.webp"); background-size:100% 100%,auto 200%; background-position:center,var(--texture-x) var(--texture-y); transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .4s ease; }
.material-card:hover::before { transform:scale(1.08); opacity:1; }
.material-card > span { font:10px/1 "DM Mono",monospace; letter-spacing:.08em; }
.material-card h3 { margin:0; font:500 clamp(54px,5.6vw,90px)/.88 Fraunces,Georgia,serif; letter-spacing:-.075em; }
.material-card p { max-width:180px; margin:0; font-size:13px; line-height:1.45; }
.material-card-wood { --texture-x:0%; --texture-y:0%; }
.material-card-leather { --texture-x:50%; --texture-y:0%; }
.material-card-stone { --texture-x:100%; --texture-y:0%; }
.material-card-acrylic { --texture-x:0%; --texture-y:100%; }
.material-card-glass { --texture-x:50%; --texture-y:100%; }
.material-card-metal { --texture-x:100%; --texture-y:100%; }
.material-card-slate::before { background-image:linear-gradient(135deg,rgba(7,14,18,.28),rgba(7,14,18,.02) 68%,rgba(7,14,18,.35)),url("assets/website-gallery/material-slate-texture.webp"); background-size:100% 100%,cover; background-position:center; }
.material-card-cork::before { background-image:linear-gradient(135deg,rgba(69,40,14,.21),rgba(69,40,14,.02) 68%,rgba(69,40,14,.31)),url("assets/website-gallery/material-cork-texture.webp"); background-size:100% 100%,cover; background-position:center; }
.material-card-rubber::before { background-image:linear-gradient(135deg,rgba(4,7,8,.24),rgba(4,7,8,.02) 68%,rgba(4,7,8,.36)),url("assets/website-gallery/material-rubber-texture.webp"); background-size:100% 100%,cover; background-position:center; }
.uv-printing { display:grid; grid-template-columns:minmax(250px,.85fr) minmax(280px,1.1fr); gap:48px clamp(40px,8vw,150px); margin:clamp(76px,10vw,140px) clamp(22px,8vw,150px) 0; padding-top:clamp(36px,5vw,72px); border-top:1px solid rgba(247,244,238,.38); }
.uv-printing-intro h3 { margin:0; font:500 clamp(48px,5vw,82px)/.9 Fraunces,Georgia,serif; letter-spacing:-.07em; }
.uv-printing-copy { align-self:end; max-width:510px; }
.uv-printing-copy p { margin:0; font-size:17px; line-height:1.58; color:#efede7; }
.uv-link { display:inline-block; margin-top:25px; padding-bottom:7px; border-bottom:1px solid rgba(247,244,238,.75); color:var(--ivory); font:600 11px/1 "DM Mono",monospace; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; }
.uv-link span { margin-left:7px; font-size:16px; }
.uv-benefits { grid-column:1/-1; display:grid; grid-template-columns:1.05fr .95fr 1.2fr; gap:clamp(25px,4vw,66px); margin:4px 0 0; }
.uv-benefits div { border-top:1px solid rgba(247,244,238,.38); padding-top:17px; }
.uv-benefits dt { font:500 13px/1.25 "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }
.uv-benefits dd { max-width:305px; margin:13px 0 0; color:#e6e3dc; font-size:14px; line-height:1.55; }
.uv-durability,.uv-comparison { border-top:1px solid rgba(247,244,238,.38); padding-top:18px; }
.uv-durability { grid-column:1; }
.uv-durability > p:not(.eyebrow) { max-width:390px; margin:14px 0 0; color:#e6e3dc; font-size:14px; line-height:1.6; }
.uv-comparison { grid-column:2; }
.uv-comparison > .eyebrow { margin-bottom:3px; }
.comparison-row { display:grid; grid-template-columns:minmax(120px,.55fr) 1.45fr; gap:20px; padding:14px 0; border-top:1px solid rgba(247,244,238,.2); }
.comparison-row h4 { margin:0; font:600 11px/1.35 "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }
.comparison-row p { margin:0; color:#e6e3dc; font-size:13px; line-height:1.5; }
.mockup-section { padding:140px clamp(22px,12vw,190px); background:var(--ink); color:var(--ivory); display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; overflow:hidden; }
.mockup-section .intro { color:#ddd9d1; }
.mockup-copy > p:not(.eyebrow) { max-width:420px; color:#d6d1c9; line-height:1.6; margin:26px 0 32px; }
.mockup-stack { position:relative; min-height:410px; }
.mockup-paper { position:absolute; width:min(100%,360px); aspect-ratio:1/.69; left:50%; top:50%; transform-origin:center; }
.paper-back,.paper-mid { overflow:hidden; display:grid; place-items:center; box-shadow:0 18px 45px rgba(0,0,0,.22); }
.paper-back { width:min(65%,235px); aspect-ratio:4/5; transform:translate(5%,-59%) rotate(10deg); }
.paper-mid { width:min(92%,330px); aspect-ratio:3/2; transform:translate(-87%,-50%) rotate(-9deg); }
.paper-back img,.paper-mid img { width:100%; height:100%; object-fit:contain; background:#272727; }
.paper-front { width:min(76%,280px); aspect-ratio:2/3; background:var(--ivory); transform:translate(-50%,-44%) rotate(-2deg); overflow:hidden; display:grid; place-items:center; }
.paper-front img { width:100%; height:100%; object-fit:contain; }
footer { height:230px; padding:0; font-size:12px; background:#f9eee1; position:relative; overflow:hidden; }
.footer-logo { position:absolute; inset:0 auto auto 50%; transform:translateX(-50%); width:auto; height:230px; max-width:none; object-fit:contain; mix-blend-mode:normal; }
footer p { position:absolute; z-index:1; left:50%; bottom:16px; transform:translateX(-50%); margin:0; text-align:center; white-space:nowrap; }
footer p:nth-child(2) { text-align:center; }
footer a { position:absolute; z-index:1; right:clamp(22px,5vw,76px); bottom:16px; color:var(--ink); text-align:right; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.mockup-modal { border:0; padding:0; max-width:720px; width:calc(100% - 32px); color:var(--ink); background:var(--ivory); box-shadow:0 25px 90px rgba(0,0,0,.35); }
.mockup-modal::backdrop { background:rgba(30,28,25,.72); backdrop-filter:blur(4px); }
.modal-content { padding:clamp(30px,6vw,70px); }
.modal-close { position:absolute; right:17px; top:12px; border:0; background:transparent; font-size:31px; line-height:1; color:var(--ink); }
.mockup-modal h2 { margin-bottom:35px; }
form { display:grid; gap:17px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
label { display:grid; gap:7px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
input,select { width:100%; background:transparent; border:0; border-bottom:1px solid rgba(34,34,34,.4); padding:9px 1px; outline:0; border-radius:0; color:var(--ink); font-size:14px; text-transform:none; letter-spacing:normal; font-weight:400; }
input:focus,select:focus { border-color:var(--terra); }
.upload-label { border:1px dashed rgba(34,34,34,.45); padding:14px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; position:relative; cursor:pointer; transition:border-color .2s ease,background .2s ease; }
.upload-label:hover,.upload-label:focus-within { border-color:var(--terra); background:rgba(201,106,67,.05); }
.upload-label input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.upload-label .upload-title { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); }
.upload-label .upload-prompt { font-size:11px; font-weight:400; text-transform:none; letter-spacing:0; color:#625f57; max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-label.is-selected { border-style:solid; border-color:var(--green); background:rgba(97,122,70,.08); }
.form-help { color:#655f56; font-size:11px; line-height:1.5; margin:0; }
.form-success { min-height:0; margin:0; color:var(--green); font-size:13px; font-weight:600; }
.mockup-modal form.is-submitted > :not(.form-success) { display:none; }
.mockup-modal form.is-submitted .form-success { min-height:84px; display:flex; align-items:center; font-size:17px; line-height:1.5; }
.reveal { animation:enter .8s cubic-bezier(.16,1,.3,1) both; }
.reveal-delay { animation-delay:.13s; }
@keyframes enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes scrollCue { 0% { transform:translateX(-110%); } 55%,100% { transform:translateX(110%); } }
@keyframes sceneBreath { from { filter:brightness(.98) saturate(.97); } to { filter:brightness(1.04) saturate(1.03); } }
@keyframes lightSweep { 0%,22% { transform:translateX(-43%) rotate(0); opacity:0; } 38% { opacity:1; } 62%,100% { transform:translateX(48%) rotate(0); opacity:0; } }
@keyframes hotspotPulse { 0% { box-shadow:0 0 0 0 rgba(201,106,67,.65); } 70% { box-shadow:0 0 0 11px rgba(201,106,67,0); } 100% { box-shadow:0 0 0 0 rgba(201,106,67,0); } }
@media (max-width:760px) {
  .site-header { height:76px; }
  .brand-logo { width:168px; height:54px; }
  nav { display:none; }
  .header-cta { font-size:10px; }
  .hero { min-height:100dvh; padding:0; display:block; }
  .hero-copy { left:22px; top:51%; width:calc(100% - 44px); transform:translateY(-38%); }
  .hero-art { min-height:0; }
  .hero-scroll-cue { left:22px; bottom:26px; }
  .hero-caption { right:22px; bottom:24px; max-width:142px; text-align:right; }
  .hotspot-tray { left:13%; top:57%; }
  .hotspot-coaster { left:54%; top:73%; }
  .hotspot-sign { left:63%; top:27%; }
  .statement { padding:100px 22px; text-align:left; }
  .statement h2,.statement > p:last-child { margin-left:0; }
  .gallery { padding:80px 22px 100px; }
  .section-heading { display:block; padding-bottom:37px; }
  .section-heading h2 { margin-bottom:24px; }
  .gallery-grid,.work-row { grid-template-columns:1fr; gap:30px; }
  .image-wrap { height:auto; max-height:none; }
  .material-strip { padding:76px 0; }
  .material-intro { display:block; padding:0 22px 36px; }
  .material-intro .eyebrow { margin-bottom:18px; }
  .material-intro h2 { font-size:clamp(54px,16vw,82px); }
  .material-intro > p:not(.eyebrow) { margin:23px 0 0; }
  .material-hint { display:block; margin-top:26px; }
  .material-rail { padding-left:22px; padding-right:22px; scroll-snap-type:x mandatory; }
  .material-rail-wrap { height:auto; }
  .material-rail-sticky { position:static; }
  .material-card { flex-basis:min(290px,78vw); min-height:320px; }
  .uv-printing { display:block; margin-top:76px; padding-top:38px; }
  .uv-printing-copy { margin-top:28px; }
  .uv-printing-copy p { font-size:16px; }
  .uv-benefits { display:grid; grid-template-columns:1fr; gap:26px; margin-top:48px; }
  .uv-durability,.uv-comparison { margin-top:46px; }
  .comparison-row { grid-template-columns:1fr; gap:7px; }
  .material-arrow { width:44px; height:44px; }
  .material-arrow-prev { left:9px; }
  .material-arrow-next { right:9px; }
  .mockup-section { padding:95px 22px 64px; grid-template-columns:1fr; gap:22px; }
  .mockup-stack { min-height:300px; }
  footer { height:200px; }
  .footer-logo { height:200px; max-width:none; }
  footer p { bottom:14px; max-width:calc(100% - 44px); white-space:normal; }
  footer a { right:22px; bottom:42px; }
  .form-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .hero-scene,.hero-scene-frame::after,.product-hotspot i { animation:none; } }