/* Sunlit Studio. Fonts are linked in each page's <head> for performance. */

:root {
    color-scheme: light;

    --bg: #F5EFE6;           /* oat: page ground */
    --bg-alt: #EFE7DB;       /* deeper oat: alternating sections */
    --bg-footer: #EAE0D1;
    --card: #FFFBF5;         /* warm white: tiles, cards, form */
    --field: #F7F2EA;
    --ink: #2E3A30;          /* body and headings */
    --muted: #5C665A;        /* secondary text, 5.6:1 on --bg */
    --line: #E3D8C8;

    --sage: #7A9A7E;
    --sage-deep: #4B6B51;    /* primary accent: buttons, links, 5.6:1 on --bg */
    --sage-darker: #3C5842;
    --sage-soft: #DCE6DA;
    --clay: #D08C60;
    --clay-deep: #9A5427;    /* clay as text/icon colour, 5.1:1 on --clay-soft */
    --clay-soft: #F5DCC8;
    --peach: #F0B48A;        /* light clay that reads on --sage-deep */
    --error: #A8452B;

    --font-heading: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --container-width: 1140px;
    --gutter: clamp(16px, 4vw, 48px);
    --header-height: 80px;   /* script.js uses the same 80px as its scroll offset */
    --radius: 24px;
    --shadow: 0 1px 2px rgba(46, 58, 48, 0.06), 0 14px 34px -14px rgba(46, 58, 48, 0.22);

    --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 17px;
    background-color: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

ul {
    list-style: none;
}

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

.container {
    max-width: calc(var(--container-width) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ink);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.6rem, 5.6vw, 4.9rem);
    letter-spacing: -0.01em;
    line-height: 1.04;
}

h2 {
    font-size: clamp(2.3rem, 4.2vw, 3.4rem);
    letter-spacing: -0.01em;
}

/* Card and list titles read better in the sans than in the display serif. */
h3 {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

p {
    margin-bottom: 1rem;
}

/* The accented half of a headline. */
.hl {
    font-style: italic;
    color: var(--sage-deep);
}

/* Keeps a hyphenated word from splitting across headline lines. */
.nowrap {
    white-space: nowrap;
}

/* Short label above a section heading. */
.eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--clay-soft);
    color: var(--clay-deep);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Buttons. min-height keeps every button at or above the 44px touch target. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: var(--sage-deep);
    color: var(--card);
}

.btn-primary:hover {
    background: var(--sage-darker);
}

.btn-secondary {
    background: var(--card);
    border-color: var(--line);
    color: var(--ink);
}

.btn-secondary:hover {
    border-color: var(--sage);
}

.small {
    min-height: 44px;
    padding: 0 20px;
    font-size: 0.95rem;
}

.full-width {
    width: 100%;
}

/* Skip link: offscreen until focused, so a keyboard user can jump past the nav
   instead of tabbing through it on every page. */
.skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 1100;
    padding: 14px 22px;
    background: var(--sage-deep);
    color: var(--card);
    font-weight: 600;
    border-radius: 0 0 12px 0;
}

.skip-link:focus {
    left: 0;
}

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--header-height);
    background: rgba(245, 239, 230, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Set by script.js once the page has scrolled. */
header.scrolled {
    background: rgba(245, 239, 230, 0.97);
    border-bottom-color: var(--line);
    box-shadow: 0 6px 24px -18px rgba(46, 58, 48, 0.5);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}

/* The mark is square. */
.logo-image {
    height: 38px;
    width: auto;
}

.logo-text {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: lowercase;
}

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

/* Vertical padding brings the hit area to 44px without moving the text, since the
   header centres its row. */
.nav-links li a:not(.btn) {
    display: inline-block;
    padding: 12px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--muted);
}

.nav-links li a:not(.btn):hover,
.nav-links li a[aria-current="page"] {
    color: var(--ink);
}

.nav-links li a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--clay);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* Language switcher: plain links to the same page in each language, with extra
   space on its left to set it apart from the page links. Bars between the codes,
   and the current one in ink with the clay rule under it. */
.lang-switch {
    display: flex;
    align-items: center;
    margin-left: 24px;
}

