/*
Theme Name: J. Robertsson
Theme URI: https://jrobertsson.com/
Author: Johan Robertsson
Description: A responsive portfolio and services theme for a writer, editor and storyteller.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: j-robertsson
License: GNU General Public License v2 or later
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--ink:#101010;--paper:#f3f0e8;--white:#fffdf7;--muted:#aaa79f;--line:color-mix(in srgb,var(--ink) 18%,transparent);--accent:#66745b;--max:1320px}
html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Manrope",Arial,sans-serif;font-size:16px;line-height:1.55}body.admin-bar .jr-nav{top:32px}*{box-sizing:border-box}a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}img{max-width:100%;height:auto}p,h1,h2,h3{margin-top:0}.jr-site{overflow:hidden}.jr-shell{width:min(var(--max),calc(100% - 64px));margin-inline:auto}.jr-section{padding:clamp(88px,11vw,170px) 0;border-top:1px solid var(--line)}.jr-section--dark{color:var(--white);background:var(--ink);border-color:rgba(255,255,255,.18)}.jr-section--accent{color:var(--ink);background:var(--accent)}
.jr-kicker{display:block;margin-bottom:24px;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.jr-display{max-width:1100px;margin:0;font-size:clamp(3.25rem,8.7vw,8.9rem);font-weight:800;letter-spacing:-.075em;line-height:.84;text-transform:uppercase}.jr-heading{max-width:960px;margin:0;font-size:clamp(2.75rem,6.4vw,6.8rem);font-weight:800;letter-spacing:-.065em;line-height:.9;text-transform:uppercase}.jr-lead{max-width:690px;font-size:clamp(1.15rem,1.75vw,1.6rem);line-height:1.45}.jr-copy{max-width:690px;font-size:clamp(1rem,1.25vw,1.2rem)}.jr-muted{color:#696760}.jr-section--dark .jr-muted{color:var(--muted)}
.jr-button{display:inline-flex;min-height:52px;align-items:center;justify-content:center;padding:14px 21px;border:1px solid var(--ink);background:var(--ink);color:var(--white);font-size:.78rem;font-weight:800;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;transition:transform .18s ease,background .18s ease,color .18s ease}.jr-button:hover{transform:translateY(-3px);background:var(--accent);color:var(--ink)}.jr-button--ghost{background:transparent;color:var(--ink)}.jr-button--light{border-color:var(--white);background:var(--white);color:var(--ink)}.jr-button--light:hover{border-color:var(--accent);background:var(--accent)}.jr-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}.jr-arrow{display:inline-block;margin-left:16px;transition:transform .18s ease}a:hover .jr-arrow{transform:translateX(5px)}
.jr-nav{position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--line);background:var(--paper);backdrop-filter:blur(8px)}.jr-nav__inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}.jr-logo,.jr-logo a{font-size:.88rem;font-weight:800;letter-spacing:.14em;white-space:nowrap}.jr-logo img{display:block;max-height:48px;width:auto}.jr-nav__links,.jr-nav__links ul{display:flex;align-items:center;gap:clamp(18px,2.5vw,38px);margin:0;padding:0;list-style:none}.jr-nav__links a{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.jr-nav__links a:hover{color:var(--accent)}.jr-nav__links .jr-contact-menu>a{display:inline-flex;min-height:48px;align-items:center;padding:12px 18px;background:var(--ink);color:var(--white)}.jr-mobile-nav{display:none}
.jr-hero{min-height:calc(100vh - 78px);display:flex;align-items:center;padding:clamp(72px,10vw,130px) 0 58px}.jr-hero__title span{display:block}.jr-hero__title span:nth-child(2){margin-left:clamp(0px,6vw,92px)}.jr-hero__title span:last-child{color:var(--accent)}.jr-hero__bottom{margin-top:clamp(48px,7vw,92px);display:grid;grid-template-columns:1.4fr .6fr;gap:50px;align-items:end}.jr-hero__tags{justify-self:end;font-size:.69rem;font-weight:700;letter-spacing:.14em;line-height:1.9;text-align:right;text-transform:uppercase}
.jr-proof-grid{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.22)}.jr-stat{min-height:230px;padding:34px 28px 30px 0;border-right:1px solid rgba(255,255,255,.22)}.jr-stat+.jr-stat{padding-left:28px}.jr-stat:last-child{border-right:0}.jr-stat__number{display:block;color:var(--accent);font-size:clamp(3.9rem,7vw,7.4rem);font-weight:800;letter-spacing:-.07em;line-height:.9}.jr-stat__label{display:block;max-width:230px;margin-top:22px;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.jr-proof-bottom{margin-top:58px;display:flex;align-items:end;justify-content:space-between;gap:30px}
.jr-philosophy__copy{margin:clamp(60px,9vw,120px) 0 0 auto}.jr-philosophy__copy p{margin-bottom:1.15em}.jr-philosophy__copy p:nth-child(2){font-weight:800}.jr-method-grid{margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.jr-method{min-height:500px;padding:38px 34px 42px 0;border-right:1px solid var(--line);display:flex;flex-direction:column}.jr-method+.jr-method{padding-left:34px}.jr-method:last-child{border-right:0}.jr-method__number{color:var(--accent);font-size:clamp(4.8rem,8vw,8.8rem);font-weight:800;letter-spacing:-.08em;line-height:.8}.jr-method h3{margin-top:auto;margin-bottom:0;font-size:1.55rem;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}.jr-method__question{margin:12px 0 0;font-weight:700}.jr-method__detail{margin:12px 0 0;color:#696760}
.jr-work-intro{margin-top:30px}.jr-work-grid{margin-top:70px;display:grid;grid-template-columns:1.35fr .65fr;gap:18px}.jr-work-card{min-height:440px;padding:30px;border:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .22s ease,border-color .22s ease}.jr-work-card:hover{transform:translateY(-5px);border-color:var(--accent)}.jr-work-card:before{content:"";position:absolute;right:-15%;bottom:-45%;width:340px;aspect-ratio:1;border:1px solid var(--accent);border-radius:50%;opacity:.65}.jr-work-card--featured{min-height:620px;background:var(--white);color:var(--ink)}.jr-work-card--featured:before{width:560px;border-width:70px;opacity:.86}.jr-work-card__type{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.jr-work-card h3{max-width:620px;margin-top:22px;font-size:clamp(2rem,4vw,4.5rem);font-weight:800;letter-spacing:-.06em;line-height:.92;text-transform:uppercase;position:relative;z-index:1}.jr-work-card__tags{margin-top:16px;font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;position:relative;z-index:1}.jr-work-card__link{margin-top:auto;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}.jr-work-stack{display:grid;gap:18px}.jr-work-stack .jr-work-card{min-height:301px}
.jr-identities{margin-top:82px;display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.jr-identity{border-top:4px solid var(--ink);padding-top:24px}.jr-identity h3{font-size:clamp(1.6rem,2.4vw,2.6rem);font-weight:800;letter-spacing:-.04em}.jr-identity p{margin-top:16px;max-width:350px}.jr-punchline{margin:90px 0 0 auto;max-width:720px;font-size:clamp(1.6rem,3vw,3.2rem);font-weight:700;letter-spacing:-.04em;line-height:1.15}.jr-credentials{margin-top:76px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.jr-credential{min-height:390px;border:1px solid var(--line);padding:32px;display:flex;flex-direction:column}.jr-credential:first-child{background:var(--ink);color:var(--white)}.jr-credential__type{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.jr-credential h3{margin-top:22px;font-size:clamp(2rem,4vw,4rem);font-weight:800;letter-spacing:-.055em;line-height:.94;text-transform:uppercase}.jr-credential p{margin-top:18px;max-width:480px}.jr-credential a{margin-top:auto;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.jr-business-intro{margin-top:44px}.jr-business-list{margin-top:78px;border-top:1px solid rgba(16,16,16,.35)}.jr-business-item{padding:34px 0;border-bottom:1px solid rgba(16,16,16,.35);display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}.jr-business-item h3{font-weight:800;text-transform:uppercase}.jr-business-item p{max-width:630px}.jr-coaching-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(50px,9vw,130px);align-items:end}.jr-coaching-title span{color:var(--accent)}.jr-coaching-panel{border-top:1px solid rgba(255,255,255,.25);padding-top:28px}.jr-coaching-panel p+p{margin-top:22px}.jr-topics{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px}.jr-topic{padding:7px 10px;border:1px solid rgba(255,255,255,.3);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.jr-price{display:block;margin-top:48px;color:var(--accent);font-size:clamp(3rem,5vw,5.8rem);font-weight:800;letter-spacing:-.07em;line-height:.9}
.jr-final-grid{margin-top:72px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.22)}.jr-final-path{padding:32px 28px 0 0;border-right:1px solid rgba(255,255,255,.22);display:flex;min-height:250px;flex-direction:column}.jr-final-path+.jr-final-path{padding-left:28px}.jr-final-path:last-child{border-right:0}.jr-final-path h3{font-size:1rem;font-weight:800;text-transform:uppercase}.jr-final-path p{margin-top:14px;color:var(--muted)}.jr-final-path a{margin-top:auto;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.jr-footer{padding:42px 0;color:var(--white);background:var(--ink);border-top:1px solid rgba(255,255,255,.18)}.jr-footer__inner{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}.jr-footer__links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 24px;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.jr-footer__meta{margin:10px 0 0;color:var(--muted);font-size:.7rem}
.jr-content{min-height:70vh;padding:clamp(70px,10vw,140px) 0}.jr-content h1{font-size:clamp(2.8rem,7vw,7rem);font-weight:800;letter-spacing:-.065em;line-height:.9;text-transform:uppercase}.jr-entry{max-width:800px;margin-top:48px;font-size:1.1rem}.jr-entry a{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}.jr-full-width-page{min-height:70vh;overflow:hidden}.jr-full-width-page > .wp-block-html {
  width: 100%;
  max-width: none;
  margin-block: 0;
}.jr-full-width-page .alignwide,.jr-full-width-page .alignfull{width:100%;max-width:none;margin-inline:0}.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){body.admin-bar .jr-nav{top:46px}.jr-shell{width:min(100% - 38px,var(--max))}.jr-nav__links{display:none}.jr-mobile-nav{display:block;margin-left:auto;position:relative}.jr-mobile-nav summary{cursor:pointer;list-style:none;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.jr-mobile-nav summary::-webkit-details-marker{display:none}.jr-mobile-nav__panel{position:absolute;top:35px;right:0;width:min(310px,calc(100vw - 38px));padding:20px;border:1px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--accent)}.jr-mobile-nav__panel ul{margin:0;padding:0;list-style:none}.jr-mobile-nav__panel a{display:block;padding:12px 4px;border-bottom:1px solid var(--line);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.jr-mobile-nav__panel li:last-child a{border-bottom:0;color:var(--accent)}.jr-hero{min-height:auto}.jr-hero__bottom,.jr-coaching-layout{grid-template-columns:1fr}.jr-hero__tags{justify-self:start;text-align:left}.jr-proof-grid,.jr-method-grid,.jr-identities,.jr-final-grid{grid-template-columns:1fr}.jr-stat,.jr-stat+.jr-stat,.jr-method,.jr-method+.jr-method,.jr-final-path,.jr-final-path+.jr-final-path{padding:28px 0;border-right:0;border-bottom:1px solid currentColor;min-height:auto}.jr-stat:last-child,.jr-method:last-child,.jr-final-path:last-child{border-bottom:0}.jr-method{min-height:360px}.jr-work-grid{grid-template-columns:1fr}.jr-identities{gap:34px}.jr-final-path{min-height:190px}}
@media(max-width:782px){body.admin-bar .jr-nav{top:46px}}@media(max-width:620px){.jr-section{padding:78px 0}.jr-display{font-size:clamp(3.15rem,16vw,5.8rem)}.jr-heading{font-size:clamp(2.7rem,13vw,4.8rem)}.jr-hero__title span:nth-child(2){margin-left:0}.jr-actions{display:grid}.jr-button{width:100%}.jr-proof-bottom{display:block}.jr-proof-bottom .jr-button{margin-top:28px}.jr-work-card,.jr-work-card--featured,.jr-work-stack .jr-work-card{min-height:380px}.jr-work-card--featured:before{width:420px}.jr-credentials{grid-template-columns:1fr}.jr-business-item{grid-template-columns:1fr;gap:12px}.jr-footer__inner{grid-template-columns:1fr}.jr-footer__links{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.jr-button,.jr-arrow,.jr-work-card{transition:none}}
/* Align Jetpack sharing controls on full-width pages */
.jr-full-width-page .sharedaddy,
.jr-full-width-page .sd-sharing-enabled,
.jr-full-width-page .wp-block-jetpack-sharing-buttons {
  width: min(var(--max, 1320px), calc(100% - 64px));
  max-width: 1320px;
  margin-inline: auto !important;
  padding-block: 18px 48px;
}

