/* ==========================================================================
   00 — TOKENS
   Figma variables → CSS custom properties. Names mirror the daisyUI theme
   slots (websites skill, daisy.md §2) so the SvelteKit port is a rename.
   The Figma name is in the comment of every line. Never use a raw colour,
   font, radius or spacing outside this file.
   ========================================================================== */
:root {
    /* ---- colour roles ---- */
    --color-primary:           #2E344E; /* Primary blu — body text, dark cards */
    --color-primary-content:   #EDE9DE;
    --color-neutral:           #0C2340; /* Secondary blu — inverted (dark) surface, headings */
    --color-neutral-content:   #EDE9DE;
    --color-base-100:          #EDE9DE; /* Background color — page surface */
    --color-base-200:          #C9C2B2; /* Secondary Color — alternate surface, footer, muted cards */
    --color-base-content:      #2E344E; /* text on base surfaces (= Primary blu) */
    --color-secondary:         #9E5330; /* Color - CTA — accent buttons */
    --color-secondary-content: #EDE9DE;
    --color-glow:              #EE8E35; /* warm end of the gradient veil (no Figma variable) */

    /* ---- alpha variants (Figma "… 25% / 50% / 75%") ---- */
    --color-primary-25:  rgb(46 52 78 / 0.25);    /* Primary blu 25% — hairlines on light */
    --color-neutral-50:  rgb(12 35 64 / 0.5);     /* Secondary blu 50% — placeholders, partner boxes text */
    --color-neutral-75:  rgb(12 35 64 / 0.75);    /* Secondary blu 75% — dimmed text on light */
    --color-base-100-50: rgb(237 233 222 / 0.5);  /* Background color 50% — form fields, wells */
    --color-base-100-75: rgb(237 233 222 / 0.75); /* Background color 75% — dimmed text on dark */
    --color-base-200-75: rgb(201 194 178 / 0.75); /* Secondary Color 75% — hero kicker */
    --color-base-100-25: rgb(237 233 222 / 0.25); /* hairlines on dark (derived) */

    /* ---- the gradient veil (hero; reuse where the stops are the same) ---- */
    --gradient-veil: linear-gradient(120.82deg,
        rgb(46 52 78 / 0.9) 23.289%, rgb(46 52 78 / 0.9) 48.681%,
        rgb(158 83 48 / 0.9) 93.531%, rgb(238 142 53 / 0.9) 105.36%);

    /* ---- type ---- */
    --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --text-h1: 64px;   /* H1 — Newsreader Light, line-height 100% (also used for section titles) */
    --text-h2: 48px;   /* H2 — Newsreader Light */
    --text-h3: 40px;   /* H3 — Newsreader Light (card titles, footer titles) */
    --text-h4: 24px;   /* H4 — Inter Regular, lh 100%, letter-spacing -2px */
    --text-lead: 20px; /* text medium large — Inter Regular, lh 100% (kicker, MENU) */
    --text-body: 16px; /* text default — Inter Light 16/24 */
    --leading-body: 24px;
    --leading-label: 20px; /* text medium — Inter Medium 16/20 (buttons, labels) */

    /* ---- radii ---- */
    --radius-box: 10px;       /* raggio/box — cards, photos, fields */
    --radius-field: 10px;
    --radius-selector: 100px; /* pill buttons */

    /* ---- spacing: spazio/* — between elements inside a block ---- */
    --space-4: 4px;   --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px;
    --space-28: 28px; --space-36: 36px; --space-40: 40px; --space-48: 48px; --space-56: 56px;
    --space-60: 60px; --space-64: 64px; --space-68: 68px; --space-72: 72px; --space-76: 76px;

    /* ---- rhythm: ritmo/* — between sections and groups ---- */
    --rhythm-100: 100px; --rhythm-104: 104px; --rhythm-112: 112px; --rhythm-116: 116px;
    --rhythm-120: 120px; --rhythm-128: 128px; --rhythm-164: 164px; --rhythm-172: 172px;
    --rhythm-176: 176px; --rhythm-196: 196px; --rhythm-204: 204px; --rhythm-216: 216px;
    --rhythm-224: 224px; --rhythm-228: 228px; --rhythm-232: 232px; --rhythm-252: 252px;
    --rhythm-292: 292px; --rhythm-348: 348px; --rhythm-356: 356px; --rhythm-424: 424px;
    --rhythm-480: 480px; --rhythm-508: 508px;

    /* ---- layout ---- */
    --gutter: var(--space-40);        /* page edge */
    --container: 1360px;              /* content width at 1440 */
    --section-pad: var(--rhythm-120); /* designer rule: 120px between a section edge and its first/last element */
    --header-h: 120px;                /* navbar band height (design) */
    --header-top: 45px;               /* navbar offset from the top at rest (design) */
    --header-h-scrolled: 72px;
    --icon-circle: 41px;              /* icon/arrow, icon/plus in use */
    --duration: 220ms;
    --duration-slow: 420ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- mobile (< 960px): the same tokens, smaller ---- */
@media (max-width: 959px) {
    :root {
        --gutter: var(--space-20);
        --section-pad: var(--space-64);
        --header-h: 88px;
        --header-top: 12px;
        --header-h-scrolled: 64px;
        --text-h1: 40px;
        --text-h2: 32px;
        --text-h3: 28px;
        --text-h4: 20px;
        --text-lead: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root { --duration: 0ms; --duration-slow: 0ms; }
}

/* ---- icon geometry (exported from Figma icon/arrow 4009:7 and icon/plus 4023:128), embedded so masks need no URL resolution ---- */
:root {
    --icon-arrow: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cg id=%22shape%22 clip-path=%22url(%23clip0_0_4)%22%3E %3Cpath id=%22Vector%22 d=%22M24 47.4146C36.9315 47.4146 47.4146 36.9315 47.4146 24C47.4146 11.0685 36.9315 0.585366 24 0.585366C11.0685 0.585366 0.585366 11.0685 0.585366 24C0.585366 36.9315 11.0685 47.4146 24 47.4146Z%22 stroke=%22%23EDE9DE%22/%3E %3Cpath id=%22Vector_2%22 d=%22M27.6709 34.721L37.9219 23.81%22 stroke=%22%23EDE9DE%22/%3E %3Cpath id=%22Vector_3%22 d=%22M37.9143 24.602L27.6631 13.2692%22 stroke=%22%23EDE9DE%22/%3E %3Cpath id=%22Vector_4%22 d=%22M37.4634 24.0001H9.36585%22 stroke=%22%23EDE9DE%22/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id=%22clip0_0_4%22%3E %3Crect width=%2248%22 height=%2248%22 fill=%22white%22/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E ");
    --icon-plus: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cg id=%22shape%22 clip-path=%22url(%23clip0_0_4)%22%3E %3Cpath id=%22Vector%22 d=%22M24 47.4146C36.9315 47.4146 47.4146 36.9315 47.4146 24C47.4146 11.0685 36.9315 0.585366 24 0.585366C11.0685 0.585366 0.585366 11.0685 0.585366 24C0.585366 36.9315 11.0685 47.4146 24 47.4146Z%22 stroke=%22%232E344E%22/%3E %3Cpath id=%22Vector_2%22 d=%22M24 11.7073V36.2927%22 stroke=%22%232E344E%22/%3E %3Cpath id=%22Vector_3%22 d=%22M11.7073 24H36.2927%22 stroke=%22%232E344E%22/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id=%22clip0_0_4%22%3E %3Crect width=%2248%22 height=%2248%22 fill=%22white%22/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E ");
}


/* ==========================================================================
   10 — BASE: element defaults, so page markup can stay plain
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: clip; /* photos that straddle two sections must never widen the page */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.menu-open { overflow: hidden; }

body {
    margin: 0;
    background: var(--color-base-100);
    color: var(--color-base-content);
    font: 300 var(--text-body) / var(--leading-body) var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font: 400 var(--text-h4) / 1 var(--font-sans); letter-spacing: -2px; }

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; }
::selection { background: var(--color-secondary); color: var(--color-secondary-content); }

/* ---- type utilities: the Figma text styles, independent of the element ---- */
.t-h1    { font: 300 var(--text-h1) / 1 var(--font-display); letter-spacing: 0; }
.t-h2    { font: 300 var(--text-h2) / 1 var(--font-display); letter-spacing: 0; }
.t-h3    { font: 300 var(--text-h3) / 1 var(--font-display); letter-spacing: 0; }
.t-h4    { font: 400 var(--text-h4) / 1 var(--font-sans); letter-spacing: -2px; }
.t-lead  { font: 400 var(--text-lead) / 1 var(--font-sans); }
.t-body  { font: 300 var(--text-body) / var(--leading-body) var(--font-sans); }
.t-label { font: 500 var(--text-body) / var(--leading-label) var(--font-sans); }
.t-dim   { color: var(--color-neutral-75); }          /* dimmed text on a light surface */
.t-dim-inverse { color: var(--color-base-100-75); }   /* dimmed text on a dark surface */

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


/* ==========================================================================
   20 — COMPONENTS shared by more than one section.
   A section extends these with its own modifiers; it never redefines them.
   ========================================================================== */

/* ---- section + container: background on the outer, width on the inner ---- */
.section {
    position: relative;
    padding-block: var(--section-pad);
    background: var(--color-base-100);
    color: var(--color-base-content);
}
.section--dark  { background: var(--color-neutral); color: var(--color-neutral-content); }
.section--alt   { background: var(--color-base-200); }
.section--flush { padding-block: 0; }

.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

/* ---- section head: kicker + title + text (services, specialized, blog…) ---- */
.section-head { display: flex; flex-direction: column; gap: var(--space-36); }
.section-head__kicker { font: 400 var(--text-lead) / 1 var(--font-sans); text-transform: uppercase; color: var(--color-neutral-75); }
.section-head__title  { max-width: 790px; font: 300 var(--text-h1) / 1 var(--font-display); letter-spacing: 0; color: var(--color-neutral); }
.section-head__text   { max-width: 900px; color: var(--color-neutral-75); }
.section--dark .section-head__kicker,
.section--dark .section-head__text  { color: var(--color-base-100-75); }
.section--dark .section-head__title { color: var(--color-neutral-content); }

.kicker { font: 400 var(--text-lead) / 1 var(--font-sans); text-transform: uppercase; color: var(--color-neutral-75); }

/* ---- buttons: pill, Inter Medium 16/20, 52px tall, text already uppercase ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    padding: 15px 39px; /* 16/40 in the design, minus the 1px border every variant carries */
    border: 1px solid transparent;
    border-radius: var(--radius-selector);
    font: 500 var(--text-body) / var(--leading-label) var(--font-sans);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease),
                border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--accent { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-secondary-content); }
