/* ============================================
   COZE HOMES — SHARED STYLESHEET
   ============================================ */

:root{
  --ink:#0E0D0B;
  --paper:#FAF8F3;
  --paper-2:#F1EEE6;
  --blue:#173A52;
  --blue-accent:#3E7CA6;
  --stone:#DAD5C9;
  --line: rgba(14,13,11,0.12);
  --line-strong: rgba(14,13,11,0.30);
  --muted: rgba(14,13,11,0.58);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink);
  font-family:'Archivo', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:400; letter-spacing:-0.015em; }
p{ font-size:15.5px; line-height:1.8; color:var(--muted); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.archmark path{ fill:none; stroke:currentColor; stroke-width:1.1; }

/* ---------- Media placeholder / real media frame ---------- */
.media{ position:relative; background:var(--stone); overflow:hidden; }
.media video, .media img.fill{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media::before, .media::after, .media .bl, .media .br{ content:''; position:absolute; width:18px; height:18px; z-index:2; }
.media::before{ top:16px; left:16px; border-top:1px solid rgba(250,248,243,0.75); border-left:1px solid rgba(250,248,243,0.75); }
.media::after{ top:16px; right:16px; border-top:1px solid rgba(250,248,243,0.75); border-right:1px solid rgba(250,248,243,0.75); }
.media .bl{ bottom:16px; left:16px; border-bottom:1px solid rgba(250,248,243,0.75); border-left:1px solid rgba(250,248,243,0.75); }
.media .br{ bottom:16px; right:16px; border-bottom:1px solid rgba(250,248,243,0.75); border-right:1px solid rgba(250,248,243,0.75); }
.media.placeholder::before, .media.placeholder::after, .media.placeholder .bl, .media.placeholder .br{
  border-color: rgba(14,13,11,0.55);
}
.media .cap{
  position:absolute; bottom:16px; left:44px; right:44px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em;
  color:rgba(14,13,11,0.55); text-align:center;
}
.media.has-video .cap{ color:rgba(250,248,243,0.85); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px;
  background:var(--ink); color:var(--paper);
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  border:none; cursor:pointer; font-family:'Archivo', sans-serif;
  transition:background .25s ease;
}
.btn:hover{ background:var(--blue); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover{ box-shadow:inset 0 0 0 1px var(--ink); background:transparent; }

/* ---------- Header / Nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,248,243,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:88px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:32px; width:auto; }
.brand span{ font-family:'Fraunces', serif; font-size:18px; }
.navlinks{ display:flex; align-items:center; gap:40px; }
.navlinks a{
  font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink); opacity:0.6; transition:opacity .2s;
}
.navlinks a.active, .navlinks a:hover{ opacity:1; }
.mobile-toggle{ display:none; }

/* ---------- Fade-up scroll reveal ---------- */
.fade-up{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.fade-up.in{ opacity:1; transform:translateY(0); }

/* ---------- Generic page hero ---------- */
.page-hero{ padding:100px 0 0; }
.page-hero .eyebrow{ margin-bottom:24px; }
.page-hero h1{ font-size:clamp(38px,5.4vw,64px); font-weight:300; line-height:1.1; max-width:900px; }
.page-hero p.lead{ font-size:16px; line-height:1.75; color:var(--muted); max-width:520px; margin-top:26px; }
.page-hero-media{ aspect-ratio:21/9; margin-top:56px; }

/* ---------- Positioning statement block ---------- */
.positioning{ padding:140px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.positioning .inner{ max-width:920px; }
.positioning .eyebrow{ margin-bottom:32px; }
.positioning h2{ font-size:clamp(28px,3.6vw,46px); line-height:1.22; font-weight:300; margin-bottom:36px; }
.positioning p{ max-width:560px; font-size:15.5px; line-height:1.85; padding-left:24px; border-left:1px solid var(--line-strong); }

/* ---------- Split two-column block ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.split-col{ padding:100px 56px; }
.split-col:first-child{ border-right:1px solid var(--line); }
.split-col .eyebrow{ margin-bottom:24px; }
.split-col h2{ font-size:clamp(24px,2.6vw,32px); font-weight:300; margin-bottom:22px; line-height:1.25; }

/* ---------- Generic section ---------- */
.section{ padding:140px 0; }
.section-head{ display:grid; grid-template-columns:1fr auto; align-items:end; margin-bottom:64px; gap:24px; }
.section-head h2{ font-size:clamp(30px,3.4vw,44px); font-weight:300; margin-top:14px; }

/* ---------- Project / gallery cards ---------- */
.projects-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); }
.project-card{ background:var(--paper); padding-bottom:28px; }
.project-media{ aspect-ratio:4/5; margin-bottom:22px; }
.project-card .meta{ padding:0 28px; }
.status-pill{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:10px;
}
.status-pill.sold{ color:var(--blue-accent); }
.project-card h3{ font-size:19px; font-weight:400; margin-bottom:4px; }
.project-card .addr{ font-size:12.5px; color:var(--muted); }

/* ---------- Dark "why" style grid ---------- */
.dark-block{ background:var(--ink); color:var(--paper); }
.dark-block .eyebrow{ color:rgba(250,248,243,0.5); }
.dark-block h2{ color:var(--paper); font-weight:300; }
.pair-grid{ display:grid; grid-template-columns:repeat(2, 1fr); margin-top:70px; border-top:1px solid rgba(250,248,243,0.16); }
.pair-card{ padding:44px 4px 44px 0; border-bottom:1px solid rgba(250,248,243,0.16); display:grid; grid-template-columns:44px 1fr; gap:22px; }
.pair-card:nth-child(odd){ border-right:1px solid rgba(250,248,243,0.16); padding-right:44px; }
.pair-card:nth-child(even){ padding-left:44px; }
.pair-card .archmark{ color:var(--blue-accent); }
.pair-card h3{ color:var(--paper); font-size:19px; font-weight:400; margin-bottom:10px; }
.pair-card p{ color:rgba(250,248,243,0.62); font-size:14.5px; line-height:1.75; }

/* ---------- Process steps ---------- */
.process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:72px; }
.process-step{ border-top:1px solid var(--line-strong); padding-top:24px; }
.process-step .num{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); display:block; margin-bottom:18px; }
.process-step h3{ font-size:17px; font-weight:400; margin-bottom:10px; }
.process-step p{ font-size:13.5px; line-height:1.7; }

.step{ display:grid; grid-template-columns:0.55fr 1.45fr; gap:80px; padding:90px 0; border-top:1px solid var(--line-strong); align-items:center; }
.step:last-of-type{ border-bottom:1px solid var(--line-strong); }
.step-num{ font-family:'Fraunces', serif; font-weight:300; font-size:clamp(56px,7vw,96px); line-height:1; color:var(--line-strong); }
.step-media{ aspect-ratio:5/4; }
.step-copy .eyebrow{ margin-bottom:18px; }
.step-copy h2{ font-size:clamp(24px,2.6vw,32px); font-weight:300; margin-bottom:18px; }
.step-copy p{ max-width:460px; }
.step-left{ display:flex; flex-direction:column; gap:32px; }

/* ---------- Credentials list ---------- */
.cred-list{ display:grid; grid-template-columns:repeat(2, 1fr); border-top:1px solid var(--line-strong); }
.cred-item{ display:flex; align-items:center; justify-content:space-between; padding:26px 0; border-bottom:1px solid var(--line); }
.cred-item:nth-child(odd){ padding-right:40px; border-right:1px solid var(--line); }
.cred-item:nth-child(even){ padding-left:40px; }
.cred-item .label{ font-size:16px; }
.cred-item .num{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); }

