/* Osnovna podešavanja */
:root {
    /* Brand palette: teal and gold.
     *
     * Every neutral carries a teal undertone - the near-black is greenish, the
     * off-white is cool - so the palette reads as one material rather than a
     * set of separate colours. That is what makes this family hold together.
     *
     * Contrast ratios noted below were measured against --ground; the gold has
     * three variants because a single one cannot serve small text on both
     * light and dark backgrounds. */
    --teal-deep: #12474E;    /* dark sections, headings */
    --teal: #21707A;         /* links, icons, primary accent */
    --teal-hover: #1A5A63;   /* pressed and hover states */
    --mist: #E9F1F0;         /* pale tint behind icons */
    --line: #DCE6E5;         /* borders and rules */
    --ground: #F5F8F7;       /* page and section background */
    --white: #FFFFFF;

    --ink: #11292E;          /* body text, 14.2:1 */
    --muted: #56706E;        /* secondary text, 4.99:1 */

    --gold: #AA8340;         /* buttons, large text, decoration */
    --gold-text: #8A6932;    /* small text on light, 4.74:1 */
    --gold-light: #E4C489;   /* small text on dark teal, 6.16:1 */
    --gold-soft: #F2E9D6;    /* tinted card background */
    --porcelain: #EFEAE0;    /* warm cream */

    --danger: #A8442F;       /* urgent care, 5.94:1 */
    --danger-soft: #F6E7E2;

    /* Display face for headings, text face for everything else. --font-family
       is kept as an alias because form controls and buttons reference it. */
    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family: var(--sans);

    /* Shape. The reference design uses no pill-shaped rectangles at all -
       only true circles for icons - and its corners are softer than ours
       were: 14px where we had 12, 10px on controls where we had a 50px pill. */
    --r-control: 10px;   /* buttons, inputs, tags, pagination */
    --r: 14px;           /* standard cards and panels */
    --r-lg: 18px;        /* larger cards, images */
    --r-xl: 24px;        /* feature panels */

    /* Two layers at very low opacity, tinted with the ink rather than black.
       That diffusion is most of what separates a calm surface from a cheap
       drop shadow. */
    --shadow: 0 1px 2px rgba(17, 41, 46, 0.04), 0 8px 30px rgba(17, 41, 46, 0.06);
    --shadow-lg: 0 24px 60px rgba(9, 34, 38, 0.16);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
}

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

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Dugmići */
.btn {
    padding: 12px 24px;
    border-radius: var(--r-control);
    border: none;
    font-family: var(--font-family);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.btn-primary {
    background-color: var(--gold);
    /* Near-black brown rather than white: white on gold is only 3.48:1,
       this is 4.93:1. */
    color: #231A08;
}

.btn-primary:hover {
    background-color: #96723A;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--teal);
    color: var(--teal);
}

.btn-outline:hover {
    background-color: var(--teal);
    color: var(--white);
}

/* Header */
.header {
    background-color: var(--ink);
    padding: 15px 0;
    color: var(--white);
    position: relative;
    z-index: 100;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
}

.logo i {
    color: var(--teal);
    font-size: 2rem;
}

.logo p {
    font-size: 0.7rem;
    font-weight: 300;
    position: absolute;
    top: 45px;
    left: 50px;
    opacity: 0.8;
}

.navbar ul {
    display: flex;
    gap: 25px;
}

.navbar a {
    font-size: 0.9rem;
    font-weight: 400;
    transition: color 0.3s;
}

.navbar a:hover {
    color: var(--teal);
}

.header-contact {
    display: flex;
    align-items: center;
    gap: 20px;
}

.phone {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.phone i {
    font-size: 1.2rem;
    color: var(--teal);
}

.phone span {
    display: block;
    font-size: 0.7rem;
    opacity: 0.8;
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--teal-deep) 0%, #0B3236 100%);
    color: var(--white);
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.hero-subtitle {
    font-size: 0.8rem;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--gold-light);
    margin-bottom: 15px;
}

.hero h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero h1 span {
    color: #8FC5BF;
}

.hero-desc {
    font-size: 1rem;
    margin-bottom: 30px;
    opacity: 0.9;
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.btn-video {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-video:hover {
    background: rgba(255, 255, 255, 0.2);
}

.hero-social-proof {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatars {
    display: flex;
}

.avatars img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--teal-deep);
    margin-left: -10px;
}

.avatars img:first-child {
    margin-left: 0;
}

.proof-text p {
    font-size: 0.8rem;
    opacity: 0.9;
}

.stars {
    color: #D9A441;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.stars span {
    color: var(--white);
    opacity: 0.7;
    margin-left: 5px;
}

.hero-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-main-img {
    width: 100%;
    max-width: 450px;
    border-radius: var(--r-lg);
    /* Placeholder stil za sliku */
    box-shadow: var(--shadow-lg);
}

.floating-features {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-item {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 15px;
    border-radius: var(--r-control);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.feature-item i {
    color: var(--teal);
}

/* Features Bar */
.features-bar {
    background-color: var(--ground);
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
}

.features-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-box i {
    font-size: 2rem;
    color: var(--teal);
}

.feature-box h4 {
    font-size: 0.95rem;
    color: var(--ink);
}

.feature-box p {
    font-size: 0.8rem;
    color: var(--muted);
}

/* Services Section */
.services {
    padding: 80px 0;
    background-color: var(--white);
}

.services-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.section-subtitle {
    font-size: 0.8rem;
    color: var(--gold-text);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.services-title h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--ink);
}

.services-title h2 span {
    color: var(--teal);
}

.services-desc {
    max-width: 400px;
    text-align: left;
}

.services-desc p {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 15px;
}

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

.service-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--teal);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-5px);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.card-icon {
    width: 70px;
    height: 70px;
    background-color: var(--mist);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: var(--teal);
}

.red-icon {
    background-color: var(--danger-soft);
    color: var(--danger);
}

.service-card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--ink);
}

