/* DBAY EXQUISITE — shared styles for the content pages */ :root{--orange:#F26A21;--orange-dark:#D9550F;--orange-soft:#FFF1E9;--navy:#0B1F3A;--green:#16A34A;--green-soft:#E9F8EF;--slate:#475569;--slate-light:#64748B;--line:#E7ECF3;--bg-soft:#F6F8FB;--shadow:0 16px 40px -18px rgba(11,31,58,.22);--radius:16px} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Inter',system-ui,sans-serif;color:var(--navy);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:'Manrope',sans-serif;letter-spacing:-.02em;line-height:1.15} a{color:inherit;text-decoration:none} img{max-width:100%} .container{max-width:1160px;margin:0 auto;padding:0 24px} .eyebrow{font-family:'Manrope';font-weight:700;font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--orange)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:15px;border:none;border-radius:11px;padding:13px 22px;cursor:pointer;transition:.18s;white-space:nowrap} .btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 22px -8px rgba(242,106,33,.6)} .btn-primary:hover{background:var(--orange-dark);transform:translateY(-1px)} .btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)} .btn-ghost:hover{border-color:var(--navy)} header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:.2s} header.scrolled{border-bottom-color:var(--line);box-shadow:0 4px 20px -14px rgba(11,31,58,.4)} .nav{display:flex;align-items:center;justify-content:space-between;height:74px} .nav-links{display:flex;gap:30px;font-size:15px;font-weight:500} .nav-links a:hover{color:var(--orange)} .nav-right{display:flex;align-items:center;gap:14px} .brand{display:flex;align-items:center;gap:10px} .logo-img{height:38px;width:auto;display:block} .menu-btn{display:none;background:none;border:none;cursor:pointer} /* page body */ .page-head{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:56px 0 44px} .page-head h1{font-size:40px;margin:12px 0 10px;max-width:22ch} .page-head p.stand{color:var(--slate);font-size:17px;max-width:62ch} .prose{padding:54px 0 70px;max-width:760px} .prose h2{font-size:25px;margin:38px 0 14px} .prose h3{font-size:19px;margin:28px 0 10px} .prose p{margin-bottom:15px;color:var(--slate);font-size:16.5px} .prose ul,.prose ol{margin:0 0 18px 22px;color:var(--slate);font-size:16.5px} .prose li{margin-bottom:8px} .prose strong{color:var(--navy)} .prose a{color:var(--orange);font-weight:600} .prose a:hover{text-decoration:underline} .prose table{border-collapse:collapse;width:100%;margin:6px 0 22px;font-size:15.5px} .prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left} .prose th{background:var(--bg-soft);font-family:'Manrope';font-weight:700;font-size:14px} .prose td{color:var(--slate)} .note{background:var(--orange-soft);border-left:3px solid var(--orange);border-radius:0 12px 12px 0;padding:16px 18px;margin:22px 0} .note p{margin:0;color:var(--navy);font-size:15.5px} .qa{border-top:1px solid var(--line);padding:18px 0} .qa h3{margin:0 0 6px;font-size:17px} .qa p{margin:0} .updated{font-size:14px;color:var(--slate-light)} .postcard{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:18px;transition:.18s} .postcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)} .postcard h3{font-size:20px;margin-bottom:8px} .postcard p{color:var(--slate);font-size:15.5px;margin:0} .postcard .tag{font-size:12.5px;color:var(--orange);font-family:'Manrope';font-weight:700;letter-spacing:.06em;text-transform:uppercase} .cta-strip{background:var(--navy);color:#fff;border-radius:var(--radius);padding:34px;text-align:center;margin:44px 0 0} .cta-strip h2{color:#fff;font-size:24px;margin:0 0 8px} .cta-strip p{color:rgba(255,255,255,.75);margin:0 0 18px;font-size:16px} .btn-white{background:#fff;color:var(--navy)} footer{background:var(--navy);color:rgba(255,255,255,.72);padding:62px 0 28px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.1)} .foot-brand p{font-size:14px;margin-top:14px;max-width:34ch;color:rgba(255,255,255,.7)} .foot-brand a{color:rgba(255,255,255,.85)} .foot-brand a:hover{color:var(--orange)} .foot-col h4{color:#fff;font-family:'Manrope';font-size:15px;margin-bottom:15px} .foot-col a{display:block;font-size:14px;margin-bottom:10px;color:rgba(255,255,255,.7)} .foot-col a:hover{color:var(--orange)} .foot-bottom{text-align:center;padding-top:24px;font-size:13.5px;color:rgba(255,255,255,.5)} @media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.nav-links{display:none}.menu-btn{display:block}.page-head h1{font-size:32px} .nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:#fff;padding:20px 24px;gap:16px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}} @media(max-width:560px){.foot-grid{grid-template-columns:1fr}.page-head h1{font-size:28px}.prose{padding:38px 0 54px}} /* ═══════════════════════════════════════════════════════════════════════════ 2026 DESIGN LAYER — same grammar as the homepage, so the whole site reads as one company: indigo ink on paper, one accent, medium-weight display type set tight, monospaced micro-labels, wide radii, pill controls. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --ink:#0C0730; --ink-70:rgba(12,7,48,.70); --ink-55:rgba(12,7,48,.55); --paper:#FFFFFF; --wash:#F5F4F0; --wash-2:#EFEDE6; --teal:#0A997D; --display:'Plus Jakarta Sans','Manrope',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace; --navy:var(--ink); --slate:var(--ink-70); --slate-light:var(--ink-55); --line:#E6E3DB; --line-2:#D8D4C9; --bg-soft:var(--wash); --green:var(--teal); --green-soft:rgba(10,153,125,.10); --r-xl:28px; --r-lg:22px; --hair:0 1px 2px rgba(12,7,48,.06); --lift:0 18px 44px -28px rgba(12,7,48,.45); --shadow:var(--lift); --radius:var(--r-lg); } body{color:var(--ink);font-size:16.5px;line-height:1.62;background:var(--paper)} h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.08} .eyebrow{ font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:1.05px; text-transform:uppercase;color:var(--ink-55);display:inline-flex;align-items:center;gap:8px; } .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 6px} .btn{border-radius:999px;font-family:var(--display);font-weight:600;padding:14px 24px} .btn-ghost{box-shadow:var(--hair)} .page-head{background:var(--wash);border-bottom:1px solid var(--line);padding:64px 0 52px} .page-head h1{font-size:clamp(30px,3.6vw,46px);margin:16px 0 12px} .page-head p.stand{font-size:17px;color:var(--ink-70)} .prose{max-width:720px} .prose h2{font-size:26px;margin:44px 0 14px} .prose h3{font-size:18.5px;margin:30px 0 10px} .prose p,.prose li{color:var(--ink-70);font-size:16.5px} .prose a{color:var(--orange);font-weight:600} .prose table{border-radius:14px;overflow:hidden;border:1px solid var(--line)} .prose th{ background:var(--wash);font-family:var(--mono);font-size:10.5px;font-weight:500; letter-spacing:1px;text-transform:uppercase;color:var(--ink-55); } .prose th,.prose td{border:0;border-bottom:1px solid var(--line)} .prose tr:last-child td{border-bottom:0} .note{border-radius:0 16px 16px 0;background:var(--wash)} .updated{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-55)} .qa{border-top:1px solid var(--line);padding:22px 0} .qa h3{margin:0 0 6px;font-size:17px} .postcard{border-radius:var(--r-lg);box-shadow:var(--hair);padding:28px} .postcard:hover{box-shadow:var(--lift)} .postcard .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--teal)} .cta-strip{ border-radius:var(--r-xl);padding:44px 34px; background:linear-gradient(160deg,#141034,#0C0730 65%);box-shadow:var(--lift); } .cta-strip h2{font-size:clamp(24px,2.6vw,32px)} .cta-strip p{color:rgba(255,255,255,.78)} .btn-white{border-radius:999px} header{background:rgba(255,255,255,.82);backdrop-filter:blur(14px)} .nav{height:82px} .nav-links a{color:var(--ink-70)} footer{background:var(--ink)} .foot-col h4{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:1px;color:rgba(255,255,255,.55)} .foot-brand p{color:rgba(255,255,255,.66);line-height:1.7} .foot-brand a{color:rgba(255,255,255,.88)} .foot-col a{color:rgba(255,255,255,.72)} .foot-bottom{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase} /* Contrast pass — measured, not eyeballed. Micro-labels sat at 3.95:1 on the wash (below the 4.5 needed for small text) and white on the bright orange was 3.06:1. Labels move to 62% ink, text-teal darkens, and a filled button uses a deeper orange while the bright one stays for accents and artwork. */ :root{ --label:rgba(12,7,48,.62); --teal-text:#097A63; --orange-cta:#C64A0B; } .eyebrow,.updated,.hint,.foot-bottom,.hstep .n,.field label,.track-head .lbl, .step .time,.postcard .tag,.prose th{color:var(--label)} .postcard .tag{color:var(--teal-text)} /* Brand orange. Not mine to change. */ .btn-primary{background:var(--orange);color:#fff;box-shadow:0 12px 26px -14px rgba(242,106,33,.75)} .btn-primary:hover{background:var(--orange-dark);transform:translateY(-1px)} .btn-primary svg{stroke:#fff} .sec-head p,.prose p,.prose li,.card p,.hstep p,.step .desc{color:var(--ink-70)} /* Heading LEVEL is semantics; heading LOOK is CSS. These two moved up a level so screen readers get a sane outline - they keep the size they had. */ .foot-col h2.foot-h{ color:rgba(255,255,255,.55);font-family:var(--mono);font-size:10.5px;font-weight:500; letter-spacing:1px;text-transform:uppercase;margin-bottom:15px;line-height:1.4; } .oc-title{font-size:21px;margin:0 0 6px} .post-title{font-size:20px;margin-bottom:8px} /* Nothing you have to tap is smaller than 44px on a phone. */ @media(max-width:560px){ .menu-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px} /* Footer links are one per line. Making them inline-block to hit 44px ran "How It Works" and "What We Do" together into one sentence. */ .foot-col a{display:block;padding:9px 0;min-height:44px;line-height:26px;margin-bottom:0} .nav-links a{display:block;padding:9px 0;min-height:44px;line-height:26px} /* A link inside a sentence stays inside the sentence - forcing 44px on it tore the address block into double-spaced lines. */ .foot-brand p a{display:inline;min-height:0;padding:0;line-height:inherit} .btn{min-height:48px} .track-form input,.field input,.field select{min-height:48px} } /* Keyboard users can always see where they are. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{ outline:2.5px solid var(--orange);outline-offset:3px;border-radius:8px; } @media(max-width:560px){ /* The logo is a link too - it gets a full fingertip like everything else. */ .brand{min-height:44px;display:flex;align-items:center} } /* Social: the mark people recognise, not the word. Each one is a real link to that profile, opens in its own tab, and carries a label for screen readers and for anyone hovering. */ .socials{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap} .soc{ width:40px;height:40px;border-radius:999px;display:grid;place-items:center; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14); transition:background .18s ease,border-color .18s ease,transform .18s cubic-bezier(.2,.8,.2,1); } .soc svg{width:17px;height:17px;fill:rgba(255,255,255,.82)} .soc:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px)} .soc:hover svg{fill:#fff} .soc:focus-visible{outline:2.5px solid var(--orange);outline-offset:3px} @media(max-width:560px){ .soc{width:44px;height:44px} .soc svg{width:19px;height:19px} } /* The icon row needs air under it: on a phone the next column's heading sat right against the buttons, which is what "almost outside the box" was. */ .socials{margin:18px 0 4px} .foot-brand{padding-bottom:6px} @media(max-width:900px){ .foot-grid{gap:30px 38px} .socials{margin:16px 0 10px} } /* Contact tiles: the mark first, then the handle. Reads at a glance and is one tap on a phone - a line of "WhatsApp: 0902..." is neither. */ .ctiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:18px 0 14px} .ctile{ display:flex;align-items:center;gap:13px;padding:13px 15px; background:var(--paper);border:1px solid var(--line);border-radius:16px; box-shadow:var(--hair);transition:border-color .18s,box-shadow .18s,transform .18s cubic-bezier(.2,.8,.2,1); } .ctile:hover{border-color:var(--line-2);box-shadow:var(--lift);transform:translateY(-2px)} .ctile .ic{ width:40px;height:40px;flex:0 0 40px;border-radius:999px;display:grid;place-items:center; background:var(--wash-2);transition:background .18s; } .ctile .ic svg{width:18px;height:18px;fill:var(--ink)} .ctile:hover .ic{background:var(--orange)} .ctile:hover .ic svg{fill:#fff} .ctile .tx{display:flex;flex-direction:column;min-width:0} .ctile .tx b{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3} .ctile .tx i{font-style:normal;font-size:12.5px;color:var(--ink-70);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prose .ctile{text-decoration:none} .prose a.ctile{color:inherit;font-weight:inherit;text-decoration:none} .prose a.ctile:hover{text-decoration:none} p.where{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--label)} @media(max-width:560px){ .ctiles{grid-template-columns:1fr} .ctile{min-height:56px} } /* ── The reading column sits in the middle of the page ──────────────────── .prose was 720px wide with no auto margin, so on a laptop every content page clung to the left edge with 480px of nothing beside it, and the closing panel was a different width from the footer under it. Head, body and panel now share one centred column. */ .page-head > .container, main > .container{max-width:812px} .prose{max-width:none;margin:0 auto} @media(min-width:1024px){ .page-head{padding:72px 0 56px} .prose{padding:60px 0 76px} } /* MESSAGE US ▼ — floating WhatsApp button */ /* ── "Message us" ───────────────────────────────────────────────────────── A floating WhatsApp button, bottom-right, on every page. It stays out of the way over the hero so it never competes with the page's own first call to action, then fades in once the reader has scrolled and follows them the rest of the way down. It is hidden by default and revealed by the script next to the markup, so a stuck script can never leave a dead button on screen. The