/* ==========================================================
   ws-contact.css
   Contact and Start a project templates. Owns wsct prefix.
   Only main.css brand tokens shared. 81 Forms skinned through
   its own --f81 variables, scoped to these pages.
   Parts: inc/contact-pages.php. Start script: ws-start.js.
   ========================================================== */

/* === Tokens === */
.wsct {
    --wsct-max: 1140px;
    --wsct-gutter: 24px;
    /* Cards and tiles share What I do corners. Logged exception */
    --wsct-corners: var(--ws-radius) 40px;
    --wsct-tile-corners: var(--ws-radius) 28px;
    --wsct-hero-bg: var(--ws-charcoal);
    --wsct-hero-fade: rgba(28, 28, 30, 0.85);
    --wsct-hero-clear: rgba(28, 28, 30, 0);
    /* How far the contact card hangs below the dark band */
    --wsct-overlap: 160px;
    --wsct-ease: cubic-bezier(0.22, 1, 0.36, 1);
    flex: 1 0 auto;
}

.wsct-wrap { max-width: var(--wsct-max); margin: 0 auto; padding: 0 var(--wsct-gutter); }

/* Screen reader only. Pick announced once, not the animation */
.wsct-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* === Card. Form sits here on both pages === */
.wsct-card {
    position: relative;
    background: var(--ws-surface);
    color: var(--ws-text);
    border-radius: var(--wsct-corners);
    padding: clamp(24px, 3.5vw, 44px);
}
.wsct-card__h {
    margin: 0 0 24px;
    font-size: clamp(1.4rem, 1vw + 1rem, 1.65rem);
    font-weight: 900;
    line-height: 1.2;
    color: var(--ws-heading);
}

/* === What happens next === */
.wsct-steps {
    display: grid;
    gap: 18px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.wsct-steps__item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.wsct-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ws-radius);
    background: var(--ws-lime);
    color: var(--ws-charcoal);
    font-size: 13px;
    font-weight: 900;
}
.wsct-steps__text {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ws-heading);
}
.wsct-steps__sub {
    display: block;
    margin-top: 2px;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ws-muted);
}

.wsct-alt {
    margin: 40px 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ws-muted);
}

/* === 81 Forms, brand skin ===
   Variables first, the plugin's own way. A few rules after,
   where its defaults miss contrast on white */
/* Site Styling settings box the form. The card already is the box */
.wsct .form81 {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    --f81-font: var(--ws-font);
    --f81-text: var(--ws-text);
    --f81-heading: var(--ws-heading);
    --f81-muted: var(--ws-muted);
    --f81-surface: var(--ws-surface);
    /* 3:1 against white. Lighter grey failed non-text contrast */
    --f81-border: #868D92;
    --f81-accent: var(--ws-lime);
    --f81-accent-text: var(--ws-charcoal);
    --f81-radius: var(--ws-radius);
    --f81-focus: rgba(195, 221, 34, 0.55);
    max-width: none;
}
[data-theme="dark"] .wsct .form81 { --f81-border: #6B7177; }
.wsct .form81__row { margin-bottom: 20px; }
/* Lime border alone is 1.3:1 on white. Ink edge, lime glow */
.wsct .form81__control:focus { border-color: var(--ws-heading); }
/* Lime star on white is unreadable */
.wsct .form81__req { color: var(--ws-slate); }
[data-theme="dark"] .wsct .form81__req { color: var(--ws-lime); }
.wsct .form81__submit {
    min-height: 52px;
    padding: 0 28px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.wsct .form81__submit:focus-visible { outline: 3px solid var(--ws-heading); outline-offset: 3px; }

/* ==========================================================
   Contact page
   ========================================================== */

/* Same hero as home. Charcoal band ends above the section's
   bottom edge, so the card always hangs into the white below */
.wsct-hero {
    position: relative;
    margin-top: calc(-1 * var(--ws-header-h));
    color: var(--ws-white);
}
.wsct-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 var(--wsct-overlap) 0;
    background: var(--wsct-hero-bg);
}
.wsct-hero__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: var(--wsct-overlap);
    width: 62%;
    overflow: hidden;
}
.wsct-hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% 50%;
}
/* Top keeps nav legible, side fade carries the copy, bottom melts */
.wsct-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--wsct-hero-bg) 0%, var(--wsct-hero-fade) 10%, var(--wsct-hero-clear) 26%),
        linear-gradient(90deg, var(--wsct-hero-bg) 0%, var(--wsct-hero-fade) 26%, rgba(28, 28, 30, 0.35) 62%),
        linear-gradient(0deg, var(--wsct-hero-bg) 0%, var(--wsct-hero-clear) 30%);
}

