/* ==========================================================================
   PROVISO - shared stylesheet
   One file for the whole site. Every page links to /assets/proviso.css.
   Change a colour here and it changes everywhere.

   Rules this file keeps to:
   - Square corners everywhere. The only exception is the Calendly widget.
   - One shadow value in the whole file: 0 8px 30px rgba(0,0,0,0.05).
   - Two accent colours: --accent and --gold.
   - Section rhythm 7rem 6%, dropping to 5rem 5% under 768px.
   - Content max-width 1100px. Article measure 680px.
   - Breakpoints at 968px and 768px only.

   Three things every page does:
   1. TYPE CONTRAST. Big things bigger, small things smaller. Hero to 4rem,
      section titles clamp(2rem, 3.6vw, 2.9rem), eyebrows 0.7rem / 0.28em.
   2. EVERYTHING RESPONDS TO THE CURSOR. Images in .frame wrappers scale to
      1.05 over 0.9s. .arrow spans travel 6px. Cards lift 2 to 4px. Links
      turn to --accent. Nothing animates on load.
   3. VARIED BAND RHYTHM. Consecutive sections never look the same: white,
      then warm paper, then dark, then white.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    --primary: #1a2e2b;
    --primary-mid: #2d4a47;
    --primary-light: #3d6a65;
    --accent: #4a9e97;
    --accent-subtle: #e8f4f2;
    --gold: #b8a06a;
    --text: #1a1a1a;
    --text-light: #555;
    --text-muted: #6e6e6e;      /* raised from #999 - the old value failed WCAG AA on white */
    --bg: #fafafa;
    --bg-warm: #f6f4f1;
    --white: #ffffff;
    --border: rgba(0,0,0,0.06);

    /* White-alpha scale for text sitting on the dark green sections.
       1 is the strongest, 4 the quietest. 3 and 4 were raised from
       0.45 and 0.25 because they failed contrast at the old values. */
    --on-dark-1: rgba(255,255,255,0.92);
    --on-dark-2: rgba(255,255,255,0.78);
    --on-dark-3: rgba(255,255,255,0.72);
    --on-dark-4: rgba(255,255,255,0.60);
    --on-dark-rule: rgba(255,255,255,0.14);
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; height: 100%; overflow-x: hidden; margin: 0; padding: 0; background: var(--primary); }
body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--primary);
    line-height: 1.75;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
    overflow-x: hidden;
}
section, div, footer, nav, main, article { margin: 0; }

h1, h2, h3, h4 {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    line-height: 1.35;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. NAVIGATION
   -------------------------------------------------------------------------- */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.98);
    padding: 0 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(16px);
    height: 76px;
    transition: all 0.4s ease;
}
nav.scrolled { height: 64px; border-bottom: 1px solid var(--border); }
/* width:auto matters - the markup carries width and height attributes so the
   browser can reserve the space, and without this the attribute width would
   win over the height set here and squash the logo. */
.logo img { height: 44px; width: auto; transition: height 0.4s ease; }
nav.scrolled .logo img { height: 38px; }

.nav-links {
    display: flex;
    gap: 2.75rem;
    list-style: none;
    align-items: center;
}
.nav-links a {
    text-decoration: none;
    color: var(--text-light);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.3s;
}
.nav-links a:hover { color: var(--primary); }

.nav-cta {
    background: var(--primary);
    color: var(--white) !important;
    padding: 0.55rem 1.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.3s;
    text-decoration: none;
}
.nav-cta:hover { background: var(--primary-mid); }

.menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 10px; background: none; border: none; }
.menu-toggle span { width: 22px; height: 1.5px; background: var(--text); transition: 0.3s; }

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 6%;
    background: linear-gradient(160deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 45%, rgba(255,255,255,0.3) 100%), url('../hero.jpg');
    background-size: cover;
    background-position: center;
}
.hero-content { max-width: 620px; animation: fadeIn 1s ease forwards; }
.hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.5rem;
}
.hero h1 {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    color: var(--primary);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}
.hero p {
    font-size: 1.05rem;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    max-width: 520px;
    line-height: 1.8;
}
.hero-actions { display: flex; gap: 1rem; align-items: center; }

/* --------------------------------------------------------------------------
   4b. FULL-BLEED HERO (.hero-x)
   The homepage hero. Photograph edge to edge, a dark wash over it so white
   type stays readable, and the words sitting on the bottom edge. The image
   starts at 1.04 and creeps to 1.09 while the pointer is over it. That is
   the only slow move on the page and it is a hover, not a load.
   -------------------------------------------------------------------------- */
.hero-x {
    position: relative; min-height: 82vh; display: flex; align-items: flex-end;
    overflow: hidden; background: var(--primary); padding: 0;
}
.hero-x .bg {
    position: absolute; inset: 0;
    background: url('../hero.jpg') center / cover no-repeat;
    transform: scale(1.04); transition: transform 12s ease-out;
}
.hero-x:hover .bg { transform: scale(1.09); }
.hero-x::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,46,43,0.42) 0%, rgba(26,46,43,0.62) 55%, rgba(26,46,43,0.9) 100%);
}
.hero-x .inner { position: relative; z-index: 2; padding: 0 6% 5.5rem; max-width: 1180px; margin: 0 auto; width: 100%; }
.hero-x .eyebrow { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }
.hero-x h1 {
    font-size: clamp(2.4rem, 5.4vw, 4.1rem); color: var(--white); font-weight: 400;
    line-height: 1.1; letter-spacing: -0.02em; margin: 1.1rem 0 1.4rem; max-width: 19ch;
}
.hero-x p { color: var(--on-dark-2); font-size: 1.05rem; max-width: 52ch; line-height: 1.8; }
.hero-x .acts { display: flex; gap: 2rem; align-items: center; margin-top: 2.5rem; flex-wrap: wrap; }
.hero-x .btn-primary { background: var(--accent); border: none; padding: 1rem 2.4rem; font-size: 0.8rem; }
.hero-x .btn-primary:hover { background: var(--white); color: var(--primary); }
.hero-x .ghost {
    color: var(--white); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.35);
    padding-bottom: 0.35rem; transition: border-color 0.4s, color 0.4s;
}
.hero-x .ghost:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   4c. INTERIOR PAGE HERO (.page-hero)
   The compact version of .hero-x for every page that is not the homepage.
   Roughly 42vh, same dark wash, same eyebrow-then-serif-h1 order, optional
   lead paragraph underneath.

   Two forms:
     .page-hero               with a photograph, wrapped in .frame
     .page-hero--plain        no photograph, flat --primary

   Markup:
     <header class="page-hero">
       <div class="page-hero-media frame">
         <picture><source ... type="image/webp"><img ... loading="lazy"></picture>
       </div>
       <div class="page-hero-inner">
         <span class="section-eyebrow">Practice Area</span>
         <h1>...</h1>
         <p>optional lead</p>
       </div>
     </header>

   The page body that follows loses its own top padding, because the hero
   has already cleared the fixed navigation.
   -------------------------------------------------------------------------- */
