@font-face{
  font-family:'League Spartan';
  src:url(/fonts/league-spartan-latin.woff2) format('woff2');
  font-weight:100 900;   /* variable: one 23 KB file covers 400 through 700 */
  font-style:normal;
  font-display:swap;
}

/* R.Song Studios — design system lifted from the live homepage, rebuilt clean.
   The live site is monochrome: near-black, white and greys, with no accent
   colour anywhere except the social brand marks. League Spartan, 700 for
   display, uppercase headings. */
:root{
  --ink:#161616; --ink-2:#1c1b1b; --grey:#7f8080; --grey-2:#a4a4a4;
  --line:#e2e2e2; --paper:#f7f7f7; --white:#fff;
  --shell:min(1240px, 100% - 3rem);
  --step--1:clamp(.78rem,.75rem + .15vw,.86rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.4rem,1.25rem + .7vw,1.8rem);
  --step-3:clamp(2rem,1.6rem + 2vw,3.2rem);
  --step-4:clamp(2.4rem,1.7rem + 3vw,4.2rem);

  /* Semantic roles. Components reference THESE, never a --step-* directly.
     The ramp above is the instrument; this is what the instrument is for.
     "The booking steps are too small to read" then has one answer -- change
     --t-body -- instead of eight component rules that have quietly drifted
     apart. A site that needs different proportions re-points a role in its own
     stylesheet; it never restyles a component to get a size. */
  --t-label:   var(--step--1);  /* uppercase micro: eyebrows, buttons, nav, form labels */
  --t-caption: var(--step--1);  /* secondary prose: tile blurbs under a photo, notes */
  --t-body:    var(--step-0);   /* anything a reader has to actually read */
  --t-lede:    var(--step-1);   /* opening paragraph, hero subhead */
  --t-h3:      var(--step-1);
  --t-h2:      var(--step-3);
  --t-display: var(--step-4);   /* prices, stat numerals */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink); overflow-x:clip;
  font-family:'League Spartan',Helvetica,Arial,sans-serif;
  font-size:var(--t-body); line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.05; letter-spacing:-0.015em; text-transform:uppercase}
p{margin:0}
.shell{width:var(--shell); margin-inline:auto}
.eyebrow{font-size:var(--t-label); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--grey)}
.lede{font-size:var(--t-lede); line-height:1.5; color:var(--ink-2)}
.muted{color:var(--grey)}
.stack > * + *{margin-top:1.1rem}
/* A subheading inside a section: below h2, above the content it introduces.
   It existed as an inline font-size on three different pages before it had a name. */
.sub{font-size:var(--t-h3); margin-top:2.5rem}
.sub--gap{margin-top:3rem}

/* a fact the snapshot could not give us — must never read as finished copy */
.tbc{display:inline-block; padding:.05em .5em; border:1px dashed currentColor; border-radius:.2em;
     color:#b0402f; font-weight:500; text-transform:none; font-size:.86em}

.btn{display:inline-block; padding:1.05em 2.2em; border:1.5px solid var(--ink); background:var(--ink);
     color:var(--white); text-decoration:none; font-size:var(--t-label); font-weight:700;
     letter-spacing:.16em; text-transform:uppercase; transition:background .18s,color .18s}
.btn:hover{background:transparent; color:var(--ink)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--white)}
.btn--light{background:var(--white); border-color:var(--white); color:var(--ink)}
.btn--light:hover{background:transparent; color:var(--white)}
.btn--outline-light{background:transparent; border-color:rgba(255,255,255,.75); color:var(--white)}
.btn--outline-light:hover{background:var(--white); color:var(--ink)}
.btn-row{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem}

/* header */
.hdr{position:fixed; inset:0 0 auto; z-index:60; padding:1rem 0; transition:background .25s,box-shadow .25s}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
.hdr__logo img{height:32px; width:auto}
.hdr nav{display:flex; align-items:center; gap:1.6rem}
.hdr nav a{text-decoration:none; font-size:var(--t-label); font-weight:700; letter-spacing:.12em;
           text-transform:uppercase; color:var(--white); opacity:.85}
.hdr nav a:hover{opacity:1}
.hdr .btn{padding:.75em 1.4em}
.hdr nav a.btn--light{color:var(--ink); opacity:1}
.hdr nav a.btn--light:hover{color:var(--white)}
.hdr--solid{background:var(--white); box-shadow:0 1px 0 var(--line)}
.hdr--solid .hdr__logo img{filter:invert(1)}
.hdr--solid nav a{color:var(--ink)}
.hdr--solid nav a.btn--light{background:var(--ink); border-color:var(--ink); color:var(--white)}
.hdr--solid nav a.btn--light:hover{background:transparent; color:var(--ink)}
@media (max-width:1040px){ .hdr nav a:not(.btn){display:none} }
@media (max-width:520px){ .hdr__logo img{height:25px} .hdr .btn{padding:.7em 1em; letter-spacing:.08em} }