.service-card p {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 20px;
}

.service-card a {
    font-size: 0.85rem;
    color: var(--teal);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.service-card a:hover {
    text-decoration: underline;
}

/* Footer */
.footer {
    background-color: var(--teal-deep);
    color: var(--white);
    padding: 40px 0;
    text-align: center;
}

.footer-icons {
    display: flex;
    justify-content: center;
    gap: 40px;
    font-size: 1.5rem;
    margin-bottom: 20px;
    opacity: 0.7;
}

.footer p {
    font-size: 0.8rem;
    opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero h1 { font-size: 2.8rem; }
    .features-container { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .services-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .navbar { display: none; }
    .mobile-menu-btn { display: block; }
    .header-contact { display: none; }
}

@media (max-width: 768px) {
    .hero-container { flex-direction: column; text-align: center; }
    .hero-buttons { justify-content: center; }
    .hero-social-proof { justify-content: center; }
    .floating-features { display: none; } /* Sakriveno na mobilnom zbog preklapanja */
    .features-container { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------------
 * Mobile navigation - added during the WordPress conversion.
 * The static template had a .mobile-menu-btn but no open state, so the menu
 * could never be revealed on screens below 992px.
 * ------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .navbar.is-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        box-shadow: var(--shadow);
        padding: 20px;
        z-index: 999;
    }

    .navbar.is-open ul {
        flex-direction: column;
        gap: 4px;
    }

    .navbar.is-open a {
        display: block;
        padding: 12px 8px;
        border-radius: var(--r-control);
    }

    .navbar.is-open a:hover,
    .navbar.is-open .current-menu-item > a {
        background: var(--mist);
        color: var(--teal-deep);
    }

    .header-container {
        position: relative;
    }
}

/* WordPress core markup helpers */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link:focus {
    clip-path: none;
    background-color: var(--white);
    color: var(--teal-deep);
    display: block;
    font-weight: 600;
    height: auto;
    left: 12px;
    padding: 12px 20px;
    top: 12px;
    width: auto;
    z-index: 100000;
    border-radius: var(--r-control);
    box-shadow: var(--shadow);
}

.alignwide { max-width: 1100px; }
.alignfull { max-width: 100%; }
.aligncenter { display: block; margin-inline: auto; }

.service-card .card-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--r);
    margin-bottom: 16px;
}

.page-section { padding: 80px 0; }

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}

.pagination .page-numbers {
    padding: 10px 16px;
    border-radius: var(--r-control);
    background: var(--white);
    border: 1px solid var(--mist);
    transition: all 0.2s ease;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: var(--teal-deep);
    color: var(--white);
    border-color: var(--teal-deep);
}

/* .mobile-menu-btn is a real <button> in the theme (it was a <div> in the
   static template), so the browser chrome has to be reset. */
.mobile-menu-btn {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    line-height: 1;
}

.header.is-scrolled {
    box-shadow: var(--shadow);
}

/* Header guards: WordPress-driven content (site title, menu items entered in
   wp-admin) can be longer than the static template's fixed strings, which was
   wrapping the navigation onto two lines. */
.logo span,
.navbar a,
.header-contact .phone strong,
.header-contact .btn {
    white-space: nowrap;
}

.header-container {
    flex-wrap: nowrap;
}

/* The original .btn rule set no font-size, so buttons silently inherited the
   browser's default <button> size (13.33px) while links rendered at 16px.
   Booking CTAs are links in the theme (they navigate), so the size is now
   declared explicitly and <a> and <button> match. */
.btn {
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
 * Mobile safety guards.
 *
 * Verified at a real 390px viewport: the original template has no overflow,
 * so nothing here changes the design's sizing. These are guards only -
 * min-width:0 lets flex children shrink if WordPress-entered content is longer
 * than the template's fixed strings, and wrapping keeps the hero CTAs from
 * being squeezed into two-line labels on narrow phones.
 * ------------------------------------------------------------------------- */
.hero-content,
.hero-image-wrapper,
.header-container > * {
    min-width: 0;
}

@media (max-width: 768px) {
    .hero-buttons,
    .hero-social-proof {
        flex-wrap: wrap;
    }
}

/* ===========================================================================
 * Inner pages - page.php, single.php, archive.php, search.php, 404.php
 * =========================================================================== */

/* --- Title band -------------------------------------------------------- */
.page-header {
    background: linear-gradient(135deg, var(--teal-deep) 0%, #0B3236 100%);
    color: var(--white);
    padding: 70px 0 60px;
}

.page-header-inner {
    max-width: 820px;
    text-align: center;
}

.page-header-subtitle {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--gold-light);
    margin-bottom: 10px;
}

.page-header-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 14px;
}

.page-header-lead {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto;
}

.page-header-crumbs {
    margin-top: 22px;
    font-size: 0.85rem;
}

.page-header-crumbs a {
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.page-header-crumbs a:hover {
    color: var(--white);
}

/* --- Content column ---------------------------------------------------- */
.entry-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 64px 20px 80px;
}

