/* =========================================================
   Al Amthal Law Firm — design tokens
   ========================================================= */

:root {
    --brand-950: #061710;
    --brand-900: #0B2417;
    --brand-800: #123A24;
    --brand-700: #1B5030;
    --gold-700: #8A6F33;
    --gold-500: #C2A063;
    --gold-300: #E5D5AC;
    --paper: #F7F5F0;
    --paper-2: #EFEBE2;
    --ink-900: #111612;
    --ink-700: #2C3630;
    --ink-500: #48554E;
    --line: rgba(17,22,18,.13);
    --line-dark: rgba(229,213,172,.22);
    --radius: 3px;
    --edge: clamp(1.25rem,5vw,4rem);
    --maxw: 1180px;
    --font-body: "IBM Plex Sans Arabic",system-ui,sans-serif;
    --font-display: "Amiri","Times New Roman",serif;
    /* One vertical rhythm for every block-level gap in the site. */
    --space-1: .5rem;
    --space-2: .85rem;
    --space-3: 1.25rem;
    --space-4: 1.85rem;
    --space-5: 2.75rem;
    --space-6: 4rem;
    /* A single measure keeps body text readable in both scripts. */
    --measure: 66ch;
    --shadow-1: 0 1px 2px rgba(6,23,16,.04);
    --shadow-2: 0 10px 28px rgba(6,23,16,.09);
    --ease: cubic-bezier(.32,.72,.32,1);
    --speed: .22s;
}

/* =========================================================
   Reset and base
   ========================================================= */

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

html {
    /* The header is sticky: an anchor must not land underneath it. */
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-900);
    font-family: var(--font-body);
    font-size: clamp(15px,1.55vw,16.5px);
    line-height: 1.85;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

::selection {
    background: var(--gold-300);
    color: var(--brand-950);
}

:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
    border-radius: var(--radius);
}

h1:focus,
.page:focus {
    outline: none;
}

/* =========================================================
   Typography
   ========================================================= */

h1, h2, h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.9rem,4.4vw,3.1rem);
    letter-spacing: -0.005em;
}

h2 {
    font-size: clamp(1.45rem,2.8vw,2.05rem);
}

/* A page title is an h1 for structure but keeps the section-heading size.
   Only the home hero uses the larger display size. */
h1.page-title {
    font-size: clamp(1.45rem,2.8vw,2.05rem);
    letter-spacing: normal;
}

h3 {
    font-size: 1.05rem;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.6;
}

p {
    margin: 0;
}

.lede {
    color: var(--ink-500);
    max-width: var(--measure);
    line-height: 1.9;
}

.dark .lede {
    color: #A9BCB0;
}

/* =========================================================
   Layout
   ========================================================= */

.wrap {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--edge);
}

.site-shell {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--brand-900);
}

/* Grows to fill whatever the header and footer leave over, so a short page
   still puts the footer at the bottom edge instead of exposing the shell. */
.site-content {
    flex: 1 0 auto;
    display: block;
    position: relative;
    background: var(--paper);
    /* Traps the watermark layer below in this element's own stacking
       context. Without it the positioned pseudo-element would paint over
       the static footer, whatever the DOM order. */
    isolation: isolate;
}

    /* The watermark lives on a pseudo-element rather than on the element's
       own background, because only a separate layer can be mirrored without
       flipping the page content with it. Fixed position reproduces the
       previous background-attachment: fixed. */
    .site-content::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        background: linear-gradient( rgba(247, 245, 240, .96), rgba(247, 245, 240, .96) ), url('/assets/architecture.webp') center / cover no-repeat;
        pointer-events: none;
    }

    /* Page content sits above the watermark layer. */
    .site-content > * {
        position: relative;
        z-index: 1;
    }

/* The arches read as entering from the reading side. In the English layout
   the reading side is reversed, so the watermark is mirrored — the same
   rule the hero already follows. */
html[dir="ltr"] .site-content::before {
    transform: scaleX(-1);
}

.foot {
    flex: 0 0 auto;
    /* Positioned so it is never overlapped by a positioned layer above it. */
    position: relative;
    z-index: 1;
}

.page {
    display: none;
}

    .page.on {
        display: block;
    }