.page-hero {
    position: relative; min-height: 42vh; display: flex; align-items: flex-end;
    overflow: hidden; background: var(--primary); padding: 0;
}
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media picture { display: block; width: 100%; height: 100%; }
.page-hero:hover .page-hero-media img { transform: scale(1.05); }
.page-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,46,43,0.45) 0%, rgba(26,46,43,0.68) 55%, rgba(26,46,43,0.92) 100%);
}
/* No photograph, so no wash is needed over one. */
.page-hero--plain::after { content: none; }
.page-hero-inner { position: relative; z-index: 2; padding: 8rem 6% 3.5rem; max-width: 1180px; margin: 0 auto; width: 100%; }
.page-hero-inner .section-eyebrow { margin-bottom: 1.1rem; }
.page-hero h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--white); font-weight: 400;
    line-height: 1.15; letter-spacing: -0.02em; margin: 0; max-width: 24ch;
}
.page-hero p { margin-top: 1.3rem; color: var(--on-dark-2); font-size: 1rem; line-height: 1.8; max-width: 56ch; }
/* The hero has cleared the nav, so the block under it starts closer up. */
.page-hero + .page, .page-hero + .article { padding-top: 4.5rem; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn-primary {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    padding: 0.85rem 2rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all 0.3s;
}
.btn-primary:hover { background: var(--primary-mid); }

.btn-text {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-text:hover { color: var(--accent); }
.btn-text::after { content: '\2192'; font-size: 1rem; }

/* --------------------------------------------------------------------------
   6. SECTION SHELL
   -------------------------------------------------------------------------- */
.divider-bar { background: var(--primary); padding: 1.1rem 6%; text-align: center; }
.divider-bar p { color: var(--on-dark-2); font-size: 0.82rem; letter-spacing: 0.04em; font-weight: 400; }

section { padding: 7rem 6%; }
.section-eyebrow {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;
    display: block;
}
.section-title {
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    line-height: 1.22; letter-spacing: -0.015em;
    color: var(--primary); margin-bottom: 1rem;
}
.section-lead { color: var(--text-light); font-size: 1.02rem; max-width: 56ch; margin-bottom: 4rem; line-height: 1.8; }

/* Small uppercase label used above the new article sub-blocks
   (sources, FAQ, related articles). Same eyebrow move, quieter colour. */
.block-label {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--primary-mid); margin-bottom: 1.25rem;
    display: block;
}

/* --------------------------------------------------------------------------
   6b. CURSOR RESPONSE
   The two primitives every page uses. Nothing here runs on load. Both only
   move when the pointer is over the thing that owns them.

   .frame  - wraps any image. The image fills it and grows to 1.05 when the
             link around it is hovered. overflow:hidden does the cropping,
             so the frame itself never moves and nothing reflows.
   .arrow  - wraps the arrow glyph inside a link. It travels 6px right.
   -------------------------------------------------------------------------- */
.frame { overflow: hidden; display: block; background: var(--primary); }
/* A <picture> is inline by default, which would stop the img resolving its
   height against the frame. Every image on the site is served as webp with
   a jpg fallback, so this rule is load-bearing, not decoration. */
.frame picture { display: block; width: 100%; height: 100%; }
.frame img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 0.5s;
}
a:hover .frame img { transform: scale(1.05); }

.arrow { display: inline-block; transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1); }
a:hover .arrow { transform: translateX(6px); }

/* .btn-text draws its arrow with ::after rather than a span, so it gets the
   same travel from the pseudo-element. */
.btn-text::after { transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1); display: inline-block; }
.btn-text:hover::after { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   7. CARD GRIDS
   -------------------------------------------------------------------------- */
.practices { background: var(--white); padding: 6.5rem 6% 7rem; }
.matters { background: var(--bg); }
.matters .practice-card { background: var(--white); }
.matters .practice-card:hover { background: var(--bg-warm); }
.practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; max-width: 1100px; }
.practice-card {
    padding: 3rem; border: 1px solid var(--border); margin: -0.5px;
    cursor: default; position: relative;
    transition: background 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.practice-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 0; height: 2px; background: var(--accent); transition: width 0.4s ease;
}
.practice-card:hover::before { width: 100%; }
/* Warm paper, a 2px lift, and the heading turns to accent. */
.practice-card:hover { background: var(--bg-warm); transform: translateY(-2px); }
.practice-card .card-number { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 1.25rem; }
.practice-card h3 { font-size: 1.25rem; color: var(--primary); margin-bottom: 0.75rem; transition: color 0.35s; }
.practice-card:hover h3 { color: var(--accent); }
.practice-card p { color: var(--text-light); font-size: 0.9rem; line-height: 1.7; }

/* A practice card that is a link to its service page. Same card, same
   2px accent rule on hover, plus the quiet uppercase cue at the bottom.
   The Recent Matters cards stay plain divs and are unaffected. */
a.practice-card { display: block; text-decoration: none; cursor: pointer; }
a.practice-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.practice-card .card-link {
    display: inline-block; margin-top: 1.5rem;
    color: var(--primary); font-weight: 500; font-size: 0.8rem;
    letter-spacing: 0.04em; text-transform: uppercase;
    transition: color 0.3s;
}
a.practice-card:hover .card-link { color: var(--accent); }

/* --------------------------------------------------------------------------
   8. FEATURED BLOCK
   -------------------------------------------------------------------------- */
.featured { background: var(--bg-warm); }
.featured-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; max-width: 1100px; }
.featured-content .section-eyebrow { color: var(--gold); }
.featured-content h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--primary); margin-bottom: 1.25rem; }
.featured-content p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 1rem; line-height: 1.75; }
.featured-points { margin-top: 1.5rem; list-style: none; }
.featured-points li { padding: 0.4rem 0; color: var(--text-light); font-size: 0.9rem; padding-left: 1.25rem; position: relative; }
.featured-points li::before { content: ''; position: absolute; left: 0; top: 0.85rem; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.featured-actions { margin-top: 2rem; }
.featured-image { width: 100%; height: 450px; object-fit: cover; }

/* --------------------------------------------------------------------------
   9. ABOUT AND PROCESS
   -------------------------------------------------------------------------- */
.about { background: var(--white); }
.about-inner { max-width: 700px; }
.about-inner p { color: var(--text-light); font-size: 0.98rem; margin-bottom: 1.25rem; line-height: 1.8; }

.process-section { background: var(--primary); color: var(--white); }
.process-section .section-eyebrow { color: var(--accent); }
.process-section .section-title { color: var(--white); }
.process-section .section-lead { color: var(--on-dark-2); }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1100px; }
.process-step { padding: 2.5rem 2rem; border-left: 1px solid var(--on-dark-rule); }
.process-step:first-child { border-left: none; }
.process-step .step-num { font-family: 'Libre Baskerville', serif; font-size: 2rem; color: var(--accent); margin-bottom: 1rem; font-weight: 400; }
.process-step h3 { color: var(--white); font-size: 1rem; margin-bottom: 0.6rem; }
.process-step p { color: var(--on-dark-3); font-size: 0.85rem; line-height: 1.65; }

