/* =========================================================
   Ramminger Ltd - one page, full-screen sections
   Header / footer green  #405A4A   rgb(64, 90, 74)
   Content area green     #4B6757   rgb(75, 103, 87)
   Breakpoints: 900px (About grid), 769px+ desktop, 768px- mobile, 480px- small phones
   To add a section: add a <section class="section"> in index.html and a dot button.
   ========================================================= */

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

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;            /* the page itself never scrolls; sections are paged by site.js */
    overscroll-behavior: none;
    background-color: #405A4A;
    -webkit-text-size-adjust: 100%;
    color-scheme: light;
}

body {
    font-family: Inter, Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background-color: #405A4A;
}

#main:focus {
    outline: none;
}

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

.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 40;
    padding: 10px 16px;
    background-color: #FFFFFF;
    color: #405A4A;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.skip-link:focus {
    top: 8px;
}

/* ---------- Text ---------- */

.contact-details {
    --o: 0.9;
    font-size: 0.95rem;
    color: #FFFFFF;
    line-height: 1.6;
    margin: 0;
    letter-spacing: 0.04em;
    opacity: 0.9;
}

.section-title {
    font-size: 1.15rem;
    color: #FFFFFF;
    line-height: 1.4;
    margin: 0 0 8px 0;
    letter-spacing: 0.06em;
    font-weight: 400;
}

.service-tagline {
    font-size: 1.05rem;
    color: #FFFFFF;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 10px 0;
    letter-spacing: 0.04em;
}

.service-description {
    font-size: 0.95rem;
    color: #FFFFFF;
    line-height: 1.6;
    margin: 0;
    letter-spacing: 0.04em;
    opacity: 0.9;
}