.screen {
    min-height: calc(100svh - 108px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(2.6rem,5.5vw,4.2rem);
}

.screen--auto {
    min-height: 0;
    padding-block: clamp(2.8rem,5.5vw,4.6rem);
}

.dark {
    background: var(--brand-900);
    color: #EAF0EB;
}

    .dark h1,
    .dark h2,
    .dark h3 {
        color: #fff;
    }

.tint {
    background: var(--paper-2);
}

/* =========================================================
   Section heading marks
   ========================================================= */

.marginal {
    position: relative;
    padding-inline-start: 1.7rem;
}

    .marginal::before {
        content: "";
        position: absolute;
        inset-block: .2em auto;
        inset-inline-start: 0;
        width: 1px;
        height: 100%;
        background: var(--gold-500);
        opacity: .55;
    }

.mlabel {
    display: block;
    font-size: .74rem;
    letter-spacing: .14em;
    font-weight: 600;
    color: #6B5428;
    margin-bottom: var(--space-2);
}

.on-dark .mlabel {
    color: var(--gold-300);
}

.on-dark .marginal::before {
    background: var(--gold-300);
    opacity: .4;
}

.rule {
    width: 54px;
    height: 1px;
    background: var(--gold-500);
    margin: var(--space-3) 0;
}

/* =========================================================
   Top strip
   ========================================================= */

.top {
    position: relative;
    z-index: 1;
    background: var(--brand-950);
    color: var(--gold-300);
    font-size: .82rem;
}

    .top .wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 24px;
        align-items: center;
        padding-block: 8px;
    }

    .top .sp {
        margin-inline-start: auto;
    }

    .top a:hover {
        color: #fff;
    }

    .top .announcement-text {
        flex: 1 1 240px;
        min-width: 0;
        white-space: pre-line;
        overflow-wrap: anywhere;
    }

/* =========================================================
   Header and navigation
   ========================================================= */

.head {
    background: var(--brand-900);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line-dark);
}

    .head .wrap {
        display: flex;
        align-items: center;
        gap: 20px;
        padding-block: 12px;
    }

.mark {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

    .mark svg {
        width: 34px;
        height: 34px;
        color: var(--gold-500);
        flex: none;
    }

    .mark b {
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 700;
        display: block;
        line-height: 1.25;
    }

    .mark small {
        font-size: .72rem;
        color: var(--gold-300);
        letter-spacing: .05em;
    }

.logo {
    object-fit: contain;
    width: 104px;
    height: 104px;
    padding: 7px;
    background: #fff;
    border-radius: 22px;
    flex: none;
}

.nav {
    display: flex;
    gap: 2px;
    margin-inline-start: auto;
}

    .nav a {
        padding: 8px 10px;
        font-size: .93rem;
        color: #DCE7DF;
        border-radius: var(--radius);
        white-space: nowrap;
        transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
    }

        .nav a:hover {
            background: rgba(255,255,255,.07);
            color: #fff;
        }

        .nav a.on {
            color: var(--gold-300);
            box-shadow: inset 0 -2px 0 var(--gold-500);
        }

.lang {
    border: 1px solid var(--line-dark);
    padding: 6px 12px;
    font-size: .8rem;
    border-radius: var(--radius);
    color: var(--gold-300);
    font-family: inherit;
    background: transparent;
    cursor: pointer;
}

.burger {
    display: none;
    margin-inline-start: auto;
    background: none;
    border: 1px solid var(--line-dark);
    color: #fff;
    font: inherit;
    font-size: .85rem;
    padding: 7px 12px;
    border-radius: var(--radius);
    cursor: pointer;
}

.nav-language {
    display: none;
}

/* =========================================================
   Buttons
   ========================================================= */

.btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px is the smallest comfortable touch target. */
    min-height: 44px;
    padding: 12px 26px;
    border-radius: var(--radius);
    font-size: .95rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.btn--gold {
    background: var(--gold-500);
    color: var(--brand-950);
}

    .btn--gold:hover {
        background: var(--gold-300);
    }

.btn--ghost {
    border-color: var(--line-dark);
    color: var(--gold-300);
}

    .btn--ghost:hover {
        background: rgba(255,255,255,.07);
    }

.btn--dark {
    background: var(--brand-900);
    color: #fff;
}

    .btn--dark:hover {
        background: var(--brand-800);
    }

.btn--out {
    border-color: var(--line);
    color: var(--brand-900);
    background: #fff;
}

    .btn--out:hover {
        background: var(--paper-2);
        border-color: var(--gold-500);
    }

/* =========================================================
   Hero
   ========================================================= */

/* Fills the viewport below the two header strips, with a floor so it stays
   usable on a short window and a ceiling so it does not become a void on a
   tall desktop screen. */
.hero {
    position: relative;
    min-height: clamp(560px, calc(100svh - 108px), 880px);
    overflow: hidden;
    background: var(--brand-900);
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(6, 23, 16, .30), rgba(11, 36, 23, .88) ), url('/assets/architecture.webp') center / cover no-repeat;
        z-index: 0;
    }

