/* Design 1, On the Market.
   CORNER RULE: radius 0 everywhere. Sharp corners on buttons, inputs, cards and
   panels. The one exception is Manda's portrait, which is a circle cut-out
   and must stay a circle (50%).
   Type: Schibsted Grotesk (display, 700 to 900), Inter Tight (body).
   Mobile first. Breakpoints: 760px (tablet), 1100px (desktop). */

:root{
  --yellow:#FDD303;
  --red:#D71920;
  --bg:#FAFAF7;
  --surface:#FFFFFF;
  --ink:#111111;
  --muted:#4A4A46;
  --line:#BDBDB5;
  --night:#111111;
  --night-ink:#F2F2EE;
  --accent:#111111;
  --focus:#D71920;
  --radius:0;
  --stick:48px;
  --pad:clamp(20px,5vw,64px);
  --max:1240px;
  --display:'Schibsted Grotesk','Arial Black',system-ui,sans-serif;
  --body:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121212;
    --surface:#1C1C1C;
    --ink:#F2F2EE;
    --muted:#BDBDB5;
    --line:#4A4A46;
    --night:#1C1C1C;
    --accent:#FDD303;
  }
}
html.embed{--stick:0px}

body.d1{font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:clip}
.d1 h1,.d1 h2,.d1 h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.04;text-wrap:balance}
.d1 p{text-wrap:pretty}
.d1 img{height:auto}

/* ---------- Buttons ---------- */
.d1 .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border:2px solid currentColor;border-radius:0;font:700 17px/1.2 var(--body);text-decoration:none;cursor:pointer;transition:transform .15s ease;touch-action:manipulation}
.d1 .btn:active{transform:translateY(1px)}
.d1 .btn i{font-size:1.25em}
.d1 .actions{display:flex;flex-wrap:wrap;gap:12px}
.d1 .actions .btn{flex:1 1 220px}

