:root { --cream:#f7f3ed; --cream-deep:#eee7da; --navy:#18324f; --navy-deep:#10283f; --terracotta:#bf5d32; --terracotta-light:#db8a62; --sand:#bdab94; --ink:#182d40; --muted:#526474; --line:#dfd6c8; --serif:"DM Serif Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --shadow:0 24px 54px rgba(24,50,79,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5.5rem; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.container { width:min(1160px, calc(100% - 2.5rem)); margin-inline:auto; }
.skip-link { position:fixed; top:-6rem; left:1rem; z-index:100; padding:.75rem 1rem; color:#fff; background:var(--navy); transition:top .2s; }.skip-link:focus { top:1rem; }
.site-header { position:fixed; z-index:20; top:0; width:100%; padding:.75rem 0; transition:background .25s, box-shadow .25s; }.site-header.is-scrolled { background:rgba(247,243,237,.95); box-shadow:0 2px 18px rgba(24,50,79,.09); backdrop-filter:blur(12px); }
.nav-wrap { min-height:3.8rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }.brand { display:flex; flex-direction:column; line-height:.9; }.brand__name { font:700 1.7rem/1 var(--serif); letter-spacing:-.06em; color:var(--navy); }.brand__descriptor { margin-top:.3rem; color:var(--terracotta); font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.main-nav { display:flex; gap:1.85rem; }.main-nav a { position:relative; padding:.4rem 0; font-size:.88rem; font-weight:600; }.main-nav a:after { position:absolute; right:0; bottom:.1rem; left:0; height:2px; content:""; background:var(--terracotta); transform:scaleX(0); transform-origin:right; transition:transform .2s; }.main-nav a:hover:after { transform:scaleX(1); transform-origin:left; }
.nav-call, .button { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border:0; border-radius:4px; cursor:pointer; font:700 .88rem/1 var(--sans); transition:transform .18s, background .18s, color .18s, box-shadow .18s; }.nav-call { padding:.88rem 1rem; color:#fff; background:var(--terracotta); }.nav-call svg,.button svg { width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.8; }.nav-call:hover,.button--terracotta:hover { background:#a84d27; box-shadow:0 8px 20px rgba(191,93,50,.25); }.button:active,.nav-call:active { transform:scale(.97); }
.menu-toggle { display:none; padding:.5rem; border:0; background:none; }.menu-toggle span { display:block; width:1.45rem; height:2px; margin:.25rem; background:var(--navy); transition:transform .2s, opacity .2s; }
.hero { position:relative; display:grid; min-height:46rem; overflow:hidden; isolation:isolate; }.hero__image { position:absolute; inset:0 0 0 42%; z-index:-2; background:url("images/kader-hero.webp") center/cover no-repeat; }.hero__veil { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, var(--cream) 0%, var(--cream) 36%, rgba(247,243,237,.88) 50%, rgba(247,243,237,.11) 74%); }.hero__content { align-self:center; padding-top:7.2rem; padding-bottom:4.5rem; }.eyebrow { display:inline-block; margin:0 0 1.25rem; color:var(--terracotta); font-size:.69rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.eyebrow:before { display:inline-block; width:.45rem; height:.45rem; margin-right:.45rem; content:""; background:var(--terracotta); border-radius:50%; vertical-align:1px; }
h1,h2,h3,p { margin-top:0; }h1,h2,h3 { color:var(--ink); font-family:var(--serif); font-weight:400; } h1 { max-width:660px; margin-bottom:1.5rem; font-size:clamp(3.2rem,6vw,5.5rem); line-height:.98; letter-spacing:-.045em; } h1 em,h2 em { color:var(--terracotta); } .hero__lead { max-width:34rem; color:#3d5264; font-size:1.04rem; line-height:1.72; }.hero__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin:2rem 0 2.4rem; }.button { min-height:3rem; padding:.95rem 1.3rem; }.button--terracotta { color:#fff; background:var(--terracotta); }.button--outline { color:var(--navy); border:2px solid var(--navy); background:transparent; }.button--outline:hover { color:#fff; background:var(--navy); }.button--navy { color:#fff; background:var(--navy); }.button--navy:hover { background:var(--navy-deep); }
.trust-list { display:flex; flex-wrap:wrap; gap:1.4rem; padding:0; margin:0; list-style:none; color:#44586b; font-size:.76rem; font-weight:600; }.trust-list span { color:var(--terracotta); }.scroll-cue { position:absolute; right:0; bottom:1.65rem; left:0; width:max-content; margin:auto; color:#687280; font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.scroll-cue span { display:block; color:var(--terracotta); font-size:1.15rem; text-align:center; }
.proof-band { padding:3.5rem 0; color:#fff; background:var(--navy); }.proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.proof-item { text-align:center; }.proof-item strong { display:block; color:#fff; font:400 clamp(2.1rem,4vw,3.3rem)/1 var(--serif); }.proof-item strong span { color:var(--terracotta-light); }.proof-item p { margin:.45rem 0 0; color:var(--sand); font-size:.69rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.section { padding:7rem 0; }.section-heading { margin-bottom:3.2rem; }.section-heading h2,.about h2,.contact h2 { margin-bottom:1.25rem; font-size:clamp(2.45rem,4vw,4.15rem); line-height:1.03; letter-spacing:-.04em; }.heading-line { display:block; width:3rem; height:3px; background:var(--terracotta); }.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.service-card { position:relative; min-height:16rem; padding:2rem; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:7px; transition:transform .22s, box-shadow .22s; }.service-card:before { position:absolute; top:0; bottom:0; left:0; width:3px; content:""; background:var(--terracotta); opacity:0; transition:opacity .2s; }.service-card:hover { box-shadow:var(--shadow); transform:translateY(-5px); }.service-card:hover:before { opacity:1; }.service-card__number { position:absolute; top:.8rem; right:1.2rem; color:#efeae1; font:400 3rem/1 var(--serif); }.service-card__icon { display:grid; width:2.55rem; height:2.55rem; margin-bottom:1.5rem; color:var(--terracotta); background:#fbefe9; border-radius:3px; font-size:1.5rem; place-items:center; }.service-card h3 { position:relative; margin-bottom:.7rem; font-size:1.32rem; }.service-card p { position:relative; margin-bottom:0; color:var(--muted); font-size:.88rem; line-height:1.7; }
.about { background:var(--cream-deep); }.about-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:center; gap:clamp(3rem,7vw,7.5rem); }.about__visual { position:relative; }.about__visual:after { position:absolute; z-index:0; right:-1rem; bottom:-1rem; width:7rem; height:7rem; content:""; background:#d6a187; border-radius:6px; }.about__visual img { position:relative; z-index:1; width:100%; min-height:32rem; object-fit:cover; border-radius:7px; }.experience-badge { position:absolute; z-index:2; right:1.5rem; bottom:1.5rem; left:1.5rem; padding:1.2rem 1.4rem; color:#fff; background:rgba(24,50,79,.94); border-radius:5px; backdrop-filter:blur(8px); }.experience-badge strong { display:block; font:400 1.75rem/1 var(--serif); }.experience-badge span { display:block; margin-top:.25rem; color:var(--sand); font-size:.77rem; }.about__content > p:not(.eyebrow) { color:#425767; line-height:1.75; }.check-list { display:grid; gap:.7rem; padding:0; margin:1.5rem 0 2rem; list-style:none; color:#354d60; font-size:.9rem; }.check-list li:before { margin-right:.75rem; color:var(--terracotta); content:"✓"; font-weight:700; }
.gallery-section { background:#fbfaf7; }.gallery-grid { display:grid; grid-template-columns:1.12fr 1fr 1fr; gap:1rem; }.gallery-item { position:relative; min-height:23rem; overflow:hidden; margin:0; border-radius:7px; background:var(--navy); }.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .45s; }.gallery-item:hover img { transform:scale(1.06); }.gallery-item:after { position:absolute; right:0; bottom:0; left:0; height:45%; content:""; background:linear-gradient(transparent,rgba(16,40,63,.78)); }.gallery-item figcaption { position:absolute; z-index:1; bottom:1rem; left:1rem; color:#fff; font-size:.82rem; font-weight:700; }.gallery-cta { margin:2.5rem 0 0; text-align:center; }
.contact { color:#fff; background:var(--navy); }.contact-grid { display:grid; grid-template-columns:.9fr 1fr; gap:clamp(3rem,8vw,8rem); }.contact h2 { color:#fff; }.contact .heading-line { margin-bottom:1.5rem; }.contact__info>p:not(.eyebrow) { max-width:31rem; color:var(--sand); line-height:1.7; }.contact-details { display:grid; gap:1.25rem; margin-top:2rem; font-style:normal; }.contact-details a,.contact-details p { display:grid; gap:.25rem; }.contact-details span { color:#95a7b7; font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.contact-details strong { color:#fff; font-size:.92rem; font-weight:600; }.contact-details a:hover strong { color:var(--terracotta-light); }
.contact-form { padding:2rem; background:#24425e; border-radius:7px; }.contact-form label { display:grid; gap:.5rem; color:#c3cfda; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.contact-form input,.contact-form textarea { width:100%; padding:.8rem .9rem; color:#fff; outline:none; background:#31516e; border:1px solid #42617b; border-radius:3px; font:400 .9rem/1.4 var(--sans); transition:border .18s, box-shadow .18s; }.contact-form textarea { resize:vertical; }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--terracotta-light); box-shadow:0 0 0 3px rgba(219,138,98,.18); }.contact-form label+label { margin-top:1rem; }.contact-form .button { width:100%; margin-top:1.3rem; }.form-status { min-height:1.25rem; margin:1rem 0 0; color:#e8c7b6; font-size:.83rem; text-align:center; }
.site-footer { padding:2rem 0; color:#99aab8; background:var(--navy-deep); }.footer-wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.footer-wrap strong { color:#fff; font:400 1.2rem var(--serif); }.footer-wrap p { margin:.25rem 0 0; font-size:.72rem; }.whatsapp-fab { position:fixed; z-index:15; right:1.25rem; bottom:1.25rem; display:grid; width:3.2rem; height:3.2rem; color:#fff; background:#1f9d60; border:3px solid var(--cream); border-radius:50%; box-shadow:0 5px 18px rgba(0,0,0,.18); font-size:.75rem; font-weight:700; place-items:center; transition:transform .2s; }.whatsapp-fab:hover { transform:translateY(-3px); }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1); }.reveal.is-visible { opacity:1; transform:translateY(0); }.reveal--delay-1 { transition-delay:.08s; }.reveal--delay-2 { transition-delay:.16s; }.reveal--delay-3 { transition-delay:.24s; }.reveal--delay-4 { transition-delay:.32s; }
@media (max-width:860px) { .nav-call span { display:none; }.nav-call { padding:.75rem; }.main-nav { gap:1.15rem; }.hero__image { inset:0; }.hero__veil { background:linear-gradient(90deg,rgba(247,243,237,.97),rgba(247,243,237,.83) 58%,rgba(247,243,237,.44)); }.services-grid { grid-template-columns:repeat(2,1fr); }.gallery-grid { grid-template-columns:repeat(3,1fr); }.gallery-item { min-height:17rem; } }
@media (max-width:640px) { .container { width:min(100% - 2rem,1160px); }.site-header { padding:.5rem 0; background:rgba(247,243,237,.96); box-shadow:0 1px 8px rgba(24,50,79,.08); }.menu-toggle { display:block; margin-left:auto; }.main-nav { position:absolute; top:100%; right:0; left:0; display:grid; gap:0; padding:.4rem 1rem 1rem; visibility:hidden; background:var(--cream); box-shadow:0 10px 16px rgba(24,50,79,.08); opacity:0; transform:translateY(-.75rem); transition:.2s; }.main-nav.is-open { visibility:visible; opacity:1; transform:translateY(0); }.main-nav a { padding:.8rem .2rem; }.nav-call { margin-left:0; }.menu-toggle.is-open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }.menu-toggle.is-open span:nth-child(2) { opacity:0; }.menu-toggle.is-open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }.hero { min-height:42rem; }.hero__content { padding-top:8rem; }.hero__veil { background:linear-gradient(90deg,rgba(247,243,237,.97),rgba(247,243,237,.81) 64%,rgba(247,243,237,.55)); } h1 { font-size:3.35rem; }.trust-list { gap:.65rem 1rem; }.proof-band { padding:2.6rem 0; }.proof-grid { grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }.section { padding:5rem 0; }.services-grid,.about-grid,.contact-grid { grid-template-columns:1fr; }.service-card { min-height:auto; }.about__visual img { min-height:24rem; }.gallery-grid { grid-template-columns:1fr; }.gallery-item { min-height:16rem; }.contact-form { padding:1.3rem; }.form-row { grid-template-columns:1fr; }.footer-wrap { flex-direction:column; align-items:flex-start; }.footer-wrap>p { line-height:1.5; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; }.gallery-item img,.button,.nav-call { transition:none; } }