/* ==========================================================================
   PTwithPUBUDU — public site
   ==========================================================================
   The thesis: this trainer does not sell gym access, he sells a MEASURED
   twelve-week system. So the page is built like one of his own assessment
   sheets — mono field labels, hairline gold rules, numbered sections (his
   client forms really are numbered 1–10) — with photography breaking the grid
   so it reads as a brand rather than a form.

   Signature: the twelve-week block strip. Twelve cells, checkpoint diamonds at
   weeks 4, 8 and 12. It is the client app's signature element and it is true —
   the product really is a twelve-week block with three re-assessments — so the
   marketing page and the product are recognisably the same thing.

   Colour is constrained by the brief: the logo is gold on black and the client
   asked for a white site. The freedom was spent on type and on the treatment of
   photography — every stock photograph is duotoned into the logo's own ink→gold
   range, which leaves Pubudu's own photograph as the only full-colour picture
   on the page. He is the product; he gets the only colour.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --bone:#F7F4ED;          /* alternating band */
  --bone-2:#EFEADC;        /* deeper band, table headers */
  --ink:#12100B;           /* TEXT colour. Flips to near-white in dark. */
  /* ⚠️ --ink IS THE TEXT COLOUR AND IT INVERTS. --ground DOES NOT.
     The logo is gold on black and stays gold on black in both themes: it is
     artwork, not text. Using --ink as a BACKGROUND was the bug — in dark mode
     it became #F6F2E7, so the brand chip turned into a cream box, the primary
     button became gold-on-cream, and the seal became a pale disc. Anything
     that means "the brand's black" takes --ground. Anything that means "the
     colour words are printed in" takes --ink. */
  --ground:#12100B;
  --ink-2:#4E4839;
  --ink-3:#736D5E;         /* was #8B8371 = 3.5:1 on bone. AA needs 4.5. */
  --rule:#E4DCC7;
  --rule-2:#F0EADB;
  --gold:#E4B43C;
  --gold-hi:#F8E588;
  --gold-dp:#8A6410;       /* the only gold that clears contrast as text */
  --gold-wash:#FCF6E6;
  --shadow-s:0 1px 2px rgba(18,16,11,.05), 0 6px 18px rgba(18,16,11,.05);
  --shadow-l:0 2px 6px rgba(18,16,11,.06), 0 24px 60px rgba(18,16,11,.10);

  --f-disp:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(1.15rem, 5vw, 5.5rem);
  --header-h:5rem;         /* ONE source of truth; JS shrinks it on scroll */
  --maxw:82rem;
  color-scheme:light;
}

html[data-theme="dark"], html:has(#theme-toggle:checked){
  --paper:#0C0B08;
  --bone:#14120C;
  --bone-2:#1B1810;
  --ink:#F6F2E7;
  --ink-2:#C6BFAC;
  --ink-3:#948C79;
  --rule:#2A2618;
  --rule-2:#211E13;
  --gold-dp:#EFC65B;
  --gold-wash:#1A1609;
  --shadow-s:none;
  --shadow-l:0 24px 60px rgba(0,0,0,.5);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{
  font-size:clamp(14px, 0.4vw + 12px, 22px);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
::selection{background:var(--gold);color:#12100B}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--gold-dp);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:1rem;top:-6rem;z-index:200;padding:.8rem 1.1rem;
  background:var(--gold);color:#12100B;font-weight:700;border-radius:6px}
.skip-link:focus{top:1rem}

/* ---------- type scale ---------- */
/* Sized for Archivo, which is a wide grotesque — the previous scale was set
   for a condensed face and at those sizes the headline ran under the photo.
   Wider letterforms also need a touch more leading to stop the lines locking
   together, hence .92 rather than .86. */
.display{
  font-family:var(--f-disp);font-weight:800;line-height:.92;letter-spacing:-.028em;
  text-transform:uppercase;margin:0;text-wrap:balance;
}
.d-xl{font-size:clamp(2.35rem, 5.4vw, 4.9rem)}
.d-lg{font-size:clamp(1.9rem, 3.8vw, 3.4rem)}
.d-md{font-size:clamp(1.55rem, 2.6vw, 2.3rem)}
.d-sm{font-size:clamp(1.25rem, 1.8vw, 1.6rem)}
/* The outlined word. On white a hairline stroke disappears, so it is 1.5px and
   the fill is a very pale gold rather than nothing — legible, still hollow. */
.hollow{
  font-style:italic;color:transparent;
  -webkit-text-stroke:1.5px var(--gold-dp);
  padding-right:.06em;
}
.lede{font-size:clamp(1.02rem, 1.25vw, 1.24rem);color:var(--ink-2);max-width:38ch}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- the assessment-sheet motif ----------
   The client's ten client-intake forms are numbered. The section markers echo
   that: a § number, the section name, then a rule that runs to the edge. */
.marker{
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--f-mono);font-size:0.72rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dp);margin:0 0 clamp(1.4rem,2.6vw,2.4rem);
}
.marker::after{content:"";flex:1;height:1px;background:var(--rule)}
.marker b{color:var(--ink-3);font-weight:500}

/* ---------- layout ---------- */
.section{padding:clamp(4.4rem, 8.5vw, 9rem) var(--gutter)}
.wrap{max-width:var(--maxw);margin-inline:auto}
.band-bone{background:var(--bone)}
.band-ink{background:var(--ground);color:#F6F2E7}
.band-ink .marker{color:var(--gold)}
.band-ink .marker::after{background:rgba(228,180,60,.28)}
.band-ink .marker b{color:rgba(246,242,231,.5)}

/* ---------- header ----------
   ONE variable drives the height and everything inside it. The previous build
   shrank the bar on scroll while the logo kept a max-height computed from the
   unshrunk value, so the logo crowded and appeared to jump. */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--header-h);
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.4rem);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:height .28s ease, background .28s ease, border-color .28s ease,
             backdrop-filter .28s ease;
}
.site-header.is-stuck{
  --header-h:3.9rem;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.3) blur(14px);
  border-bottom-color:var(--rule);
}
.brand{
  display:flex;align-items:center;justify-content:center;
  height:calc(var(--header-h) - 1.5rem);
  aspect-ratio:2.6 / 1;
  margin-right:auto;flex:none;
  background:var(--ground);border-radius:9px;
  padding:.28rem .5rem;
  transition:height .28s ease;
}
.brand img{height:100%;width:auto;object-fit:contain}
.nav-toggle,.theme-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* The drawer's own header exists only when there IS a drawer. On desktop the
   nav is inline in the site header, so this would be a second logo. */