/* On yellow: black button, outlined second button. */
.d1 .on-yellow .btn-solid,.d1 .hero-block .btn-solid,.d1 .close-band .btn-solid{background:#111;color:var(--yellow);border-color:#111}
.d1 .on-yellow .btn-line,.d1 .hero-block .btn-line,.d1 .close-band .btn-line{background:transparent;color:#111;border-color:#111}
/* On dark: yellow button, outlined second button. */
.d1 .on-night .btn-solid{background:var(--yellow);color:#111;border-color:var(--yellow)}
.d1 .on-night .btn-line{background:transparent;color:#F2F2EE;border-color:#F2F2EE}
@media (hover:hover){
  .d1 .btn-solid:hover{transform:translateY(-2px)}
  .d1 .btn-line:hover{background:#111;color:var(--yellow)}
  .d1 .on-night .btn-line:hover{background:#F2F2EE;color:#111}
}

/* ---------- Header ---------- */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:6px var(--pad);background:var(--bg);border-bottom:1px solid var(--line)}
.wordmark{font:900 24px/1 var(--display);letter-spacing:-.03em;text-decoration:none;padding:8px 0;display:inline-flex;align-items:center;min-height:44px}
.head-note{display:none;font-size:15px;color:var(--muted)}

/* ---------- Hero ---------- */
.hero{position:relative;display:flex;flex-direction:column}
.hero-photo{width:100%;height:clamp(180px,28svh,300px);object-fit:cover;object-position:50% 40%}
.hero-block{background:var(--yellow);color:#111;padding:28px var(--pad) 32px}
.hero-block h1{font-size:clamp(2.1rem,9.6vw,3rem);font-weight:900;margin-bottom:14px}
.hero-block p{font-size:18px;line-height:1.45;margin-bottom:22px;max-width:34ch;font-weight:500}

/* ---------- Stack intro ---------- */
.stack-intro{max-width:var(--max);margin:0 auto;padding:72px var(--pad) 40px}
.stack-intro h2{font-size:clamp(2rem,8vw,3.6rem);max-width:15ch;margin-bottom:16px}
.stack-intro p{font-size:19px;color:var(--muted);max-width:40ch}

/* ---------- Sticky photo stack ---------- */
.stack{position:relative}
.card{position:sticky;top:var(--stick);height:85svh;min-height:520px;max-height:760px;overflow:clip;background:var(--bg)}
.card-inner{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;}
.card-media{position:relative;min-height:0;overflow:hidden;background:var(--night)}
.card-media .card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-let .card-photo{object-position:100% 0;transform:scale(1.9);transform-origin:100% 0}
.card-sell .card-photo{object-position:50% 60%}
.card-panel{padding:26px var(--pad) 28px}
.card-panel h3{font-size:clamp(1.9rem,8vw,2.6rem);font-weight:900;margin-bottom:12px}
.card-panel p{font-size:18px;line-height:1.45;margin-bottom:20px;max-width:44ch}
.card-sell .card-panel,.card-buy .card-panel{background:var(--yellow);color:#111}
.card-sell .card-panel .btn-solid,.card-buy .card-panel .btn-solid{background:#111;color:var(--yellow);border-color:#111}
.card-buy .card-panel .btn-line{background:transparent;color:#111;border-color:#111}
.card-let .card-panel{background:var(--night);color:#F2F2EE}
.card-let .card-panel .btn-solid{background:var(--yellow);color:#111;border-color:var(--yellow)}
.card-panel .actions .btn{flex:1 1 200px}

/* ---------- Meet Manda ---------- */
.meet{background:var(--night);color:#F2F2EE;padding:80px var(--pad) 72px}
.meet-inner{max-width:var(--max);margin:0 auto;display:grid;gap:36px;align-items:center}
.meet-portrait{width:min(240px,64vw)}
.meet-portrait img{width:100%;aspect-ratio:1/1;border-radius:50%;object-fit:cover;background:var(--yellow)}
.meet-quote p{font:900 clamp(2.5rem,12.5vw,4.2rem)/.98 var(--display);letter-spacing:-.03em;color:var(--yellow);text-wrap:balance}
.meet-text{margin-top:28px;font-size:19px;line-height:1.5;max-width:40ch;color:#F2F2EE}
.meet-sign{margin-top:18px;font:700 16px/1.3 var(--body);color:#D9D9D2}

/* ---------- How a sale works ---------- */
.how{padding:80px 0 80px;background:var(--bg)}
.how-head{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 32px}
.how-head h2{font-size:clamp(2rem,8vw,3.6rem);margin-bottom:12px}
.how-head p{font-size:19px;color:var(--muted);max-width:36ch}
.steps{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:0 var(--pad) 12px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.steps li{flex:0 0 min(78vw,320px);scroll-snap-align:start;padding:20px 22px 24px 0;margin-right:22px;border-top:6px solid var(--ink)}
.steps li:first-child{border-top-color:var(--yellow)}
.step-no{display:block;font:900 64px/1 var(--display);letter-spacing:-.04em;margin-bottom:12px;color:var(--ink)}
.steps h3{font-size:1.5rem;margin-bottom:10px}
.steps p{font-size:17px;line-height:1.5;color:var(--muted)}
.steps li:last-child{margin-right:0}

/* ---------- Closing band ---------- */
.close{display:flex;flex-direction:column}
.close-photo{width:100%;height:clamp(180px,30svh,280px);object-fit:cover;object-position:50% 45%}
.close-band{background:var(--yellow);color:#111;padding:40px var(--pad) 48px}
.close-band h2{font-size:clamp(2.2rem,9.5vw,3.6rem);font-weight:900;margin-bottom:14px;max-width:14ch}
.close-band p{font-size:19px;margin-bottom:24px;max-width:34ch;font-weight:500}

/* ---------- Footer ---------- */
.site-foot{background:var(--bg);color:var(--ink);padding:48px var(--pad) 36px;border-top:1px solid var(--line)}
.foot-grid{max-width:var(--max);margin:0 auto;display:grid;gap:28px}
.foot-name{font:900 24px/1.1 var(--display);margin-bottom:8px}
.foot-grid p{font-size:16px;color:var(--muted)}
.foot-contact{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.foot-contact dt{font:700 14px/1.3 var(--body);color:var(--muted)}
.foot-contact dd{font-size:16px;font-weight:600}
.credit{max-width:var(--max);margin:32px auto 0;font-size:14px;line-height:1.5;color:var(--muted)}

/* ---------- Enquiry dialog restyle ---------- */
.d1 .enquiry-dialog{border-radius:0;box-shadow:none;border:3px solid var(--ink);background:var(--surface);font-family:var(--body)}
.d1 .enquiry-dialog h2{font-family:var(--display);font-weight:900;font-size:1.8rem;letter-spacing:-.02em;line-height:1.1;padding-right:36px}
.d1 .dialog-kicker{font-size:14px;color:var(--muted);opacity:1}
.d1 .dialog-close{color:var(--ink);font-size:30px}
.d1 .demo-form input,.d1 .demo-form select{border:2px solid var(--ink);background:var(--bg)}
.d1 .demo-form button{background:var(--yellow);color:#111;border:2px solid #111;border-radius:0;font-weight:700;font-size:17px}
.d1 .demo-form .consent input{accent-color:var(--ink)}

/* ---------- Tablet ---------- */
@media (min-width:760px){
  body.d1{font-size:18px}
  .head-note{display:block}
  .hero-block p{font-size:20px}
  .steps li{flex-basis:300px}
  .foot-grid{grid-template-columns:1.2fr 1fr;align-items:start}
  .foot-contact{grid-template-columns:1fr 1fr}
  .close{flex-direction:row;min-height:520px}
  .close-photo{width:42%;height:auto;min-height:100%}
  .close-band{width:58%;display:flex;flex-direction:column;justify-content:center;padding:56px var(--pad)}
  .meet-inner{grid-template-columns:minmax(220px,300px) 1fr;gap:56px}
  .meet-portrait{width:100%}
}

/* ---------- Desktop ---------- */
@media (min-width:1100px){
  .hero{display:block;padding-bottom:0}
  .hero-photo{height:58svh;min-height:380px;max-height:640px}
  .hero-block{position:relative;margin:-260px 0 0 max(var(--pad),calc((100% - var(--max)) / 2));width:min(900px,72%);padding:36px 52px 40px}
  .hero-block h1{font-size:clamp(2.8rem,4vw,3.8rem);margin-bottom:12px}
  .hero-block p{font-size:21px;max-width:40ch;margin-bottom:22px}
  .hero-block .actions .btn{flex:0 1 auto}
  .stack-intro{padding-top:120px;padding-bottom:64px}
  .card{height:calc(100svh - var(--stick));min-height:560px;max-height:none}
  .card-inner{grid-template-rows:none;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .card-let .card-inner{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .card-let .card-media{order:2}
  .card-panel{display:flex;flex-direction:column;justify-content:center;padding:56px clamp(40px,5vw,88px)}
  .card-panel h3{font-size:clamp(2.6rem,3.8vw,3.6rem)}
  .card-panel p{font-size:20px}
  .card-panel .actions .btn{flex:0 1 auto}
  .meet{padding:120px var(--pad) 112px}
  .meet-inner{grid-template-columns:minmax(300px,400px) 1fr;gap:96px}
  .meet-quote p{font-size:clamp(4rem,6.4vw,6.4rem)}
  .meet-text{font-size:21px}
  .how{padding:120px 0}
  .how-head{padding-bottom:48px}
  .steps{overflow:visible;scroll-snap-type:none;max-width:var(--max);margin:0 auto;padding:0 var(--pad);gap:36px}
  .steps li{flex:1 1 0;margin-right:0;padding-right:0}
  .step-no{font-size:88px}
  .close{min-height:600px}
  .close-band{padding:72px clamp(48px,6vw,104px)}
  .close-band .actions .btn{flex:0 1 auto}
  .site-foot{padding:64px var(--pad) 40px}
}

@media (min-width:1500px){
  body.d1{font-size:19px}
}

/* ---------- Short phones ---------- */
@media (max-width:420px) and (max-height:700px){
  .hero-photo{height:clamp(150px,24svh,220px)}
  .hero-block{padding-top:22px;padding-bottom:26px}
  .hero-block p{margin-bottom:16px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .d1 .btn{transition:none}
  .steps{scroll-behavior:auto}
}