/* Outfit – self-hosted variable font (weights 200–800) */
@font-face{ font-family:"Outfit"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("../fonts/outfit-variable-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Outfit"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("../fonts/outfit-variable-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* =====================================================================
   Pinloc one-pager
   Design canvas is 2560px wide. 1rem == 16 design px, and the root font
   size scales with the viewport (0.625vw) so the layout stays proportional
   between ~1760px and 2560px. Below that it is clamped to 11px and the
   content column simply gets narrower.
   ===================================================================== */
:root{
  --green:#c5e387;
  --cyan:#A1E2EC;   /* light blue */
  --pink:#F7BCC5;   /* light red */
  --plum:#6D3549;   /* dark red */
  --slate:#375965;  /* dark blue */
  --teal:#46736c;
  --brown:#735634;
  --sand:#e3b287;
  --ink:#0b2e26;
  --white:#fff;
  --col:108.375rem;         /* 1734px content column */
  --radius:3.125rem;        /* 50px */
  --shadow:0 8rem 8rem rgba(0,0,0,.25);
}
html{ font-size:clamp(11px, .625vw, 16px); scroll-behavior:smooth; }
/* Rubber-band overscroll on phones shows the root canvas, not the body. The root gets a tile that repeats
   vertically: above the page its bottom half is visible (= the page's top colour), below the page its
   top half (= the page's bottom colour). Inside the page the body gradient covers it. */
html{ background:#000 linear-gradient(#2E1011 0 50%, #0B2D26 50% 100%) repeat-y; }   /* the solid colour is the fallback where the tile is not extended (desktop browsers) */
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--white);
  background:#000;   /* under the gradient; iOS uses the body colour for rubber-band overscroll */
  background-image:linear-gradient(180deg, #0B2D26 1.35%, #1F423D 20.7%, #142F40 61.1%, #421F33 82.3%, #2E1011 93.5%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; }

.col{ width:min(100% - 6rem, var(--col)); margin-inline:auto; position:relative; }

/* ---------- type ---------- */
.eyebrow{
  font-size:1.125rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  margin:0 0 .9rem;
}
.h2{ font-size:4rem; font-weight:700; line-height:1.15; margin:0; }
.h2.green{ color:var(--green); }
.h2.cyan{ color:var(--cyan); }
.h2.pink{ color:var(--pink); }
.body{ font-size:max(1.5rem, 17px); line-height:1.5; font-weight:400; margin:0; }   /* same minimum as the intro statements */
.body p{ margin:0 0 2rem; }
.body p:last-child{ margin-bottom:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:4.375rem; padding:0 2.5rem; border-radius:2.8rem;
  font-size:1.5rem; font-weight:700; white-space:nowrap;
  transition:transform .2s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn.green{ background:var(--green); color:var(--ink); }
.btn.cyan{ background:var(--cyan); color:var(--ink); }
.btn.plum{ background:var(--plum); color:var(--pink); min-width:12.25rem; }
.btn.cyan-slate{ background:var(--cyan); color:var(--slate); min-width:12.875rem; }

/* =====================================================================
   SCROLLY: hero -> 4 statements, one pinned stage
   ===================================================================== */
.scrolly{ position:relative; height:800vh; }
.stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
}
.stage-inner{ position:absolute; inset:0; }
/* scroll indicator on the hero, fades out with the top menu */
.scroll-hint{
  position:absolute; left:50%; bottom:3rem; transform:translateX(-50%); z-index:4; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--green); font-size:.875rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
}
.scroll-hint svg{ width:1.6rem; height:1.6rem; animation:hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(.5rem); } }
@media (prefers-reduced-motion:reduce){ .scroll-hint svg{ animation:none; } }

/* the moving image (swap <img> for <video> later) */
.hero-object{
  position:absolute; left:50%; top:50%;
  height:60rem; max-height:86vh; width:auto;
  transform:translate(-50%,-50%);
  will-change:transform, left, top; z-index:2;
  pointer-events:none; user-select:none;
}
.hero-object img, .hero-object video, .hero-object canvas{ height:100%; width:auto; display:block; }
.hero-object .hero-first{ position:absolute; inset:0; display:block; }   /* first frame, shown until the canvas has drawn */

/* hero step */
.step{ position:absolute; opacity:0; will-change:opacity, transform; z-index:1; }
.step-hero{ inset:0; z-index:1; }
.step-text{ z-index:3; }   /* text above the video, video above the logo */
.topnav{
  position:fixed; top:5.5rem; left:50%; transform:translateX(-50%); z-index:20;
  display:flex; gap:1.875rem; will-change:opacity;
}
.hero-logo{
  position:absolute; left:calc(50% - 1rem); top:calc(50% + 3rem);
  width:36.75rem; transform:translate(-50%,-50%);
  filter:drop-shadow(0 5rem 2.5rem rgba(0,0,0,.25));
}
.hero-logo img{ width:100%; }

/* statement steps */
.step-text{
  top:50%; width:33rem; transform:translateY(-50%);
}
.step-text .eyebrow{ margin-bottom:.9rem; }
/* min sizes in px keep the statements readable on laptops, where 1rem is only 11px */
.step-text h3{
  margin:0 0 1.3rem; color:var(--green);
  font-size:max(3.4rem, 42px); line-height:1.15; font-weight:800;
}
.step-text p{ margin:0; font-size:max(1.4rem, 17px); line-height:1.5; }
@media (min-width:1201px) and (max-width:1760px){   /* laptops: 1rem is 11px here, keep the column readable */
  .step-text{ width:max(33rem, 440px); }
  .step-right.far{ width:max(30rem, 400px); }
}
.step-text p b{ font-weight:700; }
.step-right{ left:calc(50% + 11.5rem); }
.step-left{ left:calc(50% - 54rem); }
.step-right.far{ left:calc(50% + 20rem); width:30rem; }



/* =====================================================================
   DONE
   ===================================================================== */
.done{ text-align:center; padding:0 0 20rem; margin-top:-65vh; position:relative; z-index:3; }   /* rises in while the pin is still fading */
.done .word{
  display:inline-block; position:relative;
  font-size:15rem; font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--green);
  padding-left:2.6rem;
}
.done svg{ display:block; width:37.25rem; margin:-1.5rem auto 0; overflow:visible; }   /* line sits below the word */
.done svg path{ stroke-dasharray:1; stroke-dashoffset:1; }
.done.in svg path{ animation:draw 1.1s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* =====================================================================
   EXPLORE
   ===================================================================== */
.explore{ padding:10rem 0 0; }
.explore .intro{ padding-left:2rem; }
.explore .intro .h2{ white-space:nowrap; }
.explore .intro .body{ margin-top:.6rem; max-width:33rem; }
.video-card{
  position:relative; margin-top:6rem; aspect-ratio:16 / 9;
  border-radius:var(--radius); overflow:hidden; background:#0b2e26;
  scroll-margin-top:4rem;
}
.video-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#0b2e26; }
.video-card:not(.started) video{ cursor:pointer; }

/* idle label bar (a button) */
.card .bar{
  position:absolute; left:1.25rem; right:1.25rem; bottom:1.25rem;
  height:6.25rem; border-radius:3.125rem;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 0 2.4rem; font:inherit; font-size:2rem; font-weight:700; cursor:pointer;
  text-align:left; width:auto;
}
.card .play{
  width:6.25rem; height:6.25rem; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; transition:transform .2s ease;
}
.poster-bar:hover .play{ transform:scale(1.06); }
.card .play svg{ width:2.6rem; height:2.6rem; margin:0; overflow:visible; display:block; }
.card.why .bar{ background:var(--slate); color:var(--cyan); }
.card.why .play{ background:var(--cyan); } .card.why .play svg{ fill:var(--slate); }
.video-card.started .poster-bar{ display:none; }

.video-card:fullscreen{ border-radius:0; aspect-ratio:auto; }
.video-card:fullscreen video{ object-fit:contain; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{ padding:13.5rem 0 0; }
.faq .h2{ margin-bottom:3.6rem; }
.faq-item{
  background:var(--slate); border-radius:var(--radius);
  margin-bottom:1.875rem; overflow:hidden;
}
.faq-head{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:2.6rem;
  padding:3.4rem 5.6rem 3.4rem 5.6rem; cursor:pointer; min-height:12.94rem;
}
.faq-head h3{ margin:0; font-size:2rem; font-weight:700; line-height:1.4; }
.faq-head .short{ margin:0; color:var(--cyan); font-size:1.5rem; font-weight:700; line-height:2rem; }
.faq-head .more{ color:var(--cyan); font-size:1.5rem; font-weight:700; }
.faq-toggle{
  width:6.4rem; height:6.125rem; border-radius:50%; background:var(--cyan);
  display:grid; place-items:center; transition:transform .25s ease;
}
.faq-toggle svg{ width:1.25rem; height:2.2rem; transform:rotate(90deg); transition:transform .3s ease; }
.faq-item.open .faq-toggle svg{ transform:rotate(-90deg); }
.faq-body{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s ease;
}
.faq-item.open .faq-body{ grid-template-rows:1fr; }
.faq-body > div{ overflow:hidden; }
.faq-body .inner{
  margin:0 5.6rem 0 5.4rem; border-top:3px solid rgba(251,232,216,.24);
  padding:3rem 0 3.9rem;
  display:grid; grid-template-columns:1fr 40.5rem; gap:4rem; align-items:start;
}
.faq-body h4{ margin:0 0 1.9rem; color:var(--cyan); font-size:2rem; font-weight:700; }
.faq-body .body{ max-width:49.3rem; }
.faq-body .btn{ margin-top:3.3rem; }
.faq-body figure{ margin:0; height:19rem; border-radius:3.75rem; overflow:hidden; }
.faq-body figure img{ width:100%; height:100%; object-fit:cover; }

/* =====================================================================
   STORY
   ===================================================================== */
.story{ padding:14rem 0 0; position:relative; z-index:1; }
.story .body{ max-width:58rem; margin-top:1.4rem; }
.story .body .click-click{ color:var(--cyan); font-weight:700; }
.story .exploded{
  position:absolute; right:0; top:-17rem; width:60rem;
  filter:drop-shadow(0 6rem 6rem rgba(0,0,0,.25));
  pointer-events:none;
}

/* =====================================================================
   CALENDAR
   ===================================================================== */
.calendar{ padding:21rem 0 0; }
.cal-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; }
.cal-arrows{ display:flex; gap:.9rem; padding-bottom:.6rem; }
.cal-arrow{
  width:4.4rem; height:4.4rem; border-radius:50%; background:var(--plum); color:var(--pink);
  display:grid; place-items:center; transition:transform .2s ease, opacity .2s ease;
}
.cal-arrow svg{ width:1rem; height:1.75rem; }
.cal-arrow:hover{ transform:scale(1.06); }
.cal-arrow[disabled]{ opacity:.35; cursor:default; transform:none; }
.cal-track{
  margin-top:4.9rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-left:max(3rem, calc((100% - var(--col)) / 2));
  padding-right:3rem;
  scroll-padding-left:max(3rem, calc((100% - var(--col)) / 2));
}
.cal-track::-webkit-scrollbar{ display:none; }
.cal-grid{ display:flex; gap:1.95rem; width:max-content; }
.cal{
  flex:0 0 34.83rem; scroll-snap-align:start; min-height:64.56rem; background:var(--plum); border-radius:var(--radius);
  padding:4.3rem 4.5rem 3rem; display:flex; flex-direction:column; position:relative;
}
.cal .day{ font-size:17.5rem; font-weight:700; line-height:1; text-align:center; margin:0; }
.cal .month{ text-align:center; color:var(--pink); font-size:1.75rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; margin:1.6rem 0 0; }
.cal .name{ font-size:2.5rem; font-weight:700; margin:4.2rem 0 0; }
.cal .place{ color:var(--pink); font-size:2rem; font-weight:200; margin:.9rem 0 0; }
.cal .text{ font-size:1.5rem; line-height:2rem; margin:2rem 0 0; max-width:27rem; }
.cal .nav{
  margin-top:auto; padding-top:3rem; display:inline-flex; align-items:center; gap:.9rem;
  color:var(--pink); font-size:1.875rem; font-weight:700;
}
.cal .nav svg{ width:2.75rem; height:2.75rem; }

/* =====================================================================
   SAMPLES
   ===================================================================== */
.samples{ padding:6.3rem 0 0; }
.samples .col{ display:grid; grid-template-columns:1fr 34.8rem; gap:3rem; align-items:center; }   /* picture and text centred on each other */
.samples .pile{ margin-left:10rem; width:52rem; max-width:none; }   /* the picture (1335×1212) carries its own shadows and fills its box, so no filter or offset */
.samples .text{ padding-top:0; }
.samples .text .body{ margin-top:1.4rem; }
.samples ul{ margin:0; padding-left:1.3em; }
.samples .cost{ color:var(--pink); font-size:2rem; font-weight:700; margin-top:2rem; }
.samples .btn{ margin-top:2.8rem; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact{ padding:14rem 0 0; }
.contact .col{ display:grid; grid-template-columns:1fr 71.6rem; gap:3rem; align-items:start; }
.contact .h2{ line-height:4.375rem; }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:2.9rem 1.95rem; }
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1 / -1; }
.field label{
  color:var(--pink); font-size:.875rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  padding-left:1.6rem; margin-bottom:.7rem;
}
.field input, .field textarea{
  font:inherit; font-size:1.5rem; color:#333; background:var(--white);
  border:1px solid rgba(70,115,108,.4); border-radius:2.8rem;
  height:4rem; padding:0 1.6rem; outline:none; width:100%;
}
.field textarea{ height:17.9rem; padding:1.8rem 1.6rem; resize:vertical; border-radius:2.8rem; }
.field input::placeholder, .field textarea::placeholder{ color:#c0c0c0; }
.field input:focus, .field textarea:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(161,226,236,.35); }
.form .actions{ grid-column:1 / -1; display:flex; justify-content:flex-end; margin-top:.4rem; }

/* =====================================================================
   FOOTER
   ===================================================================== */
footer{ padding:18rem 0 4rem; text-align:center; }
footer .tag{ color:var(--pink); font-size:1.25rem; font-weight:700; margin:0 0 calc(.9rem + 4px); }
footer .bar{
  background:var(--plum); border-radius:var(--radius); height:12.125rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
}
footer .bar img{ width:7.375rem; }
footer .bar small{ font-size:1rem; font-weight:700; }
footer .legal{ margin:1.5rem 0 0; font-size:1.25rem; font-weight:300; white-space:pre-wrap; }
footer .legal a{ text-decoration:underline; }

/* =====================================================================
   INTRO on tablets (700–1100px): the desktop intro, but the pin is smaller and pushed
   further sideways (TABLET_X in pinloc.js) so the statements get a real column.
   ===================================================================== */
@media (min-width:700px) and (max-width:1100px){
  .hero-logo{ width:30rem; left:calc(50% - .5rem); top:calc(50% + 2rem); }
  /* same column width (418px = 38rem at the 11px root used just above 1100px) and type as at
     1101–1200px – the column is only kept inside the screen */
  .step-text, .step-text.step-right.far{ width:max(38rem, 418px); }
  .step-text.step-right, .step-text.step-right.far{ left:min(calc(50% + 4rem), calc(100% - max(38rem, 418px) - 2rem)); }
  .step-text.step-left{ left:3rem; }
}

/* =====================================================================
   INTRO on phones (< 700px): pinned as on desktop, but with the portrait render – it fills
   the whole screen (cover, may run off the sides) and does not drift; statements at the bottom.
   ===================================================================== */
@media (max-width:699px){
  .scrolly{ height:600vh; }
  /* plain 100vh (= the large viewport on phones): a dynamic unit would re-lay out the stage and
     canvas while the address bar collapses, which is exactly when the scroll must feel smooth */
  .stage{ height:100vh; }
  .hero-object{ left:0; top:0; width:100%; height:100%; max-height:none; transform:none !important; }
  .hero-object img, .hero-object canvas{ width:100%; height:100%; object-fit:cover; object-position:center; }
  .hero-object .hero-first{ width:100%; height:100%; }
  .hero-logo{ left:50%; top:25%; width:min(64%, 26rem); filter:none; }   /* no shadow/blur filters: they make the fade stutter on phones */
  .scroll-hint{ bottom:5vh; }
  .step-text, .step-right, .step-left, .step-right.far{ top:auto; bottom:3.5rem; left:2rem; right:2rem; width:auto; transform:none; }
  .step-text h3{ font-size:2.4rem; line-height:1.15; margin-bottom:.9rem; }
  .step-text p{ font-size:1.4rem; line-height:1.45; }
  .done{ margin-top:-25vh; padding-bottom:8rem; }   /* the statements sit where "Done" rises in, so it enters only after the last one has faded (0.92–0.98) */
}

/* =====================================================================
   RESPONSIVE (<= 900px): single columns
   ===================================================================== */
@media (max-width:900px){
  html{ font-size:10px; }
  .col{ width:min(100% - 3rem, var(--col)); }
  .h2{ font-size:3.4rem; }
  .explore .intro .h2{ white-space:normal; }
  .body{ font-size:1.6rem; line-height:1.5; }

  .topnav{ top:2rem; gap:1rem; width:100%; justify-content:center; padding:0 1.5rem; }
  .topnav .btn{ height:3.8rem; padding:0 2rem; font-size:1.4rem; }
  .done{ padding-bottom:8rem; }
  .done .word{ font-size:10rem; padding-left:0; }
  .done svg{ width:60%; margin-top:0; }

  .video-card{ margin-top:3rem; border-radius:2rem; }
  .card .bar{ font-size:1.6rem; padding-left:2rem; height:5rem; left:.8rem; right:.8rem; bottom:.8rem; }
  .card .play{ width:5rem; height:5rem; }
  .card .play svg{ width:2rem; height:2rem; }

  .faq{ padding-top:8rem; }
  .faq-head{ grid-template-columns:1fr auto; padding:2.6rem 2.4rem; gap:1.5rem; }
  .faq-head .more{ display:none; }
  .faq-head h3{ font-size:2rem; }
  .faq-body .inner{ grid-template-columns:1fr; margin:0 2.4rem; }
  .faq-body figure{ height:24rem; }
  .story{ padding-top:8rem; }
  .story .exploded{ position:relative; right:auto; top:auto; width:45%; margin:0 auto 3rem; }
  .calendar{ padding-top:8rem; }
  .cal-head{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .cal-arrows{ padding-bottom:0; }
  .cal-track{ margin-top:3rem; padding-left:1.5rem; padding-right:1.5rem; scroll-padding-left:1.5rem; }
  .cal-grid{ gap:1.2rem; }
  .cal{ flex:0 0 80vw; min-height:0; padding:3rem 2.4rem 3.4rem; }
  .cal .text{ max-width:none; }
  .cal .nav{ padding-top:2.4rem; }
  .cal .day{ font-size:12rem; }
  .samples .col, .contact .col{ grid-template-columns:1fr; }
  .samples{ padding-top:4rem; }
  .samples .col{ gap:1rem; }
  .samples .pile{ margin:0 0 4rem 10%; width:82%; max-width:100%; transform:none; }   /* a little smaller, pushed right, with room below */
  .samples .text{ padding-top:0; }
  .contact{ padding-top:8rem; }
  .contact .col{ gap:3rem; }
  .form{ grid-template-columns:1fr; gap:2.4rem; }
  .field input{ height:5rem; }
  footer{ padding:8rem 0 3rem; }
  footer .legal{ white-space:normal; }
}
/* story picture on laptops / tablets: a second column, centred against the text instead of floating above it */
@media (min-width:901px) and (max-width:1500px){
  .story .col{ display:grid; grid-template-columns:minmax(0, 58rem) minmax(0, 1fr); column-gap:3rem; align-items:center; }
  .story .story-text{ grid-column:1; grid-row:1; }
  .story .exploded{ position:static; grid-column:2; grid-row:1; width:100%; max-width:60rem; justify-self:end; align-self:center; }
}
/* tablet / small desktop */
@media (min-width:901px) and (max-width:1200px){
  .samples .col, .contact .col{ grid-template-columns:1fr; }
  .samples .pile{ margin-left:0; width:100%; max-width:100%; }
  .samples .text{ padding-top:0; }
  .story .col{ grid-template-columns:minmax(0, 44rem) minmax(0, 1fr); }   /* narrower text so the picture keeps its size */
  .story .body{ max-width:44rem; }
  .faq-head .more{ display:none; }
  .faq-body .inner{ grid-template-columns:1fr; }
  .faq-body figure{ height:26rem; }
  .cal .day{ font-size:12rem; }
  .cal{ padding:3rem 2.6rem; }
}
/* intro statements just above the tablet band (1101–1200px): a slightly wider column, closer to the pin */
@media (min-width:1101px) and (max-width:1200px){
  .step-right, .step-right.far{ left:calc(50% + 4rem); width:38rem; }
  .step-left{ left:3rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* =====================================================================
   WordPress additions
   ===================================================================== */
.skip-link{ position:absolute; left:-999px; top:0; }
.skip-link:focus{ left:1rem; top:1rem; background:var(--green); color:var(--ink); padding:.5rem 1rem; z-index:100; }
.page-fallback{ padding:14rem 0 10rem; min-height:60vh; }
.page-fallback .body{ margin-top:2rem; max-width:60rem; }
.page-fallback .body a{ text-decoration:underline; }

/* core blocks used inside the Story / Sample kit blocks */
.body ul.wp-block-list{ margin:0 0 2rem; padding-left:1.3em; }
.body ul.wp-block-list:last-child{ margin-bottom:0; }
.body p.cost, .samples .cost{ color:var(--pink); font-size:2rem; font-weight:700; margin-top:2rem; }
.body p.click-click{ color:var(--cyan); font-weight:700; }
.body h3, .body h4{ margin:0 0 1rem; }
.faq-body .inner.no-image{ grid-template-columns:1fr; }
.samples .btn{ margin-top:2.8rem; }

/* Fluent Forms – styled like the design (the plugin ships its own CSS, hence !important) */
.form-wrap .fluentform{ width:100%; }
.form-wrap .fluentform form.frm-fluent-form{ display:block; margin:0; }
.form-wrap .fluentform form.frm-fluent-form > fieldset{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:2.9rem 1.95rem !important; }
.form-wrap .fluentform form.frm-fluent-form > fieldset > legend{ grid-column:1 / -1; }
.form-wrap .fluentform .ff-el-group{ margin:0 !important; display:flex !important; flex-direction:column !important; width:auto !important; }
.form-wrap .fluentform .ff-el-group.pl-full, .form-wrap .fluentform .ff_submit_btn_wrapper{ grid-column:1 / -1; }
.form-wrap .fluentform .ff-el-group.ff-el-form-top .ff-el-input--label,
.form-wrap .fluentform .ff-t-cell .ff-el-group .ff-el-input--label{ margin:0 0 .7rem !important; padding:0 0 0 1.6rem !important; width:auto !important; float:none; }   /* the second selector: groups inside columns / address fields (no ff-el-form-top class there) */
.form-wrap .fluentform .ff-el-input--label label{
  color:var(--pink) !important; font-size:.875rem !important; font-weight:700 !important; letter-spacing:.3em; text-transform:uppercase; margin:0; line-height:1.4;
}
.form-wrap .fluentform .ff-el-input--label.asterisk-right label:after{ color:var(--pink); }
.form-wrap .fluentform .ff-el-input--content{ width:100% !important; margin:0 !important; float:none; }
.form-wrap .fluentform .ff-el-form-control{
  font-family:inherit !important; font-size:1.5rem !important; color:#333 !important; background:var(--white) !important;
  border:1px solid rgba(70,115,108,.4) !important; border-radius:2.8rem !important; height:4rem !important; padding:0 1.6rem !important; width:100% !important; line-height:normal !important; box-shadow:none;
}
.form-wrap .fluentform textarea.ff-el-form-control{ height:17.9rem !important; padding:1.8rem 1.6rem !important; resize:vertical; }
.form-wrap .fluentform .ff-el-form-control::placeholder{ color:#c0c0c0; }
.form-wrap .fluentform .ff-el-form-control:focus{ border-color:var(--cyan) !important; box-shadow:0 0 0 3px rgba(161,226,236,.35) !important; outline:none; }
.form-wrap .fluentform .ff_submit_btn_wrapper{ display:flex !important; flex-direction:row !important; justify-content:flex-end !important; align-items:center !important; margin-top:.4rem !important; }
.form-wrap .fluentform .ff-btn-submit{
  font-family:inherit !important; font-size:1.5rem !important; font-weight:700 !important; color:var(--pink) !important; background:var(--plum) !important;
  border:0 !important; border-radius:2.8rem !important; height:4.375rem; width:auto !important; min-width:12.25rem; padding:0 2.5rem !important; cursor:pointer; transition:transform .2s ease, filter .2s ease;
}
.form-wrap .fluentform .ff_submit_btn_wrapper{ text-align:right; }
.form-wrap .fluentform .ff-btn-submit{ flex:0 0 auto !important; align-self:flex-end; }
.form-wrap .fluentform .ff-btn-submit:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.form-wrap .fluentform .ff-el-is-error .text-danger{ color:var(--pink); font-size:1.1rem; margin:.5rem 0 0 1.6rem; }
.form-wrap .fluentform .ff-message-success{ color:var(--white); font-size:1.5rem; line-height:1.5; border:1px solid rgba(255,255,255,.2); border-radius:2rem; padding:2.4rem 2.6rem; background:rgba(0,0,0,.15); }
.form-wrap .fluentform .ff-message-success p{ margin:0 0 1em; }
.form-wrap .fluentform .ff-message-success p:last-child{ margin-bottom:0; }
.form-wrap .fluentform .ff-message-success p:first-child{ font-weight:700; color:var(--pink); font-size:2rem; }
.form-wrap .fluentform .ff-el-help-message{ color:#c0c0c0; }
/* Fluent Forms columns (address fields, container elements): the plugin's 15px gap and 10px cell padding
   are replaced by the form's own row/column spacing, and the rows inside an address field are spaced
   like the grid rows. */
.form-wrap .fluentform form.frm-fluent-form > fieldset > .ff-t-container,
.form-wrap .fluentform form.frm-fluent-form > fieldset > .ff-name-address-wrapper{ grid-column:1 / -1; }
.form-wrap .fluentform .ff-name-address-wrapper{ margin:0 !important; width:auto !important; }
.form-wrap .fluentform .ff-name-address-wrapper > .ff-el-input--content{ display:flex; flex-direction:column; gap:2.9rem; }
.form-wrap .fluentform .ff-t-container{ display:flex !important; gap:1.95rem !important; margin:0 !important; width:100% !important; }
.form-wrap .fluentform .ff-t-cell{ flex:1 1 0 !important; min-width:0; width:auto !important; padding:0 !important; margin:0 !important; }
@media (max-width:900px){
  .form-wrap .fluentform form.frm-fluent-form > fieldset{ grid-template-columns:1fr !important; gap:2.4rem !important; }
  .form-wrap .fluentform .ff-el-form-control{ height:5rem !important; }
  .form-wrap .fluentform .ff-name-address-wrapper > .ff-el-input--content{ gap:2.4rem; }
  .form-wrap .fluentform .ff-t-container{ flex-direction:column; gap:2.4rem !important; }
  .order-form.form-wrap .fluentform form.frm-fluent-form > fieldset{ gap:1.9rem !important; }
  .order-form.form-wrap .fluentform .ff-name-address-wrapper > .ff-el-input--content,
  .order-form.form-wrap .fluentform .ff-t-container{ gap:1.5rem !important; }
}

/* debug hook used by screenshot tooling (#static): pinned stage as a fixed block */
body.no-pin .scrolly, body.no-pin .stage{ height:900px; }

/* Coming soon page (page template) */
.coming-soon-page .topnav{ display:none; }
.coming-soon{ min-height:100vh; min-height:100svh; display:grid; place-items:center; padding:2rem; }
.coming-soon h1{
  margin:0; color:var(--green); font-weight:700; letter-spacing:-.02em; text-align:center;
  font-size:clamp(2.5rem, 8vw, 9rem); line-height:1.05;
}

/* ---- debug overlay (press "x") ---- */
.pl-debug{ position:fixed; left:1rem; top:1rem; z-index:9999; padding:.5rem .75rem; font:600 13px/1.4 ui-monospace, Menlo, monospace; color:#fff; background:rgba(0,0,0,.55); border-radius:.4rem; pointer-events:none; white-space:pre; }
.pl-debug-on .hero-object canvas{ outline:1px solid rgba(255,255,255,.35); outline-offset:-1px; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.pl-debug-on .hero-object::after{ content:''; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:rgba(255,255,255,.6); }

/* ---- sample kit order form: takes the place of the text block ---- */
.samples .text.is-dimmed{ opacity:.7; }   /* while the order form is open the text stays, muted, under the panel */
/* the panel shares the text's grid cell so it lays over it (explicit placement keeps the text from moving) */
.samples .pile{ grid-column:1; grid-row:1; }
.samples .text{ grid-column:2; grid-row:1; }
.samples .order-form{ grid-column:2; grid-row:1; align-self:center; }
@media (max-width:1200px){   /* one-column layouts: text and panel share row 2, under the picture */
  .samples .text{ grid-column:1; grid-row:2; }
  .samples .order-form{ grid-column:1; grid-row:2; align-self:start; }
}
.order-form{
  position:relative; background:var(--plum); border-radius:2rem; padding:6rem 4rem 5.2rem;
  box-shadow:0 2rem 4rem rgba(0,0,0,.25);
  /* wider than the text column: overlaps the picture a little, centred on it vertically */
  width:48rem; justify-self:end; margin-left:-13.2rem; z-index:1;
}
@media (max-width:900px){
  .order-form{ width:100%; margin-left:0; padding:3rem 1.6rem 2.4rem; }
}
/* phones: the panel inside a full-page overlay */
.order-modal{ position:fixed; inset:0; z-index:60; background:rgba(11,45,38,.85); display:grid; place-items:center; padding:1.5rem; overflow:auto; }
.order-modal .order-form{ max-width:44rem; width:100%; margin:auto; }
body.order-modal-open{ overflow:hidden; }
.order-form .order-close{
  position:absolute; top:1.2rem; right:1.2rem; width:2.75rem; height:2.75rem; border:0; border-radius:50%;
  background:rgba(255,255,255,.08); color:var(--pink); cursor:pointer; display:grid; place-items:center; padding:0;
}
.order-form .order-close svg{ width:1.1rem; height:1.1rem; }
.order-form .order-close:hover{ background:rgba(255,255,255,.16); }
.order-form.form-wrap .fluentform form.frm-fluent-form > fieldset{ grid-template-columns:1fr !important; gap:1.9rem !important; }
.order-form.form-wrap .fluentform .ff-name-address-wrapper > .ff-el-input--content{ gap:1.5rem; }   /* address rows a little tighter than the other rows */
.order-form.form-wrap .fluentform .ff-t-container{ gap:1.5rem !important; }
.order-form.form-wrap .fluentform .ff-el-form-control{ border-color:transparent !important; }
.order-form.form-wrap .fluentform .ff_submit_btn_wrapper{ justify-content:center !important; margin-top:1.1rem !important; }
.order-form.form-wrap .fluentform .ff-btn-submit{ background:var(--pink) !important; color:var(--plum) !important; align-self:center; min-width:18rem; height:4.8rem; }
.order-form.form-wrap .fluentform .ff-el-group.ff-el-form-top .ff-el-input--label,
.order-form.form-wrap .fluentform .ff-t-cell .ff-el-group .ff-el-input--label{ margin-bottom:.35rem !important; }
.order-form.form-wrap .fluentform .ff-el-input--label.asterisk-right label:after{ display:none; }   /* no required asterisks, as in the design */
.order-form.form-wrap .fluentform .ff-message-success{ background:rgba(255,255,255,.08); }