:root {
  --ink: #20382f;
  --blue: #355b49;
  --paper: #f6f4ed;
  --lime: #c6dbb9;
  --line: #c7d2c4;
  font-family: 'Instrument Sans', Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
body { font-family: 'Instrument Sans', Arial, sans-serif; }
::selection { background: #c6dbb9; color: #20382f; }
:focus-visible { outline-color: #6d9876; }
.site-header { height: 66px; padding-inline: 4%; background: #f6f4ed; color: var(--ink); border-color: #d7dfd1; }
.brand-mark, .brand-name { font-family: 'Bricolage Grotesque', sans-serif; }
.site-header .brand-dot { color: #7da17f; }
.site-header nav { gap: 30px; font-size: 12px; }
.site-header nav a:hover, .header-contact:hover { color: #6b9573; }
.header-contact { gap: 16px; }
.hero-v2 { background: #f6f4ed; color: var(--ink); }
.hero-v2::before { background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #355b4909 calc(25% - 1px) 25%); }
.hero-v2::after { background: #e1ebdc; clip-path: polygon(78% 0, 100% 0, 100% 100%, 60% 100%); }
.hero-topline { padding: 13px 4%; border-color: #d7dfd1; color: #587162; font: 600 10px 'Instrument Sans', sans-serif; letter-spacing: .12em; }
.hero-topline .live-dot { background: #83a783; }
.hero-v2-grid { min-height: 0; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); gap: 4%; padding: 47px 4% 52px; align-items: center; }
.hero-kicker { font: 700 10px 'Instrument Sans', sans-serif; letter-spacing: .16em; color: #5c7964; margin-bottom: 19px; }
.hero-v2 h1 { color: #20382f; font: 600 clamp(45px, 5.15vw, 76px)/1.07 'Fraunces', Georgia, serif; letter-spacing: -.055em; text-transform: none; white-space: nowrap; margin: 0 0 23px; }
.hero-v2 h1 .hero-you { display: inline-block; font: inherit; font-style: normal; letter-spacing: inherit; color: #355b49; background: transparent; padding: 0; margin: 0; transform: none; box-shadow: none; text-decoration: underline; text-decoration-color: #aec6a6; text-decoration-thickness: .065em; text-underline-offset: .13em; }
.hero-v2-bottom { display: block; max-width: 690px; }
.hero-v2 .hero-v2-bottom p { max-width: 640px; font-size: 15px; line-height: 1.55; color: #50655a; }
.hero-v2-bottom strong { color: #294d3c; }
.hero-v2 .hero-actions { flex-direction: row; align-items: center; gap: 22px; margin-top: 20px; }
.hero-v2 .hero-actions .button { min-width: 0; }
.button { min-height: 45px; padding: 12px 17px; font-size: 12px; }
.lime { background: #355b49; color: #fff; }
.lime:hover { background: #294839; }
.text-link { font-size: 12px; }
.hero-v2 .text-link.light { color: #355b49; }
.hero-v2-demo { background: #28493a; color: #fff; border-radius: 5px; padding: 12px; transform: none; box-shadow: 12px 12px 0 #b8cdb5; }
.mini-label, .hero-input-label { font-family: 'Instrument Sans', sans-serif; }
.mini-label { padding: 3px 2px 11px; font-size: 8px; }
.mini-label span:first-child { color: #d2e6cc; }
.mini-live { color: #d2e6cc; }
.preview { background: #fcfaf5; color: #20382f; }
.preview-top, .preview-kicker, .preview-footer { font-family: 'Instrument Sans', sans-serif; }
.preview-top { padding: 13px 17px; }
.preview-top-dot { color: #83a783; }
.preview-body strong { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.05em; }
.shop-products { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 3px; }
.shop-product { display: flex; align-items: center; gap: 8px; min-width: 132px; padding: 5px; border: 1px solid #cbd7c7; background: #fff; font: 700 10px/1.2 'Instrument Sans', sans-serif; }
.product-swatch { flex: none; width: 30px; height: 30px; border-radius: 2px; background: #b7cfb4; }
.shop-product-new { display: none; border-color: #8eae8e; background: #e6f1df; }
.shop-product-new .product-swatch { background: #5f9270; }
.shop-product-new small { display: block; margin-top: 3px; color: #477458; font-size: 7px; letter-spacing: .04em; }
.preview.has-product .shop-product-new { display: flex; animation: pop .35s both; }
.hero-v2-demo .preview-body { min-height: 178px; padding: 19px 19px 18px; }
.hero-v2-demo .preview-body strong { font-size: clamp(28px, 2.55vw, 36px); line-height: 1.02; margin: 14px 0 12px; }
.hero-v2-demo .preview-copy { font-size: 10px; }
.preview.is-accent { background: #c1d8b8; color: #20382f; }
.preview.is-accent .preview-top-dot { color: #355b49; }
.preview.is-blue { background: #355b49; color: #fff; }
.preview-added { background: #355b49; color: #fff; font-family: 'Instrument Sans', sans-serif; }
.hero-input-label { padding: 13px 2px 7px; color: #d2e6cc; font-size: 9px; }
.hero-command { padding: 11px 12px; border: 1px solid #b8cdb5; border-radius: 3px; background: #fcfaf5; color: #20382f; font: 600 12px 'Instrument Sans', sans-serif; }
.hero-command:focus { border-color: #83a783; }
.hero-v2-demo .hero-side-note { margin: 7px 2px 1px; color: #c5d5c5; font: 500 9px/1.4 'Instrument Sans', sans-serif; }
.hero-v2-rail { background: #e1ebdc; color: #355b49; padding: 13px 4%; font: 700 11px 'Instrument Sans', sans-serif; letter-spacing: .06em; }
.hero-v2-rail div span { color: #6e9674; }
.hero-v2-rail a { font-size: 10px; }
.section-pad { padding: 76px 4%; }
.section-index { font-family: 'Instrument Sans', sans-serif; color: #5d8064; margin-bottom: 18px; font-size: 10px; }
.intro { background: #f6f4ed; }
.intro h2, .section-heading h2, .demo-intro h2, .contact h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(42px, 5.6vw, 76px); line-height: 1; letter-spacing: -.055em; }
.intro h2 .blue, .section-heading h2 em { color: #6b9273; }
.intro-row { margin-top: 28px; }
.intro-row p { font-size: 16px; }
.work { background: #edf1e9; }
.section-heading { margin-bottom: 35px; }
.section-heading > p { font-size: 15px; }
.project-grid { gap: 33px 18px; }
.project h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(20px, 2vw, 27px); }
.project-meta { border-color: #9bae9b; }
.demo-section { background: #28493a; }
.demo-intro { margin-bottom: 34px; }
.demo-intro .section-index { color: #c6dbb9; }
.demo-intro h2 span { -webkit-text-stroke: 0; color: #c6dbb9; }
.demo-intro > p:last-child { font-size: 15px; }
.demo-shell-v2 { border: 1px solid #7e9f83; min-height: 0; }
.demo-editor { background: #203b2e; border-color: #7e9f83; }
.demo-editor .chat-symbol { background: #c6dbb9; color: #20382f; }
.demo-panel-top strong { font-family: 'Bricolage Grotesque', sans-serif; }
.editor-inner { padding: 28px 26px; }
.editor-super { color: #c6dbb9; font-family: 'Instrument Sans', sans-serif; margin-bottom: 22px; }
.editor-inner h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(38px, 3.5vw, 53px); letter-spacing: -.06em; margin-bottom: 25px; }
.editor-label, .instant-indicator, .example-list > p { font-family: 'Instrument Sans', sans-serif; }
.editor-inner textarea { min-height: 98px; background: #fcfaf5; color: #20382f; border-color: #a6c39e; font-family: 'Instrument Sans', sans-serif; font-size: 15px; }
.editor-inner textarea:focus { box-shadow: 4px 4px 0 #a6c39e; }
.instant-indicator { color: #c6dbb9; }
.instant-pulse { background: #c6dbb9; box-shadow: 0 0 0 5px #c6dbb933; }
.editor-feedback { margin: 18px 0 15px; }
.example-list button { font-family: 'Instrument Sans', sans-serif; }
.demo-preview-wrap { background: #e5ece3; padding: 17px; }
.demo-shell-v2 .large-preview { min-height: 450px; }
.large-preview .preview-body { padding: 37px clamp(26px, 4vw, 58px); }
.demo-shell-v2 .large-preview .preview-body strong { font-size: clamp(42px, 4.3vw, 65px); }
.large-preview .shop-products { gap: 12px; }
.large-preview .shop-product { min-width: 172px; padding: 8px; font-size: 12px; }
.large-preview .product-swatch { width: 46px; height: 46px; }
.large-preview .shop-product-new small { font-size: 8px; }
.demo-foot p { color: #d7e4d7; }
.approach { background: #f6f4ed; }
.steps li { padding: 23px 0; border-color: #b7c4b6; }
.steps li:hover { background: #e7eee5; }
.step-number { font-family: 'Bricolage Grotesque', sans-serif; }
.steps h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(23px, 2.65vw, 36px); }
.about { background: #cddfc7; }
.about-type, .about h2 { font-family: 'Bricolage Grotesque', sans-serif; }
.about-type { font-size: clamp(67px, 9.5vw, 145px); }
.about-type .type-dot { color: #6c9674; }
.about p:not(.section-index) { font-size: 16px; }
.contact { background: #203b2e; }
.contact .section-index { color: #c6dbb9; }
.contact h2 { font-size: clamp(57px, 8.5vw, 125px); margin: 22px 0 52px; }
.contact h2 em, .contact-arrow { color: #c6dbb9; }
.contact-bottom p { font-size: 16px; }
.contact-link { background: #c6dbb9; color: #20382f; font-family: 'Bricolage Grotesque', sans-serif; font-size: 25px; }
.contact-link small { font-family: 'Instrument Sans', sans-serif; }
footer { background: #203b2e; border-color: #6b8c75; font-family: 'Instrument Sans', sans-serif; }

@media (max-width: 1200px) {
  .hero-v2-grid { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .8fr); gap: 3%; }
  .hero-v2 h1 { font-size: clamp(43px, 5.25vw, 66px); }
}
@media (max-width: 760px) {
  .site-header { height: 60px; padding-inline: 5%; }
  .hero-v2::after { clip-path: polygon(0 64%, 100% 59%, 100% 100%, 0 100%); }
  .hero-topline { padding: 12px 5%; }
  .hero-v2-grid { display: block; padding: 37px 5% 39px; }
  .hero-v2 h1 { font-size: clamp(40px, 7.8vw, 60px); margin-bottom: 20px; }
  .hero-v2 .hero-actions { margin-top: 20px; flex-direction: row; }
  .hero-v2-demo { margin: 35px auto 0; max-width: 500px; }
  .hero-v2-rail { padding: 13px 5%; }
  .section-pad { padding: 57px 5%; }
  .intro h2, .section-heading h2, .demo-intro h2 { font-size: clamp(42px, 8vw, 64px); }
  .intro-row { margin-top: 24px; }
  .section-heading > p { margin-top: 20px; }
  .demo-shell-v2 .large-preview { min-height: 390px; }
  .editor-inner { min-height: 0; }
  .about-type { margin-bottom: 38px; }
  .contact h2 { font-size: clamp(55px, 9vw, 90px); }
}
@media (max-width: 520px) {
  .hero-v2 h1 { font-size: clamp(35px, 8.7vw, 46px); letter-spacing: -.075em; white-space: normal; }
  .hero-v2 h1 > span { display: inline; }
  .hero-v2 h1 .hero-you { white-space: nowrap; }
  .hero-v2 .hero-v2-bottom p { font-size: 14px; }
  .hero-v2 .hero-actions { align-items: flex-start; gap: 14px; flex-direction: column; }
  .hero-v2-demo { margin-top: 25px; box-shadow: 8px 8px 0 #b8cdb5; }
  .hero-v2-demo .preview-body { min-height: 125px; padding: 14px 19px; }
  .hero-v2-demo .preview-body strong { font-size: 27px; margin: 8px 0 0; }
  .hero-v2-demo .preview-rule, .hero-v2-demo .preview-copy { display: none; }
  .hero-v2-rail { font-size: 9px; }
  .section-pad { padding-block: 51px; }
  .project-grid { gap: 25px; }
  .demo-shell-v2 .large-preview .preview-body strong { font-size: 43px; }
  .about-type { font-size: 15vw; }
  .contact h2 { font-size: clamp(50px, 11vw, 68px); }
}

/* A clear handover: built by Rob, continued by the customer. */
.idea-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8%;align-items:start;padding-block:100px;background:#f6f4ed;scroll-margin-top:80px}
.idea-heading{position:sticky;top:100px}.idea-section .section-index{font-size:13px;letter-spacing:.12em;margin:0 0 30px}
.idea-section h2{font:600 clamp(48px,6.4vw,88px)/1.02 'Fraunces',Georgia,serif;letter-spacing:-.055em;margin:0 0 28px}.idea-section h2 em{font-style:normal;color:#62836b}
.idea-lead{font-size:18px;line-height:1.65;max-width:370px;color:#50655a;margin:0 0 26px}.idea-demo-link{display:inline-flex;padding:13px 0;border-bottom:1px solid #355b49;font-size:16px;font-weight:600}
.idea-flow{display:grid;gap:18px}.idea-card{padding:32px 34px;border-radius:16px;overflow:hidden}.idea-build{background:#e6ecdf;border:1px solid #d6e0d0}.idea-grow{background:#244535;color:#fff}
.idea-card-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;font-size:13px;font-weight:700;letter-spacing:.1em}.idea-step{font:500 30px 'Fraunces',Georgia,serif;opacity:.55;letter-spacing:-.04em}
.idea-card h3{font:600 clamp(26px,3vw,38px)/1.12 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em;margin:0 0 16px}.idea-card>p{font-size:16px;line-height:1.65;max-width:480px;margin:0;color:#4b6253}.idea-grow>p{color:#dbe7dd}
.idea-deliverables{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.idea-deliverables span{border:1px solid #b9cbb6;border-radius:40px;padding:7px 12px;font-size:14px}
.idea-example{margin-top:24px;background:#f6f4ed;color:#20382f;border-radius:12px 12px 3px 12px;padding:18px 20px}.idea-example>span{font-size:13px;color:#617366}.idea-example p{font-size:17px;line-height:1.5;margin:8px 0 0}.idea-try{display:inline-block;margin-top:21px;font-size:14px;text-decoration:underline;text-underline-offset:5px;color:#d8e8c8}
.idea-demo-link:hover,.idea-try:hover{opacity:.75}
@media(max-width:800px){.idea-section{grid-template-columns:1fr;gap:35px;padding-block:65px}.idea-heading{position:static}.idea-section h2{font-size:clamp(46px,9vw,68px)}.idea-lead{max-width:560px}.idea-flow{grid-template-columns:1fr 1fr;gap:14px}.idea-card{padding:25px}.idea-card h3{font-size:28px}}
@media(max-width:580px){.idea-flow{grid-template-columns:1fr}.idea-section{padding-block:52px;gap:30px}.idea-section .section-index{margin-bottom:23px}.idea-section h2{font-size:48px}.idea-card{padding:25px 23px}.idea-lead{font-size:17px}.idea-card-top{margin-bottom:18px}}