/* One measured finishing pass: every navigation pocket has purpose; no boxed controls or hard seams. */
:root { --forge-ink: #21150e; --hammered-copper: #ba7740; }

.menu-button {
  top: 8px !important;
  right: clamp(12px, 3vw, 46px) !important;
  width: clamp(108px, 11vw, 146px);
  min-height: 104px;
  flex-direction: column;
  justify-content: center;
  gap: 0 !important;
  color: #fff4df !important;
}
.menu-button img {
  width: 132px !important;
  height: 82px !important;
  margin: -7px 0 -12px !important;
  object-position: center;
}
.menu-button span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip-path: none !important;
  white-space: normal !important;
  max-width: 12ch;
  color: #fff1d7;
  font: 700 11px/1.05 'Source Serif 4', Georgia, serif !important;
  letter-spacing: .05em;
  text-align: center;
  text-shadow: 0 2px 4px #160b06;
}

.tool-roll {
  top: 126px !important;
  right: 50% !important;
  transform: translateX(50%);
  width: min(900px, calc(100vw - 24px)) !important;
  min-height: 0 !important;
  aspect-ratio: 1.6 / 1;
  padding: 11.8% 17.5% 14.6% !important;
  background-size: 100% 100% !important;
}
.tool-roll.open { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.tool-roll a {
  min-height: 0 !important;
  padding: 5px 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  gap: 3px;
}
.tool-roll a img { width: clamp(49px, 6vw, 76px) !important; height: clamp(49px, 6vw, 76px) !important; margin: 0 !important; }
.tool-roll a span { max-width: 12ch; color: #f7dbad; font: 700 clamp(12px, 1.45vw, 17px)/1.02 'Source Serif 4', Georgia, serif !important; text-shadow: 0 2px 3px #130a06; }
.tool-roll a:hover, .tool-roll a:focus-visible { color: #fff8e9 !important; text-decoration: none !important; transform: translateY(-2px); }

/* The page changes atmosphere by overlap and hardware, not computer-drawn rules. */
.start,.work,.method,.contact { overflow: hidden; border: 0 !important; }
.start::before,.work::before,.method::before,.contact::before { display: none !important; }
.start { background: radial-gradient(ellipse at 8% 0%, #fff8eb 0 12%, transparent 38%), linear-gradient(160deg,#f6f0e4 0%,#eee1ca 100%) !important; }
.work { background: radial-gradient(ellipse at 93% 5%,#eddcc0 0 12%,transparent 42%),linear-gradient(160deg,#eee1ca 0%,#dcc8aa 100%) !important; }
.method { background: radial-gradient(ellipse at 12% 5%,#6e4c32 0 1%,transparent 34%),linear-gradient(160deg,#3d2e22 0%,#241a14 100%) !important; }
.contact { background: radial-gradient(ellipse at 90% 4%,#e4cda9 0 7%,transparent 37%),linear-gradient(160deg,#eadbc5 0%,#f7f0e4 100%) !important; }
.work::after,.method::after,.contact::after { content:""; position:absolute; z-index:0; width:180px; height:180px; right:clamp(-55px,-2vw,-22px); top:clamp(24px,4vw,72px); border:10px double rgba(99,62,34,.22); border-radius:50%; box-shadow: inset 0 0 0 7px rgba(191,132,67,.12); transform:rotate(18deg); pointer-events:none; }
.method::after { left:clamp(-70px,-3vw,-20px); right:auto; border-color:rgba(207,151,82,.26); }
.work > *,.method > *, .contact > * { position:relative; z-index:1; }

/* Edge-framed jobsite hardware: practical-looking support, never a wall of clip-art. */
.work::before, .work::after, .contact::before, .contact::after {
  display:block !important;
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  width:min(31vw,470px);
  height:auto;
  opacity:.22;
  pointer-events:none;
  background-image:url('media/brand/dawkins-timber-rigging-toolboard-v1.png');
  background-repeat:no-repeat;
  background-size:auto 100%;
}
.work::before {
  left:0; right:auto;
  background-position:left center;
  mask-image:linear-gradient(90deg,#000 0 45%,rgba(0,0,0,.66) 62%,transparent 100%);
}
.work::after {
  left:auto; right:0;
  background-position:right center;
  border:0; border-radius:0; box-shadow:none; transform:none;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.62) 39%,#000 60% 100%);
}
.contact::before {
  left:0; right:auto;
  background-position:15% bottom;
  opacity:.15;
  mask-image:linear-gradient(90deg,#000 0 36%,transparent 100%);
}
.contact::after {
  left:auto; right:0;
  background-position:right bottom;
  border:0; border-radius:0; box-shadow:none; transform:none;
  opacity:.18;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 48%,#000 76% 100%);
}

/* A real timber-and-iron sill carries the hero into the story; there is no bare color-cut below the jobsite scene. */
.hero-copy { position:relative; overflow:visible; }
.hero-copy::before {
  content:"";
  position:absolute;
  z-index:2;
  left:0; top:-42px;
  width:100%; height:84px;
  transform:none;
  background:
    radial-gradient(circle at 6% 50%, #1c1009 0 5px, #b27a40 5.5px 8px, #3c2415 8.5px 12px, transparent 12.5px),
    radial-gradient(circle at 94% 50%, #1c1009 0 5px, #b27a40 5.5px 8px, #3c2415 8.5px 12px, transparent 12.5px),
    repeating-linear-gradient(94deg, rgba(35,18,8,.38) 0 2px, transparent 2px 14px),
    linear-gradient(180deg,#3b2414 0%,#7c4b27 16%,#4b2b18 52%,#24150c 100%);
  box-shadow:0 8px 12px rgba(30,15,7,.34), inset 0 2px 0 rgba(225,171,96,.28), inset 0 -3px 0 rgba(14,8,4,.56);
  pointer-events:none;
}
.hero-copy > * { position:relative; z-index:3; }

/* Footer keeps the jobsite image whole: labels and transparent tool marks float on its lower edge. */
footer { position: relative; min-height: clamp(480px, 49vw, 780px); padding: 0 !important; overflow: hidden; isolation: isolate; background: #21150e !important; }
footer > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; z-index:-2; }
footer::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 42%,rgba(18,10,5,.12) 62%,rgba(18,10,5,.72) 100%); pointer-events:none; }
footer p { position:absolute; left:18px; right:18px; bottom:112px; margin:0 !important; color:#f7dfb8 !important; text-shadow:0 2px 4px #160b06; }
.footer-actions { position:absolute; left:18px; right:18px; bottom:25px; padding:0 !important; display:flex; align-items:flex-end; justify-content:center; gap:clamp(20px,4vw,60px); }
.builder-desk { color:#f9e0b7 !important; text-shadow:0 2px 4px #160b06; }
.social-rack { gap:clamp(12px,2.4vw,30px) !important; align-items:flex-end !important; }
.social-rack a { min-width:64px !important; color:#f9e0b7 !important; text-shadow:0 2px 4px #160b06; }
.social-rack img { width:64px !important; height:64px !important; margin-bottom:3px !important; }
.social-rack a span,.builder-desk span { font:700 13px/1.05 'Source Serif 4',Georgia,serif; }

@media(max-width:700px) {
  .hero-copy { width:100%; max-width:none; margin-inline:0; left:auto; right:auto; }
  .menu-button { top: 2px !important; right: 4px !important; width:90px; min-height:78px; }
  .menu-button img { width:90px !important; height:62px !important; margin:-7px 0 -10px !important; }
  .menu-button span { display:block !important; font-size:9px !important; }
  .tool-roll { top:92px !important; right:50% !important; width:calc(100vw - 16px) !important; padding:13% 16.4% 15.5% !important; }
  .tool-roll a { padding:2px !important; }
  .tool-roll a img { width:44px !important; height:44px !important; }
  .tool-roll a span { font-size:11px !important; }
  .hero-copy::before { top:-31px; height:62px; }
  .work::before,.work::after,.contact::before,.contact::after { width:42vw; opacity:.13; }
  footer { min-height:570px; }
  footer > img { object-position:55% center; }
  footer p { bottom:145px; }
  .footer-actions { bottom:21px; flex-direction:column; align-items:center; gap:13px; }
  .social-rack { gap:10px !important; }
  .social-rack a { min-width:54px !important; }
  .social-rack img { width:52px !important; height:52px !important; }
  .social-rack a span,.builder-desk span { font-size:11px; }
}

/* Visual audit correction: one continuous crafted field, with zero jagged clipping or hard section cuts. */
.hero > img {
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 72px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 72px),transparent 100%);
  margin-bottom:-72px;
}
.start,.work,.method,.contact {
  background:#efe3cf !important;
  background-image:linear-gradient(180deg,rgba(255,250,238,.32),rgba(222,201,168,.18)) !important;
}
.method { color:#2b1b11 !important; }
.method .kicker { color:#875025 !important; }
.method > p { color:#3f2a1b !important; }
.method h2,.method h2 em {
  background:linear-gradient(164deg,#5c2b19 0%,#c47a43 20%,#6b321d 38%,#d39758 51%,#71371f 69%,#a85b31 84%,#4b2114);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(1px 1px 0 rgba(255,243,220,.65));
}
.work::before,.work::after,.contact::before,.contact::after {
  clip-path:none !important;
  filter:none !important;
  top:0 !important;
  height:auto !important;
}
footer {
  margin-top:-76px;
  background:#efe3cf !important;
}
footer > img {
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 84px,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 84px,#000 100%);
}
@media(max-width:700px) {
  .hero > img { margin-bottom:-44px; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 44px),transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 44px),transparent 100%); }
  footer { margin-top:-46px; }
  footer > img { -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 54px,#000 100%); mask-image:linear-gradient(180deg,transparent 0,#000 54px,#000 100%); }
}

/* Release correction: remove inherited decoration and let the artwork lead. */
.hero-copy::before { display:none !important; }
.start,.work,.method,.contact { background-image:linear-gradient(160deg,#f4ead8,#e8d7bd) !important; }
.method { background-image:linear-gradient(160deg,#3a2b20,#221812) !important; }
.work::after,.method::after,.contact::after { border:0 !important; border-radius:0 !important; box-shadow:none !important; transform:none !important; }
.method::after { display:none !important; }
.path-card::after { display:none !important; }
.tool-roll a { position:relative !important; gap:0 !important; transform:none !important; }
.tool-roll a img { width:clamp(62px,7.2vw,92px) !important; height:clamp(62px,7.2vw,92px) !important; margin:0 !important; transform:none !important; }
.tool-roll a span { position:absolute; bottom:10%; max-width:12ch; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.tool-roll a:hover,.tool-roll a:focus-visible { transform:none !important; text-decoration:none !important; }
.tool-roll a:hover span,.tool-roll a:focus-visible span { opacity:1; }
.tool-roll a:hover img,.tool-roll a:focus-visible img { transform:none !important; }
.work::before,.work::after,.contact::before,.contact::after { opacity:.34; }
.path-card .action-icon { width:clamp(154px,13vw,194px) !important; height:clamp(154px,13vw,194px) !important; }
.contact-tool img { width:112px !important; height:112px !important; }
.footer-actions .builder-desk { position:absolute; left:0; bottom:0; opacity:.7; }
.footer-actions .builder-desk img { width:46px !important; height:46px !important; }
.footer-actions .builder-desk span { display:none; }
@media(max-width:700px) {
  .tool-roll a img { width:54px !important; height:54px !important; }
  .tool-roll a span { position:static; opacity:1; font-size:11px !important; }
  .work::before,.work::after,.contact::before,.contact::after { opacity:.22; }
  .footer-actions .builder-desk { left:0; bottom:-3px; }
}

/* V10 — clean timber-and-iron joinery, not a fade, rule, or jagged cut. */
.hero > img,
footer > img {
  -webkit-mask-image:none !important;
  mask-image:none !important;
  clip-path:none !important;
  margin-bottom:0 !important;
}
.hero-copy {
  left:0 !important;
  right:auto !important;
  width:100% !important;
  max-width:none !important;
  margin-inline:0 !important;
  margin-top:0 !important;
  top:0 !important;
  padding-top:clamp(82px,8vw,122px) !important;
}
.hero-copy::before,
footer::before {
  display:block !important;
  content:"";
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  top:0;
  height:30px;
  pointer-events:none;
  background:
    radial-gradient(circle at 4% 50%,#d39a59 0 3px,#201109 3.5px 6px,transparent 6.5px),
    radial-gradient(circle at 96% 50%,#d39a59 0 3px,#201109 3.5px 6px,transparent 6.5px),
    linear-gradient(90deg,transparent 0 2.5%,#17100c 2.7% 4.5%,transparent 4.7% 95.3%,#17100c 95.5% 97.3%,transparent 97.5%),
    linear-gradient(180deg,rgba(180,115,59,.18),rgba(22,12,7,.48)),
    url('media/brand/supplied-walnut-grain-v1.png') center/cover;
  box-shadow:inset 0 2px 0 rgba(230,177,105,.42),inset 0 -3px 0 rgba(13,7,3,.65),0 7px 14px rgba(35,18,8,.23);
}
.hero-copy::before {
  left:0;
  right:0;
  width:auto;
  transform:none;
}
.hero,.start,.work,.method,.contact {
  border:0 !important;
  background:#efe3cf !important;
  background-image:none !important;
  color:#2b1b11 !important;
}
.method .kicker { color:#875025 !important; }
.method > p { color:#3f2a1b !important; }
.work::before,.work::after,.contact::before,.contact::after {
  clip-path:none !important;
  filter:none !important;
}
footer {
  margin-top:0 !important;
  border:0 !important;
}
footer::before { top:0; }
.sample-desk-tour {
  display:flex;
  width:max-content;
  max-width:min(92%,560px);
  margin:6px auto 0;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#5b311b;
  font:700 clamp(15px,1.5vw,18px)/1.25 'Source Serif 4',Georgia,serif;
  text-align:left;
  text-underline-offset:5px;
}
.sample-desk-tour img { width:64px; height:64px; object-fit:contain; }
.sample-desk-tour:hover,.sample-desk-tour:focus-visible { color:#2c170d; }
@media(max-width:700px) {
  .hero-copy { padding-top:72px !important; }
  .hero-copy::before,footer::before { height:24px; }
  .sample-desk-tour { margin-top:18px; font-size:15px; }
  .sample-desk-tour img { width:56px; height:56px; }
}

/* V15 — transparent heirloom tools replace the rectangular toolboard crop. */
.work::before,.work::after,.contact::before,.contact::after {
  display:block !important;
  content:"";
  position:absolute;
  z-index:0;
  top:50% !important;
  bottom:auto !important;
  width:clamp(180px,22vw,330px) !important;
  height:clamp(180px,22vw,330px) !important;
  opacity:.18 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  mask-image:none !important;
  -webkit-mask-image:none !important;
  clip-path:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:sepia(.08) saturate(.85) contrast(1.04) !important;
  pointer-events:none;
}
.work::before { left:clamp(-105px,-7vw,-55px) !important; right:auto !important; transform:translateY(-50%) rotate(-7deg) !important; background-image:url('media/brand/dawkins-icon-method-v2.webp') !important; }
.work::after { right:clamp(-105px,-7vw,-55px) !important; left:auto !important; transform:translateY(-50%) rotate(7deg) !important; background-image:url('media/brand/dawkins-icon-work-v2.webp') !important; }
.contact::before { left:clamp(-105px,-7vw,-55px) !important; right:auto !important; transform:translateY(-50%) rotate(-6deg) !important; background-image:url('media/brand/dawkins-icon-start-v2.webp') !important; }
.contact::after { right:clamp(-105px,-7vw,-55px) !important; left:auto !important; transform:translateY(-50%) rotate(6deg) !important; background-image:url('media/brand/dawkins-icon-note-v2.webp') !important; }
@media(max-width:700px) {
  .work::before,.work::after,.contact::before,.contact::after { width:155px !important; height:155px !important; opacity:.11 !important; }
  .work::before,.contact::before { left:-78px !important; }
  .work::after,.contact::after { right:-78px !important; }
}