/* Field Modifications: public site styles. Modeled on the original WordPress site (SiteOrigin North):
   Quicksand throughout, centered uppercase section titles over a short rule, a light gray header,
   full-width photo bands and a charcoal footer. Light is the default; see assets/theme.js. */
:root{
  --bg:#ffffff; --header-bg:#fafafa; --surface-2:#f5f5f5;
  --ink:#292929; --text:#5f5f5f; --muted:#767676; --line:#e5e5e5;
  --accent:#8aacae; --accent-2:#9bc4c3; --link:#5d8a8c;
  --footer-bg:#333333; --footer-ink:#e8e8e8; --footer-muted:#a8a8a8; --footer-link:#e57b72;
  --switch-on:#ffffff; --todo-bg:#fff1a8; --todo-ink:#4a3a00;
  --col:64rem;
  --font:'Quicksand', 'Helvetica Neue', Arial, sans-serif;
  color-scheme:light;
}
/* Dark colors: when the visitor picks Dark, or picks Auto on a device set to dark. */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --bg:#161614; --header-bg:#1c1c1a; --surface-2:#232321;
    --ink:#f0efea; --text:#c4c2bb; --muted:#9d9a92; --line:#33332f;
    --accent:#8aacae; --accent-2:#9bc4c3; --link:#9bc4c3;
    --footer-bg:#0f0f0e; --footer-ink:#e8e8e8; --footer-muted:#9a9a9a; --footer-link:#ef9189;
    --switch-on:#3a3a35; --todo-bg:#4a3d0c; --todo-ink:#ffe68a;
    color-scheme:dark;
  }
  :root[data-theme="auto"] .logo-light{ display:none; }
  :root[data-theme="auto"] .logo-dark{ display:block; }
}
:root[data-theme="dark"]{
  --bg:#161614; --header-bg:#1c1c1a; --surface-2:#232321;
  --ink:#f0efea; --text:#c4c2bb; --muted:#9d9a92; --line:#33332f;
  --accent:#8aacae; --accent-2:#9bc4c3; --link:#9bc4c3;
  --footer-bg:#0f0f0e; --footer-ink:#e8e8e8; --footer-muted:#9a9a9a; --footer-link:#ef9189;
  --switch-on:#3a3a35; --todo-bg:#4a3d0c; --todo-ink:#ffe68a;
  color-scheme:dark;
}
:root[data-theme="dark"] .logo-light{ display:none; }
:root[data-theme="dark"] .logo-dark{ display:block; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:1rem; line-height:1.75; }
h1,h2,h3{ margin:0; color:var(--ink); font-weight:400; line-height:1.2; text-wrap:balance; }
p{ margin:0 0 1rem; }
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--link); }
a:hover{ color:var(--accent); }
.wrap{ max-width:var(--col); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
section{ padding-block:clamp(3rem,7vw,4.5rem); scroll-margin-top:1rem; }
.skip{ position:absolute; left:-999px; top:0; }
.skip:focus{ left:1rem; top:1rem; background:var(--bg); padding:0.5rem 0.8rem; z-index:50; }
mark.todo{ background:var(--todo-bg); color:var(--todo-ink); padding:0.1rem 0.35rem; border-radius:3px; }

/* Section titles: uppercase, centered, with a short rule underneath (as on the old site). */
.section-title{ text-align:center; text-transform:uppercase; letter-spacing:0.04em; font-size:clamp(1.35rem,2.6vw,1.6rem); }
.section-title::after{ content:""; display:block; width:60px; height:1px; background:var(--muted); margin:1.1rem auto 1.6rem; opacity:0.6; }
.section-lede{ text-align:center; max-width:42rem; margin:0 auto 2.4rem; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font:500 0.85rem var(--font); text-transform:uppercase; letter-spacing:0.08em;
  padding:0.75rem 1.6rem; border:1px solid var(--muted); color:var(--ink); background:transparent; text-decoration:none; cursor:pointer; transition:background 0.2s, border-color 0.2s, color 0.2s; }
.btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-light{ border-color:rgba(255,255,255,0.85); color:#fff; }
.center{ text-align:center; }

/* ---------- header ---------- */
.site-header{ background:var(--header-bg); border-bottom:1px solid var(--line); position:relative; z-index:20; }
.site-header .wrap{ display:flex; align-items:center; gap:1.2rem; padding-block:1rem; }
.logo{ display:block; flex:none; }
.logo img{ height:56px; width:auto; }
.logo .logo-dark{ display:none; }
.site-nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(1rem,2.6vw,2.4rem); }
.site-nav a{ color:var(--muted); text-decoration:none; text-transform:uppercase; font-size:0.85rem; letter-spacing:0.03em; font-weight:500; }
.site-nav a:hover, .site-nav a[aria-current="page"]{ color:var(--ink); }
.menu-btn{ display:none; margin-left:auto; font:500 0.85rem var(--font); text-transform:uppercase; letter-spacing:0.06em; color:var(--ink);
  background:none; border:1px solid var(--line); padding:0.45rem 0.8rem; cursor:pointer; }
@media (max-width:820px){
  .logo img{ height:44px; }
  .menu-btn{ display:inline-block; }
  .site-nav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--header-bg); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:0.4rem clamp(1rem,4vw,2rem) 0.8rem; }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:0.55rem 0; width:100%; }
}

