:root {
    --paper: #fbf6ec;
    --paper-2: #f3e9d6;
    --ink: #2a120c;
    --ink-2: #6b4a3e;
    --crimson: #9d0101;
    --crimson-deep: #700000;
    --flame: #e54903;
    --flame-text: #b83a02;
    --orange: #f26301;
    --gold: #fc9201;
    --fire: linear-gradient(90deg, var(--crimson), var(--flame) 55%, var(--gold));

    --display: "Cinzel", "Trajan Pro", Georgia, serif;
    --serif: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;

    --gutter: clamp(16px, 4vw, 48px);
    --max: 1180px;
    --hair: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(19px, 1.1rem + .2vw, 21px);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--crimson); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--flame); }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }

h1, h2, h3 { font-weight: 600; line-height: 1.05; margin: 0; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Small caps label with the flanking lines from the logo's "WEB" */
.label, .kicker {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--display);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--flame-text);
}
.label::before, .label::after, .kicker::before, .kicker::after {
    content: "";
    height: 2px;
    flex: 1;
    max-width: 64px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--orange));
}
.label::after, .kicker::after { background: linear-gradient(90deg, var(--orange), transparent); }

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 104px);
    text-align: center;
}
.hero__logo { position: relative; display: block; width: min(84vw, 460px); margin: 0 auto clamp(40px, 6vw, 72px); }
.hero__logo::before {
    content: "";
    position: absolute;
    inset: -30% -25%;
    z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 26%, transparent), transparent);
    animation: glow 7s ease-in-out infinite;
}
.hero__logo img { width: 100%; animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.hero .wrap { position: relative; z-index: 0; }

.hero h1 {
    max-width: 17ch;
    margin-inline: auto;
    font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem);
    letter-spacing: -.01em;
    line-height: 1;
}
.hero h1 em {
    font-style: italic;
    font-weight: 500;
    background: linear-gradient(90deg, var(--crimson), var(--flame), var(--gold), var(--flame), var(--crimson));
    background-size: 300% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    padding-right: .08em;
    animation: shimmer 12s ease-in-out infinite alternate;
}
.kicker { justify-content: center; margin-bottom: 18px; font-size: .72rem; }
.kicker::before, .kicker::after { transform-origin: right; animation: draw .9s .5s cubic-bezier(.2, .7, .2, 1) both; }
.kicker::after { transform-origin: left; }
.lede { max-width: 42ch; margin: 22px auto 32px; font-size: 1.15em; color: var(--ink-2); }

.hero__copy > * { animation: up .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero__copy h1 { animation-delay: .25s; }
.hero__copy .lede { animation-delay: .4s; }
.hero__copy .btn { animation-delay: .55s; }

@keyframes rise { from { transform: translateY(28px) scale(.97); } to { transform: none; } }
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes glow { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: none; } }

