/*
  WORTH THE WHILE · site styles
  Audience: people who arrive from a studio (Polymathing Studios or Workoutable) and want to
  know what stands behind it. Order: a welcome with the five beliefs as icons; the beliefs as
  stacking colour cards; a quiet prose block; what we make. No photography: colour, shape and
  the studios' own logos do the work. Mobile-first. Logo colours are never altered.
*/

:root{
  /* House palette (brand-foundation v1.3) */
  --tomato:#FF4F2E;
  --tomato-soft:#FF6A4D;
  --marigold:#FFB627;
  --pink:#FFC7D6;
  --coral:#FF9270;
  --peach:#FFAE8A;
  --berry:#8A1E4F;
  --violet:#7B3FA0;
  --ink:#1A1414;
  --paper:#FFFFFF;

  /* Exact colours of the Worth the While logo */
  --logo-orange:#FF751F;
  --logo-coral:#FF5757;
  --logo-cyan:#0CC0DF;
  --logo-marigold:#FFBD59;
  --logo-ink:#121212;

  /* Workoutable logo pastels and slate */
  --wk-yellow:#FFEB99;
  --wk-cyan:#C2F6FF;
  --wk-periwinkle:#C2CDFF;
  --wk-lavender:#E2CBF6;
  --wk-pink:#FFC2E8;
  --wk-slate:#2A2F3E;

  --r-lg:clamp(24px,3.6vw,40px);
  --r-md:clamp(18px,2.4vw,26px);
  --gutter:clamp(16px,4vw,32px);
  --header-h:60px;

  --display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --logo-font:"Poppins","Helvetica Neue",Arial,sans-serif;
  --text:"Figtree","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:clamp(16px,.5vw + 14px,18px);line-height:1.55;overflow-x:clip}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--logo-cyan);outline-offset:3px;border-radius:6px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}

.disp{font-family:var(--display);font-weight:900;text-transform:none;letter-spacing:-.02em;word-spacing:.08em}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px);background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);transition:box-shadow .2s ease}
.site-header.scrolled{box-shadow:0 1px 0 rgba(26,20,20,.08),0 10px 28px -18px rgba(26,20,20,.4)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h)}
.brand{display:block;line-height:0}
.brand img{height:52px;width:auto}

.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer}
.menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{display:block;width:20px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .2s ease}
.menu-btn .bars{position:relative}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0}
.menu-btn .bars::before{top:-7px}
.menu-btn .bars::after{top:7px}
.menu-btn[aria-expanded="true"] .bars{background:transparent}
.menu-btn[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}

.nav{display:flex;gap:6px;font-family:var(--display);font-weight:700;font-size:14px}
.nav a{text-decoration:none;padding:11px 20px;border-radius:999px;background:rgba(26,20,20,.06);transition:background .15s ease,color .15s ease}
.nav a:hover,.nav a[aria-current="true"]{background:var(--ink);color:#fff}
.nav .nav-extra{display:none}

@media (min-width:760px){
  :root{--header-h:80px}
  .brand img{height:64px}
}
@media (max-width:759px){
  .js .menu-btn{display:inline-flex}
  .js .nav{display:none;position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top,0px)) 0 0 0;z-index:55;flex-direction:column;gap:0;padding:12px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));background:#fff;overflow:auto}
  .js .nav.open{display:flex}
  .js .nav a,.js .nav .nav-extra{display:block;padding:18px 0;border-radius:0;background:none;border-bottom:2px solid var(--ink);font-weight:900;text-transform:none;letter-spacing:-.03em;font-size:clamp(28px,8.6vw,48px);line-height:1}
  .js .nav a:hover,.js .nav a[aria-current="true"]{background:none;color:var(--tomato)}
  .js .nav .nav-extra{font-weight:700;font-variation-settings:"wdth" 100;text-transform:none;font-size:clamp(20px,5.6vw,28px);border-bottom:1px solid rgba(26,20,20,.2);padding:16px 0}
}