/* --------------------------------------------------------------------------
   10. INSIGHT CARDS
   The only shadow in this stylesheet is on .insight-card:hover.
   -------------------------------------------------------------------------- */
.insights { background: var(--bg); }
.insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; max-width: 1100px; }
.insight-card { background: var(--white); transition: all 0.3s ease; text-decoration: none; display: block; overflow: hidden; }
.insight-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.05); }
.insight-card-image { width: 100%; height: 200px; object-fit: cover; }

/* Card head for an article that has no photograph. A flat block carrying
   the eyebrow over a serif line naming the law the article is built on.
   Same 200px height as the image so a mixed grid still lines up. */
.insight-card-block {
    height: 200px; padding: 1.75rem;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.insight-card-block--dark { background: var(--primary); }
.insight-card-block--warm { background: var(--bg-warm); border-bottom: 1px solid var(--border); }
.insight-card-block .block-eyebrow {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.25em;
    text-transform: uppercase; margin-bottom: 0.7rem; display: block;
}
.insight-card-block--dark .block-eyebrow { color: var(--accent); }
.insight-card-block--warm .block-eyebrow { color: var(--primary-light); }
.insight-card-block .block-mark {
    font-family: 'Libre Baskerville', serif; font-size: 1.05rem;
    line-height: 1.45; display: block;
}
.insight-card-block--dark .block-mark { color: var(--on-dark-1); }
.insight-card-block--warm .block-mark { color: var(--primary); }

.insight-card-content { padding: 1.75rem; }
.insight-card .card-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; display: block; }
.insight-card h3 { font-size: 1.05rem; color: var(--primary); margin-bottom: 0.6rem; line-height: 1.4; }
.insight-card p { color: var(--text-light); font-size: 0.88rem; margin-bottom: 0.75rem; }
.insight-card .read-more { color: var(--primary); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   11. ARTICLE AND PAGE SHELL
   These carry their own padding so an article renders correctly on any
   element. There is no display:none here and no inline override needed.
   -------------------------------------------------------------------------- */
.article, .page {
    background: var(--white);
    padding: 7rem 6%;
    padding-top: 8rem;
}
.article-container { max-width: 680px; margin: 0 auto; }
.page-container { max-width: 760px; margin: 0 auto; }

.article-header { margin-bottom: 3rem; }
.article-header .article-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; display: block; }
.article-header h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--primary); }

.article-content h2 { font-size: 1.2rem; color: var(--primary); margin: 2.5rem 0 0.75rem; }
.article-content h3 { font-size: 1.05rem; color: var(--primary); margin: 2rem 0 0.6rem; }
.article-content p { color: var(--text-light); margin-bottom: 1.25rem; font-size: 0.98rem; line-height: 1.8; }
.article-content hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.article-content ul, .article-content ol { margin: 0 0 1.5rem 1.15rem; color: var(--text-light); font-size: 0.98rem; line-height: 1.8; }
.article-content li { margin-bottom: 0.45rem; }
.article-content strong { color: var(--text); font-weight: 600; }
.article-content a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(0,0,0,0.25);
    transition: color 0.3s;
}
.article-content a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.article-cta { background: var(--bg-warm); padding: 2rem; border-left: 2px solid var(--accent); margin-top: 2.5rem; }
.article-cta p { color: var(--text); margin-bottom: 0; font-style: italic; font-size: 0.95rem; }
.article-cta .cta-link { display: inline-block; margin-top: 1rem; font-style: normal; color: var(--primary); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.article-cta .cta-link:hover { color: var(--accent); }

.close-article { display: inline-block; margin-top: 2rem; color: var(--primary); text-decoration: none; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.close-article:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   12. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb { margin-bottom: 1.75rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0; }
.breadcrumb li {
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-light); display: inline-flex; align-items: center; gap: 0.45rem;
}
.breadcrumb li:not(:last-child)::after { content: '/'; color: var(--text-muted); }
.breadcrumb a { color: var(--text-light); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--primary-light); }
.breadcrumb [aria-current="page"] { color: var(--primary); }

/* --------------------------------------------------------------------------
   13. ARTICLE META LINE
   Published / Last reviewed / what it was reviewed against.
   -------------------------------------------------------------------------- */
.article-meta {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}
.article-meta > span { display: inline-flex; flex-direction: column; gap: 0.15rem; }
.article-meta .meta-label {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--text-muted);
}
.article-meta .meta-value { font-size: 0.85rem; color: var(--text-light); }

/* --------------------------------------------------------------------------
   14. DIRECT-ANSWER BOX
   40 to 60 words answering the title question outright.
   -------------------------------------------------------------------------- */
.answer-box {
    background: var(--accent-subtle);
    border-left: 2px solid var(--accent);
    padding: 1.75rem 2rem;
    margin: 0 0 2.5rem;
}
.answer-box .answer-label {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--primary-mid); margin-bottom: 0.75rem;
    display: block;
}
.answer-box p { color: var(--text); font-size: 1rem; line-height: 1.75; margin: 0; }

/* --------------------------------------------------------------------------
   15. EDITORIAL TABLE
   Hairline rules, uppercase heads, no zebra striping, scrolls on mobile.
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 2rem 0 2.5rem; }
.editorial-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 520px; }
.editorial-table caption {
    caption-side: top; text-align: left;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--text-light); padding-bottom: 0.9rem;
}
.editorial-table th {
    text-align: left; font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--primary); padding: 0 1.25rem 0.75rem 0;
    border-bottom: 1px solid var(--primary-mid); vertical-align: bottom;
}
.editorial-table td {
    padding: 0.9rem 1.25rem 0.9rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-light); line-height: 1.65; vertical-align: top;
}
.editorial-table th:last-child, .editorial-table td:last-child { padding-right: 0; }
.editorial-table tbody tr:last-child td { border-bottom: none; }
.editorial-table td strong { color: var(--text); font-weight: 600; }
.table-note { font-size: 0.8rem; color: var(--text-light); line-height: 1.65; margin: -1.25rem 0 2.5rem; }

/* --------------------------------------------------------------------------
   16. DEFINITION LIST
   -------------------------------------------------------------------------- */
.def-list { margin: 2rem 0 2.5rem; border-top: 1px solid var(--border); }
.def-list dt {
    font-family: 'Libre Baskerville', serif; font-weight: 400;
    font-size: 1rem; color: var(--primary); padding-top: 1.25rem;
}
.def-list dd {
    color: var(--text-light); font-size: 0.95rem; line-height: 1.75;
    padding: 0.4rem 0 1.25rem; border-bottom: 1px solid var(--border); margin: 0;
}

/* --------------------------------------------------------------------------
   17. PULL-QUOTE
   -------------------------------------------------------------------------- */
.pull-quote { margin: 2.5rem 0; padding-left: 1.75rem; border-left: 2px solid var(--accent); }
.pull-quote p {
    font-family: 'Libre Baskerville', serif; font-style: italic;
    font-size: 1.1rem; line-height: 1.6; color: var(--primary); margin: 0;
}
.pull-quote cite {
    display: block; margin-top: 0.85rem; font-family: 'Inter', sans-serif;
    font-style: normal; font-size: 0.72rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--primary-light);
}

