@font-face{font-family:"Caslon Display";src:url(fonts/libre-caslon-display-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Caslon Text";font-style:italic;src:url(fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:Epilogue;font-weight:400;src:url(fonts/epilogue-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Epilogue;font-weight:600;src:url(fonts/epilogue-latin-600-normal.woff2) format("woff2");font-display:swap}

:root{
  --cream:#f4eee4;--cream2:#ebe2d3;--ink:#2a1a1f;--plum:#3e1f2e;--plum2:#552b40;
  --brick:#a3412c;--brick2:#c25a40;--sage:#8a9a7a;--muted:#6d5f5a;--soft:#cdbfb4;
  --disp:"Caslon Display",Georgia,serif;--ital:"Caslon Text",Georgia,serif;--sans:Epilogue,system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:400 17px/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
em{font-family:var(--ital);font-style:italic;font-weight:400;color:var(--brick)}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1;letter-spacing:-.02em}
h2{font-size:clamp(2.3rem,5.6vw,4.6rem)}
.kicker{font:600 .74rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--brick);margin-bottom:1.1rem;display:flex;align-items:center;gap:.7rem}
.kicker::before{content:"";width:1.8rem;height:1px;background:currentColor}
section{padding:clamp(4.5rem,10vw,8rem) clamp(1.1rem,5vw,4rem)}
.sec-head{max-width:46rem;margin-bottom:3rem}
.sec-head p:not(.kicker){color:var(--muted);margin-top:1rem;max-width:36rem}

/* header */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:1.5rem;padding:1.1rem clamp(1rem,4vw,3rem);transition:background .4s,padding .4s,box-shadow .4s}
.bar.solid{background:rgba(244,238,228,.94);backdrop-filter:blur(8px);padding:.6rem clamp(1rem,4vw,3rem);box-shadow:0 1px 0 rgba(42,26,31,.1)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand-mark{width:2.4rem;height:2.4rem;display:grid;place-items:center;background:var(--plum);color:var(--cream);font:400 1rem var(--disp);border-radius:4px;transform:rotate(-6deg)}
.brand-name{font:400 1.2rem var(--disp)}
.brand-name i{font-family:var(--ital);color:var(--brick)}
.nav{display:flex;gap:1.6rem;margin-left:auto}
.nav a{text-decoration:none;font-size:.9rem;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--brick);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.bar-call{text-decoration:none;font-weight:600;font-size:.9rem;padding:.6rem 1.1rem;background:var(--plum);color:var(--cream);border-radius:4px;transition:background .3s,transform .2s}
.bar-call:hover{background:var(--brick)}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:3rem;padding-top:7rem;padding-bottom:3rem;position:relative;overflow:hidden}
.hero h1{font-size:clamp(3.4rem,9vw,7.8rem);margin-bottom:1.6rem}
.hero h1 em{display:inline-block}
.lead{max-width:32rem;color:var(--muted);font-size:1.08rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600;padding:1rem 1.5rem;border-radius:4px;transition:transform .2s,background .3s,color .3s,box-shadow .3s}
.btn-gold,.btn-brick{background:var(--brick);color:#fff;box-shadow:0 14px 30px -14px rgba(163,65,44,.9)}
.btn-gold:hover,.btn-brick:hover{background:var(--brick2)}
.btn-line{border:1.5px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.hero-wall{height:min(88svh,780px);display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;transform:rotate(3deg) scale(1.06);
  -webkit-mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.col{display:flex;flex-direction:column;gap:.7rem;animation:drift 46s linear infinite}
.col.c2{animation-direction:reverse;animation-duration:54s}
.col.c3{animation-duration:62s}
.col img{border-radius:3px;aspect-ratio:3/4;object-fit:cover;width:100%}
@keyframes drift{to{transform:translateY(-50%)}}
.stamp-wrap{position:absolute;z-index:3;left:calc(52% - 70px);bottom:9%;width:140px;height:140px}
.stamp{width:100%;height:100%;animation:spin 22s linear infinite}
.stamp text{font:600 13.5px var(--sans);letter-spacing:.22em;fill:var(--plum)}
.stamp circle{fill:var(--plum)}
.stamp .yr{font:400 34px var(--disp);letter-spacing:0;fill:var(--cream)}
@keyframes spin{to{transform:rotate(360deg)}}
.stamp-wrap::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--cream);z-index:-1}

/* scroll-lit quote */
.lit{background:var(--plum);color:var(--cream);text-align:center;padding-block:clamp(5rem,12vw,9rem)}
.lit p[data-lit]{font:400 clamp(1.9rem,4.6vw,3.8rem)/1.12 var(--disp);max-width:58rem;margin:auto}
.w{opacity:.15;transition:opacity .5s}
.w.on{opacity:1}
.sign{margin-top:2rem;font:italic 1.3rem var(--ital);color:#e8a58f}

/* services */
.services{position:relative}
.svc{list-style:none;max-width:56rem}
.svc li{display:flex;gap:1.6rem;align-items:baseline;padding:1.3rem 0;border-top:1px solid var(--soft);transition:padding .35s var(--ease),color .3s}
.svc li:last-child{border-bottom:1px solid var(--soft)}
.svc .n{font:italic 1rem var(--ital);color:var(--brick)}
.svc .t{font:400 clamp(1.5rem,3.1vw,2.4rem)/1.12 var(--disp)}
.svc small{display:block;font:400 .95rem/1.5 var(--sans);color:var(--muted);margin-top:.3rem}
.svc li:hover{padding-left:1rem;color:var(--brick)}
.svc-peek{position:absolute;right:clamp(1rem,6vw,6rem);top:50%;width:min(26vw,340px);aspect-ratio:4/5;object-fit:cover;border-radius:3px;transform:translateY(-40%) rotate(-3deg);box-shadow:18px 18px 0 var(--sage)}

/* picker */
.picker{background:var(--cream2)}
.pick-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:2.5rem;align-items:start}
.pick-tabs{display:flex;flex-direction:column;gap:.2rem}
.pt{all:unset;cursor:pointer;font:400 clamp(1.4rem,2.6vw,2rem)/1.2 var(--disp);padding:.65rem 0 .65rem 0;border-bottom:1px solid var(--soft);color:var(--muted);display:flex;align-items:center;gap:.8rem;transition:color .3s,padding .35s var(--ease)}
.pt::before{content:"";width:0;height:2px;background:var(--brick);transition:width .35s var(--ease)}
.pt:hover{color:var(--ink)}
.pt.on{color:var(--ink);padding-left:.2rem}
.pt.on::before{width:1.6rem}
.pt:focus-visible{outline:2px solid var(--brick);outline-offset:4px}
.pick-view{background:var(--plum);color:var(--cream);border-radius:3px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr}
.pick-img{overflow:hidden;aspect-ratio:4/5}
.pick-img img{width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform .9s var(--ease)}
.pick-img img.out{opacity:0;transform:scale(1.06)}
.pick-view figcaption{padding:2rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem}
.pick-view p{font:italic 1.25rem/1.45 var(--ital)}
.brands{margin-top:2.5rem;color:var(--muted);font-size:.95rem}
.brands b{color:var(--ink)}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:st}
.step{position:relative;padding-bottom:1rem;border-top:2px solid var(--ink)}
.step img{aspect-ratio:1;object-fit:cover;width:100%;margin:1.2rem 0;border-radius:3px}
.step .n{position:absolute;top:-1px;right:0;font:400 3.2rem/1 var(--disp);color:var(--brick);transform:translateY(-100%)}
.step h3{font-size:1.7rem;margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.95rem}