.name-bold {
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Name · Director on one line */
.title-meta {
    margin-left: 0.5em;
    opacity: 0.85;
}

.title-meta::before {
    content: "\00b7\00a0\00a0";
}

.contact-sep {
    margin: 0 0.6em;
}

.company-meta {
    --o: 0.6;
    font-size: 0.65rem;
    opacity: 0.6;
    letter-spacing: 0.02em;
}

.contact-link {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.contact-link:active {
    opacity: 0.5;
}

.contact-link:hover {
    color: #B2B3B4;
    opacity: 1;
}

.contact-link:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* ---------- Header ---------- */

#site_header {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    width: 100%;
    background-color: #405A4A;
    display: flex;
    justify-content: center;
}

.header-padding {
    padding: 22px 10px;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* hover/click area = the logo plus some room around it (the negative margin keeps the layout unchanged) */
.logo-link {
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 22px 28px;
    margin: -22px -28px;
    color: inherit;
    text-decoration: none;
}

.logo-link:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
}

.header-logo {
    width: 244px;
    max-width: 100%;
    height: auto;
    display: block;
    animation: logo-in 1s ease-out 0.2s both;
}

.logo-path {
    fill: #FFFFFF;
    transition: fill 0.2s ease;
}

/* the first R flips around its own centre */
.logo-r {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: fill 0.2s ease, transform 0.5s ease;
}

/* hover: logo turns black and the first R mirrors (hover-capable devices only) */
@media (hover: hover), (any-hover: hover) {
    .logo-link:hover .logo-path {
        fill: #000000;
    }

    .logo-link:hover .logo-r {
        transform: scaleX(-1);
    }
}

/* language switch (top right) */
.lang-switch {
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -22px;
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    animation: fade-in 1s ease-out 0.6s both;
}

.lang-switch:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

@media (hover: hover), (any-hover: hover) {
    .lang-switch:hover {
        color: #000000;
    }
}

/* ---------- Sections ---------- */

.sections {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background-color: #405A4A;
}

.section {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.section-mobile {
    display: none;   /* Services have their own page on phones only; on larger screens they stay inside About */
}

.section.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.6s ease 0.15s, visibility 0s;
}

/* About / Projects / 404: lighter green */
.section-light {
    background-color: #4B6757;
}

/* a section taller than the screen scrolls inside itself first */
.section-scroll {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

/* ---------- Home: slideshow ---------- */

.hero {
    position: absolute;
    inset: 0;
    overflow: hidden;
    animation: photo-reveal 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.7s both;
}

/* each slide is a <picture>; site.js switches .is-active */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide.is-active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%; /* move the focus point here, e.g. 50% 40% */
    display: block;
}

/* invisible previous / next areas */
.hero-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(64px, 22%, 200px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hero-nav-prev { left: 0; }
.hero-nav-next { right: 0; }

.hero-nav:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: -6px;
}

/* ---------- Section navigation: dots and scroll hint ---------- */

.section-dots {
    position: absolute;
    top: 50%;
    right: 22px;
    z-index: 5;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-dots button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.section-dots button::before {
    content: "";
    width: 9px;
    height: 9px;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.section-dots button[aria-current="true"]::before {
    background-color: #FFFFFF;
}

@media (hover: hover), (any-hover: hover) {
    .section-dots button:hover::before {
        border-color: #000000;
        background-color: #000000;
    }
}

.section-dots button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 1px;
}

/* subtle arrow on Home only */
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 5;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    -webkit-tap-highlight-color: transparent;
}

html[data-section="home"] .scroll-hint {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease 0.6s, visibility 0s;
}

.scroll-hint svg {
    display: block;
    width: 26px;
    height: 14px;
    margin: 0 auto;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 1.2;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
    animation: hint-bob 2.4s ease-in-out infinite;
}

@media (hover: hover), (any-hover: hover) {
    .scroll-hint:hover svg {
        stroke: #000000;
        filter: none;
    }
}

.scroll-hint:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* ---------- About / Projects / 404: content ---------- */

.content {
    width: 100%;
    max-width: 1060px;
    margin: auto; /* centred between header and footer */
    padding: 18px 24px 20px 24px;
    color: #FFFFFF;
}

/* References: stretches so the map fills the free height; wider on big screens so the map can grow */
.content-wide {
    max-width: 2200px;
    margin: 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: min-content;
}

.page-title {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 16px 0;
}

.subhead {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: center;
    margin: 0 0 20px 0;
}

.lead {
    font-size: 0.98rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    margin: 0 0 12px 0;
    opacity: 0.92;
}

.lead:last-child {
    margin-bottom: 0;
}

/* ---------- About: portrait, name and text ---------- */

.about-intro {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    margin: 0 auto 22px auto;
}

.about-photo {
    width: clamp(130px, 26vh, 230px);
    aspect-ratio: 1 / 1;
    margin: 0;
}

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

.about-text {
    max-width: 68ch;
}

.about-name {
    margin: 0 0 10px 0;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}

/* ---------- About: services ---------- */

.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.service {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 16px;
}

.service h4 {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin: 0 0 8px 0;
}

.service p {
    font-size: 0.92rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin: 0;
    opacity: 0.9;
}

/* ---------- References: intro, map and partner logos ---------- */

.references-intro {
    max-width: 850px;
    margin: 0 auto 12px auto;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    opacity: 0.9;
    border: none;
}

.map {
    --map-pad-x: clamp(4px, 3vw, 80px);   /* space left and right of the map */
    --map-pad-y: clamp(4px, 1.5vh, 28px); /* space above and below the map */
    position: relative;
    flex: 1 0 auto;
    width: 100%;
    max-width: 1800px;                    /* biggest the map can get */
    min-height: 180px;
    margin: 0 auto;
    overflow: hidden;
}

.map img {
    position: absolute;
    top: var(--map-pad-y);
    left: var(--map-pad-x);
    width: calc(100% - 2 * var(--map-pad-x));
    height: calc(100% - 2 * var(--map-pad-y));
    object-fit: contain;
}

/* World map built up in layers: site.js adds three <svg> layers from map.js.
   The world fades in, then the countries worked in one by one, then the dots pop in. */
.worldmap .map-layer {
    position: absolute;
    top: var(--map-pad-y);
    left: var(--map-pad-x);
    width: calc(100% - 2 * var(--map-pad-x));
    height: calc(100% - 2 * var(--map-pad-y));
}

.worldmap [data-m="d"] {
    transform-box: fill-box;
    transform-origin: center;
}

.worldmap.is-ready [data-m] {
    opacity: 0;
}

.worldmap.is-playing [data-m="w"] {
    animation: map-fade-in var(--mw, 0.6s) ease-out var(--md, 0s) both;
}

.worldmap.is-playing [data-m="c"] {
    animation: map-fade-in var(--mf, 0.7s) ease-out var(--md, 0s) both;
}

.worldmap.is-playing [data-m="d"] {
    animation: map-pop var(--mp, 0.45s) cubic-bezier(0.2, 0.9, 0.3, 1.35) var(--md, 0s) both;
}

@keyframes map-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes map-pop {
    from { opacity: 0; transform: scale(0.2); }
    to   { opacity: 1; transform: scale(1); }
}

.logos {
    flex: 0 0 auto;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.logos .subhead {
    margin-bottom: 18px;
}

.logo-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 45%), 1fr));
    gap: 20px 32px;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* each cell fills its column (a fixed width), the logo is centred inside it */
.logo-grid li {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.logo-grid img {
    display: block;
    width: 100%;
    max-width: min(200px, 100%);   /* logo size: change these two numbers */
    max-height: 200px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1); /* any logo becomes white */
    opacity: 0.85;
}

/* ---------- Drawings: the SVG draws itself (site.js adds the classes and attributes) ---------- */

