:root{
  --ink:#20221e;
  --muted:#64665e;
  --paper:#f6f2ea;
  --panel:#e8e0d2;
  --line:#d2c7b6;
  --accent:#6d563f;
  --dark:#171813;
  --white:#fffdf8;
  --page-x:clamp(1.25rem,4.5vw,5rem);
  --section-y:clamp(2.75rem,6vw,5.25rem);
  --radius:1rem;
  --preview-strip-height:36px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;text-rendering:optimizeLegibility}
.prototype-banner{position:sticky;top:0;z-index:20;padding:.5rem 1rem;text-align:center;background:#2e261e;color:#fff4df;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem var(--page-x);border-bottom:1px solid var(--line);background:rgba(246,242,234,.94);backdrop-filter:blur(16px);position:sticky;top:var(--preview-strip-height);z-index:10}
.brand{font-family:Georgia,serif;color:var(--ink);font-size:clamp(1.15rem,2vw,1.35rem);text-decoration:none;letter-spacing:.04em;white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;justify-content:flex-end}.site-nav a{color:var(--ink);text-decoration:none;padding:.55rem .78rem;border-radius:999px;font-size:.92rem}.site-nav a:hover,.site-nav a[aria-current=page]{background:var(--panel)}.nav-cta{border:1px solid var(--accent)}.nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:999px;padding:.55rem .8rem;color:var(--ink)}
.hero,.page-hero{padding:clamp(3.25rem,8vw,6.25rem) var(--page-x)}
.home-hero{min-height:clamp(31rem,62vh,42rem);display:grid;align-content:end;background:linear-gradient(135deg,rgba(32,34,30,.58),rgba(32,34,30,.18)),linear-gradient(120deg,#8f8a7c,#d9c9ad 45%,#766d5d);color:var(--white)}
.hero h1,.page-hero h1{max-width:920px;font-family:Georgia,serif;font-size:clamp(2.35rem,5.45vw,5.45rem);line-height:1.02;margin:.15rem 0 1rem;letter-spacing:-.035em}.hero p,.page-hero p{max-width:700px;font-size:clamp(1rem,1.45vw,1.12rem);margin:.65rem 0 0;color:inherit}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:inherit;opacity:.78;margin:0 0 .65rem}.button{display:inline-flex;align-items:center;justify-content:center;padding:.78rem 1.05rem;border-radius:999px;background:var(--ink);color:var(--white);text-decoration:none;border:1px solid var(--ink);font-weight:650}.button.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.65)}.button.light{background:var(--white);color:var(--ink);border-color:var(--white)}
.split-section,.featured-grid,.project-list,.more-projects,.values-grid,.service-grid,.contact-grid,.next-step{padding:var(--section-y) var(--page-x)}.split-section{display:grid;grid-template-columns:minmax(220px,.78fr) minmax(0,1.22fr);gap:clamp(1.6rem,4vw,4rem);border-bottom:1px solid var(--line)}
h2{font-family:Georgia,serif;font-size:clamp(1.55rem,2.35vw,2.45rem);line-height:1.14;margin:.15rem 0 .85rem;letter-spacing:-.02em}h3{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.25;margin:.2rem 0 .45rem}.section-heading{grid-column:1/-1;max-width:760px;margin-bottom:clamp(.35rem,1vw,.8rem)}.section-heading p{margin:.5rem 0 0;color:var(--muted)}
.featured-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(.85rem,1.7vw,1.25rem)}.project-card{min-height:clamp(230px,28vw,330px);border-radius:var(--radius);overflow:hidden;background-color:#82745f;background-image:var(--image,none);background-size:cover;background-position:center}.project-card.large{grid-row:span 2;min-height:clamp(360px,46vw,560px)}.project-card a{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1rem,2vw,1.45rem);color:white;text-decoration:none;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.52))}.project-card span{font-family:Georgia,serif;font-size:clamp(1.35rem,2.25vw,1.95rem);line-height:1.08}.project-card small{letter-spacing:.1em;text-transform:uppercase;font-size:.76rem}.tone-1{background-image:var(--image,linear-gradient(135deg,#82745f,#c8b99d))}.tone-2{background-image:var(--image,linear-gradient(135deg,#5f6b64,#b5c0b0))}.tone-3{background-image:var(--image,linear-gradient(135deg,#6a5749,#c6a889))}.tone-4{background-image:var(--image,linear-gradient(135deg,#7f8989,#cfd6d4))}.tone-5{background-image:var(--image,linear-gradient(135deg,#5b554c,#bfb6a8))}.tone-6{background-image:var(--image,linear-gradient(135deg,#4f6570,#b7c8cf))}
.cta-band{margin:clamp(1.75rem,4vw,4rem) var(--page-x);padding:clamp(1.75rem,4vw,3.5rem);border-radius:1.2rem;background:var(--dark);color:var(--white)}.cta-band p{max-width:720px}.page-hero{border-bottom:1px solid var(--line)}.portfolio-item{display:grid;grid-template-columns:minmax(240px,.88fr) minmax(0,1.12fr);gap:clamp(1.35rem,3.5vw,3.5rem);padding:clamp(1.35rem,3vw,2.25rem) 0;border-bottom:1px solid var(--line);align-items:center}.portfolio-item:first-child{padding-top:0}.portfolio-item:last-child{border-bottom:0}.project-image{min-height:clamp(240px,31vw,340px);border-radius:var(--radius);background-image:var(--image,linear-gradient(135deg,#82745f,#c8b99d));background-size:cover;background-position:center}.portfolio-item a,.site-footer a{color:var(--accent);font-weight:700}.more-projects ul{columns:2;gap:2rem;padding-left:1.2rem}.values-grid,.service-grid,.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.85rem,1.6vw,1.25rem)}.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.values-grid article,.service-grid article,.contact-card,.next-step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.05rem,2vw,1.4rem)}.contact-grid{grid-template-columns:1fr 1fr}.placeholder{background:#fff0bd;padding:.1rem .25rem}.check-list{padding-left:1.1rem}.site-footer{display:flex;justify-content:space-between;gap:1rem;padding:1.6rem var(--page-x);border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
@media (max-width:820px){:root{--page-x:clamp(1rem,5vw,1.5rem);--section-y:clamp(2.25rem,8vw,3.25rem);--preview-strip-height:58px}.site-header{align-items:flex-start}.nav-toggle{display:inline-flex}.site-nav{display:none;position:absolute;left:1rem;right:1rem;top:calc(100% + .4rem);flex-direction:column;align-items:stretch;background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:.5rem;box-shadow:0 18px 40px rgba(32,34,30,.14)}.site-nav.is-open{display:flex}.site-nav a{padding:.7rem .85rem}.home-hero{min-height:30rem}.hero h1,.page-hero h1{font-size:clamp(2.15rem,12vw,3.65rem)}.split-section,.portfolio-item,.contact-grid,.featured-grid,.values-grid,.service-grid{grid-template-columns:1fr}.featured-grid{gap:.9rem}.project-card,.project-card.large{min-height:240px}.project-image{min-height:220px}.more-projects ul{columns:1}.site-footer{flex-direction:column}.cta-band{margin-inline:var(--page-x)}}
@media (max-width:520px){.prototype-banner{font-size:.68rem;letter-spacing:.06em}.site-header{padding-block:.75rem}.brand{font-size:1.05rem}.hero,.page-hero{padding-top:2.5rem;padding-bottom:3rem}.home-hero{min-height:28rem}.button{width:100%;margin-top:.35rem}.project-card a{padding:1rem}.values-grid article,.service-grid article,.contact-card,.next-step{padding:1rem}.site-footer{padding-block:1.25rem}}


/* Real project image fills copied from the Rama Architects project asset folder. */
.project-card.tone-1, .project-image.tone-1 { background-image: url('images/plateau-project.jpg'); }
.project-card.tone-2, .project-image.tone-2 { background-image: url('images/m-house.jpg'); }
.project-card.tone-3, .project-image.tone-3 { background-image: url('images/container-house.jpg'); }
.project-card.tone-4, .project-image.tone-4 { background-image: url('images/bellevue-small.jpg'); }
.project-card.tone-5, .project-image.tone-5 { background-image: url('images/heritage-modern-house.jpg'); }
.project-card.tone-6, .project-image.tone-6 { background-image: url('images/whale-beach-house.jpg'); }
.project-card[class*="tone-"], .project-image[class*="tone-"] { background-size: cover; background-position: center; }
.project-image:not(:empty)::after { display: none; }


/* Dashboard and client report pages */
.dashboard-main,
.report-main {
  padding: var(--section-y) var(--page-x);
}
.dashboard-hero {
  max-width: 920px;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.dashboard-hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(2.3rem, 5.2vw, 5rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  margin: .25rem 0 1rem;
}
.dashboard-hero p:last-child {
  max-width: 720px;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  color: var(--muted);
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.dashboard-card {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  padding: clamp(1.2rem, 2vw, 1.6rem);
}
.dashboard-card.website-card {
  background: linear-gradient(135deg, rgba(32,34,30,.75), rgba(32,34,30,.25)), url('images/hero-home.jpg') center/cover;
  color: var(--white);
}
.dashboard-card.website-card p { color: rgba(255,253,248,.84); }
.dashboard-card h2 { font-size: clamp(1.55rem, 2.4vw, 2.4rem); }
.report-main { max-width: 1180px; margin: 0 auto; }
.back-button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1rem;
  padding: .65rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.report-shell {
  background: rgba(255,253,248,.72);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: clamp(1.25rem, 4vw, 3rem);
}
.report-shell header,
.report-shell main,
.report-shell footer {
  max-width: none;
  margin: 0;
  padding: 0;
}
.report-shell header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.report-shell h1 {
  font-family: Georgia, serif;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: .25rem 0 1rem;
}
.report-shell h2 {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.report-shell article,
.report-shell .note {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.1rem;
  margin: 1rem 0;
}
.report-shell .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.report-shell .state {
  display: inline-block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem .55rem;
  color: var(--accent);
}
.report-shell table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  margin: 1rem 0;
}
.report-shell th,
.report-shell td {
  text-align: left;
  border: 1px solid var(--line);
  padding: .75rem;
  vertical-align: top;
}
@media (max-width: 1050px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-shell .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .dashboard-grid,
  .report-shell .cards { grid-template-columns: 1fr; }
  .dashboard-card { min-height: 240px; }
  .report-shell { padding: 1rem; }
  .report-shell table { font-size: .9rem; }
}


/* Refined dashboard/report/website header behavior */
.website-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 36px;
  padding: .42rem var(--page-x);
}
.website-banner a {
  position: absolute;
  left: var(--page-x);
  color: #fff4df;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}
.website-banner a:hover { text-decoration: underline; }
.dashboard-page .dashboard-main,
.report-page .report-main {
  padding-top: clamp(1.25rem, 4vw, 3rem);
}
.report-top-button {
  margin-top: 0;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
@media (max-width: 720px) {
  .website-banner {
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }
  .website-banner a {
    position: static;
  }
}