html[dir="ltr"] .hero::before {
    transform: scaleX(-1);
}

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

.hero svg.lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .25;
}

.hero .in {
    position: relative;
    width: 100%;
}

.hero .marginal {
    max-width: 720px;
}

.hero h1 {
    font-size: clamp(34px,4.5vw,62px);
    line-height: 1.4;
}

.hero p {
    max-width: 56ch;
    color: #C9D6CD;
    margin-bottom: var(--space-4);
    font-size: 1.05rem;
}

.hero .accent {
    color: var(--gold-300);
}

.reach {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line-dark);
    font-size: .88rem;
}

    .reach div {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .reach b {
        color: #fff;
        font-weight: 500;
        direction: ltr;
    }

    .reach span {
        color: #9DB3A5;
        font-size: .82rem;
    }

/* =========================================================
   Cards
   ========================================================= */

.grid {
    display: grid;
    gap: 16px;
    margin-top: var(--space-4);
}

.g3 {
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
}

.g2 {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    display: block;
    box-shadow: var(--shadow-1);
    transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

    .card:hover {
        transform: translateY(-3px);
        border-color: var(--gold-500);
        box-shadow: var(--shadow-2);
    }

    .card svg {
        width: 24px;
        height: 24px;
        color: var(--gold-700);
        margin-bottom: 10px;
    }

    .card h3 {
        margin-bottom: 6px;
    }

    .card p {
        font-size: .92rem;
        color: var(--ink-500);
        line-height: 1.8;
    }

    .card .more {
        display: inline-block;
        margin-top: var(--space-2);
        font-size: .86rem;
        color: var(--brand-700);
        font-weight: 500;
        border-bottom: 1px solid var(--gold-500);
        padding-bottom: 1px;
        transition: color var(--speed) var(--ease);
    }

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

.service-card {
    /* start, not right: the same card serves the English layout. */
    text-align: start;
    font-family: inherit;
    cursor: pointer;
}

/* =========================================================
   Team
   ========================================================= */

.person {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

    .person:hover {
        border-color: var(--gold-500);
        box-shadow: var(--shadow-2);
    }

.ph {
    aspect-ratio: 4/5;
    background: var(--paper-2);
    display: grid;
    place-items: center;
    color: #9AA79E;
    font-size: .8rem;
    overflow: hidden;
}

.person .b {
    padding: 16px 18px 18px;
}

.person .role {
    font-size: .9rem;
    color: var(--gold-700);
    display: block;
    margin-bottom: 8px;
}

.person h3 {
    font-size: 1.15rem;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.6;
}

/* One framing rule for every member: the list is generated from the
   database, so per-position cropping cannot be maintained. */
.person .ph img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
}

.person--text {
    align-self: start;
}

.team-group + .team-group {
    margin-block-start: var(--space-5);
}

.team-group__title {
    margin-block: var(--space-4) var(--space-3);
}

/* A card with a detail page: the name is the only link, stretched over
   the whole card so the photo is clickable too. */
.person--link {
    position: relative;
}

    .person--link .person__link {
        color: inherit;
    }

        .person--link .person__link::after {
            content: "";
            position: absolute;
            inset: 0;
        }

    .person--link:focus-within {
        border-color: var(--gold-500);
        box-shadow: var(--shadow-2);
        outline: 2px solid var(--gold-500);
        outline-offset: 2px;
    }

/* Member detail page: a portrait, not a 16:9 banner that crops the face. */
.member-detail-photo {
    width: min(100%, 320px);
    aspect-ratio: 4/5;
    margin: var(--space-4) 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
}

    .member-detail-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 15%;
    }


.tag {
    display: inline-block;
    font-size: .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 9px;
    margin: 0 0 4px 4px;
    color: var(--ink-500);
}

/* =========================================================
   Contact and forms
   ========================================================= */

.cwrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(24px,4vw,52px);
    margin-top: var(--space-4);
    align-items: start;
}
.cwrap--single {
    grid-template-columns: minmax(0, 640px);
}

.field {
    margin-bottom: 12px;
}

.cform:has(#service option:not([value=""]):checked) .field--other {
    display: none;
}

label {
    display: block;
    font-size: .86rem;
    margin-bottom: 5px;
    color: #BFD0C4;
}

input,
select,
textarea {
    width: 100%;
    padding: 11px 13px;
    border-radius: var(--radius);
    border: 1px solid var(--line-dark);
    background: rgba(255,255,255,.06);
    color: #fff;
    font: inherit;
    font-size: .94rem;
    transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}

    input::placeholder,
    textarea::placeholder {
        color: #7E9488;
    }

    select option {
        color: #111612;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--gold-500);
        background: rgba(255,255,255,.1);
    }

