:root{ --ink:#2B3A3F; --ink-soft:#5A6B71; --cream:#FAF7F2; --sand:#F1EAE1; --sand-deep:#E4D9CC; --teal:#7BA5B5; --teal-deep:#4E7C8C; --teal-text:#466F7E; /* darker than --teal-deep: passes 4.5:1 on cream/white for small text like .eyebrow */ --teal-wash:#EAF1F4; --sage:#A9BFA3; --line:rgba(43,58,63,.12); --shadow:0 1px 2px rgba(43,58,63,.04), 0 8px 30px rgba(43,58,63,.07); --shadow-lg:0 2px 4px rgba(43,58,63,.05), 0 24px 60px rgba(43,58,63,.12); --radius:18px; --wrap:1140px; } *{box-sizing:border-box} html{scroll-behavior:smooth; scroll-padding-top:88px} body{ margin:0; font-family:'Rubik',-apple-system,'Segoe UI',sans-serif; color:var(--ink); background:var(--cream); font-size:18px; line-height:1.75; -webkit-font-smoothing:antialiased; } /* single family throughout — hierarchy comes from weight, not typeface */ h1,h2,h3,h4{font-weight:600; letter-spacing:-.015em; line-height:1.25; margin:0} p{margin:0} a{color:inherit} img{max-width:100%; display:block} /* ---------- accessibility widget ---------- */ .a11y-toggle{ position:fixed; inset-inline-end:22px; bottom:22px; z-index:60; width:56px; height:56px; border-radius:50%; background:var(--ink); display:grid; place-items:center; box-shadow:0 8px 26px rgba(43,58,63,.35); transition:transform .2s ease; border:0; cursor:pointer; } .a11y-toggle:hover{transform:scale(1.07)} .a11y-toggle svg{width:28px; height:28px; color:#fff} .a11y-panel{ position:fixed; inset-inline-end:22px; bottom:88px; z-index:61; width:290px; max-width:calc(100vw - 44px); background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:22px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease, visibility .2s; } .a11y-panel.open{opacity:1; visibility:visible; transform:translateY(0)} .a11y-panel h3{font-size:17px; margin-bottom:16px} .a11y-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px; } .a11y-row:last-of-type{border-bottom:0} .a11y-btn-group{display:flex; gap:6px} .a11y-btn-group button, .a11y-switch{ border:1px solid var(--line); background:var(--cream); border-radius:8px; width:32px; height:32px; font-size:15px; cursor:pointer; color:var(--ink); display:grid; place-items:center; transition:background .15s ease; } .a11y-btn-group button:hover{background:var(--sand)} .a11y-switch{width:44px; height:26px; border-radius:20px; position:relative; padding:0} .a11y-switch::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:20px; height:20px; border-radius:50%; background:var(--ink-soft); transition:inset-inline-start .18s ease, background .18s ease; } .a11y-switch.on{background:var(--teal-deep)} .a11y-switch.on::after{inset-inline-start:20px; background:#fff} .a11y-reset{ margin-top:16px; width:100%; padding:9px; border-radius:10px; border:1px solid var(--line); background:var(--cream); font-size:14px; cursor:pointer; color:var(--ink-soft); } .a11y-reset:hover{background:var(--sand)} /* effects the widget toggles on */ body.a11y-text-lg{font-size:107%} body.a11y-text-xl{font-size:116%} body.a11y-underline a{text-decoration:underline !important} body.a11y-pause *{animation:none !important; transition:none !important} body.a11y-contrast{--ink:#000; --ink-soft:#1a1a1a; --cream:#fff; --sand:#fff; --line:#000} body.a11y-contrast .hero, body.a11y-contrast .reserve{background:#000 !important} body.a11y-contrast .reserve p, body.a11y-contrast .reserve .eyebrow, body.a11y-contrast .reserve-list span, body.a11y-contrast .reserve-list p{color:#fff !important} body.a11y-contrast .btn-primary{background:#000; border:2px solid #000} a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{ outline:2.5px solid var(--teal-deep); outline-offset:3px; border-radius:4px; } .btn:focus-visible{outline-color:var(--ink); outline-offset:3px} .reserve a:focus-visible, .reserve button:focus-visible{outline-color:#fff} .skip-link{ position:absolute; inset-inline-start:16px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:12px 20px; border-radius:10px; text-decoration:none; font-weight:600; font-size:15px; transition:top .2s ease; } .skip-link:focus{top:16px} .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:24px} section{padding:96px 0} .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-text); margin-bottom:14px; } .lead{font-size:20px; color:var(--ink-soft)} /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:999px; font-weight:600; font-size:17px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--teal-deep); color:#fff; box-shadow:0 6px 20px rgba(78,124,140,.28)} .btn-primary:hover{background:#436D7C; box-shadow:0 10px 28px rgba(78,124,140,.36)} .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)} .btn-ghost:hover{border-color:var(--teal); background:#fff} .btn svg{width:19px; height:19px; flex:none} /* ---------- nav ---------- */ header{ position:sticky; top:0; z-index:50; background:rgba(250,247,242,.88); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s ease, box-shadow .3s ease; } header.scrolled{border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(43,58,63,.05)} .nav{display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px} .brand{display:flex; align-items:center; gap:11px; text-decoration:none} /* isolate so the logo's white JPEG background multiplies against cream, not against whatever shows through the translucent header */ .brand-mark{display:block; width:46px; background:var(--cream); isolation:isolate; flex:none} .brand-mark img{width:100%; height:auto; mix-blend-mode:multiply} .brand-txt strong{display:block; font-size:18px; font-weight:600; line-height:1.25; letter-spacing:-.01em} .brand-txt span{display:block; font-size:12px; color:var(--ink-soft); letter-spacing:.04em} .nav-links{display:flex; align-items:center; gap:30px} .nav-links a{ text-decoration:none; font-size:16.5px; font-weight:500; color:var(--ink-soft); position:relative; padding-block:4px; transition:color .2s ease; } .nav-links a::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:1.5px; background:var(--teal); transform:scaleX(0); transition:transform .25s ease; } .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{transform:scaleX(1)} .nav .btn{padding:11px 22px; font-size:15.5px} .burger{display:none; background:none; border:0; padding:8px; cursor:pointer} .burger span{display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; margin:5px 0; transition:.25s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- hero ---------- */ .hero{ position:relative; overflow:hidden; padding:84px 0 96px; background: radial-gradient(70% 90% at 88% 8%, rgba(123,165,181,.16), transparent 62%), radial-gradient(60% 80% at 4% 92%, rgba(169,191,163,.16), transparent 60%), var(--cream); } .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center} .hero h1{font-size:clamp(38px,5vw,60px); letter-spacing:-.01em} .hero h1 em{font-style:normal; color:var(--teal-deep)} .hero-sub{margin-top:20px; font-size:19px; font-weight:600; color:var(--ink)} .hero .lead{margin-top:16px; max-width:33ch; font-size:21px} .hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px} .hero-note{margin-top:24px; font-size:15.5px; color:var(--ink-soft); display:flex; align-items:flex-start; gap:8px} .hero-note svg{width:17px; height:17px; color:var(--teal-deep); flex:none; margin-top:5px} .portrait{position:relative; isolation:isolate} .portrait img{ position:relative; z-index:1; width:100%; border-radius:230px 230px var(--radius) var(--radius); box-shadow:var(--shadow-lg); aspect-ratio:1086/1330; object-fit:cover; object-position:50% 12%; } .portrait::before{ content:''; position:absolute; inset:-22px 22px 22px -22px; z-index:0; border:1px solid var(--sand-deep); border-radius:230px 230px var(--radius) var(--radius); } .portrait-card{ position:absolute; z-index:2; bottom:26px; inset-inline-start:-26px; background:#fff; border-radius:14px; padding:14px 20px; box-shadow:var(--shadow); border:1px solid var(--line); font-size:14.5px; line-height:1.5; max-width:220px; } .portrait-card strong{display:block; font-size:16px; font-weight:600} .portrait-card span{color:var(--ink-soft)} /* ---------- trust strip ---------- */ .trust{background:#fff; border-block:1px solid var(--line); padding:0} .trust-grid{display:grid; grid-template-columns:repeat(4,1fr)} .trust-item{padding:30px 26px; text-align:center; border-inline-start:1px solid var(--line)} .trust-item:first-child{border:0} .trust-item strong{display:block; font-size:19px; font-weight:600; margin-bottom:3px} .trust-item span{font-size:14.5px; color:var(--ink-soft); line-height:1.5; display:block} /* ---------- about ---------- */ .about{background:var(--cream)} .about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; align-items:start} .about-mark{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow)} .about-mark img{width:100%; mix-blend-mode:multiply} .about h2{font-size:clamp(30px,3.6vw,42px); margin-bottom:22px} .about p + p{margin-top:18px} .about p{color:var(--ink-soft)} .about strong{color:var(--ink); font-weight:600} .creds-heading{font-size:18px; margin:30px 0 14px} .creds{list-style:none; margin:0; padding:0; display:grid; gap:12px} .creds li{display:flex; gap:11px; align-items:flex-start; font-size:16.5px} .creds svg{width:20px; height:20px; color:var(--teal-deep); flex:none; margin-top:5px} /* ---------- services ---------- */ .services{background:var(--sand)} .sec-head{max-width:620px; margin-bottom:52px} .sec-head h2{font-size:clamp(30px,3.6vw,42px); margin-bottom:16px} .sec-head p{color:var(--ink-soft); font-size:19px} .cards{display:grid; grid-template-columns:repeat(2,1fr); gap:24px} .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px 34px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(123,165,181,.45)} .card-icon{ width:52px; height:52px; border-radius:14px; background:var(--teal-wash); display:grid; place-items:center; margin-bottom:22px; } .card-icon svg{width:26px; height:26px; color:var(--teal-deep)} .card h3{font-size:24px; margin-bottom:12px} .card p{color:var(--ink-soft); font-size:17px} .card p + p{margin-top:14px} .card .note{margin-top:16px; font-size:14.5px; color:var(--ink-soft); opacity:.85} .card ul{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:7px} .card ul + .note{margin-top:16px} .card li{position:relative; padding-inline-start:18px; font-size:16px; color:var(--ink-soft)} .card li::before{ content:''; position:absolute; inset-inline-start:0; top:11px; width:6px; height:6px; border-radius:50%; background:var(--sage); } /* ---------- reserve / military ---------- */ .reserve{ /* darkened from the original lighter gradient so white text keeps WCAG AA contrast (4.5:1) across the whole background, not just the dark end */ background:linear-gradient(135deg,#2F4E58,#3A5D69 55%,#345560); color:#fff; } .reserve-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start} .reserve .eyebrow{color:rgba(255,255,255,.85)} .reserve h2{font-size:clamp(30px,3.6vw,42px); margin-bottom:20px} .reserve p{color:rgba(255,255,255,.92); font-size:19px} .reserve p + p{margin-top:16px} .reserve-list{list-style:none; margin:0; padding:0; display:grid; gap:16px} .reserve-list li{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:20px 22px; } .reserve-list strong{display:block; font-size:19px; font-weight:600; margin-bottom:4px} .reserve-list span,.reserve-list p{font-size:16px; color:rgba(255,255,255,.88); line-height:1.6} .reserve-list li p + p{margin-top:10px} .reserve .btn-ghost{color:#fff; border-color:rgba(255,255,255,.4); margin-top:32px} .reserve .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff} /* ---------- process ---------- */ .process{background:var(--cream)} .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step} .step{position:relative; padding-top:26px} .step::before{ counter-increment:step; content:counter(step); font-size:15px; font-weight:600; width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--teal); color:var(--teal-deep); display:grid; place-items:center; margin-bottom:18px; } .step h3{font-size:21px; margin-bottom:10px} .step p{color:var(--ink-soft); font-size:16.5px} /* ---------- faq ---------- */ .faq{background:var(--sand)} .faq-list{display:grid; gap:12px; max-width:820px} details{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:4px 26px; transition:border-color .2s ease, box-shadow .2s ease; } details[open]{border-color:rgba(123,165,181,.5); box-shadow:var(--shadow)} summary{ list-style:none; cursor:pointer; padding:20px 0; font-size:19px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between; gap:16px; } summary::-webkit-details-marker{display:none} /* physical borders, not logical — this is a visual arrow, so it must not flip with the RTL direction (border-inline-end would point it sideways) */ summary::after{ content:''; width:10px; height:10px; flex:none; margin-top:-5px; border-right:2px solid var(--teal-deep); border-bottom:2px solid var(--teal-deep); transform:rotate(45deg); transition:transform .25s ease; } details[open] summary::after{transform:rotate(-135deg); margin-top:5px} details p{padding:0 0 22px; color:var(--ink-soft); font-size:17px} /* ---------- contact ---------- */ .contact{background:var(--cream)} .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start} .contact h2{font-size:clamp(30px,3.6vw,42px); margin-bottom:18px} .contact-grid > div > p{color:var(--ink-soft); font-size:19px} .contact-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px} .details{display:grid; gap:6px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)} .detail{ display:flex; gap:16px; align-items:center; padding:18px 20px; border-radius:12px; text-decoration:none; transition:background .18s ease; } .detail:hover{background:var(--teal-wash)} .detail-ico{ width:44px; height:44px; border-radius:12px; background:var(--sand); display:grid; place-items:center; flex:none; } .detail-ico svg{width:21px; height:21px; color:var(--teal-deep)} .detail b{display:block; font-weight:600; font-size:17px; direction:ltr; text-align:start} .detail span{display:block; font-size:14.5px; color:var(--ink-soft); line-height:1.4} .detail-rtl b{direction:rtl} /* ---------- footer ---------- */ footer{background:#fff; border-top:1px solid var(--line); padding:56px 0 34px} .foot-grid{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap} .foot-logo img{width:210px; mix-blend-mode:multiply} .foot-links{display:flex; gap:26px; flex-wrap:wrap} .foot-links a{text-decoration:none; color:var(--ink-soft); font-size:16px} .foot-links a:hover{color:var(--teal-deep)} .foot-bottom{ margin-top:36px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14.5px; color:var(--ink-soft); } /* floating whatsapp */ .fab{ position:fixed; inset-inline-start:22px; bottom:22px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 8px 26px rgba(37,211,102,.4); transition:transform .2s ease; } .fab:hover{transform:scale(1.07)} .fab svg{width:29px; height:29px; color:#fff} /* reveal */ .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease} .reveal.in{opacity:1; transform:none} @media (max-width:960px){ section{padding:72px 0} .hero-grid,.about-grid,.reserve-grid,.contact-grid{grid-template-columns:1fr; gap:48px} .portrait{max-width:420px; margin-inline:auto} .portrait-card{inset-inline-start:auto; inset-inline-end:-10px} .trust-grid{grid-template-columns:1fr 1fr} .trust-item:nth-child(3){border-inline-start:0} .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)} .steps{grid-template-columns:1fr} .about-mark{max-width:360px} .nav-links{ position:absolute; inset-inline:0; top:76px; background:var(--cream); flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 20px; border-bottom:1px solid var(--line); display:none; } .nav-links.open{display:flex} .nav-links a{padding:14px 0; border-bottom:1px solid var(--line); font-size:17px} .nav-links a:last-child{border:0} .burger{display:block} .nav > .btn{display:none} } @media (max-width:640px){ body{font-size:17px} .cards{grid-template-columns:1fr} .trust-grid{grid-template-columns:1fr} .trust-item{border-inline-start:0 !important; border-bottom:1px solid var(--line)} .hero .lead{font-size:19px} .portrait-card{position:static; margin-top:16px; max-width:none; inset:auto} .card{padding:30px 26px} .hero-cta .btn,.contact-cta .btn{flex:1 1 100%; justify-content:center} .foot-grid{justify-content:center; text-align:center} } @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important} .reveal{opacity:1; transform:none} } /* ---------- inner page hero (non-home pages) ---------- */ .page-hero{ padding:56px 0 40px; background: radial-gradient(70% 90% at 88% 8%, rgba(123,165,181,.16), transparent 62%), var(--cream); } .page-hero .eyebrow{margin-bottom:12px} .page-hero h1{font-size:clamp(30px,4vw,44px)} .page-hero .lead{margin-top:14px; max-width:60ch} .breadcrumb{font-size:14.5px; color:var(--ink-soft); margin-bottom:18px} .breadcrumb a{color:var(--ink-soft); text-decoration:none} .breadcrumb a:hover{color:var(--teal-deep)} /* ---------- nav active state ---------- */ .nav-links a.active{color:var(--ink)} .nav-links a.active::after{transform:scaleX(1)} /* ---------- articles ---------- */ .articles-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px} .article-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; display:block; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .article-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(123,165,181,.45)} .article-card-img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block} .article-card-body{padding:26px 28px 30px} .article-card .eyebrow{margin-bottom:10px} .article-card h3{font-size:22px; margin-bottom:10px} .article-card p{color:var(--ink-soft); font-size:16.5px} .empty-state{ background:#fff; border:1px dashed var(--line); border-radius:var(--radius); padding:56px 40px; text-align:center; max-width:640px; margin-inline:auto; } .empty-state h3{font-size:22px; margin-bottom:12px} .empty-state p{color:var(--ink-soft); font-size:17px} @media (max-width:640px){ .articles-grid{grid-template-columns:1fr} } /* ---------- article page ---------- */ .article{background:var(--cream)} .article-cover{width:100%; max-height:440px; object-fit:cover; border-radius:var(--radius); margin-bottom:40px} .article-wrap{max-width:760px; margin-inline:auto; padding-inline:24px} .article-header{margin-bottom:44px} .article-header h1{font-size:clamp(30px,4.2vw,44px); margin-top:14px} .article-meta{margin-top:16px; font-size:15px; color:var(--ink-soft)} .article-body{font-size:19px; line-height:1.85; color:var(--ink)} .article-body p{color:var(--ink-soft); margin-bottom:24px} .article-body h2{font-size:25px; color:var(--ink); margin:44px 0 18px; font-weight:600} .article-footer{ margin-top:56px; padding-top:36px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; } .article-footer p{color:var(--ink-soft); font-size:16px; margin:0; max-width:44ch}