/* ==========================================================================
   Phase — Web Design (services/web-design)
   The flow system (css/flow.css) in the poster theme (css/home.css: the
   palette, the sticker hero, the manifesto and the close; js/home.js), with
   pieces borrowed from around the site: the homepage's website run and
   process cards, the pricing page's dealt packages and location-pages card
   (css/pricing.css, js/pricing.js). What's particular to this page:

   - a blue disc (web design's colour on the homepage), so the manifesto is
     white on blue with a yellow accent
   - the platforms pair: Squarespace (Circle Gold) and custom code
   ========================================================================== */

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

/* ==========================================================================
   HERO + MANIFESTO
   ========================================================================== */
.wd-page .hm-sun{--s:clamp(250px,28vw,480px);left:65%;top:52%}
.wd-page .hm-hero h1{font-size:clamp(3.6rem,12.5vw,12.5rem);letter-spacing:-.055em}
.wd-page .hm-hero__sub{color:rgba(10,10,10,.82)}
.wd-page .hm-manifesto{
  color:#fff;
  --fl-ink:#fff;
  --fl-faint:rgba(255,255,255,.62);
  --fl-dim:rgba(255,255,255,.8);
  --fl-line-2:rgba(255,255,255,.3);
}
.wd-page .hm-manifesto .fl-lit-accent .fl-w,
.wd-page .hm-manifesto .fl-lit-accent:not(:has(.fl-w)){color:var(--p-yellow)}

/* ==========================================================================
   PLATFORMS
   ========================================================================== */
.wd-work .fl-run__stage{padding-top:clamp(120px,12vw,170px)}
.wd-platforms{padding:clamp(100px,11vw,160px) 0 clamp(40px,5vw,70px);background:var(--fl-bg)}
.wd-plat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
.wd-plat__card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(22px,2.8vw,36px);
  border-radius:28px;
  background:var(--fl-surface);
  border:1px solid var(--fl-line);
  box-shadow:0 34px 60px -48px rgba(60,40,10,.5);
}
.wd-plat__art{
  display:grid;
  place-items:center;
  aspect-ratio:2.1;
  margin-bottom:10px;
  border-radius:20px;
  overflow:hidden;
}
.wd-plat__card--sq .wd-plat__art{background:var(--p-yellow)}
.wd-plat__card--sq .wd-plat__art img{width:min(72%,340px);height:auto}
.wd-plat__card--code .wd-plat__art{background:#0a0a0a}
.wd-plat h3{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.wd-plat p{max-width:46ch;color:var(--fl-dim);line-height:1.6}
/* a little code window, drawn rather than screenshotted */
.wd-code{
  width:min(80%,360px);
  border-radius:14px;
  overflow:hidden;
  background:#16161a;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
  transform:rotate(-3deg);
}
.wd-code__bar{display:flex;gap:6px;padding:10px 12px;background:#1f1f24}
.wd-code__bar i{width:9px;height:9px;border-radius:50%;background:var(--p-red)}
.wd-code__bar i:nth-child(2){background:var(--p-yellow)}
.wd-code__bar i:nth-child(3){background:var(--p-green)}
.wd-code code{display:block;padding:18px 18px 22px;font-family:var(--fl-mono);font-size:clamp(.9rem,1.4vw,1.15rem);color:#fff}
.wd-code b{color:var(--p-pink);font-weight:500}
.wd-code em{font-style:normal;color:var(--p-yellow)}

/* ==========================================================================
   PACKAGES / KIND WORDS / QUESTIONS
   ========================================================================== */
.wd-page .pr-packages{background:var(--fl-bg)}
.wd-page .pr-loc{background:var(--fl-bg)}
.wd-page .fl-process{background:var(--fl-bg-2)}
.wd-words{padding:clamp(100px,11vw,160px) 0 clamp(40px,5vw,70px)}
.wd-words .fl-head{margin-bottom:clamp(40px,4vw,60px)}
.wd-words .marquee{margin-top:clamp(60px,7vw,90px)}
.wd-faq{padding:clamp(90px,10vw,150px) 0 clamp(60px,7vw,100px)}
.wd-faq .faq-list{max-width:860px;margin:0 auto}
.wd-faq__more{margin-top:28px;text-align:center}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:800px){
  .wd-plat{grid-template-columns:1fr}
}