/* ═══════════════════════════════════════════════
   CITY WOOD — Compiled CSS (replaces Tailwind CDN)
   Generated from actual classes used in index.html
═══════════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Outfit',system-ui,-apple-system,sans-serif;background:#FEFAF5;color:#0F0F0F;overflow-x:hidden;line-height:1.5}
img,video{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,select,textarea{font-family:inherit}

/* ── FONT DISPLAY SWAP (prevents invisible text) ── */
@font-face{font-display:swap}

/* ── CUSTOM PROPERTIES ── */
:root{
  --amber:#C8821A;--amber-l:#E09B2A;--amber-d:#A66C14;
  --char:#0F0F0F;--char-m:#1A1A1A;--char-l:#252525;
  --warm:#FEFAF5;--stone:#F2EBE0;
  --green-400:#4ade80;--green-500:#22c55e;--green-600:#16a34a;--green-700:#15803d;
  --white-5:rgba(255,255,255,.05);--white-10:rgba(255,255,255,.1);
  --white-20:rgba(255,255,255,.2);--white-30:rgba(255,255,255,.3);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#0F0F0F}
::-webkit-scrollbar-thumb{background:#C8821A;border-radius:3px}

/* ══════════════════════════
   LAYOUT
══════════════════════════ */
.fixed{position:fixed}
.relative{position:relative}
.absolute{position:absolute}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}.left-0{left:0}.right-0{right:0}.bottom-0{bottom:0}
.bottom-10{bottom:2.5rem}
.left-5{left:1.25rem}.right-5{right:1.25rem}.top-5{top:1.25rem}.left-1\/2{left:50%}
.bottom-3{bottom:.75rem}.left-4{left:1rem}.top-3{top:.75rem}.right-3{right:.75rem}
.bottom-6{bottom:1.5rem}.right-6{right:1.5rem}
.-left-5{left:-1.25rem}.-right-5{right:-1.25rem}
.top-1\/2{top:50%}
.-translate-x-1\/2{transform:translateX(-50%)}
.translate-x-1\/2{transform:translateX(50%)}

.overflow-hidden{overflow:hidden}
.overflow-x-hidden{overflow-x:hidden}

.z-50{z-index:50}.z-20{z-index:20}.z-10{z-index:10}

/* ══════════════════════════
   DISPLAY
══════════════════════════ */
.block{display:block}.inline{display:inline}.inline-flex{display:inline-flex}
.flex{display:flex}.grid{display:grid}.hidden{display:none}
@media(min-width:640px){.sm\:block{display:block}.sm\:flex-row{flex-direction:row}.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-left{text-align:left}}
@media(min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}}
@media(min-width:1024px){.lg\:block{display:block}.lg\:flex{display:flex}.lg\:grid{display:grid}}

/* ══════════════════════════
   FLEXBOX
══════════════════════════ */
.flex-wrap{flex-wrap:wrap}
.flex-col{flex-direction:column}
.flex-shrink-0{flex-shrink:0}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.self-stretch{align-self:stretch}
.gap-0{gap:0}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}
.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}
.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}
.gap-7{gap:1.75rem}.gap-8{gap:2rem}.gap-9{gap:2.25rem}
.gap-12{gap:3rem}.gap-16{gap:4rem}

/* ══════════════════════════
   GRID
══════════════════════════ */
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
@media(min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,1fr)}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:col-span-3{grid-column:span 3/span 3}
}

/* ══════════════════════════
   SIZING
══════════════════════════ */
.w-full{width:100%}.w-auto{width:auto}
.w-1{width:.25rem}.w-2{width:.5rem}.w-7{width:1.75rem}
.w-9{width:2.25rem}.w-10{width:2.5rem}.w-11{width:2.75rem}
.w-14{width:3.5rem}.w-16{width:4rem}.w-40{width:10rem}
.w-px{width:1px}
.h-full{height:100%}.h-px{height:1px}
.h-1\.5{height:.375rem}
.h-9{height:2.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}
.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}
.h-20{height:5rem}.h-32{height:8rem}.h-40{height:10rem}
.h-44{height:11rem}.h-52{height:13rem}.h-72{height:18rem}
.min-h-\[650px\]{min-height:650px}
.h-\[94vh\]{height:94vh}
@media(min-width:1024px){.lg\:h-\[460px\]{height:460px}.lg\:h-auto{height:auto}}

.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}
.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}

/* ══════════════════════════
   SPACING
══════════════════════════ */
.mx-auto{margin-left:auto;margin-right:auto}
.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}
.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}
.mb-0\.5{margin-bottom:.125rem}.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}
.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}

.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
.p-7{padding:1.75rem}.p-8{padding:2rem}.p-10{padding:2.5rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-28{padding-top:7rem;padding-bottom:7rem}
.pt-10{padding-top:2.5rem}
@media(min-width:1024px){.lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}}

