/* ==========================================================================
   Phase — Branding, Product design, Domain acquisition (services/*)
   The flow system (css/flow.css) in the poster theme (css/home.css: the
   palette, the sticker hero, the manifesto, the process cards, the kind
   words and the close; js/home.js). Each page takes its service's colour
   from the homepage for the disc and the manifesto's page:
     branding — red · product design — green · domain acquisition — pink
   and adds one drawn piece:
   - branding: one mark in four places (site, van, storefront, socials)
   - product design: an app drawn in the palette, its parts popping on
   - domain acquisition: a name worked from "taken" to "yours"
   (js/service.js plays the last two.)
   ========================================================================== */

body.bd-page{--hm-ground:var(--p-red)}
body.pd-page{--hm-ground:var(--p-green)}
body.da-page{--hm-ground:var(--p-pink)}

/* ==========================================================================
   HERO + MANIFESTO
   ========================================================================== */
.sv-page .hm-sun{--s:clamp(250px,28vw,480px);left:65%;top:52%}
.sv-page .hm-hero h1{font-size:clamp(3.4rem,11.5vw,11.5rem);letter-spacing:-.055em}
.da-page .hm-hero h1{font-size:clamp(2.8rem,9vw,9.4rem)}
.sv-page .hm-hero__sub{max-width:30em;color:rgba(10,10,10,.82)}
.bd-page .hm-manifesto .fl-lit-accent .fl-w,
.bd-page .hm-manifesto .fl-lit-accent:not(:has(.fl-w)),
.pd-page .hm-manifesto .fl-lit-accent .fl-w,
.pd-page .hm-manifesto .fl-lit-accent:not(:has(.fl-w)){color:#fff}
.da-page .hm-manifesto .fl-lit-accent .fl-w,
.da-page .hm-manifesto .fl-lit-accent:not(:has(.fl-w)){color:var(--p-blue)}
.fl-creds--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ==========================================================================
   BRANDING — one mark, four places
   ========================================================================== */
.bd-everywhere{padding:clamp(110px,12vw,170px) 0 clamp(90px,10vw,140px);background:var(--fl-bg)}
.bd-everywhere .fl-h2{max-width:16ch}
.bd-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.bd-tile{
  position:relative;
  margin:0;
  padding:clamp(20px,2.6vw,36px) clamp(16px,2vw,28px) clamp(54px,5vw,70px);
  border-radius:32px;
  background:var(--c);
  box-shadow:0 40px 70px -50px rgba(10,10,10,.55);
}
.bd-tile svg{display:block;width:100%;height:auto;overflow:visible;transition:transform .6s var(--fl-ease)}
.bd-tile:hover svg{transform:rotate(-2deg) scale(1.03)}
.bd-tile figcaption{
  position:absolute;
  left:clamp(18px,2vw,28px);
  bottom:clamp(16px,1.8vw,24px);
  padding:8px 14px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.92rem;
  color:#fff;
  background:#0a0a0a;
  transform:rotate(-2deg);
}
.bd-tile:nth-child(even) figcaption{transform:rotate(2deg)}

/* ==========================================================================
   PRODUCT DESIGN — an app, drawn
   ========================================================================== */
.pd-system{padding:clamp(120px,13vw,190px) 0 clamp(100px,11vw,160px);background:var(--fl-bg)}
.pd-system__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,100px);align-items:center}
.pd-system .fl-h2{max-width:11ch}
.pd-list{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.pd-list li{padding:16px 18px;border-radius:18px;border:2px solid #0a0a0a;background:var(--fl-surface);line-height:1.5;color:rgba(10,10,10,.72)}
.pd-list b{display:block;margin-bottom:2px;font-size:1.05rem;color:#0a0a0a}
.pd-stage{position:relative;padding:clamp(34px,4.6vw,66px) clamp(20px,3.4vw,52px);border-radius:40px;background:var(--p-green)}
.pd-stage__tag,.da-stage__tag{position:absolute;right:18px;top:16px;padding:4px 10px;border-radius:var(--radius-pill);border:1.5px solid rgba(10,10,10,.5);font-family:var(--fl-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.65)}
.pd-app{position:relative;z-index:1;overflow:hidden;border-radius:20px;background:var(--fl-surface);box-shadow:0 40px 70px -36px rgba(10,10,10,.6);transform:rotate(-1.5deg)}
.pd-app__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#0a0a0a}
.pd-app__bar i{width:9px;height:9px;border-radius:50%;background:var(--p-red)}
.pd-app__bar i:nth-child(2){background:var(--p-yellow)}
.pd-app__bar i:nth-child(3){background:var(--p-green)}
.pd-app__bar em{margin-left:10px;font-style:normal;font-family:var(--fl-mono);font-size:.7rem;color:rgba(255,255,255,.6)}
.pd-app__body{display:grid;grid-template-columns:52px 1fr;min-height:clamp(260px,26vw,340px)}
.pd-app__side{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 0;background:var(--fl-bg-2)}
.pd-app__side b{width:24px;height:24px;border-radius:8px;background:var(--p-red)}
.pd-app__side i{width:22px;height:8px;border-radius:4px;background:rgba(10,10,10,.18)}
.pd-app__side i.is-on{background:#0a0a0a}
.pd-app__main{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px}
.pd-app__head{display:flex;align-items:center;justify-content:space-between}
.pd-app__h{font-weight:700;font-size:1.05rem}
.pd-app__new{padding:6px 12px;border-radius:var(--radius-pill);font-size:.78rem;font-weight:600;color:#fff;background:var(--p-blue)}
.pd-app__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pd-app__stats div{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:var(--c)}
.pd-app__stats s,.pd-app__rows s{display:block;height:7px;border-radius:4px;background:rgba(10,10,10,.22);text-decoration:none}
.pd-app__stats s:first-child{width:50%}
.pd-app__stats s:last-child{width:80%;height:12px;background:rgba(10,10,10,.75)}
.pd-app__chart{display:flex;align-items:flex-end;gap:8px;height:clamp(70px,7vw,96px);padding:10px 12px 0;border-radius:12px;background:var(--fl-bg-2)}
.pd-app__chart i{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:#0a0a0a;transform-origin:bottom}
.pd-app__chart i:nth-child(3n+2){background:var(--p-blue)}
.pd-app__chart i:last-child{background:var(--p-red)}
.pd-app__rows{display:flex;flex-direction:column;gap:8px}
.pd-app__rows div{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--fl-bg-2)}
.pd-app__rows s{flex:1;max-width:50%}
.pd-ava{width:22px;height:22px;border-radius:50%;background:var(--c)}
.pd-chip{margin-left:auto;padding:3px 9px;border-radius:var(--radius-pill);font-family:var(--fl-mono);font-size:.62rem;letter-spacing:.08em;color:#0a0a0a;background:var(--p-green)}
.pd-chip--2{background:var(--p-yellow)}
.pd-part{position:absolute;z-index:2;filter:drop-shadow(0 14px 18px rgba(10,10,10,.28))}
.pd-part--btn{left:clamp(-24px,-1.6vw,-10px);bottom:clamp(30px,4vw,60px);padding:14px 22px;border-radius:var(--radius-pill);font-weight:700;font-size:1rem;color:#fff;background:var(--p-red);transform:rotate(-8deg)}
.pd-part--toggle{right:clamp(-20px,-1.4vw,-8px);top:clamp(40px,5vw,70px);width:74px;height:40px;padding:5px;border-radius:var(--radius-pill);background:#0a0a0a;transform:rotate(10deg)}
.pd-part--toggle i{display:block;width:30px;height:30px;border-radius:50%;background:var(--p-yellow);transform:translateX(34px)}
.pd-part--cursor{right:24%;bottom:18%;width:34px;height:34px}
.pd-part--cursor svg{width:100%;height:100%}

/* ==========================================================================
   DOMAIN ACQUISITION — taken, then yours
   ========================================================================== */
.da-founder{padding:clamp(120px,13vw,190px) 0 clamp(100px,11vw,160px);background:var(--fl-bg)}
.da-founder__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center}
.da-founder .fl-h2{max-width:12ch}
.da-founder__story{margin-top:clamp(22px,2.6vw,32px)}
.da-founder .fl-lede{max-width:50ch}
.da-stage{position:relative;padding:clamp(40px,5vw,72px) clamp(20px,3.4vw,52px);border-radius:40px;background:var(--p-pink)}
.da-stage__sticker{position:absolute;left:clamp(-30px,-2vw,-12px);top:clamp(-46px,-3.4vw,-24px);z-index:2;width:clamp(70px,7vw,104px);height:auto;transform:rotate(-12deg);filter:drop-shadow(0 16px 20px rgba(10,10,10,.22))}
.da-card{position:relative;z-index:1;padding:clamp(14px,1.6vw,20px);border-radius:26px;background:var(--fl-surface);box-shadow:0 40px 70px -36px rgba(10,10,10,.6);transform:rotate(1.5deg)}
.da-card__bar{display:flex;align-items:center;gap:12px;height:clamp(54px,4.8vw,64px);padding:0 10px 0 20px;border-radius:var(--radius-pill);border:2.5px solid #0a0a0a}
.da-card__bar svg{flex:none;width:20px;height:20px}
.da-card__name{font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:600;letter-spacing:-.01em}
.da-card__name b{color:var(--p-blue)}
.da-card__status{margin-left:auto;padding:8px 14px;border-radius:var(--radius-pill);font-family:var(--fl-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--p-red);transition:background-color .35s,color .35s}
.da-card__status[data-state="talks"]{color:#0a0a0a;background:var(--p-yellow)}
.da-card__status[data-state="yours"]{color:#0a0a0a;background:var(--p-green)}
.da-card__steps{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.da-card__steps li{display:flex;align-items:center;gap:14px;min-height:54px;padding:10px 16px;border-radius:16px;font-weight:600;background:var(--fl-bg-2)}
.da-card__steps i{flex:none;width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(10,10,10,.3);transition:background-color .3s,border-color .3s}
.da-card__steps li.is-done i{border-color:#0a0a0a;background:var(--p-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%230a0a0a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.da-stamp{
  position:absolute;
  right:clamp(-20px,-1.4vw,-8px);
  bottom:clamp(-30px,-2.4vw,-16px);
  z-index:2;
  padding:14px 26px;
  border-radius:var(--radius-pill);
  font-size:clamp(1.6rem,2.6vw,2.3rem);
  font-weight:700;
  letter-spacing:-.03em;
  color:#fff;
  background:#0a0a0a;
  box-shadow:0 18px 30px -16px rgba(10,10,10,.7);
  transform:rotate(-8deg);
}
.da-why{padding:clamp(100px,11vw,160px) 0;background:var(--fl-bg-2)}
.da-why__lede{max-width:62ch}
.da-why__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.da-why__card{display:flex;flex-direction:column;min-height:clamp(240px,22vw,300px);padding:clamp(24px,2.6vw,36px);border-radius:30px;color:var(--fg);background:var(--c);box-shadow:0 34px 60px -46px rgba(10,10,10,.55)}
.da-why__card:nth-child(2){transform:rotate(1deg)}
.da-why__n{font-family:var(--fl-mono);font-size:.78rem;letter-spacing:.16em;opacity:.75}
.da-why__card h3{margin-top:auto;font-size:clamp(1.4rem,2vw,1.8rem);font-weight:600;letter-spacing:-.03em;line-height:1.12}

/* ==========================================================================
   SHARED — work, words, close
   ========================================================================== */
.sv-work .fl-run__stage{padding-top:clamp(120px,12vw,170px)}
.sv-page .fl-process{background:var(--fl-bg)}
.sv-words{padding:clamp(100px,11vw,160px) 0 clamp(50px,6vw,80px);background:var(--fl-bg-2)}
.sv-words .fl-head{margin-bottom:clamp(30px,3.4vw,50px)}
.sv-cta .fl-cta__title{max-width:12ch}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px){
  .fl-creds--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .pd-system__grid,
  .da-founder__grid{grid-template-columns:minmax(0,1fr)}
  .da-why__grid{grid-template-columns:minmax(0,1fr)}
  .da-why__card{min-height:0}
  .da-why__card h3{margin-top:36px}
}
@media (max-width:640px){
  .bd-tiles{grid-template-columns:minmax(0,1fr)}
  .fl-creds--4{grid-template-columns:minmax(0,1fr)}
  .pd-app__body{grid-template-columns:40px 1fr}
  .pd-part--btn{font-size:.85rem;padding:11px 16px}
}