/* --------------------------------------------------------------------------
   18. SOURCES BLOCK
   Every law and section cited in the article, so a reader can check it.
   -------------------------------------------------------------------------- */
.sources { margin-top: 3rem; padding: 2rem; background: var(--bg); border-top: 2px solid var(--primary); }
.sources ol { list-style: none; counter-reset: src; margin: 0; }
.sources li {
    position: relative; padding: 0.7rem 0 0.7rem 2.25rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem; color: var(--text-light); line-height: 1.65;
}
.sources li:last-child { border-bottom: none; }
.sources li::before {
    counter-increment: src; content: counter(src);
    position: absolute; left: 0; top: 0.9rem;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; color: var(--text-muted);
}
.sources cite { font-style: normal; color: var(--primary); font-weight: 500; }
.sources .sources-note { font-size: 0.8rem; color: var(--text-light); line-height: 1.65; margin-top: 1.25rem; }

/* Sources fold. The full list stays in the page, so search engines and AI
   crawlers read every entry, but the reader sees one line until they click.
   Native <details>, the same pattern as the glossary: no script, keyboard
   accessible. The count in the summary is written into each page. */
.sources details.sources-fold > summary {
    list-style: none; cursor: pointer; display: flex; align-items: baseline;
    justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.sources details.sources-fold > summary::-webkit-details-marker { display: none; }
.sources details.sources-fold > summary .block-label { margin-bottom: 0; }
.sources-toggle {
    font-size: 0.78rem; letter-spacing: 0.04em; color: var(--accent);
    white-space: nowrap; transition: color 0.3s;
}
.sources-toggle::after { content: '+'; margin-left: 0.6rem; font-size: 1rem; line-height: 1; }
.sources details.sources-fold[open] .sources-toggle::after { content: '\2013'; }
.sources details.sources-fold > summary:hover .sources-toggle { color: var(--primary); }
.sources .when-open { display: none; }
.sources details.sources-fold[open] .when-open { display: inline; }
.sources details.sources-fold[open] .when-closed { display: none; }
.sources .sources-lead {
    font-size: 0.88rem; color: var(--text-light); line-height: 1.65;
    margin: 1.5rem 0 0.75rem; max-width: 62ch;
}

/* --------------------------------------------------------------------------
   19. FAQ LIST
   -------------------------------------------------------------------------- */
.faq { margin-top: 3rem; }
.faq-item { border-top: 1px solid var(--border); padding: 1.5rem 0; }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item h3 { font-size: 1rem; color: var(--primary); margin: 0 0 0.6rem; }
.faq-item p { color: var(--text-light); font-size: 0.95rem; line-height: 1.8; margin: 0; }

/* --------------------------------------------------------------------------
   20. DISCLAIMER LINE
   -------------------------------------------------------------------------- */
.disclaimer {
    margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
    font-size: 0.8rem; line-height: 1.7; color: var(--text-light);
}
.disclaimer a { color: var(--primary); }

/* --------------------------------------------------------------------------
   21. CATEGORY CHIP
   -------------------------------------------------------------------------- */
.category-chip {
    display: inline-block; font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent);
    border: 1px solid var(--border); padding: 0.35rem 0.75rem;
    text-decoration: none; transition: border-color 0.3s;
}
.category-chip:hover { border-color: var(--accent); }

/* --------------------------------------------------------------------------
   22. RELATED ARTICLES ROW
   Reuses .insight-card at three across.
   -------------------------------------------------------------------------- */
.related { background: var(--bg); padding: 4.5rem 6% 5.5rem; }
.related-inner { max-width: 1100px; margin: 0 auto; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.related .insight-card { background: var(--white); }
.related .insight-card-content { padding: 1.5rem; }

/* The three cards at the foot of an article must read as one set. The grid
   already gives them equal outer height; these rules equalise what sits
   inside, so the heading block occupies the same depth and the Read line
   lands on the same baseline in all three however long the titles run. */
.related .insight-card { display: flex; flex-direction: column; }
.related .insight-card-content { display: flex; flex-direction: column; flex: 1; }
.related .insight-card h3 { min-height: 2.8em; }
.related .insight-card p { flex: 1; }
.related .insight-card .read-more { margin-top: 0.25rem; }

/* --------------------------------------------------------------------------
   23. FILTER AND SEARCH BAR (insights listing page)
   The articles are in the HTML already. This only hides and shows them,
   so a crawler that does not run JavaScript still sees every card.
   -------------------------------------------------------------------------- */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
    align-items: center; justify-content: space-between;
    max-width: 1100px; margin-bottom: 2.5rem;
    padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);
}
.filter-search { flex: 1 1 240px; max-width: 320px; }
.filter-search input {
    width: 100%; font-family: 'Inter', sans-serif; font-size: 0.9rem;
    color: var(--text); background: var(--white);
    border: 1px solid var(--border); padding: 0.7rem 0.9rem; outline: none;
    transition: border-color 0.3s;
}
.filter-search input:focus { border-color: var(--accent); }
.filter-search input::placeholder { color: var(--text-muted); }
.filter-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; }
.filter-tag {
    font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light);
    background: none; border: 1px solid var(--border);
    padding: 0.45rem 0.9rem; cursor: pointer; transition: all 0.3s;
}
.filter-tag:hover { color: var(--primary); border-color: var(--primary-light); }
.filter-tag[aria-pressed="true"] { color: var(--white); background: var(--primary); border-color: var(--primary); }
.filter-empty { display: none; color: var(--text-light); font-size: 0.95rem; padding: 2.5rem 0; }
.filter-empty.visible { display: block; }
/* Both card components can be filtered. .read is display:flex, so the
   browser default for [hidden] is not enough on its own. */
.insight-card[hidden], .read[hidden] { display: none; }
/* The bar is written into the page with the hidden attribute and only
   revealed by the script. With JavaScript off the reader gets the full
   list rather than a search box that does nothing. */
.filter-bar[hidden] { display: none; }

/* --------------------------------------------------------------------------
   23b. HUB PAGES - insights listing and the six category pages
   -------------------------------------------------------------------------- */
