/* Shared finishing styles and editorial layouts. All pages load home.css first. */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
:root { --muted: #586b61; }
:focus-visible { outline: 3px solid #bc512e; outline-offset: 5px; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
main { min-width: 0; }
#main-nav { gap: 1.25rem; }
#main-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--orange); }
.site-footer .footer-top p { margin: 0; color: var(--muted); font-size: .9rem; }
.hero-copy, .hero-art, .work-card, .service, .enquiry-card { min-width: 0; }
.hero-copy h1 { text-wrap: balance; }
.hero-art:has(.web-card) { grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr); gap: 16px; }
.hero-art:has(.web-card) > :is(.art-topline, .sketch-note, .idea-card, .ai-card, .cloud-label, .art-bottomline) { grid-column: 1 / -1; }
.hero-art:has(.web-card) .web-card { align-self: stretch; }
.hero-art:has(.web-card) .mobile-card { justify-content: space-between; }
.hero-art:has(.web-card) .mock-heading { font-size: .75rem; }
.hero-art:has(.web-card) .mock-content > .tiny-text { font-size: .6rem; }
.hero-art:has(.web-card) .phone-button { width: 100%; justify-content: space-between; }
.hero-art:has(.web-card) .tiny-text { font-size: .7rem; }
.hero-art:has(.web-card) .blueprint-card { z-index: 1; }
.mock-chart i:nth-child(3n) { height: 95%; }
.mock-chart i:nth-child(2n) { height: 75%; }
.mock-chart i:nth-child(4n) { height: 45%; }
.work-visual { min-height: 340px; }
.work-card-copy { flex: 1; }
.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-email { overflow-wrap: anywhere; }
.service .workflow-outputs { flex-wrap: wrap; }
.service .workflow-outputs span { white-space: normal; }
.mobile-contact { padding-bottom: max(.95rem, env(safe-area-inset-bottom)); }
.email-options textarea { width: 100%; min-height: 150px; padding: 12px; }
.page-hero { padding: 76px 0 62px; background: var(--paper); border-bottom: 1px solid var(--line); }
.page-hero .container { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: center; gap: 64px; }
.page-hero h1 { font-size: clamp(2.8rem, 5vw, 4.6rem); max-width: 800px; }
.page-hero h1 em { color: var(--green-deep); }
.page-hero .hero-description { max-width: 650px; margin: 24px 0; }
.page-hero .eyebrow { margin-bottom: 20px; }
.page-panel { background: var(--green-deep); color: var(--lime); padding: 30px; border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.page-panel::after { content: ''; position: absolute; width: 180px; height: 180px; border: 1px solid #ffffff18; border-radius: 50%; right: -100px; top: -60px; }
.page-panel > span { display: block; font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; margin-bottom: 22px; }
.page-panel > div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #ffffff25; padding: 13px 0; font-size: .9rem; }
.page-panel strong { color: var(--white); font-weight: 500; }
.blog-content { padding: 60px 0; }
.blog-layout, .blog-main, .blog-main-full, .blog-article, .article-content { min-width: 0; }
.blog-main { padding: 0; }
.blog-main-full > .container { padding-top: 15px; padding-bottom: 30px; }
.article-header { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 32px; }
.article-header h2 { font-size: 2rem; margin-bottom: 22px; }
.article-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .85rem; }
.article-category { background: var(--lime); color: var(--green-deep); border-radius: 30px; padding: 5px 14px; }
.article-content { color: var(--ink-soft); line-height: 1.8; }
.lead { font-size: 1.1rem; max-width: 850px; }
.pattern-section { margin: 48px 0; }
.pattern-section h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 18px; }
.pattern-section > p { max-width: 900px; color: var(--ink-soft); margin-bottom: 26px; }
.pattern-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); margin-bottom: 14px; overflow: hidden; }
.pattern-card:hover { border-color: var(--sage); }
.pattern-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; cursor: pointer; list-style: none; background: var(--paper-warm); }
.pattern-header::-webkit-details-marker { display: none; }
.pattern-header h3 { margin: 0; font-size: 1.2rem; }
.pattern-header:hover { background: #edf0e5; }
.toggle-icon { font: 22px var(--sans); color: var(--green-deep); }
details[open] > .pattern-header .toggle-icon { transform: rotate(45deg); }
.pattern-content { padding: 28px; }
.pattern-description { color: var(--ink-soft); font-style: normal; font-size: 1rem; }
.pattern-use-case { padding: 20px 24px; margin: 20px 0; border-left: 3px solid var(--sage); background: var(--paper); border-radius: 0 8px 8px 0; }
.pattern-use-case h4 { margin-bottom: 12px; color: var(--green-deep); font-size: 1.1rem; }
.pattern-use-case ul { margin: 0; padding-left: 20px; }
.pattern-use-case li { margin-bottom: 7px; }
.code-block { border-radius: 10px; overflow: hidden; margin: 24px 0; background: #152c25; color: #e2ecd9; }
.code-header { background: #203e34; color: #c6d5c7; padding: 12px 22px; font: .78rem var(--mono); }
.code-block pre { margin: 0; padding: 24px; overflow-x: auto; tab-size: 2; font: .9rem/1.75 var(--mono); }
.code-block code { font: inherit; }
.tips-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 26px 0; }
.tip-card { background: var(--paper-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; min-width: 0; }
.tip-card h4 { font-size: 1.3rem; margin-bottom: 16px; color: var(--green-deep); }
.tip-card p, .tip-card li { color: var(--ink-soft); font-size: .95rem; }
.tip-card ul { padding-left: 20px; }
.tip-card li { margin-bottom: 7px; }
.tip-link, .external-link a { color: var(--green-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.external-link { background: var(--paper-warm); padding: 18px 22px; border-left: 3px solid var(--sage); margin: 20px 0; border-radius: 0 8px 8px 0; }
.cta-section { background: var(--green-deep); color: var(--white); padding: 40px; border-radius: var(--radius-lg); margin: 48px 0; }
.cta-section :is(h2, h3, h4) { color: var(--white); margin-bottom: 16px; }
.cta-section p { color: #d5dfd6; max-width: 800px; }
.cta-button { display: inline-flex; padding: 12px 24px; background: var(--lime); color: var(--green-deep); border-radius: 30px; font-weight: 600; text-decoration: none; }
.cta-button:hover { background: var(--white); }
.page-contact { background: var(--green-deep); color: var(--white); padding: 56px 0; }
.page-contact .container { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.page-contact h2 { color: var(--white); margin-bottom: 12px; }
.page-contact p { color: #d5dfd6; margin-bottom: 0; }
.page-contact .button { background: var(--lime); color: var(--green-deep); border-color: var(--lime); }
.page-contact .contact-phone { color: var(--white); display: block; margin-top: 12px; text-align: center; }
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  #main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: .4rem; padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
  .header-inner { position: relative; }
  #main-nav.is-open { display: flex; }
  #main-nav a { padding: .6rem; }
  #main-nav .button { justify-content: center; }
  .page-hero .container { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .page-panel { display: none; }
  .page-hero { padding: 48px 0; }
}
@media (max-width: 600px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art:has(.web-card) { gap: 10px; }
  .hero-art:has(.web-card) .mobile-card { padding: 12px 9px; }
  .hero-art:has(.web-card) .mobile-card strong { font-size: .85rem; }
  .hero-art:has(.web-card) .window-bar { font-size: .48rem; }
  .hero-art:has(.web-card) .mock-sidebar { display: none; }
  .hero-art:has(.web-card) .card-caption { font-size: .48rem; }
  .tips-grid { grid-template-columns: minmax(0, 1fr); }
  .pattern-content, .tip-card { padding: 20px; }
  .pattern-header { padding: 18px 20px; }
  .pattern-header h3 { font-size: 1.1rem; }
  .pattern-use-case { padding: 15px; }
  .code-block pre { padding: 16px; font-size: .8rem; }
  .cta-section { padding: 24px; }
  .article-header h2 { font-size: 1.8rem; }
  .hero-proof { flex-wrap: wrap; }
  .technology-inner { flex-wrap: wrap; }
  .hero-actions { flex-wrap: wrap; }
  .hero-art { padding: 18px; }
  .art-topline, .art-bottomline { font-size: .52rem; letter-spacing: .06em; }
  .page-contact .container { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}