/* =========================================================
   Liberty Woodwork — base.css
   Palette: Dark Walnut + Brass + Sawdust Cream (craftsman editorial)
   Built with Site Forge · digitalshijil.com
   ========================================================= */

:root {
  /* Brand world tokens — names after the craft's world */
  /* ---- PALETTE ---- */
  --paper:        #F5EFE4;   /* sawdust cream */
  --paper-2:      #EDE4D3;   /* flax */
  --paper-soft:   #FAF6EE;   /* parchment */
  --ink:          #2A1F14;   /* dark walnut */
  --ink-2:        #1A1209;   /* near-black timber */
  --accent:       #B87333;   /* copper-brass — cabinet hardware */
  --accent-2:     #D4975A;   /* polished brass */
  --accent-soft:  #EDD9BE;   /* blonde wood */
  --spot:         #C96030;   /* ember orange — warm CTA */
  --muted:        #5A4A38;   /* grain — body text */
  --muted-2:      #7A6A58;   /* bark */
  --line:         rgba(42,31,20,.13);
  --line-2:       rgba(42,31,20,.06);

  /* ---- TYPE ---- */
  --f-display: "Fraunces", Georgia, serif;
  --f-body:    "Inter Tight", "Inter", -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ---- SCALE ---- */
  --container:        1320px;
  --container-narrow: 1040px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.12);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.06), 0 24px 48px -20px rgba(0,0,0,.18);
}

/* ---- RESET ---- */
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
*::selection{background:var(--ink);color:var(--paper)}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;max-width:100vw;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);font-size:16px;line-height:1.65;font-weight:400;color:var(--ink);
  background:var(--paper);overflow-x:hidden;width:100%;max-width:100vw;position:relative;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
section,header,footer{max-width:100vw;overflow-x:clip;position:relative}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:opacity .35s var(--ease)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--ink)}

/* ---- FILM GRAIN ---- */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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)'/%3E%3C/svg%3E");
  background-size:200px 200px}
@media(prefers-reduced-motion:reduce){body::after{display:none}}

/* ---- TYPOGRAPHY ---- */
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:400;letter-spacing:-.012em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(2.8rem,6vw,5.4rem)}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.2vw,2rem)}
p{color:var(--muted)}
em,.italic{font-style:italic;font-family:var(--f-display)}
.serif{font-family:var(--f-display);font-weight:400;letter-spacing:-.01em}
.eyebrow{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.4em;
  font-size:11px;font-weight:500;color:var(--ink);display:inline-block}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;
  background:var(--accent);margin-right:14px;vertical-align:middle}
.label-mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2)}

/* ---- LAYOUT ---- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(64px,10vw,140px) 0}
.section--dark{background:var(--ink);color:var(--paper)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--paper)}
.section--dark p{color:rgba(245,239,228,.72)}
.section--dark .eyebrow{color:var(--paper)}
.section--paper2{background:var(--paper-2)}
.grid{display:grid;gap:clamp(24px,4vw,64px)}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-body);
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 30px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:all .35s var(--ease)}
.btn:hover{background:transparent;color:var(--ink);opacity:1}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn--accent:hover{background:var(--accent-2);border-color:var(--accent-2);opacity:1}

/* ---- ANNOUNCE BAR ---- */
.announce{background:var(--ink-2);text-align:center;padding:11px 20px;
  font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(245,239,228,.65);font-weight:400}
.announce span{color:var(--accent-2)}

/* ---- NAV ---- */
.nav{position:sticky;top:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:24px;padding:18px var(--gutter);
  background:color-mix(in srgb,var(--paper) 93%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  transition:padding .35s var(--ease)}
.nav.scrolled{padding-top:12px;padding-bottom:12px}
.nav-logo{justify-self:start;font-family:var(--f-display);font-size:1.4rem;letter-spacing:.02em}
.nav-links{display:flex;gap:32px;justify-self:center;list-style:none;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500}
.nav-links a:hover{color:var(--accent);opacity:1}
.nav-cta{justify-self:end}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-burger span{width:24px;height:1.5px;background:var(--ink);transition:.3s var(--ease)}

/* ---- HERO ---- */
.hero{background:var(--ink-2);color:var(--paper);padding:clamp(80px,14vh,180px) 0 clamp(60px,10vw,120px);
  position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 100% at 70% 50%,rgba(184,115,51,.12) 0%,transparent 65%);
  pointer-events:none}
.hero-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  color:rgba(245,239,228,.5);margin-bottom:28px}
.hero-meta-row .dot{width:3px;height:3px;border-radius:50%;background:var(--accent)}
.hero h1{color:var(--paper);margin-bottom:24px}
.hero-tag{font-size:clamp(1rem,1.6vw,1.2rem);max-width:52ch;color:rgba(245,239,228,.72)}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.hero-img-wrap{position:relative}
.hero-img-placeholder{background:linear-gradient(135deg,rgba(184,115,51,.18) 0%,rgba(42,31,20,.5) 100%);
  border:1px solid rgba(184,115,51,.25);aspect-ratio:4/5;display:flex;align-items:flex-end;padding:24px}
