/* =====================================================================
   Styled by Tilly - site.css  (single stylesheet, plan Phase 02)
   Structure: SHARED CORE (from home) then one section per page for that
   page's unique rules. Page-specific tier restyles are scoped under a
   body page-class so they never bleed onto other pages.
   ===================================================================== */


/* ============================ SHARED CORE ============================ */

:root{ --heart:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 29C7 22 1 16.5 1 10.2 1 5.1 4.8 1 9.6 1c3 0 5.2 1.6 6.4 3.6C17.2 2.6 19.4 1 22.4 1 27.2 1 31 5.1 31 10.2 31 16.5 25 22 16 29z' fill='%23000'/%3E%3C/svg%3E"); --stripe-svg:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='600' viewBox='0 0 300 600'%3E%3Cg fill='%230A0A0A'%3E%3Cpath d='M18 0c5 100-6 200 2 300s-4 200 1 300h13c-5-100 4-200-1-300s7-200 2-300z'/%3E%3Cpath d='M74 0c-6 120 5 240-2 360s3 160-2 240h14c5-80-4-120 3-240s-4-240 2-360z'/%3E%3Cpath d='M133 0c4 90-7 180 1 270s-5 240 1 330h12c-6-90 4-240-1-330s8-180 3-270z'/%3E%3Cpath d='M192 0c-5 140 6 280-1 420s2 120-2 180h13c4-60-3-40 2-180s-5-280 1-420z'/%3E%3Cpath d='M249 0c5 110-6 220 2 330s-4 190 1 270h13c-5-80 3-160-2-270s7-220 2-330z'/%3E%3C/g%3E%3C/svg%3E"); }

/* ============================================================
   STYLED BY TILLY — DESIGN SYSTEM
   Lane: fashion-masthead editorial × hand-drawn boutique brand
   Type: Archivo (grotesque workhorse) + Bodoni Moda (didone accent)
   Colour: Committed — ink/paper carried by hot pink, with the
   four polaroid frame colours sampled from Tilly's own decks.
   ============================================================ */

:root{
  /* --- core --- */
  --ink:        #0A0A0A;
  --ink-2:      #1C1C1C;
  --paper:      #FFFFFF;
  --paper-2:    #F2F0EE;   /* true off-white, chroma pulled to neutral */
  --paper-3:    #E7E4E1;

  /* --- brand accent (sampled from Logo.webp: #FF62C7) --- */
  --pink:       #FF52BE;
  --pink-deep:  #C4007E;   /* text-safe on paper: 4.9:1 */
  --pink-soft:  #FFE9F6;

  /* --- polaroid palette (sampled from her mood boards) --- */
  --magenta:    #B00F83;
  --purple:     #4D087E;
  --navy:       #201861;
  --taupe:      #A08D86;

  /* --- text --- */
  --fg:         #0A0A0A;
  --fg-2:       #4A4A4A;   /* 8.9:1 on paper */
  --fg-3:       #6E6E6E;   /* 5.1:1 on paper — floor for small text */
  --line:       rgba(10,10,10,.14);
  --line-soft:  rgba(10,10,10,.08);

  /* --- type --- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --didone:  'Bodoni Moda', Georgia, serif;

  /* --- rhythm --- */
  --gut: clamp(1.25rem, 3.2vw, 2.25rem);
  --sec: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1440px;

  /* --- z-scale (semantic, never arbitrary) --- */
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 300;

  --ease: cubic-bezier(.16,1,.3,1);
}

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

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

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--fg);
  font-family:var(--body); font-size:16px; line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; height:auto; }

a{ color:inherit; }

::selection{ background:var(--pink); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--pink-deep);
  outline-offset:3px;
  border-radius:2px;
}

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:var(--z-overlay);
  background:var(--ink); color:#fff; padding:.9rem 1.4rem; font-weight:700;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
}

.skip:focus{ left:.5rem; top:.5rem; }

/* ============================================================
   TYPE
   ============================================================ */

.masthead{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(3rem, 13vw, 9.5rem);
  line-height:.82;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}

/* The page mastheads sit in ONE HALF of .page-hero-grid, but 13vw is measured
   against the whole viewport, so long words (SERVICES, ANALYSIS) grew wider
   than their column and ran over the text beside them. From here up the
   masthead is sized to fit that half instead. Measured: the grid splits into
   two columns at 688px, so this starts just under it. The widest word is
   5.31em, hence the 7.5rem cap: 5.31 x 120px = 637px, inside the 656px column
   the grid settles at once the page hits its 1440px max width. */
@media (min-width:680px){
  .masthead{ font-size:clamp(3rem, 8vw, 7.5rem); }
}

.masthead .oblique{ font-style:italic; display:block; }
.hero-mast{ line-height:0; }
.hero-logo{ display:block; width:clamp(240px, 46vw, 560px); height:auto; max-width:100%; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:800; margin:0; text-wrap:balance; }

.h-xl{ font-size:clamp(2.4rem, 7vw, 5.5rem); line-height:.9;  letter-spacing:-.035em; text-transform:uppercase; }

