@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --paper:#e7ebda;
  --paper-2:#dbe2c8;
  --ink:#1c1a16;
  --ink-soft:#4a453c;
  --red:#d6431f;
  --red-deep:#a83315;
  --green:#4f6b52;
  --green-deep:#37492f;
  --cream:#f4f6ec;
  --line:rgba(28,26,22,0.15);
  --line-on-dark:rgba(251,248,240,0.2);
  --max:1220px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:24px;}
@media (min-width:900px){ .wrap{padding-inline:48px;} }

h1,h2,h3,h4{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:0.94;
  letter-spacing:0.005em;
  margin:0;
}
/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;font-size:0.85rem;letter-spacing:0.03em;
  text-decoration:none;text-transform:uppercase;
  border:2px solid var(--ink);
  cursor:pointer;white-space:nowrap;
}
.btn-fill{background:var(--red-deep);border-color:var(--red-deep);color:var(--cream);}
.btn-fill:hover{background:#7c260f;border-color:#7c260f;}
.btn-outline{background:transparent;color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-outline-light{border-color:var(--line-on-dark);color:var(--cream);}
.btn-outline-light:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(231,235,218,0.94);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--ink);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:74px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);}
.brand-mark{
  width:38px;height:38px;flex:none;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:0.78rem;
}
.brand-name{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:1.3rem;text-transform:uppercase;}
.brand small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:0.7rem;letter-spacing:0.08em;color:var(--ink-soft);text-transform:uppercase;}
.nav-links{display:none;gap:30px;align-items:center;font-size:0.92rem;font-weight:500;}
.nav-links a{text-decoration:none;color:var(--ink-soft);}
.nav-links a:hover{color:var(--red-deep);}
@media (min-width:860px){ .nav-links{display:flex;} }
.nav .btn{padding:10px 18px;font-size:0.78rem;}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:90vh;
  display:flex;align-items:flex-end;color:var(--cream);
  background:
    linear-gradient(180deg, rgba(28,26,22,0.25) 0%, rgba(20,18,15,0.55) 55%, rgba(12,10,8,0.9) 100%),
    url('images/photo-01.jpg') center 55%/cover no-repeat;
}
.hero-inner{width:100%;padding-block:64px 56px;}
.hero h1{font-size:clamp(2.6rem,7vw,5.4rem);max-width:14ch;margin-top:16px;color:var(--cream);}
.hero h1 em{color:var(--red);font-style:normal;}
.hero p.lede{max-width:48ch;font-size:1.14rem;margin-top:20px;color:rgba(251,248,240,0.85);font-family:'IBM Plex Sans';}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.hero-stats{display:flex;flex-wrap:wrap;gap:26px 42px;margin-top:52px;padding-top:26px;border-top:2px solid var(--line-on-dark);}
.stat b{font-family:'Big Shoulders Display',sans-serif;font-size:2rem;font-weight:800;display:block;color:var(--cream);}
.stat span{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:0.09em;text-transform:uppercase;color:rgba(251,248,240,0.7);}

/* ---------- scaffolding ---------- */
section{padding:84px 16px;}
.section-head{max-width:60ch;margin-bottom:44px;}
.section-head h2{font-size:clamp(2rem,3.6vw,3rem);margin-top:14px;}
.section-head h2:first-child{margin-top:0;}
.section-head p{margin-top:14px;font-size:1.05rem;color:var(--ink-soft);}
.section-head.on-dark h2{color:var(--cream);}
.section-head.on-dark p{color:rgba(251,248,240,0.72);}

/* ---------- Story ---------- */
.story{background:var(--paper);}
.story .grid{display:grid;gap:44px;grid-template-columns:1fr;}
@media (min-width:900px){ .story .grid{grid-template-columns:0.85fr 1.15fr;align-items:center;} }
.story-photos{display:grid;grid-template-columns:1.2fr 0.8fr;gap:14px;}
.story-photos img{border:2px solid var(--ink);object-fit:cover;height:100%;aspect-ratio:3/4;}
.story-photos .tall{grid-row:span 2;}
.story-copy p{font-size:1.06rem;color:var(--ink-soft);margin-top:16px;}
.story-copy strong{color:var(--ink);}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.badge{
  font-family:'IBM Plex Mono',monospace;font-size:0.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.05em;
  padding:8px 14px;border:1.5px solid var(--ink);
}

