/* Riser Lux Tradings B.V. — homepage
   Paper/ink palette shared with the site header. Display face is Georgia, which
   is also the face of the wordmark, so the page and the logo agree. */

.rl {
  --ink:#201914; --ink-2:#3a2f26; --soft:#6b6157;
  --paper:#fdfbf8; --paper-2:#f7f1e8; --line:#e9e0d4;
  --gold:#8f6a38; --gold-2:#b98a4e; --vermil:#d8402b;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --ease:cubic-bezier(.22,.8,.3,1);

  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  overflow-x:clip;
}
.rl *,.rl *::before,.rl *::after{box-sizing:border-box}
.rl img,.rl video{max-width:100%;display:block}

.rl-wrap{max-width:1240px;margin:0 auto;padding:0 28px;width:100%}
.rl-sec{padding:clamp(64px,8vw,124px) 0}

/* ------------------------------------------------------------- type --- */
.rl-eyebrow{
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 18px
}
.rl-display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(42px,6.4vw,86px);line-height:1.02;letter-spacing:-.022em;
  margin:0 0 24px;color:var(--ink)
}
.rl-display em{font-style:italic;color:var(--gold)}
.rl-h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.6vw,46px);line-height:1.12;letter-spacing:-.018em;
  margin:0 0 14px
}
.rl-h2--light{color:var(--paper)}
.rl-lede{font-size:clamp(16px,1.25vw,18.5px);color:var(--soft);max-width:40ch;margin:0 0 34px}
.rl-sub{color:var(--soft);max-width:62ch;margin:0 auto}
.rl-note{color:var(--soft);font-size:14px;max-width:70ch;margin:32px auto 0;text-align:center}

.rl-sec__head{text-align:center;margin-bottom:clamp(40px,5vw,68px)}
.rl-sec__head--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;text-align:left;flex-wrap:wrap
}
.rl-sec__head--split .rl-h2{margin-bottom:0}

.rl-link{
  color:var(--ink);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--gold);padding-bottom:3px;white-space:nowrap;transition:color .25s
}
.rl-link:hover{color:var(--gold)}
/* Text links are visually small by design; extend the touch area behind them
   so a thumb does not have to hit a 25px-tall strip. */
.rl-link{position:relative}
.rl-link::after{content:"";position:absolute;inset:-12px -10px}