.nav-head,.nav-foot{display:none}
.nav-scrim{display:none}
.site-nav{display:flex;align-items:center;gap:clamp(.5rem,1.7vw,1.6rem)}
.site-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding-inline:.25rem;
  text-decoration:none;color:var(--ink);
  font-family:var(--f-mono);font-size:0.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  position:relative;
}
.site-nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:.25rem;right:.25rem;bottom:.7rem;height:1px;
  background:var(--gold-dp);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.site-nav a:not(.nav-cta):hover::after,
.site-nav a:not(.nav-cta):focus-visible::after{transform:scaleX(1)}
.nav-cta{
  background:var(--ground);color:var(--gold-hi)!important;
  padding:0 1.05rem;border-radius:6px;font-weight:600;
}
.nav-cta:hover{background:var(--gold-dp);color:#12100B!important}

/* SIGN IN sits beside the CTA, not inside the link row: it is not a place on
   this page, it is the way out of it. Outlined rather than solid so the gold
   "Contact now" stays the single loudest thing in the header — an existing
   client is looking for this and will find it; a first-time visitor should
   not have two competing pills shouting at them. */
.nav-signin{
  border:1px solid var(--rule);padding:0 .9rem;border-radius:6px;
  color:var(--ink-2)!important;font-weight:600;
}
.nav-signin::after{display:none!important}
.nav-signin:hover,.nav-signin:focus-visible{
  border-color:var(--gold-dp);color:var(--gold-dp)!important;
}
.menu-button{display:none}

/* theme switch */
.theme-switch{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-width:44px;min-height:44px;padding:0 .8rem;flex:none;
  border:1px solid var(--rule);border-radius:100px;
  background:var(--bone);color:var(--ink-2);cursor:pointer;
  font-family:var(--f-mono);font-size:0.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .2s, color .2s;
}
.theme-switch:hover{border-color:var(--gold-dp);color:var(--gold-dp)}
.theme-switch svg{width:14px;height:14px;stroke-width:2}
.theme-switch .on{display:none}
html:has(#theme-toggle:checked) .theme-switch .on,
html[data-theme="dark"] .theme-switch .on{display:inline-flex;align-items:center;gap:.4rem}
html:has(#theme-toggle:checked) .theme-switch .off,
html[data-theme="dark"] .theme-switch .off{display:none}
.theme-switch .off{display:inline-flex;align-items:center;gap:.4rem}

/* ---------- icons ---------- */
.i{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.i-fill{fill:currentColor;stroke:none}

/* ==========================================================================
   HERO — the thesis. Logo at full presence, the headline, and Pubudu himself
   at full height as the only colour photograph on the page.
   ========================================================================== */
.hero{
  position:relative;
  min-height:min(100svh, 52rem);
  padding:calc(var(--header-h) + clamp(1.6rem,5vw,3.6rem)) var(--gutter) 0;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:end;
  gap:clamp(1.5rem,3vw,3rem);
  overflow:hidden;
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--rule-2) 1px, transparent 1px),
                   linear-gradient(90deg, var(--rule-2) 1px, transparent 1px);
  background-size:clamp(28px,4vw,44px) clamp(28px,4vw,44px);
  -webkit-mask-image:radial-gradient(120% 90% at 30% 25%, #000 0%, transparent 72%);
  mask-image:radial-gradient(120% 90% at 30% 25%, #000 0%, transparent 72%);
}
.hero-copy{position:relative;z-index:2;padding-bottom:clamp(1.6rem,4vw,3rem);
  align-self:center;max-width:34rem}
.eyebrow{
  margin:0 0 1.15rem;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:0.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp);
}
.eyebrow::before{content:"";width:1.9rem;height:2px;background:var(--gold)}
.hero h1{margin:0}
/* THE ROTATING WORD — the page's one moving part.
   Every alternative occupies the SAME grid cell, so the box is as wide as the
   longest of them and the headline never reflows as they change: a headline
   that jumps around is worse than one that does not move at all. Without
   JavaScript the first word simply stays, which is why the markup is real
   words rather than a script-built list. */
.rotator{display:inline-grid;vertical-align:baseline}
.rotator > *{grid-area:1/1;transition:opacity .45s ease, transform .45s ease}
.js .rotator > *{opacity:0;transform:translateY(.22em);pointer-events:none}
.js .rotator > .on{opacity:1;transform:none}
/* Until the rotator is started — deferred, and only once it is on screen —
   the first word is the one showing. */
.js .rotator:not([data-live]) > *:first-child{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rotator > *{transition:none}
  .js .rotator > *:not(:first-child){display:none}
  .js .rotator > *:first-child{opacity:1;transform:none}
}
.hero-intro{margin:clamp(1.3rem,2.4vw,2rem) 0 0;max-width:34rem;
  font-size:clamp(.98rem,1.2vw,1.18rem);color:var(--ink-2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem 1rem;margin-top:clamp(1.5rem,2.6vw,2.2rem)}
/* The quiet third line. Neither of these is a call to action — one is for
   people who already have an account, the other for people still reading —
   so they are text, not buttons, and they sit below the two that matter. */
.hero-alt{margin:.9rem 0 0;font-size:.86rem;color:var(--ink-2)}
.hero-alt a{color:var(--gold-dp);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;min-height:44px;padding:0 .15rem;
  text-underline-offset:3px}
.hero-alt a:hover,.hero-alt a:focus-visible{text-decoration:underline}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:0 1.6rem;border-radius:7px;
  font-family:var(--f-mono);font-size:0.72rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
.btn svg{width:1.05em;height:1.05em}
.btn-primary{background:var(--ground);color:var(--gold-hi);box-shadow:var(--shadow-s)}
.btn-primary:hover{background:var(--gold-dp);color:#12100B;transform:translateY(-2px);
  box-shadow:var(--shadow-l)}
.btn-ghost{border-color:var(--rule);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--gold-dp);color:var(--gold-dp);transform:translateY(-2px)}
.btn-gold{background:linear-gradient(112deg,var(--gold-dp),var(--gold),var(--gold-hi));
  color:#12100B;box-shadow:var(--shadow-s)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--shadow-l)}

/* Pubudu. Full-bleed to the right edge, cropped to a tall column. */
.hero-figure{position:relative;z-index:1;align-self:end;height:100%;min-height:22rem;
  margin-right:calc(var(--gutter) * -1)}
.hero-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, var(--paper) 1%, transparent 26%),
             linear-gradient(to right, var(--paper) 0%, transparent 16%);
}
.hero-figure img{width:100%;height:100%;object-fit:cover;object-position:52% 16%}

/* The data strip along the bottom of the hero — the instrument-panel note that
   sets up the whole page. Real values from the product, not invented stats. */
.hero-strip{
  grid-column:1 / -1;position:relative;z-index:3;
  margin-inline:calc(var(--gutter) * -1);
  padding:.9rem var(--gutter);
  border-top:1px solid var(--rule);
  background:var(--paper);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.hero-strip div{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.hero-strip .k{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.hero-strip .v{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.1rem,2vw,1.6rem);
  line-height:1;letter-spacing:.01em}
.hero-strip .v em{font-style:normal;color:var(--gold-dp)}

/* ==========================================================================
   MEASURED — what a client actually gets. The instrument cluster.
   ========================================================================== */
.measures{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.measure{padding:clamp(1.4rem,2.4vw,2.1rem);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:var(--paper)}
.measure .k{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.5rem}
.measure .v{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.7rem,2.6vw,2.3rem);
  line-height:.95;display:block;overflow-wrap:anywhere}
.measure .u{font-family:var(--f-body);font-size:0.72rem;font-weight:500;color:var(--ink-3);
  letter-spacing:0;margin-left:.3rem}
.measure p{margin:.5rem 0 0;font-size:.78rem;color:var(--ink-2);line-height:1.45}
/* the band-position meter, straight from the trainer's readout */
.scale{display:flex;gap:2px;height:5px;margin-top:.7rem}
.scale i{flex:1;background:var(--rule);border-radius:1px}
.scale i.on{background:var(--gold-dp)}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.8rem,4vw,4.5rem);align-items:start}
.about-copy h2{margin:0 0 clamp(1.2rem,2vw,1.8rem)}
.about-copy .accent{color:var(--gold-dp)}
.about-lede{font-size:clamp(1.05rem,1.5vw,1.34rem);line-height:1.5;color:var(--ink);
  margin:0 0 1.5rem;max-width:34ch}
.about-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1.4rem;color:var(--ink-2);font-size:.9rem}
.about-cols p{margin:0}
.portrait{position:relative;border-radius:14px;overflow:hidden;background:var(--bone-2);
  box-shadow:var(--shadow-l);aspect-ratio:4/5}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.portrait figcaption{position:absolute;inset:auto 0 0 0;padding:2.6rem 1.2rem 1.1rem;
  background:linear-gradient(transparent, rgba(10,9,6,.9));color:#fff}
.portrait figcaption b{display:block;font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.35rem,2vw,1.8rem);line-height:1;text-transform:uppercase}
.portrait figcaption span{display:block;margin-top:.4rem;font-family:var(--f-mono);
  font-size:0.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi)}

