/* ==========================================================================
DAA Legal - design system
Hand-written CSS. No framework, no build step.
Editorial, quiet, warm: ivory ground, ink text, brass hairlines, a deep
the client's brand navy for dark surfaces, buttons and italic emphasis;
bordeaux kept only for form errors.
========================================================================== */
/* ----- Self-hosted fonts (Google Fonts variable files, SIL OFL; latin subset) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/fonts/jost.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ----- Tokens ----------------------------------------------------------- */
:root {
--bg: #fbf9f4; /* ivory ground */
--bg-2: #f3efe6; /* secondary / muted panels */
--bg-3: #ede7da; /* accent panel */
--card: #fefdfb;
--fg: #2b2622; /* ink */
--fg-80: rgba(43, 38, 34, .8);
--fg-70: rgba(43, 38, 34, .7);
--fg-25: rgba(43, 38, 34, .25);
--muted: #5f574d; /* secondary text (≈7:1 on ivory) */
--border: #e4ddd0;
--brass: #c9a562; /* hairlines, rules (logo-gold family) */
--brass-deep: #a88b55;
--brass-text: #856226; /* gold as TEXT (5.2:1 on ivory, 4.6:1 on tinted panels) */
--bordeaux: #7d3c3c; /* form errors only */
--navy: #0b3047; /* brand navy: dark sections, buttons, emphasis */
--navy-deep: #082538;
--gold: #c89042; /* brand gold from the logo (stars, accents) */
--gold-light: #e6c582; /* gold on navy */
--gold-deep: #a8732c; /* gold for large numerals */
--gold-grad: linear-gradient(90deg, #bf822b 0%, #e9bd80 40%, #f2e6d8 52%, #c89042 100%);
--ring: #b39c6e;
--whatsapp: #25d366;
--font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
--font-sans: "Jost", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--container: 1440px;
--gutter: 1.5rem;
--section: 7rem;
--radius: .125rem;
--ease-out: cubic-bezier(.22, 1, .36, 1);
--t-fast: .35s;
--t-med: .5s;
--t-slow: 1s;
--header-h: 5.25rem;
}
@media (min-width: 768px) {
:root { --gutter: 3rem; --section: 9rem; --header-h: 5.75rem; }
}
/* ----- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); overflow-x: hidden; overflow-x: clip; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-weight: 400;
font-size: 1rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
overflow-x: clip;
}
body.no-scroll { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
::selection { background: var(--bg-3); color: var(--fg); }
:focus-visible { outline: 1px solid var(--ring); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ----- Skip link -------------------------------------------------------- */
.skip-link {
position: absolute; top: -100px; left: 1rem; z-index: 200;
padding: .75rem 1.25rem; background: var(--fg); color: var(--bg);
font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }
/* ----- Type utilities --------------------------------------------------- */
.eyebrow {
font-family: var(--font-sans);
font-size: .6875rem;
font-weight: 400;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--muted);
}
.eyebrow--light { color: rgba(251, 249, 244, .75); }
.section-head > .eyebrow::before, .hero__content .eyebrow::before, .page-hero .eyebrow::before, .cta-band .eyebrow::before { content: ""; display: inline-block; width: 1.4rem; height: 1px; margin-right: .75rem; vertical-align: middle; background: var(--gold); }
.display { font-family: var(--font-display); font-weight: 400; }
.italic { font-style: italic; }
.em { font-style: italic; color: var(--navy); }
.em--block { display: block; }
h1, .h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 4.6rem); line-height: 1.05; letter-spacing: -.005em; }
h2, .h2 { font-size: clamp(2.1rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3, .h3 { font-size: 1.5rem; line-height: 1.25; }
h4, .h4 { font-size: 1.25rem; line-height: 1.3; }
.lead { font-size: 1.1875rem; line-height: 1.7; font-weight: 300; color: var(--fg); }
.body { font-size: 1.0625rem; line-height: 1.75; color: var(--muted); }
.small { font-size: .875rem; line-height: 1.65; color: var(--muted); }
.meta { font-size: .78rem; letter-spacing: .06em; color: var(--muted); }
.muted { color: var(--muted); }
.rule-line::after {
content: ""; display: block; width: 3rem; height: 2px;
background: var(--gold-grad); margin-top: 1.25rem;
transform-origin: left; transition: transform 1.1s var(--ease-out) .35s;
}
.js .reveal .rule-line::after, .js .reveal.rule-line::after { transform: scaleX(0); }
.js .reveal.is-visible .rule-line::after, .js .reveal.is-visible.rule-line::after { transform: scaleX(1); }
.rule-line--center::after { margin-left: auto; margin-right: auto; }
.prose p + p { margin-top: 1.5rem; }
.prose { max-width: 42rem; }
/* ----- Layout ----------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: 960px; }
.container--text { max-width: 760px; }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section--sm { padding-top: calc(var(--section) * .6); padding-bottom: calc(var(--section) * .6); }
.section--tinted { background: rgba(243, 239, 230, .55); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section--dark { background: var(--navy); color: var(--bg); }
.section--dark .eyebrow { color: var(--gold-light); }
.section--dark .muted, .section--dark .body, .section--dark .small { color: rgba(251, 249, 244, .7); }
.section--dark .rule-line::after { background: var(--brass); }
.section--dark .card p, .section--dark .post-card p, .section--dark .meta { color: rgba(251, 249, 244, .65); }
.section--dark .tag { color: var(--gold-light); }
.section--dark .link-arrow { color: var(--bg); }
.section--dark .post-card:hover h3 { color: var(--gold-light); }
.section--dark .media { background: rgba(255, 255, 255, .06); padding: 1rem; }
.section--dark .section-head .body { max-width: 34rem; }
.grid { display: grid; gap: 2.5rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }
.grid--split { grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 640px) {
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: .9fr 1.1fr; gap: 6rem; }
.grid--split-rev { grid-template-columns: 1.1fr .9fr; }
}
.section-head { max-width: 40rem; }
.section-head h2, .section-head .h2 { margin-top: 1.5rem; }
.section-head--row { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) {
.section-head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; max-width: none; }
.section-head--row > .section-head { max-width: 36rem; }
}
.section-body { margin-top: 4rem; }
.stack > * + * { margin-top: 1.5rem; }
.stack--lg > * + * { margin-top: 2.5rem; }
/* ----- Buttons & links -------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; gap: .75rem;
padding: 1rem 2.25rem;
font-family: var(--font-sans);
font-size: .72rem; font-weight: 400;
letter-spacing: .22em; text-transform: uppercase;
line-height: 1;
border: 1px solid transparent;
border-radius: 0;
transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
white-space: nowrap;
}
.btn svg { width: 1rem; height: 1rem; transition: transform var(--t-med) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--navy); color: var(--bg); border-color: var(--navy); }
.btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn--outline { position: relative; z-index: 0; overflow: hidden; background: transparent; color: var(--fg); border-color: var(--fg-25); }
.btn--outline::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); }
.btn--outline:hover { color: var(--bg); border-color: var(--navy); }
.btn--outline:hover::before { transform: scaleX(1); }
.btn--light { background: var(--bg); color: var(--navy); border-color: var(--bg); }
.btn--light:hover { opacity: .88; }
.btn--outline-light { position: relative; z-index: 0; overflow: hidden; background: transparent; color: var(--bg); border-color: rgba(230,197,130,.55); }
.btn--outline-light::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); }
.btn--outline-light:hover { color: var(--navy); border-color: var(--bg); }
.btn--outline-light:hover::before { transform: scaleX(1); }
.btn--sm { padding: .7rem 1.5rem; font-size: .68rem; }
.btn--whatsapp { background: var(--navy); color: var(--bg); border-color: var(--navy); }
.btn--whatsapp .btn__wa { display: inline-flex; color: var(--whatsapp); }
.btn--whatsapp .btn__wa svg { width: 1.05rem; height: 1.05rem; }
.btn--whatsapp:hover { background: var(--navy-deep); }
.btn--whatsapp:hover .btn__wa svg { transform: none; }
.btn--outline-light .btn__wa { display: inline-flex; color: var(--whatsapp); }
.btn--outline-light .btn__wa svg { width: 1rem; height: 1rem; }
.btn--outline-light:hover .btn__wa svg { transform: none; }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.link-underline { position: relative; display: inline-block; }
.link-underline::after {
content: ""; position: absolute; left: 0; bottom: -2px;
width: 100%; height: 1px; background: var(--gold);
transform: scaleX(0); transform-origin: left;
transition: transform .45s var(--ease-out);
}
.link-underline:hover::after, .link-underline:focus-visible::after, .link-underline.is-active::after { transform: scaleX(1); }
.link-arrow {
display: inline-flex; align-items: center; gap: .75rem; padding: .4rem 0;
font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg);
}
.link-arrow svg { width: 1rem; height: 1rem; transition: transform var(--t-med) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-plain { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(200, 144, 66, .7); text-underline-offset: .2em; transition: color var(--t-fast), text-decoration-color var(--t-fast); }
.link-plain:hover { text-decoration-color: currentColor; }
.link-plain.link-underline { text-decoration: none; }
.link-plain:hover { color: var(--navy); }
/* ----- Header ----------------------------------------------------------- */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 100;
background: rgba(11, 48, 71, .92); color: var(--bg);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(230, 197, 130, .2);
transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s cubic-bezier(.4,0,.2,1), background-color .5s cubic-bezier(.4,0,.2,1), border-color .5s cubic-bezier(.4,0,.2,1);
will-change: transform, opacity;
}
.site-header.is-scrolled {
background: rgba(11, 48, 71, .96);
border-bottom-color: rgba(230, 197, 130, .3);
}
.site-header.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.site-header--solid { background: rgba(11, 48, 71, .96); border-bottom-color: rgba(230, 197, 130, .3); }
.site-header__inner {
display: flex; align-items: center; justify-content: space-between;
max-width: var(--container); margin: 0 auto;
padding: 1.25rem var(--gutter);
}
.brand { display: flex; align-items: center; gap: .85rem; line-height: 1; }
.brand__logo { width: 2.35rem; flex: 0 0 auto; }
.brand__logo img { width: 100%; height: auto; }
.brand__text { display: flex; flex-direction: column; }
@media (min-width: 768px) { .brand__logo { width: 2.7rem; } }
.brand__mark {
font-family: var(--font-display);
font-size: 1.5rem; letter-spacing: .18em; color: var(--fg); font-weight: 500;
}
.brand__sub { margin-top: .55rem; font-size: .7rem; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* Meghna, 28 Sep: ADVOCATES sits the full width of DAA LEGAL above it. The
letters are laid out as a row that spreads to the box, which holds at every
size; the word stays whole for a screen reader. */
.brand__sub, .logo-panel__sub { display: flex; justify-content: space-between; }
.brand__sub > i, .logo-panel__sub > i { font-style: normal; }
/* the tagline is wider than the wordmark above it, so on narrow screens the
tracking tightens rather than letting it wrap onto two lines */
@media (max-width: 560px) { .brand__sub { font-size: .66rem; } }
@media (min-width: 768px) { .brand__mark { font-size: 1.7rem; } }
/* Header lock-up: wordmark in the logo's own gold gradient on the navy glass */
.site-header .brand__mark { color: var(--gold-light); background: linear-gradient(100deg, #eabf7c 0%, #f2e6d8 42%, #c89042 68%, #e9bd80 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.site-header .brand__sub { color: var(--gold-light); }
.footer-brand .brand__mark { color: var(--gold-deep); background: linear-gradient(100deg, #a8732c, #c89042 50%, #a8732c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav { display: none; align-items: center; gap: 2.25rem; }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav__link {
padding: .6rem 0;
font-size: .8rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
color: rgba(251, 249, 244, .82); transition: color var(--t-fast);
}
.nav__link { position: relative; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.nav__link:hover, .nav__link.is-active { color: var(--bg); }
.nav__link.is-active::after, .nav__link:hover::after { transform: scaleX(1); }
.nav__cta {
border: 1px solid rgba(230, 197, 130, .55); padding: .7rem 1.5rem;
font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bg);
transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}
.nav__cta:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy); }
.nav-toggle {
color: var(--bg);
display: inline-flex; align-items: center; justify-content: center;
width: 2.75rem; height: 2.75rem; margin-right: -.5rem;
}
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }
/* Mobile menu */
.mobile-menu {
position: fixed; inset: 0; z-index: 99;
background: var(--bg);
display: flex; flex-direction: column;
padding: calc(var(--header-h) + 1.25rem) var(--gutter) 2.5rem;
opacity: 0; visibility: hidden; transform: translateY(-1rem);
transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s var(--t-med);
overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-menu__links { display: flex; flex-direction: column; gap: .25rem; border-top: 1px solid var(--border); }
.mobile-menu__links a {
display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--border);
font-family: var(--font-display); font-size: 1.85rem; line-height: 1.1;
}
.mobile-menu__links a.is-active { color: var(--navy); }
.mobile-menu__footer { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu__footer .btn { justify-content: center; }
.mobile-menu__meta { font-size: .8rem; color: var(--muted); line-height: 1.7; }
/* ----- Hero ------------------------------------------------------------- */
.hero {
position: relative; overflow: hidden;
min-height: 100svh;
display: flex; flex-direction: column; justify-content: flex-end;
}
.hero--short { min-height: 72svh; }
.hero--compact { min-height: 0; padding-top: calc(var(--header-h) + 5rem); padding-bottom: 4rem; }
.hero__media { position: absolute; inset: 0; transform: scale(1.02); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(251,249,244,.25), rgba(251,249,244,.2) 45%, rgba(251,249,244,.95));
}
.hero__media::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
background: linear-gradient(to top, var(--bg), rgba(251,249,244,.8) 40%, transparent);
}
@media (min-width: 768px) {
.hero__media::before { background: linear-gradient(to bottom, rgba(251,249,244,.2), rgba(251,249,244,.2) 45%, rgba(251,249,244,.85)); }
.hero__media::after { height: 48%; background: linear-gradient(to top, var(--bg), rgba(251,249,244,.55) 50%, transparent); }
}
.hero--dark .hero__media::before { background: linear-gradient(to bottom, rgba(11,48,71,.35), rgba(11,48,71,.25) 45%, rgba(11,48,71,.85)); }
.hero--dark .hero__media::after { background: linear-gradient(to top, rgba(11,48,71,.95), rgba(11,48,71,.55) 50%, transparent); }
/* the navy the photography sits on: stated explicitly so the colour behind
the heading is real rather than implied by whichever slide is showing */
.hero--dark { color: var(--bg); background-color: var(--navy); }
.hero--dark .eyebrow { color: rgba(251,249,244,.75); }
.hero--dark .hero__text { color: rgba(251,249,244,.8); }
.hero--dark .em { color: #e6c582; }
.hero__content {
position: relative; z-index: 2;
width: 100%; max-width: var(--container); margin: 0 auto;
padding: 0 var(--gutter) 3.5rem;
}
@media (min-width: 768px) { .hero__content { padding-bottom: 7rem; } }
.hero__content .eyebrow { color: var(--fg-70); }
.hero__content h1 { margin-top: 1.25rem; max-width: 56rem; }
@media (min-width: 640px) { .hero__content h1 { margin-top: 1.75rem; } }
.hero__actions {
margin-top: 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;
}
@media (min-width: 640px) { .hero__actions { margin-top: 2.5rem; flex-direction: row; align-items: center; } }
.hero__text { max-width: 22rem; font-size: .95rem; line-height: 1.65; color: var(--fg-80); }
/* Page hero (inner pages) - text only, no photo */
.page-hero { padding-top: calc(var(--header-h) + 4rem); padding-bottom: 4.5rem; }
@media (min-width: 768px) { .page-hero { padding-top: calc(var(--header-h) + 6rem); padding-bottom: 6rem; } }
.page-hero h1 { margin-top: 1.25rem; max-width: 46rem; font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); }
.page-hero .lead { margin-top: 1.75rem; max-width: 38rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.breadcrumb a { display: inline-block; padding: .5rem 0; }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb li + li::before { content: "·"; margin-right: .5rem; }
/* ----- Media / figure --------------------------------------------------- */
.media { overflow: hidden; background: var(--bg-2); border-radius: var(--radius); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--square { aspect-ratio: 1; }
a:hover .media img, .card:hover .media img { transform: scale(1.05); }
.media--offset { margin-top: 3rem; }
@media (min-width: 1024px) { .media--offset { margin-top: 5rem; } }
figure { margin: 0; }
figcaption { margin-top: .75rem; font-size: .75rem; letter-spacing: .06em; color: var(--muted); }
/* ----- Cards ------------------------------------------------------------ */
.card { display: block; }
.card h3 { margin-top: 1.5rem; transition: color var(--t-med) var(--ease-out); }
a.card:hover h3, .post-card:hover h3 { color: var(--navy); }
.card p { margin-top: .5rem; font-size: .9375rem; line-height: 1.65; color: var(--muted); }
.card .meta { margin-top: .5rem; }
.card--bordered { border: 1px solid var(--border); padding: 2rem; background: var(--card); transition: border-color var(--t-med), background-color var(--t-med); }
.card--bordered:hover { border-color: var(--gold); }
.card--bordered h3 { margin-top: 1rem; }
/* Phones: card grids become compact index rows (thumbnail + title + one line)
so six practice areas or three articles take a screen, not five. */
@media (max-width: 639px) {
.grid--3:has(> .card), .grid--3:has(> .post-card) { gap: 0; border-bottom: 1px solid var(--border); }
.section--dark .grid--3:has(> .post-card) { border-bottom-color: rgba(251, 249, 244, .15); }
.grid--3 > .card:not(.card--bordered), .grid--3 > .post-card {
display: grid; grid-template-columns: 5.75rem 1fr; column-gap: 1.1rem; align-items: center;
padding: 1.1rem 0; border-top: 1px solid var(--border);
}
.section--dark .grid--3 > .post-card { border-top-color: rgba(251, 249, 244, .15); }
.grid--3 > .card:not(.card--bordered) .media, .grid--3 > .post-card .media { aspect-ratio: 1; grid-row: 1 / span 4; padding: 0; }
.grid--3 > .card:not(.card--bordered) h3, .grid--3 > .post-card h3 { margin-top: 0; font-size: 1.15rem; line-height: 1.25; }
.grid--3 > .card:not(.card--bordered) p, .grid--3 > .post-card p { margin-top: .35rem; font-size: .84rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grid--3 > .post-card .tag { margin-top: 0; }
.grid--3 > .post-card .meta { margin-top: .25rem; }
.grid--3 > .card--bordered { margin-top: 1.5rem; }
.section-body { margin-top: 2.5rem; }
}
/* Practice-area card: number + title + list */
.practice-card { position: relative; padding: 2.25rem 0; border-top: 1px solid var(--border); display: grid; gap: 1rem; }
.practice-card__num { font-family: var(--font-display); font-size: 1rem; color: var(--brass-text); letter-spacing: .1em; }
.practice-card h3 { font-size: 1.6rem; }
.practice-card p { color: var(--muted); font-size: .95rem; line-height: 1.65; }
.practice-card .link-arrow { margin-top: .5rem; }
.practice-card .topic-links { display: grid; gap: .5rem; }
.practice-card .topic-links li { position: relative; padding-left: 1.4rem; font-size: .95rem; line-height: 1.5; }
.practice-card .topic-links li::before { content: ""; position: absolute; left: 0; top: .75rem; width: .8rem; height: 1px; background: var(--brass); }
.practice-card .topic-links a { color: var(--fg); }
.practice-card .topic-links a:hover { color: var(--navy); }
.practice-card--cta { background: var(--card); border: 1px solid var(--border); padding: 2.25rem; align-self: start; }
.practice-card--cta::after { display: none; }
.practice-card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--brass); transition: width .8s var(--ease-out); }
.practice-card:hover::after { width: 100%; }
@media (min-width: 768px) {
.practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 4rem; }
}
@media (min-width: 1200px) {
.practice-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Other practice areas (practice pages) */
.area-links { display: grid; border-top: 1px solid var(--border); }
@media (min-width: 768px) { .area-links { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
@media (min-width: 1200px) { .area-links { grid-template-columns: repeat(4, 1fr); } }
.area-links a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); transition: color var(--t-fast); }
.area-links a span { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.area-links a small { grid-column: 1; margin-top: .35rem; font-size: .8rem; color: var(--muted); }
.area-links a svg { grid-column: 2; grid-row: 1 / span 2; width: 1rem; height: 1rem; transition: transform var(--t-med) var(--ease-out); }
.area-links a:hover { color: var(--navy); }
.area-links a:hover svg { transform: translateX(4px); }
/* Feature / value list (icon + title + text) */
.feature { display: grid; gap: 1rem; }
.feature__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--border); color: var(--brass-text); }
.feature__icon svg { width: 1.15rem; height: 1.15rem; }
.feature h3 { font-size: 1.35rem; }
.feature p { font-size: .95rem; line-height: 1.65; color: var(--muted); }
/* Numbered steps (process) */
.steps { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--border); }
.step { counter-increment: step; display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1rem; padding: 2rem 0; border-bottom: 1px solid var(--border); }
.step::before { content: "0" counter(step); grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-display); font-size: 1.5rem; color: var(--brass-text); line-height: 1; }
.step h3 { grid-column: 2; font-size: 1.4rem; }
.step p { grid-column: 2; margin-top: .5rem; font-size: .95rem; color: var(--muted); line-height: 1.7; }
@media (min-width: 768px) {
.step { grid-template-columns: 5rem 1fr 1.4fr; column-gap: 2rem; align-items: start; }
.step::before { grid-row: auto; }
.step p { grid-column: 3; margin-top: 0; }
}
/* Compact variant: image + list layouts keep the two-column form at every width */
.steps--compact .step { grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.5rem 0; }
.steps--compact .step::before { grid-row: 1 / span 2; }
.steps--compact .step h3 { grid-column: 2; font-size: 1.25rem; }
.steps--compact .step p { grid-column: 2; margin-top: .4rem; }
/* Stats */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: grid; align-content: start; }
.stat__num { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--gold-deep); background: linear-gradient(100deg, #a8732c, #d9a45a 55%, #a8732c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat__num small { font-size: 1.5rem; color: var(--brass-text); }
.stat__label { margin-top: .75rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
/* Check list */
.checklist { display: grid; gap: .9rem; }
.checklist li { position: relative; padding-left: 2rem; font-size: 1rem; line-height: 1.65; color: var(--fg-80); }
.checklist li::before { content: ""; position: absolute; left: 0; top: .75rem; width: 1.1rem; height: 1px; background: var(--gold); }
@media (min-width: 640px) { .checklist--2 { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
/* Team */
.person h3 { margin-top: 1.5rem; font-size: 1.5rem; }
.person__role { margin-top: .35rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); }
.person__bio { margin-top: 1rem; font-size: .95rem; line-height: 1.7; color: var(--muted); }
.person__meta { margin-top: 1rem; display: grid; gap: .35rem; font-size: .8rem; color: var(--muted); }
.person__meta strong { font-weight: 400; color: var(--fg); }
.person__links { margin-top: 1rem; display: flex; gap: 1rem; }
.person__links a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 0; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.person__links svg { width: .95rem; height: .95rem; }
/* ----- Quotes / testimonials ------------------------------------------- */
.quote { display: grid; gap: 1.5rem; }
.quote__text { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.4; font-style: italic; }
.quote__text::before { content: "“"; color: var(--brass); }
.quote__text::after { content: "”"; color: var(--brass); }
.quote__who { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.quote__who strong { font-weight: 400; color: var(--fg); display: block; margin-bottom: .25rem; }
.quote--lg .quote__text { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); }
/* Marquee (running testimonials strip) */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 2rem; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item { width: 22rem; flex: 0 0 auto; padding: 2rem; border: 1px solid var(--border); background: var(--card); display: grid; gap: 1.25rem; align-content: start; }
.marquee__item .quote__text { font-size: 1.25rem; line-height: 1.45; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; } .marquee { mask-image: none; -webkit-mask-image: none; } }
/* ----- Accordion (FAQ) ------------------------------------------------- */
.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__trigger {
width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
padding: 1.5rem 0; text-align: left;
font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3;
transition: color var(--t-fast);
}
.accordion__trigger:hover { color: var(--navy); }
.accordion__icon { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .2rem; position: relative; }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; background: currentColor; transition: transform var(--t-med) var(--ease-out); }
.accordion__icon::before { left: 0; right: 0; top: 50%; height: 1px; }
.accordion__icon::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease-out); }
.accordion__panel > div { overflow: hidden; }
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__content { padding: 0 3rem 1.75rem 0; font-size: 1rem; line-height: 1.75; color: var(--muted); max-width: 44rem; }
.accordion__content p + p { margin-top: 1rem; }
/* ----- CTA band --------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; color: var(--bg); }
.cta-band__media { position: absolute; inset: 0; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(11,48,71,.94), rgba(11,48,71,.74)); }
.cta-band__inner { position: relative; z-index: 1; }
.cta-band .eyebrow { color: var(--gold-light); }
.cta-band h2 { max-width: 34rem; margin-top: 1.5rem; }
.cta-band .lead { color: rgba(251,249,244,.75); max-width: 34rem; margin-top: 1.5rem; }
.cta-band__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
/* Simple CTA (no photo) */
.cta-simple { text-align: center; }
.cta-simple h2 { margin: 1.5rem auto 0; max-width: 34rem; }
.cta-simple .lead { margin: 1.5rem auto 0; max-width: 32rem; }
.cta-simple__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
/* ----- Forms ------------------------------------------------------------ */
.form { display: grid; gap: 1.75rem; }
.form__row { display: grid; gap: 1.75rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } }
.field { display: grid; gap: .5rem; }
.field label { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.field label .req { color: var(--bordeaux); }
.field input, .field select, .field textarea {
width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border);
padding: .75rem 0; font: inherit; font-weight: 300; font-size: 1rem; color: var(--fg);
border-radius: 0; outline: none; transition: border-color var(--t-fast);
-webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .25rem center; padding-right: 1.75rem; cursor: pointer; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(95,87,77,.7); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--fg); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: var(--bordeaux); }
.field__error { font-size: .78rem; color: var(--bordeaux); min-height: 0; }
.field__hint { font-size: .78rem; color: var(--muted); }
.field--file input { padding: .75rem 0; border-bottom: 1px dashed var(--border); font-size: .875rem; cursor: pointer; }
.field--file input::file-selector-button {
margin-right: 1rem; padding: .5rem 1rem; border: 1px solid var(--fg-25); background: transparent; color: var(--fg);
font: inherit; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
}
.check { display: flex; align-items: flex-start; gap: .75rem; font-size: .82rem; line-height: 1.55; color: var(--muted); }
.check input { margin: .2rem 0 0; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--navy); }
.check a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.check.has-error { color: var(--bordeaux); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.form__status { font-size: .875rem; line-height: 1.6; }
.form__status.is-error { color: var(--bordeaux); }
.form__status.is-success { color: var(--fg); }
.form__success { display: grid; gap: 1rem; padding: 2.5rem; border: 1px solid var(--gold); background: var(--card); }
.form__success h3 { font-size: 1.6rem; }
.form__success p { color: var(--muted); font-size: .95rem; }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }
/* ----- Contact details block ------------------------------------------- */
.contact-list { display: grid; gap: 2rem; }
/* The office details carry the section on their own now that the enquiry
form has gone, so they read across two columns on a wider screen. */
@media (min-width: 768px) { .contact-list--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; } }
@media (min-width: 1200px) { .contact-list--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact-list dt { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.contact-list dd { margin: .5rem 0 0; font-size: 1.05rem; line-height: 1.6; }
.contact-list dd a:not(.link-arrow):not(.btn) { display: inline-block; padding: .3rem 0; }
.contact-list dd a:hover { color: var(--navy); }
.map { border: 1px solid var(--border); background: var(--bg-2); aspect-ratio: 4 / 3; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(.95) sepia(.12); }
/* ----- Article / insights --------------------------------------------- */
.post-card { display: block; }
.post-card h3 { margin-top: 1.5rem; font-size: 1.5rem; line-height: 1.25; transition: color var(--t-med) var(--ease-out); }
.post-card .meta { margin-top: .75rem; }
.post-card p { margin-top: .75rem; font-size: .95rem; line-height: 1.7; color: var(--muted); }
.post-card .meta { font-size: .75rem; letter-spacing: .06em; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.filters button { min-height: 2.75rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding: .5rem .15rem; }
.filters button.is-active, .filters button:hover { color: var(--fg); }
.tag { display: inline-block; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); }
.article { padding-top: calc(var(--header-h) + 3rem); }
.article__head { max-width: 46rem; }
.article__head h1 { margin-top: 1.25rem; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.1; }
.article__meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .75rem; letter-spacing: .1em; color: var(--muted); }
.article__hero { margin-top: 3rem; }
.article__layout { margin-top: 4rem; display: grid; gap: 4rem; }
@media (min-width: 1024px) { .article__layout { grid-template-columns: 16rem 1fr; gap: 6rem; align-items: start; } .article__aside { position: sticky; top: calc(var(--header-h) + 2rem); } }
.toc { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.toc ol { display: grid; gap: .6rem; margin-top: 1rem; counter-reset: toc; }
.toc li { counter-increment: toc; font-size: .85rem; line-height: 1.5; }
.toc a { display: inline-block; padding: .35rem 0; }
.toc li::before { content: counter(toc, decimal-leading-zero); margin-right: .75rem; font-family: var(--font-display); color: var(--brass-text); }
.toc a { color: var(--muted); transition: color var(--t-fast); }
.toc a:hover, .toc a.is-active { color: var(--fg); }
.aside-box { margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--border); background: var(--card); display: grid; gap: .75rem; }
.aside-box h4, .aside-box__h { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; }
.aside-box p { font-size: .85rem; color: var(--muted); line-height: 1.6; }
.article-body { max-width: 44rem; font-size: 1.1rem; line-height: 1.8; color: var(--fg); }
/* Meghna, 27 and 28 Sep: running prose is justified, in the articles and in
every paragraph on the pages: the firm description, the practice areas, the
profiles. Hyphenation keeps the word spacing even. Headings, heroes, the
standing bands and small captions are left alone, and so is the phone, where
the column is too narrow to justify without opening rivers between words. */
.article-body p, .article-body li,
.section .prose p, .section .prose li,
.section p.body, .section p.lead,
.practice-card p, .area-block__body p, .person__meta li {
text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.hero p, .page-hero p, .cta-band p, .section-head p, p.small, p.eyebrow,
.marquee p, .note p, figure p {
text-align: left; hyphens: none; -webkit-hyphens: none;
}
@media (max-width: 599px) {
.article-body p, .article-body li,
.section .prose p, .section .prose li,
.section p.body, .section p.lead,
.practice-card p, .area-block__body p, .person__meta li {
text-align: left; hyphens: none; -webkit-hyphens: none;
}
}
.article-body > * + * { margin-top: 1.5rem; }
.article-body h2 { margin-top: 3.5rem; font-size: 1.9rem; line-height: 1.2; color: var(--fg); }
.article-body h3 { margin-top: 2.5rem; font-size: 1.4rem; color: var(--fg); }
.article-body ul, .article-body ol { padding-left: 1.25rem; display: grid; gap: .6rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li::marker { color: var(--brass-text); }
.article-body blockquote { margin: 2rem 0; padding-left: 1.5rem; border-left: 2px solid var(--gold); font-family: var(--font-display); font-size: 1.4rem; font-style: italic; line-height: 1.4; color: var(--fg); }
.article-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.article-body .note { padding: 1.25rem 1.5rem; border: 1px solid var(--border); background: var(--bg-2); font-size: .9rem; }
.article-body table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.article-body th, .article-body td { text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.article-body th { font-weight: 400; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.author { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; gap: 1.25rem; align-items: center; }
.author img { width: 4rem; height: 4rem; object-fit: cover; border-radius: 50%; }
.author strong { font-weight: 400; display: block; font-family: var(--font-display); font-size: 1.2rem; }
.author span { font-size: .8rem; color: var(--muted); }
/* Legal text pages */
.legal-text { max-width: 44rem; font-size: 1.02rem; line-height: 1.8; color: var(--fg); }
.legal-text > * + * { margin-top: 1.25rem; }
.legal-text h2 { margin-top: 3rem; font-size: 1.7rem; color: var(--fg); }
.legal-text h3 { margin-top: 2rem; font-size: 1.3rem; color: var(--fg); }
.legal-text ul, .legal-text ol { padding-left: 1.25rem; display: grid; gap: .5rem; }
.legal-text ul { list-style: disc; }
.legal-text ol { list-style: decimal; }
.legal-text a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
/* ----- Careers ---------------------------------------------------------- */
.job { border-top: 1px solid var(--border); padding: 2.5rem 0; display: grid; gap: 1.25rem; }
.job:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 900px) { .job { grid-template-columns: 1fr 1.5fr auto; gap: 3rem; align-items: start; } }
.job h3 { font-size: 1.6rem; }
.job__meta { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.job__body { font-size: .97rem; color: var(--muted); line-height: 1.7; }
.job__body ul { margin-top: 1rem; display: grid; gap: .5rem; padding-left: 1.1rem; list-style: disc; }
.job__body li::marker { color: var(--brass-text); }
/* ----- Footer ----------------------------------------------------------- */
.site-footer { position: relative; border-top: 1px solid var(--border); background: var(--bg); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--gold-grad); }
.site-footer__inner { padding-top: 5rem; padding-bottom: 2.5rem; }
.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; } }
.footer-brand .brand__mark { font-size: 1.6rem; }
.footer-brand p { margin-top: 1.25rem; max-width: 22rem; font-size: .875rem; line-height: 1.7; color: var(--muted); }
.footer-col h4, .footer-col__h { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.footer-col ul { margin-top: 1.25rem; display: grid; gap: .35rem; }
.footer-col a { display: inline-block; padding: .25rem 0; font-size: .95rem; color: var(--fg-80); transition: color var(--t-fast); }
.footer-col a:hover { color: var(--fg); }
.footer-col address { font-size: .9rem; line-height: 1.7; color: var(--fg-80); }
.social { display: flex; gap: .75rem; margin-top: 1.5rem; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border); color: var(--fg); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.social a:hover { border-color: var(--navy); background: var(--navy); color: var(--bg); }
.social svg { width: 1rem; height: 1rem; }
.footer-disclaimer { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); font-size: .78rem; line-height: 1.7; color: var(--muted); max-width: 60rem; }
.footer-bottom { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; font-size: .72rem; letter-spacing: .08em; color: var(--muted); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a { display: inline-block; padding: .4rem 0; }
.footer-bottom a:hover { color: var(--fg); }
/* ----- Floating WhatsApp (ink circle, brass glyph, tooltip on hover) ---- */
.wa-float {
position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
display: flex; align-items: center; justify-content: center;
width: 3rem; height: 3rem; border-radius: 50%;
background: var(--navy); color: var(--whatsapp);
border: 1px solid rgba(228,221,208,.8);
box-shadow: 0 24px 60px -32px rgba(62,47,35,.28);
transition: transform .3s, border-color .3s, box-shadow .3s;
}
.wa-float svg { width: 1.5rem; height: 1.5rem; transition: transform .3s; }
.wa-float span {
position: absolute; right: calc(100% + .75rem); top: 50%; transform: translateY(-50%);
display: none; white-space: nowrap; padding: .4rem .75rem;
background: var(--card); color: var(--fg); border: 1px solid var(--border);
font-size: .75rem; letter-spacing: .06em; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
@media (hover: hover) {
.wa-float:hover { transform: scale(1.05); border-color: var(--whatsapp); box-shadow: 0 40px 80px -40px rgba(62,47,35,.35); }
.wa-float:hover svg { transform: scale(1.1); }
.wa-float:hover span { display: block; }
}
.wa-float:focus-visible { outline: 2px solid var(--whatsapp); outline-offset: 2px; }
@media (min-width: 640px) { .wa-float { width: 3.25rem; height: 3.25rem; } }
@media print { .wa-float { display: none; } }
/* ----- Disclaimer modal (Bar Council of India entry notice) ------------ */
.disclaimer {
position: fixed; inset: 0; z-index: 300;
display: flex; align-items: center; justify-content: center; padding: 1.25rem;
background: rgba(11,48,71,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease-out), visibility 0s var(--t-med);
}
.disclaimer.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.disclaimer__box {
width: 100%; max-width: 40rem; max-height: 90vh; overflow-y: auto;
background: var(--bg); padding: 2.5rem; border: 1px solid var(--border);
transform: translateY(12px); transition: transform var(--t-med) var(--ease-out);
}
.disclaimer.is-open .disclaimer__box { transform: none; }
@media (min-width: 640px) { .disclaimer__box { padding: 3.25rem; } }
.disclaimer__box h2 { margin-top: 1.25rem; font-size: 1.9rem; }
.disclaimer__text { margin-top: 1.5rem; display: grid; gap: .9rem; font-size: .9rem; line-height: 1.65; color: var(--muted); }
.disclaimer__list { display: grid; gap: .6rem; padding-left: 1.1rem; list-style: disc; }
.disclaimer__list li::marker { color: var(--gold); }
.disclaimer__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
/* ----- Reveal animations ---------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--img { transform: none; position: relative; }
.reveal--img img { transform: scale(1.12); opacity: 0; transition: transform 1.4s var(--ease-out), opacity 1.1s var(--ease-out); }
.reveal--img::after { content: ""; position: absolute; inset: 0; background: var(--bg-3); transform-origin: bottom; transition: transform 1.2s var(--ease-out) .1s; pointer-events: none; }
.reveal--img.is-visible { opacity: 1; }
.reveal--img.is-visible img { transform: scale(1); opacity: 1; }
.reveal--img.is-visible::after { transform: scaleY(0); }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
.reveal[data-delay="5"] { transition-delay: .5s; }
/* Hero entrance (runs on load, not on scroll) */
.js .hero-in { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.hero-in[data-delay="1"] { transform: translateY(16px); transition-delay: .2s; }
.hero-in[data-delay="2"] { transform: translateY(26px); transition-duration: 1.2s; transition-delay: .34s; }
.hero-in[data-delay="3"] { transform: translateY(20px); transition-delay: .55s; }
body.is-loaded .hero-in { opacity: 1; transform: none; }
.js .hero__media { transition: transform 2.4s var(--ease-out); transform: scale(1.06); }
body.is-loaded .hero__media { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
.reveal, .hero-in { opacity: 1; transform: none; }
.reveal--img img { transform: none; opacity: 1; }
.reveal--img::after { display: none; }
.rule-line::after { transform: none !important; }
.loader { display: none !important; }
}
/* ----- Nav: practice-area dropdown -------------------------------------- */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item > .nav__link { display: inline-flex; align-items: center; gap: .45rem; }
.nav__item > .nav__link svg { width: .55rem; height: .55rem; transition: transform var(--t-fast) var(--ease-out); }
.nav__menu {
position: absolute; top: 100%; left: -1.5rem; z-index: 5;
min-width: 22rem; margin-top: .9rem; padding: .75rem 0;
background: var(--bg); border: 1px solid var(--border); border-top: 2px solid var(--gold);
box-shadow: 0 30px 60px -30px rgba(11, 48, 71, .45);
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s;
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav__item:hover > .nav__link svg, .nav__item:focus-within > .nav__link svg { transform: rotate(180deg); }
.nav__menu a {
display: grid; gap: .2rem;
padding: .7rem 1.5rem;
font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2;
letter-spacing: 0; text-transform: none; color: var(--fg); font-weight: 400;
transition: background-color var(--t-fast), color var(--t-fast);
}
.nav__menu a small { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--bg-2); color: var(--navy); }
.nav__menu .nav__menu-all {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--border);
font-family: var(--font-sans); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-80);
}
.nav__menu .nav__menu-all svg { width: .9rem; height: .9rem; align-self: center; transition: transform var(--t-med) var(--ease-out); }
.nav__menu .nav__menu-all:hover svg { transform: translateX(4px); }
/* Mobile menu: practice-area sub-list */
.mobile-menu__links .mobile-menu__sub { display: grid; padding: .35rem 0 .9rem 1.25rem; border-bottom: 1px solid var(--border); }
.mobile-menu__links .mobile-menu__sub a { padding: .5rem 0; border: 0; font-family: var(--font-sans); font-size: .95rem; line-height: 1.4; color: var(--fg-80); }
.mobile-menu__links .mobile-menu__sub a.is-active { color: var(--navy); }
/* ----- Star rating (client acknowledgements) ---------------------------- */
.stars { display: inline-flex; gap: .2rem; color: var(--gold); }
.stars svg { width: .8rem; height: .8rem; }
.marquee__item .stars { margin-bottom: -.35rem; }
/* The split-text heading reveal was retired on 28 September: see main.js. */
/* ----- Page leave (internal navigation) --------------------------------- */
body.is-leaving main, body.is-leaving .site-footer { opacity: 0; transition: opacity .32s var(--ease-out); }
body.is-leaving .wa-float { opacity: 0; }
/* ----- Location block (About page) --------------------------------------- */
.location { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .location { grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: start; } }
.location .map { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .location .map { aspect-ratio: 16 / 11; } }
.landmarks { display: grid; gap: .75rem; }
.landmarks li { position: relative; padding-left: 1.75rem; font-size: .95rem; line-height: 1.6; color: var(--fg-80); }
.landmarks li::before { content: ""; position: absolute; left: 0; top: .75rem; width: 1rem; height: 1px; background: var(--gold); }
.landmarks li strong { font-weight: 400; color: var(--fg); }
/* ----- Entrance loader: lock-up, then a gavel strikes the block -------- */
/* Shown once per browser session (see preload.js), never without JS and
never for reduced-motion users. A CSS-only timeline removes it after
~3s even if main.js fails, so it can never trap the visitor. The gavel is
a flat gold vector in the logo's own language; the scene is a fixed
200x160 box scaled per breakpoint so the layout never shifts. */
.loader {
display: none; position: fixed; inset: 0; z-index: 400;
align-items: center; justify-content: center; flex-direction: column; gap: 0;
background: var(--navy); color: var(--bg);
animation: loader-out .65s var(--ease-out) 3s both;
pointer-events: none;
}
.first-visit .loader { display: flex; }
.loader__brand { display: grid; justify-items: center; gap: .4rem; text-align: center; opacity: 0; animation: brand-in 1s var(--ease-out) .2s both; }
.loader__lockup { width: 210px; height: auto; }
.loader__brand .brand__sub { color: var(--gold-light); animation: sub-settle 1.2s var(--ease-out) 1.1s both;
/* the row spreads to the lock-up above it, so only the size is set here */
font-size: .68rem; white-space: nowrap; }
/* DAA LEGAL covers 93.15% of the lock-up image, so the strapline takes that
same measure rather than shrinking to its own letters. */
.loader__brand .brand__sub { width: calc(210px * 0.9315); }
@media (min-width: 768px) { .loader__brand .brand__sub { font-size: .8rem; width: calc(250px * 0.9315); } }
.loader__scene { position: relative; width: 200px; height: 190px; margin-top: .5rem; transform: scale(.72); transform-origin: 50% 0; animation: scene-in .6s var(--ease-out) .35s both; }
@media (min-width: 768px) { .loader__lockup { width: 250px; } .loader__scene { transform: scale(.86); } .loader__brand { gap: .5rem; } }
/* gavel: 170x110 svg, pivot at the pommel (157,50) */
.gavel { position: absolute; left: 15px; top: 36px; width: 170px; height: 110px; overflow: visible; transform-origin: 157px 50px; transform: rotate(18deg); animation: gavel-swing 2.1s cubic-bezier(.4, 0, .2, 1) .3s both; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
/* sound block: flat slab + base, sits under the head at rest */
.block { position: absolute; left: 22px; top: 158px; width: 96px; height: 22px; animation: block-thud .36s var(--ease-out) 1.2s both; transform-origin: 50% 100%; }
.block__slab { position: absolute; left: 0; top: 0; width: 96px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #bf822b, #eccf88 40%, #f2e6d8 52%, #c89042); box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .45); }
.block__base { position: absolute; left: 14px; top: 16px; width: 68px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #8a5a1c, #c89042 50%, #8a5a1c); }
/* impact ring */
.ripple { position: absolute; left: 40px; top: 150px; width: 60px; height: 26px; border-radius: 50%; border: 1px solid var(--gold-light); opacity: 0; animation: ripple .9s var(--ease-out) 1.2s both; }
.ripple--2 { animation-delay: 1.32s; border-color: rgba(230, 197, 130, .55); }
.loader__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold-grad); transform-origin: left; animation: loader-bar 2.95s var(--ease-out) .05s both; }
@keyframes scene-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gavel-swing {
0% { transform: rotate(18deg); }
30% { transform: rotate(23deg); }
43% { transform: rotate(-20deg); }
50% { transform: rotate(-9deg); }
58% { transform: rotate(-18deg); }
66% { transform: rotate(-13deg); }
100% { transform: rotate(-14deg); }
}
@keyframes block-thud { 0% { transform: none; } 35% { transform: scaleY(.82); } 100% { transform: none; } }
@keyframes ripple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes brand-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ends at the tracking that makes the tagline sit to the same width as the
wordmark above it; an animation with fill "both" beats the rule above */
@keyframes sub-settle { from { opacity: .4; } to { opacity: 1; } }
@keyframes loader-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes loader-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
/* ----- Cross-document view transitions (Chrome/Edge/Safari 18.2+) ------ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .25s ease-out both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease-out) both; }
.site-header { view-transition-name: site-header; }
.wa-float { view-transition-name: wa-float; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ----- Reading progress (articles) ------------------------------------ */
.reading-progress { position: fixed; left: 0; top: 0; z-index: 101; width: 100%; height: 2px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; pointer-events: none; }
/* ----- Office status + mobile call button ----------------------------- */
.status { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; letter-spacing: .06em; color: var(--muted); }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--border); }
.status.is-open::before { background: #4f8a5b; box-shadow: 0 0 0 3px rgba(79,138,91,.18); }
.status.is-closed::before { background: var(--bordeaux); }
.nav-call { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--gold-light); }
.nav-call svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 1024px) { .nav-call { display: none; } }
.site-header__tools { display: flex; align-items: center; gap: .25rem; }
/* ----- Hero scroll cue --------------------------------------------------- */
.hero__scroll { position: absolute; right: var(--gutter); bottom: 2.5rem; z-index: 2; display: none; flex-direction: column; align-items: center; gap: .75rem; color: var(--muted); font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; writing-mode: vertical-rl; }
.hero__scroll::after { content: ""; width: 1px; height: 3.5rem; background: var(--gold); transform-origin: top; animation: scroll-cue 2s ease-in-out infinite; }
@media (min-width: 768px) { .hero__scroll { display: flex; } }
@keyframes scroll-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* ----- 404 --------------------------------------------------------------- */
.error-page { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 3rem) var(--gutter) 5rem; }
.error-page h1 { font-size: clamp(5rem, 15vw, 10rem); line-height: 1; color: var(--gold-deep); font-weight: 300; }
.error-page h2 { margin-top: 1rem; }
.error-page p { margin: 1.25rem auto 0; max-width: 28rem; color: var(--muted); }
.error-page__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
/* ----- Utilities -------------------------------------------------------- */
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; } .mt-8 { margin-top: 4rem; } .mt-10 { margin-top: 5rem; }
.text-center { text-align: center; }
.grid--5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 720px) { .grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid--5 { grid-template-columns: repeat(5, 1fr); } }
.max-w-prose { max-width: 42rem; }
.flex-wrap { display: flex; flex-wrap: wrap; gap: 1rem; }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
/* ==========================================================================
DAA Legal - UI audit patch (2026-09-18, against style.css as of 21:20)
Append to the END of assets/css/style.css. Every rule uses existing tokens
and class names; no new fonts, no layout rewrites. Numbers refer to the
findings in REPORT.md.
========================================================================== */
/* F1 - Photo heroes: protect the text column. Left-to-right scrim on the light hero
(home) and on dark heroes (careers; about/services once they carry .hero--dark). */
@media (min-width: 768px) {
.hero:not(.hero--dark) .hero__media::before {
background:
linear-gradient(to right, rgba(251, 249, 244, .82) 0%, rgba(251, 249, 244, .5) 40%, rgba(251, 249, 244, 0) 70%),
linear-gradient(to bottom, rgba(251, 249, 244, .2), rgba(251, 249, 244, .2) 45%, rgba(251, 249, 244, .85));
}
.hero--dark .hero__media::before {
background:
linear-gradient(to right, rgba(11, 48, 71, .78) 0%, rgba(11, 48, 71, .42) 45%, rgba(11, 48, 71, .12) 75%),
linear-gradient(to bottom, rgba(11, 48, 71, .35), rgba(11, 48, 71, .25) 45%, rgba(11, 48, 71, .85));
}
}
/* F1 - keep the headline inside the protected column (3 lines instead of running into the dome) */
@media (min-width: 1024px) { .hero__content h1 { max-width: 42rem; } }
/* F1 - About hero: push the BMC signboard down into the strongest part of the fade */
.hero__media img[src*="hero-about"] { object-position: 50% 8%; }
/* F1 - Careers hero is the one cool-toned photo on the site; nudge it to the warm grade */
.hero__media img[src*="hero-careers"] { filter: sepia(.18) saturate(.88); }
/* F2 - Dark-hero eyebrow was invisible: .hero__content .eyebrow (ink) outranked .hero--dark .eyebrow */
.hero--dark .hero__content .eyebrow { color: rgba(251, 249, 244, .82); }
.hero--dark .hero__content .eyebrow::before { background: var(--gold-light); }
/* F2 - safety net: ink outline / navy primary buttons vanish on a dark hero (About, Services after the class change) */
.hero--dark .btn--outline, .hero--dark .btn--primary { color: var(--bg); border-color: rgba(230, 197, 130, .55); background: transparent; }
.hero--dark .btn--outline::before { background: var(--bg); }
.hero--dark .btn--outline:hover, .hero--dark .btn--primary:hover { color: var(--navy); border-color: var(--bg); background: var(--bg); }
/* F3 - Stat numerals: Cormorant's old-style "1" reads as Roman "I"; use lining figures, larger */
.stat__num, .step::before, .practice-card__num, .toc li::before, .error-page h1 { font-variant-numeric: lining-nums; }
.stat__num { font-size: 3.75rem; font-weight: 500; letter-spacing: -.01em; }
.stat__num small { font-weight: 400; }
.practice-card__num { font-size: 1.15rem; }
/* F4 - "Tell us what happened" card stretched to the row with a 400px void; use the height */
.grid .card--bordered { display: flex; flex-direction: column; background: var(--bg-2); }
.grid .card--bordered > .eyebrow { margin-bottom: auto; padding-bottom: 1.5rem; }
.grid .card--bordered h3 { margin-top: 0; }
/* F5 - Gold hairlines: the logo gradient's #f2e6d8 stop vanishes on ivory, so 2px rules read as two dots */
:root { --gold-line: linear-gradient(90deg, #bf822b 0%, #e6c582 55%, #c89042 100%); }
.rule-line::after, .site-footer::before, .reading-progress { background: var(--gold-line); }
.section--dark .rule-line::after { background: var(--gold-light); }
/* F5 - one gold for all hairline dashes (brass #c9a562 and gold #c89042 were both in use for the same job) */
:root { --brass: var(--gold); }
/* F6 - Text-only page heroes: 15rem of empty ivory between the lead and the first section */
.page-hero + .section { padding-top: calc(var(--section) * .45); }
.page-hero .breadcrumb + .eyebrow { margin-top: 2rem; }
/* F7 - Eyebrows that wrap (mobile hero, long labels): hang the dash so line 2 aligns with line 1 */
.section-head > .eyebrow, .hero__content .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow { padding-left: 2.15rem; text-indent: -2.15rem; }
/* F8 - Headings: no single-word last lines ("care.", "matter", "questions") */
h1, h2, .h1, .h2 { text-wrap: balance; }
.card h3, .post-card h3, .feature h3, .job h3 { text-wrap: pretty; }
/* F9 - Home insights band: 3:2 source photos were cropped into 4:5 frames; elsewhere they are 3:2 */
.section--dark .post-card .media--4x5 { aspect-ratio: 3 / 2; }
/* F10 - Article TOC: number and text on separate lines when the title wraps */
.toc li { display: grid; grid-template-columns: 1.4rem 1fr; column-gap: .6rem; align-items: baseline; }
.toc li::before { margin-right: 0; font-size: .9rem; }
.toc a { display: block; }
/* F11 - Article tables: align to the text column, give the narrow columns room; stack on phones */
.article-body th:first-child, .article-body td:first-child { padding-left: 0; }
.article-body th:last-child, .article-body td:last-child { padding-right: 0; }
.article-body th { padding-top: 0; }
@media (min-width: 640px) {
.article-body th:first-child { width: 24%; }
.article-body th:last-child { width: 26%; }
}
@media (max-width: 639px) {
.article-body table, .article-body tbody, .article-body tr, .article-body td { display: block; }
.article-body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.article-body tr { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.article-body tr:first-child { border-top: 1px solid var(--border); }
.article-body td { padding: .15rem 0; border: 0; }
.article-body td:first-child { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; color: var(--fg); padding-bottom: .35rem; }
.article-body td:nth-child(3) { margin-top: .35rem; font-size: .9rem; color: var(--muted); }
}
/* F11 - Article hierarchy: h3 was barely larger than body; author block too small for an E-E-A-T signature */
.article-body h2 { font-size: 2.1rem; }
.article-body h3 { font-size: 1.55rem; margin-top: 2.75rem; }
.author img { width: 4.5rem; height: 4.5rem; }
.author strong { font-size: 1.3rem; }
/* F12 - Mobile ergonomics: hero copy clears the WhatsApp float; full-width submit; float hides while typing */
@media (max-width: 639px) {
.hero__text { max-width: 17.5rem; }
.form__actions .btn { width: 100%; justify-content: center; }
.check { font-size: .875rem; }
.footer-col a { padding: .45rem 0; }
.section--dark .grid--3 > .post-card .media--4x5 { aspect-ratio: 1; }
}
@media (max-width: 767px) {
body:has(.form :focus) .wa-float { opacity: 0; pointer-events: none; }
.wa-float { transition: transform .3s, border-color .3s, box-shadow .3s, opacity .3s; }
}
/* F13 - Hero scroll cue sat under the WhatsApp float */
.hero__scroll { right: calc(var(--gutter) + 4.5rem); }
/* F14 - Careers: Apply button stretched full-width on phones; bullets use the site's hairline dash, not discs */
.job .btn { justify-self: start; }
.job__body ul { list-style: none; padding-left: 0; }
.job__body li { position: relative; padding-left: 1.4rem; }
.job__body li::before { content: ""; position: absolute; left: 0; top: .8rem; width: .8rem; height: 1px; background: var(--gold); }
/* F15 - Map: an empty tinted box until (or unless) Google loads; label it */
.map { position: relative; }
.map::before { content: "Fort · Mumbai 400 001"; position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.map iframe { position: relative; z-index: 1; }
/* F16 - Small type below 10px: dropdown sub-labels */
.nav__menu a small { font-size: .7rem; }
/* F17 - Process steps: 95-character measure in the description column */
.step p { max-width: 36rem; }
/* F18 - Practice cards: Property and Criminal photos are cool/green next to three warm ones */
.card .media img { filter: sepia(.12) saturate(.92); }
/* ----- Interaction polish (rules main.js relies on) --------------------- */
/* ----- 1. Nav: practice-area dropdown (place after ".nav__item:hover ..." rules, ~line 824)
main.js toggles `.is-open` on `.nav__item` for touch / keyboard users
(aria-expanded mirrors it). Hover and :focus-within keep working as before;
this only adds the explicit open state and the same chevron rotation.
`.is-dismissed` is set when the user presses Escape while the trigger keeps
focus: without it :focus-within would re-show the menu at once. It clears
when focus leaves the item, on the next hover, or when the menu re-opens.
Its selector is more specific than the :hover / :focus-within rules, which
is what lets it win while focus is still inside the item. */
.nav__item.is-open .nav__menu {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }
.nav__item.is-dismissed:focus-within .nav__menu {
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s;
}
.nav__item.is-dismissed:focus-within > .nav__link svg { transform: none; }
/* ----- 2. Marquee: pause control (place after the ".marquee" rules, ~line 533)
main.js injects
directly after each [data-marquee] and toggles `.is-paused` on the marquee
(also while the tab is hidden). Not injected under prefers-reduced-motion,
where the strip is already static, so no reduced-motion rule is needed.
The button sits outside .container (the marquee is full-bleed), so the
margin-left below lines it up with the container's left edge. */
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__toggle {
display: inline-flex; align-items: center; gap: .5rem;
margin: 1.25rem 0 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
padding: .55rem 1rem; min-height: 2.5rem;
border: 1px solid var(--fg-25); border-radius: 0; background: transparent; color: var(--fg);
font: inherit; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1;
cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast);
}
.marquee__toggle::before {
content: ""; width: .5rem; height: .5rem; border-radius: 50%;
background: var(--gold); transition: background-color var(--t-fast);
}
.marquee__toggle[aria-pressed="true"]::before { background: var(--muted); }
.marquee__toggle:hover, .marquee__toggle:focus-visible { border-color: var(--fg); color: var(--navy); }
.marquee__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* ----- 3. Forms (place after ".field__hint", ~line 595)
The submit button is now `disabled` while sending. `.btn[disabled]` is
already styled (opacity .55, pointer-events none) so nothing is required;
this only stops the cursor from turning into a hand on the dimmed button. */
.btn[disabled] { cursor: default; }
/* ----- 4. Map embeds (place after ".map iframe", ~line 625)
main.js parks the iframe's src in data-src and restores it once the .map
box is within 200px of the viewport. Until then the iframe is an empty
about:blank frame: keep the tinted background (already set on .map) and
hide the empty frame's grey filter so the box reads as a placeholder.
If a facade is added later (see js-polish-markup.md) it is hidden with the
`hidden` attribute once the map has loaded. */
.map iframe:not([src]) { visibility: hidden; }
.map { position: relative; }
.map__facade {
position: absolute; inset: 0; z-index: 1;
display: grid; place-items: center; gap: .75rem;
padding: 1.5rem; text-align: center;
background: var(--bg-2); color: var(--muted);
font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
}
.map__facade[hidden] { display: none; }
/* ----- People strip (home): partners and advisors ----------------------- */
.people-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; align-content: start; }
@media (min-width: 480px) { .people-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .people-strip { grid-template-columns: repeat(4, 1fr); } }
.person-mini { display: grid; justify-items: center; text-align: center; gap: .35rem; }
.person-mini img { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 1px solid var(--border); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(200, 144, 66, .45); transition: transform var(--t-med) var(--ease-out); }
.person-mini:hover img { transform: translateY(-3px); }
.person-mini strong { margin-top: .5rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; line-height: 1.2; color: var(--fg); }
.person-mini span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-text); }
@media (min-width: 768px) { .person-mini img { width: 6.5rem; height: 6.5rem; } }
/* ----- Practice-area blocks (services page) ----------------------------- */
.area-list { display: grid; border-top: 1px solid var(--border); }
.area-block { position: relative; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 2.5rem 0; border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 1rem); }
.area-block__num { grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-display); font-size: 1.15rem; color: var(--brass-text); font-variant-numeric: lining-nums; padding-top: .35rem; }
.area-block h2 { grid-column: 2; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.2; }
.area-block__body { grid-column: 2; margin-top: 1rem; }
.area-block__body p + p { margin-top: 1rem; }
.area-block::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--gold); transition: width .9s var(--ease-out); }
.area-block:target::after, .area-block:hover::after { width: 100%; }
@media (min-width: 900px) {
.area-block { grid-template-columns: 5rem 1fr 1.4fr; column-gap: 2.5rem; padding: 3rem 0; align-items: start; }
.area-block__num { grid-row: auto; }
.area-block h2 { grid-column: 2; }
.area-block__body { grid-column: 3; margin-top: 0; }
}
/* ----- Advisors (about page) ------------------------------------------- */
.advisors > .advisor + .advisor { margin-top: 5rem; padding-top: 5rem; border-top: 1px solid var(--border); }
.advisor__media { max-width: 26rem; }
.advisor__name { font-size: 1.9rem; margin-top: 1rem; }
@media (min-width: 1024px) { .advisor { grid-template-columns: .7fr 1.3fr; } .advisor.grid--split-rev { grid-template-columns: 1.3fr .7fr; } }
.footer-col__cities { font-size: .8rem; letter-spacing: .06em; color: var(--muted); }
.nav__menu--wide { min-width: 24rem; }
/* Partner and advisor portraits: a quiet lift on hover (client: "pops out a little") */
.person .media, .advisor__media { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.person:hover .media, .advisor:hover .advisor__media { transform: translateY(-4px) scale(1.015); box-shadow: 0 24px 40px -28px rgba(11, 48, 71, .45); }
.person:hover .media img { transform: scale(1.03); }
.advisor-strip { padding-top: 3rem; border-top: 1px solid var(--border); }
.advisor-strip .people-strip { grid-template-columns: repeat(2, 1fr); max-width: 44rem; }
@media (min-width: 640px) { .advisor-strip .people-strip { grid-template-columns: repeat(4, 1fr); } }
/* ----- Practice-area icons (thin line, gold on a faint square) ----------- */
.practice-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.practice-card__icon, .area-block__icon {
display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
border: 1px solid var(--border); background: var(--card); color: var(--gold-deep);
transition: border-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out);
}
.practice-card__icon svg, .area-block__icon svg { width: 1.3rem; height: 1.3rem; }
.practice-card:hover .practice-card__icon, .area-block:hover .area-block__icon, .area-block:target .area-block__icon { border-color: var(--gold); color: var(--navy); background: var(--bg-2); }
.practice-card__head .practice-card__num { margin: 0; }
.area-block__lead { grid-column: 1; grid-row: 1 / span 2; display: grid; gap: .6rem; justify-items: start; align-content: start; }
.area-block__lead .area-block__num { grid-column: auto; grid-row: auto; padding-top: 0; }
.area-block__icon { width: 2.5rem; height: 2.5rem; }
@media (min-width: 900px) { .area-block__lead { grid-row: auto; } .area-block__icon { width: 2.75rem; height: 2.75rem; } }
.nav__menu a { grid-template-columns: 1.25rem 1fr; column-gap: .75rem; align-items: center; }
.nav__menu a small { grid-column: 2; }
.nav__menu-icon { grid-row: 1 / span 2; display: grid; place-items: center; color: var(--gold-deep); }
.nav__menu-icon svg { width: 1.1rem; height: 1.1rem; }
.nav__menu a:hover .nav__menu-icon { color: var(--navy); }
/* ==========================================================================
DAA Legal - L2 UI/UX audit patch (2026-09-22, after the corporate/insolvency
re-scope). Append to the END of assets/css/style.css, after the existing
"UI audit patch" and "Practice-area icons" blocks. Existing tokens and class
names only. Numbers refer to the findings in L2-ui-ux.md.
========================================================================== */
/* L1 - Practice cards: a card with a one-line title is stretched to the row and
its rows spread out, so icon squares, numerals, titles and "Read more" sit
4-8px off their neighbours (home cards 01/05/06, insights clusters). */
.practice-card { align-content: start; }
/* The "Not sure which applies?" card is the ninth tile, so it sits in the grid
like the other eight. It keeps its own background, not its own layout. */
/* L3 - Quotes: was never reset, so every quote carried the browser's
default 40px side indent and 1em top/bottom margin (home partners quote, About,
both marquees). The article blockquote sets its own margin and is unaffected. */
.quote__text { margin: 0; }
.marquee__item blockquote { margin: 0; }
/* L4 - About partners: three narrow columns could not hold two 700-word bios next
to a one-line one. From tablet up each partner becomes a portrait + text row
(same family as the advisor rows below); the short third bio is then just a
short row, not an empty column. Hover lift on .media is untouched. */
@media (min-width: 768px) {
#partners .grid--3 { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border); }
#partners .person {
display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
column-gap: 3rem; align-items: start; padding: 3rem 0; border-bottom: 1px solid var(--border);
}
#partners .person > .media { grid-column: 1; grid-row: 1 / span 8; }
#partners .person > :not(.media) { grid-column: 2; max-width: 42rem; }
#partners .person h3 { margin-top: .25rem; font-size: 1.9rem; }
#partners .person__bio { font-size: 1rem; }
}
/* L5 - Mobile menu: the close icon never appears (main.js sets .hidden on an SVG,
which is not an HTMLElement, so the attribute never changes). CSS follows
aria-expanded instead. Root cause and JS fix in the report. */
.nav-toggle[aria-expanded="true"] [data-icon-open] { display: none !important; }
.nav-toggle[aria-expanded="true"] [data-icon-close] { display: block !important; }
/* L6 - Practice-area anchors: html { scroll-padding-top: header } and the block's
own scroll-margin-top (header + 1rem) were added together, so a dropdown link
landed 200px down with the previous block's tail above it. */
.area-block { scroll-margin-top: 1rem; }
/* L7 - Services page: three tinted sections in a row doubled the hairline between
them. (Primary fix is markup: drop section--tinted from the FAQ section.) */
.section--tinted + .section--tinted { border-top: 0; }
/* L9 - Footer: the Visit address sat hard against its heading (the lists have
1.25rem, the address had 0); the BCI note's rule stopped at 960px while the
copyright row ran full width; the presence line wrapped after a dot. */
.footer-col address { margin-top: 1.25rem; }
.footer-col address + ul { margin-top: 1rem; }
.footer-disclaimer { max-width: none; padding-right: max(0px, calc(100% - 60rem)); }
.footer-col__cities { text-wrap: balance; }
@media (min-width: 480px) and (max-width: 767px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand, .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }
}
/* L10 - Portraits. Kapoor's scan is slightly rotated and shows white wedges at the
frame edges; a 10% zoom crops them. Meghna's photo is full-length beside two
head-and-shoulders portraits; scale + origin bring the crop to three-quarter
length (the hover transform composes with `scale`, so no jump). The author
avatar crops to the head where object-view-box is supported (Chromium). */
.advisor__media img[src*="adv-kapoor"] { scale: 1.1; }
#partners .person .media img[src*="team-1"] { scale: 1.4; transform-origin: 52% 14%; }
.author img { object-position: 50% 0; object-view-box: inset(2% 27% 60% 27%); }
/* L11 - Phones: practice cards read as compact rows (icon | title | number, then
the line and the link) instead of nine tall stacks. Clusters on the insights
index inherit the same shape. The CTA card keeps its stacked layout. */
@media (max-width: 639px) {
.practice-card:not(.practice-card--stack) {
grid-template-columns: 2.5rem minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .5rem;
padding: 1.5rem 0; align-items: center;
}
.practice-card:not(.practice-card--stack) .practice-card__head { display: contents; }
.practice-card:not(.practice-card--stack) .practice-card__icon { grid-column: 1; grid-row: 1; width: 2.5rem; height: 2.5rem; }
.practice-card:not(.practice-card--stack) .practice-card__num { grid-column: 3; grid-row: 1; }
.practice-card:not(.practice-card--stack) h3 { grid-column: 2; grid-row: 1; font-size: 1.3rem; }
.practice-card:not(.practice-card--stack) > :nth-child(n+3) { grid-column: 2 / -1; }
.practice-card p { font-size: .9rem; }
.practice-card:not(.practice-card--stack) .link-arrow { margin-top: 0; }
.practice-card--stack { padding: 1.75rem; row-gap: .75rem; }
}
/* L12 - Phones: the area-block body was squeezed beside an empty 3rem lead column
(35 characters a line). Lead and title share row 1; the body takes full width. */
@media (max-width: 899px) {
.area-block__lead { grid-row: 1; }
.area-block__body { grid-column: 1 / -1; margin-top: 1.25rem; }
}
/* L13 - Disclaimer on phones: focusing "I Agree" scrolled the box to its end, so
the visitor met the bullet list without the heading. Actions stick to the
bottom of the box, so the button is already in view and nothing scrolls. */
@media (max-width: 639px) {
.disclaimer__box { padding: 2rem 1.5rem 0; }
.disclaimer__actions {
position: sticky; bottom: 0; margin: 1.5rem -1.5rem 0; padding: 1rem 1.5rem 1.25rem;
background: var(--bg); border-top: 1px solid var(--border);
}
}
/* L14 - Header dropdown: nine items plus the footer link run 625px tall, fine at
900px but clipped on 768px laptops. Two columns from 1280px. */
@media (min-width: 1280px) {
.nav__menu--wide { min-width: 50rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: .5rem; }
.nav__menu--wide .nav__menu-all { grid-column: 1 / -1; }
}
@media (min-width: 1280px) and (max-width: 1439px) { .nav__menu--wide { left: -4rem; } }
/* L15 - Display numerals: Cormorant's old-style figures make "Rs 1 crore" read as
"Rs I crore" and drop the 9 in "Section 9" below the baseline in headings.
Lining figures in display sizes only; running text keeps old-style. */
h1, h2, h3, .h1, .h2, .h3, .quote__text, .accordion__trigger { font-variant-numeric: lining-nums; }
/* L16 - Article tables: the last column held the longest prose in the narrowest
cell (26%), producing 6-line rows; the middle column had short text at 50%. */
@media (min-width: 640px) {
.article-body th:first-child { width: 22%; }
.article-body th:last-child { width: 40%; }
}
/* L17 - Loader: the gavel and block sat 26px left of the lock-up's axis. A small
nudge centres the head-and-block mass; `translate` composes with the scale. */
.loader__scene { translate: 1rem 0; }
/* L18 - Eyebrows: section heads carry the gold dash, split-grid intros ("The Firm",
"The Partners", "Our Work", "Questions") did not, so pages mixed both styles. */
.grid--split > div > .eyebrow:first-child::before,
.advisor-strip > .eyebrow::before,
.location > div > .eyebrow:first-child::before {
content: ""; display: inline-block; width: 1.4rem; height: 1px; margin-right: .75rem;
vertical-align: middle; background: var(--gold);
}
.grid--split > div > .eyebrow:first-child,
.advisor-strip > .eyebrow,
.location > div > .eyebrow:first-child { padding-left: 2.15rem; text-indent: -2.15rem; }
/* L19 - Phones: advisor portraits ran full width (428px tall) above each bio on
About; a capped width keeps the page's rhythm without touching the desktop. */
@media (max-width: 899px) {
.advisor__media { max-width: 16rem; }
.article__hero .media--16x9 { aspect-ratio: 16 / 9; }
}
/* L19 - Desktop: the article hero photo ran 1344x756 from a 1000px source; a
wider crop is lighter on the page and less upscaled. */
@media (min-width: 1024px) {
.article__hero .media--16x9 { aspect-ratio: 21 / 9; }
}
/* ----- Partner LinkedIn rows (Consultation page) ------------------------ */
.linked-list { display: grid; gap: .5rem; align-content: start; }
.linked-row { display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; column-gap: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--border); background: var(--card); transition: border-color var(--t-med), transform var(--t-med) var(--ease-out); }
.linked-row:hover { border-color: var(--gold); transform: translateY(-2px); }
.linked-row img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.linked-row span { display: grid; gap: .2rem; }
.linked-row strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; }
.linked-row small { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-text); }
.linked-row svg { width: 1.15rem; height: 1.15rem; color: var(--navy); }
/* ---- People: partners with their advisor beneath (client, 26 Sep) ---- */
.people-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
@media (min-width: 900px) { .people-cols { grid-template-columns: repeat(4, 1fr); } }
.people-col { display: grid; justify-items: center; text-align: center; gap: .5rem; align-content: start; }
.partner-card { display: grid; width: 100%; justify-items: center; gap: .3rem; text-decoration: none; color: inherit; }
.partner-card__media { display: block; width: 100%; overflow: hidden; border: 1px solid var(--border); }
.partner-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; transition: transform var(--t-slow) var(--ease-out); }
.partner-card:hover .partner-card__media img { transform: scale(1.03); }
.partner-card strong { margin-top: .85rem; font-family: var(--font-display); font-size: 1.22rem; font-weight: 400; line-height: 1.2; color: var(--fg); }
.partner-card__role { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-text); }
.partner-card__cities { font-size: .82rem; color: var(--muted); }
.partner-card__li { display: inline-flex; align-items: center; gap: .4rem; margin-top: .15rem; min-height: 44px; padding: 0 .5rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-text); text-decoration: none; }
.partner-card__li svg { width: 1rem; height: 1rem; }
.partner-card__li:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: .25em; }
.person-mini--adv { width: 100%; }
.person-mini--adv img { width: 7.5rem; height: 7.5rem; }
@media (min-width: 768px) { .person-mini--adv img { width: 8.5rem; height: 8.5rem; } }
.person-mini--adv span { font-size: .68rem; line-height: 1.5; }
/* People page: cities under the designation, LinkedIn under the bio */
.person__cities { margin-top: .4rem; font-size: .95rem; color: var(--muted); }
.linked-in-link { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-text); text-decoration: none; }
.linked-in-link__icon { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--border); border-radius: 50%; }
.linked-in-link svg { width: 1rem; height: 1rem; }
.linked-in-link:hover { color: var(--gold-deep); }
.linked-in-link:hover .linked-in-link__icon { border-color: var(--gold); }
.text-center { text-align: center; }
.grid--5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 720px) { .grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid--5 { grid-template-columns: repeat(5, 1fr); } }
/* ---- About: the logo panel that replaced the firm photograph ---- */
/* client: no square lining, and centred against the description beside it */
.logo-panel { position: relative; display: grid; align-content: center; justify-items: center; gap: .5rem; padding: 2rem 1rem; background: transparent; border: 0; aspect-ratio: auto; min-height: 100%; overflow: visible; }
.logo-panel__lockup { width: min(86%, 24rem); height: auto; }
.logo-panel__sub { margin-top: -.5rem; font-size: .92rem; text-transform: uppercase; color: var(--brass-text);
/* DAA LEGAL covers 93.15% of the lock-up image; the strapline matches it */
width: calc(min(86%, 24rem) * 0.9315); }
/* ---- About: the cities carousel ---- */
.marquee--cities .marquee__track { gap: 1.5rem; animation-duration: 64s; }
.city-item { width: 26rem; max-width: 78vw; flex: 0 0 auto; margin: 0; }
.city-item img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border: 1px solid var(--border); }
.city-item figcaption { margin-top: .75rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-text); }
/* ---- Raunak's updated lock-up: the wordmark is artwork, so the A's match ---- */
/* About: compact partner cards, the full profile lives on /people */
.person--compact a { display: block; text-decoration: none; color: inherit; }
.person--compact .media { overflow: hidden; }
.person--compact img { transition: transform var(--t-slow) var(--ease-out); }
.person--compact a:hover img { transform: scale(1.03); }
.person--compact h3 { margin-top: 1rem; }
.grid--4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
@media (min-width: 960px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* the advisors sit in their own row so both bands line up across the four columns */
.people-cols--adv { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
/* Meghna, 28 Sep: the five senior advisors read as one line under the
partners. The portrait steps down so five fit the same measure four did. */
/* Meghna, 4 Oct: six advisors read as three and three, so the circles can
take the room back that five across had cost them. */
@media (min-width: 900px) { .people-cols--adv { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; row-gap: 2.5rem; } }
@media (min-width: 900px) { .person-mini--adv img { width: 10rem; height: 10rem; } }
@media (min-width: 1200px) { .person-mini--adv img { width: 11.5rem; height: 11.5rem; } }
.people-cols--adv .people-col { gap: .2rem; }
/* the About panel runs the same gavel as the entry animation, on a loop */
.logo-panel__scene { animation: none; margin-top: 1rem; transform: scale(.82); }
.logo-panel .gavel { animation: gavel-swing 2.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.logo-panel .block { animation: block-thud .36s var(--ease-out) infinite; animation-delay: 1.1s; }
.logo-panel .ripple { animation: ripple 2.6s var(--ease-out) infinite; }
.logo-panel .ripple--2 { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
.logo-panel .gavel, .logo-panel .block, .logo-panel .ripple { animation: none; }
.logo-panel .gavel { transform: rotate(-14deg); }
}
/* About hero: the six cities Meghna photographed, cross-fading in place */
.hero__media--slides { position: absolute; inset: 0; }
/* the slides are positioned, so without this they paint over the scrim that the
::before/::after pseudo-elements provide, and the heading loses its backing */
.hero__media--slides .hero-slide { z-index: 0; }
.hero__media--slides::before, .hero__media--slides::after { z-index: 1; }
/* the six city photographs vary a lot in brightness, so the top of the scrim
carries more weight here than over a single fixed image */
.hero--dark .hero__media--slides::before { background: linear-gradient(to bottom, rgba(11,48,71,.62), rgba(11,48,71,.5) 45%, rgba(11,48,71,.9)); }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: heroFade 30s linear infinite; }
@keyframes heroFade {
0% { opacity: 0; }
2% { opacity: 1; }
16.66% { opacity: 1; }
18.66% { opacity: 0; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide { animation: none; opacity: 0; }
.hero-slide:first-child { opacity: 1; }
}
/* the advisor portraits match the partner photographs above them */
.people-cols--adv .person-mini img { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 17rem; }
/* the file now includes the letters' full height plus a little padding,
so the box is taller than the cap height it shows */
/* .brand__text is a flex column, so without align-self the wordmark stretches
to the container width while its height stays fixed, distorting the logo */
.brand__wordmark { display: block; width: auto; height: 1.45rem; align-self: flex-start; }
@media (min-width: 768px) { .brand__wordmark { height: 1.7rem; } }
/* client: on the people page the portrait sat high while the text ran on
below it, so the two columns start together */
.advisors .grid--split { align-items: start; }
.advisors .advisor__media { position: sticky; top: 6rem; }
@media (max-width: 1023px) { .advisors .advisor__media { position: static; } }
/* L13 - Phones and tablets: every profile leads with its portrait. The reversed
blocks carry the text first in the markup, so in one column half the
photographs sat below the text and half above. */
@media (max-width: 1023px) {
.advisor .advisor__media { order: -1; }
}
/* The entry disclaimer is injected by script. Without script the same notice
has to stand in the markup, so it is styled as a plain band at the top. */
.disclaimer-static { background: var(--bg-2); border-bottom: 1px solid var(--border); padding: 1.25rem 1.25rem; }
.disclaimer-static p { max-width: 60rem; margin: 0 auto; font-size: .85rem; line-height: 1.6; color: var(--fg); }