.btn--accent:hover { background: color-mix(in oklab, var(--color-secondary) 86%, black); border-color: color-mix(in oklab, var(--color-secondary) 86%, black); }

.btn--primary-light { background: var(--color-neutral); border-color: var(--color-neutral); color: var(--color-neutral-content); }
.btn--primary-light:hover { background: color-mix(in oklab, var(--color-neutral) 82%, white); border-color: color-mix(in oklab, var(--color-neutral) 82%, white); }

.btn--outlined-light { background: transparent; border-color: var(--color-neutral); color: var(--color-neutral); }
.btn--outlined-light:hover { background: var(--color-neutral); color: var(--color-neutral-content); }

.btn--primary-dark { background: var(--color-base-100); border-color: var(--color-base-100); color: var(--color-neutral); }
.btn--primary-dark:hover { background: #fff; border-color: #fff; }

.btn--outlined-dark { background: transparent; border-color: var(--color-base-100); color: var(--color-base-100); }
.btn--outlined-dark:hover { background: var(--color-base-100); color: var(--color-neutral); }

/* ---- a row / a stack of buttons ---- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-16); justify-content: center; }
.actions--start { justify-content: flex-start; }
.actions--stack { flex-direction: column; align-items: flex-start; gap: var(--space-12); }

/* ---- circle icons (icon/arrow, icon/plus): the exported SVG as a mask, coloured by currentColor ---- */
.icon {
    display: inline-block;
    flex: none;
    width: var(--icon-circle);
    height: var(--icon-circle);
    background-color: currentColor;
    -webkit-mask: var(--icon-src) center / contain no-repeat;
    mask: var(--icon-src) center / contain no-repeat;
    transition: transform var(--duration) var(--ease);
}
.icon--arrow { --icon-src: var(--icon-arrow); }
.icon--plus  { --icon-src: var(--icon-plus); }

/* ---- card: rounded box, title, text, arrow bottom-right; the whole card is the link ---- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    min-height: 300px;
    padding: var(--space-48);
    border-radius: var(--radius-box);
    overflow: hidden;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.card__title { font: 300 var(--text-h3) / 1 var(--font-display); letter-spacing: 0; }
.card__text  { color: inherit; }
.card__icon  { margin-top: auto; align-self: flex-end; }
.card--dark  { background: var(--color-neutral); color: var(--color-neutral-content); }
.card--muted { background: var(--color-base-200); color: var(--color-primary); }
a.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgb(12 35 64 / 0.45); }
a.card:hover .card__icon { transform: translateX(4px); }

/* ---- rounded photo ---- */
.photo { border-radius: var(--radius-box); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- form fields (field/input): real label, visually hidden; placeholder as in the design ---- */
.field {
    display: block;
    width: 100%;
    height: 49px;
    padding: var(--space-12) var(--space-20);
    border: 0;
    border-radius: var(--radius-field);
    background: var(--color-base-100-50);
    color: var(--color-primary);
    transition: box-shadow var(--duration) var(--ease);
}
.field::placeholder { color: var(--color-neutral-50); opacity: 1; }
.field:focus { outline: none; box-shadow: 0 0 0 2px var(--color-neutral-50); }
textarea.field { height: 197px; resize: vertical; }
.field-group { display: flex; flex-direction: column; gap: 8px; }
.checkbox { display: flex; align-items: flex-start; gap: var(--space-12); }
.checkbox input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--color-secondary); flex: none; }
.form__status { min-height: var(--leading-body); }
.form__status:empty { display: none; }

