:root{
  --paper:#f6f2e9; --paper-2:#ede8da; --sage:#dde4d2; --line:#bcc7b4;
  --ink:#10241a; --muted:#46584c; --forest:#173d2b; --deep:#0e2a1d; --leaf:#2f6b4b; --mist:#cfe0d3;
  --serif:"Newsreader",Georgia,serif; --sans:"Instrument Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--paper);color:var(--ink);font:400 1.05rem/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a,a:visited,a:active{color:inherit}
html{accent-color:var(--leaf);-webkit-tap-highlight-color:rgba(47,107,75,.2)}
::selection{background:var(--forest);color:var(--paper)}
:focus-visible{outline:2px solid var(--leaf);outline-offset:4px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.section{padding-block:clamp(64px,9vw,120px)}

/* type */
h1,h2,h3,blockquote,.sign{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
h1{font-size:clamp(3rem,7.4vw,6.2rem);line-height:.98;letter-spacing:-.035em;font-weight:300}
h2{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.05;font-weight:300;text-wrap:balance}
h3{font-size:1.55rem;line-height:1.2;margin-bottom:10px}
p+p{margin-top:14px}
.sub,.lead{color:var(--muted);text-wrap:pretty}
.lead{font-size:1.2rem;max-width:44ch;margin-top:28px}
.eyebrow{font:500 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf);margin-bottom:22px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:36px;height:1px;background:currentColor}

/* links: animated underline */
.nav nav a:not(.btn),.foot a,.link,.small a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease),color .3s;text-decoration:none}
.nav nav a:not(.btn):hover,.foot a:hover,.link:hover,.small a:hover{background-size:100% 1px}
.link,.small a{background-size:100% 1px;background-image:linear-gradient(var(--line),var(--line))}
.link{position:relative;font-weight:500}
.link:hover,.small a:hover{background-image:linear-gradient(var(--leaf),var(--leaf));color:var(--leaf)}
.link,.small a{background-size:100% 1px}
.link:hover,.small a:hover{background-size:100% 2px}