.entry-wrap.is-wide {
    max-width: 1200px;
}

.entry-wrap.is-flush {
    padding-top: 0;
}

.entry-thumbnail {
    margin-bottom: 36px;
}

.entry-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: var(--r);
    display: block;
}

.entry-thumbnail figcaption {
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
}

/* --- Content typography ------------------------------------------------ */
.entry-content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink);
}

.entry-content > * + * {
    margin-top: 1.4em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: var(--teal-deep);
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 0.6em;
}

.entry-content h2 { font-size: 1.75rem; }
.entry-content h3 { font-size: 1.35rem; }
.entry-content h4 { font-size: 1.1rem; }

.entry-content a {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.entry-content a:hover {
    color: var(--teal-deep);
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.4em;
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 0.5em; }
.entry-content li::marker { color: var(--teal); }

.entry-content blockquote {
    border-left: 3px solid var(--teal);
    padding: 4px 0 4px 22px;
    color: var(--muted);
    font-size: 1.1rem;
    font-style: italic;
}

.entry-content blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 0.9rem;
    font-style: normal;
    color: var(--ink);
}

.entry-content img,
.entry-content .wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r);
}

.entry-content figcaption {
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.entry-content th,
.entry-content td {
    border: 1px solid var(--mist);
    padding: 12px 14px;
    text-align: left;
}

.entry-content th {
    background: var(--ground);
    font-weight: 600;
    color: var(--teal-deep);
}

.entry-content code {
    background: var(--ground);
    border: 1px solid var(--mist);
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 0.9em;
}

.entry-content pre {
    background: var(--ink);
    color: var(--white);
    border-radius: var(--r);
    padding: 20px;
    overflow-x: auto;
}

.entry-content pre code {
    background: none;
    border: 0;
    color: inherit;
    padding: 0;
}

.entry-content hr,
.entry-content .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--mist);
    margin: 2.5em 0;
}

/* Wide and full alignment inside the reading column. */
.entry-content .alignwide {
    width: min(1160px, calc(100vw - 40px));
    margin-inline: calc(50% - min(580px, (100vw - 40px) / 2));
    max-width: none;
}

.entry-content .alignfull {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: none;
}

/* --- Post meta, tags, author ------------------------------------------ */
.entry-tags {
    margin-top: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--muted);
}

.entry-tags a {
    background: var(--mist);
    color: var(--teal-deep);
    border-radius: var(--r-control);
    padding: 5px 14px;
    transition: all 0.2s ease;
}

.entry-tags a:hover {
    background: var(--teal-deep);
    color: var(--white);
}

.entry-footer {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--mist);
}

.entry-author {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.entry-author img {
    border-radius: 50%;
    flex-shrink: 0;
}

.entry-author span {
    font-size: 0.8rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.entry-author strong {
    display: block;
    color: var(--teal-deep);
    font-size: 1.05rem;
}

.entry-author p {
    color: var(--muted);
    font-size: 0.92rem;
    margin-top: 6px;
}

.edit-link a {
    font-size: 0.85rem;
    color: var(--teal);
}

/* --- Previous / next --------------------------------------------------- */
.post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 48px;
}

.post-nav-link {
    border: 1px solid var(--mist);
    border-radius: var(--r);
    padding: 18px 20px;
    transition: all 0.2s ease;
    background: var(--white);
}

.post-nav-link:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow);
}

.post-nav-link span {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 6px;
}

.post-nav-link strong {
    color: var(--teal-deep);
    font-weight: 600;
    line-height: 1.4;
}

.post-nav-link.next {
    text-align: right;
}

/* --- Post grid and cards ----------------------------------------------- */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.post-card {
    background: var(--white);
    border: 1px solid var(--mist);
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.post-card-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--ground);
    overflow: hidden;
}

.post-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--teal);
    background: var(--mist);
}

.post-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.post-card-meta {
    font-size: 0.8rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-card-meta a {
    color: var(--teal);
    font-weight: 500;
}

.post-card h3 {
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--teal-deep);
}

.post-card p {
    color: var(--muted);
    font-size: 0.93rem;
    flex: 1;
}