.h-lg{ font-size:clamp(2rem, 4.6vw, 3.4rem);  line-height:.96; letter-spacing:-.03em;  text-transform:uppercase; }

.h-md{ font-size:clamp(1.4rem, 2.4vw, 2rem);  line-height:1.05;letter-spacing:-.02em;  text-transform:uppercase; }

.h-sm{ font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.2; letter-spacing:-.01em; }

/* the didone is the *quiet* voice — shape names, pull quotes, numerals */
.didone{ font-family:var(--didone); font-weight:400; font-style:italic; letter-spacing:0; text-transform:none; }

.lede{
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.55; color:var(--fg-2); max-width:60ch;
  text-wrap:pretty;
}

p{ text-wrap:pretty; max-width:72ch; }

/* tiny credit / metadata type — lifted straight from the reference's
   photo-credit blocks. Used for FACTS, never as a section eyebrow. */
.meta{
  font-size:.6875rem; line-height:1.65; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; color:var(--fg-3);
}

.meta b, .meta strong{ color:var(--fg); font-weight:700; }

.meta-pink{ color:var(--pink-deep); }

/* Membership footnote (home + services): 30% larger than .meta — .6875rem x 1.3
   — and centred, with auto side margins so the block centres too, not just the
   text inside it. Declared after .meta so it wins on source order. */
.membership-note{ font-size:.89375rem; text-align:center; margin:1.75rem auto 0; }

/* The one named brand marker. Deliberate system, used sparingly —
   never stacked above every section. */
.mark{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pink-deep);
}

.mark::before{
  content:""; width:15px; height:14px; flex:none;
  background:var(--pink-deep);
  -webkit-mask:var(--heart) center/contain no-repeat;
  mask:var(--heart) center/contain no-repeat;
}

.mark-light{ color:var(--pink); }

.mark-light::before{ background:var(--pink); }

/* ============================================================
   SIGNATURE MOTIF — the hand-drawn stripe field from her decks
   ============================================================ */
.stripes{
  --stripe-c: rgba(10,10,10,.9);
  background-image:var(--stripe-svg);
  background-size:auto 100%;
  background-repeat:repeat-x;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}

.hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; height:clamp(58px,7vw,74px);
}

.hdr-logo img{ height:clamp(34px,4.2vw,47px); width:auto; }

.hdr-logo{ display:flex; align-items:center; flex:none; }

/* Touch devices: the logo image is only 34px tall. The link keeps the image
   the same size but claims a 44px tap box around it. */
@media (pointer:coarse){
  .hdr-logo{ min-height:44px; }
}

.nav{ display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem); }

.nav a{
  font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--fg);
  padding:.4rem 0; position:relative; white-space:nowrap;
  transition:color .25s var(--ease);
}

.nav a:hover{ color:var(--pink-deep); }

.nav a.active{ color:var(--pink-deep); }

.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--pink);
}

.hdr-cta{
  font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:.72rem 1.15rem; text-decoration:none;
  transition:background .25s var(--ease);
  white-space:nowrap;
}

.hdr-cta:hover{ background:var(--pink-deep); }

.burger{
  display:none; background:none; border:1px solid var(--line);
  width:42px; height:42px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}

.burger span{ display:block; width:18px; height:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }

.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }

.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }

.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 900px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:auto 0 0 0; top:var(--hdr-h,64px);
    background:var(--ink); flex-direction:column; align-items:stretch;
    gap:0; padding:.5rem 0 2rem; transform:translateY(calc(-100% - var(--hdr-h, 64px)));
    transition:transform .45s var(--ease); z-index:var(--z-nav);
    height:calc(100dvh - var(--hdr-h,64px)); overflow:auto;
  }
  .nav[data-open="true"]{ transform:translateY(0); }
  .nav a{ color:#fff; font-size:1.6rem; letter-spacing:-.02em; padding:.85rem var(--gut);
          border-bottom:1px solid rgba(255,255,255,.12); }
  .nav a.active{ color:var(--pink); }
  .nav a.active::after{ display:none; }
  .hdr-cta{ display:none; }
  /* The header Join button is hidden at this width, so the open menu carries it. */
  .nav .nav-cta{
    display:flex; justify-content:center; background:var(--pink); color:var(--ink);
    margin:1.5rem var(--gut) 0; padding:1.05rem 1.4rem; border-bottom:0;
    font-size:.85rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  }
  .nav .nav-cta.active, .nav .nav-cta:hover{ color:var(--ink); }
}

/* Desktop keeps the Join button in the header, so the menu copy stays hidden. */
.nav-cta{ display:none; }