/* ---------------------------------------------------------- buttons --- */
.rl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;font-size:12.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;border:1px solid transparent;border-radius:2px;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;
  will-change:transform
}
.rl-btn:hover{transform:translateY(-2px)}
.rl-btn--solid{background:var(--ink);color:var(--paper)}
.rl-btn--solid:hover{background:var(--gold);color:#fff}
.rl-btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.rl-btn--ghost:hover{background:var(--ink);color:var(--paper)}
.rl-btn--light{background:var(--paper);color:var(--ink)}
.rl-btn--light:hover{background:var(--gold-2);color:#fff}
.rl :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ------------------------------------------------------------- hero --- */
.rl-hero{padding:clamp(48px,6vw,92px) 0 clamp(56px,6vw,96px);position:relative}
.rl-hero::before{ /* a soft wash so the fold is not flat white */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 520px at 12% 0%,#f6ede1 0%,transparent 62%)
}
.rl-hero__grid{
  position:relative;display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(36px,5vw,76px);align-items:center
}
.rl-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}

.rl-facts{display:flex;gap:clamp(20px,3vw,44px);margin:0;padding-top:28px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.rl-facts div{margin:0}
.rl-facts dt{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1;margin:0 0 6px}
.rl-facts dd{margin:0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

.rl-hero__media{margin:0;position:relative}
.rl-hero__video{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;
  box-shadow:0 40px 80px -34px rgba(32,25,20,.5),0 2px 0 0 rgba(255,255,255,.6) inset
}
.rl-chip{
  position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:9px;
  background:rgba(253,251,248,.94);backdrop-filter:blur(6px);
  padding:9px 15px;border-radius:100px;font-size:12px;color:var(--ink);
  box-shadow:0 8px 24px -12px rgba(32,25,20,.5)
}
.rl-dot{width:7px;height:7px;border-radius:50%;background:var(--vermil);flex:0 0 auto}
@media(prefers-reduced-motion:no-preference){
  .rl-dot{animation:rl-pulse 2.4s var(--ease) infinite}
}
@keyframes rl-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* ------------------------------------------------------ credentials --- */
.rl-creds{background:var(--ink);color:#cfc4b6}
.rl-creds__row{
  display:flex;flex-wrap:wrap;gap:10px clamp(20px,4vw,52px);
  justify-content:center;padding-block:16px;
  font-size:12px;letter-spacing:.08em
}
.rl-creds strong{color:var(--paper);font-weight:500}

/* ------------------------------------------------------------ tiers --- */
.rl-tiers{background:var(--paper-2)}
.rl-ladder{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto auto auto auto;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden
}
/* Each card is a column with the figure pinned to the bottom, so the four
   read as one row of numbers instead of four boxes with a hole in the middle. */
.rl-step{
  display:grid;grid-row:span 5;grid-template-rows:subgrid;
  background:var(--paper);padding:26px 24px 24px;position:relative;
  transition:background .35s var(--ease)
}
/* Fallback where subgrid is unsupported: a plain column. Equal-height rows are
   then not guaranteed, but nothing overlaps or collapses. */
@supports not (grid-template-rows: subgrid){
  .rl-step{display:flex;flex-direction:column}
}
.rl-step + .rl-step{border-left:1px solid var(--line)}
.rl-step::before{                       /* a gold hairline that wipes in on hover */
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)
}
.rl-step:hover::before{transform:scaleX(1)}
.rl-step:hover{background:#fffdfa}

/* Fixed height: the "Best rate" tag must not make its card taller than the
   other three, or the row of figures stops lining up. */
.rl-step__head{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:16px;height:24px}
.rl-step__n{font-family:var(--serif);font-size:13px;color:var(--gold);letter-spacing:.1em}
.rl-step__tag{
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  line-height:1;color:var(--ink);background:var(--gold-2);
  padding:5px 9px;border-radius:100px;white-space:nowrap
}

.rl-step h3{font-size:16.5px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.rl-step__note{font-size:13.5px;color:var(--soft);margin:0 0 26px;line-height:1.45}

.rl-step__figure{display:block;align-self:end}
.rl-step__save{
  font-family:var(--serif);font-size:clamp(38px,4.2vw,54px);line-height:.92;
  display:block;color:var(--ink);letter-spacing:-.03em
}
.rl-step__save i{font-style:normal;font-size:.46em;margin-left:2px;color:var(--gold)}
.rl-step__save--list{font-size:clamp(30px,3.2vw,40px);color:var(--soft)}
.rl-step__cap{
  display:block;margin-top:7px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft)
}

/* the bar makes the ladder visible rather than merely stated */
.rl-step__bar{
  display:block;height:3px;margin-top:22px;border-radius:2px;
  background:rgba(32,25,20,.1);position:relative;overflow:hidden
}
.rl-step__bar::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);
  background:linear-gradient(90deg,var(--gold-2),var(--gold));
  transform-origin:left;transform:scaleX(1);
  transition:transform 1.1s var(--ease) .15s
}
/* only animate when the reveal script is actually driving things */
.rl-js .rl-step[data-rl-reveal]:not(.is-in) .rl-step__bar::after{transform:scaleX(0)}

/* the top tier is the destination — treat it as such */
.rl-step.is-top{background:linear-gradient(180deg,#fdf6ea 0%,var(--paper) 62%)}
.rl-step.is-top::before{transform:scaleX(1)}      /* its gold rule is always drawn */
.rl-step.is-top .rl-step__save{color:var(--gold)}
.rl-step.is-top h3{color:var(--ink)}

/* ----------------------------------------------------------- ranges --- */
.rl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));
  gap:clamp(14px,1.6vw,22px)
}
.rl-card{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
  will-change:transform
}
.rl-card:hover{
  transform:translateY(-5px);border-color:#dcd0bf;
  box-shadow:0 26px 44px -26px rgba(32,25,20,.34)
}
.rl-card__img{
  display:block;background:var(--paper-2);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden
}
.rl-card__img img{
  width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .5s var(--ease)
}
.rl-card:hover .rl-card__img img{transform:scale(1.055)}
/* Ranges with no packshot yet get a designed tile — let it fill the frame
   rather than sit letterboxed and multiplied like a cut-out bottle. */
.rl-card__img.is-tile{padding:0}
.rl-card__img.is-tile img{object-fit:cover;mix-blend-mode:normal}
.rl-card__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.rl-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rl-card__top h3{font-family:var(--serif);font-size:19px;font-weight:400;margin:0;letter-spacing:-.01em}
.rl-card__count{
  font-size:11px;letter-spacing:.1em;color:var(--soft);
  border:1px solid var(--line);border-radius:100px;padding:2px 9px;flex:0 0 auto
}
.rl-card__note{font-size:13px;color:var(--soft);line-height:1.5}
/* the four tiers are one object; staggering them makes the row look broken */
.rl-step[data-rl-reveal]{transition-delay:0ms!important}

/* ------------------------------------------------------------ stock --- */
.rl-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:center}
.rl-split__media{margin:0}
.rl-split__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;
  box-shadow:0 34px 66px -32px rgba(32,25,20,.42)
}
.rl-checks{list-style:none;margin:26px 0 34px;padding:0;display:grid;gap:18px}
.rl-checks li{padding-left:30px;position:relative;color:var(--soft);font-size:15.5px}
.rl-checks li strong{color:var(--ink);font-weight:600}
.rl-checks li::before{
  content:"";position:absolute;left:0;top:.62em;width:14px;height:7px;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg)
}

