/* Lewis Real Estate · Brand kit page · Designed and built by ASEC Services
   Rides on app.css for tokens. Motion is used to guide the eye down the page,
   never to decorate, and every bit of it is switched off under
   prefers-reduced-motion. */

.bk{background:var(--bg)}
.bk-main{padding-bottom:100px}

/* ---------- hero ---------- */
.bk-hero{position:relative;overflow:hidden;background:var(--navy);color:var(--ivory);
  padding:clamp(72px,14vh,150px) 0 clamp(60px,10vh,110px);isolation:isolate}
.bk-hero-in{position:relative;z-index:2;max-width:1180px}
.bk-hero h1{font-size:clamp(40px,8vw,86px);line-height:1.02;margin:10px 0 22px;color:var(--ivory);
  letter-spacing:-.02em}
.bk-hero p{max-width:56ch;color:rgba(247,243,234,.76);font-size:clamp(15px,1.6vw,17.5px);margin:0 0 30px}
.bk-hero .label{color:var(--gold-lite)}
.bk-hero-act{display:flex;gap:12px;flex-wrap:wrap}
.bk-hero .btn.clear{color:var(--ivory);border-color:rgba(247,243,234,.4)}
.bk-hero .btn.clear:hover{border-color:var(--gold-lite);color:var(--gold-lite)}
.bk-hero-mark{position:absolute;right:0;bottom:-10px;width:min(38%,420px);opacity:.1;
  filter:brightness(0) invert(1);pointer-events:none}
/* Below tablet the hero copy fills the width, so the watermark would land on top
   of the buttons. There is no room for it, so it goes rather than being shrunk. */
@media (max-width:900px){ .bk-hero-mark{display:none} }

/* Slow drifting light behind the hero. Three blurred discs, nothing more. */
.bk-hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bk-hero-bg span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.bk-hero-bg span:nth-child(1){width:54vw;height:54vw;left:-14vw;top:-22vw;
  background:radial-gradient(circle,rgba(187,147,59,.55),transparent 70%);animation:bkdrift 30s var(--ease) infinite alternate}
.bk-hero-bg span:nth-child(2){width:46vw;height:46vw;right:-12vw;top:10vh;
  background:radial-gradient(circle,rgba(60,100,190,.5),transparent 70%);animation:bkdrift 38s var(--ease) infinite alternate-reverse}
.bk-hero-bg span:nth-child(3){width:34vw;height:34vw;left:34vw;bottom:-18vw;
  background:radial-gradient(circle,rgba(228,201,135,.35),transparent 70%);animation:bkdrift 44s var(--ease) infinite alternate}
@keyframes bkdrift{to{transform:translate3d(7vw,5vh,0) scale(1.2)}}

/* ---------- section rhythm ---------- */
.bk-sec{padding-block:clamp(44px,7vw,84px);border-bottom:1px solid var(--line)}
.bk-sec:last-child{border-bottom:0}
.bk-head{max-width:70ch;margin-bottom:30px}
.bk-head h2{font-size:clamp(25px,3.6vw,40px);margin:8px 0 12px;line-height:1.14}
.bk-sub{color:var(--muted);max-width:62ch;margin:0}
.bk-note{margin-top:18px;max-width:64ch}
.bk-lede{max-width:66ch}
.bk-lede h2{font-size:clamp(24px,3.4vw,38px);margin:0 0 16px;line-height:1.15}
.bk-lede p{color:var(--body);font-size:16.5px;margin:0 0 14px}

/* motion: sections rise as they arrive */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .bk-hero-bg span{animation:none}
}

