/* ============================================================ Reform Business & Financial Services — Design System v2 Premium dark + restrained gold. Serif authority + clean sans. Fonts loaded via in each page for performance. ============================================================ */ :root { /* surfaces — deep, calm, not pure black */ --bg: #0b0d10; --surface: #101316; --surface-2: #14181b; --surface-3: #191d21; --line: #23282c; --line-2: #2d3338; --hair: rgba(201,162,63,.16); /* gold hairline */ /* ink */ --ink: #eceef0; --ink-soft: #a7afb4; --ink-mute: #717a80; /* gold — muted, sophisticated (not neon) */ --gold: #c9a23f; --gold-soft: #d8b65e; --gold-deep: #9a7c2c; --on-gold: #1a1505; --wa: #22a455; --r-xs: 4px; --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-full: 999px; --maxw: 1180px; --shadow: 0 24px 60px -22px rgba(0,0,0,.66); --shadow-sm: 0 10px 30px -16px rgba(0,0,0,.6); --ease: cubic-bezier(.22,.61,.36,1); --gp: clamp(20px, 5vw, 44px); --nav-space: 84px; /* floating navbar reserved height */ } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16.5px; line-height: 1.7; font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1,h2,h3,h4 { margin: 0; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } section { position: relative; } ::selection { background: rgba(201,162,63,.28); color: #fff; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gp); } .section { padding-block: clamp(64px, 9vw, 124px); } .center { text-align: center; } .grid { display: grid; gap: 22px; } @media (min-width:760px){ .g2{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);} } @media (max-width:759px){ .g3,.g4{grid-template-columns:1fr;} } /* ---------- type helpers ---------- */ .eyebrow { display:inline-flex; align-items:center; gap:10px; color: var(--gold); font-family:"Inter",sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 18px; } .eyebrow::before { content:""; width: 24px; height:1px; background: var(--gold); opacity:.7; } .center .eyebrow::after { content:""; width: 24px; height:1px; background: var(--gold); opacity:.7; } .h-display { font-size: clamp(42px, 6.4vw, 70px); line-height: 1.07; font-weight: 600; } .h-sec { font-size: clamp(30px, 4vw, 46px); font-weight: 600; } .h-card { font-size: 22px; font-weight: 600; } .lead { color: var(--ink-soft); font-size: clamp(16.5px,2.1vw,19px); line-height: 1.7; font-weight: 400; } .muted { color: var(--ink-soft); } .gold-text { color: var(--gold); } .serif-italic { font-style: italic; color: var(--gold-soft); } .rule { height: 1px; width: 72px; background: linear-gradient(90deg,var(--gold),transparent); } .center .rule { background: linear-gradient(90deg,transparent,var(--gold),transparent); margin-inline:auto; } .maxlen { max-width: 62ch; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content:center; gap: 9px; padding: 14px 28px; border-radius: var(--r-sm); font-family:"Inter",sans-serif; font-weight: 600; font-size: 14.5px; letter-spacing: .01em; cursor: pointer; border: 1px solid transparent; transition: background .2s var(--ease), color .2s, border-color .2s, box-shadow .25s var(--ease), transform .2s var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-gold { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } .btn-gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); box-shadow: 0 12px 28px -14px rgba(201,162,63,.55); } .btn-ghost { border-color: var(--line-2); color: var(--ink); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } .btn-wa { background: var(--wa); color:#fff; border-color: var(--wa); } .btn-wa:hover { filter: brightness(1.06); box-shadow: 0 12px 28px -14px rgba(34,164,85,.5); } .btn .ico { width: 17px; height: 17px; } .btn-sm { padding: 11px 20px; font-size: 13.5px; } .btn-lg { padding: 16px 34px; font-size: 15px; } /* ============================================================ HEADER — two-tier (utility topbar + main nav) ============================================================ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 16px var(--gp) 0; transition: padding .3s var(--ease); } .site-header.scrolled { padding-top: 9px; } /* floating glass shell */ .nav-shell { position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; gap: 20px; background: rgba(16,19,22,.55); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 12px 14px 12px 20px; height: 68px; box-shadow: 0 16px 40px -20px rgba(0,0,0,.7); transition: background .3s var(--ease), border-color .3s, box-shadow .3s, height .3s var(--ease), border-radius .3s; } .site-header.scrolled .nav-shell { background: rgba(12,14,17,.82); border-color: var(--line-2); height: 60px; box-shadow: 0 18px 44px -22px rgba(0,0,0,.8); } .nav { display: contents; } .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; } .brand img { width: 40px; height: 40px; border-radius: var(--r-full); box-shadow: 0 0 0 1px var(--hair); transition: transform .4s var(--ease); } .brand:hover img { transform: rotate(-8deg); } .brand .b-name { font-family:"Playfair Display",serif; font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: .01em; color: var(--ink); } .brand .b-name b { color: var(--gold); font-weight: 700; } .brand .b-tag { display:block; font-family:"Inter",sans-serif; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-top: 5px; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 14px; color: var(--ink-soft); font-weight: 500; letter-spacing: .01em; position: relative; padding: 8px 2px; transition: color .2s; } .nav-links a::after { content:""; position:absolute; left:2px; right:2px; bottom:2px; height:1.5px; transform: scaleX(0); transform-origin:left; background: var(--gold); transition: transform .28s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .nav-links a[aria-current="page"] { color: var(--gold); } .nav-cta { display: flex; align-items: center; gap: 10px; } .nav-ico { width: 40px; height:40px; border:1px solid rgba(255,255,255,.1); border-radius:11px; display:flex; align-items:center; justify-content:center; color: var(--ink-soft); transition: all .2s; } .nav-ico:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,162,63,.08); } .nav-ico svg { width:18px; height:18px; } .nav-cta .btn { border-radius: 11px; } .menu-btn { display:none; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--ink); border-radius:11px; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; } @media (max-width: 980px){ .nav-links { position: absolute; inset: calc(100% + 12px) 0 auto 0; flex-direction: column; gap: 0; align-items:stretch; background: rgba(16,19,22,.96); backdrop-filter: blur(18px); border: 1px solid var(--line-2); border-radius: 16px; padding: 8px; transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s var(--ease), opacity .24s var(--ease), visibility .3s; box-shadow: var(--shadow); } .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } .nav-links a { width: 100%; padding: 14px 16px; border-radius: 10px; } .nav-links a::after { display:none; } .nav-links a:hover { background: rgba(255,255,255,.04); } .nav-links a[aria-current="page"] { background: rgba(201,162,63,.08); } .menu-btn { display:inline-flex; } .nav-cta .btn { display: none; } } @media (max-width: 520px){ .nav-cta .nav-ico { display:none; } .brand .b-tag{ display:none; } .nav-shell{ padding-left:14px; } } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position:absolute; inset:0; background-size: cover; background-position: right calc(50% + 46px); background-image: url('hero-bg.jpg'); background-image: -webkit-image-set(url('hero-bg.webp') type('image/webp'), url('hero-bg.jpg') type('image/jpeg')); background-image: image-set(url('hero-bg.webp') type('image/webp'), url('hero-bg.jpg') type('image/jpeg')); } /* left scrim for text legibility */ .hero::before { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(95deg, var(--bg) 4%, rgba(11,13,16,.82) 38%, rgba(11,13,16,.2) 100%); } /* top + bottom vignette: darkens the band the floating nav sits on so nothing reads as "clipped" */ .hero::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, var(--bg) 0%, rgba(11,13,16,.55) 9%, transparent 22%), linear-gradient(0deg, var(--bg) 1%, transparent 24%); } .hero .wrap { position: relative; z-index: 2; padding-top: calc(var(--nav-space) + 48px); } .hero-inner { max-width: 660px; } /* mobile: centre the Reform globe behind the content + even, readable scrim */ @media (max-width: 760px){ .hero { min-height: auto; } /* dedicated globe-centred crop, shown in full (no cover-crop) */ .hero-bg { background-image: url('hero-mobile.jpg'); background-image: -webkit-image-set(url('hero-mobile.webp') type('image/webp'), url('hero-mobile.jpg') type('image/jpeg')); background-image: image-set(url('hero-mobile.webp') type('image/webp'), url('hero-mobile.jpg') type('image/jpeg')); background-size: contain; background-position: center 40%; background-repeat: no-repeat; } .hero::before { background: linear-gradient(180deg, rgba(8,10,13,.74) 0%, rgba(8,10,13,.66) 45%, rgba(8,10,13,.72) 70%, rgba(8,10,13,.88) 100%); } .hero::after { background: linear-gradient(180deg, var(--bg) 0%, transparent 16%), linear-gradient(0deg, var(--bg) 2%, transparent 26%); } .hero .wrap { padding-top: calc(var(--nav-space) + 40px); padding-bottom: 56px; } /* keep text crisp over the gold globe */ .hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.8), 0 1px 4px rgba(0,0,0,.6); } .hero p { color: #eef0f1; text-shadow: 0 1px 12px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.7); } } .hero h1 { margin-bottom: 24px; } .hero h1 .serif-italic { display:inline; } .hero p { margin-bottom: 36px; max-width: 540px; } .hero-actions { display:flex; flex-wrap: wrap; gap: 14px; align-items:center; } .trust { display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 52px; border-top: 1px solid var(--line); max-width: 560px; } .trust > div { padding: 24px 24px 0 24px; border-right: 1px solid var(--line); } .trust > div:first-child { padding-left: 0; } .trust > div:last-child { border-right: none; } .trust .n { font-family:"Playfair Display",serif; font-size: clamp(22px,2.4vw,28px); font-weight: 600; color: var(--gold); line-height: 1.05; } .trust .l { font-size: 12px; color: var(--ink-mute); letter-spacing: .03em; margin-top: 9px; line-height:1.4; } @media (max-width:520px){ .trust{ grid-template-columns: 1fr; max-width:none; } .trust > div{ border-right:none; border-bottom:1px solid var(--line); padding:18px 0; } .trust > div:last-child{border-bottom:none;} } /* ---------- cards ---------- */ .card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 32px 30px; transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; height: 100%; position: relative; } .card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--shadow-sm); } .card::before { content:""; position:absolute; left:0; top:30px; bottom:30px; width:2px; background: var(--gold); opacity:0; transition: opacity .3s; border-radius:2px; } .card:hover::before { opacity:.8; } .card .ic { width: 50px; height: 50px; border-radius: 10px; display:flex; align-items:center; justify-content:center; background: var(--surface-3); border: 1px solid var(--hair); margin-bottom: 22px; color: var(--gold); } .card .ic svg { width: 24px; height: 24px; } .card h3 { margin-bottom: 16px; } .card .list li { display:flex; gap:11px; align-items:flex-start; color: var(--ink-soft); font-size: 15px; padding: 6px 0; line-height:1.5; } .card .list li::before { content:""; width:5px; height:5px; margin-top:9px; border-radius:50%; background: var(--gold); flex:none; } /* ---------- service category (left heading / right item grid) ---------- */ .svc-cat { display:grid; gap: 32px; align-items:center; } @media (min-width:900px){ .svc-cat{ grid-template-columns: 290px 1fr; gap: 56px; } } .svc-head .ic { width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: var(--surface-3); border:1px solid var(--hair); color:var(--gold); margin-bottom:20px; } .svc-head .ic svg { width:26px; height:26px; } .svc-head h2 { margin-bottom: 12px; } .svc-head p { color: var(--ink-soft); font-size: 15px; line-height:1.65; } .svc-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(228px,1fr)); gap: 14px; } .svc-item { display:flex; gap:12px; align-items:center; padding: 16px 18px; background: var(--surface-2); border:1px solid var(--line); border-radius: 10px; font-size: 15px; color: var(--ink-soft); transition: transform .25s var(--ease), border-color .25s, color .25s, background .25s; } .svc-item:hover { transform: translateY(-2px); border-color: var(--gold); color: var(--ink); } .svc-item svg { width:18px; height:18px; color: var(--gold); flex:none; } .svc-stack { display:flex; flex-direction:column; gap: 34px; } .svc-sub { font-family:"Inter",sans-serif; font-size: 12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); display:flex; align-items:center; gap:12px; margin-bottom: 16px; } .svc-sub::after { content:""; height:1px; flex:1; background: var(--line); } /* ---------- why us: orbit (refined) ---------- */ .why-grid { display:grid; gap: clamp(44px,6vw,80px); align-items:center; } @media (min-width:960px){ .why-grid{ grid-template-columns: 1.05fr 1fr; } } .feat { display:flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); } .feat:last-child { border-bottom: none; } .feat .fic { width:44px; height:44px; flex:none; border-radius: 10px; display:flex; align-items:center; justify-content:center; border:1px solid var(--hair); color: var(--gold); background: var(--surface-2); transition: background .3s, border-color .3s; } .feat:hover .fic { background: var(--surface-3); border-color: var(--gold); } .feat h4 { font-family:"Inter",sans-serif; font-size: 17px; font-weight: 600; margin-bottom: 5px; letter-spacing:-.01em; } .feat p { color: var(--ink-soft); font-size: 14.5px; line-height:1.6; } .orbit { position: relative; aspect-ratio: 1; max-width: 440px; margin-inline:auto; width:100%; } .orbit .ring { position:absolute; inset:0; border:1px solid var(--line); border-radius:50%; } .orbit .ring.r2 { inset: 17%; border-color: var(--hair); } .orbit .core { position:absolute; inset:35%; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--bg); border:1px solid var(--hair); box-shadow: 0 0 60px -18px rgba(201,162,63,.4); } .orbit .core img { width: 86%; border-radius:50%; } .orbit .node { position:absolute; width: 90px; left:50%; top:50%; transform: translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; } .orbit .node .dot { width:50px; height:50px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: var(--surface-2); border:1px solid var(--line-2); color: var(--gold); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), border-color .3s; } .orbit .node:hover .dot { transform: translateY(-3px); border-color: var(--gold); } .orbit .node span { font-family:"Inter",sans-serif; font-size: 11.5px; color: var(--ink-soft); font-weight:600; letter-spacing:.04em; } .orbit .node svg { width:22px; height:22px; } @media (max-width:520px){ .orbit .node{ width:74px } .orbit .node span{font-size:10.5px} .orbit .node .dot{width:44px;height:44px} } /* ---------- process ---------- */ .steps { display:grid; gap: 30px; } @media (min-width:860px){ .steps{ grid-template-columns: repeat(4,1fr); } } .step { text-align:center; position:relative; } .step .num { width: 70px; height:70px; margin: 0 auto 24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:"Playfair Display",serif; font-weight:600; font-size:25px; color: var(--gold); background: var(--surface); border:1px solid var(--hair); position:relative; z-index:2; } @media (min-width:860px){ .step:not(:last-child)::after{ content:""; position:absolute; top:35px; left:62%; width:76%; height:1px; z-index:1; background: linear-gradient(90deg, var(--line-2), transparent); } } .step h4 { font-family:"Inter",sans-serif; font-weight:600; margin-bottom: 9px; font-size: 18px; letter-spacing:-.01em; } .step p { color: var(--ink-soft); font-size: 14.5px; line-height:1.6; } /* ---------- bands ---------- */ .band { background: var(--surface); } .band-low { background: #08090c; border-block: 1px solid var(--line); } /* ---------- contact ---------- */ .contact-grid { display:grid; gap: 38px; } @media (min-width:920px){ .contact-grid{ grid-template-columns: 1.15fr .85fr; } } .field { position: relative; margin-bottom: 24px; } .field label { display:block; font-family:"Inter",sans-serif; font-size: 12px; color: var(--ink-soft); font-weight:600; margin-bottom: 9px; letter-spacing:.08em; text-transform:uppercase; } .field input, .field select, .field textarea { width:100%; background: var(--surface); border:1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink); padding: 13px 15px; font: inherit; font-size: 15.5px; transition: border-color .2s, box-shadow .2s; } .field textarea { resize: vertical; min-height: 120px; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); } .field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,63,.12); } .field-row { display:grid; gap: 0 22px; } @media (min-width:560px){ .field-row{ grid-template-columns: 1fr 1fr; } } .contact-card { background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r); padding: 28px; } .cinfo { display:flex; gap:15px; align-items:flex-start; padding: 16px 0; border-bottom:1px solid var(--line); } .cinfo:last-child{ border-bottom:none; } .cinfo .ci { width:42px;height:42px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center; background: var(--surface-3); border:1px solid var(--hair); color:var(--gold); } .cinfo .ci svg{width:19px;height:19px} .cinfo .lab { font-size:11.5px; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.1em; } .cinfo .val { font-size:15.5px; color:var(--ink); font-weight:500; word-break:break-word; margin-top:2px; } .cinfo a.val:hover{ color: var(--gold); } .qr-box { text-align:center; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r); padding: 24px; } .qr-box img { width: 162px; margin: 8px auto 14px; border-radius: 8px; } /* ---------- blog ---------- */ .post { display:flex; flex-direction:column; height:100%; } .post h3{ font-size:21px; margin-bottom:12px; line-height:1.25; } .tag { display:inline-block; font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); border:1px solid var(--hair); border-radius: var(--r-full); padding: 4px 13px; margin-bottom:18px; align-self:flex-start; } .post p{ color: var(--ink-soft); font-size:15px; flex:1; line-height:1.65; } .post .more{ color: var(--gold); font-family:"Inter",sans-serif; font-weight:600; font-size:14px; margin-top:18px; display:inline-flex; gap:7px; align-items:center; transition: gap .2s; } .post:hover .more{ gap:11px; } .callout { background: var(--surface-2); border:1px solid var(--line); border-left: 2px solid var(--gold); border-radius: var(--r); padding: 30px 32px; } .callout h3{ color: var(--ink); margin-bottom:14px; font-size:23px; } .callout h3 + p, .callout p{ color: var(--ink-soft); line-height:1.7; } /* ---------- legal / prose pages ---------- */ .legal { max-width: 820px; } .legal h2 { font-size: clamp(22px,3vw,28px); margin: 40px 0 14px; } .legal h2:first-of-type { margin-top: 0; } .legal p { color: var(--ink-soft); margin-bottom: 14px; line-height: 1.8; } .legal a { color: var(--gold); } .legal a:hover { text-decoration: underline; } .legal .updated { color: var(--ink-mute); font-size: 14px; margin-bottom: 30px; } .legal ul.bullets { margin: 0 0 18px; padding: 0; } .legal ul.bullets li { color: var(--ink-soft); position: relative; padding-left: 22px; margin-bottom: 9px; line-height: 1.65; } .legal ul.bullets li::before { content:""; position:absolute; left:4px; top:10px; width:6px; height:6px; border-radius:50%; background: var(--gold); } /* ---------- experts / team ---------- */ .team-grid { display:grid; gap:22px; } @media(min-width:680px){ .team-grid{ grid-template-columns:repeat(3,1fr);} } .member { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; text-align:center; transition:transform .3s var(--ease), border-color .3s; } .member:hover { transform:translateY(-5px); border-color:var(--line-2); } .member .avatar { width:92px; height:92px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; font-family:"Playfair Display",serif; font-size:32px; font-weight:600; color:var(--gold); background:radial-gradient(circle at 35% 30%, rgba(201,162,63,.22), var(--surface-3)); border:1px solid var(--hair); overflow:hidden; } .member .avatar img { width:100%; height:100%; object-fit:cover; } .member h3 { font-size:20px; margin-bottom:4px; } .member .role { color:var(--gold); font-family:"Inter",sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; } .member .creds { color:var(--ink-mute); font-size:12.5px; margin-top:2px; } .member p { color:var(--ink-soft); font-size:14px; line-height:1.6; margin-top:16px; } /* ---------- about ---------- */ .stat-row{ display:grid; gap:20px; } @media(min-width:680px){ .stat-row{ grid-template-columns:repeat(4,1fr);} } .stat{ text-align:center; border:1px solid var(--line); border-radius:var(--r); padding:30px 18px; background:var(--surface-2); } .stat .n{ font-family:"Playfair Display",serif; font-size: clamp(32px,5vw,46px); font-weight:600; color:var(--gold); line-height:1; } .stat .l{ color: var(--ink-soft); font-size:13.5px; margin-top:12px; } /* ---------- CTA banner ---------- */ .cta-banner { background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-lg); padding: clamp(36px,5vw,64px); text-align:center; position:relative; overflow:hidden; } .cta-banner::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 130% at 50% -20%, rgba(201,162,63,.08), transparent 60%); } .cta-banner > * { position:relative; } .cta-assure { display:flex; flex-wrap:wrap; justify-content:center; gap: 12px 28px; margin-top: 28px; } .cta-assure span { display:inline-flex; align-items:center; gap:8px; color: var(--ink-soft); font-size: 13.5px; font-weight:500; } .cta-assure svg { width:16px; height:16px; color: var(--gold); flex:none; } /* ---------- footer (left brand / right link columns) ---------- */ .site-footer { background:#07090b; border-top:1px solid var(--line); } .foot-top { display:grid; grid-template-columns: 1.7fr 1fr 1fr 1.15fr; gap: 40px 48px; align-items:start; padding-block: 68px 46px; } .foot-cols { display: contents; } /* let the 3 link columns sit as real grid columns */ .foot-brand { max-width: 340px; } @media (max-width: 860px){ /* brand full-width on top, link columns 2-up (Quick Links + Contact side by side) */ .foot-top { grid-template-columns: 1fr 1fr; gap: 36px 32px; } .foot-brand { grid-column: 1 / -1; max-width: 480px; } /* Working Hours spans full width + centered below the two columns */ .foot-cols .foot-col:last-child { grid-column: 1 / -1; text-align: center; margin-top: 6px; } .foot-cols .foot-col:last-child .foot-hours { max-width: 300px; margin-inline: auto; } .foot-cols .foot-col:last-child p { max-width: 360px; margin-inline: auto; } } @media (max-width: 360px){ /* very small phones: single column */ .foot-top { grid-template-columns: 1fr; } .foot-brand { grid-column: auto; } } .foot-col h5, .foot-brand h5 { font-family:"Inter",sans-serif; color: var(--ink); font-size: 12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom: 20px; font-weight:600; } .foot-col a { color: var(--ink-soft); font-size: 14.5px; display:block; padding: 7px 0; transition: color .2s, transform .2s; } .foot-col a:hover { color: var(--gold); transform: translateX(3px); } .foot-brand p { color: var(--ink-soft); font-size: 14.5px; margin: 18px 0 24px; line-height:1.7; } .socials { display:flex; gap: 11px; } .socials a { width:38px; height:38px; border:1px solid var(--line-2); border-radius:8px; display:flex; align-items:center; justify-content:center; color: var(--ink-soft); transition: all .22s; } .socials a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } .socials a[aria-disabled="true"] { cursor: default; opacity: .7; } .socials a[aria-disabled="true"]:hover { border-color: var(--line-2); color: var(--ink-soft); transform: none; } .socials svg{ width:17px; height:17px; } .foot-hours li{ color: var(--ink-soft); font-size:14.5px; padding:5px 0; display:flex; justify-content:space-between; gap:12px; } .foot-bottom { border-top:1px solid var(--line); padding-block: 24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; } .foot-bottom p { color: var(--ink-mute); font-size: 13px; } .foot-bottom .links a{ color: var(--ink-mute); font-size:13px; margin-left:20px; transition: color .2s; } .foot-bottom .links a:hover{ color: var(--gold); } .disclaimer { color: var(--ink-mute); font-size: 12.5px; line-height:1.75; padding-bottom: 30px; max-width: 1000px; } /* ---------- floating actions ---------- */ .fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; display:flex; flex-direction:column; gap: 13px; } .fab a { width: 52px; height: 52px; border-radius: 50%; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow); transition: transform .22s var(--ease); position:relative; } .fab a:hover { transform: translateY(-3px); } .fab a svg { width: 24px; height: 24px; } .fab .f-wa { background: var(--wa); color:#fff; } .fab .f-call { background: var(--gold); color: var(--on-gold); } .fab .f-book { background: var(--surface-3); border:1px solid var(--gold); color: var(--gold); } .fab a .tip { position:absolute; right: 62px; top:50%; transform: translateY(-50%) translateX(6px); background: var(--surface-3); color: var(--ink); font-size: 12.5px; font-weight:500; padding: 7px 13px; border-radius: 7px; border:1px solid var(--line-2); white-space:nowrap; opacity:0; pointer-events:none; transition: opacity .2s, transform .2s; } .fab a:hover .tip { opacity:1; transform: translateY(-50%) translateX(0); } /* ---------- reveal ---------- */ .reveal { opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} *{transition:none!important;} } /* ---------- interior page hero ---------- */ .page-hero { padding-top: calc(var(--nav-space) + 52px); padding-bottom: 60px; border-bottom:1px solid var(--line); background: radial-gradient(110% 130% at 88% -20%, rgba(201,162,63,.08), transparent 52%), var(--surface); } .page-hero .crumbs{ color: var(--ink-mute); font-size:13px; margin-bottom:16px; letter-spacing:.02em; } .page-hero .crumbs a:hover{ color: var(--gold); } /* form status */ .form-note { margin-top:14px; font-size:14px; color: var(--wa); display:none; } .form-note.show{ display:block; }