/* ==========================================================================
   Law Office of Nina P. Chobu
   Palette and type taken from the brand logo + the current chobulaw.com theme:
     navy + gold, Libre Baskerville display serif, Almarai body sans,
     square corners, wide whitespace.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — served from this origin, not from Google.
   Generated from the Google Fonts css2 API; see fonts/README.md to regenerate.
   The @import this replaces sent every visitor's IP address to Google and
   cost an extra DNS lookup, TLS handshake and round trip before any text
   could paint.
   -------------------------------------------------------------------------- */

/* arabic */
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/almarai-300-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/almarai-300-latin.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;
}
/* arabic */
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/almarai-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/almarai-400-latin.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;
}
/* arabic */
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/almarai-700-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/almarai-700-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/libre-baskerville-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/libre-baskerville-400-italic-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/libre-baskerville-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/libre-baskerville-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/libre-baskerville-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/libre-baskerville-latin.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;
}

:root {
    /* Brand palette (sampled from the logo) */
    --navy: #152a5b;
    --navy-deep: #0e1d40;
    --navy-soft: #24406f;
    --gold: #cfa457;
    --gold-light: #e3c98f;
    --gold-pale: #f3e9d5;

    /* Neutrals */
    --white: #ffffff;
    --cream: #f6f1e8;
    --stone: #f0ece5;
    --ink: #1a1a20;
    --muted: #55555f;
    --rule: rgba(21, 42, 91, 0.14);

    /* Type */
    --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --font-body: 'Almarai', 'Helvetica Neue', Arial, sans-serif;

    /* Rhythm */
    --section-y: 108px;
    --container: 1180px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Keep anchored sections clear of the sticky header (~87px tall) */
    scroll-padding-top: 105px;
}

body {
    margin: 0;
    background-color: var(--white);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.24;
    color: var(--navy);
    margin: 0 0 0.6em;
    /* The translated headings carry single words longer than a 320px line box
       ('Иммиграционный', 'конфиденциальности'), and .hero clips its overflow —
       so an unbreakable word is lost rather than merely scrolled past. This
       only fires on a word that already cannot fit, which never happens to an
       English heading at desktop width. */
    overflow-wrap: break-word;
}

h1 {
    font-size: clamp(2.15rem, 4.4vw, 3.5rem);
}

h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.55rem);
}

h3 {
    font-size: 1.25rem;
    line-height: 1.38;
}

h4 {
    font-size: 1.05rem;
}

p {
    margin: 0 0 1.2em;
    color: var(--muted);
}

a {
    color: var(--navy);
}

.eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}

.lede {
    font-size: 1.14rem;
    line-height: 1.8;
    max-width: 62ch;
}

/* Thin gold rule used under headings, echoing the logo's divider lines */
.rule-gold {
    width: 64px;
    height: 2px;
    background: var(--gold);
    border: 0;
    margin: 0 0 30px;
}

.text-center .rule-gold {
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
}

.text-center {
    text-align: center;
}

.text-center .lede {
    margin-left: auto;
    margin-right: auto;
}

section {
    padding: var(--section-y) 0;
}

/* Lets a section sit flush against the one below it */
.pb-none {
    padding-bottom: 0;
}

.section-cream {
    background-color: var(--cream);
}

.section-stone {
    background-color: var(--stone);
}

.section-navy {
    background-color: var(--navy);
}

.section-navy h2,
.section-navy h3 {
    color: var(--white);
}

.section-navy p {
    color: rgba(255, 255, 255, 0.82);
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: var(--white);
    padding: 12px 20px;
    z-index: 2000;
}

.skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    z-index: 1000;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    will-change: transform;
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

.site-header .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    max-width: none;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Header is three zones: brand hard left, nav centred, actions hard right.
   Brand and actions share the leftover space equally so the nav sits on the
   true centre of the header rather than the centre of what is left over. */
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    text-decoration: none;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: flex-start;
}

/* The brand logo file is a stacked lockup (emblem above the typeset name).
   At header size the typeset name inside the image would render around 7px
   and be unreadable, so we window in on the circular NC emblem only and set
   the name in live text beside it. Numbers below assume the 1500x1000 file:
   the emblem sits at roughly x 460-1040, y 60-600, so at 0.1 scale it lands
   in a 58x54 box offset by -46px / -6px. */
.brand-mark {
    position: relative;
    display: block;
    width: 62px;
    height: 60px;
    overflow: hidden;
    flex-shrink: 0;
}

.brand-mark img {
    position: absolute;
    width: 150px;
    height: 100px;
    left: -46px;
    top: -2px;
    max-width: none;
}

/* Text lockup shown beside (or instead of) the logo image */
.brand-text {
    font-family: var(--font-display);
    line-height: 1.15;
}

.brand-text .brand-kicker {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

.brand-text .brand-name {
    display: block;
    font-size: 1.15rem;
    color: var(--navy);
    letter-spacing: 0.01em;
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex: 0 1 auto;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    flex: 1 1 0;
    min-width: 0;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-nav a {
    position: relative;
    text-decoration: none;
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding-bottom: 4px;
    transition: color 0.22s ease;
}

.site-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.26s ease;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
    color: var(--navy);
}

.site-nav a:hover::after,
.site-nav a[aria-current='page']::after {
    transform: scaleX(1);
}

/* Client Login now lives in the right-hand action group rather than in the
   nav, so it carries the nav link styling on its own. */
.header-actions .client-login-link {
    order: 3;
    position: relative;
    text-decoration: none;
    color: var(--navy);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding-bottom: 4px;
    white-space: nowrap;
    transition: color 0.22s ease;
}

.header-actions .client-login-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.26s ease;
}