.wsct-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 6vw, 72px);
    align-items: end;
    max-width: var(--wsct-max);
    margin: 0 auto;
    padding: calc(var(--ws-header-h) + clamp(56px, 7vw, 96px)) var(--wsct-gutter) 0;
}
/* Copy stays on charcoal. Ends above where the band does */
.wsct-hero__copy {
    align-self: start;
    padding-bottom: calc(var(--wsct-overlap) + clamp(56px, 7vw, 96px));
}
.wsct-hero .wsct-hero__tag { color: var(--ws-grey); }
.wsct-hero__h1 {
    max-width: 9em;
    margin: 0;
    font-size: clamp(2.5rem, 4.4vw, 4rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--ws-white);
    text-wrap: balance;
}
.wsct-hero__accent { color: var(--ws-lime); }
.wsct-hero__lead {
    max-width: 440px;
    margin: 22px 0 0;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ws-light-grey);
    text-wrap: pretty;
}
.wsct-hero__next {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid #34343A;
}
.wsct-hero__next .ws-tag { margin: 0; font-size: 0.85rem; }
/* Steps on charcoal: lime numerals, no tiles */
.wsct-hero .wsct-steps__num {
    width: auto;
    height: auto;
    justify-content: flex-start;
    background: none;
    color: var(--ws-lime);
}
.wsct-hero .wsct-steps__num::before { content: "0"; }
.wsct-hero .wsct-steps__text { color: var(--ws-white); }
.wsct-hero .wsct-steps__sub { color: var(--ws-grey); }

.wsct-hero__card {
    z-index: 2;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
}

.wsct-after {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 6vw, 72px);
    max-width: var(--wsct-max);
    margin: 0 auto;
    padding: 0 var(--wsct-gutter) clamp(56px, 7vw, 88px);
}
.wsct-after .wsct-alt { margin-top: clamp(24px, 3vw, 40px); }

/* Tablets and phones. Photo on top, headline over its fade,
   card hangs into the page below. Same as the home hero plan */
@media (max-width: 1023px) {
    .wsct { --wsct-overlap: 120px; }
    .wsct-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-top: calc(var(--ws-header-h) + 190px);
    }
    .wsct-hero__photo {
        width: 100%;
        bottom: auto;
        height: 420px;
    }
    .wsct-hero__photo::after {
        background: linear-gradient(180deg, rgba(28, 28, 30, 0.75) 0%, var(--wsct-hero-clear) 20%, var(--wsct-hero-clear) 46%, rgba(28, 28, 30, 0.85) 72%, var(--wsct-hero-bg) 92%);
    }
    .wsct-hero__copy { padding-bottom: 40px; }
    .wsct-hero__next { margin-top: 28px; padding-top: 20px; }
    .wsct-hero .wsct-steps { gap: 12px; }
    .wsct-hero .wsct-steps__sub { display: none; }
    .wsct-after { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================
   Start a project
   ========================================================== */

.wsct-start { padding: clamp(40px, 6vw, 64px) 0 clamp(40px, 5vw, 56px); }

.wsct-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
}
.wsct-intro .ws-tag { margin-bottom: 12px; }
.wsct-intro__h1 {
    margin: 0;
    font-size: clamp(2.5rem, 4vw + 0.5rem, 3.5rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--ws-heading);
    text-wrap: balance;
}
.wsct-intro__lead {
    margin: 0;
    max-width: 46ch;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ws-muted);
    text-wrap: pretty;
}

.wsct-tiles__h { margin: 48px 0 0; }

/* --- Topic tiles. Links, so no script still works --- */
.wsct-tiles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.wsct-tiles__item { display: flex; }

/* plainlink drops the global underline bar. Three layers:
   photo, tint, words. Pseudos sit between photo and words */
.wsct .wsct-tile {
    position: relative;
    display: block;
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: var(--wsct-tile-corners);
    background: #3A3F44;
    color: var(--ws-white);
    text-decoration: none;
    transition: transform 0.25s var(--wsct-ease), box-shadow 0.25s var(--wsct-ease);
}
.wsct-tile__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Tint lifts on hover and pick, like the homepage cards */
.wsct-tile--photo::before,
.wsct-tile--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.wsct-tile--photo::before { background-color: rgba(18, 18, 20, 0.42); transition: background-color 0.3s ease; }
.wsct-tile--photo::after { background: linear-gradient(0deg, rgba(10, 10, 12, 0.6) 0%, rgba(10, 10, 12, 0) 60%); }
.wsct-tile--photo.is-on::before { background-color: rgba(18, 18, 20, 0.2); }

