/* ============================================================
   MIAMI BRIDAL PHOTOS — EDITORIAL SYSTEM
   Shared with the static templates in /redesign.
   Divi mapping lives at the bottom of this file.
   ============================================================ */

/* Miami Bridal Photos — design system
   One Evening: the page traverses a single evening.
   Shared by every template and by the Divi child theme. */

/* ─────────────────────────────────────────────────────────
   Miami Bridal Photos — "One Evening"
   The page traverses a single evening. Ground moves through
   four measured light stops; the rail marks real times.
   ───────────────────────────────────────────────────────── */


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:var(--step-0); line-height:1.62;
  transition:background-color 1.1s ease,color 1.1s ease;
  overflow-x:hidden;
}

img{max-width:100%; display:block; height:auto}
a{color:inherit}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--night);color:var(--bone);padding:14px 20px}
.skip:focus{left:0}

/* ── type ─────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display); font-weight:400; margin:0; line-height:1.02; letter-spacing:-.015em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1); line-height:1.18}
p{margin:0 0 1.1em; max-width:var(--measure)}
.lede{font-size:var(--step-1); line-height:1.42; color:var(--fg)}

.tick{
  font-family:var(--mono); font-size:var(--step--1); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  display:block;
}
.tick--dim{color:var(--muted)}

/* ── rail ─────────────────────────────────────────── */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail-w);
  z-index:40; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center; gap:0;
  border-right:1px solid var(--rule);
  transition:border-color 1.1s ease;
}
.rail__line{position:absolute; left:calc(var(--rail-w) / 2); top:12vh; bottom:12vh; width:1px; background:var(--rule)}
/* scaleY, not height: this updates every scroll frame and must stay
   off the layout path. transform-origin pins it to the top of the track. */
.rail__fill{position:absolute; left:calc(var(--rail-w) / 2); top:12vh; width:1px; height:calc(100vh - 24vh); background:var(--accent); transform:scaleY(0); transform-origin:top center; transition:background-color 1.1s ease}
.rail__marks{position:absolute; left:0; right:0; top:12vh; bottom:12vh; display:flex; flex-direction:column; justify-content:space-between}
.rail__mark{display:flex; align-items:center; gap:8px; padding-left:calc(var(--rail-w) / 2 - 5px)}
.rail__dot{width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--rule);flex:none;transition:all .4s ease}
.rail__mark[data-on="1"] .rail__dot{background:var(--accent);border-color:var(--accent)}
.rail__t{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted);
  writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;
  transition:color .4s ease;
}
.rail__mark[data-on="1"] .rail__t{color:var(--accent)}

/* ── shell ────────────────────────────────────────── */
.shell{padding-left:var(--rail-w)}
.wrap{padding-inline:var(--gut); max-width:1500px; margin-inline:auto}

header.top{
  position:relative; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px var(--gut);
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:132px}
body[data-stop="day"] .brand img,body[data-stop="gold"] .brand img{filter:invert(1) brightness(.22) saturate(.7)}
nav.top__nav{display:flex;gap:clamp(14px,2vw,32px);align-items:center}
nav.top__nav a{
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; color:var(--muted);
  padding:10px 2px; transition:color .3s
}
nav.top__nav a:hover{color:var(--accent)}

/* ── hero ─────────────────────────────────────────── */
.hero{padding:clamp(12px,3vh,40px) var(--gut) clamp(56px,9vh,120px)}
.hero__frame{position:relative; overflow:hidden}
.hero__frame img{width:100%; aspect-ratio:2560/1515; object-fit:cover}
.hero__stamp{
  position:absolute; left:clamp(14px,2.4vw,30px); bottom:clamp(14px,2.4vw,30px);
  background:rgba(10,20,22,.62); backdrop-filter:blur(7px);
  color:var(--bone); padding:11px 15px;
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  display:flex; gap:14px; flex-wrap:wrap;
}
.hero__stamp b{font-weight:500;color:var(--brass-lit)}
.hero__head{margin-top:clamp(26px,4.6vh,54px); display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,50px)}
@media(min-width:1000px){.hero__head{grid-template-columns:minmax(0,1.28fr) minmax(300px,.72fr); align-items:end}}
h1 .soft{font-style:italic; color:var(--accent)}
.hero__aside{border-top:1px solid var(--rule); padding-top:18px}
.hero__aside p{font-size:var(--step-0); color:var(--muted); margin-bottom:1.4em}

