:root { --navy:#081a31; --navy-light:#102844; --gold:#a27b38; --cream:#f4f1ea; --ink:#182534; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans", sans-serif; font-size:16px; }
.site-header { height:82px; padding:0 6.5vw; display:flex; align-items:center; justify-content:space-between; background:var(--navy); color:#fff; }
.brand { color:inherit; text-decoration:none; letter-spacing:.16em; font-size:13px; font-weight:600; white-space:nowrap; display:flex; align-items:center; gap:9px; }.brand img { display:block; width:38px; height:38px; object-fit:contain; object-position:center; }.brand span { letter-spacing:.16em; }
nav { display:flex; align-items:center; gap:31px; } nav a { color:#d4dae0; text-decoration:none; font-size:13px; position:relative; padding:7px 0; transition:color .2s ease; } nav a::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .25s ease; } nav a:hover, nav a.active { color:#e1c58a; } nav a.active::after { transform:scaleX(1); transform-origin:left; }.menu-button { display:none; }
.hero { min-height:650px; padding:92px 12vw 75px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:45px; overflow:hidden; background:radial-gradient(circle at 85% 18%, #173a5b 0, var(--navy) 41%); color:white; }
.eyebrow { color:var(--gold); margin:0 0 22px; font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }.hero h1,h2,h3,blockquote { font-family:"Playfair Display",serif; font-weight:500; }.hero h1 { margin:0; font-size:clamp(47px,5.4vw,78px); letter-spacing:-.045em; line-height:1.04; }.hero h1 em { color:#d8be82; font-weight:500; }.hero-text { margin:27px 0 34px; color:#c0c9d2; max-width:410px; line-height:1.7; font-size:16px; }.button { display:inline-flex; gap:27px; align-items:center; padding:14px 18px; border:1px solid var(--gold); color:#fff; text-decoration:none; font-size:13px; }.button span { color:#d8be82; font-size:19px; }
.hero-art { position:relative; height:420px; max-width:420px; justify-self:end; width:100%; border:1px solid rgba(190,157,87,.42); background:linear-gradient(135deg, rgba(255,255,255,.035), transparent); }.hero-art::before { content:"";position:absolute;inset:20px;border:1px solid rgba(190,157,87,.18); }.sun { width:205px;height:205px;object-fit:contain;position:absolute;right:-48px;top:-45px;filter:drop-shadow(0 0 20px rgba(181,139,66,.2));z-index:1; }.arch { border:1px solid #ddc587; border-bottom:0; position:absolute; bottom:0; border-radius:220px 220px 0 0; }.arch-one { width:238px;height:270px;right:30px; }.arch-two { width:115px;height:145px;right:91px;background:var(--navy);border-color:rgba(221,197,135,.7); }.gold-line { height:1px;width:132%;background:var(--gold);position:absolute;bottom:65px;left:-45%; }.hero-art p { position:absolute;bottom:21px;left:21px;font-size:10px;letter-spacing:.19em;color:#bfc8d0; }
.intro { padding:115px 12vw; display:grid;grid-template-columns:1fr 2fr;gap:50px; }.intro h2,.section-heading h2,.contact h2 { margin:0; font-size:clamp(34px,4vw,55px);letter-spacing:-.035em;line-height:1.12; }.intro div p { max-width:500px;line-height:1.8;margin:26px 0 0;color:#56616c; }
.services { background:#e8e3d8;padding:100px 12vw;display:grid;grid-template-columns:1fr 1.45fr;gap:75px; }.service-list { border-top:1px solid #c5bba9; }.service-list article { min-height:124px; display:grid;grid-template-columns:56px 1fr 1.1fr;align-items:center;border-bottom:1px solid #c5bba9;transition:padding .25s ease,background .25s ease; }.service-list article:hover { background:rgba(255,255,255,.36);padding-left:16px; }.service-list span { color:var(--gold);font-size:12px; }.service-list h3 { font-size:25px;margin:0;letter-spacing:-.025em; }.service-list p { margin:0;color:#657078;font-size:14px;line-height:1.55; }
.approach { padding:115px 12vw 100px;background:var(--navy);color:#fff; }.approach blockquote { margin:0;max-width:880px;font-size:clamp(31px,4.2vw,58px);line-height:1.2;letter-spacing:-.035em;color:#edf0f2; }.rule { width:70px;height:1px;background:var(--gold);margin-top:52px; }
.contact { padding:175px 12vw 185px; min-height:620px; }.contact a { display:inline-block;margin-top:33px;padding-bottom:7px;color:var(--navy);font-size:17px;text-decoration:none;border-bottom:1px solid var(--gold); }.contact a span { margin-left:20px;color:var(--gold);font-size:20px; } footer { padding:31px 6.5vw;display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#bdc6d0; }footer p { font-size:11px;margin:0; }
@media(max-width:720px){.site-header{height:68px;padding:0 7vw;}nav{display:none;position:absolute;top:68px;left:0;right:0;padding:25px 7vw;background:var(--navy-light);flex-direction:column;align-items:flex-start;gap:20px;z-index:2}.site-header.open nav{display:flex}.menu-button{display:block;background:transparent;border:0;color:#e1c58a;font:inherit;font-size:12px}.hero{min-height:auto;padding:80px 7vw 65px;grid-template-columns:1fr}.hero-art{height:300px;max-width:none;justify-self:stretch;margin-top:12px}.intro,.services{padding:80px 7vw;grid-template-columns:1fr;gap:35px}.service-list article{grid-template-columns:38px 1fr;gap:0;padding:22px 0}.service-list p{grid-column:2;margin-top:9px}.approach,.contact{padding:100px 7vw;min-height:auto}footer{padding:25px 7vw;gap:15px;flex-wrap:wrap}footer p:last-child{display:none}}

.site-header { position:sticky; top:0; z-index:10; transition:box-shadow .3s ease,background .3s ease; }
.site-header.scrolled { background:#07172b; box-shadow:0 8px 24px rgba(0,0,0,.22); }
.button { position:relative; overflow:hidden; isolation:isolate; transition:color .25s ease,transform .25s ease; }
.button::before { content:""; position:absolute; inset:0; background:var(--gold); transform:translateX(-102%); transition:transform .3s ease; z-index:-1; }
.button:hover { color:var(--navy); transform:translateY(-3px); }.button:hover::before { transform:translateX(0); }.button:hover span { color:var(--navy); }
.sun { animation:float 6s ease-in-out infinite; }.gold-line { background:linear-gradient(90deg,transparent,var(--gold),#ead39a,var(--gold),transparent); background-size:200% 100%; animation:shimmer 4s linear infinite; }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1); }.reveal.visible { opacity:1; transform:none; }.hero.reveal { opacity:1; transform:none; }
.hero-copy > * { animation:rise .8s both; }.hero-copy .eyebrow { animation-delay:.1s; }.hero-copy h1 { animation-delay:.2s; }.hero-copy .hero-text { animation-delay:.35s; }.hero-copy .button { animation-delay:.5s; }
@keyframes float { 50% { transform:translateY(13px) rotate(2deg); } } @keyframes shimmer { to { background-position:-200% 0; } } @keyframes rise { from { opacity:0;transform:translateY(19px); } to { opacity:1;transform:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; } }

/* Refined corporate details */
body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.site-header { border-bottom:1px solid rgba(216,190,130,.14); }
nav a { transition:color .2s ease; } nav a:hover { color:#ead39a; }
.hero { min-height:680px; position:relative; }.hero::after { content:""; position:absolute; width:540px; height:540px; right:-180px; bottom:-310px; border:1px solid rgba(216,190,130,.13); border-radius:50%; pointer-events:none; }
.hero-copy { position:relative; z-index:1; }.hero-text { font-size:17px; }.hero-points { display:flex; gap:0; margin-top:52px; color:#bdc6d0; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }.hero-points span { padding:0 15px; border-left:1px solid rgba(216,190,130,.45); }.hero-points span:first-child { padding-left:0; border:0; }
.hero-art { box-shadow:20px 23px 0 rgba(0,0,0,.1); }.hero-art::after { content:""; position:absolute; top:20px; right:20px; width:7px; height:7px; border-radius:50%; background:#d8be82; box-shadow:0 0 0 6px rgba(216,190,130,.12); }
.intro { align-items:start; }.intro h2 { max-width:660px; }.intro div p { font-size:17px; }
.services { position:relative; }.services::before { content:""; position:absolute; top:0; left:12vw; right:12vw; height:1px; background:rgba(162,123,56,.35); }.service-list article { position:relative; }.service-list article:hover { box-shadow:inset 3px 0 0 var(--gold); }.service-list h3 { transition:color .25s ease; }.service-list article:hover h3 { color:#7d5d28; }
.approach { position:relative; overflow:hidden; isolation:isolate; background:#041225; }.approach::before { content:""; position:absolute; inset:-18%; z-index:-2; background:repeating-linear-gradient(0deg,rgba(143,177,210,.042) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,rgba(152,181,211,.028) 0 1px,transparent 1px 6px),repeating-linear-gradient(119deg,rgba(255,255,255,.018) 0 1px,transparent 1px 14px),radial-gradient(ellipse at 21% 32%,rgba(37,79,115,.43),transparent 42%),radial-gradient(ellipse at 82% 71%,rgba(20,54,87,.56),transparent 44%),linear-gradient(128deg,#020b18 3%,#061a30 42%,#03101f 100%); background-size:6px 6px,7px 7px,auto,auto,auto,100% 100%; background-blend-mode:soft-light,soft-light,overlay,normal,normal,normal; animation:fabricMove 24s ease-in-out infinite alternate; }.approach::after { content:""; position:absolute; z-index:-1; inset:-12%; background:linear-gradient(115deg,transparent 19%,rgba(111,150,184,.075) 36%,transparent 49%),linear-gradient(290deg,transparent 47%,rgba(196,160,88,.095) 61%,transparent 74%); filter:blur(18px); opacity:.9; animation:fabricSheen 16s ease-in-out infinite alternate; }.approach > * { position:relative; }.approach blockquote { position:relative; text-shadow:0 3px 28px rgba(0,0,0,.45); }.approach-note { margin:29px 0 0; color:#c3d0dd; font-size:14px; letter-spacing:.02em; }
@keyframes fabricMove { from { background-position:0 0,0 0,0 0,0 0,0 0,0 0; transform:translate3d(-1%,0,0) scale(1.01); } to { background-position:28px 18px,-21px 24px,40px 15px,0 0,0 0,0 0; transform:translate3d(1%,-.7%,0) scale(1.03); } } @keyframes fabricSheen { from { transform:translateX(-4%) rotate(-1deg); opacity:.54; } to { transform:translateX(4%) rotate(1deg); opacity:1; } }

.fabric-stage { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }.approach > :not(.fabric-stage) { z-index:1; }.fabric-wave { display:block; position:absolute; width:110vw; height:40vw; min-height:290px; border-radius:48% 52% 46% 54%; opacity:.72; filter:blur(22px); mix-blend-mode:screen; }.wave-one { top:-26vw; left:-29vw; background:radial-gradient(ellipse at 60% 60%,rgba(51,111,157,.42),rgba(13,42,75,.19) 44%,transparent 71%); transform:rotate(-18deg); animation:waveOne 16s ease-in-out infinite alternate; }.wave-two { right:-42vw; bottom:-27vw; background:radial-gradient(ellipse at 40% 38%,rgba(30,84,137,.48),rgba(8,30,60,.15) 51%,transparent 73%); transform:rotate(17deg); animation:waveTwo 20s ease-in-out infinite alternate; }.wave-three { width:85vw; height:13vw; min-height:110px; left:4vw; top:44%; border:1px solid rgba(168,197,221,.13); background:linear-gradient(105deg,transparent 16%,rgba(119,169,207,.18) 47%,transparent 78%); filter:blur(9px); transform:rotate(-10deg); opacity:.68; animation:waveThree 12s ease-in-out infinite alternate; }.fabric-orb { position:absolute; width:310px; height:310px; top:18%; right:13%; border-radius:50%; background:radial-gradient(circle,rgba(205,171,97,.24),rgba(164,121,49,.07) 33%,transparent 68%); filter:blur(16px); mix-blend-mode:screen; animation:orbPulse 9s ease-in-out infinite alternate; }.approach .rule { position:relative; overflow:hidden; }.approach .rule::after { content:""; position:absolute; inset:0; background:#f1d28b; transform:translateX(-110%); animation:ruleLight 5s ease-in-out infinite; }
.fabric-thread { position:absolute; width:120vw; height:1px; top:74%; left:-10vw; background:linear-gradient(90deg,transparent 4%,rgba(226,196,127,.06) 24%,rgba(230,205,145,.46) 50%,rgba(226,196,127,.06) 76%,transparent 96%); box-shadow:0 0 16px rgba(217,183,104,.22); transform:rotate(-8deg); animation:threadMove 10s ease-in-out infinite alternate; }
@keyframes waveOne { to { transform:translate(11vw,8vw) rotate(-8deg) scale(1.15); } } @keyframes waveTwo { to { transform:translate(-12vw,-8vw) rotate(8deg) scale(1.13); } } @keyframes waveThree { to { transform:translateY(44px) translateX(8vw) rotate(-6deg); opacity:.95; } } @keyframes orbPulse { to { transform:translate(-50px,35px) scale(1.28); opacity:.75; } } @keyframes ruleLight { 0%,28% { transform:translateX(-110%); } 58%,100% { transform:translateX(110%); } }
@keyframes threadMove { to { transform:translateX(10vw) translateY(-22px) rotate(-6deg); opacity:.75; } }
@media(max-width:720px) { .fabric-wave { filter:blur(16px); }.wave-three { width:130vw; }.fabric-orb { right:-80px; top:8%; } }
.contact { background:linear-gradient(180deg,var(--cream),#ebe6db); }.contact h2 { max-width:800px; }.contact a { transition:color .2s ease,letter-spacing .2s ease; }.contact a:hover { color:var(--gold); letter-spacing:.02em; }
footer { border-top:1px solid rgba(216,190,130,.18); } footer p:last-child { color:#d8be82; }
@media(max-width:720px) { .hero { min-height:auto; }.hero-points { flex-wrap:wrap; row-gap:12px; margin-top:38px; }.hero-points span { padding:0 10px; }.hero-art { box-shadow:10px 12px 0 rgba(0,0,0,.1); }.approach-note { line-height:1.6; } }

.process { padding:108px 12vw; display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; background:#f8f6f1; }.process h2 { margin:0; font-size:clamp(34px,4vw,55px); line-height:1.12; letter-spacing:-.035em; }.process ol { list-style:none; padding:0; margin:0; border-top:1px solid #d9d1c3; }.process li { display:grid; grid-template-columns:58px 1fr; gap:15px; padding:28px 0; border-bottom:1px solid #d9d1c3; transition:padding .25s ease,background .25s ease,box-shadow .25s ease; }.process li:hover { background:rgba(255,255,255,.68); padding-left:16px; box-shadow:inset 3px 0 0 var(--gold); }.process li > span { color:var(--gold); font-size:11px; letter-spacing:.1em; padding-top:5px; }.process h3 { margin:0 0 8px; font-size:23px; letter-spacing:-.02em; transition:color .25s ease; }.process li:hover h3 { color:#7d5d28; }.process p { max-width:420px; margin:0; color:#64707a; line-height:1.65; font-size:14px; }
.contact { display:grid; grid-template-columns:1fr; gap:42px; align-content:center; justify-items:center; text-align:center; }.contact-details { padding:26px 0 0; border-top:1px solid rgba(162,123,56,.55); }.contact-details p { margin:0; color:#59656f; font-size:14px; line-height:1.7; }.contact-details a { margin-top:24px; }
@media(max-width:720px) { .process { padding:80px 7vw; grid-template-columns:1fr; gap:36px; }.process li { grid-template-columns:38px 1fr; }.contact { display:block; }.contact-details { margin-top:42px; padding-left:0; } }