/* Shared visual language: carousel-style serif headings, Poppins text.
   Georgia is a visual match to the supplied JPEGs, not an extracted font identification.
   Photo transitions are display-only: all original image files stay untouched. */
:root{--brand-cream:#F5F0EC;--brand-serif:Georgia,'Times New Roman',serif;--brand-sans:'Poppins',Arial,sans-serif}
body{font-family:var(--brand-sans)}
button,input,textarea,select{font-family:var(--brand-sans)}
body h1,body h2,body h3{font-family:var(--brand-serif);font-weight:700;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:break-word}
body h1,body h2{line-height:1.12}
body h3{line-height:1.25}
body .hero h1{letter-spacing:-.025em}
body h1 em,body h2 em,body h3 em{font-family:var(--brand-serif);font-weight:inherit;font-style:italic}
body .eyebrow,body .btn,body .button,body nav,body .team-role,body .portrait-caption,body figcaption{font-family:var(--brand-sans)}
body .hero .lead,body .hero-intro{font-family:var(--brand-serif);font-style:italic;font-size:clamp(20px,1.65vw,25px);line-height:1.5}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

:root{--white:var(--brand-cream)}
.hero-image{background:var(--white)}
.hero-image::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--white),transparent 18%),linear-gradient(0deg,var(--white),transparent 26%)}
.hero-image figcaption{z-index:1}
.project-cover{background:var(--stone);border-bottom-left-radius:0;border-bottom-right-radius:0}
.project-cover::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 75%,rgba(232,226,217,.18) 82%,var(--stone) 100%)}
.peter-photo>img,.team-photo>img{-webkit-mask-image:linear-gradient(to bottom,#000000 83%,rgba(0,0,0,.8) 91%,transparent 100%);mask-image:linear-gradient(to bottom,#000000 83%,rgba(0,0,0,.8) 91%,transparent 100%);border-bottom-left-radius:0;border-bottom-right-radius:0}
body .deko-copy h3 em{font-weight:inherit}
@media(max-width:600px){.hero-image::after{background:linear-gradient(0deg,var(--white),transparent 30%)}body .hero h1{font-size:clamp(44px,11.5vw,60px);letter-spacing:-.025em}}

/* Canonical palette shared by both websites. */
:root{--blue:#00446B;--ink:#333333;--burgundy:#702D3E;--burgundy-dark:#592331;--orange:#702D3E;--paper:#F5F0EC;--white:#F5F0EC;--brand-cream:#F5F0EC;--stone:#E8E2D9;--greige:#B7AEA3;--logo-grey:#808080;--line:#D7D0C7}

body .hero h1{color:var(--blue)}

/* The original Sterzenbach flame/water symbol links both brands. */
.brand-lockup{display:flex;align-items:center;gap:14px}.brand-words{display:flex;flex-direction:column}.brand .brand-words>span{font-size:25px;font-weight:500;letter-spacing:-1.2px;line-height:1.3}.brand .brand-words>small{font-size:12px;font-weight:500;line-height:1.5;letter-spacing:2.1px;margin-top:8px}.brand .brand-symbol{display:block;width:44px;height:44px;flex:none}.brand>.brand-lockup{letter-spacing:normal;line-height:normal}
@media(max-width:600px){.brand-lockup{gap:9px}.brand .brand-words>span{font-size:21px}.brand .brand-words>small{font-size:10px;letter-spacing:1.5px}.brand .brand-symbol{width:36px;height:36px}}
@media(max-width:380px){.header{gap:10px}.brand .brand-words>span{font-size:19px}.brand .brand-symbol{width:30px;height:30px}.brand-lockup{gap:7px}}
@media(max-width:380px){.brand .brand-words>span{font-size:18px}.brand .brand-words>small{font-size:9px;letter-spacing:1.1px}.menu-button{white-space:nowrap;padding:8px 4px}}

/* Keep the mobile header height stable while the brand font loads. */
@media (max-width: 850px) {
  .header .menu-button { line-height: 1.5; }
}