/* ==========================================================================
   THE TWELVE-WEEK BLOCK — the signature.
   ========================================================================== */
.block-head{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-end;gap:1.2rem 2rem;margin-bottom:clamp(1.8rem,3vw,2.8rem)}
.block-head p{margin:0;max-width:40ch;color:rgba(246,242,231,.72);font-size:.94rem}
.strip{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(3px,.5vw,7px);
  align-items:end;margin-bottom:1rem}
.strip .cell{
  position:relative;height:clamp(3rem,7vw,5.5rem);border-radius:4px;
  background:rgba(246,242,231,.13);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:.35rem;
  /* .42 gave 3.47:1 against the cell's own wash. These are small numbers on a
     tinted chip, so the alpha has to carry them on its own. */
  font-family:var(--f-mono);font-size:0.72rem;color:rgba(246,242,231,.62);
}
.strip .cell.done{background:linear-gradient(to top,var(--gold-dp),var(--gold));color:#12100B}
.strip .cell.check{outline:1px solid var(--gold);outline-offset:2px}
.strip .cell.check::before{
  content:"";position:absolute;top:-.85rem;left:50%;width:7px;height:7px;
  background:var(--gold);transform:translateX(-50%) rotate(45deg);
}
.strip-legend{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-family:var(--f-mono);
  font-size:0.72rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(246,242,231,.55)}
.strip-legend span{display:inline-flex;align-items:center;gap:.45rem}
.strip-legend i{width:9px;height:9px;border-radius:2px;background:rgba(246,242,231,.2)}
.strip-legend i.g{background:var(--gold)}
.strip-legend i.d{transform:rotate(45deg);border-radius:1px;background:var(--gold)}
.checkpoints{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1px;margin-top:clamp(2rem,3.5vw,3rem);background:rgba(228,180,60,.22)}
.checkpoint{background:var(--ground);padding:clamp(1.4rem,2.4vw,2.1rem)}
.checkpoint .w{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.45rem}
.checkpoint h3{margin:0 0 .4rem;font-family:var(--f-disp);font-weight:700;
  font-size:1.35rem;text-transform:uppercase;letter-spacing:.01em}
.checkpoint p{margin:0;font-size:.82rem;color:rgba(246,242,231,.66);line-height:1.5}

/* ==========================================================================
   WAYS TO TRAIN / GOALS
   ========================================================================== */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.3rem}