@media (prefers-reduced-motion: reduce){
  .nav{ transition:opacity .2s linear; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--display); font-size:.78rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 1.7rem; border:2px solid var(--ink); background:var(--ink);
  color:#fff; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.btn:hover{ background:var(--pink-deep); border-color:var(--pink-deep); color:#fff; }

.btn-ghost{ background:transparent; color:var(--ink); }

.btn-ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.btn-pink{ background:var(--pink); border-color:var(--pink); color:var(--ink); }

.btn-pink:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

.btn-on-dark{ background:#fff; border-color:#fff; color:var(--ink); }

.btn-on-dark:hover{ background:var(--pink); border-color:var(--pink); color:var(--ink); }

.btn-ghost-dark{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }

.btn-ghost-dark:hover{ background:#fff; border-color:#fff; color:var(--ink); }

.btn .arw{ transition:transform .3s var(--ease); }

.btn:hover .arw{ transform:translateX(4px); }

.tlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-bottom:2px solid var(--ink); padding-bottom:.3rem;
  transition:color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}

.tlink:hover{ color:var(--pink-deep); border-color:var(--pink-deep); gap:.85rem; }

/* Touch devices: these text links are only ~25px tall, under the 44px minimum
   for a comfortable tap. An invisible centred overlay grows the hit area
   without moving a single pixel of the layout. */
@media (pointer:coarse){
  .tlink{ position:relative; }
  .tlink::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%);
  }
}

.tlink-light{ color:#fff; border-color:rgba(255,255,255,.55); }

.tlink-light:hover{ color:var(--pink); border-color:var(--pink); }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding-block:var(--sec); }

.sec-tight{ padding-block:clamp(3rem,6vw,5rem); }

.sec-dark{ background:var(--ink); color:#fff; }

.sec-dark .lede, .sec-dark p{ color:rgba(255,255,255,.76); }

.sec-dark .meta{ color:rgba(255,255,255,.58); }

.sec-dark .meta b{ color:#fff; }

.sec-alt{ background:var(--paper-2); }

.sec-pink{ background:var(--pink); }

.rule{ border:0; border-top:1px solid var(--line); margin:0; }

.rule-thick{ border:0; border-top:2px solid var(--ink); margin:0; }

/* section masthead: giant type broken across two weights,
   straight from the reference's "ABOUT SICKY MAGAZINE" lockup */
.sec-title{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .35em; }

.sec-title .thin{ font-weight:400; }

/* ============================================================
   PHOTO STACK — overlapping offset frames (reference signature)
   ============================================================ */
.stack{ position:relative; }

.stack img, .stack .ph{ position:relative; z-index:var(--z-raised); }

.stack::after{
  content:""; position:absolute; inset:0;
  transform:translate(18px,18px); z-index:var(--z-base);
  background:var(--ink);
}

.stack-pink::after{ background:var(--pink); }

.stack-navy::after{ background:var(--navy); }

.stack-magenta::after{ background:var(--magenta); }

/* polaroid — her own mood-board device, rebuilt in CSS */
.pola{
  background:var(--navy); padding:14px 14px 46px; display:block;
  box-shadow:0 12px 34px rgba(10,10,10,.18);
  transition:transform .45s var(--ease);
}

.pola img{ width:100%; }

.pola-cap{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:#fff; padding-top:12px;
}

.pola-magenta{ background:var(--magenta); }

.pola-purple{ background:var(--purple); }

.pola-taupe{ background:var(--taupe); }

.pola-pink{ background:var(--pink); }

.pola-pink .pola-cap{ color:var(--ink); }

/* ============================================================
   MARQUEE (reference: "EMBRACE THE DIFFERENCE ·" ticker)
   ============================================================ */
.marquee{
  border-block:2px solid var(--ink); overflow:hidden; padding-block:.85rem;
  background:var(--pink);
}

.marquee-track{
  display:flex; gap:0; width:max-content;
  animation:mq 38s linear infinite;
}

.marquee-track span{
  font-family:var(--display); font-weight:900; font-size:clamp(1.1rem,2.4vw,1.9rem);
  letter-spacing:-.02em; text-transform:uppercase; padding-inline:1.1rem;
  color:var(--ink); white-space:nowrap;
}

@keyframes mq{ to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .marquee{ overflow-x:auto; }
}

/* ============================================================
   REVEAL — enhances an already-visible default (never gates content)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .rv.in{ opacity:1; transform:none; }
  .no-js .rv{ opacity:1; transform:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:#fff; padding-block:clamp(3.5rem,7vw,6rem) 2rem; }

.ft-top{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:end; }

.ft-cta h2{ color:#fff; }

.ft-arrow{ justify-self:end; }

.ft-arrow svg{ width:clamp(52px,7vw,96px); height:auto; }

.ft-grid{
  display:grid; grid-template-columns:200px 1fr; gap:0 clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid rgba(255,255,255,.2);
}

.ft-grid > div{ padding-block:1.15rem; }

.ft-label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:700; }

.ft-links{ list-style:none; margin:0; padding:0; }

.ft-links li{ border-bottom:1px solid rgba(255,255,255,.16); }

.ft-links li:first-child{ border-top:1px solid rgba(255,255,255,.16); }

.ft-links a{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.85rem 0; text-decoration:none; font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  transition:color .25s var(--ease), padding-left .3s var(--ease);
}

.ft-links a:hover{ color:var(--pink); padding-left:.55rem; }

.ft-bottom{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.2); margin-top:2.5rem; padding-top:1.5rem;
}

.ft-bottom, .ft-bottom a{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); }

.ft-bottom a{ text-decoration:none; }

.ft-bottom a:hover{ color:var(--pink); }

/* Touch devices: the legal links sit at ~11px tall. Padding lifts them to a
   44px tap target; the negative margin keeps the footer line spaced as before. */
@media (pointer:coarse){
  .ft-bottom a{ display:inline-block; padding:.85rem .4rem; margin:-.85rem -.4rem; }
}

.ft-word{ padding-top:clamp(2rem,5vw,3.5rem); }

.ft-word img{ width:min(100%,420px); margin-inline:auto; }

@media (max-width:820px){
  .ft-top{ grid-template-columns:1fr; }
  .ft-arrow{ justify-self:start; }
  .ft-grid{ grid-template-columns:1fr; gap:0; }
  .ft-grid > div:first-child{ padding-bottom:.4rem; }
}

/* ============================================================
   PLACEHOLDER (content Tilly still needs to supply)
   ============================================================ */
.ph{
  position:relative; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem; min-height:120px;
  background:
    repeating-linear-gradient(45deg, var(--paper-3) 0 10px, var(--paper-2) 10px 20px);
  border:2px dashed rgba(10,10,10,.28);
  color:var(--fg-2);
}

.ph::before{
  content:"TO SUPPLY"; position:absolute; top:0; left:0;
  background:var(--ink); color:var(--pink); font-size:.6rem; font-weight:800;
  letter-spacing:.14em; padding:.3rem .55rem;
}

.ph-note{ font-size:.75rem; letter-spacing:.06em; max-width:34ch; line-height:1.5; }

.ph-img{ aspect-ratio:4/5; }

.ph-copy{ text-align:left; align-items:flex-start; }

/* ---------- HERO ---------- */
.hero{ padding-top:clamp(1.5rem,4vw,3.5rem); padding-bottom:clamp(2rem,4vw,3rem); position:relative; }

.hero-grid{ position:relative; min-height:clamp(420px, 34vw, 640px); display:flex; align-items:center; }

.hero h1{ position:relative; z-index:3; mix-blend-mode:normal; }

.hero h1 .l2{ display:block; margin-left:.05em; }

.hero-photos{ position:absolute; top:-2%; right:0; width:38%; z-index:1; }

.hero-photos img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06); }

