/* ==========================================================================
Doctor's Divorce Practice Page — Jos Family Law
All styles for doctors-divorce.html
========================================================================== */
:root {
--color-paper: #faf8f5;
--color-paper-muted: #f3efe9;
--color-paper-muted-soft: rgba(243, 239, 233, 0.4);
--color-mono-label: #9a9596;
--color-ink: #231f20;
--color-ink-muted: rgba(35, 31, 32, 0.75);
--color-ink-soft: rgba(35, 31, 32, 0.7);
--color-ink-faint: rgba(35, 31, 32, 0.65);
--color-ink-body: rgba(35, 31, 32, 0.8);
--color-ink-body-soft: rgba(35, 31, 32, 0.85);
--color-ink-border: rgba(35, 31, 32, 0.1);
--color-ink-wordmark: rgba(35, 31, 32, 0.06);
--color-teal: #00a499;
--color-teal-soft: rgba(0, 164, 153, 0.8);
--color-teal-faint: rgba(0, 164, 153, 0.6);
--color-teal-border: rgba(0, 164, 153, 0.4);
--font-serif: "Cormorant Garamond", Georgia, serif;
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--container-wide: 80rem;
--container-narrow: 64rem;
--gutter: 1.5rem;
--gutter-lg: 2.5rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body.doctors-page {
margin: 0;
background-color: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.doctors-page img {
display: block;
max-width: 100%;
}
.doctors-page a {
text-decoration: none;
}
.doctors-page h1,
.doctors-page h2,
.doctors-page h3,
.doctors-page p {
margin: 0;
}
.doctors-page em {
font-style: normal;
}
/* --- Layout ---------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-wide);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow {
max-width: var(--container-narrow);
}
@media (min-width: 1024px) {
.container {
padding-inline: var(--gutter-lg);
}
}
.section {
padding-block: 6rem;
border-bottom: 2px solid var(--color-ink-border);
}
.section-consultation {
padding-top: 6rem;
padding-bottom: 6rem;
border-bottom: none;
}
/* --- Icons ----------------------------------------------------------------- */
.icon-sprite {
display: none;
}
.icon {
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
}
.icon--check {
color: var(--color-teal);
fill: none;
stroke: currentColor;
}
.icon--arrow,
.icon--arrow-left {
fill: none;
stroke: currentColor;
transition: transform 0.2s ease;
}
.icon--phone {
fill: none;
stroke: currentColor;
}
/* --- Scroll reveal --------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
/* --- Hero ------------------------------------------------------------------ */
.doctors-hero {
position: relative;
overflow: hidden;
border-bottom: 2px solid var(--color-ink-border);
}
.doctors-hero__inner {
position: relative;
z-index: 2;
padding-bottom: 6rem;
}
.doctors-hero__back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 3rem;
color: var(--color-teal);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.08em;
transition: color 0.2s ease;
}

.doctors-hero__back:hover,
.doctors-page a.doctors-hero__back:hover {
color: var(--color-ink);
}
.doctors-hero__content {
max-width: 56rem;
}
.doctors-hero__label {
display: block;
margin-bottom: 1.75rem;
color: var(--color-teal);
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.22em;
line-height: 1.5;
text-transform: uppercase;
}
.doctors-hero__title {
font-family: var(--font-serif);
font-size: clamp(3rem, 5vw, 4.5rem);
font-weight: 500;
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--color-ink);
}
@media (min-width: 1024px) {
.doctors-hero__title {
font-size: 4.5rem;
line-height: 1;
letter-spacing: -0.025em;
}
}
.doctors-hero__intro {
max-width: 36rem;
margin-top: 2rem;
color: var(--color-ink-muted);
font-size: 1.125rem;
font-weight: 300;
line-height: 1.625;
}
@media (min-width: 768px) {
.doctors-hero__intro {
font-size: 1.25rem;
}
}
.doctors-hero .doctors-hero__intro {
margin-top: 2rem;
}
.doctors-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2.5rem;
}
.doctors-hero__button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
}
.doctors-hero__button--primary {
background-color: var(--color-teal);
color: var(--color-ink);
font-weight: 700;
}
.doctors-page a.doctors-hero__button--primary {
color: var(--color-ink);
}
.doctors-hero__button--primary:hover,
.doctors-page a.doctors-hero__button--primary:hover {
background-color: var(--color-ink);
color: var(--color-paper);
}
.doctors-hero__button--secondary {
border: 2px solid var(--color-ink);
color: var(--color-ink);
}
.doctors-page a.doctors-hero__button--secondary {
color: var(--color-ink);
}
.doctors-hero__button--secondary:hover,
.doctors-page a.doctors-hero__button--secondary:hover {
background-color: var(--color-ink);
color: var(--color-paper);
}
.doctors-hero__wordmark {
position: absolute;
right: -5rem;
bottom: -5rem;
z-index: 1;
color: var(--color-ink-wordmark);
font-family: var(--font-serif);
font-size: clamp(7.2rem, 14.4vw, 15.3rem);
font-style: italic;
line-height: 0.9;
white-space: nowrap;
pointer-events: none;
user-select: none;
}
/* --- What we handle -------------------------------------------------------- */
.section-handle__title {
margin-bottom: 3rem;
font-family: var(--font-serif);
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-ink);
}
@media (min-width: 768px) {
.section-handle__title {
font-size: 3rem;
}
}
.section-handle .section-handle__title {
margin-bottom: 3rem;
}
.section-handle__grid {
display: grid;
gap: 1px;
background-color: var(--color-ink-border);
}
@media (min-width: 768px) {
.section-handle__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.handle-item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
background-color: var(--color-paper-muted);
padding: 1.75rem;
transition: background-color 0.2s ease;
}
.handle-item:hover {
background-color: #fff;
}
.handle-item__icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin-top: 0.25rem;
border: 2px solid var(--color-teal);
}
.handle-item__text {
color: var(--color-ink-body-soft);
font-size: 1rem;
font-weight: 300;
line-height: 1.625;
}
@media (min-width: 768px) {
.handle-item__text {
font-size: 1.125rem;
}
}
/* --- Prose sections -------------------------------------------------------- */
.section-prose__title {
max-width: 48rem;
margin-bottom: 1.5rem;
font-family: var(--font-serif);
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-ink);
}
@media (min-width: 768px) {
.section-prose__title {
font-size: 3rem;
}
}
.section-prose .section-prose__title {
margin-bottom: 1.5rem;
}
.section-prose__lead {
max-width: 48rem;
margin-bottom: 3rem;
color: var(--color-ink-soft);
font-size: 1.125rem;
font-weight: 300;
line-height: 1.625;
}
.section-prose .section-prose__lead {
margin-bottom: 3rem;
}
.section-prose__body {
display: grid;
gap: 1rem;
max-width: 56rem;
color: var(--color-ink-body);
font-size: 1.125rem;
font-weight: 300;
line-height: 1.625;
}
/* --- High-stakes challenges ------------------------------------------------ */
.section-challenges__title {
max-width: 48rem;
margin-bottom: 3rem;
font-family: var(--font-serif);
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-ink);
}
@media (min-width: 768px) {
.section-challenges__title {
font-size: 3rem;
}
}
.section-challenges .section-challenges__title {
margin-bottom: 3rem;
}
.section-challenges__grid {
display: grid;
gap: 1px;
background-color: var(--color-ink-border);
}
@media (min-width: 768px) {
.section-challenges__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.section-challenges__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.challenge-card {
background-color: var(--color-paper-muted);
padding: 1.75rem;
transition: background-color 0.2s ease;
}
.challenge-card:hover {
background-color: #fff;
}
.challenge-card__title {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 500;
line-height: 1.375;
color: var(--color-ink);
}
.challenge-card__text {
margin-top: 0.75rem;
color: var(--color-ink-soft);
font-size: 0.95rem;
font-weight: 300;
line-height: 1.625;
}
.challenge-card .challenge-card__text {
margin-top: 0.75rem;
}
/* --- FAQ (numbered) -------------------------------------------------------- */
.section-faq__title {
margin-bottom: 3rem;
font-family: var(--font-serif);
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-ink);
text-transform: capitalize;
}
@media (min-width: 768px) {
.section-faq__title {
font-size: 3rem;
}
}
.section-faq .section-faq__title {
margin-bottom: 3rem;
}
.section-faq__list {
display: grid;
gap: 1px;
background-color: var(--color-ink-border);
}
.faq-item {
background-color: var(--color-paper-muted);
padding: 1.75rem;
transition: background-color 0.2s ease;
}
.faq-item:hover {
background-color: #fff;
}
.faq-item__question {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
cursor: pointer;
list-style: none;
}
.faq-item__question::-webkit-details-marker {
display: none;
}
.faq-item__number {
flex-shrink: 0;
width: 2.5rem;
font-family: var(--font-serif);
font-size: 1.5rem;
font-style: italic;
font-weight: 600;
line-height: 1;
color: var(--color-teal);
}
.faq-item__label {
flex: 1;
font-family: var(--font-serif);
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 500;
line-height: 1.375;
color: var(--color-ink);
}
.faq-item__toggle {
flex-shrink: 0;
color: var(--color-teal);
font-family: var(--font-serif);
font-size: 1.875rem;
font-weight: 400;
line-height: 1;
transition: transform 0.2s ease;
}
.faq-item[open] .faq-item__toggle {
transform: rotate(45deg);
}
.faq-item__answer {
max-width: 48rem;
padding-left: 3.75rem;
color: var(--color-ink-soft);
font-weight: 300;
font-size: 1rem;
line-height: 1.625;
}
@media (min-width: 768px) {
.faq-item__answer {
font-size: 1.125rem;
}
}
.faq-item .faq-item__answer {
margin-top: 1.25rem;
}
/* --- Related practice areas (4-col) ---------------------------------------- */
.section-related__title {
margin-bottom: 3rem;
font-family: var(--font-serif);
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-ink);
text-transform: capitalize;
}
@media (min-width: 768px) {
.section-related__title {
font-size: 3rem;
}
}
.section-related .section-related__title {
margin-bottom: 3rem;
}
.section-related__grid {
display: grid;
gap: 1px;
background-color: var(--color-ink-border);
}
@media (min-width: 640px) {
.section-related__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.section-related__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.related-card {
display: block;
background-color: var(--color-paper-muted);
padding: 1.75rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
.related-card:hover {
background-color: var(--color-teal);
color: var(--color-ink);
}
.related-card__label {
display: block;
color: var(--color-teal);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 0.2s ease;
}
.related-card:hover .related-card__label {
color: var(--color-ink);
}
.related-card__title {
margin-top: 1rem;
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 500;
line-height: 1.333;
color: var(--color-ink);
}
.related-card .related-card__title {
margin-top: 1rem;
color:#231f20;
}
.related-card__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.5rem;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: transform 0.2s ease;
}
.related-card .related-card__link {
margin-top: 1.5rem;
}
.related-card:hover .related-card__link .icon--arrow {
transform: translateX(4px);
}
/* --- Consultation CTA box -------------------------------------------------- */
.consultation-box {
border: 2px solid var(--color-teal);
background-color: var(--color-paper-muted);
padding: 2.5rem;
text-align: center;
}
@media (min-width: 768px) {
.consultation-box {
padding: 4rem;
}
}
.consultation-box__label {
display: block;
margin-bottom: 1.25rem;
color: var(--color-teal);
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.22em;
line-height: 1.5;
text-transform: uppercase;
}
.consultation-box__title {
margin-bottom: 1.25rem;
font-family: var(--font-serif);
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-ink);
}
@media (min-width: 768px) {
.consultation-box__title {
font-size: 3rem;
}
}
.consultation-box .consultation-box__title {
margin-bottom: 1.25rem;
}
.consultation-box__text {
/*max-width: 42rem;*/
margin-inline: auto;
margin-bottom: 2.5rem;
color: var(--color-ink-soft);
font-size: 1.125rem;
font-weight: 300;
line-height: 1.625;
}
.consultation-box .consultation-box__text {
margin-bottom: 2.5rem;
}
.consultation-box__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.consultation-box__button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
}
.consultation-box__button--primary {
background-color: var(--color-teal);
color: var(--color-ink);
font-weight: 700;
}
.doctors-page a.consultation-box__button--primary {
color: var(--color-ink);
}
.consultation-box__button--primary:hover,
.doctors-page a.consultation-box__button--primary:hover {
background-color: var(--color-ink);
color: var(--color-paper);
}
.consultation-box__button--secondary {
border: 2px solid var(--color-ink);
color: var(--color-ink);
}
.doctors-page a.consultation-box__button--secondary {
color: var(--color-ink);
}
.consultation-box__button--secondary:hover,
.doctors-page a.consultation-box__button--secondary:hover {
background-color: var(--color-ink);
color: var(--color-paper);
}
.process-grid {
display: grid;
gap: 1px;
background-color: var(--color-ink-border);
}
@media (min-width: 768px) {
.process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.card-process {
background-color: var(--color-paper);
}
@media (min-width: 768px) {
.card-process {
padding: 2.5rem;
}
}
.reveal {
transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
.card-process__header {
display: flex;
align-items: baseline;
gap: 1.25rem;
margin-bottom: 1rem;
}
.card-process__number {
color: var(--color-teal-soft);
font-family: var(--font-serif);
font-size: 3rem;
font-style: italic;
font-weight: 600;
line-height: 1;
}
.card-process__title {
font-family: var(--font-serif);
font-weight: 500;
color: var(--color-ink);
}
@media (min-width: 768px) {
.card-process__title {
font-size: 1.6rem;
line-height: 1.25;
letter-spacing: -0.022em;
}
}
.card-process__text {
color: var(--color-ink-soft);
font-size: 0.98rem;
font-weight: 300;
line-height: 1.625;
}
.section-process__header {
max-width: 48rem;
margin-bottom: 3.5rem;
}
.section-process .section-process__intro {
margin-top: 1.75rem;
}
.section-process__intro {
color: var(--color-ink-soft);
font-size: 1.125rem;
font-weight: 300;
line-height: 1.625;
}
.section-process__title-accent {
font-weight: 600;
color: var(--color-ink);
}
@media (min-width: 1024px) {
.section-process__title-accent {
line-height: 1;
}
}
@media (min-width: 1024px) {
.section-process__title {
font-size: 3.75rem;
line-height: 1;
letter-spacing: -0.025em;
}
}
.section-process__title {
font-family: var(--font-serif);
font-weight: 500;
color: var(--color-ink);
}
.card-process:hover {
background-color: #fff;
}
.card-process {
background-color: var(--color-paper);
padding: 2rem;
transition: background-color 0.2s ease, opacity 0.65s ease, transform 0.65s ease;
}