.cta{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--bg); background:var(--fg);
  padding:17px 26px; border:0; cursor:pointer;
  transition:background-color .3s,color .3s,transform .3s;
}
.cta:hover{background:var(--cta-fill); color:var(--cta-ink); transform:translateY(-2px)}
.cta--ghost{background:transparent;color:var(--fg);border:1px solid var(--rule)}
.cta--ghost:hover{background:var(--fg);color:var(--bg)}

/* ── sections ─────────────────────────────────────── */
section{padding-block:clamp(64px,11vh,150px)}
.sec__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3.4vh,40px)}
.sec__eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}

/* thesis */
.thesis{display:grid;gap:clamp(26px,4vw,72px);grid-template-columns:1fr}
@media(min-width:900px){.thesis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.thesis h2{margin-bottom:.4em}

/* light plan — the signature table */
.plan{border-top:1px solid var(--rule)}
.plan__row{
  display:grid; grid-template-columns:minmax(74px,88px) 1fr; gap:clamp(14px,3vw,44px);
  padding:clamp(18px,2.6vh,30px) 0; border-bottom:1px solid var(--rule);
  align-items:baseline;
}
@media(min-width:840px){.plan__row{grid-template-columns:minmax(74px,96px) minmax(0,.9fr) minmax(0,1.1fr)}}
.plan__t{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.06em;color:var(--accent)}
.plan__h{font-family:var(--display);font-size:var(--step-1);line-height:1.15}
.plan__d{color:var(--muted);margin:0}
@media(max-width:839px){.plan__d{grid-column:2}}

/* work */
.work{display:grid;gap:clamp(14px,2.2vw,26px);grid-template-columns:repeat(2,1fr)}
@media(min-width:920px){.work{grid-template-columns:repeat(12,1fr)}}
.plate{position:relative;overflow:hidden;background:rgba(0,0,0,.16)}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.plate:hover img{transform:scale(1.035)}
.plate figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bone);background:linear-gradient(transparent,rgba(8,16,18,.82));
  opacity:0;transition:opacity .4s
}
.plate:hover figcaption,.plate:focus-within figcaption{opacity:1}
@media(min-width:920px){
  .plate--a{grid-column:span 5;grid-row:span 2}
  .plate--b{grid-column:span 4}
  .plate--c{grid-column:span 3}
  .plate--d{grid-column:span 3}
  .plate--e{grid-column:span 4}
  .plate--f{grid-column:span 5}
  .plate--g{grid-column:span 7}
}

/* where */
.where{display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr}
@media(min-width:900px){.where{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.venues{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.venues li{border-bottom:1px solid var(--rule)}
.venues a{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding:clamp(15px,2.1vh,22px) 0;text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),color .3s
}
.venues a:hover{transform:translateX(12px);color:var(--accent)}
.venues .v__n{font-family:var(--display);font-size:var(--step-1)}
.venues .v__m{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}

/* series + form */
.series{display:grid;gap:clamp(30px,4.6vw,74px);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.series{grid-template-columns:minmax(0,1fr) minmax(340px,.82fr)}}
.spec{list-style:none;margin:0 0 2em;padding:0}
.spec li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:var(--step-0)}
.spec .k{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.08em;color:var(--accent);flex:none;width:122px}

/* Display type sits in half-width columns here — the full step-3 orphans
   its first word. Step it down so lines break where the writing intends. */
.thesis h2,.where h2,.series h2,#woody h2{font-size:clamp(2rem,1.15rem + 2.7vw,3.5rem)}

form{display:grid;gap:16px}
.f2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:520px){.f2{grid-template-columns:1fr 1fr}}
label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
input,select,textarea{
  width:100%;padding:14px 15px;min-height:48px;
  background:transparent;color:var(--fg);
  border:1px solid var(--rule);border-radius:0;
  font-family:var(--body);font-size:var(--step-0);
  transition:border-color .3s
}
textarea{min-height:112px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;background-size:5px 5px;background-repeat:no-repeat}
.note{font-size:var(--step--1);color:var(--muted);margin:0}

