/* =====================================================================
 *  DIZEN — CONTACT PAGE
 * =====================================================================
 *  Used by contact-us.php only.
 *
 *  Layout: a split screen. Left is a dark panel carrying the heading,
 *  quick-action tiles, hours and address; right is the enquiry form on
 *  white. Below that sit the FAQ and the map.
 *
 *  The site header sits IN FLOW (position: relative, ~80px) with a
 *  transparent background and white text, so the top-left of the page has
 *  to be dark or the logo disappears. The dark half of the split does that
 *  job — but only on the left, so `body.dzc-page` paints the whole strip
 *  dark and the white form panel covers its own half.
 *
 *  Everything is namespaced .dzc-*.
 * ===================================================================== */

:root {
    --dzc-accent: #d7b39a;
    /* Tan on white is 1.94:1 — link/label text uses the darker tone (5.4:1) */
    --dzc-accent-dk: #8a6238;
    --dzc-ink: #14161a;
    --dzc-ink-2: #4a5058;
    --dzc-ink-3: #7b828c;
    --dzc-line: #e7e5e1;
    --dzc-surface: #f7f6f4;
    --dzc-dark: #14161a;
    --dzc-err: #c0392b;
}

body.dzc-page,
body.dzc-page .page-wraper { background-color: var(--dzc-dark); }

/* ---------------------------------------------------------------------
 *  1. SPLIT SCREEN
 * ------------------------------------------------------------------ */

/* Height of the dark strip reserved for the site header. The theme is
 * inconsistent about whether the header takes flow space —
 * waypoints-sticky sometimes adds .is-fixed at scroll 0, which collapses
 * the sticky wrapper to 0px and floats the header over the page. When
 * that happens the white form panel runs under the transparent header and
 * swallows the white logo and nav, so the form column paints this strip
 * dark across its own half (the left half is dark anyway). */
:root { --dzc-headroom: 92px; }

.dzc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: #fff;
}

/* --- left: dark info panel --- */

.dzc-aside {
    position: relative;
    background: var(--dzc-dark);
    color: #fff;
    padding: calc(var(--dzc-headroom) + 8px) 60px 90px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dzc-aside::after {
    content: "";
    position: absolute;
    top: -200px;
    left: -160px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 179, 154, .17) 0%, rgba(215, 179, 154, 0) 68%);
    pointer-events: none;
}

.dzc-aside__inner {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin-left: auto;
    width: 100%;
    padding-right: 40px;
}

.dzc-crumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.dzc-crumbs a { color: rgba(255, 255, 255, .72); }
.dzc-crumbs a:hover { color: var(--dzc-accent); }
.dzc-crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, .28); }

.dzc-kicker {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(215, 179, 154, .5);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dzc-accent);
    margin-bottom: 22px;
}

.dzc-h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-weight: 700;
}

.dzc-lede {
    margin: 0 0 38px;
    font-size: 17px;
    line-height: 1.62;
    color: rgba(255, 255, 255, .7);
}

/* --- quick-action tiles --- */

.dzc-tiles {
    display: grid;
    gap: 12px;
    margin-bottom: 34px;
}

.dzc-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.dzc-tile:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(215, 179, 154, .55);
    color: #fff;
    transform: translateY(-2px);
}

.dzc-tile__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: rgba(215, 179, 154, .14);
    color: var(--dzc-accent);
    font-size: 17px;
}

.dzc-tile__label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 4px;
}

.dzc-tile__value { display: block; font-size: 15.5px; line-height: 1.45; }
.dzc-tile__arrow { margin-left: auto; color: rgba(255, 255, 255, .35); font-size: 15px; flex: none; }
.dzc-tile:hover .dzc-tile__arrow { color: var(--dzc-accent); }

/* --- hours / response time --- */

.dzc-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.dzc-fact h3 {
    margin: 0 0 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dzc-accent);
}

.dzc-fact p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .74); }
.dzc-fact p span { color: rgba(255, 255, 255, .45); }

/* ---------------------------------------------------------------------
 *  2. RIGHT: FORM PANEL
 * ------------------------------------------------------------------ */