textarea {
    min-height: 84px;
    resize: vertical;
}

/* A notice on a light page needs dark text; the gold-on-gold variant is
   only legible inside a dark section. */
.warn {
    border: 1px solid rgba(138,111,51,.38);
    background: rgba(194,160,99,.14);
    border-radius: var(--radius);
    padding: 13px 15px;
    font-size: .88rem;
    color: var(--ink-700);
    line-height: 1.8;
    margin-bottom: 14px;
}

.knowledge-unavailable {
    margin-top: var(--space-3);
}

.dark .warn,
.on-dark .warn {
    border-color: rgba(194,160,99,.45);
    color: var(--gold-300);
}

.dl {
    margin: 0;
    font-size: .93rem;
}

    .dl dt {
        color: #fff;
        font-weight: 500;
        margin-top: 14px;
    }

        .dl dt:first-child {
            margin-top: 0;
        }

    .dl dd {
        margin: 0;
        color: #A9BCB0;
        overflow-wrap: anywhere;
    }

/* =========================================================
   Questions
   ========================================================= */

details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 8px;
    transition: border-color var(--speed) var(--ease);
}

    details[open] {
        border-color: var(--gold-500);
    }

summary {
    padding: 15px 18px;
    cursor: pointer;
    font-weight: 500;
    font-size: .97rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    summary::marker {
        content: "";
    }

    summary::after {
        content: "+";
        color: var(--gold-700);
        font-size: 1.2rem;
        line-height: 1;
    }

details[open] summary::after {
    content: "\2212";
}

details p {
    padding: 0 18px 16px;
    font-size: .92rem;
    color: var(--ink-500);
}

/* =========================================================
   Footer
   ========================================================= */

.foot {
    background: var(--brand-950);
    color: #8FA396;
    font-size: .88rem;
    padding-block: 34px 20px;
}

.fcols {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 28px;
}

.foot h2 {
    margin: 0 0 10px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: normal;
    text-wrap: wrap;
}

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

.foot li {
    margin-bottom: 6px;
}

.foot a:hover {
    color: var(--gold-300);
}

.disc {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--line-dark);
    font-size: .8rem;
    line-height: 1.8;
    color: #7C8F84;
}

.legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    font-size: .8rem;
}

.footer-location {
    margin-top: 6px;
}

.footer-rights {
    margin-inline-start: auto;
}

.footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    color: var(--gold-300);
    transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

    .social-icon:hover {
        border-color: var(--gold-500);
        color: #fff;
    }

    .social-icon svg {
        width: 19px;
        height: 19px;
    }

.social-icon--disabled {
    opacity: .55;
    cursor: default;
}

/* =========================================================
   Floating actions
   ========================================================= */

.fab {
    position: fixed;
    inset-inline-start: 18px;
    bottom: 18px;
    z-index: 60;
    background: var(--gold-500);
    color: var(--brand-950);
    border-radius: 999px;
    padding: 11px 19px;
    font-weight: 500;
    font-size: .9rem;
    box-shadow: 0 5px 18px rgba(6,23,16,.3);
}

    .fab:hover {
        background: var(--gold-300);
    }

.chatbot-launcher {
    position: fixed;
    inset-inline-end: 18px;
    bottom: 18px;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border: 1px solid var(--gold-500);
    border-radius: 999px;
    background: var(--brand-900);
    color: var(--gold-300);
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(6, 23, 16, .3);
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

    .chatbot-launcher:hover {
        background: var(--brand-800);
        color: #fff;
    }

    .chatbot-launcher svg {
        width: 21px;
        height: 21px;
        flex: none;
    }

/* =========================================================
   Dialogs
   ========================================================= */

dialog {
    max-width: 480px;
    width: calc(100% - 32px);
    border: 1px solid var(--gold-500);
    border-radius: var(--radius);
    padding: 32px;
    background: var(--paper);
    color: var(--ink-900);
    font-family: inherit;
}

    dialog::backdrop {
        background: #061710aa;
    }

    dialog p {
        margin: 18px 0;
    }

/* =========================================================
   Service details
   ========================================================= */

.service-detail-page .wrap {
    max-width: 980px;
}

.service-back-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--space-4);
    color: var(--brand-700);
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 1px solid var(--gold-500);
    padding-bottom: 2px;
    transition: color var(--speed) var(--ease);
}

    .service-back-link:hover {
        color: var(--gold-700);
    }