/* ---------- Stat block ---------- */
.stat{ font-family:'Fraunces', serif; font-weight:300; font-size:clamp(48px,6vw,72px); line-height:1; }
.stat-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-top:10px; }

/* ---------- Pull quote (approach) ---------- */
.pullquote{ padding:150px 0; text-align:center; background:var(--ink); color:var(--paper); }
.pullquote .eyebrow{ justify-content:center; color:rgba(250,248,243,0.5); margin-bottom:36px; }
.pullquote blockquote{ font-family:'Fraunces', serif; font-weight:300; font-size:clamp(26px,3.6vw,44px); line-height:1.3; max-width:920px; margin:0 auto 40px; color:var(--paper); }
.pullquote p{ max-width:560px; margin:0 auto; font-size:15px; line-height:1.85; color:rgba(250,248,243,0.65); }

/* ---------- Styles grid (Our Homes) ---------- */
.styles-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:1px; background:var(--line); }
.style-card{ background:var(--paper); aspect-ratio:3/4; position:relative; }
.style-card .media{ position:absolute; inset:0; }
.style-card .label{ position:absolute; bottom:16px; left:16px; right:16px; font-size:13px; font-family:'Fraunces', serif; color:var(--ink); z-index:2; }

/* ---------- Contact / form ---------- */
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px; padding:120px 0 150px; }
.contact-info h2{ font-size:clamp(26px,3vw,34px); font-weight:300; margin-bottom:24px; }
.contact-info p{ margin-bottom:28px; max-width:380px; }
.contact-detail{ display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.contact-detail a{ font-family:'IBM Plex Mono', monospace; font-size:14px; }
.reassure{ font-size:13px; color:var(--muted); border-left:1px solid var(--line-strong); padding-left:18px; max-width:340px; }

.booking-panel{ border:1px solid var(--line); padding:44px; }
.booking-panel .eyebrow{ margin-bottom:20px; }
.booking-panel h3{ font-size:20px; font-weight:400; margin-bottom:28px; }
.cal-mock{ border:1px solid var(--line); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.04em; }
.cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); }
.cal-cell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:12.5px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); }
.cal-cell:nth-child(7n){ border-right:none; }
.cal-cell.avail{ color:var(--ink); cursor:pointer; }
.cal-cell.avail:hover{ background:var(--paper-2); }
.cal-cell.selected{ background:var(--blue); color:var(--paper); }
.time-slots{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:24px; }
.time-slot{ text-align:center; padding:11px 0; border:1px solid var(--line-strong); font-size:12.5px; font-family:'IBM Plex Mono', monospace; cursor:pointer; }
.time-slot:hover, .time-slot.selected{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.form-fallback{ margin-top:36px; padding-top:32px; border-top:1px solid var(--line); }
.form-fallback .eyebrow{ margin-bottom:18px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.field label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; border:none; border-bottom:1px solid var(--line-strong);
  background:transparent; padding:10px 0; font-family:'Archivo', sans-serif; font-size:14.5px; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ink); }

