/* ==========================================================================
   Extended site styles — loaded after style.min.css
   Scope: services catalogue, service detail page, contact page, dark footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Brand palette — taken from the İDEAL İNŞAAT logo
      navy #2b2d83 (wordmark) + orange #e8963c (dot and underline)
   -------------------------------------------------------------------------- */

:root {
    --brand-navy: #2b2d83;
    --brand-navy-deep: #212357;
    --brand-navy-soft: #2a2c6b;
    --brand-orange: #e8963c;
    --brand-orange-dark: #d07f26;

    /* Override the base stylesheet's tokens so every component follows the logo. */
    --accent: var(--brand-orange);
    --orange: var(--brand-orange);
    --ink: var(--brand-navy);
    --dark: var(--brand-navy-deep);

    --ink-deep: var(--brand-navy-deep);
    --ink-soft: var(--brand-navy-soft);
    --footer-line: rgba(255, 255, 255, .12);

    /* The stock palette reads washed out: body copy and rules are lifted a few
       steps and the neutral background gets a slight navy cast. */
    --text: #3b4150;
    --line: #d5d9e3;
    --bg-alt: #eef1f7;
    --paper: #eef1f7;
    --shadow: 0 1px 3px rgba(33, 35, 87, .08);
}

body { color: var(--text); }

p, li, .detail-copy p { color: var(--text); }

/* Section rhythm: alternate white and tinted bands instead of near-identical greys. */
.section.paper { background: var(--bg-alt); }

/* Give every section heading an orange rule so the pages read less flat. */
.section-head .eyebrow,
.page-hero .eyebrow,
.contact-intro .eyebrow {
    position: relative;
    display: inline-block;
    padding-left: 44px;
    color: var(--brand-orange);
    font-weight: 700;
}

.section-head .eyebrow::before,
.page-hero .eyebrow::before,
.contact-intro .eyebrow::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 32px;
    height: 3px;
    background: var(--brand-orange);
    content: '';
}

.page-hero {
    background: linear-gradient(180deg, #e9edf6 0%, var(--bg-alt) 100%);
    border-bottom: 1px solid var(--line);
}

.page-hero h1 { color: var(--brand-navy); }

/* Stats and figures carry the accent so the home page has a focal point. */
.hero-stats strong,
.stats strong,
.premium-stats strong,
.project-metrics strong { color: var(--brand-orange); }

/* Cards: firmer borders and a warmer hover than the original flat treatment. */
.service-tile, .project-tile, .news-card, .contact-info-list li, .contact-form-card {
    border-color: var(--line);
}

.service-tile:hover, .project-tile:hover {
    border-color: var(--brand-orange);
    box-shadow: 0 16px 38px rgba(33, 35, 87, .14);
}

.service-tile-number { background: var(--brand-orange); }
.project-tile-tag { background: rgba(33, 35, 87, .82); }
.project-tile-meta { color: var(--brand-orange); }

.service-side a.active { border-left-color: var(--brand-orange); }

.contact-card-icon { background: rgba(232, 150, 60, .14); color: var(--brand-orange-dark); }

.project-filter-bar a.active { background: var(--brand-orange); border-color: var(--brand-orange); }
.project-filter-bar a:hover { border-color: var(--brand-orange); }

/* Hero: a navy wash over the photograph gives the brand colour real presence
   and lifts the white type off the background.
   The base stylesheet redefines .hero several times (the last rule collapses it
   to a 520px white box), so the geometry is restated here in full. */
.hero {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 620px !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    color: #fff !important;
    background-color: var(--brand-navy-deep) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    /* The photograph itself is applied inline so it can be swapped from the
       admin panel without touching the stylesheet. */
}

.hero .container { width: min(calc(100% - 80px), var(--max)); margin: 0 auto; }

@media (max-width: 680px) {
    .hero { min-height: 520px !important; }
    .hero .container { width: calc(100% - 40px); }
}

/* The base stylesheet fights pseudo-element overlays with !important, so the
   scrim is painted as an extra background layer on .hero itself (applied inline
   together with the photograph). Both hero pseudo-elements stay disabled. */
.hero::after,
.hero::before { display: none !important; content: none !important; }

/* Keep every element of the hero inside the darkened part of the photograph —
   on wide screens the copy would otherwise run onto the bright right-hand side. */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 730px !important;
}

