@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/poppins-latin-500-normal.woff2") format("woff2");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/poppins-latin-700-normal.woff2") format("woff2");
}
@font-face {
font-family: "DM Serif Display";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
}
:root {
--navy: #101c2c;
--slate: #27384b;
--ivory: #f5f2ea;
--accent: #d9622b;              
--white: #ffffff;
--logo-blue: #1f3a5c;
--ivory-deep: #ece7da;
--accent-text: #a8461a;         
--accent-on-dark: #ec8a5a;      
--accent-hover: #e2743f;
--accent-soft: rgba(217, 98, 43, 0.14);
--ink: #101c2c;
--ink-muted: #4a5767;
--ink-on-dark: #f5f2ea;
--ink-on-dark-muted: #b7bfc9;
--line: #d9d3c4;
--line-dark: rgba(245, 242, 234, 0.14);
--status-review: #5c6a7b;
--status-referred: #3d6a8a;
--status-waiting: #8a5f17;
--status-resolved: #3c7356;
--font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
--font-logo: "Poppins", var(--font-sans);
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.125rem;
--text-lg: 1.25rem;
--text-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
--text-2xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
--text-3xl: clamp(2.375rem, 1.6rem + 3vw, 4rem);
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--section-y: clamp(4rem, 3rem + 4vw, 7rem);
--gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
--radius-sm: 2px;
--radius: 4px;
--shadow: 0 1px 2px rgba(16, 28, 44, 0.04), 0 8px 24px rgba(16, 28, 44, 0.06);
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--header-h: 72px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.65;
color: var(--ink);
background: var(--ivory);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
margin: 0;
}
h1, h2 {
font-family: var(--font-serif);
font-weight: 400;
line-height: 1.12;
letter-spacing: -0.01em;
}
h3, h4 {
font-weight: 600;
line-height: 1.3;
}
ul[class], ol[class] {
list-style: none;
padding: 0;
}
img, svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
button, input, select, textarea {
font: inherit;
color: inherit;
}
table {
border-collapse: collapse;
width: 100%;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
main:focus {
outline: none;
}
::selection {
background: var(--accent-soft);
}
[hidden] {
display: none !important;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: var(--space-4);
top: -100px;
z-index: 100;
padding: var(--space-3) var(--space-4);
background: var(--accent);
color: var(--navy);
font-weight: 600;
text-decoration: none;
}
.skip-link:focus {
top: var(--space-4);
}
.mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.92em;
}
.eyebrow {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
}
.eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
.eyebrow--light {
color: var(--accent);
}
.lede {
font-size: var(--text-md);
color: var(--ink-muted);
max-width: 62ch;
}
.subheading {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-xl);
margin-bottom: var(--space-5);
}
.fine-print {
margin-top: var(--space-5);
font-size: var(--text-sm);
color: var(--ink-muted);
}
.divider {
border: 0;
height: 1px;
margin: var(--space-7) 0;
background: linear-gradient(90deg, var(--accent) 0 48px, var(--line) 48px);
}
.container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow {
max-width: 800px;
}
.section {
padding-block: var(--section-y);
}
.section--ivory { background: var(--ivory); }
.section--white { background: var(--white); }
.section--navy {
background: var(--navy);
color: var(--ink-on-dark);
}
.section--navy .eyebrow { color: var(--accent); }
.section--navy .lede { color: var(--ink-on-dark-muted); }
.section-header {
margin-bottom: var(--space-7);
max-width: 760px;
}
.section-title {
font-size: var(--text-2xl);
margin-bottom: var(--space-4);
}
.section-cta {
margin-top: var(--space-6);
}
.split {
display: grid;
gap: var(--space-6);
}
@media (min-width: 900px) {
.split { grid-template-columns: 5fr 7fr; gap: var(--space-8); }
}
.grid-motif {
position: relative;
isolation: isolate;
}
.grid-motif::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(var(--line-dark) 1px, transparent 1px),
linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%);
opacity: 0.55;
pointer-events: none;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--navy);
color: var(--ink-on-dark);
border-bottom: 1px solid transparent;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.site-header.is-scrolled {
border-bottom-color: var(--line-dark);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.site-header__inner {
max-width: 1400px;
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--header-h);
gap: var(--space-5);
}
.logo-link {
display: inline-flex;
text-decoration: none;
flex-shrink: 0;
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.625rem;
}
.logo-mark { flex-shrink: 0; }
.logo__text {
display: inline-flex;
flex-direction: column;
align-items: center;
font-family: var(--font-logo);
line-height: 1;
white-space: nowrap;
}
.logo__name {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.logo__descriptor {
margin-top: 0.3rem;
font-size: 0.5625rem;
font-weight: 500;
letter-spacing: 0.42em;
margin-right: -0.42em; 
text-transform: uppercase;
}
.logo--dark .logo__name { color: var(--ivory); }
.logo--dark .logo__descriptor { color: var(--accent); }
.logo--light .logo__name { color: var(--logo-blue); }
.logo--light .logo__descriptor { color: var(--accent); }
.site-footer .logo__name { font-size: 1.75rem; }
.site-footer .logo__descriptor { font-size: 0.625rem; }
.nav-toggle {
display: none;
background: none;
border: 1px solid var(--line-dark);
border-radius: var(--radius);
padding: var(--space-2);
color: var(--ink-on-dark);
cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.site-nav {
display: flex;
align-items: center;
gap: var(--space-5);
}
.site-nav__list {
display: flex;
gap: var(--space-1);
}
.site-nav__link {
display: block;
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
font-weight: 500;
color: var(--ink-on-dark-muted);
text-decoration: none;
white-space: nowrap;
position: relative;
transition: color 0.15s var(--ease);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
color: var(--ink-on-dark);
}
.site-nav__link[aria-current="page"]::after {
content: "";
position: absolute;
left: var(--space-3);
right: var(--space-3);
bottom: 0;
height: 1px;
background: var(--accent);
}
.site-nav__cta { white-space: nowrap; }
@media (min-width: 1340px) and (max-width: 1439px) {
.site-nav .site-nav__cta { display: none; }
}
@media (max-width: 1339px) {
.nav-toggle { display: inline-flex; }
.site-nav {
position: fixed;
inset: var(--header-h) 0 0 0;
flex-direction: column;
align-items: stretch;
gap: var(--space-6);
padding: var(--space-6) var(--gutter);
background: var(--navy);
overflow-y: auto;
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s 0.2s;
}
.site-nav.is-open {
visibility: visible;
opacity: 1;
transform: none;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.site-nav__list {
flex-direction: column;
gap: 0;
}
.site-nav__link {
padding: var(--space-4) 0;
font-size: var(--text-md);
border-bottom: 1px solid var(--line-dark);
}
.site-nav__link[aria-current="page"]::after {
left: 0;
right: auto;
top: 50%;
bottom: auto;
width: 3px;
height: 1.2em;
transform: translate(-12px, -50%);
}
.site-nav__cta { align-self: flex-start; }
body.nav-open { overflow: hidden; }
}
.site-footer {
background: var(--navy);
color: var(--ink-on-dark-muted);
padding-top: var(--space-8);
font-size: var(--text-sm);
}
.site-footer__grid {
display: grid;
gap: var(--space-6);
padding-bottom: var(--space-7);
}
@media (min-width: 640px) {
.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.site-footer__grid { grid-template-columns: 1.15fr 1fr 1.1fr 1.25fr; }
}
.site-footer__brand {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4) var(--space-6);
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--line-dark);
}
.site-footer__tagline {
font-family: var(--font-serif);
font-size: var(--text-lg);
color: var(--ink-on-dark);
}
.site-footer__heading {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-4);
}
.site-footer__links li + li,
.site-footer__contact li + li {
margin-top: var(--space-2);
}
.site-footer a {
text-decoration: none;
transition: color 0.15s var(--ease);
}
.site-footer a:hover {
color: var(--ink-on-dark);
text-decoration: underline;
}
.site-footer__contact li {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
.site-footer__contact .icon {
flex-shrink: 0;
margin-top: 2px;
color: var(--accent);
}
.site-footer .follow-us { margin-top: var(--space-6); }
.site-footer .follow-us__title {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-3);
}
.site-footer__legal {
border-top: 1px solid var(--line-dark);
padding-block: var(--space-6);
font-size: var(--text-xs);
line-height: 1.7;
}
.site-footer__statement { max-width: 110ch; }
.site-footer__statement a { text-decoration: underline; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 48px;
padding: 0.75rem 1.5rem;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn .icon { transition: transform 0.2s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--sm { min-height: 40px; padding: 0.5rem 1rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--navy); color: var(--ivory); }
.btn--primary:hover { background: var(--slate); }
.btn--accent { background: var(--accent); color: var(--navy); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--ghost { border-color: rgba(245, 242, 234, 0.4); color: var(--ivory); }
.btn--ghost:hover { border-color: var(--accent); color: var(--white); }
.btn--outline { border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--ivory); }
.btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.text-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--accent);
padding-bottom: 2px;
}
.text-link:hover { color: var(--accent-text); }
.demo-label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border: 1px solid var(--accent);
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent-text);
background: var(--white);
white-space: nowrap;
}
.demo-label::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.tag-list li {
padding: 2px 10px;
border: 1px solid var(--line);
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 500;
color: var(--ink-muted);
}
.tag-list--lg li {
padding: 6px 14px;
font-size: var(--text-sm);
background: var(--white);
}
.check-list li,
.dash-list li {
position: relative;
padding-left: 1.75rem;
}
.check-list li + li,
.dash-list li + li {
margin-top: var(--space-2);
}
.check-list li::before {
content: "";
position: absolute;
left: 2px;
top: 0.45em;
width: 10px;
height: 6px;
border-left: 1.5px solid var(--accent);
border-bottom: 1.5px solid var(--accent);
transform: rotate(-45deg);
}
.dash-list li::before {
content: "";
position: absolute;
left: 2px;
top: 0.8em;
width: 12px;
height: 1px;
background: var(--ink-muted);
}
@media (min-width: 760px) {
.check-list--columns {
columns: 2;
column-gap: var(--space-7);
}
.check-list--columns li { break-inside: avoid; }
}
.steps {
counter-reset: step;
display: grid;
gap: var(--space-4);
}
.steps li {
counter-increment: step;
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--line-dark);
}
.steps li::before {
content: counter(step, decimal-leading-zero);
font-family: var(--font-serif);
font-size: var(--text-lg);
color: var(--accent);
line-height: 1.3;
}
.steps--dark li { border-bottom-color: var(--line); }
.steps--dark li::before { color: var(--accent-text); }
.card-grid {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.service-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
background: var(--white);
border: 1px solid var(--line);
border-top: 2px solid var(--navy);
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.section--white .service-card { background: var(--ivory); }
.service-card:hover {
border-top-color: var(--accent);
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.service-card:focus-within { border-top-color: var(--accent); }
.service-card__icon { color: var(--accent-text); }
.service-card__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-lg);
}
.service-card__title a {
text-decoration: none;
}
.service-card__title a::after {
content: "";
position: absolute;
inset: 0;
}
.service-card p {
color: var(--ink-muted);
font-size: var(--text-sm);
flex-grow: 1;
}
.service-card__more {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
}
.service-card:hover .service-card__more { color: var(--accent-text); }
.package-grid {
display: grid;
gap: var(--space-5);
}
@media (min-width: 960px) {
.package-grid { grid-template-columns: repeat(3, 1fr); }
}
.package-card {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-6);
background: var(--ivory);
border: 1px solid var(--line);
font-size: var(--text-sm);
}
.package-card--featured {
background: var(--navy);
color: var(--ink-on-dark);
border-color: var(--navy);
box-shadow: inset 0 2px 0 var(--accent);
}
.package-card__code {
display: inline-block;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.16em;
color: var(--accent-text);
margin-bottom: var(--space-2);
}
.package-card--featured .package-card__code { color: var(--accent); }
.package-card__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-xl);
margin-bottom: var(--space-2);
}
.package-card__best,
.package-card__inherits {
color: var(--ink-muted);
}
.package-card__inherits { font-weight: 600; color: var(--ink); }
.package-card--featured .package-card__best { color: var(--ink-on-dark-muted); }
.package-card--featured .package-card__inherits { color: var(--ink-on-dark); }
.package-card .check-list { flex-grow: 1; }
.package-card__excludes {
padding-top: var(--space-4);
border-top: 1px solid var(--line);
color: var(--ink-muted);
}
.package-card--featured .package-card__excludes {
border-top-color: var(--line-dark);
color: var(--ink-on-dark-muted);
}
.package-card--featured .dash-list li::before { background: var(--ink-on-dark-muted); }
.package-card__excludes-title {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: var(--space-2);
}
.package-card__footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--line);
}
.package-card--featured .package-card__footer { border-top-color: var(--line-dark); }
.package-card--featured .text-link { color: var(--ink-on-dark); }
.package-card__price {
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
}
.package-card--featured .package-card__price { color: var(--ink-on-dark-muted); }
.note-panel {
margin-top: var(--space-6);
padding: var(--space-6);
border: 1px dashed var(--accent);
background: var(--ivory);
}
.note-panel__title {
font-size: var(--text-md);
margin-bottom: var(--space-4);
}
.form-grid {
display: grid;
gap: var(--space-5);
}
@media (min-width: 640px) {
.form-grid { grid-template-columns: 1fr 1fr; }
.field--full { grid-column: 1 / -1; }
}
.field label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--text-sm);
font-weight: 500;
}
.field input:not([type="checkbox"]),
.field select,
.field textarea {
width: 100%;
min-height: 48px;
padding: 0.7rem 0.9rem;
background: var(--white);
border: 1px solid #b9b2a2;
border-radius: var(--radius-sm);
transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.field [aria-invalid="true"] {
border-color: #a33a2b;
}
.field__optional {
font-weight: 400;
color: var(--ink-muted);
}
.req { color: #a33a2b; }
.field__hint,
.field__error {
margin-top: var(--space-2);
font-size: var(--text-xs);
}
.field__hint { color: var(--ink-muted); }
.field__error { color: #a33a2b; font-weight: 500; }
.field--check {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: start;
}
.field--check input {
width: 20px;
height: 20px;
margin-top: 2px;
accent-color: var(--navy);
}
.field--check label {
margin: 0;
font-weight: 400;
color: var(--ink-muted);
}
.field--check .field__error { grid-column: 2; margin-top: 0; }
.field--trap {
position: absolute;
left: -9999px;
}
.inquiry-form { position: relative; }
.inquiry-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-6);
}
.inquiry-form__note {
font-size: var(--text-xs);
color: var(--ink-muted);
}
.form-status {
margin-top: var(--space-5);
padding: var(--space-4) var(--space-5);
border-left: 2px solid var(--accent);
background: var(--ivory);
font-size: var(--text-sm);
}
.form-status.is-error { border-left-color: #a33a2b; }
.table-scroll {
overflow-x: auto;
}
.data-table {
font-size: var(--text-sm);
min-width: 520px;
}
.data-table th,
.data-table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.data-table thead th {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-muted);
border-bottom-color: var(--ink);
}
.data-table--lg {
background: var(--white);
font-size: var(--text-base);
}
.data-table--lg th[scope="row"] {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-lg);
width: 180px;
}
.follow-us__title {
font-size: var(--text-md);
margin-bottom: var(--space-4);
}
.follow-us__links {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.follow-us__links a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
}
.follow-us__links a:hover { text-decoration: underline; }
.follow-us__links .icon { color: var(--accent); }
.contact-cards + .follow-us {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-5);
margin-top: var(--space-5);
padding: var(--space-5);
background: var(--white);
border: 1px solid var(--line);
}
.contact-cards + .follow-us .follow-us__title { margin-bottom: 0; }
.contact-cards + .follow-us .follow-us__links a {
padding: var(--space-2) var(--space-4);
border: 1px solid var(--line);
border-radius: 999px;
font-size: var(--text-sm);
font-weight: 500;
}
.contact-cards + .follow-us .follow-us__links a:hover {
border-color: var(--accent);
text-decoration: none;
}
.contact-cards + .follow-us .follow-us__links .icon { color: var(--accent-text); }
.terms-gate { display: none; }
.terms-pending body { overflow: hidden; }
.terms-pending body > :not(.terms-gate) {
filter: blur(6px);
user-select: none;
}
.terms-pending .terms-gate {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: rgba(16, 28, 44, 0.72);
}
.terms-gate__panel {
width: 100%;
max-width: 520px;
max-height: calc(100vh - 2rem);
max-height: calc(100dvh - 2rem);
overflow-y: auto;
padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
background: var(--white);
border-top: 3px solid var(--accent);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.terms-gate__title {
font-size: var(--text-2xl);
margin: var(--space-4) 0 var(--space-3);
}
.terms-gate__intro { color: var(--ink-muted); }
.terms-gate__points {
margin: var(--space-4) 0 var(--space-5);
font-size: var(--text-sm);
}
.terms-gate__check {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: start;
margin-bottom: var(--space-5);
padding: var(--space-4);
background: var(--ivory);
font-size: var(--text-sm);
cursor: pointer;
}
.terms-gate__check input {
width: 20px;
height: 20px;
margin-top: 1px;
accent-color: var(--navy);
}
.terms-gate__check a { text-decoration-color: var(--accent); }
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.cookie-banner {
position: fixed;
left: var(--space-4);
right: var(--space-4);
bottom: var(--space-4);
z-index: 150;
max-height: calc(100vh - 2rem);
max-height: calc(100dvh - 2rem);
overflow-y: auto;
background: var(--white);
border: 1px solid var(--line);
border-top: 3px solid var(--accent);
box-shadow: 0 16px 48px rgba(16, 28, 44, 0.28);
}
.cookie-banner__inner {
display: grid;
gap: var(--space-5);
padding-block: var(--space-6);
}
@media (min-width: 900px) {
.cookie-banner__inner {
grid-template-columns: 1fr minmax(240px, 300px);
align-items: center;
gap: var(--space-7);
}
}
.cookie-banner__title {
font-size: var(--text-xl);
margin-bottom: var(--space-3);
}
.cookie-banner__text p {
font-size: var(--text-sm);
color: var(--ink-muted);
max-width: 70ch;
}
.cookie-banner__text a { text-decoration-color: var(--accent); }
.cookie-banner__actions {
display: grid;
gap: var(--space-3);
}
.cookie-options {
display: grid;
gap: var(--space-3);
margin: var(--space-5) 0 0;
padding: 0;
border: 0;
}
.cookie-option {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: start;
padding: var(--space-3) var(--space-4);
background: var(--ivory);
font-size: var(--text-sm);
color: var(--ink-muted);
cursor: pointer;
}
.cookie-option strong {
display: block;
color: var(--ink);
}
.cookie-option input {
width: 20px;
height: 20px;
margin-top: 2px;
accent-color: var(--navy);
}
.cookie-option input:disabled { cursor: not-allowed; }
.link-button {
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
}
.link-button:hover { color: var(--ink-on-dark); text-decoration: underline; }
.breadcrumbs ol {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-5);
font-size: var(--text-xs);
color: var(--ink-on-dark-muted);
}
.breadcrumbs li + li::before {
content: "/";
margin-right: var(--space-2);
color: var(--accent);
}
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink-on-dark); text-decoration: underline; }
.review-notice {
margin-bottom: var(--space-7);
padding: var(--space-4) var(--space-5);
border: 1px solid var(--accent);
background: var(--white);
font-size: var(--text-sm);
}
.prose {
font-size: var(--text-md);
color: var(--ink);
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
font-size: var(--text-xl);
margin-top: var(--space-7);
}
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--accent); }
.prose a { text-decoration-color: var(--accent); }
.showcase {
display: grid;
gap: var(--space-6);
}
.panel {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--line);
box-shadow: var(--shadow);
min-width: 0;
}
.section--white .panel { background: var(--ivory); }
.section--white .panel .demo-label { background: var(--ivory); }
.panel__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--line);
}
.panel__title {
font-size: var(--text-sm);
font-weight: 600;
}
.panel__toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--line);
font-size: var(--text-xs);
}
.panel__updated {
margin-left: auto;
color: var(--ink-muted);
}
.panel__body {
padding: var(--space-5);
flex-grow: 1;
min-width: 0;
}
.panel__footnote,
.panel__caption {
font-size: var(--text-xs);
color: var(--ink-muted);
}
.panel__footnote { margin-top: var(--space-3); }
.panel__caption { padding: 0 var(--space-5) var(--space-4); }
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--white);
color: var(--ink-muted);
font-weight: 500;
white-space: nowrap;
}
.chip--active {
border-color: var(--navy);
color: var(--ink);
}
.search-mock {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-width: 240px;
padding: 5px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--white);
color: var(--ink-muted);
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 700px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .kpi-grid { grid-template-columns: repeat(6, 1fr); } }
.kpi {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-4);
background: var(--white);
}
.section--white .kpi { background: var(--ivory); }
.kpi dt {
font-size: var(--text-xs);
color: var(--ink-muted);
line-height: 1.35;
min-height: 2.7em;
}
.kpi__value {
font-family: var(--font-serif);
font-size: var(--text-xl);
line-height: 1.15;
}
.kpi__meta {
font-size: 0.6875rem;
color: var(--ink-muted);
}
.kpi__spark svg {
width: 100%;
height: 26px;
margin-top: var(--space-2);
}
.kpi__spark polyline {
fill: none;
stroke: var(--slate);
stroke-width: 1.5;
stroke-linejoin: round;
}
.delta {
font-weight: 600;
white-space: nowrap;
}
.delta--good { color: var(--status-resolved); }
.delta--bad { color: #a33a2b; }
.delta--neutral { color: var(--ink); }
.dash-grid {
display: grid;
gap: var(--space-5);
margin-top: var(--space-5);
}
@media (min-width: 1000px) {
.dash-grid { grid-template-columns: 1.7fr 1fr; }
}
.dash-card {
min-width: 0;
padding: var(--space-5);
border: 1px solid var(--line);
background: var(--white);
}
.section--white .dash-card { background: var(--ivory); }
.dash-card__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: var(--space-2) var(--space-4);
margin-bottom: var(--space-4);
}
.dash-card__title {
font-size: var(--text-sm);
font-weight: 600;
}
.dash-card__subtitle {
margin: var(--space-5) 0 var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--line);
font-size: var(--text-sm);
font-weight: 600;
}
.dash-card__aside {
font-size: var(--text-xs);
color: var(--ink-muted);
}
.series-legend {
display: flex;
gap: var(--space-4);
font-size: var(--text-xs);
color: var(--ink-muted);
}
.series-legend li {
display: inline-flex;
align-items: center;
gap: 6px;
}
.swatch {
width: 14px;
height: 3px;
border-radius: 2px;
}
.swatch--received { background: var(--slate); }
.swatch--closed { background: var(--accent); }
.line-chart {
width: 100%;
height: auto;
overflow: visible;
}
.line-chart__grid {
stroke: var(--line);
stroke-width: 1;
}
.line-chart__tick {
font-family: var(--font-sans);
font-size: 10px;
fill: var(--ink-muted);
}
.line-chart__line {
fill: none;
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
}
.line-chart__line--received { stroke: var(--slate); }
.line-chart__line--closed { stroke: var(--accent); }
.line-chart__dot { stroke: var(--white); stroke-width: 1.5; }
.line-chart__dot--received { fill: var(--slate); }
.line-chart__dot--closed { fill: var(--accent); }
.line-chart__hit { fill: transparent; }
.line-chart__point:hover .line-chart__dot { r: 5; }
.line-chart__end {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
fill: var(--ink);
}
@media (max-width: 600px) {
.line-chart__tick { font-size: 18px; }
.line-chart__end { font-size: 20px; }
.line-chart--report .line-chart__tick { font-size: 14px; }
.ward-map__label { font-size: 15px; }
.ward-map__water-label,
.ward-map__north text,
.ward-map__scale text { font-size: 12px; }
}
.bar-chart__row {
display: grid;
grid-template-columns: 8.5rem 1fr 2.25rem 2.5rem 3rem;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
}
.bar-chart__row + .bar-chart__row { margin-top: var(--space-3); }
.bar-chart__label {
color: var(--ink-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bar-chart__track,
.mini-bars__track,
.pipeline__track,
.age__track {
display: block;
background: var(--ivory-deep);
}
.bar-chart__track { height: 10px; }
.bar-chart__bar,
.mini-bars__bar,
.pipeline__bar,
.age__bar {
display: block;
height: 100%;
width: var(--w);
background: var(--slate);
border-radius: 0 4px 4px 0;
}
.bar-chart__row:first-child .bar-chart__bar { background: var(--accent); }
.bar-chart__value,
.bar-chart__share,
.bar-chart__change {
text-align: right;
font-variant-numeric: tabular-nums;
}
.bar-chart__value { font-weight: 600; }
.bar-chart__share,
.bar-chart__change {
font-size: var(--text-xs);
color: var(--ink-muted);
}
@media (max-width: 520px) {
.bar-chart__row {
grid-template-columns: 1fr auto auto;
grid-template-areas:
"label value share"
"bar   bar   bar";
row-gap: 4px;
}
.bar-chart__label { grid-area: label; }
.bar-chart__value { grid-area: value; }
.bar-chart__share { grid-area: share; }
.bar-chart__track { grid-area: bar; }
.bar-chart__change { display: none; }
}
.mini-bars li {
display: grid;
grid-template-columns: 9rem 1fr 2.25rem;
align-items: center;
gap: var(--space-3);
font-size: var(--text-xs);
}
.mini-bars li + li { margin-top: var(--space-2); }
.mini-bars__label { color: var(--ink-muted); }
.mini-bars__track { height: 8px; }
.mini-bars__value {
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.pipeline {
display: grid;
gap: var(--space-3);
}
.pipeline__row {
display: flex;
justify-content: space-between;
font-size: var(--text-sm);
}
.pipeline__label { color: var(--ink-muted); }
.pipeline__count {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.pipeline__track {
height: 6px;
margin: 4px 0 2px;
}
.pipeline__stage--done .pipeline__bar { background: var(--status-resolved); }
.pipeline__note {
font-size: 0.6875rem;
color: var(--ink-muted);
}
.sla {
display: flex;
align-items: center;
gap: var(--space-4);
}
.sla__ring {
width: 96px;
height: 96px;
flex-shrink: 0;
}
.sla__track,
.sla__value {
fill: none;
stroke-width: 10;
}
.sla__track { stroke: var(--ivory-deep); }
.sla__value { stroke: var(--slate); }
.sla__target {
stroke: var(--accent);
stroke-width: 2.5;
}
.sla__pct {
font-family: var(--font-serif);
font-size: 20px;
fill: var(--ink);
}
.sla__note {
font-size: var(--text-xs);
color: var(--ink-muted);
}
.sla__note strong { color: var(--ink); }
.map-layout {
display: grid;
gap: var(--space-6);
}
@media (min-width: 900px) {
.map-layout {
grid-template-columns: 1.6fr 1fr;
align-items: start;
}
}
.map-frame {
border: 1px solid var(--line);
background: #efeae0;
}
.ward-map {
display: block;
width: 100%;
height: auto;
}
.ward-map__land { fill: #efeae0; }
.ward-map__grid line {
stroke: #e2dccf;
stroke-width: 0.6;
}
.ward--0 { fill: #f6e6db; background: #f6e6db; }
.ward--1 { fill: #f0c4a6; background: #f0c4a6; }
.ward--2 { fill: #e6976b; background: #e6976b; }
.ward--3 { fill: #d9622b; background: #d9622b; }
.ward--4 { fill: #9a3f14; background: #9a3f14; }
.ward {
stroke: var(--white);
stroke-width: 1.4;
stroke-linejoin: round;
}
.ward:hover {
stroke: var(--navy);
stroke-width: 2;
}
.ward-map__river {
fill: none;
stroke: #9db9cf;
stroke-width: 5;
stroke-linecap: round;
opacity: 0.9;
pointer-events: none;
}
.ward-map__lake {
fill: #a9c4d8;
stroke: #8fb0c8;
stroke-width: 1;
pointer-events: none;
}
.ward-map__road-casing {
fill: none;
stroke: var(--white);
stroke-width: 5;
stroke-linecap: round;
opacity: 0.9;
pointer-events: none;
}
.ward-map__road {
fill: none;
stroke: #8f887a;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.ward-map__road--minor {
stroke: var(--white);
stroke-width: 1.4;
opacity: 0.85;
}
.ward-map__outline {
fill: none;
stroke: var(--navy);
stroke-width: 2;
stroke-linejoin: round;
pointer-events: none;
}
.ward-map__marker {
fill: var(--navy);
fill-opacity: 0.85;
stroke: var(--white);
stroke-width: 1.5;
pointer-events: none;
}
.ward-map__label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
fill: var(--ink);
pointer-events: none;
}
.ward-map__label--light { fill: var(--white); }
.ward-map__water-label {
font-family: var(--font-sans);
font-size: 9px;
font-style: italic;
fill: #4f7590;
pointer-events: none;
}
.ward-map__north path { fill: var(--navy); }
.ward-map__north text,
.ward-map__scale text {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 600;
fill: var(--ink);
}
.ward-map__scale rect { fill: var(--navy); }
.ward-map__scale .ward-map__scale-alt {
fill: var(--white);
stroke: var(--navy);
stroke-width: 0.8;
}
.map-side { min-width: 0; }
.map-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
margin-bottom: var(--space-5);
background: var(--line);
border: 1px solid var(--line);
}
.map-stats div {
padding: var(--space-3);
background: var(--white);
}
.section--white .map-stats div { background: var(--ivory); }
.map-stats dt {
font-size: var(--text-xs);
color: var(--ink-muted);
}
.map-stats dd {
font-family: var(--font-serif);
font-size: var(--text-xl);
line-height: 1.2;
}
.attention-list {
margin: var(--space-3) 0 var(--space-5);
border-top: 1px solid var(--line);
}
.attention-list li {
display: grid;
grid-template-columns: 1.5rem 1fr auto;
grid-template-areas:
"rank name cases"
"rank overdue overdue";
column-gap: var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--line);
font-size: var(--text-sm);
}
.attention-list__rank {
grid-area: rank;
font-family: var(--font-serif);
font-size: var(--text-lg);
color: var(--accent-text);
line-height: 1.2;
}
.attention-list__name { grid-area: name; font-weight: 600; }
.attention-list__cases {
grid-area: cases;
font-variant-numeric: tabular-nums;
}
.attention-list__overdue {
grid-area: overdue;
font-size: var(--text-xs);
color: #a33a2b;
}
.map-legend {
font-size: var(--text-xs);
color: var(--ink-muted);
}
.map-legend__title {
font-weight: 600;
color: var(--ink);
margin-bottom: var(--space-2);
}
.map-legend__bins {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
margin-bottom: var(--space-3);
}
.map-legend__bins li,
.map-legend__keys li {
display: inline-flex;
align-items: center;
gap: 6px;
}
.map-legend__bins i {
width: 16px;
height: 12px;
border: 1px solid rgba(16, 28, 44, 0.08);
}
.map-legend__keys {
display: grid;
gap: var(--space-2);
}
.key-marker {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--navy);
opacity: 0.85;
}
.key-road {
width: 16px;
height: 3px;
background: #8f887a;
box-shadow: 0 0 0 1.5px var(--white);
}
.key-water {
width: 16px;
height: 10px;
border-radius: 5px;
background: #a9c4d8;
}
.data-table--register {
min-width: 900px;
font-size: var(--text-sm);
}
.data-table--register th,
.data-table--register td {
padding: var(--space-3) var(--space-2);
vertical-align: middle;
}
.data-table--register th:first-child,
.data-table--register td:first-child { padding-left: var(--space-3); }
.data-table--register td { white-space: nowrap; }
.data-table--register tr.is-overdue { background: rgba(163, 58, 43, 0.05); }
.th-note {
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.age {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.age__value {
min-width: 1.5em;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.age__track {
width: 44px;
height: 6px;
}
.is-overdue .age__bar { background: #a33a2b; }
.age__flag {
font-size: 0.6875rem;
font-weight: 600;
color: #a33a2b;
}
.next-urgent { font-weight: 600; }
.status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: 600;
white-space: nowrap;
}
.status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.status--under-review { color: var(--status-review); }
.status--referred { color: var(--status-referred); }
.status--awaiting-response { color: var(--status-waiting); }
.status--resolved { color: var(--status-resolved); }
.report-wrap {
background: var(--ivory-deep);
padding: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}
.report-doc {
max-width: 920px;
margin-inline: auto;
padding: clamp(1.25rem, 1rem + 2vw, 2.75rem);
background: var(--white);
box-shadow: 0 2px 6px rgba(16, 28, 44, 0.08), 0 18px 40px rgba(16, 28, 44, 0.1);
font-size: var(--text-sm);
}
.report-doc__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 2px solid var(--navy);
}
.report-doc__brand {
font-family: var(--font-logo);
font-weight: 700;
font-size: var(--text-sm);
color: var(--logo-blue);
}
.report-doc__title {
font-family: var(--font-serif);
font-size: var(--text-xl);
line-height: 1.2;
margin-top: 2px;
}
.report-doc__meta {
font-size: var(--text-xs);
color: var(--ink-muted);
margin-top: var(--space-1);
}
.report-doc__stamp {
padding: 4px 10px;
border: 1.5px solid var(--accent);
color: var(--accent-text);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
transform: rotate(-4deg);
}
.report-doc__section {
margin: var(--space-5) 0 var(--space-4);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-text);
}
.report-doc__grid {
display: grid;
gap: var(--space-6);
}
@media (min-width: 800px) {
.report-doc__grid { grid-template-columns: 1fr 1.15fr; }
}
.report-doc__h {
font-size: var(--text-sm);
font-weight: 600;
margin-bottom: var(--space-3);
}
.report-doc__h:not(:first-child) { margin-top: var(--space-5); }
.report-doc__summary {
padding-left: 1.1rem;
color: var(--ink-muted);
}
.report-doc__summary li + li { margin-top: var(--space-2); }
.report-doc__summary li::marker { color: var(--accent); }
.report-doc__figures {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
margin-top: var(--space-5);
background: var(--line);
border: 1px solid var(--line);
}
.report-doc__figures div {
padding: var(--space-3) var(--space-4);
background: var(--white);
}
.report-doc__figures dt {
font-size: var(--text-xs);
color: var(--ink-muted);
}
.report-doc__figures dd {
font-family: var(--font-serif);
font-size: var(--text-xl);
line-height: 1.2;
}
.report-doc__table { font-size: var(--text-xs); }
.report-doc__table th,
.report-doc__table td {
padding: 6px 8px;
border-bottom: 1px solid var(--line);
text-align: left;
}
.report-doc__table th {
color: var(--ink-muted);
font-weight: 600;
border-bottom-color: var(--ink);
}
.report-doc__table td:not(:first-child),
.report-doc__table th:not(:first-child) { text-align: right; }
.report-doc__method {
margin-top: var(--space-5);
padding: var(--space-3) var(--space-4);
border-left: 2px solid var(--accent);
background: var(--ivory);
font-size: var(--text-xs);
color: var(--ink-muted);
}
.report-doc__foot {
display: flex;
justify-content: space-between;
margin-top: var(--space-5);
padding-top: var(--space-3);
border-top: 1px solid var(--line);
font-size: 0.6875rem;
color: var(--ink-muted);
}
.hero {
background: var(--navy);
color: var(--ink-on-dark);
padding-block: clamp(4rem, 3rem + 6vw, 8rem);
overflow: hidden;
}
.hero--photo {
background:
linear-gradient(90deg,
rgba(16, 28, 44, 0.9) 0%,
rgba(16, 28, 44, 0.72) 38%,
rgba(31, 58, 92, 0.3) 68%,
rgba(31, 58, 92, 0.18) 100%),
url("/assets/img/office-front.webp") 68% 42% / cover no-repeat,
var(--navy);
}
@media (max-width: 959px) {
.hero--photo {
background:
linear-gradient(rgba(16, 28, 44, 0.8), rgba(16, 28, 44, 0.8)),
url("/assets/img/office-front.webp") 68% 42% / cover no-repeat,
var(--navy);
}
}
.hero__inner {
display: grid;
gap: var(--space-8);
align-items: center;
}
@media (min-width: 960px) {
.hero__inner { grid-template-columns: minmax(0, 46rem); }
}
.hero__title {
font-size: var(--text-3xl);
max-width: 16ch;
}
.hero__lede {
margin: var(--space-5) 0 var(--space-6);
font-size: var(--text-md);
color: var(--ink-on-dark-muted);
max-width: 56ch;
}
.page-hero {
background: var(--navy);
color: var(--ink-on-dark);
padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.page-hero__title {
font-size: var(--text-3xl);
max-width: 20ch;
}
.page-hero__lede {
margin-top: var(--space-5);
font-size: var(--text-md);
color: var(--ink-on-dark-muted);
max-width: 64ch;
}
.pillar-grid {
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 700px) {
.pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.pillar-grid { grid-template-columns: repeat(4, 1fr); }
}
.pillar-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
background: var(--ivory);
transition: background-color 0.2s var(--ease);
}
.pillar-card:hover { background: var(--white); }
.pillar-card__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
color: var(--accent-text);
}
.pillar-card__number {
font-family: var(--font-serif);
font-size: var(--text-lg);
color: var(--ink-muted);
}
.pillar-card__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-xl);
}
.pillar-card p {
font-size: var(--text-sm);
color: var(--ink-muted);
flex-grow: 1;
}
.pillar-card__services {
padding-top: var(--space-4);
border-top: 1px solid var(--line);
font-size: var(--text-sm);
}
.pillar-card__services li + li { margin-top: var(--space-2); }
.pillar-card__services a {
text-decoration: none;
font-weight: 500;
}
.pillar-card__services a:hover {
color: var(--accent-text);
text-decoration: underline;
}
.pathways {
display: grid;
gap: var(--space-5);
}
@media (min-width: 860px) {
.pathways { grid-template-columns: 1fr 1fr; }
}
.pathway {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
padding: clamp(1.5rem, 1rem + 2vw, 3rem);
background: var(--white);
border: 1px solid var(--line);
}
.pathway .check-list { flex-grow: 1; }
.pathway--dark {
background: var(--slate);
color: var(--ink-on-dark);
border-color: var(--slate);
}
.pathway__label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-text);
}
.pathway--dark .pathway__label { color: var(--accent-on-dark); }
.pathway__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-2xl);
margin-top: calc(var(--space-3) * -1);
}
.pathway > p { color: var(--ink-muted); }
.pathway--dark > p { color: var(--ink-on-dark-muted); }
.process {
display: grid;
gap: 1px;
background: var(--line-dark);
border: 1px solid var(--line-dark);
}
@media (min-width: 700px) {
.process { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.process { grid-template-columns: repeat(3, 1fr); }
}
.process__step {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
background: var(--navy);
}
.process__index {
font-family: var(--font-serif);
font-size: var(--text-xl);
color: var(--accent);
}
.process__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-xl);
}
.process__step > p {
font-size: var(--text-sm);
color: var(--ink-on-dark-muted);
}
.process__step > .process__output {
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px solid var(--line-dark);
color: var(--ink-on-dark);
}
.process__output span {
display: block;
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-1);
}
.values {
display: grid;
gap: var(--space-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.value {
padding-top: var(--space-5);
border-top: 1px solid var(--accent);
}
.value__icon { color: var(--accent-text); }
.value__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-lg);
margin: var(--space-4) 0 var(--space-2);
}
.value p {
font-size: var(--text-sm);
color: var(--ink-muted);
}
.consultation__inner {
display: grid;
gap: var(--space-7);
}
@media (min-width: 960px) {
.consultation__inner { grid-template-columns: 1fr 1.4fr; gap: var(--space-8); }
}
.consultation__points {
margin-top: var(--space-6);
display: grid;
gap: var(--space-4);
font-size: var(--text-sm);
color: var(--ink-muted);
}
.consultation__points li {
display: flex;
gap: var(--space-3);
}
.consultation__points .icon {
flex-shrink: 0;
color: var(--accent-text);
}
.consultation__form {
padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
background: var(--ivory);
border: 1px solid var(--line);
border-top: 2px solid var(--accent);
}
.consultation__form .form-status { background: var(--white); }
.engagement-compare {
display: grid;
gap: var(--space-5);
}
@media (min-width: 860px) {
.engagement-compare { grid-template-columns: 1fr 1fr; }
}
.engagement {
display: flex;
gap: var(--space-5);
padding: var(--space-6);
background: var(--white);
border: 1px solid var(--line);
}
.engagement__icon { color: var(--accent-text); flex-shrink: 0; }
.engagement__title {
font-size: var(--text-xl);
margin-bottom: var(--space-3);
}
.engagement p {
color: var(--ink-muted);
margin-bottom: var(--space-4);
}
.pillar-block {
display: grid;
gap: var(--space-6);
}
@media (min-width: 1000px) {
.pillar-block { grid-template-columns: 1fr 2fr; gap: var(--space-8); }
.pillar-block__header { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
.pillar-block__number {
display: block;
font-family: var(--font-serif);
font-size: var(--text-2xl);
color: var(--accent-text);
margin-bottom: var(--space-3);
}
.pillar-block .card-grid {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.service-detail {
display: grid;
gap: var(--space-7);
}
@media (min-width: 960px) {
.service-detail { grid-template-columns: 1fr 340px; gap: var(--space-8); }
.service-detail__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
.deliverables {
display: grid;
gap: var(--space-3);
}
@media (min-width: 640px) {
.deliverables { grid-template-columns: 1fr 1fr; }
}
.deliverables li {
display: flex;
gap: var(--space-3);
align-items: flex-start;
padding: var(--space-4);
background: var(--white);
border: 1px solid var(--line);
}
.deliverables .icon { flex-shrink: 0; color: var(--accent-text); }
.safeguards .dash-list { color: var(--ink-muted); }
.aside-card {
padding: var(--space-6);
background: var(--white);
border: 1px solid var(--line);
border-top: 2px solid var(--accent);
}
.aside-card + .aside-card { margin-top: var(--space-5); }
.aside-card--plain {
background: transparent;
border-top-width: 1px;
border-top-color: var(--line);
}
.aside-card__note {
margin-top: var(--space-4);
font-size: var(--text-xs);
color: var(--ink-muted);
}
.engagement-list {
display: grid;
gap: var(--space-4);
margin-bottom: var(--space-6);
font-size: var(--text-sm);
}
.engagement-list li {
display: flex;
gap: var(--space-3);
}
.engagement-list .icon { flex-shrink: 0; color: var(--accent-text); }
.engagement-list small {
display: block;
color: var(--ink-muted);
font-size: var(--text-xs);
}
.engagement-list .is-unavailable { color: var(--ink-muted); }
.engagement-list .is-unavailable .icon { color: var(--ink-muted); }
.related-list { font-size: var(--text-sm); }
.related-list li + li { margin-top: var(--space-2); }
.related-list a { text-decoration-color: var(--accent); }
.timeline {
display: grid;
gap: var(--space-5);
}
@media (min-width: 860px) {
.timeline { grid-template-columns: repeat(4, 1fr); }
}
.timeline__item {
padding-top: var(--space-5);
border-top: 1px solid var(--accent);
position: relative;
}
.timeline__item::before {
content: "";
position: absolute;
top: -5px;
left: 0;
width: 9px;
height: 9px;
background: var(--accent);
transform: rotate(45deg);
}
.timeline__period {
display: block;
font-family: var(--font-serif);
font-size: var(--text-lg);
margin-bottom: var(--space-2);
}
.timeline__item p {
font-size: var(--text-sm);
color: var(--ink-on-dark-muted);
}
.workflow {
display: grid;
gap: 0;
}
.workflow__step {
position: relative;
display: grid;
grid-template-columns: 3rem 1fr;
gap: var(--space-5);
padding-bottom: var(--space-6);
}
.workflow__step:not(:last-child)::before {
content: "";
position: absolute;
top: 3rem;
bottom: 0;
left: calc(1.5rem - 0.5px);
width: 1px;
background: linear-gradient(var(--accent), var(--line-dark));
}
.workflow__marker {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 1px solid var(--accent);
border-radius: 50%;
background: var(--navy);
}
.workflow__number {
font-family: var(--font-serif);
font-size: var(--text-md);
color: var(--accent);
}
.workflow__body {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
background: rgba(39, 56, 75, 0.45);
border: 1px solid var(--line-dark);
transition: border-color 0.2s var(--ease);
}
.workflow__step:hover .workflow__body { border-color: rgba(217, 98, 43, 0.5); }
.workflow__icon { color: var(--accent); }
.workflow__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-xl);
}
.workflow__text {
font-size: var(--text-sm);
color: var(--ink-on-dark-muted);
flex-grow: 1;
}
.workflow__record {
padding-top: var(--space-3);
border-top: 1px solid var(--line-dark);
font-size: var(--text-sm);
font-weight: 500;
}
.workflow__record span {
display: block;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-1);
}
@media (min-width: 1000px) {
.workflow {
grid-template-columns: repeat(5, 1fr);
gap: var(--space-4);
}
.workflow__step {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
gap: var(--space-5);
padding-bottom: 0;
}
.workflow__step:not(:last-child)::before {
top: 1.5rem;
bottom: auto;
left: 3rem;
right: calc(var(--space-4) * -1);
width: auto;
height: 1px;
background: linear-gradient(90deg, var(--accent), var(--line-dark));
}
}
.compliance-footer {
display: grid;
gap: var(--space-5);
margin-top: var(--space-7);
}
@media (min-width: 900px) {
.compliance-footer { grid-template-columns: 1.3fr 1fr; }
}
.compliance-footer__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-lg);
margin-bottom: var(--space-4);
}
.compliance-commitments {
padding: var(--space-6);
border: 1px solid var(--line-dark);
font-size: var(--text-sm);
}
.compliance-note {
display: flex;
gap: var(--space-4);
padding: var(--space-6);
border: 1px solid var(--accent);
background: rgba(217, 98, 43, 0.08);
font-size: var(--text-sm);
color: var(--ink-on-dark-muted);
}
.compliance-note .icon {
flex-shrink: 0;
color: var(--accent);
}
.compliance-note .compliance-footer__title { color: var(--ink-on-dark); }
.cta-band {
background: var(--slate);
color: var(--ink-on-dark);
padding-block: var(--space-8);
}
.cta-band .eyebrow { color: var(--accent-on-dark); }
.cta-band__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-6);
}
.cta-band__title {
font-size: var(--text-2xl);
max-width: 22ch;
}
.principles {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.principle {
padding: var(--space-6);
background: var(--white);
border: 1px solid var(--line);
}
.principle h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-lg);
margin-bottom: var(--space-3);
}
.principle p {
font-size: var(--text-sm);
color: var(--ink-muted);
}
.connect {
display: grid;
gap: var(--space-7);
}
@media (min-width: 960px) {
.connect { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.flow {
display: grid;
gap: 1px;
background: var(--line-dark);
border: 1px solid var(--line-dark);
font-size: var(--text-sm);
}
.flow li {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background: var(--navy);
color: var(--ink-on-dark-muted);
}
.flow span {
font-family: var(--font-serif);
color: var(--accent);
}
.feature-list {
display: grid;
gap: var(--space-5);
}
@media (min-width: 760px) {
.feature-list { grid-template-columns: 1fr 1fr; }
}
.feature {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
border-left: 2px solid var(--accent);
background: var(--white);
}
.feature .icon { flex-shrink: 0; color: var(--accent-text); }
.feature p { color: var(--ink-muted); }
.feature strong { color: var(--ink); }
.team-card {
display: flex;
flex-direction: column;
}
.team-card__icon {
color: var(--accent-text);
margin-bottom: var(--space-3);
}
.team-card p { flex-grow: 1; margin-bottom: var(--space-4); }
.team-card .text-link { align-self: flex-start; }
.careers-list { font-size: var(--text-md); }
.careers-list li + li { margin-top: var(--space-4); }
.fine-print--on-dark { color: var(--ink-on-dark-muted); }
.audience-grid {
display: grid;
gap: var(--space-5);
}
@media (min-width: 600px) {
.audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.audience-grid { grid-template-columns: repeat(3, 1fr); }
}
.audience-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--line);
border-top: 2px solid var(--navy);
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.audience-card:hover {
border-top-color: var(--accent);
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.audience-card:focus-within { border-top-color: var(--accent); }
.audience-card__image {
width: 100%;
height: auto;
aspect-ratio: 254 / 244;
object-fit: contain;
padding: var(--space-4) var(--space-4) 0;
}
.audience-card__body {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: auto;
padding: var(--space-4) var(--space-5) var(--space-5);
border-top: 1px solid var(--line);
}
.audience-card__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--text-lg);
line-height: 1.3;
}
.audience-card__title a { text-decoration: none; }
.audience-card__title a::after {
content: "";
position: absolute;
inset: 0;
}
.audience-card__more {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--accent-text);
}
.audience-card:hover .audience-card__more .icon { transform: translateX(3px); }
.audience-card__more .icon { transition: transform 0.2s var(--ease); }
.contact-cards {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.contact-card {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
background: var(--white);
border: 1px solid var(--line);
font-size: var(--text-sm);
}
.contact-card .icon { flex-shrink: 0; color: var(--accent-text); }
.contact-card__link { margin-top: var(--space-3); }
.contact-card__label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: var(--space-1);
}
.js-reveal [data-reveal] {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js-reveal [data-reveal].is-visible {
opacity: 1;
transform: none;
}