/* Roland Fitness homepage, 2026 redesign. Self-contained: used by /index.html only. */

:root{
  --ground:#F7F3EA; --stone:#EDE6D6; --rule:#D9CFBA; --ink:#2A2622; --muted:#5C5348;
  --gold:#B8924A; --gold-ink:#7A5C1E; --gold-light:#E2C88E;
  --band:#3A322B; /* 360 section colour: change here only */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1344px; --pad:clamp(20px,4vw,48px);
}
*,*::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(--ground);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,blockquote,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.band :focus-visible{outline-color:var(--gold-light)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.eyebrow{font:500 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.lead{font-size:clamp(17px,1.3vw,18px);line-height:1.65;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;font:500 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;border-radius:2px;border:1px solid transparent;transition:background-color .2s,color .2s}
.btn-dark{background:var(--ink);color:var(--ground)}
.btn-dark:hover{background:#4A3F33}
.btn-light{background:var(--ground);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--ground)}
.link{font:500 15px/1.4 var(--sans);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold);display:inline-flex;align-items:center;min-height:44px}
.link:hover{text-decoration-color:currentColor}

/* Hero */
.hero-img{width:100%;height:clamp(440px,48vw,640px);object-fit:cover;object-position:50% 36%}
.hero-copy{display:flex;flex-wrap:wrap;gap:28px 96px;align-items:flex-end;justify-content:space-between;padding-top:36px;padding-bottom:56px}
.hero-copy>div:first-child{flex:1 1 560px;min-width:0}
.hero-copy>div:last-child{flex:0 1 400px;min-width:0}
.hero h1{font:300 clamp(52px,8vw,112px)/.96 var(--serif);letter-spacing:-.025em;margin-top:16px}
.hero .sub{font:300 italic clamp(22px,2.2vw,30px)/1.3 var(--serif);color:var(--muted);margin-top:20px}
.hero .intro{font-size:17px;line-height:1.6}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:24px}
.hero .note{font-size:14px;color:var(--muted);margin-top:12px}
@media (min-width:980px){.hero-copy{padding-top:64px;padding-bottom:72px}}

/* Credentials line */
.creds{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.creds ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;padding-top:22px;padding-bottom:22px;font-size:14px;color:var(--muted)}
.creds li{white-space:nowrap;padding:0 18px}
.creds li+li{border-left:1px solid var(--rule)}
@media (max-width:640px){.creds ul{flex-direction:column;align-items:center;gap:6px}.creds li+li{border-left:0}}

/* Sections */
.sec{padding-top:clamp(64px,9vw,128px);padding-bottom:clamp(64px,9vw,128px)}
.h2{font:300 clamp(38px,4.6vw,64px)/1.05 var(--serif);letter-spacing:-.015em}
.approach{display:flex;flex-wrap:wrap;gap:20px 80px}
.approach .eyebrow{flex:0 1 200px;padding-top:12px}
.approach>div{flex:1 1 600px;min-width:0}
.approach .big{font:300 clamp(28px,3.3vw,46px)/1.22 var(--serif);letter-spacing:-.01em}
.approach .lead{margin-top:28px;max-width:620px}

