/* CM Studios identity: warm illuminated lettering, olive and natural stone. */
:root {
  --paper:#f3f0e7; --white:#fffaf0; --green:#414532; --green-soft:#5c6249;
  --orange:#ead4a2; --orange-deep:#796137; --yellow:#dfddce;
  --line:#c5c5b5; --muted:#5b6251; --gold:#f8e7bc; --gold-soft:#d6c295;
  --header-height:116px;
}
html { scroll-padding-top:calc(var(--header-height) + 16px); }
body { background:var(--paper); color:#353d2e; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid #bfa471; outline-offset:5px; }
.site-header {
  min-height:116px; padding:14px var(--gutter); color:var(--gold);
  background:rgba(53,59,42,.97); border-bottom:1px solid #aa956445;
  box-shadow:0 5px 26px #18201020;
}
.site-header.has-scrolled { box-shadow:0 8px 30px #18201035; }
.brand { gap:19px; }
.brand-mark { width:104px; height:87px; filter:drop-shadow(0 0 10px #d3ac6138); }
.brand-name { font-size:23px; letter-spacing:3px; color:#f5e5bf; }
.brand-name span { font-size:12px; letter-spacing:2.2px; color:#d3d1bc; }
.main-nav { font-size:14px; }
.main-nav a:not(.nav-contact)::after { border-color:var(--gold); }
.nav-contact { border-color:#d6c29580; color:var(--gold); }
.nav-contact:hover { background:var(--gold); color:var(--green); }
.reading-progress { top:var(--header-height); }
.reading-progress span { background:var(--gold-soft); }
.hero { background:#464b37; grid-template-columns:1.1fr 1fr; }
.hero-copy { color:#f7f0dc; padding:30px 35px 40px var(--gutter); }
.hero h1 { font-size:clamp(45px,4.1vw,66px); line-height:1.05; letter-spacing:-1px; }
.hero h1 em { color:var(--gold); white-space:normal; }
.hero-intro { font-size:17px; color:#ebe8d5; margin-top:20px; }
.hero .button { margin-top:23px; background:var(--gold); color:#353e2c; box-shadow:0 6px 18px #151e1530; }
.hero .button:hover { background:#fff5d9; }
.hero .button-index { color:#755b2d; }
.hero-note { border-color:#a5a98955; margin-top:26px; padding-top:16px; color:#dedfca; }
.hero-note span { font-size:12px; letter-spacing:1.2px; }
.hero-visual {
  padding:55px clamp(28px,4vw,66px) 38px; background:#e8e5d8; color:var(--green);
  border-left:1px solid #5f654136;
}
.portrait-frame { transform:rotate(0); border-radius:3px; padding:10px; border-color:#90947b; background:#e9e7d9; box-shadow:15px 18px 0 #71785b24,0 22px 50px #3a402b18; }
.portrait-frame img { border-radius:1px; aspect-ratio:.86; object-position:51% 62%; }
.portrait-caption { padding-top:36px; }
.portrait-caption>span:first-child { font-size:clamp(29px,2.8vw,43px); }
.portrait-caption>span:last-child { color:#62694e; }
.hero-side-note { color:#686f53; }
.principles-strip { background:#303b2a; color:#f4ecda; border-top:1px solid #b4a47e3d; }
.principles-strip>span:nth-child(even) { color:#d6bf8a; }
.principles-strip>span:nth-child(odd) { font-size:clamp(20px,2.2vw,32px); }
.work-heading h2 em,.services h2 em { color:#786033; }
.project-photo { transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .35s; will-change:transform; box-shadow:0 16px 40px #3b442218; }
.project-photo:hover { box-shadow:0 20px 48px #3b44222b; }
.gallery-label { background:#fff9eeda; }
.project-open:hover .gallery-label { background:#3c472f; color:#fff3d5; }
.project-open:hover .gallery-label>span { color:#e5dbba; }
.project-number { color:#52442c; background:#faf0d8; box-shadow:0 3px 14px #24281716; }
.project-title>span { border-color:#beac8070; color:#635236; background:#ece5d52e; }
.card-previews button[aria-pressed=true] { border-color:#8d7441; }
.about { background:#414a33; color:#f5efdc; }
.about .section-top,.values-grid article { border-color:#a9ac8766; }
.about h2 em,.signature { color:#ead4a2; }
.about-copy p,.values-grid p { color:#e7e8d5; }
.about-copy .intro-large { color:#fbf1d7; }
.value-number { color:#e9cf94; }
.process { background:#dedccf; }
.process .section-top,.process-steps details { border-color:#aeb49a; }
.process-steps summary:hover { color:#866a34; }
.process-counter { color:#666f4e; }
.contact { background:#4b523b; color:#fff2d5; }
.contact .section-top,.contact-details>div { border-color:#b1ac8370; }
.contact h2 em { color:#efd8a1; }
.contact .button { background:#f0dbb0; color:#3b432f; }
.contact .button:hover { background:#fff1d1; }
.contact-details a { color:#fff3d5; }
.contact-label { color:#dfd9bf; }
footer { background:#303928; color:#fbefd3; border-top:1px solid #d0bb8059; }
.footer-wordmark>img { width:125px; height:105px; filter:drop-shadow(0 0 8px #eec17520); }
.footer-wordmark>.footer-brand-copy { color:#f9e5b4; font-size:23px; letter-spacing:3px; }
.footer-brand-copy>span { color:#d2c298; font-size:19px; margin-top:4px; }
footer>div { color:#d6dbc5; }
.project-dialog::backdrop { background:#1b2418e6; }
.project-dialog.is-expanded { background:#262e21; }
.is-expanded .gallery-stage { background:#1b2318; }
.is-expanded .gallery-thumbnails button[aria-pressed=true] { border-color:var(--gold-soft); }
.close-dialog:hover,.gallery-controls>button:hover,.gallery-toolbar button:hover,.gallery-toolbar button[aria-pressed=true] { background:#414b33; color:#fff1cf; }
.is-expanded .close-dialog:hover,.is-expanded .gallery-toolbar button:hover,.is-expanded .gallery-toolbar button[aria-pressed=true],.is-expanded .gallery-controls>button:hover { background:#f0dfb8; color:#303a28; }

@media(min-width:1700px) {
  .hero-copy { padding-left:80px; }
.brand-stage { height:250px; }
}
@media(max-width:1120px) {
  .site-header { gap:16px; }
  .brand-mark { width:92px; height:78px; }
  .brand-name { font-size:19px; letter-spacing:2px; }
  .brand-name span { letter-spacing:1.2px; }
  .brand { gap:13px; }
  .main-nav { gap:17px; }
  .hero-copy { padding-right:26px; }
.brand-object { width:225px; height:189px; }
.hero-wordmark>span { letter-spacing:1px; }
.brand-controls input { width:65px; }
  .hero h1 { font-size:46px; }
  .hero-visual { padding-left:30px; padding-right:30px; }
}
@media(max-width:850px) {
  .site-header { min-height:99px; padding-top:10px; padding-bottom:10px; }
  .brand-mark { width:90px; height:76px; }
  .main-nav { background:#35412e; border-color:#bdab724d; box-shadow:0 15px 25px #20251b22; }
  .main-nav .nav-contact { border-color:#e0c38c80; }
  .hero { grid-template-columns:1.07fr 1fr; }
  .hero-copy { padding-top:24px; padding-right:22px; }
  .hero h1 { font-size:43px; }
.brand-object { width:204px; height:172px; }
.hero-wordmark>span { font-size:12px; line-height:1.6; }
.brand-controls button { font-size:14px; }
  .hero-visual { padding:35px 26px; }
  .portrait-frame img { aspect-ratio:.70; }
  .hero-note { margin-top:23px; }
  .hero-intro { font-size:16px; }
}
@media(max-width:600px) {
  :root { --gutter:23px; }
  .site-header { min-height:94px; gap:12px; }
  .brand-mark { width:80px; height:68px; }
  .brand { gap:11px; }
  .brand-name { font-size:17px; letter-spacing:1.8px; }
  .brand-name span { font-size:12px; letter-spacing:.75px; }
  .menu-toggle { color:var(--gold); font-size:14px; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:23px var(--gutter) 35px; }
.brand-stage { height:210px; }
.hero-wordmark { font-size:28px; letter-spacing:4px; margin-top:17px; }
.brand-controls { gap:10px 18px; margin-top:12px; }
.brand-controls input { width:73px; }
  .hero h1 { font-size:clamp(42px,10.5vw,59px); letter-spacing:-1px; }
  .hero-intro { font-size:17px; margin-top:18px; }
  .hero .button { margin-top:21px; }
  .hero-note { width:100%; margin-top:24px; }
  .hero-note span { font-size:12px; letter-spacing:.65px; }
  .hero-visual { padding:34px 39px; }
  .portrait-frame { max-width:410px; box-shadow:10px 12px 0 #757c5b24; }
  .portrait-frame img { aspect-ratio:1.08; }
  .portrait-caption { padding-top:27px; }
  .portrait-caption>span:first-child { font-size:31px; }
  .footer-wordmark>img { width:94px; height:79px; }
  .footer-wordmark>.footer-brand-copy { font-size:19px; letter-spacing:2px; }
  .footer-brand-copy>span { font-size:17px; }
  footer>div { border-color:#858e6766; }
  footer .back-top { margin-left:0; }
}
@media(max-width:360px) {
  :root { --gutter:20px; }
  .brand-mark { width:67px; height:57px; }
  .brand-name { font-size:15px; letter-spacing:1.3px; }
  .brand-name span { letter-spacing:0; }
  .brand { gap:7px; }
.brand-object { width:210px; height:177px; }
.brand-controls { gap:5px 10px; }
.hero h1 { font-size:43px; }
  .hero-visual { padding:30px; }
}
@media(prefers-reduced-motion:reduce) {
.project-photo { transform:none!important; will-change:auto; }
}
@media print {
  .site-header,.hero,.contact,footer { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
.brand-stage { height:180px; }
.project-photo { transform:none!important; }
}

/* A single header logo; centre the landing-page introduction beside Ceira. */
.hero-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-top:64px; padding-bottom:64px; }
@media(max-width:600px) { .hero-copy { padding-top:45px; padding-bottom:42px; } }