.hub-intro { max-width: 680px; margin-bottom: 3rem; }
.hub-intro p { color: var(--text-light); font-size: 0.98rem; line-height: 1.8; margin-bottom: 1.25rem; }
.hub-intro p:last-child { margin-bottom: 0; }
.hub-intro a {
    color: var(--primary); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-thickness: 1px;
    text-decoration-color: rgba(0,0,0,0.25); transition: color 0.3s;
}
.hub-intro a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.hub-action { margin-top: 2rem; }
.insights .hub-action { margin-top: 3rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; }
.hub-intro .chip-row { margin-top: 1.75rem; }
.hub-back { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   23c. EDITORIAL BANDS
   Three band types that give a page its rhythm. They were written for the
   homepage and are reused on the hubs and the service pages. Put them in an
   order where no two consecutive bands look alike: white, warm, dark, white.

     .band            dark, image on the left, text and a fact list on the right
     .reads           warm paper, three identical article cards
     .routes          dark, three columns divided by hairlines, no boxes
   -------------------------------------------------------------------------- */

/* 23c-i. Dark band with a photograph */
.band { background: var(--primary); color: var(--white); display: grid; grid-template-columns: 0.72fr 1.28fr; align-items: stretch; }
.band .pic { min-height: 0; }
.band .txt { padding: 4rem; display: flex; flex-direction: column; justify-content: center; }
.band .section-eyebrow { color: var(--accent); }
.band h2 {
    font-family: 'Libre Baskerville', serif; font-weight: 400; color: var(--white);
    font-size: clamp(1.7rem, 2.5vw, 2.15rem); line-height: 1.25;
    margin: 0.8rem 0 1.1rem; letter-spacing: -0.015em;
}
.band p { color: var(--on-dark-3); line-height: 1.8; margin-bottom: 0.9rem; max-width: 52ch; font-size: 0.95rem; }
.band .facts { list-style: none; margin-top: 1.5rem; border-top: 1px solid var(--on-dark-rule); }
.band .facts li {
    padding: 0.85rem 0; border-bottom: 1px solid var(--on-dark-rule);
    font-size: 0.87rem; color: var(--on-dark-4); transition: color 0.35s, padding-left 0.35s;
}
.band .facts li:hover { color: var(--white); padding-left: 0.5rem; }
.band .facts strong { display: block; color: var(--white); font-weight: 500; margin-bottom: 0.15rem; }

/* 23c-ii. Article cards on warm paper. Three identical cards: same width,
   same image height, same anatomy, so the row reads as one object. */
.reads { background: var(--bg-warm); padding: 6.5rem 6% 7rem; }
.reads-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 1px solid rgba(0,0,0,0.09); padding-bottom: 1.5rem;
    margin-bottom: 3rem; gap: 2rem; flex-wrap: wrap;
}
.reads-head a {
    font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--primary); text-decoration: none; font-weight: 600; white-space: nowrap;
}
.reads-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem; }
.read {
    display: flex; flex-direction: column; background: var(--white);
    text-decoration: none; color: inherit; border: 1px solid var(--border);
    transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.45s;
}
.read:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.05); }
.read .frame { height: 240px; }
.read .body { padding: 1.6rem 1.7rem 1.9rem; flex: 1; display: flex; flex-direction: column; }
.read .cat { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.read h3 {
    font-family: 'Libre Baskerville', serif; font-weight: 400; font-size: 1.08rem;
    line-height: 1.45; margin: 0.6rem 0 0.7rem; transition: color 0.35s; min-height: 3.1em;
}
.read:hover h3 { color: var(--accent); }
.read p { color: var(--text-light); font-size: 0.88rem; line-height: 1.7; flex: 1; }
.read .more { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); font-weight: 600; margin-top: 1.2rem; }
.read .src {
    font-size: 0.68rem; color: var(--text-light); margin-top: 0.9rem;
    padding-top: 0.9rem; border-top: 1px solid var(--border);
    letter-spacing: 0.02em; min-height: 2.4em;
}

/* A card for an article with no photograph. The block fills the same 240px
   frame the images use, so every card in a grid keeps the same shape. It
   carries the eyebrow over a serif line naming the law the article is built
   on. Two forms, dark and warm paper, so a mixed grid is not one flat wall. */
.read-mark {
    height: 240px; padding: 1.6rem 1.7rem;
    display: flex; flex-direction: column; justify-content: flex-end;
    transition: background 0.45s ease;
}
.read-mark--dark {
    background: radial-gradient(120% 140% at 15% 0%, #2b4a45 0%, var(--primary) 62%);
    position: relative; overflow: hidden;
}
.read-mark--warm { background: var(--bg-warm); border-bottom: 1px solid var(--border); }
.read:hover .read-mark--dark { background: radial-gradient(120% 140% at 15% 0%, #345750 0%, var(--primary-mid) 62%); }
.read:hover .read-mark--warm { background: var(--accent-subtle); }

/* The Thai name of the statute the card is built on, set large in the top
   of the block and faded out before the label, so the English label always
   sits on clean green. Decorative only: lang="th" aria-hidden markup. */
.read-mark--dark .read-wm {
    position: absolute; top: 0; left: 0; right: 0; height: 150px;
    padding: 1.3rem 1.4rem 0 1.4rem;
    font-family: 'Sarabun', 'Leelawadee UI', 'Thonburi', sans-serif;
    font-weight: 300; font-size: 1.85rem; line-height: 1.35;
    color: rgba(255,255,255,0.24);
    overflow: hidden; user-select: none; pointer-events: none;
    word-break: break-word;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* The junction: a gold line where the block meets the text, and the text on
   warm paper rather than stark white. Scoped by sibling so the photograph
   cards on the homepage keep their plain white body. */
.read-mark--dark + .body { border-top: 2px solid var(--gold); background: #fbfaf8; }
.read-mark .block-eyebrow {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.25em;
    text-transform: uppercase; margin-bottom: 0.7rem; display: block;
    position: relative;
}
.read-mark .block-mark { position: relative; }
.read-mark--dark .block-eyebrow { color: var(--gold); }
.read-mark--warm .block-eyebrow { color: var(--primary-light); }
.read-mark .block-mark {
    font-family: 'Libre Baskerville', serif; font-size: 1.05rem;
    line-height: 1.45; display: block;
}
.read-mark--dark .block-mark { color: var(--on-dark-1); }
.read-mark--warm .block-mark { color: var(--primary); }

/* A listing rather than a fixed row of three. Used on the insights hub and
   on the six category pages, where the number of articles varies: the grid
   wraps at a minimum card width, so a card is the same width whether the
   page holds one article or ten. The search bar runs the full band. */
.reads--list .section-lead { margin-bottom: 2.5rem; }
.reads--list .filter-bar { max-width: none; }
.reads--list .reads-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* One shared frame for the listing band: content capped and centred, so the
   filters, the grid and the reference shelf all end on the same edge. At the
   cap the grid resolves to three columns. */
.reads--list { padding-left: max(6%, calc((100% - 1180px) / 2)); padding-right: max(6%, calc((100% - 1180px) / 2)); }
.page-hub { padding-left: max(6%, calc((100% - 1180px) / 2)); padding-right: max(6%, calc((100% - 1180px) / 2)); }
/* The marked heroes share the page frame, so the hero text, the intro and the
   grid below it all start on the same left edge. Article heroes keep their own
   inset, since an article body is a narrow centred reading column. */
.page-hero--mark .page-hero-inner {
    max-width: none;
    padding-left: max(6%, calc((100% - 1180px) / 2));
    padding-right: max(6%, calc((100% - 1180px) / 2));
}
/* The shelf: the two reference volumes as a half-width pair filling the
   row, closing the library band. Equal heights come from the grid stretch,
   so no ref-book inside the shelf may carry a bottom margin. */
.ref-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.25rem; }
.ref-shelf .ref-book { margin: 0; max-width: none; padding: 1.9rem 1.9rem 1.6rem; }
.ref-shelf .ref-book h3 { font-size: 1.25rem; }
.ref-shelf .ref-book p { max-width: 85%; }
.ref-shelf .ref-book .ref-glyph { font-size: 6.5rem; }

/* 23c-iii. Three routes onward. Dividing lines only, no card boxes. */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--primary); }
.route {
    padding: 3.5rem 2.75rem; text-decoration: none; color: var(--white);
    border-right: 1px solid rgba(255,255,255,0.12); transition: background 0.45s;
}
.route:last-child { border-right: none; }
.route:hover { background: var(--primary-mid); }
.route span { font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); }
.route h3 { font-family: 'Libre Baskerville', serif; font-weight: 400; color: var(--white); font-size: 1.25rem; margin: 0.8rem 0 0.55rem; }
.route p { color: var(--on-dark-4); font-size: 0.87rem; line-height: 1.65; }
.route em {
    display: block; margin-top: 1.3rem; font-style: normal; font-size: 0.7rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}

/* 23c-iv. Subject chips on the dark band. It sits under the warm card band
   on the insights hub and on every category page, so the two bands never
   look alike. The chips are the ordinary .category-chip, recoloured for a
   dark ground and turning to accent under the cursor. */
.subjects { background: var(--primary); }
.subjects .section-title { color: var(--white); }
.subjects .section-lead { color: var(--on-dark-3); margin-bottom: 2.5rem; }
.subjects .category-chip { color: var(--on-dark-1); border-color: var(--on-dark-rule); }
.subjects .category-chip:hover { color: var(--accent); border-color: var(--accent); }
.subjects .btn-text { color: var(--on-dark-1); }
.subjects .btn-text:hover { color: var(--accent); }
.subjects .hub-back { margin-top: 2.5rem; }
/* Where the chips follow the heading directly, with no lead paragraph
   between them, they need the space the paragraph would have given. */
.subjects .section-title + .chip-row { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   24. CTA BAND AND CONTACT
   -------------------------------------------------------------------------- */
.cta-band { background: var(--bg-warm); padding: 5rem 6%; text-align: center; }
.cta-band-inner { max-width: 600px; margin: 0 auto; }
.cta-band h2 { font-size: clamp(1.5rem, 2.5vw, 1.85rem); color: var(--primary); margin-bottom: 1rem; }
.cta-band p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 2rem; line-height: 1.75; }

.contact { background: var(--white); padding: 6.5rem 6% 7rem; }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; max-width: 1100px; margin: 0 auto; }
.contact-info h2 {
    font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--primary);
    font-weight: 400; letter-spacing: -0.015em; line-height: 1.25;
    margin: 0.8rem 0 1.1rem;
}
.contact-info > p { color: var(--text-light); margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.85; max-width: 44ch; }
.contact-reassure { margin-top: 1rem; font-size: 0.9rem; color: var(--text-light); }
.contact-detail {
    margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.6rem;
    color: var(--primary); text-decoration: none; font-size: 0.92rem; font-weight: 500;
    border-bottom: 1px solid var(--border); padding-bottom: 0.5rem;
    transition: color 0.4s, border-color 0.4s;
}
.contact-detail:hover { color: var(--accent); border-color: var(--accent); }
.contact-detail svg { flex-shrink: 0; }