.header-actions .client-login-link:hover::after,
.header-actions .client-login-link[aria-current='page']::after {
    transform: scaleX(1);
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--rule);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 11px 16px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Language selector
   -------------------------------------------------------------------------- */

.lang-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.lang-switch .lang-icon {
    width: 15px;
    height: 15px;
    fill: var(--navy);
    opacity: 0.75;
    flex-shrink: 0;
    pointer-events: none;
}

/* The button that opens the panel. Shows the language currently in view. */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--navy);
    padding: 7px 9px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lang-toggle:hover,
.lang-switch.is-open .lang-toggle {
    border-color: var(--rule);
    background-color: var(--cream);
}

.lang-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.lang-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--navy);
    transition: transform 0.2s ease;
}

.lang-switch.is-open .lang-caret {
    transform: rotate(180deg);
}

/* The panel. `hidden` on the <ul> keeps it closed with no JS at all; the
   links are still in the HTML, so crawlers follow every language. */
.lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    min-width: 170px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--rule);
    box-shadow: 0 10px 26px rgba(14, 29, 64, 0.13);
}

.lang-menu[hidden] {
    display: none;
}

.lang-menu a {
    display: block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    text-decoration: none;
    padding: 9px 18px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-menu a:hover,
.lang-menu a:focus-visible {
    background-color: var(--cream);
    color: var(--navy);
    outline: none;
}

/* The language currently being viewed, marked with a gold tick */
.lang-menu a[aria-current='true'] {
    font-weight: 700;
    color: var(--navy);
    position: relative;
}

.lang-menu a[aria-current='true']::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 15px;
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Screen-reader-only text
   -------------------------------------------------------------------------- */

.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;
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 16px 32px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.btn-gold {
    background-color: var(--gold);
    color: var(--navy-deep);
    border-color: var(--gold);
}

.btn-gold:hover {
    background-color: var(--gold-light);
    border-color: var(--gold-light);
}

.btn-navy {
    background-color: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}

.btn-navy:hover {
    background-color: var(--navy-deep);
    border-color: var(--navy-deep);
}

.btn-outline {
    background-color: transparent;
    color: var(--navy);
    border-color: var(--navy);
}

.btn-outline:hover {
    background-color: var(--navy);
    color: var(--white);
}

/* On dark fills */
.section-navy .btn-outline,
.hero .btn-outline {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.55);
}

.section-navy .btn-outline:hover,
.hero .btn-outline:hover {
    background-color: var(--white);
    color: var(--navy);
    border-color: var(--white);
}

.btn-sm {
    padding: 12px 22px;
    font-size: 0.72rem;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.text-center .btn-row {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    background-color: var(--navy);
    /* Navy gradient over the hero photo. The navy stays underneath as a
       fallback, so the section still reads correctly if the image is swapped
       out or fails to load.

       Each hero is declared twice: a JPEG first, then the same rule again with
       image-set() offering WebP. A browser that understands image-set() takes
       the second declaration and picks WebP; one that does not ignores it and
       keeps the JPEG. This is the home page's largest paint, so it is the one
       place where the saving actually moves a Core Web Vitals number. */
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.86) 0%, rgba(21, 42, 91, 0.74) 55%, rgba(36, 64, 111, 0.64) 100%),
        url('images/home-hero-wide-opt.jpg');
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.86) 0%, rgba(21, 42, 91, 0.74) 55%, rgba(36, 64, 111, 0.64) 100%),
        image-set(url('images/home-hero-wide.webp') type('image/webp'),
                  url('images/home-hero-wide-opt.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
    color: var(--white);
    padding: 132px 0;
    overflow: hidden;
}

/* Faint gold arc echoing the logo mark */
.hero::after {
    content: '';
    position: absolute;
    right: -170px;
    top: -120px;
    width: 620px;
    height: 620px;
    border: 1px solid rgba(207, 164, 87, 0.28);
    border-radius: 50%;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero-inner {
    max-width: 780px;
}

.hero h1 {
    color: var(--white);
    margin-bottom: 26px;
}

.hero p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.16rem;
    line-height: 1.8;
    max-width: 60ch;
}

.hero .eyebrow {
    color: var(--gold-light);
}

/* Shorter hero for interior pages */
.hero-compact {
    padding: 92px 0;
}

.hero-compact h1 {
    font-size: clamp(2rem, 3.6vw, 2.9rem);
}

/* --------------------------------------------------------------------------
   Per-page hero photos

   Each page gets its own image, and each overlay is tuned to that photo rather
   than shared: a bright, colourful photo needs a heavier navy wash to stay in
   palette, a dark one needs less or it turns to mud. The navy underneath is the
   fallback, so a missing image still reads correctly.
   -------------------------------------------------------------------------- */

/* Gavel on a US flag. Strongly red/white/blue, so the heaviest, flattest
   overlay of the set — the photo reads as silhouette, not colour. */
.hero-services {
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.93) 0%, rgba(21, 42, 91, 0.88) 100%),
        url('images/services-hero-opt.jpg');
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.93) 0%, rgba(21, 42, 91, 0.88) 100%),
        image-set(url('images/services-hero.webp') type('image/webp'),
                  url('images/services-hero-opt.jpg') type('image/jpeg'));
    background-position: center 45%;
}

