/* Hey Workshop  ·  standing pages (values, contact, legal).
   Built by 04 Social & Content/Site Pages/build_site_pages.py
   Layered on quiz.css, which owns the tokens and the .hw-* base. */

.pg-page{background:var(--periwinkle-bg,#2C3568)}
.pg-wrap{max-width:1080px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}

/* ---------- hero ---------- */
.pg-hero{max-width:1080px;margin:0 auto;padding:clamp(28px,5vw,58px) clamp(18px,4vw,44px) clamp(8px,2vw,18px)}
.pg-h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.03;letter-spacing:-.03em;margin:.5rem 0 .9rem;max-width:16ch}
.pg-dek{font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.55;color:var(--ink-soft);max-width:58ch}
.pg-updated{margin-top:1rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- blocks ---------- */
.pg-sec{margin-top:clamp(34px,5vw,62px)}
.pg-h2{font-family:var(--sans);font-weight:800;font-size:clamp(1.4rem,2.9vw,2.1rem);line-height:1.1;
  letter-spacing:-.025em;color:var(--ink);margin:.5rem 0 1.1rem;max-width:24ch}
.pg-prose{font-size:1.08rem;line-height:1.65;color:var(--ink-soft);max-width:64ch}
.pg-prose p{margin-bottom:.8em}
.pg-prose b{color:var(--ink);font-weight:600}
.pg-lead{font-family:var(--serif);font-size:1.1rem;line-height:1.6;color:var(--ink-soft);margin-top:.6rem}

.pg-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(20px,3vw,34px)}
.pg-card{background:var(--cream-2);border:1.5px solid rgba(70,88,158,.16);border-radius:18px;
  padding:clamp(20px,2.6vw,30px);box-shadow:0 22px 50px -42px rgba(40,46,90,.5)}
.pg-band{background:var(--cream-2);border:1.5px solid rgba(70,88,158,.16);border-radius:22px;
  padding:clamp(24px,3.4vw,40px)}

/* ---------- the five values ---------- */
.pg-pillars{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pg-pillar{display:flex;gap:18px;align-items:flex-start;background:var(--cream-2);
  border:1.5px solid rgba(70,88,158,.16);border-radius:18px;padding:clamp(18px,2.4vw,26px);
  transition:border-color .2s,transform .2s}
.pg-pillar:hover{border-color:rgba(70,88,158,.42);transform:translateY(-2px)}
.pg-pnum{font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.1em;color:var(--peri-deep);
  background:rgba(109,131,189,.14);padding:8px 11px;border-radius:10px;flex:none}
.pg-pillar h3{font-family:var(--sans);font-weight:800;font-size:1.14rem;letter-spacing:-.015em;color:var(--ink);margin-bottom:.35rem}
.pg-pillar p{font-family:var(--serif);font-size:1rem;line-height:1.55;color:var(--ink-soft);max-width:70ch}

/* ---------- manifesto ---------- */
.pg-man{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px dashed rgba(70,88,158,.26)}
.pg-man li{font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.5;
  color:var(--ink);padding:.85em 0 .85em 1.6rem;border-bottom:1px dashed rgba(70,88,158,.26);position:relative}
.pg-man li::before{content:"";position:absolute;left:0;top:1.35em;width:8px;height:8px;border-radius:50%;
  background:var(--hl-lime);box-shadow:0 0 0 3px rgba(207,243,107,.3)}

/* ---------- photo story (the #realwork look: tilted photo, lime block, dot circle, stamps) ---------- */
.pg-story{
  display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:clamp(30px,5vw,74px);align-items:center;margin-top:clamp(44px,6vw,80px);
}
.pg-story.flip{grid-template-columns:minmax(0,1.28fr) minmax(260px,.72fr)}
.pg-story.flip .pg-story-copy{order:2}
.pg-story.flip .pg-photo{order:1}
.pg-story-h{
  font-family:var(--sans);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.6rem);
  line-height:1.08;letter-spacing:-.025em;color:var(--ink);margin:.55rem 0 .9rem;max-width:17ch;
}
.pg-story-p{font-family:var(--serif);font-size:1.06rem;line-height:1.62;color:var(--ink-soft);max-width:38ch}
.pg-photo{position:relative;isolation:isolate;margin:10px 0}
.pg-photo::before{content:"";position:absolute;inset:8% -5% -6% 9%;background:var(--hl-lime);border-radius:34px;transform:rotate(3.2deg);z-index:-2}
.pg-story.flip .pg-photo::before{inset:8% 9% -6% -5%;transform:rotate(-3.2deg)}
.pg-photo::after{content:"";position:absolute;width:28%;aspect-ratio:1;left:-5%;bottom:-8%;
  background:radial-gradient(circle at 35% 35%,#fff 0 7%,transparent 8%),var(--peri-royal);
  border-radius:50%;z-index:-1;opacity:.92}
.pg-story.flip .pg-photo::after{left:auto;right:-5%}
/* height:auto is load-bearing: a lazy img otherwise keeps its height attribute
   as a fixed pixel height and the landscape photo renders squished (2026-07-16) */
.pg-photo img{width:100%;height:auto;aspect-ratio:1400/933;border:9px solid #fff;border-radius:28px;
  box-shadow:0 42px 90px -44px rgba(70,88,158,.7);transform:rotate(-1.1deg)}
.pg-story.flip .pg-photo img{transform:rotate(1.1deg)}
.pg-stamp{
  position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:8px;
  background:var(--ink);color:#fff;font-family:var(--mono);font-weight:500;font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:0 16px 28px -14px rgba(20,20,30,.6);
}
.pg-stamp i{width:8px;height:8px;border-radius:50%;background:var(--hl-lime);box-shadow:0 0 0 3px rgba(207,243,107,.2)}
.pg-stamp.a{top:-3%;left:-2%;transform:rotate(-2deg)}
.pg-stamp.b{bottom:6%;right:-3%;transform:rotate(1.6deg);background:#fff;color:var(--ink)}
.pg-stamp.b i{background:var(--peri-royal);box-shadow:0 0 0 3px rgba(70,88,158,.16)}
@media (max-width:800px){
  .pg-story,.pg-story.flip{grid-template-columns:1fr;gap:22px;max-width:620px;margin-inline:auto}
  .pg-story.flip .pg-story-copy{order:1}
  .pg-story.flip .pg-photo{order:2}
  .pg-photo{margin:14px 12px 6px}
  .pg-stamp.a{left:-1%}
  .pg-stamp.b{right:-1%}
}
@media (max-width:460px){
  .pg-photo img{border-width:6px;border-radius:20px}
  .pg-stamp{font-size:.56rem;padding:8px 10px}
}

/* ---------- contact ---------- */
.pg-mailrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(20px,3vw,34px)}
.pg-mail{display:flex;flex-direction:column;gap:.4rem;justify-content:center;text-decoration:none;
  background:linear-gradient(126deg,#2f3a78,#46589e);border-radius:18px;padding:clamp(22px,3vw,34px);
  box-shadow:0 30px 70px -48px rgba(30,36,80,.9);transition:transform .25s}
.pg-mail:hover{transform:translateY(-3px)}
.pg-mail .hw-kicker{color:var(--hl-lime)}
.pg-mail b{font-family:var(--sans);font-weight:800;font-size:clamp(1.15rem,2.2vw,1.7rem);letter-spacing:-.02em;color:#fff;word-break:break-word}
.pg-mailnote{font-family:var(--serif);font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.86);margin-top:.3rem}
.pg-list{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.7rem}
.pg-list li{font-family:var(--serif);font-size:.99rem;line-height:1.5;color:var(--ink-soft);padding-left:1.15rem;position:relative}
.pg-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--hl-lime)}
.pg-list b{color:var(--ink);font-weight:600}
.pg-handles{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px 14px}
.pg-handles li{display:flex;gap:10px;align-items:baseline;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.pg-handles a{color:var(--peri-deep);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(109,131,189,.4)}
.pg-handles a:hover{color:var(--ink);border-bottom-color:var(--hl-lime)}
.pg-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin-top:.8rem}
.pg-qcard{display:flex;flex-direction:column;gap:.4rem;padding:20px;background:var(--cream-2);
  border:1.5px solid rgba(70,88,158,.16);border-radius:16px;text-decoration:none;transition:border-color .2s,transform .2s}
.pg-qcard:hover{border-color:var(--peri-deep);transform:translateY(-2px)}
.pg-qcard b{font-family:var(--sans);font-weight:800;font-size:1rem;color:var(--ink)}
.pg-qcard span{font-family:var(--serif);font-size:.93rem;line-height:1.45;color:var(--ink-soft)}

/* ---------- social icons: one colour, hover another ---------- */
.pg-socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:1rem}
.pg-socials a{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:rgba(109,131,189,.12);transition:background .2s,transform .2s;
}
.pg-socials svg{width:17px;height:17px;fill:var(--peri-deep);transition:fill .2s}
.pg-socials a:hover{background:var(--ink);transform:translateY(-2px)}
.pg-socials a:hover svg{fill:var(--hl-lime)}
.pg-socials-big{gap:14px;margin-top:1.2rem}
.pg-socials-big a{width:52px;height:52px}
.pg-socials-big svg{width:23px;height:23px}

