:root { --blue:#005faf; --blue-dark:#004982; --blue-light:#9dcbed; --navy:#16324f; --terracotta:#b96a34; --page:#fff; --surface:#f4f8fc; --text:#16324f; --muted:#546a7f; --border:#d6e1ea; --shadow:0 16px 42px rgb(22 50 79 / .12); --radius:18px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:var(--page); font:400 16px/1.65 Arial,sans-serif; } a { color:inherit; } .container { width:min(1280px,calc(100% - 40px)); margin:auto; }
.skip-link { position:fixed; z-index:100; top:-5rem; left:1rem; padding:.75rem; background:var(--navy); color:#fff; } .skip-link:focus { top:1rem; }
.site-header { position:sticky; z-index:20; top:0; border-bottom:1px solid rgb(214 225 234 / .8); background:rgb(255 255 255 / .94); backdrop-filter:blur(12px); }.nav { display:flex; min-height:74px; align-items:center; justify-content:space-between; gap:24px; }.brand { display:flex; align-items:center; gap:10px; font:bold 20px/1 Georgia,serif; text-decoration:none; }.brand b { color:var(--terracotta); }.brand-logo { display:block; width:48px; height:48px; object-fit:contain; }.brand-mark { display:grid; width:38px; height:38px; place-items:center; border-radius:9px; background:var(--blue); color:#fff; font-weight:800; }.nav-links { display:flex; gap:24px; }.nav-links a { font-size:13px; font-weight:800; text-decoration:none; }.nav-links a:hover { color:var(--blue); }
.button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 20px; border:1px solid transparent; border-radius:9px; font:800 14px/1 Arial,sans-serif; text-decoration:none; transition:transform .2s ease,background-color .2s ease; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--blue); color:#fff; }.button-primary:hover { background:var(--blue-dark); }
.hero { position:relative; display:grid; min-height:calc(100svh - 74px); align-items:center; overflow:hidden; background:var(--navy); color:#fff; }.hero-image,.hero-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.hero-overlay { background:linear-gradient(90deg,rgb(22 50 79 / .96),rgb(22 50 79 / .84) 48%,rgb(22 50 79 / .32)); }.hero-content { position:relative; padding:120px 0; }.eyebrow { margin:0; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }.eyebrow.light { color:var(--blue-light); } h1,h2,h3 { font-family:Georgia,serif; }.hero h1 { max-width:820px; margin:18px 0; font-size:clamp(42px,6vw,76px); line-height:1.04; letter-spacing:-.04em; }.hero h1 span { color:var(--blue-light); }.hero p:not(.eyebrow) { max-width:680px; font-size:18px; color:rgb(255 255 255 / .88); }.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }.button-light { background:#fff; color:var(--navy); }.button-outline { border-color:rgb(255 255 255 / .55); color:#fff; }.proof { display:flex; flex-wrap:wrap; gap:10px 22px; margin:30px 0 0; padding:0; list-style:none; font-size:13px; font-weight:800; }.proof li::before,.check-list li::before { margin-right:7px; color:var(--terracotta); content:'✓'; }
.marquee { overflow:hidden; background:var(--blue); color:#fff; }.marquee-track { display:flex; width:max-content; animation:marquee 42s linear infinite; }.marquee span { flex:0 0 auto; padding:14px clamp(9rem,17vw,19rem) 14px 0; font-size:12px; font-weight:800; letter-spacing:.13em; white-space:nowrap; } @keyframes marquee { to { transform:translateX(-50%); } }
.section { padding:clamp(72px,10vw,128px) 0; }.muted-section { background:var(--surface); }.dark-section { background:var(--navy); color:#fff; }.heading { max-width:760px; }.heading h2,.about h2,.quality h2,.contact-section h2 { margin:14px 0 0; font-size:clamp(34px,4vw,56px); line-height:1.08; letter-spacing:-.04em; }
.feature-grid,.collection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }.feature-grid article { padding:26px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; }.feature-grid article>span { color:var(--terracotta); }.feature-grid h3 { margin:10px 0 0; font-size:22px; }.feature-grid p,.collection-card p { margin:7px 0; color:var(--muted); font-size:14px; }
.two-column { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(40px,7vw,96px); }.about>img { width:100%; aspect-ratio:11/12; border-radius:var(--radius); object-fit:cover; box-shadow:var(--shadow); }.check-list { display:grid; gap:10px; margin:28px 0 0; padding:0; list-style:none; font-size:14px; font-weight:800; }
.collection-card { display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }.collection-card img { width:100%; aspect-ratio:3/2; object-fit:cover; }.collection-card>div { display:flex; flex:1; flex-direction:column; padding:24px; }.collection-card h3 { margin:0; font-size:23px; }.collection-card ul { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; padding:0; list-style:none; }.collection-card li { padding:5px 8px; border-radius:99px; background:#eaf3fa; color:var(--blue-dark); font-size:11px; font-weight:800; }.collection-card a,.text-link { margin-top:auto; padding-top:12px; color:var(--blue); font-weight:800; text-decoration:none; }
.service-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:48px 0 0; padding:0; list-style:none; }.service-grid li { display:flex; min-height:146px; flex-direction:column; justify-content:space-between; padding:22px; border:1px solid rgb(255 255 255 / .16); border-radius:14px; background:rgb(255 255 255 / .05); font-weight:800; }.service-icon,.quality-grid article>span { display:grid; width:40px; height:40px; place-items:center; border-radius:10px; background:rgb(185 106 52 / .22); color:var(--terracotta); font-size:22px; }
.factory-showcase { display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(28px,5vw,64px); align-items:center; margin-top:48px; }.factory-showcase img { width:100%; border-radius:var(--radius); aspect-ratio:3/2; object-fit:cover; box-shadow:var(--shadow); }.factory-showcase h3 { margin:0; font-size:30px; }.factory-showcase p { color:var(--muted); }
.quality-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.quality-grid article { min-height:166px; padding:22px; border:1px solid var(--border); border-radius:14px; background:#fff; }.quality-grid h3 { margin:14px 0 0; font-size:20px; }.quality-grid p { margin:8px 0; color:var(--muted); font-size:13px; }
.contact-section { background:var(--blue); color:#fff; }.contact-section a { font-weight:800; }.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,96px); }.contact-section .eyebrow { color:var(--blue-light); }.rfq-form { display:grid; gap:14px; padding:26px; border-radius:var(--radius); background:#fff; color:var(--text); }.rfq-form label { display:grid; gap:5px; font-size:13px; font-weight:800; }.rfq-form input,.rfq-form textarea { width:100%; padding:11px; border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; }.rfq-form textarea { resize:vertical; }.rfq-form .button { width:max-content; background:var(--navy); color:#fff; }.honeypot { position:absolute; left:-9999px; }.form-success { margin:0; color:#176b40; font-weight:800; }
footer { padding:48px 0 20px; background:var(--navy); color:#fff; }.footer-grid { display:flex; justify-content:space-between; gap:30px; }.footer-grid p,footer small { color:rgb(255 255 255 / .7); font-size:14px; }.footer-grid div:last-child { display:grid; align-content:start; gap:8px; }.whatsapp { position:fixed; z-index:30; right:20px; bottom:20px; display:grid; width:52px; height:52px; place-items:center; border-radius:50%; background:#238b57; color:#fff; font-size:12px; font-weight:800; text-decoration:none; box-shadow:var(--shadow); }
.story-stops { display:none; }
@media (min-width:75rem) { .story-stops { position:fixed; z-index:18; top:50%; right:clamp(1rem,2vw,2rem); display:block; width:13.5rem; transform:translateY(-50%); }.story-stops ol { display:grid; gap:1.45rem; margin:0; padding:0; list-style:none; }.story-stops button { display:grid; grid-template-columns:minmax(0,1fr) .82rem; width:100%; min-height:.82rem; align-items:center; column-gap:.7rem; padding:0; border:0; background:transparent; cursor:pointer; }.story-stops button span { justify-self:end; padding:.32rem .55rem; border-radius:.35rem; background:rgb(22 50 79 / .94); color:#fff; font-size:.65rem; font-weight:800; letter-spacing:.12em; line-height:1; opacity:0; text-transform:uppercase; transform:translateX(-.35rem); transition:opacity .22s ease,transform .22s ease; white-space:nowrap; }.story-stops button i { display:grid; width:.82rem; height:.82rem; place-items:center; }.story-stops button i::before { width:.52rem; height:.52rem; border-radius:50%; background:rgb(22 50 79 / .24); content:''; transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease; }.story-stops .past i::before,.story-stops .active i::before { background:var(--terracotta); }.story-stops .active i::before { box-shadow:0 0 0 .28rem rgb(185 106 52 / .22); transform:scale(1.58); }.story-stops .active span,.story-stops button:hover span,.story-stops button:focus-visible span { opacity:1; transform:translateX(0); } }
@media (max-width:960px) { .nav-links { display:none; }.feature-grid,.collection-grid { grid-template-columns:repeat(2,1fr); }.service-grid { grid-template-columns:repeat(3,1fr); }.two-column,.contact-layout,.factory-showcase { grid-template-columns:1fr; } }
@media (max-width:620px) { .container { width:min(100% - 32px,1280px); }.nav-cta { display:none; }.hero-content { padding:96px 0; }.hero h1 { font-size:43px; }.actions { display:grid; }.actions .button { width:100%; }.feature-grid,.collection-grid,.service-grid,.quality-grid { grid-template-columns:1fr; }.footer-grid { display:grid; }.marquee-track { animation-duration:30s; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.marquee-track { animation:none; }.button { transition:none; } }