/* The Exceptionals — main website. Black & white, Helvetica, square edges. */
:root{ --black:#000; --dark:#191919; --white:#fff; --grey:#d9d9d9; --max:1100px; }
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:var(--white); background:var(--dark); line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

/* ---------- header ---------- */
.top{ background:var(--black); }
.top-inner{ max-width:1320px; margin:0 auto; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--white); font-size:clamp(18px,4.6vw,26px); text-transform:uppercase; letter-spacing:.01em; }
.btn-light{ display:inline-block; background:var(--white); color:var(--black); text-decoration:none; padding:11px 22px; font-size:15px; border:0; cursor:pointer; font-family:inherit; }
.btn-light:hover{ background:var(--grey); }
.btn-dark{ display:inline-block; background:var(--black); color:var(--white); text-decoration:none; padding:13px 30px; font-size:16px; border:0; cursor:pointer; font-family:inherit; }
.btn-dark:hover{ background:#333; }
.menu{ background:var(--dark); border-top:1px solid #000; border-bottom:3px solid #000; }
.menu-inner{ max-width:1320px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; font-size:15px; }
.menu-inner nav{ display:flex; flex-wrap:wrap; gap:0 26px; }
.menu-inner nav a{ text-decoration:none; color:var(--white); padding:15px 0; border-bottom:2px solid transparent; }
.menu-inner nav a:hover{ border-bottom-color:#777; }
.menu-inner nav a[aria-current="page"]{ border-bottom-color:var(--white); }
.menu-right{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.menu-right .tel{ text-decoration:none; font-size:14px; }
.icons{ display:flex; gap:12px; align-items:center; }
.icons a{ display:inline-flex; width:20px; height:20px; color:var(--white); opacity:.9; }
.icons a:hover{ opacity:1; }
.icons svg{ width:100%; height:100%; fill:currentColor; }

/* ---------- home ---------- */
.hero{ position:relative; background:#fff url(assets/hero.jpg) center/cover no-repeat; color:var(--black); min-height:max(560px, 56vw); display:flex; align-items:center; justify-content:center; text-align:center; padding:56px 20px; }
.hero-inner{ max-width:560px; }
.hero h1{ font-weight:400; font-size:clamp(34px,6.2vw,76px); line-height:1.08; margin:0 0 22px; letter-spacing:.005em; }
.hero .tag{ font-size:clamp(18px,2.4vw,28px); margin:0 0 30px; font-weight:300; }
.hero .vm{ font-size:clamp(14px,1.5vw,17px); margin:0 0 6px; font-weight:300; }
.hero .cta{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media (max-width:800px){ .hero{ background-size:auto 130%; min-height:640px; } .hero-inner{ background:rgba(255,255,255,.9); padding:26px 16px; } }

/* ---------- page bands ---------- */
.band{ background:var(--dark); text-align:center; padding:64px 20px 56px; }
.band h1{ font-weight:400; font-size:clamp(28px,4.4vw,44px); margin:0 0 20px; text-transform:uppercase; letter-spacing:.01em; }
.band p{ margin:0 0 26px; font-size:16px; }

/* services */
.photo{ position:relative; background:#444 center/cover no-repeat; text-align:center; padding:90px 20px; }
.photo::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.photo > div{ position:relative; max-width:760px; margin:0 auto; }
.photo h2{ font-weight:400; font-size:22px; text-decoration:underline; text-underline-offset:5px; margin:0 0 28px; }
.photo p{ margin:0 0 10px; font-size:16px; }
.photo .sub{ margin-top:22px; }
.three{ background:var(--black); padding:64px 20px; }
.three-inner{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; text-align:center; }
.three h3{ font-weight:400; font-size:20px; margin:0 0 10px; text-decoration:underline; text-underline-offset:5px; }
.three p{ margin:0; font-size:15px; color:#ddd; }
.endcta{ background:var(--dark); text-align:center; padding:60px 20px; }
@media (max-width:760px){ .three-inner{ grid-template-columns:1fr; } .photo{ padding:64px 20px; } }

/* projects */
.rows{ max-width:var(--max); margin:0 auto; padding:30px 20px 80px; }
.row{ display:grid; grid-template-columns:1fr 1fr; background:var(--black); margin:0 0 34px; }
.row img{ width:100%; height:100%; object-fit:cover; min-height:340px; }
.row .card{ padding:48px 44px; display:flex; flex-direction:column; justify-content:center; }
.row h2{ font-weight:400; font-size:24px; margin:0 0 22px; text-transform:uppercase; }
.row ul{ margin:0; padding:0; list-style:none; font-size:15px; }
.row li{ padding:2px 0; }
.row li::before{ content:"- "; color:#999; }
.row.flip img{ order:2; }
@media (max-width:760px){ .row{ grid-template-columns:1fr; } .row.flip img{ order:0; } .row .card{ padding:32px 24px; } .row img{ min-height:220px; max-height:360px; } }

/* about + contact */
.text{ max-width:820px; margin:0 auto; padding:56px 22px 90px; text-align:center; }
.text p{ margin:0 0 22px; font-size:17px; font-weight:300; }
.contact{ max-width:620px; margin:0 auto; padding:10px 22px 90px; text-align:center; }
.contact .info p{ margin:0 0 8px; font-size:17px; }
.contact .info a{ text-decoration:none; }
form{ margin-top:34px; text-align:left; }
label{ display:block; font-size:14px; margin:0 0 6px; }
input[type=text], input[type=email], input[type=tel], textarea{ width:100%; font:inherit; font-size:16px; padding:11px 12px; border:1px solid #777; background:var(--black); color:var(--white); border-radius:0; margin:0 0 18px; }
input:focus, textarea:focus{ outline:2px solid var(--white); outline-offset:1px; }
textarea{ min-height:140px; resize:vertical; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
#formMsg{ margin-top:16px; font-size:15px; min-height:22px; }
#formMsg.ok{ color:#9be19b; } #formMsg.err{ color:#ff9b9b; }

/* ---------- footer ---------- */
.foot{ background:var(--black); padding:46px 20px; text-align:center; font-size:14px; color:#bbb; }
.foot a{ color:#ddd; }
.foot .sep{ margin:0 8px; }

/* ---------- small phones ---------- */
@media (max-width:520px){
  .top-inner{ padding:14px 16px; }
  .brand{ font-size:17px; white-space:nowrap; gap:10px; }
  .brand svg{ width:32px; height:32px; }
  .btn-light{ padding:9px 14px; font-size:14px; white-space:nowrap; }
  .menu-inner{ padding:0 16px; gap:0 18px; }
  .menu-inner nav{ gap:0 18px; }
  .menu-inner nav a{ padding:11px 0; font-size:14px; }
  .menu-right{ margin-left:0; width:100%; padding:2px 0 12px; justify-content:space-between; }
  .photo h2{ font-size:20px; }
}