.hero-p1{ position:relative; z-index:2; width:74%; margin-left:auto; aspect-ratio:3/4; }

/* Tilly's own photo runs in full colour; the rail behind it keeps the mono + pink treatment. */
.hero-p1 img{ filter:none; }

.hero-p2{ position:absolute; top:34%; left:-14%; width:62%; aspect-ratio:3/4; z-index:1; }

.hero-p2::after{ content:""; position:absolute; inset:0; background:var(--pink); mix-blend-mode:multiply; opacity:.4; }

/* the second line of the masthead runs *under* the photo edge, exactly like
   the reference lockup — so the type and the image share the same air */
.hero h1 .l2{ position:relative; z-index:4; }

.hero-cap{ margin-top:-4.5rem; display:flex; flex-wrap:wrap; gap:1.4rem clamp(1.5rem,4vw,3.5rem); align-items:flex-start; }

.hero-cap .meta{ max-width:34ch; }

@media (max-width:860px){
  .hero-grid{ display:block; min-height:0; }
  .hero-cap{ margin-top:1.75rem; }
  .hero-photos{ position:relative; width:100%; top:0; margin-top:1.75rem; padding-bottom:3rem; }
  .hero-p1{ width:70%; }
  .hero-p2{ top:auto; bottom:0; left:0; width:52%; }
}

/* ---------- ABOUT LOCKUP ---------- */
.about-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2.5vw,1.75rem); margin-top:clamp(2rem,4vw,3rem); }

.ab-a{ grid-column:1/6; }

.ab-b{ grid-column:6/9; margin-top:-8%; }

.ab-c{ grid-column:9/13; }

.ab-d{ grid-column:1/6; }

.ab-a img,.ab-b img,.ab-e img{ width:100%; aspect-ratio:3/4; object-fit:cover; }

.ab-e{ grid-column:8/12; margin-top:-14%; }

.why-photo{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }

.big-num{ font-family:var(--display); font-weight:900; font-size:clamp(3rem,9vw,7rem); line-height:.82; letter-spacing:-.04em; }

.big-num .thin{ font-weight:400; display:block; text-align:right; }

@media (max-width:860px){
  .ab-a{ grid-column:1/8; } .ab-b{ grid-column:8/13; margin-top:12%; }
  .ab-c{ grid-column:1/13; } .ab-d{ grid-column:1/13; } .ab-e{ grid-column:4/13; margin-top:0; }
}

/* ---------- PAIN POINTS ---------- */
.asks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0; border-top:2px solid var(--ink); }

