@font-face {
    font-family: "Satisfy";
    src: url("../fonts/Satisfy-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    color-scheme: light;
    --ink: #173139;
}

*, *::before, *::after { box-sizing: border-box; }

html { min-width: 320px; }

body {
    min-width: 320px;
    margin: 0;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

main {
    min-height: 100vh;
    min-height: 100svh;
    background:
        radial-gradient(ellipse 50% 36% at 94% 4%, rgba(235, 245, 213, .4), transparent 100%),
        radial-gradient(ellipse 38% 36% at 51% 68%, rgba(232, 253, 241, .14), transparent 100%),
        radial-gradient(ellipse 34% 35% at 5% 94%, rgba(4, 95, 120, .16), transparent 100%),
        linear-gradient(110deg, #15869b 0%, #48aab0 49%, #a8d9c8 100%);
}

.de-intro {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: clamp(30px, 4vh, 50px) clamp(18px, 3.2vw, 68px) 0;
}

.de-intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -34%;
    left: 29%;
    width: 44%;
    height: 75%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .045);
    filter: blur(65px);
    pointer-events: none;
}

.de-intro-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.de-intro-logo {
    display: block;
    width: clamp(330px, 20vw, 435px);
    height: auto;
    filter: drop-shadow(0 13px 22px rgba(7, 73, 84, .065));
}

.de-intro h1 {
    margin: clamp(24px, 3vh, 36px) 0 0;
    color: #17333b;
    font-family: "Satisfy", "Brush Script MT", cursive;
    font-size: clamp(38px, 2.65vw, 55px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
}

.de-work-strip {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: clamp(6px, .9vw, 20px);
    width: min(100%, 2020px);
    margin: clamp(50px, 8vh, 84px) auto 0;
    padding: clamp(16px, 2vw, 35px) clamp(12px, 1.4vw, 32px) clamp(16px, 1.7vw, 29px);
}

.de-work-strip::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 6% -1% -7%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 51%, rgba(244, 255, 247, .29), rgba(237, 255, 247, .15) 49%, transparent 76%);
    filter: blur(20px);
    pointer-events: none;
}

.de-work-item {
    display: flex;
    align-items: end;
    justify-content: center;
    min-width: 0;
    margin: 0;
    transition: transform .35s ease;
}

.de-work-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 733 / 850;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 20px 21px rgba(15, 68, 75, .17));
}

.de-contact {
    position: relative;
    padding: clamp(20px, 3vw, 40px) 24px clamp(82px, 9vw, 126px);
}

.de-contact-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 790px);
    margin-inline: auto;
}

.de-contact h2 {
    margin: 0 0 clamp(39px, 5vw, 57px);
    color: #1d3035;
    font-size: clamp(34px, 4vw, 49px);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.045em;
    text-align: center;
    text-wrap: balance;
}

.de-contact-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 27px;
    margin: 0;
    padding: clamp(27px, 4vw, 44px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 24px;
    background: #fffdfb;
    box-shadow: 0 30px 76px rgba(27, 75, 78, .17), 0 3px 14px rgba(27, 75, 78, .06);
}

.de-contact-trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.de-form-notice {
    margin: 0;
    padding: 14px 17px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.de-form-notice--success {
    border: 1px solid #afd8bd;
    color: #225c3e;
    background: #effaf2;
}

.de-form-notice--error {
    border: 1px solid #efbbb4;
    color: #8e302c;
    background: #fff2ef;
}

.de-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 27px;
}

.de-form-field {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}

.de-form-field--full { grid-column: 1 / -1; }

.de-form-field label,
.de-form-attachment-title {
    color: #303d42;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.de-form-field label span { color: #de5841; }

.de-form-field input,
.de-form-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 12px 15px;
    border: 1px solid #d5dcdd;
    border-radius: 9px;
    outline: none;
    color: #19333a;
    background: #fff;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.de-form-field textarea {
    min-height: 123px;
    resize: vertical;
}