/* hero */
.hero{position:relative; display:grid; align-items:end; color:var(--white); overflow:hidden;
      padding:9rem 0 clamp(3rem,7vh,5.5rem)}
.hero--tall{min-height:100svh}
.hero--short{min-height:62svh}
.hero__bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.42) 45%,rgba(0,0,0,.1) 78%),
             linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.12) 40%,rgba(0,0,0,.72))}
.hero h1{font-size:clamp(2.4rem,9vw,5.4rem); letter-spacing:-0.025em; margin:.2em 0 .35em; max-width:16ch}
.hero--tall h1{font-size:clamp(2.6rem,10vw,6.4rem)}
.hero .eyebrow{color:rgba(255,255,255,.72)}
.hero__sub{font-size:var(--t-lede); max-width:44ch; color:rgba(255,255,255,.9);
           border-top:1px solid rgba(255,255,255,.28); padding-top:1.3rem}

/* sections */
.sec{padding:clamp(4rem,9vh,7rem) 0}
.sec--paper{background:var(--paper)}
.sec--ink{background:var(--ink); color:var(--white)}
.sec--ink .eyebrow,.sec--ink .muted{color:var(--grey-2)}
.sec--ink .lede{color:rgba(255,255,255,.84)}
.sec h2{font-size:var(--t-h2); margin:1rem 0 0; max-width:22ch}
.sec h2 + .lede{margin-top:1.4rem; max-width:62ch}
.sec--ink a{color:var(--white)}
.sec--ink a.btn--light{color:var(--ink)}
.sec--ink a.btn--light:hover{color:var(--white)}

.split{display:grid; gap:clamp(2rem,5vw,4rem); align-items:center}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr} .split--flip > figure{order:2} }
.split figure{margin:0}
.split figure img{width:100%; aspect-ratio:4/5; object-fit:cover}
.split--wide figure img{aspect-ratio:4/3}

.grid{display:grid; gap:1.6rem; margin-top:3rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--white); border:1px solid var(--line); padding:2rem}
.sec--paper .card{background:var(--white)}
.sec--ink .card{background:transparent; border-color:rgba(255,255,255,.18)}
.card h3{font-size:var(--t-h3); margin-bottom:.7rem}
.card p{font-size:var(--t-body); line-height:1.65; color:var(--grey)}
.sec--ink .card p{color:rgba(255,255,255,.72)}
.card p + p{margin-top:.7rem}