.service-detail-image {
    margin: var(--space-4) 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
}

    .service-detail-image img {
        display: block;
        width: 100%;
        max-height: 520px;
        object-fit: cover;
    }

/* Plain text from the database: source line breaks are meaningful here. */
.service-detail-content {
    margin-top: var(--space-4);
    padding: clamp(24px, 4vw, 44px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    color: var(--ink-700);
    font-size: 1rem;
    line-height: 2;
    white-space: pre-line;
}

.service-detail-action {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--space-3);
}

    .service-detail-action .btn {
        min-width: 150px;
        text-align: center;
    }

/* =========================================================
   Knowledge / articles
   ========================================================= */

.article-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: var(--space-4) 0;
}

.article-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 17px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-700);
    font-size: 0.9rem;
    line-height: 1.4;
    transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease), background var(--speed) var(--ease);
}

    .article-filter:hover {
        border-color: var(--gold-500);
        color: var(--gold-700);
    }

    .article-filter.on {
        background: var(--brand-700);
        border-color: var(--brand-700);
        color: var(--paper);
    }

.article-filter__count {
    font-size: 0.75rem;
    opacity: .75;
}

/* Optional cover image: flush with the card edges, one ratio for every card
   so a grid mixing cards with and without images stays aligned. */
.article-card__image {
    margin: -22px -22px 16px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--paper-2);
}

    .article-card__image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.article-card__category {
    display: inline-block;
    margin-bottom: .5rem;
    color: var(--gold-700);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.article-card__date {
    display: block;
    margin-top: .8rem;
    color: var(--ink-500);
    font-size: 0.82rem;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: var(--space-3) 0 0;
    color: var(--ink-500);
    font-size: 0.88rem;
}

.article-meta__category {
    color: var(--brand-700);
    border-bottom: 1px solid var(--gold-500);
    padding-bottom: 1px;
    transition: color var(--speed) var(--ease);
}

    .article-meta__category:hover {
        color: var(--gold-700);
    }

/* Generated from Markdown, so it is real markup: it must not inherit the
   pre-line whitespace used for plain-text service content, which would
   turn every source line break into a visible break. */
.article-body {
    margin-top: var(--space-4);
    padding: clamp(24px, 4vw, 44px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    color: var(--ink-700);
    font-size: 1rem;
    line-height: 2;
}

    .article-body > :first-child {
        margin-top: 0;
    }

    .article-body > :last-child {
        margin-bottom: 0;
    }

    .article-body h2,
    .article-body h3,
    .article-body h4 {
        margin: var(--space-4) 0 var(--space-2);
        color: var(--ink-900);
        font-family: var(--font-display);
        line-height: 1.5;
        text-wrap: balance;
    }

    .article-body h2 {
        font-size: 1.45rem;
    }

    .article-body h3 {
        font-size: 1.2rem;
    }

    .article-body h4 {
        font-size: 1.05rem;
    }

    .article-body p {
        margin: 0 0 1.15rem;
        max-width: var(--measure);
    }

    .article-body ul,
    .article-body ol {
        margin: 0 0 1.15rem;
        padding-inline-start: 1.5rem;
        max-width: var(--measure);
    }

    .article-body li {
        margin-bottom: .5rem;
    }

    .article-body a {
        color: var(--brand-700);
        border-bottom: 1px solid var(--gold-500);
        transition: color var(--speed) var(--ease);
    }

        .article-body a:hover {
            color: var(--gold-700);
        }

    .article-body blockquote {
        margin: var(--space-3) 0;
        padding: .25rem 1.25rem;
        border-inline-start: 3px solid var(--gold-500);
        color: var(--ink-500);
    }

    .article-body code {
        padding: 2px 6px;
        background: var(--paper-2);
        border-radius: 2px;
        font-size: 0.9em;
    }

    .article-body pre {
        margin: var(--space-3) 0;
        padding: 1rem 1.25rem;
        overflow-x: auto;
        background: var(--paper-2);
        border-radius: var(--radius);
        direction: ltr;
        text-align: start;
    }

        .article-body pre code {
            padding: 0;
            background: none;
        }

    .article-body hr {
        margin: var(--space-4) 0;
        border: 0;
        border-top: 1px solid var(--line);
    }

/* =========================================================
   About page
   ========================================================= */

.about-page .lede {
    white-space: pre-line;
}

/* =========================================================
   Not found page
   ========================================================= */

.not-found-page {
    display: grid;
    align-items: center;
    min-height: 520px;
}

    .not-found-page .wrap {
        width: 100%;
        max-width: 820px;
    }

.not-found-card {
    position: relative;
    overflow: hidden;
    padding: clamp(32px, 6vw, 64px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

.not-found-code {
    position: absolute;
    inset-inline-end: 24px;
    top: 4px;
    color: var(--paper-2);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(90px, 18vw, 180px);
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.not-found-card .mlabel,
.not-found-card h1,
.not-found-card .rule,
.not-found-card .lede,
.not-found-actions {
    position: relative;
    z-index: 1;
}

.not-found-card h1 {
    max-width: 620px;
    margin-top: 10px;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.4;
}

.not-found-card .lede {
    max-width: 600px;
    line-height: 1.9;
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.not-found-primary,
.not-found-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 11px 22px;
    border: 1px solid var(--brand-700);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.not-found-primary {
    background: var(--brand-700);
    color: #fff;
}

    .not-found-primary:hover {
        background: var(--brand-900);
        border-color: var(--brand-900);
        color: #fff;
    }

.not-found-secondary {
    background: transparent;
    color: var(--brand-700);
}

    .not-found-secondary:hover {
        border-color: var(--gold-500);
        color: var(--gold-700);
    }

/* =========================================================
   Blazor application states
   ========================================================= */

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    color: #fff;
    padding: 1rem;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

/* =========================================================
   Responsive — one breakpoint per block, none nested
   ========================================================= */

@media (max-width: 1100px) {
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        inset-inline: 0;
        background: var(--brand-800);
        flex-direction: column;
        padding: 8px;
        gap: 0;
    }

        .nav.open {
            display: flex;
        }

    .lang {
        display: none;
    }

    .nav-language {
        display: flex;
        justify-content: flex-start;
        padding: 10px 13px 12px;
        margin-top: 4px;
        border-top: 1px solid var(--line-dark);
    }

        .nav-language .lang {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
        }

    .burger {
        display: block;
    }

    .head .wrap {
        position: relative;
    }

    .cwrap {
        grid-template-columns: 1fr;
    }

    .fcols {
        grid-template-columns: 1fr 1fr;
    }

    .screen {
        min-height: 0;
        padding-block: 2.8rem;
    }
}

@media (max-width: 760px) {
    .screen {
        padding-block: 2.6rem;
    }

    .hero {
        min-height: clamp(480px, calc(100svh - 96px), 720px);
    }

        .hero::before {
            background: linear-gradient(#0b2417ed,#0b2417d9), url('/assets/architecture.webp') center/cover no-repeat;
        }

        .hero h1 {
            font-size: 38px;
        }

        .hero p {
            font-size: 16px;
        }

    .head .wrap {
        gap: 12px;
    }

    .logo {
        width: 76px;
        height: 76px;
        padding: 5px;
        border-radius: 16px;
    }

    .mark b {
        font-size: 18px;
    }

    .mark small {
        font-size: 11px;
    }

    .person .ph {
        max-height: 440px;
    }

    .reach {
        gap: 16px;
    }

   

    .chatbot-launcher {
        width: 44px;
        height: 44px;
        padding: 0;
        inset-inline-end: 12px;
        bottom: 12px;
        justify-content: center;
    }

        .chatbot-launcher svg {
            width: 19px;
            height: 19px;
        }

    .chatbot-launcher__text {
        display: none;
    }
}

@media (max-width: 400px) {
    .head .wrap { gap: 8px; }
    .mark { gap: 10px; }
    .mark b { font-size: 16px; }
    .logo { width: 64px; height: 64px; }
    .burger { padding-inline: 8px; }
}

@media (max-width: 600px) {
    .service-detail-content,
    .article-body {
        padding: 20px;
        font-size: 0.95rem;
        line-height: 1.9;
    }

    .service-detail-action {
        display: grid;
        grid-template-columns: 1fr;
    }

        .service-detail-action .btn {
            width: 100%;
        }

    .not-found-page {
        min-height: 430px;
    }

    .not-found-card {
        padding: 28px 22px;
    }

    .not-found-code {
        inset-inline-end: 12px;
        font-size: 100px;
    }

    .not-found-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .not-found-primary,
    .not-found-secondary {
        width: 100%;
    }
}

@media (max-width: 560px) {
    body {
        font-size: 16px;
    }

    .wrap {
        width: 100%;
    }

    .screen {
        min-height: 0;
        padding-block: 2.4rem;
    }

    .mlabel {
        font-size: .82rem;
        letter-spacing: .08em;
    }

    .hero .in {
        width: 100%;
    }

    .service-card p {
        font-size: 1rem;
    }

    .fcols {
        grid-template-columns: 1fr;
    }

    .legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .footer-rights {
        margin-inline-start: 0;
    }

    .foot {
        padding-bottom: 78px;
    }

    .article-filters {
        gap: 8px;
    }
}

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

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    .card:hover {
        transform: none;
    }
}

/* =========================================================
   Homepage: continuous hero and services background
   ========================================================= */

#home .home-intro {
    position: relative;
    isolation: isolate;
    background: var(--brand-900);
}

    #home .home-intro::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient( 90deg, rgba(6, 23, 16, .30), rgba(11, 36, 23, .88) ), url('/assets/architecture.webp') center / cover no-repeat;
    }

html[dir="ltr"] #home .home-intro::before {
    transform: scaleX(-1);
}

/* =========================================================
   Extend hte homepage background to the footer.
   ========================================================= */

#home .home-intro > .hero {
    background: transparent;
}

    #home .home-intro > .hero::before {
        content: none;
    }

