/* ===============================================================
   CS Notária
   1. Tokens
   2. Base
   3. Header + navigation
   4. Heroes
   5. Split sections (text + colour panel)
   6. Panels, lists, accordions, tabs
   7. Help cards
   8. Footer
   9. Forms
  10. Responsive
   =============================================================== */

/* --- 1. Tokens ------------------------------------------------ */
:root {
    --cream:      #f4f2ec;
    --white:      #ffffff;
    --ink:        #333333;
    --text:       #4d4d4d;
    --muted:      #9b9b9b;
    --rule:       #ddd9d1;

    --taupe:      #a89376;
    --sage:       #8faa78;
    --mauve:      #A58498;   /* A Notária accent, sampled from the swatch */
    --brick:      #a23c31;
    --slate:      #2c3f42;
    --teal:       #79c5c5;
    --logo-red:   #C8462B;   /* sampled from LOGO_CSNOTARIA.ai */

    /* Overall text weight. 400 is the current setting; 500 makes the
       whole site a step heavier again, 300 returns to the old light. */
    --fw-body:   400;
    --fw-ui:     500;   /* small letterspaced caps: nav, buttons, labels */

    --font-body:    'Jost', 'Century Gothic', 'Segoe UI', sans-serif;
    --font-display: 'Questrial', 'Century Gothic', sans-serif;
    --font-serif:   'Cormorant Garamond', Georgia, serif;

    --header-h:   76px;
    --gutter:     clamp(20px, 5vw, 64px);
    --measure:    1960px;
}

/* --- 2. Base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding-top: var(--header-h);
    background: var(--white);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: var(--fw-body);
    font-size: 17px;
    line-height: 1.95;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}

p { margin: 0 0 1.6em; }
p:last-child { margin-bottom: 0; }

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

.skip-link {
    position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%);
    z-index: 200; background: var(--slate); color: #fff;
    padding: 10px 18px; text-decoration: none; font-size: 14px;
}
.skip-link:focus { transform: translate(-50%, 0); }

:focus-visible { outline: 2px solid var(--logo-red); outline-offset: 3px; }

.link-teal { color: var(--teal); text-decoration: none; }
.link-teal:hover { text-decoration: underline; }

/* footer links sit on white now, so they use ink rather than teal */

/* Bordered button, used for V-card and contact links */
.btn {
    display: inline-block;
    padding: 17px 34px;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    background: none;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.btn:hover { background: var(--ink); color: var(--white); }


/* Small letterspaced caps need a touch more weight than body copy or
   they read as grey. One variable controls the lot. */
.nav__link,
.nav__sub a,
.btn,
.tab,
.card__label,
.pubfilter__link,
.field label,
.footer__pair dt,
.footer__legal,
.footer__credit,
.principle > summary,
.faqgroup > summary,
.pagehero__title,
.svc__item[aria-selected="true"],
.svc__item.is-near { font-weight: var(--fw-ui); }

/* A Notária uses the mauve in place of the green. Redefining the
   variable on the page's body means the panel, the big statement and
   the headings all follow from one line — and Informação Útil, which
   shares those classes, keeps its green. */
.page-a-notaria { --sage: var(--mauve); }

/* --- 3. Header + navigation ----------------------------------- */
.masthead {
    position: fixed;
    top: 0; left: 0; right: 0;            /* longhand: older Opera ignores inset */
    height: var(--header-h);
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    z-index: 100;
}

.masthead__inner {
    max-width: var(--measure);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    margin-right: auto;
}
/* Sized against the header rather than fixed, so the mark keeps the
   same proportion to the bar at every width. */
.cs-mark { width: clamp(38px, 3.4vw, 46px); height: auto; flex: none; }
.brand__words { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.5vw, 19px);
    color: #1c1c1c;
    letter-spacing: .01em;
    white-space: nowrap;
}
.brand__role {
    font-family: var(--font-serif);
    font-size: clamp(10px, .9vw, 11.5px);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #6f6f6f;
}

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

.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.1vw, 40px);
    list-style: none;
    margin: 0; padding: 0;
}
.nav__item { position: relative; }

.nav__link {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-decoration: none;
    color: #4a4a4a;
    white-space: nowrap;
    transition: color .2s ease;
}
.nav__link:hover { color: var(--logo-red); }
.nav__link.is-current { color: var(--muted); }

/* dropdown caret */
.nav__caret {
    position: absolute;
    left: 50%; top: 100%;
    transform: translateX(-50%);
    width: 22px; height: 16px;
    border: 0; background: none; padding: 0; cursor: pointer;
}
.nav__caret::before {
    content: '';
    position: absolute; left: 50%; top: 2px;
    width: 6px; height: 6px;
    border-right: 1px solid #6a6a6a;
    border-bottom: 1px solid #6a6a6a;
    transform: translateX(-50%) rotate(45deg);
}

.nav__sub {
    position: absolute;
    left: 50%; top: calc(100% + 14px);
    transform: translateX(-50%);
    min-width: 250px;
    margin: 0; padding: 10px 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--rule);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .07);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 10;
}
.nav__item--parent:hover .nav__sub,
.nav__item--parent:focus-within .nav__sub,
.nav__item--parent.is-open .nav__sub { opacity: 1; visibility: visible; }

.nav__sub a {
    display: block;
    padding: 9px 26px;
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    color: #5a5a5a;
}
.nav__sub a:hover { color: var(--logo-red); }