/* Two people working through documents at a table. Already soft and neutral,
   so a lighter wash keeps the figures legible. */
.hero-about {
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.88) 0%, rgba(21, 42, 91, 0.78) 100%),
        url('images/about-hero-opt.jpg');
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.88) 0%, rgba(21, 42, 91, 0.78) 100%),
        image-set(url('images/about-hero.webp') type('image/webp'),
                  url('images/about-hero-opt.jpg') type('image/jpeg'));
    background-position: center 35%;
}

/* Newly naturalized citizens taking the Oath of Allegiance. Bright and busy,
   so a firmer wash; positioned to keep the raised hands in frame. */
.hero-faq {
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.9) 0%, rgba(21, 42, 91, 0.84) 100%),
        url('images/faq-hero-opt.jpg');
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.9) 0%, rgba(21, 42, 91, 0.84) 100%),
        image-set(url('images/faq-hero.webp') type('image/webp'),
                  url('images/faq-hero-opt.jpg') type('image/jpeg'));
    background-position: center 30%;
}

/* Writing in a notebook. Already dark and low-key, so the lightest wash. */
.hero-blog {
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.86) 0%, rgba(21, 42, 91, 0.76) 100%),
        url('images/blog-hero-opt.jpg');
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.86) 0%, rgba(21, 42, 91, 0.76) 100%),
        image-set(url('images/blog-hero.webp') type('image/webp'),
                  url('images/blog-hero-opt.jpg') type('image/jpeg'));
    background-position: center 40%;
}

/* --------------------------------------------------------------------------
   Blog hero type — "Immigration Insights"

   Scoped to .hero-blog so the shared .hero h1 / .hero p rules above keep
   governing the home, services, about, FAQ and legal heroes untouched.

   The doubled class (.hero.hero-blog) is deliberate: `.hero-compact h1` carries
   the same 0-1-1 specificity, so this wins on specificity rather than on source
   order, and stays correct if the hero rules are ever reordered.
   -------------------------------------------------------------------------- */

.hero.hero-blog h1 {
    font-family: var(--font-display);   /* Libre Baskerville 400, self-hosted */
    font-weight: 400;
    font-size: clamp(2.25rem, 4.2vw, 3.35rem);
    line-height: 1.14;
    letter-spacing: -0.022em;
    color: var(--white);
    margin: 0 0 20px;
    text-wrap: balance;
    /* Carried over from the base h1 rule: the ru/uk headings contain single
       words longer than a 320px line box, and .hero clips its overflow. */
    overflow-wrap: break-word;
}

/* The class is the intent; the child selector keeps the es/ru/uk blog heroes
   in step until their <p> picks up the class too. */
.hero.hero-blog .hero-lede,
.hero.hero-blog .hero-inner > p:not(.post-meta) {
    max-width: 48ch;
    margin: 0;
    font-family: var(--font-body);      /* Almarai 400, self-hosted */
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.005em;
    color: rgb(255 255 255 / 95%);
    text-wrap: balance;
    /* The wash bottoms out at 0.76 alpha, so a highlight in the photo is the
       worst case for the lede: 6.10:1 there, 12.64:1 on the navy fallback.
       Costs nothing on flat navy, holds the line where the image is bright. */
    text-shadow: 0 1px 2px rgb(14 29 64 / 35%);
}

@media (prefers-contrast: more) {
    .hero.hero-blog .hero-lede,
    .hero.hero-blog .hero-inner > p:not(.post-meta) {
        color: #fff;
    }
}

/* Filling in paperwork. Shared by Terms and Privacy — they are a matched pair
   of fine-print pages, and giving them one image reads as deliberate. */
.hero-legal {
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.9) 0%, rgba(21, 42, 91, 0.82) 100%),
        url('images/legal-hero-opt.jpg');
    background-image:
        linear-gradient(115deg, rgba(14, 29, 64, 0.9) 0%, rgba(21, 42, 91, 0.82) 100%),
        image-set(url('images/legal-hero.webp') type('image/webp'),
                  url('images/legal-hero-opt.jpg') type('image/jpeg'));
    background-position: center 55%;
}

.secure-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 34px;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.78);
}

.secure-note svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: var(--gold-light);
}

/* Credential strip directly under the hero */
.credential-bar {
    background: var(--navy-deep);
    padding: 22px 0;
    border-top: 1px solid rgba(207, 164, 87, 0.25);
}

.credential-bar .container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.credential-bar span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-align: left;
}