#home .home-intro > #services {
    display: block;
    min-height: 0;
    height: auto;
    background: transparent;
    padding-block: var(--space-3) var(--space-5);
}

    #home .home-intro > #services > .wrap {
        width: 100%;
        box-sizing: border-box;
    }

#home .home-service-titles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    column-gap: var(--space-5);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

    #home .home-service-titles li {
        min-width: 0;
        border-bottom: 1px solid var(--line-dark);
    }

    #home .home-service-titles a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-block: var(--space-2);
        color: inherit;
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 1.8vw, 1.4rem);
        font-weight: 700;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }

        #home .home-service-titles a:hover,
        #home .home-service-titles a:focus-visible {
            color: var(--gold-300);
            text-decoration: underline;
            text-decoration-color: var(--gold-500);
            text-underline-offset: 6px;
        }

#home .home-services-footer {
    margin-top: var(--space-3);
}

    #home .home-services-footer a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--gold-300);
        font-size: .9rem;
        text-decoration: underline;
        text-decoration-color: var(--gold-500);
        text-underline-offset: 6px;
    }

@media (max-width: 760px) {
    #home .home-intro::before {
        background: linear-gradient(#0b2417ed, #0b2417d9), url('/assets/architecture.webp') center / cover no-repeat;
    }
}