.drawing svg {
    position: absolute;
    top: var(--map-pad-y);
    left: var(--map-pad-x);
    width: calc(100% - 2 * var(--map-pad-x));
    height: calc(100% - 2 * var(--map-pad-y));
    display: block;
}

/* hidden until site.js has prepared it, so the finished drawing never flashes */
.drawing:not(.is-prepared) svg {
    visibility: hidden;
}

/* armed: outlines (data-d) are undrawn, details (data-l) are not there yet */
.drawing.is-ready svg [data-d] {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1;
    stroke-linecap: butt;   /* round caps would leave a dot at every line start */
}

.drawing.is-ready svg [data-l] {
    visibility: hidden;   /* not display:none, so showing them only repaints and does not redo the layout */
}

.drawing.is-drawing svg [data-d] {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--dd, 0.8s) ease-in-out var(--dl, 0s);   /* --dd and --dl (duration, delay) are set per line by site.js */
}

/* dashed lines, text and tiny pieces are not drawn: site.js switches them on in left-to-right steps
   (by removing data-l), so dashed lines stay dashed the whole time */

/* labels (text) fade in softly; delay and duration are set per label by site.js */
.drawing.is-ready svg [data-t] {
    opacity: 0;
}

.drawing.is-drawing svg [data-t] {
    opacity: 1;
    transition: opacity var(--dd, 0.5s) ease-out var(--dl, 0s);
}

/* putting everything back for a replay: no visible transitions */
.drawing.is-resetting svg * {
    transition: none !important;
}

/* ---------- 404 page ---------- */

.not-found .lead {
    margin: 0 auto 14px auto;
    text-align: center;
}

/* ---------- Footer ---------- */

#site_footer {
    flex: 0 0 auto;
    width: 100%;
    background-color: #405A4A;
    display: flex;
    justify-content: center;
    text-align: center;
}

.footer-padding {
    padding: 14px 20px 12px 20px;
}

/* tagline lines belong to Home only: they fade and fold away on the other sections */
.home-lines {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s ease;
}

.home-lines > div {
    min-height: 0;
    overflow: hidden;
    padding-bottom: 9px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* first load on Home only: the tagline fades in after the photo (site.js adds .intro-done afterwards,
   so it never replays and never shows up when the page is opened on another section) */
html:not(.intro-done):not(.seen)[data-section="home"] .home-lines > div {
    animation: fade-in 0.9s ease-out 1.2s backwards;
}

html[data-section="home"] .home-lines {
    grid-template-rows: 1fr;
}

html[data-section="home"] .home-lines > div {
    opacity: 1;
    transition-delay: 0.2s;
}

/* legal text belongs to the last section (Drawings) only: it fades and folds away elsewhere */
.legal-lines {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s ease;
}

.legal-lines > div {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

html[data-section="drawings"] .legal-lines {
    grid-template-rows: 1fr;
}

html[data-section="drawings"] .legal-lines > div {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease 0.2s, visibility 0s;
}

/* contact block: always shown, except on mobile About (see the mobile rules) */
.contact-lines > div {
    min-height: 0;
}

/* ---------- Animations ---------- */

@keyframes logo-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes photo-reveal {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes text-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: var(--o, 1); transform: none; }
}

@keyframes text-fall {
    from { opacity: var(--o, 1); transform: none; }
    to   { opacity: 0; transform: translateY(10px); }
}

@keyframes photo-hide {
    from { opacity: 1; clip-path: inset(0 0 0 0); }
    to   { opacity: 0; clip-path: inset(0 0 100% 0); }
}

@keyframes hint-bob {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* text inside a section rises in when the section becomes active, and falls when it leaves */
.section.is-active .reveal {
    animation: text-rise 0.9s ease-out both;
    animation-delay: calc(var(--d, 0.4s) * 0.6);
}

.section.is-leaving .reveal {
    animation: text-fall 0.4s ease-in both;
    animation-delay: calc((1.4s - var(--d, 0.4s)) * 0.2);
}

/* header / footer text animates in on the first page of a visit */
#site_footer .reveal {
    animation: text-rise 0.9s ease-out both;
    animation-delay: var(--d, 1.4s);
}

/* header and footer only animate in on the first page of a visit */
.seen .header-logo,
.seen .lang-switch,
.seen .home-lines > div {
    animation: none;
}

/* ...except the footer text when the language changes */
.seen:not(.lang-change):not(.lang-leaving) #site_footer .reveal {
    animation: none;
}

/* switching language: the page fades out, footer text included */
.leaving .section.is-active {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.leaving .section.is-active .reveal {
    animation: text-fall 0.4s ease-in both;
    animation-delay: calc((1.4s - var(--d, 0.4s)) * 0.2);
}

.leaving .hero {
    animation: photo-hide 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.05s both;
}

.lang-leaving #site_footer .reveal {
    animation: text-fall 0.4s ease-in both;
    animation-delay: calc((3s - var(--d, 1.4s)) * 0.12);
}

