/* ==========================================================================
   Immigration Lawyer, foundation
   Design system: tokens, reset, typography, layout primitives, controls.
   Section and page components live in sections.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Palette, "Verdict": chalk, forest, gold.
       Every colour on the site is declared here and nowhere else, so the whole
       page can be repainted by replacing this block and nothing but this block.
       The only exceptions are white and black themselves, where they mean
       white and black, and WhatsApp's green, which is not ours to change. */

    /* Surfaces, lightest to heaviest */
    --paper:        #F0F2ED;   /* the page */
    --paper-warm:   #F6F8F3;   /* a section that steps half a tone off it */
    --surface:      #FFFFFF;   /* a card or panel lifted off the page */
    --mist:         #DFE4DA;   /* a section that steps a full tone down */
    --mist-deep:    #CED6C8;

    /* Type and the darkest surface */
    --ink:          #141A15;
    --ink-deep:     #0A1410;   /* the dark sections, the strip, the footer */
    --ink-soft:     #3A443C;
    --ink-mute:     #5F6B62;
    --ink-faint:    #96A199;

    /* What sits on a solid --ink fill: the primary button, the round actions.
       It is a token rather than plain white because a palette may put light
       type on a dark page, and then --ink is the light one. */
    --on-ink:       #FFFFFF;

    --brand:        #1E6B45;
    --brand-deep:   #155031;
    --brand-wash:   #E3EFE8;   /* the brand at wallpaper strength */
    /* The brand does not survive a near-black background, so the dark surfaces
       carry a lifted reading of it: eyebrows, links, marks, the signature. */
    --brand-lift:   #6DC698;
    --brand-hi:     #A3DCBE;   /* that reading again, one step up, for hover */
    --on-brand:     #FFFFFF;   /* what sits on a solid brand fill */
    /* The two quieter levels of that, the same pair as --ink-soft and
       --ink-mute: a body line and an eyebrow drawn on a brand plate. */
    --on-brand-soft: rgba(255, 255, 255, 0.82);
    --on-brand-mute: rgba(255, 255, 255, 0.7);
    --hair-on-brand: rgba(255, 255, 255, 0.2);

    --amber:        #B0801F;
    --amber-wash:   #F7F0DC;

    /* Used for one thing only: the tick on a list of what we do. A step
       brighter than the brand, so the mark still reads as its own thing on a
       palette whose brand is itself green. */
    --green:        #2F9E63;

    --ok:           #1B7A4B;
    --error:        #B3261E;

    /* Lines. Never used as a decorative edge, only as grid structure. */
    --hair:         rgba(20, 26, 21, 0.15);
    --hair-soft:    rgba(20, 26, 21, 0.08);
    --hair-invert:  rgba(255, 255, 255, 0.16);
    --hair-invert-soft: rgba(255, 255, 255, 0.08);

    /* Channels, for the places a colour is needed at partial strength.
       CSS cannot take an alpha off a hex custom property, so the ones that get
       composed into rgba() are carried as bare channels as well. */
    --paper-rgb:      240, 242, 237;
    --ink-deep-rgb:    10,  20,  16;
    --brand-rgb:       30, 107,  69;
    --brand-deep-rgb:  21,  80,  49;
    --brand-lift-rgb: 109, 198, 152;

    /* What a card casts on the page. Not --ink: on a dark palette the type
       goes light and a shadow made from it would glow. */
    --shadow-rgb:      20,  26,  21;

    /* The brand pushed down into the dark, at five depths. Used for the washes
       laid over photography and for the shadow a lit panel casts. */
    --dusk-rgb:        18,  72,  50;   /* the foot of the film, under the copy */
    --gloom-rgb:       14,  58,  40;   /* under a solid brand plate */
    --fathom-rgb:       6,  30,  20;   /* across the closing photograph */
    --umbra-rgb:        8,  26,  18;   /* under a dark card */
    --pitch-rgb:        5,  10,   8;   /* the foot of that wash, all but black */

    /* The mark. Two colours: the wordmark, and the sub-line with its rules.
       Held one step away from the brand tokens so a palette, or a surface, can
       give the logo its own reading where the brand itself would not carry. */
    --logo-ink:        var(--ink);
    --logo-accent:     var(--brand);

    /* Type */
    --font-display: "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;

    --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
    --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
    --step-1:  clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
    --step-2:  clamp(1.3125rem, 1.2rem + 0.6vw, 1.625rem);
    --step-3:  clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
    --step-4:  clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
    --step-5:  clamp(2.375rem, 1.7rem + 3.4vw, 4.25rem);
    --step-6:  clamp(2.75rem, 1.6rem + 5.7vw, 6rem);

    /* Space */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 8rem;
    --sp-11: 10rem;

    --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

    /* Chrome heights, the hero measures itself against these so it lands on
       exactly one screen. */
    --topbar-h: 42px;
    --head-h: 108px;
    --head-total: calc(var(--topbar-h) + var(--head-h));
    /* Sticky columns clear the strip plus the shrunken bar, plus a little air. */
    --sticky-top: calc(var(--topbar-h) + 88px + 1.5rem);

    /* The width available to content. 100vw counts the scrollbar, which pushes
       full-bleed panels a scrollbar's width past the edge; the script corrects
       this on load and on resize. */
    --vw: 100vw;

    --shell: 1440px;
    --shell-pad: clamp(1.25rem, 4vw, 3rem);
    --measure: 72ch;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 320ms;

    /* Dark surfaces carry two things and no pattern: one large, soft cobalt
       light, sitting somewhere different in each section, and a fine film
       grain so a big dark plane never reads as flat digital black. */
    --glow-x: 82%;
    --glow-y: 4%;
    --glow-w: 62%;
    --glow-h: 84%;
    --glow-strength: 0.5;
    /* A multiplier over the whole light, not a switch on background-image:
       some of these surfaces carry a photograph in that property, and turning
       the light off must not take the picture with it. */
    --glow-alpha: 1;

    --dark-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* clears the sticky strip + bar so anchored headings are not hidden */
    scroll-padding-top: 8.5rem;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.62;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

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

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li + li { margin-top: 0.35em; }