/* Hero typography — larger and tighter so the statement carries the page. */
.hero h1 {
    max-width: 15ch !important;
    margin: 18px 0 0 !important;
    font-size: clamp(2.4rem, 4.4vw, 4rem) !important;
    font-weight: 600 !important;
    line-height: 1.06 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
}

.hero-content > p {
    max-width: 44ch !important;
    margin-top: 20px !important;
    color: rgba(255, 255, 255, .88) !important;
    font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
    line-height: 1.65 !important;
}

.hero-actions { margin-top: 34px; gap: 14px; }

.hero .btn.accent {
    height: 52px;
    padding: 0 28px;
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(232, 150, 60, .32);
    font-size: .92rem;
    white-space: nowrap;
}

.hero .hero-actions .text-link,
.hero .hero-actions > a:not(.btn) {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 26px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 6px;
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.hero .hero-actions > a:not(.btn):hover {
    border-color: var(--brand-orange);
    background: rgba(232, 150, 60, .16);
    color: #fff;
}

/* Stats sit on their own strip so they stay legible over the photograph. */
.hero-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-top: 44px !important;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    max-width: 100% !important;
}

.hero-stats div {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding-right: 14px;
}

.hero-stats div + div { padding-left: 30px; }

.hero-stats div + div::before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, .18);
    content: '';
}

.hero-stats strong {
    font-size: clamp(1.7rem, 2.4vw, 2.2rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--brand-orange) !important;
}

.hero-stats span {
    max-width: none !important;
    margin-top: 8px;
    color: rgba(255, 255, 255, .70) !important;
    font-size: .74rem !important;
    line-height: 1.4 !important;
    overflow-wrap: normal !important;
}

.hero-side-label {
    color: rgba(255, 255, 255, .38) !important;
    letter-spacing: .3em;
    font-size: .64rem;
}

@media (max-width: 900px) {
    .hero-stats { flex-wrap: wrap; row-gap: 24px; }
    .hero-stats div + div::before { display: none; }
    .hero-stats div, .hero-stats div + div { padding: 0 24px 0 0; }
}

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

.hero h1, .hero-content > p, .hero-stats strong, .hero-stats span { color: #fff; }
.hero .eyebrow { color: var(--brand-orange); }
.hero-stats span { color: rgba(255, 255, 255, .72); }
.hero-stats strong { color: var(--brand-orange); }

.hero .btn.accent { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.hero .btn.accent:hover { background: var(--brand-orange-dark); border-color: var(--brand-orange-dark); }
.hero .text-link { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.hero .text-link:hover { color: var(--brand-orange); }

/* The sticky header sits on the hero; keep it readable once scrolled. */
.site-header.scrolled {
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--line);
}

/* Headings and dark surfaces carry the navy; the orange stays an accent. */
h1, h2, h3 { color: var(--brand-navy); }

.logo-mark {
    background: var(--brand-navy);
    color: var(--brand-orange);
}

.header-cta { background: var(--brand-navy); color: #fff; }
.header-cta:hover { background: var(--brand-navy-soft); }

.btn.accent {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
}

.btn.accent:hover { background: var(--brand-orange-dark); border-color: var(--brand-orange-dark); }

.section.dark { background: var(--brand-navy-deep); }

/* Only the section's own heading turns white — headings inside light cards that
   sit on the dark band must keep the navy, or they vanish. */
.section.dark > .container > h2,
.section.dark .section-head h2,
.section.dark .section-head h3,
.section.dark .section-head .eyebrow { color: #fff; }
.section.dark .section-head .eyebrow { color: var(--brand-orange); }
.section.dark .section-link { color: #fff; }

.eyebrow { color: var(--brand-orange); }

.breadcrumbs a:hover, .text-link { color: var(--brand-orange); }

.nav a.active, .nav a:hover { color: var(--brand-orange); }

/* Uploaded logo replaces the lettermark in both the header and the footer. */
.logo-image {
    display: block;
    width: auto;
    max-width: 230px;
    height: 42px;
    object-fit: contain;
}

.logo-image-footer { max-width: 210px; height: 46px; }

@media (max-width: 680px) {
    .logo-image { max-width: 160px; height: 36px; }
}

/* --------------------------------------------------------------------------
   1. Services catalogue — three image cards per row
   -------------------------------------------------------------------------- */

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

.service-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.service-tile:hover,
.service-tile:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 14px 34px rgba(15, 18, 22, .10);
    transform: translateY(-3px);
}

.service-tile-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--bg-alt);
}

.service-tile-media img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform .55s ease;
}

.service-tile:hover .service-tile-media img {
    transform: scale(1.05);
}

.service-tile-number {
    position: absolute;
    top: 14px;
    left: 14px;
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.service-tile-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 24px 24px 26px;
}

.service-tile-body h2,
.service-tile-body h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.35;
}

