/* BEGIN VENDORED FONTS */
/* Self-hosted Google Fonts. Licenses are included alongside the files. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/dm-sans-latin-ext.a5d38fe99f93.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/dm-sans-latin.9fea608a947e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/manrope-latin-ext.3911b66d9f2e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/manrope-latin.a30ddcd34970.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* END VENDORED FONTS */
:root {
  --bg:#f6f7f2;
  --paper:#fff;
  --ink:#23261f;
  --muted:#72766b;
  --line:#dde0d5;
  --lime:#d2f65a;
  --green:#638731;
  --radius:20px;
  --font:'DM Sans',Arial,sans-serif;
  --heading:'Manrope',Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color-scheme:light;
  scroll-behavior:smooth;
  scroll-padding-top:105px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6
}
button,input,textarea,select {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit;
  cursor:pointer
}
button:disabled {
  cursor:wait
}
svg {
  display:block
}
button,input,textarea,select,a,summary {
  outline-offset:5px
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--green)
}
::selection {
  background:var(--lime);
  color:var(--ink)
}
[hidden] {
  display:none!important
}
.container {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.section {
  padding-block:108px
}
.eyebrow {
  font-size:12px;
  font-weight:650;
  letter-spacing:.095em;
  line-height:1.5
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:17px 24px;
  min-height:54px;
  border:1px solid transparent;
  border-radius:9px;
  font-size:14px;
  font-weight:650;
  line-height:1.4;
  transition:background .2s,transform .2s,box-shadow .2s
}
.button:hover {
  transform:translateY(-3px);
  box-shadow:0 7px 20px #23261f14
}
.button span:last-child {
  font-size:21px;
  font-weight:400;
  line-height:1
}
.button-dark {
  background:var(--ink);
  color:#fff
}
.button-dark:hover {
  background:#3d4530
}
.button-lime {
  background:var(--lime)
}
.button-lime:hover {
  background:#c4eb3e
}
.button-outline {
  border-color:#cfd3c7;
  background:transparent
}
.button-outline:hover {
  background:#f0f3e8
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-size:14px;
  font-weight:600
}
.text-link>span {
  font-size:21px
}
.text-link:hover>span {
  transform:translate(3px,-2px)
}
.text-link>span {
  transition:transform .2s
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  padding:12px 20px;
  background:var(--lime);
  z-index:100
}
.skip-link:focus {
  top:10px
}
.scroll-progress {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  transform:scaleX(0);
  transform-origin:left;
  background:var(--lime);
  z-index:60
}
.header {
  position:sticky;
  top:0;
  background:#f6f7f2ee;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  z-index:50;
  border-bottom:1px solid #dce0d43d;
  transition:box-shadow .3s
}
.header.scrolled {
  box-shadow:0 2px 20px #23261f08
}
.nav-wrap {
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.logo {
  display:inline-flex;
  align-items:center;
  font-family:var(--heading);
  font-size:26px;
  font-weight:800;
  letter-spacing:-1.1px;
  white-space:nowrap
}
.logo-mark {
  display:grid;
  place-items:center;
  background:var(--lime);
  width:39px;
  height:39px;
  border-radius:10px;
  margin-right:10px;
  font-family:monospace;
  font-size:19px;
  letter-spacing:-2px
}
.logo-dot {
  color:#7c9e31
}
.nav {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:14px;
  font-weight:500
}
.nav a {
  position:relative;
  padding-block:8px
}
.nav a:after {
  content:'';
  position:absolute;
  bottom:2px;
  left:0;
  width:100%;
  height:2px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s
}
.nav a:hover:after {
  transform:scaleX(1)
}
.nav-cta {
  padding:12px 20px;
  min-height:45px
}
.menu-toggle {
  display:none;
  border:0;
  background:transparent;
  width:44px;
  height:44px;
  padding:10px
}
.menu-toggle span {
  display:block;
  height:2px;
  background:var(--ink);
  margin:6px 0;
  transition:transform .2s
}
.hero {
  position:relative;
  display:grid;
  grid-template-columns:1.06fr 1fr;
  gap:8px;
  padding-top:63px;
  padding-bottom:105px;
  min-height:742px
}
.availability {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
  letter-spacing:.025em;
  font-size:13px
}
.status-dot {
  display:inline-block;
  flex-shrink:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#86ad3c;
  box-shadow:0 0 0 4px #a3ce4a14
}
.availability .status-dot {
  animation:pulse 3s infinite
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-family:var(--heading)
}
h1 {
  font-size:clamp(50px,5.4vw,76px);
  font-weight:750;
  letter-spacing:-.065em;
  line-height:1.13;
  margin-bottom:27px
}
.hero-highlight {
  position:relative;
  display:inline-block;
  white-space:nowrap;
  z-index:0
}
.hero-highlight:before {
  content:'';
  position:absolute;
  background:var(--lime);
  inset:11% -7px 5%;
  transform:rotate(-1.7deg);
  border-radius:2px;
  z-index:-1
}
.hero-highlight svg {
  position:absolute;
  bottom:-13px;
  width:100%;
  height:14px;
  overflow:visible
}
.hero-highlight path {
  fill:none;
  stroke:#91b62f;
  stroke-width:2.7;
  stroke-linecap:round
}
.hero-description {
  font-size:16px;
  line-height:1.8;
  color:#69705f;
  margin-bottom:28px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px
}
.hero-reassurance {
  display:flex;
  gap:25px;
  font-size:12px;
  color:var(--muted);
  margin-top:20px
}
.hero-reassurance>span {
  display:flex;
  align-items:center;
  gap:7px
}
.check-icon {
  width:12px;
  height:7px;
  display:inline-block;
  border-left:1.5px solid var(--green);
  border-bottom:1.5px solid var(--green);
  transform:rotate(-45deg);
  margin-top:-4px
}
.hero-art {
  position:relative;
  min-width:0;
  height:550px;
  align-self:center;
  isolation:isolate
}
.hero-art:before {
  content:'';
  position:absolute;
  inset:0 -20px;
  background:radial-gradient(ellipse at 50% 40%,#e6efca80,transparent 65%);
  z-index:-1
}
#particles {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  z-index:-1
}
.art-grid {
  position:absolute;
  inset:18px 0;
  background-image:radial-gradient(#a9b28a66 .7px,transparent .7px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse,black,transparent 70%);
  mask-image:radial-gradient(ellipse,black,transparent 70%);
  z-index:-1
}
.orbit {
  position:absolute;
  border:1px dashed #bfcba777;
  border-radius:50%;
  transform:rotate(-25deg);
  z-index:-1
}
.orbit-one {
  width:100%;
  height:53%;
  top:15%;
  left:-1%
}
.orbit-two {
  width:69%;
  height:77%;
  top:3%;
  left:15%;
  transform:rotate(35deg)
}
.wire-sphere {
  position:absolute;
  width:79%;
  left:15%;
  top:-35px;
  animation:float 8s ease-in-out infinite;
  z-index:-1
}
.wire-sphere svg {
  width:100%
}
.floating-label {
  display:flex;
  align-items:center;
  gap:12px;
  position:absolute;
  background:#fff;
  border:1px solid #e5e8dc;
  border-radius:10px;
  box-shadow:0 12px 32px #3e4e2910;
  z-index:5
}
.label-code {
  top:35px;
  left:11px;
  padding:12px 16px;
  font-family:monospace;
  font-size:12px;
  transform:rotate(-5deg);
  animation:float-code 7s ease-in-out infinite
}
.lime-text {
  color:#729631;
  font-size:21px;
  font-weight:bold
}
.small-dot {
  height:6px;
  width:6px;
  border-radius:50%;
  background:#92b747;
  margin-left:5px
}
.code-tag {
  position:absolute;
  top:138px;
  right:-2px;
  font-size:12px;
  font-family:monospace;
  color:#66754f;
  transform:rotate(8deg)
}
.code-tag b {
  font-size:20px
}
.mini-window {
  position:absolute;
  border-radius:13px;
  overflow:hidden;
  box-shadow:0 20px 50px #22361818;
  background:#fff;
  border:1px solid #e1e4da;
  transition:transform .4s
}
.window-bar {
  height:32px;
  background:#fbfcf8;
  border-bottom:1px solid #e9ece0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:0 13px;
  font-size:8px;
  color:#8c9381
}
.window-dots {
  display:flex;
  gap:4px
}
.window-dots i,.project-browser i {
  width:5px;
  height:5px;
  background:#d1d5c9;
  border-radius:50%
}
.window-dots i:first-child {
  background:#ebb3a6
}
.window-dots i:nth-child(2) {
  background:#e6d497
}
.window-dots i:nth-child(3) {
  background:#b4cc91
}
.desktop-window {
  width:83%;
  top:171px;
  right:-5px;
  transform:rotate(6deg)
}
.desktop-content {
  height:213px;
  display:grid;
  grid-template-columns:25% 75%
}
.desktop-sidebar {
  border-right:1px solid #edf0e7;
  padding:16px 10px;
  background:#fcfdf9;
  font-size:8px;
  display:flex;
  flex-direction:column;
  gap:12px
}
.desktop-sidebar b {
  font-size:12px;
  margin-bottom:4px
}
.desktop-sidebar b span {
  color:var(--green)
}
.desktop-sidebar .selected {
  background:#edf5d9;
  padding:6px;
  border-radius:4px
}
.desktop-main {
  padding:15px
}
.desktop-main>small {
  display:block;
  font-size:8px;
  color:var(--muted)
}
.desktop-main>strong {
  font-size:14px;
  display:block;
  margin-block:2px 13px
}
.desktop-main>strong>span {
  color:#90af45
}
.dashboard-stats {
  display:flex;
  gap:10px
}
.dashboard-stats>div {
  border:1px solid #e9eddf;
  border-radius:7px;
  padding:7px 9px;
  flex:1
}
.dashboard-stats small {
  font-size:7px;
  color:var(--muted);
  display:block
}
.dashboard-stats b {
  font-size:19px;
  display:flex;
  align-items:center;
  gap:10px
}
.dashboard-stats em {
  font-size:7px;
  color:var(--green);
  font-style:normal;
  font-weight:400
}
.chart {
  height:71px;
  display:flex;
  gap:8px;
  align-items:flex-end;
  border-bottom:1px solid #e9eddf;
  padding:0 10px;
  margin-top:15px
}
.chart i {
  height:var(--h);
  width:100%;
  background:#d1e5a2;
  border-radius:3px 3px 0 0
}
.chart i:nth-last-child(-n+3) {
  background:#a6c758
}
.web-window {
  width:78%;
  top:265px;
  left:0;
  transform:rotate(-6deg)
}
.address {
  background:#eef0e9;
  padding:2px 20px;
  border-radius:4px
}
.web-content {
  background:#d8edab;
  padding:15px 22px 21px
}
.mini-logo {
  font-weight:800;
  font-size:17px;
  display:flex;
  align-items:center;
  gap:3px
}
.mini-logo>span {
  font-size:24px
}
.mini-logo small {
  font-weight:400;
  font-size:7px;
  margin-left:auto
}
.mini-web-body {
  position:relative;
  padding-top:17px
}
.mini-web-body>small {
  font-size:7px;
  letter-spacing:1px;
  display:block;
  margin-bottom:8px
}
.mini-web-body>strong {
  font-family:var(--heading);
  font-size:31px;
  line-height:1.16;
  display:block;
  letter-spacing:-1.5px
}
.mini-button {
  display:inline-block;
  background:var(--ink);
  color:#fff;
  font-size:8px;
  padding:7px 12px;
  border-radius:4px;
  margin-top:15px
}
.mini-sun {
  font-size:116px;
  line-height:1;
  position:absolute;
  right:0;
  top:19px;
  color:#779548;
  animation:spin 45s linear infinite
}
.label-ready {
  bottom:6px;
  right:-4px;
  padding:13px 16px;
  animation:float 7s ease-in-out infinite
}
.ready-check {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  background:var(--lime);
  border-radius:50%;
  font-size:18px
}
.label-ready b {
  font-size:11px;
  display:block
}
.label-ready small {
  font-size:9px;
  display:block;
  color:var(--muted)
}
.art-caption {
  position:absolute;
  bottom:-21px;
  left:12px;
  letter-spacing:.13em;
  font-size:8px;
  color:#8e957f
}
.scroll-cue {
  position:absolute;
  bottom:32px;
  left:0;
  display:flex;
  align-items:center;
  gap:17px;
  font-size:11px;
  color:var(--muted)
}
.scroll-arrow {
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  width:27px;
  height:35px;
  font-size:16px
}
.skills-strip {
  border-block:1px solid var(--line)
}
.skills-strip .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:30px
}
.skills-strip .container>span:not(.strip-intro):not(.strip-end) {
  font-family:var(--heading);
  font-size:25px;
  font-weight:800;
  letter-spacing:-1px;
  color:#737968
}
.strip-intro {
  font-size:10px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.06em
}
.tech-plus {
  font-size:15px;
  color:#94a670;
  margin-left:3px
}
.tech-dot {
  color:#9aad73
}
.strip-end {
  font-size:10px;
  line-height:1.6;
  color:var(--muted);
  padding-left:25px;
  border-left:1px solid var(--line);
  position:relative
}
.strip-end>span {
  position:absolute;
  right:-20px;
  top:0;
  font-size:20px
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:45px
}
.section-label {
  display:block;
  color:var(--muted);
  margin-bottom:18px
}
h2 {
  font-size:clamp(34px,3.4vw,47px);
  letter-spacing:-.05em;
  line-height:1.2;
  font-weight:650;
  margin-bottom:0
}
.serif-accent {
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.045em
}
.section-heading>p {
  margin-bottom:3px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  flex-shrink:0
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.service-card {
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:31px;
  position:relative;
  display:flex;
  flex-direction:column;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  background:#fafbf6
}
.service-card:hover {
  transform:translateY(-6px);
  border-color:#a4b972;
  box-shadow:0 18px 30px #24361608
}
.service-featured {
  background:#eef3e3
}
.service-icon {
  width:51px;
  height:51px;
  display:grid;
  place-items:center;
  background:#e9eddf;
  border-radius:13px;
  margin-bottom:30px
}
.service-featured .service-icon {
  background:var(--lime)
}
.service-icon svg {
  width:28px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
.card-number {
  position:absolute;
  right:31px;
  top:42px;
  font-family:monospace;
  font-size:12px;
  color:#969d8a
}
.service-card h3 {
  font-size:21px;
  letter-spacing:-.04em;
  font-weight:650;
  margin-bottom:14px
}
.service-card p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:24px
}
.tags {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:auto;
  margin-bottom:31px
}
.tags>span {
  border:1px solid #d9dfcd;
  padding:4px 9px;
  border-radius:5px;
  font-size:10px;
  white-space:nowrap;
  color:#6b755b
}
.card-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  font-weight:600;
  border-top:1px solid #dfe4d4;
  padding-top:19px
}
.card-link>span {
  font-size:22px;
  transition:transform .2s
}
.card-link:hover>span {
  transform:translate(4px,-4px)
}
.projects-section {
  background:#eff1e9
}
.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}
.project-card {
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  min-width:0
}
.project-visual {
  display:block;
  overflow:hidden;
  border-radius:16px;
  height:340px;
  border:1px solid #d9dfce;
  transition:transform .4s,box-shadow .4s
}
.project-card:hover .project-visual {
  transform:translateY(-5px);
  box-shadow:0 18px 35px #24361612
}
.project-browser {
  height:29px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 14px;
  background:#ffffffb3;
  border-bottom:1px solid #e4e7de
}
.project-browser small {
  margin:auto;
  font-size:8px;
  color:#929985;
  padding-right:25px
}
.studio-visual {
  background:#e9e5dd
}
.studio-top {
  display:block;
  padding:21px 27px 16px;
  font-family:Georgia,serif;
  font-size:27px;
  line-height:1
}
.studio-top>span {
  font-size:11px;
  vertical-align:top;
  padding-left:2px
}
.studio-top>small {
  float:right;
  font-family:var(--font);
  font-size:7px;
  letter-spacing:1.5px;
  margin-top:10px
}
.studio-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:0 27px 27px;
  gap:10px;
  height:238px
}
.studio-layout>span:first-child {
  display:flex;
  flex-direction:column;
  justify-content:center
}
.studio-layout small {
  display:block;
  font-size:7px;
  letter-spacing:1.5px;
  margin-bottom:15px
}
.studio-layout strong {
  font-family:Georgia,serif;
  font-size:36px;
  line-height:1.1;
  font-weight:400;
  letter-spacing:-1.5px
}
.studio-link {
  font-size:8px;
  display:block;
  margin-top:25px;
  text-decoration:underline;
  text-underline-offset:5px
}
.architecture {
  position:relative;
  display:block;
  background:linear-gradient(130deg,#d0c9bb,#eee7dd 53%,#b2a895);
  border-radius:80px 80px 3px 3px;
  overflow:hidden;
  height:100%;
  box-shadow:inset -12px 0 22px #756e6420
}
.arch-wall {
  position:absolute;
  inset:0 38% 25% 0;
  background:linear-gradient(110deg,#e4ddd1,#c2b7a4);
  box-shadow:14px 0 18px #7d715744
}
.arch-window {
  position:absolute;
  width:37%;
  height:62%;
  top:13%;
  left:24%;
  border:9px solid #a59a86;
  background:linear-gradient(135deg,#779483,#d4decd 60%,#7c8d77);
  border-radius:80px 80px 0 0;
  box-shadow:12px 10px 15px #887d6955
}
.arch-window:after {
  content:'';
  position:absolute;
  width:3px;
  height:100%;
  background:#a79a85;
  left:50%
}
.arch-bench {
  position:absolute;
  bottom:16%;
  left:16%;
  width:78%;
  height:13%;
  background:linear-gradient(#a88a68,#d3b68e);
  box-shadow:5px 16px 15px #665b4140;
  transform:skewY(-6deg);
  border-radius:3px
}
.arch-bench:after {
  content:'';
  position:absolute;
  top:100%;
  height:30px;
  width:8px;
  background:#8c7053;
  left:8%;
  box-shadow:110px 0 #8c7053
}
.arch-plant {
  position:absolute;
  right:5%;
  bottom:23%;
  width:12%;
  height:45%;
  background:radial-gradient(ellipse at 10% 25%,#566f47 25%,transparent 28%),radial-gradient(ellipse at 90% 49%,#647d54 24%,transparent 27%),linear-gradient(90deg,transparent 46%,#7d7656 48%,#7d7656 52%,transparent 53%)
}
.dashboard-visual {
  background:#e2e9d5
}
.flow-layout {
  display:grid;
  grid-template-columns:22% 1fr;
  margin:24px 23px;
  background:#f9fbf4;
  border:1px solid #d5ddc9;
  border-radius:8px;
  overflow:hidden;
  height:258px;
  box-shadow:0 12px 28px #3144200d
}
.flow-sidebar {
  display:flex;
  flex-direction:column;
  gap:20px;
  border-right:1px solid #e3e9d9;
  padding:17px 14px
}
.flow-sidebar>b {
  font-size:21px;
  line-height:1;
  margin-bottom:7px;
  letter-spacing:-1px
}
.flow-sidebar>b>span {
  color:#86a84a
}
.flow-sidebar small {
  font-size:7px;
  color:#738263;
  white-space:nowrap
}
.flow-sidebar small:first-of-type {
  color:#344a1c;
  font-weight:700;
  background:#eaf0dc;
  margin:-6px;
  padding:6px;
  border-radius:4px
}
.flow-main {
  padding:20px 15px
}
.flow-title {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center
}
.flow-title strong {
  font-size:11px;
  letter-spacing:-.4px
}
.flow-title small {
  font-size:6px;
  color:#7c856e
}
.flow-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:17px
}
.flow-stats>span {
  border:1px solid #e3e9d9;
  border-radius:5px;
  padding:9px 7px;
  min-width:0
}
.flow-stats small {
  font-size:6px;
  display:block;
  color:#7c856e
}
.flow-stats b {
  font-size:15px;
  letter-spacing:-.7px;
  white-space:nowrap;
  display:block;
  margin-block:3px
}
.flow-stats em {
  font-size:6px;
  display:block;
  color:#739936;
  font-style:normal
}
.flow-chart {
  display:block;
  border:1px solid #e3e9d9;
  border-radius:5px;
  padding:10px;
  margin-top:12px
}
.flow-chart>small {
  display:block;
  font-size:7px;
  margin-bottom:6px
}
.flow-chart svg {
  height:70px;
  width:100%
}
.flow-chart>span {
  display:block;
  font-size:5px;
  letter-spacing:4px;
  margin-top:5px;
  text-align:center
}
.project-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:19px;
  gap:12px
}
.project-caption strong {
  font-family:var(--heading);
  display:block;
  font-size:19px;
  letter-spacing:-.035em;
  font-weight:650
}
.project-caption small {
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-top:3px
}
.round-arrow {
  display:grid;
  place-items:center;
  border:1px solid #cdd5bd;
  border-radius:50%;
  width:42px;
  height:42px;
  flex-shrink:0;
  font-size:21px;
  transition:background .2s,transform .3s
}
.project-card:hover .round-arrow {
  background:var(--lime);
  transform:rotate(45deg)
}
.project-note {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  font-size:11px;
  color:#7c846f
}
.pricing-tabs {
  display:flex;
  background:#e9ece1;
  border:1px solid #e0e4d8;
  border-radius:10px;
  padding:5px;
  width:fit-content;
  margin:0 auto 48px;
  gap:4px
}
.pricing-tabs button {
  background:transparent;
  border:0;
  border-radius:7px;
  font-size:13px;
  padding:12px 26px;
  color:#727b63;
  transition:background .2s,box-shadow .2s
}
.pricing-tabs button[aria-selected=true] {
  color:var(--ink);
  background:white;
  box-shadow:0 2px 6px #283b1410
}
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:stretch
}
.price-card {
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  background:#fcfdf9;
  display:flex;
  flex-direction:column
}
.price-featured {
  background:#eef4e0;
  border:1px solid #a8c669;
  box-shadow:0 8px 25px #78a12d0d
}
.popular-tag {
  position:absolute;
  top:-15px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  background:var(--lime);
  border:1px solid #b8d84f;
  border-radius:7px;
  padding:6px 16px
}
.package-label {
  font-size:10px;
  letter-spacing:.085em;
  color:var(--muted);
  margin-bottom:13px
}
.price-card h3 {
  font-size:26px;
  font-weight:650;
  letter-spacing:-1px;
  display:flex;
  justify-content:space-between;
  margin-bottom:7px;
  line-height:1.4
}
.price-card h3>span {
  color:#90a376;
  font-size:27px;
  font-weight:400
}
.price-card>p {
  font-size:12px;
  color:var(--muted);
  margin-bottom:25px
}
.price {
  font-family:var(--heading);
  font-size:45px;
  line-height:1.3;
  font-weight:750;
  letter-spacing:-2.5px;
  white-space:nowrap
}
.price>small {
  font-family:var(--font);
  font-size:12px;
  letter-spacing:0;
  color:var(--muted);
  font-weight:400
}
.price>span {
  font-size:20px;
  letter-spacing:-.4px;
  font-weight:500
}
.price-description {
  font-size:10px;
  color:var(--muted);
  margin-top:5px;
  margin-bottom:25px
}
.package-button {
  font-size:12px;
  padding:15px 18px;
  gap:10px;
  min-height:50px
}
.package-divider {
  height:1px;
  background:#dce2d1;
  margin-block:27px 22px
}
.price-card ul {
  list-style:none;
  margin:0 0 30px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:13px;
  font-size:12px;
  color:#667158
}
.price-card li {
  position:relative;
  padding-left:22px
}
.price-card li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:#7a9e39;
  font-size:14px
}
.price-card li b {
  font-weight:550;
  color:#39472b
}
.package-bottom {
  border-top:1px solid #e0e5d7;
  padding-top:15px;
  color:#889279;
  font-size:10px;
  margin-top:auto
}
.pricing-footnote {
  font-size:10px;
  color:#818976;
  line-height:1.75;
  max-width:1020px;
  margin:25px auto 0;
  text-align:center
}
.pricing-footnote p {
  margin-bottom:7px
}
.custom-offer {
  display:flex;
  align-items:center;
  gap:23px;
  padding:26px 30px;
  border:1px solid var(--line);
  border-radius:14px;
  margin-top:37px
}
.custom-icon {
  font-size:38px;
  color:#7e9b4c;
  line-height:1
}
.custom-offer h3 {
  font-size:17px;
  letter-spacing:-.035em;
  margin-bottom:5px;
  font-weight:650
}
.custom-offer p {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.custom-offer>a {
  margin-left:auto;
  font-size:12px;
  flex-shrink:0
}
.process-section {
  background:#252a20;
  color:#f5f7ed
}
.process-section .section-label {
  color:#a7b694
}
.process-section h2 .serif-accent {
  color:var(--lime)
}
.process-section .section-heading p {
  color:#a0ac93
}
.process-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
  margin-top:55px
}
.step-number {
  font-family:var(--heading);
  font-size:39px;
  letter-spacing:-2px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #4a5341;
  padding-bottom:22px;
  margin-bottom:27px;
  color:var(--lime)
}
.step-number i {
  font-size:26px;
  font-weight:400;
  font-style:normal;
  color:#899779
}
.process-grid h3 {
  font-size:17px;
  font-weight:550;
  letter-spacing:-.035em;
  margin-bottom:13px
}
.process-grid p {
  font-size:13px;
  color:#a3af98;
  line-height:1.85;
  margin-bottom:22px
}
.process-grid small {
  font-size:8px;
  letter-spacing:.09em;
  color:#76866a
}
.faq-section {
  display:grid;
  grid-template-columns:.85fr 1.5fr;
  gap:100px
}
.faq-intro>p {
  font-size:13px;
  line-height:1.8;
  margin-top:25px;
  color:var(--muted)
}
.faq-intro .text-link {
  margin-top:8px;
  color:var(--ink);
  font-size:13px
}
.faq-list details {
  border-bottom:1px solid var(--line)
}
.faq-list details:first-child {
  border-top:1px solid var(--line)
}
.faq-list summary {
  list-style:none;
  cursor:pointer;
  padding:24px 0;
  font-size:14px;
  font-weight:550;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary>span {
  font-size:22px;
  font-weight:400;
  color:#83996a;
  transition:transform .25s
}
.faq-list details[open] summary>span {
  transform:rotate(45deg)
}
.faq-list details[open] summary {
  padding-bottom:24px
}
.faq-answer>p {
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
  padding-right:35px;
  margin-bottom:23px
}
.contact-section {
  background:#eaf0dd;
  border-block:1px solid #dce5cc
}
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px
}
.contact-copy h2 {
  position:relative;
  font-size:56px;
  letter-spacing:-.06em;
  line-height:1.14;
  display:inline-block;
  margin-top:8px
}
.contact-copy h2>span {
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400
}
.contact-copy h2>i {
  font-size:65px;
  font-weight:400;
  color:#8fab5e;
  display:block;
  line-height:1;
  margin-block:20px 26px;
  font-style:normal
}
.contact-copy>p {
  font-size:14px;
  color:#738361;
  line-height:1.85;
  margin-bottom:28px
}
.contact-email {
  display:inline-flex;
  align-items:center;
  gap:30px;
  font-size:19px;
  letter-spacing:-.02em;
  border-bottom:1px solid #b5c59b;
  padding-bottom:8px
}
.contact-email>span {
  font-size:25px
}
.contact-person {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:40px
}
.person-avatar {
  display:grid;
  place-items:center;
  position:relative;
  width:47px;
  height:47px;
  background:#d5e4bd;
  border:1px solid #bacc9e;
  border-radius:50%;
  font-family:var(--heading);
  font-size:23px;
  font-weight:650
}
.person-avatar>.status-dot {
  position:absolute;
  bottom:2px;
  right:1px;
  border:2px solid #eaf0dd;
  box-sizing:content-box
}
.contact-person strong {
  display:block;
  font-size:14px
}
.contact-person div>span {
  font-size:11px;
  color:#7d8d6c
}
.contact-detail {
  font-size:11px;
  color:#8a967c;
  line-height:1.8;
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:13px
}
.contact-detail>span {
  font-size:28px;
  color:#9bb97a
}
.contact-form {
  background:#fff;
  border:1px solid #dbe3ce;
  border-radius:20px;
  padding:35px;
  box-shadow:0 15px 30px #2e43200a
}
.contact-form>h3 {
  font-size:19px;
  font-weight:650;
  letter-spacing:-.045em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:29px
}
.contact-form>h3>span {
  font-size:27px;
  color:#97b66a
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.field {
  margin-bottom:20px;
  min-width:0
}
.field>label {
  font-size:11px;
  font-weight:550;
  display:block;
  margin-bottom:8px
}
.field>label>span {
  color:#799c3e;
  margin-left:2px
}
.field>label>.optional {
  font-size:9px;
  font-weight:400;
  color:#969e8c
}
.field>input,.field>select,.field>textarea {
  width:100%;
  min-height:46px;
  padding:11px 13px;
  background:#fafbf7;
  border:1px solid #e1e6d8;
  border-radius:7px;
  color:var(--ink);
  font-size:12px;
  transition:border-color .2s,box-shadow .2s
}
.field>select {
  padding-right:25px
}
.field>textarea {
  resize:vertical;
  min-height:120px;
  line-height:1.7
}
.field>input::placeholder,.field>textarea::placeholder {
  color:#a0a797
}
.field>input:focus,.field>select:focus,.field>textarea:focus {
  outline:none;
  border-color:#9eba66;
  box-shadow:0 0 0 3px #a9ce6420
}
.field-hint {
  font-size:9px;
  color:#959e89;
  display:block;
  margin-top:6px
}
.consent {
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:10px;
  color:#89937c;
  line-height:1.7;
  margin-top:2px;
  margin-bottom:22px
}
.consent>input {
  accent-color:#799f36;
  flex-shrink:0;
  width:14px;
  height:14px;
  margin:2px 0 0
}
.inline-button {
  border:0;
  padding:0;
  background:transparent;
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px
}
.required-star {
  color:#789c3e
}
.submit-button {
  width:100%;
  font-size:13px
}
.form-footer {
  display:block;
  text-align:center;
  font-size:9px;
  color:#939d85;
  margin-top:12px
}
.lock-icon {
  margin-right:4px
}
.form-status {
  font-size:12px;
  line-height:1.7;
  margin:0
}
.form-status:not(:empty) {
  padding:12px;
  border-radius:6px;
  margin-top:13px;
  background:#eef4df;
  color:#466326
}
.form-status.error {
  background:#fff0e9;
  color:#9a412e
}
.honeypot {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
.selected-package {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:#eff5e1;
  border:1px solid #d9e8c0;
  padding:8px 11px;
  font-size:11px;
  border-radius:6px;
  margin-bottom:18px
}
.selected-package button {
  background:transparent;
  border:0;
  font-size:20px;
  line-height:1;
  width:25px;
  height:25px
}
.submit-button.loading .submit-arrow {
  width:18px;
  height:18px;
  border:2px solid #ffffff55;
  border-top-color:white;
  border-radius:50%;
  animation:spin .8s linear infinite;
  font-size:0
}
footer {
  background:var(--bg)
}
.footer-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:38px;
  border-bottom:1px solid var(--line)
}
.footer-main .logo {
  font-size:23px
}
.footer-main .logo-mark {
  width:33px;
  height:33px;
  font-size:17px;
  border-radius:8px
}
.footer-main>span {
  font-size:12px;
  color:var(--muted)
}
.footer-main .text-link {
  font-size:12px
}
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:22px;
  color:#929985;
  font-size:10px
}
.footer-bottom>span:last-child {
  display:flex;
  align-items:center;
  gap:13px
}
.lime-star {
  color:#9eb96a;
  font-size:20px;
  line-height:1
}
.dialog {
  border:1px solid var(--line);
  border-radius:20px;
  padding:40px;
  background:var(--bg);
  color:var(--ink);
  width:min(850px,calc(100% - 32px));
  max-height:90vh;
  max-height:90dvh;
  overflow-y:auto;
  box-shadow:0 25px 80px #0003
}
.dialog::backdrop {
  background:#1c241b90;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px)
}
.dialog h2 {
  font-size:32px;
  margin-bottom:20px
}
.dialog>p {
  font-size:14px;
  color:var(--muted)
}
.dialog-close {
  position:absolute;
  top:12px;
  right:14px;
  border:0;
  background:#e7eddc;
  border-radius:50%;
  width:34px;
  height:34px;
  font-size:24px;
  line-height:1
}
.dialog #demo-preview {
  margin-block:25px
}
.dialog .project-visual {
  height:340px
}
.dialog .studio-layout {
  height:235px
}
.dialog .flow-layout {
  height:255px
}
.dialog #demo-preview .project-browser {
  height:30px
}
.dialog .button {
  font-size:13px
}
.demo-disclaimer {
  font-size:10px;
  margin-top:13px;
  display:block;
  color:var(--muted)
}
.privacy-dialog {
  max-width:620px
}
.privacy-dialog p {
  line-height:1.9
}
.privacy-dialog a {
  text-decoration:underline
}
.reveal {
  transition:opacity .7s,transform .7s
}
.js-ready .reveal:not(.visible) {
  opacity:0;
  transform:translateY(23px)
}
.js-ready .reveal.visible {
  opacity:1;
  transform:translateY(0)
}
.service-grid .reveal:nth-child(2),.pricing-grid .reveal:nth-child(2),.process-grid .reveal:nth-child(2) {
  transition-delay:.07s
}
.service-grid .reveal:nth-child(3),.pricing-grid .reveal:nth-child(3),.process-grid .reveal:nth-child(3) {
  transition-delay:.14s
}
.process-grid .reveal:nth-child(4) {
  transition-delay:.21s
}
@keyframes float {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-12px)
  }
}
@keyframes float-code {
  0%,100% {
    transform:rotate(-5deg) translateY(0)
  }
  50% {
    transform:rotate(-3deg) translateY(-9px)
  }
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes pulse {
  50% {
    box-shadow:0 0 0 7px #a3ce4a00
  }
}
@media(min-width:1500px) {
  .hero {
    padding-top:84px;
    padding-bottom:115px;
    min-height:815px
  }
  .hero-art {
    height:575px
  }
  .web-window {
    top:285px
  }
}
@media(max-width:1200px) {
  .container {
    width:calc(100% - 64px)
  }
  .nav {
    gap:22px
  }
  .hero {
    padding-top:60px;
    min-height:700px
  }
  .hero-art {
    height:510px
  }
  .hero-actions {
    gap:17px
  }
  .hero-actions .button {
    font-size:12px;
    padding:16px 18px;
    gap:18px
  }
  .hero-actions .text-link {
    font-size:12px;
    gap:10px
  }
  .hero-reassurance {
    gap:16px;
    font-size:10px
  }
  .desktop-window {
    top:157px
  }
  .web-window {
    top:251px
  }
  .mini-web-body>strong {
    font-size:27px
  }
  .mini-sun {
    font-size:91px;
    top:28px
  }
  .label-ready {
    bottom:15px
  }
  .section-heading {
    gap:25px
  }
  .section-heading>p {
    font-size:12px
  }
  .service-card {
    padding:26px
  }
  .service-card h3 {
    font-size:19px
  }
  .service-card p {
    font-size:13px
  }
  .service-grid {
    gap:17px
  }
  .project-visual {
    height:300px
  }
  .studio-layout {
    height:200px;
    padding-inline:22px
  }
  .studio-layout strong {
    font-size:30px
  }
  .flow-layout {
    height:220px;
    margin:20px 17px;
    grid-template-columns:21% 1fr
  }
  .flow-sidebar {
    padding:15px 9px;
    gap:16px
  }
  .flow-main {
    padding:15px 11px
  }
  .flow-stats b {
    font-size:13px
  }
  .flow-chart svg {
    height:52px
  }
  .flow-title strong {
    font-size:9px
  }
  .price-card {
    padding:26px
  }
  .price {
    font-size:40px
  }
  .package-button {
    font-size:11px;
    padding:14px
  }
  .price-card ul {
    font-size:11px
  }
  .custom-offer>a {
    font-size:11px
  }
  .contact-grid {
    gap:45px
  }
  .contact-copy h2 {
    font-size:49px
  }
  .contact-form {
    padding:27px
  }
  .form-row {
    gap:12px
  }
  .contact-form>h3 {
    font-size:17px
  }
  .faq-section {
    gap:70px
  }
}
@media(max-width:960px) {
  .container {
    width:calc(100% - 48px)
  }
  .nav {
    gap:15px;
    font-size:12px
  }
  .nav-wrap {
    height:80px;
    gap:16px
  }
  .logo {
    font-size:23px
  }
  .logo-mark {
    width:34px;
    height:34px
  }
  .nav-cta {
    font-size:12px;
    gap:13px;
    padding:11px 14px
  }
  .hero {
    grid-template-columns:1fr 1fr;
    padding-top:50px;
    padding-bottom:85px;
    min-height:650px
  }
  .availability {
    font-size:10px;
    gap:8px
  }
  h1 {
    font-size:clamp(40px,5.5vw,54px)
  }
  .hero-description {
    font-size:13px
  }
  .hero-actions {
    flex-wrap:wrap;
    gap:13px
  }
  .hero-actions .text-link {
    padding:6px 0
  }
  .hero-reassurance {
    flex-wrap:wrap;
    gap:12px
  }
  .hero-art {
    height:460px
  }
  .label-code {
    font-size:9px;
    padding:9px 11px;
    left:0
  }
  .code-tag {
    font-size:9px;
    top:132px
  }
  .desktop-content {
    height:179px
  }
  .desktop-sidebar {
    font-size:6px;
    padding:13px 8px;
    gap:10px
  }
  .desktop-sidebar b {
    font-size:9px
  }
  .desktop-main {
    padding:12px
  }
  .desktop-main>strong {
    font-size:11px
  }
  .dashboard-stats {
    gap:6px
  }
  .dashboard-stats>div {
    padding:6px
  }
  .dashboard-stats small {
    font-size:6px
  }
  .dashboard-stats b {
    font-size:15px;
    gap:4px
  }
  .chart {
    height:55px;
    gap:5px
  }
  .web-window {
    top:248px;
    width:82%
  }
  .web-content {
    padding:11px 15px 16px
  }
  .mini-web-body {
    padding-top:12px
  }
  .mini-web-body>strong {
    font-size:23px
  }
  .mini-web-body>small {
    font-size:5px
  }
  .mini-logo small {
    font-size:5px
  }
  .mini-sun {
    font-size:76px;
    top:20px
  }
  .mini-button {
    font-size:6px;
    margin-top:13px
  }
  .label-ready {
    padding:10px;
    right:0;
    bottom:5px;
    gap:8px
  }
  .label-ready b {
    font-size:9px
  }
  .label-ready small {
    font-size:7px
  }
  .ready-check {
    width:27px;
    height:27px;
    font-size:14px
  }
  .art-caption {
    font-size:6px;
    bottom:-18px
  }
  .section {
    padding-block:80px
  }
  .skills-strip .container>span:not(.strip-intro):not(.strip-end) {
    font-size:21px
  }
  .strip-end {
    display:none
  }
  .section-heading {
    align-items:flex-start
  }
  .section-heading>p {
    max-width:240px
  }
  h2 {
    font-size:36px
  }
  .service-grid {
    gap:13px
  }
  .service-card {
    padding:20px
  }
  .service-card h3 {
    font-size:17px
  }
  .service-card p {
    font-size:12px
  }
  .service-icon {
    margin-bottom:22px
  }
  .tags>span {
    font-size:8px;
    padding:3px 6px
  }
  .card-link {
    font-size:10px;
    gap:8px
  }
  .card-number {
    right:20px
  }
  .project-visual {
    height:255px
  }
  .studio-top {
    padding:18px 18px 13px;
    font-size:23px
  }
  .studio-top>small {
    font-size:5px
  }
  .studio-layout {
    height:172px;
    padding:0 18px 18px;
    gap:8px
  }
  .studio-layout strong {
    font-size:26px
  }
  .studio-layout small {
    font-size:5px;
    letter-spacing:1px;
    margin-bottom:10px
  }
  .studio-link {
    font-size:6px;
    margin-top:15px
  }
  .flow-layout {
    height:193px;
    margin:16px 13px
  }
  .flow-sidebar {
    gap:13px;
    padding:14px 8px
  }
  .flow-sidebar small {
    font-size:5px
  }
  .flow-sidebar>b {
    font-size:17px
  }
  .flow-main {
    padding:13px 9px
  }
  .flow-title strong {
    font-size:7px
  }
  .flow-title small {
    font-size:5px
  }
  .flow-stats {
    gap:5px;
    margin-top:12px
  }
  .flow-stats>span {
    padding:6px
  }
  .flow-stats b {
    font-size:10px
  }
  .flow-stats small,.flow-stats em {
    font-size:5px
  }
  .flow-chart {
    margin-top:8px;
    padding:7px
  }
  .flow-chart>small {
    font-size:6px
  }
  .flow-chart svg {
    height:48px
  }
  .flow-chart>span {
    font-size:4px;
    letter-spacing:2px
  }
  .project-caption strong {
    font-size:16px
  }
  .project-caption small {
    font-size:10px
  }
  .round-arrow {
    width:35px;
    height:35px
  }
  .price-card {
    padding:22px 18px
  }
  .price {
    font-size:34px
  }
  .package-label {
    font-size:8px
  }
  .price-card>p {
    font-size:10px
  }
  .price-description {
    font-size:8px
  }
  .price-card h3 {
    font-size:23px
  }
  .price-card ul {
    font-size:10px;
    gap:11px
  }
  .package-button {
    font-size:10px;
    padding:12px 11px
  }
  .package-bottom {
    font-size:8px
  }
  .custom-offer {
    gap:17px;
    padding:22px
  }
  .custom-offer h3 {
    font-size:15px
  }
  .custom-offer p {
    font-size:10px
  }
  .custom-offer>a {
    max-width:170px;
    font-size:10px
  }
  .process-grid {
    gap:22px
  }
  .process-grid h3 {
    font-size:15px
  }
  .process-grid p {
    font-size:12px
  }
  .process-grid small {
    font-size:6px
  }
  .faq-section {
    grid-template-columns:.7fr 1.2fr;
    gap:40px
  }
  .faq-list summary {
    font-size:13px
  }
  .contact-grid {
    gap:30px;
    grid-template-columns:.9fr 1.15fr
  }
  .contact-copy h2 {
    font-size:41px
  }
  .contact-copy>p {
    font-size:12px
  }
  .contact-email {
    font-size:16px;
    gap:15px
  }
  .contact-form {
    padding:24px 20px
  }
  .contact-form>h3 {
    font-size:15px
  }
  .field>input,.field>select,.field>textarea {
    font-size:11px;
    padding:10px
  }
  .field>label {
    font-size:10px
  }
  .field>label>.optional {
    font-size:8px
  }
  .footer-main>span {
    font-size:10px
  }
  .footer-bottom {
    font-size:8px
  }
}
@media(max-width:760px) {
  .container {
    width:calc(100% - 40px)
  }
  .header {
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px)
  }
  .nav-wrap {
    height:74px
  }
  .nav-cta {
    margin-left:auto;
    min-height:39px;
    padding:9px 12px;
    font-size:11px;
    border-radius:7px
  }
  .nav-cta span:last-child {
    font-size:18px
  }
  .menu-toggle {
    display:block
  }
  .nav {
    display:none;
    position:absolute;
    top:74px;
    left:0;
    right:0;
    padding:18px 20px 25px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 10px 15px #00000008
  }
  .nav.open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    font-size:16px
  }
  .nav a {
    padding:11px 0
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(4px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-4px) rotate(-45deg)
  }
  .hero {
    display:flex;
    flex-direction:column;
    gap:0;
    padding-top:37px;
    padding-bottom:80px;
    min-height:0
  }
  .hero-copy {
    position:relative;
    z-index:2
  }
  .availability {
    font-size:11px;
    margin-bottom:23px
  }
  h1 {
    font-size:clamp(39px,8.5vw,63px);
    letter-spacing:-.06em;
    line-height:1.15;
    margin-bottom:24px
  }
  .hero-highlight:before {
    inset:12% -5px 5%
  }
  .hero-description {
    font-size:14px;
    line-height:1.8;
    margin-bottom:25px
  }
  .hero-actions {
    gap:24px
  }
  .hero-actions .button {
    font-size:13px;
    padding:16px 18px;
    gap:22px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .hero-reassurance {
    font-size:10px;
    margin-top:15px;
    gap:22px
  }
  .hero-art {
    width:min(500px,100%);
    height:475px;
    margin:24px auto 0
  }
  .wire-sphere {
    width:78%;
    top:-7px;
    left:15%
  }
  .label-code {
    top:47px;
    left:7px;
    font-size:10px;
    padding:10px 13px
  }
  .code-tag {
    top:147px;
    right:3px;
    font-size:10px
  }
  .desktop-window {
    top:169px;
    right:0;
    width:80%
  }
  .desktop-content {
    height:192px
  }
  .desktop-sidebar {
    font-size:7px
  }
  .desktop-sidebar b {
    font-size:11px
  }
  .desktop-main>strong {
    font-size:13px
  }
  .dashboard-stats small {
    font-size:7px
  }
  .dashboard-stats b {
    font-size:18px
  }
  .chart {
    height:58px
  }
  .web-window {
    top:252px;
    width:78%;
    left:0
  }
  .web-content {
    padding:13px 18px 19px
  }
  .mini-web-body {
    padding-top:15px
  }
  .mini-web-body>strong {
    font-size:28px
  }
  .mini-web-body>small {
    font-size:6px
  }
  .mini-logo small {
    font-size:6px
  }
  .mini-sun {
    font-size:88px;
    top:29px
  }
  .mini-button {
    font-size:7px
  }
  .label-ready {
    bottom:-4px;
    padding:10px 12px;
    right:5px
  }
  .label-ready b {
    font-size:10px
  }
  .label-ready small {
    font-size:8px
  }
  .ready-check {
    width:30px;
    height:30px
  }
  .art-caption {
    bottom:-23px;
    font-size:6px;
    left:10px
  }
  .scroll-cue {
    bottom:22px;
    font-size:10px
  }
  .skills-strip .container {
    padding-block:24px;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px 25px
  }
  .strip-intro {
    width:100%;
    text-align:center;
    font-size:9px;
    line-height:1.5
  }
  .strip-intro br {
    display:none
  }
  .skills-strip .container>span:not(.strip-intro):not(.strip-end) {
    font-size:19px
  }
  .section {
    padding-block:66px
  }
  .section-heading {
    display:block;
    margin-bottom:30px
  }
  .section-label {
    font-size:10px;
    letter-spacing:.07em;
    margin-bottom:15px
  }
  h2 {
    font-size:34px;
    letter-spacing:-.05em
  }
  .section-heading>p {
    font-size:13px;
    margin-top:20px;
    max-width:none
  }
  .service-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .service-card {
    padding:26px
  }
  .service-card h3 {
    font-size:21px
  }
  .service-card p {
    font-size:14px;
    max-width:480px;
    margin-bottom:22px
  }
  .service-icon {
    margin-bottom:23px
  }
  .card-number {
    right:26px;
    top:40px
  }
  .tags {
    margin-bottom:24px
  }
  .tags>span {
    font-size:10px;
    padding:4px 8px
  }
  .card-link {
    font-size:12px;
    padding-top:16px
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .project-visual {
    height:310px
  }
  .studio-top {
    padding:20px 24px 16px;
    font-size:27px
  }
  .studio-top>small {
    font-size:6px
  }
  .studio-layout {
    height:218px;
    padding:0 24px 24px;
    gap:15px
  }
  .studio-layout strong {
    font-size:33px
  }
  .studio-layout small {
    font-size:6px;
    margin-bottom:15px
  }
  .studio-link {
    font-size:7px;
    margin-top:20px
  }
  .flow-layout {
    height:244px;
    margin:20px 18px
  }
  .flow-sidebar {
    gap:18px;
    padding:18px 10px
  }
  .flow-sidebar small {
    font-size:6px
  }
  .flow-sidebar>b {
    font-size:20px
  }
  .flow-main {
    padding:18px 13px
  }
  .flow-title strong {
    font-size:10px
  }
  .flow-title small {
    font-size:6px
  }
  .flow-stats {
    gap:7px;
    margin-top:16px
  }
  .flow-stats>span {
    padding:9px 7px
  }
  .flow-stats b {
    font-size:14px
  }
  .flow-stats small,.flow-stats em {
    font-size:6px
  }
  .flow-chart {
    padding:9px;
    margin-top:10px
  }
  .flow-chart>small {
    font-size:7px
  }
  .flow-chart svg {
    height:60px
  }
  .flow-chart>span {
    font-size:5px;
    letter-spacing:2px
  }
  .project-caption strong {
    font-size:18px
  }
  .project-caption small {
    font-size:11px
  }
  .project-note {
    font-size:10px;
    align-items:flex-start;
    margin-top:25px
  }
  .project-note .status-dot {
    margin-top:5px
  }
  .pricing-tabs {
    margin:0 auto 36px;
    width:100%
  }
  .pricing-tabs button {
    flex:1;
    font-size:12px;
    padding:12px 10px
  }
  .pricing-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .price-card {
    padding:30px;
    max-width:520px;
    width:100%;
    margin-inline:auto
  }
  .package-label {
    font-size:10px
  }
  .price-card h3 {
    font-size:28px
  }
  .price-card>p {
    font-size:13px;
    margin-bottom:22px
  }
  .price {
    font-size:48px
  }
  .price-description {
    font-size:11px
  }
  .package-button {
    font-size:13px;
    padding:16px 18px
  }
  .price-card ul {
    font-size:13px;
    gap:13px
  }
  .package-bottom {
    font-size:11px
  }
  .popular-tag {
    font-size:10px
  }
  .pricing-footnote {
    font-size:10px;
    text-align:left;
    margin-top:25px
  }
  .custom-offer {
    flex-wrap:wrap;
    padding:23px;
    gap:15px
  }
  .custom-offer h3 {
    font-size:16px
  }
  .custom-offer p {
    font-size:12px
  }
  .custom-offer>div {
    flex:1;
    min-width:180px
  }
  .custom-offer>a {
    font-size:12px;
    max-width:none;
    margin-left:0;
    width:100%;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:16px
  }
  .process-grid {
    grid-template-columns:1fr 1fr;
    gap:32px 28px;
    margin-top:35px
  }
  .step-number {
    font-size:35px;
    margin-bottom:22px;
    padding-bottom:18px
  }
  .process-grid h3 {
    font-size:16px
  }
  .process-grid p {
    font-size:13px
  }
  .process-grid small {
    font-size:7px
  }
  .faq-section {
    display:block
  }
  .faq-intro>p {
    font-size:13px;
    margin-top:20px
  }
  .faq-list {
    margin-top:30px
  }
  .faq-list summary {
    font-size:14px;
    padding-block:22px
  }
  .faq-answer>p {
    font-size:13px;
    padding-right:20px
  }
  .contact-grid {
    display:block
  }
  .contact-copy h2 {
    font-size:47px
  }
  .contact-copy h2>i {
    position:absolute;
    right:-65px;
    top:40px;
    font-size:54px;
    margin:0
  }
  .contact-copy>p {
    font-size:14px;
    margin-top:23px
  }
  .contact-email {
    font-size:19px
  }
  .contact-person {
    margin-top:25px
  }
  .contact-detail {
    margin-top:22px
  }
  .contact-form {
    margin-top:35px;
    padding:26px 23px
  }
  .contact-form>h3 {
    font-size:18px
  }
  .field>label {
    font-size:12px
  }
  .field>input,.field>select,.field>textarea {
    font-size:13px;
    min-height:48px;
    padding:12px
  }
  .field>label>.optional {
    font-size:9px
  }
  .field-hint {
    font-size:10px
  }
  .consent {
    font-size:11px
  }
  .submit-button {
    font-size:14px
  }
  .form-footer {
    font-size:10px
  }
  .footer-main {
    flex-wrap:wrap;
    padding-block:28px;
    gap:18px
  }
  .footer-main>.logo {
    font-size:24px
  }
  .footer-main>.text-link {
    margin-left:auto
  }
  .footer-main>span {
    order:3;
    width:100%;
    font-size:11px
  }
  .footer-bottom {
    flex-wrap:wrap;
    padding-block:20px;
    gap:12px;
    font-size:9px
  }
  .footer-bottom>span:first-child {
    width:100%
  }
  .footer-bottom>span:last-child {
    margin-left:auto
  }
  .dialog {
    padding:32px 23px
  }
  .dialog h2 {
    font-size:26px
  }
  .dialog .project-visual {
    height:285px
  }
  .dialog .studio-layout {
    height:193px;
    padding-inline:18px
  }
  .dialog .studio-layout strong {
    font-size:28px
  }
  .dialog .flow-layout {
    height:220px;
    margin:17px 12px
  }
  .dialog .flow-main {
    padding:15px 10px
  }
  .dialog .flow-title strong {
    font-size:8px
  }
  .dialog .flow-stats b {
    font-size:11px
  }
  .dialog .flow-chart svg {
    height:50px
  }
}
@media(max-width:420px) {
  .container {
    width:calc(100% - 32px)
  }
  .logo {
    font-size:21px
  }
  .logo-mark {
    width:31px;
    height:31px;
    font-size:16px;
    margin-right:7px
  }
  .nav-wrap {
    gap:9px
  }
  .nav-cta {
    font-size:10px;
    padding:9px 10px;
    gap:12px
  }
  .menu-toggle {
    width:35px;
    padding:7px
  }
  .hero-actions {
    gap:13px
  }
  .hero-actions .button {
    font-size:12px;
    padding:15px;
    gap:17px
  }
  .hero-actions .text-link {
    font-size:11px;
    gap:8px
  }
  .hero-art {
    height:420px
  }
  .wire-sphere {
    top:0
  }
  .label-code {
    top:38px;
    font-size:8px;
    gap:8px
  }
  .lime-text {
    font-size:18px
  }
  .code-tag {
    top:119px;
    font-size:8px
  }
  .desktop-window {
    top:144px
  }
  .desktop-content {
    height:168px
  }
  .desktop-main>strong {
    font-size:10px
  }
  .desktop-sidebar b {
    font-size:9px
  }
  .desktop-sidebar {
    font-size:6px;
    gap:8px
  }
  .desktop-main {
    padding:11px
  }
  .dashboard-stats small {
    font-size:5px
  }
  .dashboard-stats b {
    font-size:15px
  }
  .chart {
    height:47px
  }
  .web-window {
    top:220px
  }
  .web-content {
    padding:12px 15px 15px
  }
  .mini-web-body>strong {
    font-size:24px
  }
  .mini-web-body>small {
    font-size:5px
  }
  .mini-sun {
    font-size:74px
  }
  .window-bar {
    font-size:6px;
    height:27px;
    padding-inline:10px
  }
  .mini-logo {
    font-size:14px
  }
  .mini-logo small {
    font-size:5px
  }
  .mini-button {
    font-size:6px
  }
  .label-ready b {
    font-size:9px
  }
  .label-ready small {
    font-size:7px
  }
  .art-caption {
    font-size:5px
  }
  .skills-strip .container {
    gap:16px 20px
  }
  .skills-strip .container>span:not(.strip-intro):not(.strip-end) {
    font-size:17px
  }
  h2 {
    font-size:30px
  }
  .project-visual {
    height:275px
  }
  .studio-top {
    padding-inline:19px
  }
  .studio-layout {
    height:183px;
    padding-inline:19px
  }
  .studio-layout strong {
    font-size:28px
  }
  .flow-layout {
    height:211px;
    margin:18px 13px
  }
  .flow-sidebar {
    padding:15px 8px;
    gap:14px
  }
  .flow-sidebar small {
    font-size:5px
  }
  .flow-main {
    padding:15px 10px
  }
  .flow-title strong {
    font-size:8px
  }
  .flow-stats b {
    font-size:11px
  }
  .flow-stats small,.flow-stats em {
    font-size:5px
  }
  .flow-chart svg {
    height:49px
  }
  .project-caption small {
    font-size:10px
  }
  .process-grid {
    gap:30px 20px
  }
  .process-grid h3 {
    font-size:14px
  }
  .process-grid p {
    font-size:12px
  }
  .process-grid small {
    font-size:6px;
    letter-spacing:.03em
  }
  .contact-copy h2 {
    font-size:39px
  }
  .contact-copy h2>i {
    right:-50px;
    font-size:44px;
    top:34px
  }
  .contact-form {
    padding:25px 20px
  }
  .contact-form>h3 {
    font-size:16px
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .field {
    margin-bottom:18px
  }
  .price-card {
    padding:27px
  }
  .dialog .flow-stats b {
    font-size:9px
  }
  .dialog .flow-title strong {
    font-size:6px
  }
  .dialog .flow-title small {
    font-size:4px
  }
  .dialog .flow-sidebar small {
    font-size:4px
  }
  .dialog .studio-layout strong {
    font-size:24px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .js-ready .reveal:not(.visible) {
    opacity:1;
    transform:none
  }
  .wire-sphere,.label-code,.label-ready {
    animation:none
  }
}
.orbit-one {
  width:90%;
  left:5%
}
.service-card p,.section-heading>p,.price-card ul,.faq-answer>p,.contact-copy>p {
  font-size:14px
}
.field>input,.field>select,.field>textarea {
  font-size:14px
}
.field>label {
  font-size:12px
}
.price-card>p,.price-description,.package-bottom,.project-caption small,.custom-offer p,.contact-person div>span {
  font-size:12px
}
.package-button,.card-link,.custom-offer>a {
  font-size:13px
}
.consent,.form-footer,.field-hint,.project-note,.pricing-footnote,.contact-detail {
  font-size:11px
}
@media(max-width:420px) {
  h1 {
    font-size:clamp(32px,9.9vw,39px)
  }
}
@media(max-width:760px) {
  .hero-art {
    overflow-x:clip;
    overflow-y:visible
  }
}
@media(max-width:420px) {
  .contact-copy h2>i {
    position:static;
    font-size:44px;
    margin:15px 0 8px
  }
}

/* ForgeByte identity */
.brand-byte { color: #718d40; }
.forge-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.mobile-contact { display: none; }
@media (max-width: 760px) {
  .nav .mobile-contact { display: block; }
  .logo { font-size: 23px; }
}
@media (max-width: 520px) {
  .nav-cta { display: none; }
  .menu-toggle { margin-left: auto; }
}

.person-avatar-brand img { display: block; width: 100%; height: 100%; border-radius: inherit; }

/* Pointer depth and scroll parallax are decorative and desktop-only. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .pointer-effects .wire-sphere {
    translate: calc(var(--depth-x, 0px) * -.6) calc(var(--depth-y, 0px) * -.6 + var(--depth-scroll, 0px) * .85);
  }
  .pointer-effects .art-grid,
  .pointer-effects .orbit {
    translate: calc(var(--depth-x, 0px) * -.25) calc(var(--depth-y, 0px) * -.25 + var(--depth-scroll, 0px) * .5);
  }
  .pointer-effects .desktop-window {
    translate: calc(var(--depth-x, 0px) * .55) calc(var(--depth-y, 0px) * .55 + var(--depth-scroll, 0px) * .3);
  }
  .pointer-effects .web-window {
    translate: var(--depth-x, 0px) calc(var(--depth-y, 0px) + var(--depth-scroll, 0px) * -.18);
  }
  .pointer-effects .label-code {
    translate: calc(var(--depth-x, 0px) * .75) calc(var(--depth-y, 0px) * .75 + var(--depth-scroll, 0px) * -.3);
  }
  .pointer-effects .label-ready {
    translate: calc(var(--depth-x, 0px) * 1.15) calc(var(--depth-y, 0px) * 1.15 + var(--depth-scroll, 0px) * -.2);
  }
  .pointer-effects .service-card,
  .pointer-effects .price-card { isolation: isolate; }
  .pointer-effects .service-card::before,
  .pointer-effects .price-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(300px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), #c9ef6945, transparent 72%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity .35s ease;
  }
  .pointer-effects .service-card.is-pointed::before,
  .pointer-effects .price-card.is-pointed::before { opacity: 1; }
  .pointer-effects .project-card .project-visual {
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .pointer-effects .project-card.is-pointed .project-visual {
    transform: perspective(1100px) translateY(-4px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }
}

/* The selected pricing tab slides independently of panel content. */
.pricing-tabs { position: relative; isolation: isolate; }
.pricing-tabs button { position: relative; z-index: 1; }
.pricing-tabs button[aria-selected=true] { background: transparent; box-shadow: none; }
.pricing-tab-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: calc(50% - 7px);
  transform: translateX(5px);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 6px #283b1410;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.2,.75,.25,1), width .32s ease;
}

/* Native form controls are always usable; richer options are progressive. */
.contact-form { container-type: inline-size; }
.contact-form .field > input, .contact-form .field > select, .contact-form .field > textarea {
  min-height: 52px;
  padding: 14px 15px;
  border: 1px solid #dce3d2;
  border-radius: 12px;
  background: linear-gradient(180deg, #fdfefb, #f5f7f0);
  box-shadow: 0 2px 3px #2b3b1604, inset 0 1px 0 #fff;
  font-size: 14px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.contact-form .field > input, .contact-form .field > textarea { -webkit-appearance: none; appearance: none; }
.contact-form .field > select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23647d40' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"), linear-gradient(180deg, #fdfefb, #f5f7f0);
  background-position: right 15px center, 0 0;
  background-size: 12px 8px, 100% 100%;
  background-repeat: no-repeat;
}
.contact-form .field > input:hover, .contact-form .field > select:hover, .contact-form .field > textarea:hover { border-color: #b7c79d; }
.contact-form .field > input:focus, .contact-form .field > select:focus, .contact-form .field > textarea:focus {
  outline: none;
  border-color: #86a953;
  box-shadow: 0 0 0 4px #a6c66b21, 0 4px 12px #3f551309;
}
.contact-form .field > textarea { min-height: 142px; }
.contact-form .field > input::placeholder, .contact-form .field > textarea::placeholder { color: #87917d; }
.contact-form .field > label { margin-bottom: 9px; font-weight: 600; }
.contact-form .field:focus-within > label { color: #4e6c29; }
.contact-form .consent > input { width: 17px; height: 17px; margin-top: 1px; }
.contact-form.was-validated .field > :invalid { border-color: #b75e48; box-shadow: 0 0 0 3px #b75e4812; }
@supports selector(:user-invalid) {
  .contact-form .field > :user-invalid { border-color: #b75e48; box-shadow: 0 0 0 3px #b75e4812; }
}
@container (max-width: 440px) {
  .form-row-selects { grid-template-columns: 1fr; gap: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .form-row-selects { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 760px) {
  .contact-form .field > input, .contact-form .field > select, .contact-form .field > textarea { font-size: 16px; }
}
@supports (appearance: base-select) and selector(::picker(select)) {
  .contact-form .field > select.select-rich, select.select-rich::picker(select) { appearance: base-select; }
  .contact-form .field > select.select-rich { display: flex; align-items: center; gap: 12px; padding: 14px 15px; background-image: linear-gradient(180deg, #fdfefb, #f5f7f0); }
  .select-rich > button { display: flex; align-items: center; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; }
  .select-rich selectedcontent { display: block; min-width: 0; }
  .select-rich selectedcontent .native-option-icon, .select-rich selectedcontent small { display: none; }
  .select-rich::picker-icon { color: #647d40; transition: transform .2s; }
  .select-rich:open::picker-icon { transform: rotate(180deg); }
  .select-rich::picker(select) {
    min-width: min(310px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(370px, 60vh);
    margin-block: 8px;
    padding: 6px;
    border: 1px solid #d7e1c9;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 40px #26361620, 0 3px 9px #26361608;
    color: var(--ink);
    font: 13px/1.4 var(--font);
    overflow: auto;
  }
  .select-rich option { display: flex; align-items: center; gap: 11px; min-height: 51px; padding: 10px; border-radius: 10px; white-space: normal; cursor: pointer; }
  .select-rich option + option { margin-top: 3px; }
  .select-rich option:hover, .select-rich option:focus { background: #f0f5e7; }
  .select-rich option:checked { background: #eaf3d9; }
  .select-rich option::checkmark { order: 3; margin-left: auto; color: #5a7c2d; }
  .native-option-icon { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 33px; border: 1px solid #e1e8d6; border-radius: 9px; background: #f8faf3; color: #6c8646; font-weight: 600; }
  .native-option-copy { min-width: 0; line-height: 1.4; }
  .native-option-copy > span { display: block; font-weight: 550; }
  .native-option-copy > small { display: block; margin-top: 3px; font-size: 11px; color: #667258; }
}

/* A light travels around the featured offer without rotating its content. */
@property --offer-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.price-featured { isolation: isolate; }
.price-featured .popular-tag { z-index: 1; box-shadow: 0 3px 12px #75962b1a; }
.price-featured::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--offer-angle), #a8c669 0%, #a8c669 58%, #d2f65a 72%, #f5ffd5 77%, #82a946 84%, #a8c669 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: offer-border-orbit 7s linear infinite;
  animation-play-state: paused;
}
.price-featured.border-running::after { animation-play-state: running; }
@keyframes offer-border-orbit { to { --offer-angle: 360deg; } }
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .price-featured::after { display: none; }
}

/* Small cues help users navigate and discover the interactive previews. */
.project-card { display: block; color: inherit; text-decoration: none; }
.full-demo-preview { position: relative; background: #e9ede2; height: auto; aspect-ratio: 1.56; }
.full-demo-preview > img { width: 100%; height: calc(100% - 29px); object-fit: cover; object-position: top; }
.full-demo-preview .project-browser { background: #f8faf4; border-bottom: 1px solid #d9dfce; padding-inline: 15px; }
.demo-kind { display: block; width: fit-content; margin-bottom: 9px; padding: 4px 8px; background: #e4ead7; border-radius: 5px; color: #5e7340; font-size: 9px; letter-spacing: .04em; font-weight: 600; }
.demo-feature-line { display: block; color: var(--muted); font-size: 11px; margin-top: 13px; line-height: 1.7; }
.demo-feature-line b { display: block; width: fit-content; margin-top: 8px; color: #4d6b2e; font-weight: 600; border-bottom: 1px solid #bccd9e; }
.project-grid { row-gap: 40px; }
@media (max-width: 760px) { .project-card .full-demo-preview { height: auto; } }
.nav a[aria-current=location] { color: #4d6b2e; }
.nav a[aria-current=location]::after,
.nav a:focus-visible::after { transform: scaleX(1); }
.project-visual::after {
  content: 'Otwórz podgląd ↗';
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 9px 14px;
  border: 1px solid #d7e1c5;
  border-radius: 999px;
  background: #ffffffed;
  box-shadow: 0 4px 18px #283b1414;
  color: #354727;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  translate: 0 8px;
  transition: opacity .22s ease, translate .22s ease;
}
.project-card:hover .project-visual::after,
.project-card:focus-visible .project-visual::after { opacity: 1; translate: 0 0; }
.project-card:focus-visible .round-arrow { background: var(--lime); }
.button > span:last-child { transition: transform .22s ease; }
.button:where(:hover, :focus-visible):not(.loading) > span:last-child { transform: translate(3px, -3px); }
@media (hover: none) {
  .project-visual::after { opacity: 1; translate: 0 0; }
}
.field-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 7px; }
.field-meta .field-hint { margin-top: 0; }
.message-counter { flex-shrink: 0; color: #7e8872; font-size: 10px; font-variant-numeric: tabular-nums; }
.message-counter.near-limit { color: #986127; }
.contact-form .field-hint, .contact-form .form-footer, .contact-form .consent { color: #647255; }
.faq-list details { transition: background .25s ease; }
.faq-list details[open] { background: linear-gradient(90deg, #eaf2db6b, transparent); }
.faq-list summary > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid #dce5ce; border-radius: 50%; background: #f7faf0; }
.faq-list details[open] summary > span { background: #e5f1ce; border-color: #bbd493; }
/* There is exactly one height animation, owned by the measured JS controller. */
.faq-list details.is-animating { overflow: hidden; }
.faq-answer { display: flow-root; }
.faq-answer > p { margin: 0 0 24px; }
.faq-list summary[aria-expanded=false] > span { transform: none; }
.pricing-group-heading { font-size: 17px; font-family: var(--heading); margin: 0 0 24px; }
.pricing-tabs:not([hidden]) ~ .pricing-group-heading { display: none; }
.pricing-grid + .pricing-group-heading { margin-top: 40px; }
@media (max-width: 420px) {
  .field-meta { flex-wrap: wrap; gap: 4px; }
  .message-counter { margin-left: auto; }
  .availability { font-size: 10px; }
}

/* The navigation remains available if scripts are disabled or cannot initialize. */
@media (max-width: 760px) {
  html:not(.nav-ready) .header { position: relative; }
  html:not(.nav-ready) .nav-wrap { height: auto; min-height: 74px; padding-block: 16px; flex-wrap: wrap; }
  html:not(.nav-ready) .menu-toggle { display: none; }
  html:not(.nav-ready) .nav {
    display: flex;
    position: static;
    order: 3;
    width: 100%;
    padding: 8px 0 0;
    gap: 18px;
    overflow-x: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
    font-size: 12px;
  }
  .form-row-selects { grid-template-columns: 1fr; gap: 0; }
}

/* Native dialog fallback for browsers predating showModal. */
html { scrollbar-gutter: stable; }
html.has-dialog { overflow: hidden; }
dialog:not([open]) { display: none; }
.dialog-overlay { position: fixed; inset: 0; z-index: 1000; background: #1d251b80; }
dialog.dialog-fallback[open] { display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 1001; max-height: 90vh; overflow-y: auto; }

/* Phone layouts: generous touch targets and a clear reading rhythm. */
@media (max-width: 760px) {
  html { scrollbar-gutter: auto; scroll-padding-top: 88px; }
  .container { width: calc(100% - 40px); }
  .menu-toggle { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
  .nav { max-height: calc(100dvh - 74px); overflow-y: auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .nav a { min-height: 48px; padding: 13px 12px; border-radius: 10px; }
  .nav .mobile-contact { margin-top: 8px; background: var(--lime); color: var(--ink); }
  .hero { padding-top: 32px; padding-bottom: 48px; }
  .hero-description { font-size: 15px; line-height: 1.75; }
  .hero-description br { display: none; }
  .hero-actions .button, .package-button { min-height: 54px; font-size: 14px; }
  .hero-actions .text-link { min-height: 44px; font-size: 14px; }
  .hero-reassurance { flex-wrap: wrap; gap: 8px 18px; font-size: 11px; }
  .section-heading p { font-size: 14px; line-height: 1.75; }
  .section-label { line-height: 1.65; }
  .project-grid { gap: 32px; }
  .project-caption { align-items: flex-start; gap: 12px; }
  .project-caption>span:first-child { min-width: 0; }
  .project-caption strong { line-height: 1.35; }
  .demo-feature-line { font-size: 12px; line-height: 1.75; }
  .demo-feature-line b { display: block; padding-top: 8px; }
  .round-arrow { flex-shrink: 0; }
  .pricing-tabs button { min-height: 48px; line-height: 1.4; }
  .price-card { padding: 28px 24px; border-radius: 20px; }
  .pricing-footnote, .project-note { font-size: 12px; line-height: 1.75; }
  .contact-copy h2 { font-size: clamp(34px, 9.6vw, 58px); }
  .contact-copy h2>i { position: static; font-size: 40px; margin: 12px 0 0; }
  .contact-form { border-radius: 20px; padding: 26px 20px; }
  .field>input, .field>select, .field>textarea { min-height: 52px; font-size: 16px; }
  .contact-form .field>select.select-rich, select.select-rich::picker(select) { appearance: auto; }
  .contact-form .field>select.select-rich { display: block; }
  .consent { font-size: 12px; line-height: 1.7; }
  .consent input { flex-shrink: 0; width: 20px; height: 20px; }
  .field-hint, .form-footer { font-size: 12px; }
  .selected-package { align-items: center; gap: 8px; }
  .selected-package button, .dialog-close { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  .dialog { max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 20px; }
  .privacy-dialog h2 { padding-right: 24px; }
}
@media (max-width: 520px) {
  h1 { font-size: clamp(35px, 10.9vw, 52px); line-height: 1.13; letter-spacing: -.065em; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .button { justify-content: space-between; padding-inline: 20px; }
  .hero-actions .text-link { align-self: center; }
  .hero-art { margin-top: 18px; }
  .process-grid { grid-template-columns: 1fr; gap: 28px; }
  .process-grid article { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; }
  .step-number { grid-row: 1 / 4; margin: 0; border: 0; font-size: 30px; padding: 0; }
  .step-number i { display: none; }
  .process-grid h3 { margin-bottom: 10px; font-size: 18px; }
  .process-grid p { margin-bottom: 12px; font-size: 14px; }
  .process-grid small { font-size: 9px; }
  .footer-bottom { font-size: 11px; line-height: 1.7; }
}
@media (max-width: 360px) {
  .container { width: calc(100% - 32px); }
  .price-card { padding-inline: 20px; }
  .pricing-tabs button { font-size: 11px; }
}

/* Homepage themes. Preview images retain the palettes of the demo websites. */
.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 76px;
  width: 76px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #e9ece1;
  color: #72766b;
  isolation: isolate;
}
.theme-toggle::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 5px;
  width: 32px;
  height: 32px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 2px 5px #00000012;
  z-index: -1;
  transition: transform .22s ease-out, background-color .22s ease-out;
}
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.theme-sun { color: var(--ink); }
.theme-toggle:hover { border-color: var(--green); }
.theme-toggle:focus-visible { outline: 2px solid var(--green); }
html[data-theme=dark] {
  color-scheme: dark;
  --bg: #141810;
  --paper: #20261b;
  --ink: #eef2e6;
  --muted: #adb6a0;
  --line: #35402c;
  --green: #badb79;
}
html[data-theme=dark] .header { background: #141810ee; border-bottom-color: #35402c80; }
html[data-theme=dark] .header.scrolled { box-shadow: 0 2px 20px #00000030; }
html[data-theme=dark] .theme-toggle { background: #293222; color: #8d9b7e; }
html[data-theme=dark] .theme-toggle::before { transform: translateX(34px); background: var(--lime); }
html[data-theme=dark] .theme-sun { color: #adb6a0; }
html[data-theme=dark] .theme-moon { color: #23261f; }
html[data-theme=dark] :is(.button-lime, .popular-tag, .ready-check, .hero-highlight, .logo-mark, .skip-link) { color: #23261f; }
html[data-theme=dark] ::selection { color: #23261f; }
html[data-theme=dark] .nav .mobile-contact { color: #23261f; }
html[data-theme=dark] .button-dark { background: var(--lime); color: #23261f; }
html[data-theme=dark] .button-dark:hover { background: #c4eb3e; }
html[data-theme=dark] .button-outline { border-color: #596a46; }
html[data-theme=dark] .button-outline:hover { background: #293222; }
html[data-theme=dark] :is(.brand-byte, .logo-dot, .lime-text, .code-tag, .tech-plus, .tech-dot,
  .custom-icon, .contact-copy h2>span, .contact-copy h2>i, .contact-email>span, .contact-detail>span,
  .contact-form h3>span, .field>label>span, .price-card li::before, .price-card h3>span,
  .faq-list summary>span, .native-option-icon, .select-rich::picker-icon, .nav a[aria-current=location]) { color: var(--green); }
html[data-theme=dark] :is(.hero-description, .skills-strip .container>span:not(.strip-intro):not(.strip-end),
  .tags>span, .price-card ul, .pricing-tabs button, .contact-copy>p, .contact-person span,
  .contact-detail, .project-note, .pricing-footnote, .package-bottom, .art-caption, .card-number,
  .field>label>.optional, .field-hint, .form-footer, .consent, .contact-form .field-hint,
  .contact-form .form-footer, .contact-form .consent, .message-counter,
  .native-option-copy>small, .footer-bottom, .footer-intro>p, .project-browser small) { color: var(--muted); }
html[data-theme=dark] :is(.price-card li b, .demo-feature-line b, .contact-form .field:focus-within>label) { color: var(--ink); }
html[data-theme=dark] .hero-art::before { background: radial-gradient(ellipse at 50% 40%, #759b2530, transparent 65%); }
html[data-theme=dark] .orbit { border-color: #75944f55; }
html[data-theme=dark] :is(.floating-label, .mini-window, .contact-form) { background: var(--paper); border-color: var(--line); box-shadow: 0 16px 40px #00000025; }
html[data-theme=dark] :is(.window-bar, .desktop-sidebar, .address) { background: #272f21; color: var(--muted); border-color: var(--line); }
html[data-theme=dark] .desktop-sidebar .selected { background: #35452a; color: #d5ebb6; }
html[data-theme=dark] :is(.dashboard-stats>div, .chart) { border-color: var(--line); }
html[data-theme=dark] .web-content { background: #314326; }
html[data-theme=dark] .mini-sun { color: #a6c758; }
html[data-theme=dark] .mini-button { background: var(--lime); color: #23261f; }
html[data-theme=dark] .service-card { background: #1b2117; }
html[data-theme=dark] :is(.service-featured, .price-featured) { background: #26311d; }
html[data-theme=dark] .service-icon { background: #303b25; }
html[data-theme=dark] .service-featured .service-icon { background: var(--lime); }
html[data-theme=dark] .service-featured .service-icon svg { stroke: #23261f; }
html[data-theme=dark] :is(.tags>span, .card-link, .project-visual, .project-browser, .package-bottom,
  .contact-section, .contact-email, .person-avatar, .contact-form, .demo-feature-line b) { border-color: var(--line); }
html[data-theme=dark] .projects-section { background: #1a2015; }
html[data-theme=dark] :is(.full-demo-preview, .project-browser, .full-demo-preview .project-browser) { background: #293222; border-color: var(--line); }
html[data-theme=dark] .demo-kind { background: #303f24; color: #c1d8a0; }
html[data-theme=dark] .project-open-hint { background: #20261bf2; border-color: #596a46; color: var(--ink); }
html[data-theme=dark] .round-arrow { border-color: #596a46; }
html[data-theme=dark] .project-card:hover .round-arrow { color: #23261f; }
html[data-theme=dark] .pricing-tabs { background: #293222; border-color: var(--line); }
html[data-theme=dark] .pricing-tab-indicator { background: var(--paper); }
html[data-theme=dark] .pricing-tabs button[aria-selected=true] { color: var(--ink); }
html[data-theme=dark] .price-card { background: #1b2117; }
html[data-theme=dark] .price-featured { background: #26311d; border-color: #718d40; }
html[data-theme=dark] .package-divider { background: var(--line); }
html[data-theme=dark] .process-section { background: #20291a; }
html[data-theme=dark] .faq-list details[open] { background: linear-gradient(90deg, #334a206b, transparent); }
html[data-theme=dark] .faq-list summary>span { background: #293222; border-color: var(--line); }
html[data-theme=dark] .faq-list details[open] summary>span { background: #354a25; border-color: #596a46; }
html[data-theme=dark] .contact-section { background: #1f2918; }
html[data-theme=dark] :is(.person-avatar, .dialog-close) { background: #35452a; }
html[data-theme=dark] .contact-person .status-dot { border-color: #1f2918; }
html[data-theme=dark] .field>input,
html[data-theme=dark] .field>textarea,
html[data-theme=dark] .field>select { background-color: #171d12; border-color: #465438; }
html[data-theme=dark] .contact-form .field>input,
html[data-theme=dark] .contact-form .field>textarea { background: linear-gradient(180deg, #252d1e, #1d2417); box-shadow: inset 0 1px 0 #ffffff05; }
html[data-theme=dark] .contact-form .field>select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23badb79' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"), linear-gradient(180deg, #252d1e, #1d2417);
}
html[data-theme=dark] .contact-form .field>select.select-rich { background-image: linear-gradient(180deg, #252d1e, #1d2417); }
html[data-theme=dark] .contact-form .field>:is(input, select, textarea) { border-color: #465438; }
html[data-theme=dark] .contact-form .field>:is(input, select, textarea):hover { border-color: #718d40; }
html[data-theme=dark] .contact-form .field>:is(input, select, textarea):focus { border-color: var(--green); box-shadow: 0 0 0 4px #a6c66b21; }
html[data-theme=dark] .contact-form .field>:is(input, textarea)::placeholder { color: #a3ae96; }
html[data-theme=dark] .select-rich::picker(select) { background: var(--paper); color: var(--ink); border-color: #596a46; }
html[data-theme=dark] .select-rich option:hover,
html[data-theme=dark] .select-rich option:focus { background: #303f24; }
html[data-theme=dark] .select-rich option:checked { background: #3b4c2d; }
html[data-theme=dark] .select-rich option::checkmark { color: var(--green); }
html[data-theme=dark] .native-option-icon { background: #293222; border-color: var(--line); }
html[data-theme=dark] .selected-package { background: #303f24; border-color: #596a46; }
html[data-theme=dark] .form-status:not(:empty) { background: #303f24; color: #d5ebb6; }
html[data-theme=dark] .form-status.error:not(:empty) { background: #42251f; color: #ffc2b3; }
html[data-theme=dark] .contact-form.was-validated .field>:invalid,
html[data-theme=dark] .contact-form .field>:user-invalid { border-color: #eb9e8c; }
html[data-theme=dark] .message-counter.near-limit { color: #edc07f; }

/* Snapshot opacity is composited without repainting every themed element each frame. */
@keyframes theme-crossfade { from { opacity: 0; } to { opacity: 1; } }
html.theme-view-transition::view-transition-group(root) { animation-duration: .22s; }
html.theme-view-transition::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.theme-view-transition::view-transition-new(root) { animation: theme-crossfade .22s ease-out both; mix-blend-mode: normal; }
html.theme-view-transition::view-transition { pointer-events: none; }
html.theme-view-transition *, html.theme-view-transition *::before, html.theme-view-transition *::after {
  transition: none !important;
  animation-play-state: paused !important;
}
/* A small CSS fallback for browsers without native snapshot transitions. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-switching:not(.theme-view-transition) :is(body, .header, .theme-toggle, .theme-toggle svg,
    .projects-section, .process-section, .contact-section, .audit-section,
    .service-card, .service-icon, .price-card, .contact-form, .dialog,
    .pricing-tabs, .pricing-tab-indicator, .floating-label, .mini-window,
    .window-bar, .desktop-sidebar, .desktop-sidebar .selected, .web-content, .address,
    .button-dark, .brand-byte, .hero-description, .code-tag, .art-caption,
    .service-card p, .tags>span, .price-card>p, .price-card ul, .price-card li b,
    .section-heading>p, .faq-answer>p, .contact-copy>p, .contact-copy h2>span,
    .contact-person div>span, .contact-detail, .pricing-footnote, .package-bottom,
    .project-note, .demo-kind, .demo-feature-line b, .footer-bottom,
    .skills-strip .container>span, .faq-list summary>span) {
    transition-property: background-color, color, border-color !important;
    transition-duration: .22s !important;
    transition-delay: 0s !important;
    transition-timing-function: ease-out !important;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .header-actions .nav-cta { display: none; }
}
@media (max-width: 760px) {
  .header-actions { gap: 10px; }
  .header-actions .menu-toggle { margin-left: 0; }
}
@media (max-width: 360px) {
  .header-actions { gap: 6px; }
  .nav-wrap { gap: 6px; }
  .logo { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle::before { transition: none; }
}

/* A concrete first step for firms with an existing website. */
.audit-section{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center;margin-bottom:90px;padding:48px;background:#eaf1da;border:1px solid #d8e3c2;border-radius:24px}
.audit-copy h2{font-size:clamp(27px,3.3vw,44px);line-height:1.16;letter-spacing:-.05em;margin:16px 0}
.audit-copy h2 span{color:#547125}.audit-copy p{font-size:15px;line-height:1.8;max-width:550px;color:var(--muted)}
.audit-action{display:flex;flex-direction:column;align-items:flex-start;gap:18px}.audit-badge{font-size:12px;font-weight:700;color:#547125}.audit-action small{font-size:12px;line-height:1.8;color:var(--muted)}
@media(max-width:760px){.audit-section{grid-template-columns:1fr;padding:28px;gap:24px;margin-bottom:60px}.audit-action .button{width:100%;white-space:normal;text-align:left;justify-content:space-between}}
@media(max-width:360px){.audit-section{padding:22px}.audit-action .button{padding-inline:16px;font-size:12px}}
html[data-theme=dark] .audit-section { background: #26311d; border-color: var(--line); }
html[data-theme=dark] :is(.audit-copy h2 span, .audit-badge) { color: var(--green); }
html[data-theme=dark] .select-rich::picker-icon { color: var(--green); }