/* ---- FAQ item (block/faq-item): <details> row, 75px, hairline below, plus rotates when open ---- */
.faq-item { border-bottom: 1px solid var(--color-primary-25); }
.faq-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    min-height: 75px;
    padding-block: var(--space-12);
    cursor: pointer;
    list-style: none;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__question { max-width: 640px; }
.faq-item[open] .icon--plus { transform: rotate(45deg); }
.faq-item__answer { max-width: 900px; padding: 0 0 var(--space-24); color: var(--color-neutral-75); }

/* ---- hairline list rows (the footer link list shares the FAQ row look) ---- */
.hairline-list { list-style: none; border-top: 1px solid var(--color-primary-25); }
.hairline-list > li { border-bottom: 1px solid var(--color-primary-25); }

/* ---- mobile ---- */
@media (max-width: 959px) {
    .actions { flex-direction: column; align-items: stretch; }
    .actions--stack { align-items: stretch; }
    .btn { width: 100%; }
    .card { min-height: 0; padding: var(--space-36); }
}


/* ---- section: about.css ---- */
/* ==========================================================================
   ABOUT (block/about, 4019:59) — two stacked full-bleed blocks: a dark
   "quote" band and a light "statement" band. Each manages its own vertical
   rhythm, so the shared `.section` top/bottom padding is switched off here.
   ========================================================================== */
.about { padding-block: 0; } /* the two sub-blocks below set their own padding — see §quote/§statement */

/* ---- block 1: quote (dark) ---- */
.about__quote { background: var(--color-neutral); }

.about__quote-row {
    display: flex;
    align-items: flex-start;
    /* photo (368, fixed) + quote (901, fixed) in a 1360 container leaves exactly
       91px between them (matches Figma x=499) — space-between gets there with
       no magic gap number */
    justify-content: space-between;
    padding-top: var(--rhythm-116);    /* figma photo top = 117px; 116 is the nearest step, 1px snap */
    padding-bottom: var(--rhythm-120);
    min-height: 715px;                 /* height the design draws for block/quote (258 + 3×64 + 265) */
}

.about__photo { flex: none; width: 368px; height: 474px; }
/* figma frames the portrait from the top of the source (h 116.44%, top 0), not centred */
.about__photo img { object-position: 50% 0; }

.about__quote-text {
    flex: none;
    width: 901px;
    max-width: 100%;
    margin: 0;
    /* literal: figma quote y (258) − the row's padding-top (116) = 142; no rhythm
       or space step lands within 2px (128 is 14 off, 164 is 22 off), so this stays
       a literal offset — it is the single figure that pins the quote's first line */
    padding-top: 142px;
    color: var(--color-base-200);
}

/* ---- block 2: statement (light) ---- */
.about__statement {
    padding-top: 0; /* the straddling photo (see .about__photo--trio) supplies the visual gap from the block above */
    padding-bottom: var(--rhythm-120); /* text ends ~1312, section ends 1432 → 120 */
}

.about__row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* (1360 − 16) / 2 = 672px per column, exactly the design's two 672px columns */
    grid-template-areas: "claim photo"
                          "claim text";
    column-gap: var(--space-16); /* the design's 16px between the two 672px columns */
    row-gap: 0;                  /* the vertical gap is owned by .about__text's margin */
}

.about__claim {
    grid-area: claim;
    align-self: end; /* bottom-aligns the claim with .about__text, the last item of the right column */
    color: var(--color-neutral);
}

.about__photo--trio {
    grid-area: photo;
    width: 100%;
    height: 474px;
    /* sanctioned straddle: the photo's real anchor is the dark block above —
       it pulls up 143px into it (design: photo top 572 vs. dark block bottom 715) */
    margin-top: -143px;
}

.about__text {
    grid-area: text;
    max-width: 557px;
    /* figma: photo bottom 1046 → text top 1168 = 122; snapped to the 120 step (2px) */
    margin-top: var(--rhythm-120);
    color: var(--color-neutral-75);
}

/* ---- mobile ---- */
@media (max-width: 959px) {
    .about__quote-row {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-36);
        padding-block: var(--section-pad);
        min-height: 0; /* the 715px block height is a desktop-only figure */
    }
    .about__photo {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        max-height: 420px;
    }
    .about__quote-text {
        width: auto;
        max-width: 100%;
        padding-top: 0;
        font-size: var(--text-h2); /* 32 on mobile: 40 is too heavy for a 95-character quote at 390 */
    }

    .about__statement { padding-top: var(--section-pad); }
    .about__row {
        grid-template-columns: 1fr;
        grid-template-areas: "photo"
                              "claim"
                              "text";
        gap: var(--space-36);
    }
    .about__claim { align-self: auto; }
    .about__photo--trio {
        height: auto;
        aspect-ratio: 672 / 474;
        margin-top: 0; /* no straddle on mobile */
    }
    .about__text {
        max-width: none;
        margin-top: 0; /* spacing now comes from .about__row's gap */
    }
}


/* ---- section: blog.css ---- */
/* ==========================================================================
   BLOG — section/blog (4022:101), 1440x1272, on --color-base-200 (.section--alt).
   .section-head is used as-is: no kicker in this instance, and the title/text
   max-widths (790 / 900) and the 36px inner gap already match the shared rule
   exactly — nothing to override there.
   Card is card/article (4018:60): a flat --color-neutral card (.card--dark,
   already the right fill+text colour), cream title at full opacity, body text
   at 75% opacity, 48x48 arrow icon bottom-right. Two-tier internal gap (48
   between the text block and the arrow, 24 between title and text) needs a
   .card__body wrapper, same pattern as .specialized's card.
   ========================================================================== */