.post-card-link {
    color: var(--teal);
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.post-card-link:hover {
    gap: 12px;
}

/* --- Empty states ------------------------------------------------------ */
.no-results {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    padding: 40px 0;
}

.no-results-icon {
    font-size: 3rem;
    color: var(--teal);
    margin-bottom: 18px;
}

.no-results h2 {
    color: var(--teal-deep);
    margin-bottom: 10px;
}

.no-results p {
    color: var(--muted);
    margin-bottom: 24px;
}

.no-results-actions {
    margin-top: 24px;
}

/* --- Search form ------------------------------------------------------- */
.search-form {
    display: flex;
    gap: 10px;
    max-width: 440px;
    margin: 0 auto;
}

.search-form label {
    flex: 1;
}

.search-form .search-field {
    width: 100%;
    border: 1px solid var(--mist);
    border-radius: var(--r-control);
    padding: 12px 20px;
    font-family: var(--font-family);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.search-form .search-field:focus {
    border-color: var(--teal);
}

.search-form .search-submit {
    background: var(--teal-deep);
    color: var(--white);
    border: 0;
    border-radius: var(--r-control);
    padding: 12px 24px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-form .search-submit:hover {
    background: var(--teal);
}

/* --- Comments ---------------------------------------------------------- */
.comments-area {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--mist);
}

.comments-title,
.comment-reply-title {
    color: var(--teal-deep);
    font-size: 1.4rem;
    margin-bottom: 24px;
}

.comment-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
}

.comment-list .children {
    list-style: none;
    margin-top: 24px;
    padding-left: 32px;
    border-left: 2px solid var(--mist);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.comment-body {
    background: var(--ground);
    border-radius: var(--r);
    padding: 20px 22px;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--teal-deep);
}

.comment-author img {
    border-radius: 50%;
}

.comment-metadata {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 6px 0 12px;
}

.comment-content {
    color: var(--ink);
}

.comment-content p + p {
    margin-top: 1em;
}

.reply a {
    font-size: 0.85rem;
    color: var(--teal);
    font-weight: 500;
}

.comment-respond {
    background: var(--ground);
    border-radius: var(--r);
    padding: 28px;
}

.comment-notes,
.comment-form-cookies-consent label {
    font-size: 0.85rem;
    color: var(--muted);
}

.comment-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    border: 1px solid var(--mist);
    border-radius: var(--r-control);
    padding: 12px 14px;
    font-family: var(--font-family);
    font-size: 0.95rem;
    background: var(--white);
    outline: none;
    transition: border-color 0.2s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--teal);
}

.comment-form p {
    margin-bottom: 16px;
}

.comment-form .form-submit {
    margin-bottom: 0;
}

/* --- Footer extras ----------------------------------------------------- */
.footer-nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 18px 0;
    font-size: 0.9rem;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: var(--white);
}

.footer-widgets {
    margin: 20px 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 992px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .page-header { padding: 48px 0 44px; }
    .entry-wrap { padding: 44px 20px 60px; }
    .post-grid { grid-template-columns: 1fr; }
    .post-navigation { grid-template-columns: 1fr; }
    .post-nav-link.next { text-align: left; }
    .comment-list .children { padding-left: 16px; }
    .search-form { flex-direction: column; }
    .entry-content .alignwide { width: auto; margin-inline: 0; }
}

/* A lone "next article" link keeps the right-hand column so it does not
   read as the previous one. */
.post-navigation .post-nav-link.next:only-child {
    grid-column: 2;
}

/* ===========================================================================
 * WordPress core classes
 *
 * Markup WordPress can output from the editor at any time. Without these the
 * theme silently ignores an editor's formatting choices - a left-floated image
 * would not float, a caption would not read as a caption.
 * =========================================================================== */

/* --- Alignment --------------------------------------------------------- */
.alignleft {
    float: left;
    margin: 0.4em 1.6em 1em 0;
}

.alignright {
    float: right;
    margin: 0.4em 0 1em 1.6em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-inline: auto;
}

.alignnone {
    margin: 1em 0;
}

/* Floats must not escape the entry they belong to. */
.entry-content::after,
.comment-content::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 600px) {
    .alignleft,
    .alignright {
        float: none;
        margin: 1em 0;
        display: block;
    }
}

/* --- Captions ---------------------------------------------------------- */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1.6em;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--r);
}

.wp-caption-text,
.wp-block-image figcaption,
.gallery-caption {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    margin-top: 10px;
}

/* --- Galleries --------------------------------------------------------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 1.6em;
}

.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: var(--r);
    display: block;
}

@media (max-width: 600px) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* --- Sticky posts ------------------------------------------------------ */
.sticky {
    position: relative;
    border-color: var(--teal);
}

.sticky .post-card-body::before {
    content: "\f08d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--teal);
    background: var(--white);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}

/* --- Comment by the post author ---------------------------------------- */
.bypostauthor > .comment-body {
    border-left: 3px solid var(--teal);
}

.bypostauthor > .comment-body .comment-author::after {
    content: "\f4fc";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--teal);
}

/* --- Misc core output --------------------------------------------------- */
.wp-block-button__link {
    font-size: 0.875rem;
}

.page-links {
    margin-top: 2em;
    font-size: 0.9rem;
}

.page-links a {
    background: var(--mist);
    border-radius: 8px;
    padding: 4px 10px;
    margin: 0 2px;
}

/* ---------------------------------------------------------------------------
 * Block style variations registered in inc/block-styles.php.
 * ------------------------------------------------------------------------- */
.wp-block-group.is-style-judent-card {
    background: var(--white);
    border: 1px solid var(--mist);
    border-radius: var(--r);
    padding: 28px;
    box-shadow: var(--shadow);
}

.wp-block-group.is-style-judent-panel {
    background: var(--ground);
    border-radius: var(--r);
    padding: 32px;
}

.wp-block-image.is-style-judent-rounded img {
    border-radius: var(--r);
}

.wp-block-list.is-style-judent-checks {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-judent-checks li {
    position: relative;
    padding-left: 30px;
}

.wp-block-list.is-style-judent-checks li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--teal);
    position: absolute;
    left: 0;
    top: 0.15em;
    font-size: 0.85em;
}

.wp-block-separator.is-style-judent-dots {
    border: 0;
    height: 6px;
    background-image: radial-gradient(circle, var(--teal) 2px, transparent 2px);
    background-size: 16px 6px;
    background-repeat: repeat-x;
    background-position: center;
    opacity: 0.5;
}

/* ===========================================================================
 * Services carousel
 *
 * The track is a real scroll container with scroll-snap, so touch and
 * trackpad swiping work with no JavaScript at all. The script only adds
 * buttons, dots and announcements.
 * =========================================================================== */