/* language flags, drawn in CSS so there are no extra image requests */
.nav__foot { display: flex; align-items: center; gap: 12px; }
.lang { display: flex; align-items: center; gap: 9px; }
.lang__flag {
    width: 22px; height: 15px;
    border: 1px solid rgba(0, 0, 0, .15);
    opacity: .55;
    transition: opacity .2s ease;
}
.lang__flag:hover, .lang__flag.is-current { opacity: 1; }
.lang__flag--pt {
    background:
        linear-gradient(to right, #046a38 0 40%, #da291c 40% 100%);
    position: relative;
}
.lang__flag--pt::after {
    content: ''; position: absolute;
    left: 40%; top: 50%; transform: translate(-50%, -50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: #ffe044; border: 1px solid #046a38;
}
.lang__flag--en {
    background:
        linear-gradient(to bottom, transparent 40%, #fff 40% 60%, transparent 60%),
        linear-gradient(to right, transparent 40%, #fff 40% 60%, transparent 60%),
        #012169;
    position: relative;
}
.lang__flag--en::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background:
        linear-gradient(to bottom, transparent 44%, #c8102e 44% 56%, transparent 56%),
        linear-gradient(to right, transparent 44%, #c8102e 44% 56%, transparent 56%);
}

/* menu button, hidden until the nav collapses */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 10px 4px;
    border: 0; background: none; cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: #4a4a4a;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block; width: 24px; height: 1px; background: #3a3a3a;
    transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- 4. Heroes ------------------------------------------------ */

/* Home: full-bleed photograph with the monogram set over it */
.hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: grid;
    place-items: center;
    background: #6b4a33 center / cover no-repeat;
    overflow: hidden;
}
/* the animated monogram and its static stand-in share one box, so
   the swap doesn't shift anything */
.hero__logo { width: clamp(150px, 17vw, 260px); }
.hero__anim svg { display: block; overflow: visible; width: 100%; height: auto; }
.hero__mark { width: 100%; height: auto; }
.hero__mark path { stroke-width: 12; }

.hero__scroll {
    position: absolute;
    left: 50%; bottom: 46px;
    transform: translateX(-50%);
    display: grid; justify-items: center; gap: 14px;
    color: #fff;
    font-size: 13px; font-weight: 500;
    letter-spacing: .11em; text-transform: uppercase;
    text-decoration: none;
}
.hero__scroll::after {
    content: '';
    width: 15px; height: 15px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    animation: nudge 2.2s ease-in-out infinite;
}
@keyframes nudge {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50%      { transform: rotate(45deg) translate(4px, 4px); }
}

/* Inner pages: shorter photograph with a serif title over it */
.pagehero {
    position: relative;
    min-height: 66vh;
    display: flex;
    /* Distance from the BOTTOM of the photograph to the title.
       Smaller number = title sits lower. (I had this backwards
       before: raising the value pushed the title up the image.) */
    --hero-title-bottom: clamp(18px, 3.2vh, 44px);
    align-items: flex-end;
    padding: 0 var(--gutter) var(--hero-title-bottom);
    background: #5d5d5d center / cover no-repeat;
}
.pagehero__title {
    /* One size on every page. Line breaks are set by hand with <br>
       in the markup — no max-width, or the browser rewraps them into
       ragged shapes and the titles stop matching each other. */
    --hero-title-size: clamp(26px, 4.6vw, 64px);

    margin-top: auto;              /* belt and braces with align-items */
    max-width: none;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--hero-title-size);
    line-height: 1.18;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}

/* --- 5. Split sections ---------------------------------------- */
/* landing here from the hero's Scroll down: the photograph ends
   exactly where the header ends */
.split { scroll-margin-top: var(--header-h); }

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.split__text {
    background: var(--white);
    padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 90px);
}
.split__text > * { max-width: 46ch; }

.split__panel {
    padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 78px);
    color: #fff;
}
.split__panel--taupe { background: var(--taupe); }
.split__panel--sage  { background: var(--sage); }
.split__panel--brick { background: var(--brick); }

.lede { color: #4a4a4a; }

/* the oversized coloured statement inside the text column */
.statement {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.3;
    margin: 1.4em 0 .9em;
}
.statement--taupe { color: var(--taupe); }
.statement--sage  { color: var(--sage); }
.statement--brick { color: var(--brick); }

/* the list of archives under the red heading */
.archive-list { margin: 0; padding-left: 20px; }
.archive-list li { margin-bottom: .5em; }

.pullquote {
    margin-top: 2.6em;
    color: var(--taupe);
    font-size: 17px;
    line-height: 1.9;
}
.pullquote cite { display: block; margin-top: .5em; font-style: italic; }

/* --- 6. Panels, lists, accordions, tabs ----------------------- */

/* Decálogo */
.decalogue__heading {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.6vw, 38px);
    color: #fff;
    letter-spacing: .02em;
    margin-bottom: .9em;
    padding-bottom: .5em;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.decalogue__list {
    list-style: none;
    margin: 0 0 2.6em;
    padding: 0;
    font-size: clamp(15px, 1.1vw, 18px);
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.55;
}
.decalogue__list li { margin-bottom: 1.15em; }
.decalogue__source {
    font-style: italic;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .9);
}

/* Principles, as native disclosure widgets */
.principle {
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding: 22px 0;
}
.principle:first-of-type { padding-top: 0; }
/* A Notária shows these open permanently — same look, no toggle. */
.principle--static { cursor: default; }
.principle__head {
    display: block;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(16px, 1.2vw, 19px);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

.principle > summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    font-size: clamp(16px, 1.2vw, 19px);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}
.principle > summary::-webkit-details-marker { display: none; }
.principle > summary::before {
    content: '';
    flex: none;
    width: 7px; height: 7px;
    margin-top: .45em;
    border-right: 1.5px solid #fff;
    border-top: 1.5px solid #fff;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.principle[open] > summary::before { transform: rotate(135deg); }
.principle__body {
    margin-top: .9em;
    font-size: 16px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .95);
}

/* Archive tabs */
.tabs {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
    border-bottom: 1px solid var(--rule);
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.tab {
    padding: 24px 46px;
    border: 0;
    background: #f2f0ea;          /* unselected tabs carry the grey fill */
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.tab:hover { color: #6a6a6a; }
.tab[aria-selected="true"] {
    background: var(--white);
    color: #7d7d7d;
}
.tabpanel[hidden] { display: none; }

/* Red record panels */
.record {
    background: var(--brick);
    color: #fff;
    padding: clamp(34px, 3.4vw, 54px);
    margin-bottom: 22px;
}
.record:last-child { margin-bottom: 0; }
.record__kicker {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin: 0 0 1.2em;
}
.record h3 {
    color: #fff;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    margin: 0 0 .5em;
}
.record h3 + ul { margin-top: 0; }
.record ul {
    margin: 0 0 1.8em;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.85;
}
.record li { margin-bottom: .45em; }
.record__note {
    font-style: italic;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

/* A centred paragraph used to open the Archive page */
.intro {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 92px) var(--gutter);
    text-align: center;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.65;
    color: #4a4a4a;
}

.section-heading {
    font-size: clamp(28px, 3vw, 44px);
    color: var(--brick);
    margin-bottom: .7em;
}
.section-heading--taupe { color: var(--taupe); }
.section-heading--sage  { color: var(--sage); }

.stack-links a { display: block; color: var(--teal); text-decoration: none; }
.stack-links a:hover { text-decoration: underline; }

/* --- 7. Help cards -------------------------------------------- */
.help {
    background: var(--cream);
    padding: clamp(46px, 5vw, 78px) var(--gutter) clamp(60px, 7vw, 120px);
}
.help__title {
    text-align: center;
    font-size: clamp(30px, 3.4vw, 50px);
    font-weight: 400;
    color: #3d3d3d;
    margin-bottom: clamp(34px, 3.5vw, 60px);
}
.help__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1660px;
}
.card {
    /* The 3:4 shape comes from a padding ratio rather than
       aspect-ratio, which older Opera doesn't support — without it
       the card collapsed to the height of its label. */
    position: relative;
    display: block;
    overflow: hidden;
    background: #4a4a4a;
    text-decoration: none;
}
.card::before {
    content: '';
    display: block;
    padding-top: 133.333%;          /* 4 ÷ 3 */
}
.card__img {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* no filter: the photographs show at their own colour and
       brightness, hovered or not */
    transition: transform .8s ease;
}
.card:hover .card__img,
.card:focus-visible .card__img {
    /* zoom only — the tone stays exactly as it is at rest */
    transform: scale(1.06);
}
.card__label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 30px;
    border: 1px solid rgba(255, 255, 255, .9);
    color: #fff;
    font-size: clamp(15px, 1.1vw, 19px);
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    /* the photo is no longer darkened, so the label carries its own
       contrast — a shadow on the text and its border, nothing on
       the image itself */
    text-shadow: 0 1px 10px rgba(0, 0, 0, .65), 0 0 3px rgba(0, 0, 0, .45);
    box-shadow: 0 0 14px rgba(0, 0, 0, .28);
}


/* Service groups (Serviços, Informação Útil) */
.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2px;
    max-width: 1660px;
    margin: 0 auto;
}
.service {
    background: var(--white);
    padding: clamp(30px, 3vw, 46px);
    scroll-margin-top: calc(var(--header-h) + 20px);
}
.service__title {
    font-size: clamp(22px, 1.9vw, 28px);
    color: var(--taupe);
    margin-bottom: .4em;
}
.service__lead { color: #6a6a6a; font-size: 16px; margin-bottom: 1.4em; }
.service__list {
    margin: 0; padding-left: 20px;
    font-size: 16px; line-height: 1.9;
}
.service__list li { margin-bottom: .35em; }

/* Publications */
.pubs { list-style: none; margin: 0; padding: 0; counter-reset: pub; }
.pub {
    padding: 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.pub:first-child { padding-top: 0; }
.pub:last-child { border-bottom: 0; }
.pub__year {
    display: block;
    font-size: 13px; letter-spacing: .14em;
    color: rgba(255, 255, 255, .8);
    margin-bottom: .4em;
}
.pub__title {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(18px, 1.4vw, 22px);
    color: #fff;
    margin-bottom: .3em;
}
.pub__title a { text-decoration: none; }
.pub__title a:hover { text-decoration: underline; }
.pub__where { font-size: 15px; color: rgba(255, 255, 255, .85); margin: 0 0 .3em; }
.pub__note { font-size: 15px; font-style: italic; color: rgba(255, 255, 255, .85); margin: 0; }

/* --- 8. Footer ------------------------------------------------ */
.footer {
    background: var(--white);
    color: var(--ink);
    padding: clamp(46px, 5vw, 76px) var(--gutter) clamp(30px, 3.4vw, 44px);
    font-size: 15px;
}
.footer__inner { max-width: 980px; margin: 0 auto; text-align: center; }

/* the mark alone, at the foot, just above the copyright line */
.footer__brand {
    display: inline-block;
    margin-top: 40px;
    text-decoration: none;
}
.footer__mark { width: 50px; height: auto; }

.footer__social { display: flex; justify-content: center; gap: 20px; margin-bottom: 34px; }
.footer__social a { color: #000; transition: opacity .2s ease; }
.footer__social a:hover { opacity: .55; }
.footer__social svg { width: 22px; height: 22px; }

.footer__rows { margin: 0 0 10px; }
.footer__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 38px;
    margin-bottom: 14px;
}
.footer__pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.footer__pair dt {
    color: #8a8a8a;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 12px;
    align-self: center;
}
.footer__pair dd { margin: 0; color: var(--ink); }
.footer__pair dd a { text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .25); }
.footer__pair dd a:hover { border-bottom-color: #000; }

.footer__map {
    margin-left: 10px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: #6a6a6a;
    border-bottom: 1px solid rgba(0, 0, 0, .25);
}
.footer__map:hover { color: #000; border-bottom-color: #000; }

.footer__note { color: #7a7a7a; font-size: 14px; margin: 4px 0 0; }

.footer__legal {
    margin: 26px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--rule);   /* divides it from the mark */
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8a8a8a;
}

/* --- 9. Forms ------------------------------------------------- */
.form { display: grid; gap: 20px; max-width: 560px; }
.field { display: grid; gap: 7px; }
.field label {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6a6a6a;
}
.field input,
.field textarea {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    padding: 13px 15px;
    border: 1px solid var(--rule);
    background: var(--white);
    border-radius: 0;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--taupe); outline: none; }

.map-frame { width: 100%; height: 420px; border: 0; display: block; }

/* --- 10. Responsive ------------------------------------------- */
@media (max-width: 1400px) {
    .nav__list { gap: 20px; }
    .nav__link { font-size: 13px; letter-spacing: .1em; }
}

@media (max-width: 1180px) {
    :root { --header-h: 62px; }

    .nav-toggle { display: flex; }
    .brand { gap: 9px; }
    .cs-mark { width: 36px; }
    .brand__name { font-size: 15px; }
    .brand__role { font-size: 9.5px; letter-spacing: .16em; }

    .nav {
        position: fixed;
        top: var(--header-h); left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        background: var(--white);
        border-bottom: 1px solid var(--rule);
        padding: 8px var(--gutter) 26px;
        transform: translateY(-14px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
    }
    .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__item { border-bottom: 1px solid var(--rule); }
    .nav__link { padding: 15px 0; font-size: 14px; }

    .nav__caret {
        left: auto; right: 0; top: 8px;
        transform: none;
        width: 44px; height: 44px;
    }
    .nav__caret::before { top: 18px; left: 18px; width: 8px; height: 8px; }

    .nav__sub {
        position: static;
        transform: none;
        opacity: 1; visibility: visible;
        display: none;
        border: 0; box-shadow: none;
        padding: 0 0 12px 16px;
        min-width: 0;
    }
    .nav__item--parent.is-open .nav__sub { display: block; }
    .nav__sub a { padding: 9px 0; }

    .lang { margin-top: 22px; }
}

@media (max-width: 900px) {
    body { font-size: 16px; }
    .split { grid-template-columns: 1fr; }
    .split__text > * { max-width: none; }
    .help__grid { grid-template-columns: repeat(2, 1fr); }
    .pagehero { min-height: 48vh; }
    .tab { padding: 18px 22px; font-size: 13px; }
}

@media (max-width: 420px) {
    /* on the narrowest phones the mark alone carries the branding,
       so the menu button has room */
    .brand__words { display: none; }
    .cs-mark { width: 34px; }
}

@media (max-width: 560px) {
    .help__grid { grid-template-columns: 1fr; }
    .card::before { padding-top: 75%; }   /* 4:3 on narrow screens */
    .footer__row { gap: 8px 20px; }
    .decalogue__heading { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --- 11. Serviços tabs, FAQs, publications -------------------- */

/* the Serviços dropdown is long, so let it scroll */
.nav__sub { max-height: 70vh; overflow-y: auto; }

/* wrapping tab strip for the 14 services */
.tabs--wrap { flex-wrap: wrap; gap: 2px; padding-top: 34px; }
.tabs--wrap .tab {
    padding: 14px 22px;
    font-size: 13px;
    letter-spacing: .06em;
}

.tabsec { background: var(--white); }

.prose {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(44px, 5vw, 86px) var(--gutter) clamp(50px, 6vw, 100px);
}
.prose h3 {
    font-size: clamp(22px, 2vw, 28px);
    color: var(--taupe);
    margin: 2.2em 0 .6em;
}
.prose h4 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: .04em;
    color: var(--taupe);          /* same beige as the h3 headings */
    margin: 2em 0 .85em;          /* a clear gap before the body text */
}
.prose ul { padding-left: 22px; margin: 0 0 1.6em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--taupe); }

.pending {
    padding: 20px 24px;
    border-left: 3px solid var(--taupe);
    background: var(--cream);
    color: #6a6a6a;
    font-size: 16px;
}

/* Links úteis */
.linkblock__label {
    margin: 1.4em 0 .5em;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}
.linklist { list-style: none; margin: 0 0 1em; padding: 0; }
.linklist li { margin-bottom: .35em; }
.linklist a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.linklist a:hover { border-bottom-color: #fff; }

/* Perguntas frequentes */
.faqs {
    background: var(--cream);
    padding: clamp(48px, 6vw, 96px) var(--gutter);
}
.faqs__intro {
    max-width: 900px;
    margin: 0 auto clamp(28px, 3vw, 48px);
    text-align: center;
}
.faqs__intro p { color: #5d5d5d; }
.faqs__intro a { color: var(--sage); }
.faqs__body { max-width: 1000px; margin: 0 auto; }

.faqgroup {
    background: var(--white);
    border: 1px solid var(--rule);
    margin-bottom: 8px;
}
.faqgroup > summary {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    padding: 22px clamp(18px, 2.4vw, 34px);
    font-size: clamp(14px, 1.15vw, 17px);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sage);
}
.faqgroup > summary::-webkit-details-marker { display: none; }
.faqgroup__title { flex: 1; }
.faqgroup__count {
    flex: none;
    min-width: 30px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--cream);
    color: #8a8a8a;
    font-size: 12px;
    letter-spacing: .04em;
    text-align: center;
}
.faqgroup > summary::after {
    content: '';
    flex: none;
    width: 8px; height: 8px;
    border-right: 1.5px solid var(--sage);
    border-bottom: 1.5px solid var(--sage);
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.faqgroup[open] > summary::after { transform: rotate(225deg); }
.faqgroup__body { padding: 0 clamp(18px, 2.4vw, 34px) 12px; }

.faq { border-top: 1px solid var(--rule); }
.faq > summary {
    cursor: pointer;
    list-style: none;
    padding: 17px 30px 17px 0;
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
    content: '+';
    position: absolute; right: 4px; top: 15px;
    font-size: 20px; line-height: 1;
    color: var(--taupe);
}
.faq[open] > summary::after { content: '–'; }
.faq[open] > summary { color: var(--taupe); }
.faq__answer {
    padding: 0 30px 22px 0;
    font-size: 16px;
    line-height: 1.85;
    color: #5d5d5d;
}
.faq__answer ul { padding-left: 20px; margin: .6em 0 0; }
.faq__answer li { margin-bottom: .3em; }
.faq__answer a { color: var(--taupe); }

/* Publicações */
.pubfilter {
    /* arriving here after a filter click, the hero photograph above
       ends exactly where the header ends */
    scroll-margin-top: var(--header-h);
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(44px, 5vw, 80px) var(--gutter) 0;
}
.pubfilter__title {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    letter-spacing: .05em;
    color: #6a6a6a;
    margin-bottom: 1.2em;
}
.pubfilter__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    list-style: none;
    margin: 0; padding: 0;
}
/* A parent and its sub-categories. On a pointer device the children
   drop out of the parent on hover; on touch, where there is no
   hover, they're simply always shown, indented under the parent. */
.pubfilter__group {
    position: relative;
    display: flex;
    align-items: center;
}
.pubfilter__caret {
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: 9px;
    margin-bottom: 2px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
}
.pubfilter__children {
    position: absolute;
    top: 100%; left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.pubfilter__group:hover .pubfilter__children,
.pubfilter__group:focus-within .pubfilter__children,
.pubfilter__group.is-open .pubfilter__children {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pubfilter__link {
    display: block;
    padding: 9px 18px;
    border: 1px solid var(--rule);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #6a6a6a;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pubfilter__link:hover { border-color: var(--brick); color: var(--brick); }
.pubfilter__link.is-current { border-color: var(--brick); background: var(--brick); color: #fff; }

/* the child reads as secondary: smaller, lighter, still in caps */
.pubfilter__link--child {
    padding: 8px 14px;
    font-size: 11px;
    color: #6a6a6a;
    background: var(--white);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .07);
}
.pubfilter__link--child.is-current { border-style: solid; color: #fff; }

.pubs-list {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(34px, 4vw, 60px) var(--gutter) clamp(50px, 6vw, 100px);
}
.pubitem {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(24px, 3vw, 52px);
    padding: clamp(28px, 3vw, 48px) 0;
    border-top: 1px solid var(--rule);
    scroll-margin-top: calc(var(--header-h) + 20px);
}
.pubitem:first-child { border-top: 0; }
.pubitem__media img { width: 100%; height: auto; }
.pubitem__cat {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .8em;
}
/* title, then the author/source/date band, then the description —
   each separated by a hairline */
.pubitem__title,
.pubitem__meta {
    padding-bottom: .7em;
    border-bottom: 1px solid var(--rule);
}
.pubitem__cat a { color: var(--brick); text-decoration: none; }
.pubitem__title {
    font-size: clamp(24px, 2.4vw, 34px);
    color: var(--ink);
    margin-bottom: .7em;
}
.pubitem__meta { color: #6a6a6a; font-size: 16px; margin-bottom: 1.3em; line-height: 1.7; }
.pubitem__summary { font-size: 16px; }
.pubitem__subhead {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 2em 0 .8em;
}
.pdflist { list-style: none; margin: 0; padding: 0; }
.pdflist li { border-top: 1px solid var(--rule); }
.pdflist a {
    display: block;
    padding: 11px 0 11px 26px;
    position: relative;
    font-size: 16px;
    text-decoration: none;
    color: var(--brick);
}
.pdflist a::before {
    content: '';
    position: absolute; left: 0; top: 15px;
    width: 11px; height: 13px;
    border: 1px solid var(--brick);
    border-top-right-radius: 4px;
}
.pdflist a:hover { text-decoration: underline; }

@media (max-width: 760px) {
    .pubitem { grid-template-columns: 1fr; }
    .pubitem__media { max-width: 240px; }
    .faqgroup > summary { padding: 18px 16px; gap: 10px; }
    .faqgroup__body { padding: 0 16px 10px; }
}

/* --- 12. Serviços wheel --------------------------------------- */
.svc {
    /* the fixed header would otherwise cover the top of the section
       when arriving at servicos.php#servicos */
    scroll-margin-top: var(--header-h);   /* the split above ends flush at the header */
    display: grid;
    grid-template-columns: 1fr minmax(280px, 33%);
    gap: clamp(24px, 4vw, 70px);
    align-items: start;
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(60px, 7vw, 110px);
}

/* --- the content stage --- */
.svc__stage { min-width: 0; }
.svc__doc[hidden] { display: none; }
.svc__doctitle {
    font-size: clamp(28px, 3.4vw, 46px);
    color: var(--taupe);
    line-height: 1.2;
    margin-bottom: .8em;
}
.svc__doc .prose {
    max-width: 68ch;
    margin: 0;
    padding: 0;
}
.svc__doc .prose > h3:first-child,
.svc__doc .prose > .lead:first-child { margin-top: 0; }
.svc__doc .prose .lead {
    font-size: clamp(18px, 1.5vw, 21px);
    color: #4a4a4a;
    line-height: 1.75;
}
.svc__cta { margin-top: 3em; }

/* link groups inside service copy */
.linkrow { list-style: none; margin: 0 0 1.6em; padding: 0; }
.linkrow li { margin-bottom: .3em; }
.linkrow a {
    color: var(--taupe);
    text-decoration: none;
    border-bottom: 1px solid rgba(168, 147, 118, .45);
}
.linkrow a:hover { border-bottom-color: var(--taupe); }

/* --- the rail --- */
.svc__rail { position: sticky; top: calc(var(--header-h) + 20px); }

.svc__list {
    --rail-h: min(64vh, 560px);
    --row-half: clamp(37px, 3.7vw, 52px);   /* half a row, keeps ends centrable */
    height: var(--rail-h);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;
    /* half the rail of padding top and bottom, so the first and last
       titles can still reach the centre line */
    padding: calc(var(--rail-h) / 2 - var(--row-half, 46px)) 0;
    scrollbar-width: none;
    text-align: right;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.svc__list::-webkit-scrollbar { width: 0; height: 0; }
.svc__list:focus-visible { outline: 2px solid var(--taupe); outline-offset: 6px; }

.svc__item {
    --d: 1;
    /* Each row is a FIXED box. The text resizes inside it, so nothing
       reflows while scrolling — that reflow was what made long titles
       collide and made clicks land on the neighbouring title. */
    --row: clamp(74px, 7.4vw, 104px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: var(--row);
    flex: none;
    scroll-snap-align: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    text-align: right;
    font-family: var(--font-display);
    line-height: 1.14;
    letter-spacing: .01em;
    color: var(--ink);

    /* size and fade ease off as a title moves away from the centre */
    --size-max: clamp(19px, 1.95vw, 27px);
    --size-min: clamp(13px, 1.1vw, 15px);
    font-size: calc(var(--size-min) + (var(--size-max) - var(--size-min)) * (1 - var(--d)));
    opacity: calc(.28 + .72 * (1 - var(--d)));
    transition: color .25s ease;
}
.svc__item:hover { color: var(--taupe); }

/* before JS runs every title is legible; the wheel only kicks in after */
@media (min-width: 901px) {
    .svc:not(.is-live) .svc__item {
        font-size: 15px;
        opacity: 1;
        height: auto;
        padding: .5em 0;
    }
}
.svc:not(.is-live) .svc__list {
    height: auto; padding: 0; overflow: visible;
    mask-image: none; -webkit-mask-image: none;
}

.svc__item[aria-selected="true"] { color: var(--taupe); }
.svc__item[aria-selected="true"] .svc__itemtext { border-bottom: 1px solid currentColor; }
.svc__item.is-near { color: var(--taupe); }
.svc__itemtext { display: inline; padding-bottom: .1em; }

@media (max-width: 900px) {
    .svc {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 0;
    }
    /* Grid items are min-width:auto by default, so a wide child can
       push the whole column past the viewport. These three keep the
       section inside the screen whatever it contains. */
    .svc,
    .svc__rail,
    .svc__stage {
        min-width: 0;
        max-width: 100%;
    }

    .svc__rail {
        grid-row: 1;
        position: sticky;
        top: var(--header-h);
        z-index: 20;
        /* full width of the screen, but built from padding rather than
           negative margins — those were pulling it off centre */
        width: 100%;
        margin: 0;
        padding: 0 4px;
        background: var(--white);
        border-bottom: 1px solid var(--rule);
        /* clip rather than hidden: hidden would break the sticky */
        overflow-x: clip;
    }

    /* long URLs and unbroken words in the service copy */
    .svc__doc .prose { overflow-wrap: anywhere; }
    .svc__doc .prose a { word-break: break-word; }
    .svc__doctitle { font-size: clamp(24px, 6vw, 32px); }
    .svc__stage { padding: 0 0 10px; }

    /* Once the pager is running it replaces the list entirely. */
    .is-pager .svc__list { display: none; }

    /* Until then — and with no JavaScript at all — the list is a
       plain stack of links, which can't overflow or misbehave. */
    .svc__list {
        display: block;
        height: auto;
        overflow: visible;
        padding: 6px var(--gutter) 10px;
        text-align: left;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .svc__item {
        display: block;
        width: 100%;
        height: auto;
        padding: 13px 0;
        font-size: 16px;
        opacity: 1;
        text-align: left;
        border-bottom: 1px solid var(--rule);
    }
    .svc__item[aria-selected="true"] { color: var(--taupe); }
}

@media (prefers-reduced-motion: reduce) {
    .svc__list { scroll-behavior: auto; }
}


/* --- 13. Site search ------------------------------------------ */
.search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: #4a4a4a;
    cursor: pointer;
    transition: color .2s ease;
}
.search-toggle:hover { color: var(--logo-red); }
.search-toggle svg { width: 17px; height: 17px; }
.search-toggle__close { display: none; }
.search-toggle[aria-expanded="true"] .search-toggle__open { display: none; }
.search-toggle[aria-expanded="true"] .search-toggle__close { display: block; }

.search {
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .06);
}
.search__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 780px;
    margin: 0 auto;
    padding: 16px var(--gutter);
}
.search__field {
    flex: 1;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--ink);
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--white);
    -webkit-appearance: none;
            appearance: none;
}
.search__field:focus { outline: none; border-color: var(--taupe); }
.search__submit { flex: none; padding: 13px 24px; font-size: 12px; }

/* With JavaScript the bar is collapsed until the button is pressed.
   Without it, the bar simply stays visible and still works. */
.js .search { display: none; }
.js .search.is-open { display: block; }

/* --- search results page --- */
.results { max-width: 900px; margin: 0 auto; padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(60px, 7vw, 100px); }
.results__form { display: flex; gap: 10px; margin-bottom: 2.4em; }
.results__count { color: #7a7a7a; font-size: 15px; margin-bottom: 2.2em; }
.result { padding: 26px 0; border-top: 1px solid var(--rule); }
.result:first-of-type { border-top: 0; }
.result__where {
    font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .5em;
}
.result__title { font-size: clamp(19px, 1.8vw, 24px); margin-bottom: .4em; }
.result__title a { color: var(--ink); text-decoration: none; }
.result__title a:hover { color: var(--taupe); }
.result__snippet { font-size: 16px; color: #5d5d5d; margin: 0; }
.result__snippet mark { background: rgba(168, 147, 118, .28); color: inherit; padding: 0 2px; }

@media (max-width: 1180px) {
    /* The bar is part of the menu panel now, so it only appears once
       the menu is open — and sits beside the flags at the foot of it. */
    .search-toggle { display: none; }

    .nav__foot {
        margin-top: 22px;
        gap: 14px;
        align-items: center;
        justify-content: flex-end;
    }
    .lang { flex: none; }

    .search {
        position: static;
        flex: 1;
        min-width: 0;
        border: 0;
        box-shadow: none;
        background: none;
    }
    .js .search { display: block; }

    .search__inner {
        max-width: none;
        margin: 0;
        padding: 0;
        gap: 8px;
    }
    .search__field { font-size: 16px; padding: 10px 12px; }   /* 16px stops iOS zooming on focus */
    .search__submit { padding: 11px 16px; font-size: 11px; letter-spacing: .1em; }
}

@media (max-width: 460px) {
    /* very narrow: flags on one line, the field full width beneath */
    .nav__foot { flex-wrap: wrap; justify-content: space-between; }
    .search { flex: 1 0 100%; }
}


/* --- Publicações filter on touch / narrow screens -------------- */
@media (hover: none), (max-width: 760px) {
    .pubfilter__list { flex-direction: column; align-items: flex-start; gap: 14px; }

    .pubfilter__group { flex-direction: column; align-items: flex-start; }
    .pubfilter__caret { display: none; }

    .pubfilter__children {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0 0 20px;
        border-left: 1px solid var(--rule);
        margin-left: 14px;
    }
    .pubfilter__link--child { box-shadow: none; background: none; }
}

/* --- 14. Serviços: folding headings ---------------------------- */
.fold { border-top: 1px solid var(--rule); }
.fold:first-of-type { border-top: 0; }
.fold:last-of-type { border-bottom: 1px solid var(--rule); }

.fold__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 20px 14px 20px 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(21px, 1.9vw, 27px);
    line-height: 1.25;
    color: var(--taupe);
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.fold__head:hover,
.fold__head:focus-visible {
    background: rgba(168, 147, 118, .09);
    padding-left: 12px;
}

/* a round +/- reads as "this opens" far more plainly than a chevron */
.fold__sign {
    position: relative;
    flex: none;
    width: 30px; height: 30px;
    border: 1px solid var(--taupe);
    border-radius: 50%;
    transition: background .2s ease, border-color .2s ease, transform .25s ease;
}
.fold__sign::before,
.fold__sign::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 1.5px;
    margin: -.75px 0 0 -6px;
    background: var(--taupe);
    transition: transform .25s ease, background .2s ease;
}
.fold__sign::after { transform: rotate(90deg); }

.fold__head:hover .fold__sign { background: rgba(168, 147, 118, .16); }

.fold__head[aria-expanded="true"] { color: var(--ink); }
.fold__head[aria-expanded="true"] .fold__sign {
    background: var(--taupe);
    border-color: var(--taupe);
}
.fold__head[aria-expanded="true"] .fold__sign::before,
.fold__head[aria-expanded="true"] .fold__sign::after { background: #fff; }
.fold__head[aria-expanded="true"] .fold__sign::after { transform: rotate(0deg); }

.fold__body { padding: 0 0 28px; }
.fold__body > *:first-child { margin-top: 0; }

@media (max-width: 700px) {
    .fold__head { padding: 17px 4px 17px 0; gap: 12px; }
    .fold__sign { width: 26px; height: 26px; }
    .fold__sign::before, .fold__sign::after { width: 10px; margin-left: -5px; }
}

/* ===============================================================
   15. HIGH CONTRAST
   Toggled from the button beside the language flags. Everything
   becomes black on white, or white on black; photographs keep
   their own colour, which is the point — the interface gets out
   of the way rather than the pictures being drained.
   =============================================================== */

.contrast-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: #4a4a4a;
    cursor: pointer;
    transition: color .2s ease;
}
.contrast-toggle:hover { color: var(--logo-red); }
.contrast-toggle svg { width: 19px; height: 19px; }
.contrast-toggle[aria-pressed="true"] { color: #000; }

.hc {
    /* every token collapses to black, white or a mid grey */
    --cream:     #ffffff;
    --white:     #ffffff;
    --ink:       #000000;
    --text:      #000000;
    --muted:     #000000;
    --rule:      #000000;
    --taupe:     #000000;
    --sage:      #000000;
    --mauve:     #000000;
    --brick:     #000000;
    --slate:     #000000;
    --teal:      #000000;
    --logo-red:  #000000;
}

.hc body { background: #fff; color: #000; }

/* coloured panels invert rather than fade */
.hc .split__panel--taupe,
.hc .split__panel--sage,
.hc .split__panel--brick,
.hc .record,
.hc .footer__social a { background: #000; color: #fff; }
.hc .record a,
.hc .split__panel a,
.hc .linklist a,
.hc .decalogue__source { color: #fff; }

/* rules and edges get real weight */
.hc .masthead { border-bottom: 2px solid #000; }
.hc .pubitem, .hc .fold, .hc .faq, .hc .result,
.hc .pubitem__title, .hc .pubitem__meta { border-color: #000; }
.hc .faqgroup { border: 2px solid #000; }

/* every link is underlined, not just coloured */
.hc a { text-decoration: underline; }
.hc .nav__link, .hc .btn, .hc .tab, .hc .pubfilter__link,
.hc .card, .hc .brand, .hc .footer__brand { text-decoration: none; }

/* text over photographs needs its own ground */
.hc .pagehero__title {
    background: #000;
    padding: .18em .38em;
    text-shadow: none;
}
.hc .card__label {
    background: #000;
    border: 2px solid #fff;
    text-shadow: none;
    box-shadow: none;
}
.hc .hero__scroll {
    background: #000;
    padding: 10px 16px 14px;
}

/* selected states are filled, not tinted */
.hc .tab[aria-selected="true"],
.hc .pubfilter__link.is-current,
.hc .fold__head[aria-expanded="true"] .fold__sign { background: #000; color: #fff; }
.hc .tab { background: #fff; border: 1px solid #000; }
.hc .btn { border: 2px solid #000; }
.hc .btn:hover { background: #000; color: #fff; }
.hc .svc__item[aria-selected="true"] { color: #000; font-weight: 500; text-decoration: underline; }
.hc .svc__item { opacity: 1; }

/* the monogram goes monochrome — the red C would otherwise be the
   one thing left carrying colour in the interface */
.hc .cs-mark path { fill: #000 !important; stroke: #000 !important; }
.hc .footer__mark path { fill: #000 !important; }

/* photographs keep their own colour */
.hc .card__img, .hc .pubitem__media img { filter: none; }

/* focus is unmissable */
.hc :focus-visible { outline: 3px solid #000; outline-offset: 3px; }

/* form fields read as fields */
.hc .search__field, .hc .field input, .hc .field textarea {
    border: 2px solid #000;
    color: #000;
    background: #fff;
}
.hc .lang__flag { opacity: 1; border: 1px solid #000; }

/* --- 16. Sub-tabs inside a service ------------------------------
   Used by Escrituras, where the contract types and the required
   documents are each an accordion within a folded section. Native
   <details>, so they work with no JavaScript at all. */
.subfold {
    border-bottom: 1px solid var(--rule);
}
.subfold:first-of-type { border-top: 1px solid var(--rule); }

.subfold > summary {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    cursor: pointer;
    list-style: none;
    padding: 15px 4px 15px 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--taupe);
    transition: color .2s ease;
}
.subfold > summary::-webkit-details-marker { display: none; }
.subfold > summary:hover { color: var(--ink); }

/* the circled + / − that marks it as openable */
.subfold > summary::before {
    content: '';
    position: relative;
    top: 2px;
    flex: none;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--taupe);
    /* a plus drawn with two bars, via a gradient pair */
    background-image:
        linear-gradient(to right, #fff 0 100%),
        linear-gradient(to bottom, #fff 0 100%);
    background-size: 9px 1.5px, 1.5px 9px;
    background-position: center, center;
    background-repeat: no-repeat;
    transition: background-size .25s ease, background-color .2s ease;
}
.subfold[open] > summary::before {
    /* the vertical bar collapses, leaving a minus */
    background-size: 9px 1.5px, 1.5px 0;
    background-color: var(--ink);
}
.subfold[open] > summary { color: var(--ink); }

.subfold__body {
    padding: 4px 0 26px 30px;
    border-left: 1px solid var(--rule);
    margin-left: 8px;
}
.subfold__body > *:first-child { margin-top: 0; }
.subfold__body h4 { margin-top: 1.6em; }
.subfold__body h5 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .03em;
    color: var(--ink);
    margin: 1.5em 0 .5em;
}

@media (max-width: 700px) {
    .subfold > summary { font-size: 13px; gap: 10px; padding: 14px 2px 14px 0; }
    .subfold__body { padding-left: 16px; margin-left: 4px; }
}

/* in high contrast the circle needs a hard edge */
.hc .subfold > summary::before { background-color: #000; border: 1px solid #000; }
.hc .subfold { border-color: #000; }