@media (max-width: 900px) {
  .jr-full-width-page .sharedaddy,
  .jr-full-width-page .sd-sharing-enabled,
  .jr-full-width-page .wp-block-jetpack-sharing-buttons {
    width: min(var(--max, 1320px), calc(100% - 38px));
  }
}

<!-- ============================================================
J. ROBERTSSON — CLEAN ENSO STORYBOROS THEME KIT

GLOBAL SETUP
1. Move the CSS below into the end of the theme's style.css.
2. Paste the SVG wherever the Storyboros should appear.
3. Add one modifier class:
   jr-storyboros--outline    portrait / small identity mark
   jr-storyboros--background large low-opacity decoration
   jr-storyboros--solid      stronger featured-card artwork
============================================================= -->

<style>
  .jr-storyboros {
    --storyboros-color: var(--accent, #66745b);
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    color: var(--storyboros-color);
    transform-origin: center;
  }

  .jr-storyboros__mass {
    display: block;
    fill: currentColor;
  }

  .jr-storyboros__line {
    display: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Fine-line version for portrait frames and small identity marks. */
  .jr-storyboros--outline .jr-storyboros__mass {
    display: none;
  }

  .jr-storyboros--outline .jr-storyboros__line {
    display: block;
    stroke-width: 3.2;
  }

  /* Large, quiet background version. */
  .jr-storyboros--background {
    opacity: .34;
  }

  /* The background and solid variants use the single filled form.
     Its taper is built into the geometry rather than attached as a tail. */

  /* A finite gesture, not a continuously spinning loader. */
  .jr-storyboros--animated {
    transition: transform .8s cubic-bezier(.2,.75,.2,1);
  }

  .jr-storyboros-trigger:hover .jr-storyboros--animated,
  .jr-storyboros-trigger:focus-within .jr-storyboros--animated {
    transform: rotate(7deg) scale(1.012);
  }

  @media (prefers-reduced-motion: reduce) {
    .jr-storyboros--animated {
      transition: none;
    }
  }

  /* ABOUT PORTRAIT INTEGRATION
     The SVG replaces both the old ring and the decorative green dot. */
  .jr-about-intro__portrait-frame::before,
  .jr-about-intro__portrait-frame::after {
    content: none;
  }

  .jr-about-intro__storyboros {
    position: absolute;
    inset: -9%;
    z-index: 0;
    pointer-events: none;
  }

  .jr-about-intro__portrait-frame:hover
  .jr-about-intro__storyboros {
    transform: rotate(7deg) scale(1.012);
  }


/* ==============================================================
   J. ROBERTSSON — EDITORIAL DEMONSTRATION
   Append this file to the theme's style.css, without <style> tags.
   ============================================================== */

.jr-edit-demo,
.jr-edit-demo * {
  box-sizing: border-box;
}

.jr-edit-demo {
  --jr-edit-ink: var(--ink, #101010);
  --jr-edit-paper: var(--paper, #f3f0e8);
  --jr-edit-white: var(--white, #fffdf7);
  --jr-edit-accent: var(--accent, #66745b);
  --jr-edit-muted: #706e67;
  color: var(--jr-edit-ink);
  background: var(--jr-edit-paper);
  border-top: 1px solid rgba(16, 16, 16, .18);
}

.jr-edit-demo__intro {
  padding: clamp(90px, 11vw, 170px) 0 clamp(70px, 8vw, 120px);
}

.jr-edit-demo__kicker {
  margin: 0 0 26px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.jr-edit-demo__title {
  max-width: 980px;
  margin: 0;
  font-size: clamp(3.4rem, 7.2vw, 7.8rem);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .84;
  text-transform: uppercase;
}

.jr-edit-demo__title span {
  color: var(--jr-edit-accent);
}

.jr-edit-demo__lead {
  max-width: 650px;
  margin: 42px 0 0;
  color: var(--jr-edit-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.6;
}

.jr-edit-demo__experience {
  position: relative;
  min-height: 520vh;
  background: #dedbd3;
  border-top: 1px solid rgba(16, 16, 16, .2);
  border-bottom: 1px solid rgba(16, 16, 16, .2);
}

.jr-edit-demo__sticky {
  position: sticky;
  top: 0;
  display: flex;
  min-height: 100vh;
  align-items: center;
  padding-block: clamp(28px, 5vh, 60px);
  overflow: hidden;
}

.jr-edit-demo__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(38px, 6vw, 90px);
  align-items: center;
}

.jr-edit-demo__document {
  position: relative;
  width: 100%;
  max-width: 830px;
  min-height: min(720px, calc(100vh - 80px));
  padding: clamp(42px, 5.5vw, 78px);
  color: #161616;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 16, 16, .14);
}

.jr-edit-demo__document::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(16, 16, 16, .08);
  pointer-events: none;
}

.jr-edit-demo__document-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 62px);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(16, 16, 16, .18);
  font-family: "Manrope", Arial, sans-serif;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.jr-edit-demo__manuscript {
  font-family: "Times New Roman", Times, serif;
  font-size: 12pt;
  line-height: 2;
}

.jr-edit-demo__manuscript p {
  margin: 0;
}

.jr-edit-demo__manuscript p + p {
  margin-top: 12pt;
}

.jr-edit-mark {
  position: relative;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.jr-edit-mark--strength,
.jr-edit-mark--keep {
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--jr-edit-accent) 34%, transparent) 0 26%,
    transparent 26%
  );
}

.jr-edit-mark--question,
.jr-edit-mark--clarity,
.jr-edit-mark--consider {
  border-bottom: 2px dotted var(--jr-edit-accent);
}

.jr-edit-mark--replace .jr-edit-mark__original {
  text-decoration: line-through;
  text-decoration-color: var(--jr-edit-accent);
  text-decoration-thickness: 2px;
}

.jr-edit-suggestion {
  display: block;
  margin: 8px 0 4px;
  padding: 8px 10px;
  border-left: 3px solid var(--jr-edit-accent);
  color: #3f4939;
  background: color-mix(in srgb, var(--jr-edit-accent) 10%, white);
  font-family: "Manrope", Arial, sans-serif;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1.45;
}

.jr-edit-tag {
  display: inline-flex;
  margin-left: 7px;
  padding: 3px 6px;
  color: var(--jr-edit-white);
  background: var(--jr-edit-accent);
  font-family: "Manrope", Arial, sans-serif;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-2px);
}

.jr-edit-demo__commentary {
  position: relative;
  min-height: 500px;
}

.jr-edit-demo__progress {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(16, 16, 16, .28);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.jr-edit-demo__progress-label,
.jr-edit-demo__progress-count {
  display: inline-block;
}

.jr-edit-demo__progress-count {
  float: right;
}

.jr-edit-demo__progress-track {
  display: block;
  height: 3px;
  margin-top: 18px;
  background: rgba(16, 16, 16, .14);
  overflow: hidden;
}

.jr-edit-demo__progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--jr-edit-accent);
  transition: width .45s cubic-bezier(.2, .75, .2, 1);
}

.jr-edit-demo__notes {
  margin-top: 46px;
}

.jr-edit-note {
  margin-bottom: 18px;
  padding: 28px;
  color: var(--jr-edit-white);
  background: var(--jr-edit-ink);
  border-left: 5px solid var(--jr-edit-accent);
}

.jr-edit-note__type {
  margin: 0 0 20px;
  color: var(--jr-edit-accent);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.jr-edit-note__text {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.65;
}

.jr-edit-note__suggestion {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: #c5c3bd;
  font-size: .84rem;
  line-height: 1.65;
}

.jr-edit-note--principle {
  color: var(--jr-edit-ink);
  background: var(--jr-edit-accent);
  border-left-color: var(--jr-edit-ink);
}

.jr-edit-note--principle .jr-edit-note__type {
  color: var(--jr-edit-ink);
}

.jr-edit-demo__transcript {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Animation is applied only after JavaScript confirms enhancement. */
.jr-edit-demo--enhanced .jr-edit-mark {
  background-size: 0 100%;
  background-repeat: no-repeat;
  border-bottom-color: transparent;
  transition:
    background-size .65s cubic-bezier(.2, .75, .2, 1),
    border-color .45s ease;
}

.jr-edit-demo--enhanced .jr-edit-mark.is-revealed {
  background-size: 100% 100%;
  border-bottom-color: var(--jr-edit-accent);
}

.jr-edit-demo--enhanced .jr-edit-mark--replace .jr-edit-mark__original {
  text-decoration-color: transparent;
  transition: text-decoration-color .45s ease;
}

.jr-edit-demo--enhanced .jr-edit-mark--replace.is-revealed .jr-edit-mark__original {
  text-decoration-color: var(--jr-edit-accent);
}

.jr-edit-demo--enhanced .jr-edit-suggestion {
  max-height: 0;
  margin-block: 0;
  padding-block: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition:
    max-height .55s ease,
    margin .55s ease,
    padding .55s ease,
    opacity .4s ease,
    transform .55s ease;
}

.jr-edit-demo--enhanced .jr-edit-mark.is-revealed .jr-edit-suggestion {
  max-height: 100px;
  margin: 8px 0 4px;
  padding: 8px 10px;
  opacity: 1;
  transform: translateY(0);
}

.jr-edit-demo--enhanced .jr-edit-tag {
  opacity: 0;
  transform: translate(-4px, -2px);
  transition: opacity .35s ease, transform .35s ease;
}

.jr-edit-demo--enhanced .jr-edit-mark.is-revealed .jr-edit-tag {
  opacity: 1;
  transform: translate(0, -2px);
}

.jr-edit-demo--enhanced .jr-edit-demo__notes {
  position: relative;
  min-height: 350px;
}

.jr-edit-demo--enhanced .jr-edit-note {
  position: absolute;
  inset: 0 0 auto;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .75, .2, 1);
}

.jr-edit-demo--enhanced .jr-edit-note.is-current {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  .jr-edit-demo__stage {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
    gap: 34px;
  }

  .jr-edit-demo__document {
    padding: 42px;
  }

}

@media (max-width: 900px) {
  .jr-edit-demo__experience {
    min-height: auto;
    padding-block: 60px;
  }

  .jr-edit-demo__sticky {
    position: relative;
    min-height: auto;
    padding: 0;
    overflow: visible;
  }

  .jr-edit-demo__stage {
    grid-template-columns: 1fr;
  }

  .jr-edit-demo__document {
    max-width: none;
    min-height: auto;
  }

  .jr-edit-demo__commentary {
    min-height: auto;
  }

  .jr-edit-demo__progress {
    display: none;
  }

  .jr-edit-demo--enhanced .jr-edit-mark {
    background-size: 100% 100%;
    border-bottom-color: var(--jr-edit-accent);
  }

  .jr-edit-demo--enhanced .jr-edit-mark--replace .jr-edit-mark__original {
    text-decoration-color: var(--jr-edit-accent);
  }

  .jr-edit-demo--enhanced .jr-edit-suggestion {
    max-height: 100px;
    margin: 8px 0 4px;
    padding: 8px 10px;
    opacity: 1;
    transform: none;
  }

  .jr-edit-demo--enhanced .jr-edit-tag {
    opacity: 1;
    transform: translateY(-2px);
  }

  .jr-edit-demo--enhanced .jr-edit-demo__notes {
    min-height: auto;
  }

  .jr-edit-demo--enhanced .jr-edit-note {
    position: relative;
    inset: auto;
    margin-bottom: 14px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

@media (max-width: 620px) {
  .jr-edit-demo__intro {
    padding-block: 78px 64px;
  }

  .jr-edit-demo__title {
    font-size: clamp(3.1rem, 16vw, 5rem);
  }

  .jr-edit-demo__experience {
    padding-block: 20px 48px;
  }

  .jr-edit-demo__document {
    padding: 42px 25px;
  }

  .jr-edit-demo__document::before {
    inset: 8px;
  }

  .jr-edit-demo__document-meta {
    display: grid;
    gap: 6px;
  }

  .jr-edit-demo__manuscript {
    font-size: 10.5pt;
    line-height: 1.8;
  }

  .jr-edit-note {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jr-edit-demo--enhanced .jr-edit-mark,
  .jr-edit-demo--enhanced .jr-edit-mark__original,
  .jr-edit-demo--enhanced .jr-edit-suggestion,
  .jr-edit-demo--enhanced .jr-edit-tag,
  .jr-edit-demo--enhanced .jr-edit-note,
  .jr-edit-demo__progress-track > span {
    transition: none;
  }
}
.jr-site,
.jr-full-width-page {
    overflow-x: clip;
    overflow-y: visible;
}

.jr-edit-demo__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
}

/* ==============================================================
   J. ROBERTSSON — COMPOSITE EDITORIAL CASE STUDIES
   Paste at the end of the active theme's style.css.
   ============================================================== */

.jr-cases,
.jr-cases * {
  box-sizing: border-box;
}

.jr-cases {
  padding: clamp(90px, 11vw, 170px) 0;
  color: var(--white, #fffdf7);
  background: var(--ink, #101010);
}

.jr-cases__header {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: end;
}

.jr-cases__kicker {
  grid-column: 1 / -1;
  margin: 0 0 -8px;
  color: var(--accent, #66745b);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.jr-cases__title {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3.4rem, 7.2vw, 7.8rem);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .84;
  text-transform: uppercase;
}

.jr-cases__title span {
  color: var(--accent, #66745b);
}

.jr-cases__introduction {
  max-width: 500px;
  padding-bottom: 7px;
}

.jr-cases__lead {
  margin: 0;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  line-height: 1.55;
}

.jr-cases__disclaimer {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: #aaa79f;
  font-size: .78rem;
  line-height: 1.65;
}

.jr-cases__list {
  margin-top: clamp(76px, 10vw, 140px);
  border-top: 1px solid rgba(255, 255, 255, .24);
}

.jr-case {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(250px, .72fr) minmax(420px, 1.28fr);
  gap: clamp(28px, 4vw, 70px);
  padding: clamp(48px, 6vw, 84px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .24);
}

.jr-case__index {
  color: var(--accent, #66745b);
  font-size: clamp(3.8rem, 6vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .75;
}

.jr-case__type,
.jr-case__label {
  margin: 0;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.jr-case__type {
  color: var(--accent, #66745b);
}

.jr-case__title {
  margin: 20px 0 0;
  font-size: clamp(1.9rem, 3vw, 3.35rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .98;
  text-transform: uppercase;
}

.jr-case__summary {
  margin: 25px 0 0;
  color: #c4c1b9;
  font-size: .95rem;
  line-height: 1.7;
}

.jr-case__analysis {
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.jr-case__movement {
  display: grid;
  grid-template-columns: minmax(135px, .38fr) minmax(0, 1fr);
  gap: clamp(25px, 4vw, 54px);
  padding: 25px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.jr-case__movement:last-child {
  border-bottom: 0;
}

.jr-case__label {
  color: #aaa79f;
}

.jr-case__movement--result .jr-case__label {
  color: var(--accent, #66745b);
}

.jr-case__movement p:last-child {
  max-width: 620px;
  margin: 0;
  font-size: .96rem;
  line-height: 1.72;
}

.jr-case__tags {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -12px 0 0;
  padding: 0;
  list-style: none;
}

.jr-case__tags li {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #c4c1b9;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.jr-cases__guide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, .45fr) minmax(300px, 1fr) auto;
  gap: clamp(30px, 5vw, 76px);
  align-items: end;
  margin-top: clamp(76px, 10vw, 140px);
  padding: clamp(38px, 5vw, 70px);
  color: var(--ink, #101010);
  background: var(--accent, #66745b);
  overflow: hidden;
}

.jr-cases__guide::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -155px;
  width: 360px;
  aspect-ratio: 1;
  border: 58px solid rgba(255, 253, 247, .11);
  border-radius: 50%;
  pointer-events: none;
}

.jr-cases__guide-number {
  position: relative;
  z-index: 1;
  color: rgba(16, 16, 16, .68);
  font-size: clamp(3.5rem, 6vw, 6.8rem);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .8;
}

.jr-cases__guide-copy {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.jr-cases__guide-kicker {
  margin: 0 0 18px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.jr-cases__guide h3 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .96;
  text-transform: uppercase;
}

.jr-cases__guide-copy > p:last-child {
  max-width: 590px;
  margin: 26px 0 0;
  line-height: 1.65;
}

.jr-cases__download {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 20px;
  border: 1px solid var(--ink, #101010);
  color: var(--white, #fffdf7);
  background: var(--ink, #101010);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: transform .2s ease, color .2s ease, background .2s ease;
}

.jr-cases__download:hover {
  color: var(--ink, #101010);
  background: var(--white, #fffdf7);
  transform: translateY(-3px);
}

.jr-cases__download span {
  font-size: 1rem;
}

@media (max-width: 1050px) {
  .jr-case {
    grid-template-columns: 85px minmax(220px, .7fr) minmax(360px, 1.3fr);
    gap: 30px;
  }

  .jr-cases__guide {
    grid-template-columns: 120px 1fr;
  }

  .jr-cases__download {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 820px) {
  .jr-cases__header,
  .jr-case {
    grid-template-columns: 1fr;
  }

  .jr-cases__kicker {
    grid-column: auto;
  }

  .jr-cases__introduction {
    margin-top: 10px;
  }

  .jr-case__index {
    margin-bottom: 6px;
  }

  .jr-case__tags {
    grid-column: auto;
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  .jr-cases {
    padding: 78px 0;
  }

  .jr-cases__title {
    font-size: clamp(3rem, 15vw, 5.2rem);
  }

  .jr-case__movement {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .jr-cases__guide {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }

  .jr-cases__download {
    grid-column: auto;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jr-cases__download {
    transition: none;
  }
}
/* ==============================================================
   J. ROBERTSSON — WORK PAGE / PUBLISHED FICTION
   Add this to the end of the active theme's style.css.
   ============================================================== */

.jr-publication,
.jr-publication * {
  box-sizing: border-box;
}

.jr-publication {
  overflow: hidden;
  padding: clamp(90px, 11vw, 170px) 0;
  color: var(--ink, #101010);
  background: var(--paper, #f5f1e8);
}

.jr-publication__header {
  display: grid;
  gap: 28px;
}

.jr-publication__kicker,
.jr-publication__label,
.jr-publication__small-heading {
  margin: 0;
  color: var(--accent, #66745b);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .15em;
  line-height: 1.4;
  text-transform: uppercase;
}

.jr-publication__title {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(3.8rem, 8.3vw, 9rem);
  font-weight: 800;
  letter-spacing: -.078em;
  line-height: .83;
  text-transform: uppercase;
}

.jr-publication__title span {
  color: var(--accent, #66745b);
}

.jr-publication__feature {
  display: grid;
  grid-template-columns: minmax(280px, .76fr) minmax(430px, 1.24fr);
  gap: clamp(55px, 9vw, 135px);
  align-items: center;
  margin-top: clamp(75px, 10vw, 140px);
}

.jr-publication__visual {
  position: relative;
  width: min(100%, 470px);
  margin-inline: auto;
  padding: clamp(22px, 3vw, 42px);
  isolation: isolate;
}

.jr-publication__ring {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 2px solid var(--accent, #66745b);
  border-radius: 50%;
  transform: rotate(-8deg) scale(.96, 1.04);
  opacity: .92;
}

.jr-publication__ring::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 19%;
  width: 23%;
  height: 17%;
  background: var(--paper, #f5f1e8);
  transform: rotate(-13deg);
}

.jr-publication__cover {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 26px 65px rgba(16, 16, 16, .24);
  transform: rotate(-2deg);
  transition: transform .35s ease, box-shadow .35s ease;
}

.jr-publication__visual:hover .jr-publication__cover {
  box-shadow: 0 34px 78px rgba(16, 16, 16, .3);
  transform: rotate(0deg) translateY(-5px);
}

.jr-publication__dot {
  position: absolute;
  z-index: 2;
  right: -1%;
  bottom: 12%;
  width: clamp(58px, 7vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent, #66745b);
}

.jr-publication__copy h3 {
  margin: 18px 0 0;
  font-size: clamp(3.5rem, 7vw, 7.7rem);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .82;
  text-transform: uppercase;
}

.jr-publication__credit {
  max-width: 700px;
  margin: 28px 0 0;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.4;
}

.jr-publication__credit cite,
.jr-publication__context cite {
  font-style: italic;
}

.jr-publication__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.jr-publication__meta li {
  padding: 8px 11px;
  border: 1px solid rgba(16, 16, 16, .35);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.jr-publication__context,
.jr-publication__synopsis {
  max-width: 720px;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid rgba(16, 16, 16, .25);
}

.jr-publication__context p,
.jr-publication__synopsis > p:last-child {
  margin: 0;
  font-size: clamp(1rem, 1.32vw, 1.18rem);
  line-height: 1.68;
}

.jr-publication__synopsis {
  margin-top: 28px;
}

.jr-publication__synopsis > p:last-child {
  margin-top: 13px;
}

.jr-publication__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 42px;
}

.jr-publication__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 58px;
  padding: 16px 20px;
  border: 1px solid var(--ink, #101010);
  color: var(--ink, #101010);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.jr-publication__button--primary,
.jr-publication__button:hover {
  color: var(--paper, #f5f1e8);
  background: var(--ink, #101010);
}

.jr-publication__button:hover {
  transform: translateY(-3px);
}

.jr-publication__button--primary:hover {
  color: var(--ink, #101010);
  background: var(--accent, #66745b);
}

.jr-publication__review {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(430px, 1.15fr);
  gap: clamp(45px, 8vw, 120px);
  align-items: center;
  margin: clamp(90px, 12vw, 170px) 0 0;
  padding: clamp(50px, 7vw, 92px);
  color: var(--paper, #f5f1e8);
  background: var(--ink, #101010);
}

.jr-publication__review-highlight {
  color: var(--paper, #f5f1e8);
  font-size: clamp(2.7rem, 5vw, 5.8rem);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: .88;
  text-transform: uppercase;
}

.jr-publication__review-highlight span {
  color: var(--accent, #66745b);
}

.jr-publication__review blockquote {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.5;
}

.jr-publication__review figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  align-items: baseline;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .24);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.jr-publication__review figcaption span {
  color: #aaa79f;
}

.jr-publication__connection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  margin-top: clamp(55px, 7vw, 95px);
}

.jr-publication__connection p {
  grid-column: 2;
  margin: 0;
  padding-left: clamp(24px, 4vw, 58px);
  border-left: 4px solid var(--accent, #66745b);
  font-size: clamp(1.15rem, 1.85vw, 1.55rem);
  font-weight: 650;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .jr-publication__feature,
  .jr-publication__review {
    grid-template-columns: 1fr;
  }

  .jr-publication__visual {
    width: min(82vw, 470px);
  }

  .jr-publication__review {
    padding: clamp(36px, 7vw, 62px);
  }

  .jr-publication__connection {
    grid-template-columns: 1fr;
  }

  .jr-publication__connection p {
    grid-column: 1;
    max-width: 720px;
  }
}

@media (max-width: 600px) {
  .jr-publication {
    padding: 78px 0;
  }

  .jr-publication__title {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .jr-publication__feature {
    margin-top: 65px;
  }

  .jr-publication__copy h3 {
    font-size: clamp(3.3rem, 17vw, 5.5rem);
  }

  .jr-publication__actions,
  .jr-publication__button {
    width: 100%;
  }

  .jr-publication__review {
    margin-inline: calc(50% - 50vw);
  }

  .jr-publication__review-highlight {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jr-publication__cover,
  .jr-publication__button {
    transition: none;
  }
}
/* ==============================================================
   J. ROBERTSSON — WORK PAGE / 51 STORIES + FICTION PORTFOLIO
   Add this to the end of the active theme's style.css.
   ============================================================== */

.jr-fiction,
.jr-fiction * {
  box-sizing: border-box;
}

.jr-fiction {
  overflow: hidden;
  padding: clamp(90px, 11vw, 170px) 0;
  color: var(--paper, #f5f1e8);
  background: var(--ink, #101010);
}

.jr-fiction__header {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: clamp(55px, 9vw, 135px);
  align-items: end;
}

.jr-fiction__kicker,
.jr-fiction__availability-label {
  margin: 0 0 26px;
  color: var(--accent, #66745b);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .15em;
  line-height: 1.4;
  text-transform: uppercase;
}

.jr-fiction__title {
  margin: 0;
  font-size: clamp(4rem, 8.5vw, 9rem);
  font-weight: 800;
  letter-spacing: -.078em;
  line-height: .82;
  text-transform: uppercase;
}

.jr-fiction__title span,
.jr-fiction__availability h3 span {
  color: var(--accent, #66745b);
}

.jr-fiction__introduction {
  max-width: 570px;
  padding-bottom: 8px;
}

.jr-fiction__introduction p {
  margin: 0;
  color: #aaa79f;
  font-size: 1rem;
  line-height: 1.72;
}

.jr-fiction__introduction .jr-fiction__lead {
  margin-bottom: 25px;
  color: var(--paper, #f5f1e8);
  font-size: clamp(1.12rem, 1.7vw, 1.45rem);
  line-height: 1.5;
}

.jr-fiction__principle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(70px, 9vw, 125px);
  border-top: 1px solid rgba(255, 255, 255, .24);
  border-bottom: 1px solid rgba(255, 255, 255, .24);
}

.jr-fiction__principle div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 25px clamp(18px, 3vw, 38px);
  border-right: 1px solid rgba(255, 255, 255, .24);
}

.jr-fiction__principle div:first-child {
  padding-left: 0;
}

.jr-fiction__principle div:last-child {
  border-right: 0;
}

.jr-fiction__principle strong {
  color: var(--accent, #66745b);
  font-size: 1.5rem;
  letter-spacing: -.04em;
}

.jr-fiction__principle span {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.jr-fiction__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: clamp(70px, 9vw, 125px);
}

.jr-story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  min-height: 480px;
  padding: clamp(25px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .24);
  background: #151515;
  transition: transform .25s ease, border-color .25s ease;
}

.jr-story-card::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -150px;
  width: 300px;
  aspect-ratio: 1;
  border: 1px solid var(--accent, #66745b);
  border-radius: 50%;
  opacity: .48;
  pointer-events: none;
}

.jr-story-card:hover {
  z-index: 2;
  border-color: var(--accent, #66745b);
  transform: translateY(-6px);
}

.jr-story-card--featured {
  grid-column: span 8;
  min-height: 590px;
  color: var(--ink, #101010);
  background: var(--paper, #f5f1e8);
}

.jr-story-card--featured::after {
  right: -110px;
  bottom: -230px;
  width: 540px;
  border-width: 72px;
  opacity: .9;
}

.jr-story-card--accent {
  color: var(--ink, #101010);
  background: var(--accent, #66745b);
}

.jr-story-card--accent::after {
  border-color: var(--ink, #101010);
}

.jr-story-card--published {
  grid-column: span 5;
}

.jr-story-card--collection {
  grid-column: span 7;
  color: var(--ink, #101010);
  background: var(--paper, #f5f1e8);
}

.jr-story-card__topline {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}

.jr-story-card__status,
.jr-story-card__genre,
.jr-story-card__note {
  margin: 0;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.45;
  text-transform: uppercase;
}

.jr-story-card__status {
  display: inline-block;
  padding: 7px 9px;
  border: 1px solid currentColor;
}

.jr-story-card__status--available,
.jr-story-card__status--published {
  color: var(--accent, #66745b);
}

.jr-story-card__number {
  color: var(--accent, #66745b);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .72;
}

.jr-story-card--accent .jr-story-card__number {
  color: var(--ink, #101010);
}

.jr-story-card__genre {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 70px;
  color: var(--accent, #66745b);
}

.jr-story-card--accent .jr-story-card__genre {
  color: var(--ink, #101010);
}

.jr-story-card h3 {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 16px 0 0;
  font-size: clamp(2.3rem, 4.4vw, 5rem);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: .88;
  text-transform: uppercase;
}

.jr-story-card__premise {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 25px 0 0;
  font-size: 1rem;
  line-height: 1.62;
}

.jr-story-card__note {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 32px 0 0;
  padding-top: 18px;
  border-top: 1px solid currentColor;
  opacity: .68;
}

.jr-story-card__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 34px;
}

.jr-story-card__actions a,
.jr-fiction__footer-links a {
  color: inherit;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.jr-story-card__actions a {
  padding-bottom: 5px;
  border-bottom: 2px solid var(--accent, #66745b);
}

.jr-fiction__availability {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr);
  gap: clamp(50px, 9vw, 130px);
  align-items: end;
  margin-top: clamp(90px, 12vw, 170px);
  padding-top: clamp(55px, 7vw, 90px);
  border-top: 1px solid rgba(255, 255, 255, .24);
}

.jr-fiction__availability h3 {
  margin: 0;
  font-size: clamp(2.9rem, 6vw, 6.7rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .86;
  text-transform: uppercase;
}

.jr-fiction__availability > p {
  max-width: 550px;
  margin: 0 0 7px;
  color: #aaa79f;
  font-size: 1rem;
  line-height: 1.72;
}

.jr-fiction__footer {
  display: flex;
  justify-content: space-between;
  gap: 35px;
  align-items: center;
  margin-top: clamp(75px, 10vw, 130px);
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .24);
  border-bottom: 1px solid rgba(255, 255, 255, .24);
}

.jr-fiction__footer p {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
}

.jr-fiction__footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 20px 30px;
}

.jr-fiction__footer-links a:hover,
.jr-story-card__actions a:hover {
  color: var(--accent, #66745b);
}

@media (max-width: 980px) {
  .jr-fiction__header,
  .jr-fiction__availability {
    grid-template-columns: 1fr;
  }

  .jr-fiction__introduction {
    max-width: 720px;
  }

  .jr-story-card,
  .jr-story-card--featured,
  .jr-story-card--published,
  .jr-story-card--collection {
    grid-column: span 6;
  }

  .jr-story-card--featured,
  .jr-story-card--collection {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .jr-fiction {
    padding: 78px 0;
  }

  .jr-fiction__title {
    font-size: clamp(3.4rem, 18vw, 5.7rem);
  }

  .jr-fiction__principle {
    grid-template-columns: 1fr;
  }

  .jr-fiction__principle div,
  .jr-fiction__principle div:first-child {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .24);
  }

  .jr-fiction__principle div:last-child {
    border-bottom: 0;
  }

  .jr-story-card,
  .jr-story-card--featured,
  .jr-story-card--published,
  .jr-story-card--collection {
    grid-column: 1 / -1;
    min-height: 440px;
  }

  .jr-story-card--featured {
    min-height: 520px;
  }

  .jr-fiction__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .jr-fiction__footer-links {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jr-story-card {
    transition: none;
  }
}
/* =========================================================
   J. ROBERTSSON — CONTACT PAGE
   ========================================================= */


/* ---------------------------------------------------------
   SHARED VARIABLES
   --------------------------------------------------------- */

.jr-contact-hero,
.jr-contact-layout {
  --jr-ink: #111111;
  --jr-paper: #f5f1e8;
  --jr-green: #66745b;
  --jr-sage: #aeb7a4;
  --jr-grey: #6f706c;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   SHARED WIDTH CONTAINER
   --------------------------------------------------------- */

.jr-contact-container {
  box-sizing: border-box;
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
  margin-inline: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.jr-contact-hero {
  width: 100%;
  max-width: none;
  overflow: hidden;
  padding:
    clamp(80px, 10vw, 150px)
    0
    clamp(35px, 4vw, 60px);
  background: var(--jr-paper);
}
.jr-contact-eyebrow {
  margin: 0 0 24px;
  color: var(--jr-green);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jr-contact-title {
  max-width: 1100px;
  margin: 0;
  color: var(--jr-ink);
  font-size: clamp(58px, 8.4vw, 132px);
  font-weight: 800;
  line-height: 0.83;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.jr-contact-title span {
  color: var(--jr-green);
}

.jr-contact-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 380px));
  gap: 30px;
  max-width: 850px;
  margin-top: clamp(45px, 6vw, 85px);
}

.jr-contact-intro p {
  margin: 0;
  color: var(--jr-ink);
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.45;
}


/* =========================================================
   MAIN CONTACT SECTION
   ========================================================= */

/*
 * jr-contact-layout belongs on the outer WordPress Group.
 * This Group controls the overall 1320px width.
 */

.jr-contact-layout {
  position: relative;
  left: 50%;
  display: block !important;
  box-sizing: border-box;

  width: min(1320px, calc(100vw - 48px)) !important;
  max-width: 1320px !important;

  margin: 0 !important;
  padding:
    clamp(16px, 2vw, 30px)
    0
    clamp(80px, 10vw, 150px);

  transform: translateX(-50%);
}

/*
 * The native WordPress Columns block creates the actual
 * two-column layout.
 */

.jr-contact-layout > .wp-block-columns {
  display: grid !important;
  grid-template-columns:
    minmax(280px, 0.85fr)
    minmax(0, 1.35fr);
  gap: clamp(40px, 6vw, 90px);

  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  align-items: stretch !important;
}

/*
 * Neutralise WordPress flex widths and inline column sizing.
 */

.jr-contact-layout
  > .wp-block-columns
  > .wp-block-column {
  box-sizing: border-box;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  flex-basis: auto !important;
}

/*
 * Prevent HTML blocks and nested Groups from inheriting
 * the theme's normal content-column restriction.
 */

.jr-contact-layout .wp-block-html,
.jr-contact-layout .wp-block-group,
.jr-contact-layout .wp-block-group__inner-container {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}


/* =========================================================
   INFORMATION COLUMN
   ========================================================= */

.jr-contact-info {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: clamp(35px, 4vw, 55px) 0;
}

.jr-contact-info > * {
  position: relative;
  z-index: 1;
}

.jr-contact-enso {
  position: absolute;
  top: 15px;
  right: 0;
  width: min(310px, 70%);
  aspect-ratio: 1;
  border: 2px solid rgba(102, 116, 91, 0.17);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-20deg);
  pointer-events: none;
}

.jr-contact-route {
  position: relative;
}

.jr-contact-route::before {
  content: "";
  position: absolute;
  top: 27px;
  bottom: 27px;
  left: 25px;
  width: 1px;
  background: var(--jr-sage);
}

.jr-contact-route-item {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 46px;
}

.jr-contact-number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: var(--jr-green);
  color: var(--jr-paper);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.jr-contact-route-item h2 {
  margin: 2px 0 10px;
  color: var(--jr-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.jr-contact-route-item p {
  max-width: 390px;
  margin: 0 0 14px;
  color: var(--jr-grey);
  font-size: 16px;
  line-height: 1.55;
}

.jr-contact-route-item a,
.jr-contact-alternatives a {
  color: var(--jr-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.jr-contact-route-item a:hover,
.jr-contact-alternatives a:hover {
  color: var(--jr-green);
}

.jr-contact-alternatives {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid var(--jr-sage);
}

.jr-contact-alternatives p {
  margin: 0 0 25px;
}

.jr-contact-alternatives span {
  display: block;
  margin-bottom: 8px;
  color: var(--jr-grey);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}


/* =========================================================
   FORM PANEL
   ========================================================= */

.jr-contact-form-panel {
  align-self: stretch;
  box-sizing: border-box;

  width: 100% !important;
  max-width: none !important;
  min-width: 0;

  margin: 0 !important;
  padding: clamp(38px, 5vw, 75px) !important;

  background: var(--jr-ink);
  color: var(--jr-paper);
}

.jr-contact-form-heading {
  width: 100%;
  max-width: none;
  margin-bottom: 45px;
}

.jr-contact-form-heading h2 {
  margin: 0 0 22px;
  color: var(--jr-paper);
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.045em;
}

.jr-contact-form-heading > p:last-child {
  max-width: 520px;
  margin: 0;
  color: rgba(245, 241, 232, 0.72);
  font-size: 17px;
  line-height: 1.55;
}


/* =========================================================
   WORDPRESS / JETPACK FORM OVERRIDES
   ========================================================= */

.jr-contact-form-panel form,
.jr-contact-form-panel .wp-block-jetpack-contact-form,
.jr-contact-form-panel .contact-form {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.jr-contact-form-panel label,
.jr-contact-form-panel .grunion-field-label,
.jr-contact-form-panel .contact-form label {
  display: block;
  margin: 0 0 10px;
  color: var(--jr-paper) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.jr-contact-form-panel .grunion-field-wrap,
.jr-contact-form-panel .contact-form > div,
.jr-contact-form-panel
  .wp-block-jetpack-contact-form
  > div {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-bottom: 25px;
}

.jr-contact-form-panel
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.jr-contact-form-panel select,
.jr-contact-form-panel textarea {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  border: 1px solid rgba(174, 183, 164, 0.65) !important;
  border-radius: 0 !important;
  background: var(--jr-paper) !important;
  color: var(--jr-ink) !important;
  box-shadow: none !important;

  font-family: inherit !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
}

.jr-contact-form-panel
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.jr-contact-form-panel select {
  min-height: 60px;
  padding: 14px 18px !important;
}

.jr-contact-form-panel textarea {
  min-height: 205px;
  padding: 18px !important;
  resize: vertical;
}

.jr-contact-form-panel input:focus,
.jr-contact-form-panel select:focus,
.jr-contact-form-panel textarea:focus {
  border-color: var(--jr-green) !important;
  outline: 3px solid rgba(174, 183, 164, 0.28) !important;
  outline-offset: 2px;
}

.jr-contact-form-panel button,
.jr-contact-form-panel input[type="submit"],
.jr-contact-form-panel .wp-block-button__link {
  min-height: 62px;
  padding: 17px 26px !important;

  border: 1px solid var(--jr-green) !important;
  border-radius: 0 !important;
  background: var(--jr-green) !important;
  color: var(--jr-paper) !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.jr-contact-form-panel button:hover,
.jr-contact-form-panel input[type="submit"]:hover,
.jr-contact-form-panel .wp-block-button__link:hover {
  background: var(--jr-paper) !important;
  color: var(--jr-ink) !important;
  transform: translateY(-2px);
}


/* =========================================================
   TABLET AND MOBILE
   ========================================================= */

@media (max-width: 820px) {
  .jr-contact-container {
    width: min(100% - 32px, 1320px);
  }

  .jr-contact-hero {
    padding-top: 72px;
    padding-bottom: 36px;
  }

  .jr-contact-layout {
    width: calc(100vw - 32px) !important;
    padding-top: 20px;
    padding-bottom: 80px;
  }

  .jr-contact-layout {
    width: calc(100vw - 32px) !important;
    padding-top: 40px;
    padding-bottom: 80px;
  }

  .jr-contact-layout > .wp-block-columns {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 25px;
  }

  /*
   * On mobile, show the form first and the service
   * information underneath it.
   */

  .jr-contact-layout
    > .wp-block-columns
    > .wp-block-column:nth-child(2) {
    grid-row: 1;
  }

  .jr-contact-layout
    > .wp-block-columns
    > .wp-block-column:nth-child(1) {
    grid-row: 2;
  }

  .jr-contact-form-panel {
    padding: 36px 24px !important;
  }

  .jr-contact-info {
    padding-top: 45px;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .jr-contact-title {
    font-size: clamp(48px, 15vw, 68px);
  }

  .jr-contact-route-item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
  }

  .jr-contact-number {
    width: 44px;
    height: 44px;
  }

  .jr-contact-route::before {
    left: 21px;
  }

  .jr-contact-form-heading h2 {
    font-size: 42px;
  }
}
/* =========================================================
   J. ROBERTSSON — COACHING PAGE HERO
   ========================================================= */

.jr-coaching-hero {
  --jr-ink: #111111;
  --jr-paper: #f5f1e8;
  --jr-green: #66745b;
  --jr-sage: #aeb7a4;
  --jr-grey: #6f706c;

  position: relative;
  left: 50%;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background: var(--jr-paper);
  transform: translateX(-50%);
}

.jr-coaching-hero *,
.jr-coaching-hero *::before,
.jr-coaching-hero *::after {
  box-sizing: border-box;
}

.jr-coaching-container {
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
  margin-inline: auto;
  padding:
    clamp(85px, 10vw, 155px)
    0
    clamp(70px, 8vw, 120px);
}


/* EYEBROW */

.jr-coaching-eyebrow {
  margin: 0 0 clamp(30px, 4vw, 55px);
  color: var(--jr-green);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* HEADLINE */

.jr-coaching-title {
  max-width: 1180px;
  margin: 0;
  color: var(--jr-ink);
  font-size: clamp(54px, 7.5vw, 118px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.jr-coaching-title span {
  display: block;
  color: var(--jr-green);
}


/* LOWER HERO AREA */

.jr-coaching-hero-bottom {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(330px, 0.75fr);
  gap: clamp(50px, 9vw, 145px);
  align-items: end;
  margin-top: clamp(65px, 9vw, 125px);
}


/* INTRODUCTION */

.jr-coaching-intro {
  max-width: 650px;
}

.jr-coaching-intro p {
	
  max-width: 590px;
  margin: 0;
  color: var(--jr-grey);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
}

.jr-coaching-intro p + p {
	margin-top: 20px;
}

.jr-coaching-intro .jr-coaching-lead {
	color: var(--jr-ink);
  font-size: clamp(23px, 2vw, 31px);
  font-weight: 700;
  line-height: 1.25;
}


/* COMING-SOON PANEL */

.jr-coaching-status {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: 295px;
  background: var(--jr-ink);
  color: var(--jr-paper);
}

.jr-coaching-status-mark {
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(245, 241, 232, 0.18);
}

.jr-coaching-status-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 145px;
  aspect-ratio: 1;
  border: 2px solid var(--jr-green);
  border-right-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
}

.jr-coaching-status-mark span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--jr-sage);
  transform: translate(-50%, -50%);
}

.jr-coaching-status-copy {
  padding: clamp(28px, 4vw, 48px);
}

.jr-coaching-status-label {
  display: block;
  margin-bottom: 13px;
  color: var(--jr-sage);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
}

.jr-coaching-status-copy strong {
  display: block;
  margin: 0 0 17px;
  color: var(--jr-paper);
  font-size: clamp(28px, 3vw, 43px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.jr-coaching-status-copy p {
  max-width: 410px;
  margin: 0 0 27px;
  color: rgba(245, 241, 232, 0.7);
  font-size: 15px;
  line-height: 1.55;
}


/* CTA */

.jr-coaching-contact-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding: 15px 19px;

  border: 1px solid var(--jr-paper);
  background: transparent;
  color: var(--jr-paper) !important;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.09em;
  text-decoration: none !important;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.jr-coaching-contact-button span {
  font-size: 18px;
  line-height: 1;
}

.jr-coaching-contact-button:hover {
  border-color: var(--jr-green);
  background: var(--jr-green);
  color: var(--jr-paper) !important;
  transform: translateY(-2px);
}

.jr-coaching-contact-button:focus-visible {
  outline: 3px solid var(--jr-sage);
  outline-offset: 4px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .jr-coaching-hero-bottom {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .jr-coaching-intro {
    max-width: 680px;
  }

  .jr-coaching-status {
    max-width: 680px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .jr-coaching-container {
    width: calc(100% - 32px);
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .jr-coaching-eyebrow {
    margin-bottom: 30px;
    font-size: 11px;
  }

  .jr-coaching-title {
    font-size: clamp(46px, 14.2vw, 68px);
    line-height: 0.87;
  }

  .jr-coaching-hero-bottom {
    gap: 38px;
    margin-top: 55px;
  }

  .jr-coaching-status {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 0;
  }

  .jr-coaching-status-mark::before {
    width: 95px;
  }

  .jr-coaching-status-copy {
    padding: 28px 22px;
  }

  .jr-coaching-contact-button {
    width: 100%;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .jr-coaching-contact-button {
    transition: none;
  }
}
/* =========================================================
   J. ROBERTSSON — COACHING DEFINITION
   ========================================================= */

.jr-coaching-definition {
  --jr-ink: #111111;
  --jr-paper: #f5f1e8;
  --jr-green: #66745b;
  --jr-sage: #aeb7a4;

  position: relative;
  left: 50%;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background: var(--jr-ink);
  color: var(--jr-paper);
  transform: translateX(-50%);
}

.jr-coaching-definition *,
.jr-coaching-definition *::before,
.jr-coaching-definition *::after {
  box-sizing: border-box;
}

.jr-coaching-definition-inner {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(330px, 0.9fr)
    minmax(0, 1.1fr);
  gap: clamp(60px, 9vw, 145px);

  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
  margin-inline: auto;
  padding:
    clamp(90px, 11vw, 165px)
    0;
}


/* HEADING */

.jr-coaching-section-number {
  margin: 0 0 35px;
  color: var(--jr-sage);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jr-coaching-definition-heading h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--jr-paper);
  font-size: clamp(54px, 6.4vw, 96px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.jr-coaching-definition-heading h2 span {
  color: var(--jr-green);
}


/* BODY */

.jr-coaching-definition-body {
  position: relative;
  z-index: 1;
  align-self: end;
}

.jr-coaching-definition-intro {
  max-width: 650px;
  margin-bottom: clamp(50px, 6vw, 80px);
}

.jr-coaching-definition-intro p {
  margin: 0;
  color: rgba(245, 241, 232, 0.72);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
}

.jr-coaching-definition-intro p:first-child {
  color: var(--jr-paper);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.3;
}

.jr-coaching-definition-intro p + p {
  margin-top: 22px;
}


/* THREE PRINCIPLES */

.jr-coaching-definition-points {
  border-top: 1px solid rgba(245, 241, 232, 0.22);
}

.jr-coaching-definition-point {
  display: grid;
  grid-template-columns: 88px minmax(130px, 0.42fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;

  padding: 26px 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.22);
}

.jr-coaching-definition-point > span {
  padding-top: 5px;
  color: var(--jr-sage);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.15em;
}

.jr-coaching-definition-point h3 {
  margin: 0;
  color: var(--jr-paper);
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 800;
  line-height: 1.1;
}

.jr-coaching-definition-point p {
  margin: 0;
  color: rgba(245, 241, 232, 0.66);
  font-size: 15px;
  line-height: 1.55;
}


/* OUTCOME BLOCK */

.jr-coaching-definition-note {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 28px;

  margin-top: 50px;
  padding: 26px;
  border-left: 4px solid var(--jr-green);
  background: rgba(245, 241, 232, 0.06);
}

.jr-coaching-definition-note span {
  padding-top: 4px;
  color: var(--jr-sage);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.15em;
}

.jr-coaching-definition-note p {
  margin: 0;
  color: var(--jr-paper);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.5;
}


/* SUBTLE STORYBOROS ELEMENT */

.jr-coaching-definition-enso {
  position: absolute;
  bottom: -190px;
  left: -220px;
  width: 560px;
  aspect-ratio: 1;
  border: 2px solid rgba(174, 183, 164, 0.12);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(28deg);
  pointer-events: none;
}

.jr-coaching-definition-enso span {
  position: absolute;
  right: 55px;
  bottom: 73px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(102, 116, 91, 0.5);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {
  .jr-coaching-definition-inner {
    grid-template-columns: 1fr;
    gap: 65px;
  }

  .jr-coaching-definition-heading h2 {
    max-width: 760px;
  }

  .jr-coaching-definition-body {
    max-width: 760px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .jr-coaching-definition-inner {
    width: calc(100% - 32px);
    gap: 48px;
    padding: 80px 0;
  }

  .jr-coaching-definition-heading h2 {
    font-size: clamp(46px, 14vw, 66px);
  }

  .jr-coaching-definition-intro {
    margin-bottom: 45px;
  }

  .jr-coaching-definition-point {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }

  .jr-coaching-definition-point > span {
    padding: 0;
  }

  .jr-coaching-definition-point h3 {
    font-size: 22px;
  }

  .jr-coaching-definition-note {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 40px;
    padding: 23px 20px;
  }

  .jr-coaching-definition-enso {
    bottom: -120px;
    left: -180px;
    width: 390px;
  }
}
/* =========================================================
   J. ROBERTSSON — COACHING PROBLEMS
   ========================================================= */

.jr-coaching-problems {
  --jr-ink: #111111;
  --jr-paper: #f5f1e8;
  --jr-green: #66745b;
  --jr-sage: #aeb7a4;
  --jr-grey: #6f706c;

  position: relative;
  left: 50%;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background: var(--jr-paper);
  color: var(--jr-ink);
  transform: translateX(-50%);
}

.jr-coaching-problems *,
.jr-coaching-problems *::before,
.jr-coaching-problems *::after {
  box-sizing: border-box;
}

.jr-coaching-problems-inner {
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
  margin-inline: auto;
  padding:
    clamp(90px, 11vw, 165px)
    0;
}


/* SECTION HEADING */

.jr-coaching-problems-heading {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, 0.65fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: end;
  margin-bottom: clamp(65px, 8vw, 110px);
}

.jr-coaching-problems-eyebrow {
  margin: 0 0 30px;
  color: var(--jr-green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jr-coaching-problems-heading h2 {
  margin: 0;
  color: var(--jr-ink);
  font-size: clamp(58px, 7.4vw, 112px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.jr-coaching-problems-heading h2 span {
  color: var(--jr-green);
}

.jr-coaching-problems-intro {
  max-width: 480px;
  margin: 0;
  padding-bottom: 5px;
  color: var(--jr-grey);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
}


/* CARD GRID */

.jr-coaching-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(17, 17, 17, 0.25);
  border-left: 1px solid rgba(17, 17, 17, 0.25);
}

.jr-coaching-problem-card {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px);
  min-height: 285px;
  padding: clamp(30px, 4vw, 55px);

  border-right: 1px solid rgba(17, 17, 17, 0.25);
  border-bottom: 1px solid rgba(17, 17, 17, 0.25);
  background: transparent;

  transition:
    background-color 220ms ease,
    color 220ms ease;
}

.jr-coaching-problem-number {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;

  border: 1px solid var(--jr-green);
  border-radius: 50%;
  color: var(--jr-green);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;

  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}

.jr-coaching-problem-card h3 {
  margin: 3px 0 18px;
  color: var(--jr-ink);
  font-size: clamp(23px, 2.2vw, 34px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
}

.jr-coaching-problem-card p {
  max-width: 440px;
  margin: 0;
  color: var(--jr-grey);
  font-size: 16px;
  line-height: 1.6;
}

.jr-coaching-problem-keyword {
  position: absolute;
  right: clamp(25px, 3vw, 42px);
  bottom: 25px;

  color: var(--jr-green);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.15em;
}


/* HOVER EFFECT */

@media (hover: hover) {
  .jr-coaching-problem-card:hover {
    background: var(--jr-ink);
  }

  .jr-coaching-problem-card:hover h3 {
    color: var(--jr-paper);
  }

  .jr-coaching-problem-card:hover p {
    color: rgba(245, 241, 232, 0.7);
  }

  .jr-coaching-problem-card:hover
    .jr-coaching-problem-number {
    border-color: var(--jr-green);
    background: var(--jr-green);
    color: var(--jr-paper);
  }

  .jr-coaching-problem-card:hover
    .jr-coaching-problem-keyword {
    color: var(--jr-sage);
  }
}


/* CLOSING NOTE */

.jr-coaching-problems-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 45px;
}

.jr-coaching-problems-footer p {
  max-width: 600px;
  margin: 0;
  padding-left: 25px;
  border-left: 3px solid var(--jr-green);
  color: var(--jr-ink);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 700;
  line-height: 1.45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .jr-coaching-problems-heading {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .jr-coaching-problems-intro {
    max-width: 650px;
  }

  .jr-coaching-problem-card {
    min-height: 320px;
    grid-template-columns: 52px minmax(0, 1fr);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .jr-coaching-problems-inner {
    width: calc(100% - 32px);
    padding: 80px 0;
  }

  .jr-coaching-problems-heading {
    margin-bottom: 55px;
  }

  .jr-coaching-problems-heading h2 {
    font-size: clamp(47px, 14vw, 68px);
  }

  .jr-coaching-problem-grid {
    grid-template-columns: 1fr;
  }

  .jr-coaching-problem-card {
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 17px;
    min-height: 260px;
    padding: 28px 22px 60px;
  }

  .jr-coaching-problem-number {
    width: 42px;
    height: 42px;
    font-size: 11px;
  }

  .jr-coaching-problem-card h3 {
    margin-top: 2px;
    font-size: 24px;
  }

  .jr-coaching-problem-keyword {
    right: 22px;
    bottom: 22px;
  }

  .jr-coaching-problems-footer {
    justify-content: flex-start;
    margin-top: 38px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .jr-coaching-problem-card,
  .jr-coaching-problem-number {
    transition: none;
  }
}
/* =========================================================
   J. ROBERTSSON — COACHING PROCESS
   ========================================================= */

.jr-coaching-process {
  --jr-ink: #111111;
  --jr-paper: #f5f1e8;
  --jr-green: #66745b;
  --jr-sage: #aeb7a4;

  position: relative;
  left: 50%;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background: var(--jr-green);
  color: var(--jr-paper);
  transform: translateX(-50%);
}

.jr-coaching-process *,
.jr-coaching-process *::before,
.jr-coaching-process *::after {
  box-sizing: border-box;
}

.jr-coaching-process-inner {
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
  margin-inline: auto;
  padding:
    clamp(90px, 11vw, 165px)
    0;
}


/* HEADING */

.jr-coaching-process-heading {
  margin-bottom: clamp(75px, 10vw, 140px);
}

.jr-coaching-process-eyebrow {
  margin: 0 0 35px;
  color: rgba(245, 241, 232, 0.72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jr-coaching-process-heading-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(300px, 0.65fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: end;
}

.jr-coaching-process-heading h2 {
  margin: 0;
  color: var(--jr-paper);
  font-size: clamp(58px, 7.4vw, 112px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.jr-coaching-process-heading h2 span {
  color: var(--jr-ink);
}

.jr-coaching-process-intro {
  max-width: 500px;
  padding-bottom: 6px;
}

.jr-coaching-process-intro p {
  margin: 0;
  color: rgba(245, 241, 232, 0.8);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
}

.jr-coaching-process-intro p:first-child {
  color: var(--jr-paper);
  font-weight: 600;
}

.jr-coaching-process-intro p + p {
  margin-top: 18px;
}


/* PROCESS ROUTE */

.jr-coaching-process-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 42px);
}

.jr-coaching-process-line {
  position: absolute;
  top: 38px;
  right: 12%;
  left: 12%;
  height: 1px;
  background: rgba(245, 241, 232, 0.42);
}

.jr-coaching-process-step {
  position: relative;
  z-index: 1;
}

.jr-coaching-process-marker {
  display: grid;
  width: 76px;
  height: 76px;
  margin: 0 auto 32px;
  place-items: center;

  border: 1px solid rgba(245, 241, 232, 0.7);
  border-radius: 50%;
  background: var(--jr-green);
  color: var(--jr-paper);
}

.jr-coaching-process-marker span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.jr-coaching-process-card {
  min-height: 440px;
  padding: clamp(28px, 3vw, 44px);
  background: var(--jr-ink);
  color: var(--jr-paper);
}

.jr-coaching-process-label {
  display: block;
  margin-bottom: 25px;
  color: var(--jr-sage);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
}

.jr-coaching-process-card h3 {
  margin: 0 0 23px;
  color: var(--jr-paper);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.025em;
}

.jr-coaching-process-card p {
  margin: 0 0 30px;
  color: rgba(245, 241, 232, 0.7);
  font-size: 16px;
  line-height: 1.6;
}

.jr-coaching-process-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jr-coaching-process-card li {
  position: relative;
  margin: 0;
  padding: 13px 0 13px 22px;

  border-top: 1px solid rgba(245, 241, 232, 0.16);
  color: rgba(245, 241, 232, 0.84);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.jr-coaching-process-card li::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jr-green);
}

.jr-coaching-process-card li:last-child {
  border-bottom: 1px solid rgba(245, 241, 232, 0.16);
}


/* REASSURANCE */

.jr-coaching-process-reassurance {
  display: grid;
  grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1fr);
  gap: clamp(25px, 5vw, 75px);
  max-width: 920px;

  margin: clamp(60px, 8vw, 105px) 0 0 auto;
  padding-top: 30px;
  border-top: 1px solid rgba(245, 241, 232, 0.45);
}

.jr-coaching-process-reassurance span {
  color: var(--jr-paper);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
}

.jr-coaching-process-reassurance p {
  margin: 0;
  color: rgba(245, 241, 232, 0.82);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 600;
  line-height: 1.5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {
  .jr-coaching-process-heading-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .jr-coaching-process-intro {
    max-width: 650px;
  }

  .jr-coaching-process-route {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 760px;
  }

  .jr-coaching-process-line {
    top: 38px;
    right: auto;
    bottom: 38px;
    left: 37px;
    width: 1px;
    height: auto;
  }

  .jr-coaching-process-step {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .jr-coaching-process-step + .jr-coaching-process-step {
    margin-top: 35px;
  }

  .jr-coaching-process-marker {
    margin: 0;
  }

  .jr-coaching-process-card {
    min-height: 0;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .jr-coaching-process-inner {
    width: calc(100% - 32px);
    padding: 80px 0;
  }

  .jr-coaching-process-heading {
    margin-bottom: 65px;
  }

  .jr-coaching-process-heading h2 {
    font-size: clamp(47px, 14vw, 68px);
  }

  .jr-coaching-process-line {
    top: 30px;
    bottom: 30px;
    left: 29px;
  }

  .jr-coaching-process-step {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 15px;
  }

  .jr-coaching-process-marker {
    width: 60px;
    height: 60px;
  }

  .jr-coaching-process-card {
    padding: 28px 22px;
  }

  .jr-coaching-process-card h3 {
    font-size: 24px;
  }

  .jr-coaching-process-reassurance {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 65px;
  }
}
/* =========================================================
   J. ROBERTSSON — COACHING OR EDITING?
   ========================================================= */

.jr-coaching-fit {
  --jr-ink: #111111;
  --jr-paper: #f5f1e8;
  --jr-green: #66745b;
  --jr-sage: #aeb7a4;
  --jr-grey: #6f706c;

  position: relative;
  left: 50%;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background: var(--jr-paper);
  color: var(--jr-ink);
  transform: translateX(-50%);
}

.jr-coaching-fit *,
.jr-coaching-fit *::before,
.jr-coaching-fit *::after {
  box-sizing: border-box;
}

.jr-coaching-fit-inner {
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
  margin-inline: auto;
  padding:
    clamp(90px, 11vw, 165px)
    0;
}


/* SECTION HEADING */

.jr-coaching-fit-heading {
  margin-bottom: clamp(65px, 8vw, 110px);
}

.jr-coaching-fit-eyebrow {
  margin: 0 0 30px;
  color: var(--jr-green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jr-coaching-fit-heading-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, 0.65fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: end;
}

.jr-coaching-fit-heading h2 {
  margin: 0;
  color: var(--jr-ink);
  font-size: clamp(55px, 7vw, 106px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.058em;
  text-transform: uppercase;
}

.jr-coaching-fit-heading h2 span {
  color: var(--jr-green);
}

.jr-coaching-fit-heading-grid > p {
  max-width: 500px;
  margin: 0 0 5px;
  color: var(--jr-grey);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
}


/* COMPARISON GRID */

.jr-coaching-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.jr-coaching-fit-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(34px, 5vw, 72px);
}

.jr-coaching-fit-panel--coaching {
  border: 1px solid rgba(17, 17, 17, 0.28);
  background: transparent;
  color: var(--jr-ink);
}

.jr-coaching-fit-panel--editing {
  background: var(--jr-ink);
  color: var(--jr-paper);
}


/* PANEL HEADER */

.jr-coaching-fit-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.jr-coaching-fit-number {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;

  border: 1px solid var(--jr-green);
  border-radius: 50%;
  color: var(--jr-green);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.jr-coaching-fit-panel--editing .jr-coaching-fit-number {
  border-color: var(--jr-green);
  background: var(--jr-green);
  color: var(--jr-paper);
}

.jr-coaching-fit-category {
  color: var(--jr-green);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-align: right;
}

.jr-coaching-fit-panel--editing .jr-coaching-fit-category {
  color: var(--jr-sage);
}

.jr-coaching-fit-panel h3 {
  margin: 0 0 45px;
  font-size: clamp(35px, 4vw, 58px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.jr-coaching-fit-panel--coaching h3 {
  color: var(--jr-ink);
}

.jr-coaching-fit-panel--editing h3 {
  color: var(--jr-paper);
}


/* CHECKLISTS */

.jr-coaching-fit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jr-coaching-fit-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px 0;
}

.jr-coaching-fit-panel--coaching
  .jr-coaching-fit-list li {
  border-top: 1px solid rgba(17, 17, 17, 0.2);
}

.jr-coaching-fit-panel--editing
  .jr-coaching-fit-list li {
  border-top: 1px solid rgba(245, 241, 232, 0.17);
}

.jr-coaching-fit-list li:last-child {
  border-bottom: 1px solid;
}

.jr-coaching-fit-panel--coaching
  .jr-coaching-fit-list li:last-child {
  border-bottom-color: rgba(17, 17, 17, 0.2);
}

.jr-coaching-fit-panel--editing
  .jr-coaching-fit-list li:last-child {
  border-bottom-color: rgba(245, 241, 232, 0.17);
}

.jr-coaching-fit-list li > span {
  padding-top: 3px;
  color: var(--jr-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.jr-coaching-fit-panel--editing
  .jr-coaching-fit-list li > span {
  color: var(--jr-sage);
}

.jr-coaching-fit-list p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

.jr-coaching-fit-panel--coaching
  .jr-coaching-fit-list p {
  color: var(--jr-grey);
}

.jr-coaching-fit-panel--editing
  .jr-coaching-fit-list p {
  color: rgba(245, 241, 232, 0.72);
}


/* RESULT */

.jr-coaching-fit-result {
  margin-top: auto;
  padding-top: 48px;
}

.jr-coaching-fit-result span {
  display: block;
  margin-bottom: 10px;
  color: var(--jr-green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.jr-coaching-fit-panel--editing
  .jr-coaching-fit-result span {
  color: var(--jr-sage);
}

.jr-coaching-fit-result strong {
  display: block;
  max-width: 420px;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.35;
}

.jr-coaching-fit-panel--coaching
  .jr-coaching-fit-result strong {
  color: var(--jr-ink);
}

.jr-coaching-fit-panel--editing
  .jr-coaching-fit-result strong {
  color: var(--jr-paper);
}


/* SERVICES LINK */

.jr-coaching-fit-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  align-self: flex-start;

  min-height: 55px;
  margin-top: 35px;
  padding: 15px 20px;

  border: 1px solid var(--jr-paper);
  color: var(--jr-paper) !important;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-decoration: none !important;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.jr-coaching-fit-link:hover {
  background: var(--jr-paper);
  color: var(--jr-ink) !important;
  transform: translateY(-2px);
}


/* GUIDANCE STRIP */

.jr-coaching-fit-guidance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;

  padding: clamp(28px, 4vw, 48px);
  border-right: 1px solid rgba(17, 17, 17, 0.25);
  border-bottom: 1px solid rgba(17, 17, 17, 0.25);
  border-left: 1px solid rgba(17, 17, 17, 0.25);
}

.jr-coaching-fit-guidance p {
  max-width: 760px;
  margin: 0;
  color: var(--jr-grey);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
}

.jr-coaching-fit-guidance strong {
  color: var(--jr-ink);
}

.jr-coaching-fit-guidance a {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: 15px 19px;

  background: var(--jr-green);
  color: var(--jr-paper) !important;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-decoration: none !important;
  white-space: nowrap;

  transition:
    background-color 180ms ease,
    transform 180ms ease;
}

.jr-coaching-fit-guidance a:hover {
  background: var(--jr-ink);
  transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .jr-coaching-fit-heading-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .jr-coaching-fit-heading-grid > p {
    max-width: 650px;
  }

  .jr-coaching-fit-grid {
    grid-template-columns: 1fr;
  }

  .jr-coaching-fit-guidance {
    grid-template-columns: 1fr;
  }

  .jr-coaching-fit-guidance a {
    justify-self: start;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .jr-coaching-fit-inner {
    width: calc(100% - 32px);
    padding: 80px 0;
  }

  .jr-coaching-fit-heading h2 {
    font-size: clamp(45px, 13.5vw, 65px);
  }

  .jr-coaching-fit-panel {
    padding: 34px 23px;
  }

  .jr-coaching-fit-panel-top {
    margin-bottom: 45px;
  }

  .jr-coaching-fit-panel h3 {
    font-size: 37px;
  }

  .jr-coaching-fit-list li {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
  }

  .jr-coaching-fit-result {
    padding-top: 38px;
  }

  .jr-coaching-fit-link {
    width: 100%;
  }

  .jr-coaching-fit-guidance {
    gap: 25px;
    padding: 28px 22px;
  }

  .jr-coaching-fit-guidance a {
    width: 100%;
  }
}
/* =========================================================
   J. ROBERTSSON — COACHING PHILOSOPHY
   ========================================================= */

.jr-coaching-philosophy {
  --jr-ink: #111111;
  --jr-paper: #f5f1e8;
  --jr-green: #66745b;
  --jr-sage: #aeb7a4;

  position: relative;
  left: 50%;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background: var(--jr-ink);
  color: var(--jr-paper);
  transform: translateX(-50%);
}

.jr-coaching-philosophy *,
.jr-coaching-philosophy *::before,
.jr-coaching-philosophy *::after {
  box-sizing: border-box;
}

.jr-coaching-philosophy-inner {
  position: relative;
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
  margin-inline: auto;
  padding:
    clamp(90px, 11vw, 165px)
    0;
}


/* =========================================================
   HEADING
   ========================================================= */

.jr-coaching-philosophy-heading {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin-bottom: clamp(80px, 10vw, 145px);
}

.jr-coaching-philosophy-eyebrow {
  margin: 0 0 35px;
  color: var(--jr-sage);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jr-coaching-philosophy-heading h2 {
  margin: 0;
  color: var(--jr-paper);
  font-size: clamp(55px, 7.5vw, 114px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.062em;
  text-transform: uppercase;
}

.jr-coaching-philosophy-heading h2 span {
  display: block;
  color: var(--jr-green);
}


/* =========================================================
   PHILOSOPHY COPY
   ========================================================= */

.jr-coaching-philosophy-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(300px, 0.8fr)
    minmax(0, 1.2fr);
  gap: clamp(55px, 9vw, 145px);
  align-items: start;
}

.jr-coaching-philosophy-statement {
  max-width: 510px;
}

.jr-coaching-philosophy-statement p {
  margin: 0;
  color: rgba(245, 241, 232, 0.68);
  font-size: 17px;
  line-height: 1.65;
}

.jr-coaching-philosophy-statement p + p {
  margin-top: 24px;
}

.jr-coaching-philosophy-statement
  .jr-coaching-philosophy-lead {
  color: var(--jr-paper);
  font-size: clamp(23px, 2.1vw, 32px);
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: -0.015em;
}


/* =========================================================
   PRINCIPLES
   ========================================================= */

.jr-coaching-philosophy-principles {
  border-top: 1px solid rgba(245, 241, 232, 0.2);
}

.jr-coaching-philosophy-principle {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px);
  padding: 31px 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.2);
}

.jr-coaching-philosophy-number {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;

  border: 1px solid var(--jr-green);
  border-radius: 50%;
  color: var(--jr-sage);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.jr-coaching-philosophy-principle h3 {
  margin: 2px 0 12px;
  color: var(--jr-paper);
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 800;
  line-height: 1.1;
}

.jr-coaching-philosophy-principle p {
  max-width: 570px;
  margin: 0;
  color: rgba(245, 241, 232, 0.65);
  font-size: 16px;
  line-height: 1.6;
}


/* =========================================================
   MANIFESTO
   ========================================================= */

.jr-coaching-philosophy-manifesto {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(30px, 6vw, 95px);

  margin-top: clamp(85px, 11vw, 155px);
  padding:
    clamp(38px, 6vw, 75px)
    clamp(30px, 6vw, 80px);

  border: 1px solid rgba(245, 241, 232, 0.2);
  background: rgba(245, 241, 232, 0.04);
}

.jr-coaching-philosophy-manifesto-label {
  padding-top: 10px;
}

.jr-coaching-philosophy-manifesto-label span {
  color: var(--jr-sage);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
}

.jr-coaching-philosophy-manifesto blockquote {
  max-width: 900px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--jr-paper);
  font-size: clamp(27px, 3.4vw, 49px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}


/* =========================================================
   FOOTER
   ========================================================= */

.jr-coaching-philosophy-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 45px;
  align-items: end;

  margin-top: 55px;
}

.jr-coaching-philosophy-footer > p {
  max-width: 710px;
  margin: 0;
  color: rgba(245, 241, 232, 0.7);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
}

.jr-coaching-philosophy-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.jr-coaching-philosophy-tags span {
  padding: 9px 11px;
  border: 1px solid rgba(245, 241, 232, 0.26);
  color: var(--jr-sage);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;
}


/* =========================================================
   STORYBOROS
   ========================================================= */

.jr-coaching-philosophy-enso {
  position: absolute;
  top: 175px;
  right: -310px;
  width: 650px;
  aspect-ratio: 1;

  border: 2px solid rgba(174, 183, 164, 0.1);
  border-bottom-color: transparent;
  border-radius: 50%;

  transform: rotate(-32deg);
  pointer-events: none;
}

.jr-coaching-philosophy-enso span {
  position: absolute;
  right: 73px;
  bottom: 94px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(102, 116, 91, 0.45);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .jr-coaching-philosophy-content {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .jr-coaching-philosophy-statement {
    max-width: 680px;
  }

  .jr-coaching-philosophy-principles {
    max-width: 760px;
  }

  .jr-coaching-philosophy-footer {
    grid-template-columns: 1fr;
  }

  .jr-coaching-philosophy-tags {
    justify-content: flex-start;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .jr-coaching-philosophy-inner {
    width: calc(100% - 32px);
    padding: 80px 0;
  }

  .jr-coaching-philosophy-heading {
    margin-bottom: 65px;
  }

  .jr-coaching-philosophy-heading h2 {
    font-size: clamp(45px, 13.5vw, 65px);
  }

  .jr-coaching-philosophy-content {
    gap: 48px;
  }

  .jr-coaching-philosophy-principle {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;
  }

  .jr-coaching-philosophy-number {
    width: 42px;
    height: 42px;
  }

  .jr-coaching-philosophy-manifesto {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 70px;
    padding: 30px 22px;
  }

  .jr-coaching-philosophy-manifesto blockquote {
    font-size: 28px;
  }

  .jr-coaching-philosophy-footer {
    gap: 32px;
  }

  .jr-coaching-philosophy-tags {
    justify-content: flex-start;
  }

  .jr-coaching-philosophy-enso {
    top: 130px;
    right: -250px;
    width: 450px;
  }
}
/* =========================================================
   J. ROBERTSSON — COACHING BOOKING, FAQ & FINAL CTA
   ========================================================= */

.jr-coaching-booking {
  --jr-ink: #111111;
  --jr-paper: #f5f1e8;
  --jr-green: #66745b;
  --jr-sage: #aeb7a4;
  --jr-grey: #6f706c;

  position: relative;
  left: 50%;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background: var(--jr-paper);
  color: var(--jr-ink);
  transform: translateX(-50%);
}

.jr-coaching-booking *,
.jr-coaching-booking *::before,
.jr-coaching-booking *::after {
  box-sizing: border-box;
}

.jr-coaching-booking-inner {
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
  margin-inline: auto;
  padding:
    clamp(90px, 11vw, 165px)
    0;
}

.jr-coaching-booking-eyebrow {
  margin: 0 0 30px;
  color: var(--jr-green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* =========================================================
   OFFER
   ========================================================= */

.jr-coaching-offer {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(330px, 0.75fr);
  gap: clamp(55px, 9vw, 145px);
  align-items: end;
}

.jr-coaching-offer-heading h2 {
  margin: 0;
  color: var(--jr-ink);
  font-size: clamp(60px, 7.8vw, 118px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.062em;
  text-transform: uppercase;
}

.jr-coaching-offer-heading h2 span {
  color: var(--jr-green);
}

.jr-coaching-price {
  display: flex;
  align-items: flex-end;
  margin-bottom: 35px;
}

.jr-coaching-price-currency {
  align-self: flex-start;
  margin: 13px 4px 0 0;
  color: var(--jr-green);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.jr-coaching-price > strong {
  color: var(--jr-ink);
  font-size: clamp(80px, 9vw, 130px);
  font-weight: 800;
  line-height: 0.72;
  letter-spacing: -0.07em;
}

.jr-coaching-price > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 20px;
}

.jr-coaching-price > div span {
  color: var(--jr-grey);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
}

.jr-coaching-offer-description {
  max-width: 510px;
  margin: 0;
  color: var(--jr-grey);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
}

.jr-coaching-offer-includes {
  margin-top: 35px;
}

.jr-coaching-offer-includes > span {
  display: block;
  margin-bottom: 13px;
  color: var(--jr-green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.jr-coaching-offer-includes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jr-coaching-offer-includes li {
  position: relative;
  padding: 11px 0 11px 19px;
  border-top: 1px solid rgba(17, 17, 17, 0.18);
  color: var(--jr-ink);
  font-size: 14px;
  line-height: 1.45;
}

.jr-coaching-offer-includes li:last-child {
  border-bottom: 1px solid rgba(17, 17, 17, 0.18);
}

.jr-coaching-offer-includes li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jr-green);
}


/* =========================================================
   COMING-SOON PANEL
   ========================================================= */

.jr-coaching-coming-soon {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1fr);
  min-height: 470px;

  margin-top: clamp(75px, 10vw, 145px);
  overflow: hidden;
  background: var(--jr-ink);
  color: var(--jr-paper);
}

.jr-coaching-coming-soon-symbol {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-right: 1px solid rgba(245, 241, 232, 0.16);
}

.jr-coaching-coming-soon-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(260px, 31vw, 475px);
  aspect-ratio: 1;

  border: clamp(18px, 2.2vw, 34px) solid var(--jr-green);
  border-right-color: transparent;
  border-radius: 50%;

  transform: translate(-50%, -50%) rotate(-28deg);
}

.jr-coaching-coming-soon-symbol > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(15px, 1.5vw, 23px);
  height: clamp(15px, 1.5vw, 23px);
  border-radius: 50%;
  background: var(--jr-sage);
  transform: translate(-50%, -50%);
}

.jr-coaching-coming-soon-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: clamp(45px, 7vw, 90px);
}

.jr-coaching-coming-soon-label {
  margin: 0 0 20px;
  color: var(--jr-sage);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.jr-coaching-coming-soon-content h3 {
  margin: 0 0 30px;
  color: var(--jr-paper);
  font-size: clamp(50px, 6vw, 90px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.055em;
}

.jr-coaching-coming-soon-content > p {
  max-width: 590px;
  margin: 0;
  color: rgba(245, 241, 232, 0.7);
  font-size: 17px;
  line-height: 1.6;
}

.jr-coaching-coming-soon-content > p + p {
  margin-top: 17px;
}

.jr-coaching-coming-soon-button {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 38px;

  margin-top: 35px;
  padding: 16px 21px;

  border: 1px solid var(--jr-green);
  background: var(--jr-green);
  color: var(--jr-paper) !important;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-decoration: none !important;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.jr-coaching-coming-soon-button:hover {
  background: var(--jr-paper);
  color: var(--jr-ink) !important;
  transform: translateY(-2px);
}

.jr-coaching-coming-soon-status {
  position: absolute;
  right: 24px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 9px;

  color: rgba(245, 241, 232, 0.55);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.jr-coaching-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jr-green);
}


/* =========================================================
   FAQ
   ========================================================= */

.jr-coaching-faq {
  display: grid;
  grid-template-columns:
    minmax(280px, 0.7fr)
    minmax(0, 1.3fr);
  gap: clamp(55px, 9vw, 145px);
  align-items: start;
  margin-top: clamp(100px, 13vw, 185px);
}

.jr-coaching-faq-heading {
  position: sticky;
  top: 120px;
}

.jr-coaching-faq-heading h2 {
  margin: 0;
  color: var(--jr-ink);
  font-size: clamp(48px, 5.8vw, 84px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.052em;
  text-transform: uppercase;
}

.jr-coaching-faq-heading h2 span {
  color: var(--jr-green);
}

.jr-coaching-faq-heading > p:last-child {
  max-width: 410px;
  margin: 30px 0 0;
  color: var(--jr-grey);
  font-size: 17px;
  line-height: 1.6;
}

.jr-coaching-faq-list {
  border-top: 1px solid rgba(17, 17, 17, 0.28);
}

.jr-coaching-faq-item {
  border-bottom: 1px solid rgba(17, 17, 17, 0.28);
}

.jr-coaching-faq-item summary {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) 32px;
  gap: 18px;
  align-items: center;

  padding: 27px 0;
  color: var(--jr-ink);
  cursor: pointer;
  list-style: none;

  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.35;
}

.jr-coaching-faq-item summary::-webkit-details-marker {
  display: none;
}

.jr-coaching-faq-number {
  color: var(--jr-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.jr-coaching-faq-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
}

.jr-coaching-faq-icon::before,
.jr-coaching-faq-icon::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 18px;
  height: 2px;
  background: var(--jr-green);
  transition: transform 180ms ease;
}

.jr-coaching-faq-icon::after {
  transform: rotate(90deg);
}

.jr-coaching-faq-item[open]
  .jr-coaching-faq-icon::after {
  transform: rotate(0deg);
}

.jr-coaching-faq-answer {
  padding:
    0
    50px
    30px
    63px;
}

.jr-coaching-faq-answer p {
  max-width: 650px;
  margin: 0;
  color: var(--jr-grey);
  font-size: 16px;
  line-height: 1.65;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.jr-coaching-final-cta {
  background: var(--jr-green);
  color: var(--jr-paper);
}

.jr-coaching-final-cta-inner {
  width: min(1320px, calc(100% - 48px));
  max-width: 1320px;
  margin-inline: auto;
  padding:
    clamp(85px, 11vw, 160px)
    0;
}

.jr-coaching-final-label {
  margin: 0 0 30px;
  color: rgba(245, 241, 232, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.jr-coaching-final-cta h2 {
  max-width: 1150px;
  margin: 0;
  color: var(--jr-paper);
  font-size: clamp(54px, 7.5vw, 112px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.062em;
  text-transform: uppercase;
}

.jr-coaching-final-cta h2 span {
  color: var(--jr-ink);
}

.jr-coaching-final-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 45px;
  align-items: end;
  margin-top: clamp(55px, 7vw, 90px);
}

.jr-coaching-final-actions > p {
  max-width: 560px;
  margin: 0;
  color: rgba(245, 241, 232, 0.85);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 600;
  line-height: 1.5;
}

.jr-coaching-final-actions > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 17px;
}

.jr-coaching-final-status {
  color: rgba(245, 241, 232, 0.7);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.jr-coaching-final-actions a {
  display: inline-flex;
  min-width: 230px;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 17px 22px;

  background: var(--jr-ink);
  color: var(--jr-paper) !important;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none !important;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.jr-coaching-final-actions a:hover {
  background: var(--jr-paper);
  color: var(--jr-ink) !important;
  transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .jr-coaching-offer {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .jr-coaching-offer-details {
    max-width: 650px;
  }

  .jr-coaching-coming-soon {
    grid-template-columns: 115px minmax(0, 1fr);
  }

  .jr-coaching-faq {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .jr-coaching-faq-heading {
    position: static;
    max-width: 700px;
  }

  .jr-coaching-final-actions {
    grid-template-columns: 1fr;
  }

  .jr-coaching-final-actions > div {
    align-items: flex-start;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .jr-coaching-booking-inner,
  .jr-coaching-final-cta-inner {
    width: calc(100% - 32px);
  }

  .jr-coaching-booking-inner {
    padding: 80px 0;
  }

  .jr-coaching-offer-heading h2,
  .jr-coaching-final-cta h2 {
    font-size: clamp(45px, 13.5vw, 65px);
  }

  .jr-coaching-price > strong {
    font-size: 92px;
  }

  .jr-coaching-coming-soon {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 0;
    margin-top: 75px;
  }

  .jr-coaching-coming-soon-ring {
    width: 140px;
    border-width: 13px;
  }

  .jr-coaching-coming-soon-content {
    padding: 36px 23px 65px;
  }

  .jr-coaching-coming-soon-content h3 {
    font-size: 48px;
  }

  .jr-coaching-coming-soon-button {
    width: 100%;
  }

  .jr-coaching-coming-soon-status {
    right: 22px;
    bottom: 19px;
  }

  .jr-coaching-faq {
    margin-top: 95px;
  }

  .jr-coaching-faq-heading h2 {
    font-size: 48px;
  }

  .jr-coaching-faq-item summary {
    grid-template-columns: 31px minmax(0, 1fr) 25px;
    gap: 11px;
    padding: 23px 0;
  }

  .jr-coaching-faq-answer {
    padding:
      0
      20px
      26px
      42px;
  }

  .jr-coaching-final-cta-inner {
    padding: 80px 0;
  }

  .jr-coaching-final-actions > div {
    width: 100%;
  }

  .jr-coaching-final-actions a {
    width: 100%;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .jr-coaching-coming-soon-button,
  .jr-coaching-faq-icon::before,
  .jr-coaching-faq-icon::after,
  .jr-coaching-final-actions a {
    transition: none;
  }
}
/* =========================================================
   J. ROBERTSSON — SOCIAL CONNECT MODULE
   LinkedIn · Instagram · Goodreads
   ========================================================= */

.jr-social-connect {
  --jr-ink: #111111;
  --jr-paper: #f5f1e8;
  --jr-green: #66745b;
  --jr-green-dark: #59654f;
  --jr-sage: #aeb7a4;
  --jr-grey: #6f706c;

  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: clamp(75px, 9vw, 140px) 0;
  overflow: hidden;
  background: var(--jr-paper);
  color: var(--jr-ink);
}

.jr-social-connect *,
.jr-social-connect *::before,
.jr-social-connect *::after {
  box-sizing: border-box;
}

/* INNER 1320PX GRID */

.jr-social-connect__inner {
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
}

/* MODULE HEADER */

.jr-social-connect__header {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.55fr);
  gap: clamp(35px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(45px, 6vw, 80px);
}

.jr-social-connect__eyebrow {
  margin: 0 0 22px;
  color: var(--jr-green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jr-social-connect__title {
  max-width: 930px;
  margin: 0;
  color: var(--jr-ink);
  font-size: clamp(54px, 7.5vw, 116px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.jr-social-connect__title span {
  color: var(--jr-green);
}

.jr-social-connect__intro {
  max-width: 440px;
  margin: 0 0 5px;
  color: var(--jr-grey);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
}

/* THREE-CARD GRID */

.jr-social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--jr-sage);
  background: var(--jr-sage);
}

/* INDIVIDUAL CARD */

.jr-social-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(390px, 35vw, 500px);
  padding: clamp(30px, 3.5vw, 52px);
  flex-direction: column;
  color: var(--jr-ink);
  text-decoration: none !important;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color 220ms ease,
    color 220ms ease;
}

.jr-social-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -80px;
  bottom: -135px;
  width: 270px;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.15;
  transform: rotate(-24deg);
  transition:
    transform 500ms ease,
    opacity 220ms ease;
}

.jr-social-card:hover::before {
  opacity: 0.28;
  transform: rotate(-8deg) scale(1.05);
}

/* CARD TOP ROW */

.jr-social-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 45px;
  gap: 24px;
}

.jr-social-card__number {
  color: var(--jr-grey);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
}

.jr-social-card__icon {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* CARD COPY */

.jr-social-card__content {
  display: flex;
  margin-top: clamp(130px, 10vw, 190px);
  padding-top: 0;
	margin-bottom: 30px;
  flex-direction: column;
}

.jr-social-card__eyebrow {
  display: block;
  margin-bottom: 17px;
  color: var(--jr-grey);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jr-social-card__title {
  display: block;
  margin: 0 0 22px;
  color: inherit;
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.jr-social-card__description {
  display: block;
  max-width: 340px;
  margin: 0;
  color: var(--jr-grey);
  font-size: 15px;
  line-height: 1.55;
}

/* CARD CTA */

.jr-social-card__link {
  display: flex;
  width: 100%;
  margin-top: auto;
  padding-top: 20px;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  border-top: 1px solid currentColor;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.jr-social-card__link span {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  transition: transform 180ms ease;
}

.jr-social-card:hover .jr-social-card__link span {
  transform: translateX(6px);
}

/* LINKEDIN */

.jr-social-card--linkedin {
  background: var(--jr-ink);
  color: var(--jr-paper);
}

.jr-social-card--linkedin .jr-social-card__number,
.jr-social-card--linkedin .jr-social-card__eyebrow,
.jr-social-card--linkedin .jr-social-card__description {
  color: rgba(245, 241, 232, 0.68);
}

.jr-social-card--linkedin:hover {
  background: #252525;
}

/* INSTAGRAM */

.jr-social-card--instagram {
  background: var(--jr-paper);
  color: var(--jr-ink);
}

.jr-social-card--instagram:hover {
  background: #ebe6db;
}

/* GOODREADS */

.jr-social-card--goodreads {
  background: var(--jr-green);
  color: var(--jr-paper);
}

.jr-social-card--goodreads .jr-social-card__number,
.jr-social-card--goodreads .jr-social-card__eyebrow,
.jr-social-card--goodreads .jr-social-card__description {
  color: rgba(245, 241, 232, 0.72);
}

.jr-social-card--goodreads:hover {
  background: var(--jr-green-dark);
}

/* Ensure SVG strokes inherit each card's foreground colour */

.jr-social-card--linkedin .jr-social-card__icon,
.jr-social-card--instagram .jr-social-card__icon,
.jr-social-card--goodreads .jr-social-card__icon {
  color: inherit;
}

/* ACCESSIBILITY */

.jr-social-card:focus-visible {
  z-index: 2;
  outline: 3px solid var(--jr-green);
  outline-offset: 4px;
}

.jr-social-card--goodreads:focus-visible,
.jr-social-card--linkedin:focus-visible {
  outline-color: var(--jr-paper);
}

/* TABLET */

@media (max-width: 1000px) {
  .jr-social-connect__header {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .jr-social-connect__intro {
    max-width: 620px;
  }

  .jr-social-grid {
    grid-template-columns: 1fr 1fr;
  }

  .jr-social-card {
    min-height: 420px;
  }

  .jr-social-card--goodreads {
    grid-column: 1 / -1;
    min-height: 370px;
  }

  .jr-social-card--goodreads .jr-social-card__description {
    max-width: 540px;
  }
}

/* MOBILE */

@media (max-width: 680px) {
  .jr-social-connect {
    padding: 70px 0;
  }

  .jr-social-connect__inner {
    width: min(100% - 32px, 1320px);
  }

  .jr-social-connect__header {
    margin-bottom: 38px;
  }

  .jr-social-connect__title {
    font-size: clamp(46px, 14vw, 70px);
  }

  .jr-social-grid {
    grid-template-columns: 1fr;
  }

  .jr-social-card,
  .jr-social-card--goodreads {
    grid-column: auto;
    min-height: 370px;
    padding: 30px 26px;
  }

  .jr-social-card__content {
    margin-top: 65px;
    padding-top: 0;
  }


  .jr-social-card__title {
    font-size: clamp(36px, 11vw, 48px);
  }

  .jr-social-card__link {
    margin-top: 34px;
  }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .jr-social-card,
  .jr-social-card::before,
  .jr-social-card__link span {
    transition: none;
  }

  .jr-social-card:hover::before,
  .jr-social-card:hover .jr-social-card__link span {
    transform: none;
  }
}