/* ==========================================================================
   Sewmi Motors – common styles (header, footer and shared sections).
   Page-only styles live in a <style> block inside each page.
   Layer order matches Tailwind so these rules sit alongside its utilities.
   ========================================================================== */
@layer theme, base, components, utilities;

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(.21 0 0);
  --card: oklch(.974 0 0);
  --primary: oklch(.55 .223 27);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(1 0 0);
  --secondary-foreground: oklch(.21 0 0);
  --muted: oklch(.96 0 0);
  --muted-foreground: oklch(.52 0 0);
  --accent: oklch(.94 0 0);
  --border: oklch(.89 0 0);
  --ink: oklch(.19 0 0);
  --inverse: oklch(1 0 0);
  --inverse-muted: oklch(.76 0 0);
  --inverse-border: oklch(.34 0 0);
  --hero-shade: linear-gradient(90deg, oklch(.12 0 0 / .94) 0%, oklch(.12 0 0 / .85) 30%, oklch(.12 0 0 / .25) 62%, oklch(.12 0 0 / 0) 100%);
  --radius: 4px;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* Minimal reset so the first paint matches before Tailwind's preflight loads */
@layer base {
 *, ::before, ::after { margin:0; padding:0; border:0 solid; box-sizing:border-box; border-color:var(--border); }
 html { line-height:1.5; -webkit-text-size-adjust:100%; }
 body { margin:0; background:var(--background); color:var(--foreground); font-family:'DM Sans',sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
 h1,h2,h3,p { margin:0; letter-spacing:0; font-size:inherit; font-weight:inherit; }
 a { text-decoration:none; color:inherit; }
 img,svg { display:block; vertical-align:middle; }
 img { max-width:100%; height:auto; }
 button,input,textarea { font:inherit; color:inherit; background-color:transparent; border-radius:0; }
 button { cursor:pointer; }
 textarea { resize:vertical; }
 input::placeholder,textarea::placeholder { color:oklch(.21 0 0 / .5); opacity:1; }
 button,a,input { -webkit-tap-highlight-color:transparent; }
 ::selection { background:var(--primary); color:var(--inverse); }
 [hidden] { display:none !important; }
}

/* Lucide-style line icons */
.i { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

.site-container { width:min(1200px, calc(100% - 96px)); margin-inline:auto; }

/* ---------- Top bar & header ---------- */
.topbar { background:var(--ink); color:var(--inverse-muted); font-size:11px; }
.topbar-inner { height:33px; display:flex; align-items:center; justify-content:space-between; }
.topbar-inner span,.topbar-inner a { display:flex; align-items:center; gap:7px; }
.topbar-inner a { color:var(--inverse); }
.site-header { background:var(--background); position:relative; z-index:20; }
.header-inner { height:89px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:flex; align-items:center; gap:9px; }
.brand-logo { width:auto; height:44px; flex-shrink:0; }
.brand-name { display:flex; flex-direction:column; font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:800; line-height:.88; }
.brand-name>span { font-size:18px; margin-top:5px; }
.brand-dot { color:var(--primary); }
.brand-place { display:flex; align-items:center; gap:5px; height:30px; margin-left:5px; padding-left:14px; border-left:1px solid var(--border); font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted-foreground); white-space:nowrap; }
.brand-place svg { color:var(--primary); flex-shrink:0; }
.main-nav { display:flex; gap:34px; align-items:center; height:100%; margin-left:auto; margin-right:28px; }
.nav-link { font-size:13px; font-weight:600; height:100%; display:flex; align-items:center; position:relative; }
.nav-link.active { color:var(--primary); }
.nav-link.active:after { content:''; position:absolute; bottom:20px; left:0; width:18px; height:2px; background:var(--primary); }
.nav-item { position:relative; display:flex; align-items:center; height:100%; }
.nav-trigger { gap:6px; border:0; padding:0; background:none; color:inherit; cursor:pointer; }
.nav-caret { color:var(--muted-foreground); transition:transform .2s; }
.nav-item[data-open="true"] .nav-caret { transform:rotate(180deg); }
.nav-dropdown { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:238px; flex-direction:column; gap:2px; padding:8px; background:var(--background); border:1px solid var(--border); border-radius:4px; box-shadow:0 24px 46px -26px oklch(0 0 0 / .55); }
.nav-item[data-open="true"] .nav-dropdown { display:flex; }
.nav-dropdown:before { content:''; position:absolute; top:-7px; left:50%; width:13px; height:13px; margin-left:-6px; transform:rotate(45deg); background:var(--background); border-left:1px solid var(--border); border-top:1px solid var(--border); }
.nav-dropdown-link { position:relative; display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:3px; font-size:12px; font-weight:600; transition:background .15s,color .15s; }
.nav-dropdown-link:hover { background:var(--muted); color:var(--primary); }
.nav-dropdown-link.active { background:var(--muted); color:var(--primary); }
.nav-dropdown-icon { width:29px; height:29px; display:grid; place-items:center; flex-shrink:0; border-radius:3px; background:var(--muted); color:var(--primary); }
.nav-dropdown-link.active .nav-dropdown-icon { background:var(--primary); color:var(--inverse); }
.header-call { height:42px; border-radius:3px; font-size:12px; padding-inline:19px; box-shadow:none; }
.menu-toggle { display:none; }
.menu-toggle .icon-close,.menu-toggle[aria-expanded="true"] .icon-open { display:none; }
.menu-toggle[aria-expanded="true"] .icon-close { display:block; }

/* ---------- Shared typography ---------- */
.eyebrow { display:block; font-size:10px; font-weight:800; letter-spacing:1.7px; color:var(--primary); margin-bottom:13px; }

/* ---------- Benefits strip ---------- */
.benefits { display:grid; grid-template-columns:repeat(4,1fr); padding-block:28px; gap:20px; border-bottom:1px solid var(--border); }
.benefit { display:flex; align-items:center; gap:12px; padding-right:12px; }
.benefit+ .benefit { border-left:1px solid var(--border); padding-left:22px; }
.benefit>svg { color:var(--primary); width:27px; height:27px; flex-shrink:0; }
.benefit h3 { font-size:11px; font-weight:700; margin-bottom:5px; }
.benefit p { font-size:9px; color:var(--muted-foreground); line-height:1.5; }

.section { padding-block:66px; }

/* ---------- About block (home + about) ---------- */
.about-section { background:var(--muted); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; }
.about-photo { width:100%; aspect-ratio:1.3; object-fit:cover; object-position:75% center; border-radius:4px; }
.about-copy h2,.contact-band h2 { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:38px; line-height:1.15; }
.about-copy p { line-height:1.85; color:var(--muted-foreground); margin-top:18px; font-size:13px; }
.ticks { display:flex; flex-direction:column; gap:13px; margin-block:24px; }
.tick { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:600; }
.tick svg { color:var(--primary); }

/* ---------- Contact band ---------- */
.contact-band { background:var(--primary); color:var(--inverse); padding-block:43px; }
.contact-band-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.contact-band .eyebrow { color:var(--inverse); opacity:.75; font-size:9px; }
.contact-band h2 { font-size:32px; }
.contact-band p { font-size:12px; margin-top:9px; opacity:.85; line-height:1.7; }
.contact-band a { height:46px; border-radius:3px; font-weight:700; }

/* ---------- Page intro (inner pages) ---------- */
.page-intro { background:var(--muted); padding-block:59px; border-bottom:1px solid var(--border); }
.page-intro h1 { font-family:'Barlow Condensed',sans-serif; font-size:56px; font-weight:700; }
.page-intro p { max-width:590px; color:var(--muted-foreground); margin-top:13px; line-height:1.8; }

/* ---------- Footer ---------- */
.site-footer { background:var(--ink); color:var(--inverse); padding-top:48px; }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1.4fr; gap:70px; padding-bottom:38px; }
.footer-grid p { max-width:310px; color:var(--inverse-muted); font-size:11px; line-height:1.9; margin-top:20px; }
.footer-grid h3 { font-size:12px; font-weight:700; margin-bottom:17px; }
.footer-grid>div>a:not(:first-child) { display:flex; align-items:center; gap:9px; color:var(--inverse-muted); font-size:11px; margin-block:11px; }
.footer-bottom { border-top:1px solid var(--inverse-border); padding-block:20px; display:flex; justify-content:space-between; color:var(--inverse-muted); font-size:9px; }
.footer-social { display:flex; gap:10px; margin-top:22px; }
.footer-social a { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--inverse-border); border-radius:3px; color:var(--inverse); transition:background .2s,border-color .2s; }
.footer-social a:hover { background:var(--primary); border-color:var(--primary); }