/* buttons: color sweep */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-block;padding:15px 30px;border:0;border-radius:999px;font:500 .95rem var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:color .35s,transform .25s var(--ease),box-shadow .35s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(102%);border-radius:50% 50% 0 0/100% 100% 0 0;transition:transform .5s var(--ease),border-radius .5s var(--ease)}
.btn:hover::before{transform:none;border-radius:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(14,42,29,.55)}
.btn:active{transform:translateY(0)}
.btn-dark,.btn-dark:visited,.btn-dark:hover,.btn-dark:active{color:#fff}
.btn-dark{background:var(--forest)}
.btn-dark::before{background:var(--leaf)}
.btn:disabled{opacity:.6;pointer-events:none}

/* page-wide cursor glow (JS adds .glow on <html> for mouse users): green on light areas, pale on dark areas */
.glow body{background:radial-gradient(240px circle at var(--cx,-999px) var(--cy,-999px),rgba(47,125,85,.2),transparent 72%) fixed,var(--paper)}
.glow .sage{background:radial-gradient(240px circle at var(--cx,-999px) var(--cy,-999px),rgba(23,61,43,.14),transparent 72%) fixed,var(--sage)}
.glow .dark{background:radial-gradient(280px circle at var(--cx,-999px) var(--cy,-999px),rgba(190,228,203,.17),transparent 72%) fixed,var(--deep)}

/* custom cursor: dot + trailing ring */
html{--cc:#173d2b;--ccf:rgba(47,107,75,.16)}
html.cur-dark{--cc:#f6f2e9;--ccf:rgba(246,242,233,.18)}
html.cur-on,html.cur-on *{cursor:none!important}
html.cur-on input,html.cur-on textarea{cursor:text!important}
html.cur-on select{cursor:pointer!important}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:9999;opacity:0;transition:opacity .3s}
html.cur-live .cur-dot,html.cur-live .cur-ring{opacity:1}
html.cur-field .cur-dot,html.cur-field .cur-ring{opacity:0}
.cur-dot::before{content:"";position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--cc);transition:transform .3s var(--ease),background .3s}
.cur-ring i{position:absolute;left:0;top:0;width:36px;height:36px;border:1.5px solid var(--cc);border-radius:50%;transform:translate(-50%,-50%);opacity:.55;transition:width .4s var(--ease),height .4s var(--ease),background .4s,border-color .3s,opacity .3s}
html.cur-hover .cur-ring i{width:74px;height:74px;background:var(--ccf);opacity:1}
html.cur-hover .cur-dot::before{transform:scale(.4)}
html.cur-down .cur-ring i{width:26px;height:26px;opacity:1}
html.cur-down.cur-hover .cur-ring i{width:60px;height:60px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 28px;background:rgba(246,242,233,.88);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.brand{font:400 1.4rem var(--serif);letter-spacing:-.02em;text-decoration:none}
.nav nav{display:flex;align-items:center;gap:30px;font-size:.93rem}
.nav .btn{padding:10px 22px}
.menu-btn{display:none;background:none;border:1px solid var(--forest);color:var(--forest);padding:7px 16px;border-radius:999px;font:500 .9rem var(--sans);cursor:pointer}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,6vw,88px);align-items:end;padding-block:clamp(48px,7vw,96px)}
.hero-text{animation:rise .9s var(--ease) both}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:40px}
.hero-img{aspect-ratio:3/4;border-radius:999px 999px 6px 6px;overflow:hidden;background:linear-gradient(165deg,#bccdb4,#5f8f73);animation:rise 1.1s .12s var(--ease) both}
.hero-img img{width:100%;height:100%;object-fit:cover}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* infinite looping strip */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{list-style:none;padding:0;display:flex;flex:none;min-width:100vw;align-items:center;justify-content:space-around;gap:2.5rem}
.marquee-group li{display:flex;align-items:center;gap:2.5rem;white-space:nowrap;font:500 .85rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.marquee-group li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--leaf)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* editorial section heads: title left, intro right */
#learning,#testimonials .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,6vw,96px);align-items:end}
#learning .cards,#testimonials .cards{grid-column:1/-1}
#learning .sub,#testimonials .sub{margin:0 0 6px}
.sub{max-width:52ch;margin-bottom:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--ink)}

/* cards as ruled columns */
.card{padding:32px 32px 36px 0;border-right:1px solid var(--line)}
.card+.card{padding-left:32px}
.card:last-child{border-right:0}
.tag{font:500 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--leaf);margin-bottom:22px}
.card h3{font-size:2rem;font-weight:300}
.card p:not(.tag):not(.meta){color:var(--muted)}
.points{list-style:none;padding:0;margin-top:20px;border-top:1px solid var(--line)}
.points li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-weight:500;color:var(--ink);transition:padding-left .35s var(--ease),color .3s}
.points li::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--leaf);transition:transform .35s var(--ease)}
.meta{margin-top:24px;padding-top:16px;border-top:1px dashed var(--line);font-size:.88rem;color:var(--forest);font-weight:500}