.services-carousel {
    position: relative;
}

.carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 28px) / 3);
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Room for the card hover lift and its shadow. Horizontal padding is
       avoided on purpose: it offsets the scroll origin, so the track would
       never report scrollLeft 0 and the "previous" button could not disable. */
    padding: 6px 0 16px;
    margin-top: -6px;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-track:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 4px;
    border-radius: var(--r);
}

.carousel-slide {
    scroll-snap-align: start;
    min-width: 0;
}

.service-card-link {
    color: var(--teal);
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.2s ease;
}

.service-card-link:hover {
    gap: 12px;
}

.service-card h3 a {
    color: inherit;
}

.service-card h3 a:hover {
    color: var(--teal);
}

/* --- Controls ----------------------------------------------------------- */
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.services-carousel.has-no-controls .carousel-controls {
    display: none;
}

.carousel-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--mist);
    background: var(--white);
    color: var(--teal-deep);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.carousel-btn:hover:not(:disabled) {
    background: var(--teal-deep);
    border-color: var(--teal-deep);
    color: var(--white);
}

.carousel-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.carousel-btn:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--mist);
    cursor: pointer;
    transition: all 0.2s ease;
}

.carousel-dot.is-active {
    background: var(--teal);
    width: 24px;
    border-radius: 50px; /* indicator bar, intentionally rounded */
}

.carousel-dot:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

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

    .carousel-dot,
    .carousel-btn,
    .service-card {
        transition: none;
    }
}

@media (max-width: 992px) {
    .carousel-track {
        grid-auto-columns: calc((100% - 28px) / 2);
    }
}

@media (max-width: 768px) {
    .carousel-track {
        grid-auto-columns: 85%;
    }
}

/* Call to action at the end of a single service. */
.service-cta {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    background: var(--ground);
    border: 1px solid var(--mist);
    border-radius: var(--r);
    padding: 28px;
    margin-top: 48px;
}

.service-cta-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mist);
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.service-cta > div:not(.service-cta-icon) {
    flex: 1;
    min-width: 200px;
}