.service-tile-body p {
    margin: 0;
    flex: 1;
    color: var(--text);
    font-size: .9rem;
    line-height: 1.6;
}

.service-tile-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 600;
    transition: gap .25s ease;
}

.service-tile:hover .service-tile-more {
    gap: 12px;
}

.service-catalog-intro {
    max-width: 720px;
    margin-bottom: 44px;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.7;
}

@media (max-width: 1020px) {
    .service-catalog { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 680px) {
    .service-catalog { grid-template-columns: 1fr; gap: 18px; }
    .service-tile-body { padding: 20px; }
}

/* --------------------------------------------------------------------------
   2. Service detail page
   -------------------------------------------------------------------------- */

.service-hero {
    position: relative;
    overflow: hidden;
    background: var(--ink-deep);
    color: #fff;
}

.service-hero-media {
    position: absolute;
    inset: 0;
}

.service-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .34;
}

.service-hero-inner {
    position: relative;
    padding: 118px 0 62px;
}

.service-hero .breadcrumbs,
.service-hero .breadcrumbs a,
.service-hero .breadcrumbs span {
    color: rgba(255, 255, 255, .66);
}

.service-hero .breadcrumbs a:hover { color: #fff; }

.service-hero .eyebrow { color: var(--accent); }

.service-hero h1 {
    max-width: 860px;
    margin: 14px 0 0;
    color: #fff;
}

.service-hero-lead {
    max-width: 720px;
    margin-top: 18px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    line-height: 1.65;
}

.service-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.service-hero-meta span {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    font-size: .78rem;
    letter-spacing: .02em;
}

.service-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 56px;
    align-items: start;
}

.service-side {
    position: sticky;
    top: 96px;
}

.service-side-title {
    margin-bottom: 14px;
    color: var(--ink);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.service-side a {
    display: block;
    padding: 11px 14px;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    color: var(--text);
    font-size: .88rem;
    line-height: 1.4;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.service-side a:hover {
    background: var(--bg-alt);
    color: var(--ink);
}

.service-side a.active {
    border-left-color: var(--accent);
    background: var(--bg-alt);
    color: var(--ink);
    font-weight: 600;
}

.service-article > section + section {
    margin-top: 46px;
    padding-top: 46px;
    border-top: 1px solid var(--line);
}

.service-article h2 {
    margin: 0 0 16px;
    color: var(--ink);
    font-size: clamp(1.25rem, 1.9vw, 1.6rem);
}

.service-article p { color: var(--text); font-size: .97rem; line-height: 1.75; }
.service-article ul, .service-article ol { margin: 14px 0 0; padding-left: 20px; color: var(--text); }
.service-article li { margin-bottom: 8px; font-size: .95rem; line-height: 1.65; }
.service-article table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: .9rem; }
.service-article th, .service-article td { padding: 11px 14px; border: 1px solid var(--line); text-align: left; }
.service-article th { background: var(--bg-alt); font-weight: 600; }
.service-article blockquote {
    margin: 22px 0 0;
    padding: 20px 24px;
    border-left: 3px solid var(--accent);
    background: var(--bg-alt);
    color: var(--ink);
    font-size: 1rem;
}

.service-lead-copy {
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.65;
}

.service-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 46px;
    padding: 30px 32px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-alt);
}

.service-cta strong { display: block; color: var(--ink); font-size: 1.1rem; }
.service-cta span { display: block; margin-top: 6px; color: var(--text); font-size: .9rem; }