footer{padding:clamp(48px,7vh,92px) 0 clamp(30px,4vh,54px);border-top:1px solid var(--rule)}
.foot{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot a{text-decoration:none}
.foot__links{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.foot__legal{font-size:var(--step--1);color:var(--muted);margin-top:34px;max-width:var(--measure)}

@media(max-width:760px){
  :root{--rail-w:0px}
  .rail{display:none}
  nav.top__nav{display:none}
}

/* Touch: footer links are navigation, not prose — give them a real target. */
@media(pointer:coarse),(max-width:760px){
  .foot__links{gap:2px 22px}
  .foot__links a,.foot__links span{display:inline-flex;align-items:center;min-height:44px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .plate:hover img{transform:none}
}

/* ─────────────────────────────────────────────────────────
   INTERIOR TEMPLATES
   Selectors deliberately target plain semantic markup
   (h2/h3/p/ul/li/a) so the Divi child theme inherits them
   from the content WordPress already renders.
   ───────────────────────────────────────────────────────── */

.crumb{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding-block:6px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb span[aria-current]{color:var(--accent)}

/* page head */
.phead{display:grid;gap:clamp(22px,3.4vw,54px);grid-template-columns:1fr;padding-block:clamp(26px,4vh,52px) clamp(30px,5vh,64px)}
@media(min-width:960px){.phead{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end}}
.phead h1{font-size:clamp(2.3rem,1.3rem + 3.6vw,4.4rem)}
.phead__meta{border-top:1px solid var(--rule);padding-top:16px;display:grid;gap:10px}
.phead__meta div{display:flex;gap:14px;font-size:var(--step--1)}
.phead__meta dt,.phead__meta .k{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);flex:none;width:104px;padding-top:3px}
.phead__meta dd{margin:0;color:var(--fg)}

/* the fact strip — venue numbers, stated plainly */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-block:clamp(26px,4vh,48px)}
.facts div{background:var(--bg);padding:clamp(15px,2vw,22px);transition:background-color 1.1s ease}
.facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.facts dd{margin:0;font-family:var(--display);font-size:var(--step-1);line-height:1.1}
.facts small{display:block;font-family:var(--body);font-size:var(--step--1);color:var(--muted);margin-top:5px;line-height:1.4}

/* long-form prose — mirrors WordPress output */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.7rem,1.15rem + 1.7vw,2.6rem);margin:clamp(38px,5.5vh,72px) 0 .45em}
.prose h3{font-size:var(--step-1);margin:clamp(24px,3.4vh,40px) 0 .4em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 1.15em}
.prose ul{margin:0 0 1.4em;padding:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:.55em}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--accent)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose blockquote{margin:clamp(28px,4vh,48px) 0;padding-left:22px;border-left:2px solid var(--accent);font-family:var(--display);font-size:var(--step-1);line-height:1.35}

/* two-up article layout: prose + sticky aside */
.article{display:grid;gap:clamp(30px,4.6vw,72px);grid-template-columns:1fr}
@media(min-width:1040px){.article{grid-template-columns:minmax(0,1fr) minmax(260px,320px)}}
.aside{align-self:start}
@media(min-width:1040px){.aside{position:sticky;top:34px}}
.aside__box{border:1px solid var(--rule);padding:clamp(18px,2.4vw,26px)}
.aside__box h3{font-size:var(--step-1);margin:0 0 .5em}
.aside__box p{font-size:var(--step--1);color:var(--muted);margin-bottom:1.1em}

/* pricing tiers */
.tiers{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);grid-template-columns:1fr}
@media(min-width:760px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.tiers{grid-template-columns:repeat(4,1fr)}}
.tier{background:var(--bg);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:14px;transition:background-color 1.1s ease}
.tier__n{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.tier__p{font-family:var(--display);font-size:clamp(2rem,1.4rem + 1.8vw,3rem);line-height:1}
.tier__d{font-size:var(--step--1);color:var(--muted);margin:0}
.tier ul{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--rule);padding-top:14px}
.tier ul li{font-size:var(--step--1);padding:5px 0;color:var(--muted)}
.tier--lead{outline:1px solid var(--accent);outline-offset:-1px}

