/* =========================================================
   NAMU Finewood — shared stylesheet
   Used by index.html, estimate.html, contact.html
   ========================================================= */

:root{
  --bg:#F8F4EC;
  --bg-alt:#F1EAD9;
  --ink:#201F1C;
  --ink-soft:#4E483E;
  --muted:#8D8471;
  --line:#E6DFCC;
  --card:#FCFAF3;
  --dark:#2C2B28;
  --dark-ink:#F5F2EA;
  --dark-muted:#A6A296;
  --dark-muted-2:#7D7A6D;
  --accent:#F8B62B; /* brand gold — change this one line to re-theme the whole site */
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Work Sans',ui-sans-serif,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

h1,h2,h3,.serif{font-family:'Newsreader',Georgia,'Times New Roman',serif;}

a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--accent);}

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

button{font-family:inherit;cursor:pointer;}

.eyebrow{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 28px;border-radius:2px;font-weight:600;font-size:15px;
  letter-spacing:.01em;white-space:nowrap;border:none;
}
.btn-primary{background:var(--accent);color:var(--ink);}
.btn-primary:hover{background:#E2A524;color:var(--ink);}
.btn-outline{border:1px solid var(--ink);color:var(--ink);background:transparent;}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.btn-outline-dark{border:1px solid rgba(245,242,234,.4);color:var(--dark-ink);background:transparent;}
.btn-outline-dark:hover{border-color:var(--accent);color:var(--accent);}

/* ---- illustration frames (homepage SVG art) ---- */
.art{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.art svg{width:62%;height:62%;overflow:visible;position:relative;z-index:1;}
.art-tight svg{width:78%;height:78%;}
.art-wide svg{width:74%;height:74%;}

/* ---- homepage "Meet the Team" overlapping circular photo pair ----
   Sized with aspect-ratio instead of a fixed height so the circles
   can never become ellipses: previously each photo frame was a fixed
   240x240px box inside a flex row, and on a narrow phone flexbox
   would shrink the (shrinkable) width while leaving the fixed height
   untouched, squashing the "circle" into an oval. aspect-ratio keeps
   height locked to width at every size, and the two breakpoints below
   size the pair down in deliberate, legible steps instead of letting
   the browser's shrink math pick an arbitrary value. */
.team-photo-art{height:420px;}
.team-photo-circle{
  width:240px;aspect-ratio:1/1;flex-shrink:1;min-width:0;
  border-radius:50%;overflow:hidden;border:3px solid var(--accent);
  box-shadow:0 0 0 6px var(--bg),0 6px 20px rgba(32,31,28,.18);
}
.team-photo-circle-front{margin-right:-32px;z-index:2;position:relative;}
@media (max-width:960px){
  .team-photo-art{height:280px;}
  .team-photo-circle{width:180px;}
  .team-photo-circle-front{margin-right:-26px;}
}
@media (max-width:480px){
  .team-photo-art{height:230px;}
  .team-photo-circle{width:148px;}
  .team-photo-circle-front{margin-right:-20px;}
}

/* ---- project photo galleries: a card's cover photo can open a full
   lightbox of every photo submitted for that project ---- */
.art[data-gallery]{cursor:pointer;}
.art[data-gallery] img{transition:transform .35s ease;}
.art[data-gallery]:hover img{transform:scale(1.045);}
.gallery-badge{
  position:absolute;right:12px;bottom:12px;z-index:3;
  background:rgba(32,31,28,.74);color:#F5F2EA;
  font-size:11.5px;font-weight:600;letter-spacing:.03em;
  padding:6px 11px;border-radius:20px;display:flex;align-items:center;gap:6px;
  pointer-events:none;
}
.lightbox-overlay{
  position:fixed;inset:0;background:rgba(20,19,17,.94);z-index:10000;
  display:none;align-items:center;justify-content:center;
}
.lightbox-overlay.show{display:flex;}
.lightbox-img{max-width:82vw;max-height:78vh;object-fit:contain;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-close,.lightbox-nav{
  position:fixed;border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);color:#F5F2EA;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.18);}
.lightbox-close{top:28px;right:32px;width:40px;height:40px;font-size:16px;}
.lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;}
.lightbox-prev{left:28px;}
.lightbox-next{right:28px;}
.lightbox-counter{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  color:rgba(245,242,234,.7);font-size:13px;letter-spacing:.06em;font-weight:600;
}
.lightbox-nav[hidden],.lightbox-counter[hidden]{display:none;}
.hero-deco{position:absolute;bottom:-150px;right:-150px;width:440px;height:auto;pointer-events:none;z-index:0;}
.hero-deco-base{opacity:.06;filter:grayscale(1);}
.hero-deco-windows{opacity:.22;}
@media (max-width:960px){.hero-deco{width:260px;bottom:-75px;right:-75px;}}
@media (max-width:640px){.hero-deco{width:130px;bottom:-35px;right:-35px;}}

/* ---- about.html page hero: background photo + heading ----
   The gold accent ("With Namu.") sat directly on a warm-toned wood
   photo, which is too close in hue/lightness to guarantee contrast —
   worse on mobile, where the larger heading relative to the viewport
   covers more of the image. A soft text-shadow gives the heading a
   dark halo that holds up against any part of the photo, and the
   image itself is dimmed further on mobile so no bright patch of
   wood grain can sit directly behind the text. */
.about-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom;opacity:.4;z-index:0;pointer-events:none;}
.about-hero-title{text-shadow:0 2px 10px rgba(32,31,28,.3),0 1px 2px rgba(32,31,28,.25);}
@media (max-width:640px){
  .about-hero-bg{opacity:.22;}
}

.team-deco{position:absolute;bottom:-60px;right:-60px;width:220px;height:auto;pointer-events:none;z-index:0;}
.team-deco-base{opacity:.07;filter:grayscale(1);}
.team-deco-windows{opacity:.2;}
@media (max-width:960px){.team-deco{width:150px;bottom:-35px;right:-35px;}}
@media (max-width:640px){.team-deco{width:110px;bottom:-25px;right:-25px;}}
@media (max-width:640px){
  .lightbox-prev{left:12px;} .lightbox-next{right:12px;}
  .lightbox-close{right:12px;top:16px;}
  .lightbox-nav{width:40px;height:40px;}
}

/* ---- page container (all pages share this max width) ---- */
.page{width:100%;max-width:1440px;margin:0 auto;background:var(--bg);}

/* ---- shared utility header (estimate / contact pages) ---- */
.util-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 72px;height:88px;border-bottom:1px solid var(--line);flex:none;
}