/* ==========================================================================
   Scroll reveal + lazy image loading effects
   Only active when JS is running (html.js), so content never stays hidden.
   ========================================================================== */
.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out) var(--reveal-delay,0s), transform .7s var(--ease-out) var(--reveal-delay,0s); }
.js .reveal.reveal-fade { transform:none; }
.js .reveal.reveal-left { transform:translateX(-30px); }
.js .reveal.reveal-right { transform:translateX(30px); }
.js .reveal.is-visible { opacity:1; transform:none; }

@keyframes shimmer { from { background-position:150% 0; } to { background-position:-50% 0; } }
@keyframes img-in { from { opacity:0; } to { opacity:1; } }
.js img.lazy { background-color:var(--muted); }
.js img.lazy:not(.is-loaded) { background-image:linear-gradient(100deg, transparent 30%, oklch(1 0 0 / .65) 50%, transparent 70%); background-size:200% 100%; animation:shimmer 1.3s linear infinite; }
.js img.lazy.is-loaded { animation:img-in .3s var(--ease-out); }

/* ---------- Responsive ---------- */
@media(max-width:1000px) {
 .site-container { width:calc(100% - 56px); }
 .main-nav { gap:23px; margin-right:0; }
 .benefits { grid-template-columns:1fr 1fr; gap:25px; }
 .benefit:nth-child(3) { border:0; padding-left:0; }
 .about-grid { gap:35px; }
 .footer-grid { gap:35px; }
 .brand-place { display:none; }
}
/* Header switches to the menu button below 720px */
@media(max-width:720px) {
 .header-inner { height:75px; gap:12px; }
 .brand-name { font-size:22px; }
 .brand-name>span { font-size:16px; }
 .brand-logo { height:38px; }
 .brand-place { display:flex; margin-left:2px; padding-left:10px; font-size:9px; letter-spacing:1.2px; }
 .brand-place svg { display:none; }
 .header-call { margin-left:auto; font-size:0; padding-inline:12px; height:37px; }
 .header-call svg:last-child { display:none; }
 .menu-toggle { display:inline-flex; }
 .main-nav { display:none; position:absolute; inset:75px 0 auto; background:var(--background); padding:18px; height:auto; border-bottom:1px solid var(--border); }
 .main-nav.nav-open { display:flex; flex-direction:column; align-items:stretch; gap:0; }
 .nav-link { padding:14px; }
 .nav-link.active:after { bottom:8px; left:14px; }
 .nav-item { display:block; height:auto; }
 .nav-trigger { width:100%; justify-content:space-between; }
 .nav-dropdown { position:static; transform:none; min-width:0; padding:6px 0 12px; border:0; border-block:1px solid var(--border); border-radius:0; box-shadow:none; }
 .nav-dropdown:before { display:none; }
 .nav-dropdown-link { padding:12px 14px; }
}
@media(max-width:640px) {
 .site-container { width:calc(100% - 36px); }
 .topbar-inner { height:29px; font-size:9px; }
 .topbar-inner span { max-width:210px; }
 .topbar-inner span svg { display:none; }
 .benefits { padding-block:25px; gap:23px 14px; }
 .benefit { gap:9px; padding-right:0; }
 .benefit+.benefit { padding-left:0; border:none; }
 .benefit>svg { width:23px; height:23px; }
 .benefit h3 { font-size:10px; }
 .benefit p { font-size:9px; }
 .section { padding-block:43px; }
 .about-copy h2 { font-size:34px; }
 .about-grid { grid-template-columns:1fr; gap:30px; }
 .about-photo { aspect-ratio:1.4; }
 .contact-band-inner { flex-direction:column; align-items:flex-start; gap:23px; }
 .contact-band h2 { font-size:30px; }
 .footer-grid { grid-template-columns:1fr 1fr; gap:30px 20px; }
 .footer-grid>div:first-child { grid-column:1/-1; }
 .footer-grid>div:last-child { min-width:0; }
 .footer-grid>div>a { overflow-wrap:anywhere; }
 .footer-grid>div>a svg { flex-shrink:0; }
 .footer-bottom { flex-direction:column; gap:9px; }
 .page-intro { padding-block:39px; }
 .page-intro h1 { font-size:44px; }
 .page-intro p { font-size:13px; }
 .js .reveal.reveal-left,.js .reveal.reveal-right { transform:translateY(26px); }
}
@media(prefers-reduced-motion:reduce) {
 * { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
 .js .reveal { opacity:1; transform:none; }
}