/* =========================================================
   DESIGNALOT — CONTACT / PROJECT INTAKE PAGE
========================================================= */

.da-contact-page {
    background: #050506;
}

.da-contact-page .da-button--nav[aria-current="page"] {
    color: #fff;
    border-color: rgba(255,77,82,.72);
    box-shadow:
        inset 0 1px rgba(255,255,255,.10),
        0 0 12px rgba(255,45,50,.26),
        0 0 28px rgba(206,15,19,.13);
}

.da-contact-main {
    min-height: calc(100vh - var(--da-navbar-height));
    background:
        radial-gradient(circle at 82% 8%, rgba(206,15,19,.075), transparent 29%),
        linear-gradient(180deg, #060607 0%, #09090b 56%, #050506 100%);
}

/* =========================================================
   HERO
========================================================= */

.da-contact-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.da-contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 78% 43%, rgba(224,32,36,.12), transparent 32%),
        var(--da-hex-texture);
    background-size: auto, 64px auto;
    background-repeat: no-repeat, repeat;
    opacity: .29;
    mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.18) 39%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.18) 39%, #000 100%);
}

.da-contact-hero__grid {
    position: relative;
    z-index: 1;
    min-height: 680px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(410px, .78fr);
    gap: clamp(54px, 7vw, 94px);
    align-items: center;
    padding-block: clamp(88px, 10vw, 136px);
}

.da-contact-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    color: #707077;
    font-family: Consolas, "Courier New", monospace;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.da-contact-breadcrumbs a {
    color: #9b9ba1;
    text-decoration: none;
}

.da-contact-breadcrumbs a:hover,
.da-contact-breadcrumbs a:focus-visible {
    color: #ff6267;
}

.da-contact-hero h1 {
    margin-top: 12px;
    color: #f3f3f4;
    font-size: clamp(3.4rem, 8vw, 7.6rem);
    line-height: .86;
    letter-spacing: -.067em;
    text-transform: uppercase;
}

.da-contact-hero h1 span {
    color: #ff4d52;
    text-shadow: 0 0 28px rgba(206,15,19,.11);
}

.da-contact-hero__lead {
    max-width: 680px;
    margin-top: 28px;
    color: #a1a1a7;
    font-size: clamp(1rem, 1.55vw, 1.16rem);
    line-height: 1.75;
}

.da-contact-hero__copy > .da-button {
    margin-top: 33px;
}

/* Intake monitor */
.da-intake-monitor {
    width: 100%;
    max-width: 530px;
    justify-self: end;
}

.da-intake-monitor__bezel {
    padding: 10px;
    background:
        linear-gradient(145deg, #4c4d52, #17181b 10%, #07080a 52%, #222327 90%, #48494e);
    border: 1px solid rgba(255,255,255,.21);
    border-radius: 16px;
    box-shadow:
        inset 0 1px rgba(255,255,255,.19),
        inset 0 -2px 8px rgba(0,0,0,.55),
        0 26px 60px rgba(0,0,0,.38);
}

.da-intake-monitor__header,
.da-intake-monitor__footer {
    min-height: 39px;
    padding-inline: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #77777d;
    font-family: Consolas, "Courier New", monospace;
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .095em;
}

.da-intake-monitor__header strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #aab0aa;
}

.da-intake-monitor__header i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #67d66d;
    box-shadow:
        0 0 6px rgba(103,214,109,.76),
        0 0 15px rgba(103,214,109,.22);
}

.da-intake-monitor__footer {
    min-height: 34px;
    color: #5f5f65;
    font-size: .53rem;
}

.da-intake-monitor__screen {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    padding: 26px;
    background:
        radial-gradient(circle at 78% 18%, rgba(97,190,107,.04), transparent 32%),
        #030404;
    border: 1px solid #202522;
    border-radius: 8px;
    box-shadow: inset 0 0 40px rgba(0,0,0,.82);
}

.da-intake-monitor__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .08;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(255,255,255,.08) 0,
        rgba(255,255,255,.08) 1px,
        transparent 1px,
        transparent 4px
    );
}

.da-intake-monitor__title,
.da-intake-monitor dl,
.da-intake-monitor__message {
    position: relative;
    z-index: 1;
}