/* =========================================================
   Form components — shared by estimate.html and contact.html
   ========================================================= */
.opt-card{
  position:relative;
  border:1px solid var(--line);background:var(--card);border-radius:3px;
  padding:16px 36px 16px 18px;text-align:left;display:flex;flex-direction:column;gap:4px;
  transition:border-color .12s;width:100%;
}
.opt-card:hover{border-color:#D8CBA8;}
.opt-card.sel{
  border:2px solid var(--accent);background:#FCEFC9;
  box-shadow:0 0 0 1px var(--accent),0 4px 14px rgba(32,31,28,.10);
}
.opt-card.sel .opt-label{color:#8A5E00;}
.opt-label{font-size:14.5px;font-weight:600;color:var(--ink);overflow-wrap:break-word;}
.opt-sub{font-size:12.5px;color:var(--muted);overflow-wrap:break-word;}

/* ---- universal "selected" checkmark badge, shown on any .opt-card.sel ---- */
.check-badge{
  position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;
  background:var(--accent);display:none;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--card),0 1px 4px rgba(32,31,28,.25);
}
.opt-card.sel .check-badge{display:flex;}

/* ---- small preview swatch shown above an option's label (material / style, etc.) ---- */
.opt-swatch{
  width:100%;height:56px;border-radius:3px;margin-bottom:6px;flex:none;
  border:1px solid rgba(32,31,28,.08);
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .12s;
}
.opt-swatch-icon{width:40px;height:40px;}
.opt-card.sel .opt-swatch{box-shadow:0 0 0 2px var(--accent);}

.chip{
  border:1px solid var(--line);background:var(--card);border-radius:20px;
  padding:10px 18px;font-size:13.5px;font-weight:500;color:var(--ink-soft);
}
.chip.sel{border-color:var(--accent);background:var(--accent);color:var(--ink);font-weight:600;}

.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.field .opt{font-size:11px;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;}
.field input, .field textarea{
  width:100%;border:1px solid var(--line);border-radius:3px;padding:12px 14px;
  font-size:14px;font-family:inherit;background:var(--card);color:var(--ink);
}
.field input:focus, .field textarea:focus{outline:none;border-color:var(--accent);}

.navbtn{
  padding:14px 26px;border-radius:2px;font-weight:600;font-size:14.5px;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
}
.navbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink);}

