* { box-sizing: border-box; }
:root {
  --bg: #f3eee5;
  --paper: #fbf8f2;
  --ink: #1f1b17;
  --muted: #766c62;
  --brown: #6d3f22;
  --brown-dark: #3d2518;
  --tan: #b8875e;
  --line: rgba(31,27,23,.14);
  --green: #365f43;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(243,238,229,.88);
  border-bottom: 1px solid var(--line);
}
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brown-dark); color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 17px; letter-spacing: .04em;
}
.brand strong { display: block; font-size: 15px; letter-spacing: .02em; }
.brand small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; }
.nav-cta { padding: 11px 16px; border-radius: 999px; background: var(--ink); color: #fff; }
.menu-toggle { display:none; background:none; border:0; font-size: 24px; }

.hero { padding: 72px 0 56px; }
.hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; align-items:center; gap: 56px; }
.eyebrow { display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--brown); margin-bottom:12px; }
h1,h2,h3 { margin-top:0; }
h1,h2 { font-family:"Playfair Display", serif; line-height:1.04; }
h1 { font-size: clamp(52px, 7vw, 92px); margin-bottom: 24px; letter-spacing:-.03em; }
h1 span { color: var(--brown); }
h2 { font-size: clamp(36px, 5vw, 58px); margin-bottom: 18px; letter-spacing:-.02em; }
h3 { font-size: 20px; }
.hero-copy > p, .lead { color: var(--muted); font-size: 18px; max-width: 700px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 38px; }
.btn {
  border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  padding:14px 20px; border-radius:10px; font-weight:700; font-family:inherit;
  transition:.2s ease;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--brown); color:#fff; }
.btn-secondary { background:transparent; border:1px solid var(--line); }
.btn-dark { background:var(--ink); color:white; }
.full { width:100%; }
.hero-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hero-meta div { border-top:1px solid var(--line); padding-top:14px; }
.hero-meta strong,.hero-meta span { display:block; }
.hero-meta span { color:var(--muted); font-size:12px; margin-top:4px; }

.hero-card { position:relative; min-height:540px; display:grid; place-items:center; }
.leather-card {
  width:min(430px,100%); aspect-ratio: .78;
  border-radius:30px; padding:36px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.12), transparent 25%),
    linear-gradient(145deg,#815235,#4e2f1f);
  box-shadow: 0 30px 70px rgba(52,34,20,.24), inset 0 0 0 1px rgba(255,255,255,.08);
  color:#f4e8d8; display:flex; flex-direction:column; justify-content:space-between;
}
.leather-card::before {
  content:""; position:absolute; inset:auto;
}
.stamp {
  border:2px solid rgba(244,232,216,.72);
  width:190px; height:190px; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  font-family:"Playfair Display",serif; font-weight:700;
  letter-spacing:.08em; margin:auto;
}
.leather-card p { text-align:center; letter-spacing:.08em; text-transform:uppercase; font-size:11px; }
.queue-pill {
  position:absolute; right:-6px; bottom:52px;
  background:#fff; padding:14px 18px; border-radius:999px;
  box-shadow:0 12px 30px rgba(0,0,0,.12); font-size:13px;
}
.queue-pill strong { color:var(--green); }

