@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Karla:wght@400;500;600;700&display=swap');

:root{
  --bg: #FBF3E4;
  --bg-soft: #FFFBF3;
  --bg-deep: #F3DFB8;
  --ink: #2B1B16;
  --ink-soft: #6B4F42;
  --teal: #1F7A76;
  --teal-dark: #145E5A;
  --terracotta: #B23A2E;
  --terracotta-dark: #8C2C22;
  --gold: #F0A937;
  --coral: #E85B82;
  --mint: #4FC7C2;
  --plum: #7A3350;
  --thread: #C98B24;
  --paper: #FFFDF8;
  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Karla', sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  line-height:1.18;
  letter-spacing:0.002em;
  margin:0 0 0.5em;
  color:var(--ink);
}
h1{font-size:clamp(2.3rem, 5vw, 3.4rem); font-weight:700;}
h2{font-size:clamp(1.6rem, 3vw, 2.2rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1em;}
a{color:var(--teal-dark); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

img{max-width:100%; display:block;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

/* ---------- Header ---------- */
.site-header{
  padding:22px 0;
  border-bottom:1px solid rgba(43,36,29,0.1);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{
  font-family:'Quicksand', sans-serif;
  color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  line-height:1;
}
.logo .mark{
  width:26px; height:33px; flex:none;
}
.logo-word{
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:0.01em;
  white-space:nowrap;
}
nav.primary-nav ul{
  list-style:none; display:flex; gap:28px; margin:0; padding:0;
}
nav.primary-nav a{
  color:var(--ink-soft); font-weight:600; font-size:0.98rem;
  padding-bottom:4px;
  border-bottom:2px solid transparent;
}
nav.primary-nav a:hover, nav.primary-nav a[aria-current="page"]{
  color:var(--teal-dark); text-decoration:none; border-bottom-color:var(--teal);
}
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:40px; height:40px;
}
.nav-toggle svg{width:24px; height:24px;}

@media (max-width: 760px){
  nav.primary-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw, 320px);
    background:var(--paper);
    transform:translateX(100%);
    transition:transform .28s ease;
    padding:90px 28px 28px;
    box-shadow:-8px 0 24px rgba(0,0,0,0.12);
  }
  nav.primary-nav.open{transform:translateX(0);}
  nav.primary-nav ul{flex-direction:column; gap:22px;}
  .nav-toggle{display:block;}
}

/* ---------- Bead divider ---------- */
.stitch{
  height:14px;
  margin:0;
  background-image: radial-gradient(circle, var(--thread) 2.4px, transparent 2.6px);
  background-size:18px 100%;
  background-position:center;
  background-repeat:repeat-x;
  opacity:0.65;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Karla', sans-serif; font-weight:700; font-size:0.98rem;
  padding:13px 26px; border-radius:4px;
  border:2px solid var(--ink); color:var(--ink);
  background:transparent; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ text-decoration:none; }
.btn-primary{
  background:var(--teal); border-color:var(--teal); color:var(--paper);
}
.btn-primary:hover{ background:var(--teal-dark); border-color:var(--teal-dark); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 84px;
}
.hero .wrap{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center;
}
.hero-copy p.lede{
  font-size:1.15rem; color:var(--ink-soft); max-width:46ch;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:28px;}

.pin-cluster{
  position:relative; height:380px;
}
.pin-card{
  position:absolute;
  width:190px; height:230px;
  background:var(--bg-deep);
  border:6px solid var(--paper);
  box-shadow:0 10px 24px rgba(43,36,29,0.18);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px;
  font-family:'Quicksand', sans-serif; font-weight:600; color:var(--ink-soft); font-size:0.9rem;
}
.pin-card span{opacity:0.8;}
.pin-1{ top:0; left:10%; transform:rotate(-6deg); background:linear-gradient(160deg,#F6E2B0,#F0A937); }
.pin-2{ top:70px; right:0; transform:rotate(5deg); background:linear-gradient(160deg,#BEE8E4,#1F7A76); z-index:2;}
.pin-3{ bottom:0; left:24%; transform:rotate(2deg); background:linear-gradient(160deg,#F2C6CE,#B23A2E); z-index:1;}

@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr; gap:40px;}
  .pin-cluster{height:300px; max-width:420px; margin:0 auto;}
}

/* ---------- Section basics ---------- */
section{padding:72px 0;}
.section-head{max-width:60ch; margin-bottom:40px;}
.section-head p{color:var(--ink-soft); font-size:1.05rem;}

/* ---------- What we make (3-up) ---------- */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.trio-item .icon{
  width:44px; height:44px; margin-bottom:16px; color:var(--teal);
}
.trio-item h3{margin-bottom:8px;}
.trio-item p{color:var(--ink-soft); font-size:0.98rem;}

@media (max-width:760px){
  .trio{grid-template-columns:1fr;}
}

/* ---------- Gallery grid ---------- */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;
}
.filter-pill{
  font-family:'Karla', sans-serif; font-weight:600; font-size:0.92rem;
  padding:9px 18px; border-radius:100px; border:1.5px solid var(--thread);
  background:transparent; color:var(--ink-soft); cursor:pointer;
}
.filter-pill.active, .filter-pill:hover{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}

.piece-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.piece-card{
  background:var(--paper);
  border:1px solid rgba(43,36,29,0.08);
}
.piece-photo{
  aspect-ratio:4/5;
  background:linear-gradient(150deg, var(--bg-deep), #E8B85A);
  display:flex; align-items:center; justify-content:center;
  color:rgba(43,36,29,0.55); font-size:0.85rem; text-align:center; padding:16px;
  font-family:'Quicksand', sans-serif; font-weight:600;
}
.piece-body{padding:18px 20px 22px;}
.piece-tag{
  font-size:0.78rem; color:var(--terracotta); font-weight:700; margin-bottom:6px; display:block;
}
.piece-body h3{margin-bottom:4px; font-size:1.1rem;}
.piece-body p{color:var(--ink-soft); font-size:0.92rem; margin-bottom:12px;}
.piece-link{font-weight:700; font-size:0.92rem;}

@media (max-width:900px){
  .piece-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .piece-grid{grid-template-columns:1fr;}
}

/* ---------- Process steps ---------- */
.process{
  counter-reset:step;
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.step{position:relative; padding-left:52px;}
.step::before{
  counter-increment:step;
  content:counter(step);
  position:absolute; left:0; top:0;
  width:36px; height:36px; border-radius:50%;
  background:var(--teal); color:var(--paper);
  font-family:'Quicksand', sans-serif; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.step p{color:var(--ink-soft); font-size:0.95rem;}

@media (max-width:760px){
  .process{grid-template-columns:1fr;}
}

/* ---------- Alt background band ---------- */
.band{background:var(--bg-soft);}
.band-deep{background:var(--bg-deep);}

/* ---------- CTA banner ---------- */
.cta-banner{
  text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-banner h2{margin-bottom:6px;}
.cta-banner p{color:var(--ink-soft); margin:0;}

/* ---------- About page ---------- */
.story{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;
}
.story-photo{
  aspect-ratio:3/4;
  background:linear-gradient(160deg,#F2C6CE,#7A3350);
  border:6px solid var(--paper);
  box-shadow:0 12px 30px rgba(43,36,29,0.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,253,248,0.85); font-family:'Quicksand', sans-serif; font-weight:600; text-align:center; padding:20px;
}
@media (max-width:840px){
  .story{grid-template-columns:1fr;}
}

.values{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.value h3{color:var(--teal-dark);}
@media (max-width:760px){ .values{grid-template-columns:1fr;} }

blockquote.pull{
  font-family:'Quicksand', sans-serif; font-size:1.4rem; font-weight:600;
  color:var(--ink); border-left:4px solid var(--teal);
  padding-left:24px; margin:0; max-width:56ch;
}
blockquote.pull footer{
  font-family:'Karla', sans-serif; font-size:0.95rem; color:var(--ink-soft);
  margin-top:12px; font-style:normal;
}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:56px;
}
form.contact-form label{
  display:block; font-weight:700; font-size:0.92rem; margin-bottom:6px; margin-top:18px;
}
form.contact-form label:first-child{margin-top:0;}
form.contact-form input,
form.contact-form select,
form.contact-form textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--thread);
  background:var(--paper); font-family:'Karla', sans-serif; font-size:1rem; color:var(--ink);
  border-radius:3px;
}
form.contact-form textarea{resize:vertical; min-height:130px;}
.form-note{font-size:0.85rem; color:var(--ink-soft); margin-top:20px;}

.contact-info h3{margin-bottom:10px;}
.contact-info .info-block{margin-bottom:28px;}
.contact-info .info-block p{margin-bottom:4px; color:var(--ink-soft);}
.social-row{display:flex; gap:14px; margin-top:8px;}
.social-row a{
  width:38px; height:38px; border:1.5px solid var(--thread); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.social-row a:hover{background:var(--teal); border-color:var(--teal); color:var(--paper); text-decoration:none;}

@media (max-width:840px){
  .contact-grid{grid-template-columns:1fr;}
}

/* ---------- Footer ---------- */
footer.site-footer{
  padding:48px 0 32px;
  border-top:1px solid rgba(43,36,29,0.1);
}
footer.site-footer .wrap{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;
}
footer.site-footer .foot-left p{color:var(--ink-soft); font-size:0.9rem; margin:0;}
footer.site-footer nav ul{
  list-style:none; display:flex; gap:20px; margin:0; padding:0; flex-wrap:wrap;
}
footer.site-footer nav a{font-size:0.9rem; color:var(--ink-soft); font-weight:600;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}