.blog {
    /* Figma: pt-[400px] on the section root — literal, not a rhythm token
       (the nearest step, --rhythm-424, is 24px off — too far to snap per
       CONVENTIONS §3). This reserves the room the PREVIOUS section's
       statement photo needs: it straddles ~350px into this section's top
       (see statement.css .statement__photo, the sanctioned absolute photo).
       Kept literal on desktop per the brief; reset to the normal mobile
       section padding below, since the photo goes back into flow on mobile
       and no longer needs the reserved space. pb stays the shared .section
       120 (--rhythm-120 via --section-pad, untouched). */
    padding-top: 400px;
}

.blog .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-76); /* head -> content, Figma gap-[var(--spazio/76)] */
}

.blog__content {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-112); /* grid -> actions, Figma gap-[var(--ritmo/112)] */
}

.blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Figma gap-[var(--spazio/16)]; at the 1360px content width this gives
       each card 442.67px (3 * 442.67 + 2*16 = 1360), matching the brief's
       442.67x300 card size without a fixed width. */
    gap: var(--space-16);
    list-style: none;
}

/* ---- card/article: reuse .card + .card--dark, add the two-tier gap the design draws ---- */
.blog .card {
    /* Figma draws this card at a FIXED h-[300px] (not the shared min-height:300),
       a design-drawn card size — allowed as a literal px by CONVENTIONS §3.
       With min-height the 48px arrow pushed the card to 304 and shifted
       everything below it by 4px. */
    height: 300px;
    gap: var(--space-48); /* text-block -> arrow, outer card gap in Figma (not the shared 24) */
}
.blog .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-24); /* title -> text, inner group gap in Figma */
    width: 100%;
}
.blog .card__text {
    /* Figma: "Background color 75%" on the card text, not the full-opacity
       cream .card--dark gives its text by default */
    color: var(--color-base-100-75);
}
.blog .card__icon {
    /* this card's icon/arrow instance is scaled to 48x48 in the design, not
       the component's own 41x41 default that --icon-circle assumes
       elsewhere (services-specialized's card uses the unscaled 41px icon) */
    width: 48px;
    height: 48px;
}

/* ---- mobile ---- */
@media (max-width: 959px) {
    .blog {
        padding-top: var(--section-pad); /* the 400px reserve is only needed on desktop */
    }
    .blog .container {
        gap: var(--space-48); /* the desktop 76 is too airy on a 390px screen */
    }
    .blog__content {
        gap: var(--space-64); /* desktop 112, scaled like --section-pad does (120 -> 64) */
    }
    .blog__grid {
        grid-template-columns: 1fr;
    }
    .blog .card {
        height: auto; /* the 300px design height is desktop only; let it grow with the text */
    }
}


/* ---- section: faq.css ---- */
/* ==========================================================================
   FAQ (section/faq 4044:1658) — h2 + accordion list + CTA. Identical instance
   on HOMEPAGE (4044:1659) and SERVIZI ORDINARI (4044:1707): one fragment,
   included on both pages via pages.json. Light section, so .section defaults
   (background/text colour) are already correct — no override needed.
   Answers are not present in the design: obvious Italian placeholder text.
   ========================================================================== */
.faq__container {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-112); /* root gap-112 in Figma, applied uniformly between title / list / actions */
}

.faq__title {
    /* Figma draws this <h2> at the H3 (40) style, not the default H2 (48) */
    font-size: var(--text-h3);
    /* colour: default body colour (--color-base-content = Primary blu #2E344E) already matches the design's "primary-blu" fill — no override needed */
}

/* ---- list: .hairline-list gives the top hairline (border-top on the <ul>). Figma's list wrapper
   also carries py-28, but its frame is pinned to a fixed height (478 = 28 top padding + 6 × 75
   rows, with overflow-clip) that clips the bottom half of that padding away — the reference render
   shows no gap below the last hairline beyond the 112 the outer flex gap already gives, so only
   the top padding is reproduced here. ---- */
.faq__list {
    padding-top: var(--space-28);
    /* .hairline-list's border-top is a real border: it adds 1px of layout height above the padding,
       so every row and the CTA land 1px low (measured). Figma draws the stroke inside the frame —
       reproduce it as an inset shadow: same line, same colour, paint-only. */
    border-top: none;
    box-shadow: inset 0 1px 0 0 var(--color-primary-25);
}
/* each row's own .faq-item already paints its "filetto sotto" (bottom hairline) per the component
   spec, so the <li> itself must not also draw one from .hairline-list — that would double the line */
.faq__list > li {
    border-bottom: none;
}
/* .faq-item's own border-bottom is a real border on an auto-height box: it adds 1px on top of
   the 75px row instead of overlaying it, drifting every following row 1px lower (measured:
   76px between rows instead of 75, ~6px of drift by the last row). Swap it for an inset shadow —
   same colour/position, but paint-only, so it doesn't add to the box height. */
.faq .faq-item {
    border-bottom: none;
    box-shadow: inset 0 -1px 0 0 var(--color-primary-25);
}

/* ---- mobile: same structure — the question wraps inside the row, the plus stays pinned right
   (already flex + justify-content: space-between in .faq-item__summary). The shared 640px cap on
   the question is dropped: below 960px the container can still be up to ~919px wide (tablet
   portrait), where that cap would wrap the text early and leave a dead gap before the icon. ---- */
@media (max-width: 959px) {
    /* the desktop 112 rhythm reads as a hole on a phone (same call as .statement / .site-footer) */
    .faq__container {
        gap: var(--space-48);
    }
    .faq .faq-item__question {
        max-width: none;
    }
}


/* ---- section: footer.css ---- */
/* ==========================================================================
   FOOTER (section/footer 4044:1755) — contact form, recap, link list, partner
   placeholders, legal line. Identical on both pages. Surface reused from
   .section--alt (Secondary Color, --color-base-200); padding-block reused
   from .section (--section-pad = --rhythm-120, matches the design's 120).
   ========================================================================== */
.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-112);
}

/* ---- shared title style for the three h2s (Contatti / Dove Siamo / Link):
   Figma draws them at the H3 size (40) even though they are <h2>s ---- */
.site-footer h2 {
    font-size: var(--text-h3);
    color: var(--color-neutral);
}

/* ---- group 1: columns ---- */
.site-footer__columns {
    display: flex;
    align-items: flex-start;
    gap: var(--space-60);
    min-height: 616px; /* the design draws the "columns" group at a fixed 616px — 16px more than its
                          content — and the 112 rhythm below starts from there; keeping the height
                          keeps everything under it where Figma puts it */
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    width: 672px; /* fixed column width drawn by the design */
    flex: none;
}