/* ---- estimate form: "please make a selection" validation notice ---- */
.form-error{
  display:flex;align-items:center;gap:8px;
  margin-top:18px;padding:12px 16px;border-radius:3px;
  background:#F7E9E2;border:1px solid #E3B7A0;color:#9A4324;
  font-size:13px;font-weight:600;
}

/* ---- estimate form: informational notices (accuracy tip, preliminary-estimate disclaimer) ---- */
.form-notice{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px 18px;border-radius:4px;margin-bottom:32px;
  background:var(--bg-alt);border-left:3px solid var(--accent);
}
.form-notice-icon{flex:0 0 auto;margin-top:1px;}
.form-notice p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-soft);}
.form-notice p + p{margin-top:8px;}
.form-notice strong{color:var(--ink);}
.form-notice-small{
  margin-top:16px;padding:12px 16px;border-radius:3px;
  background:var(--bg-alt);font-size:12.5px;line-height:1.6;color:var(--muted);
}

.section-label{font-size:13px;font-weight:600;margin-bottom:12px;}

/* ---- WorldSkills medalist badge (about.html founder cards) ---- */
.medal-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px 6px 10px;margin-bottom:16px;
  border:1px solid rgba(248,182,43,.4);border-radius:20px;
  background:rgba(248,182,43,.07);
}
.medal-badge span{
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;
}

/* ---- Work page: portfolio category filter chips ---- */
.work-filter-chip{
  padding:10px 20px;border-radius:20px;font-size:13.5px;font-weight:600;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  cursor:pointer;transition:background .12s,color .12s,border-color .12s;
  font-family:inherit;
}
.work-filter-chip:hover{border-color:var(--accent);}
.work-filter-chip.active{
  background:var(--ink);color:var(--dark-ink);border-color:var(--ink);
}

/* ---- Contact page: category switcher + "please include" checklist ---- */
.cat-tab{
  flex:1;border:1px solid var(--line);background:var(--card);border-radius:4px;
  padding:22px 24px;text-align:left;display:flex;flex-direction:column;gap:6px;
  transition:border-color .12s;
}
.cat-tab:hover{border-color:#D8CBA8;}
.cat-tab.sel{border-color:var(--accent);background:#FFF9EC;box-shadow:0 0 0 1px var(--accent);}
.cat-title{font-size:16px;font-weight:600;color:var(--ink);font-family:'Newsreader',Georgia,serif;}
.cat-sub{font-size:12.5px;color:var(--muted);line-height:1.5;}

.reqlist{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:20px 22px;margin:28px 0 36px 0;}
.reqlist-title{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:12px;}
.reqlist ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;}
.reqlist li{font-size:13px;color:var(--ink-soft);padding-left:16px;position:relative;line-height:1.5;}
.reqlist li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--accent);}

/* =========================================================
   Hero "sketch → detail → finished render" animation
   A pure CSS/SVG loop standing in for a real short video —
   no video file, no hosting, matches the site's own line-art
   illustration style. Every "structure" shape uses SVG's
   pathLength="1" so one dash animation works for every shape
   regardless of its real length.
   ========================================================= */
