:root {
  --paper:#142e25;
  --ink:#f1eee1;
  --muted:#bccabe;
  --line:#496153;
  --wood:#dfb47b;
  --green:#0b2019;
  --surface:#213f33;
  --on-dark:#f4f1e8;
  --muted-on-dark:#cad5c8;
  --accent-on-dark:#dfb47b;
  --hover:#335442;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif
}
* {
  box-sizing:border-box
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.palette-picker {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:40;
  color:var(--ink);
}
.palette-picker>summary {
  display:flex;
  align-items:center;
  gap:12px;
  list-style:none;
  cursor:pointer;
  padding:13px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:5px;
  box-shadow:0 5px 25px #0002;
  font-size:14px;
  font-weight:bold;
}
.palette-picker>summary::-webkit-details-marker { display:none; }
.palette-picker>summary:focus-visible {
  outline:3px solid var(--wood);
  outline-offset:4px;
}
.palette-icon { display:flex; padding-right:3px; }
.palette-icon i {
  width:17px;
  height:17px;
  border-radius:50%;
  background:var(--green);
  border:1px solid var(--paper);
  margin-right:-4px;
}
.palette-icon i:nth-child(2) { background:var(--wood); }
.palette-icon i:nth-child(3) { background:var(--surface); border-color:var(--line); }
.palette-chevron { font-size:17px; }
.palette-picker[open] .palette-chevron { transform:rotate(180deg); }
.palette-panel {
  position:absolute;
  bottom:calc(100% + 12px);
  right:0;
  width:360px;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 125px);
  overflow:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:7px;
  box-shadow:0 12px 50px #0003;
  padding:22px;
}
.palette-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.palette-heading h2 { font-size:28px; margin-bottom:7px; }
.palette-heading p { font-size:14px; color:var(--muted); margin-bottom:20px; }
.palette-close {
  border:0;
  color:var(--ink);
  background:transparent;
  font-size:26px;
  line-height:1;
  padding:0;
  min-width:32px;
  min-height:32px;
}
.palette-panel fieldset { padding:0; margin:0; border:0; display:grid; gap:9px; }
.palette-panel legend {
  font-size:13px;
  font-weight:bold;
  padding:0 0 11px;
}
.palette-panel .visually-hidden { padding:0; }
.light-palettes { margin-top:15px; }
.light-palettes>summary {
  cursor:pointer;
  font-size:14px;
  padding:9px 0;
  color:var(--ink);
}
.light-palettes[open]>summary { margin-bottom:7px; }
.palette-panel .texture-options {
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--line);
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.texture-options label { position:relative; cursor:pointer; }
.texture-options input { position:absolute; opacity:0; width:1px; height:1px; }
.texture-options span {
  display:block;
  text-align:center;
  padding:10px 6px;
  border:1px solid var(--line);
  border-radius:3px;
  font-size:13px;
}
.texture-options input:checked+span { background:var(--surface); border-color:var(--ink); }
.texture-options input:focus-visible+span { outline:2px solid var(--wood); outline-offset:2px; }
.custom-background { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; font-size:14px; }
.custom-background small { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.custom-background input {
  width:45px;
  height:42px;
  padding:3px;
  flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:3px;
  cursor:pointer;
}
.palette-option {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:3px;
  cursor:pointer;
  font-size:14px;
  line-height:1.4;
}
.palette-option:has(input:checked) { border-color:var(--ink); background:var(--surface); }
.palette-option:focus-within { outline:2px solid var(--wood); outline-offset:2px; }
.palette-option input { accent-color:var(--wood); margin:0; width:16px; height:16px; flex-shrink:0; }
.palette-swatch {
  width:45px;
  height:31px;
  flex-shrink:0;
  border:1px solid #0002;
  border-radius:2px;
  background:linear-gradient(90deg,var(--swatch-dark) 0 40%,var(--swatch-paper) 40% 70%,var(--swatch-accent) 70%);
}
.palette-option small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.palette-footer { border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }
.palette-footer button { border:0; background:none; color:var(--ink); padding:5px 0; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
#palette-status { display:block; margin-top:5px; font-size:12px; color:var(--muted); }
@media(max-width:760px) {
  .palette-picker { right:16px; bottom:16px; }
  .palette-panel { padding:18px; }
  .footer { padding-bottom:100px; }
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:105px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 var(--sans)
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
img {
  display:block;
  max-width:100%;
  height:auto
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--wood);
  outline-offset:5px
}
::selection {
  background:var(--accent-on-dark);
  color:var(--green)
}
.wrap {
  max-width:1320px;
  width:calc(100% - 112px);
  margin-inline:auto
}
.topbar {
  background:var(--green);
  color:var(--on-dark);
  font-size:12px;
  letter-spacing:.045em
}
.topbar .wrap {
  display:flex;
  justify-content:space-between;
  padding-block:9px
}
.topbar a span {
  margin-left:14px
}
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:99px;
  gap:30px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:15px;
  flex-shrink:0
}
.brand-mark {
  position:relative;
  font-family:var(--serif);
  font-size:40px;
  font-weight:bold;
  letter-spacing:-5px;
  line-height:1;
  padding-right:10px
}
.brand-mark>span {
  font-size:49px;
  color:var(--wood);
  font-weight:normal;
  position:absolute;
  right:-4px;
  bottom:-5px
}
.brand-name {
  font-weight:bold;
  font-size:17px;
  letter-spacing:.12em;
  line-height:1.5;
  border-left:1px solid var(--line);
  padding-left:16px
}
.brand-name>span {
  display:block;
  font-weight:normal;
  font-size:10px;
  letter-spacing:.2em
}
nav {
  display:flex;
  gap:32px;
  align-items:center;
  font-size:14px
}
nav a:not(.nav-cta) {
  padding-block:12px
}
nav a:hover,.text-link:hover {
  color:var(--wood)
}
.nav-cta {
  border:1px solid var(--ink);
  padding:12px 20px
}
.nav-cta span {
  margin-left:26px
}
.nav-cta:hover {
  background:var(--green);
  color:var(--on-dark)
}
.hero {
  display:grid;
  grid-template-columns:1fr 1.14fr;
  gap:45px;
  align-items:stretch;
  padding-top:40px;
  padding-bottom:42px
}
.hero-copy {
  padding:47px 0 28px
}
.eyebrow {
  font-size:11px;
  font-weight:bold;
  letter-spacing:.16em;
  margin:0 0 23px;
  line-height:1.6
}
.hero .eyebrow {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:12px
}
.little-line {
  width:27px;
  height:1px;
  background:var(--wood)
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2 {
  font-family:var(--serif);
  font-weight:normal;
  letter-spacing:-.045em;
  line-height:1.07
}
h1 {
  font-size:clamp(56px,5.55vw,80px);
  margin-bottom:27px
}
h1 em,h2 em {
  font-weight:normal;
  color:var(--wood)
}
.hero-intro {
  max-width:380px;
  color:var(--muted);
  font-size:17px;
  line-height:1.8;
  margin-bottom:29px
}
.hero-actions {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:20px
}
.button {
  background:var(--green);
  color:var(--on-dark);
  padding:17px 23px;
  display:inline-flex;
  align-items:center;
  gap:25px;
  font-size:14px
}
.button:hover {
  background:var(--hover)
}
.text-link {
  font-size:14px;
  border-bottom:1px solid var(--ink);
  padding-bottom:6px;
  display:inline-flex;
  align-items:center;
  gap:24px
}
.hero-note {
  border-top:1px solid var(--line);
  margin-top:41px;
  padding-top:24px;
  display:flex;
  gap:16px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
  max-width:360px
}
.hero-note svg {
  width:39px;
  height:39px;
  color:var(--wood)
}
.hero-note strong {
  font-weight:normal;
  color:var(--ink)
}
.hero-image {
  position:relative;
  margin:0;
  min-height:592px;
  background:var(--surface);
  overflow:hidden
}
.hero-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:59% center
}
.hero-image figcaption {
  position:absolute;
  bottom:20px;
  left:20px;
  right:20px;
  background:var(--paper);
  padding:21px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--serif);
  font-size:21px;
  gap:16px
}
.hero-image small {
  display:block;
  font:9px/1.5 var(--sans);
  letter-spacing:.14em;
  margin-bottom:6px
}
.hero-image figcaption a {
  border:1px solid var(--line);
  border-radius:50%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex-shrink:0
}
.craft-strip {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-block:1px solid var(--line);
  padding:24px 0;
  font:17px var(--serif);
  gap:16px
}
.craft-strip span:nth-child(even) {
  color:var(--wood);
  font-size:22px
}
.section {
  padding-block:100px
}
.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:90px;
  margin-bottom:50px
}
.section-heading h2 {
  font-size:53px;
  margin-bottom:0
}
.section-heading>p,.section-heading>div>p:not(.eyebrow) {
  max-width:370px;
  color:var(--muted);
  margin-bottom:6px
}
.section-heading>div>.text-link {
  margin-top:18px
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.services-grid article {
  padding:34px 32px 33px 0
}
.services-grid article+article {
  border-left:1px solid var(--line);
  padding-left:32px
}
.service-number {
  display:block;
  color:var(--wood);
  font:italic 24px var(--serif);
  margin-bottom:25px
}
.services-grid h3 {
  font:27px/1.25 var(--serif);
  margin-bottom:15px
}
.services-grid p {
  color:var(--muted);
  font-size:15px;
  max-width:315px
}
.service-detail {
  display:block;
  font-size:9px;
  letter-spacing:.14em;
  margin-top:30px
}
.services-footer {
  margin:23px 0 0;
  color:var(--muted);
  font-size:13px
}
.services-footer a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px;
  margin-left:8px
}
.work-section {
  background:var(--surface)
}
.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:46px 32px
}
.project-photo {
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--surface)
}
.project-photo>img {
  width:100%;
  height:350px;
  object-fit:cover;
  transition:transform .5s ease
}
.project-photo:hover>img {
  transform:scale(1.025)
}
.project:nth-child(3) .project-photo img {
  object-position:center 43%
}
.photo-count {
  position:absolute;
  bottom:16px;
  right:16px;
  background:var(--paper);
  font-size:10px;
  letter-spacing:.08em;
  display:flex;
  gap:26px;
  padding:10px 14px
}
.photo-count span {
  font-size:16px;
  line-height:1
}
.project-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:21px;
  gap:12px
}
.project-caption .eyebrow {
  font-size:9px;
  margin-bottom:7px;
  color:var(--muted)
}
.project-caption h3 {
  font:26px/1.2 var(--serif);
  margin:0;
  letter-spacing:-.02em
}
.project-caption>span {
  font:italic 19px var(--serif);
  color:var(--muted)
}
.about-section {
  display:grid;
  grid-template-columns:.86fr 1fr;
  gap:110px;
  align-items:center
}
.about-photo {
  height:510px;
  position:relative;
  margin-right:20px
}
.about-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%
}
.photo-label {
  position:absolute;
  bottom:23px;
  right:-24px;
  background:var(--green);
  color:var(--on-dark);
  padding:18px 24px;
  font-size:10px;
  letter-spacing:.12em
}
.about-copy h2 {
  font-size:53px;
  margin-bottom:29px
}
.about-copy>p:not(.eyebrow) {
  color:var(--muted);
  font-size:15px
}
.about-copy>p.large-copy {
  font:23px/1.45 var(--serif);
  color:var(--ink)
}
.about-copy .text-link {
  margin-top:10px
}
.contact-section {
  background:var(--green);
  color:var(--on-dark);
  padding:84px 0 89px;
  position:relative;
  overflow:hidden
}
.contact-section:after {
  content:'';
  position:absolute;
  width:390px;
  height:390px;
  border:1px solid #d4bf9622;
  border-radius:50%;
  top:-190px;
  right:-120px;
  box-shadow:0 0 0 32px #d4bf960a,0 0 0 64px #d4bf960a,0 0 0 96px #d4bf960a;
  pointer-events:none
}
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px
}
.contact-section .eyebrow {
  color:var(--accent-on-dark)
}
.contact-section h2 {
  font-size:78px;
  margin-bottom:26px
}
.contact-section h2 em {
  color:var(--accent-on-dark)
}
.contact-section p:not(.eyebrow,.contact-label) {
  max-width:360px;
  color:var(--muted-on-dark);
  font-size:15px
}
.contact-details {
  padding-top:29px
}
.contact-label {
  font-size:10px;
  letter-spacing:.16em;
  color:var(--accent-on-dark);
  margin-bottom:10px
}
.phone {
  display:flex;
  justify-content:space-between;
  font:clamp(25px,3vw,42px)/1.3 var(--serif);
  padding-bottom:25px;
  border-bottom:1px solid #ffffff30;
  margin-bottom:35px
}
.phone span {
  font:27px var(--sans)
}
.email {
  display:flex;
  justify-content:space-between;
  font-size:19px;
  gap:12px;
  padding-bottom:26px;
  border-bottom:1px solid #ffffff30;
  overflow-wrap:anywhere
}
.contact-location {
  display:flex;
  gap:17px;
  margin-top:29px;
  align-items:center
}
.contact-location>span {
  font-size:32px;
  color:var(--accent-on-dark)
}
.contact-location p {
  margin:0
}
.contact-location p>span {
  font-size:12px
}
.footer {
  padding-block:42px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:center
}
.footer .brand-name {
  font-size:14px
}
.footer .brand-mark {
  font-size:33px
}
.footer .brand-mark>span {
  font-size:41px
}
.footer>p {
  font-size:13px;
  color:var(--muted);
  text-align:right;
  margin:0
}
.footer>a:not(.brand) {
  font-size:12px
}
.footer>small {
  text-align:right;
  font-size:11px;
  color:var(--muted)
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--paper);
  padding:12px;
  z-index:100
}
.skip-link:focus {
  top:12px
}
.menu-toggle {
  display:none;
  background:none;
  border:1px solid var(--line);
  padding:9px 12px;
  color:var(--ink);
  font-size:14px
}
dialog {
  width:min(1100px,94vw);
  max-height:94dvh;
  padding:0;
  border:0;
  background:var(--paper);
  color:var(--ink)
}
dialog::backdrop {
  background:#122119df;
  backdrop-filter:blur(4px)
}
body.gallery-open {
  overflow:hidden
}
.gallery-shell {
  padding:20px
}
.gallery-close {
  display:flex;
  gap:20px;
  align-items:center;
  background:transparent;
  border:0;
  padding:5px 7px 16px;
  margin-left:auto;
  font-size:14px;
  color:var(--ink)
}
.gallery-close span {
  font-size:28px;
  line-height:1
}
.gallery-media {
  position:relative;
  background:var(--surface)
}
.gallery-media>img {
  width:100%;
  height:min(61dvh,650px);
  object-fit:contain
}
.gallery-prev,.gallery-next {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:0;
  background:var(--paper);
  color:var(--ink);
  font-size:24px
}
.gallery-prev {
  left:10px
}
.gallery-next {
  right:10px
}
.gallery-info {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:22px
}
.gallery-info h2 {
  font-size:28px;
  letter-spacing:-.02em;
  margin-bottom:9px
}
.gallery-info p {
  font-size:14px;
  color:var(--muted);
  margin-bottom:10px;
  max-width:720px
}
.gallery-info a {
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:4px
}
#gallery-count {
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
@media(min-width:1500px) {
  .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:25px
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px)
  }
  nav {
    gap:21px
  }
  .hero {
    gap:28px
  }
  .hero-copy {
    padding-top:32px
  }
  h1 {
    font-size:62px
  }
  .hero-image {
    min-height:560px
  }
  .section-heading {
    gap:50px
  }
  .about-section {
    gap:60px
  }
  .contact-grid {
    gap:60px
  }
  .project-photo>img {
    height:300px
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:86px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .topbar {
    font-size:10px
  }
  .topbar .wrap>span {
    display:none
  }
  .topbar .wrap {
    justify-content:center
  }
  .header-inner {
    min-height:80px;
    flex-wrap:wrap;
    gap:0
  }
  .brand-mark {
    font-size:33px
  }
  .brand-mark>span {
    font-size:40px
  }
  .brand-name {
    font-size:14px
  }
  .brand-name>span {
    font-size:8px
  }
  .menu-toggle:not([hidden]) {
    display:block
  }
  nav {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    padding:12px 0 18px;
    gap:10px 24px;
    font-size:13px
  }
  nav.menu-ready {
    display:none
  }
  nav.menu-ready.is-open {
    display:flex
  }
  nav .nav-cta {
    padding:8px 14px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:20px;
    gap:28px;
    padding-bottom:30px
  }
  .hero-copy {
    padding:15px 0 0
  }
  .hero .eyebrow {
    margin-bottom:21px;
    font-size:9px
  }
  h1 {
    font-size:clamp(54px,11vw,75px);
    line-height:1.03;
    margin-bottom:21px
  }
  .hero-intro {
    max-width:440px;
    font-size:16px;
    margin-bottom:24px
  }
  .hero-actions {
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:20px
  }
  .button {
    font-size:13px;
    padding:16px 19px;
    gap:17px
  }
  .hero-note {
    margin-top:26px;
    padding-top:20px;
    max-width:none
  }
  .hero-image {
    height:390px;
    min-height:0
  }
  .hero-image>img {
    object-position:center
  }
  .hero-image figcaption {
    left:12px;
    right:12px;
    bottom:12px;
    padding:16px;
    font-size:19px
  }
  .craft-strip {
    display:grid;
    grid-template-columns:1fr 1fr;
    font-size:16px;
    gap:16px;
    padding:22px 0
  }
  .craft-strip span:nth-child(even) {
    display:none
  }
  .section {
    padding-block:65px
  }
  .section-heading {
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:33px
  }
  .section-heading h2,.about-copy h2 {
    font-size:43px
  }
  .section-heading>p,.section-heading>div>p:not(.eyebrow) {
    max-width:100%;
    font-size:15px
  }
  .eyebrow {
    margin-bottom:17px;
    font-size:10px
  }
  .services-grid {
    grid-template-columns:1fr
  }
  .services-grid article,.services-grid article+article {
    border-left:0;
    padding:25px 0;
    position:relative;
    padding-left:45px
  }
  .services-grid article+article {
    border-top:1px solid var(--line)
  }
  .service-number {
    position:absolute;
    left:0;
    top:27px;
    font-size:20px
  }
  .services-grid h3 {
    font-size:25px
  }
  .services-grid p {
    max-width:none;
    font-size:15px
  }
  .service-detail {
    margin-top:19px
  }
  .services-footer a {
    display:inline-block;
    margin:8px 0 0
  }
  .project-grid {
    gap:31px;
    grid-template-columns:1fr
  }
  .project-photo>img {
    height:300px
  }
  .project-caption h3 {
    font-size:25px
  }
  .about-section {
    grid-template-columns:1fr;
    gap:45px
  }
  .about-photo {
    height:400px;
    margin-right:20px
  }
  .about-photo img {
    object-position:center 32%
  }
  .photo-label {
    right:-20px
  }
  .about-copy>p:not(.eyebrow) {
    font-size:16px
  }
  .contact-section {
    padding:62px 0
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .contact-section h2 {
    font-size:66px
  }
  .contact-details {
    padding-top:0
  }
  .phone {
    font-size:36px
  }
  .email {
    font-size:18px
  }
  .footer {
    grid-template-columns:1fr;
    gap:21px;
    padding-block:34px
  }
  .footer>p,.footer>small {
    text-align:left
  }
  .footer>p {
    grid-row:2
  }
  .gallery-shell {
    padding:12px
  }
  .gallery-media>img {
    height:48dvh
  }
  .gallery-info {
    padding:18px 4px 5px;
    gap:10px
  }
  .gallery-info h2 {
    font-size:23px
  }
  .gallery-info p {
    font-size:13px
  }
  .gallery-prev,.gallery-next {
    width:40px;
    height:44px
  }
  .gallery-prev {
    left:3px
  }
  .gallery-next {
    right:3px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important
  }
}
@media(max-width:760px) {
  .footer { padding-bottom:100px; }
}

/* Lightweight background finishes: no image downloads or extra JavaScript. */
:root { --background-finish:none; }
:root[data-texture="grain"] {
  --background-finish:repeating-linear-gradient(94deg,transparent 0 3px,#88888808 3px 4px,transparent 4px 9px,#88888806 9px 11px);
}
:root[data-texture="linen"] {
  --background-finish:repeating-linear-gradient(0deg,transparent 0 3px,#8888880a 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,#8888880a 3px 4px);
}
:root[data-texture="glow"] {
  --background-finish:radial-gradient(ellipse at 10% 15%,color-mix(in srgb,var(--wood) 8%,transparent),transparent 65%),radial-gradient(ellipse at 90% 85%,#00000012,transparent 65%);
}
body,.work-section { background-image:var(--background-finish); }

/* Layout previews share the same content, galleries and colour tokens. */
.palette-panel .layout-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.layout-options label { position:relative; cursor:pointer; min-width:0; }
.layout-options input { position:absolute; opacity:0; width:1px; height:1px; }
.layout-options label>span { display:block; height:100%; padding:8px; border:1px solid var(--line); border-radius:4px; }
.layout-options input:checked+span { border-color:var(--wood); background:var(--surface); }
.layout-options input:focus-visible+span { outline:2px solid var(--wood); outline-offset:2px; }
.layout-options strong { display:block; font-size:12px; margin-top:9px; line-height:1.4; }
.layout-options small { display:block; font-size:11px; line-height:1.45; margin-top:4px; color:var(--muted); }
.layout-diagram { height:40px; display:grid; gap:4px; border-top:3px solid var(--ink); padding-top:5px; opacity:.85; }
.layout-diagram i { display:block; background:var(--wood); border-radius:1px; }
.diagram-classic { grid-template-columns:1fr 1fr; }
.diagram-classic i:first-child { background:repeating-linear-gradient(0deg,transparent 0 5px,var(--ink) 5px 7px); }
.diagram-photo { grid-template-columns:1fr; }
.diagram-photo i { background:linear-gradient(90deg,var(--ink),var(--wood)); }
.diagram-gallery { grid-template-columns:2fr 1fr 1fr; }
.diagram-gallery i:nth-child(2) { opacity:.7; }
.diagram-gallery i:nth-child(3) { opacity:.45; }
.layout-status { font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); padding:10px 0 15px; margin-bottom:18px; }
.hero-side,.hero-controls { display:none; }

/* Photo hero: one edge-to-edge project with a manual thumbnail selector. */
[data-layout="photo"] .hero {
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:none;
  min-height:610px;
  min-height:max(610px,calc(100svh - 139px));
  display:flex;
  align-items:center;
  padding:50px max(56px,calc((100vw - 1320px)/2)) 172px;
  margin:0;
  overflow:hidden;
  color:#fff9ed;
  background:#18241e;
}
[data-layout="photo"] .hero-image { position:absolute; inset:0; z-index:-2; min-height:0; height:100%; }
[data-layout="photo"] .hero-image>img { object-position:center 52%; }
[data-layout="photo"] .hero-image>img[data-project="staircase"] { object-position:center 42%; }
[data-layout="photo"] .hero::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,#07150fdd 0%,#07150f9c 42%,#07150f16 78%),linear-gradient(0deg,#07150fd9,transparent 45%);
  pointer-events:none;
}
[data-layout="photo"] .hero-copy { max-width:670px; padding:0; }
[data-layout="photo"] .hero h1 { font-size:clamp(62px,6.4vw,94px); margin-bottom:23px; }
[data-layout="photo"] .hero h1 em { color:#f0c793; }
[data-layout="photo"] .hero .eyebrow { color:#fff9ed; }
[data-layout="photo"] .hero .little-line { background:#f0c793; }
[data-layout="photo"] .hero-intro { color:#fff9ed; max-width:425px; text-shadow:0 1px 8px #0006; }
[data-layout="photo"] .hero-actions { flex-direction:row; align-items:center; flex-wrap:wrap; }
[data-layout="photo"] .hero .button { background:#f6efe1; color:#20372b; }
[data-layout="photo"] .hero .button:hover { background:#e8d2b1; }
[data-layout="photo"] .hero .text-link { color:#fff9ed; border-color:#fff9ed; }
[data-layout="photo"] .hero-note { display:none; }
[data-layout="photo"] .hero-image figcaption {
  top:auto; bottom:32px; left:max(56px,calc((100vw - 1320px)/2)); right:auto;
  width:min(390px,35%); background:#10231be6; color:#fff9ed; padding:15px 18px; font-size:19px;
  z-index:2;
}
/* Keep the caption link above the decorative overlay. */
[data-layout="photo"] .hero-image { z-index:0; }
[data-layout="photo"] .hero::before { z-index:1; }
[data-layout="photo"] .hero-copy,[data-layout="photo"] .hero-controls { position:relative; z-index:2; }
[data-layout="photo"] .hero-image figcaption { z-index:3; }
[data-layout="photo"] .hero::before { pointer-events:none; }
[data-layout="photo"] .hero-controls {
  display:block; position:absolute; right:max(56px,calc((100vw - 1320px)/2)); bottom:27px; width:370px;
}
.hero-controls>p { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.13em; margin-bottom:10px; color:#fff9ed; }
.hero-thumbnails { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.hero-thumbnails button { position:relative; background:#12251c; border:2px solid transparent; padding:0; text-align:left; color:#fff; }
.hero-thumbnails button[aria-pressed="true"] { border-color:#f0c793; }
.hero-thumbnails img { width:100%; height:68px; object-fit:cover; }
.hero-thumbnails span { display:block; padding:5px 6px; font-size:11px; }

/* Gallery first: a compact introduction and three immediately visible projects. */
[data-layout="gallery"] .hero { grid-template-columns:2fr 1fr 1fr; gap:18px; padding:28px 0 30px; }
[data-layout="gallery"] .hero-copy { grid-column:1/-1; display:grid; grid-template-columns:1.2fr 1fr; gap:0 40px; padding:0 0 9px; align-items:center; }
[data-layout="gallery"] .hero .eyebrow { grid-column:1; margin-bottom:12px; }
[data-layout="gallery"] .hero h1 { grid-column:1; grid-row:2/4; font-size:clamp(40px,4.4vw,65px); margin:0; }
[data-layout="gallery"] .hero-intro { grid-column:2; grid-row:1/3; max-width:420px; font-size:15px; margin:0 0 14px; }
[data-layout="gallery"] .hero-actions { grid-column:2; grid-row:3; flex-direction:row; flex-wrap:wrap; align-items:center; gap:20px; }
[data-layout="gallery"] .hero-actions .text-link { display:none; }
[data-layout="gallery"] .hero-note { display:none; }
[data-layout="gallery"] .hero-image { min-height:0; height:clamp(260px,43svh,430px); }
[data-layout="gallery"] .hero-image figcaption { bottom:12px; left:12px; right:12px; padding:13px; font-size:18px; }
[data-layout="gallery"] .hero-image figcaption small { display:none; }
[data-layout="gallery"] .hero-side { display:contents; }
.hero-side>a { position:relative; display:block; overflow:hidden; min-width:0; background:var(--surface); }
.hero-side img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.hero-side>a>span { position:absolute; bottom:12px; left:12px; right:12px; padding:13px 10px; font-size:13px; background:var(--paper); display:flex; justify-content:space-between; align-items:center; gap:8px; }
[data-layout="gallery"] .craft-strip { padding:18px 0; }
[data-layout="gallery"] .section { padding-block:65px; }
[data-layout="gallery"] .project-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
[data-layout="gallery"] .project-photo>img { height:260px; }
[data-layout="gallery"] .project-caption h3 { font-size:22px; }
[data-layout="gallery"] .project-caption>span { display:none; }
@media(max-width:1100px) {
  [data-layout="photo"] .hero { padding-inline:32px; }
  [data-layout="photo"] .hero-controls { right:32px; width:330px; }
  [data-layout="photo"] .hero-image figcaption { left:32px; }
  [data-layout="gallery"] .hero-actions .button { padding:13px 16px; font-size:13px; }
  [data-layout="gallery"] .project-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:760px) {
  [data-layout="photo"] .hero { min-height:max(590px,calc(100svh - 116px)); padding:34px 20px 180px; align-items:center; }
  [data-layout="photo"] .hero h1 { font-size:clamp(52px,12vw,75px); }
  [data-layout="photo"] .hero-intro { font-size:15px; max-width:360px; }
  [data-layout="photo"] .hero::before { background:linear-gradient(90deg,#07150fcc,#07150f55),linear-gradient(0deg,#07150fdd,transparent 65%); }
  [data-layout="photo"] .hero-image figcaption { bottom:126px; left:20px; width:auto; max-width:calc(100% - 40px); padding:8px 12px; font-size:14px; }
  [data-layout="photo"] .hero-image figcaption small { display:none; }
  [data-layout="photo"] .hero-image figcaption a { width:30px; height:30px; }
  [data-layout="photo"] .hero-controls { left:20px; right:20px; bottom:16px; width:auto; }
  .hero-thumbnails img { height:48px; }
  .hero-thumbnails span { font-size:10px; }
  [data-layout="gallery"] .hero { gap:10px; grid-template-columns:1.35fr 1fr 1fr; padding-top:22px; }
  [data-layout="gallery"] .hero-copy { display:block; padding-bottom:7px; }
  [data-layout="gallery"] .hero h1 { font-size:42px; margin-bottom:17px; }
  [data-layout="gallery"] .hero h1 br { display:none; }
  [data-layout="gallery"] .hero-intro { display:none; }
  [data-layout="gallery"] .hero .eyebrow { font-size:9px; margin-bottom:14px; }
  [data-layout="gallery"] .hero-image { height:250px; }
  [data-layout="gallery"] .hero-image figcaption { bottom:0; left:0; right:0; padding:8px; font-size:12px; min-height:58px; }
  [data-layout="gallery"] .hero-image figcaption a { width:30px; height:44px; border:0; flex-shrink:0; }
  .hero-side>a>span { bottom:0; left:0; right:0; padding:8px; font-size:11px; min-height:58px; }
  .hero-side>a>span>span { display:none; }
  [data-layout="gallery"] .project-grid { grid-template-columns:1fr; }
  [data-layout="gallery"] .section { padding-block:55px; }
}

/* Browse the full local photo archive without loading it all at once. */
[data-layout="photo"] .hero { padding-bottom:235px; }
[data-layout="photo"] .hero-controls { width:410px; }
.hero-browser-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.hero-browser-heading>label { color:#fff9ed; font-size:10px; letter-spacing:.12em; }
.hero-step-controls { display:flex; align-items:center; gap:9px; }
.hero-step-controls button { border:1px solid #fff6; color:#fff9ed; background:#10231bd9; width:44px; height:40px; font-size:22px; }
.hero-step-controls button:hover { background:#335442; }
#hero-slide-count { font-size:12px; min-width:64px; text-align:center; font-variant-numeric:tabular-nums; color:#fff9ed; }
#hero-project-select { width:100%; min-height:36px; padding:5px 10px; border:1px solid #ffffff60; border-radius:0; background:#10231b; color:#fff9ed; font:13px var(--sans); margin-bottom:9px; color-scheme:dark; }
#hero-project-select:focus-visible { outline:3px solid #f0c793; outline-offset:3px; }
.hero-thumbnails { grid-template-columns:repeat(4,minmax(0,1fr)); }
.hero-thumbnails button { min-width:0; }
.hero-thumbnails span { text-align:center; padding:2px 4px; }
#hero-load-status { font-size:12px; letter-spacing:0; margin:6px 0 0; }
#hero-load-status:empty { display:none; }
@media(max-width:1100px) and (min-width:761px) {
  [data-layout="photo"] .hero-controls { width:355px; }
}
@media(max-width:760px) {
  [data-layout="photo"] .hero { min-height:max(560px,calc(100svh - 116px)); padding-top:24px; padding-bottom:240px; }
  [data-layout="photo"] .hero-controls { width:auto; }
  [data-layout="photo"] .hero-image figcaption { bottom:197px; }
  [data-layout="photo"] .hero-intro,[data-layout="photo"] .hero-actions .text-link { display:none; }
  .hero-browser-heading>label { font-size:9px; }
  .hero-thumbnails img { height:44px; }
}

/* Wider framing: show the whole photograph with a soft edge-to-edge backdrop. */
[data-layout="photo"] .hero-image::before {
  content:'';
  position:absolute;
  inset:-24px;
  background-image:var(--hero-background,url('assets/images/shed-6.jpg'));
  background-size:cover;
  background-position:center;
  filter:blur(22px) brightness(.65);
  pointer-events:none;
}
[data-layout="photo"] .hero-image>#hero-project-image {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:var(--hero-photo-width,100%);
  height:var(--hero-photo-height,100%);
  max-width:none;
  object-fit:contain;
  object-position:center;
}