.wsct-tile__name {
    position: absolute;
    left: 16px;
    right: 44px;
    bottom: 14px;
    z-index: 2;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.15;
}
.wsct-tile__check {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wsct-tile__check svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--ws-charcoal);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.2s ease;
}
/* Picked: lime badge and a lime ring, gap in page color */
.wsct .wsct-tile.is-on { box-shadow: 0 0 0 3px var(--ws-bg), 0 0 0 6px var(--ws-lime); }
.wsct-tile.is-on .wsct-tile__check { background: var(--ws-lime); border-color: var(--ws-lime); }
.wsct-tile.is-on .wsct-tile__check svg { opacity: 1; }

@media (hover: hover) {
    .wsct .wsct-tile:hover { transform: translateY(-3px); }
    .wsct-tile--photo:hover::before { background-color: rgba(18, 18, 20, 0.2); }
}
.wsct .wsct-tile:focus-visible { outline: 3px solid var(--ws-heading); outline-offset: 8px; }

/* Arrival. Picked tile first, others a beat later (delay set
   per tile in PHP). CSS only, backwards fill so hover still lifts */
.js .wsct-tile { animation: wsctTileIn 0.5s var(--wsct-ease) backwards; animation-delay: var(--wsct-d, 0s); }
@keyframes wsctTileIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* --- Something else. Mostly white, a few brand colors
   drifting behind frosted glass. Question mark rides the label --- */