/* subject cards: spotlight reveal that grows from where the cursor enters */
#learning .cards{counter-reset:c;margin-inline:-28px}
#learning .card,#learning .card+.card{--px:28px;--py:40px;position:relative;isolation:isolate;overflow:hidden;counter-increment:c;padding:var(--py) var(--px) 44px}
#learning .card::after{content:counter(c,decimal-leading-zero);position:absolute;z-index:2;top:16px;right:16px;padding:7px 14px;border-radius:999px;background:var(--paper);font:400 italic 1.05rem/1 var(--serif);color:var(--forest);transition:background .4s,color .4s,transform .5s var(--ease)}
#learning .card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(79,140,105,.55),transparent 70%),var(--deep);clip-path:circle(0 at var(--ex,50%) var(--ey,50%));transition:clip-path .75s var(--ease)}
#learning .card h3,#learning .tag,#learning .points li{transition:color .45s,border-color .45s,padding-left .35s var(--ease)}
@media(hover:hover) and (pointer:fine){
  #learning .card:hover::before{clip-path:circle(170% at var(--ex,50%) var(--ey,50%))}
  #learning .card:hover h3{color:#fff}
  #learning .card:hover .tag{color:#8fc3a5}
  #learning .card:hover::after{background:var(--forest);color:#fff;transform:translateY(-2px)}
  #learning .card:hover .points{border-color:#2f5a44}
  #learning .card:hover .points li{color:var(--mist);border-color:#2f5a44;animation:nudge .6s var(--ease) both}
  #learning .card:hover .points li::before{background:#7fc29b}
  #learning .card:hover .points li:nth-child(2){animation-delay:.06s}
  #learning .card:hover .points li:nth-child(3){animation-delay:.12s}
  #learning .card:hover .points li:nth-child(4){animation-delay:.18s}
  #learning .card:hover .points li:nth-child(5){animation-delay:.24s}
  #learning .card:hover .points li:hover{color:#fff;padding-left:30px}
  #learning .card:hover .points li:hover::before{transform:scale(1.5)}
}
@keyframes nudge{from{opacity:.2;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* dark band */
.dark{background:var(--deep);color:var(--mist)}
.dark h2,.dark h3{color:var(--paper)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:64px}
.steps li{border-top:1px solid #2f5a44;padding-top:28px}
.steps span{display:block;font:300 4.2rem/1 var(--serif);color:#4f8c69;margin-bottom:22px;font-style:italic}
.steps p{color:#b6cdbd;max-width:34ch}
#approach h2{max-width:14ch}

/* learners */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--ink)}
.grid4>div{padding:28px 24px 8px;border-right:1px solid var(--line)}
.grid4>div:first-child{padding-left:0}
.grid4>div:last-child{border-right:0}
.grid4 p:not(.age){color:var(--muted)}
.age{font:500 .78rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--leaf);margin-bottom:14px}

/* testimonials */
.sage{background:var(--sage)}
#testimonials .cards{border-top-color:var(--forest)}
.quote{padding:36px 32px 8px 0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;border-right:1px solid var(--line)}
.quote+.quote{padding-left:32px}
.quote:last-child{border-right:0}
.quote blockquote{font-size:1.55rem;line-height:1.3;font-weight:300;font-style:italic;text-wrap:balance}
.quote figcaption{font:500 .85rem var(--sans);letter-spacing:.04em;color:var(--muted)}

/* about */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,7vw,110px);align-items:center}
.portrait{aspect-ratio:4/5;border-radius:6px 6px 999px 999px;overflow:hidden;background:linear-gradient(165deg,#bccdb4,#5f8f73)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.about h2{margin-bottom:26px}
.about p:not(.eyebrow):not(.sign){font-size:1.15rem;color:var(--muted);max-width:52ch}
.about .eyebrow{margin-bottom:22px}
.exp{display:flex;align-items:baseline;gap:16px;margin-top:32px;padding-top:22px;border-top:1px solid var(--line);max-width:52ch}
.exp strong{font:300 3.6rem/1 var(--serif);letter-spacing:-.03em;color:var(--forest)}
.exp span{font:500 .9rem var(--sans);letter-spacing:.04em;color:var(--muted)}
.sign{font-family:"Mrs Saint Delafield","Brush Script MT",cursive;font-size:4rem;line-height:1;font-style:normal;font-weight:400;letter-spacing:0;margin-top:22px;color:var(--forest)}

/* faq */
.narrow{max-width:860px}
.narrow h2{margin-bottom:40px}
details{border-top:1px solid var(--line);padding:24px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font:300 1.5rem/1.3 var(--serif);transition:color .3s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--leaf)}
summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;font:300 1.4rem/1 var(--sans);transition:transform .4s var(--ease),background .3s,color .3s}
summary:hover::after{background:var(--forest);color:var(--paper);border-color:var(--forest)}
details[open] summary::after{transform:rotate(45deg)}
details.closing summary::after{transform:none}
details p{margin-top:14px;color:var(--muted);max-width:60ch}

