/* ==========================================================================
   Phase — pricing page
   The flow system (css/flow.css) in the poster theme (css/home.css supplies
   the palette, the sticker hero, the manifesto and the close; js/home.js
   drives them). What's particular to this page:

   - the hero's disc is blue, so the manifesto it becomes is blue on white
   - the four packages are dealt onto the table as you scroll (a pinned
     stage, js/pricing.js); each card has a colour-blocked top, and "Most
     popular" goes on as a sticker. Without JS, on small screens and with
     reduced motion they're simply a grid.
   - the "three location pages" card, with three map pins that drop in
   ========================================================================== */

body.pricing{--hm-ground:var(--p-blue)}

/* ==========================================================================
   HERO + MANIFESTO
   ========================================================================== */
.pricing .hm-sun{--s:clamp(250px,28vw,480px);left:64%;top:55%}
.pricing .hm-hero h1{font-size:clamp(4rem,15vw,14.5rem);letter-spacing:-.06em}
/* white on the blue page */
.pricing .hm-manifesto{
  color:#fff;
  --fl-ink:#fff;
  --fl-faint:rgba(255,255,255,.62);
  --fl-dim:rgba(255,255,255,.78);
  --fl-line-2:rgba(255,255,255,.3);
}
.pricing .hm-manifesto .fl-lit-accent .fl-w,
.pricing .hm-manifesto .fl-lit-accent:not(:has(.fl-w)){color:var(--p-yellow)}

/* ==========================================================================
   PACKAGES — the deal
   ========================================================================== */
.pr-packages{position:relative;padding:clamp(110px,12vw,170px) 0 clamp(70px,8vw,110px)}
.pr-packages__stage{width:100%}
.pr-packages .fl-label{margin-bottom:clamp(20px,3vh,34px)}

/* each card spans the grid's five rows and adopts them (subgrid), so the
   price blocks, descriptions, payment lines, lists and buttons line up
   across all four however long any one runs */
