/*
    template06 - "WingSpa", from the Claude Design project
    e459a7aa-11d5-4255-b38d-b61e8c974942, file "WingSpa Website v4.dc.html".

    The design was authored as one canvas page that swaps its body in
    JavaScript. This file is the same look rebuilt to work without it, because
    on this system a page is a row in `sections` with its own URL, its own
    title and its own place in the breadcrumb. Nothing here is business
    specific: every name, price, photo and phone number comes from the
    database at render time.

    Two layers, in this order:

      1. the component classes the design system supplies (.btn, .input,
         .field, .tag, .table, .card) reduced to what these pages use
      2. the WingSpa layer, which retunes those tokens and adds the ws-*
         layout classes

    Sizes use cqw against .ws-site, which declares the container. That is how
    the design was drawn and it is why a section reads the same at 1440px as
    it does at 390px without a single width media query.
*/

/* ------------------------------------------------------------------ tokens */

:root {
    --color-bg: #ffffff;
    --color-surface: #FEF9F6;
    --color-panel: #F2E9E3;
    --color-text: #16181A;
    --color-body: #55483F;
    --color-accent: #3F6975;
    --color-accent-100: #EAF1F3;
    --color-accent-600: #3F6975;
    --color-accent-700: #345965;
    --color-accent-800: #294853;
    --color-divider: rgba(22, 24, 26, .13);
    --ws-tan: #8F5D3A;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
}

/* -------------------------------------------------------------------- base */

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-body);
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ws-tan); text-underline-offset: 4px; }
a:hover { color: var(--color-accent); }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    letter-spacing: 0;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }
p { margin: 0 0 var(--space-3); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: rgba(63, 105, 117, .22); }

/* ----------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 17px 30px;
    transition: background .25s, color .25s, border-color .25s;
}

.btn svg { display: block; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--color-text); color: #fff; }
.btn-primary:hover { background: var(--color-accent); color: #fff; }
.btn-primary:active { background: var(--color-accent-700); }

.btn-secondary { border: 1px solid rgba(22, 24, 26, .28); background: transparent; color: var(--color-text); }
.btn-secondary:hover { background: rgba(22, 24, 26, .05); color: var(--color-text); }
.btn-secondary:active { background: rgba(22, 24, 26, .12); }

.btn-ghost { color: var(--ws-tan); padding-inline: 2px; letter-spacing: .14em; }
.btn-ghost:hover { background: rgba(143, 93, 58, .08); }

.btn-block { width: 100%; justify-content: center; }
.btn + .btn-block { margin-top: 10px; }

/*  On a dark band the primary button is near-black on teal, which is legible
    but heavy. The outline reads as the same button in the other key. */
