/* Open Yard — the native pack cut from the selected KC fence direction B. */
.site {
  --fence-royal: var(--accent, #012ba4);
  --fence-navy: var(--brand-quaternary, #001c70);
  --fence-daylight: var(--accent-teal, #e8f2ff);
  --fence-mist: var(--accent-gold, #f4f8ff);
  --fence-white: var(--brand-white, #fff);
  --fence-ink: var(--brand-black, #132039);
  --fence-muted: var(--brand-quinary, #52627d);
  --fence-line: var(--brand-free, #bfd4f4);
  width: 100%;
  max-width: none;
  overflow: clip;
  color: var(--fence-ink);
  background: var(--fence-white);
  font-family: var(--site-font-body, var(--face-open-sans)), Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site h1, .site h2, .site h3 {
  color: var(--fence-navy);
  font-family: var(--site-font-display, var(--face-merriweather)), Georgia, serif;
  font-weight: 700;
  letter-spacing: -.035em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.site button, .site input, .site select, .site textarea { font: inherit; }
.site a, .site button, .site summary { -webkit-tap-highlight-color: transparent; }
.site :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #ffcf4a;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--fence-navy);
}
.site-main { width: 100%; max-width: none; padding: 0; }
.site .site-main > * { padding-inline: 0; }
.site .site-main :is(h1, h2, h3) { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Shared chrome remains data-driven; this pack supplies its selected format. */
.site .site-header {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(170px, 230px) 1fr 380px;
  align-items: center;
  min-height: 92px;
  padding: 12px clamp(24px, 4vw, 72px);
  border: 0;
  border-bottom: 1px solid var(--fence-line);
  background: rgb(255 255 255 / 97%);
  box-shadow: none;
}
.site-header .site-brand { align-items: center; width: min(205px, 100%); min-height: 60px; padding: 0; }
.site-header .site-logo { width: 100%; max-width: 205px; max-height: 66px; object-fit: contain; object-position: left center; }
.site-header .site-nav { justify-self: center; padding-inline: 20px; }
.site-header .menu { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 34px); }
.site-header .menu > li > a,
.site-header .menu > .menu-heading > span {
  min-height: 44px;
  padding: 12px 0;
  border: 0;
  color: var(--fence-navy);
  background: transparent;
  font-size: .83rem;
  font-weight: 800;
  text-decoration: none;
}
.site-header .menu > li > a::after { height: 2px; background: var(--fence-royal); }
.site-header .site-menu { display: none; }
.site-footer {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 24px 48px;
  align-items: start;
  padding: 44px clamp(24px, 6vw, 90px);
  border: 0;
  background: var(--fence-mist);
  color: var(--fence-navy);
}
.site-footer .site-name { color: var(--fence-navy); font-family: var(--site-font-display, var(--face-merriweather)), Georgia, serif; }
.site-footer .site-footer-identity { display: inline-flex; align-items: center; gap: 14px; color: var(--fence-navy); font-family: var(--site-font-display, var(--face-merriweather)), Georgia, serif; font-weight: 700; text-decoration: none; }
.site-footer .site-footer-identity img { display: block; width: 105px; height: auto; max-height: 71px; object-fit: contain; }
.site-footer .site-footer-identity > span { display: grid; gap: 3px; }
.site-footer .site-footer-identity > span > span:last-child { color: var(--fence-muted); font-family: var(--site-font-body, var(--face-open-sans)), Arial, sans-serif; font-size: .72rem; font-weight: 700; }
.site-footer .menu { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.site .site-footer .menu > li > a,
.site .site-footer .menu > .menu-heading > span,
.site .site-footer .menu-children a { color: var(--fence-navy); font-weight: 700; }
.site-footer-contact, .site-footer-legal { grid-column: 1 / -1; color: var(--fence-muted); }

.fence-preview-status {
  width: 100%;
  padding: 8px max(22px, calc(50% - 620px));
  border-top: 1px solid var(--fence-line, #bfd4f4);
  color: var(--fence-muted);
  background: var(--fence-mist);
  font: 600 11px/1.3 Arial, sans-serif;
}

.fence-button,
.site .hero-action a,
.site .split-action a,
.site .cta-band-action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid var(--fence-royal);
  border-radius: 0;
  color: var(--fence-white);
  background: var(--fence-royal);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.fence-button:hover,
.site .split-action a:hover,
.site .cta-band-action a:hover { border-color: var(--fence-navy); background: var(--fence-navy); }
.fence-eyebrow { margin: 0; color: var(--fence-royal); font-size: .78rem; font-weight: 800; }
.fence-text-link { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; color: var(--fence-royal); font-weight: 800; text-underline-offset: 5px; }
.fence-text-link svg, .fence-service-ledger article button svg { width: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

/* Homepage opening: accepted B's pale copy rail, photograph and navy chooser. */
.fence-opening { display: grid; grid-template-columns: minmax(310px, .72fr) minmax(0, 1.55fr); background: var(--fence-mist); }
.fence-opening-copy {
  display: flex;
  min-height: min(720px, calc(100svh - 92px));
  flex-direction: column;
  justify-content: center;
  padding: clamp(58px, 7vw, 116px) clamp(32px, 5vw, 92px);
  border-right: 1px solid var(--fence-line);
  container-type: inline-size;
}
/* Sized against the rail, not the viewport: 18cqi keeps a twelve-letter Merriweather word inside it. */
.fence-opening-copy h1 { max-width: 8.5ch; min-width: min-content; margin: 22px 0 0; font-size: min(clamp(3.2rem, 5.1vw, 6.7rem), 18cqi); line-height: .98; }
.fence-opening-intro { max-width: 34rem; margin: 28px 0 0; color: #344661; font-size: clamp(1rem, 1.25vw, 1.25rem); }
.fence-opening-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.fence-established { max-width: 30rem; margin: auto 0 0; padding-top: 46px; color: var(--fence-muted); font-size: .76rem; font-weight: 700; }
.fence-yard-stage { display: grid; min-width: 0; grid-template-rows: minmax(560px, 1fr) auto; background: var(--fence-navy); }
.fence-stage-picture { position: relative; min-width: 0; overflow: hidden; background: var(--fence-navy); }
.fence-stage-picture > img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .18s ease; }
.fence-stage-caption { position: absolute; right: clamp(22px, 4vw, 58px); bottom: 25px; display: grid; justify-items: end; margin: 0; color: var(--fence-white); text-shadow: 0 2px 18px rgb(0 0 0 / 55%); }
.fence-stage-caption span { font-size: .72rem; font-weight: 700; }
.fence-stage-caption strong { max-width: 15ch; font-family: var(--site-font-display, var(--face-merriweather)), Georgia, serif; font-size: clamp(1.55rem, 2.7vw, 3.1rem); line-height: 1.04; text-align: right; }
.fence-style-chooser { display: grid; grid-template-columns: minmax(160px, .55fr) minmax(0, 2fr); gap: 22px; align-items: center; min-height: 150px; padding: 20px clamp(20px, 3vw, 46px); color: var(--fence-white); background: var(--fence-navy); }
.fence-style-chooser > p { max-width: 15ch; margin: 0; font-family: var(--site-font-display, var(--face-merriweather)), Georgia, serif; font-size: 1.15rem; line-height: 1.2; }
.fence-style-options { display: flex; min-width: 0; gap: 14px; overflow-x: auto; padding: 4px; scrollbar-width: thin; }
.fence-style-options button { display: grid; min-width: 168px; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; min-height: 78px; padding: 8px; border: 1px solid rgb(255 255 255 / 42%); border-radius: 0; color: var(--fence-white); background: transparent; text-align: left; cursor: pointer; }
.fence-style-options button[aria-pressed='true'] { border-color: var(--fence-white); color: var(--fence-navy); background: var(--fence-white); box-shadow: inset 0 0 0 2px var(--fence-white), inset 0 0 0 5px var(--fence-navy); }
.fence-style-thumb { display: block; width: 62px; height: 58px; overflow: hidden; }
.fence-style-thumb img { width: 100%; height: 100%; object-fit: cover; }

.fence-selected-story { grid-column: 1 / -1; display: grid; grid-template-columns: 8vw minmax(300px, .8fr) minmax(0, 1.3fr); min-height: 560px; background: var(--fence-white); }
.fence-selected-index { padding: 58px 0; border-right: 1px solid var(--fence-line); color: var(--fence-royal); font-size: .78rem; font-weight: 800; text-align: center; }
.fence-selected-words { display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(38px, 5.5vw, 94px); }
.fence-selected-words h2 { max-width: 9ch; margin: 16px 0 0; font-size: clamp(2.5rem, 4.3vw, 5.4rem); line-height: 1; }
.fence-selected-words > p:not(.fence-eyebrow) { max-width: 39rem; margin: 26px 0 0; color: var(--fence-muted); }
.fence-selected-words ul { display: grid; gap: 10px; margin: 26px 0 30px; padding: 0; list-style: none; color: var(--fence-navy); font-weight: 700; }
.fence-selected-words li::before { margin-right: 10px; color: var(--fence-royal); content: '—'; }
.fence-selected-words .fence-button { align-self: flex-start; }
.fence-selected-picture { min-width: 0; overflow: hidden; }
.fence-selected-picture img { width: 100%; height: 100%; object-fit: cover; }

.fence-service-ledger { grid-column: 1 / -1; padding: clamp(70px, 9vw, 140px) clamp(28px, 6vw, 110px); background: var(--fence-daylight); }
.fence-service-ledger-heading { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(300px, 1fr); gap: 40px 9vw; align-items: end; padding-bottom: 52px; border-bottom: 1px solid var(--fence-line); }
.fence-service-ledger-heading h2 { max-width: 11ch; margin: 0; font-size: clamp(2.7rem, 4.8vw, 5.8rem); line-height: 1; }
.fence-service-ledger-heading p { max-width: 54rem; margin: 0; color: var(--fence-muted); }
.fence-service-ledger article { display: grid; grid-template-columns: clamp(120px, 17vw, 250px) minmax(260px, 1fr) auto; gap: clamp(22px, 4vw, 60px); align-items: center; min-height: 190px; padding: 22px 0; border-bottom: 1px solid var(--fence-line); }
.fence-service-ledger-picture { height: 140px; overflow: hidden; }
.fence-service-ledger-picture img { width: 100%; height: 100%; object-fit: cover; }
.fence-service-ledger article h2 { margin: 0; font-size: clamp(1.45rem, 2vw, 2.4rem); }
.fence-service-ledger article p { max-width: 58rem; margin: 9px 0 0; color: var(--fence-muted); }
.fence-service-ledger article button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 0 4px; border: 0; border-bottom: 2px solid var(--fence-royal); color: var(--fence-royal); background: transparent; font-weight: 800; cursor: pointer; }

/* Project contact sheet and shared accessible dialog. */
.site .site-main > .fence-projects { padding: clamp(76px, 9vw, 140px) 0; background: var(--fence-white); }
.fence-projects-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 50px; align-items: end; margin-bottom: 55px; padding-inline: clamp(26px, 6vw, 104px); }
.fence-projects-heading h2 { max-width: 11ch; margin: 13px 0 0; font-size: clamp(2.8rem, 4.7vw, 5.5rem); line-height: 1; }
.fence-projects-heading > div > p:last-child:not(.fence-eyebrow) { max-width: 44rem; color: var(--fence-muted); }
.fence-project-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.fence-project-filters button { min-height: 40px; padding: 8px 15px; border: 1px solid var(--fence-royal); border-radius: 999px; color: var(--fence-royal); background: var(--fence-white); font-size: .75rem; font-weight: 800; cursor: pointer; }
.fence-project-filters button[aria-pressed='true'] { color: var(--fence-white); background: var(--fence-royal); }
.fence-project-grid { display: grid; grid-auto-columns: clamp(310px, 39vw, 620px); grid-auto-flow: column; gap: 20px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 clamp(24px, 6vw, 104px) 22px; scroll-snap-type: x mandatory; scrollbar-color: var(--fence-royal) var(--fence-daylight); scrollbar-width: thin; }
.fence-project-card { display: grid; grid-template-rows: clamp(320px, 32vw, 480px) auto; padding: 0; border: 0; color: var(--fence-navy); background: transparent; text-align: left; cursor: zoom-in; scroll-snap-align: start; }
.fence-project-picture { display: block; height: auto; overflow: hidden; background: var(--fence-mist); }
.fence-project-picture img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.fence-project-card:hover img { transform: scale(1.025); }
.site .fence-project-card .fence-project-meta { position: static; display: flex; justify-content: space-between; gap: 14px; padding: 12px 0 24px; color: var(--fence-navy); background: transparent; }
.fence-project-meta strong { font-family: var(--site-font-display, var(--face-merriweather)), Georgia, serif; font-size: 1.05rem; }
.fence-project-meta small { color: var(--fence-muted); text-align: right; }
.fence-lightbox { width: min(1180px, 94vw); max-width: none; height: min(830px, 90vh); max-height: none; padding: 0; border: 0; color: var(--fence-white); background: var(--fence-navy); }
.fence-lightbox::backdrop { background: rgb(0 12 52 / 83%); backdrop-filter: blur(6px); }
.fence-lightbox-panel { display: grid; height: 100%; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .65fr); }
.fence-lightbox-picture { min-width: 0; overflow: hidden; }
.fence-lightbox-picture img { width: 100%; height: 100%; object-fit: contain; background: #000d3d; }
.fence-lightbox-caption { display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; }
.fence-lightbox-caption p { margin: 0; font-size: .8rem; font-weight: 800; }
.fence-lightbox-caption h2 { margin: 12px 0 0; color: var(--fence-white); font-size: clamp(1.9rem, 3vw, 3.4rem); line-height: 1.05; }
.fence-lightbox-close { position: absolute; z-index: 2; top: 18px; right: 18px; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / 45%); color: var(--fence-white); background: var(--fence-navy); font-size: 2rem; cursor: pointer; }

/* FAQ is a navy reading floor, never a row of white cards. */
.site .faq { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.3fr); gap: 8vw; padding: clamp(78px, 10vw, 150px) clamp(28px, 7vw, 120px); background: var(--fence-navy); color: var(--fence-white); }
.site .faq > h2 { max-width: 12ch; margin: 0; color: var(--fence-white); font-size: clamp(2.7rem, 4.7vw, 5.3rem); line-height: 1; }
.site .faq-list { margin: 0; padding: 0; border-top: 1px solid rgb(255 255 255 / 25%); list-style: none; }
.site .faq-item { border-bottom: 1px solid rgb(255 255 255 / 25%); }
.site .faq :is(.faq-details, .faq-item, .faq-question, .faq-answer) { background: transparent; box-shadow: none; }
.site .faq .faq-details { margin: 0; padding: 0; border: 0; border-radius: 0; }
.site .faq-question { position: relative; min-height: 70px; padding: 20px 52px 20px 0; color: var(--fence-white); font-family: var(--site-font-display, var(--face-merriweather)), Georgia, serif; font-size: 1.08rem; cursor: pointer; }
.site .faq-question::-webkit-details-marker { display: none; }
.site .faq-question::marker { content: ''; font-size: 0; }
.site .faq-question::after { position: absolute; right: 4px; width: auto; height: auto; margin: 0; border: 0; content: '+'; transform: none; transition: none; }
.site .faq-details[open] .faq-question::after { margin: 0; content: '−'; transform: none; }
.site .faq-answer { max-width: 66ch; padding: 0 38px 24px 0; color: #dbe7ff; }

.fence-service-area { display: inline-grid; width: 50%; min-height: 760px; vertical-align: top; grid-template-rows: auto 1fr; background: var(--fence-mist); }
.fence-service-area-words { padding: clamp(62px, 8vw, 120px) clamp(30px, 6vw, 90px); }
.fence-service-area h2 { max-width: 12ch; margin: 14px 0 0; font-size: clamp(2.6rem, 4.5vw, 5.2rem); line-height: 1; }
.fence-service-area-words > p:not(.fence-eyebrow) { max-width: 48rem; color: var(--fence-muted); }
.fence-place-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.fence-place-list span { padding: 7px 13px; border: 1px solid var(--fence-royal); border-radius: 999px; color: var(--fence-navy); background: var(--fence-white); font-size: .75rem; font-weight: 800; }
.fence-service-area-picture { min-height: 340px; overflow: hidden; }
.fence-service-area-picture img { width: 100%; height: 100%; object-fit: cover; }
.site-main > .fence-service-area:not(:has(+ .built-form-section)) { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; }

.site .built-form-section { display: inline-flex; width: 50%; min-height: 760px; flex-direction: column; justify-content: center; padding: clamp(62px, 8vw, 120px) clamp(30px, 6vw, 90px); vertical-align: top; background: var(--fence-white); }
.site .built-form-section h2 { max-width: 12ch; margin: 0; font-size: clamp(2.6rem, 4.5vw, 5.2rem); line-height: 1; }
.site .built-form-section-intro { max-width: 54rem; margin: 22px 0 30px; color: var(--fence-muted); }
.site .site-main .built-form { display: grid; max-width: none; margin: 24px 0 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; gap: 18px; background: transparent; }
.site .form-question, .site .built-form-field { gap: 7px; }
.site .built-form label, .site .form-question-label { color: var(--fence-navy); font-size: .78rem; font-weight: 800; }
.site .built-form :is(input, select, textarea) { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #8aabdf; border-radius: 0; color: var(--fence-ink); background: var(--fence-mist); }
.site .built-form textarea { min-height: 128px; resize: vertical; }
.site .built-form button[type='submit'] { min-height: 50px; padding: 12px 22px; border: 2px solid var(--fence-royal); border-radius: 0; color: var(--fence-white); background: var(--fence-royal); font-weight: 800; }
.built-form-preview-note { margin: 0; color: var(--fence-muted); font-size: .8rem; }

/* Interior pages: one strong opening, then distinct native rhythms. */
.fence-page-hero { display: grid; min-height: 620px; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.25fr); background: var(--fence-mist); }
.fence-page-hero-words { display: flex; flex-direction: column; justify-content: center; padding: clamp(70px, 9vw, 150px) clamp(32px, 7vw, 112px); }
.fence-page-hero h1 { max-width: 11ch; margin: 18px 0 0; font-size: clamp(3rem, 4.3vw, 5.4rem); line-height: .98; }
.fence-page-hero-words > p:not(.fence-eyebrow) { max-width: 42rem; margin: 28px 0; color: var(--fence-muted); font-size: 1.1rem; }
.fence-page-hero-picture { min-width: 0; overflow: hidden; }
.fence-page-hero-picture img { width: 100%; height: 100%; object-fit: cover; }
.fence-page-hero[data-layout='faq'] { color: var(--fence-white); background: var(--fence-navy); }
.fence-page-hero[data-layout='faq'] h1, .fence-page-hero[data-layout='faq'] .fence-eyebrow { color: var(--fence-white); }
.fence-page-hero[data-layout='faq'] .fence-page-hero-words > p:not(.fence-eyebrow) { color: #dbe7ff; }
.fence-page-hero[data-layout='thank-you'] { min-height: 520px; grid-template-columns: 1fr; }
.fence-page-hero[data-layout='thank-you'] .fence-page-hero-words { align-items: center; text-align: center; }
.fence-page-hero[data-layout='legal'] { min-height: 460px; grid-template-columns: minmax(320px, .8fr) minmax(0, .7fr); }

.site .split { display: grid; min-height: 560px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; background: var(--fence-white); }
.site .split-words { display: flex; flex-direction: column; justify-content: center; padding: clamp(64px, 8vw, 130px) clamp(32px, 7vw, 112px); }
.site .split h2 { max-width: 14ch; margin: 0; font-size: clamp(2.5rem, 4.2vw, 5rem); line-height: 1; }
.site .split-body { max-width: 66ch; color: var(--fence-muted); }
.site .split-picture { min-width: 0; min-height: 480px; overflow: hidden; }
.site .split-picture img { width: 100%; height: 100%; object-fit: cover; }
.site .split[data-side='right'] .split-picture { order: -1; }

.site .text { max-width: none; padding: clamp(62px, 8vw, 120px) clamp(30px, 12vw, 190px); background: var(--fence-mist); }
.site .text h2 { max-width: 18ch; margin: 0 0 24px; font-size: clamp(2rem, 3.5vw, 4.2rem); line-height: 1.06; }
.site .text .prose { max-width: 72ch; color: var(--fence-muted); font-size: 1.05rem; }
.site .text:nth-of-type(even) { background: var(--fence-white); }

.site .card-list { max-width: none; padding: clamp(64px, 8vw, 120px) clamp(28px, 7vw, 118px); background: var(--fence-daylight); }
.site .card-list > h2 { max-width: 14ch; margin: 0 0 44px; font-size: clamp(2.4rem, 4vw, 4.8rem); line-height: 1; }
.site .card-list .cards { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--fence-line); list-style: none; }
.site .card-list .card { display: grid; grid-template-columns: clamp(180px, 20vw, 280px) minmax(280px, 1fr) auto; grid-template-areas: 'picture title action' 'picture body action'; gap: 10px clamp(24px, 4vw, 60px); align-items: center; min-height: 110px; padding: 22px 0; border: 0; border-bottom: 1px solid var(--fence-line); border-radius: 0; background: transparent; box-shadow: none; }
.site .card-list .card-picture { grid-area: picture; width: 100%; height: 140px; overflow: hidden; }
.site .card-list .card-picture img { width: 100%; height: 100%; object-fit: cover; }
.site .card-list .card :is(h2, h3) { grid-area: title; min-width: 0; margin: 0; font-size: clamp(1.2rem, 1.8vw, 2rem); }
.site .card-list .card-body { grid-area: body; min-width: 0; margin: 0; color: var(--fence-muted); }
.site .card-list .card-action { grid-area: action; min-width: 0; margin: 0; }
.site .card-list .card-action a { color: var(--fence-royal); font-weight: 800; text-underline-offset: 5px; }
.site .card-list[data-align='rows'] .card { grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); grid-template-areas: 'title body' 'title action'; align-items: start; }
.site .card-list[data-align='rows'] .card h3 { font-family: var(--site-font-body, var(--face-open-sans)), Arial, sans-serif; font-size: 1rem; letter-spacing: 0; }

.site .cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 70px; align-items: center; max-width: none; padding: clamp(60px, 8vw, 115px) clamp(30px, 8vw, 130px); border: 0; background: var(--fence-navy); }
.site .cta-band h2 { max-width: 16ch; margin: 0; color: var(--fence-white); font-size: clamp(2.4rem, 4vw, 4.8rem); line-height: 1; }
.site .cta-band-body { max-width: 58rem; color: #dbe7ff; }
.site .cta-band-action a { border-color: var(--fence-white); color: var(--fence-navy); background: var(--fence-white); }

.site-main:has(> .fence-page-hero[data-layout='legal']) > .text { max-width: 920px; margin-inline: auto; padding: 42px clamp(24px, 7vw, 96px); background: var(--fence-white); }
.site-main:has(> .fence-page-hero[data-layout='legal']) > .text + .text { border-top: 1px solid var(--fence-line); }
.site-main:has(> .fence-page-hero[data-layout='legal']) > .text h2 { font-size: clamp(1.5rem, 2.4vw, 2.4rem); }

/* One action pair per page; on desktop it completes the standard header. */
.fence-mobile-actions { position: absolute; z-index: 60; top: 20px; right: clamp(24px, 4vw, 72px); display: flex; gap: 12px; align-items: center; }
.fence-mobile-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; color: var(--fence-navy); font-size: .82rem; font-weight: 800; text-decoration: none; }
.fence-mobile-actions a:last-child { color: var(--fence-white); background: var(--fence-royal); }
.fence-mobile-actions svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.fence-phone-mobile { display: none; }

@media (max-width: 1120px) {
  .site .site-header { grid-template-columns: minmax(160px, 210px) 1fr 320px; padding-inline: 24px; }
  .site-header .menu { gap: 16px; }
  .fence-opening { grid-template-columns: minmax(290px, .85fr) minmax(0, 1.35fr); }
  .fence-yard-stage { grid-template-rows: minmax(480px, 1fr) auto; }
  .fence-selected-story { grid-template-columns: 70px minmax(280px, .9fr) minmax(0, 1.1fr); }
  .fence-mobile-actions { right: 24px; }
}

@media (max-width: 860px) {
  .site { padding-bottom: 70px; }
  .site .site-header { position: relative; display: flex; justify-content: space-between; min-height: 74px; padding: 10px 16px; }
  .site-header .site-brand { width: min(175px, 58vw); min-height: 52px; }
  .site-header .site-logo { max-width: 175px; max-height: 54px; }
  .site-header .site-menu { display: block; order: 2; }
  .site-header .site-menu > summary { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--fence-royal); color: var(--fence-navy); background: var(--fence-white); }
  .site-header .site-nav { position: absolute; z-index: 20; top: 73px; right: 0; left: 0; display: none; padding: 16px; background: var(--fence-white); box-shadow: 0 18px 24px rgb(0 28 112 / 16%); }
  .site-header .site-menu[open] ~ .site-nav { display: block; }
  .site-header .menu { display: grid; gap: 0; }
  .site-header .menu > li > a { width: 100%; padding: 14px 8px; border-bottom: 1px solid var(--fence-line); }

  .fence-opening { display: flex; flex-direction: column; }
  .fence-yard-stage { order: -1; display: block; }
  .fence-stage-picture { height: min(102vw, 560px); }
  .fence-stage-picture > img { object-position: center; }
  .fence-stage-caption { right: auto; bottom: 24px; left: 20px; justify-items: start; }
  .fence-stage-caption strong { max-width: 11ch; font-size: clamp(2rem, 8.5vw, 3.1rem); text-align: left; }
  .fence-style-chooser { display: block; min-height: 238px; padding: 34px 16px 38px; }
  .fence-style-chooser > p { max-width: 20ch; font-size: 1.22rem; }
  .fence-style-options { margin-top: 30px; padding-bottom: 4px; }
  .fence-style-options button { min-width: min(280px, 78vw); }
  .fence-opening-copy { min-height: auto; padding: 56px 22px 64px; border-right: 0; }
  .fence-opening-copy h1 { font-size: min(clamp(3rem, 14vw, 5rem), 18cqi); }
  .fence-established { margin-top: 38px; padding-top: 0; }
  .fence-selected-story { display: flex; min-height: auto; flex-direction: column; }
  .fence-selected-index { padding: 28px 22px 0; border: 0; text-align: left; }
  .fence-selected-words { padding: 36px 22px 50px; }
  .fence-selected-words h2 { font-size: clamp(2.5rem, 11vw, 4rem); }
  .fence-selected-picture { min-height: 390px; }
  .fence-service-ledger { padding: 70px 22px; }
  .fence-service-ledger-heading { display: block; }
  .fence-service-ledger-heading h2 { font-size: clamp(2.7rem, 11vw, 4.4rem); }
  .fence-service-ledger-heading p { margin-top: 25px; }
  .fence-service-ledger article { grid-template-columns: 105px minmax(0, 1fr); gap: 18px; }
  .fence-service-ledger-picture { height: 105px; }
  .fence-service-ledger article button { grid-column: 2; justify-self: start; }

  .fence-projects { padding: 72px 16px; }
  .fence-projects-heading { display: block; }
  .fence-projects-heading h2 { font-size: clamp(2.7rem, 11vw, 4.4rem); }
  .fence-project-filters { margin-top: 30px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .fence-project-filters button { flex: none; }
  .fence-project-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .fence-project-card, .fence-project-card:nth-child(n) { width: 82vw; flex: 0 0 82vw; scroll-snap-align: start; }
  .site .fence-project-card .fence-project-picture { min-height: 0; height: 100%; max-height: 100%; overflow: hidden; }
  .site .fence-project-card .fence-project-meta { display: grid; }
  .fence-project-meta small { text-align: left; }
  .fence-lightbox { width: 100vw; height: 100dvh; }
  .fence-lightbox-panel { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .fence-lightbox-caption { padding: 24px; }

  .site .faq { display: block; padding: 72px 22px; }
  .site .faq > h2 { margin-bottom: 42px; font-size: clamp(2.6rem, 11vw, 4.2rem); }
  .site .faq-question { min-height: 64px; padding-right: 38px; }

  .fence-service-area, .site .built-form-section { display: flex; width: 100%; min-height: auto; flex-direction: column; }
  .site-main > .fence-service-area:not(:has(+ .built-form-section)) { display: flex; grid-template-columns: none; }
  .fence-service-area-words, .site .built-form-section { padding: 72px 22px; }
  .fence-service-area h2, .site .built-form-section h2 { font-size: clamp(2.6rem, 11vw, 4.2rem); }
  .fence-service-area-picture { min-height: 420px; }

  .fence-page-hero, .fence-page-hero[data-layout='legal'] { display: flex; min-height: auto; flex-direction: column-reverse; }
  .fence-page-hero-picture { height: min(85vw, 540px); }
  .fence-page-hero-words { padding: 62px 22px 72px; }
  .fence-page-hero h1 { font-size: clamp(3rem, 13vw, 5rem); }
  .fence-page-hero[data-layout='contact'] .fence-button { display: none; }
  .site .split { display: flex; min-height: auto; flex-direction: column; }
  .site .split[data-side='right'] .split-picture { order: initial; }
  .site .split-words, .site .text, .site .card-list, .site .cta-band { padding: 64px 22px; }
  .site .split-picture { min-height: 390px; }
  .site .card-list[data-align] .card { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 10px; }
  .site .card-list .card :is(h2, h3), .site .card-list .card-picture, .site .card-list .card-body, .site .card-list .card-action { grid-area: auto; grid-row: auto; grid-column: auto; }
  .site .card-list .card-picture { width: 100%; height: 240px; }
  .site .cta-band { display: block; }
  .site .cta-band-action { margin-top: 30px; }

  .fence-mobile-actions { position: fixed; z-index: 900; top: auto; right: 8px; bottom: 8px; left: 8px; display: grid; grid-template-columns: minmax(100px, .45fr) minmax(180px, 1fr); gap: 8px; padding: 0; background: var(--fence-white); box-shadow: 0 -10px 28px rgb(0 28 112 / 18%); }
  .fence-mobile-actions a { min-height: 48px; border: 2px solid var(--fence-royal); color: var(--fence-royal); background: var(--fence-white); }
  .fence-mobile-actions a:last-child { color: var(--fence-white); background: var(--fence-royal); }
  .fence-phone-mobile { display: inline; }
  .fence-phone-desktop { display: none; }
  .site-footer { display: block; padding: 44px 22px 90px; }
  .site-footer .site-nav { margin-top: 28px; }
  .site-footer .menu { display: grid; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .site { scroll-behavior: auto; }
  .fence-stage-picture > img, .fence-project-picture img { transition: none; }
}