.de-form-field input::placeholder,
.de-form-field textarea::placeholder { color: #77858a; opacity: 1; }

.de-form-field input:focus-visible,
.de-form-field textarea:focus-visible {
    border-color: #138a97;
    box-shadow: 0 0 0 4px rgba(19, 138, 151, .13);
}

.de-form-attachment { display: flex; flex-direction: column; gap: 9px; }

.de-file-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 17px;
}

.de-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.de-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 10px 17px;
    border-radius: 7px;
    color: #fff;
    background: #657078;
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
    transition: background .2s ease;
}

.de-file-button:hover { background: #4d5c64; }
.de-file-input:focus-visible + .de-file-button { outline: 3px solid #138a97; outline-offset: 3px; }

.de-file-name {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: #5c6c72;
    font-size: 14px;
    font-style: italic;
}

.de-file-help { margin: 0; color: #64747a; font-size: 12px; line-height: 1.45; }

.de-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #4b5c61;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
}

.de-form-consent input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #168a96;
}

.de-form-submit {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(100deg, #c93d2b 0%, #d64b2a 100%);
    box-shadow: 0 8px 18px rgba(190, 56, 42, .18);
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    transition: filter .2s ease, transform .2s ease;
}

.de-form-submit:hover { filter: brightness(.97); transform: translateY(-2px); }
.de-form-submit:focus-visible { outline: 3px solid #138a97; outline-offset: 3px; }

@media (min-width: 1101px) {
    .de-work-item:nth-child(1) { transform: translateY(23px) scale(.96); }
    .de-work-item:nth-child(2) { transform: translateY(-10px) scale(1.02); }
    .de-work-item:nth-child(3) { z-index: 1; transform: translateY(-25px) scale(1.1); }
    .de-work-item:nth-child(4) { transform: translateY(-10px) scale(1.02); }
    .de-work-item:nth-child(5) { transform: translateY(23px) scale(.96); }
}

@media (max-width: 1100px) {
    .de-intro-logo { width: clamp(285px, 31vw, 370px); }
    .de-work-strip {
        display: flex;
        align-items: center;
        gap: 20px;
        width: calc(100% + 4vw);
        max-width: none;
        margin: clamp(55px, 9vh, 90px) -2vw 0;
        padding: 30px 5vw 35px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 5vw;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .de-work-strip::-webkit-scrollbar { display: none; }
    .de-work-item {
        flex: 0 0 min(31vw, 320px);
        width: min(31vw, 320px);
        scroll-snap-align: center;
    }
}

@media (max-width: 700px) {
    main {
        background:
            radial-gradient(ellipse 74% 25% at 95% 4%, rgba(228, 242, 215, .35), transparent 100%),
            radial-gradient(ellipse 84% 35% at 46% 66%, rgba(243, 255, 241, .13), transparent 100%),
            linear-gradient(155deg, #16869a 0%, #42a8ac 57%, #97d0bf 100%);
    }
    .de-intro {
        align-items: stretch;
        justify-content: flex-start;
        padding: clamp(27px, 6vh, 45px) 0 0;
    }
    .de-intro-logo { width: clamp(285px, 77vw, 355px); }
    .de-intro h1 {
        margin-top: 24px;
        padding-inline: 15px;
        font-size: clamp(31px, 7.6vw, 38px);
    }
    .de-work-strip {
        gap: 15px;
        width: 100%;
        margin: clamp(48px, 7vh, 65px) 0 0;
        padding: 18px 9vw 30px;
        scroll-padding-inline: 9vw;
        overscroll-behavior-inline: contain;
    }
    .de-work-item {
        flex: 0 0 min(78vw, 380px);
        width: min(78vw, 380px);
    }
    .de-work-item img { max-height: min(58vh, 490px); }

    .de-contact {
        padding: 30px 16px 78px;
    }
    .de-contact h2 { margin-bottom: 33px; font-size: clamp(31px, 8.2vw, 40px); }
    .de-contact-form { gap: 24px; border-radius: 19px; }
    .de-form-grid { grid-template-columns: 1fr; row-gap: 23px; }
    .de-form-field--full { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .de-work-strip { scroll-behavior: auto; }
    .de-work-item { transition: none; }
    .de-form-field input,
    .de-form-field textarea,
    .de-file-button,
    .de-form-submit { transition: none; }
}