/* Shared by every public page (landing page and blog): colours, heading style, header, buttons, footer. */
        :root {
            /* THE heading style. Every heading uses these four values: Jost Light, 48px on desktop, scaling down on phones.
               Measured from the user's reference ("Comfort Meet Elegance" ≈ 462px wide = 47-48px Jost 300). */
            --h-font:'Jost', system-ui, sans-serif; --h-size:clamp(2rem, 4vw + 1rem, 3rem); --h-weight:300; --h-lh:1.15;
            /* Sub-headings inside cards (project titles, service titles) */
            --h3-size:1.5rem; --h3-weight:400;
            --brand:#e30613; --brand-dark:#b8050f; --gutter:clamp(16px, 3vw, 40px); --ink:#1c1c1e; --muted:#6b6b70; --bg:#f4f1f0; --line:#d9d4d2; }
        * { box-sizing:border-box; margin:0; padding:0; }
        html { scroll-behavior:smooth; }
        body { font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; -webkit-text-size-adjust:100%; }

        section[id] { scroll-margin-top:76px; }

        /* ---------- Header ---------- */
        .site-header { position:fixed; top:0; left:0; right:0; z-index:50; transition:background .25s, box-shadow .25s; }
        .site-header.scrolled, .site-header.open { background:rgba(15,15,20,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 2px 18px rgba(0,0,0,.25); }
        .hdr { max-width:1640px; margin:0 auto; height:76px; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:16px; }
        .logo { display:flex; align-items:center; flex:none; }
        .logo img { height:64px; width:auto; display:block; }
        .nav { display:none; }
        .nav a { color:#fff; text-decoration:none; font-weight:600; font-size:.95rem; opacity:.95; transition:color .15s; white-space:nowrap; }
        .nav a:hover { color:#ff7d89; }
        .cta { background:var(--brand); color:#fff; text-decoration:none; font-weight:700; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; padding:13px 22px; border-radius:6px; transition:background .15s; white-space:nowrap; }
        .cta:hover { background:var(--brand-dark); }
        .cta.d { display:none; }
        .burger { width:44px; height:44px; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
        .burger span, .burger span::before, .burger span::after { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:transform .2s, background .2s; content:""; }
        .burger span { position:relative; }
        .burger span::before { position:absolute; top:-7px; }
        .burger span::after { position:absolute; top:7px; }
        .site-header.open .burger span { background:transparent; }
        .site-header.open .burger span::before { transform:translateY(7px) rotate(45deg); }
        .site-header.open .burger span::after { transform:translateY(-7px) rotate(-45deg); }
        .site-header.open .nav { display:flex; flex-direction:column; gap:4px; position:absolute; top:76px; left:0; right:0; padding:8px 16px 20px; background:rgb(15,15,20); }
        .site-header.open .nav a { padding:13px 4px; border-bottom:1px solid rgba(255,255,255,.1); }
        .site-header.open .nav a.cta { margin-top:12px; text-align:center; border:0; padding:15px; }
        .site-header.solid { background:rgba(15,15,20,.96); box-shadow:0 2px 18px rgba(0,0,0,.25); }   /* pages with no dark hero behind the header */

        /* Section heading design (use on every new section): small grey tag + large light Jost title */
        .tag { display:inline-block; background:#f2f2f4; color:#1c1c1e; font-size:.88rem; font-weight:500; line-height:1; padding:9px 15px; border-radius:5px; letter-spacing:.01em; }
        .sec-title { font-family:var(--h-font); font-weight:var(--h-weight); font-size:var(--h-size); line-height:var(--h-lh); color:#14151a; letter-spacing:0; margin:20px 0 22px; text-wrap:balance; }
        .btn-dark { display:inline-block; margin-top:8px; padding:15px 32px; border-radius:999px; background:#101423; color:#fff; text-decoration:none; font-weight:600; transition:background .15s, transform .15s; }
        .btn-dark:hover { background:var(--brand); transform:translateY(-1px); }
        button.btn-dark { border:0; cursor:pointer; font:inherit; font-weight:600; }
        /* ---------- Footer: light rounded panel with 4 columns ---------- */
        .site-footer { background:#fff; padding:0 clamp(10px, 1.4vw, 20px) clamp(10px, 1.4vw, 20px); }
        .foot-panel { max-width:1880px; margin:0 auto; background:#f4f4f5; border-radius:clamp(20px, 2.2vw, 32px); padding:clamp(36px, 5vw, 72px) clamp(20px, 4vw, 64px) 0; color:#14151a; font-size:.95rem; line-height:1.75; }
        .foot-in { max-width:1320px; margin:0 auto; }
        .foot-grid { display:grid; gap:36px 40px; grid-template-columns:1fr; }
        .foot-logos img { display:block; width:271px; max-width:100%; height:auto; }
        .foot-h { font-family:'Inter', system-ui, sans-serif; font-weight:500; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:#74757d; margin:0 0 12px; }
        .foot-col > * + .foot-h { margin-top:26px; }          /* space between the groups inside a column */
        .foot-col address { font-style:normal; max-width:340px; }
        .foot-col p { margin:0 0 8px; }
        .foot-col ul { list-style:none; display:grid; gap:12px; }
        .foot-col a { color:#14151a; text-decoration:none; background:linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat; transition:background-size .25s ease, color .15s; }
        .foot-col a:hover, .foot-col a:focus-visible { color:var(--brand); background-size:100% 1px; }
        .foot-logos a { background:none; }
        .foot-bottom { margin-top:52px; padding:22px 0 26px; border-top:1px solid #e0e0e4; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 20px; font-size:.82rem; color:#74757d; }
        .foot-bottom a { color:#14151a; text-decoration:none; font-weight:500; transition:color .15s; }
        .foot-bottom a:hover { color:var(--brand); }
        @media (min-width:640px) { .foot-grid { grid-template-columns:repeat(2, 1fr); } }
        @media (min-width:1000px) { .foot-grid { grid-template-columns:1.05fr 1.25fr 1.1fr .8fr; gap:40px 56px; } }

        /* Round "back to top" button, shown after scrolling down a little */
        .to-top { position:fixed; right:20px; bottom:20px; z-index:40; width:48px; height:48px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; box-shadow:0 10px 24px rgba(227,6,19,.35); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s, visibility .25s, background .15s; }
        .to-top.show { opacity:1; visibility:visible; transform:none; }
        .to-top:hover { background:var(--brand-dark); }

        @media (min-width:900px) {
            .nav { display:flex; gap:clamp(14px, 2.2vw, 34px); align-items:center; }
            .cta.d { display:inline-block; padding:13px 18px; }
            .burger, .nav a.cta { display:none; }
        }
        @media (min-width:1240px) { .cta.d { padding:13px 22px; } }