/* ============ HERO: one contained card ============ */
.hero-section{padding-block:clamp(6px,1.5vw,14px) 0}
.hero{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;display:flex;flex-direction:column;gap:clamp(12px,2vw,20px);padding:clamp(28px,5vw,64px);background:var(--tomato);color:#fff;border-radius:var(--r-lg)}
.hero::after{content:"";position:absolute;z-index:-1;width:30%;aspect-ratio:1;right:-7%;bottom:-62%;border-radius:50%;background:var(--marigold)}
.hero h1{font-family:var(--logo-font);word-spacing:.04em;font-weight:900;font-size:clamp(40px,19cqi,112px);line-height:.95;letter-spacing:-.025em;text-transform:none}
.hero h1 span{display:block}
@media (min-width:640px){ .hero h1{font-size:clamp(56px,10cqi,128px)} .hero h1 span{display:inline} }
.tagline{max-width:22em;font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 100;font-size:clamp(18px,2.4vw,28px);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.pills{display:flex;flex-wrap:nowrap;gap:clamp(5px,1.6vw,8px);margin-top:clamp(6px,1.4vw,14px)}
.pills li{white-space:nowrap;font-size:clamp(10px,3.1vw,17px);padding:clamp(9px,2.6vw,12px) clamp(10px,3.2vw,22px);border-radius:999px;letter-spacing:-.02em;font-variation-settings:"wdth" 108}
.pills li:nth-child(1){background:var(--ink);color:#fff}
.pills li:nth-child(2){background:var(--marigold);color:var(--ink)}
.pills li:nth-child(3){background:var(--pink);color:var(--ink)}

@media (min-width:900px){ .hero{min-height:clamp(380px,32vw,470px);justify-content:center;gap:24px;padding:clamp(48px,5vw,80px)} .tagline{font-size:clamp(24px,2.4vw,34px)}
  .hero{min-height:clamp(440px,37vw,540px)}
  .hero h1{font-size:clamp(72px,11cqi,136px)} .hero h1 span{display:block}
  .hero::after{width:36%;right:5%;bottom:-34%}
  .hero::before{content:"";position:absolute;z-index:-1;width:15%;aspect-ratio:1;right:22%;top:9%;border-radius:50%;background:var(--pink)} }

/* ============ SECTIONS ============ */
.section{padding-top:clamp(12px,1.6vw,20px)}
.section--last{padding-bottom:clamp(56px,8vw,104px)}
.section-title{font-size:clamp(26px,3.8vw,48px);line-height:1;margin-bottom:clamp(18px,2.6vw,32px);text-wrap:balance;letter-spacing:-.03em}

/* ============ BELIEFS: five small cards ============ */
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.belief{--n:var(--ink);display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-areas:"art title" "art text";column-gap:18px;row-gap:4px;align-content:center;align-items:start;padding:clamp(16px,2.4vw,24px);border-radius:var(--r-md);color:var(--ink)}
.belief h3{grid-area:title;align-self:end;font-size:clamp(20px,2.4vw,26px);font-weight:900;font-variation-settings:"wdth" 112;line-height:1;letter-spacing:-.03em;color:var(--n)}
.belief p{grid-area:text;font-size:16px;line-height:1.4;font-weight:500}
.belief .art{grid-area:art;align-self:center;width:84px;height:84px}
.belief--beauty{background:var(--berry);--n:#fff;color:#fff}
.belief--play{background:var(--marigold)}
.belief--intent{background:var(--peach)}
.belief--time{background:var(--pink)}
.belief--connection{background:var(--violet);--n:#fff;color:#fff}
@media (min-width:640px) and (max-width:1023px){
  .stack{grid-template-columns:repeat(6,minmax(0,1fr))}
  .belief{grid-column:span 3}
  .belief--connection{grid-column:span 6}
}
@media (min-width:1024px){
  .stack{grid-template-columns:repeat(5,minmax(0,1fr))}
  .belief{grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "title" "text";row-gap:10px;padding:22px 20px 24px;align-content:start}
  .belief .art{width:min(100%,128px);height:auto;aspect-ratio:1;margin-bottom:10px;align-self:start}
  .belief h3{align-self:start;font-size:17px;letter-spacing:-.035em}
}
@media (min-width:1024px){ .belief p{font-size:17px} }
@media (min-width:1280px){ .belief h3{font-size:24px} }

/* ============ POEM: a shareable card, black, logo bottom right ============ */
.prose{position:relative;margin-top:clamp(12px,1.6vw,20px);padding:clamp(24px,4vw,56px);background:var(--logo-ink);color:#fff;border-radius:var(--r-lg);text-align:left}
.poem{display:flex;flex-direction:column;gap:clamp(4px,.8vw,8px);padding-right:clamp(34px,6vw,64px);font-family:var(--display);font-weight:700;font-size:clamp(19px,3.3vw,38px);line-height:1.2;letter-spacing:-.015em}
.poem>span{display:block;text-wrap:balance}
.prose .r{color:var(--logo-marigold)}
.poem-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin-top:clamp(24px,3.6vw,40px)}
.prose .close{color:var(--tomato-soft);font-size:clamp(17px,2.6vw,28px);line-height:1.1;letter-spacing:-.02em}
.poem-logo{display:block;margin-left:auto;line-height:0}
.poem-logo img{height:34px;width:auto}
@media (min-width:760px){ .poem-logo img{height:clamp(52px,6.4vw,84px)} }
.prose{isolation:isolate;overflow:hidden}
.prose::before{content:"";position:absolute;z-index:-1;width:36%;aspect-ratio:1;right:-12%;top:-10%;border-radius:50%;background:var(--berry)}
.prose::after{content:"";position:absolute;z-index:-1;width:20%;aspect-ratio:1;right:6%;bottom:26%;border-radius:50%;background:var(--violet)}
@media (min-width:900px){
  .prose::before{width:30%;right:-6%;top:-14%}
  .prose::after{width:17%;right:22%;top:34%;bottom:auto}
}
.share{display:none;position:absolute;top:clamp(16px,2.6vw,32px);right:clamp(16px,2.6vw,32px);place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--logo-marigold);cursor:pointer}
.share::after{content:"";position:absolute;inset:-6px}
@media (min-width:760px){ .share{width:48px;height:48px} }
.js .share{display:grid}
.share svg{width:16px;height:16px;fill:none;stroke:var(--logo-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:760px){ .share svg{width:22px;height:22px} }

/* ============ STUDIOS: logo and a line ============ */
.studios{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:640px){ .studios{grid-template-columns:repeat(2,minmax(0,1fr))} }
.studio{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);color:var(--ink);text-decoration:none;background:#fff;border:2px solid rgba(26,20,20,.1)}
.studio:focus-visible{outline:4px solid var(--logo-cyan);outline-offset:4px}
.studio--poly{--body:var(--logo-marigold);--ico:#fff}
.studio--work{--body:var(--wk-cyan);--ico:var(--logo-cyan)}
/* each studio's own logo, unmodified, filling the top of the card on white */
.studio-logo{display:grid;place-items:center;height:clamp(170px,22vw,250px);background:#fff}
.studio-logo img{height:clamp(84px,11vw,132px);width:auto;max-width:84%}
.studio-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vw,20px);padding:clamp(20px,2.8vw,30px);background:var(--body)}
.studio-desc{max-width:26em;font-size:clamp(17px,.6vw + 14px,20px);line-height:1.4;font-weight:500}
.cta{display:inline-flex;align-items:center;gap:14px;margin-top:auto;padding:5px 5px 5px 22px;min-height:48px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:15px;text-decoration:none}
.cta .ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--ico,var(--logo-marigold))}
.cta svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ============ CONTACT ============ */
.contact{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,4.4vw,48px);background:var(--pink);border-radius:var(--r-lg)}
@media (min-width:760px){ .contact{flex-direction:row;align-items:center;gap:clamp(24px,4vw,56px)} .contact h2{flex:0 0 28%} }
.contact h2{font-size:clamp(26px,3.8vw,48px);line-height:1;letter-spacing:-.03em}
.msg{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding:clamp(14px,2vw,20px);background:#fff;border-radius:var(--r-md)}
.msg:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.msg textarea{width:100%;min-height:110px;resize:vertical;border:0;outline:0;background:transparent;color:var(--ink);font:500 clamp(17px,.6vw + 14px,20px)/1.4 var(--text)}
.msg textarea::placeholder{color:rgba(26,20,20,.5)}
.msg-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.msg-status{min-width:0;font-weight:600;font-size:15px}
.msg .cta{margin:0 0 0 auto;border:0;cursor:pointer;--ico:var(--logo-marigold)}

/* ============ FOOTER ============ */
.site-footer{background:var(--logo-ink);color:#fff;padding:clamp(44px,7vw,88px) 0 calc(28px + env(safe-area-inset-bottom,0px))}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,48px)}
.foot-brand{display:block;line-height:0;width:min(320px,76%)}
.foot-brand img{width:100%;height:auto}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.foot-cols a{display:block;padding:7px 0;text-decoration:none;font-weight:600;opacity:.9}
.foot-cols a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--logo-marigold)}
.foot-h{margin-bottom:8px;font-family:var(--display);font-weight:800;font-size:15px;color:var(--logo-marigold)}
.foot-small{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;opacity:.75}
@media (min-width:900px){
  .footer-grid{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .foot-cols{gap:56px}
  .foot-small{grid-column:1/-1}
}

/* ============ MOTION PREFERENCES ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}