.hero-anim{
  animation: heroLoopFade 16s ease-in-out infinite;
}
.hero-sketch{
  animation: heroSketchFade 16s ease-in-out infinite;
}
.hero-structure .draw{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation: heroDraw 16s linear infinite;
}
.hero-fill{
  animation: heroFillFade 16s ease-in-out infinite;
}
@keyframes heroLoopFade{
  0%{opacity:0;} 4%{opacity:1;} 90%{opacity:1;} 100%{opacity:0;}
}
@keyframes heroSketchFade{
  0%{opacity:0;} 6%{opacity:.85;} 40%{opacity:.85;} 55%{opacity:.12;} 100%{opacity:.12;}
}
@keyframes heroDraw{
  0%{stroke-dashoffset:1;} 8%{stroke-dashoffset:1;} 42%{stroke-dashoffset:0;} 100%{stroke-dashoffset:0;}
}
@keyframes heroFillFade{
  0%{opacity:0;} 46%{opacity:0;} 74%{opacity:1;} 100%{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .hero-anim, .hero-sketch, .hero-fill, .hero-structure .draw{ animation:none !important; }
  .hero-anim{opacity:1;}
  .hero-sketch{opacity:.12;}
  .hero-fill{opacity:1;}
  .hero-structure .draw{stroke-dashoffset:0;}
}

/* =========================================================
   Utility header "home" link (estimate / contact pages):
   logo image crossfades to a "GO TO HOME" label on hover.
   ========================================================= */
.home-link{position:relative;display:inline-flex;align-items:center;height:46px;}
.home-link-logo{display:flex;align-items:center;transition:opacity .16s ease;}
.home-link-hover{
  position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;
  font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink);
  white-space:nowrap;transition:opacity .16s ease;pointer-events:none;
}
.home-link:hover .home-link-logo{opacity:0;}
.home-link:hover .home-link-hover{opacity:1;}

/* =========================================================
   Page-transition loading overlay: small centered logo whose
   gold "windows" switch from plain grayscale to full color,
   like a light turning on, while the next page loads.
   ========================================================= */
