/* JFIW design system — donor tokens (Design References/serious-business/NOTES.md) with JFIW values */

/* ---------- fonts ---------- */
@font-face{font-family:"Boldflare";src:url(/fonts/boldflare.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* palette (donor color roles → JFIW) */
  --base:#FFC61A;            /* donor --pink-light: page background */
  --ink:#232A2B;             /* donor --gray-dark: text, dark sections */
  --white:#fff;
  --light:#FFFDF5;           /* donor --white-ecru / --yellow-soft */
  --blue:#1E53FF;            /* donor --pink-hot/--red accent */
  --row-1:#B9CBFF;           /* donor --violet-light service row */
  --row-2:#FFFDF5;           /* donor --white-ecru service row */
  --row-3:#FFD968;           /* donor --yellow-mid service row */
  --row-4:#232A2B;           /* donor --gray-dark service row */
  --silver:#afafaf;

  /* layout (donor global tokens) */
  --global-padding:1.25rem;
  --margin-section:10rem;    /* 120px */
  --margin-sub:3rem;
  --gap:.75rem;
  --radius:2.75rem;
  --radius-card:.5rem;
  --line-height:1.3;
  --tracking:-.03rem;

  --font-serif:"Boldflare","Fraunces",serif;
  --font-sans:"Bricolage",system-ui,sans-serif;
}
@media (min-width:1025px){:root{--global-padding:2rem}}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:12px;scroll-behavior:auto}
@media (max-width:599px){html{font-size:clamp(12px,4.27vw,21.3px)}} /* donor fixed ~500px mobile canvas */
body{
  background:var(--base);color:var(--ink);
  font-family:var(--font-sans);font-size:1.25rem;line-height:var(--line-height);
  letter-spacing:var(--tracking);overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{padding-left:var(--global-padding);padding-right:var(--global-padding)}
.section{margin-top:var(--margin-section)}

/* JS-gated reveal states (donor .once-inview system) */
html.js [data-anim]{opacity:0}
html.js [data-anim="fadein-y"]{transform:translateY(2.5rem)}
html.js [data-anim].in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(0,.55,.45,1),transform .8s cubic-bezier(0,.55,.45,1)}
html.js [data-anim="title"] .w{display:inline-block;opacity:0;transform:translateY(110%)}
html.js [data-anim="title"].in .w{opacity:1;transform:none;transition:opacity .6s cubic-bezier(0,.55,.45,1),transform .6s cubic-bezier(0,.55,.45,1);transition-delay:calc(var(--wi)*.035s)}
html.js .img-reveal{overflow:hidden}
html.js .img-reveal img{transform:translateX(calc(100% + var(--global-padding)))}
html.js .img-reveal.in img{transform:none;transition:transform .8s cubic-bezier(0,.55,.45,1)}
@media (prefers-reduced-motion:reduce){
  html.js [data-anim],html.js [data-anim="title"] .w,html.js .img-reveal img{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- pills / buttons (donor §10) ---------- */
.pill{
  background:var(--white);color:var(--ink);border-radius:100vmax;
  height:3.25rem;padding:0 1.5rem;display:inline-flex;align-items:center;gap:.75rem;
  font-size:1.35rem;font-weight:600;letter-spacing:var(--tracking);
  cursor:pointer;border:0;position:relative;overflow:hidden;white-space:nowrap;
  transition:transform .3s cubic-bezier(0,.55,.45,1);
}
.pill:hover{transform:scale(1.04)}
.pill--ink{background:var(--ink);color:var(--light)}
.pill--blue{background:var(--blue);color:#fff}
.circle-btn{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--white);display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer}
.circle-btn svg{width:1.4rem;height:1.4rem}

/* pill hover sun (donor navbar__work__smile) */
.pill .pill-sun{
  width:2.2rem;height:2.2rem;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  margin-right:-.5rem;
  transform:translateX(140%) rotate(-114deg);opacity:0;
  transition:transform .35s cubic-bezier(0,.55,.45,1),opacity .35s;
}
.pill:hover .pill-sun{transform:none;opacity:1}
.pill .pill-sun svg{width:100%;height:100%}

/* ---------- nav (donor §2) ---------- */
.navbar{
  position:fixed;top:24px;left:var(--global-padding);right:var(--global-padding);
  display:flex;align-items:center;justify-content:space-between;z-index:98;pointer-events:none;
}
.navbar .pill,.navbar .circle-btn{pointer-events:all}
.navbar__logo{
  position:absolute;left:50%;transform:translateX(-50%);
  width:34rem;max-width:38vw;pointer-events:all;color:var(--ink);
  perspective:31.25rem;
}
.navbar__logo svg{width:100%;height:auto;display:block;fill:currentColor}
.navbar__strap{
  position:absolute;left:50%;top:4.4rem;transform:translateX(-50%);
  text-align:center;font-size:1.15rem;line-height:1.25;white-space:nowrap;pointer-events:none;
}
.navbar__strap .serif{font-family:var(--font-serif);font-style:italic;font-size:1.3rem;display:block}
@media (max-width:1024px){.navbar__strap{display:none}.navbar__logo{max-width:46vw}}

/* menu overlay */
.menu{
  position:fixed;inset:0;background:var(--ink);color:var(--light);z-index:99;
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--global-padding);
  clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.7,0,.3,1);
}
.menu.open{clip-path:inset(0)}
.menu a{font-family:var(--font-serif);font-size:5rem;line-height:1.15;letter-spacing:-.06rem;width:max-content}
.menu a:hover{font-style:italic;color:var(--base)}
.menu__meta{margin-top:4rem;display:flex;gap:4rem;flex-wrap:wrap;font-size:1.2rem;color:var(--silver)}
.menu__close{position:absolute;top:24px;right:var(--global-padding)}
@media (max-width:599px){.menu a{font-size:3.4rem}}