.calendly-embed { min-width: 0; }
.calendly-inline-widget { border-radius: 4px; overflow: hidden; }
/* Shown only when JavaScript is off, so the booking box is never a blank
   rectangle with no way through it. */
.calendly-fallback {
    background: var(--bg-warm); border-left: 2px solid var(--accent);
    padding: 1.5rem; color: var(--text-light); font-size: 0.95rem; line-height: 1.75;
}
.calendly-fallback a { color: var(--primary); }

/* --------------------------------------------------------------------------
   25. FOOTER
   -------------------------------------------------------------------------- */
footer { background: var(--primary); padding: 5rem 6% 2.5rem; margin: 0; display: block; width: 100%; box-sizing: border-box; }
/* One divider only. It used to sit under .footer-inner as a border-bottom
   and is now the border-top of .footer-bottom, so the rule and the closing
   block move together and the page ends on a single deliberate line. */
.footer-inner {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
    max-width: 1100px; margin: 0 auto;
}
/* Five-item variant: the brand block plus four link columns. Used where
   the footer carries the services, the firm, the reference pages and the
   contact details. The 968px rule below still drops it to two columns. */
.footer-inner--five { grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2.5rem; }
.footer-brand img { height: 30px; display: block; width: auto; }
.footer-brand p { color: var(--on-dark-3); font-size: 0.85rem; margin-top: 1rem; max-width: 280px; line-height: 1.6; }
.footer-col h4 { color: var(--on-dark-1); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.25rem; }
.footer-col a { display: block; color: var(--on-dark-3); text-decoration: none; font-size: 0.85rem; margin-bottom: 0.5rem; transition: color 0.35s, padding-left 0.35s; }
.footer-col a:hover { color: var(--accent); padding-left: 0.25rem; }

/* The closing block. Same 1100px measure as the columns above it, so the
   divider lines up with them instead of running to the page edge. */
.footer-bottom {
    max-width: 1100px; margin: 3.5rem auto 0; padding-top: 2rem;
    border-top: 1px solid var(--on-dark-rule);
    text-align: center; color: var(--on-dark-4);
    font-size: 0.78rem; letter-spacing: 0.04em;
}
.footer-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem 2rem; margin-bottom: 1.5rem; }
.footer-legal a {
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--on-dark-4); text-decoration: none; transition: color 0.35s;
}
.footer-legal a:hover { color: var(--accent); }
.footer-bottom > p:last-child { text-align: center; font-size: 0.75rem; color: rgba(255,255,255,0.4); }

/* The standing disclaimer line. Same wording as the article footer, so a
   reader who lands on any page of the site is told the same thing. */
.footer-note {
    max-width: 78ch; margin: 0 auto 1.5rem; text-align: center;
    font-size: 0.82rem; color: var(--on-dark-3); line-height: 1.75;
}
.footer-note a { color: var(--on-dark-1); text-decoration: underline; text-underline-offset: 3px; transition: color 0.35s; }
.footer-note a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   26. MOTION
   -------------------------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* The fade-in starts a block at opacity 0 and the script fades it up. That is
   only safe where the script can actually run, so the starting state is put
   behind (scripting: enabled). With JavaScript off, or in a browser that does
   not understand the query, nothing is ever hidden and the whole page reads
   normally. Never move these three rules out of the media query. */
.reveal { opacity: 1; transform: none; }