/* ---------- Map / area ---------- */
.service{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:center; }
.service-map{ aspect-ratio:1/1; }
.service h2{ font-size:clamp(28px,3.2vw,38px); font-weight:300; margin-bottom:22px; }
.service p{ max-width:420px; margin-bottom:32px; }

/* ---------- Final CTA band ---------- */
.final-cta{ background:var(--blue); color:var(--paper); text-align:center; padding:150px 0; }
.final-cta .eyebrow{ justify-content:center; color:rgba(250,248,243,0.55); margin-bottom:28px; }
.final-cta h2{ color:var(--paper); font-size:clamp(32px,4.4vw,54px); font-weight:300; margin-bottom:22px; }
.final-cta p{ color:rgba(250,248,243,0.72); margin-bottom:40px; font-size:15.5px; max-width:440px; margin-left:auto; margin-right:auto; }
.final-cta .btn{ background:var(--paper); color:var(--blue); }
.final-cta .btn:hover{ background:#fff; }
.final-cta .contact-line{ margin-top:28px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(250,248,243,0.65); }

/* ---------- Footer ---------- */
footer{ padding:64px 0; border-top:1px solid var(--line); }
.foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot-row .brand span{ font-size:15px; }
.foot-links{ display:flex; gap:32px; font-size:11.5px; letter-spacing:0.05em; color:var(--muted); }

/* ---------- Simple placeholder page ---------- */
.placeholder-page{ padding:160px 0 180px; text-align:center; }
.placeholder-page .eyebrow{ justify-content:center; margin-bottom:28px; }
.placeholder-page h1{ font-size:clamp(32px,4.4vw,50px); font-weight:300; max-width:780px; margin:0 auto 26px; }
.placeholder-page p{ max-width:520px; margin:0 auto 40px; font-size:16px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .navlinks{ display:none; }
  .split{ grid-template-columns:1fr; }
  .split-col:first-child{ border-right:none; border-bottom:1px solid var(--line); }
  .projects-grid{ grid-template-columns:1fr; }
  .pair-grid{ grid-template-columns:1fr; }
  .pair-card:nth-child(odd){ border-right:none; padding-right:0; }
  .pair-card:nth-child(even){ padding-left:0; }
  .process-row{ grid-template-columns:1fr 1fr; }
  .step{ grid-template-columns:1fr; gap:32px; }
  .cred-list{ grid-template-columns:1fr; }
  .cred-item:nth-child(odd){ padding-right:0; border-right:none; }
  .cred-item:nth-child(even){ padding-left:0; }
  .service{ grid-template-columns:1fr; }
  .styles-grid{ grid-template-columns:repeat(2, 1fr); }
  .contact-grid{ grid-template-columns:1fr; gap:56px; }
  .field-row{ grid-template-columns:1fr; }
  .booking-panel{ padding:28px; }
}