.service-cta h3 {
    color: var(--teal-deep);
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.service-cta p {
    color: var(--muted);
    font-size: 0.93rem;
}

/* ---------------------------------------------------------------------------
 * Footer contact, hours and social links.
 * Every block is optional - the footer collapses gracefully when the practice
 * has not filled a section in.
 * ------------------------------------------------------------------------- */
.footer-info {
    display: flex;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
    text-align: left;
    margin-bottom: 28px;
}

.footer-col h4 {
    color: var(--white);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.65;
    margin-bottom: 12px;
    font-weight: 600;
}

.footer-col p {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.93rem;
}

.footer-col p i {
    color: var(--teal);
    width: 16px;
    flex-shrink: 0;
}

.footer-col a {
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-hours {
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 20px;
    font-size: 0.93rem;
}

.footer-hours dt {
    color: rgba(255, 255, 255, 0.7);
}

.footer-hours dd {
    color: var(--white);
    font-weight: 500;
    margin: 0;
    text-align: right;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0 0 20px;
    list-style: none;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.footer-social a:hover {
    background: var(--teal);
    transform: translateY(-2px);
}

.footer-social a:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .footer-info {
        gap: 32px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-col p {
        justify-content: center;
    }

    .footer-hours {
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
 * Typography
 *
 * Fraunces carries the headings, Montserrat the text. The serif is what gives
 * the design its character - without it the palette alone reads as a different
 * kind of clinic entirely.
 * ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.hero h1,
.page-header-title,
.services-header h2,
.service-cta h3,
.comments-title,
.comment-reply-title,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* The accent line of a two-tone heading is set in italic, the way the
   reference design marks emphasis inside a sentence. */
.hero h1 span,
.services-header h2 span,
.page-header-title span {
    font-style: italic;
    font-weight: 400;
}

/* Eyebrow labels: small, wide-tracked, uppercase. This is the detail that
   makes the type feel deliberate rather than defaulted. */
.section-subtitle,
.hero-subtitle,
.page-header-subtitle {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

/* Montserrat sits visually smaller than Poppins at the same size, and its
   lowercase is shorter, so the body copy gains a little size and leading. */
body {
    font-size: 1.02rem;
    line-height: 1.7;
}

.btn,
.search-form .search-field,
.search-form .search-submit,
.comment-form input,
.comment-form textarea {
    font-family: var(--sans);
}

/* Small headings that are labels, not titles, stay in the sans. A tracked,
   uppercase serif at 0.8rem reads as a mistake rather than a choice. */
.footer-col h4,
.feature-box h4,
.post-card-meta,
.entry-author span {
    font-family: var(--sans);
}

.footer-col h4 {
    letter-spacing: 0.14em;
    font-weight: 600;
    opacity: 0.75;
}

/* Fraunces has a small x-height relative to Montserrat, so a card title set at
   the old size looked slighter than the body text beneath it. */
.service-card h3,
.post-card h3 {
    font-size: 1.28rem;
    line-height: 1.3;
}

.feature-box h4 {
    font-weight: 600;
}

/* Montserrat's x-height is lower than Poppins's, so text carried over at the
   old sizes reads smaller than it did. The smallest body copy is lifted off
   13.6px, which is below where it stays comfortable for older patients. */
.service-card p,
.post-card p,
.hero-desc,
.services-desc p {
    font-size: 0.95rem;
}

.service-card-link,
.post-card-link,
.service-card a {
    font-size: 0.92rem;
}

/* ---------------------------------------------------------------------------
 * Shape and spacing
 *
 * The reference design earns its calm from room, not decoration: cards are
 * padded far more generously than ours were, and surfaces separate through a
 * hairline and a diffuse shadow rather than a hard border.
 * ------------------------------------------------------------------------- */
.btn {
    border-radius: var(--r-control);
    padding: 13px 22px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn-primary:hover,
.btn-outline:hover {
    /* Tinted with the button's own colour rather than a grey drop shadow. */
    box-shadow: 0 8px 20px rgba(170, 131, 64, 0.28);
}

.btn-outline {
    border-width: 1.5px;
    border-color: var(--line);
    color: var(--teal-deep);
}

.btn-outline:hover {
    border-color: var(--teal);
    color: var(--teal);
    background-color: transparent;
    box-shadow: none;
}

.service-card,
.post-card {
    border-radius: var(--r);
    border-color: var(--line);
    box-shadow: var(--shadow);
}

.service-card {
    padding: 40px 32px;
}

.post-card-body {
    padding: 28px 30px 30px;
}

.entry-content .wp-block-image img,
.entry-thumbnail img,
.service-card .card-thumb img,
.post-card-thumb img {
    border-radius: var(--r-lg);
}

.post-card-thumb img {
    border-radius: 0;
}

.card-icon {
    border-radius: var(--r);
}

.service-cta,
.comment-respond,
.comment-body,
.wp-block-group.is-style-judent-card,
.wp-block-group.is-style-judent-panel {
    border-radius: var(--r-lg);
}

.wp-block-group.is-style-judent-card {
    padding: 36px 38px;
}

.feature-item {
    border-radius: var(--r-control);
}

/* Sections breathe more. The old rhythm was built for a denser, brighter
   design; this palette and this serif want the extra room. */
.services,
.page-section {
    padding: 96px 0;
}

.hero {
    padding: 96px 0 116px;
}

.entry-wrap {
    padding: 80px 20px 96px;
}

@media (max-width: 768px) {
    .services,
    .page-section {
        padding: 56px 0;
    }

    .hero {
        padding: 56px 0 64px;
    }

    .service-card {
        padding: 32px 26px;
    }

    .entry-wrap {
        padding: 48px 20px 60px;
    }
}

/* ---------------------------------------------------------------------------
 * Sticky action bar, phones only.
 *
 * Hidden until the hero has scrolled away, so it never covers the opening
 * message, and never shown on a desktop where the header already carries the
 * same actions.
 * ------------------------------------------------------------------------- */
.mobile-bar {
    display: none;
}

@media (max-width: 860px) {
    .mobile-bar {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        background: var(--white);
        border-top: 1px solid var(--line);
        /* Clears the home indicator on phones with no physical button. */
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -2px 20px rgba(17, 41, 46, 0.1);
        transform: translateY(110%);
        transition: transform 0.25s ease;
    }

    .mobile-bar.is-visible {
        transform: translateY(0);
    }

    .mobile-bar-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        /* 56px keeps every target comfortably above the 44px minimum. */
        min-height: 56px;
        padding: 9px 4px;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--teal-deep);
        text-align: center;
        line-height: 1.2;
    }

    .mobile-bar-action i {
        font-size: 1.15rem;
    }

    .mobile-bar-action + .mobile-bar-action {
        border-left: 1px solid var(--line);
    }

    .mobile-bar-action.is-whatsapp i {
        color: #25D366;
    }

    .mobile-bar-action.is-estimate {
        background: var(--gold);
        color: #231A08;
    }

    .mobile-bar-action:active {
        background: var(--mist);
    }

    .mobile-bar-action.is-estimate:active {
        background: #96723A;
    }

    /* The bar sits over the page, so the footer needs room beneath it. */
    body.has-mobile-bar .footer {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-bar {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
 * Estimate form
 *
 * Contact Form 7 ships almost no styling, so this is the theme's job. Every
 * control is at least 48px tall: this form is filled in on a phone, often by
 * someone older, and a cramped field is a lost enquiry.
 * ------------------------------------------------------------------------- */
.wpcf7 {
    margin-top: 2rem;
}

.jf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px;
}

.jf-field {
    margin-bottom: 18px;
}

.jf-field label {
    display: block;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.jf-req {
    color: var(--danger);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 input[type="file"] {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 textarea {
    min-height: 120px;
    resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(33, 112, 122, 0.12);
}

.wpcf7 input[type="file"] {
    padding: 10px 12px;
    background: var(--ground);
    cursor: pointer;
}

.jf-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
}

/* --- Consent ------------------------------------------------------------ */
.jf-consent {
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 20px 22px;
    margin: 26px 0;
}

.jf-consent .wpcf7-list-item {
    margin: 0;
}

.jf-consent label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
}

.jf-consent input[type="checkbox"] {
    /* A 22px box is reliably tappable; the default is roughly 13px. */
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: var(--teal);
    cursor: pointer;
}

.jf-consent-detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted);
}

/* --- Submit ------------------------------------------------------------- */
.jf-submit {
    margin-top: 8px;
}

.wpcf7 input[type="submit"] {
    width: 100%;
    min-height: 54px;
    padding: 15px 28px;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    color: #231A08;
    background: var(--gold);
    border: 0;
    border-radius: var(--r-control);
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.wpcf7 input[type="submit"]:hover {
    background: #96723A;
    box-shadow: 0 8px 20px rgba(170, 131, 64, 0.28);
    transform: translateY(-1px);
}

/* --- Feedback ----------------------------------------------------------- */
.wpcf7 form .wpcf7-response-output {
    margin: 22px 0 0;
    padding: 14px 18px;
    border-radius: var(--r-control);
    border-width: 1px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.wpcf7 form.sent .wpcf7-response-output {
    background: var(--mist);
    border-color: var(--teal);
    color: var(--teal-deep);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--danger);
}

.wpcf7 .wpcf7-not-valid {
    border-color: var(--danger);
}

.wpcf7-spinner {
    margin: 0 0 0 12px;
}

@media (max-width: 680px) {
    .jf-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
 * Services hub and service pages
 * ------------------------------------------------------------------------- */
.focus-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.focus-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.focus-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.focus-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.focus-price {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold-text);
    white-space: nowrap;
}

.focus-card h3 {
    font-size: 1.35rem;
    line-height: 1.3;
}

.focus-card h3 a {
    color: var(--teal-deep);
}

.focus-card h3 a:hover {
    color: var(--teal);
}

.focus-excerpt {
    color: var(--muted);
    font-size: 0.95rem;
    flex: 1;
}

.focus-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--muted);
}

.focus-meta i {
    color: var(--teal);
}

/* --- Remaining services, grouped -------------------------------------- */
.services-rest {
    background: var(--ground);
}

.area-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.area-block {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 26px 28px;
}

.area-block h3 {
    font-size: 1.1rem;
    color: var(--teal-deep);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.area-block ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.area-block li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    font-size: 0.95rem;
}

.area-service {
    color: var(--ink);
}

.area-price {
    color: var(--gold-text);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.area-note {
    margin-top: 32px;
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}

.area-note a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    font-weight: 600;
    margin-left: 8px;
}

/* --- Facts strip on a service page ------------------------------------ */
.service-facts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px 26px;
    margin-bottom: 40px;
}

.service-fact + .service-fact {
    border-left: 1px solid var(--line);
    padding-left: 24px;
}

.service-fact dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.service-fact dt i {
    color: var(--teal);
}

.service-fact dd {
    margin: 0;
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--teal-deep);
}

@media (max-width: 900px) {
    .focus-grid { grid-template-columns: 1fr; }
    .area-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .area-list { grid-template-columns: 1fr; }
    .service-facts {
        grid-auto-flow: row;
        gap: 18px;
    }
    .service-fact + .service-fact {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 18px;
    }
}

/* ---------------------------------------------------------------------------
 * Price list
 *
 * Rows rather than a table: a table with four columns cannot be read at
 * 390px, and this is the page a phone visitor came for.
 * ------------------------------------------------------------------------- */
.price-areas {
    max-width: 780px;
    margin: 0 auto;
}

.price-area + .price-area {
    margin-top: 48px;
}

.price-area h2 {
    font-size: 1.5rem;
    color: var(--teal-deep);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
    margin-bottom: 4px;
}

.price-list {
    list-style: none;
}

.price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 2px;
    border-bottom: 1px solid var(--line);
}

.price-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.price-name {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
}

a.price-name {
    color: var(--teal);
}

a.price-name:hover {
    color: var(--teal-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.price-warranty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--muted);
}

.price-warranty i {
    color: var(--teal);
}

.price-row-amount {
    text-align: right;
    white-space: nowrap;
}

.price-amount {
    display: block;
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold-text);
}

.price-unit {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
}

.price-note {
    max-width: 780px;
    margin: 56px auto 0;
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px 34px;
}

.price-note h3 {
    font-size: 1.2rem;
    color: var(--teal-deep);
    margin-bottom: 10px;
}

.price-note p {
    color: var(--muted);
    line-height: 1.7;
}

.price-note p + p {
    margin-top: 20px;
}

.price-extra {
    max-width: 780px;
    margin: 48px auto 0;
}

@media (max-width: 560px) {
    .price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .price-row-amount {
        text-align: left;
    }

    .price-amount,
    .price-unit {
        display: inline;
    }
}

/* ---------------------------------------------------------------------------
 * Trust bar
 * ------------------------------------------------------------------------- */
.trust-bar {
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    padding: 36px 0;
}

.trust-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 24px;
    text-align: center;
}