.mode{position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:14px;
  background:var(--paper);box-shadow:var(--shadow-s);display:flex;flex-direction:column}
.mode-media{aspect-ratio:16/9;overflow:hidden;background:var(--bone-2)}
.mode-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.mode:hover .mode-media img{transform:scale(1.045)}
.mode-body{padding:clamp(1.5rem,2.6vw,2.1rem);display:flex;flex-direction:column;gap:.55rem;flex:1}
.mode .kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);
  font-size:0.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-dp);margin:0}
.mode .kicker svg{width:14px;height:14px}
.mode h3{margin:0;font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1;text-transform:uppercase}
.mode p{margin:0;color:var(--ink-2);font-size:.88rem}

.goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  border-top:1px solid var(--rule)}
.goal{padding:clamp(1.7rem,2.8vw,2.4rem) clamp(1.2rem,2vw,1.9rem) clamp(1.7rem,2.8vw,2.4rem) 0;
  border-bottom:1px solid var(--rule)}
.goal .ico{width:2.4rem;height:2.4rem;border-radius:8px;display:grid;place-items:center;
  background:var(--gold-wash);color:var(--gold-dp);margin-bottom:.9rem}
.goal .ico svg{width:1.15rem;height:1.15rem}
.goal h3{margin:0 0 .4rem;font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.15rem,1.5vw,1.45rem);text-transform:uppercase;letter-spacing:-.01em;
  overflow-wrap:anywhere}
