/*
Lives: laravel/laravel13/resources/css/shore.css
Does: Page-scoped catalogue skin for hosting, domains and bolt-ons.
Last updated: 2026-10-11
Last model: Grok Bot
Improves: The hosting hero chips and the speed links sit on a steady rhythm.
Shines: One photograph, large type, a list you can scan.
Co-authored: Connor O'Driscoll
Company: Tidalux Ltd
App: Tidalux Platform

Served from public/css/shore.css. Not part of marketing-bundle.css.
Motion is opacity only. Photographs stay off the text.
*/

.shore-page {
    --shore-ink: #07141c;
    --shore-foam: #f3fffb;
    --shore-line: color-mix(in srgb, var(--brand-text) 14%, transparent);
}

.shore-page .tdh-hero,
.shore-room-hero {
    background: transparent;
}

.shore-room-hero__frame {
    width: var(--page-rail, min(72rem, calc(100% - 2.5rem)));
    max-width: 72rem;
    margin-inline: auto;
    padding-top: clamp(2.25rem, 5vw, 4rem);
    padding-bottom: clamp(1rem, 3vw, 2rem);
    padding-left: 0;
    padding-right: 0;
}

.shore-room-hero .shore-kicker {
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
}

.shore-room-hero .shore-mark {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.45rem;
}

@media (min-width: 1024px) {
    .shore-room-hero__frame {
        grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 34rem);
        gap: 3rem;
    }
}

.shore-page .tdh-aurora,
.shore-page .tdh-grid-bg,
.shore-page .hero-ambient,
.shore-page .hero-wg-radial,
.shore-page .hero-ambient-dots {
    display: none;
}

.shore-page .tdh-hero__frame {
    align-items: end;
    text-align: left;
}

.shore-kicker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    color: var(--brand-text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

.shore-mark {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    flex: none;
}

.shore-display {
    margin: 1.05rem 0 0;
    color: var(--brand-text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(3.15rem, 6.6vw, 6.15rem);
    font-weight: 500;
    letter-spacing: -0.048em;
    line-height: 0.9;
}

.shore-display span {
    display: block;
    color: var(--brand-accent);
}

.shore-lead {
    max-width: 34rem;
    margin: 1.35rem 0 0;
    color: var(--brand-text-muted);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.shore-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.75rem;
}

.shore-hero-copy {
    min-width: 0;
    max-width: 36rem;
    text-align: left;
}

.shore-hero-copy > .shore-display:first-child {
    margin-top: 0;
}

/* Chip strip under the kicker: its own row, a clear step below the label,
   flush with the icon and the headline, wrapping in even rows on a phone. */
.shore-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
}

.shore-chips + .shore-display {
    margin-top: 1.75rem;
}

/* A primary text link with a quieter secondary beside it. Both are 44px tap
   targets with their text centred, so the two lines of type share a baseline
   whether they sit side by side or wrap onto two rows. */
.shore-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.25rem;
    margin: 1.5rem 0 0;
}

.shore-links > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.shore-links__secondary {
    color: var(--brand-text-muted);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    text-decoration-color: var(--brand-border);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 0.35rem;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.shore-links__secondary:hover {
    color: var(--brand-accent);
    text-decoration-color: currentColor;
}

.shore-links__secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-accent-muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 35%, transparent);
}

.shore-section-head {
    max-width: 36rem;
    margin-bottom: 2.5rem;
}

.shore-section-head--wide {
    max-width: none;
}

.shore-plans__head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.shore-plans__grid {
    display: grid;
    gap: 1.5rem;
    align-items: stretch;
}

.shore-cards {
    display: grid;
    gap: 1rem;
    align-items: stretch;
}

.shore-page .shore-wrap > .studio-stage {
    width: 100%;
    max-width: 100%;
    margin-block: clamp(2.25rem, 5vw, 3.75rem);
    border-radius: 1.35rem;
    background: var(--brand-surface-elevated);
}

.shore-page .shore-words {
    justify-content: flex-start;
}

.shore-stack__actions {
    justify-content: flex-start;
}

.shore-plate {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 1.75rem;
    background: var(--brand-surface-elevated);
}

.shore-plate--wide {
    aspect-ratio: 16 / 10;
}

