/* Concierge page.
   Loaded only on /concierge/. Colours come from the tokens in site.css. */

.cx-hero .media{height:min(52vh,520px);min-height:340px}
.cx-hero h1{max-width:19ch}
.cx-sub{margin-top:14px;max-width:56ch;color:#CDBCEC;font-size:1.02rem;line-height:1.65}
.cx-hero .btn{margin-top:22px}

/* Intro: prose on the left, the price answer pinned beside it. The cost question is
   the first thing anyone asks about a concierge, so it is answered before the
   services rather than buried in the FAQ. */
.cx-intro-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:52px;align-items:start}
.cx-intro h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:0 0 18px}
.cx-lede{color:var(--mist-2);max-width:60ch;margin:0 0 14px;line-height:1.75}

.cx-price{
  padding:30px;border:1px solid var(--line-gold);border-radius:var(--r);
  background:var(--night);box-shadow:var(--shadow);
}
.cx-price .kicker{margin:0 0 6px}
.cx-price-big{
  font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--magic-deep);
  margin:0 0 14px;
}
.cx-price p{color:var(--mist-2);font-size:.9rem;margin:0 0 10px;line-height:1.7}
.cx-price-note{
  margin:14px 0 0 !important;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:.82rem !important;color:var(--mist-3) !important;
}

/* Service cards. Four categories, each with concrete examples: a guest reading
   "we can arrange dining" pictures nothing, "your fridge stocked before you land"
   is a decision. */
.cx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:38px}
.cx-card{
  display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:var(--night);border:1px solid var(--line);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.cx-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-gold)}

/* Fixed 16:9 crop so any landscape photograph can be dropped in without the card
   heights going out of step. width/height on the <img> reserves the space before it
   loads, which keeps the grid from jumping. */
.cx-ph{aspect-ratio:16/9;background:var(--night-3);overflow:hidden}
.cx-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s}
.cx-card:hover .cx-ph img{transform:scale(1.04)}

.cx-body{display:flex;flex-direction:column;flex:1;padding:28px 30px 30px}
.cx-card h3{font-family:var(--serif);font-size:1.5rem;margin:0 0 10px}
.cx-body > p{color:var(--mist-2);font-size:.9rem;line-height:1.7;margin:0 0 16px}
.cx-card ul{list-style:none;margin:0 0 20px;padding:0;flex:1}
.cx-card li{
  position:relative;padding-left:22px;margin-bottom:9px;
  font-size:.88rem;color:var(--mist-2);line-height:1.6;
}
.cx-card li::before{
  content:"✦";position:absolute;left:0;top:0;color:var(--gold-deep);font-size:.8rem;
}
.cx-req{
  align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;gap:.4em;
  font-weight:700;font-size:.86rem;color:var(--magic-deep);text-decoration:none;
}
.cx-req:hover{color:var(--magic);gap:.7em}
.cx-req span{transition:.2s}

.cx-steps{max-width:820px;margin:38px auto 0}

/* Request block: copy beside the form. */
.cx-request{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:start}
.cx-request-copy h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin:0 0 14px}
.cx-request-copy > p{color:var(--mist-2);max-width:46ch;line-height:1.75}
.cx-assure{list-style:none;margin:22px 0 0;padding:0}
.cx-assure li{
  position:relative;padding-left:26px;margin-bottom:11px;
  font-size:.88rem;color:var(--mist-2);
}
.cx-assure li::before{
  content:"✓";position:absolute;left:0;top:-1px;color:var(--gold-deep);font-weight:700;
}

.cx-faq{max-width:820px;margin:0 auto}
.cx-faq h2{text-align:center;margin-bottom:26px}

@media(max-width:1080px){
  .cx-intro-grid{grid-template-columns:1fr;gap:34px}
  .cx-request{grid-template-columns:1fr;gap:34px}
}

@media(max-width:760px){
  .cx-grid{grid-template-columns:1fr;gap:16px}
  .cx-body{padding:24px 22px 26px}
  .cx-price{padding:26px}
  .cx-hero .media{height:min(46vh,420px)}
}