/* ==========================================================================
   Ronald Berenbeim — overrides on the MegaOne corporate-business demo.
   Loaded last. Only styles the sections that replaced the demo's portfolio,
   testimonial and booking blocks; the demo's own shell is left alone.
   ========================================================================== */

:root{
  --rb-ink:#14202B;
  --rb-ink-2:#25333F;
  --rb-muted:#5A6874;
  --rb-acc:#8E2F3C;          /* oxblood: reads as legal/academic, not corporate blue */
  --rb-line:rgba(20,32,43,.13);
  --rb-paper:#F5F3EE;
}

/* ---------- shared section furniture ------------------------------------ */
.sec-kicker{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rb-acc); font-weight:700; margin:0 0 14px;
}
.sec-title{
  font-size:clamp(26px,3.4vw,44px); line-height:1.18; color:var(--rb-ink);
  margin:0 0 18px; font-weight:700; letter-spacing:-.01em;
}
.sec-lead{ color:var(--rb-muted); font-size:17px; line-height:1.7; margin:0 0 8px; max-width:62ch }

.places-sec,.works-sec,.creds-sec{ padding:clamp(64px,8vw,110px) 0 }
.works-sec{ background:var(--rb-paper) }

/* ---------- hero additions ---------------------------------------------- */
.banner-area .eyebrow{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:#E8B9BC; margin:0 0 18px; font-weight:700;
}
.banner-area h1{ letter-spacing:-.02em }
.banner-area .role-line{
  font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.72);
  margin:0 0 20px !important;
}
.wordmark{ font-size:19px; font-weight:700; color:#fff; line-height:1.1; display:inline-block }
.wordmark i{
  display:block; font-style:normal; font-size:10px; letter-spacing:.24em;
  color:#E8B9BC; margin-top:3px;
}

/* ---------- about: portrait + figures ------------------------------------ */
.about-portrait img{ width:100%; height:auto; display:block }
.about-text p{ color:var(--rb-muted); font-size:16px; line-height:1.75 }
.about-text strong{ color:var(--rb-ink) }
.figs-row{ margin-top:clamp(38px,5vw,64px) }
.fig{
  padding:22px 18px; border-top:2px solid var(--rb-acc); height:100%;
  background:#fff;
}
.fig b{
  display:block; font-size:clamp(30px,3.4vw,44px); line-height:1;
  color:var(--rb-ink); font-weight:700; letter-spacing:-.02em; margin-bottom:9px;
}
.fig span{ display:block; font-size:13px; line-height:1.5; color:var(--rb-muted) }

/* ---------- booking band -------------------------------------------------- */
.booking-area .inner-text h4{ letter-spacing:.02em }
.booking-area .inner-text h2{ font-size:clamp(20px,2.4vw,30px); line-height:1.35; max-width:26ch; margin-inline:auto }

/* ---------- where he taught it ------------------------------------------- */
.places-grid{ margin-top:clamp(30px,4vw,52px) }
.place-col{ margin-bottom:26px; display:flex }
.place-card{
  background:#fff; border:1px solid var(--rb-line); width:100%;
  display:flex; flex-direction:column; transition:box-shadow .25s, transform .25s;
}
.place-card:hover{ box-shadow:0 14px 40px rgba(20,32,43,.12); transform:translateY(-3px) }
.place-img{ aspect-ratio:16/9; overflow:hidden; background:var(--rb-ink) }
.place-img img{ width:100%; height:100%; object-fit:cover; display:block }
.place-body{ padding:20px 20px 22px }
.place-year{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rb-acc); font-weight:700; margin-bottom:8px;
}
.place-city{ font-size:24px; font-weight:700; color:var(--rb-ink); margin:0 0 6px; line-height:1.2 }
.place-inst{ font-size:14px; color:var(--rb-muted); margin:0 0 4px }
.place-role{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--rb-muted); margin:0 }

/* ---------- written work -------------------------------------------------- */
.works-list{ list-style:none; margin:clamp(28px,4vw,46px) 0 26px; padding:0 }
.work-row{
  display:grid; grid-template-columns:86px minmax(0,1fr); gap:6px 26px;
  padding:24px 0; border-top:1px solid var(--rb-line); align-items:baseline;
}
.works-list .work-row:last-child{ border-bottom:1px solid var(--rb-line) }
.work-year{ font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--rb-acc) }
.work-title{ font-size:clamp(17px,2vw,23px); line-height:1.32; color:var(--rb-ink); margin:0 0 6px; font-weight:700 }
.work-title cite{ font-style:italic }
.work-meta{ font-size:14px; color:var(--rb-muted); margin:0 }
.work-note{ font-size:13px; color:var(--rb-muted); font-style:italic; margin:5px 0 0 }
.works-foot{ font-size:15px; color:var(--rb-muted); margin:0 }
.works-foot strong{ color:var(--rb-acc) }
@media (max-width:575px){ .work-row{ grid-template-columns:1fr; gap:6px } }

