/* Chorer Inc website */

/* Fonts are served from this site (faster, and no request to Google). */
@font-face { font-family: 'Syne'; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url(fonts/syne-latin-wght-normal.woff2) format('woff2-variations'), url(fonts/syne-latin-wght-normal.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: 'Syne'; font-style: normal; font-display: swap; font-weight: 400 800;
  src: url(fonts/syne-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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: 'Figtree'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(fonts/figtree-latin-wght-normal.woff2) format('woff2-variations'), url(fonts/figtree-latin-wght-normal.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: 'Figtree'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(fonts/figtree-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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; }

@property --skin { syntax: '<color>'; inherits: true; initial-value: #C9A84C; }

:root {
  --skin: #C9A84C;            /* brand gold until a project lends its colour */
  --ink: #F4F1E8;
  --dim: rgba(244, 241, 232, .62);
  --line: rgba(244, 241, 232, .16);
  --display: 'Syne', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  transition: --skin .7s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #000; color: var(--ink); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h2 { font-size: clamp(1.75rem, 3.6vw, 3rem); }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--skin); outline-offset: 4px; }
.wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; }

/* ---------- pinned chameleon ---------- */
.scene { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.stage video, .stage .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.stage video, .stage .still { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.stage .still { opacity: 0; transition: opacity .7s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
/* In the project list the chameleon steps left so its head clears the titles. */
.stage.aside video, .stage.aside .still { transform: translateX(-21%); }
.stage .still.on { opacity: 1; }
.over { position: relative; margin-top: -100vh; margin-top: -100svh; }

/* ---------- nav ---------- */
.nav { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 1.5rem clamp(1.25rem, 4vw, 3rem); }
.mark { font: 800 1.25rem var(--display); text-decoration: none; letter-spacing: -.01em; }
.nav nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); }
.nav nav a { text-decoration: none; font-weight: 500; font-size: .95rem; padding: .25rem 0; border-bottom: 1px solid transparent; }
.nav nav a:hover { border-color: var(--skin); }

/* ---------- hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(2rem, 6vh, 4rem); background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 45%, rgba(0,0,0,.88) 100%); }
.hero-copy { max-width: 62rem; }
.hero h1 { font-size: clamp(2.5rem, 6.2vw, 5.75rem); }
.hero p { max-width: 34rem; margin-top: 1.5rem; font-size: 1.15rem; color: var(--dim); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.btn { display: inline-block; padding: .9rem 1.5rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.35); color: var(--ink); font: 600 .95rem var(--body); text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.btn:hover { border-color: var(--skin); color: var(--skin); }
.btn-fill { background: var(--skin); border-color: var(--skin); color: #000; }
.btn-fill:hover { background: var(--ink); border-color: var(--ink); color: #000; }

/* ---------- work ---------- */
.work { position: relative; padding: 22vh clamp(1.25rem, 4vw, 3rem) 30vh; }
.work::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.9) 62%, #000 76%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 38vh); mask-image: linear-gradient(180deg, transparent, #000 38vh); }
.work::after { content: ''; position: absolute; inset: auto 0 0 0; height: 30vh; background: linear-gradient(180deg, transparent, #000); }
.work-col { position: relative; z-index: 1; width: min(30rem, 100%); margin-left: auto; }
.work-note { margin-top: .9rem; color: var(--dim); }
.coarse { display: none; }
.empty { margin-top: 2.5rem; color: var(--dim); }

.rows { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { border-bottom: 1px solid var(--line); }
.row { display: block; padding: 1.15rem 0; text-decoration: none; transition: opacity .25s; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.row-title { font: 700 clamp(1.5rem, 3.2vw, 2.25rem)/1.1 var(--display); letter-spacing: -.015em; transition: color .25s, transform .25s; }
.row-tag { flex: none; font-size: .9rem; color: var(--dim); }
.row-tag::before { content: ''; display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; border-radius: 50%; background: var(--own); }
.row-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.row-more-in { overflow: hidden; display: block; }
.row-more img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 1rem; border-radius: 6px; }
.row-desc { display: block; margin-top: .75rem; color: var(--dim); font-size: .98rem; }
.rows.live .row:not(.on) { opacity: .4; }
.row.on .row-title { color: var(--own); transform: translateX(.4rem); }
.row.on .row-more { grid-template-rows: 1fr; }

/* ---------- founder ---------- */
.founder { padding: clamp(4rem, 12vh, 8rem) 0; }
.founder-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.portrait { margin: 0; position: relative; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; border-radius: 6px; background: #141414; }
.portrait figcaption { margin-top: .85rem; color: var(--dim); font-size: .95rem; }
.portrait strong { color: var(--ink); font: 700 1.1rem var(--display); margin-right: .5rem; }
blockquote { margin: 2rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--skin); font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 300; line-height: 1.4; max-width: 32rem; }
.facts { margin: 2rem 0 2.25rem; padding: 0; list-style: none; color: var(--dim); max-width: 32rem; }
.facts li { padding: .7rem 0; border-top: 1px solid var(--line); }

/* ---------- contact ---------- */
.contact { padding: clamp(4rem, 12vh, 8rem) 0; border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); }
.lede { margin-top: 1.25rem; color: var(--dim); max-width: 28rem; }
.reach { margin: 2.5rem 0 0; display: grid; grid-template-columns: 5rem 1fr; row-gap: 1rem; }
.reach dt { color: var(--dim); font-size: .95rem; }
.reach dd { margin: 0; font-weight: 500; }
.reach dd a { display: block; text-decoration: none; overflow-wrap: anywhere; }
.reach dd a:hover { color: var(--skin); }

.form { display: grid; gap: 1.4rem; align-content: start; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form label { display: grid; gap: .35rem; font-size: .9rem; color: var(--dim); }
.form input, .form textarea { width: 100%; padding: .7rem 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); font: 400 1.05rem var(--body); }
.form textarea { resize: vertical; min-height: 7rem; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--skin); }
.form .btn { justify-self: start; }
.trap { position: absolute; left: -9999px; }
.form-status { min-height: 1.6em; }
.form-status.bad { color: #FF8F7A; }

.foot { border-top: 1px solid var(--line); color: var(--dim); }

/* ---------- small screens and touch ---------- */
@media (hover: none) { .fine { display: none; } .coarse { display: inline; } }
@media (max-width: 800px) {
  .stage video, .stage .still { object-position: 76% 30%; }
  .stage.aside video, .stage.aside .still { transform: none; }
  .work::before { background: rgba(0,0,0,.72); }
  .work-col { margin-left: 0; }
  .founder-grid, .contact-grid, .pair { grid-template-columns: 1fr; }
  .portrait { max-width: 22rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms; }
}

/* logo */
.mark img { height: 3rem; width: auto; }

/* ---------- other services ---------- */
.services { padding: clamp(4rem, 12vh, 8rem) 0; }
.services-lede { margin-top: 1rem; color: var(--dim); max-width: 34rem; }
.svc { margin-top: clamp(2.5rem, 6vh, 4rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-top: 2rem; border-top: 1px solid var(--line); }
.svc h3 { margin: 0; font: 800 clamp(1.75rem, 3.4vw, 2.75rem)/1 var(--display); letter-spacing: -.02em; }
.svc-pitch { margin-top: 1.1rem; font-size: 1.2rem; font-weight: 300; line-height: 1.5; max-width: 36rem; }
.svc-points { margin: 1.75rem 0 0; padding: 0; list-style: none; max-width: 36rem; }
.svc-points li { padding: .75rem 0; border-top: 1px solid var(--line); color: var(--dim); }
.svc-points b { color: var(--ink); font-weight: 600; margin-right: .25rem; }
.svc-fit { margin-top: 1.25rem; color: var(--dim); font-size: .95rem; max-width: 36rem; }

.svc-visual { margin: 0; }
.kiosk { position: relative; display: grid; justify-items: center; gap: 1rem; padding: 1.75rem 1.75rem 1.5rem; background: #F4F1E8; color: #0A0A0A; border-radius: 22px; box-shadow: 0 0 0 10px #161616, 0 30px 80px rgba(0,0,0,.6); max-width: 22rem; margin-inline: auto; }
.kiosk-top { justify-self: start; font-weight: 600; font-size: .9rem; }
.qr { width: 100%; max-width: 15rem; aspect-ratio: 1; }
.qr rect { fill: #0A0A0A; }
.kiosk-timer { position: absolute; top: 1.2rem; right: 1.2rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; }
.kiosk-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.kiosk-timer circle { fill: none; stroke: rgba(0,0,0,.12); stroke-width: 3; }
.kiosk-timer .ring { stroke: #0A0A0A; stroke-dasharray: 100.53; stroke-dashoffset: 0; stroke-linecap: round; }
.kiosk-timer b { font-size: .8rem; font-variant-numeric: tabular-nums; }
.kiosk-note { font-weight: 600; }
.svc-visual figcaption { margin-top: 1.75rem; text-align: center; color: var(--dim); font-size: .9rem; }

@media (max-width: 800px) {
  .svc { grid-template-columns: 1fr; }
  .svc-visual { order: -1; }
  .kiosk { max-width: 15rem; padding: 1.25rem; }
  .qr { max-width: 11rem; }
  .nav nav a.wide { display: none; }
}

/* project brief fields */
.form select { width: 100%; padding: .7rem 1.5rem .7rem 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); font: 400 1.05rem var(--body); appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.form select:focus { outline: none; border-color: var(--skin); }
.form select option { background: #111; color: var(--ink); }
.form input::placeholder { color: rgba(244, 241, 232, .3); }
.opt { color: rgba(244, 241, 232, .4); }

/* ---------- FAQ ---------- */
.faq { padding: clamp(4rem, 12vh, 8rem) 0; border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.faq-grid h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); }
.faq-more { margin-top: 1.25rem; }
.faq-more a, .work-more a { color: var(--skin); font-weight: 600; text-underline-offset: .25em; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 400 1.6rem/1 var(--body); color: var(--dim); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--skin); }
.faq summary h3 { margin: 0; font: 600 1.15rem/1.35 var(--body); }
.faq summary:hover h3 { color: var(--skin); }
.faq details p { margin: 0 0 1.4rem; max-width: 40rem; color: var(--dim); }
@media (max-width: 960px) { .faq-grid { grid-template-columns: 1fr; } }

/* ================= shared chrome ================= */
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; padding: .75rem 1rem; background: var(--ink); color: #000; font-weight: 600; }
.skip:focus { left: 1rem; top: 1rem; }
.nav .nav-cta { padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 999px; }
.nav .nav-cta:hover { border-color: var(--skin); color: var(--skin); }
.nav-solid { position: sticky; top: 0; background: rgba(0, 0, 0, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-block: .9rem; }
.nav-solid .mark img { height: 2.4rem; }
.nav nav { align-items: center; }
.lead a { color: var(--skin); }
.work-more { margin-top: 1.75rem; }

.crumbs { padding-top: 1.5rem; font-size: .875rem; color: var(--dim); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: '/'; margin-right: .5rem; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* ================= inner pages ================= */
.page-head { padding: clamp(2.5rem, 8vh, 5rem) 0 clamp(2rem, 5vh, 3.5rem); }
.page-head h1 { font-size: clamp(2.1rem, 5vw, 4.2rem); max-width: 18ch; }
.page-head .lead { margin-top: 1.25rem; max-width: 42rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 300; line-height: 1.55; color: rgba(244, 241, 232, .82); }
.page-head .actions { margin-top: 2rem; }
.byline { margin-top: 1.25rem; color: var(--dim); font-size: .95rem; }
.facts-row { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 1.75rem 0 0; }
.facts-row dt { font-size: .85rem; color: var(--dim); }
.facts-row dd { margin: .15rem 0 0; font-weight: 600; font-size: 1.1rem; }
.facts-row a { color: var(--skin); }
.draft-note { margin-top: 1rem; padding: .7rem 1rem; border: 1px dashed var(--skin); border-radius: 8px; color: var(--skin); }

.page-body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(2rem, 6vw, 5rem); align-items: start; padding-bottom: clamp(3rem, 10vh, 6rem); border-top: 1px solid var(--line); padding-top: clamp(2rem, 5vh, 3rem); }
.prose { max-width: 44rem; font-size: 1.075rem; line-height: 1.7; }
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.15; margin: 2.75rem 0 .9rem; scroll-margin-top: 6rem; }
.prose > :first-child, .prose section:first-child > h2:first-child { margin-top: 0; }
.prose h3 { font: 700 1.15rem/1.35 var(--body); margin: 1.75rem 0 .5rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; color: rgba(244, 241, 232, .8); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .45rem; padding-left: .25rem; }
.prose li::marker { color: var(--skin); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--skin); text-underline-offset: .2em; }
.prose .case-img { width: 100%; border-radius: 8px; margin-bottom: 2rem; }
.faq-inline { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.pull { margin: 2.5rem 0; padding-left: 1.25rem; border-left: 2px solid var(--skin); }
.pull blockquote { margin: 0; font-size: 1.3rem; font-weight: 300; line-height: 1.45; }
.pull figcaption { margin-top: .75rem; color: var(--dim); }

.side { position: sticky; top: 6rem; }
.side h2 { font: 700 .95rem var(--body); letter-spacing: 0; color: var(--dim); margin: 0 0 .75rem; }
.side h2 ~ h2 { margin-top: 2rem; }
.side .btn { margin-top: .9rem; }
.side-note { color: var(--dim); font-size: .95rem; }
.side-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.side-links li { border-bottom: 1px solid var(--line); }
.side-links a { display: block; padding: .65rem 0; text-decoration: none; font-weight: 500; }
.side-links a:hover { color: var(--skin); }
.not-found { max-width: 28rem; margin-bottom: 4rem; }

.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.price-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.price-table th, .price-table td { padding: .85rem .75rem .85rem 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table thead th { font-weight: 500; font-size: .85rem; color: var(--dim); }
.price-table tbody th { font-weight: 600; }
.price-table tbody th a { color: var(--ink); text-decoration: none; }
.price-table tbody th a:hover { color: var(--skin); }
.price-table td { color: rgba(244, 241, 232, .8); }

/* services grid (home and /services) */
.svc-grid { list-style: none; margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.svc-grid li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.svc-grid a { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.5rem 1.5rem 1.75rem; text-decoration: none; transition: background .2s; }
.svc-grid a:hover { background: rgba(244, 241, 232, .04); }
.svc-grid h3, .svc-grid h2 { margin: 0; font: 700 1.3rem/1.2 var(--display); letter-spacing: -.01em; }
.svc-grid a:hover h3, .svc-grid a:hover h2 { color: var(--skin); }
.svc-grid p { color: var(--dim); font-size: .98rem; }
.svc-price { margin-top: auto; font-weight: 600; color: var(--skin); }
.svc-grid-page { margin-bottom: clamp(3rem, 10vh, 6rem); }
.services .svc { margin-top: clamp(3rem, 8vh, 5rem); }

/* work grid (/work) */
.work-grid { list-style: none; margin: 0 0 clamp(3rem, 10vh, 6rem); padding: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 2.5rem 2rem; border-top: 1px solid var(--line); }
.work-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin-bottom: 1rem; background: #111; }
.work-grid h2 { font-size: 1.5rem; line-height: 1.1; }
.work-grid h2::before { content: ''; display: inline-block; width: .55rem; height: .55rem; margin-right: .6rem; border-radius: 50%; background: var(--own); vertical-align: middle; }
.work-meta { margin-top: .35rem; color: var(--dim); font-size: .9rem; }
.work-grid p:not(.work-meta) { margin-top: .6rem; color: rgba(244, 241, 232, .8); font-size: .98rem; }
.work-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.work-links a { color: var(--skin); font-weight: 600; font-size: .95rem; text-underline-offset: .2em; }

/* testimonials */
.quotes { padding: clamp(4rem, 12vh, 7rem) 0; border-top: 1px solid var(--line); }
.quote-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2.5rem; }
.quote-grid figure { margin: 0; }
.quote-grid blockquote { margin: 0; font-size: 1.2rem; font-weight: 300; line-height: 1.5; }
.quote-grid figcaption { margin-top: 1rem; color: var(--dim); }
.quote-grid strong { color: var(--ink); }

/* articles */
.latest { padding: clamp(4rem, 12vh, 7rem) 0; border-top: 1px solid var(--line); }
.post-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 2rem; }
.post-list a { display: block; text-decoration: none; }
.post-list img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin-bottom: 1rem; }
.post-list h3, .post-list h2 { margin: 0; font: 700 1.25rem/1.25 var(--display); letter-spacing: -.01em; }
.post-list a:hover h3, .post-list a:hover h2 { color: var(--skin); }
.post-list p { margin-top: .6rem; color: var(--dim); font-size: .98rem; }
.post-list time { display: block; margin-top: .75rem; font-size: .85rem; color: var(--dim); }
.post-list-page { margin-bottom: clamp(3rem, 10vh, 6rem); padding-top: 2rem; border-top: 1px solid var(--line); }

/* FAQ page */
.faq-page { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; padding: 2rem 0 clamp(3rem, 10vh, 6rem); border-top: 1px solid var(--line); }
.faq-toc { position: sticky; top: 6rem; }
.faq-toc ul { list-style: none; margin: 0; padding: 0; }
.faq-toc a { display: block; padding: .4rem 0; color: var(--dim); text-decoration: none; }
.faq-toc a:hover { color: var(--skin); }
.faq-group { scroll-margin-top: 6rem; }
.faq-group + .faq-group { margin-top: 3rem; }
.faq-group h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.qa { padding: 1.1rem 0; border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.qa h3 { margin: 0 0 .4rem; font: 600 1.15rem/1.35 var(--body); }
.qa p { color: rgba(244, 241, 232, .78); max-width: 44rem; }

/* footer */
.foot { padding: clamp(3rem, 8vh, 4.5rem) 0 2rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: start; }
.foot nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: flex-end; }
.foot nav h2 { text-align: right; }
.foot-brand img { height: 2.75rem; width: auto; opacity: 1; }
.foot-brand p { margin-top: 1rem; max-width: 20rem; color: var(--dim); font-size: .95rem; }
.foot-brand a { text-decoration: none; }
.foot nav h2 { font: 700 .95rem var(--body); letter-spacing: 0; margin: 0 0 .75rem; color: var(--ink); }
.foot nav ul { list-style: none; margin: 0; padding: 0; }
.foot nav a { display: inline-block; padding: .3rem 0; color: var(--dim); text-decoration: none; font-size: .95rem; }
.foot nav a:hover { color: var(--skin); }
.foot-base { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .875rem; }

@media (max-width: 960px) {
  .page-body, .faq-page { grid-template-columns: 1fr; }
  .side, .faq-toc { position: static; }
  .faq-toc ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot nav ul { justify-content: flex-start; }
  .foot nav h2 { text-align: left; }
}
@media (max-width: 800px) {
  .nav-solid .mark img { height: 2rem; }
  .nav nav { gap: 1rem; }
}
@media (max-width: 420px) {
  .foot-grid { grid-template-columns: 1fr; }
  .nav nav a:not(.nav-cta):not(.wide) + a:not(.nav-cta) { display: none; }
}

/* ================= What we build ================= */
:root { --out: cubic-bezier(.23, 1, .32, 1); --inout: cubic-bezier(.77, 0, .175, 1); }
.build-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.build-head .services-lede { margin: 0; }
.build { --svc: #5FD07A; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(2.5rem, 6vh, 4rem); }

.build-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.build-list li { border-bottom: 1px solid var(--line); }
.build-item { position: relative; display: grid; gap: .3rem; padding: 1.1rem 0 1.15rem 1.25rem; text-decoration: none; }
.build-item::before { content: ''; position: absolute; left: 0; top: 1.15rem; bottom: 1.15rem; width: 2px; border-radius: 2px; background: var(--c); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--out); }
.build-item.on::before { transform: scaleY(1); }
.build-name { font: 700 clamp(1.25rem, 2vw, 1.6rem)/1.15 var(--display); letter-spacing: -.015em; color: rgba(244, 241, 232, .5); transition: color .25s ease; }
.build-name::after { content: ''; display: inline-block; width: .5rem; height: .5rem; margin-left: .6rem; border-radius: 50%; background: var(--c); vertical-align: middle; opacity: .55; transition: opacity .25s ease; }
.build-desc { color: rgba(244, 241, 232, .45); font-size: .98rem; transition: color .25s ease; }
.build-more { justify-self: start; font-size: .9rem; font-weight: 600; color: var(--c); opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .25s var(--out); text-decoration: underline; text-underline-offset: .25em; }
.build-item.on .build-name, .build-item:hover .build-name { color: var(--ink); }
.build-item.on .build-name::after { opacity: 1; }
.build-item.on .build-desc { color: rgba(244, 241, 232, .78); }
.build-item.on .build-more { opacity: 1; transform: none; }
.build-progress { position: absolute; left: 1.25rem; right: 0; bottom: -1px; height: 1px; background: var(--c); transform: scaleX(0); transform-origin: left; }
.build.cycling .build-item.on .build-progress { animation: build-fill 5.2s linear forwards; }
.build.paused .build-item.on .build-progress { animation-play-state: paused; }
@keyframes build-fill { to { transform: scaleX(1); } }

/* the browser */
.build-stage { position: relative; }
.build-stage::before { content: ''; position: absolute; inset: 12% 8% -6%; background: var(--svc); filter: blur(70px); opacity: .22; border-radius: 50%; transition: background .6s ease; z-index: 0; }
.browser { position: relative; z-index: 1; border-radius: 14px; overflow: hidden; background: #F4F1E8; box-shadow: 0 0 0 1px rgba(244, 241, 232, .14), 0 40px 90px -30px rgba(0, 0, 0, .9); }
.browser-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; background: #1A1A1A; }
.browser-bar > i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(244, 241, 232, .22); }
.browser-url { margin-left: .8rem; flex: 1; max-width: 18rem; padding: .25rem .8rem; border-radius: 999px; background: #262626; color: rgba(244, 241, 232, .7); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-screen { position: relative; aspect-ratio: 16 / 10.5; color: #0A0A0A; }
.pnl { position: absolute; inset: 0; padding: 5.5%; opacity: 0; visibility: hidden; transition: opacity .3s ease-out, visibility 0s .3s; }
.pnl.on { opacity: 1; visibility: visible; transition: opacity .3s ease-out; }
:where(.pnl) :is(i, b, span, em) { display: block; font-style: normal; }   /* zero specificity: layout classes below win */
.p-design { --c: #5FD07A; } .p-dev { --c: #35C2B4; } .p-re { --c: #A47BF2; } .p-store { --c: #F08A62; } .p-app { --c: #4AA8F0; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes fade { from { opacity: 0; } }

/* 1. design: a wireframe assembles, then takes on colour */
.p-design { display: grid; grid-template-rows: auto 1fr auto; gap: 5%; }
.w-nav { display: flex; gap: 6%; align-items: center; padding: 2.5% 0; }
.w-nav b { height: .45rem; width: 12%; border-radius: 4px; background: #0A0A0A; }
.w-nav b:first-child { width: 18%; height: .7rem; }
.w-nav b:nth-child(2) { margin-left: auto; }
.w-hero { position: relative; border-radius: 10px; background: #E3DED1; padding: 6% 6%; display: grid; align-content: center; gap: .55rem; }
.w-hero .t1 { width: 62%; height: 1.05rem; border-radius: 5px; background: #0A0A0A; }
.w-hero .t2 { width: 44%; height: .55rem; border-radius: 4px; background: rgba(10, 10, 10, .45); }
.w-hero .cta { width: 22%; height: 1.3rem; margin-top: .4rem; border-radius: 999px; background: #0A0A0A; }
.w-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; height: 4.6rem; }
.w-card { border-radius: 8px; background: #E3DED1; }
.cursor { position: absolute; left: calc(6% + 9%); top: calc(50% + 1.6rem); width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid #0A0A0A; background: rgba(255, 255, 255, .6); opacity: 0; }
.p-design.on .w { animation: rise .55s var(--out) both; animation-delay: calc(var(--i) * 90ms); }
.p-design.on .w-hero { animation: rise .55s var(--out) 90ms both, paint .6s ease .9s forwards; }
.p-design.on .w-card:nth-child(2) { animation: rise .55s var(--out) 270ms both, paint .6s ease 1.15s forwards; }
.p-design.on .cursor { animation: cursor 1.6s var(--inout) .7s both; }
@keyframes paint { to { background: var(--c); } }
@keyframes cursor { 0% { opacity: 0; transform: translate(900%, 260%); } 20% { opacity: 1; } 70% { transform: none; } 80% { transform: scale(.7); } 90%, 100% { opacity: 1; transform: none; } }

/* 2. development: code writes itself, the speed score fills */
.p-dev { display: grid; grid-template-columns: 1.35fr 1fr; gap: 6%; align-items: center; }
.code { align-self: stretch; display: grid; align-content: center; gap: .7rem; padding: 8% 7%; border-radius: 10px; background: #141414; }
.code i { height: .5rem; width: var(--w); margin-left: calc(var(--x) * 9%); border-radius: 4px; background: rgba(244, 241, 232, .75); transform-origin: left; }
.code i:nth-child(3n + 2) { background: var(--c); }
.code i:nth-child(4n) { background: rgba(244, 241, 232, .35); }
.score { position: relative; display: grid; place-items: center; text-align: center; }
.score svg { width: 78%; transform: rotate(-90deg); }
.score circle { fill: none; stroke: #E3DED1; stroke-width: 2.6; }
.score .arc { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 100 100; }
.score b { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -64%); font: 800 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--display); }
.score small { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 90%); font-size: .75rem; font-weight: 600; color: rgba(10, 10, 10, .6); }
.p-dev.on .code i { animation: grow-x .4s var(--out) both; animation-delay: calc(var(--i) * 110ms); }
.p-dev.on .arc { animation: dash 1.5s var(--out) .45s both; }
.p-dev.on .score b, .p-dev.on .score small { animation: fade .5s ease-out 1.2s both; }
@keyframes dash { from { stroke-dashoffset: 100; } }

/* 3. redesign: a sweep wipes the old site away */
.p-re { padding: 0; }
.re-old, .re-new { position: absolute; inset: 0; padding: 5.5%; display: grid; gap: 3.5%; }
.re-old { background: #D9D6CF; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: .5fr 1fr 1.4fr .7fr; }
.re-old i { background: #B9B4AA; border: 1px dashed #8E897F; }
.re-old i:nth-child(1) { grid-column: 1 / -1; }
.re-old i:nth-child(2) { grid-row: 2 / 4; }
.re-old i:nth-child(6) { grid-column: 1 / -1; }
.re-new { background: #F4F1E8; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; clip-path: inset(0 0 0 0); }
.re-new .n1 { grid-column: 1 / -1; height: .7rem; width: 20%; border-radius: 4px; background: #0A0A0A; }
.re-new .n2 { grid-column: 1 / -1; border-radius: 10px; background: var(--c); }
.re-new .n3, .re-new .n4 { height: 3.4rem; border-radius: 8px; background: #E3DED1; }
.sweep { position: absolute; inset: 0; border-right: 3px solid var(--c); transform: translateX(0); pointer-events: none; }
.tag { position: absolute; bottom: 5%; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #0A0A0A; color: #F4F1E8; }
.t-new { left: 5%; } .t-old { right: 5%; background: #8E897F; }
.p-re.on .re-new { animation: wipe 1.3s var(--inout) .35s both; }
.p-re.on .sweep { animation: sweep 1.3s var(--inout) .35s both; }
.p-re.on .t-new { animation: fade .4s ease-out 1.5s both; }
.p-re.on .t-old { animation: fade .3s ease-out reverse 1.2s both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } }
@keyframes sweep { from { transform: translateX(-100%); } }

/* 4. online store: products load, one goes in the cart, the order lands */
.p-store { display: grid; grid-template-rows: auto 1fr; gap: 6%; padding-bottom: 15%; }
.st-bar { display: flex; justify-content: space-between; align-items: center; }
.st-logo { width: 18%; height: .7rem; border-radius: 4px; background: #0A0A0A; }
.st-cart { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; }
.st-cart b { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--c); color: #0A0A0A; font-size: .7rem; }
.st-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
.st-prod { display: grid; grid-template-rows: 1fr auto auto auto; gap: .45rem; padding: 7%; border-radius: 10px; background: #fff; box-shadow: 0 1px 0 rgba(10, 10, 10, .06); }
.st-img { border-radius: 6px; background: #E3DED1; min-height: 3rem; }
.st-prod:nth-child(2) .st-img { background: color-mix(in srgb, var(--c) 55%, #E3DED1); }
.st-l1 { height: .5rem; width: 80%; border-radius: 3px; background: #0A0A0A; }
.st-l2 { height: .45rem; width: 40%; border-radius: 3px; background: rgba(10, 10, 10, .4); }
.st-btn { height: 1.2rem; border-radius: 999px; background: #0A0A0A; }
.st-prod:nth-child(2) .st-btn { background: var(--c); }
.st-toast { position: absolute; left: 50%; bottom: 3.5%; padding: .45rem 1rem; border-radius: 999px; background: #0A0A0A; color: #F4F1E8; font-size: .8rem; font-weight: 600; white-space: nowrap; transform: translateX(-50%); }
.st-toast::before { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.p-store.on .st-prod { animation: rise .55s var(--out) both; animation-delay: calc(var(--i) * 110ms); }
.p-store.on .st-prod:nth-child(2) .st-btn { animation: press .3s ease 1s both; }
.p-store.on .st-cart b { animation: pop .45s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }
.p-store.on .st-toast { animation: toast .5s var(--out) 1.45s both; }
@keyframes press { 50% { transform: scale(.92); } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 12px); } }

/* 5. web app: a dashboard fills with live data */
.p-app { display: grid; grid-template-columns: 18% 1fr; gap: 5%; }
.ap-side { display: grid; align-content: start; gap: .7rem; padding: 18% 14%; border-radius: 10px; background: #141414; }
.ap-side i { height: .45rem; border-radius: 3px; background: rgba(244, 241, 232, .35); }
.ap-side i:first-child { background: var(--c); }
.ap-main { display: grid; grid-template-rows: auto 1fr; gap: 6%; }
.ap-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; }
.ap-kpis i { padding: 9% 10%; border-radius: 8px; background: #fff; }
.ap-kpis b { font: 800 clamp(.9rem, 1.6vw, 1.25rem)/1 var(--display); }
.ap-kpis i:first-child b { color: color-mix(in srgb, var(--c) 70%, #0A0A0A); }
.ap-chart { position: relative; display: flex; align-items: flex-end; gap: 4%; padding: 6% 5% 0; border-radius: 10px; background: #fff; }
.ap-chart > i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: #E3DED1; transform-origin: bottom; }
.ap-chart > i:nth-child(6) { background: var(--c); }
.ap-chart svg { position: absolute; inset: 10% 5% 18%; width: 90%; height: 72%; overflow: visible; }
.ap-chart path { fill: none; stroke: #0A0A0A; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ap-live { position: absolute; top: 5.5%; right: 5.5%; display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; }
.ap-live::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.p-app.on .ap-kpis i { animation: rise .5s var(--out) both; animation-delay: calc(var(--i) * 90ms); }
.p-app.on .ap-chart > i { animation: grow-y .6s var(--out) both; animation-delay: calc(.3s + var(--i) * 70ms); }
.p-app.on .ap-chart path { animation: draw 1.2s var(--inout) .7s both; }
.p-app.on .ap-live::before { animation: pulse 2s ease-in-out 1.5s infinite; }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes pulse { 50% { opacity: .25; } }

@media (max-width: 900px) {
  .build-head, .build { grid-template-columns: 1fr; }
  .build-stage { order: -1; }
  .build-item { padding-block: .9rem; }
  .build-desc { font-size: .92rem; }
  .st-cart, .st-toast, .tag, .ap-live, .score small, .browser-url { font-size: .65rem; }
}
@media (max-width: 480px) {
  .w-cards { height: 2.6rem; }
  .code { gap: .45rem; }
  .code i { height: .35rem; }
  .st-prod { gap: .3rem; }
  .st-btn { height: .8rem; }
  .ap-kpis b { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pnl.on *, .pnl.on, .build-item::before, .build-more, .build-stage::before { animation: none; transition: none; }
  .p-design .w-hero, .p-design .w-card:nth-child(2) { background: var(--c); }
  .build.cycling .build-item.on .build-progress { animation: none; }
}