.ask{ padding:clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2vw,2rem) clamp(2.5rem,4vw,3.5rem);
      border-bottom:2px solid var(--ink); border-right:1px solid var(--line); }

.ask:last-child{ border-right:0; }

.ask-n{ font-family:var(--didone); font-style:italic; font-size:2.4rem; line-height:1; color:var(--pink-deep); }

.ask p{ margin:1rem 0 0; font-size:clamp(1.05rem,1.6vw,1.35rem); font-weight:600; line-height:1.35; letter-spacing:-.015em; }

/* ---------- SPLIT FEATURE ---------- */
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }

.split-rev > *:first-child{ order:2; }

.split img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

@media (max-width:760px){ .split-rev > *:first-child{ order:0; } }

/* ---------- MEMBERSHIP ---------- */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1rem,2vw,1.5rem); margin-top:clamp(2rem,4vw,3rem); }

.tier{ border:2px solid rgba(255,255,255,.28); padding:clamp(1.6rem,3vw,2.4rem); display:flex; flex-direction:column; }

.tier-hi{ background:var(--pink); border-color:var(--pink); color:var(--ink); }

.tier-hi .lede,.tier-hi p,.tier-hi .meta{ color:rgba(10,10,10,.78); }

.tier-hi .meta b{ color:var(--ink); }

.tier-price{ display:flex; align-items:baseline; gap:.5rem; margin:1.1rem 0 .35rem; }

.tier-price b{ font-family:var(--display); font-weight:900; font-size:clamp(2.6rem,5vw,3.6rem); letter-spacing:-.04em; line-height:1; }

.tier-price s{ opacity:.5; font-size:1rem; }

.tier ul{ list-style:none; margin:1.6rem 0 2rem; padding:0; display:grid; gap:.85rem; }

.tier li{ display:flex; gap:.7rem; font-size:.94rem; line-height:1.45; }

.tier li::before{ content:""; flex:none; width:13px; height:12px; margin-top:.36rem; background:currentColor;
  -webkit-mask:var(--heart) center/contain no-repeat; mask:var(--heart) center/contain no-repeat; }

.tier .btn{ margin-top:auto; justify-content:center; }

.slots{ display:flex; align-items:center; gap:.9rem; margin-top:1.5rem; flex-wrap:wrap; }

.slots-bar{ flex:1 1 180px; height:8px; background:rgba(255,255,255,.2); position:relative; min-width:140px; }

.slots-bar i{ position:absolute; inset:0 auto 0 0; width:40%; background:var(--pink); }

.tier-hi .slots-bar{ background:rgba(10,10,10,.18); }

.tier-hi .slots-bar i{ background:var(--ink); }

/* ---------- SERVICES ---------- */
.svc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); border-top:2px solid var(--ink); }

.svc-item{ border-bottom:2px solid var(--ink); border-right:1px solid var(--line); padding:clamp(1.5rem,2.5vw,2.2rem) clamp(1.1rem,2vw,1.8rem);
  display:flex; flex-direction:column; gap:.8rem; text-decoration:none; transition:background .3s var(--ease); }

.svc-item:last-child{ border-right:0; }

.svc-item:hover{ background:var(--pink-soft); }

.svc-price{ font-family:var(--didone); font-style:italic; font-size:2rem; line-height:1; }

.svc-item p{ font-size:.92rem; color:var(--fg-2); margin:0; flex:1; }

/* ---------- CROSS LINKS ---------- */
.duo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2px; background:var(--ink); }

.duo a{ position:relative; display:block; padding:clamp(2rem,5vw,4rem); text-decoration:none; color:#fff;
        min-height:clamp(320px,42vw,460px); display:flex; flex-direction:column; justify-content:flex-end;
        overflow:hidden; isolation:isolate; }

.duo a img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1;
            filter:brightness(.72); transition:transform .8s var(--ease), filter .6s var(--ease); }

.duo a:hover img{ transform:scale(1.05); filter:brightness(.6); }

.duo a::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.85) 100%); }

@media (prefers-reduced-motion: reduce){ .duo a img{ transition:none; } .duo a:hover img{ transform:none; } }


/* ---------- TESTIMONIALS ---------- */
.quotes{ display:grid; gap:clamp(.9rem,2vw,1.4rem); }

.quote{ margin:0; background:var(--paper-2); border-left:3px solid var(--pink);
        padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,2rem); }

.quote blockquote{ margin:0; }

.quote blockquote p{ margin:0; font-size:clamp(1rem,1.35vw,1.1rem); line-height:1.65; }

.quote blockquote p::before{ content:"\201C"; }
.quote blockquote p::after{ content:"\201D"; }

.quote figcaption{ margin-top:1.1rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.65rem; }

.quote cite{ font-style:normal; font-weight:700; font-size:.78rem;
             letter-spacing:.12em; text-transform:uppercase; }

.quote .q-svc{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); }

.quote .q-svc::before{ content:"\2014\00a0"; }



/* ============================ PAGE: Body Analysis ============================ */

