:root {
  --bg: #f9faf7; --paper: #fff; --ink: #191c18; --muted: #63695f;
  --line: #dce1d7; --accent: #d6fa87; --dark: #1b201b; --radius: 9px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--bg); font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a, input, select, summary, textarea { -webkit-tap-highlight-color: transparent; }
button, select, summary { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button { color: inherit; }
:focus-visible { outline: 3px solid #326abc; outline-offset: 4px; }
[hidden] { display: none !important; }
.container { width: min(1200px, calc(100% - 88px)); margin: auto; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 12px; transform: translateY(-150%); padding: 14px; background: white; }
.skip-link:focus { transform: none; }
.review-line { background: #eef1e9; color: #50584b; font-size: 12px; padding: 9px 18px; text-align: center; letter-spacing: .01em; }
.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); }
.nav { min-height: 86px; display: flex; align-items: center; gap: 30px; justify-content: space-between; }
.wordmark { display: inline-flex; align-items: baseline; gap: 11px; font-size: 20px; letter-spacing: -.9px; white-space: nowrap; font-weight: 650; }
.wordmark .slash { color: #a6b09f; font-weight: 300; }
.wordmark .studio { font-weight: 450; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 13px; }
.nav-links a:not(.button):hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-links a[aria-current=page]:not(.button) { font-weight: 650; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 15px 21px; min-height: 48px; border: 1px solid transparent; border-radius: 5px; background: var(--ink); color: white; font-size: 14px; font-weight: 550; transition: transform .15s, background .15s; }
.button:hover { transform: translateY(-2px); background: #354030; }
.button.light { background: var(--accent); color: var(--ink); }
.button.outline { background: transparent; color: var(--ink); border-color: #c8cfc2; }
.button.small { min-height: 40px; padding: 10px 16px; font-size: 12px; }
.button.white { background: white; color: var(--ink); }
.arrow { width: 17px; height: 17px; flex-shrink: 0; }
.text-link { font-size: 14px; display: inline-flex; gap: 12px; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 6px; font-weight: 550; }
.menu-toggle { display: none; border: 1px solid var(--line); padding: 11px 14px; border-radius: 5px; background: transparent; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: clamp(44px, 5.9vw, 80px); line-height: 1.035; letter-spacing: -.065em; font-weight: 480; margin-bottom: 28px; }
h2 { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -.047em; font-weight: 480; margin-bottom: 24px; }
h3 { font-size: 23px; font-weight: 550; letter-spacing: -.035em; line-height: 1.2; }
p { line-height: 1.7; }
.body-large { font-size: 18px; color: var(--muted); max-width: 530px; line-height: 1.6; }
.muted { color: var(--muted); }
.note { font-size: 12px; line-height: 1.6; color: var(--muted); }
.eyebrow { font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 64px; padding-top: 78px; padding-bottom: 76px; }
.hero h1 .soft { color: #7a8372; }
.hero-copy .actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.hero-note { margin-top: 24px; font-size: 12px; color: var(--muted); }
.browser { overflow: hidden; border: 1px solid #cbd4c3; border-radius: 9px; background: white; box-shadow: 0 25px 60px -40px #29312680; }
.browser-chrome { padding: 11px 15px; display: flex; align-items: center; gap: 16px; background: #f0f3eb; border-bottom: 1px solid #dce2d5; font-size: 10px; color: #747d6c; }
.dots { display: flex; gap: 4px; }
.dots i { width: 5px; height: 5px; background: #b8c2ac; border-radius: 50%; }
.browser-address { flex: 1; text-align: center; }
.mini-screen { background: #f2f0df; padding: 27px; color: #314531; }
.mini-nav { display: flex; align-items: center; justify-content: space-between; font-size: 10px; padding-bottom: 30px; }
.mini-brand { font-family: Georgia, serif; font-size: 20px; }
.mini-screen h3 { font-family: Georgia, serif; font-size: 39px; line-height: 1.03; font-weight: 400; letter-spacing: -.05em; max-width: 260px; margin-bottom: 14px; }
.mini-screen p { font-size: 11px; max-width: 230px; }
.mini-hero { display: grid; grid-template-columns: 1fr .8fr; gap: 10px; align-items: end; }
.menu-print { border: 1px solid #b4bca1; padding: 17px 13px; transform: rotate(5deg); background: #fbf6df; margin-bottom: 12px; box-shadow: 0 9px 19px -12px #484a2b60; }
.menu-print span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; padding: 8px 0; border-bottom: 1px solid #cdd0ba; }
.menu-print strong { display: block; font-family: Georgia,serif; font-size: 21px; line-height: 1.1; font-weight: 400; margin: 6px 0 10px; }
.mini-cta { display: inline-block; padding: 10px 14px; font-size: 10px; background: #36513a; color: #fff; border-radius: 3px; }
.integration-ribbon { padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; }
.integration-ribbon strong { display: block; margin-bottom: 4px; font-size: 12px; }
.status-dot { display: inline-block; border-radius: 50%; width: 6px; height: 6px; background: #859c5b; margin-right: 5px; }
.hero-caption { text-align: right; font-size: 10px; margin: 12px 0 0; color: var(--muted); }
.promise-strip { padding: 21px 0; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #66705d; font-size: 12px; }
.promise-strip strong { color: var(--ink); font-weight: 550; }
.section { padding: 90px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 40px; }
.section-heading h2 { margin-bottom: 0; max-width: 650px; }
.section-heading p { max-width: 390px; margin-bottom: 0; color: var(--muted); font-size: 15px; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.demo-tile { min-width: 0; }
.sample-cover { height: 240px; overflow: hidden; padding: 27px 25px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s; position: relative; }
a:hover .sample-cover { transform: translateY(-4px); }
.sample-cover .cover-top { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .02em; }
.sample-cover h3 { font-size: 37px; line-height: 1.03; letter-spacing: -.05em; max-width: 230px; margin-bottom: 0; }
.sample-cover small { font-size: 10px; }
.sample-cover.service { background: #e4eaf3; color: #1c3765; }
.sample-cover.restaurant { background: #f3e5b3; color: #47512d; }
.sample-cover.restaurant h3 { font-family: Georgia,serif; font-weight: 400; }
.sample-cover.clinic { background: #e3ede7; color: #265b4c; }
.tile-details { display: flex; justify-content: space-between; gap: 12px; padding-top: 20px; }
.tile-details h3 { font-size: 17px; margin-bottom: 7px; }
.tile-details p { font-size: 12px; color: var(--muted); margin-bottom: 0; }
.tile-details > span { display: flex; align-items: start; padding-top: 2px; }
.tile-note { margin-top: 25px; }
.dark-section { background: var(--dark); color: #f5f7ee; }
.dark-section .muted, .dark-section .body-large, .dark-section .note { color: #b6c1ac; }
.dark-section h2 { max-width: 800px; }
.two-entry { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #47503e; margin-top: 46px; }
.entry { padding: 30px 45px 8px 0; }
.entry + .entry { border-left: 1px solid #47503e; padding-left: 45px; }
.entry h3 { font-size: 26px; }
.entry p { color: #b6c1ac; max-width: 450px; font-size: 15px; }
.entry .eyebrow { color: #cfe7a2; margin-bottom: 20px; display: block; }
.small-flow { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding-top: 18px; color: #d2e2c0; font-size: 12px; }
.outcomes { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; }
.outcome-row { display: grid; grid-template-columns: 42px 1fr; border-top: 1px solid var(--line); padding: 25px 0; gap: 16px; }
.outcome-row span { font-size: 12px; color: #7b8770; padding-top: 5px; }
.outcome-row h3 { font-size: 22px; margin-bottom: 10px; }
.outcome-row p { font-size: 14px; color: var(--muted); margin-bottom: 0; }
.cta-band { background: var(--accent); padding: 50px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cta-band h2 { font-size: 43px; max-width: 670px; margin-bottom: 13px; }
.cta-band p { margin-bottom: 0; font-size: 14px; }
.site-footer { padding: 50px 0 22px; }
.footer-top, .footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-top { align-items: center; padding-bottom: 35px; }
.footer-top p { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.footer-links { display: flex; gap: 23px; flex-wrap: wrap; font-size: 12px; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 20px; font-size: 10px; color: var(--muted); }
.page-title { padding: 70px 0 35px; max-width: 830px; }
.page-title h1 { font-size: 66px; }
.page-title p { max-width: 630px; }
.chip { display: inline-flex; align-items: center; gap: 7px; background: #edf1e6; font-size: 10px; color: #596449; padding: 7px 10px; border-radius: 3px; }
.integration-list { border-top: 1px solid var(--line); }
.integration-row { display: grid; grid-template-columns: 200px 1fr 220px; gap: 32px; padding: 31px 0; border-bottom: 1px solid var(--line); align-items: start; }
.integration-row h3 { margin-bottom: 8px; }
.integration-row p { font-size: 14px; color: var(--muted); margin-bottom: 9px; }
.integration-row .eyebrow { color: #687c58; font-size: 10px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 30px 0; border-top: 1px solid var(--line); }
.step { padding: 24px 22px 10px 0; }
.step strong { display: block; font-size: 14px; line-height: 1.5; margin: 12px 0; }
.step span { font-size: 11px; color: var(--muted); }
.boundary { padding: 24px; background: #edf1e5; font-size: 14px; line-height: 1.7; margin: 25px 0; border-left: 3px solid #82985c; }
.eco-root { padding: 36px; background: var(--dark); color: white; margin-bottom: 22px; }
.eco-root h2 { font-size: 35px; margin-bottom: 10px; }
.eco-root p { margin-bottom: 0; color: #c2ccb8; font-size: 14px; }
.eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eco-column { border-top: 2px solid #7f965c; padding: 25px 0; }
.eco-column > p { font-size: 14px; color: var(--muted); }
.eco-product { padding: 20px 0; border-top: 1px solid var(--line); }
.eco-product strong { display: block; font-size: 17px; margin-bottom: 8px; }
.eco-product p { margin-bottom: 0; font-size: 13px; color: var(--muted); }
.demo-banner { background: #20271d; color: #e6eede; padding: 13px 22px; font-size: 11px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.demo-banner a { text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.demo-theme { --theme: #204e93; --theme-bg: #f0f4f9; background: white; color: #142b49; }
.demo-theme.restaurant-theme { --theme: #3d5538; --theme-bg: #f7efdb; color: #34472f; background: #fcf8ed; }
.demo-theme.clinic-theme { --theme: #2c6357; --theme-bg: #e8f1eb; color: #23493f; background: #fbfdfb; }
.demo-nav { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 28px 0; border-bottom: 1px solid #a1aba82f; }
.demo-brand { font-size: 22px; letter-spacing: -1px; font-weight: 600; }
.restaurant-theme .demo-brand { font-family: Georgia,serif; font-size: 29px; font-weight: 400; }
.demo-nav-links { display: flex; gap: 28px; align-items: center; font-size: 13px; }
.demo-theme .button { background: var(--theme); color: white; }
.demo-theme .button.outline { background: transparent; color: var(--theme); border-color: var(--theme); }
.demo-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 90px; align-items: center; padding: 80px 0; }
.demo-hero h1 { font-size: clamp(47px,5.7vw,76px); }
.restaurant-theme h1, .restaurant-theme h2 { font-family: Georgia,serif; font-weight: 400; letter-spacing: -.045em; }
.demo-hero p { max-width: 490px; font-size: 16px; color: #687668; }
.demo-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 27px; }
.service-spec { background: #e7eef7; color: #25496e; padding: 36px; }
.service-spec h3 { font-size: 27px; max-width: 240px; }
.spec-line { padding: 20px 0; border-top: 1px solid #bdcadd; display: flex; justify-content: space-between; gap: 20px; font-size: 13px; }
.spec-line:first-of-type { margin-top: 34px; }
.spec-line:last-child { padding-bottom: 0; }
.menu-board { padding: 35px; background: #f1e4b8; border: 1px solid #d8ccab; transform: rotate(2deg); margin: 6px; }
.menu-board .eyebrow { font-size: 10px; text-align: center; }
.menu-board h3 { font-family: Georgia,serif; font-size: 43px; font-weight: 400; text-align: center; padding: 15px 0 20px; border-bottom: 1px solid #c4bc92; }
.menu-board .spec-line { border-color: #c4bc92; font-size: 13px; }
.clinic-spec { background: #e4efe7; padding: 37px; border-radius: 110px 110px 10px 10px; }
.clinic-spec .cross { font-size: 60px; line-height: 1; font-weight: 300; text-align: center; margin: 28px 0 35px; }
.clinic-spec h3 { font-size: 26px; text-align: center; }
.clinic-spec .spec-line { border-color: #bfd1c6; }
.demo-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-bottom: 65px; }
.demo-service { border-top: 1px solid #c7d1c6; padding-top: 24px; }
.demo-service h3 { font-size: 20px; margin-bottom: 12px; }
.demo-service p { font-size: 13px; color: #687668; margin-bottom: 0; }
.demo-workflow { padding: 70px 0; background: var(--theme-bg); }
.workflow-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: start; }
.workflow-grid h2 { font-size: 43px; }
.workflow-grid p { font-size: 14px; color: #5e7062; }
.form-panel { background: white; padding: 30px; border: 1px solid #ccd7ca; border-radius: 7px; color: #273b2e; }
.form-panel h3 { font-size: 22px; margin-bottom: 8px; }
label.field { display: block; font-size: 12px; font-weight: 550; margin-top: 20px; }
label.field select, label.field input, label.field textarea { display: block; width: 100%; background: white; border: 1px solid #b9c7b6; border-radius: 4px; color: #31412d; min-height: 46px; padding: 12px; margin-top: 8px; font-size: 14px; }
label.field textarea { min-height: 100px; resize: vertical; }
.check { display: flex; align-items: start; gap: 9px; font-size: 11px; line-height: 1.6; margin: 20px 0; color: #5d705c; }
.check input { accent-color: var(--theme); margin-top: 3px; }
.form-actions { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.reset-button { border: 0; background: transparent; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.result { margin-top: 22px; border: 1px solid #b2c895; background: #f1f8e7; padding: 20px; font-size: 13px; line-height: 1.65; color: #324329; }
.result:empty { display: none; }
.result.error { border-color: #d8aaa1; background: #fff2ee; color: #7d3327; }
.result strong { display: block; margin-bottom: 6px; }
.result p { margin: 6px 0 0; font-size: 12px; color: inherit; }
.result ol { margin: 15px 0 0; padding-left: 20px; }
.trace-note { display: block; margin-top: 14px; font-size: 11px; }
.demo-connection { padding: 65px 0; background: white; color: var(--ink); }
.demo-connection h2 { font-family: inherit; font-size: 36px; }
.demo-bottom { background: #1f2a20; color: #dfe7d5; padding: 30px 0; font-size: 12px; }
.demo-bottom .container { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.demo-bottom p { margin-bottom: 0; }
.menu-list { border-top: 1px solid #c9cfb9; margin-top: 24px; }
.menu-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px; padding: 21px 0; border-bottom: 1px solid #c9cfb9; }
.menu-item h3 { font-family: Georgia,serif; font-weight: 400; font-size: 23px; margin-bottom: 6px; }
.menu-item p { margin-bottom: 0; font-size: 12px; }
.menu-item .price { font-size: 13px; margin-top: 8px; display: block; }
.quantity { display: flex; gap: 12px; align-items: center; }
.quantity button { width: 35px; height: 35px; border: 1px solid #a8b794; border-radius: 50%; background: transparent; font-size: 18px; }
.quantity output { min-width: 16px; text-align: center; font-size: 13px; }
.basket-total { display: flex; justify-content: space-between; align-items: center; margin: 22px 0; border-top: 1px solid #d4ddcc; padding-top: 21px; font-size: 14px; }
.basket-total strong { font-size: 23px; }
.basket-lines { min-height: 50px; font-size: 13px; line-height: 1.9; margin-top: 18px; }
.basket-lines > div { display: flex; justify-content: space-between; gap: 18px; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding-bottom: 80px; }
.contact-grid .form-panel { padding: 38px; }
.contact-note { border-top: 1px solid var(--line); padding: 25px 0; font-size: 14px; color: var(--muted); }
.brief-output { width: 100%; min-height: 190px; resize: vertical; font-size: 13px; line-height: 1.6; padding: 15px; background: #fbfcf8; border: 1px solid var(--line); color: var(--ink); }
@media (min-width: 1450px) { .hero { padding-top: 100px; padding-bottom: 95px; } }
@media (max-width: 1050px) {
  .container { width: calc(100% - 56px); }
  .nav-links { gap: 19px; }
  .hero { gap: 34px; }
  h1 { font-size: 60px; }
  .hero .mini-screen { padding: 20px; }
  .mini-screen h3 { font-size: 31px; }
  .sample-cover { padding: 22px; height: 220px; }
  .sample-cover h3 { font-size: 31px; }
  .demo-hero { gap: 45px; }
  .workflow-grid, .outcomes { gap: 45px; }
  .integration-row { grid-template-columns: 150px 1fr 170px; gap: 24px; }
}
@media (max-width: 780px) {
  .container { width: calc(100% - 40px); }
  .review-line { font-size: 10px; }
  .nav { min-height: 73px; }
  .wordmark { font-size: 19px; }
  .menu-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 74px; left: 0; right: 0; padding: 24px 20px; background: var(--bg); box-shadow: 0 16px 20px -15px #3335; flex-direction: column; align-items: stretch; gap: 23px; border-bottom: 1px solid var(--line); }
  .nav-links.open { display: flex; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 47px; padding-bottom: 42px; }
  h1 { font-size: clamp(44px, 9vw, 65px); }
  .hero-copy { max-width: 580px; }
  .body-large { font-size: 16px; }
  .hero-media { max-width: 560px; width: 100%; }
  .hero .mini-screen { padding: 25px; }
  .mini-screen h3 { font-size: 35px; }
  .mini-hero { gap: 20px; }
  .hero-caption { text-align: left; }
  .promise-strip { flex-direction: column; gap: 13px; }
  .section { padding: 56px 0; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 20px; }
  .section-heading > .text-link { margin-top: 20px; }
  .demo-grid { grid-template-columns: 1fr; gap: 35px; }
  .sample-cover { height: 250px; padding: 27px; }
  .sample-cover h3 { font-size: 39px; }
  .two-entry { grid-template-columns: 1fr; }
  .entry { padding: 30px 0; }
  .entry + .entry { border-left: 0; border-top: 1px solid #47503e; padding-left: 0; }
  .outcomes { grid-template-columns: 1fr; gap: 22px; }
  .cta-band { padding: 30px; flex-direction: column; align-items: start; gap: 25px; }
  .cta-band h2 { font-size: 34px; }
  .footer-top { align-items: start; flex-direction: column; gap: 27px; }
  .page-title { padding-top: 45px; }
  .page-title h1 { font-size: 47px; }
  .integration-row { grid-template-columns: 1fr; gap: 12px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step { padding-right: 20px; }
  .eco-grid { grid-template-columns: 1fr; gap: 6px; }
  .eco-root { padding: 27px; }
  .demo-banner { flex-direction: column; align-items: start; padding: 12px 20px; gap: 7px; }
  .demo-nav { padding: 24px 0; }
  .demo-nav-links > a:not(.button) { display: none; }
  .demo-nav-links { gap: 8px; }
  .demo-brand { font-size: 20px; }
  .demo-hero { grid-template-columns: 1fr; padding: 45px 0; gap: 35px; }
  .demo-hero h1 { font-size: 51px; }
  .demo-hero .service-spec, .demo-hero .menu-board, .demo-hero .clinic-spec { max-width: 500px; width: 100%; }
  .demo-services { grid-template-columns: 1fr; gap: 23px; padding-bottom: 45px; }
  .demo-service { padding-top: 18px; }
  .workflow-grid { grid-template-columns: 1fr; gap: 30px; }
  .demo-workflow { padding: 45px 0; }
  .workflow-grid h2 { font-size: 36px; }
  .form-panel { padding: 24px; }
  .demo-connection { padding: 45px 0; }
  .demo-bottom .container { flex-direction: column; align-items: start; }
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-grid .form-panel { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* Route focus helps screen readers without drawing a control ring around headings. */
h1[tabindex='-1']:focus { outline: none; }

/* Studio v2 — editorial system. All visual studies are code-native and offline. */
:root{--ink:#181b18;--muted:#60665e;--paper:#fafbf7;--line:#dfe2d9;--accent:#dafa71;--max:1280px}html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #446b18;outline-offset:5px}[hidden]{display:none!important}.container{width:min(calc(100% - 112px),var(--max));margin-inline:auto}.section{padding:110px 0}h1,h2,h3,p{margin-top:0}h1,h2{font-weight:500;letter-spacing:-.064em;line-height:1.01}h1{font-size:clamp(56px,7.6vw,112px)}h2{font-size:clamp(42px,4.8vw,72px)}h3{font-size:25px;letter-spacing:-.035em;line-height:1.15}p{line-height:1.65}em{font-family:Georgia,'Times New Roman',serif;font-weight:400}.body-large{font-size:21px;line-height:1.55}.note{font-size:13px;line-height:1.65;color:#62675e}.section-label{font-size:11px;letter-spacing:.12em;font-weight:600;line-height:1.6;margin-bottom:26px}.site-header{height:94px;background:rgba(250,251,247,.98);border-bottom:1px solid var(--line);position:relative;z-index:20}.nav{height:100%;gap:24px}.wordmark{font-size:23px;letter-spacing:-1px;display:inline-flex;align-items:center;gap:13px;white-space:nowrap}.wordmark b{font-weight:400;color:#676d62;margin-left:4px}.brand-symbol{font-size:32px;line-height:1;letter-spacing:-3px;background:var(--accent);width:39px;height:39px;display:flex;align-items:center;justify-content:center;border-radius:50%}.nav-links{gap:33px;font-size:13px}.button{border-radius:3px;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:17px 22px;font-size:13px;line-height:1.3;font-weight:500;min-height:50px;gap:22px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background .2s,transform .2s}.button:hover{background:#343c2c;transform:translateY(-1px)}.button.small{padding:13px 18px;min-height:42px}.button.light{background:var(--accent);color:var(--ink);border-color:var(--accent)}.text-link{font-size:14px;line-height:1.5;font-weight:500;gap:16px}.arrow{width:20px;height:20px;flex-shrink:0}.menu-toggle{border:1px solid var(--line);padding:10px 13px;font-size:13px;background:transparent;border-radius:3px;min-height:44px}.studio-hero{padding-top:76px;padding-bottom:60px}.hero-main h1{font-size:clamp(64px,7.8vw,117px);line-height:.99;letter-spacing:-.075em;margin:0 0 36px}.hero-main h1 span{color:#717966}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:36px}.hero-bottom>p{font-size:17px;max-width:530px;color:#53594d}.hero-bottom .actions{margin:0;flex-wrap:nowrap}.hero-showcase{display:grid;grid-template-columns:42px 1fr 174px;margin-top:50px;min-height:430px;align-items:stretch;position:relative}.showcase-side{background:#e1e5d9;display:flex;align-items:center;justify-content:center}.vertical-note{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.17em;font-size:10px}.showcase-main{background:#f7eccf;color:#783124;overflow:hidden;position:relative}.showcase-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #78312433;padding:24px 32px}.showcase-top strong{font-family:Georgia,serif;font-weight:400;font-size:28px;letter-spacing:-1px}.showcase-top>span{font-size:8px;letter-spacing:.13em}.showcase-content{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding:28px 32px 18px;gap:20px}.showcase-content h2{font-size:clamp(38px,4.4vw,66px);line-height:1.02;letter-spacing:-.055em;margin-bottom:18px}.showcase-content p{font-size:12px;line-height:1.7}.showcase-link{font-size:12px;display:inline-flex;align-items:center;gap:20px;text-decoration:underline;text-underline-offset:6px}.showcase-content .citrus-art{min-height:245px;height:245px;background:transparent;aspect-ratio:auto;overflow:visible}.showcase-content .citrus-art .art-caption,.showcase-content .citrus-word{display:none}.showcase-content .citrus-whole{width:155px;height:155px;top:9%;left:27%}.showcase-content .citrus-slice{width:151px;height:151px;top:40%;left:2%}.showcase-content .citrus-seal{width:77px;height:77px;font-size:8px;right:0;bottom:5%}.showcase-content .citrus-leaf{width:105px;height:48px}.showcase-bottom{display:flex;justify-content:space-between;border-top:1px solid #78312422;padding:14px 32px;font-size:8px;letter-spacing:.09em;gap:12px}.showcase-bottom>span:last-child{display:flex;align-items:center;gap:14px}.showcase-bottom .arrow{width:12px;height:12px}.showcase-note{background:var(--accent);padding:28px 22px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;font-size:19px;letter-spacing:-.04em}.showcase-note strong{font-size:24px;letter-spacing:-.04em;font-weight:500}.note-line{height:45px;width:1px;background:#56603d;margin:14px 0 14px 9px;position:relative}.note-line:after{content:'';width:6px;height:6px;border-right:1px solid;border-bottom:1px solid;transform:rotate(45deg);position:absolute;bottom:0;left:-2.5px}.showcase-note small{font-size:11px;line-height:1.5;letter-spacing:0;margin:28px 0 14px}.showcase-note .text-link{font-size:12px}.intro-band{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr 1.3fr;gap:48px;align-items:start}.intro-band .section-label{margin:0}.intro-band>p{font-size:26px;letter-spacing:-.035em;line-height:1.35;margin:0}.intro-band .intro-small{font-size:14px;letter-spacing:0;line-height:1.7;color:var(--muted)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}.section-heading h2{margin-bottom:0}.section-heading>p{max-width:410px;font-size:14px;color:var(--muted);margin-bottom:6px}.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.project-tile{display:block;text-decoration:none;min-width:0}.project-cover{height:355px;position:relative;overflow:hidden;transition:transform .28s;isolation:isolate}.project-cover:hover{transform:translateY(-5px)}.project-top{display:flex;align-items:center;justify-content:space-between;padding:20px;position:relative;z-index:2}.project-top strong{font-size:12px;letter-spacing:.05em}.project-top>span{font-size:7px;letter-spacing:.1em}.project-cover h3{font-size:33px;line-height:1.05;letter-spacing:-.06em;position:absolute;top:65px;left:22px;z-index:2;max-width:85%;font-weight:400}.project-cover-inner{position:static}.project-open{position:absolute;bottom:0;left:0;right:0;padding:13px 20px;display:flex;justify-content:space-between;align-items:center;font-size:10px;border-top:1px solid currentColor;background:inherit;z-index:3}.project-open .arrow{width:15px;height:15px}.project-services .project-cover{background:#1f3437;color:#fff}.project-services .project-cover h3{max-width:70%}.project-restaurant .project-cover{background:#faedcf;color:#783124}.project-restaurant .project-top strong{font-family:Georgia,serif;letter-spacing:-.05em;font-size:18px}.project-clinic .project-cover{background:#dce5f0;color:#20314a}.project-clinic .project-top strong{font-size:20px;letter-spacing:-.05em}.project-meta{display:flex;justify-content:space-between;align-items:flex-start;padding-top:22px;gap:10px}.project-meta h3{font-size:19px;margin-bottom:7px}.project-meta p{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:0}.project-meta>.arrow{margin-top:2px}.tile-art{position:absolute!important;inset:auto 0 38px auto;width:72%!important;height:200px!important;min-height:0!important;aspect-ratio:auto!important}.tile-art .art-caption,.tile-art .art-index,.tile-art .art-cross,.tile-art .citrus-word,.tile-art .care-word{display:none}.tile-art.architecture-art{background:transparent!important;right:-10px;bottom:40px;opacity:.6}.tile-art .arch-orbit{width:100px;height:100px;right:15px;top:10px}.tile-art .arch-building{height:160px;width:170px;right:0;bottom:-25px}.tile-art .arch-building i{width:28px}.tile-art .citrus-whole{width:135px;height:135px;left:35%;top:5%}.tile-art .citrus-slice{width:126px;height:126px;left:6%;top:33%;border-width:6px}.tile-art .citrus-slice i{inset:6px}.tile-art .citrus-leaf{width:92px;height:36px}.tile-art .leaf-one{top:3%;left:23%}.tile-art .leaf-two{top:13%;left:51%}.tile-art .citrus-seal{display:none}.tile-art.clinic-art{background:transparent!important;width:190px!important;right:12px;bottom:44px;height:175px!important}.tile-art .care-petal{width:70px;height:95px}.tile-art .care-center{font-size:29px;width:50px;height:50px}.tile-art .p1{left:50%;top:10%}.tile-art .p2{left:68%;top:37%}.tile-art .p3{left:50%;top:65%}.tile-art .p4{left:32%;top:37%}.portfolio{padding-bottom:125px}.connection-band{background:#232c23;color:#f5f8ea;padding:100px 0 110px}.connection-band h2{font-size:clamp(50px,5.9vw,88px);margin-bottom:48px;max-width:800px}.connection-band h2 em{color:#dafa71}.connection-band .section-label{color:#c0c8b9}.connection-split{display:grid;grid-template-columns:1fr 1fr;gap:110px}.connection-split p:not(.body-large){color:#b9c0b0;font-size:14px;max-width:450px}.connection-split .text-link{color:#dafa71;margin-top:15px}.flow-list{display:flex;flex-direction:column;gap:0;border-left:1px solid #768466;padding-left:30px}.flow-list>div{padding:15px 0 30px;position:relative}.flow-list>div:before{position:absolute;content:'';left:-35px;top:21px;width:9px;height:9px;background:#dafa71;border-radius:50%}.flow-list span{display:block;color:#b9c0b0;font-size:11px;margin-bottom:10px}.flow-list b{font-weight:400;font-size:20px;letter-spacing:-.025em}.care-section{display:grid;grid-template-columns:1fr 1.1fr;gap:100px}.care-section h2{font-size:68px}.care-rows article{display:flex;gap:24px;padding:26px 0;border-top:1px solid var(--line)}.care-rows article>span{font-size:11px;margin-top:5px;color:#777e6c}.care-rows h3{font-size:22px;margin-bottom:10px}.care-rows p{font-size:14px;color:var(--muted);margin-bottom:0}.starting-points{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding:45px 0 80px;border-top:1px solid var(--line)}.starting-points h3{font-size:23px}.starting-points p:last-child{font-size:14px;color:var(--muted)}.cta-new{background:#dde6ce;padding:75px 0}.cta-row{display:flex;justify-content:space-between;align-items:center;gap:40px}.cta-row h2{font-size:clamp(48px,5.6vw,80px);margin-bottom:25px}.cta-new .button.light{background:#20291e;color:#fff;border-color:#20291e;min-width:180px}.cta-new>div>p:last-child{font-size:14px;color:#536044;margin:0}.site-footer{background:#fafbf7;padding:60px 0 22px;color:var(--ink)}.site-footer .footer-top{gap:60px}.footer-brand>p{font-size:24px;letter-spacing:-.035em;line-height:1.3;margin-top:22px}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:13px 60px;font-size:13px}.footer-bottom{font-size:11px;color:#73796d;gap:20px}.page-title{padding:85px 0 55px}.page-title h1{font-size:clamp(52px,7vw,100px)}.gallery-section{padding-top:0}.gallery-section .note{margin-top:32px}.privacy-page{padding:80px 0;max-width:880px}.privacy-page h1{font-size:70px}.privacy-page h2{font-size:30px;letter-spacing:-.04em;margin-top:42px}.privacy-page p{font-size:16px}.form-panel{background:#fff;border:1px solid var(--line);border-radius:4px;padding:32px;box-shadow:none}.form-panel h3{font-size:25px;font-weight:500}.field{font-size:12px;font-weight:500;margin-top:18px;line-height:1.5}.field input,.field select,.field textarea{border:1px solid #c4c9c0;border-radius:3px;background:#fff;color:#212621;font-size:14px;min-height:47px;padding:12px;line-height:1.4}.field textarea{min-height:105px}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #849077;outline-offset:2px}.form-actions{gap:16px;flex-wrap:wrap}.result{font-size:13px;line-height:1.65}.reset-button{font-size:12px;min-height:44px}.outage-option{font-size:12px}.contact-grid{padding-bottom:90px;gap:80px}.contact-note h3{font-size:24px}.contact-note p{font-size:15px;color:var(--muted)}.chip{font-size:10px;border-radius:2px;letter-spacing:0;white-space:normal}.boundary{border-radius:2px;background:#eef1e9;font-size:14px;padding:24px}.eco-root{border-radius:0;background:#222d22;color:#f5f8ef}.eco-root h2{font-size:54px}.eco-grid{gap:35px}.eco-column{border-radius:0;background:transparent;border:none;border-top:1px solid #abb59e;padding:28px 0}.eco-product{border-radius:0}.eco-column>h3{font-size:24px}.eco-product p{font-size:13px}.cta-band{border-radius:0;margin-bottom:70px;background:#e2e9d8}.dark-section{background:#232c23;color:#fff}.entry{border-radius:0}.integration-table{font-size:14px}.demo-banner{padding:10px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:#151a17;color:#fff;font-size:10px;letter-spacing:.02em;line-height:1.5}.demo-banner a{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}.demo-banner .arrow{width:14px;height:14px}.demo-header{border-bottom:1px solid #0002;position:relative;z-index:5}.demo-nav{padding-top:22px;padding-bottom:22px;min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:25px}.demo-nav nav{display:flex;gap:38px;align-items:center;font-size:12px}.demo-nav nav a:last-child{border:1px solid currentColor;padding:11px 16px;border-radius:2px}.demo-menu-toggle{display:none;background:transparent;border:1px solid currentColor;padding:10px 14px;min-height:42px;font-size:12px;color:inherit}.demo-brand{display:inline-flex;gap:11px;align-items:center;white-space:nowrap}.request-layout{display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:start}.request-layout>div>p:not(.section-label){max-width:390px;color:inherit;opacity:.8;font-size:15px}.request-layout h2{font-size:64px;margin-bottom:26px}.demo-site .button{background:var(--d-ink);color:var(--d-paper);border-color:var(--d-ink)}.demo-connection{background:#f1f4ec;color:#263121;padding:65px 0}.demo-connection h2{font-size:43px;letter-spacing:-.045em}.demo-connection .section-heading{align-items:start;margin-bottom:25px}.demo-connection .body-large{font-size:17px;max-width:850px}.connection-bottom{border-top:1px solid #c9d1be;padding-top:22px;margin-top:30px;display:flex;justify-content:space-between;align-items:center;gap:20px}.connection-bottom strong{font-size:15px;font-weight:500}.demo-bottom{background:#f9faf5;color:#273123;padding:35px 0}.demo-bottom>.container{display:flex;align-items:center;justify-content:space-between;gap:25px}.demo-bottom strong{font-weight:500;font-size:19px;letter-spacing:-.02em}.demo-bottom p{font-size:12px;margin:8px 0 0}.demo-site .demo-bottom .button{background:#20291e;color:#fff}.northline{--d-ink:#203b3d;--d-paper:#f4f6f2;background:#f4f6f2;color:#203b3d}.northline .demo-brand{font-size:17px;letter-spacing:.055em;font-weight:600}.north-mark{font-size:26px;font-weight:700;color:#e67d46;line-height:1}.north-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;padding:74px 0 90px;align-items:stretch}.north-hero h1{font-size:clamp(65px,7vw,104px);margin-bottom:28px}.north-hero h1 em{font-style:normal;color:#758d87;font-family:inherit}.north-hero p:not(.section-label){font-size:16px;margin-bottom:27px}.architecture-art{min-height:480px;position:relative;overflow:hidden;background:#d9e1d9;isolation:isolate}.architecture-art:after{content:'';position:absolute;inset:0;background-image:linear-gradient(#4b605512 1px,transparent 1px),linear-gradient(90deg,#4b605512 1px,transparent 1px);background-size:48px 48px;z-index:-1}.arch-orbit{position:absolute;width:195px;height:195px;border-radius:50%;background:#e8824c;top:39px;right:25px;box-shadow:inset -25px -18px 45px #bc5c2c44}.arch-building{position:absolute;display:flex;height:360px;width:330px;bottom:-12px;right:4px;transform:skewY(-18deg) rotate(-1deg);background:#304a4b;box-shadow:-18px 18px 40px #0b17152e}.arch-building i{position:relative;width:42px;height:100%;background:linear-gradient(90deg,#395553 0%,#849c8e 32%,#c2cbb9 35%,#546d65 40%,#233b3a 100%);border-left:1px solid #d3dbc344}.arch-building:before{content:'';position:absolute;right:100%;width:55px;height:100%;transform-origin:right;transform:skewY(35deg);background:linear-gradient(90deg,#122927,#4a665e);z-index:1}.art-cross{position:absolute;top:26px;left:26px;font-size:28px;font-weight:200}.art-caption{position:absolute;bottom:18px;left:22px;font-size:8px;letter-spacing:.12em;z-index:3}.architecture-art .art-caption{color:#eff4e8;writing-mode:vertical-rl;transform:rotate(180deg);left:16px;bottom:28px}.art-index{position:absolute;top:28px;right:22px;font-size:10px;letter-spacing:.1em}.north-strip{background:#233b3c;color:#dfe9dc;padding:25px 0}.north-strip>.container{display:flex;justify-content:space-between;gap:25px;font-size:10px;letter-spacing:.09em}.service-catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.service-catalog article{border-top:1px solid #a5b4a9;padding:24px 0 0}.service-number{font-size:13px;color:#778c81;margin-bottom:45px}.service-catalog h3{font-size:30px}.service-catalog p{font-size:14px;max-width:260px}.service-catalog .text-link{font-size:12px;margin-top:24px}.north-approach{padding:90px 0;background:#dee5da}.north-approach>.container{display:grid;grid-template-columns:1fr 1fr;gap:100px}.north-approach h2{font-size:80px}.north-approach ol{padding-left:20px;margin:0}.north-approach li{padding-left:10px;margin-bottom:22px}.north-approach li strong{font-size:18px;font-weight:500}.north-approach li p{font-size:13px;margin-top:8px}.sunday{--d-ink:#773324;--d-paper:#fff2d9;background:#fff2d9;color:#773324}.sunday .demo-brand{font-family:Georgia,serif;font-size:31px;font-weight:400;letter-spacing:-1.2px}.sunday .demo-brand i{font-weight:400}.sunday-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:58px 0 85px;align-items:center}.sunday h1,.sunday h2{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.06em;font-weight:400}.sunday h1{font-size:clamp(68px,8vw,119px);line-height:.93;margin-bottom:27px}.sunday .section-label{letter-spacing:.1em;font-size:10px}.sunday .sunday-copy>p:not(.section-label){font-size:15px;line-height:1.65;margin-bottom:25px}.citrus-art{background:#f5d483;min-height:490px;position:relative;overflow:hidden;isolation:isolate}.citrus-word{position:absolute;top:22px;left:20px;font-family:Arial,sans-serif;font-weight:800;font-size:clamp(55px,7vw,95px);line-height:1;color:#dd6d23;letter-spacing:-.085em;opacity:.22}.citrus-whole{position:absolute;width:255px;height:255px;border-radius:50%;background:radial-gradient(ellipse at 31% 24%,#ffdf63 0,#fbb331 34%,#e67b1b 71%,#bb4e18 100%);left:39%;top:26%;box-shadow:inset -16px -8px 35px #98431333,18px 27px 28px #aa661933;transform:rotate(-18deg)}.citrus-whole:after{content:'';position:absolute;left:40%;top:6%;width:14px;height:11px;border-radius:50%;background:#939833;transform:rotate(35deg)}.citrus-slice{position:absolute;width:238px;height:238px;border-radius:50%;left:10%;top:46%;background:#f8e8a9;border:11px solid #efaa29;box-shadow:8px 17px 24px #aa661933;transform:rotate(-16deg);overflow:hidden}.citrus-slice i{position:absolute;inset:12px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#f49b21 0deg,#ffcd50 27deg,#ffeaa5 29deg,#fff1b1 32deg,#f49b21 35deg);box-shadow:inset 0 0 10px #ffefba}.citrus-slice i:after{position:absolute;content:'';inset:43%;border-radius:50%;background:#fff0b9;box-shadow:0 0 10px #fff0b9}.citrus-leaf{position:absolute;width:150px;height:63px;background:linear-gradient(160deg,#6d822f,#415d2a);border-radius:100% 0 100% 0;z-index:2;box-shadow:7px 7px 15px #88732a22}.citrus-leaf:after{content:'';position:absolute;left:12%;right:12%;height:1px;top:50%;background:#c5c57788;transform:rotate(-16deg)}.leaf-one{left:36%;top:23%;transform:rotate(25deg)}.leaf-two{left:60%;top:22%;transform:rotate(-29deg)}.citrus-seal{position:absolute;width:105px;height:105px;border-radius:50%;background:#783124;color:#f5df9f;right:21px;bottom:29px;display:flex;justify-content:center;align-items:center;text-align:center;font-size:10px;line-height:1.6;letter-spacing:.07em;transform:rotate(13deg);border:1px dashed #f5df9f;outline:6px solid #783124}.sunday-marquee{background:#793728;color:#fff0d0;font-family:Georgia,serif;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;padding:23px 0;font-size:33px;text-align:center}.sunday-story{text-align:center;padding-bottom:65px}.sunday-story h2{font-size:62px;margin-bottom:27px}.sunday-story>p:last-child{font-size:14px;max-width:610px;margin-inline:auto;line-height:1.8}.sunday .section-heading>p{color:#926756}.sunday .menu-section{padding-top:30px}.menu-filters{display:flex;gap:14px;border-bottom:1px solid #ceaf8e;padding:0 0 20px;flex-wrap:wrap}.menu-filters button{padding:11px 18px;border:1px solid #c0a68a;background:transparent;border-radius:25px;color:#773324;font-size:12px;min-height:42px}.menu-filters button.active{background:#773324;border-color:#773324;color:#fff2d9}.menu-list{display:block}.sunday .menu-item{display:grid;grid-template-columns:48px 1fr 95px 47px;align-items:center;border:0;border-bottom:1px solid #dac1a3;border-radius:0;padding:27px 0;gap:22px;background:transparent;box-shadow:none}.dish-number{font-size:11px;color:#a58063}.sunday .menu-item h3{font-family:Georgia,serif;font-size:30px;font-weight:400;letter-spacing:-.04em;margin-bottom:7px}.sunday .menu-item p{font-size:13px;margin:0;color:#966f5a}.sunday .menu-item>strong{font-size:15px;font-weight:400}.sunday .add-button{border-radius:50%;background:#773324;color:#fff2d9;border:1px solid #773324;height:45px;width:45px;font-size:23px;line-height:1}.sunday .add-button:disabled{opacity:.5}.sunday-order{padding:85px 0;background:#ecdfbf}.sunday-order h2{font-size:66px}.sunday .form-panel{background:#fff8e9;border-color:#c9b697}.sunday .field select{border-color:#c9b697;color:#713b29;background:#fffaf0}.sunday .basket-empty,.sunday .note{color:#8f674c}.sample-stamp{border:1px solid #aa825e;border-radius:50%;width:135px;height:135px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:Georgia,serif;font-size:13px;letter-spacing:.08em;line-height:1.8;margin-top:35px;transform:rotate(-10deg)}.kindred{--d-ink:#283c55;--d-paper:#f4f5f0;background:#f4f5f0;color:#283c55}.kindred .demo-brand{font-size:31px;letter-spacing:-1.8px;font-weight:500}.kindred-mark{font-size:31px;color:#8a9bb1}.kindred .demo-nav nav a:last-child{border-radius:40px}.kindred .button{border-radius:40px}.kindred-hero{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:65px 0 80px;align-items:center}.kindred h1{font-size:clamp(70px,8vw,118px);line-height:.98;margin-bottom:29px}.kindred h1 em{color:#7185a0}.kindred-hero>div>p:not(.section-label){font-size:15px;line-height:1.7}.clinic-art{position:relative;min-height:510px;background:#dde6ef;border-radius:50% 50% 3px 3px;overflow:hidden;isolation:isolate}.care-petal{position:absolute;left:50%;top:50%;width:144px;height:197px;border-radius:52% 52% 48% 48%;transform:translate(-50%,-50%);background:linear-gradient(120deg,#c5d2e3 0%,#9bb0cb 28%,#6c849f 74%,#405c78 100%);box-shadow:12px 13px 25px #39537322}.care-petal:after{content:'';position:absolute;inset:8px;border-radius:inherit;border:1px solid #e5eff95e}.p1{left:50%;top:30%}.p2{left:72%;top:49%;transform:translate(-50%,-50%) rotate(90deg)}.p3{left:50%;top:67%;transform:translate(-50%,-50%) rotate(180deg)}.p4{left:28%;top:49%;transform:translate(-50%,-50%) rotate(-90deg)}.care-center{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:95px;height:95px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#d4dfeb;font-family:Georgia,serif;font-style:italic;font-size:51px;letter-spacing:-.08em;box-shadow:0 6px 22px #263c5429;color:#49617c}.care-word{position:absolute;bottom:22px;right:26px;font-family:Georgia,serif;font-style:italic;font-size:23px;line-height:1.05;color:#415974}.clinic-art .art-caption{bottom:27px;left:22px;color:#52657b}.kindred-intro{background:#e4e9e2;padding:65px 0}.kindred-intro>.container{display:grid;grid-template-columns:1fr 1.8fr 1.2fr;gap:30px;align-items:center}.kindred-intro h2{font-size:47px;margin:0}.kindred-intro .section-label{font-size:10px;margin:0}.kindred-intro p:last-child{font-size:13px;margin:0;line-height:1.8}.clinic-services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.clinic-services article{border:1px solid #bbc8cc;border-radius:5px;padding:30px 26px;min-height:250px;display:flex;align-items:flex-start;flex-direction:column}.clinic-services article>span{font-size:11px;color:#83929e;margin-bottom:40px}.clinic-services h3{font-size:27px;font-weight:400;letter-spacing:-.045em}.clinic-services p{font-size:14px;color:#6c7d8c;margin-bottom:30px}.clinic-services .text-link{font-size:12px;margin-top:auto}.expectation{display:grid;grid-template-columns:1fr 1.2fr;gap:90px;padding-top:20px}.expectation h2{font-size:65px}.faq-list details{padding:21px 0;border-bottom:1px solid #bfc8ce}.faq-list details:first-child{border-top:1px solid #bfc8ce}.faq-list summary{font-size:16px;cursor:pointer;line-height:1.5;list-style:none;position:relative;padding-right:30px}.faq-list summary:after{content:'+';position:absolute;right:0;top:-2px;font-size:24px;font-weight:400}.faq-list details[open] summary:after{content:'−'}.faq-list p{font-size:14px;line-height:1.8;margin-top:20px;margin-bottom:0;color:#6c7d8c}.kindred-request{background:#e1e8ef;padding:90px 0}.kindred-request h2{font-size:76px}.kindred .form-panel{border-radius:10px;background:#f9faf7;border-color:#c2cdd4}.kindred .field select{border-color:#c2cdd4}.kindred .demo-connection{background:#eef0ed}.kindred .demo-connection h2{color:#283c55}.kindred .note{color:#617386}.basket-line{font-size:14px}.quantity button{min-width:32px;min-height:34px}.basket-total{font-size:16px}.offline-banner{padding:10px;background:#dafa71;text-align:center;font-size:12px}.section-label+*{margin-top:0}
@media(min-width:1500px){.container{max-width:1340px}.hero-main h1{font-size:124px}}
@media(max-width:1100px){.container{width:calc(100% - 64px)}.hero-main h1{font-size:8.3vw}.hero-bottom{gap:24px}.hero-bottom>p{font-size:15px}.hero-bottom .actions{gap:15px}.hero-bottom .button{padding-inline:16px;gap:12px}.hero-showcase{grid-template-columns:30px 1fr 142px}.showcase-note{padding-inline:16px}.showcase-content h2{font-size:48px}.showcase-top{padding:22px}.showcase-content{padding:25px 22px}.intro-band{gap:25px;grid-template-columns:1fr 1.7fr 1.2fr}.intro-band>p{font-size:22px}.project-cover{height:325px}.project-cover h3{font-size:28px}.project-top{padding:17px}.project-top>span{font-size:6px}.project-meta p{font-size:11px}.connection-split{gap:70px}.north-hero,.kindred-hero,.sunday-hero{gap:42px}.architecture-art{min-height:450px}.arch-building{width:280px}.citrus-art{min-height:450px}.citrus-whole{width:215px;height:215px;left:37%}.citrus-slice{width:210px;height:210px;left:6%;top:48%}.citrus-leaf{width:125px;height:52px}.clinic-art{min-height:460px}.care-petal{width:115px;height:170px}.care-center{width:78px;height:78px}.request-layout{gap:55px}.request-layout h2{font-size:55px}.nav-links{gap:22px}.wordmark{font-size:20px}.care-section{gap:70px}.care-section h2{font-size:60px}.section{padding:90px 0}.care-word{font-size:20px}.north-approach h2{font-size:70px}.kindred-intro>.container{grid-template-columns:.8fr 1.6fr 1fr}.kindred-intro h2{font-size:39px}}
@media(max-width:800px){.container{width:calc(100% - 44px)}.site-header{height:77px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:77px;left:0;right:0;background:#fafbf7;padding:22px;border-bottom:1px solid var(--line);z-index:20;align-items:stretch;gap:18px}.nav-links.open{display:flex;flex-direction:column}.nav-links>a{min-height:36px;display:flex;align-items:center}.brand-symbol{width:34px;height:34px;font-size:28px}.studio-hero{padding-top:48px}.hero-main h1{font-size:clamp(52px,9vw,76px)}.hero-bottom{display:block}.hero-bottom>p{font-size:16px;margin-bottom:24px}.hero-bottom .actions{justify-content:flex-start}.hero-showcase{grid-template-columns:26px 1fr;min-height:390px;margin-top:37px}.showcase-note{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:18px;padding:17px;font-size:14px}.showcase-note strong{font-size:18px}.showcase-note small{margin:0;font-size:10px}.showcase-note .note-line{width:35px;height:1px;margin:0 3px}.note-line:after{right:0;left:auto;top:-2.5px;transform:rotate(-45deg)}.showcase-note .text-link{font-size:11px}.showcase-content .citrus-art{height:240px}.showcase-content h2{font-size:50px}.showcase-bottom{padding-inline:22px}.intro-band{grid-template-columns:.8fr 1.5fr;gap:24px;padding:40px 0}.intro-small{grid-column:2}.intro-band>p{font-size:23px}.portfolio{padding-top:65px}.section-heading{align-items:start;gap:26px;margin-bottom:30px}.section-heading h2{font-size:46px}.section-heading>p{font-size:12px;max-width:255px}.projects{grid-template-columns:1fr;gap:34px}.project-cover{height:360px}.project-cover h3{font-size:51px;max-width:68%;top:76px}.project-top strong{font-size:15px}.project-top>span{font-size:9px}.project-restaurant .project-top strong{font-size:23px}.tile-art{width:50%!important;height:290px!important}.tile-art.clinic-art{width:270px!important;height:270px!important}.tile-art .care-petal{width:92px;height:125px}.tile-art .care-center{width:69px;height:69px;font-size:39px}.tile-art .arch-building{height:240px;width:235px}.tile-art .arch-orbit{width:140px;height:140px;right:37px;top:30px}.tile-art .citrus-whole{width:180px;height:180px}.tile-art .citrus-slice{width:177px;height:177px}.tile-art .citrus-leaf{width:124px;height:43px}.project-meta p{font-size:13px}.connection-band{padding:70px 0}.connection-band h2{font-size:64px}.connection-split{gap:42px}.connection-split .body-large{font-size:18px}.flow-list{padding-left:24px}.flow-list>div:before{left:-29px}.flow-list b{font-size:17px}.care-section{gap:42px}.care-section h2{font-size:50px}.care-section .body-large{font-size:18px}.care-rows article{gap:18px}.care-rows h3{font-size:20px}.care-rows p{font-size:13px}.starting-points{gap:25px}.starting-points h3{font-size:21px}.starting-points p:last-child{font-size:13px}.cta-row h2{font-size:52px}.cta-row{gap:20px}.footer-links{gap:12px 30px}.footer-brand>p{font-size:21px}.demo-banner{padding:10px 20px;font-size:9px}.demo-nav{padding-top:18px;padding-bottom:18px;min-height:78px}.demo-nav nav{gap:22px;font-size:11px}.north-hero,.kindred-hero,.sunday-hero{padding-top:45px;padding-bottom:60px;gap:30px}.north-hero h1,.sunday h1,.kindred h1{font-size:66px}.north-hero .section-label,.sunday .section-label,.kindred .section-label{font-size:9px}.architecture-art,.citrus-art{min-height:395px}.arch-building{height:290px;width:225px;right:-10px}.arch-orbit{width:160px;height:160px;right:5px;top:50px}.citrus-whole{width:180px;height:180px;left:30%;top:28%}.citrus-slice{width:175px;height:175px;left:8%;top:50%}.citrus-seal{width:75px;height:75px;font-size:7px;right:16px;bottom:24px}.citrus-leaf{width:110px;height:42px}.citrus-word{font-size:62px;top:35px;left:10px}.clinic-art{min-height:395px}.care-petal{width:93px;height:137px}.care-center{width:68px;height:68px;font-size:38px}.care-word{font-size:17px;bottom:37px}.art-caption{font-size:6px;left:15px}.north-strip>.container{gap:20px;font-size:8px}.service-catalog{gap:24px}.service-catalog h3{font-size:25px}.service-catalog p{font-size:13px}.service-catalog .text-link{font-size:11px}.north-approach>.container{gap:55px}.north-approach h2{font-size:57px}.request-layout{gap:30px}.request-layout h2{font-size:49px}.request-layout>div>p:not(.section-label){font-size:14px}.form-panel{padding:23px}.form-panel h3{font-size:23px}.field select,.field textarea{font-size:13px}.form-actions .button{font-size:12px;padding:14px 17px;gap:15px}.sunday-story h2{font-size:51px}.sunday-order{padding:65px 0}.kindred-intro>.container{grid-template-columns:1.3fr 1fr;gap:23px}.kindred-intro .section-label{grid-column:1/-1}.kindred-intro h2{font-size:45px}.clinic-services{gap:16px}.clinic-services article{padding:24px 18px}.clinic-services h3{font-size:22px}.clinic-services p{font-size:13px}.clinic-services .text-link{font-size:11px;gap:8px}.expectation{gap:40px}.expectation h2{font-size:50px}.faq-list summary{font-size:14px}.kindred-request{padding:65px 0}.demo-connection h2{font-size:35px}.demo-connection .body-large{font-size:15px}.connection-bottom{align-items:start}.connection-bottom .text-link{font-size:12px}.contact-grid{gap:45px}.page-title h1{font-size:64px}.eco-grid{grid-template-columns:1fr}.eco-column>p{max-width:600px}.privacy-page h1{font-size:55px}}
@media(max-width:560px){.container{width:calc(100% - 36px)}.section{padding:65px 0}.studio-hero{padding-top:38px;padding-bottom:35px}.hero-main h1{font-size:clamp(46px,11.4vw,64px);margin-bottom:24px;letter-spacing:-.075em}.hero-bottom>p{font-size:14px;line-height:1.7}.hero-bottom .actions{flex-wrap:wrap;gap:20px}.button{padding:15px 18px;min-height:47px;font-size:12px}.hero-bottom .text-link{font-size:12px}.hero-showcase{grid-template-columns:1fr;margin-top:30px;min-height:0}.showcase-side{display:none}.showcase-top{padding:17px 18px}.showcase-top strong{font-size:22px}.showcase-top>span{font-size:6px}.showcase-content{padding:26px 18px 20px;grid-template-columns:1.05fr 1fr;gap:7px;min-height:245px}.showcase-content h2{font-size:35px;margin-bottom:16px}.showcase-content p{font-size:9px;line-height:1.6}.showcase-link{font-size:10px;gap:9px}.showcase-link .arrow{width:14px;height:14px}.showcase-content .citrus-art{height:200px;min-height:200px}.showcase-content .citrus-whole{width:113px;height:113px;left:24%;top:12%}.showcase-content .citrus-slice{width:112px;height:112px;top:43%;left:0;border-width:6px}.showcase-content .citrus-slice i{inset:5px}.showcase-content .citrus-leaf{width:68px;height:30px}.showcase-content .leaf-one{top:6%;left:8%}.showcase-content .leaf-two{top:13%;left:44%}.showcase-content .citrus-seal{width:54px;height:54px;bottom:3%;right:0;font-size:5px;outline-width:4px}.showcase-bottom{padding:12px 18px;font-size:6px}.showcase-note{padding:14px 12px;gap:12px;font-size:12px}.showcase-note strong{font-size:16px}.showcase-note small{display:none}.showcase-note .text-link{font-size:10px;margin-left:auto}.showcase-note .note-line{width:22px}.intro-band{grid-template-columns:1fr;gap:19px;padding:32px 0}.intro-band .section-label{font-size:9px}.intro-band .section-label br{display:none}.intro-band>p{font-size:25px;letter-spacing:-.035em}.intro-small{grid-column:auto}.intro-band .intro-small{font-size:13px;max-width:360px}.section-heading{display:block;margin-bottom:28px}.section-heading h2{font-size:41px}.section-heading>p{margin-top:18px;font-size:13px;max-width:370px}.projects{gap:33px}.project-cover{height:330px}.project-cover h3{font-size:37px;max-width:77%;top:70px}.project-top{padding:19px}.project-top strong{font-size:13px}.project-top>span{font-size:7px}.project-restaurant .project-top strong{font-size:21px}.project-clinic .project-top strong{font-size:22px}.project-meta{padding-top:17px}.project-meta h3{font-size:20px}.project-meta p{font-size:12px}.tile-art{width:67%!important;height:225px!important}.tile-art .arch-building{height:185px;width:190px}.tile-art .arch-orbit{height:105px;width:105px;top:22px;right:15px}.tile-art .citrus-whole{width:145px;height:145px}.tile-art .citrus-slice{width:142px;height:142px}.tile-art .citrus-leaf{width:103px;height:38px}.tile-art.clinic-art{width:190px!important;height:190px!important;right:9px;bottom:40px}.tile-art .care-petal{width:67px;height:92px}.tile-art .care-center{width:51px;height:51px;font-size:30px}.connection-band{padding:62px 0}.connection-band h2{font-size:48px;margin-bottom:32px}.connection-split{grid-template-columns:1fr;gap:34px}.connection-split .body-large{font-size:19px}.connection-split p:not(.body-large){font-size:13px}.flow-list>div{padding-bottom:25px}.flow-list b{font-size:18px}.care-section{grid-template-columns:1fr;gap:32px}.care-section h2{font-size:49px;margin-bottom:22px}.care-rows article{padding:24px 0}.care-rows h3{font-size:23px}.care-rows p{font-size:14px}.starting-points{grid-template-columns:1fr;gap:27px;padding:35px 0 60px}.starting-points .section-label{margin-bottom:12px;font-size:9px}.starting-points h3{font-size:26px;margin-bottom:11px}.starting-points p:last-child{font-size:14px;margin-bottom:0}.starting-points>div+div{border-top:1px solid var(--line);padding-top:25px}.cta-new{padding:52px 0}.cta-row{display:block}.cta-row h2{font-size:45px;line-height:1.07;margin-bottom:25px}.cta-new .button{margin-bottom:25px}.cta-new>div>p:last-child{font-size:13px}.site-footer{padding-top:43px}.site-footer .footer-top{display:block}.footer-brand>p{font-size:22px;margin-top:20px;margin-bottom:28px}.footer-links{grid-template-columns:1fr 1fr;gap:14px 20px;font-size:12px}.footer-bottom{display:flex;flex-direction:column;align-items:flex-start;margin-top:35px;padding-top:20px;gap:10px;font-size:10px}.page-title{padding:45px 0 35px}.page-title h1{font-size:48px}.page-title .body-large{font-size:17px}.gallery-section{padding-top:0}.gallery-section .note{font-size:12px}.demo-banner{font-size:8px;padding:9px 14px;gap:12px;letter-spacing:0}.demo-banner>span{max-width:210px}.demo-banner a{font-size:8px;gap:5px}.demo-header{position:relative}.demo-nav{padding-top:16px;padding-bottom:16px;min-height:73px;gap:12px}.demo-nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--d-paper);padding:20px;z-index:12;border-bottom:1px solid #0002;font-size:13px}.demo-nav nav.open{display:flex;flex-direction:column;align-items:stretch;gap:18px}.demo-nav nav a{padding:6px 0}.demo-nav nav a:last-child{text-align:center;padding:13px}.demo-menu-toggle{display:block}.northline .demo-brand{font-size:15px}.north-hero,.sunday-hero,.kindred-hero{grid-template-columns:1fr;gap:33px;padding-top:38px;padding-bottom:48px}.north-hero h1{font-size:74px;line-height:.97;margin-bottom:24px}.north-hero .section-label{font-size:9px;margin-bottom:22px}.north-hero p:not(.section-label){font-size:14px;margin-bottom:22px}.architecture-art{min-height:375px}.arch-orbit{width:175px;height:175px;top:25px;right:18px}.arch-building{height:300px;width:250px;right:10px;bottom:-20px}.art-caption{font-size:8px}.art-index{font-size:9px}.north-strip{padding:20px 0}.north-strip>.container{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:9px}.service-catalog{grid-template-columns:1fr;gap:33px}.service-catalog article{padding:21px 0 0}.service-number{margin-bottom:23px;font-size:12px}.service-catalog h3{font-size:32px;margin-bottom:13px}.service-catalog p{font-size:14px;max-width:100%;margin-bottom:18px}.service-catalog .text-link{font-size:13px;margin-top:0}.north-approach{padding:52px 0}.north-approach>.container{grid-template-columns:1fr;gap:24px}.north-approach h2{font-size:59px;margin-bottom:10px}.north-approach li strong{font-size:18px}.north-approach li p{font-size:13px}.request-layout{grid-template-columns:1fr;gap:30px}.request-layout h2{font-size:49px;line-height:1.03}.request-layout>div>p:not(.section-label){max-width:100%;font-size:14px}.form-panel{padding:24px 19px}.form-panel h3{font-size:24px}.field{font-size:12px}.field select,.field textarea{font-size:16px}.form-panel .note{font-size:12px}.form-actions .button{min-height:46px}.demo-connection{padding:50px 0}.demo-connection h2{font-size:34px}.demo-connection .chip{display:inline-block;margin-top:19px;font-size:10px}.demo-connection .body-large{font-size:15px;line-height:1.65}.connection-bottom{display:block;margin-top:24px;padding-top:20px}.connection-bottom>strong{display:block;margin-bottom:15px;font-size:14px}.connection-bottom .text-link{font-size:12px}.demo-bottom{padding:30px 0}.demo-bottom>.container{display:block}.demo-bottom strong{font-size:20px}.demo-bottom p{font-size:11px;margin-bottom:22px}.sunday .demo-brand{font-size:29px}.sunday h1{font-size:81px;line-height:.94;margin-bottom:26px}.sunday .sunday-copy>p:not(.section-label){font-size:14px}.sunday-hero>.citrus-art{min-height:410px}.citrus-word{font-size:80px;left:15px;top:23px}.citrus-whole{width:209px;height:209px;left:35%;top:25%}.citrus-slice{width:204px;height:204px;left:8%;top:47%}.citrus-leaf{width:127px;height:50px}.leaf-one{top:20%;left:26%}.leaf-two{top:22%;left:56%}.citrus-seal{width:88px;height:88px;font-size:8px;right:22px;bottom:30px}.citrus-art .art-caption{font-size:7px;bottom:17px}.sunday-marquee{font-size:25px;padding:20px 0}.sunday-story{padding-top:55px;padding-bottom:40px}.sunday-story h2{font-size:43px}.sunday-story>p:last-child{font-size:13px;line-height:1.7}.sunday .menu-section{padding-top:25px}.menu-filters{gap:10px}.menu-filters button{font-size:11px;padding:10px 14px;min-height:40px}.sunday .menu-item{grid-template-columns:1fr 65px 40px;gap:12px;padding:23px 0}.dish-number{display:none}.sunday .menu-item h3{font-size:25px}.sunday .menu-item p{font-size:11px;line-height:1.6;max-width:215px}.sunday .menu-item>strong{font-size:12px}.sunday .add-button{width:40px;height:40px;font-size:22px}.sunday-order{padding:52px 0}.sample-stamp{display:none}.sunday .basket-line{font-size:13px}.kindred .demo-brand{font-size:30px}.kindred h1{font-size:82px}.kindred-hero>.clinic-art{min-height:435px;border-radius:50% 50% 3px 3px}.care-petal{width:111px;height:151px}.care-center{width:76px;height:76px;font-size:45px}.care-word{bottom:34px;right:24px;font-size:21px}.kindred-intro{padding:44px 0}.kindred-intro>.container{grid-template-columns:1fr;gap:19px}.kindred-intro h2{font-size:49px}.kindred-intro p:last-child{font-size:14px}.clinic-services{grid-template-columns:1fr;gap:17px}.clinic-services article{min-height:0;padding:27px}.clinic-services article>span{margin-bottom:27px}.clinic-services h3{font-size:29px}.clinic-services p{font-size:14px;margin-bottom:24px}.clinic-services .text-link{font-size:13px}.expectation{grid-template-columns:1fr;gap:21px;padding-top:0}.expectation h2{font-size:52px}.faq-list summary{font-size:15px;line-height:1.5}.faq-list p{font-size:13px}.kindred-request{padding:50px 0}.kindred-request h2{font-size:59px}.contact-grid{grid-template-columns:1fr;gap:25px;padding-bottom:60px}.contact-note h3{font-size:24px}.contact-note p{font-size:14px}.eco-root h2{font-size:43px}.eco-root{padding:25px}.eco-column h3{font-size:28px}.eco-product strong{font-size:18px}.eco-grid{gap:20px}.privacy-page{padding-top:48px}.privacy-page h1{font-size:45px}.privacy-page h2{font-size:28px}.privacy-page p{font-size:15px}.two-entry{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.cta-band{display:block;padding:28px}.cta-band h2{font-size:40px}.integration-table{display:block;overflow-x:auto}.integration-table th,.integration-table td{min-width:130px}.dark-section h2{font-size:43px}.entry h3{font-size:25px}.small-flow{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Functional review fixes: usable quantity controls and clear CTA separation. */
.hero-bottom .actions{display:flex;column-gap:24px;row-gap:15px}.sunday .menu-item{grid-template-columns:48px 1fr 80px 110px}.sunday .quantity{display:flex;gap:8px;align-items:center;justify-content:flex-end}.sunday .quantity button{min-width:32px;width:32px;height:34px;min-height:34px;border:1px solid #b2906c;border-radius:50%;font-size:18px;background:transparent;color:#773324}.sunday .quantity .add-button{background:#773324;color:#fff2d9;border-color:#773324}.sunday .quantity button:disabled{opacity:.35;cursor:default}.sunday .quantity span{min-width:17px;text-align:center;font-size:13px}
@media(max-width:560px){.sunday .menu-item{grid-template-columns:1fr 52px 102px;gap:10px}.sunday .menu-item h3{font-size:23px}.sunday .quantity{gap:5px}.sunday .menu-item p{font-size:11px}.hero-bottom .actions{column-gap:20px}}

.kindred-hero .actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 18px;
}

/* Studio v3 layer — same palette, type and voice as v2; sharper hierarchy, one signature motion moment.
   Loaded last. Demo brands (Northline, Sunday Table, Kindred) keep their own styling apart from mobile legibility fixes. */
:root{--forest:#1f281f;--forest-2:#2a352a;--sage:#dde6ce;--lime:#dafa71;--ease:cubic-bezier(.2,.7,.1,1);--header:72px}
html{scroll-padding-top:88px}
body{text-rendering:optimizeLegibility}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:3px solid #3f6a14;outline-offset:4px}
.sync :focus-visible,.cta-new :focus-visible{outline-color:var(--lime)}
.skip-link{top:-80px;transform:none;border-radius:6px;box-shadow:0 8px 24px #0002}
.skip-link:focus{top:10px}

/* Quiet, sentence-case kicker instead of tracked capitals. */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:14px;line-height:1.4;letter-spacing:-.01em;color:var(--muted);margin:0 0 22px;font-weight:500}
.kicker-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #dafa7140}

/* Header: sticky, slimmer, steps out of the way while reading down and returns on the way up. */
.site-header{position:sticky;top:0;height:var(--header);background:rgba(250,251,247,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:transform .45s var(--ease),border-color .3s;z-index:50}
.site-header.is-hidden{transform:translateY(-100%)}
.wordmark{font-size:21px;gap:11px}
.brand-symbol{width:34px;height:34px;font-size:27px}
.nav-links{gap:30px;font-size:14px}
.nav-links a:not(.button){position:relative;padding:6px 0}
.nav-links a:not(.button):hover{text-decoration:none}
.nav-links a:not(.button):after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:not(.button):hover:after,.nav-links a[aria-current=page]:not(.button):after{transform:scaleX(1)}
.nav-links .button.small{min-height:40px;padding:10px 18px;border-radius:999px;font-size:13px}
.button{border-radius:999px;padding-inline:24px;transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px #181b1880}
.button .arrow{transition:transform .3s var(--ease)}
.button:hover .arrow{transform:translateX(3px)}
.text-link{border-bottom:0;padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .35s var(--ease)}
.text-link:hover{background-size:0 1px;background-position:100% 100%}

/* Hero */
.v3-hero{padding:clamp(56px,9vh,104px) 0 clamp(56px,8vh,96px)}
.hero-title{font-size:clamp(58px,9.4vw,148px);line-height:.94;letter-spacing:-.072em;font-weight:500;margin:0 0 clamp(32px,4.5vw,56px)}
.hero-title .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-title .ln>span{display:inline-block}
.hero-title .soft{color:#6f7864}
.hero-foot{display:grid;grid-template-columns:minmax(0,560px) auto;justify-content:space-between;align-items:end;gap:32px 48px}
.hero-lede{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:#4c5247;margin:0}
.v3-hero .actions{display:flex;align-items:center;gap:28px;margin:0;flex-wrap:wrap}
.v3-hero .kicker,.hero-title .ln>span,.hero-foot{animation:rise 1s var(--ease) both}
.hero-title .ln>span{animation-name:lineup}
.hero-title .ln:nth-child(2)>span{animation-delay:.09s}
.hero-foot{animation-delay:.22s}
@keyframes lineup{from{transform:translateY(105%)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* A quiet teaser of the moment below, wide screens only. */
.v3-hero>.container{position:relative}
.hero-pulse{display:none}
@media(min-width:1101px){
 .hero-pulse{display:flex;position:absolute;right:0;top:calc(36px + 2.2vw);align-items:center;gap:12px;padding:12px 18px 12px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;color:#4c5247;box-shadow:0 18px 40px -28px #181b1866;animation:rise 1s .5s var(--ease) both}
 .hero-pulse b{font-weight:600;color:var(--ink)}
 .hp-dot{width:8px;height:8px;border-radius:50%;background:#7fa61d;box-shadow:0 0 0 0 #7fa61d66;animation:ping 2.4s 1.4s infinite}
}
@keyframes ping{0%{box-shadow:0 0 0 0 #7fa61d66}70%,100%{box-shadow:0 0 0 10px #7fa61d00}}

/* Signature: the website reading from the system behind it. */
.sync{background:var(--forest);color:#f3f6ea;position:relative}
.sync-intro{padding:clamp(80px,11vw,140px) 0 clamp(24px,4vw,48px);display:grid;grid-template-columns:1.1fr .9fr;gap:24px 80px;align-items:end}
.sync-intro .kicker{grid-column:1/-1;color:#b9c3ad;margin:0}
.sync-intro h2{font-size:clamp(46px,6.4vw,96px);margin:0;letter-spacing:-.065em;line-height:.98}
.sync-intro h2 em{color:var(--lime)}
.sync-intro .body-large{font-size:18px;line-height:1.6;color:#c9d1bd;margin:0;max-width:470px}
.sync-sticky{padding:40px 0}
.sync-grid{display:grid;grid-template-columns:minmax(260px,.62fr) 1.5fr;gap:clamp(32px,5vw,80px);align-items:center}
.sync-steps{list-style:none;margin:0;padding:0 0 0 22px;position:relative;display:grid;gap:26px}
.sync-steps:before,.sync-steps:after{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:#4a5843}
.sync-steps:after{background:var(--lime);transform-origin:top;transform:scaleY(var(--p,1))}
.sync-steps li{transition:opacity .5s var(--ease)}
.sync-n{display:block;font-size:12px;color:var(--lime);font-variant-numeric:tabular-nums;margin-bottom:6px}
.sync-steps strong{display:block;font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.03em;line-height:1.2}
.sync-d{display:block;font-size:14px;line-height:1.55;color:#aeb8a3;margin-top:6px}
.sync-foot{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;padding:28px 0 clamp(72px,9vw,120px);border-top:1px solid #3a4636;margin-top:24px}
.sync-foot p{font-size:13px;color:#a5af9b;margin:0;max-width:560px}
.sync-foot .text-link{color:var(--lime);white-space:nowrap}

.sync-stage{display:grid;grid-template-columns:1fr 44px 1.22fr;align-items:center;font-size:13px;letter-spacing:0}
.sync-stage i{font-style:normal}
.swap{display:inline-grid;overflow:hidden;vertical-align:bottom}
.swap>i{grid-area:1/1;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.swap .b{transform:translateY(110%);opacity:0}
.at-2 .swap .a{transform:translateY(-110%);opacity:0}
.at-2 .swap .b{transform:none;opacity:1}

/* System panel */
.sy{background:#151c15;border:1px solid #3c4a37;border-radius:14px;padding:6px 6px 8px;box-shadow:0 30px 60px -30px #000a;transition:box-shadow .6s,border-color .6s;color:#e8eedc;font-variant-numeric:tabular-nums}
.sync-track:not(.at-1) .sy{border-color:var(--lime);box-shadow:0 0 0 4px #dafa7122,0 30px 60px -30px #000a}
.sy-bar{display:flex;align-items:center;gap:8px;padding:9px 10px 12px;border-bottom:1px solid #2f3a2c;margin-bottom:4px}
.sy-mark{width:22px;height:22px;border-radius:6px;background:var(--lime);color:var(--forest);display:grid;place-items:center;font-weight:700;font-size:12px}
.sy-bar b{font-weight:600;font-size:13px}
.sy-sub{color:#8f9a86;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sy-sync{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#b9c3ad}
.sy-sync i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.at-1 .sy-sync i{animation:blink 1.6s infinite}
.sy-head,.sy-row{display:grid;grid-template-columns:1.4fr .8fr .95fr;gap:8px;align-items:center;padding:8px 10px;border-radius:8px}
.sy-head{color:#7f8a76;font-size:11px;padding-block:6px}
.sy-row{transition:background .6s}
.sy-row>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num{text-align:right}
.tag{justify-self:end;font-size:11px;padding:3px 8px;border-radius:999px;background:#2a3427;color:#c8d1bb;white-space:nowrap}
.tag.swap{padding:0;background:none}
.tag .a,.tag .b,.tag.ok,.tag.new{padding:3px 8px;border-radius:999px}
.tag .ok,.tag.ok{background:#2c3b26;color:#cfe8a1}
.tag .out{background:#4a2a22;color:#ffc7b3}
.tag.new{background:var(--lime);color:var(--forest);font-weight:600}
.sy-order{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.at-3 .sy-order{opacity:1;transform:none}
.sy-new{margin-top:4px;background:#26321f}
.at-2 .chg{animation:flash 1.6s var(--ease)}
.at-3 .sy-new{animation:flash 1.6s var(--ease)}

/* The wire between them */
.sy-wire{height:2px;position:relative;margin:0 4px;background:repeating-linear-gradient(90deg,#5b6b52 0 6px,transparent 6px 11px)}
.sy-wire span{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px #dafa7126;opacity:0}
.at-1 .sy-wire span{opacity:1;animation:travel 1.8s var(--ease) infinite}
.at-3 .sy-wire span{animation-direction:reverse}

/* Website panel */
.ws{position:relative;border-radius:14px;overflow:hidden;background:#fff2d9;color:#773324;box-shadow:0 40px 80px -36px #000c;min-height:330px}
.ws-chrome{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#f3e3c3;border-bottom:1px solid #7733241a}
.ws-chrome>i{width:9px;height:9px;border-radius:50%;background:#7733242e}
.ws-chrome span{margin:0 auto;font-size:11px;color:#77332499;background:#fff7e8;padding:3px 18px;border-radius:999px;transform:translateX(-14px)}
.ws-page{padding:16px 18px 18px;transition:opacity .6s var(--ease)}
.ws-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.ws-brand{font-family:Georgia,serif;font-size:19px;letter-spacing:-.04em}
.ws-open{display:inline-flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap}
.ws-open i{width:6px;height:6px;border-radius:50%;background:#5a7f2a}
.ws-hero{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #7733241f;border-bottom:1px solid #7733241f;padding:12px 0;margin-bottom:8px}
.ws-h{font-family:Georgia,serif;font-size:clamp(22px,2.2vw,30px);line-height:1;letter-spacing:-.05em}
.ws-fruit{width:62px;height:62px;flex:none;border-radius:50%;background:radial-gradient(ellipse at 31% 24%,#ffdf63 0,#fbb331 34%,#e67b1b 71%,#bb4e18 100%);position:relative;box-shadow:8px 12px 18px #aa661933}
.ws-fruit b{position:absolute;width:34px;height:15px;left:30px;top:-4px;border-radius:100% 0 100% 0;background:linear-gradient(160deg,#6d822f,#415d2a);transform:rotate(-24deg)}
.ws-item{display:grid;grid-template-columns:1fr auto 70px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed #77332426}
.ws-name{font-family:Georgia,serif;font-size:16px;letter-spacing:-.02em}
.ws-price{font-variant-numeric:tabular-nums;font-size:13px}
.ws-add{justify-self:end;font-size:11px;border:1px solid #773324;border-radius:999px;padding:3px 10px;text-align:center}
.ws-add.swap{border:0;padding:0}
.ws-add .a,.ws-add .b{border:1px solid #773324;border-radius:999px;padding:3px 10px}
.ws-add .b{border-color:#7733244d;color:#77332499;text-decoration:line-through}
.at-2 .chg-flat .ws-name{opacity:.45;transition:opacity .6s}
.ws-cart{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:10px 10px 10px 14px;border-radius:999px;background:#773324;color:#fff2d9;font-size:12px;transform:translateY(16px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.ws-cart b{background:#fff2d9;color:#773324;padding:5px 12px;border-radius:999px;font-weight:600}
.at-3 .ws-cart{transform:none;opacity:1}
.ws-skel{position:absolute;inset:44px 18px 18px;display:grid;align-content:start;gap:12px;transition:opacity .5s;opacity:0;pointer-events:none}
.ws-skel i{height:14px;border-radius:6px;background:linear-gradient(90deg,#7733240f,#7733241f,#7733240f) 0 0/200% 100%;animation:shimmer 1.6s linear infinite}
.ws-skel i:nth-child(1){width:40%}.ws-skel i:nth-child(2){height:58px;width:72%}.ws-skel i:nth-child(3),.ws-skel i:nth-child(4),.ws-skel i:nth-child(5){width:100%;height:22px}
.sync-track:not(.at-1) .ws-skel{opacity:1}
.sync-track:not(.at-1) .ws-page{opacity:0}
.at-1 .ws-item{animation:rise .7s var(--ease) both}
.at-1 .ws-item:nth-child(2){animation-delay:.08s}.at-1 .ws-item:nth-child(3){animation-delay:.16s}
.ws-toast{position:absolute;right:14px;top:52px;background:#1f281f;color:#f3f6ea;font-size:11px;padding:7px 12px;border-radius:999px;display:inline-flex;gap:7px;align-items:center;opacity:0;transform:translateY(-8px);transition:opacity .5s,transform .5s var(--ease)}
.ws-toast:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--lime)}
.at-2:not(.at-3) .ws-toast{opacity:1;transform:none}

@keyframes flash{0%,100%{background:transparent}18%{background:#dafa7140}}
@keyframes travel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes blink{50%{opacity:.3}}
@keyframes shimmer{to{background-position:-200% 0}}

/* Pinned mode exists only when JS is running and motion is welcome. Otherwise the final state shows statically. */
.sync-on .sync-track{height:400vh;height:400svh}
.sync-on .sync-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:0}
.sync-on .sync-sticky>.container{width:min(calc(100% - 112px),var(--max))}
.sync-on .sync-steps li:not(.on){opacity:.36}
.sync-on .sync-stage{transform:translateY(calc((1 - var(--in,1)) * 60px)) scale(calc(.94 + var(--in,1) * .06));transform-origin:50% 0}

/* Work */
.work-head{display:grid;grid-template-columns:1fr minmax(0,420px);gap:24px 60px;align-items:end;margin-bottom:48px}
.work-head h2{margin:0;font-size:clamp(46px,6vw,88px)}
.work-head p{margin:0;color:var(--muted);font-size:16px}
.projects{gap:28px}
.project-cover{border-radius:14px;height:400px;transition:transform .5s var(--ease)}
.project-cover:hover{transform:none}
.project-tile .tile-art{transition:transform .8s var(--ease)}
.project-tile:hover .tile-art,.project-tile:focus-visible .tile-art{transform:scale(1.05) translateY(-6px)}
.project-top>span{font-size:12px;letter-spacing:0;opacity:.75}
.project-top strong{font-size:13px}
.project-cover h3{font-size:clamp(30px,2.6vw,38px);top:70px;max-width:80%}
.project-restaurant .project-cover h3{max-width:62%}
.project-restaurant .tile-art.citrus-art{background:transparent;width:62%!important;inset:auto -6px 6px auto}
.project-restaurant .tile-art .citrus-whole{left:38%;top:16%}
.project-restaurant .tile-art .citrus-slice{left:8%;top:36%}
.project-restaurant .tile-art .leaf-one{left:30%;top:12%}
.project-restaurant .tile-art .leaf-two{left:60%;top:20%}
.project-services .tile-art.architecture-art{bottom:-8px}
.project-clinic .tile-art.clinic-art{bottom:24px}
.project-meta{align-items:center;padding-top:18px}
.project-meta h3{font-size:20px;margin-bottom:4px}
.project-meta p{font-size:14px}
.project-open{position:static;border:0;padding:0;background:none;font-size:14px;font-weight:500;display:inline-flex;gap:10px;align-items:center;white-space:nowrap}
.project-open .arrow{transition:transform .35s var(--ease)}
.project-tile:hover .project-open .arrow{transform:translateX(4px)}
.work-foot{margin-top:40px}

/* Long-run care: sticky heading on wide screens */
.care-section{align-items:start;border-top:1px solid var(--line)}
.care-head{position:sticky;top:110px}
.care-head .text-link{margin-top:8px}
.care-rows article{padding:30px 0}
.care-rows article>span{font-variant-numeric:tabular-nums;font-size:13px}
.care-rows p{font-size:15px;line-height:1.65}

/* Three ways in */
.paths{display:grid;grid-template-columns:.8fr 1.6fr;gap:60px;padding:clamp(72px,9vw,120px) 0;border-top:1px solid var(--line)}
.paths-head h2{font-size:clamp(42px,4.8vw,68px);margin:0}
.paths-list{border-top:1px solid var(--line)}
.path{display:grid;grid-template-columns:150px 1fr;grid-template-areas:'n h' 'n d';gap:6px 28px;padding:28px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .45s var(--ease)}
.path-n{grid-area:n;font-size:14px;color:var(--muted);padding-top:9px}
.path strong{grid-area:h;font-size:clamp(26px,2.6vw,38px);font-weight:500;letter-spacing:-.045em;line-height:1.1}
.path-d{grid-area:d;color:var(--muted);font-size:15px;line-height:1.55}
.path:after{content:'';position:absolute;right:6px;top:36px;width:12px;height:12px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform .45s var(--ease)}
.path:hover{padding-left:14px}
.path:hover:after{transform:translateX(4px) rotate(45deg)}
.path:hover strong{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:4px;text-underline-offset:6px}

/* Closing call to action */
.cta-new{padding:clamp(72px,10vw,130px) 0;background:var(--sage)}
.cta-new .kicker{color:#4f5c43}
.cta-row h2{font-size:clamp(46px,6.4vw,100px);letter-spacing:-.068em;line-height:.98}
.cta-new .button.light{background:var(--ink);border-color:var(--ink);color:#fff;min-width:0}
.cta-new>div>p:last-child{font-size:15px}

/* Footer */
.site-footer{padding:72px 0 28px}
.footer-brand .wordmark{gap:0}
.footer-brand .wordmark b{margin-left:7px}
.footer-links a{transition:opacity .2s}
.footer-links a:hover{opacity:.6}

/* Secondary pages: one alignment axis, calmer chrome. */
.page-title{padding:clamp(56px,9vw,120px) 0 clamp(36px,5vw,64px);max-width:none}
.page-title h1{font-size:clamp(50px,7.2vw,112px);letter-spacing:-.07em;line-height:.97;max-width:15ch}
.page-title .body-large{max-width:640px;color:#4c5247}
.eyebrow{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}
.integration-row{border-radius:0}
.chip{border-radius:999px;font-size:12px;padding:5px 12px;white-space:nowrap}
.boundary{border-radius:12px}
.cta-band{border-radius:16px}
.eco-root{background:none!important;color:var(--ink)!important;padding:0 0 32px!important}
.eco-root h2{font-size:clamp(46px,6vw,88px)!important;color:var(--ink)}
.eco-root p{color:var(--muted)!important;font-size:18px}
.eco-column .eyebrow{color:var(--muted)}
.contact-note h3{color:var(--ink)}
.form-panel{border-radius:16px}
.field select,.field textarea,.field input{border-radius:10px}

/* Demos keep their v2 shapes. */
.northline .button,.sunday .button{border-radius:3px}
.demo-site .form-panel{border-radius:4px}
.kindred .form-panel{border-radius:10px}
.demo-site .field select,.demo-site .field textarea,.demo-site .field input{border-radius:3px}

/* Demos: lift tiny labels to a legible floor on phones (brand casing kept). */
@media(max-width:600px){
 .demo-site .section-label{font-size:11px!important}
 .citrus-art .art-caption{font-size:10px}
 .sunday .menu-item p{font-size:13px}
 .service-catalog .text-link,.clinic-services .text-link,.connection-bottom .text-link{font-size:14px}
}

@media(min-width:1101px){
 .sync-grid{grid-template-columns:minmax(280px,.5fr) 1.6fr}
 .sync-stage{grid-template-columns:1fr 64px 1.28fr;font-size:14px}
 .sy-head,.sy-row{padding:10px 12px}
 .ws{min-height:420px}
 .ws-page{padding:20px 26px 24px}
 .ws-brand{font-size:22px}
 .ws-h{font-size:38px}
 .ws-fruit{width:84px;height:84px}
 .ws-fruit b{width:44px;height:19px;left:40px}
 .ws-item{padding:11px 0}
 .ws-name{font-size:19px}
 .ws-price{font-size:14px}
 .ws-skel{inset:52px 26px 24px}
}
@media(max-width:1100px){
 .sync-intro{grid-template-columns:1fr}
 .sync-grid{grid-template-columns:1fr 1.6fr;gap:36px}
 .sync-on .sync-sticky>.container{width:calc(100% - 64px)}
 .sync-stage{grid-template-columns:1fr 28px 1.15fr}
}
@media(max-width:900px){
 .hero-foot{grid-template-columns:1fr;justify-items:start}
 .work-head{grid-template-columns:1fr}
 .care-head{position:static}
 .paths{grid-template-columns:1fr;gap:32px}
 /* Stack the stage: system above, website below, wire running down. */
 .sync-grid{grid-template-columns:1fr;gap:20px}
 .sync-stage{grid-template-columns:1fr;grid-template-rows:auto 26px auto;max-width:560px;width:100%;margin-inline:auto}
 .sy-wire{width:2px;height:auto;align-self:stretch;justify-self:center;margin:2px 0;background:repeating-linear-gradient(180deg,#5b6b52 0 6px,transparent 6px 11px)}
 .sy-wire span{left:50%;top:0;margin:-5px 0 0 -5px}
 .at-1 .sy-wire span{animation-name:travel-y}
 .sync-on .sync-steps{display:grid;padding-left:0;min-height:118px}
 .sync-on .sync-steps:before{display:none}
 .sync-on .sync-steps:after{left:0;right:auto;top:auto;bottom:0;height:2px;width:100%;transform:scaleX(var(--p,1));transform-origin:left}
 .sync-on .sync-steps li{grid-area:1/1;padding-bottom:16px}
 .sync-on .sync-steps li:not(.on){opacity:0;visibility:hidden}
 .sync-on .sync-steps li.on{opacity:1;visibility:visible}
 .sync-on .sync-stage{transform:none}
}
@keyframes travel-y{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
@media(max-width:800px){
 :root{--header:64px}
 .site-header{height:var(--header)}
 .nav-links{top:var(--header);background:var(--paper);padding:12px 16px 24px;box-shadow:0 24px 40px -24px #0003}
 .nav-links>a:not(.button){font-size:24px;letter-spacing:-.035em;min-height:52px;border-bottom:1px solid var(--line)}
 .nav-links>a:not(.button):after{display:none}
 .nav-links .button.small{margin-top:14px;min-height:52px;font-size:15px}
 .menu-toggle{border-radius:999px;padding:9px 18px;min-height:42px}
}
@media(max-width:600px){
 .container,.sync-on .sync-sticky>.container{width:calc(100% - 32px)}
 .wordmark{font-size:19px}
 .v3-hero{padding:44px 0 56px}
 .hero-title{font-size:clamp(46px,13.4vw,72px);letter-spacing:-.07em}
 .hero-lede{font-size:17px}
 .v3-hero .actions{gap:22px}
 .sync-intro{padding-top:72px}
 .sync-intro h2{font-size:clamp(42px,11.6vw,56px)}
 .sync-intro .body-large{font-size:16px}
 .sync-on .sync-track{height:360vh;height:360svh}
 .sync-steps strong{font-size:19px}
 .sync-d{font-size:13px}
 .sync-foot{flex-direction:column;align-items:flex-start}
 .sync-stage{font-size:12px}
 .sy{border-radius:12px;padding:4px 4px 6px}
 .sy-head{display:none}
 .sy-bar{padding:7px 8px 9px}
 .sy-head,.sy-row{padding:6px 8px;grid-template-columns:1.35fr .75fr 1fr}
 .tag,.tag .a,.tag .b{font-size:10.5px;padding:2px 7px}
 .ws{min-height:0;border-radius:12px}
 .ws-chrome{padding:8px 10px}
 .ws-page{padding:12px 14px 14px}
 .ws-nav{margin-bottom:8px}
 .ws-brand{font-size:17px}
 .ws-hero{padding:8px 0;margin-bottom:4px}
 .ws-h{font-size:22px}
 .ws-fruit{width:44px;height:44px}
 .ws-fruit b{width:24px;height:11px;left:22px}
 .ws-item{padding:6px 0;grid-template-columns:1fr auto 64px}
 .ws-name{font-size:15px}
 .ws-cart{margin-top:8px;padding:7px 7px 7px 12px}
 .ws-skel{inset:38px 14px 14px}
 .ws-toast{top:44px;right:10px}
 .work-head{margin-bottom:28px}
 .projects{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 8px;scroll-padding-inline:16px;scrollbar-width:none}
 .projects::-webkit-scrollbar{display:none}
 .projects>.project-tile{flex:0 0 84%;scroll-snap-align:start}
 .gallery-section .projects{display:grid;overflow:visible;margin:0;padding:0;gap:40px}
 .project-cover{height:330px}
 .project-cover h3{font-size:30px;top:62px}
 .project-meta p{font-size:13px}
 .care-section{gap:28px;padding-bottom:64px}
 .care-section h2{font-size:46px}
 .path{grid-template-columns:1fr;grid-template-areas:'n' 'h' 'd';padding:22px 32px 22px 0}
 .path-n{padding:0}
 .path:after{top:50%}
 .path:hover{padding-left:0}
 .cta-row{flex-direction:column;align-items:flex-start;gap:8px}
 .footer-links{font-size:14px}
 .page-title h1{font-size:clamp(44px,12.4vw,64px)}
}
@media(max-width:600px) and (max-height:740px){
 .ws-hero{display:none}
 .sync-on .sync-steps{min-height:96px}
 .sync-d{display:none}
}
@media(prefers-reduced-motion:reduce){
 .site-header{transition:none}
 .site-header.is-hidden{transform:none}
}

/* Studio v4 — the DaulatLabs "morning" look from daulatlabs.com (Nyala): warm paper, Geist,
   light headlines with a bold second beat, brass accent, dark inset panels. Marketing pages only
   (body.v4); the fictional demo brands keep their own styling. Self-hosted fonts, no CDN. */
@font-face{font-family:'Geist';src:url(fonts/Geist-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/GeistMono-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}

.v4{
 --s4-bg:#eef1f4;--s4-raised:#f7f8fa;--s4-card:#ffffff;--s4-sunk:#e4e8ed;
 --s4-ink:#0b0d12;--s4-ink-2:#3a404a;--s4-ink-3:#545b66;
 --s4-line:rgba(20,30,45,.08);--s4-line-2:rgba(20,30,45,.14);--s4-line-3:rgba(20,30,45,.26);
 /* Pagi (30 Oct 2026): the gold thread from daulatlabs.com is the one accent. #9c6f24 holds 4.5:1 on the ground. */
 --s4-acc:#9c6f24;--s4-acc-rgb:156,111,36;--s4-glow:#dcae62;--s4-glow-rgb:220,174,98;
 --s4-night:#121315;--s4-night-2:#1b1c1f;--s4-night-ink:#f4f1ea;--s4-night-ink-2:#c9c4b9;--s4-night-ink-3:#9d988d;
 --s4-ease:cubic-bezier(.2,0,0,1);--s4-gut:clamp(20px,4vw,56px);
 --s4-sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--s4-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 /* older v2/v3 tokens, so secondary pages follow the new palette */
 --bg:var(--s4-bg);--paper:var(--s4-bg);--ink:var(--s4-ink);--muted:var(--s4-ink-3);--line:var(--s4-line-2);--accent:var(--s4-glow);--lime:var(--s4-glow);--forest:var(--s4-night);
 background:var(--s4-bg);color:var(--s4-ink);font-family:var(--s4-sans);font-feature-settings:'ss01','cv11';
}
/* The family's morning sky at the top of every page, settling into paper (as on daulatlabs.com) */
body.v4{background:linear-gradient(180deg,#a9c0db 0,#c9d6e4 260px,#dfe6ee 520px,#eaeef2 760px,rgba(238,241,244,0) 1040px) no-repeat top/100% 1040px,var(--s4-bg)}
.v4 ::selection{background:rgba(var(--s4-acc-rgb),.22);color:var(--s4-ink)}
.v4 :focus-visible{outline:2px solid var(--s4-acc);outline-offset:4px}
.v4 .container{width:auto;max-width:1280px;margin-inline:auto;padding-inline:var(--s4-gut)}
.v4 h1,.v4 h2{font-weight:300;letter-spacing:-.05em}
.v4 h1 b,.v4 h2 b{font-weight:inherit}
.v4 em{font-family:inherit;font-style:normal;font-weight:500;color:var(--s4-acc)}
.v4 .kicker{font-size:13.5px;color:var(--s4-ink-3);letter-spacing:-.005em}
.v4 .kicker-dot{background:var(--s4-acc);box-shadow:0 0 0 4px rgba(var(--s4-acc-rgb),.15)}
.v4 .button{background:var(--s4-ink);color:var(--s4-bg);border-radius:999px}
.v4 .button.light{background:var(--s4-bg);color:var(--s4-ink)}
.v4 .body-large{color:var(--s4-ink-2)}

/* ---------- type + controls ---------- */
.s4-k{display:inline-flex;align-items:center;gap:9px;font:500 13.5px/1.4 var(--s4-sans);letter-spacing:-.005em;color:var(--s4-ink-3);margin:0 0 18px}
.s4-k--acc{color:var(--s4-acc)}
.s4-h1{font:300 clamp(48px,7.6vw,128px)/.92 var(--s4-sans);letter-spacing:-.05em;margin:0 0 clamp(24px,3vw,36px)}
.s4-h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.s4-h1 .ln>*{display:inline-block;animation:s4-line 1.15s var(--s4-ease) both}
.s4-h1 .ln:nth-child(2)>*{animation-delay:.1s}
.s4-h1 b{font-weight:inherit;color:var(--s4-ink-3);animation:s4-line 1.15s .1s var(--s4-ease) both}
.s4-h1--page{font-size:clamp(44px,6.4vw,104px)}
.s4-h2{font:300 clamp(38px,5.2vw,76px)/.98 var(--s4-sans);letter-spacing:-.05em;margin:0}
.s4-h2 b{font-weight:inherit;color:var(--s4-ink-3)}
.s4-bento .s4-h2 b{color:var(--s4-night-ink-3)}
.s4-lead{font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.6;color:var(--s4-ink-2);max-width:52ch;margin:0}
.s4-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px)}
.s4-btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;font:500 14.5px/1 var(--s4-sans);text-decoration:none;transition:transform .35s var(--s4-ease),background .25s,box-shadow .35s var(--s4-ease),border-color .25s;will-change:transform}
.s4-btn .arrow{width:17px;height:17px;transition:transform .35s var(--s4-ease)}
.s4-btn:hover{transform:translateY(-2px)}
.s4-btn:hover .arrow{transform:translateX(4px)}
.s4-btn--a{background:var(--s4-ink);color:var(--s4-bg);box-shadow:0 10px 26px -14px rgba(17,17,17,.55)}
.s4-btn--a:hover{background:#000;box-shadow:0 18px 34px -16px rgba(17,17,17,.6)}
.s4-btn--b{color:var(--s4-ink);border:1px solid var(--s4-line-3);background:rgba(255,255,255,.18)}
.s4-btn--b:hover{border-color:var(--s4-ink);background:var(--s4-raised)}
.s4-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px;color:var(--s4-ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:4px;transition:background-size .45s var(--s4-ease)}
.s4-link:hover{background-size:0 1px;background-position:100% 100%}
.s4-link .arrow{width:16px;height:16px;transition:transform .35s var(--s4-ease)}
.s4-link:hover .arrow{transform:translateX(4px)}
.s4-more{margin-top:clamp(28px,3vw,40px)}
.s4-sec{padding-block:clamp(56px,6vw,88px)}
.s4-sec--tight{padding-top:0}
.s4-head{display:grid;gap:18px;margin-bottom:clamp(36px,4vw,56px)}
.s4-head--split{grid-template-columns:1.1fr .9fr;align-items:end;gap:20px 64px}
.s4-head--split .s4-lead{justify-self:end}
.s4-note{font-size:13.5px;line-height:1.6;color:var(--s4-ink-3);margin:14px 0 0;max-width:72ch}
.s4-note b{color:var(--s4-ink);font-weight:500}

/* ---------- motion primitives ---------- */
.s4-rise{animation:s4-rise 1.1s var(--s4-ease) both}
.s4-d1{animation-delay:.1s}.s4-d2{animation-delay:.22s}.s4-d3{animation-delay:.34s}
.s4-rv{transition:opacity 1s var(--s4-ease),transform 1s var(--s4-ease)}
.s4-rv.is-wait{opacity:.001;transform:translateY(26px)}
@keyframes s4-rise{from{opacity:.001;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes s4-line{from{transform:translateY(108%)}to{transform:none}}

/* ---------- header ---------- */
.v4 .site-header.s4-nav{position:sticky;top:0;height:68px;background:transparent;border-bottom:1px solid transparent;transition:background .35s,border-color .35s,transform .45s var(--s4-ease),-webkit-backdrop-filter .35s,backdrop-filter .35s;z-index:60}
.v4 .site-header.s4-nav.is-on{background:rgba(239,238,235,.94);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--s4-line)}
.v4 .s4-nav .nav{height:100%;display:flex;align-items:center;gap:28px}
.v4 .s4-nav .nav-links{margin-left:auto}
.v4 .wordmark{display:inline-flex;align-items:center;gap:10px;font:600 16.5px/1 var(--s4-sans);white-space:nowrap;letter-spacing:-.03em;color:var(--s4-ink);text-decoration:none}
.s4-logo{display:block;flex:none;border-radius:23%;box-shadow:0 6px 14px -8px rgba(5,7,11,.55)}
.wordmark .s4-logo{transition:transform .6s var(--s4-ease)}
.wordmark:hover .s4-logo{transform:rotate(-8deg) scale(1.06)}
.s4-by{font:500 11px/1 var(--s4-mono);letter-spacing:.06em;color:var(--s4-ink-3);margin-left:2px}
.v4 .nav-links{display:flex;align-items:center;gap:28px;font-size:14.5px}
.v4 .nav-links a{color:var(--s4-ink-2);text-decoration:none}
.v4 .nav-links a:not(.button):hover,.v4 .nav-links a[aria-current=page]{color:var(--s4-ink)}
.v4 .nav-links .button.small{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;background:var(--s4-ink);color:var(--s4-bg);font-size:13.5px;font-weight:500}
.v4 .nav-links .button.small .arrow{width:15px;height:15px}
.v4 .menu-toggle{border:1px solid var(--s4-line-3);border-radius:999px;color:var(--s4-ink);font:500 13.5px var(--s4-sans)}
/* All systems: the same family menu as daulatlabs.com */
.s4-sw{position:relative}
.s4-sw>button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--s4-ink-2)}
.s4-sw>button:hover,.s4-sw>button[aria-expanded=true]{color:var(--s4-ink)}
.s4-sw>button:focus-visible{outline:2px solid var(--s4-acc);outline-offset:4px}
.s4-sw>button svg{transition:transform .25s var(--s4-ease)}
.s4-sw>button[aria-expanded=true] svg{transform:rotate(180deg)}
.s4-swp{position:absolute;top:calc(100% + 18px);left:-18px;width:384px;padding:8px;border-radius:18px;background:rgba(249,248,245,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 0 1px var(--s4-line-2),0 40px 80px -20px rgba(38,32,22,.18);opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;transition:opacity .2s,transform .25s var(--s4-ease),visibility 0s .25s;z-index:70}
.s4-swp.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s,transform .25s var(--s4-ease)}
.s4-swp a{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:12px;color:var(--s4-ink);text-decoration:none;transition:background-color .2s}
.s4-swp a:hover,.s4-swp a[aria-current=page]{background:rgba(17,17,17,.05)}
.s4-swp b{display:block;font:600 14px/1.2 var(--s4-sans);letter-spacing:-.01em}
.s4-swp .s4-d{display:block;font-size:12.5px;color:var(--s4-ink-3);line-height:1.35}
.s4-swp em{font:500 9.5px/1 var(--s4-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--s4-ink-3)}
.s4-swp em.is-on{color:#1f7a4c}
.s4-swp hr{border:0;border-top:1px solid var(--s4-line);margin:6px 4px}
.s4-swp .s4-logo{box-shadow:none}
.v4 .nav-links .s4-mob{display:none}
.s4-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--s4-acc);transform-origin:left;transform:scaleX(var(--p,0));opacity:.85}
@media(max-width:800px){
 .v4 .nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(239,238,235,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:8px var(--s4-gut) 20px;border-bottom:1px solid var(--s4-line)}
 .v4 .nav-links.open{display:flex}
 .v4 .nav-links a{padding:14px 0;border-bottom:1px solid var(--s4-line);font-size:17px}
 .v4 .nav-links .button.small{margin-top:14px;justify-content:center;min-height:48px;border:0}
 .s4-by,.s4-sw{display:none}
 .v4 .nav-links .s4-mob{display:block}
 .v4 .s4-nav .nav{justify-content:space-between}
}

/* ---------- hero ---------- */
.s4-lockup{display:flex;align-items:center;gap:14px;margin:0 0 clamp(20px,3vh,32px)}
.s4-lockup .s4-logo{border-radius:10px;box-shadow:0 14px 28px -14px rgba(5,7,11,.6)}
.s4-lockup span{display:grid;line-height:1.05}
.s4-lockup b{font-size:26px;font-weight:600;letter-spacing:-.035em;color:var(--s4-ink)}
.s4-lockup small{margin-top:3px;font-size:12.5px;color:var(--s4-ink-3)}
.s4-status{display:inline-flex;align-items:center;gap:9px;margin:0 0 clamp(16px,2.4vh,24px);padding:7px 14px 7px 12px;border-radius:999px;background:rgba(249,248,245,.55);box-shadow:inset 0 0 0 1px var(--s4-line-2);font-size:13.5px;color:var(--s4-ink-2)}
.s4-status .s4-live{background:#1f7a4c;animation-name:s4-ping-ok}
@keyframes s4-ping-ok{0%{box-shadow:0 0 0 0 rgba(31,122,76,.45)}70%,100%{box-shadow:0 0 0 10px rgba(31,122,76,0)}}
.s4-hero{position:relative;isolation:isolate;padding:clamp(48px,8vh,96px) 0 clamp(40px,6vh,72px);overflow:hidden}
.s4-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,4vw,64px)}
.s4-live{width:8px;height:8px;border-radius:50%;background:var(--s4-acc);box-shadow:0 0 0 0 rgba(var(--s4-acc-rgb),.5);animation:s4-ping 2.6s 1.2s infinite}
@keyframes s4-ping{0%{box-shadow:0 0 0 0 rgba(var(--s4-acc-rgb),.45)}70%,100%{box-shadow:0 0 0 10px rgba(var(--s4-acc-rgb),0)}}
.s4-hero .s4-h1{font-size:clamp(48px,6.6vw,112px)}

/* the website that builds itself */
.s4-stage{position:relative;perspective:1600px;padding:28px 10px 40px}
.s4-browser{position:relative;border-radius:18px;background:var(--s4-card);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px var(--s4-line-2),0 40px 80px -40px rgba(17,17,17,.38),0 18px 40px -28px rgba(var(--s4-acc-rgb),.35);transform:rotateX(calc(var(--ry,0)*1deg)) rotateY(calc(var(--rx,0)*1deg));transform-style:preserve-3d;transition:transform .9s var(--s4-ease);animation:s4-float-in 1.4s .15s var(--s4-ease) both;overflow:hidden}
@keyframes s4-float-in{from{opacity:.001;transform:translateY(40px) rotateX(10deg) scale(.96)}to{opacity:1;transform:none}}
.s4-chrome{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-bottom:1px solid var(--s4-line);background:var(--s4-raised)}
.s4-chrome i{width:9px;height:9px;border-radius:50%;background:var(--s4-sunk)}
.s4-chrome span{margin-left:auto;margin-right:auto;font:500 11px var(--s4-mono);color:var(--s4-ink-3);background:var(--s4-bg);padding:4px 14px;border-radius:999px;transform:translateX(-18px)}
.s4-site{padding:14px;display:grid;gap:12px;background:#fbf4e6;color:#5b2a17;font-family:var(--s4-sans)}
.s4-site .b{opacity:0;animation:s4-block .9s var(--s4-ease) both}
.s4-site .b-nav{display:flex;align-items:center;justify-content:space-between;animation-delay:.55s}
.s4-site .logo{font:700 14px Georgia,serif;letter-spacing:-.02em;color:#7a2e12}
.s4-site .links{display:flex;gap:8px}.s4-site .links i{width:28px;height:5px;border-radius:3px;background:#e9d6b8}
.s4-site .cta{font-size:10.5px;font-weight:600;color:#fbf4e6;background:#7a2e12;padding:6px 11px;border-radius:999px}
.s4-site .b-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;align-items:stretch;animation-delay:.8s}
.s4-site .b-copy{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:6px 4px}
.s4-site .b-eyebrow{margin:0;font-size:10px;color:#9a5b3a}
.s4-site .b-h{margin:0;font:400 clamp(20px,2vw,30px)/1.02 Georgia,serif;letter-spacing:-.03em;color:#5b2a17}
.s4-site .b-btn{align-self:flex-start;font-size:10.5px;font-weight:600;border:1px solid #7a2e12;color:#7a2e12;border-radius:999px;padding:6px 11px}
.s4-site .b-img{position:relative;min-height:150px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#f4c98b,#e9925b 70%,#c8613a)}
.s4-site .sun{position:absolute;width:56px;height:56px;border-radius:50%;background:#fff1c9;left:50%;top:26%;transform:translateX(-50%);box-shadow:0 0 40px 10px rgba(255,241,201,.6);animation:s4-sun 6s 1.4s ease-in-out infinite alternate}
.s4-site .hill{position:absolute;left:-10%;right:-10%;bottom:-38%;height:80%;border-radius:50% 50% 0 0;background:#7a2e12;opacity:.9}
@keyframes s4-sun{to{top:20%}}
.s4-site .b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;animation-delay:1.05s}
.s4-site .b-cards div{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:10px;background:#f6e6cc;font-size:10.5px}
.s4-site .b-cards b{font-weight:600;color:#5b2a17}.s4-site .b-cards span{font-family:var(--s4-mono);color:#9a5b3a}
.s4-site .b-cards div:nth-child(3) span{animation:s4-flash 1.2s 2.6s var(--s4-ease) both}
@keyframes s4-block{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes s4-flash{0%{background:transparent}30%{background:#ffe08a;color:#5b2a17}100%{background:transparent}}
.s4-chip{position:absolute;display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:999px;background:rgba(249,248,245,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--s4-line-2),0 18px 36px -20px rgba(17,17,17,.45);font-size:12.5px;color:var(--s4-ink-2);white-space:nowrap;animation:s4-pop .9s var(--s4-ease) both}
.s4-chip b{font-weight:600;color:var(--s4-ink)}
.s4-chip .dot{width:7px;height:7px;border-radius:50%;background:#1f7a4c;box-shadow:0 0 0 3px rgba(31,122,76,.15)}
.s4-chip .wa{width:16px;height:16px;border-radius:50%;background:#1f7a4c;position:relative}
.s4-chip .wa:after{content:'';position:absolute;inset:4px;border:1.5px solid #f9f8f5;border-radius:50%;border-bottom-left-radius:0}
.s4-chip-a{left:-14px;top:42%;animation-delay:2.4s}
.s4-chip-b{right:-6px;top:6px;animation-delay:1.7s}
.s4-chip-c{right:6%;bottom:6px;animation-delay:3.2s}
.s4-chip-a,.s4-chip-b,.s4-chip-c{--fy:0px}
@keyframes s4-pop{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){.s4-chip{transition:transform 1s var(--s4-ease)}.s4-stage.is-tilting .s4-chip-a{transform:translate3d(calc(var(--rx,0)*-1.4px),calc(var(--ry,0)*1.4px),0)}.s4-stage.is-tilting .s4-chip-b{transform:translate3d(calc(var(--rx,0)*1.8px),calc(var(--ry,0)*-1.6px),0)}.s4-stage.is-tilting .s4-chip-c{transform:translate3d(calc(var(--rx,0)*1.2px),calc(var(--ry,0)*1.2px),0)}}

/* ---------- marquee ---------- */
.s4-marquee{padding:clamp(28px,4vw,48px) 0 clamp(36px,5vw,64px);border-block:1px solid var(--s4-line);text-align:center;overflow:hidden}
.s4-marquee .s4-k{justify-content:center;margin-bottom:20px}
.s4-mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.s4-mq-track{display:flex;width:max-content;animation:s4-marquee 48s linear infinite}
.s4-mq:hover .s4-mq-track{animation-play-state:paused}
.s4-mq-row{display:flex;flex:none}
.s4-mq-row span{display:inline-flex;align-items:center;font:300 clamp(26px,3vw,44px)/1 var(--s4-sans);letter-spacing:-.04em;color:var(--s4-ink-2);padding:0 clamp(18px,2vw,30px);white-space:nowrap}
.s4-mq-row span:after{content:'';width:8px;height:8px;border-radius:50%;background:var(--s4-acc);opacity:.55;margin-left:clamp(36px,4vw,60px)}
@keyframes s4-marquee{to{transform:translateX(-50%)}}

/* ---------- the sync moment, re-skinned as a dark inset panel ---------- */
.v4 .sync{margin:clamp(40px,5vw,72px) clamp(10px,1.4vw,20px) 0;border-radius:clamp(22px,2.6vw,36px);background:var(--s4-night);color:var(--s4-night-ink)}
.v4 .sync-intro .kicker{color:var(--s4-night-ink-3)}
.v4 .sync-intro h2{font-weight:300;color:var(--s4-night-ink)}
.v4 .sync-intro h2 em{color:var(--s4-glow);font-weight:500}
.v4 .sync-intro .body-large{color:var(--s4-night-ink-2)}
.v4 .sync-steps:before{background:rgba(244,241,234,.14)}
.v4 .sync-steps:after{background:var(--s4-glow)}
.v4 .sync-n{color:var(--s4-glow);font-family:var(--s4-mono)}
.v4 .sync-d{color:var(--s4-night-ink-3)}
.v4 .sync-foot{border-top-color:rgba(244,241,234,.12)}
.v4 .sync-foot p{color:var(--s4-night-ink-3)}
.v4 .sync-foot .text-link{color:var(--s4-glow)}

/* ---------- work ---------- */
.v4 .project-tile{transition:transform .6s var(--s4-ease),box-shadow .6s var(--s4-ease)}
.v4 .project-tile:hover{transform:translateY(-6px);box-shadow:0 36px 60px -40px rgba(17,17,17,.5)}

/* ---------- plans ---------- */
.s4-toggle{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:auto;padding:4px;border-radius:999px;background:var(--s4-sunk);margin-bottom:22px;box-shadow:inset 0 0 0 1px var(--s4-line)}
.s4-toggle button{position:relative;z-index:1;border:0;background:none;height:40px;padding:0 20px;border-radius:999px;font:500 14px var(--s4-sans);color:var(--s4-ink-3);transition:color .3s}
.s4-toggle button[aria-pressed=true]{color:var(--s4-ink)}
.s4-toggle-pill{position:absolute;top:4px;bottom:4px;left:var(--x,4px);width:var(--w,0);border-radius:999px;background:var(--s4-card);box-shadow:0 1px 2px rgba(17,17,17,.08),0 6px 16px -8px rgba(17,17,17,.3);transition:left .55s var(--s4-ease),width .55s var(--s4-ease)}
.s4-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1vw,14px)}
.s4-plan{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px);border-radius:24px;background:var(--s4-raised);box-shadow:inset 0 0 0 1px var(--s4-line);transition:transform .6s var(--s4-ease),box-shadow .6s var(--s4-ease),opacity 1s var(--s4-ease)}
.s4-plan:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--s4-line-2),0 40px 60px -44px rgba(17,17,17,.45)}
.s4-plan.is-hot{background:var(--s4-night);color:var(--s4-night-ink);box-shadow:inset 0 0 0 1px rgba(var(--s4-glow-rgb),.18),0 40px 70px -40px rgba(17,17,17,.6)}
.s4-plan.is-hot:before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 80% at 90% 0%,rgba(var(--s4-glow-rgb),.18),transparent 60%);pointer-events:none}
.s4-plan>*{position:relative}
.s4-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.s4-plan h3{margin:0;font:500 22px/1.1 var(--s4-sans);letter-spacing:-.03em}
.s4-pill{font:600 10.5px/1 var(--s4-sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;color:var(--s4-glow);box-shadow:inset 0 0 0 1px rgba(var(--s4-glow-rgb),.35)}
.s4-plan-line{margin:8px 0 0;font-size:14.5px;color:var(--s4-ink-3);min-height:2.9em}
.s4-term{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin:14px 0 -4px;padding:6px 11px;border-radius:999px;font:600 11px/1 var(--s4-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--s4-acc);background:rgba(var(--s4-acc-rgb),.09);box-shadow:inset 0 0 0 1px rgba(var(--s4-acc-rgb),.22);transition:opacity .3s}
.s4-term:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.s4-plan.is-hot .s4-term{color:var(--s4-glow);background:rgba(var(--s4-glow-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--s4-glow-rgb),.3)}
.s4-plan.is-hot .s4-plan-line{color:var(--s4-night-ink-3)}
.s4-price{display:flex;align-items:baseline;gap:6px;margin:22px 0 6px}
.s4-rm{font:500 16px var(--s4-sans);color:var(--s4-ink-3)}
.s4-plan.is-hot .s4-rm,.s4-plan.is-hot .s4-per{color:var(--s4-night-ink-3)}
.s4-amt{font:500 clamp(48px,4.4vw,64px)/.9 var(--s4-sans);letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.s4-plan.is-hot .s4-amt{background:linear-gradient(180deg,#f4f1ea,#ffb3c8);-webkit-background-clip:text;background-clip:text;color:transparent}
.s4-per{font-size:14px;color:var(--s4-ink-3)}
.s4-terms{margin:0;min-height:2.8em;font:500 12px/1.45 var(--s4-mono);color:var(--s4-ink-3);transition:opacity .3s}
.s4-plan.is-hot .s4-terms{color:var(--s4-night-ink-3)}
.s4-plan ul{list-style:none;margin:20px 0 26px;padding:20px 0 0;border-top:1px solid var(--s4-line-2);display:grid;gap:11px;flex:1}
.s4-plan.is-hot ul{border-top-color:rgba(244,241,234,.12)}
.s4-plan li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.4;color:var(--s4-ink-2)}
.s4-plan.is-hot li{color:var(--s4-night-ink-2)}
.s4-plan li:before{content:'';position:absolute;left:2px;top:4px;width:11px;height:6px;border-left:1.6px solid var(--s4-acc);border-bottom:1.6px solid var(--s4-acc);transform:rotate(-45deg)}
.s4-plan.is-hot li:before{border-color:var(--s4-glow)}
.s4-plan li.plus{padding-left:0;font-weight:500;color:var(--s4-ink)}
.s4-plan.is-hot li.plus{color:var(--s4-night-ink)}
.s4-plan li.plus:before{display:none}
.s4-plan .s4-btn{justify-content:center}
.s4-plan.is-hot .s4-btn--a{background:var(--s4-night-ink);color:var(--s4-night)}
.s4-plans.is-swap .s4-amt,.s4-plans.is-swap .s4-terms,.s4-plans.is-swap .s4-term{opacity:.35}
.s4-custom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(10px,1vw,14px);padding:clamp(22px,2.4vw,32px);border-radius:24px;box-shadow:inset 0 0 0 1px var(--s4-line-2)}
.s4-custom .s4-k{margin-bottom:8px}
.s4-custom h3{margin:0;font:500 22px/1.15 var(--s4-sans);letter-spacing:-.03em}
.s4-custom p{margin:6px 0 0;color:var(--s4-ink-3);font-size:14.5px}
.s4-custom-price{margin:0!important;font-size:15px;white-space:nowrap}
.s4-custom-price b{font:500 clamp(28px,3vw,40px)/1 var(--s4-sans);letter-spacing:-.04em;color:var(--s4-ink);margin-left:6px}

/* ---------- bento ---------- */
.s4-bento{margin:clamp(40px,5vw,72px) clamp(10px,1.4vw,20px);border-radius:clamp(22px,2.6vw,36px);background:var(--s4-night);color:var(--s4-night-ink);padding:clamp(10px,1vw,14px)}
.s4-bento-in{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1vw,14px);max-width:1440px;margin-inline:auto}
.s4-tile{border-radius:clamp(18px,2vw,26px);background:var(--s4-night-2);box-shadow:inset 0 0 0 1px rgba(244,241,234,.06);padding:clamp(22px,2.6vw,38px);overflow:hidden;position:relative}
.s4-t-name{grid-column:span 7;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;background:radial-gradient(90% 120% at 100% 0%,rgba(var(--s4-glow-rgb),.16),transparent 55%),var(--s4-night-2)}
.s4-t-name:after{content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;border:34px solid rgba(var(--s4-glow-rgb),.08);animation:s4-spin 40s linear infinite}
.s4-t-name .s4-h2{color:var(--s4-night-ink);margin-bottom:16px}
.s4-t-name .s4-lead{color:var(--s4-night-ink-2)}
.s4-k--acc{color:var(--s4-acc)}
.s4-bento .s4-k--acc{color:var(--s4-glow)}
.s4-t-num{grid-column:span 5}
.s4-nums{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;margin-top:6px}
.s4-nums div{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--s4-night-ink-3)}
.s4-n{font:600 clamp(44px,5vw,72px)/.9 var(--s4-sans);letter-spacing:-.06em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#f4f1ea,#d98aa3);-webkit-background-clip:text;background-clip:text;color:transparent}
.s4-t-list{grid-column:span 7}
.s4-promises{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.s4-promises li{display:flex;flex-direction:column;gap:5px;padding-top:16px;border-top:1px solid rgba(244,241,234,.1)}
.s4-promises b{font-weight:500;font-size:16px;letter-spacing:-.02em}
.s4-promises span{font-size:14px;line-height:1.5;color:var(--s4-night-ink-3)}
.s4-t-fix{grid-column:span 5;display:grid;gap:14px}
.s4-ff{padding:20px;border-radius:18px;background:rgba(244,241,234,.04);box-shadow:inset 0 0 0 1px rgba(244,241,234,.06)}
.s4-ff p{margin:0;color:var(--s4-night-ink-3);font-size:14px;line-height:1.5}
.s4-ff h3{margin:12px 0 6px;font:500 22px/1 var(--s4-sans);letter-spacing:-.03em}
.s4-tag{font:600 10.5px/1 var(--s4-sans);letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.s4-tag.ok{color:#8fd4a8;box-shadow:inset 0 0 0 1px rgba(143,212,168,.35)}
.s4-tag.q{color:var(--s4-glow);box-shadow:inset 0 0 0 1px rgba(var(--s4-glow-rgb),.35)}
@keyframes s4-spin{to{transform:rotate(360deg)}}

/* ---------- steps ---------- */
.s4-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px);position:relative}
.s4-steps--4{grid-template-columns:repeat(4,1fr)}
.s4-steps:before,.s4-steps:after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--s4-line-2)}
.s4-steps:after{background:var(--s4-acc);height:2px;top:-.5px;transform-origin:left;transform:scaleX(var(--k,1));transition:transform .2s linear}
.s4-steps li{display:flex;flex-direction:column;gap:8px;padding-top:22px;font-size:14.5px;line-height:1.5;color:var(--s4-ink-3);transition:opacity .6s var(--s4-ease),transform .6s var(--s4-ease)}
.s4-steps[data-steps].is-armed li{opacity:.35;transform:translateY(8px)}
.s4-steps[data-steps].is-armed li.is-on{opacity:1;transform:none}
.s4-step-n{font:500 12px var(--s4-mono);color:var(--s4-acc);letter-spacing:.04em}
.s4-steps b{font:500 20px/1.2 var(--s4-sans);letter-spacing:-.03em;color:var(--s4-ink)}

/* ---------- account teaser ---------- */
.s4-portal-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(28px,4vw,56px);border-radius:clamp(22px,2.6vw,36px);background:var(--s4-raised);box-shadow:inset 0 0 0 1px var(--s4-line)}
.s4-portal .s4-h2{font-size:clamp(34px,4vw,60px);margin-bottom:18px}
.s4-acct{border-radius:20px;background:var(--s4-card);box-shadow:inset 0 0 0 1px var(--s4-line-2),0 30px 60px -44px rgba(17,17,17,.5);padding:8px 22px}
.s4-acct-row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--s4-line);font-size:14px;color:var(--s4-ink-3)}
.s4-acct-row:last-child{border-bottom:0}
.s4-acct-row b{display:inline-flex;align-items:center;gap:10px;font-weight:500;color:var(--s4-ink);text-align:right}
.s4-bar{display:inline-block;width:64px;height:6px;border-radius:9px;background:var(--s4-sunk);overflow:hidden}
.s4-bar i{display:block;height:100%;background:var(--s4-acc);border-radius:inherit;transform-origin:left;transition:transform 1.4s .3s var(--s4-ease)}
.s4-portal .is-wait .s4-bar i{transform:scaleX(0)}
.s4-ok{width:8px;height:8px;border-radius:50%;background:#1f7a4c}

/* ---------- faq ---------- */
.s4-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px 64px;align-items:start}
.s4-qs{border-top:1px solid var(--s4-line-2)}
.s4-q{border-bottom:1px solid var(--s4-line-2)}
.s4-q summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;font:500 clamp(17px,1.5vw,20px)/1.3 var(--s4-sans);letter-spacing:-.02em}
.s4-q summary::-webkit-details-marker{display:none}
.s4-plus{position:relative;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--s4-line-3);transition:transform .5s var(--s4-ease),background .3s}
.s4-plus:before,.s4-plus:after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--s4-ink);transform:translate(-50%,-50%)}
.s4-plus:after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--s4-ease)}
.s4-q[open] .s4-plus{transform:rotate(180deg);background:var(--s4-ink)}
.s4-q[open] .s4-plus:before{background:var(--s4-bg)}
.s4-q[open] .s4-plus:after{transform:translate(-50%,-50%) rotate(0);background:var(--s4-bg)}
.s4-q>div{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--s4-ease)}
.s4-q[open]>div{grid-template-rows:1fr}
.s4-q>div>p{overflow:hidden;margin:0;color:var(--s4-ink-2);line-height:1.65;max-width:62ch}
.s4-q[open]>div>p{padding-bottom:24px}
.s4-faq .s4-head{margin:0}

/* ---------- cta ---------- */
.s4-cta{padding-block:clamp(56px,7vw,96px);text-align:center}
.s4-cta-in{display:flex;flex-direction:column;align-items:center}
.s4-cta .s4-h2{font-size:clamp(42px,6.4vw,104px);max-width:14ch;margin-bottom:22px}
.s4-cta .s4-lead{text-align:center}
.s4-cta .s4-actions{justify-content:center}

/* ---------- footer ---------- */
.v4 .s4-foot{margin:0 clamp(10px,1.4vw,20px) clamp(10px,1.4vw,20px);padding:0;border:0;background:none}
.s4-foot-in{border-radius:clamp(22px,2.6vw,36px);background:#18191b;color:var(--s4-night-ink);padding:clamp(32px,4vw,64px) clamp(24px,4vw,64px) 24px;overflow:hidden}
.s4-foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
.s4-foot-grid a{display:block;color:var(--s4-night-ink-2);text-decoration:none;font-size:14.5px;padding:5px 0;transition:color .25s}
.s4-foot-grid a:hover{color:var(--s4-night-ink)}
.s4-foot .wordmark{color:var(--s4-night-ink)}
.s4-foot .s4-by{color:var(--s4-night-ink-3);border-color:rgba(244,241,234,.16)}
.s4-foot-brand p{margin:18px 0 10px;color:var(--s4-night-ink-3);font-size:14.5px;line-height:1.55}
.s4-foot-brand .s4-mail{color:var(--s4-glow)!important}
.s4-fh{margin:0 0 10px;font:500 12px var(--s4-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--s4-night-ink-3)}
.s4-giant{margin:clamp(40px,6vw,80px) 0 0;font:800 clamp(90px,24vw,360px)/.78 var(--s4-sans);letter-spacing:-.07em;color:rgba(244,241,234,.07);user-select:none;white-space:nowrap}
.s4-giant span{color:rgba(var(--s4-glow-rgb),.22)}
/* The giant word as a field of glinting characters (src/ascii-wordmark.js). The real text stays underneath for size and as the no-JS fallback. */
.s4-giant{position:relative;--ascii-font:var(--s4-mono)}
[data-ascii].ascii-on,[data-ascii].ascii-on *{color:transparent}
.ascii-cv{position:absolute;pointer-events:none}
.s4-foot-fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:18px;margin-top:-8px;border-top:1px solid rgba(244,241,234,.1);font-size:12.5px;color:var(--s4-night-ink-3)}

/* ---------- plans page ---------- */
.s4-page-hero{padding-block:clamp(56px,9vh,110px) clamp(32px,4vw,56px)}
.s4-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1vw,14px)}
.s4-way{padding:clamp(22px,2.4vw,32px);border-radius:24px;background:var(--s4-raised);box-shadow:inset 0 0 0 1px var(--s4-line)}
.s4-way.is-hot{box-shadow:inset 0 0 0 1.5px rgba(var(--s4-acc-rgb),.55)}
.s4-way-big{margin:0;font:500 clamp(40px,3.6vw,52px)/1 var(--s4-sans);letter-spacing:-.05em}
.s4-way-big small{font-size:14px;letter-spacing:0;color:var(--s4-ink-3);margin-left:6px;font-weight:400}
.s4-way-sub{margin:10px 0 18px;color:var(--s4-ink-2);font-size:14.5px;line-height:1.5}
.s4-way dl{margin:0;border-top:1px solid var(--s4-line-2)}
.s4-way dl div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--s4-line)}
.s4-way dt{color:var(--s4-ink-3);font-size:14px}
.s4-way dd{margin:0;font:500 13px var(--s4-mono);text-align:right}
.s4-tables{display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,80px);padding-top:0}
.s4-table{width:100%;border-collapse:collapse;font-size:15px}
.s4-table th{text-align:left;font:500 12px var(--s4-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--s4-ink-3);padding:0 0 12px;border-bottom:1px solid var(--s4-ink)}
.s4-table td{padding:16px 0;border-bottom:1px solid var(--s4-line-2);color:var(--s4-ink-2)}
.s4-table td:first-child{color:var(--s4-ink)}
.s4-table th:not(:first-child),.s4-table td:not(:first-child){text-align:right;font-family:var(--s4-mono);font-size:14px}
.s4-table tr.hi td{background:rgba(var(--s4-acc-rgb),.07)}
.s4-table tr td:last-child{color:var(--s4-ink);font-weight:500}

/* secondary pages pick up the type */
.v4 .page-title h1{font-weight:300;letter-spacing:-.05em}
.v4 .page-title h1 em{font-weight:500}

/* ---------- responsive ---------- */
@media(max-width:1100px){
 .s4-hero-grid{grid-template-columns:1fr}
 .s4-stage{max-width:640px}
 .s4-plans,.s4-ways{grid-template-columns:1fr;max-width:560px}
 .s4-t-name,.s4-t-num,.s4-t-list,.s4-t-fix{grid-column:1/-1}
 .s4-steps,.s4-steps--4{grid-template-columns:1fr 1fr}
 .s4-steps:before,.s4-steps:after{display:none}
 .s4-steps li{border-top:1px solid var(--s4-line-2)}
 .s4-head--split,.s4-faq,.s4-portal-in{grid-template-columns:1fr}
 .s4-head--split .s4-lead{justify-self:start}
 .s4-foot-grid{grid-template-columns:1fr 1fr}
 .s4-foot-brand{grid-column:1/-1}
}
@media(max-width:640px){
 .s4-chip-a{left:0;top:auto;bottom:62px}
 .s4-chip-c{display:none}
 .s4-site .b-hero{grid-template-columns:1fr}
 .s4-site .b-img{min-height:110px}
 .s4-promises,.s4-nums{grid-template-columns:1fr 1fr}
 .s4-promises{grid-template-columns:1fr}
 .s4-steps,.s4-steps--4{grid-template-columns:1fr}
 .s4-custom{flex-direction:column;align-items:flex-start}
 .s4-toggle{display:grid;width:100%}
 .s4-toggle button{padding:0 10px}
 .s4-table{font-size:13.5px}
 .s4-acct-row{flex-direction:column;gap:6px}
 .s4-acct-row b{text-align:left}
}
@media(prefers-reduced-motion:reduce){
 .s4-rv.is-wait{opacity:1;transform:none}
 .s4-mq-track{animation:none}
 .s4-site .b,.s4-chip,.s4-browser,.s4-h1 .ln>*,.s4-rise{animation:none!important;opacity:1}
}

/* 404 */
.v4 .s4-404{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:22px;padding-block:80px}
.v4 .s4-404 .s4-h1{margin:0}
@media(max-width:640px){.v4 .sync{margin-inline:6px}.v4 .sync .container{width:calc(100% - 28px)}.v4 .sync-grid>*,.v4 .sync-stage>*{min-width:0}}

/* Plans: two ways to pay */
.v4 .s4-ways--2{grid-template-columns:repeat(2,1fr);max-width:980px}
.v4 .s4-way-big{margin-top:6px}
.v4 .s4-way dl{margin-top:20px}
.v4 .s4-way dd{font:500 14px/1.45 var(--s4-sans);max-width:62%}
.v4 .s4-h2--sm{font-size:clamp(32px,3.6vw,52px);margin:6px 0 22px}
.v4 .s4-tables>div{max-width:980px}
@media(max-width:640px){.v4 .s4-toggle{grid-auto-columns:1fr}.v4 .s4-ways--2{grid-template-columns:1fr}.v4 .s4-way dd{max-width:58%}}

/* Hero showcase: one mock site, three fictional businesses */
.v4 .s4-stage{--bg:#fbf4e6;--ink:#5b2a17;--acc:#7a2e12;--card:#f6e6cc;--sub:#9a5b3a;--rule:#e9d6b8;--on:#fbf4e6;--serif:Georgia,serif}
.v4 .s4-stage[data-theme="kindred"]{--bg:#eef2f7;--ink:#22324b;--acc:#4a6fa5;--card:#dde6f1;--sub:#5f708b;--rule:#c9d6e6;--on:#f4f7fb;--serif:var(--s4-sans)}
.v4 .s4-stage[data-theme="north"]{--bg:#1d3a33;--ink:#eef0e7;--acc:#d27a42;--card:#27493f;--sub:#a5bcb2;--rule:#3a5d53;--on:#1d3a33;--serif:var(--s4-sans)}
.v4 .s4-site,.v4 .s4-site .logo,.v4 .s4-site .cta,.v4 .s4-site .b-h,.v4 .s4-site .b-eyebrow,.v4 .s4-site .b-btn,.v4 .s4-site .b-cards div,.v4 .s4-site .b-cards b,.v4 .s4-site .b-cards span,.v4 .s4-site .links i{transition:background-color .9s var(--s4-ease),color .9s var(--s4-ease),border-color .9s var(--s4-ease)}
.v4 .s4-site{background:var(--bg);color:var(--ink)}
.v4 .s4-site .logo{color:var(--acc);font-family:var(--serif);white-space:pre}
.v4 .s4-site .links i{background:var(--rule)}
.v4 .s4-site .cta{background:var(--acc);color:var(--on)}
.v4 .s4-site .b-eyebrow{color:var(--sub)}
.v4 .s4-site .b-h{color:var(--ink);font-family:var(--serif);white-space:pre-line;min-height:2.04em}
.v4 .s4-site .b-btn{border-color:var(--acc);color:var(--acc)}
.v4 .s4-site .b-cards div{background:var(--card)}
.v4 .s4-site .b-cards b{color:var(--ink)}.v4 .s4-site .b-cards span{color:var(--sub)}
.v4 .s4-stage[data-theme="kindred"] .s4-site .b-h{font-weight:300;letter-spacing:-.04em}
.v4 .s4-stage[data-theme="north"] .s4-site .logo{font-weight:800;letter-spacing:.12em;font-size:12px}
.v4 .s4-stage[data-theme="north"] .s4-site .b-h{font-weight:600;letter-spacing:-.045em}
.v4 .s4-stage[data-theme="north"] .s4-site .b-cards div,.v4 .s4-stage[data-theme="north"] .s4-site .b-img,.v4 .s4-stage[data-theme="north"] .s4-site .cta,.v4 .s4-stage[data-theme="north"] .s4-site .b-btn{border-radius:3px}
.v4 .s4-site .b-cards div,.v4 .s4-site .b-img,.v4 .s4-site .cta,.v4 .s4-site .b-btn{transition:border-radius .9s var(--s4-ease),background-color .9s var(--s4-ease),color .9s var(--s4-ease),border-color .9s var(--s4-ease)}
/* swapped text blurs out and back in */
.v4 .s4-site [data-v]{display:inline-block;transition:opacity .28s var(--s4-ease),filter .28s var(--s4-ease),transform .28s var(--s4-ease)}
.v4 .s4-site .b-h[data-v],.v4 .s4-site .b-eyebrow[data-v]{display:block}
.v4 .s4-stage.is-swap [data-v]{opacity:0;filter:blur(6px);transform:translateY(6px)}
.v4 .s4-chip [data-v]{transition:opacity .28s,filter .28s}
/* three hero artworks crossfade */
.v4 .s4-site .b-img{background:var(--card)}
.v4 .s4-site .art{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .9s var(--s4-ease),transform 1.2s var(--s4-ease)}
.v4 .s4-stage[data-theme="sunday"] .art-sunday,.v4 .s4-stage[data-theme="kindred"] .art-kindred,.v4 .s4-stage[data-theme="north"] .art-north{opacity:1;transform:none}
.v4 .art-sunday{background:linear-gradient(180deg,#f4c98b,#e9925b 70%,#c8613a)}
.v4 .art-kindred{background:radial-gradient(circle at 50% 55%,#f7f9fc,#cfdcee 70%)}
.v4 .art-kindred i{position:absolute;left:50%;top:50%;width:46px;height:62px;margin:-58px 0 0 -23px;border-radius:50%;background:linear-gradient(180deg,#9fb6d6,#5f84bb);opacity:.85;transform-origin:50% 100%;animation:s4-petal 9s linear infinite}
.v4 .art-kindred i:nth-child(2){transform:rotate(90deg)}.v4 .art-kindred i:nth-child(3){transform:rotate(180deg)}.v4 .art-kindred i:nth-child(4){transform:rotate(270deg)}
.v4 .art-kindred span{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#f4f7fb;color:#4a6fa5;font:italic 400 16px/30px Georgia,serif;text-align:center;box-shadow:0 6px 16px -6px rgba(34,50,75,.4)}
@keyframes s4-petal{from{rotate:0deg}to{rotate:360deg}}
.v4 .art-north{background:linear-gradient(180deg,#2f5a4e,#173029)}
.v4 .art-north .orb{position:absolute;right:16%;top:16%;width:46px;height:46px;border-radius:50%;background:#d27a42;animation:s4-orb 7s ease-in-out infinite alternate}
.v4 .art-north i{position:absolute;bottom:0;width:9%;background:linear-gradient(180deg,#5d8a7c,#2b4c43);border-radius:2px 2px 0 0;transform-origin:bottom;animation:s4-rise-bar 1.1s var(--s4-ease) both}
.v4 .art-north i:nth-of-type(1){left:12%;height:38%}.v4 .art-north i:nth-of-type(2){left:24%;height:58%;animation-delay:.08s}.v4 .art-north i:nth-of-type(3){left:36%;height:72%;animation-delay:.16s}.v4 .art-north i:nth-of-type(4){left:48%;height:50%;animation-delay:.24s}.v4 .art-north i:nth-of-type(5){left:60%;height:64%;animation-delay:.32s}.v4 .art-north i:nth-of-type(6){left:72%;height:44%;animation-delay:.4s}
.v4 .s4-stage:not([data-theme="north"]) .art-north i{animation:none;transform:scaleY(.2)}
@keyframes s4-orb{to{transform:translate(-14px,10px)}}
@keyframes s4-rise-bar{from{transform:scaleY(0)}to{transform:none}}
/* a light sweep across the browser on each switch */
.v4 .s4-browser:after{content:'';position:absolute;inset:-20% -60%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-100%);pointer-events:none}
.v4 .s4-stage.is-sweep .s4-browser:after{animation:s4-sweep 1.1s var(--s4-ease)}
@keyframes s4-sweep{to{transform:translateX(100%)}}
/* switcher with a timer bar */
.v4 .s4-switch{display:flex;justify-content:center;gap:6px;margin-top:-8px}
.v4 .s4-switch button{position:relative;overflow:hidden;border:0;background:transparent;color:var(--s4-ink-3);font:500 13px var(--s4-sans);padding:8px 14px 10px;border-radius:999px;cursor:pointer;transition:color .3s,background-color .3s}
.v4 .s4-switch button:hover{color:var(--s4-ink)}
.v4 .s4-switch button[aria-pressed="true"]{color:var(--s4-ink);background:var(--s4-card);box-shadow:0 0 0 1px var(--s4-line-2)}
.v4 .s4-switch button i{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--s4-line-2);opacity:0}
.v4 .s4-switch button i:after{content:'';position:absolute;inset:0;background:var(--s4-acc);transform:scaleX(0);transform-origin:left}
.v4 .s4-switch button[aria-pressed="true"] i{opacity:1}
.v4 .s4-switch.is-run button[aria-pressed="true"] i:after{animation:s4-timer var(--dur,5s) linear forwards}
.v4 .s4-switch.is-paused button i:after{animation-play-state:paused}
@keyframes s4-timer{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.v4 .art-kindred i,.v4 .art-north .orb,.v4 .art-north i{animation:none!important}.v4 .s4-site [data-v],.v4 .s4-site .art{transition:none}}
/* chips sit off the copy so the headline stays readable */
.v4 .s4-chip-a{left:auto;right:-18px;top:56%}
.v4 .s4-chip-c{right:auto;left:6%;bottom:6px}
.v4 .s4-chip-a{bottom:auto}
@media(max-width:640px){.v4 .s4-chip-a{top:auto;bottom:118px;right:-4px}.v4 .s4-chip-b{right:-4px}}

/* Plans: everything in each plan */
.v4 .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v4 .s4-compare{margin-top:clamp(14px,1.4vw,20px);border-radius:22px;background:var(--s4-card);box-shadow:0 0 0 1px var(--s4-line-2)}
.v4 .s4-compare summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(20px,2vw,28px) clamp(20px,2.4vw,32px);cursor:pointer}
.v4 .s4-compare summary::-webkit-details-marker{display:none}
.v4 .s4-compare summary b{display:block;font:500 clamp(18px,1.6vw,22px)/1.2 var(--s4-sans);letter-spacing:-.02em;color:var(--s4-ink)}
.v4 .s4-compare summary small{display:block;margin-top:4px;font:400 14px/1.4 var(--s4-sans);color:var(--s4-ink-3)}
.v4 .s4-compare[open] .s4-plus{transform:rotate(180deg);background:var(--s4-ink)}
.v4 .s4-compare[open] .s4-plus:before{background:var(--s4-bg)}
.v4 .s4-compare[open] .s4-plus:after{transform:translate(-50%,-50%) rotate(0);background:var(--s4-bg)}
.v4 .s4-compare[open] summary{border-bottom:1px solid var(--s4-line-2)}
.v4 .s4-cmp-scroll{padding:0 clamp(20px,2.4vw,32px) clamp(16px,2vw,24px);overflow-x:auto}
.v4 .s4-cmp{width:100%;border-collapse:collapse;font:400 14.5px/1.4 var(--s4-sans);color:var(--s4-ink-2)}
.v4 .s4-cmp thead th{position:sticky;top:0;padding:18px 10px 12px;text-align:center;font:500 12px var(--s4-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--s4-ink-3);background:var(--s4-card);border-bottom:1px solid var(--s4-ink)}
.v4 .s4-cmp thead th:nth-child(3){color:var(--s4-acc)}
.v4 .s4-cmp tbody th{text-align:left;font-weight:400;padding:12px 16px 12px 0;color:var(--s4-ink);width:46%}
.v4 .s4-cmp td{text-align:center;padding:12px 10px;width:18%}
.v4 .s4-cmp tbody tr:not(.s4-cmp-g){border-bottom:1px solid var(--s4-line-2)}
.v4 .s4-cmp td:nth-child(3){background:rgba(var(--s4-acc-rgb),.06)}
.v4 .s4-cmp-g th{padding:26px 0 8px;font:500 12px var(--s4-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--s4-ink-3);text-align:left}
.v4 .s4-yes{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(var(--s4-acc-rgb),.14);color:var(--s4-acc);font-size:12px;font-weight:600}
.v4 .s4-no{color:var(--s4-ink-3);opacity:.6}
@media(max-width:640px){.v4 .s4-cmp{font-size:13px}.v4 .s4-cmp tbody th{width:40%;padding-right:8px}.v4 .s4-cmp td{padding:10px 4px;width:20%}.v4 .s4-cmp thead th{font-size:10.5px;padding:14px 4px 10px;letter-spacing:.02em}}

/* ---------- try your name: the hero site rebuilds around the visitor's business ---------- */
.v4 .s4-try{margin:18px auto 0;max-width:420px;text-align:center}
.v4 .s4-try label{display:block;font:500 13px/1.3 var(--s4-sans);color:var(--s4-ink-2);margin-bottom:8px}
.v4 .s4-try-row{position:relative;display:flex;align-items:center;height:52px;border-radius:999px;background:rgba(249,248,245,.85);box-shadow:inset 0 0 0 1px var(--s4-line-3),0 18px 40px -26px rgba(var(--s4-acc-rgb),.55);transition:box-shadow .35s var(--s4-ease)}
.v4 .s4-try-row:focus-within{box-shadow:inset 0 0 0 1.5px var(--s4-acc),0 0 0 6px rgba(var(--s4-acc-rgb),.12),0 18px 40px -26px rgba(var(--s4-acc-rgb),.7)}
.v4 .s4-try input{all:unset;box-sizing:border-box;flex:1;min-width:0;height:100%;padding:0 52px 0 22px;font:500 16px var(--s4-sans);color:var(--s4-ink);text-align:left}
.v4 .s4-try input::placeholder{color:var(--s4-ink-3);opacity:.8}
.v4 .s4-try-go{position:absolute;right:6px;top:6px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--s4-ink);color:var(--s4-bg);transition:transform .45s var(--s4-ease),background .3s}
.v4 .s4-try-go .arrow{width:16px;height:16px}
.v4 .s4-show.is-named .s4-try-go{background:var(--s4-acc);transform:rotate(-45deg)}
.v4 .s4-try p{margin:8px 0 0;font-size:12px;color:var(--s4-ink-3)}
.v4 .s4-try input:focus-visible{outline:none}
.v4 .s4-site{position:relative}
.v4 .s4-site:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;background-image:linear-gradient(rgba(var(--s4-acc-rgb),.38) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--s4-acc-rgb),.38) 1px,transparent 1px);background-size:22px 22px}
.v4 .s4-stage.is-build .s4-site:after{animation:s4-blueprint 1.2s var(--s4-ease) both}
.v4 .s4-stage.is-build .s4-site .b{animation:s4-rebuild .8s var(--s4-ease) both}
.v4 .s4-stage.is-build .s4-site .b-nav{animation-delay:.05s}
.v4 .s4-stage.is-build .s4-site .b-hero{animation-delay:.2s}
.v4 .s4-stage.is-build .s4-site .b-cards{animation-delay:.35s}
@keyframes s4-blueprint{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes s4-rebuild{0%{opacity:.15;transform:translateY(10px) scale(.985);filter:blur(5px);outline:1px dashed rgba(var(--s4-acc-rgb),.6);outline-offset:-1px}60%{outline-color:rgba(var(--s4-acc-rgb),.25)}100%{opacity:1;transform:none;filter:none;outline-color:transparent}}
.v4 .s4-site .logo.is-typing:after{content:'';display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-.12em;background:currentColor;animation:s4-caret .6s steps(1) infinite}
@keyframes s4-caret{50%{opacity:0}}
.v4 .s4-site .logo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
@media(prefers-reduced-motion:reduce){.v4 .s4-stage.is-build .s4-site .b,.v4 .s4-stage.is-build .s4-site:after{animation:none!important}}
.v4 .s4-try-cta{display:none;margin-top:12px;font-weight:500;font-size:14.5px;color:var(--s4-acc);text-decoration:none;align-items:center;gap:8px}
.v4 .s4-try-cta .arrow{width:16px;height:16px;transition:transform .35s var(--s4-ease)}
.v4 .s4-try-cta:hover .arrow{transform:translateX(4px)}
.v4 .s4-show.is-named .s4-try-cta{display:inline-flex;animation:s4-rise .6s var(--s4-ease) both}

/* ---------- living background: Studio's canvas (transforms and opacity only) ---------- */
.s4-canvas{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.s4-grid{position:absolute;inset:-1px;background-image:linear-gradient(rgba(17,17,17,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.055) 1px,transparent 1px);background-size:64px 64px;background-position:center top;-webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 40%,transparent);mask-image:radial-gradient(closest-side at 50% 50%,#000 40%,transparent)}
.s4-light{position:absolute;left:0;top:0;width:720px;height:720px;margin:-360px 0 0 -360px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--s4-glow-rgb),.34),rgba(var(--s4-glow-rgb),.12) 45%,transparent 72%);transform:translate3d(var(--lx,70vw),var(--ly,30%),0);will-change:transform;opacity:.9}
.s4-canvas:not(.is-live) .s4-light{animation:s4-wander 26s ease-in-out infinite alternate}
@keyframes s4-wander{0%{transform:translate3d(62vw,280px,0)}50%{transform:translate3d(38vw,420px,0)}100%{transform:translate3d(80vw,560px,0)}}
.s4-frag{position:absolute;color:rgba(var(--s4-acc-rgb),.5);opacity:.55;will-change:transform;animation:s4-drift var(--t,34s) ease-in-out var(--d,0s) infinite alternate}
.s4-frag-btn{left:44%;top:9%;--t:38s}
.s4-frag-pin{left:5%;top:83%;--t:31s;--d:-9s}
.s4-frag-chat{left:37%;top:85%;--t:42s;--d:-14s}
.s4-frag-img{right:3%;top:80%;--t:36s;--d:-5s;opacity:.4}
.s4-frag-stars{left:30%;top:4%;--t:29s;--d:-18s}
.s4-frag-cursor{right:5%;top:12%;--t:33s;--d:-11s;color:rgba(17,17,17,.4)}
@keyframes s4-drift{0%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(14px,-18px,0) rotate(2deg)}100%{transform:translate3d(-10px,10px,0) rotate(-2deg)}}
.s4-canvas.is-off *{animation-play-state:paused}
@media(max-width:900px){.s4-grid{background-size:44px 44px}.s4-light{width:520px;height:520px;margin:-260px 0 0 -260px}.s4-frag-btn,.s4-frag-img,.s4-frag-chat{display:none}.s4-frag-stars{left:auto;right:8%;top:3%}}
@media(prefers-reduced-motion:reduce){.s4-frag,.s4-canvas .s4-light{animation:none!important}.s4-light{transform:translate3d(65vw,240px,0)}}

/* Home hero: three looks. One brand, sketched three ways on phones, picked by the visitor.
   Pagi (30 Oct 2026): light glass phones, a real photo in every look, gold marks the pick. */
@font-face{font-family:'Gloock';src:url(fonts/Gloock-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url(fonts/BricolageGrotesque-Variable.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Big Shoulders Display';src:url(fonts/BigShouldersDisplay-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}

.lk-hero{padding:clamp(36px,6vh,72px) 0 clamp(56px,8vh,96px)}
.lk-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:'lock lock' 'h ask';column-gap:clamp(32px,5vw,80px);align-items:end}
.lk-intro .s4-status{grid-area:lock;justify-self:start}
.lk-hero .s4-frag{display:none}
.lk-h1{grid-area:h;font-size:clamp(46px,7.2vw,124px);margin:0;overflow-wrap:anywhere}
.lk-h1 [data-hname]{transition:opacity .25s,filter .25s}
.lk-h1.is-swap [data-hname]{opacity:0;filter:blur(8px)}
.lk-ask{grid-area:ask;padding-bottom:.6em}
.lk-field{margin-top:22px}
.lk-field label{display:block;font:500 13.5px/1.3 var(--s4-sans);color:var(--s4-ink-2);margin-bottom:6px}
.lk-field input{all:unset;box-sizing:border-box;display:block;width:100%;padding:6px 0 10px;font:300 clamp(26px,2.5vw,36px)/1.15 var(--s4-sans);letter-spacing:-.03em;color:var(--s4-ink);border-bottom:1.5px solid var(--s4-line-3);transition:border-color .3s}
.lk-field input::placeholder{color:var(--s4-ink-3);opacity:.55}
.lk-field input:focus-visible{border-bottom-color:var(--s4-acc)}
.lk-field p{margin:8px 0 0;font-size:12.5px;color:var(--s4-ink-3)}

/* The row of looks */
.lk-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px);margin-top:clamp(40px,7vh,80px);align-items:start}
.lk{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:lk-in 1s calc(.35s + var(--i)*.12s) var(--s4-ease) both}
.lk-phone{position:relative;display:block;width:min(100%,292px);aspect-ratio:9/18.4;padding:8px;border-radius:42px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(20,30,45,.08),0 2px 3px rgba(20,30,45,.06),0 40px 60px -36px rgba(40,60,90,.45);transition:transform .7s var(--s4-ease),box-shadow .7s var(--s4-ease)}
.lk-phone:after{content:'';position:absolute;inset:-7px;border-radius:49px;box-shadow:0 0 0 1.5px var(--s4-glow),0 0 18px rgba(var(--s4-glow-rgb),.35);opacity:0;transform:scale(.98);transition:opacity .4s,transform .6s var(--s4-ease);pointer-events:none}
.lk input:checked~.lk-phone{transform:translateY(-14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(20,30,45,.08),0 2px 3px rgba(20,30,45,.06),0 60px 80px -40px rgba(40,60,90,.55)}
.lk input:checked~.lk-phone:after{opacity:1;transform:none}
.lk input:focus-visible~.lk-phone{outline:2px solid var(--s4-ink);outline-offset:12px}
@media(hover:hover) and (pointer:fine){.lk:hover .lk-phone{transform:translateY(-8px)}.lk:hover input:checked~.lk-phone{transform:translateY(-16px)}}

.lk-screen{position:relative;display:flex;flex-direction:column;height:100%;border-radius:34px;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font)}
.lk-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 0;font:600 11px/1 var(--s4-sans);letter-spacing:0}
.lk-sig{width:30px;height:9px;border-radius:3px;background:currentColor;opacity:.75;-webkit-mask:linear-gradient(90deg,#000 0 62%,transparent 62% 70%,#000 70%);mask:linear-gradient(90deg,#000 0 62%,transparent 62% 70%,#000 70%)}
.lk-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px 10px}
.lk-mark{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s,filter .25s,transform .35s var(--s4-ease)}
.lk-menu{flex:none;width:18px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.8}
.lk-art{position:relative;display:block;flex:0 0 40%;margin:0 12px;border-radius:18px;overflow:hidden;background:var(--rule)}
.lk-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk-head{display:block;padding:16px 18px 0;overflow-wrap:anywhere}
.lk-btns{display:flex;gap:7px;padding:14px 18px 0}
.lk-btns>span{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 13px;font:600 11.5px/1 var(--s4-sans);white-space:nowrap}
.lk-more{display:block;padding:18px 18px 0}
.lk-more-h{display:block;font-size:13px;margin-bottom:8px;opacity:.8}
.lk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lk-tiles i{display:block;aspect-ratio:1;position:relative;overflow:hidden;background:var(--rule) center/cover no-repeat}
.lk-warisan .lk-tiles i{box-shadow:inset 0 0 0 1px var(--acc);border-radius:2px}
.lk-segar .lk-more-h{font-weight:700;letter-spacing:-.02em}
.lk-segar .lk-tiles i{border-radius:16px}
.lk-segar .lk-tiles i:nth-child(2){border-radius:50%}
.lk-tegas .lk-more-h{font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.lk-tegas .lk-tiles i{box-shadow:inset 0 0 0 1px rgba(199,204,212,.18);filter:grayscale(.2) contrast(1.05)}
.lk-tegas .lk-tiles i:before{content:'';position:absolute;left:0;top:0;width:12px;height:2px;background:var(--acc)}
.lk-tegas .lk-tiles i:after{content:'';position:absolute;left:0;top:0;width:2px;height:12px;background:var(--acc)}
.lk-info{display:flex;justify-content:space-between;margin:auto 18px 20px;padding-top:11px;border-top:1px solid var(--rule);font:500 11px/1.2 var(--s4-sans);opacity:.85}
.lk.is-swap .lk-mark,.lk.is-swap [data-initial]{opacity:0;filter:blur(6px);transform:translateY(4px)}
[data-initial]{display:inline-block;transition:opacity .25s,filter .25s,transform .35s var(--s4-ease)}

/* Warisan: heritage. Serif, kopi and kunyit, a full-bleed photo. */
.lk-warisan{--bg:#f4ecdf;--ink:#3b1f16;--acc:#d6a23c;--rule:rgba(59,31,22,.16);--font:'Gloock',Georgia,serif}
.lk-warisan .lk-mark{font-size:17px;letter-spacing:.01em}
.lk-warisan .lk-mark:before{content:'';display:inline-block;width:7px;height:7px;margin:0 8px 2px 0;background:var(--acc);transform:rotate(45deg)}
.lk-warisan .lk-art{margin:0;border-radius:0;flex-basis:42%}
.lk-warisan .lk-head{font-size:25px;line-height:1.05;letter-spacing:-.01em}
.lk-warisan .lk-b1{background:var(--ink);color:var(--bg);border-radius:3px}
.lk-warisan .lk-b2{box-shadow:inset 0 0 0 1px var(--ink);border-radius:3px}

/* Segar: fresh. Round and heavy type, pandan and jambu, a rounded photo. */
.lk-segar{--bg:#fbfaf3;--ink:#173d29;--acc:#2f8a57;--rule:rgba(23,61,41,.14);--font:'Bricolage Grotesque',var(--s4-sans)}
.lk-segar .lk-mark{font-size:19px;font-weight:800;letter-spacing:-.04em;text-transform:lowercase}
.lk-segar .lk-mark:after{content:'.';color:#e0708c}
.lk-segar .lk-art{border-radius:24px}
.lk-segar .lk-head{font-size:24px;font-weight:700;line-height:1.02;letter-spacing:-.04em}
.lk-segar .lk-b1{background:var(--acc);color:#fff;border-radius:999px}
.lk-segar .lk-b2{background:#e9ef7a;color:var(--ink);border-radius:999px}

/* Tegas: bold. Condensed capitals on night blue, a full-bleed photo and a running ticker. */
.lk-tegas{--bg:#0f1420;--ink:#eef1f6;--acc:#3e6bff;--rule:rgba(238,241,246,.16);--font:'Big Shoulders Display',var(--s4-sans)}
.lk-tegas .lk-mark{font-size:19px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.lk-tegas .lk-mark:before{content:'';display:inline-block;width:9px;height:9px;margin:0 8px 1px 0;background:var(--acc)}
.lk-tegas .lk-art{margin:0;border-radius:0;flex-basis:46%}
.lk-tegas .lk-art img{filter:saturate(1.1) contrast(1.05)}
.lk-tick{position:absolute;left:0;right:0;bottom:0;height:26px;display:flex;align-items:center;overflow:hidden;background:var(--acc);color:#fff;font:800 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.lk-tick span{display:inline-block;padding-left:8px;animation:lk-tick 16s linear infinite}
.lk-tegas .lk-head{font-size:31px;font-weight:800;line-height:.95;text-transform:uppercase;letter-spacing:.005em}
.lk-tegas .lk-b1{background:var(--acc);color:#fff}
.lk-tegas .lk-b2{box-shadow:inset 0 0 0 1px #c7ccd4;color:var(--ink)}

/* Caption: the name of the look, what it says, its colours */
.lk-cap{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:22px;text-align:center}
.lk-name{display:inline-flex;align-items:center;gap:8px}
.lk-name b{font:500 18px/1.2 var(--s4-sans);letter-spacing:-.02em}
.lk-ok{width:18px;height:18px;border-radius:50%;background:var(--s4-acc);position:relative;transform:scale(0);transition:transform .45s var(--s4-ease)}
.lk-ok:after{content:'';position:absolute;left:5px;top:5px;width:7px;height:4px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
.lk input:checked~.lk-cap .lk-ok{transform:scale(1)}
.lk-desc{font-size:14px;color:var(--s4-ink-3)}
.lk-sw{display:flex;gap:14px;margin-top:10px}
.lk-sw i{display:flex;flex-direction:column;align-items:center;gap:6px;font-style:normal;font-size:11.5px;color:var(--s4-ink-3)}
.lk-sw i:before{content:'';width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(17,17,17,.12)}

.lk-pick{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(32px,5vh,52px);text-align:center}
.lk-pick p{margin:0;font-size:14.5px;color:var(--s4-ink-2)}
.lk-pick .lk-credit{font-size:12px;color:var(--s4-ink-3);max-width:60ch}
.lk-links{display:flex;gap:22px}

@keyframes lk-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes lk-tick{to{transform:translateX(-50%)}}

/* Animations run only while the hero is on screen */
.lk-hero.is-off .lk-tick span{animation-play-state:paused}

@media(max-width:980px){
 .lk-intro{grid-template-columns:1fr;grid-template-areas:'lock' 'h' 'ask'}
 .lk-ask{padding:22px 0 0;max-width:560px}
}
@media(max-width:820px){
 .lk-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--s4-gut)*-1);padding:22px var(--s4-gut) 10px;scrollbar-width:none;align-items:flex-start}
 .lk-row::-webkit-scrollbar{display:none}
 .lk{flex:0 0 min(74%,300px);scroll-snap-align:center}
 .lk-phone{width:100%}
}
@media(prefers-reduced-motion:reduce){
 .lk,.lk-tick span{animation:none!important}
 .lk-phone,.lk-mark,[data-initial],.lk-ok{transition:none}
}

/* Guides: long-form reading pages in the v4 look. New classes only; nothing above is overridden. */
.s4-guide{padding-block:clamp(40px,7vh,88px) clamp(24px,4vw,48px)}
.s4-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 clamp(28px,4vw,44px);padding:0;font:500 13px/1.4 var(--s4-sans);color:var(--s4-ink-3)}
.s4-crumbs li+li:before{content:"/";margin-right:10px;color:var(--s4-line-3)}
.s4-crumbs a{color:var(--s4-ink-2);text-decoration:none}
.s4-crumbs a:hover{color:var(--s4-ink);text-decoration:underline}
.s4-gh1{font:300 clamp(38px,5.4vw,76px)/1 var(--s4-sans);letter-spacing:-.045em;margin:0 0 18px;text-wrap:balance}
.s4-gmeta{font:500 13px/1.5 var(--s4-mono);color:var(--s4-ink-3);margin:0 0 clamp(24px,3vw,36px)}
.s4-gans{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--s4-ink);max-width:62ch;margin:0 0 clamp(32px,4vw,48px);padding-left:18px;border-left:2px solid var(--s4-acc)}
.s4-gans b{font-weight:600}
.s4-prose{max-width:72ch;color:var(--s4-ink-2);font-size:17px;line-height:1.7}
.s4-prose h2{font:400 clamp(26px,2.6vw,34px)/1.15 var(--s4-sans);letter-spacing:-.03em;color:var(--s4-ink);margin:clamp(40px,5vw,60px) 0 14px}
.s4-prose p{margin:0 0 16px}
.s4-prose ul,.s4-prose ol{margin:0 0 18px;padding-left:22px}
.s4-prose li{margin:0 0 8px}
.s4-prose b{color:var(--s4-ink);font-weight:600}
.s4-prose a,.s4-gtable a{color:var(--s4-ink);text-decoration:underline;text-decoration-color:var(--s4-line-3);text-underline-offset:3px}
.s4-prose a:hover,.s4-gtable a:hover{text-decoration-color:currentColor}
.s4-gscroll{overflow-x:auto;margin:6px 0 20px;-webkit-overflow-scrolling:touch}
.s4-gtable{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.45}
.s4-gtable th,.s4-gtable td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--s4-line-2)}
.s4-gtable thead th{font:500 12px/1.3 var(--s4-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--s4-ink-3);border-bottom-color:var(--s4-ink)}
.s4-gtable tbody th{font-weight:500;color:var(--s4-ink)}
.s4-gtable td{color:var(--s4-ink-2)}
.s4-gsources{font-size:15px}
.s4-gbm{margin:clamp(36px,4vw,52px) 0 0;padding:20px 22px;background:var(--s4-raised);border:1px solid var(--s4-line-2);border-radius:14px}
.s4-gbm .s4-k{margin-bottom:8px}
.s4-gbm p:last-child{margin:0}
.s4-glist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.s4-gcard{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center;padding:22px 24px;background:var(--s4-card);border:1px solid var(--s4-line-2);border-radius:16px;color:var(--s4-ink);text-decoration:none;transition:border-color .2s}
.s4-gcard:hover{border-color:var(--s4-line-3)}
.s4-gcard b{grid-column:1;font:500 clamp(19px,1.8vw,23px)/1.25 var(--s4-sans);letter-spacing:-.02em}
.s4-gcard span{grid-column:1;color:var(--s4-ink-2);line-height:1.5}
.s4-gcard small{grid-column:1;font:500 12px/1.4 var(--s4-mono);color:var(--s4-ink-3)}
.s4-gcard .arrow{grid-column:2;grid-row:1/4;width:22px;height:22px}
@media (max-width:560px){.s4-gcard{grid-template-columns:1fr}.s4-gcard .arrow{display:none}.s4-prose{font-size:16px}}