/* Hybrid Works – Roast My Pagen tekijä. Monokromi, editoriaalinen. Mobiili ensin. */
:root{
  --black:#000; --ink:#111; --white:#fff;
  --grey-1:#F2F2F2; --grey-3:#BDBDBD; --grey-5:#6B6B6B; --grey-7:#3A3A3A;
  --rule:1px solid var(--black);
  --rule-soft:1px solid #D4D4D4;
  --serif:'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans:'Inter Tight', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --wrap:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;color:var(--black);font-weight:400}
h2{font:400 clamp(2.4rem,7vw,4.25rem)/1 var(--serif);letter-spacing:-.01em;margin-bottom:1.5rem}
h3{font:500 1.0625rem/1.35 var(--sans)}
p{margin:0 0 1rem}
strong{font-weight:600}
a{color:inherit}
:focus-visible{outline:2px solid var(--black);outline-offset:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.nw{white-space:nowrap}
.lead{font-size:1.2rem;line-height:1.5;color:var(--ink);max-width:40rem}
.eyebrow{font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-5);margin:0 0 1.25rem}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:10;background:var(--black);color:var(--white);padding:.6rem 1rem;font:500 .9rem var(--sans)}
.skip-link:focus{top:1rem}

/* Napit: musta täyte valkoisella / valkoinen ääriviiva mustalla */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:.85rem 1.6rem;border:1px solid currentColor;border-radius:0;
  font:500 1rem/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;transition:background-color .15s,color .15s}
.btn--solid{background:var(--black);color:var(--white);border-color:var(--black)}
.btn--solid:hover{background:var(--white);color:var(--black)}
.btn--invert{background:transparent;color:var(--white);border-color:var(--white)}
.btn--invert:hover{background:var(--white);color:var(--black)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* Hero */
.hero{padding:2.5rem 0 4rem;border-bottom:var(--rule)}
.hero__inner{display:flex;flex-direction:column;align-items:flex-start}
.hero__logo{margin:0 0 4rem}
.hero__logo img{width:140px}
.hero__lead{font:400 clamp(2.3rem,8.6vw,5.5rem)/1.02 var(--serif);letter-spacing:-.015em;color:var(--black);max-width:20ch;margin:0 0 2.5rem}
.hero__lead strong{font-weight:400;font-style:italic}

/* Osiot ja ruudukko */
.section{padding:4rem 0;border-bottom:var(--rule)}
.grid{display:grid;gap:1rem}
.grid__body > :last-child{margin-bottom:0}

.intro{display:grid;gap:1.75rem;align-items:start;margin-bottom:3rem}
.rmp-mark{position:relative;display:block;width:150px}
.rmp-logo{width:100%}
/* HW-merkki Roastin t:n poikkiviivan alle, rungon oikealle puolelle (viiva x≈72–91 %, alareuna y≈9,5 %; runko päättyy x≈73 %; tyhjä tasku y≈10–47 %).
   Vaihtoehto (Pagen viimeisen e:n alle): right:3.5%; top:74%; */
.rmp-mark__tm{position:absolute;right:10.5%;top:12.3%;width:auto;height:max(14px,10.5%);pointer-events:none}

.steps{list-style:none;margin:0 0 2.5rem;padding:0;border-top:var(--rule)}
.step{padding:1.5rem 0;border-bottom:var(--rule-soft)}
.step__num{display:block;font:500 .8rem/1 var(--mono);color:var(--grey-5);margin-bottom:1rem}
.step h3{font:400 1.75rem/1.1 var(--serif);margin-bottom:.5rem}
.step p{margin:0;color:var(--grey-7)}
.step:last-child{border-bottom:0}
.price-note{margin:0;padding:1.25rem 0;border-top:var(--rule);border-bottom:var(--rule);font-size:1rem}

.criteria{list-style:none;counter-reset:k;margin:2.5rem 0 0;padding:0;border-top:var(--rule)}
.criteria li{counter-increment:k;display:grid;grid-template-columns:2.75rem 1fr;column-gap:.5rem;padding:1.25rem 0;border-bottom:var(--rule-soft)}
.criteria li::before{content:"0" counter(k);grid-row:span 2;font:500 .8rem/1.9 var(--mono);color:var(--grey-5)}
.criteria h3{font:400 1.6rem/1.15 var(--serif);margin-bottom:.25rem}
.criteria p{margin:0;color:var(--grey-7)}

.model-list{list-style:none;margin:0 0 2rem;padding:0;border-top:var(--rule)}
.model-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1rem 0;border-bottom:var(--rule-soft)}
.model-list strong{font:400 2.25rem/1 var(--serif);color:var(--black)}
.model-list span{font:400 .8rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grey-5)}

/* Käänteinen musta CTA-kaista */
.cta{background:var(--black);color:var(--white);padding:5rem 0}
.cta h2{color:var(--white);font-size:clamp(2.75rem,10vw,6.5rem);max-width:12ch}
.cta .lead{color:var(--grey-3);margin-bottom:2.5rem}