/* journal cards */
.cards{display:grid;gap:clamp(18px,2.6vw,34px);grid-template-columns:1fr}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;gap:12px;text-decoration:none;padding-bottom:18px;border-bottom:1px solid var(--rule);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.card:hover{transform:translateY(-4px)}
.card__cat{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card__t{font-family:var(--display);font-size:var(--step-1);line-height:1.16}
.card__x{font-size:var(--step--1);color:var(--muted);margin:0}
.card figure{margin:0;overflow:hidden;aspect-ratio:4/3}
.card figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.card:hover figure img{transform:scale(1.04)}

/* next/prev + related */
.related{display:grid;gap:clamp(16px,2.4vw,28px);grid-template-columns:1fr;border-top:1px solid var(--rule);padding-top:clamp(26px,4vh,44px)}
@media(min-width:820px){.related{grid-template-columns:repeat(3,1fr)}}
.related a{text-decoration:none;display:grid;gap:7px}
.related .r__k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.related .r__t{font-family:var(--display);font-size:var(--step-1);line-height:1.15}
.related a:hover .r__t{color:var(--accent)}

/* ============================================================
   DIVI MAPPING
   The live site's content was normalised to plain semantic
   markup (h2/h3/p/ul/li/a) — so these selectors dress the real
   WordPress output without rebuilding pages in the Builder.
   ============================================================ */

#page-container{background:var(--bg);transition:background-color 1.1s ease}
#main-content{color:var(--fg)}
#main-content .container{max-width:1500px;width:calc(100% - (var(--gut) * 2))}

/* Divi's post title becomes our display face */
#main-content h1,.entry-title,.et_pb_title_container h1{
  font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.02;
  font-size:clamp(2.3rem,1.3rem + 3.6vw,4.4rem);color:var(--fg)
}

/* Long-form body copy — mirrors the .prose rules.
   The measure is set on the column, and the title shares it, so the two line
   up on both edges. It used to read 70ch here: ch resolves against the
   element's own font, .entry-content still carries Divi's 14px, and the
   column came out at 545px under a title running the full 1236. */
#main-content .entry-content{font-size:var(--step-0);line-height:1.62}
#main-content .entry-content,
#main-content .et_pb_text_inner,
#main-content .entry-title,
#main-content .et_post_meta_wrapper{max-width:var(--prose);margin-inline:auto}
/* Inside a measured column the per-paragraph measure only creates a ragged
   right edge against the headings. */
#main-content .entry-content p{max-width:none}

/* When the prose helpers land on a <p>, the ID rule above outranks their own
   class and flattens them back into body copy. These restate them at matching
   weight. Order matters: --dim follows .tick so it still wins. */
#main-content .entry-content p.lede{font-size:var(--step-1);line-height:1.42;color:var(--fg)}
#main-content .entry-content p.tick{
  font-family:var(--mono);font-size:var(--step--1);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.6em
}
#main-content .entry-content p.tick--dim{color:var(--muted)}
#main-content h2{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.012em;
  font-size:clamp(1.7rem,1.15rem + 1.7vw,2.6rem);margin:clamp(38px,5.5vh,72px) 0 .45em;color:var(--fg)}
#main-content h3{font-family:var(--display);font-weight:400;line-height:1.18;
  font-size:var(--step-1);margin:clamp(24px,3.4vh,40px) 0 .4em;color:var(--fg)}
#main-content p{font-family:var(--body);font-size:var(--step-0);line-height:1.62;margin:0 0 1.15em;color:var(--fg)}
#main-content ul{margin:0 0 1.4em;padding:0;list-style:none}
#main-content ul li{position:relative;padding-left:26px;margin-bottom:.55em;line-height:1.6}
#main-content ul li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--accent)}
#main-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
#main-content a:hover{text-decoration-thickness:2px}

/* Ported editorial pages. Their post_content is the prototype markup,
   marked by [data-stop] on the hero and every section. The long-form
   dressing above — 70ch measure, dashed list bullets — is wrong for a
   full-bleed layout, so it is undone inside those pages only. */
#main-content .entry-content:has([data-stop]){max-width:none}
/* These pages open with their own h1 in the hero, so Divi's page title is a
   second one saying the same thing. The front page never printed it; every
   other ported page does. */
#main-content h1.entry-title:has(+ .entry-content [data-stop]){
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0
}
.entry-content:has([data-stop]) > .hero{padding-inline:0}
.entry-content:has([data-stop]) > section{padding-block:clamp(44px,7vh,104px)}
#main-content .entry-content:has([data-stop]) ul li{padding-left:0;margin-bottom:0;line-height:inherit}
#main-content .entry-content:has([data-stop]) ul li::before{content:none}