.site-footer__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}
.site-footer__form .btn {
    align-self: flex-start; /* .btn is inline-flex but a flex column stretches it full width by default */
    min-height: 56px;       /* the footer's button/accent is drawn 56px tall (18/40), not the 52px .btn ships */
}
.site-footer__form .checkbox a {
    color: var(--color-neutral);
    text-decoration: underline;
    transition: color var(--duration) var(--ease);
}
.site-footer__form .checkbox a:hover { color: var(--color-secondary); }

.site-footer__where {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    flex: 1;
    min-width: 0;
}

.site-footer__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.site-footer__group a,
.site-footer__social {
    transition: color var(--duration) var(--ease);
}
.site-footer__group a:hover { color: var(--color-neutral); }

.site-footer__social {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding-top: var(--space-24);
    color: var(--color-primary);
    font: 500 var(--text-body) / var(--leading-label) var(--font-sans);
}
.site-footer__social:hover { color: var(--color-neutral); }
.site-footer__social-icon {
    width: 20px;  /* placeholder square drawn by the design, no icon asset yet */
    height: 20px;
    border-radius: 4px;
    background: var(--color-primary);
    flex: none;
    transition: background-color var(--duration) var(--ease);
}
.site-footer__social:hover .site-footer__social-icon { background: var(--color-neutral); }

/* ---- group 2: links ---- */
.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-56);
}
.site-footer .hairline-list > li {
    display: flex;
    min-height: 75px; /* the design's 75px row includes its own hairline */
}
.site-footer .hairline-list > li > a {
    display: flex;
    flex: 1;
    align-items: center;
    padding-block: var(--space-24);
    color: var(--color-primary);
    transition: color var(--duration) var(--ease), padding-left var(--duration) var(--ease);
}
.site-footer .hairline-list > li > a:hover {
    color: var(--color-neutral);
    padding-left: var(--space-12);
}

/* ---- group 3: partners (placeholder boxes) ---- */
.site-footer__partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-16);
    list-style: none;
}
.site-footer__partners li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 98px;  /* fixed placeholder box drawn by the design */
    height: 98px;
    padding: var(--space-12);
    background: var(--color-base-100-50);
    color: var(--color-neutral-50);
    text-align: center;
}

/* ---- legal line ---- */
.site-footer__legal {
    text-align: center;
    color: var(--color-primary);
}
.site-footer__legal-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-20); /* the design writes the line as one string with wide spaces around each "|" */
}

/* ---- mobile ---- */
@media (max-width: 959px) {
    /* the 112 rhythm between the four groups is a desktop measure; on a phone it reads as a hole */
    .site-footer__inner { gap: var(--space-64); }
    .site-footer__columns { flex-direction: column; gap: var(--space-56); min-height: 0; }
    .site-footer__contact,
    .site-footer__where { width: 100%; }
    .site-footer__links { gap: var(--space-36); }
    /* the pipes would dangle at the end of the wrapped lines */
    .site-footer__legal-sep { display: none; }
    .site-footer__legal-line { gap: 0 var(--space-16); }
}


/* ---- section: header.css ---- */
/* ==========================================================================
   HEADER — fixed over the hero (transparent, cream text, as designed), becomes a
   compact dark bar on scroll. The MENU button opens a full-screen overlay.
   ========================================================================== */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    padding-top: var(--header-top);
    color: var(--color-base-100);
    transition: padding-top var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.site-header__bar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-h);
    transition: height var(--duration) var(--ease);
}
.site-header__menu {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: 400 var(--text-lead) / 1 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0;
    transition: color var(--duration) var(--ease);
}
.site-header__menu:hover { color: var(--color-base-200); }
.site-header__logo img {
    width: 117px;
    height: 67px;
    transition: transform var(--duration) var(--ease);
}
.site-header__contacts {
    justify-self: end;
    display: flex;
    gap: var(--space-68);
    font-weight: 300;
}
.site-header__contacts a { transition: color var(--duration) var(--ease); }
.site-header__contacts a:hover { color: var(--color-base-200); }

/* scrolled: compact, dark, blurred */
.site-header.is-scrolled:not(.is-open) {
    padding-top: 0;
    background: rgb(12 35 64 / 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.site-header.is-scrolled:not(.is-open) .site-header__bar { height: var(--header-h-scrolled); }
.site-header.is-scrolled:not(.is-open) .site-header__logo img { transform: scale(0.72); }

/* ---- the overlay menu ---- */
.site-menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    padding-top: calc(var(--header-top) + var(--header-h) + var(--space-40));
    padding-bottom: var(--space-40);
    background: var(--color-neutral);
    color: var(--color-base-100);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-slow) var(--ease), visibility 0s linear var(--duration-slow);
}
.site-header.is-open .site-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-slow) var(--ease), visibility 0s;
}
.site-menu__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--space-60);
    align-items: start;
}
.site-menu__list { list-style: none; }
.site-menu__list li {
    border-top: 1px solid var(--color-base-100-25);
    opacity: 0;
    transform: translateY(16px);
}
.site-menu__list li:last-child { border-bottom: 1px solid var(--color-base-100-25); }
.site-header.is-open .site-menu__list li {
    opacity: 1;
    transform: none;
    transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
    transition-delay: calc(80ms + var(--i) * 45ms);
}
.site-menu__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    padding-block: var(--space-24);
    font: 300 var(--text-h2) / 1.1 var(--font-display);
    transition: color var(--duration) var(--ease), padding-left var(--duration) var(--ease);
}
.site-menu__list a::after {
    content: '';
    width: var(--icon-circle);
    height: var(--icon-circle);
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.site-menu__list a:hover,
.site-menu__list a[aria-current="page"] { color: var(--color-base-200); }
.site-menu__list a:hover { padding-left: var(--space-12); }
.site-menu__list a:hover::after,
.site-menu__list a[aria-current="page"]::after { opacity: 1; transform: none; }

.site-menu__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding-top: var(--space-24);
    color: var(--color-base-100-75);
}
.site-menu__group { display: flex; flex-direction: column; gap: var(--space-4); }
.site-menu__label { font: 500 var(--text-body) / var(--leading-label) var(--font-sans); color: var(--color-base-100); }
.site-menu__aside a:hover { color: var(--color-base-100); }

/* ---- mobile ---- */
@media (max-width: 959px) {
    .site-header__logo img { width: 90px; height: 52px; }
    .site-header__contacts { display: none; }
    .site-menu { padding-top: calc(var(--header-top) + var(--header-h) + var(--space-24)); }
    .site-menu__inner { grid-template-columns: 1fr; gap: var(--space-40); }
    .site-menu__list a { padding-block: var(--space-16); }
    .site-menu__list a::after { width: 32px; height: 32px; }
}