/* =========================================================
   Extend the homepage background to the footer.
========================================================= *


.site-content:has(> #home) {
    display: flex;
    flex-direction: column;
}

.site-content > #home {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#home > .home-intro {
    flex: 1;
    display: flex;
    flex-direction: column;
}

    #home > .home-intro > .hero {
        flex-grow: 1;
    
        
}

    Homepage: latest published articles */
#home .home-articles

/* Homepage: published company introduction */
#home .home-about {
    padding-block: var(--space-3) var(--space-5);
}

    #home .home-about > .wrap {
        width: 100%;
    }

    #home .home-about .marginal {
        max-width: 720px;
    }

#home .home-about-excerpt {
    max-width: var(--measure);
    color: inherit;
    line-height: 1.9;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

#home .home-about-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-3);
    color: var(--gold-300);
    font-size: .9rem;
    text-decoration: underline;
    text-decoration-color: var(--gold-500);
    text-underline-offset: 6px;
}

/* Homepage: published team */
#home .home-team {
    padding-block: var(--space-3) var(--space-5);
}

    #home .home-team > .wrap {
        width: 100%;
    }

#home .home-team-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: var(--space-3) var(--space-5);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

    #home .home-team-list li {
        min-width: 0;
        padding-block: var(--space-2);
        border-bottom: 1px solid var(--line-dark);
        overflow-wrap: anywhere;
    }

    #home .home-team-list h3 {
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    }

    #home .home-team-list p {
        margin-top: var(--space-1);
        color: var(--gold-300);
        font-size: .9rem;
    }

#home .home-team-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-3);
    color: var(--gold-300);
    font-size: .9rem;
    text-decoration: underline;
    text-decoration-color: var(--gold-500);
    text-underline-offset: 6px;
}

/* =========================================================
   Homepage: latest published articles 
========================================================= *

#home .home-articles {
    padding-block: var(--space-3) var(--space-5);
}

    #home .home-articles > .wrap {
        width: 100%;
    }

#home .home-article-titles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    column-gap: var(--space-5);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

    #home .home-article-titles li {
        min-width: 0;
        border-bottom: 1px solid var(--line-dark);
    }

    #home .home-article-titles a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-block: var(--space-2);
        color: inherit;
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 1.8vw, 1.4rem);
        font-weight: 700;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }

        #home .home-article-titles a:hover,
        #home .home-article-titles a:focus-visible {
            color: var(--gold-300);
            text-decoration: underline;
            text-decoration-color: var(--gold-500);
            text-underline-offset: 6px;
        }

#home .home-articles-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-3);
    color: var(--gold-300);
    font-size: .9rem;
    text-decoration: underline;
    text-decoration-color: var(--gold-500);
    text-underline-offset: 6px;
}

/* =========================================================
   Consultation form
   ========================================================= */

