@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Karla:wght@300;400&display=swap');

* { margin:0; padding:0; box-sizing:border-box; padding-inline-start:0; }

:root {
  --color-bg:            #d9d9d9;
  --color-header:        #dddddd;
  --color-border:        #666666;
  --color-text:          #666666;
  --color-dark:          #3a3a3a;
  --color-takeover:      #2a2a2a;
  --color-takeover-text: #c8c8c8;
  --color-takeover-line: #505050;
  --header-height:       130px;
  --header-small:        55px;
  --trans-med:           0.5s ease;
  --trans-slow:          0.7s ease;
}

html, body { background:var(--color-bg); color:var(--color-text); font-family:'Karla',sans-serif; font-weight:300; overflow-x:hidden; }
body.noscroll { overflow:hidden; }
a { text-decoration:none; color:inherit; transition:color 0.4s; }
h1,h2,h3,h4,h5,h6 { font-weight:normal; }

/* =====================
   HEADER
===================== */
header {
  background:var(--color-header);
  z-index:90; position:fixed;
  top:0; left:0; width:100%;
  height:var(--header-height);
  transition:height var(--trans-slow);
  border-bottom:1px solid var(--color-border);
}
header .container {
  max-width:1140px; margin:auto;
  padding:0 60px;
  display:flex; align-items:center;
  justify-content:space-between;
  height:100%;
}
.logo-wrap a {
  display:flex; flex-direction:column;
  align-items:flex-start; gap:7px; color:inherit;
}
.site-logo { width:210px; height:auto; display:block; transition:width var(--trans-slow); }
.tagline {
  font-family:'Karla',sans-serif; font-size:8pt;
  letter-spacing:0.18em; color:var(--color-text);
  display:block; white-space:nowrap;
  transition:opacity var(--trans-slow), max-height var(--trans-slow);
  overflow:hidden; max-height:20px;
}

/* Nav — option A on all three links */
header nav { display:flex; align-items:center; gap:32px; font-size:11pt; letter-spacing:0.14em; }
.nav-a {
  position:relative; padding-bottom:2px;
  color:var(--color-text); transition:color 0.3s ease;
}
.nav-a::after {
  content:''; position:absolute;
  bottom:0; left:0; width:0; height:1px;
  background:var(--color-dark); transition:width 0.3s ease;
}
.nav-a:hover { color:var(--color-dark); }
.nav-a:hover::after { width:100%; }

/* Collapsed header */
header.smaller { height:var(--header-small); }
header.smaller .site-logo { width:110px; }
header.smaller .tagline { opacity:0; max-height:0; }
header.smaller .logo-wrap a { gap:0; }

/* =====================
   BLADES
===================== */
.blades-section { width:100%; padding-top:var(--header-height); }
.blades {
  display:flex; width:100%;
  height:calc(72vh - var(--header-height));
  overflow:hidden;
}
.blade {
  position:relative; height:100%;
  flex-grow:1; flex-shrink:1; flex-basis:0;
  overflow:hidden;
  transition:flex-grow var(--trans-slow);
  cursor:pointer;
  border-right:1px solid var(--color-border);
}
.blade:last-child { border-right:none; }
.blade.featured { flex-grow:5; }

.blade-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform 0.8s ease;
}
.blade:hover .blade-bg { transform:scale(1.03); }

.blade-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.55) 18%, rgba(0,0,0,0.0) 30%);
}
.blade.featured .blade-overlay {
  background:linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 18%, rgba(0,0,0,0.0) 30%);
}

/* Dim layer — 50% on non-featured */
.blade-dim {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.50);
  transition:opacity var(--trans-slow);
  pointer-events:none;
}
.blade.featured .blade-dim { opacity:0; }