.wsct .wsct-tile--else {
    background: var(--ws-white);
    color: var(--ws-charcoal);
    box-shadow: inset 0 0 0 1px #DADDD5;
}
.wsct .wsct-tile--else.is-on { box-shadow: inset 0 0 0 1px #DADDD5, 0 0 0 3px var(--ws-bg), 0 0 0 6px var(--ws-lime); }
.wsct-tile--else .wsct-tile__check { border-color: rgba(28, 28, 30, 0.45); }
.wsct-tile__q { margin-left: 0.03em; color: var(--ws-slate); }
.wsct-haze {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.wsct-haze__b {
    position: absolute;
    border-radius: 50%;
    filter: blur(12px);
}
.wsct-haze__b--1 { width: 46%; height: 58%; left: -6%; top: 36%; background: var(--ws-slate); opacity: 0.5; animation: wsctB1 12s ease-in-out infinite alternate; }
.wsct-haze__b--2 { width: 34%; height: 44%; left: 52%; top: -10%; background: var(--ws-lime); opacity: 0.7; animation: wsctB2 14s ease-in-out infinite alternate; }
.wsct-haze__b--3 { width: 30%; height: 40%; left: 30%; top: 58%; background: var(--ws-grey); opacity: 0.55; animation: wsctB3 10s ease-in-out infinite alternate; }
.wsct-haze__b--4 { width: 16%; height: 22%; left: 74%; top: 60%; background: var(--ws-charcoal); opacity: 0.3; animation: wsctB4 16s ease-in-out infinite alternate; }
@keyframes wsctB1 { to { transform: translate(40%, -30%) scale(1.1); } }
@keyframes wsctB2 { to { transform: translate(-50%, 40%) scale(0.85); } }
@keyframes wsctB3 { to { transform: translate(60%, -50%) scale(1.2); } }
@keyframes wsctB4 { to { transform: translate(-140%, -80%) scale(1.3); } }
.wsct-haze__frost {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* --- Form band --- */
.wsct-formband {
    padding: clamp(40px, 6vw, 56px) 0 clamp(64px, 8vw, 88px);
    background: var(--ws-tint);
    border-top: 1px solid var(--ws-border);
}
/* Dark tint matched the card. Band steps down, like home sections */
[data-theme="dark"] .wsct-formband { background: #202024; }
.wsct-formgrid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    grid-template-areas:
        "more card"
        "next card";
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    row-gap: 36px;
    align-items: start;
}
.wsct-more { grid-area: more; }
.wsct-formgrid__card { grid-area: card; }
.wsct-formgrid__next { grid-area: next; }
.wsct-formgrid__next .ws-tag { margin: 0; }

/* Heading stays put. Only the word changes */
.wsct-more {
    margin: 0;
    font-size: clamp(1.5rem, 1.2vw + 1rem, 1.9rem);
    font-weight: 900;
    line-height: 1.2;
    color: var(--ws-heading);
}
.wsct-more__line { display: block; margin-top: 8px; }

/* Word rolls bottom to top. Clip is vertical only, so a wide
   outgoing word is never cut sideways */
.wsct-word { position: relative; display: inline-block; max-width: 100%; vertical-align: bottom; }
.wsct-word__roll {
    position: relative;
    display: inline-block;
    padding-bottom: 0.06em;
    clip-path: inset(0 -40em 0 -0.5em);
    vertical-align: bottom;
}
.wsct-word__in { display: inline-block; white-space: nowrap; }
.wsct-word__out { position: absolute; left: 0; top: 0; white-space: nowrap; }
.wsct-word__in.is-in { animation: wsctRollIn 0.5s var(--wsct-ease) both; }
.wsct-word__out.is-out { animation: wsctRollOut 0.5s var(--wsct-ease) both; }
@keyframes wsctRollIn {
    from { transform: translateY(110%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@keyframes wsctRollOut {
    from { transform: none; opacity: 1; }
    to   { transform: translateY(-110%); opacity: 0; }
}
/* Pill: word in a white pill that resizes to fit. Script sets
   start and end width; the transition does the rest */
.wsct-word--pill {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 2px 18px 4px;
    overflow: hidden;
    background: var(--ws-surface);
    border: 1px solid #DADDD5;
    border-radius: var(--ws-radius-pill);
    transition: width 0.45s var(--wsct-ease);
}
[data-theme="dark"] .wsct-word--pill { border-color: var(--ws-border); }
.wsct-word--pill .wsct-word__roll { clip-path: none; }

/* Same form, new face: out the top, back in from below.
   Script swaps the topic at the gap, typed text stays put */
.wsct-formgrid__card.is-swapping { animation: wsctSwap 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes wsctSwap {
    0%   { transform: none; opacity: 1; }
    40%  { transform: translateY(-20px); opacity: 0; }
    42%  { transform: translateY(24px); opacity: 0; }
    100% { transform: none; opacity: 1; }
}
/* Topic field eases in when 81 Forms shows it.
   Animation starts on display none to block */
.wsct--start .form81__row[data-forms81-showif] { animation: wsctRowIn 0.35s ease both; }
@keyframes wsctRowIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Name and email side by side. Everything else full width */
.wsct--start .form81 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
}
.wsct--start .form81 > * { grid-column: 1 / -1; }
.wsct--start .form81 > .form81__row:has(#forms81-your-name),
.wsct--start .form81 > .form81__row:has(#forms81-your-email) { grid-column: auto; }

/* Tablets. Five tiles still fit; form stacks under its heading */
@media (max-width: 1023px) {
    .wsct-formgrid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "more"
            "card"
            "next";
        grid-template-rows: auto;
        row-gap: 24px;
    }
    .wsct-formgrid__next { margin-top: 12px; }
}
/* Phones. Two up, Something else full width and taller,
   so it reads as a button like the photo tiles */
@media (max-width: 860px) {
    .wsct-intro { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .wsct-tiles__h { margin-top: 32px; }
    .wsct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
    .wsct .wsct-tile { height: 112px; }
    .wsct-tiles__item:last-child { grid-column: 1 / -1; }
    .wsct .wsct-tile--else { height: 96px; }
    .wsct-tile__name { font-size: 0.95rem; }
}
@media (max-width: 600px) {
    .wsct { --wsct-corners: var(--ws-radius) 28px; --wsct-tile-corners: var(--ws-radius) 22px; }
    .wsct--start .form81 { grid-template-columns: minmax(0, 1fr); }
    .wsct--start .form81 > .form81__row:has(#forms81-your-name),
    .wsct--start .form81 > .form81__row:has(#forms81-your-email) { grid-column: 1 / -1; }
    .wsct-card { padding: 24px 20px; }
}

/* Reduced motion. Word swaps, form swaps, tiles just there */
@media (prefers-reduced-motion: reduce) {
    .js .wsct-tile,
    .wsct-word__in.is-in,
    .wsct-word__out.is-out,
    .wsct-formgrid__card.is-swapping,
    .wsct--start .form81__row[data-forms81-showif],
    .wsct-haze__b { animation: none; }
    .wsct .wsct-tile,
    .wsct-word--pill,
    .wsct-tile__check,
    .wsct-tile__check svg { transition: none; }
}