:root {
    --bg: #F4F6F1;
    --surface: #FBFCF9;
    --ink: #1E2A1F;
    --soft: #59665A;
    --accent: #3D6B45;
    --accent-ink: #F7FAF6;
    --band: #24402A;
    --band-ink: #EEF4EC;
    --line: #DCE3D8;
    --font-heading: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
    --font-body: "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --heading-weight: 750;
    --radius: 24px;
    --radius-sm: 999px;
}
/* Nufel site kit: the one stylesheet every customer site uses.
   Only the variables at the top (written by SiteThemes) change between sites. Mobile first, no JavaScript.
   Refreshed 04.11.2026: sections alternate with a faint tint of the accent, larger type, soft accent glows,
   numbered service cards, an offset frame behind the about image, and sections that fade in on scroll
   (CSS only, and only where the browser supports it and the visitor has not asked for less motion).
   Colours are mixed from the theme variables, so every palette (also the dark "Natt") gets the same look. */

:root {
    --tint: color-mix(in srgb, var(--accent) 5%, var(--bg));
    --tint-strong: color-mix(in srgb, var(--accent) 12%, var(--bg));
    --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--ink));
    --glow: color-mix(in srgb, var(--accent) 16%, transparent);
    --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--ink) 18%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--heading-weight); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -.03em; line-height: 1.04; }
h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); letter-spacing: -.025em; }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.wrap--narrow { width: min(780px, 100% - 40px); }

/* Sections take turns: page colour, then a faint tint of the accent. Every section keeps its full space. */
.section { position: relative; padding: clamp(64px, 10vw, 120px) 0; }
main > .section:nth-child(even):not(.hero--cover) { background: var(--tint); }
.section__head { max-width: 700px; margin-bottom: clamp(32px, 5vw, 52px); }

/* The small label above a heading: a soft pill in the accent */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 1.1em;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 11%, transparent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}
.lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--soft); }
.note { margin-top: 22px; font-size: .92rem; color: var(--soft); }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 12px 26px;
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.btn--ghost:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); border-color: var(--ink); }
.btn--small { min-height: 42px; padding: 8px 18px; font-size: .95rem; }

/* Images and the placeholder before one is chosen */
.media { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); background: var(--line); }
.media--empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    color: color-mix(in srgb, var(--accent) 55%, var(--soft));
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
        linear-gradient(135deg, var(--tint-strong), var(--surface));
    border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
}
.media--empty .icon { width: 42px; height: 42px; opacity: .7; }

/* Header */
.site-head {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-head__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.brand { color: var(--ink); text-decoration: none; }
.brand__name { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.35rem; letter-spacing: -.02em; }
.brand__logo { max-height: 44px; width: auto; }
.site-head__end { display: flex; align-items: center; gap: 14px; }
.head-cta { display: none; }
.nav__links { display: none; gap: 30px; }
.nav a { position: relative; color: var(--soft); font-weight: 600; text-decoration: none; }
.nav__links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform .2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__mobile summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--ink); }
.nav__mobile summary::-webkit-details-marker { display: none; }
.nav__mobile summary .icon { width: 26px; height: 26px; }
.nav__mobile:not([open]) .nav__panel { display: none; }
.nav__panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 10px 20px 20px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.nav__panel a { padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) {
    .nav__mobile { display: none; }
    .nav__links { display: flex; }
}
@media (min-width: 960px) {
    .head-cta { display: inline-flex; }
}

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero__grid { position: relative; display: grid; gap: 40px; align-items: center; }
.hero__text { max-width: 660px; }
.hero__media { position: relative; }
.hero__media .media { aspect-ratio: 4 / 3.4; border-radius: calc(var(--radius) * 1.4); box-shadow: var(--shadow); }
/* A soft glow of the accent behind the split and centred heroes */
.hero--split::before, .hero--center::before {
    content: "";
    position: absolute;
    top: -30%;
    left: 45%;
    width: min(820px, 100vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--glow), transparent);
    pointer-events: none;
}
.hero--center::before { top: -45%; left: 50%; transform: translateX(-50%); width: min(1000px, 120vw); }
.hero--center .hero__grid { justify-items: center; text-align: center; }
.hero--center .hero__text { max-width: 820px; }
.hero--center .lead { margin-inline: auto; max-width: 640px; }
.hero--center .actions { justify-content: center; }
.hero--cover { color: var(--band-ink); padding: clamp(110px, 18vw, 200px) 0; }
.hero--cover .hero__bg { position: absolute; inset: 0; }
.hero--cover .hero__bg .media { border-radius: 0; border: 0; }
.hero--cover .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--band) 92%, transparent) 0%, color-mix(in srgb, var(--band) 55%, transparent) 55%, color-mix(in srgb, var(--band) 20%, transparent)),
        linear-gradient(0deg, color-mix(in srgb, var(--band) 60%, transparent), transparent 45%);
}
.hero--cover .lead { color: inherit; opacity: .9; }
.hero--cover .eyebrow { color: var(--band-ink); background: color-mix(in srgb, var(--band-ink) 16%, transparent); }
.hero--cover .btn--ghost { color: var(--band-ink); border-color: color-mix(in srgb, var(--band-ink) 45%, transparent); }
.hero--cover .btn--ghost:hover { background: color-mix(in srgb, var(--band-ink) 10%, transparent); border-color: var(--band-ink); }
/* On the dark photo the main button is light, or it would disappear */
.hero--cover .btn:not(.btn--ghost) { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }
.hero--cover .btn:not(.btn--ghost):hover { background: color-mix(in srgb, var(--band-ink) 88%, var(--band)); }
@media (min-width: 900px) {
    .hero--split .hero__grid { grid-template-columns: 1.05fr 1fr; gap: 72px; }
}

