* { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: 'Poppins', sans-serif; background: #f3f1ee; color: #1a1a1a; -webkit-font-smoothing: antialiased; }
  a { color: #1a1a1a; text-decoration: none; }
  ::selection { background: #d10a6f; color: #fff; }
  @keyframes lgsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes lgsHeadTilt { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
  @keyframes lgsBodyPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
  @keyframes bookIn { 0% { opacity: 0; transform: translateY(60px) scale(0.8) rotate(-3deg); } 60% { transform: translateY(-8px) scale(1.02) rotate(0.5deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } }
  @keyframes wdBuild { 0% { opacity:0; transform:translateY(10px) scale(0.9); } 12% { opacity:1; transform:none; } 80% { opacity:1; } 92%,100% { opacity:0; } }
  @keyframes wdGrow { 0%,6% { transform:scaleX(0); } 34%,92% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
  @keyframes wdBlink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
  @keyframes wdKnob { 0%,42%,100% { transform:translateX(0); } 56%,92% { transform:translateX(18px); } }
  @keyframes wdFillIn { 0%,42%,100% { opacity:0; } 56%,92% { opacity:1; } }
  @keyframes wdResize { 0%,16% { width:100%; } 46%,62% { width:44%; } 90%,100% { width:100%; } }
  @keyframes wdHue { 0%,100% { background:#d10a6f; } 25% { background:#d10a6f; } 50% { background:#d10a6f; } 75% { background:#d10a6f; } }
  @keyframes wdRing { 0%,18% { transform:translateX(0); } 27%,43% { transform:translateX(30px); } 52%,68% { transform:translateX(60px); } 77%,93% { transform:translateX(90px); } 100% { transform:translateX(0); } }
  @keyframes wdBounce { 0%,70%,100% { transform:translateY(0); opacity:0.45; } 35% { transform:translateY(-6px); opacity:1; } }
  @keyframes wdPop { 0%,52% { opacity:0; transform:scale(0.3); } 66% { opacity:1; transform:scale(1.18); } 78%,100% { opacity:1; transform:scale(1); } }
  @keyframes wdSlide { 0%,8% { left:2px; opacity:0; } 14% { opacity:1; } 20% { transform:translateY(-3px) scale(1.06); } 56% { left:calc(100% - 60px); transform:translateY(-3px) scale(1.06); } 64%,86% { left:calc(100% - 60px); transform:none; opacity:1; } 93%,100% { left:calc(100% - 60px); opacity:0; } }
  @keyframes wdSpin { to { transform:rotate(360deg); } }
  @keyframes wdBlob { 0%,100% { border-radius:42% 58% 60% 40% / 45% 45% 55% 55%; } 33% { border-radius:62% 38% 42% 58% / 58% 62% 38% 42%; } 66% { border-radius:44% 56% 58% 42% / 62% 40% 60% 38%; } }
  @keyframes wdFloat { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-8px) rotate(2deg); } }
  @keyframes wdVanish { 0%,40% { opacity:1; filter:blur(0); transform:translateY(0); } 58% { opacity:0.18; filter:blur(2px); transform:translateY(-5px); } 74%,100% { opacity:1; filter:blur(0); transform:translateY(0); } }
  @keyframes wdTickPop { 0%,56% { opacity:0; transform:scale(0.2) rotate(-20deg); } 70% { opacity:1; transform:scale(1.25) rotate(6deg); } 82%,100% { opacity:1; transform:scale(1) rotate(0); } }
  @keyframes wdWobble { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(4deg); } }
  @keyframes wdSpark { 0%,100% { opacity:0; transform:scale(0.4) rotate(0); } 50% { opacity:1; transform:scale(1) rotate(90deg); } }
  @keyframes wdDrop { 0%,10% { opacity:0; transform:translateY(-14px) scale(0.8); } 22%,80% { opacity:1; transform:translateY(0) scale(1); } 92%,100% { opacity:0; transform:translateY(0) scale(1); } }
  @keyframes wdMorph { 0%,22% { width:104px; } 38%,58% { width:66px; } 74%,96% { width:34px; } 100% { width:104px; } }
  @keyframes wdStack { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
  @keyframes wdData { 0% { transform:translateX(-14px); opacity:0; } 20%,80% { opacity:1; } 50% { transform:translateX(14px); } 100% { transform:translateX(42px); opacity:0; } }
  @keyframes wdBrush { 0%,100% { transform:translate(-16px,6px) rotate(-30deg); } 50% { transform:translate(16px,-6px) rotate(-30deg); } }
  @keyframes wdPaint { 0% { clip-path:inset(0 100% 0 0); } 45%,100% { clip-path:inset(0 0 0 0); } }
  @keyframes wdCopyFly { 0%,12% { transform:translate(0,0) scale(1); opacity:0; } 22% { opacity:1; } 30% { transform:translate(0,-11px) scale(0.94); opacity:1; } 62% { transform:translate(124px,-11px) scale(0.94); opacity:1; } 72%,100% { transform:translate(124px,0) scale(1); opacity:0; } }
  @keyframes wdPasteFill { 0%,64% { opacity:0; } 74%,100% { opacity:1; } }
  @keyframes wdGrow2 { 0%,8% { transform:scaleY(0.25); } 40%,92% { transform:scaleY(1); } 100% { transform:scaleY(0.25); } }
  @keyframes wdHueSoft { 0%,100% { background:#ffd84d; } 33% { background:#ff7ab8; } 66% { background:#fff; } }
  @keyframes brDial { 0%,100% { width:24%; } 33% { width:62%; } 66% { width:88%; } }
  @keyframes brKnob { 0%,100% { left:24%; } 33% { left:62%; } 66% { left:88%; } }
  @keyframes brHue { 0%,33% { background:#d10a6f; } 34%,66% { background:#3b4ddb; } 67%,100% { background:#d10a6f; } }
  @keyframes brCode { 0%,32% { opacity:1; } 33%,100% { opacity:0; } }
  @keyframes hostArc { 0%,8% { stroke-dashoffset:79; } 55%,88% { stroke-dashoffset:14; } 100% { stroke-dashoffset:79; } }
  @keyframes hostNeedle { 0%,8% { transform:rotate(-18deg); } 55%,88% { transform:rotate(72deg); } 100% { transform:rotate(-18deg); } }
  @keyframes abSwing { 0%,100% { transform:rotate(-1.05deg); } 50% { transform:rotate(1.05deg); } }
  @keyframes abTilt { 0%,100% { transform:rotate(2.4deg); } 50% { transform:rotate(-2.4deg); } }
  @keyframes sfCard { 0%,10% { opacity:0; transform:translateY(8px); } 30%,88% { opacity:1; transform:none; } 100% { opacity:0; } }
  @keyframes sfStage { 0%,10% { opacity:0; transform:scaleX(0.6); } 32%,88% { opacity:1; transform:none; } 100% { opacity:0; } }
  @keyframes sfSlide { 0%,4% { opacity:0; transform:translateX(14px); } 10%,28% { opacity:1; transform:none; } 34%,100% { opacity:0; transform:translateX(-14px); } }
  @keyframes sfQr { 0%,58% { opacity:1; transform:scale(1); } 72%,100% { opacity:0; transform:scale(0.86); } }
  @keyframes sfScan { 0%,6% { top:26%; opacity:0; } 14% { opacity:1; } 52% { top:70%; opacity:1; } 60%,100% { opacity:0; } }
  @keyframes sfTick { 0%,60% { opacity:0; transform:scale(0.4); } 74% { opacity:1; transform:scale(1.15); } 84%,100% { opacity:1; transform:scale(1); } }
  @keyframes sfFit { 0%,14% { transform:translateY(-22px) rotate(-14deg); opacity:0; } 38%,88% { transform:none; opacity:1; } 100% { transform:translateY(-22px) rotate(-14deg); opacity:0; } }
  @keyframes prFan { 0%,10% { opacity:0; transform:rotate(0deg) translateY(8px); } 30%,86% { opacity:1; } 100% { opacity:0; } }
  @keyframes prScale { 0%,12% { transform:scale(0.72); } 46%,86% { transform:scale(1.28); } 100% { transform:scale(0.72); } }
  @keyframes prGlow { 0%,100% { filter:brightness(1); box-shadow:none; } 50% { filter:brightness(1.18); box-shadow:0 0 16px rgba(245,180,0,0.7); } }
  @keyframes prWrap { 0%,10% { transform:scaleX(0); } 44%,88% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
  @keyframes prPress { 0%,14% { opacity:0; transform:scale(2.1); } 34%,88% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(2.1); } }
  @keyframes prReg { 0%,12% { transform:translate(calc(var(--tx) * 2.4), calc(var(--ty) * 2.4)); } 52%,88% { transform:translate(var(--tx), var(--ty)); } 100% { transform:translate(calc(var(--tx) * 2.4), calc(var(--ty) * 2.4)); } }
  @keyframes prMarks { 0%,14% { opacity:0; } 34%,88% { opacity:0.85; } 100% { opacity:0; } }
  @keyframes prStock { 0%,10% { opacity:0; transform:translateX(-10px); } 30%,86% { opacity:1; transform:none; } 100% { opacity:0; transform:translateX(-10px); } }
  @keyframes hostSpin { to { transform:rotate(360deg); } }
  @keyframes hostEcg { 0% { stroke-dashoffset:220; } 100% { stroke-dashoffset:0; } }
  @keyframes hostDay { 0%,100% { opacity:0.3; } 50% { opacity:1; } }
  @keyframes hostGrow { 0%,10% { transform:translateY(10px); opacity:0.4; } 34%,88% { transform:none; opacity:1; } 100% { transform:translateY(10px); opacity:0.4; } }
  @keyframes hostMail { 0%,8% { opacity:0; transform:translateX(-12px); } 26%,86% { opacity:1; transform:none; } 100% { opacity:0; transform:translateX(-12px); } }
  @keyframes hostUndo { 0%,20% { transform:rotate(0deg); } 55%,100% { transform:rotate(-360deg); } }
  @keyframes hostRise { 0% { opacity:0; transform:translateY(8px); } 40% { opacity:0.7; } 100% { opacity:0; transform:translateY(-14px); } }
  @keyframes seoGauge { 0%,8% { clip-path:inset(0 100% 50% 0); } 55%,88% { clip-path:inset(0 0 50% 0); } 100% { clip-path:inset(0 100% 50% 0); } }
  @keyframes seoNeedle { 0%,8% { transform:rotate(-78deg); } 55%,88% { transform:rotate(66deg); } 100% { transform:rotate(-78deg); } }
  @keyframes seoClimb { 0%,10% { transform:translateY(22px); opacity:0; } 34%,88% { transform:translateY(0); opacity:1; } 100% { transform:translateY(22px); opacity:0; } }
  @keyframes seoLink { 0%,10% { transform:scaleX(0); opacity:0; } 36%,88% { transform:scaleX(1); opacity:1; } 100% { transform:scaleX(1); opacity:0; } }
  @keyframes seoDraw { 0%,8% { stroke-dashoffset:150; } 62%,90% { stroke-dashoffset:0; } 100% { stroke-dashoffset:150; } }
  @keyframes gaSug { 0%,14% { opacity:0; transform:translateY(5px); } 30%,88% { opacity:1; transform:none; } 100% { opacity:0; } }
  @keyframes gaOn { 0%,34% { opacity:0; } 50%,90% { opacity:1; } 100% { opacity:0; } }
  @keyframes gaKnob { 0%,34%,100% { transform:translateX(0); } 50%,90% { transform:translateX(18px); } }
  @keyframes gaCoin { 0%,8% { opacity:0; transform:translateY(-16px) scale(0.6); } 26%,86% { opacity:1; transform:none; } 100% { opacity:0; } }
  @keyframes gaBanner { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
  @keyframes gaPulse { 0% { transform:scale(0.55); opacity:0.85; } 100% { transform:scale(1.5); opacity:0; } }
  @keyframes brTick { 0%,12% { opacity:0; transform:scale(0.3); } 24% { opacity:1; transform:scale(1.3); } 32%,88% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(0.3); } }
  @keyframes brBar { 0%,8% { transform:scaleX(0); } 62%,88% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
  @keyframes brDraw { 0%,6% { stroke-dashoffset:210; } 46%,86% { stroke-dashoffset:0; } 100% { stroke-dashoffset:210; } }
  @keyframes brFill { 0%,52% { opacity:0; } 68%,90% { opacity:1; } 100% { opacity:0; } }
  @keyframes brCycle { 0%,22% { transform:translateY(0) scale(1.06); box-shadow:0 6px 14px -6px rgba(19,19,18,.4); } 34%,100% { transform:translateY(0) scale(1); box-shadow:none; } }
  @media (max-width: 860px) { #ab-place { grid-template-columns: 1fr !important; } }
  @media (max-width: 1100px) { #soft-why { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } }
  @media (max-width: 700px) { #soft-why { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; } }
  @media (max-width: 430px) { #soft-why { grid-template-columns: 1fr !important; } }
  .soft-why-card:hover { transform: translateY(-6px) !important; box-shadow: 0 26px 48px rgba(26,26,26,0.14) !important; }
  .sm-faq summary::-webkit-details-marker { display: none; }
  .sm-faq[open] .sm-faq-plus { transform: rotate(45deg); }
  @keyframes heroWin { 0% { opacity:0; transform:translateY(50px) scale(0.96); } 100% { opacity:1; transform:translateY(0) scale(1); } }
  @keyframes heroType { 0% { width:0; } 100% { width:var(--tw,60%); } }
  @keyframes heroBlock { 0% { opacity:0; transform:translateY(16px); } 100% { opacity:1; transform:translateY(0); } }
  @keyframes heroCaret { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
  @keyframes heroCursorMove { 0% { transform:translate(180px,120px); opacity:0; } 12% { opacity:1; } 40% { transform:translate(78px,26px); } 66% { transform:translate(150px,150px); } 100% { transform:translate(112px,206px); opacity:1; } }
  .hero-b { opacity:0; animation:heroBlock 0.55s cubic-bezier(0.16,1,0.3,1) forwards; }
  .wd-bcard:hover .wd-bframe { transform: translateY(-8px); box-shadow: 0 34px 60px rgba(26,26,26,0.18); }
  .wd-bcard:hover .wd-bshot { transform: translateY(calc(-100% + 300px)); }
  .wd-bcard:hover .wd-barrow { transform: rotate(45deg); }
  @media (max-width: 900px) {
    #ab-hero { grid-template-columns: 1fr !important; gap: 26px !important; }
    #ab-hero > div:first-child { order: 2; }
    #ab-lanyards { order: 1; height: 430px !important; }
    #about { padding-top: 40px !important; }
  }
  @media (max-width: 860px) { .sm-step { grid-template-columns: 64px 1fr !important; gap: 10px 16px !important; } .sm-step p { grid-column: 2 !important; } }
  .lgs-o { display: inline-block; width: 0.72em; height: 0.80em; vertical-align: baseline; margin: 0 -0.04em; overflow: visible; }
  .lgs-o svg { width: 100%; height: 100%; overflow: visible; }
  .lgs-head { transform-box: fill-box; transform-origin: 50% 100%; animation: lgsHeadTilt 2.8s ease-in-out infinite; }
  .lgs-body { transform-box: fill-box; transform-origin: 50% 50%; animation: lgsBodyPulse 2.8s ease-in-out infinite; }
  #pr-menu-btn { display: none; }
  @media (max-width: 1030px) {
    #pr-nav-links { display: none !important; }
    #pr-nav-cta { display: none !important; }
    #pr-menu-btn { display: flex !important; }
    #pr-nav { padding: 16px 20px !important; }
  }
  @media (max-width: 900px) { #pr-footer { grid-template-columns: 1fr 1fr !important; gap: 32px 40px !important; } .wd-hero-grid { grid-template-columns: 1fr !important; } }
  @media (max-width: 560px) {
    #pr-footer { grid-template-columns: 1fr !important; gap: 30px !important; }
  }
  @media (max-width: 860px) {
    #pr-cm-form [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 10px !important; }
    #pr-cm-form input, #pr-cm-form textarea { font-size: 16px !important; width: 100% !important; padding: 10px 13px !important; }
    #pr-cm-form .pr-cm-step { gap: 10px !important; }
    #pr-cm-form label { gap: 4px !important; }
    #pr-cm-form label:has(input[name="phone"]) { display: none !important; }
    #pr-tile-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
    #pr-tile-grid .pr-tile > div:last-child { font-size: 9px !important; left: 4px !important; right: 4px !important; bottom: 4px !important; }
    #pr-tile-grid .pr-tile-check { width: 16px !important; height: 16px !important; top: 4px !important; right: 4px !important; }
    #pr-cm-card { max-height: 94vh !important; }
  }

@keyframes lgsLanyFall {
  0%   { transform: translateY(-118vh); }
  100% { transform: translateY(0); }
}
@keyframes lgsLanySwing {
  0%   { transform: rotate(-7.2deg); }
  14%  { transform: rotate(5.4deg); }
  28%  { transform: rotate(-3.9deg); }
  42%  { transform: rotate(2.8deg); }
  56%  { transform: rotate(-2.05deg); }
  70%  { transform: rotate(1.5deg); }
  84%  { transform: rotate(-1.35deg); }
  100% { transform: rotate(-1.05deg); }
}
/* the strap pivots from the top; the badge just hangs off it */
.lgs-lany-fall { animation: lgsLanyFall 0.62s cubic-bezier(0.45,0.05,0.75,0.6) both; }
.lgs-lany-swing { animation: lgsLanySwing 3.1s cubic-bezier(0.33,0,0.25,1) both; }
/* Hold them off-screen from the first paint. The script runs
   after the page has already been drawn, so without this the
   lanyards flash in place for a frame before falling. */
.ab-lany { transform: translateY(-118vh); }
.ab-lany.lgs-lany-ready { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ab-lany { animation: none !important; transform: none !important; }
}


/* hover states, from style-hover attributes */
.h-1:hover{color:#d10a6f}
.h-2:hover{background:#f3f1ee}
.h-3:hover{transform:translateY(-2px)}
.h-4:hover{background:#b00860}
.h-5:hover{background:#dcd8d1}
.h-6:hover{background:#111;color:#fff}
.h-7:hover{background:#fff;color:#d10a6f}
.h-8:hover{background:#fff;color:#d10a6f;transform:translateY(-2px)}
.h-9:hover{background:rgba(255,255,255,0.35);transform:rotate(90deg)}
.h-10:hover{background:#e3ded7}
.h-11:hover{transform:translateY(-2px);background:#b00860}

/* ---------------------------------------------------------------
   About page hero: the logo mark, as an alternative to the lanyards.
   Switched in Site Settings > About page hero.

   Deliberately CSS rather than GSAP — it's a standing animation with no
   scroll or entrance behaviour, so it doesn't need the lanyard script and
   works if that never loads.
   --------------------------------------------------------------- */
#ab-mark { position: relative; }

#ab-mark-head {
  transform-origin: 50% 60%;
  animation: abMarkBob 3.2s ease-in-out infinite;
}
#ab-mark-body {
  transform-origin: 50% 100%;
  animation: abMarkSettle 3.2s ease-in-out infinite;
}

/* The head rides a little higher and a little longer than the body, so it
   reads as a bob rather than the whole thing sliding. */
@keyframes abMarkBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-9px) rotate(-1.4deg); }
  62%      { transform: translateY(-3px) rotate(1deg); }
}

@keyframes abMarkSettle {
  0%, 100% { transform: translateY(0) scaleY(1); }
  30%      { transform: translateY(-2px) scaleY(0.985); }
  62%      { transform: translateY(0) scaleY(1.008); }
}

@media (max-width: 860px) {
  #ab-mark { height: 300px !important; }
  #ab-mark-svg { width: min(56%, 190px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  #ab-mark-head, #ab-mark-body { animation: none !important; }
}