/* ---------- Services ---------- */
.services{background:var(--ink);color:var(--cream);}
.services .wrap{padding-block:8px;}
.tag-grid{display:grid;gap:1px;background:var(--line-on-dark);border:2px solid var(--line-on-dark);grid-template-columns:1fr;}
@media (min-width:700px){ .tag-grid{grid-template-columns:repeat(2,1fr);} }
.tag-item{background:var(--ink);padding:32px 28px;position:relative;}
.tag-item h3{font-size:1.4rem;color:var(--cream);}
.tag-item p{margin-top:10px;color:rgba(251,248,240,0.68);font-size:0.98rem;}

/* ---------- Gallery ---------- */
.gallery{background:var(--paper-2);}
.gallery .wrap{padding-block:8px;}
.gallery-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);}
@media (min-width:720px){ .gallery-grid{grid-template-columns:repeat(3,1fr);} }
.g-card{
  background:var(--cream);border:2px solid var(--ink);
  display:flex;flex-direction:column;
}
.g-photo{aspect-ratio:1/1;overflow:hidden;border-bottom:2px solid var(--ink);}
.g-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.g-card:hover .g-photo img{transform:scale(1.06);}
.g-cap{padding:14px 16px;font-size:0.86rem;color:var(--ink-soft);flex:1;}
.g-tag{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 16px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:0.72rem;color:var(--green-deep);
  text-transform:uppercase;letter-spacing:0.04em;
}
.g-card--merch .g-tag{color:var(--red-deep);}
.g-card--merch{border-color:var(--red-deep);}

/* ---------- FAQ / What to expect ---------- */
.faq{background:var(--paper-2);}
.faq-list{display:grid;gap:2px;background:var(--line);border:2px solid var(--ink);grid-template-columns:1fr;}
@media (min-width:820px){ .faq-list{grid-template-columns:repeat(2,1fr);} }
.faq-item{background:var(--cream);padding:30px 28px;}
.faq-item h3{
  font-family:'IBM Plex Sans',sans-serif;
  text-transform:none;
  font-weight:700;
  font-size:1.08rem;
  line-height:1.35;
  letter-spacing:0;
  color:var(--red-deep);
}
.faq-item p{margin-top:12px;font-size:0.98rem;color:var(--ink-soft);}
.faq-item p em{font-style:italic;color:var(--ink);}

/* ---------- Reviews ---------- */
.reviews{background:var(--paper);}
.review-grid{display:grid;gap:24px;grid-template-columns:1fr;}
@media (min-width:760px){ .review-grid{grid-template-columns:repeat(2,1fr);} }
.review-card{background:var(--cream);border:2px solid var(--ink);padding:28px;}
.stars{color:var(--red);font-size:1.1rem;letter-spacing:2px;}
.review-card p{margin-top:14px;font-size:1.02rem;color:var(--ink);font-style:italic;}
.review-card .who{margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:0.76rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.04em;}
.rating-banner{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-top:36px;
  padding-top:24px;border-top:2px solid var(--line);
}
.rating-banner b{font-family:'Big Shoulders Display',sans-serif;font-size:2.6rem;font-weight:800;}
.rating-banner span{color:var(--ink-soft);}
.rating-banner a{font-family:'IBM Plex Mono',monospace;font-size:0.8rem;color:var(--red-deep);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Visit / contact ---------- */
.visit{background:var(--green-deep);color:var(--cream);}
.visit .section-head h2{color:var(--cream);}
.visit .section-head p{color:rgba(251,248,240,0.75);}
.visit .wrap{padding-block:8px;}
.visit-grid{display:grid;gap:40px;grid-template-columns:1fr;}
@media (min-width:900px){ .visit-grid{grid-template-columns:1fr 1fr;} }
.hours-table{width:100%;border-collapse:collapse;font-size:0.98rem;}
.hours-table tr{border-bottom:1px solid var(--line-on-dark);}
.hours-table td{padding:11px 0;}
.hours-table td:first-child{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.06em;color:rgba(251,248,240,0.65);}
.hours-table td:last-child{text-align:right;font-weight:500;}
.visit-card{background:rgba(251,248,240,0.06);border:1.5px solid var(--line-on-dark);padding:32px;}
.visit-card .addr{font-family:'Big Shoulders Display',sans-serif;font-size:1.6rem;font-weight:700;text-transform:none;line-height:1.2;}
.visit-card .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.social-row{display:flex;gap:14px;margin-top:24px;}
.social-row a{
  width:40px;height:40px;border:1.5px solid var(--line-on-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:0.7rem;text-decoration:none;color:var(--cream);
}
.social-row a:hover{background:var(--cream);color:var(--green-deep);}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:rgba(251,248,240,0.6);padding-block:36px;}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:0.85rem;}
footer a{color:rgba(251,248,240,0.75);text-decoration:none;}
footer a:hover{color:var(--cream);}

