/* ---------------------------------------------------------------------------
   Workshop landing page.

   This is a faithful rebuild of the TekMatix event page layout: the same
   sections, in the same order, with the same blocks inside them. Only the
   palette and the typeface change. Everything is scoped under .wtf so none of
   it can reach the rest of the site.

   Colour translation from the old page:
     pink / red gradient   ->  burgundy gradient
     bright red accent     ->  gold, or burgundy on light grounds
     pale pink section     ->  champagne
     beige section         ->  linen
     dark burgundy panels  ->  burgundy-deep
   The eyebrow dashes on the original are drawn as rules here rather than typed
   as em dashes.
--------------------------------------------------------------------------- */

.wtf{ --wtfgrad:linear-gradient(135deg,#8E2350 0%,#691636 46%,#3D0C20 100%); }

/* ---------- shared section furniture ---------- */
.wtf section{ padding:clamp(58px,7vw,104px) 0 }
.wtf .wrap{ width:min(1180px,88vw);margin:0 auto }

/* eyebrow with a rule either side, as on the original */
.wtf .wey{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--gold-ink);
}
.wtf .wey:before,.wtf .wey:after{
  content:"";height:1px;width:22px;background:currentColor;opacity:.75;flex:0 0 auto;
}
.wtf .wey:after{ flex:0 0 22px }
.wtf .ctr .wey{ justify-content:center }
.wtf .dark .wey,.wtf .grad .wey{ color:var(--gold-light) }

/* two tone headline: first line one colour, second the accent */
.wtf h2{
  font-family:var(--display);text-transform:uppercase;font-weight:700;
  font-size:clamp(30px,4.6vw,62px);line-height:1.02;letter-spacing:-.015em;
  margin:0;color:var(--ink);text-wrap:balance;
}
.wtf h2 em{ font-style:normal;display:block;color:var(--burgundy) }
.wtf .dark h2,.wtf .grad h2{ color:#fff }
.wtf .dark h2 em,.wtf .grad h2 em{ color:var(--gold-light) }
.wtf .wsub{
  margin:18px 0 0;font-size:clamp(16px,1.7vw,18.5px);line-height:1.6;color:var(--ink-soft);
  max-width:70ch;
}
.wtf .dark .wsub,.wtf .grad .wsub{ color:#EBDCE2 }
.wtf .dark .wsub b,.wtf .grad .wsub b{ color:#fff;font-weight:600 }

.wtf .grad{ background:var(--wtfgrad);color:#fff }
.wtf .dark{ background:var(--burgundy-deep);color:#fff }
.wtf .champ{ background:var(--champagne) }
.wtf .linen{ background:var(--linen) }
.wtf .ctr{ text-align:center }
.wtf .ctr .wsub{ margin-left:auto;margin-right:auto }

/* centred button, outlined on dark grounds and solid on light */
.wtf .wcta{ text-align:center;margin-top:clamp(34px,4vw,52px) }
.wtf .wbtn{
  display:inline-block;padding:17px 34px;text-decoration:none;
  font-size:12.5px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;
  background:var(--burgundy);color:#fff;border:1px solid var(--burgundy);
  transition:background .25s,border-color .25s,color .25s;
}
.wtf .wbtn:hover{ background:var(--burgundy-deep);border-color:var(--burgundy-deep);color:#fff }
.wtf .grad .wbtn,.wtf .dark .wbtn{
  background:transparent;border-color:var(--gold);color:#fff;
}
.wtf .grad .wbtn:hover,.wtf .dark .wbtn:hover{
  background:var(--gold);border-color:var(--gold);color:var(--burgundy-deep);
}

/* ---------- 1. hero ---------- */
.wtf .whero{ padding:clamp(80px,10vw,150px) 0 clamp(70px,9vw,130px) }
.wtf .whero h1{
  font-family:var(--display);text-transform:uppercase;font-weight:700;
  font-size:clamp(44px,8.4vw,116px);line-height:.98;letter-spacing:-.025em;
  margin:0 0 26px;color:#fff;
}
.wtf .whero h1 span{ display:block }
.wtf .whero h1 .gold{ color:var(--gold-light) }
.wtf .whero p{ font-size:clamp(16px,1.8vw,19px);line-height:1.6;color:#F3E7EC;margin:0 0 14px;max-width:62ch }

/* the three facts under the hero copy */
.wtf .wfacts{
  display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,80px);margin-top:34px;
  padding-top:26px;border-top:1px solid rgba(227,203,152,.42);
}
.wtf .wfacts div{ min-width:0 }
.wtf .wfacts .fl{
  display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--gold-light);margin-bottom:8px;
}
.wtf .wfacts .fv{ display:block;font-size:clamp(17px,1.9vw,21px);color:#fff;font-weight:300 }

/* ---------- 2. white cards on a coloured ground, 2 across ---------- */
.wtf .wcards{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(30px,3.6vw,46px);
}
.wtf .wcard{
  background:#fff;border-left:4px solid var(--burgundy);
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,30px);
  font-size:16px;line-height:1.6;color:var(--ink-soft);
}
.wtf .wcard b{ color:var(--burgundy);font-weight:600 }
@media(max-width:760px){ .wtf .wcards{ grid-template-columns:1fr } }

/* ---------- the dark pull quote panel that closes a section ---------- */
.wtf .wquote{ margin-top:clamp(30px,3.6vw,48px) }
.wtf .wquote q{
  display:block;background:var(--burgundy-deep);color:#fff;quotes:none;
  padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,44px);
  font-size:clamp(19px,2.4vw,31px);line-height:1.32;font-weight:300;font-style:italic;
}
.wtf .wquote p{
  margin:0;background:#3D0C20;color:#CDB6C0;
  padding:14px clamp(24px,3.4vw,44px) 16px;font-size:14.5px;line-height:1.5;
}
.wtf .wquote p b{ color:#fff;font-weight:600 }

/* ---------- 3. ghost numeral rows ---------- */
.wtf .wrows{ margin-top:clamp(28px,3.4vw,44px);display:grid;gap:clamp(10px,1.2vw,16px) }
.wtf .wrow{
  display:grid;grid-template-columns:78px 1fr;align-items:center;gap:clamp(14px,2vw,26px);
  border:1px solid rgba(227,203,152,.34);padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px);
}
.wtf .wrow .n{
  font-size:clamp(30px,3.6vw,46px);font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--gold);
}
.wtf .wrow p{ margin:0;font-size:clamp(15.5px,1.7vw,17.5px);line-height:1.55;color:#F0E2E8 }
.wtf .wrow p b{ color:var(--gold-light);font-weight:600 }
@media(max-width:640px){
  .wtf .wrow{ grid-template-columns:52px 1fr;gap:14px }
  .wtf .wrow .n{ font-size:28px }
}

/* the solid statement panel that follows them */
.wtf .wstate{ margin-top:clamp(24px,3vw,38px) }
.wtf .wstate h3{
  margin:0;background:rgba(201,169,110,.16);border:1px solid rgba(227,203,152,.34);
  border-bottom:0;color:#fff;text-transform:uppercase;font-weight:700;
  font-size:clamp(19px,2.5vw,32px);letter-spacing:-.012em;line-height:1.15;
  padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,36px);text-align:center;
}
.wtf .wstate p{
  margin:0;background:rgba(201,169,110,.08);border:1px solid rgba(227,203,152,.34);
  color:#EBDCE2;padding:15px 20px 17px;text-align:center;font-size:16px;
}

/* ---------- 4. the five lesson cards ---------- */
.wtf .wlessons{ margin-top:clamp(28px,3.4vw,44px);display:grid;gap:clamp(12px,1.4vw,18px) }
.wtf .wlesson{
  background:#fff;display:grid;grid-template-columns:96px 1fr;
  gap:clamp(10px,1.6vw,22px);align-items:start;
  padding:clamp(24px,3vw,38px) clamp(22px,3vw,40px);
}
.wtf .wlesson .n{
  font-size:clamp(40px,5vw,68px);font-weight:700;line-height:.9;
  color:var(--linen);letter-spacing:-.03em;
}
.wtf .wlesson .lbl{
  margin:0 0 10px;font-style:italic;font-size:14px;font-weight:600;color:var(--burgundy);
}
.wtf .wlesson h3{
  margin:0 0 8px;text-transform:uppercase;font-weight:700;letter-spacing:-.01em;
  font-size:clamp(20px,2.3vw,28px);line-height:1.1;color:var(--ink);
}
.wtf .wlesson .sub{
  margin:0 0 14px;font-weight:700;font-size:15px;line-height:1.45;color:var(--burgundy);
}
.wtf .wlesson p:last-child{ margin:0;font-size:16px;line-height:1.62;color:var(--ink-soft) }
@media(max-width:640px){
  .wtf .wlesson{ grid-template-columns:1fr;gap:6px }
  .wtf .wlesson .n{ font-size:36px }
}

/* ---------- 5. the two identity cards ---------- */
.wtf .wpair{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);
  margin-top:clamp(30px,3.6vw,46px);text-align:left;
}
.wtf .wpair > div{ background:#fff;padding:clamp(22px,2.8vw,34px) clamp(22px,3vw,36px) }
.wtf .wpair .wey{ margin-bottom:12px;color:var(--gold-ink) }
.wtf .wpair h3{
  margin:0 0 12px;text-transform:uppercase;font-weight:700;letter-spacing:-.01em;
  font-size:clamp(21px,2.4vw,30px);line-height:1.1;color:var(--burgundy);
}
.wtf .wpair p{ margin:0;font-size:16px;line-height:1.62;color:var(--ink-soft) }
.wtf .wclose{
  margin:clamp(30px,3.6vw,46px) 0 0;font-style:italic;font-weight:300;
  font-size:clamp(20px,2.5vw,32px);line-height:1.3;color:#fff;
}
.wtf .wclose b{ color:var(--gold-light);font-weight:600 }
@media(max-width:760px){ .wtf .wpair{ grid-template-columns:1fr } }

/* ---------- 6. for you / not for you ---------- */
.wtf .wsplit{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px) }
.wtf .wsplit h2{ font-size:clamp(26px,3.6vw,48px) }
.wtf .wsplit h2 em{ display:inline;color:var(--burgundy) }
.wtf .wyes{ list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0 }
.wtf .wyes li{
  position:relative;padding:0 0 0 46px;margin:0 0 clamp(20px,2.4vw,30px);
  font-size:16px;line-height:1.55;color:var(--ink-soft);
}
.wtf .wyes li:before{
  content:"";position:absolute;left:0;top:-2px;width:26px;height:26px;
  border:1px solid var(--burgundy);border-radius:50%;
}
.wtf .wyes li:after{
  content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;
  border:solid var(--burgundy);border-width:0 1.6px 1.6px 0;transform:rotate(42deg);
}
.wtf .wno{
  list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0;
  background:var(--burgundy-deep);
}
.wtf .wno li{
  position:relative;padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,28px) clamp(18px,2.2vw,26px) 56px;
  border-bottom:1px solid rgba(227,203,152,.2);
  font-size:16px;line-height:1.5;color:#EBDCE2;
}
.wtf .wno li:last-child{ border-bottom:0 }
.wtf .wno li:before,.wtf .wno li:after{
  content:"";position:absolute;left:24px;top:calc(clamp(18px,2.2vw,26px) + 8px);
  width:13px;height:1.6px;background:var(--gold);
}
.wtf .wno li:before{ transform:rotate(45deg) }
.wtf .wno li:after{ transform:rotate(-45deg) }
@media(max-width:820px){ .wtf .wsplit{ grid-template-columns:1fr } }

/* ---------- 7. results, over a photo ---------- */
.wtf .wproof{ position:relative;overflow:hidden;background:var(--burgundy-deep) }
.wtf .wproof:before{
  content:"";position:absolute;inset:0;
  background:url("/assets/img/workshop/room.jpg") center/cover no-repeat;
  opacity:.2;
}
.wtf .wproof:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(142,35,80,.9),rgba(61,12,32,.94));
}
.wtf .wproof > .wrap{ position:relative;z-index:2 }
.wtf .wtestis{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);
  margin-top:clamp(30px,3.6vw,46px);
}
.wtf .wtesti{ background:#fff;padding:clamp(24px,3vw,34px) clamp(24px,3vw,36px) }
.wtf .wtesti p{
  margin:0 0 18px;font-style:italic;font-size:15.5px;line-height:1.62;color:var(--ink-soft);
}
.wtf .wtesti .who{
  margin:0;font-style:italic;font-weight:600;font-size:14.5px;color:var(--burgundy);
}
.wtf .walready{ margin-top:clamp(34px,4vw,54px) }
.wtf .walready h3{
  margin:0;background:var(--burgundy);color:#fff;text-transform:uppercase;
  font-weight:700;font-size:clamp(19px,2.2vw,28px);letter-spacing:-.01em;
  padding:clamp(18px,2.2vw,26px) clamp(22px,2.6vw,32px);
}
.wtf .walready ul{
  list-style:none;margin:0;padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,30px);
  display:grid;gap:12px;border:1px solid rgba(227,203,152,.3);border-top:0;
}
.wtf .walready li{
  border:1px solid rgba(227,203,152,.42);padding:14px 20px;
  font-size:16px;line-height:1.45;color:#fff;
}
@media(max-width:760px){ .wtf .wtestis{ grid-template-columns:1fr } }