.goal p{margin:0;font-size:.84rem;color:var(--ink-2)}

/* ==========================================================================
   PACKAGES
   ========================================================================== */
.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.3rem;
  align-items:stretch}
.pkg{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:14px;
  background:var(--paper);padding:clamp(1.7rem,2.8vw,2.4rem);box-shadow:var(--shadow-s);
  transition:transform .22s ease, box-shadow .28s ease, border-color .22s ease}
.pkg:hover{transform:translateY(-3px);box-shadow:var(--shadow-l);border-color:var(--gold)}
.pkg.featured{border-color:var(--gold);box-shadow:var(--shadow-l)}
.pkg-tag{position:absolute;top:-.7rem;left:clamp(1.3rem,2.3vw,1.9rem);
  background:var(--ground);color:var(--gold-hi);border-radius:100px;padding:.22rem .7rem;
  font-family:var(--f-mono);font-size:0.72rem;letter-spacing:.15em;text-transform:uppercase}
.pkg{position:relative}
.pkg h3{margin:0;font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1;text-transform:uppercase}
.pkg .tagline{margin:.35rem 0 0;font-size:.82rem;color:var(--ink-3)}
.pkg .price{display:flex;align-items:baseline;gap:.35rem;margin:1.1rem 0 .2rem}
.pkg .price .amt{font-family:var(--f-disp);font-weight:800;font-size:clamp(2.2rem,3.6vw,3rem);
  line-height:.9;letter-spacing:.005em}
.pkg .price .cur{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:.12em;
  color:var(--ink-3);text-transform:uppercase}
.pkg .per{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.pkg ul{list-style:none;margin:1.2rem 0 1.5rem;padding:0;flex:1;
  border-top:1px solid var(--rule-2)}
.pkg li{display:flex;gap:.7rem;padding:.8rem 0;border-bottom:1px solid var(--rule-2);
  font-size:.85rem;color:var(--ink-2)}
.pkg li svg{width:1rem;height:1rem;color:var(--gold-dp);margin-top:.18rem}
.pkg .btn{width:100%}
.pkg-note{margin:1.3rem 0 0;font-size:.82rem;color:var(--ink-3);max-width:52ch}

/* ==========================================================================
   CREDENTIALS / COMMITMENT / GALLERY / CONTACT
   ========================================================================== */
.creds{display:grid;gap:0}
.cred{display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1fr);
  gap:.5rem 1.8rem;align-items:baseline;padding:1.45rem 0;border-bottom:1px solid var(--rule)}
.cred:first-child{border-top:1px solid var(--rule)}
.cred b{font-family:var(--f-disp);font-weight:700;font-size:1.55rem;color:var(--gold-dp);
  line-height:1}
.cred p{margin:0;font-weight:600;font-size:.93rem}
.cred span{font-size:.8rem;color:var(--ink-3)}

.quote{margin:0;font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.35rem,2.9vw,2.5rem);line-height:1.12;text-transform:uppercase;
  letter-spacing:-.01em;max-width:20ch}
.quote-attrib{display:block;margin-top:1.2rem;font-family:var(--f-mono);font-size:0.72rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-dp)}
.commit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);margin-top:clamp(2rem,3.5vw,3rem);align-items:start}
.commit>p{margin:0;font-size:1rem;color:var(--ink-2)}
.commit ul{list-style:none;margin:0;padding:0}
.commit li{display:flex;gap:.8rem;padding:.8rem 0;border-bottom:1px solid var(--rule);
  font-size:.87rem;color:var(--ink-2)}
.commit li svg{width:1rem;height:1rem;color:var(--gold-dp);margin-top:.2rem}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(8rem,13vw,12rem);gap:.6rem}
.shot{position:relative;overflow:hidden;border-radius:10px;background:var(--bone-2)}
.shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.05)}
.shot figcaption{position:absolute;inset:auto 0 0 0;padding:1.6rem .7rem .6rem;
  background:linear-gradient(transparent, rgba(10,9,6,.82));color:#fff;
  font-family:var(--f-mono);font-size:0.72rem;letter-spacing:.1em;text-transform:uppercase;
  overflow-wrap:anywhere;line-height:1.3}
.shot.w2{grid-column:span 2}
.shot.h2{grid-row:span 2}