/* ---------- credentials --------------------------------------------------- */
.cred-list{ list-style:none; margin:0; padding:0 }
.cred-list li{ padding:18px 0; border-top:1px solid var(--rb-line) }
.cred-list li:last-child{ border-bottom:1px solid var(--rb-line) }
.cred-list b{ display:block; font-size:17px; color:var(--rb-ink); margin-bottom:4px; line-height:1.3 }
.cred-list span{ display:block; font-size:14px; color:var(--rb-muted) }

/* ---------- contact ------------------------------------------------------- */
.doors-row{ margin-top:clamp(26px,3.5vw,44px) }
.door{
  display:block; padding:26px 24px; border:1px solid var(--rb-line);
  background:#fff; text-decoration:none; height:100%; margin-bottom:22px;
  transition:border-color .22s, box-shadow .22s;
}
.door:hover{ border-color:var(--rb-acc); box-shadow:0 10px 30px rgba(20,32,43,.10) }
.door b{ display:block; font-size:19px; color:var(--rb-ink); margin-bottom:8px }
.door span{ display:block; font-size:14px; line-height:1.6; color:var(--rb-muted) }

/* the demo hides overflow-x badly on some breakpoints */
html,body{ overflow-x:hidden }

/* ---------- kill the demo's dimension-stamped placeholder art -------------
   banner.jpg and booking-img.jpg are grey plates with "1920 x 1000" printed
   on them. Until real photography exists, these bands carry weight on their
   own rather than shipping a placeholder to a live client site. */
/* The hero photograph is mirrored so the subject sits in the right third and
   the empty corridor wall falls behind the type block. The gradient is opaque
   on the left, where the h1 sits, and thins out to the right so the picture is
   actually visible. Contrast on the h1 is pixel-sampled below, not assumed. */
.banner-area{
  background-image:
    linear-gradient(95deg, rgba(9,14,20,.95) 0%, rgba(9,14,20,.92) 34%, rgba(10,17,24,.72) 56%, rgba(12,20,28,.42) 78%, rgba(14,22,30,.34) 100%),
    url("../img/hero-corridor.jpg") !important;
  background-size:cover, cover !important;
  background-position:center, 58% 42% !important;
  background-repeat:no-repeat, no-repeat !important;
}
.booking-area{
  background-image:
    linear-gradient(100deg, rgba(142,47,60,.90) 0%, rgba(110,36,48,.94) 100%),
    url("../img/band-stairwell.jpg") !important;
  background-size:cover, cover !important;
  background-position:center, center 30% !important;
  background-repeat:no-repeat, no-repeat !important;
}
.booking-area .inner-text h4,
.booking-area .inner-text h2{ color:#fff !important }
.booking-area .inner-text h4{ opacity:.82 }

/* the hero type block: the demo boxes h1 in white, which fights a person's name */
.banner-area .black-box{ background:transparent !important; box-shadow:none !important }
.banner-area .box-content{ padding-left:0 }
.banner-area h1{
  background:none !important; color:#fff !important;
  padding:0 !important; text-transform:none !important;
  font-size:clamp(38px,6vw,76px) !important; line-height:1.05 !important;
  margin-bottom:16px !important;
}
.banner-area .box-content p{ color:rgba(255,255,255,.86) }

/* wow.js starts elements invisible; if the script fails they must not stay that way */
.no-js .wow, .wow.animated{ visibility:visible !important }

.place-card{ border-top:3px solid var(--rb-acc) }
.place-body{ padding:22px 22px 26px }


/* ---------- photography added after the first build ----------------------
   Ten generated portraits. Everything factual on this page comes from the
   press release; the pictures do not, and the note under the places grid
   says so on the page rather than only in this comment. */

.places-note{
  margin:6px 0 0; font-size:12.5px; line-height:1.6; color:var(--rb-muted);
  max-width:70ch; border-top:1px solid var(--rb-line); padding-top:16px;
}

.side-fig, .strip-fig{ margin:0; overflow:hidden; background:var(--rb-ink) }
.side-fig img, .strip-fig img{ width:100%; height:100%; object-fit:cover; display:block }
.side-fig{ aspect-ratio:4/3; border-bottom:3px solid var(--rb-acc) }
.works-head{ margin-bottom:6px }
.strip-fig{ aspect-ratio:21/9; margin-bottom:clamp(34px,4.5vw,58px); border-bottom:3px solid var(--rb-acc) }

@media (max-width:991px){
  .side-fig{ aspect-ratio:16/9 }
  .strip-fig{ aspect-ratio:16/9 }
}