.trust-stat + .trust-stat {
    border-left: 1px solid var(--line);
}

.trust-value {
    display: block;
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--teal-deep);
}

.trust-label {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--muted);
}

@media (max-width: 680px) {
    .trust-container {
        grid-auto-flow: row;
        gap: 20px;
    }

    .trust-stat + .trust-stat {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-top: 20px;
    }
}

/* ---------------------------------------------------------------------------
 * Materials and technology
 * ------------------------------------------------------------------------- */
.materials {
    background: var(--teal-deep);
    color: var(--white);
    padding: 96px 0;
}

.materials-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
}

.materials .section-subtitle {
    color: var(--gold-light);
}

.materials h2 {
    color: var(--white);
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    margin-bottom: 18px;
}

.materials h2 span {
    color: #8FC5BF;
    font-style: italic;
    font-weight: 400;
}

.materials-lead {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.75;
}

.materials-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    list-style: none;
}

.materials-brands li {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r-control);
    padding: 8px 16px;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.materials-todo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px dashed var(--gold-light);
    border-radius: var(--r-control);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--gold-light);
}

.materials-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.materials-points li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r);
    padding: 20px 22px;
}

.materials-points i {
    color: #8FC5BF;
    font-size: 1.25rem;
    margin-top: 2px;
}