.page-hero{ padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3.5rem); }

.page-hero-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.5rem,4vw,3.5rem); align-items:end; }

.shapelist{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:1.75rem; list-style:none; padding:0; }

.shapelist a{
  font-family:var(--didone); font-style:italic; font-size:clamp(1.3rem,3vw,2.1rem);
  text-decoration:none; border-bottom:2px solid transparent; transition:border-color .25s var(--ease), color .25s var(--ease);
}

.shapelist a:hover{ color:var(--pink-deep); border-color:var(--pink-deep); }

/* Touch devices: the six shape jump-links are ~33px tall. Same invisible
   overlay trick as .tlink, so the type keeps its exact position. */
@media (pointer:coarse){
  .shapelist a{ position:relative; display:inline-block; }
  .shapelist a::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%);
  }
}

/* --- why book --- */
.why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); border-top:2px solid var(--ink); }

.why-item{ border-bottom:2px solid var(--ink); border-right:1px solid var(--line); padding:clamp(1.4rem,2.5vw,2rem) clamp(1rem,2vw,1.6rem) clamp(2rem,3vw,2.6rem); }

.why-item:last-child{ border-right:0; }

.why-item h3{ font-size:1rem; letter-spacing:-.01em; text-transform:uppercase; }

.why-item p{ font-size:.9rem; color:var(--fg-2); margin:.7rem 0 0; }

/* --- six-shape diagram --- */
.six-diagram{
  display:block; width:100%; height:auto; max-width:620px;
  margin-inline:auto; border:1px solid var(--line);
}
/* --- shape blocks --- */
.shape{ padding-block:clamp(3rem,6vw,5.5rem); border-top:1px solid var(--line); scroll-margin-top:90px; }

.shape-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem 2rem; }

.shape-head h2{ font-family:var(--didone); font-style:italic; font-weight:400; text-transform:none;
  font-size:clamp(2.4rem,7vw,5rem); line-height:.95; letter-spacing:-.01em; }

.shape-idx{ font-family:var(--display); font-weight:900; font-size:clamp(2rem,5vw,3.5rem); color:var(--paper-3); line-height:1; letter-spacing:-.04em; }

.shape-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); margin-top:clamp(1.5rem,3vw,2.5rem); align-items:start; }

.shape-board img{ width:100%; }

.shape-lower{ display:grid; grid-template-columns:200px 1fr; gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(1.5rem,3vw,2.5rem); align-items:start; }

.shape-lbd img{ width:100%; aspect-ratio:5/7; object-fit:cover; }

.rules{ list-style:none; margin:0; padding:0; column-count:2; column-gap:clamp(1.5rem,3vw,2.5rem); }

.rules li{ break-inside:avoid; padding:.7rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:96px 1fr; gap:.75rem; }

.rules dt, .rules b{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pink-deep); padding-top:.15rem; }

.rules span{ font-size:.92rem; line-height:1.45; color:var(--fg); }

.assets-line{ font-size:clamp(1rem,1.7vw,1.25rem); line-height:1.4; font-weight:600; letter-spacing:-.01em; margin:0; }

@media (max-width:900px){
  .shape-grid{ grid-template-columns:1fr; }
  .shape-lower{ grid-template-columns:140px 1fr; }
  .rules{ column-count:1; }
  .rules li{ grid-template-columns:88px 1fr; }
}

@media (max-width:520px){
  .shape-lower{ grid-template-columns:1fr; }
  .shape-lbd{ max-width:180px; }
}



/* ============================ PAGE: Colour Analysis ============================ */

.page-hero{ padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3.5rem); }

.page-hero-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.5rem,4vw,3.5rem); align-items:end; }

.wheel{ width:100%; max-width:460px; height:auto; }

.wheel .wax{ stroke:var(--line); stroke-width:1; }

.wheel .wl{ font-family:var(--display); font-size:8.5px; font-weight:800; letter-spacing:.06em; fill:#fff; }

.wheel .wa{ font-family:var(--display); font-size:10px; font-weight:800; letter-spacing:.14em; fill:var(--fg-3); }

.wheel .wq{ font-family:var(--didone); font-style:italic; font-size:19px; fill:var(--fg); }

.sec-dark .wheel .wa{ fill:rgba(255,255,255,.6); }

.sec-dark .wheel .wq{ fill:#fff; }

.sec-dark .wheel .wax{ stroke:rgba(255,255,255,.22); }

.seasons{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; list-style:none; padding:0; margin:1.5rem 0 0; }

.seasons li{ font-family:var(--didone); font-style:italic; font-size:clamp(1.4rem,3.4vw,2.4rem); }

.drape{ background:var(--pink); padding:clamp(1.6rem,3.5vw,2.6rem); }

.drape p{ margin:0; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--ink); max-width:26ch; }

.why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); border-top:2px solid var(--ink); }

.why-item{ border-bottom:2px solid var(--ink); border-right:1px solid var(--line); padding:clamp(1.4rem,2.5vw,2rem) clamp(1rem,2vw,1.6rem) clamp(2rem,3vw,2.6rem); }