.service-cta .btn,
.service-cta .btn.accent {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.service-cta .btn:hover,
.service-cta .btn.accent:hover { border-color: #b96f00; background: #b96f00; }

.service-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.service-related a {
    display: block;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}

.service-related a:hover { border-color: var(--accent); background: var(--bg-alt); }
.service-related small { display: block; margin-bottom: 8px; color: var(--accent); font-size: .72rem; font-weight: 700; }

@media (max-width: 1020px) {
    .service-layout { grid-template-columns: 1fr; gap: 40px; }
    .service-side { position: static; }
    .service-side a { display: inline-block; margin: 0 6px 6px 0; border: 1px solid var(--line); border-radius: 999px; }
    .service-side a.active { border-color: var(--accent); }
    .service-related { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .service-hero-inner { padding: 100px 0 46px; }
    .service-related { grid-template-columns: 1fr; }
    .service-cta { padding: 24px; }
}

/* --------------------------------------------------------------------------
   3. Projects catalogue — readable cards + filter chips
   -------------------------------------------------------------------------- */

.project-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    padding: 0;
    border: 0;
}

.project-filter-bar a {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: .86rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.project-filter-bar a:hover {
    border-color: var(--accent);
    color: var(--ink);
}

.project-filter-bar a.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

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

.project-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.project-tile:hover,
.project-tile:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 14px 34px rgba(15, 18, 22, .10);
    transform: translateY(-3px);
}

.project-tile-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--bg-alt);
}

.project-tile-media img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform .55s ease;
}

.project-tile:hover .project-tile-media img { transform: scale(1.05); }

.project-tile-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(15, 18, 22, .78);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    backdrop-filter: blur(4px);
}

.project-tile-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 24px 24px 26px;
}

.project-tile-meta {
    color: var(--accent);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.project-tile-body h2,
.project-tile-body h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.35;
}

.project-tile-body p {
    margin: 0;
    flex: 1;
    color: var(--text);
    font-size: .9rem;
    line-height: 1.6;
}

.project-tile-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 600;
    transition: gap .25s ease;
}

.project-tile:hover .project-tile-more { gap: 12px; }

@media (max-width: 1020px) {
    .project-catalog { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 680px) {
    .project-catalog { grid-template-columns: 1fr; gap: 18px; }
    .project-tile-body { padding: 20px; }
}

/* --------------------------------------------------------------------------
   4. Contact page
   -------------------------------------------------------------------------- */

.contact-shell { padding: 72px 0 0; }

.contact-columns {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
    align-items: start;
}

.contact-intro h2 {
    margin: 12px 0 14px;
    color: var(--ink);
    font-size: clamp(1.5rem, 2.3vw, 2.1rem);
}

.contact-intro > p {
    max-width: 460px;
    color: var(--text);
    font-size: .98rem;
    line-height: 1.7;
}

.contact-info-list {
    display: grid;
    gap: 14px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.contact-info-list li {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-info-list li:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(15, 18, 22, .07);
}

.contact-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(217, 130, 0, .10);
    color: var(--accent);
    font-size: 1.05rem;
}

.contact-card-body small {
    display: block;
    margin-bottom: 5px;
    color: #9aa0a6;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.contact-card-body strong,
.contact-card-body a,
.contact-card-body span {
    color: var(--ink);
    font-size: .97rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.5;
}

.contact-card-body a:hover { color: var(--accent); }

.contact-form-card {
    padding: 40px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 18, 22, .06);
}

.contact-form-card h2 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 1.3rem;
}

.contact-form-card > p {
    margin: 0 0 28px;
    color: var(--text);
    font-size: .92rem;
    line-height: 1.6;
}

.contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-field { display: flex; flex-direction: column; }
.contact-field.is-wide { grid-column: 1 / -1; }

.contact-field label {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: .84rem;
    font-weight: 600;
}

.contact-field label span { color: var(--accent); }

.contact-field input,
.contact-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: .93rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-field textarea { min-height: 140px; resize: vertical; }

.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(217, 130, 0, .14);
}

.contact-field .field-error { margin-top: 6px; color: #b91c1c; font-size: .8rem; }

.contact-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 26px;
}