/* 360 band */
.band{background:var(--band);color:var(--ground)}
.band .eyebrow{color:var(--gold-light)}
.band-in{display:flex;flex-wrap:wrap;gap:40px 88px;align-items:center}
.band-in>div{flex:1 1 440px;min-width:0}
.band .h2{margin-top:18px}
.band .lead{color:#E9E3D3;margin-top:22px;max-width:460px}
.steps{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px;font:italic 300 22px/1.2 var(--serif)}
.band .actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:36px}
.band .link{color:var(--ground);text-decoration-color:var(--gold-light)}
.report{background:var(--ground);color:var(--ink);padding:clamp(22px,3vw,40px);border-radius:2px}
.report-hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.report-hd p:first-child{font:400 clamp(21px,2vw,26px)/1.2 var(--serif)}
.report li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--rule);font-size:16px}
.st{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px}
.st i{display:none;width:56px;height:6px;border-radius:3px;background:#E6DECB;position:relative;overflow:hidden}
.st i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:currentColor}
@media (min-width:480px){.st i{display:inline-block}}
.st.on{color:#2F5E3A;--w:86%}.st.build{color:var(--gold-ink);--w:58%}.st.focus{color:#8A3B24;--w:30%}
.report .foot{font-size:14px;color:var(--muted);margin-top:16px}

/* Four parts */
.parts{display:flex;flex-wrap:wrap;gap:40px 88px}
.parts>div{flex:1 1 420px;min-width:0}
.parts .lead{margin:20px 0 28px;max-width:420px}
.parts img{width:100%;aspect-ratio:4/3;object-fit:cover}
.plist{border-top:1px solid var(--ink);align-self:flex-start}
.plist a{display:flex;gap:24px;padding:28px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.plist a:hover .pt{color:var(--gold-ink)}
.plist .n{flex:0 0 32px;font:italic 300 22px/1.4 var(--serif);color:var(--gold-ink)}
.plist .pt{display:block;font:400 clamp(25px,2.4vw,32px)/1.15 var(--serif);transition:color .2s}
.plist .pd{display:block;margin-top:6px;font-size:16px;color:var(--muted)}

/* Proof */
.proof{background:var(--stone)}
.proof .big-q{font:300 clamp(36px,4.6vw,64px)/1.1 var(--serif);letter-spacing:-.015em;max-width:980px}
.proof .big-c{margin-top:24px;font:500 13px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.qs{display:flex;flex-wrap:wrap;gap:40px 56px;margin-top:clamp(48px,6vw,80px);padding-top:40px;border-top:1px solid var(--gold)}
.qs>*{flex:1 1 280px;min-width:0}
.qs blockquote{font:300 italic 22px/1.45 var(--serif)}
.qs figcaption{margin-top:14px;font:500 14px/1.5 var(--sans);color:var(--muted)}
.qs .print p.t{font:400 20px/1.45 var(--serif);margin-top:12px}

/* About */
.about{display:flex;flex-wrap:wrap;gap:40px 96px;align-items:center}
.about>div:first-child{flex:1 1 380px;min-width:0}
.about>div:last-child{flex:1 1 500px;min-width:0}
.about img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.about .h2{font-size:clamp(34px,3.8vw,54px);line-height:1.08;margin-top:20px}
.about .lead{margin-top:24px;max-width:540px}
.ticks{margin-top:28px;font-size:16px}
.ticks li{padding:13px 0;border-top:1px solid var(--rule)}
.ticks li:last-child{border-bottom:1px solid var(--rule)}

/* Areas */
.areas{border-top:1px solid var(--rule)}
.areas-in{display:flex;flex-wrap:wrap;gap:36px 80px;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.areas-in>div:first-child{flex:0 1 340px}
.areas-in h2{font:300 clamp(30px,2.8vw,40px)/1.15 var(--serif);margin-top:16px}
.areas-grid{flex:1 1 600px;min-width:0;display:flex;flex-wrap:wrap;gap:32px}
.areas-grid>div{flex:1 1 180px;min-width:0}
.areas-grid h3{font:400 26px/1.2 var(--serif)}
.areas-grid p{font-size:16px;color:var(--muted);margin:8px 0 4px}

/* Closing */
.close{background:var(--stone);text-align:center}
.close h2{font:300 clamp(38px,5vw,72px)/1.05 var(--serif);letter-spacing:-.015em;max-width:860px;margin:0 auto}
.close .lead{max-width:540px;margin:24px auto 0}
.close .actions{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:center;margin-top:36px}


.report .eyebrow{color:var(--gold-ink)}
@media (max-width:639px){.hero .pc{display:none}}

/* ---------- Editorial pages: /about/, /press/ (1 Nov) ---------- */
.ed-hero img{width:100%;height:clamp(360px,42vw,600px);object-fit:cover}
.ed-head{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;gap:24px 96px;align-items:flex-end;justify-content:space-between}
.ed-head>div:first-child{flex:1 1 560px;min-width:0}
.ed-head>div:last-child{flex:0 1 420px;min-width:0}
.ed-head h1{font:300 clamp(52px,7vw,96px)/.98 var(--serif);letter-spacing:-.025em;margin-top:16px}
.ed-head .lead{font-size:clamp(17px,1.4vw,19px)}
.prose{display:flex;flex-wrap:wrap;gap:20px 80px}
.prose>.eyebrow{flex:0 1 200px;padding-top:10px}
.prose>div{flex:1 1 600px;min-width:0;max-width:720px}
.prose p{font-size:18px;line-height:1.75;color:var(--ink)}
.prose p+p{margin-top:20px}
.prose p.first{font:300 clamp(26px,2.6vw,34px)/1.3 var(--serif);letter-spacing:-.01em}
.creds-grid{display:flex;flex-wrap:wrap;gap:0 48px;border-top:1px solid var(--ink);margin-top:8px}
.creds-grid li{flex:1 1 280px;padding:20px 0;border-bottom:1px solid var(--rule);font:400 21px/1.3 var(--serif)}
.creds-grid li span{display:block;margin-top:6px;font:400 15px/1.5 var(--sans);color:var(--muted)}
.steps4{display:flex;flex-wrap:wrap;gap:0 40px;margin-top:40px;border-top:1px solid rgba(247,243,234,.28)}
.steps4 li{flex:1 1 220px;padding:28px 0;border-bottom:1px solid rgba(247,243,234,.28)}
.steps4 .n{font:italic 300 20px/1 var(--serif);color:var(--gold-light)}
.steps4 h3{font:400 28px/1.2 var(--serif);margin-top:14px}
.steps4 p{font-size:16px;line-height:1.6;color:#E9E3D3;margin-top:8px}
.print-list{border-top:1px solid var(--ink)}
.print-list li{display:flex;flex-wrap:wrap;gap:6px 32px;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.print-list .t{flex:1 1 420px;font:400 clamp(21px,2vw,26px)/1.3 var(--serif)}
.print-list .d{font-size:14px;color:var(--muted);white-space:nowrap}
.pub{display:flex;flex-wrap:wrap;gap:32px 80px;padding-top:clamp(56px,7vw,96px)}
.pub>div:first-child{flex:0 1 300px}
.pub>div:last-child{flex:1 1 600px;min-width:0}
.pub h2{font:300 clamp(30px,3vw,42px)/1.1 var(--serif);margin-top:14px}
.pub .note{font-size:15px;color:var(--muted);margin-top:14px}
.pq{margin-top:32px;padding:28px 32px;background:var(--stone);border-left:0}
.pq blockquote{font:300 italic clamp(21px,2vw,26px)/1.45 var(--serif)}
.pq figcaption{margin-top:12px;font:500 14px/1.5 var(--sans);color:var(--muted)}
.tgrid{display:flex;flex-wrap:wrap;gap:24px;margin-top:40px}
.tgrid figure{flex:1 1 340px;min-width:0;background:var(--paper,#FBF8F1);border:1px solid var(--rule);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.tgrid blockquote{font:300 italic clamp(20px,1.8vw,23px)/1.5 var(--serif)}
.tgrid figcaption{font:500 14px/1.5 var(--sans);color:var(--muted);padding-top:16px;border-top:1px solid var(--rule)}
.tgrid figcaption b{display:block;color:var(--ink);font-weight:600}
.clips{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px;align-items:start}
.clips figure{min-width:0;background:#fff;border:1px solid var(--rule);padding:14px}
.clips img{width:100%;height:auto}
.clips figcaption{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
.clips .pub-name{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
@media (max-width:639px){.ed-hero img{height:auto;aspect-ratio:4/5}}
@media (min-width:640px){.clips{grid-template-columns:repeat(2,minmax(0,1fr))}}
.print-list .t a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px;text-decoration-thickness:1px}
.print-list .t a:hover{text-decoration-color:currentColor}
.print-list .arch{display:block;margin-top:6px;font:400 13px/1.4 var(--sans);color:var(--muted)}