.disc{display:grid; gap:1.5rem; margin-top:3rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.disc figure{margin:0}
.disc img{aspect-ratio:3/4; object-fit:cover; width:100%; filter:grayscale(1); transition:filter .35s}
.disc figure:hover img{filter:grayscale(0)}
.disc h3{font-size:var(--t-h3); margin-top:1rem}
.disc p{margin-top:.4rem; font-size:var(--t-caption); color:var(--grey); line-height:1.6}
/* A discipline we are not licensed to photograph yet. Without this the tile's
   heading floats to the top of its cell and the row reads as broken. */
.disc .soon{aspect-ratio:3/4; width:100%; background:var(--paper); border:1px solid var(--line);
     display:flex; align-items:center; justify-content:center; text-align:center; padding:1rem;
     color:var(--grey-2); font-size:var(--t-label); font-weight:700; letter-spacing:.18em;
     text-transform:uppercase}

/* pricing */
.tiers{display:grid; gap:1.5rem; margin-top:3rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tier{border:1px solid var(--line); padding:2.2rem; display:flex; flex-direction:column}
.tier--feature{background:var(--ink); color:var(--white); border-color:var(--ink)}
.tier h3{font-size:var(--t-h3)}
.tier .price{font-size:var(--t-display); font-weight:700; letter-spacing:-0.03em; line-height:1; margin:1rem 0 .3em}
.tier .unit{font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--grey)}
.tier--feature .unit{color:var(--grey-2)}
.tier p{margin-top:1.1rem; font-size:var(--t-body); line-height:1.6; color:var(--grey)}
.tier--feature p{color:rgba(255,255,255,.78)}
.tier .btn{margin-top:auto; align-self:flex-start}
.tier .btn{margin-top:1.8rem}
.rate-list{margin-top:3rem; border-top:1px solid var(--line)}
.rate{display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline;
      padding:1.15rem 0; border-bottom:1px solid var(--line)}
.rate b{font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:var(--t-body)}
.rate span{font-size:var(--t-h3); font-weight:700; white-space:nowrap}
.rate--prose span{font-size:var(--t-body); font-weight:400; white-space:normal; text-align:right}

/* accordion */
.acc{margin-top:2.5rem; border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{padding:1.4rem 0; cursor:pointer; list-style:none; display:flex;
             justify-content:space-between; gap:1.5rem; align-items:baseline;
             font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:var(--t-h3)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; font-weight:400; font-size:1.4em; line-height:1; color:var(--grey)}
.acc details[open] summary::after{content:"–"}
.acc .body{padding:0 0 1.8rem; max-width:66ch; color:var(--ink-2)}
.acc .body > * + *{margin-top:.9rem}
.acc .body ul{margin:.9rem 0 0; padding-left:1.2rem}
.acc .body li + li{margin-top:.4rem}

/* gallery */
.gal{display:grid; gap:1rem; margin-top:3rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gal img{width:100%; aspect-ratio:1/1; object-fit:cover}

/* team */
.team{display:grid; gap:1.6rem; margin-top:3rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.team img{aspect-ratio:1/1; object-fit:cover; width:100%; filter:grayscale(1)}
.team h3{font-size:var(--t-body); margin-top:.9rem; letter-spacing:.06em}

/* stats */
.stats{display:grid; gap:2.5rem; margin-top:3rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat b{display:block; font-size:var(--t-display); font-weight:700; letter-spacing:-0.03em; line-height:1}
.stat span{display:block; margin-top:.6rem; font-size:var(--t-label); letter-spacing:.13em;
           text-transform:uppercase; color:var(--grey); max-width:22ch}


/* Scroll-lit tiles.
   The colour reveal used to be hover-only, which means it did not exist on a
   phone at all -- no hover, no colour, half the audience never saw it. Each tile
   now warms up as it comes into view, and hover still works on top. */
.disc img,.team img{transition:filter .85s ease}
.js .disc figure.lit img,.js .team figure.lit img{filter:grayscale(0)}

/* embed */
.embed{margin-top:2.5rem; border:1px solid var(--line); background:var(--white)}
.embed iframe{width:100%; height:min(78vh,860px); border:0; display:block}

/* form */
form{margin-top:2rem; display:grid; gap:1.1rem; max-width:34rem}
label{display:block; font-size:var(--t-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2)}
input,select,textarea{width:100%; margin-top:.5rem; padding:.9em 1em; background:transparent;
  border:1px solid rgba(255,255,255,.28); color:var(--white); font-family:inherit;
  font-size:var(--t-body); border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--white); outline-offset:2px; border-color:transparent}
select option{color:var(--ink)}
textarea{min-height:6.5rem; resize:vertical}
.form-note{font-size:var(--t-caption); line-height:1.5; min-height:1.4em}
/* honeypot: off-screen rather than display:none -- bots that skip hidden inputs
   still fill this one, and screen readers skip it via aria-hidden + tabindex */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note[data-state="error"]{color:#ff9d8a}
.form-note[data-state="ok"]{color:#9ae6b4}

/* locations */
.loc{display:grid; gap:0; border:1px solid var(--line); margin-top:3rem; background:var(--white)}
@media (min-width:820px){ .loc{grid-template-columns:1fr 1fr} }
.loc > div{padding:2.2rem}
.loc > div + div{border-top:1px solid var(--line)}
@media (min-width:820px){ .loc > div + div{border-top:0; border-left:1px solid var(--line)} }
.loc h3{font-size:var(--t-h3)}
.loc p{margin-top:.8rem; color:var(--grey)}
.loc a{color:inherit}

/* footer */
.ftr{background:var(--ink); color:var(--white); padding:5rem 0 2.5rem}
.ftr__grid{display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ftr__meta{margin-top:1.2rem; font-size:var(--t-label)}
.ftr h3{font-size:var(--t-label); letter-spacing:.16em; color:var(--grey-2); margin-bottom:1rem}
.ftr a{color:rgba(255,255,255,.85); text-decoration:none}
.ftr a:hover{color:var(--white); text-decoration:underline}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li + li{margin-top:.5rem}
.ftr__base{margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:var(--t-label); color:var(--grey-2)}

@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s,transform .7s}
  .js .reveal.in{opacity:1; transform:none}
}