/* ---- section: hero.css ---- */
/* ==========================================================================
   HERO — full-bleed photo + gradient veil, content bottom-left. Shared by
   hero.home.html and hero.servizi.html (same markup, text differs). The
   navbar itself is NOT part of this fragment: the fixed "header" fragment
   draws it; this section only reserves the room for it.
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 1096px;
    overflow: hidden;
    /* room for the fixed header (45 top-offset + 120 bar height = 165 at desktop) */
    padding-top: calc(var(--header-top) + var(--header-h));
    padding-bottom: var(--rhythm-252);
    background: var(--color-neutral); /* fallback while the LCP photo loads */
    color: var(--color-base-100);
}

.hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--gradient-veil);
}

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

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    /* Figma literal (28 and 36 both 4px away): kept as-is, not snapped to a step */
    gap: 32px;
}

.hero__title {
    max-width: 790px;
    color: var(--color-base-100);
}

.hero__lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: var(--space-48);
}

.hero__kicker {
    max-width: 330px;
    /* Figma draws the kicker with line-height AUTO (measured 29px at 24px), not 100% */
    font: 400 var(--text-h4) / normal var(--font-sans);
    letter-spacing: -0.02em;
    color: var(--color-base-200-75);
}

/* ---- mobile ---- */
@media (max-width: 959px) {
    .hero {
        height: auto;
        min-height: 640px;
        padding-bottom: var(--space-64);
    }
}


/* ---- section: image-band.css ---- */
/* ==========================================================================
   IMAGE-BAND — full-bleed photo strip (section/image-band), no container.
   Shared by image-band.home-1 (photo-meeting.jpg), image-band.home-2
   (photo-team.jpg) and image-band.servizi (photo-office.jpg).

   Figma 4018:71, 4018:72 and 4035:187 (inner "image/band" 4056:1919):
   get_design_context returns, for all three, a single
   `<img class="absolute inset-0 max-w-none object-cover size-full">`
   inside a 1440×600 box — i.e. a flat image fill, NO rounded-corner class
   (radius 0, the band is full page width) and NO gradient/veil layer at
   all (no extra child, no background stops to transcribe).

   The brief quotes a designer's note about "the gradient rectangle at the
   bottom of the photo, with the site's gradient". That layer does not exist
   in the current Figma canvas and is not visible in the reference renders:
   with the invented bottom fade in place the three bands diffed 31.7% /
   28.3% / 32.7% against _shots/figma/image-band.*.png; with the photo alone
   they diff 0.01% / 0.56% / 0.17%. The design as drawn is therefore the bare
   photo, and no veil layer is rendered here. Re-add it (and only then) when
   the designer materialises the rectangle in Figma with real stops.
   ========================================================================== */
.band {
    position: relative;
    height: 600px; /* the band height the design draws (full-bleed photo strip) */
    overflow: hidden;
}

.band__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* home-2 (photo-team.jpg): Figma crops the image at height 160.02% / top
   -12.68% of the frame — object-position Y = 12.68 / (160.02 - 100) ≈ 21%.
   Verified by sweep against the reference: 20% → 11.7% differing pixels,
   21% → 0.56%, 22% → 8.7%. */
.band--home-2 .band__photo { object-position: center 21%; }

/* ---- mobile ---- */
@media (max-width: 959px) {
    .band { height: 320px; }
}


/* ---- section: intro.css ---- */
/* ==========================================================================
   INTRO — section/intro (4055:1910): opening block of an inner page. Title
   in a fixed left column, context (text + actions) in the right column; the
   offset between the two columns is drawn as the right column's own
   padding-top (per the Figma component note). Recurs on Chi Siamo, Servizi
   Specializzati and Servizi Ordinari.
   ========================================================================== */
.intro {
    --section-pad: var(--rhythm-252); /* design draws 252px top/bottom here, not the default 120 */
}

.intro__columns {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
}

.intro__title {
    flex: none;
    width: 672px; /* fixed column width drawn in Figma — sets where the right column starts */
    color: var(--color-neutral);
}

.intro__context {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: var(--space-76);
    min-width: 0;
    padding-top: var(--rhythm-252); /* the column offset lives here, per the Figma component note */
}

.intro__text {
    max-width: 557px;
}

.intro .actions { gap: var(--space-20); } /* this instance uses 20, the shared .actions default is 16 */

/* ---- mobile ---- */
@media (max-width: 959px) {
    .intro {
        --section-pad: var(--space-64);
    }
    .intro__columns {
        flex-direction: column;
        gap: var(--space-36);
    }
    .intro__title {
        width: auto;
        max-width: 100%;
    }
    .intro__context {
        width: 100%;
        gap: var(--space-36);
        padding-top: 0;
    }
    .intro__text {
        max-width: 100%;
    }
    .intro .actions { gap: var(--space-16); } /* stacked buttons: back to the shared mobile rhythm */
}


/* ---- section: services-areas.css ---- */
/* ==========================================================================
   SERVICES AREAS — section/services-ordinary (HOMEPAGE, 4021:61). Light
   section: head (kicker/title/text) + grid of 3 card/service-area
   (4021:69, 4021:80, 4021:91) + actions. Figma root frame is 1440×1196,
   pt-120 / pb-164 / px-40 — the 40 horizontal padding is already what
   .container reproduces at 1440 (1440 − 2×40 = 1360 = --container). Figma's
   outer gap is 112 between "head" and "content", and, inside "content",
   112 again between "grid" and "actions" — both equal, so a single flex
   column with one --rhythm-112 gap across all three children (head, grid,
   actions) reproduces both without an extra wrapper level.
   ========================================================================== */
.areas {
    /* Figma pb-[164px] (--ritmo/164): the top padding is the shared 120
       (.section default), only the bottom differs — per CONVENTIONS §3. */
    padding-bottom: var(--rhythm-164);
}
.areas__inner {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-112);
}

.areas__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
    list-style: none;
}

/* ---- card/service-area: reuse .card as-is — its title→text gap (24) and
   its .card__icon (margin-top:auto, align-self:flex-end) already reproduce
   this card's own numbers (Figma's inner "text" group is gap-24; the arrow
   is pushed to the bottom via the outer group's justify-between, which the
   auto-margin achieves identically since the card's content is well under
   the 300px min-height). Only the surface differs from .card--muted: Figma
   fills this instance with Primary blu 25% (--color-primary-25) and
   Secondary blu text (--color-neutral) — not base-200/primary — and pads
   40 not 48; overridden here as a section-scoped modifier per §3. ---- */
.areas .card--area {
    background: var(--color-primary-25);
    color: var(--color-neutral);
    padding: var(--space-40);
}
/* icon/arrow is drawn at its native 48×48 in this card (Figma "size-[48px]"),
   not the 41px --icon-circle used everywhere else it appears. */
