:root {
  color-scheme: light;
  --paper:#f8f5ed; --ink:#132a24; --green:#194639; --deep:#102f27;
  --cream:#f6eddd; --brass:#b38b49; --rule:#d1cbbd; --muted:#475a50;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing:border-box }
body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.55 var(--sans) }
a { color:inherit; text-decoration-thickness:.09em; text-underline-offset:.22em }
a:hover { text-decoration:underline }
a:focus-visible { outline:3px solid #be6b25; outline-offset:4px; border-radius:2px }
.skip { position:fixed; inset:8px auto auto 8px; transform:translateY(-165%); background:#fff; color:#102f27; padding:.65rem 1rem; z-index:5 }
.skip:focus { transform:none }
.wrap { width:min(88%,1240px); margin-inline:auto }
.mast { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--rule) }
.brand { display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; font:600 1.48rem/.92 var(--serif); letter-spacing:-.045em }
.brand:hover { text-decoration:none }
.brand small { display:block; font:700 .59rem/1.2 var(--sans); letter-spacing:.28em; margin-top:.34rem }
.brand-shield { display:block; width:29px; height:34px; background:linear-gradient(90deg,#c59b59 0 48%,#173d32 48%); clip-path:polygon(0 6%,50% 0,100% 6%,98% 48%,90% 71%,74% 86%,50% 100%,26% 86%,10% 71%,2% 48%); position:relative }
.brand-shield::after { content:""; position:absolute; height:57%; width:2px; top:18%; left:48%; background:#f9e2b3; box-shadow:0 0 0 1px #6a592e }
nav { display:flex; align-items:center; gap:clamp(.7rem,2.4vw,2.2rem) }
nav a,.foot a { display:inline-flex; min-height:44px; align-items:center; gap:.5rem; font-weight:650; font-size:.86rem; text-decoration:none }
.nav-contact { border:1px solid #819185; padding:0 .9rem; border-radius:25px }
.hero { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(2rem,6.5vw,7rem); align-items:center; padding-block:clamp(2.5rem,4.4vw,4.8rem) clamp(3rem,5vw,5.5rem) }
.hero-copy { min-width:0 }
.kicker { display:flex; align-items:center; gap:.67rem; font:700 .68rem/1.45 var(--sans); text-transform:uppercase; letter-spacing:.13em; margin:0 0 1.25rem; color:#3d5e4e }
.kicker span { width:1.8rem; height:2px; background:var(--brass); flex:none }
h1,h2,h3,p,figure,dl,dd { margin:0 }
h1,h2,h3 { font-family:var(--serif); font-weight:400 }
h1 { font-size:clamp(4.2rem,7.1vw,7.2rem); line-height:.94; letter-spacing:-.065em }
h1 em,h2 em { font-weight:400; color:var(--green); font-family:var(--serif) }
h1 em { display:inline-block; padding:.02em .08em .04em 0 }
.hero-sub { margin:1.1rem 0 .65rem; max-width:27ch; font:400 clamp(1.25rem,1.75vw,1.8rem)/1.22 var(--serif); letter-spacing:-.025em }
.hero-body,.prose p,.contact-body>p { max-width:51ch; color:var(--muted) }
.hero-body { font-size:clamp(.99rem,1.15vw,1.09rem) }
.email-action { margin-top:1.55rem }
.button { width:fit-content; display:inline-flex; justify-content:center; align-items:center; min-height:48px; gap:.7rem; padding:.68rem 1.08rem; color:var(--paper); background:var(--green); border:1px solid var(--green); border-radius:3px; font:650 .94rem/1.3 var(--sans); text-decoration:none }
.button span:last-child { margin-left:.3rem; font-size:1.05rem }
.button:hover { background:var(--deep); text-decoration:none }
.envelope { display:inline-block; width:16px; height:12px; border:1.4px solid currentColor; position:relative; flex:none; border-radius:1px; overflow:hidden }
.envelope::after { content:""; position:absolute; width:9px; height:9px; top:-6px; left:2px; border:1.3px solid currentColor; transform:rotate(45deg) }
.address { display:block; font-size:.87rem; color:#495d51; margin-top:.45rem; overflow-wrap:anywhere; user-select:all; width:max-content; max-width:100% }
.portrait { margin:0; align-self:center; width:100% }
.portrait-field { width:100%; aspect-ratio:1.1; display:grid; place-items:center; position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 50% 48%,#365948,#173e32 57%,#103126 100%) }
.rays { position:absolute; inset:-8%; z-index:-1; background:repeating-conic-gradient(from 13deg at center,transparent 0 5.8deg,rgba(233,219,167,.15) 5.9deg 6deg,transparent 6.1deg 12deg); }
.portrait-field::before,.portrait-field::after { content:""; position:absolute; z-index:-1; border:1px solid #98a17c77; aspect-ratio:1/1; width:74%; border-radius:50% }
.portrait-field::after { width:79%; border-color:#b8b38a66 }
.portrait-field img { display:block; width:68%; height:auto; border-radius:50%; box-shadow:0 6px 22px #071d1870 }
.corner { position:absolute; width:17px; height:17px; border:1px solid #bba46e; opacity:.8 }
.c1 { top:18px; left:18px; border-right:0; border-bottom:0 }
.c2 { top:18px; right:18px; border-left:0; border-bottom:0 }
.c3 { bottom:18px; left:18px; border-right:0; border-top:0 }
.c4 { bottom:18px; right:18px; border-left:0; border-top:0 }
figcaption { display:flex; align-items:center; gap:.65rem; border-bottom:1px solid var(--rule); padding:.83rem 0; font:600 .95rem/1.15 var(--serif) }
figcaption small { font:500 .74rem/1.25 var(--sans); color:var(--muted); margin-left:.45rem }
.seal { color:#8b672b; font-size:1.08rem }
.section { padding-block:clamp(3.4rem,6vw,6rem) }
.services,.pricing { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.45fr); gap:clamp(2.5rem,7vw,7.5rem); border-top:1px solid var(--rule) }
h2 { font-size:clamp(2.6rem,4vw,4.3rem); line-height:1.02; letter-spacing:-.055em }
.section-intro .kicker,.work-head .kicker,.contact .kicker { margin-bottom:.85rem }
.service-list { border-top:1px solid var(--rule) }
.service-list>div { display:grid; grid-template-columns:.95fr 1.25fr; gap:1.3rem; padding:1.05rem 0 1.2rem; border-bottom:1px solid var(--rule) }
dt { font:500 clamp(1.16rem,1.45vw,1.45rem)/1.18 var(--serif); letter-spacing:-.02em }
dd,.work-grid p { font-size:.95rem; line-height:1.48; color:var(--muted) }
.demos { background:var(--deep); color:var(--paper); }
.demos .kicker,.contact .kicker { color:#d9c8a2 }
.demos h2 em,.contact h2 em { color:#e4c790 }
.work-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.25rem; margin-bottom:2rem }
.subtle-link,.work-grid a { display:inline-flex; align-items:center; gap:.42rem; width:fit-content; font-size:.89rem; font-weight:650; min-height:44px }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.3rem,3vw,3rem) }
.work-grid article { min-width:0; border-top:1px solid #698070; padding-top:1.2rem; }
.work-grid h3 { font-size:clamp(1.45rem,2.2vw,2rem); line-height:1.2; margin:.85rem 0 .5rem; letter-spacing:-.045em }
.work-grid p { color:#d2dfd4; max-width:35ch; margin-bottom:.42rem }
.work-grid .offer { color:#e6c98f; font:italic 1.02rem/1.4 var(--serif) }
.work-grid a { display:flex; color:#faf4e8; min-height:40px }
.work-mark { width:42px; height:35px; position:relative; color:#d3b676; overflow:hidden }
.work-mark i { display:block; position:absolute }
.museum i { inset:13px 3px 1px; border-block:2px solid; background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 9px) }
.museum::before { content:""; display:block; position:absolute; left:8px; width:25px; height:23px; top:2px; border-top:2px solid; border-left:2px solid; transform:rotate(45deg) skew(-16deg,-16deg) }
.calculator { width:40px; background:repeating-linear-gradient(0deg,transparent 0 8px,#7388736b 8px 9px),repeating-linear-gradient(90deg,transparent 0 8px,#7388736b 8px 9px); border-left:1px solid; border-bottom:1px solid }
.calculator i { width:24px; height:38px; border:2px solid; border-top:0; top:-14px; left:8px; border-radius:0 0 60% 60%; transform:rotate(20deg) }
.book i { inset:4px 5px 2px; border:2px solid; border-radius:1px 4px 4px 1px }
.book i::before { content:""; position:absolute; inset:0 auto 0 4px; border-left:1px solid }
.arcade i { width:11px; height:11px; left:1px; top:17px; background:currentColor; box-shadow:12px 0 currentColor,24px 0 currentColor,12px -12px currentColor; }
.pricing { border-top:0 }
.prose p+p { margin-top:.85rem }
.prose .lead { font:400 clamp(1.35rem,1.75vw,1.75rem)/1.24 var(--serif); color:var(--ink); letter-spacing:-.025em; max-width:35ch }
.contact { background:#1e4436; color:var(--paper) }
.contact>.wrap { display:grid; grid-template-columns:.9fr 1.45fr; gap:clamp(2.5rem,7vw,7.5rem); padding-block:clamp(3rem,5.5vw,5rem) }
.contact .button { background:#ebd8aa; border-color:#ebd8aa; color:#1c3126; margin-top:1.1rem }
.contact .button:hover { background:#f7e9c9 }
.contact .address { color:#e4ecdf }
.contact-body>p { color:#ecf0e7 }
.contact .contact-note { margin-top:1.05rem; font-size:.87rem; color:#d7e1d4 }
.foot { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; gap:1rem; color:#43564b; font-size:.83rem }
.foot>span { font:600 .98rem var(--serif); color:var(--ink) }
@media(max-width:960px) {
  .hero { gap:2rem; grid-template-columns:1.05fr .95fr }
  figcaption small { display:block; margin:.2rem 0 0 }
  .services,.pricing,.contact>.wrap { gap:2.5rem; grid-template-columns:.8fr 1.4fr }
}
@media(max-width:745px) {
  .wrap { width:min(90%,620px) }
  .mast { gap:.45rem; padding:.75rem 0 }
  .brand { font-size:1.23rem; gap:.4rem }
  .brand-shield { width:23px; height:27px }
  .brand small { font-size:.53rem; margin-top:.2rem }
  nav { gap:.8rem } nav a { font-size:.8rem }
  .nav-contact { min-height:39px; padding-inline:.6rem } .nav-contact span { display:none }
  .hero { grid-template-columns:1fr; gap:1.7rem; padding-block:2.2rem 2.5rem }
  .hero h1 { font-size:clamp(4rem,12.8vw,6.4rem) }
  .hero-body { max-width:47ch }
  .hero-sub { max-width:34ch; margin-top:.82rem }
  .portrait-field { aspect-ratio:1.52 }
  .portrait-field img { width:49% }
  .portrait-field::before { width:54% } .portrait-field::after { width:59% }
  figcaption small { display:inline; margin:0 0 0 .4rem }
  .section { padding-block:2.8rem }
  .services,.pricing,.contact>.wrap { grid-template-columns:1fr; gap:1.4rem }
  .desktop { display:none }
  .work-head { flex-wrap:wrap; align-items:center; margin-bottom:1.2rem }
  .work-grid { grid-template-columns:1fr; gap:1.45rem }
  .work-grid article { padding-top:1rem; padding-left:3.5rem; position:relative }
  .work-grid .work-mark { position:absolute; left:0; top:1.4rem; transform:scale(.84); transform-origin:left top }
  .work-grid h3 { margin:.1rem 0 .45rem }
  .work-grid p { max-width:48ch }
  .work-grid a { min-height:44px }
  .contact>.wrap { padding-block:2.7rem }
}
@media(max-width:430px) {
  .wrap { width:calc(100% - 36px) }
  nav { gap:.56rem }
  nav a { font-size:.75rem }
  .nav-contact { min-height:44px; border:0; padding:0 }
  .brand-shield { width:21px; height:25px }
  .kicker { font-size:.62rem; margin-bottom:.85rem }
  .service-list>div { grid-template-columns:1fr; gap:.3rem }
  figcaption small { display:block; margin:.12rem 0 0 }
}
@media(max-width:360px) {
  .wrap { width:calc(100% - 28px) } .brand { font-size:1.1rem }
  nav { gap:.45rem } nav a { font-size:.72rem } .brand-shield { display:none }
  .hero h1 { font-size:3.72rem } .button { max-width:100%; gap:.42rem; padding-inline:.8rem }
}
.arrow { display:inline-block; flex:none; position:relative; width:.65rem; height:.65rem; border-top:1.6px solid; border-right:1.6px solid }
.arrow::after { content:""; position:absolute; height:1.55px; width:.8rem; right:-.5px; top:-.5px; background:currentColor; transform:rotate(-45deg); transform-origin:right center }
.arrow.up { transform:rotate(-45deg) scale(.85) }
.arrow.down { transform:rotate(135deg) scale(.85) }