hr {
    border: 0;
    border-top: 1px solid var(--hair);
    margin: var(--sp-7) 0;
}

table { border-collapse: collapse; width: 100%; }

button { font: inherit; color: inherit; }

::selection { background: var(--brand); color: var(--on-brand); }

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

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.028em;
    margin: 0 0 0.4em;
    color: var(--ink);
    text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); letter-spacing: -0.02em; }
h4 { font-size: var(--step-2); letter-spacing: -0.015em; }
h5 { font-size: var(--step-1); letter-spacing: -0.01em; }
h6 { font-size: var(--step-0); letter-spacing: 0; }

a {
    color: var(--brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--dur) var(--ease);
}
a:hover { color: var(--brand-deep); }

strong, b { font-weight: 600; }

/* Emphasis inside a heading is the accent, not italics. Editors reach for
   <em> in the section fields and get the highlight without touching CSS.
   .span_borderbootom is the class the previous theme used for the same job, it is mapped here so any copy still carrying it renders correctly. */
h1 em, h2 em, h3 em, h4 em,
h1 .span_borderbootom, h2 .span_borderbootom,
h3 .span_borderbootom, h4 .span_borderbootom,
.hero__title em, .lockup__title em,
.review__quote em, .founder__quote em {
    font-style: normal;
    color: var(--brand);
}
.section--ink h1 em, .section--ink h2 em,
.section--ink h3 em, .section--ink h4 em,
.section--ink .span_borderbootom { color: var(--brand-lift); }

/* The house data voice: figures, dates, counts, labels. Set in the body
   face with tabular figures so numbers line up, and opened out so it reads
   as metadata rather than prose. */