/* ---------- colour ---------- */
.bk-swatches{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sw{border-radius:20px;overflow:hidden;border:1px solid var(--glass-edge);box-shadow:var(--shadow)}
.sw .chip{height:132px;display:grid;place-items:end start;padding:16px}
.sw .chip b{font:400 26px var(--serif)}
.sw .meta{padding:14px 16px 16px;background:var(--glass-strong);display:grid;gap:8px}
.sw .meta .n{font-weight:600;color:var(--ink);font-size:14.5px}
.sw .meta .u{font-size:12.5px;color:var(--muted);line-height:1.5}
.sw .vals{display:flex;gap:6px;flex-wrap:wrap}
.sw .vals button{font:600 11.5px var(--sans);letter-spacing:.04em;border:1px solid var(--line);
  background:transparent;color:var(--accent);border-radius:999px;padding:6px 11px;cursor:pointer;min-height:32px}
.sw .vals button:hover{border-color:var(--gold);background:var(--chip)}

/* ---------- type ---------- */
.bk-type{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.bk-type-card{padding:24px 26px;border-radius:20px}
.bk-type-card .spec{font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.serif-sample{font:400 clamp(30px,4.4vw,46px)/1.1 var(--serif);color:var(--ink);margin:12px 0 14px}
.sans-sample{font:600 clamp(24px,3.4vw,36px)/1.15 var(--sans);color:var(--ink);margin:12px 0 14px;letter-spacing:-.01em}

/* ---------- lockups ---------- */
.bk-lockups{display:grid;gap:18px}
.lock{border:1px solid var(--glass-edge);border-radius:24px;background:var(--glass);
  box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:minmax(230px,.85fr) 1.15fr}
.lock .stage{background:linear-gradient(150deg,#F7F3EA,#FFFFFF 60%);display:grid;place-items:center;
  padding:34px 26px;min-height:190px;border-right:1px solid var(--line)}
.lock .stage img{max-width:200px;max-height:110px;width:auto;height:auto}
.lock .stage .ph{font:400 clamp(20px,2.6vw,30px)/1.1 var(--serif);color:var(--navy);text-align:center}
.lock .stage .ph small{display:block;font:600 9.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:8px}
.lock .body{padding:26px 28px 24px}
.lock h3{font-size:22px;margin:0 0 2px}
.lock .what{font-size:13px;color:var(--muted);margin:0 0 14px}
.lock dl{margin:0 0 16px;display:grid;gap:10px}
.lock dt{font:600 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.lock dd{margin:0;font-size:14.5px;color:var(--body);line-height:1.55}
.lock .flag{display:inline-flex;align-items:center;gap:7px;font:600 12px var(--sans);
  background:var(--warn-bg);color:var(--warn);border-radius:999px;padding:7px 13px;margin-bottom:14px}
.lock .caution{font-size:12.5px;color:var(--stop);margin:0 0 14px}
.dl-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.dl-row .k{font:600 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  width:100%;margin-bottom:2px}
.dl{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--sans);border-radius:999px;
  padding:8px 14px;min-height:38px;border:1px solid var(--line);background:var(--glass-strong);
  color:var(--ink);text-decoration:none;transition:border-color .3s,transform .3s var(--ease)}
.dl:hover{border-color:var(--gold);transform:translateY(-1px)}
.dl i{width:11px;height:11px;border-radius:3px;display:inline-block;border:1px solid rgba(2,17,50,.18)}
.dl.hosted{border-color:rgba(47,107,69,.4)}
@media (max-width:820px){
  .lock{grid-template-columns:1fr}
  .lock .stage{border-right:0;border-bottom:1px solid var(--line);min-height:150px}
}

/* ---------- colourways ---------- */
.bk-ways{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.way{display:grid;gap:12px;padding:18px 20px;border-radius:18px;border:1px solid var(--glass-edge);
  background:var(--glass)}
.way .dot{width:46px;height:46px;border-radius:50%;border:1px solid rgba(2,17,50,.14)}
.way b{font-size:15px;color:var(--ink);font-weight:600}
.way span{font-size:13px;color:var(--muted);line-height:1.55}

/* ---------- rules ---------- */
.bk-rules{counter-reset:r;list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:80ch}
.bk-rules li{counter-increment:r;position:relative;padding:20px 24px 20px 66px;border-radius:18px;
  border:1px solid var(--glass-edge);background:var(--glass)}
.bk-rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:22px;top:20px;
  font:400 19px var(--serif);color:var(--gold-deep)}
.bk-rules b{display:block;font-weight:600;color:var(--ink);font-size:15.5px;margin-bottom:5px}
.bk-rules span{font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- don'ts ---------- */
.bk-donts{padding:28px 30px;border-radius:22px}
.bk-donts ul{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.bk-donts li{position:relative;padding-left:26px;font-size:14.5px;color:var(--body)}
.bk-donts li::before{content:"";position:absolute;left:4px;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--stop);opacity:.65}

/* ---------- files ---------- */
.bk-files{display:grid;gap:16px}
.fsec{border:1px solid var(--glass-edge);border-radius:22px;background:var(--glass);padding:24px 26px}
.fsec h3{font-size:19px;margin:0 0 3px;display:flex;align-items:baseline;gap:10px}
.fsec h3 em{font:600 11px var(--sans);letter-spacing:.18em;font-style:normal;color:var(--gold-deep)}
.fsec > p{font-size:13.5px;color:var(--muted);margin:0 0 16px;max-width:64ch}
.frow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:13px 0;
  border-top:1px solid var(--line)}
.frow .n{font-weight:600;color:var(--ink);font-size:14.5px}
.frow .n em{font-style:normal;font:600 10px var(--sans);letter-spacing:.14em;color:var(--muted);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;margin-left:8px;vertical-align:middle}
.frow .u{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:3px}
@media (max-width:560px){.frow{grid-template-columns:1fr;gap:10px}}

.bk-folders{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));margin-top:16px}
/* These are anchors so the whole card is clickable, but they should read as cards,
   not as links — the underline and link colour have to be turned off explicitly. */
.fold{display:block;padding:18px 20px;border-radius:16px;border:1px dashed var(--line);
  background:transparent;text-decoration:none;color:inherit;transition:border-color .3s,background .3s}
.fold:hover{border-color:var(--gold);background:var(--chip)}
.fold b{display:block;font-size:14.5px;color:var(--ink);font-weight:600;margin-bottom:4px}
.fold b em{font-style:normal;font:600 10.5px var(--sans);letter-spacing:.16em;color:var(--gold-deep);margin-right:8px}
.fold span{font-size:12.5px;color:var(--muted);line-height:1.55}

/* ---------- the whole kit ---------- */
.bk-all{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  padding:28px 32px;border-radius:22px}
.bk-all-act{display:flex;gap:10px;flex-wrap:wrap}