.credential-bar span::before {
    content: "\2713";
    display: inline-grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid rgba(207, 164, 87, 0.55);
    border-radius: 50%;
    background: rgba(207, 164, 87, 0.1);
    color: var(--gold-light);
    font-size: 0.75rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.service-grid {
    display: grid;
    /* min() rather than a bare 290px floor: at 320px the grid's content box is
       279px, so a hard floor pushes the single track 11px past the page edge.
       Wherever the container is at least 290px wide — every layout from a
       narrow phone up — min() still resolves to 290px and nothing moves. */
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 0;
    margin-top: 54px;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}

.service-card {
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 42px 34px;
    background: var(--white);
    transition: background-color 0.25s ease;
}

.service-card:hover {
    background-color: var(--cream);
}

.service-card .form-no {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.service-card h3 {
    margin-bottom: 12px;
}

.service-card p {
    font-size: 0.97rem;
    margin: 0;
}

/* Card heading links (home page overview → detail page) */
.service-card h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.service-card h3 a:hover {
    color: var(--navy-soft);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Service capstone — one offering that is not a peer of the eight above it

   Citizenship is where a family-based journey ends rather than another filing
   within it, and it does not want to be a ninth card: .service-grid is
   auto-fit, so at wide widths it settles on four across and a ninth card would
   sit alone on a row of its own.

   So it becomes a full-width band instead. It continues the grid's borders, so
   it reads as part of the same system rather than a separate component, while
   the gold ground and the horizontal layout mark it as a different kind of
   thing — the destination, not another step. No margin-top: it sits flush under
   the last row, whose cards already carry the dividing border.
   -------------------------------------------------------------------------- */
.service-capstone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 40px;
    padding: 36px 34px;
    background: var(--gold-pale);
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

/* Text takes the room it needs and the action falls to the end; below ~700px
   the flex-wrap drops the action onto its own line without a media query. */
.service-capstone-body {
    flex: 1 1 340px;
}

.service-capstone .form-no {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}

.service-capstone h3 {
    margin-bottom: 10px;
}

.service-capstone h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.service-capstone h3 a:hover {
    color: var(--navy-soft);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 4px;
}

.service-capstone p {
    font-size: 0.97rem;
    margin: 0;
    max-width: 64ch;
}

/* --------------------------------------------------------------------------
   Service detail rows (services page)
   -------------------------------------------------------------------------- */

.services-overview {
    padding-bottom: 72px;
}

.service-index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 980px;
    margin: 48px auto 0;
}

.service-index a {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 64px;
    padding: 14px 18px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--white);
    color: var(--navy);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.service-index a span {
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.service-index a:hover,
.service-index a:focus-visible {
    border-color: var(--gold);
    box-shadow: 0 8px 20px rgba(20, 34, 56, 0.08);
    transform: translateY(-2px);
}

.services-list {
    padding-top: 72px;
}

.service-detail-list {
    display: grid;
    gap: 18px;
}

.service-detail {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 52px;
    padding: 56px 0;
    border-top: 1px solid var(--rule);
    scroll-margin-top: 28px;
}

.service-detail:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.services-list .service-detail {
    padding: 46px;
    border: 1px solid var(--rule);
    border-radius: 5px;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(20, 34, 56, 0.04);
}

.services-list .service-detail:first-of-type {
    padding-top: 46px;
}

.service-detail .detail-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.service-detail .detail-number {
    display: block;
    margin-bottom: 12px;
    color: rgba(20, 34, 56, 0.22);
    font-family: var(--font-display);
    font-size: 2.7rem;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-search {
    position: relative;
    z-index: 10;
    width: 100%;
    margin: 0;
}

.faq-search label {
    display: block;
    margin-bottom: 10px;
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

.faq-search-control {
    position: relative;
}

.faq-search-control svg {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 20px;
    height: 20px;
    fill: var(--gold);
    pointer-events: none;
    transform: translateY(-50%);
}

.faq-search-control input {
    width: 100%;
    min-height: 56px;
    padding: 13px 18px 13px 50px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    box-shadow: 0 7px 20px rgba(20, 34, 56, 0.05);
}

.faq-search-control input:focus {
    border-color: var(--gold);
    outline: 3px solid rgba(198, 161, 91, 0.15);
}

.faq-search-control input::placeholder {
    color: var(--muted);
}

.faq-search-status {
    min-height: 1.4em;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.faq-search-results[hidden] {
    display: none !important;
}

.faq-search-results {
    position: absolute;
    top: calc(100% - 24px);
    left: 0;
    right: 0;
    z-index: 20;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-top-color: rgba(198, 161, 91, 0.45);
    border-radius: 0 0 4px 4px;
    background: var(--white);
    box-shadow: 0 16px 30px rgba(20, 34, 56, 0.14);
}

.faq-search-result {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border: 0;
    background: var(--white);
    color: var(--navy);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.faq-search-result + .faq-search-result {
    border-top: 1px solid var(--rule);
}

.faq-search-result:hover,
.faq-search-result.is-active {
    background: var(--cream);
}

.faq-search-result strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1.35;
}

.faq-search-result span {
    display: block;
    margin-top: 4px;
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.faq-note {
    max-width: 860px;
    margin: 0 auto;
    padding: 18px 22px;
    border-left: 3px solid var(--gold);
    background: var(--cream);
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.faq-note strong {
    color: var(--navy);
}

.faq-index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
}

.faq-index a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 13px 17px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: #f7efe0;
    color: var(--navy);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.faq-index a span {
    color: var(--gold);
    font-size: 0.7rem;
}

.faq-index a:hover,
.faq-index a:focus-visible {
    border-color: var(--gold);
    background: var(--cream);
}

.faq-section {
    padding-top: 72px;
}

.faq-section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
    align-items: end;
    gap: 48px;
    max-width: 980px;
    margin: 0 auto 42px;
}

.faq-section-intro {
    margin: 0;
}

.faq-section-intro h2 {
    margin: 8px 0 12px;
}

.faq-section-intro p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
}

.faq-section > .container > .faq-index {
    max-width: 980px;
    margin-bottom: 54px;
}

.faq-groups {
    display: grid;
    gap: 36px;
    max-width: 980px;
    margin: 0 auto;
}

.faq-group {
    display: block;
    padding: 0;
    scroll-margin-top: 28px;
}

.faq-group-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 5px 5px 0 0;
    background: var(--navy);
}

.faq-group-heading .eyebrow {
    margin: 0;
    color: var(--gold-light);
}

.faq-group-heading h2 {
    margin: 0;
    color: var(--white);
    font-size: 1.3rem;
}

.faq-list {
    overflow: hidden;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
    background: var(--white);
    box-shadow: 0 8px 24px rgba(20, 34, 56, 0.04);
}

.faq-list details + details {
    border-top: 1px solid var(--rule);
}

.faq-list summary {
    position: relative;
    padding: 22px 62px 22px 24px;
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(198, 161, 91, 0.55);
    border-radius: 50%;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 23px;
    text-align: center;
    transform: translateY(-50%);
}

.faq-list details[open] summary::after {
    content: "\2212";
}

.faq-list summary:hover {
    background: var(--cream);
}

.faq-answer {
    padding: 0 62px 22px 24px;
}

.faq-answer p {
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
}

.service-detail h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    margin-bottom: 14px;
}

.service-detail p:last-of-type {
    margin-bottom: 0;
}

/* Gold-tick list of what a service covers */
.check-list {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.check-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
    color: var(--muted);
    font-size: 0.97rem;
}

.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Legal documents (terms, privacy)
   -------------------------------------------------------------------------- */

/* Same guard as the headings, for the body of the policies: these pages are
   the ones carrying unbroken URLs, addresses and long Slavic compounds. */
.legal-doc,
.legal-contact {
    overflow-wrap: break-word;
}

.legal-doc {
    max-width: 780px;
    margin: 0 auto;
}

.legal-doc h2 {
    font-size: 1.32rem;
    margin-top: 2.4em;
    margin-bottom: 0.5em;
}

.legal-doc h2:first-of-type {
    margin-top: 0;
}

.legal-doc p {
    font-size: 1rem;
    line-height: 1.78;
}

.legal-doc p:last-child {
    margin-bottom: 0;
}

/* Effective date / document identity line under the heading */
.legal-meta {
    margin-bottom: 34px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.88rem;
    letter-spacing: 0.03em;
}

.legal-meta strong {
    color: var(--navy);
    font-weight: 700;
}

/* Note about which language version governs */
.legal-note {
    margin: 0 0 36px;
    padding: 20px 24px;
    background: var(--gold-pale);
    border-left: 3px solid var(--gold);
}

.legal-note p {
    margin: 0;
    font-size: 0.93rem;
    color: #5a4a2c;
}

.legal-contact {
    margin-top: 2.4em;
    padding-top: 26px;
    border-top: 1px solid var(--rule);
}

.legal-contact p {
    margin-bottom: 0.4em;
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.post-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--rule);
}

/* The list is empty until blog-live.js fills it, and `hidden` is how it says so.
   A class that sets display outranks the browser's own [hidden] rule, so without
   this the empty list still painted its 1px top border: a rule floating above the
   "Coming Soon" box, drawn by an element that is supposed to be gone. */
.post-list[hidden] {
    display: none;
}

.post-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 42px;
    padding: 42px 0;
    border-bottom: 1px solid var(--rule);
}

.post-card .post-date {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.post-card h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.post-card h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-card h3 a:hover {
    color: var(--navy-soft);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 4px;
}

.post-card p {
    margin-bottom: 16px;
}

/* Text link with a gold arrow, used for "read more" */
.link-more {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 3px;
    transition: color 0.2s ease;
}

.link-more:hover {
    color: var(--gold);
}

/* Empty state for a section with no content yet */
.empty-state {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 64px 36px;
    border: 1px solid var(--rule);
    background: var(--white);
}

.empty-state .empty-mark {
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: var(--gold);
    line-height: 1;
    display: block;
    margin-bottom: 22px;
}

.empty-state h2 {
    font-size: 1.7rem;
    margin-bottom: 14px;
}

.empty-state p {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   About / attorney bio — text beside portrait
   -------------------------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 78px;
    align-items: center;
}

.portrait-frame {
    position: relative;
}

/* Gold offset frame behind the portrait */
.portrait-frame::before {
    content: '';
    position: absolute;
    inset: 22px -22px -22px 22px;
    border: 1px solid var(--gold);
    pointer-events: none;
}

/* The portrait is wrapped in <picture> so a WebP can be offered ahead of the
   JPEG. <picture> is inline by default, which would leave a strip of
   line-height under the image; blocking it removes that. */
.portrait-frame picture {
    display: block;
}

.portrait-frame img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background-color: var(--stone);
}

.bio-note {
    margin-top: 30px;
    padding: 22px 26px;
    background: var(--gold-pale);
    border-left: 3px solid var(--gold);
}

.bio-note p {
    margin: 0;
    font-size: 0.95rem;
    color: #5a4a2c;
}

/* --------------------------------------------------------------------------
   Process steps
   -------------------------------------------------------------------------- */

.step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 44px;
    margin-top: 56px;
}