/* Scroll reveal: only hides content when JS can show it again */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
    .reveal.is-in { opacity: 1; transform: none; }
    .label.reveal::before, .label.reveal::after { transform: scaleX(0); transition: transform .9s .2s cubic-bezier(.2, .7, .2, 1); }
    .label.reveal::before { transform-origin: right; }
    .label.reveal::after { transform-origin: left; }
    .label.reveal.is-in::before, .label.reveal.is-in::after { transform: none; }
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 15px 28px;
    font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(100deg, var(--crimson-deep), var(--crimson) 45%, var(--flame));
    background-size: 160% 100%;
    background-position: 0 0;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--crimson) 70%, transparent);
    transition: background-position .35s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { color: #fff; background-position: 100% 0; transform: translateY(-1px); }
.btn__arrow { display: inline-block; transition: transform .25s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Services */
.section { padding-block: clamp(56px, 8vw, 96px); border-top: var(--hair); }
.section .label { justify-content: center; margin-bottom: clamp(32px, 4vw, 48px); }
.services {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0 48px;
}
@media (min-width: 640px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(3, 1fr); } }
.service { padding: 22px 0 26px; border-top: var(--hair); position: relative; }
.service::before {
    content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 40px;
    background: var(--fire);
    transition: width .4s ease;
}
.service:hover::before { width: 100%; }
.service h3 {
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: .04em;
    color: var(--crimson);
    margin-bottom: 8px;
}
.service p { margin: 0; color: var(--ink-2); }

/* Contact */
.contact {
    color: #fff;
    padding-block: clamp(56px, 8vw, 96px);
    background:
        radial-gradient(ellipse 70% 90% at 0% 100%, color-mix(in srgb, var(--flame) 45%, transparent), transparent 60%),
        linear-gradient(160deg, var(--crimson-deep), var(--crimson));
}
.contact__grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: 1fr 1.4fr; gap: 64px; } }
.contact h2 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); margin-bottom: 18px; max-width: 14ch; }
.contact__intro p { font-size: 1.1em; color: color-mix(in srgb, #fff 85%, transparent); }
.contact__intro .contact__direct { margin-top: 24px; font-family: var(--display); font-size: .78rem; letter-spacing: .12em; line-height: 2; }
.contact__direct a { color: #fff; }
.contact__direct a:hover { color: var(--gold); }

.contact__panel { align-self: start; }
.form, .sent {
    background: var(--paper);
    color: var(--ink);
    padding: clamp(22px, 4vw, 40px);
    border-top: 3px solid var(--gold);
    border-radius: 2px;
    box-shadow: 0 24px 60px -24px rgba(40, 0, 0, .55);
}
.form[hidden], .sent[hidden] { display: none; }
.form { display: grid; gap: 22px 24px; }
@media (min-width: 640px) {
    .form { grid-template-columns: 1fr 1fr; }
    .field--full, .notice, .btn--send { grid-column: 1 / -1; }
}

.field { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend {
    font-family: var(--display); font-weight: 600; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-2); padding: 0;
}
.field legend { margin-bottom: 10px; }

.field input, .field textarea {
    width: 100%;
    font: inherit;
    font-size: 1.1rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
    border-radius: 0;
    padding: 8px 0;
    appearance: none;
    transition: border-color .15s;
}
.field textarea { resize: vertical; min-height: 130px; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); padding: 10px 12px; background: #fff; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--flame); box-shadow: 0 1px 0 var(--flame); }
.field textarea:focus { box-shadow: 0 0 0 1px var(--flame); }
.is-error input, .is-error textarea { border-color: var(--crimson); }
.field__err { margin: 0; color: var(--crimson); font-size: .95rem; animation: up .25s ease both; }

.chips { display: grid; gap: 10px 24px; }
@media (min-width: 480px) { .chips { grid-template-columns: 1fr 1fr; } }
.field .chip {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
    font-family: var(--serif); font-weight: 500; font-size: 1.08rem; letter-spacing: 0; text-transform: none;
    color: var(--ink);
}
.chip input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; gap: 12px; transition: color .15s; }
.chip span::before {
    content: "";
    flex: none;
    width: 18px; height: 18px;
    border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent);
    border-radius: 2px;
    background: #fff center / 12px no-repeat;
    transition: background-color .15s, border-color .15s, transform .15s;
}
.chip:hover span { color: var(--crimson); }
.chip:hover span::before { border-color: var(--crimson); }
.chip input:checked + span { color: var(--crimson); }
.chip input:checked + span::before {
    border-color: var(--crimson);
    background-color: var(--crimson);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    animation: pop .25s ease;
}
@keyframes pop { 50% { transform: scale(1.18); } }
.chip input:focus-visible + span::before { outline: 2px solid var(--flame); outline-offset: 2px; }

.btn--send { width: 100%; padding: 18px; }
.btn--send[disabled] { opacity: .6; cursor: wait; }

.notice:focus { outline: none; }
.notice { margin: 0; padding: 14px 16px; font-size: 1.05rem; border-left: 3px solid; }
.notice--error { background: color-mix(in srgb, var(--crimson) 8%, #fff); border-color: var(--crimson); color: var(--crimson); }

/* Success card */
.sent {
    display: grid; justify-items: center; align-content: center; text-align: center;
    padding-block: clamp(48px, 7vw, 80px);
    animation: up .6s cubic-bezier(.2, .7, .2, 1) both;
}
.sent:focus { outline: none; }
.sent__check { width: 76px; height: 76px; margin-bottom: 22px; fill: none; stroke: url(#fire); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sent__check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: stroke .7s .15s cubic-bezier(.65, 0, .45, 1) forwards; }
.sent__check path { stroke-width: 3.5; stroke-dasharray: 36; stroke-dashoffset: 36; animation: stroke .4s .75s cubic-bezier(.65, 0, .45, 1) forwards; }
@keyframes stroke { to { stroke-dashoffset: 0; } }
.sent__title { font-family: var(--display); font-size: 1.3rem; letter-spacing: .08em; color: var(--crimson); margin-bottom: 12px; }
.sent__msg { max-width: 32ch; margin: 0 0 28px; color: var(--ink-2); font-size: 1.12rem; }
.sent__again { font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--flame-text); }

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

/* 404 */
body:has(.lost) { min-height: 100dvh; display: flex; flex-direction: column; }
.lost {
    flex: 1;
    display: grid; align-items: center;
    padding-block: clamp(40px, 8vw, 96px);
    text-align: center;
}
.lost__logo { display: block; width: min(64vw, 280px); margin: 0 auto clamp(16px, 3vw, 32px); animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.lost__code {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(5rem, 3rem + 10vw, 9rem);
    line-height: 1;
    letter-spacing: .06em;
    background: linear-gradient(90deg, var(--crimson), var(--flame), var(--gold), var(--flame), var(--crimson));
    background-size: 300% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    animation: up .8s .15s cubic-bezier(.2, .7, .2, 1) both, shimmer 12s ease-in-out infinite alternate;
}
.lost h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin: 8px auto 16px; animation: up .8s .3s cubic-bezier(.2, .7, .2, 1) both; }
.lost h1 em { font-style: italic; font-weight: 500; color: var(--flame-text); }
.lost__text { max-width: 36ch; margin: 0 auto 32px; font-size: 1.15em; color: var(--ink-2); animation: up .8s .4s cubic-bezier(.2, .7, .2, 1) both; }
.lost__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; animation: up .8s .5s cubic-bezier(.2, .7, .2, 1) both; }
.lost__link { font-family: var(--display); font-weight: 600; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--flame-text); }

/* Footer */
.foot { background: var(--ink); color: color-mix(in srgb, #fff 65%, transparent); padding: 22px 0; font-size: .95rem; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.foot__row p { margin: 0; }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: var(--gold); }

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