/* GJH Joinery Services - GENERATED by tools/convert-dc.py from the
   artboards in design/. Do not hand-edit: the next conversion
   overwrites it. Every rule below is one artboard element's own
   inline declarations (and, where it had one, its hover twin), named
   for the sha1 of those declarations so identical ones share a
   class. */

/* The artboards' own <style> block, verbatim. */
  body { margin: 0; background: #EDE6DB; color: #1A1A1A; -webkit-font-smoothing: antialiased; }
  a { color: #725642; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: #1A1A1A; }
  img { display: block; }

/* The two design props, at their defaults, so the var() fallbacks the
   artboards carry never have to be the answer. */
:root { --serif: 'Young Serif'; --metal: #BB905E; }

.s-c97f9578 { font-family: Manrope, 'Helvetica Neue', Helvetica, sans-serif; background: #EDE6DB; }
.s-d1ce3095 { background: #0F1E2E; color: #F5F1E9; position: sticky; top: 0; z-index: 20; transition: box-shadow .3s ease; }
.s-17356474 { max-width: 1240px; margin: 0 auto; padding: 20px 48px; display: flex; align-items: center; gap: 26px; transition: padding .26s ease; }
.s-2a622f18 { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; text-decoration: none; }
.s-c552c4d8 { height: 60px; width: auto; filter: brightness(0) invert(1); transition: height .26s ease; }
.s-86c20170 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 500; font-size: 16px; line-height: 1.1; color: #F5F1E9; white-space: nowrap; }
.s-e1cf1a27 { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; }
.s-c9c24784 { color: #F5F1E9; text-decoration: none; transition: color .2s ease; }
.s-c9c24784:hover { color: #BB905E; }
.s-9a4567a6 { flex: 0 0 auto; background: var(--metal, #BB905E); color: #12202C; font-size: 15px; font-weight: 700; padding: 13px 22px; text-decoration: none; letter-spacing: 0.01em; transition: background-color .2s ease; }
.s-9a4567a6:hover { background: #F5F1E9; }
.s-9dffeddf { position: relative; height: 660px; overflow: hidden; }
.s-4aad1896 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.s-293ea72f { position: absolute; inset: 0; background: linear-gradient(96deg, rgba(10,23,35,0.7) 0%, rgba(10,23,35,0.7) 36%, rgba(10,23,35,0.57) 62%, rgba(10,23,35,0.45) 100%); }
.s-37fb0e2c { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 48px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.s-4ceeb5cf { max-width: 900px; }
.s-26ece362 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 60px; line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 26px; color: #F5F1E9; text-wrap: balance; }
.s-98373dea { font-size: 20px; line-height: 1.55; color: #DDD7CA; margin: 0 0 34px; max-width: 30em; }
.s-1e28dca5 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.s-bfe76b07 { background: var(--metal, #BB905E); color: #12202C; font-size: 17px; font-weight: 700; padding: 17px 30px; text-decoration: none; transition: background-color .2s ease; }
.s-bfe76b07:hover { background: #F5F1E9; }
.s-cdae4aa5 { border: 1px solid rgba(245,241,233,0.5); color: #F5F1E9; font-size: 17px; font-weight: 700; padding: 16px 28px; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.s-cdae4aa5:hover { border-color: #F5F1E9; background: rgba(245,241,233,0.1); }
.s-b20a4369 { position: absolute; right: 0; bottom: 0; background: rgba(10,23,35,0.9); color: #EDE6DB; font-size: 13.5px; font-weight: 500; padding: 11px 16px; }
.s-a46e2def { max-width: 1240px; margin: 54px auto 0; padding: 0 48px; }
.s-5009dd30 { height: 22px; background: repeating-linear-gradient(90deg, var(--metal, #BB905E) 0 1.5px, transparent 1.5px 24px); }
.s-364861b2 { max-width: 1240px; margin: 0 auto; padding: 54px 48px 0; }
.s-f9ab31e3 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 500; font-size: 34px; line-height: 1.15; margin: 0 0 34px; }
.s-30088da8 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.s-107cced6 { text-decoration: none; color: #1A1A1A; display: block; }
.s-ef0ccf3e { overflow: hidden; }
.s-ce3beedc { width: 100%; height: 440px; object-fit: cover; object-position: 50% 50%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-a21d20c9 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 500; font-size: 27px; margin: 20px 0 10px; transition: transform .3s ease, color .3s ease; }
.s-01359edf { font-size: 16.5px; line-height: 1.6; color: #4C463B; margin: 0; max-width: 34em; }
.s-c23702ce { width: 100%; height: 330px; object-fit: cover; object-position: 50% 40%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-2ff3c599 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 500; font-size: 23px; margin: 18px 0 9px; transition: transform .3s ease, color .3s ease; }
.s-adb4c13d { font-size: 16px; line-height: 1.6; color: #4C463B; margin: 0; }
.s-64fd3dc8 { width: 100%; height: 330px; object-fit: cover; object-position: 50% 50%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-d159091e { max-width: 1240px; margin: 0 auto; padding: 84px 48px 0; }
.s-1b6ed57c { max-width: 42em; margin: 0 0 30px; }
.s-76cff29e { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 500; font-size: 40px; line-height: 1.12; margin: 0 0 20px; }
.s-e6e58efd { font-size: 18.5px; line-height: 1.6; color: #4C463B; margin: 0 0 20px; }
.s-cce896d9 { font-size: 18.5px; line-height: 1.6; color: #4C463B; margin: 0; }
.s-b9cf24d0 { max-width: 1240px; margin: 0 auto; padding: 78px 48px 0; }
.s-b1ba7214 { margin: 0; }
.s-788b1b32 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-size: 30px; line-height: 1.35; margin: 0; padding: 34px 0; border-top: 2px solid var(--metal, #BB905E); border-bottom: 1px solid rgba(114,86,66,0.35); max-width: 26em; text-wrap: pretty; }
.s-6db58228 { font-size: 13.5px; font-weight: 600; color: #6C6455; padding-top: 9px; }
.s-47d669aa { color: var(--metal, #BB905E); letter-spacing: 0.1em; }
.s-322c4e6a { max-width: 1240px; margin: 0 auto; padding: 88px 48px 0; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 60px; align-items: start; }
.s-b7900cd3 { background: #F5F1E9; border: 1px solid rgba(114,86,66,0.42); padding: 13px; }
.s-107f735e { border: 1px solid rgba(114,86,66,0.28); box-shadow: inset 0 1px 4px rgba(26,26,26,0.12); padding: 26px 32px; }
.s-ecff5573 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 34px; }
.s-cdd3df12 { font-size: 17px; font-weight: 600; padding: 13px 0; border-bottom: 1px solid rgba(114,86,66,0.22); }
.s-cfa08b71 { font-size: 17px; font-weight: 600; padding: 13px 0; }
.s-5dd699a5 { max-width: 1240px; margin: 0 auto; padding: 88px 48px 0; }
.s-865b64eb { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin: 0 0 26px; }
.s-36daa6d7 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 500; font-size: 34px; line-height: 1.15; margin: 0 0 8px; }
.s-f3357f46 { font-size: 17px; line-height: 1.6; color: #4C463B; margin: 0; max-width: 40em; }
.s-a1a9c6af { position: relative; height: 560px; overflow: hidden; background: #0F1E2E; cursor: pointer; user-select: none; }
.s-15c4baf5 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 34%; }
.s-1dcb1298 { position: absolute; inset: 0; clip-path: inset(0 0 0 100.00%); }
.s-c0528ed5 { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.s-75295b8d { position: absolute; top: 0; bottom: 0; left: 100.00%; width: 2px; background: var(--metal, #BB905E); box-shadow: 0 0 26px rgba(10,23,35,0.5); opacity: 0; pointer-events: none; }
.s-12df23cb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 104px; height: 104px; background: #F5F1E9; border: 1px solid rgba(114,86,66,0.5); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(10,23,35,0.4); }
.s-4a8fb561 { width: 76px; height: auto; }
.s-3b72b996 { position: absolute; left: 0; bottom: 0; background: rgba(10,23,35,0.9); color: #EDE6DB; font-size: 13.5px; font-weight: 600; padding: 11px 16px; }
.s-e08e2776 { position: absolute; right: 0; bottom: 0; background: rgba(10,23,35,0.9); color: #EDE6DB; font-size: 13.5px; font-weight: 600; padding: 11px 16px; }
.s-8cf1402d { position: absolute; right: 16px; top: 16px; background: var(--metal, #BB905E); color: #12202C; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; padding: 11px 15px; box-shadow: 0 6px 18px rgba(10,23,35,0.35); }
.s-d18324f0 { max-width: 1240px; margin: 0 auto; padding: 66px 48px 90px; }
.s-3155ede5 { background: #F5F1E9; border: 1px solid rgba(114,86,66,0.38); padding: 13px; }
.s-d6110c9f { border: 1px solid rgba(114,86,66,0.26); box-shadow: inset 0 1px 4px rgba(26,26,26,0.12); padding: 46px 46px 48px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.s-6008d4dd { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 500; font-size: 38px; line-height: 1.12; margin: 0 0 14px; }
.s-6b7369fd { font-size: 18px; line-height: 1.6; color: #4C463B; margin: 0; }
.s-2d843fe8 { display: flex; flex-direction: column; gap: 12px; }
.s-36d211df { background: #0F1E2E; color: #F5F1E9; font-size: 17px; font-weight: 700; padding: 18px 26px; text-decoration: none; text-align: center; transition: background-color .2s ease; }
.s-36d211df:hover { background: #1A1A1A; }
.s-4bcf553e { border: 1px solid rgba(15,30,46,0.45); color: #0F1E2E; font-size: 17px; font-weight: 700; padding: 17px 26px; text-decoration: none; text-align: center; transition: background-color .2s ease, border-color .2s ease; }
.s-4bcf553e:hover { border-color: #0F1E2E; background: rgba(15,30,46,0.05); }
.s-89fc6a1d { font-size: 15.5px; font-weight: 600; color: #725642; text-align: center; padding-top: 4px; }
.s-c1869cd4 { background: #0F1E2E; color: #C9C3B6; }
.s-5e561d5b { max-width: 1240px; margin: 0 auto; padding: 58px 48px 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.s-ef28617f { height: 74px; width: auto; filter: brightness(0) invert(1); }
.s-23f780b0 { font-size: 16px; line-height: 1.9; }
.s-2f4cc825 { color: #F5F1E9; text-decoration: none; font-weight: 600; }
.s-5990b21a { color: #F5F1E9; text-decoration: none; }
.s-2ce54e0e { font-size: 16px; line-height: 1.65; }
.s-e8bf4bfa { margin: 0 0 10px; }
.s-2a23b3ed { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.s-e84572d0 { color: #C9C3B6; text-decoration: none; }
.s-282c847a { max-width: 1240px; margin: 0 auto; padding: 20px 48px 40px; border-top: 1px solid rgba(233,230,219,0.14); }
.s-9e31adab { font-size: 14px; line-height: 1.6; color: #8E9AA6; margin: 0; }
.s-61437090 { font-family: Manrope, 'Helvetica Neue', Helvetica, sans-serif; background: #EDE6DB; position: relative; }
.s-ef866fab { background: #0F1E2E; color: #F5F1E9; position: sticky; top: 0; z-index: 20; box-shadow: 0 6px 20px rgba(10,23,35,0.25); }
.s-8c94d016 { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s-78e2592b { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.s-3fd27e04 { height: 44px; width: auto; filter: brightness(0) invert(1); }
.s-252050fd { font-family: 'Young Serif', Georgia, serif; font-weight: 500; font-size: 19px; line-height: 1.1; color: #F5F1E9; white-space: nowrap; }
.s-94e1c056 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 50px; height: 46px; padding: 0; background: transparent; border: 1px solid rgba(245,241,233,0.45); cursor: pointer; }
.s-b1a49bc6 { display: block; width: 22px; height: 2px; background: #F5F1E9; transition: transform .28s cubic-bezier(.2,.75,.2,1); transform: none; }
.s-ce2e80ec { display: block; width: 22px; height: 2px; background: #F5F1E9; transition: opacity .18s ease; opacity: 1; }
.s-46833c99 { overflow: hidden; max-height: 0px; transition: max-height .34s cubic-bezier(.2,.75,.2,1); border-top: 1px solid rgba(245,241,233,0.14); }
.s-f712c41b { display: block; color: #F5F1E9; text-decoration: none; font-size: 16px; font-weight: 600; padding: 15px 16px; border-bottom: 1px solid rgba(245,241,233,0.1); }
.s-359ca077 { display: block; color: #F5F1E9; text-decoration: none; font-size: 16px; font-weight: 600; padding: 15px 16px; }
.s-5270c55e { position: relative; height: 470px; overflow: hidden; }
.s-1a66a920 { position: absolute; inset: 0; background: linear-gradient(178deg, rgba(10,23,35,0) 0%, rgba(10,23,35,0) 38%, rgba(10,23,35,0.67) 50%, rgba(10,23,35,0.68) 100%); }
.s-a2cb2258 { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 16px 22px; }
.s-e9e53c60 { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 37px; line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 14px; color: #F5F1E9; }
.s-2a1bfe5b { font-size: 16.5px; line-height: 1.5; color: #DDD7CA; margin: 0; }
.s-8136615a { padding: 20px 16px 0; }
.s-dd33434e { height: 16px; background: repeating-linear-gradient(90deg, #BB905E 0 1.5px, transparent 1.5px 20px); }
.s-a358e648 { padding: 26px 16px 0; }
.s-eece278f { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0 0 18px; }
.s-2f77ffe1 { display: block; text-decoration: none; color: #1A1A1A; margin: 0 0 24px; }
.s-feb9891f { width: 100%; height: 240px; object-fit: cover; }
.s-951b72ba { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 22px; margin: 14px 0 8px; }
.s-1e8359c1 { font-size: 15.5px; line-height: 1.55; color: #4C463B; margin: 0; }
.s-b2d566c7 { width: 100%; height: 240px; object-fit: cover; object-position: 50% 40%; }
.s-5f9ffdef { display: block; text-decoration: none; color: #1A1A1A; }
.s-93b81df8 { padding: 40px 16px 0; }
.s-70af5bc5 { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0 0 12px; }
.s-c9a9cc4e { font-size: 16.5px; line-height: 1.6; color: #4C463B; margin: 0 0 20px; }
.s-4d768246 { font-size: 16.5px; line-height: 1.6; color: #4C463B; margin: 0; }
.s-2956ffe3 { padding: 38px 16px 0; }
.s-2b734195 { font-family: 'Young Serif', Georgia, serif; font-size: 22px; line-height: 1.35; margin: 0; padding: 22px 0; border-top: 2px solid #BB905E; border-bottom: 1px solid rgba(114,86,66,0.35); }
.s-4503d604 { font-size: 12.5px; font-weight: 600; color: #6C6455; padding-top: 8px; }
.s-19aa1f0d { color: #BB905E; letter-spacing: 0.1em; }
.s-f7c1c529 { background: #F5F1E9; border: 1px solid rgba(114,86,66,0.42); padding: 10px; }
.s-f546e7cb { border: 1px solid rgba(114,86,66,0.28); box-shadow: inset 0 1px 4px rgba(26,26,26,0.12); padding: 6px 18px; }
.s-354358fd { list-style: none; margin: 0; padding: 0; }
.s-2bb33045 { font-size: 16px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid rgba(114,86,66,0.22); }
.s-0208b1de { font-size: 16px; font-weight: 600; padding: 12px 0; }
.s-192b18a3 { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0 0 8px; }
.s-a9ae5253 { font-size: 16px; line-height: 1.55; color: #4C463B; margin: 0 0 16px; }
.s-9ea827c2 { position: relative; height: 300px; overflow: hidden; background: #0F1E2E; cursor: pointer; user-select: none; }
.s-4e239d9d { position: absolute; inset: 0; clip-path: inset(0 0 0 100.00%); transition: clip-path 1.5s cubic-bezier(.2,.75,.2,1); }
.s-f1d63f2c { width: 100%; height: 100%; object-fit: cover; }
.s-a064b889 { position: absolute; top: 0; bottom: 0; left: 100.00%; width: 2px; background: #BB905E; box-shadow: 0 0 20px rgba(10,23,35,0.5); opacity: 0; pointer-events: none; transition: left 1.5s cubic-bezier(.2,.75,.2,1), opacity .45s ease; }
.s-c0b686c4 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; background: #F5F1E9; border: 1px solid rgba(114,86,66,0.5); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(10,23,35,0.4); }
.s-94cfbdb6 { width: 50px; height: auto; }
.s-6fed9445 { position: absolute; left: 0; bottom: 0; background: rgba(10,23,35,0.9); color: #EDE6DB; font-size: 12px; font-weight: 600; padding: 8px 11px; }
.s-a1bba478 { position: absolute; right: 0; bottom: 0; background: rgba(10,23,35,0.9); color: #EDE6DB; font-size: 12px; font-weight: 600; padding: 8px 11px; }
.s-1b942120 { position: absolute; right: 10px; top: 10px; background: #BB905E; color: #12202C; font-size: 12.5px; font-weight: 700; padding: 10px 12px; box-shadow: 0 6px 16px rgba(10,23,35,0.35); }
.s-d4d855cb { padding: 34px 16px 40px; }
.s-2a7a58ee { background: #F5F1E9; border: 1px solid rgba(114,86,66,0.38); padding: 10px; }
.s-b3078766 { border: 1px solid rgba(114,86,66,0.26); box-shadow: inset 0 1px 4px rgba(26,26,26,0.12); padding: 26px 20px 28px; }
.s-9964cf67 { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0 0 10px; }
.s-6a6dfd86 { font-size: 16px; line-height: 1.55; color: #4C463B; margin: 0 0 18px; }
.s-7e54722c { font-size: 15px; font-weight: 600; color: #725642; }
.s-5b768601 { background: #0F1E2E; color: #C9C3B6; padding: 32px 16px 26px; }
.s-0e9ee3f6 { height: 58px; width: auto; filter: brightness(0) invert(1); margin: 0 0 20px; }
.s-c4134854 { font-size: 16px; line-height: 1.9; margin: 0 0 16px; }
.s-7e387be3 { font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.s-d974e62e { font-size: 13px; line-height: 1.6; color: #8E9AA6; margin: 0; padding-top: 14px; border-top: 1px solid rgba(233,230,219,0.14); }
.s-354de444 { position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(15,30,46,0.35); box-shadow: 0 -8px 24px rgba(10,23,35,0.28); }
.s-bf454c5d { background: #0F1E2E; color: #F5F1E9; font-size: 16px; font-weight: 700; text-decoration: none; text-align: center; padding: 18px 10px; min-height: 56px; box-sizing: border-box; }
.s-891b4b03 { background: #BB905E; color: #12202C; font-size: 16px; font-weight: 700; text-decoration: none; text-align: center; padding: 18px 10px; min-height: 56px; box-sizing: border-box; }
.s-bf57c8cb { color: #F5F1E9; text-decoration: none; transition: color .2s ease; border-bottom: 2px solid #BB905E; padding-bottom: 4px; }
.s-bf57c8cb:hover { color: #BB905E; }
.s-7ca03927 { position: relative; height: 430px; overflow: hidden; }
.s-af1c125d { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.s-bbd714fb { position: absolute; inset: 0; background: linear-gradient(96deg, rgba(10,23,35,0.7) 0%, rgba(10,23,35,0.7) 40%, rgba(10,23,35,0.67) 66%, rgba(10,23,35,0.62) 100%); }
.s-88ef0afd { max-width: 800px; }
.s-1e1699bb { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 52px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 18px; color: #F5F1E9; text-wrap: balance; }
.s-4da9eccf { font-size: 19px; line-height: 1.55; color: #DDD7CA; margin: 0; max-width: 34em; }
.s-339941c4 { position: absolute; right: 0; bottom: 0; background: rgba(10,23,35,0.9); color: #EDE6DB; font-size: 13px; font-weight: 500; padding: 10px 15px; }
.s-4d890fd5 { max-width: 1240px; margin: 0 auto; padding: 66px 48px 0; }
.s-554b6abc { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.12; margin: 0 0 6px; }
.s-fa279034 { font-size: 18px; line-height: 1.62; color: #4C463B; margin: 0 0 12px; max-width: 40em; }
.s-8000fabd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 26px 0; }
.s-d03de34e { width: 100%; height: 420px; object-fit: cover; object-position: 50% 50%; }
.s-194670c6 { font-size: 13.5px; font-weight: 600; color: #6C6455; padding-top: 10px; }
.s-fb684c64 { padding: 0 8px 0 0; }
.s-f2ce2d79 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.15; margin: 0 0 14px; }
.s-5dbab07a { font-size: 17.5px; line-height: 1.65; color: #4C463B; margin: 0; }
.s-6a65a363 { padding: 0 0 0 8px; }
.s-e749a85a { width: 100%; height: 420px; object-fit: cover; object-position: 50% 46%; }
.s-51174971 { max-width: 1240px; margin: 0 auto; padding: 70px 48px 0; }
.s-0180b381 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.s-801d5ba6 { width: 100%; height: 520px; object-fit: cover; object-position: 50% 50%; }
.s-fbbc8a54 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.12; margin: 0 0 14px; }
.s-0d083a4a { font-size: 18px; line-height: 1.62; color: #4C463B; margin: 0 0 12px; }
.s-7b4048e1 { font-size: 18px; line-height: 1.62; color: #4C463B; margin: 0; }
.s-b5f3c46e { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.s-8799e995 { position: absolute; top: 0; bottom: 0; left: 100.00%; width: 2px; background: var(--metal, #BB905E); box-shadow: 0 0 26px rgba(10,23,35,0.5); opacity: 0; pointer-events: none; transition: left 1.5s cubic-bezier(.2,.75,.2,1), opacity .45s ease; }
.s-bce274f6 { max-width: 1240px; margin: 0 auto; padding: 78px 48px 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.s-ce82cd01 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.12; margin: 0 0 16px; }
.s-baafc2cf { display: block; color: #F5F1E9; text-decoration: none; font-size: 16px; font-weight: 600; padding: 15px 16px; border-bottom: 1px solid rgba(245,241,233,0.1); border-left: 3px solid #BB905E; }
.s-4e2bf65d { position: absolute; inset: 0; background: linear-gradient(178deg, rgba(10,23,35,0) 0%, rgba(10,23,35,0) 26%, rgba(10,23,35,0.58) 40%, rgba(10,23,35,0.78) 100%); }
.s-875d82a3 { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 16px 20px; }
.s-ec760f98 { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 33px; line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 12px; color: #F5F1E9; }
.s-49a04cff { font-size: 16px; line-height: 1.5; color: #DDD7CA; margin: 0; }
.s-b3d09ab6 { padding: 28px 16px 0; }
.s-1405f9f2 { font-size: 16px; line-height: 1.55; color: #4C463B; margin: 0 0 22px; }
.s-301fb434 { margin: 0 0 26px; }
.s-a2fdd841 { width: 100%; height: 250px; object-fit: cover; }
.s-8c110492 { width: 100%; height: 250px; object-fit: cover; object-position: 50% 46%; }
.s-fdc8de51 { width: 100%; height: 300px; object-fit: cover; }
.s-a5e01455 { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.15; margin: 18px 0 10px; }
.s-a7ecbb85 { font-size: 16px; line-height: 1.58; color: #4C463B; margin: 0 0 10px; }
.s-0743d418 { font-size: 16px; line-height: 1.58; color: #4C463B; margin: 0; }
.s-4a573f73 { font-size: 16px; line-height: 1.58; color: #4C463B; margin: 0 0 20px; }
.s-e8fcd238 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.12; margin: 0 0 8px; }
.s-6b25cfc0 { font-size: 18px; line-height: 1.62; color: #4C463B; margin: 0 0 30px; max-width: 40em; }
.s-69e85620 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.s-03e8e526 { width: 100%; height: 520px; object-fit: cover; object-position: 50% 50%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-6775c297 { display: grid; gap: 26px; }
.s-8acac392 { width: 100%; height: 247px; object-fit: cover; object-position: 50% 50%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-2ee2f218 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding-top: 26px; }
.s-1ca0a986 { width: 100%; height: 320px; object-fit: cover; object-position: 50% 50%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-7b0fbf4c { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.12; margin: 0 0 12px; }
.s-55ef1887 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.s-e501ddbc { width: 100%; height: 400px; object-fit: cover; object-position: 62% 58%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-1010a548 { width: 100%; height: 400px; object-fit: cover; object-position: 50% 50%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-e5f5ba1d { border: 1px solid rgba(114,86,66,0.26); box-shadow: inset 0 1px 4px rgba(26,26,26,0.12); padding: 34px 36px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.s-6d7242f6 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 27px; line-height: 1.18; margin: 0 0 10px; }
.s-f60d3098 { font-size: 17px; line-height: 1.62; color: #4C463B; margin: 0; }
.s-07ea996a { width: 100%; height: 240px; object-fit: cover; object-position: 50% 50%; }
.s-b4a97b9f { width: 100%; height: 250px; object-fit: cover; object-position: 62% 58%; }
.s-3622522e { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.s-70e003d6 { width: 100%; height: 520px; object-fit: cover; object-position: 50% 35%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-5a5316a9 { width: 100%; height: 320px; object-fit: cover; object-position: 50% 80%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-112aa098 { width: 100%; height: 320px; object-fit: cover; object-position: 50% 30%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-ed80bb44 { max-width: 1240px; margin: 0 auto; padding: 78px 48px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.s-f0b49636 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.15; margin: 0 0 14px; }
.s-050a73da { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.s-be7b16c6 { width: 100%; height: 250px; object-fit: cover; object-position: 50% 35%; }
.s-0a9283b0 { width: 100%; height: 250px; object-fit: cover; object-position: 50% 40%; }
.s-8e7d4170 { width: 100%; height: 250px; object-fit: cover; object-position: 50% 65%; }
.s-8ef5929f { width: 100%; height: 250px; object-fit: cover; object-position: 50% 30%; }
.s-22b748c1 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 62px; line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 24px; text-wrap: balance; }
.s-523188a6 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding-top: 10px; }
.s-76b22be1 { font-size: 19.5px; line-height: 1.6; color: #4C463B; margin: 0; }
.s-c86d8604 { width: 100%; height: 400px; object-fit: cover; object-position: 50% 45%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-3b017607 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.s-a066aea3 { width: 100%; height: 520px; object-fit: cover; object-position: 50% 30%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-d7d50d36 { width: 100%; height: 520px; object-fit: cover; object-position: 50% 55%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-dd15c951 { width: 100%; height: 520px; object-fit: cover; object-position: 50% 40%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-a3cae0bf { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 33px; line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 12px; }
.s-d92092f3 { width: 100%; height: 250px; object-fit: cover; object-position: 50% 50%; }
.s-521ab861 { width: 100%; height: 250px; object-fit: cover; object-position: 50% 55%; }
.s-463ba688 { width: 100%; height: 250px; object-fit: cover; object-position: 50% 60%; }
.s-a926d059 { width: 100%; height: 250px; object-fit: cover; object-position: 50% 45%; }
.s-dc4fda21 { max-width: 20em; }
.s-79d8affe { width: 100%; height: 520px; object-fit: cover; object-position: 50% 42%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-e7890e50 { width: 100%; height: 247px; object-fit: cover; object-position: 50% 46%; transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.s-f7b3eb4e { width: 100%; height: 250px; object-fit: cover; object-position: 50% 42%; }
.s-3525618a { max-width: 18em; }
.s-10f0f768 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 62px; line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 20px; }
.s-c7beeb14 { font-size: 19.5px; line-height: 1.6; color: #4C463B; margin: 0; max-width: 34em; }
.s-c1a07a46 { max-width: 1240px; margin: 0 auto; padding: 46px 48px 0; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: start; }
.s-c832a02f { display: flex; flex-direction: column; gap: 14px; }
.s-cbf85eac { background: #0F1E2E; color: #F5F1E9; font-size: 18px; font-weight: 700; padding: 20px 26px; text-decoration: none; text-align: center; transition: background-color .2s ease; }
.s-cbf85eac:hover { background: #1A1A1A; }
.s-d38d5d95 { border: 1px solid rgba(15,30,46,0.45); color: #0F1E2E; font-size: 18px; font-weight: 700; padding: 19px 26px; text-decoration: none; text-align: center; transition: background-color .2s ease, border-color .2s ease; }
.s-d38d5d95:hover { border-color: #0F1E2E; background: rgba(15,30,46,0.05); }
.s-7c9e410f { background: #F5F1E9; border: 1px solid rgba(114,86,66,0.38); padding: 11px; margin-top: 8px; }
.s-2063ef2d { border: 1px solid rgba(114,86,66,0.26); box-shadow: inset 0 1px 4px rgba(26,26,26,0.12); padding: 26px 28px; }
.s-fd44818f { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: #6C6455; margin: 0 0 8px; }
.s-968256c7 { font-size: 22px; font-weight: 700; margin: 0 0 20px; }
.s-693e3294 { color: #1A1A1A; text-decoration: none; }
.s-94016e2e { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
.s-24f9a71c { color: #725642; }
.s-165b2924 { font-size: 17px; line-height: 1.55; margin: 0; }
.s-fee79399 { border: 1px solid rgba(114,86,66,0.26); box-shadow: inset 0 1px 4px rgba(26,26,26,0.12); padding: 34px 36px 36px; }
.s-b4957c79 { font-family: var(--serif, 'Young Serif'), Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.15; margin: 0 0 6px; }
.s-ff33c04c { font-size: 14.5px; line-height: 1.55; color: #6C6455; margin: 0 0 24px; }
.s-845ec6ac { display: block; margin: 0 0 18px; }
.s-b81cc3f7 { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: 0.01em; margin: 0 0 7px; }
.s-1241888c { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16.5px; padding: 13px 14px; background: #FFFDF8; border: 1px solid rgba(114,86,66,0.4); color: #1A1A1A; }
.s-226b5be2 { display: block; margin: 0 0 22px; }
.s-2509177e { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16.5px; padding: 13px 14px; background: #FFFDF8; border: 1px solid rgba(114,86,66,0.4); color: #1A1A1A; resize: vertical; }
.s-b9c38367 { font-family: inherit; background: var(--metal, #BB905E); color: #12202C; font-size: 17px; font-weight: 700; padding: 17px 30px; border: none; cursor: pointer; transition: background-color .2s ease; }
.s-b9c38367:hover { background: #0F1E2E; color: #F5F1E9; }
.s-5817e646 { display: block; color: #F5F1E9; text-decoration: none; font-size: 16px; font-weight: 600; padding: 15px 16px; border-left: 3px solid #BB905E; }
.s-2cf8ce9a { border: 1px solid rgba(114,86,66,0.26); box-shadow: inset 0 1px 4px rgba(26,26,26,0.12); padding: 24px 16px 26px; }
.s-2875ba4d { max-width: 1240px; margin: 0 auto; padding: 84px 48px 90px; }
.s-835c9d7c { font-size: 19.5px; line-height: 1.6; color: #4C463B; margin: 0 0 30px; max-width: 34em; }
.s-e50649be { display: flex; flex-wrap: wrap; gap: 14px; }

/* The card hover the artboards wired in JavaScript. It is presentation, so it
   belongs here; the transitions it rides on are already in the hashed classes
   above, exactly as they were drawn. Guarded to pointers that can actually
   hover: on a touch screen a tap synthesises :hover and it STICKS until the
   next tap elsewhere, which left a tapped card's title shifted and recoloured.
   Phones get the scroll-in settle in js/site.js instead (deviation 19). */
@media (hover: hover) {
  [data-card]:hover img { transform: scale(1.045); }
  [data-card]:hover [data-card-title] { transform: translateY(-4px); color: #725642; }
}

/* ONE DESIGN PER VIEWPORT. Every page but the 404 is drawn twice - a 1440px
   artboard and a 402px one - so both are in the page and exactly one is ever
   displayed. The 404 carries the phone header, menu and call bar lifted from
   the Extensions phone artboard instead, so a visitor on a phone can still
   navigate. js/site.js puts aria-hidden on whichever half is off. */
@media (min-width: 768px) {
  .dc-mobile, .dc-narrow { display: none; }
}
@media (max-width: 767.98px) {
  .dc-desktop, .dc-wide { display: none; }
}

/* THE COLLAPSE. The artboards are fixed-width frames; a phone is not.
   This is the whole of the responsive work, and it is deliberately
   mechanical: one column, the two hero heights the design uses, the
   48px gutters at 16px, the display sizes down, the wide nav away,
   and flex rows allowed to wrap. Nothing is re-laid-out. A class the
   phone artboards also use is put back below, because those were
   drawn AT 402px and need no collapsing. */
@media (max-width: 767.98px) {
  [data-header] nav { display: none; }
  a[href^="mailto:"] { overflow-wrap: anywhere; }
  .s-17356474 { padding: 20px 16px; flex-wrap: wrap; }
  .s-2a622f18 { flex-wrap: wrap; }
  .s-e1cf1a27 { flex-wrap: wrap; }
  .s-9dffeddf { height: 470px; }
  .s-37fb0e2c { padding: 0 16px; }
  .s-26ece362 { font-size: 36px; }
  .s-a46e2def { padding: 0 16px; }
  .s-364861b2 { padding: 54px 16px 0; }
  .s-f9ab31e3 { font-size: 26px; }
  .s-30088da8 { grid-template-columns: 1fr; }
  .s-d159091e { padding: 84px 16px 0; }
  .s-76cff29e { font-size: 26px; }
  .s-b9cf24d0 { padding: 78px 16px 0; }
  .s-322c4e6a { padding: 88px 16px 0; grid-template-columns: 1fr; }
  .s-ecff5573 { grid-template-columns: 1fr; }
  .s-5dd699a5 { padding: 88px 16px 0; }
  .s-36daa6d7 { font-size: 26px; }
  .s-d18324f0 { padding: 66px 16px 90px; }
  .s-d6110c9f { grid-template-columns: 1fr; }
  .s-6008d4dd { font-size: 26px; }
  .s-5e561d5b { padding: 58px 16px 26px; grid-template-columns: 1fr; }
  .s-282c847a { padding: 20px 16px 40px; }
  .s-7ca03927 { height: 380px; }
  .s-1e1699bb { font-size: 36px; }
  .s-4d890fd5 { padding: 66px 16px 0; }
  .s-554b6abc { font-size: 26px; }
  .s-8000fabd { grid-template-columns: 1fr; }
  .s-51174971 { padding: 70px 16px 0; }
  .s-0180b381 { grid-template-columns: 1fr; }
  .s-fbbc8a54 { font-size: 26px; }
  .s-bce274f6 { padding: 78px 16px 0; grid-template-columns: 1fr; }
  .s-ce82cd01 { font-size: 26px; }
  .s-e8fcd238 { font-size: 26px; }
  .s-69e85620 { grid-template-columns: 1fr; }
  .s-2ee2f218 { grid-template-columns: 1fr; }
  .s-7b0fbf4c { font-size: 26px; }
  .s-55ef1887 { grid-template-columns: 1fr; }
  .s-e5f5ba1d { grid-template-columns: 1fr; }
  .s-ed80bb44 { padding: 78px 16px 0; grid-template-columns: 1fr; }
  .s-f0b49636 { font-size: 26px; }
  .s-22b748c1 { font-size: 36px; }
  .s-523188a6 { grid-template-columns: 1fr; }
  .s-3b017607 { grid-template-columns: 1fr; }
  .s-10f0f768 { font-size: 36px; }
  .s-c1a07a46 { padding: 46px 16px 0; grid-template-columns: 1fr; }
  .s-b4957c79 { font-size: 26px; }
  .s-2875ba4d { padding: 84px 16px 90px; }
  .dc-mobile .s-7ca03927, .dc-narrow .s-7ca03927 { height: 430px; }

  /* PHONE MOTION (owner request, 9 Sept 2026) -- an ADDITION. The 402px
     artboards draw no motion beyond the wipe and the menu, so the hero's slow
     settle is written here rather than lifted: ten seconds from a 6%
     overscale back to rest, on the same ease-out curve the artboards use for
     everything else. Every hero sits in a section its artboard already made
     `overflow: hidden`, so the overscale is clipped rather than widening the
     page. It is a CSS animation, so it also runs with JavaScript off, and
     the reduced-motion block below switches it off outright. */
  @keyframes dc-hero-settle {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
  }
  .dc-hero-settle {
    animation: dc-hero-settle 10s cubic-bezier(.2,.75,.2,1) both;
    transform-origin: 50% 50%;
  }
  /* A 402px card puts its photo straight inside the link, where a wide card
     wraps its own in a div that hides the overflow. js/site.js scales that
     photo on scroll-in, so the link is what has to clip it. Nothing drawn
     changes: the card is not re-spaced, re-sized or re-coloured. */
  .dc-card-clip { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-hero-settle { animation: none; }
}

/* THE PHOTO VIEWER (owner request, 22 Sept 2026) -- deviation 25. Written
   here rather than lifted, because no artboard draws a viewer: js/site.js
   builds one <dialog class="gjh-viewer"> on the first click and appends it
   to <body>, outside both roots -- which is also why it names its own font,
   since Manrope is set on each root and not on <body>.
   THE FOCUS RING IS DRAWN INSIDE THE PHOTO. Every wide root wraps its photo
   in a div that hides its overflow at exactly the photo's size (it is what
   clips the hover zoom), so a ring outside the photo would be clipped away
   to nothing. Inset by 5px it keeps the 3px of air the brief asked for,
   between the ring and the edge, and is the same ring in both roots.
   BOTH RULES KEY ON role="button", which js/site.js sets only once it knows
   it can open a photo: with JavaScript off, or in a browser with no
   <dialog>, a photo shows no zoom cursor for a click that does nothing. */
[data-zoom][role="button"] { cursor: zoom-in; }
[data-zoom][role="button"]:focus-visible { outline: 2px solid #BB905E; outline-offset: -5px; }
dialog.gjh-viewer {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; box-sizing: border-box; overflow: hidden;
  background: transparent; color: #F5F1E9;
  font-family: Manrope, 'Helvetica Neue', Helvetica, sans-serif;
}
dialog.gjh-viewer:focus { outline: none; }
/* [open] only: a display on the bare selector would beat the browser's own
   `dialog:not([open]) { display: none }` and show the viewer closed. */
dialog.gjh-viewer[open] { display: flex; flex-direction: column; animation: gjh-viewer-in .18s ease-out; }
dialog.gjh-viewer::backdrop { background: rgba(10,23,35,0.94); }
dialog.gjh-viewer[open]::backdrop { animation: gjh-viewer-in .18s ease-out; }
@keyframes gjh-viewer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.gjh-viewer [hidden] { display: none; }
.gjh-viewer__stage { position: relative; flex: 1 1 auto; min-height: 0; margin: 72px 92px 0; }
/* Absolutely placed with auto margins, so the element is exactly the size
   the photo is drawn at: the letterbox round it is backdrop, and a click
   there closes, where a click on the photo does not. */
.gjh-viewer__img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.gjh-viewer__loading {
  position: absolute; top: 50%; left: 0; right: 0; margin: -10px 0 0;
  text-align: center; font-size: 14px; font-weight: 600; line-height: 20px;
  color: rgba(245,241,233,0.7); pointer-events: none;
}
.gjh-viewer__meta { flex: 0 0 auto; padding: 14px 92px 22px; text-align: center; }
.gjh-viewer__caption {
  margin: 0 auto; max-width: 46em; font-size: 15px; font-weight: 600;
  line-height: 1.45; overflow-wrap: anywhere;
}
.gjh-viewer__count {
  margin: 6px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(245,241,233,0.72); font-variant-numeric: tabular-nums;
}
.gjh-viewer__btn {
  position: absolute; z-index: 1; display: flex; align-items: center;
  justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0;
  background: transparent; border: 1px solid rgba(245,241,233,0.45);
  border-radius: 0; color: #F5F1E9; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.gjh-viewer__btn:focus-visible { outline: 2px solid #BB905E; outline-offset: 3px; }
@media (hover: hover) {
  .gjh-viewer__btn:hover { border-color: #F5F1E9; background: rgba(245,241,233,0.1); }
}
.gjh-viewer__close { top: 14px; right: 14px; }
.gjh-viewer__prev { left: 22px; top: 50%; margin-top: -24px; }
.gjh-viewer__next { right: 22px; top: 50%; margin-top: -24px; }
.gjh-viewer__glyph { position: relative; display: block; width: 22px; height: 22px; }
/* Close is the hamburger's own open state: two 22px bars at 45 degrees. */
.gjh-viewer__close .gjh-viewer__glyph::before,
.gjh-viewer__close .gjh-viewer__glyph::after {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 22px; height: 2px; background: currentColor;
}
.gjh-viewer__close .gjh-viewer__glyph::before { transform: rotate(45deg); }
.gjh-viewer__close .gjh-viewer__glyph::after { transform: rotate(-45deg); }
.gjh-viewer__prev .gjh-viewer__glyph,
.gjh-viewer__next .gjh-viewer__glyph {
  width: 13px; height: 13px; box-sizing: border-box;
  border: solid currentColor; border-width: 0 0 2px 2px;
}
.gjh-viewer__prev .gjh-viewer__glyph { transform: translateX(3px) rotate(45deg); }
.gjh-viewer__next .gjh-viewer__glyph { transform: translateX(-3px) rotate(-135deg); }
/* A phone: the photo takes the full width, and Previous / Next move down
   beside the count, under the caption, so no control sits on the photo. */
@media (max-width: 767.98px) {
  .gjh-viewer__stage { margin: 70px 8px 0; }
  .gjh-viewer__meta { padding: 12px 16px 16px; }
  .gjh-viewer__count { margin: 8px 64px 0; line-height: 48px; }
  .gjh-viewer__close { top: 10px; right: 10px; }
  .gjh-viewer__prev, .gjh-viewer__next { top: auto; bottom: 16px; margin-top: 0; }
  .gjh-viewer__prev { left: 12px; }
  .gjh-viewer__next { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.gjh-viewer[open], dialog.gjh-viewer[open]::backdrop { animation: none; }
  .gjh-viewer__btn { transition: none; }
}
/* Windows High Contrast repaints backgrounds in its own Canvas colour, which
   would paint Close's two bars out of existence; Previous / Next are drawn
   in border colour, which it keeps visible. So the bars opt out and take
   the system's own text colour. */
@media (forced-colors: active) {
  .gjh-viewer__close .gjh-viewer__glyph::before,
  .gjh-viewer__close .gjh-viewer__glyph::after { forced-color-adjust: none; background: CanvasText; }
}