/* duotone -> colour (brick/plum tone) */
.duo{filter:grayscale(1) sepia(.6) hue-rotate(-30deg) saturate(1.5) brightness(.9);transition:filter 1.4s var(--ease)}
.duo.in,.reveal.in .duo{filter:none}

/* gallery */
.gallery{background:var(--ink);color:var(--cream)}
.gallery em{color:#e8a58f}.gallery .kicker{color:#e8a58f}
.masonry{columns:4 220px;column-gap:.8rem}
.g{display:block;width:100%;border:0;padding:0;background:none;margin-bottom:.8rem;overflow:hidden;cursor:zoom-in;break-inside:avoid;border-radius:2px}
.g img{width:100%;transition:transform .6s var(--ease),filter 1.4s var(--ease)}
.g:hover img{transform:scale(1.05) rotate(.6deg)}

/* story */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
.story-photos{position:relative;height:clamp(420px,60vw,640px)}
.story-photos img{position:absolute;object-fit:cover;border:10px solid #fff;box-shadow:0 30px 50px -25px rgba(42,26,31,.6)}
.story-photos .p1{width:72%;height:68%;left:0;top:0;transform:translateY(calc(var(--p,0)*-40px)) rotate(-3deg)}
.story-photos .p2{width:58%;height:50%;right:0;bottom:0;transform:translateY(calc(var(--p,0)*40px)) rotate(4deg)}
.time{list-style:none;margin:2rem 0}
.time li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--soft)}
.time b{font:400 1.4rem var(--disp);color:var(--plum)}
.time span{color:var(--muted)}
blockquote{font:italic clamp(1.3rem,2.4vw,1.8rem)/1.35 var(--ital);border-left:3px solid var(--brick);padding-left:1.2rem;color:var(--plum)}