.meta {
    font-family: var(--font-body);
    font-feature-settings: "tnum" 1, "cv05" 1;
    font-variant-numeric: tabular-nums;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.meta--plain { text-transform: none; letter-spacing: 0.01em; font-weight: 400; }

/* Figures anywhere: always tabular, always tight. */
.figure-set { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

.lede {
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 46ch;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-3); margin-top: 1.9em; }
.prose h3 { font-size: var(--step-2); margin-top: 1.7em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose li::marker { color: var(--ink-faint); }
.prose img { margin: 2em 0; }
.prose blockquote {
    margin: 2em 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.prose table { margin: 2em 0; font-size: var(--step--1); }
.prose th, .prose td {
    text-align: left;
    padding: 0.7em 1em 0.7em 0;
    border-bottom: 1px solid var(--hair);
    vertical-align: top;
}
.prose th { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.8em; color: var(--ink-mute); }

/* Screen-reader only, kept for the SEO taxonomy lists. */
.sr-only, .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}

.shell--wide { max-width: 1480px; }
.shell--narrow { max-width: 860px; }

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-6) clamp(1.25rem, 2.4vw, 2.5rem);
}

@media (max-width: 900px) {
    .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--flush-top { padding-top: 0; }

.section--mist { background: var(--mist); }
.section--paper-warm { background: var(--paper-warm); }

/* Dark surfaces: deep ink, one soft cobalt light, and film grain over it. */
.section--ink,
.site-foot {
    /* Written here rather than stored in a custom property: a var() inside a
       custom property resolves where that property is declared, so composing
       it on :root would freeze the position for every section. */
    background-image: radial-gradient(
        ellipse var(--glow-w) var(--glow-h) at var(--glow-x) var(--glow-y),
        rgba(var(--brand-rgb), calc(var(--glow-strength) * var(--glow-alpha))) 0%,
        rgba(var(--brand-rgb), calc(0.22 * var(--glow-alpha))) 34%,
        rgba(var(--brand-rgb), calc(0.06 * var(--glow-alpha))) 56%,
        rgba(var(--ink-deep-rgb), 0) 74%
    );
}

.section--ink {
    background-color: var(--ink-deep);
    color: var(--mist);
    --hair: var(--hair-invert);
    --hair-soft: var(--hair-invert-soft);
    --ink: #FFFFFF;
    --ink-soft: rgba(255, 255, 255, 0.76);
    --ink-mute: rgba(255, 255, 255, 0.56);
    --ink-faint: rgba(255, 255, 255, 0.38);
    /* --ink is white here, so anything drawn on an --ink fill inside a dark
       section has to go the other way with it. */
    --on-ink: var(--ink-deep);
}

/* The mark on a dark ground. The wordmark takes the white it was drawn in, and
   the sub-line takes the lifted reading of the brand, which is the same move
   every other accent makes on these surfaces. Applies wherever the logo can
   land on the dark: the footer, and any inked section. */
.site-foot,
.section--ink {
    --logo-ink: #FFFFFF;
    --logo-accent: var(--brand-lift);
}

/* The light sits somewhere different in each dark section, so two of them
   never look like the same tile repeated. */
.section--glow-a { --glow-x: 14%; --glow-y: 104%; --glow-w: 58%; --glow-h: 90%; }
/* Top-left corner, the one part of this section the map never covers. */
.section--glow-b { --glow-x: 6%; --glow-y: -12%; --glow-w: 62%; --glow-h: 92%; --glow-strength: 0.52; }
.section--glow-c { --glow-x: 50%; --glow-y: -14%; --glow-w: 78%; --glow-strength: 0.38; }

.grain::after,
.section--ink::after,
.site-foot::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--dark-grain);
    background-size: 180px 180px;
    opacity: 0.055;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}
.section--ink > * { position: relative; z-index: 1; }
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink h4, .section--ink h5, .section--ink h6 { color: #fff; }

.rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* --------------------------------------------------------------------------
   5. Section headings
   -------------------------------------------------------------------------- */

/* The eyebrow is content, so it stays, but it is set as part of the heading
   lockup rather than as a badge with a rule or a dot beside it. */
.lockup { display: grid; gap: var(--sp-4); }
.lockup__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0;
}
.section--ink .lockup__eyebrow { color: var(--brand-lift); }
.lockup__title { margin: 0; }
.lockup__body { color: var(--ink-soft); max-width: 52ch; margin: 0; }

