/* Homepage: compact editorial system for a small independent practice. */
:root{--paper:#f9f8f4;--white:#fffefa;--navy:#202720;--soft:#424b42;--line:#cfd4c8;--accent:#22583f;--shell:1120px}
body{line-height:1.72}
.head{box-shadow:none;background:transparent}
.top{height:73px}.top .brand{font-size:19px}.top nav{gap:26px}.top nav a{color:var(--soft)}
.btn,.btn.small{border-radius:3px;background:var(--navy);border-color:var(--navy);padding:9px 13px;gap:9px}.btn:hover{background:var(--accent)}
.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,6vw,88px);padding-block:clamp(42px,7vw,96px);align-items:start}
.hero-copy{padding-top:clamp(5px,2.1vw,32px)}
.eyebrow{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.08em;margin-bottom:18px}
.hero h1{font-size:clamp(2.3rem,4vw,4.1rem);line-height:1.2;font-weight:790;letter-spacing:-.037em;margin-bottom:22px}
.hero .lead{font-size:clamp(1rem,1.5vw,1.1rem);max-width:30em;line-height:1.9;margin-bottom:22px}
.actions{flex-wrap:wrap;gap:11px 19px}.hero .quiet{font-size:14px;text-decoration:underline;text-underline-offset:4px}
.hero .demo{color:var(--navy);background:var(--white);border:1px solid #929b8c;border-radius:3px;box-shadow:none}
.demo-top{padding-inline:17px;height:39px;color:var(--soft);background:#e9ece3;border-color:var(--line);font:650 12px/1 system-ui,sans-serif;letter-spacing:.03em}
.demo-pad{padding:17px}.demo h2{font-size:21px;line-height:1.3;margin:0 0 7px}.demo p,.demo-controls label{color:var(--soft)}
.demo-controls{flex-wrap:wrap}.demo-controls select{background:#fff;color:var(--navy);border-color:#8c9988}.demo-controls button{background:var(--accent);color:white;border-radius:3px}.demo-controls button:hover{background:#347152}.demo-controls button svg,.lab-next svg{vertical-align:middle}
.demo th,.demo td{border-color:var(--line)}.demo th,.demo tr.cancelled td{color:var(--soft)}
.results{color:var(--navy);background:#edf1e8;border-color:#d5dbce;border-radius:2px}.demo-files button{color:var(--accent)}.demo-files button:disabled{color:#657063}.lab-next{border-color:var(--line)}
.block{padding-block:clamp(41px,5.3vw,73px);scroll-margin:12px}
.section-intro{margin-bottom:24px}.section-intro h2,.contact-copy h2{font-size:clamp(1.9rem,3.2vw,2.9rem);letter-spacing:-.035em;line-height:1.2;margin-bottom:11px}.section-intro .eyebrow{margin-bottom:10px}
.work{background:#edf0e8;border-color:var(--line)}
.case-list{list-style:none;margin:0;padding:0;border-top:1px solid #9ead9c}
.case-list>li{border-bottom:1px solid #bfcabb}
.case{display:grid;grid-template-columns:50px minmax(0,1.6fr) minmax(0,1fr);align-items:start;column-gap:clamp(12px,3vw,40px);padding-block:22px}
.case-no{font:500 .8rem/1.4 ui-monospace,monospace;color:var(--accent);padding-top:3px}
.case-type{font-size:12px;color:var(--soft);margin:0 0 4px}.case h3{margin:0 0 5px;font-size:clamp(1.14rem,2vw,1.46rem);line-height:1.4}.case h3 a{text-decoration:none}.case h3 a:focus-visible,.case-proof a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.case h3 a:hover{text-decoration:underline;text-underline-offset:4px}.case h3 a span{font-size:.8em;color:var(--accent)}
.case p:not(.case-type){margin:0;color:var(--soft);font-size:14px}.case .case-proof{border-left:1px solid #bac6b8;padding-left:16px;align-self:center;overflow-wrap:anywhere}.case-proof code{font-size:12px}.case-proof a{color:var(--accent);text-underline-offset:3px}.case-proof small{display:block;margin-top:3px;font-size:.85em}
.services{display:block;border-top:1px solid #a5af9f}
.service-group{border-bottom:1px solid var(--line);min-width:0}
.service-group summary{
  list-style:none;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.15fr) 24px;
  gap:10px clamp(10px,2.5vw,32px);align-items:center;min-height:68px;padding:13px 0;cursor:pointer;
}
.service-group summary::-webkit-details-marker{display:none}
.service-group summary::marker{content:""}
.service-group summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.service-title{font-weight:760;color:var(--navy);font-size:clamp(1.04rem,1.6vw,1.22rem)}
.service-hint{font-size:.875rem;color:var(--soft);line-height:1.5}
.service-indicator{position:relative;width:24px;height:24px;color:var(--accent);opacity:.9;justify-self:end}
.service-indicator::before,.service-indicator::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.service-indicator::after{transform:translate(-50%,-50%) rotate(90deg)}
.service-group[open] .service-indicator::after{display:none}
.service-group summary:hover .service-title,.service-group[open] .service-title{color:var(--accent)}
.service-group dl{margin:0 0 12px;border-top:1px solid var(--line)}
.service-group dl>div{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.15fr) 24px;gap:5px clamp(10px,2.5vw,32px);padding:13px 0}
.service-group dl>div+div{border-top:1px solid var(--line)}
.service-group dt{font-size:.94rem;font-weight:730}
.service-group dd{margin:0;color:var(--soft);font-size:.92rem;line-height:1.65}
.service-group .service-note{margin:0;padding:3px 0 19px;color:var(--soft);font-size:.85rem;line-height:1.65}
.quality,.process{border-top:1px solid var(--line);border-bottom:0;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,4vw,55px)}
.quality-grid{background:none;border-width:1px 0;border-radius:0;padding:0}.quality-row{padding:11px 0}.steps li::before{background:none;border:1px solid var(--line);border-radius:2px;color:var(--accent)}
.faq details{border-width:0 0 1px;border-radius:0;background:none;padding:8px 0}
.contact-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,5vw,70px);border-top:1px solid var(--line)}
.contact-copy a{color:var(--accent);overflow-wrap:anywhere;text-underline-offset:3px}.contact-copy>p:not(.eyebrow){color:var(--soft)}
#contact-form-panel{padding:0;border:0;border-radius:0;background:transparent;min-width:0}
#contact-form-panel h3{font-size:1.2rem;margin:0 0 .4rem}#contact-form-panel>p{font-size:14px;color:var(--soft)}
#contact-form-panel input,#contact-form-panel textarea{background:var(--white);border:1px solid #879486;border-radius:3px}
#contact-form-panel button{border-radius:3px;background:var(--navy)}
#contact-form :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.footer{border-top:1px solid var(--line);padding-block:16px 24px}.footer a{white-space:nowrap}
@media(max-width:760px){
  .hero,.quality,.process,.contact-layout{grid-template-columns:minmax(0,1fr);gap:21px}.hero{padding-block:34px 41px}.hero-copy{padding-top:0}.hero h1{font-size:clamp(2.08rem,7.8vw,3.4rem)}.hero .eyebrow{margin-bottom:13px}
  .service-group summary{grid-template-columns:minmax(0,1fr) 24px;gap:2px 10px;min-height:70px}
  .service-title,.service-hint{grid-column:1}
  .service-indicator{grid-column:2;grid-row:1 / span 2}
  .service-group dl>div{grid-template-columns:minmax(0,1fr);padding:12px 0}
  .case{grid-template-columns:2.35rem minmax(0,1fr);column-gap:2px;row-gap:11px;padding-block:17px}
  .case .case-proof{grid-column:2;padding-left:8px}
}
@media(max-width:700px){.top{height:auto;gap:7px}.top nav{gap:18px}.top .brand{font-size:18px}}
@media(max-width:360px){.hero h1{font-size:1.94rem}.demo-pad{padding-inline:12px}}

/* Brand signature, portfolio evidence, and the actual deliverables. */
.hero-byline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 11px;text-transform:none}
.hero-byline>span{height:1px;width:24px;background:#739181}
.work .section-intro{max-width:43rem}
.case{padding-block:clamp(22px,3.5vw,38px);align-items:center}
.case-no{align-self:start;font-size:.88rem;padding-top:5px}
.case .case-proof{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.proof-specimen{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:9px;row-gap:2px;margin-top:11px;padding:7px 8px;background:#f9f8f4;border-top:1px solid #c4cfc1;font:500 .75rem/1.55 ui-monospace,system-ui,sans-serif;color:var(--navy)}
.proof-specimen b{font-weight:750;color:var(--accent);white-space:nowrap}
.process .section-intro{max-width:25rem}
.delivery-steps{border-top:2px solid var(--accent);margin-bottom:23px}
.delivery-steps li{grid-template-columns:31px 1fr;gap:4px clamp(10px,2vw,19px);margin:0;padding:16px 0 17px}
.delivery-steps li::before{border:0;font-weight:700;width:auto;justify-content:start;height:auto;padding-top:5px}
.delivery-steps h3,.delivery-steps p,.delivery-steps small{grid-column:2;margin:0}
.delivery-steps h3{font-size:1.08rem;line-height:1.45}
.delivery-steps p,.delivery-steps small{color:var(--soft);font-size:.88rem;line-height:1.7}
.delivery-steps small b{color:var(--accent);margin-right:5px}
.studio-footer{display:flex;align-items:center;flex-wrap:wrap;row-gap:14px;padding-block:21px 25px}
.footer-brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--navy)}
.footer-brand strong{display:block;line-height:1.3}
.footer-brand small{display:block;font-size:.78rem;color:var(--soft)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 17px}
.footer-links a{color:var(--accent);text-underline-offset:4px}
@media(max-width:540px){.case{padding-block:19px}.proof-specimen{margin-top:8px}.studio-footer{align-items:flex-start;flex-direction:column}}
.case-arrow{display:inline-block;width:.53em;height:.53em;vertical-align:.19em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;position:relative;margin-left:.23em}
.case-arrow::before{content:"";position:absolute;top:100%;left:-15%;width:141%;height:1.5px;background:currentColor;transform-origin:left center;transform:rotate(-45deg)}

#contact-feedback[data-state="idle"]{height:0;margin-top:-1rem}
#contact-feedback:not([data-state="idle"]){padding:.85rem 1rem;border:1px solid var(--line);border-radius:6px;background:var(--white)}
#contact-feedback[data-state="success"]{border-color:var(--accent);background:#eff7ef}
#contact-feedback[data-state="error"]{border-color:#925326;background:#fff7ed}
#contact-feedback>p{margin:0}
#contact-feedback>p+p:not([hidden]){margin-top:.3rem}
#contact-form-status{font-weight:700;color:var(--ink);min-height:0}
#contact-feedback[data-state="success"] #contact-form-status{font-size:1.12rem}
#contact-receipt,#contact-email-fallback{overflow-wrap:anywhere}
#contact-email-fallback a,#contact-email-always a{color:var(--accent);text-underline-offset:3px}

.technology-note{margin-top:1.25rem;padding:1rem 0 0;border-top:1px solid var(--line);max-width:50rem}
.technology-note h3{margin:0 0 .35rem;font-size:1rem}
.technology-note p{margin:0;color:var(--soft);font-size:.9rem}
.technology-note a{color:var(--accent);text-underline-offset:3px}
#contact-form-panel .contact-availability{font-weight:650;color:var(--ink)}