/* contact + form */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,110px);align-items:start}
.contact h2{margin-bottom:24px}
.contact p{color:var(--muted);max-width:44ch}
.small{margin-top:28px;font-size:.95rem}
form{position:relative;z-index:2;display:grid;gap:20px;background:var(--paper);padding:clamp(24px,4vw,44px);border-radius:6px;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(14,42,29,.45)}
label{display:grid;gap:8px;font:500 .82rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--forest)}
input,select,textarea{font:400 1rem var(--sans);letter-spacing:0;text-transform:none;padding:12px 0;border:0;border-bottom:1px solid #9fb0a4;border-radius:0;background:transparent;color:var(--ink);width:100%;transition:border-color .3s,box-shadow .3s}
input:hover,select:hover,textarea:hover{border-bottom-color:var(--leaf)}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--forest);box-shadow:0 1px 0 var(--forest)}
textarea{resize:vertical}
.hp{position:absolute;left:-9999px}
form .btn{justify-self:start;margin-top:6px}
.form-status{font-size:.95rem;margin:0;transition:opacity .5s}
.form-status:empty{display:none}
.form-status.fade{opacity:0}
.form-status.ok{color:var(--paper);background:var(--forest);padding:16px 20px;border-radius:6px;font-weight:500}
.form-status.err{color:#7a2a18;background:#f1ddd6;padding:14px 18px;border-radius:6px;font-weight:500}
input.bad,select.bad,textarea.bad{border-bottom-color:#8c2f1c}

/* big rotating get-in-touch ring, bleeding off the corner */
#contact,#refer{--d:clamp(340px,40vw,620px);position:relative;overflow:hidden}
.contact>div:first-child{padding-bottom:calc(var(--d)*.55)}
.spin{position:absolute;left:calc(var(--d)*-.24);bottom:calc(var(--d)*-.3);width:var(--d);aspect-ratio:1;border-radius:50%;color:var(--forest);text-decoration:none}
.spin>svg{width:100%;height:100%;animation:spin 40s linear infinite}
.ring-text{font:500 12px var(--sans);fill:var(--forest)}
.spin:hover>svg,.spin:focus-visible>svg{animation-duration:120s}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:960px){
  .contact>div:first-child{padding-bottom:0}
  #contact,#refer{--d:min(86vw,520px)}
  .spin{position:relative;left:auto;bottom:auto;margin:40px 0 0 calc(var(--d)*-.26)}
}

/* footer */
.foot{padding-top:clamp(56px,8vw,96px);overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.foot h3{font-size:1.8rem;font-weight:300}
.foot h4{font:500 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7fae93;margin-bottom:18px}
.foot a{display:block;width:fit-content;color:var(--mist);margin-bottom:10px}
.foot a:hover{color:#fff}
.foot p{color:#b6cdbd}
.copy{margin-top:56px;padding-top:22px;border-top:1px solid #2f5a44;font-size:.85rem;color:#8fb09b}
.bigmark{font:300 clamp(2.4rem,10.2vw,9.5rem)/1 var(--serif);letter-spacing:-.04em;white-space:nowrap;text-align:center;color:#1d4a35;margin-top:28px;padding-bottom:12px;user-select:none}

/* responsive */
@media(max-width:960px){
  .hero,.about,.contact,#learning,#testimonials .wrap{grid-template-columns:1fr}
  #learning .sub,#testimonials .sub{margin-top:18px}
  .hero-img{max-width:440px}
  .cards,.steps{grid-template-columns:1fr}
  .card,.card+.card,.quote,.quote+.quote{padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}
  .card:last-child,.quote:last-child{border-bottom:0}
  #learning .card,#learning .card+.card{--py:32px;padding:var(--py) var(--px) 36px}
  .grid4{grid-template-columns:1fr 1fr}
  .grid4>div,.grid4>div:first-child{padding:24px 20px 24px 0;border-right:0}
  .foot-grid{grid-template-columns:1fr}
  .steps{gap:36px}
}
@media(max-width:1080px){
  .menu-btn{display:block}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:18px;padding:24px 28px 28px;background:var(--paper);border-bottom:1px solid var(--line)}
  .nav nav.open{display:flex;animation:rise .35s var(--ease)}
}
@media(max-width:520px){.grid4{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* no browser-default blues: autofill and link states */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--paper) inset;transition:background-color 9999s}
.hp{accent-color:var(--leaf)}

/* subject images: full-bleed at the top of each card */
.card-img{display:block;margin:calc(var(--py,40px)*-1) calc(var(--px,28px)*-1) 28px;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(165deg,#bccdb4,#5f8f73)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media(hover:hover) and (pointer:fine){#learning .card:hover .card-img img{transform:scale(1.07)}}

/* skip link + answer-first intro */
.skip,.skip:visited{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--forest);color:#fff;padding:10px 20px;border-radius:999px;font-size:.9rem;text-decoration:none}
.skip:focus{left:14px}
.answer-lead{font-size:1.15rem;color:var(--ink);max-width:62ch;margin-bottom:36px;text-wrap:pretty}

/* subject card: short description line (English) */
#learning .card-desc{margin:-2px 0 4px;transition:color .45s}
@media(hover:hover) and (pointer:fine){
  #learning .card:hover .card-desc{color:var(--mist)}
  #learning .card:hover .points li:nth-child(6){animation-delay:.3s}
  #learning .card:hover .points li:nth-child(7){animation-delay:.36s}
  #learning .card:hover .points li:nth-child(8){animation-delay:.42s}
  #learning .card:hover .points li:nth-child(9){animation-delay:.48s}
}

/* Everstead Referral Circle: homepage band */
.referral{border-block:1px solid var(--line)}
.referral-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(24px,4vw,56px);padding-block:clamp(40px,5vw,64px)}
.referral h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:10px}
.referral p{color:var(--muted);max-width:56ch}
.rings{position:relative;display:block;width:92px;height:56px}
.rings::before,.rings::after{content:"";position:absolute;top:0;width:56px;height:56px;border-radius:50%;border:1.5px solid var(--forest)}
.rings::before{left:0}
.rings::after{left:34px;border-color:var(--leaf);background:rgba(47,107,75,.1)}

/* Referral page */
.ref-hero{padding-bottom:clamp(40px,6vw,72px)}
.ref-hero h1{max-width:15ch}
.ref-benefits{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);margin-top:48px;padding-top:36px;border-top:1px solid var(--ink)}
.ref-benefits h3{font-size:1.8rem;font-weight:300}
fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:20px}
legend{padding:0;margin-bottom:14px;font:500 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label.consent{display:flex;align-items:flex-start;gap:12px;font:400 .92rem/1.55 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.consent input{flex:none;width:18px;height:18px;margin-top:3px;padding:0;border:0;accent-color:var(--leaf)}
.consent input.bad{outline:2px solid #8c2f1c;outline-offset:2px}
.consent a{text-decoration:underline;text-underline-offset:3px}
.terms-list{margin:12px 0 0 1.1rem;color:var(--muted);max-width:62ch}
.terms-list li{margin-top:10px}
.terms-list strong{color:var(--ink);font-weight:600}
@media(max-width:760px){.referral-inner{grid-template-columns:1fr;gap:22px}.ref-benefits{grid-template-columns:1fr}}
@media(max-width:600px){.row2{grid-template-columns:1fr}}

/* highlighted Referral Circle band (homepage) */
.referral.dark{border:0;padding-block:clamp(8px,2vw,24px)}
.referral.dark .referral-inner{grid-template-columns:auto 1fr auto;gap:clamp(28px,5vw,72px);padding-block:clamp(56px,7vw,104px)}
.referral.dark h2{font-size:clamp(2rem,4.2vw,3.2rem);color:var(--paper)}
.referral.dark p{color:#b6cdbd;max-width:54ch}
.referral.dark .eyebrow{color:#8fd0a8;margin-bottom:18px}
.referral.dark .rings{width:150px;height:92px;animation:orbit 60s linear infinite}
.referral.dark .rings::before,.referral.dark .rings::after{width:92px;height:92px}
.referral.dark .rings::before{border-color:var(--mist)}
.referral.dark .rings::after{left:58px;border-color:#7fc29b;background:rgba(127,194,155,.16)}
@keyframes orbit{to{transform:rotate(360deg)}}
.perks{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.perks li{display:flex;flex-direction:column;gap:2px;padding:12px 20px;border:1px solid #2f5a44;border-radius:18px;background:rgba(255,255,255,.04);font-size:.92rem;line-height:1.4;color:var(--mist);flex:1 1 210px}
.perks strong{font:500 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8fd0a8}
.btn-light,.btn-light:visited,.btn-light:hover,.btn-light:active{color:var(--deep)}
.btn-light{background:var(--paper)}
.btn-light::before{background:var(--mist)}
@media(max-width:760px){.referral.dark .referral-inner{grid-template-columns:1fr}.referral.dark .rings{width:130px}}

/* navbar: highlighted Referral link */
.btn-outline,.btn-outline:visited,.btn-outline:active{color:var(--forest)}
.btn-outline{background:rgba(47,107,75,.08);box-shadow:inset 0 0 0 1.5px var(--leaf)}
.btn-outline::before{background:var(--forest)}
.btn-outline:hover{color:#fff}
.nav .btn-outline{padding:10px 36px 10px 20px}
.nav-referral::after{content:"";position:absolute;top:50%;right:15px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 0 rgba(47,107,75,.5);animation:ping 2.4s ease-out infinite;transition:background .3s}
.nav-referral:hover::after{background:#8fd0a8}
@keyframes ping{70%,100%{box-shadow:0 0 0 9px rgba(47,107,75,0)}}
@media(max-width:1180px){.nav nav{gap:22px}}
@media(max-width:1080px){.nav .btn-outline{align-self:flex-start}}