/* A filled button is not body prose: the link rule above is an ID selector,
   so it repainted .cta text brass and underlined it — and on hover the fill
   turned brass too, leaving brass on brass. These match its specificity. */
#main-content a.cta{color:var(--bg);background:var(--fg);text-decoration:none}
#main-content a.cta:hover{background:var(--cta-fill);color:var(--cta-ink)}
#main-content a.cta--ghost{background:transparent;color:var(--fg)}
#main-content a.cta--ghost:hover{background:var(--fg);color:var(--bg)}

/* ============================================================
   THE GLOBAL FOOTER  (mbp-footer.php, on et_after_main_content)
   The last stop of the evening. It carries data-stop="night", so
   the arc lands on it and the ground goes dark as it arrives.
   ============================================================ */

/* Divi's own footer is emptied of widgets in PHP; this hides what
   it still prints around them. */
#main-footer{display:none}

.mbp-foot{padding:clamp(58px,9vh,120px) var(--gut) clamp(34px,5vh,60px);border-top:1px solid var(--rule);color:var(--fg)}
.mbp-foot__inner{max-width:1500px;margin-inline:auto}

/* The live hour. Brass numerals against the display face — the one
   place in the footer that gets to be loud. */
.mbp-foot__light{max-width:34ch;margin-bottom:clamp(44px,6.5vh,84px)}
.mbp-foot__hour{font-family:var(--display);font-size:var(--step-2);line-height:1.12;letter-spacing:-.012em;margin:18px 0 .5em;color:var(--fg)}
.mbp-foot__hour b{font-weight:400;color:var(--accent);font-variant-numeric:lining-nums tabular-nums}
.mbp-foot__sub{font-size:var(--step--1);color:var(--muted);margin:0}

.mbp-foot__nav{display:grid;gap:clamp(30px,4vw,64px);grid-template-columns:1fr}
@media(min-width:820px){.mbp-foot__nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.mbp-foot__nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(240px,.82fr)}}
.mbp-foot__group h2{margin:0 0 14px}

/* Row language borrowed from .venues: the name, and one true number. */
.mbp-foot__rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.mbp-foot__rows li{border-bottom:1px solid var(--rule)}
.mbp-foot__rows a{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;
  padding:13px 0;text-decoration:none;color:var(--fg);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),color .3s
}
.mbp-foot__rows a:hover{transform:translateX(10px);color:var(--accent)}
.fr__n{font-size:var(--step-0);line-height:1.3}
.fr__m{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}

.mbp-foot__studio address{font-style:normal;display:grid;gap:6px;border-top:1px solid var(--rule);padding-top:12px}
/* Thumb targets: the row links get theirs from padding, these need their own. */
.mbp-foot__studio address a{display:inline-flex;align-items:center;min-height:44px}
.mbp-foot__tel{font-family:var(--display);font-size:var(--step-1);text-decoration:none;color:var(--fg);transition:color .3s}
.mbp-foot__mail{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.04em;text-decoration:none;color:var(--accent);word-break:break-word;transition:color .3s}
.mbp-foot__tel:hover,.mbp-foot__mail:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.mbp-foot__where{font-size:var(--step--1);color:var(--muted);line-height:1.55}

.mbp-foot__base{
  display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;justify-content:space-between;
  margin-top:clamp(40px,6vh,76px);padding-top:22px;border-top:1px solid var(--rule)
}
.mbp-foot__logo{width:132px;height:auto;opacity:.9}
.mbp-foot__legal{font-size:var(--step--1);color:var(--muted);margin:0;max-width:64ch}

/* The logo ships light-on-dark; invert it while the ground is still bright. */
body[data-stop="day"] .mbp-foot__logo,body[data-stop="gold"] .mbp-foot__logo{filter:invert(1) brightness(.22) saturate(.7)}

@media(prefers-reduced-motion:reduce){
  .mbp-foot__rows a{transition:color .3s}
  .mbp-foot__rows a:hover{transform:none}
}

/* header + footer */
#main-header{background:var(--bg) !important;box-shadow:none;border-bottom:1px solid var(--rule);transition:background-color 1.1s ease}
#main-header .et_menu_container{max-width:1500px}
#top-menu li a{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.13em;text-transform:uppercase;color:var(--muted) !important;opacity:1}
#top-menu li a:hover{color:var(--accent) !important;opacity:1}
#main-footer{background:var(--night);color:var(--bone)}
#footer-widgets .footer-widget h4{font-family:var(--display);font-weight:400;font-size:var(--step-1);color:var(--bone)}
#footer-info,#footer-bottom{background:var(--night);color:var(--muted);font-size:var(--step--1)}