.ws-dark .btn-outline-light,
.ws-poster .btn-outline-light { color: #fff; border: 1px solid rgba(255, 255, 255, .9); }
.ws-dark .btn-outline-light:hover,
.ws-poster .btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.btn-on-accent { background: #fff; color: var(--color-accent); }
.btn-on-accent:hover { background: rgba(255, 255, 255, .88); color: var(--color-accent-800); }

/* ------------------------------------------------------------------- forms */

.field > label {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6B5E55;
    margin-bottom: 8px;
}

.input {
    width: 100%;
    background: #fff;
    border: 1px solid rgba(22, 24, 26, .18);
    border-radius: 0;
    min-height: 50px;
    padding: 12px 16px;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: var(--color-text);
}

.input:hover { border-color: rgba(22, 24, 26, .38); }
.input:focus-visible { border-color: var(--color-accent); outline: none; }
textarea.input { min-height: 130px; resize: vertical; }
select.input { appearance: none; background-image: none; }

.ws-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ws-form-grid .ws-span2 { grid-column: span 2; }

/* -------------------------------------------------------------------- tags */

.tag {
    display: inline-flex;
    align-items: center;
    border-radius: 0;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 6px 13px;
}

.tag-neutral { background: var(--color-panel); color: var(--color-body); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-outline { border: 1px solid rgba(169, 113, 75, .55); color: var(--ws-tan); }

/* ------------------------------------------------------------------ tables */

.table { width: 100%; border-collapse: collapse; }
.table td { padding: 18px 12px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.table tbody tr:hover { background: var(--color-surface); }

/* ------------------------------------------------------------------ layout */

.ws-site {
    container-type: inline-size;
    margin: 0 auto;
    background: var(--color-bg);
    position: relative;
}

.ws-wrap { max-width: 1300px; margin: 0 auto; padding: 0 clamp(22px, 5cqw, 68px); }
.ws-sec { padding: clamp(58px, 8.5cqw, 132px) 0; border-bottom: 0; }
.ws-sec-tight { padding: clamp(30px, 4cqw, 56px) 0; }
.ws-sec-flush { padding-top: 0; }

/* -------------------------------------------------------------------- type */

.ws-kick { font: 500 13px/1 'Jost', sans-serif; letter-spacing: .14em; color: var(--ws-tan); margin: 0 0 18px; }
.ws-kick-l { font: 400 12px/1 'Jost', sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .94); margin: 0 0 18px; }
.ws-h1 { font: 300 clamp(38px, 6.6cqw, 74px)/1.14 'Cormorant Garamond', serif; margin: 0; }
.ws-h2 { font: 300 clamp(30px, 4.4cqw, 54px)/1.2 'Cormorant Garamond', serif; margin: 0 0 20px; }
.ws-h3 { font: 400 clamp(20px, 2.1cqw, 27px)/1.3 'Cormorant Garamond', serif; margin: 0 0 12px; }
.ws-h4 { font: 400 19px/1.35 'Cormorant Garamond', serif; margin: 0 0 8px; }
.ws-lead { font-size: clamp(15px, 1.3cqw, 17px); line-height: 1.9; font-weight: 300; max-width: 64ch; margin: 0; text-wrap: pretty; }
.ws-body { font-size: 15.5px; line-height: 1.9; font-weight: 300; margin: 0; text-wrap: pretty; }
.ws-sm { font-size: 14.5px; line-height: 1.8; font-weight: 300; margin: 0; color: #5E5148; }
.ws-num { font: 300 clamp(32px, 3.6cqw, 48px)/1 'Cormorant Garamond', serif; }

.ws-h1, .ws-h2, .ws-h3, .ws-h4, blockquote { color: var(--color-text); }
.ws-dark .ws-h1, .ws-dark .ws-h2, .ws-dark .ws-h3, .ws-dark .ws-h4, .ws-dark blockquote,
.ws-poster .ws-h1, .ws-poster .ws-h2, .ws-poster .ws-h3, .ws-poster .ws-h4, .ws-poster blockquote { color: #fff; }
.ws-h1, .ws-h2, .ws-h3, .ws-h4, .ws-num, .table td, .ws-row { font-variant-numeric: lining-nums; }

/*  Owner-written HTML out of the section editor. It arrives as <p>, <ul>,
    <strong> and the occasional <h3>, so it is styled here rather than being
    wrapped in classes the editor cannot produce. */
.ws-rich { font-size: 15.5px; line-height: 1.9; font-weight: 300; }
.ws-rich > *:first-child { margin-top: 0; }
.ws-rich > *:last-child { margin-bottom: 0; }
.ws-rich p { margin: 0 0 16px; text-wrap: pretty; }
.ws-rich h2, .ws-rich h3, .ws-rich h4 { color: var(--color-text); margin: 28px 0 12px; }
.ws-rich h2 { font-size: clamp(24px, 3cqw, 34px); font-weight: 300; }
.ws-rich h3 { font-size: clamp(20px, 2.1cqw, 26px); }
.ws-rich ul, .ws-rich ol { margin: 0 0 16px; padding-left: 20px; }
.ws-rich li { margin-bottom: 8px; }
.ws-rich strong { font-weight: 500; color: var(--color-text); }
.ws-rich img { margin: 20px 0; }
.ws-dark .ws-rich, .ws-poster .ws-rich { color: rgba(255, 255, 255, .92); }
.ws-dark .ws-rich strong, .ws-poster .ws-rich strong { color: #fff; }

/* ------------------------------------------------------------------- grids */

.ws-grid { display: grid; gap: 0; }
.ws-g2 { grid-template-columns: repeat(2, 1fr); }
.ws-g3 { grid-template-columns: repeat(3, 1fr); }
.ws-g4 { grid-template-columns: repeat(4, 1fr); }
.ws-cell { padding: clamp(20px, 2.4cqw, 34px); border-left: 0; }
.ws-grid:has(> .ws-cell) { margin-inline: calc(-1 * clamp(20px, 2.4cqw, 34px)); }
.ws-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5cqw, 84px); align-items: start; }
.ws-split > *, .ws-grid > *, .ws-gal > * { min-width: 0; }
.ws-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* ------------------------------------------------------------------- parts */

.ws-btn { border-radius: 0; padding: 17px 32px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; justify-content: center; }
.ws-link { color: inherit; text-decoration: none; transition: color .25s; }
.ws-link:hover { color: var(--ws-tan); }
.ws-dark { background: var(--color-accent); color: #fff; }
.ws-poster { background: var(--color-accent); color: #fff; }
.ws-surface { background: var(--color-surface); }
.ws-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--color-divider); }
.ws-row:last-child { border-bottom: 0; }
.ws-nav a { text-decoration: none; }
.ws-ctr { text-align: center; }
.ws-ctr .ws-lead, .ws-ctr .ws-body { margin-left: auto; margin-right: auto; }
.ws-plate { position: absolute; left: 0; bottom: 0; background: rgba(22, 24, 26, .6); color: #fff; font: 400 12px/1 'Jost', sans-serif; letter-spacing: .1em; padding: 11px 16px; }
.ws-frame { position: absolute; inset: clamp(14px, 2cqw, 30px); border: 1px solid rgba(255, 255, 255, .45); pointer-events: none; }
.ws-hov { transition: background .3s; }
.ws-hov:hover { background: var(--color-surface); }
.ws-foot { background: #fff; color: var(--color-body); border-top: 1px solid var(--color-divider); }
.ws-divider-top { border-top: 1px solid var(--color-divider); }

/*  The image-slot the canvas uses is an editor affordance. Here a photo is
    either in the database or it is not, so a missing one leaves a quiet panel
    at the right size rather than a dashed drop target. */
.ws-shot { position: relative; overflow: hidden; background: var(--color-panel); }
.ws-shot img { width: 100%; height: 100%; object-fit: cover; }
.ws-shot-empty { background: var(--color-panel); }

@keyframes ws-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ws-anim { animation: ws-up .5s cubic-bezier(.2, .7, .3, 1) both; }

/* ------------------------------------------------------------- top utility */

.ws-util { font-size: 12px; letter-spacing: .04em; }
.ws-util .ws-wrap { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; padding-top: 9px; padding-bottom: 9px; }
.ws-util a { color: #fff; }
.ws-util span { color: rgba(255, 255, 255, .9); }
.ws-util .ws-util-end { margin-left: auto; }

/* -------------------------------------------------------------- header nav */

.ws-head { position: sticky; top: 0; z-index: 60; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.ws-head .ws-wrap { display: flex; align-items: center; gap: clamp(14px, 2cqw, 34px); padding-top: 16px; padding-bottom: 16px; }
.ws-brand { display: block; flex: none; text-decoration: none; }
.ws-brand img { height: clamp(32px, 3.2cqw, 44px); width: auto; }
.ws-brand-text { font: 400 clamp(20px, 2.2cqw, 27px)/1 'Cormorant Garamond', serif; color: var(--color-text); letter-spacing: .04em; }
.ws-menu { display: flex; gap: clamp(10px, 1.6cqw, 26px); margin: 0 0 0 auto; padding: 0; list-style: none; }
.ws-menu > li { list-style: none; position: relative; }
.ws-menu ul { position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff; border: 1px solid var(--color-divider); padding: 6px 0; margin: 0; display: none; z-index: 70; }
.ws-menu li:hover > ul, .ws-menu li:focus-within > ul { display: block; }
.ws-menu ul li { list-style: none; }
.ws-menu ul a { display: block; padding: 9px 18px; font: 300 15px/1.3 'Cormorant Garamond', serif; color: var(--color-text); }
.ws-menu ul a:hover { background: var(--color-surface); color: var(--ws-tan); }
.ws-navlink { font: 400 12px/1 'Jost', sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 6px 0; border-bottom: 2px solid transparent; color: inherit; display: block; }
.ws-navlink.is-current { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.ws-head-cta { flex: none; }
.ws-burger { display: none; flex: none; padding: 12px 16px; font-size: 11px; }

/* ---------------------------------------------------------- mobile drawer */

.ws-drawer { position: fixed; inset: 0; z-index: 100; overflow: auto; padding: 22px; background: var(--color-accent); color: #fff; }
.ws-drawer[hidden] { display: none; }
.ws-drawer-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 16px; }
.ws-drawer-top img { height: 24px; width: auto; }
.ws-drawer-brand { font: 400 20px/1 'Cormorant Garamond', serif; color: #fff; letter-spacing: .04em; }
.ws-drawer-close { color: #fff; border: 1px solid rgba(255, 255, 255, .4); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; padding: 10px 16px; background: transparent; }
.ws-drawer ul { list-style: none; margin: 0; padding: 0; }
.ws-drawer a.ws-drawer-link { display: block; color: #fff; font: 300 clamp(24px, 7cqw, 34px)/1.1 'Cormorant Garamond', serif; letter-spacing: -.02em; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); text-decoration: none; }
.ws-drawer a.ws-drawer-sub { font-size: 20px; padding-left: 18px; opacity: .85; }
.ws-drawer-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 22px; font-size: 14px; color: rgba(255, 255, 255, .93); }
.ws-drawer-foot a { color: #fff; }

/* ------------------------------------------------------------- breadcrumbs */

.ws-crumbs { font: 400 11.5px/1 'Jost', sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 20px 0; border-bottom: 1px solid var(--color-divider); }
.ws-crumbs a { color: #6B5E55; text-decoration: none; }
.ws-crumbs a:hover { color: var(--ws-tan); }
.ws-crumbs .sep { color: rgba(22, 24, 26, .3); margin: 0 8px; }
.ws-crumbs .here { color: var(--color-text); }

/* ----------------------------------------------------------------- accordion */

.ws-faq { border-top: 1px solid var(--color-divider); max-width: 1000px; }
.ws-faq details { border-bottom: 1px solid var(--color-divider); }
.ws-faq summary { display: flex; align-items: baseline; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 300 clamp(16px, 1.9cqw, 22px)/1.3 'Cormorant Garamond', serif; letter-spacing: -.015em; color: var(--color-text); }
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq summary::after { content: '+'; margin-left: auto; font: 400 26px/1 'Cormorant Garamond', serif; color: var(--color-accent); }
.ws-faq details[open] summary::after { content: '\2013'; }
.ws-faq .ws-faq-a { padding: 0 0 22px; max-width: 78ch; }

/* -------------------------------------------------- shared booking form */

/*  templates/_classes_booking.php is included by every design and carries its
    own cb-* styling, but it deliberately borrows the host template's
    .form-control, .btn-default and Bootstrap-shaped .row / .col-md-6 so that
    the layout argument happens once rather than once per design. This design
    has no Bootstrap, so those four names are mapped here and nowhere else.
    Without this the booking page would be the one page on the site rendering
    as unstyled browser defaults. */

.form-control {
    width: 100%;
    background: #fff;
    border: 1px solid rgba(22, 24, 26, .18);
    border-radius: 0;
    min-height: 50px;
    padding: 12px 16px;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: var(--color-text);
}

.form-control:focus-visible { border-color: var(--color-accent); outline: none; }
textarea.form-control { min-height: 130px; resize: vertical; }
select.form-control { appearance: none; }

.btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--color-text);
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 17px 30px;
    transition: background .25s;
}

.btn-default:hover { background: var(--color-accent); color: #fff; }

.ws-booking .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ws-booking .col-md-6, .ws-booking .col-md-12 { min-width: 0; }
.ws-booking .col-md-12 { grid-column: span 2; }
.ws-booking label { display: block; font-family: 'Jost', sans-serif; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #6B5E55; margin-bottom: 8px; }

@container (max-width: 660px) {
    .ws-booking .row { grid-template-columns: minmax(0, 1fr); }
    .ws-booking .col-md-12 { grid-column: auto; }
}

/*  templates/_classes_booking.php ships a gold accent and rounded cards so it
    looks deliberate in any design that includes it without being restyled.
    Next to this one it reads as a widget someone pasted in: the page is teal
    and square-cornered throughout and the form was amber with 12px radii.

    It declares three custom properties on .cb-wrap for exactly this, so the
    palette is retuned through those rather than by overriding its rules. The
    radius has no property, so it is flattened here. Scoped to .ws-booking, so
    nothing leaks into the same form on any other template. */

.ws-booking .cb-wrap {
    --cb-accent: var(--color-accent);
    --cb-accent-soft: var(--color-surface);
    --cb-line: var(--color-divider);
}

.ws-booking .cb-wrap,
.ws-booking .cb-wrap * { border-radius: 0; }

/*  The step rail above the booking form. */
.ws-steps { display: flex; flex-wrap: wrap; gap: 0 26px; margin-bottom: clamp(28px, 3.5cqw, 52px); }
.ws-steps > div { padding: 14px 0; border-top: 2px solid var(--color-accent); min-width: 150px; }
.ws-steps span { font: 400 12px/1 'Jost', sans-serif; letter-spacing: .1em; color: var(--color-accent); }
.ws-steps div > div { font: 400 12px/1.3 'Jost', sans-serif; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; color: var(--color-text); }

/* ------------------------------------------------------- footer areas */

/*  A town list, not a column of links. There can be thirty of them, so they
    run on across the footer's full width with a rule above rather than
    stacking into a fifth column that would be taller than the other four. */
.ws-areas { display: flex; flex-wrap: wrap; gap: 6px 0; }

.ws-areas a {
    font-size: 14px;
    color: rgba(22, 24, 26, .75);
    text-decoration: none;
    padding: 3px 0;
}

.ws-areas a:not(:last-child)::after {
    content: '\00b7';
    color: rgba(22, 24, 26, .35);
    margin: 0 10px;
}

/* ------------------------------------------------------------------ stars */

.ws-stars { color: var(--ws-tan); font-size: 15px; letter-spacing: .18em; }
.ws-dark .ws-stars, .ws-poster .ws-stars { color: #fff; }

/* --------------------------------------------------------------- container */

@container (max-width: 980px) {
    .ws-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ws-g3, .ws-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ws-split { grid-template-columns: minmax(0, 1fr); }
}

@container (max-width: 660px) {
    .ws-g2, .ws-g3, .ws-g4 { grid-template-columns: minmax(0, 1fr); }
    .ws-gal { grid-template-columns: minmax(0, 1fr); }
    .ws-gal > div { grid-column: auto !important; height: 270px !important; }
    .ws-form-grid { grid-template-columns: minmax(0, 1fr); }
    .ws-form-grid .ws-span2 { grid-column: auto; }
}

/*  The nav collapses on the container, not the viewport.

    Every other size in this file is measured against .ws-site, and a header
    that switched on the viewport instead was the one part of the page that
    could disagree with the rest of it. In production they are the same number,
    so this is consistency rather than a fix, but it means the whole design
    behaves correctly at any width it is given rather than only at widths that
    happen to be the window's.

    The drawer the button opens stays fixed to the viewport, which is right:
    it covers the screen, not the container. */
@container (max-width: 900px) {
    .ws-menu { display: none; }
    .ws-burger { display: inline-flex; margin-left: auto; }
    .ws-head-cta { display: none; }
    .ws-util .ws-util-end { margin-left: 0; }
}

@container (max-width: 560px) {
    .ws-util { display: none; }
}