/* ---------- 9. won't get / will get ---------- */
.wtf .wget{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px);
  margin-top:clamp(30px,3.6vw,46px);align-items:start;
}
.wtf .wgetlbl{
  margin:0 0 16px;padding-left:14px;border-left:3px solid var(--gold);
  text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.14em;color:#fff;
}
.wtf .wnotlist{ list-style:none;margin:0;padding:0;display:grid;gap:10px }
.wtf .wnotlist li{
  border:1px solid rgba(227,203,152,.3);padding:14px 18px;
  font-size:15.5px;line-height:1.5;color:#E0CFD6;
}
.wtf .wwill{ background:var(--burgundy);padding:clamp(24px,3vw,38px) clamp(24px,3vw,40px) }
.wtf .wwill .wgetlbl{ border-left-color:var(--gold-light) }
.wtf .wwill h3{
  margin:0 0 18px;text-transform:uppercase;font-weight:700;letter-spacing:-.015em;
  font-size:clamp(21px,2.6vw,33px);line-height:1.12;color:#fff;
}
.wtf .wwill p{ margin:0 0 18px;font-size:16px;line-height:1.6;color:#F0E2E8 }
.wtf .wwill .heat{
  margin:0;text-transform:uppercase;font-weight:700;letter-spacing:-.01em;
  font-size:clamp(19px,2.3vw,28px);color:var(--gold-light);
}
@media(max-width:820px){ .wtf .wget{ grid-template-columns:1fr } }

/* ---------- 10. about Sharon, photo left ---------- */
.wtf .wabout{ display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,60px);align-items:start }
.wtf .wabout .shot{ border:5px solid var(--burgundy);padding:0;line-height:0 }
.wtf .wabout .shot img{ width:100%;height:auto;display:block;filter:grayscale(100%) contrast(1.04) }
.wtf .wabout p{ margin:0 0 16px;font-size:16.5px;line-height:1.66;color:var(--ink-soft) }
.wtf .wabout p b{ color:var(--burgundy);font-weight:600 }
.wtf .wabout ul{ list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px }
.wtf .wabout li{ position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:var(--ink-soft) }
.wtf .wabout li:before{
  content:"";position:absolute;left:0;top:.44em;width:11px;height:11px;background:var(--gold);
}
@media(max-width:820px){ .wtf .wabout{ grid-template-columns:1fr } }