.why-item:last-child{ border-right:0; }

.why-item h3{ font-size:1rem; letter-spacing:-.01em; text-transform:uppercase; }

.why-item p{ font-size:.9rem; color:var(--fg-2); margin:.7rem 0 0; }

/* --- who is it for --- */
.who{ display:grid; gap:2px; background:var(--line); margin-top:clamp(2rem,4vw,3rem); }

.who-item{ background:var(--paper); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
           gap:clamp(1.25rem,3vw,2.5rem); padding:clamp(1.6rem,3vw,2.6rem) 0; align-items:center; }

.who-item:nth-child(even){ direction:rtl; }

.who-item:nth-child(even) > *{ direction:ltr; }

.who-item img{ width:100%; aspect-ratio:5/4; object-fit:cover; }

.who-item h3{ font-family:var(--didone); font-style:italic; font-weight:400; text-transform:none;
  font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.05; }

.who-item p{ margin:1rem 0 0; color:var(--fg-2); }

@media (max-width:760px){
  .who-item{ grid-template-columns:1fr; }
  .who-item:nth-child(even){ direction:ltr; }
}



/* ============================ PAGE: Services ============================ */

.page-hero{ padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3rem); }

.page-hero-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.5rem,4vw,3.5rem); align-items:end; }

/* --- founding counter --- */
.counter{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2px; background:var(--ink); border:2px solid var(--ink); margin-top:clamp(1.5rem,3vw,2.5rem); }

.counter div{ background:var(--paper); padding:1.2rem 1.4rem; }

.counter b{ display:block; font-family:var(--display); font-weight:900; font-size:clamp(1.8rem,4vw,2.8rem); line-height:1; letter-spacing:-.04em; }

.counter span{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }

.counter .hot b{ color:var(--pink-deep); }

/* --- tiers --- */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(1rem,2vw,1.5rem); margin-top:clamp(2rem,4vw,3rem); }

.page-services .tier { border:2px solid var(--ink); padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; }

.page-services .tier-hi { background:var(--ink); color:#fff; }

.tier-hi p,.tier-hi .lede{ color:rgba(255,255,255,.76); }

.tier-hi .meta{ color:rgba(255,255,255,.6); }

.page-services .tier-hi .meta b { color:#fff; }

.tier-flag{ display:inline-block; background:var(--pink); color:var(--ink); font-size:.62rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; padding:.35rem .6rem; margin-bottom:1rem; }

.page-services .tier-price { display:flex; align-items:baseline; gap:.55rem; margin:1rem 0 .3rem; flex-wrap:wrap; }

.page-services .tier-price b { font-family:var(--display); font-weight:900; font-size:clamp(2.8rem,6vw,4rem); letter-spacing:-.045em; line-height:1; }

.page-services .tier-price s { opacity:.55; font-size:1rem; }

.page-services .tier ul { list-style:none; margin:1.5rem 0 2rem; padding:0; display:grid; gap:.9rem; }

.page-services .tier li { display:flex; gap:.7rem; font-size:.95rem; line-height:1.45; }

.page-services .tier li::before { content:""; flex:none; width:13px; height:12px; margin-top:.34rem; background:var(--pink-deep);
  -webkit-mask:var(--heart) center/contain no-repeat; mask:var(--heart) center/contain no-repeat; }

.tier-hi li::before{ background:var(--pink); }

.tier-note{ font-size:.72rem; color:var(--fg-3); margin-top:.9rem; text-align:center; }

.tier-hi .tier-note{ color:rgba(255,255,255,.55); }

/* --- one-off services --- */
.oneoff{ display:grid; gap:2px; background:var(--line); }

.oo{ background:var(--paper); display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
     gap:clamp(1.25rem,3vw,3rem); padding:clamp(1.8rem,3.5vw,3rem) 0; align-items:start; scroll-margin-top:90px; }

.oo img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:grayscale(1); }

.oo-price{ font-family:var(--display); font-weight:900; font-size:clamp(2.4rem,5vw,3.6rem); letter-spacing:-.045em; line-height:1; }

.oo h3{ font-family:var(--didone); font-style:italic; font-weight:400; text-transform:none;
  font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.05; margin-top:.4rem; }

.oo p{ margin:1.1rem 0 0; color:var(--fg-2); }

.oo-buy{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.75rem; align-items:center; }

.oo-inc{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--pink-deep); }

@media (max-width:760px){ .oo{ grid-template-columns:1fr; } }

/* --- how payment works --- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2px; background:rgba(255,255,255,.22); margin-top:clamp(2rem,4vw,3rem); }

.step{ background:var(--ink); padding:clamp(1.4rem,3vw,2rem); }

.step b{ font-family:var(--didone); font-style:italic; font-size:1.8rem; color:var(--pink); display:block; }

.step h3{ font-size:.95rem; text-transform:uppercase; margin-top:.7rem; color:#fff; }

.step p{ font-size:.86rem; margin:.6rem 0 0; }

/* --- FAQ accordion --- */
.faq{ border-top:1px solid var(--line); }