.step {
    text-align: left;
}

.step .step-no {
    font-family: var(--font-display);
    font-size: 2.1rem;
    color: var(--gold);
    line-height: 1;
    display: block;
    margin-bottom: 16px;
}

.step h3 {
    color: var(--white);
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.step p {
    font-size: 0.96rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Contact / consultation form
   -------------------------------------------------------------------------- */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 78px;
    align-items: start;
}

.contact-detail {
    margin-bottom: 30px;
}

.contact-detail h4 {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 7px;
}

.contact-detail p,
.contact-detail a {
    margin: 0;
    font-size: 1.04rem;
    color: var(--ink);
    text-decoration: none;
}

.contact-detail a:hover {
    color: var(--navy);
    text-decoration: underline;
}

.contact-form {
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 42px 40px;
}

.field {
    margin-bottom: 24px;
}

.field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 13px 14px;
    transition: border-color 0.2s ease;
}

.field textarea {
    min-height: 132px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--navy);
}

.field input::placeholder,
.field textarea::placeholder {
    color: #9a99a4;
}

/* Consent checkbox layout for contact form */
.consent-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}

.consent-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 4px;
}

.consent-field label {
    font-size: 0.94rem;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
}

.contact-form .btn {
    width: 100%;
}

.form-disclaimer {
    margin: 20px 0 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Disclaimers
   -------------------------------------------------------------------------- */

.disclaimer-section {
    background: var(--stone);
    padding: 64px 0;
}

.disclaimer-box {
    max-width: 860px;
    margin: 0 auto;
    border-left: 3px solid var(--gold);
    padding-left: 28px;
}

.disclaimer-box h2 {
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.disclaimer-box p {
    font-size: 0.9rem;
    line-height: 1.72;
    margin-bottom: 0.9em;
}

.disclaimer-box p:last-child {
    margin-bottom: 0;
}

.disclaimer-box strong {
    color: var(--navy);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--navy-deep);
    color: rgba(255, 255, 255, 0.76);
    padding: 76px 0 32px;
    font-size: 0.92rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 56px;
}

.site-footer h4 {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}

.footer-brand .footer-lockup {
    font-family: var(--font-display);
    font-size: 1.18rem;
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 14px;
}

.site-footer p {
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.8em;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: 10px;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--gold-light);
}