/* ---------- Motion: hero entrance ---------- */
@keyframes heroIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}
.hero h1,.hero .lede,.hero-cta,.hero-stats{
  animation:heroIn .7s cubic-bezier(.16,1,.3,1) both;
}
.hero .lede{animation-delay:.08s;}
.hero-cta{animation-delay:.16s;}
.hero-stats{animation-delay:.24s;}

/* ---------- Motion: scroll reveal ----------
   Content is visible by default (no-JS / JS-disabled safe). Only when
   script.js successfully runs does it add .js-ready, which is what
   actually gates the hidden-until-revealed states below. */
.js-ready .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.js-ready .reveal.is-visible{
  opacity:1;
  transform:none;
}
/* "stamped" cartridge-label variant for the services tag-grid: a tighter
   settle with a slight scale, like a price tag being stamped into place. */
.js-ready .tag-item.reveal{
  transform:translateY(14px) scale(.96);
}
.js-ready .tag-item.reveal.is-visible{
  transform:none;
}
.tag-grid .tag-item:nth-child(1){transition-delay:0ms;}
.tag-grid .tag-item:nth-child(2){transition-delay:90ms;}
.tag-grid .tag-item:nth-child(3){transition-delay:180ms;}
.tag-grid .tag-item:nth-child(4){transition-delay:270ms;}

/* gallery cards "dealt into place" -- alternating slight rotate, like the
   film-rail photo treatment elsewhere in this design system. */
.js-ready .g-card.reveal{
  transform:translateY(22px) rotate(-1.5deg);
}
.js-ready .g-card.reveal:nth-child(even){
  transform:translateY(22px) rotate(1.5deg);
}
.js-ready .g-card.reveal.is-visible{
  transform:none;
}
.gallery-grid .g-card:nth-child(1){transition-delay:0ms;}
.gallery-grid .g-card:nth-child(2){transition-delay:70ms;}
.gallery-grid .g-card:nth-child(3){transition-delay:140ms;}
.gallery-grid .g-card:nth-child(4){transition-delay:210ms;}
.gallery-grid .g-card:nth-child(5){transition-delay:280ms;}
.gallery-grid .g-card:nth-child(6){transition-delay:350ms;}

.review-grid .review-card:nth-child(1){transition-delay:0ms;}
.review-grid .review-card:nth-child(2){transition-delay:110ms;}

.faq-list .faq-item:nth-child(1){transition-delay:0ms;}
.faq-list .faq-item:nth-child(2){transition-delay:90ms;}
.faq-list .faq-item:nth-child(3){transition-delay:180ms;}
.faq-list .faq-item:nth-child(4){transition-delay:270ms;}

.gallery-grid .g-card:nth-child(7){transition-delay:420ms;}
.gallery-grid .g-card:nth-child(8){transition-delay:490ms;}
.gallery-grid .g-card:nth-child(9){transition-delay:560ms;}