.footer{padding:2rem 0}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.footer__logo{width:140px}
.footer__copy{margin:0;font:400 .8rem/1 var(--mono);color:var(--grey-5)}

@media (min-width:720px){
  .wrap{padding:0 2.5rem}
  .hero{padding:3rem 0 6rem}
  .hero__logo{margin-bottom:4.5rem}
  .section{padding:6rem 0}
  .intro{grid-template-columns:170px 1fr;gap:2.5rem}
  .rmp-mark{width:160px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr)}
  .step{padding:1.5rem 1.5rem 1.75rem 0;border-bottom:0}
  .step + .step{border-left:var(--rule-soft);padding-left:1.5rem}
  .criteria{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem}
  .cta{padding:7rem 0}
}
@media (min-width:1024px){
  .grid{grid-template-columns:5fr 7fr;gap:4rem}
  .grid__head h2{font-size:3.5rem}
  .hero__logo img{width:170px}
}

/* ==========================================================================
   Liike – rauhallinen, editoriaalinen. Vain transform/opacity.
   Alkutilat vain html.js-anim-luokalla (lisätään JS:llä) → sisältö näkyy ilman JS:ää.
   ========================================================================== */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-draw:cubic-bezier(.33,1,.68,1)}
.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}

/* 5. Linkit/napit: alleviivaus liukuu vasemmalta (kaikissa tiloissa, ei riipu JS:stä) */
.btn{position:relative}
.btn::after{content:"";position:absolute;left:1.6rem;right:1.6rem;bottom:.72rem;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right center;transition:transform .45s var(--ease-out)}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.btn > span{display:inline-block;transition:transform .45s var(--ease-out)}
.btn:hover > span,.btn:focus-visible > span{transform:translateX(3px)}

/* 1. Otsikoiden rivipaljastus: maski + translateY */
.js-anim .hero__lead:not(.is-split):not(.is-done),
.js-anim .grid__head h2:not(.is-split):not(.is-done){opacity:0}
.js-anim .line{display:block;overflow:hidden;white-space:nowrap;padding:.14em 0 .16em;margin:-.14em 0 -.16em}
.js-anim .line__in{display:block;transform:translateY(calc(100% + .35em));transition:transform .9s var(--ease-out)}
.js-anim .is-in > .line > .line__in{transform:none}

/* 2. Viivat piirtyvät vasemmalta oikealle */
.js-anim .rl-b{border-bottom-color:transparent}
.js-anim .rl-t{border-top-color:transparent}
.js-anim .hero,.js-anim .section,.js-anim .steps,.js-anim .criteria,.js-anim .model-list,
.js-anim .price-note,.js-anim .step,.js-anim .criteria > li,.js-anim .model-list > li{position:relative}
.rule{position:absolute;left:0;right:0;height:1px;background:var(--black);pointer-events:none;
  transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease-draw)}
.rule--soft{background:#D4D4D4}
.rule--b{bottom:-1px}
.rule--t{top:-1px}
.rule.is-in{transform:scaleX(1)}
.js-anim .step:last-child > .rule--b{display:none}
@media (min-width:720px){.js-anim .step > .rule--b{display:none}}

/* 4. Fade + translate osioille */
.js-anim .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js-anim .btn.rv{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),background-color .15s,color .15s}
.js-anim .rv.is-in{opacity:1;transform:none}

/* Logo latautuessa */
.js-anim .hero__logo img{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js-anim .hero__logo.is-in img{opacity:1;transform:none}
.js-anim .footer__logo{transform-origin:left center}

/* RMP-merkki: logo nousee, HW-merkki ilmestyy t:n alle paikalleen (lopputila = ei transformia) */
.js-anim .rv-mark .rmp-logo{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js-anim .rv-mark .rmp-mark__tm{opacity:0;transform:scale(.8);transition:opacity .6s var(--ease-out) .45s,transform .6s var(--ease-out) .45s}
.js-anim .rv-mark.is-in .rmp-logo,.js-anim .rv-mark.is-in .rmp-mark__tm{opacity:1;transform:none}

/* 3. CTA: kirjoituskone + hillitty kursori */
.js-anim .cta h2{position:relative}
.js-anim .cta h2 .ch{opacity:0}
.js-anim .cta h2 .ch.on{opacity:1}
.js-anim .cta h2 .caret{position:absolute;left:0;top:0;width:.045em;min-width:2px;background:var(--white);opacity:0;will-change:transform}
.js-anim .cta h2.is-typing .caret{opacity:1}
.js-anim .cta h2.is-typed .caret{animation:hw-caret 1.1s steps(1,end) 3 forwards}
@keyframes hw-caret{0%{opacity:1}50%{opacity:0}100%{opacity:0}}

/* Liike rajoitettu → kaikki pois, lopputila heti (varmistus; JS ei myöskään käynnisty) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.line__in,.rule,.hero__logo img,.rmp-logo,.rmp-mark__tm,.cta h2 .ch{opacity:1!important;transform:none!important}
  .btn::after{display:none}
  .caret{display:none}
}