/* ---------- hero (donor §3) ---------- */
.hero{position:relative;display:flex;flex-direction:column;padding-top:11rem;min-height:92vh}
.hero__wordmark{width:100%;color:var(--ink);margin:0;display:block;white-space:nowrap;
  font-family:var(--font-serif);font-weight:600;text-transform:uppercase;letter-spacing:-.03em;line-height:1;
  font-size:5.2vw}
.hero__wordmark>span{display:inline}
.hero__wordmark .hw-sun{width:.6em;height:.6em;display:inline-block;vertical-align:middle;color:var(--ink);margin:0 .1em}
.hero__wordmark .hw-sun svg{width:100%;height:100%;overflow:visible;fill:currentColor}
@media (max-width:599px){.hero__wordmark{white-space:normal;text-align:center;font-size:8.5vw}}
.hero__stage{position:relative;flex:1;min-height:34rem;margin-top:2rem}
.hero__card{
  position:absolute;left:0;bottom:2rem;width:24rem;border-radius:var(--radius-card);overflow:hidden;
}
.hero__strap-m{display:none}
@media (max-width:1024px){
  .hero{min-height:0}
  .hero__strap-m{display:block;text-align:center;margin-top:2rem;font-size:1.4rem}
  .hero__strap-m .serif{font-family:var(--font-serif);font-style:italic}
}
@media (max-width:599px){.hero__card{position:static;width:100%;margin-top:3rem}}

/* embossed sun coaster (approved example element) */
.coaster{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:29rem;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#FFD04A 0%,#FFC61A 55%,#F5B90D 100%);
  box-shadow:22px 26px 55px rgba(125,84,0,.22),-18px -20px 45px rgba(255,244,200,.55),inset 0 0 0 1px rgba(255,235,170,.25);
  animation:coasterFloat 7s ease-in-out infinite;
}
.coaster__ring{position:absolute;inset:5.5%;border-radius:50%;
  box-shadow:inset 4px 5px 9px rgba(125,84,0,.28),inset -4px -5px 9px rgba(255,244,200,.75)}
.coaster svg{position:absolute;inset:11%;width:78%;height:78%;overflow:visible}
.coaster .emb{fill:#EDB70E;filter:drop-shadow(2px 3px 2.5px rgba(125,84,0,.38)) drop-shadow(-2px -3px 2.5px rgba(255,246,205,.95))}
@keyframes coasterFloat{0%,100%{transform:translate(-50%,-50%) rotate(-2.5deg)}50%{transform:translate(-50%,-52%) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.coaster{animation:none}}
@media (max-width:599px){.coaster{width:20rem;position:relative;left:auto;top:auto;transform:none;margin:4rem auto 0}}

/* ---------- facts (donor §4, stats swiper removed per owner) ---------- */
.facts{display:flex;flex-direction:column;gap:3rem}
.facts__statement{
  font-family:var(--font-sans);font-weight:400;font-size:6rem;line-height:1;letter-spacing:-.06rem;max-width:88rem;
}
.facts__statement em{font-family:var(--font-serif);font-style:italic;font-weight:400}
@media (max-width:599px){.facts__statement{font-size:3.2rem}}

/* ---------- section label ---------- */
.label{font-size:2rem;font-weight:600;letter-spacing:normal}
.label--serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-.02rem}

/* ---------- service rows (donor §5) ---------- */
.svc-rows{display:flex;flex-direction:column;margin-top:var(--margin-sub)}
.svc{
  width:100%;padding:var(--global-padding);
  display:flex;justify-content:space-between;align-items:center;gap:6rem;min-height:26rem;
}
.svc--1{background:var(--row-1)}
.svc--2{background:var(--row-2)}
.svc--3{background:var(--row-3)}
.svc--4{background:var(--row-4);color:var(--light)}
.svc__title{font-family:var(--font-sans);font-size:8.75rem;font-weight:600;letter-spacing:-.175rem;line-height:1;flex:none}
.svc__mid{font-family:var(--font-serif);font-size:2rem;line-height:1.35;letter-spacing:-.02rem;max-width:31.5rem}
.svc__small{font-size:1.125rem;max-width:17.6rem;line-height:1.9;opacity:.9}
.svc__small a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:transparent;transition:text-decoration-color .25s}
.svc__small a:hover{text-decoration-color:currentColor}
a.svc__title{cursor:pointer;transition:opacity .25s}
a.svc__title:hover{opacity:.72}
a.svc__img{cursor:pointer}
.svc__img{width:22rem;flex:none;border-radius:var(--radius-card);overflow:hidden}
.svc__img img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:1024px){
  .svc{flex-wrap:wrap;gap:2.5rem;min-height:0;padding-top:4rem;padding-bottom:4rem}
  .svc__title{font-size:5rem;letter-spacing:-.1rem;width:100%}
  .svc__img{width:100%}
}