.lockup--split {
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
}
@media (min-width: 1000px) {
    .lockup--split {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--sp-6) clamp(2rem, 4vw, 4rem);
    }
    .lockup--split .lockup__eyebrow { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   6. Controls
   -------------------------------------------------------------------------- */

.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--on-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 1.05em 1.7em;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .ico { transition: transform var(--dur) var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

.btn--brand { --btn-bg: var(--brand); --btn-fg: var(--on-brand); }
.btn--brand:hover { --btn-bg: var(--brand-deep); }

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    box-shadow: inset 0 0 0 1px var(--hair);
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--on-ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* --ink is remapped to white inside .section--ink, so the light button has to
   name the dark ink explicitly or it turns white on white. */
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink-deep); }
.btn--light:hover { --btn-bg: var(--brand); --btn-fg: var(--on-brand); }

/* WhatsApp keeps its own green wherever it appears as a button, with white
   on it, mark and label alike. */
.btn--whatsapp { --btn-bg: #25D366; --btn-fg: #fff; }
.btn--whatsapp:hover { --btn-bg: #1FB855; --btn-fg: #fff; }
.btn--whatsapp .ico { width: 1.2em; height: 1.2em; }

.btn--wide { width: 100%; justify-content: center; }

/* Link buttons must keep their own foreground on hover; the base a:hover
   would otherwise repaint the label. */
.btn:hover, .btn:focus { color: var(--btn-fg); }

/* The text link with an arrow is the house tertiary action. */
/* Also used on <button> where the action opens a dialog rather than navigating,
   so the browser's own button chrome has to be cleared. */
.tlink {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    border: 0;
    background-color: transparent;
    padding-inline: 0;
    font-family: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--step--1);
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 0.35em;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: color var(--dur) var(--ease), background-size var(--dur) var(--ease);
}
.tlink .ico { transition: transform var(--dur) var(--ease); }
.tlink:hover { color: var(--brand); background-size: 40% 1px; }
.tlink:hover .ico { transform: translateX(4px); }
.tlink--brand { color: var(--brand); }
.tlink--lg { font-size: var(--step-0); gap: 0.6em; }
.tlink--lg .ico { width: 1.1rem; height: 1.1rem; }
.section--ink .tlink { color: #fff; }
.section--ink .tlink:hover { color: var(--brand-hi); }

/* --------------------------------------------------------------------------
   7. Icons
   -------------------------------------------------------------------------- */

.ico {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ico--fill { fill: currentColor; stroke: none; }
.ico--lg { width: 1.5em; height: 1.5em; }

.stars { display: inline-flex; gap: 0.15em; color: var(--amber); }
.stars .ico { width: 0.95em; height: 0.95em; fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   8. Forms, underlined fields, no boxes
   -------------------------------------------------------------------------- */

.field { position: relative; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.field textarea,
.field select,
.input {
    width: 100%;
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hair);
    border-radius: 0;
    padding: 0.85em 0 0.7em;
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--ink);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.field textarea { resize: vertical; min-height: 7.5em; line-height: 1.55; }
/* The wide layout is used where vertical room is scarce. */
.inlineform--wide .field textarea { min-height: 4.8em; }

.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B7178' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.1em center;
    background-size: 0.75em;
    padding-right: 1.6em;
    cursor: pointer;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); opacity: 1; }

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

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline: none; }

/* Inverted fields on dark surfaces */
.form--invert .field input,
.form--invert .field textarea,
.form--invert .field select {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.24);
}
.form--invert .field input::placeholder,
.form--invert .field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.form--invert .field input:focus,
.form--invert .field textarea:focus,
.form--invert .field select:focus { border-bottom-color: var(--brand-lift); }
.form--invert .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.form--invert .field select option { color: var(--ink); }

.form-grid { display: grid; gap: var(--sp-5); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-grid--2 { grid-template-columns: 1fr; } }

/* Attachments: a drop target, not a hint. Centred, generous, and it says both
   of the things you can do with it. */