/* ---------- Large screens (About: portrait and text line up with the 3 service columns) ---------- */

@media screen and (min-width: 900px) {
    .about-intro {
        grid-template-columns: repeat(3, 1fr);
        justify-items: stretch;
        align-items: center;
        gap: 32px;
        margin-bottom: 18px;
    }

    .about-photo {
        justify-self: center;
    }

    .about-text {
        grid-column: 2 / 4;
        max-width: none;
    }
}

/* ---------- Desktop ---------- */

@media screen and (min-width: 769px) {
    .lang-switch {
        right: 28px;
    }

    .service-description {
        white-space: nowrap;
    }

    .home-lines > div {
        padding-bottom: 16px;
    }

    /* two-column footer: text left, legal text right */
    #site_footer {
        text-align: left;
    }

    .footer-padding {
        width: 100%;
        max-width: 1400px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        column-gap: 48px;
        padding: 20px 40px 18px 40px;
    }

    .company-meta {
        margin: 0;
        text-align: right;
        font-size: 0.7rem;
    }

    /* About lines up with the contact block in the footer: same left edge */
    .content-about {
        max-width: 1432px;
        padding-left: 56px;
        padding-right: 56px;
    }

    /* scroll arrow 15% bigger (26x14 -> 30x16) */
    .scroll-hint svg {
        width: 29.9px;
        height: 16.1px;
    }

    /* fades about 25% slower */
    .section {
        transition: opacity 0.625s ease, visibility 0s linear 0.625s;
    }

    .section.is-active {
        transition: opacity 0.75s ease 0.19s, visibility 0s;
    }

    .section.is-active .reveal {
        animation-duration: 1.125s;
    }

    .section.is-leaving .reveal {
        animation-duration: 0.5s;
    }
}

@media screen and (min-width: 769px) and (max-width: 1431px) {
    .content-about {
        padding-left: 40px;   /* footer content starts 40px from the edge here; right side leaves room for the dots */
    }
}

/* ---------- Mobile ---------- */

@media screen and (max-width: 768px) {
    /* Services as their own page after About */
    .section-mobile {
        display: block;
    }

    .about-services {
        display: none;
    }

    .header-padding {
        padding: 15px 10px;
    }

    .header-logo {
        width: 176px;
    }

    .logo-link {
        padding: 15px 22px;
        margin: -15px -22px;
    }

    .lang-switch {
        right: 6px;
    }

    .section-dots {
        right: 6px;
    }

    .service-tagline {
        font-size: 0.95rem;
        text-wrap: balance;
    }

    .service-description {
        font-size: 0.85rem;
        text-wrap: balance;
    }

    .contact-details {
        font-size: 0.85rem;
    }

    .company-meta {
        margin-top: 10px;
        font-size: 0.6rem;
    }

    /* About: no contact block in the footer (the bar slims down with it) */
    .footer-padding {
        transition: padding 0.6s ease;
    }

    .contact-lines {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.6s ease;
    }

    .contact-lines > div {
        overflow: hidden;
        transition: opacity 0.4s ease 0.2s, visibility 0s;
    }

    html[data-section="about"] .contact-lines,
    html[data-section="services"] .contact-lines {
        grid-template-rows: 0fr;
    }

    html[data-section="about"] .contact-lines > div,
    html[data-section="services"] .contact-lines > div {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    }

    html[data-section="about"] .footer-padding,
    html[data-section="services"] .footer-padding {
        padding-top: 0;
        padding-bottom: 0;
    }

    .content {
        padding: 24px 20px 28px 20px;
    }

    .page-title {
        font-size: 1.25rem;
        margin-bottom: 18px;
    }

    .lead {
        font-size: 0.95rem;
    }

    .about-intro {
        margin-bottom: 22px;
    }

    .about-photo {
        width: 140px;
    }

    .services {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .service {
        padding-top: 14px;
    }

    .map {
        min-height: 160px;
    }

    .logos {
        margin-top: 22px;
        padding-top: 20px;
    }
}

/* ---------- Small phones: phone and email on separate lines ---------- */

@media screen and (max-width: 480px) {
    .contact-sep {
        display: none;
    }

    .contact-link {
        display: block;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .header-logo,
    .lang-switch,
    .hero,
    .scroll-hint svg,
    .home-lines > div,
    .section.is-active .reveal,
    .section.is-leaving .reveal,
    #site_footer .reveal {
        animation: none;
    }

    .section,
    .section.is-active,
    .hero-slide,
    .home-lines,
    .home-lines > div,
    .legal-lines,
    .legal-lines > div,
    .contact-lines,
    .contact-lines > div,
    .footer-padding,
    .scroll-hint {
        transition: none;
    }
}