/* design-system.css */
/* Self-hosted Google Fonts. License: SIL Open Font License 1.1.
   The shipped files contain wght 200-800 (Manrope) / 300-700 (Space Grotesk).
   This stylesheet exposes the requested design ranges. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Shared design tokens. Page styles map their existing roles to this palette. */
:root {
  --jbit-font-body: 'Manrope', Arial, sans-serif;
  --jbit-font-display: 'Space Grotesk', 'Manrope', sans-serif;
  --jbit-font-editorial: Georgia, serif;
  --font: var(--jbit-font-body);
  --display: var(--jbit-font-display);

  --jbit-red: #d9363c;
  --jbit-red-hover: #bd242d;
  --jbit-symbol: #f14b47;
  --jbit-home-bg: #131212;
  --jbit-home-surface: #1d1c1c;
  --jbit-home-line: #383736;
  --jbit-home-text: #f1efee;
  --jbit-home-muted: #afadac;
  --jbit-home-accent: #ff6b63;
  --jbit-home-cream: #ebe9e9;
  --jbit-case-bg: #171313;
  --jbit-case-surface: #231c1d;
  --jbit-case-line: #4a3736;
  --jbit-case-text: #f5eee8;
  --jbit-case-muted: #c3b6af;
  --jbit-case-accent: #ff756b;
  --jbit-case-cream: #f0ebe4;
  --jbit-case-ink: #2b2021;
  --jbit-paper: #f2ede6;
  --jbit-paper-ink: #302426;
  --jbit-paper-copy: #574a47;
  --jbit-paper-line: #d7cbc1;
  --brand-red: var(--jbit-red);
  --brand-red-hover: var(--jbit-red-hover);

  --jbit-radius-small: 4px;
  --jbit-radius-control: 5px;
  --jbit-radius-card: 10px;
  --jbit-radius-feature: 14px;
  --jbit-motion-fast: .2s;
  --jbit-motion-medium: .3s;
  --jbit-motion-slow: .4s;
  --jbit-ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* styles.css */
.orbit-two{display:none}
.project-form input::placeholder,.project-form textarea::placeholder{color:#504745!important}.form-required{color:#48403e!important}.example-note{color:#98918f!important}
:root{--bg:var(--jbit-home-bg);--surface:var(--jbit-home-surface);--line:var(--jbit-home-line);--text:var(--jbit-home-text);--muted:var(--jbit-home-muted);--accent:var(--jbit-home-accent);--cream:var(--jbit-home-cream);--purple:#b5a2e0;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:wait}::selection{color:var(--bg);background:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:6px}img,svg{max-width:100%}svg{display:block}[hidden]{display:none!important}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.1;letter-spacing:-.055em}h2{font-size:clamp(35px,3.5vw,53px)}h2 .muted,.muted{color:#888685}em{font-weight:inherit;font-style:normal;color:var(--accent)}.section-shell{width:min(1320px,calc(100% - 112px));margin-inline:auto}.section-space{padding-block:112px}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:700;display:flex;align-items:center;gap:10px;line-height:1.6}.section-index{color:var(--accent);margin-bottom:27px}.status-dot{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #ff6b6309}.button{display:inline-flex;justify-content:center;align-items:center;gap:30px;min-height:54px;padding:13px 24px;border:1px solid transparent;border-radius:var(--jbit-radius-control);font-size:12px;font-weight:700;line-height:1.6;transition:background var(--jbit-motion-fast),transform var(--jbit-motion-fast),border-color var(--jbit-motion-fast)}.button>span:last-child:not(:first-child){font-size:20px;line-height:1}.button-primary{background:var(--accent);color:var(--bg)}.button-light{background:var(--text);color:var(--bg)}.button-small{min-height:43px;padding:10px 18px;font-size:11px;gap:24px}.button-dark{background:var(--bg);color:var(--text)}.button-outline{border-color:currentColor;background:transparent}.text-link{display:inline-flex;align-items:center;gap:16px;font-size:12px;font-weight:600}.text-link>span:last-child{font-size:22px}.skip-link{position:fixed;top:12px;left:12px;z-index:100;transform:translateY(-200%);background:var(--accent);color:var(--bg);padding:10px 20px}.skip-link:focus{transform:translateY(0)}
.site-header{height:100px;width:min(1440px,100%);padding-inline:56px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:20;border-bottom:1px solid #ffffff0a}.brand{display:inline-flex;align-items:center;gap:12px}.brand-symbol{display:grid;grid-template:repeat(2,10px)/repeat(2,10px);gap:4px;transform:rotate(-8deg);color:var(--accent)}.brand-symbol i{background:currentColor}.brand-symbol i:nth-child(2){border-radius:0 6px 0 0}.brand-symbol i:nth-child(3){border-radius:0 0 0 6px}.brand-name{font-family:var(--display);font-size:31px;font-weight:700;letter-spacing:-.06em;line-height:1}.brand-sub{display:block;letter-spacing:.18em;font-size:6px;line-height:2.3;font-weight:500;color:#c3c1c0}.desktop-nav{display:flex;gap:29px;margin-left:58px}.desktop-nav a{font-size:11px;font-weight:500;color:#c4c2c2;transition:color var(--jbit-motion-fast)}.desktop-nav a:hover{color:var(--accent)}.header-actions{display:flex;align-items:center;gap:24px}.language{border:0;background:none;padding:8px 0;font-size:10px;font-weight:700}.language span{margin-left:6px;color:var(--muted)}.menu-toggle{display:none;border:0;background:transparent;width:40px;height:40px;padding:10px}.menu-toggle span{display:block;height:1px;background:var(--text);margin:6px 0}.mobile-nav{position:absolute;left:0;right:0;top:100%;background:#1b1b1a;border-bottom:1px solid var(--line);padding:24px}.mobile-nav a{display:block;padding:10px 0;font-size:17px}
.hero{display:grid;grid-template-columns:1.09fr 1fr;gap:20px;min-height:674px;align-items:center;position:relative;padding-block:66px 68px}.hero-copy{position:relative;z-index:2}.hero .eyebrow{color:#b8b5b4;font-size:9px;letter-spacing:.115em;margin-bottom:27px}.hero h1{font-size:clamp(64px,6.65vw,97px);line-height:1.04;letter-spacing:-.07em;white-space:nowrap}.hero h1 em{position:relative}.hero-description{font-size:14px;color:#b1aeae;max-width:402px;line-height:1.85;margin-top:30px}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:34px}.hero-actions .button{gap:22px}.hero-actions .text-link{font-size:10px;gap:12px}.hero-note{display:flex;align-items:center;gap:10px;font-size:9px;color:#827f7f;margin-top:38px}.tiny-cross{color:var(--accent);font-size:19px;line-height:1}.hero-art{height:500px;position:relative;isolation:isolate;margin:0 -18px 0 0;perspective:1000px}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#c2bab907 1px,transparent 1px),linear-gradient(90deg,#c2bab907 1px,transparent 1px);background-size:35px 35px;mask-image:radial-gradient(ellipse,#000,transparent 70%)}.art-glow{position:absolute;inset:25% 10% 12%;background:radial-gradient(ellipse at center,#ff6b6316,transparent 68%);filter:blur(25px);z-index:-1}.orbit{position:absolute;left:9%;top:8%;width:81%;height:84%;border:1px solid #a79a9730;border-radius:50%;transform:rotate(-24deg)}.orbit-one:before{content:'';position:absolute;top:5%;right:23%;width:6px;height:6px;background:var(--accent);box-shadow:0 0 15px #ff6b6388;border-radius:50%}.orbit-two{top:10%;left:3%;width:96%;height:78%;transform:rotate(28deg);border-color:#a79a9711}.art-coordinate{position:absolute;top:14px;right:19px;color:#5a5655;font-size:8px;font-family:var(--display);letter-spacing:.1em}.system-window{position:absolute;top:103px;left:9%;width:82%;border:1px solid #5751509c;border-radius:12px;background:linear-gradient(150deg,#292727,#1a1918 85%);box-shadow:0 35px 85px #0008,0 0 50px #ff6b6305;transform:rotate(-5deg);overflow:hidden}.window-bar{height:43px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #93878420;padding:0 19px}.window-wordmark{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.04em}.window-wordmark>span{font-family:var(--font);color:#878281;font-size:8px;font-weight:400;letter-spacing:0}.window-dots{display:flex;gap:5px}.window-dots i{height:4px;width:4px;border-radius:50%;background:#6d6866}.window-main{padding:23px 22px 15px}.window-eyebrow{font-size:6px;color:#9c9795;letter-spacing:.14em}.window-headline{font-family:var(--display);font-size:25px;letter-spacing:-.045em;margin-top:4px}.system-illustration{height:174px;position:relative}.system-lines{height:100%;width:100%;position:absolute;inset:0;overflow:visible}.system-lines path{fill:none;stroke:#95868280;stroke-width:1;stroke-dasharray:4 5}.system-node{position:absolute;width:45px;height:45px;background:#282625;border:1px solid #554e4c;border-radius:9px;display:grid;place-items:center;box-shadow:0 5px 15px #0003;color:#a59c9a}.system-node svg{width:23px;height:23px}.node-one{top:16px;left:7%}.node-two{top:16px;right:7%;color:var(--purple);border-color:#b5a2e04a;background:#28272c}.node-three{bottom:1px;left:7%}.node-four{bottom:1px;right:7%}.system-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:16px;background:var(--accent);box-shadow:0 0 0 11px #ff6b6308,0 0 0 23px #ff6b6304;display:grid;place-items:center}.system-center .brand-symbol{color:#2b2624;grid-template:repeat(2,13px)/repeat(2,13px);gap:4px}.system-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #81787625;padding-top:15px;margin-top:17px;gap:8px}.system-bottom>span:first-child{display:flex;align-items:center;gap:7px;font-size:7px;color:#ada7a5}.system-bottom .status-dot{width:4px;height:4px}.demo-caption{font-size:5px;letter-spacing:.07em;color:#6d6766}.floating-label{position:absolute;z-index:3;border:1px solid #454241;border-radius:8px;background:linear-gradient(120deg,#2f2d2c,#222121);box-shadow:0 15px 24px #0004;display:flex;align-items:center;gap:11px;padding:12px 18px;font-size:11px;font-weight:500}.label-icon{display:grid;place-items:center;width:29px;height:29px;background:#3a3838;border-radius:7px;font-size:20px}.label-icon.purple{background:#b5a2e01b;color:var(--purple)}.label-icon.accent{background:#ff6b631a;color:var(--accent)}.label-web{top:55px;left:0;transform:rotate(-5deg);padding-right:23px}.label-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;margin-left:22px}.label-software{right:-6px;top:235px;transform:rotate(5deg)}.label-automation{left:16%;bottom:26px;transform:rotate(3deg)}.mini-flow{font-size:7px;color:#857c7a;margin-left:3px;white-space:nowrap}.art-bottom-note{display:flex;justify-content:space-between;position:absolute;bottom:0;left:8%;right:3%;font-size:6px;letter-spacing:.13em;color:#686361}.art-bottom-note>span:first-child{color:#ada5a3}.expertise-strip{border-block:1px solid var(--line);background:#191818}.strip-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px}.strip-inner>span{color:#979392;font-size:10px}.strip-inner>div{display:flex;gap:38px}.strip-inner>div>span{font-family:var(--display);font-size:15px;display:flex;align-items:center;gap:10px;letter-spacing:-.02em}.strip-inner i{font-style:normal;color:var(--accent);font-size:20px}.strip-inner b{font-weight:400}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:70px;margin-bottom:48px}.section-heading>div{flex:1}.section-heading>p{width:280px;flex-shrink:0;color:var(--muted);font-size:12px;line-height:1.9;padding-bottom:4px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card{background:linear-gradient(130deg,#1f1e1d,#1b1a19);border:1px solid #373434;border-radius:8px;padding:30px 28px 0;display:flex;flex-direction:column;overflow:hidden;position:relative;transition:border-color .25s,transform .25s}.service-card-featured{background:linear-gradient(135deg,#272524,#1c1a19);border-color:#584f4d}.service-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.service-icon{width:41px;height:41px;color:var(--accent);background:#ff6b6309;border:1px solid #ff6b6320;border-radius:9px;display:grid;place-items:center}.service-icon svg{width:27px}.service-number{font-family:var(--display);font-size:10px;color:#797574}.service-card h3{font-size:29px;letter-spacing:-.04em;line-height:1.2}.service-card>p{font-size:11px;line-height:1.95;color:#aaa6a5;margin-top:20px;max-width:300px}.tag-list{list-style:none;display:flex;gap:5px;flex-wrap:wrap;padding:0;margin:23px 0 29px}.tag-list li{font-size:7px;color:#a4a09f;border:1px solid #3e3a39;padding:4px 8px;border-radius:3px;line-height:1.5}.service-link{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #3f3b3a;padding-block:18px;margin-top:auto;font-size:10px}.service-link>span:last-child{font-size:22px;color:var(--accent)}.service-footnote{display:flex;gap:12px;align-items:center;font-size:10px;color:#908c8b;margin-top:24px}.service-footnote>span{color:var(--accent);font-size:20px}
.showcase{background:#1d1c1c;border-block:1px solid #353231}.showcase .section-heading{margin-bottom:40px}.showcase-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}.showcase-tabs button{border:0;border-top:1px solid #494544;background:transparent;text-align:left;padding:18px 0;display:flex;align-items:center;gap:13px;color:#878281;position:relative;font-size:11px}.showcase-tabs button[aria-selected=true]{border-color:var(--accent);color:var(--text)}.showcase-tabs button>span:first-child{font-family:var(--display);font-size:8px;color:#7a7573}.showcase-tabs button[aria-selected=true]>span:first-child{color:var(--accent)}.showcase-tabs b{font-weight:500}.tab-arrow{margin-left:auto;font-size:21px}.showcase-tabs button[aria-selected=true] .tab-arrow{color:var(--accent)}.demo-panel{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid #494443;background:#171616;border-radius:9px;overflow:hidden;min-height:425px}.demo-copy{padding:45px 38px;display:flex;flex-direction:column;align-items:flex-start}.demo-kicker{color:#958f8d;font-size:8px;letter-spacing:.1em;margin-bottom:27px}.demo-copy h3{font-size:36px;line-height:1.15}.demo-copy>p{font-size:11px;color:#9f9a99;line-height:1.9;margin-top:20px;max-width:290px}.device-switch{display:inline-flex;margin-top:24px;padding:3px;border:1px solid #44403f;border-radius:var(--jbit-radius-control);gap:3px}.device-switch button{font-size:9px;border:0;border-radius:3px;background:transparent;color:#918b89;padding:7px 14px}.device-switch button[aria-pressed=true]{background:#ff6b63;color:#1c1817}.example-note{display:block;color:#756f6e;font-size:8px;line-height:1.6;margin-top:auto;padding-top:25px;max-width:290px}.web-preview-stage{display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 60% 60%,#b7adaa40,transparent 70%),#3b3635;padding:38px 0 38px 35px}.web-preview{border-radius:8px;box-shadow:0 25px 40px #0004;width:110%;min-height:341px;background:#e7e5d8;transform:rotate(-4deg) translateX(15px);transform-origin:center;overflow:hidden;transition:width .4s,transform .4s;flex-shrink:0;color:#272524}.preview-browser{display:flex;gap:4px;align-items:center;background:#f2f0e6;height:25px;padding:0 11px}.preview-browser span{height:4px;width:4px;border-radius:50%;background:#b1aead}.preview-browser i{font-size:6px;color:#8b8786;font-style:normal;margin-left:80px}.nordwerk-site{padding:20px 25px}.nordwerk-nav{display:flex;justify-content:space-between;align-items:center}.nordwerk-nav strong{font-size:13px;font-weight:800;letter-spacing:-.06em}.nordwerk-nav strong>span{font-size:6px;vertical-align:top;margin-left:2px}.nordwerk-nav>span{font-size:6px;margin-right:45px}.nordwerk-main{position:relative;padding-top:37px;min-height:261px;isolation:isolate}.nordwerk-eyebrow{font-size:6px;letter-spacing:.12em;position:relative;z-index:2}.nordwerk-main h4{font-family:var(--display);font-size:44px;letter-spacing:-.06em;line-height:1.06;margin-top:12px;z-index:2;position:relative;max-width:240px}.nordwerk-bottom{position:absolute;bottom:6px;left:0;font-size:7px;display:flex;align-items:center;gap:38px}.nordwerk-bottom b{border:1px solid #79747380;border-radius:50%;font-size:12px;display:grid;place-items:center;width:24px;height:24px}.architecture{position:absolute;width:250px;right:0;top:30px;height:246px;overflow:hidden;z-index:0;background:#bdb9b8}.arch-wall{position:absolute;inset:0;background:linear-gradient(110deg,#c3c0bf,#928c8a);clip-path:polygon(30% 0,100% 0,100% 100%,30% 100%)}.arch-window{position:absolute;left:46%;width:51%;top:18%;bottom:29%;background:linear-gradient(130deg,#373433,#242120);border:6px solid #7e7977;box-shadow:-10px 0 0 #a29c9b}.arch-window:after{content:'';position:absolute;left:49%;top:0;bottom:0;border-left:2px solid #7e7977}.arch-floor{position:absolute;bottom:0;left:0;right:0;top:73%;background:#7d7776;clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}.arch-sun{position:absolute;width:95px;height:160px;left:-20px;top:-10px;transform:rotate(30deg);background:#f5cfce70}.arch-bench{position:absolute;bottom:40px;right:-10px;width:140px;height:21px;background:#665d3f;box-shadow:0 8px 0 #423d3b;transform:skewY(-4deg)}.arch-bench:after{content:'';position:absolute;top:22px;left:10px;width:6px;height:32px;background:#433e3d;box-shadow:114px 0 0 #433e3d}.arch-shadow{position:absolute;bottom:0;width:150px;right:0;height:60px;background:#413c3b50;clip-path:polygon(0 0,85% 0,100% 100%,20% 100%)}.web-preview[data-view=mobile]{width:235px;transform:rotate(-4deg) translateX(-15px);border:5px solid #131110;border-radius:23px;min-height:360px}.web-preview[data-view=mobile] .preview-browser{height:20px}.web-preview[data-view=mobile] .preview-browser i{margin-left:20px}.web-preview[data-view=mobile] .nordwerk-site{padding:14px}.web-preview[data-view=mobile] .nordwerk-nav>span{display:none}.web-preview[data-view=mobile] .nordwerk-main{padding-top:25px;min-height:290px}.web-preview[data-view=mobile] .nordwerk-main h4{font-size:34px}.web-preview[data-view=mobile] .architecture{width:145px;height:160px;top:135px;right:-5px}.web-preview[data-view=mobile] .nordwerk-bottom{font-size:6px;bottom:1px;gap:10px;max-width:80px;line-height:1.6;z-index:3}.web-preview[data-view=mobile] .nordwerk-bottom b{display:none}.workflow-preview,.board-preview{margin:35px;align-self:center;background:#242221;border:1px solid #4d4746;border-radius:9px;padding:24px;min-width:0}.workflow-header{display:flex;align-items:center;gap:9px;font-size:11px}.simulation-label{margin-left:auto;font-size:7px;color:#86807f;border:1px solid #504a48;padding:2px 6px;border-radius:3px}.flow-steps{list-style:none;padding:0;margin:24px 0}.flow-steps li{display:flex;align-items:center;gap:14px;padding:16px 0;position:relative;transition:color .3s}.flow-steps li:not(:last-child):after{content:'';position:absolute;top:60px;left:17px;width:1px;height:20px;background:#5b5452}.flow-step-icon{width:35px;height:35px;border:1px solid #585250;display:grid;place-items:center;border-radius:7px;color:#99908d;flex-shrink:0}.flow-steps li>div{display:flex;flex-direction:column}.flow-steps b{font-size:10px;font-weight:500}.flow-steps li>div>span{font-size:8px;color:#86807f;margin-top:2px}.flow-state{margin-left:auto;color:#776e6c}.flow-steps .is-complete .flow-step-icon,.flow-steps .is-active .flow-step-icon{background:var(--accent);color:var(--bg);border-color:var(--accent)}.flow-steps .is-complete .flow-state,.flow-steps .is-active .flow-state{color:var(--accent)}.flow-result{font-size:9px;color:#b0a7a5;border-top:1px solid #4c4543;padding-top:16px;min-height:40px}.demo-copy>.button{margin-top:24px}.board-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #4c4645;padding-bottom:16px}.mini-brand{font-size:14px;font-family:var(--display);font-weight:600}.mini-brand i{font-size:8px;font-family:var(--font);font-weight:400;color:#948d8c;font-style:normal;margin-left:4px}.board-avatar{width:24px;height:24px;font-size:7px;background:#484240;border:1px solid #6a615e;border-radius:50%;display:grid;place-items:center}.board-heading{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.board-heading>div>span{font-size:6px;letter-spacing:.1em;color:#968e8c}.board-heading h4{font-size:24px;margin-top:4px}.board-count{font-family:var(--display);color:#a59c9a;font-size:30px}.board-filters{display:flex;gap:4px;margin-top:20px}.board-filters button{border:0;border-radius:4px;background:transparent;font-size:8px;color:#a9a3a1;padding:6px 13px}.board-filters button[aria-pressed=true]{color:var(--bg);background:var(--accent)}.board-rows{margin-top:15px}.board-rows>div{display:flex;align-items:center;gap:10px;padding:13px 0;border-top:1px solid #474140}.project-tile{height:31px;width:31px;border-radius:6px;display:grid;place-items:center;font-size:11px;flex-shrink:0}.tile-accent{color:var(--accent);background:#ff6b6317}.tile-purple{color:var(--purple);background:#b5a2e01c}.tile-gray{color:#a39d9c;background:#a39d9c20}.board-rows>div>div{display:flex;flex-direction:column}.board-rows b{font-size:9px;font-weight:500}.board-rows small{font-size:7px;color:#8d8583}.project-status{font-size:6px;color:#d8c99d;border:1px solid #a3956450;border-radius:3px;padding:3px 6px;margin-left:auto;white-space:nowrap}.status-done{color:var(--accent);border-color:#ff6b6330}.board-live{font-size:8px;color:#9f9896;min-height:16px;margin-top:10px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:63px}.process-grid article>span{border-top:1px solid #484443;padding-top:17px;display:flex;justify-content:space-between;font-family:var(--display);font-size:11px;color:var(--accent)}.process-grid article>span>span{font-size:18px;color:#837c7a}.process-grid h3{font-size:24px;margin-top:23px}.process-grid p{font-size:11px;color:#9f9a99;line-height:1.95;margin-top:17px;max-width:230px}.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;align-items:center;padding-block:15px 70px}.about-art{height:416px;border-radius:8px;position:relative;background:radial-gradient(ellipse at 50% 20%,#413c3b,transparent 70%),#242121;overflow:hidden;border:1px solid #413c3b}.about-art:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 45px,#b4a9a607 45px,#b4a9a607 46px)}.about-art:after{content:'';position:absolute;height:380px;width:380px;border:1px solid #b7adab30;border-radius:50%;top:-90px;right:-120px}.about-monogram{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:180px;font-weight:700;letter-spacing:-.1em;color:#ff6b63;transform:rotate(-8deg)}.about-monogram>span{font-size:125px;position:absolute;right:30px;bottom:67px;transform:rotate(8deg);font-weight:400;color:#8e8380}.about-art-caption{position:absolute;bottom:25px;left:26px;right:26px;display:flex;justify-content:space-between;font-size:7px;color:#b2a9a7;letter-spacing:.1em;border-top:1px solid #ff6b6320;padding-top:15px}.about-copy .section-index{margin-bottom:25px}.about-copy h2{font-size:43px}.about-lead{font-size:16px;color:#c2bfbe;line-height:1.7;margin-top:27px;max-width:430px}.about-copy>p:not(.about-lead){font-size:12px;color:#96918f;line-height:1.95;max-width:460px;margin-top:15px}.about-principles{display:flex;flex-wrap:wrap;gap:14px;margin-top:27px;font-size:8px;color:#bbb4b2}.about-principles span{display:flex;align-items:center;gap:6px}.about-principles span:before{content:'✓';color:var(--accent)}.about-copy>.text-link{margin-top:32px;color:var(--accent);font-size:11px}.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.faq h2{font-size:43px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:25px;cursor:pointer;font-size:12px;padding-block:22px;line-height:1.6}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span:last-child{font-size:24px;line-height:1;font-weight:400;color:#958d8c}.faq-list details[open] summary>span:last-child{transform:rotate(45deg);color:var(--accent)}.faq-list details p{font-size:11px;color:#a6a2a1;line-height:1.95;padding:0 30px 24px 0}
.contact{padding:64px;border-radius:9px;background:var(--accent);color:var(--bg);display:grid;grid-template-columns:1fr 1fr;gap:75px;color-scheme:light}.contact-intro .eyebrow{font-size:9px;color:#534946}.contact-intro h2{font-size:104px;line-height:1.03;position:relative;margin-top:30px;letter-spacing:-.075em}.contact-intro h2 em{color:#635855}.contact-intro h2>span{position:absolute;right:5px;top:65px;font-size:83px;color:#655956}.contact-intro>p{font-size:13px;max-width:270px;line-height:1.9;margin-top:27px;color:#413a38}.contact-intro>p.contact-promise{font-size:11px;color:#2b2624;margin-top:16px;font-weight:600}.project-form{padding-top:4px}.form-progress{display:flex;justify-content:space-between;font-size:8px;color:#544a48;border-bottom:1px solid #81716d;padding-bottom:16px;letter-spacing:.1em}.project-form fieldset{border:0;padding:0;margin:23px 0 24px}.project-form legend,.project-form label>span{font-size:10px;display:block;font-weight:600}.service-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.service-choices label{cursor:pointer;position:relative}.service-choices input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;width:100%;height:100%}.service-choices label>span{border:1px solid #83736f;border-radius:4px;padding:7px 12px;font-size:8px;font-weight:500;transition:background var(--jbit-motion-fast)}.service-choices input:checked+span{background:var(--bg);color:var(--accent);border-color:var(--bg)}.service-choices input:focus-visible+span{outline:2px solid var(--bg);outline-offset:3px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.project-form input:not([type=checkbox]),.project-form textarea{width:100%;min-width:0;background:transparent;border:0;border-bottom:1px solid #8b7c78;border-radius:0;padding:9px 0;color:var(--bg);font-size:11px;line-height:1.7}.project-form input::placeholder,.project-form textarea::placeholder{color:#6a5e5b;opacity:1}.project-form :focus-visible{outline:2px solid #501b19;outline-offset:4px}.message-label{display:block;margin-top:23px}.project-form textarea{resize:vertical}.form-note{font-size:8px;color:#574d4a;line-height:1.9;margin-top:17px}.project-form>.button{margin-top:21px;font-size:10px;gap:50px;min-height:47px}.form-required{font-size:8px;margin-left:15px;color:#615552}.form-result{margin-top:24px;border-top:1px solid #8b7c78;padding-top:20px}.form-result>label{font-size:12px;font-weight:700}.form-result textarea{background:#ffffff30;border:1px solid #8b7c78;padding:12px;margin-block:12px}.form-result>div{display:flex;gap:10px;flex-wrap:wrap}.form-result .button{font-size:9px}.form-result p{font-size:10px;margin-top:10px}
.site-footer{padding-block:66px 25px}.footer-main{display:flex;align-items:center;justify-content:space-between;gap:35px;padding-bottom:46px}.footer-main>p{font-size:12px;color:#9c9796}.back-top{font-size:9px;color:#9c9796}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:24px;border-top:1px solid var(--line);font-size:8px;color:#7c7675}.preview-status{display:flex;align-items:center;gap:7px}.preview-status .status-dot{height:4px;width:4px}.footer-bottom>div{display:flex;gap:22px}.footer-bottom button{border:0;background:transparent;padding:0;font-size:8px;color:#9e9897}.legal-dialog{background:#1d1b1a;border:1px solid #665d5b;border-radius:10px;color:var(--text);padding:45px;width:min(580px,calc(100% - 40px));max-height:80vh}.legal-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.legal-dialog h2{font-size:30px;line-height:1.2;margin-bottom:25px}.legal-dialog p{font-size:12px;line-height:1.9;color:#b9b4b2;margin-block:15px}.dialog-close{position:absolute;top:10px;right:15px;background:none;border:0;color:var(--accent);font-size:27px;padding:5px}
@media(hover:hover){.button:hover{transform:translateY(-2px)}.button-primary:hover{background:#f49e9b}.button-light:hover{background:var(--accent)}.service-card:hover{border-color:#80736f;transform:translateY(-4px)}.text-link:hover,.service-link:hover{color:var(--accent)}.back-top:hover,.footer-bottom button:hover{color:var(--accent)}.contact .button-dark:hover{background:#2f2a29}.device-switch button:hover:not([aria-pressed=true]),.board-filters button:hover:not([aria-pressed=true]){background:#ffffff09}}
@media(min-width:1500px){.hero{min-height:745px}.hero-art{height:550px}.system-window{top:118px}.label-software{top:270px}.label-automation{bottom:42px}.hero h1{font-size:100px}}
@media(max-width:1150px){.section-shell{width:calc(100% - 72px)}.site-header{padding-inline:36px}.desktop-nav{gap:20px;margin-left:0}.header-actions{gap:15px}.hero{min-height:620px;gap:5px}.hero h1{font-size:7.1vw}.hero-description{font-size:13px;max-width:340px}.hero-actions{gap:17px}.hero-actions .button{padding-inline:18px;font-size:10px;gap:15px}.hero-actions .text-link{font-size:9px}.hero-art{height:450px;margin-right:-10px}.window-headline{font-size:20px}.window-main{padding:20px 18px 14px}.system-illustration{height:148px}.system-node{width:37px;height:37px}.system-center{width:56px;height:56px}.system-window{left:7%;width:88%;top:90px}.label-web{top:45px;left:0}.label-software{top:205px;right:-5px}.label-automation{left:15%;bottom:26px}.floating-label{font-size:9px;padding:10px 13px;gap:8px}.label-icon{width:25px;height:25px;font-size:17px}.art-coordinate{top:0}.strip-inner>div{gap:23px}.strip-inner>div>span{font-size:13px}.strip-inner>span{max-width:145px;font-size:9px}.section-heading{gap:30px}.section-heading>p{width:240px;font-size:11px}.service-card{padding-inline:22px}.service-card h3{font-size:25px}.tag-list{gap:4px}.tag-list li{font-size:6px}.demo-copy{padding:35px 27px}.demo-copy h3{font-size:31px}.workflow-preview,.board-preview{margin:25px;padding:20px}.process-grid{gap:23px}.about{gap:55px}.about-copy h2,.faq h2{font-size:38px}.about-art{height:390px}.about-monogram{font-size:155px}.about-monogram>span{font-size:100px}.contact{padding:48px;gap:45px}.contact-intro h2{font-size:87px}.contact-intro h2>span{font-size:66px;top:55px}.service-choices label>span{font-size:7px;padding:7px 9px}.form-row{gap:15px}.footer-main>p{font-size:11px}}
@media(max-width:900px){.desktop-nav{display:none}.menu-toggle{display:block}.header-actions>.button{margin-right:5px}.section-space{padding-block:80px}.hero{grid-template-columns:1.15fr 1fr;min-height:575px}.hero h1{font-size:7.5vw}.hero .eyebrow{font-size:7px;letter-spacing:.07em}.hero-description{font-size:11px}.hero-actions{gap:15px;align-items:flex-start;flex-direction:column}.hero-actions .text-link{font-size:10px}.hero-note{font-size:7px;margin-top:25px}.hero-art{height:380px}.window-headline{font-size:17px}.window-eyebrow{font-size:5px}.window-main{padding:18px 14px 12px}.window-bar{height:33px;padding-inline:13px}.system-window{top:75px;left:3%;width:96%}.system-illustration{height:123px}.system-node{width:32px;height:32px;border-radius:6px}.system-node svg{width:18px}.system-center{width:45px;height:45px;border-radius:10px}.system-center .brand-symbol{grid-template:repeat(2,10px)/repeat(2,10px);gap:3px}.system-bottom{padding-top:12px;margin-top:10px}.system-bottom>span:first-child{font-size:6px}.demo-caption{font-size:4px}.label-web{top:25px;left:3%}.label-software{top:177px;right:-8px}.label-automation{bottom:26px;left:6%}.floating-label{padding:9px 10px;font-size:8px}.label-dot{margin-left:10px}.mini-flow{font-size:5px}.strip-inner>div{gap:18px}.strip-inner>div>span{font-size:11px;gap:7px}.strip-inner>span{font-size:8px;max-width:125px}.strip-inner{min-height:80px}.strip-inner i{font-size:15px}.section-heading>p{width:225px;font-size:10px}.service-grid{gap:12px}.service-card{padding:25px 18px 0}.service-card h3{font-size:23px}.service-card>p{font-size:10px}.service-link{font-size:8px}.service-top{margin-bottom:25px}.service-footnote{font-size:9px}.demo-panel{grid-template-columns:.85fr 1.15fr;min-height:390px}.demo-copy{padding:30px 25px}.demo-copy h3{font-size:28px}.demo-copy>p{font-size:10px}.demo-kicker{font-size:6px}.web-preview-stage{padding-left:20px}.web-preview{min-height:315px}.nordwerk-main h4{font-size:37px}.architecture{width:205px;height:215px}.nordwerk-nav>span{display:none}.nordwerk-site{padding:20px}.nordwerk-main{min-height:239px}.preview-browser i{margin-left:40px}.workflow-preview,.board-preview{margin:22px 18px;padding:17px}.flow-steps b{font-size:9px}.flow-steps li>div>span{font-size:7px}.flow-step-icon{width:29px;height:29px}.flow-steps li{gap:10px}.flow-steps li:not(:last-child):after{left:14px;top:55px}.project-status{font-size:5px}.board-rows b{font-size:8px}.board-rows small{font-size:6px}.board-rows>div{gap:7px}.project-tile{width:25px;height:25px}.process-grid{grid-template-columns:repeat(2,1fr);gap:35px}.process-grid p{max-width:270px}.about{gap:35px}.about-copy h2{font-size:33px}.about-art{height:375px}.about-monogram{font-size:135px}.about-monogram>span{font-size:85px;right:20px}.about-lead{font-size:13px}.about-copy>p:not(.about-lead){font-size:11px}.about-art-caption{font-size:6px;gap:10px;left:20px;right:20px}.faq{gap:45px;grid-template-columns:.75fr 1.25fr}.faq h2{font-size:33px}.faq-list summary{font-size:11px}.contact{padding:38px;gap:35px;grid-template-columns:.9fr 1.1fr}.contact-intro h2{font-size:77px}.contact-intro h2>span{font-size:57px;right:0;top:51px}.contact-intro>p{font-size:11px}.contact-intro .eyebrow{font-size:8px}.contact-promise{font-size:10px!important}.form-progress{font-size:7px}.service-choices label>span{padding:6px 8px}.project-form input:not([type=checkbox]),.project-form textarea{font-size:10px}.footer-bottom{font-size:7px}.footer-main>p{max-width:160px}.footer-bottom>div{gap:15px}}
@media(max-width:650px){html{scroll-padding-top:30px}.section-shell{width:calc(100% - 40px)}.site-header{height:80px;padding-inline:20px;gap:15px}.brand{gap:10px}.brand-name{font-size:28px}.brand-symbol{grid-template:repeat(2,9px)/repeat(2,9px);gap:3px}.brand-sub{font-size:5px}.header-actions{gap:14px}.header-actions>.button{display:none}.language{font-size:11px}.menu-toggle{width:33px;padding:7px}.hero{grid-template-columns:1fr;gap:15px;padding-top:48px;padding-bottom:34px;min-height:0}.hero .eyebrow{font-size:8px;letter-spacing:.08em;margin-bottom:23px}.hero h1{font-size:clamp(49px,11.5vw,74px);line-height:1.07;letter-spacing:-.065em}.hero-description{font-size:13px;line-height:1.85;max-width:380px;margin-top:23px}.hero-actions{flex-direction:row;gap:22px;margin-top:27px;align-items:center;flex-wrap:wrap}.hero-actions .button{min-height:49px;padding-inline:18px;font-size:10px}.hero-actions .text-link{font-size:9px;gap:8px}.hero-actions .text-link>span:last-child{font-size:18px}.hero-note{font-size:8px;margin-top:27px}.hero-art{height:370px;width:min(420px,100%);margin:4px auto 0}.system-window{top:67px;left:8%;width:84%}.window-headline{font-size:22px}.window-eyebrow{font-size:6px}.window-main{padding:19px 18px 14px}.window-bar{height:35px}.system-illustration{height:135px}.system-node{width:35px;height:35px}.system-center{width:50px;height:50px}.system-bottom>span:first-child{font-size:6px}.demo-caption{font-size:4px}.label-web{top:20px;left:1%;font-size:9px}.label-software{right:-1%;top:173px;font-size:9px}.label-automation{bottom:22px;left:16%;font-size:9px}.floating-label{padding:10px 13px}.art-coordinate{top:1px;font-size:6px;right:15px}.art-bottom-note{font-size:5px}.orbit{top:2%;height:91%}.mini-flow{font-size:6px}.strip-inner{padding-block:22px;display:block}.strip-inner>span{display:block;max-width:none;font-size:9px;margin-bottom:14px}.strip-inner>div{display:grid;grid-template-columns:1fr 1fr;row-gap:11px;column-gap:20px}.strip-inner>div>span{font-size:13px;gap:9px}.strip-inner i{width:17px;font-size:18px}.section-space{padding-block:66px}.section-heading{display:block;margin-bottom:30px}.section-heading>p{width:auto;max-width:360px;font-size:12px;line-height:1.9;margin-top:24px}.section-index{font-size:8px;margin-bottom:21px;letter-spacing:.12em}h2{font-size:35px;line-height:1.15;letter-spacing:-.05em}.service-grid{grid-template-columns:1fr;gap:14px}.service-card{padding:25px 25px 0}.service-top{margin-bottom:20px}.service-icon{width:39px;height:39px}.service-card h3{font-size:31px}.service-card h3 br{display:none}.service-card>p{font-size:12px;max-width:none;margin-top:15px}.tag-list{margin:19px 0 24px;gap:7px}.tag-list li{font-size:8px;padding:5px 8px}.service-link{font-size:11px;padding-block:15px}.service-footnote{align-items:flex-start;font-size:10px;margin-top:20px;line-height:1.8}.service-footnote>span{line-height:1.2}.showcase .section-heading{margin-bottom:26px}.showcase-tabs{gap:12px;margin-bottom:17px}.showcase-tabs button{align-items:flex-start;gap:7px;position:relative;padding:12px 0 16px;font-size:9px;line-height:1.6}.showcase-tabs button>span:first-child{font-size:7px;padding-top:2px}.showcase-tabs b{max-width:65px}.tab-arrow{font-size:16px;line-height:1;margin-top:2px;display:none}.demo-panel{grid-template-columns:1fr}.demo-copy{padding:30px 26px}.demo-copy h3{font-size:33px}.demo-copy>p{font-size:12px;max-width:none}.demo-kicker{font-size:7px;margin-bottom:19px}.example-note{font-size:8px;margin-top:0;padding-top:21px;max-width:none}.device-switch{margin-top:20px}.device-switch button{font-size:10px;padding:7px 16px}.web-preview-stage{padding:35px 0 35px 25px;min-height:360px}.web-preview{width:104%;min-height:313px;transform:rotate(-4deg) translateX(10px)}.nordwerk-site{padding:20px}.nordwerk-nav strong{font-size:12px}.nordwerk-main{padding-top:28px;min-height:238px}.nordwerk-main h4{font-size:40px}.nordwerk-eyebrow{font-size:5px}.architecture{height:220px;width:190px;top:20px;right:0}.nordwerk-bottom{font-size:6px}.web-preview[data-view=mobile]{transform:rotate(-4deg) translateX(-12px);width:230px}.workflow-preview,.board-preview{margin:5px 20px 25px;padding:22px}.workflow-header{font-size:10px}.flow-steps b{font-size:10px}.flow-steps li>div>span{font-size:8px}.flow-step-icon{width:32px;height:32px}.flow-steps li:not(:last-child):after{left:16px;top:58px}.flow-result{font-size:10px}.board-rows b{font-size:10px}.board-rows small{font-size:8px}.project-status{font-size:7px}.project-tile{width:30px;height:30px}.board-filters button{font-size:10px}.board-heading h4{font-size:27px}.board-rows>div{gap:10px}.board-live{font-size:9px}.process-grid{grid-template-columns:1fr 1fr;gap:32px 24px;margin-top:35px}.process-grid h3{font-size:23px}.process-grid p{font-size:10px;line-height:1.9}.process-grid article>span{font-size:10px}.about{grid-template-columns:1fr;gap:35px;padding-block:0 10px}.about-art{height:305px;max-width:none}.about-monogram{font-size:150px}.about-monogram>span{right:55px;bottom:37px;font-size:103px}.about-art-caption{font-size:7px}.about-copy h2{font-size:36px}.about-lead{font-size:16px;line-height:1.75;margin-top:23px}.about-copy>p:not(.about-lead){font-size:12px}.about-principles{gap:13px;font-size:8px}.about-copy>.text-link{font-size:11px}.faq{grid-template-columns:1fr;gap:27px}.faq h2{font-size:35px}.faq-list summary{font-size:12px;padding-block:20px}.faq-list details p{font-size:11px}.contact{width:calc(100% - 24px);grid-template-columns:1fr;padding:35px 25px;gap:38px;border-radius:8px}.contact-intro .eyebrow{font-size:8px}.contact-intro h2{font-size:88px;margin-top:25px;line-height:1}.contact-intro h2>span{right:13px;top:45px;font-size:83px}.contact-intro>p{font-size:13px;max-width:290px;margin-top:22px}.contact-intro>p.contact-promise{font-size:11px!important}.form-progress{font-size:8px}.service-choices{gap:6px}.service-choices label>span{font-size:8px;padding:8px 10px}.project-form legend,.project-form label>span{font-size:11px}.form-row{gap:20px}.project-form input:not([type=checkbox]),.project-form textarea{font-size:12px}.form-note{font-size:9px}.project-form>.button{font-size:11px;gap:58px}.form-required{font-size:8px}.site-footer{padding-block:42px 22px}.footer-main{flex-wrap:wrap;gap:23px;padding-bottom:30px}.footer-main>p{font-size:10px;max-width:160px;margin-left:auto;line-height:1.8}.back-top{display:none}.footer-bottom{flex-wrap:wrap;gap:17px 15px;font-size:8px}.preview-status{order:3;width:100%;font-size:8px}.footer-bottom>div{margin-left:auto}.footer-bottom button{font-size:8px}.legal-dialog{padding:35px 25px}.legal-dialog h2{font-size:28px}}
@media(max-width:360px){.hero h1{font-size:46px}.hero-actions{gap:16px}.hero-actions .button{padding-inline:14px;font-size:9px}.hero-actions .text-link{font-size:8px}.hero-art{height:345px}.window-headline{font-size:19px}.system-illustration{height:115px}.label-automation{bottom:22px;left:10%}.system-node{width:30px;height:30px}.label-software{top:164px}.contact{padding-inline:20px}.service-choices label>span{font-size:7px;padding:7px 8px}.contact-intro h2{font-size:80px}.contact-intro h2>span{font-size:70px}.process-grid{gap:28px 18px}.process-grid h3{font-size:21px}.project-status{font-size:6px}.board-rows b{font-size:9px}.board-rows small{font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}}
/* Reading text stays comfortable even inside the compact editorial layout. */
.desktop-nav a{font-size:12px}.hero-description{font-size:15px}.section-heading>p,.service-card>p,.about-copy>p:not(.about-lead),.faq-list details p{font-size:13px}.demo-copy>p,.process-grid p{font-size:12px}.tag-list li{font-size:9px}.service-link{font-size:11px}.faq-list summary{font-size:13px}.service-footnote{font-size:11px}.example-note,.form-note{font-size:10px}.project-form input:not([type=checkbox]),.project-form textarea{font-size:13px}.service-choices label>span{font-size:10px}.footer-bottom,.footer-bottom button{font-size:10px}.service-card h3 br{display:initial}
@media(max-width:650px){.hero-description{font-size:14px}.contact-intro h2{font-size:clamp(66px,21vw,88px)}html[lang=en] .contact-intro h2{font-size:clamp(52px,15vw,65px)}html[lang=en] .contact-intro h2>span{font-size:52px;right:0;top:50px}.footer-bottom,.footer-bottom button{font-size:9px}.process-grid p{font-size:12px}.showcase-tabs button{min-height:65px;font-size:10px}.service-choices label>span{font-size:10px}.project-form legend,.project-form label>span{font-size:12px}.form-row{gap:14px}.about-principles{font-size:10px}.hero .eyebrow{font-size:9px}.hero-note{font-size:9px}}

/* refinements.css */
/* JBiT / refinement pass: clearer contrast, calmer surfaces, useful movement. */
/* Red brand palette: bright accents on charcoal, white type on red actions. */
.about-art.portrait-card{background:#211c18;border-color:#51473e;isolation:isolate}
.about-art.portrait-card::before{background:linear-gradient(transparent 58%,#131212cc);z-index:1;pointer-events:none}
.about-art.portrait-card::after{display:none}
.about-portrait{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.portrait-card .about-art-caption{z-index:2;color:#f0eeed;border-top-color:#ffffff40;text-shadow:0 1px 5px #000}
:root { --reading-progress: 0; }

html { scroll-padding-top: 112px; }
body { font-size: 16px; }
.section-space { padding-block: 110px; }
.section-heading { gap: 64px; margin-bottom: 48px; }
.section-heading > p { width: 310px; font-size: 15px; line-height: 1.85; }
.section-index { font-size: 11px; letter-spacing: .13em; }
h2 { font-size: clamp(38px, 3.6vw, 54px); line-height: 1.13; }
.muted, h2 .muted { color: #979392; }
.text-link { font-size: 13px; }
.button { font-size: 13px; min-height: 55px; }
.button-small { font-size: 12px; min-height: 43px; }
.eyebrow { font-size: 11px; }

/* Navigation stays available without taking over the page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 88px;
  width: 100%;
  max-width: none;
  padding-inline: max(56px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid #ffffff0d;
  background: #131212f0;
  backdrop-filter: blur(18px);
  transition: background .25s, box-shadow .25s;
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--reading-progress));
  transform-origin: left;
  pointer-events: none;
}
.site-header.is-scrolled { background: #131212ed; box-shadow: 0 10px 30px #0002; }
.site-header>.brand { flex-shrink: 0; white-space: nowrap; }
.desktop-nav { gap: 28px; margin-left: 30px; }
.desktop-nav a { font-size: 13px; position: relative; }
.desktop-nav a::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  bottom: -10px;
  left: calc(50% - 2px);
  opacity: 0;
}
.desktop-nav a[aria-current='location'] { color: var(--accent); }
.desktop-nav a[aria-current='location']::after { opacity: 1; }
.language { font-size: 12px; min-height: 44px; min-width: 44px; }
.header-actions { gap: 17px; }
.site-header .header-actions { flex-shrink: 0; }
.site-header .header-actions>.button { width: 210px; flex-shrink: 0; white-space: nowrap; }
.mobile-nav { background: #1c1b1b; max-height: calc(100dvh - 80px); overflow-y: auto; }
.mobile-nav a[aria-current='location'] { color: var(--accent); }
@media (min-width: 901px) {
  .site-header .desktop-nav { display: grid; grid-template-columns: 74px 82px 126px 94px; gap: 0; margin-left: 0; justify-items: center; flex-shrink: 0; }
  .site-header .desktop-nav a { white-space: nowrap; }
}

/* First screen: typography carries the message; the illustration invites use. */
.hero { min-height: 690px; padding-block: 67px 78px; gap: 24px; }
.hero .eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 30px; }
.hero h1 { font-size: clamp(65px, 6.8vw, 100px); }
.hero-description { font-size: 16px; max-width: 435px; line-height: 1.85; margin-top: 28px; }
.hero-actions { margin-top: 31px; gap: 24px; }
.hero-actions .button { gap: 24px; font-size: 13px; }
.hero-actions .text-link { font-size: 12px; }
.hero-note { font-size: 11px; color: #a6a2a1; margin-top: 30px; max-width: 420px; line-height: 1.8; }
.hero-art { margin-right: 0; }
.system-window { background: linear-gradient(145deg, #2e2c2c, #1b1a1a 85%); border-color: #6f68667d; }
.window-headline { line-height: 1.2; }
.floating-label {
  color: var(--text);
  font-family: var(--font);
  background: linear-gradient(120deg, #2f2d2d, #222121);
  border-color: #69626080;
  min-height: 56px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.hero-label-arrow { font-size: 15px; color: #bcb4b2; margin-left: 2px; }
.label-web { padding-right: 15px; }
.label-web .label-dot { display: none; }
.label-software { right: -8px; }
.label-automation { left: 12%; bottom: 25px; }
.art-bottom-note { font-size: 8px; letter-spacing: .025em; color: #a29c9a; }
.art-bottom-note > span:first-child { color: #aaa3a1; }
.expertise-strip { background: #1c1b1b; }
.strip-inner { min-height: 92px; }
.strip-inner > span { font-size: 12px; color: #aeaaa9; max-width: 250px; }
.strip-inner > div { gap: 33px; }
.strip-inner > div > span { font-size: 16px; }

/* Services explain scope and outcome separately. */
.service-grid { gap: 20px; }
.service-card {
  border-color: #413f3f;
  background: linear-gradient(145deg, #242322, #1d1c1b);
  padding: 30px 28px 0;
  border-radius: 10px;
}
.service-card-featured { background: linear-gradient(145deg, #292727, #201e1e); border-color: #665d5b; }
.service-top { margin-bottom: 30px; }
.service-number { font-size: 32px; color: #615c5a; line-height: 1; letter-spacing: -.06em; }
.service-card h3 { font-size: 31px; line-height: 1.16; }
.service-card > p { font-size: 14px; line-height: 1.85; margin-top: 20px; }
.service-outcome { margin-top: 24px; padding-top: 19px; border-top: 1px solid #8a817e26; }
.service-outcome > span { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: #a29896; }
.service-outcome > p { font-size: 13px; line-height: 1.7; color: #d4d0cf; margin-top: 7px; }
.tag-list { margin-block: 22px 26px; gap: 6px; }
.tag-list li { font-size: 10px; padding: 5px 8px; color: #b5b0ae; border-color: #4f4a49; }
.service-link { font-size: 12px; padding-block: 20px; }
.service-footnote { margin-top: 26px; font-size: 12px; color: #b0aba9; }

/* The light studio is the page's visual change of pace. */
.showcase { background: var(--cream); color: #242222; border: 0; }
.showcase .section-index { color: #564e4c; }
.showcase h2 .muted { color: #736f6e; }
.showcase .section-heading > p { color: #5c5857; }
.showcase-tabs { margin-bottom: 29px; gap: 26px; }
.showcase-tabs button { border-top-color: #b8b3b2; color: #615c5b; padding: 20px 0; min-height: 66px; gap: 13px; font-size: 13px; }
.showcase-tabs button > span:first-child { font-size: 10px; color: #665e5d; }
.showcase-tabs button[aria-selected='true'] { border-top-color: #2d2827; color: #211d1c; }
.showcase-tabs button[aria-selected='true'] > span:first-child { color: #3e3634; }
.showcase-tabs button[aria-selected='true'] .tab-arrow { color: #3e3634; }
.showcase-tabs :focus-visible { outline-color: #413937; }
.demo-panel { min-height: 490px; border-color: #c8c4c3; border-radius: 12px; background: #f8f7f6; }
.demo-copy { padding: 42px 38px; }
.demo-copy h3 { font-size: 39px; line-height: 1.16; }
.demo-copy > p { font-size: 14px; line-height: 1.85; color: #5c5756; margin-top: 20px; max-width: 310px; }
.demo-kicker { font-size: 10px; letter-spacing: .09em; color: #665f5d; margin-bottom: 24px; }
.showcase .example-note { color: #6a6463 !important; font-size: 11px; line-height: 1.7; padding-top: 25px; }
.demo-next { color: #312b2a; font-size: 12px; margin-top: 27px; gap: 18px; }
.demo-next:hover { color: #524846; }
.demo-next:focus-visible { outline-color: #413937; }
.demo-copy .button:focus-visible, .showcase h2:focus-visible { outline-color: #413937; }
.board-preview :focus-visible { outline-color: var(--accent); }
.device-switch { border-color: #c0bbba; padding: 4px; }
.device-switch button { color: #5c5655; font-size: 11px; padding: 8px 17px; min-height: 36px; }
.device-switch button[aria-pressed='true'] { color: #f8e8e7; background: #312b29; }
.device-switch :focus-visible { outline-color: #413937; }
.web-preview-stage { background: radial-gradient(ellipse at 70% 40%, #e7e4e3, transparent 65%), #d2cdcc; padding-block: 45px; }
.web-preview { width: 108%; box-shadow: 0 30px 55px #302b2940; }
.web-preview[data-view='mobile'] { box-shadow: 0 20px 35px #302b2940; }
.workflow-preview, .board-preview { color: var(--text); background: #242121; border-color: #605856; margin: 40px 35px; padding: 27px; }
.workflow-header { font-size: 13px; }
.simulation-label { font-size: 9px; color: #c3bcba; }
.flow-steps { margin-block: 27px; }
.flow-steps li { gap: 12px; padding-block: 18px; }
.flow-steps b { font-size: 12px; }
.flow-steps li > div > span { font-size: 10px; color: #aea5a3; line-height: 1.6; }
.flow-steps li:not(:last-child)::after { top: 65px; }
.flow-result { font-size: 11px; color: #c4bdbb; }
.mini-brand { font-size: 17px; }
.mini-brand i { font-size: 10px; }
.board-avatar { width: 29px; height: 29px; font-size: 9px; }
.board-heading > div > span { font-size: 9px; color: #b3aba9; }
.board-heading h4 { font-size: 28px; }
.board-filters { margin-top: 22px; }
.board-filters button { font-size: 11px; padding: 7px 15px; min-height: 36px; }
.board-rows > div { gap: 10px; padding-block: 16px; }
.board-rows b { font-size: 11px; }
.board-rows small { font-size: 9px; margin-top: 3px; color: #ada5a3; }
.project-status { font-size: 8px; padding: 4px 6px; }
.board-live { font-size: 10px; color: #bdb4b2; }

.process-grid { gap: 30px; margin-top: 55px; }
.process-grid article > span { font-size: 13px; padding-top: 20px; }
.process-grid h3 { font-size: 27px; }
.process-grid p { font-size: 14px; line-height: 1.85; color: #afabaa; }
.about { gap: 75px; padding-bottom: 60px; }
.about-art { background: radial-gradient(ellipse at 45% 20%, #433f3e, transparent 70%), #262424; height: 455px; }
.about-monogram { font-size: 190px; }
.about-art-caption { font-size: 9px; }
.about-copy h2 { font-size: 44px; }
.about-lead { font-size: 18px; line-height: 1.75; }
.about-copy > p:not(.about-lead) { font-size: 15px; line-height: 1.85; color: #ada9a8; }
.about-principles { font-size: 11px; gap: 18px; }
.about-copy > p.about-signature { font-size: 12px; color: #c6bfbd; border-top: 1px solid #4f4947; padding-top: 20px; margin-top: 24px; }
.about-copy > .text-link { font-size: 13px; margin-top: 24px; }
.faq { gap: 70px; }
.faq h2 { font-size: 44px; }
.faq-list summary { font-size: 14px; padding-block: 24px; }
.faq-list details p { font-size: 14px; line-height: 1.85; color: #b3aead; }

/* Form: an explicit local draft with comfortable touch targets. */
.contact { padding: 62px; gap: 65px; }
.contact-intro .eyebrow { font-size: 11px; }
.contact-intro h2 { font-size: 100px; }
html[lang='en'] .contact-intro h2 { font-size: clamp(54px, 5.2vw, 76px); }
html[lang='en'] .contact-intro h2 > span { display: none; }
.contact-intro > p { font-size: 15px; max-width: 320px; }
.contact-intro > p.contact-promise { font-size: 13px; max-width: 320px; }
.form-progress { font-size: 11px; letter-spacing: .06em; align-items: flex-start; gap: 20px; }
.form-progress > span:first-child { font-size: 14px; letter-spacing: -.02em; font-weight: 700; }
.local-draft-badge { font-size: 9px; letter-spacing: 0; text-align: right; max-width: 130px; }
.project-form legend, .project-form label > span { font-size: 12px; }
.service-choices label > span { font-size: 11px; padding: 9px 12px; min-height: 40px; }
.project-form input:not([type='checkbox']), .project-form textarea { font-size: 15px; padding-block: 12px; }
.form-note { font-size: 11px; color: #3f3735; line-height: 1.85; }
.project-form > .button { font-size: 12px; min-height: 52px; gap: 30px; }
.form-required { font-size: 10px; }
.form-result { padding-top: 24px; }
.form-result > label { font-size: 15px; }
.form-result textarea { font-size: 13px; padding: 13px; border-radius: var(--jbit-radius-control); }
.form-result .button { font-size: 11px; }
.form-result p { font-size: 11px; }
.footer-main > p { font-size: 14px; }
.back-top { font-size: 12px; }
.footer-bottom, .footer-bottom button { font-size: 11px; }
.legal-dialog p { font-size: 14px; }

@keyframes demo-arrive { from { opacity: .6; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .demo-panel:not([hidden]) { animation: demo-arrive .32s ease-out; }
}
@media (hover: hover) {
  .floating-label:hover { border-color: var(--accent); box-shadow: 0 10px 30px #0005, 0 0 0 3px #ff6b630a; background: #34302f; }
  .floating-label:hover .hero-label-arrow { color: var(--accent); }
  .service-card:hover { transform: translateY(-3px); }
}

@media (max-width: 1150px) {
  .site-header { padding-inline: 36px; height: 82px; }
  .desktop-nav { gap: 20px; margin-left: 0; }
  .desktop-nav a { font-size: 12px; }
  .header-actions { gap: 12px; }
  .hero { min-height: 635px; gap: 10px; }
  .hero h1 { font-size: 7.1vw; }
  .hero-description { font-size: 15px; max-width: 360px; }
  .hero-actions { gap: 18px; }
  .hero-actions .button { font-size: 11px; gap: 18px; }
  .hero-actions .text-link { font-size: 10px; }
  .hero-note { font-size: 10px; }
  .strip-inner > div { gap: 23px; }
  .strip-inner > div > span { font-size: 14px; }
  .strip-inner > span { font-size: 11px; max-width: 170px; }
  .section-heading { gap: 32px; }
  .section-heading > p { width: 260px; font-size: 14px; }
  .service-grid { gap: 15px; }
  .service-card { padding: 27px 22px 0; }
  .service-card h3 { font-size: 28px; }
  .service-card > p { font-size: 13px; }
  .tag-list li { font-size: 9px; }
  .service-link { font-size: 11px; }
  .demo-copy { padding: 34px 28px; }
  .demo-copy h3 { font-size: 34px; }
  .demo-copy > p { font-size: 13px; }
  .demo-kicker { font-size: 9px; }
  .workflow-preview, .board-preview { margin: 30px 23px; padding: 21px; }
  .flow-steps b, .board-rows b { font-size: 11px; }
  .flow-steps li > div > span { font-size: 9px; }
  .board-filters button { font-size: 10px; padding-inline: 12px; }
  .project-status { font-size: 7px; }
  .process-grid h3 { font-size: 25px; }
  .process-grid p { font-size: 13px; }
  .about { gap: 50px; }
  .about-copy h2 { font-size: 39px; }
  .about-art { height: 440px; }
  .about-monogram { font-size: 165px; }
  .contact { padding: 45px; gap: 40px; }
  .contact-intro h2 { font-size: 87px; }
  .contact-intro > p { font-size: 14px; }
  .form-progress { gap: 10px; }
  .form-progress > span:first-child { font-size: 12px; }
  .service-choices label > span { padding-inline: 10px; font-size: 10px; }
}
@media (max-width: 900px) {
  .site-header { height: 80px; }
  .hero { min-height: 620px; }
  .hero h1 { font-size: 7.5vw; }
  .hero .eyebrow { font-size: 9px; }
  .hero-description { font-size: 14px; }
  .hero-actions .button { font-size: 11px; }
  .hero-actions .text-link { font-size: 11px; }
  .hero-note { font-size: 10px; }
  .art-bottom-note { font-size: 7px; }
  .section-space { padding-block: 80px; }
  .section-heading > p { width: 230px; }
  .strip-inner > div { gap: 16px; }
  .strip-inner > div > span { font-size: 12px; }
  .strip-inner > span { font-size: 10px; max-width: 140px; }
  .service-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; padding: 27px 28px 0; }
  .service-top { grid-column: 1 / -1; margin-bottom: 18px; }
  .service-card h3 { grid-column: 1; font-size: 31px; }
  .service-card > p { grid-column: 2; grid-row: 2 / 4; margin: 0; max-width: none; font-size: 14px; }
  .service-outcome { grid-column: 1; border: 0; padding-top: 0; margin-top: 20px; }
  .tag-list { grid-column: 2; align-self: end; margin-block: 18px 24px; }
  .tag-list li { font-size: 10px; }
  .service-link { grid-column: 1 / -1; font-size: 12px; }
  .demo-panel { grid-template-columns: .9fr 1.1fr; min-height: 490px; }
  .demo-copy { padding: 30px 24px; }
  .demo-copy h3 { font-size: 30px; }
  .demo-copy > p { font-size: 13px; }
  .demo-kicker { font-size: 8px; }
  .demo-next { font-size: 11px; gap: 10px; }
  .showcase-tabs button { font-size: 12px; gap: 10px; }
  .showcase-tabs button > span:first-child { font-size: 9px; }
  .workflow-preview, .board-preview { margin-inline: 16px; padding: 17px; }
  .workflow-header { font-size: 11px; }
  .flow-steps b, .board-rows b { font-size: 10px; }
  .flow-steps li > div > span { font-size: 8px; }
  .board-rows small { font-size: 8px; }
  .board-filters button { font-size: 9px; padding-inline: 11px; }
  .project-status { font-size: 6px; }
  .board-rows > div { gap: 7px; }
  .process-grid p { max-width: none; font-size: 14px; }
  .about { gap: 35px; }
  .about-copy h2 { font-size: 34px; }
  .about-copy > p:not(.about-lead) { font-size: 14px; }
  .about-lead { font-size: 16px; }
  .about-art { height: 470px; }
  .about-monogram { font-size: 145px; }
  .about-art-caption { font-size: 7px; }
  .about-principles { font-size: 10px; }
  .faq { gap: 40px; }
  .faq h2 { font-size: 36px; }
  .faq-list summary { font-size: 13px; }
  .contact { grid-template-columns: 1fr; gap: 36px; padding: 42px; }
  .contact-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 35px; }
  .contact-intro .eyebrow { grid-column: 1 / -1; }
  .contact-intro h2 { grid-row: 2 / 4; font-size: 80px; }
  .contact-intro h2 > span { right: 0; }
  .contact-intro > p { grid-column: 2; margin-top: 30px; }
  .contact-intro > p.contact-promise { margin-top: 12px; }
  .form-progress > span:first-child { font-size: 15px; }
  .local-draft-badge { max-width: none; font-size: 10px; }
  .service-choices label > span { padding: 10px 15px; font-size: 12px; }
  .footer-main > p { font-size: 12px; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 99px; }
  .site-header { height: 76px; padding-inline: 20px; }
  .hero { min-height: 0; padding-top: 47px; padding-bottom: 38px; gap: 17px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .09em; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(46px, 11.5vw, 74px); line-height: 1.08; }
  .hero-description { font-size: 15px; max-width: none; margin-top: 24px; line-height: 1.8; }
  .hero-actions { gap: 21px; margin-top: 27px; }
  .hero-actions .button { font-size: 12px; padding-inline: 20px; min-height: 52px; }
  .hero-actions .text-link { font-size: 11px; }
  .hero-note { font-size: 10px; margin-top: 27px; }
  .hero-art { width: min(420px, 100%); margin: 8px auto 0; height: 385px; }
  .hero-art .orbit-one { left: 7%; top: 10%; width: 78%; height: 76%; transform: rotate(-16deg); }
  .floating-label { min-height: 49px; font-size: 10px; }
  .hero-label-arrow { font-size: 14px; }
  .label-web { top: 22px; left: 0; }
  .label-software { right: -2px; top: 182px; }
  .label-automation { left: 10%; bottom: 24px; }
  .system-window { top: 78px; }
  .window-headline { font-size: 21px; }
  .art-bottom-note { font-size: 7px; left: 4%; right: 1%; }
  .strip-inner { padding-block: 23px; }
  .strip-inner > span { max-width: none; font-size: 12px; margin-bottom: 16px; }
  .strip-inner > div { row-gap: 15px; column-gap: 14px; }
  .strip-inner > div > span { font-size: 14px; }
  .section-space { padding-block: 66px; }
  .section-heading { margin-bottom: 32px; }
  .section-heading > p { width: auto; max-width: none; font-size: 15px; margin-top: 24px; }
  .section-index { font-size: 10px; margin-bottom: 22px; }
  h2 { font-size: 36px; line-height: 1.16; }
  .service-card { display: flex; padding: 27px 25px 0; }
  .service-top { margin-bottom: 23px; }
  .service-number { font-size: 34px; }
  .service-card h3 { font-size: 32px; }
  .service-card > p { font-size: 15px; margin-top: 20px; }
  .service-outcome { width: 100%; padding-top: 19px; border-top: 1px solid #8a817e26; margin-top: 23px; }
  .service-outcome > span { font-size: 10px; }
  .service-outcome > p { font-size: 14px; }
  .tag-list { margin-block: 21px 25px; gap: 7px; }
  .tag-list li { font-size: 10px; }
  .service-link { font-size: 12px; min-height: 61px; }
  .service-footnote { font-size: 12px; align-items: flex-start; line-height: 1.8; }
  .showcase-tabs { gap: 13px; margin-bottom: 20px; }
  .showcase-tabs button { display: block; font-size: 11px; padding-block: 14px; line-height: 1.6; min-height: 88px; }
  .showcase-tabs button > span:first-child { display: block; font-size: 10px; margin-bottom: 6px; }
  .showcase-tabs b { max-width: none; }
  .demo-panel { grid-template-columns: 1fr; min-height: 0; }
  .demo-copy { padding: 31px 25px; }
  .demo-copy h3 { font-size: 34px; }
  .demo-copy > p { font-size: 15px; margin-top: 20px; }
  .demo-kicker { font-size: 9px; line-height: 1.7; }
  .showcase .example-note { font-size: 11px; margin-top: 0; }
  .demo-next { font-size: 12px; margin-top: 24px; gap: 13px; }
  .device-switch button { font-size: 12px; min-height: 40px; padding-inline: 18px; }
  .web-preview-stage { padding-block: 36px; }
  .workflow-preview, .board-preview { margin: 0 18px 23px; padding: 20px 18px; }
  .workflow-header { font-size: 12px; }
  .flow-steps b { font-size: 11px; }
  .flow-steps li > div > span { font-size: 9px; }
  .flow-result { font-size: 11px; }
  .mini-brand { font-size: 16px; }
  .board-heading h4 { font-size: 28px; }
  .board-filters button { font-size: 11px; min-height: 39px; padding-inline: 13px; }
  .board-rows b { font-size: 11px; }
  .board-rows small { font-size: 9px; }
  .board-rows > div { gap: 9px; }
  .project-status { font-size: 7px; }
  .board-live { font-size: 11px; }
  .process-grid { gap: 31px 23px; margin-top: 35px; }
  .process-grid h3 { font-size: 24px; }
  .process-grid p { font-size: 13px; }
  .process-grid article > span { font-size: 12px; }
  .about { gap: 32px; padding-bottom: 0; }
  .about-art { height: 310px; }
  .about-monogram { font-size: 165px; }
  .about-art-caption { font-size: 8px; }
  .about-copy h2 { font-size: 36px; }
  .about-lead { font-size: 18px; }
  .about-copy > p:not(.about-lead) { font-size: 15px; }
  .about-principles { font-size: 11px; gap: 12px; }
  .about-copy > p.about-signature { font-size: 12px; }
  .faq { gap: 28px; }
  .faq h2 { font-size: 36px; }
  .faq-list summary { font-size: 14px; padding-block: 22px; }
  .faq-list details p { font-size: 14px; }
  .contact { padding: 36px 25px; gap: 36px; }
  .contact-intro { display: block; }
  .contact-intro .eyebrow { font-size: 10px; }
  .contact-intro h2 { font-size: clamp(66px, 21vw, 88px); margin-top: 25px; }
  html[lang='en'] .contact-intro h2 { font-size: clamp(38px, 11vw, 49px); }
  .contact-intro h2 > span { right: 5px; top: 49px; font-size: 74px; }
  .contact-intro > p { font-size: 15px; max-width: none; margin-top: 25px; }
  .contact-intro > p.contact-promise { font-size: 13px !important; margin-top: 15px; }
  .form-progress { gap: 15px; }
  .form-progress > span:first-child { font-size: 13px; letter-spacing: -.02em; }
  .local-draft-badge { max-width: 112px; font-size: 9px; }
  .service-choices label > span { font-size: 11px; padding: 10px 12px; min-height: 42px; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .project-form legend, .project-form label > span { font-size: 13px; }
  .project-form input:not([type='checkbox']), .project-form textarea { font-size: 16px; }
  .form-note { font-size: 12px; line-height: 1.8; }
  .project-form > .button { width: 100%; font-size: 12px; min-height: 53px; justify-content: space-between; margin-top: 23px; }
  .form-required { display: block; margin: 10px 0 0; font-size: 10px; }
  .form-result > label { font-size: 16px; }
  .form-result textarea { font-size: 14px; }
  .form-result .button { font-size: 12px; min-height: 43px; }
  .form-result p { font-size: 12px; }
  .footer-main > p { font-size: 12px; max-width: 160px; }
  .footer-bottom, .footer-bottom button { font-size: 10px; }
  .preview-status { font-size: 10px; }
  .footer-bottom > div { gap: 18px; }
  .legal-dialog p { font-size: 14px; }
}
@media (max-width: 360px) {
  .hero-art { height: 355px; }
  .hero h1 { font-size: 45px; }
  .hero .eyebrow { font-size: 8px; }
  .hero-actions .button { font-size: 11px; padding-inline: 16px; gap: 14px; }
  .floating-label { font-size: 9px; padding-inline: 9px; gap: 7px; }
  .hero-label-arrow { font-size: 12px; }
  .label-software { top: 172px; }
  .window-headline { font-size: 18px; }
  .art-bottom-note { font-size: 6px; }
  .service-card { padding-inline: 22px; }
  .service-card h3 { font-size: 30px; }
  .showcase-tabs button { font-size: 10px; }
  .demo-copy { padding-inline: 22px; }
  .demo-copy h3 { font-size: 30px; }
  .demo-next { font-size: 11px; gap: 8px; }
  .workflow-preview, .board-preview { margin-inline: 12px; padding-inline: 13px; }
  .workflow-header { font-size: 10px; }
  .flow-steps b { font-size: 10px; }
  .flow-steps li > div > span { font-size: 8px; }
  .board-filters button { font-size: 10px; padding-inline: 10px; }
  .board-rows b { font-size: 10px; }
  .board-rows small { font-size: 8px; }
  .project-status { font-size: 6px; }
  .project-tile { width: 25px; height: 25px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid h3 { font-size: 27px; }
  .process-grid p { font-size: 14px; }
  .contact { padding-inline: 21px; }
  .contact-intro h2 > span { font-size: 63px; right: 0; }
  .form-progress > span:first-child { font-size: 12px; }
  .local-draft-badge { font-size: 8px; max-width: 96px; }
  .service-choices label > span { font-size: 10px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .floating-label { transition: none; }
  .demo-panel:not([hidden]) { animation: none; }
}

/* Brand red: role-specific contrast for actions and the contact section. */
.hero h1 em{color:#ff625b}.brand-symbol{color:var(--jbit-symbol)}
.button-primary{background:var(--brand-red);color:#fff}.button-light{background:#f6f0eb;color:#201819}
.system-center{background:#ed4146}.system-center .brand-symbol{color:#fff}
.contact{background:#b92330;color:#fff;color-scheme:dark}
.contact .contact-intro .eyebrow,.contact .contact-intro>p,.contact .contact-intro>p.contact-promise{color:#fff0ed}
.contact .contact-intro h2 em,.contact .contact-intro h2>span{color:#ffc7bd}
.contact .form-progress{color:#ffebe6;border-color:#ffbdb366}.contact .local-draft-badge{color:#ffe7e2}
.contact .project-form legend,.contact .project-form label>span{color:#fff}
.contact .service-choices label>span{border-color:#f9c5bc99;background:#ffffff07}
.contact .service-choices input:checked+span{background:#fff2ed;color:#8d1620;border-color:#fff2ed}
.contact .service-choices input:focus-visible+span{outline-color:#fff}
.contact .project-form input:not([type=checkbox]),.contact .project-form textarea{color:#fff;border-color:#ffccc3aa}
.contact .project-form input::placeholder,.contact .project-form textarea::placeholder{color:#ffe2dc!important}
.contact .form-note,.contact .form-required{color:#fff0ed!important}
.contact .project-form :focus-visible{outline-color:#fff}
.contact .button-dark{background:#211719;color:#fff}
.contact .button-outline{background:transparent;color:#fff;border-color:#ffddd6}
.contact .form-result{border-color:#ffd4ca88}.contact .form-result textarea{background:#801c25;border-color:#f9c9bf88}
.contact .form-result p{color:#fff}
.showcase .device-switch button[aria-pressed=true]{background:#a4232e;color:#fff}
@media(hover:hover){.button-primary:hover{background:var(--brand-red-hover)}.button-light:hover{background:#ffd5ce;color:#29181a}.contact .button-dark:hover{background:#382126}}

/* references.css */
.references{padding-block:110px;background:#1a1919;border-block:1px solid #393635;scroll-margin-top:0}
.references .section-heading>p{width:300px}.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.reference-card{min-width:0;background:#242221;border:1px solid #4a4645;border-radius:12px;overflow:hidden}
.reference-card figure{margin:0;background:#e4e2e1}.reference-card img{display:block;width:100%;height:auto;aspect-ratio:1280/850;object-fit:cover;object-position:top}
.reference-card figcaption{display:flex;justify-content:space-between;gap:15px;padding:12px 18px;background:#e7e5e4;color:#4a4443;font-size:10px;line-height:1.7}.reference-card figcaption a{font-weight:700;white-space:nowrap}
.reference-copy{padding:30px}.reference-category{font-size:10px;color:#ff6b63;letter-spacing:.1em;text-transform:uppercase}.reference-copy h3{font-size:29px;line-height:1.16;margin-top:13px;letter-spacing:-.04em}
.reference-copy .reference-title{font-family:var(--display);font-size:19px;line-height:1.4;color:#d6d1d0;margin-top:16px}.reference-copy>p{font-size:14px;line-height:1.85;color:#bcb8b7;margin-top:16px}
.reference-copy h4{font-family:var(--font);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#e9e6e5;margin-top:25px}
.reference-copy ul{list-style:none;padding:0;margin:13px 0 0;display:grid;gap:9px}.reference-copy li{position:relative;padding-left:18px;font-size:13px;line-height:1.8;color:#c3bdbc}.reference-copy li:before{content:'↳';position:absolute;left:0;color:#ff6b63}
.reference-copy>p.reference-status{font-size:12px;color:#b8b3b2;line-height:1.8;border-top:1px solid #4e4847;padding-top:18px;margin-top:23px}.reference-status strong{display:block;color:#dfdbda;font-size:10px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px}
.reference-featured{grid-column:1/-1;display:grid;grid-template-columns:1.12fr 1fr;align-items:stretch}.reference-featured figure{display:flex;flex-direction:column;background:#e0dddd}.reference-featured img{object-fit:contain;flex:1;min-height:0}.reference-featured figcaption{margin-top:auto}.reference-featured .reference-copy{padding:36px}.reference-note{font-size:11px;color:#aca6a5;line-height:1.8;margin-top:24px}
@media(max-width:1000px){.reference-featured{grid-template-columns:1fr}.reference-featured figure{display:block}.reference-copy,.reference-featured .reference-copy{padding:27px}.reference-grid{gap:22px}.reference-copy h3{font-size:26px}.reference-card figcaption{flex-wrap:wrap;gap:5px 15px}}
@media(max-width:650px){.references{padding-block:66px}.references .section-heading>p{width:auto}.reference-grid{grid-template-columns:1fr;gap:23px}.reference-copy,.reference-featured .reference-copy{padding:25px}.reference-copy h3{font-size:27px}.reference-copy>p{font-size:15px}.reference-copy li{font-size:14px}.reference-copy>p.reference-status{font-size:12px}.reference-copy .reference-title{font-size:20px}.reference-card figcaption{font-size:10px;padding:11px 15px}.reference-note{font-size:12px}}

/* personal.css */
/* Personal editorial refinement: space, texture and a visible point of contact. */
.site-header{background:#131111f5}.hero{padding-bottom:76px}.hero-description{color:#c2bcbc;max-width:445px}.hero h1{letter-spacing:-.065em}
.founder-intro{display:flex;align-items:center;gap:13px;margin-top:29px;max-width:440px;font-size:10px;line-height:1.65;color:#b6acab}
.founder-intro>img{height:43px;width:43px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:1px solid #ed817466;flex-shrink:0}
.founder-intro>span:not(.founder-arrow){display:flex;flex-direction:column;gap:2px}.founder-intro strong{font-size:12px;color:#f6eee9;font-weight:600}.founder-arrow{font-size:20px;color:var(--accent);margin-left:3px}
.service-card{background:linear-gradient(145deg,#242020,#1b1818);border-color:#504141;border-radius:12px}.service-card-featured{background:linear-gradient(145deg,#302020,#211919);border-color:#97514c}
.service-outcome{border-top-color:#d8b8b322}.service-number{color:#a07873}.service-card>p{color:#c4b9b6}.tag-list li{border-color:#67514d;color:#d4c4bd}.service-link{border-top-color:#d8b8b322}
.references{background:#1b1717;border-top-color:#493333;border-bottom-color:#493333}.reference-card{background:#231e1e;border-color:#55403c;border-radius:var(--jbit-radius-feature)}.reference-copy h3{letter-spacing:-.045em}.reference-copy .reference-title{font-size:21px;color:#f0d9d1}.reference-copy>p{color:#c9bfba}.reference-copy li{color:#cfc2ba}.reference-copy>p.reference-status{color:#baa9a2;border-top-color:#6f514633}.reference-status strong{color:#e6d0c5}.reference-category{letter-spacing:.12em}
.showcase{background:#f1ede7}.showcase .section-heading{margin-bottom:44px}.demo-panel{box-shadow:0 16px 40px #351b1809;border-radius:var(--jbit-radius-feature)}.showcase-tabs button[aria-selected=true]{border-top-width:2px}.showcase-tabs button{padding-block:19px}
.process-grid article>span{border-color:#72504a}.process-grid h3{font-size:28px}.process-grid p{color:#c1b6b0}
.about{grid-template-columns:.9fr 1.1fr;gap:78px;align-items:start;padding-top:18px}.about-art.portrait-card{height:600px;position:sticky;top:115px;box-shadow:0 25px 60px #0003;border-radius:var(--jbit-radius-feature)}.about-portrait{object-position:center 17%}.about-copy h2{font-size:46px;line-height:1.1}.about-lead{font-family:var(--jbit-font-editorial);font-size:25px;font-style:italic;line-height:1.5;color:#e6c4bb;margin-top:27px}.about-copy>p:not(.about-lead){font-size:15px;color:#c1b5af}
.personal-principles{margin-top:27px;border-top:1px solid #6f504555}.personal-principles article{display:flex;gap:17px;border-bottom:1px solid #6f504533;padding:17px 0}.personal-principles article>span{font-family:var(--display);font-size:11px;color:var(--accent);padding-top:3px}.personal-principles h3{font-family:var(--font);font-size:14px;letter-spacing:0;line-height:1.5;font-weight:600;color:#eadecf}.personal-principles p{font-size:12px;line-height:1.8;color:#b9aba5;margin-top:4px;max-width:390px}.about-copy>p.about-signature{border:0;padding-top:0;color:#d6bdb4;font-size:11px}.about-copy>.text-link{margin-top:20px}
.contact{background:linear-gradient(125deg,#b52130,#9a1e29);box-shadow:0 20px 65px #540c1320;border:1px solid #ec6e6855;border-radius:var(--jbit-radius-feature)}.contact .contact-intro>p{line-height:1.8}.contact .form-progress{padding-bottom:20px}.contact .project-form fieldset{margin-top:26px}.contact .project-form input:not([type=checkbox]),.contact .project-form textarea{border-bottom-color:#ffccc377}.contact .form-note{margin-top:20px}
.footer-main{padding-bottom:36px}.footer-main>p{font-family:var(--jbit-font-editorial);font-style:italic;font-size:18px;color:#c9b4a8}.footer-bottom{color:#9e8e85}
@media(max-width:1150px){.about{gap:45px}.about-copy h2{font-size:39px}.about-art.portrait-card{height:610px}.about-lead{font-size:23px}.founder-intro{font-size:10px}.hero-actions .button{gap:14px}}
@media(max-width:900px){.hero-actions{align-items:flex-start}.about{gap:32px}.about-copy h2{font-size:34px}.about-art.portrait-card{height:530px}.about-lead{font-size:21px}.personal-principles h3{font-size:13px}.personal-principles p{font-size:12px}.reference-copy .reference-title{font-size:20px}.founder-intro{gap:10px;font-size:9px}.founder-intro strong{font-size:11px}}
@media(max-width:650px){.hero{padding-bottom:36px}.founder-intro{font-size:10px;gap:12px;max-width:100%;margin-top:28px}.founder-intro>img{width:44px;height:44px}.founder-intro strong{font-size:12px}.founder-arrow{display:none}.hero-actions .button{font-size:12px}.about{grid-template-columns:1fr;gap:30px;padding-top:0}.about-art.portrait-card{height:365px;position:relative;top:auto}.about-copy h2{font-size:37px}.about-lead{font-size:24px}.personal-principles h3{font-size:15px}.personal-principles p{font-size:13px}.personal-principles article{padding-block:18px}.about-copy>p.about-signature{font-size:12px}.footer-main>p{font-size:15px;max-width:180px}.contact{border-radius:12px}.process-grid h3{font-size:24px}}
@media(max-width:360px){.founder-intro{font-size:9px}.about-art.portrait-card{height:335px}.about-copy h2{font-size:33px}.about-lead{font-size:22px}}

/* A shorter home page, with real work at the centre of the story. */
.home-page .hero-copy{min-width:0}
.home-page .hero{grid-template-columns:1fr 1fr;gap:64px;min-height:0;padding-block:66px 76px;align-items:center}
.home-page .hero-description{max-width:480px;font-size:16px;line-height:1.85;color:#d2c7c4}.home-page .hero h1{font-size:clamp(55px,6.2vw,86px)}.home-page .hero-actions{flex-wrap:wrap}
.hero-projects{min-width:0}.hero-projects-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;color:#ad9690}.hero-projects-label>.eyebrow{font-size:9px}.hero-projects-label>span:last-child{font-size:25px;color:var(--accent)}
.hero-project-main{display:block;border:1px solid #68514d;border-radius:var(--jbit-radius-card);overflow:hidden;background:#242020;box-shadow:0 20px 50px #0002;transition:border-color var(--jbit-motion-fast)}
.project-browser{height:34px;padding:0 14px;display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:9px;letter-spacing:.1em;color:#ac9d98}.project-browser>span:first-child{display:flex;gap:4px}.project-browser i{width:4px;height:4px;background:#9b6860;border-radius:50%}.hero-project-main>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;background:#171313}.hero-project-caption{padding:13px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.hero-project-caption strong{font-size:11px;font-weight:600;min-width:0;min-block-size:2lh;display:flex;align-items:center}.hero-project-caption>span{font-size:10px;color:#f7aca1;white-space:nowrap}
.hero-project-secondary{display:flex;align-items:center;gap:17px;padding:12px;margin-top:16px;border:1px solid #57413d;border-radius:9px;background:#251c1d;transition:border-color var(--jbit-motion-fast)}.hero-project-secondary>img{width:100px;height:64px;object-fit:cover;object-position:top;border-radius:var(--jbit-radius-small)}.hero-project-secondary>span:nth-child(2){display:flex;flex-direction:column;gap:6px}.hero-project-secondary small{font-size:8px;letter-spacing:.09em;color:#d29186}.hero-project-secondary strong{font-family:var(--display);font-size:17px;font-weight:500;letter-spacing:-.035em}.hero-project-secondary>span:last-child{margin-left:auto;color:var(--accent);font-size:23px;padding-right:5px}.hero-projects-note{font-size:10px;color:#b6a29a;margin-top:14px}
.home-page .references{background:#f0ece6;color:#2c2425;padding-block:76px;border:0}.home-page .references .section-index,.home-page .reference-category{color:#a1242c}.home-page .references .muted{color:#81736e}.home-page .references .section-heading>p{color:#665956;font-size:14px;width:300px}.home-page .reference-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.home-page .reference-card{background:#faf7f2;border:1px solid #d8cbc2;border-radius:var(--jbit-radius-card);display:flex;flex-direction:column}.reference-visual{display:block;position:relative;overflow:hidden;border-bottom:1px solid #ded4cc}.reference-image-arrow{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:33px;height:33px;background:#b82530;color:#fff;border-radius:50%;font-size:19px}.home-page .reference-copy{padding:23px;display:flex;flex:1;flex-direction:column}.home-page .reference-copy h3{font-size:24px;margin-top:10px;line-height:1.18;min-height:57px}.home-page .reference-category{font-size:11px;line-height:1.6;letter-spacing:.06em;color:#8f2029}.home-page .reference-copy>p{font-size:14px;line-height:1.8;color:#6b5c57;margin:10px 0 21px}.reference-cta{font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#a1242c;margin-top:auto}.reference-cta>span{font-size:22px}.reference-stage{font-size:12px;line-height:1.8;color:#665650;border-top:1px solid #dfd3c9;margin-top:17px;padding-top:13px}.home-page .reference-note{color:#81716b;font-size:10px;margin-top:19px}
.more-projects{border-top:1px solid #cfc0b6;border-bottom:1px solid #cfc0b6;margin-top:28px}.more-projects summary{cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-size:12px;font-weight:600;padding:18px 0;list-style:none}.more-projects summary::-webkit-details-marker{display:none}.more-projects-count{color:#a1242c;font-family:var(--display);font-size:13px;white-space:nowrap}.more-projects[open] .more-projects-count{font-size:0}.more-projects[open] .more-projects-count:after{content:'−';font-size:20px;line-height:1}.more-projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:8px 0 26px}.more-projects-grid article{display:grid;grid-template-columns:100px 1fr;gap:17px;align-items:start}.more-projects-grid img{display:block;width:100%;height:80px;object-fit:cover;object-position:top;border:1px solid #d5c9c0;border-radius:var(--jbit-radius-small)}.more-projects-grid h3{font-size:20px;margin-top:6px;line-height:1.25}.more-projects-grid p{font-size:11px;line-height:1.8;color:#6b5c57;margin-top:9px}.more-projects-grid p.reference-status{font-size:10px;color:#7c6760}
.home-page .section-space{padding-block:76px}.home-page .service-card{min-height:0}.home-page .service-card>p{margin-bottom:24px;font-size:14px}.home-page .service-link{margin-top:auto}.home-page .service-top{margin-bottom:24px}.home-page .service-card h3{font-size:30px}.home-page .service-footnote{margin-top:24px}.home-page .process{padding-top:0}.home-page .process-grid{margin-top:32px}.home-page .process-grid p{font-size:13px}.home-page .about{padding-block:0}.home-page .about-art.portrait-card{height:565px}.home-page .about-copy h2{font-size:42px}.home-page .about-lead{font-size:23px}.home-page .about-copy>p:not(.about-lead){font-size:14px}.home-page .personal-principles{margin-top:20px}.home-page .personal-principles article{padding-block:13px}.home-page .about-copy>p.about-signature{margin-top:20px;font-size:11px}.home-page .faq{padding-block:70px}.home-page .contact{margin-top:0}
@media(hover:hover){.hero-project-main:hover,.hero-project-secondary:hover{border-color:#f57569}.reference-visual:hover .reference-image-arrow{background:#8e1d27}.reference-cta:hover{color:#761b23}.more-projects summary:hover{color:#a1242c}}
@media(max-width:1100px){.home-page .hero{gap:36px}.home-page .hero h1{font-size:6.4vw}.hero-project-secondary strong{font-size:15px}.hero-project-secondary small{font-size:7px}.hero-project-secondary>img{width:86px;height:60px}.home-page .reference-copy{padding:20px}.home-page .reference-copy h3{font-size:23px}.home-page .reference-grid{gap:17px}.home-page .about-art.portrait-card{height:600px}}
@media(max-width:900px){.home-page .hero{gap:28px;padding-block:44px 56px}.home-page .hero h1{font-size:6.5vw}.home-page .hero-actions{gap:18px;flex-wrap:wrap}.home-page .reference-grid{grid-template-columns:1fr 1fr}.home-page .reference-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.home-page .reference-card:last-child .reference-visual{border-bottom:0;border-right:1px solid #ded4cc;display:flex;align-items:center;background:#e5dfd8}.home-page .reference-card:last-child .reference-copy h3{min-height:0}.home-page .about-copy h2{font-size:34px}.home-page .about-art.portrait-card{height:625px}.home-page .more-projects-grid{grid-template-columns:1fr}}
@media(max-width:650px){.home-page .hero{grid-template-columns:1fr;gap:30px;padding-block:38px 43px}.home-page .hero h1{font-size:clamp(45px,11.5vw,74px)}.home-page .hero-description{line-height:1.8}.home-page .hero-actions{gap:23px}.home-page .hero-projects{margin-top:0}.hero-projects-label{margin-bottom:11px}.hero-projects-label>.eyebrow{font-size:8px}.hero-project-caption{padding:12px}.hero-project-caption strong{font-size:10px}.hero-project-caption>span{font-size:9px}.hero-project-secondary{gap:14px;margin-top:12px;padding:10px}.hero-project-secondary strong{font-size:16px}.hero-project-secondary small{font-size:7px}.hero-project-secondary>img{width:83px;height:55px}.hero-projects-note{font-size:9px}.home-page .references{padding-block:52px}.home-page .references .section-heading>p{width:auto;font-size:15px}.home-page .reference-grid{grid-template-columns:1fr;gap:20px}.home-page .reference-card:last-child{display:flex;grid-column:auto}.home-page .reference-card:last-child .reference-visual{display:block;border:0;border-bottom:1px solid #ded4cc}.home-page .reference-copy{padding:22px}.home-page .reference-copy h3{min-height:0;font-size:27px}.home-page .reference-copy>p{font-size:15px;margin-top:13px}.reference-cta{font-size:12px}.home-page .reference-note{font-size:10px}.more-projects summary{font-size:12px;padding-block:18px}.more-projects-grid article{grid-template-columns:82px 1fr;gap:13px}.more-projects-grid h3{font-size:21px}.more-projects-grid p{font-size:12px}.more-projects-grid p.reference-status{font-size:11px}.home-page .section-space{padding-block:55px}.home-page .service-card h3{font-size:30px}.home-page .service-card>p{font-size:15px;margin-bottom:24px}.home-page .service-top{margin-bottom:20px}.home-page .process{padding-top:0}.home-page .process-grid{gap:28px 24px}.home-page .process-grid h3{font-size:24px}.home-page .process-grid p{font-size:13px}.home-page .about-art.portrait-card{height:365px}.home-page .about-copy h2{font-size:36px}.home-page .about-lead{font-size:23px}.home-page .about-copy>p:not(.about-lead){font-size:15px}.home-page .personal-principles article{padding-block:15px}.home-page .faq{padding-block:55px}.home-page .contact{margin-top:0}}
@media(max-width:360px){.hero-project-secondary strong{font-size:14px}.hero-project-secondary>img{width:67px}.hero-project-secondary{gap:10px}.hero-project-caption{gap:6px}.hero-project-caption strong{font-size:9px}.hero-project-caption>span{font-size:8px}.home-page .about-art.portrait-card{height:335px}.home-page .about-copy h2{font-size:33px}}
@media(prefers-reduced-motion:reduce){.hero-project-main,.hero-project-secondary{transition:none}}
.more-projects-grid .reference-cta{margin-top:14px;max-width:260px}

/* Clearer offer and readable supporting information. */
.home-page .hero .eyebrow{font-size:11px;letter-spacing:.1em;color:#e7c3bd}
.founder-intro{font-size:12px;color:#c5bab7;max-width:480px}
.founder-intro strong{font-size:13px}
.hero-availability{font-size:12px;line-height:1.7;color:#d2bfba}
.desktop-nav a{font-size:13px}
.hero-projects-label .eyebrow{font-size:11px}
.project-browser{font-size:10px}
.hero-project-caption strong{font-size:12px}
.hero-project-caption>span{font-size:11px}
.hero-project-secondary small{font-size:10px}
.hero-projects-note{font-size:12px;line-height:1.7;color:#c6b5ae}
.reference-cta{font-size:13px;min-height:44px}
.home-page .reference-note{font-size:12px;color:#6b5b55}
.more-projects summary{font-size:14px;min-height:54px;align-items:center}
.more-projects-grid p,.more-projects-grid p.reference-status{font-size:13px}
.more-projects-grid p.reference-status{color:#7d282d;font-weight:600}
.home-page .personal-principles p{font-size:14px;color:#c9bcb5}
.home-page .about-copy>p.about-signature{font-size:12px}
.footer-bottom{font-size:12px;color:#b8a69c}
@media(max-width:900px){
  .founder-intro{font-size:11px}.founder-intro strong{font-size:12px}
  .hero-project-secondary small{font-size:9px}
}
@media(max-width:650px){
  .home-page .hero .eyebrow{font-size:10px;line-height:1.8;letter-spacing:.06em}
  .home-page .hero-actions .button{font-size:13px}
  .founder-intro{font-size:12px;max-width:100%}
  .hero-projects-label .eyebrow{font-size:10px}
  .hero-project-caption strong{font-size:11px}
  .hero-project-caption>span{font-size:10px}
  .home-page .reference-note{font-size:12px;line-height:1.8}
  .more-projects-grid p,.more-projects-grid p.reference-status{font-size:13px}
  .more-projects summary{gap:15px}
}

/* Keep the complete website capture visible in each project card. */
.home-page .reference-visual img{aspect-ratio:16/9;object-fit:contain;background:#e9e4df}

/* contact.css */
/* Direct enquiries: a personal invitation, a clear route, and honest feedback. */
.contact {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 66px;
  padding: 60px;
  color: #fff7f2;
  background: linear-gradient(125deg, #b52130, #9a1e29);
}
.contact .contact-intro,
.contact .contact-enquiry { min-width: 0; }
.contact .contact-intro { display: block; }
.contact .contact-intro .eyebrow { color: #ffe2da; font-size: 10px; }
.contact .contact-intro h2 {
  font-size: clamp(60px, 6.1vw, 80px);
  line-height: 1.01;
  letter-spacing: -.065em;
  margin-top: 27px;
  padding-right: 32px;
}
.contact .contact-intro h2 em { color: #ffd0c4; }
.contact .contact-intro h2 > span { right: 0; top: 39px; font-size: 53px; color: #f9b7aa; }
html[lang='en'] .contact .contact-intro h2 { font-size: clamp(60px, 6.1vw, 80px); }
.contact .contact-intro > p { font-size: 14px; line-height: 1.85; max-width: 350px; margin-top: 24px; }
.contact .contact-availability {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #ffcfbf66;
  border-radius: 7px;
  padding: 12px 14px;
  margin-top: 26px;
  color: #fff2e9;
  font-size: 12px;
  line-height: 1.75;
  max-width: 370px;
  background: #ffffff08;
}
.contact-availability .status-dot { width: 5px; height: 5px; margin-top: 8px; background: #ffe5ce; box-shadow: 0 0 0 4px #ffe5ce15; }
.contact .contact-email {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 15px;
  padding: 21px 0;
  margin-top: 13px;
  border-bottom: 1px solid #ffbbaa55;
  max-width: 370px;
}
.contact-email small { grid-column: 1; color: #ffd3c7; font-size: 11px; }
.contact-email strong { grid-column: 1; font-size: 16px; font-weight: 500; letter-spacing: -.025em; overflow-wrap: anywhere; line-height: 1.6; }
.contact-email > span { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 27px; color: #ffd3c7; }
.contact-next { max-width: 370px; margin-top: 26px; }
.contact-next h3 { font-family: var(--font); font-size: 12px; letter-spacing: 0; font-weight: 600; line-height: 1.65; }
.contact-next ol { counter-reset: contact-step; list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.contact-next li { display: flex; align-items: baseline; gap: 11px; color: #ffe3db; font-size: 12px; line-height: 1.75; }
.contact-next li::before { counter-increment: contact-step; content: '0' counter(contact-step); font-family: var(--display); color: #ffc2b3; font-size: 10px; flex-shrink: 0; }
.contact .contact-enquiry { padding-top: 3px; }
.contact .contact-enquiry .form-progress { align-items: center; padding-bottom: 18px; border-color: #ffbbaa66; }
.contact .contact-enquiry .form-progress > span:first-child { font-size: 13px; letter-spacing: -.015em; }
.contact .local-draft-badge { padding: 4px 8px; border: 1px solid #ffcfbf66; border-radius: 4px; font-size: 9px; color: #ffe8df; max-width: none; }
.contact .contact-enquiry fieldset { margin-block: 24px; }
.contact .contact-enquiry legend,
.contact .contact-enquiry label > span { font-size: 12px; line-height: 1.6; }
.contact .contact-enquiry .service-choices { gap: 7px; margin-top: 11px; }
.contact .contact-enquiry .service-choices label > span { font-size: 10px; padding: 9px 11px; min-height: 39px; display: flex; align-items: center; }
.contact .contact-enquiry .service-choices input:checked + span { color: #8a1823; background: #fff2e8; border-color: #fff2e8; }
.contact .contact-enquiry .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.contact .contact-enquiry label { min-width: 0; }
.contact .contact-enquiry input:not([type='checkbox']),
.contact .contact-enquiry textarea { font-size: 14px; padding-block: 11px; border-color: #ffc6b77a; line-height: 1.8; }
.contact .contact-enquiry input::placeholder,
.contact .contact-enquiry textarea::placeholder { color: #f4c9c0 !important; opacity: 1; }
.contact .contact-enquiry input:focus,
.contact .contact-enquiry textarea:focus { border-bottom-color: #fff3e8; }
.contact .contact-enquiry .company-field,
.contact .contact-enquiry .message-label { display: block; margin-top: 23px; }
.contact .contact-enquiry textarea { min-height: 104px; }
.contact .contact-consent { margin-top: 20px; }
.contact .contact-consent,
.contact .contact-consent > label { display: flex; align-items: flex-start; gap: 10px; }
.contact .contact-consent input[type='checkbox'] { width: 17px; height: 17px; flex: 0 0 17px; margin: 4px 0 0; accent-color: #581522; cursor: pointer; }
.contact .contact-consent > span,
.contact .contact-consent label > span { font-size: 11px; line-height: 1.8; color: #fff0e8; font-weight: 400; }
.contact .contact-consent button { display: inline; border: 0; border-radius: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #ffccba; }
.contact .contact-enquiry .form-note { margin-top: 15px; font-size: 10px; line-height: 1.8; color: #ffe1d7 !important; }
.contact .contact-enquiry > .button { margin-top: 24px; font-size: 12px; min-height: 54px; gap: 28px; }
.contact .contact-enquiry > .button:disabled { opacity: .72; }
.contact .contact-enquiry .form-required { margin-left: 13px; font-size: 9px; color: #ffdbce !important; }
.contact .contact-status { margin-top: 20px; padding: 15px 17px; border: 1px solid #ffcdba77; border-radius: 6px; font-size: 12px; line-height: 1.8; background: #66172244; color: #fff5eb; overflow-wrap: anywhere; }
.contact .contact-status[data-state='success'] { border-color: #ffe4ca; background: #fff0df; color: #69212a; }
.contact .contact-status[data-state='error'] { border-color: #ffdfbf; background: #541623; }
.contact .contact-fallback { margin-top: 17px; font-size: 11px; line-height: 1.8; color: #ffe3d7; }
.contact .contact-fallback .text-link { margin-top: 8px; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact .contact-success-actions { margin-top: 17px; }
.contact .contact-success-actions button { font-size: 11px; min-height: 43px; }
.contact .contact-honey { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact :focus-visible { outline: 2px solid #fff1e3; outline-offset: 4px; }
.hero-availability { display: flex; align-items: flex-start; gap: 9px; margin-top: 21px; font-size: 12px; line-height: 1.8; color: #c3b3a9; max-width: 440px; }
.hero-availability .status-dot { margin-top: 7px; width: 5px; height: 5px; }
@media (hover: hover) {
  .contact-email:hover strong { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .contact .contact-fallback .text-link:hover { color: #fff8f0; }
  .contact .contact-consent button:hover { text-decoration-color: #fff; }
}
@media (max-width: 1150px) {
  .contact { padding: 44px; gap: 42px; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .contact .contact-intro h2 { font-size: 70px; }
  .contact .contact-intro h2 > span { font-size: 42px; top: 39px; }
  .contact-email strong { font-size: 15px; }
  .contact .contact-enquiry .service-choices label > span { padding-inline: 9px; font-size: 10px; }
}
@media (max-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr); gap: 35px; padding: 42px; }
  .contact .contact-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .contact .contact-intro > .eyebrow { grid-column: 1 / -1; }
  .contact .contact-intro h2 { grid-column: 1; grid-row: 2 / 4; font-size: 72px; margin-top: 25px; }
  .contact .contact-intro > p { grid-column: 2; grid-row: 2; font-size: 14px; margin-top: 28px; }
  .contact .contact-availability { grid-column: 2; grid-row: 3; margin-top: 17px; font-size: 11px; }
  .contact .contact-email { grid-column: 1; margin-top: 13px; align-self: start; }
  .contact .contact-next { grid-column: 2; margin-top: 28px; }
  .contact .contact-enquiry { border-top: 1px solid #ffbbaa66; padding-top: 28px; }
  .contact .contact-enquiry .service-choices label > span { font-size: 12px; padding: 10px 14px; }
  .contact .contact-enquiry legend,
  .contact .contact-enquiry label > span { font-size: 13px; }
  .contact .contact-consent > span,
  .contact .contact-consent label > span { font-size: 12px; font-weight: 400; }
  .contact .contact-enquiry input:not([type='checkbox']),
  .contact .contact-enquiry textarea { font-size: 16px; }
  .contact .contact-enquiry .form-note { font-size: 11px; }
}
@media (max-width: 650px) {
  .contact { width: calc(100% - 24px); padding: 33px 25px; gap: 29px; }
  .contact .contact-intro { display: block; }
  .contact .contact-intro .eyebrow { font-size: 9px; }
  .contact .contact-intro h2,
  html[lang='en'] .contact .contact-intro h2 { font-size: clamp(58px, 17vw, 76px); margin-top: 24px; padding-right: 20px; }
  .contact .contact-intro h2 > span { right: 9px; top: 32px; font-size: 45px; }
  .contact .contact-intro > p { font-size: 14px; margin-top: 23px; max-width: none; }
  .contact .contact-availability { max-width: none; margin-top: 23px; font-size: 12px; padding: 12px 13px; }
  .contact .contact-email { max-width: none; margin-top: 11px; padding-block: 19px; }
  .contact-email strong { font-size: 15px; }
  .contact-next { max-width: none; margin-top: 23px; }
  .contact-next h3 { font-size: 13px; }
  .contact-next li { font-size: 12px; }
  .contact .contact-enquiry { padding-top: 24px; }
  .contact .contact-enquiry .form-progress { gap: 10px; }
  .contact .contact-enquiry .form-progress > span:first-child { font-size: 12px; }
  .contact .local-draft-badge { font-size: 8px; padding: 4px 6px; max-width: 100px; }
  .contact .contact-enquiry .service-choices { gap: 7px; }
  .contact .contact-enquiry .service-choices label > span { font-size: 11px; min-height: 42px; padding: 10px 12px; }
  .contact .contact-enquiry .form-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .contact .contact-enquiry .company-field,
  .contact .contact-enquiry .message-label { margin-top: 22px; }
  .contact .contact-enquiry input:not([type='checkbox']),
  .contact .contact-enquiry textarea { font-size: 16px; }
  .contact .contact-enquiry textarea { min-height: 126px; }
  .contact .contact-enquiry .form-note { font-size: 11px; margin-top: 16px; }
  .contact .contact-enquiry > .button { width: 100%; justify-content: space-between; margin-top: 23px; }
  .contact .contact-enquiry .form-required { display: block; margin: 11px 0 0; font-size: 10px; }
  .contact .contact-status { padding: 14px; font-size: 12px; }
  .contact .contact-success-actions button { width: 100%; }
  .hero-availability { font-size: 12px; margin-top: 20px; }
}
@media (max-width: 360px) {
  .contact { padding-inline: 20px; }
  .contact .contact-intro h2,
  html[lang='en'] .contact .contact-intro h2 { font-size: 59px; }
  .contact .contact-intro h2 > span { font-size: 36px; right: 0; top: 35px; }
  .contact-email strong { font-size: 14px; }
  .contact-email > span { font-size: 22px; }
  .contact .contact-enquiry .service-choices label > span { font-size: 10px; padding-inline: 10px; }
  .contact .contact-enquiry .form-progress > span:first-child { font-size: 11px; }
  .contact .local-draft-badge { font-size: 8px; }
}
/* Legal links remain ordinary, directly reachable links. */
.contact-project-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 22px;
  padding: 14px 15px;
  border: 1px solid #ffd2c17a;
  border-left: 3px solid #ffd2c1;
  border-radius: 7px;
  background: #66131c35;
}
.contact-project-context[hidden] { display: none; }
.contact-project-context > div { min-width: 0; }
.contact-project-context #contact-project-label { display: block; color: #ffd2c1; font-size: 10px; line-height: 1.7; }
.contact-project-context strong { display: block; margin-top: 3px; color: #fff7f2; font-size: 13px; line-height: 1.6; }
.contact-project-context button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 44px; padding: 7px 10px; border: 1px solid #ffd2c157; border-radius: 5px; background: transparent; color: #fff0e8; font: inherit; font-size: 10px; line-height: 1.6; cursor: pointer; }
.contact-project-context button > span:last-child { font-size: 20px; line-height: 1; }
.contact-project-context button:hover { background: #fff2e910; border-color: #ffd2c1; }
.contact-project-context button:focus-visible { outline: 2px solid #fff0e8; outline-offset: 3px; }
.contact-project-context button:disabled { opacity: .55; cursor: default; }
@media (max-width: 650px) {
  .contact-project-context { align-items: flex-start; flex-direction: column; padding: 13px; }
  .contact-project-context button { align-self: flex-end; font-size: 11px; }
}
.contact-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px;display:inline-block;min-height:24px;}
.footer-bottom>div>a{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-size:inherit;text-decoration:none;}
.footer-bottom>div>a:hover,.footer-bottom>div>a:focus-visible{color:var(--accent);}

.service-deep-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px;padding-top:22px;border-top:1px solid var(--jbit-home-line);font-size:13px;color:var(--jbit-home-muted)}.service-deep-links a{display:inline-flex;align-items:center;min-height:44px}.service-deep-links a:hover{color:var(--jbit-home-accent)}

/* interactions.css */
/* Presentation effects: the underlying layout, photography and copy stay authored. */
.home-page .hero{isolation:isolate;overflow:visible}
.signal-field{position:absolute;inset:-1px calc(50% - var(--fx-half-viewport,50%));overflow:hidden;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 82% 35%,#7a172329,transparent 60%)}
.signal-grid{position:absolute;inset:0;background-image:linear-gradient(#ff7b6c0a 1px,transparent 1px),linear-gradient(90deg,#ff7b6c0a 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(90deg,transparent 5%,#000 75%,transparent),linear-gradient(transparent,#000 25%,#000 75%,transparent);mask-composite:intersect}
.signal-halo{position:absolute;inset:0;background:radial-gradient(370px circle at var(--pointer-x,75%) var(--pointer-y,40%),#e72d3922,transparent 75%);transition:opacity .5s}
.signal-orbit{position:absolute;width:760px;max-width:none;height:760px;right:-50px;top:50%;transform:translateY(-50%);opacity:.48;stroke:#ed655b33;stroke-width:1}
.signal-orbit>circle:nth-of-type(2){stroke-dasharray:2 12;opacity:.65}
.signal-arc{stroke-width:2.5;transform-origin:380px 380px;animation:signal-orbit 28s linear infinite}
.signal-node{fill:#ff9384;stroke:#ff938455;stroke-width:12;filter:drop-shadow(0 0 12px #f74150)}
.hero-copy,.hero-projects{position:relative}
.home-page .hero h1 em{background:linear-gradient(110deg,#ffaaa0,#ff6b63 40%,#ef354d 80%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-projects{perspective:1100px}
.hero-projects::before{content:"";position:absolute;inset:12% 0 0;background:radial-gradient(ellipse,#ff37471f,transparent 65%);filter:blur(25px);z-index:-1}
.hero-projects-label{gap:12px}
.hero-projects-label>.eyebrow{margin-bottom:0;min-width:0}
.showcase-toolbar{display:block;margin:-5px 0 14px}
.showcase-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border:1px solid #73524b77;background:#2117199c;border-radius:8px;width:100%}
.showcase-switch button{border:0;background:transparent;border-radius:5px;color:#bdaba8;font-size:11px;min-height:44px;padding:5px 11px;white-space:nowrap;text-align:left}
.showcase-switch button span{font-family:var(--display);font-size:9px;margin-right:6px;color:#947d76}
.showcase-switch button[aria-pressed=true]{background:#703038;color:#fff1ed;box-shadow:inset 0 0 0 1px #ff8a7b40}
.showcase-switch button[aria-pressed=true] span{color:#ffbcb1}
.motion-toggle{display:inline-flex;align-items:center;gap:7px;color:#baa39d;background:none;border:0;font-size:10px;min-height:44px;padding:5px 0;text-align:right;flex-shrink:0}
.motion-toggle svg{width:17px;height:17px;flex-shrink:0;color:var(--accent)}
.motion-toggle:disabled{cursor:default;opacity:.75}
.hero-project-main{box-shadow:0 28px 75px #0005,0 0 45px #e93c4310}
[data-depth]{--tilt-x:0deg;--tilt-y:0deg;--light-x:50%;--light-y:30%;position:relative;isolation:isolate;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .3s}
[data-depth]::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;background:radial-gradient(360px circle at var(--light-x) var(--light-y),#ffb4a619,transparent 70%);box-shadow:inset 0 0 0 1px #ff9a7d24}
.home-page .reference-card::after{background:radial-gradient(280px circle at var(--light-x) var(--light-y),#c9383420,transparent 70%);box-shadow:inset 0 0 0 1px #b22b3044}
.home-page .reference-image-arrow{transition:transform .3s,background .3s;box-shadow:0 3px 15px #6d172c25}
.home-page .reference-visual img{transition:filter .35s}
.process-grid article{position:relative;display:flex;flex-direction:column;transition:opacity .3s}
.process-grid article>span{position:relative;transition:color .3s,border-color .3s}
.process-grid article>span::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--accent);box-shadow:0 0 14px #ff6b6360;transition:width .4s}
.process-grid article.step-active>span{color:#ffc7bd;border-color:#b55450}
.process-grid article.step-active>span::before{width:100%}
.process-select{margin-top:auto;padding:18px 0 4px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:none;text-align:left;color:#bba5a0;font-size:11px;line-height:1.6;min-height:44px}
.process-select>span:last-child{font-size:19px;color:var(--accent)}
.step-active .process-select{color:#ffb3a7}
.process-grid article>p{margin-bottom:14px}
.process-detail{display:grid;grid-template-columns:58px minmax(0,1fr) 35px;gap:25px;align-items:start;margin-top:27px;padding:28px 30px;border:1px solid #68413e66;border-radius:12px;background:radial-gradient(ellipse at 0 0,#a52e3021,transparent 65%),#201a1b}
.process-detail-index{font-family:var(--display);font-size:38px;color:#ad504d;line-height:1}
.process-detail h3{font-size:24px;line-height:1.3;letter-spacing:-.03em}
.process-detail p{max-width:760px;font-size:14px;line-height:1.9;color:#c4b5b0;margin-top:10px}
.process-detail small{display:block;font-size:12px;color:#f4aea1;margin-top:13px}
.process-detail-symbol{font-size:27px;color:var(--accent);line-height:1}
.portrait-card[data-depth]::after{display:block;width:auto;height:auto;border:0;transform:none;background:radial-gradient(420px circle at var(--light-x) var(--light-y),#fff0df17,transparent 70%);z-index:3}
.fx-reveal{opacity:1;transform:none}
html[data-motion=on] .fx-reveal:not(.fx-visible){opacity:0;transform:translateY(20px)}
html[data-motion=on] .fx-reveal{transition:opacity .7s ease var(--reveal-delay,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.faq-list details[open]>p{animation:detail-enter .35s ease-out}
.faq-list summary>span:last-child{transition:transform .25s}
.faq-list details[open] summary>span:last-child{transform:rotate(45deg)}
@media(hover:hover) and (pointer:fine){
  html[data-motion=on] [data-depth].depth-active{transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px);border-color:#c4776a;box-shadow:0 20px 45px #0003}
  html[data-motion=on] [data-depth].depth-active::after{opacity:1}
  .reference-card:hover .reference-image-arrow{transform:rotate(8deg) scale(1.08)}
  .reference-card:hover .reference-visual img{filter:saturate(1.08)}
  .showcase-switch button:hover{color:#fff1eb}
  .motion-toggle:hover{color:#f7d2c8}
  .process-select:hover{color:#ffd0c5}
}
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=off] [data-depth]{transform:none!important}
.fx-document-hidden .signal-arc{animation-play-state:paused}
@keyframes signal-orbit{to{transform:rotate(360deg)}}
@keyframes detail-enter{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.showcase-switch{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-switch button{padding-inline:9px;font-size:11px}.motion-toggle{font-size:9px;max-width:115px}.signal-orbit{right:-200px;opacity:.35}}
@media(max-width:900px){.motion-toggle{max-width:none}.process-detail{gap:18px;grid-template-columns:42px minmax(0,1fr) 24px}.process-detail h3{font-size:22px}}
@media(max-width:650px){
  .signal-field{inset:0 calc(50% - var(--fx-half-viewport,50%))}
  .signal-grid{background-size:38px 38px;opacity:.65}
  .signal-orbit{width:600px;height:600px;right:-310px;top:35%;opacity:.3}
  .showcase-toolbar{margin:0 0 12px}
  .showcase-switch button{font-size:11px;min-height:44px;padding:6px 10px}
  .motion-toggle{font-size:10px;line-height:1.5;max-width:110px}
  .motion-toggle svg{width:15px}
  .process-detail{grid-template-columns:30px minmax(0,1fr);padding:22px 18px;gap:15px}
  .process-detail-index{font-size:27px}
  .process-detail-symbol{display:none}
  .process-detail h3{font-size:21px}
  .process-detail p{font-size:14px;line-height:1.8}
  .process-detail small{font-size:12px;line-height:1.7}
  .process-select{font-size:12px}
}
@media(max-width:360px){.showcase-switch button{font-size:10px;padding-inline:7px}.showcase-switch button span{margin-right:3px}.motion-toggle{font-size:9px;max-width:94px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-depth]{transform:none!important}
  html[data-motion=on] .fx-reveal:not(.fx-visible){opacity:1;transform:none}
}

/* reference-upgrade.css */
/* Project chapters. Keep the captures complete and the three stories distinct. */
.home-page .references {
  background: #f0ece6;
  color: #2c2425;
  padding-block: clamp(64px, 7.5vw, 112px);
  border: 0;
}

.home-page .references .section-heading {
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.home-page .references .section-heading > p {
  width: min(360px, 100%);
  font-size: 15px;
  line-height: 1.85;
  color: #665956;
}

.home-page .reference-grid.selected-projects {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 60px);
}

.home-page .reference-card.reference-premium,
.home-page .reference-card.reference-premium:last-child {
  --chapter-ink: #30272a;
  --chapter-copy: #655852;
  --chapter-soft: #75645d;
  --chapter-line: #d8c9bf;
  --chapter-accent: #a52531;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-column: auto;
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  width: 100%;
  min-width: 0;
  padding: clamp(22px, 3.2vw, 48px);
  border: 1px solid #d8c9bf;
  border-radius: 16px;
  background: #fbf8f3;
  box-shadow: none;
  overflow: hidden;
}

/* A large chapter is an editorial section, so it does not tilt on hover. */
html[data-motion=on] .home-page .reference-card.reference-premium[data-depth].depth-active {
  transform: none;
  border-color: #bd9a8d;
  box-shadow: none;
}

.home-page .reference-card.reference-premium::after { display: none; }

.home-page .reference-card.reference-premium[data-reference-project=bellissimo] {
  --chapter-ink: #faf2e9;
  --chapter-copy: #d0bfb6;
  --chapter-soft: #bda69a;
  --chapter-line: #62494b;
  --chapter-accent: #ff9b8e;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  border-color: #3e292d;
  background: #291f22;
}

.reference-premium[data-reference-project=bellissimo] .reference-window { order: 2; }
.reference-premium[data-reference-project=bellissimo] .reference-copy { order: 1; }

.reference-premium .reference-window {
  min-width: 0;
  width: 100%;
  align-self: center;
  background: #eae3dc;
  border: 1px solid #342729;
  border-radius: 9px;
  box-shadow: 0 16px 38px #382b261c;
  overflow: hidden;
}

.reference-premium .reference-window-bar {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  border-bottom: 1px solid #584044;
  background: #302327;
  color: #e4d0c7;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .07em;
}

.reference-premium .reference-window-dots { display: flex; gap: 5px; }
.reference-premium .reference-window-dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ed756e;
}
.reference-premium .reference-window-dots i:nth-child(2) { opacity: .55; }
.reference-premium .reference-window-dots i:nth-child(3) { opacity: .28; }
.reference-premium .reference-window-name { overflow-wrap: anywhere; }
.reference-premium .reference-window-index { color: #f3aaa0; }

.home-page .reference-premium .reference-visual,
.home-page .reference-premium:last-child .reference-visual {
  display: block;
  border: 0;
  background: #eae3dc;
}

/* This also overrides the inspector's earlier IMB crop rule. */
.home-page .reference-card.reference-premium[data-reference-project] .reference-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #eae3dc;
}

.home-page .reference-premium .reference-image-arrow {
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid #fffc;
  background: #a7222c;
  box-shadow: 0 4px 16px #44172226;
}

.home-page .reference-premium .reference-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0;
}

.reference-premium .reference-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.home-page .reference-premium .reference-category {
  min-width: 0;
  color: var(--chapter-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.7;
}

.reference-premium .reference-number {
  flex-shrink: 0;
  color: var(--chapter-soft);
  font-family: var(--display);
  font-size: 11px;
  line-height: 1.7;
  white-space: nowrap;
}

.home-page .reference-premium .reference-copy h3 {
  min-height: 0;
  min-block-size: 0;
  margin: 16px 0 0;
  color: var(--chapter-ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -.01em;
}

.home-page .reference-premium .reference-copy > .reference-title {
  margin: 10px 0 0;
  color: var(--chapter-ink);
  font-family: var(--display);
  font-size: clamp(29px, 3vw, 43px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.home-page .reference-premium .reference-copy > .reference-summary {
  min-block-size: 0;
  margin: 20px 0 24px;
  color: var(--chapter-copy);
  font-size: 14px;
  line-height: 1.85;
}

.reference-premium .reference-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 19px 0;
  border-top: 1px solid var(--chapter-line);
  border-bottom: 1px solid var(--chapter-line);
}

.reference-premium .reference-fact > strong {
  color: var(--chapter-accent);
  font-family: var(--display);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.06em;
}

.reference-premium .reference-fact-label {
  display: block;
  color: var(--chapter-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.reference-premium .reference-fact-detail {
  display: block;
  margin-top: 3px;
  color: var(--chapter-soft);
  font-size: 12px;
  line-height: 1.7;
}

.reference-premium .reference-build {
  margin: 0 0 20px;
  border-bottom: 1px solid var(--chapter-line);
}

.reference-premium .reference-build > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 13px 0;
  cursor: pointer;
  list-style: none;
  color: var(--chapter-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}
.reference-premium .reference-build > summary::-webkit-details-marker { display: none; }
.reference-premium .reference-build-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--chapter-line);
  border-radius: 50%;
  color: var(--chapter-accent);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform .25s ease;
}
.reference-premium .reference-build[open] .reference-build-toggle { transform: rotate(45deg); }
.reference-premium .reference-build-content { padding: 0 0 20px; }
.home-page .reference-premium .reference-build-content ul {
  display: grid;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-page .reference-premium .reference-build-content li {
  position: relative;
  padding-left: 18px;
  color: var(--chapter-copy);
  font-size: 13px;
  line-height: 1.8;
}
.home-page .reference-premium .reference-build-content li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: .65em;
  width: 5px;
  height: 5px;
  border: 1px solid var(--chapter-accent);
  border-radius: 50%;
}

.home-page .reference-premium .reference-cta {
  min-height: 50px;
  padding: 12px 17px;
  border: 1px solid #a7222c;
  border-radius: 5px;
  background: #a7222c;
  color: #fff9f5;
  font-size: 13px;
  line-height: 1.7;
  transition: background .2s ease;
}
.home-page .reference-premium .reference-cta > span {
  display: block;
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  transition: transform .25s ease;
}
.home-page .reference-premium .reference-stage {
  margin-top: 16px;
  padding-top: 0;
  border: 0;
  color: var(--chapter-soft);
  font-size: 11px;
  line-height: 1.8;
}

.reference-premium :is(.reference-visual, .reference-cta, .reference-build > summary):focus-visible {
  outline: 2px solid var(--chapter-accent);
  outline-offset: 5px;
}
.reference-premium .reference-visual:focus-visible { outline-offset: -4px; }

.home-page .references .more-projects {
  margin-top: clamp(36px, 4vw, 64px);
}
.home-page .references .more-projects > summary {
  min-height: 70px;
  padding-block: 20px;
  font-size: 16px;
}
.home-page .references .more-projects-grid {
  gap: 36px;
  padding-block: 14px 30px;
}
.home-page .references .more-projects-grid article {
  grid-template-columns: minmax(100px, .65fr) minmax(0, 1fr);
  gap: 22px;
}
.home-page .references .more-projects-grid img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.home-page .references .reference-note {
  max-width: 800px;
  margin-top: 25px;
  color: #75645d;
  font-size: 12px;
  line-height: 1.85;
}

@media (hover: hover) and (pointer: fine) {
  .reference-premium .reference-build > summary:hover { color: var(--chapter-accent); }
  .home-page .reference-premium .reference-cta:hover { background: #8d1c26; }
  html[data-motion=on] .reference-premium .reference-cta:hover > span { transform: translate(2px, -2px); }
}

@media (max-width: 1100px) {
  .home-page .reference-card.reference-premium,
  .home-page .reference-card.reference-premium:last-child {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 28px;
    padding: 26px;
  }
  .home-page .reference-card.reference-premium[data-reference-project=bellissimo] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .home-page .reference-premium .reference-copy > .reference-title { font-size: 31px; }
}

@media (max-width: 820px) {
  .home-page .reference-card.reference-premium,
  .home-page .reference-card.reference-premium:last-child,
  .home-page .reference-card.reference-premium[data-reference-project=bellissimo] {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 28px;
  }
  .reference-premium[data-reference-project=bellissimo] .reference-window,
  .reference-premium[data-reference-project=bellissimo] .reference-copy { order: initial; }
  .home-page .reference-premium .reference-copy > .reference-title { font-size: clamp(30px, 5vw, 40px); }
  .home-page .reference-premium .reference-copy > .reference-summary { font-size: 15px; }
  .reference-premium .reference-fact { padding-block: 17px; }
  .home-page .reference-premium .reference-cta { max-width: 360px; width: 100%; }
}

@media (max-width: 650px) {
  .home-page .references { padding-block: 58px; }
  .home-page .references .section-heading { margin-bottom: 34px; }
  .home-page .references .section-heading > p { width: auto; }
  .home-page .reference-grid.selected-projects { gap: 26px; }
  .home-page .reference-card.reference-premium,
  .home-page .reference-card.reference-premium:last-child,
  .home-page .reference-card.reference-premium[data-reference-project=bellissimo] {
    padding: 17px;
    gap: 25px;
    border-radius: 11px;
  }
  .reference-premium .reference-window { border-radius: 5px; }
  .reference-premium .reference-window-bar { grid-template-columns: 27px minmax(0,1fr) 24px; padding-inline: 10px; gap: 6px; font-size: 8px; }
  .reference-premium .reference-window-dots { gap: 3px; }
  .reference-premium .reference-window-dots i { width: 5px; height: 5px; }
  .home-page .reference-premium .reference-copy h3 { font-size: 13px; margin-top: 12px; }
  .home-page .reference-premium .reference-copy > .reference-title { font-size: clamp(28px, 7.5vw, 38px); }
  .home-page .reference-premium .reference-copy > .reference-summary { margin-block: 16px 22px; font-size: 14px; }
  .home-page .reference-premium .reference-category { font-size: 10px; }
  .reference-premium .reference-meta { gap: 10px; }
  .reference-premium .reference-number { font-size: 10px; }
  .reference-premium .reference-fact > strong { font-size: 39px; }
  .reference-premium .reference-build > summary { font-size: 12px; }
  .home-page .reference-premium .reference-stage { font-size: 11px; }
  .home-page .references .more-projects-grid article { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .home-page .references .more-projects-grid { gap: 30px; }
  .home-page .references .more-projects > summary { font-size: 14px; }
  .home-page .references .more-projects-grid h3 { font-size: 26px; }
}

html[data-motion=off] .reference-premium .reference-build-toggle { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reference-premium *, .reference-premium *::before, .reference-premium *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* graphic-controls.css */
/* Local Lucide SVGs: only the inner graphic changes, not its existing control.
   Source and license notices: assets/icons/lucide/. */
[data-graphic]::before {
  content: "";
  display: inline-block;
  inline-size: var(--graphic-size, 1em);
  block-size: var(--graphic-size, 1em);
  vertical-align: -.12em;
  background-color: currentColor;
  -webkit-mask: var(--graphic-image) center / contain no-repeat;
  mask: var(--graphic-image) center / contain no-repeat;
  pointer-events: none;
}

[data-graphic="arrow-up-right"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNNyA3aDEwdjEwIiAvPgogIDxwYXRoIGQ9Ik03IDE3IDE3IDciIC8+Cjwvc3ZnPgo="); }
[data-graphic="arrow-down"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTIgNXYxNCIgLz4KICA8cGF0aCBkPSJtMTkgMTItNyA3LTctNyIgLz4KPC9zdmc+Cg=="); }
[data-graphic="arrow-left"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtMTIgMTktNy03IDctNyIgLz4KICA8cGF0aCBkPSJNMTkgMTJINSIgLz4KPC9zdmc+Cg=="); }
[data-graphic="arrow-up"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtNSAxMiA3LTcgNyA3IiAvPgogIDxwYXRoIGQ9Ik0xMiAxOVY1IiAvPgo8L3N2Zz4K"); }
[data-graphic="chevron-down"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtNiA5IDYgNiA2LTYiIC8+Cjwvc3ZnPgo="); }
[data-graphic="chevron-left"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtMTUgMTgtNi02IDYtNiIgLz4KPC9zdmc+Cg=="); }
[data-graphic="chevron-right"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtOSAxOCA2LTYtNi02IiAvPgo8L3N2Zz4K"); }
[data-graphic="plus"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNNSAxMmgxNCIgLz4KICA8cGF0aCBkPSJNMTIgNXYxNCIgLz4KPC9zdmc+Cg=="); }
[data-graphic="minus"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNNSAxMmgxNCIgLz4KPC9zdmc+Cg=="); }
[data-graphic="check"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiIC8+Cjwvc3ZnPgo="); }
[data-graphic="pause"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cmVjdCB4PSIxNCIgeT0iMyIgd2lkdGg9IjUiIGhlaWdodD0iMTgiIHJ4PSIxIiAvPgogIDxyZWN0IHg9IjUiIHk9IjMiIHdpZHRoPSI1IiBoZWlnaHQ9IjE4IiByeD0iMSIgLz4KPC9zdmc+Cg=="); }
[data-graphic="play"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNNSA1YTIgMiAwIDAgMSAzLjAwOC0xLjcyOGwxMS45OTcgNi45OThhMiAyIDAgMCAxIC4wMDMgMy40NThsLTEyIDdBMiAyIDAgMCAxIDUgMTl6IiAvPgo8L3N2Zz4K"); }
[data-graphic="x"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTggNiA2IDE4IiAvPgogIDxwYXRoIGQ9Im02IDYgMTIgMTIiIC8+Cjwvc3ZnPgo="); }
[data-graphic="maximize-2"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTUgM2g2djYiIC8+CiAgPHBhdGggZD0ibTIxIDMtNyA3IiAvPgogIDxwYXRoIGQ9Im0zIDIxIDctNyIgLz4KICA8cGF0aCBkPSJNOSAyMUgzdi02IiAvPgo8L3N2Zz4K"); }
[data-graphic="scan-eye"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMyA3VjVhMiAyIDAgMCAxIDItMmgyIiAvPgogIDxwYXRoIGQ9Ik0xNyAzaDJhMiAyIDAgMCAxIDIgMnYyIiAvPgogIDxwYXRoIGQ9Ik0yMSAxN3YyYTIgMiAwIDAgMS0yIDJoLTIiIC8+CiAgPHBhdGggZD0iTTcgMjFINWEyIDIgMCAwIDEtMi0ydi0yIiAvPgogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEiIC8+CiAgPHBhdGggZD0iTTE4Ljk0NCAxMi4zM2ExIDEgMCAwIDAgMC0uNjYgNy41IDcuNSAwIDAgMC0xMy44ODggMCAxIDEgMCAwIDAgMCAuNjYgNy41IDcuNSAwIDAgMCAxMy44ODggMCIgLz4KPC9zdmc+Cg=="); }
[data-graphic="zoom-in"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4IiAvPgogIDxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIgLz4KICA8bGluZSB4MT0iMTEiIHgyPSIxMSIgeTE9IjgiIHkyPSIxNCIgLz4KICA8bGluZSB4MT0iOCIgeDI9IjE0IiB5MT0iMTEiIHkyPSIxMSIgLz4KPC9zdmc+Cg=="); }
[data-graphic="zoom-out"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4IiAvPgogIDxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIgLz4KICA8bGluZSB4MT0iOCIgeDI9IjE0IiB5MT0iMTEiIHkyPSIxMSIgLz4KPC9zdmc+Cg=="); }
[data-graphic="factory"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTIgMTZoLjAxIiAvPgogIDxwYXRoIGQ9Ik0xNiAxNmguMDEiIC8+CiAgPHBhdGggZD0iTTMgMTlhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0yVjguNWEuNS41IDAgMCAwLS43NjktLjQyMmwtNC40NjIgMi44NDRBLjUuNSAwIDAgMSAxNSAxMC41di0yYS41LjUgMCAwIDAtLjc2OS0uNDIyTDkuNzcgMTAuOTIyQS41LjUgMCAwIDEgOSAxMC41VjVhMiAyIDAgMCAwLTItMkg1YTIgMiAwIDAgMC0yIDJ6IiAvPgogIDxwYXRoIGQ9Ik04IDE2aC4wMSIgLz4KPC9zdmc+Cg=="); }
[data-graphic="gift"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTIgN3YxNCIgLz4KICA8cGF0aCBkPSJNMjAgMTF2OGEyIDIgMCAwIDEtMiAySDZhMiAyIDAgMCAxLTItMnYtOCIgLz4KICA8cGF0aCBkPSJNNy41IDdhMSAxIDAgMCAxIDAtNUE0LjggOCAwIDAgMSAxMiA3YTQuOCA4IDAgMCAxIDQuNS01IDEgMSAwIDAgMSAwIDUiIC8+CiAgPHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjQiIHJ4PSIxIiAvPgo8L3N2Zz4K"); }
[data-graphic="zap"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTUuOTE0IDRhMS41IDEuNSAwIDAwLTIuNDc0LTEuNTYxbC05IDlBMS41IDEuNSAwIDAwNS41IDE0aDQuMDAyYS41LjUgMCAwMS40NzEuNjY2TDguMDg2IDIwYTEuNSAxLjUgMCAwMDIuNDc1IDEuNTZsOS05QTEuNSAxLjUgMCAwMDE4LjUgMTBoLTMuOTk3YS41LjUgMCAwMS0uNDcyLS42Njd6IiAvPgo8L3N2Zz4K"); }
[data-graphic="wrench"] { --graphic-image: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTQuNyA2LjNhMSAxIDAgMCAwIDAgMS40bDEuNiAxLjZhMSAxIDAgMCAwIDEuNCAwbDMuMTA2LTMuMTA1Yy4zMi0uMzIyLjg2My0uMjIuOTgzLjIxOGE2IDYgMCAwIDEtOC4yNTkgNy4wNTdsLTcuOTEgNy45MWExIDEgMCAwIDEtMi45OTktM2w3LjkxLTcuOTFhNiA2IDAgMCAxIDcuMDU3LTguMjU5Yy40MzguMTIuNTQuNjYyLjIxOS45ODR6IiAvPgo8L3N2Zz4K"); }

/* These circles belong to the existing presentation. Their boxes are retained. */
.reference-image-arrow[data-graphic],
.reference-build-toggle[data-graphic] {
  --graphic-size: 18px;
}

/* A small visual accent stays inside each action's existing padding. */
.button > [data-graphic]:last-child {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
}
.button > [data-graphic]:last-child::before {
  position: relative;
  z-index: 1;
  transition: transform 180ms ease;
}
.button > [data-graphic]:last-child::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 1.65em;
  block-size: 1.65em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: currentColor;
  opacity: .09;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.button:focus-visible > [data-graphic]:last-child::after {
  opacity: .18;
}
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .button:hover > [data-graphic="arrow-up-right"]:last-child::before {
    transform: translate(1px, -1px);
  }
  .button:hover > [data-graphic]:last-child::after { opacity: .16; }
}
html[data-motion="off"] .button > [data-graphic]:last-child::before,
html[data-motion="off"] .button > [data-graphic]:last-child::after {
  transition: none;
}
html[data-motion="off"] .button > [data-graphic]:last-child::before { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .button > [data-graphic]:last-child::before,
  .button > [data-graphic]:last-child::after { transition: none; }
  .button > [data-graphic]:last-child::before { transform: none !important; }
}
@media (forced-colors: active) {
  [data-graphic]::before { forced-color-adjust: none; background-color: CanvasText; }
  .button > [data-graphic]:last-child::after { display: none; }
}

/* screenshot-inspector.css */
/* The IMB capture is taller than the shared window. Keep its header and hero,
   cropping only the lower excess rather than letterboxing the whole capture. */
.hero-project-main[data-current-project="imb"] > img,
.home-page .reference-premium[data-reference-project="imb"] .reference-visual img {
  object-fit: cover;
  object-position: center top;
}
:root { scrollbar-gutter: stable; }
html.screenshot-modal-open { overflow: hidden; }
.hero-project-stage, .reference-window, body[data-project] .image-frame { position: relative; }
.screenshot-open {
  position: absolute; z-index: 5; top: 0; right: 0;
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-left: 1px solid #a9717144;
  background: #322125; color: #f4b1a6; cursor: pointer;
}
.hero-project-stage .screenshot-open { top: 1px; right: 1px; border-radius: 0 8px 0 0; }
.hero-project-stage .project-browser { height: 44px; }
.reference-window .reference-window-bar,
body[data-project] .image-frame .frame-top { min-height: 44px; }
.hero-project-stage .project-browser > span:last-child,
.reference-window:has(.screenshot-open) .reference-window-index,
.image-frame:has(.screenshot-open) .frame-top > span:last-child { visibility: hidden; }
.screenshot-open:hover { background: #6d2630; color: #fff0e9; }
.screenshot-open:focus-visible { outline: 2px solid #ffb3a5; outline-offset: -4px; }
.screenshot-open [data-graphic]::before { width: 17px; height: 17px; }
.showcase-switch button { display: flex; align-items: center; gap: 7px; padding-inline: 8px; }
.showcase-switch button > i { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 24px; border: 1px solid #b77b7044; border-radius: 4px; background: #f18b7910; color: #d8aaa0; }
.showcase-switch button > i::before { width: 14px; height: 14px; }
.showcase-switch button .showcase-name { margin: 0; font-family: inherit; font-size: 11px; color: inherit; }
.showcase-switch button[aria-pressed="true"] > i { color: #ffe9df; border-color: #efb2a67a; background: #f18b7920; }
.motion-toggle > i { display: inline-flex; color: var(--accent); --graphic-size: 15px; }
.screenshot-inspector [data-graphic] { --graphic-size: 18px; }
.screenshot-inspector {
  margin: auto; padding: 0; width: min(1180px, calc(100% - 32px));
  max-width: none; max-height: calc(100dvh - 32px);
  border: 1px solid #8f5a5e; border-radius: 14px;
  background: #201719; color: #f9eee7;
  box-shadow: 0 30px 100px #000a; overflow: auto;
  font-family: var(--font); color-scheme: dark;
}
.screenshot-inspector::backdrop { background: #100b0de8; backdrop-filter: blur(8px); }
.screenshot-heading { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 20px 24px 16px; }
.screenshot-heading > div { min-width: 0; }
.screenshot-heading small { display: block; color: #ed9d94; font-size: 9px; letter-spacing: .13em; line-height: 1.7; }
.screenshot-heading h2 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.035em; line-height: 1.25; color: #f9eee7; }
.screenshot-inspector button { min-height: 44px; min-width: 44px; padding: 9px 13px; border: 1px solid #7b5155; border-radius: 6px; background: #342327; color: #efdad1; font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.screenshot-inspector button:hover { border-color: #cf7a75; background: #4a2b32; }
.screenshot-inspector button:focus-visible { outline: 2px solid #ffb5a7; outline-offset: 3px; }
.screenshot-inspector button:disabled { opacity: .35; cursor: default; }
.screenshot-inspector button[aria-pressed="true"] { background: #a72230; color: #fff6ef; border-color: #df7975; }
.screenshot-inspector .screenshot-close { padding: 9px; flex-shrink: 0; }
.screenshot-toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 0 24px 16px; }
.screenshot-modes, .screenshot-navigation { display: flex; align-items: center; gap: 7px; }
.screenshot-count { min-width: 54px; text-align: center; font-size: 12px; color: #d5b6ac; font-variant-numeric: tabular-nums; }
.screenshot-canvas { display: flex; align-items: center; justify-content: center; height: min(65dvh, 680px); min-height: 160px; overflow: auto; overscroll-behavior: contain; border-block: 1px solid #715057; background: radial-gradient(ellipse at center, #473137, #171113 75%); padding: 12px; }
.screenshot-canvas:focus-visible { outline: 2px solid #ffb5a7; outline-offset: -4px; }
.screenshot-canvas img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(calc(65dvh - 28px), 652px); object-fit: contain; box-shadow: 0 8px 35px #0004; }
.screenshot-inspector[data-view="detail"] .screenshot-canvas { display: block; }
.screenshot-inspector[data-view="detail"] .screenshot-canvas img { width: var(--capture-width); max-width: none; max-height: none; height: auto; }
.screenshot-error { color: #ffd8cb; font-size: 14px; text-align: center; padding: 30px; }
.screenshot-error[hidden], .screenshot-canvas img[hidden] { display: none; }
#screenshot-help { font-size: 12px; line-height: 1.8; margin: 0; padding: 14px 24px 18px; color: #d3b9ae; }
@media (max-width: 650px) {
  .screenshot-inspector { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 10px; }
  .screenshot-heading { padding: 15px 14px; gap: 12px; }
  .screenshot-heading h2 { font-size: 19px; }
  .screenshot-toolbar { padding: 0 14px 12px; flex-wrap: wrap; }
  .screenshot-inspector button { font-size: 11px; padding-inline: 10px; gap: 6px; }
  .screenshot-modes [data-graphic]::before { width: 18px; height: 18px; }
  .screenshot-navigation { margin-left: auto; }
  .screenshot-canvas { height: 48dvh; padding: 8px; }
  .screenshot-canvas img { max-height: calc(48dvh - 20px); }
  #screenshot-help { padding: 12px 14px 15px; font-size: 11px; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .screenshot-inspector[open] { animation: inspector-enter .2s ease-out; }
  @keyframes inspector-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* brand.css */
/* Web adaptation of the JB monogram developed on 29 October 2026.
   The mark is a native vector; the accessible wordmark remains live HTML. */
.brand .brand-mark {
  display: block;
  flex: 0 0 auto;
  width: 48px;
  height: auto;
  aspect-ratio: 580 / 464;
  object-fit: contain;
}
.brand:has(.brand-mark) {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand:has(.brand-mark) .brand-name {
  font-family: var(--jbit-font-body, 'Manrope', Arial, sans-serif);
  font-size: 36px;
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.065em;
}
.brand:has(.brand-mark) .brand-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--jbit-font-body, 'Manrope', Arial, sans-serif);
  font-size: 6px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .15em;
  color: currentColor;
  opacity: .82;
}
.site-footer .brand:has(.brand-mark) .brand-mark {
  width: 56px;
}
@media (max-width: 650px) {
  .brand:has(.brand-mark) { gap: 9px; }
  .brand .brand-mark { width: 40px; }
  .brand:has(.brand-mark) .brand-name { font-size: 31px; }
  .brand:has(.brand-mark) .brand-sub { font-size: 5.3px; margin-top: 5px; }
  .site-footer .brand:has(.brand-mark) .brand-mark { width: 46px; }
}

/* hero-experience.css */
/* The homepage's visual direction: generous editorial type and a sculptural brand. */
.home-page { --cream: #f2ede6; }
.home-page .section-shell { width: min(1360px, calc(100% - 112px)); }
.home-page .site-header { height: 98px; max-width: 1472px; border-bottom-color: #ffffff12; background: #131212ed; }
.home-page .desktop-nav { gap: 28px; margin-left: 0; }
.home-page .desktop-nav a { font-size: 12px; }
.home-page .hero { grid-template-columns: 1.06fr 1fr; gap: 24px; padding-block: 66px 60px; align-items: center; }
.home-page .hero-copy { padding-block: 15px; }
.home-page .hero .eyebrow { font-size: 10px; letter-spacing: .15em; margin-bottom: 24px; }
.home-page .hero h1 { font-size: clamp(58px, 6.6vw, 96px); line-height: 1.02; letter-spacing: -.065em; white-space: normal; }
.home-page .hero h1 em { font-family: var(--jbit-font-editorial); font-style: italic; font-weight: 400; letter-spacing: -.07em; background: none; color: #f16b61; }
.home-page .hero-description { font-size: 16px; line-height: 1.85; max-width: 440px; color: #b9b3b0; margin-top: 30px; }
.home-page .hero-actions { gap: 26px; margin-top: 32px; }
.home-page .hero-actions .button { min-height: 56px; border-radius: 6px; font-size: 12px; }
.home-page .hero-actions .text-link { font-size: 12px; }
.home-page .hero-availability { margin-top: 20px; max-width: 440px; font-size: 11px; line-height: 1.7; }
.home-page .founder-intro { margin-top: 32px; padding-top: 22px; border-top: 1px solid #ffffff15; width: fit-content; max-width: 400px; }
.home-page .founder-intro strong { font-size: 12px; }
.home-page .founder-intro > span { font-size: 11px; }
.hero-studio { min-width: 0; position: relative; isolation: isolate; }
.studio-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-inline: 12px; color: #c5bdb7; font-size: 10px; letter-spacing: .02em; }
.studio-heading > span { max-width: 210px; }
.studio-heading .motion-toggle { max-width: none; font-size: 10px; }
.studio-stage { height: clamp(340px, 34vw, 480px); position: relative; isolation: isolate; }
.studio-sculpture { position: absolute; width: 112%; max-width: none; height: 112%; left: -6%; top: -10%; object-fit: contain; pointer-events: none; mask-image: radial-gradient(ellipse 64% 59% at 50% 48%, #000 48%, transparent 86%); transition: transform 900ms cubic-bezier(.22,1,.36,1), opacity 700ms; }
.studio-panel { position: absolute; z-index: 2; box-shadow: 0 24px 70px #0007; animation: studio-enter .5s cubic-bezier(.22,1,.36,1) both; }
.studio-web { width: 53%; right: -1%; bottom: 10px; padding: 14px; color: #261a19; background: #f1e9df; border: 1px solid #ffffff88; border-radius: 10px; transform: rotate(4deg); }
.studio-web-bar { display: flex; align-items: center; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid #40201b22; }
.studio-web-bar i { width: 4px; height: 4px; background: #ae9790; border-radius: 50%; }
.studio-web-bar b { margin-left: auto; font-size: 9px; font-family: var(--display); letter-spacing: -.04em; }
.studio-web-body { padding-top: 16px; display: grid; grid-template-columns: 1fr 36%; gap: 12px; align-items: center; }
.studio-web-body small { font-size: 6px; font-weight: 700; letter-spacing: .08em; display: block; }
.studio-web-body strong { font-family: var(--display); font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.05em; line-height: 1.08; display: block; margin-block: 9px; }
.studio-web-body span { font-size: 7px; display: inline-block; padding: 5px 7px; border-radius: 2px; background: #b52d35; color: #fff; }
.studio-web-art { align-self: stretch; min-height: 94px; overflow: hidden; border-radius: 3px 28px 3px 3px; background: #d64340; position: relative; }
.studio-web-art::before { content: ''; position: absolute; inset: 18% -25% 18% 25%; border: 12px solid #f7beab; border-radius: 45%; transform: rotate(-28deg); }
.studio-web-art::after { content: ''; position: absolute; height: 17px; width: 80%; background: #2f2423; top: 48%; left: -12%; transform: rotate(-28deg); }
.studio-workspace { left: 9%; right: 2%; bottom: 32px; padding: 24px; background: #f3eee8; color: #2b2321; border: 1px solid #ffffff8a; border-radius: 12px; transform: rotate(-3deg); }
.studio-workspace header { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 17px; }
.studio-workspace header strong { font: 500 23px var(--display); letter-spacing: -.04em; }
.studio-workspace header small { font-size: 7px; font-weight: 700; letter-spacing: .1em; align-self: center; color: #746763; }
.studio-task { display: flex; align-items: center; gap: 13px; padding-block: 13px; border-top: 1px solid #36231e1a; font-size: 12px; }
.studio-task i { display: grid; place-items: center; width: 26px; height: 26px; font-style: normal; font-size: 11px; background: #e2d9cd; border-radius: 50%; }
.studio-task:first-of-type i { color: #fff; background: #a93238; }
.studio-task b { margin-left: auto; color: #a93238; }
.hero-studio[data-mode=software] .studio-sculpture { transform: translate(-17%, -12%) scale(.84) rotate(-8deg); opacity: .8; }
.studio-workflow { left: 0; right: 0; bottom: 25px; padding: 24px 20px; background: #251b1ae8; border: 1px solid #ab64554a; border-radius: 14px; backdrop-filter: blur(14px); }
.studio-workflow ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0; margin: 0; gap: 24px; }
.studio-workflow li { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.studio-workflow li:not(:last-child)::after { content: '→'; position: absolute; right: -22px; top: 17px; color: #ff8d78; }
.studio-workflow i { width: 60px; height: 60px; border: 1px solid #d08a694f; background: #422927; border-radius: 16px; display: grid; place-items: center; font: 500 25px var(--display); color: #ffb6a2; }
.studio-workflow li:nth-child(2) i { background: #c84442; color: #fff; }
.studio-workflow li span { font-size: 11px; text-align: center; }
.studio-workflow p { margin-top: 22px; padding-top: 15px; border-top: 1px solid #ffffff18; text-align: center; color: #c9b2a9; font-size: 11px; }
.hero-studio[data-mode=automation] .studio-sculpture { transform: translate(9%, -15%) scale(.78) rotate(8deg); opacity: .75; }
.studio-choices { display: grid; grid-template-columns: .85fr .85fr 1.3fr; border-bottom: 1px solid #ffffff22; margin-top: 12px; }
.studio-choices button { position: relative; min-height: 53px; display: flex; justify-content: center; gap: 10px; align-items: center; background: none; border: 0; color: #b9afaa; font-size: 12px; padding: 9px 5px; }
.studio-choices button > i { font-size: 8px; font-style: normal; color: #8b7d77; }
.studio-choices button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #f16b61; transform: scaleX(0); transition: transform .3s; }
.studio-choices button[aria-pressed=true] { color: #fff5ee; }
.studio-choices button[aria-pressed=true]::after { transform: scaleX(1); }
.studio-choices button[aria-pressed=true] > i { color: #f69a88; }
.studio-caption { padding: 22px 5px 0; min-height: 159px; }
.studio-caption h2 { font: 500 22px/1.2 var(--display); letter-spacing: -.035em; max-width: 100%; }
.studio-caption p { font-size: 12px; color: #b4aaa5; margin-top: 9px; min-height: 3.4em; max-width: 390px; }
.studio-next { display: inline-flex; gap: 15px; align-items: center; font-size: 11px; font-weight: 700; color: #ffc0ae; margin-top: 12px; min-height: 32px; }
.studio-next > b { font-size: 18px; font-weight: 400; }
.home-page .section-heading h2 { font-size: clamp(38px, 4.5vw, 64px); }
.home-page .services { padding-block: 105px 60px; }
.home-page .service-grid { display: block; border-top: 1px solid #ffffff23; }
.home-page .service-card { display: grid; grid-template-columns: 66px minmax(0,1fr) minmax(0,1.05fr); align-items: center; column-gap: 34px; row-gap: 12px; background: none; border: 0; border-bottom: 1px solid #ffffff23; border-radius: 0; padding: 34px 0; box-shadow: none; }
.home-page .service-card .service-top { margin: 0; grid-column: 1; grid-row: 1/3; align-self: start; padding-top: 7px; }
.home-page .service-icon { width: 52px; height: 52px; border-radius: 13px; background: #ee675711; }
.home-page .service-number { display: none; }
.home-page .service-card h3 { grid-row: 1/3; grid-column: 2; font-size: clamp(30px,3vw,42px); }
.home-page .service-card > p { grid-row: 1; grid-column: 3; font-size: 14px; margin: 0; max-width: 440px; line-height: 1.8; }
.home-page .service-card .service-link { grid-row: 2; grid-column: 3; border: 0; padding: 8px 0 0; font-size: 12px; justify-content: flex-start; gap: 24px; color: #f1c2b8; }
.home-page .service-card[data-depth]::after { display: none; }
.home-page .service-card[data-depth].depth-active { transform: none; box-shadow: none; border-color: #b65c54; }
.home-page .service-footnote { font-size: 12px; }
.home-page .service-deep-links { display: none; }
.home-page .process { padding-block: 65px 105px; }
.home-page .process-grid { border-top: 1px solid #ffffff22; padding-top: 28px; }
.home-page .process-grid article { background: none; }
.home-page .about { padding-block: 32px 70px; }
.home-page .about-copy h2 { font-size: clamp(36px,4vw,56px); }
.home-page .about-art.portrait-card { border-radius: 6px; }
.home-page .faq { padding-block: 65px 110px; }
.home-page .contact { margin-bottom: 70px; border-radius: 10px; }
@keyframes studio-enter { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (hover:hover) { .studio-choices button:hover { color: #fff0e8; } .studio-next:hover { color: #fff; } }
@media (max-width:1100px) {
  .home-page .section-shell { width: calc(100% - 72px); }
  .home-page .hero { gap: 26px; padding-top: 45px; }
  .home-page .hero h1 { font-size: clamp(50px,6.5vw,70px); }
  .studio-heading { padding-inline: 0; }
  .studio-heading > span { max-width: 155px; }
  .studio-stage { height: 365px; }
  .studio-caption h2 { font-size: 20px; }
  .studio-choices button { font-size: 11px; gap: 5px; }
  .studio-workspace { padding: 18px; left: 3%; }
  .home-page .hero-description { font-size: 15px; }
}
@media (max-width:800px) {
  .home-page .hero { grid-template-columns: 1fr; padding-top: 38px; gap: 38px; }
  .home-page .hero-copy { max-width: 600px; }
  .home-page .hero h1 { font-size: clamp(54px,10vw,78px); }
  .home-page .hero-description { max-width: 510px; font-size: 16px; }
  .hero-studio { width: 100%; max-width: 600px; margin: auto; }
  .studio-stage { height: 440px; }
  .studio-heading > span { max-width: none; }
  .studio-choices button { font-size: 12px; }
  .studio-web-body strong { font-size: 25px; }
  .home-page .service-card { column-gap: 22px; grid-template-columns: 52px minmax(0,1fr) minmax(0,1.1fr); }
}
@media (max-width:650px) {
  .home-page .section-shell { width: calc(100% - 40px); }
  .home-page .site-header { height: 80px; padding-inline: 20px; }
  .home-page .hero { gap: 30px; padding-block: 26px 40px; }
  .home-page .hero .eyebrow { font-size: 8px; letter-spacing: .09em; margin-bottom: 22px; }
  .home-page .hero h1 { font-size: clamp(44px, 11.6vw, 74px); }
  .home-page .hero-description { font-size: 15px; margin-top: 24px; line-height: 1.8; }
  .home-page .hero-actions { gap: 19px; margin-top: 26px; }
  .home-page .hero-actions .button { min-height: 52px; font-size: 11px; padding-inline: 18px; }
  .home-page .hero-actions .text-link { font-size: 11px; }
  .home-page .hero-availability { display: none; }
  .home-page .hero .founder-intro { display: none; }
  .studio-stage { height: clamp(300px, 91vw, 425px); }
  .studio-sculpture { width: 114%; left: -7%; }
  .studio-web { width: 60%; right: 0; padding: 11px; }
  .studio-web-body strong { font-size: 19px; }
  .studio-heading { font-size: 9px; }
  .studio-heading .motion-toggle { font-size: 9px; max-width: 115px; }
  .studio-choices { margin-top: 8px; }
  .studio-choices button { font-size: 11px; gap: 6px; }
  .studio-choices button > i { display: none; }
  .studio-caption { min-height: 165px; padding: 21px 0 0; }
  .studio-caption h2 { font-size: 22px; }
  .studio-caption p { font-size: 12px; }
  .studio-workspace { padding: 18px; right: 1%; left: 1%; }
  .studio-workspace header strong { font-size: 21px; }
  .studio-workspace header small { font-size: 6px; }
  .studio-workflow { padding: 22px 12px; }
  .studio-workflow ol { gap: 16px; }
  .studio-workflow li:not(:last-child)::after { right: -17px; }
  .studio-workflow i { width: 53px; height: 53px; }
  .studio-workflow li span { font-size: 10px; }
  .home-page .section-heading h2 { font-size: 38px; }
  .home-page .services { padding-block: 55px 25px; }
  .home-page .service-card { grid-template-columns: 44px minmax(0,1fr); gap: 18px; padding-block: 28px; }
  .home-page .service-card .service-top { grid-row: 1; padding-top: 3px; }
  .home-page .service-icon { width: 40px; height: 40px; border-radius: 10px; }
  .home-page .service-card h3 { grid-row: 1; grid-column: 2; font-size: 31px; }
  .home-page .service-card > p { grid-column: 2; grid-row: 2; font-size: 13px; }
  .home-page .service-card .service-link { grid-column: 2; grid-row: 3; font-size: 11px; }
  .home-page .service-footnote { font-size: 11px; align-items: flex-start; }
  .home-page .process { padding-block: 45px 65px; }
  .home-page .about { padding-block: 0 40px; }
  .home-page .faq { padding-block: 30px 65px; }
  .home-page .contact { margin-bottom: 40px; }
}
@media(prefers-reduced-motion:reduce) { .studio-panel { animation: none; } .studio-sculpture { transition: none; } }

/* home-demo.css */
/* An isolated, in-memory product experience on the public homepage. */
.home-demo { --hd-ink: #302a28; --hd-muted: #716762; --hd-paper: #f7f3ed; --hd-line: #ddd5cb; }
.hd-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; margin-bottom: 48px; }
.hd-heading h2 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.055em; }
.hd-intro { max-width: 410px; justify-self: end; }
.hd-intro > p { font-size: 15px; line-height: 1.85; color: var(--muted, #afadac); }
.hd-full-link { display: inline-flex; align-items: center; gap: 30px; margin-top: 24px; padding-block: 7px; border-bottom: 1px solid #8b7772; font-size: 13px; font-weight: 700; color: #f3ece6; }
.hd-full-link > span:last-child { font-size: 21px; line-height: 1; }
.hd-workspace { overflow: hidden; border: 1px solid #51413d; border-radius: 14px; background: #211c1b; box-shadow: 0 30px 90px #00000025; }
.hd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 30px; border-bottom: 1px solid #463b36; }
.hd-app-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hd-app-title > strong { font-family: var(--display, 'Space Grotesk', sans-serif); font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.hd-app-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #d15a503f; border-radius: 9px; color: #ff8174; background: #d9363c15; }
.hd-app-icon svg { width: 20px; height: 20px; }
.hd-demo-label { display: flex; gap: 8px; align-items: center; flex-shrink: 0; font-size: 10px; line-height: 1.5; letter-spacing: .1em; color: #c9bab1; }
.hd-demo-label > i { width: 5px; height: 5px; background: #f28172; border-radius: 50%; }
.hd-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); color: var(--hd-ink); background: var(--hd-paper); }
.hd-body > * { min-width: 0; }
.hd-sidebar { padding: 34px 27px 28px; background: #eae3da; border-right: 1px solid var(--hd-line); display: flex; flex-direction: column; }
.hd-sidebar-label { font-size: 11px; font-weight: 700; color: #776960; }
.hd-journey { list-style: none; margin: 29px 0 0; padding: 0; display: grid; gap: 0; }
.hd-journey li { display: flex; align-items: center; gap: 12px; position: relative; padding-bottom: 29px; color: #7e736c; font-size: 12px; line-height: 1.55; }
.hd-journey li:last-child { padding-bottom: 0; }
.hd-journey li:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 35px; bottom: 3px; width: 1px; background: #cfc2b6; }
.hd-step-marker { display: grid; place-items: center; flex: 0 0 33px; height: 33px; border: 1px solid #c8baad; border-radius: 50%; font-family: var(--display, 'Space Grotesk', sans-serif); font-size: 10px; }
.hd-journey li[aria-current="step"] { color: #372922; font-weight: 700; }
.hd-journey li[aria-current="step"] .hd-step-marker { color: #a32c2f; border-color: #b53636; background: #f7ece5; box-shadow: 0 0 0 4px #b5363608; }
.hd-journey li[data-complete="true"] { color: #7b3933; }
.hd-journey li[data-complete="true"] .hd-step-marker { color: #fff3e9; background: #ae3636; border-color: #ae3636; }
.hd-journey li[data-complete="true"]::after { background: #b44c43; }
.hd-progress { margin-top: auto; padding-top: 40px; }
.hd-progress-count { font-family: var(--display, 'Space Grotesk', sans-serif); font-size: 28px; line-height: 1; letter-spacing: -.06em; color: #493b34; }
.hd-progress-track { height: 3px; margin-top: 14px; background: #d1c4b7; overflow: hidden; }
.hd-progress-track i { display: block; width: 0; height: 100%; background: #b73737; transition: width .35s ease; }
.hd-current { margin-top: 12px; min-height: 40px; font-size: 11px; color: #77675d; line-height: 1.7; }
.hd-reset { display: inline-flex; align-items: center; align-self: flex-start; justify-content: flex-start; gap: 7px; min-height: 44px; border: 0; padding: 9px 0; margin-top: 15px; color: #66564e; font-size: 11px; background: transparent; }
.hd-reset svg { width: 15px; height: 15px; }
.hd-content { padding: 32px 38px 38px; min-height: 410px; }
.hd-inbox-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 22px; color: #7c6e64; font-size: 11px; }
.hd-inbox-header > span:first-child { font-size: 17px; font-family: var(--display, 'Space Grotesk', sans-serif); letter-spacing: -.03em; color: #382c25; }
.hd-enquiry { border: 1px solid var(--hd-line); border-radius: 8px; background: #fffcf7; box-shadow: 0 3px 9px #43311f05; }
.hd-enquiry-heading { display: flex; align-items: center; gap: 12px; padding: 22px; border-bottom: 1px solid #e9e1d6; }
.hd-avatar { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid #e1c3ae; background: #f6e9da; border-radius: 10px; font-family: var(--display, 'Space Grotesk', sans-serif); font-size: 19px; color: #875139; }
.hd-enquiry-heading > div { min-width: 0; }
.hd-enquiry-heading strong { display: block; font-size: 13px; line-height: 1.55; font-weight: 700; }
.hd-enquiry-heading p { font-size: 11px; line-height: 1.6; color: var(--hd-muted); margin-top: 2px; }
.hd-status { margin-left: auto; flex-shrink: 0; border: 1px solid #e3c7b6; border-radius: 5px; padding: 3px 8px; color: #915036; background: #fbefdf; font-size: 10px; line-height: 1.5; }
.hd-status[data-active="true"] { border-color: #d8c8c3; background: #f3e8e4; color: #7b3d36; }
.hd-enquiry-preview { padding: 30px 24px 27px; }
.hd-enquiry-preview > p { max-width: 400px; margin-bottom: 28px; font-size: clamp(20px, 2vw, 28px); font-family: var(--display, 'Space Grotesk', sans-serif); letter-spacing: -.035em; line-height: 1.45; color: #6a574b; }
.home-demo .hd-primary { display: inline-flex; align-items: center; justify-content: center; gap: 19px; min-height: 44px; border: 1px solid #ad3033; border-radius: 5px; padding: 11px 16px; background: #b33336; color: #fff9f2; font-size: 11px; font-weight: 700; line-height: 1.6; transition: background .2s, border-color .2s; }
.hd-primary > span:last-child:not(:first-child) { font-size: 17px; line-height: 1; }
.hd-enquiry-detail { padding: 23px; }
.hd-from { display: flex; flex-wrap: wrap; gap: 7px 12px; font-size: 10px; line-height: 1.6; color: #847469; }
.hd-from > span:last-child { color: #5c4d43; }
.home-demo .hd-enquiry-detail h3 { margin-top: 17px; font-size: 24px; line-height: 1.2; letter-spacing: -.04em; }
.hd-message { margin-top: 12px; max-width: 590px; font-size: 13px; color: #6a5b51; line-height: 1.85; }
.hd-handling { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 23px; padding-top: 20px; border-top: 1px solid #e9e1d6; }
.hd-field-caption { display: block; color: #8b786a; font-size: 10px; line-height: 1.5; }
.hd-status-text { display: block; font-size: 12px; line-height: 1.6; margin-top: 4px; font-weight: 600; }
.hd-next { margin-top: 22px; }
.hd-editor > label { display: block; margin-bottom: 9px; color: #46382f; font-size: 12px; font-weight: 700; line-height: 1.6; }
.hd-input-row { display: flex; gap: 8px; }
.hd-input-row input { width: 100%; min-width: 0; border: 1px solid #cfc0b1; border-radius: 5px; padding: 11px 13px; min-height: 44px; background: #fffdf9; color: #372c26; font-size: 12px; line-height: 1.6; }
.hd-input-row input::placeholder { color: #8a7767; }
.hd-input-row .hd-save { flex-shrink: 0; }
.hd-input-row input[aria-invalid="true"] { border-color: #a32b2f; }
.hd-error { margin-top: 8px; font-size: 11px; color: #a32b2f; }
.hd-saved { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #d9c5b8; border-radius: 5px; background: #f7eee5; }
.hd-saved-icon { display: grid; place-items: center; flex: 0 0 27px; height: 27px; border-radius: 50%; background: #c4665017; color: #a33c32; }
.hd-saved-icon svg { width: 19px; height: 19px; }
.hd-saved > div { min-width: 0; }
.hd-saved-value { margin-top: 4px; font-size: 13px; line-height: 1.6; color: #4c352c; overflow-wrap: anywhere; }
.hd-edit { flex-shrink: 0; margin-left: auto; min-height: 44px; padding: 7px 2px; border: 0; background: transparent; color: #8d4137; font-size: 10px; text-decoration: underline; text-underline-offset: 4px; }
.hd-result { display: flex; align-items: center; gap: 17px; margin: 24px 0 0; }
.hd-result-orbit { flex: 0 0 41px; color: #a95744; }
.hd-result-orbit svg { width: 41px; height: 41px; }
.home-demo .hd-result h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.035em; }
.hd-result p { font-size: 11px; line-height: 1.8; color: #7e6c60; margin-top: 6px; max-width: 475px; }
.hd-bottom { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 21px 30px; }
.hd-bottom > p { color: #b7a79d; font-size: 10px; line-height: 1.8; max-width: 470px; }
.hd-contact { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; color: #efc7bb; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.hd-contact > span:last-child { font-size: 19px; }
.hd-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.home-demo :is(a, button, input):focus-visible { outline: 2px solid #d05243; outline-offset: 4px; }
.home-demo button:disabled { cursor: default; }
@media (hover: hover) {
  .home-demo .hd-primary:hover { background: #99292e; border-color: #99292e; }
  .hd-reset:hover, .hd-edit:hover { color: #ad3033; }
  .hd-contact:hover, .hd-full-link:hover { color: #ff8f7d; }
}
@media (max-width: 1100px) {
  .hd-heading { gap: 32px; }
  .hd-body { grid-template-columns: 225px minmax(0, 1fr); }
  .hd-sidebar { padding: 28px 20px 24px; }
  .hd-content { padding: 25px; }
  .hd-enquiry-heading { flex-wrap: wrap; padding: 18px; }
  .hd-status { margin-left: 50px; }
  .hd-enquiry-detail { padding: 20px; }
  .hd-input-row { flex-wrap: wrap; }
  .hd-saved { flex-wrap: wrap; }
  .hd-saved > div { flex: 1; }
  .hd-edit { margin-left: 39px; }
}
@media (max-width: 760px) {
  .hd-heading { grid-template-columns: 1fr; gap: 23px; margin-bottom: 30px; }
  .hd-intro { justify-self: start; max-width: 500px; }
  .hd-intro > p { font-size: 14px; }
  .hd-full-link { margin-top: 17px; }
  .hd-topbar { padding: 17px 20px; }
  .hd-body { grid-template-columns: 1fr; }
  .hd-sidebar { padding: 20px; border-right: 0; border-bottom: 1px solid var(--hd-line); display: block; }
  .hd-sidebar-label { display: none; }
  .hd-journey { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hd-journey li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 0; font-size: 10px; }
  .hd-journey li:not(:last-child)::after { left: 41px; right: -8px; top: 16px; bottom: auto; width: auto; height: 1px; }
  .hd-progress { padding-top: 0; margin-top: 16px; display: flex; align-items: center; gap: 14px; }
  .hd-progress-count { font-size: 19px; flex-shrink: 0; }
  .hd-progress-track { margin: 0; flex: 1; }
  .hd-current { display: none; }
  .hd-reset { margin-top: 8px; }
  .hd-content { padding: 24px 20px; min-height: 0; }
  .hd-enquiry-heading { flex-wrap: nowrap; }
  .hd-status { margin-left: auto; }
  .hd-bottom { padding: 18px 20px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .hd-bottom > p { max-width: 480px; }
  .hd-demo-label { font-size: 8px; letter-spacing: .06em; }
}
@media (max-width: 650px) {
  .hd-saved { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
  .hd-saved-icon { width: 22px; height: 22px; margin-top: 2px; }
  .hd-edit { grid-column: 1 / -1; width: 100%; margin-left: 0; padding-left: 30px; text-align: left; }
}
@media (max-width: 480px) {
  .hd-topbar { padding: 16px; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .hd-app-title > strong { font-size: 16px; }
  .hd-demo-label { margin-left: 46px; }
  .hd-sidebar { padding: 20px 16px 10px; }
  .hd-journey { gap: 12px; }
  .hd-journey li { font-size: 9px; line-height: 1.6; }
  .hd-content { padding: 18px 12px 23px; }
  .hd-inbox-header { gap: 8px; padding: 0 4px 17px; font-size: 10px; }
  .hd-enquiry-heading { flex-wrap: wrap; padding: 16px; gap: 10px; }
  .hd-avatar { flex-basis: 32px; height: 32px; font-size: 16px; border-radius: 8px; }
  .hd-enquiry-heading strong { font-size: 11px; }
  .hd-enquiry-heading p { font-size: 10px; }
  .hd-status { margin-left: 42px; font-size: 9px; }
  .hd-enquiry-preview { padding: 23px 16px; }
  .hd-enquiry-preview > p { font-size: 22px; margin-bottom: 23px; }
  .hd-enquiry-detail { padding: 18px 16px; }
  .home-demo .hd-enquiry-detail h3 { font-size: 23px; }
  .hd-message { font-size: 12px; }
  .hd-handling { flex-direction: column; align-items: flex-start; gap: 15px; }
  .hd-input-row input { font-size: 16px; }
  .hd-input-row .hd-save { width: 100%; }
  .hd-saved { padding: 10px 8px; gap: 8px; }
  .hd-saved-value { font-size: 12px; }
  .hd-saved-icon { flex-basis: 22px; height: 22px; }
  .hd-edit { margin-left: 0; }
  .hd-result { gap: 12px; padding-inline: 5px; }
  .hd-result-orbit, .hd-result-orbit svg { width: 32px; height: 32px; flex-basis: 32px; }
  .home-demo .hd-result h3 { font-size: 20px; }
  .hd-bottom { padding: 18px 16px; }
  .hd-contact { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .home-demo *, .home-demo *::before, .home-demo *::after { transition: none !important; animation: none !important; } }
html[data-motion="off"] .home-demo * { transition: none !important; animation: none !important; }