/* light / dark / auto switch (buttons are added by assets/theme.js) */
.theme-switch{ display:inline-flex; padding:2px; gap:2px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); flex:none; }
.theme-switch:empty{ display:none; }
.theme-switch button{ width:32px; height:32px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--muted);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.theme-switch button:hover{ color:var(--ink); }
.theme-switch button:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.theme-switch button[aria-pressed="true"]{ background:var(--switch-on); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.theme-switch svg{ width:16px; height:16px; }
@media (max-width:420px){ .theme-switch button{ width:28px; height:28px; } }

/* ---------- hero: full-width photos under a dark veil, centered type ---------- */
.hero{ position:relative; padding:0; min-height:clamp(380px,62vh,600px); display:grid; place-items:center; overflow:hidden; background:#2a2a28; color:#fff; text-align:center; }
.hero .slides{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1s ease; }
.hero-slide.is-active{ opacity:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0; background:rgba(20,20,20,0.5); }
.hero-text{ position:relative; z-index:2; padding:3rem 1rem; }
.hero h1{ color:#fff; font-size:clamp(2.2rem,6vw,3.6rem); font-weight:300; letter-spacing:0.01em; }
.hero-sub{ font-size:clamp(1.05rem,2.2vw,1.3rem); margin:0.6rem 0 1.8rem; color:rgba(255,255,255,0.92); }
.hero-actions{ display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; }
.slide-nav{ position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:48px; height:64px; background:none; border:0; color:rgba(255,255,255,0.75); cursor:pointer; }
.slide-nav:hover{ color:#fff; }
.slide-nav svg{ width:30px; height:30px; }
.slide-prev{ left:0.5rem; } .slide-next{ right:0.5rem; }
@media (max-width:600px){ .slide-nav{ display:none; } }
.slide-dots{ position:absolute; z-index:3; bottom:1rem; left:0; right:0; display:flex; justify-content:center; gap:0.5rem; }
.slide-dots button{ width:10px; height:10px; padding:0; border-radius:50%; border:1px solid #fff; background:transparent; cursor:pointer; }
.slide-dots button[aria-current="true"]{ background:#fff; }
@media (prefers-reduced-motion: reduce){ .hero-slide{ transition:none; } }

/* ---------- work-area icons (mask images, so they take the text color in both themes) ---------- */
.area-icon{ display:inline-block; width:76px; height:56px; background:var(--ink); flex:none;
  -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }
.area-icon.sm{ width:20px; height:16px; vertical-align:-3px; margin-right:0.4rem; background:currentColor; }
.icon-renovations{ --icon:url(/assets/icons/renovations.svg); }
.icon-carpentry{ --icon:url(/assets/icons/carpentry.png); }
.icon-patios{ --icon:url(/assets/icons/patios.png); }
.icon-plumbing{ --icon:url(/assets/icons/plumbing.png); }
.icon-lighting{ --icon:url(/assets/icons/lighting.png); }
.icon-decks{ --icon:url(/assets/icons/decks.svg); }

.services-grid{ list-style:none; margin:0 auto; padding:0; max-width:46rem; display:grid; grid-template-columns:repeat(3,1fr); gap:2.6rem 1.5rem; }
@media (max-width:560px){ .services-grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; } }
.services-grid a{ display:flex; flex-direction:column; align-items:center; gap:0.9rem; text-align:center; text-decoration:none; color:var(--text); font-size:0.95rem; }
.services-grid a:hover{ color:var(--ink); }
.services-grid a:hover .area-icon{ background:var(--accent); }
.services-grid .area-icon{ transition:background 0.2s; }

/* ---------- quote band over the ruler photo ---------- */
.quote-band{ position:relative; padding:0; overflow:hidden; color:#fff; text-align:center; }
.quote-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.quote-band::after{ content:""; position:absolute; inset:0; background:rgba(25,32,33,0.55); }
.quote-band blockquote{ position:relative; z-index:2; margin:0 auto; max-width:46rem; padding:clamp(4rem,10vw,6.5rem) 1.25rem; font-size:clamp(1.15rem,2.4vw,1.45rem); line-height:1.6; }
.quote-band cite{ display:block; margin-top:1rem; font-style:normal; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.85); }

/* ---------- portfolio tiles ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:2rem 1.4rem; }
.work-tile{ display:flex; flex-direction:column; text-decoration:none; color:var(--text); }
.work-tile[hidden]{ display:none; }
.work-photo{ position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden; background:var(--surface-2); margin-bottom:0.8rem; }
.work-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.work-hover{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(138,172,174,0.82); color:#fff; text-transform:uppercase; letter-spacing:0.1em; font-size:0.82rem; opacity:0; transition:opacity 0.25s; }
.work-tile:hover .work-hover, .work-tile:focus-visible .work-hover{ opacity:1; }
.work-tile:hover img{ transform:scale(1.04); }
.work-title{ color:var(--ink); font-size:1.08rem; line-height:1.35; }
.work-meta{ font-size:0.88rem; color:var(--muted); margin-top:0.2rem; }
.more-row{ text-align:center; margin-top:2.6rem; }
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem; margin:-0.6rem 0 2.4rem; }
.filters:empty{ display:none; }
.chip{ font:500 0.85rem var(--font); color:var(--muted); background:transparent; border:1px solid var(--line); padding:0.45rem 0.9rem; cursor:pointer; display:inline-flex; align-items:center; }
.chip:hover{ color:var(--ink); border-color:var(--muted); }
.chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.empty{ text-align:center; color:var(--muted); }

/* ---------- team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
@media (max-width:820px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
.team-grid figure{ margin:0; }
.team-grid img{ width:100%; aspect-ratio:4 / 5; object-fit:cover; }
.team-grid figcaption{ font-size:0.9rem; margin-top:0.6rem; line-height:1.5; }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); margin-top:0.6rem; }
@media (max-width:720px){ .contact{ grid-template-columns:1fr; } }
.contact h3, .footer-col h3, .side-title{ font-size:0.95rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.9rem; }
.contact address{ font-style:normal; }
.contact .drawing{ margin-top:1.4rem; max-width:300px; mix-blend-mode:multiply; }
:root[data-theme="dark"] .contact .drawing{ mix-blend-mode:screen; filter:invert(1) brightness(0.85); }
@media (prefers-color-scheme: dark){ :root[data-theme="auto"] .contact .drawing{ mix-blend-mode:screen; filter:invert(1) brightness(0.85); } }
.phone-big{ display:inline-block; font-size:clamp(1.5rem,3.4vw,1.9rem); color:var(--ink); text-decoration:none; margin-bottom:0.4rem; }
.contact-actions{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:1.2rem; }

/* ---------- about page ---------- */
.page-head{ padding-block:clamp(2rem,4vw,2.6rem) 0; }
.page-head h1{ font-size:1.6rem; }
.about-page{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4rem); padding-block:2rem clamp(3rem,6vw,4rem); }
@media (max-width:720px){ .about-page{ grid-template-columns:1fr; } }
.about-page figure{ margin:0; max-width:340px; justify-self:center; text-align:center; }
.about-page figcaption{ font-size:0.92rem; margin-top:0.7rem; }

/* ---------- project page ---------- */
.crumb{ font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em; text-decoration:none; color:var(--muted); }
.crumb:hover{ color:var(--ink); }
.project-head{ text-align:center; padding-block:clamp(2rem,4vw,3rem) 1.8rem; }
.project-area{ display:flex; flex-direction:column; align-items:center; gap:0.6rem; margin-top:1.6rem; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.project-area .area-icon{ width:60px; height:44px; }
.project-head h1{ font-size:clamp(1.7rem,4vw,2.4rem); margin-top:0.8rem; }
.project-meta{ color:var(--muted); margin:0.5rem 0 0; }
.project-cover{ margin:0 0 2.4rem; }
.project-cover img{ width:100%; max-height:620px; object-fit:cover; }
.project-body{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(2rem,5vw,3.5rem); align-items:start; }
@media (max-width:760px){ .project-body{ grid-template-columns:1fr; } }
.project-body.no-story{ grid-template-columns:minmax(0,30rem); justify-content:center; }
.project-summary{ font-size:1.2rem; color:var(--ink); line-height:1.6; }
.project-side{ background:var(--surface-2); padding:1.4rem 1.5rem; }
.facts{ display:grid; grid-template-columns:auto 1fr; gap:0.45rem 1.2rem; margin:0 0 1.2rem; font-size:0.95rem; }
.facts dt{ color:var(--muted); }
.facts dd{ margin:0; color:var(--ink); }
.project-side ul{ margin:0; padding-left:1.1rem; font-size:0.95rem; }
.project-side li{ margin-bottom:0.3rem; }
.project-side .side-title{ margin-top:0.4rem; }
.project-quote{ margin:2.6rem 0 0; padding:1.6rem 0 0; border-top:1px solid var(--line); text-align:center; }
.project-quote p{ font-size:1.25rem; color:var(--ink); line-height:1.6; max-width:40rem; margin:0 auto; }
.project-quote p::before{ content:"\201C"; } .project-quote p::after{ content:"\201D"; }
.project-quote cite{ display:block; margin-top:0.8rem; font-style:normal; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.stage-title{ font-size:0.95rem; text-transform:uppercase; letter-spacing:0.06em; margin:1.8rem 0 1rem; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:1rem; }
.gallery figure{ margin:0; }
.gallery button{ display:block; padding:0; border:0; background:none; cursor:zoom-in; width:100%; }
.gallery img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.gallery figcaption{ font-size:0.88rem; color:var(--muted); margin-top:0.4rem; }
.pager{ display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding-top:1.6rem; margin-top:3rem; }
.pager a{ text-decoration:none; color:var(--ink); max-width:48%; }
.pager small{ display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.pager-next{ text-align:right; margin-left:auto; }
.draft-notice{ background:var(--todo-bg); color:var(--todo-ink); font-weight:600; padding:0.6rem 0; }
.cta-band{ background:var(--surface-2); text-align:center; }
.cta-band p{ max-width:36rem; margin-inline:auto; }

/* lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(12,12,10,0.94); display:none; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1rem; z-index:100; color:#fff; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(94vw,1100px); max-height:76vh; object-fit:contain; }
.lightbox p{ margin:0.8rem 0 0; text-align:center; }
.lightbox-bar{ display:flex; gap:1rem; align-items:center; margin-top:1rem; }
.lightbox button{ font:500 0.9rem var(--font); background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.5); padding:0.45rem 0.9rem; cursor:pointer; }
.lightbox .close{ position:absolute; top:1rem; right:1rem; }

/* ---------- footer ---------- */
.site-footer{ background:var(--footer-bg); color:var(--footer-ink); font-size:0.95rem; }
.footer-cols{ display:grid; grid-template-columns:1fr 1.2fr 1.2fr; gap:2rem; padding-block:3rem 2.4rem; }
@media (max-width:720px){ .footer-cols{ grid-template-columns:1fr; } }
.footer-col h3{ color:var(--footer-ink); }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:0.55rem; }
.site-footer a{ color:var(--footer-link); }
.footer-col ul a{ text-decoration:none; text-transform:uppercase; font-size:0.9rem; }
.footer-col address{ font-style:normal; line-height:1.65; }
.footer-col .footer-logo{ height:50px; width:auto; margin-bottom:1.1rem; }
.footer-base{ border-top:1px solid rgba(255,255,255,0.08); padding-block:1.1rem; font-size:0.82rem; color:var(--footer-muted); text-align:center; }
.footer-base a{ color:var(--footer-muted); }
.gallery-title{ margin-top:3rem; }
.project-cta{ margin-top:3rem; }