/* contact */
.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;background:var(--brick);color:#fff}
.contact em{color:var(--cream2)}.contact .kicker{color:var(--cream2)}
.cinfo{list-style:none;margin:2rem 0}
.cinfo li{display:flex;flex-direction:column;padding:1rem 0;border-top:1px solid rgba(255,255,255,.25)}
.cinfo span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.cinfo a{font:400 clamp(1.3rem,2.6vw,2rem) var(--disp);text-decoration:none;overflow-wrap:anywhere;transition:opacity .3s}
.cinfo a:hover{opacity:.75}
.social a{font-weight:600}
.contact-photos{display:grid;grid-template-columns:1.4fr 1fr;gap:1rem;align-items:end}
.contact-photos img{width:100%;object-fit:cover;aspect-ratio:1;border-radius:3px}
.contact-photos img+img{aspect-ratio:3/4}
.foot{background:var(--plum);text-align:center;padding:2.5rem 1rem 6rem;color:var(--soft);font-size:.9rem}
.foot .small{font-size:.8rem;opacity:.7;margin-top:.4rem}
.foot a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}

/* dock (phone) */
.dock{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;display:none;gap:.6rem;transform:translateY(140%);transition:transform .45s var(--ease)}
.dock.show{transform:none}
.dock a{flex:1;text-align:center;text-decoration:none;font-weight:600;padding:1rem;border-radius:4px;background:var(--plum);color:var(--cream);box-shadow:0 10px 30px -8px rgba(0,0,0,.45)}
.dock a.gold{background:var(--brick);color:#fff}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(42,26,31,.94);display:grid;place-items:center;padding:1rem}
.lightbox[hidden]{display:none}
.lightbox img{max-height:86vh;border:8px solid #fff}
.lb-close{position:absolute;top:1rem;right:1rem;width:3rem;height:3rem;border-radius:50%;border:0;background:var(--cream);font-size:1.8rem;cursor:pointer}

/* reveal */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .svc li.reveal,.js .step.reveal,.js .time li.reveal{transition-delay:calc(var(--i,0)*70ms)}

@media (max-width:900px){
  .nav,.bar-call{display:none}
  .hero{grid-template-columns:1fr;padding-top:5.5rem;min-height:auto}
  .hero-wall{height:340px;order:-1;margin:0 -1rem}
  .stamp-wrap{width:104px;height:104px;left:auto;right:1rem;top:calc(5.5rem + 250px);bottom:auto}
  .pick-wrap,.story,.contact{grid-template-columns:1fr}
  .pick-tabs{flex-direction:row;flex-wrap:wrap;gap:.5rem}
  .pt{font:600 .9rem var(--sans);padding:.6rem 1rem;border:1.5px solid var(--soft);border-radius:99px}
  .pt::before{display:none}
  .pt.on{background:var(--ink);color:var(--cream);border-color:var(--ink);padding-left:1rem}
  .steps{grid-template-columns:1fr 1fr;row-gap:3.5rem}
  .svc-peek{display:none}
  .dock{display:flex}
  .story-photos{height:420px}
  .time li{grid-template-columns:5.5rem 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .pick-view{grid-template-columns:1fr}
  .pick-img{aspect-ratio:4/3}
  .steps{grid-template-columns:1fr}
  .masonry{columns:2 140px;column-gap:.5rem}.g{margin-bottom:.5rem}
  .hero-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .duo{filter:none}
}