/* ============================================================
   POWER PILATES STUDIO BRAND STYLESHEET
   ------------------------------------------------------------
   Source: Power Pilates Studio Brand Strategy (5 pages).
   Everything on the studio pages reads its colours, type and
   components from here. Page files carry layout only.

   FONTS
   Kepler Std and Proxima Nova are Adobe Fonts. Create a web
   project at fonts.adobe.com containing both families and put
   the kit id in the <link> tag on each page (see ADOBE_KIT_ID).
   Cormorant Garamond and Figtree are loaded from Google Fonts
   as fallbacks so the pages still look right if the kit is
   missing or blocked.

   Load order on each page:
     <link rel="stylesheet" href="https://use.typekit.net/ADOBE_KIT_ID.css">
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Figtree:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/_css/pp-brand.css">
   ============================================================ */

:root {
    /* ---- Brand palette, exactly as the guide names them ---- */
    --pp-terra:   #E2725B;   /* Terra Cotta: the accent. Large numerals, rules, primary buttons */
    --pp-black:   #1B1D1C;   /* Eerie Black: dark surfaces and headline type */
    --pp-olive:   #ADAFA4;   /* Pale Grey-Olive: muted type on black, hairlines on light */
    --pp-linen:   #EDEAE3;   /* Linen: page base */
    --pp-silver:  #CAC2B7;   /* Pale Silver: secondary panels, borders */
    --pp-lava:    #473C36;   /* Dark Lava: body text on light, secondary dark surfaces */

    /* ---- Tints. The guide shows each swatch with tint steps,
            these are the ones the pages use. ---- */
    --pp-linen-tint:  #F5F3EE;   /* one step lighter than Linen: raised sheets, inputs */
    --pp-black-tint:  #2A2C2B;   /* one step lighter than Eerie Black: hover on black */
    --pp-lava-tint:   #5A4E47;   /* one step lighter than Dark Lava: hover on lava */
    --pp-terra-deep:  #C4593F;   /* one step deeper than Terra Cotta: hover, small text.
                                    Terra Cotta itself only reaches 3:1 on Linen, so it
                                    is reserved for large type and surfaces. */

    /* ---- Type ---- */
    --pp-display: 'kepler-std', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --pp-body:    'proxima-nova', 'Figtree', 'Helvetica Neue', Arial, sans-serif;

    --pp-maxw: 1180px;
    --pp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   BASE. Everything is scoped to .pp so it cannot collide with
   Bootstrap in header_ns.php / newfooter.php.
   ============================================================ */
.pp {
    font-family: var(--pp-body);
    font-weight: 400;
    color: var(--pp-lava);
    background: var(--pp-linen);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

.pp h1, .pp h2, .pp h3, .pp h4, .pp p, .pp ul, .pp ol, .pp dl, .pp dd, .pp figure, .pp form {
    margin: 0;
    padding: 0;
}
.pp ul { list-style: none; }
.pp img { max-width: 100%; }
.pp a { color: inherit; }

.pp__wrap {
    max-width: var(--pp-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   TYPE SCALE
   Kepler Std is used light, the way the guide sets its own
   section titles. Proxima Nova carries everything else.
   ============================================================ */
.pp h1, .pp h2, .pp h3,
.pp-h1, .pp-h2, .pp-h3 {
    font-family: var(--pp-display);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--pp-black);
}

.pp-h1 { font-size: clamp(2.8rem, 6.2vw, 5rem);   line-height: 1.0; }
.pp-h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.06; }
.pp-h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.2; font-weight: 400; }

.pp-lede {
    font-size: 1.08rem;
    max-width: 58ch;
    color: var(--pp-lava);
}

/* The guide labels its own sections with a short rule and a
   plain word. Same device here, sentence case, no tracking. */
.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--pp-body);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--pp-lava);
}
.pp-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

/* Colour contexts. Add one of these to a dark section so type
   inside inherits the right values. */
.pp-on-black, .pp-on-lava {
    color: var(--pp-linen);
}
.pp-on-black h1, .pp-on-black h2, .pp-on-black h3, .pp-on-black .pp-h1, .pp-on-black .pp-h2, .pp-on-black .pp-h3,
.pp-on-lava  h1, .pp-on-lava  h2, .pp-on-lava  h3, .pp-on-lava  .pp-h1, .pp-on-lava  .pp-h2, .pp-on-lava  .pp-h3 {
    color: var(--pp-linen);
}
.pp-on-black .pp-eyebrow, .pp-on-lava .pp-eyebrow { color: var(--pp-olive); }
.pp-on-black .pp-lede,    .pp-on-lava .pp-lede    { color: var(--pp-olive); }

.pp-on-black { background: var(--pp-black); }
.pp-on-lava  { background: var(--pp-lava); }

/* ============================================================
   TEXTURE
   The guide allows patterns and textures at 5 to 30 percent.
   A fine grain over dark surfaces, 8 percent, nothing more.
   ============================================================ */
