/* ==========================================================================
Ashcroft & Reid LLP — isolated demo site
All class names prefixed with `ash-`. No Tailwind, no shared CSS.
Design direction: restrained, editorial, institutional.
Palette: bone canvas, deep navy/near-black, brass accent.
========================================================================== */
/* ---------- google fonts note ----------
Newsreader (display serif) + Inter (body sans)
loaded via in
---------------------------------------- */
/* ---------- design tokens ---------- */
:root {
/* canvas / backgrounds */
--ash-bone: #f5f0e8; /* page ground — warm bone */
--ash-bone-soft: #faf7f2; /* lighter panel / card */
--ash-bone-mid: #ede6d8; /* dividers, bordered panels */
--ash-bone-deep: #d8cfc0; /* stronger divider */
/* text */
--ash-ink: #1a1814; /* primary — near-black */
--ash-ink-soft: #3d3832; /* secondary text */
--ash-ink-mute: #6b6358; /* tertiary / labels */
--ash-ink-faint: #9a9086; /* placeholder / very light */
/* accent — brass / antique gold */
--ash-brass: #8a6e3e; /* primary accent */
--ash-brass-light: #b89254; /* hover states */
--ash-brass-pale: #e8d9b8; /* tinted backgrounds */
/* dark panels */
--ash-navy: #111926; /* footer, dark bands */
--ash-navy-soft: #1c2635; /* slightly lighter */
/* hairlines */
--ash-rule: #cdc3b3; /* standard rule */
--ash-rule-light: rgba(205, 195, 179, 0.45);
/* typography */
--ash-serif: "Newsreader", "Georgia", "Times New Roman", serif;
--ash-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* spacing rhythm */
--ash-section-v: 128px;
--ash-section-v-sm: 72px;
/* max width */
--ash-max: 1360px;
/* transitions */
--ash-ease: cubic-bezier(0.22, 0.6, 0.36, 1);
}
/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
padding: 0;
background: var(--ash-bone);
color: var(--ash-ink);
font-family: var(--ash-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; padding: 0; }
address { font-style: normal; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
/* ---------- focus visible (WCAG AA) ---------- */
:focus-visible {
outline: 2px solid var(--ash-brass);
outline-offset: 3px;
}
/* ==========================================================================
SHARED BUILDING BLOCKS
========================================================================== */
/* container */
.ash-container {
max-width: var(--ash-max);
margin: 0 auto;
padding: 0 56px;
}
/* eyebrow / kicker */
.ash-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--ash-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ash-brass);
margin: 0 0 20px;
}
.ash-eyebrow::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--ash-brass);
flex-shrink: 0;
}
.ash-eyebrow--light,
.ash-eyebrow--light::before {
color: rgba(245, 240, 232, 0.65);
background: rgba(245, 240, 232, 0.5);
}
/* headings */
.ash-h2 {
font-family: var(--ash-serif);
font-weight: 300;
font-size: clamp(36px, 4.2vw, 62px);
line-height: 1.06;
letter-spacing: -0.018em;
color: var(--ash-ink);
margin: 0 0 28px;
}
.ash-h2 em {
font-style: italic;
font-weight: 300;
color: var(--ash-brass);
}
/* section headers */
.ash-section-head {
max-width: 820px;
margin: 0 auto 80px;
text-align: center;
}
.ash-section-head--left {
text-align: left;
margin-left: 0;
}
.ash-section-head .ash-eyebrow {
justify-content: center;
}
.ash-section-head--left .ash-eyebrow {
justify-content: flex-start;
}
.ash-section-lede {
font-size: 18px;
line-height: 1.65;
color: var(--ash-ink-soft);
margin: 0;
max-width: 58ch;
}
.ash-section-head:not(.ash-section-head--left) .ash-section-lede {
margin-left: auto;
margin-right: auto;
}
/* arrow link */
.ash-link-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ash-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ash-brass);
border-bottom: 1px solid var(--ash-brass-pale);
padding-bottom: 3px;
transition: gap 240ms var(--ash-ease), border-color 240ms ease;
}
.ash-link-arrow::after {
content: "→";
font-size: 14px;
transition: transform 240ms var(--ash-ease);
}
.ash-link-arrow:hover {
gap: 14px;
border-bottom-color: var(--ash-brass);
}
.ash-link-arrow:hover::after {
transform: translateX(3px);
}
/* buttons */
.ash-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
font-family: var(--ash-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 1px solid transparent;
transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
cursor: pointer;
}
.ash-btn--primary {
background: var(--ash-ink);
color: var(--ash-bone-soft);
border-color: var(--ash-ink);
}
.ash-btn--primary:hover {
background: var(--ash-brass);
border-color: var(--ash-brass);
color: var(--ash-bone-soft);
}
.ash-btn--light {
background: var(--ash-bone-soft);
color: var(--ash-ink);
border-color: var(--ash-bone-soft);
}
.ash-btn--light:hover {
background: var(--ash-brass-pale);
border-color: var(--ash-brass-pale);
color: var(--ash-navy);
}
.ash-btn--ghost-light {
background: transparent;
color: var(--ash-bone-soft);
border-color: rgba(245, 240, 232, 0.5);
}
.ash-btn--ghost-light:hover {
background: rgba(245, 240, 232, 0.12);
border-color: var(--ash-bone-soft);
}
/* hairline ledger */
.ash-ledger__row {
display: grid;
grid-template-columns: 110px 1fr;
align-items: baseline;
padding: 14px 0;
border-bottom: 1px solid var(--ash-rule);
gap: 8px;
}
.ash-ledger__row dt {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ash-ink-mute);
}
.ash-ledger__row dd {
margin: 0;
font-family: var(--ash-serif);
font-size: 18px;
color: var(--ash-ink);
line-height: 1.3;
}
/* ==========================================================================
REVEAL ON SCROLL
========================================================================== */
[data-ash-reveal] {
opacity: 0;
transform: translateY(24px);
transition:
opacity 800ms var(--ash-ease),
transform 800ms var(--ash-ease);
}
[data-ash-reveal].is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
[data-ash-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
/* ==========================================================================
NAV
========================================================================== */
.ash-nav {
position: sticky;
top: 0;
z-index: 60;
background: rgba(245, 240, 232, 0.82);
backdrop-filter: blur(18px) saturate(110%);
-webkit-backdrop-filter: blur(18px) saturate(110%);
border-bottom: 1px solid transparent;
transition: background 280ms ease, border-color 280ms ease;
}
.ash-nav.is-scrolled {
background: rgba(245, 240, 232, 0.96);
border-bottom-color: var(--ash-rule);
}
.ash-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--ash-max);
margin: 0 auto;
padding: 24px 56px;
gap: 24px;
}
.ash-nav__logo {
display: inline-flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.ash-nav__logo-mark {
font-family: var(--ash-serif);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--ash-bone-soft);
background: var(--ash-ink);
padding: 6px 10px;
line-height: 1;
}
.ash-nav__logo-name {
font-family: var(--ash-serif);
font-size: 20px;
font-weight: 300;
letter-spacing: 0.02em;
color: var(--ash-ink);
}
.ash-nav__logo-name abbr {
text-decoration: none;
}
.ash-nav__links {
display: flex;
gap: 36px;
align-items: center;
}
.ash-nav__links a {
font-family: var(--ash-sans);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--ash-ink-soft);
position: relative;
padding: 4px 0;
transition: color 220ms ease;
}
.ash-nav__links a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -2px;
height: 1px;
background: var(--ash-brass);
transition: right 300ms var(--ash-ease);
}
.ash-nav__links a:hover { color: var(--ash-ink); }
.ash-nav__links a:hover::after { right: 0; }
.ash-nav__menu-btn {
display: none;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ash-ink);
}
/* ---------- mobile drawer ---------- */
.ash-drawer {
position: fixed;
inset: 0;
z-index: 59;
background: var(--ash-bone);
transform: translateX(100%);
transition: transform 440ms cubic-bezier(0.6, 0, 0.05, 1);
display: flex;
flex-direction: column;
padding: 0;
overflow-y: auto;
}
.ash-drawer.is-open { transform: translateX(0); }
.ash-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 32px;
border-bottom: 1px solid var(--ash-rule);
}
.ash-drawer__logo {
font-family: var(--ash-serif);
font-size: 18px;
font-weight: 300;
color: var(--ash-ink);
}
.ash-drawer__close {
color: var(--ash-ink-soft);
transition: color 220ms ease;
padding: 8px;
}
.ash-drawer__close:hover { color: var(--ash-brass); }
.ash-drawer__nav {
display: flex;
flex-direction: column;
padding: 40px 32px;
gap: 4px;
flex: 1;
}
.ash-drawer__nav a {
font-family: var(--ash-serif);
font-size: 30px;
font-weight: 300;
color: var(--ash-ink);
padding: 10px 0;
border-bottom: 1px solid var(--ash-rule-light);
transition: color 220ms ease, padding-left 240ms var(--ash-ease);
}
.ash-drawer__nav a:hover {
color: var(--ash-brass);
padding-left: 10px;
}
.ash-drawer__foot {
padding: 32px;
border-top: 1px solid var(--ash-rule);
}
.ash-drawer__foot p {
margin: 0 0 8px;
font-size: 14px;
color: var(--ash-ink-soft);
line-height: 1.55;
}
.ash-drawer__foot a { color: var(--ash-brass); }
/* ==========================================================================
HERO
========================================================================== */
.ash-hero {
position: relative;
min-height: 94vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 56px 100px;
overflow: hidden;
isolation: isolate;
}
.ash-hero__media {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
}
.ash-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.65) contrast(1.05);
transform: scale(1.04);
animation: ash-hero-drift 16s ease-out forwards;
}
@keyframes ash-hero-drift {
to { transform: scale(1); }
}
.ash-hero__veil {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(17, 25, 38, 0.22) 0%,
rgba(17, 25, 38, 0.56) 45%,
rgba(17, 25, 38, 0.80) 100%),
linear-gradient(90deg,
rgba(17, 25, 38, 0.55) 0%,
rgba(17, 25, 38, 0.15) 55%);
}
.ash-hero__content {
position: relative;
max-width: 860px;
color: var(--ash-bone-soft);
}
.ash-hero__title {
font-family: var(--ash-serif);
font-weight: 300;
font-size: clamp(52px, 7vw, 110px);
line-height: 0.98;
letter-spacing: -0.02em;
margin: 0 0 28px;
color: var(--ash-bone-soft);
}
.ash-hero__title em {
font-style: italic;
font-weight: 300;
color: var(--ash-brass-light);
}
.ash-hero__lede {
font-size: 18px;
line-height: 1.6;
max-width: 54ch;
color: rgba(250, 247, 242, 0.82);
margin: 0 0 40px;
}
.ash-hero__cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.ash-hero__foot {
position: absolute;
left: 56px;
right: 56px;
bottom: 32px;
display: flex;
align-items: center;
gap: 24px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(245, 240, 232, 0.58);
}
.ash-hero__foot-rule {
display: inline-block;
width: 1px;
height: 14px;
background: rgba(245, 240, 232, 0.3);
}
/* ==========================================================================
FIRM STATEMENT
========================================================================== */
.ash-statement {
padding: var(--ash-section-v) 0;
border-bottom: 1px solid var(--ash-rule);
}
.ash-statement__inner {
display: grid;
grid-template-columns: 280px 1fr;
gap: 96px;
align-items: start;
}
.ash-ledger--vert .ash-ledger__row:first-child {
border-top: 1px solid var(--ash-rule);
}
.ash-statement__body p {
font-size: 17px;
line-height: 1.7;
color: var(--ash-ink-soft);
margin: 0 0 20px;
max-width: 64ch;
}
.ash-statement__body p:last-child { margin-bottom: 0; }
/* ==========================================================================
PRACTICE AREAS
========================================================================== */
.ash-practice {
padding: var(--ash-section-v) 0;
border-bottom: 1px solid var(--ash-rule);
}
.ash-practice__grid {
border-top: 1px solid var(--ash-rule);
border-left: 1px solid var(--ash-rule);
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.ash-practice__item {
border-right: 1px solid var(--ash-rule);
border-bottom: 1px solid var(--ash-rule);
padding: 48px 52px 56px;
display: flex;
gap: 32px;
align-items: flex-start;
transition: background 260ms ease;
}
.ash-practice__item:hover {
background: var(--ash-bone-soft);
}
.ash-practice__num {
font-family: var(--ash-serif);
font-style: italic;
font-size: 13px;
color: var(--ash-brass);
letter-spacing: 0.04em;
flex-shrink: 0;
margin-top: 5px;
}
.ash-practice__body h3 {
font-family: var(--ash-serif);
font-weight: 400;
font-size: 24px;
line-height: 1.2;
margin: 0 0 14px;
letter-spacing: -0.004em;
color: var(--ash-ink);
}
.ash-practice__body p {
font-size: 15px;
line-height: 1.65;
color: var(--ash-ink-soft);
margin: 0;
max-width: 46ch;
}
/* ==========================================================================
SECTORS
========================================================================== */
.ash-sectors {
padding: var(--ash-section-v) 0;
background: var(--ash-bone-soft);
border-top: 1px solid var(--ash-rule);
border-bottom: 1px solid var(--ash-rule);
}
.ash-sectors__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
background: var(--ash-rule);
}
.ash-sector-card {
background: var(--ash-bone-soft);
display: flex;
flex-direction: column;
}
.ash-sector-card__media {
aspect-ratio: 16 / 9;
overflow: hidden;
flex-shrink: 0;
}
.ash-sector-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.72);
transition: transform 1000ms cubic-bezier(0.2, 0, 0.1, 1);
}
.ash-sector-card:hover .ash-sector-card__media img {
transform: scale(1.04);
}
.ash-sector-card__body {
padding: 40px 44px 52px;
flex: 1;
}
.ash-sector-card__body h3 {
font-family: var(--ash-serif);
font-weight: 400;
font-size: 26px;
line-height: 1.18;
margin: 0 0 16px;
letter-spacing: -0.005em;
color: var(--ash-ink);
}
.ash-sector-card__body p {
font-size: 15px;
line-height: 1.72;
color: var(--ash-ink-soft);
margin: 0;
}
.ash-sector-card__body p em {
font-style: italic;
color: var(--ash-ink);
}
/* ==========================================================================
PEOPLE / ATTORNEY BIOS
========================================================================== */
.ash-people {
padding: var(--ash-section-v) 0;
border-bottom: 1px solid var(--ash-rule);
}
.ash-bio {
display: grid;
grid-template-columns: 320px 1fr;
gap: 72px;
align-items: start;
padding: 0 0 72px;
}
.ash-bio__rule {
height: 1px;
background: var(--ash-rule);
margin: 72px 0;
}
.ash-bio__photo {
position: relative;
}
.ash-bio__photo img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
filter: saturate(0.78) contrast(1.02);
}
.ash-bio__content {
padding-top: 4px;
}
.ash-bio__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--ash-rule);
margin-bottom: 28px;
}
.ash-bio__name {
font-family: var(--ash-serif);
font-weight: 400;
font-size: clamp(26px, 2.8vw, 38px);
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0 0 8px;
color: var(--ash-ink);
}
.ash-bio__title {
font-size: 13px;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--ash-brass);
margin: 0;
text-transform: uppercase;
}
.ash-bio__contact {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
align-items: flex-end;
}
.ash-bio__contact-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 400;
color: var(--ash-ink-soft);
border-bottom: 1px solid var(--ash-rule);
padding-bottom: 2px;
transition: color 220ms ease, border-color 220ms ease;
white-space: nowrap;
}
.ash-bio__contact-link svg { flex-shrink: 0; color: var(--ash-brass); }
.ash-bio__contact-link:hover {
color: var(--ash-brass);
border-bottom-color: var(--ash-brass);
}
.ash-bio__narrative p {
font-size: 17px;
line-height: 1.72;
color: var(--ash-ink-soft);
margin: 0 0 32px;
max-width: 68ch;
}
.ash-bio__sections {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
border-top: 1px solid var(--ash-rule);
padding-top: 32px;
}
.ash-bio__section h4 {
font-family: var(--ash-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ash-ink-mute);
margin: 0 0 16px;
}
.ash-bio__list {
display: flex;
flex-direction: column;
gap: 10px;
}
.ash-bio__list li {
font-size: 14px;
line-height: 1.55;
color: var(--ash-ink-soft);
padding-left: 16px;
position: relative;
}
.ash-bio__list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 1px;
background: var(--ash-brass);
}
.ash-bio__list li em {
font-style: italic;
color: var(--ash-ink);
}
/* ==========================================================================
REPRESENTATIVE MATTERS
========================================================================== */
.ash-matters {
padding: var(--ash-section-v) 0;
background: var(--ash-navy);
color: var(--ash-bone-soft);
}
.ash-matters .ash-section-head { margin-bottom: 80px; }
.ash-matters .ash-h2 { color: var(--ash-bone-soft); }
.ash-matters .ash-eyebrow {
color: var(--ash-brass-light);
}
.ash-matters .ash-eyebrow::before { background: var(--ash-brass-light); }
.ash-matters .ash-section-lede { color: rgba(250, 247, 242, 0.65); }
.ash-matters__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(205, 195, 179, 0.14);
}
.ash-matters__group {
background: var(--ash-navy);
padding: 48px 44px 56px;
border-top: 2px solid var(--ash-brass);
}
.ash-matters__cat {
font-family: var(--ash-serif);
font-weight: 300;
font-size: 24px;
letter-spacing: -0.005em;
color: var(--ash-bone-soft);
margin: 0 0 32px;
}
.ash-matters__list {
display: flex;
flex-direction: column;
gap: 28px;
}
.ash-matters__list li {
font-size: 14px;
line-height: 1.6;
color: rgba(250, 247, 242, 0.68);
border-bottom: 1px solid rgba(205, 195, 179, 0.14);
padding-bottom: 28px;
}
.ash-matters__list li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.ash-matters__type {
display: block;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ash-brass-light);
margin-bottom: 8px;
}
/* ==========================================================================
INSIGHTS
========================================================================== */
.ash-insights {
padding: var(--ash-section-v) 0;
border-bottom: 1px solid var(--ash-rule);
}
.ash-insights__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}
.ash-insight-card {
display: flex;
flex-direction: column;
cursor: pointer;
}
.ash-insight-card__media {
aspect-ratio: 16 / 10;
overflow: hidden;
margin-bottom: 24px;
flex-shrink: 0;
}
.ash-insight-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.7);
transition: transform 900ms cubic-bezier(0.2, 0, 0.1, 1);
}
.ash-insight-card:hover .ash-insight-card__media img {
transform: scale(1.04);
}
.ash-insight-card__body {
display: flex;
flex-direction: column;
flex: 1;
}
.ash-insight-card__meta {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.ash-insight-card__meta .ash-eyebrow {
margin: 0;
}
.ash-insight-card__meta span:last-child {
font-size: 12px;
color: var(--ash-ink-mute);
letter-spacing: 0.1em;
}
.ash-insight-card__title {
font-family: var(--ash-serif);
font-weight: 400;
font-size: 22px;
line-height: 1.25;
margin: 0 0 14px;
letter-spacing: -0.004em;
color: var(--ash-ink);
}
.ash-insight-card__lede {
font-size: 14px;
line-height: 1.68;
color: var(--ash-ink-soft);
margin: 0 0 20px;
flex: 1;
}
.ash-insight-card .ash-link-arrow {
margin-top: auto;
align-self: flex-start;
}
/* ==========================================================================
FAQ
========================================================================== */
.ash-faq {
padding: var(--ash-section-v) 0;
background: var(--ash-bone-soft);
border-top: 1px solid var(--ash-rule);
border-bottom: 1px solid var(--ash-rule);
}
.ash-faq__inner {
display: grid;
grid-template-columns: 320px 1fr;
gap: 96px;
align-items: start;
}
.ash-faq__intro .ash-h2 {
font-size: clamp(28px, 3vw, 44px);
}
.ash-faq__intro p {
font-size: 16px;
line-height: 1.65;
color: var(--ash-ink-soft);
margin: 0;
}
.ash-faq__list {
border-top: 1px solid var(--ash-rule);
}
.ash-faq__item {
border-bottom: 1px solid var(--ash-rule);
}
.ash-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
padding: 24px 0;
font-family: var(--ash-serif);
font-weight: 400;
font-size: 20px;
line-height: 1.3;
text-align: left;
color: var(--ash-ink);
transition: color 220ms ease;
}
.ash-faq__q:hover { color: var(--ash-brass); }
.ash-faq__icon {
flex-shrink: 0;
color: var(--ash-brass);
transition: transform 300ms var(--ash-ease);
}
.ash-faq__icon-v {
transition: transform 300ms var(--ash-ease), opacity 300ms ease;
}
.ash-faq__item.is-open .ash-faq__icon {
transform: rotate(45deg);
}
.ash-faq__a {
padding: 0 40px 28px 0;
}
.ash-faq__a p {
font-size: 16px;
line-height: 1.72;
color: var(--ash-ink-soft);
margin: 0;
max-width: 68ch;
}
/* ==========================================================================
CONTACT
========================================================================== */
.ash-contact {
padding: var(--ash-section-v) 0;
border-bottom: 1px solid var(--ash-rule);
}
.ash-contact__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 96px;
align-items: start;
}
.ash-contact__lede {
font-size: 17px;
line-height: 1.68;
color: var(--ash-ink-soft);
margin: 0 0 40px;
max-width: 50ch;
}
.ash-contact__partners {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--ash-rule);
border: 1px solid var(--ash-rule);
margin-bottom: 40px;
}
.ash-contact__partner {
background: var(--ash-bone);
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ash-contact__partner-name {
font-family: var(--ash-serif);
font-size: 18px;
font-weight: 400;
color: var(--ash-ink);
margin-bottom: 2px;
}
.ash-contact__partner-area {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ash-brass);
margin-bottom: 10px;
display: block;
}
.ash-contact__partner a {
font-size: 13px;
color: var(--ash-ink-soft);
transition: color 220ms ease;
word-break: break-all;
}
.ash-contact__partner a:hover { color: var(--ash-brass); }
.ash-contact__address {
font-size: 15px;
line-height: 1.7;
color: var(--ash-ink-soft);
border-top: 1px solid var(--ash-rule);
padding-top: 24px;
}
.ash-contact__address strong {
display: block;
font-family: var(--ash-serif);
font-size: 18px;
font-weight: 400;
color: var(--ash-ink);
margin-bottom: 6px;
}
.ash-contact__address a { color: var(--ash-brass); }
/* form */
.ash-contact__form-title {
font-family: var(--ash-serif);
font-weight: 300;
font-size: 32px;
letter-spacing: -0.01em;
color: var(--ash-ink);
margin: 0 0 12px;
}
.ash-contact__form-note {
font-size: 14px;
color: var(--ash-ink-soft);
margin: 0 0 32px;
max-width: 50ch;
line-height: 1.6;
}
.ash-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.ash-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.ash-form__group {
display: flex;
flex-direction: column;
gap: 8px;
}
.ash-form__group label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ash-ink-mute);
}
.ash-form__group input,
.ash-form__group select,
.ash-form__group textarea {
font-family: var(--ash-sans);
font-size: 15px;
color: var(--ash-ink);
background: var(--ash-bone);
border: 1px solid var(--ash-rule);
padding: 12px 14px;
transition: border-color 220ms ease, background 220ms ease;
outline: none;
width: 100%;
-webkit-appearance: none;
appearance: none;
}
.ash-form__group input::placeholder,
.ash-form__group textarea::placeholder {
color: var(--ash-ink-faint);
}
.ash-form__group input:focus,
.ash-form__group select:focus,
.ash-form__group textarea:focus {
border-color: var(--ash-brass);
background: var(--ash-bone-soft);
outline: none;
}
.ash-form__group select {
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.ash-form__group textarea { resize: vertical; }
.ash-form .ash-btn--primary { align-self: flex-start; }
/* ==========================================================================
FOOTER
========================================================================== */
.ash-footer {
background: var(--ash-navy);
color: rgba(250, 247, 242, 0.72);
padding: 96px 0 0;
}
.ash-footer__top {
display: grid;
grid-template-columns: 300px 1fr;
gap: 80px;
padding-bottom: 64px;
border-bottom: 1px solid rgba(205, 195, 179, 0.14);
margin-bottom: 40px;
}
.ash-footer__logo {
display: block;
font-family: var(--ash-serif);
font-size: 22px;
font-weight: 300;
color: var(--ash-bone-soft);
margin-bottom: 28px;
letter-spacing: 0.01em;
}
.ash-footer__address {
font-size: 14px;
line-height: 1.8;
color: rgba(250, 247, 242, 0.6);
}
.ash-footer__address a { color: var(--ash-brass-light); }
.ash-footer__address a:hover { color: var(--ash-bone-soft); }
.ash-footer__cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}
.ash-footer__col-head {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ash-bone-soft);
margin: 0 0 20px;
}
.ash-footer__col ul {
display: flex;
flex-direction: column;
gap: 10px;
}
.ash-footer__col li {
font-size: 14px;
line-height: 1.5;
}
.ash-footer__col a {
color: rgba(250, 247, 242, 0.6);
transition: color 220ms ease;
}
.ash-footer__col a:hover { color: var(--ash-brass-light); }
.ash-footer__disclaimer {
padding: 32px 0;
border-top: 1px solid rgba(205, 195, 179, 0.1);
margin-top: 16px;
}
.ash-footer__disclaimer p {
font-size: 12px;
line-height: 1.7;
color: rgba(250, 247, 242, 0.38);
margin: 0;
max-width: 100ch;
}
.ash-footer__disclaimer strong {
font-weight: 500;
color: rgba(250, 247, 242, 0.5);
}
.ash-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0 40px;
gap: 16px;
flex-wrap: wrap;
font-size: 12px;
letter-spacing: 0.12em;
color: rgba(250, 247, 242, 0.32);
}
.ash-footer__top-link {
transition: color 220ms ease;
}
.ash-footer__top-link:hover { color: var(--ash-brass-light); }
/* ==========================================================================
RESPONSIVE — TABLET (1024px)
========================================================================== */
@media (max-width: 1100px) {
:root { --ash-section-v: 96px; }
.ash-container { padding: 0 40px; }
.ash-nav__inner { padding: 20px 40px; }
.ash-nav__links { display: none; }
.ash-nav__menu-btn { display: inline-flex; }
.ash-hero { padding: 0 40px 88px; }
.ash-hero__foot { left: 40px; right: 40px; }
.ash-statement__inner {
grid-template-columns: 220px 1fr;
gap: 56px;
}
.ash-practice__item { padding: 36px 36px 44px; }
.ash-sectors__grid { grid-template-columns: 1fr; }
.ash-bio {
grid-template-columns: 260px 1fr;
gap: 48px;
}
.ash-bio__sections {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.ash-bio__header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.ash-bio__contact { align-items: flex-start; }
.ash-matters__grid { grid-template-columns: 1fr; gap: 1px; }
.ash-matters__group { padding: 40px 40px 48px; }
.ash-insights__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.ash-faq__inner {
grid-template-columns: 240px 1fr;
gap: 56px;
}
.ash-contact__inner {
grid-template-columns: 1fr;
gap: 64px;
}
.ash-contact__partners { grid-template-columns: 1fr 1fr; }
.ash-footer__top {
grid-template-columns: 1fr;
gap: 48px;
}
.ash-footer__cols { grid-template-columns: 1fr 1fr 1fr; }
}
/* ==========================================================================
RESPONSIVE — MOBILE (640px)
========================================================================== */
@media (max-width: 640px) {
:root { --ash-section-v: 72px; }
.ash-container { padding: 0 22px; }
.ash-nav__inner { padding: 18px 22px; }
.ash-nav__logo-name { font-size: 16px; }
.ash-hero { min-height: 100svh; padding: 0 22px 80px; }
.ash-hero__foot {
left: 22px; right: 22px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
bottom: 24px;
}
.ash-hero__foot-rule { width: 28px; height: 1px; display: block; }
.ash-statement__inner { grid-template-columns: 1fr; gap: 40px; }
.ash-ledger--vert .ash-ledger__row {
grid-template-columns: 100px 1fr;
}
.ash-practice__grid { grid-template-columns: 1fr; }
.ash-practice__item { padding: 32px 24px 36px; }
.ash-bio {
grid-template-columns: 1fr;
gap: 32px;
}
.ash-bio__photo img { aspect-ratio: 4 / 3; }
.ash-bio__sections { grid-template-columns: 1fr; gap: 24px; }
.ash-bio__rule { margin: 48px 0; }
.ash-sector-card__body { padding: 28px 24px 36px; }
.ash-matters__grid { grid-template-columns: 1fr; }
.ash-matters__group { padding: 32px 24px 40px; }
.ash-insights__grid { grid-template-columns: 1fr; gap: 48px; }
.ash-faq__inner { grid-template-columns: 1fr; gap: 40px; }
.ash-faq__q { font-size: 17px; }
.ash-contact__partners { grid-template-columns: 1fr; }
.ash-form__row { grid-template-columns: 1fr; }
.ash-contact__inner { gap: 48px; }
.ash-footer__top { grid-template-columns: 1fr; gap: 40px; }
.ash-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
.ash-footer__bottom { flex-direction: column; align-items: flex-start; }
}