.contact-submit .btn,
.contact-submit .btn.accent {
    min-width: 210px;
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.contact-submit .btn:hover,
.contact-submit .btn.accent:hover { border-color: #b96f00; background: #b96f00; }

.contact-submit small { max-width: 320px; color: #9aa0a6; font-size: .78rem; line-height: 1.5; }

.contact-success {
    display: flex;
    gap: 16px;
    padding: 26px 28px;
    border: 1px solid rgba(16, 185, 129, .35);
    border-radius: 14px;
    background: rgba(16, 185, 129, .07);
}

.contact-success strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 1.05rem; }
.contact-success span { color: var(--text); font-size: .93rem; line-height: 1.6; }

.contact-map-band { margin-top: 72px; }

.contact-map-band iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    filter: grayscale(1) contrast(.92);
}

@media (max-width: 1020px) {
    .contact-columns { grid-template-columns: 1fr; gap: 40px; }
    .contact-form-card { padding: 30px; }
}

@media (max-width: 680px) {
    .contact-shell { padding-top: 48px; }
    .contact-fields { grid-template-columns: 1fr; gap: 16px; }
    .contact-form-card { padding: 24px; }
    .contact-map-band iframe { height: 320px; }
}

/* --------------------------------------------------------------------------
   5. Prices, gallery, testimonials, advantages
   -------------------------------------------------------------------------- */

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

.price-group-title {
    margin: 0 0 18px;
    color: var(--brand-navy);
    font-size: 1.2rem;
    font-weight: 600;
}

.price-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.price-table { width: 100%; border-collapse: collapse; font-size: .94rem; }

.price-table thead th {
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-alt);
    color: var(--brand-navy);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: left;
    text-transform: uppercase;
}

.price-table tbody tr + tr td { border-top: 1px solid var(--line); }
.price-table td { padding: 16px 22px; color: var(--text); vertical-align: top; }
.price-table td strong { display: block; color: var(--brand-navy); font-weight: 600; }
.price-table td small { display: block; margin-top: 5px; color: #8b90a0; font-size: .8rem; }
.price-table tbody tr:hover { background: rgba(232, 150, 60, .05); }

.price-value { color: var(--brand-orange) !important; font-weight: 700; white-space: nowrap; }

.price-empty {
    padding: 48px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

.price-empty strong { display: block; color: var(--brand-navy); font-size: 1.25rem; }
.price-empty p { max-width: 560px; margin: 12px auto 24px; color: var(--text); }

.price-note {
    display: flex;
    gap: 14px;
    margin-top: 32px;
    padding: 18px 22px;
    border-left: 3px solid var(--brand-orange);
    border-radius: 0 10px 10px 0;
    background: rgba(232, 150, 60, .08);
}

.price-note p { margin: 0; color: var(--text); font-size: .88rem; line-height: 1.6; }

.price-note-icon {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-orange);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

/* News cards take uploaded photographs too — same cropping guarantee. */
.news-card img,
.home-news .news-card img {
    width: 100% !important;
    height: 220px !important;
    max-height: 220px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
}

@media (max-width: 600px) {
    .news-card img, .home-news .news-card img { height: 200px !important; max-height: 200px !important; }
}

/* Gallery ------------------------------------------------------------------ */

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

.gallery-cell {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--bg-alt);
}

/* Uploaded photographs come in every shape — portrait, panorama, phone shots.
   A fixed height with cover cropping keeps the grid even whatever is uploaded. */
.gallery-cell img {
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    max-height: 300px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform .55s ease;
}

@media (max-width: 900px) { .gallery-cell img { height: 260px !important; max-height: 260px !important; } }
@media (max-width: 600px) { .gallery-cell img { height: 240px !important; max-height: 240px !important; } }

.gallery-cell:hover img { transform: scale(1.05); }

.gallery-cell figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 34px 20px 18px;
    background: linear-gradient(180deg, rgba(15, 17, 46, 0) 0%, rgba(15, 17, 46, .86) 100%);
    color: #fff;
}

.gallery-cell figcaption strong { display: block; font-size: .96rem; font-weight: 600; }
.gallery-cell figcaption span { display: block; margin-top: 3px; color: rgba(255, 255, 255, .74); font-size: .8rem; }

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

/* Testimonials ------------------------------------------------------------- */

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

.testimonial-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.testimonial-rating { margin-bottom: 14px; color: var(--line); font-size: 1rem; letter-spacing: 2px; }
.testimonial-rating .on { color: var(--brand-orange); }

.testimonial-card blockquote {
    flex: 1;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font-size: .96rem;
    font-style: normal;
    line-height: 1.7;
}

.testimonial-card blockquote::before { content: '«'; }
.testimonial-card blockquote::after { content: '»'; }

.testimonial-card figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.testimonial-card figcaption img,
.testimonial-initial {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--brand-navy);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