/* ------------------------------------------------------------- flow --- */
.rl-flow__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,38px)
}
.rl-flow__list li{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.rl-flow__n{
  font-family:var(--serif);font-size:13px;letter-spacing:.14em;color:var(--gold);
  display:block;margin-bottom:14px
}
.rl-flow__list h3{font-size:17px;font-weight:600;margin:0 0 9px;letter-spacing:-.01em}
.rl-flow__list p{margin:0;color:var(--soft);font-size:14.5px}

/* -------------------------------------------------------------- faq --- */
.rl-faq{background:var(--paper-2)}
.rl-faq__wrap{max-width:860px}
.rl-faq__item{border-bottom:1px solid var(--line)}
.rl-faq__item:first-of-type{border-top:1px solid var(--line)}
.rl-faq__item summary{
  cursor:pointer;list-style:none;padding:23px 44px 23px 0;position:relative;
  font-size:17px;font-weight:500;letter-spacing:-.005em;transition:color .25s
}
.rl-faq__item summary::-webkit-details-marker{display:none}
.rl-faq__item summary:hover{color:var(--gold)}
.rl-faq__mark{position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-6px}
.rl-faq__mark::before,.rl-faq__mark::after{
  content:"";position:absolute;background:var(--gold);transition:transform .3s var(--ease)
}
.rl-faq__mark::before{left:0;top:6px;width:13px;height:1.5px}
.rl-faq__mark::after{left:6px;top:0;width:1.5px;height:13px}
.rl-faq__item[open] .rl-faq__mark::after{transform:scaleY(0)}
.rl-faq__a{padding:0 44px 26px 0;color:var(--soft);font-size:15.5px}
.rl-faq__a p{margin:0}
@media(prefers-reduced-motion:no-preference){
  .rl-faq__item[open] .rl-faq__a{animation:rl-open .34s var(--ease)}
}
@keyframes rl-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------- band --- */
/* The closing band carries the gold-oil still behind a heavy scrim: enough
   image to feel like a campaign, dark enough that the text stays legible. */
.rl-band{
  position:relative;background:var(--ink);color:#cfc4b6;
  padding:clamp(52px,6vw,84px) 0;overflow:hidden;isolation:isolate
}
.rl-band::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url("band.jpg");background-size:cover;background-position:center
}
.rl-band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(24,18,13,.94) 0%,rgba(24,18,13,.86) 46%,rgba(24,18,13,.55) 100%)
}
.rl-band .rl-h2--light{color:#fff}
@media(max-width:640px){
  .rl-band::after{background:rgba(24,18,13,.9)}
}
.rl-band__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap
}
.rl-band p{margin:8px 0 0;max-width:52ch}

/* --------------------------------------------------------- reveals --- */
/* Hidden only once JS has confirmed it is running and has armed the observer.
   Without .rl-js the page renders fully visible, so a script failure can never
   leave the content blank. */