/* ---------- legal prose ---------- */
.pg-legal{max-width:720px;margin:clamp(16px,3vw,28px) auto 0;font-size:1.08rem;line-height:1.7;color:var(--ink-soft)}
.pg-legal p{margin-bottom:1.05em}
.pg-legal .pg-plain{font-size:1.16rem;line-height:1.6;color:var(--ink);padding:18px 20px;
  background:var(--cream-2);border:1.5px solid rgba(70,88,158,.16);border-left:3px solid var(--hl-lime);border-radius:12px}
.pg-legal h2{font-family:var(--sans);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:var(--ink);margin:2em 0 .55em}
.pg-legal h3{font-family:var(--sans);font-weight:700;font-size:1.05rem;color:var(--ink);margin:1.5em 0 .4em}
.pg-legal ul{margin:0 0 1.1em 1.2em}
.pg-legal li{margin-bottom:.45em}
.pg-legal b{color:var(--ink);font-weight:600}
.pg-legal a{color:var(--peri-royal);text-underline-offset:3px}
.pg-legal a:hover{background:var(--hl-lime);color:var(--ink);text-decoration-color:transparent}

/* ---------- the ask ---------- */
.pg-cta{margin:clamp(38px,5vw,66px) 0 0;padding:clamp(24px,3.4vw,40px);border-radius:22px;color:#fff;
  background:linear-gradient(126deg,#2f3a78,#46589e);box-shadow:0 34px 80px -50px rgba(30,36,80,.9)}
.pg-cta .hw-kicker{color:var(--hl-lime)}
.pg-cta h2{font-family:var(--sans);font-weight:800;font-size:clamp(1.4rem,2.9vw,2.05rem);line-height:1.1;
  letter-spacing:-.025em;margin:.5rem 0 .8rem;color:#fff}
.pg-cta .hw-mk{background:var(--hl-lime);color:var(--ink);padding:0 .16em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pg-cta p{color:rgba(255,255,255,.92);max-width:62ch;font-size:1.02rem;line-height:1.6}
.pg-ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:1.3rem}
.pg-2nd{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.88);text-decoration:none;border-bottom:1px solid rgba(207,243,107,.5);padding-bottom:2px}
.pg-2nd:hover{color:var(--hl-lime)}

/* ---------- footer ---------- */
.pg-foot{max-width:1080px;margin:clamp(44px,6vw,78px) auto 0;padding:clamp(24px,3vw,34px) clamp(18px,4vw,44px) 0;
  border-top:1px solid rgba(70,88,158,.18)}
.pg-footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px}
.pg-foot h4{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.7rem}
.pg-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.pg-foot a{font-family:var(--serif);font-size:.98rem;color:var(--ink-soft);text-decoration:none}
.pg-foot a:hover{color:var(--peri-royal)}
.pg-footbottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;
  margin-top:clamp(22px,3vw,34px);padding:16px 0 22px;border-top:1px solid rgba(70,88,158,.14);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--ink-faint)}
.pg-mini{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pg-mini a{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--ink-faint);text-decoration:none}
.pg-mini a:hover{color:var(--peri-royal);text-decoration:underline}

@media (max-width:760px){
  .pg-two,.pg-mailrow{grid-template-columns:1fr}
}
@media (max-width:520px){
  .pg-pillar{flex-direction:column;gap:10px}
}