/* ---------- works / resource cards (donor §6) ---------- */
.works__title{font-size:6rem;font-weight:400;line-height:1.05;letter-spacing:-.06rem;max-width:80rem}
.works__title .sub{display:block;font-family:var(--font-serif);font-style:italic}
.works__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:var(--margin-sub);
}
.work-card{display:block;border-radius:var(--radius-card);overflow:hidden;position:relative;background:var(--light)}
.work-card img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .6s cubic-bezier(0,.55,.45,1)}
.work-card:hover img{transform:scale(1.045)}
.work-card__meta{position:absolute;left:1.25rem;bottom:1.25rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.work-card__title{background:var(--white);border-radius:100vmax;padding:.7rem 1.4rem;font-weight:600;font-size:1.35rem}
.work-card__tags{background:rgba(35,42,43,.85);color:var(--light);border-radius:100vmax;padding:.55rem 1.2rem;font-size:1.05rem}
@media (max-width:1024px){.works__grid{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.works__grid{grid-template-columns:1fr}.works__title{font-size:3.2rem}}

/* ---------- trending (donor §7) ---------- */
.trending{background:var(--light);padding:var(--margin-section) 0;margin-top:var(--margin-section)}
.trending__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.trending__title{font-size:6rem;font-weight:600;letter-spacing:-.06rem;line-height:1}
.trending__swiper{margin-top:var(--margin-sub);overflow:hidden;cursor:grab}
.trending__track{display:flex;gap:1.5rem;padding:0 var(--global-padding);will-change:transform}
.t-card{flex:0 0 30rem;background:var(--white);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 1px 0 rgba(35,42,43,.06)}
.t-card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.t-card__body{padding:1.5rem}
.t-card__tag{font-size:1rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.05rem}
.t-card__title{font-family:var(--font-serif);font-size:1.9rem;line-height:1.25;margin-top:.75rem}
@media (max-width:599px){.trending__title{font-size:3rem}.t-card{flex-basis:24rem}}

/* ---------- CTA cards (donor §9 footer cards) ---------- */
.cta-cards{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem}
.cta-card{border-radius:var(--radius-card);padding:2.5rem;display:flex;flex-direction:column;justify-content:space-between;min-height:34rem;position:relative;overflow:hidden}
.cta-card--ink{background:var(--ink);color:var(--light)}
.cta-card--blue{background:var(--row-1);color:var(--ink)}
.cta-card__kicker{font-size:1.6rem;font-weight:600}
.cta-card__kicker .serif{display:block;font-family:var(--font-serif);font-weight:400;font-style:normal;font-size:1.9rem;margin-top:.4rem}
.cta-card__big{font-size:5.5rem;font-weight:600;letter-spacing:-.12rem;line-height:.95}
@media (max-width:1024px){.cta-cards{grid-template-columns:1fr}.cta-card{min-height:24rem}}

/* ---------- footer (donor §9) ---------- */
.footer{margin-top:var(--margin-section);padding-bottom:2rem}
.footer__links{display:flex;gap:6rem;flex-wrap:wrap;margin-top:var(--margin-section)}
.footer__col h4{font-size:1.2rem;font-weight:600;text-transform:uppercase;letter-spacing:.06rem;opacity:.6;margin-bottom:1.25rem}
.footer__col a{display:block;font-size:1.5rem;line-height:2;width:max-content;position:relative}
.footer__col a:after{content:"";position:absolute;left:0;bottom:.2rem;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(0,.55,.45,1)}
.footer__col a:hover:after{transform:scaleX(1);transform-origin:left}
.footer__wordmark{margin-top:var(--margin-section);color:var(--ink)}
.footer__wordmark svg{width:100%;height:auto;display:block;fill:currentColor}
.footer__end{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:3rem;font-size:1.1rem}
.footer__end .serif{font-family:var(--font-serif);font-size:1.3rem}
.footer__legal{margin-top:2rem;font-size:1rem;opacity:.6;max-width:80rem;line-height:1.6}

/* ---------- inner pages ---------- */
.page-hero{padding-top:13rem}
.page-hero h1{font-family:var(--font-serif);font-size:7.5rem;font-weight:600;line-height:.98;letter-spacing:-.1rem;max-width:90rem}
.page-hero h1 em{font-style:italic;font-weight:400}
.page-hero .lede{margin-top:2.5rem;font-size:1.9rem;max-width:52rem;line-height:1.5}
@media (max-width:599px){.page-hero h1{font-size:3.8rem}.page-hero .lede{font-size:1.6rem}}

.res-list{display:flex;flex-direction:column;margin-top:var(--margin-sub);border-top:1px solid rgba(35,42,43,.25)}
.res-item{
  display:flex;justify-content:space-between;align-items:center;gap:3rem;
  padding:2.2rem 0;border-bottom:1px solid rgba(35,42,43,.25);
}
.res-item__name{font-size:2.2rem;font-weight:600;letter-spacing:-.05rem}
.res-item__desc{font-size:1.35rem;opacity:.8;max-width:42rem}
.res-item .pill{flex:none}
@media (max-width:1024px){.res-item{flex-wrap:wrap;gap:1rem}}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:var(--margin-sub)}
.grid-card{background:var(--light);border-radius:var(--radius-card);padding:2.25rem;display:flex;flex-direction:column;gap:1.25rem;min-height:20rem}
.grid-card--blue{background:var(--row-1)}
.grid-card--yellow{background:var(--row-3)}
.grid-card--ink{background:var(--ink);color:var(--light)}
.grid-card h3{font-family:var(--font-serif);font-size:2.4rem;font-weight:600;letter-spacing:-.04rem;line-height:1.1}
.grid-card p{font-size:1.3rem;line-height:1.55;opacity:.85}
.grid-card .pill{margin-top:auto;align-self:flex-start}
@media (max-width:1024px){.card-grid{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.card-grid{grid-template-columns:1fr}}

/* states index */
.states-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:var(--margin-sub)}
.state-chip{
  background:var(--light);border-radius:var(--radius-card);padding:1.6rem 1.8rem;
  font-size:1.6rem;font-weight:600;letter-spacing:-.03rem;display:flex;justify-content:space-between;align-items:center;
  transition:transform .3s cubic-bezier(0,.55,.45,1),background .3s;
}
.state-chip:hover{transform:translateY(-3px);background:var(--white)}
.state-chip span{font-family:var(--font-serif);font-weight:400;opacity:.5;font-size:1.2rem}
@media (max-width:1024px){.states-grid{grid-template-columns:1fr 1fr}}

/* article/prose */
.prose{max-width:66rem;margin-top:var(--margin-sub);font-size:1.5rem;line-height:1.7}
.prose h2{font-family:var(--font-serif);font-size:3rem;line-height:1.15;margin:3.5rem 0 1.25rem;letter-spacing:-.05rem}
.prose p{margin-bottom:1.5rem}
.prose ul{margin:0 0 1.5rem 1.5rem;list-style:disc}
.prose li{margin-bottom:.6rem}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:.25em}
.prose strong{font-weight:600}

/* preloader */
.preloader{
  position:fixed;inset:0;background:var(--base);z-index:200;
  display:flex;align-items:center;justify-content:center;
}
.preloader.done{opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
html:not(.js) .preloader{display:none}
.pl-lockup{display:flex;align-items:center;justify-content:center;gap:.4em;flex-wrap:wrap;
  color:var(--ink);font-family:var(--font-serif);font-weight:600;
  font-size:clamp(2.2rem,7.2vw,9rem);letter-spacing:-.03em;line-height:1;padding:0 var(--global-padding)}
.pl-left,.pl-right{display:inline-flex;overflow:hidden}
.pl-w{display:inline-block}
.pl-sun{width:.9em;height:.9em;flex:none;color:var(--ink)}
.pl-sun svg{width:100%;height:100%;overflow:visible}
@media (max-width:599px){.pl-lockup{gap:.3em}.pl-left,.pl-right{flex-wrap:wrap;justify-content:center}}

/* skip link + focus */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:1rem 1.5rem;z-index:300}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}