.blade-content {
  position:absolute; bottom:0; left:0; right:0;
  padding:28px 32px; opacity:0; transform:translateY(6px);
  transition:opacity var(--trans-med), transform var(--trans-med);
  pointer-events:none; white-space:nowrap; overflow:hidden;
}
.blade.featured .blade-content { opacity:1; transform:translateY(0); }
.blade-content h3 {
  font-family:'Cormorant Garamond',serif; font-size:24pt;
  font-weight:400; color:#fff; letter-spacing:0.05em;
  margin-bottom:5px; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.blade-content h4 {
  font-family:'Karla',sans-serif; font-size:10pt;
  font-weight:300; color:rgba(255,255,255,0.75);
  letter-spacing:0.15em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.blade.featured::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0;
  height:3px; background:var(--color-dark);
}

/* =====================
   PAGE CONTENT
===================== */
.page-content { max-width:1140px; margin:0 auto; padding:80px 60px; }
.section { margin-bottom:80px; }
.section h2 {
  font-family:'Cormorant Garamond',serif; font-size:34pt;
  font-weight:300; color:var(--color-dark);
  letter-spacing:0.05em; margin-bottom:20px; line-height:1.2;
}
.section-divider { width:60px; height:1px; background:var(--color-dark); margin-bottom:32px; }
.section-body { display:flex; gap:60px; }
.section-body p {
  font-size:15px; line-height:1.9;
  color:var(--color-text); text-align:justify;
  flex:1; margin-bottom:20px;
}

/* Services — 2 column, generous spacing */
.services-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
}
.service-item {
  display:flex;
  align-items:center;
  gap:18px;
  padding:28px 32px 28px 0;
  border-bottom:1px solid var(--color-border);
}
.service-item:nth-child(odd) {
  border-right:1px solid var(--color-border);
  padding-right:40px;
}
.service-item:nth-child(even) {
  padding-left:40px;
  padding-right:0;
}
.service-item:nth-last-child(-n+2) {
  border-bottom:none;
}
.service-icon {
  width:38px; height:38px;
  flex-shrink:0;
  stroke:var(--color-border);
}
.service-item h3 {
  font-family:'Cormorant Garamond',serif; font-size:15pt;
  font-weight:400; color:var(--color-dark); letter-spacing:0.05em;
}