.da-intake-monitor__title {
    padding-bottom: 17px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(103,214,109,.13);
    font-family: Consolas, "Courier New", monospace;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.da-intake-monitor__title span { color: #6f7771; }
.da-intake-monitor__title strong { color: #67d66d; }

.da-intake-monitor dl {
    margin-top: 10px;
}

.da-intake-monitor dl div {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(103,214,109,.075);
}

.da-intake-monitor dt,
.da-intake-monitor dd {
    font-family: Consolas, "Courier New", monospace;
    font-size: .62rem;
    font-weight: 700;
}

.da-intake-monitor dt { color: #626a64; }
.da-intake-monitor dd { color: #aac4ad; text-transform: uppercase; }

.da-intake-monitor__message {
    margin-top: 18px;
    padding: 15px 13px;
    color: #8ab991;
    background: #020303;
    border: 1px solid rgba(103,214,109,.08);
    border-radius: 5px;
    font-family: Consolas, "Courier New", monospace;
    font-size: .61rem;
    line-height: 1.5;
}

.da-intake-monitor__message span {
    margin-right: 8px;
    color: #67d66d;
}

/* =========================================================
   SECTIONS / SERVICE ROUTING
========================================================= */

.da-contact-section {
    position: relative;
    padding-block: clamp(80px, 9vw, 120px);
}

.da-contact-section + .da-contact-section {
    border-top: 1px solid rgba(255,255,255,.05);
}

.da-contact-section-heading {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(300px, .56fr);
    gap: clamp(34px, 7vw, 86px);
    align-items: end;
    margin-bottom: clamp(38px, 5vw, 58px);
}

.da-contact-section-heading h2 {
    max-width: 780px;
    margin-top: 10px;
    color: #f0f0f1;
    font-size: clamp(2.2rem, 4.5vw, 4.2rem);
    line-height: .98;
    letter-spacing: -.05em;
}

.da-contact-section-heading > p {
    color: #8d8d93;
    line-height: 1.72;
}

.da-contact-section--services {
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 28%),
        #08080a;
}

.da-contact-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.da-contact-service {
    min-height: 142px;
    padding: 22px 23px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 28px;
    gap: 18px;
    align-items: center;
    color: inherit;
    text-align: left;
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%),
        #0d0d10;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
    transition:
        transform var(--da-transition),
        border-color var(--da-transition),
        background-color var(--da-transition),
        box-shadow var(--da-transition);
}

.da-contact-service:hover,
.da-contact-service:focus-visible,
.da-contact-service.is-selected {
    transform: translateY(-2px);
    border-color: rgba(255,80,85,.25);
    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        0 16px 34px rgba(0,0,0,.22),
        0 0 24px rgba(206,15,19,.05);
}

.da-contact-service:focus-visible {
    outline: 2px solid rgba(255,177,59,.48);
    outline-offset: 2px;
}

.da-contact-service__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: #ff5c61;
    background: #08080a;
    border: 1px solid rgba(255,81,85,.20);
    border-radius: 11px;
}

.da-contact-service__icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.da-contact-service__copy strong,
.da-contact-service__copy small {
    display: block;
}

.da-contact-service__copy strong {
    color: #eeeeef;
    font-size: 1.03rem;
}

.da-contact-service__copy small {
    margin-top: 6px;
    color: #7f7f86;
    font-size: .78rem;
    line-height: 1.55;
}

.da-contact-service__arrow {
    color: #6e6e75;
    font-size: 1.7rem;
    transition: color var(--da-transition), transform var(--da-transition);
}

.da-contact-service:hover .da-contact-service__arrow,
.da-contact-service:focus-visible .da-contact-service__arrow,
.da-contact-service.is-selected .da-contact-service__arrow {
    color: #ffb13b;
    transform: translateX(3px);
}

/* =========================================================
   FULL-PAGE FORM
========================================================= */

.da-contact-section--intake {
    background:
        radial-gradient(circle at 78% 34%, rgba(206,15,19,.055), transparent 26%),
        #060607;
}

.da-contact-intake-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, .38fr);
    gap: clamp(26px, 4vw, 48px);
    align-items: start;
}

.da-contact-form-console {
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255,255,255,.028), transparent 34%),
        #0b0b0e;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 15px;
    box-shadow:
        inset 0 1px rgba(255,255,255,.035),
        0 24px 56px rgba(0,0,0,.27);
}

.da-contact-form-console__header {
    min-height: 53px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #77777e;
    background: rgba(255,255,255,.018);
    border-bottom: 1px solid rgba(255,255,255,.065);
    font-family: Consolas, "Courier New", monospace;
    font-size: .60rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.da-contact-form-console__header > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.da-contact-form-console__header i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #67d66d;
    box-shadow: 0 0 6px rgba(103,214,109,.72);
}

.da-contact-form-console__header strong {
    color: #67d66d;
}

.da-contact-form-console__heading {
    padding: clamp(28px, 4vw, 42px) clamp(24px, 4vw, 42px) 0;
}

.da-contact-form-console__heading h2 {
    margin-top: 9px;
    color: #f1f1f2;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.da-contact-form-console__heading > p:last-child {
    max-width: 680px;
    margin-top: 14px;
    color: #87878e;
    line-height: 1.68;
}

.da-project-form--page {
    padding: clamp(26px, 4vw, 42px);
}

.da-project-form--page .da-project-form__body {
    display: grid;
    gap: 22px;
}

.da-project-form--page .da-input,
.da-project-form--page .da-select,
.da-project-form--page .da-textarea {
    background: rgba(2,2,3,.76);
}

.da-project-form--page .da-textarea {
    min-height: 180px;
}

.da-project-form__success--page {
    min-height: 390px;
    padding: clamp(34px, 5vw, 54px);
    align-content: center;
}

