/* Page-scoped components for the 2-day workshop page only.
   Everything shared (nav, footer, buttons, type, forms) comes from
   /assets/css/site.css — this file must never restyle those. */
.hero__bg{position:absolute; inset:0; z-index:0;}
.hero__grid{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(120% 90% at 70% 0%,#000 30%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 70% 0%,#000 30%,transparent 75%);}
.hero__orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;}
.hero__orb.a{width:46vw; height:46vw; top:-14vw; right:-8vw; background:radial-gradient(circle,var(--accent),transparent 65%);}
.hero__orb.b{width:34vw; height:34vw; bottom:-12vw; left:-10vw; background:radial-gradient(circle,var(--accent-deep),transparent 65%); opacity:.4;}
.scrollcue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:var(--fs-xs); letter-spacing:.25em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:10px;}
.scrollcue .bar{width:1px; height:42px; background:linear-gradient(var(--accent),transparent); animation:cue 2.2s var(--ease) infinite; transform-origin:top;}
/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line); padding:22px 0; overflow:hidden; white-space:nowrap; background:var(--bg-2);}
.marquee__track{display:inline-flex; gap:48px; animation:marq 32s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee span{font-family:var(--ff-display); font-weight:600; font-size:clamp(1.1rem,2vw,1.7rem);
  color:var(--faint); display:inline-flex; align-items:center; gap:48px;}
.marquee span::after{content:"✦"; color:var(--accent); font-size:.7em;}
/* ============================================================
   SERVICE CARDS
   ============================================================ */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; margin-top:54px;}
/* ---------- split layout ---------- */
.split2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:start;}
.split2{grid-template-columns:1fr; gap:30px;}
/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.phead{position:relative; padding-top:calc(var(--nav-h) + clamp(50px,9vw,110px)); padding-bottom:clamp(40px,6vw,80px); overflow:hidden;}
.phead__bg{position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:60px 60px; -webkit-mask-image:radial-gradient(90% 100% at 30% 0%,#000,transparent 72%);
  mask-image:radial-gradient(90% 100% at 30% 0%,#000,transparent 72%);}
.phead__orb{position:absolute; width:40vw; height:40vw; top:-16vw; right:-10vw; border-radius:50%; z-index:0;
  background:radial-gradient(circle,var(--accent),transparent 65%); filter:blur(80px); opacity:.32;}
.crumb{font-family:var(--ff-display); font-size:var(--fs-xs); letter-spacing:.06em; color:var(--muted); margin-bottom:22px;}
.crumb a:hover{color:var(--accent);}
/* bento / cards grid generic */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;}
.card{padding:32px 28px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  transition:transform .5s var(--ease-out), border-color .5s, background .5s;}
.card:hover{transform:translateY(-5px); border-color:rgba(255,106,0,.3); background:var(--surface-2);}
.card__k{font-family:var(--ff-display); font-weight:700; color:var(--accent); font-size:var(--fs-xs); margin-bottom:14px;}
.card h3{font-family:var(--ff-display); font-weight:600; font-size:1.22rem; margin-bottom:10px;}
.card p{color:var(--muted); font-size:var(--fs-sm);}
.member{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); transition:transform .5s var(--ease-out), border-color .5s;}
.member:hover{transform:translateY(-5px); border-color:rgba(255,106,0,.3);}
.member__img{aspect-ratio:1/1; overflow:hidden; background:var(--surface-2);}
.member__img img{width:100%; height:100%; object-fit:cover; filter:grayscale(.4) contrast(1.05); transition:filter .5s, transform 1s var(--ease-out);}
.member:hover .member__img img{filter:grayscale(0); transform:scale(1.04);}
.member__b{padding:20px 22px;}
.member__b h4{font-family:var(--ff-display); font-weight:600; font-size:1.12rem;}
.member__b span{color:var(--accent); font-size:var(--fs-xs); font-family:var(--ff-display);}
.member__b p{color:var(--muted); font-size:var(--fs-xs); margin-top:10px;}
/* contact */
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:start;}
.cgrid{grid-template-columns:1fr; gap:40px;}
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
hr.div{border:0; border-top:1px solid var(--line); margin:0;}
.fact{background:var(--bg-2); padding:26px 24px;}
.fact__k{font-family:var(--ff-display); font-weight:700; font-size:1.7rem; letter-spacing:-.02em; color:var(--ink); line-height:1;}
.fact__l{color:var(--muted); font-size:var(--fs-xs); margin-top:9px;}
.ag{display:grid; grid-template-columns:140px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--line);}
.ag:last-child{border-bottom:1px solid var(--line);}
.ag__t{font-family:var(--ff-display); font-weight:600; font-size:var(--fs-sm); color:var(--accent); padding-top:3px;}
.ag__t span{display:block; color:var(--muted); font-weight:500; font-size:var(--fs-xs); margin-top:4px;}
.ag__h{font-family:var(--ff-display); font-weight:600; font-size:1.2rem; color:var(--ink); margin-bottom:9px;}
.ag__p{color:var(--muted); font-size:var(--fs-sm); max-width:60ch;}
.ag__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.ag__tags span{font-size:var(--fs-xs); color:var(--ink-dim); border:1px solid var(--line); border-radius:100px; padding:5px 12px;}
/* day-2 "coming soon" panel */
.soonbox{margin-top:40px; border:1px dashed var(--line); border-radius:var(--r-lg);
  background:linear-gradient(140deg,var(--bg-2),var(--surface)); padding:clamp(34px,5vw,64px); text-align:center;}
.soonbox h3{font-family:var(--ff-display); font-weight:600; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.02em; margin-bottom:14px;}
.soonbox p{color:var(--muted); max-width:54ch; margin:0 auto;}
.soonbox .preview{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:34px; text-align:left;}
.soonbox .preview div{border:1px solid var(--line-2); border-radius:var(--r); padding:18px; background:var(--bg-2); color:var(--ink-dim); font-size:var(--fs-xs);}
.soonbox .preview div b{display:block; color:var(--muted); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; font-family:var(--ff-display);}
/* testimonial / social proof */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:46px;}
.quote{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:32px 28px;}
.quote p{color:var(--ink-dim); font-size:1.02rem; line-height:1.6;}
.quote__by{margin-top:22px; display:flex; align-items:center; gap:13px;}
.quote__av{width:42px; height:42px; border-radius:100px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--accent-deep),var(--surface-2)); color:#fff; font-family:var(--ff-display); font-weight:700; font-size:var(--fs-sm);}
.quote__by h5{font-family:var(--ff-display); font-weight:600; font-size:var(--fs-sm); color:var(--ink);}
.quote__by span{color:var(--muted); font-size:var(--fs-xs);}
.quote--ph{border-style:dashed; opacity:.85;}
.ag{grid-template-columns:1fr; gap:8px;}
.ag__t{padding-top:0;}

/* --- narrow-screen containment (house rule: 0 pan failures at 320px) --- */
.phead__orb{ display:none; }
@media (max-width:640px){
  .price-card,.preview,.spec,.card,.fact{ max-width:100%; }
  .pill,.note,.crumb{ white-space:normal; max-width:100%; }
  .preview,.price-card{ overflow-wrap:anywhere; }
}
*{ min-width:0; }

.sst{ font-size:var(--fs-xs); color:var(--accent); font-weight:600; letter-spacing:0; }