/* About: the image sits on an offset frame in the accent tint */
.about__grid { display: grid; gap: 40px; align-items: center; }
.about--text .about__grid { max-width: 780px; }
.about__media { position: relative; padding: 0 18px 18px 0; }
.about__media::before {
    content: "";
    position: absolute;
    inset: 18px 0 0 18px;
    border-radius: calc(var(--radius) * 1.4);
    background: var(--tint-strong);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.about__media .media { position: relative; aspect-ratio: 5 / 4; border-radius: calc(var(--radius) * 1.4); }
.points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.points li { display: flex; gap: 12px; align-items: flex-start; }
.points .icon {
    width: 26px; height: 26px;
    padding: 5px;
    margin-top: 1px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
@media (min-width: 900px) {
    .about--image .about__grid { grid-template-columns: 1fr 1fr; gap: 80px; }
}

/* Cards shared by services, testimonials, team, hours, contact */
.service, .testimonial, .person, .hours__card, .contact__card, .faq__item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* Services: numbered cards that lift a little on hover */
.services__items { display: grid; gap: 18px; counter-reset: service; }
.service { position: relative; padding: 30px; counter-increment: service; transition: transform .2s, border-color .2s, box-shadow .2s; }
.services--cards .service::before {
    content: counter(service, decimal-leading-zero);
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-bottom: 18px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-weight: 800;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}
.services--cards .service:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); }
.service__top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.service__top h3 { margin: 0; }
.service p { color: var(--soft); }
.price { font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.services--cards .price { color: var(--accent); }
.services--list .services__items { gap: 0; border-top: 1px solid var(--line); }
.services--list .service { border-radius: 0; border-width: 0 0 1px; background: transparent; padding: 26px 0; }
.services--list .service:hover { transform: none; }
.services--list .service__top h3 { font-size: 1.3rem; }
@media (min-width: 760px) {
    .services--cards .services__items { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* Menu */
.menu__groups { display: grid; gap: 44px; }
.menu__group h3 { padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid var(--accent); display: inline-block; font-size: 1.35rem; }
.menu__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.menu__line { display: flex; align-items: baseline; gap: 10px; }
.menu__name { font-weight: 650; }
.menu__dots { flex: 1; border-bottom: 1.5px dotted color-mix(in srgb, var(--soft) 45%, transparent); transform: translateY(-4px); min-width: 20px; }
.menu__desc { margin: 4px 0 0; font-size: .95rem; color: var(--soft); }
@media (min-width: 900px) {
    .menu--columns .menu__groups { grid-template-columns: repeat(2, 1fr); gap: 52px 80px; }
}

/* Hours */
.hours__card { max-width: 580px; padding: clamp(26px, 4vw, 38px); box-shadow: var(--shadow); }
.hours__card h2 { display: flex; align-items: center; gap: 14px; font-size: 1.6rem; }
.hours__card h2 .icon {
    width: 44px; height: 44px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
.hours__days { margin: 0; display: grid; gap: 2px; }
.hours__days div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hours__days div:last-child { border-bottom: 0; }
.hours__days dt { font-weight: 600; }
.hours__days dd { margin: 0; color: var(--soft); font-variant-numeric: tabular-nums; }
.hours__address { display: flex; gap: 10px; align-items: center; margin-top: 18px; color: var(--soft); }

/* Gallery: images zoom softly on hover */
.gallery__items { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery__items figure { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--radius); }
/* Square: no minimum height here, or the shape would force a minimum width wider than a phone */
.gallery__items .media { aspect-ratio: 1; min-height: 0; transition: transform .5s; }
.gallery__items figure:hover .media:not(.media--empty) { transform: scale(1.04); }
@media (min-width: 900px) {
    .gallery--grid .gallery__items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .gallery--grid .gallery__items figure:first-child { grid-row: span 2; }
    .gallery--grid .gallery__items figure:first-child .media { aspect-ratio: auto; height: 100%; }
}
.gallery--strip .gallery__items { grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.gallery--strip figure { scroll-snap-align: start; }

/* Testimonials */
.testimonials__items { display: grid; gap: 18px; }
.testimonial { margin: 0; padding: 32px; display: grid; gap: 16px; align-content: start; }
.testimonial > .icon { width: 40px; height: 40px; color: color-mix(in srgb, var(--accent) 55%, transparent); }
.testimonial blockquote { margin: 0; font-size: 1.12rem; line-height: 1.6; }
.testimonial figcaption { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--soft); font-size: .95rem; }
.testimonial figcaption strong { color: var(--ink); }
@media (min-width: 760px) {
    .testimonials__items { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* FAQ */
.faq__items { display: grid; gap: 12px; }
.faq__item { padding: 0 24px; transition: border-color .2s; }
.faq__item[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.faq__item summary { cursor: pointer; padding: 20px 0; font-weight: 650; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: "+";
    display: grid;
    place-items: center;
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 1.2rem;
    line-height: 1;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item > p { color: var(--soft); padding-bottom: 20px; }

/* Team */
.team__items { display: grid; gap: 20px; }
.person { padding: 18px 18px 24px; transition: transform .2s, box-shadow .2s; }
.person:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* Square photo: its own height, not the card's (.media fills its box elsewhere) */
.person__photo { aspect-ratio: 1; height: auto; min-height: 0; margin-bottom: 18px; }
.person h3 { margin-bottom: 2px; }
.person__role { color: var(--accent); font-weight: 600; font-size: .95rem; }
.person p { color: var(--soft); }
@media (min-width: 760px) {
    .team__items { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* Call to action: a band with soft rings, or a light card */
.cta__box { position: relative; overflow: hidden; display: grid; gap: 24px; align-items: center; padding: clamp(36px, 6vw, 64px); border-radius: calc(var(--radius) * 1.4); }
.cta__box > * { position: relative; }
.cta--band .cta__box {
    background: linear-gradient(120deg, var(--band), color-mix(in srgb, var(--band) 70%, var(--accent)));
    color: var(--band-ink);
}
.cta--band .cta__box::before {
    content: "";
    position: absolute;
    right: -120px; bottom: -160px;
    width: 460px; height: 460px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--band-ink) 16%, transparent);
    box-shadow: 0 0 0 40px color-mix(in srgb, var(--band-ink) 4%, transparent), 0 0 0 80px color-mix(in srgb, var(--band-ink) 3%, transparent);
}
.cta--band .btn { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }
.cta--band .btn:hover { background: color-mix(in srgb, var(--band-ink) 88%, var(--band)); }
.cta--card .cta__box { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cta__box h2 { margin-bottom: .3em; }
.cta__box p { opacity: .88; }
@media (min-width: 900px) {
    .cta__box { grid-template-columns: 1fr auto; gap: 48px; }
}

/* Contact */
.contact__grid { display: grid; gap: 36px; align-items: start; }
.contact__list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.contact__list li { display: flex; gap: 14px; align-items: center; font-size: 1.08rem; }
.contact__list .icon {
    width: 42px; height: 42px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
.contact__list a { color: var(--ink); text-decoration: none; font-weight: 600; }
.contact__list a:hover { color: var(--accent); }
.contact__card { padding: clamp(26px, 4vw, 36px); display: grid; gap: 12px; box-shadow: var(--shadow); }
.contact__card-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.35rem; margin-bottom: 6px; }
.contact--simple .contact__grid { justify-items: center; text-align: center; }
.contact--simple .contact__list li { justify-content: center; }
@media (min-width: 900px) {
    .contact--split .contact__grid { grid-template-columns: 1.3fr 1fr; gap: 72px; }
}

/* Footer */
.site-foot { background: var(--band); color: var(--band-ink); padding: clamp(52px, 8vw, 80px) 0 30px; }
.site-foot__grid { display: grid; gap: 32px; }
.site-foot__name { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.5rem; letter-spacing: -.02em; }
.site-foot__tagline { opacity: .75; margin-top: 8px; max-width: 420px; }
.site-foot__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-foot__contact li { display: flex; gap: 12px; align-items: center; }
.site-foot__contact .icon { opacity: .7; }
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-foot__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--band-ink) 18%, transparent); font-size: .88rem; opacity: .7; }
@media (min-width: 760px) {
    .site-foot__grid { grid-template-columns: 1fr auto; }
}

/* Sections fade in as they scroll into view: CSS only, where supported, never for "less motion" */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        main > .section:not(:first-child) > .wrap {
            animation: rise both ease-out;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
    }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}