.nav-links .lang-switch a:not(.btn) {
    padding: 12px 0;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.lang-switch a + a::before {
    content: "|";
    display: inline-block; /* keeps the current link's underline off the bar */
    margin: 0 8px;
    color: var(--line);
}

.nav-links .lang-switch a[aria-current="true"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--clay);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* A fixed 44px box around the three bars meets the minimum target size; the
   negative margin keeps the bars optically flush with the container edge. */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--ink);
    transition: var(--transition);
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Hero */
#hero {
    padding: calc(var(--header-height) + clamp(40px, 7vw, 96px)) 0 clamp(56px, 8vw, 104px);
}

.hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.hero-text > p {
    margin: 24px 0 0;
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    max-width: 56ch;
    color: var(--muted);
}

.cta-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
}

/* Hero illustration: a 2x2 grid of square tiles. A booking calendar with live
   pricing alerts, revenue against last year, portfolio health, and the tool stack
   wired to one hub. Green marks anything going up. Decorative only, hidden from
   assistive tech in the markup. */
.hero-art {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 500px;
    justify-self: center;
}

.hero-art > .tile,
.cal-wrap {
    aspect-ratio: 1;
    min-width: 0;
}

/* Without this, content taller than the square would stretch the tile instead of
   the square holding. The alerts live outside the tile, so they are not clipped. */
.hero-art .tile {
    overflow: hidden;
}

.tile {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}

.tile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--sage-soft);
    color: var(--sage-deep);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.chip svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.6;
}

/* A rise, in solid green. */
.chip-up {
    background: var(--sage-deep);
    color: #fff;
}

/* Calendar, with two alerts floating over its corners. The date rows share
   whatever height the square tile leaves. */
.cal-wrap {
    position: relative;
}

.cal-wrap > .tile {
    height: 100%;
}

.cal {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto repeat(5, 1fr);
    gap: 3px;
    font-size: 0.62rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cal .wd {
    padding-bottom: 2px;
    font-weight: 600;
    color: var(--muted);
}

.cal .d {
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--bg);
    color: var(--muted);
}

.cal .bk {
    background: var(--sage-soft);
    color: #2E4A34;
    font-weight: 600;
}

.cal .ev {
    background: var(--clay);
    color: #fff;
    font-weight: 700;
}

.float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 10px 24px -10px rgba(46, 58, 48, 0.45);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
}

/* The rate alert pokes out below the empty cells after the 30th; the sync alert
   pokes out of the top-right corner, clear of the month heading. */
.float-rate {
    right: -14px;
    bottom: -14px;
}

.float-sync {
    top: -16px;
    right: -16px;
}

.float-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--clay-soft);
    color: var(--clay-deep);
}

.float-icon.up {
    background: var(--sage-deep);
    color: #fff;
}

.float-icon svg {
    width: 15px;
    height: 15px;
}

/* Revenue: this year's bars over last year's paler ones, filling the tile. */
.bars {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    align-items: end;
    min-height: 0;
}

.bars span {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.bars i {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 5px 5px 2px 2px;
    background: var(--sage-soft);
}

.bars b {
    position: relative;
    width: 62%;
    border-radius: 4px 4px 2px 2px;
    background: var(--sage-deep);
}

.bars span:nth-last-child(-n+3) b {
    background: var(--clay);
}

.months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    margin-top: 6px;
    text-align: center;
    font-size: 0.6rem;
    color: var(--muted);
}

/* Portfolio health: a large occupancy ring over two rising KPIs. */
.ring {
    position: relative;
    width: 116px;
    height: 116px;
    margin: auto;
}

.ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring circle {
    fill: none;
    stroke-width: 14;
}

.ring-track {
    stroke: var(--bg-alt);
}

.ring-fill {
    stroke: var(--sage-deep);
    stroke-linecap: round;
}

.ring-value {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 2.1rem;
    line-height: 1;
}

.ring-value small {
    margin-top: 2px;
    font-family: var(--font-body);
    font-size: 0.62rem;
    color: var(--muted);
}