.page-transition{
  position:fixed;inset:0;background:var(--bg);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.page-transition.show{opacity:1;pointer-events:all;}
.pt-logo-wrap{position:relative;width:104px;height:104px;}
.pt-logo-base{
  position:absolute;inset:0;width:104px;height:104px;
  clip-path:inset(0 0 100% 0);
}
.pt-logo-windows{
  position:absolute;inset:0;width:104px;height:104px;
  opacity:0;
}
/* Builds in sequence (tool -> roof -> walls), then the windows catch and
   glow like a light switching on, rather than a flat color swap. Loops
   softly while the overlay stays up for a slow page load. */
.page-transition.show .pt-logo-base{
  animation: ptLogoBase 4.2s linear infinite;
}
.page-transition.show .pt-logo-windows{
  animation: ptLogoWindows 4.2s linear infinite;
}
@keyframes ptLogoBase{
  0%{clip-path:inset(0 0 100% 0);}
  4.7619%{clip-path:inset(0 0 100% 0);}
  16.6667%{clip-path:inset(0 0 40% 0);}
  17.8571%{clip-path:inset(0 0 40% 0);}
  26.1905%{clip-path:inset(0 0 0% 0);}
  90.4762%{clip-path:inset(0 0 0% 0);}
  100%{clip-path:inset(0 0 100% 0);}
}
/* Windows stay gray, then snap on decisively (not a flicker) and hold
   the lit state for ~2.5s before the icon resets for the next loop. */
@keyframes ptLogoWindows{
  0%{opacity:0; filter:grayscale(1) brightness(.7);}
  26.1905%{opacity:0; filter:grayscale(1) brightness(.7);}
  26.2143%{opacity:1; filter:grayscale(1) brightness(.65);}
  30.4762%{opacity:1; filter:grayscale(1) brightness(.6);}
  30.9524%{opacity:1; filter:grayscale(0) brightness(1.15) drop-shadow(0 0 8px rgba(248,182,43,.85));}
  90.4762%{opacity:1; filter:grayscale(0) brightness(1.15) drop-shadow(0 0 8px rgba(248,182,43,.85));}
  97.619%{opacity:0; filter:grayscale(1) brightness(.7);}
  100%{opacity:0; filter:grayscale(1) brightness(.7);}
}
@media (prefers-reduced-motion: reduce){
  .page-transition.show .pt-logo-base,
  .page-transition.show .pt-logo-windows{ animation:none !important; }
  .page-transition.show .pt-logo-base{ clip-path:inset(0 0 0% 0); }
  .page-transition.show .pt-logo-windows{ opacity:1; filter:none; }
}

/* =========================================================
   Responsive — collapses the fixed 1440px layout down for
   tablet / mobile screens. The original design canvas was a
   fixed-width mockup; this is real, so it has to flex.
   ========================================================= */
@media (max-width: 960px){
  .util-header, .header-row{padding:0 32px !important;}
  section, .section-pad{padding-left:32px !important;padding-right:32px !important;}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .grid-3{grid-template-columns:1fr !important;}
  .grid-2{grid-template-columns:1fr !important;}
  .hero-grid{grid-template-columns:1fr !important;}
  h1{font-size:38px !important;}
  .nav-links{display:none !important;}
  .mobile-menu-btn{display:flex !important;}
  /* estimate.html option-card grids: JS renders these as classless
     <div style="grid-template-columns:repeat(2 or 3,...)"> blocks
     (Space Category, Kitchen Scope, Bathroom Type, Size, Style). Any
     multi-column layout is too tight on a phone — single-word labels
     like "Residential"/"Modern" get force-broken mid-word, and cards
     with a full sentence of sub-text (e.g. "Keep your current layout
     — refinish or reface the existing cabinets") become unreadably
     cramped even at 2 columns. Stack all of them into one full-width
     column instead, one option per row. Excludes .grid-2/.grid-3
     (static-page grids, already collapsed to 1fr above) so this only
     targets the JS-rendered option cards. */
  div[style*="grid-template-columns:repeat(3,minmax(0,1fr))"]:not(.grid-3),
  div[style*="grid-template-columns:repeat(2,minmax(0,1fr))"]:not(.grid-2){
    grid-template-columns:1fr !important;
  }
  /* estimate.html / contact.html contact-step field rows: Name
     (First/Last) and Email/Phone are rendered as classless 2-column
     "1fr 1fr" grids. Per NN/g's mobile form-usability research,
     multi-column rows interrupt a phone's natural vertical scroll —
     default to one field per row. City/State/ZIP ("2fr 1fr 1fr") is
     deliberately NOT included here: NN/g explicitly calls out short,
     closely-related fields like city/state/zip as the one case where
     sharing a row is fine, and all three remain comfortably readable
     at that width even on a narrow phone. */
  div[style*="grid-template-columns:1fr 1fr;"]{
    grid-template-columns:1fr !important;
  }
  /* Comfortable tap targets (Apple HIG / Material / WCAG 2.5.5 all
     converge on ~44px minimum) for the chip-style choice buttons used
     throughout the form — the desktop sizing is a little tight for a
     thumb. */
  .chip{min-height:44px;padding:12px 18px;}
}

/* ---- mobile nav (hamburger menu) — hidden on desktop, shown <=960px ---- */
.mobile-menu-btn{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;flex:none;
  background:none;border:none;cursor:pointer;color:var(--ink,#1c1a17);
  -webkit-tap-highlight-color:transparent;
}
.mobile-nav-panel{display:none;}
@media (max-width:960px){
  .mobile-nav-panel.open{
    display:flex;flex-direction:column;
    border-bottom:1px solid var(--line);background:var(--bg);
  }
  .mobile-nav-panel a{
    display:block;padding:16px 32px;font-size:16px;font-weight:500;
    color:var(--ink);border-top:1px solid var(--line);
  }
  .mobile-nav-panel a.btn{
    display:inline-flex;margin:16px 32px 20px 32px;text-align:center;
    border-top:none;justify-content:center;
  }
}
@media (max-width: 640px){
  .grid-4{grid-template-columns:1fr !important;}
}