/* Contact section — text left, link right */
.contact-trigger-wrap {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-trigger {
  font-family:'Cormorant Garamond',serif; font-size:15pt;
  font-weight:400; color:var(--color-dark); letter-spacing:0.08em;
  position:relative; padding-bottom:3px; display:inline-block;
}
.contact-trigger::after {
  content:''; position:absolute; bottom:0; left:0;
  width:100%; height:1px; background:var(--color-dark);
  transition:opacity 0.3s ease;
}
.contact-trigger:hover::after { opacity:0; }
.contact-trigger:hover { color:var(--color-border); }

/* =====================
   FOOTER
===================== */
footer { border-top:1px solid var(--color-border); padding:28px 60px; max-width:1140px; margin:0 auto 36px; text-align:center; }
footer h6 { font-family:'Karla',sans-serif; font-size:9pt; font-weight:300; letter-spacing:0.15em; color:var(--color-text); }

/* =====================
   CONTACT TAKEOVER
===================== */
.contact-takeover {
  position:fixed; inset:0; z-index:200;
  background:var(--color-takeover);
  opacity:0; pointer-events:none;
  transition:opacity 0.6s ease; overflow-y:auto;
}
.contact-takeover.active { opacity:1; pointer-events:all; }
.takeover-inner {
  min-height:100vh; max-width:900px;
  margin:0 auto; padding:50px 60px 80px;
  display:flex; flex-direction:column;
}
.takeover-header {
  display:flex; align-items:center;
  justify-content:space-between; margin-bottom:80px;
}
.takeover-logo { width:160px; height:auto; filter:invert(1) brightness(0.75); }
.takeover-close {
  background:none; border:none; color:var(--color-takeover-text);
  font-size:28px; font-weight:300; cursor:pointer;
  line-height:1; padding:4px 8px;
  transition:color 0.3s ease; font-family:'Karla',sans-serif;
}
.takeover-close:hover { color:#ffffff; }
.takeover-form-wrap { flex:1; }
.takeover-label {
  font-family:'Karla',sans-serif; font-size:9pt;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--color-takeover-text); display:block; margin-bottom:20px;
}
.takeover-heading h2 {
  font-family:'Cormorant Garamond',serif; font-size:38pt;
  font-weight:300; color:#ffffff; letter-spacing:0.04em;
  line-height:1.15; margin-bottom:60px;
}
.form-field { margin-bottom:44px; }
.form-field label {
  display:block; font-family:'Karla',sans-serif; font-size:9pt;
  letter-spacing:0.25em; text-transform:uppercase;
  color:var(--color-takeover-text); margin-bottom:12px;
}
.form-field input,
.form-field textarea {
  width:100%; background:transparent; border:none;
  border-bottom:1px solid var(--color-takeover-line);
  color:#ffffff; font-family:'Cormorant Garamond',serif;
  font-size:17pt; font-weight:300; padding:8px 0 12px;
  outline:none; transition:border-color 0.3s ease;
  resize:none; letter-spacing:0.03em;
}
.form-field input:focus,
.form-field textarea:focus { border-bottom-color:#aaaaaa; }
.form-field textarea { line-height:1.6; }
.form-submit-row { margin-top:20px; }
.form-submit {
  background:none; border:none;
  font-family:'Cormorant Garamond',serif; font-size:15pt;
  font-weight:400; color:#ffffff; letter-spacing:0.1em;
  cursor:pointer; position:relative; padding-bottom:3px;
  display:inline-block; transition:color 0.3s ease;
}
.form-submit::after {
  content:''; position:absolute; bottom:0; left:0;
  width:100%; height:1px; background:#ffffff; transition:opacity 0.3s ease;
}
.form-submit:hover { color:#aaaaaa; }
.form-submit:hover::after { opacity:0; }
.takeover-thankyou { display:none; flex:1; flex-direction:column; justify-content:center; padding-top:60px; }
.takeover-thankyou h2 {
  font-family:'Cormorant Garamond',serif; font-size:38pt;
  font-weight:300; color:#ffffff; letter-spacing:0.04em;
  line-height:1.15; margin-bottom:28px;
}
.takeover-thankyou p { font-size:15px; color:var(--color-takeover-text); line-height:1.8; margin-bottom:52px; }
.thankyou-close {
  font-family:'Cormorant Garamond',serif; font-size:14pt;
  color:#ffffff; letter-spacing:0.08em;
  position:relative; padding-bottom:3px; display:inline-block;
}
.thankyou-close::after {
  content:''; position:absolute; bottom:0; left:0;
  width:100%; height:1px; background:#ffffff; transition:opacity 0.3s ease;
}
.thankyou-close:hover::after { opacity:0; }
.thankyou-close:hover { color:#aaaaaa; }

/* =====================
   RESPONSIVE
===================== */
@media(max-width:900px) {
  .page-content { padding:60px 30px; }
  .services-grid { grid-template-columns:1fr; }
  .service-item { border-right:none !important; padding-left:0 !important; padding-right:0 !important; border-bottom:1px solid var(--color-border) !important; }
  .service-item:last-child { border-bottom:none !important; }
  .section-body { flex-direction:column; gap:0; }
  .site-logo { width:170px; }
  .takeover-inner { padding:40px 30px 60px; }
  .takeover-heading h2, .takeover-thankyou h2 { font-size:28pt; }
  .contact-trigger-wrap { justify-content:flex-start; margin-top:24px; }
}
@media(max-width:625px) {
  header .container { padding:0 20px; }
  header nav { gap:20px; font-size:9.5pt; }
  .services-grid { grid-template-columns:1fr; }
  .page-content { padding:40px 20px; }
  footer { padding:20px; }
  .site-logo { width:130px; }
  .takeover-inner { padding:30px 24px 50px; }
  .takeover-header { margin-bottom:50px; }
  .takeover-heading h2, .takeover-thankyou h2 { font-size:24pt; }
  .form-field { margin-bottom:32px; }
}