.footer-disclaimer {
    margin-top: 46px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-disclaimer > h4 {
    margin-bottom: 20px;
}

.footer-disclaimer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 56px;
}

.footer-disclaimer-item {
    padding-left: 18px;
    border-left: 2px solid rgba(198, 161, 91, 0.55);
}

.footer-disclaimer-item h5 {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-disclaimer p {
    margin-bottom: 0.65em;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    line-height: 1.65;
}

.footer-disclaimer p:last-child {
    margin-bottom: 0;
}

.footer-bottom {
    max-width: var(--container);
    margin: 54px auto 0;
    padding: 26px 32px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}

.footer-legal {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* The header gives up the three-zone grid long before the rest of the page
   changes shape. Squeezing was tried first — thinner CTA, tighter gutters —
   and it was not enough: the nav is the grid's centre column at its natural
   width, the side columns can shrink but their contents cannot, so past a
   point the last links simply sit on top of the language button. Measured,
   that point is different in every language this site speaks: English clears
   at 1140, Spanish at 1320, Russian at 1340, Ukrainian only at 1400 — and a
   phone held sideways (an iPhone Pro Max is 956px) is deep inside all of
   them. One switch at the widest need, rather than four language-scoped ones,
   because the header keeping its shape when the reader changes language is
   worth more than inline links on a mid-sized English window. */
@media (max-width: 1400px) {
    .site-nav a,
    .header-actions .client-login-link {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    /* The toggle, the Client Login link and the language button are the only
       route to the nav, the portal and the language switch on a phone, and
       below 620px they sit 6px apart. Each gets a real 44px box; the padding
       that remains is only there to keep the label off the border, so
       min-height/min-width does the sizing from here down. */
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        line-height: 1;
    }

    .header-actions .client-login-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 4px;
    }

    /* The gold rule is drawn on the box, so lift it off a bottom edge that is
       now well below the text and it keeps hugging the label. */
    .header-actions .client-login-link::after {
        bottom: 12px;
    }

    .lang-toggle {
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }

    /* Collapsed menu, opened by the toggle button */
    .site-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--white);
        border-bottom: 1px solid var(--rule);
        box-shadow: 0 12px 24px rgba(14, 29, 64, 0.09);
        padding: 8px 0;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a {
        padding: 15px 32px;
    }

    .site-nav a::after {
        display: none;
    }

    .site-header .container {
        display: flex;
        position: relative;
        column-gap: 16px;
    }

    /* Brand left; everything else gathers on the right, with the menu button
       outermost — the corner a thumb already lives in. */
    .brand {
        order: 1;
        flex: 0 1 auto;
    }

    .header-actions {
        order: 2;
        margin-left: auto;
        flex: 0 0 auto;
        gap: 14px;
    }

    .nav-wrap {
        order: 3;
        flex: 0 0 auto;
    }

    .header-cta {
        display: none;
    }

    /* Scale the emblem window down proportionally */
    .brand-mark {
        width: 50px;
        height: 48px;
    }

    .brand-mark img {
        width: 120px;
        height: 80px;
        left: -37px;
        top: -2px;
    }
}