.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem}

/* ══════════════════════════
   TYPOGRAPHY
══════════════════════════ */
.font-display{font-family:'Playfair Display',Georgia,serif}
.font-body{font-family:'Outfit',system-ui,sans-serif}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-\[3\.4rem\]{font-size:3.4rem;line-height:1.08}
@media(min-width:640px){.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}}
@media(min-width:1024px){.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-\[3\.4rem\]{font-size:3.4rem;line-height:1.08}}
.font-300{font-weight:300}.font-500{font-weight:500}
.font-600{font-weight:600}.font-700{font-weight:700}.font-800{font-weight:800}
.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}
.text-center{text-align:center}
.uppercase{text-transform:uppercase}
.tracking-widest{letter-spacing:.1em}
.appearance-none{appearance:none}
.resize-none{resize:none}

/* ══════════════════════════
   COLORS — Text
══════════════════════════ */
.text-white{color:#fff}
.text-white\/40{color:rgba(255,255,255,.4)}
.text-white\/45{color:rgba(255,255,255,.45)}
.text-white\/50{color:rgba(255,255,255,.5)}
.text-white\/60{color:rgba(255,255,255,.6)}
.text-white\/65{color:rgba(255,255,255,.65)}
.text-white\/70{color:rgba(255,255,255,.7)}
.text-white\/75{color:rgba(255,255,255,.75)}
.text-white\/80{color:rgba(255,255,255,.8)}
.text-white\/85{color:rgba(255,255,255,.85)}
.text-white\/80{color:rgba(255,255,255,.8)}
.text-white\/85{color:rgba(255,255,255,.85)}
.text-white\/90{color:rgba(255,255,255,.9)}
.text-white\/85{color:rgba(255,255,255,.85)}
.text-white\/90{color:rgba(255,255,255,.9)}
.text-amber{color:#C8821A}
.text-green-400{color:#4ade80}
.text-green-600{color:#16a34a}
.text-green-700{color:#15803d}
.text-char{color:#0F0F0F}
.text-char\/55{color:rgba(15,15,15,.55)}
.text-char\/60{color:rgba(15,15,15,.6)}
.text-char\/65{color:rgba(15,15,15,.65)}
.text-char\/70{color:rgba(15,15,15,.7)}

/* ══════════════════════════
   COLORS — Background
══════════════════════════ */
.bg-amber{background-color:#C8821A}
.bg-amber\/10{background-color:rgba(200,130,26,.1)}
.bg-amber\/20{background-color:rgba(200,130,26,.2)}
.bg-char{background-color:#0F0F0F}
.bg-char-mid{background-color:#1A1A1A}
.bg-char\/70{background-color:rgba(15,15,15,.7)}
.bg-char\/75{background-color:rgba(15,15,15,.75)}
.bg-warm{background-color:#FEFAF5}
.bg-stone{background-color:#F2EBE0}
.bg-green-100{background-color:#dcfce7}
.bg-green-500{background-color:#22c55e}
.bg-green-500\/10{background-color:rgba(34,197,94,.1)}
.bg-green-600{background-color:#16a34a}
.bg-white\/15{background-color:rgba(255,255,255,.15)}
.bg-white\/15{background-color:rgba(255,255,255,.15)}
.bg-white\/5{background-color:rgba(255,255,255,.05)}
.bg-white\/10{background-color:rgba(255,255,255,.1)}.bg-white\/30{background-color:rgba(255,255,255,.3)}
.bg-white\/\[0\.04\]{background-color:rgba(255,255,255,.04)}
.bg-white\/\[0\.06\]{background-color:rgba(255,255,255,.06)}
.bg-transparent{background-color:transparent}

/* Gradient */
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.from-char\/70{--tw-gradient-from:rgba(15,15,15,.7);--tw-gradient-stops:var(--tw-gradient-from),transparent}
.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-from),transparent}
.via-amber{--tw-gradient-stops:var(--tw-gradient-from),#C8821A,var(--tw-gradient-to,transparent)}
.to-transparent{--tw-gradient-to:transparent}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}

/* ══════════════════════════
   BORDERS
══════════════════════════ */
.border{border-width:1px;border-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-amber\/10{border-color:rgba(200,130,26,.1)}
.border-amber\/40{border-color:rgba(200,130,26,.4)}
.border-white\/10{border-color:rgba(255,255,255,.1)}
.border-white\/20{border-color:rgba(255,255,255,.2)}
.border-transparent{border-color:transparent}
.border-b-4{border-bottom-width:4px;border-style:solid}
.border-warm{border-color:#FEFAF5}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}

/* ══════════════════════════
   EFFECTS
══════════════════════════ */
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.shadow-md{box-shadow:0 4px 6px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06)}
.shadow-lg{box-shadow:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05)}
.shadow-2xl{box-shadow:0 25px 50px rgba(0,0,0,.25)}
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* ══════════════════════════
   TRANSITIONS
══════════════════════════ */
.transition{transition:all .15s cubic-bezier(.4,0,.2,1)}
.transition-colors{transition:color .2s,background-color .2s,border-color .2s}
.transition-all{transition:all .2s cubic-bezier(.4,0,.2,1)}
.transition-shadow{transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}
.duration-300{transition-duration:.3s}

/* ══════════════════════════
   HOVER STATES
══════════════════════════ */
.hover\:bg-amber:hover{background-color:#C8821A}
.hover\:bg-green-500:hover{background-color:#22c55e}
.hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)}
.hover\:bg-\[\#1877F2\]:hover{background-color:#1877F2}
.hover\:bg-\[\#E1306C\]:hover{background-color:#E1306C}
.hover\:bg-\[\#0A66C2\]:hover{background-color:#0A66C2}
.hover\:bg-\[\#25D366\]:hover{background-color:#25D366}
.hover\:border-amber\/40:hover{border-color:rgba(200,130,26,.4)}
.hover\:border-transparent:hover{border-color:transparent}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05)}
.hover\:text-white:hover{color:#fff}
.hover\:text-amber:hover{color:#C8821A}
.hover\:underline:hover{text-decoration:underline}
.hover\:bg-green-500:hover{background-color:#22c55e}

/* ══════════════════════════
   MISC UTILITIES
══════════════════════════ */
.object-cover{object-fit:cover}
.cursor-default{cursor:default}
.opacity-50{opacity:.5}
.opacity-90{opacity:.9}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.whitespace-nowrap{white-space:nowrap}

/* ══════════════════════════
   COMPONENT-SPECIFIC CSS
   (kept from original <style>)
══════════════════════════ */

/* NAV */
#nav{transition:background .4s,box-shadow .4s}
#nav.up{background:rgba(15,15,15,.97)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 40px rgba(0,0,0,.5)}

/* HERO SLIDER */
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;background-size:cover;background-position:center;will-change:opacity}
.slide.active{opacity:1}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.80) 55%,rgba(10,10,10,.65) 100%);}
/* BUTTONS */
.btn-a{background:linear-gradient(135deg,#C8821A,#E09B2A);transition:transform .2s,box-shadow .3s,filter .2s}
.btn-a:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(200,130,26,.55);filter:brightness(1.08)}
.btn-g{border:2px solid rgba(255,255,255,.90);background:rgba(255,255,255,.1);transition:background .25s,border-color .25s,transform .2s}
.btn-g:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}

/* CARDS */
.card{transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-7px);box-shadow:0 22px 55px rgba(0,0,0,.13)}
.pcard{transition:transform .3s,box-shadow .3s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(200,130,26,.18)}
.pcard:hover .pcard-img{transform:scale(1.06)}
.pcard-img{transition:transform .5s ease}

/* WA PULSE */
@keyframes wpulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}60%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
.wa{animation:wpulse 2.2s infinite}

/* FADE IN */
.fi{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}
.fi.on{opacity:1;transform:translateY(0);will-change:auto}

/* FORM */
.fin{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.12);color:#fff;transition:border-color .25s,background .25s}
.fin::placeholder{color:rgba(255,255,255,.32)}
.fin:focus{outline:none;border-color:#C8821A;background:rgba(200,130,26,.08);box-shadow:0 0 0 3px rgba(200,130,26,.12)}

/* MISC */
.slabel{letter-spacing:.2em;font-size:.72rem;text-transform:uppercase;font-weight:600}
.amber-line{height:3px;background:linear-gradient(90deg,#C8821A,#E09B2A 60%,transparent);border:none;border-radius:2px}
#mmenu{transition:max-height .35s ease,opacity .3s ease;max-height:0;overflow:hidden;opacity:0}
#mmenu.open{max-height:420px;opacity:1}
.nav-link{position:relative;padding-bottom:2px}
.nav-link::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1.5px;background:#C8821A;transition:width .25s}
.nav-link:hover::after{width:100%}

/* TICKER */
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-inner{animation:ticker 28s linear infinite;white-space:nowrap}
.ticker-inner:hover{animation-play-state:paused}

/* CONTENT VISIBILITY — perf boost for below-fold sections */
#products,#why,#contact{content-visibility:auto;contain-intrinsic-size:0 600px;}
@media(max-width:767px){
  #home .max-w-6xl{padding-top:5.5rem !important;}
  #home h1{font-size:1.9rem !important;line-height:1.1 !important;}
  #home .text-lg{font-size:.95rem !important;}
  .btn-a,.btn-g{padding:.75rem 1.25rem !important;font-size:.8rem !important;}
}