.kpis {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

/* Automation: every tool wired to one hub. */
.tile-hub {
    justify-content: center;
    padding: 12px;
}

.hub {
    position: relative;
    aspect-ratio: 1;
    max-height: 100%;
}

.hub-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hub-wires path {
    fill: none;
    stroke: var(--sage);
    stroke-width: 1.6;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
}

.hub-center {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 30%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 18px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.hub-center img {
    width: 64%;
    height: auto;
}

.sat {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 3px;
    transform: translate(-50%, -50%);
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
}

.node {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: var(--sage-soft);
    color: var(--sage-deep);
}

.sat:nth-of-type(even) .node {
    background: var(--clay-soft);
    color: var(--clay-deep);
}

.node svg {
    width: 16px;
    height: 16px;
}

/* Grows the bars and draws the ring once on load, and runs data along the hub's
   wires. */
@media (prefers-reduced-motion: no-preference) {
    .bars b {
        animation: bar-grow 0.9s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
        transform-origin: bottom;
    }

    .ring-fill {
        animation: ring-draw 1.4s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    }

    .hub-wires path {
        animation: wire-flow 1.4s linear infinite;
    }
}

@keyframes bar-grow {
    from {
        transform: scaleY(0.2);
    }
}

@keyframes ring-draw {
    from {
        stroke-dasharray: 0 315;
    }
}

@keyframes wire-flow {
    to {
        stroke-dashoffset: -14;
    }
}

/* Common Section */
section {
    padding: clamp(64px, 9vw, 112px) 0;
}

.section-header {
    margin-bottom: clamp(28px, 4vw, 44px);
}

/* About */
.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 32px);
}

.card {
    background: var(--card);
    border-radius: var(--radius);
    padding: clamp(24px, 3.5vw, 40px);
}

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

.card p {
    margin: 0;
    color: var(--muted);
}

/* Services */
#services {
    background: var(--bg-alt);
}

/* Fixed two columns rather than auto-fit: with four services, auto-fit packs three
   across and orphans the fourth on a row of its own. */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 28px);
}

.service-item {
    background: var(--card);
    border-radius: var(--radius);
    padding: clamp(24px, 3.5vw, 36px);
    transition: var(--transition);
}

.service-item:hover {
    box-shadow: var(--shadow);
}

.service-item .icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: var(--clay-soft);
    color: var(--clay-deep);
}

.service-item:nth-child(even) .icon {
    background: var(--sage-soft);
    color: var(--sage-deep);
}

.service-item .icon svg {
    width: 22px;
    height: 22px;
}

.service-item h3 {
    margin-bottom: 10px;
}

.service-item p {
    margin: 0;
    color: var(--muted);
}

/* Approach */
.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.text-content h2 {
    margin-bottom: 20px;
}

.text-content > p {
    color: var(--muted);
    max-width: 52ch;
}

.feature-list {
    display: grid;
    gap: 22px;
    margin-top: 32px;
}

.feature-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    color: var(--muted);
}

.feature-list strong {
    color: var(--ink);
}

.step-num {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--sage-soft);
    color: var(--sage-deep);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Proof panel: the strongest numbers on the site, set as numbers. */
.proof {
    padding: clamp(28px, 4vw, 48px);
    border-radius: 28px;
    background: var(--sage-deep);
    color: var(--card);
}

/* The sentence sits above the figure as its label. */
.proof-lead {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #DDE7DB;
    max-width: 40ch;
}

.proof-lead::first-letter {
    text-transform: uppercase;
}