.areas .card--area .icon { width: 48px; height: 48px; }

/* ---- mobile ---- */
@media (max-width: 959px) {
    /* undo the desktop-only 164px bottom padding: mobile follows the
       standard §6 rule (section padding 64, same top and bottom). */
    .areas { padding-bottom: var(--section-pad); }
    .areas__grid { grid-template-columns: 1fr; }
}


/* ---- section: services-list.css ---- */
/* ==========================================================================
   SERVICES-LIST — section/services-ordinary (4041:302), Servizi Ordinari page.
   .section-head is reused as-is (kicker/title/text match the shared styles
   exactly). The row is block/service-row (4034:171): a full-width gradient
   link, its own block since it nests two different internal gaps (24 inside
   the text group, 48 between the text group and the icon) that .card can't
   express in one level.
   ========================================================================== */
.services-list {
    /* design draws 164px of top/bottom padding here, not the default 120
       (--section-pad) that .section applies everywhere else */
    padding-block: var(--rhythm-164);

    /* Figma "Gradiente riga": linear-gradient(82.44226277060511deg,
       rgba(237,233,222,0.05) 0.94866%, rgba(12,35,64,0.5) 91.998%) — no
       -scale-y-100 flip on this layer, so the angle is used as drawn.
       Rounded to 82.44deg / 0.95% / 92%. The 91.998% stop is exactly the
       existing --color-neutral-50 token (rgb(12 35 64 / 0.5)); the 0.05
       alpha on background-color has no matching token, so it stays literal
       per the gradient-stops exception. Left = almost-transparent cream
       (reads as light against the page), right = neutral at 50% (reads as
       dark blue-grey) — light-to-dark left-to-right, confirmed against the
       reference screenshot (the brief describes the stops reversed).
       The two Figma stops are written out as eleven, one every 10% of the
       ramp: Figma blends colour and alpha separately (straight alpha) while
       CSS blends gradients premultiplied, which made the middle of the row
       ~25/255 too dark against the reference. Each intermediate stop is the
       Figma ramp sampled at that fraction — colour lerped 237,233,222 →
       12,35,64 and alpha lerped 0.05 → 0.5 — so the premultiplied blend
       between two neighbours now follows Figma's curve. First and last stop
       are the original ones; the last is exactly --color-neutral-50.
       Kept at this angle on mobile too: turning the ramp vertical there put
       the copy on the middle (darkest-under-text) band, which read worse
       than the compressed horizontal ramp does. */
    --gradient-row: linear-gradient(82.44deg,
        rgb(237 233 222 / 0.05) 0.95%,
        rgb(215 213 206 / 0.095) 10.05%,
        rgb(192 193 190 / 0.14) 19.16%,
        rgb(170 174 175 / 0.185) 28.26%,
        rgb(147 154 159 / 0.23) 37.37%,
        rgb(125 134 143 / 0.275) 46.47%,
        rgb(102 114 127 / 0.32) 55.58%,
        rgb(80 94 111 / 0.365) 64.68%,
        rgb(57 75 96 / 0.41) 73.79%,
        rgb(35 55 80 / 0.455) 82.89%,
        var(--color-neutral-50) 92%);
}

/* Figma draws this kicker with line-height "auto" (leading-[normal] on node
   4037:281) — a 24px line box for the 20px Inter text, not the 100% (20px)
   the shared .section-head__kicker applies. Without it the head, and every
   element below it, sits 4px too high. */
.services-list .section-head__kicker { line-height: var(--leading-body); }

.services-list__container {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-112); /* head → list and list → actions are both 112 in Figma; a single gap on this flat container reproduces both */
}

.services-list__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-36);
    list-style: none;
}

.services-list__row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
    height: 371px; /* fixed row height, as drawn */
    padding: var(--space-48);
    border-radius: var(--radius-box);
    overflow: hidden;
    background-image: var(--gradient-row);
    color: var(--color-neutral-75);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.services-list__row:hover {
    transform: translateY(-4px);
    /* same lift as a.card:hover; its literal shadow colour written through the token */
    box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--color-neutral) 45%, transparent);
}

.services-list__row-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    width: 612px; /* fixed content column, as drawn */
}

.services-list__row-label { font: 300 var(--text-body) / var(--leading-body) var(--font-sans); }

.services-list__row-title {
    font: 300 var(--text-h3) / 1 var(--font-display);
    letter-spacing: 0;
    color: var(--color-neutral);
}

.services-list__row-copy { font: 300 var(--text-body) / var(--leading-body) var(--font-sans); }

.services-list__row-icon {
    /* icon/plus is drawn at 48px in this row (the shared --icon-circle token
       is 41px, used elsewhere e.g. the FAQ); this is a size override, not a
       new token */
    width: 48px;
    height: 48px;
    margin-top: auto;
    align-self: flex-end;
    color: var(--color-neutral);
    transition: transform var(--duration) var(--ease);
}
.services-list__row:hover .services-list__row-icon { transform: rotate(45deg); } /* icon/plus rotates 45° for its active state per the Figma component note; reused here as the hover cue instead of an arrow-slide, since this row's icon is a plus, not an arrow */

/* ---- mobile ---- */
@media (max-width: 959px) {
    .services-list { padding-block: var(--section-pad); } /* back to the standard 64px mobile section padding */
    .services-list__row { height: auto; padding: var(--space-36); gap: var(--space-36); }
    .services-list__row-text { width: 100%; }
}


/* ---- section: services-specialized.css ---- */
/* ==========================================================================
   SERVICES-SPECIALIZED — dark showcase of the 4 specialised services, 2x2
   grid of gradient cards + CTA. Figma section/services-specialized (4054:486,
   instances 4054:487 on HOMEPAGE and 4054:542 on SERVIZI ORDINARI — identical,
   one fragment). Reuses .section--dark, .section-head__kicker|title|text,
   .card, .actions, .btn--primary-dark, .icon--arrow.
   ========================================================================== */
.services-specialized {
    /* card gradient: linear-gradient(180deg, rgba(238,142,53,.5) 0%,
       rgba(158,83,48,.5) 28.846%, rgba(46,52,78,.5) 62.5%, rgba(46,52,78,.5) 100%)
       — read verbatim from get_design_context; not the veil's stops, so it gets
       its own variable per CONVENTIONS.md §4. It composites straight over the
       section's dark background (no opaque card fill), confirmed by sampling
       the reference render: the rendered top-left corner is rgb(138,94,64),
       which is exactly bg #2E344E blended 50% with #EE8E35. */
    --gradient-specialized: linear-gradient(180deg,
        rgb(238 142 53 / 0.5) 0%, rgb(158 83 48 / 0.5) 28.846%,
        rgb(46 52 78 / 0.5) 62.5%, rgb(46 52 78 / 0.5) 100%);
    padding-block: var(--rhythm-252);
}
/* the reference render's background samples as rgb(46,52,78) = --color-primary,
   not the --color-neutral that .section--dark assumes — override just the
   background (keep the class for its text-colour cascade below). */