/* Fluent Forms → our field language */
.fluentform .ff-el-input--label label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.fluentform .ff-el-form-control{
  background:transparent;color:var(--fg);border:1px solid var(--rule);border-radius:0;
  font-family:var(--body);font-size:var(--step-0);padding:14px 15px;min-height:48px
}
.fluentform .ff-el-form-control:focus{border-color:var(--accent);box-shadow:none;outline:none}
.fluentform .ff-btn-submit{
  background:var(--fg) !important;color:var(--bg) !important;border:0;border-radius:0;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  padding:17px 26px;min-height:48px;transition:background-color .3s,color .3s,transform .3s
}
.fluentform .ff-btn-submit:hover{background:var(--cta-fill) !important;color:var(--cta-ink) !important;transform:translateY(-2px)}

/* Divi's comment fields ship #eee with grey text and no border, which reads
   as a lit slab once the ground reaches the night stop. Same field language
   as the application form. */
#commentform input[type="text"],#commentform input[type="email"],
#commentform input[type="url"],#commentform textarea{
  background:transparent;color:var(--fg);border:1px solid var(--rule);border-radius:0;
  font-family:var(--body);font-size:var(--step-0);padding:14px 15px;min-height:48px;width:100%
}
#commentform textarea{min-height:132px}
#commentform input:focus,#commentform textarea:focus{border-color:var(--accent);outline:none}
#commentform input::placeholder,#commentform textarea::placeholder{color:var(--muted)}
#commentform .form-submit .submit{
  background:var(--fg);color:var(--bg);border:0;border-radius:0;cursor:pointer;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  padding:17px 26px;min-height:48px;transition:background-color .3s,color .3s
}
#commentform .form-submit .submit:hover{background:var(--cta-fill);color:var(--cta-ink)}

/* the appended application block from mbp-apply.php */
.mbp-apply{margin-top:56px;padding-top:32px;border-top:1px solid var(--rule);clear:both}
.mbp-apply h2{margin-top:0}

/* Divi's blog index → our cards */
.et_pb_post{border-bottom:1px solid var(--rule);padding-bottom:22px}
.et_pb_post .entry-title a{font-family:var(--display);color:var(--fg);text-decoration:none}
.et_pb_post .entry-title a:hover{color:var(--accent)}
.et_pb_post .post-meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.et_pb_post .post-meta a{color:var(--accent);text-decoration:none}

/* rail sits left of Divi's shell */
@media(min-width:761px){
  #page-container{padding-left:var(--rail-w)}
  #main-header{left:var(--rail-w);width:calc(100% - var(--rail-w))}
}

/* Skip link. The theme's accessibility module emits .mbp-skip-link;
   these rules used to live in a sandbox file and must travel with the theme. */
.skip,.mbp-skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--night);color:var(--bone);padding:12px 20px;font-size:16px;line-height:1.2;text-decoration:underline;display:inline-flex;align-items:center;min-height:44px}
.skip:focus,.mbp-skip-link:focus{left:0}
#main-content:focus{outline:none}

/* Divi paints its own surfaces white. The light arc changes the text colour,
   so those surfaces must let the ground through or dark stops become unreadable. */
#main-content,#main-content .container,#main-area,article,.entry-content,
.et_pb_section,.et_pb_row,.et_pb_column,.et_pb_module,.et_pb_text,
#left-area,#sidebar,.et_pb_widget_area{background-color:transparent}
#main-content{background:transparent}

/* The front page supplies its own headline in the content, so Divi's
   template title is hidden there. It stays in the DOM for assistive tech. */
body.home #main-content .entry-title{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body.home .hero{padding-top:0}

/* ---- Web quality audit, 6 August 2026 ----------------------------------- */

/* The front page carried two h1s: Divi's off-screen template title and the
   hero line. The template title keeps the h1 — it is the one that names the
   service — and the hero is an h2 that borrows the h1 display size. */
