.project-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(35,29,31,.05) 0%, transparent 55%, rgba(35,29,31,.48) 100%);
  pointer-events: none;
}

.project .concept-label,
.project h3 {
  color: #f7f3ed;
  text-shadow: 0 1px 12px rgba(35,29,31,.45);
}

/* The homepage hero is a real editorial mock-up now, not a CSS card collage. */
.hero-stationery-photo { min-height: 620px; background: var(--mushroom); }
.hero-editorial-photo { width: 100%; height: 100%; min-height: 700px; object-fit: cover; object-position: center; }

/* Layered hero details: enough depth to feel like a complete suite, without
   competing with the Brevier wordmark on the other half of the masthead. */
.hero-envelope { position: absolute; width: 330px; height: 225px; left: 21%; bottom: 9%; background: rgba(247,243,237,.36); transform: rotate(-8deg); box-shadow: 0 26px 60px rgba(35,29,31,.12); }
.hero-envelope::before, .hero-envelope::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(84,31,44,.12); }
.hero-envelope::after { clip-path: polygon(0 0,50% 62%,100% 0); background: rgba(247,243,237,.18); }
.hero-details-card { position: absolute; width: 178px; height: 116px; right: 9%; top: 31%; padding: 1.25rem; color: var(--oxblood); background: rgba(247,243,237,.74); transform: rotate(-3deg); box-shadow: 0 18px 44px rgba(35,29,31,.14); z-index: 2; }
.hero-details-card span, .hero-details-card small { font: 700 .48rem var(--sans); letter-spacing: .16em; }
.hero-details-card i { display: block; width: 32px; border-top: 1px solid var(--oxblood); margin: .7rem 0; opacity: .6; }
.hero-rsvp-card { position: absolute; width: 128px; height: 88px; left: 26%; bottom: 6%; padding: 1rem; background: var(--oxblood); color: var(--chalk); transform: rotate(5deg); z-index: 5; box-shadow: 0 16px 42px rgba(35,29,31,.2); }
.hero-rsvp-card span { font: 400 1.05rem var(--serif); }
.hero-rsvp-card b { float: right; font-weight: 400; }
.hero-rsvp-card small { display: block; clear: both; padding-top: 1rem; font-size: .42rem; letter-spacing: .14em; }

/* Ghosted work samples make the service blocks feel designed, not empty. */
.service-card { position: relative; overflow: hidden; isolation: isolate; }
.service-card > * { position: relative; z-index: 2; }
.service-copy { margin-top: auto; }
.service-ghost { position: absolute; z-index: 1; width: 150px; height: 200px; right: -6px; top: 48px; border: 1px solid currentColor; padding: 1.25rem; opacity: .14; transform: rotate(7deg); font-family: var(--serif); pointer-events: none; }
.service-ghost small, .service-ghost span { display: block; font: 700 .43rem/1.6 var(--sans); letter-spacing: .14em; }
.service-ghost b { display: block; margin: 2.5rem 0 1.2rem; font: 400 2rem/.9 var(--serif); }
.ghost-screen { width: 175px; height: 150px; border-width: 5px 1px 1px; transform: rotate(-5deg); }
.ghost-screen i { display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-bottom: 1.6rem; }
.ghost-screen b { display: inline-block; border: 1px solid currentColor; margin: 1rem 0 .7rem; padding: .35rem .55rem; font: 700 .5rem var(--sans); letter-spacing: .12em; }
.ghost-menu { width: 126px; height: 210px; transform: rotate(5deg); text-align: center; }
.ghost-menu b { margin: 2rem 0 1.8rem; font-size: 1.7rem; }
.ghost-menu span { line-height: 2.4; }
.ghost-poster { width: 160px; height: 205px; transform: rotate(-6deg); }
.ghost-poster b { margin: 2rem 0 1.5rem; font-size: 1.65rem; }