.proof-figure {
    display: block;
    margin-top: 10px;
    font-family: var(--font-heading);
    font-size: clamp(5rem, 10vw, 8rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.proof-spark {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 14px;
    overflow: visible;
}

.proof-spark path {
    fill: none;
    stroke: var(--peach);
    stroke-width: 4;
    stroke-linecap: round;
}

.proof-spark circle {
    fill: var(--peach);
    stroke: var(--sage-deep);
    stroke-width: 3;
}

.proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.proof-chip {
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 251, 245, 0.14);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Contact */
.contact-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.contact-info h2 {
    margin-bottom: 20px;
}

.contact-info > p {
    color: var(--muted);
    max-width: 50ch;
}

.compliance-info {
    margin-top: 32px;
    padding: 24px;
    border-radius: 20px;
    background: var(--card);
    font-size: 0.93rem;
}

.compliance-info h4 {
    margin-bottom: 12px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
}

.compliance-info p {
    margin-bottom: 6px;
    color: var(--muted);
}

.compliance-info strong {
    color: var(--ink);
}

.compliance-info a,
.form-error a,
.company-details a,
.legal-content a {
    color: var(--sage-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form-container {
    padding: clamp(24px, 4vw, 40px);
    border-radius: 28px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.form-group {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
}

.form-group label {
    font-size: 0.92rem;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--field);
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.form-group textarea {
    min-height: 110px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #7D8579;
    opacity: 1;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--sage);
    background: var(--card);
    box-shadow: 0 0 0 3px var(--sage-soft);
}

/* Form Submission States */
.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 251, 245, 0.35);
    border-top-color: var(--card);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.form-success,
.form-error {
    text-align: center;
    padding: 40px 12px;
    animation: fadeInUp 0.5s ease-out;
}

.success-icon,
.error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    font-size: 2rem;
    color: var(--card);
}

.success-icon {
    background: var(--sage-deep);
}

.error-icon {
    background: var(--error);
}

.form-success h3,
.form-error h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 12px;
}

.form-success p,
.form-error p {
    color: var(--muted);
    margin-bottom: 0;
}

.form-error p {
    margin-bottom: 24px;
}

#submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Footer */
footer {
    padding: 48px 0 28px;
    background: var(--bg-footer);
    font-size: 0.92rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin-bottom: 28px;
}

.footer-left p {
    margin: 0;
    color: var(--muted);
}

/* Same 44px target treatment as the header links. */
.footer-right a {
    display: inline-block;
    padding: 12px 0;
    font-weight: 500;
}

.footer-right a:hover,
.footer-right a[aria-current="page"] {
    color: var(--sage-deep);
}

.footer-right .sep {
    margin: 0 10px;
    color: var(--sage);
}

.disclaimer {
    padding-top: 16px;
    border-top: 1px solid #DDD1BF;
    color: var(--muted);
    font-size: 0.82rem;
}

/* The banner links to /privacy#cookies; keep that heading clear of the fixed header. */
.legal-content h2[id] {
    scroll-margin-top: calc(var(--header-height) + 16px);
}

/* Footer "Cookie settings": a button, since it opens the banner rather than
   navigating, styled to sit in the row of footer links. Added by analytics.js. */
.footer-right .cookie-settings {
    padding: 12px 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.footer-right .cookie-settings:hover {
    color: var(--sage-deep);
}

/* Cookie consent bar, shown by analytics.js to visitors in Europe. Reject and
   Accept share one size and one row so declining is as easy as accepting. Sits
   under the header (1000) and mobile menu (1100). */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px -18px rgba(46, 58, 48, 0.3);
    font-size: 0.92rem;
    line-height: 1.45;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.cookie-banner p {
    flex: 1 1 320px;
    margin: 0;
    min-width: 0;
}

.cookie-banner a {
    color: var(--sage-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cookie-btn {
    min-width: 96px;
    min-height: 44px;
    padding: 8px 18px;
    border: 1.5px solid var(--sage-deep);
    border-radius: 999px;
    background: transparent;
    color: var(--sage-deep);
    font: 600 0.9rem var(--font-body);
    cursor: pointer;
    transition: var(--transition);
}

.cookie-btn:hover {
    background: var(--sage-soft);
}

.cookie-btn.cookie-accept {
    background: var(--sage-deep);
    color: #fff;
}

.cookie-btn.cookie-accept:hover {
    background: var(--sage-darker);
    border-color: var(--sage-darker);
}

@media (prefers-reduced-motion: no-preference) {
    .cookie-banner {
        animation: cookie-rise 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
}

@keyframes cookie-rise {
    from {
        opacity: 0;
        translate: 0 12px;
    }
}

/* Phones: buttons on their own row, splitting the width between them. */
@media (max-width: 600px) {
    .cookie-actions {
        flex: 1 1 100%;
    }

    .cookie-btn {
        flex: 1;
    }
}

/* About page */
.about-content {
    max-width: calc(800px + 2 * var(--gutter));
    padding-top: var(--header-height);
}

.about-content h1,
.legal-content h1 {
    font-size: clamp(2.6rem, 5vw, 3.9rem);
    margin-bottom: 32px;
}

.about-content h2,
.legal-content h2 {
    margin: 44px 0 16px;
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
}

.about-content p {
    margin-bottom: 18px;
    color: var(--muted);
}

.about-content strong,
.legal-content strong {
    color: var(--ink);
}

.mission-statement {
    margin: 36px 0;
    padding: 28px 32px;
    border-radius: var(--radius);
    background: var(--sage-soft);
}

.mission-statement p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-style: italic;
    line-height: 1.3;
    color: var(--sage-darker);
}

.company-details {
    margin-top: 40px;
    padding: clamp(24px, 4vw, 36px);
    border-radius: var(--radius);
    background: var(--card);
}

.company-details h3 {
    margin-bottom: 14px;
}

.company-details p {
    margin-bottom: 8px;
}

/* Legal pages */
.legal-content {
    max-width: calc(800px + 2 * var(--gutter));
    padding-top: var(--header-height);
}

.legal-content h3 {
    margin: 28px 0 12px;
    font-size: 1.1rem;
}

.legal-content p,
.legal-content ul {
    margin-bottom: 18px;
    color: var(--muted);
}

.legal-content ul {
    list-style: disc;
    padding-left: 1.2em;
}

.legal-content li {
    margin-bottom: 10px;
}

.legal-content li::marker {
    color: var(--clay);
}

/* Shown on the Spanish and Portuguese legal pages: the English text is binding. */
.legal-content .translation-notice {
    margin-bottom: 28px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--clay-soft);
    color: var(--ink);
    font-size: 0.95rem;
}

/* 404 page */
.notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--header-height);
}

.notfound .code {
    font-family: var(--font-heading);
    font-size: clamp(5rem, 14vw, 9rem);
    font-style: italic;
    line-height: 1;
    color: var(--sage-deep);
    margin-bottom: 12px;
}

.notfound h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    margin-bottom: 16px;
}