#main-content .display-1{
  font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.02;
  font-size:clamp(2.3rem,1.3rem + 3.6vw,4.4rem);color:var(--fg);margin:0
}
.display-1 .soft{font-style:italic; color:var(--accent)}

/* The header could not fit the wordmark and a six-item nav side by side below
   about 1400px: the menu wrapped to two rows and ran underneath the logo. Two
   causes, both Divi's. The logo is sized as 54% of the header height, so at the
   unscrolled height it renders 343px wide — and Divi reserves room for it with
   an inline padding-left on the nav that it computes before the logo reaches
   that size, so the reserved space is wrong at every width.

   In this band the logo takes the same size it already takes once the header
   shrinks on scroll, the container gives back the margin Divi's 80% width was
   spending, and the nav's left padding is stated rather than guessed. The
   inline style is why !important is needed here. */
@media (min-width:981px){
  /* 54% of a header whose height changes on scroll means the wordmark is 343px
     wide at the top of the page and 210px once it shrinks. Hold it at the
     smaller size, which is the one the header was designed around. */
  #main-header #logo{max-height:43px}

  /* Divi writes this as an inline style, hence !important. 210px of wordmark
     plus a 30px gap. */
  .et_header_style_left #et-top-navigation{padding-left:240px !important}
}

/* The nav needs 1115px beside the wordmark. Divi's 80% container only supplies
   that past 1470px, so below it the header — and only the header — keeps a
   narrower margin. */
@media (min-width:981px) and (max-width:1499px){
  #main-header .container{width:96%}
}

/* Even at 96% the row cannot hold six items of tracked-out mono type below
   about 1260px: the menu wrapped to a second line and ran under the logo.
   Rather than compress the nav typography at laptop widths, the drawer that
   already exists takes over earlier. Divi's own switch stays at 980px; this
   moves the visible boundary without touching its breakpoint logic. */
@media (min-width:981px) and (max-width:1259px){
  #et-top-navigation nav#top-menu-nav{display:none}
  #et_mobile_nav_menu{display:block}
}

/* Divi paints the drawer toggle its own #2ea3f2. Below 980px a customizer rule
   happened to darken it; at these widths nothing did, so the one blue object on
   the site appeared in the header. It follows the ink colour like everything
   else, which also means it stays legible through the evening stops. */
#et_mobile_nav_menu .mobile_menu_bar:before,
#et_mobile_nav_menu .mobile_menu_bar:after{color:var(--fg)}

/* The drawer itself was still stock Divi — white panel, blue rule, grey links —
   which was easy to miss while it only appeared on phones. It now speaks the
   same language as the desktop bar: mono, tracked out, upper case, on the
   ground colour of whichever light stop the page is in. */
.et_mobile_menu{
  background:var(--bg) !important;
  border-top:1px solid var(--accent);
  box-shadow:none
}
.et_mobile_menu li a{
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted) !important;
  border-bottom:1px solid var(--rule)
}
.et_mobile_menu li a:hover{color:var(--accent) !important; background:transparent; opacity:1}
.et_mobile_menu .menu-item-has-children > a{
  background:transparent; font-weight:400; color:var(--fg) !important
}
.et_mobile_menu li li{padding-left:5%}

/* Divi sizes the panel to the 80% container, so the page showed through either
   side of it — invisible while the panel was white, obvious once it took the
   page's own ground colour. It now spans the header, sits fixed under it, and
   scrolls inside itself: thirty-six items is a long list on a phone. */
#et_mobile_nav_menu .et_mobile_menu{
  position:fixed; left:var(--rail-w); right:0; width:auto;
  padding-left:10%; padding-right:10%;
  /* The bar is 81px at phone widths and 90px once the rail appears; 96px
     clears both without ever reaching the bottom of the screen. */
  max-height:calc(100vh - 96px); overflow-y:auto;
  box-shadow:0 24px 48px rgba(10,20,22,.18)
}
@media (min-width:981px){
  #et_mobile_nav_menu .et_mobile_menu{padding-left:2%; padding-right:2%}
}

/* Form controls set outline:none on :focus, which also removed the keyboard
   focus ring — a border colour change alone is not a visible focus indicator.
   Pointer focus stays quiet; keyboard focus gets the same ring as everything
   else on the site. */
input:focus-visible,select:focus-visible,textarea:focus-visible,
.fluentform .ff-el-form-control:focus-visible,
#commentform input:focus-visible,#commentform textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px
}