/* ============================================================
   Crystal Apparels — shared stylesheet
   Desktop layout is driven by inline styles on the markup.
   This file holds: shared component classes, hover effects
   (replacing the old JS-driven style-hover), the mobile nav,
   and all responsive @media overrides.
   Media-query overrides use !important so they win over the
   inline style="" attributes on the page containers.
   ============================================================ */

*{box-sizing:border-box}
html,body{margin:0}
body{background:#F4F1EA;font-family:'Hanken Grotesk',sans-serif;color:#1A1714}
::selection{background:#9a5b3a;color:#F4F1EA}
img{max-width:100%;display:block}

/* ---------- shared components (were duplicated per page) ---------- */
.navlink{position:relative;text-decoration:none;font-size:14px;letter-spacing:.02em}
.navlink::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:#9a5b3a;transition:width .3s ease}
.navlink:hover::after{width:100%}

.ph{position:relative;overflow:hidden}
.ph .cap{position:absolute;left:16px;bottom:13px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.btn{transition:background .3s ease,color .3s ease,border-color .3s ease}
.svcrow{transition:padding-left .35s ease,background .35s ease}
.svcrow:hover{padding-left:18px;background:rgba(154,91,58,.05)}
.lift{transition:transform .4s ease,box-shadow .4s ease}
.lift:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,23,20,.1)}

.fld{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(26,23,20,.28);padding:12px 0;font-family:'Hanken Grotesk',sans-serif;font-size:16px;color:#1A1714;outline:none;transition:border-color .3s ease}
.fld:focus{border-color:#9a5b3a}
.fld::placeholder{color:#a59a8c}
textarea.fld{resize:vertical;min-height:90px}

/* ---------- hover effects (replace old JS style-hover) ---------- */
/* dark pill -> rust */
.btn-dark:hover{background:#9a5b3a !important;color:#F4F1EA !important}
/* rust pill -> dark */
.btn-rust:hover{background:#1A1714 !important;color:#F4F1EA !important}
/* outline -> dark fill */
.btn-outline:hover{background:#1A1714 !important;color:#F4F1EA !important}
/* rust CTA -> cream */
.btn-cta-rust:hover{background:#F4F1EA !important;color:#1A1714 !important}
/* dark CTA -> cream */
.btn-cta-dark:hover{background:#F4F1EA !important;color:#1A1714 !important}

/* ============================================================
   NAVIGATION (shared header)
   ============================================================ */
.nav-bar{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(26,23,20,.12)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:22px 56px}
.nav-brand{text-decoration:none;color:#1A1714;display:flex;align-items:baseline;gap:12px}
.nav-brand .brand-name{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;letter-spacing:.02em}
.nav-brand .brand-est{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;color:#9a7b5e}
.nav-links{display:flex;align-items:center;gap:38px}
.nav-links a.navlink{color:#6b5f54}
.nav-links a.navlink.active{color:#1A1714}
.nav-contact{color:#F4F1EA !important;background:#1A1714;padding:11px 22px;border-radius:1px}

/* hamburger button — hidden on desktop */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;margin:-8px;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:24px;height:2px;background:#1A1714;transition:transform .3s ease,opacity .3s ease}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */

/* ---- Tablet ---- */
@media (max-width:1023px){
  .nav-inner{padding:20px 32px !important}
  .wrap{padding-left:32px !important;padding-right:32px !important}

  /* big section paddings -> tighter */
  .sec-pad{padding-left:32px !important;padding-right:32px !important}

  /* multi-column grids step down */
  .grid-4{grid-template-columns:repeat(2,1fr) !important}
  .grid-3{grid-template-columns:repeat(2,1fr) !important}
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:32px !important}

  /* headings scale */
  .hero h1,.h1-xl{font-size:clamp(44px,7vw,64px) !important}
  .h2-lg{font-size:clamp(34px,5vw,46px) !important}
}

/* ---- Mobile ---- */
@media (max-width:767px){
  /* --- nav becomes a drawer --- */
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;top:65px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#F4F1EA;border-bottom:1px solid rgba(26,23,20,.12);
    padding:8px 24px 20px;
    transform:translateY(-130%);transition:transform .35s ease;
    box-shadow:0 18px 40px rgba(26,23,20,.12);
  }
  .nav-open .nav-links{transform:translateY(0)}
  .nav-links a{padding:16px 0 !important;font-size:16px !important;border-bottom:1px solid rgba(26,23,20,.08)}
  .nav-links a.navlink::after{display:none}
  .nav-links a.nav-contact{background:none !important;color:#9a5b3a !important;padding:16px 0 !important;border-bottom:none}

  /* --- generic padding shrink --- */
  .nav-inner{padding:16px 20px !important}
  .wrap,.sec-pad{padding-left:20px !important;padding-right:20px !important}
  .sec-pad{padding-top:56px !important;padding-bottom:56px !important}

  /* --- collapse every multi-column layout to one column --- */
  .hero,
  .split-2,
  .grid-2,
  .grid-3,
  .grid-4,
  .stats,
  .svc-detail,
  .contact-grid,
  .footer-grid,
  .header-split{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  /* hero image shouldn't be a tall empty band */
  .hero .hero-media{min-height:300px !important}

  /* stats: keep a 2-up so they don't get too tall */
  .stats{grid-template-columns:1fr 1fr !important;gap:0 !important}
  .stats > div{padding:24px 20px !important}

  /* footer 2-up */
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:28px !important}

  /* service detail rows: drop the number column inline, stack media under text */
  .svc-detail{gap:18px !important}
  .svc-detail .svc-media{height:200px !important}

  /* CTA rows stack */
  .cta-row{flex-direction:column !important;align-items:flex-start !important;gap:24px !important;text-align:left}

  /* headings */
  .hero h1,.h1-xl{font-size:clamp(38px,11vw,52px) !important;line-height:1.05 !important}
  .h2-lg{font-size:clamp(30px,8vw,40px) !important}

  /* contact form fields stack */
  .field-row{grid-template-columns:1fr !important;gap:24px !important}

  /* footer bottom bar stacks */
  .foot-bottom{flex-direction:column !important;gap:10px !important;text-align:left}

  /* tables of two columns (about team / locations rows) */
  .row-split{flex-wrap:wrap}
}

@media (max-width:479px){
  .stats{grid-template-columns:1fr !important}
}