@media(prefers-reduced-motion:no-preference){
  .rl-js .rl [data-rl-reveal],
  .rl-js.rl [data-rl-reveal]{opacity:0;transform:translateY(18px)}
  .rl-js .rl [data-rl-reveal].is-in,
  .rl-js.rl [data-rl-reveal].is-in{opacity:1;transform:none;
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
}

/* ----------------------------------------------------- breakpoints --- */
@media(max-width:1024px){
  .rl-hero__grid{grid-template-columns:1fr;gap:44px}
  .rl-hero__media{max-width:440px;margin-inline:auto;width:100%}
  .rl-ladder{grid-template-columns:repeat(2,1fr)}
  .rl-flow__list{grid-template-columns:repeat(2,1fr)}
  .rl-split{grid-template-columns:1fr}
  .rl-split__media{max-width:520px;margin-inline:auto;width:100%}
  .rl-step__note{min-height:0}
}
@media(max-width:640px){
  .rl-wrap{padding:0 20px}

  /* The ladder is a comparison, not four articles. On a phone it reads far
     better as compact rows than as four full-height cards. */
  .rl-ladder{grid-template-columns:1fr;grid-template-rows:none}
  .rl-step{
    display:grid;gap:0 16px;padding:16px 18px;align-items:center;
    grid-row:auto;grid-template-rows:none;
    grid-template-columns:1fr auto;
    grid-template-areas:"head head" "title fig" "note fig" "bar bar"
  }
  .rl-step__figure{align-self:center}
  .rl-step__head{grid-area:head;margin-bottom:8px;min-height:0}
  .rl-step h3{grid-area:title;margin:0;font-size:15.5px}
  .rl-step__note{grid-area:note;margin:2px 0 0;font-size:12.5px}
  .rl-step__figure{grid-area:fig;margin-top:0;text-align:right}
  .rl-step__save{font-size:34px}
  .rl-step__save--list{font-size:24px}
  .rl-step__cap{font-size:9.5px;letter-spacing:.06em;margin-top:4px}
  .rl-step__bar{grid-area:bar;margin-top:14px}

  /* four facts on one line rather than a wrapped two-row block */
  .rl-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:22px}
  .rl-facts dt{font-size:21px;margin-bottom:4px}
  .rl-facts dd{font-size:10.5px;letter-spacing:.02em;text-transform:none;line-height:1.3}
  .rl-flow__list{grid-template-columns:1fr}
  .rl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .rl-cta-row{flex-direction:column;align-items:stretch}
  .rl-btn{width:100%}
  .rl-facts{gap:18px 26px}
  .rl-sec__head--split{align-items:flex-start;flex-direction:column}
  .rl-band__inner{flex-direction:column;align-items:flex-start}
  .rl-band .rl-btn{width:100%}
  .rl-card__body{padding:14px}
  .rl-card__top h3{font-size:16px}
  .rl-card__note{display:none}
}

/* --------------------------------------------------------- concerns --- */
.rl-concerns__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)
}
.rl-concern{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s
}
.rl-concern:hover{
  transform:translateY(-5px);border-color:#dcd0bf;
  box-shadow:0 26px 44px -26px rgba(32,25,20,.34)
}
.rl-concern__img{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.rl-concern__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)
}
.rl-concern:hover .rl-concern__img img{transform:scale(1.045)}

.rl-concern__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.rl-concern__issue{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)
}
.rl-concern__range{
  font-family:var(--serif);font-size:22px;line-height:1.15;letter-spacing:-.015em
}
.rl-concern__note{font-size:13.5px;color:var(--soft);line-height:1.5;flex:1}
.rl-concern__go{
  margin-top:10px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);transition:color .25s
}
.rl-concern:hover .rl-concern__go{color:var(--gold)}

@media(max-width:1000px){
  .rl-concerns__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .rl-concerns__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .rl-concern__body{padding:14px 14px 16px;gap:4px}
  .rl-concern__range{font-size:17px}
  .rl-concern__note{display:none}
  .rl-concern__issue{font-size:10px;letter-spacing:.1em}
  .rl-concern__go{margin-top:6px;font-size:10.5px}
}