.dropzone {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.35em;
    width: 100%;
    min-height: 7.5rem;
    padding: 1.35rem 1.25rem;
    text-align: center;
    cursor: pointer;
    border: 1px dashed var(--mist-deep);
    background: var(--paper-warm);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dropzone__ico {
    display: grid;
    place-items: center;
    width: 2.4rem; height: 2.4rem;
    margin-bottom: 0.15em;
    color: var(--ink-mute);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hair);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dropzone__ico .ico { width: 1.15rem; height: 1.15rem; }
.dropzone__title {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}
.dropzone__hint {
    font-size: 0.8125rem;
    color: var(--ink-mute);
}

.dropzone:hover,
.dropzone.is-dragging {
    border-color: var(--brand);
    background: var(--brand-wash);
}
.dropzone:hover .dropzone__ico,
.dropzone.is-dragging .dropzone__ico {
    color: var(--on-brand);
    background: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.dropzone.is-dragging { border-style: solid; }

/* Once something is attached, the invitation gives way to the filename. */
.dropzone__file { display: none; align-items: center; gap: 0.6em; max-width: 100%; }
.dropzone__name {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropzone__clear {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.6rem; height: 1.6rem;
    padding: 0;
    background: none;
    border: 1px solid var(--hair);
    color: var(--ink-mute);
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dropzone__clear:hover { color: var(--ink); border-color: var(--ink); }
.dropzone__clear .ico { width: 0.85rem; height: 0.85rem; }
.dropzone.has-file .dropzone__title,
.dropzone.has-file .dropzone__hint { display: none; }
.dropzone.has-file .dropzone__file { display: flex; }
.dropzone.has-file { border-style: solid; border-color: var(--brand); background: var(--brand-wash); }
.dropzone.has-file .dropzone__ico { color: var(--brand); }

/* On the dark contact surface */
.form--invert .dropzone {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.04);
}
.form--invert .dropzone__ico {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.form--invert .dropzone__title { color: #fff; }
.form--invert .dropzone__hint { color: rgba(255, 255, 255, 0.55); }
.form--invert .dropzone:hover,
.form--invert .dropzone.is-dragging,
.form--invert .dropzone.has-file {
    border-color: var(--brand-lift);
    background: rgba(var(--brand-lift-rgb), 0.12);
}
.form--invert .dropzone:hover .dropzone__ico,
.form--invert .dropzone.is-dragging .dropzone__ico { color: var(--on-brand); background: var(--brand); box-shadow: none; }
.form--invert .dropzone__name { color: #fff; }
.form--invert .dropzone__clear { border-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.7); }
.form--invert .dropzone__clear:hover { color: #fff; border-color: #fff; }

/* --------------------------------------------------------------------------
   Custom select
   The native control keeps the value and posts it; this is what people see.
   -------------------------------------------------------------------------- */

.field--select .js-select.is-enhanced {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sel { position: relative; }
/* Line height and padding are copied from .field input so the control lines
   up with the fields beside it, the mark inside must not make it taller. */
.sel__button {
    display: flex;
    align-items: center;
    gap: 0.75em;
    width: 100%;
    padding: 0.85em 0 0.7em;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hair);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: normal;
    color: var(--ink-faint);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sel__button:hover { border-bottom-color: var(--ink-mute); }
.sel.is-open .sel__button,
.sel__button:focus-visible { border-bottom-color: var(--brand); outline: none; }
.sel.has-value .sel__button { color: var(--ink); }
.sel__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__lead:empty { display: none; }
.sel__ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.9rem; height: 1.9rem;
    color: var(--ink-mute);
    background: var(--paper);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sel__ico .ico { width: 1rem; height: 1rem; }
/* Inside the closed control the mark rides along without adding height. */
.sel__lead .sel__ico { width: 1.5rem; height: 1.5rem; margin: -0.2em 0; background: none; color: var(--brand); }
.sel__lead .sel__ico .ico { width: 1.05rem; height: 1.05rem; }
.sel__label { flex: 1 1 auto; min-width: 0; }
.sel__caret { flex: none; width: 0.85rem; height: 0.85rem; color: var(--ink-mute); transition: transform var(--dur) var(--ease); }
.sel.is-open .sel__caret { transform: rotate(180deg); }

.sel__list {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0; right: 0;
    z-index: 40;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--hair), 0 24px 48px -24px rgba(var(--shadow-rgb), 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.sel.is-open .sel__list { opacity: 1; visibility: visible; transform: none; }
.sel__list li { margin: 0; }
.sel__option {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.62em 1rem;
    font-size: var(--step--1);
    color: var(--ink-soft);
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sel__option:hover,
.sel__option.is-active { background: var(--paper); color: var(--ink); }
.sel__option:hover .sel__ico,
.sel__option.is-active .sel__ico,
.sel__option[aria-selected="true"] .sel__ico { background: var(--brand); color: var(--on-brand); }
.sel__option[aria-selected="true"] { color: var(--brand); font-weight: 600; }
.sel__option[aria-selected="true"]::after {
    content: "";
    margin-left: auto;
    width: 0.85em; height: 0.45em;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg) translateY(-0.15em);
}

/* On the dark contact surface */
.form--invert .sel__button { color: rgba(255, 255, 255, 0.45); border-bottom-color: rgba(255, 255, 255, 0.24); }
.form--invert .sel.has-value .sel__button { color: #fff; }
.form--invert .sel__caret { color: rgba(255, 255, 255, 0.55); }
.form--invert .sel.is-open .sel__button { border-bottom-color: var(--brand-lift); }
/* --ink-deep, not --ink: inside a dark section --ink is remapped to white, and
   a panel painted with it came out white with white options on it. */
.form--invert .sel__list { background: var(--ink-deep); box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 24px 48px -24px rgba(0,0,0,0.7); }
.form--invert .sel__option { color: rgba(255, 255, 255, 0.76); }
.form--invert .sel__option:hover,
.form--invert .sel__option.is-active { background: rgba(255, 255, 255, 0.08); color: #fff; }
.form--invert .sel__option[aria-selected="true"] { color: var(--brand-lift); }
.form--invert .sel__ico { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); }
.form--invert .sel__option:hover .sel__ico,
.form--invert .sel__option.is-active .sel__ico,
.form--invert .sel__option[aria-selected="true"] .sel__ico { background: var(--brand); color: var(--on-brand); }

.form-note {
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.form-response {
    padding: var(--sp-4) 0;
    font-size: var(--step--1);
    border-top: 1px solid var(--hair);
}
.form-response--ok { color: var(--ok); }
.form-response--error { color: var(--error); }

/* --------------------------------------------------------------------------
   9. Motion, a single reveal, honoured only when motion is welcome
   -------------------------------------------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms var(--ease), transform 620ms var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   10. Bootstrap JS state hooks
   Bootstrap's bundle still drives collapse and the modal. Its stylesheet is
   gone, so the classes its JS toggles are styled here and nowhere else.
   -------------------------------------------------------------------------- */

.collapse:not(.show) { display: none; }
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 300ms var(--ease);
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
.modal.show { display: block; }
.modal-dialog {
    position: relative;
    width: auto;
    max-width: 520px;
    margin: clamp(1rem, 6vh, 5rem) auto;
    transform: translateY(-18px);
    transition: transform 300ms var(--ease);
}
.modal.show .modal-dialog { transform: none; }
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(var(--ink-deep-rgb), 0.72);
    opacity: 0;
    transition: opacity 280ms var(--ease);
}
.modal-backdrop.show { opacity: 1; }
body.modal-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */

.stack { display: grid; }
.stack--1 { gap: var(--sp-1); }
.stack--2 { gap: var(--sp-2); }
.stack--3 { gap: var(--sp-3); }
.stack--4 { gap: var(--sp-4); }
.stack--5 { gap: var(--sp-5); }
.stack--6 { gap: var(--sp-6); }
.stack--7 { gap: var(--sp-7); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.cluster--tight { gap: var(--sp-3); }

.text-mute { color: var(--ink-mute); }
.text-soft { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }
.notranslate { }

@media (max-width: 900px) { .hide-md { display: none !important; } }
@media (min-width: 901px) { .show-md { display: none !important; } }