.contact{text-align:center}
.contact .lede{margin-inline:auto;max-width:44ch}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:.6rem;margin-top:clamp(2rem,3.5vw,3rem)}
.contact-card{
  display:flex;flex-direction:column;align-items:center;gap:.65rem;
  padding:2rem 1.2rem;border:1px solid var(--rule);border-radius:12px;
  background:var(--paper);text-decoration:none;overflow-wrap:anywhere;
  transition:transform .2s ease, border-color .2s ease, box-shadow .24s ease;
}
.contact-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow-l)}
.contact-card .ico{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-wash);color:var(--gold-dp)}
.contact-card .ico svg{width:1.15rem;height:1.15rem}
.contact-card .k{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.contact-card .v{font-weight:600;font-size:.9rem}

footer{background:var(--ground);color:#EDE7D8;padding:clamp(2.4rem,4vw,3.6rem) var(--gutter)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem 2rem;max-width:var(--maxw);margin-inline:auto}
.foot-logo{height:3.4rem;width:auto}
.foot-tag{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(237,231,216,.6);margin:0;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.foot-tag i{width:3px;height:3px;border-radius:50%;background:var(--gold);display:inline-block}
.foot-social{display:flex;gap:.5rem}
.foot-social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(228,180,60,.3);color:var(--gold-hi);
  transition:background .2s, color .2s, transform .2s}
.foot-social a:hover{background:var(--gold);color:#12100B;transform:translateY(-2px)}
.foot-social svg{width:1rem;height:1rem}
.foot-legal{width:100%;margin:0;padding-top:1.3rem;border-top:1px solid rgba(237,231,216,.12);
  font-size:0.72rem;color:rgba(237,231,216,.55)}

/* The builder's mark. A literal, not tenant data — re-skinning for another
   trainer changes their branding, not who built the software. The footer is
   dark in both themes, so the link takes the light gold rather than the
   theme-switched --gold-dp, and it is 44px tall because it is a tap target. */
.built{display:block;margin-top:.35rem;font-family:var(--f-mono);letter-spacing:.06em}
.built a{display:inline-flex;align-items:center;min-height:44px;padding:0 .45rem;
  color:var(--gold-hi);text-decoration:none;text-underline-offset:3px}
.built a:hover,.built a:focus-visible{text-decoration:underline}
@media print{.built{display:none}}

/* ---------- the seal ----------
   A rotating stamp over the portrait. The spin is a compositor-only transform
   on a element that is already painted, so it costs essentially nothing —
   but it still does not START until main.js says so (idle + on screen), and it
   never starts at all for a visitor who has asked for less motion. */
.seal{
  /* Kept fully inside the figure. Hanging it off the edge overflowed the
     figure's own box, which reads to the responsive audit — correctly — as
     content clipped. */
  position:absolute;right:clamp(.6rem,2vw,1.6rem);bottom:clamp(1rem,4vw,2.4rem);
  width:clamp(7rem,12vw,9.5rem);aspect-ratio:1;
  display:grid;place-items:center;pointer-events:none;
  border-radius:50%;background:var(--ground);
  box-shadow:0 10px 30px rgba(18,16,11,.28);
  z-index:2;
  /* The ring is a SQUARE element carrying a circle, and rotating a square
     grows its bounding box to the diagonal — 1.41x — even though the circle
     inside it never moves. Nothing visually escapes, but the parent's
     scrollWidth does, which reads as clipped content. Clipping to the badge is
     both free and exactly what a round badge should do. */
  overflow:hidden;
}
.seal-ring{position:absolute;inset:0;width:100%;height:100%}
/* ⚠️ THE RING HOLDS ABOUT 38 CHARACTERS AND NO MORE.
   The circumference is 2πr with r=45 in the viewBox, so 283 user units. Each
   character costs (font-size × 0.6) + tracking. At 10.5 with .10em that is
   ~7.35 units, so ~38 characters go round exactly once. Longer text does not
   wrap — it runs off the end of the path and is simply cut, and it will also
   trip the responsive audit as clipped content.
   10.5 rather than something smaller because the audit holds a 10px floor on
   text, and micro-lettering nobody can read is decoration pretending to be
   copy. If the trainer needs to say more, say it in fewer words. */
.seal-text{
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;fill:var(--gold-hi);
}
.seal-mark{display:grid;place-items:center;color:var(--gold-hi)}
.seal-mark svg{width:1.5rem;height:1.5rem;stroke-width:2.4}

/* Paused until main.js has decided it is worth running. */
.seal-ring{animation:seal-spin 24s linear infinite;animation-play-state:paused}
.seal[data-live] .seal-ring{animation-play-state:running}
@keyframes seal-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .seal-ring{animation:none!important}
}
/* On the dark ground the black stamp needs an edge, or it dissolves into the
   page wherever it is not over the photograph. */
html[data-theme="dark"] .seal,html:has(#theme-toggle:checked) .seal{
  box-shadow:0 0 0 1px rgba(228,180,60,.34), 0 10px 30px rgba(0,0,0,.55);
}
/* Two portraits' worth of furniture on a narrow phone is clutter, and the
   seal is the decoration, not the message. */
@media (max-width:22rem){ .seal{display:none} }
@media print{ .seal{display:none} }

/* ---------- access: the two doors ---------- */
.access-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1rem,2.5vw,1.8rem);
}
.access-card{
  border:1px solid var(--rule);border-radius:var(--r,14px);
  padding:clamp(1.4rem,3vw,2.2rem);background:var(--paper);
  display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
}
.access-card h2{margin:0}
.access-card p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.6}
.access-card .btn{margin-top:.7rem}

