/* Shared architectural backdrop. A fixed image layer also works on mobile Safari
   without background-attachment:fixed or a continuously animated canvas. */
:root {
  --paper: #f4efe5;
  --ink: #2c3028;
  --muted: #575b50;
  --gold: #9b7b4c;
  --line: #9c896c40;
  --header-height: 104px;
}
html { scroll-padding-top: calc(var(--header-height) + 20px); background: var(--paper); }
body { isolation: isolate; background: transparent; }
.architecture-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #eee6d8;
  contain: strict;
}
.architecture-background picture,
.architecture-background img { display: block; width: 100%; height: 100%; }
.architecture-background img { object-fit: cover; object-position: 50% 57%; }
.architecture-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #f8f4ecb8, #f8f4ec78 60%, #f8f4ec99);
}
main { background: #f7f3eb70; }
.editorial-arrival { background: #f8f4ec20; background-image: none; }
.services, .contact, .interior-trades, .sport-outdoor,
.portfolio-page .gallery-cta, .gallery-cta, .config-promo {
  background: #eee9dd69;
  background-image: none;
}
.craft, .interior-making, .exhibition-portal {
  background: #2c352be8;
  background-image: none;
  color: #f7f2e8;
}
.footer { background: #252e24ed; }
.team-card, .catalog-card, .budget-hub-card, .config-preview,
.planner-variants, .inquiry-cart, .login-card, .studio-record, .intro-note {
  background-color: #f7f2e5d9;
  background-image: none;
  border-color: #a9957245;
  box-shadow: 0 8px 28px #4b3b2310;
}
.contact-form input, .contact-form select, .contact-form textarea {
  background-color: #fbf8f0c7;
  background-image: none;
  padding-left: 10px;
  padding-right: 10px;
}
/* The brand remains above scrolling content on every page. 64×66 and 58×60
   were the previous desktop/mobile sizes; both are enlarged by exactly 20%. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  background: #f5f0e6df;
  background-image: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #bba78952;
  box-shadow: 0 4px 20px #4d3b2510;
}
.brand { flex-shrink: 0; position: relative; z-index: 1; }
.brand img {
  width: 76.8px;
  height: 79.2px;
  object-fit: contain;
  filter: drop-shadow(-1px -1px 1px #fff9) drop-shadow(1px 3px 2px #5f482b38);
}
.menu-toggle { min-height: 48px; cursor: pointer; }
.site-header a, .site-header button { -webkit-tap-highlight-color: transparent; }

/* A small, square drafting key: a raised face with a cross-hatched plus sign.
   It is decorative; the existing label and the entire control remain active. */
.craft-mark {
  --mark-size: 32px;
  display: inline-grid;
  place-items: center;
  position: relative;
  flex: 0 0 var(--mark-size);
  width: var(--mark-size);
  height: var(--mark-size);
  margin-left: 2px;
  vertical-align: middle;
  border: 1px solid #97856588;
  border-radius: 2px;
  background: linear-gradient(145deg, #cabda4, #e5d9c4);
  box-shadow: inset 0 1px 3px #4a392c36, 0 1px 0 #fff8;
}
.mark-face {
  display: grid;
  place-items: center;
  position: relative;
  width: 82%;
  height: 82%;
  border: 1px solid #aa96755c;
  border-radius: 1px;
  background: linear-gradient(145deg, #fcf8ec, #ddcdae);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9d896b, 0 3px 4px #46341c38;
  transform: translateY(-1px);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.mark-face::before {
  content: "";
  width: 63%;
  height: 63%;
  clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);
  background: repeating-linear-gradient(135deg,#665638 0 1px,transparent 1px 3px),
              repeating-linear-gradient(45deg,#88724f99 0 .7px,transparent .7px 3px),#c6b28a;
}
@media (hover: hover) {
  :is(a,button,summary):hover .mark-face {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9d896b, 0 5px 6px #46341c30;
  }
}
.mark-pressed .mark-face,
:is(a,button,summary):active .mark-face {
  transform: translateY(2px) scale(.94);
  background: linear-gradient(145deg, #deceb0, #eee2cb);
  box-shadow: inset 0 2px 3px #59432c3b, 0 0 0 #9d896b;
  transition-duration: 70ms;
}
.mark-released .mark-face { transition-duration: 200ms; }
.plan-links .craft-mark, .rental-logo-link .craft-mark { --mark-size: 25px; }
.plan-subnav .craft-mark { display: none; }
.mobile-contact .craft-mark, .record-actions .craft-mark { --mark-size: 24px; }
.lightbox-nav .craft-mark { --mark-size: 31px; }
.project-open, .portfolio-page .gallery-grid .project-open,
.signature-arrow, .collection-open, .discover-icon {
  border-radius: 2px;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.project-open .craft-mark { --mark-size: 36px; margin: 0; }
.signature-arrow .craft-mark { --mark-size: 40px; }
.plan-close { border-radius: 2px; min-height: 44px; min-width: 44px; }
:is(a,button,summary):focus-visible {
  outline: 2px solid #80633b;
  outline-offset: 5px;
}
:is(a,button,summary):focus-visible .craft-mark { outline: 1px solid #80633b; outline-offset: 2px; }
:is(button:disabled,a[aria-disabled=true]) .mark-face { transform: none; box-shadow: inset 0 1px 0 #fff8; }
@media (max-width: 760px) {
  :root { --header-height: 88px; }
  .architecture-background img { object-position: 53% 50%; }
  .architecture-background::after { background: #f8f4ec94; }
  main { background: #f7f3eb66; }
  .brand img { width: 69.6px; height: 72px; }
  .craft-mark { --mark-size: 30px; }
  .menu-toggle { gap: 10px; padding: 8px 0 8px 12px; }
  .site-header { gap: 10px; }
  .desktop-nav { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mark-face { transition: none; }
}
@media print {
  .architecture-background { display: none; }
  main { background: white; }
  .site-header { position: static; box-shadow: none; }
}

/* Freestanding oak engraving replaces the drafting key, retaining its tactile travel. */
.craft-mark{--mark-size:36px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.mark-face{width:100%;height:100%;border:0;border-radius:0;background:transparent url('/assets/tree-slice-button.webp') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 2px 1px #50371c50);transition:transform .16s ease,filter .16s ease}
.mark-face::before{display:none}
@media(hover:hover){:is(a,button,summary):hover .mark-face{transform:translateY(-2px) rotate(-3deg);box-shadow:none;filter:drop-shadow(0 4px 2px #50371c45)}}
.mark-pressed .mark-face,:is(a,button,summary):active .mark-face{transform:translateY(2px) scale(.91) rotate(2deg);background:transparent url('/assets/tree-slice-button.webp') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 1px #50371c80)}
:is(button:disabled,a[aria-disabled=true]) .mark-face{box-shadow:none}
#architecture-motion{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none}
.architecture-toggle{position:fixed;right:18px;bottom:18px;z-index:45;min-height:44px;padding:10px 15px;border:1px solid #b6a484;border-radius:3px;background:#f7f1e5ef;color:#454735;font:inherit;font-size:11px;box-shadow:0 3px 14px #43351e18;cursor:pointer;backdrop-filter:blur(8px)}
.architecture-toggle[hidden]{display:none}
@media(max-width:760px){.architecture-toggle{right:12px;bottom:calc(82px + env(safe-area-inset-bottom));font-size:10px}.craft-mark{--mark-size:34px}}
@media(prefers-reduced-motion:reduce){.mark-face{transition:none}}
@media print{.architecture-toggle{display:none}}

#architecture-actors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Quiet architectural layers: defined surfaces, graphite type and restrained bronze. */
:root{--paper:#f5f1e8;--ink:#272d27;--muted:#50584e;--gold:#947344;--line:#8b7c634d}
.architecture-background{filter:saturate(.78)}
.architecture-background::after{background:linear-gradient(105deg,#f5f0e6c4,#f5f0e6ad 60%,#f5f0e6ba)}
main{background:#f8f5ee91}
.editorial-arrival{background:#f8f5ee18}
.services,.contact,.interior-trades,.sport-outdoor,.portfolio-page .gallery-cta,.gallery-cta,.config-promo{background:#eae5d99c;border-color:var(--line)}
.craft,.interior-making,.exhibition-portal{background:#293228f5;color:#f7f3e9}
.footer{background:#242d24fa;border-top:1px solid #b49a6b55}
.site-header{background:#f5f1e8f2;border-bottom-color:#b1a18491;box-shadow:0 5px 18px #3e33200c}
.team-card,.catalog-card,.budget-hub-card,.config-preview,.planner-variants,.inquiry-cart,.login-card,.studio-record,.intro-note{
 background-color:#f8f4ebf2;border:1px solid #a493756b;
 box-shadow:inset 0 1px 0 #fff,0 8px 24px #40341f0a;
}
.team-card:hover{transform:none;border-color:#947344b3;box-shadow:inset 0 1px 0 #fff,0 8px 24px #40341f10}
.team-card-top{border-bottom-color:#b3a68b80}
.team-monogram{color:#866c43}
.team-area,.team-index{color:#626657}
.team-role{color:#354032}
.team-task{color:var(--muted)}
.project-image,.door-image,.editorial-image,.growth-hero img{outline:1px solid #78674c40;outline-offset:-1px}
.arrival-pair{border:1px solid #a08d6c5c;box-shadow:0 12px 32px #3a2e1a0c}
.btn{border-color:#37412e;box-shadow:inset 0 1px 0 #ffffff15,0 2px 5px #272d2712}
.atelier-link,.text-link{border-bottom-color:#8a795b99}
.contact-form input,.contact-form select,.contact-form textarea{background-color:#fbf8f1ed;border-bottom-color:#867c66}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid #947344;outline-offset:3px}
.architecture-toggle{background:#f6f1e7f5;border-color:#a5916b;box-shadow:0 3px 10px #3e332014}
#architecture-actors{opacity:.8}
@media(max-width:760px){
 .architecture-background::after{background:#f5f0e6b8}
 main{background:#f8f5ee99}
 .site-header{background:#f5f1e8f5}
}
@media print{main{background:white}.architecture-background{display:none}}