:root {
    /* Palette borrowed from the His Urla site */
    --shell: #f4f0e9;
    --paper: #fbf9f5;
    --sand: #cdbda9;
    --sand-deep: #bfab93;
    --ink: #39281e;
    --slate: #585a5c;
    --line: #d9d1c4;
    --danger: #a3402c;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --gutter: clamp(1.25rem, 4vw, 3rem);
}

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

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    color: var(--slate);
    background: var(--ink);
    -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ---- Hero ------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    color: var(--shell);
    overflow: hidden;
    isolation: isolate;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--sand) url('hero.jpg') center 60% / cover no-repeat;
    animation: drift 24s var(--ease) both;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at center, rgba(57, 40, 30, .32) 0%, rgba(57, 40, 30, .08) 60%),
        linear-gradient(to bottom, rgba(57, 40, 30, .35) 0%, rgba(57, 40, 30, 0) 30%),
        linear-gradient(to top, rgba(57, 40, 30, .45) 0%, rgba(57, 40, 30, 0) 35%);
}

@keyframes drift {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

.hero__top {
    padding: calc(var(--gutter) * .9) var(--gutter) 0;
    display: flex;
    justify-content: center;
}

.logo { display: block; width: clamp(130px, 16vw, 200px); color: var(--shell); }
.logo svg { display: block; width: 100%; height: auto; }

.hero__content {
    align-self: center;
    justify-self: center;
    padding: 2rem var(--gutter);
    max-width: 44rem;
    text-align: center;
    animation: rise 1.4s .2s var(--ease) both;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

.eyebrow {
    margin: 0 0 1.25rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    opacity: .9;
}

h1 {
    margin: 0 0 1.25rem;
    font-weight: 300;
    font-size: clamp(2.1rem, 5.2vw, 4rem);
    line-height: 1.08;
    letter-spacing: -.01em;
}

.lead {
    margin: 0 0 2.25rem;
    max-width: 32rem;
    margin-inline: auto;
    font-size: clamp(.95rem, 1.3vw, 1.05rem);
    line-height: 1.7;
    opacity: .92;
}

.hero__bottom {
    padding: 1rem var(--gutter);
    border-top: 1px solid rgba(244, 240, 233, .2);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-phone {
    color: var(--shell);
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    font-weight: 700;
    display: block;
    letter-spacing: .1em;
    text-decoration: none;
    white-space: nowrap;
    opacity: .9;
    transition: opacity .4s var(--ease);
    margin-top: 2rem;
}

.footer-phone:hover { opacity: 1; }

.footer-phone__label {
    display: block;
    margin-bottom: .35rem;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    opacity: .85;
}

.hero__bottom > span:first-child { opacity: .8; text-transform: none; letter-spacing: .08em; }

.developer { display: block; width: clamp(140px, 14vw, 200px); color: var(--shell); }
.developer svg { display: block; width: 100%; height: auto; }
.developer { transition: opacity .4s var(--ease); }
.developer:hover { opacity: .75; }

/* ---- Buttons ---------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 2.4rem;
    border: 1px solid var(--shell);
    border-radius: 0;
    background: var(--shell);
    color: var(--ink);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}

.btn:hover { background: transparent; color: var(--shell); }
.btn:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--shell); }
.btn--dark:hover { background: transparent; color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---- Modal ------------------------------------------------------------ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 20, 15, .55);
    backdrop-filter: blur(4px);
    animation: fade .35s var(--ease) both;
}

.modal__panel {
    position: relative;
    width: 100%;
    max-width: 34rem;
    max-height: calc(100svh - 2rem);
    overflow-y: auto;
    background: var(--paper);
    color: var(--slate);
    animation: pop .5s var(--ease) both;
}

.modal.is-closing .modal__backdrop { animation: fade .25s var(--ease) reverse both; }
.modal.is-closing .modal__panel { animation: pop .25s var(--ease) reverse both; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.modal__close {
    position: absolute;
    top: .6rem;
    right: .75rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.modal__body { padding: clamp(1.75rem, 5vw, 2.75rem); }

.modal h2 {
    margin: 0 0 .5rem;
    color: var(--ink);
    font-weight: 400;
    font-size: 1.75rem;
}

.modal__intro { margin: 0 0 1.75rem; font-size: .9rem; line-height: 1.6; }

.modal__done { text-align: center; }
.modal__done p { margin: 0 0 1.75rem; line-height: 1.7; }

/* ---- Form ------------------------------------------------------------- */

.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

@media (max-width: 520px) {
    .field-row { grid-template-columns: 1fr; }
}

.field label:not(.check) {
    display: block;
    margin-bottom: .4rem;
    color: var(--ink);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--slate); }

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field textarea {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
    transition: border-color .3s var(--ease);
}

.field textarea { resize: vertical; min-height: 5.5rem; }

.field input:focus,
.field textarea:focus { outline: none; border-color: var(--sand-deep); }

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

.check {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .8rem;
    line-height: 1.5;
    cursor: pointer;
}

.check input { margin: .15rem 0 0; accent-color: var(--ink); width: 1rem; height: 1rem; flex: none; }

.error { display: block; min-height: 0; margin-top: .3rem; color: var(--danger); font-size: .75rem; }
.error:empty { display: none; }

.form-status { margin: 0 0 1rem; font-size: .85rem; color: var(--danger); }
.form-status:empty { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Social ----------------------------------------------------------- */

.social {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social a {
    display: block;
    color: var(--shell);
    opacity: .8;
    transition: opacity .4s var(--ease);
}

.social a:hover,
.social a:focus-visible { opacity: 1; }

.social svg { display: block; width: 1.25rem; height: 1.25rem; }