/* ---------- motion ---------- */
.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}
.js .hero-copy>*{opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
.js .hero-copy>*:nth-child(1){animation-delay:.05s}
.js .hero-copy>*:nth-child(2){animation-delay:.14s}
.js .hero-copy>*:nth-child(3){animation-delay:.23s}
.js .hero-copy>*:nth-child(4){animation-delay:.32s}
.js .hero-figure{opacity:0;animation:fade 1.1s ease .2s forwards}
.js .hero-strip{opacity:0;animation:rise .8s cubic-bezier(.2,.7,.3,1) .45s forwards}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr);align-items:start;min-height:auto}
  .hero-copy{padding-bottom:0;order:1}
  /* The source photograph is 900x1211 — a portrait. Forcing it into a 16/11
     landscape box cropped Pubudu into a band from forehead to chest. The box
     now keeps the picture's own proportions, so almost nothing is cut, and the
     crop is anchored high enough that the top of his head stays in frame. */
  .hero-figure{order:2;margin-inline:calc(var(--gutter) * -1);height:auto;
    aspect-ratio:4/5;max-height:64svh;min-height:0}
  .hero-figure img{object-position:50% 14%}
  .hero-figure::after{background:linear-gradient(to top,var(--paper) 2%,transparent 30%)}
  .hero-strip{order:3;grid-template-columns:repeat(2,1fr);gap:.9rem 1rem}
  .about-grid{grid-template-columns:minmax(0,1fr)}
  .portrait{max-width:26rem}
  .commit{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}

  .menu-button{
    display:flex;align-items:center;justify-content:center;width:46px;height:46px;
    margin-right:calc(var(--gutter) * -.35);border:1px solid var(--rule);border-radius:9px;
    background:var(--bone);color:var(--ink);cursor:pointer;position:relative;z-index:120;
  }
  .menu-button svg{width:20px;height:20px}
  .menu-button .x{display:none}
  .nav-toggle:checked ~ .menu-button .x{display:block}
  .nav-toggle:checked ~ .menu-button .m{display:none}
  /* THE MENU, REBUILT.
     It stuttered when opened over a scrolled page for two reasons, both fixed
     here. First, the header carried a `backdrop-filter` — a live blur behind a
     fixed bar is continuous GPU work on every scrolled frame, and it is the
     single most common cause of this exact symptom on a phone. On small
     screens the bar is simply opaque instead. Second, the drawer stayed
     composited while closed and animated `box-shadow` alongside `transform`;
     it is now `visibility:hidden` when shut, so it costs nothing until it is
     opened, and only `transform` and `opacity` animate — both compositor-only
     properties, so the animation never touches layout or paint. */
  .site-header.is-stuck{backdrop-filter:none;background:var(--paper)}

  .nav-scrim{display:block;position:fixed;inset:0;z-index:105;
    background:rgba(18,16,11,.45);opacity:0;visibility:hidden;
    transition:opacity .26s ease, visibility 0s linear .26s}
  .nav-toggle:checked ~ .nav-scrim{opacity:1;visibility:visible;transition-delay:0s}

  .site-nav{
    position:fixed;inset:0 0 0 auto;z-index:110;width:min(21rem,86vw);
    padding:1.1rem 1.5rem 1.6rem;
    background:var(--paper);border-left:1px solid var(--rule);
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    box-shadow:-20px 0 50px rgba(18,16,11,.16);
    overflow-y:auto;overscroll-behavior:contain;
    transform:translate3d(101%,0,0);visibility:hidden;
    transition:transform .3s cubic-bezier(.32,.72,0,1), visibility 0s linear .3s;
  }
  /* The drawer opens over the page, so it needs its own identity at the top —
     otherwise it is five words floating on white. Logo, then the sections,
     then the one action, then how to reach him. */
  .nav-head{display:flex;align-items:center;padding:.1rem 0 1rem;
    border-bottom:1px solid var(--rule);margin-bottom:.5rem}
  .nav-foot{display:flex}
  /* The drawer carries the mark while it is open, so the header's copy steps
     aside. Two of the same logo on one screen reads as a mistake. */
  .nav-toggle:checked ~ .brand{opacity:0;pointer-events:none}
  .brand{transition:opacity .2s ease}
  .nav-logo{height:2.4rem;width:auto;background:var(--chip);border-radius:9px;
    padding:.3rem .5rem;box-sizing:content-box}
  html:has(#theme-toggle:checked) .nav-logo,html[data-theme="dark"] .nav-logo{
    background:none;padding:0}
  .nav-links{display:flex;flex-direction:column;margin-bottom:1.1rem}
  /* In the drawer there is room to be explicit, and an existing client opening
     the menu is usually looking for exactly this. Full width, above the CTA. */
  .site-nav .nav-signin{
    width:100%;justify-content:center;min-height:50px;margin-bottom:.55rem;
    font-size:.78rem;
  }
  .site-nav .nav-links a{width:100%;min-height:54px;font:700 1.45rem/1 var(--f-disp);
    letter-spacing:-.01em;text-transform:uppercase;border-bottom:1px solid var(--rule);
    padding-inline:0;display:flex;align-items:center}
  .site-nav .nav-links a:last-child{border-bottom:0}
  .nav-foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--rule);
    display:flex;flex-direction:column;gap:.1rem}
  .nav-foot a{display:flex;align-items:center;gap:.6rem;min-height:44px;
    font-family:var(--f-body);font-size:.82rem;font-weight:500;letter-spacing:0;
    text-transform:none;color:var(--ink-2);text-decoration:none}
  .nav-foot a::after{display:none}
  .nav-foot a:hover{color:var(--gold-dp)}
  .nav-foot svg{width:1rem;height:1rem;color:var(--gold-dp);flex:none}
  .nav-toggle:checked ~ .site-nav{
    transform:translate3d(0,0,0);visibility:visible;
    transition:transform .34s cubic-bezier(.32,.72,0,1), visibility 0s;
    will-change:transform;
  }
  /* Scoped to the section links: the drawer's footer carries contact details,
     which are body copy and must not inherit the display face. */
  .site-nav .nav-links a{min-height:58px;font-family:var(--f-disp);font-weight:700;font-size:1.7rem;
    letter-spacing:.02em;border-bottom:1px solid var(--rule);padding-inline:0}
  .site-nav a:not(.nav-cta)::after{display:none}
  .nav-cta{justify-content:center;min-height:52px;border-radius:8px;border-bottom:0!important;
    background:var(--ground);color:var(--gold-hi)!important}
  body:has(.nav-toggle:checked){overflow:hidden}
}