/* ---------- 11. the price card ---------- */
.wtf .wprice{ max-width:60rem;margin:clamp(30px,3.6vw,46px) auto 0;position:relative }
.wtf .wprice .tab{
  background:var(--burgundy);color:#fff;text-align:center;
  text-transform:uppercase;font-weight:700;font-size:12.5px;letter-spacing:.18em;
  padding:13px 20px;max-width:30rem;margin:0 auto;
}
.wtf .wprice .box{ background:#fff;border:1px solid var(--gold);padding:clamp(26px,3.4vw,44px) }
.wtf .wprice .date{
  margin:0 0 14px;text-transform:uppercase;font-weight:700;letter-spacing:.14em;
  font-size:14px;color:var(--burgundy);
}
.wtf .wprice .amt{
  margin:0 0 10px;font-size:clamp(46px,7vw,86px);font-weight:700;line-height:.92;
  letter-spacing:-.04em;color:var(--ink);
}
.wtf .wprice .lim{ margin:0 0 22px;font-size:15px;color:var(--ink-soft) }
.wtf .wprice ul{ list-style:none;margin:0;padding:0;display:grid;gap:13px }
.wtf .wprice li{ position:relative;padding-left:26px;font-size:16.5px;line-height:1.5;color:var(--ink-soft) }
.wtf .wprice li:before{
  content:"";position:absolute;left:0;top:.44em;width:11px;height:11px;background:var(--gold);
}
.wtf .wprice .wcta{ margin-top:clamp(26px,3vw,36px) }
.wtf .wnext{
  margin:clamp(26px,3vw,38px) auto 0;max-width:64rem;text-align:center;
  font-size:16px;line-height:1.6;color:#EBDCE2;
}
.wtf .wnext b{ color:#fff;font-weight:600 }
.wtf .wnext a{ color:var(--gold-light) }

/* ---------- 13. the room, quote beside a photo ---------- */
.wtf .wroom{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  background:var(--burgundy-deep);margin-top:clamp(30px,3.6vw,46px);
}
.wtf .wroom blockquote{
  margin:0;padding:clamp(26px,3.4vw,46px);color:#fff;
  font-style:italic;font-weight:300;font-size:clamp(17px,2vw,24px);line-height:1.4;
}
.wtf .wroom .pic{ padding:clamp(16px,2vw,26px);line-height:0 }
.wtf .wroom img{ width:100%;height:auto;display:block }
@media(max-width:760px){ .wtf .wroom{ grid-template-columns:1fr } }

/* ---------- 14. FAQ ---------- */
.wtf .wfaq{ max-width:56rem;margin:clamp(30px,3.6vw,46px) auto 0;display:grid;gap:12px }
.wtf .wfaq details{ background:#FBFAF9;border:1px solid rgba(227,203,152,.5) }
.wtf .wfaq summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 24px;position:relative;
  font-weight:700;font-size:16px;color:var(--burgundy);
}
.wtf .wfaq summary::-webkit-details-marker{ display:none }
.wtf .wfaq summary:after{
  content:"";position:absolute;right:24px;top:24px;width:9px;height:9px;
  border:solid var(--burgundy);border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg);transition:transform .25s;
}
.wtf .wfaq details[open] summary:after{ transform:rotate(-135deg);top:28px }
.wtf .wfaq p{ margin:0;padding:0 24px 22px;font-size:16px;line-height:1.62;color:var(--ink-soft) }
.wtf .wfaq p a{ color:var(--burgundy) }

/* ---------- 15. closing ---------- */
.wtf .wend h2{ font-size:clamp(38px,7vw,96px);margin-bottom:26px }
.wtf .wsign{
  margin:clamp(40px,5vw,64px) auto 0;padding-top:clamp(26px,3vw,36px);
  border-top:1px solid rgba(227,203,152,.36);max-width:36rem;
  text-transform:uppercase;font-weight:700;letter-spacing:.06em;
  font-size:clamp(15px,1.8vw,21px);color:var(--gold-light);
}

/* ---------- corrections after first render ---------- */

/* The price card is a white box inside a .grad section, so its button was
   picking up the outlined-on-dark treatment: white text on white. */
.wtf .grad .wprice .box .wbtn,
.wtf .dark .wprice .box .wbtn{
  background:var(--burgundy);border-color:var(--burgundy);color:#fff;
}
.wtf .grad .wprice .box .wbtn:hover,
.wtf .dark .wprice .box .wbtn:hover{
  background:var(--burgundy-deep);border-color:var(--burgundy-deep);color:#fff;
}

/* burgundy on a burgundy gradient gave the tab nothing to sit against */
.wtf .wprice .tab{ background:var(--gold);color:var(--burgundy-deep) }

/* "This is not for you if:" wrapped to two lines while the left column stayed
   on one, so the two lists started at different heights. */
.wtf .wsplit h2{ font-size:clamp(23px,2.9vw,38px) }

/* the about column is narrower than a full section, so the heading needs to
   come down a step or it runs to five lines */
.wtf .wabout h2{ font-size:clamp(26px,3.1vw,42px) }

/* three facts side by side need to stack once the gap alone is a third of
   the screen; the form's two inputs already wrap, but they wrap tidier at
   full width than at their 200px flex basis */
@media(max-width:560px){
  .wtf .wfacts{gap:22px;flex-direction:column}
  .wtf .gateform input{flex:1 1 100%}
}