.dzc-formwrap {
    position: relative;
    background: #fff;
    padding: calc(var(--dzc-headroom) + 20px) 60px 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Dark backing for the header strip on the white half — see --dzc-headroom */
.dzc-formwrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dzc-headroom);
    background: var(--dzc-dark);
}

.dzc-formwrap__inner { max-width: 560px; width: 100%; padding-left: 40px; }

.dzc-form-head { margin-bottom: 30px; }

.dzc-form-head h2 {
    margin: 0 0 8px;
    font-size: 27px;
    letter-spacing: -.015em;
    color: var(--dzc-ink);
}

.dzc-form-head p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dzc-ink-2); }

/* --- enquiry type pills --- */

.dzc-types { margin-bottom: 26px; }

.dzc-types > legend,
.dzc-types__label {
    display: block;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dzc-ink-3);
    margin-bottom: 12px;
    border: 0;
    width: auto;
}

.dzc-types__row { display: flex; flex-wrap: wrap; gap: 9px; }

/* The radio itself stays in the DOM for keyboard and no-JS use; the label
   is what gets painted. */
.dzc-types input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dzc-types label {
    display: inline-block;
    padding: 9px 17px;
    border: 1px solid var(--dzc-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dzc-ink-2);
    cursor: pointer;
    margin: 0;
    transition: all .2s ease;
}

/* The theme draws its own radio marker as a 16px circle on label::before
   (see the input[type=radio] + label rules in style.css). These pills are
   the control, so that marker has to go or it floats over the text. */
.dzc-types label::before,
.dzc-types label::after {
    content: none !important;
    display: none !important;
}

.dzc-types label:hover { border-color: var(--dzc-ink-3); color: var(--dzc-ink); }

.dzc-types input[type="radio"]:checked + label {
    background: var(--dzc-ink);
    border-color: var(--dzc-ink);
    color: #fff;
}

.dzc-types input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--dzc-accent-dk);
    outline-offset: 2px;
}

/* --- floating label fields --- */

.dzc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dzc-field--full { grid-column: 1 / -1; }

.dzc-field { position: relative; }

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

.dzc-field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }

.dzc-field label {
    position: absolute;
    left: 17px;
    top: 17px;
    margin: 0;
    font-size: 15px;
    color: var(--dzc-ink-3);
    pointer-events: none;
    transition: transform .18s ease, font-size .18s ease, color .18s ease;
    transform-origin: left top;
    background: transparent;
}

/* :placeholder-shown means "empty" here — each input carries a single
   space as its placeholder so the selector is reliable across browsers. */
.dzc-field input:focus + label,
.dzc-field textarea:focus + label,
.dzc-field input:not(:placeholder-shown) + label,
.dzc-field textarea:not(:placeholder-shown) + label {
    transform: translateY(-9px) scale(.74);
    color: var(--dzc-ink-3);
}

.dzc-field input:focus,
.dzc-field textarea:focus {
    border-color: var(--dzc-accent);
    box-shadow: 0 0 0 3px rgba(215, 179, 154, .25);
    outline: none;
}

.dzc-field .required { color: var(--dzc-accent-dk); }

/* --- inline validation --- */

.dzc-error {
    display: none;
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--dzc-err);
}

.dzc-field.has-error input,
.dzc-field.has-error textarea { border-color: var(--dzc-err); }

.dzc-field.has-error input:focus,
.dzc-field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .16); }

.dzc-field.has-error .dzc-error { display: block; }

/* --- submit --- */

.dzc-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.dzc-submit {
    padding: 16px 40px;
    border: 0;
    border-radius: 5px;
    background: var(--dzc-ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}

.dzc-submit:hover { background: var(--dzc-accent-dk); }
.dzc-submit[disabled] { opacity: .55; cursor: default; background: var(--dzc-ink); }

.dzc-privacy { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dzc-ink-3); }

/* ---------------------------------------------------------------------
 *  3. FAQ
 * ------------------------------------------------------------------ */

.dzc-section { padding: 84px 0; background: #fff; }
.dzc-section--tint { background: var(--dzc-surface); border-top: 1px solid var(--dzc-line); }

.dzc-shell { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

.dzc-sechead { max-width: 620px; margin: 0 auto 40px; text-align: center; }

.dzc-sechead h2 {
    margin: 0 0 10px;
    font-size: 30px;
    letter-spacing: -.015em;
    color: var(--dzc-ink);
}

.dzc-sechead p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--dzc-ink-2); }

