/*
Theme Name: Ben Wat & Partners
Theme URI: https://benwatandpartners.com/
Author: Ben Wat & Partners
Description: Bespoke editorial architecture theme for Ben Wat & Partners.
Version: 1.0.1
Text Domain: ben-wat-partners
*/

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:wght@400;500&display=swap");

:root {
  --ink: #171513;
  --paper: #faf9f7;
  --gold: #bc934c;
  --hairline: #cfbfaa;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Cormorant Garamond", Garamond, Georgia, serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { border-radius: 0; }

/* Homepage */
.home-page, .home-hero { width: 100%; height: 100svh; min-height: 640px; }
.home-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #322a25; }
.home-background, .home-video, .home-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-background { z-index: -3; background: url("assets/media/home-clean-v2.jpg") center center / cover no-repeat; }
.home-video { z-index: -4; object-fit: cover; opacity: 0; transition: opacity 800ms ease; }
.has-hero-video .home-video { z-index: -2; opacity: 1; }
.home-shade { z-index: -1; background: linear-gradient(180deg, rgba(11, 10, 9, .28) 0%, rgba(11, 9, 7, .06) 43%, rgba(8, 6, 5, .44) 100%); }
.home-header { position: absolute; top: 6.1%; left: 3.8%; right: 4.6%; display: flex; justify-content: space-between; align-items: flex-start; }
.home-brand { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; }
.home-brand-name { font-size: clamp(31px, 3.15vw, 50px); line-height: .9; font-weight: 400; letter-spacing: .095em; white-space: nowrap; }
.home-brand-tagline { margin-top: 27px; font: 400 clamp(10px, 1.05vw, 16px)/1 "Montserrat", sans-serif; letter-spacing: .32em; white-space: nowrap; }
.home-brand em { margin-top: 20px; font-size: clamp(14px, 1.2vw, 19px); line-height: 1; letter-spacing: .045em; }
.home-navigation { display: flex; gap: clamp(45px, 5.1vw, 80px); padding-top: 5px; font: 400 clamp(10px, .9vw, 14px)/1 "Montserrat", sans-serif; letter-spacing: .22em; }
.home-navigation a { text-decoration: none; transition: opacity 180ms ease; }
.home-navigation a:hover { opacity: .64; }
.menu-button { display: none; }
.home-statement { position: absolute; left: 3.75%; bottom: 6.7%; }
.home-statement p { margin: 0; font-size: clamp(27px, 2.45vw, 39px); font-style: italic; line-height: 1.28; letter-spacing: .012em; }
.home-statement span { display: block; width: 72px; height: 1px; margin-top: 14px; background: rgba(255,255,255,.88); }

/* Content pages */
.inner-page { position: relative; min-height: 100vh; background: var(--paper); }
.inner-home-link { position: absolute; z-index: 3; top: 24px; left: 36px; display: none; color: white; text-decoration: none; font: 500 11px/1 "Montserrat", sans-serif; letter-spacing: .18em; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.inner-hero-image { display: block; width: 100%; height: auto; max-height: none; object-fit: cover; }
.inner-content { width: 100%; padding: 48px 0 52px 8.3%; }
.inner-content h1 { margin: 0 0 16px; font-size: clamp(50px, 4.88vw, 75px); line-height: .95; font-weight: 500; letter-spacing: -.015em; }
.inner-content h2 { margin: 0 0 24px; font-size: clamp(26px, 2.54vw, 39px); line-height: 1.06; font-weight: 500; }
.inner-content p { max-width: min(530px, 51.75vw); margin: 0 0 16px; font-size: clamp(16px, 1.5625vw, 24px); line-height: 1.43; font-weight: 500; }
.inner-content p strong { font-weight: 600; }
.gold-rule { width: clamp(37px, 3.61vw, 55px); height: 1px; margin: clamp(28px, 2.73vw, 42px) 0 clamp(44px, 4.3vw, 66px); background: var(--gold); }
.gold-heading { color: var(--gold); }
.inner-content blockquote { margin: clamp(51px, 4.98vw, 76px) 0 0 -5px; font-size: clamp(31px, 3.03vw, 46px); line-height: 1.05; font-weight: 500; }
.inner-content blockquote cite { display: block; margin: 10px 0 0 7px; font-size: clamp(15px, 1.46vw, 22px); line-height: 1; font-style: normal; }
.founder-portrait { width: min(340px, 33.2vw); margin: 0; }
.founder-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 340 / 198; object-fit: cover; }
.founder-portrait figcaption { padding-top: 7px; font-size: clamp(14px, 1.36vw, 20px); line-height: 1; font-weight: 500; white-space: nowrap; }
.collection-note { max-width: min(800px, 78vw) !important; margin: clamp(31px, 3vw, 46px) 0 0 38px !important; text-align: center; font-size: clamp(13px, 1.27vw, 19px) !important; line-height: 1.15 !important; }
.contact-email { display: inline-block; margin: 0; text-decoration: none; font-size: clamp(24px, 2.34vw, 36px); line-height: 1; font-weight: 500; }
.contact-page .inner-content { padding-top: 63px; padding-bottom: 80px; padding-left: 9.4%; }
.contact-page .inner-content h1 { margin-bottom: 18px; font-size: clamp(64px, 6.25vw, 96px); }
.contact-page .gold-rule { margin-top: 32px; margin-bottom: 38px; }
.contact-page .inner-content h2 { margin-bottom: 21px; font-size: clamp(26px, 2.54vw, 39px); }
.contact-page .inner-content p { max-width: min(440px, 43vw); }
.enquiry-form { display: grid; grid-template-columns: clamp(130px, 12.7vw, 195px) minmax(240px, clamp(405px, 39.55vw, 607px)); column-gap: 0; row-gap: clamp(13px, 1.27vw, 20px); width: min(535px, 52.25vw); margin-top: clamp(31px, 3.03vw, 46px); align-items: center; }
.enquiry-form label { font: 500 clamp(12px, 1.17vw, 18px)/1 "Montserrat", sans-serif; letter-spacing: .11em; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width: 100%; min-height: clamp(39px, 3.8vw, 58px); border: 1px solid var(--hairline); background: rgba(255,255,255,.18); padding: 7px 10px; color: var(--ink); font: 500 clamp(16px, 1.56vw, 24px) "Cormorant Garamond", serif; outline: none; }
.enquiry-form textarea { min-height: clamp(134px, 13.08vw, 201px); resize: vertical; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color: var(--gold); }
.enquiry-form label[for="message"] { align-self: start; padding-top: 10px; }
.enquiry-form button { width: clamp(237px, 23.14vw, 356px); min-height: clamp(43px, 4.2vw, 64px); border: 0; background: #0d0d0d; color: #fff; cursor: pointer; font: 500 clamp(13px, 1.27vw, 19px)/1 "Montserrat", sans-serif; letter-spacing: .25em; }
.contact-signature { font-size: clamp(15px, 1.46vw, 22px) !important; letter-spacing: .16em; }

/* Source-specific desktop proportions */
.consultancy-page .inner-hero-image { aspect-ratio: 1024 / 514; }
.consultancy-page .inner-content { padding-top: 52px; padding-left: 8.25%; padding-bottom: 47px; }
.consultancy-page .inner-content h1 { margin-bottom: 17px; }
.consultancy-page .inner-content h2 { margin-bottom: 25px; }
.consultancy-page .gold-rule { margin-top: 28px; margin-bottom: 46px; }
.design-page { --design-gutter: clamp(25px, 9.72vw, 150px); background: #fdfdfc; }
.design-page .inner-hero-image { aspect-ratio: 875 / 414; object-position: center top; }
.design-page .inner-content { padding: clamp(25px, 2.86vw, 44px) var(--design-gutter) clamp(30px, 4.2vw, 64px); }
.design-page .inner-content h1 { margin-bottom: 18px; font-size: clamp(45px, 5.15vw, 64px); }
.design-page .inner-content h2 { margin-bottom: 22px; font-size: clamp(19px, 2.17vw, 28px); }
.design-page .inner-content p { max-width: 390px; margin-bottom: 18px; font-size: clamp(13px, 1.49vw, 18px); line-height: 1.5; }
.design-page .gold-rule { margin-top: 24px; margin-bottom: 23px; width: 32px; }
.design-page .inner-content blockquote { margin-top: 25px; font-size: clamp(26px, 2.97vw, 34px); }
.design-page .inner-content blockquote cite { font-size: clamp(13px, 1.49vw, 18px); }
.design-page blockquote + .gold-rule { margin-top: 15px; margin-bottom: 18px; }
.design-page .founder-portrait + .gold-rule { margin-top: 15px; margin-bottom: 18px; }
.design-page .founder-portrait { width: min(340px, 100%); }
.design-page .founder-portrait img { width: 100%; height: auto; aspect-ratio: 340 / 198; object-fit: cover; object-position: center center; }
.design-page .founder-portrait figcaption { font-size: 13px; letter-spacing: .005em; }
.design-page .design-practice h2 { margin-bottom: 14px; }
.design-page .design-practice p { margin-bottom: 11px; font-size: clamp(12.75px, 1.46vw, 17px); line-height: 1.32; }
.design-page .practice-copy span { display: block; width: max-content; max-width: 100%; white-space: nowrap; }
.design-page .practice-closing { margin-top: 3px; }
.design-page .collection-note { max-width: 506px !important; margin: 10px 0 0 !important; font-size: 11.5px !important; line-height: 1.2 !important; }
.contact-page .inner-hero-image { aspect-ratio: 1024 / 506; }

@media (max-width: 900px) {
  .home-header { top: 34px; left: 30px; right: 30px; }
  .home-brand-name { font-size: clamp(27px, 5.3vw, 39px); }
  .home-brand-tagline { margin-top: 20px; font-size: 10px; }
  .home-brand em { margin-top: 16px; font-size: 14px; }
  .menu-button { display: block; border: 0; background: transparent; color: #fff; padding: 5px 0; font: 500 10px/1 "Montserrat", sans-serif; letter-spacing: .2em; }
  .home-navigation { display: none; }
  .home-navigation.is-open { position: absolute; top: 42px; right: 0; display: flex; flex-direction: column; gap: 23px; min-width: 190px; padding: 27px; background: rgba(19,16,14,.92); backdrop-filter: blur(12px); }
  .home-statement { left: 30px; bottom: 48px; }
  .home-statement p { font-size: clamp(27px, 5.2vw, 36px); }
  .inner-content { padding-left: 8.3%; padding-right: 8.3%; }
}

@media (max-width: 640px) {
  .home-page, .home-hero { min-height: 690px; }
  .home-background { background-position: 55% center; }
  .home-header { top: 26px; left: 22px; right: 22px; }
  .home-brand-name { max-width: 245px; white-space: normal; font-size: 28px; line-height: .94; }
  .home-brand-tagline { max-width: 245px; white-space: normal; font-size: 8px; line-height: 1.4; letter-spacing: .27em; }
  .home-brand em { max-width: 245px; font-size: 13px; line-height: 1.1; }
  .home-statement { left: 22px; right: 22px; bottom: 47px; }
  .home-statement p { font-size: 28px; }
  .inner-home-link { display: block; }
  .inner-hero-image { height: 50vw; min-height: 245px; object-fit: cover; }
  .consultancy-page .inner-hero-image, .design-page .inner-hero-image, .contact-page .inner-hero-image { aspect-ratio: auto; }
  .inner-content, .consultancy-page .inner-content, .design-page .inner-content, .contact-page .inner-content { padding: 49px 25px 72px; }
  .inner-content h1, .design-page .inner-content h1, .contact-page .inner-content h1 { margin-bottom: 20px; font-size: clamp(42px, 13vw, 56px); }
  .inner-content h2, .design-page .inner-content h2, .contact-page .inner-content h2 { font-size: 25px; }
  .inner-content p, .design-page .inner-content p, .contact-page .inner-content p { max-width: none; font-size: 16px; line-height: 1.48; }
  .desktop-break { display: none; }
  .gold-rule, .design-page .gold-rule, .contact-page .gold-rule { margin: 29px 0 39px; }
  .inner-content blockquote, .design-page .inner-content blockquote { margin-left: 0; font-size: 29px; }
  .founder-portrait, .design-page .founder-portrait, .founder-portrait img, .design-page .founder-portrait img { width: 100%; height: auto; }
  .founder-portrait figcaption { font-size: 11px; white-space: normal; }
  .collection-note { margin: 23px 0 0 !important; text-align: left; font-size: 14px !important; line-height: 1.4 !important; }
  .design-page .design-practice h2 { margin-bottom: 20px; }
  .design-page .design-practice p { margin-bottom: 16px; font-size: clamp(10.5px, 3.2vw, 14px); line-height: 1.42; }
  .design-page .practice-closing { margin-top: 4px; font-size: 14px; }
  .design-page .collection-note { max-width: none !important; margin: 23px 0 0 !important; text-align: left; font-size: 14px !important; line-height: 1.4 !important; }
  .contact-email { font-size: 22px; }
  .enquiry-form { grid-template-columns: 1fr; gap: 8px; width: 100%; }
  .enquiry-form label { margin-top: 10px; }
  .enquiry-form label[for="message"] { padding-top: 0; }
  .enquiry-form input, .enquiry-form select { min-height: 46px; }
  .enquiry-form button { width: 100%; min-height: 49px; margin-top: 12px; }
  .enquiry-form > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-video { display: none; }
}