/* ==========================================================================
   PHONE
   ========================================================================== */
@media (max-width:620px){
  .hero-strip{grid-template-columns:repeat(2,1fr)}
  .theme-switch{padding:0 .6rem;gap:0}
  .theme-switch .lbl{display:none}
  .measures{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(6,1fr);gap:5px}
  .strip .cell{height:2.6rem}
  .cred{grid-template-columns:4.2rem minmax(0,1fr)}
  .cred span{grid-column:2}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:8rem}
  .shot.w2{grid-column:span 2}
  .shot.h2{grid-row:span 1}
  .goal{padding-right:0}
  .foot{justify-content:center;text-align:center}
  .foot-tag{justify-content:center}
}
@media (max-width:400px){
  .measures{grid-template-columns:1fr}
  .hero-strip{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .reveal,.js .hero-copy>*,.js .hero-figure,.js .hero-strip{opacity:1;transform:none;animation:none}
}

/* ==========================================================================
   PRINT — light on white, so the page survives a PDF export
   ========================================================================== */
@media print{
  html{font-size:10.5pt}
  body{background:#fff;color:#111}
  .site-header,.nav-scrim,.skip-link,.hero-grid,.hero-figure,.gallery,.mode-media,
  .foot-social,.theme-switch{display:none!important}
  .js .reveal,.reveal,.js .hero-copy>*{opacity:1!important;transform:none!important;animation:none!important}
  .section{padding:1.2rem 0;page-break-inside:avoid}
  .band-ink,.band-bone,footer{background:#fff!important;color:#111!important}
  .hero{min-height:auto;padding:0;display:block}
  .hollow{color:#111!important;-webkit-text-stroke:0}
  .strip .cell{border:1px solid #bbb;background:#fff!important;color:#111!important}
  .strip .cell.done{background:#ddd!important}
  .checkpoint{border:1px solid #ccc}
  .checkpoint p,.block-head p,.strip-legend{color:#333!important}
  .pkg,.mode,.contact-card,.measure{border:1px solid #bbb;box-shadow:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.72em;color:#666}
}