.faq-item{ border-bottom:1px solid var(--line); }

.faq-item summary{ list-style:none; cursor:pointer; position:relative;
  padding:1.15rem 2.5rem 1.15rem 0; font-weight:700; font-size:1rem; line-height:1.4; }

.faq-item summary::-webkit-details-marker{ display:none; }

.faq-item summary:hover{ color:var(--pink-deep); }

/* Plus sign that becomes a minus when the answer is open. */
.faq-item summary::after{ content:""; position:absolute; right:.4rem; top:50%; width:14px; height:2px;
  background:var(--ink); transform:translateY(-50%); }

.faq-item summary::before{ content:""; position:absolute; right:.4rem; top:50%; width:14px; height:2px;
  background:var(--ink); transform:translateY(-50%) rotate(90deg); transition:transform .25s var(--ease); }

.faq-item[open] summary::before{ transform:translateY(-50%) rotate(0deg); }

.faq-item summary:hover::before, .faq-item summary:hover::after{ background:var(--pink-deep); }

.faq-a{ padding:0 2.5rem 1.35rem 0; }

.faq-a p{ margin:0; color:var(--fg-2); font-size:.95rem; line-height:1.65; max-width:56ch; }

@media (prefers-reduced-motion: reduce){ .faq-item summary::before{ transition:none; } }



/* ============================ PAGE: Contact ============================ */

.page-hero{ padding-block:clamp(2.5rem,6vw,5rem) clamp(1.5rem,3vw,2.5rem); }

.page-hero-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.5rem,4vw,3.5rem); align-items:end; }

.contact-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }

@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* --- form --- */
.field{ margin-bottom:1.5rem; }

.field label{ display:block; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.55rem; }

.field .hint{ font-size:.75rem; color:var(--fg-3); font-weight:500; letter-spacing:0; text-transform:none; display:block; margin-top:.25rem; }

.field input, .field select, .field textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--fg);
  background:var(--paper); border:2px solid var(--ink); padding:.9rem 1rem;
  border-radius:0; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.field textarea{ min-height:150px; resize:vertical; }

.field input::placeholder, .field textarea::placeholder{ color:var(--fg-3); }

.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--pink-deep); }

.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:none; border-color:var(--pink-deep); box-shadow:0 0 0 3px var(--pink-soft); }

.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:2.75rem; }

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

.form-note{ font-size:.78rem; color:var(--fg-2); margin-top:1.25rem; max-width:52ch; }

.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color:var(--fg-2); }

.consent input{ width:20px; height:20px; flex:none; margin-top:.15rem; accent-color:var(--pink-deep); border-width:2px; }

/* Touch devices: a 20px tick box is a fiddly tap. The whole label already
   toggles it, but the box itself gets closer to the 44px minimum too. */
@media (pointer:coarse){
  .consent{ padding:.35rem 0; }
  .consent input{ width:26px; height:26px; margin-top:0; }
}

/* success state — hidden by default, shown after submit in the built site */
.sent{ display:none; border:2px solid var(--ink); background:var(--pink-soft); padding:clamp(1.5rem,3vw,2.2rem); }

.sent[data-state="shown"]{ display:block; }

.sent h3{ font-size:1.2rem; text-transform:uppercase; }

.sent p{ margin:.7rem 0 0; font-size:.94rem; }

/* --- details column --- */
.detail{ border-top:2px solid var(--ink); padding:1.4rem 0; }

.detail:last-of-type{ border-bottom:2px solid var(--ink); }

.detail dt{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }

.detail dd{ margin:.5rem 0 0; font-size:1.05rem; font-weight:600; letter-spacing:-.01em; }

.detail dd a{ text-decoration:none; border-bottom:2px solid var(--pink); padding-bottom:2px; }

.detail dd a:hover{ color:var(--pink-deep); }

/* Touch devices: the email and Instagram links are ~22px tall. The rows are
   1.4rem apart, so a 44px overlay grows the tap area without them colliding. */
@media (pointer:coarse){
  .detail dd a{ position:relative; display:inline-block; }
  .detail dd a::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%);
  }
}

.detail dd.small{ font-size:.95rem; font-weight:500; line-height:1.5; color:var(--fg-2); }

/* Contact form — server/JS error + sending states (Phase 07) */
.form-error{ background:#fbe8e8; color:#c02626; border:1px solid #f0c4c4; border-radius:8px; padding:.75rem 1rem; margin:0 0 1.2rem; font-size:.92rem; font-weight:600; }
#contact-form button[disabled]{ opacity:.6; cursor:progress; }

/* Checkout buttons wrapped in forms (Phase 04) — keep the original layout */
.buy-form{ margin:0; }
.tier .buy-form{ margin-top:auto; display:flex; }
.tier .buy-form .btn{ width:100%; justify-content:center; }
.buy-form .btn{ -webkit-appearance:none; appearance:none; }