.dzc-faq { max-width: 820px; margin: 0 auto; }

.dzc-faq__item {
    border: 1px solid var(--dzc-line);
    border-radius: 6px;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
}

.dzc-faq__q {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 20px 22px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--dzc-ink);
    cursor: pointer;
}

.dzc-faq__q:hover { color: var(--dzc-accent-dk); }

.dzc-faq__q i {
    margin-left: auto;
    flex: none;
    font-size: 14px;
    color: var(--dzc-accent-dk);
    transition: transform .25s ease;
}

.dzc-faq__item.is-open .dzc-faq__q i { transform: rotate(180deg); }

/* Collapsed by default so the page is usable before JS runs; the script
   swaps to a measured max-height for the animation. */
.dzc-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.dzc-faq__a p {
    margin: 0;
    padding: 0 22px 22px;
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--dzc-ink-2);
}

/* ---------------------------------------------------------------------
 *  4. MAP
 * ------------------------------------------------------------------ */

.dzc-map { position: relative; background: var(--dzc-dark); }

.dzc-map iframe {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    filter: grayscale(1) contrast(1.05);
    transition: filter .4s ease;
}

.dzc-map:hover iframe { filter: none; }

.dzc-map__card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 1160px;
    width: 100%;
    padding: 0 24px;
    pointer-events: none;
}

.dzc-map__inner {
    pointer-events: auto;
    max-width: 340px;
    padding: 28px;
    border-radius: 8px;
    background: rgba(20, 22, 26, .92);
    backdrop-filter: blur(8px);
    color: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.dzc-map__inner h3 { margin: 0 0 10px; font-size: 19px; color: #fff; }
.dzc-map__inner p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); }

.dzc-map__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dzc-accent);
}

.dzc-map__link:hover { color: #fff; }

/* ---------------------------------------------------------------------
 *  5. RESPONSIVE
 * ------------------------------------------------------------------ */

@media only screen and (max-width: 1199px) {
    .dzc-aside { padding: calc(var(--dzc-headroom) + 6px) 40px 64px; }
    .dzc-formwrap { padding: calc(var(--dzc-headroom) + 16px) 40px 72px; }
    .dzc-aside__inner { padding-right: 20px; }
    .dzc-formwrap__inner { padding-left: 20px; }
}

@media only screen and (max-width: 991px) {
    /* Stack: dark panel on top keeps the header strip dark, which is the
       whole reason the dark half is on the left to begin with. */
    .dzc-split { grid-template-columns: minmax(0, 1fr); }
    .dzc-aside { padding: calc(var(--dzc-headroom) + 4px) 30px 56px; }
    /* Stacked: the dark panel is now above the form, so the form no longer
       touches the header and doesn't need its own dark strip. */
    .dzc-formwrap { padding: 48px 30px 64px; }
    .dzc-formwrap::before { display: none; }
    .dzc-aside__inner,
    .dzc-formwrap__inner { max-width: none; margin: 0; padding: 0; }
    .dzc-section { padding: 60px 0; }
    .dzc-map iframe { height: 400px; }
    .dzc-map__card { position: static; transform: none; padding: 0; }
    .dzc-map__inner {
        max-width: none;
        border-radius: 0;
        background: var(--dzc-dark);
        backdrop-filter: none;
        box-shadow: none;
        padding: 26px 30px;
    }
}

@media only screen and (max-width: 767px) {
    .dzc-aside { padding: calc(var(--dzc-headroom) + 2px) 18px 44px; }
    .dzc-formwrap { padding: 40px 18px 52px; }
    .dzc-shell { padding: 0 18px; }
    .dzc-fields { grid-template-columns: minmax(0, 1fr); }
    .dzc-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .dzc-sechead h2 { font-size: 25px; }
    .dzc-faq__q { font-size: 15.5px; padding: 17px 18px; }
    .dzc-faq__a p { padding: 0 18px 18px; }
    .dzc-map iframe { height: 320px; }
    .dzc-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dzc-tile,
    .dzc-faq__a,
    .dzc-faq__q i,
    .dzc-map iframe { transition: none !important; }
}