/* Lip Blush & Brows case study: the studio's own rose and gold, heart-on-a-hairline device, centred poster layout.
   The studio's serif and script faces are left out (no serif fonts); Lato is the site's own body face. */
.cs-lb{--rose:#B32B50;--rose-d:#831F3B;--gold:#C9A64F;--gold-d:#7D641B;--ink:#1C1512;--body:#55493B;--tint:#FBF2F5;
  --line:rgba(201,166,79,.45);
  background:#fff;color:var(--body);font-family:Lato,system-ui,sans-serif;font-size:18px;line-height:1.7;overflow:hidden}
.cs-lb section{padding:0;border:0}
.cs-lb section.tight{padding:56px 0 24px}
.cs-lb .w{max-width:1180px;margin:0 auto;padding:0 28px}
.cs-lb h1,.cs-lb h2,.cs-lb h3,.cs-lb h4{font-family:Lato,system-ui,sans-serif;color:var(--ink);max-width:none;letter-spacing:0}
.cs-lb h2{font-weight:300;font-size:clamp(28px,3.2vw,40px);line-height:1.2;letter-spacing:.01em;margin-bottom:18px}
.cs-lb h3{font-weight:700;font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-bottom:14px}
.cs-lb article{max-width:none;margin:0}
.cs-lb article h3{margin:0 0 10px}
.cs-lb article p{margin:0;font-size:inherit;color:var(--body)}

/* heart on a hairline */
.cs-lb .hl{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 26px;color:var(--gold)}
.cs-lb .hl i{display:block;width:96px;height:1px;background:var(--gold)}
.cs-lb .hl span{font-size:14px;line-height:1}

/* poster header */
.cs-lb .poster{text-align:center;max-width:860px;margin:0 auto;padding:72px 28px 56px}
.cs-lb .sc{font-size:12.5px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-d);margin-bottom:26px}
.cs-lb .wm{font-weight:300;font-size:clamp(34px,5.6vw,68px);letter-spacing:.16em;text-transform:uppercase;color:var(--rose);line-height:1.05}
.cs-lb .wm em{font-style:normal;color:var(--gold);font-weight:400}
.cs-lb .by{font-size:15px;letter-spacing:.42em;text-transform:uppercase;color:var(--rose-d);margin:12px 0 26px}
.cs-lb h1{font-weight:900;font-size:clamp(30px,3.6vw,46px);line-height:1.15;letter-spacing:-.01em;margin:0 auto 18px;max-width:20ch}
.cs-lb .dek{font-size:19px;max-width:42em;margin:0 auto 30px}
.cs-lb .btn-rose{display:inline-block;background:var(--rose);color:#fff;text-decoration:none;border-radius:999px;padding:16px 34px;
  font-size:13.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.cs-lb .btn-rose:hover{background:var(--rose-d)}

/* triptych: home page centred, two pages tucked under its corners */
.cs-lb .trip{position:relative;max-width:1180px;margin:0 auto 112px;padding:0 28px}
.cs-lb .trip figure{margin:0}
.cs-lb .trip img{width:100%;height:auto;display:block}
.cs-lb .trip .main{width:74%;margin:0 auto;border:1px solid var(--gold);padding:10px;background:#fff;position:relative;z-index:2;
  box-shadow:0 30px 70px rgba(131,31,59,.14)}
.cs-lb .trip .side{position:absolute;bottom:56px;width:27%;border:1px solid var(--gold);padding:8px;background:#fff;z-index:3;
  box-shadow:0 18px 40px rgba(131,31,59,.16)}
.cs-lb .trip .side.l{left:28px}
.cs-lb .trip .side.r{right:28px}
.cs-lb .trip figcaption{text-align:center;font-size:14px;color:var(--gold-d);margin-top:18px}

/* look and name: two columns, centred text */
.cs-lb .look{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;padding-bottom:112px;text-align:center}
.cs-lb .look>div{border-top:1px solid var(--line);padding-top:36px}

/* drive-time rings: the unique component */
.cs-lb .map{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:96px 0}
.cs-lb .map-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.cs-lb .map-text .hl{justify-content:flex-start}
.cs-lb .groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:30px}
.cs-lb .grp h4{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);margin-bottom:8px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.cs-lb .grp ul{list-style:none;margin:0;padding:0;font-size:16px;line-height:1.85;color:var(--ink)}
.cs-lb .map-fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:4%}
.cs-lb .rings{width:100%;height:auto;overflow:visible}
.cs-lb .rings .rg{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:3 5}
.cs-lb .rings .rl{font:700 11px Lato,sans-serif;letter-spacing:.14em;fill:var(--gold-d);text-transform:uppercase}
.cs-lb .rings .pt{fill:var(--rose)}
.cs-lb .rings .tn{font:400 14px Lato,sans-serif;fill:var(--ink)}
.cs-lb .rings .tn tspan{font-weight:700;fill:var(--rose)}
.cs-lb .rings .home{fill:var(--rose)}
.cs-lb .rings .heart{fill:#fff}
.cs-lb .rings .bn{font:900 12px Lato,sans-serif;letter-spacing:.24em;fill:var(--rose)}
.cs-lb .map-fig figcaption{font-size:12.5px;color:var(--gold-d);text-align:center;max-width:24em;margin-top:-4px}

/* the quiz split */
.cs-lb .quiz{padding-top:112px;padding-bottom:112px}
.cs-lb .quiz-head{text-align:center;max-width:780px;margin:0 auto 56px}
.cs-lb .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.cs-lb .col ul{list-style:none;margin:0 0 18px;padding:0}
.cs-lb .col li{padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink);display:flex;gap:12px;align-items:baseline}
.cs-lb .stays{text-align:right}
.cs-lb .stays li{justify-content:flex-end;color:#8a7f72}
.cs-lb .stays li::after{content:"\25CF";color:#d9cfc2;font-size:10px}
.cs-lb .sent li::before{content:"\2665";color:var(--rose);font-size:13px}
.cs-lb .sent p{font-size:15px}
.cs-lb .qshot{margin:0;border:1px solid var(--gold);padding:10px;background:#fff;box-shadow:0 24px 60px rgba(131,31,59,.12)}
.cs-lb .qshot img{width:100%;height:auto}
.cs-lb .qshot figcaption{font-size:13px;color:var(--gold-d);text-align:center;margin-top:8px}

/* gold price roundels */
.cs-lb .prices{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:96px 0;text-align:center}
.cs-lb .rds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:40px 0 30px}
.cs-lb .rd{display:flex;flex-direction:column;align-items:center;gap:16px}
.cs-lb .disc{width:150px;height:150px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:300;font-size:50px;letter-spacing:-.01em;box-shadow:0 0 0 6px #fff,0 0 0 7px var(--gold)}
.cs-lb .disc small{font-size:26px;margin-right:2px;align-self:center}
.cs-lb .rd b{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.cs-lb .pnote{max-width:40em;margin:0 auto;font-size:16.5px}

/* checks: two to a row */
.cs-lb .checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;padding-top:96px;padding-bottom:40px}
.cs-lb .checks article{border-top:1px solid var(--line);padding:30px 0 34px}

/* enquiry band in the studio's colours */
.cs-lb .cta{background:var(--tint);color:var(--ink);border:1px solid var(--line);border-radius:0;text-align:center}
.cs-lb .cta h2{color:var(--ink);font-weight:300;margin-left:auto;margin-right:auto}
.cs-lb .cta .dek{color:var(--body);margin-left:auto;margin-right:auto}
.cs-lb .cta .lab{justify-content:center;color:var(--gold-d);font-family:Lato,sans-serif;font-weight:700;letter-spacing:.3em}
.cs-lb .cta .lab::before{display:none}
.cs-lb .ctaform input{background:#fff;border:1px solid var(--gold);color:var(--ink);border-radius:0}
.cs-lb .ctaform input::placeholder{color:#8a7f72}
.cs-lb .cta .btn.pri{background:var(--rose);color:#fff;border-radius:999px;letter-spacing:.16em;text-transform:uppercase;font-size:13px}
.cs-lb .cta .btn.pri:hover{background:var(--rose-d)}
.cs-lb .ctasmall{color:var(--body)}

.cs-lb .nextcase{text-align:center;padding-top:40px;padding-bottom:96px}
.cs-lb .nextcase a{text-decoration:none;display:inline-flex;flex-direction:column;gap:6px}
.cs-lb .nextcase span{font-size:12.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-d)}
.cs-lb .nextcase b{font-weight:300;font-size:clamp(28px,3.6vw,44px);letter-spacing:.06em;text-transform:uppercase;color:var(--rose)}
.cs-lb .nextcase a:hover b{color:var(--rose-d)}

@media (max-width:980px){
  .cs-lb{font-size:17px}
  .cs-lb .w{padding:0 16px}
  .cs-lb .poster{padding:44px 16px 40px}
  .cs-lb .wm{letter-spacing:.1em}
  .cs-lb .by{letter-spacing:.3em;font-size:13px}
  .cs-lb .hl i{width:56px}
  .cs-lb .trip{padding:0 16px;margin-bottom:72px}
  .cs-lb .trip .main{width:100%;padding:6px}
  .cs-lb .trip .side{position:static;display:inline-block;width:calc(50% - 6px);margin-top:12px;padding:5px;vertical-align:top}
  .cs-lb .trip .side.l{margin-right:8px}
  .cs-lb .look{grid-template-columns:1fr;gap:40px;padding-bottom:72px}
  .cs-lb .map{padding:64px 0}
  .cs-lb .map-in{grid-template-columns:1fr;gap:40px}
  .cs-lb .map-fig{border-radius:24px;aspect-ratio:auto;padding:16px 4px}
  .cs-lb .rings .tn{font-size:20px}
  .cs-lb .rings .rl{font-size:14px}
  .cs-lb .quiz{padding-top:72px;padding-bottom:72px}
  .cs-lb .split{grid-template-columns:1fr;gap:32px}
  .cs-lb .stays{text-align:left}
  .cs-lb .stays li{justify-content:flex-end;flex-direction:row-reverse}
  .cs-lb .qshot{order:-1}
  .cs-lb .prices{padding:64px 0}
  .cs-lb .rds{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
  .cs-lb .disc{width:118px;height:118px;font-size:38px}
  .cs-lb .rd b{font-size:11.5px;letter-spacing:.14em}
  .cs-lb .checks{grid-template-columns:1fr;padding-top:56px}
  .cs-lb .nextcase{padding-bottom:64px}
}