:root{
  --black:#101214;
  --bone:#e7dfd4;
  --gold:#b08a5e;
  --sea:#6f9498;
  --line:rgba(224,207,185,.23);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--bone);font-family:Arial,Helvetica,sans-serif;line-height:1.45}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}

.site-header{
  position:absolute;z-index:10;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px clamp(22px,3.4vw,52px)
}
.wordmark{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(21px,1.7vw,29px);letter-spacing:.09em;color:#cfb28f
}
nav{display:flex;gap:clamp(16px,2.2vw,30px);font-size:10px;letter-spacing:.17em;text-transform:lowercase;color:#c8b79f}
nav a:hover{color:#ecc690}

/* clean V3.3 hero */
.hero{
  position:relative;min-height:520px;height:min(66vh,620px);
  overflow:hidden;border-bottom:1px solid var(--line)
}
.hero-bg{
  position:absolute;inset:0;
  background:url("assets/hero-v35.jpg") center 48%/cover no-repeat;
}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(3,4,5,.52) 0%,
      rgba(3,4,5,.34) 24%,
      rgba(3,4,5,.12) 48%,
      rgba(3,4,5,.08) 72%,
      rgba(3,4,5,.14) 100%),
    linear-gradient(0deg,rgba(3,4,5,.38),transparent 52%)
}
.hero-copy{
  position:absolute;z-index:3;left:clamp(32px,5vw,76px);
  top:50%;transform:translateY(-38%);max-width:700px
}
.hero h1{
  margin:0;color:#e8dfd4;
  font-family:Baskerville,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(48px,4.6vw,70px);font-weight:400;line-height:.96;
  letter-spacing:-.035em;text-transform:none
}
.hero h1 em{font-weight:400;color:#e4d8ca}
.hero-services{font-size:14px;color:#d4cbc0;margin:22px 0 0}
.hero-sub{font-family:Georgia,"Times New Roman",serif;font-size:16px;color:#cbc3b9;margin:5px 0 0}
.hero-sub em{color:#c49968}
.explore{
  display:inline-flex;align-items:center;gap:18px;margin-top:25px;padding-bottom:7px;
  border-bottom:1px solid #8f704b;color:#c49b68;font-size:9px;
  letter-spacing:.20em;text-transform:uppercase
}

/* selected work */
.selected{padding:28px clamp(22px,2.8vw,40px) 38px;background:#121416;max-width:1600px;margin:0 auto}
.section-title{
  display:flex;align-items:center;gap:17px;color:#bba78d;
  font-family:Georgia,"Times New Roman",serif;font-size:12px;letter-spacing:.12em;
  text-transform:lowercase;margin-bottom:14px
}
.section-title i{display:block;height:1px;flex:1;background:var(--line)}
.work-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}
.card-image{height:clamp(175px,15.5vw,225px);overflow:hidden;border:1px solid rgba(255,255,255,.06);background:#151719}
.card-image img{height:100%;width:100%;object-fit:cover}
.card-image.contain img{object-fit:contain;background:#111315;padding:3px}

/* originals stay originals */
.card-image.art{
  display:flex;align-items:center;justify-content:center;background:#131516
}
.card-image.art img{
  object-fit:contain;object-position:center;
  filter:none!important;transform:none!important;padding:0
}
.kicker{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#a9845e;margin:7px 0 2px}
.card h2{font-family:Georgia,"Times New Roman",serif;font-size:12px;font-weight:400;color:#d9cfc4;margin:0}

/* process: no Third Space content, no repeated boardwalk */
.process{
  display:grid;grid-template-columns:165px 1fr 165px;gap:22px;
  align-items:center;min-height:285px;padding:28px clamp(22px,2.8vw,42px);
  background:radial-gradient(circle at 18% 55%,rgba(42,62,64,.17),transparent 34%),linear-gradient(90deg,#17191a,#111315 48%,#191b1c);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden
}
.process-art{
  margin:0;height:190px;overflow:hidden;opacity:.74;
  border:1px solid rgba(255,255,255,.055);
  transform:rotate(-1.5deg);
  box-shadow:0 16px 34px rgba(0,0,0,.26)
}
.philosophy-copy{
  position:relative;
  z-index:2;
  max-width:1060px;
  padding:58px clamp(34px,6vw,96px) 64px
}
.tiny-label{color:#998169;font-size:8px;letter-spacing:.20em;text-transform:uppercase;margin:0 0 12px}
.philosophy h2{
  font-family:Baskerville,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(34px,3.3vw,50px);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0;
  color:#ddd2c4;
  max-width:900px
}
.philosophy h2 em{font-weight:400;color:#bba48a}
.philosophy-copy>p:last-child{font-family:Georgia,"Times New Roman",serif;font-size:13px;max-width:500px;color:#bbb2a8;margin-top:18px}
.philosophy-image{
  position:absolute;
  right:7%;
  top:18%;
  width:1px;
  height:64%;
  background:linear-gradient(transparent,rgba(217,198,174,.28),transparent);
  filter:none
}

.contact{
  padding:42px clamp(22px,4.7vw,68px);display:flex;justify-content:space-between;
  align-items:flex-end;gap:30px;background:#121416
}
.contact .tiny-label{color:#8e7253}
.contact h2{
  font-family:Baskerville,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(32px,3.6vw,52px);font-weight:400;margin:0
}
.contact p{font-family:Georgia,"Times New Roman",serif;font-size:14px;color:#aaa197;margin:8px 0 0}
.contact strong{font-weight:400;color:#c7ad88}
.contact a{color:#d0ad7d;font-size:15px;padding-bottom:5px;border-bottom:1px solid rgba(208,173,125,.42);white-space:nowrap}

footer{
  position:relative;min-height:58px;background:#101214;color:#605c56;
  padding:18px clamp(22px,4.7vw,68px);font-size:8px;letter-spacing:.13em
}
.whisper{
  position:absolute;right:4.8%;top:17px;color:#ada294;opacity:.56;
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:11px;letter-spacing:.01em
}

@media(max-width:1180px){
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .card-image{height:250px}
  .process{grid-template-columns:125px 1fr 125px;gap:16px}
}
@media(max-width:760px){
  .site-header{padding:16px 18px}
  .wordmark{font-size:21px}
  nav{gap:13px}
  nav a:nth-child(2){display:none}

  .hero{min-height:600px;height:80svh}
  .hero-bg{background-position:58% center}
  .hero-shade{background:linear-gradient(90deg,rgba(3,4,5,.42),rgba(3,4,5,.12) 78%),linear-gradient(0deg,rgba(3,4,5,.62),transparent 50%)}
  .hero-copy{left:22px;right:22px;top:auto;bottom:70px;transform:none}
  .hero h1{font-size:clamp(44px,12.2vw,62px);line-height:.97}
  .hero-services{font-size:13px}
  .hero-sub{font-size:15px}


/* V3.6 readability + interaction pass */
.card{
  display:block;
  position:relative;
  border-radius:1px;
  outline:none;
}
.card:focus-visible{
  outline:1px solid rgba(208,173,125,.9);
  outline-offset:5px;
}
.card-image{
  border-color:rgba(255,255,255,.11);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.card .view-project{
  display:inline-block;
  margin-top:7px;
  color:#a99073;
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(3px);
  transition:opacity .22s ease, transform .22s ease, color .22s ease;
}
.card:hover .view-project,
.card:focus-visible .view-project{
  opacity:1;
  transform:none;
  color:#d1ad7c;
}
.card:hover .card-image img{
  transform:scale(1.012);
}
.card-image.art img{transition:transform .35s ease}
.card:hover .card-image.art img{transform:scale(1.008)!important}

.mess-link{
  color:#c6a477;
  border-bottom:1px solid rgba(198,164,119,.28);
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.mess-link:hover,
.mess-link:focus-visible{
  color:#e0c094;
  border-color:#e0c094;
  outline:none;
}

/* Tablet gets a deliberate readability bump rather than a shrunken desktop. */
@media (min-width:761px) and (max-width:1180px){
  body{font-size:17px}
  nav{font-size:11px}
  .section-title{font-size:14px}
  .kicker{font-size:9px}
  .card h2{font-size:15px}
  .steps h2{font-size:21px}
  .steps p{font-size:13px;line-height:1.55}
  .philosophy-copy>p:last-child,
  .contact p{font-size:15px;line-height:1.6}
  .contact a{font-size:16px}
  .view-project{opacity:.82!important;transform:none!important}
}

/* Respect people who prefer less motion. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}