.notfound p {
    max-width: 46ch;
    color: var(--muted);
}

.notfound .cta-group {
    justify-content: center;
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s forwards;
}

.delay-1 {
    animation-delay: 0.15s;
    transition-delay: 0.15s;
}

.delay-2 {
    animation-delay: 0.3s;
    transition-delay: 0.3s;
}

.delay-3 {
    animation-delay: 0.45s;
    transition-delay: 0.45s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduced motion. Entrance animations, scroll reveals and smooth scroll all stop;
   content resolves to its final state immediately. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        animation-delay: 0ms !important;
    }

    html {
        scroll-behavior: auto !important;
    }

    /* Both classes start at opacity 0 and are animated in, so they must be
       forced visible or the preference would hide the page. */
    .reveal,
    .fade-in-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Tablet: the hero illustration moves under the text. */
@media (max-width: 960px) {
    .hero-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-art {
        justify-self: start;
    }
}

/* Phones: the four square tiles are about 170px wide, so everything inside shrinks. */
@media (max-width: 480px) {
    .hero-art {
        gap: 12px;
    }

    .hero-art .tile {
        padding: 12px;
    }

    .tile-head {
        margin-bottom: 8px;
        font-size: 0.8rem;
    }

    .chip {
        padding: 2px 7px;
        font-size: 0.66rem;
    }

    .cal {
        gap: 2px;
        font-size: 0.55rem;
    }

    .float {
        padding: 6px 10px;
        font-size: 0.68rem;
    }

    .float-icon {
        width: 22px;
        height: 22px;
    }

    .ring {
        width: 78px;
        height: 78px;
    }

    .ring-value {
        font-size: 1.4rem;
    }

    .ring-value small {
        font-size: 0.48rem;
    }

    .kpis {
        gap: 4px;
        margin-top: 8px;
    }

    .sat {
        font-size: 0.56rem;
    }

    .node {
        width: 26px;
        height: 26px;
        border-radius: 9px;
    }
}
/* Very narrow phones: the four tiles stack in one column. */
@media (max-width: 340px) {
    .hero-art {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background: var(--bg);
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    .nav-links li a:not(.btn) {
        font-size: 1.2rem;
        color: var(--ink);
    }

    .nav-links.active {
        transform: translateX(0);
    }

    /* The menu is a centred column here, so the side spacing would push it off centre. */
    .lang-switch {
        margin-left: 0;
    }
    .mobile-menu-btn {
        display: flex;
    }

    .about-grid,
    .split-layout,
    .contact-wrapper,
    .services-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-art {
        max-width: 100%;
    }

    .float-rate,
    .float-sync {
        right: -6px;
    }

    .footer-content {
        flex-direction: column;
    }
}