/* Portfolio disclosure: hover on a mouse, tap/click on touch, focus for keyboard. */
.project-trigger { position: absolute; z-index: 7; right: 1.6rem; bottom: 1.6rem; border: 1px solid rgba(247,243,237,.7); color: var(--chalk); background: rgba(35,29,31,.25); backdrop-filter: blur(5px); padding: .65rem .8rem; font: 700 .52rem var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.project-details { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; color: var(--chalk); background: linear-gradient(180deg, rgba(35,29,31,.12) 0%, rgba(35,29,31,.94) 54%); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.project-details h4 { max-width: 330px; margin: .45rem 0 .8rem; font: 400 2rem/1.05 var(--serif); }
.project-details > p:not(.project-detail-kicker) { max-width: 390px; margin: 0 0 2.8rem; font-size: .72rem; line-height: 1.65; }
.project-detail-kicker { margin: 0; font-size: .5rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--powder); }
.project-close { display: none; font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.project.is-open .project-details { opacity: 1; transform: none; }
.project.is-open .project-trigger { background: var(--chalk); color: var(--ink); }
.project-trigger:focus-visible { outline: 3px solid var(--powder); outline-offset: 3px; }
.project h3 { transition: opacity .2s ease; }
.project.is-open h3 { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .project:hover .project-details { opacity: 1; transform: none; }
  .project:hover h3 { opacity: 0; }
}

@media (max-width: 900px) {
  .project-close { display: block; }
}

@media (max-width: 560px) {
  .hero-stationery-photo { min-height: 430px; }
  .hero-editorial-photo { min-height: 430px; height: 430px; object-position: center; }
  .hero-envelope { width: 230px; height: 155px; left: 17%; }
  .hero-details-card { width: 115px; height: 78px; padding: .7rem; right: 2%; top: 34%; }
  .hero-details-card i { margin: .35rem 0; }
  .hero-details-card small { font-size: .32rem; }
  .hero-rsvp-card { width: 92px; height: 65px; padding: .7rem; left: 27%; }
  .hero-rsvp-card small { padding-top: .55rem; font-size: .3rem; }
  .service-ghost { right: 4%; top: 28px; opacity: .12; }
  .project-trigger { right: 1.2rem; bottom: 1.2rem; }
  .project-details { padding: 1.7rem; }
  .project-details h4 { font-size: 1.8rem; }
}

/* Project enquiry form */
.contact-form-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; text-align: left; padding: 8vw 5vw; align-items: start; }
.contact-intro { position: sticky; top: 120px; }
.contact-intro > img { width: 62px; margin: 0 0 2rem; }
.contact-intro h2 { margin: 2rem 0 2.2rem; }
.contact-intro > p:not(.eyebrow) { max-width: 500px; margin: 0; font: 400 1.15rem/1.55 var(--serif); }
.contact-direct { margin-top: 3.2rem; }
.contact-direct > span { display: block; margin-bottom: .8rem; font-size: .55rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.contact-direct .contact-email { margin: 0; font-size: 1.35rem; gap: 1.2rem; }
.contact-email b { font: inherit; }
.enquiry-panel { border-top: 1px solid var(--ink); padding-top: 1.8rem; }
.enquiry-form { display: grid; gap: 1.9rem; }
.form-row { display: grid; gap: 1.3rem; }
.form-row.two-col { grid-template-columns: 1fr 1fr; }
.enquiry-form label, .form-needs legend { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.enquiry-form label > span { color: var(--tomato); }
.enquiry-form label small { opacity: .55; font: inherit; }
.enquiry-form input:not([type="checkbox"]), .enquiry-form select, .enquiry-form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(35,29,31,.38); background: transparent; color: var(--ink); border-radius: 0; outline: 0; padding: .85rem 0; font: 400 1rem/1.4 var(--serif); text-transform: none; letter-spacing: 0; }
.enquiry-form textarea { border: 1px solid rgba(35,29,31,.38); min-height: 145px; margin-top: .8rem; padding: 1rem; resize: vertical; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color: var(--oxblood); box-shadow: 0 2px 0 var(--oxblood); }
.enquiry-form textarea:focus { box-shadow: inset 0 0 0 1px var(--oxblood); }
.form-needs { border: 0; margin: 0; padding: 0; }
.form-needs legend { margin-bottom: 1rem; }
.form-needs { display: flex; flex-wrap: wrap; gap: .65rem; }
.form-needs legend { width: 100%; }
.form-needs label { cursor: pointer; position: relative; }
.form-needs input { position: absolute; opacity: 0; pointer-events: none; }
.form-needs label span { display: block; border: 1px solid rgba(35,29,31,.35); color: var(--ink); padding: .72rem .85rem; transition: .18s ease; }
.form-needs input:checked + span { background: var(--oxblood); border-color: var(--oxblood); color: var(--chalk); }
.form-needs input:focus-visible + span { outline: 2px solid var(--powder); outline-offset: 2px; }
.enquiry-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: var(--tomato); color: var(--chalk); cursor: pointer; padding: 1.15rem 1.25rem; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.enquiry-submit:hover { background: var(--oxblood); }
.form-privacy { margin: -.9rem 0 0; opacity: .58; font-size: .58rem; line-height: 1.5; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-message { margin: 0 0 1.5rem; padding: 1.1rem 1.2rem; display: grid; gap: .3rem; font: 400 .9rem/1.4 var(--serif); }
.form-message[hidden] { display: none; }
.form-message strong { font-size: 1.1rem; }
.form-success { background: var(--powder); }
.form-error { background: #e14b3b1f; border: 1px solid var(--tomato); }

@media (max-width: 900px) {
  .contact-form-section { grid-template-columns: 1fr; gap: 4rem; }
  .contact-intro { position: static; }
}

@media (max-width: 560px) {
  .contact-form-section { padding: 16vw 5vw; }
  .form-row.two-col { grid-template-columns: 1fr; }
  .form-needs { display: grid; grid-template-columns: 1fr 1fr; }
  .form-needs legend { grid-column: 1 / -1; }
  .form-needs label:last-child { grid-column: 1 / -1; }
}

.client-site-shell { background: #fbf8f0; }
.client-phone-top { border-color: rgba(46,74,60,.22); color: #2e4a3c; }
.client-phone-top strong { font: 400 1.8rem var(--serif); letter-spacing: .16em; }
.client-site-home { color: #2e4a3c; background: #fbf8f0; }
.client-site-nav { display: flex; align-items: center; justify-content: center; gap: 1.1rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(46,74,60,.18); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; }
.client-site-nav button { border: 0; background: #2e4a3c; color: #fffaf0; padding: .55rem .7rem; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.client-site-hero { height: 230px; overflow: hidden; }
.client-site-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.client-site-intro { text-align: center; padding: 2.2rem 1.5rem 2rem; }
.client-site-intro > p { margin: 0 0 .8rem; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; }
.client-site-intro h3 { margin: 0; font: 400 2.65rem/.95 var(--serif); color: #203a2e; }
.client-site-intro h3 i { color: #b49357; font-weight: 400; }
.client-site-intro > span { display: block; margin-top: .9rem; font: 400 .85rem var(--serif); }
.client-site-intro button { margin-top: 1.5rem; border: 1px solid #2e4a3c; background: transparent; color: #2e4a3c; padding: .8rem 1.1rem; font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.client-site-links { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(46,74,60,.18); }
.client-site-links span { padding: 1.1rem; border-right: 1px solid rgba(46,74,60,.18); border-bottom: 1px solid rgba(46,74,60,.18); text-align: center; font: 400 .8rem var(--serif); }
.demo-back { border: 0; background: transparent; color: #2e4a3c; margin: 0 0 1.5rem; padding: 0; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.client-site-shell .rsvp-button, .client-site-shell .rsvp-success button { background: #2e4a3c; color: #fffaf0; }
.client-site-shell .rsvp-success > span { background: #b49357; }

/* Spacing and responsive type pass. Keep long editorial headings inside their columns. */
.section-heading h1 { max-width: 100%; }
.section-heading h1 em { display: inline-block; }

@media (max-width: 1100px) {
  .section-heading { grid-template-columns: 1fr; align-items: start; gap: 1.8rem; }
  .section-heading h1 { font-size: clamp(3.1rem, 7vw, 4.8rem); max-width: 820px; }
  .section-lede { max-width: 620px; }
}

@media (max-width: 700px) {
  .section-heading h1 { font-size: clamp(3rem, 12vw, 4.2rem); line-height: .92; }
  .section-heading h1 em { display: block; }
}