.section { padding: 90px 0; }
.section-heading { max-width:760px; margin-bottom:38px; }
.section-heading p { color:var(--muted); }
.gallery { display:grid; grid-template-columns:1.2fr 1fr; gap:18px; }
.project { background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.project-tall { grid-row:span 2; }
.project-placeholder {
  min-height:250px; display:grid; place-items:center; position:relative; overflow:hidden;
  color:rgba(255,255,255,.9); font-family:"Playfair Display",serif; font-size:28px;
}
.project-tall .project-placeholder { min-height:590px; }
.project-placeholder::after {
  content:"PHOTO"; position:absolute; right:14px; top:12px;
  font:700 10px/1 "DM Sans",sans-serif; letter-spacing:.18em;
  color:rgba(255,255,255,.56);
}
.grain-1 { background:linear-gradient(135deg,#593521,#9a6a45); }
.grain-2 { background:linear-gradient(135deg,#28342d,#6b776c); }
.grain-3 { background:linear-gradient(135deg,#4e2f20,#72503a); }
.grain-4 { background:linear-gradient(135deg,#615b50,#8a7f6c); }
.project-info { padding:18px 20px 20px; display:flex; flex-direction:column; gap:4px; }
.project-info span { color:var(--muted); font-size:13px; }

.dark-section { background:#201b17; color:#f7f1e8; }
.light .eyebrow { color:#d4a277; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step { padding:26px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.035); }
.step > span { color:#d4a277; font-weight:700; letter-spacing:.12em; }
.step h3 { margin:12px 0 8px; }
.step p { color:#bbb1a6; font-size:14px; }

.queue-layout,.form-layout,.status-layout { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.status-card,.queue-explainer,.lookup-card {
  background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px;
}
.status-card { margin-top:28px; }
.status-card > div { display:flex; justify-content:space-between; gap:18px; padding:15px 0; border-bottom:1px solid var(--line); }
.status-card > div:last-child { border-bottom:0; }
.status-card span { color:var(--muted); }
.open { color:var(--green); }
.queue-explainer ul { padding-left:20px; color:var(--muted); }
.text-link { color:var(--brown); font-weight:700; }

.accent-section { background:#e8ded0; }
.queue-form {
  background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px;
  box-shadow:0 18px 45px rgba(66,45,27,.07);
}
label { display:block; font-size:13px; font-weight:700; margin-bottom:16px; }
input,select,textarea {
  width:100%; margin-top:8px; border:1px solid var(--line); border-radius:10px;
  background:white; padding:13px 14px; font:inherit; color:var(--ink); outline:none;
}
input:focus,select:focus,textarea:focus { border-color:var(--brown); box-shadow:0 0 0 3px rgba(109,63,34,.08); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-disclaimer,.demo-hint { color:var(--muted); font-size:12px; margin-bottom:0; }
.mini-note { margin-top:28px; padding:16px; background:rgba(255,255,255,.45); border-left:3px solid var(--brown); font-size:13px; }

.lookup-row { display:flex; gap:10px; }
.lookup-row input { margin-top:0; }
.lookup-result { margin-top:18px; border-top:1px solid var(--line); padding-top:18px; }
.lookup-result.hidden { display:none; }
.timeline { display:grid; gap:10px; margin-top:14px; }
.timeline-step { display:flex; gap:10px; align-items:center; font-size:13px; color:var(--muted); }
.timeline-step::before { content:""; width:10px; height:10px; border-radius:50%; border:2px solid #aaa; }
.timeline-step.done { color:var(--ink); font-weight:600; }
.timeline-step.done::before { background:var(--green); border-color:var(--green); }

.admin-section { padding-top:20px; }
.admin-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.admin-table { width:100%; border-collapse:collapse; min-width:760px; }
.admin-table th,.admin-table td { padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:13px; }
.admin-table th { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.badge { padding:7px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.waiting { background:#eee2d6; color:#754a2f; }
.specs { background:#e7eadf; color:#586548; }
.production { background:#dfe8ea; color:#385f69; }
.mini-btn { border:1px solid var(--line); background:white; border-radius:8px; padding:8px 10px; font-weight:700; cursor:pointer; }

footer { margin-top:80px; background:#171310; color:#f5eee5; padding:42px 0; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:24px; }
.footer-brand small { color:#9f9388; }
footer p { color:#a99d92; font-size:13px; }
footer a { font-weight:700; }

.toast {
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,30px);
  background:#171310; color:white; padding:13px 18px; border-radius:999px;
  font-size:13px; opacity:0; pointer-events:none; transition:.25s ease; z-index:100;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 900px) {
  .hero-grid,.queue-layout,.form-layout,.status-layout { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .hero-card { min-height:auto; padding-top:18px; }
  .leather-card { max-width:390px; }
  .gallery { grid-template-columns:1fr; }
  .project-tall { grid-row:auto; }
  .project-tall .project-placeholder { min-height:360px; }
  .hero-meta { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .container { width:min(100% - 28px,1180px); }
  .menu-toggle { display:block; }
  nav {
    display:none; position:absolute; left:14px; right:14px; top:68px;
    flex-direction:column; align-items:stretch; padding:18px;
    border:1px solid var(--line); border-radius:14px; background:var(--paper);
  }
  nav.show { display:flex; }
  .hero { padding-top:44px; }
  .section { padding:70px 0; }
  .steps,.two-col { grid-template-columns:1fr; }
  .lookup-row { flex-direction:column; }
}


/* Real Padilla Leatherworks imagery */
.brand-logo {
  width: 46px; height: 46px; object-fit: cover; object-position: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background:#000;
}
.hero-logo-wrap {
  width:min(460px,100%); aspect-ratio:.78; border-radius:30px; overflow:hidden;
  background:#000; box-shadow:0 30px 70px rgba(52,34,20,.24), inset 0 0 0 1px rgba(255,255,255,.08);
}
.hero-logo-wrap img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.real-gallery { grid-template-columns:1.15fr 1fr; }
.project-photo { width:100%; height:300px; object-fit:cover; display:block; background:#171310; }
.project-tall .project-photo { height:660px; }
.real-gallery .project:nth-child(5) .project-photo,
.real-gallery .project:nth-child(6) .project-photo { height:340px; }
@media (max-width: 900px) {
  .real-gallery { grid-template-columns:1fr; }
  .project-tall .project-photo, .real-gallery .project:nth-child(5) .project-photo,
  .real-gallery .project:nth-child(6) .project-photo { height:380px; }
}


/* 2026-09-05 product gallery update: preserve the original customer photos */
.real-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.real-gallery .project { display:flex; flex-direction:column; }
.real-gallery .catalog-photo { width:100%; height:430px; object-fit:contain; object-position:center; background:#171310; }
.real-gallery .project-info { min-height:78px; justify-content:center; }
.real-gallery .project-info strong { line-height:1.35; }
@media (max-width: 900px) {
  .real-gallery { grid-template-columns:1fr; }
  .real-gallery .catalog-photo { height:390px !important; }
}
@media (max-width: 520px) {
  .real-gallery .catalog-photo { height:330px !important; }
  .real-gallery .project-info { min-height:auto; }
}