/* Palette from the supplied reference: ecru, coral, ochre and oxblood,
   with restrained ink-blue accents. */
.theme-rose {
  --paper:#f1e7da;
  --ink:#54252a;
  --accent:#eeb74f;
  --line:rgba(84,37,42,.24);
  --cream:#f1e7da;
  --coral:#df8a72;
  --mustard:#eeb74f;
  --burgundy:#662d35;
  --blue:#24486e;
}
.service-section {padding:88px 7% 80px;scroll-margin-top:0}
.service-heading {display:flex;justify-content:space-between;align-items:end;gap:55px;margin-bottom:55px}
.service-heading h2 {font:400 clamp(76px,10vw,154px)/.95 var(--serif);letter-spacing:-.065em;margin:20px 0 0}
.section-kicker {font-size:12px;letter-spacing:1.6px}
.title-dot {color:var(--coral)}
.service-intro {max-width:400px;padding-bottom:7px}
.service-intro p,.school-copy p {font-size:20px;line-height:1.65}
.service-link {display:inline-flex;align-items:center;justify-content:space-between;gap:28px;max-width:100%;padding:0 0 10px;margin-top:25px;border:0;border-bottom:1px solid currentColor;background:transparent;font-size:17px;line-height:1.5;text-align:left}
.service-link span {font-size:25px;line-height:1;transition:transform .2s}
.service-link:hover span {transform:translate(3px,-3px)}
.studio-section {background:var(--cream);color:var(--blue)}
.studio-section .section-kicker,.studio-section .service-link {color:var(--blue)}
.studio-gallery {display:grid;grid-template-columns:1.65fr .85fr;gap:6%;align-items:start}
.service-section figure {margin:0;min-width:0}
.gallery-photo {display:block;width:100%;padding:0;overflow:hidden}
.gallery-photo img {display:block;width:100%;height:auto}
.studio-family img {aspect-ratio:4/3;object-fit:cover}
.studio-baby {padding-top:65px}
.studio-baby .gallery-photo {width:90%;margin-left:auto}
.studio-baby img {aspect-ratio:4/5;object-fit:cover;object-position:center 35%}
.photo-heading {font:400 clamp(30px,3.3vw,52px)/1.08 var(--serif);letter-spacing:-.045em;margin:0 0 28px}
.studio-baby .photo-heading {margin-left:10%}
.section-tail {display:flex;justify-content:space-between;align-items:baseline;gap:25px;border-top:1px solid currentColor;margin-top:55px;padding-top:22px;font-size:11px;letter-spacing:1.3px;line-height:1.7}
.tail-note {font:italic 24px/1.3 var(--serif);letter-spacing:-.02em;text-align:right}
.lifestyle-section {background:var(--coral);color:#4f262b}
.lifestyle-section .title-dot {color:var(--cream)}
.lifestyle-gallery {display:grid;grid-template-columns:1.1fr .8fr .8fr;gap:3.5%;align-items:start;margin-top:60px}
.lifestyle-beach {padding-top:100px}
.lifestyle-personality {padding-top:24px}
.lifestyle-personality .photo-heading {font-size:clamp(32px,3.7vw,58px);margin-bottom:30px}
.schools-section {background:var(--burgundy);color:var(--cream);padding-bottom:70px}
.schools-section .title-dot,.schools-section .service-link {color:var(--mustard)}
.schools-section .section-kicker {color:var(--mustard)}
.section-statement {font:400 clamp(30px,3.1vw,48px)/1.13 var(--serif);letter-spacing:-.035em;max-width:470px;margin-bottom:6px}
.schools-gallery {display:grid;grid-template-columns:.8fr 1.2fr;gap:6%;align-items:start}
.school-portrait {padding-top:65px}
.school-portrait img {aspect-ratio:3/4;object-fit:cover}
.school-story img {aspect-ratio:3/2;object-fit:cover}
.school-copy {max-width:520px;margin-top:35px}
.schools-section .section-tail {border-color:#f1e7da55;margin-top:60px}
.schools-section .tail-note {color:var(--mustard)}
.about-section {display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;background:var(--mustard);color:var(--ink);padding:85px 7%}
.about-portrait {margin:0;min-width:0}
.about-portrait img {display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.about-copy h2 {font:400 clamp(58px,5.8vw,90px)/1.03 var(--serif);letter-spacing:-.05em;margin:20px 0 30px}
.about-copy>p:not(.eyebrow) {font-size:20px;line-height:1.65;max-width:500px}
.about-copy>p.about-intro {font-size:24px;line-height:1.45;margin-bottom:24px}
.about-copy .service-link {margin-top:30px}
.site-footer {background:var(--blue);color:var(--cream);flex-wrap:wrap;padding-bottom:24px}
.concept-note {width:100%;border-top:1px solid #f1e7da40;padding-top:18px;font-size:12px;line-height:1.6;color:var(--cream)}

/* Original supplied artwork, framed and tinted without altering the files. */
.brand-doodle {position:relative;display:block;overflow:hidden;flex-shrink:0;pointer-events:none;user-select:none}
.brand-doodle::before {content:"";position:absolute;left:var(--art-left);top:var(--art-top);width:var(--art-width);height:var(--art-height);background:currentColor;-webkit-mask:var(--art) center/100% 100% no-repeat;mask:var(--art) center/100% 100% no-repeat}
.doodle-flourish {--art:url("assets/beli-flourish.png");--art-left:-37.922%;--art-top:-65.954%;--art-width:169.231%;--art-height:223.529%;aspect-ratio:741/561;color:#c97760;transform:rotate(-9deg)}
.doodle-wave {--art:url("assets/beli-wave.png");--art-left:-10.028%;--art-top:-358.491%;--art-width:118.638%;--art-height:788.679%;aspect-ratio:1057/159;color:var(--cream);opacity:.9}
.doodle-stamp {--art:url("assets/beli-stamp.png");--art-left:-9.866%;--art-top:-9.684%;--art-width:120.115%;--art-height:120.230%;width:100%;aspect-ratio:1044/1043}
.doodle-monogram {--art:url("assets/beli-monogram.png");--art-left:-77.193%;--art-top:-13.722%;--art-width:244.444%;--art-height:123.791%;aspect-ratio:513/1013}
.studio-family,.lifestyle-pool,.school-portrait,.about-portrait {position:relative}
.photo-flourish {position:absolute;right:-47px;top:-55px;width:182px}
.photo-wave {position:absolute;right:-36px;bottom:-16px;width:325px;transform:rotate(-7deg)}
.photo-monogram {position:absolute;right:-46px;bottom:-42px;width:123px;color:var(--cream);opacity:.75;transform:rotate(8deg)}
.about-stamp {position:absolute;right:-35px;bottom:-60px;width:180px;background:transparent;color:var(--blue);transform:rotate(12deg);pointer-events:none}
@media(max-width:1100px) {
  .service-section {padding:70px 5% 65px}
  .service-heading {gap:35px;margin-bottom:42px}
  .service-heading h2 {font-size:100px}
  .service-intro {max-width:350px}
  .service-intro p,.school-copy p {font-size:18px}
  .studio-gallery,.schools-gallery {gap:5%}
  .studio-baby {padding-top:40px}
  .studio-baby .photo-heading {font-size:36px}
  .section-tail {margin-top:42px}
  .lifestyle-beach {padding-top:70px}
  .lifestyle-personality {padding-top:12px}
  .lifestyle-personality .photo-heading {font-size:37px}
  .section-statement {font-size:36px}
  .school-portrait {padding-top:40px}
  .about-section {padding:70px 5%;gap:6%}
  .about-copy h2 {font-size:64px}
  .about-copy>p:not(.eyebrow) {font-size:18px}
  .photo-flourish {width:156px;right:-39px;top:-50px}
  .photo-wave {width:273px;right:-29px;bottom:-13px}
  .about-stamp {width:156px;right:-22px;bottom:-54px}
}
@media(max-width:760px) {
  .service-section {padding:55px 24px 48px}
  .service-heading {display:block;margin-bottom:35px}
  .service-heading h2 {font-size:clamp(68px,18vw,112px);margin-top:17px}
  .section-kicker {font-size:10px;letter-spacing:1.3px}
  .service-intro {max-width:500px;margin-top:24px;padding:0}
  .service-intro p,.school-copy p {font-size:18px;line-height:1.6}
  .service-link {font-size:16px;margin-top:21px}
  .studio-gallery {grid-template-columns:1fr;gap:32px}
  .studio-family img {aspect-ratio:4/3}
  .studio-baby {width:78%;justify-self:end;padding-top:0}
  .studio-baby .gallery-photo {width:100%;margin:0}
  .studio-baby .photo-heading {margin-left:0}
  .studio-baby .photo-heading {font-size:35px;margin-bottom:22px}
  .section-tail {display:block;margin-top:35px;padding-top:18px;font-size:10px;letter-spacing:1px}
  .tail-note {display:block;text-align:left;font-size:23px;margin-top:12px}
  .lifestyle-gallery {grid-template-columns:1fr 1fr;gap:30px 18px;margin-top:35px}
  .lifestyle-pool {grid-column:1/-1;width:90%}
  .lifestyle-beach {padding-top:28px}
  .lifestyle-personality {padding-top:0}
  .lifestyle-personality .photo-heading {font-size:29px;margin-bottom:20px}
  .schools-gallery {grid-template-columns:1fr;gap:36px}
  .section-statement {font-size:32px;margin:25px 0 0}
  .school-portrait {width:84%;padding-top:0}
  .school-story {width:100%}
  .school-copy {margin-top:25px}
  .schools-section .section-tail {margin-top:35px}
  .about-section {grid-template-columns:1fr;gap:36px;padding:52px 24px}
  .about-portrait {max-width:480px}
  .about-copy h2 {font-size:clamp(54px,13vw,76px);margin-bottom:24px}
  .about-copy>p.about-intro {font-size:22px}
  .site-footer {padding-bottom:22px}
  .concept-note {font-size:11px;padding-top:16px}
  .photo-flourish {width:120px;right:-8px;top:-50px}
  .photo-wave {width:234px;right:-25px;bottom:-11px}
  .photo-monogram {width:91px;right:-34px;bottom:-32px}
  .about-stamp {width:132px;right:-6px;bottom:-48px}
}

/* Editorial headline and introduction. */
.theme-rose .hero-copy h1 {
  max-width:1240px;
  margin:24px auto 0;
  font-size:clamp(80px,9.3vw,148px);
  line-height:1.04;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.theme-rose .hero-copy h1 em {display:block;text-wrap:balance}
.theme-rose .hero-copy>.eyebrow {
  font-size:14px;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.theme-rose .hero-bottom {margin-top:26px}
.theme-rose .hero-bottom p {
  max-width:850px;
  margin-inline:auto;
  font-size:20px;
  line-height:1.55;
  text-wrap:pretty;
}
@media(max-width:760px) {
  .theme-rose .hero-shell {min-height:100svh}
  .theme-rose .photograph {position:absolute;inset:0;height:100%;min-height:0}
  .theme-rose .hero-copy {position:relative;inset:auto;padding:144px 24px 230px}
  .theme-rose .hero-copy>.eyebrow {max-width:350px;font-size:11px;line-height:1.7;letter-spacing:.9px}
  .theme-rose .hero-copy h1 {font-size:clamp(48px,14.5vw,88px);line-height:1.05;margin-top:20px;text-wrap:initial}
  .theme-rose .hero-bottom {margin-top:24px}
  .theme-rose .hero-bottom p {font-size:17px;line-height:1.5}
}

/* The supplied logo inherits the exact colour of neighbouring text. */
.logo-mark {
  display:block;
  width:132px;
  height:132px;
  flex-shrink:0;
  background-color:currentColor;
  -webkit-mask:url("assets/beli-logo-mask.png") center / contain no-repeat;
  mask:url("assets/beli-logo-mask.png") center / contain no-repeat;
}
.footer-logo .logo-mark {width:110px;height:110px}
@media(max-width:760px) {
  .brand .logo-mark {width:100px;height:100px}
  .footer-logo .logo-mark {width:90px;height:90px}
}

/* Keep navigation close to the top edge, independent of logo height. */
.theme-rose .desktop-nav,.theme-rose .menu-toggle {align-self:flex-start}

/* The contact page is a normal, accessible navigation destination. */
.desktop-nav .hello-link {border-bottom-color:currentColor;padding:13px 0}