/* ===================================================================
   Belgrave Atelier
   A deliberately distinct look from the main site, because Jafar wants
   the Atelier positioned as its own proposition rather than another
   service. Darker, quieter, more spaced. Same palette so it still reads
   as Belgrave, but it should not feel like a service page.
   =================================================================== */

.at-hero{
  position:relative;background:var(--ink);color:var(--paper);
  padding:15rem 0 clamp(5rem,9vw,8rem);overflow:hidden;
}
.at-hero-glow{
  position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:120vw;height:90vh;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(168,131,74,.22),transparent 62%);
}
.at-hero .wrap{position:relative;z-index:2}

.at-eyebrow{
  font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;font-weight:400;
  color:var(--brass-lt);margin:0 0 2rem;text-indent:.42em;
}
/* The Atelier lockup, in place of the type eyebrow. The artwork is gold on
   transparent and is only legible on the dark hero ground. Sized by width so the
   B monogram keeps its proportion; height is set by the intrinsic 760x387. */
.at-logo{width:clamp(168px,17vw,232px);height:auto;margin:0 0 2.4rem}
.at-hero h1{
  font-size:clamp(3rem,8.5vw,6.4rem);line-height:.98;letter-spacing:-.02em;
  font-weight:300;margin:0 0 2rem;
}
.at-hero h1 em{font-style:italic;color:var(--brass-lt)}
.at-lede{
  max-width:46ch;color:rgba(247,243,234,.74);font-size:1.08rem;
  line-height:1.8;margin:0 0 2.6rem;
}

@media(max-width:1000px){
  .at-hero{padding-top:12rem}
}
@media(max-width:760px){
  .at-hero{padding:9.5rem 0 4rem}
  .at-eyebrow{letter-spacing:.3em;text-indent:.3em}
}

/* ---------- Jafar's service list and closing statement, supplied 2026-08-19 ---------- */
.at-steps-wrap .sec-head h2{color:var(--paper)}
.at-steps-wrap .sec-head h2 em{color:var(--brass-lt)}

.at-list{
  list-style:none;margin:0 auto;padding:0;max-width:60rem;
  display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;
}
.at-list li{
  position:relative;padding:.62rem 0 .62rem 1.7rem;
  font-size:1rem;color:rgba(247,243,234,.86);
}
/* Plain bullets, 2026-09-07. These were chevrons on underlined rows, which read as a
   list of links through to further pages. There are no Atelier sub-pages and none are
   planned - the list is simply what the service can include - so the marker is now a
   small brass diamond and the row rules are gone. */
.at-list li::before{
  content:"";position:absolute;left:.35rem;top:1.5rem;
  width:5px;height:5px;background:var(--brass-lt);transform:rotate(45deg);
}
.at-result{
  max-width:60ch;margin:3rem auto 0;text-align:center;
  font-size:1.06rem;line-height:1.8;color:rgba(247,243,234,.7);
}

/* ---- "The Atelier" section, redesigned 2026-09-07 to match the About page ----
   The photograph gets the full 1280px measure rather than a 1fr column, at its own
   16:9 so nothing is cropped, and carries no .arch - that radius is tuned for the
   3/4 portrait plates and domes over a landscape room shot. */
.at-story-photo{aspect-ratio:16/9;margin-bottom:clamp(2.4rem,4.5vw,3.8rem)}
.at-story-body{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
/* The lockup repeated in the story column. The artwork is gold on transparent, so
   unlike the hero copy it is sitting on the cream ground here rather than on black.
   Sized to the column, not to the hero, and given its own margins so it reads as
   part of the heading block rather than floating between the label and the h2. */
.at-story-logo{width:clamp(148px,13vw,186px);height:auto;margin:1.3rem 0 .1rem}
.at-story-head h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:1.2rem 0 0}
.at-story-head h2 em{font-style:italic;color:var(--brass)}
.at-story-copy p{color:var(--ink-muted);font-size:1.05rem}
.at-story-copy p:last-child{margin-bottom:0}
@media(max-width:900px){
  .at-story-body{grid-template-columns:1fr;gap:1.6rem}
  .at-story-head h2{margin-bottom:.4rem}
}
@media(max-width:560px){
  /* 16:9 is shallow on a phone. 3:2 crops evenly off both sides of a symmetrical
     room shot, so the window stays centred and the drop reads taller. */
  .at-story-photo{aspect-ratio:3/2}
}

/* No Atelier price list - see the note in atelier.php. */
.at-pricing{
  max-width:52ch;margin:1.4rem auto 0;font-size:.98rem;line-height:1.75;
  color:var(--ink-muted);
}
.at-contact{
  margin-top:1.6rem;font-size:.95rem;color:var(--muted);
  display:flex;justify-content:center;align-items:center;gap:.7rem;flex-wrap:wrap;
}
.at-contact a{border-bottom:1px solid var(--brass);padding-bottom:1px}
.at-contact a:hover{color:var(--brass-txt)}
.at-contact-sep{opacity:.5}
@media(max-width:420px){
  /* the email is long; let it sit on its own line rather than squeezing the dot */
  .at-contact{flex-direction:column;gap:.5rem}
  .at-contact-sep{display:none}
}

.at-creed{background:var(--stucco);text-align:center}
.at-creed-line{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.2;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 1.6rem;
}
.at-creed-line em{font-style:italic;color:var(--brass-txt)}
.at-creed-sub{
  max-width:46ch;margin:0 auto;color:var(--ink-muted);font-size:1.04rem;line-height:1.8;
}

@media(max-width:760px){
  .at-list{grid-template-columns:1fr;gap:0}
  .at-list li{font-size:.97rem;padding:.9rem 0 .9rem 1.8rem}
  .at-list li::before{top:1.3rem}
  .at-result{margin-top:2.2rem;font-size:1rem}
}