.testimonial-card figcaption strong { display: block; color: var(--brand-navy); font-size: .94rem; }
.testimonial-card figcaption small { display: block; margin-top: 2px; color: #8b90a0; font-size: .8rem; }

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

/* Advantages (home) -------------------------------------------------------- */

.advantage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.advantage-card {
    padding: 30px 26px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.advantage-card:hover {
    border-color: var(--brand-orange);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(33, 35, 87, .10);
}

.advantage-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: rgba(232, 150, 60, .14);
    color: var(--brand-orange-dark);
    font-size: 1.25rem;
}

.advantage-card h3 { margin: 0 0 10px; color: var(--brand-navy); font-size: 1.02rem; font-weight: 600; }
.advantage-card p { margin: 0; color: var(--text); font-size: .89rem; line-height: 1.6; }

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

/* Home order form ---------------------------------------------------------- */

.home-order { background: var(--brand-navy-deep); }

.home-order-inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
}

.home-order-copy h2 { color: #fff !important; margin: 14px 0 16px; }
.home-order-copy p { max-width: 46ch; color: rgba(255, 255, 255, .74); font-size: 1rem; line-height: 1.7; }

.home-order-points { margin: 26px 0 0; padding: 0; list-style: none; }
.home-order-points li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 28px;
    color: rgba(255, 255, 255, .84);
    font-size: .93rem;
}
.home-order-points li::before {
    position: absolute;
    left: 0;
    color: var(--brand-orange);
    content: '✓';
    font-weight: 700;
}

.home-order-form {
    padding: 34px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(10, 12, 40, .34);
}

.home-order-form h3 { margin: 0 0 6px; color: var(--brand-navy); font-size: 1.15rem; }
.home-order-form > p { margin: 0 0 22px; color: var(--text); font-size: .88rem; }

@media (max-width: 1020px) {
    .home-order-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* WhatsApp ----------------------------------------------------------------- */

.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
    color: #fff;
    transition: transform .2s ease;
}

.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }

@media (max-width: 600px) {
    .whatsapp-float { right: 16px; bottom: 16px; width: 50px; height: 50px; }
    .whatsapp-float svg { width: 25px; height: 25px; }
}

/* --------------------------------------------------------------------------
   6. Footer — dark band so the page does not end on flat white
   -------------------------------------------------------------------------- */

footer.site-footer {
    margin-top: 0;
    padding: 72px 0 28px;
    border-top: 0;
    background: var(--ink-deep);
    color: rgba(255, 255, 255, .70);
}

footer.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding-bottom: 44px;
}

footer.site-footer .footer-brand p {
    max-width: 340px;
    margin-top: 20px;
    color: rgba(255, 255, 255, .60);
    font-size: .9rem;
    line-height: 1.7;
}

footer.site-footer .logo,
footer.site-footer .logo span { color: #fff; }
footer.site-footer .logo small { color: rgba(255, 255, 255, .45); }

footer.site-footer .logo-mark {
    background: var(--accent);
    color: #fff;
}

footer.site-footer h3 {
    margin-bottom: 18px;
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

footer.site-footer a,
footer.site-footer span {
    color: rgba(255, 255, 255, .68);
    font-size: .9rem;
}

footer.site-footer .footer-grid > div > a {
    display: block;
    margin-bottom: 11px;
    text-decoration: none;
    transition: color .2s ease;
}

footer.site-footer .footer-grid > div > a:hover { color: var(--accent); }
footer.site-footer .footer-grid > div > span { display: block; line-height: 1.6; }

footer.site-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--footer-line);
}

footer.site-footer .footer-bottom,
footer.site-footer .footer-bottom span,
footer.site-footer .footer-bottom a {
    color: rgba(255, 255, 255, .42);
    font-size: .78rem;
}

footer.site-footer .footer-bottom a:hover { color: var(--accent); }

/* The call-to-action band sits directly above the footer; a slightly lighter
   ink keeps the two dark blocks visually distinct. */
.cta {
    background: var(--ink-soft);
    color: #fff;
}

.cta h2 { color: #fff; }
.cta .eyebrow { color: var(--accent); }

.cta .dark-btn {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.cta .dark-btn:hover { border-color: #b96f00; background: #b96f00; }

@media (max-width: 1020px) {
    footer.site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 600px) {
    footer.site-footer { padding: 52px 0 24px; }
    footer.site-footer .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}