.pr-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(5,auto);
  gap:0 clamp(14px,1.6vw,22px);
}
.pr-card{
  --fg:#0a0a0a;
  position:relative;
  grid-row:span 5;
  display:grid;
  grid-template-rows:subgrid;
  border-radius:24px;
  background:var(--fl-surface);
  border:1px solid var(--fl-line);
  box-shadow:0 34px 60px -44px rgba(60,40,10,.55);
  will-change:transform;
}
.pr-card__top{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  min-height:clamp(140px,19vh,180px);
  padding:22px 24px 20px;
  border-radius:23px 23px 0 0;
  color:var(--fg);
  background:var(--c);
}
.pr-card h3{font-family:var(--fl-mono);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.pr-price{display:flex;align-items:baseline;gap:8px;line-height:.85;color:inherit}
.pr-price small{font-size:.92rem;font-weight:600;letter-spacing:-.01em;opacity:.8}
.pr-price b{font-size:clamp(2.6rem,3.6vw,3.6rem);font-weight:700;letter-spacing:-.055em}
.pr-card__for{padding:20px 24px 0;font-size:.97rem;line-height:1.5;color:var(--fl-dim)}
.pr-card__plans{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 24px 0;
  font-family:var(--fl-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fl-faint);
}
.pr-card__plans::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.pr-card ul{display:flex;flex-direction:column;gap:10px;padding:20px 24px 0}
.pr-card li{position:relative;padding-left:28px;font-size:.97rem;line-height:1.4}
/* a check in a dot of the card's colour */
.pr-card li::before{
  content:"";
  position:absolute;
  left:0;top:1px;
  width:19px;height:19px;
  border-radius:50%;
  background:var(--c);
}
.pr-card li::after{
  content:"";
  position:absolute;
  left:7px;top:4.5px;
  width:5px;height:9px;
  border:solid var(--fg);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.pr-card .fl-btn{width:calc(100% - 48px);height:48px;margin:24px 24px 24px;align-self:end;font-size:.94rem}

/* the asterisk on the page counts jumps to the location-pages card */
.pr-fn{
  display:inline-block;
  margin-left:3px;
  font-weight:800;
  font-size:1.3em;
  line-height:1;
  vertical-align:-.1em;
  color:var(--p-red);
  transition:transform .15s ease;
}
.pr-fn:hover{transform:scale(1.25)}

/* most popular: lifted, with a sticker */
.pr-card--pop{top:-14px;box-shadow:0 44px 70px -40px rgba(60,40,10,.6)}
.pr-badge{
  position:absolute;
  right:16px;
  top:-16px;
  z-index:2;
  padding:9px 14px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(10,10,10,.08);
  box-shadow:0 1px 2px rgba(10,10,10,.08),0 12px 24px -8px rgba(10,10,10,.3);
  font-family:var(--fl-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#0a0a0a;
  transform:rotate(6deg);
}
.pr-badge::before{content:"★ ";color:var(--p-red)}

/* custom build: a different kind of tier, so a different kind of card */
.pr-card--custom{background:#0a0a0a;border-color:#0a0a0a;color:#fff;--fl-dim:rgba(255,255,255,.72);--fl-faint:rgba(255,255,255,.55)}
.pr-card--custom .pr-card__top{color:#fff;background:transparent;border-bottom:1px solid rgba(255,255,255,.12)}
.pr-card--custom .pr-price b{color:var(--p-yellow)}

.pr-tax{margin-top:clamp(22px,3vh,34px);text-align:center;font-family:var(--fl-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fl-faint)}

/* pinned (js/pricing.js): a sticky stage the cards are dealt onto */
.pr-packages.is-pinned{height:210vh;padding:0}
.pr-packages.is-pinned .pr-packages__stage{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding-top:calc(var(--fl-nav) - 6px);
}

/* ==========================================================================
   LOCATION PAGES
   ========================================================================== */
.pr-loc{padding:clamp(40px,6vw,80px) 0 clamp(110px,12vw,160px)}
.pr-loc__card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:clamp(28px,5vw,80px);
  padding:clamp(30px,4.5vw,64px);
  border-radius:32px;
  background:var(--p-pink);
  color:#0a0a0a;
  --fl-faint:rgba(10,10,10,.55);
  --fl-dim:rgba(10,10,10,.74);
  --fl-line-2:rgba(10,10,10,.25);
}
.pr-loc__card .fl-h2{font-size:clamp(2rem,3.8vw,3.4rem);max-width:16ch}
.pr-loc__card .fl-lede{max-width:52ch}
.pr-loc__card .fl-label span{font-size:1.3em;color:var(--p-red)}
/* three pins on a little paper disc */
.pr-pins{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(6px,1vw,14px);
  width:clamp(200px,22vw,300px);
  aspect-ratio:1;
  padding-bottom:30%;
  border-radius:50%;
  background:#fff5ee;
}
.pr-pin{display:block;width:26%;height:auto;filter:drop-shadow(0 10px 10px rgba(60,20,40,.22))}
.pr-pin:nth-child(2){width:32%;margin-bottom:12%}
.pr-pin__body{fill:var(--c)}
.pr-pin__eye{fill:#fff5ee}

/* ==========================================================================
   PRICED PER PROJECT — the services without a set price, one colour each
   (the same colours as the home page's service list)
   ========================================================================== */
.pr-scope{padding:0 0 clamp(110px,12vw,160px)}
.pr-scope__head{max-width:780px;margin-bottom:clamp(30px,4vw,48px)}
.pr-scope__head .fl-h2{max-width:14ch}
.pr-scope__head .fl-lede{max-width:54ch;margin-top:18px}
.pr-scope__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.pr-scope__card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  min-height:300px;
  padding:clamp(24px,2.6vw,34px);
  border-radius:24px;
  color:var(--fg);
  background:var(--c);
  box-shadow:0 34px 60px -44px rgba(60,40,10,.55);
  transition:transform .35s var(--fl-ease);
}
.pr-scope__card:hover{transform:translateY(-6px) rotate(-1deg)}
.pr-scope__art{position:absolute;right:-22px;top:-26px;width:clamp(96px,9vw,128px);height:auto;rotate:var(--r);pointer-events:none;transition:transform .5s var(--fl-ease)}
.pr-scope__card:hover .pr-scope__art{transform:rotate(14deg) scale(1.08)}
.pr-scope__tag{
  padding:7px 12px;
  border:1.5px solid currentColor;
  border-radius:99px;
  font-family:var(--fl-mono);
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pr-scope__card h3{margin-top:clamp(28px,4vw,56px);font-size:clamp(1.7rem,2.3vw,2.2rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.pr-scope .pr-scope__card p{max-width:30ch;font-size:1rem;line-height:1.5;color:inherit;opacity:.82}
.pr-scope__go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;font-size:.95rem;font-weight:600}
.pr-scope__go svg{width:15px;height:15px;transition:transform .3s var(--fl-ease)}
.pr-scope__card:hover .pr-scope__go svg{transform:translateX(4px)}
.pr-scope__actions{margin-top:clamp(28px,3.4vw,42px)}
@media (max-width:900px){
  .pr-scope__grid{grid-template-columns:minmax(0,1fr)}
  .pr-scope__card{min-height:0}
}

/* ==========================================================================
   CLOSE — not sure which fits?
   ========================================================================== */
.pr-cta .fl-cta__title{max-width:11ch}
.pr-cta .ai-summary{margin-top:30px}
.pr-cta .ai-summary__icon-circle{color:#0a0a0a;background:var(--fl-surface)}
.pr-cta .ai-summary__icon:hover .ai-summary__icon-circle{border-color:#0a0a0a}
.pr-human{margin-top:34px;font-size:1rem;color:var(--fl-dim)}
.pr-human a{color:var(--fl-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--p-yellow)}
.pr-human a:hover{text-decoration-color:var(--p-red)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  /* row gaps would also open up inside each card's subgrid; space the
     wrapped rows with a margin instead */
  .pr-grid{grid-template-columns:repeat(2,1fr)}
  .pr-card{margin-bottom:28px}
}
@media (max-width:900px){
  .pr-loc__card{grid-template-columns:1fr;justify-items:start}
  .pr-pins{width:180px}
  .pr-card--pop{top:0}
}
@media (max-width:640px){
  .pr-grid{grid-template-columns:1fr}
}