/* A field no human sees: anything that fills it is not a visitor. */
.hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-ok {
    border: 1px solid rgba(194,160,99,.5);
    background: rgba(194,160,99,.16);
    border-radius: var(--radius);
    padding: 16px 18px;
    color: var(--gold-300);
    line-height: 1.9;
}

.form-note {
    margin-top: var(--space-2);
    font-size: .85rem;
    color: #A9BCB0;
    line-height: 1.8;
}

.contact-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--space-3);
}

.contact-channels-title {
    font-size: 1.05rem;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.6;
}

.card .empty-state-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.6;
}

/* Editable announcement above the main header */
.site-announcement {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;
    color: var(--gold-300);
    background: linear-gradient( 90deg, var(--brand-950), #12372b, var(--brand-950) );
    border-bottom: 1px solid rgb(201 170 101 / 25%);
}

.announcement-viewport {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    overflow: hidden;
    padding-block: 9px;
}

.announcement-moving {
    flex: 0 0 auto;
    width: max-content;
    padding-inline: 24px;
    white-space: nowrap;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.6;
    text-shadow: 0 0 18px rgb(201 170 101 / 12%);
    animation: announcement-travel 40s linear infinite;
}



@keyframes announcement-travel {
    0%, 15% {
        transform: translateX(0);
        opacity: 1;
    }

    48% {
        transform: translateX(calc(-50vw - 50%));
        opacity: 1;
    }

    49% {
        transform: translateX(calc(-50vw - 50%));
        opacity: 0;
    }

    50% {
        transform: translateX(calc(50vw + 50%));
        opacity: 0;
    }

    51% {
        opacity: 1;
    }

    85%, 100% {
        transform: translateX(0);
        opacity: 1;
    }
}

html[dir="ltr"] .announcement-moving {
    animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
    .announcement-moving {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: pre-line;
        overflow-wrap: anywhere;
        text-align: center;
        animation: none;
        transform: none;
    }

}

.site-header-stack {
    position: sticky;
    top: 0;
    z-index: 50;
    flex: 0 0 auto;
}

    .site-header-stack .head {
        position: relative;
        top: auto;
        z-index: auto;
    }

html {
    scroll-padding-top: 150px;
}
/* Clearer secondary text in the footer */
.foot {
    color: #B7C5BB;
}

    .foot .disc {
        color: #A9BBB0;
    }

/* Light consultation card within the green contact page */
.contact-page .contact-form-card {
    min-width: 0;
    padding: clamp(20px, 3vw, 32px);
    background: var(--paper);
    color: var(--ink-900);
    border: 1px solid rgba(194, 160, 99, .35);
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .14);
}

    .contact-page .contact-form-card label {
        color: var(--ink-700);
        font-weight: 600;
    }

    .contact-page .contact-form-card input,
    .contact-page .contact-form-card select,
    .contact-page .contact-form-card textarea {
        background: #FFFDF9;
        color: var(--ink-900);
        border-color: #B9C2BA;
    }

        .contact-page .contact-form-card select option {
            background: #FFFDF9;
            color: var(--ink-900);
        }

        .contact-page .contact-form-card input::placeholder,
        .contact-page .contact-form-card textarea::placeholder {
            color: #5C6660;
        }

        .contact-page .contact-form-card input:focus,
        .contact-page .contact-form-card select:focus,
        .contact-page .contact-form-card textarea:focus {
            background: #FFFFFF;
            border-color: var(--gold-700);
            outline: 2px solid var(--gold-700);
            outline-offset: 2px;
        }

    .contact-page .contact-form-card .form-note {
        color: var(--ink-500);
    }

    .contact-page .contact-form-card .warn {
        color: var(--ink-700);
        background: #F0E9D9;
        border-color: #BCA36F;
    }

    .contact-page .contact-form-card .form-ok {
        color: var(--brand-900);
        background: #E7EEE7;
        border-color: #7D9B84;
    }

        .contact-page .contact-form-card .form-ok p {
            color: inherit;
        }

    .contact-page .contact-form-card .btn:focus-visible {
        outline-color: var(--brand-700);
    }