.materials-points h3 {
    color: var(--white);
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.materials-points p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
 * Process
 * ------------------------------------------------------------------------- */
.process {
    padding: 96px 0;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    counter-reset: none;
}

.process-step {
    position: relative;
    padding: 28px 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.process-number {
    display: block;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--gold-text);
    margin-bottom: 12px;
}

.process-step h3 {
    font-size: 1.1rem;
    color: var(--teal-deep);
    margin-bottom: 8px;
}

.process-step p {
    color: var(--muted);
    font-size: 0.92rem;
}

/* ---------------------------------------------------------------------------
 * Prices on the home page
 * ------------------------------------------------------------------------- */
.home-prices {
    background: var(--ground);
    padding: 96px 0;
}

.home-price-list {
    list-style: none;
    max-width: 820px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.home-price-list li + li {
    border-top: 1px solid var(--line);
}

.home-price-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 26px;
    transition: background 0.2s ease;
}

.home-price-list a:hover {
    background: var(--mist);
}

.home-price-name {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--teal-deep);
}

.home-price-amount {
    font-family: var(--sans);
    font-weight: 700;
    color: var(--gold-text);
    white-space: nowrap;
}

.home-price-amount small {
    font-weight: 500;
    color: var(--muted);
    margin-left: 6px;
}

/* ---------------------------------------------------------------------------
 * FAQ
 * ------------------------------------------------------------------------- */
.faq {
    padding: 96px 0;
}

.faq-inner {
    max-width: 820px;
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 2px;
    font-family: var(--display);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--teal-deep);
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--teal);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.faq-item[open] summary::after {
    transform: rotate(180deg);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
    border-radius: 4px;
}

.faq-answer {
    padding: 0 2px 24px;
    color: var(--muted);
    line-height: 1.75;
    max-width: 68ch;
}

/* ---------------------------------------------------------------------------
 * Closing call to action
 * ------------------------------------------------------------------------- */
.home-cta {
    background: linear-gradient(135deg, var(--teal-deep) 0%, #0B3236 100%);
    color: var(--white);
    padding: 88px 0;
}

.home-cta-inner {
    max-width: 700px;
    text-align: center;
}

.home-cta .section-subtitle {
    color: var(--gold-light);
}

.home-cta h2 {
    color: var(--white);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    margin-bottom: 14px;
}

.home-cta-lead {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 30px;
}

.home-cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 992px) {
    .materials-inner { grid-template-columns: 1fr; gap: 40px; }
    .process-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .materials,
    .process,
    .home-prices,
    .faq { padding: 56px 0; }
    .home-cta { padding: 56px 0; }
    .process-steps { grid-template-columns: 1fr; }
    .home-price-list a { flex-direction: column; gap: 6px; }
}

/* ---------------------------------------------------------------------------
 * Before and after
 *
 * The divider is driven by a --reveal custom property that the range input
 * sets. With no JavaScript the range still moves and the browser still
 * exposes it to the keyboard; the script only mirrors its value onto the
 * property and lets the whole surface be dragged.
 * ------------------------------------------------------------------------- */
.cases {
    padding: 96px 0;
    background: var(--ground);
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.case-compare {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--mist);
    line-height: 0;
    touch-action: pan-y;
    box-shadow: var(--shadow);
}

.case-img {
    display: block;
    width: 100%;
    height: auto;
}

.case-clip {
    position: absolute;
    inset: 0;
    width: var(--reveal, 50%);
    overflow: hidden;
}

.case-clip .case-img {
    /* The clipped copy must not shrink with its container, or the two halves
       would show different crops of the same mouth. */
    width: var(--frame-width, 100%);
    max-width: none;
}

.case-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--reveal, 50%);
    width: 2px;
    background: var(--white);
    box-shadow: 0 0 0 1px rgba(17, 41, 46, 0.2);
    pointer-events: none;
}

.case-handle::after {
    content: "\f337";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    color: var(--teal-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 2px 12px rgba(17, 41, 46, 0.25);
}

.case-tag {
    position: absolute;
    top: 14px;
    z-index: 2;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--r-control);
    line-height: 1;
    background: rgba(17, 41, 46, 0.78);
    color: var(--white);
}

.case-tag-before { left: 14px; }
.case-tag-after { right: 14px; }

/* The range is the control; it covers the image so the whole surface drags. */
.case-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.case-range:focus-visible {
    opacity: 1;
    outline: 3px solid var(--teal);
    outline-offset: -3px;
}

.case-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 48px;
    height: 100%;
    cursor: ew-resize;
}

.case-range::-moz-range-thumb {
    width: 48px;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: ew-resize;
}

.case h3 {
    margin-top: 22px;
    font-size: 1.25rem;
    color: var(--teal-deep);
}

.case-summary {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.95rem;
}

.case-quote {
    margin-top: 18px;
    padding-left: 20px;
    border-left: 3px solid var(--gold);
    font-style: italic;
    color: var(--ink);
}

.case-quote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 0.85rem;
    color: var(--muted);
}

@media (max-width: 860px) {
    .cases { padding: 56px 0; }
    .case-grid { grid-template-columns: 1fr; gap: 32px; }
}