.services-specialized.section--dark { background: var(--color-primary); }

.services-specialized__inner { display: flex; flex-direction: column; gap: var(--space-76); }

.services-specialized__head { display: flex; flex-direction: column; gap: var(--space-48); }
.services-specialized__head-text { display: flex; flex-direction: column; gap: var(--space-36); }

.services-specialized__body { display: flex; flex-direction: column; gap: var(--rhythm-112); }

.services-specialized__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-16);
    row-gap: var(--space-36);
    list-style: none;
}

.card--specialized {
    background-image: var(--gradient-specialized);
    color: var(--color-neutral-content);
    min-height: 304px; /* card/service-specialized draws 672x304 (fixed card size: literal px is sanctioned by CONVENTIONS.md §3) */
}
.card--specialized .card__text { color: var(--color-base-100-75); }

/* ---- mobile ---- */
@media (max-width: 959px) {
    .services-specialized { padding-block: var(--space-64); }
    .services-specialized__grid { grid-template-columns: 1fr; row-gap: var(--space-16); }
    .card--specialized { min-height: auto; }
}


/* ---- section: statement.css ---- */
/* ==========================================================================
   STATEMENT — section/statement, two compositions sharing this file.
   HOME (4022:94, 1440x739): light section (--color-base-100), an H1-styled
   pledge + stacked actions; the photo (image/statement 4015:1364, 597x700)
   lives OUTSIDE the Figma frame and straddles into the next (blog) section —
   the brief's one sanctioned absolute-positioned photo.
   SERVIZI (4035:203, 1440x956): section--alt (Figma "Secondary Color"
   #C9C2B2, not the plain light surface); text column + photo column
   (image/statement 4035:220, 552x844) fully inside the frame, built as a
   flex row (not absolute — it never leaves the section).
   ========================================================================== */

.statement__title {
    max-width: 787px; /* Figma gives the title node this literal width in both compositions */
    color: var(--color-neutral); /* default = SERVIZI's fill, Figma "Secondary blu" #0C2340 */
}
.statement--home .statement__title {
    color: var(--color-primary); /* HOME's title fill is "Primary blu" #2E344E, not neutral */
    /* Figma draws this text box 787 wide and the copy falls on FOUR lines
       ("A ogni situazione / dedichiamo il tempo che / richiede: senza fretta /
       nascono le scelte giuste."). Figma's Newsreader Light runs ~5% wider at 64px
       than the Google-Fonts build the browser gets, so at 787 the browser fits three
       lines instead of four and the section loses a whole 64px line. 720 is the
       middle of the range (631–758) that reproduces the designed four-line break
       with the correct tracking; the type itself stays at the design size. */
    max-width: 720px;
}

/* ---- HOME ---- */
.statement--home {
    position: relative; /* the straddling photo needs .statement stacked above the next section */
    z-index: 2;
    padding-top: var(--rhythm-112); /* Figma: pt-[var(--ritmo/112)] on the section root */
    /* Figma frame is 739 tall; content (112 pt + title 256 + 112 gap + actions 120) = 600,
       leaving 139 at the bottom. 139 isn't on the rhythm scale (nearest --rhythm-128 is
       11px away — too far to snap): kept as the literal the frame height implies. */
    padding-bottom: 139px;
}
.statement--home .container {
    position: relative; /* positioning context for the straddling photo */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rhythm-112); /* title -> actions, Figma gap-[var(--ritmo/112)] */
}
.statement--home .actions--stack {
    gap: var(--space-16); /* Figma gap-[var(--spazio/16)] here, not the shared --space-12 default */
}
.statement__photo {
    /* the one sanctioned absolute photo (CONVENTIONS §3): it runs 350px past the section's
       own bottom into the next (blog) section, which reserves the room with its own top
       padding — nothing else to do here. */
    position: absolute;
    /* the photo top sits 389px below the section top (Figma page coords: 6985 - 6596); the
       container's content box already starts 112px down (the section's own padding-top),
       so from the container's content box the offset is 389 - 112 = 277px. */
    top: calc(389px - 112px);
    right: calc(-1 * var(--gutter)); /* right edge flush with the PAGE edge, one gutter past the container's own right edge */
    width: 597px;
    height: 700px;
    z-index: 2;
    border-radius: var(--radius-box) 0 0 var(--radius-box); /* only the two left corners are rounded (Figma: rounded-bl + rounded-tl, the right edge is flush with the viewport) */
}

/* ---- SERVIZI ---- */
.statement--servizi {
    /* Figma: the photo column has padding-block 56 (top 56 + height 844 + bottom 56 = 956,
       the frame height) — replaces the default .section 120px rule. */
    padding-block: var(--space-56);
}
.statement--servizi .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Figma places the 552px photo at page x=845..1397, i.e. 3px short of the container's
       own right edge (1400) — hand-placed slop. The photo is kept flush with the container
       edge so it lines up with every other section on the page; the text column is pinned
       to the design's 787px, which leaves a 21px column gap (--space-20 is the floor). */
    gap: var(--space-20);
}
.statement__col--text {
    width: 787px; /* the design's text-box width, the same literal .statement__title carries */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 88px; /* Figma literal gap-[88px]; off the scale (nearest --space-76 / --rhythm-100 are both 12px away) — kept as-is */
    padding-top: var(--space-64); /* stacked on the row's own 56px padding-top: 56 + 64 = 120, the title's actual y in Figma */
}
.statement__col--photo {
    flex: none;
    width: 552px;
    height: 844px;
}

/* ---- mobile (< 960px): the straddling photo goes back into flow, both compositions use the
   section's normal padding, the two-column row stacks text-before-photo ---- */
@media (max-width: 959px) {
    .statement--home,
    .statement--servizi {
        padding-block: var(--section-pad);
    }
    .statement--home .container {
        align-items: stretch; /* so the button stack fills the column */
        gap: var(--space-48); /* the desktop 112 is far too airy at 390 */
    }
    .statement__photo {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: var(--radius-box);
        top: auto;
        right: auto;
    }
    .statement--servizi .container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-64); /* text block -> photo, once stacked */
    }
    .statement__col--text {
        width: auto;
        padding-top: 0; /* was only there to line up with the absolute-free photo column; not needed once stacked */
        align-items: stretch; /* so the button stack fills the column */
        gap: var(--space-48); /* the desktop 88 is too airy at 390 */
    }
    .statement__col--photo {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
    }
}