:root{--paper:#e8eae7;--paper2:#dfe3e0;--ink:#182022;--muted:#68716e;--line:#c5ccc8;--accent:#557d72;--serif:'Space Grotesk',Arial,sans-serif;--sans:'Manrope',Arial,sans-serif;--mono:'DM Mono',monospace}
body{background:var(--paper);color:var(--ink);font-family:var(--sans)}h1,h2,h3{font-family:'Space Grotesk',Arial,sans-serif}em{font-family:'Space Grotesk',Arial,sans-serif!important;font-style:normal!important;font-weight:500!important;letter-spacing:-.065em!important;color:var(--accent)}.hero{background:#172023;color:#edf0ed}.hero .eyebrow,.hero .hero-index{color:#c0c8c4}.hero .eyebrow-line{background:#84a99d}.hero h1{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(44px,5vw,68px);font-weight:600;letter-spacing:-.065em}.hero h1 em{color:#9ab9ae}.hero-intro{color:#bdc5c1}.hero .text-link{color:#edf0ed}.hero .text-link span{color:#9ab9ae}.button-dark{background:#e8edea;color:#172023;font-weight:700}.button-dark:hover{background:#9ab9ae;color:#172023}.hero-portrait{background:#273538}.hero-portrait .portrait-top,.hero-portrait .portrait-bottom{color:#e4e8e6}.portrait-photo{background:#182326}.portrait-photo:before{display:none}.portrait-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.78) contrast(1.04)}.portrait-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#10171914 45%,#101719b3 100%)}.portrait-photo .portrait-caption{color:#f0f2ef;right:18px;bottom:18px;text-shadow:0 1px 8px #0007}.manifesto h2,.section-heading h2,.tools h2,.about-content h2,.project-info h3,.project-card h3,.site-project-info h3,.contact h2,.dialog-inner h2{font-family:'Space Grotesk',Arial,sans-serif;font-weight:500;letter-spacing:-.055em}.section-shell{border-color:var(--line)}.services{background:#e3e6e3}.service-row h3{font-family:'Space Grotesk',Arial,sans-serif;font-weight:500}.service-row:hover{background:#d8dfdb}.work{background:#dfe3e0}.project-visual,.card-graphic{background-color:#cfd5d1}.sheet-window{background:#f1f2ef}.sheet-title h3{font-family:'Space Grotesk',Arial,sans-serif}.principle{background:#182022}.process{background:#e8eae7}.tools{background:#dfe3e0}.about-me{background:#e2e5e2}.contact{background:#172023}.site-footer{background:#111719}.status-pill{color:#44685e;border-color:#719188}.status-muted{color:#65706c;border-color:#aab4af}.project-detail span{color:#557d72}.project-info h3,.project-card h3{font-weight:600}.site-project-art{box-shadow:inset 0 0 0 1px #10171912}.dental-art{background:#d6e0db;color:#263e39}.plumbing-art{background:#26343a;color:#edf0ed}.barber-art{background:#d4d6d1;color:#1c2424}.site-art-name,.barber-circle{font-family:'Space Grotesk',Arial,sans-serif;font-style:normal;font-weight:600}.site-project-info p{color:#59635f}.site-project-info .arrow-link{border-color:#adb7b2}.eyebrow{font-family:var(--mono);color:#52605b}.availability-dot{background:#729788;box-shadow:0 0 0 3px #72978824}.nav-links a,.site-footer nav a{color:#48534f}.site-footer nav a{color:#b9c1bd}.contact-details{border-color:#3d494a;color:#bdc5c1}.contact-action p{color:#bdc5c1}.button-light{background:#e8edea;color:#172023;font-weight:700}.button-light:hover{background:#9ab9ae;color:#172023}.case-dialog{background:#e8eae7}.dialog-close{border-radius:0}.dialog-close:hover{background:#172023;color:#e8eae7}.project-visual{background:#ccd2ce}.status-pill,.button,.project-detail,.site-project-art{border-radius:0}.skip-link:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid #6e988b;outline-offset:4px}
@media(max-width:740px){.hero{background:#172023}.hero-portrait{max-width:100%}.hero-portrait .portrait-art{min-height:0}.hero h1{font-size:clamp(36px,9vw,60px)}.site-header{background:rgba(232,234,231,.97)}.nav-links{background:var(--paper)}.site-project-art{height:280px}}
.footer-contact{display:flex;align-items:center;gap:16px}.footer-contact a{font:8px var(--mono);color:#bdc5c1;white-space:nowrap}.footer-contact a:hover{color:#9ab9ae}@media(max-width:740px){.footer-contact{grid-column:1/-1;grid-row:3;flex-wrap:wrap}.site-footer nav{grid-row:4}}
.site-preview{display:block;padding:0;background:#cdd3d0;cursor:pointer}.site-preview iframe{width:1360px;height:1488px;display:block;border:0;transform:scale(.215);transform-origin:top left;pointer-events:none}.preview-badge{position:absolute;right:12px;top:12px;padding:8px 10px;background:#182022;color:#f0f2ef;font:8px var(--mono);letter-spacing:.08em;z-index:2;box-shadow:0 4px 14px #0003}@media(max-width:1050px) and (min-width:741px){.site-projects{grid-template-columns:repeat(2,minmax(0,1fr))}.site-preview iframe{transform:scale(.29)}}@media(max-width:740px){.site-preview iframe{width:1424px;height:1280px;transform:scale(.25)}}
.contact h2{font-size:clamp(42px,5.3vw,72px);line-height:.98;letter-spacing:-.05em;max-width:700px}
.contact h2{font-size:clamp(42px,5.3vw,72px);line-height:.98;letter-spacing:-.05em;max-width:700px}
.process-item{min-height:100px;gap:20px;align-items:flex-start;padding-top:21px;padding-bottom:18px}.process-item>div{display:grid;gap:5px}.process-item h3{font-size:16px;font-weight:600;letter-spacing:-.025em;margin:0}.process-item p{font-size:11px;line-height:1.55;color:#68716e;margin:0}.process-item:nth-child(even){padding-left:30px}@media(max-width:740px){.process-item{min-height:84px;padding-top:18px}.process-item:nth-child(even){padding-left:14px}.process-item h3{font-size:15px}}
.tools .tool-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 38px}.tools .tool-group{border-top:1px solid var(--line);padding-top:14px}.tools .tool-group h3{font-size:9px;letter-spacing:.08em;color:#47534f;margin-bottom:14px}.tools .tool-tags{gap:7px}.tools .tool-tags span{font-size:9px;padding:8px 9px;line-height:1.3}@media(max-width:740px){.tools .tool-groups{grid-template-columns:1fr;gap:23px}}
.about-me{grid-template-columns:.85fr 1.15fr;align-items:center;gap:10%;padding-top:clamp(100px,11vw,150px);padding-bottom:clamp(105px,12vw,155px);background:linear-gradient(115deg,#e2e5e2 0%,#e7e9e6 100%)}.about-label{padding-top:12px}.about-label .eyebrow{color:#52635d}.about-label h2{font-size:clamp(42px,5.3vw,70px);line-height:1.06;letter-spacing:-.06em;font-weight:500;margin:42px 0 0;color:#202b28}.about-label h2 em{color:#63877b}.about-label .side-index{display:block;margin-top:38px;color:#75817b}.about-content{max-width:820px;border-left:1px solid #b8c4be;padding:18px 0 18px clamp(26px,4vw,58px)}.about-content p{max-width:620px;color:#53615b;font-size:14px;line-height:1.9;margin:0}.about-content p+p{margin-top:22px}.about-content p:last-child{margin-bottom:0}.about-content strong{font-weight:700;color:#315f52}
@media(max-width:740px){.about-me{grid-template-columns:1fr;gap:27px;padding-top:78px;padding-bottom:84px}.about-label{padding-top:0}.about-label h2{font-size:clamp(39px,9vw,57px);margin-top:26px}.about-label .side-index{margin-top:18px}.about-content{padding:0 0 0 19px}.about-content p+p{margin-top:17px}}
.contact-modal-open{overflow:hidden}.contact-dialog{width:min(700px,calc(100% - 28px));max-width:none;max-height:min(90vh,900px);max-height:min(90dvh,900px);overflow-y:auto;margin:auto;padding:0;border:1px solid #aeb8b2;background:#e8eae7;color:#20201e;box-shadow:0 30px 100px #0007}.contact-dialog[open]{animation:contact-dialog-enter .22s ease-out both}.contact-dialog::backdrop{background:rgba(13,20,22,.72);backdrop-filter:blur(4px)}.contact-dialog-inner{padding:clamp(24px,4.5vw,48px)}.contact-dialog .dialog-head{gap:20px}.contact-dialog .dialog-head .eyebrow{font-size:9px}.contact-dialog .dialog-close{flex:0 0 38px;width:38px;height:38px;font-size:23px}.contact-dialog h2{font:500 clamp(34px,5vw,50px)/1.05 'Space Grotesk',Arial,sans-serif;letter-spacing:-.06em;margin:29px 0 12px}.contact-form-description{max-width:530px;margin:0 0 28px;color:#606b65;font-size:13px;line-height:1.75}.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 16px}.contact-form-field{display:flex;flex-direction:column;gap:8px;min-width:0}.contact-form-field label{font-size:11px;font-weight:700;color:#303a36}.contact-form-field label span{color:#63877b}.contact-form-field input,.contact-form-field select,.contact-form-field textarea{width:100%;min-height:45px;padding:11px 12px;border:1px solid #b9c1bc;border-radius:0;background:#f2f3f0;color:#20201e;font:12px var(--sans)}.contact-form-field textarea{min-height:112px;resize:vertical;line-height:1.6}.contact-form-field input::placeholder,.contact-form-field textarea::placeholder{color:#858e89;opacity:1}.contact-form-field input:focus-visible,.contact-form-field select:focus-visible,.contact-form-field textarea:focus-visible{outline:2px solid #63877b;outline-offset:2px;border-color:#63877b}.contact-form-message{grid-column:1/-1}.contact-form-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:23px;padding-top:17px;border-top:1px solid #c2c9c4}.contact-form-required{margin:0;color:#6d7772;font:8px var(--mono)}.contact-form-footer .button{border:0;cursor:pointer}.contact-form-footer .button:focus-visible,.contact-dialog-close:focus-visible{outline:2px solid #63877b;outline-offset:3px}.contact-form-status{margin:19px 0 0;padding:13px 15px;border-left:2px solid #63877b;background:#dbe5df;color:#30443b;font-size:12px;line-height:1.6}.contact-form-status:focus{outline:2px solid #63877b;outline-offset:3px}.contact-form-status[hidden]{display:none}@keyframes contact-dialog-enter{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.contact-dialog{width:calc(100% - 20px);max-height:92vh;max-height:92dvh}.contact-dialog-inner{padding:22px 19px}.contact-dialog h2{margin-top:23px}.contact-form-description{font-size:12px;margin-bottom:22px}.contact-form-grid{grid-template-columns:1fr;gap:15px}.contact-form-message{grid-column:auto}.contact-form-footer{align-items:stretch;flex-direction:column-reverse}.contact-form-footer .button{width:100%}}@media(prefers-reduced-motion:reduce){.contact-dialog[open]{animation:none}}

/* Responsive layouts for tablet and mobile screens. */
@media (max-width: 1000px) {
  .section-shell { padding-left: 7vw; padding-right: 7vw; }
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr); gap: 5%; }
  .hero-copy, .hero-portrait, .project-feature > *, .contact-main > * { min-width: 0; }
}

@media (max-width: 900px) {
  .site-header { height: 70px; padding: 0 6vw; }
  .menu-toggle {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    z-index: 22;
  }
  .menu-toggle i { display: block; width: 16px; height: 1px; background: currentColor; }
  .menu-toggle:focus-visible { outline: 2px solid #63877b; outline-offset: 3px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px 6vw 14px;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(232, 234, 231, .98);
    box-shadow: 0 12px 24px #10171912;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-top: 1px solid #c9cec9; font-size: 13px; }
  .availability { display: none; }
}

@media (max-width: 740px) {
  html { scroll-padding-top: 76px; }
  .section-shell { padding-left: 6vw; padding-right: 6vw; }
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 34px;
    padding-top: 45px;
    padding-bottom: 70px;
  }
  .hero h1 { font-size: clamp(38px, 10vw, 64px); line-height: 1; margin: 25px 0 24px; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero-intro { max-width: 42rem; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
  .hero-portrait { width: 100%; height: clamp(340px, 105vw, 510px); min-height: 320px; }
  .hero-index { bottom: 22px; left: 6vw; }
  .manifesto, .services, .work, .process, .tools, .about-me, .business-sites { padding-top: 78px; padding-bottom: 82px; }
  .manifesto-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 34px; }
  .manifesto h2, .section-heading h2, .tools h2, .about-content h2 { font-size: clamp(38px, 9vw, 58px); }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 38px; }
  .section-heading h2 { margin-top: 20px; }
  .heading-note { max-width: 34rem; }
  .service-row { grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 12px; padding-top: 18px; padding-bottom: 18px; }
  .service-no { padding-top: 4px; }
  .service-row h3 { font-size: 16px; }
  .service-row p { overflow-wrap: anywhere; }
  .project-feature { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .project-visual { min-height: 300px; padding: 6%; }
  .project-info h3 { font-size: clamp(28px, 7vw, 38px); }
  .project-detail { grid-template-columns: minmax(82px, .38fr) 1fr; }
  .project-secondary { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .case-flow { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .contact h2 { font-size: clamp(40px, 11.5vw, 72px); line-height: 1; }
  .contact-action { width: 100%; }
  .contact-action .button { max-width: 100%; }
  .contact-details a { overflow-wrap: anywhere; }
  .site-footer nav { flex-wrap: wrap; gap: 12px 18px; }
  .footer-contact { min-width: 0; }
  .footer-contact a { white-space: normal; overflow-wrap: anywhere; }
  .case-dialog { max-height: 92dvh; overflow-y: auto; }
}

@media (max-width: 420px) {
  .site-header { padding-left: 5vw; padding-right: 5vw; }
  .wordmark { gap: 8px; }
  .hero h1 { font-size: clamp(36px, 10vw, 44px); }
  .hero-portrait { height: 350px; min-height: 300px; }
  .portrait-top, .portrait-bottom { padding: 13px 12px; font-size: 8px; }
  .project-visual { min-height: 250px; }
  .sheet-title { padding: 17px 14px 13px; }
  .sheet-title h3 { font-size: 23px; }
  .contact-details { justify-content: flex-start; }
  .site-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; }
  .site-footer nav { column-gap: 14px; }
  .footer-contact { column-gap: 12px; row-gap: 8px; }
  .case-sections { gap: 16px; }
}

/* Preserve the desktop preview composition and scale it to cover each card. */
.site-preview { position: relative; }
.site-preview iframe {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1360px;
  height: 1488px;
  display: block;
  border: 0;
  transform: scale(var(--preview-scale, .25));
  transform-origin: top left;
  pointer-events: none;
}
@media (max-width: 740px) {
  .site-preview iframe { width: 1424px; height: 1280px; }
}
.contact-form-status[data-state="error"] {
  border-left-color: #9b4f39;
  background: #efe1dc;
  color: #633a30;
}