.shore-plate img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shore-sounding {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    left: 0.7rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin: 0;
    padding: 0.65rem 0.4rem 0.55rem;
    list-style: none;
    border-radius: 1rem;
    background: rgb(7 20 28 / 0.62);
    color: var(--shore-foam);
}

.shore-sounding li {
    min-width: 0;
    opacity: 0.55;
}

.shore-sounding li.is-live {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .shore-sounding li {
        transition: opacity 240ms ease;
    }
}

.shore-sounding strong,
.shore-sounding span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shore-sounding strong {
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.shore-sounding span {
    margin-top: 0.15rem;
    color: rgb(243 255 251 / 0.72);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.shore-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    color: var(--brand-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.shore-back:hover {
    color: var(--brand-text);
}

.shore-band {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.shore-band--flat {
    padding-top: 0;
}

.shore-band--compact {
    padding-block: clamp(2.5rem, 5vw, 3rem);
}

.shore-band--shop {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.shore-section-head--flush {
    margin-bottom: 0;
}

.shore-pair--spaced {
    margin-top: 2rem;
}

.shore-wrap {
    width: var(--page-rail, min(72rem, calc(100% - 2.5rem)));
    margin-inline: auto;
}

.shore-wrap--narrow {
    width: min(52rem, calc(100% - 2 * var(--page-gutter, 1rem)));
}

.shore-h2 {
    margin: 0;
    color: var(--brand-text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.shore-sub {
    max-width: 36rem;
    margin: 0.85rem 0 0;
    color: var(--brand-text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.shore-split {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.shore-ledger {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--shore-line);
}

.shore-ledger a,
.shore-ledger .shore-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: 0.35rem 1rem;
    align-items: center;
    padding: 1.05rem 0.15rem;
    border-bottom: 1px solid var(--shore-line);
    color: inherit;
    text-decoration: none;
}

.shore-ledger a:hover .shore-row__title,
.shore-ledger a:focus-visible .shore-row__title {
    color: var(--brand-accent);
}

.shore-ledger a:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
    border-radius: 0.4rem;
}

.shore-row__n {
    color: var(--brand-text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
}

.shore-row__title {
    margin: 0;
    color: var(--brand-text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 560;
    letter-spacing: -0.03em;
}

.shore-row__body {
    grid-column: 2;
    margin: 0.15rem 0 0;
    color: var(--brand-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.shore-row__go {
    color: var(--brand-accent);
    font-size: 0.82rem;
    font-weight: 650;
}

.shore-ledger--icons a {
    grid-template-columns: 2.5rem 2.5rem minmax(0, 1fr) auto;
}

.shore-ledger--icons .shore-row__body,
.shore-ledger--icons .shore-row__title {
    grid-column: 3;
}

.shore-ledger--icons .shore-row__go {
    grid-column: 4;
    grid-row: 1 / span 2;
}

.shore-points {
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.shore-points li {
    position: relative;
    padding: 0.45rem 0 0.45rem 1.1rem;
    color: var(--brand-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.shore-points li::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    left: 0;
    width: 0.4rem;
    height: 1px;
    background: var(--brand-accent);
}

.shore-linkrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    align-items: center;
    margin-top: 1.5rem;
}

.shore-page .tdx-hosting-plan-teaser {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border-color: transparent;
    background: var(--brand-surface-elevated);
    box-shadow: 0 22px 48px -30px rgb(7 20 28 / 0.5);
}

.shore-page .tdx-hosting-plan-teaser > div:first-child {
    align-items: flex-start;
}

.shore-page .tdx-hosting-card {
    height: 100%;
}

.shore-page .tdx-hosting-plan-teaser--highlight {
    background: var(--brand-surface);
    box-shadow:
        inset 0 3px 0 var(--brand-accent),
        0 22px 48px -30px rgb(7 20 28 / 0.5);
}

.shore-notes {
    display: grid;
    gap: 1.5rem 2.5rem;
    margin-top: 2rem;
}

.shore-notes article h3 {
    margin: 0;
    color: var(--brand-text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 560;
    letter-spacing: -0.03em;
}

.shore-notes article p {
    margin: 0.4rem 0 0;
    color: var(--brand-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.shore-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 0;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--brand-text);
    font-size: 0.95rem;
}

.shore-words li::before {
    content: "·";
    margin: 0 0.65rem;
    color: var(--brand-accent);
}

.shore-words li:first-child::before {
    content: none;
}

.shore-name {
    margin-top: 1.5rem;
}

.shore-name label.shore-name__label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--brand-text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 560;
}

.shore-field {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.35rem 0;
    border: 0;
    border-bottom: 1px solid var(--shore-line);
    border-radius: 0;
    background: transparent;
    color: var(--brand-text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    letter-spacing: -0.03em;
}

.shore-field:focus {
    outline: none;
    border-bottom-color: var(--brand-accent);
}

.shore-field::placeholder {
    color: color-mix(in srgb, var(--brand-text-muted) 80%, transparent);
}

.shore-name form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: end;
}

.shore-name form .shore-field {
    flex: 1 1 16rem;
}

.shore-page .shore-name form + div {
    margin-top: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.shore-steps {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
}

.shore-steps p strong {
    display: block;
    color: var(--brand-text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 560;
    letter-spacing: -0.03em;
}

.shore-steps p span {
    display: block;
    margin-top: 0.35rem;
    color: var(--brand-text-muted);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.55;
}

.shore-steps em {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--brand-accent);
    font-size: 0.75rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.14em;
}

.boltons-page .shore-shop .hover-lift {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border-color: transparent;
    background: var(--brand-surface);
    box-shadow: 0 18px 40px -28px rgb(7 20 28 / 0.55);
}

.boltons-page .shore-shop .hover-lift > div:first-child {
    align-items: flex-start;
}

.shore-close {
    background: var(--shore-ink);
    color: var(--shore-foam);
}

.shore-close h2 {
    margin: 0;
    color: var(--shore-foam);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.shore-close p {
    max-width: 36rem;
    margin: 0.8rem 0 0;
    color: rgb(243 255 251 / 0.78);
    line-height: 1.6;
}

.shore-rule {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--shore-line);
}

.shore-stage {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 1.75rem;
    background: var(--brand-surface-elevated);
}

.shore-stage--wide {
    aspect-ratio: 16 / 10;
}

.shore-stage__poster,
.shore-stage__film {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shore-stage__film {
    opacity: 0;
}

.shore-stage__film.is-on {
    opacity: 1;
}

.shore-stage .shore-sounding {
    z-index: 1;
}

.shore-seam {
    margin: 0;
    height: clamp(4.5rem, 12vw, 7.5rem);
    overflow: hidden;
    background: var(--brand-surface);
}

.shore-seam img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.shore-pair {
    display: grid;
    gap: 0.75rem;
}

.shore-pair figure {
    margin: 0;
    overflow: hidden;
    border-radius: 1.5rem;
    background: var(--brand-surface-elevated);
}

.shore-pair img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shore-pair figure:first-child {
    aspect-ratio: 3 / 4;
}

.shore-pair figure:last-child {
    aspect-ratio: 4 / 3;
}

@media (min-width: 640px) {
    .shore-page .tdx-hosting-plan-teaser,
    .boltons-page .shore-shop .hover-lift {
        padding: 2rem;
    }

    .shore-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shore-plans__head {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
    }
}

@media (min-width: 700px) {
    .shore-notes {
        grid-template-columns: 1fr 1fr;
    }

    .shore-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shore-pair {
        grid-template-columns: 0.8fr 1.2fr;
        align-items: stretch;
    }

    .shore-pair figure:first-child,
    .shore-pair figure:last-child {
        aspect-ratio: auto;
        min-height: 22rem;
    }
}

@media (min-width: 1024px) {
    .shore-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.9fr);
        gap: 3rem;
    }

    .shore-plans__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

@media (max-width: 699px) {
    .shore-plate,
    .shore-stage {
        aspect-ratio: 4 / 3;
        max-height: 22rem;
    }

    .shore-ledger--icons a {
        grid-template-columns: 2.25rem 2.5rem minmax(0, 1fr);
    }

    .shore-ledger--icons .shore-row__go {
        grid-column: 3;
        grid-row: auto;
        margin-top: 0.2rem;
    }

    .shore-sounding {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .shore-stage__film {
        transition: opacity 800ms ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shore-sounding li,
    .shore-stage__film,
    .shore-page .hover-lift {
        transition: none;
        transform: none;
    }

    .shore-stage__film {
        display: none;
    }
}