@media (scripting: enabled) {
    .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-content { animation: none; }
    .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
    /* Colour still changes on hover. Movement does not. */
    .frame img, .arrow, .btn-text::after, .hero-x .bg,
    .practice-card, .read, .footer-col a, .band .facts li {
        transition: color 0.3s, background 0.3s, border-color 0.3s;
    }
    a:hover .frame img, .page-hero:hover .page-hero-media img { transform: none; }
    .hero-x:hover .bg { transform: scale(1.04); }
    a:hover .arrow, .btn-text:hover::after { transform: none; }
    .practice-card:hover, .read:hover { transform: none; }
    .footer-col a:hover, .band .facts li:hover { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   27. BREAKPOINTS - 968px then 768px, nothing else
   -------------------------------------------------------------------------- */
@media (max-width: 968px) {
    .footer-inner--five { grid-template-columns: 1fr 1fr; }
    .practice-grid { grid-template-columns: 1fr; }
    .featured-wrapper { grid-template-columns: 1fr; gap: 2.5rem; }
    .featured-image { height: 300px; order: -1; }
    .contact-wrapper { grid-template-columns: 1fr; gap: 3rem; }
    .process-steps { grid-template-columns: repeat(2, 1fr); }
    .process-step { border-left: none; border-top: 1px solid var(--on-dark-rule); }
    .process-step:first-child, .process-step:nth-child(2) { border-top: none; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-x { min-height: 70vh; }
    .band { grid-template-columns: 1fr; }
    .band .pic { min-height: 320px; }
    .band .txt { padding: 3.5rem 2rem; }
    .reads-grid { grid-template-columns: 1fr; }
    .routes { grid-template-columns: 1fr; }
    .route { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .route:last-child { border-bottom: none; }
}

@media (max-width: 768px) {
    nav { padding: 0 5%; }
    section { padding: 5rem 5%; }
    /* Full-bleed dark bands must not gain padding on a phone. */
    .band, .routes { padding: 0; }
    .article, .page { padding: 5rem 5%; padding-top: 7rem; }
    .related { padding: 3.5rem 5% 4.5rem; }
    .nav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--white); flex-direction: column; padding: 1.5rem 5%;
        gap: 1rem; border-bottom: 1px solid var(--border);
    }
    .nav-links.active { display: flex; }
    .menu-toggle { display: flex; padding: 10px 0 10px 12px; }
    /* The booking button stays on screen. It used to be display:none here,
       which took the only call to action off every page on a phone. The
       logo drops a few pixels so the logo, the button and the menu toggle
       all fit across a 320px screen. */
    .logo img { height: 32px; }
    nav.scrolled .logo img { height: 28px; }
    .nav-cta { padding: 0.5rem 0.8rem; font-size: 0.68rem; letter-spacing: 0.05em; white-space: nowrap; }
    .hero { background: linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(255,255,255,0.92)), url('../hero.jpg'); background-size: cover; }
    .practice-card { padding: 2rem; }
    .process-steps { grid-template-columns: 1fr; }
    .process-step { border-top: 1px solid var(--on-dark-rule); }
    .process-step:first-child { border-top: none; }
    .insights-grid { grid-template-columns: 1fr; }
    .reads--list .reads-grid { grid-template-columns: 1fr; }
    .footer-inner,
    .footer-inner--five { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
    .answer-box { padding: 1.5rem 1.5rem; }
    .sources { padding: 1.5rem; }
    .article-meta { gap: 0.85rem 1.5rem; }
    .practices, .reads, .contact { padding: 5rem 5%; }
    /* The hero is bottom-aligned. On a phone the content is taller than the
       box, so without top clearance it slides up under the fixed 76px nav and
       the first line of the headline disappears. Let the hero grow instead. */
    .hero-x { min-height: auto; }
    .hero-x .inner { padding: 116px 5% 3.5rem; }
    .hero-x h1 { font-size: clamp(1.85rem, 7.4vw, 2.5rem); margin: 0.9rem 0 1.1rem; max-width: none; }
    .hero-x p { font-size: 0.98rem; line-height: 1.75; }
    .hero-x .acts { margin-top: 2rem; gap: 1.5rem; }
    .practices { padding: 4rem 5% 4.5rem; }
    .page-hero-inner { padding: 7rem 5% 3rem; }
    .reads-head { align-items: flex-start; flex-direction: column; }
    .route { padding: 2.75rem 5%; }
    .footer-bottom { margin-top: 2.5rem; }
}


/* --------------------------------------------------------------------------
   ARTICLE FIGURE
   One supporting photograph inside an article body. Full measure, hairline
   caption underneath in the small uppercase label style. Images sit in a
   .frame so they inherit the slow hover scale.
   -------------------------------------------------------------------------- */
.article-figure { margin: 3rem 0; }
.article-figure .frame { height: 340px; }
.article-figure figcaption {
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-light); padding-top: 0.9rem; margin-top: 0.9rem;
    border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
    .article-figure .frame { height: 220px; }
}


/* --------------------------------------------------------------------------
   FIRM BAND - label above the recent-matters list, so the three items read
   as evidence for the paragraph above rather than as orphaned headings.
   -------------------------------------------------------------------------- */
.band .facts-head {
    font-family: 'Libre Baskerville', serif; font-weight: 400; color: #fff;
    font-size: 1.02rem; margin-top: 2.25rem;
}
.band .facts-note {
    font-size: 0.8rem; color: rgba(255,255,255,0.52); margin: 0.4rem 0 0;
    max-width: 46ch;
}
.band .facts { margin-top: 1.1rem; }





/* --------------------------------------------------------------------------
   GLOSSARY
   A compact index. The page is a list of terms; a definition opens where you
   click it. Native <details>, so it works with JavaScript off, stays keyboard
   accessible and remains indexable.
   -------------------------------------------------------------------------- */
.gt-wrap {
    background: var(--white);
    padding: 0 6% 6rem;
}
.gt-inner { max-width: 820px; margin: 0 auto; }

.gt-controls {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 2rem; flex-wrap: wrap; padding-bottom: 1.25rem; margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--border);
}
.gt-search { flex: 1 1 280px; }
.gt-search label {
    display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 0.55rem;
}
.gt-search input {
    width: 100%; font-family: 'Inter', sans-serif; font-size: 0.92rem;
    padding: 0.7rem 0.9rem; border: 1px solid var(--border);
    background: var(--white); color: var(--text);
}
.gt-search input:focus { outline: none; border-color: var(--accent); }
.gt-actions { display: flex; align-items: center; gap: 1.25rem; }
.gt-count { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); }
.gt-actions button {
    background: none; border: none; padding: 0; font: inherit; cursor: pointer;
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600; color: var(--primary); transition: color 0.3s;
}
.gt-actions button:hover { color: var(--accent); }

/* groups sit side by side so the whole vocabulary fits on a screen or two */
.gt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem 3rem;
    align-items: start;
}
.gt-group {
    padding: 0;          /* cancels the global section padding, which added 224px between groups */
    margin: 0;
    break-inside: avoid;
}
.gt-group-head {
    font-family: 'Libre Baskerville', serif; font-weight: 400; font-size: 1.25rem;
    margin-bottom: 0.4rem;
}
.gt-n { font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em;
    color: var(--text-light); margin-left: 0.5rem; }