.pp-grain {
    position: relative;
    isolation: isolate;
}
.pp-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.08;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
}

/* ============================================================
   BUTTONS
   Terra Cotta with Eerie Black type, the same pairing as the
   approved logo lockups. Square corners, like the wordmark.
   ============================================================ */
.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--pp-body);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    padding: 18px 32px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.22s var(--pp-ease), color 0.22s var(--pp-ease),
                border-color 0.22s var(--pp-ease);
}
.pp-btn:hover, .pp-btn:focus-visible { text-decoration: none; }

.pp-btn--primary {
    background: var(--pp-terra);
    border-color: var(--pp-terra);
    color: var(--pp-black);
}
.pp-btn--primary:hover, .pp-btn--primary:focus-visible {
    background: var(--pp-terra-deep);
    border-color: var(--pp-terra-deep);
    color: var(--pp-black);
}

.pp-btn--dark {
    background: var(--pp-black);
    border-color: var(--pp-black);
    color: var(--pp-linen);
}
.pp-btn--dark:hover, .pp-btn--dark:focus-visible {
    background: var(--pp-lava);
    border-color: var(--pp-lava);
    color: var(--pp-linen);
}

.pp-btn--light {
    background: var(--pp-linen);
    border-color: var(--pp-linen);
    color: var(--pp-black);
}
.pp-btn--light:hover, .pp-btn--light:focus-visible {
    background: var(--pp-silver);
    border-color: var(--pp-silver);
    color: var(--pp-black);
}

.pp-btn--ghost {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}
.pp-btn--ghost:hover, .pp-btn--ghost:focus-visible {
    background: rgba(237, 234, 227, 0.12);
}

.pp-btn--block { width: 100%; }

.pp a:focus-visible, .pp button:focus-visible, .pp input:focus-visible {
    outline: 2px solid var(--pp-terra);
    outline-offset: 3px;
}

/* ============================================================
   FEATURE LIST
   Short terra cotta dash instead of a bullet.
   ============================================================ */
.pp-features {
    display: grid;
    gap: 11px;
}
.pp-features li {
    position: relative;
    padding-left: 26px;
    font-size: 0.97rem;
}
.pp-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 12px;
    height: 1px;
    background: var(--pp-terra);
}

/* ============================================================
   LEDGER
   The price breakdown used on the landing card, the checkout
   summary and the receipt. Colours come from three custom
   properties so the same markup works on black or linen.
   ============================================================ */
.pp-ledger {
    --ledger-muted:  var(--pp-olive);
    --ledger-strong: var(--pp-linen);
    --ledger-line:   rgba(173, 175, 164, 0.28);
    --ledger-accent: var(--pp-terra);

    border-top: 1px solid var(--ledger-line);
    padding-top: 6px;
    font-variant-numeric: tabular-nums;
}
.pp-ledger--light {
    --ledger-muted:  var(--pp-lava);
    --ledger-strong: var(--pp-black);
    --ledger-line:   var(--pp-silver);
    --ledger-accent: var(--pp-terra-deep);
}

.pp-ledger__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.94rem;
}
.pp-ledger__row dt { color: var(--ledger-muted); }
.pp-ledger__row::after {
    content: '';
    flex: 1;
    order: 2;
    border-bottom: 1px dotted var(--ledger-line);
    transform: translateY(-4px);
}
.pp-ledger__row dd {
    order: 3;
    font-weight: 500;
    color: var(--ledger-strong);
}
.pp-ledger__row--discount dd { color: var(--ledger-accent); }

.pp-ledger__row--total {
    border-top: 1px solid var(--ledger-line);
    margin-top: 4px;
    padding-top: 14px;
}
.pp-ledger__row--total dt {
    color: var(--ledger-strong);
    font-weight: 600;
    font-size: 0.9rem;
}
.pp-ledger__row--total dd {
    font-family: var(--pp-display);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--ledger-accent);
}

/* ============================================================
   PRICE
   ============================================================ */
.pp-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
}
.pp-price__now {
    font-family: var(--pp-display);
    font-weight: 300;
    font-size: clamp(3.6rem, 7vw, 5rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--pp-terra);
    font-variant-numeric: tabular-nums;
}
.pp-price__was {
    font-size: 1.2rem;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    color: var(--pp-olive);
    font-variant-numeric: tabular-nums;
}
.pp-price__save {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 12px;
    background: var(--pp-linen);
    color: var(--pp-black);
    white-space: nowrap;
}

/* ============================================================
   STATUS BAR (test mode, notices)
   ============================================================ */
.pp-testbar {
    background: var(--pp-terra);
    color: var(--pp-black);
    text-align: center;
    padding: 12px 20px;
    font-size: 0.86rem;
    font-weight: 600;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .pp *, .pp *::before, .pp *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}