@media (max-width: 1080px) {
    :root {
        --section-y: 82px;
    }

    .split,
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .service-detail {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 44px 0;
    }

    .services-list .service-detail,
    .services-list .service-detail:first-of-type {
        gap: 18px;
        padding: 38px;
    }

    .post-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 34px 0;
    }

    .portrait-frame {
        max-width: 420px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 860px) {
    :root {
        --section-y: 64px;
    }

    .credential-bar .container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-index {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .faq-group {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .faq-section-header {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 28px;
    }

    body {
        font-size: 16px;
    }

    /* The whole compact header — toggle, dropdown, 44px boxes on the trio of
       controls — lives in the 1080px block now, since the band up to there
       needs it too. Only page-body rules remain here. */
    .hero {
        padding: 88px 0;
    }

    .hero::after {
        right: -260px;
        top: -180px;
    }

    .container,
    .footer-bottom {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* The gutter above is 20px, but the offset frame reaches 22px past the
       portrait on the right — 2px outside the viewport. Nothing in the chain
       clips it (the .portrait-frame max-width override cannot reach a
       pseudo-element), so the whole document scrolls sideways. 14px stays
       inside the gutter and keeps the offset reading as an offset. */
    .portrait-frame::before {
        inset: 14px -14px -14px 14px;
    }

    .contact-form {
        padding: 30px 24px;
    }

    /* The office phone and address in this block are plain anchors sitting in a
       single line box. With the header CTA gone at this width they are the main
       way a visitor calls or writes from the page, so give them a real box. */
    .contact-detail a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* .header-cta is hidden at this width, which leaves the footer's tel: as
       the only tap-to-call control on the site. Move the 10px that separated
       the rows inside the link instead, so the target grows to 44px while the
       list keeps roughly the same rhythm. */
    .site-footer li {
        margin-bottom: 0;
    }

    .site-footer li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Same for the legal row: it already wraps, so taller links just take more
       lines. The row gap goes to 0 because the boxes now supply it. */
    .footer-legal {
        gap: 0 22px;
    }

    .footer-legal a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-disclaimer-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 620px) {
    .credential-bar .container {
        grid-template-columns: 1fr;
    }

    .credential-bar span {
        justify-content: flex-start;
        min-height: 52px;
    }

    .service-index {
        grid-template-columns: 1fr;
        margin-top: 36px;
    }

    .faq-index {
        grid-template-columns: 1fr;
    }

    .faq-groups {
        gap: 52px;
    }

    .faq-list summary {
        padding: 19px 54px 19px 20px;
        font-size: 1rem;
    }

    .faq-list summary::after {
        right: 18px;
    }

    .faq-answer {
        padding: 0 20px 20px;
    }

    /* The suggestion panel has no height limit of its own and site.js offers up
       to eight results. At this width a question wraps to three lines, so the
       list runs the better part of a thousand pixels down the page behind the
       on-screen keyboard. Cap it and let it scroll on its own; contain stops the
       page from taking over the scroll once the list reaches its end. */
    .faq-search-results {
        max-height: min(48vh, 320px);
        overflow: hidden auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .service-detail {
        padding: 36px 0;
    }

    .services-list .service-detail,
    .services-list .service-detail:first-of-type {
        padding: 30px 24px;
    }

    .brand-text .brand-name {
        font-size: 0.92rem;
    }

    .btn-row .btn {
        width: 100%;
    }

    /* Tighten the header so brand + menu + language fit one row */
    .site-header .container {
        gap: 8px;
        justify-content: flex-start;
    }

    .brand {
        gap: 7px;
        min-width: 0;
        flex-shrink: 1;
    }

    .brand-text {
        min-width: 0;
    }

    .brand-text .brand-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-text .brand-kicker {
        display: none;
    }

    .nav-wrap {
        gap: 6px;
        flex-shrink: 0;
    }

    .header-actions {
        gap: 6px;
    }

    /* Tight on width: shrink the label rather than drop it, since the brand
       name beside it already truncates to make room. */
    .header-actions .client-login-link {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    /* Horizontal padding only: the 44px min-height set at 860px governs the
       height, and vertical padding here would only fight it. */
    .nav-toggle {
        padding: 0 12px;
        font-size: 0.65rem;
    }

    .lang-switch {
        gap: 4px;
    }

    /* Collapse to just the globe and caret; the panel still names each
       language in full, so nothing is lost. */
    .lang-current {
        display: none;
    }

    .lang-toggle {
        gap: 5px;
        padding: 0 8px;
    }

    /* The panel rows are the language switch itself once .lang-current is
       hidden above, so they need to be tappable too: 0.85rem over the inherited
       line-height leaves a 41.8px row, just under the floor. */
    .lang-menu a {
        padding: 12px 18px;
    }

    .lang-menu a[aria-current='true']::after {
        top: 18px;
    }

    /* The gutter is 20px here and the grid track can now fall below 290px, so
       the card's own 34px sides are what is left squeezing the measure. */
    .service-card {
        padding: 32px 22px;
    }

    /* Styled to read as a button but built as a text link, so its box is only
       as tall as one small-caps line. inline-flex keeps the gold rule hugging
       the label while the box grows around it; the padding is lopsided so the
       rule stays close to the text rather than drifting to the box floor. */
    .link-more {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 12px 0 9px;
    }

    /* An 18px box is below the 24px floor and this one gates the form: miss it
       and the submit silently refuses. flex-shrink keeps it square beside a
       consent label that wraps to four or five lines here. */
    .consent-field input[type="checkbox"] {
        width: 24px;
        height: 24px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .consent-field {
        min-height: 44px;
    }

    /* The callout keeps its desktop 24px sides while the page gutter has
       already dropped to 20px, so the first thing a reader meets on the legal
       pages is set four words to the line. Give the measure back; the gold rule
       on the left is what carries the callout, not the inset. */
    .legal-note {
        padding: 16px 14px;
        margin-bottom: 26px;
    }
}

/* --------------------------------------------------------------------------
   A blog post — /blog/<slug>

   One page serves every post (blog-post.html); /blog-live.js fills it from the
   row the console published. These rules are the post itself: a reading
   measure, and the handful of elements portal/lib/prose.js can build.

   The same shape exists in portal.css for the preview beside the editor. Two
   files, two palettes, deliberately not shared: this is the public site's
   Baskerville-and-navy, that is the console's. What they agree on is that a
   post is a serif at a comfortable measure, and that is the only thing that has
   to match.
   -------------------------------------------------------------------------- */

/* Prose wants a narrower column than a three-across card grid does. 720px is
   about 75 characters at this size, which is the width the rest of the site's
   body copy already sits at inside its cards. */
.container-reading {
    max-width: 760px;
}

.hero-blog .eyebrow a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
}

.hero-blog .eyebrow a:hover {
    color: var(--gold-light);
}

.post-meta {
    font-family: var(--font-body);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-top: 18px;
    margin-bottom: 0;
}

.post-body {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--ink);
}

.post-body h2 {
    font-size: 1.5rem;
    margin-top: 48px;
    margin-bottom: 16px;
}

.post-body h2:first-child {
    margin-top: 0;
}

.post-body h3 {
    font-size: 1.15rem;
    margin-top: 34px;
    margin-bottom: 12px;
}

.post-body p {
    margin-bottom: 24px;
}

.post-body ul,
.post-body ol {
    margin: 0 0 24px;
    padding-left: 24px;
}

.post-body li {
    margin-bottom: 10px;
}

/* A pulled quotation, marked by the gold rule the rest of the site uses for
   emphasis rather than by italics alone — a long passage set in italic is the
   one thing on a page nobody reads. */
.post-body blockquote {
    margin: 0 0 28px;
    padding: 4px 0 4px 26px;
    border-left: 3px solid var(--gold);
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.7;
}

.post-body hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 42px 0;
}

.post-body a {
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 3px;
}

.post-body a:hover {
    color: var(--navy-soft);
}

.post-body strong {
    font-weight: 700;
}

/* The way back, under the post. A reader who has finished one is the likeliest
   person on the site to want another. */
.post-return {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
}

@media (max-width: 780px) {
    .post-body {
        font-size: 0.98rem;
        line-height: 1.8;
    }

    .post-body h2 {
        font-size: 1.3rem;
        margin-top: 38px;
    }

    .post-body blockquote {
        padding-left: 18px;
    }
}

/* Booking and verification use isolated frames, styled by the parent. */
.booking-dialog-open { overflow: hidden; }
.booking-dialog { width: min(1080px, calc(100vw - 40px)); height: min(900px, calc(100dvh - 40px)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--rule); border-top: 4px solid var(--gold); border-radius: 12px; background: var(--white); color: var(--navy); box-shadow: 0 24px 60px rgb(10 20 45 / 45%); }
.booking-dialog[open] { display: flex; flex-direction: column; }
.booking-dialog::backdrop { background: rgb(10 20 45 / 65%); }
.booking-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; flex: 0 0 auto; border-bottom: 1px solid var(--rule); }
.booking-dialog-header h2 { margin: 0; font-size: clamp(1.1rem, 3vw, 1.45rem); }
.booking-dialog-close { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--stone); color: var(--navy); font-size: 28px; line-height: 1; cursor: pointer; }
.booking-dialog-close:hover { background: var(--gold-pale); border-color: var(--gold); }
.booking-dialog-close:focus-visible, .booking-dialog-footer a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.booking-dialog-frame { display: block; width: 100%; flex: 1 1 auto; min-height: 0; border: 0; background: #fff; }
.booking-dialog-footer { flex: 0 0 auto; padding: 10px 20px; border-top: 1px solid var(--rule); text-align: center; font-size: 0.88rem; }
.booking-dialog-footer a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.contact-verification-frame { display: block; width: 100%; min-width: 0; height: 120px; border: 0; margin: 4px 0; }
@media (max-width: 600px) {
  .booking-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 8px; }
  .booking-dialog-header { padding: 10px 12px; }
  .booking-dialog-footer { padding: 10px 12px; }
}