:root{
--ink:#12162A;
--navy:#1A2036;
--navy-2:#232B4A;
--gold:#A97E3F;
--gold-2:#D9BD8C;
--paper:#F7F5F0;
--paper-2:#EFEBE2;
--line: rgba(18,22,42,0.12);
--line-strong: rgba(18,22,42,0.22);
--max: 1180px;
--prose-max: 760px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
background:var(--paper);
color:var(--ink);
font-family:'Inter', -apple-system, sans-serif;
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 40px;}
.eyebrow{
font-family:'IBM Plex Mono', monospace;
font-size:12.5px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--gold);
display:flex;
align-items:center;
gap:10px;
}
.eyebrow::before{
content:"";
width:22px; height:1px;
background:var(--gold);
display:inline-block;
}
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; } header{
position:sticky; top:0; z-index:50;
background:rgba(247,245,240,0.88);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
nav.wrap{
display:flex; align-items:center; justify-content:space-between;
padding-top:16px; padding-bottom:16px;
}
.logo-mark{ height:38px; width:auto; }
.nav-menu{ display:contents; }
.nav-toggle{
display:none; width:44px; height:44px; margin:-3px -10px -3px 0;
align-items:center; justify-content:center;
background:none; border:0; color:var(--navy); cursor:pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
display:block; width:22px; height:2px; background:currentColor;
}
.nav-toggle span{ position:relative; }
.nav-toggle span::before,
.nav-toggle span::after{ content:""; position:absolute; left:0; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; background:var(--navy); transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; background:var(--navy); transform:rotate(-45deg); }
.nav-links{
display:flex; gap:36px; align-items:center;
font-size:14px; font-weight:500; color:var(--navy-2);
}
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a::after{
content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
background:var(--gold); transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
border:1px solid var(--navy); border-radius:2px;
padding:9px 20px; font-size:13.5px; font-weight:600;
letter-spacing:0.02em; transition:background .2s ease, color .2s ease;
}
.nav-cta:hover{ background:var(--navy); color:var(--paper); } .nav-links li{ list-style:none; }
.admin-bar header{ top:32px; }
@media (max-width: 782px){
.admin-bar header{ top:46px; }
} @media (max-width: 600px){
.admin-bar header{ top:0; }
} @media (max-width: 900px){
.wrap{ padding:0 24px; }
.nav-toggle{ display:flex; }
.nav-menu{
display:none; position:absolute; top:100%; left:0; right:0;
padding:8px 24px 24px;
max-height:calc(100vh - 71px); max-height:calc(100dvh - 71px); overflow-y:auto;
background:var(--paper);
border-bottom:1px solid var(--line);
box-shadow:0 18px 30px -18px rgba(18,22,42,0.28);
}
.nav-menu.is-open{ display:block; }
.nav-menu .nav-links{ display:block; font-size:16px; }
.nav-menu .nav-links a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); }
.nav-menu .nav-links a::after{ display:none; }
.nav-menu .nav-cta{ display:block; margin-top:20px; padding:13px 20px; font-size:14.5px; text-align:center; }
}h1,h2,h3{
font-family:'Fraunces', serif;
font-weight:500;
letter-spacing:-0.01em;
line-height:1.08;
color:var(--navy);
} .hero{
position:relative; overflow:hidden;
padding:96px 0 110px;
border-bottom:1px solid var(--line);
}
.hero .wrap{
display:grid;
grid-template-columns:1.05fr 0.95fr;
gap:40px;
align-items:center;
}
.hero h1{
font-size:clamp(36px, 4.6vw, 56px);
max-width:14.5ch;
margin:22px 0 26px;
}
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero p.lede{
font-size:18px; color:#454A5E; max-width:48ch; margin-bottom:36px;
}
.hero-ctas{ display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.btn-primary{
background:var(--navy); color:var(--paper);
padding:14px 26px; border-radius:2px; font-size:14.5px; font-weight:600;
display:inline-flex; align-items:center; gap:10px;
transition:transform .2s ease, background .2s ease;
}
.btn-primary:hover{ background:var(--navy-2); transform:translateY(-1px); }
.btn-ghost{
font-size:14.5px; font-weight:600; color:var(--navy);
border-bottom:1px solid var(--line-strong); padding-bottom:3px;
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); } .compass-wrap{
position:relative;
width:100%;
aspect-ratio:1/1;
display:flex; align-items:center; justify-content:center;
}
.compass-wrap svg, .compass-wrap img.logo-morph{
width:100%; height:100%;
position:absolute; top:0; left:0;
}
.compass-wrap img.logo-morph{
padding:14%;
box-sizing:border-box;
}
.compass-rotate, .logo-morph{
transform-origin:50% 50%;
animation: morphCycle 11s cubic-bezier(.65,0,.35,1) infinite;
}
.logo-morph{
animation-delay:-5.5s;
}
@keyframes morphCycle{
0%    { opacity:1; transform:rotate(0deg) scale(1); }
32%   { opacity:1; transform:rotate(0deg) scale(1); }
46%   { opacity:0; transform:rotate(300deg) scale(0.78); }
82%   { opacity:0; transform:rotate(300deg) scale(0.78); }
100%  { opacity:1; transform:rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
.compass-rotate{ animation:none; opacity:0; }
.logo-morph{ animation:none; opacity:1; transform:none; }
} section{ padding:96px 0; }
section.alt{ background:var(--paper-2); }
.section-head{
display:flex; justify-content:space-between; align-items:flex-end;
gap:40px; margin-bottom:56px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(28px,3.4vw,40px); margin-top:14px; max-width:18ch;}
.section-head .desc{ max-width:38ch; color:#454A5E; font-size:15.5px; padding-bottom:4px;} .about-grid{
display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;
}
.about-grid p{ color:#3A3F54; font-size:16px; margin-bottom:18px; max-width:54ch; }
.stat-row{
display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:36px;
border-top:1px solid var(--line); padding-top:28px;
}
.stat-row .stat b{
font-family:'Fraunces', serif; font-size:32px; color:var(--navy); display:block; font-weight:500;
}
.stat-row .stat span{ font-size:13px; color:#666B80; letter-spacing:.02em; }
.pillars{
display:grid; grid-template-columns:1fr 1fr; gap:30px 40px; margin-top:8px;
}
.pillar h4{
font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.1em;
text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.pillar p{ max-width:none; font-size:14.5px; margin-bottom:0; } .services-grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
background:var(--line); border:1px solid var(--line);
}
.service-card{
background:var(--paper); padding:34px 30px; min-height:228px;
display:flex; flex-direction:column; gap:14px;
transition:background .25s ease;
}
.service-card:hover{ background:#FFFEFC; }
a.service-card{ cursor:pointer; }
a.service-card:hover h3{ color:var(--gold); }
.service-card h3{ font-size:19px; font-weight:500; }
.service-card p{ font-size:14.5px; color:#565C72; }
.bearing{
font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.08em;
color:var(--gold); display:flex; align-items:center; gap:8px;
}
.bearing .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); display:inline-block;} .approach-row{
display:grid; grid-template-columns:repeat(4,1fr); gap:0;
border-top:1px solid var(--line-strong);
}
.approach-step{
padding:32px 26px 0; border-left:1px solid var(--line);
position:relative;
}
.approach-step:first-child{ border-left:none; }
.approach-step .compass-pt{
font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--gold);
letter-spacing:.1em; margin-bottom:14px; display:block;
}
.approach-step h3{ font-size:19px; margin-bottom:10px; font-weight:500;}
.approach-step p{ font-size:14px; color:#565C72; max-width:27ch;} .contact-band{
background:var(--navy); color:var(--paper);
padding:96px 0 60px;
}
.contact-band .eyebrow{ color:var(--gold-2); }
.contact-band .eyebrow::before{ background:var(--gold-2); }
.contact-grid{
display:grid; grid-template-columns:1.2fr 1fr; gap:60px; margin-top:26px;
}
.contact-band h2{ color:var(--paper); font-size:clamp(28px,3.6vw,44px); max-width:15ch; }
.contact-band p.lede2{ color:#C6C9D8; max-width:46ch; margin-top:18px; font-size:16px;}
.contact-band .btn-primary{ background:var(--gold); color:var(--navy); margin-top:28px;}
.contact-band .btn-primary:hover{ background:var(--gold-2); }
.contact-detail{ font-size:14.5px; color:#B9BDD0; }
.contact-detail .label{
font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:#8B90A8;
letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; display:block; margin-top:26px;
}
.contact-detail .label:first-child{ margin-top:0; }
.contact-detail a:hover{ color:var(--gold-2); }
footer.bottom{
border-top:1px solid rgba(255,255,255,0.12);
margin-top:70px; padding-top:26px;
display:flex; justify-content:space-between; align-items:center;
font-size:12.5px; color:#7C81A0; flex-wrap:wrap; gap:12px;
} @media (max-width: 900px){
.hero .wrap{ grid-template-columns:minmax(0, 1fr); }
.compass-wrap{ width:100%; max-width:280px; margin:40px auto 0; }
.about-grid{ grid-template-columns:minmax(0, 1fr); gap:36px; }
.pillars{ grid-template-columns:1fr; gap:24px; }
.services-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.approach-row{ grid-template-columns:1fr 1fr; row-gap:30px; }
.approach-step:nth-child(3){ border-left:none; }
.contact-grid{ grid-template-columns:minmax(0, 1fr); gap:36px; }
section{ padding:64px 0; }
section[id]{ scroll-margin-top:71px; }
.hero{ padding:56px 0 70px; }
.contact-band{ padding:64px 0 40px; }
footer.bottom{ margin-top:48px; }
}
@media (max-width: 560px){
section{ padding:56px 0; }
.hero{ padding:44px 0 56px; }
.hero p.lede{ font-size:17px; }
.section-head{ gap:16px; margin-bottom:36px; }
.stat-row{ grid-template-columns:1fr; gap:20px; }
.services-grid{ grid-template-columns:minmax(0, 1fr); }
.service-card{ min-height:0; padding:26px 22px; }
.approach-row{ grid-template-columns:1fr; row-gap:0; }
.approach-step{ padding:24px 0; border-left:none; }
.approach-step + .approach-step{ border-top:1px solid var(--line); }
.approach-step:last-child{ padding-bottom:0; }
.approach-step p{ max-width:none; }
.contact-band{ padding:56px 0 32px; }
}