.da-project-form__success--page .da-button {
    margin-top: 24px;
    align-self: flex-start;
}

/* Sidebar */
.da-contact-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: calc(var(--da-navbar-height) + 24px);
}

.da-contact-direct-line,
.da-contact-preflight,
.da-contact-privacy {
    padding: 25px 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.028), transparent 42%),
        #0c0c0f;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
}

.da-contact-direct-line__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #808086;
    font-family: Consolas, "Courier New", monospace;
    font-size: .60rem;
    font-weight: 800;
    letter-spacing: .10em;
}

.da-contact-direct-line__status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #67d66d;
    box-shadow: 0 0 6px rgba(103,214,109,.72);
}

.da-contact-direct-line h3,
.da-contact-preflight h3 {
    margin-top: 15px;
    color: #eeeeef;
    font-size: 1.25rem;
}

.da-contact-direct-line p,
.da-contact-privacy p {
    margin-top: 9px;
    color: #85858c;
    line-height: 1.62;
}

.da-contact-direct-line > a {
    display: inline-block;
    margin-top: 17px;
    color: #ff6267;
    font-weight: 800;
    text-decoration: none;
}

.da-contact-direct-line > a:hover,
.da-contact-direct-line > a:focus-visible {
    color: #fff;
}

.da-contact-preflight__label,
.da-contact-privacy strong {
    color: #ff6267;
    font-family: Consolas, "Courier New", monospace;
    font-size: .60rem;
    font-weight: 800;
    letter-spacing: .10em;
}

.da-contact-preflight ul {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.da-contact-preflight li {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 11px;
    padding-block: 10px;
    color: #85858c;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: .78rem;
    line-height: 1.5;
}

.da-contact-preflight li:last-child { border-bottom: 0; }

.da-contact-preflight li i {
    width: 6px;
    height: 6px;
    margin-top: 6px;
    border-radius: 50%;
    background: #ffb13b;
    box-shadow: 0 0 5px rgba(255,177,59,.5);
}

.da-contact-privacy {
    border-left: 2px solid rgba(255,177,59,.52);
}

/* =========================================================
   WHAT HAPPENS NEXT
========================================================= */

.da-contact-section--next {
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 25%),
        #08080a;
}

.da-contact-next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.da-contact-next-step {
    position: relative;
    min-height: 250px;
    padding: 28px 27px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255,255,255,.03), transparent 45%),
        #0c0c0f;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
}

.da-contact-next-step::after {
    content: "";
    position: absolute;
    right: -15px;
    bottom: -25px;
    width: 160px;
    height: 160px;
    pointer-events: none;
    background-image: var(--da-hex-texture);
    background-size: 48px auto;
    opacity: .045;
}

.da-contact-next-step__number,
.da-contact-next-step__lamp,
.da-contact-next-step h3,
.da-contact-next-step p {
    position: relative;
    z-index: 1;
}

.da-contact-next-step__number {
    color: #68686f;
    font-family: Consolas, "Courier New", monospace;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.da-contact-next-step__lamp {
    position: absolute;
    top: 27px;
    right: 27px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #67d66d;
    box-shadow:
        0 0 6px rgba(103,214,109,.7),
        0 0 15px rgba(103,214,109,.18);
}

.da-contact-next-step h3 {
    margin-top: 35px;
    color: #ededee;
    font-size: 1.55rem;
}

.da-contact-next-step p {
    margin-top: 13px;
    color: #83838a;
    line-height: 1.66;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) {
    .da-contact-hero__grid {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .da-intake-monitor {
        max-width: 680px;
        justify-self: center;
    }

    .da-contact-intake-layout {
        grid-template-columns: 1fr;
    }

    .da-contact-sidebar {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .da-contact-hero__grid {
        padding-block: 72px 76px;
    }

    .da-contact-hero h1 {
        font-size: clamp(3.15rem, 16vw, 5.25rem);
    }

    .da-contact-section {
        padding-block: 76px;
    }

    .da-contact-section-heading,
    .da-contact-service-grid,
    .da-contact-next-grid,
    .da-contact-sidebar {
        grid-template-columns: 1fr;
    }

    .da-contact-section-heading {
        gap: 18px;
    }

    .da-contact-service {
        grid-template-columns: 50px minmax(0, 1fr) 22px;
        gap: 13px;
        padding: 18px;
    }

    .da-contact-service__icon {
        width: 48px;
        height: 48px;
    }

    .da-contact-form-console__header {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding-block: 12px;
    }

    .da-contact-sidebar {
        gap: 14px;
    }
}

@media (max-width: 520px) {
    .da-intake-monitor__screen {
        min-height: 360px;
        padding: 21px 17px;
    }

    .da-intake-monitor dl div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
    }

    .da-intake-monitor dd {
        margin: 0;
    }

    .da-project-form--page {
        padding: 22px 18px 26px;
    }

    .da-contact-form-console__heading {
        padding-inline: 18px;
    }
}