.hero-img-caption{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(245,239,228,.45)}

/* ---- MARQUEE ---- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:14px 0;background:var(--paper-2)}
.marquee-track{display:flex;gap:28px;white-space:nowrap;width:max-content;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);animation:marq 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span:nth-child(even){color:var(--accent)}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---- TRUST BAR ---- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.trust-item{padding:clamp(32px,4vw,56px) clamp(20px,3vw,40px);text-align:center;
  background:var(--paper);border:1px solid var(--line-2)}
.trust-num{font-family:var(--f-display);font-size:clamp(2.4rem,4vw,3.8rem);
  color:var(--ink);line-height:1;display:block}
.trust-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin-top:8px;display:block}

/* ---- SERVICE CARDS ---- */
.service-card{background:var(--paper-soft);border:1px solid var(--line-2);
  padding:clamp(28px,3vw,44px);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.service-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.service-icon{width:44px;height:44px;margin-bottom:20px;
  border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:14px;color:var(--accent)}
.service-card h3{font-size:clamp(1.2rem,1.8vw,1.6rem);margin-bottom:12px}

/* ---- PROCESS STEPS ---- */
.process-step{padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--line)}
.process-step:last-child{border-bottom:1px solid var(--line)}
.process-grid{display:grid;grid-template-columns:80px 1fr;gap:32px;align-items:start}
.process-num{font-family:var(--f-display);font-size:3.5rem;color:var(--accent-soft);
  line-height:1;font-style:italic}

/* ---- TESTIMONIAL ---- */
.testimonial-block{max-width:780px;margin:0 auto;text-align:center}
.testimonial-mark{font-family:var(--f-display);font-size:5rem;color:var(--accent);
  line-height:.8;display:block;margin-bottom:16px}
blockquote p{font-family:var(--f-display);font-style:italic;
  font-size:clamp(1.3rem,2.4vw,2rem);color:var(--paper);line-height:1.5}
blockquote cite{display:block;margin-top:24px;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(245,239,228,.55);font-style:normal}

/* ---- GALLERY ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.gallery-item{aspect-ratio:4/3;background:var(--paper-2);display:flex;
  align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-placeholder{background:linear-gradient(145deg,var(--paper-2),var(--ink-2) 180%);
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:220px}
.gallery-placeholder span{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(245,239,228,.35)}

/* ---- CONTACT ---- */
.contact-info p{color:var(--muted);line-height:2}
.contact-info a{color:var(--accent);border-bottom:1px solid var(--accent-soft)}
.contact-info a:hover{opacity:.7}
.contact-hours{background:var(--paper-2);padding:20px 24px;margin-top:24px;
  border-left:3px solid var(--accent)}
form input,form textarea,form select{width:100%;padding:14px 16px;
  border:1px solid var(--line);background:var(--paper-soft);
  font-family:var(--f-body);font-size:15px;color:var(--ink);margin-bottom:12px;
  transition:border-color .3s var(--ease)}
form input:focus,form textarea:focus{outline:none;border-color:var(--accent)}
form textarea{resize:vertical;min-height:120px}

/* ---- FOOTER ---- */
.footer{background:var(--ink-2);color:var(--paper);padding:clamp(56px,8vw,100px) 0 40px}
.footer h4{font-family:var(--f-display);font-size:1.2rem;color:var(--paper);margin-bottom:16px}
.footer a{color:rgba(245,239,228,.65)}
.footer a:hover{color:var(--accent-2);opacity:1}
.footer p,.footer address{color:rgba(245,239,228,.6);font-style:normal;line-height:2}
.footer-brand{font-family:var(--f-display);font-size:2rem;color:var(--paper)}
.footer-credit{margin-top:40px;padding-top:24px;border-top:1px solid rgba(245,239,228,.1);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  color:rgba(245,239,228,.35);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---- REVEAL ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in,.no-js .reveal,.reveal.reveal--shown{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- IMG FALLBACK ---- */
.img-fallback{display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);border:1px solid var(--line);min-height:220px}
.img-fallback-cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);padding:24px;text-align:center}

/* ---- UTILITIES ---- */
.center{text-align:center}
.mt-s{margin-top:16px} .mt-m{margin-top:32px} .mt-l{margin-top:64px}
.maxw-prose{max-width:60ch}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-img-wrap{display:none}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav{grid-template-columns:1fr auto}
  .nav-links.open{display:flex;position:fixed;inset:64px 0 auto 0;flex-direction:column;
    background:var(--paper);padding:32px var(--gutter);gap:22px;border-bottom:1px solid var(--line)}
  .grid{gap:32px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:48px 1fr;gap:20px}
  .process-num{font-size:2.4rem}
}