.gt-group-lead { font-size: 0.9rem; color: var(--text-light); margin-bottom: 1.25rem; max-width: 62ch; }

details.gt { border-top: 1px solid var(--border); }
details.gt:last-of-type { border-bottom: 1px solid var(--border); }
details.gt > summary {
    list-style: none; cursor: pointer; padding: 0.85rem 2rem 0.85rem 0;
    position: relative; transition: color 0.3s;
}
details.gt > summary::-webkit-details-marker { display: none; }
details.gt > summary::after {
    content: '+'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
    font-size: 1.1rem; color: var(--accent); transition: transform 0.3s;
}
details.gt[open] > summary::after { content: '\2013'; }
details.gt > summary:hover .gt-name { color: var(--accent); }
.gt-name { font-family: 'Libre Baskerville', serif; font-size: 1rem; transition: color 0.3s; }
.gt-alt { display: block; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-light); margin-top: 0.15rem; line-height: 1.5; }
.gt-body { padding: 0 2rem 1.5rem 0; }
.gt-body p { font-size: 0.94rem; line-height: 1.8; color: var(--text-light); margin-bottom: 0.9rem; }
.gt-source {
    font-size: 0.78rem !important; color: var(--text) !important;
    padding-top: 0.8rem; border-top: 1px solid var(--border); margin-bottom: 0.6rem !important;
}
.gt-more a {
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600; color: var(--primary); text-decoration: none;
}
.gt-more a:hover { color: var(--accent); }
.gt-empty { padding: 2.5rem 0; color: var(--text-light); }
.gt-empty button {
    background: none; border: none; padding: 0; font: inherit;
    color: var(--accent); cursor: pointer; text-decoration: underline;
}
@media (max-width: 768px) {
    .gt-wrap { padding: 0 5% 4rem; }
    .gt-controls { flex-direction: column; align-items: stretch; gap: 1.25rem; }
}

/* --------------------------------------------------------------------------
   GLOSSARY CALLOUT on the insights hub
   -------------------------------------------------------------------------- */
.gloss-callout {
    display: block; background: var(--primary); color: #fff; text-decoration: none;
    padding: 2.25rem 2.5rem; margin-bottom: 3rem;
    transition: background 0.4s ease;
}
.gloss-callout:hover { background: var(--primary-mid); }
.gloss-callout-eyebrow {
    display: block; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 0.6rem;
}
.gloss-callout-title {
    display: block; font-family: 'Libre Baskerville', serif; font-size: 1.35rem; margin-bottom: 0.6rem;
}
.gloss-callout-text {
    display: block; color: rgba(255,255,255,0.72); font-size: 0.92rem; line-height: 1.75; max-width: 62ch;
}
.gloss-callout-more {
    display: inline-block; margin-top: 1.25rem; font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600; color: var(--accent);
}
@media (max-width: 768px) { .gloss-callout { padding: 1.75rem 1.5rem; } }

/* --------------------------------------------------------------------------
   FAQ hub page. Eight subjects on one page, every answer carrying its
   sources line. The toc chips jump to the subject headings, which sit
   clear of the fixed nav via scroll-margin. */
.faq-toc { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 0.5rem; }
.faq-toc a {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; text-decoration: none; color: var(--primary);
    border: 1px solid var(--border); padding: 0.5rem 0.9rem; background: var(--white);
}
.faq-toc a:hover { background: var(--accent-subtle); }
.faq-hub h2, .faq-hub .faq-item h3 { scroll-margin-top: 90px; }
.faq-hub .faq-item { margin-bottom: 2.2rem; }
.faq-src { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.02em; margin-top: 0.6rem; }
.faq-more { font-size: 0.8rem; margin-top: 0.3rem; }
.gloss-callout + .gloss-callout { margin-top: 1rem; }


/* --------------------------------------------------------------------------
   Marked interior hero. The lit gradient and one ghosted section mark,
   applied on the insights hub, the six category pages and the glossary.
   Articles keep the unmarked hero. The facts strip is the hub's footer
   line: real library numbers on the hairline where the band ends. */
.page-hero--mark {
    background: radial-gradient(130% 160% at 12% 0%, #2b4a45 0%, var(--primary) 60%);
    position: relative; overflow: hidden;
}
.page-hero--mark::before {
    content: "\00A7"; position: absolute; right: -0.05em; top: -0.32em;
    font-family: 'Libre Baskerville', serif; font-style: italic;
    font-size: 22rem; line-height: 1; color: rgba(255,255,255,0.05);
    pointer-events: none; z-index: 1;
}
.page-hero-facts {
    border-top: 1px solid var(--on-dark-rule);
    margin-top: 2.6rem; padding-top: 0.95rem;
    display: flex; gap: 2.4rem; flex-wrap: wrap;
}
.page-hero-facts span {
    font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.page-hero-facts b {
    font-family: 'Libre Baskerville', serif; font-weight: 400;
    font-size: 0.95rem; color: var(--on-dark-2); letter-spacing: 0.02em;
    margin-right: 0.45rem;
}

/* The reference shelf: the glossary and the FAQ as two full-width volumes,
   gold spine on the left, one ghosted glyph each. Replaces the flat
   gloss-callout bands on the insights hub. */
.ref-book {
    display: block; text-decoration: none; color: inherit;
    background: radial-gradient(130% 160% at 12% 0%, #2b4a45 0%, var(--primary) 60%);
    border-left: 6px solid var(--gold);
    padding: 2rem 2.1rem 1.8rem; position: relative; overflow: hidden;
    transition: transform 0.35s ease;
}
.ref-book:hover { transform: translateY(-3px); }
.ref-book .ref-glyph {
    position: absolute; right: 0.05em; top: 50%; transform: translateY(-52%);
    font-family: 'Libre Baskerville', serif;
    font-size: 7.5rem; line-height: 1; color: rgba(255,255,255,0.07);
    pointer-events: none;
}
.ref-book .ref-glyph--thai { font-family: 'Sarabun', 'Leelawadee UI', 'Thonburi', sans-serif; font-weight: 300; }
.ref-book .ref-eyebrow {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.7rem;
    position: relative;
}
.ref-book h3 {
    font-family: 'Libre Baskerville', serif; font-weight: 400; font-size: 1.4rem;
    color: var(--on-dark-1); margin-bottom: 0.55rem; position: relative;
}
.ref-book p {
    font-size: 0.87rem; color: var(--on-dark-2); line-height: 1.6;
    margin-bottom: 1.1rem; max-width: 70%; position: relative;
}
.ref-book .ref-more {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent); position: relative;
}

@media (max-width: 800px) {
    .ref-shelf { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .page-hero--mark::before { font-size: 12rem; }
    .page-hero-facts-inner { gap: 1.2rem 1.6rem; }
    .ref-book p { max-width: 100%; }
    .ref-book .ref-glyph { font-size: 5rem; }
}

/* Contact details stack: email and the Google-listed address, one per line. */
.contact-details { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; margin-top: 2rem; }
.contact-details .contact-detail { margin-top: 0; }